150 lines
3.8 KiB
Vue
150 lines
3.8 KiB
Vue
<script setup>
|
|
import { computed } from 'vue';
|
|
|
|
import TagInput from 'dashboard/components-next/taginput/TagInput.vue';
|
|
import Button from 'dashboard/components-next/button/Button.vue';
|
|
import InlineInput from 'dashboard/components-next/inline-input/InlineInput.vue';
|
|
|
|
const props = defineProps({
|
|
subject: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
ccEmails: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
bccEmails: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
contacts: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
showCcEmailsDropdown: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
showBccEmailsDropdown: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
showBccInput: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
isLoading: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits([
|
|
'update:ccEmails',
|
|
'update:bccEmails',
|
|
'update:subject',
|
|
'searchCcEmails',
|
|
'searchBccEmails',
|
|
'toggleBcc',
|
|
'updateDropdown',
|
|
]);
|
|
|
|
// Convert string to array for TagInput
|
|
const ccEmailsArray = computed(() =>
|
|
props.ccEmails ? props.ccEmails.split(',').map(email => email.trim()) : []
|
|
);
|
|
|
|
const bccEmailsArray = computed(() =>
|
|
props.bccEmails ? props.bccEmails.split(',').map(email => email.trim()) : []
|
|
);
|
|
|
|
const contactEmailsList = computed(() => {
|
|
return props.contacts?.map(({ name, id, email }) => ({
|
|
id,
|
|
label: email,
|
|
email,
|
|
thumbnail: { name: name, src: '' },
|
|
value: id,
|
|
action: 'email',
|
|
}));
|
|
});
|
|
|
|
// Handle updates from TagInput and convert array back to string
|
|
const handleCcUpdate = value => {
|
|
emit('update:ccEmails', value.join(','));
|
|
};
|
|
|
|
const handleBccUpdate = value => {
|
|
emit('update:bccEmails', value.join(','));
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col divide-y divide-n-strong">
|
|
<div class="flex items-baseline flex-1 w-full h-8 gap-3 px-4 py-3">
|
|
<InlineInput
|
|
:model-value="subject"
|
|
placeholder="Enter your email subject here"
|
|
label="Subject :"
|
|
focus-on-mount
|
|
@update:model-value="emit('update:subject', $event)"
|
|
/>
|
|
</div>
|
|
<div class="flex items-baseline flex-1 w-full gap-3 px-4 py-3 min-h-8">
|
|
<label
|
|
class="mb-0.5 text-sm font-medium whitespace-nowrap text-n-slate-11"
|
|
>
|
|
{{ 'Cc :' }}
|
|
</label>
|
|
<div class="flex items-center w-full gap-3 min-h-7">
|
|
<TagInput
|
|
:model-value="ccEmailsArray"
|
|
placeholder="Search or enter email and press Enter"
|
|
:menu-items="contactEmailsList"
|
|
:show-dropdown="showCcEmailsDropdown"
|
|
:is-loading="isLoading"
|
|
type="email"
|
|
class="flex-1 min-h-7"
|
|
@focus="emit('updateDropdown', 'cc', true)"
|
|
@input="emit('searchCcEmails', $event)"
|
|
@on-click-outside="emit('updateDropdown', 'cc', false)"
|
|
@update:model-value="handleCcUpdate"
|
|
/>
|
|
<Button
|
|
label="Bcc"
|
|
variant="ghost"
|
|
size="sm"
|
|
color="slate"
|
|
class="flex-shrink-0"
|
|
@click="emit('toggleBcc')"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="showBccInput"
|
|
class="flex items-baseline flex-1 w-full gap-3 px-4 py-3 min-h-8"
|
|
>
|
|
<label
|
|
class="mb-0.5 text-sm font-medium whitespace-nowrap text-n-slate-11"
|
|
>
|
|
{{ 'Bcc :' }}
|
|
</label>
|
|
<TagInput
|
|
:model-value="bccEmailsArray"
|
|
placeholder="Search or enter email and press Enter"
|
|
:menu-items="contactEmailsList"
|
|
:show-dropdown="showBccEmailsDropdown"
|
|
:is-loading="isLoading"
|
|
type="email"
|
|
class="flex-1 min-h-7"
|
|
focus-on-mount
|
|
@focus="emit('updateDropdown', 'bcc', true)"
|
|
@input="emit('searchBccEmails', $event)"
|
|
@on-click-outside="emit('updateDropdown', 'bcc', false)"
|
|
@update:model-value="handleBccUpdate"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|