From bd08dcc2126198c5fd8d997eee32dc6b2e550230 Mon Sep 17 00:00:00 2001
From: tdv <you@example.com>
Date: Tue, 7 Oct 2025 19:18:18 +0300
Subject: [PATCH] =?UTF-8?q?=D0=BD=D0=B0=D1=85=D1=83=D0=B5=D0=B2=D0=B5?=
 =?UTF-8?q?=D1=80=D1=82=D0=B8=D0=BB.=20it=20works=20but=20sucks,=20tryed?=
 =?UTF-8?q?=20to=20add=20reactivity=20to=20admin=20page=20and=20its=20chil?=
 =?UTF-8?q?d=20dialogs=20and=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../customcompometns/AdminDeviceDropdown.vue  |  24 +-
 .../src/customcompometns/Admincomponent.vue   | 211 +++++++++---------
 .../customcompometns/DataTableNoCheckbox.vue  |  10 +-
 .../DeviceCertificateDialog.vue               |   2 +-
 .../customcompometns/DeviceTasksDialog.vue    |   2 +-
 .../src/customcompometns/EditDeviceDialog.vue | 135 +++++++----
 6 files changed, 225 insertions(+), 159 deletions(-)

diff --git a/management-ui/src/customcompometns/AdminDeviceDropdown.vue b/management-ui/src/customcompometns/AdminDeviceDropdown.vue
index 3136ebe..062c193 100644
--- a/management-ui/src/customcompometns/AdminDeviceDropdown.vue
+++ b/management-ui/src/customcompometns/AdminDeviceDropdown.vue
@@ -9,22 +9,36 @@ import DeleteDeviceDialog from './DeleteDeviceDialog.vue'
 import DeviceCertificateDialog from './DeviceCertificateDialog.vue'
 import DeviceTasksDialog from './DeviceTasksDialog.vue'
 import { Ellipsis } from 'lucide-vue-next'
-import type { Device } from '@/lib/interfaces'
+import type { Device, Users } from '@/lib/interfaces'
 // import { api } from '@/lib/api'
 
-const props = defineProps<{ row: Device }>()  // ← accept full row
+const props = defineProps<{ 
+  row: Device
+  allUsers?: Users[]
+  onRowUpdated?: (row: Device, payload: { name: string; userIds: string[] }) => void
+  onRowDeleted?: (row: Device) => void 
+}>()  // ← accept full row
 
 const isEditOpen = ref(false)
 const isDeleteOpen = ref(false)
 const isTasksOpen = ref(false)
 const itCertsOpen = ref(false)
 
+const emit = defineEmits<{
+  (e: 'refresh'): void
+  (e: 'error', err: unknown): void
+}>()
+
 function onDeleteConfirmed() {
   // await api.delete(`/devices/${encodeURIComponent(props.row.guid)}`)
   isDeleteOpen.value = false
+  // emit('refresh')
+  props.onRowDeleted?.(props.row)
 }
-function onEditConfirm() {
+function onEditConfirm(_payload: { name: string; userIds: string[] }) {
   isEditOpen.value = false
+  // emit('refresh')
+  props.onRowUpdated?.(props.row, _payload)
 }
 
 function onTaskConfirm() {
@@ -47,11 +61,11 @@ function onCertsConfirm() {
       <DropdownMenuItem @click.prevent="isEditOpen = true">Rename</DropdownMenuItem>
       <DropdownMenuItem @click.prevent="isTasksOpen = true">Tasks</DropdownMenuItem>
       <DropdownMenuItem @click.prevent="itCertsOpen = true">Certificates</DropdownMenuItem>
-      <DropdownMenuItem @click.prevent="isDeleteOpen = true">Delete</DropdownMenuItem>
+      <DropdownMenuItem class="text-destructive" @click.prevent="isDeleteOpen = true">Delete</DropdownMenuItem>
     </DropdownMenuContent>
   </DropdownMenu>
 
-  <EditDeviceDialog v-model:modelValue="isEditOpen" :device="props.row" @confirm="onEditConfirm" />
+  <EditDeviceDialog v-model:modelValue="isEditOpen" :device="props.row" :all-users="props.allUsers" @confirm="onEditConfirm" />
   <DeleteDeviceDialog v-model:modelValue="isDeleteOpen" :device="props.row" @confirm="onDeleteConfirmed" />
   <DeviceCertificateDialog v-model:modelValue="itCertsOpen" :device="props.row" @confirm="onCertsConfirm" />
   <DeviceTasksDialog v-model:modelValue="isTasksOpen" :device="props.row" @confirm="onTaskConfirm" />
diff --git a/management-ui/src/customcompometns/Admincomponent.vue b/management-ui/src/customcompometns/Admincomponent.vue
index f9f3e99..adec5d7 100644
--- a/management-ui/src/customcompometns/Admincomponent.vue
+++ b/management-ui/src/customcompometns/Admincomponent.vue
@@ -1,38 +1,33 @@
 <script setup lang="ts">
-import { Tabs, TabsContent, TabsTrigger, TabsList } from '@/components/ui/tabs';
-import DataTableNoCheckbox from './DataTableNoCheckbox.vue';
-import AdminUserDropdonw from './AdminUserDropdonw.vue';
-import AdminDeviceDropdown from './AdminDeviceDropdown.vue';
-import type { Device, Users } from '@/lib/interfaces';
-import { Button } from '@/components/ui/button';
-import { onBeforeUnmount, onMounted, ref } from 'vue';
-import { api } from '@/lib/api';
-
-
+import { Tabs, TabsContent, TabsTrigger, TabsList } from '@/components/ui/tabs'
+import DataTableNoCheckbox from './DataTableNoCheckbox.vue'
+import AdminUserDropdonw from './AdminUserDropdonw.vue'
+import AdminDeviceDropdown from './AdminDeviceDropdown.vue'
+import type { Device, Users } from '@/lib/interfaces'
+import { Button } from '@/components/ui/button'
+import { onBeforeUnmount, onMounted, ref, computed } from 'vue'
+import { api } from '@/lib/api'
 
+// ---------------- Users ----------------
 const user_columns = [
   { accessorKey: 'id', header: 'ID' },
   { accessorKey: 'username', header: 'Username' },
   { accessorKey: 'role', header: 'Role' },
 ]
-
 const user_data = ref<Users[]>([])
 const usersLoading = ref(false)
 const usersError = ref<string | null>(null)
 
 function isUsersArray(data: unknown): data is Users[] {
   return Array.isArray(data) && data.every(
-    (u) =>
-      u &&
-      typeof u === 'object' &&
-      typeof (u as any).id === 'number' &&
-      typeof (u as any).username === 'string' &&
-      typeof (u as any).role === 'string'
+    (u) => u && typeof u === 'object'
+      && typeof (u as any).id === 'number'
+      && typeof (u as any).username === 'string'
+      && typeof (u as any).role === 'string'
   )
 }
 
 let ctrl: AbortController | null = null
-
 async function loadUsers() {
   usersError.value = null
   usersLoading.value = true
@@ -40,27 +35,23 @@ async function loadUsers() {
     ctrl?.abort()
     ctrl = new AbortController()
     const { data } = await api.get('/users', { signal: ctrl.signal })
-
-    if (!isUsersArray(data)) {
-      throw new Error('Unexpected response shape')
-    }
-
+    if (!isUsersArray(data)) throw new Error('Unexpected response shape')
     user_data.value = data
   } catch (e: any) {
-    // keep error generic; specifics are logged server-side
     if (e?.name === 'CanceledError' || e?.message === 'canceled') return
-    if (e?.response?.status === 403) {
-      usersError.value = 'Access denied.'
-    } else {
-      usersError.value = 'Failed to load users.'
-    }
+    usersError.value = e?.response?.status === 403 ? 'Access denied.' : 'Failed to load users.'
   } finally {
     usersLoading.value = false
   }
 }
 
+// Helper to map ids -> usernames (for immediate UI update after dialog save)
+const idToName = computed(() => new Map(user_data.value.map(u => [String(u.id), u.username])))
+function usernamesFromIds(ids: string[]): string {
+  return ids.map(id => idToName.value.get(String(id))).filter(Boolean).join(', ')
+}
 
-// ---------- Devices (NEW) ----------
+// ---------------- Devices ----------------
 type ApiDeviceUser = { id: number; username: string; role: string }
 type ApiDevice = { guid: string; name: string; users?: ApiDeviceUser[] }
 type DevicesResponse = { devices: ApiDevice[]; offset: number; limit: number; total: number }
@@ -69,29 +60,22 @@ function isDevicesResponse(d: unknown): d is DevicesResponse {
   const x = d as any
   return !!x && Array.isArray(x.devices) &&
     x.devices.every((dev: any) =>
-      dev &&
-      typeof dev.guid === 'string' &&
-      typeof dev.name === 'string' &&
-      (
-        dev.users === undefined ||
-        (
-          Array.isArray(dev.users) &&
-          dev.users.every((u: any) => u && typeof u.username === 'string')
-        )
-      )
+      dev && typeof dev.guid === 'string' && typeof dev.name === 'string' &&
+      (dev.users === undefined ||
+        (Array.isArray(dev.users) && dev.users.every((u: any) => u && typeof u.username === 'string')))
     )
 }
 
+const device_columns = [
+  { accessorKey: 'guid', header: 'GUID' },
+  { accessorKey: 'devicename', header: 'Device' },
+  { accessorKey: 'assigned_users', header: 'Users' },
+]
+
 const device_data = ref<Device[]>([])
 const devicesLoading = ref(false)
 const devicesError = ref<string | null>(null)
 
-const device_columns = [
-    { accessorKey: 'guid', header: 'GUID' },
-    { accessorKey: 'devicename', header: 'Device' },
-    { accessorKey: 'assigned_users', header: 'Users' },
-]
-
 let devicesCtrl: AbortController | null = null
 async function loadDevices() {
   devicesError.value = null
@@ -100,10 +84,7 @@ async function loadDevices() {
     devicesCtrl?.abort()
     devicesCtrl = new AbortController()
     const { data } = await api.get('/devices', { signal: devicesCtrl.signal })
-
     if (!isDevicesResponse(data)) throw new Error('Unexpected devices response')
-
-    // Transform API -> table shape
     device_data.value = data.devices.map((d) => ({
       guid: d.guid,
       devicename: d.name,
@@ -117,7 +98,7 @@ async function loadDevices() {
   }
 }
 
-// ----- Trackers
+// ---------------- Trackers ----------------
 type ApiTracker = { guid: string; name: string; users?: ApiDeviceUser[] }
 type TrackersResponse = { trackers: ApiTracker[]; offset: number; limit: number; total: number }
 
@@ -125,29 +106,22 @@ function isTrackersResponse(t: unknown): t is TrackersResponse {
   const x = t as any
   return !!x && Array.isArray(x.trackers) &&
     x.trackers.every((dev: any) =>
-      dev &&
-      typeof dev.guid === 'string' &&
-      typeof dev.name === 'string' &&
-      (
-        dev.users === undefined ||
-        (
-          Array.isArray(dev.users) &&
-          dev.users.every((u: any) => u && typeof u.username === 'string')
-        )
-      )
+      dev && typeof dev.guid === 'string' && typeof dev.name === 'string' &&
+      (dev.users === undefined ||
+        (Array.isArray(dev.users) && dev.users.every((u: any) => u && typeof u.username === 'string')))
     )
 }
 
+const tracker_columns = [
+  { accessorKey: 'guid', header: 'GUID' },
+  { accessorKey: 'devicename', header: 'Tracker' },
+  { accessorKey: 'assigned_users', header: 'Users' },
+]
+
 const trackers_data = ref<Device[]>([])
 const trackersLoading = ref(false)
 const trackersError = ref<string | null>(null)
 
-const tracker_columns = [
-    { accessorKey: 'guid', header: 'GUID' },
-    { accessorKey: 'devicename', header: 'Tracker' },
-    { accessorKey: 'assigned_users', header: 'Users' },
-]
-
 let treckerCtrl: AbortController | null = null
 async function loadTrackers() {
   trackersError.value = null
@@ -156,10 +130,7 @@ async function loadTrackers() {
     treckerCtrl?.abort()
     treckerCtrl = new AbortController()
     const { data } = await api.get('/trackers', { signal: treckerCtrl.signal })
-
     if (!isTrackersResponse(data)) throw new Error('Unexpected trackers response')
-
-    // Transform API -> table shape
     trackers_data.value = data.trackers.map((d) => ({
       guid: d.guid,
       devicename: d.name,
@@ -173,47 +144,83 @@ async function loadTrackers() {
   }
 }
 
+// ---------------- Immediate UI updates from dropdown dialogs ----------------
+function handleDeviceUpdated(row: Device, payload: { name: string; userIds: string[] }) {
+  const guid = row.guid
+  const usersStr = usernamesFromIds(payload.userIds)
+  device_data.value = device_data.value.map(d =>
+    d.guid === guid ? { ...d, devicename: payload.name, assigned_users: usersStr } : d
+  )
+}
+function handleDeviceDeleted(row: Device) {
+  const guid = row.guid
+  device_data.value = device_data.value.filter(d => d.guid !== guid)
+}
+
+// If trackers use the same dropdown to edit, keep these too:
+function handleTrackerUpdated(row: Device, payload: { name: string; userIds: string[] }) {
+  const guid = row.guid
+  const usersStr = usernamesFromIds(payload.userIds)
+  trackers_data.value = trackers_data.value.map(d =>
+    d.guid === guid ? { ...d, devicename: payload.name, assigned_users: usersStr } : d
+  )
+}
+function handleTrackerDeleted(row: Device) {
+  const guid = row.guid
+  trackers_data.value = trackers_data.value.filter(d => d.guid !== guid)
+}
+
+// ---------------- lifecycle ----------------
 onMounted(() => {
   loadUsers()
   loadDevices()
   loadTrackers()
 })
 onBeforeUnmount(() => {
-    ctrl?.abort()
-    devicesCtrl?.abort()
-    treckerCtrl?.abort()
+  ctrl?.abort()
+  devicesCtrl?.abort()
+  treckerCtrl?.abort()
 })
 </script>
 
 <template>
-    <a href="/create">
-        <Button>
-            Create
-        </Button>
-    </a>
+  <a href="/create">
+    <Button>Create</Button>
+  </a>
 
-    <Tabs default-value="users">
-        <TabsList class="space-x-8">
-            <TabsTrigger value="users">
-                Users
-            </TabsTrigger>
-            <TabsTrigger value="devices">
-                Devices
-            </TabsTrigger>
-            <TabsTrigger value="trackers">
-                Trackers
-            </TabsTrigger>
-        </TabsList>
-        <TabsContent value="users">
-            <DataTableNoCheckbox :columns="user_columns" :data="user_data" :dropdownComponent="AdminUserDropdonw" />
-        </TabsContent>
-        <TabsContent value="devices">
-            <DataTableNoCheckbox :columns="device_columns" :data="device_data"
-                :dropdownComponent="AdminDeviceDropdown" />
-        </TabsContent>
-        <TabsContent value="trackers">
-            <DataTableNoCheckbox :columns="tracker_columns" :data="trackers_data"
-                :dropdownComponent="AdminDeviceDropdown" />
-        </TabsContent>
-    </Tabs>
-</template>
\ No newline at end of file
+  <Tabs default-value="users">
+    <TabsList class="space-x-8">
+      <TabsTrigger value="users">Users</TabsTrigger>
+      <TabsTrigger value="devices">Devices</TabsTrigger>
+      <TabsTrigger value="trackers">Trackers</TabsTrigger>
+    </TabsList>
+
+    <TabsContent value="users">
+      <DataTableNoCheckbox
+        :columns="user_columns"
+        :data="user_data"
+        :dropdownComponent="AdminUserDropdonw"
+      />
+    </TabsContent>
+
+    <TabsContent value="devices">
+      <DataTableNoCheckbox
+        :columns="device_columns"
+        :data="device_data"
+        :dropdownComponent="AdminDeviceDropdown"
+        :onRowUpdated="handleDeviceUpdated"
+        :onRowDeleted="handleDeviceDeleted"
+      />
+    </TabsContent>
+
+    <TabsContent value="trackers">
+      <DataTableNoCheckbox
+        :columns="tracker_columns"
+        :data="trackers_data"
+        :dropdownComponent="AdminDeviceDropdown"
+        :onRowUpdated="handleTrackerUpdated"
+        :onRowDeleted="handleTrackerDeleted"
+      />
+    </TabsContent>
+  </Tabs>
+</template>
diff --git a/management-ui/src/customcompometns/DataTableNoCheckbox.vue b/management-ui/src/customcompometns/DataTableNoCheckbox.vue
index eb8f3cd..6602884 100644
--- a/management-ui/src/customcompometns/DataTableNoCheckbox.vue
+++ b/management-ui/src/customcompometns/DataTableNoCheckbox.vue
@@ -33,7 +33,13 @@ const props = defineProps<{
    *   :dropdownComponent="MyActionsMenu"
    * />
    */
-  dropdownComponent?: DefineComponent<{ row: TData }, any, any>
+  // dropdownComponent?: DefineComponent<{ row: TData }, any, any>
+  dropdownComponent?: DefineComponent<{ row: TData } & {
+    onRowUpdated?: (row: TData, payload: any) => void
+    onRowDeleted?: (row: TData) => void
+  }, any, any>
+  onRowUpdated?: (row: TData, payload: any) => void   // <-- NEW
+  onRowDeleted?: (row: TData) => void                 // <-- NEW
 }>()
 
 // ——— Table setup ———
@@ -97,6 +103,8 @@ const table = useVueTable({
                   :is="props.dropdownComponent"
                   :row="row.original"
                   :key="row.id"
+                  :on-row-updated="props.onRowUpdated"
+                  :on-row-deleted="props.onRowDeleted"
                 />
               </TableCell>
             </TableRow>
diff --git a/management-ui/src/customcompometns/DeviceCertificateDialog.vue b/management-ui/src/customcompometns/DeviceCertificateDialog.vue
index 1b69d90..847681c 100644
--- a/management-ui/src/customcompometns/DeviceCertificateDialog.vue
+++ b/management-ui/src/customcompometns/DeviceCertificateDialog.vue
@@ -37,7 +37,7 @@ function onSave() {
             <DialogHeader>
                 <DialogTitle>List of certificates</DialogTitle>
                 <DialogDescription>
-                    List of certificates for device {{ props.device?.guid }}
+                    {{ props.device?.guid }}
                 </DialogDescription>
             </DialogHeader>
 
diff --git a/management-ui/src/customcompometns/DeviceTasksDialog.vue b/management-ui/src/customcompometns/DeviceTasksDialog.vue
index 39ec1bf..4f1c8e0 100644
--- a/management-ui/src/customcompometns/DeviceTasksDialog.vue
+++ b/management-ui/src/customcompometns/DeviceTasksDialog.vue
@@ -35,7 +35,7 @@ function onSave() {
             <DialogHeader>
                 <DialogTitle>Tasks</DialogTitle>
                 <DialogDescription>
-                    List of tasks for device {{ props.device?.guid }}
+                    {{ props.device?.guid }}
                 </DialogDescription>
             </DialogHeader>
 
diff --git a/management-ui/src/customcompometns/EditDeviceDialog.vue b/management-ui/src/customcompometns/EditDeviceDialog.vue
index 61ece79..ce70dec 100644
--- a/management-ui/src/customcompometns/EditDeviceDialog.vue
+++ b/management-ui/src/customcompometns/EditDeviceDialog.vue
@@ -10,76 +10,111 @@ import {
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
-import { defineProps, defineEmits, ref, watch } from 'vue'
+import { defineProps, defineEmits, ref, watch, computed } from 'vue'
 import type { PropType } from 'vue'
 import AssignDevice from './AssignDevice.vue'
 import type { Device, Users } from '@/lib/interfaces'
+import { api } from '@/lib/api'
+
+
+type DeviceWithUsers =
+  & Partial<Device>
+  & { guid?: string; name?: string; devicename?: string }
+  & { users?: Array<{ id: number; username: string; role?: string }> }
 
 // 1) runtime props so Vue + TS agree
 const props = defineProps({
-  modelValue: {
-    type: Boolean as PropType<boolean>,
-    required: true,
-  },
-  device: { type: Object as PropType<Device>, required: false },
-  allUsers: { type: Array as PropType<Users[]>, required: false },
-  initialUserIds: { type: Array as PropType<string[]>, required: false }, // <- if you have IDs already
+  modelValue: { type: Boolean as PropType<boolean>, required: true },
+  device:     { type: Object as PropType<DeviceWithUsers>, required: true }, // must have guid
+  allUsers:   { type: Array as PropType<Users[]>, required: false },
 })
 
 // 2) two emits: v-model and confirm
 const emit = defineEmits<{
   (e: 'update:modelValue', v: boolean): void
-  (e: 'confirm'): void
+  // (e: 'confirm'): void
+  (e: 'updated', payload: { name: string; userIds: string[] }): void
 }>()
 
+// ---------- Local form state ----------
+const guid = computed(() => String(props.device?.guid ?? ''))
+const originalName = computed(() => (props.device?.devicename ?? props.device?.name ?? ''))
+const originalIds = computed<string[]>(() =>
+  Array.isArray(props.device?.users) ? props.device!.users.map(u => String(u.id)) : []
+)
+
 const name = ref('')
 const selectedUserIds = ref<string[]>([])
 
-// helper: map usernames → ids when we only have a string of usernames
-const usernameToId = (uname: string): string | null => {
-  const id = props.allUsers?.find(u => u.username === uname)?.id
-  return typeof id === 'number' ? String(id) : null
-}
-
-
-// when device changes or dialog opens, update local value
 watch(
   () => props.device,
-  (dev) => {
-    console.log(dev?.assigned_users)
-    name.value = dev?.devicename ?? ''
-    if (props.initialUserIds && props.initialUserIds.length) {
-      selectedUserIds.value = [...props.initialUserIds]
-      return
-    }
-    const usernames = (dev?.assigned_users ?? '')
-      .split(',')
-      .map(s => s.trim())
-      .filter(Boolean)
-
-    if (usernames.length && props.allUsers?.length) {
-      selectedUserIds.value = usernames
-        .map(usernameToId)
-        .filter((x): x is string => !!x)
-    } else {
-      selectedUserIds.value = []
-    }
+  () => {
+    name.value = originalName.value
+    selectedUserIds.value = [...originalIds.value]
   },
   { immediate: true }
 )
 
-function onSave() {
-  emit('confirm')
-  // close the dialog
-  emit('update:modelValue', false)
+// ---------- Save (conditional API calls) ----------
+const saving = ref(false)
+const errorText = ref<string | null>(null)
+
+function changedName() {
+  return name.value.trim() !== originalName.value.trim()
+}
+function changedUsers() {
+  // compare as sets
+  const a = new Set(originalIds.value)
+  const b = new Set(selectedUserIds.value)
+  if (a.size !== b.size) return true
+  for (const id of a) if (!b.has(id)) return true
+  return false
+}
+
+async function onSave() {
+  if (!guid.value) return
+  errorText.value = null
+  saving.value = true
+  try {
+    const ops: Promise<any>[] = []
+
+    if (changedName()) {
+      ops.push(
+        api.post(`/devices/${encodeURIComponent(guid.value)}/rename`, {
+          name: name.value.trim(),
+        } as { name: string })
+      )
+    }
+
+    if (changedUsers()) {
+      const userIdsNum = selectedUserIds.value
+        .map(v => Number(v))
+        .filter(n => Number.isFinite(n)) as number[]
+
+      ops.push(
+        api.post(`/devices/${encodeURIComponent(guid.value)}/set_users`, {
+          userIds: userIdsNum,
+        } as { userIds: number[] })
+      )
+    }
+
+    if (ops.length > 0) {
+      await Promise.all(ops)
+    }
+
+    emit('updated', { name: name.value, userIds: [...selectedUserIds.value] })
+    emit('update:modelValue', false)
+  } catch (err: any) {
+    console.error(err)
+    errorText.value = err?.response?.data?.message || 'Failed to save changes.'
+  } finally {
+    saving.value = 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:min-w-[500px]">
       <DialogHeader>
         <DialogTitle>Edit device</DialogTitle>
@@ -91,20 +126,22 @@ 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>
-          <p id="guid" class="col-span-3"> {{ props.device?.guid }}</p>
+          <p id="guid" class="col-span-3 break-all text-muted-foreground"> {{ 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" v-model="name" />
+          <Input id="name" class="col-span-3" v-model="name" :disabled="saving" placeholder="Device name"/>
         </div>
         <div class="grid grid-cols-4 items-center gap-4">
           <Label for="users" class="text-right">Allowed users</Label>
-          <AssignDevice id="users" v-model="selectedUserIds" :all-users="props.allUsers" class="col-span-3 w-full"/>
+          <AssignDevice id="users" v-model="selectedUserIds" :all-users="props.allUsers" class="col-span-3 w-full" />
         </div>
+        <p v-if="errorText" class="text-sm text-red-600 mt-1 col-span-4">{{ errorText }}</p>
       </div>
-
       <DialogFooter>
-        <Button @click="onSave">Save changes</Button>
+        <Button :disabled="saving" @click="onSave">
+          {{ saving ? 'Saving…' : 'Save changes' }}
+        </Button>
       </DialogFooter>
     </DialogContent>
   </Dialog>