-
So before we go about inviting new members into our organization, let's get a list going so that we know exactly who's already in the organization.
-
So let's go ahead and jump back into our terminal here and let's do node ace make action. And we'll put this inside of our organizations folder as it's going to be pertaining to our organization
-
more so than it will be our settings. And we'll call this get organization users. We'll go ahead and make that action. It's gonna be a relatively similar action. One of those that probably doesn't need to be an action,
-
but we'll do that for consistency sake. And let's jump back up to now our organization actions and that new get organization users. All we need from our params here is our organization of type organization.
-
We can extract that out of our handle method and we'll return, reach through that organization's relationship to its users and go ahead and query and order those
-
by their created date in an ascending fashion so that it is the oldest members to the newest members. That'll do it for our action. We can now jump back into our organizations controller
-
and we need to provide this into our index page. Now, traditionally what we've done in the past is just added a const here and gone on to make our query. However, this is gonna be a great page for us
-
to be able to showcase how you can use Inertia to update only specific data as you make updates in your page. So rather than directly adding a const out there,
-
let's use the callback mechanism that we covered early on in this series to query our users. So within our page props object, our users key is gonna be an async function.
-
Inertia will resolve this async function before it serializes this data and passes it through to our front end. So we can go ahead and grab our users inside of this callback
-
using our await get organization users action, call the handle method there and pass that organization in. Oh, we also need to grab the organization
-
now from our HTTP context. Once we have those users, we can go ahead and return and use our user DTO from array and pass the users object into there
-
so that we have now user DTOs to work with on our client side. We'll be circling back to this method here to add additional page props similarly to how we have our users here.
-
So as we add more, this will begin to make more and more sense why we're doing this approach. Now that we have our users queried and provided into our page props, let's go and scroll down to our Inertia
-
and let's add in a new component and we'll call this new component our organization users card, give it a file extension of .view.
-
Script setup Lang TS as usual. And we're gonna wanna do const props equals define props. And we'll accept a couple of things in here.
-
First, we're gonna have our users, which will be our user DTO as an array. This is a list of all of our users. We're also gonna want our actual authenticated user,
-
which we can provide as a user DTO type there as well. This will allow us to point out the authenticated user to themselves inside of the organization users list with a little U indicator there.
-
All right, let's go ahead and get our template going on now. So we'll add our template. This like usual is gonna be our card
-
with a card header and a card title of organization members. We'll also add in a card description,
-
members of your organization. And then we can do our card content. And inside of here, we'll have a table.
-
So we'll have a table header with a table row with four table head items. First is gonna be the user's name.
-
Now we can give that a copy and paste it four times. The last one is gonna be our actions. So we'll go ahead and omit the table head there. Second is gonna be the user's email.
-
And then third is gonna be the user's role within the organization. Underneath our table header will be our table body. And inside of here, we'll have a table row
-
that loops over each one of our users. So we'll have V4, and we'll call this member rather than user as we're providing user in our props already. So we don't wanna collide with that in users
-
and give it a key of member.id. Inside of this, we'll have a table cell that displays the members full name.
-
And then we can also do a span that displays VIF. The authenticated user's ID is equal to the currently looped over member ID.
-
We'll give that a class of text slate 400, make it italic, inline block, and give it a margin left of three. And this is gonna be that little U indicator
-
pointing out to our user that this is them within the organization list. Then underneath our full name, we'll have another table cell that displays the member email.
-
And then we'll have one more that displays the member role ID, which we're gonna need to reach through our meta. And it looks like we don't have that on our user quite yet. So we'll add that here in a moment.
-
And then we have a pivot row ID that comes from our pivot table from our query. And so now we need to map meta from our extras object on our user for that. Before we do that though,
-
let's go ahead and stub our last table cell, which we'll just leave empty for right now. This is gonna be our actions. All right, let's go fix our meta. So we need to jump into our DTOs for our user
-
and just add on a declare meta as record string any. And then we can scroll on down to the constructor
-
and map that as this meta equals user dot and map it through to the extras. Okay, if we now jump back into our organization users card, that should be all happy now.
-
Let's give that a save and let's go ahead and jump back over to our organization page. We're gonna need to update our props here. So we want our authenticated user now.
-
So we'll add that as our user of type user DTO. And then we'll also have our users, which is all of our organization users as a user DTO array. And now underneath our organization edit card,
-
we can add in our organization users card, provide our authenticated user in, as well as our array of users for the organization.
-
And let's jump back into our browser now to see what we have. All right, we have one organization member with test user hyphen edit, which is us, the currently authenticated user.
-
We have our email of test user one@test.com. And then we have a role, which is displaying as two, which is the actual role ID. So what we'd like to do now is change that
-
from the role ID to the actual role name, is that'll be a more user-friendly display there. So let's jump back into our text editor, jump on up into our organization's controller
-
and let's add roles in next. We can make that async, add our callback, const roles equals, and there's absolutely nothing special about this query.
-
So I'm just gonna go ahead and create directly from the model. And then we can go ahead and just order that by the role name, return role DTO from array
-
and pass our roles into there to get role DTOs. Jump back into our organization page as we need to add that to our props and then pass it down to our component.
-
So we have our roles of type role DTO array, and then we'll add that as a prop. So roles equals roles. And then we can jump into our organization users card,
-
jump up to the top of the page and add that to our page props. So roles, role DTO array, and then to keep our template clean,
-
let's add this as a function called get role name that accepts the role ID, that'll be a type number and we'll return, read from our props, roles,
-
and then find the role where the role ID equals the role ID provided. And then we can try to return the name from that. Jump down into our templates
-
where we have that role ID displayed and wrap that now with our get role name function. Give that a save. And if we jump back into our browser now, give that a refresh,
-
we now see admin rather than the ID of two. Awesome. Now our role ID was included from our pivot table data automatically for us
-
because we have that defined as a pivot column in our user model. So if we jump into our user model real quick and take a look at this many to many relationship between our user and our organization,
-
we have that defined right here as a pivot column. And we have that added on both sides of this relationship, meaning that as we query our organizations or as we query our users from our organizations,
-
since it's defined on both sides, the role ID is automatically going to be included in the extras object as pivot_role_id,
-
pivot prefixed whenever it comes from that pivot data. Had we omitted this, we would have needed to manually define that on the query as we covered in our Let's Learn AdonisJS 6 series.
-
So if we jump into our get organization users, we could have manually added that in as pivot columns and then defined our role ID in there
-
had we not had that defined to automatically be included from the relationship on our model. Again, since we have that on our model, it will automatically be included, so we don't need that here.
