feat(gui): Add JSON column type

re #312

Signed-off-by: Pranav C <61551451+pranavxc@users.noreply.github.com>

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: {}

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>

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,

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() {
   },

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>-->

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'

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'

packages/nc-gui/helpers/MssqlUi.js

@@ -1149,6 +1149,9 @@ export class MssqlUi {
           'nvarchar'
         ]
 
+      case 'JSON' :
+        return ['text', 'ntext']
+
       case 'Checkbox':
         return [
           'bigint',

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',

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',

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: