Build a Trello Clone With Livewire
This episode is for members only

Sign up to access "Build a Trello Clone With Livewire" right now.

Get started
Already a member? Sign in to continue
Playing
25. Showing all boards

Episodes

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

Transcript

00:00
Let's turn the dashboard that we have by default in Laravel Breeze into our dashboard that actually shows the boards that we've created. We know that we've only got one and in the next episode, we'll give the ability to create a new board as well.
00:13
Okay. Let's hop over and we'll just start to create out a new LiveWire component first of all. So let's go ahead and say LiveWire make, and let's of course call this board index. We already have one for showing boards.
00:25
This is going to be to list our boards. Now, before we do anything, let's go straight over to our web routes and for the dashboard that we have currently got, let's switch this over to a get route. And we'll go ahead and reference our board index in here.
00:41
So that becomes a full page component. We'll keep the same middleware and name as well. Now we know for any of these pages, we want to go ahead and use the base layout. So let's go ahead and define layouts and app inside of here.
00:54
And we should now have a entirely new page for our dashboard that we can add stuff to. If we come over to our standard dashboard component, we can pretty much just copy this entire thing over. We can even go ahead and just delete this from our views as well.
01:08
Cause we're working with a completely new component now. So let's go ahead and delete this, go over to our LiveWire components, go over to our board index, and we'll paste all of that in there. We don't need our app layout, but we want to keep our header in there and you can
01:23
change the title of that if you want. So we basically end up with exactly the same thing, but we're now working with a LiveWire component. So if we head over to our board index class, what we're going to do is just
01:33
pass our boards down and of course, iterate through them. So let's go ahead and grab the boards for the currently authenticated user, and we will pass them down. We don't have this relationship in here at the moment.
01:46
So over in our user model, let's get down to the very bottom here. And just to find out that really simple has many relationships. So let's say boards and this has many, and we'll say board and we should be good. Okay.
02:02
So we should now have access to them boards over in our board index now. So we can just start to iterate through them down here. So we'll go ahead and just get rid of this inner element just here. And we'll take this and just cut it out temporarily.
02:15
What we want to do is iterate through each of our boards inside of here, and then have a container with each of the boards inside of here, it's not going to look great at the moment, but we'll add some really simple styles to get this working.
02:29
So you can see at the moment, we only have one board. I'm going to go ahead and just create another one out in the database, just temporarily so we can see multiple on here. So let's create another one called articles and we'll change over the created
02:41
app and updates to that date for that as well. So we now have two of these let's style this up. So they look a little bit more like boards. So the outer container, we're going to set to a grid and we can say grid
02:53
colds, say four, it really depends on how many you want to show. And we can set a gap inside of here as well. When we head over it, you can see that these now sit next to each other really nicely.
03:03
Okay. So for each of these, let's just update the styles. We're going to set a very specific height on these and we'll say flex and items end.
03:12
That's going to push the text down to the bottom just here. And then of course, what we can do is just either add some padding directly onto here, or we can add another wrapping inside of here. Let's just do all in one here.
03:24
And we'll change up the text here to great 900, pretty much what we have before, but we'll just add a text large in here. So it looks like this. So really basic.
03:33
And if you wanted to a little bit later to be able to delete a board, you could add a little icon in here with a dropdown and you could go ahead and delete a board. We've already covered that stuff. So I'm not specifically going to cover it, but of course you can add that if you want
03:47
to. Okay. So finally, what we're going to do is just down here, add in a placeholder for creating a new board.
03:52
So let's create out a button in here and pretty much just take the same styles that we already have for the boards just inside of here and apply it directly to this. And this is going to be to create a new board. So at the moment looks like that.
04:07
We want it to be slightly different. So let's change up the background color here to gray 200 and let's have a look. And we're also going to change this up. So we don't have this as a flex and items end.
04:19
We want this to be flexed with items center and also justify central as well. So that sits directly in the middle. Finally, we're going to take the markup that we had for every other ad button that we've already created.
04:32
So I'm just going to wrap new board here in a span. Let's add that directly into here. And then just next to that, we'll pull in the same icon that we used for adding. And of course, just update the size to five.
04:45
Let's go over and there we go. We've got a new board. Finally, let's just set some spacing on this, on the X axis to one. And there we go.
04:53
So now we want to get to the point where we can click this, show a modal, give a title, create a new board, go straight through to that board and have the ability to start adding stuff to it. Let's cover that in the next episode.

Episode summary

In this episode, we take the default Laravel Breeze dashboard and turn it into something more lively by actually displaying all the boards a user has created. We start by setting up a new Livewire component specifically for listing boards and adjust the web routes so our dashboard points to this new page. Most of the existing dashboard view gets migrated over, and we clean up a bit by removing views we no longer need.

Next, we create a relationship in the user model so each user can have many boards. This lets us easily fetch and loop through the boards for the currently authenticated user. After updating the Blade template to iterate through the boards, we style the listing with a simple grid layout so multiple boards show up nicely side by side.

To make things look a little better, we tweak the styles so each board card has some visual separation. We even mock up two boards for demo purposes. As a placeholder for the next feature, we add a special card/button for creating a new board, complete with its own unique style and an "add" icon.

By the end of the episode, we've got a dashboard that lists all the user's boards in a nice grid and includes a button to create new boards (the actual creation is coming up next). It's the foundation for making your app feel a lot more interactive!

Episode discussion

No comments, yet. Be the first!