routing inside url

src/components/admin/RoutingLink.vue

@@ -1,16 +1,14 @@
 <template>
-  <div
-    v-if="link"
-    class="cursor-pointer w-full px-2 py-3"
-    :class="
-      activeLink?.key == link.key
-        ? 'rounded-r-lg bg-red-200 border-l-4 border-l-primary'
-        : 'pl-3 hover:bg-red-200 rounded-lg'
-    "
-    @click="setLink(link.key)"
-  >
-    {{ link.title }}
-  </div>
+  <RouterLink v-if="link" v-slot="{ isExactActive }" :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'
+      "
+    >
+      {{ link.title }}
+    </p>
+  </RouterLink>
 </template>
 
 <script setup lang="ts">
@@ -20,6 +18,7 @@ import { useNavigationStore, type navigationLinkModel } from "@/stores/admin/nav
 
 <script lang="ts">
 import { defineComponent, type PropType } from "vue";
+import { RouterLink } from "vue-router";
 export default defineComponent({
   props: {
     link: {
@@ -28,11 +27,7 @@ export default defineComponent({
     },
   },
   computed: {
-    ...mapState(useNavigationStore, ["activeLink"]),
-  },
-  methods: {
-    ...mapActions(useNavigationStore, ["setLink"]),
+    ...mapState(useNavigationStore, ["activeNavigation"]),
   },
 });
 </script>
-@/stores/contest/viewManager

src/components/admin/TopLevelLink.vue

@@ -1,25 +1,30 @@
 <template>
-  <div
+  <RouterLink
     v-if="link"
-    class="cursor-pointer w-full flex flex-col md:flex-row items-center md:gap-2 justify-center p-1 md:rounded-full md:px-3 font-medium text-center text-base self-center"
-    :class="
-      activeNavigation == link.key
-        ? 'text-primary md:bg-primary md:text-white'
-        : 'text-gray-700 hover:text-accent md:hover:bg-accent md:hover:text-white'
-    "
-    @click="setTopLevel(link.key, disableSubLink)"
+    :to="{ name: `admin-${link.key}-${!disableSubLink ? link.levelDefault : 'default'}` }"
+    class="cursor-pointer w-full flex items-center justify-center self-center"
   >
-    {{ link.title }}
-  </div>
+    <p
+      class="cursor-pointer w-full flex flex-col md:flex-row items-center md:gap-2 justify-center p-1 md:rounded-full md:px-3 font-medium text-center text-base self-center"
+      :class="
+        activeNavigation == link.key
+          ? 'text-primary md:bg-primary md:text-white'
+          : 'text-gray-700 hover:text-accent md:hover:bg-accent md:hover:text-white'
+      "
+    >
+      {{ link.title }}
+    </p>
+  </RouterLink>
 </template>
 
 <script setup lang="ts">
-import { mapState, mapActions } from "pinia";
 import { useNavigationStore, type topLevelNavigationModel } from "@/stores/admin/navigation";
+import { mapState } from "pinia";
 </script>
 
 <script lang="ts">
 import { defineComponent, type PropType } from "vue";
+import { RouterLink } from "vue-router";
 export default defineComponent({
   props: {
     link: {
@@ -34,8 +39,5 @@ export default defineComponent({
   computed: {
     ...mapState(useNavigationStore, ["activeNavigation"]),
   },
-  methods: {
-    ...mapActions(useNavigationStore, ["setTopLevel"]),
-  },
 });
 </script>

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

@@ -2,16 +2,18 @@
   <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" />
+      <PencilIcon class="w-5 h-5 p-1 box-content cursor-pointer" @click="openUpdateModal" />
     </div>
   </div>
 </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 { PencilIcon } from "@heroicons/vue/outline";
 import type { RoleViewModel } from "@/viewmodels/admin/role.models";
+import { useModalStore } from "@/stores/modal";
+import { useNavigationStore } from "@/stores/admin/navigation";
 </script>
 
 <script lang="ts">
@@ -23,5 +25,14 @@ export default defineComponent({
     return {};
   },
   mounted() {},
+  methods: {
+    ...mapActions(useModalStore, ["openModal"]),
+    openUpdateModal() {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/user/role/UpdateRoleModal.vue"))),
+        this.role.id
+      );
+    },
+  },
 });
 </script>

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

@@ -0,0 +1,54 @@
+<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>