Skip to content

Commit 5a18fc1

Browse files
rappasoftrappasoft
committed
Break up into manageable files
1 parent 5e3218a commit 5a18fc1

File tree

9 files changed

+343
-338
lines changed

9 files changed

+343
-338
lines changed

‎resources/views/tailwind/datatable.blade.php

Lines changed: 8 additions & 338 deletions
Large diffs are not rendered by default.

‎resources/views/tailwind/includes/bulk-actions.blade.php

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
@if (count($bulkActions))
2+
<div class="w-full md:w-auto mb-4 md:mb-0">
3+
<div
4+
x-data="{ open: false }"
5+
@keydown.window.escape="open = false"
6+
@click.away="open = false"
7+
class="relative inline-block text-left z-10 w-full md:w-auto"
8+
>
9+
<div>
10+
<span class="rounded-md shadow-sm">
11+
<button
12+
@click="open = !open"
13+
type="button"
14+
class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-primary-300 focus:shadow-outline-primary active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
15+
id="options-menu"
16+
aria-haspopup="true"
17+
x-bind:aria-expanded="open"
18+
aria-expanded="true"
19+
>
20+
{{ __('Bulk Actions') }}
21+
22+
<svg class="-mr-1 ml-2 h-5 w-5" x-description="Heroicon name: chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
23+
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
24+
</svg>
25+
</button>
26+
</span>
27+
</div>
28+
29+
<div
30+
x-cloak
31+
x-show="open"
32+
x-transition:enter="transition ease-out duration-100"
33+
x-transition:enter-start="transform opacity-0 scale-95"
34+
x-transition:enter-end="transform opacity-100 scale-100"
35+
x-transition:leave="transition ease-in duration-75"
36+
x-transition:leave-start="transform opacity-100 scale-100"
37+
x-transition:leave-end="transform opacity-0 scale-95"
38+
class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg z-50"
39+
>
40+
<div class="rounded-md bg-white shadow-xs">
41+
<div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
42+
@foreach($bulkActions as $action => $title)
43+
<button wire:click="{{ $action }}" type="button" class="block w-full px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 flex items-center space-x-2" role="menuitem">
44+
<span>{{ $title }}</span>
45+
</button>
46+
@endforeach
47+
</div>
48+
</div>
49+
</div>
50+
</div>
51+
</div>
52+
@endif

‎resources/views/tailwind/includes/filter-pills.blade.php

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
@if ($showFilters && count(array_filter($filters)) && !(count(array_filter($filters)) === 1 && isset($filters['search'])))
2+
<div wire:key="filter-badges" class="p-6 md:p-0">
3+
<small class="text-gray-700">@lang('Applied Filters'):</small>
4+
5+
@foreach($filters as $key => $value)
6+
@if ($key !== 'search' && strlen($value))
7+
<span
8+
wire:key="filter-{{ $key }}"
9+
class="inline-flex items-center py-0.5 pl-2 pr-0.5 rounded-full text-xs font-medium bg-primary-100 text-primary-700"
10+
>
11+
{{ $filterNames[$key] ?? ucwords(strtr($key, ['_' => ' ', '-' => ' '])) }}: {{ ucwords(strtr($value, ['_' => ' ', '-' => ' '])) }}
12+
13+
<button
14+
wire:click="removeFilter('{{ $key }}')"
15+
type="button"
16+
class="flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center text-primary-400 hover:bg-primary-200 hover:text-primary-500 focus:outline-none focus:bg-primary-500 focus:text-white"
17+
>
18+
<span class="sr-only">@lang('Remove sort option')</span>
19+
<svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
20+
<path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
21+
</svg>
22+
</button>
23+
</span>
24+
@endif
25+
@endforeach
26+
27+
<button class="focus:outline-none active:outline-none" wire:click.prevent="resetFilters">
28+
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
29+
@lang('Clear')
30+
</span>
31+
</button>
32+
</div>
33+
@endif

‎resources/views/tailwind/includes/filters.blade.php

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
@if ($filtersView || count($customFilters))
2+
<div
3+
x-data="{ open: false }"
4+
@keydown.escape.stop="open = false"
5+
@click.away="open = false"
6+
class="relative block md:inline-block text-left"
7+
>
8+
<div>
9+
<button
10+
type="button"
11+
class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:border-indigo-300 focus:shadow-outline-indigo" id="filters-menu" @click="open = !open" aria-haspopup="true" x-bind:aria-expanded="open" aria-expanded="true">
12+
@lang('Filters')
13+
14+
@if (count(array_filter($filters)) && !(count(array_filter($filters)) === 1 && isset($filters['search'])))
15+
<span class="ml-1 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 bg-indigo-100 text-indigo-800 capitalize">
16+
{{ isset($filters['search']) ? count(array_filter($filters)) - 1 : count(array_filter($filters)) }}
17+
</span>
18+
@endif
19+
20+
<svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
21+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
22+
</svg>
23+
</button>
24+
</div>
25+
26+
<div
27+
x-cloak
28+
x-show="open"
29+
x-transition:enter="transition ease-out duration-100"
30+
x-transition:enter-start="transform opacity-0 scale-95"
31+
x-transition:enter-end="transform opacity-100 scale-100"
32+
x-transition:leave="transition ease-in duration-75"
33+
x-transition:leave-start="transform opacity-100 scale-100"
34+
x-transition:leave-end="transform opacity-0 scale-95"
35+
class="origin-top-right absolute right-0 mt-2 w-full md:w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 focus:outline-none z-50"
36+
role="menu"
37+
aria-orientation="vertical"
38+
aria-labelledby="filters-menu"
39+
>
40+
@if ($filtersView)
41+
@include($filtersView)
42+
@elseif (count($customFilters))
43+
@foreach ($customFilters as $key => $filter)
44+
<div class="py-1" role="none">
45+
<div class="block px-4 py-2 text-sm text-gray-700" role="menuitem">
46+
@if ($filter->isSelect())
47+
<label for="filter-{{ $key }}" class="block text-sm font-medium leading-5 text-gray-700">
48+
{{ $filter->name() }}
49+
</label>
50+
51+
<div class="mt-1 relative rounded-md shadow-sm">
52+
<select
53+
wire:model="filters.{{ $key }}"
54+
id="filter-{{ $key }}"
55+
class="rounded-md shadow-sm block w-full pl-3 pr-10 py-2 text-base leading-6 border-gray-300 focus:outline-none focus:border-indigo-300 focus:shadow-outline-indigo sm:text-sm sm:leading-5"
56+
>
57+
@foreach($filter->options() as $key => $value)
58+
<option value="{{ $key }}">{{ $value }}</option>
59+
@endforeach
60+
</select>
61+
</div>
62+
@endif
63+
</div>
64+
</div>
65+
@endforeach
66+
@endif
67+
68+
@if (count(array_filter($filters)) && !(count(array_filter($filters)) === 1 && isset($filters['search'])))
69+
<div class="py-1" role="none">
70+
<div class="block px-4 py-2 text-sm text-gray-700" role="menuitem">
71+
<button
72+
wire:click.prevent="resetFilters"
73+
type="button"
74+
class="w-full inline-flex items-center justify-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
75+
>
76+
@lang('Clear')
77+
</button>
78+
</div>
79+
</div>
80+
@endif
81+
</div>
82+
</div>
83+
@endif

‎resources/views/tailwind/includes/pagination.blade.php

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@if ($showPagination)
2+
<div class="p-6 md:p-0">
3+
{{ $rows->links() }}
4+
</div>
5+
@endif

‎resources/views/tailwind/includes/per-page.blade.php

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
@if ($showPerPage)
2+
<select
3+
wire:model="perPage"
4+
id="perPage"
5+
class="rounded-md shadow-sm block w-full pl-3 pr-10 py-2 text-base leading-6 border-gray-300 focus:outline-none focus:border-indigo-300 focus:shadow-outline-indigo sm:text-sm sm:leading-5"
6+
>
7+
<option value="10">10</option>
8+
<option value="25">25</option>
9+
<option value="50">50</option>
10+
</select>
11+
@endif

‎resources/views/tailwind/includes/search.blade.php

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
@if ($showSearch)
2+
<div class="flex rounded-md shadow-sm">
3+
<input
4+
wire:model.debounce.250ms="filters.search"
5+
placeholder="{{ __('Search') }}"
6+
type="text"
7+
class="flex-1 shadow-sm border-cool-gray-300 block w-full transition duration-150 ease-in-out sm:text-sm sm:leading-5 focus:outline-none focus:border-indigo-300 focus:shadow-outline-indigo @if (isset($filters['search']) && strlen($filters['search'])) rounded-none rounded-l-md @else rounded-md @endif"
8+
/>
9+
10+
@if (isset($filters['search']) && strlen($filters['search']))
11+
<span class="inline-flex items-center px-3 rounded-r-md border border-l-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm">
12+
<svg wire:click="$set('filters.search', null)" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
13+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
14+
</svg>
15+
</span>
16+
@endif
17+
</div>
18+
@endif

‎resources/views/tailwind/includes/sorting-pills.blade.php

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
@if ($showSorting && count($sorts))
2+
<div wire:key="sort-badges" class="p-6 md:p-0">
3+
<small class="text-gray-700">@lang('Applied Sorting'):</small>
4+
5+
@foreach($sorts as $col => $dir)
6+
<span
7+
wire:key="sort-{{ $col }}"
8+
class="inline-flex items-center py-0.5 pl-2 pr-0.5 rounded-full text-xs font-medium bg-primary-100 text-primary-700"
9+
>
10+
{{ $sortNames[$col] ?? ucwords(strtr($col, ['_' => ' ', '-' => ' '])) }}: {{ $dir === 'asc' ? 'A-Z' : 'Z-A' }}
11+
12+
<button
13+
wire:click="removeSort('{{ $col }}')"
14+
type="button"
15+
class="flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center text-primary-400 hover:bg-primary-200 hover:text-primary-500 focus:outline-none focus:bg-primary-500 focus:text-white"
16+
>
17+
<span class="sr-only">@lang('Remove sort option')</span>
18+
<svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
19+
<path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
20+
</svg>
21+
</button>
22+
</span>
23+
@endforeach
24+
25+
<button
26+
wire:click.prevent="resetSorts"
27+
class="focus:outline-none active:outline-none"
28+
>
29+
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
30+
@lang('Clear')
31+
</span>
32+
</button>
33+
</div>
34+
@endif

‎resources/views/tailwind/includes/table.blade.php

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<x-livewire-tables::table>
2+
<x-slot name="head">
3+
@if (count($bulkActions))
4+
<x-livewire-tables::table.heading class="pr-0 w-8 hidden md:table-cell">
5+
<div class="flex rounded-md shadow-sm">
6+
<input
7+
wire:model="selectPage"
8+
type="checkbox"
9+
class="rounded-md shadow-sm border-cool-gray-300 block transition duration-150 ease-in-out sm:text-sm sm:leading-5"
10+
/>
11+
</div>
12+
</x-livewire-tables::table.heading>
13+
@endif
14+
15+
@foreach($columns as $column)
16+
@if ($column->isBlank())
17+
<x-livewire-tables::table.heading />
18+
@else
19+
<x-livewire-tables::table.heading
20+
:sortable="$column->isSortable()"
21+
:multi-column="$column->isMultiColumn()"
22+
:column="$column->column()"
23+
:direction="$column->column() ? $sorts[$column->column()] ?? null : null"
24+
:text="$column->text() ?? ''"
25+
:class="$column->class() ?? ''"
26+
/>
27+
@endif
28+
@endforeach
29+
</x-slot>
30+
31+
<x-slot name="body">
32+
@if (count($bulkActions) && $selectPage && $rows->total() > $rows->count())
33+
<x-livewire-tables::table.row wire:key="row-message" class="bg-primary-50">
34+
<x-livewire-tables::table.cell colspan="8">
35+
@unless ($selectAll)
36+
<div>
37+
<span>{!! __('You have selected <strong>:count</strong> users, do you want to select all <strong>:total</strong>?', ['count' => $rows->count(), 'total' => number_format($rows->total())]) !!}</span>
38+
39+
<button
40+
wire:click="selectAll"
41+
type="button"
42+
class="ml-1 text-blue-600 underline text-cool-gray-700 text-sm leading-5 font-medium focus:outline-none focus:text-cool-gray-800 focus:underline transition duration-150 ease-in-out"
43+
>
44+
@lang('Select All')
45+
</button>
46+
</div>
47+
@else
48+
<span>
49+
{!! __('You are currently selecting all <strong>:total</strong> users.', ['total' => number_format($rows->total())]) !!}
50+
51+
<button
52+
wire:click="resetBulk"
53+
type="button"
54+
class="ml-1 text-blue-600 underline text-cool-gray-700 text-sm leading-5 font-medium focus:outline-none focus:text-cool-gray-800 focus:underline transition duration-150 ease-in-out"
55+
>
56+
@lang('Unselect All')
57+
</button>
58+
</span>
59+
@endif
60+
</x-livewire-tables::table.cell>
61+
</x-livewire-tables::table.row>
62+
@endif
63+
64+
@forelse ($rows as $index => $row)
65+
<x-livewire-tables::table.row
66+
wire:loading.class.delay="opacity-50"
67+
wire:key="table-row-{{ $row->getKey() }}"
68+
class="{{ $index % 2 === 0 ? 'bg-white' : 'bg-gray-50' }}"
69+
>
70+
@if (count($bulkActions))
71+
<x-livewire-tables::table.cell class="pr-0 hidden md:table-cell">
72+
<div class="flex rounded-md shadow-sm">
73+
<input
74+
wire:model="selected"
75+
value="{{ $row->getKey() }}"
76+
type="checkbox"
77+
class="rounded-md shadow-sm border-cool-gray-300 block transition duration-150 ease-in-out sm:text-sm sm:leading-5"
78+
/>
79+
</div>
80+
</x-livewire-tables::table.cell>
81+
@endif
82+
83+
@include($rowsView, ['row' => $row])
84+
</x-livewire-tables::table.row>
85+
@empty
86+
<x-livewire-tables::table.row>
87+
<x-livewire-tables::table.cell :colspan="count($bulkActions) ? count($columns) + 1 : count($columns)">
88+
<div class="flex justify-center items-center space-x-2">
89+
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-cool-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
90+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
91+
</svg>
92+
93+
<span class="font-medium py-8 text-cool-gray-400 text-xl">@lang('No items found. Try narrowing your search.')</span>
94+
</div>
95+
</x-livewire-tables::table.cell>
96+
</x-livewire-tables::table.row>
97+
@endforelse
98+
</x-slot>
99+
</x-livewire-tables::table>

0 commit comments

Comments
 (0)