v3 - Adding CollapseAlways Option for Columns (#1403)

* Add CollapseAlways & Fix ReorderColumn * Remove superfluous md:hidden from the icon * Tweaks for Column Collapsing For BS4/BS5 * Fix Collapsed on Bootstrap * Tweak Bootstrap Theme --------- Co-authored-by: lrljoe <[email protected]>
rappasoft · Oct 13, 2023 · 1b1d574 · 1b1d574
1 parent eff02e4
commit 1b1d574
Show file tree

Hide file tree

Showing 16 changed files with 201 additions and 63 deletions.
diff --git a/docs/columns/available-methods.md b/docs/columns/available-methods.md
@@ -153,7 +153,15 @@ The component has the ability to collapse certain columns at different screen si
 
 ![Collapsing](https://imgur.com/z1rWHzP.png)
 
-You have 2 options when it comes to collapsing.
+You have 3 options when it comes to collapsing.
+
+Collapse Always:
+
+```php
+Column::make('Name')
+    ->collapseAlways(),
+```
+The columns will always be collapsed
 
 Collapse on tablet:
 

diff --git a/resources/views/components/table/row-contents.blade.php b/resources/views/components/table/row-contents.blade.php
@@ -6,6 +6,10 @@
         $colspan = $component->getColspanCount();
         $columns = collect();
 
+        if($component->shouldCollapseAlways())
+        {
+            $columns->push($component->getCollapsedAlwaysColumns());
+        }
         if ($component->shouldCollapseOnMobile() && $component->shouldCollapseOnTablet()) {
             $columns->push($component->getCollapsedMobileColumns());
             $columns->push($component->getCollapsedTabletColumns());
@@ -26,8 +30,8 @@
         wire:loading.class.delay="opacity-50 dark:bg-gray-900 dark:opacity-60"
 
         @class([
-            'hidden md:hidden bg-white dark:bg-gray-700 dark:text-white' => $component->isTailwind(),
-            'd-none d-md-none' => $component->isBootstrap()
+            'hidden bg-white dark:bg-gray-700 dark:text-white' => $component->isTailwind(),
+            'd-none' => $component->isBootstrap()
         ])
     >
         <td
@@ -43,11 +47,18 @@
                     @continue($this->columnSelectIsEnabled() && ! $this->columnSelectIsEnabledForColumn($column))
 
                     <p wire:key="{{ $tableName }}-row-{{ $row->{$this->getPrimaryKey()} }}-collapsed-contents-{{ $colIndex }}"
+
                         @class([
-                            'block mb-2 sm:hidden' => $component->isTailwind() && $column->shouldCollapseOnMobile(),
-                            'block mb-2 md:hidden' => $component->isTailwind() && $column->shouldCollapseOnTablet(),
-                            'd-block mb-2 d-sm-none' => $component->isBootstrap() && $column->shouldCollapseOnMobile(),
-                            'd-block mb-2 d-md-none' => $component->isBootstrap() && $column->shouldCollapseOnTablet(),
+                            'block mb-2' => $component->isTailwind() && $column->shouldCollapseAlways(),
+                            'block mb-2 sm:hidden' => $component->isTailwind() && !$column->shouldCollapseAlways() && !$column->shouldCollapseOnTablet() && !$column->shouldCollapseOnMobile(),
+                            'block mb-2 md:hidden' => $component->isTailwind() && !$column->shouldCollapseAlways() && !$column->shouldCollapseOnTablet() && $column->shouldCollapseOnMobile(),
+                            'block mb-2 lg:hidden' => $component->isTailwind() && !$column->shouldCollapseAlways() && ($column->shouldCollapseOnTablet() || $column->shouldCollapseOnMobile()),
+                            
+                            'd-block mb-2' => $component->isBootstrap() && $column->shouldCollapseAlways(),
+                            'd-block mb-2 d-sm-none' => $component->isBootstrap() && !$column->shouldCollapseAlways() && !$column->shouldCollapseOnTablet() && !$column->shouldCollapseOnMobile(),
+                            'd-block mb-2 d-md-none' => $component->isBootstrap() && !$column->shouldCollapseAlways() && !$column->shouldCollapseOnTablet() && $column->shouldCollapseOnMobile(),
+                            'd-block mb-2 d-lg-none' => $component->isBootstrap() && !$column->shouldCollapseAlways() && ($column->shouldCollapseOnTablet() || $column->shouldCollapseOnMobile()),
+
                         ])
                     >
                         <strong>{{ $column->getTitle() }}</strong>: {{ $column->renderContents($row) }}

diff --git a/resources/views/components/table/td.blade.php b/resources/views/components/table/td.blade.php
@@ -14,6 +14,7 @@
         {{
             $attributes->merge($customAttributes)
                 ->class(['px-6 py-4 whitespace-nowrap text-sm font-medium dark:text-white' => $customAttributes['default'] ?? true])
+                ->class(['hidden' => $column && $column->shouldCollapseAlways()])
                 ->class(['hidden sm:table-cell' => $column && $column->shouldCollapseOnMobile()])
                 ->class(['hidden md:table-cell' => $column && $column->shouldCollapseOnTablet()])
                 ->except('default')
@@ -31,6 +32,7 @@
         {{
             $attributes->merge($customAttributes)
                 ->class(['' => $customAttributes['default'] ?? true])
+                ->class(['d-none' => $column && $column->shouldCollapseAlways()])
                 ->class(['d-none d-sm-table-cell' => $column && $column->shouldCollapseOnMobile()])
                 ->class(['d-none d-md-table-cell' => $column && $column->shouldCollapseOnTablet()])
                 ->except('default')

diff --git a/resources/views/components/table/td/plain.blade.php b/resources/views/components/table/td/plain.blade.php
@@ -5,6 +5,7 @@
     <td x-cloak {{ $attributes
         ->merge($customAttributes)
         ->class(['px-6 py-4 whitespace-nowrap text-sm font-medium dark:text-white' => $customAttributes['default'] ?? true])
+        ->class(['hidden' => $column && $column->shouldCollapseAlways()])
         ->class(['hidden sm:table-cell' => $column && $column->shouldCollapseOnMobile()])
         ->class(['hidden md:table-cell' => $column && $column->shouldCollapseOnTablet()])
         ->except('default')
@@ -15,6 +16,7 @@
     <td {{ $attributes
         ->merge($customAttributes)
         ->class(['' => $customAttributes['default'] ?? true])
+        ->class(['d-none' => $column && $column->shouldCollapseAlways()])
         ->class(['d-none d-sm-table-cell' => $column && $column->shouldCollapseOnMobile()])
         ->class(['d-none d-md-table-cell' => $column && $column->shouldCollapseOnTablet()])
         ->except('default')

diff --git a/resources/views/components/table/td/row-contents.blade.php b/resources/views/components/table/td/row-contents.blade.php
@@ -3,42 +3,35 @@
 
 @if ($component->collapsingColumnsAreEnabled() && $component->hasCollapsedColumns())
     @if ($component->isTailwind())
-        <td
-            @if (! $hidden) x-data="{open:false}" @endif
+        <td x-data="{open:false}" wire:key="{{ $tableName }}-collapsingIcon-{{ $rowIndex }}-{{ md5(now()) }}"
             {{
                 $attributes
-                    ->merge(['class' => 'p-3 table-cell text-center'])
-                    ->class([
-                        'md:hidden' =>
-                            (($component->shouldCollapseOnMobile() && $component->shouldCollapseOnTablet()) ||
-                            ($component->shouldCollapseOnTablet() && ! $component->shouldCollapseOnMobile()))
-                    ])
-                    ->class(['sm:hidden' => $component->shouldCollapseOnMobile() && ! $component->shouldCollapseOnTablet()])
+                    ->merge(['class' => 'p-3 table-cell text-center '])
+                    ->class(['sm:hidden' => !$component->shouldCollapseAlways() && !$component->shouldCollapseOnTablet()])
+                    ->class(['md:hidden' => !$component->shouldCollapseAlways() && !$component->shouldCollapseOnTablet() && $component->shouldCollapseOnMobile()])
+                    ->class(['lg:hidden' => !$component->shouldCollapseAlways() && ($component->shouldCollapseOnTablet() || $component->shouldCollapseOnMobile())])
             }}
             :class="currentlyReorderingStatus ? 'laravel-livewire-tables-reorderingMinimised' : ''"
         >
             @if (! $hidden)
                 <button
                     x-show="!currentlyReorderingStatus"
-                    x-on:click.prevent="$dispatch('toggle-row-content', {'row': {{ $rowIndex }}});open = !open"
+                    x-on:click.prevent="$dispatch('toggle-row-content', {'row': {{ $rowIndex }}}); open = !open"
                 >
                     <x-heroicon-o-plus-circle x-show="!open" class="text-green-600 h-6 w-6" />
                     <x-heroicon-o-minus-circle x-cloak x-show="open" class="text-yellow-600 h-6 w-6" />
                 </button>
             @endif
         </td>
     @elseif ($component->isBootstrap())
-        <td :class="currentlyReorderingStatus ? 'laravel-livewire-tables-reorderingMinimised' : ''"
-            @if (! $hidden) x-data="{open:false}" @endif
+        <td x-data="{open:false}" wire:key="{{ $tableName }}-collapsingIcon-{{ $rowIndex }}-{{ md5(now()) }}" 
             {{
                 $attributes
-                    ->class([
-                        'd-md-none' =>
-                            (($component->shouldCollapseOnMobile() && $component->shouldCollapseOnTablet()) ||
-                            ($component->shouldCollapseOnTablet() && ! $component->shouldCollapseOnMobile()))
-                    ])
-                    ->class(['d-sm-none' => $component->shouldCollapseOnMobile() && ! $component->shouldCollapseOnTablet()])
+                    ->class(['d-sm-none' => !$component->shouldCollapseAlways() && !$component->shouldCollapseOnTablet()])
+                    ->class(['d-md-none' => !$component->shouldCollapseAlways() && !$component->shouldCollapseOnTablet() && $component->shouldCollapseOnMobile()])
+                    ->class(['d-lg-none' => !$component->shouldCollapseAlways() && ($component->shouldCollapseOnTablet() || $component->shouldCollapseOnMobile())])
             }}
+            :class="currentlyReorderingStatus ? 'laravel-livewire-tables-reorderingMinimised' : ''"
         >
             @if (! $hidden)
                 <button

diff --git a/resources/views/components/table/th.blade.php b/resources/views/components/table/th.blade.php
@@ -12,6 +12,7 @@
     <th scope="col" {{
         $attributes->merge($customAttributes)
             ->class(['px-6 py-3 text-left text-xs font-medium whitespace-nowrap text-gray-500 uppercase tracking-wider dark:bg-gray-800 dark:text-gray-400' => $customAttributes['default'] ?? true])
+            ->class(['hidden' => $column->shouldCollapseAlways()])
             ->class(['hidden sm:table-cell' => $column->shouldCollapseOnMobile()])
             ->class(['hidden md:table-cell' => $column->shouldCollapseOnTablet()])
             ->except('default')
@@ -48,6 +49,7 @@
     <th scope="col" {{
         $attributes->merge($customAttributes)
             ->class(['' => $customAttributes['default'] ?? true])
+            ->class(['d-none' => $column->shouldCollapseAlways()])
             ->class(['d-none d-sm-table-cell' => $column->shouldCollapseOnMobile()])
             ->class(['d-none d-md-table-cell' => $column->shouldCollapseOnTablet()])
             ->except('default')

diff --git a/resources/views/components/table/th/row-contents.blade.php b/resources/views/components/table/th/row-contents.blade.php
@@ -8,11 +8,12 @@
                 $attributes
                     ->merge(['class' => 'table-cell dark:bg-gray-800 laravel-livewire-tables-reorderingMinimised'])
                     ->class([
-                        'md:hidden' =>
-                            (($component->shouldCollapseOnMobile() && $component->shouldCollapseOnTablet()) ||
-                            ($component->shouldCollapseOnTablet() && ! $component->shouldCollapseOnMobile()))
+                        'md:hidden' => !$component->shouldCollapseAlways() && (
+                            ($component->shouldCollapseOnMobile() && $component->shouldCollapseOnTablet()) ||
+                            ($component->shouldCollapseOnTablet() && ! $component->shouldCollapseOnMobile())
+                        )
                     ])
-                    ->class(['sm:hidden' => $component->shouldCollapseOnMobile() && ! $component->shouldCollapseOnTablet()])
+                    ->class(['sm:hidden' => !$component->shouldCollapseAlways() && $component->shouldCollapseOnMobile() && ! $component->shouldCollapseOnTablet()])
             }}
             :class="{ 'laravel-livewire-tables-reorderingMinimised': ! currentlyReorderingStatus }"
         ></th>
@@ -23,11 +24,11 @@
                 $attributes
                     ->merge(['class' => 'd-table-cell laravel-livewire-tables-reorderingMinimised'])
                     ->class([
-                        'd-md-none' =>
-                            (($component->shouldCollapseOnMobile() && $component->shouldCollapseOnTablet()) ||
+                        'd-md-none' => !$component->shouldCollapseAlways() && 
+                            ( ($component->shouldCollapseOnMobile() && $component->shouldCollapseOnTablet()) ||
                             ($component->shouldCollapseOnTablet() && ! $component->shouldCollapseOnMobile()))
                     ])
-                    ->class(['d-sm-none' => $component->shouldCollapseOnMobile() && ! $component->shouldCollapseOnTablet()])
+                    ->class(['d-sm-none' => !$component->shouldCollapseAlways() && $component->shouldCollapseOnMobile() && ! $component->shouldCollapseOnTablet()])
             }}
             :class="{ 'laravel-livewire-tables-reorderingMinimised': ! currentlyReorderingStatus }"
         ></th>

diff --git a/resources/views/components/table/tr/footer.blade.php b/resources/views/components/table/tr/footer.blade.php
@@ -18,6 +18,7 @@
     @foreach($this->getColumns() as $colIndex => $column)
         @continue($column->isHidden())
         @continue($this->columnSelectIsEnabled() && ! $this->columnSelectIsEnabledForColumn($column))
+        @continue($column->isReorderColumn() && !$this->getCurrentlyReorderingStatus())
 
         @if($column->isReorderColumn())
             <x-livewire-tables::table.td.plain :column="$column" :displayMinimisedOnReorder="false"  wire:key="{{ $tableName .'-footer-'.$colIndex.'-show' }}"   :customAttributes="$this->getFooterTdAttributes($column, $rows, $colIndex)" />

diff --git a/resources/views/components/table/tr/secondary-header.blade.php b/resources/views/components/table/tr/secondary-header.blade.php
@@ -19,13 +19,10 @@
     @foreach($this->getColumns() as $colIndex => $column)
         @continue($column->isHidden())
         @continue($this->columnSelectIsEnabled() && ! $this->columnSelectIsEnabledForColumn($column))
+        @continue($column->isReorderColumn() && !$this->getCurrentlyReorderingStatus())
 
-        @if($column->isReorderColumn())
-            <x-livewire-tables::table.td.plain :column="$column" :displayMinimisedOnReorder="false"  :customAttributes="$this->getSecondaryHeaderTdAttributes($column, $rows, $colIndex)" />
-        @else
-            <x-livewire-tables::table.td.plain :column="$column" :displayMinimisedOnReorder="true" wire:key="{{ $tableName .'-secondary-header-show-'.$column->getSlug() }}"  :customAttributes="$this->getSecondaryHeaderTdAttributes($column, $rows, $colIndex)">
-                {{ $column->getSecondaryHeaderContents($rows) }}
-            </x-livewire-tables::table.td.plain>
-        @endif
+        <x-livewire-tables::table.td.plain :column="$column" :displayMinimisedOnReorder="true" wire:key="{{ $tableName .'-secondary-header-show-'.$column->getSlug() }}"  :customAttributes="$this->getSecondaryHeaderTdAttributes($column, $rows, $colIndex)">
+            {{ $column->getSecondaryHeaderContents($rows) }}
+        </x-livewire-tables::table.td.plain>
     @endforeach
 </x-livewire-tables::table.tr.plain>
diff --git a/resources/views/datatable.blade.php b/resources/views/datatable.blade.php
@@ -21,12 +21,9 @@
                 @foreach($columns as $index => $column)
                     @continue($column->isHidden())
                     @continue($this->columnSelectIsEnabled() && ! $this->columnSelectIsEnabledForColumn($column))
+                    @continue($column->isReorderColumn() && !$this->getCurrentlyReorderingStatus())
 
-                    @if($column->isReorderColumn())
-                        <x-livewire-tables::table.th wire:key="{{ $tableName.'-table-head-'.$index }}" :displayMinimisedOnReorder="true" :column="$column" :index="$index" />
-                    @else
-                        <x-livewire-tables::table.th wire:key="{{ $tableName.'-table-head-'.$index }}" :column="$column" :index="$index" />
-                    @endif
+                    <x-livewire-tables::table.th wire:key="{{ $tableName.'-table-head-'.$index }}" :column="$column" :index="$index" />
                 @endforeach
             </x-slot>
 
@@ -45,16 +42,11 @@
                     @foreach($columns as $colIndex => $column)
                         @continue($column->isHidden())
                         @continue($this->columnSelectIsEnabled() && ! $this->columnSelectIsEnabledForColumn($column))
+                        @continue($column->isReorderColumn() && !$this->getCurrentlyReorderingStatus())
 
-                        @if($column->isReorderColumn())
-                            <x-livewire-tables::table.td :displayMinimisedOnReorder="true"  wire:key="{{ $tableName . '-' . $row->{$this->getPrimaryKey()} . '-datatable-reorder-' . $column->getSlug() }}"  :column="$column" :colIndex="$colIndex">
-                                {{ $column->renderContents($row) }}
-                            </x-livewire-tables::table.td>
-                        @else
-                            <x-livewire-tables::table.td wire:key="{{ $tableName . '-' . $row->{$this->getPrimaryKey()} . '-datatable-td-' . $column->getSlug() }}"  :column="$column" :colIndex="$colIndex">
-                                {{ $column->renderContents($row) }}
-                            </x-livewire-tables::table.td>
-                        @endif
+                        <x-livewire-tables::table.td wire:key="{{ $tableName . '-' . $row->{$this->getPrimaryKey()} . '-datatable-td-' . $column->getSlug() }}"  :column="$column" :colIndex="$colIndex">
+                            {{ $column->renderContents($row) }}
+                        </x-livewire-tables::table.td>
                     @endforeach
                 </x-livewire-tables::table.tr>
 

diff --git a/src/Traits/Configuration/ColumnConfiguration.php b/src/Traits/Configuration/ColumnConfiguration.php
@@ -43,4 +43,11 @@ public function setAppendedColumns(array $appendedColumns): void
                 return $column;
             });
     }
+
+    public function unsetCollapsedStatuses(): void
+    {
+        unset($this->shouldAlwaysCollapse);
+        unset($this->shouldMobileCollapse);
+        unset($this->shouldTabletCollapse);
+    }
 }