Using SweetAlert to Delete Appointment & Refactoring the Code - Laravel Livewire

all right welcome back to another video on building multi-purpose laravel and live application and in this video we'll be working on deleting this particular appointments and here we'll be using street dollar so let's get started so first of all let me go to main layouts call app dot play dot php and let's start first by installing sweet alert on our project so to do this let me go to the end and over here just paste it the cdl link and we are done with installing street alert so now let's try this if it is installed so let's create a script tag and inside the descriptor let's do this one okay so if we refresh the page and it is working perfect so we don't need this okay so now when someone click on this delete icon over here so let's do that one so for this let me go to list appointments and here when someone on that particular icon then we'll present the default action and we'll call the method called let's say delete let's say confirm appointment removal right and we'll be passing particular appointment appointment id okay so we haven't created this method so let's go to list appointments component class and over here let's create that method call confirm appointment removal and we will and we'll be receiving the appointment id right and let's die in the disappointment id and press the page and click on delete and it is working perfect so now let's create a public property called appointment id being remote by default let's say no and let's assign this appointment id to appointment i id being remote okay so now we need to dispatch the event so let's do that so let's do this dispatch browser event and let's say so delete confirmation okay we are dispatching the browser event so we need to listen for that event so let's go to list appointments so let's go to sorry app.black.psp and then over here let's do window.8 event listeners and never the event is so delete confirmation passing the event and then let's do a lot here and is if everything is okay then we'll receive we'll see this a lot okay perfect so instead of displaying that particular alert we'll be displaying the beautiful confirmation dialogue like this one right so let's grab the code from here we copy it and then let's paste it over here let's indent it perfect so now we need to see this particular confirmation so press the page and if i click over here and it is saying here perfect everything is working but we are not actually deleting that data so so now let's delete their data okay so to delete that we need to dispatch the event from the browsers back to the component okay over here okay now let's dispatch the event from the browsers back to the component so to do that we need to do live web and then emit the event called let's say delete conformed okay so now we can listen to this event from our component class so to do that we need to define a protected property called listeners and will be an array with key n value and the key will be the event name it is delete confirmed and the value is the method that we will be going to call let's say delete appointment okay so let's create this method and let's say diamond here and if everything is okay we need to see that message if i click delete click on yes and everything is fine so now the thing is to remove that particular appointment right so let's say appointment appointment equals a point find or fail this appointment id being removed because we have already stored that while confirming employment removal right so now we can simply do a point bank and then delete okay i think we have already imported the name specie so let me repress the page and see if it is removed click on delete click on s and it is delete but we don't see that message can't delete it right so to do that let's fire and dispatch the browser event as to this space browser event called let's say delete it right delete it and we can listen to this event from our javascript so let's do over here we can do window that event listeners let me just copy from here right and we will be listening for the deleted event and when something is deleted we'll be showing that particular message so to do that let me copy this from here and then we don't need to hide anything right so let's do paste it indent it yep so if everything is okay then we should see that message click on s and it is deleted also the data is also deleted but you notice that the message is different file is deleted we don't want this to be static so let's make this dynamic using let's say event event and then we need to do detail dot message right perfect so we need to pass that message from our component class so to pass let's do let's pass it from here the message let's say appointment deleted successfully perfect so now if you refresh the page and click on delete click on s and the item is also deleted and we receive that particular message called appointment deleted successfully perfect so i hope you like this so response for this video but before ending let's do some refactoring so instead of writing everything on our main layouts file let's create component okay so let me copy everything related to speed alert and then got it and let's create a component which is inside of resources views components let's give it a name let's say confirmation alert that blade dot psp right and over here and let me paste everything and we can push this to the javascript stack right push this lose everything to javascript stack and first perfect so simply we can include this use this component inside our list appointments that blade.psp file so to do that i think we don't need this so let me remove it yep and we can do x and the name of the component is confirmation lot okay now let me refresh the page and see if everything is fine click on delete here we see that particular message alert yeah and if i delete and it is deleted perfect so if we don't use this one and we will not receive yeah it is not working it's a component we successfully refactored that code as well so this much for this video so don't forget to like share and subscribe to this channel as i will be uploading the videos like this till then have a great time and i will see you in the next video

Channel: Clovon

Views: 3,214

Keywords: coding, tutorial, laravel, laravel and livewire tutorial, laravel and livewire project, livewire tutorial, laravel livewire tutorial, laravel application development, learn laravel 8, learn laravel framework, laravel crud tutorial, laravel tips, coding tips, adminlte with php, laravel fortify, livewire, laravel livewire popup modal, laravel livewire tutorials, sweet alert with livewire, livewire tutorial series, laravel livewire, how to use sweet alert with livewire

Id: CI5fZZrQOd4

Length: 12min 9sec (729 seconds)

Published: Mon Mar 22 2021