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".'),
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}";
} 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;
}
}<?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;
}
}
