Install SweetAlert 2 | npm install | Laravel Livewire CRUD

hi everyone so you all are doing well 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'll quickly i'll leave a link in the description for sweet dealer 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 all right so the first thing we're going to do is we're going to say import all right we're going to import swall sweet 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 dots while it's going to equal to suite alert 2. so as you can see it lightens right now all right so the next step so after we've 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 delete too so as you can see it's successful so basically what will now happen is it will 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 suiter lids 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 tailwind 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 swall to okay forward slash toast and then we can add the swell again to 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 tailwind classes so i'm using and apply right here and let's say you want to change the toaster's background color to be something else so we can say just say bg blue pg 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 def 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 added one so i just want to show you how to actually send it to the toaster alright 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 reset 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 sweet 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 tak 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 right so this is the vendor be 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 and then we get that sweet delete then we fire off this right here now the first thing is the title right the title is the title that we 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 of it comes 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 and then we 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 startup and i will leave a link in the description so you guys want to go and read more about that okay 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 either basically the toaster disappear and this is show confirm button so if you want to actually let someone click okay or anything like that you can just enable this and set it to true all that kind of stuff right so this is just that episode about sweet alert 2. we're going to use it quite a bit and i use it quite a bit right so it's a very very very useful tool to use and you have in your belt and to know how to use it right so that's an end of this episode guys if you like the video please give it a like if you have any questions feedback or suggestions please leave it to me in the comment section and what we're going to do in the next episode is we're going to create the edit form so in order to actually edit a tag thank you guys and see you in the next one adios

Channel: AngelJay Academy

Views: 295

Keywords:

Id: HSXsUWJngFs

Length: 9min 10sec (550 seconds)

Published: Fri Nov 19 2021