invite base operations

src/views/admin/user/Invite.vue

@@ -0,0 +1,39 @@
+<template>
+  <MainTemplate>
+    <template #headerInsert>
+      <RouterLink :to="{ name: 'admin-user-user' }" class="text-primary">zurück zur Nutzerliste</RouterLink>
+    </template>
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">offene Einladungen</h1>
+      </div>
+    </template>
+    <template #diffMain>
+      <div class="flex flex-col gap-2 grow overflow-y-scroll px-7">
+        <InviteListItem v-for="invite in invites" :key="invite.id" :invite="invite" />
+      </div>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, markRaw, defineAsyncComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { useInviteStore } from "@/stores/admin/invite";
+import InviteListItem from "@/components/admin/user/user/InviteListItem.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  computed: {
+    ...mapState(useInviteStore, ["invites"]),
+  },
+  mounted() {
+    this.fetchInvites();
+  },
+  methods: {
+    ...mapActions(useInviteStore, ["fetchInvites"]),
+  },
+});
+</script>

src/views/admin/user/User.vue

@@ -11,8 +11,10 @@
           <UserListItem v-for="user in users" :key="user.id" :user="user" />
         </div>
         <div class="flex flex-row gap-4">
-          <button primary class="!w-fit">Nutzer einladen</button>
-          <button primary-outline class="!w-fit">offene Einladungen</button>
+          <button primary class="!w-fit" @click="inviteUser">Nutzer einladen</button>
+          <RouterLink button primary-outline :to="{ name: 'admin-user-user-invites' }" class="!w-fit">
+            offene Einladungen
+          </RouterLink>
         </div>
       </div>
     </template>
@@ -20,10 +22,12 @@
 </template>
 
 <script setup lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, markRaw, defineAsyncComponent } from "vue";
+import { RouterLink } from "vue-router";
 import { mapState, mapActions } from "pinia";
 import MainTemplate from "@/templates/Main.vue";
 import { useUserStore } from "@/stores/admin/user";
+import { useModalStore } from "@/stores/modal";
 import UserListItem from "@/components/admin/user/user/UserListItem.vue";
 </script>