test/jcrm
1
0
Fork 0
forked from test/crm
Code Pull Requests Activity

fix: tooltip issue in crm

Browse Source
This commit is contained in:
Shariq Ansari 2024-04-10 13:03:57 +05:30
parent 46a33d408b
commit fe8bcd7911
23 changed files with 261 additions and 231 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
frontend/src/components/Activities.vue
View File

@ -162,14 +162,16 @@
> >
<DotIcon class="h-2.5 w-2.5 text-gray-600" :radius="2" /> <DotIcon class="h-2.5 w-2.5 text-gray-600" :radius="2" />
</div> </div>
<div v-if="task.due_date" class="flex gap-2"> <div v-if="task.due_date">
<CalendarIcon />
<Tooltip <Tooltip
:text=" :text="
dateFormat(task.due_date, 'ddd, MMM D, YYYY | hh:mm a') 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> </Tooltip>
</div> </div>
<div class="flex items-center justify-center"> <div class="flex items-center justify-center">
@ -258,11 +260,10 @@
{{ call.type == 'Incoming' ? 'Inbound' : 'Outbound' }} Call {{ call.type == 'Incoming' ? 'Inbound' : 'Outbound' }} Call
</div> </div>
<div> <div>
<Tooltip <Tooltip :text="dateFormat(call.creation, dateTooltipFormat)">
class="text-sm text-gray-600" <div class="text-sm text-gray-600">
:text="dateFormat(call.creation, dateTooltipFormat)" {{ timeAgo(call.creation) }}
> </div>
{{ timeAgo(call.creation) }}
</Tooltip> </Tooltip>
</div> </div>
</div> </div>
@ -374,10 +375,11 @@
<span>{{ activity.data.sender_full_name }}</span> <span>{{ activity.data.sender_full_name }}</span>
<span>&middot;</span> <span>&middot;</span>
<Tooltip <Tooltip
class="text-sm text-gray-600"
:text="dateFormat(activity.creation, dateTooltipFormat)" :text="dateFormat(activity.creation, dateTooltipFormat)"
> >
{{ timeAgo(activity.creation) }} <div class="text-sm text-gray-600">
{{ timeAgo(activity.creation) }}
</div>
</Tooltip> </Tooltip>
</div> </div>
<div class="flex gap-0.5"> <div class="flex gap-0.5">
@ -456,11 +458,10 @@
</span> </span>
</div> </div>
<div class="ml-auto whitespace-nowrap"> <div class="ml-auto whitespace-nowrap">
<Tooltip <Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
:text="dateFormat(activity.creation, dateTooltipFormat)" <div class="text-gray-600">
class="text-gray-600" {{ timeAgo(activity.creation) }}
> </div>
{{ timeAgo(activity.creation) }}
</Tooltip> </Tooltip>
</div> </div>
</div> </div>
@ -481,11 +482,10 @@
{{ activity.type == 'Incoming' ? 'Inbound' : 'Outbound' }} Call {{ activity.type == 'Incoming' ? 'Inbound' : 'Outbound' }} Call
</div> </div>
<div> <div>
<Tooltip <Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
class="text-sm text-gray-600" <div class="text-sm text-gray-600">
:text="dateFormat(activity.creation, dateTooltipFormat)" {{ timeAgo(activity.creation) }}
> </div>
{{ timeAgo(activity.creation) }}
</Tooltip> </Tooltip>
</div> </div>
</div> </div>
@ -602,11 +602,10 @@
</div> </div>
<div class="ml-auto whitespace-nowrap"> <div class="ml-auto whitespace-nowrap">
<Tooltip <Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
:text="dateFormat(activity.creation, dateTooltipFormat)" <div class="text-gray-600">
class="text-gray-600" {{ timeAgo(activity.creation) }}
> </div>
{{ timeAgo(activity.creation) }}
</Tooltip> </Tooltip>
</div> </div>
</div> </div>
@ -665,11 +664,10 @@
</div> </div>
<div class="ml-auto whitespace-nowrap"> <div class="ml-auto whitespace-nowrap">
<Tooltip <Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
:text="dateFormat(activity.creation, dateTooltipFormat)" <div class="text-gray-600">
class="text-gray-600" {{ timeAgo(activity.creation) }}
> </div>
{{ timeAgo(activity.creation) }}
</Tooltip> </Tooltip>
</div> </div>
</div> </div>

108
frontend/src/components/DropdownItem.vue
View File

@ -1,55 +1,65 @@
<template> <template>
<div class="flex items-center justify-between gap-7"> <div
<div v-show="!editMode">{{ option.value }}</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"
<TextInput >
ref="inputRef" <div class="flex items-center justify-between gap-7">
v-show="editMode" <div v-show="!editMode">{{ option.value }}</div>
v-model="option.value" <TextInput
class="w-full" ref="inputRef"
:placeholder="option.placeholder" v-show="editMode"
@blur.stop="saveOption" v-model="option.value"
@keydown.enter.stop="(e) => e.target.blur()" class="w-full"
/> :placeholder="option.placeholder"
@blur.stop="saveOption"
@keydown.enter.stop="(e) => e.target.blur()"
/>
<div class="actions flex items-center justify-center"> <div class="actions flex items-center justify-center">
<Tooltip text="Set As Primary" v-if="!isNew && !option.selected"> <Tooltip text="Set As Primary" v-if="!isNew && !option.selected">
<Button <div>
variant="ghost" <Button
size="sm" variant="ghost"
class="opacity-0 hover:bg-gray-300 group-hover:opacity-100" size="sm"
@click="option.onClick" class="opacity-0 hover:bg-gray-300 group-hover:opacity-100"
> @click="option.onClick"
<SuccessIcon /> >
</Button> <SuccessIcon />
</Tooltip> </Button>
<Tooltip text="Edit"> </div>
<Button </Tooltip>
variant="ghost" <Tooltip text="Edit">
size="sm" <div>
class="opacity-0 hover:bg-gray-300 group-hover:opacity-100" <Button
@click="toggleEditMode" variant="ghost"
> size="sm"
<EditIcon /> class="opacity-0 hover:bg-gray-300 group-hover:opacity-100"
</Button> @click="toggleEditMode"
</Tooltip> >
<Tooltip text="Delete"> <EditIcon />
<Button </Button>
variant="ghost" </div>
icon="x" </Tooltip>
size="sm" <Tooltip text="Delete">
class="opacity-0 hover:bg-gray-300 group-hover:opacity-100" <div>
@click="() => option.onDelete(option, isNew)" <Button
/> variant="ghost"
</Tooltip> 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>
<div>
<FeatherIcon
v-if="option.selected"
name="check"
class="text-primary-500 h-4 w-6"
size="sm"
/>
</div> </div>
</template> </template>

9
frontend/src/components/ListViews/CallLogsListView.vue
View File

@ -40,13 +40,14 @@
<FeatherIcon :name="item.icon" class="h-3 w-3" /> <FeatherIcon :name="item.icon" class="h-3 w-3" />
</div> </div>
</template> </template>
<Tooltip <div
:text="item.label"
v-if="['modified', 'creation'].includes(column.key)" v-if="['modified', 'creation'].includes(column.key)"
class="truncate text-base" class="truncate text-base"
> >
{{ item.timeAgo }} <Tooltip :text="item.label">
</Tooltip> <div>{{ item.timeAgo }}</div>
</Tooltip>
</div>
<div v-else-if="column.key === 'status'" class="truncate text-base"> <div v-else-if="column.key === 'status'" class="truncate text-base">
<Badge <Badge
:variant="'subtle'" :variant="'subtle'"

9
frontend/src/components/ListViews/ContactsListView.vue
View File

@ -50,13 +50,14 @@
<PhoneIcon class="h-4 w-4" /> <PhoneIcon class="h-4 w-4" />
</div> </div>
</template> </template>
<Tooltip <div
:text="item.label"
v-if="['modified', 'creation'].includes(column.key)" v-if="['modified', 'creation'].includes(column.key)"
class="truncate text-base" class="truncate text-base"
> >
{{ item.timeAgo }} <Tooltip :text="item.label">
</Tooltip> <div>{{ item.timeAgo }}</div>
</Tooltip>
</div>
<div v-else-if="column.type === 'Check'"> <div v-else-if="column.type === 'Check'">
<FormControl <FormControl
type="checkbox" type="checkbox"

9
frontend/src/components/ListViews/DealsListView.vue
View File

@ -58,8 +58,7 @@
<PhoneIcon class="h-4 w-4" /> <PhoneIcon class="h-4 w-4" />
</div> </div>
</template> </template>
<Tooltip <div
:text="item.label"
v-if=" v-if="
[ [
'modified', 'modified',
@ -71,8 +70,10 @@
" "
class="truncate text-base" class="truncate text-base"
> >
{{ item.timeAgo }} <Tooltip :text="item.label">
</Tooltip> <div>{{ item.timeAgo }}</div>
</Tooltip>
</div>
<div <div
v-else-if="column.key === 'sla_status'" v-else-if="column.key === 'sla_status'"
class="truncate text-base" class="truncate text-base"

9
frontend/src/components/ListViews/EmailTemplatesListView.vue
View File

@ -26,13 +26,14 @@
<!-- <template #prefix> <!-- <template #prefix>
</template> --> </template> -->
<Tooltip <div
:text="item.label"
v-if="['modified', 'creation'].includes(column.key)" v-if="['modified', 'creation'].includes(column.key)"
class="truncate text-base" class="truncate text-base"
> >
{{ item.timeAgo }} <Tooltip :text="item.label">
</Tooltip> <div>{{ item.timeAgo }}</div>
</Tooltip>
</div>
<div v-else-if="column.key === 'status'" class="truncate text-base"> <div v-else-if="column.key === 'status'" class="truncate text-base">
<Badge <Badge
:variant="'subtle'" :variant="'subtle'"

9
frontend/src/components/ListViews/LeadsListView.vue
View File

@ -67,8 +67,7 @@
<PhoneIcon class="h-4 w-4" /> <PhoneIcon class="h-4 w-4" />
</div> </div>
</template> </template>
<Tooltip <div
:text="item.label"
v-if=" v-if="
[ [
'modified', 'modified',
@ -80,8 +79,10 @@
" "
class="truncate text-base" class="truncate text-base"
> >
{{ item.timeAgo }} <Tooltip :text="item.label">
</Tooltip> <div>{{ item.timeAgo }}</div>
</Tooltip>
</div>
<div <div
v-else-if="column.key === 'sla_status'" v-else-if="column.key === 'sla_status'"
class="truncate text-base" class="truncate text-base"

9
frontend/src/components/ListViews/OrganizationsListView.vue
View File

@ -37,13 +37,14 @@
/> />
</div> </div>
</template> </template>
<Tooltip <div
:text="item.label"
v-if="['modified', 'creation'].includes(column.key)" v-if="['modified', 'creation'].includes(column.key)"
class="truncate text-base" class="truncate text-base"
> >
{{ item.timeAgo }} <Tooltip :text="item.label">
</Tooltip> <div>{{ item.timeAgo }}</div>
</Tooltip>
</div>
<div v-else-if="column.type === 'Check'"> <div v-else-if="column.type === 'Check'">
<FormControl <FormControl
type="checkbox" type="checkbox"

31
frontend/src/components/ListViews/TasksListView.vue
View File

@ -19,18 +19,16 @@
v-slot="{ idx, column, item }" v-slot="{ idx, column, item }"
:row="row" :row="row"
> >
<Tooltip <div v-if="column.key === 'due_date'">
v-if="column.key === 'due_date'" <Tooltip :text="dateFormat(item, 'ddd, MMM D, YYYY | hh:mm a')">
class="flex items-center gap-2 truncate text-base" <div class="flex items-center gap-2 truncate text-base">
:text="dateFormat(item, 'ddd, MMM D, YYYY | hh:mm a')" <CalendarIcon />
> <div v-if="item" class="truncate">
<div> {{ dateFormat(item, 'D MMM, hh:mm a') }}
<CalendarIcon /> </div>
</div> </div>
<div v-if="item" class="truncate"> </Tooltip>
{{ dateFormat(item, 'D MMM, hh:mm a') }} </div>
</div>
</Tooltip>
<ListRowItem <ListRowItem
v-else v-else
:item="item" :item="item"
@ -53,13 +51,14 @@
/> />
</div> </div>
</template> </template>
<Tooltip <div
:text="item.label"
v-if="['modified', 'creation'].includes(column.key)" v-if="['modified', 'creation'].includes(column.key)"
class="truncate text-base" class="truncate text-base"
> >
{{ item.timeAgo }} <Tooltip :text="item.label">
</Tooltip> <div>{{ item.timeAgo }}</div>
</Tooltip>
</div>
<div v-else-if="column.type === 'Check'"> <div v-else-if="column.type === 'Check'">
<FormControl <FormControl
type="checkbox" type="checkbox"

4
frontend/src/components/Modals/AssignmentModal.vue
View File

@ -34,7 +34,9 @@
</template> </template>
<template #item-label="{ option }"> <template #item-label="{ option }">
<Tooltip :text="option.value"> <Tooltip :text="option.value">
{{ getUser(option.value).full_name }} <div class="cursor-pointer">
{{ getUser(option.value).full_name }}
</div>
</Tooltip> </Tooltip>
</template> </template>
</Link> </Link>

14
frontend/src/components/Modals/ContactModal.vue
View File

@ -92,15 +92,13 @@
<div <div
class="my-2 space-y-1.5 divide-y rounded-lg border border-gray-100 bg-white p-1.5 shadow-xl" 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-if="field.options?.length"
v-for="option in field.options" v-for="option in field.options"
:key="option.value" :key="option.name"
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" :option="option"
> />
<DropdownItem :option="option" />
</div>
<div v-else> <div v-else>
<div class="p-1.5 px-7 text-base text-gray-500"> <div class="p-1.5 px-7 text-base text-gray-500">
No {{ field.label }} Available No {{ field.label }} Available
@ -166,7 +164,7 @@ import CertificateIcon from '@/components/Icons/CertificateIcon.vue'
import EditIcon from '@/components/Icons/EditIcon.vue' import EditIcon from '@/components/Icons/EditIcon.vue'
import Link from '@/components/Controls/Link.vue' import Link from '@/components/Controls/Link.vue'
import Dropdown from '@/components/frappe-ui/Dropdown.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 { ref, nextTick, watch, computed, h } from 'vue'
import { createToast } from '@/utils' import { createToast } from '@/utils'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'

8
frontend/src/components/Modals/TaskModal.vue
View File

@ -21,7 +21,9 @@
v-if="task?.reference_docname" v-if="task?.reference_docname"
variant="outline" variant="outline"
size="sm" size="sm"
:label="task.reference_doctype == 'CRM Deal' ? 'Open Deal' : 'Open Lead'" :label="
task.reference_doctype == 'CRM Deal' ? 'Open Deal' : 'Open Lead'
"
@click="redirect()" @click="redirect()"
> >
<template #suffix> <template #suffix>
@ -77,7 +79,9 @@
</template> </template>
<template #item-label="{ option }"> <template #item-label="{ option }">
<Tooltip :text="option.value"> <Tooltip :text="option.value">
{{ getUser(option.value).full_name }} <div class="cursor-pointer">
{{ getUser(option.value).full_name }}
</div>
</Tooltip> </Tooltip>
</template> </template>
</Link> </Link>

26
frontend/src/components/MultipleAvatar.vue
View File

@ -2,20 +2,20 @@
<div <div
v-if="avatars?.length" v-if="avatars?.length"
class="mr-1.5 flex cursor-pointer items-center" 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 <Tooltip v-if="avatars?.length == 1" :text="avatars[0].name">
v-if="avatars?.length == 1" <div class="flex items-center gap-2 text-base">
:text="avatars[0].name" <Avatar
class="flex items-center gap-2 text-base" shape="circle"
> :image="avatars[0].image"
<Avatar :label="avatars[0].label"
shape="circle" size="sm"
:image="avatars[0].image" />
:label="avatars[0].label" <div class="truncate">{{ avatars[0].label }}</div>
size="sm" </div>
/>
<div class="truncate">{{ avatars[0].label }}</div>
</Tooltip> </Tooltip>
<Tooltip <Tooltip
v-else v-else

4
frontend/src/components/NewDeal.vue
View File

@ -46,7 +46,9 @@
</template> </template>
<template #item-label="{ option }"> <template #item-label="{ option }">
<Tooltip :text="option.value"> <Tooltip :text="option.value">
{{ getUser(option.value).full_name }} <div class="cursor-pointer">
{{ getUser(option.value).full_name }}
</div>
</Tooltip> </Tooltip>
</template> </template>
</Link> </Link>

4
frontend/src/components/NewLead.vue
View File

@ -46,7 +46,9 @@
</template> </template>
<template #item-label="{ option }"> <template #item-label="{ option }">
<Tooltip :text="option.value"> <Tooltip :text="option.value">
{{ getUser(option.value).full_name }} <div class="cursor-pointer">
{{ getUser(option.value).full_name }}
</div>
</Tooltip> </Tooltip>
</template> </template>
</Link> </Link>

32
frontend/src/components/Notifications.vue
View File

@ -7,7 +7,7 @@
'box-shadow': '8px 0px 8px rgba(0, 0, 0, 0.1)', 'box-shadow': '8px 0px 8px rgba(0, 0, 0, 0.1)',
'max-width': '350px', 'max-width': '350px',
'min-width': '350px', 'min-width': '350px',
'left': 'calc(100% + 1px)' left: 'calc(100% + 1px)',
}" }"
> >
<div class="flex h-screen flex-col"> <div class="flex h-screen flex-col">
@ -17,21 +17,25 @@
<div class="text-base font-medium">Notifications</div> <div class="text-base font-medium">Notifications</div>
<div class="flex gap-1"> <div class="flex gap-1">
<Tooltip text="Mark all as read"> <Tooltip text="Mark all as read">
<Button <div>
variant="ghost" <Button
@click="() => notificationsStore().mark_as_read.reload()" variant="ghost"
> @click="() => notificationsStore().mark_as_read.reload()"
<template #icon> >
<MarkAsDoneIcon class="h-4 w-4" /> <template #icon>
</template> <MarkAsDoneIcon class="h-4 w-4" />
</Button> </template>
</Button>
</div>
</Tooltip> </Tooltip>
<Tooltip text="Close"> <Tooltip text="Close">
<Button variant="ghost" @click="() => toggleNotificationPanel()"> <div>
<template #icon> <Button variant="ghost" @click="() => toggleNotificationPanel()">
<FeatherIcon name="x" class="h-4 w-4" /> <template #icon>
</template> <FeatherIcon name="x" class="h-4 w-4" />
</Button> </template>
</Button>
</div>
</Tooltip> </Tooltip>
</div> </div>
</div> </div>

28
frontend/src/components/SLASection.vue
View File

@ -7,19 +7,17 @@
> >
<div class="w-[106px] text-sm text-gray-600">{{ s.label }}</div> <div class="w-[106px] text-sm text-gray-600">{{ s.label }}</div>
<div class="grid min-h-[28px] items-center"> <div class="grid min-h-[28px] items-center">
<Tooltip <Tooltip v-if="s.tooltipText" :text="s.tooltipText">
v-if="s.tooltipText" <div class="ml-2 cursor-pointer">
:text="s.tooltipText" <Badge
class="ml-2 cursor-pointer" v-if="s.type == 'Badge'"
> class="-ml-1"
<Badge :label="s.value"
v-if="s.type == 'Badge'" variant="subtle"
class="-ml-1" :theme="s.color"
:label="s.value" />
variant="subtle" <div v-else>{{ s.value }}</div>
:theme="s.color" </div>
/>
<div v-else>{{ s.value }}</div>
</Tooltip> </Tooltip>
<Dropdown <Dropdown
class="form-control" class="form-control"
@ -75,8 +73,8 @@ let slaSection = computed(() => {
status = 'less than a minute ago' status = 'less than a minute ago'
} }
} }
} else if (["Fulfilled", "Failed"].includes(status)) { } else if (['Fulfilled', 'Failed'].includes(status)) {
status = status + " in " + formatTime(data.value.first_response_time) status = status + ' in ' + formatTime(data.value.first_response_time)
tooltipText = dateFormat(data.value.first_responded_on, dateTooltipFormat) tooltipText = dateFormat(data.value.first_responded_on, dateTooltipFormat)
} }

13
frontend/src/components/SectionFields.vue
View File

@ -13,13 +13,14 @@
<div <div
class="grid min-h-[28px] flex-1 items-center overflow-hidden text-base" class="grid min-h-[28px] flex-1 items-center overflow-hidden text-base"
> >
<Tooltip <div
v-if="field.read_only && field.type !== 'checkbox'" v-if="field.read_only && field.type !== 'checkbox'"
class="flex h-7 cursor-pointer items-center px-2 py-1 text-gray-600" class="flex h-7 cursor-pointer items-center px-2 py-1 text-gray-600"
:text="field.tooltip"
> >
{{ data[field.name] }} <Tooltip :text="field.tooltip">
</Tooltip> <div>{{ data[field.name] }}</div>
</Tooltip>
</div>
<FormControl <FormControl
v-else-if="field.type == 'checkbox'" v-else-if="field.type == 'checkbox'"
class="form-control" class="form-control"
@ -71,7 +72,9 @@
</template> </template>
<template #item-label="{ option }"> <template #item-label="{ option }">
<Tooltip :text="option.value"> <Tooltip :text="option.value">
{{ getUser(option.value).full_name }} <div class="cursor-pointer">
{{ getUser(option.value).full_name }}
</div>
</Tooltip> </Tooltip>
</template> </template>
</Link> </Link>

8
frontend/src/components/SidebarLink.vue
View File

@ -9,10 +9,14 @@
:class="isCollapsed ? 'p-1' : 'px-2 py-1'" :class="isCollapsed ? 'p-1' : 'px-2 py-1'"
> >
<div class="flex items-center"> <div class="flex items-center">
<Tooltip :text="label" placement="right"> <Tooltip :text="label" placement="right" :disabled="!isCollapsed">
<slot name="icon"> <slot name="icon">
<span class="grid h-5 w-6 flex-shrink-0 place-items-center"> <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" /> <component v-else :is="icon" class="h-4 w-4 text-gray-700" />
</span> </span>
</slot> </slot>

11
frontend/src/pages/CallLog.vue
View File

@ -78,14 +78,11 @@
<div class="text-sm text-gray-600">Duration</div> <div class="text-sm text-gray-600">Duration</div>
<div class="text-sm">{{ callLog.data.duration }}</div> <div class="text-sm">{{ callLog.data.duration }}</div>
</div> </div>
<div> <Tooltip :text="dateFormat(callLog.data.creation, dateTooltipFormat)">
<Tooltip <div class="text-sm text-gray-600">
class="text-sm text-gray-600"
:text="dateFormat(callLog.data.creation, dateTooltipFormat)"
>
{{ timeAgo(callLog.data.creation) }} {{ timeAgo(callLog.data.creation) }}
</Tooltip> </div>
</div> </Tooltip>
</div> </div>
</div> </div>

14
frontend/src/pages/Contact.vue
View File

@ -51,14 +51,12 @@
</component> </component>
</div> </div>
<div class="flex flex-col gap-0.5 truncate"> <div class="flex flex-col gap-0.5 truncate">
<Tooltip :text="contact.data.full_name"> <div class="truncate text-3xl font-semibold">
<div class="truncate text-3xl font-semibold"> <span v-if="contact.data.salutation">
<span v-if="contact.data.salutation"> {{ contact.data.salutation + '. ' }}
{{ contact.data.salutation + '. ' }} </span>
</span> <span>{{ contact.data.full_name }}</span>
<span>{{ contact.data.full_name }}</span> </div>
</div>
</Tooltip>
<div class="flex items-center gap-2 text-base text-gray-700"> <div class="flex items-center gap-2 text-base text-gray-700">
<div <div
v-if="contact.data.email_id" v-if="contact.data.email_id"

49
frontend/src/pages/Deal.vue
View File

@ -51,16 +51,15 @@
About this Deal About this Deal
</div> </div>
<div class="flex items-center justify-start gap-5 border-b p-5"> <div class="flex items-center justify-start gap-5 border-b p-5">
<Tooltip <Tooltip text="Organization logo">
text="Organization logo" <div class="group relative h-[88px] w-[88px]">
class="group relative h-[88px] w-[88px]" <Avatar
> size="3xl"
<Avatar class="h-[88px] w-[88px]"
size="3xl" :label="organization?.name"
class="h-[88px] w-[88px]" :image="organization?.organization_logo"
:label="organization?.name" />
:image="organization?.organization_logo" </div>
/>
</Tooltip> </Tooltip>
<div class="flex flex-col gap-2.5 truncate"> <div class="flex flex-col gap-2.5 truncate">
<Tooltip :text="organization?.name"> <Tooltip :text="organization?.name">
@ -69,22 +68,24 @@
</div> </div>
</Tooltip> </Tooltip>
<div class="flex gap-1.5"> <div class="flex gap-1.5">
<Tooltip text="Make a call..."> <Tooltip text="Make a call">
<Button class="h-7 w-7" @click="triggerCall"> <Button class="h-7 w-7" @click="triggerCall">
<PhoneIcon class="h-4 w-4" /> <PhoneIcon class="h-4 w-4" />
</Button> </Button>
</Tooltip> </Tooltip>
<Button class="h-7 w-7"> <Tooltip text="Send an email">
<EmailIcon <Button class="h-7 w-7">
class="h-4 w-4" <EmailIcon
@click=" class="h-4 w-4"
deal.data.email @click="
? openEmailBox() deal.data.email
: errorMessage('No email set') ? openEmailBox()
" : errorMessage('No email set')
/> "
</Button> />
<Tooltip text="Go to website..."> </Button>
</Tooltip>
<Tooltip text="Go to website">
<Button class="h-7 w-7"> <Button class="h-7 w-7">
<LinkIcon <LinkIcon
class="h-4 w-4" class="h-4 w-4"
@ -155,7 +156,9 @@
/> />
<div v-else> <div v-else>
<div <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" class="flex min-h-20 flex-1 items-center justify-center gap-3 text-base text-gray-500"
> >
<LoadingIndicator class="h-4 w-4" /> <LoadingIndicator class="h-4 w-4" />

26
frontend/src/pages/Lead.vue
View File

@ -110,7 +110,7 @@
</div> </div>
</Tooltip> </Tooltip>
<div class="flex gap-1.5"> <div class="flex gap-1.5">
<Tooltip text="Make a call..."> <Tooltip text="Make a call">
<Button <Button
class="h-7 w-7" class="h-7 w-7"
@click=" @click="
@ -123,17 +123,19 @@
<PhoneIcon class="h-4 w-4" /> <PhoneIcon class="h-4 w-4" />
</Button> </Button>
</Tooltip> </Tooltip>
<Button class="h-7 w-7"> <Tooltip text="Send an email">
<EmailIcon <Button class="h-7 w-7">
class="h-4 w-4" <EmailIcon
@click=" class="h-4 w-4"
lead.data.email @click="
? openEmailBox() lead.data.email
: errorMessage('No email set') ? openEmailBox()
" : errorMessage('No email set')
/> "
</Button> />
<Tooltip text="Go to website..."> </Button>
</Tooltip>
<Tooltip text="Go to website">
<Button class="h-7 w-7"> <Button class="h-7 w-7">
<LinkIcon <LinkIcon
class="h-4 w-4" class="h-4 w-4"