feat: add import excel option in project

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

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);

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 {

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(',')
                 }

packages/nc-gui/components/project/spreadsheet/components/exportImport.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,

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 {

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',

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', {
+        let projectId, prefix
-          title: this.templateData.title,
-          projectType,
-          template: this.templateData,
-          excelImport: this.excelImport
-        }])
 
-        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({
+        this.$emit('success')
-          path: `/nc/${result.id}`,
-          query: {
-            new: 1
-          }
-        })
       } catch (e) {
         console.log(e)
         this.$toast.error(e.message).goAway(3000)

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' } : {})
   },

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':

packages/nc-gui/package-lock.json

@@ -8073,9 +8073,9 @@
       }
     },
     "monaco-editor": {
-      "version": "0.18.1",
+      "version": "0.19.3",
-      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.18.1.tgz",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.19.3.tgz",
-      "integrity": "sha512-fmL+RFZ2Hrezy+X/5ZczQW51LUmvzfcqOurnkCIRFTyjdVjzR7JvENzI6+VKBJzJdPh6EYL4RoWl92b2Hrk9fw=="
+      "integrity": "sha512-2n1vJBVQF2Hhi7+r1mMeYsmlf18hjVb6E0v5SoMZyb4aeOmYPKun+CE3gYpiNA1KEvtSdaDHFBqH9d7Wd9vREg=="
     },
     "monaco-editor-webpack-plugin": {
       "version": "1.9.1",

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",

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",

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(

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';