Re-checking availability: Build an Appointment Booking System With Livewire

00:05

We choose the time slot. We enter our details. But someone prior to us hitting that Submit button has already booked that slot.

00:13

Well, if we don't check this when we go ahead and submit this form, we're going to end up with duplicate appointments created in the database, which, of course, is not what we want. So what we are going to do is when we submit this,

00:27

we are going to use that availability method, which is a computed property, to check if there is still availability in here. If there's not, we'll redirect back with a message.

00:39

Otherwise, we'll just go ahead and create the appointment. Now, this is computed. So what we need to do, if we just head back over to our Submit method, we need to bust the cache of this

00:49

before we start to use it again. We cache this as a computed property because we want this to be really fast between requests. But we don't want this to be cached as we're checking it.

01:00

So all we need to do before we start to recheck this availability is just bust this by unsetting it. And then that will reload that data for us. And then down here, we'll have fresh availability,

01:13

including appointments that have already been booked for us to check this out. So let's just go through and write out the code that we would probably want to see.

01:22

And then we'll go ahead and fill in any helper methods within the custom classes that we've created. So if we don't have availability, so let's access availability, which is now busted,

01:35

for a date. So for date would be super helpful to be able to pass through the form date. So we get the availability for the date

01:42

that this person is booking. That might not exist. So we're going to use a null safe in here. And we want to check that that date contains a slot,

01:50

or in this case, doesn't contain a slot. And let's pass through the form time, like so. And if that is the case, then we want an error. So let's just die dump for now and just say taken.

02:03

And we can test this out by creating some stuff in the database. Otherwise, down here, we want to create an appointment. And here, we'll return as well.

02:13

We'll add that in now, even though, of course, this will cut this out. OK, this isn't going to work at the moment over on our date collection.

02:20

We don't have that for date method. So let's go ahead and create that out first. We'll dump it out and see what we get. So let's go ahead and pull in a string in here.

02:29

We'll call this date to check. And we are going to go ahead and return the first date where this matches. So we'll just say first again with a closure.

02:41

So let's create that out. And we will take in a date in here, obviously, which is why we call this date to check. And we'll return where the date to date string

02:55

equals what we've passed in, which is that date to check. And of course, make sure we pull that into scope here. And we should be good. This will pluck out the date, basically,

03:08

that we've requested, kind of like we're building up our own eloquent. We're just working with a custom collection. So let's say grab this and die dump on it.

03:20

And let's see what we get when we run this. So I'm just going to pick any slot. It doesn't really matter. Enter any details in here.

03:28

Hit Make Booking. And yeah, there we go. We get the date here with the slots in that we want. Now what we can do is build out this contained slot directly

03:38

on that date. So if we head over to our date class here, let's just create out a method in here which checks if it has a slot or not.

03:53

And that's just going to be a string with the time to check. We just want to deal with strings here. We can pass in carbon objects, but it's a little bit easier to grab these times.

04:04

So again, we're going to do pretty much the same thing. But this time, we're not going to say first, because we just want to check if it contains it. So we're going to access the slots within here,

04:13

which remember, we're storing up here in a collection. And we're just going to use contains. So just see if it contains this slot under a condition. Grab the slot here.

04:24

And we'll use that time to check. And we'll return the slot time. And remember, format it in the way that we've been formatting it everywhere, which

04:35

is to time string with minutes. And we're going to check that again to the time to check. And that should just return to us a true or false value whether or not this contains this slot.

04:46

So now we can take this entire thing. We'll die dump it out here just to check that we get what we expect. And let's have a look.

04:53

So I expect this to return true, because no one else has booked anything while I've been developing this. So let's hit Make Booking. And yeah, we get true.

05:02

Now let's give the page a refresh. I'm going to choose the 9 o'clock slot on the 27th. Enter my details, but I'm not going to submit this just yet. Instead, I'm going to head over to the database

05:13

and I'm going to create an appointment for that date. So this is the 27th at 9 o'clock. And even if it overlapped, so even if it was half past 8 to half past 9,

05:23

it still would not contain that slot. In fact, let's do that now. So let's say 8.30 to the same date, obviously. And we'll say till 9.30.

05:35

So that slot at 9 should now not be available, because I'm busy for half an hour. So let's go over, hit Make Booking, and perfect. We get false.

05:44

So because that slot has been taken while we've booked, now we know that we can return and show the user an error. There's a couple of ways that we could do this. We could flash a message.

05:53

It really doesn't matter. But I'm actually going to add an error to our form here. So I'm going to say form.time. And then I'm just going to add in that time,

06:02

or that slot was taken while you were making your booking. Try another one. OK, so now we're returning. We're adding this to the message bag.

06:15

Of course, what you could do is use session to flash a value, then put it up in your template if you wanted to. But let's treat this as a validation error instead. OK, so now that we've got that, we

06:27

can just go and add the error over to our checkout. And we should be good. So let's find out where our name is and come up to the top. And here it is.

06:38

So let's add in an error again. And we'll put all of this inside of here. And we'll say form.time. And we'll output the message that we've

06:53

manually assigned in there. Great. OK, let's go over and try this out again. I'm going to choose 10 o'clock now.

07:00

Obviously, the 9 o'clock slot's disappeared because it has been booked up. Let's go and try this out. I'm actually going to try and make a successful booking.

07:08

And yeah, that works nicely. Let's try this again. And we will go ahead and adjust that appointment. So let's head over to the database.

07:18

And let's actually create a new one. So let's create one here for 10 o'clock. Or we could do 10.30 because, again, that appointment is one hour.

07:29

So we couldn't fulfill the 10 slot. And let's do that to 10.30 till 11. And yeah, we should be good. So now I'm going to hit Make Booking.

07:39

Great. That slot was taken while you were making your booking. Try another one. Because everything got refreshed,

07:44

that slot has now disappeared. So I'm going to have to pick the next one and then make the booking. And it creates it successfully.

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

Episodes

Transcript

Episode summary

Episode discussion