refactoring to blade components

master
MadHowl 2026-03-27 16:01:40 +10:00
parent eef076234b
commit ff000fb2d5
10 changed files with 145 additions and 81 deletions

View File

@ -0,0 +1,11 @@
@props([
'type' => 'info',
'message' => '',
])
@if($message)
<div class="alert alert-{{ $type }} alert-dismissible fade show" role="alert">
{{ $message }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif

View File

@ -0,0 +1,5 @@
@props([
'message' => 'No items found.',
])
<p class="text-muted text-center py-3">{{ $message }}</p>

View File

@ -0,0 +1,12 @@
@props([
'type' => 'submit',
'variant' => 'primary',
'label',
'href' => null,
])
@if($href)
<a href="{{ $href }}" class="btn btn-{{ $variant }}">{{ $label }}</a>
@else
<button type="{{ $type }}" class="btn btn-{{ $variant }}">{{ $label }}</button>
@endif

View File

@ -0,0 +1,22 @@
@props([
'name',
'label',
'type' => 'text',
'value' => null,
'required' => false,
])
<div class="mb-3">
<label for="{{ $name }}" class="form-label">{{ $label }}</label>
<input type="{{ $type }}"
class="form-control @error($name) is-invalid @enderror"
id="{{ $name }}"
name="{{ $name }}"
value="{{ old($name, $value) }}"
{{ $required ? 'required' : '' }}>
@error($name)
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>

View File

@ -0,0 +1,27 @@
@props([
'name',
'label',
'options' => [],
'selected' => null,
'required' => false,
])
<div class="mb-3">
<label for="{{ $name }}" class="form-label">{{ $label }}</label>
<select class="form-select @error($name) is-invalid @enderror"
id="{{ $name }}"
name="{{ $name }}"
{{ $required ? 'required' : '' }}>
<option value="">-- Select --</option>
@foreach($options as $value => $labelOption)
<option value="{{ $value }}" {{ old($name, $selected) == $value ? 'selected' : '' }}>
{{ $labelOption }}
</option>
@endforeach
</select>
@error($name)
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>

View File

@ -0,0 +1,21 @@
@props([
'name',
'label',
'value' => null,
'rows' => 5,
'required' => false,
])
<div class="mb-3">
<label for="{{ $name }}" class="form-label">{{ $label }}</label>
<textarea class="form-control @error($name) is-invalid @enderror"
id="{{ $name }}"
name="{{ $name }}"
rows="{{ $rows }}"
{{ $required ? 'required' : '' }}>{{ old($name, $value) }}</textarea>
@error($name)
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>

View File

@ -0,0 +1,33 @@
@props([
'post',
'showActions' => true,
])
<div class="list-group-item">
<h5 class="mb-1">
<a href="{{ route('posts.show', $post) }}" class="text-decoration-none">
{{ $post->title }}
</a>
@if($post->user_id !== auth()->id())
<span class="badge bg-secondary">автор: {{ $post->user->name }}</span>
@endif
</h5>
<p class="mb-1">{{ Str::limit($post->content, 100) }}</p>
<small class="text-muted">{{ $post->created_at->diffForHumans() }}</small>
@if($showActions)
<div class="float-end">
@can('update-post', $post)
<a href="{{ route('posts.edit', $post) }}" class="btn btn-sm btn-primary">Edit</a>
@endcan
@can('delete-post', $post)
<form action="{{ route('posts.destroy', $post) }}" method="POST" class="d-inline">
@csrf
@method('DELETE')
<button type="submit" class="btn btn-sm btn-danger"
onclick="return confirm('Are you sure you want to delete this post?')">Delete</button>
</form>
@endcan
</div>
@endif
</div>

View File

@ -5,49 +5,20 @@
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-md-8"> <div class="col-md-8">
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header d-flex justify-content-between align-items-center">
Posts <span>Posts</span>
@can('create-post') @can('create-post')
<a href="{{ route('posts.create') }}" class="btn btn-primary float-end">Create New Post</a> <a href="{{ route('posts.create') }}" class="btn btn-primary">Create New Post</a>
@endcan @endcan
</div> </div>
<div class="card-body"> <div class="card-body">
@if(session('success')) <x-alert type="success" :message="session('success')" />
<div class="alert alert-success">
{{ session('success') }}
</div>
@endif
@if($posts->count() > 0) @if($posts->count() > 0)
<div class="list-group"> <div class="list-group">
@foreach($posts as $post) @foreach($posts as $post)
<div class="list-group-item"> <x-post-card :post="$post" />
<h5 class="mb-1">
<a href="{{ route('posts.show', $post) }}" class="text-decoration-none">
{{ $post->title }}
</a>
@if($post->user_id !== auth()->id())
<span class="badge bg-secondary">автор: {{ $post->user->name }}</span>
@endif
</h5>
<p class="mb-1">{{ Str::limit($post->content, 100) }}</p>
<small class="text-muted">{{ $post->created_at->diffForHumans() }}</small>
<div class="float-end">
@can('update-post', $post)
<a href="{{ route('posts.edit', $post) }}" class="btn btn-sm btn-primary">Edit</a>
@endcan
@can('delete-post', $post)
<form action="{{ route('posts.destroy', $post) }}" method="POST" class="d-inline">
@csrf
@method('DELETE')
<button type="submit" class="btn btn-sm btn-danger"
onclick="return confirm('Are you sure you want to delete this post?')">Delete</button>
</form>
@endcan
</div>
</div>
@endforeach @endforeach
</div> </div>
@ -55,7 +26,7 @@
{{ $posts->links() }} {{ $posts->links() }}
</div> </div>
@else @else
<p class="text-muted">No posts found.</p> <x-empty-state message="No posts found." />
@endif @endif
</div> </div>
</div> </div>

View File

@ -11,30 +11,11 @@
<form method="POST" action="{{ route('posts.store') }}"> <form method="POST" action="{{ route('posts.store') }}">
@csrf @csrf
<div class="mb-3"> <x-form.input name="title" label="Title" :value="old('title')" required />
<label for="title" class="form-label">Title</label> <x-form.textarea name="content" label="Content" :value="old('content')" required />
<input type="text" class="form-control @error('title') is-invalid @enderror"
id="title" name="title" value="{{ old('title') }}" required>
@error('title')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="mb-3"> <x-form.button type="submit" variant="primary" label="Create Post" />
<label for="content" class="form-label">Content</label> <x-form.button variant="secondary" label="Cancel" href="{{ route('home') }}" />
<textarea class="form-control @error('content') is-invalid @enderror"
id="content" name="content" rows="5" required>{{ old('content') }}</textarea>
@error('content')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<button type="submit" class="btn btn-primary">Create Post</button>
<a href="{{ route('home') }}" class="btn btn-secondary">Cancel</a>
</form> </form>
</div> </div>
</div> </div>

View File

@ -12,30 +12,11 @@
@csrf @csrf
@method('PUT') @method('PUT')
<div class="mb-3"> <x-form.input name="title" label="Title" :value="$post->title" required />
<label for="title" class="form-label">Title</label> <x-form.textarea name="content" label="Content" :value="$post->content" required />
<input type="text" class="form-control @error('title') is-invalid @enderror"
id="title" name="title" value="{{ old('title', $post->title) }}" required>
@error('title')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="mb-3"> <x-form.button type="submit" variant="primary" label="Update Post" />
<label for="content" class="form-label">Content</label> <x-form.button variant="secondary" label="Cancel" href="{{ route('home') }}" />
<textarea class="form-control @error('content') is-invalid @enderror"
id="content" name="content" rows="5" required>{{ old('content', $post->content) }}</textarea>
@error('content')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<button type="submit" class="btn btn-primary">Update Post</button>
<a href="{{ route('home') }}" class="btn btn-secondary">Cancel</a>
</form> </form>
</div> </div>
</div> </div>