From 3d659bb88ee1c0a091caca3cbfaedee08c5a029f Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sat, 23 Sep 2023 12:13:39 +0530
Subject: [PATCH] fix: separated tab and details section

---
 frontend/src/pages/Lead.vue | 520 ++++++++++++++++++------------------
 1 file changed, 260 insertions(+), 260 deletions(-)

diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index 1d4d4005..4b92a85d 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -41,278 +41,278 @@
       />
     </template>
   </LayoutHeader>
-  <TabGroup v-slot="{ selectedIndex }" v-if="lead.data" @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-[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" />
-          {{ 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 h-full overflow-hidden">
-      <div class="flex-1 flex flex-col">
-        <TabPanels class="flex flex-1 overflow-hidden">
-          <TabPanel
-            class="flex-1 flex flex-col overflow-y-auto"
+  <div class="flex h-full overflow-hidden">
+    <TabGroup v-slot="{ selectedIndex }" v-if="lead.data" @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 }"
           >
-            <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)"
-          v-model="lead"
-        />
-      </div>
-      <div class="flex flex-col justify-between border-l w-[370px]">
-        <FileUploader @success="changeLeadImage" :validateFile="validateFile">
-          <template #default="{ openFileSelector, error }">
-            <div
-              class="flex flex-col gap-3 pb-4 p-5 items-center justify-center border-b"
+            <button
+              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 }"
             >
-              <Avatar
-                size="3xl"
-                :label="lead.data.first_name"
-                :image="lead.data.image"
+              <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()"
               />
-              <ErrorMessage :message="error" />
-              <div class="font-medium text-2xl">{{ lead.data.lead_name }}</div>
-              <div class="flex gap-3">
-                <Tooltip text="Make a call...">
-                  <Button
-                    class="rounded-full h-8 w-8"
-                    @click="() => makeCall(lead.data.mobile_no)"
-                  >
-                    <PhoneIcon class="h-4 w-4" />
-                  </Button>
-                </Tooltip>
-                <Button class="rounded-full h-8 w-8">
-                  <EmailIcon class="h-4 w-4" />
+            </TabPanel>
+          </TabPanels>
+          <CommunicationArea
+            ref="sendEmailRef"
+            v-if="[0, 1].includes(selectedIndex)"
+            v-model="lead"
+          />
+        </div>
+      </div>
+    </TabGroup>
+    <div class="flex flex-col justify-between border-l w-[352px]">
+      <FileUploader @success="changeLeadImage" :validateFile="validateFile">
+        <template #default="{ openFileSelector, error }">
+          <div
+            class="flex flex-col gap-3 pb-4 p-5 items-center justify-center border-b"
+          >
+            <Avatar
+              size="3xl"
+              :label="lead.data.first_name"
+              :image="lead.data.image"
+            />
+            <ErrorMessage :message="error" />
+            <div class="font-medium text-2xl">{{ lead.data.lead_name }}</div>
+            <div class="flex gap-3">
+              <Tooltip text="Make a call...">
+                <Button
+                  class="rounded-full h-8 w-8"
+                  @click="() => makeCall(lead.data.mobile_no)"
+                >
+                  <PhoneIcon class="h-4 w-4" />
                 </Button>
-                <Tooltip text="Go to website...">
-                  <Button
-                    icon="link"
-                    @click="openWebsite(lead.data.website)"
-                    class="rounded-full h-8 w-8"
-                  />
-                </Tooltip>
-                <Dropdown
-                  :options="[
-                    {
-                      icon: 'upload',
-                      label: lead.data.image ? 'Change photo' : 'Upload photo',
-                      onClick: openFileSelector,
+              </Tooltip>
+              <Button class="rounded-full h-8 w-8">
+                <EmailIcon class="h-4 w-4" />
+              </Button>
+              <Tooltip text="Go to website...">
+                <Button
+                  icon="link"
+                  @click="openWebsite(lead.data.website)"
+                  class="rounded-full h-8 w-8"
+                />
+              </Tooltip>
+              <Dropdown
+                :options="[
+                  {
+                    icon: 'upload',
+                    label: lead.data.image ? 'Change photo' : 'Upload photo',
+                    onClick: openFileSelector,
+                  },
+                  {
+                    icon: 'trash-2',
+                    label: 'Remove photo',
+                    onClick: () => {
+                      lead.data.image = ''
+                      updateLead('image', '')
                     },
-                    {
-                      icon: 'trash-2',
-                      label: 'Remove photo',
-                      onClick: () => {
-                        lead.data.image = ''
-                        updateLead('image', '')
-                      },
-                    },
-                  ]"
-                >
-                  <Button icon="more-horizontal" class="rounded-full h-8 w-8" />
-                </Dropdown>
-              </div>
-            </div>
-          </template>
-        </FileUploader>
-        <div class="flex-1 flex flex-col justify-between overflow-hidden">
-          <div class="flex flex-col gap-6 p-3 overflow-y-auto">
-            <div
-              v-for="section in detailSections"
-              :key="section.label"
-              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 pl-2 pr-3 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>
-                <transition
-                  enter-active-class="duration-300 ease-in"
-                  leave-active-class="duration-300 ease-[cubic-bezier(0, 1, 0.5, 1)]"
-                  enter-to-class="max-h-[200px] overflow-hidden"
-                  leave-from-class="max-h-[200px] overflow-hidden"
-                  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-for="field in section.fields"
-                      :key="field.name"
-                      class="flex items-center px-3 gap-2 text-base leading-5 first:mt-3"
-                    >
-                      <div class="text-gray-600 w-[106px]">
-                        {{ field.label }}
-                      </div>
-                      <div class="flex-1">
-                        <FormControl
-                          v-if="field.type === 'select'"
-                          type="select"
-                          :options="field.options"
-                          :value="lead.data[field.name]"
-                          @change.stop="
-                            updateLead(field.name, $event.target.value)
-                          "
-                          :debounce="500"
-                          class="form-control cursor-pointer [&_select]:cursor-pointer"
-                        >
-                          <template #prefix>
-                            <IndicatorIcon
-                              :class="leadStatuses[lead.data[field.name]].color"
-                            />
-                          </template>
-                        </FormControl>
-                        <FormControl
-                          v-else-if="field.type === 'email'"
-                          type="email"
-                          class="form-control"
-                          :value="lead.data[field.name]"
-                          @change.stop="
-                            updateLead(field.name, $event.target.value)
-                          "
-                          :debounce="500"
-                        />
-                        <Autocomplete
-                          v-else-if="field.type === 'link'"
-                          :value="lead.data[field.name]"
-                          :options="field.options"
-                          @change="(e) => field.change(e)"
-                          :placeholder="field.placeholder"
-                          class="form-control"
-                        />
-                        <Autocomplete
-                          v-else-if="field.type === 'user'"
-                          :options="activeAgents"
-                          :value="getUser(lead.data[field.name]).full_name"
-                          @change="
-                            (option) => updateAssignedAgent(option.email)
-                          "
-                          class="form-control"
-                          :placeholder="field.placeholder"
-                        >
-                          <template #target="{ togglePopover }">
-                            <Button
-                              variant="ghost"
-                              @click="togglePopover()"
-                              :label="getUser(lead.data[field.name]).full_name"
-                              class="!justify-start w-full"
-                            >
-                              <template #prefix>
-                                <UserAvatar
-                                  :user="lead.data[field.name]"
-                                  size="sm"
-                                />
-                              </template>
-                            </Button>
-                          </template>
-                          <template #item-prefix="{ option }">
-                            <UserAvatar
-                              class="mr-2"
-                              :user="option.email"
-                              size="sm"
-                            />
-                          </template>
-                        </Autocomplete>
-                        <Dropdown
-                          v-else-if="field.type === 'dropdown'"
-                          :options="
-                            statusDropdownOptions(lead.data, 'lead', updateLead)
-                          "
-                          class="w-full flex-1"
-                        >
-                          <template #default="{ open }">
-                            <Button
-                              :label="lead.data[field.name]"
-                              class="justify-between w-full"
-                            >
-                              <template #prefix>
-                                <IndicatorIcon
-                                  :class="
-                                    leadStatuses[lead.data[field.name]].color
-                                  "
-                                />
-                              </template>
-                              <template #default>{{
-                                lead.data[field.name]
-                              }}</template>
-                              <template #suffix>
-                                <FeatherIcon
-                                  :name="open ? 'chevron-up' : 'chevron-down'"
-                                  class="h-4"
-                                />
-                              </template>
-                            </Button>
-                          </template>
-                        </Dropdown>
-                        <FormControl
-                          v-else
-                          type="text"
-                          :value="lead.data[field.name]"
-                          @change.stop="
-                            updateLead(field.name, $event.target.value)
-                          "
-                          class="form-control"
-                          :debounce="500"
-                        />
-                      </div>
-                    </div>
-                  </div>
-                </transition>
-              </Toggler>
+                  },
+                ]"
+              >
+                <Button icon="more-horizontal" class="rounded-full h-8 w-8" />
+              </Dropdown>
             </div>
           </div>
-        </div>
-        <div
-          class="flex items-center gap-1 text-sm px-6 p-3 leading-5 cursor-pointer"
-        >
-          <span class="text-gray-600">Created </span>
-          <Tooltip :text="dateFormat(lead.data.creation, dateTooltipFormat)">
-            {{ timeAgo(lead.data.creation) }}
-          </Tooltip>
-          <span>&nbsp;&middot;&nbsp;</span>
-          <span class="text-gray-600">Updated </span>
-          <Tooltip :text="dateFormat(lead.data.modified, dateTooltipFormat)">
-            {{ timeAgo(lead.data.modified) }}
-          </Tooltip>
+        </template>
+      </FileUploader>
+      <div class="flex-1 flex flex-col justify-between overflow-hidden">
+        <div class="flex flex-col gap-6 p-3 overflow-y-auto">
+          <div
+            v-for="section in detailSections"
+            :key="section.label"
+            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 pl-2 pr-3 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>
+              <transition
+                enter-active-class="duration-300 ease-in"
+                leave-active-class="duration-300 ease-[cubic-bezier(0, 1, 0.5, 1)]"
+                enter-to-class="max-h-[200px] overflow-hidden"
+                leave-from-class="max-h-[200px] overflow-hidden"
+                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-for="field in section.fields"
+                    :key="field.name"
+                    class="flex items-center px-3 gap-2 text-base leading-5 first:mt-3"
+                  >
+                    <div class="text-gray-600 w-[106px]">
+                      {{ field.label }}
+                    </div>
+                    <div class="flex-1">
+                      <FormControl
+                        v-if="field.type === 'select'"
+                        type="select"
+                        :options="field.options"
+                        :value="lead.data[field.name]"
+                        @change.stop="
+                          updateLead(field.name, $event.target.value)
+                        "
+                        :debounce="500"
+                        class="form-control cursor-pointer [&_select]:cursor-pointer"
+                      >
+                        <template #prefix>
+                          <IndicatorIcon
+                            :class="leadStatuses[lead.data[field.name]].color"
+                          />
+                        </template>
+                      </FormControl>
+                      <FormControl
+                        v-else-if="field.type === 'email'"
+                        type="email"
+                        class="form-control"
+                        :value="lead.data[field.name]"
+                        @change.stop="
+                          updateLead(field.name, $event.target.value)
+                        "
+                        :debounce="500"
+                      />
+                      <Autocomplete
+                        v-else-if="field.type === 'link'"
+                        :value="lead.data[field.name]"
+                        :options="field.options"
+                        @change="(e) => field.change(e)"
+                        :placeholder="field.placeholder"
+                        class="form-control"
+                      />
+                      <Autocomplete
+                        v-else-if="field.type === 'user'"
+                        :options="activeAgents"
+                        :value="getUser(lead.data[field.name]).full_name"
+                        @change="(option) => updateAssignedAgent(option.email)"
+                        class="form-control"
+                        :placeholder="field.placeholder"
+                      >
+                        <template #target="{ togglePopover }">
+                          <Button
+                            variant="ghost"
+                            @click="togglePopover()"
+                            :label="getUser(lead.data[field.name]).full_name"
+                            class="!justify-start w-full"
+                          >
+                            <template #prefix>
+                              <UserAvatar
+                                :user="lead.data[field.name]"
+                                size="sm"
+                              />
+                            </template>
+                          </Button>
+                        </template>
+                        <template #item-prefix="{ option }">
+                          <UserAvatar
+                            class="mr-2"
+                            :user="option.email"
+                            size="sm"
+                          />
+                        </template>
+                      </Autocomplete>
+                      <Dropdown
+                        v-else-if="field.type === 'dropdown'"
+                        :options="
+                          statusDropdownOptions(lead.data, 'lead', updateLead)
+                        "
+                        class="w-full flex-1"
+                      >
+                        <template #default="{ open }">
+                          <Button
+                            :label="lead.data[field.name]"
+                            class="justify-between w-full"
+                          >
+                            <template #prefix>
+                              <IndicatorIcon
+                                :class="
+                                  leadStatuses[lead.data[field.name]].color
+                                "
+                              />
+                            </template>
+                            <template #default>{{
+                              lead.data[field.name]
+                            }}</template>
+                            <template #suffix>
+                              <FeatherIcon
+                                :name="open ? 'chevron-up' : 'chevron-down'"
+                                class="h-4"
+                              />
+                            </template>
+                          </Button>
+                        </template>
+                      </Dropdown>
+                      <FormControl
+                        v-else
+                        type="text"
+                        :value="lead.data[field.name]"
+                        @change.stop="
+                          updateLead(field.name, $event.target.value)
+                        "
+                        class="form-control"
+                        :debounce="500"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </transition>
+            </Toggler>
+          </div>
         </div>
       </div>
+      <div
+        class="flex items-center gap-1 text-sm px-6 p-3 leading-5 cursor-pointer"
+      >
+        <span class="text-gray-600">Created </span>
+        <Tooltip :text="dateFormat(lead.data.creation, dateTooltipFormat)">
+          {{ timeAgo(lead.data.creation) }}
+        </Tooltip>
+        <span>&nbsp;&middot;&nbsp;</span>
+        <span class="text-gray-600">Updated </span>
+        <Tooltip :text="dateFormat(lead.data.modified, dateTooltipFormat)">
+          {{ timeAgo(lead.data.modified) }}
+        </Tooltip>
+      </div>
     </div>
-  </TabGroup>
+  </div>
   <NoteModal v-model="showNoteModal" :note="note" @updateNote="updateNote" />
 </template>
 <script setup>