Skip to content

Commit 26f094b

Browse files
lrljoelrljoe
authored
Tidy & Improve Collapsed Columns Behaviour (rappasoft#2159)
* Tidy & Improve Collapsed Columns Behaviour * Fix styling * Add relevant tests * Fix styling --------- Co-authored-by: lrljoe <[email protected]>
1 parent 940e0ac commit 26f094b

18 files changed

+587
-548
lines changed

‎resources/views/components/table/collapsed-columns.blade.php‎

Lines changed: 29 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,16 @@
11
@aware([ 'tableName', 'primaryKey','isTailwind','isBootstrap'])
22
@props(['row', 'rowIndex'])
33

4-
@php
5-
$customAttributes = $this->getTrAttributes($row, $rowIndex);
6-
@endphp
7-
8-
@if ($this->collapsingColumnsAreEnabled() && $this->hasCollapsedColumns())
9-
@php
10-
$colspan = $this->getColspanCount();
11-
$columns = collect();
12-
13-
if($this->shouldCollapseAlways())
14-
{
15-
$columns->push($this->getCollapsedAlwaysColumns());
16-
}
17-
if ($this->shouldCollapseOnMobile() && $this->shouldCollapseOnTablet()) {
18-
$columns->push($this->getCollapsedMobileColumns());
19-
$columns->push($this->getCollapsedTabletColumns());
20-
} elseif ($this->shouldCollapseOnTablet() && ! $this->shouldCollapseOnMobile()) {
21-
$columns->push($this->getCollapsedTabletColumns());
22-
} elseif ($this->shouldCollapseOnMobile() && ! $this->shouldCollapseOnTablet()) {
23-
$columns->push($this->getCollapsedMobileColumns());
24-
}
25-
26-
$columns = $columns->collapse();
27-
@endphp
28-
29-
<tr
30-
x-data
4+
@if ($this->collapsingColumnsAreEnabled && $this->hasCollapsedColumns)
5+
@php($customAttributes = $this->getTrAttributes($row, $rowIndex))
6+
<tr x-data
317
@toggle-row-content.window="($event.detail.tableName === '{{ $tableName }}' && $event.detail.row === {{ $rowIndex }}) ? $el.classList.toggle('{{ $isBootstrap ? 'd-none' : 'hidden' }}') : null"
32-
33-
wire:key="{{ $tableName }}-row-{{ $row->{$primaryKey} }}-collapsed-contents"
34-
wire:loading.class.delay="opacity-50 dark:bg-gray-900 dark:opacity-60"
358
{{
36-
$attributes->merge($customAttributes)
9+
$attributes->merge([
10+
'wire:loading.class.delay' => 'opacity-50 dark:bg-gray-900 dark:opacity-60',
11+
'wire:key' => $tableName.'-row-'.$row->{$primaryKey}.'-collapsed-contents',
12+
])
13+
->merge($customAttributes)
3714
->class([
3815
'hidden bg-white dark:bg-gray-700 dark:text-white rappasoft-striped-row' => ($isTailwind && ($customAttributes['default'] ?? true) && $rowIndex % 2 === 0),
3916
'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 @@
4219
])
4320
->except(['default','default-styling','default-colors'])
4421
}}
45-
4622
>
47-
<td
48-
@class([
23+
<td colspan="{{ $this->getColspanCount }}" @class([
4924
'text-left pt-4 pb-2 px-4' => $isTailwind,
5025
'text-start pt-3 p-2' => $isBootstrap,
51-
])
52-
colspan="{{ $colspan }}"
53-
>
26+
])>
5427
<div>
55-
@foreach($columns as $colIndex => $column)
56-
@continue($column->isHidden())
57-
@continue($this->columnSelectIsEnabled() && ! $this->columnSelectIsEnabledForColumn($column))
58-
59-
<p wire:key="{{ $tableName }}-row-{{ $row->{$primaryKey} }}-collapsed-contents-{{ $colIndex }}"
60-
61-
@class([
62-
'block mb-2' => $isTailwind && $column->shouldCollapseAlways(),
63-
'block mb-2 sm:hidden' => $isTailwind && !$column->shouldCollapseAlways() && !$column->shouldCollapseOnTablet() && !$column->shouldCollapseOnMobile(),
64-
'block mb-2 md:hidden' => $isTailwind && !$column->shouldCollapseAlways() && !$column->shouldCollapseOnTablet() && $column->shouldCollapseOnMobile(),
65-
'block mb-2 lg:hidden' => $isTailwind && !$column->shouldCollapseAlways() && ($column->shouldCollapseOnTablet() || $column->shouldCollapseOnMobile()),
66-
67-
'd-block mb-2' => $isBootstrap && $column->shouldCollapseAlways(),
68-
'd-block mb-2 d-sm-none' => $isBootstrap && !$column->shouldCollapseAlways() && !$column->shouldCollapseOnTablet() && !$column->shouldCollapseOnMobile(),
69-
'd-block mb-2 d-md-none' => $isBootstrap && !$column->shouldCollapseAlways() && !$column->shouldCollapseOnTablet() && $column->shouldCollapseOnMobile(),
70-
'd-block mb-2 d-lg-none' => $isBootstrap && !$column->shouldCollapseAlways() && ($column->shouldCollapseOnTablet() || $column->shouldCollapseOnMobile()),
71-
72-
])
73-
>
74-
<strong>{{ $column->getTitle() }}</strong>: {{ $column->renderContents($row) }}
28+
@foreach($this->getCollapsedColumnsForContent as $colIndex => $column)
29+
30+
<p wire:key="{{ $tableName }}-row-{{ $row->{$primaryKey} }}-collapsed-contents-{{ $colIndex }}" @class([
31+
'block mb-2 hidden' => $isTailwind,
32+
'sm:block' => $isTailwind && $column->shouldCollapseAlways(),
33+
'sm:block md:hidden' => $isTailwind && !$column->shouldCollapseAlways() && !$column->shouldCollapseOnTablet() && $column->shouldCollapseOnMobile(),
34+
'sm:block lg:hidden' => $isTailwind && !$column->shouldCollapseAlways() && ($column->shouldCollapseOnTablet() || $column->shouldCollapseOnMobile()),
35+
36+
'd-block mb-2' => $isBootstrap,
37+
'd-sm-none' => $isBootstrap && !$column->shouldCollapseAlways() && !$column->shouldCollapseOnTablet() && !$column->shouldCollapseOnMobile(),
38+
'd-md-none' => $isBootstrap && !$column->shouldCollapseAlways() && !$column->shouldCollapseOnTablet() && $column->shouldCollapseOnMobile(),
39+
'd-lg-none' => $isBootstrap && !$column->shouldCollapseAlways() && ($column->shouldCollapseOnTablet() || $column->shouldCollapseOnMobile()),
40+
])>
41+
<strong>{{ $column->getTitle() }}</strong>:
42+
@if($column->isHtml())
43+
{!! $column->setIndexes($rowIndex, $colIndex)->renderContents($row) !!}
44+
@else
45+
{{ $column->setIndexes($rowIndex, $colIndex)->renderContents($row) }}
46+
@endif
7547
</p>
7648
@endforeach
7749
</div>

‎resources/views/components/table/td/collapsed-columns.blade.php‎

Lines changed: 48 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,52 @@
11
@aware([ 'tableName','isTailwind','isBootstrap'])
22
@props(['rowIndex', 'hidden' => false])
33

4-
@if ($this->collapsingColumnsAreEnabled() && $this->hasCollapsedColumns())
5-
@if ($isTailwind)
6-
<td x-data="{open:false}" wire:key="{{ $tableName }}-collapsingIcon-{{ $rowIndex }}-{{ md5(now()) }}"
7-
{{
8-
$attributes
9-
->merge()
10-
->class([
11-
'p-3 table-cell text-center',
12-
'sm:hidden' => !$this->shouldCollapseAlways() && !$this->shouldCollapseOnTablet(),
13-
'md:hidden' => !$this->shouldCollapseAlways() && !$this->shouldCollapseOnTablet() && $this->shouldCollapseOnMobile(),
14-
'lg:hidden' => !$this->shouldCollapseAlways() && ($this->shouldCollapseOnTablet() || $this->shouldCollapseOnMobile()),
15-
])
16-
}}
17-
:class="currentlyReorderingStatus ? 'laravel-livewire-tables-reorderingMinimised' : ''"
18-
>
19-
@if (! $hidden)
20-
<button
21-
x-cloak x-show="!currentlyReorderingStatus"
22-
x-on:click.prevent="$dispatch('toggle-row-content', {'tableName': '{{ $tableName }}', 'row': {{ $rowIndex }}}); open = !open"
23-
>
24-
<x-heroicon-o-plus-circle x-cloak x-show="!open"
25-
{{
26-
$attributes->merge($this->getCollapsingColumnButtonExpandAttributes)
27-
->class([
28-
'h-6 w-6' => $this->getCollapsingColumnButtonExpandAttributes['default-styling'] ?? true,
29-
'text-green-600' => $this->getCollapsingColumnButtonExpandAttributes['default-colors'] ?? true,
30-
])
31-
->except(['default','default-styling','default-colors'])
32-
}}
33-
/>
34-
<x-heroicon-o-minus-circle x-cloak x-show="open"
35-
{{
36-
$attributes->merge($this->getCollapsingColumnButtonCollapseAttributes)
37-
->class([
38-
'h-6 w-6' => $this->getCollapsingColumnButtonCollapseAttributes['default-styling'] ?? true,
39-
'text-yellow-600' => $this->getCollapsingColumnButtonCollapseAttributes['default-colors'] ?? true,
40-
])
41-
->except(['default','default-styling','default-colors'])
42-
}}
43-
/>
44-
</button>
45-
@endif
46-
</td>
47-
@elseif ($isBootstrap)
48-
<td x-data="{open:false}" wire:key="{{ $tableName }}-collapsingIcon-{{ $rowIndex }}-{{ md5(now()) }}"
49-
{{
50-
$attributes
51-
->class([
52-
'd-sm-none' => !$this->shouldCollapseAlways() && !$this->shouldCollapseOnTablet(),
53-
'd-md-none' => !$this->shouldCollapseAlways() && !$this->shouldCollapseOnTablet() && $this->shouldCollapseOnMobile(),
54-
'd-lg-none' => !$this->shouldCollapseAlways() && ($this->shouldCollapseOnTablet() || $this->shouldCollapseOnMobile()),
55-
])
56-
}}
57-
:class="currentlyReorderingStatus ? 'laravel-livewire-tables-reorderingMinimised' : ''"
58-
>
59-
@if (! $hidden)
60-
<button
61-
x-cloak x-show="!currentlyReorderingStatus"
62-
x-on:click.prevent="$dispatch('toggle-row-content', {'tableName': '{{ $tableName }}', 'row': {{ $rowIndex }}});open = !open"
63-
class="border-0 bg-transparent p-0"
64-
>
65-
<x-heroicon-o-plus-circle x-cloak x-show="!open"
66-
{{
67-
$attributes->merge($this->getCollapsingColumnButtonExpandAttributes)
68-
->class([
69-
'laravel-livewire-tables-btn-lg text-success' => $this->getCollapsingColumnButtonExpandAttributes['default-colors'] ?? true,
70-
])
71-
->except(['default','default-styling','default-colors'])
72-
}}
73-
/>
74-
<x-heroicon-o-minus-circle x-cloak x-show="open"
75-
{{
76-
$attributes->merge($this->getCollapsingColumnButtonExpandAttributes)
77-
->class([
78-
'laravel-livewire-tables-btn-lg text-warning' => $this->getCollapsingColumnButtonExpandAttributes['default-colors'] ?? true,
79-
])
80-
->except(['default','default-styling','default-colors'])
81-
}}
82-
/>
83-
</button>
84-
@endif
85-
</td>
86-
@endif
4+
@if ($this->collapsingColumnsAreEnabled && $this->hasCollapsedColumns)
5+
<td x-data="{open:false}" wire:key="{{ $tableName }}-collapsingIcon-{{ $rowIndex }}-{{ md5(now()) }}"
6+
{{
7+
$attributes
8+
->merge()
9+
->class([
10+
'p-3 table-cell text-center' => $isTailwind,
11+
'sm:hidden' => $isTailwind && !$this->shouldCollapseAlways() && !$this->shouldCollapseOnTablet(),
12+
'md:hidden' => $isTailwind && !$this->shouldCollapseAlways() && !$this->shouldCollapseOnTablet() && $this->shouldCollapseOnMobile(),
13+
'lg:hidden' => $isTailwind && !$this->shouldCollapseAlways() && ($this->shouldCollapseOnTablet() || $this->shouldCollapseOnMobile()),
14+
'd-sm-none' => $isBootstrap && !$this->shouldCollapseAlways() && !$this->shouldCollapseOnTablet(),
15+
'd-md-none' => $isBootstrap && !$this->shouldCollapseAlways() && !$this->shouldCollapseOnTablet() && $this->shouldCollapseOnMobile(),
16+
'd-lg-none' => $isBootstrap && !$this->shouldCollapseAlways() && ($this->shouldCollapseOnTablet() || $this->shouldCollapseOnMobile()),
17+
])
18+
}}
19+
:class="currentlyReorderingStatus ? 'laravel-livewire-tables-reorderingMinimised' : ''"
20+
>
21+
@if (! $hidden)
22+
<button
23+
x-cloak x-show="!currentlyReorderingStatus"
24+
x-on:click.prevent="$dispatch('toggle-row-content', {'tableName': '{{ $tableName }}', 'row': {{ $rowIndex }}}); open = !open"
25+
@class([
26+
'border-0 bg-transparent p-0' => $isBootstrap
27+
])
28+
>
29+
<x-heroicon-o-plus-circle x-cloak x-show="!open" {{
30+
$attributes->merge($this->getCollapsingColumnButtonExpandAttributes)
31+
->class([
32+
'h-6 w-6' => $isTailwind && ($this->getCollapsingColumnButtonExpandAttributes['default-styling'] ?? true),
33+
'text-green-600' => $isTailwind && ($this->getCollapsingColumnButtonExpandAttributes['default-colors'] ?? true),
34+
'laravel-livewire-tables-btn-lg text-success' => $isBootstrap && ($this->getCollapsingColumnButtonExpandAttributes['default-colors'] ?? true)
35+
])
36+
->except(['default','default-styling','default-colors'])
37+
}}
38+
/>
39+
<x-heroicon-o-minus-circle x-cloak x-show="open" {{
40+
$attributes->merge($this->getCollapsingColumnButtonCollapseAttributes)
41+
->class([
42+
'h-6 w-6' => $isTailwind && ($this->getCollapsingColumnButtonCollapseAttributes['default-styling'] ?? true),
43+
'text-yellow-600' => $isTailwind && ($this->getCollapsingColumnButtonCollapseAttributes['default-colors'] ?? true),
44+
'laravel-livewire-tables-btn-lg text-warning' => $isBootstrap && ($this->getCollapsingColumnButtonExpandAttributes['default-colors'] ?? true),
45+
])
46+
->except(['default','default-styling','default-colors'])
47+
}}
48+
/>
49+
</button>
50+
@endif
51+
</td>
8752
@endif

‎src/LaravelLivewireTablesServiceProvider.php‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
namespace Rappasoft\LaravelLivewireTables;
44

55
use Illuminate\Foundation\Console\AboutCommand;
6+
use Illuminate\Support\Facades\Blade;
67
use Illuminate\Support\ServiceProvider;
78
use Livewire\ComponentHookRegistry;
89
use Rappasoft\LaravelLivewireTables\Commands\MakeCommand;
@@ -39,6 +40,7 @@ public function boot(): void
3940
} else {
4041
$this->loadTranslationsFrom(__DIR__.'/../resources/lang/php', 'livewire-tables');
4142
}
43+
$this->addBladeLoopDirective();
4244

4345
$this->loadViewsFrom(__DIR__.'/../resources/views', 'livewire-tables');
4446

@@ -81,6 +83,18 @@ public function consoleCommands(): void
8183
}
8284
}
8385

86+
public function addBladeLoopDirective(): void
87+
{
88+
Blade::directive('tableloop', function ($expression) {
89+
return "<?php foreach ($expression): ?>";
90+
});
91+
92+
Blade::directive('endtableloop', function ($expression) {
93+
return '<?php endforeach; ?>';
94+
});
95+
96+
}
97+
8498
public function register(): void
8599
{
86100
$this->mergeConfigFrom(

‎src/Traits/Configuration/CollapsingColumnConfiguration.php‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,4 +24,11 @@ public function setCollapsingColumnsDisabled(): self
2424

2525
return $this;
2626
}
27+
28+
public function unsetCollapsedStatuses(): void
29+
{
30+
unset($this->shouldAlwaysCollapse);
31+
unset($this->shouldMobileCollapse);
32+
unset($this->shouldTabletCollapse);
33+
}
2734
}

‎src/Traits/Configuration/ColumnConfiguration.php‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,4 @@ public function setAppendedColumns(array $appendedColumns): void
1515
$this->appendedColumns = collect($appendedColumns);
1616
$this->hasRunColumnSetup = false;
1717
}
18-
19-
public function unsetCollapsedStatuses(): void
20-
{
21-
unset($this->shouldAlwaysCollapse);
22-
unset($this->shouldMobileCollapse);
23-
unset($this->shouldTabletCollapse);
24-
}
2518
}

0 commit comments

Comments
 (0)