feat: add import excel option in project

Signed-off-by: Pranav C <pranavxc@gmail.com>
3 years ago · a4fd84779b
14 changed files with 90 additions and 44 deletions
--- a/packages/nc-gui/components/ProjectTreeView.vue
+++ b/packages/nc-gui/components/ProjectTreeView.vue
@ -642,6 +642,13 @@
      :heading="selectedNodeForDelete.heading"
      type="error"
    />
+    <excel-import
+      ref="excelImport"
+      v-model="excelImportDialog"
+      hide-label
+      import-to-project
+      @success="onExcelImport"
+    />
  </div>
 </template>

@ -661,11 +668,13 @@ import DlgTableCreate from '@/components/utils/dlgTableCreate';
 import DlgViewCreate from '@/components/utils/dlgViewCreate';
 import SponsorMini from '@/components/sponsorMini';
 import {validateTableName} from "~/helpers";
+import ExcelImport from "~/components/import/excelImport";

 // const {clipboard} = require('electron');

 export default {
  components: {
+    ExcelImport,
    SponsorMini,
    DlgViewCreate,
    DlgTableCreate,
@ -704,6 +713,7 @@ export default {
    open: [],
    search: null,
    menuVisible: false,
+    excelImportDialog:false,
    x: 0,
    y: 0,
    menuItem: null,
@ -924,7 +934,12 @@ export default {
        this.miniExpanded = false;
      }
    },
-
+    onExcelImport(){
+      if (!this.menuItem || this.menuItem.type !== 'tableDir') {
+        this.menuItem = this.listViewArr.find(n => n.type === 'tableDir');
+      }
+      this.loadTables(this.menuItem)
+    },
    ...mapMutations({
      setProject: 'project/list',
      updateProject: 'project/update',
@ -1146,12 +1161,11 @@ export default {
            this.dialogGetFunctionName.dialogShow = true;
          } else if (action === 'ENV_DB_FUNCTIONS_CREATE') {
            this.dialogGetFunctionName.dialogShow = true;
-          } else if (action === 'ENV_DB_TABLES_REFRESH') {
-            await this.loadTables(this.menuItem);
-            this.$toast.success('Tables refreshed').goAway(1000);
          } else if (action === 'ENV_DB_VIEWS_REFRESH') {
            await this.loadViews(this.menuItem);
            this.$toast.success('Views refreshed').goAway(1000);
+          } else if (action === 'IMPORT_EXCEL') {
+           this.excelImportDialog=true
          } else if (action === 'ENV_DB_FUNCTIONS_REFRESH') {
            await this.loadFunctions(this.menuItem);
            this.$toast.success('Functions refreshed').goAway(1000);
--- a/packages/nc-gui/components/import/excelImport.vue
+++ b/packages/nc-gui/components/import/excelImport.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="pt-10">
+  <div :class="{'pt-10':!hideLabel}">
    <v-dialog v-model="dropOrUpload" max-width="600">
      <v-card max-width="600">
        <v-tabs height="30">
@ -125,7 +125,7 @@
    </v-tooltip>

    <v-dialog v-if="templateData" v-model="templateEditorModal" max-width="1000">
-      <v-card class="pa-6">
+      <v-card class="pa-6" min-width="500">
        <template-editor :project-template.sync="templateData" excel-import>
          <template #toolbar="{valid}">
            <h3 class="mt-2 grey--text">
@ -138,10 +138,12 @@
            <create-project-from-template-btn
              :template-data="templateData"
              :import-data="importData"
+              :import-to-project="importToProject"
              excel-import
              :valid="valid"
              create-gql-text="Import as GQL Project"
              create-rest-text="Import as REST Project"
+              @success="$emit('success'),templateEditorModal = false"
            >
              Import Excel
            </create-project-from-template-btn>
@ -165,7 +167,8 @@ export default {
  components: { CreateProjectFromTemplateBtn, TemplateEditor },
  props: {
    hideLabel: Boolean,
-    value: Boolean
+    value: Boolean,
+    importToProject: Boolean
  },
  data() {
    return {
--- a/packages/nc-gui/components/import/templateParsers/ExcelTemplateAdapter.js
+++ b/packages/nc-gui/components/import/templateParsers/ExcelTemplateAdapter.js
@ -63,7 +63,6 @@ export default class ExcelTemplateAdapter extends TemplateGenerator {
        const column = {
          cn
        }
-
        // const cellId = `${col.toString(26).split('').map(s => (parseInt(s, 26) + 10).toString(36).toUpperCase())}2`;
        const cellId = XLSX.utils.encode_cell({
          c: range.s.c + col,
@ -94,13 +93,13 @@ export default class ExcelTemplateAdapter extends TemplateGenerator {
              if (vals.some(v => v && v.toString().includes(','))) {
                const flattenedVals = vals.flatMap(v => v ? v.toString().split(',') : [])
                const uniqueVals = new Set(flattenedVals)
-                if (flattenedVals.length > uniqueVals.size && uniqueVals.size <= flattenedVals.length / 10) {
+                if (flattenedVals.length > uniqueVals.size && uniqueVals.size <= Math.ceil(flattenedVals.length / 2)) {
                  column.uidt = UITypes.MultiSelect
                  column.dtxp = [...uniqueVals].join(',')
                }
              } else {
                const uniqueVals = new Set(vals)
-                if (vals.length > uniqueVals.size && uniqueVals.size <= vals.length / 10) {
+                if (vals.length > uniqueVals.size && uniqueVals.size <= Math.ceil(vals.length / 2)) {
                  column.uidt = UITypes.SingleSelect
                  column.dtxp = [...uniqueVals].join(',')
                }
--- a/packages/nc-gui/components/project/spreadsheet/components/csvExportImport.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/csvExportImport.vue
@ -78,7 +78,7 @@ import ColumnMappingModal from '~/components/project/spreadsheet/components/colu
 import CSVTemplateAdapter from '~/components/import/templateParsers/CSVTemplateAdapter'

 export default {
-  name: 'CsvExportImport',
+  name: 'ExportImport',
  components: { ColumnMappingModal, DropOrSelectFileModal },
  props: {
    meta: Object,
--- a/packages/nc-gui/components/project/spreadsheet/public/xcTable.vue
+++ b/packages/nc-gui/components/project/spreadsheet/public/xcTable.vue
@ -197,7 +197,7 @@ import SortListMenu from '../components/sortListMenu'
 import ColumnFilterMenu from '../components/columnFilterMenu'
 import XcGridView from '../views/xcGridView'
 import { SqlUI } from '@/helpers/sqlUi'
-import CsvExportImport from '~/components/project/spreadsheet/components/csvExportImport'
+import CsvExportImport from '~/components/project/spreadsheet/components/exportImport'
 // import ExpandedForm from "../expandedForm";

 export default {
--- a/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
+++ b/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
@ -560,7 +560,7 @@ import ExpandedForm from '@/components/project/spreadsheet/components/expandedFo
 import Pagination from '@/components/project/spreadsheet/components/pagination'
 import { SqlUI } from '~/helpers/sqlUi'
 import ColumnFilter from '~/components/project/spreadsheet/components/columnFilterMenu'
-import CsvExportImport from '~/components/project/spreadsheet/components/csvExportImport'
+import CsvExportImport from '~/components/project/spreadsheet/components/exportImport'

 export default {
  name: 'RowsXcDataTable',
--- a/packages/nc-gui/components/templates/createProjectFromTemplateBtn.vue
+++ b/packages/nc-gui/components/templates/createProjectFromTemplateBtn.vue
@ -44,6 +44,7 @@ export default {
  props: {
    excelImport: Boolean,
    loading: Boolean,
+    importToProject: Boolean,
    templateData: [Array, Object],
    importData: [Array, Object],
    valid: {
@ -107,30 +108,56 @@ export default {
          this.$store.commit('loader/MutMessage', this.loaderMessages[this.loaderMessagesIndex])
        }, 1000)

-        const result = await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'projectCreateByWebWithXCDB', {
-          title: this.templateData.title,
-          projectType,
-          template: this.templateData,
-          excelImport: this.excelImport
-        }])
+        let projectId, prefix

-        await this.$store.dispatch('project/ActLoadProjectInfo')
+        if (this.importToProject) {
+          this.$store.commit('loader/MutMessage', 'Importing excel template')

+          const res = await this.$store.dispatch('sqlMgr/ActSqlOp', [{
+            // todo: extract based on active
+            dbAlias: 'db', // this.nodes.dbAlias,
+            env: '_noco'
+          }, 'xcModelsCreateFromTemplate', {
+            template: this.templateData
+          }])
+
+          if (res && res.tables && res.tables.length) {
+            this.$toast.success(`Imported ${res.tables.length} tables successfully`).goAway(3000)
+          } else {
+            this.$toast.success('Template imported successfully').goAway(3000)
+          }
+
+          projectId = this.$route.params.project_id
+          prefix = this.$store.getters['project/GtrProjectPrefix']
+        } else {
+          const result = await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'projectCreateByWebWithXCDB', {
+            title: this.templateData.title,
+            projectType,
+            template: this.templateData,
+            excelImport: this.excelImport
+          }])
+          projectId = result.id
+          prefix = result.prefix
+          await this.$store.dispatch('project/ActLoadProjectInfo')
+        }
        clearInterval(interv)
        if (this.importData) {
          this.$store.commit('loader/MutMessage', 'Importing excel data to project')
-          await this.importDataToProject({ projectId: result.id, projectType, prefix: result.prefix })
+          await this.importDataToProject({ projectId, projectType, prefix })
        }
        this.$store.commit('loader/MutMessage', null)

        this.projectReloading = false
+        if (!this.importToProject) {
+          await this.$router.push({
+            path: `/nc/${projectId}`,
+            query: {
+              new: 1
+            }
+          })
+        }

-        this.$router.push({
-          path: `/nc/${result.id}`,
-          query: {
-            new: 1
-          }
-        })
+        this.$emit('success')
      } catch (e) {
        console.log(e)
        this.$toast.error(e.message).goAway(3000)
--- a/packages/nc-gui/helpers/rightClickOptions.js
+++ b/packages/nc-gui/helpers/rightClickOptions.js
@ -20,6 +20,7 @@ export default {
  tableDir: {
    'Table Create': 'ENV_DB_TABLES_CREATE',
    'Tables Refresh': 'ENV_DB_TABLES_REFRESH',
+    'Import Excel': 'IMPORT_EXCEL',
    // "Table Create": "ENV_DB_TABLES_CREATE",
    ...(process.env.NODE_ENV === 'dev' ? { 'Show _Nodes Info': 'SHOW_NODES' } : {})
  },
--- a/packages/nc-gui/helpers/sqlUi/PgUi.js
+++ b/packages/nc-gui/helpers/sqlUi/PgUi.js
@ -1630,13 +1630,13 @@ export class PgUi {
        colProp.dt = 'character varying'
        break
      case 'DateTime':
-        colProp.dt = 'datetime'
+        colProp.dt = 'timestamp'
        break
      case 'CreateTime':
-        colProp.dt = 'datetime'
+        colProp.dt = 'timestamp'
        break
      case 'LastModifiedTime':
-        colProp.dt = 'datetime'
+        colProp.dt = 'timestamp'
        break
      case 'AutoNumber':
        colProp.dt = 'int'
@ -1761,7 +1761,7 @@ export class PgUi {
          'float8',
          'smallint',
          'smallserial',
-          'numeric',
+          'numeric'
        ]

      case 'Decimal':
@ -1769,7 +1769,7 @@ export class PgUi {
          'double precision',
          'float4',
          'float8',
-          'numeric',
+          'numeric'
        ]

      case 'Currency':
@ -1787,7 +1787,7 @@ export class PgUi {
          'double precision',
          'money', 'float4',
          'float8',
-          'numeric',
+          'numeric'
        ]

      case 'Percent':
@ -1807,7 +1807,7 @@ export class PgUi {
          'float8',
          'smallint',
          'smallserial',
-          'numeric',
+          'numeric'
        ]

      case 'Duration':
@ -1827,7 +1827,7 @@ export class PgUi {
          'float8',
          'smallint',
          'smallserial',
-          'numeric',
+          'numeric'
        ]

      case 'Rating':
@ -1847,7 +1847,7 @@ export class PgUi {
          'float8',
          'smallint',
          'smallserial',
-          'numeric',
+          'numeric'
        ]

      case 'Formula':
--- a/packages/nc-gui/package-lock.json
+++ b/packages/nc-gui/package-lock.json
@ -8073,9 +8073,9 @@
      }
    },
    "monaco-editor": {
-      "version": "0.18.1",
-      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.18.1.tgz",
-      "integrity": "sha512-fmL+RFZ2Hrezy+X/5ZczQW51LUmvzfcqOurnkCIRFTyjdVjzR7JvENzI6+VKBJzJdPh6EYL4RoWl92b2Hrk9fw=="
+      "version": "0.19.3",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.19.3.tgz",
+      "integrity": "sha512-2n1vJBVQF2Hhi7+r1mMeYsmlf18hjVb6E0v5SoMZyb4aeOmYPKun+CE3gYpiNA1KEvtSdaDHFBqH9d7Wd9vREg=="
    },
    "monaco-editor-webpack-plugin": {
      "version": "1.9.1",
--- a/packages/nc-gui/package.json
+++ b/packages/nc-gui/package.json
@ -26,7 +26,7 @@
    "inflection": "^1.12.0",
    "jsep": "^0.4.0",
    "material-design-icons-iconfont": "^5.0.1",
-    "monaco-editor": "^0.18.1",
+    "monaco-editor": "^0.19.3",
    "monaco-themes": "^0.2.5",
    "nano-assign": "^1.0.1",
    "nuxt": "^2.14.0",
--- a/packages/nc-lib-gui/package.json
+++ b/packages/nc-lib-gui/package.json
@ -1,6 +1,6 @@
 {
  "name": "nc-lib-gui",
-  "version": "0.82.0",
+  "version": "0.82.1",
  "description": "> TODO: description",
  "author": "“pranavxc” <pranavxc@gmail.com>",
  "homepage": "https://gitlab.com/xgenecloud-ts/xgenecloud-ts#readme",
--- a/packages/nocodb/src/lib/noco/common/BaseApiBuilder.ts
+++ b/packages/nocodb/src/lib/noco/common/BaseApiBuilder.ts
@ -236,6 +236,8 @@ export default abstract class BaseApiBuilder<T extends Noco>
        model_name: tn
      }
    );
+    if (delete this.metas[tn]) delete this.metas[tn];
+    if (delete this.models[tn]) delete this.models[tn];
  }

  public async onRelationCreate(
--- a/packages/nocodb/src/lib/sqlUi/PgUi.ts
+++ b/packages/nocodb/src/lib/sqlUi/PgUi.ts
@ -1665,13 +1665,13 @@ export class PgUi {
        colProp.dt = 'character varying';
        break;
      case 'DateTime':
-        colProp.dt = 'datetime';
+        colProp.dt = 'timestamp';
        break;
      case 'CreateTime':
-        colProp.dt = 'datetime';
+        colProp.dt = 'timestamp';
        break;
      case 'LastModifiedTime':
-        colProp.dt = 'datetime';
+        colProp.dt = 'timestamp';
        break;
      case 'AutoNumber':
        colProp.dt = 'int';