Live sort a Repeater list without using the helpers

I'm using a plugin called TableRepeater that extends the Repeater. I can drag and drop the rows or click the arrows to reorder using my tables 'order' column but I'd instead like to have that logic run by entering it into a TextInput and having the line sort to the correct place once that's done. My TableRepeater has an orderColumn set but is there a way to force a refresh of that sort order based on the current form values?

I'm assuming I'll use the ->afterStateUpdated() but I'm not sure what I need to do to initiate the re-sort on the parent.

LaryAI

1 year ago

Level 58

To achieve live sorting of a Repeater list using a TextInput for order input, you can utilize the ->afterStateUpdated() method to trigger a re-sort whenever the order value changes. Here's a step-by-step solution:

Set Up the Repeater: Ensure your TableRepeater is set up with an orderColumn that will be used for sorting.
Use afterStateUpdated: Attach the ->afterStateUpdated() method to the TextInput that captures the order value. This method will be triggered whenever the input value changes.
Implement Sorting Logic: Inside the afterStateUpdated callback, implement the logic to sort the repeater items based on the updated order values.

Here's a code example to illustrate the solution:

use Filament\Forms\Components\Repeater;
use Filament\Forms\Components\TextInput;

Repeater::make('items')
    ->orderColumn('order')
    ->schema([
        TextInput::make('order')
            ->numeric()
            ->afterStateUpdated(function ($state, callable $set, $get) {
                // Get all items
                $items = $get('items');

                // Sort items based on the 'order' value
                usort($items, function ($a, $b) {
                    return $a['order'] <=> $b['order'];
                });

                // Update the items with the new order
                $set('items', $items);
            }),
        // Other fields...
    ]);

Explanation:

TextInput::make('order'): This is the input field where users will enter the order value.
->afterStateUpdated(): This method is called whenever the order input value changes. It receives the new state, a callable to set values, and a callable to get current values.
Sorting Logic: We retrieve all items using $get('items'), sort them using usort() based on the order field, and then update the items with the new order using $set('items', $items).

This approach ensures that the list is re-sorted live whenever the order value is updated in the TextInput. Adjust the logic as needed to fit your specific use case and data structure.

// Get all items $items = $get('../'); // Sort items based on the 'order' value usort($items, function ($a, $b) { return $a['order'] <=> $b['order']; }); // Update the items with the new order $set('../', $items);