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 Adocasts Plus for $8.00/mo, or sign into your account to get access to all of our lessons.
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.
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
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 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.
aaron-ford
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?
Please sign in or sign up for free to reply
tomgobich
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.
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 calledlast_used_at
. Within ourSetActiveOrganization
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 thelast_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 thelast_used_at
.Alternatively, you could just let the user set their own preferred ordering like we did with our difficulties, access levels, etc.
Please sign in or sign up for free to reply