Tommika79 Comments - Answer Overflow

Tommika79

•Created by Tommika79 on 8/26/2024 in #❓┊help

Filament Multi-Select Not Loading Default Values from Third Table (Not Pivot Table)

Thanks for the idea. This is how it was solved:

->afterStateHydrated(function ($component, $state) {
    $record = $component->getRecord();
    if ($record && $record->exists) {
        $state = $record->carUsageRecords->pluck('car_id')->toArray();
        $component->state($state);
    }
})

->afterStateHydrated(function ($component, $state) {
    $record = $component->getRecord();
    if ($record && $record->exists) {
        $state = $record->carUsageRecords->pluck('car_id')->toArray();
        $component->state($state);
    }
})

4 replies

FFilament

•Created by Tommika79 on 7/28/2024 in #❓┊help

Help Needed with DateTimePicker in Repeater

Thank you for your suggestion. However, since the parent-child relationship is not straightforward in Filament, I solved it this way:

// This is where I need to read the given date.
DatePicker::make('start_date')->required()->label('Start Date'),

// Reading the start time here:
DateTimePicker::make('start_time')
    ->required()
    ->prefixIcon('heroicon-m-clock')
    ->format('Y-m-d H:i')
    ->seconds(false)
    ->label('Start Time')
    ->reactive()
    ->afterStateUpdated(function ($state, callable $set, $get) {
        self::updateTaskGroupsStartTime($state, $set, $get);
    }),

// And the function for it:
private static function updateTaskGroupsStartTime($state, callable $set, $get)
{
    $taskGroups = $get('taskGroups') ?? [];
    $updatedTaskGroups = collect($taskGroups)->map(function ($item) use ($state) {
        $item['start_time'] = $state;
        return $item;
    })->toArray();
    $set('taskGroups', $updatedTaskGroups);
}

// This is where I need to read the given date.
DatePicker::make('start_date')->required()->label('Start Date'),

// Reading the start time here:
DateTimePicker::make('start_time')
    ->required()
    ->prefixIcon('heroicon-m-clock')
    ->format('Y-m-d H:i')
    ->seconds(false)
    ->label('Start Time')
    ->reactive()
    ->afterStateUpdated(function ($state, callable $set, $get) {
        self::updateTaskGroupsStartTime($state, $set, $get);
    }),

// And the function for it:
private static function updateTaskGroupsStartTime($state, callable $set, $get)
{
    $taskGroups = $get('taskGroups') ?? [];
    $updatedTaskGroups = collect($taskGroups)->map(function ($item) use ($state) {
        $item['start_time'] = $state;
        return $item;
    })->toArray();
    $set('taskGroups', $updatedTaskGroups);
}

Thanks again for the advice!

3 replies

FFilament

•Created by Tommika79 on 8/3/2024 in #❓┊help

Visual Inconsistencies in Filament Repeater with Dynamic Select Options

Summary of Approaches Tried: Direct Filtering in options Callback:

->options(function (callable $get) {
    $allUsers = User::role('Employee')->pluck('name', 'id');
    $selectedUsers = collect($get('../../taskGroups'))->pluck('worker_id')->filter()->toArray();
    
    return $allUsers->filter(function ($name, $id) use ($selectedUsers) {
        return !in_array($id, $selectedUsers);
    });
})

->options(function (callable $get) {
    $allUsers = User::role('Employee')->pluck('name', 'id');
    $selectedUsers = collect($get('../../taskGroups'))->pluck('worker_id')->filter()->toArray();
    
    return $allUsers->filter(function ($name, $id) use ($selectedUsers) {
        return !in_array($id, $selectedUsers);
    });
})

Issue: Selected worker names visually jumped to the next available ID. Real-Time Updates with afterStateUpdated:

->afterStateUpdated(function ($state, callable $set, callable $get) {
    $set('worker_id', $get('worker_id'));
})

->afterStateUpdated(function ($state, callable $set, callable $get) {
    $set('worker_id', $get('worker_id'));
})

Issue: Introduced extra rows and visual inconsistencies. Combining with live Option for Real-Time Changes:

->live()

->live()

Issue: Multiple re-renders led to flickering and incorrect visual updates.

5 replies

FFilament

•Created by Tommika79 on 8/3/2024 in #❓┊help

Visual Inconsistencies in Filament Repeater with Dynamic Select Options

Select::make('worker_id')->columnSpan(1)->reactive()
    ->relationship('worker', 'name', fn (Builder $query) => $query->whereHas('roles', function (Builder $query) {
        $query->whereIn('name', ['Employee', 'Admin']);
    }))
    ->options(function (callable $get, $state) {
        $allUsers = User::role(['Employee', 'Admin'])->pluck('name', 'id');
        $selectedUsers = collect($get('../../taskGroups'))->pluck('worker_id')->filter()->toArray();

        $availableUsers = $allUsers->toArray();
        foreach ($selectedUsers as $userId) {
            if (isset($allUsers[$userId]) && $state !== $userId) {
                unset($availableUsers[$userId]);
            }
        }

        if ($state && isset($allUsers[$state])) {
            $availableUsers[$state] = $allUsers[$state];
        }

        return $availableUsers;
    })
    ->afterStateUpdated(function ($state, callable $set, callable $get) {
        $selectedUsers = collect($get('../../taskGroups'))->pluck('worker_id')->filter()->toArray();
        if (!in_array($state, $selectedUsers)) {
            $set('worker_id', $state);
        }
    })
    ->afterStateHydrated(function ($state, callable $set, callable $get) {
        $selectedUsers = collect($get('../../taskGroups'))->pluck('worker_id')->filter()->toArray();
        if (!in_array($state, $selectedUsers)) {
            $set('worker_id', $state);
        }
    }),

Select::make('worker_id')->columnSpan(1)->reactive()
    ->relationship('worker', 'name', fn (Builder $query) => $query->whereHas('roles', function (Builder $query) {
        $query->whereIn('name', ['Employee', 'Admin']);
    }))
    ->options(function (callable $get, $state) {
        $allUsers = User::role(['Employee', 'Admin'])->pluck('name', 'id');
        $selectedUsers = collect($get('../../taskGroups'))->pluck('worker_id')->filter()->toArray();

        $availableUsers = $allUsers->toArray();
        foreach ($selectedUsers as $userId) {
            if (isset($allUsers[$userId]) && $state !== $userId) {
                unset($availableUsers[$userId]);
            }
        }

        if ($state && isset($allUsers[$state])) {
            $availableUsers[$state] = $allUsers[$state];
        }

        return $availableUsers;
    })
    ->afterStateUpdated(function ($state, callable $set, callable $get) {
        $selectedUsers = collect($get('../../taskGroups'))->pluck('worker_id')->filter()->toArray();
        if (!in_array($state, $selectedUsers)) {
            $set('worker_id', $state);
        }
    })
    ->afterStateHydrated(function ($state, callable $set, callable $get) {
        $selectedUsers = collect($get('../../taskGroups'))->pluck('worker_id')->filter()->toArray();
        if (!in_array($state, $selectedUsers)) {
            $set('worker_id', $state);
        }
    }),

Issue: This code resolves the initial jumping issue but introduces another problem: changing the first worker to another (especially if their ID is one higher than the last selected) causes all rows below it to display the changed worker’s name. Adding or removing a row triggers a refresh that corrects the names, but this is confusing and undesired.

Gaming

Programming