Actions column

[tiagosimoesdev]

Would you accept a pull request that instead of a delete column , it has a actions column ?

We can call like :

Column::actions('view','edit','delete')->label('actions')->alignRight()

View will go to clients/1 Edit will go to clients/1/edit and delete remains the same

Maybe we can configure a variable for view_url , edit_url . What do you think ?

[marksalmon]

Yes, definitely, that's a great idea.

Could it work so that the arguments to the actions method would specify which actions were displayed, so that users could choose any combination of view/edit/delete?

Happy to have config variable for urls (and route names would be nice) but we should provide sensible defaults like you have suggested above.

Also probably worth making separate blade partials for each button, so that users can publish and swap in their own icons as required - this is something I need to do more of throughout the package.

[tiagosimoesdev]

Yeah ,I'm working on it

[tiagosimoesdev]

Hi ,

Made it working like this:

//config.livewire-datatables.php added 'default_buttons' => ['view', 'edit', 'delete']

then in users.table.php

You can call like this ActionsColumn::all()->label('ActionsTitle')

in resources/views/livewire/datatables there's 4 new files

//actions.blade.php

<div class="mt-8 flex lg:flex-shrink-0 lg:mt-0">
    @foreach (config('livewire-datatables')['default_buttons'] as $button)
    @include('datatables::buttons.'.$button)
    @endforeach
</div>

// /buttons/view.blade.php

<span>
    <button class="p-1 text-indigo-600 rounded hover:bg-indigo-600 hover:text-white">
        <x-icons.view /></button>
</span>

// /buttons/edit.blade.php

<span>
    <button class="p-1 text-orange-600 rounded hover:bg-orange-600 hover:text-white">
        <x-icons.edit /></button>
</span>

// /buttons/delete.blade.php

<div x-data="{ open: {{ isset($open) && $open ? 'true' : 'false' }}, working: false }" x-cloak wire:key="{{ $value }}">
    <span x-on:click="open = true">
        <button class="p-1 text-red-600 rounded hover:bg-red-600 hover:text-white">
            <x-icons.trash /></button>
    </span>

    <div x-show="open"
        class="fixed z-50 bottom-0 inset-x-0 px-4 pb-4 sm:inset-0 sm:flex sm:items-center sm:justify-center">
        <div x-show="open" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0"
            x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200"
            x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
            class="fixed inset-0 transition-opacity">
            <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
        </div>

        <div x-show="open" x-transition:enter="ease-out duration-300"
            x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
            x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="ease-in duration-200"
            x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
            x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
            class="relative bg-gray-100 rounded-lg px-4 pt-5 pb-4 overflow-hidden shadow-xl transform transition-all sm:max-w-lg sm:w-full sm:p-6">
            <div class="hidden sm:block absolute top-0 right-0 pt-4 pr-4">
                <button @click="open = false" type="button"
                    class="text-gray-400 hover:text-gray-500 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150">
                    <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
            <div class="w-full">
                <div class="mt-3 text-center">
                    <h3 class="text-lg leading-6 font-medium text-gray-900">
                        Delete {{ $value }}
                    </h3>
                    <div class="mt-2">
                        <div class="mt-10 text-gray-700">
                            Are you sure?
                        </div>
                        <div class="mt-10 flex justify-center">
                            <span class="mr-2">
                                <button x-on:click="open = false" x-bind:disabled="working"
                                    class="w-32 rounded-md shadow-sm inline-flex justify-center items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:border-gray-700 focus:shadow-outline-teal active:bg-gray-700 transition ease-in-out duration-150">
                                    No
                                </button>
                            </span>
                            <span x-on:click="working = !working">
                                <button wire:click="delete({{ $value }})"
                                    class="w-32 rounded-md shadow-sm inline-flex justify-center items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:border-red-700 focus:shadow-outline-teal active:bg-red-700 transition ease-in-out duration-150">
                                    Yes
                                </button>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Now , I'm not sure what's the best approach for the user to set how the links would pass to the view . I guess he should configure in users.table.php a variable that's like $view_route , `$edit_route ?

After this PR I would like the user to make his crud with a modal or a slideover , we can instead of configure $view_linkand $edit_link we set $view_component , $edit_component and we call the livewire component dynamically inside the modal/slideover , what do you think ?

[danielbehrendt]

@tiagosimoesdev Awesome! Any ETA for a release?

[tiagosimoesdev]

Hoping to hear from the package author , if he thinks it's a good approach so I can tidy up thinks and make a PR

[marksalmon]

That all looks good to me. Go ahead and make the PR 😀

[danielbehrendt]

@tiagosimoesdev Any updates on this? 😀

[tiagosimoesdev]

@danielbehrendt made a PR last wekk , waiting for @marksalmon response. Not sure if it's the best approach , hope we can discuss what's the best way to implement it :)

[danielbehrendt]

@marksalmon Any update on this? Do you seen any problem with the PR?

[marksalmon]

please see comment in #25