Users nav (#400)

* Add filters-to-query util

* Add all users string

* Suppot filters in tabular layout

* Sync filters with collection presets

* Support filters in use-items composition

* Render users nav + use skeleton loader

* Add list-item-icon type to skeleton loader

* Fix missing loader indicator on table

* Cleanup has click check

* Dont route based on id

* Fix loading state in table

* Revert "Dont route based on id"

This reverts commit 6de7cbe1b801d5e5e267f09a6e77dc73dcc60a37.

* Fix table loading state

* Fix routing for users module

* Force role field to be fetched

* Add roles store

* Dont render avatar until user is known

* Speed up hydration absurd much

* Rely on roles store to prevent nav from loading

* Fix tests

src/stores/roles/index.ts

@@ -0,0 +1,4 @@
+import { useRolesStore } from './roles';
+
+export { useRolesStore };
+export default useRolesStore;

src/stores/roles/roles.ts

@@ -0,0 +1,25 @@
+import { createStore } from 'pinia';
+import api from '@/api';
+import { useProjectsStore } from '@/stores/projects';
+
+import { Role } from './types';
+
+export const useRolesStore = createStore({
+	id: 'rolesStore',
+	state: () => ({
+		roles: [] as Role[],
+	}),
+	actions: {
+		async hydrate() {
+			const projectsStore = useProjectsStore();
+			const currentProjectKey = projectsStore.state.currentProjectKey;
+
+			const rolesResponse = await api.get(`/${currentProjectKey}/roles`);
+
+			this.state.roles = rolesResponse.data.data;
+		},
+		async dehydrate() {
+			this.reset();
+		},
+	},
+});

src/stores/roles/types.ts

@@ -0,0 +1,10 @@
+export type Role = {
+	id: number;
+	name: string;
+	description: string;
+	collection_listing: null;
+	module_listing: null;
+	enforce_2fa: null | boolean;
+	external_id: null | string;
+	ip_whitelist: string[];
+};

src/stores/user/types.ts

@@ -1,3 +1,5 @@
+import { Role } from '@/stores/roles/types';
+
 export type Avatar = {
 	data: {
 		thumbnails: Thumbnail[];
@@ -24,16 +26,7 @@ export type User = {
 	external_id: string;
 	'2fa_secret': string;
 	theme: 'auto' | 'dark' | 'light';
-	role: {
-		id: number;
-		name: string;
-		description: string;
-		collection_listing: null;
-		module_listing: null;
-		enforce_2fa: null | boolean;
-		external_id: null | string;
-		ip_whitelist: string[];
-	};
+	role: Role;
 	password_reset_token: string | null;
 	timezone: string;
 	locale: string;