"D" Delete | Delete component | Laravel Livewire CRUD

hi everyone trust you all are doing well so this is the last part that we're going to do for our cut series is the delete part right there so what i'm going to do is if we press this button we need to get a modal popping up right here to ask us are we sure if we want to delete the stack then press the delete button and actually deleting the tag right so that's what we're going to do so let's get started right so let's open up our terminal and quickly create the components of php artisan make lifewire and we're going to call this one inside the tags folder and we're just going to call this one delete just like that right so now our class and view are created so let's go there quickly under mcp live wire you will see we have a tags right here and we have the view right here under livewire tags to delete all right so we got those two so let's open up those two now the next thing we need to do is we need to link this delete component in our index field so let's go there under app and then actually let's go quickly http livewire tags index this one right here we want we listen for that saved event okay so let's go to the index view right here and just underneath let's just give some room like this so underneath our edit button we just want to add our delete button right here so let's quickly link our livewire component so livewiretext.lead we need to pass in the tag to in order to know which stack we're going to delete all right so i'm just going to pause in the tag okay this can be quotes in there right and we need to add a wire key okay and it's going to equal that to single quotes and then double quotes inside single quotes inside the double quotes and we're just going to call this one the lead tag just to kind of create a unique key and then we just want to concatenate on this one the dark id right for this one we don't need to add the now timestamp in there to re make this component reactive because this one will be deleted so there's no need for this one to be the active to the parent component what i want to do as well is i just want to give it a class on the component itself basically all the table data so this table data right there where this component are nested in okay so what do we want to do we just want to display them flags and we just want to make them a space let's have a space x of six there's some spacing between them so let's just quickly let's make it fall right so this is our delete button so let's quickly just put delete like this so that we can just see what it looks like all right so as you can see it doesn't look very nice but we can see the different delete right there okay so let's make this functional all right so let's start off with the delete component itself the first thing we need to get the tag so let's just quickly create it so public we need to get to receive the tag and the next thing is we need to obviously toggle the modal so we're just going to say open modal and we're going to set by default to false just like that the thing that we could have done is we can actually by default we can make a trade for this for the modal and all that kind of stuff instead of having to use it in all the different models having to type it all out we could have just created it right but since we're learning some people might just see this video they might not even see the rest of the videos so that's why i'm doing it like this but what i would do i normally i don't like to repeat my code so i would normally just create a trade or a blade component for reusable code and etc all right but i'm using doing this for learning purposes okay so the next thing is we're just going to say create a public method to actually open to open the model so let's just quickly say open modal to delete all right so that's the one and then we're just going to simply set the outer banks reset okay the next thing that we want to do is we want to basically open the model and we want to set that to true okay so as you can see right here this easily usable code that we can just create a trade for that all right so the next thing we're going to do is we're going to create a method called delete so this will be responsible for actually deleting the tags so what we're going to do is we're going to say just this tag and we just say delete just like that all right no funny business right and then we're just going to dispatch a browser event so dispatch browser event and we're going to call this one tag delete it i just wanted to just make it create a variety so that you guys can see the naming it's what you name it here is kind of what you listen for right so this one we're just going to say the title and we're going to set the title to tag deleted like this okay and then we're just going to set the icon we're going to set the icon basically to warning right and then after that we just want to check the icon color so icon color and we just want to set that to red just like this all right so after we dispatch the event what we want to do is well we want to emit an event to we can say emit like this or we can say met up so mid amp will only emit to the parent component so the parent will listen for this so this will be a good actually good example to use it in in the previous episode we used the basically just admit and it will just omit an event right throughout the application so whoever needs wants to listen for that event they can listen for it but in this case it will only a mid amp will only admit to the balance component in this case it will be the index because we want the index to refresh so i'm just going to emit a saved event basically to the parent and i'm just going to say this reset like that okay so we can do to either or we can do the emit but it goes everywhere if we just do a mid up it will only go basically the pattern so the parent in this case will be the index because if we look like this delete button is nested inside our index component okay awesome stuff right so we omit that we dispatched that event so let's quickly go to the view itself okay in the delete view right here there's a couple of things we need to do obviously in here but we have to make sure whatever we do we do that within the two dips and not outside okay so let's start off with the first one we're going to give this div a class of padding of two right and then inside here we're just going to this is going to be basically our delete button okay so the so i'm just going to create a div with the flags and then get [Music] therefore right so in there now we're just going to get huge jet stream so we're just going to do a x jet button okay and this is going to be x fa l i'm just going to use basically blade ui kit icons so okay and i'm just going to say trash and alt so this is basically a formed awesome icon i'm just going to do the class of so with the form and a height of four and i'm just going to close up the deck like that now this button i'm just going to give it a class or bg red okay so bg let's say 590 bread and when we hover over the button we're just going to do a 400 just like that okay but what is going to happen so if we click this button right here i want a wire okay so wire click i'm gonna listen for click event as soon as we click this button we're gonna call that open model to delete tag all right so this one right here so we're gonna click on this one right so if we click the button it needs to do this inside that method all right so after we finished with that we need to create an x jet dialog modal okay so this is going to be responsible for actually the pop-up the pop-up that we're going to see is this one's responsibility right so what we want to do is we just want to do a y model and we equal that to the open model okay that right there so this needs to open all right let's start off with the first one this is going to be the title okay and the title is going to equal to x slot and this is going to just have a name it's going to equal to basically the title and we're just going to do localization and we're just going to say the lead tag or some stuff now the next thing we need to do this is for the content so let's go to the content all right so x slot all right for the content and this is going to be let's put the name actually in there this needs to name it's going to equal to [Music] content right i'm just going to show for the people that might wonder where i'm getting the title and the content from so if you publish your jet stream vendor folder okay so then we go under resources views the vendor file components you will see that we've got a dialog model this one right here and you will see it's called content and it's called a title title right there and content and here is the footer right so if you want to add extra attributes you can do that to your model itself you want to make it bigger give a different background color you can add all those things right there because there's an attribute back right here let's let me just close this off all right in this spot right here you can type anything you want but the message i'm just going to say are you sure you want to delete the tag okay so i'm just going to i don't i'm not going to go watch you guys let me watch typing it all out all right so let's move on to the next part so this is the footer part okay so this is the footer where all the buttons is going to be so it's the never mind button and it's going to be the delete button all right so let's quickly do this all right so i'm just going to do an x slot again right so this is going to have a name and it's going to equal to the footer all right now for this one we're going to create an x chat button so this comes with the default installation so it's a secondary button if you if you've done a jstring installation right so this one we're gonna say you're responsible for toggling the model so if we say if we basically the pop-up appears but this one what we're going to do is we're just going to toggle open model if it's set to true we just basically set it back to false so toggle that and we're just going to say open mode okay and then yeah we can just do nevermind just to kind of stay consistent with how they actually created the whole jet stream thing so never mind right so that's our cancel button so i'm just going to call this one cancel button okay so the next part right here this is our delete button all right so what i'm going to do now is i'm just going to create the same thing i'm just going to use the warning button so they got actually a danger button i'm just thinking in terms of bootstrap right now so this is exjet danger and button right so this also comes with jet stream so like i said go and check under the folder that i just showed you guys in a second so in here we're just going to do a wire click and if we click this button we need to go to that delete method the method that we just created right there that will delete this okay so after that so while that is busy we're just going to add a loading attribute okay and we just want to disable this button so just it's able like this okay so just delete this just like that and i'm just going to add some localization which we're not going to do but i just want to stay in the habit of doing it and i'm just going to say delete tag like that now the thing is we need to now because remember if soon as we delete the tag i want a message to appear and we're using sweet alert to do that so i'm just going to add an add push okay so the push this part is for the scripts okay so and we're just going to create a script tag and inside that we're going to listen for the the browser event okay because we're dispatching this browser event to that component okay so window dot add event listener right so for what event we're going to listen to for the tag deleted event so let me just quickly show you so as you can see this event i'm just going to copy it just to prove so copy that paste it in here just to make sure you have the same spelling sometimes just a simple spelling mistake can give you the stupidest arrows okay so then we have a function all right and i'm not going to type in everything since most of the things we already done in the previous couple of episodes so i just want to we're going to get this while for those that are new fire okay so where i'm getting this from so if we go to resources js fjs i'm referring to this window.style that's equal to the sweet dillard right there so i'm calling on this right here okay so swall.fire now the thing is inside here we gonna create a couple of methods okay so let me just put this in there all right so we need to set the title and the title looks like this the title is going to equal to e dot detail title and i'm going to do that list okay right so then we go down icon icon color the time is set to three seconds all right then toaster is true let me just set it to fall so that you guys can see how big it is or you can experiment just set it to false then you will see for yourself and the position is top right just play around with the position and all that kind of stuff all right so let's quickly see how this all work all right so let's quickly delete the tag so i'm press on the button all right let's press delete the tag as you can see tag deleted and it removed it right there right so that's an end of this episode guys if you like the video if you have any questions or feedback or suggestions please give the video also a like and then if you have any feedback suggestions please leave us a comment section and thank you guys for watching see you in the next one and adios

Channel: AngelJay Academy

Views: 226

Keywords:

Id: neIi-gzHco0

Length: 16min 42sec (1002 seconds)

Published: Mon Nov 22 2021