Set actions position (#1889)

* Add displayActionsInToolbar and actionsPosition * Add docs and tests for setActionsInToolbar * Fix styling --------- Co-authored-by: lrljoe <[email protected]>
rappasoft · Aug 25, 2024 · 8cafe98 · 8cafe98
1 parent 683666f
commit 8cafe98
Show file tree

Hide file tree

Showing 11 changed files with 376 additions and 62 deletions.
diff --git a/docs/misc/actions.md b/docs/misc/actions.md
@@ -21,6 +21,61 @@ This is used to set attributes for the "div" that wraps all defined Action Butto
     }
 ```
 
+### setActionsInToolbarEnabled
+
+Displays the Actions within the Toolbar.  Default is displaying above the Toolbar.
+
+```php
+    public function configure(): void
+    {
+        $this->setActionsInToolbarEnabled();
+    }
+```
+
+### setActionsInToolbarDisabled
+
+Displays the Actions above the Toolbar, default behaviour
+```php
+    public function configure(): void
+    {
+        $this->setActionsInToolbarDisabled();
+    }
+```
+
+
+### setActionsLeft
+
+Displays the Actions justified to the left
+
+```php
+    public function configure(): void
+    {
+        $this->setActionsLeft();
+    }
+```
+
+### setActionsCenter
+
+Displays the Actions justified to the center
+
+```php
+    public function configure(): void
+    {
+        $this->setActionsCenter();
+    }
+```
+
+### setActionsRight
+
+Displays the Actions justified to the right
+
+```php
+    public function configure(): void
+    {
+        $this->setActionsRight();
+    }
+```
+
 ### actions()
 
 Define your actions using the actions() method:

diff --git a/resources/views/components/includes/actions.blade.php b/resources/views/components/includes/actions.blade.php
@@ -1,9 +1,14 @@
 <div {{ $attributes
-            ->merge($this->getActionWrapperAttributes())
-            ->class(['flex flex-cols justify-center' => $this->isTailwind && $this->getActionWrapperAttributes()['default-styling'] ?? true])
-            ->class(['' => $this->isTailwind && $this->getActionWrapperAttributes()['default-colors'] ?? true])
-            ->class(['d-flex flex-cols justify-center' => $this->isBootstrap && $this->getActionWrapperAttributes()['default-styling'] ?? true])
-            ->class(['' => $this->isBootstrap && $this->getActionWrapperAttributes()['default-colors'] ?? true])
+            ->merge($this->getActionWrapperAttributes)
+            ->class(['flex flex-cols py-2 space-x-2' => $this->isTailwind && $this->getActionWrapperAttributes['default-styling'] ?? true])
+            ->class(['' => $this->isTailwind && $this->getActionWrapperAttributes['default-colors'] ?? true])
+            ->class(['d-flex flex-cols py-2 space-x-2' => $this->isBootstrap && $this->getActionWrapperAttributes['default-styling'] ?? true])
+            ->class(['' => $this->isBootstrap && $this->getActionWrapperAttributes['default-colors'] ?? true])
+            ->class(['justify-start' => $this->getActionsPosition == 'left'])
+            ->class(['justify-center' => $this->getActionsPosition == 'center'])
+            ->class(['justify-end' => $this->getActionsPosition == 'right'])
+            ->class(['pl-2' => $this->showActionsInToolbar && $this->getActionsPosition == 'left'])
+            ->class(['pr-2' => $this->showActionsInToolbar && $this->getActionsPosition == 'right'])
             ->except(['default-styling','default-colors'])
         }} >
     @foreach($this->getActions as $action)

diff --git a/resources/views/components/tools/toolbar.blade.php b/resources/views/components/tools/toolbar.blade.php
@@ -36,6 +36,10 @@
             <x-livewire-tables::tools.toolbar.items.filter-button />
         @endif
 
+        @if($this->hasActions && $this->showActionsInToolbar && $this->getActionsPosition == 'left')
+            <x-livewire-tables::includes.actions/>    
+        @endif
+
         @if ($this->hasConfigurableAreaFor('toolbar-left-end'))
             <div x-cloak x-show="!currentlyReorderingStatus" @class([
                 'mb-3 mb-md-0 input-group' => $this->isBootstrap,
@@ -56,6 +60,10 @@
             @include($this->getConfigurableAreaFor('toolbar-right-start'), $this->getParametersForConfigurableArea('toolbar-right-start'))
         @endif
 
+        @if($this->hasActions && $this->showActionsInToolbar && $this->getActionsPosition == 'right')
+            <x-livewire-tables::includes.actions/>    
+        @endif
+
         @if ($this->showBulkActionsDropdownAlpine() && $this->shouldAlwaysHideBulkActionsDropdownOption != true)
             <x-livewire-tables::tools.toolbar.items.bulk-actions />
         @endif

diff --git a/resources/views/datatable.blade.php b/resources/views/datatable.blade.php
@@ -8,7 +8,7 @@
 
 <div x-data="laravellivewiretable($wire, '{{ $this->showBulkActionsDropdownAlpine() }}', '{{ $tableId }}', '{{ $primaryKey }}')">
     <x-livewire-tables::wrapper :component="$this" :tableName="$tableName" :$primaryKey :$isTailwind :$isBootstrap :$isBootstrap4 :$isBootstrap5>
-        @if(method_exists($this,'hasActions') && $this->hasActions())
+        @if($this->hasActions && !$this->showActionsInToolbar)
             <x-livewire-tables::includes.actions/>    
         @endif
 

diff --git a/src/Traits/Configuration/ActionsConfiguration.php b/src/Traits/Configuration/ActionsConfiguration.php
@@ -0,0 +1,52 @@
+<?php
+
+namespace Rappasoft\LaravelLivewireTables\Traits\Configuration;
+
+trait ActionsConfiguration
+{
+    public function setActionWrapperAttributes(array $actionWrapperAttributes): self
+    {
+        $this->actionWrapperAttributes = [...$this->actionWrapperAttributes, ...$actionWrapperAttributes];
+
+        return $this;
+    }
+
+    public function setActionsInToolbar(bool $status): self
+    {
+        $this->displayActionsInToolbar = $status;
+
+        return $this;
+    }
+
+    public function setActionsInToolbarEnabled(): self
+    {
+        return $this->setActionsInToolbar(true);
+    }
+
+    public function setActionsInToolbarDisabled(): self
+    {
+        return $this->setActionsInToolbar(false);
+    }
+
+    protected function setActionsPosition(string $position): self
+    {
+        $this->actionsPosition = ($position == 'left' || $position == 'center' || $position == 'right') ? $position : 'right';
+
+        return $this;
+    }
+
+    public function setActionsLeft(): self
+    {
+        return $this->setActionsPosition('left');
+    }
+
+    public function setActionsCenter(): self
+    {
+        return $this->setActionsPosition('center');
+    }
+
+    public function setActionsRight(): self
+    {
+        return $this->setActionsPosition('right');
+    }
+}
diff --git a/src/Traits/Helpers/ActionsHelpers.php b/src/Traits/Helpers/ActionsHelpers.php
@@ -0,0 +1,46 @@
+<?php
+
+namespace Rappasoft\LaravelLivewireTables\Traits\Helpers;
+
+use Illuminate\Support\Collection;
+use Livewire\Attributes\Computed;
+use Rappasoft\LaravelLivewireTables\Views\Action;
+
+trait ActionsHelpers
+{
+    #[Computed]
+    public function showActionsInToolbar(): bool
+    {
+        return $this->displayActionsInToolbar ?? false;
+    }
+
+    #[Computed]
+    public function getActionsPosition(): string
+    {
+        return $this->actionsPosition ?? 'right';
+    }
+
+    #[Computed]
+    public function getActionWrapperAttributes(): array
+    {
+        return [...['class' => '', 'default-styling' => true, 'default-colors' => true], ...$this->actionWrapperAttributes];
+    }
+
+    #[Computed]
+    public function hasActions(): bool
+    {
+        return (new Collection($this->actions()))
+            ->filter(fn ($action) => $action instanceof Action)->count() > 0;
+    }
+
+    #[Computed]
+    public function getActions(): Collection
+    {
+        return (new Collection($this->actions()))
+            ->filter(fn ($action) => $action instanceof Action)
+            ->each(function (Action $action, int $key) {
+                $action->setTheme($this->getTheme());
+            });
+
+    }
+}
diff --git a/src/Traits/WithActions.php b/src/Traits/WithActions.php
@@ -2,47 +2,22 @@
 
 namespace Rappasoft\LaravelLivewireTables\Traits;
 
-use Illuminate\Support\Collection;
-use Livewire\Attributes\Computed;
-use Rappasoft\LaravelLivewireTables\Views\Action;
+use Rappasoft\LaravelLivewireTables\Traits\Configuration\ActionsConfiguration;
+use Rappasoft\LaravelLivewireTables\Traits\Helpers\ActionsHelpers;
 
 trait WithActions
 {
-    protected array $actionWrapperAttributes = ['default-styling' => true, 'default-colors' => true];
+    use ActionsConfiguration,
+        ActionsHelpers;
 
-    protected function actions(): array
-    {
-        return [];
-    }
+    protected array $actionWrapperAttributes = ['class' => '', 'default-styling' => true, 'default-colors' => true];
 
-    public function setActionWrapperAttributes(array $actionWrapperAttributes): self
-    {
-        $this->actionWrapperAttributes = [...['default-styling' => true, 'default-colors' => true], ...$actionWrapperAttributes];
+    protected bool $displayActionsInToolbar = false;
 
-        return $this;
-    }
+    protected string $actionsPosition = 'right';
 
-    #[Computed]
-    public function getActionWrapperAttributes(): array
-    {
-        return [...['default-styling' => true, 'default-colors' => true], ...$this->actionWrapperAttributes];
-    }
-
-    #[Computed]
-    public function hasActions(): bool
-    {
-        return (new Collection($this->actions()))
-            ->filter(fn ($action) => $action instanceof Action)->count() > 0;
-    }
-
-    #[Computed]
-    public function getActions(): Collection
+    protected function actions(): array
     {
-        return (new Collection($this->actions()))
-            ->filter(fn ($action) => $action instanceof Action)
-            ->each(function (Action $action, int $key) {
-                $action->setTheme($this->getTheme());
-            });
-
+        return [];
     }
 }
diff --git a/src/Views/Traits/Actions/HasActionAttributes.php b/src/Views/Traits/Actions/HasActionAttributes.php
@@ -6,18 +6,18 @@
 
 trait HasActionAttributes
 {
-    protected array $actionAttributes = ['default-styling' => true, 'default-colors' => true];
+    protected array $actionAttributes = ['class' => '', 'default-styling' => true, 'default-colors' => true];
 
     public function setActionAttributes(array $actionAttributes): self
     {
-        $this->actionAttributes = [...['default-styling' => true, 'default-colors' => true], ...$actionAttributes];
+        $this->actionAttributes = [...$this->actionAttributes, ...$actionAttributes];
 
         return $this;
     }
 
     public function getActionAttributes(): ComponentAttributeBag
     {
-        $actionAttributes = [...['default-styling' => true, 'default-colors' => true], ...$this->actionAttributes];
+        $actionAttributes = [...['class' => '', 'default-styling' => true, 'default-colors' => true], ...$this->actionAttributes];
 
         if (! $this->hasWireAction() && method_exists($this, 'getRoute')) {
             $actionAttributes['href'] = $this->getRoute();

diff --git a/src/Views/Traits/Core/HasIcon.php b/src/Views/Traits/Core/HasIcon.php
@@ -9,7 +9,7 @@ trait HasIcon
 {
     public ?string $icon;
 
-    public array $iconAttributes = ['default-styling' => true];
+    public array $iconAttributes = ['class' => '', 'default-styling' => true];
 
     public bool $iconRight = true;
 
@@ -32,14 +32,14 @@ public function getIcon(): string
 
     public function setIconAttributes(array $iconAttributes): self
     {
-        $this->iconAttributes = [...['default-styling' => true], ...$iconAttributes];
+        $this->iconAttributes = [...$this->iconAttributes, ...$iconAttributes];
 
         return $this;
     }
 
     public function getIconAttributes(): ComponentAttributeBag
     {
-        return new ComponentAttributeBag([...['default-styling' => true], ...$this->iconAttributes]);
+        return new ComponentAttributeBag([...['class' => '', 'default-styling' => true], ...$this->iconAttributes]);
     }
 
     public function getIconRight(): bool