test/crm
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki 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> <template>
<div class="flex gap-1.5 border-t px-10 py-2.5"> <div class="flex justify-between gap-3 border-t px-10 py-2.5">
<Button <div class="flex gap-1.5">
ref="sendEmailRef" <Button
variant="ghost" ref="sendEmailRef"
:class="[showCommunicationBox ? '!bg-gray-300 hover:!bg-gray-200' : '']" variant="ghost"
label="Reply" :class="[showCommunicationBox ? '!bg-gray-300 hover:!bg-gray-200' : '']"
@click="showCommunicationBox = !showCommunicationBox" label="Reply"
> @click="showCommunicationBox = !showCommunicationBox"
<template #prefix> >
<EmailIcon class="h-4" /> <template #prefix>
</template> <EmailIcon class="h-4" />
</Button> </template>
<!-- <Button variant="ghost" label="Comment"> </Button>
<template #prefix> <!-- <Button variant="ghost" label="Comment">
<CommentIcon class="h-4" /> <template #prefix>
</template> <CommentIcon class="h-4" />
</Button> --> </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>
<div <div
v-show="showCommunicationBox" v-show="showCommunicationBox"
@ -71,7 +85,7 @@ const showCommunicationBox = ref(false)
const newEmail = ref('') const newEmail = ref('')
const newEmailEditor = ref(null) const newEmailEditor = ref(null)
const sendEmailRef = ref(null) const sendEmailRef = ref(null)
const attachments = ref([]); const attachments = ref([])
watch( watch(
() => showCommunicationBox.value, () => showCommunicationBox.value,

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

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