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
32. Showing available slots

Episodes

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

Transcript

00:00
Okay, finally let's take a look at showing available slots and there's a couple of ways that we need to handle this. The first way is as soon as we land on the page we know that we populate this with the next available date which we know has slots so we want to show the slots straight away. The second thing we want to do is when we pick a date we then want to re-render
00:21
and grab the new slots. So let's take a look at the first one which is just as we land on the page. Okay, so we're going to need somewhere to store these slots. We could use a computed property for this which we might switch out for later but let's just keep things simple for now. So I'm going to go ahead and create out a ref within view with just an empty array and that's going
00:41
to contain all of them slots that we can iterate over and show just down here. Okay, so the next thing is when we land on the page e.g on mounted we then want to load in these slots for the current date. So let's go ahead and create out a method in here called set slots and that's just going to grab from the availability that we're already passing down even when we switch over to a
01:06
different month all of the slots within there. Now into this we want to take the date because we only want to load in slots for the date that we are chosen either the current date or the date that we click on and then in here we can just set the value of that ref from the availability from our props and we're just going to find the date so again we'll just call this a for
01:30
availability and the condition is that the date matches the date that we've passed into this function and then we just want to grab out the slots and remember the slots come from our availability resource under our slots here which are all rendered with this slot resource. So now that we've got that let's just dump them on the page and see what happens when we immediately
01:53
invoke set slots from here passing in the date the original date this remember comes from our props which is if we come over to our checkout controller our first available date so that should just fill with that value so let's go down to here and just dump the slots out in fact we'll dump them out where we expect to see them down here and we should see them in there great so we've got a
02:20
few slots in here and then obviously if the date was different we'd have a different amount of slots so that's the first thing that we want to do and we're going to iterate through these and show them in a minute but the second thing we want to do is when a date is changed so this has four slots so we've only got four here if we choose say this one we want this to re-render and show
02:39
the next slots so how do we do this well if we just come up to our unmounted hook that we have here where we're using on render we can also say picker on select so that's another event that this package gives us and if we just console log here on the event let's just see what happens so let's pull up our console let's go ahead and choose another date and there we go we get another
03:05
custom event the detail here contains the date which we're going to need to format in the format that we expect pass through to that function and then that slots them slots will get set in that way so let's say set slots and we know that we get a date as part of this the detail of this custom event so we're going to say date and remember we want to format this in the format that we expect
03:28
so it can be plucked out of our availability and we should be good so let's go over we'll get rid of this date in here start afresh and see what happens so now when i click on this you can see that that new day gets passed in as we select this and it's bringing back all of the other slots and yeah sure enough for every single date now we get all of the slots loaded in and let's just check
03:52
our console we are all good so there we go we're now loading in all of them slots that we expect so now we'll just go ahead and iterate through them style them up and we're good to go so let's go down to our slot section where we are outputting our slots and start to iterate so once again in here let's go ahead and create out a grid and we'll say grid calls three and on medium we'll
04:15
say grid calls five for responsive we'll set a gap of eight and a margin top of six we've already got so let's just yeah we'll just leave that as it is for now and in here we want to iterate through each of the slots so we're going to say v4 slot in slots which we should now have for the key let's just give that the key of slot and date time and then inside of here let's grab out the slot time
04:42
i think we called it that let's just check out on our slot resource and yeah so we've got the date time which tells us what date we're choosing and the time and then the time which is the label so now you can see that we get all of these times output which is great so let's just style this up quickly and we are good so let's set some padding on the y-axis let's set a border on here
05:07
and we'll change the border to slate 200 rounded large so pretty much like we had for everything else text center and we'll set a hover on here to say background gray and i think we chose 50 with a 75 opacity we'll set the cursor to a pointer so it looks like something we can click and we should be good we're going to get to selecting these in the next section where we
05:31
actually choose a slot so we've got a nice hover effect we can see the slots really clearly here and once we click on them they'll be set to our overall form which will be submitted through so there we go we are now loading slots as we hit the page but also when we choose each of the dates as well great

Episode summary

In this episode, we tackle how to show available slots to users on our booking page. First, as soon as someone lands on the page, we automatically fetch and display the slots for the next available date, so there’s something to see right away without any interaction.

To achieve this, we set up a ref to hold the current slots, which we then fill by grabbing the right data from our availability. We also put together a method, setSlots, that updates this slots array based on the chosen date – either when the page is loaded initially, or when a user selects a different date from the date picker.

We hook into the date picker’s selection event to reload the slots any time the user picks a new date. This ensures what you’re seeing always matches the date you’ve chosen. Then, we loop through the slots and lay them out in a responsive grid—styling them so they look nice and are clearly clickable options, complete with a hover effect.

By the end of the episode, the user can see the available slots for any selected date, setting us up perfectly for the next step where you’ll be able to actually select a slot to book. Stay tuned!

Episode discussion

No comments, yet. Be the first!