Skip to content

Commit df39542

Browse files
lrljoelrljoe
authored
Add Filter Pill Handler
1 parent 6478e1e commit df39542

File tree

4 files changed

+125
-85
lines changed

4 files changed

+125
-85
lines changed

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
@aware(['tableName','isTailwind','isBootstrap4','isBootstrap5'])
2+
3+
<div x-data="filterPillsHandler(@js($setupData))" x-bind="trigger"
4+
wire:key="{{ $tableName }}-filter-pill-{{ $filterKey }}" {{
5+
$attributes->merge($filterPillsItemAttributes)
6+
->class([
7+
'inline-flex items-center px-2.5 py-0.5 rounded-full leading-4' => $isTailwind && ($filterPillsItemAttributes['default-styling'] ?? true),
8+
'text-xs font-medium capitalize' => $isTailwind && ($filterPillsItemAttributes['default-text'] ?? ($filterPillsItemAttributes['default-styling'] ?? true)),
9+
'bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900' => $isTailwind && ($filterPillsItemAttributes['default-colors'] ?? true),
10+
'badge badge-pill badge-info d-inline-flex align-items-center' => $isBootstrap4 && ($filterPillsItemAttributes['default-styling'] ?? true),
11+
'badge rounded-pill bg-info d-inline-flex align-items-center' => $isBootstrap5 && ($filterPillsItemAttributes['default-styling'] ?? true),
12+
])
13+
->except(['default', 'default-styling', 'default-colors'])
14+
}}
15+
>
16+
<span {{ $attributes->merge($pillTitleDisplayDataArray) }}></span>
17+
18+
<span {{ $attributes->merge($pillDisplayDataArray) }}></span>
19+
20+
<x-livewire-tables::tools.filter-pills.buttons.reset-filter :$filterKey :$filterPillData/>
21+
22+
</div>

‎src/DataTransferObjects/Filters/FilterPillData.php‎

Lines changed: 67 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -6,130 +6,142 @@
66

77
class FilterPillData
88
{
9+
public string $separatedValues = '';
10+
911
public function __construct(
12+
protected string $filterKey,
1013
protected string $filterPillTitle,
11-
protected string $filterSelectName,
1214
protected string|array|null $filterPillValue,
1315
protected string $separator,
1416
public bool $isAnExternalLivewireFilter,
1517
public bool $hasCustomPillBlade,
1618
protected ?string $customPillBlade,
1719
protected array $filterPillsItemAttributes,
18-
protected ?string $separatedValues,
1920
protected bool $renderPillsAsHtml,
2021
protected bool $watchForEvents,
21-
protected array $customResetButtonAttributes, ) {}
22+
protected array $customResetButtonAttributes,
23+
protected bool $renderPillsTitleAsHtml ) {}
2224

23-
public static function make(string $filterPillTitle, string $filterSelectName, string|array|null $filterPillValue, string $separator = ', ', bool $isAnExternalLivewireFilter = false, bool $hasCustomPillBlade = false, ?string $customPillBlade = null, array $filterPillsItemAttributes = [], ?string $separatedValues = null, bool $renderPillsAsHtml = false, bool $watchForEvents = false, array $customResetButtonAttributes = []): FilterPillData
25+
public static function make(string $filterKey, string $filterPillTitle, string|array|null $filterPillValue, string $separator = ', ', bool $isAnExternalLivewireFilter = false, bool $hasCustomPillBlade = false, ?string $customPillBlade = null, array $filterPillsItemAttributes = [], bool $renderPillsAsHtml = false, bool $watchForEvents = false, array $customResetButtonAttributes = [], bool $renderPillsTitleAsHtml = false): FilterPillData
2426
{
2527
if ($isAnExternalLivewireFilter) {
2628
$watchForEvents = true;
2729
}
2830

29-
return new self($filterPillTitle, $filterSelectName, $filterPillValue, $separator, $isAnExternalLivewireFilter, $hasCustomPillBlade, $customPillBlade, $filterPillsItemAttributes, $separatedValues, $renderPillsAsHtml, $watchForEvents, $customResetButtonAttributes);
31+
return new self($filterKey, $filterPillTitle, $filterPillValue, $separator, $isAnExternalLivewireFilter, $hasCustomPillBlade, $customPillBlade, $filterPillsItemAttributes, $renderPillsAsHtml, $watchForEvents, $customResetButtonAttributes, $renderPillsTitleAsHtml);
3032
}
3133

3234
public function getTitle(): string
3335
{
3436
return $this->filterPillTitle;
3537
}
3638

37-
public function getSelectName(): string
39+
public function getPillValue(): array|string|null
3840
{
39-
return $this->filterSelectName;
41+
return $this->filterPillValue;
4042
}
4143

42-
public function getPillValue(): array|string|null
44+
public function getHasCustomPillBlade(): bool
4345
{
44-
return $this->filterPillValue;
46+
return $this->hasCustomPillBlade ?? false;
4547
}
4648

47-
public function isPillValueAnArray(): bool
49+
public function getCustomPillBlade(): ?string
4850
{
49-
return ! is_null($this->filterPillValue) && is_array($this->filterPillValue);
51+
return $this->customPillBlade;
5052
}
5153

52-
public function getSeparatedPillValue(): array|string|null
54+
public function getCustomResetButtonAttributes(): array
5355
{
54-
if ($this->isPillValueAnArray()) {
55-
return implode($this->getSeparator(), $this->getPillValue());
56-
} else {
57-
return $this->getPillValue();
58-
}
56+
return $this->customResetButtonAttributes ?? [];
5957
}
6058

61-
public function getValueFromPillData(): array|string|null
59+
60+
public function getIsAnExternalLivewireFilter(): int
6261
{
63-
if ($this->isPillValueAnArray()) {
64-
return implode($this->getSeparator(), $this->getPillValue());
65-
} else {
66-
return $this->getPillValue();
67-
}
62+
return intval($this->isAnExternalLivewireFilter ?? false);
6863
}
6964

70-
public function getHasCustomPillBlade(): bool
65+
public function getSeparator(): string
7166
{
72-
return $this->hasCustomPillBlade ?? false;
67+
return $this->separator ?? ', ';
7368
}
7469

75-
public function getCustomPillBlade(): ?string
70+
public function shouldUsePillsAsHtml(): int
7671
{
77-
return $this->customPillBlade;
72+
return intval($this->renderPillsAsHtml ?? false);
7873
}
7974

80-
public function getIsAnExternalLivewireFilter(): int
75+
public function shouldUsePillsTitleAsHtml(): int
8176
{
82-
return intval($this->isAnExternalLivewireFilter ?? false);
77+
return intval($this->renderPillsTitleAsHtml ?? false);
8378
}
8479

85-
public function getSeparator(): string
80+
public function shouldWatchForEvents(): int
8681
{
87-
return $this->separator ?? ', ';
82+
return intval($this->watchForEvents ?? false);
8883
}
8984

90-
public function getSeparatedValues(): string
85+
public function isPillValueAnArray(): bool
9186
{
92-
return $this->separatedValues ?? $this->getSeparatedPillValue();
87+
return ! is_null($this->filterPillValue) && is_array($this->filterPillValue);
9388
}
9489

95-
public function getFilterPillsItemAttributes(): array
90+
91+
public function getSeparatedPillValue(): string|null
9692
{
97-
return array_merge(['default' => true, 'default-colors' => true, 'default-styling' => true, 'default-text' => true], $this->filterPillsItemAttributes);
93+
if ($this->isPillValueAnArray()) {
94+
return implode($this->getSeparator(), $this->getPillValue());
95+
} else {
96+
return $this->getPillValue();
97+
}
9898
}
9999

100-
public function shouldUsePillsAsHtml(): int
100+
public function getSafeSeparatedPillValue(): string|null
101101
{
102-
return intval($this->renderPillsAsHtml ?? false);
102+
$string = $this->getSeparatedPillValue();
103+
104+
return htmlentities($string, ENT_QUOTES,'UTF-8');
105+
103106
}
104107

105-
public function shouldWatchForEvents(): int
108+
public function getFilterPillsItemAttributes(): array
106109
{
107-
return intval($this->watchForEvents ?? false);
110+
return array_merge(['default' => true, 'default-colors' => true, 'default-styling' => true, 'default-text' => true], $this->filterPillsItemAttributes);
108111
}
109112

110-
public function getFilterPillDisplayData(): ComponentAttributeBag
113+
114+
public function getFilterPillDisplayDataArray(): array
111115
{
116+
$array = [];
112117
if ($this->getIsAnExternalLivewireFilter()) {
113-
return $this->getExternalFilterPillDisplayData();
118+
return $this->getExternalFilterPillDisplayDataArray($array);
114119
}
115120

116-
return $this->getInternalFilterPillDisplayData();
121+
return $this->getInternalFilterPillDisplayDataArray($array);
122+
}
123+
124+
public function getExternalFilterPillDisplayDataArray(array $array = []): array
125+
{
126+
$array[$this->shouldUsePillsAsHtml() ? 'x-html' : 'x-text'] = 'displayString';
127+
128+
return $array;
117129
}
118130

119-
public function getInternalFilterPillDisplayData(): ComponentAttributeBag
131+
public function getInternalFilterPillDisplayDataArray(array $array = []): array
120132
{
121-
return new ComponentAttributeBag([
122-
'x-data' => "{ internalDisplayString: ''}",
123-
'x-init' => "internalDisplayString = updatePillValues('".$this->getSeparatedValues()."');",
124-
$this->shouldUsePillsAsHtml() ? 'x-html' : 'x-text' => 'internalDisplayString',
125-
]);
133+
134+
$array['x-data'] = "{ internalDisplayString: ''}";
135+
$array['x-init'] = "internalDisplayString = updatePillValues(".json_encode($this->getSafeSeparatedPillValue()).")";
136+
$array[$this->shouldUsePillsAsHtml() ? 'x-html' : 'x-text'] = 'internalDisplayString';
137+
138+
return $array;
126139
}
127140

128-
public function getExternalFilterPillDisplayData(): ComponentAttributeBag
141+
public function getFilterTitleDisplayDataArray(array $array = []): array
129142
{
130-
return new ComponentAttributeBag([
131-
$this->shouldUsePillsAsHtml() ? 'x-html' : 'x-text' => 'displayString',
132-
]);
143+
$array[$this->shouldUsePillsTitleAsHtml() ? 'x-html' : 'x-text'] = "localFilterTitle + ':&nbsp;'";
144+
return $array;
133145
}
134146

135147
public function getPillSetupData(string $filterKey = '', bool $shouldWatch = false): array
@@ -139,11 +151,6 @@ public function getPillSetupData(string $filterKey = '', bool $shouldWatch = fal
139151
return $array;
140152
}
141153

142-
public function getCustomResetButtonAttributes(): array
143-
{
144-
return $this->customResetButtonAttributes ?? [];
145-
}
146-
147154
public function getCalculatedCustomResetButtonAttributes(string $filterKey, array $filterPillsResetFilterButtonAttributes): array
148155
{
149156
return array_merge(
@@ -163,16 +170,17 @@ public function getCalculatedCustomResetButtonAttributes(string $filterKey, arra
163170
public function toArray(): array
164171
{
165172
return [
173+
'filterKey' => $this->filterKey,
166174
'filterPillTitle' => $this->getTitle(),
167-
'filterSelectName' => $this->getSelectName(),
168175
'filterPillValue' => $this->getPillValue(),
169176
'isAnExternalLivewireFilter' => $this->getIsAnExternalLivewireFilter(),
170177
'hasCustomPillBlade' => $this->getHasCustomPillBlade(),
171178
'customPillBlade' => $this->getCustomPillBlade(),
172179
'separator' => $this->getSeparator(),
180+
'separatedValues' => $this->getSafeSeparatedPillValue(),
173181
'filterPillsItemAttributes' => $this->getFilterPillsItemAttributes(),
174-
'separatedValues' => $this->getSeparatedValues(),
175182
'renderPillsAsHtml' => $this->shouldUsePillsAsHtml(),
183+
'renderPillsTitleAsHtml' => $this->shouldUsePillsTitleAsHtml(),
176184
'watchForEvents' => $this->shouldWatchForEvents(),
177185
];
178186
}

‎src/Traits/Filters/HandlesPillsData.php‎

Lines changed: 7 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -10,40 +10,21 @@ public function getPillDataForFilter(): array
1010
{
1111
$filters = [];
1212

13-
foreach ($this->getAppliedFiltersWithValuesForPills() as $filterSelectName => $value) {
14-
if (! is_null($filter = $this->getFilterByKey($filterSelectName))) {
15-
if ($filter->isEmpty($value)) {
16-
continue;
17-
}
18-
$customPillBlade = null;
19-
$isAnExternalLivewireFilter = (method_exists($filter, 'isAnExternalLivewireFilter') && $filter->isAnExternalLivewireFilter());
20-
$separator = method_exists($filter, 'getPillsSeparator') ? $filter->getPillsSeparator() : ', ';
21-
$separatedValues = null;
22-
23-
// dd($value);
24-
25-
if ($hasCustomPillBlade = $filter->hasCustomPillBlade()) {
26-
$customPillBlade = $filter->getCustomPillBlade();
27-
}
28-
29-
if (is_array($value) && ! empty($value)) {
30-
$separatedValues = implode($separator, $filter->getFilterPillValue($value));
31-
}
32-
13+
foreach ($this->getAppliedFiltersWithValuesForPills() as $filterKey => $value) {
14+
if (! is_null($filter = $this->getFilterByKey($filterKey))) {
3315
$filters[$filter->getKey()] = FilterPillData::make(
34-
customPillBlade: $customPillBlade,
16+
filterKey: $filter->getKey(),
17+
customPillBlade: $filter->getCustomPillBlade() ?? null,
3518
filterPillsItemAttributes: array_merge($this->getFilterPillsItemAttributes(), ($filter->hasPillAttributes() ? $filter->getPillAttributes() : [])),
3619

3720
filterPillTitle: $filter->getFilterPillTitle(),
3821
filterPillValue: $filter->getFilterPillValue($value),
3922

40-
filterSelectName: $filterSelectName,
41-
42-
hasCustomPillBlade: $hasCustomPillBlade,
43-
isAnExternalLivewireFilter: $isAnExternalLivewireFilter,
44-
separatedValues: $separatedValues,
23+
hasCustomPillBlade: $filter->hasCustomPillBlade(),
24+
isAnExternalLivewireFilter: (method_exists($filter, 'isAnExternalLivewireFilter') && $filter->isAnExternalLivewireFilter()),
4525
separator: method_exists($filter, 'getPillsSeparator') ? $filter->getPillsSeparator() : ', ',
4626
renderPillsAsHtml: $filter->getPillsAreHtml() ?? false,
27+
renderPillsTitleAsHtml: $filter->getFilterPillTitleAsHtml() ?? false,
4728
customResetButtonAttributes: $filter->getPillResetButtonAttributes(),
4829

4930
);

‎src/View/Components/FilterPill.php‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<?php
2+
3+
namespace Rappasoft\LaravelLivewireTables\View\Components;
4+
5+
use Illuminate\View\Component;
6+
use Rappasoft\LaravelLivewireTables\DataTransferObjects\Filters\FilterPillData;
7+
8+
class FilterPill extends Component
9+
{
10+
public bool $shouldWatch = false;
11+
12+
public function __construct(public string $filterKey, public FilterPillData $filterPillData)
13+
{
14+
$this->shouldWatch = $this->filterPillData->shouldWatchForEvents() ?? 0;
15+
}
16+
17+
public function render(): null|string|\Illuminate\Support\HtmlString|\Illuminate\Contracts\Foundation\Application|\Illuminate\Contracts\View\Factory|\Illuminate\Contracts\View\View
18+
{
19+
return view('livewire-tables::includes.filter-pill')
20+
->with([
21+
'filterPillsItemAttributes' => $this->filterPillData->getFilterPillsItemAttributes(),
22+
'pillDisplayDataArray' => $this->filterPillData->getFilterPillDisplayDataArray(),
23+
'pillTitleDisplayDataArray' => $this->filterPillData->getFilterTitleDisplayDataArray(),
24+
'setupData' => $this->filterPillData->getPillSetupData($this->filterKey,$this->shouldWatch),
25+
]);
26+
27+
}
28+
29+
}

0 commit comments

Comments
 (0)