Update Test Coverage

resources/js/laravel-livewire-tables.js

@@ -44,15 +44,34 @@ document.addEventListener('alpine:init', () => {
         removeHTMLTags(htmlString) {
             // Create a new DOMParser instance
             const parser = new DOMParser();
+            var textContent = '';
             // Parse the HTML string
-            let  doc = parser.parseFromString(htmlString, 'text/html');
+            let doc = parser.parseFromString(htmlString, 'text/html');
+
+            console.log("docs.body.innerText");
+            console.log(doc.body);
+
+
             // Extract text content
-            let textContent = doc.body.innerText || "";
+            let textContent = doc.body.firstChild.textContent || "";
             // Trim whitespace
             let trimmedContent = textContent.trim();
 
             return trimmedContent;
         },        
+        convertHTML(str) {
+            let replacements = {
+              "&": "&",
+              "<": "&lt;",
+              ">": "&gt;",
+              '"': "&quot;",//THIS PROBLEM ME NO MORE THANKS TO ieahleen
+              "'": "&apos;",
+              "<>": "&lt;&gt;",
+            }
+            return str.replace(/(&|<|>|"|'|<>)/gi, function(noe) {
+              return replacements[noe];
+            });
+        },
         resetSpecificFilter(filterKey)
         {
             this.externalFilterPillsVals[filterKey] = [];
@@ -833,6 +852,10 @@ document.addEventListener('alpine:init', () => {
                 {
                     joinedValues = this.removeHTMLTags(joinedValues);
                 }
+                else
+                {
+                    console.log("SHOULD RENDER AS HTML");
+                }
 
                 if (joinedValues !== null)
                 {
@@ -875,16 +898,17 @@ document.addEventListener('alpine:init', () => {
 
                 if(eventPillItem != "")
                 {
+                    var htmlDecoded = this.convertHTML(eventPillItem);
+
                     if(this.isExternalFilter)
                     {
                         let filterPillValues = this.externalFilterPillsVals[this.localFilterKey];
-
-                        filterPillValues.push(eventPillItem);
+                        filterPillValues.push(htmlDecoded);
                         this.updatePillValues(filterPillValues);
                     }
                     else
                     {
-                        this.updatePillValues(eventPillItem);
+                        this.updatePillValues(htmlDecoded);
                     }    
                 }
             }
@@ -910,6 +934,7 @@ document.addEventListener('alpine:init', () => {
             this.isExternalFilter = Boolean(this.localData['isAnExternalLivewireFilter'] ?? 0);
             this.shouldRenderAsHTML = Boolean(this.localData['renderPillsAsHtml'] ?? 0);
             this.pillValues = this.localData['pillValues'] ?? null;
+            this.separatedValues = this.localData['separatedValues'] ?? null;
 
             this.$nextTick(() => { 
                 if(this.isExternalFilter)

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

@@ -22,7 +22,7 @@
         @if ($filterPillData->hasCustomPillBlade)
             @include($filterPillData->getCustomPillBlade(), ['filter' => $this->getFilterByKey($filterKey), 'filterPillData' => $filterPillData])
         @else
-            <x-livewire-tables::tools.filter-pills.pills-item :$filterKey :$filterPillData :shouldWatch="$filterPillData->isAnExternalLivewireFilter" />
+            <x-livewire-tables::filter-pill :$filterKey :$filterPillData />
         @endif
     @endtableloop
 

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

@@ -1,11 +1,5 @@
 @aware(['tableName','isTailwind','isBootstrap','isBootstrap4','isBootstrap5', 'localisationPath'])
-@props(['filterKey', 'filterPillData'])
-
-@php
-
-    $filterButtonAttributes = $filterPillData->getCalculatedCustomResetButtonAttributes($filterKey,$this->getFilterPillsResetFilterButtonAttributes);
-
-@endphp
+@props(['filterKey', 'filterPillData', 'filterButtonAttributes' => $filterPillData->getCalculatedCustomResetButtonAttributes($filterKey,$this->getFilterPillsResetFilterButtonAttributes)])
 @if ($isTailwind)
     <button 
         {{

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

@@ -2,27 +2,7 @@
 @props([
     'filterKey', 
     'filterPillData', 
-    'shouldWatch' => ($filterPillData->shouldWatchForEvents() ?? 0),
-    'filterPillsItemAttributes' => $filterPillData->getFilterPillsItemAttributes(),
     ])
 
-<div x-data="filterPillsHandler(@js($filterPillData->getPillSetupData($filterKey,$shouldWatch)))" x-bind="trigger" 
-        wire:key="{{ $tableName }}-filter-pill-{{ $filterKey }}" {{
-        $attributes->merge($filterPillsItemAttributes)
-        ->class([
-            'inline-flex items-center px-2.5 py-0.5 rounded-full leading-4' => $isTailwind && ($filterPillsItemAttributes['default-styling'] ?? true),
-            'text-xs font-medium capitalize' => $isTailwind && ($filterPillsItemAttributes['default-text'] ?? ($filterPillsItemAttributes['default-styling'] ?? true)),
-            'bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900' => $isTailwind && ($filterPillsItemAttributes['default-colors'] ?? true),
-            'badge badge-pill badge-info d-inline-flex align-items-center' => $isBootstrap4 && ($filterPillsItemAttributes['default-styling'] ?? true),
-            'badge rounded-pill bg-info d-inline-flex align-items-center' => $isBootstrap5 && ($filterPillsItemAttributes['default-styling'] ?? true),
-        ])
-        ->except(['default', 'default-styling', 'default-colors'])
-    }}
->
-    <span x-text="localFilterTitle + ':&nbsp;'"></span>
+<x-livewire-tables::filter-pill :$filterKey :$filterPillData />
 
-    <span {{ $filterPillData->getFilterPillDisplayData() }}></span>
-
-    <x-livewire-tables::tools.filter-pills.buttons.reset-filter :$filterKey :$filterPillData/>
-
-</div>

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

@@ -0,0 +1,22 @@
+@aware(['tableName','isTailwind','isBootstrap4','isBootstrap5'])
+
+<div x-data="filterPillsHandler(@js($setupData))" x-bind="trigger" 
+    wire:key="{{ $tableName }}-filter-pill-{{ $filterKey }}" {{
+    $attributes->merge($filterPillsItemAttributes)
+    ->class([
+        'inline-flex items-center px-2.5 py-0.5 rounded-full leading-4' => $isTailwind && ($filterPillsItemAttributes['default-styling'] ?? true),
+        'text-xs font-medium capitalize' => $isTailwind && ($filterPillsItemAttributes['default-text'] ?? ($filterPillsItemAttributes['default-styling'] ?? true)),
+        'bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900' => $isTailwind && ($filterPillsItemAttributes['default-colors'] ?? true),
+        'badge badge-pill badge-info d-inline-flex align-items-center' => $isBootstrap4 && ($filterPillsItemAttributes['default-styling'] ?? true),
+        'badge rounded-pill bg-info d-inline-flex align-items-center' => $isBootstrap5 && ($filterPillsItemAttributes['default-styling'] ?? true),
+    ])
+    ->except(['default', 'default-styling', 'default-colors'])
+}}
+>
+<span {{ $attributes->merge($pillTitleDisplayDataArray) }}></span>
+
+<span {{ $attributes->merge($pillDisplayDataArray) }}></span>
+
+<x-livewire-tables::tools.filter-pills.buttons.reset-filter :$filterKey :$filterPillData/>
+
+</div>

src/DataTransferObjects/Filters/FilterPillData.php

@@ -6,142 +6,147 @@
 
 class FilterPillData
 {
+    public string $separatedValues = '';
+
     public function __construct(
+        protected string $filterKey,
         protected string $filterPillTitle,
-        protected string $filterSelectName,
         protected string|array|null $filterPillValue,
         protected string $separator,
         public bool $isAnExternalLivewireFilter,
         public bool $hasCustomPillBlade,
         protected ?string $customPillBlade,
         protected array $filterPillsItemAttributes,
-        protected ?string $separatedValues,
         protected bool $renderPillsAsHtml,
         protected bool $watchForEvents,
-        protected array $customResetButtonAttributes, ) {}
+        protected array $customResetButtonAttributes,
+        protected bool $renderPillsTitleAsHtml) {}
 
-    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
+    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
     {
         if ($isAnExternalLivewireFilter) {
             $watchForEvents = true;
         }
 
-        return new self($filterPillTitle, $filterSelectName, $filterPillValue, $separator, $isAnExternalLivewireFilter, $hasCustomPillBlade, $customPillBlade, $filterPillsItemAttributes, $separatedValues, $renderPillsAsHtml, $watchForEvents, $customResetButtonAttributes);
+        return new self($filterKey, $filterPillTitle, $filterPillValue, $separator, $isAnExternalLivewireFilter, $hasCustomPillBlade, $customPillBlade, $filterPillsItemAttributes, $renderPillsAsHtml, $watchForEvents, $customResetButtonAttributes, $renderPillsTitleAsHtml);
     }
 
     public function getTitle(): string
     {
         return $this->filterPillTitle;
     }
 
-    public function getSelectName(): string
+    public function getPillValue(): array|string|null
     {
-        return $this->filterSelectName;
+        return $this->filterPillValue;
     }
 
-    public function getPillValue(): array|string|null
+    public function getHasCustomPillBlade(): bool
     {
-        return $this->filterPillValue;
+        return $this->hasCustomPillBlade ?? false;
     }
 
-    public function isPillValueAnArray(): bool
+    public function getCustomPillBlade(): ?string
     {
-        return ! is_null($this->filterPillValue) && is_array($this->filterPillValue);
+        return $this->customPillBlade;
     }
 
-    public function getSeparatedPillValue(): array|string|null
+    public function getCustomResetButtonAttributes(): array
     {
-        if ($this->isPillValueAnArray()) {
-            return implode($this->getSeparator(), $this->getPillValue());
-        } else {
-            return $this->getPillValue();
-        }
+        return $this->customResetButtonAttributes ?? [];
     }
 
-    public function getValueFromPillData(): array|string|null
+    public function getIsAnExternalLivewireFilter(): int
     {
-        if ($this->isPillValueAnArray()) {
-            return implode($this->getSeparator(), $this->getPillValue());
-        } else {
-            return $this->getPillValue();
-        }
+        return intval($this->isAnExternalLivewireFilter ?? false);
     }
 
-    public function getHasCustomPillBlade(): bool
+    public function getSeparator(): string
     {
-        return $this->hasCustomPillBlade ?? false;
+        return $this->separator ?? ', ';
     }
 
-    public function getCustomPillBlade(): ?string
+    public function shouldUsePillsAsHtml(): int
     {
-        return $this->customPillBlade;
+        return intval($this->renderPillsAsHtml ?? false);
     }
 
-    public function getIsAnExternalLivewireFilter(): int
+    public function shouldUsePillsTitleAsHtml(): int
     {
-        return intval($this->isAnExternalLivewireFilter ?? false);
+        return intval($this->renderPillsTitleAsHtml ?? false);
     }
 
-    public function getSeparator(): string
+    public function shouldWatchForEvents(): int
     {
-        return $this->separator ?? ', ';
+        return intval($this->watchForEvents ?? false);
     }
 
-    public function getSeparatedValues(): string
+    public function isPillValueAnArray(): bool
     {
-        return $this->separatedValues ?? $this->getSeparatedPillValue();
+        return ! is_null($this->filterPillValue) && is_array($this->filterPillValue);
     }
 
-    public function getFilterPillsItemAttributes(): array
+    public function getSeparatedPillValue(): ?string
     {
-        return array_merge(['default' => true, 'default-colors' => true, 'default-styling' => true, 'default-text' => true], $this->filterPillsItemAttributes);
+        if ($this->isPillValueAnArray()) {
+            return implode($this->getSeparator(), $this->getPillValue());
+        } else {
+            return $this->getPillValue();
+        }
     }
 
-    public function shouldUsePillsAsHtml(): int
+    public function getSafeSeparatedPillValue(): ?string
     {
-        return intval($this->renderPillsAsHtml ?? false);
+        $string = $this->getSeparatedPillValue();
+
+        return htmlentities($string, ENT_QUOTES, 'UTF-8');
+
     }
 
-    public function shouldWatchForEvents(): int
+    public function getFilterPillsItemAttributes(): array
     {
-        return intval($this->watchForEvents ?? false);
+        return array_merge(['default' => true, 'default-colors' => true, 'default-styling' => true, 'default-text' => true], $this->filterPillsItemAttributes);
     }
 
-    public function getFilterPillDisplayData(): ComponentAttributeBag
+    public function getFilterPillDisplayDataArray(): array
     {
+        $array = [];
         if ($this->getIsAnExternalLivewireFilter()) {
-            return $this->getExternalFilterPillDisplayData();
+            return $this->getExternalFilterPillDisplayDataArray($array);
         }
 
-        return $this->getInternalFilterPillDisplayData();
+        return $this->getInternalFilterPillDisplayDataArray($array);
     }
 
-    public function getInternalFilterPillDisplayData(): ComponentAttributeBag
+    public function getExternalFilterPillDisplayDataArray(array $array = []): array
     {
-        return new ComponentAttributeBag([
-            'x-data' => "{ internalDisplayString: ''}",
-            'x-init' => "internalDisplayString = updatePillValues('".$this->getSeparatedValues()."');",
-            $this->shouldUsePillsAsHtml() ? 'x-html' : 'x-text' => 'internalDisplayString',
-        ]);
+        $array[$this->shouldUsePillsAsHtml() ? 'x-html' : 'x-text'] = 'displayString';
+
+        return $array;
     }
 
-    public function getExternalFilterPillDisplayData(): ComponentAttributeBag
+    public function getInternalFilterPillDisplayDataArray(array $array = []): array
     {
-        return new ComponentAttributeBag([
-            $this->shouldUsePillsAsHtml() ? 'x-html' : 'x-text' => 'displayString',
-        ]);
+
+        $array['x-data'] = "{ internalDisplayString: ''}";
+        $array['x-init'] = 'internalDisplayString = updatePillValues('.json_encode($this->getSafeSeparatedPillValue()).')';
+        $array[$this->shouldUsePillsAsHtml() ? 'x-html' : 'x-text'] = 'internalDisplayString';
+
+        return $array;
     }
 
-    public function getPillSetupData(string $filterKey = '', bool $shouldWatch = false): array
+    public function getFilterTitleDisplayDataArray(array $array = []): array
     {
-        $array = array_merge(['filterKey' => $filterKey, 'watchForEvents' => $shouldWatch], $this->toArray());
+        $array[$this->shouldUsePillsTitleAsHtml() ? 'x-html' : 'x-text'] = "localFilterTitle + ': '";
 
         return $array;
     }
 
-    public function getCustomResetButtonAttributes(): array
+    public function getPillSetupData(string $filterKey = '', bool $shouldWatch = false): array
     {
-        return $this->customResetButtonAttributes ?? [];
+        $array = array_merge(['filterKey' => $filterKey, 'watchForEvents' => $shouldWatch], $this->toArray());
+
+        return $array;
     }
 
     public function getCalculatedCustomResetButtonAttributes(string $filterKey, array $filterPillsResetFilterButtonAttributes): array
@@ -163,16 +168,17 @@ public function getCalculatedCustomResetButtonAttributes(string $filterKey, arra
     public function toArray(): array
     {
         return [
+            'filterKey' => $this->filterKey,
             'filterPillTitle' => $this->getTitle(),
-            'filterSelectName' => $this->getSelectName(),
             'filterPillValue' => $this->getPillValue(),
             'isAnExternalLivewireFilter' => $this->getIsAnExternalLivewireFilter(),
             'hasCustomPillBlade' => $this->getHasCustomPillBlade(),
             'customPillBlade' => $this->getCustomPillBlade(),
             'separator' => $this->getSeparator(),
+            'separatedValues' => $this->getSafeSeparatedPillValue(),
             'filterPillsItemAttributes' => $this->getFilterPillsItemAttributes(),
-            'separatedValues' => $this->getSeparatedValues(),
             'renderPillsAsHtml' => $this->shouldUsePillsAsHtml(),
+            'renderPillsTitleAsHtml' => $this->shouldUsePillsTitleAsHtml(),
             'watchForEvents' => $this->shouldWatchForEvents(),
         ];
     }