Okay, let's work on adding a comment whenever the admin sets the status. As you see in the UI here, there's an option to do that. So I believe I already have the CSS in place for that status update comment. So if I go to Idea or Comment container, or sorry, Idea Comments, here it is. It's commented out. Let's comment it back in to see if it looks okay. And there it is. Looks like we have a few issues here. We have some z-index here, and the line still shows up here for some reason. I don't know if you can see that.

We have some z-index here, and the line still shows up here for some reason. I don't know if you can see that. So let's try to fix that in DevTools. So here it is on the before pseudo selector for the isAdmin class. So I believe if I just add a z-index here, it should fix it. Okay, so let's add that. Actually, I'm going to change the name of the class here. So I have it set to isAdmin. A better name would be isStatusUpdate. So let's grab this.

A better name would be isStatusUpdate. So let's grab this. Let's change our app.css, and let's change isAdmin to isStatusUpdate, okay? And I set z-index 1, okay? So that should fix that issue. Next, let me just hard refresh to make sure I did fix it, okay? Next is the line here, so let's try to fix that. So it's on the :before pseudo selector for comments container, and I believe if I just nudge this down or up one, it should fix it, or two. So left, negative 38.

nudge this down or up one, it should fix it, or two. So left, negative 38. And I think that's because of the border here. So let's change that. So that should be up here somewhere, right here, negative 38, okay? And that looks good now. Let's run this again. And now let's incorporate this into our actual component here for comments. So I'm going to put a new field on the comments table. Let's say create comments table, and it's going to be a boolean to check if it's a status.

So I'm going to put a new field on the comments table. Let's say create comments table, and it's going to be a Boolean to check if it's a status update comment. So we can do Boolean isStatusUpdate, and let's default it to false, okay? And let's try to incorporate these changes into the actual component. So nothing's going to change here. Let me just go to a new comment here, or a new idea with comments, and let's try incorporating it here, okay? So this comment corresponds to this comment in the backend. Let's see if that is correct.

So this Comment corresponds to this Comment in the backend. Let's see if that is correct. And let me just update this to make sure it is the correct one. Let's click off of it. Okay, so it is. So let's change this to isStatusUpdate true. And obviously, this should be changed by an Admin. So let's change the userID to an Admin. And let's go ahead and make this dynamic. So we can just grab what we already have down here.

And let's go ahead and make this dynamic. So we can just grab what we already have down here. So first, let's add this admin tag here. So that should be in idea comments, let's look for admin here. So right here, we can add this, and we can add it in idea comment, right underneath the anchor tag, or the avatar, I mean, okay. So let's look for image. So yeah, right here. And this has nothing to do with the status update. But I just want this tag if the user is an admin.

And this has nothing to do with the status update. But I just want this tag if the user is an admin. So we do have a director for that. So I can just do this. And when the status is changed, there has to be an admin anyway. So this should work out. Okay. Or sorry, no, we have to check if the person who created the comment is an admin. So this won't work. Actually, we have to do if comment user is admin.

So this won't work. Actually, we have to do if comment user is admin. Okay. And let's put that in here. Let's get rid of this. And now this should work. Okay, so this user is an admin. Okay. And the name here should be blue. So it should be blue when it's a status update.

And the name here should be blue. So it should be blue when it's a status update. So let's add that. So that's down here somewhere right here. So we can do an if here as well. So let's do if $comment is status update, then we can add a class here. And that class is text-blue. Okay. Let's just put it in line here and it's space here. And hopefully that works.

Let's just put it in line here and it's space here. And hopefully that works. It does. Cool. Next is this title here. So let's add that. So back here, status changed right here. So it's an H4 and it should go above the body. So let's go ahead and copy this and put it into our Idea Comment above the body right here.

So let's go ahead and copy this and put it into our Idea Comment above the body right here. So let's paste that in. We don't need an anchor tag. So let's remove that. Okay. And it should be the same as this condition. So if it's a statusUpdate, okay, so we can grab this and wrap it in a conditional. Okay. And if, and let's put a margin-bottom on it too.

Okay. And if, and let's put a margin-bottom on it too. And maybe put a div around the actual body just so it has its own container. Okay. And let's try this out. Okay. It looks good. And the last thing is this indicator of the status. We just have to add the is-status-update class to that. So again, we can just do this and let's put it on the entire div here.

We just have to add the isStatusUpdate class to that. So again, we can just do this and let's put it on the entire div here. So let me just put this on its own line because we have to add something on later as well. Okay. And let's paste that in and that's going to be isStatusUpdate. Okay. So now it should have this thing right here and we'll make this dynamic in a second. Okay. So now we can get rid of this hard-coded one. Everything looks good.

So now we can get rid of this hard-coded one. Everything looks good. And this menu should still work with all the functionality. So let's get rid of this in Idea Comments. Don't need this anymore. Okay. And it should be gone. So now for this Comment or this status update, we need to make two things dynamic. And one is the name of the status here. And one is this indicator of the color of the status corresponding to this.

And one is the name of the status here. And one is this indicator of the color of the status corresponding to this. So these types of comments that are status updates sort of serve as a history of all the statuses that this Idea goes through. So for example, it starts on open and then it's changed to considering and implemented. And each time the admin sets the status, then a new comment is posted here. So the Idea itself has a relationship with the status. And that's an Idea belongs to a Status. But that's going to differ based on the status at this point in time. So we need another relationship on the Comment and the Status.

But that's going to differ based on the status at this point in time. So we need another relationship on the Comment and the Status. So it's going to be the same as the relationship with the Idea. So we can just copy here. So where is it? This one here. So Idea belongs to Status. We can do the same for a Comment. So let's add that down here. So Comment belongs to Status.

So let's add that down here. So Comment belongs to Status. Okay. Import that. And we have to change our create_comments_table migration. And we have to add another one for Comment. Sorry, not Comment Status. Okay. And let's also make sure to update our CommentFactory to accommodate for that new Status. And I'm just going to default it to 1 here.

And let's also make sure to update our CommentFactory to accommodate for that new status. And I'm just going to default it to 1 here. Okay. StatusID. Let's just make it 1. Like I said, actually, let's use the status factory. Import that. But when we're doing the existing definition here, let's go ahead and set it to 1 here. So let's say statusID is 1.

But when we're doing the existing definition here, let's go ahead and set it to one here. So let's say statusId is one. Okay. So now hopefully this should work when I do migrate fresh seed. And now all comments should have a default of one if I did that correctly. And it does. Cool. So now I believe this Comment. Actually, we have new data here. Let me refresh this.

Okay. So now we have a status on it. So we can change this name. So let's change that in our view. Let's go to idea comment status changed to. And now we have access to the comment status. And we can grab the name from there. So say comment. Sorry. Let me move this up for you.

And it should change. So we also need the color of this indicator to change based on the status. So if you don't remember the colors, we have gray, purple, yellow, green, and red. And we already had this situation in here for the statuses. And what I did was I stored the classes in the database. So if you don't remember that, for the statuses, I have this classes column, but I'm not going to do that in this case. So what I'll do is add different classes in our CSS that correspond to these statuses. So I'm just going to paste those in to save some time. So let's go to our app.css.

So I'm just going to paste those in to save some time. So let's go to our app.css. And let me just paste them in down here. Okay. So I added the different classes for each status here. And we're using the before pseudo selector here because we need that for the indicator to show up here. So let's go ahead and npm run dev to compile it and see if it works. So for example, for status in progress, let's add that to our idea comment up here. Let's just add it here.

So for example, for status in progress, let's add that to our Idea comment up here. Let's just add it here. Status in progress. And let's see if it changes it to yellow. And it does. Cool. Not sure why it's adding it here. Actually, if I move it in here, I think that should get rid of it. So within the if check. And it does.

So within the if check. And it does. Cool. So now we can dynamically add this. Let's just do this. And we can make use of, actually, let's do status here. And we can make use of the String class in Laravel. And append. Let me add a dot here. Let's say kebab of the name of the status.

Let me add a dot here. Let's say string kebab of the name of the status. So we have Comment, Status, Name. And that should do it. So let's try that out. Okay. And it does work. Let's change the status of this in the database. Back to comments. Let's change it to 4.

So we can get rid of this classes field here. So we can pretty much do the same thing. But now we have to add a new class because we don't need the before pseudo selector for these. So let's just add new classes here. I'm going to name it the same, but there will be no before pseudo selector. So status open. And I'll do the rest. Okay. So I added the rest.

Okay. So I added the rest. Let's go ahead and npm run dev. And now we can do the same thing that we did in here. So up here we can just do this. Let's grab this instead of grabbing it from the database. So we have this in two places, one on the IdeaShow component. So IdeaShow. So let's go to classes here and we can just paste that in. So ideaStatus classes.

So let's go to classes here and we can just paste that in. So IdeaStatus classes. So let's get rid of this and let's paste that in. And it should be IdeaStatus classes or IdeaStatus name. And we can use string kebab. This should work. And let's just grab this and let's put it in ideaIndex as well. ideaIndex. Let's look for classes here. There it is.

This is just a simple explanation with no code.

Hard refresh and everything looks like it still works. Cool. Let's try this one on the show page and it still works. But now we no longer need these classes in the database, which is a bit cleaner and we're no longer storing presentation logic in the database here. So we can get rid of that in our createStatus, I believe. Yeah, we can get rid of this classes here. And let's update our statusFactory. Don't need this anymore. Okay.

Don't need this anymore. Okay. And I'm not sure if my migration or my seeder will still work. And it doesn't. So if you go into our database seeder here, we no longer need these classes here. So let me get rid of these. Okay. Let's try that again. Okay. php artisan db:seed.

Okay. Fresh seed. Okay. But now I think some of our tests are going to fail because I believe for some of them, I did add the classes, which I didn't even use. So let's fix those. So one is in this addCommentTest here. So addCommentTest. So if you look at the error here, we're getting this integrity constraint violation. And that's because in addComment, we have to add that new statusId here.

So if you look at the error here, we're getting this integrity constraint violation. And that's because in addComment, we have to add that new status_id here. So we can just set it to 1 here. status_id is 1. Okay. Or maybe the better solution would be to force a default here of 1 or not here in the comments table. Comments right here for the status_id. But I'm okay with this. So let's try this again.

But I'm okay with this. So let's try this again. Should it only be one error now? Or sorry, I meant to run my tests, phpunit. Okay. What's this error here? So statusFiltersTest. That is filtersTest. Which test is it? filtering. Okay.

Filtering. Okay. Filtering works when query string in place. Filtering works. Okay. So, yeah, I do have these statuses here or these classes, which I don't even make use of. Yeah, I don't. So you don't even need them. Cool.

So you don't even need them. Cool. Let's get rid of it. Let's save that. And let's go ahead and I keep doing that. I mean to run my tests here, test P. Okay. So now everything is passing, but we got rid of our classes table or our classes field in our status table. So one more time, let's make sure this still works. Looks like it does.

So one more time, let's make sure this still works. Looks like it does. And this is taking much longer than I expected, so I'm going to split this video up into two parts. In the next video, we'll actually work on making the status update show up when we fill out this form here. So as always, let's go ahead and make a commit here. This is episode 57, git add, git commit, episode 57, let's say set status comment part one.