Build an Appointment Booking System With Laravel
This episode is for members only

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

Get started
Already a member? Sign in to continue
Playing
29. Fetching available slots

Episodes

0%
Your progress
  • Total: 4h 49m
  • Played: 0m
  • Remaining: 4h 49m
Join or sign in to track your progress
01. Introduction
01. Introduction and demo
9m 48s
0%
02. Fresh project with Pest
2m 14s
0%
02. Core functionality
03. How we build up availability
7m 55s
0%
04. Employees and services
7m 39s
0%
05. Employee schedules and exclusions
7m 53s
0%
06. Setting up appointments
5m 34s
0%
07. Working with date periods
10m 4s
0%
08. Iterating over requested days in a period
4m 51s
0%
09. Adding schedule availability
15m 38s
0%
10. Subtracting employee schedule exclusions
7m 53s
0%
11. Excluding time already passed
2m 57s
0%
12. Writing tests for schedule availability
19m 50s
0%
13. Generating slots
14m 47s
0%
14. Building the service availability generator
7m 5s
0%
15. Adding employees into slots
9m 44s
0%
16. Removing empty slots
4m 42s
0%
17. Removing slots with booked appointments
6m 44s
0%
18. Using a custom date collection
3m 34s
0%
19. Writing tests for service availablity
18m 42s
0%
03. Building the booking UI
20. Base layout and Tailwind setup
5m 5s
0%
21. Listing employees
5m 42s
0%
22. Listing services for an employee
8m 30s
0%
23. Scaffolding the checkout
8m
0%
04. Building the availability calendar
24. Installing Alpine.js
3m 15s
0%
25. Installing and using easepick
7m 31s
0%
26. Disabling unavailable dates
8m 43s
0%
27. Showing available slots on the calendar
9m 54s
0%
28. Requesting available slots
4m 41s
0%
29. Fetching available slots
9m 36s
0%
30. Displaying and selecting a slot
5m 46s
0%
05. Booking appointments
31. Hooking up customer appointment details
5m 17s
0%
32. Disabling future steps
2m 43s
0%
33. Storing an appointment
14m 43s
0%
34. Handling appointment collisions
8m 1s
0%
35. Redirecting to a confirmation page
2m 55s
0%
36. Building the appointment confirmation page
5m 40s
0%
37. Cancelling an appointment
5m 30s
0%

Transcript

00:00
OK, so in this Fetch Slots method, we're going to make a request to our back end
00:04
to fetch a list of slots. And then we can put them into this slots array. And then inside of here, we can start to output them. We'll do that over the next couple of episodes.
00:13
The first thing we need is a controller to deal with this. So let's go over to our web routes and think about how this is going to work. We'll define it out here first of all.
00:21
So let's just say this is called slots. And we'll build out a slot controller. And let's just call this slots. So this is not an API endpoint.
00:30
It's within our web routes, which is fine. But this would just return JSON data to us. So we need the employee because we need to know which employee we're requesting for.
00:40
We need to know the service as well. And we also need to pass down to this a date. So we're just going to pass an individual date. We're only ever going to show a slot for a single date
00:48
that we've chosen on the calendar, so that makes sense. OK, let's go ahead and build this controller out. We can preview this in the browser. And then we can hook it up.
00:57
So let's make out the slot controller in here. We'll go ahead and just import this. And let's come over here and just start to build this out. So create an invoke magic method.
01:08
We know that we need the employee in here. We know that we need the service in here. And we will get a date in here from the request as well. So we're going to bring our request object into here.
01:21
So let's just return a response here. We use the JSON method just to output an empty array. But eventually, this is going to look like the following. So we're going to have each of the slots in there
01:32
that we want to output. OK, so let's open this up just in the browser, just so we can see this. So let's go ahead and create a new tab for this.
01:39
And we'll go ahead and change this over to slots. And there we go. So we just get an empty array at the moment. So in here, we pretty much, well, we
01:48
can just reuse the availability slot calculator we've already done, but just narrow this down to the day that's been chosen. So we're going to do exactly the same thing
01:57
that we did on our checkout controller here. So we're just going to reuse this, because this is the sort of truth to all of our availability.
02:05
We're going to pass the employee in. We're going to pass the service in. But the period is just going to be the date that we get requested via our request.
02:13
So that's going to be in the format that we would expect. So we can just say carbon parse and pass in the request date. So we're going to accept it in the query string as a date. Let's just pull carbon in as well.
02:27
And then we're going to go start of day. Really important. We want the slots for the entire day. So we can do the same thing down here, but of course,
02:35
the end of the day. Let's pull that in, and there we go. That should give us all of that availability. So let's go ahead and die dump on our availability
02:43
and see what we've got. And yeah, sure enough, we've got a date in here with two slots. So that's just because of the date we're currently working with.
02:51
We can go ahead and change that to, let's say, 9 o'clock. And we should have a bunch more slots in here now. 14, great. So now we want to take these slots that we have available,
03:04
and we want to return them as JSON. So in here, what we're going to do is say times or slots, whatever you want to call it. And we're going to grab the first available date,
03:13
because remember, we're only working within one single date here. So we just want to grab the first date. We want to go into these slots, and we
03:20
want to map through them so we can return a standard array of slots. So we get a slot just in here, and we want to return the slot time.
03:32
And we want to format this. So we're going to format this slightly differently. We're going to just manually format this with the hours and the minutes.
03:38
Kind of makes sense. And then down here, we can grab the values from this. If we don't grab the values, we're going to end up with a keyed array, which we don't want.
03:46
And we're just going to say to array. Let's just get rid of them values so I can show you what we mean. Give that a refresh, and you can see
03:52
that we've got the indexes here for each of these slots, which is not what we want. What we want to do is just get a list of these values. So there we go.
04:02
Our appointment starts, or our bookings start at 10, because it's an hour shifted. And we get each of the slots for the day up to 430. Perfect.
04:10
So now that we've got this, we can make a request over here to grab this information. So over on our checkout, let's go and make a request in here. To do this, we can just use the native browser functionality
04:23
to make a request, or we can pull Axios in. We're going to pull Axios in just because this will send through credentials to our web routes in case you are working with authenticated users
04:34
or you have anything else that you need to do. So let's go ahead and do an npm install on Axios. This will just allow us to make HTTP requests. And we'll go ahead and set this up in app.js.
04:45
In fact, this might already be pulled in in Bootstrap. Let's have a look. And yeah, it already is. So we already have Axios installed here,
04:52
bound to the window object. And it sets our common headers as well. And we can add any additional config in there that we need. OK.
05:01
So we can just start to make our request out, which is great. So in here, let's say Axios get. Now we need the name of the route. So let's backtick this.
05:09
And in here, let's output this with the route helper since we're just working in Blade. We'll call the slots route. Pass the employee in.
05:18
Pass the service in. But now at the end of this, we're going to need to pass the date in that we're requesting. So if we just remind ourselves about this event here
05:27
and we just get rid of this request for now, let's go and see what we get. So we get a event in here with some detail. We've got nothing in there at the moment.
05:37
So why don't we just hook this up to our form really quickly? A little bit of a tangent, but let's leave this for now. And let's look at this overall component. So what I'm going to do is I'm going
05:48
to make this entire div here a component. And in here, we're going to have form data. And we're going to have the date we want to book for as well as the employee stuff as well.
06:00
But for now, we'll just focus on the date until we start to bring everything together. So what we can do is within our calendar, let's just get rid of this one.
06:09
No, we can open this one up here. So when this new date gets selected, either when we land on the page or when we choose a date, we can go ahead and set the form date.
06:19
So form is what we've just created just up here. We can set that form date to a formatted version of the date. Now, this is pretty tricky because in the event that we get in here, if we just console log out the event
06:33
that we get in with the detail of this event, let's just see what happens when we do this. And yeah, so we do actually get the right format. So that's fine.
06:43
So let's just add that directly to the form. So let's say form date e.detail.date. And that should be good. So what's happening now is we have
06:52
a overall form for our entire booking process, which will add the employee to the customer's name, email address. But we've got this date stored at the root level now. So what we can do with this now that is being set
07:05
is when we fetch the slots, we can grab the date directly from that form. So we can say form and date. OK, so once that request finishes,
07:16
let's go and grab back the response that we get back from our controller that we've just built out. And let's just console log the response data
07:25
that we get in there and just see what we get. OK, so already when we hit the page, remember what's happening is we are triggering that select for the current date, which we have changed.
07:36
And then that is going ahead and dispatching that event to our slots. And it's also setting the date as well. So the slots now are actually coming through,
07:43
which is really nice. And more importantly, when we choose another date, that's going to go ahead and hopefully give us another one as well.
07:51
Now, it's not working at the moment. We'll figure this out in a second. So it looks like what has happened is the initial date that we set in the form is good.
07:58
The format is good for us. So we did that just up here like this. But it looks like if we console log out the detail and the date here, this
08:10
changes between the first request, which is this one here. And when we choose another one, we get a different date format. So we are going to need to format this here
08:19
to make sure that it works for both of these events. So let's go ahead and do that really quickly. And then everything should just come together. And we should be getting all of our slots
08:27
through, whether we land on the page or whether we pick a date. So what we're going to do is use EasePicks. You can use another library if you want. But we're going to new up an EasePick.
08:36
I think it's .dateTime. And we're going to go ahead and pass that date in. And then we're going to format it specifically in the format that we want.
08:45
This just is going to ensure that it's always in the format that we need it. So hopefully that's enough. Let's just go ahead and check this out.
08:51
Give the page a refresh. Yep, we're getting through our times. Now when we choose this, it's going to format it specifically to that format.
08:58
And yeah, once again, we get all of the time slots. And they're slightly different just because of the time of the day. So there we go.
09:05
We are now grabbing all of our dates. Now the only thing that we need to do is make sure we set them into these slots just here. So that's very easy to do.
09:14
We can just go ahead and set this slot to response data and times, which is the key that we gave. And now we have all of that data in there. So we're not seeing anything at the moment.
09:26
But in the next episode, we're going to iterate through all the slots, style them up, and then we're pretty much done with the entire availability calendar and the slot selection.

Episode summary

In this episode, we tackle the part of our booking app where we fetch the available appointment slots for a selected date, service, and employee.

We start by setting up a new controller and a route to handle slot-fetching requests from the frontend. We make sure to send along the selected employee, service, and the date we're interested in. The backend uses our slot availability calculator (which we already have from earlier) to figure out which times are open for that specific day and returns those times in a nicely formatted JSON array.

On the frontend, we use Axios to make HTTP requests to the new slots route when the date changes or the page loads. We spend a little time tidying up our data handling: making sure dates are sent and received in the right format, and that our slot data is an array of times rather than a keyed object. We also rework our component state and event handlers so whenever you pick a date in the calendar, we fetch and store the new slots correctly. Along the way there are some small hiccups around date formatting, so we add logic to standardize our date formats and make sure everything stays in sync.

By the end of this episode, our frontend is successfully making requests as soon as you pick a date (or load the page) and storing the available slots in the right place. In the next episode, we'll work on displaying these times and styling them up in the UI, completing the slot selection flow!

Episode discussion

No comments, yet. Be the first!