display users and roles

src/stores/ability.ts

@@ -12,8 +12,8 @@ export const useAbilityStore = defineStore("ability", {
       (state) =>
       (type: PermissionType | "admin", section: PermissionSection, module?: PermissionModule): boolean => {
         const permissions = state.permissions;
-        if (type == "admin") return permissions.admin ?? false;
-        if (permissions.admin) return true;
+        if (type == "admin") return permissions?.admin ?? false;
+        if (permissions?.admin) return true;
         if (
           (!module &&
             permissions[section] != undefined &&
@@ -30,8 +30,8 @@ export const useAbilityStore = defineStore("ability", {
       (state) =>
       (type: PermissionType | "admin", section: PermissionSection): boolean => {
         const permissions = state.permissions;
-        if (type == "admin") return permissions.admin ?? false;
-        if (permissions.admin) return true;
+        if (type == "admin") return permissions?.admin ?? false;
+        if (permissions?.admin) return true;
         if (
           permissions[section]?.all == "*" ||
           permissions[section]?.all?.includes(type) ||
@@ -48,8 +48,8 @@ export const useAbilityStore = defineStore("ability", {
         section: PermissionSection,
         module?: PermissionModule
       ): boolean => {
-        if (type == "admin") return permissions.admin ?? false;
-        if (permissions.admin) return true;
+        if (type == "admin") return permissions?.admin ?? false;
+        if (permissions?.admin) return true;
         if (
           (!module &&
             permissions[section] != undefined &&

src/stores/admin/navigation.ts

@@ -56,6 +56,7 @@ export const useNavigationStore = defineStore("navigation", {
         if (!disableSubLink) this.setLink(level.levelDefault);
         else this.setLink(null);
       }
+      this.resetComponentOverwrite();
     },
     setLink(key: string | null) {
       let nav = this.navigation[this.activeNavigation];
@@ -65,6 +66,7 @@ export const useNavigationStore = defineStore("navigation", {
       }
       let links = [...Object.values(nav.main), ...Object.values(nav.top ?? {})];
       this.activeLink = links.find((e) => e.key == key) ?? null;
+      this.resetComponentOverwrite();
     },
     setTopLevelNav(topLeveLinks: Array<topLevelNavigationModel>) {
       this.topLevel = topLeveLinks;
@@ -209,12 +211,12 @@ export const useNavigationStore = defineStore("navigation", {
                   },
                 ]
               : []),
-            ...(abilityStore.can("admin", "user", "role")
+            ...(abilityStore.can("read", "user", "role")
               ? [
                   {
                     key: "#role",
                     title: "Rollen",
-                    component: shallowRef(defineAsyncComponent(() => import("@/views/admin/members/Overview.vue"))),
+                    component: shallowRef(defineAsyncComponent(() => import("@/views/admin/user/Role.vue"))),
                   },
                 ]
               : []),

src/stores/admin/role.ts

@@ -0,0 +1,59 @@
+import { defineStore } from "pinia";
+import type { RoleViewModel } from "../../viewmodels/admin/role.models";
+import { http } from "../../serverCom";
+
+export const useRoleStore = defineStore("role", {
+  state: () => {
+    return {
+      roles: [] as Array<RoleViewModel>,
+      role: null as null | RoleViewModel,
+      loadingAll: null as null | "loading" | "success" | "failed",
+      loadingSingle: null as null | "loading" | "success" | "failed",
+      createStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+    };
+  },
+  actions: {
+    fetchRoles() {
+      this.loadingAll = "loading";
+      http
+        .get("/admin/role")
+        .then((result) => {
+          this.roles = result.data;
+          this.loadingAll = "success";
+        })
+        .catch((err) => {
+          this.loadingAll = "failed";
+        });
+    },
+    fetchRolesById(id: number) {
+      this.role = null;
+      this.loadingSingle = "loading";
+      http
+        .get(`/admin/role/${id}`)
+        .then((result) => {
+          this.role = result.data;
+          this.loadingSingle = "success";
+        })
+        .catch((err) => {
+          this.loadingSingle = "failed";
+        });
+    },
+    resetCreateStatus() {
+      this.createStatus = null;
+    },
+    createRole(role: string) {
+      this.createStatus = "loading";
+      http
+        .post("/admin/role", {
+          role: role,
+        })
+        .then((res) => {
+          this.createStatus = { status: "success" };
+          this.fetchRoles();
+        })
+        .catch((err) => {
+          this.createStatus = { status: "failed", reason: err.data };
+        });
+    },
+  },
+});

src/stores/admin/user.ts

@@ -0,0 +1,41 @@
+import { defineStore } from "pinia";
+import type { UserViewModel } from "../../viewmodels/admin/user.models";
+import { http } from "../../serverCom";
+
+export const useUserStore = defineStore("user", {
+  state: () => {
+    return {
+      users: [] as Array<UserViewModel>,
+      user: null as null | UserViewModel,
+      loadingAll: "loading" as "loading" | "fetched" | "failed",
+      loadingSingle: "loading" as "loading" | "fetched" | "failed",
+    };
+  },
+  actions: {
+    fetchUsers() {
+      this.loadingAll = "loading";
+      http
+        .get("/admin/user")
+        .then((result) => {
+          this.users = result.data;
+          this.loadingAll = "fetched";
+        })
+        .catch((err) => {
+          this.loadingAll = "failed";
+        });
+    },
+    fetchUsersById(id: number) {
+      this.user = null;
+      this.loadingSingle = "loading";
+      http
+        .get(`/admin/user/${id}`)
+        .then((result) => {
+          this.user = result.data;
+          this.loadingSingle = "fetched";
+        })
+        .catch((err) => {
+          this.loadingSingle = "failed";
+        });
+    },
+  },
+});