feat(frontend): enhance RemoveDeviceDialog to use props for device removal and loading state

Author: Lasim

services/frontend/src/components/devices/RemoveDeviceDialog.vue

@@ -10,12 +10,13 @@ import {
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog'
 import { Button } from '@/components/ui/button'
-import { useDevices } from '@/composables/useDevices'
 import type { Device } from '@/views/devices/types'
 
 interface Props {
   device: Device | null
   open: boolean
+  removeDevice: (deviceId: string) => Promise<void>
+  isRemoving: boolean
 }
 
 interface Emits {
@@ -27,13 +28,12 @@ const props = defineProps<Props>()
 const emit = defineEmits<Emits>()
 
 const { t } = useI18n()
-const { isRemoving, removeDevice } = useDevices()
 
 async function handleConfirmRemove() {
   if (!props.device) return
 
   try {
-    await removeDevice(props.device.id)
+    await props.removeDevice(props.device.id)
     emit('device-removed', props.device)
     emit('update:open', false)
   } catch {
@@ -61,12 +61,12 @@ function handleCancel() {
       </div>
 
       <AlertDialogFooter>
-        <AlertDialogCancel @click="handleCancel" :disabled="isRemoving">
+        <AlertDialogCancel @click="handleCancel" :disabled="props.isRemoving">
           {{ t('devices.removeDialog.buttons.cancel') }}
         </AlertDialogCancel>
         <Button
           @click="handleConfirmRemove"
-          :loading="isRemoving"
+          :loading="props.isRemoving"
           :loading-text="t('devices.removeDialog.buttons.removing')"
           class="bg-destructive text-destructive-foreground hover:bg-destructive/90"
         >

services/frontend/src/views/devices/index.vue

@@ -47,8 +47,10 @@ const {
   deviceStats,
   isLoading,
   isUpdating,
+  isRemoving,
   fetchDevices,
-  updateDevice
+  updateDevice,
+  removeDevice
 } = useDevices()
 
 // Computed
@@ -251,6 +253,8 @@ onMounted(() => {
       <RemoveDeviceDialog
         :device="removingDevice"
         :open="removeDialogOpen"
+        :remove-device="removeDevice"
+        :is-removing="isRemoving"
         @update:open="removeDialogOpen = $event"
         @device-removed="handleDeviceRemoved"
       />

services/frontend/src/views/devices/view/[id].vue

@@ -2,7 +2,6 @@
 import { ref, computed, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
-import { toast } from 'vue-sonner'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { Alert, AlertDescription } from '@/components/ui/alert'
@@ -20,7 +19,7 @@ import {
   Trash2
 } from 'lucide-vue-next'
 import { useDeviceDetail } from '@/composables/useDeviceDetail'
-import type { Device } from '../types'
+import { useDevices } from '@/composables/useDevices'
 
 const route = useRoute()
 const router = useRouter()
@@ -37,6 +36,8 @@ const {
   formatTimestamp
 } = useDeviceDetail()
 
+const { removeDevice, isRemoving } = useDevices()
+
 // Computed
 const deviceId = computed(() => route.params.id as string)
 
@@ -55,10 +56,7 @@ function handleRemoveDevice() {
   removeDialogOpen.value = true
 }
 
-function handleDeviceRemoved(removedDevice: Device) {
-  toast.success(t('devices.removeDialog.success'), {
-    description: t('devices.removeDialog.successDescription', { deviceName: removedDevice.device_name })
-  })
+function handleDeviceRemoved() {
   router.push('/devices')
 }
 
@@ -176,6 +174,8 @@ onMounted(async () => {
       <RemoveDeviceDialog
         :device="device"
         :open="removeDialogOpen"
+        :remove-device="removeDevice"
+        :is-removing="isRemoving"
         @update:open="removeDialogOpen = $event"
         @device-removed="handleDeviceRemoved"
       />