fix: null handling and edit column validation

Signed-off-by: Pranav C Balan <pranavxc@gmail.com>

packages/nc-gui/components/project/spreadsheet/editColumn/editColumn.vue

@@ -1,13 +1,14 @@
 <template>
   <v-card min-width="300px" max-width="400px" max-height="95vh" style="overflow: auto"
           class="elevation-0 card">
+    <v-form v-model="valid">
       <v-container fluid @click.stop.prevent>
         <v-row>
           <v-col cols="12" class="d-flex pb-0">
 
             <v-spacer></v-spacer>
             <v-btn small outlined @click="close">Cancel</v-btn>
-          <v-btn small color="primary" @click="save">Save</v-btn>
+            <v-btn small color="primary" @click="save" :disabled="!valid">Save</v-btn>
           </v-col>
           <v-col cols="12">
             <v-text-field
@@ -97,6 +98,7 @@
                     :column="newColumn"
                     :nodes="nodes"
                     @onColumnSelect="onRelColumnSelect"
+                    :isSQLite="isSQLite"
                   ></relation-options>
                 </v-col>
 
@@ -282,7 +284,7 @@
 
         </v-row>
       </v-container>
-
+    </v-form>
     <dlg-label-submit-cancel
       type="primary"
       v-if="relationDeleteDlg"
@@ -290,6 +292,7 @@
       :actionsMtd="deleteRelation"
       heading="Click Submit to Delete the Relation"
     />
+
   </v-card>
 </template>
 
@@ -314,6 +317,7 @@ export default {
     value: Boolean
   },
   data: () => ({
+    valid: false,
     relationDeleteDlg: false,
     newColumn: {},
     uiTypes,
@@ -489,7 +493,10 @@ export default {
   },
   computed: {
     isEditDisabled() {
-      return this.editColumn &&  this.sqlUi === SqliteUi;
+      return this.editColumn && this.isSQLite && !this.relation;
+    },
+    isSQLite() {
+      return this.sqlUi === SqliteUi
     },
     dataTypes() {
       return this.sqlUi.getDataTypeListForUiType(this.newColumn)

packages/nc-gui/components/project/spreadsheet/editColumn/relationOptions.vue

@@ -3,6 +3,7 @@
     <v-row>
       <v-col cols="6">
         <v-autocomplete
+          :rules="[v=>!!v || 'Reference Table required']"
           outlined
           class="caption"
           hide-details
@@ -21,6 +22,7 @@
       >
       <v-col cols="6">
         <v-autocomplete
+          :rules="[v=>!!v || 'Reference Column required']"
           outlined
           class="caption"
           hide-details
@@ -76,6 +78,7 @@
 
       <v-col>
         <v-checkbox
+          :disabled="isSQLite"
           false-value="real"
           true-value="virtual"
           label="Virtual Relation"
@@ -94,7 +97,7 @@
 <script>
 export default {
   name: "relationOptions",
-  props: ['nodes', 'column'],
+  props: ['nodes', 'column', 'isSQLite'],
   data: () => ({
     refTables: [],
     refColumns: [],
@@ -119,7 +122,7 @@ export default {
       onDelete: "CASCADE",
       onUpdate: "CASCADE",
       updateRelation: this.column.rtn ? true : false,
-      type: 'real'
+      type: this.isSQLite ? 'virtual' : 'real'
     }
   },
   methods: {
@@ -170,7 +173,7 @@ export default {
             env: this.nodes.env,
             dbAlias: this.nodes.dbAlias
           },
-          this.relation.type === 'real' ? "relationCreate" : 'xcVirtualRelationCreate',
+          this.relation.type === 'real' && !this.isSQLite ? "relationCreate" : 'xcVirtualRelationCreate',
           this.relation
         ]);
       } catch (e) {
@@ -183,9 +186,15 @@ export default {
     }
   },
   watch: {
-    'column.cn': (c) => {
+    'column.cn': function (c) {
       this.$set(this.relation, 'childColumn', c);
+    },
+    isSQLite(v) {
+      this.$set(this.relation, 'type', v ? 'virtual' : 'real');
     }
+  },
+  mounted() {
+    this.$set(this.relation, 'type', this.isSqlite ? 'virtual' : 'real');
   }
 }
 </script>

packages/nc-gui/components/project/spreadsheet/mixins/spreadsheet.js

@@ -130,7 +130,7 @@ export default {
     },
     belongsTo() {
       return this.meta && this.meta.belongsTo ? this.meta.belongsTo.reduce((bt, o) => {
-        const _cn = this.meta.columns.find(c => c.cn === o.cn)._cn
+        const _cn = (this.meta.columns.find(c => c.cn === o.cn)||{})._cn
         bt[_cn] = o;
         return bt;
       }, {}) : {};