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

fix: added cc & bcc toggle

Browse Source
This commit is contained in:
Shariq Ansari 2023-12-25 22:30:52 +05:30
parent 38cf406c05
commit dd0e4c7dae
2 changed files with 65 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
frontend/src/components/CommunicationArea.vue
View File

@ -1,21 +1,35 @@
<template>
<div class="flex gap-1.5 border-t px-10 py-2.5">
<Button
ref="sendEmailRef"
variant="ghost"
:class="[showCommunicationBox ? '!bg-gray-300 hover:!bg-gray-200' : '']"
label="Reply"
@click="showCommunicationBox = !showCommunicationBox"
>
<template #prefix>
<EmailIcon class="h-4" />
</template>
</Button>
<!-- <Button variant="ghost" label="Comment">
<template #prefix>
<CommentIcon class="h-4" />
</template>
</Button> -->
<div class="flex justify-between gap-3 border-t px-10 py-2.5">
<div class="flex gap-1.5">
<Button
ref="sendEmailRef"
variant="ghost"
:class="[showCommunicationBox ? '!bg-gray-300 hover:!bg-gray-200' : '']"
label="Reply"
@click="showCommunicationBox = !showCommunicationBox"
>
<template #prefix>
<EmailIcon class="h-4" />
</template>
</Button>
<!-- <Button variant="ghost" label="Comment">
<template #prefix>
<CommentIcon class="h-4" />
</template>
</Button> -->
</div>
<div v-if="showCommunicationBox" class="flex gap-1.5">
<Button
label="CC"
@click="newEmailEditor.cc = !newEmailEditor.cc"
:class="[newEmailEditor.cc ? 'bg-gray-300 hover:bg-gray-200' : '']"
/>
<Button
label="BCC"
@click="newEmailEditor.bcc = !newEmailEditor.bcc"
:class="[newEmailEditor.bcc ? 'bg-gray-300 hover:bg-gray-200' : '']"
/>
</div>
</div>
<div
v-show="showCommunicationBox"
@ -71,7 +85,7 @@ const showCommunicationBox = ref(false)
const newEmail = ref('')
const newEmailEditor = ref(null)
const sendEmailRef = ref(null)
const attachments = ref([]);
const attachments = ref([])
watch(
() => showCommunicationBox.value,

42
frontend/src/components/EmailEditor.vue
View File

@ -9,7 +9,7 @@
:editable="editable"
>
<template #top>
<div class="mx-10 border-b border-t py-2.5">
<div class="mx-10 border-t py-2.5" :class="[cc || bcc ? '' : 'border-b']">
<span class="text-xs text-gray-500">TO:</span>
<span
v-if="modelValue.email"
@ -18,6 +18,24 @@
{{ modelValue.email }}
</span>
</div>
<div v-if="cc" class="mx-10 py-2.5" :class="bcc ? '' : 'border-b'">
<span class="text-xs text-gray-500">CC:</span>
<span
v-if="modelValue.email"
class="ml-2 cursor-pointer rounded-md bg-gray-100 px-2 py-1 text-sm text-gray-800"
>
{{ modelValue.email }}
</span>
</div>
<div v-if="bcc" class="mx-10 border-b py-2.5">
<span class="text-xs text-gray-500">BCC:</span>
<span
v-if="modelValue.email"
class="ml-2 cursor-pointer rounded-md bg-gray-100 px-2 py-1 text-sm text-gray-800"
>
{{ modelValue.email }}
</span>
</div>
</template>
<template v-slot:editor="{ editor }">
<EditorContent
@ -42,10 +60,12 @@
</template>
</AttachmentItem>
</div>
<div class="flex justify-between border-t px-10 py-2.5">
<div class="flex items-center">
<div
class="flex justify-between gap-2 overflow-hidden border-t px-10 py-2.5"
>
<div class="flex items-center overflow-x-auto">
<TextEditorFixedMenu
class="-ml-1 overflow-x-auto"
class="-ml-1"
:buttons="textEditorMenuButtons"
/>
<FileUploader
@ -70,10 +90,12 @@
</FileUploader>
</div>
<div class="mt-2 flex items-center justify-end space-x-2 sm:mt-0">
<Button v-bind="discardButtonProps || {}"> Discard </Button>
<Button variant="solid" v-bind="submitButtonProps || {}">
Submit
</Button>
<Button v-bind="discardButtonProps || {}" label="Discard" />
<Button
variant="solid"
v-bind="submitButtonProps || {}"
label="Submit"
/>
</div>
</div>
</div>
@ -129,6 +151,8 @@ const modelValue = defineModel()
const attachments = defineModel('attachments')
const textEditor = ref(null)
const cc = ref(false)
const bcc = ref(false)
const editor = computed(() => {
return textEditor.value.editor
@ -138,7 +162,7 @@ function removeAttachment(attachment) {
attachments.value = attachments.value.filter((a) => a !== attachment)
}
defineExpose({ editor })
defineExpose({ editor, cc, bcc })
const textEditorMenuButtons = [
'Paragraph',