display users and roles

src/components/admin/Permission.vue

@@ -85,7 +85,7 @@ import type {
 import { sectionsAndModules, permissionSections, permissionTypes } from "@/types/permissionTypes";
 import { mapState, mapActions } from "pinia";
 import { EyeIcon, PencilIcon, PlusIcon, TrashIcon } from "@heroicons/vue/outline";
-import { useAbilityStore } from "../../../stores/ability";
+import { useAbilityStore } from "@/stores/ability";
 import _cloneDeep from "lodash.clonedeep";
 </script>
 

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

@@ -0,0 +1,57 @@
+<template>
+  <div class="w-full md:max-w-md">
+    <div class="flex flex-col items-center">
+      <p class="text-xl font-medium">Rolle erstellen</p>
+    </div>
+    <br />
+    <form class="flex flex-col gap-4 py-2" @submit.prevent="triggerCreateRole">
+      <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'">
+          erstellen
+        </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 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.resetCreateStatus();
+  },
+  computed: {
+    ...mapState(useRoleStore, ["createStatus"]),
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    ...mapActions(useRoleStore, ["createRole", "resetCreateStatus"]),
+    triggerCreateRole(e: any) {
+      let formData = e.target.elements;
+      this.createRole(formData.role.value);
+    },
+  },
+});
+</script>

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

@@ -0,0 +1,27 @@
+<template>
+  <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" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapState, mapActions } from "pinia";
+import { PencilIcon } from "@heroicons/vue/outline";
+import type { RoleViewModel } from "@/viewmodels/admin/role.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    role: { type: Object as PropType<RoleViewModel>, default: {} },
+  },
+  data() {
+    return {};
+  },
+  mounted() {},
+});
+</script>

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

@@ -0,0 +1,45 @@
+<template>
+  <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>
+    <div class="flex flex-col p-2">
+      <div class="flex flex-row gap-2">
+        <p class="min-w-16">Benutzer:</p>
+        <p class="grow overflow-hidden">{{ user.username }}</p>
+      </div>
+      <div class="flex flex-row gap-2">
+        <p class="min-w-16">Mail:</p>
+        <p class="grow overflow-hidden">{{ user.mail }}</p>
+      </div>
+      <div class="flex flex-row gap-2">
+        <p class="min-w-16">Rollen:</p>
+        <div class="flex flex-row gap-2 flex-wrap grow">
+          <p v-for="role in user.roles" :key="role.id" class="px-1 border border-gray-300 rounded-md">
+            {{ role.role }}
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapState, mapActions } from "pinia";
+import type { UserViewModel } from "@/viewmodels/admin/user.models";
+import { PencilIcon } from "@heroicons/vue/outline";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    user: { type: Object as PropType<UserViewModel>, default: {} },
+  },
+  data() {
+    return {};
+  },
+  mounted() {},
+});
+</script>