Skip to content

Commit fc68211

Browse files
committed
Major reworks to Pills, plus restructure to Columns - this may be split into separate PRs
1 parent 733c2ee commit fc68211

File tree

86 files changed

+918
-566
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

86 files changed

+918
-566
lines changed

resources/js/laravel-livewire-tables.js

Lines changed: 30 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -44,15 +44,34 @@ document.addEventListener('alpine:init', () => {
4444
removeHTMLTags(htmlString) {
4545
// Create a new DOMParser instance
4646
const parser = new DOMParser();
47+
var textContent = '';
4748
// Parse the HTML string
48-
let doc = parser.parseFromString(htmlString, 'text/html');
49+
let doc = parser.parseFromString(htmlString, 'text/html');
50+
51+
console.log("docs.body.innerText");
52+
console.log(doc.body);
53+
54+
4955
// Extract text content
50-
let textContent = doc.body.innerText || "";
56+
let textContent = doc.body.firstChild.textContent || "";
5157
// Trim whitespace
5258
let trimmedContent = textContent.trim();
5359

5460
return trimmedContent;
5561
},
62+
convertHTML(str) {
63+
let replacements = {
64+
"&": "&",
65+
"<": "&lt;",
66+
">": "&gt;",
67+
'"': "&quot;",//THIS PROBLEM ME NO MORE THANKS TO ieahleen
68+
"'": "&apos;",
69+
"<>": "&lt;&gt;",
70+
}
71+
return str.replace(/(&|<|>|"|'|<>)/gi, function(noe) {
72+
return replacements[noe];
73+
});
74+
},
5675
resetSpecificFilter(filterKey)
5776
{
5877
this.externalFilterPillsVals[filterKey] = [];
@@ -833,6 +852,10 @@ document.addEventListener('alpine:init', () => {
833852
{
834853
joinedValues = this.removeHTMLTags(joinedValues);
835854
}
855+
else
856+
{
857+
console.log("SHOULD RENDER AS HTML");
858+
}
836859

837860
if (joinedValues !== null)
838861
{
@@ -875,16 +898,17 @@ document.addEventListener('alpine:init', () => {
875898

876899
if(eventPillItem != "")
877900
{
901+
var htmlDecoded = this.convertHTML(eventPillItem);
902+
878903
if(this.isExternalFilter)
879904
{
880905
let filterPillValues = this.externalFilterPillsVals[this.localFilterKey];
881-
882-
filterPillValues.push(eventPillItem);
906+
filterPillValues.push(htmlDecoded);
883907
this.updatePillValues(filterPillValues);
884908
}
885909
else
886910
{
887-
this.updatePillValues(eventPillItem);
911+
this.updatePillValues(htmlDecoded);
888912
}
889913
}
890914
}
@@ -910,6 +934,7 @@ document.addEventListener('alpine:init', () => {
910934
this.isExternalFilter = Boolean(this.localData['isAnExternalLivewireFilter'] ?? 0);
911935
this.shouldRenderAsHTML = Boolean(this.localData['renderPillsAsHtml'] ?? 0);
912936
this.pillValues = this.localData['pillValues'] ?? null;
937+
this.separatedValues = this.localData['separatedValues'] ?? null;
913938

914939
this.$nextTick(() => {
915940
if(this.isExternalFilter)

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/tools/filter-pills.blade.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
@if ($filterPillData->hasCustomPillBlade)
2323
@include($filterPillData->getCustomPillBlade(), ['filter' => $this->getFilterByKey($filterKey), 'filterPillData' => $filterPillData])
2424
@else
25-
<x-livewire-tables::tools.filter-pills.pills-item :$filterKey :$filterPillData :shouldWatch="$filterPillData->isAnExternalLivewireFilter" />
25+
<x-livewire-tables::filter-pill :$filterKey :$filterPillData />
2626
@endif
2727
@endtableloop
2828

resources/views/components/tools/filter-pills/buttons/reset-filter.blade.php

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,5 @@
11
@aware(['tableName','isTailwind','isBootstrap','isBootstrap4','isBootstrap5', 'localisationPath'])
2-
@props(['filterKey', 'filterPillData'])
3-
4-
@php
5-
6-
$filterButtonAttributes = $filterPillData->getCalculatedCustomResetButtonAttributes($filterKey,$this->getFilterPillsResetFilterButtonAttributes);
7-
8-
@endphp
2+
@props(['filterKey', 'filterPillData', 'filterButtonAttributes' => $filterPillData->getCalculatedCustomResetButtonAttributes($filterKey,$this->getFilterPillsResetFilterButtonAttributes)])
93
@if ($isTailwind)
104
<button
115
{{

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

Lines changed: 1 addition & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,7 @@
22
@props([
33
'filterKey',
44
'filterPillData',
5-
'shouldWatch' => ($filterPillData->shouldWatchForEvents() ?? 0),
6-
'filterPillsItemAttributes' => $filterPillData->getFilterPillsItemAttributes(),
75
])
86

9-
<div x-data="filterPillsHandler(@js($filterPillData->getPillSetupData($filterKey,$shouldWatch)))" x-bind="trigger"
10-
wire:key="{{ $tableName }}-filter-pill-{{ $filterKey }}" {{
11-
$attributes->merge($filterPillsItemAttributes)
12-
->class([
13-
'inline-flex items-center px-2.5 py-0.5 rounded-full leading-4' => $isTailwind && ($filterPillsItemAttributes['default-styling'] ?? true),
14-
'text-xs font-medium capitalize' => $isTailwind && ($filterPillsItemAttributes['default-text'] ?? ($filterPillsItemAttributes['default-styling'] ?? true)),
15-
'bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900' => $isTailwind && ($filterPillsItemAttributes['default-colors'] ?? true),
16-
'badge badge-pill badge-info d-inline-flex align-items-center' => $isBootstrap4 && ($filterPillsItemAttributes['default-styling'] ?? true),
17-
'badge rounded-pill bg-info d-inline-flex align-items-center' => $isBootstrap5 && ($filterPillsItemAttributes['default-styling'] ?? true),
18-
])
19-
->except(['default', 'default-styling', 'default-colors'])
20-
}}
21-
>
22-
<span x-text="localFilterTitle + ':&nbsp;'"></span>
7+
<x-livewire-tables::filter-pill :$filterKey :$filterPillData />
238

24-
<span {{ $filterPillData->getFilterPillDisplayData() }}></span>
25-
26-
<x-livewire-tables::tools.filter-pills.buttons.reset-filter :$filterKey :$filterPillData/>
27-
28-
</div>
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
}

0 commit comments

Comments
 (0)