"U" - Update | Edit component | Laravel Livewire CRUD

hi everyone joshua doing well so in this episode what we're going to do is we're going to create another livewire component for edit so that we can have a edit button right here so that if we click this button then we can be able to edit any tags that we want all right so let's get started right so let's open up your terminal so then we're just gonna do php artisan make livewire and we're gonna go inside the tags folder and we're just gonna call this one edit all right so let's make a commandment so as you can see we've got a class right now and we created a view so let's quickly go there and the app acp livewire under tags all right so for those that have been following the series you will see that i just changed my store one just to create kind of just to keep the restfulness of the of the folder so right now i'm just going to have create edit and index and i will have a delete one in the coming episode right so let's go to the edit one right here now this is our class and this one is our view right there now before i do anything in here so let me just call this one just edit for now right and what i'm going to do in my index view where i'm going to use that edit view so let me just bring it in here so i'll edit component so what i'm going to do i'm going i have to link it right here so livewire tags edit but now this important thing we need to do because we're going to pass through the tag to the component okay so we're just going to pass the tag so we can receive this tag they'll be looping over right here and we're going to pass that to the component but here is the important note as well both are important but i just want to emphasis on this one right here so the wire key you can use wire key or you can just use key both up to you now the thing is since we're using a nested component the reason that's why i kind of like to do this lesson right now because if you're doing nested components you need to understand that in order for livewire to keep track of everything that's happening inside this basically inside our index component and to keep track of his children right here it needs to have a key otherwise it won't know because all of these let's say we're looping let's say 20 tags all of them is going to have probably the same identity key and that is not the ideal situation you want to be right so what you want to do is you want to sign them a very unique key all right so what i'm going to do i'm just going to do a wire my key so just for you guys to have both right so just going to put right so another thing is we could let me just give some room here so what we have is we got our double quotes and then we have our single quotes now in our single quotes what i'm going to do i'm just going to call this one edit all right tag like this right and then inside that i'm just going to concatenate the tag id just like this all right now what will happen now is for every single tag it's going to have a unique of edit tag with like edit tag one or edit tag two or edit tag three now let's say we add another nested component now in this case which which we will do is we will add the love wire text or delete and it's also going to have a unique key needed so in that case we're going to do delete tag tag id and etc etc but i'm just going to mention this very quick because i'm going to explain to you later in detail now the thing is you must understand if you're coming from vue.js or you're coming from any other javascript framework in livewire the children components are not i'm just emphasizing not reactive so if the pattern compound the component change the children don't react to the patterns change so there's a kind of little hack that we have to do in order for the children to be reactive to the pattern but i'm going to explain that to a little bit more detail when we get to that part okay so for now just bear with me the little hack that we have is just we can add just a now timestamp to force the child to be reactive to the pattern if you don't understand that you will understand a little bit later all right so what i'm going to do i'm just going to call this one edit button okay so for now let me just delete this one all right so now this is basically the edit button that we have right there so just edit so i just need to see that edit okay so let's quickly see all right so as you can see we've got our edit button right there another thing i just want to show you i just likely want to show you the documentation all right so i just wanted to show you guys this if you go to nested components under the documentation if you want to go and read more about it just read this part right here nested components can accept data parameters from their patterns which we have just done right now we pass through the tag to the child component however they are not the active like props from a view component okay very important you will see when we progress that they actually are not the reactive so what we have just read right now we've passed this data from the parent component to this child component all right so whenever this child this parent component updates regarding the tag the child right here will not be reactive to the change of the attack but anyways we will get there i don't want to hammer it to death i will get there in a second all right so let's go on so now we need to update our class let's go to our edit class right here okay now there's a couple of things i want to do so you must also remember if we have a form in here which we're going to get to but let's let's not jump ahead okay let's go to our edit class right here just remember we're passing let's just open right so now we need to receive this tag so let's quickly go there so in the first thing we're going to create a public property and we call this one tag right here so that's the first one the next thing is we want to create a model as well so if the person clicks their button they need to get modal popping up to allow them to edit the tags okay that's the next thing so we're going to do an open modal and we're going to set that by default to be false which makes sense otherwise every tag will have an open module and that will not be nice the next thing is public function uh public method property actually we want to call this one a form id you will understand so if let's quickly let me just quickly show you where this is coming from so if we go to our grade because we're going to create a form to actually submit this tag to the component right so let's quickly go to this one right here now if we have a form right here and we click this button right here okay so right now we don't need to give an id to this form right here because this form id and this button is only one of them but now remember in our edit view this one right here every single button will have a unique form and we don't want to use basically just one id for that form so we want every form to have a unique id so when we click the button it will actually correspond to the right one but you will understand in a second okay so that's the form id right there now what i want to do is i want the mount method so this just treat this as a constructor okay so i just want to give the form id a unique id of the tag so i'm just going to say this form id all right the form id i'm going to equal that to the tech id like this okay so that's the first thing so we just mount that tag that we receive from the component itself so from the component right here the one that we're passing through to this view to this component actually we're just going to get the attack id to assign it to that form id but you will understand right so let's quickly move on to the next part all right we need to create the rules so what we're going to do is we're going to do a protected rules okay so the rules and that's going to equal to just because we're going to deal with just the tag name so just remember we're passing in the tag right here so what i want to do the tag name is going to equal to it must be required all right and then it must be unique string all right the diagonal must be unique and it must be a max of 10. right so let's move on the next part right here is for the real-time validation if you guys remember from the from when we create the tag right so public function this one is going to be updated and we're just going to listen for the property like this and let me just connect this validate only so for real-time validation and we're just passing the property like that okay so nowadays for the real-time validation right let's move on now this one is going to be to basically open the model or close the model okay so let's just quickly public function and we're just going to do it open modal to update tag all right and then we're just going to say reset the error back so this at least said arrow back this one right here and the next one is this we're just going to say this dot open model and we're just going to set it to true so this will basically open the modal off that be by default we set false and here we just open it right so let's quickly create another method in here and this is going to be actually responsible for actually updating the tag so the tag that we received so this tag all right to be received from right here okay so that tag all right we want to call a update method on it so update all right and then we just want to pause in a couple of things in here and the only one to be doing right now is the name and we just want to say to this tag name just like that all right what i will do i'm not going to add any flash anything like that since we installed suite alert so i wanted to i want to deal with that in the next episode so where we i'm not going to dispatch it from here right now i'm going to do that in its own episode all right so i'm just going to say it right for now to this reset because i feel like there's a lot that i will have to explain to kind of make more sense otherwise i'm going to rush through it and you guys will run into a little bit of things that you guys not quite understand and i don't want that to happen i kind of want to make things to make sense for you guys all right so right so now we finish with our class for now the next part we're going to dispatch it because there's two ways we can do this for sweet alert we can either send this browser let's just quickly let me show you the two all right so we can dispatch an event or we can this omit an event right they're both ways we can use for sweet delete all right but i want to explain that's why i want to kind of dedicate that to its own episode so that we can learn quite a number of things from it right so then we reset that all right let's quickly go to our tags edit view this one right here this one is actually responsible for having the form and everything and communicating with our component right there all right now what we can do is let's go to our create one just to make it easier for us let's copy everything inside your create or if you have the other one if you didn't change your name your previous name was store just copy all the things in the store right there and just paste them in your edit view like this all right so let's quickly make a couple of changes in here all right to check the error now the only change we need to make this doesn't mustn't be just a name so we must actually include the tag name like that okay because the attack parameter that we're passing through right so this instead of a create tag this needs to be edit just like that all right and this needs to be i'm just going to make this yellow just like this all right so when we click this button open modal to update tag not the text so we're just going to call that update1 so let's go in here you will see i'm calling on this update model to update tag open module to update that that one right there okay so the alert message will disappear i'm not going to make use of the alert message okay actually what i want to do i want to use blade ui kit icons instead of the edit tag but for now let's leave it like that right so we gotta open modal so this is basically if we click this button this needs to be set to two and then we'll open this right here now as the title stands right there i'm just going to call this one update tag like this okay so i'm just going to put update actually there all right let's move on the next part is quite important the next this part right here the update this needs to correspond to the method this method right here that's responsible to update the tag so we need to change this to update all right the id for the submit form just remember because we don't have the button just for those that are new please bear with me right for those if the button is not inside the form we give it a unique id to correspond to the outside button right because in that button we have a form and we correspond that name right there to the name of the form right there okay so that's why we want to give every form a unique id if you don't want to do this you just add a button or submit button between the form that's right there okay anyway let's move on now the thing is i want to give this one a name of update form okay so otherwise it's going to look for that all right and we're going to just add that form id okay so this form id just to kind of give it a unique name because remember the form id i set it to the tac id of the passing parameter that we received from the parent component okay so the form id right there okay let's move on the next thing is everything stays the same in here except now we don't get the name we're getting the tag dot name okay so let's just change the name let me just copy this part right here and let me just do it actually like this so we're just going to put tag dot notation so tag dot like this and the error is tag dot like that all right so just make sure you change them from tag dot because we we actually do write model so we're just getting the tag right here and as you can see we validate the tag dot name like that okay so that's the first part now let's move on the footer everything still stays the same because remember we're using the same property they'll be toggling right here so that one right there okay so that is the never mind now the other thing since we doing the form submit right here we need to change that to be correspond to this name right there so i can copy everything in there and paste it in here and that will be for luck having the same same name so if i click this button it will correspond to this form right there now the thing is this wired target and we want to target the update like that all right awesome stuff all right like i said i want to handle the emitting of the event for the update event in the next episode but i what what what i do want to do in here is i want to add an ad push the scopes so that i don't have to do that in the next episode all right because what we're going to do we're going to listen for the either the emit event or the dispatch event right here okay so let's quickly go to our layout view so under resources views layouts right here and i'm using the guest layout i'll edit the add stack script just make sure it's underneath your lap wire scripts just like that okay not above it okay so let's just do it like that right so now in the next episode what we're going to be doing is if we actually put any scripts and listen for because we're going to dispatch the suite alert from here all right anyways let's quickly see if we can get this button and this model to work all right so let's click this button right so as you can see it popped up the modal with the details in there right so anyways that's in the end of this episode what we're going to do in the next episode we need to add our swedish and there's kind of a couple of things i want to show you guys right there right thank you guys for watching and sorry that it's a little bit of a longer episode but i really wanted to explain a little bit more in there so if you guys want to skip through the video all good but for those that want to learn something they can learn it in there otherwise i'm just being skimpy all right thank you guys like the video comment feedback suggestions for me in the comment section and see you guys in the next one adios

Channel: AngelJay Academy

Views: 200

Keywords:

Id: _cgfwQbKq5I

Length: 19min 12sec (1152 seconds)

Published: Mon Nov 22 2021