From 8f9eb24c23b5e789861f52080bbbf12d9807a9cc Mon Sep 17 00:00:00 2001
From: Mika <mika.bomm@outlook.com>
Date: Thu, 11 Jul 2024 15:05:18 +0200
Subject: [PATCH] web: fix dates on website

---
 web/src/components/CategoryContainer.vue |  35 +++----
 web/src/components/HeaderBar.vue         |  60 ++++++-----
 web/src/components/ListViewElement.vue   | 123 ++++++++++-------------
 web/src/components/MainPage.vue          |   1 +
 web/src/types.ts                         |   6 +-
 5 files changed, 108 insertions(+), 117 deletions(-)

diff --git a/web/src/components/CategoryContainer.vue b/web/src/components/CategoryContainer.vue
index 2149374..421f76f 100644
--- a/web/src/components/CategoryContainer.vue
+++ b/web/src/components/CategoryContainer.vue
@@ -5,9 +5,9 @@
       <ListViewElement
         :licenseName="license.name"
         :licenseKey="license.key"
-        startDate="license.start"
-        endDate="license.end"
-        :amount=license.amount
+        :startDate="license.start ? new Date(license.start) : null"
+        :endDate="license.end ? new Date(license.end) : null"
+        :amount="license.amount"
         notes="license.notes"
       />
     </li>
@@ -21,32 +21,21 @@
       notes=""
     /> -->
   </div>
-
 </template>
 
 <script setup lang="ts">
-  import ListViewElement from './ListViewElement.vue'
-
-  interface License {
-  name: string;
-  id: string;
-  start?: Date,
-  end?: Date,
-  key: string,
-  amount?: number,
-}
-
-  const props = defineProps<{ licenseGroupName: string, licenses: License[]}>()
+import ListViewElement from "./ListViewElement.vue";
+import { License } from "@/types";
 
+const props = defineProps<{ licenseGroupName: string; licenses: License[] }>();
 </script>
 
-
 <style scoped>
-  .root {
-    margin-top: 10px;
-  }
+.root {
+  margin-top: 10px;
+}
 
-  li {
-    list-style-type: none;
-  }
+li {
+  list-style-type: none;
+}
 </style>
diff --git a/web/src/components/HeaderBar.vue b/web/src/components/HeaderBar.vue
index 44fd68d..1cca1df 100644
--- a/web/src/components/HeaderBar.vue
+++ b/web/src/components/HeaderBar.vue
@@ -13,7 +13,7 @@
         </v-btn>
         <v-dialog v-model="group" width="600" persistent>
           <v-card max-width="600">
-            <v-form @submit.prevent="submit">
+            <v-form @submit.prevent="submitGroup">
               <v-card-title>
                 <span class="headline">Add Group</span>
               </v-card-title>
@@ -24,7 +24,7 @@
                 <div>
                   <v-text-field
                     label="Group Name *"
-                    v-model="groupLicenseName"
+                    v-model="groupGroupName"
                     variant="outlined"
                     required
                     clearable
@@ -189,25 +189,17 @@
 import { store } from "@/store";
 import { SubmitEventPromise } from "vuetify";
 import { ref } from "vue";
-import { Plus, LogOut, Pencil, FolderPlus } from "lucide-vue-next";
+import { Plus, LogOut, FolderPlus } from "lucide-vue-next";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/vue-query";
-import axios from "axios";
 import { axiosInstance } from "@/client";
-import { LicenseGroup, CreateLicenseDto } from "@/types";
+import { LicenseGroup, CreateLicenseDto, CreateGroupDto } from "@/types";
 
 const queryClient = useQueryClient();
 
 const { data } = useQuery({
   queryKey: ["licenses"],
   queryFn: async () => {
-    const res = await axios.get<LicenseGroup[]>(
-      import.meta.env.VITE_BACKEND_URL + "/licenses",
-      {
-        headers: {
-          Authorization: `Bearer ${store.token}`,
-        },
-      }
-    );
+    const res = await axiosInstance.get<LicenseGroup[]>("/licenses");
     return res.data;
   },
   select: (data) => {
@@ -220,7 +212,7 @@ const { data } = useQuery({
   },
 });
 
-const { isPending, mutate } = useMutation({
+const { mutate: licenseMutate } = useMutation({
   mutationFn: async (newLicense: CreateLicenseDto) => {
     await axiosInstance.post("/licenses", newLicense);
   },
@@ -233,6 +225,19 @@ const { isPending, mutate } = useMutation({
   },
 });
 
+const { mutate: groupsMutate } = useMutation({
+  mutationFn: async (newGroup: CreateGroupDto) => {
+    await axiosInstance.post("/groups", newGroup);
+  },
+  onError: (error) => {
+    snackbar.value = true;
+  },
+  onSuccess: () => {
+    queryClient.invalidateQueries({ queryKey: ["licenses"] });
+    group.value = false;
+  },
+});
+
 function handlelogout() {
   store.setToken(null);
 }
@@ -245,12 +250,25 @@ async function submit(event: SubmitEventPromise) {
       group_id: addLicenseGroup.value,
       amount: addAmount.value,
       key: addLicenseKey.value,
-      start: addStartDate.value,
-      stop: addStopDate.value,
+      start: addStartDate.value ?? null,
+      end: addStopDate.value ?? null,
       notes: addNotes.value,
     };
     console.log(data);
-    mutate(data);
+    licenseMutate(data);
+  } else {
+    console.log("Invalid");
+  }
+}
+
+async function submitGroup(event: SubmitEventPromise) {
+  const result = await event;
+  if (result.valid) {
+    const groupsData = {
+      name: groupGroupName.value,
+    };
+    console.log(groupsData);
+    groupsMutate(groupsData);
   } else {
     console.log("Invalid");
   }
@@ -263,7 +281,7 @@ const snackbar = ref(false);
 //
 
 const group = ref(false); // Dialog for Group
-const groupLicenseName = ref<string>("");
+const groupGroupName = ref<string>("");
 
 // Rules for Group Dialog
 const licenseGroupRules = [
@@ -312,12 +330,6 @@ const addNotes = ref<string | undefined>("");
 // Date Picker
 const addStartDate = ref<Date | undefined>();
 const addStopDate = ref<Date | undefined>();
-
-//
-//  EDIT SECTION
-//
-
-const edit = ref(false);
 </script>
 
 <style scoped>
diff --git a/web/src/components/ListViewElement.vue b/web/src/components/ListViewElement.vue
index 243336a..7f610b8 100644
--- a/web/src/components/ListViewElement.vue
+++ b/web/src/components/ListViewElement.vue
@@ -1,10 +1,5 @@
 <template>
-  <v-sheet
-    elevation="4"
-    width="96vw"
-    rounded="lg"
-    class="mt-3"
-  >
+  <v-sheet elevation="4" width="96vw" rounded="lg" class="mt-3">
     <v-expansion-panels>
       <v-expansion-panel>
         <v-expansion-panel-title>
@@ -25,17 +20,12 @@
             style="align-items: center"
           >
             <CalendarCheck />
-            <span
-              v-if="
-                props.startDate == null ||
-                props.startDate == undefined ||
-                props.startDate.length == 0
-              "
-            >
-              Verfügbar
-            </span>
-            <span v-else>
-              {{ props.startDate }}
+            <span>
+              {{
+                props.startDate
+                  ? props.startDate.toLocaleDateString()
+                  : "Verfügbar"
+              }}
             </span>
           </div>
 
@@ -44,17 +34,12 @@
             style="align-items: center"
           >
             <CalendarX />
-            <span
-              v-if="
-                props.endDate == null ||
-                props.endDate == undefined ||
-                props.endDate.length == 0
-              "
-            >
-              Ewig Verfügbar
-            </span>
-            <span v-else>
-              {{ props.endDate }}
+            <span>
+              {{
+                props.endDate
+                  ? props.endDate.toLocaleDateString()
+                  : "Ewig Verfügbar"
+              }}
             </span>
           </div>
 
@@ -78,38 +63,33 @@
         </v-expansion-panel-title>
         <v-expansion-panel-text>
           Notes:
-            <v-row
-              class="flex-nowrap"
-              no-gutters
+          <v-row class="flex-nowrap" no-gutters>
+            <v-col
+              class="flex-grow-1 flex-shrink-0 overflow-x-auto border-e-md"
+              cols="10"
             >
-              <v-col
-                class="flex-grow-1 align-self-end overflow-x-auto border-e-md"
-                cols="10"
-              >
-                {{ props.notes }}
-         
-              </v-col>
-
-                <v-col
-                  class=""
-                  cols="2"
-                  align="end"
-                >
-                <!--              -->
-                <!-- EDIT SECTION -->
-                <!--              -->
-                <v-btn class="mr-3" flat size="small">
-                  <Pencil />
-                </v-btn>
-                <!--                 -->
-                <!--   DELETE BTN    -->
-                <!--                 -->
-                <v-btn class="mr-3" flat size="small" color="red" variant="text">
-                  <Trash />
-                </v-btn>
-              </v-col>
-            </v-row>
+              {{ props.notes }}
+            </v-col>
 
+            <v-col
+              class="flex-grow-0 flex-shrink-1 overflow-x-auto"
+              cols="2"
+              align="end"
+            >
+              <!--              -->
+              <!-- EDIT SECTION -->
+              <!--              -->
+              <v-btn class="mr-3" flat size="small">
+                <Pencil />
+              </v-btn>
+              <!--                 -->
+              <!--   DELETE BTN    -->
+              <!--                 -->
+              <v-btn class="mr-3" flat size="small" color="red" variant="text">
+                <Trash />
+              </v-btn>
+            </v-col>
+          </v-row>
         </v-expansion-panel-text>
       </v-expansion-panel>
     </v-expansion-panels>
@@ -117,18 +97,25 @@
 </template>
 
 <script setup lang="ts">
-import { Infinity, KeyRound, CalendarCheck, CalendarX, Pencil, Trash } from "lucide-vue-next";
+import {
+  Infinity,
+  KeyRound,
+  CalendarCheck,
+  CalendarX,
+  Pencil,
+  Trash,
+  Power,
+} from "lucide-vue-next";
 import { ref } from "vue";
 
-const props = defineProps({
-  licenseName: String,
-  licenseKey: String,
-  startDate: String,
-  endDate: String,
-  amount: Number,
-  notes: String,
-});
-
+const props = defineProps<{
+  licenseName: string;
+  licenseKey: string;
+  startDate: Date | null;
+  endDate: Date | null;
+  amount?: number;
+  notes?: string;
+}>();
 //
 //  EDIT SECTION
 //
diff --git a/web/src/components/MainPage.vue b/web/src/components/MainPage.vue
index 63f3688..37932ca 100644
--- a/web/src/components/MainPage.vue
+++ b/web/src/components/MainPage.vue
@@ -27,6 +27,7 @@ const { isPending, isError, data, error } = useQuery({
   queryKey: ["licenses"],
   queryFn: async () => {
     const res = await axiosInstance.get<LicenseGroup[]>("/licenses");
+    console.log(res.data);
     return res.data;
   },
 });
diff --git a/web/src/types.ts b/web/src/types.ts
index d93bcec..b97a9e5 100644
--- a/web/src/types.ts
+++ b/web/src/types.ts
@@ -7,10 +7,12 @@ export interface LicenseGroup {
 export interface License {
   name: string;
   id: string;
-  start?: Date;
-  end?: Date;
+  start?: string;
+  end?: string;
   key: string;
   amount?: number;
 }
 
 export type CreateLicenseDto = Omit<License, "id"> & { group_id: string };
+
+export type CreateGroupDto = Omit<LicenseGroup, "id" | "licenses">;