From e95cfbdcf77281f89c0a14bbdf2b1ce1b1497c57 Mon Sep 17 00:00:00 2001
From: Pranav C Balan <pranavxc@gmail.com>
Date: Tue, 15 Jun 2021 19:54:13 +0530
Subject: [PATCH] fix: null handling and edit column validation

Signed-off-by: Pranav C Balan <pranavxc@gmail.com>
---
 .../spreadsheet/editColumn/editColumn.vue     | 535 +++++++++---------
 .../editColumn/relationOptions.vue            |  19 +-
 .../project/spreadsheet/mixins/spreadsheet.js |   2 +-
 3 files changed, 286 insertions(+), 270 deletions(-)

diff --git a/packages/nc-gui/components/project/spreadsheet/editColumn/editColumn.vue b/packages/nc-gui/components/project/spreadsheet/editColumn/editColumn.vue
index 4ce894c06c..fb5a960105 100644
--- a/packages/nc-gui/components/project/spreadsheet/editColumn/editColumn.vue
+++ b/packages/nc-gui/components/project/spreadsheet/editColumn/editColumn.vue
@@ -1,288 +1,290 @@
 <template>
   <v-card min-width="300px" max-width="400px" max-height="95vh" style="overflow: auto"
           class="elevation-0 card">
-    <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-col>
-        <v-col cols="12">
-          <v-text-field
-            ref="column"
-            hide-details
-            color="primary"
-            v-model="newColumn.cn"
-            @input="newColumn.altered = newColumn.altered || 8"
-            class="caption"
-            label="Column name"
-            dense outlined></v-text-field>
-
-        </v-col>
-        <div :class="{
+    <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" :disabled="!valid">Save</v-btn>
+          </v-col>
+          <v-col cols="12">
+            <v-text-field
+              ref="column"
+              hide-details
+              color="primary"
+              v-model="newColumn.cn"
+              @input="newColumn.altered = newColumn.altered || 8"
+              class="caption"
+              label="Column name"
+              dense outlined></v-text-field>
+
+          </v-col>
+          <div :class="{
           editDisabled :isEditDisabled
         }">
-          <v-col cols="12" v-if="relation">
-            <div class="caption">
-
-              <p class="mb-1">Foreign Key </p>
-
-              <v-icon small class="mt-n1">mdi-table</v-icon>
-              <span class="text-capitalize font-weight-bold body-1"> {{ relation._rtn }}</span>
-              <v-icon small
-                      class="ml-3 mt-n1"
-                      @click="deleteRelation('showDialog', column)"
-                      color="error"
-                      v-ge="['columns','fk-delete']"
-              >mdi-delete-forever
-              </v-icon>
-              <span v-if="relation.type=== 'virtual'" class="caption">(v)</span>
-            </div>
-          </v-col>
-          <template v-else>
-            <v-col cols="12">
-              <v-autocomplete
-                @change="onUiTypeChange"
-                v-model="newColumn.uidt"
-                hide-details
-                item-value="name"
-                item-text="name"
-                class="caption ui-type"
-                :class="{'primary lighten-5' : newColumn.uidt }"
-                label="Column type"
-                dense
-                outlined
-                :items="uiTypes">
-                <template v-slot:selection="{item}">
-                  <div>
-                    <v-icon color="grey darken-4" small class="mr-1">{{ item.icon }}</v-icon>
-                    <span class="caption  grey--text text--darken-4"> {{ item.name }}</span>
-                  </div>
-                </template>
+            <v-col cols="12" v-if="relation">
+              <div class="caption">
+
+                <p class="mb-1">Foreign Key </p>
+
+                <v-icon small class="mt-n1">mdi-table</v-icon>
+                <span class="text-capitalize font-weight-bold body-1"> {{ relation._rtn }}</span>
+                <v-icon small
+                        class="ml-3 mt-n1"
+                        @click="deleteRelation('showDialog', column)"
+                        color="error"
+                        v-ge="['columns','fk-delete']"
+                >mdi-delete-forever
+                </v-icon>
+                <span v-if="relation.type=== 'virtual'" class="caption">(v)</span>
+              </div>
+            </v-col>
+            <template v-else>
+              <v-col cols="12">
+                <v-autocomplete
+                  @change="onUiTypeChange"
+                  v-model="newColumn.uidt"
+                  hide-details
+                  item-value="name"
+                  item-text="name"
+                  class="caption ui-type"
+                  :class="{'primary lighten-5' : newColumn.uidt }"
+                  label="Column type"
+                  dense
+                  outlined
+                  :items="uiTypes">
+                  <template v-slot:selection="{item}">
+                    <div>
+                      <v-icon color="grey darken-4" small class="mr-1">{{ item.icon }}</v-icon>
+                      <span class="caption  grey--text text--darken-4"> {{ item.name }}</span>
+                    </div>
+                  </template>
 
 
-                <template v-slot:item="{item}">
-                  <div class="caption">
-                    <v-icon small class="mr-1">{{ item.icon }}</v-icon>
-                    {{ item.name }}
-                  </div>
-                </template>
-              </v-autocomplete>
+                  <template v-slot:item="{item}">
+                    <div class="caption">
+                      <v-icon small class="mr-1">{{ item.icon }}</v-icon>
+                      {{ item.name }}
+                    </div>
+                  </template>
+                </v-autocomplete>
 
 
-              <!--                        <v-list dense max-height="calc(100vh - 300px)" style="overflow: auto">-->
-              <!--                          <v-list-item v-for="item in uiTypes" @click.stop :key="item">-->
-              <!--                            <span class="caption">{{ item }}</span>-->
-              <!--                          </v-list-item>-->
-              <!--                        </v-list>-->
-            </v-col>
+                <!--                        <v-list dense max-height="calc(100vh - 300px)" style="overflow: auto">-->
+                <!--                          <v-list-item v-for="item in uiTypes" @click.stop :key="item">-->
+                <!--                            <span class="caption">{{ item }}</span>-->
+                <!--                          </v-list-item>-->
+                <!--                        </v-list>-->
+              </v-col>
 
-            <template v-if="newColumn.uidt !== 'Formula'">
-              <v-col cols="12"
-                     v-if="isLinkToAnotherRecord">
+              <template v-if="newColumn.uidt !== 'Formula'">
+                <v-col cols="12"
+                       v-if="isLinkToAnotherRecord">
 
-                <linked-to-another-options
-                  ref="relation"
-                  :column="newColumn"
-                  :nodes="nodes"
-                  @onColumnSelect="onRelColumnSelect"
-                ></linked-to-another-options>
-              </v-col>
-              <v-col cols="12"
-                     v-if="isRelation">
-                <relation-options
-                  ref="relation"
-                  :column="newColumn"
-                  :nodes="nodes"
-                  @onColumnSelect="onRelColumnSelect"
-                ></relation-options>
-              </v-col>
+                  <linked-to-another-options
+                    ref="relation"
+                    :column="newColumn"
+                    :nodes="nodes"
+                    @onColumnSelect="onRelColumnSelect"
+                  ></linked-to-another-options>
+                </v-col>
+                <v-col cols="12"
+                       v-if="isRelation">
+                  <relation-options
+                    ref="relation"
+                    :column="newColumn"
+                    :nodes="nodes"
+                    @onColumnSelect="onRelColumnSelect"
+                    :isSQLite="isSQLite"
+                  ></relation-options>
+                </v-col>
+
+                <v-col cols="12" v-if="isSelect">
+                  <custom-select-options
+                    v-model="newColumn.dtxp"
+                    @input="newColumn.altered = newColumn.altered || 2"
+                  ></custom-select-options>
+                </v-col>
 
-              <v-col cols="12" v-if="isSelect">
-                <custom-select-options
-                  v-model="newColumn.dtxp"
-                  @input="newColumn.altered = newColumn.altered || 2"
-                ></custom-select-options>
-              </v-col>
 
+                <template v-if="newColumn.cn && newColumn.uidt && !isLinkToAnotherRecord">
+                  <v-col cols="12">
+                    <v-container fluid class="wrapper">
+                      <v-row>
+                        <v-col cols="12">
+                          <div class="d-flex justify-space-between caption">
+                            <v-tooltip bottom z-index="99999">
+                              <template v-slot:activator="{on}">
+                                <div v-on="on">
+                                  <v-checkbox
+                                    :disabled="newColumn.pk || !sqlUi.columnEditable(newColumn)"
+                                    class="mr-2 mt-0" dense hide-details label="NN"
+                                    @input="newColumn.altered = newColumn.altered || 2"
+                                    v-model="newColumn.rqd">
+                                    <template v-slot:label>
+                                      <span class="caption font-weight-bold">NN</span>
+                                    </template>
+                                  </v-checkbox>
+                                </div>
+                              </template>
+                              <span>Not Null</span>
+                            </v-tooltip>
+                            <v-tooltip bottom z-index="99999">
+                              <template v-slot:activator="{on}">
+                                <div v-on="on">
+                                  <v-checkbox
+
+                                    v-model="newColumn.pk"
+                                    :disabled="!sqlUi.columnEditable(newColumn)"
+                                    @input="newColumn.altered = newColumn.altered || 2"
+                                    class="mr-2 mt-0" dense hide-details label="PK">
+                                    <template v-slot:label>
+                                      <span class="caption font-weight-bold">PK</span>
+                                    </template>
+                                  </v-checkbox>
+                                </div>
+                              </template>
+                              <span>Primary Key</span>
+                            </v-tooltip>
+
+                            <v-tooltip bottom z-index="99999">
+                              <template v-slot:activator="{on}">
+                                <div v-on="on">
+                                  <v-checkbox
 
-              <template v-if="newColumn.cn && newColumn.uidt && !isLinkToAnotherRecord">
-                <v-col cols="12">
-                  <v-container fluid class="wrapper">
-                    <v-row>
-                      <v-col cols="12">
-                        <div class="d-flex justify-space-between caption">
-                          <v-tooltip bottom z-index="99999">
-                            <template v-slot:activator="{on}">
-                              <div v-on="on">
-                                <v-checkbox
-                                  :disabled="newColumn.pk || !sqlUi.columnEditable(newColumn)"
-                                  class="mr-2 mt-0" dense hide-details label="NN"
-                                  @input="newColumn.altered = newColumn.altered || 2"
-                                  v-model="newColumn.rqd">
-                                  <template v-slot:label>
-                                    <span class="caption font-weight-bold">NN</span>
-                                  </template>
-                                </v-checkbox>
-                              </div>
-                            </template>
-                            <span>Not Null</span>
-                          </v-tooltip>
-                          <v-tooltip bottom z-index="99999">
-                            <template v-slot:activator="{on}">
-                              <div v-on="on">
-                                <v-checkbox
-
-                                  v-model="newColumn.pk"
-                                  :disabled="!sqlUi.columnEditable(newColumn)"
-                                  @input="newColumn.altered = newColumn.altered || 2"
-                                  class="mr-2 mt-0" dense hide-details label="PK">
-                                  <template v-slot:label>
-                                    <span class="caption font-weight-bold">PK</span>
-                                  </template>
-                                </v-checkbox>
-                              </div>
-                            </template>
-                            <span>Primary Key</span>
-                          </v-tooltip>
-
-                          <v-tooltip bottom z-index="99999">
-                            <template v-slot:activator="{on}">
-                              <div v-on="on">
-                                <v-checkbox
-
-                                  @input="newColumn.altered = newColumn.altered || 2"
-                                  :disabled="sqlUi.colPropUNDisabled(newColumn) || !sqlUi.columnEditable(newColumn)"
-                                  class="mr-2 mt-0" dense hide-details label="AI"
-                                  v-model="newColumn.ai">
-                                  <template v-slot:label>
-                                    <span class="caption font-weight-bold">AI</span>
-                                  </template>
-                                </v-checkbox>
-                              </div>
-                            </template>
-                            <span>Auto Increment</span>
-                          </v-tooltip>
-
-
-                          <v-tooltip bottom z-index="99999">
-                            <template v-slot:activator="{on}">
-                              <div v-on="on">
-                                <v-checkbox class="mr-2 mt-0" dense hide-details label="UN"
-                                            @input="newColumn.altered = newColumn.altered || 2"
-                                            :disabled="sqlUi.colPropUNDisabled(newColumn) || !sqlUi.columnEditable(newColumn)"
-                                            v-model="newColumn.un">
-                                  <template v-slot:label>
-                                    <span class="caption font-weight-bold">UN</span>
-                                  </template>
-                                </v-checkbox>
-                              </div>
-                            </template>
-                            <span>Unsigned</span>
-                          </v-tooltip>
-
-                          <v-tooltip bottom z-index="99999">
-                            <template v-slot:activator="{on}">
-                              <div v-on="on">
-                                <v-checkbox class="mr-2 mt-0" dense hide-details label="UN"
-                                            @input="newColumn.altered = newColumn.altered || 2"
-                                            :disabled=" sqlUi.colPropAuDisabled(newColumn) || !sqlUi.columnEditable(newColumn)"
-                                            v-model="newColumn.au">
-                                  <template v-slot:label>
-                                    <span class="caption font-weight-bold">AU</span>
-                                  </template>
-                                </v-checkbox>
-                              </div>
-                            </template>
-                            <span>Auto Update Timestamp</span>
-                          </v-tooltip>
-                        </div>
-                      </v-col>
-                      <v-col cols="12">
-                        <v-autocomplete
-                          v-model="newColumn.dt"
-                          hide-details
-                          class="caption data-type"
-                          label="Type in Database"
-                          dense
-                          outlined
-                          :items="dataTypes">
-                        </v-autocomplete>
-                      </v-col>
-
-                      <v-col :cols="sqlUi.showScale(newColumn) && !isSelect ? 6 : 12">
-                        <v-text-field
-                          v-if="!isSelect"
-                          dense
-                          :disabled="sqlUi.getDefaultLengthIsDisabled(newColumn.dt) || !sqlUi.columnEditable(newColumn)"
-                          class="caption"
-                          label="Length / Values"
-                          outlined
-                          hide-details v-model="newColumn.dtxp"
-                          @input="newColumn.altered = newColumn.altered || 2"
-                        ></v-text-field>
-                      </v-col>
-                      <v-col :cols="isSelect ?12 : 6" v-if="sqlUi.showScale(newColumn)">
-
-                        <v-text-field
-                          dense
-                          :disabled=" !sqlUi.columnEditable(newColumn)"
-                          class="caption"
-                          label="Scale"
-                          outlined
-                          @input="newColumn.altered = newColumn.altered || 2"
-                          hide-details v-model="newColumn.dtxs"></v-text-field>
-                      </v-col>
-
-                      <v-col cols="12">
-                        <v-textarea v-model="newColumn.cdf"
                                     @input="newColumn.altered = newColumn.altered || 2"
-                                    label="Default value"
-                                    :hint="sqlUi.getDefaultValueForDatatype(newColumn.dt)"
-                                    persistent-hint
-                                    rows="3"
-                                    outlined dense class="caption"></v-textarea>
-                      </v-col>
-                    </v-row>
-                  </v-container>
+                                    :disabled="sqlUi.colPropUNDisabled(newColumn) || !sqlUi.columnEditable(newColumn)"
+                                    class="mr-2 mt-0" dense hide-details label="AI"
+                                    v-model="newColumn.ai">
+                                    <template v-slot:label>
+                                      <span class="caption font-weight-bold">AI</span>
+                                    </template>
+                                  </v-checkbox>
+                                </div>
+                              </template>
+                              <span>Auto Increment</span>
+                            </v-tooltip>
+
+
+                            <v-tooltip bottom z-index="99999">
+                              <template v-slot:activator="{on}">
+                                <div v-on="on">
+                                  <v-checkbox class="mr-2 mt-0" dense hide-details label="UN"
+                                              @input="newColumn.altered = newColumn.altered || 2"
+                                              :disabled="sqlUi.colPropUNDisabled(newColumn) || !sqlUi.columnEditable(newColumn)"
+                                              v-model="newColumn.un">
+                                    <template v-slot:label>
+                                      <span class="caption font-weight-bold">UN</span>
+                                    </template>
+                                  </v-checkbox>
+                                </div>
+                              </template>
+                              <span>Unsigned</span>
+                            </v-tooltip>
+
+                            <v-tooltip bottom z-index="99999">
+                              <template v-slot:activator="{on}">
+                                <div v-on="on">
+                                  <v-checkbox class="mr-2 mt-0" dense hide-details label="UN"
+                                              @input="newColumn.altered = newColumn.altered || 2"
+                                              :disabled=" sqlUi.colPropAuDisabled(newColumn) || !sqlUi.columnEditable(newColumn)"
+                                              v-model="newColumn.au">
+                                    <template v-slot:label>
+                                      <span class="caption font-weight-bold">AU</span>
+                                    </template>
+                                  </v-checkbox>
+                                </div>
+                              </template>
+                              <span>Auto Update Timestamp</span>
+                            </v-tooltip>
+                          </div>
+                        </v-col>
+                        <v-col cols="12">
+                          <v-autocomplete
+                            v-model="newColumn.dt"
+                            hide-details
+                            class="caption data-type"
+                            label="Type in Database"
+                            dense
+                            outlined
+                            :items="dataTypes">
+                          </v-autocomplete>
+                        </v-col>
+
+                        <v-col :cols="sqlUi.showScale(newColumn) && !isSelect ? 6 : 12">
+                          <v-text-field
+                            v-if="!isSelect"
+                            dense
+                            :disabled="sqlUi.getDefaultLengthIsDisabled(newColumn.dt) || !sqlUi.columnEditable(newColumn)"
+                            class="caption"
+                            label="Length / Values"
+                            outlined
+                            hide-details v-model="newColumn.dtxp"
+                            @input="newColumn.altered = newColumn.altered || 2"
+                          ></v-text-field>
+                        </v-col>
+                        <v-col :cols="isSelect ?12 : 6" v-if="sqlUi.showScale(newColumn)">
+
+                          <v-text-field
+                            dense
+                            :disabled=" !sqlUi.columnEditable(newColumn)"
+                            class="caption"
+                            label="Scale"
+                            outlined
+                            @input="newColumn.altered = newColumn.altered || 2"
+                            hide-details v-model="newColumn.dtxs"></v-text-field>
+                        </v-col>
+
+                        <v-col cols="12">
+                          <v-textarea v-model="newColumn.cdf"
+                                      @input="newColumn.altered = newColumn.altered || 2"
+                                      label="Default value"
+                                      :hint="sqlUi.getDefaultValueForDatatype(newColumn.dt)"
+                                      persistent-hint
+                                      rows="3"
+                                      outlined dense class="caption"></v-textarea>
+                        </v-col>
+                      </v-row>
+                    </v-container>
+                  </v-col>
+                </template>
+              </template>
+              <template v-else>
+                <v-col cols12>
+                  <v-autocomplete
+                    label="Formula"
+                    hide-details
+                    class="caption formula-type"
+                    outlined
+                    dense
+                    :items="formulas"
+                  >
+
+                    <template v-slot:item="{item}">
+                      <span class="green--text text--darken-2 caption font-weight-regular">{{ item }}</span>
+                    </template>
+
+                  </v-autocomplete>
                 </v-col>
               </template>
             </template>
-            <template v-else>
-              <v-col cols12>
-                <v-autocomplete
-                  label="Formula"
-                  hide-details
-                  class="caption formula-type"
-                  outlined
-                  dense
-                  :items="formulas"
-                >
-
-                  <template v-slot:item="{item}">
-                    <span class="green--text text--darken-2 caption font-weight-regular">{{ item }}</span>
-                  </template>
 
-                </v-autocomplete>
-              </v-col>
-            </template>
-          </template>
-
-          <div class="disabled-info" :class="{'d-none':!isEditDisabled}">
-            <v-alert dense type="warning" icon="info" class="caption mx-2" outlined>
-              This spreadsheet is connected to an SQLite DB.<br>
-              For production please see <a href="https://github.com/nocodb/nocodb#production-setup"
-                                           target="_blank">here</a>.
-            </v-alert>
+            <div class="disabled-info" :class="{'d-none':!isEditDisabled}">
+              <v-alert dense type="warning" icon="info" class="caption mx-2" outlined>
+                This spreadsheet is connected to an SQLite DB.<br>
+                For production please see <a href="https://github.com/nocodb/nocodb#production-setup"
+                                             target="_blank">here</a>.
+              </v-alert>
+            </div>
           </div>
-        </div>
-
 
-      </v-row>
-    </v-container>
 
+        </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)
diff --git a/packages/nc-gui/components/project/spreadsheet/editColumn/relationOptions.vue b/packages/nc-gui/components/project/spreadsheet/editColumn/relationOptions.vue
index a99bdc8b9d..45b5c23018 100644
--- a/packages/nc-gui/components/project/spreadsheet/editColumn/relationOptions.vue
+++ b/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: {
@@ -160,7 +163,7 @@ export default {
       }, 'tableList']);
 
 
-      this.refTables = result.data.list.map(({tn,_tn}) => ({tn,_tn}))
+      this.refTables = result.data.list.map(({tn, _tn}) => ({tn, _tn}))
       this.isRefTablesLoading = false;
     },
     async saveRelation() {
@@ -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>
diff --git a/packages/nc-gui/components/project/spreadsheet/mixins/spreadsheet.js b/packages/nc-gui/components/project/spreadsheet/mixins/spreadsheet.js
index 85d7b301aa..65591da239 100644
--- a/packages/nc-gui/components/project/spreadsheet/mixins/spreadsheet.js
+++ b/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;
       }, {}) : {};