Skip to content

Commit

Permalink
Add columns function
Browse files Browse the repository at this point in the history
Add columns function to plugin to define the number of columns in the grid
  • Loading branch information
invaders-xx committed May 14, 2024
1 parent 0ec5d75 commit e484963
Show file tree
Hide file tree
Showing 6 changed files with 41 additions and 8 deletions.
15 changes: 15 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,21 @@ public function panel(Panel $panel): Panel
}
```

You can configure the number of columns of the grid. Default is 12.

```php
use InvadersXX\FilamentGridstackDashboard\GridstackDashboardPlugin;

public function panel(Panel $panel): Panel
{
return $panel
->plugins([
GridstackDashboardPlugin::make()
->columns(3),
])
}
```

You can configure the settings path (string in dotted format where to store in the settings)
By default the path is 'dashboard.layout'

Expand Down
6 changes: 3 additions & 3 deletions resources/dist/components/filament-gridstack-dashboard.js

Large diffs are not rendered by default.

5 changes: 4 additions & 1 deletion resources/js/index.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import {GridStack} from 'gridstack';

export default function gridStackDashboard() {
export default function gridStackDashboard({
columns = 12
}) {
return {
grid: null,
gridItems: this.$wire.entangle('gridItems'),
Expand All @@ -15,6 +17,7 @@ export default function gridStackDashboard() {
init: function () {
this.grid = GridStack.init({
cellHeight: 80,
column: columns,
acceptWidgets: true,
removable: '#trash',
alwaysShowResizeHandle: true,
Expand Down
5 changes: 3 additions & 2 deletions resources/views/pages/dashboard.blade.php
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
@php
use Filament\Support\Facades\FilamentAsset;
use Filament\Widgets\WidgetConfiguration;
$columns = $this->getColumns();
@endphp

<x-filament-panels::page class="fi-dashboard-page">
Expand All @@ -10,7 +11,7 @@
x-ignore
ax-load
ax-load-src="{{ FilamentAsset::getAlpineComponentSrc('filament-gridstack-dashboard-script', 'invaders-xx/filament-gridstack-dashboard') }}"
x-data="gridStackDashboard()"
x-data="gridStackDashboard({ columns:{{ $columns }} })"
x-load-css="[@js(FilamentAsset::getStyleHref('filament-gridstack-dashboard-styles', package: 'invaders-xx/filament-gridstack-dashboard'))]"
class="text-center"
>
Expand Down Expand Up @@ -86,7 +87,7 @@ class="border-danger-500 bg-danger-500 flex items-center border p-6 text-center"
@endif
<div class="fi-wi flex flex-col gap-6">
@foreach ($this->buildGridItemsForDesign() as $row => $widgets)
<x-filament::grid :default="12" class="gap-6">
<x-filament::grid :default="$columns" class="gap-6">
@foreach ($widgets as $widgetKey => $widget)
@php
$widgetClass = $normalizeWidgetClass($widget['id']);
Expand Down
4 changes: 2 additions & 2 deletions src/Filament/Pages/Dashboard.php
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,9 @@ public static function getNavigationSort(): ?int
return GridstackDashboardPlugin::get()->getNavigationSort() ?? parent::getNavigationSort();
}

public function getColumns(): int|array
public function getColumns(): int
{
return 12;
return GridstackDashboardPlugin::get()->getColumns() ?? 12;
}

public function saveLayout(): void
Expand Down
14 changes: 14 additions & 0 deletions src/GridstackDashboardPlugin.php
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,8 @@ class GridstackDashboardPlugin implements Plugin

protected int|Closure|null $navigationSort = -200;

protected int|Closure|null $columns = 12;

public static function make(): static
{
return app(static::class);
Expand Down Expand Up @@ -63,6 +65,13 @@ public function defaultGrid(array|Closure $grid): static
return $this;
}

public function columns(int|Closure $columns): static
{
$this->columns = $columns;

return $this;
}

public function navigationSort(int|Closure $navigationSort): static
{
$this->navigationSort = $navigationSort;
Expand Down Expand Up @@ -109,6 +118,11 @@ public function getNavigationIcon(): string|Htmlable|null
return $this->evaluate($this->navigationIcon);
}

public function getColumns(): int
{
return $this->evaluate($this->columns);
}

public function boot(Panel $panel): void
{
}
Expand Down

0 comments on commit e484963

Please sign in to comment.