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" />
|
||||
</div>
|
||||
</div>
|
||||
<CommentContent class="mb-4" :activity="comment" />
|
||||
<CommentArea class="mb-4" :activity="comment" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -291,7 +291,7 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<CallContent class="mb-4" :activity="call" />
|
||||
<CallArea class="mb-4" :activity="call" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -357,99 +357,14 @@
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="activity.activity_type == 'communication'" class="pb-5 mt-px">
|
||||
<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>
|
||||
<EmailArea :activity="activity" />
|
||||
</div>
|
||||
<div
|
||||
class="mb-4"
|
||||
:id="activity.name"
|
||||
v-else-if="activity.activity_type == 'comment'"
|
||||
>
|
||||
<CommentContent :activity="activity" />
|
||||
<CommentArea :activity="activity" />
|
||||
</div>
|
||||
<div
|
||||
v-else-if="
|
||||
@ -458,7 +373,7 @@
|
||||
"
|
||||
class="mb-4"
|
||||
>
|
||||
<CallContent :activity="activity" />
|
||||
<CallArea :activity="activity" />
|
||||
</div>
|
||||
<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">
|
||||
@ -680,9 +595,9 @@
|
||||
/>
|
||||
</template>
|
||||
<script setup>
|
||||
import EmailContent from '@/components/Activities/EmailContent.vue'
|
||||
import CommentContent from '@/components/Activities/CommentContent.vue'
|
||||
import CallContent from '@/components/Activities/CallContent.vue'
|
||||
import EmailArea from '@/components/Activities/EmailArea.vue'
|
||||
import CommentArea from '@/components/Activities/CommentArea.vue'
|
||||
import CallArea from '@/components/Activities/CallArea.vue'
|
||||
import UserAvatar from '@/components/UserAvatar.vue'
|
||||
import ActivityIcon from '@/components/Icons/ActivityIcon.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 InboundCallIcon from '@/components/Icons/InboundCallIcon.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 CommunicationArea from '@/components/CommunicationArea.vue'
|
||||
import NoteModal from '@/components/Modals/NoteModal.vue'
|
||||
@ -730,7 +642,6 @@ import {
|
||||
Tooltip,
|
||||
Dropdown,
|
||||
TextEditor,
|
||||
Badge,
|
||||
createResource,
|
||||
call,
|
||||
} 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