mirror of
https://github.com/jwinterm/modoboa.git
synced 2026-10-21 06:18:45 +02:00
More improvements
This commit is contained in:
Antoine Nguyen
@@ -0,0 +1,160 @@
|
||||
<template>
|
||||
<div>
|
||||
<div ref="toolbar" class="mt-4">
|
||||
<v-btn-toggle
|
||||
v-if="editor"
|
||||
v-model="selection"
|
||||
base-color="grey-lighten-3"
|
||||
color="primary"
|
||||
multiple
|
||||
>
|
||||
<v-btn
|
||||
icon="mdi-format-bold"
|
||||
:class="{ 'is-active': editor.isActive('bold') }"
|
||||
size="small"
|
||||
value="bold"
|
||||
@click="editor.chain().focus().toggleBold().run()"
|
||||
/>
|
||||
<v-btn
|
||||
icon="mdi-format-italic"
|
||||
:class="{ 'is-active': editor.isActive('italic') }"
|
||||
size="small"
|
||||
value="italic"
|
||||
@click="editor.chain().focus().toggleItalic().run()"
|
||||
/>
|
||||
<v-btn
|
||||
icon="mdi-format-strikethrough"
|
||||
:class="{ 'is-active': editor.isActive('strike') }"
|
||||
size="small"
|
||||
value="strike"
|
||||
@click="editor.chain().focus().toggleStrike().run()"
|
||||
/>
|
||||
<v-divider vertical />
|
||||
<v-btn
|
||||
icon="mdi-format-align-left"
|
||||
:class="{ 'is-active': editor.isActive({ textAlign: 'left' }) }"
|
||||
size="small"
|
||||
value="left"
|
||||
@click="editor.chain().focus().setTextAlign('left').run()"
|
||||
/>
|
||||
<v-btn
|
||||
icon="mdi-format-align-center"
|
||||
:class="{ 'is-active': editor.isActive({ textAlign: 'center' }) }"
|
||||
size="small"
|
||||
value="center"
|
||||
@click="editor.chain().focus().setTextAlign('center').run()"
|
||||
/>
|
||||
<v-btn
|
||||
icon="mdi-format-align-right"
|
||||
:class="{ 'is-active': editor.isActive({ textAlign: 'right' }) }"
|
||||
size="small"
|
||||
value="right"
|
||||
@click="editor.chain().focus().setTextAlign('right').run()"
|
||||
/>
|
||||
<v-btn
|
||||
icon="mdi-format-align-justify"
|
||||
:class="{ 'is-active': editor.isActive({ textAlign: 'justify' }) }"
|
||||
size="small"
|
||||
value="justify"
|
||||
@click="editor.chain().focus().setTextAlign('justify').run()"
|
||||
/>
|
||||
<v-divider vertical />
|
||||
<v-btn
|
||||
icon="mdi-format-list-bulleted"
|
||||
:class="{ 'is-active': editor.isActive('bulletList') }"
|
||||
size="small"
|
||||
value="bullet"
|
||||
@click="editor.chain().focus().toggleBulletList().run()"
|
||||
/>
|
||||
<v-btn
|
||||
icon="mdi-format-list-numbered"
|
||||
:class="{ 'is-active': editor.isActive('orderedList') }"
|
||||
size="small"
|
||||
value="ordered"
|
||||
@click="editor.chain().focus().toggleOrderedList().run()"
|
||||
/>
|
||||
</v-btn-toggle>
|
||||
<v-btn-group v-if="editor" class="ml-2" color="grey-lighten-3">
|
||||
<v-btn
|
||||
icon="mdi-undo"
|
||||
:disabled="!editor.can().chain().focus().undo().run()"
|
||||
size="small"
|
||||
value="undo"
|
||||
@click="editor.chain().focus().undo().run()"
|
||||
/>
|
||||
<v-btn
|
||||
icon="mdi-redo"
|
||||
:disabled="!editor.can().chain().focus().redo().run()"
|
||||
size="small"
|
||||
value="redo"
|
||||
@click="editor.chain().focus().redo().run()"
|
||||
/>
|
||||
</v-btn-group>
|
||||
</div>
|
||||
<EditorContent
|
||||
:editor="editor"
|
||||
class="border-sm d-flex flex-column flex-grow-1"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue'
|
||||
import Highlight from '@tiptap/extension-highlight'
|
||||
import TextAlign from '@tiptap/extension-text-align'
|
||||
import StarterKit from '@tiptap/starter-kit'
|
||||
import { useEditor, EditorContent } from '@tiptap/vue-3'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
})
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
const selection = ref([])
|
||||
const toolbar = ref()
|
||||
|
||||
const editor = useEditor({
|
||||
content: props.modelValue,
|
||||
extensions: [
|
||||
StarterKit,
|
||||
TextAlign.configure({
|
||||
types: ['heading', 'paragraph'],
|
||||
}),
|
||||
Highlight,
|
||||
],
|
||||
onUpdate: () => {
|
||||
emit('update:modelValue', editor.value.getHTML())
|
||||
},
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(value) => {
|
||||
if (editor.value.getHTML() === value) {
|
||||
return
|
||||
}
|
||||
editor.value.commands.setContent(value, false)
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.tiptap {
|
||||
:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
ul,
|
||||
ol {
|
||||
padding: 0 1rem;
|
||||
margin: 1.25rem 1rem 1.25rem 0.4rem;
|
||||
|
||||
li p {
|
||||
margin-top: 0.25em;
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<div
|
||||
class="bg-white rounded-lg pa-4 position-relative h-100 d-flex flex-column"
|
||||
>
|
||||
<v-toolbar color="white">
|
||||
<v-btn icon="mdi-arrow-left" size="small" variant="flat" @click="close" />
|
||||
<v-btn
|
||||
class="ml-2"
|
||||
color="primary"
|
||||
variant="tonal"
|
||||
prepend-icon="mdi-send"
|
||||
:loading="working"
|
||||
:text="$gettext('Send')"
|
||||
@click="submit"
|
||||
>
|
||||
</v-btn>
|
||||
</v-toolbar>
|
||||
<v-form ref="formRef" class="flex-grow-1 d-flex flex-column">
|
||||
<div>
|
||||
<v-row class="align-center">
|
||||
<v-col cols="2">
|
||||
<span>{{ $gettext('From') }}</span>
|
||||
</v-col>
|
||||
<v-col cols="8">
|
||||
<v-select
|
||||
v-model="form.sender"
|
||||
:items="validSenderAddresses"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
hide-details="auto"
|
||||
:rules="[rules.required]"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row class="align-center">
|
||||
<v-col cols="2">
|
||||
<span>{{ $gettext('To') }}</span>
|
||||
</v-col>
|
||||
<v-col cols="8">
|
||||
<v-text-field
|
||||
v-model="form.to"
|
||||
:placeholder="$gettext('Provide one or more addresses')"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
hide-details="auto"
|
||||
:rules="[rules.required]"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="2">
|
||||
<v-btn
|
||||
v-if="!showCcField"
|
||||
:text="$gettext('Cc')"
|
||||
prepend-icon="mdi-plus"
|
||||
size="x-small"
|
||||
variant="flat"
|
||||
@click="showCcField = true"
|
||||
/>
|
||||
<v-btn
|
||||
v-if="!showBccField"
|
||||
:text="$gettext('Bcc')"
|
||||
prepend-icon="mdi-plus"
|
||||
size="x-small"
|
||||
variant="flat"
|
||||
@click="showBccField = true"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row v-if="showCcField" class="align-center">
|
||||
<v-col cols="2">
|
||||
<span>{{ $gettext('Cc') }}</span>
|
||||
<v-btn
|
||||
icon="mdi-close"
|
||||
variant="flat"
|
||||
size="x-small"
|
||||
@click="showCcField = false"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="8">
|
||||
<v-text-field
|
||||
v-model="form.cc"
|
||||
:placeholder="$gettext('Provide one or more addresses')"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row v-if="showBccField" class="align-center">
|
||||
<v-col cols="2">
|
||||
<span>{{ $gettext('Bcc') }}</span>
|
||||
<v-btn
|
||||
icon="mdi-close"
|
||||
variant="flat"
|
||||
size="x-small"
|
||||
@click="showBccField = false"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="8">
|
||||
<v-text-field
|
||||
v-model="form.bcc"
|
||||
:placeholder="$gettext('Provide one or more addresses')"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row class="align-center">
|
||||
<v-col cols="2">
|
||||
<span>{{ $gettext('Subject') }}</span>
|
||||
</v-col>
|
||||
<v-col cols="8">
|
||||
<v-text-field
|
||||
v-model="form.subject"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
<HtmlEditor
|
||||
v-model="form.body"
|
||||
class="d-flex flex-column flex-grow-1 mt-4"
|
||||
/>
|
||||
</v-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useGettext } from 'vue3-gettext'
|
||||
import { useAuthStore, useBusStore } from '@/stores'
|
||||
import HtmlEditor from '@/components/tools/HtmlEditor'
|
||||
import rules from '@/plugins/rules'
|
||||
import api from '@/api/webmail'
|
||||
|
||||
const props = defineProps({
|
||||
originalEmail: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
})
|
||||
|
||||
const router = useRouter()
|
||||
const { $gettext } = useGettext()
|
||||
const { displayNotification } = useBusStore()
|
||||
const authStore = useAuthStore()
|
||||
|
||||
const form = ref({})
|
||||
const formRef = ref()
|
||||
const showCcField = ref(false)
|
||||
const showBccField = ref(false)
|
||||
const working = ref(false)
|
||||
|
||||
const validSenderAddresses = computed(() => {
|
||||
return [authStore.authUser.username]
|
||||
})
|
||||
|
||||
const close = () => {
|
||||
router.push({
|
||||
name: 'MailboxView',
|
||||
})
|
||||
}
|
||||
|
||||
const initForm = () => {
|
||||
form.value = {
|
||||
sender: authStore.authUser.username,
|
||||
}
|
||||
console.log(props.originalEmail)
|
||||
if (props.originalEmail) {
|
||||
form.value.to = props.originalEmail.from_address.address
|
||||
form.value.subject = props.originalEmail.subject
|
||||
form.value.body = props.originalEmail.body
|
||||
}
|
||||
}
|
||||
|
||||
const submit = async () => {
|
||||
const { valid } = await formRef.value.validate()
|
||||
if (!valid) {
|
||||
return
|
||||
}
|
||||
working.value = true
|
||||
const body = { ...form.value }
|
||||
body.to = [body.to]
|
||||
try {
|
||||
await api.sendEmail(body)
|
||||
router.push({ name: 'MailboxView' })
|
||||
displayNotification({ msg: $gettext('Email sent') })
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
} finally {
|
||||
working.value = false
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.originalEmail,
|
||||
() => {
|
||||
initForm()
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
</script>
|
||||
@@ -30,7 +30,7 @@
|
||||
>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
v-if="$route.params.mailbox === 'Junk'"
|
||||
v-if="$route.params.mailbox !== 'Junk'"
|
||||
class="ml-2"
|
||||
color="warning"
|
||||
variant="tonal"
|
||||
|
||||
Reference in New Issue
Block a user