test/crm
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: made changes in call tab same as activity also updated notes color

Browse Source
This commit is contained in:
Shariq Ansari 2023-09-26 13:47:26 +05:30
parent d10e0c4b44
commit b20cdd2d03
2 changed files with 45 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,26 +1,28 @@
<template> <template>
<div class="px-10 py-5 flex items-center justify-between font-medium text-lg"> <div class="flex items-center justify-between px-10 py-5 text-lg font-medium">
<div class="flex items-center h-7 text-xl font-semibold">{{ title }}</div> <div class="flex h-7 items-center text-xl font-semibold text-gray-800">
{{ title }}
</div>
<Button v-if="title == 'Calls'" variant="solid" @click="emit('makeCall')"> <Button v-if="title == 'Calls'" variant="solid" @click="emit('makeCall')">
<PhoneIcon class="w-4 h-4" /> <PhoneIcon class="h-4 w-4" />
</Button> </Button>
<Button <Button
v-else-if="title == 'Notes'" v-else-if="title == 'Notes'"
variant="solid" variant="solid"
@click="emit('makeNote')" @click="emit('makeNote')"
> >
<FeatherIcon name="plus" class="w-4 h-4" /> <FeatherIcon name="plus" class="h-4 w-4" />
</Button> </Button>
</div> </div>
<div v-if="activities.length" class="flex-1 overflow-y-auto"> <div v-if="activities.length" class="flex-1 overflow-y-auto">
<div v-if="title == 'Notes'" class="grid grid-cols-3 gap-4 px-10 py-5 pt-0"> <div v-if="title == 'Notes'" class="grid grid-cols-3 gap-4 px-10 py-5 pt-0">
<div <div
v-for="note in activities" v-for="note in activities"
class="group flex flex-col justify-between gap-2 px-4 py-3 border rounded-lg h-48 shadow-sm hover:bg-gray-50 cursor-pointer" class="group flex h-48 cursor-pointer flex-col justify-between gap-2 rounded-md px-4 py-3 bg-gray-50 hover:bg-gray-100"
@click="emit('makeNote', note)" @click="emit('makeNote', note)"
> >
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="text-lg font-medium truncate"> <div class="truncate text-lg font-medium">
{{ note.title }} {{ note.title }}
</div> </div>
<Dropdown <Dropdown
@ -37,7 +39,7 @@
<Button <Button
icon="more-horizontal" icon="more-horizontal"
variant="ghosted" variant="ghosted"
class="hover:bg-white !h-6 !w-6" class="!h-6 !w-6 hover:bg-gray-100"
/> />
</Dropdown> </Dropdown>
</div> </div>
@ -48,7 +50,7 @@
editor-class="!prose-sm max-w-none !text-sm text-gray-600 focus:outline-none" editor-class="!prose-sm max-w-none !text-sm text-gray-600 focus:outline-none"
class="flex-1 overflow-hidden" class="flex-1 overflow-hidden"
/> />
<div class="flex items-center justify-between mt-1 gap-2"> <div class="mt-1 flex items-center justify-between gap-2">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<UserAvatar :user="note.owner" size="xs" /> <UserAvatar :user="note.owner" size="xs" />
<div class="text-sm text-gray-800"> <div class="text-sm text-gray-800">
@ -65,24 +67,24 @@
</div> </div>
<div v-else-if="title == 'Calls'"> <div v-else-if="title == 'Calls'">
<div v-for="(call, i) in activities"> <div v-for="(call, i) in activities">
<div class="grid grid-cols-[30px_minmax(auto,_1fr)] gap-4 px-5"> <div class="grid grid-cols-[30px_minmax(auto,_1fr)] gap-4 px-10">
<div <div
class="relative flex justify-center after:absolute after:border-l after:border-gray-300 after:top-0 after:left-[50%] after:-z-10" class="relative flex justify-center after:absolute after:left-[50%] after:top-0 after:-z-10 after:border-l after:border-gray-200"
:class="i != activities.length - 1 ? 'after:h-full' : 'after:h-4'" :class="i != activities.length - 1 ? 'after:h-full' : 'after:h-4'"
> >
<div <div
class="flex items-center justify-center rounded-full outline outline-4 outline-white w-6 h-6 bg-gray-200 mt-[15px] z-10" class="z-10 mt-[15px] flex h-7 w-7 items-center justify-center rounded-full bg-gray-100"
> >
<FeatherIcon <FeatherIcon
:name=" :name="
call.type == 'Incoming' ? 'phone-incoming' : 'phone-outgoing' call.type == 'Incoming' ? 'phone-incoming' : 'phone-outgoing'
" "
class="w-3.5 h-3.5 text-gray-600" class="h-4 w-4 text-gray-800"
/> />
</div> </div>
</div> </div>
<div <div
class="flex flex-col gap-3 bg-gray-50 rounded-md p-4 mb-3 max-w-[70%]" class="mb-3 flex max-w-[70%] flex-col gap-3 rounded-md bg-gray-50 p-4"
> >
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div> <div>
@ -90,7 +92,7 @@
</div> </div>
<div> <div>
<Tooltip <Tooltip
class="text-gray-600 text-sm" class="text-sm text-gray-600"
:text="dateFormat(call.creation, dateTooltipFormat)" :text="dateFormat(call.creation, dateTooltipFormat)"
> >
{{ timeAgo(call.creation) }} {{ timeAgo(call.creation) }}
@ -99,17 +101,17 @@
</div> </div>
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
<DurationIcon class="w-4 h-4 text-gray-600" /> <DurationIcon class="h-4 w-4 text-gray-600" />
<div class="text-sm text-gray-600">Duration</div> <div class="text-sm text-gray-600">Duration</div>
<div class="text-sm"> <div class="text-sm">
{{ call.duration }} {{ call.duration }}
</div> </div>
</div> </div>
<div <div
class="flex items-center gap-1 cursor-pointer select-none" class="flex cursor-pointer select-none items-center gap-1"
@click="call.show_recording = !call.show_recording" @click="call.show_recording = !call.show_recording"
> >
<PlayIcon class="w-4 h-4 text-gray-600" /> <PlayIcon class="h-4 w-4 text-gray-600" />
<div class="text-sm text-gray-600"> <div class="text-sm text-gray-600">
{{ {{
call.show_recording ? 'Hide recording' : 'Listen to call' call.show_recording ? 'Hide recording' : 'Listen to call'
@ -119,7 +121,7 @@
</div> </div>
<div <div
v-if="call.show_recording" v-if="call.show_recording"
class="flex items-center justify-between border rounded" class="flex items-center justify-between rounded border"
> >
<audio <audio
class="audio-control" class="audio-control"
@ -134,7 +136,7 @@
:label="call.caller.label" :label="call.caller.label"
size="xl" size="xl"
/> />
<div class="flex flex-col gap-1 ml-1"> <div class="ml-1 flex flex-col gap-1">
<div class="text-base font-medium"> <div class="text-base font-medium">
{{ call.caller.label }} {{ call.caller.label }}
</div> </div>
@ -144,14 +146,14 @@
</div> </div>
<FeatherIcon <FeatherIcon
name="arrow-right" name="arrow-right"
class="w-5 h-5 text-gray-600 mx-2" class="mx-2 h-5 w-5 text-gray-600"
/> />
<Avatar <Avatar
:image="call.receiver.image" :image="call.receiver.image"
:label="call.receiver.label" :label="call.receiver.label"
size="xl" size="xl"
/> />
<div class="flex flex-col gap-1 ml-1"> <div class="ml-1 flex flex-col gap-1">
<div class="text-base font-medium"> <div class="text-base font-medium">
{{ call.receiver.label }} {{ call.receiver.label }}
</div> </div>
@ -168,11 +170,11 @@
<div v-else v-for="(activity, i) in activities"> <div v-else v-for="(activity, i) in activities">
<div class="grid grid-cols-[30px_minmax(auto,_1fr)] gap-4 px-10"> <div class="grid grid-cols-[30px_minmax(auto,_1fr)] gap-4 px-10">
<div <div
class="relative flex justify-center after:absolute after:border-l after:border-gray-200 after:top-0 after:left-[50%] after:-z-10" class="relative flex justify-center after:absolute after:left-[50%] after:top-0 after:-z-10 after:border-l after:border-gray-200"
:class="i != activities.length - 1 ? 'after:h-full' : 'after:h-4'" :class="i != activities.length - 1 ? 'after:h-full' : 'after:h-4'"
> >
<div <div
class="flex items-center justify-center rounded-full w-7 h-7 bg-gray-100 z-10" class="z-10 flex h-7 w-7 items-center justify-center rounded-full bg-gray-100"
:class="{ :class="{
'mt-[15px]': [ 'mt-[15px]': [
'communication', 'communication',
@ -181,20 +183,20 @@
].includes(activity.activity_type), ].includes(activity.activity_type),
}" }"
> >
<FeatherIcon :name="activity.icon" class="w-4 h-4 text-gray-800" /> <FeatherIcon :name="activity.icon" class="h-4 w-4 text-gray-800" />
</div> </div>
</div> </div>
<div v-if="activity.activity_type == 'communication'" class="pb-6"> <div v-if="activity.activity_type == 'communication'" class="pb-6">
<div <div
class="rounded-md p-3 text-base cursor-pointer bg-gray-50 leading-6 transition-all duration-300 ease-in-out" class="cursor-pointer rounded-md bg-gray-50 p-3 text-base leading-6 transition-all duration-300 ease-in-out"
> >
<div class="flex items-center justify-between gap-2 mb-3"> <div class="mb-3 flex items-center justify-between gap-2">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<UserAvatar :user="activity.data.sender" size="md" /> <UserAvatar :user="activity.data.sender" size="md" />
<span>{{ activity.data.sender_full_name }}</span> <span>{{ activity.data.sender_full_name }}</span>
<span>&middot;</span> <span>&middot;</span>
<Tooltip <Tooltip
class="text-gray-600 text-sm" class="text-sm text-gray-600"
:text="dateFormat(activity.creation, dateTooltipFormat)" :text="dateFormat(activity.creation, dateTooltipFormat)"
> >
{{ timeAgo(activity.creation) }} {{ timeAgo(activity.creation) }}
@ -216,7 +218,7 @@
activity.activity_type == 'incoming_call' || activity.activity_type == 'incoming_call' ||
activity.activity_type == 'outgoing_call' activity.activity_type == 'outgoing_call'
" "
class="flex flex-col gap-3 bg-gray-50 rounded-md p-4 mb-3 max-w-[70%]" class="mb-3 flex max-w-[70%] flex-col gap-3 rounded-md bg-gray-50 p-4"
> >
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div> <div>
@ -224,7 +226,7 @@
</div> </div>
<div> <div>
<Tooltip <Tooltip
class="text-gray-600 text-sm" class="text-sm text-gray-600"
:text="dateFormat(activity.creation, dateTooltipFormat)" :text="dateFormat(activity.creation, dateTooltipFormat)"
> >
{{ timeAgo(activity.creation) }} {{ timeAgo(activity.creation) }}
@ -233,17 +235,17 @@
</div> </div>
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
<DurationIcon class="w-4 h-4 text-gray-600" /> <DurationIcon class="h-4 w-4 text-gray-600" />
<div class="text-sm text-gray-600">Duration</div> <div class="text-sm text-gray-600">Duration</div>
<div class="text-sm"> <div class="text-sm">
{{ activity.duration }} {{ activity.duration }}
</div> </div>
</div> </div>
<div <div
class="flex items-center gap-1 cursor-pointer select-none" class="flex cursor-pointer select-none items-center gap-1"
@click="activity.show_recording = !activity.show_recording" @click="activity.show_recording = !activity.show_recording"
> >
<PlayIcon class="w-4 h-4 text-gray-600" /> <PlayIcon class="h-4 w-4 text-gray-600" />
<div class="text-sm text-gray-600"> <div class="text-sm text-gray-600">
{{ {{
activity.show_recording ? 'Hide recording' : 'Listen to call' activity.show_recording ? 'Hide recording' : 'Listen to call'
@ -253,7 +255,7 @@
</div> </div>
<div <div
v-if="activity.show_recording" v-if="activity.show_recording"
class="flex items-center justify-between border rounded" class="flex items-center justify-between rounded border"
> >
<audio <audio
class="audio-control" class="audio-control"
@ -268,7 +270,7 @@
:label="activity.caller.label" :label="activity.caller.label"
size="xl" size="xl"
/> />
<div class="flex flex-col gap-1 ml-1"> <div class="ml-1 flex flex-col gap-1">
<div class="text-base font-medium"> <div class="text-base font-medium">
{{ activity.caller.label }} {{ activity.caller.label }}
</div> </div>
@ -278,14 +280,14 @@
</div> </div>
<FeatherIcon <FeatherIcon
name="arrow-right" name="arrow-right"
class="w-5 h-5 text-gray-600 mx-2" class="mx-2 h-5 w-5 text-gray-600"
/> />
<Avatar <Avatar
:image="activity.receiver.image" :image="activity.receiver.image"
:label="activity.receiver.label" :label="activity.receiver.label"
size="xl" size="xl"
/> />
<div class="flex flex-col gap-1 ml-1"> <div class="ml-1 flex flex-col gap-1">
<div class="text-base font-medium"> <div class="text-base font-medium">
{{ activity.receiver.label }} {{ activity.receiver.label }}
</div> </div>
@ -305,21 +307,21 @@
<span v-if="activity.type">{{ activity.type }}</span> <span v-if="activity.type">{{ activity.type }}</span>
<span <span
v-if="activity.data.field_label" v-if="activity.data.field_label"
class="text-gray-900 truncate max-w-xs" class="max-w-xs truncate text-gray-900"
> >
{{ activity.data.field_label }} {{ activity.data.field_label }}
</span> </span>
<span v-if="activity.value">{{ activity.value }}</span> <span v-if="activity.value">{{ activity.value }}</span>
<span <span
v-if="activity.data.old_value" v-if="activity.data.old_value"
class="text-gray-900 truncate max-w-xs" class="max-w-xs truncate text-gray-900"
> >
{{ activity.data.old_value }} {{ activity.data.old_value }}
</span> </span>
<span v-if="activity.to">to</span> <span v-if="activity.to">to</span>
<span <span
v-if="activity.data.value" v-if="activity.data.value"
class="text-gray-900 truncate max-w-xs" class="max-w-xs truncate text-gray-900"
> >
{{ activity.data.value }} {{ activity.data.value }}
</span> </span>
@ -328,7 +330,7 @@
<div class="ml-auto whitespace-nowrap"> <div class="ml-auto whitespace-nowrap">
<Tooltip <Tooltip
:text="dateFormat(activity.creation, dateTooltipFormat)" :text="dateFormat(activity.creation, dateTooltipFormat)"
class="text-sm text-gray-600 leading-6" class="text-sm leading-6 text-gray-600"
> >
{{ timeAgo(activity.creation) }} {{ timeAgo(activity.creation) }}
</Tooltip> </Tooltip>
@ -336,7 +338,7 @@
</div> </div>
<div <div
v-if="activity.activity_type == 'comment'" v-if="activity.activity_type == 'comment'"
class="py-3 px-4 rounded-xl shadow-sm border max-w-[80%] text-base cursor-pointer leading-6 transition-all duration-300 ease-in-out" class="max-w-[80%] cursor-pointer rounded-xl border px-4 py-3 text-base leading-6 shadow-sm transition-all duration-300 ease-in-out"
v-html="activity.data" v-html="activity.data"
/> />
</div> </div>
@ -345,9 +347,9 @@
</div> </div>
<div <div
v-else v-else
class="flex-1 flex flex-col gap-3 items-center justify-center font-medium text-xl text-gray-500" class="flex flex-1 flex-col items-center justify-center gap-3 text-xl font-medium text-gray-500"
> >
<component :is="emptyTextIcon" class="w-10 h-10" /> <component :is="emptyTextIcon" class="h-10 w-10" />
<span>{{ emptyText }}</span> <span>{{ emptyText }}</span>
<Button <Button
v-if="title == 'Calls'" v-if="title == 'Calls'"

1
frontend/src/pages/Notes.vue
View File

@ -9,7 +9,6 @@
</Button> </Button>
</template> </template>
</LayoutHeader> </LayoutHeader>
<div class="border-b"></div>
<div v-if="notes.data?.length" class="grid grid-cols-4 gap-4 p-5 overflow-y-auto"> <div v-if="notes.data?.length" class="grid grid-cols-4 gap-4 p-5 overflow-y-auto">
<div <div
v-for="note in notes.data" v-for="note in notes.data"