-
All right, so for starters here, let's go ahead and focus on the main page content, get that set up for our profile settings first.
-
So let's go ahead and jump back into our profile page here and let's go ahead and empty out our settings shell. And from ShotCM view, we're gonna use a card component. I don't believe we have worked with this quite yet.
-
So let's go to ShotCM view, add new component and give card there a search and an install. Okay, that's done. We can close that out now. And let's go ahead and add that card in.
-
So just like all of the other ShotCM components, this has multiple levels that come with it. So we have a card as our outer wrapper. Then we have a card header,
-
which is the header portion of the card, along with a card title. Then we can give the name updates profile with a card description of something like
-
update your profile. Underneath the header, we can have our card content, which is the main body content of the card. And that's where our form is going to go.
-
So we'll have our form element there that contains a form input of view model. And now we need to set that form up. So let's jump into our script
-
and it's gonna be rather simple. So we're just gonna have a full name field as we don't really have anything else setting space to work with. So we'll have const props
-
and we'll have that use define props that takes in our user of type user DTO. Then we'll have our form, which we'll use form from Inertia Vue 3,
-
give that our one and only field of full name with a default value set to props, user and our users full name there. And that should do it for our form. So for our view model here,
-
just set that to form full name, give it a label of full name and then an error of form errors full name, just like so. When we submit our form,
-
so at submit.prevent and our form put out to slash settings slash profile. And then we're not using our use resource composable.
-
So we don't have that on success function to reset our form and preserve the scroll. To make things easy on yourself, what you can do is just up in your script, do const form config or something of the sort,
-
just set that to an object. It doesn't need to be reactive and a method of on success that just calls our form reset method
-
and then give this a preserve scroll property, set the true. And then down here on our form put in the second argument, we just need to pass that form config in. And that'll just help keep it out of our template there.
-
So we should be able to give that a save. Oh, wait, hold on a minute. We need our hard footer last. And we're gonna give this a slight class adjustment. So let's add in a border top to this,
-
PX6PY4. And then inside of our footer, we're just gonna have a button that is of type submit. And so that whenever we click this button, it submits our form.
-
Let's give our form an ID of profile form. And then we can give our button a form attribute of that profile form ID,
-
which will link this button to this form, despite the button not being nested inside of the form. And that button now, add our loader indicator from LucideView next, give it a VIF.
-
Our form is processing with a class margin right to height four, width four, and then animate spin with the text update profile.
-
Give that a save. And now let's go ahead and jump back into our browser real quick, just to make sure everything looks okay. Let's give it a refresh. And there we go. That looks okie doke. So let's jump back into our terminal now and clear that out.
-
And let's first create ourselves a validator. So we'll do node ace make validator. And for this section, we'll just pop all of these inside of a settings validation file. We're not gonna have that many for this section. So let's create that validator.
-
And then we also need our node ace make action. And the same thing applies for our actions as well. We could just plop all of these inside of a settings directory
-
and call this specifically our update user profile action. All right, we can clear that out, jump back into our text editor now, and let's start with that validator. So we'll scroll on up,
-
go into our settings.ts file for this, and we can export const updates profile validator equals bind compile, bind object with that full name property
-
set to a bind string max length 254. We're gonna make it required, so we will leave optional off. Jump on up to our settings action now
-
and go into our update user profile. We will need our user, which will be of type user model. And then that validated data,
-
which we can use infer type of updates profile validator. Let's grab our user and data out of our params object. And we really didn't need a whole action for this.
-
We just await user merge data save, and we're good to go. Okay, jump into our settings profiles controller. Our index is fine.
-
We don't need to provide any additional data into it. Our user is going to automatically come from our middleware. So we can go directly to our update.
-
Let's grab the request response off and our session. Const data equals await request, validate using updates profile validator,
-
await update user profile. There we go. Call the handle method. And we want to pass the user in, which we can grab from auth use web user,
-
or just auth user if web is your default guard, which it is for us. Our action here requires the user, and this route is protected by the auth guard.
-
So we can go ahead and assert that. And then let's pass our data in there as well. We can session flash success.
-
Your profile has been updated and then return response, redirect back and give that a save. We've already defined the route here in the last lesson
-
for this update action. So let's go ahead and jump back into our browser and let's do the old faithful edit test. Just tack on a hyphen edit there, update profile.
-
Your profile has been updated, although it does not look like it actually did. Let's give that a refresh. Okay, right. We need to reset what that default value is
-
for the form on success. So whenever we actually refreshed here, we pulled in the brand new value, but after we had edited, so if we get rid of our hyphen edit here, update our profile,
-
the default value on our form still contains that hyphen edit. But if we give this a refresh, now it's pulling a fresh value from our database, which does not contain a hyphen edit. So let's go ahead and jump back into,
-
let's see, this will be our profile page. So let's scroll down to our settings, go into our profile page, and let's scroll up to our script. I think we should be able to do this with our on success.
-
So I'm gonna go ahead and move the preserve scroll up to the top and let's add brackets onto our on success method. So we'll call reset still, but before we call reset,
-
we want to reset our form defaults, passing in the fresh full name value from our props user full name. Most things with the use form are chainable.
-
So if you wanted to, I think you could just call reset directly off of the defaults. I'm gonna leave it how we have it here. Let's give that a save, jump back into our browser now, give that a refresh,
-
and let's do our old faithful hyphen edit updates. And there we go. So now our default value in our form is actually updated with the new value
-
before we reset the field back to what it was. Since we're manually updating this one and only field, the reset's probably not necessary, but if we were to add in additional fields,
-
we'll keep it there just in case.
