Laravel Livewire CRUD Tutorial

hi everyone trash you all are doing well so in this series we're going to learn how to build a laravel livewire cloud application my current version for laravel is 8.6 my lifewire version is 2.5 now the reason why i'm showing you that is because if you're watching this in the future yours might be a little bit different it's lifewise can be under active development so things might work a little bit different for you so please just consult the documentation if it doesn't work out right the next thing is we're going to build a full price component so it meaning we're not going to make use of controllers so everything is going to run through our laptop component now the next thing is this is not going to be a single page application if you used to react or view then you will understand what that means the next thing is we double links are no longer supported or under active development so lifewire team please can you think of and come to a solution for us if we want to build a single page application now the next thing is someone might ask me why don't put everything under one video if i do that the video will be a bit too long and people don't like to watch the long videos from experience right so i want to kind of keep it short and precise so that we can go through all episodes one by one and maybe later i will add everything to one video for those that prefer the longer format right so let's quickly get into this and let's create our livewire component all right so in order to create the livewire component just open up your terminal and php artisan make lifeline and i'm just going to use tag because what we're going to do is we're going to create a cut application in order to create a tag right so let's just do that i'm just going to call it that like that as you can see it will create a class for us and it will create a view so let's quickly go there right so if you go to your app http live you'll see you've got a folder right there and you'll see the class in here so this is our class right here the next thing is if we go to resources views live wire and you will see our view right there okay so now the next thing that i want to show since we're going to create a full page live wire component okay so let me just quickly show you these two things on the resources views layouts right here i'm gonna create just a new one anonymous one so let's just create a new file and i'm gonna call this one just mine.blade.php okay so i'm just gonna create a boilerplate quickly and if you're using older versions let's say in laravel seven we didn't use slots we use add healed okay in this case i'm just gonna do a body like this okay or content let's do it like this content so if you guys using older versions i want to show it for both how to do it right so let's start off with the first one okay so if you're using the older versions you will probably have the yield content and not the slot like this okay with the newer versions all right so if you're using the older versions let me just quickly show you then how to in order to actually render your full page component in there what we do is we do an extends okay and then extends which layout now you must choose the layout that you're going to use now in this case it will be layouts file dot main okay so that i'm referencing so basically what it will do is it will go to resources views layouts and it will go for this main file right there now the next thing that we need to add in here is the section the section where do we want it to be so in this case we're going to yield content so it's going to look for this one right here so we're going to add the content in there okay so that's the old way that we're going to do things without slots just make sure that you do it like this the next way okay so the next one the next one will be let's say you're using slots in this case it will be under our guest file let me just go there resources views layout you will see we've got the app and the guest so i'm just going to delete this one okay i'm not going to use that since i'm using a json installation so this is all good for me all right so i'm going to use either the app or the guest okay because if you're using the dashboard for your lifewire card on the app it's kind of will be needed right so let's quickly do that so under our attack right here what we do now is we're just going to call it layout like this okay layout and then we can just by default it will go to the app uh layouts.app okay but i'm just going to show you guys this so layout like this it's going to go anyway by default to that one now let's say you don't want to make use of that we can just type in the guest layout all right so as you can see under my layouts right here you'll see we got a guest cloud right there okay now the next thing that we need to add in here is the slot okay so what you can do now is you can just add the slot like this so if you wanted to go to a specific slot in your layout view so let's say we've got a guest layout by default if we don't add the slot like this okay so by default it will go to you make use of this slot okay which is all good which we are going to do now let's say you have another slot in here okay and we're going to call this one body okay and let's put that between a section tags just like this okay so let's say there's another slot in there called body so in order to make use of this slot instead of the main slot what we do is we add the dots slot like this and then we add the body like that okay so now our lifeline component will know that it need to go to the slot right there instead of the main one but if you want to make use of the main one you can just basically remove this like this okay in this episode what we're going to do is we're going to create our tag model with its migration and cedar alright so open up your terminal in order to create a model we do php artisan make model we're going to call this one tag model the convention is singular so tag we add the dash m flag for the migration s for the seeder if you want to create a factory you can add f as well but we're not going to create a controller because everything is going to go through our livewire component so press enter so as you can see it creates that for us all right so let's see we go down the app models you will see we've got our tag model let's go open our migrations file under database migrations you will see we've got our text migration the other one that we have is obviously there's a database see that we will see we've got our exceeder right there right let's start off with the first one our model itself so what we're going to do is we're going to do a protected table and we're going to set that to self table okay and let's quickly create that constant so constant table and we're going to set that to be the tax table all right so this is just my convention that i use to set up my models okay so you can obviously instead of that you can just copy the tags and just bring it in here like this okay instead of that okay so that's the first one the second one i like to use protected fillables protected fillable for mass assignment i like to do this okay you can set it as two ways you can do protected fillable the other one let me just show you is protected guarded and you can set it to an empty array like this so what that will do is you completely you will have to check everything that you validate and all that kind of stuff right so i'm just going to leave to do the protected foldable because we're going to anyway going to do uh validation inside the lapid component but we're going to get there so the first one this will be just a name and the other one will be slug right just like that right so now our model is all set up so let's quickly do that in our migrations file so in our table right here so now tags migration okay we need to create the first one the table and this one will be a string and that will be for the name okay and the other one this one will be a table as well and this will be also a string and this will be a slug and we want to give it a unique attribute like this right so you can either add the unique key there or we can add it to the name because remember we're going to create a slug from the name so you can either do either or right so now that it's all set up so the next thing we need to do is we need to set up our tag table setup this one right here so what i'm going to do is i'm going to create the tv okay table and what i want to do in there i'm just going to call on insert right just make sure you bring in the db beside right there now the thing is we need to know which table so in this case we're going to do it in the tags table all right and i'm just going to create an array so the first one all right so the first array that we're going to put in this is going to be the name and we're going to create just i'm just going to call this one php just for simplicity sake the next one this one is going to be the slug all right so i just created three tags the php laravel and livewire and you created and updated it i just use the carbon helpers now and that one right there okay so now we can quickly see the database and migrate let's quickly do that open up your terminal i'm just going to do php artisan migrate fresh and you can just actually say my great and add just a desktop sheet it's completely fine and i'm going to do this okay so let's quickly create that as you can see it created the tables but we haven't seeded the database because we didn't call on the cd so let's go to database see this this one right here okay instead of the user table seeder we're just going to call it the tags here let's make sure i bring it in like that let's try again and as you can see it's seated the database so in this video we're going to create the house file application now i just want to leave a side note right there i'm going to do the videos as if you guys are new to the framework so if you guys understand it you can currently just keep ahead in these videos or don't even watch this right here until we get to the more complicated parts but there is some folks that are new to the framework so please bear with us right there's a couple of things that we going to be add to the series as requested by our viewers the first one is the real-time validation we're going to do that pagination and searching and multi-column filtering so if you guys want to add anything else please let me know in the comment section and we will do it so this series might just instead of being just a short one we might prolong it for those that want to learn extra things as well all right so let's get started with our routes all right so this is a standard route that we use in laravel so we this is a standard get round so what we're going to do is we're going to get that out we're going to go to tags and then we're going to go to the controller clause and then we're going to go to the index method in that controller and then we have the name for the round as index now in order to create one for livewire we just do a route we still have the same get right and we still have this same name how we would add the url okay so like this now the other thing that we do is now we just mentioned the class of that name so in this case we had a tag clause like this and then we can still add the name right here for that up okay is let's say we just call it text like that now this is very important if you're using your class like this you have to make sure you bring it in import it at the top right here this one but don't import the model okay this is referencing the live wire class right there okay so if you do that you can either import the class at the top or you can reference the full path to the clause like this okay so you can do either or i don't this kind of make my life look very cluttered so i don't like to do this so i'd rather import it at the top because it makes it quite easier for me right there okay so as you can see my class is right there okay so another thing that you can do you can use around group now let's say for our tags we had middleware now let's quickly create a route group with a prefix and a round name so let's quickly do that okay i'm just going to call this one tags so as you can see right now we've got a prefix of tags so we can actually remove this right here and just put a forward slash like that now we have a prefix of tags and we call the round name as tags dot so instead of tags right here we can just call it index or we can even remove it right there okay right so now the next thing let's say we want to add authenticated middleware okay so i'm just going to add the tags in there i'm going to remove the route name i'm going to leave the prefix and what i can do now is i can just add the middleware like this so i'm going to add middleware now let's say you want to have the default middleware the authenticated one and the email must be verified we can just add it like this and verify so now what will happen is before we access that live wire route we have to go through the middleware to make sure the person is authenticated and verified so even if you have created a custom middleware you can still reference it right here okay and as you can see the prefix of tags so you can obviously leave it like that okay so if you let's say you don't even need the prefix right here so what you can do you can still add your tags in there and you can just create a round group with the middleware forth and you can add all your different life wire classes right here in this episode what we're going to do is we're going to lay some groundwork with the partials for our head nav and the footer so let's get started right so let's go to resources views and you'll go to lounge i'm making going to make use of the guest loud you can obviously apply whatever you learn here and apply it actually to your app layer all right so the first thing we're going to do now is under components and the partials we're going to create three of them we create a footer.blade.php let me just open that add the blade and the nap right here okay so the first thing for the head section what we're going to do is we're going to cut out everything between the head tags and go to the head section right there and paste it in here okay so then we reference that so x partials right and the next one we're going to reference is the navigation so let's do that so x partials nerve and then the footer all right so let's start off with our head section so since we already copied it right here so what i'm going to do for the title i'm just going to cut out the title right there just move this up and put it right underneath the style right here all right now what i'm going to do i'm going to add a conditional right here so if the title is said then it must be that title otherwise we use something else right so i'm just going to delete that and just give it by some room there i'm going to add the blade syntax and what we're going to check for is set right and what we want to check for we want to check for a title variable and we're going to use slots to pass in the title and we're going to do a thinner operator and we're going to check config right so if the title is available go to the app name so app.name all right then we're going to concatenate a pipe right with some spacing in then we're going to concatenate the title that we're going to pass through else we do nothing okay just like that okay so if we now we need to receive this from our head section so let's go there so now we in our blade so we've been following the blade series you will kind of understand this all right if you don't please watch the blade series for us right so then you can do a title question mark if nothing's available you can obviously add anything in here you want so if the title is not available it's not passed through as a slot you could say um some page whatever the case might be okay so for now i'm just going to leave it empty okay so that's basically what we're going to do all right the next thing i'm going to do with my stylesheet i'm going to add an add push above our stylesheet right here so add stack okay and i'm going to call this one stylesheet right so if we need to push any extra basically styles we can include it right here so let's go to the next part that's part let's go to the nav right so you know navigation right there let's go we're going to put the nav and we're going to right so we're going to create a nav and inside that a ul inside that li and inside that we're just going to add an anchor tag all right so that's what we have right here all right let's start off with the anchor tag right here i just want to give you some room so the first one this one will be a route okay that will be our home route that we created i created a home run let me just quickly show you let's go to our web browser right here i just created another livewire component for our home route okay and then we obviously have our deck right there okay so that's what we're going to do let me just bring this down and this one will be for our tags right i just want to add some styling here so i'm just going to give it a class and okay so i'm going to give you the background let's say indigo indigo 500 and we're going to do flags and then we're just going to give it a padding of 2 and let's say space x of 6 okay and then we're just going to add the container class and we're just going to do a mx butter this will look a little bit better if we can add the class actually in here so bg indigo let's say 500 okay like that and let's do betting all right so this is going to be our home round and this one is going to be our diet so just for tags and we're just going to make the text white right so now we've got our basically our backbone so all groundwork done so i just need to just we can actually add in your footer and we can just say copyright make it an h1 just like copy right so if you want to add something more you can do that but i just kind of want to make it just simple right so let's quickly see how this all look like right so as you can see we've got our home tag and we got our tags like this so we got all of that done so all good stuff so let's quickly go to those views right so now our guest launch is all set up so the next thing we need to go is go to those views so i've got my tags fields right here so what i want to do now is i want to do for the x slot let me just actually do this x slot all right and this one is going to be for the name of the title okay and this one is going to be the title is going to be text this okay so i'm just going to do this one for the same thing for page title i'm going to the same thing for my home page let's be like water all right so if you've been following the blade series which i will pop up a link right here so if you guys want to go watch more about slots i'll link believe a link here so the slot that we're passing from a love wire component right here will be used inside our guest load right here for the title okay so awesome stuff all right so we've got a title for the tags and we've got a title for the home page right so if we go to the home page you can see it displays the home title right there so if you go to the tags you'll see it displayed right there just remember we not building a single page application and using any turbo links all right so that we don't have to do subsequent requests to actually refresh the page all right so in single page applications you can go to the different tabs without having to refresh the page but we're not going to use that i know you can use inertia and bjs to do that but we're using a lava core so i'm not going to do that in this case so we're going to start off with the c48 in our lifewirecraft series now we're going to create in this episode we're going to create a new livewire component called store inside a tags folder and we're going to do some real-time validation now everything that i'm going to do in the store right here you can do in the tag component that we created a couple of episodes back so you don't have to create the livewire component install but i'm doing this other personal preference because i like to kind of keep my things separate right totally up to you now the next thing that i want to show you under resources view is components i've got two components that i created the alert component and a button component the button is to actually submit the form and the message one is to kind of when the session has a message of success we display the message right here now these two components right here are easily downloadable i will leave a link in the description and i'll show you right so this is the components you will see the components.zip and you have the lids and the buttons right there just make sure you copy them and paste them inside your components folder and you paste them in here right here it's under components alerts and buttons right so let's quickly create our livewire component so you don't have to uh we'll quickly create this one and then we can get started so open up terminals so php artisan make livewire i'm going to call this one in a tags folder and i'm just going to call it store right so as you can see it created the class and the viewports okay all good stuff so on the app http live we'll see we got a new tags folder and i've got the store right there right so let's start off with the first one we're going to create a public property and this one is going to be for the name and obviously i'm not going to create an email inside that but i just want to do this for the real-time validation for anybody that might want to learn that right so when i do save the form i'm not going to make use of it i'm just going to basically just use that for real-time validation right so that's the two public properties the next thing we need to do is we need to add some rules right so this is what we're going to use for the validation so let's start off we're just going to create an array and inside that we're just going to have the name okay the name field we're going to make that required and we want to make that name unique it must be unique inside the tags table and the name title like this name column right and we want to do is we want to set a minimum amount of characters let's make it easy make it two and you can set it to whatever you want and we want to do a max of let's say 10. all right let's go into the email i'm just going to use the email i'm just repeating myself again just going to use the email just for validation because someone else might want to use this somewhere else and i can just learn it right here and we just want to check the email right here okay so just like that now the next thing right the next thing we're going to do is we're going to tap into livewire's class hook called updated okay so let's just quickly create it method right so this one is called updated now the thing is whenever we type something in an input field so in this case let's say the name right there this method this hook basically fires off now we're going to use this hook to do the real-time validation on the rules that we just created right there okay so let's do that so in order to do real-time validation you can do validate only all right so this is for the real-time validation if you don't want to do that you can just do validate okay so that happens when we submit the form then it's going to check the rules only there okay so what we want to do we do want some real-time validation now the thing is it's requiring a argument as you can see right there zero arguments now the thing is you can add anything and you want i can even call this one joe so and put it in here joseph that's not going to have any effect on my validation rules all right so you can just call this one like it is in a documentation property knife like this okay so you can do it just like that no problemo let's move on to the next thing this will be responsible so whenever this is basically the class book right here updated like i explained before so whenever anything happens in here this hood fires all okay and then what we're going to do is we're going to validate that all right the next thing is this is going to be responsible for actually creating the tag so public function and this one is the store right here and we're just going to bring in the tag just make sure we bring in the tag model and what we want to do is we want to run the create method on it on the static method right so what we want to do is we want to set the name to this name property that we created and the next thing is for the slug we want to set that to a string just make sure we bring in it as well to this name right so i'm just going to make sure i bring this in so eliminate support string and attack otherwise we're going to get an error that those classes are not found the next thing we're going to do is we're going to flash the session with the success message and we're going to just say tag you can be fancy or let's be more creative for this i'm just going to say that created and then we're just going to reset this input fields for the name and the email okay so that you can just say this reset okay so what that does is basically the input fields it just sets them to nothing okay right so the next thing we need to do is we need to obviously go to our view and we have to do some work in here so let's start off with the first one delete that and make this a section of this section and i'm just going to give it a class right so just give it a class of half batting for mx auto space y4 and shadow and inside that i'm just going to create an h2 with text small and it tags indigo or 500. just like this and what i'm going to do i'm just going to say create x right so under this we're just going to create a form right so we're not going to have any action methods like that so let's just remove that so any action attributes are removed the next thing we're going to do is we need to add a wire submit right here so we're going to use blackwire to do the submeta form but we just want to prevent the default behavior of the form so prevent and we're going to set this to our store method right here so let's just add the store okay so when we submit the form it's going to call on the store method and the store is this method to be created right there okay and i just want to give this a class of space y okay let's start off the next thing we're going to do is we're going to create a div with the same thing space y and inside this i just want to make it easy for us okay so if you're using a jet stream installation you go to resources views you're going to the vendor folder actually on the auth you'll see the login right there you can copy basically the jet stream label for the email and the input fields right there so just copy them and paste them inside your store all right and then we just change them to the name now the next thing we want to do is we want to bind our y model so y model and we want to bind that basically to the name property right here so let me just actually give this name like that but before i do that i just want to add a debunks otherwise we're going to do a lot of requests to the server and i just want to keep that to a minimum so i just want to add a d bounds of 500 milliseconds okay so the next thing just copy this one down and we're going to do the same thing for the email right so we got our ymodel.debounce for the email as well so just make sure you have that in now the next thing i just wanted to show you if you just put the xjet input error this is just part of the jet stream installation okay so if there's any errors right there it will display it like this okay so the next thing we need to do is we need to add our submit button okay so if you downloaded the link you can obviously use it so we can do like buttons just like this and then we're just going to add dot primary like this okay so that's the button that we just downloaded now there's a couple of attributes i want to add in here so i'm just going to do a wire target and i'm going to set that to the store method right so if the wire if it's loading right so what i want to do is i want to disable the button as well so attribute and we just want to say disabled all right the next thing is we want to say the button is type all submit and there's another important property right here and this is called disabled right and we're going to set it to a method that we're going to create in a second a variable called disabled i think is if we go to that button right now what i'm having in here is we're going to happen if if the disabled is basically true disable this button right there the reason for that is if the person has any errors all right so let's say if we type in here and the real time validation is letting us know listen they say error then we want to disable the button or if the fields are empty we want to disable the button as well so i need to create a method for that so let's quickly at the top right here we're going to add php tags and i'm just going to click that disabled variable and i'm going to set that to if there's any errors or errors we might just want to do a ternary operator so we're going to do any so if there's any errors okay we've got a question and then we're going to set it to 2 else we set it to false okay so this is the button and we can disable if there is any errors or we want to check if it's empty basically this name and or if it's empty this email just like that okay so basically we're going to disable the button if there's any errors or if the input field of this name is empty and if the email is empty okay awesome stuff okay so the next thing we need to do in here is we need to add the create right here okay so now we can work with this form now the thing is we need to link this component all right this one right we have created right here to our main component that we created this one right here so if i go in here what i'm going to do i'm just as you can see the tags right there so i'm just going to reference the create right there is livewire tags or stop right so now our livewire is all hooked up to our main component all right so i'm just going to close this off so as you can see we've got create tags and we've got the name right there and we've got the email address and as you can see the button is disabled we can't do anything the next thing i want to add in here is the alerts so just above the title i just want to do x alerts message just like that okay so now we got our load in here as well right so let's quickly see if our validation work so as we can see already the button works quite well so we disabled the button but now we just want to check if the real thumb validation work as well right let's start over the first one php as you can see the name has already been taken so if i just add one more you can see the name must at least be five characters so let's add one more again you can see it disappears but the button is still disabled all good so if i do email as you can see the email must be a valid email address and if we add email.com as you can see the button is displayed right there so if we create this you can see we get a message diagram and it disappears so we finished up with the creating the tag now what we're going to do is we're going to display all the tags and what we're going to do is we're going to search a dag all right right here and we can obviously order them so let me just do this we can order them by the name by the id so let's say the name we can order them ascending or we can do a descending and we can do obviously the created add date and we can display a harmony per page so that's what we've been building in this episode another question i just want to pose to you right up front right here let me know if you guys want this to be in separate views so as you can see we got the create view around here we got the index view so all on the same view underneath each other right there can be option or i can do a tags like this is the index view and then i can have a create view and then i can have a show view all that kind of stuff so i can put them all in separate views please let me know and i will see you guys in the comment section but anyway let's quickly start building this up right so the first thing we're going to do is we're going to create our index view so open up your terminal so php artisan make and we're going to make a lava component and we're going to do that inside the tags folder and we're going to call that one index all right so as you can see we've got a class interview created for us all right so let's go to the class under app sap livewire tags you will see we got our controller right here so i'll basically unlock our component now the first thing we're going to do is we're going to use pagination so we're going to say use with pagination just make sure you bring that in import it at the top as you can see it brings it in right there the second thing we're going to do is we're going to create a public variable called per page and we're going to set that to 10. the next one is we're going to create a public variable and we're going to call this one search this is for the search functionality and we're going to set that to an empty string for now okay the next one is we're going to create a public variable and we're going to call this one order by and we're going to say that by default to use the id okay and the other one is we're going to do a public order ascending asc asc and we're going to set it by default to true like this all right now the next thing we need to do is we need to be able to render that tag okay so let's just quickly do this all right so what are we going to do is we're going to pass all the tags to this view right so we need to get the tag so we're just going to do tag and we're going to create a static method inside basically our tag component called search basically our tag model called search and when we pass through we want to pass the search indeed search right so we want to pass that to the component and what we want to do is we want to order that by so order by and then we just want to say this what about so basically the method that we created there is of the public property actually and we want to save this ascending we want to check if we call on this method so order ascending if it's true use asc else use the ssc okay and what we're going to do is we're going to paginate we're going to paginate with the amount that we set it right here so by default i set it to 10 okay so we're just going to do per page so just actually we need to reference as this this page like that okay so now what we're going to do is we're going to get all the text we're going to create that method in a second then we're going to check we're going to pause in the search we're going to check if the order by by default right this order by is the id so if we change that to be the name it will search it by that name and we're going to order by by default it's set to true so we're going to do order by ascending so if this is true set it by ascending if it's false just set it descending and we just want to paginate it this page all right so let's quickly open our tag model and actually create the search method all right so just do like this tag model right let me just give us some room here so like this let's open up tag model quickly right in our tag model right here we're going to hit public static functions static function and we're going to call this one search and we're going to pass in that search variable like this right so what we're going to do if the search is empty all right so in this case let's say by default we set it as an empty string okay so what we're going to do if that search is empty so we can just going to put empty and we pass in the search variable okay so if it's empty just do aesthetic quit query okay so we're just going to do a static and then we're just going to do really all right else all right let's put the else in here let's put it underneath each other it will be better to read it actually so if the if the search is empty do this else we're going to basically do the static query i'm gonna move this i'm gonna do that query all right so we're gonna do that we're gonna check where in this case we're gonna check the id where the id is like percent ampersand okay ampersand and then we can just concatenate the search and then we can concatenate the ampersand again all right so meaning what this is is it actually got a whole lot of different fields let's say you're doing it for the post now in this case we're going to check if the id is equal to the search result basically right there so if we type in one we're going to check if the tag is equal to that the next thing we're going to do is we're going to check forward i'm thinking of water or where the name is like i'm going to check the now we ampersand concatenate the search like this all right so now what we're checking is we're checking whether id is like the search or where the name is like the search if you let's say we're doing like a post like i said before you can add a couple of always statements right here so let's say you've got a title you can add the title in there or the body like this and then you can just obviously end it off with a semicolon right here okay but we're not going to make use of that so i'm just going to delete this so just for if you guys want to do that for a post or whatever the case might be right so we can check the query right if this is empty by default we sent an empty string like that okay so it will be empty so it will just basically return nothing all right and if it's not empty we're going to check where the id is like that search that we pass through or where the name is equal to that search and if you have extra other fields in your database that you want to check you can do them like here or with always statements so in this episode we're going to work on our index view so i don't want to waste your guys time there's quite a lot to do so let's get started right so just pause the video if i'm going a little bit too fast but i'm a slow diaper so you guys can follow along so let's create a div with the flex or width of full uh let's just do the flex with full okay and inside it we're just going to give it padding of three and inside that we're just going to give you the space x of 2. right so this is responsible let me quickly go to our index right here this is responsible for all these kind of things so if we for a search box for our page for order by and for our ascending kind of stuff all right so that's what we're going to do so this step is kind of think of it as our heading so inside this one is we're going to create our search box so this is the first one we're going to do so search box okay and we're just going to create a div we're going to do the class of width or 3 6 or you can use one two right the next thing is in here we're just going to have an input and we're going to bind that basically to our y model of search right here so let's quickly do that it's a wire model we're gonna and we're gonna add a debunks we don't want too many requests to the service with every keystroke we want that to happen after every 300 milliseconds and we want to add the search field right there okay so there's a whole bunch of classes we're going to add so you can be creative you can style it however you want i'm just going to show you guys a few so let's quickly go relative round width or full right i'm quickly going to add some styling and if you guys want to add them as well please do right so there's a bunch of styling so you guys want to copy it please pause the video and just copy it the next thing we're going to do is we're going to add a placeholder in here and we can just say search tags okay that makes sense just like that okay so the next thing so that's all done so that's basically for our search box it's a first div now the what next one in here is going to be our order by so let's give it a class as well so i'm just going to give this one a width width of 1 over 6 just like this so i think yeah that's fine let's do the next one data is the relative anyway let's quickly do a relative in here as well give it the width six the next one right here this is going to be a select field okay so let's quickly do a select all right and we're going to give it a name in a second right now the select field we're gonna wind bind it as well so wire model and we're gonna link that to the order by order by like this we're gonna give it an id of let's say whatever this is an id we can remove the name we don't need that okay and we're going to give it some classes as well so i'm going to add the classes in here so i'm just going to do relative with full and some extra ones right so that's it all done so the next thing in here is we want to add the option fields all right the value for the first one this one will be for the id let me just do this for the id and we're just going to do id okay let's just copy this down this one actually this will be a little bit easier let's do an option with emmett because then i can just press tab so this will be the name and this one will be the name okay so that's that's that one so the other option that we have is for the created ad okay so we can just do it like that okay so that's our order by so we can if you have additional fields obviously you can add them in here so that's our order by so let's just make sure i close the div right so the next one that we have you know what we can do we can add a downward arrow as well so let's quickly do that so absolute absolute and what we want to do is we're going to insert y let's say of zero and we just want to give it a right of zero as well and then we just want to give it the flags and then items center because i'm going to use the same one over and over again so i'm just going to do a px of 2 and just do this okay just like this betting acts of two in a tank's gray or let's say 700 and pointer events right so i'm just going to copy this one down as well but see we're gonna don't have to actually redo it again anyway let's move on to the next one that's our order by now this one is going to be the order ascending or descending so let's quickly do that so order asc well let's quickly create a div for this one this will be relative as well so with a width of one of six and so what we can do to make this a whole lot easier let's copy the top one and paste it in here right instead of y model order by we're going to call on the this one right here let me just show you so we're going to call on this model right this i'm just going to copy it just to make sure i don't do any spelling mistakes like this right so we link that order by all right so now the fields that we're going to work with right here is going to be one and a zero now the zero is false okay and one is true and to be true we do ascending and this one is will be descended right so let's move on to the next one is the per page one so let's quickly do that so order by so let's just copy this whole diff down as well so just to make it easier for us and this is going to be the page okay so we're going to keep everything keep everything basically the same the only difference would be we need to one model this to be the page okay so just make sure you name it the same otherwise you're going to get errors okay just make sure we make sure it's the same the spelling mistakes can be quite easily in so let's start off with the first one let's delete this put an option the first option and this one will have a value of five and we're just going to do five copy it down i'm just going to do it two how many how many ever you want all right for me i'm just going to do these three right here so 5 10 and 20. let's quickly see if we can view this header right so as you can see we got our search tags right there we've got an id we've got our ascending and we've got our 5 10 and 25 right here so everything is good so the next part right here is we need to loop over our tags and display them accordingly right so what i'm going to do i'm going to minimize the head section and underneath this i'm going to create a dip with the overflow or hidden again and with a shadow right just like that now this is going to be responsible for our table so i'm just going to add a table in here right and i'm going to give it just let's start styling quickly the table actually so let's give this a class up with full and excellence okay that's our table and the next thing is we need to do our table head okay so the table head and inside that we're going to have a table row and each of that is going to have a table like this all right so we're going to have one for the id but we're going to style them in a second id name and created that date and then obviously the actions button all right so what i've done is i've added some font bold all that kind of styling to my table head you guys obviously pause the video and just add them in there and it's i'm starting right there so that's our table head right down the next one is our table body okay all right so let's give it a class of text extra small and divide y let's say just about y and then we can just do divide gray 200 not too much and then we can just give it a background of indigo of the right just like that all right the next thing we're going to do in here is we're going to add a table row which we're going to loop now in a second over all the tags we just want to give this a class or white space no rep okay so let's just quickly do an ad for each each tags as tag okay now we're just going to bring this in there right and then we're going to give each one of them a table data okay now let's start all just with a class actually so this one is for the id let's give it a pending four all right for the id what we're going to do is we're just going to get the tag and we just want to get the id of the tag so let me just quickly open my tag model and let's see if i'm referencing the id i'm just quickly going to get that so public function id and this is going to be an integer okay and i'm just going to return [Music] right so after the id is the name i'm just going to do that the name and after that is the created ad date this one is going to be the created app like this if the method inside there i'm just referring to this created update so when i'm calling on this method it's just going to bring me with a formatted created edit like that okay so just like this right the last one right here is for our action buttons and i'm just going to get create i'm just going to call this one just the lead now just action buttons for now because when we get to the update edit and delete part right there we're going to make use of this right here so let's quickly see if we can view all the tags but before i do that actually i need to actually display the links so underneath the table right here i'm just going to create another div and i'm going to call this one [Music] right and i'm just going to do tags links right and we're just going to give it some padding of 2 and bg indigo 50. right now so let's quickly go and see if we can actually view this page okay so let's do that right so that's basically the index view right here you can obviously style it however you guys want so let's start off as you can see we only see five right now let's change it to 10 as you can see we see 10 tags let's make it 20 as you can see we view them like that so as you can see right now is ascending so let's do a descending as you can see it descends them right so let's keep it right there and we just descend them by the name okay or by the created end date everything all by the id everything works quite nice so let's quickly do the search functionality so p all right as you can see it searches right there right so if you guys have any questions feedback or suggestions please leave me in the comment section i'll gladly assist you guys so what we're going to do in this episode is part of our livewire clutch series i thought it would be best if we add swedish 2. if you have this tool in your belt as a developer it will help you a great deal so i think i'm going to add that so in order to let's quickly edit this we're still going to use the edit so don't mind me for now so we're still going to create this functionality but i just wanted to show you as you can see a toaster pop up right there so let's quickly change this to something else as you can see right now it gives us that toaster notification right there all right so i will quickly i'll leave a link in the description for sweetheart 2 right so in order to get there to do installation all you do is you go to installation in the menu right there you will see i'm not going to use the cdn for testing purposes this is quite nice but if you're going to do a production app i recommend to use npm to install it right so let's quickly go do that so we're going to do npm install so copy that part right so in your application what you do is you open up your terminal and you paste it in there and then you press install right so now that it's all finished the next thing we need to do is we need to add it to our javascript file so under resources js appjs right here right so the first thing we're going to do is we're going to say import all right we're going to import swell suite alert from and then we can just say sweet alert to the one that we just installed like that now as you can see it's a little bit darkened compared to the other one it's because we haven't used it yet in order to use it but we're going to do is we're going to say window dot swell is going to equal to sweet alert 2. so as you can see it lightens right now all right so the next step so after we done this save that and then you open up your terminal again all right and then we do npm run there okay just like that so do that so what will happen is it will compile that sweeter lid to be part of alpine js and with your javascript files that you already have okay so it will compile the bootstrap open.js with sweet the lid 2. so as you can see it's successful so basically what will now happen is if we go to the public folder under js it will be part of the js file right there so now we can use it all right so the next thing we want to do if you want to customize anything inside your suite alerts like colors or anything like that and as we're using tailwind in order to do that we go to resources again css and app css okay so if you want to style or do anything like that okay so what we do is we add for toeing we add an add layer okay we set that to base okay and now the first thing in here is basically the name of the component that you're targeting in my case i want to target the icon success so what i want to do is i want to add a dot swell to okay forward slash toast and then we can add the swell again two and then we can because they will all be in the same line and then i just want to go for the icon success right so obviously you can do the warning one all that kind of stuff i will leave a link in the documentation and you guys can go and read up further like that all right so in here i just want to apply so this i just want to apply a television classes so i'm using and apply right here and let's say you want to change the does this background color to be something else so we can say just say bg blue bj red or whatever the case might be and the next thing is that's quite important just add the important flag right here as well right so it makes use of that okay but don't leave don't leave any spaces between them okay so if you type them in don't leave a space like that because it will treat this as a child of this class okay so what we want to do they need to be close together because they're going to be on the same line right just like that all right and after you finish with that you can just do npm run dev again okay just like this all right so npm run there all right so then it will give you also a success message and now you can basically if you want to add more styles for your toaster you can do that in here right so let's close this off now we haven't created this yet but i just wanted to show you the edit one so i just want to show you how to actually send it to the toaster right in order to send a message we will normally would have done a sessions and then we just would have flashed the session like this right we would have done this right so this is what we would have normally have done so we will set session flash with a success message but this is not going to work for us because we kind of want to be responsive and all that kind of thing so i'm not going to use that so what i'm going to do is i'm going to use like we did right now we installed suite alert so basically what we do is we will dispatch a browser event okay and you can name this whatever you want because this is the event that we're going to listen to now in this case i'm sending an updated event okay the title will be tag updated the icon will be a success icon let me just quickly show you the sweet alert icons right so if you come to the documentation right here let me make it a bit bigger you will go to icons you will see in the menu right there you go to icons and as you can see there's a success one there's an error one there's a warning info and question right so the one that i said is success right there and the icon color right here i want it to be green all right so this is the vendor we dispatching so right so the next thing is we need to listen for that so if we go to the edit right so i push the scripts to the stack scripts in the layout but i'm going to show you that in a second then we're going to say window.add event listener then we're going to listen for that event okay we're going to listen for that updated event right and then we create a function with a event parameter okay then we get that sweet alert then we fire off this right here now the first thing is the title right the title is the title that we're passing in here okay the icon is the icon that we're passing in here and the color is the one that we're passing in here there's obviously more that you can do but i just wanted to show a limited amount in here and then you can have the timer how long the toast notification to appear and right now we set it to three seconds all right so just think it will be pounds in milliseconds right there and the toast if you set this to false it will be a big block if you set to a toaster it's just a small little snippet let me set the position to top right you can have let me just quickly show you the positioning all right the next thing you're going to do in order to just view the positioning you're going to go to configurations right there and if it goes down a bit you will find positioning right here then you can see the different positions it can be in as you can see top top start top and i will leave a link in the description so you guys want to go and read more about that okay all right and the next thing is we have a timer of the progress bar to let us know how many seconds or milliseconds is the left of the toaster to be there so if it's after three seconds it basically the toaster disappear and this is show confirm button so if you want to actually let someone click ok or anything like that you can just enable this and set it to true all that kind of stuff tool to use and so in this episode what we're going to do is we're going to create another lava 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 right so let's get started right so let's open up your terminal so then we're just going to do php artisan make livewire and we're going to go inside the text folder and we're just going to call this one edit all right so let's make a component so as you can see we've got a class right now and we created a view right so let's quickly go there under app sap 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 have to link it right here so livewire tags not 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 deck 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 lifewire to keep track of everything that's happening inside this uh 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 assign them a very unique key 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 go let me just give you 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 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 tag id of added 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 we will do is we will add the lifewire 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 later in detail now the thing is you must understand if you're coming from view js or you're coming from any other javascript framework livewire the children components are not i'm just emphasizing not reactive so if the pattern compound 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 the active 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 parent if you don't understand that you will understand a little bit later 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 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 reactive so what we have just read right now we've passed this data from the parent component to this child's component all right so whenever this child this pattern 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 a 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 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 the stack to the component right so let's quickly go to this one right here now if we have a formal idea 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 leave 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 format d right the form id i'm going to equal that to the tag id like this okay so that's the first thing so we just mount that tag that we receive from the component itself from the component right here the one that we 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 had the tag all right so public function this one is going to be updated and we're just going to listen for the property like this and then we just connect this validate only so for real-time validation i'm just passing the property like that okay so now that's 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 an open modal to update tag all right and then we're just going to say reset the error back so this reset error 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 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 that we 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 flesh anything like that since we installed sweet 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 set 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 with the next part we're going to dispatch it because there's two ways we can do this for sweet delete 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 emit 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 all right so then we reset that all right so 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 preheat 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 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 right there okay because the tag parameter will be passing through right so this instead of a create tag this needs to be edit just like that 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 logically 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 model 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've got to open modal so this is basically if we click this button this needs to be set to true and it will open this right here now as the title stands right here i'm just going to call this one update tag this okay so i'm just gonna put update actually there all right let's move on and then next part is quite important the next this part right here the update that 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 this 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 tag id of the passing parameter that we receive 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 um 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 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 i do want to do in here is i want to add an ad push for the skills 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 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 scripts 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 speed 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 model with the details in there right what we're going to do in this episode is we're going to be working with events all right so we're going to receive the event in order to display basically our suite alert component right here and to refresh our index parent component of our edit component right here so as you can see if we press the edit button right now let's quickly click it right so let's update php just to add t or td okay so let's quickly press update now as you can see the pattern component is not updating the new data so it's basically our index view it's not displaying the td until we refresh the page right here right so instead of doing a hard refresh like that we just want the index component to basically refresh so we're going to send an event to this index component to the refresh as soon as the child component edit is updated all right so that's another one so that's the first invent the second one is we're going to actually work with our suite alert right there okay let's start off with the first one all right so let's quickly open our two components under app http livewire under tags you will see we have our index one so this one will receive the basically this emit event that we're going to file off in our edit one right here okay so that's the first thing all right so when we update the component we want to emit an event so we're going to say this emit okay so we want to emit what event you can name this whatever you want i'm just going to call this one saved event all right so let's quickly do that now in our index one this is the one that we want to refresh with the new data so we're just going to do a protected listeners right and then we just do protected listeners and then we're going to listen for that saved event all right so when we receive that saved event we're just going to refresh this component so let's refresh like this all right and let's save that okay let's quickly see when we update the component it emits this event and then it's going to refresh this component with the new data just before we do that this must be a comma it needs to be an error it kind of when we see this it needs to do this so that i just instead of a command just make sure you have that in there right so let's quickly check this out right so if i delete the td and i press an update you can see it updates the index right there it removes it and it updates it with a new data right so that's the first part now the next part is we need to work and receive our speed alert right here okay so let's do that right so like i explained in the previous episode there's two ways we can actually dispatch an event to actually display a sweet alert post a message right now let's start off with the first one this one is going to be to dispatch a browser event okay so we're just going to say dispatch in a browser event now what are we going to do we're going to call this one updated right so that is the name of the event all right so the second part right here is the title so the title will be that we're going to say what will be the message be so the message will be tag updated okay so you can call this whatever you want now the next part is the icon like i explained when we installed sweeter lid the icon can be success a warning or question whatever the case might be in my case i'm just going to make that a success okay now this part right here is the icon color and we're going to set that to be a green color okay so just like this right for those that might be new the icon that i just wanted to show you the success if a little tick right there and error have this warning have an exclamation info that and a question this so you can obviously decide however you want to do this i will leave a link in the description for you guys to go and click to go and read more about this all right so this is the first part of our dispatch right so now we need to listen for that and we're not going to list it in the component we're going to actually go to the view right here in the previous episode we add push the scripts basically to our layout so under layout case layout we receive it under stack scripts right here now we need to basically listen for that event right so now we need to create do some javascript for those that might not understand javascript please bear with me right here but this is how you're going to do that right so on so between your two your push script tags right there what we're going to do is we're going to create a script like this right so what that allows us to do to put vanilla javascript between these tags okay so what we want to do now is on window all right what we want to do on the windows we want to add an event listener okay so event listener okay let me just make sure i spelled it right all right so what we want to listen for we want to listen for that updated event right let me just quickly go in here so i'm firing off this event i'm dispatching this event to the basically to listen to right so the update if you named it something else like joe's soap or whatever the case might be just make sure that you this name right here is valid the same otherwise it's not going to work right so the next thing is we're going to create a method a function and we're going to pass the event parameter right there okay so let me just put it in here another thing is we're going to get that swell all right swell dot fire this is the sweet alert right here and we just want to fire off that event okay and then we just want to do this okay now the first part right here the title we're just going to get the title and that's going to equal to the event and then we just want to get the detail title all right so the detail is just as parameter they'll be passing through but the one that we receive right here we're gonna get the detail we're gonna get the title right there okay so the detail title the next thing is we want to get the icon all right so the icon is going to e and dot detail dot icon right the next one is obviously the icon color so let's just do that so icon color and that is going to equal to e dot detail note all right the next thing that we want to do we need to add in the timer okay the timer you can decide however long you want to do this i'm just going to make this one almost 30 minutes three minutes no three minutes thirty thousand milliseconds there's thirty minutes so i'm just gonna make it three minutes i just wanted the time to go as uh basically as long as possible so that you guys can easily see it the next one is the toast all right so if you set this to false okay now what will happen it will display a big toaster instead of a small little one in the corner right there but we're just going to set this one to two i'll just want a little one the next one right here this will be for the position where do you want to position this and now what i will do is i will leave a link in the description for you guys to obviously go and read the documentation but now i'm just going to add mine top right like that okay so that's the position i want it to be in the next one is i just wanted a time timer progress bar so timer please bar and i'm just going to set this to 2 and the last one right here this will be show confirmation button so confirm button and i'm just going to set that to false i don't want a confirmation button so i'm just going to set it to false and just like this right so that's the first part so that's how we can dispatch an event let's see if this work all right so i'm just going to add double d's triple these all right so as you guys can see i've got a little message right there tag updated and that will stay a while like that because i'm saying for three minutes but obviously by default you will change it to be only three seconds i'm just going to delete this these again so let me just remove that right so as you can see dag updated right there awesome stuff all right so this is the one way to do it obviously with the browser okay now let me just comment this one out actually just cut it out the next way to do it is obviously with the metal event so i'm just going to copy this out so let me just the next one is if we dispatch emit event all right and we're going to call this one update did as well and i just want to pass in the same parameters to that component so let's just do the event so let me just copy this and paste it all right now the difference will be now we will have we still use the same script text okay just like that but now what we do is we say livewire dot on okay so onward on the updated event okay then run a function and we're just going to pass in the same thing an event parameter okay and then we're just going to say swell sweet alert basically swal dot fire so if anyone is new and wonder where i get this wall from so if we go to our resources js app.js you can see i'm referring to this wall right here this one okay so let's go back swallow.fire let me just want to fire off this now the thing is we're not going to do it the same way let me just actually put this on top right there just cut this out quickly all right so this is the browser one i just changed it back to three seconds top right everything is still true like that okay now the thing is this one is for the emit event this one that we're listening to not the browser event okay now in here ins remember you were using the detail right there this one we're just going to do e dot title okay so let's just put quickly in the title i'm just going to do the first one and then we're just going to be e just like that okay right and then you can have the same parameters that you would normally have for that in here okay so instead of the detail title we just add e title e icon and stuff like that okay so if you change this to be an event let's say you wanted the full name just make sure you put event back here okay so event event etc so this is the last part that we're going to do for our clutch series is the delete point 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 this tag 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 all right so let's open up our terminal and quickly create the components of php artisan make lightwire 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 all right so now our class and view are created so let's go there quickly under sap laugh wire you will see we have a tags right here and we have the view right here under livewire tags of delete right so we've 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 amp under actually let's go quickly app 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 livewire text lead we need to pass in the tag to in order to know which tag 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 kind of create a unique key and then we just want to concatenate on this one the tag id all right for this one we don't need to add the now timestamp in there to briefly make this component reactive because this one will be deleted so there's no need for this one to be the active do the balance component what i want to do as well is i just want to give you the clause on the component itself basically on 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 space in between them so 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 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 function all right so let's start off with the compound 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 lending 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 dags all right so that's the one and then we're just going to simply set the adder back so 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 around 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 a creator variety so that you guys can see and 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 myth up so met up 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 dis emit 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 emit um we'll 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 it will look like this delete button is nested inside our index component okay awesome stuff all right so we omit that we dispatch that event so let's quickly go to the view itself and 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 over 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 that so i'm just going to create a dip with the flags and a gap therefore right so in there now we're just going to get huge jet stream so we're just going to do x jet button okay and this is going to be xfl i'm just going to use basically blade wire 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 say with the form and a height of 4 and i'm just going to close up the tag 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 going to listen for click event as soon as we click this button we're going to call that open module to delete tag right so this one right here so we're going to 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 model 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 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 awesome 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 the name it's going to equal to 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 let me 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 if you want to make it bigger give a different background color you can add all those things right there because it has an attribute back right here let's let me just close this off all right in this part 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 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 extract button so this comes with the default installation so it's a secondary button if you if you've done a json installation all right so this one we're going to 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 the 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 it's the kind of statement system 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 was just thinking in terms of bootstrap right now so this is exjet danger and button all 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 just disable like this guys and 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 like that now the thing is we need to now because remember as soon as we delete the tag i want a message to appear and we're using suite alert to do that so i'm just going to add an amp push okay so the push this part is for the scripts okay so 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 and give you the stupidest address 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 a smile for those that are new fire okay so where i'm getting this from so if we go to resources js i'm referring to this window.style that's equal to the sweet delete right there so i'm calling on this right here okay so swal.fire now the thing is inside here we're 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 title and i'm going to do that list okay right so then we go to icon icon color the time is set to three seconds all right and the toaster is true let me just set it to full so that you guys can see how big it is or you can experiment just set it to false then you'll 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 the 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 in the comment section and thank you guys for watching see you in the next one and adios

Channel: AngelJay Academy

Views: 21,047

Keywords:

Id: QmmMe1gkYS0

Length: 96min 53sec (5813 seconds)

Published: Wed Jan 26 2022