fix: implemented listview pagination in Leads List view

crm/api/doc.py

@@ -60,6 +60,7 @@ def get_list_data(
 	doctype: str,
 	filters: dict,
 	order_by: str,
+	page_length=20,
 	columns=None,
 	rows=None,
 	custom_view_name=None,
@@ -110,7 +111,7 @@ def get_list_data(
 		fields=rows,
 		filters=filters,
 		order_by=order_by,
-		page_length=20,
+		page_length=page_length,
 	) or []
 
 	fields = frappe.get_meta(doctype).fields
@@ -154,8 +155,11 @@ def get_list_data(
 		"columns": columns,
 		"rows": rows,
 		"fields": fields,
+		"page_length": page_length,
 		"is_default": is_default,
 		"views": get_views(doctype),
+		"total_count": frappe.client.get_count(doctype, filters=filters),
+		"row_count": len(data),
 	}
 
 def get_views(doctype):

frappe-ui

@@ -1 +1 @@
-Subproject commit 0f4b6650598831d4382549c4ee22c360e01e35f0
+Subproject commit 75407e4d0f52b01d572ed2c2e26e2a05abdefb9e

frontend/src/components/ListViews/LeadsListView.vue

@@ -95,6 +95,14 @@
     </ListRows>
     <ListSelectBanner />
   </ListView>
+  <ListFooter
+    class="border-t px-5 py-2"
+    v-model="pageLength"
+    :options="{
+      rowCount: options.rowCount,
+      totalCount: options.totalCount,
+    }"
+  />
 </template>
 
 <script setup>
@@ -109,6 +117,7 @@ import {
   ListRow,
   ListSelectBanner,
   ListRowItem,
+  ListFooter,
 } from 'frappe-ui'
 
 const props = defineProps({
@@ -124,7 +133,11 @@ const props = defineProps({
     type: Object,
     default: () => ({
       selectable: true,
+      totalCount: 0,
+      rowCount: 0,
     }),
   },
 })
+
+const pageLength = defineModel()
 </script>

frontend/src/components/ViewControls.vue

@@ -124,6 +124,16 @@ const view = ref({
   pinned: false,
 })
 
+const pageLength = computed(() => list.value?.data?.page_length)
+
+watch(
+  () => list.value?.data?.page_length,
+  (value) => {
+    if (!value) return
+    updatePageLength(value)
+  }
+)
+
 function getParams() {
   let _view = getView(route.query.view)
   const filters = (_view?.filters && JSON.parse(_view.filters)) || {}
@@ -163,6 +173,7 @@ function getParams() {
     order_by: order_by,
     columns: columns,
     rows: rows,
+    page_length: pageLength.value,
     custom_view_name: _view?.name || '',
     default_filters: props.filters,
   }
@@ -179,6 +190,7 @@ list.value = createResource({
       doctype: props.doctype,
       filters: list.value.params.filters,
       order_by: list.value.params.order_by,
+      page_length: list.value.params.page_length,
       columns: data.columns,
       rows: data.rows,
       custom_view_name: cv?.name || '',
@@ -287,6 +299,15 @@ function updateColumns(obj) {
   viewUpdated.value = true
 }
 
+function updatePageLength(page_length) {
+  if (!defaultParams.value) {
+    defaultParams.value = getParams()
+  }
+  list.value.params = defaultParams.value
+  list.value.params.page_length = page_length
+  list.value.reload()
+}
+
 // View Actions
 const viewActions = computed(() => {
   let actions = [

frontend/src/pages/Leads.vue

@@ -16,8 +16,13 @@
   />
   <LeadsListView
     v-if="leads.data && rows.length"
+    v-model="leads.data.page_length"
     :rows="rows"
     :columns="leads.data.columns"
+    :options="{
+      rowCount: leads.data.row_count,
+      totalCount: leads.data.total_count,
+    }"
   />
   <div v-else-if="leads.data" class="flex h-full items-center justify-center">
     <div