fix: load more in kanban

crm/api/doc.py

@@ -331,14 +331,24 @@ def get_data(
 				column_data = []
 			else:
 				column_filters.update(filters.copy())
+				page_length = 20
+
+				if kc.get("page_length"):
+					page_length = kc.get("page_length")
+
 				column_data = frappe.get_list(
 					doctype,
 					fields=rows,
 					filters=column_filters,
 					order_by=order_by,
-					page_length=20,
+					page_length=page_length,
 				)
 
+				all_count = len(frappe.get_list(doctype, filters={ column_field: kc.get('name') }))
+
+				kc["all_count"] = all_count
+				kc["count"] = len(column_data)
+
 				for d in column_data:
 					getCounts(d, doctype)
 
@@ -348,7 +358,7 @@ def get_data(
 					if x.get("name") in kc.get("order") else 0
 				)
 
-			data.append({"column": kc, "fields": kanban_fields, "data": column_data, "count": len(column_data)})
+			data.append({"column": kc, "fields": kanban_fields, "data": column_data})
 
 	fields = frappe.get_meta(doctype).fields
 	fields = [field for field in fields if field.fieldtype not in no_value_fields]

frontend/src/components/Kanban/KanbanView.vue

@@ -65,11 +65,12 @@
             />
           </div>
         </div>
+        <div class="overflow-y-auto flex flex-col gap-2">
           <Draggable
             :list="column.data"
             group="fields"
             item-key="name"
-          class="flex flex-col gap-3.5 overflow-y-auto h-full"
+            class="flex flex-col gap-3.5"
             @end="updateColumn"
             :data-column="column.column.name"
           >
@@ -90,7 +91,9 @@
                   v-bind="{ fields, titleField, itemName: fields.name }"
                 >
                   <div class="h-5 flex items-center">
-                  <div v-if="fields[titleField]">{{ fields[titleField] }}</div>
+                    <div v-if="fields[titleField]">
+                      {{ fields[titleField] }}
+                    </div>
                     <div class="text-gray-500" v-else>{{ __('No Title') }}</div>
                   </div>
                 </slot>
@@ -122,6 +125,16 @@
               </component>
             </template>
           </Draggable>
+          <div
+            v-if="column.column.count < column.column.all_count"
+            class="flex items-center justify-center"
+          >
+            <Button
+              :label="__('Load More')"
+              @click="emit('loadMore', column.column.name)"
+            />
+          </div>
+        </div>
       </div>
     </template>
   </Draggable>
@@ -144,7 +157,7 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['update'])
+const emit = defineEmits(['update', 'loadMore'])
 
 const kanban = defineModel()
 

frontend/src/components/ViewControls.vue

@@ -796,6 +796,25 @@ async function updateKanbanSettings(data) {
   }
 }
 
+function loadMoreKanban(columnName) {
+  let columns = list.value.params.kanban_columns
+
+  if (typeof columns === 'string') {
+    columns = JSON.parse(columns)
+  }
+
+  let column = columns.find((c) => c.name == columnName)
+
+  if (!column.page_length) {
+    column.page_length = 40
+  } else {
+    column.page_length += 20
+  }
+  list.value.params.kanban_columns = columns
+  view.value.kanban_columns = columns
+  list.value.reload()
+}
+
 function create_or_update_default_view() {
   if (route.query.view) return
   view.value.doctype = props.doctype
@@ -1073,7 +1092,13 @@ function likeDoc({ name, liked }) {
   })
 }
 
-defineExpose({ applyFilter, applyLikeFilter, likeDoc, updateKanbanSettings })
+defineExpose({
+  applyFilter,
+  applyLikeFilter,
+  likeDoc,
+  updateKanbanSettings,
+  loadMoreKanban,
+})
 
 // Watchers
 watch(

frontend/src/pages/Deals.vue

@@ -36,6 +36,7 @@
       onNewClick: (column) => onNewClick(column),
     }"
     @update="(data) => viewControls.updateKanbanSettings(data)"
+    @loadMore="(columnName) => viewControls.loadMoreKanban(columnName)"
   >
     <template #title="{ titleField, itemName }">
       <div class="flex gap-2 items-center">

frontend/src/pages/Leads.vue

@@ -37,6 +37,7 @@
       onNewClick: (column) => onNewClick(column),
     }"
     @update="(data) => viewControls.updateKanbanSettings(data)"
+    @loadMore="(columnName) => viewControls.loadMoreKanban(columnName)"
   >
     <template #title="{ titleField, itemName }">
       <div class="flex items-center gap-2">

frontend/src/pages/Tasks.vue

@@ -32,6 +32,7 @@
       onNewClick: (column) => createTask(column),
     }"
     @update="(data) => viewControls.updateKanbanSettings(data)"
+    @loadMore="(columnName) => viewControls.loadMoreKanban(columnName)"
   >
     <template #title="{ titleField, itemName }">
       <div class="flex items-center gap-2">