1
0
forked from test/crm

fix: replaced to/cc/bcc with MultiselectInput Control with validation

This commit is contained in:
Shariq Ansari 2023-12-26 18:59:09 +05:30
parent 5866adfa5e
commit 1cf8a798b1

View File

@ -9,32 +9,39 @@
:editable="editable" :editable="editable"
> >
<template #top> <template #top>
<div class="mx-10 border-t py-2.5" :class="[cc || bcc ? '' : 'border-b']"> <div
class="mx-10 flex items-center gap-2 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 <MultiselectInput
v-if="modelValue.email" class="flex-1"
class="ml-2 cursor-pointer rounded-md bg-gray-100 px-2 py-1 text-sm text-gray-800" :values="modelValue.email ? [modelValue.email] : []"
> :validate="validateEmail"
{{ modelValue.email }} error-message="Invalid email address"
</span> />
</div> </div>
<div v-if="cc" class="mx-10 py-2.5" :class="bcc ? '' : 'border-b'"> <div
v-if="cc"
class="mx-10 flex items-center gap-2 py-2.5"
:class="bcc ? '' : 'border-b'"
>
<span class="text-xs text-gray-500">CC:</span> <span class="text-xs text-gray-500">CC:</span>
<span <MultiselectInput
v-if="modelValue.email" class="flex-1"
class="ml-2 cursor-pointer rounded-md bg-gray-100 px-2 py-1 text-sm text-gray-800" :values="[]"
> :validate="validateEmail"
{{ modelValue.email }} error-message="Invalid email address"
</span> />
</div> </div>
<div v-if="bcc" class="mx-10 border-b py-2.5"> <div v-if="bcc" class="mx-10 flex items-center gap-2 border-b py-2.5">
<span class="text-xs text-gray-500">BCC:</span> <span class="text-xs text-gray-500">BCC:</span>
<span <MultiselectInput
v-if="modelValue.email" class="flex-1"
class="ml-2 cursor-pointer rounded-md bg-gray-100 px-2 py-1 text-sm text-gray-800" :values="[]"
> :validate="validateEmail"
{{ modelValue.email }} error-message="Invalid email address"
</span> />
</div> </div>
</template> </template>
<template v-slot:editor="{ editor }"> <template v-slot:editor="{ editor }">
@ -106,12 +113,14 @@
<script setup> <script setup>
import AttachmentIcon from '@/components/Icons/AttachmentIcon.vue' import AttachmentIcon from '@/components/Icons/AttachmentIcon.vue'
import AttachmentItem from '@/components/AttachmentItem.vue' import AttachmentItem from '@/components/AttachmentItem.vue'
import MultiselectInput from '@/components/Controls/MultiselectInput.vue'
import { import {
TextEditorFixedMenu, TextEditorFixedMenu,
TextEditor, TextEditor,
FileUploader, FileUploader,
FeatherIcon, FeatherIcon,
} from 'frappe-ui' } from 'frappe-ui'
import { validateEmail } from '@/utils'
import { EditorContent } from '@tiptap/vue-3' import { EditorContent } from '@tiptap/vue-3'
import { ref, computed, defineModel } from 'vue' import { ref, computed, defineModel } from 'vue'