From 0770fc0be560c593774ffd97c62b946aafc6324b Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 1 Aug 2023 18:02:14 +0530
Subject: [PATCH] feat: added breadcrumbs on listview and lead

---
 frontend/src/components/Breadcrumbs.vue | 27 ++++++++++++++++++++
 frontend/src/components/ListView.vue    |  3 ++-
 frontend/src/pages/Lead.vue             | 34 +++++++++----------------
 3 files changed, 41 insertions(+), 23 deletions(-)
 create mode 100644 frontend/src/components/Breadcrumbs.vue

diff --git a/frontend/src/components/Breadcrumbs.vue b/frontend/src/components/Breadcrumbs.vue
new file mode 100644
index 00000000..8149e2ab
--- /dev/null
+++ b/frontend/src/components/Breadcrumbs.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="flex min-w-0 items-center text-ellipsis whitespace-nowrap">
+    <template v-for="(item, i) in items" :key="item.label">
+      <router-link
+        class="flex items-center rounded px-0.5 py-1 text-lg font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 text-gray-600 hover:text-gray-700 last:text-gray-900 last:hover:text-gray-900"
+        :to="item.route || ''"
+      >
+        <slot name="prefix" :item="item" />
+        <span>{{ item.label }}</span>
+      </router-link>
+      <span
+        v-if="i != items.length - 1"
+        class="mx-0.5 text-base text-gray-500"
+      >
+        /
+      </span>
+    </template>
+  </div>
+</template>
+<script setup>
+const props = defineProps({
+  items: {
+    type: Array,
+    required: true,
+  },
+})
+</script>
diff --git a/frontend/src/components/ListView.vue b/frontend/src/components/ListView.vue
index 3306f850..f2176fc9 100644
--- a/frontend/src/components/ListView.vue
+++ b/frontend/src/components/ListView.vue
@@ -1,7 +1,7 @@
 <template>
   <LayoutHeader>
     <template #left-header>
-      <h1 class="font-semibold text-xl">{{ list.title }}</h1>
+      <Breadcrumbs :items="[{ label: list.title }]" />
     </template>
     <template #right-header>
       <Button variant="solid" label="Create">
@@ -155,6 +155,7 @@ import FilterIcon from './Icons/FilterIcon.vue'
 import IndicatorIcon from './Icons/IndicatorIcon.vue'
 import { reactive, ref, computed } from 'vue'
 import LayoutHeader from './LayoutHeader.vue'
+import Breadcrumbs from './Breadcrumbs.vue'
 
 const props = defineProps({
   list: {
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index 294c1a91..9ffc0008 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -1,27 +1,7 @@
 <template>
   <LayoutHeader v-if="lead.doc">
     <template #left-header>
-      <FeatherIcon
-        name="chevron-left"
-        class="h-5 cursor-pointer"
-        @click="$router.back()"
-      />
-      <h1 class="font-semibold text-xl">{{ lead.doc.lead_name }}</h1>
-      <div
-        v-if="lead.doc.organization_name"
-        class="flex items-center space-x-2 bg-gray-100 hover:bg-gray-200 p-1 pr-2 rounded ml-2 cursor-pointer"
-      >
-        <Avatar
-          class="flex items-center"
-          :image="lead.doc.organization_logo"
-          :label="lead.doc.organization_name"
-          size="sm"
-          shape="square"
-        />
-        <div class="text-base text-gray-700 truncate">
-          {{ lead.doc.organization_name }}
-        </div>
-      </div>
+      <Breadcrumbs :items="breadcrumbs" />
     </template>
     <template #right-header>
       <div
@@ -64,7 +44,7 @@
         v-slot="{ selected }"
       >
         <button
-          class="flex items-center gap-2 py-[7px] -mb-[1px] text-base text-gray-600 border-b border-transparent hover:text-gray-900 hover:border-gray-400 transition-all duration-300 ease-in-out"
+          class="flex items-center gap-2 py-[9px] -mb-[1px] text-base text-gray-600 border-b border-transparent hover:text-gray-900 hover:border-gray-400 transition-all duration-300 ease-in-out"
           :class="{ 'text-gray-900': selected }"
         >
           <component v-if="tab.icon" :is="tab.icon" class="h-5" />
@@ -143,6 +123,7 @@ import {
 import { TransitionPresets, useTransition } from '@vueuse/core'
 import { usersStore } from '../stores/users'
 import { ref, computed } from 'vue'
+import Breadcrumbs from '../components/Breadcrumbs.vue'
 
 const { getUser } = usersStore()
 
@@ -158,6 +139,15 @@ const lead = createDocumentResource({
   auto: true,
 })
 
+const breadcrumbs = computed(() => {
+  let items = [{ label: 'Leads', route: { name: 'Leads' } }]
+  items.push({
+    label: lead.doc.lead_name,
+    route: { name: 'Lead', params: { leadId: lead.doc.name } },
+  })
+  return items
+})
+
 const activities = [
   {
     type: 'change',