Add Filament Cluster

app/Filament/Resources/OrderResource.php

@@ -10,6 +10,7 @@
 use App\Models\Customer;
 use App\Models\Order;
 use Filament\Forms\Components\DatePicker;
+use Filament\Forms\Components\Repeater;
 use Filament\Forms\Components\Section;
 use Filament\Forms\Components\Select;
 use Filament\Forms\Components\Split;
@@ -22,6 +23,9 @@
 use Filament\Tables;
 use Filament\Tables\Columns\TextColumn;
 use Filament\Tables\Table;
+use Guava\FilamentClusters\Forms\Cluster;
+use Illuminate\Support\Facades\Blade;
+use Illuminate\Support\HtmlString;
 
 class OrderResource extends Resource
 {
@@ -35,80 +39,23 @@ public static function form(Form $form): Form
     {
         return $form->schema([
             Wizard::make([
-                //                Wizard\Step::make('Production Details')
+                Wizard\Step::make('Order Details')
-                //                    ->schema([
+                    ->schema(self::getOrderDetails())
-                //                        Repeater::make('Garments')->schema([
+                    ->columns(2),
-                //                            Split::make([
+                Wizard\Step::make('Garment Details')
-                //                                TextInput::make('sku')->grow(true),
+                    ->schema(self::getGarmentDetails()),
-                //                                TextInput::make('name')->grow(false),
+                Wizard\Step::make('Production Details')
-                //                                TextInput::make('color')->grow(true),
+                    ->schema(self::getProductionDetails()),
-                //                            ]),
+            ])
-                //                            Split::make([
+                ->skippable()
-                //                                TextInput::make('xs'),
+                ->submitAction(new HtmlString(Blade::render(<<<'BLADE'
-                //                                TextInput::make('s'),
+                <x-filament::button
-                //                                TextInput::make('m'),
+                    type="submit"
-                //                                TextInput::make('l'),
+                    size="sm"
-                //                                TextInput::make('xl'),
+                >
-                //                                TextInput::make('2xl'),
+                    Submit
-                //                                TextInput::make('3xl'),
+                </x-filament::button>
-                //                                TextInput::make('osfa'),
+            BLADE))),
-                //                            ]),
-                //                        ])->grid(2),
-                //                    ]),
-                Wizard\Step::make('Order Details')->schema([
-                    Section::make([
-                        Select::make('order_type')
-                            ->required()
-                            ->options(OrderType::class)
-                            ->searchable(),
-
-                        Split::make([
-                            Select::make('customer_id')
-                                ->required()
-                                ->label('Customer')
-                                ->options(Customer::all()->pluck('company_name', 'id'))
-                                ->reactive()
-                                ->searchable(),
-
-                            Select::make('contact_id')
-                                ->label('Contact')
-                                ->options(fn ($get): array => Contact::where('customer_id', $get('customer_id') ?? null)->get()->pluck('full_name', 'id')->toArray())
-                                ->searchable(),
-                        ]),
-
-                        TextInput::make('customer_po')
-                            ->required()
-                            ->label('Customer PO'),
-
-                        Split::make([
-                            DatePicker::make('order_date')
-                                ->required()
-                                ->default(today()),
-                            DatePicker::make('due_date')
-                                ->required()
-                                ->default(today()->add('10 days')),
-                        ]),
-                    ])->columnSpan(1),
-
-                    Section::make([
-                        ToggleButtons::make('status')
-                            ->required()
-                            ->options(OrderStatus::class)
-                            ->inline(),
-
-                        ToggleButtons::make('order_attributes')
-                            ->options(OrderAttributes::class)
-                            ->multiple()
-                            ->inline(),
-
-                        Textarea::make('notes')
-                            ->rows(3),
-
-                    ])->columnSpan(1),
-                ])->columns(2),
-                //                Wizard\Step::make('Production Details')
-                //                    ->schema([]),
-            ])->columns(1),
         ])->columns(1);
     }
 
@@ -179,4 +126,100 @@ public static function getPages(): array
             'edit'   => Pages\EditOrder::route('/{record}/edit'),
         ];
     }
+
+    private static function getOrderDetails(): array
+    {
+        return [
+            Section::make([
+                Select::make('order_type')
+                    ->required()
+                    ->options(OrderType::class)
+                    ->searchable(),
+
+                Split::make([
+                    Select::make('customer_id')
+                        ->required()
+                        ->label('Customer')
+                        ->options(Customer::all()->pluck('company_name', 'id'))
+                        ->reactive()
+                        ->searchable(),
+
+                    Select::make('contact_id')
+                        ->label('Contact')
+                        ->options(fn ($get): array => Contact::where('customer_id', $get('customer_id') ?? null)->get()->pluck('full_name', 'id')->toArray())
+                        ->searchable(),
+                ]),
+
+                TextInput::make('customer_po')
+                    ->required()
+                    ->label('Customer PO'),
+
+                Split::make([
+                    DatePicker::make('order_date')
+                        ->required()
+                        ->default(today()),
+                    DatePicker::make('due_date')
+                        ->required()
+                        ->default(today()->add('10 days')),
+                ]),
+            ])->columnSpan(1),
+
+            Section::make([
+                ToggleButtons::make('status')
+                    ->required()
+                    ->options(OrderStatus::class)
+                    ->inline(),
+
+                ToggleButtons::make('order_attributes')
+                    ->options(OrderAttributes::class)
+                    ->multiple()
+                    ->inline(),
+
+                Textarea::make('notes')
+                    ->rows(3),
+
+            ])->columnSpan(1),
+        ];
+    }
+
+    private static function getGarmentDetails(): array
+    {
+        return [
+            Repeater::make('Garments')->schema([
+                Split::make([
+                    TextInput::make('sku')->grow(true),
+                    TextInput::make('name')->grow(false),
+                    TextInput::make('color')->grow(true),
+                ]),
+                Split::make([
+                    Cluster::make([
+                        TextInput::make('xs')
+                            ->placeholder('xs'),
+                        TextInput::make('s')
+                            ->placeholder('s'),
+                        TextInput::make('m')
+                            ->placeholder('m'),
+                        TextInput::make('l')
+                            ->placeholder('l'),
+                        TextInput::make('xl')
+                            ->placeholder('xl'),
+                        TextInput::make('2xl')
+                            ->placeholder('2xl'),
+                        TextInput::make('3xl')
+                            ->placeholder('3xl'),
+                        TextInput::make('osfa')
+                            ->placeholder('osfa'),
+                    ])->label('Sizes'),
+                ]),
+            ])->grid(2),
+        ];
+    }
+
+    private static function getProductionDetails(): array
+    {
+        return [
+            Repeater::make('Production Details')
+                ->schema([]),
+        ];
+    }
 }

composer.json

@@ -8,6 +8,7 @@
         "php": "^8.2",
         "davidhsianturi/blade-bootstrap-icons": "^1.5",
         "filament/filament": "^3.2",
+        "guava/filament-clusters": "^1.4",
         "laravel/framework": "^11.9",
         "laravel/tinker": "^2.9",
         "livewire/livewire": "^3.5",

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "bb45e1afbd95be16e6da42e484216f06",
+    "content-hash": "00bc993b06d741537a402ae3b7418edb",
     "packages": [
         {
             "name": "anourvalar/eloquent-serialize",
@@ -1612,6 +1612,81 @@
             ],
             "time": "2024-07-20T21:45:45+00:00"
         },
+        {
+            "name": "guava/filament-clusters",
+            "version": "1.4.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/GuavaCZ/filament-clusters.git",
+                "reference": "c4a2ad6342f630f494f5e923b65426d935d12694"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/GuavaCZ/filament-clusters/zipball/c4a2ad6342f630f494f5e923b65426d935d12694",
+                "reference": "c4a2ad6342f630f494f5e923b65426d935d12694",
+                "shasum": ""
+            },
+            "require": {
+                "filament/filament": "^3.0",
+                "illuminate/contracts": "^10.0 | ^11.0",
+                "php": "^8.1",
+                "spatie/laravel-package-tools": "^1.14.0"
+            },
+            "require-dev": {
+                "laravel/pint": "^1.0",
+                "nunomaduro/collision": "^7.8",
+                "nunomaduro/larastan": "^2.0.1",
+                "orchestra/testbench": "^8.8",
+                "pestphp/pest": "^2.0",
+                "pestphp/pest-plugin-arch": "^2.0",
+                "pestphp/pest-plugin-laravel": "^2.0",
+                "phpstan/extension-installer": "^1.1",
+                "phpstan/phpstan-deprecation-rules": "^1.0",
+                "phpstan/phpstan-phpunit": "^1.0"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "Guava\\FilamentClusters\\FilamentClustersServiceProvider"
+                    ]
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Guava\\FilamentClusters\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Lukas Frey",
+                    "email": "lukas.frey@guava.cz",
+                    "role": "Developer"
+                }
+            ],
+            "description": "Filament clusters allow you to cluster multiple fields into one visually.",
+            "homepage": "https://github.com/GuavaCZ/filament-clusters",
+            "keywords": [
+                "Guava",
+                "filament-clusters",
+                "laravel"
+            ],
+            "support": {
+                "issues": "https://github.com/GuavaCZ/filament-clusters/issues",
+                "source": "https://github.com/GuavaCZ/filament-clusters/tree/1.4.0"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/GuavaCZ",
+                    "type": "github"
+                }
+            ],
+            "time": "2024-05-31T09:31:08+00:00"
+        },
         {
             "name": "guzzlehttp/guzzle",
             "version": "7.9.2",

public/css/app/text-input-group.css

@@ -0,0 +1,24 @@
+@media (min-width: 1024px) {
+    .filament-input-group > .grid {
+        gap: 0;
+    }
+
+    .filament-input-group > .grid > :first-child .filament-forms-input,
+    .filament-input-group > .grid > :first-child .filament-forms-input .choices__inner {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    .filament-input-group > .grid > :not(:first-child):not(:last-child) .filament-forms-input,
+    .filament-input-group > .grid > :not(:first-child):not(:last-child) .filament-forms-input .choices__inner {
+        border-radius: 0;
+        border-left: none;
+    }
+
+    .filament-input-group > .grid > :last-child .filament-forms-input,
+    .filament-input-group > .grid > :last-child .filament-forms-input .choices__inner {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        border-left: none;
+    }
+}