nocodb/packages/nc-gui/components/templates/CreateProjectFromTemplateBtn.vue

<template>
  <div>
    <v-btn
      :loading="projectCreation"
      :disabled="projectCreation"
      class="primary nc-btn-use-template"
      x-large
      @click="useTemplate('rest')"
    >
      <slot>Use template</slot>
    </v-btn>
  </div>
</template>

<script>
import { SqlUiFactory } from 'nocodb-sdk'
import colors from '~/mixins/colors'

export default {
  name: 'CreateProjectFromTemplateBtn',
  mixins: [colors],
  props: {
    quickImport: Boolean,
    loading: Boolean,
    importToProject: Boolean,
    templateData: [Array, Object],
    importData: [Array, Object],
    valid: {
      default: true,
      type: Boolean
    },
    validationErrorMsg: {
      default: 'Please fill all the required values',
      type: String
    },
    createGqlText: {
      default: 'Create GQL Project',
      type: String
    },
    createRestText: {
      default: 'Create REST Project',
      type: String
    }
  },
  data() {
    return {
      localTemplateData: null,
      projectCreation: false,
      tableCreation: false,
      loaderMessagesIndex: 0,
      loaderMessages: [
        'Setting up new database configs',
        'Inferring database schema',
        'Generating APIs.',
        'Generating APIs..',
        'Generating APIs...',
        'Generating APIs....',
        'Please wait',
        'Please wait.',
        'Please wait..',
        'Please wait...',
        'Please wait..',
        'Please wait.',
        'Please wait',
        'Please wait.',
        'Please wait..',
        'Please wait...',
        'Please wait..',
        'Please wait.',
        'Please wait..',
        'Please wait...'
      ]
    }
  },
  watch: {
    templateData: {
      deep: true,
      handler(data) {
        this.localTemplateData = JSON.parse(JSON.stringify(data))
      }
    }
  },
  created() {
    this.localTemplateData = JSON.parse(JSON.stringify(this.templateData))
  },

  methods: {
    async useTemplate(projectType) {
      if (!this.valid) {
        return this.$toast.error(this.validationErrorMsg).goAway(3000)
      }

      // this.$emit('useTemplate', type)
      // this.projectCreation = true
      let interv
      try {
        interv = setInterval(() => {
          this.loaderMessagesIndex = this.loaderMessagesIndex < this.loaderMessages.length - 1 ? this.loaderMessagesIndex + 1 : 6
          this.$store.commit('loader/MutMessage', this.loaderMessages[this.loaderMessagesIndex])
        }, 1000)

        const projectId = this.$store.state.project.project.id
        let firstTable = null

        // Not available now
        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 {
          // Create tables
          try {
            for (const t of this.localTemplateData.tables) {
              // enrich system fields if not provided
              // e.g. id, created_at, updated_at
              const systemColumns = SqlUiFactory
                .create({ client: this.$store.state.project.project.bases[0].type })
                .getNewTableColumns()
                .filter(c => c.column_name !== 'title')

              for (const systemColumn of systemColumns) {
                if (!t.columns.some(c => c.column_name.toLowerCase() === systemColumn.column_name.toLowerCase())) {
                  t.columns.push(systemColumn)
                }
              }

              // set pk & rqd if ID is provided
              for (const column of t.columns) {
                if (column.column_name.toLowerCase() === 'id' && !('pk' in column)) {
                  column.pk = true
                  column.rqd = true
                  break
                }
              }

              // create table
              const table = await this.$api.dbTable.create(projectId, {
                table_name: t.table_name,
                title: '',
                columns: t.columns
              })
              t.table_title = table.title

              // open the first table after import
              if (firstTable === null) {
                firstTable = table
              }

              // set primary value
              await this.$api.dbTableColumn.primaryColumnSet(table.columns[0].id)
            }
            this.tableCreation = true
          } catch (e) {
            this.$toast
              .error(await this._extractSdkResponseErrorMsg(e))
              .goAway(3000)
            this.tableCreation = false
          } finally {
            clearInterval(interv)
          }
        }

        if (!this.tableCreation) {
          // failed to create table
          return
        }

        // Bulk import data
        if (this.importData) {
          this.$store.commit('loader/MutMessage', 'Importing excel data to project')
          await this.importDataToProject()
        }

        // reload table list
        this.$store.dispatch('project/_loadTables', {
          dbKey: '0.projectJson.envs._noco.db.0',
          key: '0.projectJson.envs._noco.db.0.tables',
          _nodes: {
            dbAlias: 'db',
            env: '_noco',
            type: 'tableDir'
          }
        }).then(() => {
          // add tab - choose the first one if multiple tables are created
          this.$store.dispatch('tabs/loadFirstCreatedTableTab', {
            title: firstTable.title
          }).then((item) => {
            // set active tab - choose the first one if multiple tables are created
            this.$nextTick(() => {
              this.$router.push({
                query: {
                  name: item.name || '',
                  dbalias: (item._nodes && item._nodes.dbAlias) || '',
                  type: (item._nodes && item._nodes.type) || 'table'
                }
              })
            })
          })
        })

        // confetti effect
        this.simpleAnim()
      } catch (e) {
        console.log(e)
        this.$toast
          .error(await this._extractSdkResponseErrorMsg(e))
          .goAway(3000)
      } finally {
        clearInterval(interv)
        this.$store.commit('loader/MutMessage', null)
        this.projectCreation = false
        this.tableCreation = false
        this.$emit('closeModal')
      }
    },
    async importDataToProject() {
      let total = 0
      let progress = 0
      const projectName = this.$store.state.project.project.title
      await Promise.all(this.localTemplateData.tables.map(v => (async(tableMeta) => {
        const tableName = tableMeta.table_title
        const data = this.importData[tableMeta.ref_table_name]
        total += data.length
        for (let i = 0; i < data.length; i += 500) {
          this.$store.commit('loader/MutMessage', `Importing data to ${projectName}: ${progress}/${total} records`)
          this.$store.commit('loader/MutProgress', Math.round(progress && 100 * progress / total))
          const batchData = this.remapColNames(data.slice(i, i + 500), tableMeta.columns)
          await this.$api.dbTableRow.bulkCreate(
            'noco',
            projectName,
            tableName,
            batchData
          )
          progress += batchData.length
        }
        this.$store.commit('loader/MutClear')
      })(v)))
    },
    remapColNames(batchData, columns) {
      return batchData.map(data => (columns || []).reduce((aggObj, col) => ({
        ...aggObj,
        [col.column_name]: data[col.ref_column_name || col.column_name]
      }), {})
      )
    },
    simpleAnim() {
      const count = 200
      const defaults = {
        origin: { y: 0.7 }
      }

      function fire(particleRatio, opts) {
        window.confetti(Object.assign({}, defaults, opts, {
          particleCount: Math.floor(count * particleRatio)
        }))
      }

      fire(0.25, {
        spread: 26,
        startVelocity: 55
      })
      fire(0.2, {
        spread: 60
      })
      fire(0.35, {
        spread: 100,
        decay: 0.91,
        scalar: 0.8
      })
      fire(0.1, {
        spread: 120,
        startVelocity: 25,
        decay: 0.92,
        scalar: 1.2
      })
      fire(0.1, {
        spread: 120,
        startVelocity: 45
      })
    }
  }
}
</script>

<style scoped>

</style>