feat:[#698] added logic to filters button

Author: mario-nt

pages/admin/settings/users.vue

@@ -4,9 +4,10 @@
       <div class="pl-0.5 flex flex-col gap-2">
         <div class="flex gap-2">
           <TorrustSelect
-            v-model:selected="selectedFilters"
-            :options="filteringOptions"
+            v-model:selected="filters"
+            :options="filteringOptions.map(entry => ({ name: entry.name, value: entry.value }))"
             label="Filter by"
+            :multiple="true"
           />
           <TorrustSelect
             v-model:selected="selectedSorting"
@@ -59,7 +60,9 @@ const sortingOptions: Array<TorrustSelectOption> = [
 const route = useRoute();
 const router = useRouter();
 const rest = useRestApi();
-// const filters = useFilters();
+/* const filters =
+
+export const useTags = () => useState<Array<TorrentTag>>("tags", () => new Array<TorrentTag>()); */
 
 const defaultPageSize = 50;
 const queryPageSize = isNaN(route.query?.pageSize) ? defaultPageSize : parseInt(route.query?.pageSize as string, 10);
@@ -68,8 +71,21 @@ const userProfiles: Ref<Array<UserProfile>> = ref([]);
 const userProfilesTotal = ref(0);
 const currentPage: Ref<number> = ref(Number(route.query?.page as string) || 1);
 const searchQuery: Ref<string> = ref(null);
+const itemsFilters: Ref<string> = ref(route.query?.filters as string || filteringOptions[0].value);
+  const queryFilters = route.query?.filters as string[] || [];
+  const filters: Ref<string[]> = ref(Array.isArray(queryFilters) ? queryFilters : [queryFilters]);
 const itemsSorting: Ref<string> = ref(route.query?.sorting as string || sortingOptions[0].value);
 
+/* const selectedFilters = computed({
+  get () {
+    return itemsFilters.value;
+  },
+  set (value) {
+    itemsFilters.value = value;
+    currentPage.value = 1;
+  }
+}); */
+
 const selectedSorting = computed({
   get () {
     return [itemsSorting.value];
@@ -82,15 +98,23 @@ const selectedSorting = computed({
 
 watch(() => route.fullPath, () => {
   searchQuery.value = route.query.search as string ?? null;
+  /* itemsFilters.value = route.query.filters as string ?? filteringOptions[0].value; */
   itemsSorting.value = route.query.sorting as string ?? sortingOptions[0].value;
   currentPage.value = isNaN(route.query.page) ? 1 : parseInt(route.query.page);
   pageSize.value = isNaN(route.query.pageSize) ? defaultPageSize : parseInt(route.query.pageSize);
+
+  // Ensure tagFilters is always an array of strings
+  filters.value = Array.isArray(route.query.filters)
+    ? route.query.filters as string[]
+    : (route.query.filters ? [route.query.filters as string] : []);
 });
 
 watch(currentPage, () => {
   router.push({
     query: {
       search: searchQuery.value,
+      /* filters: itemsFilters.value ? itemsFilters.value : filteringOptions[0].value, */
+      filters: filters.value.length > 0 ? filters.value : [],
       sorting: itemsSorting.value ? itemsSorting.value : sortingOptions[0].value,
       pageSize: pageSize.value,
       page: currentPage.value
@@ -101,10 +125,25 @@ watch(currentPage, () => {
 });
 
 // Resets the current page value to 1 when the page size is changed to display results correctly
-watch([pageSize, searchQuery], () => {
+/* watch([pageSize, searchQuery, selectedFilters], () => {
+  router.push({
+    query: {
+      search: searchQuery.value,
+      filters: selectedFilters.value.length > 0 ? selectedFilters.value : [],
+      sorting: itemsSorting.value ? itemsSorting.value : sortingOptions[0].value,
+      pageSize: pageSize.value,
+      page: 1
+    }
+  });
+
+  loadUserProfiles();
+}); */
+
+watch([pageSize, searchQuery, filters], () => {
   router.push({
     query: {
       search: searchQuery.value,
+      filters: filters.value.length > 0 ? filters.value : [],
       sorting: itemsSorting.value ? itemsSorting.value : sortingOptions[0].value,
       pageSize: pageSize.value,
       page: 1
@@ -116,6 +155,7 @@ watch([pageSize, searchQuery], () => {
 
 onActivated(() => {
   searchQuery.value = route.query.search as string ?? null;
+  filters.value = route.query.filters as string[] ?? null;
   itemsSorting.value = route.query.sorting as string ?? sortingOptions[0].value;
   pageSize.value = route.query.pageSize as number ?? defaultPageSize;
   currentPage.value = route.query.page as number ?? 1;
@@ -129,6 +169,7 @@ onMounted(() => {
 function loadUserProfiles () {
   rest.value.user.getUserProfiles(
     {
+      filters: filters.value,
       pageSize: pageSize.value,
       page: currentPage.value,
       searchQuery: searchQuery.value