Reset pagination after filtering users

packages/web-app-admin-settings/src/views/Users.vue

@@ -164,10 +164,21 @@ import {
   useCapabilitySpacesMaxQuota,
   useClientService,
   useLoadingService,
+  useRoute,
   useRouteQuery,
+  useRouter,
   useStore
 } from 'web-pkg/src/composables'
-import { computed, defineComponent, ref, onBeforeUnmount, onMounted, unref, watch } from 'vue'
+import {
+  computed,
+  defineComponent,
+  ref,
+  onBeforeUnmount,
+  onMounted,
+  unref,
+  watch,
+  nextTick
+} from 'vue'
 import { useTask } from 'vue-concurrency'
 import { eventBus } from 'web-pkg/src/services/eventBus'
 import { mapActions, mapMutations, mapState } from 'vuex'
@@ -208,6 +219,8 @@ export default defineComponent({
   },
   setup() {
     const { $gettext, $ngettext } = useGettext()
+    const router = useRouter()
+    const route = useRoute()
     const store = useStore()
     const accessToken = useAccessToken({ store })
     const clientService = useClientService()
@@ -338,17 +351,27 @@ export default defineComponent({
       Object.assign(user, data)
     })
 
-    const filterGroups = (groups) => {
+    const resetPagination = () => {
+      return router.push({ ...unref(route), query: { ...unref(route).query, page: '1' } })
+    }
+
+    const filterGroups = async (groups) => {
       filters.groups.ids.value = groups.map((g) => g.id)
       loadUsersTask.perform()
       selectedUsers.value = []
       additionalUserDataLoadedForUserIds.value = []
+      // need to await the router change of the filter component
+      await nextTick()
+      return resetPagination()
     }
-    const filterRoles = (roles) => {
+    const filterRoles = async (roles) => {
       filters.roles.ids.value = roles.map((r) => r.id)
       loadUsersTask.perform()
       selectedUsers.value = []
       additionalUserDataLoadedForUserIds.value = []
+      // need to await the router change of the filter component
+      await nextTick()
+      return resetPagination()
     }
 
     const selectedPersonalDrives = ref([])