ico Posts - Answer Overflow

ico

•Created by ico on 8/29/2024 in #❓┊help

Filament v2 Repeater can't detect when item deleted

How do i catch when i have deleted item from the Repeater in Filament v2 form builder ? i tried with afterStateHydrated and afterStateUpdated but it doesn't work, i don't get the dd()

Repeater::make('......')
->schema([.........])

// first try
->afterStateHydrated(function (Repeater $component, $state, $get) {
    dd($component, $state);
})
->afterStateUpdated(function (Repeater $component, $state, $get) {
    dd($component, $state);
})

// second try
->afterStateHydrated(function () {
    dd(222222);
})
->afterStateUpdated(function () {
    dd(111111);
})

Repeater::make('......')
->schema([.........])

// first try
->afterStateHydrated(function (Repeater $component, $state, $get) {
    dd($component, $state);
})
->afterStateUpdated(function (Repeater $component, $state, $get) {
    dd($component, $state);
})

// second try
->afterStateHydrated(function () {
    dd(222222);
})
->afterStateUpdated(function () {
    dd(111111);
})

I saw that in the Repeater class it registers listeners like repeater::deleteItem. I tried to catch that event but it didn't work also

1 replies

FFilament

•Created by ico on 6/27/2024 in #❓┊help

Filament v2 Form Builder Disable inner repeater

4 replies

FFilament

•Created by ico on 4/12/2024 in #❓┊help

Filament v2 Wizard Step mandatory

I have a step where the inputs are not required. But the step itself must be viewed before submitting . So the users must visit the step at least once before they submit the form. How can I do that ?

14 replies

FFilament

•Created by ico on 3/22/2024 in #❓┊help

Filament v2 Form Builder: How to add button in Repeater ?

How do i add a button in a repeater item ? I have a Repeater with 4 TextInputs that represent some product data. I want to add a button next to them, so when the user clicks on it it will show more information about the fields, or will print out in a PDF format information about the product

Repeater::make('inputs')
    ->label('')
    ->schema([
        TextInput::make('scannedBarcode')
            ->disabled()
            ->columnSpanFull(),
    
        TextInput::make('plannedGoodCode')
            ->disabled(),
    
        TextInput::make('plannedGoodName')
            ->disabled(),
    
        TextInput::make('loadedQuantity')
            ->disabled(),

        // add button here

    ])
    ->disableItemMovement()
    ->disableItemCreation()
    ->columns(3)

Repeater::make('inputs')
    ->label('')
    ->schema([
        TextInput::make('scannedBarcode')
            ->disabled()
            ->columnSpanFull(),
    
        TextInput::make('plannedGoodCode')
            ->disabled(),
    
        TextInput::make('plannedGoodName')
            ->disabled(),
    
        TextInput::make('loadedQuantity')
            ->disabled(),

        // add button here

    ])
    ->disableItemMovement()
    ->disableItemCreation()
    ->columns(3)

5 replies

FFilament

•Created by ico on 11/4/2023 in #❓┊help

Filament v2 property null when searching

I have a filament table from a livewire component. Witch i want to make it be dynamic to work with different logic per table I have a mount() method that looks like:

    protected ?Collection $tableProperty = null;

    public function mount()
    {
        $this->tableProperty = DataTableInitializer::initialize($this->dataTableType);
        $this->dataTableButtons = $this->tableProperty['dataTableButtons'];
    }

    protected ?Collection $tableProperty = null;

    public function mount()
    {
        $this->tableProperty = DataTableInitializer::initialize($this->dataTableType);
        $this->dataTableButtons = $this->tableProperty['dataTableButtons'];
    }

and my methods look like this

protected function getTableQuery(): Builder
{
    return $this->tableProperty['query'];
}
protected function getTableColumns(): array
{
    return $this->tableProperty['columns'];
}

.
.
.
.

protected function getTableQuery(): Builder
{
    return $this->tableProperty['query'];
}
protected function getTableColumns(): array
{
    return $this->tableProperty['columns'];
}

.
.
.
.

But when i go to a next page or try to use the search i get that the tableProperty is null if i add the initialize of the tableProperty in each method everything is normal

protected function getTableQuery(): Builder
{
    $this->tableProperty = DataTableInitializer::initialize($this->dataTableType);
    return $this->tableProperty['query'];
}
protected function getTableColumns(): array
{
    $this->tableProperty = DataTableInitializer::initialize($this->dataTableType);
    return $this->tableProperty['columns'];
}

protected function getTableQuery(): Builder
{
    $this->tableProperty = DataTableInitializer::initialize($this->dataTableType);
    return $this->tableProperty['query'];
}
protected function getTableColumns(): array
{
    $this->tableProperty = DataTableInitializer::initialize($this->dataTableType);
    return $this->tableProperty['columns'];
}

But this does not look good in my opinion. So what must i do to escape this repeating and initialize the tableProperty just once ?

4 replies

FFilament

•Created by ico on 10/30/2023 in #❓┊help

Filament v3 Group row with inner group rows

2 replies

FFilament

•Created by ico on 10/17/2023 in #❓┊help

Filament v3 not detecting Tailwind classes

When i add a text input to have extra attributes like for example

TextInput::make('textInput')
  ->disabled(true)
  ->extraAttributes(['class'=>'bg-gray-500'])

TextInput::make('textInput')
  ->disabled(true)
  ->extraAttributes(['class'=>'bg-gray-500'])

It doesn't color the textinput My tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme');
const colors = require('tailwindcss/colors')
const tailwindForms = require('@tailwindcss/forms');
const tailwindTypography = require('@tailwindcss/forms');

import preset from './vendor/filament/support/tailwind.config.preset'

module.exports = {

    presets: [preset],
    darkMode: 'class',
    content: [
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.vue",
        './vendor/filament/**/*.blade.php',
        './app/Filament/**/*.php',
        './app/Http/Livewire/**/*.php',
        './resources/views/filament/**/*.blade.php',
    ],
    safelist: [
        'bg-orange-300',
        'bg-green-300',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
            colors: {
                'add-item-btn-bg-bottom': '#78a4c6',
                'add-item-btn-bg-top': '#9bbdd9',
                'add-item-btn': '#639fd3',
                'add-item-delete-btn-bg-top': '#bcc8d3',
                'add-item-delete-btn-bg-bottom': '#a9c0d3',
                'sale-agreement-btn-bg': '#9abedd',
                danger: colors.rose,
                primary: colors.blue,
                success: colors.green,
                warning: colors.yellow,

            },
        },
    },

    plugins: [
        tailwindForms,
        tailwindTypography,
    ],
};

const defaultTheme = require('tailwindcss/defaultTheme');
const colors = require('tailwindcss/colors')
const tailwindForms = require('@tailwindcss/forms');
const tailwindTypography = require('@tailwindcss/forms');

import preset from './vendor/filament/support/tailwind.config.preset'

module.exports = {

    presets: [preset],
    darkMode: 'class',
    content: [
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.vue",
        './vendor/filament/**/*.blade.php',
        './app/Filament/**/*.php',
        './app/Http/Livewire/**/*.php',
        './resources/views/filament/**/*.blade.php',
    ],
    safelist: [
        'bg-orange-300',
        'bg-green-300',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
            colors: {
                'add-item-btn-bg-bottom': '#78a4c6',
                'add-item-btn-bg-top': '#9bbdd9',
                'add-item-btn': '#639fd3',
                'add-item-delete-btn-bg-top': '#bcc8d3',
                'add-item-delete-btn-bg-bottom': '#a9c0d3',
                'sale-agreement-btn-bg': '#9abedd',
                danger: colors.rose,
                primary: colors.blue,
                success: colors.green,
                warning: colors.yellow,

            },
        },
    },

    plugins: [
        tailwindForms,
        tailwindTypography,
    ],
};

When i upgraded to Livewire v3 i chose to keep the current namespace App\Htpp\Livewire thats why that is in the content key My filament form is actually in the same folder. I am building the form from a Livewire component. But the styling doesn't render. What am i missing ?

27 replies

FFilament

•Created by ico on 10/16/2023 in #❓┊help

Reactive field inside a dynamic generated schema Filament v3

I have a schema that is generated dynamicly like so based on a selected field

Section::make('AQL Report Form')
    ->schema([
        TextInput::make('limitCardNumber')
            ->label('Limit Card')
            ->disabled(true),
        TextInput::make('orderQuantity')
            ->label('Order Quantity')
            ->disabled(true),
        Select::make('stageId')
            ->options($this->stages)
            ->label('Stage')
            ->afterStateUpdated(function (Set $set, Get $get) {
                $this->updateDefects($this->stageId, $set); // <----- this fills the $defectListSchema property
            })
            ->reactive(),
    ])->columns(3),

Section::make('Defect List')
    ->schema(function () {
        return $this->defectListSchema;
    })
    ->hidden(function () {
        return $this->hideDefectList;
    }),

Section::make('AQL Report Form')
    ->schema([
        TextInput::make('limitCardNumber')
            ->label('Limit Card')
            ->disabled(true),
        TextInput::make('orderQuantity')
            ->label('Order Quantity')
            ->disabled(true),
        Select::make('stageId')
            ->options($this->stages)
            ->label('Stage')
            ->afterStateUpdated(function (Set $set, Get $get) {
                $this->updateDefects($this->stageId, $set); // <----- this fills the $defectListSchema property
            })
            ->reactive(),
    ])->columns(3),

Section::make('Defect List')
    ->schema(function () {
        return $this->defectListSchema;
    })
    ->hidden(function () {
        return $this->hideDefectList;
    }),

And the $this->defectListSchema contains many fields like this

Section::make('')->schema([
    TextInput::make('')->label('Defect')
        ->placeholder($defect['name'])
        ->disabled(true)
        ->columnSpan(2),
    TextInput::make('')->label('Inspection Level')
        ->placeholder($inspectionLevel->name)
        ->disabled(true),
    TextInput::make('')->label('Sample Size')
        ->placeholder($aqlLabel->sample)
        ->disabled(true),
    TextInput::make('numberOfDefects')
        ->numeric()
        ->label('Number of defects')
        ->afterStateUpdated(function (Set $set, Get $get) {
            // PTR compare and save data
        })
        ->reactive(),
])->columns(3),

Section::make('')->schema([
    TextInput::make('')->label('Defect')
        ->placeholder($defect['name'])
        ->disabled(true)
        ->columnSpan(2),
    TextInput::make('')->label('Inspection Level')
        ->placeholder($inspectionLevel->name)
        ->disabled(true),
    TextInput::make('')->label('Sample Size')
        ->placeholder($aqlLabel->sample)
        ->disabled(true),
    TextInput::make('numberOfDefects')
        ->numeric()
        ->label('Number of defects')
        ->afterStateUpdated(function (Set $set, Get $get) {
            // PTR compare and save data
        })
        ->reactive(),
])->columns(3),

But when i type anything in the numberOfDefects field that is reactive the entire form goes blank, disappears. What could be the problem ?

25 replies

FFilament

•Created by ico on 10/13/2023 in #❓┊help

Filament v3 Resource does not fill the Edit form

Hello i integrated the Filament package into a existing Laravel 10 project. When i followed the guide for the panels i discovered that after i have created a Resource ( when i filled the logic for the Table ) it doesn't fill the Edit form with the selected record. My table looks like this (from the docs and demo on github )

->columns([
    Tables\Columns\TextColumn::make('name'),
    Tables\Columns\TextColumn::make('defectCategory.weight'),
    Tables\Columns\TextColumn::make('')->label('Check type')
        ->description(fn (Defect $defect): string => $defect->qualityCheck)
])
->filters([
    //
])
->actions([
    EditAction::make(),
])
->emptyStateActions([
    CreateAction::make(),
]);

->columns([
    Tables\Columns\TextColumn::make('name'),
    Tables\Columns\TextColumn::make('defectCategory.weight'),
    Tables\Columns\TextColumn::make('')->label('Check type')
        ->description(fn (Defect $defect): string => $defect->qualityCheck)
])
->filters([
    //
])
->actions([
    EditAction::make(),
])
->emptyStateActions([
    CreateAction::make(),
]);

And my Edit page is almost blank

protected static string $resource = DefectResource::class;
protected function getHeaderActions(): array
{
    return [
        Actions\DeleteAction::make(),
    ];
}

protected static string $resource = DefectResource::class;
protected function getHeaderActions(): array
{
    return [
        Actions\DeleteAction::make(),
    ];
}

Was looking around found some were doing with the ->record() method so i tried

EditAction::make()
    ->record(function ($record) {
        return Defect::find($record);
    }),

EditAction::make()
    ->record(function ($record) {
        return Defect::find($record);
    }),

But didn't make a difference So what do i need to do to fill my Edit form with the selected record ?

21 replies

FFilament

•Created by ico on 10/12/2023 in #❓┊help

Display only a Label/Text in a Form

How could i display only a Label or a Text in the form ? I know i can add a label() method to theTextInput but that will also generate me the input itself witch i don't want ?

5 replies

FFilament

•Created by ico on 10/12/2023 in #❓┊help

How do i change the background color of a Section layout

I have some Sections in a from but i want them to have different background colors. How can i do that ?

35 replies

FFilament

•Created by ico on 10/11/2023 in #❓┊help

How to dynamically generate Field schemas in Filament v3

I have 2 sections 1st the user will pick a item from a select After it is picked the 2nd section needs to be visible and be filled with many text inputs based on what the user has picked from the select. But when i try to generate the schema on the spot it gives me a error Property type not supported in Livewire for property: [{}] Code:

Section::make('AQL Report Form')
    ->schema([
        TextInput::make('limitCardNumber')
            ->label('Limit Card')
            ->disabled(true),
        TextInput::make('orderQuantity')
            ->label('Order Quantity')
            ->disabled(true),
        Select::make('stageId')
            ->options($this->stages)
            ->label('Stage')
            ->afterStateUpdated(function (Set $set, Get $get) {
                $this->updateDefects($this->stageId);
            })
            // This is needed for the stateUpdated method to work
            ->reactive(),
    ])
    ->columns(3),
Section::make('Defect List')
    ->schema(function () {
        return $this->defectListSchema;
    })
    ->columns(3)
    ->hidden(function () {
        return $this->hideDefectList;
    })
    ->reactive(),

Section::make('AQL Report Form')
    ->schema([
        TextInput::make('limitCardNumber')
            ->label('Limit Card')
            ->disabled(true),
        TextInput::make('orderQuantity')
            ->label('Order Quantity')
            ->disabled(true),
        Select::make('stageId')
            ->options($this->stages)
            ->label('Stage')
            ->afterStateUpdated(function (Set $set, Get $get) {
                $this->updateDefects($this->stageId);
            })
            // This is needed for the stateUpdated method to work
            ->reactive(),
    ])
    ->columns(3),
Section::make('Defect List')
    ->schema(function () {
        return $this->defectListSchema;
    })
    ->columns(3)
    ->hidden(function () {
        return $this->hideDefectList;
    })
    ->reactive(),

The updateDefects() triggers a generateDefectListSchema() method for generating the 2nd section schema generateDefectListSchema()

$schema = [];
$defectCategories = DefectCategory::get()->pluck('category', 'id')->toArray();
if (is_null($this->defectsByCategory)) {
    return $schema;
}
foreach ($this->defectsByCategory as $category => $defects) {
    $sectionSchema = [];
    foreach ($defects as $defect) {
        $sectionSchema = array_merge($sectionSchema, [
            TextInput::make('defectName')->label($defect['name'])->disabled(true),
        ]);
    }
    $schema = array_merge($schema, [
        Section::make($defectCategories[$category])
            ->schema($sectionSchema),
    ]);
}
return $schema;

$schema = [];
$defectCategories = DefectCategory::get()->pluck('category', 'id')->toArray();
if (is_null($this->defectsByCategory)) {
    return $schema;
}
foreach ($this->defectsByCategory as $category => $defects) {
    $sectionSchema = [];
    foreach ($defects as $defect) {
        $sectionSchema = array_merge($sectionSchema, [
            TextInput::make('defectName')->label($defect['name'])->disabled(true),
        ]);
    }
    $schema = array_merge($schema, [
        Section::make($defectCategories[$category])
            ->schema($sectionSchema),
    ]);
}
return $schema;

The $schema is filled correctly i can see the result when i dd($schema)

13 replies

FFilament

•Created by ico on 10/3/2023 in #❓┊help

Filament v3 Wizard layout color schema.

Ever since i switched to Filament v3 the color schema of the Wizzard layout form changedfrom the default (light) to dark. I tried to add the

'dark_mode'=>false,

'dark_mode'=>false,

In the config/filament.php but it didn't do anything How can i change it back to the original or create a custom theme ?

13 replies

FFilament

•Created by ico on 10/3/2023 in #❓┊help

Filament V3 and Livewire V3 scripts

After a followed the upgrade guide for livewire i moved to the upgrade guide of filament. The Livewire guide told me that i can use the app.js like:

import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';

// import and add other plugins to Alpine using Alpine.plugin(plugin_name) method

Livewire.start()

import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';

// import and add other plugins to Alpine using Alpine.plugin(plugin_name) method

Livewire.start()

Then all i need to do in the base layout is to replace the @livewireScripts with @livewireScriptConfig

    @livewire('notifications')
    @livewireScriptConfig

</body>

    @livewire('notifications')
    @livewireScriptConfig

</body>

Then in the filament upgrade guide they say

New @filamentScripts and @filamentStyles Blade directives

The @filamentScripts and @filamentStyles Blade directives must be added to your Blade layout file/s. Since Livewire v3 no longer uses similar directives, you can replace @livewireScripts with @filamentScripts and @livewireStyles with @filamentStyles

New @filamentScripts and @filamentStyles Blade directives

The @filamentScripts and @filamentStyles Blade directives must be added to your Blade layout file/s. Since Livewire v3 no longer uses similar directives, you can replace @livewireScripts with @filamentScripts and @livewireStyles with @filamentStyles

The styles i have replaced the and removed from app.css but the JS scripts are a little different..... since they say that i don't need the imports

import FormsAlpinePlugin from '../../vendor/filament/forms/dist/module.esm';
import NotificationsAlpinePlugin from '../../vendor/filament/notifications/dist/module.esm';

import FormsAlpinePlugin from '../../vendor/filament/forms/dist/module.esm';
import NotificationsAlpinePlugin from '../../vendor/filament/notifications/dist/module.esm';

from the app.js and they are loaded in the @filamentScripts Now i am puzzeled since witch to use since adding both ( @filamentScripts and @@livewireScriptConfig) at the end of the layout results into multiple alpine livewire starts warnings and errors. So i removed almost everything related to livewire and alpine from the the app.js and replaced the new @livewireScriptConfig with @filamentScripts Is this how it should be ? Won't i be missing some scripts that Livewire uses or everything will be loaded by the @filamentScripts ? What if i want to add a Alpine plugin how should i do that ?

4 replies

Gaming

Programming