Cancelling an appointment: Build an Appointment Booking System With Laravel

00:04

going to set the cancelled at column in our database table to the current timestamp. And we know that by cancelling an appointment, that's going to free up a slot, because we included that

00:14

in our slot generation. Now, we don't just want to link through to this. So at the moment, I've defined this out as an anchor. But we don't want to do that, because if we create a route

00:23

that doesn't have any kind of cross-site request board reprotection, and we don't need to submit it, there's a chance that people could cancel other people's bookings, and a lot of other things can go wrong.

00:32

So what we're going to do is define the route out, first of all, and, of course, create the controller. So let's go and create out another controller. And let's call this AppointmentDestroyController.

00:46

We could call it UpdateController, whatever you wanted. And let's go and create this just up here. So this is going to send a delete request

00:54

through to appointments. And, of course, we need to know what the appointment is. So let's add in that AppointmentDestroyController. And, of course, give this a name, Appointments,

01:09

and Destroy. Great. OK, so ideally, what we want to do with this is use a form. Now, that's not great, because we

01:16

don't want to submit a form. But we can do this using Alpine. And we can also add a confirmation in there. So for now, let's just bring in this appointment in here.

01:24

We'll fill in the actual cancellation stuff in a minute. But let's just die dump on that appointment, just so we can see that this works. OK, so the way that we hook this up is to create a format.

01:35

And we have this as a post. And the action goes through to that route that we've just created. So we can say Appointments, Destroy, and, of course,

01:48

pass the actual appointment into there. Now, what we can do is change this over to a button. Obviously, get rid of the href, because we're not going to need that.

01:58

And it's just going to look exactly the same with Tailwind. So we've got a button now that we can click through and technically submit this form. But the problem is the method here is delete.

02:07

So we set this as a delete method. What we can do is we can, as well as defining our cross-site request forgery protection, which is really important, we can also spoof the method.

02:17

So we can set the method to delete. We have to have a post with an HTML, because that's all that's supported. But we can spoof this method here.

02:25

So now, when I go ahead and click through to that, it does send a post request through as a delete type HTTP request. And as you can see, it works.

02:35

So we'll go through and actually cancel the appointment. So let's go over to our AppointmentDestroyController. And all we need to do here is say Appointment, Update. And we can go ahead and pass through CanceledAt.

02:49

And we'll just set that to the current date and time. And then we can just return back to the other page. Great. So let's go over and just make sure this works.

02:57

Hit that. We're redirected back. And it is canceled. OK, so now, let's add a confirmation,

03:03

because obviously, we don't want to allow users to click on this and then not have any kind of confirmation. So let's go and add Alpine here. So let's pull all of this stuff down.

03:14

Let's initialize this with x data, although we don't need any data. And we're going to say onSubmitPrevent, which we've already seen.

03:22

And in here, we can just do a really simple if statement. We could do this in one line. But let's just say if window confirms, or just use a native browser confirmation.

03:32

We'll say, are you sure? Now, if they are sure and this returns true, so if they do confirm this, what we can then do is say l, which represents this form itself.

03:42

And then we can just call the native submit method on an HTML form. And that will submit this form. Otherwise, it will just fall through and do nothing at all.

03:50

So now, when we click Cancel Booking, I can click Cancel, and it doesn't cancel it. You can see in the database, it's still uncanceled. But if I click OK, that returns true.

03:59

It submits the form. And we have canceled the appointment. And of course, you can add any kind of third-party library here if you want to, to show the confirmation.

04:08

OK, so finally, we're just going to go and change around the UI to show that this is canceled. So over on the appointment model, why don't we just add in, just on the booted,

04:18

a method in here called canceled, just so we can get back a true or false value of whether it's canceled or not. So typically, we'd just do is null on the canceled at date.

04:30

So if it's not null, it means it has been canceled. And then we can go and just change around the UI. So we can say if appointment canceled and say not canceled, then we want to show this form.

04:46

So let's end that. And there we go. And of course, because that appointment is canceled now, we don't see that button.

04:53

And then we can just change around the title as well if we want to. So in here, we could just add a ternary. And we could say if the appointment is not canceled,

05:06

we're going to show that text. Otherwise, we will show canceled. And let's just escape that. And we're done.

05:16

So now, we see that it's been canceled. And we're all good. And of course, you can change anything around about this view if you want to.

05:23

So let's just uncancel this just to make sure that that looks good. And when we do cancel it, we end up with the following. Great.

Sign up to access "Build an Appointment Booking System With Laravel" right now.

Episodes

Transcript

Episode summary

Episode discussion