113 lines
3.1 KiB
Vue
113 lines
3.1 KiB
Vue
<template>
|
|
<DialogWidget ref="dialog" :title="$t('admin.editcontactrequest.title')" :show-close="true" :buttons="buttons"
|
|
@close="closeDialog" name="AnswerContact" :modal="true" :isTitleTranslated="true">
|
|
<div class="contact-details">
|
|
<h3>Von: {{ contact.email }}</h3>
|
|
<p>{{ contact.message }}</p>
|
|
</div>
|
|
<div class="editor-container">
|
|
<EditorContent :editor="editor" class="editor" />
|
|
</div>
|
|
</DialogWidget>
|
|
|
|
<DialogWidget ref="errorDialog" :title="$t('error.title')" :show-close="true" :buttons="errorButtons"
|
|
@close="closeErrorDialog" name="ErrorDialog" :modal="true" :isTitleTranslated="false">
|
|
<div>
|
|
<p>{{ errorMessage }}</p>
|
|
</div>
|
|
</DialogWidget>
|
|
</template>
|
|
|
|
<script>
|
|
import { Editor, EditorContent } from '@tiptap/vue-3'
|
|
import StarterKit from '@tiptap/starter-kit'
|
|
import apiClient from '@/utils/axios.js'
|
|
import DialogWidget from '@/components/DialogWidget.vue'
|
|
|
|
export default {
|
|
name: 'AnswerContact',
|
|
components: {
|
|
DialogWidget,
|
|
EditorContent,
|
|
},
|
|
data() {
|
|
return {
|
|
dialog: null,
|
|
errorDialog: null,
|
|
contact: null,
|
|
errorMessage: '',
|
|
editor: null,
|
|
buttons: [
|
|
{ text: 'OK', action: this.sendAnswer },
|
|
{ text: 'Cancel', action: this.closeDialog }
|
|
],
|
|
errorButtons: [
|
|
{ text: 'OK', action: this.closeErrorDialog }
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
open(contactData) {
|
|
this.contact = contactData;
|
|
this.dialog.open();
|
|
if (this.editor) this.editor.commands.setContent('');
|
|
},
|
|
closeDialog() {
|
|
this.dialog.close();
|
|
if (this.editor) this.editor.commands.clearContent();
|
|
},
|
|
closeErrorDialog() {
|
|
this.errorDialog.close();
|
|
},
|
|
async sendAnswer() {
|
|
const answer = this.editor ? this.editor.getHTML() : '';
|
|
try {
|
|
await apiClient.post('/api/admin/contacts/answer', {
|
|
id: this.contact.id,
|
|
answer,
|
|
});
|
|
this.dialog.close();
|
|
this.$emit('refresh');
|
|
if (this.editor) this.editor.commands.clearContent();
|
|
} catch (error) {
|
|
const errorText = error.response?.data?.error || 'An unexpected error occurred.';
|
|
this.errorMessage = errorText;
|
|
this.errorDialog.open();
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.dialog = this.$refs.dialog;
|
|
this.errorDialog = this.$refs.errorDialog;
|
|
|
|
this.editor = new Editor({
|
|
extensions: [StarterKit],
|
|
content: '',
|
|
});
|
|
},
|
|
beforeUnmount() {
|
|
if (this.editor) {
|
|
this.editor.destroy();
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.contact-details {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.editor-container {
|
|
margin-top: 20px;
|
|
border: 1px solid #ccc;
|
|
padding: 10px;
|
|
min-height: 200px;
|
|
}
|
|
|
|
.editor {
|
|
min-height: 150px;
|
|
outline: none;
|
|
}
|
|
</style>
|