feat: improve json editor

- allow save only if valid monaco-editor input
- show errors for invalid json

Signed-off-by: mertmit <mertmit99@gmail.com>

packages/nc-gui/components/monaco/MonacoJsonObjectEditor.js

@@ -31,7 +31,7 @@ export default {
       default: true
     }
   },
-
+  emits: ['validate'],
   model: {
     event: "change"
   },
@@ -109,7 +109,9 @@ export default {
           if (!this.deepcompare(this.value, JSON.parse(value))) {
             this.$emit("change", JSON.parse(value), event);
           }
+          this.$emit("validate", true);
         } catch (e) {
+          this.$emit("validate", false, e);
           // console.log('monaco', e)
         }
       });

packages/nc-gui/components/project/spreadsheet/components/editableCell/jsonEditableCell.vue

@@ -10,7 +10,7 @@
           <!-- Cancel -->
           {{ $t('general.cancel') }}
         </v-btn>
-        <v-btn x-small color="primary" @click="save">
+        <v-btn x-small color="primary" :disabled="!isValid" @click="save">
           <!-- Save -->
           {{ $t('general.save') }}
         </v-btn>
@@ -25,13 +25,18 @@
       v-model="localState"
       class="text-left caption"
       style="width: 300px;min-height:min(600px,80vh);min-width:100%; "
+      @validate="validate"
     />
     <monaco-json-object-editor
       v-else
       v-model="localState"
       class="text-left caption"
       style="width: 300px;min-height:200px;min-width:100%;"
+      @validate="validate"
     />
+    <div v-show="error" class="px-2 py-1 text-left caption error--text">
+      {{ error }}
+    </div>
   </v-dialog>
 </template>
 
@@ -47,7 +52,9 @@ export default {
   },
   data: () => ({
     localState: '',
-    expand: false
+    expand: false,
+    isValid: true,
+    error: undefined
   }),
   computed: {
 
@@ -91,6 +98,10 @@ export default {
     save() {
       this.expand = false
       this.$emit('input', JSON.stringify(this.localState))
+    },
+    validate(n, e) {
+      this.isValid = n
+      this.error = e
     }
   }
 }