Ready to get started?

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

robot mascot smiling

Listing the User's Organizations

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.

Published
Oct 25, 24
Duration
6m 42s

Developer, dog lover, and burrito eater. Currently teaching AdonisJS, a fully featured NodeJS framework, and running Adocasts where I post new lessons weekly. Professionally, I work with JavaScript, .Net C#, and SQL Server.

Adocasts

Burlington, KY

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

Ready to get started?

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

Join The Discussion! (2 Comments)

Please sign in or sign up for free to join in on the dicussion.

  1. Commented 9 days ago

    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

    Please sign in or sign up for free to reply

    1. Commented 8 days ago

      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

      Please sign in or sign up for free to reply