fix: tooltip issue in crm
This commit is contained in:
Shariq Ansari
parent
46a33d408b
commit
fe8bcd7911
@ -162,14 +162,16 @@
|
||||
>
|
||||
<DotIcon class="h-2.5 w-2.5 text-gray-600" :radius="2" />
|
||||
</div>
|
||||
<div v-if="task.due_date" class="flex gap-2">
|
||||
<CalendarIcon />
|
||||
<div v-if="task.due_date">
|
||||
<Tooltip
|
||||
:text="
|
||||
dateFormat(task.due_date, 'ddd, MMM D, YYYY | hh:mm a')
|
||||
"
|
||||
>
|
||||
{{ dateFormat(task.due_date, 'D MMM, hh:mm a') }}
|
||||
<div class="flex gap-2">
|
||||
<CalendarIcon />
|
||||
<div>{{ dateFormat(task.due_date, 'D MMM, hh:mm a') }}</div>
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div class="flex items-center justify-center">
|
||||
@ -258,11 +260,10 @@
|
||||
{{ call.type == 'Incoming' ? 'Inbound' : 'Outbound' }} Call
|
||||
</div>
|
||||
<div>
|
||||
<Tooltip
|
||||
class="text-sm text-gray-600"
|
||||
:text="dateFormat(call.creation, dateTooltipFormat)"
|
||||
>
|
||||
{{ timeAgo(call.creation) }}
|
||||
<Tooltip :text="dateFormat(call.creation, dateTooltipFormat)">
|
||||
<div class="text-sm text-gray-600">
|
||||
{{ timeAgo(call.creation) }}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
@ -374,10 +375,11 @@
|
||||
<span>{{ activity.data.sender_full_name }}</span>
|
||||
<span>·</span>
|
||||
<Tooltip
|
||||
class="text-sm text-gray-600"
|
||||
:text="dateFormat(activity.creation, dateTooltipFormat)"
|
||||
>
|
||||
{{ timeAgo(activity.creation) }}
|
||||
<div class="text-sm text-gray-600">
|
||||
{{ timeAgo(activity.creation) }}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div class="flex gap-0.5">
|
||||
@ -456,11 +458,10 @@
|
||||
</span>
|
||||
</div>
|
||||
<div class="ml-auto whitespace-nowrap">
|
||||
<Tooltip
|
||||
:text="dateFormat(activity.creation, dateTooltipFormat)"
|
||||
class="text-gray-600"
|
||||
>
|
||||
{{ timeAgo(activity.creation) }}
|
||||
<Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
|
||||
<div class="text-gray-600">
|
||||
{{ timeAgo(activity.creation) }}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
@ -481,11 +482,10 @@
|
||||
{{ activity.type == 'Incoming' ? 'Inbound' : 'Outbound' }} Call
|
||||
</div>
|
||||
<div>
|
||||
<Tooltip
|
||||
class="text-sm text-gray-600"
|
||||
:text="dateFormat(activity.creation, dateTooltipFormat)"
|
||||
>
|
||||
{{ timeAgo(activity.creation) }}
|
||||
<Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
|
||||
<div class="text-sm text-gray-600">
|
||||
{{ timeAgo(activity.creation) }}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
@ -602,11 +602,10 @@
|
||||
</div>
|
||||
|
||||
<div class="ml-auto whitespace-nowrap">
|
||||
<Tooltip
|
||||
:text="dateFormat(activity.creation, dateTooltipFormat)"
|
||||
class="text-gray-600"
|
||||
>
|
||||
{{ timeAgo(activity.creation) }}
|
||||
<Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
|
||||
<div class="text-gray-600">
|
||||
{{ timeAgo(activity.creation) }}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
@ -665,11 +664,10 @@
|
||||
</div>
|
||||
|
||||
<div class="ml-auto whitespace-nowrap">
|
||||
<Tooltip
|
||||
:text="dateFormat(activity.creation, dateTooltipFormat)"
|
||||
class="text-gray-600"
|
||||
>
|
||||
{{ timeAgo(activity.creation) }}
|
||||
<Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
|
||||
<div class="text-gray-600">
|
||||
{{ timeAgo(activity.creation) }}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,55 +1,65 @@
|
||||
<template>
|
||||
<div class="flex items-center justify-between gap-7">
|
||||
<div v-show="!editMode">{{ option.value }}</div>
|
||||
<TextInput
|
||||
ref="inputRef"
|
||||
v-show="editMode"
|
||||
v-model="option.value"
|
||||
class="w-full"
|
||||
:placeholder="option.placeholder"
|
||||
@blur.stop="saveOption"
|
||||
@keydown.enter.stop="(e) => e.target.blur()"
|
||||
/>
|
||||
<div
|
||||
class="group flex w-full items-center justify-between rounded bg-transparent p-1 pl-2 text-base text-gray-800 transition-colors hover:bg-gray-200 active:bg-gray-300"
|
||||
>
|
||||
<div class="flex items-center justify-between gap-7">
|
||||
<div v-show="!editMode">{{ option.value }}</div>
|
||||
<TextInput
|
||||
ref="inputRef"
|
||||
v-show="editMode"
|
||||
v-model="option.value"
|
||||
class="w-full"
|
||||
:placeholder="option.placeholder"
|
||||
@blur.stop="saveOption"
|
||||
@keydown.enter.stop="(e) => e.target.blur()"
|
||||
/>
|
||||
|
||||
<div class="actions flex items-center justify-center">
|
||||
<Tooltip text="Set As Primary" v-if="!isNew && !option.selected">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
class="opacity-0 hover:bg-gray-300 group-hover:opacity-100"
|
||||
@click="option.onClick"
|
||||
>
|
||||
<SuccessIcon />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Tooltip text="Edit">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
class="opacity-0 hover:bg-gray-300 group-hover:opacity-100"
|
||||
@click="toggleEditMode"
|
||||
>
|
||||
<EditIcon />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Tooltip text="Delete">
|
||||
<Button
|
||||
variant="ghost"
|
||||
icon="x"
|
||||
size="sm"
|
||||
class="opacity-0 hover:bg-gray-300 group-hover:opacity-100"
|
||||
@click="() => option.onDelete(option, isNew)"
|
||||
/>
|
||||
</Tooltip>
|
||||
<div class="actions flex items-center justify-center">
|
||||
<Tooltip text="Set As Primary" v-if="!isNew && !option.selected">
|
||||
<div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
class="opacity-0 hover:bg-gray-300 group-hover:opacity-100"
|
||||
@click="option.onClick"
|
||||
>
|
||||
<SuccessIcon />
|
||||
</Button>
|
||||
</div>
|
||||
</Tooltip>
|
||||
<Tooltip text="Edit">
|
||||
<div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
class="opacity-0 hover:bg-gray-300 group-hover:opacity-100"
|
||||
@click="toggleEditMode"
|
||||
>
|
||||
<EditIcon />
|
||||
</Button>
|
||||
</div>
|
||||
</Tooltip>
|
||||
<Tooltip text="Delete">
|
||||
<div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
icon="x"
|
||||
size="sm"
|
||||
class="opacity-0 hover:bg-gray-300 group-hover:opacity-100"
|
||||
@click="() => option.onDelete(option, isNew)"
|
||||
/>
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<FeatherIcon
|
||||
v-if="option.selected"
|
||||
name="check"
|
||||
class="text-primary-500 h-4 w-6"
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<FeatherIcon
|
||||
v-if="option.selected"
|
||||
name="check"
|
||||
class="text-primary-500 h-4 w-6"
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -40,13 +40,14 @@
|
||||
<FeatherIcon :name="item.icon" class="h-3 w-3" />
|
||||
</div>
|
||||
</template>
|
||||
<Tooltip
|
||||
:text="item.label"
|
||||
<div
|
||||
v-if="['modified', 'creation'].includes(column.key)"
|
||||
class="truncate text-base"
|
||||
>
|
||||
{{ item.timeAgo }}
|
||||
</Tooltip>
|
||||
<Tooltip :text="item.label">
|
||||
<div>{{ item.timeAgo }}</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div v-else-if="column.key === 'status'" class="truncate text-base">
|
||||
<Badge
|
||||
:variant="'subtle'"
|
||||
|
||||
@ -50,13 +50,14 @@
|
||||
<PhoneIcon class="h-4 w-4" />
|
||||
</div>
|
||||
</template>
|
||||
<Tooltip
|
||||
:text="item.label"
|
||||
<div
|
||||
v-if="['modified', 'creation'].includes(column.key)"
|
||||
class="truncate text-base"
|
||||
>
|
||||
{{ item.timeAgo }}
|
||||
</Tooltip>
|
||||
<Tooltip :text="item.label">
|
||||
<div>{{ item.timeAgo }}</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div v-else-if="column.type === 'Check'">
|
||||
<FormControl
|
||||
type="checkbox"
|
||||
|
||||
@ -58,8 +58,7 @@
|
||||
<PhoneIcon class="h-4 w-4" />
|
||||
</div>
|
||||
</template>
|
||||
<Tooltip
|
||||
:text="item.label"
|
||||
<div
|
||||
v-if="
|
||||
[
|
||||
'modified',
|
||||
@ -71,8 +70,10 @@
|
||||
"
|
||||
class="truncate text-base"
|
||||
>
|
||||
{{ item.timeAgo }}
|
||||
</Tooltip>
|
||||
<Tooltip :text="item.label">
|
||||
<div>{{ item.timeAgo }}</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="column.key === 'sla_status'"
|
||||
class="truncate text-base"
|
||||
|
||||
@ -26,13 +26,14 @@
|
||||
<!-- <template #prefix>
|
||||
|
||||
</template> -->
|
||||
<Tooltip
|
||||
:text="item.label"
|
||||
<div
|
||||
v-if="['modified', 'creation'].includes(column.key)"
|
||||
class="truncate text-base"
|
||||
>
|
||||
{{ item.timeAgo }}
|
||||
</Tooltip>
|
||||
<Tooltip :text="item.label">
|
||||
<div>{{ item.timeAgo }}</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div v-else-if="column.key === 'status'" class="truncate text-base">
|
||||
<Badge
|
||||
:variant="'subtle'"
|
||||
|
||||
@ -67,8 +67,7 @@
|
||||
<PhoneIcon class="h-4 w-4" />
|
||||
</div>
|
||||
</template>
|
||||
<Tooltip
|
||||
:text="item.label"
|
||||
<div
|
||||
v-if="
|
||||
[
|
||||
'modified',
|
||||
@ -80,8 +79,10 @@
|
||||
"
|
||||
class="truncate text-base"
|
||||
>
|
||||
{{ item.timeAgo }}
|
||||
</Tooltip>
|
||||
<Tooltip :text="item.label">
|
||||
<div>{{ item.timeAgo }}</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="column.key === 'sla_status'"
|
||||
class="truncate text-base"
|
||||
|
||||
@ -37,13 +37,14 @@
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<Tooltip
|
||||
:text="item.label"
|
||||
<div
|
||||
v-if="['modified', 'creation'].includes(column.key)"
|
||||
class="truncate text-base"
|
||||
>
|
||||
{{ item.timeAgo }}
|
||||
</Tooltip>
|
||||
<Tooltip :text="item.label">
|
||||
<div>{{ item.timeAgo }}</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div v-else-if="column.type === 'Check'">
|
||||
<FormControl
|
||||
type="checkbox"
|
||||
|
||||
@ -19,18 +19,16 @@
|
||||
v-slot="{ idx, column, item }"
|
||||
:row="row"
|
||||
>
|
||||
<Tooltip
|
||||
v-if="column.key === 'due_date'"
|
||||
class="flex items-center gap-2 truncate text-base"
|
||||
:text="dateFormat(item, 'ddd, MMM D, YYYY | hh:mm a')"
|
||||
>
|
||||
<div>
|
||||
<CalendarIcon />
|
||||
</div>
|
||||
<div v-if="item" class="truncate">
|
||||
{{ dateFormat(item, 'D MMM, hh:mm a') }}
|
||||
</div>
|
||||
</Tooltip>
|
||||
<div v-if="column.key === 'due_date'">
|
||||
<Tooltip :text="dateFormat(item, 'ddd, MMM D, YYYY | hh:mm a')">
|
||||
<div class="flex items-center gap-2 truncate text-base">
|
||||
<CalendarIcon />
|
||||
<div v-if="item" class="truncate">
|
||||
{{ dateFormat(item, 'D MMM, hh:mm a') }}
|
||||
</div>
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<ListRowItem
|
||||
v-else
|
||||
:item="item"
|
||||
@ -53,13 +51,14 @@
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<Tooltip
|
||||
:text="item.label"
|
||||
<div
|
||||
v-if="['modified', 'creation'].includes(column.key)"
|
||||
class="truncate text-base"
|
||||
>
|
||||
{{ item.timeAgo }}
|
||||
</Tooltip>
|
||||
<Tooltip :text="item.label">
|
||||
<div>{{ item.timeAgo }}</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div v-else-if="column.type === 'Check'">
|
||||
<FormControl
|
||||
type="checkbox"
|
||||
|
||||
@ -34,7 +34,9 @@
|
||||
</template>
|
||||
<template #item-label="{ option }">
|
||||
<Tooltip :text="option.value">
|
||||
{{ getUser(option.value).full_name }}
|
||||
<div class="cursor-pointer">
|
||||
{{ getUser(option.value).full_name }}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</template>
|
||||
</Link>
|
||||
|
||||
@ -92,15 +92,13 @@
|
||||
<div
|
||||
class="my-2 space-y-1.5 divide-y rounded-lg border border-gray-100 bg-white p-1.5 shadow-xl"
|
||||
>
|
||||
<div class="">
|
||||
<div
|
||||
<div>
|
||||
<DropdownItem
|
||||
v-if="field.options?.length"
|
||||
v-for="option in field.options"
|
||||
:key="option.value"
|
||||
class="group flex w-full items-center justify-between rounded bg-transparent p-1 pl-2 text-base text-gray-800 transition-colors hover:bg-gray-200 active:bg-gray-300"
|
||||
>
|
||||
<DropdownItem :option="option" />
|
||||
</div>
|
||||
:key="option.name"
|
||||
:option="option"
|
||||
/>
|
||||
<div v-else>
|
||||
<div class="p-1.5 px-7 text-base text-gray-500">
|
||||
No {{ field.label }} Available
|
||||
@ -166,7 +164,7 @@ import CertificateIcon from '@/components/Icons/CertificateIcon.vue'
|
||||
import EditIcon from '@/components/Icons/EditIcon.vue'
|
||||
import Link from '@/components/Controls/Link.vue'
|
||||
import Dropdown from '@/components/frappe-ui/Dropdown.vue'
|
||||
import { call } from 'frappe-ui'
|
||||
import { Tooltip, call } from 'frappe-ui'
|
||||
import { ref, nextTick, watch, computed, h } from 'vue'
|
||||
import { createToast } from '@/utils'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
@ -21,7 +21,9 @@
|
||||
v-if="task?.reference_docname"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:label="task.reference_doctype == 'CRM Deal' ? 'Open Deal' : 'Open Lead'"
|
||||
:label="
|
||||
task.reference_doctype == 'CRM Deal' ? 'Open Deal' : 'Open Lead'
|
||||
"
|
||||
@click="redirect()"
|
||||
>
|
||||
<template #suffix>
|
||||
@ -77,7 +79,9 @@
|
||||
</template>
|
||||
<template #item-label="{ option }">
|
||||
<Tooltip :text="option.value">
|
||||
{{ getUser(option.value).full_name }}
|
||||
<div class="cursor-pointer">
|
||||
{{ getUser(option.value).full_name }}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</template>
|
||||
</Link>
|
||||
|
||||
@ -2,20 +2,20 @@
|
||||
<div
|
||||
v-if="avatars?.length"
|
||||
class="mr-1.5 flex cursor-pointer items-center"
|
||||
:class="[avatars?.length > 1 ? 'flex-row-reverse' : 'truncate [&>div]:truncate']"
|
||||
:class="[
|
||||
avatars?.length > 1 ? 'flex-row-reverse' : 'truncate [&>div]:truncate',
|
||||
]"
|
||||
>
|
||||
<Tooltip
|
||||
v-if="avatars?.length == 1"
|
||||
:text="avatars[0].name"
|
||||
class="flex items-center gap-2 text-base"
|
||||
>
|
||||
<Avatar
|
||||
shape="circle"
|
||||
:image="avatars[0].image"
|
||||
:label="avatars[0].label"
|
||||
size="sm"
|
||||
/>
|
||||
<div class="truncate">{{ avatars[0].label }}</div>
|
||||
<Tooltip v-if="avatars?.length == 1" :text="avatars[0].name">
|
||||
<div class="flex items-center gap-2 text-base">
|
||||
<Avatar
|
||||
shape="circle"
|
||||
:image="avatars[0].image"
|
||||
:label="avatars[0].label"
|
||||
size="sm"
|
||||
/>
|
||||
<div class="truncate">{{ avatars[0].label }}</div>
|
||||
</div>
|
||||
</Tooltip>
|
||||
<Tooltip
|
||||
v-else
|
||||
|
||||
@ -46,7 +46,9 @@
|
||||
</template>
|
||||
<template #item-label="{ option }">
|
||||
<Tooltip :text="option.value">
|
||||
{{ getUser(option.value).full_name }}
|
||||
<div class="cursor-pointer">
|
||||
{{ getUser(option.value).full_name }}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</template>
|
||||
</Link>
|
||||
|
||||
@ -46,7 +46,9 @@
|
||||
</template>
|
||||
<template #item-label="{ option }">
|
||||
<Tooltip :text="option.value">
|
||||
{{ getUser(option.value).full_name }}
|
||||
<div class="cursor-pointer">
|
||||
{{ getUser(option.value).full_name }}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</template>
|
||||
</Link>
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
'box-shadow': '8px 0px 8px rgba(0, 0, 0, 0.1)',
|
||||
'max-width': '350px',
|
||||
'min-width': '350px',
|
||||
'left': 'calc(100% + 1px)'
|
||||
left: 'calc(100% + 1px)',
|
||||
}"
|
||||
>
|
||||
<div class="flex h-screen flex-col">
|
||||
@ -17,21 +17,25 @@
|
||||
<div class="text-base font-medium">Notifications</div>
|
||||
<div class="flex gap-1">
|
||||
<Tooltip text="Mark all as read">
|
||||
<Button
|
||||
variant="ghost"
|
||||
@click="() => notificationsStore().mark_as_read.reload()"
|
||||
>
|
||||
<template #icon>
|
||||
<MarkAsDoneIcon class="h-4 w-4" />
|
||||
</template>
|
||||
</Button>
|
||||
<div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
@click="() => notificationsStore().mark_as_read.reload()"
|
||||
>
|
||||
<template #icon>
|
||||
<MarkAsDoneIcon class="h-4 w-4" />
|
||||
</template>
|
||||
</Button>
|
||||
</div>
|
||||
</Tooltip>
|
||||
<Tooltip text="Close">
|
||||
<Button variant="ghost" @click="() => toggleNotificationPanel()">
|
||||
<template #icon>
|
||||
<FeatherIcon name="x" class="h-4 w-4" />
|
||||
</template>
|
||||
</Button>
|
||||
<div>
|
||||
<Button variant="ghost" @click="() => toggleNotificationPanel()">
|
||||
<template #icon>
|
||||
<FeatherIcon name="x" class="h-4 w-4" />
|
||||
</template>
|
||||
</Button>
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -7,19 +7,17 @@
|
||||
>
|
||||
<div class="w-[106px] text-sm text-gray-600">{{ s.label }}</div>
|
||||
<div class="grid min-h-[28px] items-center">
|
||||
<Tooltip
|
||||
v-if="s.tooltipText"
|
||||
:text="s.tooltipText"
|
||||
class="ml-2 cursor-pointer"
|
||||
>
|
||||
<Badge
|
||||
v-if="s.type == 'Badge'"
|
||||
class="-ml-1"
|
||||
:label="s.value"
|
||||
variant="subtle"
|
||||
:theme="s.color"
|
||||
/>
|
||||
<div v-else>{{ s.value }}</div>
|
||||
<Tooltip v-if="s.tooltipText" :text="s.tooltipText">
|
||||
<div class="ml-2 cursor-pointer">
|
||||
<Badge
|
||||
v-if="s.type == 'Badge'"
|
||||
class="-ml-1"
|
||||
:label="s.value"
|
||||
variant="subtle"
|
||||
:theme="s.color"
|
||||
/>
|
||||
<div v-else>{{ s.value }}</div>
|
||||
</div>
|
||||
</Tooltip>
|
||||
<Dropdown
|
||||
class="form-control"
|
||||
@ -75,8 +73,8 @@ let slaSection = computed(() => {
|
||||
status = 'less than a minute ago'
|
||||
}
|
||||
}
|
||||
} else if (["Fulfilled", "Failed"].includes(status)) {
|
||||
status = status + " in " + formatTime(data.value.first_response_time)
|
||||
} else if (['Fulfilled', 'Failed'].includes(status)) {
|
||||
status = status + ' in ' + formatTime(data.value.first_response_time)
|
||||
tooltipText = dateFormat(data.value.first_responded_on, dateTooltipFormat)
|
||||
}
|
||||
|
||||
|
||||
@ -13,13 +13,14 @@
|
||||
<div
|
||||
class="grid min-h-[28px] flex-1 items-center overflow-hidden text-base"
|
||||
>
|
||||
<Tooltip
|
||||
<div
|
||||
v-if="field.read_only && field.type !== 'checkbox'"
|
||||
class="flex h-7 cursor-pointer items-center px-2 py-1 text-gray-600"
|
||||
:text="field.tooltip"
|
||||
>
|
||||
{{ data[field.name] }}
|
||||
</Tooltip>
|
||||
<Tooltip :text="field.tooltip">
|
||||
<div>{{ data[field.name] }}</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<FormControl
|
||||
v-else-if="field.type == 'checkbox'"
|
||||
class="form-control"
|
||||
@ -71,7 +72,9 @@
|
||||
</template>
|
||||
<template #item-label="{ option }">
|
||||
<Tooltip :text="option.value">
|
||||
{{ getUser(option.value).full_name }}
|
||||
<div class="cursor-pointer">
|
||||
{{ getUser(option.value).full_name }}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</template>
|
||||
</Link>
|
||||
|
||||
@ -9,10 +9,14 @@
|
||||
:class="isCollapsed ? 'p-1' : 'px-2 py-1'"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<Tooltip :text="label" placement="right">
|
||||
<Tooltip :text="label" placement="right" :disabled="!isCollapsed">
|
||||
<slot name="icon">
|
||||
<span class="grid h-5 w-6 flex-shrink-0 place-items-center">
|
||||
<FeatherIcon v-if="typeof icon == 'string'" :name="icon" class="h-4 w-4 text-gray-700" />
|
||||
<FeatherIcon
|
||||
v-if="typeof icon == 'string'"
|
||||
:name="icon"
|
||||
class="h-4 w-4 text-gray-700"
|
||||
/>
|
||||
<component v-else :is="icon" class="h-4 w-4 text-gray-700" />
|
||||
</span>
|
||||
</slot>
|
||||
|
||||
@ -78,14 +78,11 @@
|
||||
<div class="text-sm text-gray-600">Duration</div>
|
||||
<div class="text-sm">{{ callLog.data.duration }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<Tooltip
|
||||
class="text-sm text-gray-600"
|
||||
:text="dateFormat(callLog.data.creation, dateTooltipFormat)"
|
||||
>
|
||||
<Tooltip :text="dateFormat(callLog.data.creation, dateTooltipFormat)">
|
||||
<div class="text-sm text-gray-600">
|
||||
{{ timeAgo(callLog.data.creation) }}
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -51,14 +51,12 @@
|
||||
</component>
|
||||
</div>
|
||||
<div class="flex flex-col gap-0.5 truncate">
|
||||
<Tooltip :text="contact.data.full_name">
|
||||
<div class="truncate text-3xl font-semibold">
|
||||
<span v-if="contact.data.salutation">
|
||||
{{ contact.data.salutation + '. ' }}
|
||||
</span>
|
||||
<span>{{ contact.data.full_name }}</span>
|
||||
</div>
|
||||
</Tooltip>
|
||||
<div class="truncate text-3xl font-semibold">
|
||||
<span v-if="contact.data.salutation">
|
||||
{{ contact.data.salutation + '. ' }}
|
||||
</span>
|
||||
<span>{{ contact.data.full_name }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-base text-gray-700">
|
||||
<div
|
||||
v-if="contact.data.email_id"
|
||||
|
||||
@ -51,16 +51,15 @@
|
||||
About this Deal
|
||||
</div>
|
||||
<div class="flex items-center justify-start gap-5 border-b p-5">
|
||||
<Tooltip
|
||||
text="Organization logo"
|
||||
class="group relative h-[88px] w-[88px]"
|
||||
>
|
||||
<Avatar
|
||||
size="3xl"
|
||||
class="h-[88px] w-[88px]"
|
||||
:label="organization?.name"
|
||||
:image="organization?.organization_logo"
|
||||
/>
|
||||
<Tooltip text="Organization logo">
|
||||
<div class="group relative h-[88px] w-[88px]">
|
||||
<Avatar
|
||||
size="3xl"
|
||||
class="h-[88px] w-[88px]"
|
||||
:label="organization?.name"
|
||||
:image="organization?.organization_logo"
|
||||
/>
|
||||
</div>
|
||||
</Tooltip>
|
||||
<div class="flex flex-col gap-2.5 truncate">
|
||||
<Tooltip :text="organization?.name">
|
||||
@ -69,22 +68,24 @@
|
||||
</div>
|
||||
</Tooltip>
|
||||
<div class="flex gap-1.5">
|
||||
<Tooltip text="Make a call...">
|
||||
<Tooltip text="Make a call">
|
||||
<Button class="h-7 w-7" @click="triggerCall">
|
||||
<PhoneIcon class="h-4 w-4" />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Button class="h-7 w-7">
|
||||
<EmailIcon
|
||||
class="h-4 w-4"
|
||||
@click="
|
||||
deal.data.email
|
||||
? openEmailBox()
|
||||
: errorMessage('No email set')
|
||||
"
|
||||
/>
|
||||
</Button>
|
||||
<Tooltip text="Go to website...">
|
||||
<Tooltip text="Send an email">
|
||||
<Button class="h-7 w-7">
|
||||
<EmailIcon
|
||||
class="h-4 w-4"
|
||||
@click="
|
||||
deal.data.email
|
||||
? openEmailBox()
|
||||
: errorMessage('No email set')
|
||||
"
|
||||
/>
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Tooltip text="Go to website">
|
||||
<Button class="h-7 w-7">
|
||||
<LinkIcon
|
||||
class="h-4 w-4"
|
||||
@ -155,7 +156,9 @@
|
||||
/>
|
||||
<div v-else>
|
||||
<div
|
||||
v-if="deal_contacts?.loading && deal_contacts?.data?.length == 0"
|
||||
v-if="
|
||||
deal_contacts?.loading && deal_contacts?.data?.length == 0
|
||||
"
|
||||
class="flex min-h-20 flex-1 items-center justify-center gap-3 text-base text-gray-500"
|
||||
>
|
||||
<LoadingIndicator class="h-4 w-4" />
|
||||
|
||||
@ -110,7 +110,7 @@
|
||||
</div>
|
||||
</Tooltip>
|
||||
<div class="flex gap-1.5">
|
||||
<Tooltip text="Make a call...">
|
||||
<Tooltip text="Make a call">
|
||||
<Button
|
||||
class="h-7 w-7"
|
||||
@click="
|
||||
@ -123,17 +123,19 @@
|
||||
<PhoneIcon class="h-4 w-4" />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Button class="h-7 w-7">
|
||||
<EmailIcon
|
||||
class="h-4 w-4"
|
||||
@click="
|
||||
lead.data.email
|
||||
? openEmailBox()
|
||||
: errorMessage('No email set')
|
||||
"
|
||||
/>
|
||||
</Button>
|
||||
<Tooltip text="Go to website...">
|
||||
<Tooltip text="Send an email">
|
||||
<Button class="h-7 w-7">
|
||||
<EmailIcon
|
||||
class="h-4 w-4"
|
||||
@click="
|
||||
lead.data.email
|
||||
? openEmailBox()
|
||||
: errorMessage('No email set')
|
||||
"
|
||||
/>
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Tooltip text="Go to website">
|
||||
<Button class="h-7 w-7">
|
||||
<LinkIcon
|
||||
class="h-4 w-4"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user