Merge pull request #522 from RWDai/fix/admin-users-server-pagination

Fix admin users server-side pagination

frontend/src/features/users/components/UserGroupsDialog.vue

@@ -274,7 +274,7 @@ import type {
 
 const props = defineProps<{
   open: boolean
-  users: User[]
+  usersVersion: number
 }>()
 
 const emit = defineEmits<{
@@ -295,8 +295,12 @@ const {
 const loading = ref(false)
 const saving = ref(false)
 const groups = ref<UserGroup[]>([])
+const dialogUsers = ref<User[]>([])
 const editingGroupId = ref<string | null>(null)
 const memberUserIds = ref<string[]>([])
+const USER_OPTIONS_CACHE_TTL_MS = 30 * 1000
+let dialogUsersLoadedAt = 0
+let dialogUsersLoadedVersion = -1
 
 const form = ref({
   name: '',
@@ -311,7 +315,7 @@ const form = ref({
 })
 
 const selectedGroup = computed(() => groups.value.find((group) => group.id === editingGroupId.value) ?? null)
-const userOptions = computed(() => props.users.map((user) => ({
+const userOptions = computed(() => dialogUsers.value.map((user) => ({
   label: `${user.username}${user.email ? ` (${user.email})` : ''}`,
   value: user.id,
 })))
@@ -334,8 +338,11 @@ function handleDialogUpdate(value: boolean): void {
 async function loadDialogData(): Promise<void> {
   loading.value = true
   try {
-    const response = await usersStore.listUserGroups()
-    groups.value = response.items
+    const [groupsResponse] = await Promise.all([
+      usersStore.listUserGroups(),
+      ensureDialogUsers(),
+    ])
+    groups.value = groupsResponse.items
     if (editingGroupId.value && !groups.value.some((group) => group.id === editingGroupId.value)) {
       editingGroupId.value = null
     }
@@ -354,6 +361,25 @@ async function loadDialogData(): Promise<void> {
   }
 }
 
+async function ensureDialogUsers(): Promise<void> {
+  const now = Date.now()
+  const isSameUserVersion = dialogUsersLoadedVersion === props.usersVersion
+  if (
+    isSameUserVersion
+    && dialogUsersLoadedAt > 0
+    && now - dialogUsersLoadedAt < USER_OPTIONS_CACHE_TTL_MS
+  ) {
+    return
+  }
+
+  dialogUsers.value = await usersStore.listAllUsers({
+    cacheTtlMs: isSameUserVersion ? USER_OPTIONS_CACHE_TTL_MS : 0,
+    cacheKeySuffix: isSameUserVersion ? undefined : `users-version-${props.usersVersion}`,
+  })
+  dialogUsersLoadedAt = Date.now()
+  dialogUsersLoadedVersion = props.usersVersion
+}
+
 async function selectGroup(groupId: string): Promise<void> {
   const group = groups.value.find((item) => item.id === groupId)
   if (!group) return