Initial commit
This commit is contained in:
521
src/components/MessageComposer.vue
Normal file
521
src/components/MessageComposer.vue
Normal file
@@ -0,0 +1,521 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onBeforeUnmount } from 'vue'
|
||||
import { useEditor, EditorContent } from '@tiptap/vue-3'
|
||||
import StarterKit from '@tiptap/starter-kit'
|
||||
import Link from '@tiptap/extension-link'
|
||||
import Underline from '@tiptap/extension-underline'
|
||||
import TextAlign from '@tiptap/extension-text-align'
|
||||
import Placeholder from '@tiptap/extension-placeholder'
|
||||
import { entityService } from '@MailManager/services'
|
||||
import type { EntityInterface } from '@MailManager/types/entity'
|
||||
import type { MessageInterface } from '@MailManager/types/message'
|
||||
import type { CollectionInterface } from '@MailManager/types/collection'
|
||||
import { MessageObject } from '@MailManager/models/message'
|
||||
import { EntityObject } from '@MailManager/models/entity'
|
||||
|
||||
// Props
|
||||
interface Props {
|
||||
replyTo?: EntityInterface<MessageInterface> | null
|
||||
folder?: CollectionInterface | null
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
// Emits
|
||||
const emit = defineEmits<{
|
||||
close: []
|
||||
sent: []
|
||||
}>()
|
||||
|
||||
// State
|
||||
const to = ref<string[]>([])
|
||||
const cc = ref<string[]>([])
|
||||
const bcc = ref<string[]>([])
|
||||
const subject = ref('')
|
||||
const showCc = ref(false)
|
||||
const showBcc = ref(false)
|
||||
const sending = ref(false)
|
||||
const saving = ref(false)
|
||||
const lastSaved = ref<Date | null>(null)
|
||||
const draftId = ref<string | null>(null)
|
||||
|
||||
// Auto-save timer
|
||||
let autoSaveTimer: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
// Initialize Tiptap editor
|
||||
const editor = useEditor({
|
||||
extensions: [
|
||||
StarterKit,
|
||||
Link.configure({
|
||||
openOnClick: false,
|
||||
}),
|
||||
Underline,
|
||||
TextAlign.configure({
|
||||
types: ['heading', 'paragraph'],
|
||||
}),
|
||||
Placeholder.configure({
|
||||
placeholder: 'Write your message...',
|
||||
}),
|
||||
],
|
||||
content: '',
|
||||
editorProps: {
|
||||
attributes: {
|
||||
class: 'tiptap-editor pa-4',
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
// Initialize from reply-to message
|
||||
if (props.replyTo) {
|
||||
const replyMessage = new MessageObject(props.replyTo.properties)
|
||||
|
||||
const fromEmail = replyMessage.from?.address
|
||||
to.value = fromEmail ? [fromEmail] : []
|
||||
|
||||
const originalSubject = replyMessage.subject || ''
|
||||
subject.value = originalSubject.startsWith('Re:')
|
||||
? originalSubject
|
||||
: `Re: ${originalSubject}`
|
||||
|
||||
// Add quoted reply - prefer HTML content, fallback to text
|
||||
const originalBody = replyMessage.getHtmlContent() || replyMessage.getTextContent() || ''
|
||||
const senderName = replyMessage.from?.label || replyMessage.from?.address || 'Unknown'
|
||||
const quotedReply = `<p><br></p><p>On ${new Date(replyMessage.date || '').toLocaleString()}, ${senderName} wrote:</p><blockquote>${originalBody}</blockquote>`
|
||||
editor.value?.commands.setContent(quotedReply)
|
||||
}
|
||||
|
||||
// Computed
|
||||
const canSend = computed(() => {
|
||||
return to.value.length > 0 && subject.value.trim().length > 0
|
||||
})
|
||||
|
||||
const saveStatus = computed(() => {
|
||||
if (saving.value) return 'Saving...'
|
||||
if (lastSaved.value) {
|
||||
const seconds = Math.floor((Date.now() - lastSaved.value.getTime()) / 1000)
|
||||
if (seconds < 60) return 'Saved just now'
|
||||
if (seconds < 3600) return `Saved ${Math.floor(seconds / 60)} min ago`
|
||||
return `Saved at ${lastSaved.value.toLocaleTimeString()}`
|
||||
}
|
||||
return ''
|
||||
})
|
||||
|
||||
// Auto-save function
|
||||
const saveDraft = async () => {
|
||||
if (saving.value || sending.value) return
|
||||
if (!props.folder) return
|
||||
|
||||
// Don't save if completely empty
|
||||
if (to.value.length === 0 && subject.value.trim().length === 0 && !editor.value?.getText().trim()) {
|
||||
return
|
||||
}
|
||||
|
||||
saving.value = true
|
||||
|
||||
try {
|
||||
const draftData = {
|
||||
to: to.value,
|
||||
cc: cc.value,
|
||||
bcc: bcc.value,
|
||||
subject: subject.value,
|
||||
body: {
|
||||
html: editor.value?.getHTML() || '',
|
||||
text: editor.value?.getText() || '',
|
||||
},
|
||||
}
|
||||
|
||||
// Find drafts folder for this service
|
||||
// For now, we'll use the current folder's service
|
||||
// In a real implementation, you'd find the actual Drafts folder
|
||||
const response = await entityService.create({
|
||||
provider: props.folder.provider,
|
||||
service: props.folder.service,
|
||||
collection: props.folder.identifier, // Should be drafts folder ID
|
||||
data: draftData,
|
||||
})
|
||||
|
||||
if (response && response.entity) {
|
||||
draftId.value = response.entity.identifier
|
||||
}
|
||||
|
||||
lastSaved.value = new Date()
|
||||
} catch (error) {
|
||||
console.error('[MessageComposer] Failed to save draft:', error)
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// Watch for changes and trigger auto-save
|
||||
const scheduleAutoSave = () => {
|
||||
if (autoSaveTimer) {
|
||||
clearTimeout(autoSaveTimer)
|
||||
}
|
||||
|
||||
autoSaveTimer = setTimeout(() => {
|
||||
saveDraft()
|
||||
}, 30000) // 30 seconds
|
||||
}
|
||||
|
||||
watch([to, cc, bcc, subject], () => {
|
||||
scheduleAutoSave()
|
||||
}, { deep: true })
|
||||
|
||||
// Watch editor content changes
|
||||
if (editor.value) {
|
||||
editor.value.on('update', () => {
|
||||
scheduleAutoSave()
|
||||
})
|
||||
}
|
||||
|
||||
// Cleanup
|
||||
onBeforeUnmount(() => {
|
||||
if (autoSaveTimer) {
|
||||
clearTimeout(autoSaveTimer)
|
||||
}
|
||||
editor.value?.destroy()
|
||||
})
|
||||
|
||||
// Handlers
|
||||
const handleClose = () => {
|
||||
emit('close')
|
||||
}
|
||||
|
||||
const handleSend = async () => {
|
||||
if (!canSend.value || sending.value) return
|
||||
|
||||
sending.value = true
|
||||
|
||||
try {
|
||||
await entityService.send({
|
||||
message: {
|
||||
to: to.value,
|
||||
cc: cc.value.length > 0 ? cc.value : undefined,
|
||||
bcc: bcc.value.length > 0 ? bcc.value : undefined,
|
||||
subject: subject.value,
|
||||
body: {
|
||||
html: editor.value?.getHTML() || '',
|
||||
text: editor.value?.getText() || '',
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
// Delete draft if it was saved
|
||||
if (draftId.value && props.folder) {
|
||||
try {
|
||||
await entityService.destroy({
|
||||
provider: props.folder.provider,
|
||||
service: props.folder.service,
|
||||
collection: props.folder.identifier,
|
||||
identifier: draftId.value,
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('[MessageComposer] Failed to delete draft:', error)
|
||||
}
|
||||
}
|
||||
|
||||
emit('sent')
|
||||
} catch (error) {
|
||||
console.error('[MessageComposer] Failed to send message:', error)
|
||||
alert('Failed to send message. Please try again.')
|
||||
} finally {
|
||||
sending.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const toggleCc = () => {
|
||||
showCc.value = !showCc.value
|
||||
}
|
||||
|
||||
const toggleBcc = () => {
|
||||
showBcc.value = !showBcc.value
|
||||
}
|
||||
|
||||
// Toolbar actions
|
||||
const toggleBold = () => editor.value?.chain().focus().toggleBold().run()
|
||||
const toggleItalic = () => editor.value?.chain().focus().toggleItalic().run()
|
||||
const toggleUnderline = () => editor.value?.chain().focus().toggleUnderline().run()
|
||||
const toggleBulletList = () => editor.value?.chain().focus().toggleBulletList().run()
|
||||
const toggleOrderedList = () => editor.value?.chain().focus().toggleOrderedList().run()
|
||||
const setLink = () => {
|
||||
const url = window.prompt('Enter URL:')
|
||||
if (url) {
|
||||
editor.value?.chain().focus().setLink({ href: url }).run()
|
||||
}
|
||||
}
|
||||
const removeLink = () => editor.value?.chain().focus().unsetLink().run()
|
||||
|
||||
const isActive = (name: string, attrs?: any) => {
|
||||
return editor.value?.isActive(name, attrs) || false
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="message-composer">
|
||||
<!-- Toolbar -->
|
||||
<v-toolbar density="compact" elevation="0" class="composer-toolbar">
|
||||
<v-btn
|
||||
variant="text"
|
||||
@click="handleClose"
|
||||
icon="mdi-close"
|
||||
>
|
||||
<v-icon>mdi-close</v-icon>
|
||||
<v-tooltip activator="parent" location="bottom">Close</v-tooltip>
|
||||
</v-btn>
|
||||
|
||||
<v-toolbar-title>
|
||||
{{ replyTo ? 'Reply' : 'New Message' }}
|
||||
</v-toolbar-title>
|
||||
|
||||
<v-spacer />
|
||||
|
||||
<span v-if="saveStatus" class="text-caption text-medium-emphasis mr-4">
|
||||
{{ saveStatus }}
|
||||
</span>
|
||||
|
||||
<v-btn
|
||||
color="primary"
|
||||
:disabled="!canSend"
|
||||
:loading="sending"
|
||||
@click="handleSend"
|
||||
prepend-icon="mdi-send"
|
||||
>
|
||||
Send
|
||||
</v-btn>
|
||||
</v-toolbar>
|
||||
|
||||
<!-- Composer content -->
|
||||
<div class="composer-content">
|
||||
<!-- Recipients -->
|
||||
<div class="composer-fields pa-4">
|
||||
<v-combobox
|
||||
v-model="to"
|
||||
label="To"
|
||||
chips
|
||||
multiple
|
||||
closable-chips
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
class="mb-2"
|
||||
>
|
||||
<template v-slot:append-inner>
|
||||
<v-btn
|
||||
size="x-small"
|
||||
variant="text"
|
||||
@click="toggleCc"
|
||||
class="mr-1"
|
||||
>
|
||||
Cc
|
||||
</v-btn>
|
||||
<v-btn
|
||||
size="x-small"
|
||||
variant="text"
|
||||
@click="toggleBcc"
|
||||
>
|
||||
Bcc
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-combobox>
|
||||
|
||||
<v-combobox
|
||||
v-if="showCc"
|
||||
v-model="cc"
|
||||
label="Cc"
|
||||
chips
|
||||
multiple
|
||||
closable-chips
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
class="mb-2"
|
||||
/>
|
||||
|
||||
<v-combobox
|
||||
v-if="showBcc"
|
||||
v-model="bcc"
|
||||
label="Bcc"
|
||||
chips
|
||||
multiple
|
||||
closable-chips
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
class="mb-2"
|
||||
/>
|
||||
|
||||
<v-text-field
|
||||
v-model="subject"
|
||||
label="Subject"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<v-divider />
|
||||
|
||||
<!-- Editor toolbar -->
|
||||
<v-toolbar density="compact" elevation="0" class="editor-toolbar">
|
||||
<v-btn
|
||||
icon
|
||||
size="small"
|
||||
:class="{ 'v-btn--active': isActive('bold') }"
|
||||
@click="toggleBold"
|
||||
>
|
||||
<v-icon>mdi-format-bold</v-icon>
|
||||
<v-tooltip activator="parent" location="bottom">Bold</v-tooltip>
|
||||
</v-btn>
|
||||
|
||||
<v-btn
|
||||
icon
|
||||
size="small"
|
||||
:class="{ 'v-btn--active': isActive('italic') }"
|
||||
@click="toggleItalic"
|
||||
>
|
||||
<v-icon>mdi-format-italic</v-icon>
|
||||
<v-tooltip activator="parent" location="bottom">Italic</v-tooltip>
|
||||
</v-btn>
|
||||
|
||||
<v-btn
|
||||
icon
|
||||
size="small"
|
||||
:class="{ 'v-btn--active': isActive('underline') }"
|
||||
@click="toggleUnderline"
|
||||
>
|
||||
<v-icon>mdi-format-underline</v-icon>
|
||||
<v-tooltip activator="parent" location="bottom">Underline</v-tooltip>
|
||||
</v-btn>
|
||||
|
||||
<v-divider vertical class="mx-2" />
|
||||
|
||||
<v-btn
|
||||
icon
|
||||
size="small"
|
||||
:class="{ 'v-btn--active': isActive('bulletList') }"
|
||||
@click="toggleBulletList"
|
||||
>
|
||||
<v-icon>mdi-format-list-bulleted</v-icon>
|
||||
<v-tooltip activator="parent" location="bottom">Bullet List</v-tooltip>
|
||||
</v-btn>
|
||||
|
||||
<v-btn
|
||||
icon
|
||||
size="small"
|
||||
:class="{ 'v-btn--active': isActive('orderedList') }"
|
||||
@click="toggleOrderedList"
|
||||
>
|
||||
<v-icon>mdi-format-list-numbered</v-icon>
|
||||
<v-tooltip activator="parent" location="bottom">Numbered List</v-tooltip>
|
||||
</v-btn>
|
||||
|
||||
<v-divider vertical class="mx-2" />
|
||||
|
||||
<v-btn
|
||||
icon
|
||||
size="small"
|
||||
:class="{ 'v-btn--active': isActive('link') }"
|
||||
@click="isActive('link') ? removeLink() : setLink()"
|
||||
>
|
||||
<v-icon>mdi-link</v-icon>
|
||||
<v-tooltip activator="parent" location="bottom">Link</v-tooltip>
|
||||
</v-btn>
|
||||
|
||||
<v-spacer />
|
||||
|
||||
<v-btn
|
||||
icon
|
||||
size="small"
|
||||
>
|
||||
<v-icon>mdi-paperclip</v-icon>
|
||||
<v-tooltip activator="parent" location="bottom">Attach Files</v-tooltip>
|
||||
</v-btn>
|
||||
</v-toolbar>
|
||||
|
||||
<v-divider />
|
||||
|
||||
<!-- Editor -->
|
||||
<div class="editor-container">
|
||||
<editor-content :editor="editor" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.message-composer {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.composer-toolbar {
|
||||
flex-shrink: 0;
|
||||
border-bottom: 1px solid rgb(var(--v-border-color));
|
||||
}
|
||||
|
||||
.composer-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.composer-fields {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.editor-toolbar {
|
||||
flex-shrink: 0;
|
||||
border-bottom: 1px solid rgb(var(--v-border-color));
|
||||
}
|
||||
|
||||
.editor-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
background-color: rgb(var(--v-theme-background));
|
||||
}
|
||||
|
||||
.v-btn--active {
|
||||
background-color: rgba(var(--v-theme-primary), 0.12);
|
||||
color: rgb(var(--v-theme-primary));
|
||||
}
|
||||
|
||||
:deep(.tiptap-editor) {
|
||||
outline: none;
|
||||
min-height: 300px;
|
||||
|
||||
p.is-editor-empty:first-child::before {
|
||||
color: rgb(var(--v-theme-on-surface-variant));
|
||||
content: attr(data-placeholder);
|
||||
float: left;
|
||||
height: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.3;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
padding-left: 1.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 3px solid rgb(var(--v-border-color));
|
||||
padding-left: 1em;
|
||||
margin-left: 0;
|
||||
margin-bottom: 0.5em;
|
||||
color: rgb(var(--v-theme-on-surface-variant));
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgb(var(--v-theme-primary));
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user