Dynamically register/deregister modules

app/src/modules/collections/index.ts

@@ -69,4 +69,5 @@ export default defineModule(({ i18n }) => ({
 			beforeEnter: checkForSystem,
 		},
 	],
+	order: 5,
 }));

app/src/modules/files/index.ts

@@ -53,4 +53,11 @@ export default defineModule(({ i18n }) => ({
 			props: true,
 		},
 	],
+	order: 15,
+	preRegisterCheck(user, permissions) {
+		const permission = permissions.find(
+			(permission) => permission.collection === 'directus_files' && permission.action === 'read'
+		);
+		return !!permission;
+	},
 }));

app/src/modules/settings/index.ts

@@ -122,4 +122,8 @@ export default defineModule(({ i18n }) => ({
 			component: SettingsNotFound,
 		},
 	],
+	preRegisterCheck: (user) => {
+		return user.role.admin === true;
+	},
+	order: Infinity,
 }));

app/src/modules/types.ts

@@ -12,6 +12,7 @@ export type ModuleConfig = {
 	link?: string;
 	color?: string;
 	preRegisterCheck?: (user: User, permissions: Permission[]) => boolean;
+	order?: number;
 };
 
 export type ModuleContext = { i18n: VueI18n };

app/src/modules/users/index.ts

@@ -26,4 +26,11 @@ export default defineModule(({ i18n }) => ({
 			}),
 		},
 	],
+	order: 10,
+	preRegisterCheck(user, permissions) {
+		const permission = permissions.find(
+			(permission) => permission.collection === 'directus_users' && permission.action === 'read'
+		);
+		return !!permission;
+	},
 }));

app/src/views/private/components/module-bar/module-bar.vue

@@ -33,6 +33,7 @@ import { getModules } from '@/modules/';
 import ModuleBarLogo from '../module-bar-logo/';
 import ModuleBarAvatar from '../module-bar-avatar/';
 import { useUserStore } from '@/stores/';
+import { orderBy } from 'lodash';
 
 export default defineComponent({
 	components: {
@@ -43,8 +44,6 @@ export default defineComponent({
 		const userStore = useUserStore();
 		const modules = getModules();
 
-		console.log(modules);
-
 		const _modules = computed(() => {
 			const customModuleListing = userStore.state.currentUser?.role.module_listing;
 
@@ -64,20 +63,24 @@ export default defineComponent({
 				});
 			}
 
-			return modules.value
-				.map((module) => ({
-					...module,
-					href: module.link || null,
-					to: module.link === undefined ? `/${module.id}/` : null,
-				}))
-				.filter((module) => {
-					if (module.hidden !== undefined) {
-						if ((module.hidden as boolean) === true || (module.hidden as Ref<boolean>).value === true) {
-							return false;
+			return orderBy(
+				modules.value
+					.map((module) => ({
+						...module,
+						href: module.link || null,
+						to: module.link === undefined ? `/${module.id}/` : null,
+					}))
+					.filter((module) => {
+						if (module.hidden !== undefined) {
+							if ((module.hidden as boolean) === true || (module.hidden as Ref<boolean>).value === true) {
+								return false;
+							}
 						}
-					}
-					return true;
-				});
+						return true;
+					}),
+				['order'],
+				['asc']
+			);
 		});
 
 		return { _modules };