Skip to content

Commit 7e36ac4

Browse files
heloufirheloufir
committed
Filament tables integration: Ticket priorities
1 parent 215b808 commit 7e36ac4

2 files changed

Lines changed: 70 additions & 96 deletions

File tree

‎app/Http/Livewire/Administration/TicketPriorities.php‎

Lines changed: 69 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -3,67 +3,98 @@
33
namespace App\Http\Livewire\Administration;
44

55
use App\Models\TicketPriority;
6-
use Filament\Forms\Components\Grid;
7-
use Filament\Forms\Components\TextInput;
8-
use Filament\Forms\Concerns\InteractsWithForms;
9-
use Filament\Forms\Contracts\HasForms;
6+
use Filament\Tables\Actions\Action;
7+
use Filament\Tables\Columns\TextColumn;
8+
use Filament\Tables\Concerns\InteractsWithTable;
9+
use Filament\Tables\Contracts\HasTable;
10+
use Illuminate\Database\Eloquent\Builder;
11+
use Illuminate\Database\Eloquent\Relations\Relation;
12+
use Illuminate\Support\HtmlString;
1013
use Livewire\Component;
1114

12-
class TicketPriorities extends Component implements HasForms
15+
class TicketPriorities extends Component implements HasTable
1316
{
14-
use InteractsWithForms;
17+
use InteractsWithTable;
1518

16-
public $search;
1719
public $selectedPriority;
1820

1921
protected $listeners = ['prioritySaved', 'priorityDeleted'];
2022

21-
public function mount(): void
23+
public function render()
2224
{
23-
$this->form->fill();
25+
return view('livewire.administration.ticket-priorities');
2426
}
2527

26-
public function render()
28+
/**
29+
* Table query definition
30+
*
31+
* @return Builder|Relation
32+
*/
33+
protected function getTableQuery(): Builder|Relation
2734
{
28-
$query = TicketPriority::query();
29-
if ($this->search) {
30-
$query->where('title', 'like', '%' . $this->search . '%')
31-
->orWhere('text_color', 'like', '%' . $this->search . '%')
32-
->orWhere('bg_color', 'like', '%' . $this->search . '%')
33-
->orWhere('icon', 'like', '%' . $this->search . '%');
34-
}
35-
$priorities = $query->paginate();
36-
return view('livewire.administration.ticket-priorities', compact('priorities'));
35+
return TicketPriority::query();
3736
}
3837

3938
/**
40-
* Form schema definition
39+
* Table definition
4140
*
4241
* @return array
4342
*/
44-
protected function getFormSchema(): array
43+
protected function getTableColumns(): array
4544
{
4645
return [
47-
Grid::make(1)
48-
->schema([
49-
TextInput::make('search')
50-
->label(__('Search for tickets priorities'))
51-
->disableLabel()
52-
->type('search')
53-
->placeholder(__('Search for tickets priorities')),
54-
]),
46+
TextColumn::make('title')
47+
->label(__('Title'))
48+
->searchable()
49+
->sortable()
50+
->formatStateUsing(fn(TicketPriority $record) => new HtmlString('
51+
<span class="px-2 py-1 rounded-full text-sm flex items-center gap-2" style="color: ' . $record->text_color . '; background-color: ' . $record->bg_color . '">
52+
<i class="fa ' . $record->icon . '"></i>' . $record->title . '
53+
</span>
54+
')),
55+
56+
TextColumn::make('created_at')
57+
->label(__('Created at'))
58+
->sortable()
59+
->searchable()
60+
->dateTime(),
5561
];
5662
}
5763

5864
/**
59-
* Search for tickets priorities
65+
* Table actions definition
6066
*
61-
* @return void
67+
* @return array
68+
*/
69+
protected function getTableActions(): array
70+
{
71+
return [
72+
Action::make('edit')
73+
->icon('heroicon-o-pencil')
74+
->link()
75+
->label(__('Edit priority'))
76+
->action(fn(TicketPriority $record) => $this->updatePriority($record->id))
77+
];
78+
}
79+
80+
/**
81+
* Table default sort column definition
82+
*
83+
* @return string|null
84+
*/
85+
protected function getDefaultTableSortColumn(): ?string
86+
{
87+
return 'created_at';
88+
}
89+
90+
/**
91+
* Table default sort direction definition
92+
*
93+
* @return string|null
6294
*/
63-
public function search(): void
95+
protected function getDefaultTableSortDirection(): ?string
6496
{
65-
$data = $this->form->getState();
66-
$this->search = $data['search'] ?? null;
97+
return 'desc';
6798
}
6899

69100
/**
@@ -105,8 +136,8 @@ public function cancelPriority()
105136
*
106137
* @return void
107138
*/
108-
public function prioritySaved() {
109-
$this->search();
139+
public function prioritySaved()
140+
{
110141
$this->cancelPriority();
111142
}
112143

@@ -115,7 +146,8 @@ public function prioritySaved() {
115146
*
116147
* @return void
117148
*/
118-
public function priorityDeleted() {
149+
public function priorityDeleted()
150+
{
119151
$this->prioritySaved();
120152
}
121153
}

‎resources/views/livewire/administration/ticket-priorities.blade.php‎

Lines changed: 1 addition & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -20,66 +20,8 @@
2020
</div>
2121
<div class="w-full mt-5">
2222
<div class="w-full flex flex-col justify-start items-start gap-5">
23-
<div class="w-full flex flex-row justify-end items-center pb-4 bg-white dark:bg-gray-900">
24-
<form wire:submit.prevent="search" class="relative flex flex-row justify-end items-center gap-5 md:w-1/3 w-2/3">
25-
{{ $this->form }}
26-
<button type="submit" class="py-2 px-3 rounded-lg shadow hover:shadow-lg bg-primary-700 hover:bg-primary-800 text-white text-base">
27-
<div wire:loading.remove>
28-
<i class="fa fa-search"></i>
29-
</div>
30-
<div wire:loading>
31-
<i class="fa fa-spin fa-spinner"></i>
32-
</div>
33-
</button>
34-
</form>
35-
</div>
3623
<div class="w-full overflow-x-auto relative sm:rounded-lg">
37-
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
38-
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
39-
<tr>
40-
<th scope="col" class="py-3 px-6 min-w-table">
41-
@lang('Title')
42-
</th>
43-
<th scope="col" class="py-3 px-6 min-w-table">
44-
@lang('Created at')
45-
</th>
46-
<th scope="col" class="py-3 px-6 min-w-table">
47-
@lang('Actions')
48-
</th>
49-
</tr>
50-
</thead>
51-
<tbody>
52-
@if($priorities->count())
53-
@foreach($priorities as $priority)
54-
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
55-
<td class="py-4 px-6">
56-
<span class="px-3 py-1 rounded-full text-sm" style="color: {{ $priority->text_color }}; background-color: {{ $priority->bg_color }}">
57-
<i class="fa {{ $priority->icon }}"></i> {{ $priority->title }}
58-
</span>
59-
</td>
60-
<td class="py-4 px-6">
61-
<div class="flex flex-col">
62-
<span class="text-base font-semibold">{{ $priority->created_at->diffForHumans() }}</span>
63-
<span class="font-normal text-gray-500">{{ $priority->created_at->format(__('Y-m-d g:i A')) }}</span>
64-
</div>
65-
</td>
66-
<td class="py-4 px-6">
67-
<button wire:click="updatePriority('{{ $priority->id }}')" type="button" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">@lang('Edit priority')</button>
68-
</td>
69-
</tr>
70-
@endforeach
71-
@else
72-
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
73-
<td colspan="3" class="py-4 px-6 text-center dark:text-white">
74-
@lang('No ticket priorities to show!')
75-
</td>
76-
</tr>
77-
@endif
78-
</tbody>
79-
</table>
80-
</div>
81-
<div class="w-full flex flex-row justify-start items-center">
82-
{{ $priorities->links('pagination::tailwind') }}
24+
{{ $this->table }}
8325
</div>
8426
</div>
8527

0 commit comments

Comments
 (0)