FilamentF
Filament•2y ago
Bleak

Best Way to create invoice number preview

TextInput::make('finance_invoice_start_number')
                        ->live(onBlur: true)
                        ->hintIcon('heroicon-m-question-mark-circle', tooltip: 'The starting number for the invoice number. .'),
                    TextInput::make('finance_invoice_suffix')
                        ->live(onBlur: true)
                        ->hintIcon('heroicon-m-question-mark-circle', tooltip: 'The suffix for the invoice number. For example, if the suffix is "-INV", the invoice number will be "0001-INV".'),
                    TextInput::make('finance_invoice_number_padding')
                        ->live(onBlur: true)
                        ->hintIcon('heroicon-m-question-mark-circle', tooltip: 'The number of digits to pad the invoice number with. For example, if the padding is "4", the invoice number will be "0001".'),

I want to generate a preview of how the invoice number will look upon changint the field values.
I can use a livewire component with alpine using this
    public function getInvoiceNumberPreviewProperty()
    {
        $number = str_pad($this->startingNumber, $this->padding, '0', STR_PAD_LEFT);

        return "{$this->prefix}{$number}{$this->suffix}";
    }

but wondering if there is a more elegant way to do it directly in the form?
Solution
@toeknee thanks for your help it led me in right direction!
<?php


class Invoices extends Page implements HasForms
{
...

    public ?array $data = [];

    public function form(Form $form): Form
    {
        return $form->schema(
            [          TextInput::make('finance_invoice_start_number')
                    ->live(onBlur: true)
                    ->afterStateUpdated(function ($state, Set $set, Get $get) {
                        $preview = self::generatePreview($get);
                        dump('Updating start number, new preview: '.$preview);
                        $set('invoicePreview', $preview);
                    }),
                  
                TextInput::make('finance_invoice_suffix')
                    ->live(onBlur: true)
                    ->afterStateUpdated(fn ($state, Set $set, Get $get) => $set('invoicePreview', self::generatePreview($get))
                    )
                    ->hintIcon('heroicon-m-question-mark-circle', tooltip: 'The suffix for the invoice number.'),

                TextInput::make('finance_invoice_number_padding')
                    ->live(onBlur: true)
                    ->numeric()
                    ->afterStateUpdated(fn ($state, Set $set, Get $get) => $set('invoicePreview', self::generatePreview($get))
                    ),

                Placeholder::make('invoicePreview')
                    ->live()
                    ->content(fn (Get $get) => self::generatePreview($get)),

                // ...Finance\Forms\InvoiceSettingsForm::getForm(),

            ])->statePath('data');

    }

    public static function generatePreview(Get $get): string
    {
        $startNumber = $get('finance_invoice_start_number');
        $suffix = $get('finance_invoice_suffix');
        $padding = max(0, intval($get('finance_invoice_number_padding')));
        $formattedNumber = str_pad($startNumber, $padding, '0', STR_PAD_LEFT);

        return $formattedNumber.$suffix;
    }
}
Jump to solution
Was this page helpful?