Skip to content

Commit 247b3c2

Browse files
lrljoelrljoe
committed
Livewire Component Filter - Test Branch
1 parent d56dc78 commit 247b3c2

33 files changed

+726
-217
lines changed

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

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,9 @@ document.addEventListener('alpine:init', () => {
1919
selectAllStatus: wire.entangle('selectAll'),
2020
delaySelectAll: wire.entangle('delaySelectAll'),
2121
hideBulkActionsWhenEmpty: wire.entangle('hideBulkActionsWhenEmpty'),
22+
externalFilterPillsVals: wire.entangle('externalFilterPillsValues').live,
23+
showFilterPillLabel: [],
24+
filterPillsSeparator: ', ',
2225
dragging: false,
2326
reorderEnabled: false,
2427
sourceID: '',
@@ -36,6 +39,36 @@ document.addEventListener('alpine:init', () => {
3639
currentlyReorderingStatus: wire.entangle('currentlyReorderingStatus'),
3740
hideReorderColumnUnlessReorderingStatus: wire.entangle('hideReorderColumnUnlessReorderingStatus'),
3841
reorderDisplayColumn: wire.entangle('reorderDisplayColumn'),
42+
syncExternalFilterPillsValues(filterKey,filterValues) {
43+
this.externalFilterPillsVals[filterKey] = filterValues;
44+
this.showFilterPillLabel[filterKey] = this.getFilterPillsLength(filterKey);
45+
},
46+
getFilterPillsLength(filterKey)
47+
{
48+
return Object.keys(this.externalFilterPillsVals[filterKey]).length ?? 0;
49+
},
50+
setFilterPillsLength(externalFilterPillsValues)
51+
{
52+
let filterValueLength = 0;
53+
if (typeof(externalFilterPillsValues) !== 'undefined')
54+
{
55+
filterValueLength = Object.keys(externalFilterPillsValues).length ?? 0;
56+
}
57+
else
58+
{
59+
filterValueLength = 0;
60+
}
61+
return filterValueLength;
62+
},
63+
showFilterPillsLabel(filterKey)
64+
{
65+
let pillsLength = this.getFilterPillsLength(filterKey);
66+
return (this.getFilterPillsLength(filterKey) > 0);
67+
},
68+
showFilterPillsSeparator(filterKey,index)
69+
{
70+
return ((index+1) < (this.getFilterPillsLength(filterKey)));
71+
},
3972
dragStart(event) {
4073
this.$nextTick(() => { this.setupEvenOddClasses() });
4174
this.sourceID = event.target.id;
@@ -659,4 +692,95 @@ document.addEventListener('alpine:init', () => {
659692
}
660693
}));
661694

695+
Alpine.data('filterPillsArrayExternal', (tableNameVal, filterKeyVal) => ({
696+
tableName: tableNameVal,
697+
filterKey: filterKeyVal,
698+
filterPillValues: null,
699+
separator: ', ',
700+
filterPillValuesLength: 0,
701+
hasLoaded: false,
702+
updatedPillsValues(event)
703+
{
704+
this.hasLoaded = false;
705+
let eventTableName = event.detail.tableName ?? '';
706+
let eventFilterValues = event.detail.filterValues;
707+
let eventFilterValueLength = 0;
708+
if((eventTableName ?? '') != '' && eventTableName === this.tableName)
709+
{
710+
this.filterPillValues = eventFilterValues;
711+
eventFilterValueLength = this.setLength(eventFilterValues);
712+
713+
this.filterPillValuesLength = eventFilterValueLength;
714+
}
715+
this.hasLoaded = true;
716+
},
717+
refreshFilterPill(event)
718+
{
719+
720+
},
721+
refreshFilterPillNew(event)
722+
{
723+
let eventFilterValues = event.detail.filterValues;
724+
725+
this.filterPillValues = eventFilterValues;
726+
this.filterPillValuesLength = (typeof(eventFilterValues) !== 'undefined') ? Object.keys(eventFilterValues).length : 0;
727+
728+
},
729+
setupFilterPill(separator, filterPillValues)
730+
{
731+
this.hasLoaded = false;
732+
733+
this.separator = separator;
734+
this.filterPillValues = filterPillValues;
735+
this.filterPillValuesLength = (typeof(this.filterPillValues) !== 'undefined') ? Object.keys(this.filterPillValues).length : 0;
736+
this.$nextTick(() => {
737+
this.filterPillValuesLength = (typeof(this.filterPillValues) !== 'undefined') ? Object.keys(this.filterPillValues).length : 0
738+
this.hasLoaded = true;
739+
740+
});
741+
742+
},
743+
setSeparator(value)
744+
{
745+
this.separator = value;
746+
},
747+
getLength()
748+
{
749+
return Object.keys(this.filterPillValues).length ?? 0;
750+
},
751+
setLength(eventFilterValues)
752+
{
753+
let filterValueLength = 0;
754+
if (typeof(eventFilterValues) !== 'undefined')
755+
{
756+
filterValueLength = Object.keys(eventFilterValues).length ?? 0;
757+
}
758+
else
759+
{
760+
filterValueLength = 0;
761+
}
762+
return filterValueLength;
763+
},
764+
showSeparator(index)
765+
{
766+
return ((index+1) < (this.getLength()));
767+
},
768+
init()
769+
{
770+
window.addEventListener('filter-pills-updated', (event) => {
771+
this.updatedPillsValues(event)
772+
});
773+
774+
window.addEventListener('update-filter-pill-values', (event) => {
775+
this.refreshFilterPill(event)
776+
});
777+
window.addEventListener('refresh-filter-pill', (event) => {
778+
this.refreshFilterPillNew(event);
779+
});
780+
781+
782+
}
783+
}));
784+
785+
662786
});

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

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎resources/views/components/external/filters/livewire-array-filter.blade.php‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<div x-data x-init="$dispatch('filter-pills-updated', { filterPillValues: @js($returnValues), tableComponent: @js($tableComponent) })"
2+
>
3+
{{ $slot }}
4+
</div>

‎resources/views/components/tools/filter-pills.blade.php‎

Lines changed: 36 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,40 @@
11
@aware([ 'tableName','isTailwind','isBootstrap','isBootstrap4','isBootstrap5'])
22

3-
<div>
4-
<div @class([
5-
'mb-4 px-4 md:p-0' => $isTailwind,
6-
'mb-3' => $isBootstrap,
7-
]) x-cloak x-show="!currentlyReorderingStatus">
8-
<small @class([
9-
'text-gray-700 dark:text-white' => $isTailwind,
10-
'' => $isBootstrap,
11-
])>
12-
{{ __($this->getLocalisationPath.'Applied Filters') }}:
13-
</small>
3+
<div {{ $attributes->merge([
144
15-
@tableloop($this->getAppliedFiltersWithValues() as $filterSelectName => $value)
16-
@php($filter = $this->getFilterByKey($filterSelectName))
17-
@continue(is_null($filter) || $filter->isHiddenFromPills())
18-
@php( $filterPillValue = $filter->getFilterPillValue($value))
19-
@continue((is_array($filterPillValue) && empty($filterPillValue)))
20-
@php( $filterPillTitle = $filter->getFilterPillTitle())
21-
@php( $separator = method_exists($filter, 'getPillsSeparator') ? $filter->getPillsSeparator() : ', ')
22-
@if ($filter->hasCustomPillBlade())
23-
@include($filter->getCustomPillBlade(), ['filter' => $filter])
24-
@else
25-
<x-livewire-tables::tools.filter-pills.item :$filterPillTitle :$filterPillValue :$filterSelectName :$separator/>
26-
@endif
27-
@endtableloop
28-
<x-livewire-tables::tools.filter-pills.buttons.reset-all />
29-
</div>
5+
'wire:loading.class' => $this->displayFilterPillsWhileLoading ? '' : 'invisible',
6+
'x-cloak',
7+
])
8+
->class([
9+
'mb-4 px-4 md:p-0' => $isTailwind,
10+
'mb-3' => $isBootstrap,
11+
])
12+
13+
}}>
14+
<small @class([
15+
'text-gray-700 dark:text-white' => $isTailwind,
16+
'' => $isBootstrap,
17+
])>
18+
{{ __($this->getLocalisationPath.'Applied Filters') }}:
19+
</small>
20+
@tableloop($this->getPillDataForFilter() as $filterKey => $data)
21+
@php
22+
$filterPillValue = $data['filterPillValue'];
23+
$filterPillTitle = $data['filterPillTitle'];
24+
$filterSelectName = $data['filterSelectName'];
25+
$isAnExternalLivewireFilter = $data['isAnExternalLivewireFilter'];
26+
$separator = $data['separator'];
27+
28+
@endphp
29+
@if ($data['filter']->hasCustomPillBlade())
30+
@include($data['filter']->getCustomPillBlade(), ['filter' => $data['filter']])
31+
@elseif($isAnExternalLivewireFilter)
32+
<x-livewire-tables::tools.filter-pills.external-item :$filterKey :$filterPillTitle :$filterPillValue :$filterSelectName :$separator />
33+
34+
@else
35+
<x-livewire-tables::tools.filter-pills.item :$filterPillTitle :$filterPillValue :$filterSelectName :$separator/>
36+
@endif
37+
@endtableloop
38+
39+
<x-livewire-tables::tools.filter-pills.buttons.reset-all />
3040
</div>

‎resources/views/components/tools/filter-pills/external-item.blade.php‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
@aware(['tableName','isTailwind','isBootstrap','isBootstrap4','isBootstrap5'])
2+
@props(['filterKey', 'filterPillTitle', 'filterPillValue' => [], 'filterSelectName', 'separator' => ', '])
3+
4+
<span wire:key="{{ $tableName }}-filter-pill-{{ $filterSelectName }}"
5+
{{
6+
$attributes
7+
->merge($this->getFilterPillsItemAttributes)
8+
->class([
9+
'inline-flex space-x-1 items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 capitalize' => $isTailwind && $this->getFilterPillsItemAttributes['default-styling'],
10+
'bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900' => $isTailwind && $this->getFilterPillsItemAttributes['default-colors'],
11+
'badge badge-pill badge-info d-inline-flex align-items-center' => $isBootstrap4 && $this->getFilterPillsItemAttributes['default-styling'],
12+
'badge rounded-pill bg-info d-inline-flex align-items-center' => $isBootstrap5 && $this->getFilterPillsItemAttributes['default-styling'],
13+
])
14+
->except(['default-styling', 'default-colors'])
15+
}}>
16+
{{ $filterPillTitle }}:
17+
<template x-for="(value, index) in externalFilterPillsVals['{{ $filterKey }}']">
18+
<span class="inline-flex">
19+
<span x-text="value"></span>
20+
<span :class="showFilterPillsSeparator('{{ $filterKey }}', index) ? 'visible' : 'invisible'" x-text="filterPillsSeparator"></span>
21+
</span>
22+
23+
</template>
24+
25+
<x-livewire-tables::tools.filter-pills.buttons.reset-filter :filterKey="$filterSelectName" />
26+
27+
</span>
28+

‎src/External/Filters/LivewireArrayExternalFilter.php‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<?php
2+
3+
namespace Rappasoft\LaravelLivewireTables\External\Filters;
4+
5+
use Livewire\Component;
6+
use Livewire\Attributes\{Locked, Modelable, Renderless};
7+
use Rappasoft\LaravelLivewireTables\External\Filters\Traits\{HandlesCoreMethodsForExternalFilter,HandlesCorePropertiesForExternalFilter,HandlesTableEventsForExternalFilter, HandlesUpdateStatusForExternalFilter};
8+
9+
abstract class LivewireArrayExternalFilter extends Component
10+
{
11+
use HandlesCoreMethodsForExternalFilter,
12+
HandlesCorePropertiesForExternalFilter,
13+
HandlesTableEventsForExternalFilter,
14+
HandlesUpdateStatusForExternalFilter;
15+
16+
#[Modelable]
17+
public array $value = [];
18+
19+
#[Locked]
20+
public array $optionsAvailable = [];
21+
22+
public array $optionsSelected = [];
23+
24+
25+
#[Renderless]
26+
public function updatedOptionsSelected($value)
27+
{
28+
if(!$this->skipUpdate)
29+
{
30+
if (! $this->needsUpdating) {
31+
$this->needsUpdating = true;
32+
}
33+
}
34+
}
35+
}

‎src/External/Filters/Traits/HandlesCoreMethodsForExternalFilter.php‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<?php
2+
3+
namespace Rappasoft\LaravelLivewireTables\External\Filters\Traits;
4+
5+
trait HandlesCoreMethodsForExternalFilter
6+
{
7+
public function mountHandlesCoreMethodsForExternalFilter(): void
8+
{
9+
$this->setupFilter();
10+
}
11+
12+
protected function setupFilter(): void
13+
{}
14+
}

‎src/External/Filters/Traits/HandlesCorePropertiesForExternalFilter.php‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<?php
2+
3+
namespace Rappasoft\LaravelLivewireTables\External\Filters\Traits;
4+
5+
trait HandlesCorePropertiesForExternalFilter
6+
{
7+
public string $filterKey = '';
8+
9+
public string $tableName = '';
10+
11+
public string $tableComponent = '';
12+
13+
protected function setFilterKey(string $filterKey): self
14+
{
15+
$this->filterKey = $filterKey;
16+
17+
return $this;
18+
}
19+
20+
public function getFilterKey(): string
21+
{
22+
return $this->filterKey;
23+
}
24+
25+
protected function setTableName(string $tableName): self
26+
{
27+
$this->tableName = $tableName;
28+
29+
return $this;
30+
}
31+
32+
public function getTableName(): string
33+
{
34+
return $this->tableName;
35+
}
36+
37+
protected function setTableComponent(string $tableComponent): self
38+
{
39+
$this->tableComponent = $tableComponent;
40+
41+
return $this;
42+
}
43+
44+
public function getTableComponent(): string
45+
{
46+
return $this->tableComponent;
47+
}
48+
49+
50+
}

‎src/External/Filters/Traits/HandlesTableEventsForExternalFilter.php‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<?php
2+
3+
namespace Rappasoft\LaravelLivewireTables\External\Filters\Traits;
4+
5+
use Livewire\Attributes\{On,Renderless};
6+
7+
trait HandlesTableEventsForExternalFilter
8+
{
9+
#[On('filter-was-set')]
10+
public function setFilterValues(string $tableName, string $filterKey, string|array|null $value = []): void
11+
{
12+
if (!is_null($value) && $tableName == $this->tableName && $filterKey == $this->filterKey && $this->optionsSelected != $value) {
13+
$this->optionsSelected = $value;
14+
}
15+
}
16+
17+
#[Renderless]
18+
public function renderingHandlesTableEventsForExternalFilter()
19+
{
20+
if ($this->needsUpdating)
21+
{
22+
$this->needsUpdating = false;
23+
$this->dispatch('livewireArrayFilterUpdateValuesNew', tableName: $this->tableName, filterKey: $this->filterKey, values: $this->optionsSelected)->to($this->tableComponent);
24+
}
25+
}
26+
27+
}

‎src/External/Filters/Traits/HandlesUpdateStatusForExternalFilter.php‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<?php
2+
3+
namespace Rappasoft\LaravelLivewireTables\External\Filters\Traits;
4+
5+
use Livewire\Attributes\{On,Renderless};
6+
7+
trait HandlesUpdateStatusForExternalFilter
8+
{
9+
10+
public bool $skipUpdate = false;
11+
12+
protected bool $needsUpdating = false;
13+
14+
}

0 commit comments

Comments
 (0)