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
13. Creating columns

Episodes

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

Transcript

00:00
To add a column, let's go over to our board show just underneath where we're iterating over each of our columns.
00:06
And then let's add a container in here with a button to add a column. We'll go ahead and style this up in a bit. Okay, so that should sit right next to that. We can go ahead and style this up now to make it look more like something we can
00:19
click. So let's set a background to this, and we'll go ahead and set a shadow to small. We'll keep everything more or less the same as each of our cards. And we'll set some padding on the x-axis, let's say to four, and
00:33
padding on the y to three. Let's also go ahead and make this flex with items center, and we'll set a space on the x-axis to one. The reason that we've done this is we want an icon just next to our add column
00:46
button, which we'll pull in in just a second. Okay, that's not looking great, so let's set rounded here to large. And we also set a fixed width on our columns, so let's do exactly the same thing for this as well, and yeah, that looks a lot better.
01:00
Let's go ahead and pull in an icon for this, so let's pull in a plus icon. We'll just grab the SVG for this, wrap the add column text in a span, and then we will put the icon just before this and style this up. So let's go ahead and set the size to five to keep it the same as the other icons we
01:17
have, and we now have a button that we can click. So we wanna do a similar thing here to what we did when we looked at toggling the column title, so in this overall wrapper, we are gonna turn this into an Alpine component again.
01:32
So the data in here is whether we're gonna be adding something or not, which of course by default will be false. Just up here, once again, we'll add in a template, and we'll have an if statement on here to only show this if we're adding something.
01:47
And for the button, of course, we'll use X show to say if we're not adding something. So our form can go directly inside of here. Let's add the click handler to this button, so let's say X on click, and we will set adding to true, and let's head over and check this out.
02:06
Great, so we're gonna replace that out with a form now. So we could wrap all of this stuff since we're using more or less the same styles in here, but let's go ahead and just copy these over, just in case we need to make any subtle changes to this.
02:21
And inside of here, we know that we're gonna have an input and an input label, and we also need to validate this as well. So let's create a wrapper out for all of our input stuff. Once again, we're gonna go and
02:32
pull in a text input over from all of our other components. But we're also gonna have an input label, and we're also gonna include an input error as well. So let's have the attributes we need for these.
02:43
This is just gonna be the title, and the value here is gonna be title. And we'll set a class of screen reader only, just so this appears on the page, but not visually. And for our text input, let's set the ID of this to title.
02:57
And we will set in a placeholder as well, just to say column title, or whatever we wanted to say. And once again, just add some styles to this to say width to full, and we should be good.
03:09
Okay, let's head over, and when I click that, yeah, there we go. That looks a lot better. What we're gonna do though is just set the background here to white. So let's get rid of this, and there we go.
03:22
Let's just go ahead and tidy up some of the styles on our form, so everything looks good. So we don't need flex item center here, and there we go, that looks a lot better. Okay, so finally, let's go ahead and add in our button.
03:35
So down here, we'll create out another container. We'll include an X primary button, which again is that component that comes with RFL Breeze. But we'll also add a button next to this with the ability to cancel this off.
03:49
So let's set this as a type of button, so it doesn't submit our form. And let's add some classes to this really quickly. So let's say text small, and we'll say text gray 500. Let's make this a flex container, so it spaces things out nicely.
04:05
We'll say item center, space X of two, and we'll set a margin on the top of one. And we should end up with a nice looking form that we can click to cancel. To cancel it, it's pretty straightforward. When we click on this with Alpine, we just want to set adding back to false.
04:20
Okay, that is our form done. Now, let's get it submitted and get a column created. So naturally for the form itself, we're going to say wire submit, and we will call a method over on this component called create column.
04:35
If we head over to our board show, let's create this out here. So we could just do this down here, it doesn't really matter. So let's create our create column. And the first thing we want to do is obviously hook up all of the data and
04:49
attach this as well. So we're going to use a form class for this. So let's say live wire and form, and let's call this create column form. Or just create column, I think it's fine.
05:04
Okay, so we're going to pull that into the top of the page here. So create column, and we'll call this create column form. And what do we need inside of this form? If you've not worked with form classes in LiveWire before,
05:19
it's basically just allowing you to add properties. So in our case, that's going to be the title. And then we can just validate in here as usual, but we can just treat this as a separate object.
05:29
So I'm just going to say that this is required, but of course you can add any more rules that you want. Now that we've got the create column form, when we create this column, we can just say this, create column form, and validate.
05:42
And that will validate any of the properties inside of there. We don't have these hooked up yet, so over on our board show, we can just hook this up on our input. So wire model, create column form, and title.
05:55
And then we can include some validation errors as well, just in case. So x input error, and we want to pass a bunch of messages down to this. And the messages come from our errors, and we want to grab create column form and title.
06:13
We'll also give this a class of margin top one. Okay, if we head over now and submit this, there we go. We get some validation errors, and of course we can cancel that off. Okay, now all that's left to do is actually create the column.
06:27
So we'll start by creating the column out without persisting it in the database, so we can attach everything we need. So let's access the board that we have, obviously, within this component. Let's grab the columns relationship, and
06:39
we'll make this out using the fields from the create column form. We just need the title here, so we can just say only title. And then we want to associate the user, so let's grab the user relationship for the column, which I don't think we have yet, but we can add it in.
06:54
And let's associate the currently authenticated user. And then finally, we'll go ahead and say column save to persist that once we've attached everything we need. Okay, we're going to head over to the column model, and yeah,
07:07
sure enough, we don't have a user relationship in here. So let's create that out now. We know that this belongs to a user, so let's just add in a very simple belongs to user relationship.
07:20
And if you were doing that, it would mean that when you're ordering columns, you could do what we said earlier, where we could say belongs to. So you could change this to belongs to, not the card, the column, let's find that. We could say belongs to, and we could pass in the user, a lot more readable.
07:43
Okay, now that we've done that, let's go down to our create column method, and we should be good. The only other thing we want to do here is just reset all of the defaults with our create column form, so we can just call reset there.
07:56
Okay, let's see if this works. So I'm going to create column four, hit that, and yeah, again, we've got a mass assignment exception. Let's go over to our column model, and let's add in our guarded in here.
08:13
And we can either set that to an empty array, or we can just choose to guard the ID. Okay, let's go ahead and say column four, hit that, there we go. Easy as that, we've created it. Now, obviously, there's a couple of things to do here.
08:26
We, first of all, want to cancel off this state once a column has been created. But also, it's really annoying, because when I click add a column, this isn't selected or focused by default. Let's work on that focus first of all,
08:40
because that's pretty straightforward to do with Alpine. We just need to come over the text input here. And basically, on the initialization of this input, we want to take the element that this relates to, and we want to use focus.
08:52
Now, that is the reason that we used a template here rather than an X show. By using a template and assigning an if statement, none of this will actually be rendered on the page before you end up with a truth value. So what this means is that when this gets rendered,
09:10
init gets called, and then we apply focus. If this was a div with an X show, it would mean that it was already rendered on the page, and therefore, we wouldn't get the focus. So let's go over and try this out.
09:21
I'm going to hit add a column, and yeah, there we go. We already have focus, and we can just start to create. Okay, the last thing to do is once we have created a column, go ahead and close everything off.
09:32
So we're going to go over to board show where we're creating this, and we're going to dispatch an event here which we can pick up with Alpine. So we're going to say column created, and if we head over to board show, what we can do is attach a listener here.
09:47
So on column created, listen on the window object for that event, and then just set adding back to false. Let's go over, try it out again, and there we go. We end up with this reset.

Episode summary

In this episode, we dive into building the UI and the backend functionality for adding columns to our kanban board. The process includes both some front-end Alpine.js work for toggling a form and some Livewire and PHP model work to actually persist the columns.

We start by placing an "Add Column" button right next to our list of columns. Then, we take some time to style that button, give it a nice plus icon, and make it visually consistent with the rest of the app. When you click the button, it flips over to show a form where you can type the name of the new column.

We discuss how to control the form’s visibility using Alpine.js – toggling between the button and the input form, handling focus so your cursor is ready in the field, and making sure canceling works smoothly.

On the backend, we cover setting up a form object in our Livewire component, validating the input, and actually creating the column in the database. We make sure to associate it with both the board and the current user. Along the way, we handle validation errors, “mass assignment” exceptions, and watch out for missing Eloquent relationships. Finally, we make sure that the UI resets itself after a successful column is added – the form hides again and the field is cleared.

By the end, you've got a polished and reactive “Add Column” feature that ties the front-end and back-end together seamlessly!

Episode discussion

No comments, yet. Be the first!