Initiate Pagination Implementation for API and Infinite Scroll in UI (#1651)

- Add pagination support to the API endpoints that return lists of items
- Adjust UI to enable infinite scrolling via pagination

web/src/components/admin/settings/AdminAgentsTab.vue

@@ -117,7 +117,7 @@
 
 <script lang="ts" setup>
 import { cloneDeep } from 'lodash';
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import Badge from '~/components/atomic/Badge.vue';
@@ -131,6 +131,7 @@ import Panel from '~/components/layout/Panel.vue';
 import useApiClient from '~/compositions/useApiClient';
 import { useAsyncAction } from '~/compositions/useAsyncAction';
 import useNotifications from '~/compositions/useNotifications';
+import { usePagination } from '~/compositions/usePaginate';
 import { Agent } from '~/lib/api/types';
 import timeAgo from '~/utils/timeAgo';
 
@@ -138,14 +139,15 @@ const apiClient = useApiClient();
 const notifications = useNotifications();
 const { t } = useI18n();
 
-const agents = ref<Agent[]>([]);
 const selectedAgent = ref<Partial<Agent>>();
 const isEditingAgent = computed(() => !!selectedAgent.value?.id);
 
-async function loadAgents() {
-  agents.value = await apiClient.getAgents();
+async function loadAgents(page: number): Promise<Agent[] | null> {
+  return apiClient.getAgents(page);
 }
 
+const { resetPage, data: agents } = usePagination(loadAgents, () => !selectedAgent.value);
+
 const { doSubmit: saveAgent, isLoading: isSaving } = useAsyncAction(async () => {
   if (!selectedAgent.value) {
     throw new Error("Unexpected: Can't get agent");
@@ -161,7 +163,7 @@ const { doSubmit: saveAgent, isLoading: isSaving } = useAsyncAction(async () =>
     title: t(isEditingAgent.value ? 'admin.settings.agents.saved' : 'admin.settings.agents.created'),
     type: 'success',
   });
-  await loadAgents();
+  resetPage();
 });
 
 const { doSubmit: deleteAgent, isLoading: isDeleting } = useAsyncAction(async (_agent: Agent) => {
@@ -172,7 +174,7 @@ const { doSubmit: deleteAgent, isLoading: isDeleting } = useAsyncAction(async (_
 
   await apiClient.deleteAgent(_agent);
   notifications.notify({ title: t('admin.settings.agents.deleted'), type: 'success' });
-  await loadAgents();
+  resetPage();
 });
 
 function editAgent(agent: Agent) {
@@ -182,18 +184,4 @@ function editAgent(agent: Agent) {
 function showAddAgent() {
   selectedAgent.value = cloneDeep({ name: '' });
 }
-
-const reloadInterval = ref<number>();
-onMounted(async () => {
-  await loadAgents();
-  reloadInterval.value = window.setInterval(async () => {
-    await loadAgents();
-  }, 5000);
-});
-
-onBeforeUnmount(() => {
-  if (reloadInterval.value) {
-    window.clearInterval(reloadInterval.value);
-  }
-});
 </script>