diff --git a/pages/admin/settings/users.vue b/pages/admin/settings/users.vue index 80ab0be..45bb1e9 100644 --- a/pages/admin/settings/users.vue +++ b/pages/admin/settings/users.vue @@ -1,18 +1,37 @@ @@ -23,6 +42,20 @@ import { notify } from "notiwind-ts"; import type { UserProfile } from "torrust-index-types-lib"; import { onMounted, ref, watch } from "#imports"; import { useRestApi } from "~/composables/states"; +import type { TorrustSelectOption } from "components/TorrustSelect.vue"; + +const filteringOptions: Array = [ + { name: "Email verified", value: "EmailVerified" }, + { name: "Email not verified", value: "EmailNotVerified" }, + { name: "Torrent uploader", value: "TorrentUploader" } +]; + +const sortingOptions: Array = [ + { name: "Registration date (Newest first)", value: "DateRegisteredNewest" }, + { name: "Registration date (Oldest first)", value: "DateRegisteredOldest" }, + { name: "Username (A to Z)", value: "UsernameAZ" }, + { name: "Username (Z to A)", value: "UsernameZA" } +]; const route = useRoute(); const router = useRouter(); @@ -35,17 +68,26 @@ const userProfiles: Ref> = ref([]); const userProfilesTotal = ref(0); const currentPage: Ref = ref(Number(route.query?.page as string) || 1); const searchQuery: Ref = ref(null); +const queryFilters = route.query?.filters as string[] || []; +const filters: Ref = ref(Array.isArray(queryFilters) ? queryFilters : [queryFilters]); +const itemsSorting: Ref = ref(route.query?.sorting as string || sortingOptions[0].value); -watch(() => route.fullPath, () => { - searchQuery.value = route.query.search as string ?? null; - currentPage.value = isNaN(route.query.page) ? 1 : parseInt(route.query.page); - pageSize.value = isNaN(route.query.pageSize) ? defaultPageSize : parseInt(route.query.pageSize); +const selectedSorting = computed({ + get () { + return [itemsSorting.value]; + }, + set (value) { + itemsSorting.value = value[0]; + currentPage.value = 1; + } }); watch(currentPage, () => { - router.push({ + router.replace({ query: { search: searchQuery.value, + filters: filters.value.length > 0 ? filters.value : [], + sorting: itemsSorting.value ? itemsSorting.value : sortingOptions[0].value, pageSize: pageSize.value, page: currentPage.value } @@ -54,11 +96,12 @@ watch(currentPage, () => { loadUserProfiles(); }); -// Resets the current page value to 1 when the page size is changed to display results correctly -watch([pageSize, searchQuery], () => { - router.push({ +watch([pageSize, searchQuery, filters, itemsSorting], () => { + router.replace({ query: { search: searchQuery.value, + filters: filters.value.length > 0 ? filters.value : [], + sorting: itemsSorting.value ? itemsSorting.value : sortingOptions[0].value, pageSize: pageSize.value, page: 1 } @@ -69,6 +112,8 @@ 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; }); @@ -81,6 +126,8 @@ onMounted(() => { function loadUserProfiles () { rest.value.user.getUserProfiles( { + filters: filters.value, + sorting: itemsSorting.value, pageSize: pageSize.value, page: currentPage.value, searchQuery: searchQuery.value