Editing Appointments and Fixing Issues - Laravel Livewire

all right welcome back to another video on building multi-purpose laravel and live application and in the previous video we work on listing the appointments and i noticed the mistake we made on previous video so first of all let's fix this mistake and that mistake is related to time so let me go to app service provider and here we have created the macro called to formatted date into formatted time and into formatted time here we are writing m so m represents months not the minutes so we need to change this to i so if i refresh the currently we are saying three everywhere so if i refresh the page and it is fixed you can find the list of uh those characters descriptions over here on documentations so here i represents minutes with leading zeros so perfect so now let's move on working on editing the appointments and in the users while editing the appointment we were spending this model but we are not working on this uh model so we will create the suppress page for editing the appointment so let's create the liveware component let's do psp audition make livewear and instead of admin appointments and let's say update appointment form okay and it created two files one is the class and another is the blade file so let's go to update appointment form and currently it is empty so first of all let's add a link over here so to do that let me go to list appointments and let me go to let me go over here right here and let's add a route actually we have not defined that route so the route will be let's do admin dot appointments dot edit right and we'll be passing the specific appointment okay perfect here we if i refresh the page and we will see the error that the route is not defined so let's leave define that route so let me go to web.psp and then over here let me copy this and it is to the admin appointments let's remove this create and we will receive specific appointment and then edit instead of creative point form we'll do update 2.1 form right this is the component class let's import the name spacing for this class here and let's change the route name to admin appointments and edit perfect so now let me refresh the page and it is working so if i click over here and we are redirected to the another page and currently that page is empty so let's fill the data with there so first of all let me go to create appointment form and let me copy everything from here and then paste it on update appointment form because every form fields are same and we will just modify this so let me refresh the page and we will see the error called undefined variable clients so let's pass the variables from update appointment form component class over here let's do clients lined and let's pass all the client okay and let's import the name special okay and let's pass the variable clients clients okay and if i refresh the page and it is working okay here all the fields are empty so let's fill those forms so to do that let me go to update appointment form and over here let's create mount method okay and on the map method uh we will be receiving the appointment right the appointment because sorry appointment because uh from web.psp we are passing the appointment okay so let's try and term appointment and let's import the name spacing for this if i refresh the page and we get that appointment specific appointment right perfect so now let's define a public property called state with empty array and from here we can do this state equals to appointment and convert that to array because we are receiving the object right and then if i refresh the page and we see some of the data are already filled like the client is already selected and the status is also already selected but we see the issue with appointment date and appointment time let's see if there is any error on the console we don't see any error on the console this is just amazing so to fix this let's go to that figure component because we are using the component uh let me go to update a point when form and let me show you that we are using component yeah we are using the datepicker component and then timepicker component right so let me go to datepicker component and here we are running the code when the w when the document is ready it is just the sorted for document.ready function right this this code is same as this one that is just a certain so we are executing that code and the document is loaded yeah so we don't need to do that because like what is also doing some stuffs and this is getting this is creating the html so let me remove it and then like refresh the page and we get the time but we are not formatting right we are getting the different format over here so first of all let's fix the point in time as well so let me go to time because component and let me copy and we don't need it just paste what is inside of that okay and this is also working perfect so here instead of appointment date we are getting the different format so let's fix this so let me go to appointment right and over here let's create the accessor to format that date okay let's do get date attribute and receive the value and we've written value to formatted date right anti-formatted date is called on a spring so we need to pass this to carbon instance so carbon first and we'll receive the carbon instance and on that carbon instance we are going to format it okay so let me refresh the page and it is saying app models carbon is not found so let's import the name spacing for this class yes we imported it so now let me refresh the page and it is working perfect so let's do the same for time as well so let's create another function called get time attribute receive the value and will written carbon first the value here value is let me diagram the value to show you just a time right say just a time so we are using carbon parts to parse the time and we written the carbon offset and on that carbon instance we can do to format it time and if i respace and it is working perfect so here we are not getting the description so let's go to update appointment form and let's display the description as well so over here will be displaying the description description is state and then description i think note right so let me refresh the page and i think currently the paragraph is empty so let me go to appointments and here we see another issue called two member function to formatted date on string because we are running that we are calling that to formatted date on spring so let me go to list appointments and we don't need this because we are using accesses right so we don't need to do it here perfect and it is fixed so let me edit this one yeah yeah we are also displaying the paragraph as well perfect so now if someone click on save or update changes let's go to point update appointment form and at the end i think let's do save changes all right and when someone click on this button we will be submitting the form here and on that form we are doing wire submit and preventing the default action and we are calling the create appointment method so instead of create appointment let's call update appointment okay and let's create that method inside of updated point bin form component so let's create that method let's tie in them here and let me press the page and right click on save changes and it is working perfect so first of all let me copy everything from create appointment form to save some time so let me copy everything from here and then paste it on updated point of view let's import the name spacing for this validator side okay yeah we imported it and we are performing the validations and these client id is also required that is required time is required not can be now level status is required and this status will include the schedule or closed okay perfect so here we are doing a point when create instead of creating the appointment we'll be uploading the appointment so we will do something like this this appointment and then update with this state so we don't have this property so let's create that property public appointment and on the mount method we can do this appointment calls to the appointment perfect so here we will be dispatching browse event and the message will be appointment updated successfully okay so let's refresh the page and then click on save and i think it is working but we are not getting the that notification post notifications so we'll fix that later so just let me change this name client name from to ansel okay and if i come back to appointments and it is changed here as well let's send the status let's send this status from schedule to closed so let me edit it and then closed click on save go back to appointments and it is working so now let's fix that first notification issue so so to fix that all that post notification issue so let me go to app.blade.php which is the main layouts file so i think we have we are not listening to that event so the event we are passing is a lot this passing is alert so let's listen to that event using let's be copy this code and then let me paste it and we will be listening that event called a lot right a lot and we are not hiding any model we will just display the trust notification perfect i think it will get fixed so now let me refresh the page and click on save changes and we see that notification perfect so here we are not adding the link so i think you you will add that link so this was for this video so i hope you like this video don't forget to likes and subscribe to this channel as i will be uploading the videos like this and in the next video we are working on this deleting the appointments and while deleting the appointments uh we'll be using sweet alert and in the in the previous videos uh while deleting users use the model so in the next video we'll using sweet alert so stay tuned till then have a great time and i will see you in the next video

Channel: Clovon

Views: 2,151

Keywords: coding, tutorial, laravel, laravel and livewire tutorial, laravel and livewire, laravel and livewire project, laravel admin panel, laravel adminlte, laravel admin, livewire tutorial, laravel livewire tutorial, laravel application development, learn laravel 8, learn laravel framework, learn laravel, laravel crud, laravel crud tutorial, spa, laravel how to, laravel tips, coding tips, adminlte with php, laravel fortify, livewire events, livewire, laravel livewire popup modal

Id: WwHBSN1VSVs

Length: 16min 16sec (976 seconds)

Published: Sat Mar 20 2021