Skip to content

Commit 105218d

Browse files
joydeep-bhowmikjoydeep-bhowmik
authored
Update datatable.blade.php
1 parent 01d938d commit 105218d

1 file changed

Lines changed: 132 additions & 138 deletions

File tree

‎src/resources/views/livewire/datatable.blade.php‎

Lines changed: 132 additions & 138 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,39 @@
1919
}">
2020
@if ($headers)
2121
<div class="header relative flex flex-wrap gap-3 p-3">
22+
{{-- bluckactions --}}
23+
<div class="mr-auto w-full">
24+
@if (count($this->bulkActions()))
25+
26+
<button class= "flex rounded-md border p-2 shadow-sm" type="button"
27+
x-on:click="bulkActions=!bulkActions" x-show="$wire.ids.length">
28+
&#10247 <span class="hidden md:block">Bulk actions</span>
29+
</button>
30+
<div class="absolute left-0 right-0 top-full flex w-full gap-4 border bg-white shadow-md"
31+
style="display: none" x-show="bulkActions" @click.outside="bulkActions=false" x-transition>
32+
<div class="flex gap-4 overflow-x-auto p-3">
33+
@foreach ($this->bulkActions() as $button)
34+
<button
35+
class="{{ $button->name == 'delete' ? 'bg-red-500 text-white' : 'bg-gray-50' }} max-w-fit rounded-md border px-3 py-2"
36+
type="button" onclick="{!! $button->confirm
37+
? 'return confirm(' . '\'' . $button->confirm . '\'' . ') || event . stopImmediatePropagation()'
38+
: '' !!}" wire:click="{{ $button->action }}">
39+
{{ $button->text ? $button->text : $button->name }}
40+
</button>
41+
@endforeach
42+
</div>
43+
<button class="ml-auto px-3" type="button" x-on:click="bulkActions=!bulkActions">
44+
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
45+
stroke-width="1.5" stroke="currentColor">
46+
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
47+
</svg>
48+
</button>
49+
</div>
2250
51+
@endif
52+
</div>
2353
{{-- seachbox and filters and columns --}}
24-
<div class="flex w-full items-center gap-2 rounded-md border px-2 text-gray-300 shadow-sm focus-within:text-black focus-within:ring-2 focus-within:ring-black md:max-w-xs"
54+
<div class="flex items-center gap-2 rounded-md border px-2 text-gray-300 shadow-sm focus-within:text-black focus-within:ring-2 focus-within:ring-black"
2555
tabindex="-1">
2656
<svg class="h-6 w-6 animate-spin fill-black text-gray-200 dark:text-gray-600" aria-hidden="true"
2757
wire:loading viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -40,149 +70,113 @@
4070
<input class="peer !border-0 !border-none px-0 !outline-none !ring-0" type="text"
4171
wire:model.live.debounce.500ms="search" placeholder="Search">
4272
</div>
43-
<div class="flex items-center gap-3">
44-
@if (count($this->filters()))
45-
@php
46-
$filtercount = 0;
73+
@if (count($this->filters()))
74+
@php
75+
$filtercount = 0;
4776
48-
foreach ($filters as $filter) {
49-
if (isset($filter) && !empty($filter)) {
50-
$filtercount++;
51-
}
77+
foreach ($filters as $filter) {
78+
if (isset($filter) && !empty($filter)) {
79+
$filtercount++;
5280
}
53-
@endphp
54-
<button class="relative" type="button" x-on:click="filters=!filters">
55-
<div class="absolute -left-2 top-0 z-[1] h-fit rounded-lg border bg-gray-50 px-[2px] text-xs">
56-
{{ $filtercount }}
57-
</div>
58-
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
59-
stroke-width="1.5" stroke="currentColor">
60-
<path stroke-linecap="round" stroke-linejoin="round"
61-
d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z" />
62-
</svg>
63-
</button>
64-
<div class="absolute left-2 top-full flex w-full max-w-[250px] flex-col gap-4 rounded-md border bg-white p-5 shadow-md"
65-
style="display: none" x-show="filters" x-transition @click.outside="filters=false">
66-
<div class="flex">
67-
<h2 class="text-base font-bold">Filters</h2>
68-
<button class="ml-auto text-sm font-bold text-blue-400"
69-
wire:click="resetFilters">Reset</button>
70-
</div>
71-
@foreach ($this->filters() as $filter)
72-
@php
73-
$filter->name = $filter->label ? $filter->label : $filter->name;
74-
@endphp
75-
<label class="text-sm" for="{{ $filter->_filter_id }}" wire:key="{{ $filter->_filter_id }}">
76-
@if ($filter->type == 'select')
77-
<div class="relative flex w-full flex-col gap-2">
78-
<div class="font-semibold">
79-
{{ $filter->name }}
80-
</div>
81-
<select
82-
class="focus:shadow-outline block w-full appearance-none rounded border border-gray-300 bg-white py-2 pl-2 pr-8 leading-tight focus:outline-none"
83-
id="" name=""
84-
wire:model.live.debounce.500ms="filters.{{ $filter->_filter_id }}"
85-
wire:loading.attr="disabled">
86-
@foreach ($filter->options as $key => $value)
87-
<option class="mr-5" value="{{ $key }}">{{ $value }}
88-
</option>
89-
@endforeach
90-
</select>
91-
92-
</div>
93-
@elseif(in_array($filter->type, ['checkbox', 'radio']))
94-
<div class="flex gap-3">
95-
<input class="rounded-md" id="{{ $filter->_filter_id }}"
96-
type="{{ $filter->type }}" value="{{ $filter->_filter_id }}"
97-
wire:model.live.debounce.500ms="filters.{{ $filter->_filter_id }}"
98-
wire:loading.attr="disabled">
99-
<div class="font-semibold">
100-
{{ $filter->name }}
101-
</div>
102-
</div>
103-
@else
104-
<div class="flex w-full flex-col gap-2">
105-
<div class="font-semibold">
106-
{{ $filter->name }}
107-
</div>
108-
<input
109-
class="focus:shadow-outline block w-full appearance-none rounded border border-gray-300 bg-white py-2 pl-2 pr-8 leading-tight focus:outline-none"
110-
id="{{ $filter->_filter_id }}" type="{{ $filter->type }}"
111-
value="{{ $filter->_filter_id }}"
112-
wire:model.live.debounce.500ms="filters.{{ $filter->_filter_id }}"
113-
wire:loading.attr="disabled"
114-
placeholder="{{ $filter->placeholder ? $filter->placeholder : '' }}">
115-
</div>
116-
@endif
117-
</label>
118-
@endforeach
81+
}
82+
@endphp
83+
<button class="relative" type="button" x-on:click="filters=!filters">
84+
<div class="absolute -left-2 top-0 z-[1] h-fit rounded-lg border bg-gray-50 px-[2px] text-xs">
85+
{{ $filtercount }}
11986
</div>
120-
@endif
121-
122-
@if (count($this->table()))
123-
<button type="button" x-on:click="columns=!columns">
124-
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
125-
stroke-width="1.5" stroke="currentColor">
126-
<path stroke-linecap="round" stroke-linejoin="round"
127-
d="M9 4.5v15m6-15v15m-10.875 0h15.75c.621 0 1.125-.504 1.125-1.125V5.625c0-.621-.504-1.125-1.125-1.125H4.125C3.504 4.5 3 5.004 3 5.625v12.75c0 .621.504 1.125 1.125 1.125z" />
128-
</svg>
129-
</button>
130-
<div class="absolute left-2 top-full flex w-full max-w-[250px] flex-col gap-4 rounded-md border bg-white p-5 shadow-md"
131-
style="display: none" x-show="columns" x-transition @click.outside="columns=false">
132-
<h2 class="font-bold">Columns</h2>
133-
@foreach ($this->table() as $field)
134-
<label class="flex gap-3" for="{{ $field->_field_id }}"
135-
wire:key="{{ $field->_field_id }}">
136-
<input id="{{ $field->_field_id }}" type="checkbox" value="{{ $field->_field_id }}"
137-
wire:model.live="columns" wire:loading.attr="disabled"
138-
{{ count($columns) < 4 && in_array($field->_field_id, $columns) ? 'disabled' : '' }}>
139-
{{ $field->label ? $field->label : $this->get_field_name($field) }}
140-
</label>
141-
@endforeach
87+
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
88+
stroke-width="1.5" stroke="currentColor">
89+
<path stroke-linecap="round" stroke-linejoin="round"
90+
d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z" />
91+
</svg>
92+
</button>
93+
<div class="absolute left-2 top-full flex w-full max-w-[250px] flex-col gap-4 rounded-md border bg-white p-5 shadow-md"
94+
style="display: none" x-show="filters" x-transition @click.outside="filters=false">
95+
<div class="flex">
96+
<h2 class="text-base font-bold">Filters</h2>
97+
<button class="ml-auto text-sm font-bold text-blue-400" wire:click="resetFilters">Reset</button>
14298
</div>
143-
@endif
144-
@if ($exportable)
145-
<button class="mr-auto" type="button" wire:click="exportCsv">
146-
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
147-
<path
148-
d="M13.2 12L16 16H13.6L12 13.7143L10.4 16H8L10.8 12L8 8H10.4L12 10.2857L13.6 8H15V4H5V20H19V8H16L13.2 12ZM3 2.9918C3 2.44405 3.44749 2 3.9985 2H16L20.9997 7L21 20.9925C21 21.5489 20.5551 22 20.0066 22H3.9934C3.44476 22 3 21.5447 3 21.0082V2.9918Z">
149-
</path>
150-
</svg>
151-
</button>
152-
@endif
153-
</div>
154-
155-
{{-- bluckactions --}}
156-
<div class="relative float-right w-fit">
157-
@if (count($this->bulkActions()))
158-
159-
<button class="-ml-2 flex rounded-md p-2" type="button" style="display: none"
160-
x-on:click="bulkActions=!bulkActions" x-show="$wire.ids.length">
161-
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
162-
stroke-width="1.5" stroke="currentColor">
163-
<path stroke-linecap="round" stroke-linejoin="round"
164-
d="M12 6.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 12.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 18.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z" />
165-
</svg>
166-
</button>
167-
168-
<div class="absolute left-0 right-0 top-full flex w-fit gap-4 rounded-md border bg-white shadow-md"
169-
style="display: none" x-show="bulkActions" @click.outside="bulkActions=false" x-transition>
170-
<div class="flex gap-4 overflow-x-auto px-3">
171-
@foreach ($this->bulkActions() as $button)
172-
<button class="max-w-fit rounded-md px-3 py-2 font-bold" type="button"
173-
style="color:{{ $button->color }}" onclick="{!! $button->confirm
174-
? 'return confirm(' . '\'' . $button->confirm . '\'' . ') || event . stopImmediatePropagation()'
175-
: '' !!}"
176-
wire:click="{{ $button->action }}">
177-
{{ $button->text ? $button->text : $button->name }}
178-
</button>
179-
@endforeach
180-
</div>
99+
@foreach ($this->filters() as $filter)
100+
@php
101+
$filter->name = $filter->label ? $filter->label : $filter->name;
102+
@endphp
103+
<label class="text-sm" for="{{ $filter->_filter_id }}" wire:key="{{ $filter->_filter_id }}">
104+
@if ($filter->type == 'select')
105+
<div class="relative flex w-full flex-col gap-2">
106+
<div class="font-semibold">
107+
{{ $filter->name }}
108+
</div>
109+
<select
110+
class="focus:shadow-outline block w-full appearance-none rounded border border-gray-300 bg-white py-2 pl-2 pr-8 leading-tight focus:outline-none"
111+
id="" name=""
112+
wire:model.live.debounce.500ms="filters.{{ $filter->_filter_id }}"
113+
wire:loading.attr="disabled">
114+
@foreach ($filter->options as $key => $value)
115+
<option class="mr-5" value="{{ $key }}">{{ $value }}
116+
</option>
117+
@endforeach
118+
</select>
181119
182-
</div>
120+
</div>
121+
@elseif(in_array($filter->type, ['checkbox', 'radio']))
122+
<div class="flex gap-3">
123+
<input class="rounded-md" id="{{ $filter->_filter_id }}"
124+
type="{{ $filter->type }}" value="{{ $filter->_filter_id }}"
125+
wire:model.live.debounce.500ms="filters.{{ $filter->_filter_id }}"
126+
wire:loading.attr="disabled">
127+
<div class="font-semibold">
128+
{{ $filter->name }}
129+
</div>
130+
</div>
131+
@else
132+
<div class="flex w-full flex-col gap-2">
133+
<div class="font-semibold">
134+
{{ $filter->name }}
135+
</div>
136+
<input
137+
class="focus:shadow-outline block w-full appearance-none rounded border border-gray-300 bg-white py-2 pl-2 pr-8 leading-tight focus:outline-none"
138+
id="{{ $filter->_filter_id }}" type="{{ $filter->type }}"
139+
value="{{ $filter->_filter_id }}"
140+
wire:model.live.debounce.500ms="filters.{{ $filter->_filter_id }}"
141+
wire:loading.attr="disabled"
142+
placeholder="{{ $filter->placeholder ? $filter->placeholder : '' }}">
143+
</div>
144+
@endif
145+
</label>
146+
@endforeach
147+
</div>
148+
@endif
183149
184-
@endif
185-
</div>
150+
@if (count($this->table()))
151+
<button type="button" x-on:click="columns=!columns">
152+
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
153+
stroke-width="1.5" stroke="currentColor">
154+
<path stroke-linecap="round" stroke-linejoin="round"
155+
d="M9 4.5v15m6-15v15m-10.875 0h15.75c.621 0 1.125-.504 1.125-1.125V5.625c0-.621-.504-1.125-1.125-1.125H4.125C3.504 4.5 3 5.004 3 5.625v12.75c0 .621.504 1.125 1.125 1.125z" />
156+
</svg>
157+
</button>
158+
<div class="absolute left-2 top-full flex w-full max-w-[250px] flex-col gap-4 rounded-md border bg-white p-5 shadow-md"
159+
style="display: none" x-show="columns" x-transition @click.outside="columns=false">
160+
<h2 class="font-bold">Columns</h2>
161+
@foreach ($this->table() as $field)
162+
<label class="flex gap-3" for="{{ $field->_field_id }}" wire:key="{{ $field->_field_id }}">
163+
<input id="{{ $field->_field_id }}" type="checkbox" value="{{ $field->_field_id }}"
164+
wire:model.live="columns" wire:loading.attr="disabled"
165+
{{ count($columns) < 4 && in_array($field->_field_id, $columns) ? 'disabled' : '' }}>
166+
{{ $field->label ? $field->label : $this->get_field_name($field) }}
167+
</label>
168+
@endforeach
169+
</div>
170+
@endif
171+
@if ($exportable)
172+
<button class="mr-auto" type="button" wire:click="exportCsv">
173+
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
174+
<path
175+
d="M13.2 12L16 16H13.6L12 13.7143L10.4 16H8L10.8 12L8 8H10.4L12 10.2857L13.6 8H15V4H5V20H19V8H16L13.2 12ZM3 2.9918C3 2.44405 3.44749 2 3.9985 2H16L20.9997 7L21 20.9925C21 21.5489 20.5551 22 20.0066 22H3.9934C3.44476 22 3 21.5447 3 21.0082V2.9918Z">
176+
</path>
177+
</svg>
178+
</button>
179+
@endif
186180
</div>
187181
@endif
188182
<div class="overflow-x-auto">

0 commit comments

Comments
 (0)