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
15. Creating cards
Episodes
01. Introduction
02. Designing the board
03. Sorting stuff
04. Managing the board
05. Archiving
Transcript
00:00
Okay, so the last step in creating stuff is obviously the ability to create a card, which is very similar from everything else. So what I'm going to do is head over to the board
00:10
show, and we'll find where we created this column and pretty much take all of this code, it's going to be more or less exactly the same thing. So let's paste this in here. And let's go ahead and open this up. And yeah, I think that should just about be right, we could probably get away with one less div in here. So let's just pull these down. And we'll go ahead and get rid
00:32
of that extra div just at the bottom. And we'll go ahead and pull all of this in. Okay, so coming over, you can see it doesn't look quite right at the moment, because we've just copied and pasted these over. So we can go down to the button. And I think we could probably just get rid of everything in here. And yeah, we've got the add a column needs to be flex item center,
00:52
and SpaceX to, there we go. So this needs to be add a card, clicking on that reveals it, we just need to get rid of some of the padding. And we've saved ourselves a bunch of time. So we don't need any background width or anything on this form. So let's just get rid of all of that. And there we go. Okay, let's go through exactly the same thing as we did before. Of course,
01:14
this functionality needs to live on our column component. So let's go and create our a method to add a card to this. And let's go and create our form. So let's, of course, call this create card. And we'll head over to create card, do exactly the same thing. Again, we're just working with a title here. And we will validate that with just the required rule for now. Okay, great. So
01:48
let's pull in that form into here, create card. And we'll call that create card form. Okay, so down here, we already know that we're going to validate. So let's add that in, create card form, validate, and then let's just hook everything up with it here. Okay, so with the form itself, let's go and change this to create card. This is the create card form. And this is the create
02:17
card form title as well. Let's go down. And I think we should just be about good. Let's try this out. So I'm going to hit create. And yeah, we call this create card. Let's keep these similar. So let's call that create and try that again. And there we go. Great. Okay, all that's left to do is actually create the card. So once again, we'll go ahead and create this
02:38
without persisting in the database. So we'll access the column, access the cards relationship, make this out with the data from the form. So create card form, and we will just grab the title. We don't have a relationship set up in our card. So let's go ahead and add in the user so we can associate that user. So this is just, again, it belongs to relationship for that
03:03
user. And let's go ahead and associate the user here with the currently authenticated user. And then finally, we'll go ahead and save out the card. Last but not least, reset the form so it doesn't hang around. So create card form and we'll reset that. And let's try it out. Okay, so we'll say card for hit create. And yeah, sure enough, it creates it. Everything's looking good.
03:33
We just need to reset again the state of our Alpine component component. So we'll dispatch card created. And then over in our column here, we will pick this up. So this is card created now, and we'll set adding to false. Okay, I'm going to create a one more card. And we should just about be done.
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!