feat: import(wip)

Signed-off-by: Pranav C <pranavxc@gmail.com>
3 years ago · 66cb568e15
6 changed files with 111 additions and 30 deletions
--- a/packages/nc-gui/components/import/excelImport.vue
+++ b/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">
-              Import Excel as Project : {{ filename }}
-            </h3>
+            <!--            <h3 class="mt-2 grey&#45;&#45;text">-->
+            <!--              Import Excel as Project -->
+            <!--            </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
      }

--- a/packages/nc-gui/components/project/spreadsheet/components/editableCell/editableAttachmentCell.vue
+++ b/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>
--- a/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
+++ b/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: {
--- a/packages/nc-gui/components/project/spreadsheet/views/xcGridView.vue
+++ b/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)
    }
  }
 }
--- a/packages/nc-gui/components/templates/editor.vue
+++ b/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"
--- a/packages/nc-gui/pages/projects/index.vue
+++ b/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 =