Skip to content

Commit 8990ed0

Browse files
lrljoelrljoe
committed
Filter Tweaks
1 parent a0a12d0 commit 8990ed0

File tree

8 files changed

+73
-86
lines changed

8 files changed

+73
-86
lines changed

‎resources/js/partials/filters/boolean.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ function newBf() {
2222
toggleStatusWithReset()
2323
{
2424
let newValue = this.toggleStatus();
25+
window.filterPopoverOpen = false;
2526
wire.call('resetFilter',this.booleanFilterKey);
2627
},
2728
setSwitchOn(val)

‎resources/js/partials/filters/fpf.js‎

Lines changed: 53 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -4,68 +4,66 @@ function fpf() {
44
Alpine.data('flatpickrFilter', (wire, filterKey, filterConfig, refLocation, locale) => ({
55
wireValues: wire.get('appliedFilters.' + filterKey) ? wire.entangle('appliedFilters.' + filterKey) : wire.entangle('availableFilters.' + filterKey),
66
flatpickrInstance: flatpickr(refLocation, {
7-
mode: 'range',
8-
altFormat: filterConfig['altFormat'] ?? "F j, Y",
9-
altInput: filterConfig['altInput'] ?? false,
10-
allowInput: filterConfig['allowInput'] ?? false,
11-
allowInvalidPreload: filterConfig['allowInvalidPreload'] ?? true,
12-
ariaDateFormat: filterConfig['ariaDateFormat'] ?? "F j, Y",
13-
clickOpens: true,
14-
dateFormat: filterConfig['dateFormat'] ?? "Y-m-d",
15-
defaultDate: filterConfig['defaultDate'] ?? null,
16-
defaultHour: filterConfig['defaultHour'] ?? 12,
17-
defaultMinute: filterConfig['defaultMinute'] ?? 0,
18-
enableTime: filterConfig['enableTime'] ?? false,
19-
enableSeconds: filterConfig['enableSeconds'] ?? false,
20-
hourIncrement: filterConfig['hourIncrement'] ?? 1,
21-
locale: filterConfig['locale'] ?? 'en',
22-
minDate: filterConfig['earliestDate'] ?? null,
23-
maxDate: filterConfig['latestDate'] ?? null,
24-
minuteIncrement: filterConfig['minuteIncrement'] ?? 5,
25-
shorthandCurrentMonth: filterConfig['shorthandCurrentMonth'] ?? false,
26-
time_24hr: filterConfig['time_24hr'] ?? false,
27-
weekNumbers: filterConfig['weekNumbers'] ?? false,
28-
onOpen: function () {
29-
window.childElementOpen = true;
30-
},
31-
onChange: function (selectedDates, dateStr, instance) {
32-
if (selectedDates.length > 1) {
33-
var dates = dateStr.split(' ');
34-
var wireDateArray = {};
35-
window.childElementOpen = false;
36-
window.filterPopoverOpen = false;
37-
wireDateArray = { 'minDate': dates[0], 'maxDate': (typeof dates[2] === "undefined") ? dates[0] : dates[2] };
38-
wire.set('appliedFilters.' + filterKey, wireDateArray);
7+
mode: 'range',
8+
altFormat: filterConfig['altFormat'] ?? "F j, Y",
9+
altInput: filterConfig['altInput'] ?? false,
10+
allowInput: filterConfig['allowInput'] ?? false,
11+
allowInvalidPreload: filterConfig['allowInvalidPreload'] ?? true,
12+
ariaDateFormat: filterConfig['ariaDateFormat'] ?? "F j, Y",
13+
clickOpens: true,
14+
dateFormat: filterConfig['dateFormat'] ?? "Y-m-d",
15+
defaultDate: filterConfig['defaultDate'] ?? null,
16+
defaultHour: filterConfig['defaultHour'] ?? 12,
17+
defaultMinute: filterConfig['defaultMinute'] ?? 0,
18+
enableTime: filterConfig['enableTime'] ?? false,
19+
enableSeconds: filterConfig['enableSeconds'] ?? false,
20+
hourIncrement: filterConfig['hourIncrement'] ?? 1,
21+
locale: filterConfig['locale'] ?? 'en',
22+
minDate: filterConfig['earliestDate'] ?? null,
23+
maxDate: filterConfig['latestDate'] ?? null,
24+
minuteIncrement: filterConfig['minuteIncrement'] ?? 5,
25+
shorthandCurrentMonth: filterConfig['shorthandCurrentMonth'] ?? false,
26+
time_24hr: filterConfig['time_24hr'] ?? false,
27+
weekNumbers: filterConfig['weekNumbers'] ?? false,
28+
onOpen: function () {
29+
window.childElementOpen = true;
30+
},
31+
onChange: function (selectedDates, dateStr, instance) {
32+
if (selectedDates.length > 1) {
33+
var dates = dateStr.split(' ');
34+
var wireDateArray = {};
35+
window.childElementOpen = false;
36+
window.filterPopoverOpen = false;
37+
wireDateArray = { 'minDate': dates[0], 'maxDate': (typeof dates[2] === "undefined") ? dates[0] : dates[2] };
38+
wire.set('appliedFilters.' + filterKey, wireDateArray);
39+
}
40+
},
41+
}),
42+
changedValue: function(value) {
43+
if (value.length < 5)
44+
{
45+
this.flatpickrInstance.setDate([]);
46+
wire.set('appliedFilters.' + filterKey, {});
3947
}
4048
},
41-
}),
42-
changedValue: function(value) {
43-
if (value.length < 5)
44-
{
45-
this.flatpickrInstance.setDate([]);
46-
wire.set('appliedFilters.' + filterKey, {});
47-
}
48-
},
49-
setupWire() {
50-
if (this.wireValues !== undefined) {
51-
if (this.wireValues.minDate !== undefined && this.wireValues.maxDate !== undefined) {
52-
let initialDateArray = [this.wireValues.minDate, this.wireValues.maxDate];
53-
this.flatpickrInstance.setDate(initialDateArray);
49+
setupWire() {
50+
if (this.wireValues !== undefined) {
51+
if (this.wireValues.minDate !== undefined && this.wireValues.maxDate !== undefined) {
52+
let initialDateArray = [this.wireValues.minDate, this.wireValues.maxDate];
53+
this.flatpickrInstance.setDate(initialDateArray);
54+
}
55+
else {
56+
this.flatpickrInstance.setDate([]);
57+
}
5458
}
5559
else {
5660
this.flatpickrInstance.setDate([]);
5761
}
62+
},
63+
init() {
64+
this.setupWire();
65+
this.$watch('wireValues', value => this.setupWire());
5866
}
59-
else {
60-
this.flatpickrInstance.setDate([]);
61-
}
62-
},
63-
init() {
64-
this.setupWire();
65-
this.$watch('wireValues', value => this.setupWire());
66-
}
67-
68-
6967
}));
7068
}
7169

‎resources/js/partials/filters/string.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ function stringFilter() {
88
setValue: null,
99
toggleStatusWithReset()
1010
{
11+
window.filterPopoverOpen = false;
1112
wire.call('resetFilter',this.stringFilterKey);
1213
},
1314
init() {

‎resources/views/components/tools/filters/boolean.blade.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<x-slot:clearButton>
1414
<template x-if="($wire.get('appliedFilters.{{ $filter->getKey() }}') ?? null) !== null">
1515
<div class="w-1/12 inline-flex items-end justify-end ">
16-
<button @click="toggleStatusWithReset" {{ $this->getFilterMenuResetButtonAttributesBag->merge(['type' => 'button'])->class([
16+
<button @click="toggleStatusWithReset(); filterPopoverOpen = false;" {{ $this->getFilterMenuResetButtonAttributesBag->merge(['type' => 'button'])->class([
1717
'w-min rounded-full focus:outline-none' => $isTailwind && ($this->getFilterMenuResetButtonAttributes['default-styling'] ?? true),
1818
'text-indigo-400 hover:bg-indigo-200 hover:text-indigo-500 focus:bg-indigo-500 focus:text-white' => $isTailwind && ($this->getFilterMenuResetButtonAttributes['default-colors'] ?? true),
1919
])->except(['default-colors','default-styling'])

‎resources/views/components/tools/filters/number-range.blade.php‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@
66
$suffix = $filter->hasConfig('suffix') ? '--suffix:"'. $filter->getConfig('suffix') .'";' : '';
77
$prefix = $filter->hasConfig('prefix') ? '--prefix:"'.$filter->getConfig('prefix').'";' : '';
88
@endphp
9-
<div class="grid grid-cols-12" id="{{ $dataTableFingerprint }}-numberRange-{{ $filterKey }}" x-data="numberRangeFilter($wire,'{{ $filterKey }}', '{{ $dataTableFingerprint }}', '{{ $dataTableFingerprint }}-numberRange-{{ $filterKey }}-wrapper', @js($filter->getConfigs()), '{{ $dataTableFingerprint }}-numberRange-{{ $filterKey }}')" x-on:mousedown.away.throttle.2000ms="updateWireable" x-on:touchstart.away.throttle.2000ms="updateWireable" x-on:mouseleave.throttle.2000ms="updateWireable">
9+
<div class="grid grid-cols-12" id="{{ $dataTableFingerprint }}-numberRange-{{ $filterKey }}" x-data="numberRangeFilter($wire,'{{ $filterKey }}', '{{ $dataTableFingerprint }}', '{{ $dataTableFingerprint }}-numberRange-{{ $filterKey }}-wrapper', @js($filter->getConfigs()), '{{ $dataTableFingerprint }}-numberRange-{{ $filterKey }}')" x-on:mousedown.away.throttle.2000ms="updateWireable" x-on:touchstart.away.throttle.2000ms="updateWireable" x-on:mouseleave.throttle.2000ms="updateWireable">
1010
<div class="col-start-1 col-span-11 min-h-7">
11-
<x-livewire-tables::tools.filter-label for="{{ $dataTableFingerprint.'-numberRange-'.$filterKey.'-min' }}" :$filter :$filterLayout :$filterLabelAttributes :$customLabelAttributes />
11+
<x-livewire-tables::tools.filter-label for="{{ $dataTableFingerprint.'-numberRange-'.$filterKey.'-min' }}" :$filter :$filterLayout :$filterLabelAttributes :$customLabelAttributes />
1212
</div>
1313
<div class="col-start-1 col-span-12">
1414
<div
@@ -27,7 +27,7 @@
2727
'tw4ph range-slider flat' => $isTailwind4,
2828
'range-slider flat w-100' => $isBootstrap,
2929
])
30-
style='--min:{{ $minRange }}; --max:{{ $maxRange }}; --value-a:{{ $currentMin }} --value-b:{{ $currentMax }} --text-value-a:"{{ $currentMin }}"; --text-value-b:"{{ $maxRange }}""; --sufix:"{{ $suffix }}"'
30+
style='--min:{{ $minRange }}; --max:{{ $maxRange }}; --value-a:{{ $currentMin }} --value-b:{{ $currentMax }} --text-value-a:"{{ $currentMin }}"; --text-value-b:"{{ $maxRange }}""; --suffix:"{{ $suffix }}"'
3131
>
3232
<input x-ref="min" type="range" min="{{ $minRange }}" max="{{ $maxRange }}" value="{{ $currentMin }}"
3333
id="{{ $dataTableFingerprint }}-numberRange-{{ $filterKey }}-min" x-model='filterMin' x-on:change="changeMin($refs.min.value); updateWire()"
@@ -44,7 +44,7 @@
4444
<div class="col-start-12 row-start-1 text-right items-end justify-end min-h-7">
4545
<template x-if="($wire.get('appliedFilters.{{ $filter->getKey() }}') ?? null) !== null">
4646
<div class="w-1/12 inline-flex items-end justify-end ">
47-
<button @click="toggleStatusWithReset" {{ $this->getFilterMenuResetButtonAttributesBag->merge(['type' => 'button'])->class([
47+
<button @click="toggleStatusWithReset(); filterPopoverOpen = false;" {{ $this->getFilterMenuResetButtonAttributesBag->merge(['type' => 'button'])->class([
4848
'w-min rounded-full focus:outline-none' => $isTailwind && ($this->getFilterMenuResetButtonAttributes['default-styling'] ?? true),
4949
'text-indigo-400 hover:bg-indigo-200 hover:text-indigo-500 focus:bg-indigo-500 focus:text-white' => $isTailwind && ($this->getFilterMenuResetButtonAttributes['default-colors'] ?? true),
5050
])->except(['default-colors','default-styling'])

‎resources/views/components/tools/filters/select.blade.php‎

Lines changed: 5 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2,33 +2,13 @@
22
@php
33
$defaultValue = ($filter->hasFilterDefaultValue() ? $filter->getFilterDefaultValue() : null)
44
@endphp
5-
6-
<x-livewire-tables::tools.filters.wrapper x-data="stringFilter($wire, '{{ $filter->getKey() }}', '{{ $dataTableFingerprint }}', '{{ $defaultValue }}')">
7-
<x-slot:label>
8-
<x-livewire-tables::tools.filter-label :$filter :$filterLayout :$filterLabelAttributes :$customLabelAttributes />
9-
</x-slot:label>
10-
<x-slot:clearButton>
11-
<template x-if="($wire.get('appliedFilters.{{ $filter->getKey() }}') ?? null) !== null">
12-
<div class="w-1/12 inline-flex items-end justify-end ">
13-
<button @click="toggleStatusWithReset" {{ $this->getFilterMenuResetButtonAttributesBag->merge(['type' => 'button'])->class([
14-
'w-min rounded-full focus:outline-none' => $isTailwind && ($this->getFilterMenuResetButtonAttributes['default-styling'] ?? true),
15-
'text-indigo-400 hover:bg-indigo-200 hover:text-indigo-500 focus:bg-indigo-500 focus:text-white' => $isTailwind && ($this->getFilterMenuResetButtonAttributes['default-colors'] ?? true),
16-
])->except(['default-colors','default-styling'])
17-
}}>
18-
<span class="sr-only">{{ __($localisationPath.'Remove filter option') }}</span>
19-
<x-heroicon-m-x-mark class="h-6 w-6" />
20-
</button>
21-
22-
</div>
23-
</template>
24-
</x-slot:clearButton>
5+
<x-livewire-tables::tools.filters.wrapper-string :$filter :$filterInputAttributes :$filterLabelAttributes :$customLabelAttributes>
256
<div @class([
267
'basis-full w-full flex flex-row items-center rounded-md shadow-sm' => $isTailwind,
278
'tw4ph rounded-md shadow-sm' => $isTailwind4,
289
'mb-3 mb-md-0 input-group' => $isBootstrap,
2910
])>
30-
<select {!! $filter->getWireMethod('appliedFilters.'.$filter->getKey()) !!} {{
31-
$filterInputAttributes->merge()
11+
<select {!! $filter->getWireMethod('appliedFilters.'.$filter->getKey()) !!} {{ $filterInputAttributes->merge()
3212
->class([
3313
// Tailwind 3
3414
'block w-full transition duration-150 ease-in-out rounded-md shadow-sm focus:ring focus:ring-opacity-50' => $isTailwind && ($filterInputAttributes['default-styling'] ?? true),
@@ -45,7 +25,8 @@
4525
'form-select' => $isBootstrap5 && ($filterInputAttributes['default-styling'] ?? true),
4626
])
4727
->except(['default-styling','default-colors'])
48-
}}>
28+
}}
29+
>
4930
@foreach($filter->getOptions() as $key => $value)
5031
@if (is_iterable($value))
5132
<optgroup label="{{ $key }}">
@@ -58,7 +39,6 @@
5839
@endif
5940
@endforeach
6041
</select>
61-
6242
</div>
43+
</x-livewire-tables::tools.filters.wrapper-string>
6344

64-
</x-livewire-tables::tools.filters.wrapper>

‎resources/views/components/tools/filters/wrapper-string.blade.php‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<x-slot:clearButton>
1111
<template x-if="($wire.get('appliedFilters.{{ $filter->getKey() }}') ?? null) !== null">
1212
<div class="w-1/12 inline-flex items-end justify-end ">
13-
<button @click="toggleStatusWithReset" {{ $this->getFilterMenuResetButtonAttributesBag->merge(['type' => 'button'])->class([
13+
<button @click="toggleStatusWithReset(); filterPopoverOpen = false;" {{ $this->getFilterMenuResetButtonAttributesBag->merge(['type' => 'button'])->class([
1414
'w-min rounded-full focus:outline-none' => $isTailwind && ($this->getFilterMenuResetButtonAttributes['default-styling'] ?? true),
1515
'text-indigo-400 hover:bg-indigo-200 hover:text-indigo-500 focus:bg-indigo-500 focus:text-white' => $isTailwind && ($this->getFilterMenuResetButtonAttributes['default-colors'] ?? true),
1616
])->except(['default-colors','default-styling'])
@@ -27,6 +27,7 @@
2727
'tw4ph rounded-md shadow-sm' => $isTailwind4,
2828
'mb-3 mb-md-0 input-group' => $isBootstrap,
2929
])>
30+
@if ($slot->isEmpty())
3031
<input {!! $filter->getWireMethod('appliedFilters.'.$filter->getKey()) !!} {{
3132
$filterInputAttributes->merge()
3233
->class([
@@ -38,6 +39,11 @@
3839
])
3940
->except(['default-styling','default-colors'])
4041
}} />
42+
@else
43+
{{ $slot }}
44+
@endif
45+
46+
4147
</div>
4248

4349
</x-livewire-tables::tools.filters.wrapper>

‎resources/views/includes/filter-pill.blade.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
'inline-flex items-center px-2.5 py-0.5 rounded-full leading-4' => $isTailwind && ($filterPillsItemAttributes['default-styling'] ?? true),
1010
'text-xs font-medium capitalize' => $isTailwind && ($filterPillsItemAttributes['default-text'] ?? ($filterPillsItemAttributes['default-styling'] ?? true)),
1111
'bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900' => $isTailwind && ($filterPillsItemAttributes['default-colors'] ?? true),
12+
1213
'tw4ph inline-flex items-center px-2.5 py-0.5 rounded-full leading-4' => $isTailwind4 && ($filterPillsItemAttributes['default-styling'] ?? true),
1314
'tw4ph text-xs font-medium capitalize' => $isTailwind4 && ($filterPillsItemAttributes['default-text'] ?? ($filterPillsItemAttributes['default-styling'] ?? true)),
1415
'tw4ph bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900' => $isTailwind4 && ($filterPillsItemAttributes['default-colors'] ?? true),

0 commit comments

Comments
 (0)