feat: add validation rules for csv import(in progress)

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

package.json

@@ -10,7 +10,7 @@
     "lerna": "^3.20.1"
   },
   "scripts": {
-    "start:api": "cd ./packages/nocodb; npm install; cross-env NC_DISABLE_TELE=true npm run watch:run",
+    "start:api": "cd ./packages/nocodb; npm install; npm run watch:run",
     "start:web": "cd ./packages/nc-gui; npm install; npm run dev",
     "cypress:run": "cypress run --config-file ./scripts/cypress/cypress.json",
     "cypress:open": "cypress open --config-file ./scripts/cypress/cypress.json",

packages/nc-gui/components/import/dropOrSelectFileModal.vue

@@ -63,10 +63,11 @@ export default {
     }
   },
   methods: {
-    _change(file) {
-      const files = file.target.files
+    _change(event) {
+      const files = event.target.files
       if (files && files[0]) {
         this.$emit('file', files[0])
+        event.target.value = ''
       }
     },
     dropHandler(ev) {

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

@@ -6,79 +6,98 @@
           Table : {{ meta._tn }}
         </v-card-title>
         <v-spacer />
-        <v-btn color="primary" large @click="$emit('import',mappings)">
+        <v-btn
+          :disabled="!valid || requiredColumnValidationError"
+          color="primary"
+          large
+          @click="$emit('import',mappings)"
+        >
           <v-icon small class="mr-1">
             mdi-database-import-outline
-          </v-icon>   Import
+          </v-icon>
+          Import
         </v-btn>
       </v-card-actions>
+      <div v-if="requiredColumnValidationError" class="error--text caption pa-2 text-center">
+        {{ requiredColumnValidationError }}
+      </div>
       <v-divider />
       <v-container fluid>
-        <v-simple-table dense style="position:relative;">
-          <thead>
-            <tr>
-              <th />
-              <th style="width:45%" class="grey--text">
-                Source column
-              </th>
-              <th style="width:45%" class="grey--text">
-                Destination column
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="(r,i) in mappings" :key="i">
-              <td>
-                <v-checkbox v-model="r.enabled" class="mt-0" dense hide-details />
-              </td><td class="caption" style="width:45%">
-                <div :title="r.sourceCn" style="">
-                  {{ r.sourceCn }}
-                </div>
-              </td><td style="width:45%">
-                <v-select
-                  v-model="r.destCn"
-                  class="caption"
-                  dense
-                  hide-details
-                  :items="meta.columns"
-                  item-text="_cn"
-                  item-value="_cn"
-                >
-                  <template #selection="{item}">
-                    <v-icon small class="mr-1">
-                      {{ getIcon(item.uidt) }}
-                    </v-icon>
-                    {{ item._cn }}
-                  </template>
-                  <template #item="{item}">
-                    <v-icon small class="mr-1">
-                      {{ getIcon(item.uidt) }}
-                    </v-icon>
-                    <span class="caption"> {{ item._cn }}</span>
-                  </template>
-                </v-select>
-              </td>
-            </tr>
-          </tbody>
-        </v-simple-table>
+        <v-form ref="form" v-model="valid">
+          <v-simple-table dense style="position:relative;">
+            <thead>
+              <tr>
+                <th />
+                <th style="width:45%" class="grey--text">
+                  Source column
+                </th>
+                <th style="width:45%" class="grey--text">
+                  Destination column
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(r,i) in mappings" :key="i">
+                <td>
+                  <v-checkbox v-model="r.enabled" class="mt-0" dense hide-details />
+                </td>
+                <td class="caption" style="width:45%">
+                  <div :title="r.sourceCn" style="">
+                    {{ r.sourceCn }}
+                  </div>
+                </td>
+                <td style="width:45%">
+                  <v-select
+                    v-model="r.destCn"
+                    class="caption"
+                    dense
+                    hide-details="auto"
+                    :items="meta.columns"
+                    item-text="_cn"
+                    :item-value="v => v"
+                    :rules="[
+                      v => validateField(v,r)
+                    ]"
+                    @change="$refs.form.validate()"
+                  >
+                    <template #selection="{item}">
+                      <v-icon small class="mr-1">
+                        {{ getIcon(item.uidt) }}
+                      </v-icon>
+                      {{ item._cn }}
+                    </template>
+                    <template #item="{item}">
+                      <v-icon small class="mr-1">
+                        {{ getIcon(item.uidt) }}
+                      </v-icon>
+                      <span class="caption"> {{ item._cn }}</span>
+                    </template>
+                  </v-select>
+                </td>
+              </tr>
+            </tbody>
+          </v-simple-table>
+        </v-form>
       </v-container>
     </v-card>
   </v-dialog>
 </template>
 
 <script>
-import { getUIDTIcon } from '~/components/project/spreadsheet/helpers/uiTypes'
+import { getUIDTIcon, UITypes } from '~/components/project/spreadsheet/helpers/uiTypes'
 
 export default {
   name: 'ColumnMappingModal',
   props: {
     meta: Object,
     importDataColumns: Array,
-    value: Boolean
+    value: Boolean,
+    parsedCsv: Object
   },
   data() {
     return {
-      mappings: []
+      mappings: [],
+      valid: false
     }
   },
   computed: {
@@ -89,12 +108,36 @@ export default {
       set(v) {
         this.$emit('input', v)
       }
+    },
+    requiredColumnValidationError() {
+      const missingRequiredColumns = this.meta.columns.filter(c => (
+        (c.pk && (!c.ai || !c.cdf)) || c.rqd) &&
+        !this.mappings.some(r => r.destCn === c._cn))
+
+      if (missingRequiredColumns.length) {
+        return `Following columns are required : ${missingRequiredColumns.map(c => c._cn).join(', ')}`
+      }
+      return false
     }
   },
   mounted() {
     this.mapDefaultColumns()
   },
+
   methods: {
+    validateField(v, row) {
+      if (!v) { return true }
+      switch (v.uidt) {
+        case UITypes.Number:
+          if (this.parsedCsv && this.parsedCsv.data && this.parsedCsv.data.slice(0, 500)
+            .some(r => r[row.sourceCn] !== null && r[row.sourceCn] !== undefined && isNaN(+r[row.sourceCn]))) {
+            return 'Source data contains some invalid numbers'
+          }
+          break
+      }
+
+      return true
+    },
     mapDefaultColumns() {
       this.mappings = []
       for (const col of this.importDataColumns) {

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

@@ -64,6 +64,7 @@
       v-model="columnMappingModal"
       :meta="meta"
       :import-data-columns="parsedCsv.columns"
+      :parsed-csv="parsedCsv"
       @import="importData"
     />
   </div>
@@ -239,11 +240,14 @@ export default {
         const api = this.$ncApis.get({
           table: this.meta.tn
         })
+
         const data = this.parsedCsv.data
         for (let i = 0, progress = 0; i < data.length; i += 500) {
           const batchData = data.slice(i, i + 500).map(row => columnMappings.reduce((res, col) => {
-            if (col.enabled) {
-              res[col.destCn] = row[col.sourceCn]
+            // todo: parse data
+
+            if (col.enabled && col.destCn && col.destCn._cn) {
+              res[col.destCn._cn] = row[col.sourceCn]
             }
             return res
           }, {}))

packages/nc-gui/plugins/ncApis/gqlApi.js

@@ -252,6 +252,20 @@ export default class GqlApi {
     })
     return { list: list.data.data.m2mNotChildren, count: count.data.data.m2mNotChildrenCount.count }
   }
+
+  async insertBulk(data, {
+    params = {}
+  } = {}) {
+    const data1 = await this.post(`/nc/${this.$ctx.projectId}/v1/graphql`, {
+      query: `mutation bulkInsert($data:[${this.tableCamelized}Input]){
+         ${this.gqlMutationCreateName}Bulk(data: $data)
+      }`,
+      variables: {
+        data
+      }
+    }, params)
+    return data1.data.data[`${this.gqlMutationCreateName}Bulk`]
+  }
 }
 /**
  * @copyright Copyright (c) 2021, Xgene Cloud Ltd