95 lines
No EOL
3.7 KiB
Vue
95 lines
No EOL
3.7 KiB
Vue
<template>
|
|
<h3 class="text-center">Available Message Template Variables</h3>
|
|
<p>
|
|
<span v-for="(variable, key) in messageTemplateVariables" :key="key" class="badge badge-primary"
|
|
style="margin: 5px;">
|
|
{{ variable }}
|
|
</span>
|
|
</p>
|
|
<h3 class="text-center">Message Templates</h3>
|
|
<div v-for="template in messageTemplatesIntermediate" :key="template.id" class="card bg-dark"
|
|
style="margin-bottom: 10px;">
|
|
<div class="card-header">{{ template.name }}</div>
|
|
<FormatedText :value="template.message" :format="formatText" class="card-body"
|
|
@input="changeMessageTemplate(template.id, $event)"/>
|
|
<div class="card-body">
|
|
<button class="btn btn-primary" @click="resetMessageTemplate(template.id)"
|
|
:disabled="messageTemplates.find(t => t.id === template.id).message === template.message">Reset
|
|
</button>
|
|
<button class="btn btn-success" @click="saveMessageTemplate(template.id)"
|
|
:disabled="messageTemplates.find(t => t.id === template.id).message === template.message">Save
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="card bg-dark">
|
|
<div class="card-body">
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" v-model="newTemplateName" placeholder="New Template Name">
|
|
<button class="btn btn-success input-group-btn" @click="createMessageTemplateAndReset()"
|
|
ref="createButton">Create
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapActions, mapState} from 'vuex';
|
|
import Table from '@/components/Table';
|
|
import FormatedText from "@/components/inputs/FormatedText.vue";
|
|
|
|
export default {
|
|
name: 'Settings',
|
|
components: {FormatedText, Table},
|
|
data() {
|
|
return {
|
|
messageTemplatesIntermediate: [],
|
|
newTemplateName: '',
|
|
};
|
|
},
|
|
computed: mapState(['messageTemplates', 'messageTemplateVariables']),
|
|
methods: {
|
|
...mapActions(['fetchMessageTemplates', 'fetchMessageTemplateVariables', 'updateMessageTemplate', 'createMessageTemplate']),
|
|
formatText(value) {
|
|
return value.replace(/{{(.+?)}}/g, (match, key) => {
|
|
return `<span class="text-primary">{{${key}}}</span>`;
|
|
}).replace(/\n/g, '<br>').replace(/\t/g, ' ');
|
|
},
|
|
changeMessageTemplate(id, message) {
|
|
console.log(id, message);
|
|
this.messageTemplatesIntermediate.forEach(template => {
|
|
if (template.id === id) {
|
|
template.message = message;
|
|
}
|
|
});
|
|
},
|
|
saveMessageTemplate(id) {
|
|
this.updateMessageTemplate(this.messageTemplatesIntermediate.find(template => template.id === id));
|
|
},
|
|
resetMessageTemplate(id) {
|
|
this.messageTemplatesIntermediate.find(template => template.id === id).message =
|
|
this.messageTemplates.find(template => template.id === id).message;
|
|
},
|
|
async createMessageTemplateAndReset() {
|
|
this.$refs.createButton.disabled = true;
|
|
await this.createMessageTemplate(this.newTemplateName);
|
|
this.newTemplateName = '';
|
|
this.$refs.createButton.disabled = false;
|
|
},
|
|
},
|
|
mounted() {
|
|
this.fetchMessageTemplates().then(() => {
|
|
this.messageTemplatesIntermediate = JSON.parse(JSON.stringify(this.messageTemplates));
|
|
});
|
|
this.fetchMessageTemplateVariables();
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
pre {
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
color: inherit;
|
|
}
|
|
</style> |