feat: added pagination in new tickets agent list

desk/src/pages/tickets/TicketsAgent2.vue

@@ -20,9 +20,16 @@
       @event:sort="processSorts"
       @event:filter="processFilters"
     />
-    <div class="px-5">
-      <TicketsAgentList2 :rows="rows" :columns="columns" />
-    </div>
+    <TicketsAgentList2
+      :rows="rows"
+      :columns="columns"
+      :page-length-count="pageLength"
+      :options="{
+        rowCount: rowCount,
+        totalCount: totalCount,
+      }"
+      @update:page-length="updatePageLength"
+    />
   </div>
 </template>
 
@@ -43,20 +50,24 @@ let storage = useStorage("tickets_agent", {
 
 let columns = ref([]);
 let rows = ref([]);
+let rowCount = ref(0);
+let totalCount  = ref(0);
 
 let filtersToApply = storage.value.filtersToApply;
 let filters = ref(storage.value.filters);
 
 let sorts = ref(storage.value.sorts);
 let sortsToApply = storage.value.sortsToApply;
 
+let pageLength = ref(20);
+
 const tickets = createResource({
   url: "helpdesk.api.doc.get_list_data",
   params: {
     doctype: "HD Ticket",
     filters: filtersToApply,
     order_by: sortsToApply,
-    page_length: 100,
+    page_length: pageLength.value,
   },
   auto: true,
   transform(data) {
@@ -67,9 +78,36 @@ const tickets = createResource({
   onSuccess(data) {
     columns.value = data.columns;
     rows.value = data.data;
+    rowCount.value = data.row_count;
+    totalCount.value = data.total_count;
   },
 });
 
+function updatePageLength(value) {
+  if (value == "loadMore") {
+    tickets.update({
+      params: {
+        doctype: "HD Ticket",
+        filters: filtersToApply,
+        order_by: sortsToApply,
+        page_length: tickets.data.data.length + pageLength.value,
+      },
+    });
+  } else {
+    pageLength.value = value;
+    tickets.update({
+      params: {
+        doctype: "HD Ticket",
+        filters: filtersToApply,
+        order_by: sortsToApply,
+        page_length: pageLength.value,
+      },
+    });
+  }
+
+  tickets.reload();
+}
+
 function processSorts(sortEvent) {
   if (sortEvent.event === "add") {
     sorts.value.push(sortEvent.data);

desk/src/pages/tickets/TicketsAgentList2.vue

@@ -1,5 +1,6 @@
 <template>
   <ListView
+    class="px-5"
     :columns="columns"
     :rows="rows"
     :options="{
@@ -92,16 +93,13 @@
       </ListRow>
     </ListRows>
   </ListView>
-  <!-- <ListFooter
-    v-if="true"
-    class="border-t px-5 py-2"
+  <ListFooter
     v-model="pageLengthCount"
-    :options="{
-      rowCount: 20,
-      totalCount: 100,
-    }"
-    @loadMore="true"
-  /> -->
+    class="bottom-0 border-t bg-blue-50 px-5 py-2"
+    :options="{ rowCount: options.rowCount, totalCount: options.totalCount }"
+    @update:model-value="emit('update:pageLength', $event)"
+    @load-more="emit('update:pageLength', 'loadMore')"
+  />
 </template>
 
 <script setup lang="ts">
@@ -111,11 +109,12 @@ import {
   ListRow,
   ListRowItem,
   ListHeader,
-  // ListFooter,
+  ListFooter,
 } from "frappe-ui";
 import { dayjs } from "@/dayjs";
+import { ref } from "vue";
 
-defineProps({
+const props = defineProps({
   columns: {
     type: Array, //TODO custom types
     required: true,
@@ -124,8 +123,23 @@ defineProps({
     type: Array,
     required: true,
   },
+  pageLengthCount: {
+    type: Number,
+    required: true,
+    default: 20,
+  },
+  options: {
+    type: Object,
+    default: () => ({
+      totalCount: 0,
+      rowCount: 0,
+    }),
+  },
 });
 
+let pageLengthCount = ref(props.pageLengthCount);
+let emit = defineEmits(["update:pageLength"]);
+
 const slaStatusColorMap = {
   Fulfilled: "green",
   Failed: "red",

helpdesk/api/doc.py

@@ -73,7 +73,7 @@ def get_filterable_fields(doctype):
 	return res
 
 @frappe.whitelist()
-def get_list_data(doctype: str, filters: dict, order_by: str, page_length=20, page_length_count=20,):
+def get_list_data(doctype: str, filters: dict, order_by: str, page_length=20,):
 	columns = [
 		{"label": "Name", "type": "Data", "key": "name", "width": "16rem"},
 		{"label": "Last Modified", "type": "Datetime", "key": "modified", "width": "8rem"},
@@ -146,7 +146,6 @@ def get_list_data(doctype: str, filters: dict, order_by: str, page_length=20, pa
 		"rows": rows,
 		"fields": fields,
 		"is_default": is_default,
-		"page_length_count": page_length_count,
 		"total_count": frappe.client.get_count(doctype, filters=filters),
 		"row_count": len(data),
 	}