fix: made lead layout changes on deal
This commit is contained in:
Shariq Ansari
parent
b538a2ab62
commit
ef43810298
@ -35,7 +35,9 @@
|
||||
</Dropdown>
|
||||
</template>
|
||||
</LayoutHeader>
|
||||
<div class="flex h-full overflow-hidden">
|
||||
<TabGroup v-slot="{ selectedIndex }" v-if="deal.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"
|
||||
@ -45,7 +47,7 @@
|
||||
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="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" />
|
||||
@ -58,8 +60,7 @@
|
||||
:style="{ left: `${indicatorLeftValue}px` }"
|
||||
/>
|
||||
</TabList>
|
||||
<div class="flex h-full overflow-hidden">
|
||||
<div class="flex-1 flex flex-col">
|
||||
<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"
|
||||
@ -82,41 +83,24 @@
|
||||
v-model="deal"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col justify-between border-l w-[370px]">
|
||||
</div>
|
||||
</TabGroup>
|
||||
<div class="flex flex-col justify-between border-l w-[352px]">
|
||||
<div
|
||||
class="flex items-center border-b px-5 py-2.5 h-[41px] font-semibold text-lg"
|
||||
>
|
||||
About this deal
|
||||
</div>
|
||||
<FileUploader @success="changeDealImage" :validateFile="validateFile">
|
||||
<template #default="{ openFileSelector, error }">
|
||||
<div
|
||||
class="flex flex-col gap-3 pb-4 p-5 items-center justify-center border-b"
|
||||
>
|
||||
<div class="flex gap-5 items-center justify-start p-5 border-b">
|
||||
<div class="relative w-[88px] h-[88px] group">
|
||||
<Avatar
|
||||
size="3xl"
|
||||
shape="square"
|
||||
class="w-[88px] h-[88px]"
|
||||
:label="deal.data.organization_name"
|
||||
:image="deal.data.organization_logo"
|
||||
/>
|
||||
<ErrorMessage :message="error" />
|
||||
<div class="font-medium text-2xl">
|
||||
{{ deal.data.organization_name }}
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<Tooltip text="Make a call...">
|
||||
<Button
|
||||
class="rounded-full h-8 w-8"
|
||||
@click="() => makeCall(deal.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" />
|
||||
</Button>
|
||||
<Tooltip text="Go to website...">
|
||||
<Button
|
||||
icon="link"
|
||||
@click="openWebsite(deal.data.website)"
|
||||
class="rounded-full h-8 w-8"
|
||||
/>
|
||||
</Tooltip>
|
||||
<Dropdown
|
||||
:options="[
|
||||
{
|
||||
@ -135,19 +119,56 @@
|
||||
},
|
||||
},
|
||||
]"
|
||||
class="!absolute bottom-0 left-0 right-0"
|
||||
>
|
||||
<Button icon="more-horizontal" class="rounded-full h-8 w-8" />
|
||||
<div
|
||||
class="absolute bottom-0 left-0 right-0 rounded-b-full z-1 h-11 flex items-center justify-center pt-3 bg-black bg-opacity-40 cursor-pointer opacity-0 group-hover:opacity-100 duration-300 ease-in-out"
|
||||
style="
|
||||
-webkit-clip-path: inset(12px 0 0 0);
|
||||
clip-path: inset(12px 0 0 0);
|
||||
"
|
||||
>
|
||||
<CameraIcon class="h-6 w-6 text-white cursor-pointer" />
|
||||
</div>
|
||||
</Dropdown>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2.5">
|
||||
<div class="font-medium text-2xl">
|
||||
{{ deal.data.organization_name }}
|
||||
</div>
|
||||
<div class="flex gap-1.5">
|
||||
<Tooltip text="Make a call...">
|
||||
<Button
|
||||
class="h-7 w-7"
|
||||
@click="() => makeCall(deal.data.mobile_no)"
|
||||
>
|
||||
<PhoneIcon class="h-4 w-4" />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Button class="h-7 w-7">
|
||||
<EmailIcon class="h-4 w-4" />
|
||||
</Button>
|
||||
<Tooltip text="Go to website...">
|
||||
<Button class="h-7 w-7">
|
||||
<LinkIcon
|
||||
class="h-4 w-4"
|
||||
@click="openWebsite(deal.data.website)"
|
||||
/>
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<ErrorMessage :message="error" />
|
||||
</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 class="flex flex-col overflow-y-auto">
|
||||
<div
|
||||
v-for="section in detailSections"
|
||||
v-for="(section, i) in detailSections"
|
||||
:key="section.label"
|
||||
class="flex flex-col"
|
||||
class="flex flex-col p-3"
|
||||
:class="{ 'border-b': i !== detailSections.length - 1 }"
|
||||
>
|
||||
<Toggler :is-opened="section.opened" v-slot="{ opened, toggle }">
|
||||
<div
|
||||
@ -218,9 +239,7 @@
|
||||
v-else-if="field.type === 'user'"
|
||||
:options="activeAgents"
|
||||
:value="getUser(deal.data[field.name]).full_name"
|
||||
@change="
|
||||
(option) => updateAssignedAgent(option.email)
|
||||
"
|
||||
@change="(option) => updateAssignedAgent(option.email)"
|
||||
class="form-control"
|
||||
:placeholder="deal.placeholder"
|
||||
>
|
||||
@ -326,22 +345,8 @@
|
||||
</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(deal.data.creation, dateTooltipFormat)">
|
||||
{{ timeAgo(deal.data.creation) }}
|
||||
</Tooltip>
|
||||
<span> · </span>
|
||||
<span class="text-gray-600">Updated </span>
|
||||
<Tooltip :text="dateFormat(deal.data.modified, dateTooltipFormat)">
|
||||
{{ timeAgo(deal.data.modified) }}
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TabGroup>
|
||||
<NoteModal v-model="showNoteModal" :note="note" @updateNote="updateNote" />
|
||||
</template>
|
||||
<script setup>
|
||||
@ -351,6 +356,8 @@ import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
|
||||
import TaskIcon from '@/components/Icons/TaskIcon.vue'
|
||||
import NoteIcon from '@/components/Icons/NoteIcon.vue'
|
||||
import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
|
||||
import CameraIcon from '@/components/Icons/CameraIcon.vue'
|
||||
import LinkIcon from '@/components/Icons/LinkIcon.vue'
|
||||
import LayoutHeader from '@/components/LayoutHeader.vue'
|
||||
import Toggler from '@/components/Toggler.vue'
|
||||
import Activities from '@/components/Activities.vue'
|
||||
@ -361,9 +368,6 @@ import NoteModal from '@/components/NoteModal.vue'
|
||||
import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
|
||||
import { TransitionPresets, useTransition } from '@vueuse/core'
|
||||
import {
|
||||
dateFormat,
|
||||
timeAgo,
|
||||
dateTooltipFormat,
|
||||
dealStatuses,
|
||||
statusDropdownOptions,
|
||||
openWebsite,
|
||||
|
||||
@ -89,7 +89,9 @@
|
||||
</div>
|
||||
</TabGroup>
|
||||
<div class="flex flex-col justify-between border-l w-[352px]">
|
||||
<div class="flex items-center border-b px-5 py-2.5 h-[41px] font-semibold text-lg">
|
||||
<div
|
||||
class="flex items-center border-b px-5 py-2.5 h-[41px] font-semibold text-lg"
|
||||
>
|
||||
About this lead
|
||||
</div>
|
||||
<FileUploader @success="changeLeadImage" :validateFile="validateFile">
|
||||
@ -336,9 +338,6 @@ import NoteModal from '@/components/NoteModal.vue'
|
||||
import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
|
||||
import { TransitionPresets, useTransition } from '@vueuse/core'
|
||||
import {
|
||||
dateFormat,
|
||||
timeAgo,
|
||||
dateTooltipFormat,
|
||||
leadStatuses,
|
||||
statusDropdownOptions,
|
||||
openWebsite,
|
||||
@ -349,7 +348,6 @@ import { usersStore } from '@/stores/users'
|
||||
import { contactsStore } from '@/stores/contacts'
|
||||
import {
|
||||
createResource,
|
||||
createDocumentResource,
|
||||
createListResource,
|
||||
FileUploader,
|
||||
ErrorMessage,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user