Custom TextInput with suffix actions

Hello, I am creating a Timesheet App, and I want to create a custom page for the Timesheet resource, that shows the time entries (timebills) in a weekly view.

My goal is to have to have TextInput with suffix actions (edit/delete/approve) for each Timebill, and if the user edits the hours, it should update the corresponding Timebill record.

Here is the code for timecell.blade.php, that I am putting in the table. I have tried using the x-filament::input.wrapper, but I am stuck.

@props(['rowIndex', 'colDate', 'timebills'])
<ul class="grid grid-cols-1 gap-1">
    @foreach($timebills as $t)
    <li wire:key="timeli{{$t['id']}}" class="relative inline-block col-span-1">

        <x-filament::input.wrapper>
            <x-filament::input type="text" wire:key="timein{{$t['id']}}" value="{{ $t['hours'] }}" />
        </x-filament::input.wrapper>

        <?php /*    
        <x-filament::button size="xs" wire:key="timebt{{$t['id']}}" wire:click="editTimebill({{ $t['id'] }})" outlined>
            {{ $t['hours'] }}
            {{ $this->timebillActions($t['id']) }}
        </x-filament::button>
 */ ?>
    </li>
    @endforeach
</ul>

@props(['rowIndex', 'colDate', 'timebills'])
<ul class="grid grid-cols-1 gap-1">
    @foreach($timebills as $t)
    <li wire:key="timeli{{$t['id']}}" class="relative inline-block col-span-1">

        <x-filament::input.wrapper>
            <x-filament::input type="text" wire:key="timein{{$t['id']}}" value="{{ $t['hours'] }}" />
        </x-filament::input.wrapper>

        <?php /*    
        <x-filament::button size="xs" wire:key="timebt{{$t['id']}}" wire:click="editTimebill({{ $t['id'] }})" outlined>
            {{ $t['hours'] }}
            {{ $this->timebillActions($t['id']) }}
        </x-filament::button>
 */ ?>
    </li>
    @endforeach
</ul>

Any guidelines and/or examples would be greatly appreciated.

Custom TextInput with suffix actions

@props(['rowIndex', 'colDate', 'timebills'])
<ul class="grid grid-cols-1 gap-1">
    @foreach($timebills as $t)
    <li wire:key="timeli{{$t['id']}}" class="relative inline-block col-span-1">

        <x-filament::input.wrapper>
            <x-filament::input type="text" wire:key="timein{{$t['id']}}" value="{{ $t['hours'] }}" />
        </x-filament::input.wrapper>

        <?php /*    
        <x-filament::button size="xs" wire:key="timebt{{$t['id']}}" wire:click="editTimebill({{ $t['id'] }})" outlined>
            {{ $t['hours'] }}
            {{ $this->timebillActions($t['id']) }}
        </x-filament::button>
 */ ?>
    </li>
    @endforeach
</ul>

@props(['rowIndex', 'colDate', 'timebills'])
<ul class="grid grid-cols-1 gap-1">
    @foreach($timebills as $t)
    <li wire:key="timeli{{$t['id']}}" class="relative inline-block col-span-1">

        <x-filament::input.wrapper>
            <x-filament::input type="text" wire:key="timein{{$t['id']}}" value="{{ $t['hours'] }}" />
        </x-filament::input.wrapper>

        <?php /*    
        <x-filament::button size="xs" wire:key="timebt{{$t['id']}}" wire:click="editTimebill({{ $t['id'] }})" outlined>
            {{ $t['hours'] }}
            {{ $this->timebillActions($t['id']) }}
        </x-filament::button>
 */ ?>
    </li>
    @endforeach
</ul>

Any guidelines and/or examples would be greatly appreciated.

Custom TextInput with suffix actions

Similar Threads

Custom TextInput with suffix actions

Similar Threads

Similar Threads

Similar Threads