diff --git a/packages/web-app-admin-settings/src/views/Users.vue b/packages/web-app-admin-settings/src/views/Users.vue index 1f6152744bd..fb02cacc27f 100644 --- a/packages/web-app-admin-settings/src/views/Users.vue +++ b/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,23 @@ export default defineComponent({ Object.assign(user, data) }) + const resetPagination = () => { + return router.push({ ...unref(route), query: { ...unref(route).query, page: '1' } }) + } + const filterGroups = (groups) => { filters.groups.ids.value = groups.map((g) => g.id) loadUsersTask.perform() selectedUsers.value = [] additionalUserDataLoadedForUserIds.value = [] + return resetPagination() } const filterRoles = (roles) => { filters.roles.ids.value = roles.map((r) => r.id) loadUsersTask.perform() selectedUsers.value = [] additionalUserDataLoadedForUserIds.value = [] + return resetPagination() } const selectedPersonalDrives = ref([]) diff --git a/packages/web-pkg/src/components/ItemFilter.vue b/packages/web-pkg/src/components/ItemFilter.vue index c045bce7af2..86302d82af8 100644 --- a/packages/web-pkg/src/components/ItemFilter.vue +++ b/packages/web-pkg/src/components/ItemFilter.vue @@ -115,7 +115,7 @@ export default defineComponent({ const queryParam = `q_${props.filterName}` const currentRouteQuery = useRouteQuery(queryParam) const setRouteQuery = () => { - router.push({ + return router.push({ query: { ...omit(unref(currentRoute).query, [queryParam]), ...(!!unref(selectedItems).length && { @@ -136,7 +136,7 @@ export default defineComponent({ const isSelectionAllowed = (item) => { return props.allowMultiple || !unref(selectedItems).length || isItemSelected(item) } - const toggleItemSelection = (item) => { + const toggleItemSelection = async (item) => { if (!isSelectionAllowed(item)) { return } @@ -145,8 +145,8 @@ export default defineComponent({ } else { selectedItems.value.push(item) } + await setRouteQuery() emit('selectionChange', unref(selectedItems)) - setRouteQuery() } const sortItems = (items) => { @@ -247,4 +247,3 @@ export default defineComponent({ } } -