feat(ui): validation in RichEditor

Author: fiftin

web/src/components/EnvironmentForm.vue

@@ -147,6 +147,7 @@
 
           <RichEditor
             v-model="json"
+            type="json"
             v-if="extraVarsEditMode === 'json'"
             style="
               position: absolute;

web/src/components/InventoryForm.vue

@@ -128,6 +128,7 @@
 
       <RichEditor
         v-model.trim="item.inventory"
+        type="ini"
         style="
               position: absolute;
               right: 0;

web/src/components/RichEditor.vue

@@ -20,17 +20,44 @@
           dark
           fab
           small
-          color="blue-grey"
+          color="success"
+          style="
+            position: absolute;
+            right: 50px;
+            top: 0;
+            margin: 10px;
+          "
+          @click="save()"
+        >
+          <v-icon>mdi-check</v-icon>
+        </v-btn>
+
+        <v-btn
+          dark
+          fab
+          small
+          color="error"
           style="
             position: absolute;
             right: 0;
             top: 0;
             margin: 10px;
           "
-          @click="closeDialog()"
+          @click="cancel()"
         >
-          <v-icon>mdi-arrow-collapse</v-icon>
+          <v-icon>mdi-close</v-icon>
         </v-btn>
+
+        <v-alert
+          v-model="hasError"
+          dismissible
+          style="
+            position: absolute;
+            bottom: 0;
+            left: 50%;
+            transform: translateX(-50%);
+          "
+        >{{ errorMessage }}</v-alert>
       </div>
     </v-dialog>
 
@@ -53,10 +80,12 @@ import { codemirror } from 'vue-codemirror';
 import 'codemirror/lib/codemirror.css';
 import 'codemirror/mode/vue/vue.js';
 import 'codemirror/addon/display/placeholder.js';
+import { getErrorMessage } from '@/lib/error';
 
 export default {
   props: {
     value: String,
+    type: String,
   },
 
   components: {
@@ -81,23 +110,66 @@ export default {
 
   data() {
     return {
+      text: null,
+      envEditorDialog: false,
+      errorMessage: null,
+    };
+  },
 
-      cmOptions: {
+  computed: {
+    hasError: {
+      get() {
+        return this.errorMessage != null;
+      },
+      set(value) {
+        if (!value) {
+          this.errorMessage = null;
+        }
+      },
+    },
+
+    cmOptions() {
+      return {
         tabSize: 2,
         mode: 'application/json',
         lineNumbers: true,
         line: true,
         lint: true,
         indentWithTabs: false,
-      },
-
-      text: null,
-      envEditorDialog: false,
-    };
+      };
+    },
   },
 
   methods: {
-    closeDialog() {
+    cancel() {
+      this.errorMessage = null;
+      this.text = this.value;
+      this.envEditorDialog = false;
+    },
+    save() {
+      this.errorMessage = null;
+      switch (this.type) {
+        case 'json':
+          try {
+            JSON.parse(this.text);
+          } catch (e) {
+            this.errorMessage = getErrorMessage(e);
+            return;
+          }
+          break;
+        case 'json_array':
+          try {
+            const res = JSON.parse(this.text);
+            if (!Array.isArray(res)) {
+              throw new Error('Must be JSON array');
+            }
+          } catch (e) {
+            this.errorMessage = getErrorMessage(e);
+            return;
+          }
+          break;
+        default:
+      }
       if (this.text !== this.value) {
         this.$emit('input', this.text);
       }

web/src/components/TemplateForm.vue

@@ -341,6 +341,7 @@
 
             <RichEditor
               v-model="argsJson"
+              type="json_array"
               style="
               position: absolute;
               right: -23px;