Loading availability: Build an Appointment Booking System With Livewire

00:03

But the first thing we really want to do is figure out how we're going to get the first available date, which we're going to pass into this calendar to be the default. Now, what that also means is we're going to set up a form

00:16

with the date that the user wants to book for. And we're going to use a LiveWireForm class for that. So let's just do a little bit of figuring this out, dump this out on the page, and make sure

00:25

that we do get the first available date. And we can fiddle around with the database to change this around as well, based on all of our employees' availability.

00:33

OK, so the first thing that we'll do is head over to our checkout. And we're going to create out a form, which will be our overall booking form.

00:41

Now, there's a couple of ways that you could do this. You could either store each of the properties in here that we're eventually going to put into our appointments table.

00:49

Or you can go ahead and make a LiveWireForm using LiveWireForm. And of course, we're going to call this CheckoutForm. So don't worry too much if you've not

00:57

come across this before. It's going to work in exactly the same way as you're used to in LiveWire. We're just going to create this out in here, type into it,

01:05

and then call it Form. Now, wherever we reference the form in here, we're just going to reference this form. And then inside of the CheckoutForm, which

01:13

extends this form here, we're just going to have things like a public date in here, which we can store data to. We can also validate in here as well.

01:22

So let's just change this to a string, because it is going to end up as a string. And we can add some validation rules in here in a moment. OK, so when we land on this page,

01:32

the first thing we want to do is set the date, the date that the user wants to book for. Now, by default, we're going to have that for the first available date.

01:40

Let's just play around with this first of all. So I'm going to go ahead and create out a mount method in here, which is one of the lifecycle hooks within LiveWire.

01:47

And we're going to set this form date to just now. And let's grab the time string for this, which is really important, or the date string more appropriately.

01:57

So that's set the date that the calendar is going to be on by default. This is not what we're going to end up with, because we want to find the first available date.

02:06

If there are no appointments today, there's no point setting this to today's date, because there won't be any slots. OK, let's just try this out by heading over to our checkout

02:15

and just dumping it out at the top of the page, just so we can see what we've got. So we're going to say form date. We can just say form date now.

02:23

And if we head over to the browser, yeah, sure enough, there is the current date. So what I'm going to do is today is Friday. The day I'm recording is Friday.

02:32

I'm going to head over to the database. And I'm going to change around all of the availability for the schedules. Let's just, yeah, we'll do this for both of these.

02:42

So I'm going to get rid of all of the availability on Friday. Now, if a customer comes to this page, they do not want to see this date, because there are now no employees that can do today.

02:54

There won't be any slots. There's no point doing this. So we want this to adjust based on the next available date from our availability.

03:01

So the question is, how do we even get our availability? Well, what we're going to do in here is create out a computed property called availability, which is going to be the source of truth

03:11

for all of the availability for the date that we give. So this is going to be computed. And really importantly, just so we can keep things as fast as possible, we're going to set this to persist.

03:24

That means that this will be cached between live wire requests. We can go ahead and bust the cache a little bit later when we want to refresh this to check

03:34

if anyone else has booked. Let's just go ahead and do this for now and see what we get. So how do we grab availability? Well, we've already built all of this stuff

03:42

up in the core functionality section. We just want a new service slot availability class. Now, into this, we want to go ahead and pass in an employee. But if you remember, over on here,

03:52

we need a collection of employees. So we don't just want to pass an employee in. If we have an employee, so if someone has chosen who they want this service to be with,

04:02

we're just going to collect up that employee and put them in a collection. So it will just be one employee that's been chosen in a list of employees.

04:10

Now, otherwise, we want to use employee get. We want to grab all employees to pass them through to here. The next thing we want to pass into here is the service.

04:19

So let's pass in the service that's been chosen. And I'm just going to pull this down a little bit, just so we can kind of see what we're doing here. OK, so next, we want to say for period.

04:30

Now, the period that's been chosen that we want to check for can be anything. So for example, we could say now start of day. So we want to check from the start of today.

04:41

And we want to check this, say, in three months time. So let's say add three months and then say end of day. So we are always checking within a three-month period. And this will be always shown on the calendar.

04:54

There are ways that we can adjust this based on as we navigate through the calendar, always checking far into the future. The longer this is going to be, the slower

05:03

the page is going to be. But we can deal with that later when we get to it. So I'm going to give the page a refresh. And we're now loading in our availability.

05:10

Remember, that's cached, so it's still nice and fast. Okay, so now we've got our availability. So in now, we actually want to set this to the first available date from our availability.

05:23

So we're going to change this to this availability. Now, that's a computer property, so we can just access it like a property. And we're going to introduce something

05:31

like first available date. Remember, availability is our custom date collection. So we can add a method in here, a helper method in here to allow us to do that.

05:42

Okay, let's just die dump on first available date just to see what we get from this. And remember, technically, now that we've changed the database, the first available date

05:51

is actually tomorrow because we don't work Fridays. Also, awkwardly, because it is a Friday, the next available date is going to be next Monday. So I'm actually going to change this

06:01

to say that we both work on Saturdays. So let's just grab this in here just to make things a little bit easier. Let's say the next available date is tomorrow,

06:10

which is Saturday. Okay, so let's just head over to the browser and check what's going on here. And yeah, it looks like we need to just adjust this.

06:17

Yeah, this needs to be an array within a collection like this, and we should be good. And the next error we'll get is the first available date method on our date collection doesn't exist.

06:27

So let's go over to that date collection and let's create out a first available date helper to find the first available date within this collection. Now with this, because we're working within a collection,

06:41

this is super simple. We can say first, which will always grab the first record, but with the first method on Laravel collection, you can also pass through a scope and a closure in here.

06:51

So we'll say first, we'll grab the date out because we know that each of the items in here is our custom date object. And we can just say the date slots count is greater than one,

07:04

or we could say is not empty, whatever you want us to do. So let's actually do that, is not empty. Okay, so this now will return the first date to us within the state collection where the slots are not empty.

07:16

So where we actually have some slots. So let's now go over to the browser and check this out. And there we go. So this date now is the first available date,

07:27

which as you can see is tomorrow. So today is the 26th and now that has pulled out to the 27th. So that is working really nicely. So that now means that if we come up here

07:40

and don't die dump on this, we can take this and set it to the first available date. Now, remember, we might not have a first available date. So we're going to do a null safe check on here

07:50

to grab the date and then say to date string. Now, if that is not available for any reason, and there are instances where that's not going to be the case and we will get a null value back,

08:03

we're just going to say now to date string, and we're going to default back to today's date. If there's no availability into the future, we'll just default to today's date

08:13

because we need to default to something. Okay, let's go over and just check out what we've got. And yeah, there we go. Our new date is the 27th.

08:21

So we can put that into the calendar and that is now going to show slots immediately to that customer because it's the next date that has slots available.

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

Episodes

Transcript

Episode summary

Episode discussion