fix(ui): persist filters and sorting in several admin stores

ui/admin/src/components/Device/DeviceList.vue

@@ -151,7 +151,6 @@ const headers = ref([
 const fetchDevices = async () => {
   try {
     loading.value = true;
-
     await devicesStore.fetchDeviceList({
       perPage: itemsPerPage.value,
       page: page.value,
@@ -161,8 +160,9 @@ const fetchDevices = async () => {
   } catch (error) {
     handleError(error);
     snackbar.showError("Failed to fetch devices.");
+  } finally {
+    loading.value = false;
   }
-  loading.value = false;
 };
 
 const getSortOrder = () => sortOrder.value === "asc" ? "desc" : "asc";

ui/admin/src/components/Namespace/NamespaceList.vue

@@ -108,8 +108,9 @@ const fetchNamespaces = async () => {
   } catch (error) {
     handleError(error);
     snackbar.showError("Failed to fetch namespaces.");
+  } finally {
+    loading.value = false;
   }
-  loading.value = false;
 };
 
 const sumDevicesCount = (namespace: IAdminNamespace) => {

ui/admin/src/components/User/UserList.vue

@@ -135,13 +135,13 @@ const fetchUsers = async () => {
     await usersStore.fetchUsersList({
       perPage: itemsPerPage.value,
       page: page.value,
-      filter: "",
     });
   } catch (error) {
     handleError(error);
     snackbar.showError("Failed to fetch users.");
+  } finally {
+    loading.value = false;
   }
-  loading.value = false;
 };
 
 const loginWithToken = async (userId: string) => {

ui/admin/src/store/modules/devices.ts

@@ -4,35 +4,51 @@ import { IAdminDevice } from "@admin/interfaces/IDevice";
 import * as devicesApi from "../api/devices";
 
 const useDevicesStore = defineStore("devices", () => {
-  const devices = ref<Array<IAdminDevice>>([]);
+  const devices = ref<IAdminDevice[]>([]);
   const deviceCount = ref(0);
 
+  const currentFilter = ref<string>("");
+  const currentSortField = ref<string | undefined>(undefined);
+  const currentSortOrder = ref<"asc" | "desc" | undefined>(undefined);
+
+  const setFilter = (filter: string) => { currentFilter.value = filter || ""; };
+  const setSort = (field?: string, order?: "asc" | "desc") => {
+    currentSortField.value = field;
+    currentSortOrder.value = order;
+  };
+
   const fetchDeviceList = async (data?: {
     page?: number;
     perPage?: number;
     filter?: string;
     sortField?: string;
     sortOrder?: "asc" | "desc";
   }) => {
-    const res = await devicesApi.getDevices(
-      data?.page || 1,
-      data?.perPage || 10,
-      data?.filter,
-      data?.sortField,
-      data?.sortOrder,
-    );
-    devices.value = res.data as IAdminDevice[];
+    const page = data?.page || 1;
+    const perPage = data?.perPage || 10;
+    const filter = data?.filter ?? currentFilter.value ?? "";
+    const sortField = data?.sortField ?? currentSortField.value;
+    const sortOrder = data?.sortOrder ?? currentSortOrder.value;
+
+    const res = await devicesApi.getDevices(page, perPage, filter, sortField, sortOrder);
+    devices.value = res.data as unknown as IAdminDevice[];
     deviceCount.value = parseInt(res.headers["x-total-count"], 10);
   };
 
   const fetchDeviceById = async (uid: string) => {
     const res = await devicesApi.getDevice(uid);
-    return res.data as IAdminDevice;
+    return res.data as unknown as IAdminDevice;
   };
 
   return {
     devices,
     deviceCount,
+    currentFilter,
+    currentSortField,
+    currentSortOrder,
+    setFilter,
+    setSort,
+
     fetchDeviceList,
     fetchDeviceById,
   };

ui/admin/src/store/modules/namespaces.ts

@@ -3,12 +3,22 @@ import { ref } from "vue";
 import { IAdminNamespace } from "@admin/interfaces/INamespace";
 import * as namespacesApi from "../api/namespaces";
 
-const useNamespacesStore = defineStore("namespace", () => {
+const useNamespacesStore = defineStore("namespaces", () => {
   const namespaces = ref<IAdminNamespace[]>([]);
   const namespaceCount = ref(0);
 
+  const currentFilter = ref<string>("");
+
+  const setFilter = (filter: string) => {
+    currentFilter.value = filter || "";
+  };
+
   const fetchNamespaceList = async (data?: { page?: number; perPage?: number; filter?: string }) => {
-    const res = await namespacesApi.fetchNamespaces(data?.page || 1, data?.perPage || 10, data?.filter);
+    const page = data?.page || 1;
+    const perPage = data?.perPage || 10;
+    const filter = data?.filter ?? currentFilter.value ?? "";
+
+    const res = await namespacesApi.fetchNamespaces(page, perPage, filter);
     namespaces.value = res.data as IAdminNamespace[];
     namespaceCount.value = parseInt(res.headers["x-total-count"], 10);
   };
@@ -30,6 +40,8 @@ const useNamespacesStore = defineStore("namespace", () => {
   return {
     namespaces,
     namespaceCount,
+    currentFilter,
+    setFilter,
     fetchNamespaceList,
     fetchNamespaceById,
     exportNamespacesToCsv,

ui/admin/src/store/modules/users.ts

@@ -7,8 +7,15 @@ const useUsersStore = defineStore("users", () => {
   const users = ref<IAdminUser[]>([]);
   const usersCount = ref<number>(0);
 
+  const currentFilter = ref<string>("");
+
+  const setFilter = (filter: string) => {
+    currentFilter.value = filter || "";
+  };
+
   const fetchUsersList = async (data?: { page?: number; perPage?: number; filter?: string }) => {
-    const res = await usersApi.fetchUsers(data?.page || 1, data?.perPage || 10, data?.filter);
+    const filter = data?.filter ?? currentFilter.value ?? "";
+    const res = await usersApi.fetchUsers(data?.page || 1, data?.perPage || 10, filter);
 
     users.value = res.data as IAdminUser[];
     usersCount.value = parseInt(res.headers["x-total-count"], 10);
@@ -45,6 +52,8 @@ const useUsersStore = defineStore("users", () => {
   return {
     users,
     usersCount,
+    currentFilter,
+    setFilter,
     fetchUsersList,
     exportUsersToCsv,
     addUser,

ui/admin/src/views/Device.vue

@@ -38,17 +38,18 @@ const searchDevices = () => {
 
   if (filter.value) {
     const filterToEncodeBase64 = [
-      {
-        type: "property",
-        params: { name: "name", operator: "contains", value: filter.value },
-      },
+      { type: "property", params: { name: "name", operator: "contains", value: filter.value } },
     ];
     encodedFilter = btoa(JSON.stringify(filterToEncodeBase64));
   }
 
+  devicesStore.setFilter(encodedFilter);
+
   try {
-    devicesStore.fetchDeviceList({ filter: encodedFilter });
-  } catch { snackbar.showError("Failed to fetch the devices."); }
+    devicesStore.fetchDeviceList({ filter: encodedFilter, page: 1 });
+  } catch {
+    snackbar.showError("Failed to fetch the devices.");
+  }
 };
 
 defineExpose({ filter });

ui/admin/src/views/Namespaces.vue

@@ -40,7 +40,10 @@ const searchNamespaces = async () => {
   }];
 
   const encodedFilter = filter.value ? btoa(JSON.stringify(filterToEncodeBase64)) : "";
-  await namespacesStore.fetchNamespaceList({ filter: encodedFilter });
+
+  namespacesStore.setFilter(encodedFilter);
+
+  await namespacesStore.fetchNamespaceList({ filter: encodedFilter, page: 1 });
 };
 
 defineExpose({ filter });

ui/admin/src/views/Users.vue

@@ -38,13 +38,13 @@ const filter = ref("");
 
 const searchUsers = async () => {
   const filterToEncodeBase64 = [
-    {
-      type: "property",
-      params: { name: "username", operator: "contains", value: filter.value },
-    },
+    { type: "property", params: { name: "username", operator: "contains", value: filter.value } },
   ];
 
   const encodedFilter = filter.value ? btoa(JSON.stringify(filterToEncodeBase64)) : "";
+
+  usersStore.setFilter(encodedFilter);
+
   await usersStore.fetchUsersList({ filter: encodedFilter });
 };