fix: added created/modified time stamp
also added scroll to details and activities section
This commit is contained in:
Shariq Ansari
parent
f49f6d7b84
commit
4580d3ca9b
@ -67,122 +67,141 @@
|
|||||||
:style="{ left: `${indicatorLeftValue}px` }"
|
:style="{ left: `${indicatorLeftValue}px` }"
|
||||||
/>
|
/>
|
||||||
</TabList>
|
</TabList>
|
||||||
<TabPanels class="flex h-full">
|
<TabPanels class="flex h-full overflow-hidden">
|
||||||
<TabPanel class="flex-1" v-for="tab in tabs" :key="tab.label">
|
<TabPanel
|
||||||
|
class="flex-1 overflow-y-auto"
|
||||||
|
v-for="tab in tabs"
|
||||||
|
:key="tab.label"
|
||||||
|
>
|
||||||
<Activities :activities="tab.content" />
|
<Activities :activities="tab.content" />
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
<div class="flex flex-col gap-6.5 border-l p-3 w-[390px]">
|
<div
|
||||||
<div
|
class="flex flex-col justify-between border-l w-[390px] overflow-hidden"
|
||||||
v-for="section in detailSections"
|
>
|
||||||
:key="section.label"
|
<div class="flex flex-col gap-6.5 p-3 overflow-y-auto">
|
||||||
class="flex flex-col"
|
<div
|
||||||
>
|
v-for="section in detailSections"
|
||||||
<Toggler :is-opened="section.opened" v-slot="{ opened, toggle }">
|
:key="section.label"
|
||||||
<div
|
class="flex flex-col"
|
||||||
class="flex items-center gap-1 text-base font-semibold leading-5 px-3 cursor-pointer"
|
>
|
||||||
@click="toggle()"
|
<Toggler :is-opened="section.opened" v-slot="{ opened, toggle }">
|
||||||
>
|
<div
|
||||||
{{ section.label }}
|
class="flex items-center gap-1 text-base font-semibold leading-5 px-3 cursor-pointer"
|
||||||
<FeatherIcon
|
@click="toggle()"
|
||||||
:name="opened ? 'chevron-up' : 'chevron-down'"
|
>
|
||||||
class="h-4 text-gray-600"
|
{{ section.label }}
|
||||||
/>
|
<FeatherIcon
|
||||||
</div>
|
:name="opened ? 'chevron-up' : 'chevron-down'"
|
||||||
<transition
|
class="h-4 text-gray-600"
|
||||||
enter-active-class="duration-300 ease-in"
|
/>
|
||||||
leave-active-class="duration-300 ease-[cubic-bezier(0, 1, 0.5, 1)]"
|
</div>
|
||||||
enter-to-class="max-h-[200px] overflow-hidden"
|
<transition
|
||||||
leave-from-class="max-h-[200px] overflow-hidden"
|
enter-active-class="duration-300 ease-in"
|
||||||
enter-from-class="max-h-0 overflow-hidden"
|
leave-active-class="duration-300 ease-[cubic-bezier(0, 1, 0.5, 1)]"
|
||||||
leave-to-class="max-h-0 overflow-hidden"
|
enter-to-class="max-h-[200px] overflow-hidden"
|
||||||
>
|
leave-from-class="max-h-[200px] overflow-hidden"
|
||||||
<div v-if="opened" class="flex flex-col gap-3">
|
enter-from-class="max-h-0 overflow-hidden"
|
||||||
<div
|
leave-to-class="max-h-0 overflow-hidden"
|
||||||
v-for="field in section.fields"
|
>
|
||||||
:key="field.label"
|
<div v-if="opened" class="flex flex-col gap-3">
|
||||||
class="flex items-center px-3 gap-2 text-base leading-5 first:mt-4.5"
|
<div
|
||||||
>
|
v-for="field in section.fields"
|
||||||
<div class="text-gray-600 w-[106px]">{{ field.label }}</div>
|
:key="field.label"
|
||||||
<div class="flex-1 w-full">
|
class="flex items-center px-3 gap-2 text-base leading-5 first:mt-4.5"
|
||||||
<FormControl
|
>
|
||||||
v-if="field.type === 'select'"
|
<div class="text-gray-600 w-[106px]">{{ field.label }}</div>
|
||||||
type="select"
|
<div class="flex-1 w-full">
|
||||||
:options="field.options"
|
<FormControl
|
||||||
v-model="lead.doc[field.name]"
|
v-if="field.type === 'select'"
|
||||||
>
|
type="select"
|
||||||
<template #prefix>
|
:options="field.options"
|
||||||
<IndicatorIcon
|
v-model="lead.doc[field.name]"
|
||||||
:class="indicatorColor[lead.doc[field.name]]"
|
>
|
||||||
/>
|
<template #prefix>
|
||||||
</template>
|
<IndicatorIcon
|
||||||
</FormControl>
|
:class="indicatorColor[lead.doc[field.name]]"
|
||||||
<FormControl
|
/>
|
||||||
v-else-if="field.type === 'email'"
|
</template>
|
||||||
type="email"
|
</FormControl>
|
||||||
v-model="lead.doc[field.name]"
|
<FormControl
|
||||||
/>
|
v-else-if="field.type === 'email'"
|
||||||
<Autocomplete
|
type="email"
|
||||||
v-else-if="field.type === 'link'"
|
v-model="lead.doc[field.name]"
|
||||||
:options="activeAgents"
|
/>
|
||||||
:value="getUser(lead.doc[field.name]).full_name"
|
<Autocomplete
|
||||||
@change="
|
v-else-if="field.type === 'link'"
|
||||||
(option) => (lead.doc[field.name] = option.email)
|
:options="activeAgents"
|
||||||
"
|
:value="getUser(lead.doc[field.name]).full_name"
|
||||||
placeholder="Lead owner"
|
@change="
|
||||||
>
|
(option) => (lead.doc[field.name] = option.email)
|
||||||
<template #prefix>
|
"
|
||||||
<Avatar
|
placeholder="Lead owner"
|
||||||
class="mr-2"
|
>
|
||||||
:image="getUser(lead.doc[field.name]).user_image"
|
<template #prefix>
|
||||||
:label="getUser(lead.doc[field.name]).full_name"
|
<Avatar
|
||||||
size="sm"
|
class="mr-2"
|
||||||
/>
|
:image="getUser(lead.doc[field.name]).user_image"
|
||||||
</template>
|
:label="getUser(lead.doc[field.name]).full_name"
|
||||||
<template #item-prefix="{ option }">
|
size="sm"
|
||||||
<Avatar
|
/>
|
||||||
class="mr-2"
|
</template>
|
||||||
:image="getUser(option.email).user_image"
|
<template #item-prefix="{ option }">
|
||||||
:label="getUser(option.email).full_name"
|
<Avatar
|
||||||
size="sm"
|
class="mr-2"
|
||||||
/>
|
:image="getUser(option.email).user_image"
|
||||||
</template>
|
:label="getUser(option.email).full_name"
|
||||||
</Autocomplete>
|
size="sm"
|
||||||
<Dropdown
|
/>
|
||||||
v-else-if="field.type === 'dropdown'"
|
</template>
|
||||||
:options="statusDropdownOptions"
|
</Autocomplete>
|
||||||
class="w-full flex-1"
|
<Dropdown
|
||||||
>
|
v-else-if="field.type === 'dropdown'"
|
||||||
<template #default="{ open }">
|
:options="statusDropdownOptions"
|
||||||
<Button
|
class="w-full flex-1"
|
||||||
:label="lead.doc[field.name]"
|
>
|
||||||
class="justify-between w-full"
|
<template #default="{ open }">
|
||||||
>
|
<Button
|
||||||
<template #prefix>
|
:label="lead.doc[field.name]"
|
||||||
<IndicatorIcon
|
class="justify-between w-full"
|
||||||
:class="indicatorColor[lead.doc[field.name]]"
|
>
|
||||||
/>
|
<template #prefix>
|
||||||
</template>
|
<IndicatorIcon
|
||||||
<template #default>{{
|
:class="indicatorColor[lead.doc[field.name]]"
|
||||||
lead.doc[field.name]
|
/>
|
||||||
}}</template>
|
</template>
|
||||||
<template #suffix
|
<template #default>{{
|
||||||
><FeatherIcon
|
lead.doc[field.name]
|
||||||
:name="open ? 'chevron-up' : 'chevron-down'"
|
}}</template>
|
||||||
class="h-4"
|
<template #suffix
|
||||||
/></template>
|
><FeatherIcon
|
||||||
</Button>
|
:name="open ? 'chevron-up' : 'chevron-down'"
|
||||||
</template>
|
class="h-4"
|
||||||
</Dropdown>
|
/></template>
|
||||||
<FormControl
|
</Button>
|
||||||
v-else
|
</template>
|
||||||
type="text"
|
</Dropdown>
|
||||||
v-model="lead.doc[field.name]"
|
<FormControl
|
||||||
/>
|
v-else
|
||||||
|
type="text"
|
||||||
|
v-model="lead.doc[field.name]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</transition>
|
||||||
</transition>
|
</Toggler>
|
||||||
</Toggler>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-sm px-6 p-3 leading-5 cursor-pointer">
|
||||||
|
<span class="text-gray-600">Created </span>
|
||||||
|
<span :title="dateFormat(lead.doc.creation)">
|
||||||
|
{{ timeAgo(lead.doc.creation) }}
|
||||||
|
</span>
|
||||||
|
<span> · </span>
|
||||||
|
<span class="text-gray-600">Updated </span>
|
||||||
|
<span :title="dateFormat(lead.doc.modified)">
|
||||||
|
{{ timeAgo(lead.doc.modified) }}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</TabPanels>
|
</TabPanels>
|
||||||
@ -209,6 +228,7 @@ import {
|
|||||||
} from 'frappe-ui'
|
} from 'frappe-ui'
|
||||||
import { TransitionPresets, useTransition } from '@vueuse/core'
|
import { TransitionPresets, useTransition } from '@vueuse/core'
|
||||||
import { usersStore } from '@/stores/users'
|
import { usersStore } from '@/stores/users'
|
||||||
|
import { dateFormat, timeAgo } from '@/utils'
|
||||||
import { ref, computed, h } from 'vue'
|
import { ref, computed, h } from 'vue'
|
||||||
import Breadcrumbs from '@/components/Breadcrumbs.vue'
|
import Breadcrumbs from '@/components/Breadcrumbs.vue'
|
||||||
|
|
||||||
|
|||||||
10
frontend/src/utils.js
Normal file
10
frontend/src/utils.js
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import { useDateFormat, useTimeAgo } from '@vueuse/core'
|
||||||
|
|
||||||
|
export function dateFormat(date, format) {
|
||||||
|
const _format = format || 'DD-MM-YYYY HH:mm:ss'
|
||||||
|
return useDateFormat(date, _format).value
|
||||||
|
}
|
||||||
|
|
||||||
|
export function timeAgo(date) {
|
||||||
|
return useTimeAgo(date).value
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user