(upbeat music) Now that all of our models and resources are complete and our admin panel is done, it's time to build that front end where users can go look at the features, vote and comment. Now, if you're one of those people who likes to follow along and code along with me, I have done a lot of the work to get the UI ready for this lesson.

I have done a lot of the work to get the UI ready for this lesson. So I do wanna go over that with you and share how you can see that. So if you go to the GitHub where all of this code is, there is a pull request that's gonna sit out there, changes from lesson 12 to 13, very high level, a couple of things we had missed along the way. I forgot to cast the feature type to the enum. So you'll definitely wanna do that.

I forgot to cast the feature type to the enum. So you'll definitely wanna do that. And I added this initials attribute just to get the initials 'cause we use that in the UI. The rest of these are just basically layouts and components to hold the UI. I'm not gonna go over all of those. We will look at these two Livewire 4 components, particularly the view feature one that we're gonna be working in.

particularly the view feature one that we're gonna be working in. And then finally we published a Livewire layout and we got rid of the welcome.blade.php. And then if we go to our code, the routes file now looks like this. We no longer have the welcome page, we just have our custom stuff. Let me show you what that looks like right now. I go to the browser and go into our app.

Let me show you what that looks like right now. I go to the browser and go into our app. This is from admin, but if I get rid of admin, here we are. We have our product roadmap. We are shaping the future and we have all of these different things. So this is a full page Livewire component and we have some interactivity with it. This is not working, that's just for show,

and we have some interactivity with it. This is not working, that's just for show, but we do actually have the voting working. So if I vote on something, it will put it in the database. I can unvote and go back down to remove my vote from that one. And if I look at a feature here, I can see the feature, I have the count of votes, how many comments have been added to it and the list of comments. So the objective for this video is to use filament

and the list of comments. So the objective for this video is to use filament in a full page Livewire component for the form here and be able to submit the comment through filament. So in order to do this, we have to go all the way back to the installation steps. Let's look at the filament docs and we'll see, when we did this before at the beginning of the course, we did the panel builder and we've already installed it for the panel builder,

we did the panel builder and we've already installed it for the panel builder, but now we want to add individual components. So we're going to click here and it's going to show us what we need. We do not need any of this because when you install it for the panel, you have all of this. So we're done here. We are going to use an existing Laravel project,

So we're done here. We are going to use an existing Laravel project, but we've already run this command, so you're good. We don't need this. This is where we start to have to make some changes. We need to configure our styles in app.css. So I'm going to try to copy all of this stuff here. Go into my project, go to app.css, which is this one. And we're going to put right here all of this stuff.

which is this one. And we're going to put right here all of this stuff. Now, these comments are telling us what we need and we pretty much need everything, except down here at the bottom. We're not using tables outside of the filament panel, so we don't need that, and we're not using widgets. So we can comment those out. And then lastly, we have this. This piece of code is what tells the app,

And then lastly, we have this. This piece of code is what tells the app, are you using classes to determine whether it's light or dark mode or are you using the system preferences? This would change it to classes, and I don't actually want that. I use dark mode, so when I hit the browser, I want it to be in dark mode instead of create my own toggle. So I'm going to comment this out as well.

I want it to be in dark mode instead of create my own toggle. So I'm going to comment this out as well. Okay, now that step is done. We need to configure the VEEP plugin, but this is actually already how it's configured for us, so no need to make any changes there. We did publish the layout, but we do need to make a few changes to the layout that was published, so you would run this command locally. And basically, the big change here is,

that was published, so you would run this command locally. And basically, the big change here is, we need this XCloak, and we need the filament styles. So if I go to the layout, and this is here in app.blade.php, and if we come to in the header, we have the live wire styles here, and we can just replace those with the filament styles. The filament styles include all of the live wire styles and everything that filament needs as well.

The filament styles include all of the live wire styles and everything that filament needs as well. And then if we go back here, we can also see that we need to add a live wire component for notifications, if we want to send notifications, we do. So we're going to include this, and we'll have the filament scripts. So I'll replace this with that. You will notice there's a little bit of a difference. You have the JS from VEEP here and the CSS above here.

You will notice there's a little bit of a difference. You have the JS from VEEP here and the CSS above here. When we installed Laraval, they put them both up here, and that's fine. We don't have to make any changes. So these are the two things we really care about. Here and here. Okay, and we've already published configuration. That's the end of the steps. So we're done with this step.

That's the end of the steps. So we're done with this step. So now let's go back into our terminal and run npm, run build. Everything should work here. We've got a lot more assets there. And if we go back to our sites, let's take a look. I refresh everything looks the same, but now we're actually ready to use filament.

I refresh everything looks the same, but now we're actually ready to use filament. Okay, so now we have to figure out how do we get filament forms into this live wire component? So we'll do that now. And let's look at the instructions again from the filament docs. Now I'm going to go all the way down here to components. And what are we trying to do? We want to render a form in a blade view.

And what are we trying to do? We want to render a form in a blade view. So again, some of this stuff we've already done, so we don't need to. We know we have filament forms. We already have our live wire component, but these are the five steps that we really need to work on. So the first one, implement has schemas and use in our extra schemas trait.

So the first one, implement has schemas and use in our extra schemas trait. You can see that here. So let's do that in our component. We need to go to the public view feature. This is the new live wire for syntax. You may not have seen this yet. You get a nice little bolt before each one. And this has the class and the blade all in one component. So we're going to be working here mainly.

And this has the class and the blade all in one component. So we're going to be working here mainly. So if we go back, we need to implement has schemas and use interacts with schemas. So implements has schemas and use interacts with schemas. Okay, step one is complete. Let's go back up. Step two, we need a public live wire property to store the form data. We could call it whatever we want,

to store the form data. We could call it whatever we want, but let's just follow the standard we have here. Right under our feature, we're route model binding the feature, and then we also have our data. So step two is done. Step three, we need a form method. And so they have an example for us. I'm going to copy their example.

And so they have an example for us. I'm going to copy their example. And I'm going to put it right down here above the comments. We have our form. We do need to, number one, get rid of this stuff. We want a text area component. And we called that a body in our model. And then the last thing we do need to make sure we have the filament schema imported here. So I think all of that is working.

we have the filament schema imported here. So I think all of that is working. We're at, we're done with three. Now we need to initialize the form with this form fill in mount. And you have to do it even if there is not any initial data. Okay, let's go up to mount. We already have a method here and we'll add one more. We're going to fill the form. If we wanted to fill it with some basic stuff, we could say here.

If we wanted to fill it with some basic stuff, we could say here. So we can start with this and make sure it's working. I'm going to remove this once we test it, make sure it's working. And go back to the documents. And the last thing is we need a method to handle the form submission. So I think we can just use theirs as well. We'll get this create.

So I think we can just use theirs as well. We'll get this create. And I'm going to put it right here at the bottom below the form. So when this form is submitted, we're going to get the state from the form and just die and dump it to make sure everything works the way we want it to. And then finally, we need to put the form into our live art component.

And then finally, we need to put the form into our live art component. So I'll copy this and let's go to the browser and take a look at how it looks right now. We have this nice form. And then I'm going to replace the entire form with what we had in the docs. So if I refresh, here we go. Doesn't quite look as nice, but we do have a form. You can see that it was pre-filled with tests.

Doesn't quite look as nice, but we do have a form. You can see that it was pre-filled with tests. And so we don't need that. We can get rid of it, but the form is working. One thing that I didn't see when we did that was the button. I think the button is probably here, but we can't see it. What you could do is you can use the filament blade components so we can do filament button. And I think this is going to help it show up a little bit better. Okay, so now we do have a submit button

And I think this is going to help it show up a little bit better. Okay, so now we do have a submit button and I can test this form, click submit, and there we go. So we are actually now communicating from the front end to the back end through this filament form. So this is nice. We're actually pretty close to having this done. Let's make it work first and then we'll make it pretty. So this form gets state, gives us what we need to do the update.

So this form gets state, gives us what we need to do the update. So let's see, we have the feature here. So we can just say this feature comments and we're going to create a comment with the ID from the user and we'll get the body from the get state. I believe this will work. So we'll come back here. I'm going to refresh the page, test a comment and submit. And there we go.

I'm going to refresh the page, test a comment and submit. And there we go. So we sent it back. Everything looks good. It actually we have this thing that tells me that I am team member. So that's showing up. One thing that we wanted to do was make sure these comments don't just show up and we want them to only show once they've been reviewed and approved. So we do probably need to do that,

once they've been reviewed and approved. So we do probably need to do that, but maybe we want the person who submitted the comment to see it. Maybe with a badge here that says that the comment is pending review. So in order to do that, we can dig through all of the blade components that I built for this. So we'll go to the layout, which has a list of comments. So we can see the comments here. And then we have a view comment component.

So we can see the comments here. And then we have a view comment component. And here is that team badge. So let's go right after it. If comment is approved, and we actually want, if it's not approved. And if, and let's see if co-pilot can give us something good here. All right, so we have something. We'll call it pending approval. And refresh.

We'll call it pending approval. And refresh. It's there, but we need to run NPM run build. All right, and now we refresh again. And all these comments that have not been approved yet are pending approval. That's good, although I am Kevin. I probably should not see Allison's if they are pending approval. So we need to update the query a little bit.

if they are pending approval. So we need to update the query a little bit. So we're going to go back to our view feature. We have this computed method here for comments. And so we just need to adjust this a little bit. So we only want the comments where we have one of two options. Either where is approved is true or where the user ID is my user ID. So I believe this will work. If I refresh the page, I would expect. Now, I'm only seeing my comments because the others are not approved yet.

If I refresh the page, I would expect. Now, I'm only seeing my comments because the others are not approved yet. So I think this is pretty good. Oh, we have this count here. So we would want to adjust that. I'm not going to worry about that. That's homework for you to do later. We're going to test another and hit submit. And one thing you notice is these votes went away. And that's a little problem.

And one thing you notice is these votes went away. And that's a little problem. And that's why on the mount, we have this refresh feature. So after each live wire requests, we want to make sure that we're getting the updated count of votes and comments . So after the create, let's just refresh the feature. And so now I've got this one more time. And there we go. So the votes are still here.

And there we go. So the votes are still here. The comments actually are updating, which is nice. Again, it is including those ones that are not approved yet. Again, you can work on that later. We do want this to look a little bit nicer. And this is where AI is really useful. So I just asked my friend Claude to make this all look like the design we had before. And I'm going to go get that code and copy it over.

before. And I'm going to go get that code and copy it over. So let me show you first how the form can be updated. So this was just from the docs. But one thing that's really important to note is you can really style filament. It doesn't have to look like the panel builder. So I'm going to get rid of all this and paste in what Claude wrote for me. But it's basically doing the same thing that we had from our custom designs. We've got the user initials here. I think that needs to be created as a method.

We've got the user initials here. I think that needs to be created as a method. We can just hard code that as like my own. And we have the form here. And then for the button, we can style everything to look a lot nicer. So I'll save this and come back here and refresh. And so now you can see, yeah, we've got this. This still isn't quite right. But the button looks a lot better. And this is on the blade side.

But the button looks a lot better. And this is on the blade side. The other thing we can do is make some more changes on the form itself. So this is just very simple. We have a text area for body that's required. So we want to do a few things like hide the label. Okay. We also maybe want the number of rows in the text area to be three. So it's a little taller. Let's go back.

So it's a little taller. Let's go back. This is already looking better. Let's see what else can we do. We might want a placeholder. Write your comment here or maybe add your comment. Let's do that. That looks nice. And I think this is pretty good, but we do have a lot of control over this actual form input.

And I think this is pretty good, but we do have a lot of control over this actual form input. So I have some other input attributes that we can add here. And I'm just going to copy and paste these because there's a lot of them. But if we want a bunch of different classes to be applied to that input, we can do this. I'm probably going to need to run npm run build one more time. And this is not a course on tailwind. But if we look at this, now it just adjusted a little bit. And so whatever classes you want applied, you can actually do that.

But if we look at this, now it just adjusted a little bit. And so whatever classes you want applied, you can actually do that. So now we'll just test one last time and post the comment. And there it is. So you can see this is how you would integrate filament forms into your front end. There's one more thing I want to integrate, which is also a notification. We included that notification live our component. And so let's say after we create the form, we'll just do a filament notification,

And so let's say after we create the form, we'll just do a filament notification, make and comment was submitted. And we just want to tell them that it's pending approval by the team. So one last time we'll refresh another post a comment. And we have this really nice notification that gets sent. And I can close that out. So if you want to learn more about filament notifications in my filament B3 course, I go into that in a whole video.

course, I go into that in a whole video. So nothing has changed since filament three and that. And I think we're ready. Our front end is done. And now in the next video, we got to go figure out once people leave all these comments and their pending approval, how do we actually approve them and make sure they show up.

show up.