00:02
That takes us now to our organization settings. So let's go ahead and get back into the account that we've been working with thus far,
00:10
testuser1@test.com, something as the password. And let's now jump over back into our settings and let's go into our account for right now because we first need to render out a page
00:20
for our organization. So let's jump back into our terminal and let's get ourselves a controller set up for this. So node Ace make controller, put this inside of our settings directory
00:29
and call this our organization with an index, invite user, cancel invite, and remove user methods inside of it. Now for right now, we're not gonna be focusing
00:39
on the invitation stuff, that takes quite a bit of work. So we're gonna be focusing on that in the next module. For now, let's just get a baseline of our settings organization set up. Beyond our controller,
00:49
I think we already have all of the actions that we're gonna need created from just the traditional organization management that we have already in our system.
00:57
So we should be able to jump back into our text editor now and let's go ahead and just get something rendered out for that page. So let's go into our organization controller, get inertia and we'll return inertia,
01:07
render settings organization. For right now that should do, and we can go ahead and jump into our web routes and get ourselves a new comment section for this.
01:15
This will be our settings organization and we'll do a router, get slash settings slash organization
01:23
that uses our organization controller, but we want the one that's specifically in our settings folder, not the one that's in the main folder. So if we go into our controllers here,
01:33
we have our organizations controller, which does our typical organization crud via our organization panel. But then we now also have our settings organization controller. And within our routes,
01:43
we're gonna want to be able to differentiate between those. What I like to do for that is to keep the naming convention for them consistent to their controller nestedness. So for example,
01:53
we have our profiles and accounts controllers and they're nested inside of a settings folder. So what I would do is call these the settings profiles controller and settings accounts controller. Same with our organizations.
02:03
These would be our settings organizations controllers. So scroll back up to where we have our imports. Here's our profile and accounts controller. Let's go ahead and get ourselves double cursors by holding option and command
02:13
and hitting the down arrow once. And let's just tag settings as a prefix for those two controllers. The imports already coming from there, so that should be good. And let's now add in a new one,
02:23
settings organizations controller equals lazily import that from controllers, settings organizations controller. And then I think that red squiggly
02:33
just wants that to drop down to a new line. So I'm gonna ignore that for right now. Let's tag settings on as a prefix to these and for our accounts as well.
02:41
And then now let's do the same here for our organization. So settings organization controller, it gets a little long, but it's also very specific on what exactly it is
02:51
and where we can find it in our folder system. And this one we'll use our index method as settings organization index. For right now, that's the one and only route that we're gonna create.
03:01
Let's jump now down into our page where we can add in a new settings page. So right click settings, new file, create one called organization.view,
03:10
and we'll get a script setup lang of TS and then our good old template added in. For our script, let's go ahead and define some props here
03:19
as we're gonna need our organization in order to work with it. So we'll set that to our organization DTO type. And this comes from our organization middleware.
03:28
So we don't need to worry about providing this via our controller as that middleware is already making that accessible for each and every one of our pages. Then within our template, we can add in our app head
03:38
with a title of organization settings and a description, get our back ticks of manage your, pop the organization's name in there,
03:48
organization and that app head out. And then we can add in our settings shell, provide our settings wrapper for that. And then inside of the setting shell
03:56
is where our various cards for this page are gonna go. So the first card that we wanna focus on is our organization edit. So let's scroll up to our inertia components here,
04:05
right click, new file, and we'll call this our organization edit card.view. We'll get our setup script with a lang of TS added
04:14
as well as our template. Now we need to take in our organization as our props. So we'll do const props equals define props. And for the type we'll have our organization
04:24
of type organization DTO. We'll have a form. So we'll use form from inertia view three that has our organization's name on it.
04:33
And we'll go ahead and populate our props organization name as that name's default value inside of our form. Now there's a couple of different places where this name could be changed inside of our application.
04:43
So rather than updating the default value of our form on success, let's do a watch effect to watch our prop for any changes.
04:52
And when any changes are detected off of our form, we'll update the defaults, resetting the name to our props organization name. And then we'll also go ahead and have inertia
05:02
reset the form to apply that updated value. Then inside of our template, we'll have our card, card header, and card title of update organization
05:12
with a card description, update your organization's details, and then card content containing our form,
05:21
again, with an ID so that we can bind it to our button outside of the form and call this something like organization update form. And then on submit, we'll prevent default and do form,
05:31
but, and then we'll want to reach for back ticks and do slash organizations slash, and then plop the organization ID into the route perimeter there.
05:40
Then we'll also tell this to preserve scroll. So we'll set that to true and then end our form out. When our form resets, our watch effect should kick in here,
05:50
reset the name and reset the form as well. So we shouldn't need our on success handler there to do that our watch effect should handle that automatically for us.
05:58
And then we'll have our form input with a label of name, a view model pointing to our form name
06:05
and then error of form errors name. Then we'll have our card order and we'll end up with a couple buttons inside of here and we want to justify them between.
06:15
So we'll add a class flex, justify between, give it a gap of four, a border top, EX6 and PY4. The first button here is gonna be
06:25
our update organization button. And then the second button is gonna be a destructive one for deleting the organization. So for our update organization button,
06:35
we want to set this to a type of submit and bind it to our organization update form. And we can go ahead and disable it when our form is processing.
06:45
When it's processing, we can also go ahead and show our loader icon from Lucidview next. So the if form processing, and then let's give it a class of margin right to
06:54
H4 width four and then animate spin. When we are deleting our organization, we're going to want to show our confirm destroy dialogue.
07:04
We'll keep that flow the same as we have it inside of our organization select panel. So let's add an additional ref up here. So const is destroying equals ref,
07:13
import that from view and default it to false. When we click our delete organization button, so at click, we'll set is destroying to true.
07:23
When that's truthy, we're gonna want to show our confirm destroy dialogue. So we'll add our confirm destroy dialogue in here. And inside of it, we'll say something like,
07:33
are you sure you'd like to delete your, and then inside of wrong, we can put the organization name,
07:42
organization with a question mark. All data associated with this organization,
07:49
including courses and lessons will be deleted forever to warn them that there's no going back. Off of our confirm destroy dialogue,
07:58
we'll set the view model open flag to our is destroying flag. Give it a title of delete organization with a question mark and an action href
08:08
with back ticks pointing to slash organizations, slash and then the organization ID is that route parameter. Because all of these operational routes that we're hitting
08:18
have already been created for the various other functionality of our application. We should be good to go ahead and save this. It looks like I need to also jump back to the page
08:26
and let's add in our organization edit part there. That's in our organization from our props, give that a save.
08:34
And we should now be able to jump back into our browser. It's like we got that at least one template error. Let's refresh and now jump over to our organization page
08:42
where we see our update organization card and let's do our old faithful hyphen edit test there, update organization. And we can see that immediately reflected.
08:51
It'd probably also be good to add in a little toast notification to that. So let's go do that really quick. Should be able to find that within our organization's controller,
08:59
scroll down to the updates and let's grab session out of there. Just do session/success,
09:07
your organization has been updated or something like that. And we should probably make sure that our destroy has something similar. All right, good. Let's close that file back out, jump back over into our browser
09:17
and get rid of our hyphen edit to see if that worked. So update organization and there we go. Your organization has been updated. Now, in order to test our deletion, I'm gonna jump up to our organization panel
09:27
and let's jump to my fifth organization. I don't believe we have anything on this one. No, we do not. So let's add some stuff to it. A cool course, just hit enter there to create that.
09:37
Let's make sure that we have at least one of everything. My cool module, I can't spell, but that's all right. It's gonna get deleted anyway. And a cool lesson. Just kind of making sure that we have one of everything
09:47
there to ensure that our deletes properly cascade. Let's go into our organization settings and hit delete. There's our delete confirmation. If we hit cancel, nothing should happen.
09:56
And if we now go ahead and delete, there it goes. It's now gone. And we've been changed back to a different organization that we're bound to. And I think we were originally working with my first.
10:05
So we'll jump back over to that where we still have our courses. So awesome. Everything there is working A-okay, leaving us next to focus on our organization invitation system.
