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,34 +36,8 @@
 </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

@@ -13,14 +13,14 @@
       <v-card-text>
         <v-data-table
           :headers="headers"
-          :items="data ?? []"
+          :items="items"
           :items-per-page="10"
           item-key="name"
           class="elevation-5"
         >
           <template v-slot:item.actions="{ item }">
-            <UsersEditAction :user="item" />
+            <UsersEditAction />
-            <UsersDeleteAction :user="item" />
+            <UsersDeleteAction />
           </template>
         </v-data-table>
         <v-divider class="border-opacity-50 mt-5" :thickness="2"></v-divider>
@@ -39,27 +39,17 @@ import UsersDeleteAction from "./UsersDeleteActions.vue";
 import UsersEditAction from "./UsersEditActions.vue";
 import { Users } from "lucide-vue-next";
 import { defineComponent, ref, computed, watch } from "vue";
-import { useQuery, useMutation, useQueryClient } from "@tanstack/vue-query";
-import { axiosInstance } from "@/client";
-import { User } from "@/types";
 
 // Data Table values
 const headers = ref([
   { title: "Name", value: "name" },
   { title: "Email", value: "email" },
-  { title: "isAdmin", value: "admin" },
   { title: "Actions", value: "actions", sortable: false },
 ]);
 
-const queryClient = useQueryClient();
+const items = ref([
-
+  { name: "John Doe", email: "test@john.doe", action: "Here CRUD" },
-const { data } = useQuery({
+]);
-  queryKey: ["users"],
-  queryFn: async () => {
-    const res = await axiosInstance.get<User[]>("/users");
-    return res.data;
-  },
-});
 
 // Dialog open state
 const users = ref(false);

web/src/components/NavBarIcons/UsersEditActions.vue

@@ -29,12 +29,6 @@
               :rules="editUserEmailRules"
               class="mb-3"
             ></v-text-field>
-            <v-switch
-              label="Admin"
-              inset
-              v-model="editUserAdmin"
-              color="primary"
-            ></v-switch>
           </div>
         </v-card-text>
         <v-card-actions>
@@ -67,9 +61,7 @@ import { ref } from "vue";
 import { SubmitEventPromise } from "vuetify";
 import { axiosInstance } from "@/client";
 import { useMutation, useQueryClient } from "@tanstack/vue-query";
-import { CreateLicenseDto, User } from "@/types";
+import { CreateLicenseDto } from "@/types";
-
-const { user } = defineProps<{ user: User }>();
 
 const queryClient = useQueryClient();
 
@@ -112,9 +104,8 @@ const { mutate: userMutate } = useMutation({
   },
 });
 
-const editUserName = ref(user.name);
+const editUserName = ref("");
-const editUserEmail = ref(user.email);
+const editUserEmail = ref("");
-const editUserAdmin = ref(user.admin);
 const edit = ref(false);
 </script>
 

web/src/types.ts

@@ -25,11 +25,10 @@ export interface CreateLicenseDto {
   note?: string;
 }
 
-export interface User {
+export interface UserDto {
   id: string;
   name: string;
   email: string;
-  admin: boolean;
 }
 
 export type CreateGroupDto = Omit<LicenseGroup, "id" | "licenses">;