web: functioning delete button

web/components.d.ts

@@ -9,6 +9,8 @@ declare module 'vue' {
   export interface GlobalComponents {
     CategoryContainer: typeof import('./src/components/CategoryContainer.vue')['default']
     Clipboard: typeof import('./src/components/Clipboard.vue')['default']
+    copy: typeof import('./src/components/UpdateDialog copy.vue')['default']
+    DeleteDialog: typeof import('./src/components/DeleteDialog.vue')['default']
     HeaderBar: typeof import('./src/components/HeaderBar.vue')['default']
     ListViewElement: typeof import('./src/components/ListViewElement.vue')['default']
     LoginPage: typeof import('./src/components/loginPage.vue')['default']

web/src/components/DeleteDialog.vue

@@ -0,0 +1,81 @@
+<template>
+  <v-btn
+    class="mr-3"
+    flat
+    size="small"
+    color="red"
+    variant="text"
+    @click="deleteDialog = true"
+  >
+    <Trash />
+  </v-btn>
+  <v-dialog v-model="deleteDialog" width="600" persistent>
+    <v-card max-width="600">
+      <v-card-title>
+        <span class="headline">Delete License</span>
+      </v-card-title>
+      <v-card-subtitle>
+        <span>Delete a License inside the database</span>
+      </v-card-subtitle>
+      <v-card-text>
+        <h4>This action is irreversible!</h4>
+      </v-card-text>
+      <v-card-actions>
+        <v-row>
+          <v-col cols="8" align="right" no-gutters>
+            <v-btn
+              class="ms-auto"
+              text="Cancel"
+              color="blue darken-1"
+              @click="deleteDialog = false"
+            ></v-btn>
+          </v-col>
+          <v-col>
+            <v-btn
+              class="ms-auto"
+              text="Confirm Delete"
+              type="submit"
+              color="red darken-1"
+              @click="deleteMutate"
+            ></v-btn>
+          </v-col>
+        </v-row>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { Trash } from "lucide-vue-next";
+import { useMutation, useQueryClient } from "@tanstack/vue-query";
+import { axiosInstance } from "@/client";
+import { License } from "@/types";
+import { ref } from "vue";
+
+const { license } = defineProps<{
+  license: License;
+}>();
+
+//  EDIT SECTION
+
+const deleteDialog = ref(false);
+
+const queryClient = useQueryClient();
+
+const id = license.id;
+
+const { mutate: deleteMutate } = useMutation({
+  mutationFn: async () => {
+    await axiosInstance.delete(`/licenses/${id}`);
+  },
+  onError: (error) => {
+    console.log(error);
+  },
+  onSuccess: () => {
+    queryClient.invalidateQueries({ queryKey: ["licenses"] });
+    deleteDialog.value = false;
+  },
+});
+</script>
+
+<style scoped></style>

web/src/components/ListViewElement.vue

@@ -79,9 +79,7 @@
               <!--                 -->
               <!--   DELETE BTN    -->
               <!--                 -->
-              <v-btn class="mr-3" flat size="small" color="red" variant="text">
-                <Trash />
-              </v-btn>
+              <DeleteDialog :license="license" />
             </div>
           </div>
         </v-expansion-panel-text>
@@ -92,14 +90,9 @@
 
 <script setup lang="ts">
 import { License } from "@/types";
-import {
-  Infinity,
-  KeyRound,
-  CalendarCheck,
-  CalendarX,
-  Trash,
-} from "lucide-vue-next";
+import { Infinity, KeyRound, CalendarCheck, CalendarX } from "lucide-vue-next";
 import UpdateDialog from "./UpdateDialog.vue";
+import DeleteDialog from "./DeleteDialog.vue";
 
 const { license } = defineProps<{
   license: License;

web/src/components/UpdateDialog.vue

@@ -6,10 +6,10 @@
     <v-card max-width="600">
       <v-form @submit.prevent="submitEdit">
         <v-card-title>
-          <span class="headline">Add License</span>
+          <span class="headline">Edit License</span>
         </v-card-title>
         <v-card-subtitle>
-          <span> Add an extra License to the database</span>
+          <span>Edit a License inside the database</span>
         </v-card-subtitle>
         <v-card-text>
           <div>
@@ -99,7 +99,7 @@
             <v-col>
               <v-btn
                 class="ms-auto"
-                text="Add"
+                text="Update"
                 type="submit"
                 color="blue darken-1"
               ></v-btn>
@@ -138,14 +138,6 @@ const editStopDate = ref<Date | 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;
@@ -166,7 +158,7 @@ async function submitEdit(event: SubmitEventPromise) {
         ? editStartDate.value.toISOString()
         : undefined,
       end: editStopDate.value ? editStopDate.value.toISOString() : undefined,
-      notes: editNotes.value,
+      note: editNotes.value,
     };
     console.log(editData);
     editMutate(editData);