93 lines
2.3 KiB
Vue
93 lines
2.3 KiB
Vue
<template>
|
|
<DialogWidget ref="dialog" title="contact.title" :isTitleTranslated="true" icon="contact24.png" :show-close="true"
|
|
:buttons="[{ text: 'Ok', action: 'save' }, { text: 'Cancel', action: 'close' }]" :modal="false" @save="save"
|
|
:width="'50em'">
|
|
<table>
|
|
<tr>
|
|
<td>{{ $t("dialog.contact.email") }}</td>
|
|
<td><input type="email" v-model="email" /></td>
|
|
</tr>
|
|
<tr>
|
|
<td>{{ $t("dialog.contact.name") }}</td>
|
|
<td><input type="text" v-model="name" /></td>
|
|
</tr>
|
|
</table>
|
|
<p>{{ $t("dialog.contact.message") }}</p>
|
|
<textarea v-model="message" rows="15" cols="80"></textarea>
|
|
<p>{{ $t("dialog.contact.accept") }}</p>
|
|
<label><input type="checkbox" v-model="acceptDataSave" />{{ $t("dialog.contact.acceptdatasave") }}</label>
|
|
<p>{{ $t("dialog.contact.accept2") }}</p>
|
|
<p v-if="error" class="error">{{ $t("dialog.contact.error." + error) }}</p>
|
|
</DialogWidget>
|
|
</template>
|
|
|
|
<script>
|
|
import DialogWidget from '../../components/DialogWidget.vue';
|
|
import apiClient from '@/utils/axios.js';
|
|
|
|
export default {
|
|
name: 'ContactDialog',
|
|
components: {
|
|
DialogWidget
|
|
},
|
|
data() {
|
|
return {
|
|
email: "",
|
|
name: "",
|
|
message: "",
|
|
acceptDataSave: false,
|
|
error: ""
|
|
};
|
|
},
|
|
methods: {
|
|
open() {
|
|
this.email = "";
|
|
this.name = "";
|
|
this.message = "";
|
|
this.acceptDataSave = false;
|
|
this.error = "";
|
|
this.$refs.dialog.open();
|
|
},
|
|
async save() {
|
|
try {
|
|
const response = await apiClient.post('/api/contact', {
|
|
email: this.email,
|
|
name: this.name,
|
|
message: this.message,
|
|
acceptDataSave: this.acceptDataSave
|
|
});
|
|
this.$refs.dialog.close();
|
|
} catch (error) {
|
|
this.error = error;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
p {
|
|
margin: 0px;
|
|
}
|
|
|
|
a {
|
|
color: #007bff;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
table,
|
|
tr,
|
|
td {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.error {
|
|
color: red;
|
|
}
|
|
</style>
|