Adocasts Adocasts
Adocasts Adocasts
Sign In Sign Up

Ready to get started?

Join Adocasts Plus for $8/mo, or sign into an existing Adocasts Plus account, to get access to all of our lessons.

Join for $8/mo Sign in
robot mascot smiling
Building with AdonisJS & Inertia

Listing the User's Organizations

@tomgobich
Published by
@tomgobich
In This Lesson

We'll update our organization middleware to query all the user's organizations. We'll then provide everything into our Vue page state via Inertia and begin building our organization select component.

Chapters

00:00 - Getting All of the User's Organizations
01:15 - Sharing our Organization Data with Vue via Inertia
02:21 - Starting our Organization Select Component
05:10 - Putting our Organization Select to Work
05:57 - Testing It Out

Join the Discussion 2 comments

Share your thoughts!
Create a free account to join in on the discussion
  1. @aaron-ford
    @aaron-ford Adocasts Plus

    From a UI perspective, if someone has a lot of organizations, would you just let the list grow long, or is there a good way to limit the dropdown length and have the menu scroll after a certain point?

    1
    1. Responding to aaron-ford
      @tomgobich
      @tomgobich Adocasts Plus

      Yeah, that's a great question, and the approach you'd take will vary depending on either expectations or production data as you don't want to solve issues that don't/won't exist.

      In our application, my expectation is that no one realistically would use more than 5 organizations. Since it isn't something I foresee being an issue within our application, if anything, just setting an overflow on the dropdown group listing the user's organizations would be the solution. 

      .organization-select div[role="group"] {
  max-height: calc(100vh - 230px);
  overflow-y: auto;
}
      
  
      
    
      
      Copied!

      We could then do occasional audits on production data to check for use-cases where our expectations may have been wrong and our game plan needs altered.

      If, however, production data shows or our expectations were that users would have 10+ organizations we'd want to take a different approach. It wouldn't be a good experience to list that many organizations within the dropdown; 5 would be ideal, 10 would probably be the max we'd want to show.

      So, what we could do is add a timestamp column to the organization_users pivot table to store when the user last used the organization, maybe called last_used_at. Within our SetActiveOrganization action, we'd be sure to update this timestamp for the user's new active organization.

      Then, within our OrganizationMiddleware where we are getting the user's organizations to list in the dropdown, we'd add a descending order for the last_used_at column and limit the results to 5. Resulting in the user's last 5 used organizations being shown in their dropdown. Then, we'd add one more option to their dropdown called "View All Organizations." This could then link to a new paginated page listing all the user's organizations, again defaulting this list to a descending sort by the last_used_at.

      Alternatively, you could just let the user set their own preferred ordering like we did with our difficulties, access levels, etc.

      0