Skip to content

Commit c134e6a

Browse files
lrljoelrljoe
authored
Loading Placeholder Adjustments (#1987)
* Move LoadingPlaceholderStyling into new method * Add "Loading" default translation * Move Placeholder Blade Config backwards * Adjustments to Placeholder Attributes * Tweak Row Behaviour --------- Co-authored-by: lrljoe <[email protected]>
1 parent 9fc6ad8 commit c134e6a

File tree

10 files changed

+204
-78
lines changed

10 files changed

+204
-78
lines changed

‎docs/misc/loading-placeholder.md‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,9 @@ You may use this method to set custom text for the placeholder:
4747
$this->setLoadingPlaceholderContent('Text To Display');
4848
}
4949
```
50-
### setLoadingPlaceHolderWrapperAttributes
50+
### setLoadingPlaceHolderWrapperAttributes (Deprecated)
51+
52+
This is replaced by setLoadingPlaceHolderRowAttributes, but remains functional.
5153

5254
This method allows you to customise the attributes for the &lt;tr&gt; element used as a Placeholder when the table is loading. Similar to other setAttribute methods, this accepts a range of attributes, and a boolean "default", which will enable/disable the default attributes.
5355

@@ -62,6 +64,22 @@ This method allows you to customise the attributes for the &lt;tr&gt; element us
6264

6365
```
6466

67+
### setLoadingPlaceHolderRowAttributes
68+
69+
Replaces setLoadingPlaceHolderWrapperAttributes
70+
This method allows you to customise the attributes for the &lt;tr&gt; element used as a Placeholder when the table is loading. Similar to other setAttribute methods, this accepts a range of attributes, and a boolean "default", which will enable/disable the default attributes.
71+
72+
```php
73+
public function configure(): void
74+
{
75+
$this->setLoadingPlaceHolderRowAttributes([
76+
'class' => 'text-bold',
77+
'default' => false,
78+
]);
79+
}
80+
81+
```
82+
6583
### setLoadingPlaceHolderIconAttributes
6684

6785
This method allows you to customise the attributes for the &lt;div&gt; element that is used solely for the PlaceholderIcon. Similar to other setAttribute methods, this accepts a range of attributes, and a boolean "default", which will enable/disable the default attributes.

‎resources/lang/en.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"livewire-tables::Deselect All": "Deselect All",
1212
"livewire-tables::Done Reordering": "Done Reordering",
1313
"livewire-tables::Filters": "Filters",
14+
"livewire-tables::loading": "Loading",
1415
"livewire-tables::max": "Max",
1516
"livewire-tables::min": "Min",
1617
"livewire-tables::not_applicable": "N/A",
@@ -45,6 +46,7 @@
4546
"Deselect All": "Deselect All",
4647
"Done Reordering": "Done Reordering",
4748
"Filters": "Filters",
49+
"loading": "Loading",
4850
"max": "Max",
4951
"min": "Min",
5052
"not_applicable": "N/A",

‎resources/views/components/includes/loading.blade.php‎

Lines changed: 29 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,38 @@
1-
@aware(['isTailwind', 'isBootstrap', 'tableName', 'component'])
1+
@aware(['tableName'])
22
@props(['colCount' => 1])
33

44
@php
5-
$customAttributes['loader-wrapper'] = $this->getLoadingPlaceHolderWrapperAttributes();
6-
$customAttributes['loader-icon'] = $this->getLoadingPlaceHolderIconAttributes();
5+
$loaderRow = $this->getLoadingPlaceHolderRowAttributes();
6+
$loaderCell = $this->getLoadingPlaceHolderCellAttributes();
7+
$loaderIcon = $this->getLoadingPlaceHolderIconAttributes();
78
@endphp
8-
@if($this->hasLoadingPlaceholderBlade())
9-
@include($this->getLoadingPlaceHolderBlade(), ['colCount' => $colCount])
10-
@else
119

12-
<tr wire:key="{{ $tableName }}-loader"
13-
{{
14-
$attributes->merge($customAttributes['loader-wrapper'])
15-
->class(['hidden w-full text-center h-screen place-items-center align-middle' => $isTailwind && ($customAttributes['loader-wrapper']['default'] ?? true)])
16-
->class(['d-none w-100 text-center h-100 align-items-center' => $isBootstrap && ($customAttributes['loader-wrapper']['default'] ?? true)]);
17-
}}
18-
wire:loading.class.remove="hidden d-none"
19-
>
20-
<td colspan="{{ $colCount }}" wire:key="{{ $tableName }}-loader-column" >
10+
<tr wire:key="{{ $tableName }}-loader" wire:loading.class.remove="hidden d-none" {{
11+
$attributes->merge($loaderRow)
12+
->class(['hidden w-full text-center place-items-center align-middle' => $this->isTailwind && ($loaderRow['default'] ?? true)])
13+
->class(['d-none w-100 text-center align-items-center' => $this->isBootstrap && ($loaderRow['default'] ?? true)])
14+
->except(['default','default-styling','default-colors'])
15+
}}>
16+
<td colspan="{{ $colCount }}" wire:key="{{ $tableName }}-loader-column" {{
17+
$attributes->merge($loaderCell)
18+
->class(['py-4' => $this->isTailwind && ($loaderCell['default'] ?? true)])
19+
->class(['py-4' => $this->isBootstrap && ($loaderCell['default'] ?? true)])
20+
->except(['default','default-styling','default-colors', 'colspan','wire:key'])
21+
}}>
22+
@if($this->hasLoadingPlaceholderBlade())
23+
@include($this->getLoadingPlaceHolderBlade(), ['colCount' => $colCount])
24+
@else
25+
2126
<div class="h-min self-center align-middle text-center">
22-
<div class="lds-hourglass"
23-
{{
24-
$attributes->merge($customAttributes['loader-icon'])
25-
->class(['lds-hourglass' => $isTailwind && ($customAttributes['loader-icon']['default'] ?? true)])
26-
->class(['lds-hourglass' => $isBootstrap && ($customAttributes['loader-icon']['default'] ?? true)])
27+
<div class="lds-hourglass"{{
28+
$attributes->merge($loaderIcon)
29+
->class(['lds-hourglass' => $this->isTailwind && ($loaderIcon['default'] ?? true)])
30+
->class(['lds-hourglass' => $this->isBootstrap && ($loaderIcon['default'] ?? true)])
2731
->except(['default','default-styling','default-colors']);
28-
}}
29-
></div>
30-
<div>{{ $this->getLoadingPlaceholderContent() }}</div>
32+
}}></div>
33+
<div>{!! $this->getLoadingPlaceholderContent() !!}</div>
3134
</div>
32-
</td>
33-
</tr>
35+
@endif
36+
</td>
37+
</tr>
3438

35-
@endif

‎src/Traits/Configuration/LoadingPlaceholderConfiguration.php‎

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -32,27 +32,6 @@ public function setLoadingPlaceholderContent(string $content): self
3232
return $this;
3333
}
3434

35-
public function setLoadingPlaceHolderAttributes(array $attributes): self
36-
{
37-
$this->loadingPlaceHolderAttributes = $attributes;
38-
39-
return $this;
40-
}
41-
42-
public function setLoadingPlaceHolderIconAttributes(array $attributes): self
43-
{
44-
$this->loadingPlaceHolderIconAttributes = $attributes;
45-
46-
return $this;
47-
}
48-
49-
public function setLoadingPlaceHolderWrapperAttributes(array $attributes): self
50-
{
51-
$this->loadingPlaceHolderWrapperAttributes = $attributes;
52-
53-
return $this;
54-
}
55-
5635
public function setLoadingPlaceholderBlade(string $customBlade): self
5736
{
5837
$this->loadingPlaceholderBlade = $customBlade;

‎src/Traits/Helpers/LoadingPlaceholderHelpers.php‎

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -16,23 +16,7 @@ public function getDisplayLoadingPlaceholder(): bool
1616

1717
public function getLoadingPlaceholderContent(): string
1818
{
19-
return $this->loadingPlaceholderContent ?? __('livewire-tables:loading');
20-
}
21-
22-
public function getLoadingPlaceholderAttributes(): array
23-
{
24-
return count($this->loadingPlaceHolderAttributes) ? $this->loadingPlaceHolderAttributes : ['default' => true];
25-
26-
}
27-
28-
public function getLoadingPlaceHolderIconAttributes(): array
29-
{
30-
return count($this->loadingPlaceHolderIconAttributes) ? $this->loadingPlaceHolderIconAttributes : ['default' => true];
31-
}
32-
33-
public function getLoadingPlaceHolderWrapperAttributes(): array
34-
{
35-
return count($this->loadingPlaceHolderWrapperAttributes) ? $this->loadingPlaceHolderWrapperAttributes : ['default' => true];
19+
return $this->loadingPlaceholderContent ?? __('livewire-tables::loading');
3620
}
3721

3822
public function hasLoadingPlaceholderBlade(): bool

‎src/Traits/Styling/Configuration/LoadingPlaceholderStylingConfiguration.php‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<?php
2+
3+
namespace Rappasoft\LaravelLivewireTables\Traits\Styling\Configuration;
4+
5+
trait LoadingPlaceholderStylingConfiguration
6+
{
7+
public function setLoadingPlaceHolderAttributes(array $attributes): self
8+
{
9+
$this->setCustomAttributes('loadingPlaceHolderAttributes', [...$this->getCustomAttributes(propertyName: 'loadingPlaceHolderAttributes', default: false, classicMode: true), ...$attributes]);
10+
11+
return $this;
12+
}
13+
14+
public function setLoadingPlaceHolderIconAttributes(array $attributes): self
15+
{
16+
$this->setCustomAttributes('loadingPlaceHolderIconAttributes', [...$this->getCustomAttributes(propertyName: 'loadingPlaceHolderIconAttributes', default: false, classicMode: true), ...$attributes]);
17+
18+
return $this;
19+
}
20+
21+
public function setLoadingPlaceHolderRowAttributes(array $attributes): self
22+
{
23+
$this->setCustomAttributes('loadingPlaceHolderRowAttributes', [...$this->getCustomAttributes(propertyName: 'loadingPlaceHolderRowAttributes', default: false, classicMode: true), ...$attributes]);
24+
25+
return $this;
26+
}
27+
28+
public function setLoadingPlaceHolderWrapperAttributes(array $attributes): self
29+
{
30+
$this->setCustomAttributes('loadingPlaceHolderRowAttributes', [...$this->getCustomAttributes(propertyName: 'loadingPlaceHolderRowAttributes', default: false, classicMode: true), ...$attributes]);
31+
32+
return $this;
33+
}
34+
}

‎src/Traits/Styling/HasLoadingPlaceholderStyling.php‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<?php
2+
3+
namespace Rappasoft\LaravelLivewireTables\Traits\Styling;
4+
5+
use Rappasoft\LaravelLivewireTables\Traits\Styling\Configuration\LoadingPlaceholderStylingConfiguration;
6+
use Rappasoft\LaravelLivewireTables\Traits\Styling\Helpers\LoadingPlaceholderStylingHelpers;
7+
8+
trait HasLoadingPlaceholderStyling
9+
{
10+
use LoadingPlaceholderStylingConfiguration,
11+
LoadingPlaceholderStylingHelpers;
12+
13+
protected array $loadingPlaceHolderAttributes = [];
14+
15+
protected array $loadingPlaceHolderIconAttributes = [];
16+
17+
protected array $loadingPlaceHolderWrapperAttributes = [];
18+
19+
protected array $loadingPlaceHolderRowAttributes = [];
20+
21+
protected array $loadingPlaceHolderCellAttributes = ['class' => '', 'default' => true];
22+
}

‎src/Traits/Styling/Helpers/LoadingPlaceholderStylingHelpers.php‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<?php
2+
3+
namespace Rappasoft\LaravelLivewireTables\Traits\Styling\Helpers;
4+
5+
use Livewire\Attributes\Computed;
6+
7+
trait LoadingPlaceholderStylingHelpers
8+
{
9+
public function getLoadingPlaceholderAttributes(): array
10+
{
11+
return $this->getCustomAttributes(propertyName: 'loadingPlaceHolderAttributes', default: true, classicMode: true);
12+
13+
}
14+
15+
public function getLoadingPlaceHolderIconAttributes(): array
16+
{
17+
return $this->getCustomAttributes(propertyName: 'loadingPlaceHolderIconAttributes', default: true, classicMode: true);
18+
19+
}
20+
21+
public function getLoadingPlaceHolderWrapperAttributes(): array
22+
{
23+
return $this->getCustomAttributes(propertyName: 'loadingPlaceHolderRowAttributes', default: true, classicMode: true);
24+
}
25+
26+
public function getLoadingPlaceHolderRowAttributes(): array
27+
{
28+
return $this->getCustomAttributes(propertyName: 'loadingPlaceHolderRowAttributes', default: true, classicMode: true);
29+
}
30+
31+
public function getLoadingPlaceHolderCellAttributes(): array
32+
{
33+
return $this->getCustomAttributes(propertyName: 'loadingPlaceHolderCellAttributes', default: true, classicMode: true);
34+
35+
}
36+
}

‎src/Traits/WithLoadingPlaceholder.php‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,17 @@
44

55
use Rappasoft\LaravelLivewireTables\Traits\Configuration\LoadingPlaceholderConfiguration;
66
use Rappasoft\LaravelLivewireTables\Traits\Helpers\LoadingPlaceholderHelpers;
7+
use Rappasoft\LaravelLivewireTables\Traits\Styling\HasLoadingPlaceholderStyling;
78

89
trait WithLoadingPlaceholder
910
{
1011
use LoadingPlaceholderConfiguration,
11-
LoadingPlaceholderHelpers;
12+
LoadingPlaceholderHelpers,
13+
HasLoadingPlaceholderStyling;
1214

1315
protected bool $displayLoadingPlaceholder = false;
1416

1517
protected string $loadingPlaceholderContent = 'Loading';
1618

1719
protected ?string $loadingPlaceholderBlade = null;
18-
19-
protected array $loadingPlaceHolderAttributes = [];
20-
21-
protected array $loadingPlaceHolderIconAttributes = [];
22-
23-
protected array $loadingPlaceHolderWrapperAttributes = [];
2420
}

‎tests/Traits/Configuration/LoadingPlaceholderConfigurationTest.php‎

Lines changed: 58 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -48,35 +48,87 @@ public function test_can_set_loading_placeholder_attributes(): void
4848
{
4949
$this->basicTable->setLoadingPlaceholderEnabled();
5050

51-
$this->assertSame(['default' => true], $this->basicTable->getLoadingPlaceHolderAttributes());
51+
$this->assertSame(['default' => true, 'default' => true, 'default-colors' => true, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderAttributes());
5252

5353
$this->basicTable->setLoadingPlaceHolderAttributes(['class' => 'test12345']);
5454

55-
$this->assertSame(['class' => 'test12345'], $this->basicTable->getLoadingPlaceHolderAttributes());
55+
$this->assertSame(['class' => 'test12345', 'default' => false, 'default-colors' => false, 'default-styling' => false], $this->basicTable->getLoadingPlaceHolderAttributes());
56+
57+
$this->basicTable->setLoadingPlaceHolderAttributes(['class' => 'test12345', 'default' => true, 'default-colors' => true, 'default-styling' => true]);
58+
59+
$this->assertSame(['class' => 'test12345', 'default' => true, 'default-colors' => true, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderAttributes());
60+
61+
$this->basicTable->setLoadingPlaceHolderAttributes(['class' => 'test12345', 'default' => false, 'default-colors' => false, 'default-styling' => true]);
62+
63+
$this->assertSame(['class' => 'test12345', 'default' => false, 'default-colors' => false, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderAttributes());
5664

5765
}
5866

5967
public function test_can_set_loading_placeholder_icon_attributes(): void
6068
{
6169
$this->basicTable->setLoadingPlaceholderEnabled();
6270

63-
$this->assertSame(['default' => true], $this->basicTable->getLoadingPlaceHolderIconAttributes());
71+
$this->assertSame(['default' => true, 'default-colors' => true, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderIconAttributes());
6472

6573
$this->basicTable->setLoadingPlaceHolderIconAttributes(['class' => 'test123']);
6674

67-
$this->assertSame(['class' => 'test123'], $this->basicTable->getLoadingPlaceHolderIconAttributes());
75+
$this->assertSame(['class' => 'test123', 'default' => false, 'default-colors' => false, 'default-styling' => false], $this->basicTable->getLoadingPlaceHolderIconAttributes());
76+
77+
$this->basicTable->setLoadingPlaceHolderIconAttributes(['class' => 'test123', 'default' => true, 'default-colors' => true, 'default-styling' => true]);
78+
79+
$this->assertSame(['class' => 'test123', 'default' => true, 'default-colors' => true, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderIconAttributes());
80+
81+
$this->basicTable->setLoadingPlaceHolderIconAttributes(['class' => 'test123', 'default' => false, 'default-colors' => false, 'default-styling' => true]);
82+
83+
$this->assertSame(['class' => 'test123', 'default' => false, 'default-colors' => false, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderIconAttributes());
6884

6985
}
7086

7187
public function test_can_set_loading_placeholder_wrapper_attributes(): void
7288
{
7389
$this->basicTable->setLoadingPlaceholderEnabled();
7490

75-
$this->assertSame(['default' => true], $this->basicTable->getLoadingPlaceHolderWrapperAttributes());
91+
$this->assertSame(['default' => true, 'default-colors' => true, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderWrapperAttributes());
92+
$this->assertSame(['default' => true, 'default-colors' => true, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderRowAttributes());
7693

7794
$this->basicTable->setLoadingPlaceHolderWrapperAttributes(['class' => 'test1234567-wrapper']);
7895

79-
$this->assertSame(['class' => 'test1234567-wrapper'], $this->basicTable->getLoadingPlaceHolderWrapperAttributes());
96+
$this->assertSame(['class' => 'test1234567-wrapper', 'default' => false, 'default-colors' => false, 'default-styling' => false], $this->basicTable->getLoadingPlaceHolderWrapperAttributes());
97+
$this->assertSame(['class' => 'test1234567-wrapper', 'default' => false, 'default-colors' => false, 'default-styling' => false], $this->basicTable->getLoadingPlaceHolderRowAttributes());
98+
99+
$this->basicTable->setLoadingPlaceHolderWrapperAttributes(['class' => 'test1234567-wrapper', 'default' => true, 'default-colors' => true, 'default-styling' => true]);
100+
101+
$this->assertSame(['class' => 'test1234567-wrapper', 'default' => true, 'default-colors' => true, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderWrapperAttributes());
102+
$this->assertSame(['class' => 'test1234567-wrapper', 'default' => true, 'default-colors' => true, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderRowAttributes());
103+
104+
$this->basicTable->setLoadingPlaceHolderWrapperAttributes(['class' => 'test1234567-wrapper', 'default' => false, 'default-colors' => false, 'default-styling' => true]);
105+
106+
$this->assertSame(['class' => 'test1234567-wrapper', 'default' => false, 'default-colors' => false, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderWrapperAttributes());
107+
$this->assertSame(['class' => 'test1234567-wrapper', 'default' => false, 'default-colors' => false, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderRowAttributes());
108+
109+
}
110+
111+
public function test_can_set_loading_placeholder_row_attributes(): void
112+
{
113+
$this->basicTable->setLoadingPlaceholderEnabled();
114+
115+
$this->assertSame(['default' => true, 'default-colors' => true, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderRowAttributes());
116+
117+
$this->basicTable->setLoadingPlaceHolderRowAttributes(['class' => 'test1234567-wrapper']);
118+
119+
$this->assertSame(['class' => 'test1234567-wrapper', 'default' => false, 'default-colors' => false, 'default-styling' => false], $this->basicTable->getLoadingPlaceHolderRowAttributes());
120+
$this->assertSame(['class' => 'test1234567-wrapper', 'default' => false, 'default-colors' => false, 'default-styling' => false], $this->basicTable->getLoadingPlaceHolderWrapperAttributes());
121+
122+
$this->basicTable->setLoadingPlaceHolderRowAttributes(['class' => 'test1234567-wrapper', 'default' => true, 'default-colors' => true, 'default-styling' => true]);
123+
124+
$this->assertSame(['class' => 'test1234567-wrapper', 'default' => true, 'default-colors' => true, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderRowAttributes());
125+
$this->assertSame(['class' => 'test1234567-wrapper', 'default' => true, 'default-colors' => true, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderWrapperAttributes());
126+
127+
$this->basicTable->setLoadingPlaceHolderRowAttributes(['class' => 'test1234567-wrapper', 'default' => false, 'default-colors' => false, 'default-styling' => true]);
128+
129+
$this->assertSame(['class' => 'test1234567-wrapper', 'default' => false, 'default-colors' => false, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderRowAttributes());
130+
$this->assertSame(['class' => 'test1234567-wrapper', 'default' => false, 'default-colors' => false, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderWrapperAttributes());
131+
80132
}
81133

82134
public function test_can_set_loading_placeholder_custom_blade(): void

0 commit comments

Comments
 (0)