Created edit for users

management-ui/src/customcompometns/EditUserDialog.vue

@@ -11,8 +11,9 @@ import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Switch } from '@/components/ui/switch'
-import { defineProps, defineEmits } from 'vue'
+import { defineProps, defineEmits, reactive, watch } from 'vue'
 import type { PropType } from 'vue'
+import type { Users } from '@/lib/interfaces'
 
 // 1) runtime props so Vue + TS agree
 const props = defineProps({
@@ -20,26 +21,58 @@ const props = defineProps({
     type: Boolean as PropType<boolean>,
     required: true,
   },
+  user: {
+    type: Object as PropType<Users>,
+    required: true,
+  },
 })
 
 // 2) two emits: v-model and confirm
 const emit = defineEmits<{
+  (
+    e: 'confirm',
+    payload: { username: string; password?: string; role: 'admin' | 'user' }
+  ): void
   (e: 'update:modelValue', v: boolean): void
-  (e: 'confirm'): void
 }>()
 
+const form = reactive({
+  username: '',
+  password: '',
+  isAdmin: false,
+})
+
+// when dialog opens or user changes – sync form with props.user
+watch(
+  () => [props.modelValue, props.user],
+  () => {
+    if (props.modelValue && props.user) {
+      form.username = props.user.username
+      form.password = ''
+      form.isAdmin = props.user.role === 'admin'
+    }
+  },
+  { immediate: true }
+)
+
 function onSave() {
-  emit('confirm')
-  // close the dialog
+  const payload: { username: string; password?: string; role: 'admin' | 'user' } = {
+    username: form.username,
+    role: form.isAdmin ? 'admin' : 'user',
+  }
+
+  // only send password if user entered something
+  if (form.password.trim() !== '') {
+    payload.password = form.password.trim()
+  }
+
+  emit('confirm', payload)
   emit('update:modelValue', false)
 }
 </script>
 
 <template>
-  <Dialog
-    :open="props.modelValue"
-    @update:open="(v: boolean) => emit('update:modelValue', v)"
-  >
+  <Dialog :open="props.modelValue" @update:open="(v: boolean) => emit('update:modelValue', v)">
     <DialogContent class="sm:max-w-[425px]">
       <DialogHeader>
         <DialogTitle>Edit profile</DialogTitle>
@@ -51,15 +84,15 @@ function onSave() {
       <div class="grid gap-4 py-4">
         <div class="grid grid-cols-4 items-center gap-4">
           <Label for="username" class="text-right">Username</Label>
-          <Input id="username" class="col-span-3" />
+          <Input id="username" class="col-span-3"  v-model="form.username"/>
         </div>
         <div class="grid grid-cols-4 items-center gap-4">
           <Label for="password" class="text-right">Password</Label>
-          <Input id="password" class="col-span-3" type="password" />
+          <Input id="password" class="col-span-3" type="password" v-model="form.password"/>
         </div>
-          <div class="grid grid-cols-4 items-center gap-4">
+        <div class="grid grid-cols-4 items-center gap-4">
           <Label for="isAdmin" class="text-right">Make admin</Label>
-          <Switch id="isAdmin"/>
+          <Switch id="isAdmin" v-model:checked="form.isAdmin"/>
         </div>
       </div>