CollapseRework4 - Additional Fixes

lrljoe · lrljoe · commit f7e08d53766b · 2025-05-03T01:29:26.000+01:00
diff --git a/resources/views/components/bulk-actions/th.blade.php b/resources/views/components/bulk-actions/th.blade.php
@@ -1,6 +1,6 @@
 @aware(['tableName','isTailwind', 'isBootstrap'])
 @php
-    $customAttributes = $this->hasBulkActionsThAttributes ? $this->getBulkActionsThAttributes : $this->getAllThAttributes($this->getBulkActionsColumn())['customAttributes'];
+    $customAttributes = $this->hasBulkActionsThAttributes() ? $this->getBulkActionsThAttributes() : $this->getAllThAttributes($this->getBulkActionsColumn())['customAttributes'];
     $bulkActionsThCheckboxAttributes = $this->getBulkActionsThCheckboxAttributes();
 @endphp
 
diff --git a/resources/views/components/includes/actions.blade.php b/resources/views/components/includes/actions.blade.php
@@ -18,7 +18,7 @@
             ])
             ->except(['default','default-styling','default-colors'])
         }} >
-    @foreach($this->getActions as $action)
+    @foreach($this->getActions() as $action)
         {{ $action->render() }}
     @endforeach
 </div>
diff --git a/resources/views/components/reorder/th.blade.php b/resources/views/components/reorder/th.blade.php
@@ -1,9 +1,9 @@
-@aware(['isTailwind', 'isBootstrap'])
+@aware(['isTailwind', 'isBootstrap', 'tableName'])
 @php
     $customThAttributes = $this->hasReorderThAttributes() ? $this->getReorderThAttributes() : $this->getAllThAttributes($this->getReorderColumn())['customAttributes'];
 @endphp
 
-<x-livewire-tables::table.th.plain x-cloak x-show="currentlyReorderingStatus" wire:key="{{ $this->getTableName }}-thead-reorder" :displayMinimisedOnReorder="false" 
+<x-livewire-tables::table.th.plain x-cloak x-show="currentlyReorderingStatus" wire:key="{{ $tableName }}-thead-reorder" :displayMinimisedOnReorder="false" 
     {{ 
         $attributes->merge($customThAttributes)
             ->class($isTailwind ? [
diff --git a/resources/views/components/table.blade.php b/resources/views/components/table.blade.php
@@ -2,7 +2,7 @@
 @props(['bulkActionsTdAttributes','bulkActionsTdCheckboxAttributes', 'currentRows'])
 
 
-<div>
+<div >
     <div {{ $attributes->merge($coreTableAttributes['wrapper'])
             ->class($isTailwind ? [
                 'border-gray-200 dark:border-gray-700' => $coreTableAttributes['wrapper']['default-colors'] ?? ($coreTableAttributes['wrapper']['default'] ?? false),
@@ -40,11 +40,8 @@
                             */
                             set: function (sortable) {
                                 var order = sortable.toArray();
-                                console.log('Storing Order');
                                 const result = order.filter((word) => (word !== 'thead' && word !== 'tfoot' && word !== 'loading'));
-                                console.log(result);
-
-                                localStorage.setItem(sortable.options.group.name, result.join('|'));
+                                updateOrderOfItems(result);
                             }
                         } 
                     }"
diff --git a/resources/views/components/tfoot/tr/footer.blade.php b/resources/views/components/tfoot/tr/footer.blade.php
@@ -14,19 +14,20 @@
 
 
     @tableloop($selectedVisibleColumns as $colIndex => $column)
+        @if($column->hasFooter() && $column->hasFooterCallback())
 
-        <x-livewire-tables::table.td.plain wire:key="{{ $tableName . '-footer-datatable-td-' . $column->getSlug() }}"  :$column :$colIndex  :customAttributes="$this->getFooterTdAttributes($column, $currentRows, $colIndex)">
+            <x-livewire-tables::table.td.plain wire:key="{{ $tableName . '-footer-datatable-td-' . $column->getSlug() }}"  :$column :$colIndex  :customAttributes="$this->getFooterTdAttributes($column, $currentRows, $colIndex)">
 
-            @if($column->hasFooter() && $column->hasFooterCallback())
-                @if($column->footerCallbackIsFilter())
-                    {{ $column->getFooterFilter($column->getFooterCallback(), $filterGenericData) }}
-                @elseif($column->footerCallbackIsString())
-                    {{ $column->getFooterFilter($this->getFilterByKey($column->getFooterCallback()), $filterGenericData) }}
-                @else
-                    {{ $column->getNewFooterContents($currentRows) }}
-                @endif
-            @endif
-
-        </x-livewire-tables::table.td.plain>
-        @endtableloop
+                    @if($column->footerCallbackIsFilter())
+                        {{ $column->getFooterFilter($column->getFooterCallback(), $filterGenericData) }}
+                    @elseif($column->footerCallbackIsString())
+                        {{ $column->getFooterFilter($this->getFilterByKey($column->getFooterCallback()), $filterGenericData) }}
+                    @else
+                        {{ $column->getNewFooterContents($currentRows) }}
+                    @endif
+            </x-livewire-tables::table.td.plain>
+        @else
+            <x-livewire-tables::table.td.plain wire:key="{{ $tableName . '-footer-header-datatable-td-' . $column->getSlug() }}"  :$column :$colIndex />
+        @endif
+    @endtableloop
 </x-livewire-tables::table.tr.plain>
diff --git a/resources/views/components/thead/tr/secondary-header.blade.php b/resources/views/components/thead/tr/secondary-header.blade.php
@@ -13,16 +13,20 @@
     @endif
 
     @tableloop($selectedVisibleColumns as $colIndex => $column)
-    <x-livewire-tables::table.td.plain wire:key="{{ $tableName . '-secondary-header-datatable-td-' . $column->getSlug() }}"  :$column :$colIndex  :customAttributes="$this->getSecondaryHeaderTdAttributes($column, $currentRows, $colIndex)">
         @if($column->hasSecondaryHeader() && $column->hasSecondaryHeaderCallback())
-            @if( $column->secondaryHeaderCallbackIsFilter())
-                {{ $column->getSecondaryHeaderFilter($column->getSecondaryHeaderCallback(), $filterGenericData) }}    
-            @elseif($column->secondaryHeaderCallbackIsString())
-                {{ $column->getSecondaryHeaderFilter($this->getFilterByKey($column->getSecondaryHeaderCallback()), $filterGenericData) }}
-            @else
-                {{ $column->getNewSecondaryHeaderContents($currentRows) }}
-            @endif
+            <x-livewire-tables::table.td.plain wire:key="{{ $tableName . '-secondary-header-datatable-td-' . $column->getSlug() }}"  :$column :$colIndex  :customAttributes="$this->getSecondaryHeaderTdAttributes($column, $currentRows, $colIndex)">
+                    @if( $column->secondaryHeaderCallbackIsFilter())
+                        {{ $column->getSecondaryHeaderFilter($column->getSecondaryHeaderCallback(), $filterGenericData) }}    
+                    @elseif($column->secondaryHeaderCallbackIsString())
+                        {{ $column->getSecondaryHeaderFilter($this->getFilterByKey($column->getSecondaryHeaderCallback()), $filterGenericData) }}
+                    @else
+                        {{ $column->getNewSecondaryHeaderContents($currentRows) }}
+                    @endif
+            </x-livewire-tables::table.td.plain>
+        @else
+            <x-livewire-tables::table.td.plain wire:key="{{ $tableName . '-secondary-header-datatable-td-' . $column->getSlug() }}"  :$column :$colIndex />
+
         @endif
-    </x-livewire-tables::table.td.plain>
+
     @endtableloop
 </x-livewire-tables::table.tr.plain>
diff --git a/resources/views/components/tools/filter-pills/buttons/reset-all.blade.php b/resources/views/components/tools/filter-pills/buttons/reset-all.blade.php
@@ -1,4 +1,6 @@
 @aware(['isTailwind','isBootstrap','isBootstrap4','isBootstrap5', 'localisationPath'])
+@php($resetAllButtonAttributes = $this->getFilterPillsResetAllButtonAttributes())
+
 @if ($isTailwind)
     <button
         x-on:click.prevent="resetAllFilters"
@@ -7,10 +9,10 @@
         ])>
         <span
             {{
-                $attributes->merge($this->getFilterPillsResetAllButtonAttributes)
+                $attributes->merge($resetAllButtonAttributes)
                 ->class([
-                    'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium' => ($this->getFilterPillsResetAllButtonAttributes['default-styling'] ?? true),
-                    'bg-gray-100 text-gray-800 dark:bg-gray-200 dark:text-gray-900' => ($this->getFilterPillsResetAllButtonAttributes['default-colors'] ?? true),
+                    'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium' => ($resetAllButtonAttributes['default-styling'] ?? true),
+                    'bg-gray-100 text-gray-800 dark:bg-gray-200 dark:text-gray-900' => ($resetAllButtonAttributes['default-colors'] ?? true),
                 ])
                 ->except(['default-styling', 'default-colors'])
             }}
@@ -23,10 +25,10 @@
         href="#"
         x-on:click.prevent="resetAllFilters"
         {{
-            $attributes->merge($this->getFilterPillsResetAllButtonAttributes)
+            $attributes->merge($resetAllButtonAttributes)
             ->class([
-                'badge badge-pill badge-light' => $isBootstrap4 && ($this->getFilterPillsResetAllButtonAttributes['default-styling'] ?? true),
-                'badge rounded-pill bg-light text-dark text-decoration-none' => $isBootstrap5 && ($this->getFilterPillsResetAllButtonAttribute['default-styling'] ?? true),
+                'badge badge-pill badge-light' => $isBootstrap4 && ($resetAllButtonAttributes['default-styling'] ?? true),
+                'badge rounded-pill bg-light text-dark text-decoration-none' => $isBootstrap5 && ($resetAllButtonAttributes['default-styling'] ?? true),
             ])
             ->except(['default-styling', 'default-colors'])
         }}
diff --git a/resources/views/components/tools/sorting-pills.blade.php b/resources/views/components/tools/sorting-pills.blade.php
@@ -11,7 +11,7 @@
 
                     @continue(is_null($column))
                     @continue($column->isHidden())
-                    @continue($this->columnSelectIsEnabled && ! $this->columnSelectIsEnabledForColumn($column))
+                    @continue($this->columnSelectIsEnabled() && ! $this->columnSelectIsEnabledForColumn($column))
 
                     <span
                         wire:key="{{ $tableName }}-sorting-pill-{{ $columnSelectName }}"
@@ -24,7 +24,7 @@
                             ->except(['default-styling', 'default-colors'])
                         }}
                     >
-                        {{ $column->getSortingPillTitle() }}: {{ $column->getSortingPillDirectionLabel($direction, $this->getDefaultSortingLabelAsc, $this->getDefaultSortingLabelDesc) }}
+                        {{ $column->getSortingPillTitle() }}: {{ $column->getSortingPillDirectionLabel($direction, $this->getDefaultSortingLabelAsc(), $this->getDefaultSortingLabelDesc()) }}
 
                         <button
                             wire:click="clearSort('{{ $columnSelectName }}')"
@@ -75,7 +75,7 @@ class="focus:outline-none active:outline-none"
 
                     @continue(is_null($column))
                     @continue($column->isHidden())
-                    @continue($this->columnSelectIsEnabled && ! $this->columnSelectIsEnabledForColumn($column))
+                    @continue($this->columnSelectIsEnabled() && ! $this->columnSelectIsEnabledForColumn($column))
 
                     <span
                         wire:key="{{ $tableName . '-sorting-pill-' . $columnSelectName }}"
@@ -87,7 +87,7 @@ class="focus:outline-none active:outline-none"
                             ->except(['default-styling', 'default-colors'])
                         }}
                     >
-                        {{ $column->getSortingPillTitle() }}: {{ $column->getSortingPillDirectionLabel($direction, $this->getDefaultSortingLabelAsc, $this->getDefaultSortingLabelDesc) }}
+                        {{ $column->getSortingPillTitle() }}: {{ $column->getSortingPillDirectionLabel($direction, $this->getDefaultSortingLabelAsc(), $this->getDefaultSortingLabelDesc()) }}
 
                         <a
                             href="#"
@@ -133,7 +133,7 @@ class="focus:outline-none active:outline-none"
 
                     @continue(is_null($column))
                     @continue($column->isHidden())
-                    @continue($this->columnSelectIsEnabled && ! $this->columnSelectIsEnabledForColumn($column))
+                    @continue($this->columnSelectIsEnabled() && ! $this->columnSelectIsEnabledForColumn($column))
 
                     <span
                         wire:key="{{ $tableName }}-sorting-pill-{{ $columnSelectName }}"
@@ -145,7 +145,7 @@ class="focus:outline-none active:outline-none"
                             ->except(['default-styling', 'default-colors'])
                         }}
                     >
-                        {{ $column->getSortingPillTitle() }}: {{ $column->getSortingPillDirectionLabel($direction, $this->getDefaultSortingLabelAsc, $this->getDefaultSortingLabelDesc) }}
+                        {{ $column->getSortingPillTitle() }}: {{ $column->getSortingPillDirectionLabel($direction, $this->getDefaultSortingLabelAsc(), $this->getDefaultSortingLabelDesc()) }}
 
                         <a
                             href="#"
diff --git a/resources/views/components/tools/toolbar/items/bulk-actions.blade.php b/resources/views/components/tools/toolbar/items/bulk-actions.blade.php
@@ -92,7 +92,7 @@ class="origin-top-right absolute right-0 mt-2 w-full md:w-48 rounded-md shadow-l
         @else
             <div
                 {{ 
-                    $attributes->merge($this->getBulkActionsMenuAttributes)
+                    $attributes->merge($this->getBulkActionsMenuAttributes())
                     ->class([
                         'dropdown-menu dropdown-menu-right w-100' => $isBootstrap4 && ($this->getBulkActionsMenuAttributes['default-styling'] ?? true),
                         'dropdown-menu dropdown-menu-end w-100' => $isBootstrap5 && ($this->getBulkActionsMenuAttributes['default-styling'] ?? true),
diff --git a/resources/views/components/tools/toolbar/toolbar.blade.php b/resources/views/components/tools/toolbar/toolbar.blade.php
@@ -68,7 +68,7 @@
             <x-livewire-tables::tools.toolbar.items.bulk-actions />
         @endif
 
-        @if ($this->columnSelectIsEnabled)
+        @if ($this->columnSelectIsEnabled())
             <x-livewire-tables::tools.toolbar.items.column-select />
         @endif
 
diff --git a/resources/views/datatable.blade.php b/resources/views/datatable.blade.php
@@ -1,6 +1,6 @@
 @php($currentlyReorderingStatus = $this->getCurrentlyReorderingStatus())
 <div>
-    <div x-data="{ currentlyReorderingStatus: false }">
+    <div x-data="{ currentlyReorderingStatus: false, currentOrderOfItems: null, updateOrderOfItems(items) { this.currentOrderOfItems = items; }, storeOrderedItems() { this.$wire.storeReorder(this.currentOrderOfItems) } }">
         <div {{ $this->getTopLevelAttributes() }}>
 
             @includeWhen(
diff --git a/src/Traits/Styling/HasReorderStyling.php b/src/Traits/Styling/HasReorderStyling.php
@@ -8,7 +8,7 @@ trait HasReorderStyling
 {
     protected array $reorderThAttributes = ['default' => true];
     protected array $reorderButtonStartAttributes = ['class' => '', 'default-colors' => true, 'default-styling' => true, 'type' => 'button', 'x-on:click' => 'reorderToggle'];
-    protected array $reorderButtonSaveAttributes = ['class' => '', 'default-colors' => true, 'default-styling' => true, 'type' => 'button', 'x-on:click' => 'updateOrderedItems'];
+    protected array $reorderButtonSaveAttributes = ['class' => '', 'default-colors' => true, 'default-styling' => true, 'type' => 'button', 'x-on:click' => 'storeOrderedItems'];
     protected array $reorderButtonCancelAttributes = ['class' => '', 'default-colors' => true, 'default-styling' => true, 'type' => 'button', 'x-on:click' => 'reorderToggle'];
 
     /**
diff --git a/src/Views/Columns/ArrayColumn.php b/src/Views/Columns/ArrayColumn.php
@@ -21,6 +21,10 @@ class ArrayColumn extends BaseColumn
 
     protected mixed $outputFormat = null;
 
+    public ?string $outputWrapperStart = null;
+
+    public ?string $outputWrapperEnd = null;
+
     public function __construct(string $title, ?string $from = null)
     {
         parent::__construct($title, $from);
@@ -29,6 +33,7 @@ public function __construct(string $title, ?string $from = null)
         }
     }
 
+
     public function getContents(Model $row): null|string|\BackedEnum|HtmlString|DataTableConfigurationException|\Illuminate\Contracts\Foundation\Application|\Illuminate\Contracts\View\Factory|\Illuminate\Contracts\View\View
     {
         $outputValues = [];
@@ -46,6 +51,12 @@ public function getContents(Model $row): null|string|\BackedEnum|HtmlString|Data
             $outputValues[] = call_user_func($this->getOutputFormatCallback(), $i, $v);
         }
 
-        return new HtmlString((! empty($outputValues) ? implode($this->getSeparator(), $outputValues) : $this->getEmptyValue()));
+        $returnedValue = (! empty($outputValues) ? implode($this->getSeparator(), $outputValues) : $this->getEmptyValue());
+
+        if ($this->hasOutputWrapperStart() && $this->hasOutputWrapperEnd())
+        {
+            $returnedValue = $this->getOutputWrapperStart() . $returnedValue . $this->getOutputWrapperEnd();
+        }
+        return new HtmlString($returnedValue);
     }
 }
diff --git a/src/Views/Columns/Traits/Configuration/ArrayColumnConfiguration.php b/src/Views/Columns/Traits/Configuration/ArrayColumnConfiguration.php
@@ -2,6 +2,8 @@
 
 namespace Rappasoft\LaravelLivewireTables\Views\Columns\Traits\Configuration;
 
+use Illuminate\View\ComponentAttributeBag;
+
 trait ArrayColumnConfiguration
 {
     public function separator(string $value): self
@@ -34,4 +36,38 @@ public function emptyValue(string $emptyValue): self
 
         return $this;
     }
+
+    
+    public function wrapperStart(string $value): self
+    {
+        $this->outputWrapperStart = $value;
+
+        return $this;
+    }
+
+    public function wrapperEnd(string $value): self
+    {
+        $this->outputWrapperEnd = $value;
+
+        return $this;
+    }
+
+    public function flexCol(array $attribs = []): self
+    {
+        $bag = new ComponentAttributeBag(['class' => $this->isTailwind() ? 'flex flex-col' : 'd-flex d-flex-col']);
+
+        return $this->wrapperStart('<div '.$bag->merge($attribs).'>')
+        ->wrapperEnd('</div>')
+        ->separator("");
+    }
+
+    public function flexRow(array $attribs = []): self
+    {
+        $bag = new ComponentAttributeBag(['class' => $this->isTailwind() ? 'flex flex-row' : 'd-flex d-flex-row']);
+
+        return $this->wrapperStart('<div '.$bag->merge($attribs).'>')
+        ->wrapperEnd('</div>')
+        ->separator("");
+    }
+
 }
diff --git a/src/Views/Columns/Traits/Helpers/ArrayColumnHelpers.php b/src/Views/Columns/Traits/Helpers/ArrayColumnHelpers.php
@@ -38,4 +38,25 @@ public function getOutputFormatCallback(): ?callable
     {
         return $this->outputFormat;
     }
+
+    
+    public function hasOutputWrapperStart(): bool
+    {
+        return $this->outputWrapperStart !== null && is_string($this->outputWrapperStart);
+    }
+
+    public function getOutputWrapperStart(): string
+    {
+        return $this->outputWrapperStart;
+    }
+
+    public function hasOutputWrapperEnd(): bool
+    {
+        return $this->outputWrapperEnd !== null && is_string($this->outputWrapperEnd);
+    }
+
+    public function getOutputWrapperEnd(): string
+    {
+        return $this->outputWrapperEnd;
+    }
 }
diff --git a/tests/Unit/Views/Columns/ArrayColumnTest.php b/tests/Unit/Views/Columns/ArrayColumnTest.php
@@ -4,7 +4,7 @@
 
 use PHPUnit\Framework\Attributes\Group;
 use Rappasoft\LaravelLivewireTables\Exceptions\DataTableConfigurationException;
-use Rappasoft\LaravelLivewireTables\Tests\Models\Pet;
+use Rappasoft\LaravelLivewireTables\Tests\Models\{Pet,Veterinary};
 use Rappasoft\LaravelLivewireTables\Views\Columns\ArrayColumn;
 
 #[Group('Columns')]
@@ -80,4 +80,38 @@ public function test_can_get_empty_value(): void
         $this->assertSame('Unknown', self::$columnInstance->getEmptyValue());
 
     }
+
+    public function test_can_use_flexcol(): void
+    {
+        self::$columnInstance
+            ->data(fn ($value, $row) => ($row->pets))
+            ->outputFormat(fn ($index, $value) => '<a href="'.$value->id.'">'.$value->name."</a>")
+            ->flexCol();
+
+        $contents = self::$columnInstance->getContents(Veterinary::find(1));
+        $this->assertSame('<div class="flex flex-col"><a href="1">Cartman</a><a href="2">Tux</a></div>',$contents->toHtml());
+    }
+
+    public function test_can_use_flexcol_with_attributes(): void
+    {
+        self::$columnInstance
+            ->data(fn ($value, $row) => ($row->pets))
+            ->outputFormat(fn ($index, $value) => '<a href="'.$value->id.'">'.$value->name."</a>")
+            ->flexCol(['class' => 'bg-red-500']);
+
+        $contents = self::$columnInstance->getContents(Veterinary::find(1));
+        $this->assertSame('<div class="bg-red-500 flex flex-col"><a href="1">Cartman</a><a href="2">Tux</a></div>',$contents->toHtml());
+    }
+
+    public function test_can_use_flexrow(): void
+    {
+        self::$columnInstance
+            ->data(fn ($value, $row) => ($row->pets))
+            ->outputFormat(fn ($index, $value) => '<a href="'.$value->id.'">'.$value->name."</a>")
+            ->flexRow(['class' => 'bg-blue-500']);
+
+        $contents = self::$columnInstance->getContents(Veterinary::find(1));
+        $this->assertSame('<div class="bg-blue-500 flex flex-row"><a href="1">Cartman</a><a href="2">Tux</a></div>',$contents->toHtml());
+    }
+
 }
