From ecad862831b78e50f66c948132fcd7a618d63864 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 25 Sep 2023 14:48:10 +0530
Subject: [PATCH] refactor: moved communicationBox from lead/deal to activities
 component

---
 frontend/src/components/Activities.vue        |  14 ++-
 frontend/src/components/CommunicationArea.vue |   5 +-
 frontend/src/pages/Deal.vue                   |  94 ++++++---------
 frontend/src/pages/Lead.vue                   | 113 ++++++++----------
 4 files changed, 101 insertions(+), 125 deletions(-)

diff --git a/frontend/src/components/Activities.vue b/frontend/src/components/Activities.vue
index 83a27262..4a3d69c6 100644
--- a/frontend/src/components/Activities.vue
+++ b/frontend/src/components/Activities.vue
@@ -12,7 +12,7 @@
       <FeatherIcon name="plus" class="w-4 h-4" />
     </Button>
   </div>
-  <div v-if="activities.length" class="overflow-y-auto">
+  <div v-if="activities.length" class="flex-1 overflow-y-auto">
     <div v-if="title == 'Notes'" class="grid grid-cols-3 gap-4 p-5 pt-0">
       <div
         v-for="note in activities"
@@ -370,9 +370,14 @@
       v-else-if="title == 'Emails'"
       variant="solid"
       label="Send email"
-      @click="emit('setFocusOnEmail')"
+      @click="$refs.emailBox.show = true"
     />
   </div>
+  <CommunicationArea
+    ref="emailBox"
+    v-if="['Emails', 'Activity'].includes(title) && lead"
+    v-model="lead"
+  />
 </template>
 <script setup>
 import UserAvatar from '@/components/UserAvatar.vue'
@@ -381,6 +386,7 @@ import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import NoteIcon from '@/components/Icons/NoteIcon.vue'
 import DurationIcon from '@/components/Icons/DurationIcon.vue'
 import PlayIcon from '@/components/Icons/PlayIcon.vue'
+import CommunicationArea from '@/components/CommunicationArea.vue'
 import { timeAgo, dateFormat, dateTooltipFormat } from '@/utils'
 import { usersStore } from '@/stores/users'
 import {
@@ -391,7 +397,7 @@ import {
   TextEditor,
   Avatar,
 } from 'frappe-ui'
-import { computed, h } from 'vue'
+import { computed, h, defineModel } from 'vue'
 
 const { getUser } = usersStore()
 
@@ -406,6 +412,8 @@ const props = defineProps({
   },
 })
 
+const lead = defineModel()
+
 const emit = defineEmits([
   'makeCall',
   'makeNote',
diff --git a/frontend/src/components/CommunicationArea.vue b/frontend/src/components/CommunicationArea.vue
index 406fb02c..f0fefa1f 100644
--- a/frontend/src/components/CommunicationArea.vue
+++ b/frontend/src/components/CommunicationArea.vue
@@ -54,9 +54,8 @@
 <script setup>
 import UserAvatar from '@/components/UserAvatar.vue'
 import EmailEditor from '@/components/EmailEditor.vue'
-import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import { usersStore } from '@/stores/users'
-import { Tooltip, call, FeatherIcon } from 'frappe-ui'
+import { call } from 'frappe-ui'
 import { ref, watch, computed, defineModel } from 'vue'
 
 const modelValue = defineModel()
@@ -108,5 +107,5 @@ async function submitComment() {
   modelValue.value.reload()
 }
 
-defineExpose({ el: sendEmailRef })
+defineExpose({ show: showCommunicationBox })
 </script>
diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index 2924749e..74ea4f5d 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -36,54 +36,45 @@
     </template>
   </LayoutHeader>
   <div v-if="deal.data" class="flex h-full overflow-hidden">
-    <TabGroup v-slot="{ selectedIndex }" @change="onTabChange">
-      <div class="flex flex-col flex-1">
-        <TabList class="flex items-center gap-6 border-b pl-5 relative">
-          <Tab
-            ref="tabRef"
-            as="template"
-            v-for="tab in tabs"
-            :key="tab.label"
-            v-slot="{ selected }"
+    <TabGroup as="div" class="flex flex-col flex-1" @change="onTabChange">
+      <TabList class="flex items-center gap-6 border-b pl-5 relative">
+        <Tab
+          ref="tabRef"
+          as="template"
+          v-for="tab in tabs"
+          :key="tab.label"
+          v-slot="{ selected }"
+        >
+          <button
+            class="flex items-center gap-2 py-2.5 -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 }"
           >
-            <button
-              class="flex items-center gap-2 py-2.5 -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" />
-              {{ tab.label }}
-            </button>
-          </Tab>
-          <div
-            ref="indicator"
-            class="h-[1px] bg-gray-900 w-[82px] absolute -bottom-[1px]"
-            :style="{ left: `${indicatorLeftValue}px` }"
-          />
-        </TabList>
-        <div class="flex flex-col h-full overflow-auto">
-          <TabPanels class="flex flex-1 overflow-hidden">
-            <TabPanel
-              class="flex-1 flex flex-col overflow-y-auto"
-              v-for="tab in tabs"
-              :key="tab.label"
-            >
-              <Activities
-                :title="tab.activityTitle"
-                :activities="tab.content"
-                @makeCall="makeCall(deal.data.mobile_no)"
-                @makeNote="(e) => showNote(e)"
-                @deleteNote="(e) => deleteNote(e)"
-                @setFocusOnEmail="() => $refs.sendEmailRef.el.click()"
-              />
-            </TabPanel>
-          </TabPanels>
-          <CommunicationArea
-            ref="sendEmailRef"
-            v-if="[0, 1].includes(selectedIndex)"
+            <component v-if="tab.icon" :is="tab.icon" class="h-5" />
+            {{ tab.label }}
+          </button>
+        </Tab>
+        <div
+          ref="indicator"
+          class="h-[1px] bg-gray-900 w-[82px] absolute -bottom-[1px]"
+          :style="{ left: `${indicatorLeftValue}px` }"
+        />
+      </TabList>
+      <TabPanels class="flex flex-1 overflow-hidden">
+        <TabPanel
+          class="flex-1 flex flex-col overflow-y-auto"
+          v-for="tab in tabs"
+          :key="tab.label"
+        >
+          <Activities
+            :title="tab.activityTitle"
+            :activities="tab.content"
             v-model="deal"
+            @makeCall="makeCall(deal.data.mobile_no)"
+            @makeNote="(e) => showNote(e)"
+            @deleteNote="(e) => deleteNote(e)"
           />
-        </div>
-      </div>
+        </TabPanel>
+      </TabPanels>
     </TabGroup>
     <div class="flex flex-col justify-between border-l w-[352px]">
       <div
@@ -365,7 +356,6 @@ import Toggler from '@/components/Toggler.vue'
 import Activities from '@/components/Activities.vue'
 import Breadcrumbs from '@/components/Breadcrumbs.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
-import CommunicationArea from '@/components/CommunicationArea.vue'
 import NoteModal from '@/components/NoteModal.vue'
 import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
 import { TransitionPresets, useTransition } from '@vueuse/core'
@@ -380,7 +370,6 @@ import { usersStore } from '@/stores/users'
 import { contactsStore } from '@/stores/contacts'
 import {
   createResource,
-  createDocumentResource,
   createListResource,
   FeatherIcon,
   FileUploader,
@@ -411,17 +400,6 @@ const deal = createResource({
   auto: true,
 })
 
-const uDeal = createDocumentResource({
-  doctype: 'CRM Lead',
-  name: props.dealId,
-  setValue: {
-    onSuccess: () => {
-      deal.reload()
-      contacts.reload()
-    },
-  },
-})
-
 function updateDeal(fieldname, value) {
   createResource({
     url: 'frappe.client.set_value',
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index 66dbf889..1048ee11 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -39,54 +39,45 @@
     </template>
   </LayoutHeader>
   <div v-if="lead.data" class="flex h-full overflow-hidden">
-    <TabGroup v-slot="{ selectedIndex }" @change="onTabChange">
-      <div class="flex flex-col flex-1">
-        <TabList class="flex items-center gap-6 border-b pl-5 relative">
-          <Tab
-            ref="tabRef"
-            as="template"
-            v-for="tab in tabs"
-            :key="tab.label"
-            v-slot="{ selected }"
+    <TabGroup as="div" class="flex flex-col flex-1" @change="onTabChange">
+      <TabList class="flex items-center gap-6 border-b pl-5 relative">
+        <Tab
+          ref="tabRef"
+          as="template"
+          v-for="tab in tabs"
+          :key="tab.label"
+          v-slot="{ selected }"
+        >
+          <button
+            class="flex items-center gap-2 py-2.5 -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 }"
           >
-            <button
-              class="flex items-center gap-2 py-2.5 -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" />
-              {{ tab.label }}
-            </button>
-          </Tab>
-          <div
-            ref="indicator"
-            class="h-[1px] bg-gray-900 w-[82px] absolute -bottom-[1px]"
-            :style="{ left: `${indicatorLeftValue}px` }"
-          />
-        </TabList>
-        <div class="flex flex-col h-full overflow-auto">
-          <TabPanels class="flex flex-1 overflow-hidden">
-            <TabPanel
-              class="flex-1 flex flex-col overflow-y-auto"
-              v-for="tab in tabs"
-              :key="tab.label"
-            >
-              <Activities
-                :title="tab.activityTitle"
-                :activities="tab.content"
-                @makeCall="makeCall(lead.data.mobile_no)"
-                @makeNote="(e) => showNote(e)"
-                @deleteNote="(e) => deleteNote(e)"
-                @setFocusOnEmail="() => $refs.sendEmailRef.el.click()"
-              />
-            </TabPanel>
-          </TabPanels>
-          <CommunicationArea
-            ref="sendEmailRef"
-            v-if="[0, 1].includes(selectedIndex)"
+            <component v-if="tab.icon" :is="tab.icon" class="h-5" />
+            {{ tab.label }}
+          </button>
+        </Tab>
+        <div
+          ref="indicator"
+          class="h-[1px] bg-gray-900 w-[82px] absolute -bottom-[1px]"
+          :style="{ left: `${indicatorLeftValue}px` }"
+        />
+      </TabList>
+      <TabPanels class="flex flex-1 overflow-hidden">
+        <TabPanel
+          class="flex-1 flex flex-col overflow-y-auto"
+          v-for="tab in tabs"
+          :key="tab.label"
+        >
+          <Activities
+            :title="tab.activityTitle"
+            :activities="tab.content"
             v-model="lead"
+            @makeCall="makeCall(lead.data.mobile_no)"
+            @makeNote="(e) => showNote(e)"
+            @deleteNote="(e) => deleteNote(e)"
           />
-        </div>
-      </div>
+        </TabPanel>
+      </TabPanels>
     </TabGroup>
     <div class="flex flex-col justify-between border-l w-[352px]">
       <div
@@ -96,7 +87,7 @@
       </div>
       <FileUploader @success="changeLeadImage" :validateFile="validateFile">
         <template #default="{ openFileSelector, error }">
-          <div class="flex gap-5 items-center justify-start p-5 border-b">
+          <div class="flex gap-5 items-center justify-start p-5">
             <div class="relative w-[88px] h-[88px] group">
               <Avatar
                 size="3xl"
@@ -170,20 +161,21 @@
           <div
             v-for="(section, i) in detailSections"
             :key="section.label"
-            class="flex flex-col p-3"
-            :class="{ 'border-b': i !== detailSections.length - 1 }"
+            class="flex flex-col"
           >
             <Toggler :is-opened="section.opened" v-slot="{ opened, toggle }">
-              <div
-                class="flex items-center gap-2 text-base font-semibold leading-5 px-2 cursor-pointer max-w-fit"
-                @click="toggle()"
-              >
-                <FeatherIcon
-                  name="chevron-right"
-                  class="h-4 text-gray-600 transition-all duration-300 ease-in-out"
-                  :class="{ 'rotate-90': opened }"
-                />
-                {{ section.label }}
+              <div class="sticky bg-white top-0 p-3 border-t z-10">
+                <div
+                  class="flex items-center gap-2 text-base font-semibold leading-5 px-2 cursor-pointer max-w-fit"
+                  @click="toggle()"
+                >
+                  <FeatherIcon
+                    name="chevron-right"
+                    class="h-4 text-gray-600 transition-all duration-300 ease-in-out"
+                    :class="{ 'rotate-90': opened }"
+                  />
+                  {{ section.label }}
+                </div>
               </div>
               <transition
                 enter-active-class="duration-300 ease-in"
@@ -193,11 +185,11 @@
                 enter-from-class="max-h-0 overflow-hidden"
                 leave-to-class="max-h-0 overflow-hidden"
               >
-                <div v-if="opened" class="flex flex-col gap-1.5">
+                <div v-if="opened" class="flex flex-col gap-1.5 p-3 pt-0">
                   <div
                     v-for="field in section.fields"
                     :key="field.name"
-                    class="flex items-center px-3 gap-2 text-base leading-5 first:mt-3"
+                    class="flex items-center px-3 gap-2 text-base leading-5"
                   >
                     <div class="text-gray-600 w-[106px]">
                       {{ field.label }}
@@ -335,7 +327,6 @@ import Toggler from '@/components/Toggler.vue'
 import Activities from '@/components/Activities.vue'
 import Breadcrumbs from '@/components/Breadcrumbs.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
-import CommunicationArea from '@/components/CommunicationArea.vue'
 import NoteModal from '@/components/NoteModal.vue'
 import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
 import { TransitionPresets, useTransition } from '@vueuse/core'