Skip to content

Commit a0a12d0

Browse files
lrljoelrljoe
committed
FilterFixes
1 parent 59f5674 commit a0a12d0

33 files changed

+401
-227
lines changed

‎resources/js/laravel-livewire-tables.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import filterPills from "./partials/core/filterPills.min.js";
55
import externalFilter from "./partials/core/externalFilter.min.js";
66
import tools from "./partials/core/tools.min.js";
77
import boolean from "./partials/filters/boolean.js";
8+
import stringFilter from "./partials/filters/string.js";
89
import fpf from "./partials/filters/fpf.js";
910
import nrF from "./partials/filters/numberRange.js";
1011
import bulkactionsHelper from "./partials/core/bulkactionsHelper.min.js";
@@ -17,6 +18,7 @@ document.addEventListener('alpine:init', () => {
1718
externalFilter();
1819
tools();
1920
boolean();
21+
stringFilter();
2022
fpf();
2123
nrF();
2224
bulkactionsHelper();

‎resources/js/laravel-livewire-tables.min.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import filterPills from "./partials/core/filterPills.min.js";
55
import externalFilter from "./partials/core/externalFilter.min.js";
66
import tools from "./partials/core/tools.min.js";
77
import boolean from "./partials/filters/boolean.js";
8+
import stringFilter from "./partials/filters/string.js";
89
import fpf from "./partials/filters/fpf.js";
910
import nrF from "./partials/filters/numberRange.js";
1011
import bulkactionsHelper from "./partials/core/bulkactionsHelper.min.js";
@@ -16,8 +17,8 @@ document.addEventListener('livewire:init', () => {
1617
externalFilter();
1718
tools();
1819
boolean();
20+
stringFilter();
1921
fpf();
2022
nrF();
2123
bulkactionsHelper();
22-
2324
});

‎resources/js/partials/core/tools.min.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@ function tools() {
1818
resetAllFilters()
1919
{
2020
this.externalFilterPillsVals = [];
21-
wire.call('setFilterDefaults');
21+
wire.dispatch('clear-filters');
22+
//wire.call('setFilterDefaults');
2223
},
2324
setInternalFilterPillVal(filterKey, filterValues)
2425
{

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

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,12 @@ function newBf() {
66
booleanFilterKey: filterKey,
77
switchOn: false,
88
value: false,
9+
setValue: null,
910
toggleStatus()
1011
{
1112
let tempValue = Boolean(Number(wire.get('appliedFilters.'+this.booleanFilterKey) ?? this.value));
1213
let newBoolean = !tempValue;
13-
this.switchOn = this.value = newBoolean;
14+
this.switchOn = this.value = this.setValue = newBoolean;
1415
return Number(newBoolean);
1516
},
1617
toggleStatusWithUpdate()
@@ -32,33 +33,25 @@ function newBf() {
3233

3334
this.$nextTick(() => {
3435
this.value = wire.get('appliedFilters.'+this.booleanFilterKey) ?? defaultValue;
35-
console.log('This Value NextTick: '+this.value ?? 0);
36+
this.setValue = wire.get('appliedFilters.'+this.booleanFilterKey) ?? null;
3637
this.setSwitchOn(this.value ?? 0);
3738
});
3839

3940
this.listeners.push(
4041
Livewire.on('filter-was-set', (detail) => {
41-
console.log('filter-was-set-in-boolean');
42-
console.log('detail');
43-
console.log(detail);
4442

4543
if(detail.dataTableFingerprint == dataTableFingerprint && detail.filterKey == this.booleanFilterKey) {
46-
console.log('applies-to-this-table');
47-
console.log('typeof');
48-
console.log(typeof detail.value);
49-
console.log(detail.value);
5044

5145
if(typeof detail.value === null || detail.value === null)
5246
{
53-
console.log("Null Setting to False");
5447
this.value = this.switchOn = false;
48+
this.setValue = detail.value;
5549
}
5650
else
5751
{
5852
let number = Number(detail.value ?? 0);
5953
let boolVal = Boolean(number);
60-
console.log("Setting to "+boolVal);
61-
this.value = this.switchOn = boolVal;
54+
this.value = this.switchOn = this.setValue = boolVal;
6255
this.setSwitchOn(number);
6356
}
6457
}

‎resources/js/partials/filters/numberRange.js‎

Lines changed: 60 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,40 @@
11
/*jshint esversion: 6 */
22

33
function nrF() {
4-
Alpine.data('numberRangeFilter', (wire, filterKey, parentElementPath, filterConfig, childElementRoot) => ({
5-
allFilters: wire.entangle('appliedFilters', false),
4+
Alpine.data('numberRangeFilter', (wire, filterKey, dataTableFingerprint, parentElementPath, filterConfig, childElementRoot) => ({
5+
allFilters: wire.entangle('appliedFilters'),
66
originalMin: 0,
77
originalMax: 100,
88
filterMin: 0,
99
filterMax: 100,
1010
currentMin: 0,
1111
currentMax: 100,
1212
hasUpdate: false,
13-
wireValues: wire.entangle('appliedFilters.' + filterKey, false),
13+
listeners: [],
14+
wireValues: null,
1415
defaultMin: filterConfig['minRange'],
1516
defaultMax: filterConfig['maxRange'],
1617
restrictUpdates: false,
1718
initialiseStyles()
1819
{
1920
let numRangeFilterContainer = document.getElementById(parentElementPath);
2021
numRangeFilterContainer.style.setProperty('--value-a', this.wireValues['min'] ?? this.filterMin);
21-
numRangeFilterContainer.style.setProperty('--text-value-a', JSON.stringify(this.wireValues['min'] ?? this.filterMin));
22+
numRangeFilterContainer.style.setProperty('--text-value-a', '"'+JSON.stringify(this.wireValues['min'] ?? this.filterMin)+'"');
2223
numRangeFilterContainer.style.setProperty('--value-b', this.wireValues['max'] ?? this.filterMax);
2324
numRangeFilterContainer.style.setProperty('--text-value-b', JSON.stringify(this.wireValues['max'] ?? this.filterMax));
2425
},
2526
updateStyles(filterMin, filterMax) {
27+
let tmpFilterMin = parseInt(filterMin);
28+
let tmpFilterMax = parseInt(filterMax);
29+
2630
let numRangeFilterContainer = document.getElementById(parentElementPath);
27-
numRangeFilterContainer.style.setProperty('--value-a', filterMin);
28-
numRangeFilterContainer.style.setProperty('--text-value-a', JSON.stringify(filterMin));
29-
numRangeFilterContainer.style.setProperty('--value-b', filterMax);
30-
numRangeFilterContainer.style.setProperty('--text-value-b', JSON.stringify(filterMax));
31+
numRangeFilterContainer.style.setProperty('--value-a', tmpFilterMin);
32+
numRangeFilterContainer.style.setProperty('--text-value-a', '"'+JSON.stringify(tmpFilterMin)+'"');
33+
numRangeFilterContainer.style.setProperty('--value-b', tmpFilterMax);
34+
numRangeFilterContainer.style.setProperty('--text-value-b', '"'+JSON.stringify(tmpFilterMax)+'"');
3135
},
3236
setupWire() {
33-
if (this.wireValues !== undefined) {
37+
if (this.wireValues !== null) {
3438
this.filterMin = this.originalMin = (this.wireValues['min'] !== undefined) ? this.wireValues['min'] : this.defaultMin;
3539
this.filterMax = this.originalMax = (this.wireValues['max'] !== undefined) ? this.wireValues['max'] : this.defaultMax;
3640
} else {
@@ -57,17 +61,64 @@ function nrF() {
5761
}
5862
this.updateStyles(this.filterMin,this.filterMax);
5963
},
64+
changeMin(value)
65+
{
66+
this.filterMin = value;
67+
let numRangeFilterContainer = document.getElementById(parentElementPath);
68+
numRangeFilterContainer.style.setProperty('--value-a', value);
69+
numRangeFilterContainer.style.setProperty('--text-value-a', JSON.stringify(value));
70+
},
71+
changeMax(value)
72+
{
73+
this.filterMax = value;
74+
let numRangeFilterContainer = document.getElementById(parentElementPath);
75+
numRangeFilterContainer.style.setProperty('--value-b', value);
76+
numRangeFilterContainer.style.setProperty('--text-value-b', JSON.stringify(value));
77+
},
6078
updateWireable() {
6179
if (this.hasUpdate) {
6280
this.hasUpdate = false;
6381
this.wireValues = { 'min': this.filterMin, 'max': this.filterMax };
6482
wire.set('appliedFilters.' + filterKey, this.wireValues);
6583
}
6684
},
85+
toggleStatusWithReset()
86+
{
87+
this.filterMin = this.defaultMin;
88+
this.filterMax = this.defaultMax;
89+
this.updateStyles(this.filterMin,this.filterMax);
90+
wire.call('resetFilter',filterKey);
91+
},
6792
init() {
93+
this.wireValues= wire.get('appliedFilters.' + filterKey) ?? { 'min': this.filterMin, 'max': this.filterMax };
6894
this.initialiseStyles();
6995
this.setupWire();
7096
this.$watch('allFilters', value => this.setupWire());
97+
this.listeners.push(
98+
Livewire.on('clear-filters', (detail) => {
99+
100+
if(detail.dataTableFingerprint == dataTableFingerprint && detail.filterKey == filterKey) {
101+
this.wireValues = { 'min': this.defaultMin, 'max': this.defaultMax };
102+
this.updateStyles(this.defaultMin, this.defaultMax);
103+
104+
}
105+
}));
106+
this.listeners.push(
107+
108+
Livewire.on('filter-was-set', (detail) => {
109+
110+
if(detail.dataTableFingerprint == dataTableFingerprint && detail.filterKey == filterKey) {
111+
this.wireValues = { 'min': this.defaultMin, 'max': this.defaultMax };
112+
this.updateStyles(this.defaultMin, this.defaultMax);
113+
114+
}
115+
})
116+
);
117+
},
118+
destroy() {
119+
this.listeners.forEach((listener) => {
120+
listener();
121+
});
71122
},
72123
}));
73124
}

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

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/*jshint esversion: 6 */
2+
3+
function stringFilter() {
4+
5+
Alpine.data('stringFilter', (wire,filterKey,dataTableFingerprint,defaultValue) => ({
6+
stringFilterKey: filterKey,
7+
value: null,
8+
setValue: null,
9+
toggleStatusWithReset()
10+
{
11+
wire.call('resetFilter',this.stringFilterKey);
12+
},
13+
init() {
14+
this.$nextTick(() => {
15+
this.value = wire.get('appliedFilters.'+this.stringFilterKey) ?? defaultValue;
16+
this.setValue = wire.get('appliedFilters.'+this.stringFilterKey) ?? null;
17+
});
18+
19+
this.listeners.push(
20+
Livewire.on('filter-was-set', (detail) => {
21+
22+
if(detail.dataTableFingerprint == dataTableFingerprint && detail.filterKey == this.stringFilterKey) {
23+
this.value = detail.value;
24+
this.setValue = detail.value;
25+
}
26+
})
27+
);
28+
},
29+
destroy() {
30+
this.listeners.forEach((listener) => {
31+
listener();
32+
});
33+
},
34+
}));
35+
}
36+
37+
export default stringFilter;

‎resources/lang/json/en.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"livewire-tables::min": "Min",
2020
"livewire-tables::not_applicable": "N/A",
2121
"livewire-tables::No": "No",
22+
"livewire-tables::No Columns Selected": "No Columns Selected",
2223
"livewire-tables::No items found. Try to broaden your search.": "No items found. Try to broaden your search.",
2324
"livewire-tables::of": "of",
2425
"livewire-tables::Remove filter option": "Remove filter option",

‎resources/lang/php/en/core.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
'min' => 'Min',
2424
'not_applicable' => 'N/A',
2525
'No' => 'No',
26+
'No Columns Selected' => 'No Columns Selected',
2627
'No items found, try to broaden your search' => 'No items found, try to broaden your search',
2728
'of' => 'of',
2829
'Remove filter option' => 'Remove filter option',

‎resources/views/components/table/no-columns.blade.php‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@aware(['localisationPath'])
2+
<x-livewire-tables::table.tr.plain :rowIndex="-1" data-id="thead">
3+
<x-livewire-tables::table.td.plain>
4+
{{ __($localisationPath.'No Columns Selected') }}
5+
</x-livewire-tables::table.td.plain>
6+
</x-livewire-tables::table.tr.plain>

‎resources/views/components/table/table.blade.php‎

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@aware(['dataTableFingerprint','primaryKey','isTailwind', 'isTailwind4', 'isBootstrap', 'coreTableAttributes'])
1+
@aware(['dataTableFingerprint','primaryKey','isTailwind', 'isTailwind4', 'isBootstrap', 'localisationPath', 'coreTableAttributes', 'selectedVisibleColumns'])
22
@props(['bulkActionsTdAttributes','bulkActionsTdCheckboxAttributes'])
33

44
<table {{ $attributes->merge($coreTableAttributes['table'])
@@ -17,18 +17,23 @@
1717
->except(['default','default-styling','default-colors', 'wire:key']) }}
1818
wire:key="bookingitemstable-table-{{ rand(5828,458218) }}"
1919
>
20-
<x-livewire-tables::thead />
21-
22-
@php($currentRows = $this->getRows)
23-
24-
@if(count($currentRows) > 0)
25-
@tableloop ($currentRows as $rowIndex => $row)
26-
@php($rowPk = $row->{$primaryKey})
27-
<x-livewire-tables::tbody wire:key="{{ $dataTableFingerprint }}-row-wrap-{{ $rowPk }}" :$row :$rowIndex :$rowPk :tableRowDetails="$this->getTableRowDetails($row, $rowIndex)" />
28-
@endtableloop
20+
@if(count($selectedVisibleColumns ?? []) == 0)
21+
<x-livewire-tables::table.no-columns />
2922
@else
30-
<x-livewire-tables::table.empty />
23+
<x-livewire-tables::thead />
24+
25+
@php($currentRows = $this->getRows)
26+
27+
@if(count($currentRows) > 0)
28+
@tableloop ($currentRows as $rowIndex => $row)
29+
@php($rowPk = $row->{$primaryKey})
30+
<x-livewire-tables::tbody wire:key="{{ $dataTableFingerprint }}-row-wrap-{{ $rowPk }}" :$row :$rowIndex :$rowPk :tableRowDetails="$this->getTableRowDetails($row, $rowIndex)" />
31+
@endtableloop
32+
@else
33+
<x-livewire-tables::table.empty />
34+
@endif
35+
36+
<x-livewire-tables::tfoot />
37+
3138
@endif
32-
33-
<x-livewire-tables::tfoot />
3439
</table>

0 commit comments

Comments
 (0)