Nested Repeater

[juansimpledata]

Package

Form builder

Package Version

v3.0.0

How can we help you?

the nested repeater works very slow; As items are added, it takes much longer to show the new section with the corresponding fields.

[leandrocfe]

It will depend on the number of fields, relationships, reactive fields, etc., that you have in your form. Your page is a Livewire component, and each field is an attribute. If you have a lot of fields, the form may be slow.
Maybe you could share a code example of what you are trying to do?

[juansimpledata]

thanks for your reply, this is my code:

`<?php
Repeater::make('productquotezones')
->relationship()
->label('Zonas / Enunciados')
->schema([
Forms\Components\TextInput::make('title')
->required()
->default('General')
->label('Titulo de la Zona')
->maxLength(255),

    Forms\Components\Hidden::make('user_id')->default(Auth::user()->id),

    Repeater::make('productquotezonedetails')
        ->relationship()
        ->label('Productos')
        ->schema([
            Forms\Components\Select::make('product_id')
                ->label('Producto')
                ->searchable()
                ->live(onBlur: true)
                ->hintIcon('heroicon-o-light-bulb')
                ->hintColor('primary')
                ->hint("Seleccionar un producto, verificar su información, elegir un porcentaje, ingresar la cantidad y calcular el total.")
                ->columnSpanFull()
                ->afterStateUpdated(function (callable $set, $state) {
                    $Product = Product::where('id', $state)
                        ->select('id', 'sku', 'price_one', 'name', 'main_image')
                        ->first();

                    $set('porcentaje', null);
                    $set('sale_price', null);
                    $set('quantity', null);
                    $set('subtotal', null);
                    $set('total', null);
                    $set('discount', null);
                    $set('discount_percentage', null);

                    $set('product_id', $Product->id);
                    $set('sku', $Product->sku);
                    $set('reference', substr(strtoupper(hash('sha256', $Product->sku)), 0, 5));
                    $set('cost_price', $Product->price_one);
                    $set('description', $Product->name);
                    $set('image_hidden', $Product->main_image);
                })
                ->required()
                ->options(function () {
                    return Product::select('id', 'sku')->pluck('sku', 'id');
                }),

            Forms\Components\Hidden::make('sku')->default(Auth::user()->id),

            Forms\Components\TextInput::make('reference')
                ->maxLength(255)
                ->required()
                ->readOnly()
                ->label('Referencia'),

            Forms\Components\TextInput::make('cost_price')
                ->maxLength(255)
                ->required()
                ->readOnly()
                ->label('Costo'),

            Select::make('porcentaje')
                ->options([
                    '5' => '5%',
                    '10' => '10%',
                    '15' => '15%',
                    '20' => '20%',
                    '30' => '30%',
                    '40' => '40%',
                    '50' => '50%',
                    '60' => '60%',
                    '70' => '70%',
                    '80' => '80%',
                    '90' => '90%',
                    '100' => '100%',
                ])
                ->required()
                ->live(onBlur: false)
                ->afterStateUpdated(function ($state, callable $set, callable $get) {
                    $porcentaje = $state;
                    $resultado = $get('cost_price') / (1 - (($porcentaje + 10) / 100));
                    $resultado_formatted = number_format($resultado, 2, '.', '');
                    $set('sale_price', $resultado_formatted);

                    $set('quantity', null);
                    $set('discount', null);
                    $set('discount_percentage', null);
                    $set('subtotal', null);
                    $set('total', null);
                }),

            Forms\Components\TextInput::make('sale_price')
                ->maxLength(255)
                ->required()
                ->label('Venta'),

            Forms\Components\TextInput::make('quantity')
                ->maxLength(255)
                ->required()
                ->live(onBlur: true)
                ->afterStateUpdated(function ($state, callable $set, callable $get) {
                    $subtotal = number_format(($state * $get('sale_price')), 2, '.', '');
                    $set('subtotal', $subtotal);

                    if ($get('aplica_descuento')) {
                        $monto = $get('subtotal');
                        $porcentaje_descuento = $get('discount_percentage') ?? 0;
                        $descuento = $monto * ($porcentaje_descuento / 100);
                        $monto_final = $monto - $descuento;
                        $monto_final_formatted = number_format($monto_final, 2, '.', '');
                        $set('discount', number_format($descuento, 2, '.', ''));
                        $set('total', $monto_final_formatted);
                    } else {
                        $set('total', $subtotal);
                    }
                })
                ->label('Cantidad'),

            Forms\Components\TextInput::make('subtotal')
                ->maxLength(255)
                ->required()
                ->readOnly()
                ->label('Sub-Total'),

            Forms\Components\TextInput::make('total')
                ->maxLength(255)
                ->required()
                ->readOnly()
                ->label('Total'),

            Forms\Components\Textarea::make('description')
                ->maxLength(65535)
                ->columnSpanFull()
                ->required()
                ->label('Descripción'),

            Forms\Components\Toggle::make('aplica_descuento')
                ->onIcon('heroicon-m-receipt-percent')
                ->offIcon('heroicon-m-receipt-percent')
                ->default(false)
                ->onColor('success')
                ->offColor('danger')
                ->reactive()
                ->afterStateUpdated(function (callable $set, $state) {
                    $set('SeccionDescuento', $state);
                })
                ->label('Aplica Descuento?'),

            Section::make('SeccionDescuento')
                ->label('Detalle descuento')
                ->description('Indica los datos relacionados con el descuento del producto.')
                ->icon('heroicon-m-receipt-percent')
                ->iconColor('purple')
                ->schema([
                    Select::make('discount_percentage')
                        ->label('%')
                        ->default('0')
                        ->options([
                            '0' => '0%',
                            '5' => '5%',
                            '10' => '10%',
                            '15' => '15%',
                            '20' => '20%',
                            '30' => '30%',
                            '40' => '40%',
                            '50' => '50%',
                            '60' => '60%',
                            '70' => '70%',
                            '80' => '80%',
                            '90' => '90%',
                            '100' => '100%',
                        ])
                        ->live(onBlur: true)
                        ->afterStateUpdated(function ($state, callable $set, callable $get) {
                            $monto = $get('subtotal');
                            $porcentaje_descuento = $state;
                            $descuento = $monto * ($porcentaje_descuento / 100);
                            $monto_final = $monto - $descuento;
                            $monto_final_formatted = number_format($monto_final, 2, '.', '');
                            $set('discount', number_format($descuento, 2, '.', ''));
                            $set('total', $monto_final_formatted);
                        }),

                    Forms\Components\TextInput::make('discount')
                        ->maxLength(255)
                        ->default('0')
                        ->readOnly()
                        ->label('Descuento'),
                ])
                ->collapsible()
                ->columns(2)
                ->hidden(function (callable $get) {
                    return !$get('aplica_descuento');
                }),

            Forms\Components\Toggle::make('compra_nacional')
                ->onIcon('heroicon-m-shopping-cart')
                ->offIcon('heroicon-m-lock-closed')
                ->default(false)
                ->onColor('success')
                ->offColor('danger')
                ->reactive()
                ->afterStateUpdated(function (callable $set, $state) {
                    $set('SeccionCompraNacional', $state);
                })
                ->label('Compra nacional?'),

            Forms\Components\Toggle::make('availability')
                ->label('Disponibilidad')
                ->default(true)
                ->required()
                ->hidden(),

            Forms\Components\Hidden::make('user_id')->default(Auth::user()->id),

            Forms\Components\Hidden::make('image_hidden'),

            Forms\Components\Textarea::make('comments')
                ->maxLength(65535)
                ->hidden()
                ->label('Comentarios'),

            Section::make('SeccionCompraNacional')
                ->label('Detalle compra nacional')
                ->description('Indica los datos relacionados con la compra nacional.')
                ->icon('heroicon-m-shopping-cart')
                ->iconColor('indigo')
                ->schema([
                    Forms\Components\TextInput::make('proveedor_sugerido_compra_nacional')
                        ->maxLength(255)
                        ->label('Proveedor'),

                    Forms\Components\TextInput::make('codigo_referencia_compra_nacional')
                        ->maxLength(255)
                        ->label('Código'),

                    Forms\Components\TextInput::make('precio_compra_nacional')
                        ->maxLength(255)
                        ->label('Precio'),

                    Forms\Components\TextInput::make('direccion_compra_nacional')
                        ->maxLength(255)
                        ->label('Dirección'),

                    Forms\Components\TextInput::make('telefono_compra_nacional')
                        ->maxLength(255)
                        ->label('Teléfono'),

                    Forms\Components\TextInput::make('asesor_compra_nacional')
                        ->maxLength(255)
                        ->label('Asesor'),

                    Forms\Components\TextInput::make('observacion_compra_nacional')
                        ->maxLength(255)
                        ->label('Observación'),
                ])
                ->collapsible()
                ->columns(7)
                ->hidden(function (callable $get) {
                    return !$get('compra_nacional');
                }),
        ])
        ->columns(7)
        ->defaultItems(1)
        ->reorderableWithButtons()
        ->collapsible()
        ->cloneable()
        ->orderColumn('sort')
        ->deleteAction(fn (Action $action) => $action->requiresConfirmation())
        ->itemLabel(fn (array $state): ?string => $state['sku'] ?? null),
])
->columns(1)
->defaultItems(1)
->reorderableWithButtons()
->collapsible()
->cloneable()
->orderColumn('sort')
->deleteAction(fn (Action $action) => $action->requiresConfirmation())
->itemLabel(fn (array $state): ?string => $state['title'] ?? null);`