role and user management

src/components/admin/Permission.vue

@@ -68,6 +68,9 @@
     <div class="flex flex-row gap-2 self-end pt-4">
       <button primary-outline class="!w-fit" @click="$emit('abortPermissions')">abbrechen</button>
       <button primary class="!w-fit" @click="$emit('savePermissions', permissionUpdate)">speichern</button>
+      <Spinner v-if="status == 'loading'" class="my-auto" />
+      <SuccessCheckmark v-else-if="status?.status == 'success'" />
+      <FailureXMark v-else-if="status?.status == 'failed'" />
     </div>
   </div>
 </template>
@@ -84,9 +87,12 @@ import type {
 } from "@/types/permissionTypes";
 import { sectionsAndModules, permissionSections, permissionTypes } from "@/types/permissionTypes";
 import { mapState, mapActions } from "pinia";
-import { EyeIcon, PencilIcon, PlusIcon, TrashIcon } from "@heroicons/vue/outline";
+import { EyeIcon, PencilIcon, PlusIcon, TrashIcon } from "@heroicons/vue/24/outline";
 import { useAbilityStore } from "@/stores/ability";
 import _cloneDeep from "lodash.clonedeep";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
 </script>
 
 <script lang="ts">
@@ -96,6 +102,14 @@ export default defineComponent({
       type: Object as PropType<PermissionObject>,
       default: {},
     },
+    status: {
+      type: [
+        null,
+        String as PropType<"loading">,
+        Object as PropType<{ status: "success" | "failed"; message?: string }>,
+      ],
+      default: null,
+    },
   },
   emits: ["savePermissions", "abortPermissions"],
   data() {

src/components/admin/RoutingLink.vue

@@ -1,9 +1,11 @@
 <template>
-  <RouterLink v-if="link" v-slot="{ isExactActive }" :to="{ name: `admin-${activeNavigation}-${link.key}` }">
+  <RouterLink v-if="link" :to="{ name: `admin-${activeNavigation}-${link.key}` }">
     <p
       class="cursor-pointer w-full px-2 py-3"
       :class="
-        isExactActive ? 'rounded-r-lg bg-red-200 border-l-4 border-l-primary' : 'pl-3 hover:bg-red-200 rounded-lg'
+        activeLink == link.key
+          ? 'rounded-r-lg bg-red-200 border-l-4 border-l-primary'
+          : 'pl-3 hover:bg-red-200 rounded-lg'
       "
     >
       {{ link.title }}
@@ -27,7 +29,7 @@ export default defineComponent({
     },
   },
   computed: {
-    ...mapState(useNavigationStore, ["activeNavigation"]),
+    ...mapState(useNavigationStore, ["activeLink", "activeNavigation"]),
   },
 });
 </script>

src/components/admin/user/role/CreateRoleModal.vue

@@ -40,14 +40,14 @@ import { useRoleStore } from "@/stores/admin/role";
 <script lang="ts">
 export default defineComponent({
   mounted() {
-    this.resetCreateStatus();
+    this.resetStatus();
   },
   computed: {
     ...mapState(useRoleStore, ["createStatus"]),
   },
   methods: {
     ...mapActions(useModalStore, ["closeModal"]),
-    ...mapActions(useRoleStore, ["createRole", "resetCreateStatus"]),
+    ...mapActions(useRoleStore, ["createRole", "resetStatus"]),
     triggerCreateRole(e: any) {
       let formData = e.target.elements;
       this.createRole(formData.role.value);

src/components/admin/user/role/DeleteRoleModal.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="w-full md:max-w-md">
+    <div class="flex flex-col items-center">
+      <p class="text-xl font-medium">Rolle {{ role?.role }} löschen?</p>
+    </div>
+    <br />
+
+    <div class="flex flex-row gap-2">
+      <button
+        primary
+        :disabled="deleteStatus == 'loading' || deleteStatus?.status == 'success'"
+        @click="triggerDeleteRole"
+      >
+        unwiederuflich löschen
+      </button>
+      <Spinner v-if="deleteStatus == 'loading'" class="my-auto" />
+      <SuccessCheckmark v-else-if="deleteStatus?.status == 'success'" />
+      <FailureXMark v-else-if="deleteStatus?.status == 'failed'" />
+    </div>
+
+    <div class="flex flex-row justify-end">
+      <div class="flex flex-row gap-4 py-2">
+        <button primary-outline @click="closeModal">schließen</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import { useRoleStore } from "@/stores/admin/role";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  mounted() {
+    this.resetStatus();
+  },
+  computed: {
+    ...mapState(useModalStore, ["data"]),
+    ...mapState(useRoleStore, ["roles", "deleteStatus"]),
+    role() {
+      return this.roles.find((r) => r.id == this.data);
+    },
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    ...mapActions(useRoleStore, ["deleteRole", "resetStatus"]),
+    triggerDeleteRole() {
+      this.deleteRole(this.data);
+    },
+  },
+});
+</script>

src/components/admin/user/role/RoleListItem.vue

@@ -2,7 +2,23 @@
   <div class="flex flex-col h-fit w-full border border-primary rounded-md">
     <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
       <p>{{ role.role }} <small v-if="role.permissions?.isAdmin">(Admin)</small></p>
-      <PencilIcon class="w-5 h-5 p-1 box-content cursor-pointer" @click="openUpdateModal" />
+      <div class="flex flex-row">
+        <RouterLink
+          v-if="can('update', 'user', 'role')"
+          :to="{ name: 'admin-user-role-permission', params: { id: role.id } }"
+        >
+          <WrenchScrewdriverIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
+        </RouterLink>
+        <RouterLink
+          v-if="can('update', 'user', 'role')"
+          :to="{ name: 'admin-user-role-edit', params: { id: role.id } }"
+        >
+          <PencilIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
+        </RouterLink>
+        <div v-if="can('delete', 'user', 'user')" @click="openDeleteModal">
+          <TrashIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -10,10 +26,11 @@
 <script setup lang="ts">
 import { defineComponent, defineAsyncComponent, markRaw, type PropType } from "vue";
 import { mapState, mapActions } from "pinia";
-import { PencilIcon } from "@heroicons/vue/outline";
+import { PencilIcon, WrenchScrewdriverIcon, TrashIcon } from "@heroicons/vue/24/outline";
 import type { RoleViewModel } from "@/viewmodels/admin/role.models";
+import { RouterLink } from "vue-router";
+import { useAbilityStore } from "@/stores/ability";
 import { useModalStore } from "@/stores/modal";
-import { useNavigationStore } from "@/stores/admin/navigation";
 </script>
 
 <script lang="ts">
@@ -21,15 +38,14 @@ export default defineComponent({
   props: {
     role: { type: Object as PropType<RoleViewModel>, default: {} },
   },
-  data() {
-    return {};
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
   },
-  mounted() {},
   methods: {
     ...mapActions(useModalStore, ["openModal"]),
-    openUpdateModal() {
+    openDeleteModal() {
       this.openModal(
-        markRaw(defineAsyncComponent(() => import("@/components/admin/user/role/UpdateRoleModal.vue"))),
+        markRaw(defineAsyncComponent(() => import("@/components/admin/user/role/DeleteRoleModal.vue"))),
         this.role.id
       );
     },

src/components/admin/user/role/UpdateRoleModal.vue

@@ -1,54 +0,0 @@
-<template>
-  <div class="flex flex-col items-center gap-2 w-full max-w-6xl h-1/2 max-h-3/4">
-    <div class="flex flex-col">
-      <p class="text-xl font-medium">Rolle bearbeiten</p>
-    </div>
-    <form class="flex flex-col gap-4 py-2 w-full max-w-xl" @submit.prevent="">
-      <div>
-        <label for="role">Rollenbezeichnung</label>
-        <input type="text" id="role" required />
-      </div>
-      <div class="flex flex-row gap-2">
-        <button primary type="submit" :disabled="createStatus == 'loading' || createStatus?.status == 'success'">
-          speichern
-        </button>
-        <Spinner v-if="createStatus == 'loading'" class="my-auto" />
-        <SuccessCheckmark v-else-if="createStatus?.status == 'success'" />
-        <FailureXMark v-else-if="createStatus?.status == 'failed'" />
-      </div>
-    </form>
-
-    <div class="flex flex-row self-end mt-auto">
-      <div class="flex flex-row gap-4 py-2">
-        <button primary-outline @click="closeModal">schließen</button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { defineComponent } from "vue";
-import { mapState, mapActions } from "pinia";
-import { useModalStore } from "@/stores/modal";
-import Spinner from "@/components/Spinner.vue";
-import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
-import FailureXMark from "@/components/FailureXMark.vue";
-import { useRoleStore } from "@/stores/admin/role";
-import Permission from "../../Permission.vue";
-</script>
-
-<script lang="ts">
-export default defineComponent({
-  mounted() {
-    this.fetchRoleById(this.data);
-  },
-  computed: {
-    ...mapState(useRoleStore, ["createStatus", "role"]),
-    ...mapState(useModalStore, ["data"]),
-  },
-  methods: {
-    ...mapActions(useModalStore, ["closeModal"]),
-    ...mapActions(useRoleStore, ["fetchRoleById"]),
-  },
-});
-</script>

src/components/admin/user/user/DeleteUserModal.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="w-full md:max-w-md">
+    <div class="flex flex-col items-center">
+      <p class="text-xl font-medium">Nutzer {{ user?.username }} löschen?</p>
+    </div>
+    <br />
+
+    <div class="flex flex-row gap-2">
+      <button
+        primary
+        :disabled="deleteStatus == 'loading' || deleteStatus?.status == 'success'"
+        @click="triggerDeleteUser"
+      >
+        unwiederuflich löschen
+      </button>
+      <Spinner v-if="deleteStatus == 'loading'" class="my-auto" />
+      <SuccessCheckmark v-else-if="deleteStatus?.status == 'success'" />
+      <FailureXMark v-else-if="deleteStatus?.status == 'failed'" />
+    </div>
+
+    <div class="flex flex-row justify-end">
+      <div class="flex flex-row gap-4 py-2">
+        <button primary-outline @click="closeModal">schließen</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import { useUserStore } from "@/stores/admin/user";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  mounted() {
+    this.resetStatus();
+  },
+  computed: {
+    ...mapState(useModalStore, ["data"]),
+    ...mapState(useUserStore, ["users", "deleteStatus"]),
+    user() {
+      return this.users.find((u) => u.id == this.data);
+    },
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    ...mapActions(useUserStore, ["deleteUser", "resetStatus"]),
+    triggerDeleteUser() {
+      this.deleteUser(this.data);
+    },
+  },
+});
+</script>

src/components/admin/user/user/UserListItem.vue

@@ -2,7 +2,29 @@
   <div class="flex flex-col h-fit w-full border border-primary rounded-md">
     <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
       <p>{{ user.firstname }} {{ user.lastname }}</p>
-      <PencilIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
+      <div class="flex flex-row">
+        <RouterLink
+          v-if="can('update', 'user', 'user')"
+          :to="{ name: 'admin-user-user-roles', params: { id: user.id } }"
+        >
+          <UserGroupIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
+        </RouterLink>
+        <RouterLink
+          v-if="can('update', 'user', 'user')"
+          :to="{ name: 'admin-user-user-permission', params: { id: user.id } }"
+        >
+          <WrenchScrewdriverIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
+        </RouterLink>
+        <RouterLink
+          v-if="can('update', 'user', 'user')"
+          :to="{ name: 'admin-user-user-edit', params: { id: user.id } }"
+        >
+          <PencilIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
+        </RouterLink>
+        <div v-if="can('delete', 'user', 'user')" @click="openDeleteModal">
+          <TrashIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
+        </div>
+      </div>
     </div>
     <div class="flex flex-col p-2">
       <div class="flex flex-row gap-2">
@@ -26,10 +48,12 @@
 </template>
 
 <script setup lang="ts">
-import { defineComponent, type PropType } from "vue";
+import { defineComponent, defineAsyncComponent, markRaw, type PropType } from "vue";
 import { mapState, mapActions } from "pinia";
 import type { UserViewModel } from "@/viewmodels/admin/user.models";
-import { PencilIcon } from "@heroicons/vue/outline";
+import { PencilIcon, UserGroupIcon, WrenchScrewdriverIcon, TrashIcon } from "@heroicons/vue/24/outline";
+import { useAbilityStore } from "@/stores/ability";
+import { useModalStore } from "@/stores/modal";
 </script>
 
 <script lang="ts">
@@ -37,9 +61,18 @@ export default defineComponent({
   props: {
     user: { type: Object as PropType<UserViewModel>, default: {} },
   },
-  data() {
-    return {};
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  methods: {
+    ...mapActions(useModalStore, ["openModal"]),
+    openDeleteModal() {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/user/user/DeleteUserModal.vue"))),
+        this.user.id
+      );
+    },
   },
-  mounted() {},
 });
 </script>