web: updateEditActions vue to be more adaptive

web/src/components/NavBarIcons/UsersDialog.vue

@@ -13,13 +13,13 @@
       <v-card-text>
         <v-data-table
           :headers="headers"
-          :items="items"
+          :items="data ?? []"
           :items-per-page="10"
           item-key="name"
           class="elevation-5"
         >
           <template v-slot:item.actions="{ item }">
-            <UsersEditAction />
+            <UsersEditAction :user="item" />
             <UsersDeleteAction />
           </template>
         </v-data-table>
@@ -39,17 +39,27 @@ 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 items = ref([
-  { name: "John Doe", email: "test@john.doe", action: "Here CRUD" },
-]);
+const queryClient = useQueryClient();
+
+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,6 +29,12 @@
               :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>
@@ -61,7 +67,9 @@ import { ref } from "vue";
 import { SubmitEventPromise } from "vuetify";
 import { axiosInstance } from "@/client";
 import { useMutation, useQueryClient } from "@tanstack/vue-query";
-import { CreateLicenseDto } from "@/types";
+import { CreateLicenseDto, User } from "@/types";
+
+const { user } = defineProps<{ user: User }>();
 
 const queryClient = useQueryClient();
 
@@ -104,8 +112,9 @@ const { mutate: userMutate } = useMutation({
   },
 });
 
-const editUserName = ref("");
-const editUserEmail = ref("");
+const editUserName = ref(user.name);
+const editUserEmail = ref(user.email);
+const editUserAdmin = ref(user.admin);
 const edit = ref(false);
 </script>
 

web/src/types.ts

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