Laravel Livewire 11 Using the Modal or Dialog component

This section is an expansion of the alert component that we showed earlier in another chapter

 

The reason for this expansion is because we want to adapt the CRUD module we created for the categories so that it integrates visually as well as possible with what we have in Livewire by default if we review some options available by Livewire such as deleting groups

You will see that there is an existing component that we can easily reuse the one called confirmationmodal which has 3 parts

1. Ttitle

2. Vcontent

3. Footer

With this body in mind for the listing we are going to make the following adaptation

resources/views/livewire/dashboard/category/index.blade.php

***
{{ $categories->links() }}
<x-confirmation-modal wire:model="confirmingDeleteCategory">
    <x-slot name="title">
        {{ __('Delete Category') }}
    </x-slot>

    <x-slot name="content">
        {{ __('Are you sure you want to delete this category?') }}
    </x-slot>

    <x-slot name="footer">
        <x-secondary-button wire:click="$toggle('confirmingDeleteCategory')" wire:loading.attr="disabled">
            {{ __('Cancel') }}
        </x-secondary-button>

        <x-danger-button class="ml-3" wire:click="delete()"
            wire:loading.attr="disabled">
            {{ __('Delete') }}
        </x-danger-button>
    </x-slot>
</x-confirmation-modal>

Explanation of the previous code

We fill in the title and content with the corresponding data the most interesting is the option to delete a category which was migrated to the actions section for when we press a delete button although it has an important change since now we are not passing the category we want to delete by reference we established this from before from the actions links section in the categories table

<x-danger-button wire:click="seletedCategoryToDelete({{ $c }})">
   Eliminar
</x-danger-button>

This intermediary process is due to the fact that we cannot pass the category reference directly since in the list we have N number of categories and only one modal therefore when we press on deleting a category what we do is save the reference to the category that we want to delete in a property in the component class

public function seletedCategoryToDelete(Category $category) {
  $this->categoryToDelete = $category;
}

The definition of the select Category To Delete function is defined in the component class

app/Http/Livewire/Dashboard/Category/Index.php

class Index extends Component
{

    use WithPagination;

    public $confirmingDeleteCategory;
    public $categoryToDelete;

    public function seletedCategoryToDelete(Category $category)
    {
        $this->confirmingDeleteCategory = true;
        $this->categoryToDelete = $category;
    }

    public function delete()
    {
        $this->dispatch("deleted");
        $this->confirmingDeleteCategory = false;
        $this->categoryToDelete->delete();
    }
}

Video Transcript

Before starting with the theme of this video I wanted to tell you that here I changed from px which was what I had before in the th or the th and the tds to simply p so that the padding is both vertical and horizontal but again the style depends a lot on you on how you want to adapt it and your vision So now the next component that we are going to want to present would be the confirmation model Note that this is good use the model if we write here model here We have one called modal and if we check it a little you will see that well it is a bit abstract it is not really that it is complicated but it does have some tel classes or some Alpine attributes and the most important thing is that this is adapted for what would be the classic scheme that we place a title we place the message and also the part of Flutter that corresponds to the action buttons with its ccs ready to use understand the Tailwind classes while this is a bit more generic you can show it for example to place an image or something like that then here you can see a possible adaptation of the modal dem since it is a component inside another component Well its not something new anymore because weve already done it but still I think its important to mention it So were going to use this one because its the one that adapts to our needs and what exactly we want to do lets remember that here we have a confirmation dialog of course its a little sober its the one we have defined there by default for what would be javascript and we can take advantage of it a little more then its important for you to understand the implementation that were going to carry out that is a little bit elaborate with respect to what weve done before if we do it here youll see that we have a confirmation dialog here we have it exactly this one of confirmation that we have here for each item that is to say if we had 10 categories listed here here we would have 10 confirmation dialogs but the same doesnt happen with this one that were only going to use it once That is to say were going to have one for n categories listed here and of course those n categories listed here we could eliminate them with this dialog So what I want to get to is that we need a mechanism with which we can first select the category and then adapt the modal so that it performs its action which is either cancel and do nothing or delete it So thats why Im going to show you a little bit about the implementation now its a bit like what Im telling you here we have this dialog and we obviously want to change it for something nicer because the idea of this section is to work with the components and styles whether we create some ourselves or reuse the existing ones Then we use the confirmation in the following way and you can see it there if you enabled the equipment part and youre going to delete a team you can see it there in the same way right now were going to use it as Im telling you Here we have three blocks the title block to place there as they say the main action delete in this case category the content that indicates Well youre going to delete the category surely you want to delete it and its going to be permanent and anything else and the foter block to place the actions Cancel and delete there usually the implementation that were going to carry out would be like the following we place the confirmation model here here we place what you can well see on the screen based on what was commented the actions well the typical buttons if you want to delete it you dont want to delete it etc and its a bit what was commented

I will explain it to you in the same way here the most interesting part is that we are going to create a method at the component class level that allows us to select which is the category that we are going to delete and with that we are going to adapt the modal to which category we want to delete So here we are going to have a property that indicates which category we want to delete which is the one that we are going to delete in the end using the delete method Here as you can see category to delete we put a delete So that would be the scheme We have one more step again to select the category that we want to delete and here we delete one at a time so we can adapt it that way For the rest here we also have a property that indicates whether or not we show the confirmation dialog which I have not told you about but it is done through a vmodel If it is true we show it and if it is false we hide it So that is the explanation We have already invested some time So lets start the adaptation

Adaptation

Im going to place it up here and now we write what would be x confirmation modal Im going to place it sorry better down here for the links although it doesnt really matter and I wrote confirmation model here were going to place the slot the first one would be for the title for example I put it again here use the TR if you want for translations or put the text directly the following one would be for the content Well if youre sure you want to delete the selected category and here the action buttons which would be a little more elaborate here its called footer as we saw and here we place x secondary button I think we havent used it but in the end its a button with a different design here we use the event clit and in which we place a toggle a toggle for the property that were going to create we place toggle and here we indicate the name of the property confirm delete category

<x-confirmation-modal wire:model="confirmingDeleteCategory">
    <x-slot name="title">
        {{ __('Delete Category') }}
    </x-slot>

    <x-slot name="content">
        {{ __('Are you sure you want to delete this category?') }}
    </x-slot>

    <x-slot name="footer">
        <x-secondary-button wire:click="$toggle('confirmingDeleteCategory')" wire:loading.attr="disabled">
            {{ __('Cancel') }}
        </x-secondary-button>

        <x-danger-button class="ml-3" wire:click="delete()"
            wire:loading.attr="disabled">
            {{ __('Delete') }}
        </x-danger-button>
    </x-slot>
</x-confirmation-modal>

This as I told you is the one that we are going to define here at the level of our property I say of our class we put public and here we have this public Sorry public we are going to create a function here that is select category to delete which receives a category that would be the one from the list as we saw and here here we put t confirm delete category will be equal to true then now it would be another that we are going to expand here that indicates which one we are going to eliminate here it would be category category to delete category to delete will be equal to the category that the user has selected and with that we know which category we are going to want to eliminate and in the delete we are going to finish it since we are here we would no longer receive any of this I am going to comment there to have it as a reference but directly category to delete apart from this also and now we are going to give meaning to this confirm delete category would be equal to false as I told you true to show it and false to hide it

    public function delete()
    {
        $this->dispatch("deleted");
        $this->confirmingDeleteCategory = false;
        $this->categoryToDelete->delete();
    }

So now that at this point it has finished its purpose we hide it well this would be all the changes that we are going to make here it seems to me we are going to return here and what this does is the toggle refers to I put it in false and if it is false I put it in true we already have Here a function that we can use for free So that is what we are doing which receives the name of the property that we have defined here and that would be all here so what it does here is if usually if this is being displayed understand it also means that this is true therefore it will always put false Because the only way we can access this button Is that this is being displayed and therefore it has to be true here I wrote it wrong again confirmation So here we really put the anything I am going to put here cancel or close whatever you want and there we have the function of this button the next button Would be to now carry out the action or the action we put tanger Here I am going to put delete category this would be red and this would be like a gray and here we are going to call the method that we implemented before which would be the delete and now in the list instead of calling directly from the delete we would call the confirm delete that we defined here this select category to delete and now now from the delete we would call the select category to delete and the rest remains the same passing the parameter well Lets try it and Ill do a little review here it already appears Okay it appears like this to me Now that I made a mistake here okay Here I had missed the Play prints they were like this another important detail is that here we have to define the War model we place the confirming delete category here and it doesnt appear there we have no errors perfect we hit delete Oh sorry we havent changed the blessed event Here we also have to remove the propagation would be and now and now Here it is as you can see it appears a little stuck we can place Here also a class that is marg left of about three we save and there we have it and there would be the Cancel buttons it does nothing Im going to create a quick one here to delete it lets see if I create it I go to the next page and hit delete and you can see that it works correctly so in short as I was telling you the important thing is that you notice that now we only have one dialog for all the buttons and that is why we have to do the intermediate step of selecting the category that we want to delete and from there we have the category that we want to delete we already have it configured at the class level and therefore the only thing we do is verify through the confirmation dialog if we want to delete it or not and well basically what you saw and this property Remember that it is key and we use it to indicate whether or not we want to show our confirmation dialog for the rest it is an implementation or implementations similar to what we did before the cit to perform said action or some particular action and the rest to place the content so without further ado lets move on to the next class

07-09-2024 - Andrés Cruz

En español

• Category
• /
• Laravel
• /
• Laravel Livewire 11 Using the Modal or Dialog component