fix: added load more functionality by updating page_length

crm/api/doc.py

@@ -60,6 +60,7 @@ def get_list_data(
 	doctype: str,
 	filters: dict,
 	order_by: str,
+	page_length=20,
 	page_length_count=20,
 	columns=None,
 	rows=None,
@@ -111,7 +112,7 @@ def get_list_data(
 		fields=rows,
 		filters=filters,
 		order_by=order_by,
-		page_length=page_length_count,
+		page_length=page_length,
 	) or []
 
 	fields = frappe.get_meta(doctype).fields
@@ -155,6 +156,7 @@ def get_list_data(
 		"columns": columns,
 		"rows": rows,
 		"fields": fields,
+		"page_length": page_length,
 		"page_length_count": page_length_count,
 		"is_default": is_default,
 		"views": get_views(doctype),

frappe-ui

@@ -1 +1 @@
-Subproject commit 75407e4d0f52b01d572ed2c2e26e2a05abdefb9e
+Subproject commit 19db8bc3a7463c11e4ef3b11ff7641371701bb47

frontend/src/components/ListViews/LeadsListView.vue

@@ -102,6 +102,7 @@
       rowCount: options.rowCount,
       totalCount: options.totalCount,
     }"
+    @loadMore="emit('loadMore')"
   />
 </template>
 
@@ -139,5 +140,7 @@ const props = defineProps({
   },
 })
 
+const emit = defineEmits(['loadMore'])
+
 const pageLengthCount = defineModel()
 </script>

frontend/src/components/ViewControls.vue

@@ -96,6 +96,7 @@ const { $dialog } = globalStore()
 const { reload: reloadView, getView } = viewsStore()
 
 const list = defineModel()
+const loadMore = defineModel('loadMore')
 
 const route = useRoute()
 const router = useRouter()
@@ -124,8 +125,14 @@ const view = ref({
   pinned: false,
 })
 
+const pageLength = computed(() => list.value?.data?.page_length)
 const pageLengthCount = computed(() => list.value?.data?.page_length_count)
 
+watch(loadMore, (value) => {
+  if (!value) return
+  updatePageLength(value, true)
+})
+
 watch(
   () => list.value?.data?.page_length_count,
   (value) => {
@@ -173,6 +180,7 @@ function getParams() {
     order_by: order_by,
     columns: columns,
     rows: rows,
+    page_length: pageLength.value,
     page_length_count: pageLengthCount.value,
     custom_view_name: _view?.name || '',
     default_filters: props.filters,
@@ -190,6 +198,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,
       page_length_count: list.value.params.page_length_count,
       columns: data.columns,
       rows: data.rows,
@@ -299,12 +308,17 @@ function updateColumns(obj) {
   viewUpdated.value = true
 }
 
-function updatePageLength(value) {
+function updatePageLength(value, loadMore = false) {
   if (!defaultParams.value) {
     defaultParams.value = getParams()
   }
   list.value.params = defaultParams.value
-  list.value.params.page_length_count = value
+  if (loadMore) {
+    list.value.params.page_length += value
+  } else {
+    list.value.params.page_length = value
+    list.value.params.page_length_count = value
+  }
   list.value.reload()
 }
 

frontend/src/pages/Leads.vue

@@ -11,6 +11,7 @@
   </LayoutHeader>
   <ViewControls
     v-model="leads"
+    v-model:loadMore="loadMore"
     doctype="CRM Lead"
     :filters="{ converted: 0 }"
   />
@@ -23,6 +24,7 @@
       rowCount: leads.data.row_count,
       totalCount: leads.data.total_count,
     }"
+    @loadMore="() => loadMore++"
   />
   <div v-else-if="leads.data" class="flex h-full items-center justify-center">
     <div
@@ -78,6 +80,7 @@ const router = useRouter()
 
 // leads data is loaded in the ViewControls component
 const leads = ref({})
+const loadMore = ref(1)
 
 // Rows
 const rows = computed(() => {