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
15. Creating cards

Episodes

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

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.

Episode summary

In this episode, we dive into creating cards within our board—think of these as the little tasks or items you see inside columns (just like in Trello). We start by taking the code we used for creating columns (since the process is so similar), then tweak and simplify it to suit our card-creating needs.

You'll see how we quickly adapt the UI, clean up unnecessary markup, and rename everything from “add a column” to “add a card.” From there, we wire up the logic so each card gets added to the correct column. We focus on using a form that validates input (right now only checking the title is filled in), and then actually create the card and link it to both the column and the currently logged-in user.

To keep things smooth, we reset the form after creating a card, and also make sure the state within our Alpine component stays in sync—so popups hide when they should and the UI updates right away. By the end, you’ll have a working card-creation feature that fits neatly into your board UI.

Episode discussion

No comments, yet. Be the first!