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]>
rappasoft · Oct 20, 2024 · c134e6a · c134e6a
1 parent 9fc6ad8
commit c134e6a
Show file tree

Hide file tree

Showing 10 changed files with 204 additions and 78 deletions.
diff --git a/docs/misc/loading-placeholder.md b/docs/misc/loading-placeholder.md
@@ -47,7 +47,9 @@ You may use this method to set custom text for the placeholder:
         $this->setLoadingPlaceholderContent('Text To Display');
     }
 ```
-### setLoadingPlaceHolderWrapperAttributes
+### setLoadingPlaceHolderWrapperAttributes (Deprecated)
+
+This is replaced by setLoadingPlaceHolderRowAttributes, but remains functional.
 
 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.
 
@@ -62,6 +64,22 @@ This method allows you to customise the attributes for the &lt;tr&gt; element us
 
 ```
 
+### setLoadingPlaceHolderRowAttributes
+
+Replaces setLoadingPlaceHolderWrapperAttributes
+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.
+
+```php
+    public function configure(): void
+    {
+        $this->setLoadingPlaceHolderRowAttributes([
+            'class' => 'text-bold',
+            'default' => false,
+        ]);
+    }
+
+```
+
 ### setLoadingPlaceHolderIconAttributes
 
 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.

diff --git a/resources/lang/en.json b/resources/lang/en.json
@@ -11,6 +11,7 @@
     "livewire-tables::Deselect All": "Deselect All",
     "livewire-tables::Done Reordering": "Done Reordering",
     "livewire-tables::Filters": "Filters",
+    "livewire-tables::loading": "Loading",
     "livewire-tables::max": "Max",
     "livewire-tables::min": "Min",
     "livewire-tables::not_applicable": "N/A",
@@ -45,6 +46,7 @@
     "Deselect All": "Deselect All",
     "Done Reordering": "Done Reordering",
     "Filters": "Filters",
+    "loading": "Loading",
     "max": "Max",
     "min": "Min",
     "not_applicable": "N/A",

diff --git a/resources/views/components/includes/loading.blade.php b/resources/views/components/includes/loading.blade.php
@@ -1,35 +1,38 @@
-@aware(['isTailwind', 'isBootstrap', 'tableName', 'component'])
+@aware(['tableName'])
 @props(['colCount' => 1])
 
 @php
-$customAttributes['loader-wrapper'] = $this->getLoadingPlaceHolderWrapperAttributes();
-$customAttributes['loader-icon'] = $this->getLoadingPlaceHolderIconAttributes();
+$loaderRow = $this->getLoadingPlaceHolderRowAttributes();
+$loaderCell = $this->getLoadingPlaceHolderCellAttributes();
+$loaderIcon = $this->getLoadingPlaceHolderIconAttributes();
 @endphp
-@if($this->hasLoadingPlaceholderBlade())
-    @include($this->getLoadingPlaceHolderBlade(), ['colCount' => $colCount])
-@else
 
-    <tr wire:key="{{ $tableName }}-loader"
-    {{
-        $attributes->merge($customAttributes['loader-wrapper'])
-            ->class(['hidden w-full text-center h-screen place-items-center align-middle' => $isTailwind && ($customAttributes['loader-wrapper']['default'] ?? true)])
-            ->class(['d-none w-100 text-center h-100 align-items-center' => $isBootstrap && ($customAttributes['loader-wrapper']['default'] ?? true)]);
-    }}
-    wire:loading.class.remove="hidden d-none"
-    >
-        <td colspan="{{ $colCount }}" wire:key="{{ $tableName }}-loader-column" >
+<tr wire:key="{{ $tableName }}-loader" wire:loading.class.remove="hidden d-none" {{
+    $attributes->merge($loaderRow)
+        ->class(['hidden w-full text-center place-items-center align-middle' => $this->isTailwind && ($loaderRow['default'] ?? true)])
+        ->class(['d-none w-100 text-center align-items-center' => $this->isBootstrap && ($loaderRow['default'] ?? true)])
+        ->except(['default','default-styling','default-colors'])
+}}>
+    <td colspan="{{ $colCount }}" wire:key="{{ $tableName }}-loader-column" {{
+        $attributes->merge($loaderCell)
+            ->class(['py-4' => $this->isTailwind && ($loaderCell['default'] ?? true)])
+            ->class(['py-4' => $this->isBootstrap && ($loaderCell['default'] ?? true)])
+            ->except(['default','default-styling','default-colors', 'colspan','wire:key'])
+    }}>
+        @if($this->hasLoadingPlaceholderBlade())
+            @include($this->getLoadingPlaceHolderBlade(), ['colCount' => $colCount])
+        @else
+
             <div class="h-min self-center align-middle text-center">
-                <div class="lds-hourglass"
-                {{
-                        $attributes->merge($customAttributes['loader-icon'])
-                            ->class(['lds-hourglass' => $isTailwind && ($customAttributes['loader-icon']['default'] ?? true)])
-                            ->class(['lds-hourglass' => $isBootstrap && ($customAttributes['loader-icon']['default'] ?? true)])
+                <div class="lds-hourglass"{{
+                        $attributes->merge($loaderIcon)
+                            ->class(['lds-hourglass' => $this->isTailwind && ($loaderIcon['default'] ?? true)])
+                            ->class(['lds-hourglass' => $this->isBootstrap && ($loaderIcon['default'] ?? true)])
                             ->except(['default','default-styling','default-colors']);
-                }}
-                ></div>
-                <div>{{ $this->getLoadingPlaceholderContent() }}</div>
+                }}></div>
+                <div>{!! $this->getLoadingPlaceholderContent() !!}</div>
             </div>
-        </td>
-    </tr>
+        @endif
+    </td>
+</tr>
 
-@endif
diff --git a/src/Traits/Configuration/LoadingPlaceholderConfiguration.php b/src/Traits/Configuration/LoadingPlaceholderConfiguration.php
@@ -32,27 +32,6 @@ public function setLoadingPlaceholderContent(string $content): self
         return $this;
     }
 
-    public function setLoadingPlaceHolderAttributes(array $attributes): self
-    {
-        $this->loadingPlaceHolderAttributes = $attributes;
-
-        return $this;
-    }
-
-    public function setLoadingPlaceHolderIconAttributes(array $attributes): self
-    {
-        $this->loadingPlaceHolderIconAttributes = $attributes;
-
-        return $this;
-    }
-
-    public function setLoadingPlaceHolderWrapperAttributes(array $attributes): self
-    {
-        $this->loadingPlaceHolderWrapperAttributes = $attributes;
-
-        return $this;
-    }
-
     public function setLoadingPlaceholderBlade(string $customBlade): self
     {
         $this->loadingPlaceholderBlade = $customBlade;

diff --git a/src/Traits/Helpers/LoadingPlaceholderHelpers.php b/src/Traits/Helpers/LoadingPlaceholderHelpers.php
@@ -16,23 +16,7 @@ public function getDisplayLoadingPlaceholder(): bool
 
     public function getLoadingPlaceholderContent(): string
     {
-        return $this->loadingPlaceholderContent ?? __('livewire-tables:loading');
-    }
-
-    public function getLoadingPlaceholderAttributes(): array
-    {
-        return count($this->loadingPlaceHolderAttributes) ? $this->loadingPlaceHolderAttributes : ['default' => true];
-
-    }
-
-    public function getLoadingPlaceHolderIconAttributes(): array
-    {
-        return count($this->loadingPlaceHolderIconAttributes) ? $this->loadingPlaceHolderIconAttributes : ['default' => true];
-    }
-
-    public function getLoadingPlaceHolderWrapperAttributes(): array
-    {
-        return count($this->loadingPlaceHolderWrapperAttributes) ? $this->loadingPlaceHolderWrapperAttributes : ['default' => true];
+        return $this->loadingPlaceholderContent ?? __('livewire-tables::loading');
     }
 
     public function hasLoadingPlaceholderBlade(): bool

diff --git a/src/Traits/Styling/Configuration/LoadingPlaceholderStylingConfiguration.php b/src/Traits/Styling/Configuration/LoadingPlaceholderStylingConfiguration.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace Rappasoft\LaravelLivewireTables\Traits\Styling\Configuration;
+
+trait LoadingPlaceholderStylingConfiguration
+{
+    public function setLoadingPlaceHolderAttributes(array $attributes): self
+    {
+        $this->setCustomAttributes('loadingPlaceHolderAttributes', [...$this->getCustomAttributes(propertyName: 'loadingPlaceHolderAttributes', default: false, classicMode: true), ...$attributes]);
+
+        return $this;
+    }
+
+    public function setLoadingPlaceHolderIconAttributes(array $attributes): self
+    {
+        $this->setCustomAttributes('loadingPlaceHolderIconAttributes', [...$this->getCustomAttributes(propertyName: 'loadingPlaceHolderIconAttributes', default: false, classicMode: true), ...$attributes]);
+
+        return $this;
+    }
+
+    public function setLoadingPlaceHolderRowAttributes(array $attributes): self
+    {
+        $this->setCustomAttributes('loadingPlaceHolderRowAttributes', [...$this->getCustomAttributes(propertyName: 'loadingPlaceHolderRowAttributes', default: false, classicMode: true), ...$attributes]);
+
+        return $this;
+    }
+
+    public function setLoadingPlaceHolderWrapperAttributes(array $attributes): self
+    {
+        $this->setCustomAttributes('loadingPlaceHolderRowAttributes', [...$this->getCustomAttributes(propertyName: 'loadingPlaceHolderRowAttributes', default: false, classicMode: true), ...$attributes]);
+
+        return $this;
+    }
+}
diff --git a/src/Traits/Styling/HasLoadingPlaceholderStyling.php b/src/Traits/Styling/HasLoadingPlaceholderStyling.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace Rappasoft\LaravelLivewireTables\Traits\Styling;
+
+use Rappasoft\LaravelLivewireTables\Traits\Styling\Configuration\LoadingPlaceholderStylingConfiguration;
+use Rappasoft\LaravelLivewireTables\Traits\Styling\Helpers\LoadingPlaceholderStylingHelpers;
+
+trait HasLoadingPlaceholderStyling
+{
+    use LoadingPlaceholderStylingConfiguration,
+        LoadingPlaceholderStylingHelpers;
+
+    protected array $loadingPlaceHolderAttributes = [];
+
+    protected array $loadingPlaceHolderIconAttributes = [];
+
+    protected array $loadingPlaceHolderWrapperAttributes = [];
+
+    protected array $loadingPlaceHolderRowAttributes = [];
+
+    protected array $loadingPlaceHolderCellAttributes = ['class' => '', 'default' => true];
+}
diff --git a/src/Traits/Styling/Helpers/LoadingPlaceholderStylingHelpers.php b/src/Traits/Styling/Helpers/LoadingPlaceholderStylingHelpers.php
@@ -0,0 +1,36 @@
+<?php
+
+namespace Rappasoft\LaravelLivewireTables\Traits\Styling\Helpers;
+
+use Livewire\Attributes\Computed;
+
+trait LoadingPlaceholderStylingHelpers
+{
+    public function getLoadingPlaceholderAttributes(): array
+    {
+        return $this->getCustomAttributes(propertyName: 'loadingPlaceHolderAttributes', default: true, classicMode: true);
+
+    }
+
+    public function getLoadingPlaceHolderIconAttributes(): array
+    {
+        return $this->getCustomAttributes(propertyName: 'loadingPlaceHolderIconAttributes', default: true, classicMode: true);
+
+    }
+
+    public function getLoadingPlaceHolderWrapperAttributes(): array
+    {
+        return $this->getCustomAttributes(propertyName: 'loadingPlaceHolderRowAttributes', default: true, classicMode: true);
+    }
+
+    public function getLoadingPlaceHolderRowAttributes(): array
+    {
+        return $this->getCustomAttributes(propertyName: 'loadingPlaceHolderRowAttributes', default: true, classicMode: true);
+    }
+
+    public function getLoadingPlaceHolderCellAttributes(): array
+    {
+        return $this->getCustomAttributes(propertyName: 'loadingPlaceHolderCellAttributes', default: true, classicMode: true);
+
+    }
+}
diff --git a/src/Traits/WithLoadingPlaceholder.php b/src/Traits/WithLoadingPlaceholder.php
@@ -4,21 +4,17 @@
 
 use Rappasoft\LaravelLivewireTables\Traits\Configuration\LoadingPlaceholderConfiguration;
 use Rappasoft\LaravelLivewireTables\Traits\Helpers\LoadingPlaceholderHelpers;
+use Rappasoft\LaravelLivewireTables\Traits\Styling\HasLoadingPlaceholderStyling;
 
 trait WithLoadingPlaceholder
 {
     use LoadingPlaceholderConfiguration,
-        LoadingPlaceholderHelpers;
+        LoadingPlaceholderHelpers,
+        HasLoadingPlaceholderStyling;
 
     protected bool $displayLoadingPlaceholder = false;
 
     protected string $loadingPlaceholderContent = 'Loading';
 
     protected ?string $loadingPlaceholderBlade = null;
-
-    protected array $loadingPlaceHolderAttributes = [];
-
-    protected array $loadingPlaceHolderIconAttributes = [];
-
-    protected array $loadingPlaceHolderWrapperAttributes = [];
 }
diff --git a/tests/Traits/Configuration/LoadingPlaceholderConfigurationTest.php b/tests/Traits/Configuration/LoadingPlaceholderConfigurationTest.php
@@ -48,35 +48,87 @@ public function test_can_set_loading_placeholder_attributes(): void
     {
         $this->basicTable->setLoadingPlaceholderEnabled();
 
-        $this->assertSame(['default' => true], $this->basicTable->getLoadingPlaceHolderAttributes());
+        $this->assertSame(['default' => true, 'default' => true, 'default-colors' => true, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderAttributes());
 
         $this->basicTable->setLoadingPlaceHolderAttributes(['class' => 'test12345']);
 
-        $this->assertSame(['class' => 'test12345'], $this->basicTable->getLoadingPlaceHolderAttributes());
+        $this->assertSame(['class' => 'test12345', 'default' => false, 'default-colors' => false, 'default-styling' => false], $this->basicTable->getLoadingPlaceHolderAttributes());
+
+        $this->basicTable->setLoadingPlaceHolderAttributes(['class' => 'test12345', 'default' => true, 'default-colors' => true, 'default-styling' => true]);
+
+        $this->assertSame(['class' => 'test12345', 'default' => true, 'default-colors' => true, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderAttributes());
+
+        $this->basicTable->setLoadingPlaceHolderAttributes(['class' => 'test12345', 'default' => false, 'default-colors' => false, 'default-styling' => true]);
+
+        $this->assertSame(['class' => 'test12345', 'default' => false, 'default-colors' => false, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderAttributes());
 
     }
 
     public function test_can_set_loading_placeholder_icon_attributes(): void
     {
         $this->basicTable->setLoadingPlaceholderEnabled();
 
-        $this->assertSame(['default' => true], $this->basicTable->getLoadingPlaceHolderIconAttributes());
+        $this->assertSame(['default' => true, 'default-colors' => true, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderIconAttributes());
 
         $this->basicTable->setLoadingPlaceHolderIconAttributes(['class' => 'test123']);
 
-        $this->assertSame(['class' => 'test123'], $this->basicTable->getLoadingPlaceHolderIconAttributes());
+        $this->assertSame(['class' => 'test123', 'default' => false, 'default-colors' => false, 'default-styling' => false], $this->basicTable->getLoadingPlaceHolderIconAttributes());
+
+        $this->basicTable->setLoadingPlaceHolderIconAttributes(['class' => 'test123', 'default' => true, 'default-colors' => true, 'default-styling' => true]);
+
+        $this->assertSame(['class' => 'test123', 'default' => true, 'default-colors' => true, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderIconAttributes());
+
+        $this->basicTable->setLoadingPlaceHolderIconAttributes(['class' => 'test123', 'default' => false, 'default-colors' => false, 'default-styling' => true]);
+
+        $this->assertSame(['class' => 'test123', 'default' => false, 'default-colors' => false, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderIconAttributes());
 
     }
 
     public function test_can_set_loading_placeholder_wrapper_attributes(): void
     {
         $this->basicTable->setLoadingPlaceholderEnabled();
 
-        $this->assertSame(['default' => true], $this->basicTable->getLoadingPlaceHolderWrapperAttributes());
+        $this->assertSame(['default' => true, 'default-colors' => true, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderWrapperAttributes());
+        $this->assertSame(['default' => true, 'default-colors' => true, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderRowAttributes());
 
         $this->basicTable->setLoadingPlaceHolderWrapperAttributes(['class' => 'test1234567-wrapper']);
 
-        $this->assertSame(['class' => 'test1234567-wrapper'], $this->basicTable->getLoadingPlaceHolderWrapperAttributes());
+        $this->assertSame(['class' => 'test1234567-wrapper', 'default' => false, 'default-colors' => false, 'default-styling' => false], $this->basicTable->getLoadingPlaceHolderWrapperAttributes());
+        $this->assertSame(['class' => 'test1234567-wrapper', 'default' => false, 'default-colors' => false, 'default-styling' => false], $this->basicTable->getLoadingPlaceHolderRowAttributes());
+
+        $this->basicTable->setLoadingPlaceHolderWrapperAttributes(['class' => 'test1234567-wrapper', 'default' => true, 'default-colors' => true, 'default-styling' => true]);
+
+        $this->assertSame(['class' => 'test1234567-wrapper', 'default' => true, 'default-colors' => true, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderWrapperAttributes());
+        $this->assertSame(['class' => 'test1234567-wrapper', 'default' => true, 'default-colors' => true, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderRowAttributes());
+
+        $this->basicTable->setLoadingPlaceHolderWrapperAttributes(['class' => 'test1234567-wrapper', 'default' => false, 'default-colors' => false, 'default-styling' => true]);
+
+        $this->assertSame(['class' => 'test1234567-wrapper', 'default' => false, 'default-colors' => false, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderWrapperAttributes());
+        $this->assertSame(['class' => 'test1234567-wrapper', 'default' => false, 'default-colors' => false, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderRowAttributes());
+
+    }
+
+    public function test_can_set_loading_placeholder_row_attributes(): void
+    {
+        $this->basicTable->setLoadingPlaceholderEnabled();
+
+        $this->assertSame(['default' => true, 'default-colors' => true, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderRowAttributes());
+
+        $this->basicTable->setLoadingPlaceHolderRowAttributes(['class' => 'test1234567-wrapper']);
+
+        $this->assertSame(['class' => 'test1234567-wrapper', 'default' => false, 'default-colors' => false, 'default-styling' => false], $this->basicTable->getLoadingPlaceHolderRowAttributes());
+        $this->assertSame(['class' => 'test1234567-wrapper', 'default' => false, 'default-colors' => false, 'default-styling' => false], $this->basicTable->getLoadingPlaceHolderWrapperAttributes());
+
+        $this->basicTable->setLoadingPlaceHolderRowAttributes(['class' => 'test1234567-wrapper', 'default' => true, 'default-colors' => true, 'default-styling' => true]);
+
+        $this->assertSame(['class' => 'test1234567-wrapper', 'default' => true, 'default-colors' => true, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderRowAttributes());
+        $this->assertSame(['class' => 'test1234567-wrapper', 'default' => true, 'default-colors' => true, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderWrapperAttributes());
+
+        $this->basicTable->setLoadingPlaceHolderRowAttributes(['class' => 'test1234567-wrapper', 'default' => false, 'default-colors' => false, 'default-styling' => true]);
+
+        $this->assertSame(['class' => 'test1234567-wrapper', 'default' => false, 'default-colors' => false, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderRowAttributes());
+        $this->assertSame(['class' => 'test1234567-wrapper', 'default' => false, 'default-colors' => false, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderWrapperAttributes());
+
     }
 
     public function test_can_set_loading_placeholder_custom_blade(): void