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
01. Introduction
02. Designing the board
03. Sorting stuff
04. Managing the board
05. Archiving
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.
31 episodes•2 hrs 27 mins•11 months ago
Overview
Get ready to master drag and drop sorting in Livewire, by building a Trello clone.
We’ll start out by building the interface completely from scratch, then add the ability to sort columns and cards, including moving cards around columns. As we sort everything, we’ll keep the database perfectly updated with the new order.
Our Trello clone will also allow us to edit column titles inline, edit cards and add notes, archive cards and columns, and put them back on the board.
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!