From 7875eb668559ddd655c363f44af72d249102f408 Mon Sep 17 00:00:00 2001
From: Pranav C <61551451+pranavxc@users.noreply.github.com>
Date: Thu, 29 Jul 2021 19:03:57 +0530
Subject: [PATCH] feat(gui): Add JSON column type

re #312

Signed-off-by: Pranav C <61551451+pranavxc@users.noreply.github.com>
---
 .../project/spreadsheet/components/cell.vue       |  4 +++-
 .../spreadsheet/components/cell/jsonCell.vue      | 14 ++++++++++++++
 .../spreadsheet/components/editableCell.vue       | 10 +++-------
 .../{jsonCell.vue => jsonEditableCell.vue}        | 15 ++++++++++++---
 .../project/spreadsheet/components/headerCell.vue |  3 +++
 .../project/spreadsheet/helpers/uiTypes.js        |  4 ++++
 .../components/project/spreadsheet/mixins/cell.js |  2 +-
 packages/nc-gui/helpers/MssqlUi.js                |  3 +++
 packages/nc-gui/helpers/MysqlUi.js                | 12 ++++++++++++
 packages/nc-gui/helpers/PgUi.js                   |  9 +++++++++
 packages/nc-gui/helpers/SqliteUi.js               |  7 +++++++
 11 files changed, 71 insertions(+), 12 deletions(-)
 create mode 100644 packages/nc-gui/components/project/spreadsheet/components/cell/jsonCell.vue
 rename packages/nc-gui/components/project/spreadsheet/components/editableCell/{jsonCell.vue => jsonEditableCell.vue} (85%)

diff --git a/packages/nc-gui/components/project/spreadsheet/components/cell.vue b/packages/nc-gui/components/project/spreadsheet/components/cell.vue
index 16466db042..537ce70193 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/cell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/cell.vue
@@ -11,10 +11,12 @@
   <!--  <enum-list-editable-cell @click.stop="$emit('enableedit')" v-else-if="isEnum && selected" :value="value" :column="column"></enum-list-editable-cell>-->
   <enum-cell v-else-if="isEnum" :value="value" :column="column" @click.stop="$emit('enableedit')" />
   <url-cell v-else-if="isURL" :value="value" />
+  <json-cell v-else-if="isJSON" :value="value" />
   <span v-else>{{ value }}</span>
 </template>
 
 <script>
+import JsonCell from '@/components/project/spreadsheet/components/cell/jsonCell'
 import UrlCell from '@/components/project/spreadsheet/components/cell/urlCell'
 import cell from '@/components/project/spreadsheet/mixins/cell'
 import SetListCell from '@/components/project/spreadsheet/components/cell/setListCell'
@@ -23,7 +25,7 @@ import EditableAttachmentCell from '@/components/project/spreadsheet/components/
 
 export default {
   name: 'TableCell',
-  components: { UrlCell, EditableAttachmentCell, EnumCell, SetListCell },
+  components: { JsonCell, UrlCell, EditableAttachmentCell, EnumCell, SetListCell },
   mixins: [cell],
   props: ['value', 'dbAlias', 'isLocked', 'selected'],
   computed: {}
diff --git a/packages/nc-gui/components/project/spreadsheet/components/cell/jsonCell.vue b/packages/nc-gui/components/project/spreadsheet/components/cell/jsonCell.vue
new file mode 100644
index 0000000000..b40fb24aa2
--- /dev/null
+++ b/packages/nc-gui/components/project/spreadsheet/components/cell/jsonCell.vue
@@ -0,0 +1,14 @@
+<template>
+  <pre class="text-left caption">{{ value }}</pre>
+</template>
+
+<script>
+export default {
+  name: 'JsonCell',
+  props: ['value']
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell.vue
index 74faf5e1c7..7ada3e1731 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editableCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editableCell.vue
@@ -69,10 +69,8 @@
       :column="column"
       v-on="parentListeners"
     />
-    <!--    <enum-radio-editable-cell v-else-if="isEnum" :column="column" v-on="parentListeners"
-                                  v-model="localState"></enum-radio-editable-cell>-->
 
-    <json-cell
+    <json-editable-cell
       v-else-if="isJSON"
       v-model="localState"
       v-on="parentListeners"
@@ -102,8 +100,6 @@
       :is-form="isForm"
       v-on="parentListeners"
     />
-    <!--<set-list-checkbox-cell :column="column" v-else-if="isSet" v-model="localState"
-                            v-on="parentListeners"></set-list-checkbox-cell>-->
 
     <text-cell v-else v-model="localState" v-on="$listeners" />
   </div>
@@ -112,11 +108,11 @@
 <script>
 import DatePickerCell from '@/components/project/spreadsheet/components/editableCell/datePickerCell'
 import EditableUrlCell from '@/components/project/spreadsheet/components/editableCell/editableUrlCell'
+import JsonEditableCell from '@/components/project/spreadsheet/components/editableCell/jsonEditableCell'
 import TextCell from '@/components/project/spreadsheet/components/editableCell/textCell'
 import DateTimePickerCell from '@/components/project/spreadsheet/components/editableCell/dateTimePickerCell'
 import TextAreaCell from '@/components/project/spreadsheet/components/editableCell/textAreaCell'
 import EnumListCell from '@/components/project/spreadsheet/components/editableCell/enumListEditableCell'
-import JsonCell from '@/components/project/spreadsheet/components/editableCell/jsonCell'
 import IntegerCell from '@/components/project/spreadsheet/components/editableCell/integerCell'
 import FloatCell from '@/components/project/spreadsheet/components/editableCell/floatCell'
 import TimePickerCell from '@/components/project/spreadsheet/components/editableCell/timePickerCell'
@@ -131,6 +127,7 @@ import debounce from 'debounce'
 export default {
   name: 'EditableCell',
   components: {
+    JsonEditableCell,
     EditableUrlCell,
     SetListCell,
     SetListEditableCell,
@@ -140,7 +137,6 @@ export default {
     TimePickerCell,
     FloatCell,
     IntegerCell,
-    JsonCell,
     EnumListCell,
     TextAreaCell,
     DateTimePickerCell,
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell/jsonCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/jsonEditableCell.vue
similarity index 85%
rename from packages/nc-gui/components/project/spreadsheet/components/editableCell/jsonCell.vue
rename to packages/nc-gui/components/project/spreadsheet/components/editableCell/jsonEditableCell.vue
index 77456d70c2..9dc934561a 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editableCell/jsonCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editableCell/jsonEditableCell.vue
@@ -11,6 +11,7 @@
     </div>
     <monaco-json-object-editor
       v-model="localState"
+      class="text-left caption"
       style="width: 300px;min-height: 200px;min-width:100%"
     />
   </div>
@@ -20,7 +21,7 @@
 import MonacoJsonObjectEditor from '@/components/monaco/MonacoJsonObjectEditor'
 
 export default {
-  name: 'JsonCell',
+  name: 'JsonEditableCell',
   components: { MonacoJsonObjectEditor },
   props: {
     value: String,
@@ -46,7 +47,11 @@ export default {
   },
   watch: {
     value(val) {
-      this.localState = typeof val === 'string' ? JSON.parse(val) : val
+      try {
+        this.localState = typeof val === 'string' ? JSON.parse(val) : val
+      } catch (e) {
+        // ignore parse error for invalid JSON
+      }
     },
     localState(val) {
       if (this.isForm) {
@@ -55,7 +60,11 @@ export default {
     }
   },
   created() {
-    this.localState = typeof this.value === 'string' ? JSON.parse(this.value) : this.value
+    try {
+      this.localState = typeof this.value === 'string' ? JSON.parse(this.value) : this.value
+    } catch (e) {
+      // ignore parse error for invalid JSON
+    }
   },
   mounted() {
   },
diff --git a/packages/nc-gui/components/project/spreadsheet/components/headerCell.vue b/packages/nc-gui/components/project/spreadsheet/components/headerCell.vue
index 076ae3af95..775f2d1d43 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/headerCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/headerCell.vue
@@ -10,6 +10,9 @@
     <v-icon v-else-if="isForeignKey" color="purple" small class="mr-1">
       mdi-link-variant
     </v-icon>
+    <v-icon v-else-if="isJSON" color="purple" small class="mr-1">
+      mdi-code-json
+    </v-icon>
 
     <span v-else-if="isInt" class="font-weight-bold mr-1" style="font-size: 15px">#</span>
     <!--    <v-icon color="grey" class="mr-1" v-if="isInt">mdi-numeric</v-icon>-->
diff --git a/packages/nc-gui/components/project/spreadsheet/helpers/uiTypes.js b/packages/nc-gui/components/project/spreadsheet/helpers/uiTypes.js
index d633dc0655..b1f7b5a43f 100644
--- a/packages/nc-gui/components/project/spreadsheet/helpers/uiTypes.js
+++ b/packages/nc-gui/components/project/spreadsheet/helpers/uiTypes.js
@@ -128,6 +128,10 @@ const uiTypes = [
     name: 'Geometry',
     icon: 'mdi-ruler-square-compass'
   },
+  {
+    name: 'JSON',
+    icon: 'mdi-code-json'
+  },
   {
     name: 'SpecificDBType',
     icon: 'mdi-database-settings'
diff --git a/packages/nc-gui/components/project/spreadsheet/mixins/cell.js b/packages/nc-gui/components/project/spreadsheet/mixins/cell.js
index 9a0500c1df..d47e3d82bd 100644
--- a/packages/nc-gui/components/project/spreadsheet/mixins/cell.js
+++ b/packages/nc-gui/components/project/spreadsheet/mixins/cell.js
@@ -44,7 +44,7 @@ export default {
       return this.abstractType === 'datetime'
     },
     isJSON() {
-      return this.abstractType === 'json'
+      return this.abstractType === 'json' || this.column.uidt === 'JSON'
     },
     isEnum() {
       return this.column.uidt === 'SingleSelect'
diff --git a/packages/nc-gui/helpers/MssqlUi.js b/packages/nc-gui/helpers/MssqlUi.js
index 16cbe9ec5a..63715e7025 100644
--- a/packages/nc-gui/helpers/MssqlUi.js
+++ b/packages/nc-gui/helpers/MssqlUi.js
@@ -1149,6 +1149,9 @@ export class MssqlUi {
           'nvarchar'
         ]
 
+      case 'JSON' :
+        return ['text', 'ntext']
+
       case 'Checkbox':
         return [
           'bigint',
diff --git a/packages/nc-gui/helpers/MysqlUi.js b/packages/nc-gui/helpers/MysqlUi.js
index 28102d9c85..57c91f1d7a 100644
--- a/packages/nc-gui/helpers/MysqlUi.js
+++ b/packages/nc-gui/helpers/MysqlUi.js
@@ -1021,6 +1021,9 @@ export class MysqlUi {
       case 'Button':
         colProp.dt = 'varchar'
         break
+      case 'JSON':
+        colProp.dt = 'json'
+        break
       default:
         colProp.dt = 'varchar'
         break
@@ -1059,6 +1062,15 @@ export class MysqlUi {
           'longtext'
         ]
 
+      case 'JSON':
+        return [
+          'json',
+          'text',
+          'tinytext',
+          'mediumtext',
+          'longtext'
+        ]
+
       case 'Checkbox':
         return [
           'int',
diff --git a/packages/nc-gui/helpers/PgUi.js b/packages/nc-gui/helpers/PgUi.js
index f7d07727ce..6431756490 100644
--- a/packages/nc-gui/helpers/PgUi.js
+++ b/packages/nc-gui/helpers/PgUi.js
@@ -1647,6 +1647,9 @@ export class PgUi {
       case 'Button':
         colProp.dt = 'character varying'
         break
+      case 'JSON':
+        colProp.dt = 'json'
+        break
       default:
         colProp.dt = 'character varying'
         break
@@ -1678,6 +1681,12 @@ export class PgUi {
           'character varying',
           'text'
         ]
+
+      case 'JSON':
+        return [
+          'json',
+          'text'
+        ]
       case 'Checkbox':
         return [
           'bit',
diff --git a/packages/nc-gui/helpers/SqliteUi.js b/packages/nc-gui/helpers/SqliteUi.js
index d105d9d68c..f7b383ba78 100644
--- a/packages/nc-gui/helpers/SqliteUi.js
+++ b/packages/nc-gui/helpers/SqliteUi.js
@@ -846,6 +846,9 @@ export class SqliteUi {
       case 'Button':
         colProp.dt = 'varchar'
         break
+      case 'JSON':
+        colProp.dt = 'text'
+        break
       default:
         colProp.dt = 'varchar'
         break
@@ -1074,6 +1077,10 @@ export class SqliteUi {
         return [
           'text'
         ]
+      case 'JSON':
+        return [
+          'text'
+        ]
 
       case 'Button':
       default: