Tidy & Improve Collapsed Columns Behaviour (#2159)

* Tidy & Improve Collapsed Columns Behaviour * Fix styling * Add relevant tests * Fix styling --------- Co-authored-by: lrljoe <[email protected]>
rappasoft · Jan 8, 2025 · 26f094b · 26f094b
1 parent 940e0ac
commit 26f094b
Show file tree

Hide file tree

Showing 18 changed files with 587 additions and 548 deletions.
diff --git a/resources/views/components/table/collapsed-columns.blade.php b/resources/views/components/table/collapsed-columns.blade.php
@@ -1,39 +1,16 @@
 @aware([ 'tableName', 'primaryKey','isTailwind','isBootstrap'])
 @props(['row', 'rowIndex'])
 
-@php
-    $customAttributes = $this->getTrAttributes($row, $rowIndex);
-@endphp
-
-@if ($this->collapsingColumnsAreEnabled() && $this->hasCollapsedColumns())
-    @php
-        $colspan = $this->getColspanCount();
-        $columns = collect();
-
-        if($this->shouldCollapseAlways())
-        {
-            $columns->push($this->getCollapsedAlwaysColumns());
-        }
-        if ($this->shouldCollapseOnMobile() && $this->shouldCollapseOnTablet()) {
-            $columns->push($this->getCollapsedMobileColumns());
-            $columns->push($this->getCollapsedTabletColumns());
-        } elseif ($this->shouldCollapseOnTablet() && ! $this->shouldCollapseOnMobile()) {
-            $columns->push($this->getCollapsedTabletColumns());
-        } elseif ($this->shouldCollapseOnMobile() && ! $this->shouldCollapseOnTablet()) {
-            $columns->push($this->getCollapsedMobileColumns());
-        }
-
-        $columns = $columns->collapse();
-    @endphp
-
-    <tr
-        x-data
+@if ($this->collapsingColumnsAreEnabled && $this->hasCollapsedColumns)
+    @php($customAttributes = $this->getTrAttributes($row, $rowIndex))
+    <tr x-data
         @toggle-row-content.window="($event.detail.tableName === '{{ $tableName }}' && $event.detail.row === {{ $rowIndex }}) ? $el.classList.toggle('{{ $isBootstrap ? 'd-none' : 'hidden' }}') : null"
-
-        wire:key="{{ $tableName }}-row-{{ $row->{$primaryKey} }}-collapsed-contents"
-        wire:loading.class.delay="opacity-50 dark:bg-gray-900 dark:opacity-60"
         {{
-        $attributes->merge($customAttributes)
+            $attributes->merge([
+                    'wire:loading.class.delay' => 'opacity-50 dark:bg-gray-900 dark:opacity-60',
+                    'wire:key' => $tableName.'-row-'.$row->{$primaryKey}.'-collapsed-contents',
+                ])
+                ->merge($customAttributes)
                 ->class([
                     'hidden bg-white dark:bg-gray-700 dark:text-white rappasoft-striped-row' => ($isTailwind && ($customAttributes['default'] ?? true) && $rowIndex % 2 === 0),
                     'hidden bg-gray-50 dark:bg-gray-800 dark:text-white rappasoft-striped-row' => ($isTailwind && ($customAttributes['default'] ?? true) && $rowIndex % 2 !== 0),
@@ -42,36 +19,31 @@
                 ])
                 ->except(['default','default-styling','default-colors'])
         }}
-
     >
-        <td
-            @class([
+        <td colspan="{{ $this->getColspanCount }}" @class([
                 'text-left pt-4 pb-2 px-4' => $isTailwind,
                 'text-start pt-3 p-2' => $isBootstrap,
-            ])
-            colspan="{{ $colspan }}"
-        >
+        ])>
             <div>
-                @foreach($columns as $colIndex => $column)
-                    @continue($column->isHidden())
-                    @continue($this->columnSelectIsEnabled() && ! $this->columnSelectIsEnabledForColumn($column))
-
-                    <p wire:key="{{ $tableName }}-row-{{ $row->{$primaryKey} }}-collapsed-contents-{{ $colIndex }}"
-
-                        @class([
-                            'block mb-2' => $isTailwind && $column->shouldCollapseAlways(),
-                            'block mb-2 sm:hidden' => $isTailwind && !$column->shouldCollapseAlways() && !$column->shouldCollapseOnTablet() && !$column->shouldCollapseOnMobile(),
-                            'block mb-2 md:hidden' => $isTailwind && !$column->shouldCollapseAlways() && !$column->shouldCollapseOnTablet() && $column->shouldCollapseOnMobile(),
-                            'block mb-2 lg:hidden' => $isTailwind && !$column->shouldCollapseAlways() && ($column->shouldCollapseOnTablet() || $column->shouldCollapseOnMobile()),
-
-                            'd-block mb-2' => $isBootstrap && $column->shouldCollapseAlways(),
-                            'd-block mb-2 d-sm-none' => $isBootstrap && !$column->shouldCollapseAlways() && !$column->shouldCollapseOnTablet() && !$column->shouldCollapseOnMobile(),
-                            'd-block mb-2 d-md-none' => $isBootstrap && !$column->shouldCollapseAlways() && !$column->shouldCollapseOnTablet() && $column->shouldCollapseOnMobile(),
-                            'd-block mb-2 d-lg-none' => $isBootstrap && !$column->shouldCollapseAlways() && ($column->shouldCollapseOnTablet() || $column->shouldCollapseOnMobile()),
-
-                        ])
-                    >
-                        <strong>{{ $column->getTitle() }}</strong>: {{ $column->renderContents($row) }}
+                @foreach($this->getCollapsedColumnsForContent as $colIndex => $column)
+
+                    <p wire:key="{{ $tableName }}-row-{{ $row->{$primaryKey} }}-collapsed-contents-{{ $colIndex }}" @class([
+                            'block mb-2 hidden' => $isTailwind,
+                            'sm:block' => $isTailwind && $column->shouldCollapseAlways(),
+                            'sm:block md:hidden' => $isTailwind && !$column->shouldCollapseAlways() && !$column->shouldCollapseOnTablet() && $column->shouldCollapseOnMobile(),
+                            'sm:block lg:hidden' => $isTailwind && !$column->shouldCollapseAlways() && ($column->shouldCollapseOnTablet() || $column->shouldCollapseOnMobile()),
+
+                            'd-block mb-2' => $isBootstrap,
+                            'd-sm-none' => $isBootstrap && !$column->shouldCollapseAlways() && !$column->shouldCollapseOnTablet() && !$column->shouldCollapseOnMobile(),
+                            'd-md-none' => $isBootstrap && !$column->shouldCollapseAlways() && !$column->shouldCollapseOnTablet() && $column->shouldCollapseOnMobile(),
+                            'd-lg-none' => $isBootstrap && !$column->shouldCollapseAlways() && ($column->shouldCollapseOnTablet() || $column->shouldCollapseOnMobile()),
+                    ])>
+                        <strong>{{ $column->getTitle() }}</strong>: 
+                        @if($column->isHtml())
+                            {!! $column->setIndexes($rowIndex, $colIndex)->renderContents($row) !!}
+                        @else
+                            {{ $column->setIndexes($rowIndex, $colIndex)->renderContents($row) }}
+                        @endif
                     </p>
                 @endforeach
             </div>

diff --git a/resources/views/components/table/td/collapsed-columns.blade.php b/resources/views/components/table/td/collapsed-columns.blade.php
@@ -1,87 +1,52 @@
 @aware([ 'tableName','isTailwind','isBootstrap'])
 @props(['rowIndex', 'hidden' => false])
 
-@if ($this->collapsingColumnsAreEnabled() && $this->hasCollapsedColumns())
-    @if ($isTailwind)
-        <td x-data="{open:false}" wire:key="{{ $tableName }}-collapsingIcon-{{ $rowIndex }}-{{ md5(now()) }}"
-            {{
-                $attributes
-                    ->merge()
-                    ->class([
-                        'p-3 table-cell text-center',
-                        'sm:hidden' => !$this->shouldCollapseAlways() && !$this->shouldCollapseOnTablet(),
-                        'md:hidden' => !$this->shouldCollapseAlways() && !$this->shouldCollapseOnTablet() && $this->shouldCollapseOnMobile(),
-                        'lg:hidden' => !$this->shouldCollapseAlways() && ($this->shouldCollapseOnTablet() || $this->shouldCollapseOnMobile()),
-                    ])
-            }}
-            :class="currentlyReorderingStatus ? 'laravel-livewire-tables-reorderingMinimised' : ''"
-        >
-            @if (! $hidden)
-                <button
-                    x-cloak x-show="!currentlyReorderingStatus"
-                    x-on:click.prevent="$dispatch('toggle-row-content', {'tableName': '{{ $tableName }}', 'row': {{ $rowIndex }}}); open = !open"
-                >
-                    <x-heroicon-o-plus-circle x-cloak x-show="!open" 
-                        {{ 
-                            $attributes->merge($this->getCollapsingColumnButtonExpandAttributes)
-                            ->class([
-                                'h-6 w-6' => $this->getCollapsingColumnButtonExpandAttributes['default-styling'] ?? true,
-                                'text-green-600' => $this->getCollapsingColumnButtonExpandAttributes['default-colors'] ?? true,
-                            ])
-                            ->except(['default','default-styling','default-colors']) 
-                        }}
-                     />
-                    <x-heroicon-o-minus-circle x-cloak x-show="open" 
-                        {{ 
-                            $attributes->merge($this->getCollapsingColumnButtonCollapseAttributes)
-                            ->class([
-                                'h-6 w-6' => $this->getCollapsingColumnButtonCollapseAttributes['default-styling'] ?? true,
-                                'text-yellow-600' => $this->getCollapsingColumnButtonCollapseAttributes['default-colors'] ?? true,
-                            ])
-                            ->except(['default','default-styling','default-colors']) 
-                        }}
-                    />
-                </button>
-            @endif
-        </td>
-    @elseif ($isBootstrap)
-        <td x-data="{open:false}" wire:key="{{ $tableName }}-collapsingIcon-{{ $rowIndex }}-{{ md5(now()) }}" 
-            {{
-                $attributes
-                    ->class([
-                        'd-sm-none' => !$this->shouldCollapseAlways() && !$this->shouldCollapseOnTablet(),
-                        'd-md-none' => !$this->shouldCollapseAlways() && !$this->shouldCollapseOnTablet() && $this->shouldCollapseOnMobile(),
-                        'd-lg-none' => !$this->shouldCollapseAlways() && ($this->shouldCollapseOnTablet() || $this->shouldCollapseOnMobile()),
-                    ])
-            }}
-            :class="currentlyReorderingStatus ? 'laravel-livewire-tables-reorderingMinimised' : ''"
-        >
-            @if (! $hidden)
-                <button
-                    x-cloak x-show="!currentlyReorderingStatus"
-                    x-on:click.prevent="$dispatch('toggle-row-content', {'tableName': '{{ $tableName }}', 'row': {{ $rowIndex }}});open = !open"
-                    class="border-0 bg-transparent p-0"
-                >
-                    <x-heroicon-o-plus-circle x-cloak x-show="!open"  
-                        {{ 
-                            $attributes->merge($this->getCollapsingColumnButtonExpandAttributes)
-                            ->class([
-                                'laravel-livewire-tables-btn-lg text-success' => $this->getCollapsingColumnButtonExpandAttributes['default-colors'] ?? true,
-                            ])
-                            ->except(['default','default-styling','default-colors']) 
-                        }}
-                    />
-                    <x-heroicon-o-minus-circle x-cloak x-show="open" 
-                        {{ 
-                            $attributes->merge($this->getCollapsingColumnButtonExpandAttributes)
-                            ->class([
-                                'laravel-livewire-tables-btn-lg text-warning' => $this->getCollapsingColumnButtonExpandAttributes['default-colors'] ?? true,
-                            ])
-                            ->except(['default','default-styling','default-colors']) 
-                        }}
-                    />
-                </button>
-            @endif
-        </td>
-    @endif
+@if ($this->collapsingColumnsAreEnabled && $this->hasCollapsedColumns)
+    <td x-data="{open:false}" wire:key="{{ $tableName }}-collapsingIcon-{{ $rowIndex }}-{{ md5(now()) }}"
+        {{
+            $attributes
+                ->merge()
+                ->class([
+                    'p-3 table-cell text-center' => $isTailwind,
+                    'sm:hidden' => $isTailwind && !$this->shouldCollapseAlways() && !$this->shouldCollapseOnTablet(),
+                    'md:hidden' => $isTailwind && !$this->shouldCollapseAlways() && !$this->shouldCollapseOnTablet() && $this->shouldCollapseOnMobile(),
+                    'lg:hidden' => $isTailwind && !$this->shouldCollapseAlways() && ($this->shouldCollapseOnTablet() || $this->shouldCollapseOnMobile()),
+                    'd-sm-none' => $isBootstrap && !$this->shouldCollapseAlways() && !$this->shouldCollapseOnTablet(),
+                    'd-md-none' => $isBootstrap && !$this->shouldCollapseAlways() && !$this->shouldCollapseOnTablet() && $this->shouldCollapseOnMobile(),
+                    'd-lg-none' => $isBootstrap && !$this->shouldCollapseAlways() && ($this->shouldCollapseOnTablet() || $this->shouldCollapseOnMobile()),
+                ])
+        }}
+        :class="currentlyReorderingStatus ? 'laravel-livewire-tables-reorderingMinimised' : ''"
+    >
+        @if (! $hidden)
+            <button
+                x-cloak x-show="!currentlyReorderingStatus"
+                x-on:click.prevent="$dispatch('toggle-row-content', {'tableName': '{{ $tableName }}', 'row': {{ $rowIndex }}}); open = !open"
+                @class([
+                    'border-0 bg-transparent p-0' => $isBootstrap
+                ])
+            >
+                <x-heroicon-o-plus-circle x-cloak x-show="!open" {{ 
+                    $attributes->merge($this->getCollapsingColumnButtonExpandAttributes)
+                        ->class([
+                            'h-6 w-6' => $isTailwind && ($this->getCollapsingColumnButtonExpandAttributes['default-styling'] ?? true),
+                            'text-green-600' => $isTailwind && ($this->getCollapsingColumnButtonExpandAttributes['default-colors'] ?? true),
+                            'laravel-livewire-tables-btn-lg text-success' => $isBootstrap && ($this->getCollapsingColumnButtonExpandAttributes['default-colors'] ?? true)
+                        ])
+                        ->except(['default','default-styling','default-colors']) 
+                    }}
+                />
+                <x-heroicon-o-minus-circle x-cloak x-show="open"  {{ 
+                    $attributes->merge($this->getCollapsingColumnButtonCollapseAttributes)
+                        ->class([
+                            'h-6 w-6' => $isTailwind && ($this->getCollapsingColumnButtonCollapseAttributes['default-styling'] ?? true),
+                            'text-yellow-600' => $isTailwind && ($this->getCollapsingColumnButtonCollapseAttributes['default-colors'] ?? true),
+                            'laravel-livewire-tables-btn-lg text-warning' => $isBootstrap && ($this->getCollapsingColumnButtonExpandAttributes['default-colors'] ?? true),
+                        ])
+                        ->except(['default','default-styling','default-colors']) 
+                    }}
+                />
+            </button>
+        @endif 
+    </td>
 @endif
diff --git a/src/LaravelLivewireTablesServiceProvider.php b/src/LaravelLivewireTablesServiceProvider.php
@@ -3,6 +3,7 @@
 namespace Rappasoft\LaravelLivewireTables;
 
 use Illuminate\Foundation\Console\AboutCommand;
+use Illuminate\Support\Facades\Blade;
 use Illuminate\Support\ServiceProvider;
 use Livewire\ComponentHookRegistry;
 use Rappasoft\LaravelLivewireTables\Commands\MakeCommand;
@@ -39,6 +40,7 @@ public function boot(): void
         } else {
             $this->loadTranslationsFrom(__DIR__.'/../resources/lang/php', 'livewire-tables');
         }
+        $this->addBladeLoopDirective();
 
         $this->loadViewsFrom(__DIR__.'/../resources/views', 'livewire-tables');
 
@@ -81,6 +83,18 @@ public function consoleCommands(): void
         }
     }
 
+    public function addBladeLoopDirective(): void
+    {
+        Blade::directive('tableloop', function ($expression) {
+            return "<?php foreach ($expression): ?>";
+        });
+
+        Blade::directive('endtableloop', function ($expression) {
+            return '<?php endforeach; ?>';
+        });
+
+    }
+
     public function register(): void
     {
         $this->mergeConfigFrom(

diff --git a/src/Traits/Configuration/CollapsingColumnConfiguration.php b/src/Traits/Configuration/CollapsingColumnConfiguration.php
@@ -24,4 +24,11 @@ public function setCollapsingColumnsDisabled(): self
 
         return $this;
     }
+
+    public function unsetCollapsedStatuses(): void
+    {
+        unset($this->shouldAlwaysCollapse);
+        unset($this->shouldMobileCollapse);
+        unset($this->shouldTabletCollapse);
+    }
 }
diff --git a/src/Traits/Configuration/ColumnConfiguration.php b/src/Traits/Configuration/ColumnConfiguration.php
@@ -15,11 +15,4 @@ public function setAppendedColumns(array $appendedColumns): void
         $this->appendedColumns = collect($appendedColumns);
         $this->hasRunColumnSetup = false;
     }
-
-    public function unsetCollapsedStatuses(): void
-    {
-        unset($this->shouldAlwaysCollapse);
-        unset($this->shouldMobileCollapse);
-        unset($this->shouldTabletCollapse);
-    }
 }