fix(ui): use DeviceActionButton in DevicesDropdown

Author: luizhf42

ui/src/components/AppBar/DevicesDropdown.vue

@@ -21,9 +21,7 @@
         flat
         data-test="devices-card"
       >
-        <v-card-title class="text-h6 py-3">
-          Device Management
-        </v-card-title>
+        <v-card-title class="text-h6 py-3">Device Management</v-card-title>
         <v-card-text class="pa-4 pt-0">
           <v-row
             dense
@@ -41,9 +39,7 @@
                 <div class="text-h4 font-weight-bold">
                   {{ stats.registered_devices }}
                 </div>
-                <div class="text-caption text-medium-emphasis">
-                  Total
-                </div>
+                <div class="text-caption text-medium-emphasis">Total</div>
               </v-card>
             </v-col>
             <v-col
@@ -58,9 +54,7 @@
                 <div class="text-h4 font-weight-bold">
                   {{ stats.online_devices }}
                 </div>
-                <div class="text-caption text-medium-emphasis">
-                  Online
-                </div>
+                <div class="text-caption text-medium-emphasis">Online</div>
               </v-card>
             </v-col>
             <v-col
@@ -75,9 +69,7 @@
                 <div class="text-h4 font-weight-bold">
                   {{ stats.pending_devices }}
                 </div>
-                <div class="text-caption text-medium-emphasis">
-                  Pending
-                </div>
+                <div class="text-caption text-medium-emphasis">Pending</div>
               </v-card>
             </v-col>
             <v-col
@@ -92,9 +84,7 @@
                 <div class="text-h4 font-weight-bold">
                   {{ offlineDevices }}
                 </div>
-                <div class="text-caption text-medium-emphasis">
-                  Offline
-                </div>
+                <div class="text-caption text-medium-emphasis">Offline</div>
               </v-card>
             </v-col>
           </v-row>
@@ -188,26 +178,28 @@
                         </span>
                       </template>
                       <div class="d-flex align-center ga-2 mt-1">
-                        <v-btn
+                        <DeviceActionButton
+                          :uid="device.uid"
+                          :name="device.name"
+                          action="accept"
+                          variant="device"
+                          is-in-devices-dropdown
                           color="success"
-                          variant="flat"
-                          size="small"
                           prepend-icon="mdi-check-circle"
                           :data-test="`accept-${device.uid}`"
-                          @click="handleAccept(device.uid)"
-                        >
-                          Accept
-                        </v-btn>
-                        <v-btn
+                          @update="handleUpdate"
+                        />
+                        <DeviceActionButton
+                          :uid="device.uid"
+                          :name="device.name"
+                          action="reject"
+                          variant="device"
+                          is-in-devices-dropdown
                           color="error"
-                          variant="tonal"
-                          size="small"
                           prepend-icon="mdi-cancel"
                           :data-test="`reject-${device.uid}`"
-                          @click="handleReject(device.uid)"
-                        >
-                          Reject
-                        </v-btn>
+                          @update="handleUpdate"
+                        />
                         <v-btn
                           icon="mdi-dots-vertical"
                           variant="text"
@@ -273,7 +265,7 @@
                       </v-list-item-subtitle>
                       <template #append>
                         <span class="text-caption text-medium-emphasis">
-                          {{ device.online ? 'Active now' : formatTimeAgo(device.last_seen) }}
+                          {{ device.online ? "Active now" : formatTimeAgo(device.last_seen) }}
                         </span>
                       </template>
                     </v-list-item>
@@ -325,6 +317,7 @@ import handleError from "@/utils/handleError";
 import useSnackbar from "@/helpers/snackbar";
 import moment from "moment";
 import { IDevice } from "@/interfaces/IDevice";
+import DeviceActionButton from "@/components/Devices/DeviceActionButton.vue";
 
 const { smAndUp, thresholds } = useDisplay();
 const statsStore = useStatsStore();
@@ -336,36 +329,22 @@ const activeTab = ref<"pending" | "recent">("pending");
 const pendingDevicesList = ref<IDevice[]>([]);
 const recentDevicesList = ref<IDevice[]>([]);
 const stats = computed(() => statsStore.stats);
-const offlineDevices = computed(() => stats.value.registered_devices - stats.value.online_devices);
-const toggleDrawer = () => { isDrawerOpen.value = !isDrawerOpen.value; };
+const offlineDevices = computed(
+  () => stats.value.registered_devices - stats.value.online_devices,
+);
+const toggleDrawer = () => {
+  isDrawerOpen.value = !isDrawerOpen.value;
+};
 
 const formatTimeAgo = (date: string | Date) => {
   if (!date) return "Unknown";
   return moment(date).fromNow();
 };
 
-const handleAccept = async (uid: string) => {
-  try {
-    await devicesStore.acceptDevice(uid);
-    await fetchStats();
-    await fetchPendingDevices();
-    snackbar.showSuccess("Device accepted successfully");
-  } catch (error: unknown) {
-    snackbar.showError("Failed to accept device");
-    handleError(error);
-  }
-};
-
-const handleReject = async (uid: string) => {
-  try {
-    await devicesStore.rejectDevice(uid);
-    await fetchStats();
-    await fetchPendingDevices();
-    snackbar.showSuccess("Device rejected successfully");
-  } catch (error: unknown) {
-    snackbar.showError("Failed to reject device");
-    handleError(error);
-  }
+const handleUpdate = async () => {
+  await fetchStats();
+  await fetchPendingDevices();
+  await fetchRecentDevices();
 };
 
 const fetchStats = async () => {
@@ -389,8 +368,10 @@ const fetchPendingDevices = async () => {
 const fetchRecentDevices = async () => {
   try {
     await devicesStore.fetchDeviceList({ status: "accepted" });
-    recentDevicesList.value = [...devicesStore.devices]
-      .sort((a, b) => new Date(b.last_seen).getTime() - new Date(a.last_seen).getTime());
+    recentDevicesList.value = [...devicesStore.devices].sort(
+      (a, b) =>
+        new Date(b.last_seen).getTime() - new Date(a.last_seen).getTime(),
+    );
   } catch (error: unknown) {
     handleError(error);
   }
@@ -406,8 +387,7 @@ defineExpose({
   toggleDrawer,
   formatTimeAgo,
   isDrawerOpen,
-  handleAccept,
-  handleReject,
+  handleUpdate,
   activeTab,
   pendingDevicesList,
   recentDevicesList,

ui/src/components/Devices/DeviceActionButton.vue

@@ -1,16 +1,13 @@
 <template>
   <div>
     <v-btn
-      v-if="isInNotification"
+      v-if="isInDevicesDropdown"
       v-bind="$attrs"
-      size="x-small"
-      color="primary"
-      data-test="notification-action-button"
+      size="small"
+      variant="flat"
+      :text="capitalizeText(action)"
       @click="showDialog = true"
-    >
-      <v-icon>{{ icon }}</v-icon>
-      Accept
-    </v-btn>
+    />
     <v-list-item
       v-else
       data-test="list-item"
@@ -87,14 +84,14 @@ import useStatsStore from "@/store/modules/stats";
 interface DeviceActionButtonProps {
   name?: string;
   uid: string;
-  isInNotification?: boolean;
+  isInDevicesDropdown?: boolean;
   action?: "accept" | "reject" | "remove";
   variant: string;
 }
 
 const props = withDefaults(defineProps<DeviceActionButtonProps>(), {
   name: "Device",
-  isInNotification: false,
+  isInDevicesDropdown: false,
   action: "accept",
 });
 
@@ -192,7 +189,7 @@ const handleClick = async () => {
   }
 };
 
-defineExpose({ showDialog, canPerformDeviceAction });
+defineExpose({ showDialog, canPerformDeviceAction, handleClick });
 </script>
 
 <style scoped>