form update & token copy

src/components/admin/user/webapi/CreateWebapiModal.vue

@@ -6,8 +6,12 @@
     <br />
     <form class="flex flex-col gap-4 py-2" @submit.prevent="triggerCreateWebapi">
       <div>
-        <label for="webapi">Bezeichnung</label>
-        <input type="text" id="webapi" required />
+        <label for="title">Bezeichnung</label>
+        <input type="text" id="title" required />
+      </div>
+      <div class="w-full">
+        <label for="expiry">Ablaufdatum (optional)</label>
+        <input type="date" id="expiry" step="1" />
       </div>
       <div class="flex flex-row gap-2">
         <button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</button>
@@ -35,6 +39,7 @@ import Spinner from "@/components/Spinner.vue";
 import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
 import { useWebapiStore } from "@/stores/admin/user/webapi";
+import type { CreateWebapiViewModel } from "../../../../viewmodels/admin/user/webapi.models";
 </script>
 
 <script lang="ts">
@@ -55,8 +60,12 @@ export default defineComponent({
     ...mapActions(useWebapiStore, ["createWebapi"]),
     triggerCreateWebapi(e: any) {
       let formData = e.target.elements;
+      let createWebapi: CreateWebapiViewModel = {
+        title: formData.title.value,
+        expiry: formData.expiry.value,
+      };
       this.status = "loading";
-      this.createWebapi(formData.webapi.value)
+      this.createWebapi(createWebapi)
         .then(() => {
           this.status = { status: "success" };
           this.timeout = setTimeout(() => {

src/components/admin/user/webapi/WebapiListItem.vue

@@ -3,6 +3,9 @@
     <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
       <p>{{ webapi.title }} <small v-if="webapi.permissions.admin">(Admin)</small></p>
       <div class="flex flex-row">
+        <div v-if="can('admin', 'user', 'webapi')" @click="openTokenViewModal">
+          <FingerPrintIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
+        </div>
         <RouterLink
           v-if="can('admin', 'user', 'webapi')"
           :to="{ name: 'admin-user-webapi-permission', params: { id: webapi.id } }"
@@ -20,13 +23,57 @@
         </div>
       </div>
     </div>
+    <div class="flex flex-col p-2">
+      <div class="flex flex-row gap-2">
+        <p class="">erstellt:</p>
+        <p class="grow overflow-hidden">
+          {{
+            new Date(webapi.createdAt).toLocaleDateString("de-DE", {
+              day: "2-digit",
+              month: "2-digit",
+              year: "numeric",
+              minute: "2-digit",
+              hour: "2-digit",
+            })
+          }}
+        </p>
+      </div>
+      <div class="flex flex-row gap-2">
+        <p class="">letzte Verwendung:</p>
+        <p class="grow overflow-hidden">
+          {{
+            webapi.lastUsage
+              ? new Date(webapi.lastUsage).toLocaleDateString("de-DE", {
+                  day: "2-digit",
+                  month: "2-digit",
+                  year: "numeric",
+                  minute: "2-digit",
+                  hour: "2-digit",
+                })
+              : "---"
+          }}
+        </p>
+      </div>
+      <div v-if="webapi.expiry" class="flex flex-row gap-2">
+        <p class="">verwendbar bis:</p>
+        <p class="grow overflow-hidden">
+          {{
+            new Date(webapi.expiry).toLocaleDateString("de-DE", {
+              day: "2-digit",
+              month: "2-digit",
+              year: "numeric",
+            })
+          }}
+        </p>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { defineComponent, defineAsyncComponent, markRaw, type PropType } from "vue";
 import { mapState, mapActions } from "pinia";
-import { PencilIcon, WrenchScrewdriverIcon, TrashIcon } from "@heroicons/vue/24/outline";
+import { PencilIcon, WrenchScrewdriverIcon, TrashIcon, FingerPrintIcon } from "@heroicons/vue/24/outline";
 import type { WebapiViewModel } from "@/viewmodels/admin/user/webapi.models";
 import { RouterLink } from "vue-router";
 import { useAbilityStore } from "@/stores/ability";
@@ -43,6 +90,12 @@ export default defineComponent({
   },
   methods: {
     ...mapActions(useModalStore, ["openModal"]),
+    openTokenViewModal() {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/user/webapi/WebapiTokenModal.vue"))),
+        this.webapi.id
+      );
+    },
     openDeleteModal() {
       this.openModal(
         markRaw(defineAsyncComponent(() => import("@/components/admin/user/webapi/DeleteWebapiModal.vue"))),

src/components/admin/user/webapi/WebapiTokenModal.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="relative w-full md:max-w-md">
+    <div class="flex flex-col items-center">
+      <p class="text-xl font-medium">Webapi-Token</p>
+    </div>
+    <br />
+    <div class="flex flex-col gap-2">
+      <TextCopy :copyText="token" />
+    </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 { RouterLink } from "vue-router";
+import { useModalStore } from "@/stores/modal";
+import { useCalendarTypeStore } from "@/stores/admin/settings/calendarType";
+import type { CalendarTypeViewModel } from "@/viewmodels/admin/settings/calendarType.models";
+import { Listbox, ListboxButton, ListboxOptions, ListboxOption, ListboxLabel } from "@headlessui/vue";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
+import TextCopy from "@/components/TextCopy.vue";
+import { CalendarDaysIcon, InformationCircleIcon } from "@heroicons/vue/24/outline";
+import { host } from "@/serverCom";
+import { useWebapiStore } from "../../../../stores/admin/user/webapi";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      token: "" as string,
+    };
+  },
+  computed: {
+    ...mapState(useModalStore, ["data"]),
+  },
+  mounted() {
+    this.fetchWebapiTokenById(this.data)
+      .then((res) => {
+        this.token = res.data;
+      })
+      .catch(() => {});
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    ...mapActions(useWebapiStore, ["fetchWebapiTokenById"]),
+  },
+});
+</script>

src/stores/admin/user/webapi.ts

@@ -1,5 +1,9 @@
 import { defineStore } from "pinia";
-import type { WebapiViewModel } from "@/viewmodels/admin/user/webapi.models";
+import type {
+  CreateWebapiViewModel,
+  UpdateWebapiViewModel,
+  WebapiViewModel,
+} from "@/viewmodels/admin/user/webapi.models";
 import { http } from "@/serverCom";
 import type { PermissionObject } from "@/types/permissionTypes";
 import type { AxiosResponse } from "axios";
@@ -27,17 +31,16 @@ export const useWebapiStore = defineStore("webapi", {
     fetchWebapiById(id: number): Promise<AxiosResponse<any, any>> {
       return http.get(`/admin/webapi/${id}`);
     },
-    async createWebapi(webapi: string): Promise<AxiosResponse<any, any>> {
-      const result = await http.post("/admin/webapi", {
-        webapi: webapi,
-      });
+    fetchWebapiTokenById(id: number): Promise<AxiosResponse<any, any>> {
+      return http.get(`/admin/webapi/${id}/token`);
+    },
+    async createWebapi(webapi: CreateWebapiViewModel): Promise<AxiosResponse<any, any>> {
+      const result = await http.post("/admin/webapi", webapi);
       this.fetchWebapis();
       return result;
     },
-    async updateActiveWebapi(id: number, webapi: string): Promise<AxiosResponse<any, any>> {
-      const result = await http.patch(`/admin/webapi/${id}`, {
-        webapi: webapi,
-      });
+    async updateActiveWebapi(id: number, webapi: UpdateWebapiViewModel): Promise<AxiosResponse<any, any>> {
+      const result = await http.patch(`/admin/webapi/${id}`, webapi);
       this.fetchWebapis();
       return result;
     },

src/viewmodels/admin/user/webapi.models.ts

@@ -11,16 +11,10 @@ export interface WebapiViewModel {
 
 export interface CreateWebapiViewModel {
   title: string;
-  token: string;
   expiry?: Date;
 }
 
 export interface UpdateWebapiViewModel {
-  id: number;
   title: string;
   expiry?: Date;
 }
-
-export interface DeleteWebapiViewModel {
-  id: number;
-}

src/views/admin/user/webapi/WebapiEdit.vue

@@ -17,8 +17,12 @@
         @submit.prevent="triggerWebapiUpdate"
       >
         <div>
-          <label for="webapi">Bezeichnung</label>
-          <input type="text" id="webapi" required v-model="webapi.title" />
+          <label for="title">Bezeichnung</label>
+          <input type="text" id="title" required v-model="webapi.title" />
+        </div>
+        <div class="w-full">
+          <label for="expiry">Ablaufdatum (optional)</label>
+          <input type="date" id="expiry" step="1" v-model="webapi.expiry" />
         </div>
         <div class="flex flex-row justify-end gap-2">
           <button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
@@ -47,7 +51,8 @@ import FailureXMark from "@/components/FailureXMark.vue";
 import { RouterLink } from "vue-router";
 import cloneDeep from "lodash.clonedeep";
 import isEqual from "lodash.isequal";
-import type { WebapiViewModel } from "@/viewmodels/admin/user/webapi.models";
+import type { UpdateWebapiViewModel, WebapiViewModel } from "@/viewmodels/admin/user/webapi.models";
+import type { Update } from "vite/types/hmrPayload.js";
 </script>
 
 <script lang="ts">
@@ -96,8 +101,13 @@ export default defineComponent({
     triggerWebapiUpdate(e: any) {
       if (this.webapi == null) return;
       let formData = e.target.elements;
+      let updateWebapi: UpdateWebapiViewModel = {
+        title: formData.title.value,
+        expiry: formData.expiry.value,
+      };
+
       this.status = "loading";
-      this.updateActiveWebapi(this.webapi.id, formData.webapi.value)
+      this.updateActiveWebapi(this.webapi.id, updateWebapi)
         .then(() => {
           this.fetchItem();
           this.status = { status: "success" };