fix: moved email area in separate component
This commit is contained in:
Shariq Ansari
parent
42fa647cf6
commit
c165745743
@ -169,7 +169,7 @@
|
|||||||
<CommentIcon class="text-gray-800" />
|
<CommentIcon class="text-gray-800" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<CommentContent class="mb-4" :activity="comment" />
|
<CommentArea class="mb-4" :activity="comment" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -291,7 +291,7 @@
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<CallContent class="mb-4" :activity="call" />
|
<CallArea class="mb-4" :activity="call" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -357,99 +357,14 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="activity.activity_type == 'communication'" class="pb-5 mt-px">
|
<div v-if="activity.activity_type == 'communication'" class="pb-5 mt-px">
|
||||||
<div
|
<EmailArea :activity="activity" />
|
||||||
class="cursor-pointer rounded-md shadow bg-white px-3 py-1.5 text-base leading-6 transition-all duration-300 ease-in-out"
|
|
||||||
>
|
|
||||||
<div class="-mb-0.5 flex items-center justify-between gap-2">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<span>{{ activity.data.sender_full_name }}</span>
|
|
||||||
<span class="text-sm text-gray-600">
|
|
||||||
{{ '<' + activity.data.sender + '>' }}
|
|
||||||
</span>
|
|
||||||
<Badge
|
|
||||||
v-if="activity.communication_type == 'Automated Message'"
|
|
||||||
:label="__('Notification')"
|
|
||||||
variant="subtle"
|
|
||||||
theme="green"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
|
|
||||||
<div class="text-sm text-gray-600">
|
|
||||||
{{ __(timeAgo(activity.creation)) }}
|
|
||||||
</div>
|
|
||||||
</Tooltip>
|
|
||||||
<div class="flex gap-0.5">
|
|
||||||
<Tooltip :text="__('Reply')">
|
|
||||||
<div>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
class="text-gray-700"
|
|
||||||
@click="reply(activity.data)"
|
|
||||||
>
|
|
||||||
<template #icon>
|
|
||||||
<ReplyIcon />
|
|
||||||
</template>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</Tooltip>
|
|
||||||
<Tooltip :text="__('Reply All')">
|
|
||||||
<div>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
class="text-gray-700"
|
|
||||||
@click="reply(activity.data, true)"
|
|
||||||
>
|
|
||||||
<template #icon>
|
|
||||||
<ReplyAllIcon />
|
|
||||||
</template>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</Tooltip>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col gap-1 text-base text-gray-800">
|
|
||||||
<div>
|
|
||||||
<span class="mr-1 text-gray-600"> {{ __('To') }}: </span>
|
|
||||||
<span>{{ activity.data.recipients }}</span>
|
|
||||||
<span v-if="activity.data.cc">, </span>
|
|
||||||
<span v-if="activity.data.cc" class="mr-1 text-gray-600">
|
|
||||||
{{ __('CC') }}:
|
|
||||||
</span>
|
|
||||||
<span v-if="activity.data.cc">{{ activity.data.cc }}</span>
|
|
||||||
<span v-if="activity.data.bcc">, </span>
|
|
||||||
<span v-if="activity.data.bcc" class="mr-1 text-gray-600">
|
|
||||||
{{ __('BCC') }}:
|
|
||||||
</span>
|
|
||||||
<span v-if="activity.data.bcc">{{ activity.data.bcc }}</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span class="mr-1 text-gray-600"> {{ __('Subject') }}: </span>
|
|
||||||
<span>{{ activity.data.subject }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="border-0 border-t my-3.5 border-gray-200" />
|
|
||||||
<EmailContent :content="activity.data.content" />
|
|
||||||
<div
|
|
||||||
v-if="activity.data?.attachments?.length"
|
|
||||||
class="flex flex-wrap gap-2"
|
|
||||||
>
|
|
||||||
<AttachmentItem
|
|
||||||
v-for="a in activity.data.attachments"
|
|
||||||
:key="a.file_url"
|
|
||||||
:label="a.file_name"
|
|
||||||
:url="a.file_url"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="mb-4"
|
class="mb-4"
|
||||||
:id="activity.name"
|
:id="activity.name"
|
||||||
v-else-if="activity.activity_type == 'comment'"
|
v-else-if="activity.activity_type == 'comment'"
|
||||||
>
|
>
|
||||||
<CommentContent :activity="activity" />
|
<CommentArea :activity="activity" />
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-else-if="
|
v-else-if="
|
||||||
@ -458,7 +373,7 @@
|
|||||||
"
|
"
|
||||||
class="mb-4"
|
class="mb-4"
|
||||||
>
|
>
|
||||||
<CallContent :activity="activity" />
|
<CallArea :activity="activity" />
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="mb-4 flex flex-col gap-2 py-1.5">
|
<div v-else class="mb-4 flex flex-col gap-2 py-1.5">
|
||||||
<div class="flex items-center justify-stretch gap-2 text-base">
|
<div class="flex items-center justify-stretch gap-2 text-base">
|
||||||
@ -680,9 +595,9 @@
|
|||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import EmailContent from '@/components/Activities/EmailContent.vue'
|
import EmailArea from '@/components/Activities/EmailArea.vue'
|
||||||
import CommentContent from '@/components/Activities/CommentContent.vue'
|
import CommentArea from '@/components/Activities/CommentArea.vue'
|
||||||
import CallContent from '@/components/Activities/CallContent.vue'
|
import CallArea from '@/components/Activities/CallArea.vue'
|
||||||
import UserAvatar from '@/components/UserAvatar.vue'
|
import UserAvatar from '@/components/UserAvatar.vue'
|
||||||
import ActivityIcon from '@/components/Icons/ActivityIcon.vue'
|
import ActivityIcon from '@/components/Icons/ActivityIcon.vue'
|
||||||
import Email2Icon from '@/components/Icons/Email2Icon.vue'
|
import Email2Icon from '@/components/Icons/Email2Icon.vue'
|
||||||
@ -705,9 +620,6 @@ import MissedCallIcon from '@/components/Icons/MissedCallIcon.vue'
|
|||||||
import DeclinedCallIcon from '@/components/Icons/DeclinedCallIcon.vue'
|
import DeclinedCallIcon from '@/components/Icons/DeclinedCallIcon.vue'
|
||||||
import InboundCallIcon from '@/components/Icons/InboundCallIcon.vue'
|
import InboundCallIcon from '@/components/Icons/InboundCallIcon.vue'
|
||||||
import OutboundCallIcon from '@/components/Icons/OutboundCallIcon.vue'
|
import OutboundCallIcon from '@/components/Icons/OutboundCallIcon.vue'
|
||||||
import ReplyIcon from '@/components/Icons/ReplyIcon.vue'
|
|
||||||
import ReplyAllIcon from '@/components/Icons/ReplyAllIcon.vue'
|
|
||||||
import AttachmentItem from '@/components/AttachmentItem.vue'
|
|
||||||
import FadedScrollableDiv from '@/components/FadedScrollableDiv.vue'
|
import FadedScrollableDiv from '@/components/FadedScrollableDiv.vue'
|
||||||
import CommunicationArea from '@/components/CommunicationArea.vue'
|
import CommunicationArea from '@/components/CommunicationArea.vue'
|
||||||
import NoteModal from '@/components/Modals/NoteModal.vue'
|
import NoteModal from '@/components/Modals/NoteModal.vue'
|
||||||
@ -730,7 +642,6 @@ import {
|
|||||||
Tooltip,
|
Tooltip,
|
||||||
Dropdown,
|
Dropdown,
|
||||||
TextEditor,
|
TextEditor,
|
||||||
Badge,
|
|
||||||
createResource,
|
createResource,
|
||||||
call,
|
call,
|
||||||
} from 'frappe-ui'
|
} from 'frappe-ui'
|
||||||
|
|||||||
97
frontend/src/components/Activities/EmailArea.vue
Normal file
97
frontend/src/components/Activities/EmailArea.vue
Normal file
@ -0,0 +1,97 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="cursor-pointer rounded-md shadow bg-white px-3 py-1.5 text-base leading-6 transition-all duration-300 ease-in-out"
|
||||||
|
>
|
||||||
|
<div class="-mb-0.5 flex items-center justify-between gap-2">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span>{{ activity.data.sender_full_name }}</span>
|
||||||
|
<span class="text-sm text-gray-600">
|
||||||
|
{{ '<' + activity.data.sender + '>' }}
|
||||||
|
</span>
|
||||||
|
<Badge
|
||||||
|
v-if="activity.communication_type == 'Automated Message'"
|
||||||
|
:label="__('Notification')"
|
||||||
|
variant="subtle"
|
||||||
|
theme="green"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
|
||||||
|
<div class="text-sm text-gray-600">
|
||||||
|
{{ __(timeAgo(activity.creation)) }}
|
||||||
|
</div>
|
||||||
|
</Tooltip>
|
||||||
|
<div class="flex gap-0.5">
|
||||||
|
<Tooltip :text="__('Reply')">
|
||||||
|
<div>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
class="text-gray-700"
|
||||||
|
@click="reply(activity.data)"
|
||||||
|
>
|
||||||
|
<template #icon>
|
||||||
|
<ReplyIcon />
|
||||||
|
</template>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Tooltip>
|
||||||
|
<Tooltip :text="__('Reply All')">
|
||||||
|
<div>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
class="text-gray-700"
|
||||||
|
@click="reply(activity.data, true)"
|
||||||
|
>
|
||||||
|
<template #icon>
|
||||||
|
<ReplyAllIcon />
|
||||||
|
</template>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col gap-1 text-base text-gray-800">
|
||||||
|
<div>
|
||||||
|
<span class="mr-1 text-gray-600"> {{ __('To') }}: </span>
|
||||||
|
<span>{{ activity.data.recipients }}</span>
|
||||||
|
<span v-if="activity.data.cc">, </span>
|
||||||
|
<span v-if="activity.data.cc" class="mr-1 text-gray-600">
|
||||||
|
{{ __('CC') }}:
|
||||||
|
</span>
|
||||||
|
<span v-if="activity.data.cc">{{ activity.data.cc }}</span>
|
||||||
|
<span v-if="activity.data.bcc">, </span>
|
||||||
|
<span v-if="activity.data.bcc" class="mr-1 text-gray-600">
|
||||||
|
{{ __('BCC') }}:
|
||||||
|
</span>
|
||||||
|
<span v-if="activity.data.bcc">{{ activity.data.bcc }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="mr-1 text-gray-600"> {{ __('Subject') }}: </span>
|
||||||
|
<span>{{ activity.data.subject }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border-0 border-t my-3.5 border-gray-200" />
|
||||||
|
<EmailContent :content="activity.data.content" />
|
||||||
|
<div v-if="activity.data?.attachments?.length" class="flex flex-wrap gap-2">
|
||||||
|
<AttachmentItem
|
||||||
|
v-for="a in activity.data.attachments"
|
||||||
|
:key="a.file_url"
|
||||||
|
:label="a.file_name"
|
||||||
|
:url="a.file_url"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import ReplyIcon from '@/components/Icons/ReplyIcon.vue'
|
||||||
|
import ReplyAllIcon from '@/components/Icons/ReplyAllIcon.vue'
|
||||||
|
import AttachmentItem from '@/components/AttachmentItem.vue'
|
||||||
|
import EmailContent from '@/components/Activities/EmailContent.vue'
|
||||||
|
import { Badge, Tooltip } from 'frappe-ui'
|
||||||
|
import { timeAgo, dateFormat, dateTooltipFormat } from '@/utils'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
activity: Object,
|
||||||
|
})
|
||||||
|
</script>
|
||||||
Loading…
x
Reference in New Issue
Block a user