Build an Appointment Booking System With Livewire

Sign in Get started

This episode is for members only

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

Already a member? Sign in to continue

Playing

08. Showing all services by an employee

Episodes

0%

Your progress

Total: 3h 4m
Played: 0m
Remaining: 3h 4m

Join or sign in to track your progress

01. Introduction and setting up

01. Introduction and demo

02. A fresh Laravel app

02. Database setup

04. Creating employees and services tables

05. Employee schedules and exclusions tables

06. Creating the appointments table

03. Displaying employees and services

07. Displaying employees and services

08. Showing all services by an employee

04. Core functionality

09. How we build up availability

10. Working with date periods

11. Iterating over requested days in a period

12. Adding schedule availability

13. Removing schedule exclusions

14. Excluding time already passed today

15. Generating slots

16. Using a custom date collection

17. Building the service availability generator

18. Adding employees into slots

19. Removing empty slots

20. Removing slots with booked appointments

05. Building the checkout

21. Scaffolding the checkout design

22. Making the employee optional

23. Loading availability

24. Building Alpine plugins

25. Showing the calendar

26. Locking unavailable dates

27. Showing the slot count on the calendar

28. Updating the selected date

29. Showing time slots

30. Setting a time slot

31. Finding an available employee

06. Booking appointments

32. Taking customer details

33. Re-checking availability

34. Creating the appointment record

07. Appointment confirmation

35. The appointment confirmation page

36. Cancelling appointments

Transcript

00:00

When we click on one of these employees, we basically just want to see a list of services that they can perform. So we just need another route for this, another component,

00:07

and we just want to output this to the page in exactly the same way that we see here. OK, so to get started, let's go ahead and actually create a component for this.

00:15

So let's make out a Livewire component. And we're going to call this Employee Show. And again, we're going to register this directly in our routes.

00:24

So let's head over to our routes, grab this, and we'll go ahead and call this Employees. And then we will take the employee with route model binding, but we'll

00:33

grab them by their slug so this looks a little bit nicer. OK, so we can go ahead and hook that up to the Employee Show component that we've just created. And we'll say Employees.show, and we

00:44

can start to link through to this. OK, so let's go back over to our home page, and we'll link this up. So the href here is now going to be a route to Employees.show,

00:56

and we want to pass that employee through for route model binding. So we should now be able to click on each of these. Great.

01:04

OK, we just need this page created now. So we can basically just take the entire structure of this. Let's go over to our Employee Show component, paste this in, and then we can get rid of the first section just here

01:16

so we don't need this first section. And we're going to say choose a service from, and then we want the employee's name. We haven't pulled that in just yet,

01:28

but let's go ahead and just add that in there for now. And then this is going to be the employee services directly from that relationship, and we should see exactly the same thing.

01:38

OK, so obviously this isn't going to work at the moment because we're not passing this employee through or accepting it in. So if we open up the Employee Show component,

01:49

we basically just want to take this as a property, and that will be pulled in directly from model binding, and we should be able to see everything that we need. And there we go.

02:00

Great. So if we go back, when we click on Alex, we see two services. When we click on Mabel, of course, we just see one. And these components are going to operate

02:08

in exactly the same way. They're going to go through to the checkout, whether we have chosen an employee or whether we just want to choose a service first.

Episode summary

In this episode, we're building out the feature that lets you click on an employee and view all the services they can perform. Here's how we do it:

First, we set up a new Livewire component called EmployeeShow. We also register a new route for showing individual employees, cleanly using route model binding with their slugs for nicer URLs.

Next, we hook this new route up to our links on the homepage—so now, when you click on an employee, it takes you to that employee's dedicated page. Inside the new component, we reuse some of our existing structure to list out the services, adjust the heading, and make sure we're showing the employee's name at the top.

We make sure the component accepts the correct employee (with all their services) via route model binding. Once that's set, clicking on any employee displays a list of only the services they offer, perfectly tailored per employee—and everything's hooked up so that if you click further, you go through to checkout just like before.

Nice and tidy! This is a great foundational piece for making the site more user-friendly and dynamic.

Episode discussion

No comments, yet. Be the first!