From 25cefbdafc3667cc04b5ef0d07e319db22f1253d Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sat, 22 Jun 2024 14:46:27 +0530
Subject: [PATCH] fix: click item to route or open modal

---
 frontend/src/components/Kanban/KanbanView.vue | 21 ++++++++++--
 frontend/src/pages/Deals.vue                  | 23 +++++++++----
 frontend/src/pages/Leads.vue                  | 23 +++++++++----
 frontend/src/pages/Tasks.vue                  | 34 ++++++++++++++-----
 4 files changed, 79 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/Kanban/KanbanView.vue b/frontend/src/components/Kanban/KanbanView.vue
index 4084a111..4000cb5c 100644
--- a/frontend/src/components/Kanban/KanbanView.vue
+++ b/frontend/src/components/Kanban/KanbanView.vue
@@ -70,14 +70,21 @@
           :data-column="column.column.name"
         >
           <template #item="{ element: fields }">
-            <div
+            <component
+              :is="options.getRowRoute ? 'router-link' : 'div'"
               class="pt-3 px-3.5 pb-2.5 rounded-lg border bg-white text-base flex flex-col gap-2"
               :data-name="fields.name"
+              v-bind="{
+                to: options.getRowRoute ? options.getRowRoute(fields) : undefined,
+                onClick: options.onRowClick
+                  ? () => options.onRowClick(fields)
+                  : undefined,
+              }"
             >
               <div v-for="value in fields" :key="value">
                 <div class="truncate">{{ value }}</div>
               </div>
-            </div>
+            </component>
           </template>
         </Draggable>
       </div>
@@ -91,6 +98,16 @@ import Draggable from 'vuedraggable'
 import { Dropdown } from 'frappe-ui'
 import { computed } from 'vue'
 
+const props = defineProps({
+  options: {
+    type: Object,
+    default: () => ({
+      getRowRoute: null,
+      onRowClick: null,
+    }),
+  },
+})
+
 const emit = defineEmits(['update'])
 
 const kanban = defineModel()
diff --git a/frontend/src/pages/Deals.vue b/frontend/src/pages/Deals.vue
index 613bcfac..8dde10c7 100644
--- a/frontend/src/pages/Deals.vue
+++ b/frontend/src/pages/Deals.vue
@@ -31,6 +31,9 @@
   <KanbanView
     v-if="route.params.viewType == 'kanban'"
     v-model="deals"
+    :options="{
+      getRowRoute: (row) => ({ name: 'Deal', params: { dealId: row.name } }),
+    }"
     @update="(data) => viewControls.updateKanbanSettings(data)"
   />
   <DealsListView
@@ -110,17 +113,15 @@ const viewControls = ref(null)
 
 // Rows
 const rows = computed(() => {
-  if (
-    !deals.value?.data?.data ||
-    !['list', 'group_by'].includes(deals.value.data.view_type)
-  )
-    return []
-  if (route.params.viewType === 'group_by') {
+  if (!deals.value?.data?.data) return []
+  if (deals.value.data.view_type === 'group_by') {
     if (!deals.value?.data.group_by_field?.name) return []
     return getGroupedByRows(
       deals.value?.data.data,
       deals.value?.data.group_by_field,
     )
+  } else if (deals.value.data.view_type === 'kanban') {
+    return getKanbanRows(deals.value.data.data)
   } else {
     return parseRows(deals.value?.data.data)
   }
@@ -156,6 +157,16 @@ function getGroupedByRows(listRows, groupByField) {
   return groupedRows || listRows
 }
 
+function getKanbanRows(data) {
+  let _rows = []
+  data.forEach((column) => {
+    column.data?.forEach((row) => {
+      _rows.push(row)
+    })
+  })
+  return parseRows(_rows)
+}
+
 function parseRows(rows) {
   return rows.map((deal) => {
     let _rows = {}
diff --git a/frontend/src/pages/Leads.vue b/frontend/src/pages/Leads.vue
index 9e3b9e41..8193fe14 100644
--- a/frontend/src/pages/Leads.vue
+++ b/frontend/src/pages/Leads.vue
@@ -32,6 +32,9 @@
   <KanbanView
     v-if="route.params.viewType == 'kanban'"
     v-model="leads"
+    :options="{
+      getRowRoute: (row) => ({ name: 'Lead', params: { leadId: row.name } }),
+    }"
     @update="(data) => viewControls.updateKanbanSettings(data)"
   />
   <LeadsListView
@@ -112,17 +115,15 @@ const viewControls = ref(null)
 
 // Rows
 const rows = computed(() => {
-  if (
-    !leads.value?.data?.data ||
-    !['list', 'group_by'].includes(leads.value.data.view_type)
-  )
-    return []
-  if (route.params.viewType === 'group_by') {
+  if (!leads.value?.data?.data) return []
+  if (leads.value.data.view_type === 'group_by') {
     if (!leads.value?.data.group_by_field?.name) return []
     return getGroupedByRows(
       leads.value?.data.data,
       leads.value?.data.group_by_field,
     )
+  } else if (leads.value.data.view_type === 'kanban') {
+    return getKanbanRows(leads.value.data.data)
   } else {
     return parseRows(leads.value?.data.data)
   }
@@ -158,6 +159,16 @@ function getGroupedByRows(listRows, groupByField) {
   return groupedRows || listRows
 }
 
+function getKanbanRows(data) {
+  let _rows = []
+  data.forEach((column) => {
+    column.data?.forEach((row) => {
+      _rows.push(row)
+    })
+  })
+  return parseRows(_rows)
+}
+
 function parseRows(rows) {
   return rows.map((lead) => {
     let _rows = {}
diff --git a/frontend/src/pages/Tasks.vue b/frontend/src/pages/Tasks.vue
index 95388759..dcbe9f39 100644
--- a/frontend/src/pages/Tasks.vue
+++ b/frontend/src/pages/Tasks.vue
@@ -25,8 +25,11 @@
     }"
   />
   <KanbanView
-    v-if="$route.params.viewType == 'kanban'"
+    v-if="$route.params.viewType == 'kanban' && rows.length"
     v-model="tasks"
+    :options="{
+      onRowClick: (row) => showTask(row.name),
+    }"
     @update="(data) => viewControls.updateKanbanSettings(data)"
   />
   <TasksListView
@@ -91,12 +94,27 @@ const updatedPageCount = ref(20)
 const viewControls = ref(null)
 
 const rows = computed(() => {
-  if (
-    !tasks.value?.data?.data ||
-    !['list', 'group_by'].includes(tasks.value.data.view_type)
-  )
-    return []
-  return tasks.value?.data.data.map((task) => {
+  if (!tasks.value?.data?.data) return []
+
+  if (tasks.value.data.view_type === 'kanban') {
+    return getKanbanRows(tasks.value.data.data)
+  }
+
+  return parseRows(tasks.value?.data.data)
+})
+
+function getKanbanRows(data) {
+  let _rows = []
+  data.forEach((column) => {
+    column.data?.forEach((row) => {
+      _rows.push(row)
+    })
+  })
+  return parseRows(_rows)
+}
+
+function parseRows(rows) {
+  return rows.map((task) => {
     let _rows = {}
     tasks.value?.data.rows.forEach((row) => {
       _rows[row] = task[row]
@@ -115,7 +133,7 @@ const rows = computed(() => {
     })
     return _rows
   })
-})
+}
 
 const showTaskModal = ref(false)