fix(ui): fix device/container sorting in DeviceTable

luizhf42 · luizhf42 · commit 071aed548e7b · 2025-06-18T11:03:59.000-03:00
diff --git a/ui/src/components/Containers/ContainerList.vue b/ui/src/components/Containers/ContainerList.vue
@@ -12,7 +12,7 @@
 
 <script setup lang="ts">
 import DeviceTable from "../Tables/DeviceTable.vue";
-import { FetchContainerParams, IContainerMethods } from "@/interfaces/IContainer";
+import { FetchContainerParams, IContainerMethods, SortContainersParams } from "@/interfaces/IContainer";
 import { useStore } from "@/store";
 
 const store = useStore();
@@ -28,6 +28,13 @@ const fetchDevices = async ({ perPage, page, filter, status, sortStatusField, so
   });
 };
 
+const setSort = ({ sortStatusField, sortStatusString }: SortContainersParams) => {
+  store.dispatch("container/setSortStatus", {
+    sortStatusField,
+    sortStatusString,
+  });
+};
+
 const getFilter = () => store.getters["container/getFilter"];
 const getList = () => store.getters["container/list"];
 const getSortStatusField = () => store.getters["container/getSortStatusField"];
@@ -36,6 +43,7 @@ const getNumber = () => store.getters["container/getNumberContainers"];
 
 const storeMethods: IContainerMethods = {
   fetchDevices,
+  setSort,
   getFilter,
   getList,
   getSortStatusField,
diff --git a/ui/src/components/Containers/ContainerPendingList.vue b/ui/src/components/Containers/ContainerPendingList.vue
@@ -12,7 +12,7 @@
 
 <script setup lang="ts">
 import DeviceTable from "../Tables/DeviceTable.vue";
-import { FetchContainerParams, IContainerMethods } from "@/interfaces/IContainer";
+import { FetchContainerParams, IContainerMethods, SortContainersParams } from "@/interfaces/IContainer";
 import { useStore } from "@/store";
 
 const store = useStore();
@@ -28,6 +28,13 @@ const fetchDevices = async ({ perPage, page, filter, status, sortStatusField, so
   });
 };
 
+const setSort = ({ sortStatusField, sortStatusString }: SortContainersParams) => {
+  store.dispatch("container/setSortStatus", {
+    sortStatusField,
+    sortStatusString,
+  });
+};
+
 const getFilter = () => store.getters["container/getFilter"];
 const getList = () => store.getters["container/list"];
 const getSortStatusField = () => store.getters["container/getSortStatusField"];
@@ -36,6 +43,7 @@ const getNumber = () => store.getters["container/getNumberContainers"];
 
 const storeMethods: IContainerMethods = {
   fetchDevices,
+  setSort,
   getFilter,
   getList,
   getSortStatusField,
diff --git a/ui/src/components/Containers/ContainerRejectedList.vue b/ui/src/components/Containers/ContainerRejectedList.vue
@@ -12,7 +12,7 @@
 
 <script setup lang="ts">
 import DeviceTable from "../Tables/DeviceTable.vue";
-import { FetchContainerParams, IContainerMethods } from "@/interfaces/IContainer";
+import { FetchContainerParams, IContainerMethods, SortContainersParams } from "@/interfaces/IContainer";
 import { useStore } from "@/store";
 
 const store = useStore();
@@ -28,6 +28,13 @@ const fetchDevices = async ({ perPage, page, filter, status, sortStatusField, so
   });
 };
 
+const setSort = ({ sortStatusField, sortStatusString }: SortContainersParams) => {
+  store.dispatch("container/setSortStatus", {
+    sortStatusField,
+    sortStatusString,
+  });
+};
+
 const getFilter = () => store.getters["container/getFilter"];
 const getList = () => store.getters["container/list"];
 const getSortStatusField = () => store.getters["container/getSortStatusField"];
@@ -36,6 +43,7 @@ const getNumber = () => store.getters["container/getNumberContainers"];
 
 const storeMethods: IContainerMethods = {
   fetchDevices,
+  setSort,
   getFilter,
   getList,
   getSortStatusField,
diff --git a/ui/src/components/Devices/DeviceList.vue b/ui/src/components/Devices/DeviceList.vue
@@ -12,7 +12,7 @@
 
 <script setup lang="ts">
 import DeviceTable from "../Tables/DeviceTable.vue";
-import { FetchDevicesParams, IDeviceMethods } from "@/interfaces/IDevice";
+import { FetchDevicesParams, IDeviceMethods, SortDevicesParams } from "@/interfaces/IDevice";
 import { useStore } from "@/store";
 
 const store = useStore();
@@ -28,6 +28,13 @@ const fetchDevices = async ({ perPage, page, filter, status, sortStatusField, so
   });
 };
 
+const setSort = ({ sortStatusField, sortStatusString }: SortDevicesParams) => {
+  store.dispatch("devices/setSortStatus", {
+    sortStatusField,
+    sortStatusString,
+  });
+};
+
 const getFilter = () => store.getters["devices/getFilter"];
 const getList = () => store.getters["devices/list"];
 const getSortStatusField = () => store.getters["devices/getSortStatusField"];
@@ -36,6 +43,7 @@ const getNumber = () => store.getters["devices/getNumberDevices"];
 
 const storeMethods: IDeviceMethods = {
   fetchDevices,
+  setSort,
   getFilter,
   getList,
   getSortStatusField,
diff --git a/ui/src/components/Devices/DevicePendingList.vue b/ui/src/components/Devices/DevicePendingList.vue
@@ -12,7 +12,7 @@
 
 <script setup lang="ts">
 import DeviceTable from "../Tables/DeviceTable.vue";
-import { FetchDevicesParams, IDeviceMethods } from "@/interfaces/IDevice";
+import { FetchDevicesParams, IDeviceMethods, SortDevicesParams } from "@/interfaces/IDevice";
 import { useStore } from "@/store";
 
 const store = useStore();
@@ -28,6 +28,13 @@ const fetchDevices = async ({ perPage, page, filter, status, sortStatusField, so
   });
 };
 
+const setSort = ({ sortStatusField, sortStatusString }: SortDevicesParams) => {
+  store.dispatch("devices/setSortStatus", {
+    sortStatusField,
+    sortStatusString,
+  });
+};
+
 const getFilter = () => store.getters["devices/getFilter"];
 const getList = () => store.getters["devices/list"];
 const getSortStatusField = () => store.getters["devices/getSortStatusField"];
@@ -36,6 +43,7 @@ const getNumber = () => store.getters["devices/getNumberDevices"];
 
 const storeMethods: IDeviceMethods = {
   fetchDevices,
+  setSort,
   getFilter,
   getList,
   getSortStatusField,
diff --git a/ui/src/components/Devices/DeviceRejectedList.vue b/ui/src/components/Devices/DeviceRejectedList.vue
@@ -12,7 +12,7 @@
 
 <script setup lang="ts">
 import DeviceTable from "../Tables/DeviceTable.vue";
-import { FetchDevicesParams, IDeviceMethods } from "@/interfaces/IDevice";
+import { FetchDevicesParams, IDeviceMethods, SortDevicesParams } from "@/interfaces/IDevice";
 import { useStore } from "@/store";
 
 const store = useStore();
@@ -28,6 +28,13 @@ const fetchDevices = async ({ perPage, page, filter, status, sortStatusField, so
   });
 };
 
+const setSort = ({ sortStatusField, sortStatusString }: SortDevicesParams) => {
+  store.dispatch("devices/setSortStatus", {
+    sortStatusField,
+    sortStatusString,
+  });
+};
+
 const getFilter = () => store.getters["devices/getFilter"];
 const getList = () => store.getters["devices/list"];
 const getSortStatusField = () => store.getters["devices/getSortStatusField"];
@@ -36,6 +43,7 @@ const getNumber = () => store.getters["devices/getNumberDevices"];
 
 const storeMethods: IDeviceMethods = {
   fetchDevices,
+  setSort,
   getFilter,
   getList,
   getSortStatusField,
diff --git a/ui/src/components/Tables/DeviceTable.vue b/ui/src/components/Tables/DeviceTable.vue
@@ -277,7 +277,7 @@ const props = defineProps({
   },
 });
 
-const { fetchDevices, getFilter, getList, getSortStatusField, getSortStatusString, getNumber } = props.storeMethods;
+const { fetchDevices, setSort, getFilter, getList, getSortStatusField, getSortStatusString, getNumber } = props.storeMethods;
 
 const router = useRouter();
 const loading = ref(false);
@@ -377,13 +377,16 @@ const getDevices = async (perPageValue: number, pageValue: number, filter: strin
 };
 
 const getSortOrder = () => {
-  const currentOrder = store.getters["apiKeys/getSortStatusString"];
+  const currentOrder = getSortStatusString();
   if (currentOrder === "asc") return "desc";
   return "asc";
 };
 
 const sortByItem = async (field: string) => {
-  await fetchDevices({ sortStatusField: field, sortStatusString: getSortOrder() });
+  setSort({
+    sortStatusField: field,
+    sortStatusString: getSortOrder(),
+  });
   await getDevices(itemsPerPage.value, page.value, filter.value);
 };
 
diff --git a/ui/src/interfaces/IContainer.ts b/ui/src/interfaces/IContainer.ts
@@ -62,11 +62,18 @@ export interface FetchContainerParams {
   sortStatusField: string;
   sortStatusString: string;
 }
+
+export interface SortContainersParams {
+  sortStatusField: string;
+  sortStatusString: string;
+}
+
 export interface IContainerMethods {
-    fetchDevices: (params: FetchContainerParams) => Promise<void>;
-    getFilter: () => string;
-    getList: () => IContainer[];
-    getSortStatusField: () => string;
-    getSortStatusString: () => string;
-    getNumber: () => number;
+  fetchDevices: (params: FetchContainerParams) => Promise<void>;
+  setSort: (params: SortContainersParams) => void;
+  getFilter: () => string;
+  getList: () => IContainer[];
+  getSortStatusField: () => string;
+  getSortStatusString: () => string;
+  getNumber: () => number;
 }
diff --git a/ui/src/interfaces/IDevice.ts b/ui/src/interfaces/IDevice.ts
@@ -57,11 +57,18 @@ export interface FetchDevicesParams {
   sortStatusField: string;
   sortStatusString: string;
 }
+
+export interface SortDevicesParams {
+  sortStatusField: string;
+  sortStatusString: string;
+}
+
 export interface IDeviceMethods {
-    fetchDevices: (params: FetchDevicesParams) => Promise<void>;
-    getFilter: () => string;
-    getList: () => IDevice[];
-    getSortStatusField: () => string;
-    getSortStatusString: () => string;
-    getNumber: () => number;
+  fetchDevices: (params: FetchDevicesParams) => Promise<void>;
+  setSort: (params: SortDevicesParams) => void;
+  getFilter: () => string;
+  getList: () => IDevice[];
+  getSortStatusField: () => string;
+  getSortStatusString: () => string;
+  getNumber: () => number;
 }
diff --git a/ui/src/store/modules/container.ts b/ui/src/store/modules/container.ts
@@ -79,6 +79,11 @@ export const container: Module<ContainerState, State> = {
       state.filter = filter;
     },
 
+    setSortStatus: (state, data) => {
+      state.sortStatusField = data.sortStatusField;
+      state.sortStatusString = data.sortStatusString;
+    },
+
     clearListContainers: (state) => {
       state.containers = [];
       state.numberContainers = 0;
@@ -181,5 +186,9 @@ export const container: Module<ContainerState, State> = {
     updateDeviceTag: async (context, data) => {
       await apiContainer.updateContainerTag(data);
     },
+
+    setSortStatus({ commit }, data) {
+      commit("setSortStatus", data);
+    },
   },
 };
diff --git a/ui/src/store/modules/devices.ts b/ui/src/store/modules/devices.ts
@@ -336,7 +336,7 @@ export const devices: Module<DevicesState, State> = {
       context.commit("setDevicesSelected", data);
     },
 
-    async setSortStatus({ commit }, data) {
+    setSortStatus({ commit }, data) {
       commit("setSortStatusDevice", data);
     },
 
diff --git a/ui/tests/components/Tables/DeviceTable.spec.ts b/ui/tests/components/Tables/DeviceTable.spec.ts
@@ -147,6 +147,7 @@ describe("Device Table", () => {
 
   const mockStoreMethods = {
     fetchDevices: vi.fn(),
+    setSort: vi.fn(),
     getFilter: vi.fn(),
     getList: () => devices as IDevice[],
     getSortStatusField: vi.fn(),
