fix: handle pagination

desk/src/pages/desk/agent/Agents.vue

@@ -37,9 +37,25 @@
         <SortBy :hide-label="false" />
       </div>
     </div>
-    <div>
+    <div class="flex-1">
       {{ agents?.data?.data }}
     </div>
+    <div class="p-20 border-t sm:px-5 px-3 py-2">
+      <ListFooter
+        :options="{
+          rowCount: agents?.data?.row_count,
+          totalCount: agents?.data?.total_count,
+        }"
+        :pageLengthCount="defaultParams.page_length_count"
+        @loadMore="handlePageLength(defaultParams.page_length_count, true)"
+        v-model="defaultParams.page_length_count"
+        @update:modelValue="
+          (count) => {
+            handlePageLength(count);
+          }
+        "
+      />
+    </div>
     <AddNewAgentsDialog
       :show="isDialogVisible"
       @close="isDialogVisible = false"
@@ -48,22 +64,30 @@
 </template>
 <script setup lang="ts">
 import { reactive, ref, provide } from "vue";
-import { usePageMeta, Avatar, Badge, createResource } from "frappe-ui";
+import {
+  usePageMeta,
+  Avatar,
+  Badge,
+  createResource,
+  ListFooter,
+} from "frappe-ui";
 import AddNewAgentsDialog from "@/components/desk/global/AddNewAgentsDialog.vue";
 import LayoutHeader from "@/components/LayoutHeader.vue";
 import { Filter, SortBy, QuickFilters } from "@/components/view-controls";
 
 const isDialogVisible = ref(false);
 
+const defaultParams = reactive({
+  doctype: "HD Agent",
+  filters: {},
+  order_by: "",
+  page_length: 20,
+  page_length_count: 20,
+});
+
 const agents = createResource({
   url: "helpdesk.api.doc.get_list_data",
-  makeParams: (params) => {
-    return {
-      doctype: "HD Agent",
-      filters: params?.filters || {},
-      order_by: params?.order_by || "",
-    };
-  },
+  params: defaultParams,
   auto: true,
 });
 
@@ -120,11 +144,6 @@ provide("listViewActions", {
   reload,
 });
 
-const defaultParams = {
-  filters: {},
-  order_by: "",
-};
-
 function applyFilters(filters) {
   defaultParams.filters = { ...filters };
   agents.submit({ ...defaultParams, filters });
@@ -143,6 +162,33 @@ function reload() {
   agents.reload({ ...defaultParams });
 }
 
+function handlePageLength(count: number, loadMore: boolean = false) {
+  if (count >= agents.data.row_count) {
+    return;
+  }
+  defaultParams.page_length_count = count;
+  if (loadMore) {
+    defaultParams.page_length += count;
+  } else {
+    if (
+      count === defaultParams.page_length &&
+      count === defaultParams.page_length_count
+    ) {
+      return;
+    }
+    defaultParams.page_length = count;
+    defaultParams.page_length_count = count;
+  }
+  agents.reload();
+}
+
+// watch(
+//   () => defaultParams.page_length_count,
+//   (count) => {
+//     handlePageLength(count);
+//   }
+// );
+
 usePageMeta(() => {
   return {
     title: "Agents",