From 1c5c30be6e74459ca19a04aabdaa2091f4f99669 Mon Sep 17 00:00:00 2001
From: Mika <mika.bomm@outlook.com>
Date: Thu, 11 Jul 2024 21:07:31 +0200
Subject: [PATCH] web: improve struckture

---
 web/components.d.ts                      |   1 +
 web/src/components/CategoryContainer.vue |  10 +-
 web/src/components/ListViewElement.vue   | 226 ++---------------------
 web/src/components/UpdateDialog.vue      | 212 +++++++++++++++++++++
 web/src/types.ts                         |   1 +
 5 files changed, 231 insertions(+), 219 deletions(-)
 create mode 100644 web/src/components/UpdateDialog.vue

diff --git a/web/components.d.ts b/web/components.d.ts
index 6b4427f..f34dcd4 100644
--- a/web/components.d.ts
+++ b/web/components.d.ts
@@ -13,6 +13,7 @@ declare module 'vue' {
     ListViewElement: typeof import('./src/components/ListViewElement.vue')['default']
     LoginPage: typeof import('./src/components/loginPage.vue')['default']
     MainPage: typeof import('./src/components/MainPage.vue')['default']
+    UpdateDialog: typeof import('./src/components/UpdateDialog.vue')['default']
     UsersDialog: typeof import('./src/components/NavBarIcons/UsersDialog.vue')['default']
   }
 }
diff --git a/web/src/components/CategoryContainer.vue b/web/src/components/CategoryContainer.vue
index 9b7c1d8..7dc5064 100644
--- a/web/src/components/CategoryContainer.vue
+++ b/web/src/components/CategoryContainer.vue
@@ -2,15 +2,7 @@
   <div class="mt-3">
     <h2>{{ props.licenseGroupName }}:</h2>
     <li v-for="license in licenses" :key="license.id">
-      <ListViewElement
-        :id="license.id"
-        :licenseName="license.name"
-        :licenseKey="license.key"
-        :startDate="license.start ? new Date(license.start) : null"
-        :endDate="license.end ? new Date(license.end) : null"
-        :amount="license.amount"
-        :notes="license.note"
-      />
+      <ListViewElement :license="license" />
     </li>
   </div>
 </template>
diff --git a/web/src/components/ListViewElement.vue b/web/src/components/ListViewElement.vue
index 487eb9b..1c32a65 100644
--- a/web/src/components/ListViewElement.vue
+++ b/web/src/components/ListViewElement.vue
@@ -4,7 +4,7 @@
       <v-expansion-panel>
         <v-expansion-panel-title>
           <div class="mr-3">
-            {{ props.licenseName }}
+            {{ license.name }}
           </div>
 
           <div
@@ -12,7 +12,7 @@
             style="align-items: center"
           >
             <KeyRound class="mr-1" />
-            {{ props.licenseKey }}
+            {{ license.key }}
           </div>
 
           <div
@@ -22,8 +22,8 @@
             <CalendarCheck />
             <span>
               {{
-                props.startDate
-                  ? props.startDate.toLocaleDateString()
+                license.start
+                  ? new Date(license.start).toLocaleDateString()
                   : "Indefinitely"
               }}
             </span>
@@ -36,8 +36,8 @@
             <CalendarX />
             <span>
               {{
-                props.endDate
-                  ? props.endDate.toLocaleDateString()
+                license.end
+                  ? new Date(license.end).toLocaleDateString()
                   : "Indefinitely"
               }}
             </span>
@@ -53,11 +53,11 @@
               class="logo mr-1"
               width="24"
             />
-            <span v-if="props.amount == null || props.amount == undefined">
+            <span v-if="license.amount == null || license.amount == undefined">
               <Infinity />
             </span>
             <span v-else>
-              {{ props.amount }}
+              {{ license.amount }}
             </span>
           </div>
         </v-expansion-panel-title>
@@ -68,126 +68,14 @@
               class="flex-grow-1 overflow-x-auto border-e-md align-self-end"
               cols="10"
             >
-              {{ props.notes }}
+              {{ license.note }}
             </div>
 
             <div align="end">
               <!--              -->
               <!-- EDIT SECTION -->
               <!--              -->
-              <v-btn class="mr-3" @click="edit" flat size="small">
-                <Pencil />
-              </v-btn>
-              <v-dialog v-model="edit" width="600" persistent>
-                <v-card max-width="600">
-                  <v-form @submit.prevent="submitEdit">
-                    <v-card-title>
-                      <span class="headline">Add License</span>
-                    </v-card-title>
-                    <v-card-subtitle>
-                      <span> Add an extra License to the database</span>
-                    </v-card-subtitle>
-                    <v-card-text>
-                      <div>
-                        <v-text-field
-                          label="License Name *"
-                          v-model="editLicenseName"
-                          variant="outlined"
-                          required
-                          clearable
-                          :rules="editNameRules"
-                          class="mb-3"
-                        ></v-text-field>
-                        <v-text-field
-                          label="License Key *"
-                          v-model="editLicenseKey"
-                          variant="outlined"
-                          required
-                          clearable
-                          :rules="editNameRules"
-                          class="mb-3"
-                        ></v-text-field>
-                        <v-autocomplete
-                          clearable
-                          label="Select Group *"
-                          :items="Data"
-                          variant="outlined"
-                          :rules="editNameRules"
-                          class="mb-1"
-                          v-model="editLicenseGroup"
-                        ></v-autocomplete>
-                        <!-- Divider maybe remove -->
-                        <v-divider
-                          class="border-opacity-50"
-                          :thickness="2"
-                        ></v-divider>
-                        <div>
-                          <div class="mb-3 mt-3">
-                            <v-date-input
-                              label="Start Date (optional)"
-                              variant="outlined"
-                              prepend-icon=""
-                              prepend-inner-icon="mdi-calendar-check"
-                              clearable
-                              v-model="editStartDate"
-                              hide-details
-                            ></v-date-input>
-                          </div>
-                          <div class="mb-6">
-                            <v-date-input
-                              label="Stop Date (optional)"
-                              variant="outlined"
-                              prepend-icon=""
-                              prepend-inner-icon="mdi-calendar-remove"
-                              clearable
-                              v-model="editStopDate"
-                              hide-details
-                            ></v-date-input>
-                          </div>
-                        </div>
-                        <v-number-input
-                          label="Amount (optional)"
-                          users
-                          variant="outlined"
-                          clearable
-                          :min="0"
-                          v-model="editAmount"
-                        >
-                        </v-number-input>
-                        <v-text-field
-                          label="Notes (optional)"
-                          v-model="editNotes"
-                          variant="outlined"
-                          clearable
-                        ></v-text-field>
-                        <span class="dialogNote">
-                          all fields marked with * are required
-                        </span>
-                      </div>
-                    </v-card-text>
-                    <v-card-actions>
-                      <v-row>
-                        <v-col cols="10" align="right" no-gutters>
-                          <v-btn
-                            class="ms-auto"
-                            text="Cancel"
-                            color="blue darken-1"
-                            @click="edit = false"
-                          ></v-btn>
-                        </v-col>
-                        <v-col>
-                          <v-btn
-                            class="ms-auto"
-                            text="Add"
-                            type="submit"
-                            color="blue darken-1"
-                          ></v-btn>
-                        </v-col>
-                      </v-row>
-                    </v-card-actions>
-                  </v-form>
-                </v-card>
-              </v-dialog>
+              <UpdateDialog :license="license" />
               <!--                 -->
               <!--   DELETE BTN    -->
               <!--                 -->
@@ -203,108 +91,26 @@
 </template>
 
 <script setup lang="ts">
+import { License } from "@/types";
 import {
   Infinity,
   KeyRound,
   CalendarCheck,
   CalendarX,
-  Pencil,
   Trash,
 } from "lucide-vue-next";
-import { ref } from "vue";
-import { useQuery, useMutation, useQueryClient } from "@tanstack/vue-query";
-import { axiosInstance } from "@/client";
-import { SubmitEventPromise } from "vuetify";
-import { LicenseGroup, UpdateLicenseDto } from "@/types";
+import UpdateDialog from "./UpdateDialog.vue";
 
-const props = defineProps<{
-  id: string;
+const { license } = defineProps<{
+  license: License;
+  /*id: string;
   licenseName: string;
   licenseKey: string;
   startDate: Date | null;
   endDate: Date | null;
   amount?: number;
-  notes?: string;
+  notes?: string;*/
 }>();
-
-//  EDIT SECTION
-
-const edit = ref(false);
-const editLicenseName = ref("");
-const editLicenseGroup = ref();
-const editAmount = ref();
-const editLicenseKey = ref("");
-const editStartDate = ref<Date | null>();
-const editStopDate = ref<Date | null>();
-const editNotes = ref<string | undefined>("");
-
-//Give initial values to the fields
-editLicenseName.value = props.licenseName;
-editLicenseKey.value = props.licenseKey;
-editAmount.value = props.amount;
-editStartDate.value = props.startDate;
-editStopDate.value = props.endDate;
-editNotes.value = props.notes;
-
-const editNameRules = [
-  (value: string) => {
-    if (value) return true;
-
-    return "YOU MUST ENTER (A GROUP NAME)";
-  },
-];
-
-async function submitEdit(event: SubmitEventPromise) {
-  const result = await event;
-  if (result.valid) {
-    const editData = {
-      name: editLicenseName.value,
-      group_id: editLicenseGroup.value,
-      amount: editAmount.value,
-      key: editLicenseKey.value,
-      start: editStartDate.value ?? null,
-      end: editStopDate.value ?? null,
-      notes: editNotes.value,
-    };
-    console.log(editData);
-    editMutate(editData);
-  } else {
-    console.log("Invalid");
-  }
-}
-
-const queryClient = useQueryClient();
-
-const gyros = props.id;
-
-const { mutate: editMutate } = useMutation({
-  mutationFn: async (newEdit: UpdateLicenseDto) => {
-    await axiosInstance.put(`/licenses/${gyros}`, newEdit);
-  },
-  onError: (error) => {
-    console.log(error);
-  },
-  onSuccess: () => {
-    queryClient.invalidateQueries({ queryKey: ["licenses"] });
-    edit.value = false;
-  },
-});
-
-const { data } = useQuery({
-  queryKey: ["licenses"],
-  queryFn: async () => {
-    const res = await axiosInstance.get<LicenseGroup[]>("/licenses");
-    return res.data;
-  },
-  select: (data) => {
-    return data.map((group) => {
-      return {
-        title: group.name,
-        value: group.id,
-      };
-    });
-  },
-});
 </script>
 
 <style scoped>
diff --git a/web/src/components/UpdateDialog.vue b/web/src/components/UpdateDialog.vue
new file mode 100644
index 0000000..d42a2e7
--- /dev/null
+++ b/web/src/components/UpdateDialog.vue
@@ -0,0 +1,212 @@
+<template>
+  <v-btn class="mr-3" @click="edit = true" flat size="small">
+    <Pencil />
+  </v-btn>
+  <v-dialog v-model="edit" width="600" persistent>
+    <v-card max-width="600">
+      <v-form @submit.prevent="submitEdit">
+        <v-card-title>
+          <span class="headline">Add License</span>
+        </v-card-title>
+        <v-card-subtitle>
+          <span> Add an extra License to the database</span>
+        </v-card-subtitle>
+        <v-card-text>
+          <div>
+            <v-text-field
+              label="License Name *"
+              v-model="editLicenseName"
+              variant="outlined"
+              required
+              clearable
+              :rules="editNameRules"
+              class="mb-3"
+            ></v-text-field>
+            <v-text-field
+              label="License Key *"
+              v-model="editLicenseKey"
+              variant="outlined"
+              required
+              clearable
+              :rules="editNameRules"
+              class="mb-3"
+            ></v-text-field>
+            <v-autocomplete
+              clearable
+              label="Select Group *"
+              :items="data"
+              variant="outlined"
+              :rules="editNameRules"
+              class="mb-1"
+              v-model="editLicenseGroup"
+            ></v-autocomplete>
+            <!-- Divider maybe remove -->
+            <v-divider class="border-opacity-50" :thickness="2"></v-divider>
+            <div>
+              <div class="mb-3 mt-3">
+                <v-date-input
+                  label="Start Date (optional)"
+                  variant="outlined"
+                  prepend-icon=""
+                  prepend-inner-icon="mdi-calendar-check"
+                  clearable
+                  v-model="editStartDate"
+                  hide-details
+                ></v-date-input>
+              </div>
+              <div class="mb-6">
+                <v-date-input
+                  label="Stop Date (optional)"
+                  variant="outlined"
+                  prepend-icon=""
+                  prepend-inner-icon="mdi-calendar-remove"
+                  clearable
+                  v-model="editStopDate"
+                  hide-details
+                ></v-date-input>
+              </div>
+            </div>
+            <v-number-input
+              label="Amount (optional)"
+              users
+              variant="outlined"
+              clearable
+              :min="0"
+              v-model="editAmount"
+            >
+            </v-number-input>
+            <v-text-field
+              label="Notes (optional)"
+              v-model="editNotes"
+              variant="outlined"
+              clearable
+            ></v-text-field>
+            <span class="dialogNote">
+              all fields marked with * are required
+            </span>
+          </div>
+        </v-card-text>
+        <v-card-actions>
+          <v-row>
+            <v-col cols="10" align="right" no-gutters>
+              <v-btn
+                class="ms-auto"
+                text="Cancel"
+                color="blue darken-1"
+                @click="edit = false"
+              ></v-btn>
+            </v-col>
+            <v-col>
+              <v-btn
+                class="ms-auto"
+                text="Add"
+                type="submit"
+                color="blue darken-1"
+              ></v-btn>
+            </v-col>
+          </v-row>
+        </v-card-actions>
+      </v-form>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { Pencil } from "lucide-vue-next";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/vue-query";
+import { axiosInstance } from "@/client";
+import { SubmitEventPromise } from "vuetify";
+import { LicenseGroup, UpdateLicenseDto, License } from "@/types";
+import { ref } from "vue";
+
+const { license } = defineProps<{
+  license: License;
+}>();
+
+//  EDIT SECTION
+
+const edit = ref(false);
+const editLicenseName = ref(license.name);
+const editLicenseGroup = ref(license.group_id);
+const editAmount = ref(license.amount);
+const editLicenseKey = ref(license.key);
+const editStartDate = ref<Date | null>(
+  license.start ? new Date(license.start) : null
+);
+const editStopDate = ref<Date | null>(
+  license.end ? new Date(license.end) : null
+);
+const editNotes = ref<string | undefined>(license.note);
+
+//Give initial values to the fields
+/*editLicenseName.value = props.licenseName;
+editLicenseKey.value = props.licenseKey;
+editAmount.value = props.amount;
+editStartDate.value = props.startDate;
+editStopDate.value = props.endDate;
+editNotes.value = props.notes;*/
+
+const editNameRules = [
+  (value: string) => {
+    if (value) return true;
+
+    return "YOU MUST ENTER (A GROUP NAME)";
+  },
+];
+
+async function submitEdit(event: SubmitEventPromise) {
+  const result = await event;
+  if (result.valid) {
+    const editData = {
+      name: editLicenseName.value,
+      group_id: editLicenseGroup.value,
+      amount: editAmount.value,
+      key: editLicenseKey.value,
+      start: editStartDate.value
+        ? editStartDate.value.toISOString()
+        : undefined,
+      end: editStopDate.value ? editStopDate.value.toISOString() : undefined,
+      notes: editNotes.value,
+    };
+    console.log(editData);
+    editMutate(editData);
+  } else {
+    console.log("Invalid");
+  }
+}
+
+const queryClient = useQueryClient();
+
+const gyros = license.id;
+
+const { mutate: editMutate } = useMutation({
+  mutationFn: async (newEdit: UpdateLicenseDto) => {
+    await axiosInstance.put(`/licenses/${gyros}`, newEdit);
+  },
+  onError: (error) => {
+    console.log(error);
+  },
+  onSuccess: () => {
+    queryClient.invalidateQueries({ queryKey: ["licenses"] });
+    edit.value = false;
+  },
+});
+
+const { data } = useQuery({
+  queryKey: ["licenses"],
+  queryFn: async () => {
+    const res = await axiosInstance.get<LicenseGroup[]>("/licenses");
+    return res.data;
+  },
+  select: (data) => {
+    return data.map((group) => {
+      return {
+        title: group.name,
+        value: group.id,
+      };
+    });
+  },
+});
+</script>
+
+<style scoped></style>
diff --git a/web/src/types.ts b/web/src/types.ts
index 8df5c95..11e2599 100644
--- a/web/src/types.ts
+++ b/web/src/types.ts
@@ -12,6 +12,7 @@ export interface License {
   key: string;
   amount?: number;
   note?: string;
+  group_id: string;
 }
 
 export interface CreateLicenseDto {