fix: moved get_kanban_data logic in viewcontrols

crm/api/doc.py

@@ -377,10 +377,23 @@ def get_list_data(
 	}
 
 @frappe.whitelist()
-def get_kanban_data(doctype: str, filters: dict, order_by: str, column_field: str, columns=None, rows=None):
+def get_kanban_data(
+	doctype: str,
+	filters: dict,
+	order_by: str,
+	column_field: str,
+	columns=None,
+	rows=None,
+	default_filters=None,
+):
 	filters = frappe._dict(filters)
 	columns = frappe.parse_json(columns)
 	data = []
+
+	if default_filters:
+		default_filters = frappe.parse_json(default_filters)
+		filters.update(default_filters)
+
 	for column in columns:
 		column_filters = filters.copy()
 		column_filters.update({column_field: column})

frontend/src/components/Kanban/KanbanView.vue

@@ -1,62 +1,32 @@
 <template>
-  <div class="flex sm:mx-5 mx-3 mb-3 overflow-hidden">
+  <Draggable
-    <Draggable
+    :list="kanban?.data"
-      :list="columns.data"
+    item-key="column"
-      item-key="column"
+    class="flex sm:mx-5 mx-3 pb-3 overflow-x-auto gap-2"
-      class="flex gap-2 overflow-x-auto"
+  >
-    >
+    <template #item="{ element: column }">
-      <template #item="{ element: column }">
+      <div class="flex flex-col gap-2 min-w-[268px]">
-        <div class="flex flex-col gap-2 overflow-hidden min-w-[268px]">
+        <div>{{ column.column }}</div>
-          <div>{{ column.column }}</div>
+        <Draggable
-          <Draggable
+          :list="column.data"
-            :list="column.data"
+          group="fields"
-            group="fields"
+          item-key="name"
-            item-key="name"
+          class="flex flex-col gap-2 overflow-y-auto h-full"
-            class="flex flex-col gap-2 overflow-y-auto h-full"
+        >
-          >
+          <template #item="{ element: fields }">
-            <template #item="{ element: fields }">
+            <div class="p-3 rounded border bg-white">
-              <div class="p-3 rounded border bg-white">
+              <div v-for="value in fields">
-                <div v-for="value in fields">
+                <div>{{ value }}</div>
-                  <div>{{ value }}</div>
-                </div>
               </div>
-            </template>
+            </div>
-          </Draggable>
+          </template>
-        </div>
+        </Draggable>
-      </template>
+      </div>
-    </Draggable>
+    </template>
-  </div>
+  </Draggable>
 </template>
 <script setup>
-import { createResource } from 'frappe-ui'
 import Draggable from 'vuedraggable'
 
-const props = defineProps({
+const kanban = defineModel()
-  doctype: { type: String, required: true },
-  filters: { type: Object, required: true },
-  column_field: { type: String, required: true },
-  columns: { type: Object, required: true },
-  rows: { type: Array, required: true },
-})
-
-function getParams() {
-  return {
-    doctype: props.doctype,
-    filters: props.filters,
-    order_by: 'modified',
-    column_field: props.column_field,
-    columns: props.columns,
-    rows: props.rows,
-  }
-}
-
-const columns = createResource({
-  url: 'crm.api.doc.get_kanban_data',
-  params: getParams(),
-  cache: ['Kanban', props.doctype],
-  auto: true,
-  onSuccess(data) {
-    data
-  },
-})
 </script>

frontend/src/components/ViewControls.vue

@@ -297,6 +297,7 @@ const { reload: reloadView, getView } = viewsStore()
 const { isManager } = usersStore()
 
 const list = defineModel()
+const kanban = defineModel('kanban')
 const loadMore = defineModel('loadMore')
 const resizeColumn = defineModel('resizeColumn')
 const updatedPageCount = defineModel('updatedPageCount')
@@ -428,6 +429,27 @@ function getParams() {
   }
 }
 
+function getKanbanParams() {
+  return {
+    doctype: props.doctype,
+    filters: {},
+    order_by: 'modified desc',
+    column_field: 'status',
+    columns: ['New', 'Contacted', 'Nurture', 'Qualified', 'Unqualified', 'Junk'],
+    rows: ['name', 'lead_name', 'status', 'organization', 'lead_owner'],
+    default_filters: props.filters,
+  }
+}
+
+kanban.value = createResource({
+  url: 'crm.api.doc.get_kanban_data',
+  params: getKanbanParams(),
+  cache: ['Kanban', props.doctype],
+  onSuccess(data) {
+    kanban.value.data = data
+  },
+})
+
 list.value = createResource({
   url: 'crm.api.doc.get_list_data',
   params: getParams(),
@@ -458,8 +480,13 @@ onMounted(() => useDebounceFn(reload, 100)())
 const isLoading = computed(() => list.value?.loading)
 
 function reload() {
-  list.value.params = getParams()
+  if (route.params.viewType == 'kanban') {
-  list.value.reload()
+    kanban.value.params = getKanbanParams()
+    kanban.value.reload()
+  } else {
+    list.value.params = getParams()
+    list.value.reload()
+  }
 }
 
 const showExportDialog = ref(false)
@@ -553,7 +580,7 @@ const viewsDropdownOptions = computed(() => {
     })
     let publicViews = list.value.data.views.filter((v) => v.public)
     let savedViews = list.value.data.views.filter(
-      (v) => !v.pinned && !v.public && !v.is_default
+      (v) => !v.pinned && !v.public && !v.is_default,
     )
     let pinnedViews = list.value.data.views.filter((v) => v.pinned)
 
@@ -591,7 +618,7 @@ const quickFilterList = computed(() => {
       if (Array.isArray(value)) {
         if (
           (['Check', 'Select', 'Link', 'Date', 'Datetime'].includes(
-            filter.type
+            filter.type,
           ) &&
             value[0]?.toLowerCase() == 'like') ||
           value[0]?.toLowerCase() != 'like'
@@ -717,7 +744,7 @@ function create_or_update_default_view() {
     'crm.fcrm.doctype.crm_view_settings.crm_view_settings.create_or_update_default_view',
     {
       view: view.value,
-    }
+    },
   ).then(() => {
     reloadView()
     view.value = {
@@ -833,7 +860,7 @@ const viewModalObj = ref({})
 function duplicateView() {
   let label =
     __(
-      getView(route.query.view, route.params.viewType, props.doctype)?.label
+      getView(route.query.view, route.params.viewType, props.doctype)?.label,
     ) || getViewType().label
   view.value.name = ''
   view.value.label = label + __(' (New)')
@@ -963,7 +990,7 @@ watch(
     if (_.isEqual(value, old_value)) return
     reload()
   },
-  { deep: true }
+  { deep: true },
 )
 
 watch([() => route, () => route.params.viewType], (value, old_value) => {

frontend/src/pages/Leads.vue

@@ -20,6 +20,7 @@
   <ViewControls
     ref="viewControls"
     v-model="leads"
+    v-model:kanban="kanban"
     v-model:loadMore="loadMore"
     v-model:resizeColumn="triggerResize"
     v-model:updatedPageCount="updatedPageCount"
@@ -29,21 +30,7 @@
       allowedViews: ['list', 'group_by', 'kanban'],
     }"
   />
-  <KanbanView
+  <KanbanView v-if="route.params.viewType == 'kanban'" v-model="kanban"  />
-    doctype="CRM Lead"
-    :filters="{ converted: 0 }"
-    column_field="status"
-    :columns="[
-      'New',
-      'Contacted',
-      'Nurture',
-      'Qualified',
-      'Unqualified',
-      'Junk',
-    ]"
-    :rows="['name', 'status', 'organization', 'lead_owner']"
-    v-if="route.params.viewType == 'kanban'"
-  />
   <LeadsListView
     ref="leadsListView"
     v-else-if="leads.data && rows.length"
@@ -115,6 +102,7 @@ const showLeadModal = ref(false)
 
 // leads data is loaded in the ViewControls component
 const leads = ref({})
+const kanban = ref({})
 const loadMore = ref(1)
 const triggerResize = ref(1)
 const updatedPageCount = ref(20)