fix: separated tab and details section

This commit is contained in:
Shariq Ansari 2023-09-23 12:13:39 +05:30
parent c81f6ae61e
commit 3d659bb88e

View File

@ -41,7 +41,9 @@
/> />
</template> </template>
</LayoutHeader> </LayoutHeader>
<div class="flex h-full overflow-hidden">
<TabGroup v-slot="{ selectedIndex }" v-if="lead.data" @change="onTabChange"> <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"> <TabList class="flex items-center gap-6 border-b pl-5 relative">
<Tab <Tab
ref="tabRef" ref="tabRef"
@ -64,8 +66,7 @@
:style="{ left: `${indicatorLeftValue}px` }" :style="{ left: `${indicatorLeftValue}px` }"
/> />
</TabList> </TabList>
<div class="flex h-full overflow-hidden"> <div class="flex flex-col h-full overflow-auto">
<div class="flex-1 flex flex-col">
<TabPanels class="flex flex-1 overflow-hidden"> <TabPanels class="flex flex-1 overflow-hidden">
<TabPanel <TabPanel
class="flex-1 flex flex-col overflow-y-auto" class="flex-1 flex flex-col overflow-y-auto"
@ -88,7 +89,9 @@
v-model="lead" v-model="lead"
/> />
</div> </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]">
<FileUploader @success="changeLeadImage" :validateFile="validateFile"> <FileUploader @success="changeLeadImage" :validateFile="validateFile">
<template #default="{ openFileSelector, error }"> <template #default="{ openFileSelector, error }">
<div <div
@ -219,9 +222,7 @@
v-else-if="field.type === 'user'" v-else-if="field.type === 'user'"
:options="activeAgents" :options="activeAgents"
:value="getUser(lead.data[field.name]).full_name" :value="getUser(lead.data[field.name]).full_name"
@change=" @change="(option) => updateAssignedAgent(option.email)"
(option) => updateAssignedAgent(option.email)
"
class="form-control" class="form-control"
:placeholder="field.placeholder" :placeholder="field.placeholder"
> >
@ -312,7 +313,6 @@
</div> </div>
</div> </div>
</div> </div>
</TabGroup>
<NoteModal v-model="showNoteModal" :note="note" @updateNote="updateNote" /> <NoteModal v-model="showNoteModal" :note="note" @updateNote="updateNote" />
</template> </template>
<script setup> <script setup>