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,63 +65,76 @@
             />
           </div>
         </div>
-        <Draggable
+        <div class="overflow-y-auto flex flex-col gap-2">
-          :list="column.data"
+          <Draggable
-          group="fields"
+            :list="column.data"
-          item-key="name"
+            group="fields"
-          class="flex flex-col gap-3.5 overflow-y-auto h-full"
+            item-key="name"
-          @end="updateColumn"
+            class="flex flex-col gap-3.5"
-          :data-column="column.column.name"
+            @end="updateColumn"
-        >
+            :data-column="column.column.name"
-          <template #item="{ element: fields }">
+          >
-            <component
+            <template #item="{ element: fields }">
-              :is="options.getRoute ? 'router-link' : 'div'"
+              <component
-              class="pt-3 px-3.5 pb-2.5 rounded-lg border bg-white text-base flex flex-col"
+                :is="options.getRoute ? 'router-link' : 'div'"
-              :data-name="fields.name"
+                class="pt-3 px-3.5 pb-2.5 rounded-lg border bg-white text-base flex flex-col"
-              v-bind="{
+                :data-name="fields.name"
-                to: options.getRoute ? options.getRoute(fields) : undefined,
+                v-bind="{
-                onClick: options.onClick
+                  to: options.getRoute ? options.getRoute(fields) : undefined,
-                  ? () => options.onClick(fields)
+                  onClick: options.onClick
-                  : undefined,
+                    ? () => options.onClick(fields)
-              }"
+                    : undefined,
-            >
+                }"
-              <slot
-                name="title"
-                v-bind="{ fields, titleField, itemName: fields.name }"
               >
-                <div class="h-5 flex items-center">
+                <slot
-                  <div v-if="fields[titleField]">{{ fields[titleField] }}</div>
+                  name="title"
-                  <div class="text-gray-500" v-else>{{ __('No Title') }}</div>
+                  v-bind="{ fields, titleField, itemName: fields.name }"
-                </div>
+                >
-              </slot>
+                  <div class="h-5 flex items-center">
-              <div class="border-b h-px my-2.5" />
+                    <div v-if="fields[titleField]">
-
+                      {{ fields[titleField] }}
-              <div class="flex flex-col gap-3.5">
-                <template v-for="value in column.fields" :key="value">
-                  <slot
-                    name="fields"
-                    v-bind="{
-                      fields,
-                      fieldName: value,
-                      itemName: fields.name,
-                    }"
-                  >
-                    <div v-if="fields[value]" class="truncate">
-                      {{ fields[value] }}
                     </div>
-                  </slot>
+                    <div class="text-gray-500" v-else>{{ __('No Title') }}</div>
-                </template>
+                  </div>
-              </div>
+                </slot>
-              <div class="border-b h-px mt-2.5 mb-2" />
+                <div class="border-b h-px my-2.5" />
-              <slot name="actions" v-bind="{ itemName: fields.name }">
+
-                <div class="flex gap-2 items-center justify-between">
+                <div class="flex flex-col gap-3.5">
-                  <div></div>
+                  <template v-for="value in column.fields" :key="value">
-                  <Button icon="plus" variant="ghost" @click.stop.prevent />
+                    <slot
+                      name="fields"
+                      v-bind="{
+                        fields,
+                        fieldName: value,
+                        itemName: fields.name,
+                      }"
+                    >
+                      <div v-if="fields[value]" class="truncate">
+                        {{ fields[value] }}
+                      </div>
+                    </slot>
+                  </template>
                 </div>
-              </slot>
+                <div class="border-b h-px mt-2.5 mb-2" />
-            </component>
+                <slot name="actions" v-bind="{ itemName: fields.name }">
-          </template>
+                  <div class="flex gap-2 items-center justify-between">
-        </Draggable>
+                    <div></div>
+                    <Button icon="plus" variant="ghost" @click.stop.prevent />
+                  </div>
+                </slot>
+              </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">