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
19. Adding card notes
Episodes
01. Introduction
02. Designing the board
03. Sorting stuff
04. Managing the board
05. Archiving
Transcript
00:00
Okay, let's add in the ability to add notes to cards, which is going to be pretty straightforward, because we're just going to show them inside of this edit card modal, and then we'll show a little
00:11
icon on each of the cards if they have any notes. So first thing, super simple, just copy down this input, and we'll change this over to notes. And this will be notes. And again, that'll be notes there, we'll have this we know attached to the edit card form. So we can just switch these over as well. Now we've got a text input in here at the moment, which is a component. So we have text
00:34
input within our components directory. What I'm gonna do is just copy this. And then over in the components, let's create a new PHP file. And we'll call this text area. And of course, we use blade dot PHP, let's just paste this whole thing in here and swap this over for a text area. So we have a nice text area component to work with. And that's going to work in exactly the same way. Okay, so
00:56
now that we've got this text area component, we can go ahead and swap this out for x text area. And we should be good. Let's get rid of the autofocus as well, because we just want that to happen up here. And let's just check it out. Okay, when I click on this, yeah, sure enough, we've got a notes component here. And we can further customize this by just sending any props
01:17
down like the rows, and that should automatically update with that in there. Okay, great. So the first thing we want to do over in the edit card modal is also when we mount, pull in and fill the notes. Now we don't have any for any cards at the moment. But under update card, we can just store some notes and check that they get stored. So over in edit card, let's take this entire thing
01:41
here, set this to notes. Again, you can add any validation rules that you want. And let's head over to edit card. And when we update this, let's also pass through the notes to our card update. And to be honest, that should be just about it. Okay, let's go over to card one. And yeah, okay, so we obviously have null stored in the database at the moment. Let's update our edit card because
02:04
we know that this is an optional field, we'll set this to a nullable value. And we can even set this to a default null if we wanted to. Okay, let's click card one and say some notes, hit save, give the page a refresh if we want to and the notes are now stored in the database. Okay, let's add that icon on each of the card components if we have any notes associated with that card. So
02:30
again, let's head over to hero icons. And let's kind of find a pencil note type icon and go ahead and pull it directly into our project just here. Again, let's go ahead and adjust some of the sizing. Let's set this much smaller this time, let's say to four. And we'll set the text to gray 500. And the stroke will fill from this color. So it will just change the stroke of this icon. Now,
02:55
we don't want this to show all the time, of course, we just want it to show when we have notes. But that's fine, because we can just wrap this in an if statement. So let's say if the card has any notes, then we want to show this icon. Otherwise, of course, we won't show anything very, very simple. And we should now only see this icon on cards that have notes.
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!