This episode is for members only

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

Get started
Already a member? Sign in to continue
Playing
28. Showing the first available date

Episodes

0%
Your progress
  • Total: 5h 0m
  • Played: 0m
  • Remaining: 5h 0m
Join or sign in to track your progress

Transcript

00:00
Before we move on to something a little bit more tricky, let's look at just populating this with the first available date.
00:07
Now, we know if we just look at our code and under our date collection, we've already got this first available date, which used first to grab out where we have
00:16
a slot count for a certain date. That basically just gives us the first date that has slots. So what we want to do is pass this down in our checkout controller and then attach it to our picker
00:25
when we instantiate this so it's already in there and selected. So let's go ahead and just call this date. We could call it first available date, but let's just keep this simple.
00:35
We're going to go ahead and say availability first available date, which we already know. And then we're going to say grab the date and cast it to a date string, which
00:47
will give this to us in that format that we expect, YY, MM, and DD. Now, let's go over to our checkout. Let's go ahead and pull this in as a prop.
00:59
So date, and that's going to be pulled through as a string. And then down here, what we can do is attach this directly into our picker. So all we want to say in here is date and props.date.
01:10
And we should be good. So now when we come over and give this a refresh, that gives us the first available date. Now, if we go over to the database
01:18
under our schedule exclusions and we're specifically looking at Alex, of course I'm available today. But if I wasn't available today, so let's change this over to the 19th, then what's going to happen
01:33
is that's going to send me directly over to the 20th. And then when we get to generate our slots and calculate our slots, that will only load in slots for the 20th, which, of course, is tomorrow.
01:45
So there we go, a really easy change to that where we just populate this with the first available date. I'm going to go ahead and get rid of this schedule exclusion.
01:53
And in the next episode, we're going to work on the ability to navigate between this and load in more dates as we navigate, which is a lot more difficult than it sounds.

Episode summary

In this episode, we focus on making our date picker a bit smarter by automatically selecting the first available date that actually has open slots. We start by using some existing logic in our code to find that first available date, and then pass it from our backend through to the frontend as a prop.

You'll see how we briefly tweak our checkout code so that the date picker is pre-populated with this first available slot—meaning users won't have to hunt for it themselves. We also demo what happens if there aren't any slots for today: our picker will jump straight to the next available date.

Finally, we test this out by playing with the schedule exclusions in the database and watching how the picker responds. In the next episode, things get a bit trickier as we start building out navigation to move between dates and dynamically load more slots.

Episode discussion

No comments, yet. Be the first!