web: correctly pass user to component

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>
 

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>