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
28. Requesting 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 now we can choose a date on the calendar.
00:02
We need to work on the mechanism for fetching slots. So we're basically going to take this whole section here, duplicate it down, and this will become its own Alpine component. So let's go ahead and do that now without
00:15
copying everything we've done with this calendar stuff. So we'll just grab the header here and we'll change this to and we will say choose a time slot and of course, we'll have some kind of content down here with just a margin on the top.
00:31
So this is where our slots are going to be listed out. So this is going to become our Alpine component. So if we head over, this is what it looks like. The first thing we need to do is trigger this as soon as we land on the page.
00:44
So we've got an initial date in here. We want to immediately fetch these slots. But behind the scenes, how is this component going to work? Well, let's go ahead and just turn this
00:53
into an Alpine component with our X data. And we know that with this, we're going to store the slots in here. And that's just going to be an array of slots. And this will be like nine o'clock, nine thirty, so on and so forth.
01:06
So that's what's going to go in here. But then in here, within this Alpine component, we can also create a method to actually fetch the slots. Now, we're not going to be filling this in just yet.
01:16
I'm just going to console log out, fetch slots, and that will make a request through to our back end with the date that we've requested. And it will fetch all them slots for us. So what we're going to do with this is we're going to attach an event handler.
01:30
So when we get a slots requested event sent on our window object, so this will be like a global event that we can dispatch from our other Alpine components, then we're going to go ahead and call fetch slots. And we'll pass the event in now.
01:45
So we've got that so we can actually grab the data from that. But we won't dump that out. So basically, from somewhere in our app, we need to fire this slots requested event. You can call this anything.
01:58
You don't need a hyphen between it. But that's what we're going to name it here. OK, so when do we want to do this? Well, we want to do this on page load,
02:05
but we more importantly want to do this when the calendar is available and booted. So again, what we can do is close off this one and we can come up to our picker component and we can add an event to this. So if we think about this, we're initializing this picker just here.
02:21
Underneath this, we can just start to attach events to it. So we're going to say this picker on. Select, so that is when we have selected a date. We are going to console log selected.
02:35
Let's check this works, first of all. So let's come over and pull up our console and we will click a date. There we go. So we get that event actually fired. But from here, what we can now do is we can dispatch that slots requested event.
02:49
So when a date is chosen, dispatch this over on the other component. That's going to go ahead and pick that up and it's going to fetch slots. So let's go over and try this out. So keep an eye on the console.
03:00
Let's go ahead and choose this. And there we go. We get fetch slots. So we dispatched from the calendar component and that comes over to the time slot component, which will then fetch the slots for us.
03:10
OK, so now that we've done this, the problem is this works for when we click on a day. But when we land on the page and we refresh it, nothing happens. What we want to do is we want to trigger
03:20
a select as soon as this component loads. So to do this, we're going to go and we're going to use next tick, which is an Alpine piece of functionality, which means when the next render happens. So when the next render happens,
03:34
everything has sort of landed on the page and everything is working. We're then going to go ahead and say this is pick a trigger and we're explicitly going to go ahead and trigger a select. Now, when we trigger a select,
03:47
we need to pass through the date that's been selected, which would just be the current day. So we're going to pass through into this the data date. And then in here, we're just going to grab out the first available date. So basically, when the page loads, we wait for the next tick.
04:04
So the next render, we trigger a select with the first available date, which will then fire this event, which will dispatch this slot requested through to our slots component. So let's go over and give this a refresh now.
04:15
And you can see immediately in the console we get fetch slots. And when we choose another date, we get fetch slots again. So now the only job we have to do now is down here in our actual slots component is fill in the fetch slots functionality to actually make a request to our backend
04:31
to grab these slots out. So let's head over and build the kind of API endpoint, which will take in a date, the employee, the service and actually give us back a list of them slots.

Episode summary

In this episode, we're working on making our booking app a bit smarter by actually fetching available time slots when a user picks a date on the calendar. We start by setting up a new Alpine component that will be responsible for displaying the available slots for a chosen date. Instead of duplicating our entire calendar logic, we just take the header and make a fresh section for picking a time slot.

The real magic here is getting these two pieces (calendar and slots) to "talk" to each other. So when the page loads, or whenever someone clicks a date, we want to fetch fresh slot options automatically. We do this by dispatching a custom slots-requested event whenever a date is picked, and then our slots component listens for this event and triggers the fetch logic. Right now, we're just logging that it's happening, but soon we'll wire it up to actually call the backend API.

We also handle the common issue of nothing happening if you land on the page with a preselected date. To fix that, we use Alpine's nextTick to fire off a slot fetch right as the component initializes, which makes for a much nicer user experience.

By the end of the episode, we've got everything in place: picking a date fires off a fetch for available slots, and when you load the page, it fetches immediately as well. The next thing we'll do is actually fill in the fetch logic so we can pull real slot data from the backend.

Episode discussion

No comments, yet. Be the first!