UnderOath777 Posts - Answer Overflow

UnderOath777

•Created by UnderOath777 on 10/27/2024 in #❓┊help

Help with Filament Modal Component

I'm using the Filament modal to open a chatbot interface defined in a custom Livewire component. I would like to scroll to the bottom of the chat interface when the modal is open. I was using the model-opened event to scroll to the bottom, but it's not working as I expected. It seems that modalElement.scrollHeight is set to 0, and even if I hardcode a position in the scrollTo method, it doesn't take effect. It feels like I might have the wrong element. Does anyone have recommendations or solutions on how I can resolve this?

<x-filament::modal
    width="lg"
    heading="Chatbot"
    id="chatbot-modal"
    slide-over="true"
    stickyHeader="true"
    @modal-opened="
        $nextTick(() => {
            const modalElement = $refs.modalContainer
            modalElement.scrollTo({
                top: modalElement.scrollHeight,
                behavior: 'smooth'
            });
        })
    "
>
    <x-slot
        name="trigger"
        class="fixed bottom-4 right-4 rounded-full bg-primary-500 p-4 hover:bg-primary-200"
    >
        <x-filament::icon
            class="h-5 w-5 text-white"
            icon="heroicon-o-chat-bubble-left"
        />
    </x-slot>
    @livewire('filament-chatbot')
</x-filament::modal>

<x-filament::modal
    width="lg"
    heading="Chatbot"
    id="chatbot-modal"
    slide-over="true"
    stickyHeader="true"
    @modal-opened="
        $nextTick(() => {
            const modalElement = $refs.modalContainer
            modalElement.scrollTo({
                top: modalElement.scrollHeight,
                behavior: 'smooth'
            });
        })
    "
>
    <x-slot
        name="trigger"
        class="fixed bottom-4 right-4 rounded-full bg-primary-500 p-4 hover:bg-primary-200"
    >
        <x-filament::icon
            class="h-5 w-5 text-white"
            icon="heroicon-o-chat-bubble-left"
        />
    </x-slot>
    @livewire('filament-chatbot')
</x-filament::modal>

2 replies

FFilament

•Created by UnderOath777 on 8/18/2024 in #❓┊help

Dynamic Form Component

What I'm trying to achieve is to dynamically append additional form components to the parent form. The additional form components are encapsulated in a service class, and each service class has custom form components. When a user selects the service type from the dropdown, I want to take the selected state value, instantiate that service class to retrieve its form components, and then append those to the child container. What I did: I was able to replace the full form, but instead, I would like to append the additional form components to the parent form if possible.

public static function form(Form $form): Form
{
    $serviceTypeOption = ServiceTypeManager::options();
    return $form
        ->schema([
            TextInput::make('name'),
            Select::make('service_type')
                ->live()
                ->options($serviceTypeOption)
                ->afterStateUpdated(function (Select $component) use ($form) {
                    $state = $component->getState();
                    ServiceTypeManager::make($state)->form($form)->fill();
                })
        ]);
}

public static function form(Form $form): Form
{
    $serviceTypeOption = ServiceTypeManager::options();
    return $form
        ->schema([
            TextInput::make('name'),
            Select::make('service_type')
                ->live()
                ->options($serviceTypeOption)
                ->afterStateUpdated(function (Select $component) use ($form) {
                    $state = $component->getState();
                    ServiceTypeManager::make($state)->form($form)->fill();
                })
        ]);
}

class GoogleCalendarServiceType extends BaseServiceType
{
    public function form(Form $form): Form
    {
        return $form->schema([
            TextInput::make('slacker')->label('Slacker'),
        ]);
    }
}

class GoogleCalendarServiceType extends BaseServiceType
{
    public function form(Form $form): Form
    {
        return $form->schema([
            TextInput::make('slacker')->label('Slacker'),
        ]);
    }
}

4 replies

Gaming

Programming