From 2b85de294c3ad7ea1f75601c83bb92baa679bdc7 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 21 Aug 2024 14:34:00 +0530
Subject: [PATCH] fix: also show view in lead page breadcrumb

---
 .../components/ListViews/LeadsListView.vue    | 16 +++++++--
 frontend/src/pages/Lead.vue                   | 24 ++++++++++++-
 frontend/src/pages/Leads.vue                  | 15 ++++----
 frontend/src/utils/view.js                    | 35 +++++++++++++++++++
 4 files changed, 78 insertions(+), 12 deletions(-)
 create mode 100644 frontend/src/utils/view.js

diff --git a/frontend/src/components/ListViews/LeadsListView.vue b/frontend/src/components/ListViews/LeadsListView.vue
index 254d6e21..a0e37232 100644
--- a/frontend/src/components/ListViews/LeadsListView.vue
+++ b/frontend/src/components/ListViews/LeadsListView.vue
@@ -4,14 +4,21 @@
     :columns="columns"
     :rows="rows"
     :options="{
-      getRowRoute: (row) => ({ name: 'Lead', params: { leadId: row.name } }),
+      getRowRoute: (row) => ({
+        name: 'Lead',
+        params: { leadId: row.name },
+        query: { view: route.query.view, viewType: route.params.viewType },
+      }),
       selectable: options.selectable,
       showTooltip: options.showTooltip,
       resizeColumn: options.resizeColumn,
     }"
     row-key="name"
   >
-    <ListHeader class="sm:mx-5 mx-3" @columnWidthUpdated="emit('columnWidthUpdated')">
+    <ListHeader
+      class="sm:mx-5 mx-3"
+      @columnWidthUpdated="emit('columnWidthUpdated')"
+    >
       <ListHeaderItem
         v-for="column in columns"
         :key="column.key"
@@ -217,6 +224,7 @@ import {
 } from 'frappe-ui'
 import { sessionStore } from '@/stores/session'
 import { ref, computed, watch } from 'vue'
+import { useRoute } from 'vue-router'
 
 const props = defineProps({
   rows: {
@@ -248,6 +256,8 @@ const emit = defineEmits([
   'likeDoc',
 ])
 
+const route = useRoute()
+
 const pageLengthCount = defineModel()
 const list = defineModel('list')
 
@@ -273,7 +283,7 @@ const listBulkActionsRef = ref(null)
 
 defineExpose({
   customListActions: computed(
-    () => listBulkActionsRef.value?.customListActions
+    () => listBulkActionsRef.value?.customListActions,
   ),
 })
 </script>
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index 042ba3ac..549099b4 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -1,7 +1,11 @@
 <template>
   <LayoutHeader v-if="lead.data">
     <template #left-header>
-      <Breadcrumbs :items="breadcrumbs" />
+      <Breadcrumbs :items="breadcrumbs">
+        <template #prefix="{ item }">
+          <Icon v-if="item.icon" :icon="item.icon" class="mr-2 h-4" />
+        </template>
+      </Breadcrumbs>
     </template>
     <template #right-header>
       <CustomActions
@@ -273,6 +277,7 @@
   />
 </template>
 <script setup>
+import Icon from '@/components/Icon.vue'
 import Resizer from '@/components/Resizer.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import ActivityIcon from '@/components/Icons/ActivityIcon.vue'
@@ -306,6 +311,7 @@ import {
   errorMessage,
   copyToClipboard,
 } from '@/utils'
+import { getView } from '@/utils/view'
 import { globalStore } from '@/stores/global'
 import { contactsStore } from '@/stores/contacts'
 import { organizationsStore } from '@/stores/organizations'
@@ -421,6 +427,22 @@ function validateRequired(fieldname, value) {
 
 const breadcrumbs = computed(() => {
   let items = [{ label: __('Leads'), route: { name: 'Leads' } }]
+
+  if (route.query.view || route.query.viewType) {
+    let view = getView(route.query.view, route.query.viewType, 'CRM Lead')
+    if (view) {
+      items.push({
+        label: __(view.label),
+        icon: view.icon,
+        route: {
+          name: 'Leads',
+          params: { viewType: route.query.viewType },
+          query: { view: route.query.view },
+        },
+      })
+    }
+  }
+
   items.push({
     label: lead.data.lead_name || __('Untitled'),
     route: { name: 'Lead', params: { leadId: lead.data.name } },
diff --git a/frontend/src/pages/Leads.vue b/frontend/src/pages/Leads.vue
index cc55bcc4..132aa51c 100644
--- a/frontend/src/pages/Leads.vue
+++ b/frontend/src/pages/Leads.vue
@@ -65,7 +65,11 @@
     v-if="route.params.viewType == 'kanban'"
     v-model="leads"
     :options="{
-      getRoute: (row) => ({ name: 'Lead', params: { leadId: row.name } }),
+      getRoute: (row) => ({
+        name: 'Lead',
+        params: { leadId: row.name },
+        query: { view: route.query.view, viewType: route.params.viewType },
+      }),
       onNewClick: (column) => onNewClick(column),
     }"
     @update="(data) => viewControls.updateKanbanSettings(data)"
@@ -313,6 +317,7 @@
 </template>
 
 <script setup>
+import Icon from '@/components/Icon.vue'
 import MultipleAvatar from '@/components/MultipleAvatar.vue'
 import CustomActions from '@/components/CustomActions.vue'
 import EmailAtIcon from '@/components/Icons/EmailAtIcon.vue'
@@ -335,13 +340,7 @@ import { usersStore } from '@/stores/users'
 import { organizationsStore } from '@/stores/organizations'
 import { statusesStore } from '@/stores/statuses'
 import { callEnabled } from '@/composables/settings'
-import {
-  dateFormat,
-  dateTooltipFormat,
-  timeAgo,
-  formatTime,
-  isEmoji,
-} from '@/utils'
+import { dateFormat, dateTooltipFormat, timeAgo, formatTime } from '@/utils'
 import { Avatar, Tooltip, Dropdown } from 'frappe-ui'
 import { useRoute } from 'vue-router'
 import { ref, computed, reactive, h } from 'vue'
diff --git a/frontend/src/utils/view.js b/frontend/src/utils/view.js
new file mode 100644
index 00000000..a6db2fb2
--- /dev/null
+++ b/frontend/src/utils/view.js
@@ -0,0 +1,35 @@
+import ListIcon from '@/components/Icons/ListIcon.vue'
+import GroupByIcon from '@/components/Icons/GroupByIcon.vue'
+import KanbanIcon from '@/components/Icons/KanbanIcon.vue'
+import { viewsStore } from '@/stores/views'
+import { markRaw } from 'vue'
+
+const { getView: getViewDetails } = viewsStore()
+
+function defaultView(type) {
+  let types = {
+    list: {
+      label: __('List'),
+      icon: markRaw(ListIcon),
+    },
+    group_by: {
+      label: __('Group By'),
+      icon: markRaw(GroupByIcon),
+    },
+    kanban: {
+      label: __('Kanban'),
+      icon: markRaw(KanbanIcon),
+    },
+  }
+
+  return types[type]
+}
+
+export function getView(view, type, doctype) {
+  let viewType = type || 'list'
+  let viewDetails = getViewDetails(view, viewType, doctype)
+  if (viewDetails && !viewDetails.icon) {
+    viewDetails.icon = defaultView(viewType).icon
+  }
+  return viewDetails || defaultView(viewType)
+}