Showing time slots: Build an Appointment Booking System With Livewire

00:10

and we're going to create two computed properties. The first one is going to be responsible for getting the slots themselves so we can use them. But then the other computed property

00:19

is going to grab just the times in a sort of formatted way. So let's start with our slots. We basically just want to extract all of our slots out. And let's go ahead and make this a computed property.

00:32

And let's return what we need. So we know that the slots come from the availability, and that's another computed property. We want to grab the first result.

00:42

Again, we're going to filter this by first. We're going to use first just to grab the first date that relates to the date that we have currently selected.

00:50

So let's create out a closure in here. And this closure is, of course, going to give us a date for each of them. So let's return in here where the date to date string

01:03

is equal to the forms date that we have set. So remember, we set that as a string in this format. So now this should pull out the slots or the date that we have selected in the form.

01:17

Now what we want to do is just do a null safe on this and grab out all of our slots. OK, let's dump this out on the page and just see that we've got everything that we need.

01:28

So let's go back over to our checkout, and we'll just dump this at the top. So let's say this slots and see what this gives us. OK, yeah, so we type into that.

01:38

Let's go back over to our checkout and just make sure that we pull that in. And that is app booking and date. And yeah, so again, to date string doesn't work on date.

01:50

It needs to be the date within that date object. And yeah, there we go. So this is the date that we have chosen with all of the slots in.

01:57

Now we're not going to output all of this stuff, so don't worry that we haven't transformed this. It doesn't really matter. Now what we can do is grab a new computed property,

02:06

and we're going to call this times. So now from our slots that we've just grabbed, we want to pluck out just the times. So with this, again, slots might not be available.

02:17

So we're going to map through these and create a new structure, kind of like we did with our transformer. But I'm not going to bother creating out

02:23

the entire transformer for this. So let's go and put out our slot here. And then we want to map through and just return the times. We don't need anything else here.

02:33

So let's go and grab the slot, grab the time, cast that to a time string. And again, we want that in minutes. We don't want the extra seconds on the end.

02:44

And we should be good. So we're just going to grab the whole values out of here. We're going to cast that to an array so we can iterate over them really easily.

02:53

And otherwise, we're just going to use an empty array. So we don't really need, actually, we don't really need to cast this to an array. It doesn't really matter too much,

03:00

because we're going to be working within Blade. OK, so now let's go ahead and look at what the times looks like over here. And let's go over to the browser.

03:11

And yeah, so let's have a look inside of here what we did. Time, not times. And yeah, there we go. So we've got a perfectly usable array

03:20

to just iterate through and show all of the slots for that date. And again, if any of these were slightly different, so at the moment, we've got eight slots

03:28

on pretty much every single day, then these are going to change. Once we've got this working, we'll go into the database and we'll create some fake appointments or something to reduce these slots.

03:37

OK, but let's go ahead and just start to output these now. So over in our checkout, let's find out where we have our slots. I'm going to get rid of these.

03:45

So let's go over to our slot. And we just want to iterate over each of these buttons. So let's do a for each. And we might also want an if statement around this.

03:58

So let's add an if. And in that if here, and also add an else. And we'll just say no slots available for that date. Now, I know we're never showing slots for that particular date.

04:12

But if there's nothing available at all, no slots on any days, we're going to have to default to one day. So we're going to put all of that stuff that we just took out inside of there.

04:23

Say for each slots as, oh no, it's this times, isn't it? This times as time. And here we're going to say if this times empty or is not empty, then we want to iterate over them times.

04:40

And of course here, that's just a string because that's how we transformed it over here. Just cast it to a string when we map through. And there we go.

04:49

Great. We've got all of our time slots. OK, so these are the same for every day. So we can't really see them change.

04:55

So if we head over to the database and maybe just change around the times for some of these employees. So let me just set my working hours on a Monday from 12. And we'll do Tuesday on 12 as well, just

05:08

to sort of play around with this. So when we open up the calendar now, you can see there's only five slots here and only three slots on here.

05:17

And same for each of these as well. Let's just check where that is for Tuesday. So Tuesday starts at 9. OK, so I've done it ended at 12.

05:25

So we'll just keep that as it is. So you can see now that it accurately reflects the slots. If I choose one of these, sure enough, the new slots get loaded in.

05:34

I've chosen a new date. That's been set on the overall form. Now we just need to click on one of these slots to actually set that within our form.

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

Episodes

Transcript

Episode summary

Episode discussion