stash

web/src/views/admin/Settings.vue

@@ -1,10 +1,16 @@
 <template>
     <h3 class="text-center">Message Templates</h3>
     <ul>
-        <li v-for="template in messageTemplates" :key="template.id">
+        <li v-for="[template, index] in localChanges" :key="template.id">
             <b>{{ template.name }}</b><br>
             <FormatedText :value="template.message" :format="formatText" class="template-message"
-                          @input="changeMessageTemplate(template.id, $event)"/>
+                          @input="changeMessageTemplate(template.id, $event)"/><br>
+            <button class="btn btn-primary"
+                    :disabled="template.message !== messageTemplates[index].message">Reset
+            </button>
+            <button class="btn btn-success"
+                    :disabled="template.message !== messageTemplates[index].message">Save
+            </button>
         </li>
     </ul>
     <h3 class="text-center">Message Template Variables</h3>
@@ -23,6 +29,11 @@ import FormatedText from "@/components/inputs/FormatedText.vue";
 export default {
     name: 'Settings',
     components: {FormatedText, Table},
+    data() {
+        return {
+            localChanges: []
+        };
+    },
     computed: mapState(['messageTemplates', 'messageTemplateVariables']),
     methods: {
         ...mapActions(['fetchMessageTemplates', 'fetchMessageTemplateVariables']),
@@ -33,7 +44,7 @@ export default {
         },
         changeMessageTemplate(id, message) {
             console.log(id, message);
-            this.messageTemplates.forEach(template => {
+            this.localChanges.forEach(template => {
                 if (template.id === id) {
                     template.message = message;
                 }
@@ -43,6 +54,9 @@ export default {
     mounted() {
         this.fetchMessageTemplates();
         this.fetchMessageTemplateVariables();
+        this.localChanges = this.messageTemplates.map(template => {
+            return {id: template.id, message: template.message, name: template.name};
+        });
     },
 };
 </script>
@@ -56,7 +70,7 @@ pre {
 
 .template-message {
     border: none;
-    margin-left: 8em;
+    margin-left: 4em;
     white-space: pre-wrap;
     word-wrap: break-word;
 }