Fix empty slots and floating widgets

invaders-xx · May 29, 2024 · 5b12206 · 5b12206
1 parent 3fcb469
commit 5b12206
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 36 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,3 @@
-
 ![invaders-xx-gridstack-dashboard](https://github.com/invaders-xx/filament-gridstack-dashboard/assets/604907/7b94f470-9e83-4cc5-95af-e5794db76feb)
 
 # Create and manage filament Dashboards using gridstack js
@@ -129,6 +128,21 @@ public function panel(Panel $panel): Panel
 }
 ```
 
+You can enable/disable floating widgets (default: true).
+
+```php
+use InvadersXX\FilamentGridstackDashboard\GridstackDashboardPlugin;
+
+public function panel(Panel $panel): Panel
+{
+    return $panel
+        ->plugins([
+            GridstackDashboardPlugin::make()
+                ->float(false),
+        ])
+}
+```
+
 You can configure the navigationIcon, the navigationGroup and the navigationSort
 
 ```php

diff --git a/resources/dist/components/filament-gridstack-dashboard.js b/resources/dist/components/filament-gridstack-dashboard.js
diff --git a/resources/js/index.js b/resources/js/index.js
@@ -3,6 +3,7 @@ import {GridStack} from 'gridstack';
 export default function gridStackDashboard({
                                                columns = 12,
                                                rows = 0,
+                                               float = true
                                            }) {
     return {
         grid: null,
@@ -20,6 +21,7 @@ export default function gridStackDashboard({
                 cellHeight: 80,
                 column: columns,
                 row: rows,
+                float: float,
                 acceptWidgets: true,
                 removable: '#trash',
                 alwaysShowResizeHandle: true,

diff --git a/resources/views/pages/dashboard.blade.php b/resources/views/pages/dashboard.blade.php
@@ -3,6 +3,7 @@
     use Filament\Widgets\WidgetConfiguration;
     $columns = $this->getColumns();
     $rows = $this->getRows();
+    $float = $this->getFloat();
 @endphp
 
 <x-filament-panels::page class="fi-dashboard-page">
@@ -14,7 +15,8 @@
                 ax-load-src="{{ FilamentAsset::getAlpineComponentSrc('filament-gridstack-dashboard-script', 'invaders-xx/filament-gridstack-dashboard') }}"
                 x-data="gridStackDashboard({
                     columns:{{ $columns }},
-                    rows: {{ $rows }}
+                    rows: {{ $rows }},
+                    float: {{ $float }}
                     })"
                 x-load-css="[@js(FilamentAsset::getStyleHref('filament-gridstack-dashboard-styles', package: 'invaders-xx/filament-gridstack-dashboard'))]"
                 class="text-center"
@@ -94,19 +96,26 @@ class="border-danger-500 bg-danger-500 flex items-center border p-6 text-center"
             @foreach ($this->buildGridItemsForDesign() as $row => $widgets)
                 <x-filament::grid :default="$columns" class="gap-6">
                     @foreach ($widgets as $widgetKey => $widget)
-                        @php
-                            $widgetClass = $normalizeWidgetClass($widget['id']);
-                        @endphp
-                        <x-filament::grid.column
-                                class="fi-wi-widget"
-                                :default="$widget['w']">
-                            @livewire($widgetClass,
-                            [...$widget['id'] instanceof \Filament\Widgets\WidgetConfiguration?
-                            [...$widget['id']->widget::getDefaultProperties(), ...$widget['id']->getProperties()]:
-                            $widget['id']::getDefaultProperties(),...$data,],
-                            key("{$widgetClass}-{$widgetKey}")
-                            )
-                        </x-filament::grid.column>
+                        @if($widget['id']===null)
+                            <x-filament::grid.column
+                                    class="fi-wi-widget"
+                                    :default="$widget['w']">
+                            </x-filament::grid.column>
+                        @else
+                            @php
+                                $widgetClass = $normalizeWidgetClass($widget['id']);
+                            @endphp
+                            <x-filament::grid.column
+                                    class="fi-wi-widget"
+                                    :default="$widget['w']">
+                                @livewire($widgetClass,
+                                [...$widget['id'] instanceof \Filament\Widgets\WidgetConfiguration?
+                                [...$widget['id']->widget::getDefaultProperties(), ...$widget['id']->getProperties()]:
+                                $widget['id']::getDefaultProperties(),...$data,],
+                                key("{$widgetClass}-{$widgetKey}")
+                                )
+                            </x-filament::grid.column>
+                        @endif
                     @endforeach
                 </x-filament::grid>
             @endforeach

diff --git a/src/Filament/Pages/Dashboard.php b/src/Filament/Pages/Dashboard.php
@@ -43,6 +43,11 @@ public function getRows(): int
         return GridstackDashboardPlugin::get()->getRows() ?? 0;
     }
 
+    public function getFloat(): bool
+    {
+        return GridstackDashboardPlugin::get()->getFloat() ?? false;
+    }
+
     public function saveLayout(): void
     {
         $data = collect($this->gridItems)->sortBy([
@@ -90,34 +95,54 @@ public function getFilteredWidgets(): array
 
     public function buildGridItemsForDesign(): array
     {
-        $return = [];
+        $data = [];
         $this->gridItems = [];
         foreach ($this->getVisibleWidgetsForGrid() as $widget) {
-            $widgetInstance = app()->make($widget['widget']);
-
-            $label = match (true) {
-                $widgetInstance instanceof TableWidget => (string) invade($widgetInstance)->makeTable()->getHeading(),
-                ! ($widgetInstance instanceof TableWidget) && $widgetInstance instanceof Widget && method_exists(
-                    $widgetInstance,
-                    'getHeading'
-                ) => (string) invade($widgetInstance)->getHeading(),
-                default => str($widget['widget'])
-                    ->afterLast('\\')
-                    ->headline()
-                    ->toString()
-            };
+            if (! isset($data[$widget['y']])) {
+                $data[$widget['y']] = [];
+            }
+            $label = null;
+            if ($widget['widget']) {
+                $widgetInstance = app()->make($widget['widget']);
+
+                $label = match (true) {
+                    $widgetInstance instanceof TableWidget => (string) invade($widgetInstance)->makeTable()->getHeading(),
+                    ! ($widgetInstance instanceof TableWidget) && $widgetInstance instanceof Widget && method_exists(
+                        $widgetInstance,
+                        'getHeading'
+                    ) => (string) invade($widgetInstance)->getHeading(),
+                    default => str($widget['widget'])
+                        ->afterLast('\\')
+                        ->headline()
+                        ->toString()
+                };
+            }
             $item['id'] = $widget['widget'];
             $item['w'] = $widget['w'];
             $item['x'] = $widget['x'];
             $item['y'] = $widget['y'];
             $item['content'] = $label;
             $item['resizeHandles'] = 'e,w';
-            if (! isset($return[$item['y']])) {
-                $return[$item['y']] = [];
-            }
-            $return[$item['y']][] = $item;
+            $data[$item['y']][] = $item;
             $this->gridItems[] = $item;
         }
+        $return = [];
+        foreach ($data as $row => $widgets) {
+            $pos = 0;
+            foreach ($widgets as $widget) {
+                if ($pos !== $widget['x']) {
+                    $size = abs($widget['x'] - $pos);
+                    $return[$row][] = [
+                        'id' => null,
+                        'y' => $row,
+                        'x' => $pos,
+                        'w' => $size,
+                    ];
+                }
+                $pos = $widget['x'] + $widget['w'];
+                $return[$row][] = $widget;
+            }
+        }
 
         return $return;
     }

diff --git a/src/GridstackDashboardPlugin.php b/src/GridstackDashboardPlugin.php
@@ -27,6 +27,8 @@ class GridstackDashboardPlugin implements Plugin
 
     protected int|Closure|null $rows = 0;
 
+    protected bool|Closure|null $float = true;
+
     public static function make(): static
     {
         return app(static::class);
@@ -81,6 +83,13 @@ public function rows(int|Closure $rows): static
         return $this;
     }
 
+    public function float(bool|Closure $float): static
+    {
+        $this->float = $float;
+
+        return $this;
+    }
+
     public function navigationSort(int|Closure $navigationSort): static
     {
         $this->navigationSort = $navigationSort;
@@ -137,6 +146,11 @@ public function getRows(): int
         return $this->evaluate($this->rows);
     }
 
+    public function getFloat(): bool
+    {
+        return $this->evaluate($this->float);
+    }
+
     public function boot(Panel $panel): void
     {
     }