-
We're now done with the main portion of our application and we're ready to move on to more subsidiary functions like our profile settings, account settings,
-
organization settings, authorization checks, being able to invite team members into our organization. And it looks like we also need to fill in our username placeholder here as well. So as a good starting point here today,
-
we're gonna define our profile settings page to give ourselves a canvas to work with. And then we'll set up our settings page structure, which our profile account and organization settings will all share.
-
So let's go ahead and jump back into our terminal here and we can do node ace make controller. And for our settings controller, I'm gonna put them all inside of a separate
-
settings directory within our controllers. And we call this our profile controller and we're gonna need ultimately an index and an update route for that.
-
So we'll go ahead and create that controller there. And let's jump back into our text editor now and jump into our web routes. We can give ourselves a new comment section
-
for our settings and this will specifically be for our profile settings. And now we just need a route for our index and update. So we'll go ahead and define them both here while we're in here.
-
So we'll do a router.get/settings and profile that will use our profiles controller
-
and its index method as settings profile index. Then we'll also do router.put/settings/profile
-
that too will use the profiles controller and instead use its update method as settings profile update. Okay, we want a page to be able to render this out as,
-
so we'll right click pages, new file and we'll create a settings directory. And for each of our settings pages, we're just gonna need one page, one for a profile, one for organization
-
and one for our account. So we can just name these as such within our settings directory. So we'll have our profile.view to render out our profile settings.
-
We'll have our setup script that uses TypeScript and then we'll also have our template there. So for these settings pages, we still wanna use our overall application shell. We still want them looking the same
-
and having the same nav bar and everything. We just want them ramped in an additional component so that we have like a sub navigation that links to each of the different settings pages and such.
-
So we can still use our app head component to give this something like a title of profile settings
-
and a description of manage your plot my course profile. Then the main page content will go inside of a main element.
-
We can give this a class of flex min height and we can sell this to calc 100 VH do an underscore as a space
-
minus underscore is another space theme which will use TailwindCSS as theme to say that we wanna use the spacing for 16 and we should be good there.
-
And then we'll add in a flex hyphen one, flex hyphen call gap four, BG muted 40, padding of four and MD gap eight.
-
All right, we can end that main element and then inside of this main, we'll add in an additional div for the class MX auto width full max width six XL and a gap of two.
-
And then we can end that div out and we want just an H1 in here with the class text three XL font semi bold and we'll give this a title of settings.
-
Underneath that little header, we'll have an additional div for the class MX auto grid width full max width six XL,
-
items start gap six, MD grid calls 180 pixels for the first column and then we'll do a space using an underscore
-
and then one FR for the second column there. And then we'll do LG grid calls, switch this to 250 pixels and then maintain one FR there for the second column.
-
The first item within this div is going to be our navigation. So we'll add a nav element with the class grid text, small text, muted foreground, negative MX two
-
and this is gonna have three links within it. We'll have an H ref pointing to our settings profile page with a class of link
-
and we can go ahead and end that link component out, giving it the text of profile. Now, whenever the page for this link is our active settings page, we wanna add in an additional class to it
-
to indicate that it is the active link. So we can do that the same way that we did with our navigation by adding in a active class. If the page component equals
-
something like settings/profile, which is the name of the component that will ultimately be used to render out the page. Then we can go ahead and give that link a copy and paste it two times
-
as we'll also want one for our accounts as well as the organization settings, switching the text for that to match.
-
Underneath that navigation then, we will have one last div with a class grid gap six and this is where our main page contents will go.
-
So we can give that a save, it's gonna do its formatting and we need to jump into our profile controller to tell our index page to actually render that page out. So we'll grab inertia and then return inertia,
-
render settings profile, just like so. With that set, we should be able to jump back to our browser now. I can't remember if we actually rigged these links up. Let's see.
-
Yep, looks like it's gonna try and go to settings profile. So let's give that a click. And okay, we see our settings title right there along with our sub navigation and then our main page content
-
has plenty of room to work with right here. So let's go ahead and extract this shell out into a component so that we can easily reuse it for each of our three pages for our settings here. So let's jump back into our text editor
-
and let's give everything here that we have in main a cut so that we copy it and remove it from the page. We can go up to our components, right click that new file
-
and we'll just call this our settings shell.vue. Give ourselves a script. Again, that'll be set up by TS. We don't need anything in that script for right now.
-
And then we'll give ourselves a template and paste that main in. Where we have our main page contents, we just wanna replace that with a default slot and everything else should be able to remain the same.
-
Give that a save, jump back over into our profile and let's wrap this up. So settings, shell, and then we can give it some child content of something like testing so that we can actually see where the main page content will go.
-
Before we give that one last test, let's jump back into our settings shell and let's add in some styles for that sub navigation links. So we'll do style scoped.link
-
is the class that we gave our links and we can use tail and CSS to apply, font, semi bold, P2, rounded, text, primary, and then give it a margin of a pixel.
-
And then we also have that active class that we can use and apply with again to give it a margin zero, a border, BG white and shadow small.
-
And our actual app shell layout already has a background applied. So we can go ahead and get rid of this background, you did 40. I saw that ever so slightly on our page and it was just kind of adding
-
an unnecessary box around everything. So let's get rid of that, give that a save once more and we should be able to jump back to our browser now and shoot, it looks like our grid's not working. We should have two columns here
-
with the left-hand side being our sub navigation and the right-hand side being our testing, which is the main page content. So let's take a look and see. I think we need a hyphen
-
after the grid calls there where we have that manual column definition. So let's add that in, give it a save and let's see if that fixed it up. There we go. Okay.
-
One more issue is that all three of our pages are currently displaying as active indicated by the white background and the border color. And I think that's because I forgot to update that whenever we copy and pasted.
-
Sure enough. So our account page is ultimately going to be rendered by settings accounts and then same for our organization settings, organization, give that a save, jump back into our browser. There we go.
-
That's better. Okay. So now we have our setting shelf set up and ready to go so we can actually work on our profile settings next. All right. One last thing before we round this lesson out,
-
let's go ahead and populate that placeholder that we added onto our app layout forever ago with the actual user's name. So let's jump back into our text editor.
-
This is going to be within our app layout within the user panel dropdown menu. We have that placeholder text right there. If we scroll up to the props real quick to remind ourself what we have,
-
we have our user DTO directly accessible via our props there. So we should be able to just highlight our placeholder text there, do double curly braces and access our user dot
-
and plop the full name in there. Give that a save, jump back into the browser where now we see our user's full name populated within that user dropdown menu.
