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
26. Creating a new board

Episodes

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

Transcript

00:00
We're going to add the ability to create a new board to a modal.
00:03
So let's go ahead and create out another component. And we'll, of course, put this in our modals directory. And let's call this create board. Let's go ahead and create that out.
00:12
We already know how to dispatch these. So let's go ahead and add in a handler. When we click on this button to dispatch, as we've seen before, and we know that we want to dispatch that open modal event.
00:26
Inside of here, we want to choose the component. So let's choose that now. That's modals and create board. We don't need to send any additional data down to this,
00:36
because we know that we're just working with creating a top level board. OK, so when we click this, we should get a modal. And yeah, we haven't extended that component yet, but we know this is going to work.
00:46
So if we open up the create board component, let's extend that both modal component. And we'll head over. There we go.
00:53
We haven't got any content in there yet, but that's fine. Let's open this up and go ahead and use our modal wrapper. And in here, we can just fill in a form with everything that we need. So let's give this a title called create board.
01:08
And why don't we start steal the styles for one of our other modals that we already had, like our edit card. So we can go ahead and grab all of this, pop it directly into here, and just tidy some stuff up.
01:20
So we know that we just need a title here. So let's go ahead and get rid of the notes. And we don't need an archive button because we just want to create a board out in here.
01:30
And we can leave them if we had any other options. OK, so now that we've got this, let's just preview this just to make sure it looks OK. And yeah, that looks fine.
01:39
And let's go ahead and just update everything inside of our create board modal. OK, so we need a form in here, of course, to create a board. So let's go ahead and say live wire form, create board.
01:55
And let's go ahead and fill this in with everything that we need. So create board. This is just going to have a title. So again, exactly the same thing.
02:03
Let's add a string for the title. And let's validate this. And of course, we just want that to be required. OK, so now that we've got that, let's go ahead and pull
02:14
that form directly into here. So create board from our forms. And we'll call that create board form. Now we just need to update our template.
02:25
So let's go over to create board. And this will be create board form. This will be create board form. And we will create a method called
02:36
create board inside that modal. OK, so we're just about done. Let's go ahead and implement this function to create a board or method to create this board.
02:46
We've done this a million times before. So we just want to access the create board form. We want to validate this. And let's go ahead and just do everything in here.
02:55
So we want to grab the currently authenticated user. So let's grab that user. Let's go into the boards relation. And let's create a board out here.
03:05
And then we'll go ahead and just access our create board form. We'll grab only the title from that. That's all we need. And we are done.
03:15
We have created a board. Now we want to redirect to the board that we've just created. Let's hop back over to our web routes just to check the board here.
03:23
We don't have a name for this yet. So let's give this a name. And we'll say boards and show. And to do this now, we can just redirect.
03:34
So let's say return, redirect to a specific group, boards show. And we'll pass in the newly created board, which we haven't assigned just yet. We don't necessarily need to pass the ID.
03:47
Let's assign this here. And we should be good. Let's try this out. I'm actually going to get rid of the articles board
03:54
that we already created. And let's click this, call this articles. And yeah, sure enough, once again, we've got a mass assignment exception.
04:02
So let's hop over to our board model and let's add in our guarded. So let's add that again to either an empty array or just the ID.
04:14
Okay, let's try this one more time, articles. And there we go. We jumped straight into the board. We can obviously start to create columns and cards.

Episode summary

In this episode, we're focusing on adding the ability to create a brand new board using a modal. We kick things off by making a new CreateBoard component and stashing it inside our modals directory. The idea is that when a certain button is clicked, it will dispatch an event to open this modal.

Once the wiring is set up, we make sure that triggering the modal works and then dive into building out the content. We use a modal wrapper and set up a simple form—using Livewire—that just asks for the board title (keeping it straightforward). For speed (and style consistency), we rip some of the markup and styling from an existing modal and strip out anything unnecessary, making sure we only have the essential fields and actions for creating a board.

We make it so that when someone submits the form, the backend will validate the input, create a new board for the authenticated user, and then redirect to the new board's page. There's a hiccup with mass assignment (classic!), but we handle that in the model with a quick fix. Finally, we test it all the way through—and once it's working, a new board can be created and we're taken straight to it, ready to add columns and cards.

This episode is a great hands-on demo of extending existing modals for new features, wiring up forms, handling validation and redirection, and making sure the user flow feels intuitive and snappy.

Episode discussion

No comments, yet. Be the first!