nocodb/packages/nc-gui/components/projectList/createNewProjectBtn.vue

<template>
  <v-menu v-if="connectToExternalDB" offset-y bottom open-on-hover>
    <template #activator="{ on }">
      <slot :on="on">
        <div>
          <v-btn
            v-if="_isUIAllowed('projectCreate',true)"
            v-ge="['home', 'project-new']"
            :x-large="$vuetify.breakpoint.lgAndUp"
            :large="$vuetify.breakpoint.mdAndDown"
            data-v-step="1"
            outlined
            rounded
            color="primary"
            class="nc-new-project-menu elevation-3"
            v-on="on"
          >
            <v-icon class="mr-2">
              mdi-plus
            </v-icon>

            <!-- New Project -->
            {{ $t('title.newProj') }}
            <v-icon class="mr-1" small>
              mdi-menu-down
            </v-icon>
          </v-btn>
        </div>
      </slot>
    </template>
    <v-list dense>
      <v-list-item
        class="create-xc-db-project nc-create-xc-db-project"
        @click="onCreateProject('xcdb')"
      >
        <v-list-item-icon class="mr-2">
          <v-icon small color="blue">
            mdi-plus
          </v-icon>
        </v-list-item-icon>
        <v-list-item-title>
          <!-- Create -->
          <span>{{
            $t('general.create')
          }}</span>
        </v-list-item-title>
        <v-spacer />
        <v-tooltip right>
          <template #activator="{ on }">
            <v-icon
              x-small
              color="grey"
              class="ml-4"
              v-on="on"
            >
              mdi-information-outline
            </v-icon>
          </template>
          <!-- Create a new project -->
          <span class="caption">{{
            $t('tooltip.xcDB')
          }}</span>
        </v-tooltip>
      </v-list-item>
      <v-list-item
        title
        class="pt-2 create-external-db-project nc-create-external-db-project"
        @click="onCreateProject()"
      >
        <v-list-item-icon class="mr-2">
          <v-icon small color="green">
            mdi-database-outline
          </v-icon>
        </v-list-item-icon>
        <v-list-item-title>
          <!-- Create By Connecting <br>To An External Database -->
          <span
            style="line-height: 1.5em"
            v-html="
              $t('activity.createProjectExtended.extDB')
            "
          />
        </v-list-item-title>
        <v-spacer />
        <v-tooltip right>
          <template #activator="{ on }">
            <v-icon
              x-small
              color="grey"
              class="ml-4"
              v-on="on"
            >
              mdi-information-outline
            </v-icon>
          </template>
          <!-- Supports MySQL, PostgreSQL, SQL Server & SQLite -->
          <span class="caption">{{
            $t('tooltip.extDB')
          }}</span>
        </v-tooltip>
      </v-list-item>
    </v-list>
  </v-menu>
  <x-btn
    v-else-if="_isUIAllowed('projectCreate',true)"
    v-ge="['home', 'project-new']"
    outlined
    data-v-step="1"
    color="primary"
    @click="onCreateProject('xcdb')"
  >
    <!-- New Project -->
    {{ $t('title.newProj') }}
  </x-btn>
  <span v-else />
</template>

<script>
export default {
  name: 'CreateNewProjectBtn',
  computed: {
    connectToExternalDB() {
      return this.$store.state.project && this.$store.state.project.projectInfo && this.$store.state.project.projectInfo.connectToExternalDB
    }
  },
  methods: {
    onCreateProject(xcdb) {
      if (xcdb === 'xcdb') {
        this.$router.push('/project/xcdb')
        this.$tele.emit('project:create:xcdb:trigger')
      } else {
        this.$router.push('/project/0')
        this.$tele.emit('project:create:extdb:trigger')
      }
    }
  }
}
</script>

<style scoped>

</style>