From 659d9004435a626ce04f329b8444112f422e03bb Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Fri, 22 Apr 2022 00:53:36 +0300
Subject: [PATCH] feat: improve json editor

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

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../components/monaco/MonacoJsonObjectEditor.js   |  4 +++-
 .../components/editableCell/jsonEditableCell.vue  | 15 +++++++++++++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/monaco/MonacoJsonObjectEditor.js b/packages/nc-gui/components/monaco/MonacoJsonObjectEditor.js
index f4131a477b..7011a19168 100644
--- a/packages/nc-gui/components/monaco/MonacoJsonObjectEditor.js
+++ b/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)
         }
       });
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell/jsonEditableCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/jsonEditableCell.vue
index b641020052..f779ddcd11 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editableCell/jsonEditableCell.vue
+++ b/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
     }
   }
 }