nocodb/packages/nc-gui/components/ProjectTabs.vue

<template>
  <v-container
    fluid
    class="ph-no-capture project-container ma-0 pa-0"
    style="position: relative"
  >
    <v-tabs
      ref="projectTabs"
      v-model="activeTab"
      dark
      background-color="primary"
      height="40"
      class="project-tabs nc-project-tabs"
      color=""
      next-icon="mdi-arrow-right-bold-box-outline"
      prev-icon="mdi-arrow-left-bold-box-outline"
      show-arrows
      :class="{ 'dark-them': $store.state.settings.darkTheme }"
    >
      <v-tabs-slider color="" />

      <v-tab
        v-for="(tab, index) in tabs"
        :key="`${pid}||${(tab._nodes && tab._nodes).type || ''}||${
          (tab._nodes && tab._nodes.dbAlias) || ''
        }||${tab.name}`"
        class="divider project-tab xc-border-right"
        :title="tab.name"
        :href="`#${(tab._nodes && tab._nodes).type || ''}||${
          (tab._nodes && tab._nodes.dbAlias) || ''
        }||${tab.name}`"
        @change="tabActivated(tab)"
      >
        <v-icon v-if="treeViewIcons[tab._nodes.type]" icon :small="true">
          {{ treeViewIcons[tab._nodes.type].openIcon }}
        </v-icon>
        <span
          class="flex-grow-1 caption font-weight-bold text-capitalize mx-2"
          style="
            white-space: nowrap;
            overflow: hidden;
            max-width: 140px;
            text-overflow: ellipsis;
          "
        >{{ tab.name }}</span>
        <v-icon icon :small="true" @click="removeTab(index)">
          mdi-close
        </v-icon>
      </v-tab>

      <v-tabs-items :value="activeTab">
        <v-tab-item
          v-for="(tab, index) in tabs"
          :key="`${pid}||${(tab._nodes && tab._nodes).type || ''}||${
            (tab._nodes && tab._nodes.dbAlias) || ''
          }||${tab.name}`"
          class="nc-main-tab-item"
          :value="`${(tab._nodes && tab._nodes.type) || ''}||${
            (tab._nodes && tab._nodes.dbAlias) || ''
          }||${tab.name}`"
          :transition="false"
          style="height: 100%"
          :reverse-transition="false"
        >
          <div v-if="tab._nodes.type === 'table'" style="height: 100%">
            <TableView
              :ref="'tabs' + index"
              :is-active="
                activeTab ===
                  `${(tab._nodes && tab._nodes).type || ''}||${
                    (tab._nodes && tab._nodes.dbAlias) || ''
                  }||${tab.name}`
              "
              :tab-id="`${pid}||${(tab._nodes && tab._nodes).type || ''}||${
                (tab._nodes && tab._nodes.dbAlias) || ''
              }||${tab.name}`"
              :hide-log-windows.sync="hideLogWindows"
              :nodes="tab._nodes"
            />
          </div>
          <div v-else-if="tab._nodes.type === 'view'" style="height: 100%">
            <TableView
              :ref="'tabs' + index"
              :is-active="
                activeTab ===
                  `${(tab._nodes && tab._nodes).type || ''}||${
                    (tab._nodes && tab._nodes.dbAlias) || ''
                  }||${tab.name}`
              "
              :tab-id="`${pid}||${(tab._nodes && tab._nodes).type || ''}||${
                (tab._nodes && tab._nodes.dbAlias) || ''
              }||${tab.name}`"
              :hide-log-windows.sync="hideLogWindows"
              :nodes="tab._nodes"
              is-view
            />
            <!--            </sqlLogAndOutput>-->
          </div>
          <div v-else-if="tab._nodes.type === 'function'" style="height: 100%">
            <sqlLogAndOutput>
              <FunctionTab :ref="'tabs' + index" :nodes="tab._nodes" />
            </sqlLogAndOutput>
          </div>
          <div v-else-if="tab._nodes.type === 'procedure'" style="height: 100%">
            <sqlLogAndOutput>
              <ProcedureTab :ref="'tabs' + index" :nodes="tab._nodes" />
            </sqlLogAndOutput>
          </div>
          <div v-else-if="tab._nodes.type === 'sequence'" style="height: 100%">
            <sqlLogAndOutput>
              <SequenceTab :ref="'tabs' + index" :nodes="tab._nodes" />
            </sqlLogAndOutput>
          </div>
          <div v-else-if="tab._nodes.type === 'db'" style="height: 100%">
            <audit-tab
              :ref="'tabs' + index"
              class="backgroundColor"
              :nodes="tab._nodes"
            />
          </div>
          <div
            v-else-if="tab._nodes.type === 'seedParserDir'"
            style="height: 100%"
          >
            <sqlLogAndOutput>
              <SeedTab :ref="'tabs' + index" :nodes="tab._nodes" />
            </sqlLogAndOutput>
          </div>
          <div
            v-else-if="tab._nodes.type === 'migrationsDir'"
            style="height: 100%"
          >
            <audit-tab
              :ref="'tabs' + index"
              class="backgroundColor"
              :nodes="tab._nodes"
            />
          </div>
          <div v-else-if="tab._nodes.type === 'apisDir'" style="height: 100%">
            <ApisTab
              :ref="'tabs' + index"
              class="backgroundColor"
              :nodes="tab._nodes"
            />
          </div>
          <div
            v-else-if="tab._nodes.type === 'apiClientDir'"
            style="height: 100%"
          >
            <ApiClientTab :ref="'tabs' + index" :nodes="tab._nodes" />
          </div>
          <div
            v-else-if="tab._nodes.type === 'apiClientSwaggerDir'"
            style="height: 100%"
          >
            <ApiClientSwaggerTab :ref="'tabs' + index" :nodes="tab._nodes" />
          </div>
          <div
            v-else-if="tab._nodes.type === 'sqlClientDir'"
            style="height: 100%"
          >
            <sqlLogAndOutput>
              <SqlClientTab :ref="'tabs' + index" :nodes="tab._nodes" />
            </sqlLogAndOutput>
          </div>
          <div v-else-if="tab._nodes.type === 'terminal'" style="height: 100%">
            <x-term :ref="'tabs' + index" style="height: 100%" />
          </div>
          <div
            v-else-if="tab._nodes.type === 'graphqlClientDir'"
            style="height: 100%"
          >
            <graphql-client class="backgroundColor" style="height: 100%" />
          </div>
          <div
            v-else-if="tab._nodes.type === 'swaggerClientDir'"
            style="height: 100%"
          >
            <swagger-client style="height: 100%" />
          </div>
          <div
            v-else-if="tab._nodes.type === 'grpcClient'"
            style="height: 100%"
          >
            <grpc-client style="height: 100%" />
          </div>
          <div v-else-if="tab._nodes.type === 'meta'" style="height: 100%">
            <xc-meta class="backgroundColor" style="height: 100%" />
          </div>
          <div v-else-if="tab._nodes.type === 'roles'" style="height: 100%">
            <auth-tab
              v-if="_isUIAllowed('team-auth')"
              class="backgroundColor"
              :nodes="tab._nodes"
              style="height: 100%"
            />
          </div>
          <div v-else-if="tab._nodes.type === 'acl'" style="height: 100%">
            <global-acl
              class="backgroundColor"
              :nodes="tab._nodes"
              style="height: 100%"
            />
          </div>
          <div
            v-else-if="tab._nodes.type === 'projectSettings'"
            style="height: 100%"
          >
            <project-settings
              v-if="_isUIAllowed('settings')"
              class="backgroundColor"
              :nodes="tab._nodes"
              style="height: 100%"
            />
          </div>
          <div
            v-else-if="tab._nodes.type === 'disableOrEnableModel'"
            style="height: 100%"
          >
            <disable-or-enable-models
              v-if="_isUIAllowed('project-metadata')"
              class="backgroundColor"
              :nodes="tab._nodes"
              style="height: 100%"
            />
          </div>
          <div v-else-if="tab._nodes.type === 'cronJobs'" style="height: 100%">
            <cron-jobs :nodes="tab._nodes" style="height: 100%" />
          </div>
          <div
            v-else-if="tab._nodes.type === 'projectInfo'"
            style="height: 100%"
          >
            <xc-info :nodes="tab._nodes" class="h-100" />
          </div>
          <div v-else-if="tab._nodes.type === 'appStore'" style="height: 100%">
            <app-store :nodes="tab._nodes" class="backgroundColor h-100" />
          </div>
          <div v-else style="height: 100%">
            <h1>{{ tab.name }}</h1>
            <h1>{{ tab._nodes }}</h1>
          </div>
        </v-tab-item>
      </v-tabs-items>

      <!-- Add / Import -->
      <v-menu v-if="_isUIAllowed('addOrImport')" offset-y>
        <template #activator="{ on }">
          <v-btn
            color="primary"
            style="height: 100%; padding: 5px;"
            v-on="on"
          >
            <x-icon
              icon-class="add-btn"
              :color="['white', 'grey lighten-2']"
            >
              mdi-plus-box
            </x-icon>
            <span class="flex-grow-1 caption font-weight-bold text-capitalize mx-2">
              <!-- TODO: i18n -->
              Add / Import
            </span>
            <v-spacer />
          </v-btn>
        </template>
        <v-list class="addOrImport">
          <v-list-item
            v-if="_isUIAllowed('addTable')"
            v-t="['a:table:import-from-excel']"
            @click="dialogCreateTableShowMethod"
          >
            <v-list-item-title>
              <v-icon small>
                mdi-table
              </v-icon>
              <span class="caption">
                <!-- Add new table -->
                {{ $t('tooltip.addTable') }}
              </span>
            </v-list-item-title>
          </v-list-item>
          <v-divider class="my-1" />
          <v-subheader class="caption" style="height:35px">
            QUICK IMPORT FROM
          </v-subheader>

          <v-list-item
            v-if="_isUIAllowed('airtableImport')"
            v-t="['a:actions:import-airtable']"
            @click="airtableImportModal = true"
          >
            <v-list-item-title>
              <v-icon small>
                mdi-table-large
              </v-icon>
              <span class="caption">
                <!-- TODO: i18n -->
                Airtable
              </span>
            </v-list-item-title>
          </v-list-item>
          <v-list-item
            v-if="_isUIAllowed('csvQuickImport')"
            v-t="['a:actions:import-csv']"
            @click="onImportFromExcelOrCSV('csv')"
          >
            <v-list-item-title>
              <v-icon small>
                mdi-file-document-outline
              </v-icon>
              <span class="caption">
                <!-- TODO: i18n -->
                CSV file
              </span>
            </v-list-item-title>
          </v-list-item>
          <v-list-item
            v-if="_isUIAllowed('jsonImport')"
            v-t="['a:actions:import-json']"
            @click="jsonImportModal = true"
          >
            <v-list-item-title>
              <v-icon small>
                mdi-code-json
              </v-icon>
              <span class="caption">
                <!-- TODO: i18n -->
                JSON file
              </span>
            </v-list-item-title>
          </v-list-item>
          <v-list-item
            v-if="_isUIAllowed('excelQuickImport')"
            v-t="['a:actions:import-excel']"
            @click="onImportFromExcelOrCSV('excel')"
          >
            <v-list-item-title>
              <v-icon small>
                mdi-file-excel
              </v-icon>
              <span class="caption">
                <!-- TODO: i18n -->
                Microsoft Excel
              </span>
            </v-list-item-title>
          </v-list-item>

          <v-divider class="my-1" />

          <v-list-item
            v-if="_isUIAllowed('importRequest')"
            v-t="['e:datasource:import-request']"
            href="https://github.com/nocodb/nocodb/issues/2052"
            target="_blank"
          >
            <v-list-item-title>
              <v-icon small>
                mdi-open-in-new
              </v-icon>
              <span class="caption">
                <!-- TODO: i18n -->
                Request a data source you need ?
              </span>
            </v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
    </v-tabs>
    <!-- Create Empty Table -->
    <dlg-table-create
      v-if="dialogCreateTableShow"
      v-model="dialogCreateTableShow"
      @create="
        $emit('tableCreate', $event);
        dialogCreateTableShow = false;
      "
    />
    <!-- Import From Excel / CSV -->
    <quick-import
      ref="quickImport"
      v-model="quickImportModal"
      :quick-import-type="quickImportType"
      hide-label
      @closeModal="quickImportModal = false"
    />

    <!-- Import From JSON string / file -->
    <json-import
      v-model="jsonImportModal"
      hide-label
      @closeModal="jsonImportModal = false"
    />

    <import-from-airtable v-if="airtableImportModal" v-model="airtableImportModal" />
  </v-container>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import treeViewIcons from '../helpers/treeViewIcons'
import TableView from './project/Table'
import FunctionTab from './project/Function'
import ProcedureTab from './project/Procedure'
import SequenceTab from './project/Sequence'
import SeedTab from './project/Seed'
import SqlClientTab from './project/SqlClient'
import ApisTab from './project/Apis'
import ApiClientTab from './project/ApiClientOld'
import sqlLogAndOutput from './project/SqlLogAndOutput'
import graphqlClient from './project/GraphqlClient'
import xTerm from './XTerm'

import ApiClientSwaggerTab from './project/ApiClientSwagger'
import XcMeta from './project/settings/XcMeta'
import XcInfo from './project/XcInfo'
import SwaggerClient from '~/components/project/SwaggerClient'
import DlgTableCreate from '~/components/utils/DlgTableCreate'
import AppStore from '~/components/project/AppStore'
import AuthTab from '~/components/AuthTab'
import CronJobs from '~/components/project/CronJobs'
import DisableOrEnableModels from '~/components/project/projectMetadata/DisableOrEnableModels'
import ProjectSettings from '~/components/project/ProjectSettings'
import GrpcClient from '~/components/project/GrpcClient'
import GlobalAcl from '~/components/GlobalAcl'
import AuditTab from '~/components/project/AuditTab'
import QuickImport from '~/components/import/QuickImport'
import ImportFromAirtable from '~/components/import/ImportFromAirtable'
import JsonImport from '~/components/import/JSONImport'

export default {
  components: {
    JsonImport,
    ImportFromAirtable,
    SwaggerClient,
    // Screensaver,
    DlgTableCreate,
    AuditTab,
    AppStore,
    XcInfo,
    AuthTab,
    CronJobs,
    DisableOrEnableModels,
    // CreateOrEditProject,
    ProjectSettings,
    GrpcClient,
    GlobalAcl,
    // Roles,
    XcMeta,
    ApiClientSwaggerTab,
    TableView,
    FunctionTab,
    ProcedureTab,
    ApisTab,
    SqlClientTab,
    ApiClientTab,
    SeedTab,
    SequenceTab,
    sqlLogAndOutput,
    xTerm,
    graphqlClient,
    QuickImport
  },
  data() {
    return {
      dragOver: false,
      dialogCreateTableShow: false,
      test: '',
      treeViewIcons,
      hideLogWindows: false,
      showScreensaver: false,
      quickImportModal: false,
      quickImportType: '',
      airtableImportModal: false,
      jsonImportModal: false
    }
  },
  methods: {
    dialogCreateTableShowMethod() {
      this.dialogCreateTableShow = true
      this.$e('c:table:create:navbar')
    },
    checkInactiveState() {
      let position = 0
      let idleTime = 0
      // Increment the idle time counter every minute.
      let idleInterval = setInterval(timerIncrement, 1000)

      const self = this
      // Zero the idle timer on mouse movement.
      document.addEventListener('mousemove', (e) => {
        self.showScreensaver = false
        idleTime = 0
        clearInterval(idleInterval)
        idleInterval = setInterval(timerIncrement, 1000)
      })
      document.addEventListener('keypress', (e) => {
        self.showScreensaver = false
        idleTime = 0
        clearInterval(idleInterval)
        idleInterval = setInterval(timerIncrement, 1000)
      })

      function timerIncrement() {
        idleTime = idleTime + 1
        if (idleTime > 120) {
          const title = document.title

          function scrolltitle() {
            document.title = title + Array(position).fill(' .').join('')
            position = ++position % 3
            if (self.showScreensaver) {
              window.setTimeout(scrolltitle, 400)
            } else {
              document.title = title
            }
          }

          self.showScreensaver = self.$store.state.settings.screensaver
          scrolltitle()
          clearInterval(idleInterval)
        }
      }
    },
    async handleKeyDown(event) {
      const activeTabEleKey = `tabs${this.activeTab}`
      let isHandled = false

      if (
        this.$refs[activeTabEleKey] &&
        this.$refs[activeTabEleKey][0] &&
        this.$refs[activeTabEleKey][0].handleKeyDown
      ) {
        isHandled = await this.$refs[activeTabEleKey][0].handleKeyDown(event)
      }
      if (!isHandled) {
        switch (
          [this._isMac ? event.metaKey : event.ctrlKey, event.key].join('_')
        ) {
          case 'true_w':
            this.removeTab(this.activeTab)
            event.preventDefault()
            event.stopPropagation()
            break
        }
      }
    },
    ...mapMutations({
      setActiveTab: 'tabs/active',
      removeTab: 'tabs/remove',
      updateActiveTabx: 'tabs/activeTabCtx'
    }),
    tabActivated(tab) {},
    onImportFromExcelOrCSV(quickImportType) {
      this.quickImportModal = true
      this.quickImportType = quickImportType
    },
    onAirtableImport() {
      this.airtableImportModal = true
    }
  },
  computed: {
    ...mapGetters({ tabs: 'tabs/list', activeTabCtx: 'tabs/activeTabCtx' }),
    pid() {
      return this.$route.params.project_id
    },
    activeTab: {
      set(tab) {
        if (!tab) {
          return this.$router.push({
            query: {}
          })
        }
        const [type, dbalias, name] = tab.split('||')
        this.$router.push({
          query: {
            ...this.$route.query,
            type,
            dbalias,
            name
          }
        })
      },
      get() {
        return [
          this.$route.query.type,
          this.$route.query.dbalias,
          this.$route.query.name
        ].join('||')
      }
    }
  },

  beforeCreated() {},
  watch: {},
  created() {
    document.addEventListener('keydown', this.handleKeyDown)
    /**
     * Listening for tab change so that we can hide/show projectlogs based on tab
     */
  },
  mounted() {
    if (this.$route && this.$route.query && this.$route.query.excelUrl) {
      this.quickImportModal = true
    }
  },
  beforeDestroy() {},
  destroyed() {
    document.removeEventListener('keydown', this.handleKeyDown)
  },
  directives: {},
  validate({ params }) {
    return true
  },
  head() {
    return {}
  },
  props: {}
}
</script>

<style scoped>

/deep/ .project-tabs .v-tabs-bar {
  max-height: 30px;
}

/deep/ .project-tabs > .v-tabs-bar {
  max-height: 30px;
}
/deep/ .v-window__container .v-window-item {
  height: 100%;
}

/deep/ .project-tabs .v-tab.project-tab {
  text-transform: capitalize;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  background: #0002;
  margin: 0px 1px 0 1px;
  color: white !important;
}

/deep/ .project-tabs .v-tab.v-tab--active.project-tab {
  background-color: white !important;
  color: rgba(51, 51, 51, 1) !important;
}

/deep/ .project-tabs.dark-them .v-tab.v-tab--active.project-tab {
  background-color: #272727 !important;
  color: white !important;
}

/deep/ .project-tabs > div > div > div > div > .v-tabs-slider {
  color: transparent !important;
}

/deep/ .project-tabs .v-btn {
  text-transform: capitalize;
}

.powered-by .powered-by-close {
  opacity: 0;
  transition: 0.4s opacity;
}

.powered-by a {
  transition: 0.1s font-weight;
}

.powered-by:hover .powered-by-close {
  opacity: 1;
}

.powered-by:hover a {
  font-weight: bold;
}

.addOrImport {
  min-width: 200px;
}

.addOrImport .v-list-item {
  min-height: 35px;
}

/deep/ .add-btn {
  margin-left: 5px;
}

/deep/ .screensaver.body {
  position: absolute;
}

/deep/ .project-tab:first-of-type {
  margin-left: 0 !important;
}

/deep/ .nc-main-tab-item:not(.v-window-item--active){
  display:none;
}
</style>
<!--
/**
 * @copyright Copyright (c) 2021, Xgene Cloud Ltd
 *
 * @author Naveen MR <oof1lab@gmail.com>
 * @author Pranav C Balan <pranavxc@gmail.com>
 * @author Wing-Kam Wong <wingkwong.code@gmail.com>
 *
 * @license GNU AGPL version 3 or any later version
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program. If not, see <http://www.gnu.org/licenses/>.
 *
 */
-->