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

ui/src/components/Containers/ContainerList.vue

@@ -4,42 +4,13 @@
       variant="container"
       header="primary"
       status="accepted"
-      :storeMethods="storeMethods"
+      :storeMethods="getContainerStoreMethods()"
       data-test="container-table"
     />
   </div>
 </template>
 
 <script setup lang="ts">
+import { getContainerStoreMethods } from "@/utils/storeMethods";
 import DeviceTable from "../Tables/DeviceTable.vue";
-import { FetchContainerParams, IContainerMethods } from "@/interfaces/IContainer";
-import { useStore } from "@/store";
-
-const store = useStore();
-
-const fetchDevices = async ({ perPage, page, filter, status, sortStatusField, sortStatusString }: FetchContainerParams) => {
-  await store.dispatch("container/fetch", {
-    perPage,
-    page,
-    filter,
-    status,
-    sortStatusField,
-    sortStatusString,
-  });
-};
-
-const getFilter = () => store.getters["container/getFilter"];
-const getList = () => store.getters["container/list"];
-const getSortStatusField = () => store.getters["container/getSortStatusField"];
-const getSortStatusString = () => store.getters["container/getSortStatusString"];
-const getNumber = () => store.getters["container/getNumberContainers"];
-
-const storeMethods: IContainerMethods = {
-  fetchDevices,
-  getFilter,
-  getList,
-  getSortStatusField,
-  getSortStatusString,
-  getNumber,
-};
 </script>

ui/src/components/Containers/ContainerPendingList.vue

@@ -4,42 +4,13 @@
       variant="container"
       header="secondary"
       status="pending"
-      :storeMethods="storeMethods"
+      :storeMethods="getContainerStoreMethods()"
       data-test="container-table"
     />
   </div>
 </template>
 
 <script setup lang="ts">
+import { getContainerStoreMethods } from "@/utils/storeMethods";
 import DeviceTable from "../Tables/DeviceTable.vue";
-import { FetchContainerParams, IContainerMethods } from "@/interfaces/IContainer";
-import { useStore } from "@/store";
-
-const store = useStore();
-
-const fetchDevices = async ({ perPage, page, filter, status, sortStatusField, sortStatusString }: FetchContainerParams) => {
-  await store.dispatch("container/fetch", {
-    perPage,
-    page,
-    filter,
-    status,
-    sortStatusField,
-    sortStatusString,
-  });
-};
-
-const getFilter = () => store.getters["container/getFilter"];
-const getList = () => store.getters["container/list"];
-const getSortStatusField = () => store.getters["container/getSortStatusField"];
-const getSortStatusString = () => store.getters["container/getSortStatusString"];
-const getNumber = () => store.getters["container/getNumberContainers"];
-
-const storeMethods: IContainerMethods = {
-  fetchDevices,
-  getFilter,
-  getList,
-  getSortStatusField,
-  getSortStatusString,
-  getNumber,
-};
 </script>

ui/src/components/Containers/ContainerRejectedList.vue

@@ -4,42 +4,13 @@
       variant="container"
       header="secondary"
       status="rejected"
-      :storeMethods="storeMethods"
+      :storeMethods="getContainerStoreMethods()"
       data-test="container-table"
     />
   </div>
 </template>
 
 <script setup lang="ts">
+import { getContainerStoreMethods } from "@/utils/storeMethods";
 import DeviceTable from "../Tables/DeviceTable.vue";
-import { FetchContainerParams, IContainerMethods } from "@/interfaces/IContainer";
-import { useStore } from "@/store";
-
-const store = useStore();
-
-const fetchDevices = async ({ perPage, page, filter, status, sortStatusField, sortStatusString }: FetchContainerParams) => {
-  await store.dispatch("container/fetch", {
-    perPage,
-    page,
-    filter,
-    status,
-    sortStatusField,
-    sortStatusString,
-  });
-};
-
-const getFilter = () => store.getters["container/getFilter"];
-const getList = () => store.getters["container/list"];
-const getSortStatusField = () => store.getters["container/getSortStatusField"];
-const getSortStatusString = () => store.getters["container/getSortStatusString"];
-const getNumber = () => store.getters["container/getNumberContainers"];
-
-const storeMethods: IContainerMethods = {
-  fetchDevices,
-  getFilter,
-  getList,
-  getSortStatusField,
-  getSortStatusString,
-  getNumber,
-};
 </script>

ui/src/components/Devices/DeviceList.vue

@@ -4,43 +4,13 @@
       variant="device"
       header="primary"
       status="accepted"
-      :storeMethods="storeMethods"
+      :storeMethods="getDeviceStoreMethods()"
       data-test="device-table"
     />
   </div>
 </template>
 
 <script setup lang="ts">
+import { getDeviceStoreMethods } from "@/utils/storeMethods";
 import DeviceTable from "../Tables/DeviceTable.vue";
-import { FetchDevicesParams, IDeviceMethods } from "@/interfaces/IDevice";
-import { useStore } from "@/store";
-
-const store = useStore();
-
-const fetchDevices = async ({ perPage, page, filter, status, sortStatusField, sortStatusString }: FetchDevicesParams) => {
-  await store.dispatch("devices/fetch", {
-    perPage,
-    page,
-    filter,
-    status,
-    sortStatusField,
-    sortStatusString,
-  });
-};
-
-const getFilter = () => store.getters["devices/getFilter"];
-const getList = () => store.getters["devices/list"];
-const getSortStatusField = () => store.getters["devices/getSortStatusField"];
-const getSortStatusString = () => store.getters["devices/getSortStatusString"];
-const getNumber = () => store.getters["devices/getNumberDevices"];
-
-const storeMethods: IDeviceMethods = {
-  fetchDevices,
-  getFilter,
-  getList,
-  getSortStatusField,
-  getSortStatusString,
-  getNumber,
-};
-
 </script>

ui/src/components/Devices/DevicePendingList.vue

@@ -4,43 +4,13 @@
       variant="device"
       header="secondary"
       status="pending"
-      :storeMethods="storeMethods"
+      :storeMethods="getDeviceStoreMethods()"
       data-test="device-table"
     />
   </div>
 </template>
 
 <script setup lang="ts">
+import { getDeviceStoreMethods } from "@/utils/storeMethods";
 import DeviceTable from "../Tables/DeviceTable.vue";
-import { FetchDevicesParams, IDeviceMethods } from "@/interfaces/IDevice";
-import { useStore } from "@/store";
-
-const store = useStore();
-
-const fetchDevices = async ({ perPage, page, filter, status, sortStatusField, sortStatusString }: FetchDevicesParams) => {
-  await store.dispatch("devices/fetch", {
-    perPage,
-    page,
-    filter,
-    status,
-    sortStatusField,
-    sortStatusString,
-  });
-};
-
-const getFilter = () => store.getters["devices/getFilter"];
-const getList = () => store.getters["devices/list"];
-const getSortStatusField = () => store.getters["devices/getSortStatusField"];
-const getSortStatusString = () => store.getters["devices/getSortStatusString"];
-const getNumber = () => store.getters["devices/getNumberDevices"];
-
-const storeMethods: IDeviceMethods = {
-  fetchDevices,
-  getFilter,
-  getList,
-  getSortStatusField,
-  getSortStatusString,
-  getNumber,
-};
-
 </script>

ui/src/components/Devices/DeviceRejectedList.vue

@@ -4,42 +4,13 @@
       variant="device"
       header="secondary"
       status="rejected"
-      :storeMethods="storeMethods"
+      :storeMethods="getDeviceStoreMethods()"
       data-test="device-table"
     />
   </div>
 </template>
 
 <script setup lang="ts">
+import { getDeviceStoreMethods } from "@/utils/storeMethods";
 import DeviceTable from "../Tables/DeviceTable.vue";
-import { FetchDevicesParams, IDeviceMethods } from "@/interfaces/IDevice";
-import { useStore } from "@/store";
-
-const store = useStore();
-
-const fetchDevices = async ({ perPage, page, filter, status, sortStatusField, sortStatusString }: FetchDevicesParams) => {
-  await store.dispatch("devices/fetch", {
-    perPage,
-    page,
-    filter,
-    status,
-    sortStatusField,
-    sortStatusString,
-  });
-};
-
-const getFilter = () => store.getters["devices/getFilter"];
-const getList = () => store.getters["devices/list"];
-const getSortStatusField = () => store.getters["devices/getSortStatusField"];
-const getSortStatusString = () => store.getters["devices/getSortStatusString"];
-const getNumber = () => store.getters["devices/getNumberDevices"];
-
-const storeMethods: IDeviceMethods = {
-  fetchDevices,
-  getFilter,
-  getList,
-  getSortStatusField,
-  getSortStatusString,
-  getNumber,
-};
 </script>

ui/src/components/Tables/DeviceTable.vue

@@ -257,10 +257,11 @@ import { displayOnlyTenCharacters } from "@/utils/string";
 import handleError from "@/utils/handleError";
 import { formatFullDateTime } from "@/utils/date";
 import CopyWarning from "@/components/User/CopyWarning.vue";
+import { IContainerMethods } from "@/interfaces/IContainer";
 
 const props = defineProps({
   storeMethods: {
-    type: Object as PropType<IDeviceMethods>,
+    type: Object as PropType<IDeviceMethods | IContainerMethods>,
     required: true,
   },
   status: {
@@ -277,7 +278,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 +378,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);
 };
 

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;
 }

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;
 }

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);
+    },
   },
 };

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);
     },