feat: import(wip)

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

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

@@ -1,11 +1,3 @@
-<script>
-import CreateProjectFromTemplateBtn from '~/components/templates/createProjectFromTemplateBtn'
-import TemplateEditor from '~/components/templates/editor'
-
-export default {
-  components: { TemplateEditor, CreateProjectFromTemplateBtn }
-}
-</script>
 <template>
   <div class="pt-10">
     <v-dialog v-model="dropOrUpload" max-width="600">
@@ -84,7 +76,7 @@ export default {
           <div class="d-flex">
             <v-spacer />
             <span class="caption pointer grey--text" @click="showMore = !showMore">{{ showMore ? 'Hide' : 'Show' }} more
-              <v-icon small>mdi-menu-{{ showMore ? 'up' : 'down' }}</v-icon>
+              <v-icon small color="grey lighten-1">mdi-menu-{{ showMore ? 'up' : 'down' }}</v-icon>
             </span>
           </div>
           <div class="mb-2 pt-2 nc-excel-import-options" :style="{ maxHeight: showMore ? '100px' : '0'}">
@@ -133,12 +125,13 @@ export default {
     </v-tooltip>
 
     <v-dialog v-if="templateData" v-model="templateEditorModal" max-width="1000">
-      <v-card>
+      <v-card class="pa-6">
         <template-editor :project-template.sync="templateData" excel-import>
           <template #toolbar="{valid}">
-            <h3 class="mt-2 grey--text">
+            <!--            <h3 class="mt-2 grey&#45;&#45;text">-->
-              Import Excel as Project : {{ filename }}
+            <!--              Import Excel as Project -->
-            </h3>
+            <!--            </h3>-->
+            <!--            <span class="grey&#45;&#45;text">Importing 2 sheets</span>-->
 
             <v-spacer />
             <create-project-from-template-btn
@@ -167,14 +160,14 @@ import ExcelTemplateAdapter from '~/components/import/templateParsers/ExcelTempl
 
 export default {
   name: 'ExcelImport',
-  components: {CreateProjectFromTemplateBtn, TemplateEditor},
+  components: { CreateProjectFromTemplateBtn, TemplateEditor },
   props: {
     hideLabel: Boolean,
     value: Boolean
   },
   data() {
     return {
-      templateEditorModal:false,
+      templateEditorModal: false,
       valid: null,
       templateData: null,
       importData: null,
@@ -198,6 +191,10 @@ export default {
     }
   },
   mounted() {
+    if (this.$route && this.$route.query && this.$route.query.excelUrl) {
+      this.url = this.$route.query.excelUrl
+      this.loadUrl()
+    }
   },
   methods: {
 
@@ -214,6 +211,8 @@ export default {
       }
     },
     async _file(file) {
+      this.templateData = null
+      this.importData = null
       this.$store.commit('loader/MutMessage', 'Loading excel file')
       let i = 0
       const int = setInterval(() => {
@@ -222,7 +221,8 @@ export default {
       this.dropOrUpload = false
       const reader = new FileReader()
       this.filename = file.name
-      reader.onload = async (e) => {
+
+      reader.onload = async(e) => {
         const ab = e.target.result
         await this.parseAndExtractData('file', ab, file.name)
         this.$store.commit('loader/MutMessage', null)
@@ -256,11 +256,11 @@ export default {
       templateGenerator.parse()
       this.templateData = templateGenerator.getTemplate()
       this.importData = templateGenerator.getData()
-      this.templateEditorModal = true;
+      this.templateEditorModal = true
     },
 
     dropHandler(ev) {
-      this.dragOver = false;
+      this.dragOver = false
       console.log('File(s) dropped')
       let file
       if (ev.dataTransfer.items) {
@@ -272,7 +272,9 @@ export default {
         file = ev.dataTransfer.files[0]
       }
 
-      if (!file) return
+      if (!file) {
+        return
+      }
 
       if (!/\.xls[xm]?$/.test(file.name)) {
         return this.$toast.error('Dropped file is not an accepted file type. The accepted file types are .xlsx,.xls,.xlsm!').goAway(3000)
@@ -287,7 +289,7 @@ export default {
     },
 
     async loadUrl() {
-      if (!this.$refs.form.validate()) {
+      if ((this.$refs.form && !this.$refs.form.validate()) || !this.url) {
         return
       }
 

packages/nc-gui/components/project/spreadsheet/components/editableCell/editableAttachmentCell.vue

@@ -6,7 +6,7 @@
     @dragexit="dragOver = false"
     @dragleave="dragOver = false"
     @dragend="dragOver = false"
-    @drop.prevent="onFileDrop"
+    @drop.prevent.stop="onFileDrop"
   >
     <div v-show="(isForm || _isUIAllowed('tableAttachment')) && dragOver" class="drop-overlay">
       <div>

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

@@ -140,6 +140,7 @@
         />
 
         <csv-export-import
+          ref="csvExportImport"
           :meta="meta"
           :nodes="nodes"
           :query-params="{
@@ -234,6 +235,7 @@
             <xc-grid-view
               :key="key + selectedViewId"
               ref="ncgridview"
+              droppable
               :relation-type="relationType"
               :columns-width.sync="columnsWidth"
               :is-locked="isLocked"
@@ -252,6 +254,7 @@
               :is-virtual="selectedView.type === 'vtable'"
               :api="api"
               :is-pk-avail="isPkAvail"
+              @drop="onFileDrop"
               @onNewColCreation="onNewColCreation"
               @onCellValueChange="onCellValueChange"
               @insertNewRow="insertNewRow"
@@ -1104,6 +1107,23 @@ export default {
         await this.loadTableData()
         // this.mapFieldsAndShowFields();
       })
+    },
+    onFileDrop(ev) {
+      let file
+      if (ev.dataTransfer.items) {
+        // Use DataTransferItemList interface to access the file(s)
+        if (ev.dataTransfer.items.length && ev.dataTransfer.items[0].kind === 'file') {
+          file = ev.dataTransfer.items[0].getAsFile()
+        }
+      } else if (ev.dataTransfer.files.length) {
+        file = ev.dataTransfer.files[0]
+      }
+
+      if (file && !file.name.endsWith('.csv')) {
+        return
+      }
+
+      this.$refs.csvExportImport.onCsvFileSelection(file)
     }
   },
   computed: {

packages/nc-gui/components/project/spreadsheet/views/xcGridView.vue

@@ -1,5 +1,12 @@
 <template>
-  <div>
+  <div
+    @dragover.prevent="dragOver = true"
+    @dragenter.prevent="dragOver = true"
+    @dragexit="dragOver = false"
+    @dragleave="dragOver = false"
+    @dragend="dragOver = false"
+    @drop.prevent.stop="onFileDrop"
+  >
     <table
       v-if="data"
       class="xc-row-table nc-grid"
@@ -22,7 +29,7 @@
             class="grey-border caption font-wight-regular  nc-grid-header-cell"
             :class="$store.state.windows.darkTheme ? 'grey darken-3 grey--text text--lighten-1' : 'grey lighten-4  grey--text text--darken-2'"
             :data-col="col.alias"
-            @xcresize="onresize(col.alias,$event)"
+            @xcresize="onresize(col.alias,$event), log('xcresize')"
             @xcresizing="onXcResizing(col.alias,$event)"
             @xcresized="resizingCol = null"
           >
@@ -258,6 +265,7 @@ export default {
   },
   mixins: [colors],
   props: {
+    droppable: Boolean,
     metas: Object,
     relationType: String,
     availableColumns: [Object, Array],
@@ -294,7 +302,8 @@ export default {
       row: null,
       col: null
     },
-    aggCount: []
+    aggCount: [],
+    dragOver: false
   }),
   computed: {
     ids() {
@@ -347,8 +356,13 @@ export default {
     document.removeEventListener('keydown', this.onKeyDown)
   },
   methods: {
+    onFileDrop(event) {
+      this.$emit('drop', event)
+    },
     isRequired(_columnObj, rowObj) {
-      if (this.isPublicView) { return false }
+      if (this.isPublicView) {
+        return false
+      }
 
       let columnObj = _columnObj
       if (columnObj.bt) {
@@ -447,7 +461,9 @@ export default {
           if (e.ctrlKey ||
             e.altKey ||
             e.shiftKey ||
-            e.metaKey) { return }
+            e.metaKey) {
+            return
+          }
 
           if (e.key && e.key.length === 1) {
             if (!this.isPkAvail && !this.data[this.selected.row].rowMeta.new) {
@@ -531,6 +547,9 @@ export default {
     onXcResizing(_cn, width) {
       this.resizingCol = _cn
       this.resizingColWidth = width
+    },
+    log(e, s) {
+      console.log(e.target, s)
     }
   }
 }

packages/nc-gui/components/templates/editor.vue

@@ -90,8 +90,27 @@
       <v-form ref="form" v-model="valid">
         <v-row fluid class="justify-center">
           <v-col cols="12">
-            <v-card>
+            <v-card class="elevation-0">
               <v-card-text>
+                <div v-if="!viewMode" class="mx-auto" style="max-width:400px">
+                  <div class="mt-1">
+                    <v-text-field
+                      ref="project"
+                      v-model="project.title"
+                      class="caption"
+                      outlined
+                      dense
+                      label="Project Name"
+                      persistent-hint
+                      :rules="[v => !!v || 'Project name required'] "
+                    />
+                  </div>
+                </div>
+
+                <p v-if="project.tables" class="caption grey--text">
+                  {{ project.tables.length }} sheet{{ project.tables.length > 1 ? 's' :'' }} are available for import
+                </p>
+
                 <v-expansion-panels
                   v-if="project.tables && project.tables.length"
                   v-model="expansionPanel"
@@ -425,7 +444,7 @@
 
                 <!--            <v-btn small color='primary' class='mt-10' @click='createTablesDialog = true'>New Table</v-btn>-->
                 <div v-if="!viewMode" class="mx-auto" style="max-width:600px">
-                  <div class="mt-10">
+                  <!--                  <div class="mt-10">
                     <v-text-field
                       ref="project"
                       v-model="project.title"
@@ -435,7 +454,7 @@
                       label="Project Name"
                       :rules="[v => !!v || 'Project name required'] "
                     />
-                  </div>
+                  </div>-->
                   <!--
                   <div
                     class="rounded pa-5 mb-5 d-100 text-center caption"

packages/nc-gui/pages/projects/index.vue

@@ -1,5 +1,17 @@
 <template>
-  <v-container fluid class="text-center px-10 pt-10 nc-container">
+  <v-container
+    fluid
+    class="text-center px-10 pt-10 nc-container"
+
+    @dragover.prevent="dragOver = true"
+    @dragenter.prevent="dragOver = true"
+    @dragexit="dragOver = false"
+    @dragleave="dragOver = false"
+    @dragend="dragOver = false"
+    @drop.prevent.stop="onFileDrop"
+  >
+    <!--    <v-overlay :value="dragOver" />-->
+
     <!--    <sponsor-overlay v-if="overlayVisible && projects && projects.length"-->
     <!--                     @close="overlayVisible = false"></sponsor-overlay>-->
     <v-row>
@@ -745,6 +757,7 @@ export default {
   },
   data() {
     return {
+      dragOver: false,
       excelImportModal: false,
       templatesModal: false,
       overlayVisible: true,
@@ -877,8 +890,16 @@ export default {
     // }, 200)
     await this.projectsLoad()
     // await this.openProjectIfQueryParamFound()
+
+    if (this.$route && this.$route.query && this.$route.query.excelUrl) {
+      this.excelImportModal = true
+    }
   },
   methods: {
+    async onFileDrop(e) {
+      this.excelImportModal = true
+      this.$refs.excelImport.dropHandler(e)
+    },
     async stopProject(project) {
       this.dialogShow = true
       this.confirmMessage =