From c0a84f9bc86b6b9ece93634483bdff01dd211f3d Mon Sep 17 00:00:00 2001
From: Mika <mika.bomm@outlook.com>
Date: Thu, 11 Jul 2024 23:44:41 +0200
Subject: [PATCH] web: correctly pass user to component

---
 .../NavBarIcons/UsersDeleteActions.vue        | 28 ++++++++++++++++++-
 .../components/NavBarIcons/UsersDialog.vue    |  2 +-
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/web/src/components/NavBarIcons/UsersDeleteActions.vue b/web/src/components/NavBarIcons/UsersDeleteActions.vue
index 54b9bb6..7471846 100644
--- a/web/src/components/NavBarIcons/UsersDeleteActions.vue
+++ b/web/src/components/NavBarIcons/UsersDeleteActions.vue
@@ -25,8 +25,8 @@
             <v-btn
               class="ms-auto"
               text="Confirm Delete"
-              type="submit"
               color="red darken-1"
+              @click="deleteMutate()"
             ></v-btn>
           </v-col>
         </v-row>
@@ -36,8 +36,34 @@
 </template>
 
 <script setup lang="ts">
+import { useQuery, useMutation, useQueryClient } from "@tanstack/vue-query";
+import { axiosInstance } from "@/client";
+import { SubmitEventPromise } from "vuetify";
+import { LicenseGroup, UpdateLicenseDto, License } from "@/types";
+import { User } from "@/types";
 import { ref } from "vue";
 
+const { user } = defineProps<{ user: User }>();
+
+const queryClient = useQueryClient();
+
+const gyros = user.id;
+
+const { mutate: deleteMutate } = useMutation({
+  mutationFn: async () => {
+    console.log(gyros);
+    console.log(user.id);
+    await axiosInstance.delete(`/users/${gyros}`);
+  },
+  onError: (error) => {
+    console.log(error);
+  },
+  onSuccess: () => {
+    queryClient.invalidateQueries({ queryKey: ["users"] });
+    deleteDialog.value = false;
+  },
+});
+
 const deleteDialog = ref(false);
 </script>
 
diff --git a/web/src/components/NavBarIcons/UsersDialog.vue b/web/src/components/NavBarIcons/UsersDialog.vue
index 315ccf9..d7d0dcb 100644
--- a/web/src/components/NavBarIcons/UsersDialog.vue
+++ b/web/src/components/NavBarIcons/UsersDialog.vue
@@ -20,7 +20,7 @@
         >
           <template v-slot:item.actions="{ item }">
             <UsersEditAction :user="item" />
-            <UsersDeleteAction />
+            <UsersDeleteAction :user="item" />
           </template>
         </v-data-table>
         <v-divider class="border-opacity-50 mt-5" :thickness="2"></v-divider>