Listing employees and services: Build an Appointment Booking System With Inertia

00:02

and services, we need a base layout. And there are a couple of ways that we could do this. We could create a component and then wrap everything within this template.

00:09

So this div could become a view component with a slot. Or we could create a base layout, and we could just define it as an option inside of this template.

00:19

And that's probably the better thing to do. So let's go over to our Layout section here. And you can see we've already got a couple from the starter here.

00:26

But I'm just going to create a new one called Base Layout. And this is still going to be a view template. So let's go add our view component. And we're going to create this out,

00:35

and we'll create out a div in here. And then we'll have the slot content sat directly inside of here. So let's just add a piece of text in here

00:41

so we can see what we mean. And then we'll go ahead and fill in the styling. OK, so over here, what we first want to do is import this base layout.

00:49

So let's pull that base layout in from that file that we've just created. And then up here, we want to go ahead and use the View Define Options.

00:58

And then we want to pass the layout directly into that. And that's all we need to do. Now what's going to happen is anything within this template is going to be injected into the slot of this base layout.

01:10

We can see that in action because now that ABC that we have in the base layout is being shown there. So over to our base layout, we can now

01:18

just start to add a couple of styles to this. So let's use Tailwind to add a max width of 4xl. We'll set the margin on the x-axis to auto so it sits in the center.

01:28

And we'll set the margin on the y-axis to 12 so we have a little bit of spacing between the top and the bottom. And we'll add some padding on the x-axis for 6

01:36

on smaller viewports so this doesn't sit in the very left and right. And that should be enough to just center everything for us. So we've now got a base layout which

01:46

we can use for any of the pages that we build. OK, so over on our home page, now we just want to start to list through all of our employees and services.

01:54

So let's start out with a div here with some spacing so we can have several containers in. So we'll space this on the y-axis by 10. And then this is going to be our employees section.

02:04

And then down here is going to be our services section. And we can build one of these out and then just duplicate it across. So for employees, let's go and create out a header in here.

02:15

Style this up really quickly with extra large text and font medium. And in here, we'll just say choose a professional. And then down here, we're going to create out

02:26

a grid with Tailwind. So let's define this out as a grid first of all. We'll choose how many columns we want this to be on a smaller viewport.

02:33

So we'll say two columns, as in 1 and then 2, the employees next to each other. And then when we go up to a medium viewport, let's go and set this to grid cols of 5.

02:45

We'll set a gap of 8, which will be the spacing between them. And then we'll set a margin on the top here of 6 so it sits away from the header. And now what we can do in here is output a link

02:55

for each of the employees. So let's just go ahead and start to iterate through our employees first of all. So we'll say for employee in employees,

03:02

that's that data that we get back from that prop. We'll give this a key, which can either be the employee slug or the employee ID. Both of them are unique, so it doesn't matter.

03:13

And let's go and just output something inside of here for each of them employees. And we'll just output the employee name. And what you'll see is we've now got a grid.

03:23

It's pretty difficult to see this unless we add a background onto here. So let's set a BG of black. And you can see that these are nicely spaced out.

03:32

And we've got 5 here. And if we were to pull the viewport in, we would have 2 on the smaller viewport. OK, so now that we've done that, we can just

03:40

start to style these up. Now we want these to be links. So let's go ahead and set this as a link first of all. So we're going to go ahead and import link from Inertia

03:49

so we can actually navigate through to the page that we want to be on. And then we can just go ahead and switch this component or this div over to a link.

03:59

Now the href for this we don't know yet, so we're just going to leave it empty. So let's add a class onto here. And let's give this some padding on the y-axis

04:08

and padding on the x-axis, slightly different. We'll add a border to this. We'll set the border to a slate 200. We'll make this a rounded large.

04:17

We'll give it a little shadow as well. We'll set this to flex because we want to position the things inside of this in a column. And that's just going to make it a little bit easier.

04:27

We'll set items to center. And we'll set justify to center so everything is centered inside of that box. We'll also do text center as well.

04:36

And let's add in a hover effect to this just to change the background very slightly. So we'll set this to gray 50 with a 75% opacity. So again, all of these styles are in the GitHub repository.

04:49

If you don't want to add these in, you can go ahead and copy and paste this if you're following along. And we end up with something like this.

04:55

And you can see that we've got a slight hover effect on each of these. Great. OK, so now we want to output all of the information

05:01

about this employee. We've got the name, but let's start with the avatar. So let's go and bind in a source here because we need to bind this attribute into a value

05:10

we're getting from this object. And let's say profile photo URL. And that's not going to work at the moment because over our employees table,

05:18

when we set them up while we were creating our core functionality, we just set this to ABC. But we'll swap that over in just a second. So for the image, let's just add some styling to this.

05:28

We'll make this rounded full. And we'll set a size of 14, which will give it a width and a height of the 14 sizing in Tailwind.

05:36

And we don't need a background there, but we could add that in if we didn't have an image. Next up is just going to be the employee name. That's it.

05:43

So we already know that. Pretty easy employee name. And let's style this up as well. We'll set the text to small, font to medium.

05:52

We'll set a margin top so it sits away from the image. And we'll set text slate to 600. And we have something that looks like this. Great.

06:01

So we just need to fill in a couple of these images now. Now, obviously, these images could come from anywhere. I'm just going to go ahead and paste in a Gravatar URL for each of these.

06:10

This one is me. And then the second one, let's just go and change one of these properties here to a different number.

06:19

That's not going to be found, but it will just give us the default profile URL. So now if we come over, we don't see the images. And yeah, that should be profile photo URL.

06:29

Let's just check our employee resource as well. And yeah, I've done the same here. So profile photo URL. And of course, change that around.

06:39

And yeah, we see our profile photo is great. So the services are going to look pretty much the same. So if we just head over to our home page here, we're going to go and grab this container here

06:49

and just copy and paste it down and then make a few changes. And of course, we want to iterate over our services instead. So we're going to change the header to or choose

06:59

a service first, which we know will go through to our checkout and allow us to choose a service for any one of these employees. And then we're just going to change over the iteration here to go over our services instead.

07:12

And again, key this by the service ID. So let's just start to change it around a few things here. We don't have an image for our services, but we want a service name.

07:20

So that's going to look like our title. So that's going to look like this. And then just underneath this, we're going to output the service duration.

07:32

And because these are usually always going to be in minutes, we're just going to hard code it minutes here. If this is different for you, then you can adjust your database schema.

07:41

Now, let's just adjust this to have a margin top of 1 so it doesn't sit too far from it. And we'll also change the text over to 400 so it's a little bit lighter.

07:51

And then for the price, we're going to do a similar thing, but we're going to add a background to this. So let's set the text back to a slate 600. And we'll set the background to a slate of 200.

08:03

We'll make this rounded. And let's just have a look at that. We'll just add a little bit of padding. So let's say 0.5 on the y-axis and on the x-axis 1.5.

08:14

And we have the following. But of course, we just want to change over this to the service price, which will now be our formatted price. And on here, let's just maybe bump the margin up a little bit.

08:25

And there we go. Let's also go ahead and set this to extra small text. And yeah, I think we're pretty much done. So now that we've got the service and the professional's

08:35

output, in the next episode, we'll go through to click. And when we click on a professional, we want to show the services that they perform. But we're also going to move this service component

08:45

or this service container over to a new component so we don't have to repeat ourselves every single time. So let's go over and handle clicking on a professional to see their services in the next episode.

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

Episodes

Transcript

Episode summary

Episode discussion