fix: import logic

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

@@ -14,6 +14,7 @@
 
 <script>
 import colors from '~/mixins/colors'
+import { SqlUiFactory } from 'nocodb-sdk';
 
 export default {
   name: 'CreateProjectFromTemplateBtn',
@@ -44,6 +45,7 @@ export default {
   data() {
     return {
       projectCreation: false,
+      tableCreation: false,
       loaderMessagesIndex: 0,
       loaderMessages: [
         'Setting up new database configs',
@@ -77,7 +79,7 @@ export default {
 
       // this.$emit('useTemplate', type)
 
-      this.projectCreation = true
+      // this.projectCreation = true
       let interv
       try {
         interv = setInterval(() => {
@@ -85,7 +87,7 @@ export default {
           this.$store.commit('loader/MutMessage', this.loaderMessages[this.loaderMessagesIndex])
         }, 1000)
 
-        let projectId, prefix
+        let project
 
         if (this.importToProject) {
           this.$store.commit('loader/MutMessage', 'Importing excel template')
@@ -107,58 +109,73 @@ export default {
           projectId = this.$route.params.project_id
           prefix = this.$store.getters['project/GtrProjectPrefix']
         } else {
+          // Create an empty project
           try {
-            // Create an empty project
+            project = await this.$api.project.create({
-            const result = await this.$api.project.create({
               title: this.templateData.title,
               external: false
             })
-
-            prefix = result.prefix
-
-            clearInterval(interv)
-
-            await this.$store.dispatch('project/ActLoadProjectInfo')
-
-            this.projectReloading = false
-
             if (!this.edit && !this.allSchemas) {
               this.$router.push({
-                path: `/nc/${result.id}`,
+                path: `/nc/${project.id}`,
                 query: {
                   new: 1
                 }
               })
             }
+            this.projectCreation = true
+          } catch (e) {
+            this.projectCreation = false
+            this.$toast
+              .error(await this._extractSdkResponseErrorMsg(e))
+              .goAway(3000)
+          } finally {
+            clearInterval(interv)
+          }
 
-            this.projectCreated = true
+          if (!this.projectCreation) {
+            // failed to create project
+            return
+          }
 
-            // Create tables
+          // Create tables
+          try {
             for (var t of this.templateData.tables) {
-              const table = await this.$api.dbTable.create(result.id, {
+              // enrich system fields if not provided
+              // e.g. id, created_at, updated_at
+              const systemColumns = SqlUiFactory
+                  .create({client: 'sqlite3'})
+                  .getNewTableColumns()
+                  .filter(c => c.column_name != "title")
+              const table = await this.$api.dbTable.create(project.id, {
                 table_name: t.ref_table_name,
                 title: '',
-                columns: t.columns,
+                columns: [...t.columns, ...systemColumns],
               });
               console.log(table)
               t.table_title = table.title
             }
+            this.tableCreation = true
           } catch (e) {
             this.$toast
               .error(await this._extractSdkResponseErrorMsg(e))
               .goAway(3000)
+            this.tableCreation = false
+          } finally {
+            clearInterval(interv)
           }
         }
-        clearInterval(interv)
 
-        // Bulk import data
+        if (this.tableCreation) {
-        if (this.importData) {
+          // Bulk import data
-          this.$store.commit('loader/MutMessage', 'Importing excel data to project')
+          if (this.importData) {
-          await this.importDataToProject(this.templateData.title, prefix)
+            this.$store.commit('loader/MutMessage', 'Importing excel data to project')
+            await this.importDataToProject(this.templateData.title, project.prefix)
+          }
+          this.$store.commit('loader/MutMessage', null)
+          this.projectReloading = false
+          this.$emit('success')
         }
-        this.$store.commit('loader/MutMessage', null)
-        this.projectReloading = false
-        this.$emit('success')
       } catch (e) {
         console.log(e)
         this.$toast.error(e.message).goAway(3000)
@@ -166,6 +183,7 @@ export default {
         clearInterval(interv)
       }
       this.projectCreation = false
+      this.tableCreation = false
     },
     async importDataToProject(projectName, prefix) {
       let total = 0