fixed dialogs behaviour

management-ui/src/customcompometns/AdminDeviceDropdown.vue

@@ -1,40 +1,42 @@
 <script setup lang="ts">
-import { DropdownMenu, DropdownMenuItem, 
-DropdownMenuTrigger, DropdownMenuContent } from '@/components/ui/dropdown-menu';
-import { Ellipsis } from 'lucide-vue-next';
-import EditDeviceDialog from './EditDeviceDialog.vue';
-import DeleteDeviceDialog from './DeleteDeviceDialog.vue';
-import { ref } from 'vue';
+import { ref } from 'vue'
+import {
+  DropdownMenu, DropdownMenuItem,
+  DropdownMenuTrigger, DropdownMenuContent
+} from '@/components/ui/dropdown-menu'
+import EditDeviceDialog from './EditDeviceDialog.vue'
+import DeleteDeviceDialog from './DeleteDeviceDialog.vue'
+import { Ellipsis } from 'lucide-vue-next'
+import type { Device } from '@/lib/interfaces'
+// import { api } from '@/lib/api'
+
+const props = defineProps<{ row: Device }>()  // ← accept full row
 
 const isEditOpen = ref(false)
 const isDeleteOpen = ref(false)
 
-// your actual delete logic
 function onDeleteConfirmed() {
-  // e.g. await api.deleteUser(props.userId)
+  // await api.delete(`/devices/${encodeURIComponent(props.row.guid)}`)
   isDeleteOpen.value = false
 }
 function onEditConfirm() {
-    isEditOpen.value = false
+  isEditOpen.value = false
 }
-
 </script>
+
 <template>
-<DropdownMenu>
+  <DropdownMenu>
     <DropdownMenuTrigger asChild>
-        <button class="p-2 rounded hover:bg-muted">
-            <Ellipsis/>
-        </button>
+      <button class="p-2 rounded hover:bg-muted">
+        <Ellipsis />
+      </button>
     </DropdownMenuTrigger>
     <DropdownMenuContent align="end" class="w-[160px]">
-        <DropdownMenuItem @click.prevent="isEditOpen = true">
-            Rename
-        </DropdownMenuItem>
-        <DropdownMenuItem @click.prevent="isDeleteOpen = true">
-            Delete
-        </DropdownMenuItem>
+      <DropdownMenuItem @click.prevent="isEditOpen = true">Rename</DropdownMenuItem>
+      <DropdownMenuItem @click.prevent="isDeleteOpen = true">Delete</DropdownMenuItem>
     </DropdownMenuContent>
-</DropdownMenu>
-<EditDeviceDialog v-model:modelValue="isEditOpen"@confirm="onEditConfirm()" />
-<DeleteDeviceDialog v-model:modelValue="isDeleteOpen" @confirm="onDeleteConfirmed" />
+  </DropdownMenu>
+
+  <EditDeviceDialog v-model:modelValue="isEditOpen" :device="props.row" @confirm="onEditConfirm" />
+  <DeleteDeviceDialog v-model:modelValue="isDeleteOpen" :device="props.row" @confirm="onDeleteConfirmed" />
 </template>

management-ui/src/customcompometns/AdminUserDropdonw.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
+import { ref } from 'vue'
 import {
   DropdownMenu, DropdownMenuItem,
   DropdownMenuTrigger, DropdownMenuContent
 } from '@/components/ui/dropdown-menu'
-
 import EditUserDialog from './EditUserDialog.vue'
 import DeleteUserDialog from './DeleteUserDialog.vue'
 import { Ellipsis } from 'lucide-vue-next'
-import { ref } from 'vue'
-import { api } from '@/lib/api' // <-- use your axios/fetch wrapper
+import { api } from '@/lib/api'
+import type { Users } from '@/lib/interfaces'
 
-const props = defineProps<{ userId: string }>()
+const props = defineProps<{ row: Users }>()   // ← accept full row
 const emit = defineEmits<{
   (e: 'deleted', id: string): void
   (e: 'error', err: unknown): void
@@ -20,18 +20,17 @@ const isEditOpen = ref(false)
 const isDeleteOpen = ref(false)
 const deleting = ref(false)
 
-// DELETE /users/:id
 async function onDeleteConfirmed() {
   try {
     deleting.value = true
-    await api.delete(`/users/${encodeURIComponent(props.userId)}`)
-    emit('deleted', props.userId)
+    await api.delete(`/users/${encodeURIComponent(String(props.row.id))}`)
+    emit('deleted', String(props.row.id))
   } catch (err) {
     console.error(err)
     emit('error', err)
   } finally {
     deleting.value = false
-    // The dialog already closes itself on confirm; nothing else required.
+    // DeleteUserDialog closes itself after confirm
   }
 }
 
@@ -49,21 +48,13 @@ function onEditConfirm() {
     </DropdownMenuTrigger>
 
     <DropdownMenuContent align="end" class="w-[160px]">
-      <DropdownMenuItem @click.prevent="isEditOpen = true">
-        Edit
-      </DropdownMenuItem>
+      <DropdownMenuItem @click.prevent="isEditOpen = true">Edit</DropdownMenuItem>
       <DropdownMenuItem @click.prevent="isDeleteOpen = true" :disabled="deleting">
         Delete
       </DropdownMenuItem>
     </DropdownMenuContent>
   </DropdownMenu>
 
-  <EditUserDialog v-model:modelValue="isEditOpen" @confirm="onEditConfirm()" />
-
-  <!-- pass 'deleting' to disable the confirm button during request -->
-  <DeleteUserDialog
-    v-model:modelValue="isDeleteOpen"
-    :loading="deleting"
-    @confirm="onDeleteConfirmed"
-  />
+  <EditUserDialog v-model:modelValue="isEditOpen" @confirm="onEditConfirm" />
+  <DeleteUserDialog v-model:modelValue="isDeleteOpen" :loading="deleting" @confirm="onDeleteConfirmed" />
 </template>

management-ui/src/customcompometns/DataTableNoCheckbox.vue

@@ -96,6 +96,7 @@ const table = useVueTable({
                 <component
                   :is="props.dropdownComponent"
                   :row="row.original"
+                  :key="row.id"
                 />
               </TableCell>
             </TableRow>

management-ui/src/customcompometns/DeleteDeviceDialog.vue

@@ -26,7 +26,7 @@ const emit = defineEmits<{
 <template>
   <AlertDialog
     :open="props.modelValue"
-    @openChange="(v: boolean) => emit('update:modelValue', v)"
+    @update:open="(v: boolean) => emit('update:modelValue', v)"
   >
     <AlertDialogContent>
       <AlertDialogHeader>

management-ui/src/customcompometns/DeleteUserDialog.vue

@@ -24,7 +24,7 @@ const emit = defineEmits<{
 <template>
   <AlertDialog
     :open="props.modelValue"
-    @openChange="(v: boolean) => emit('update:modelValue', v)"
+    @update:open="(v: boolean) => emit('update:modelValue', v)"
   >
     <AlertDialogContent>
       <AlertDialogHeader>

management-ui/src/customcompometns/EditDeviceDialog.vue

@@ -10,9 +10,10 @@ import {
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
-import { defineProps, defineEmits } from 'vue'
+import { defineProps, defineEmits, ref, watch } from 'vue'
 import type { PropType } from 'vue'
 import AssignDevice from './AssignDevice.vue'
+import type { Device } from '@/lib/interfaces'
 
 // 1) runtime props so Vue + TS agree
 const props = defineProps({
@@ -20,6 +21,7 @@ const props = defineProps({
     type: Boolean as PropType<boolean>,
     required: true,
   },
+  device: { type: Object as PropType<Device>, required: false },
 })
 
 // 2) two emits: v-model and confirm
@@ -28,6 +30,16 @@ const emit = defineEmits<{
   (e: 'confirm'): void
 }>()
 
+const name = ref('')
+// when device changes or dialog opens, update local value
+watch(
+  () => props.device,
+  (dev) => {
+    name.value = dev?.devicename ?? ''
+  },
+  { immediate: true }
+)
+
 function onSave() {
   emit('confirm')
   // close the dialog
@@ -38,7 +50,7 @@ function onSave() {
 <template>
   <Dialog
     :open="props.modelValue"
-    @openChange="(v: boolean) => emit('update:modelValue', v)"
+    @update:open="(v: boolean) => emit('update:modelValue', v)"
   >
     <DialogContent class="sm:max-w-[425px]">
       <DialogHeader>
@@ -51,11 +63,11 @@ function onSave() {
       <div class="grid gap-4 py-4">
         <div class="grid grid-cols-4 items-center gap-4">
           <Label for="guid" class="text-right">GUID</Label>
-          <Input id="guid" class="col-span-3" />
+          <p id="guid" class="col-span-3"> {{ props.device?.guid }}</p>
         </div>
         <div class="grid grid-cols-4 items-center gap-4">
           <Label for="name" class="text-right">Name</Label>
-          <Input id="name" class="col-span-3" />
+          <Input id="name" class="col-span-3" v-model="name" />
         </div>
         <div class="grid grid-cols-4 items-center gap-4">
           <Label for="users" class="text-right">Allowed users</Label>

management-ui/src/customcompometns/EditUserDialog.vue

@@ -38,7 +38,7 @@ function onSave() {
 <template>
   <Dialog
     :open="props.modelValue"
-    @openChange="(v: boolean) => emit('update:modelValue', v)"
+    @update:open="(v: boolean) => emit('update:modelValue', v)"
   >
     <DialogContent class="sm:max-w-[425px]">
       <DialogHeader>