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

<template>
  <div style="height: 100%" class="nc-tree-view" @mouseenter="onMiniHoverEnter" @mouseleave="onMiniHoverLeave">
    <!--    :expand-on-hover="mini"-->
    <div class="primary nc-project-title theme--dark" :class="{ shared: sharedBase }">
      <img v-if="sharedBase" src="favicon-32.png" height="18" class="ml-2" />
      <h3 v-if="sharedBase" class="nc-project-title white--text text-capitalize">
        {{ $store.getters['project/GtrProjectName'] }}
      </h3>
      <github-star-btn v-else />
    </div>
    <v-navigation-drawer
      ref="drawer"
      v-model="navigation.shown"
      permanent
      mini-variant-width="50"
      class="nc-nav-drawer"
      style="min-width: 100%; height: calc(100% - 30px)"
    >
      <div class="h-100 d-flex flex-column">
        <div class="flex-grow-1" style="overflow-y: auto; min-height: 200px">
          <v-skeleton-loader v-if="!projects || !projects.length" class="mt-2 ml-2" type="button" />
          <v-text-field
            v-else
            v-model="search"
            :placeholder="$t('placeholder.searchProjectTree')"
            dense
            hide-details
            class="elevation-0 mr-2 pl-3 pr-1 caption nc-table-list-filter"
          >
            <template #prepend-inner>
              <v-icon small class="mt-2 ml-2 mr-1"> mdi-magnify </v-icon>
            </template>
            <template #append>
              <v-icon v-if="search" class="mt-3 mr-3" color="grey" x-small @click="search = ''"> mdi-close </v-icon>
            </template>
          </v-text-field>

          <v-skeleton-loader
            v-if="!projects || !projects.length"
            type="list-item,list-item-three-line@3,list-item@2,list-item-three-line@3"
          />

          <!--          <v-treeview
            v-else-if="isTreeView"
            v-model="tree"
            class="mt-5 project-tree nc-project-tree"
            dense
            :open.sync="open"
            :active.sync="active"
            :items="projects"
            :search="search"
            :filter="filter"
            item-key="_nodes.key"
            open-on-click
            color="primary"
          >
            <template #label="{ item, open, leaf }">
              <v-tooltip
                :bottom="!!item.tooltip"
                :right="!item.tooltip"
                :disabled="!item.tooltip && false"
              >
                <template #activator="{ on }">
                  <div
                    v-if="!hideNode[item._nodes.type]"
                    v-on="item.tooltip || true ? on : ''"
                    @contextmenu.prevent="showCTXMenu($event, item, open, leaf)"
                    @click.stop="addTab({ ...item }, open, leaf)"
                  >
                    <template v-if="item._nodes.type === 'db'">
                      <v-icon size="16">
                        mdi-database
                      </v-icon>
                      &lt;!&ndash;                  <img&ndash;&gt;
                      &lt;!&ndash;                    class="grey lighten-3"&ndash;&gt;
                      &lt;!&ndash;                    :width="16" :src="`/db-icons/${dbIcons[item._nodes.dbConnection.client]}`"/>&ndash;&gt;
                    </template>
                    <template v-else>
                      <v-icon
                        v-if="open && icons[item._nodes.type].openIcon"
                        small
                        style="cursor: auto"
                        :color="icons[item._nodes.type].openColor"
                      >
                        {{ icons[item._nodes.type].openIcon }}
                      </v-icon>
                      <v-icon
                        v-else
                        small
                        style="cursor: auto"
                        :color="icons[item._nodes.type].color"
                      >
                        {{ icons[item._nodes.type].icon }}
                      </v-icon>
                    </template>
                    <span
                      class="v-treeview-node__label body-2"
                      :class="[
                        icons[item._nodes.type].class,
                        item.active ? 'font-weight-bold' : '',
                      ]"
                    >{{ item.name }}</span>
                  </div>
                </template>
                <span>{{ item.tooltip || item.name }}</span>
              </v-tooltip>
            </template>
          </v-treeview>-->
          <v-container v-else fluid class="px-1 pt-0">
            <v-list height="30" dense expand class="nc-project-tree nc-single-env-project-tree pt-1">
              <template v-for="item in listViewArr">
                <!--                   v-if="item.children && item.children.length"-->
                <v-list-group
                  v-if="isNested(item) && showNode(item)"
                  :key="item.type"
                  color="textColor"
                  :value="isActiveList(item) || search"
                  @click="!(item.children && item.children.length) && addTab({ ...item }, false, false)"
                  @contextmenu.prevent="showCTXMenu($event, item, true, false)"
                >
                  <template #appendIcon>
                    <v-icon small color="grey"> mdi-chevron-down </v-icon>
                  </template>
                  <template #activator>
                    <v-list-item-icon>
                      <v-icon
                        v-if="icons[item._nodes.type].openIcon"
                        small
                        style="cursor: auto"
                        :color="icons[item._nodes.type].openColor"
                      >
                        {{ icons[item._nodes.type].openIcon }}
                      </v-icon>
                      <v-icon v-else small style="cursor: auto" :color="icons[item._nodes.type].color">
                        {{ icons[item._nodes.type].icon }}
                      </v-icon>
                    </v-list-item-icon>
                    <v-list-item-title>
                      <v-tooltip v-if="!isNonAdminAccessAllowed(item)" top>
                        <template #activator="{ on }">
                          <span v-if="item.type === 'tableDir'" class="body-2 font-weight-medium" v-on="on">
                            {{ $t('objects.tables')
                            }}<template v-if="item.children && item.children.length">
                              ({{
                                item.children.filter(
                                  child => !search || child.name.toLowerCase().includes(search.toLowerCase())
                                ).length
                              }})</template
                            ></span
                          >
                          <span v-else class="body-2 font-weight-medium" v-on="on"> {{ item.name }}</span>
                        </template>
                        <span class="caption">Only visible to Creator</span>
                      </v-tooltip>
                      <template v-else>
                        <span v-if="item.type === 'tableDir'" class="body-2 font-weight-medium">
                          {{ $t('objects.tables')
                          }}<template v-if="item.children && item.children.length">
                            ({{
                              item.children.filter(
                                child => !search || child.name.toLowerCase().includes(search.toLowerCase())
                              ).length
                            }})</template
                          ></span
                        >
                        <span v-else class="caption font-weight-regular"> {{ item.name }}</span>
                      </template>
                    </v-list-item-title>

                    <v-spacer />

                    <v-tooltip bottom>
                      <template #activator="{ on }">
                        <x-icon
                          v-if="_isUIAllowed('treeview-add-button') && item.type !== 'viewDir'"
                          :color="['x-active', 'grey']"
                          small
                          v-on="on"
                          @click.prevent.stop="handleCreateBtnClick(item.type, item)"
                        >
                          mdi-plus-circle-outline
                        </x-icon>
                      </template>
                      <span class="caption"
                        >Add new <span class="text-capitalize">{{ item.type.slice(0, -3) }}</span></span
                      >
                    </v-tooltip>
                  </template>

                  <v-list-item-group :value="selectedItem">
                    <component
                      :is="_isUIAllowed('treeview-drag-n-drop') ? 'draggable' : 'div'"
                      v-model="item.children"
                      draggable="div"
                      v-bind="dragOptions"
                      @change="onMove($event, item.children)"
                    >
                      <transition-group type="transition" :name="!drag ? 'flip-list' : null">
                        <v-list-item
                          v-for="child in item.children || []"
                          v-show="!search || child.name.toLowerCase().includes(search.toLowerCase())"
                          :key="child.key"
                          v-t="['a:table:open']"
                          color="x-active"
                          active-class="font-weight-bold"
                          :selectable="true"
                          dense
                          :value="`${(child._nodes && child._nodes).type || ''}||${
                            (child._nodes && child._nodes.dbAlias) || ''
                          }||${child.name}`"
                          class="nested ml-3 nc-draggable-child"
                          style="position: relative"
                          @click.stop="addTab({ ...child }, false, true)"
                          @contextmenu="showCTXMenu($event, child, false, true)"
                        >
                          <v-icon
                            v-if="_isUIAllowed('treeview-drag-n-drop')"
                            small
                            :class="`nc-child-draggable-icon nc-child-draggable-icon-${child.name}`"
                          >
                            mdi-drag-vertical
                          </v-icon>

                          <v-list-item-icon>
                            <v-icon
                              v-if="icons[child._nodes.type].openIcon"
                              style="cursor: auto"
                              x-small
                              :color="icons[child._nodes.type].openColor"
                            >
                              {{ icons[child._nodes.type].openIcon }}
                            </v-icon>
                            <v-icon v-else x-small style="cursor: auto" :color="icons[child._nodes.type].color">
                              {{ icons[child._nodes.type].icon }}
                            </v-icon>
                          </v-list-item-icon>
                          <v-list-item-title>
                            <v-tooltip v-if="_isUIAllowed('creator_tooltip') && child.creator_tooltip" bottom>
                              <template #activator="{ on }">
                                <span class="caption" v-on="on" @dblclick="showSqlClient = true">
                                  {{ child.name }}
                                </span>
                              </template>
                              <span class="caption">{{ child.creator_tooltip }}</span>
                            </v-tooltip>
                            <span v-else class="caption">{{ child.name }}</span>
                          </v-list-item-title>
                          <template v-if="child.type === 'table'">
                            <v-spacer />
                            <div class="action d-flex" @click.stop>
                              <v-menu>
                                <template #activator="{ on }">
                                  <v-icon
                                    v-if="_isUIAllowed('treeview-rename-button') || _isUIAllowed('ui-acl')"
                                    small
                                    v-on="on"
                                  >
                                    mdi-dots-vertical
                                  </v-icon>
                                </template>

                                <v-list dense>
                                  <v-list-item
                                    v-if="_isUIAllowed('treeview-rename-button')"
                                    v-t="['c:table:rename:navdraw:options']"
                                    dense
                                    @click="
                                      menuItem = child;
                                      dialogRenameTable.cookie = child;
                                      dialogRenameTable.dialogShow = true;
                                      dialogRenameTable.defaultValue = child.name;
                                    "
                                  >
                                    <v-list-item-icon>
                                      <v-icon x-small> mdi-pencil-outline </v-icon>
                                    </v-list-item-icon>
                                    <v-list-item-title>
                                      <span classs="caption">
                                        <!--Rename-->
                                        {{ $t('general.rename') }}
                                      </span>
                                    </v-list-item-title>
                                  </v-list-item>
                                  <v-list-item
                                    v-if="_isUIAllowed('ui-acl')"
                                    v-t="['c:table:ui-acl']"
                                    dense
                                    @click="openUIACL(child)"
                                  >
                                    <v-list-item-icon>
                                      <v-icon x-small> mdi-shield-outline </v-icon>
                                    </v-list-item-icon>
                                    <v-list-item-title>
                                      <span classs="caption">
                                        <!--UI ACL-->
                                        {{ $t('labels.uiAcl') }}
                                      </span>
                                    </v-list-item-title>
                                  </v-list-item>
                                  <v-list-item
                                    v-if="_isUIAllowed('table-delete')"
                                    dense
                                    @click="checkAndDeleteTable(child)"
                                  >
                                    <v-list-item-icon>
                                      <v-icon x-small> mdi-delete-outline </v-icon>
                                    </v-list-item-icon>
                                    <v-list-item-title>
                                      <span classs="caption">Delete</span>
                                    </v-list-item-title>
                                  </v-list-item>
                                </v-list>
                              </v-menu>
                              <!--                          <v-icon @click.stop="" x-small>mdi-delete-outline</v-icon>-->
                            </div>
                          </template>
                        </v-list-item>
                      </transition-group>
                    </component>
                  </v-list-item-group>
                </v-list-group>
                <v-list-item
                  v-else-if="
                    (item.type !== 'sqlClientDir' || showSqlClient) &&
                    (item.type !== 'migrationsDir' || _isUIAllowed('audit'))
                  "
                  :key="item.key"
                  :selectable="false"
                  :value="`${(item._nodes && item._nodes).type || ''}||${(item._nodes && item._nodes.dbAlias) || ''}||${
                    item.name
                  }`"
                  :class="`nc-treeview-item-${item.name}`"
                  @click.stop="addTab({ ...item }, false, false)"
                  @contextmenu.prevent="showCTXMenu($event, item, false, false)"
                >
                  <v-list-item-icon>
                    <v-icon
                      v-if="icons[item._nodes.type].openIcon"
                      small
                      style="cursor: auto"
                      :color="icons[item._nodes.type].openColor"
                    >
                      {{ icons[item._nodes.type].openIcon }}
                    </v-icon>
                    <v-icon v-else small style="cursor: auto" :color="icons[item._nodes.type].color">
                      {{ icons[item._nodes.type].icon }}
                    </v-icon>
                  </v-list-item-icon>
                  <v-list-item-title>
                    <v-tooltip v-if="!isNonAdminAccessAllowed(item)" top>
                      <template #activator="{ on }">
                        <span class="caption font-weight-regular" v-on="on" @dblclick="showSqlClient = true">{{
                          item.name
                        }}</span>
                      </template>
                      <span class="caption">Only visible to Creator</span>
                    </v-tooltip>
                    <span v-else class="caption font-weight-regular" @dblclick="showSqlClient = true">{{
                      item.name
                    }}</span>
                  </v-list-item-title>
                </v-list-item>
              </template>
            </v-list>
          </v-container>
          <recursive-menu
            v-model="menuVisible"
            offset-y
            :items="ctxMenuOptions()"
            :position-x="x"
            :position-y="y"
            @click="handleCTXMenuClick($event.value)"
          />
        </div>
        <div class="pr-3 advance-menu d-none" :class="{ 'pl-3': !mini }">
          <v-divider v-if="_isUIAllowed('treeViewProjectSettings')" />

          <v-list v-if="_isUIAllowed('treeViewProjectSettings')" dense :class="{ 'advanced-border': overShieldIcon }">
            <v-list-item>
              <v-list-item-title>
                <!-- Settings -->
                <span class="body-2 font-weight-medium">{{ $t('activity.settings') }}</span>
                <v-tooltip top>
                  <template #activator="{ on }">
                    <x-icon
                      class="mt-n1"
                      color="pink textColor"
                      icon-class="ml-2"
                      small
                      v-on="on"
                      @mouseenter="overShieldIcon = true"
                      @mouseleave="overShieldIcon = false"
                    >
                      mdi-shield-lock-outline
                    </x-icon>
                  </template>
                  <!-- Only visible to Creator -->
                  <span class="caption">{{ $t('msg.info.onlyCreator') }}</span>
                </v-tooltip>
              </v-list-item-title>
            </v-list-item>

            <template v-if="_isUIAllowed('treeViewProjectSettings')">
              <v-tooltip bottom>
                <template #activator="{ on }">
                  <v-list-item
                    v-t="['c:settings:appstore']"
                    dense
                    class="body-2 nc-settings-appstore"
                    @click="appsTabAdd"
                    v-on="on"
                  >
                    <v-list-item-icon>
                      <v-icon x-small> mdi-storefront-outline </v-icon>
                    </v-list-item-icon>
                    <!-- App Store -->
                    <v-list-item-title>
                      <span class="font-weight-regular caption">{{ $t('title.appStore') }}</span>
                    </v-list-item-title>
                  </v-list-item>
                </template>
                <!-- App Store -->
                {{ $t('title.appStore') }}
              </v-tooltip>

              <v-tooltip bottom>
                <template #activator="{ on }">
                  <v-list-item
                    v-t="['c:settings:team-auth']"
                    dense
                    class="body-2 nc-settings-teamauth"
                    @click="rolesTabAdd"
                    v-on="on"
                  >
                    <v-list-item-icon>
                      <v-icon x-small> mdi-account-group </v-icon>
                    </v-list-item-icon>
                    <!-- Team & Auth -->
                    <v-list-item-title>
                      <span class="font-weight-regular caption">{{ $t('title.teamAndAuth') }}</span>
                    </v-list-item-title>
                  </v-list-item>
                </template>
                <!-- Roles & Users Management -->
                {{ $t('title.rolesUserMgmt') }}
              </v-tooltip>
              <v-tooltip bottom>
                <template #activator="{ on }">
                  <v-list-item
                    v-t="['c:settings:proj-metadata']"
                    dense
                    class="body-2 nc-settings-projmeta"
                    @click="disableOrEnableModelTabAdd"
                    v-on="on"
                  >
                    <v-list-item-icon>
                      <v-icon x-small> mdi-table-multiple </v-icon>
                    </v-list-item-icon>
                    <!-- Project Metadata -->
                    <v-list-item-title>
                      <span class="font-weight-regular caption">{{ $t('title.projMeta') }}</span>
                    </v-list-item-title>
                  </v-list-item>
                </template>
                <!-- Meta Management -->
                {{ $t('title.metaMgmt') }}
              </v-tooltip>

              <v-tooltip bottom>
                <template #activator="{ on }">
                  <v-list-item
                    v-t="['c:settings:audit']"
                    dense
                    class="body-2 nc-settings-audit"
                    @click="openAuditTab"
                    v-on="on"
                  >
                    <v-list-item-icon>
                      <v-icon x-small> mdi-notebook-outline </v-icon>
                    </v-list-item-icon>
                    <!-- Project Metadata -->
                    <v-list-item-title>
                      <span class="font-weight-regular caption">{{ $t('title.audit') }}</span>
                    </v-list-item-title>
                  </v-list-item>
                </template>
                <!-- Meta Management -->
                {{ $t('title.auditLogs') }}
              </v-tooltip>
            </template>
          </v-list>
          <v-divider />

          <v-list v-if="_isUIAllowed('previewAs') || previewAs" dense>
            <v-list-item>
              <!-- Preview as -->
              <span class="body-2 font-weight-medium">{{ $t('activity.previewAs') }}</span>
              <v-icon small class="ml-1"> mdi-drama-masks </v-icon>
            </v-list-item>

            <v-list dense>
              <div class="mx-4 d-flex align-center mb-2">
                <template v-for="(role, i) in rolesList">
                  <v-divider v-if="i" :key="i" vertical class="mx-2 caption grey--text" />
                  <div
                    :key="role.title"
                    :class="`pointer text-center nc-preview-${role.title}`"
                    @click="setPreviewUSer(role.title)"
                  >
                    <v-icon small class="mr-1" :color="role.title === previewAs ? 'x-active' : ''">
                      {{ roleIcon[role.title] }}
                    </v-icon>
                    <span class="caption text-capitalize" :class="{ 'x-active--text': role.title === previewAs }">{{
                      role.title
                    }}</span>
                  </div>
                </template>
              </div>
              <template v-if="previewAs">
                <!--                <v-divider></v-divider>-->
                <v-list-item @click="setPreviewUSer(null)">
                  <v-icon small class="mr-1"> mdi-close </v-icon>
                  <!-- Reset Preview -->
                  <span class="caption nc-preview-reset">{{ $t('activity.resetReview') }}</span>
                </v-list-item>
              </template>
            </v-list>
          </v-list>
        </div>

        <v-divider />
        <template v-if="_isUIAllowed('apiDocs')">
          <div
            v-t="['e:api-docs']"
            class="caption pointer nc-docs pb-2 pl-5 pr-3 pt-2 d-flex align-center"
            @click="openLink(apiLink)"
          >
            <v-icon color="brown" small class="mr-2"> mdi-open-in-new </v-icon>
            {{ $t('title.apiDocs') }}
          </div>
        </template>

        <template v-if="_isUIAllowed('settings')">
          <div class="pl-5 pr-3 d-flex align-center pb-2">
            <settings-modal>
              <template #default="{ click }">
                <div v-t="['c:navdraw:project-settings']" class="caption pointer nc-team-settings" @click="click">
                  <v-icon color="brown" small class="mr-1"> mdi-cog </v-icon>
                  {{ $t('title.teamAndSettings') }}
                </div>
              </template>
            </settings-modal>
          </div>
        </template>

        <!--        <v-divider/>-->
        <!--        <extras class="pl-1"/>-->
      </div>
    </v-navigation-drawer>

    <dlg-table-create
      v-if="dialogGetTableName.dialogShow"
      v-model="dialogGetTableName.dialogShow"
      @create="mtdTableCreate($event)"
    />

    <dlg-view-create
      v-if="dialogGetViewName.dialogShow"
      v-model="dialogGetViewName.dialogShow"
      @create="mtdViewCreate($event)"
    />

    <textDlgSubmitCancel
      v-if="dialogRenameTable.dialogShow"
      :rules="[validateTableName, validateUniqueAlias]"
      :dialog-show="dialogRenameTable.dialogShow"
      :heading="dialogRenameTable.heading"
      :cookie="dialogRenameTable.cookie"
      :default-value="dialogRenameTable.defaultValue"
      :mtd-dialog-submit="mtdDialogRenameTableSubmit"
      :mtd-dialog-cancel="mtdDialogRenameTableCancel"
    />

    <textDlgSubmitCancel
      v-if="dialogGetFunctionName.dialogShow"
      :dialog-show="dialogGetFunctionName.dialogShow"
      :heading="dialogGetFunctionName.heading"
      :mtd-dialog-submit="mtdDialogGetFunctionNameSubmit"
      :mtd-dialog-cancel="mtdDialogGetFunctionNameCancel"
    />
    <textDlgSubmitCancel
      v-if="dialogGetProcedureName.dialogShow"
      :dialog-show="dialogGetProcedureName.dialogShow"
      :heading="dialogGetProcedureName.heading"
      :mtd-dialog-submit="mtdDialogGetProcedureNameSubmit"
      :mtd-dialog-cancel="mtdDialogGetProcedureNameCancel"
    />
    <textDlgSubmitCancel
      v-if="dialogGetSequenceName.dialogShow"
      :dialog-show="dialogGetSequenceName.dialogShow"
      :heading="dialogGetSequenceName.heading"
      :mtd-dialog-submit="mtdDialogGetSequenceNameSubmit"
      :mtd-dialog-cancel="mtdDialogGetSequenceNameCancel"
    />
    <dlgLabelSubmitCancel
      v-if="selectedNodeForDelete.dialog"
      :actions-mtd="deleteSelectedNode"
      :dialog-show="selectedNodeForDelete.dialog"
      :heading="selectedNodeForDelete.heading"
      type="error"
    />
    <dlgLabelSubmitCancel
      v-if="dialogDeleteTable.dialogShow"
      type="error"
      :actions-mtd="deleteTable"
      :dialog-show="dialogDeleteTable.dialogShow"
      :heading="`${dialogDeleteTable.heading} ${dialogDeleteTable.tableName}`"
    />
    <quick-import ref="quickImport" v-model="quickImportDialog" hide-label import-to-project @success="onQuickImport" />
  </div>
</template>

<script>
/* eslint-disable */

import { mapMutations, mapGetters, mapActions } from 'vuex';
import { UITypes } from 'nocodb-sdk';

import rightClickOptions from '../helpers/rightClickOptions';
import rightClickOptionsSub from '../helpers/rightClickOptionsSub';
import icons from '../helpers/treeViewIcons';

import textDlgSubmitCancel from './utils/DlgTextSubmitCancel';
import dlgLabelSubmitCancel from './utils/DlgLabelSubmitCancel';
import { copyTextToClipboard } from '../helpers/xutils';
import DlgTableCreate from '~/components/utils/DlgTableCreate';
import DlgViewCreate from '~/components/utils/DlgViewCreate';
import SponsorMini from '~/components/SponsorMini';
import { validateTableName } from '~/helpers';
import QuickImport from '~/components/import/QuickImport';

import draggable from 'vuedraggable';
import GithubStarBtn from '~/components/GithubStarBtn';
import SettingsModal from '~/components/settings/SettingsModal';
import Language from '~/components/utils/Language';
import Extras from '~/components/project/spreadsheet/components/Extras';

export default {
  components: {
    Extras,
    Language,
    SettingsModal,
    GithubStarBtn,
    draggable,
    QuickImport,
    SponsorMini,
    DlgViewCreate,
    DlgTableCreate,
    textDlgSubmitCancel,
    dlgLabelSubmitCancel,
  },
  props: {
    sharedBase: Boolean,
  },
  data: () => ({
    treeViewStatus: {},
    drag: false,
    dragOptions: {
      animation: 200,
      group: 'description',
      disabled: false,
      ghostClass: 'ghost',
    },
    roleIcon: {
      owner: 'mdi-account-star',
      creator: 'mdi-account-hard-hat',
      editor: 'mdi-account-edit',
      viewer: 'mdi-eye-outline',
      commenter: 'mdi-comment-account-outline',
    },
    rolesList: [{ title: 'editor' }, { title: 'commenter' }, { title: 'viewer' }],
    showSqlClient: false,
    nestedMenu: {},
    overShieldIcon: false,
    activeListItem: null,
    dbIcons: {
      oracledb: 'oracle_icon@2x.png',
      pg: 'postgresql_icon@2x.png',
      mysql: 'mysql_icon@2x.png',
      mssql: 'mssql_icon@2x.png',
      sqlite3: 'sqlite.png',
    },
    mini: false,
    miniExpanded: false,
    navigation: {
      shown: true,
      width: 320,
      borderSize: 3,
    },
    loadingProjects: true,
    caseInsensitive: true,
    search: null,
    menuVisible: false,
    quickImportDialog: false,
    x: 0,
    y: 0,
    menuItem: null,
    menu: [{ title: 'Execute' }],
    icons,
    tree: [],
    active: [],
    viewMenu: false,
    dialogGetTableName: {
      dialogShow: false,
      heading: 'Enter New Table Name',
      field: 'Table Name',
    },
    dialogGetViewName: {
      dialogShow: false,
      heading: 'Enter New View Name',
      field: 'View Name',
    },
    dialogGetFunctionName: {
      dialogShow: false,
      heading: 'Enter New Function Name',
      field: 'Function Name',
    },
    dialogGetProcedureName: {
      dialogShow: false,
      heading: 'Enter New Procedure Name',
      field: 'Procedure Name',
    },
    dialogGetSequenceName: {
      dialogShow: false,
      heading: 'Enter New Sequence Name',
      field: 'Sequence Name',
    },
    dialogRenameTable: {
      dialogShow: false,
      heading: 'Rename Table',
      field: 'Table Name',
      cookie: null,
      defaultValue: null,
    },
    dialogDeleteTable: {
      dialogShow: false,
      heading: 'Click Submit to Delete the Table:',
      nodes: {},
      id: '',
    },
    selectedNodeForDelete: {
      dialog: false,
      item: null,
      heading: null,
    },
  }),
  computed: {
    apiLink() {
      return new URL(
        `/api/v1/db/meta/projects/${this.projectId}/swagger`,
        this.$store.state.project.appInfo && this.$store.state.project.appInfo.ncSiteUrl
      );
    },
    previewAs: {
      get() {
        return this.$store.state.users.previewAs;
      },
      set(previewAs) {
        this.$store.commit('users/MutPreviewAs', previewAs);
      },
    },
    selectedItem() {
      return [this.$route.query.type, this.$route.query.dbalias, this.$route.query.name].join('||');
    },
    direction() {
      return this.navigation.shown === false ? 'Open' : 'Closed';
    },
    ...mapGetters({
      projects: 'project/list',
      tabs: 'tabs/list',
      sqlMgr: 'sqlMgr/sqlMgr',
      currentProjectFolder: 'project/currentProjectFolder',
    }),
    filter() {
      return (item, search, textKey) => item[textKey].indexOf(search) > -1;
    },
    hideNode() {
      return {
        sqlClientDir: !this._isUIAllowed('sqlClientDir'),
        migrationsDir: !this._isUIAllowed('migrationsDir'),
        functionDir: !this._isUIAllowed('functionDir'),
        procedureDir: !this._isUIAllowed('procedureDir'),
      };
    },
    isTreeView() {
      return (
        this.projects &&
        (this.projects.length > 1 ||
          (this.projects[0] &&
            this.projects[0].children &&
            (this.projects[0].children.length > 1 ||
              (this.projects[0].children[0] &&
                this.projects[0].children[0].children &&
                this.projects[0].children[0].children.length > 1))))
      );
    },
    listViewArr() {
      return (
        (this.projects &&
          this.projects[0] &&
          this.projects[0].children &&
          this.projects[0].children[0] &&
          this.projects[0].children[0].children &&
          this.projects[0].children[0].children[0] &&
          this.projects[0].children[0].children[0].children) ||
        []
      );
    },
  },
  methods: {
    async onMove(event, children) {
      if (children.length - 1 === event.moved.newIndex) {
        this.$set(children[event.moved.newIndex], 'order', children[event.moved.newIndex - 1].order + 1);
      } else if (event.moved.newIndex === 0) {
        this.$set(children[event.moved.newIndex], 'order', children[1].order / 2);
      } else {
        this.$set(
          children[event.moved.newIndex],
          'order',
          (children[event.moved.newIndex - 1].order + children[event.moved.newIndex + 1].order) / 2
        );
      }

      // await this.$store.dispatch('sqlMgr/ActSqlOp', [{dbAlias: 'db'}, 'xcModelOrderSet', {
      //   tn: children[event.moved.newIndex].table_name,
      //   order: children[event.moved.newIndex].order,
      // }])
      await this.$api.dbTable.reorder(children[event.moved.newIndex].id, {
        order: children[event.moved.newIndex].order,
      });
    },
    openUIACL(child) {
      this.disableOrEnableModelTabAdd();
      setTimeout(() => {
        this.$router.push({
          query: {
            ...this.$route.query,
            nested_1: (child && child._nodes && child._nodes.dbConnection && child._nodes.dbConnection.id) + 'acl',
          },
        });
      }, 100);
    } /*
    setPreviewUSer(previewAs) {
      if (!process.env.EE) {
        this.$toast.info('Available in Enterprise edition').goAway(3000);
      } else {
        this.previewAs = previewAs;
        window.location.reload();
      }
    },*/,
    async loadRoles() {
      // if (this.$store.getters['users/GtrIsAdmin']) {
      //   const roles = (
      //     await this.$axios.get('/admin/roles', {
      //       headers: {
      //         'xc-auth': this.$store.state.users.token,
      //       },
      //       params: {
      //         project_id: this.$route.params.project_id,
      //       },
      //     })
      //   ).data
      //   this.rolesList = roles.filter(role => !['owner', 'creator', 'guest'].includes(role.title))
      // } else {
      //   this.rolesList = null
      //   this.previewAs = null
      // }
    },
    appsTabAdd() {
      const tabIndex = this.tabs.findIndex(el => el.key === `appStore`);
      if (tabIndex !== -1) {
        this.changeActiveTab(tabIndex);
      } else {
        let item = {
          name: 'App Store',
          key: `appStore`,
        };
        item._nodes = { env: '_noco' };
        item._nodes.type = 'appStore';
        this.$store.dispatch('tabs/ActAddTab', item);
      }
    },
    isNonAdminAccessAllowed(item) {
      return ['tableDir', 'viewDir'].includes(item.type);
    },
    changeTheme() {
      this.$store.dispatch('settings/ActToggleDarkMode', !this.$store.state.settings.darkTheme);
    },
    openLink(link) {
      window.open(link, '_blank');
    },
    async checkAndDeleteTable(table, action = 'showDialog') {
      this.dialogDeleteTable.tableName = table.title;
      this.dialogDeleteTable.nodes = table._nodes;
      this.dialogDeleteTable.id = table.id;
      await this.deleteTable(action);
      this.$e('c:table:delete');
    },
    async deleteTable(action = '') {
      if (action === 'showDialog') {
        this.dialogDeleteTable.dialogShow = true;
      } else if (action === 'hideDialog') {
        this.dialogDeleteTable.dialogShow = false;
      } else {
        try {
          const nodes = this.dialogDeleteTable.nodes;
          const id = this.dialogDeleteTable.id;
          const meta = await this.$store.dispatch('meta/ActLoadMeta', { id });
          const relationColumns = meta.columns.filter(c => c.uidt === UITypes.LinkToAnotherRecord);

          if (relationColumns.length) {
            const refColMsgs = await Promise.all(
              relationColumns.map(async (c, i) => {
                const refMeta = await this.$store.dispatch('meta/ActLoadMeta', {
                  id: c.colOptions.fk_related_model_id,
                });
                return `${i + 1}. ${c.title} is a LinkToAnotherRecord of ${(refMeta && refMeta.title) || c.title}`;
              })
            );
            this.$toast
              .info(
                `<div style="padding:10px 4px">Unable to delete tables because of the following.
                <br><br>${refColMsgs.join('<br>')}<br><br>
                Delete them & try again</div>
            `
              )
              .goAway(10000);
            this.dialogDeleteTable.dialogShow = false;
            return;
          }

          await this.$api.dbTable.delete(id);

          this.removeTableTab({
            env: nodes.env,
            dbAlias: nodes.dbAlias,
            table_name: nodes.table_name,
          });

          await this.loadTablesFromParentTreeNode({
            _nodes: {
              ...nodes,
            },
          });

          this.$store.commit('meta/MutMeta', {
            key: nodes.table_name,
            value: null,
          });
          this.$store.commit('meta/MutMeta', {
            key: id,
            value: null,
          });
          this.$toast.info(`Deleted table ${nodes.title} successfully`).goAway(3000);
        } catch (e) {
          const msg = await this._extractSdkResponseErrorMsg(e);
          this.$toast.error(msg).goAway(3000);
        }
        this.dialogDeleteTable.dialogShow = false;
        this.$e('a:table:delete');
      }
    },
    /*    settingsTabAdd() {
          const tabIndex = this.tabs.findIndex(el => el.key === `projectSettings`);
          if (tabIndex !== -1) {
            this.changeActiveTab(tabIndex);
          } else {
            console.log('add roles tab');
            let item = {name: 'Settings', key: `projectSettings`}
            item._nodes = {env: 'dev'};
            item._nodes.type = 'projectSettings';
            this.$store.dispatch("tabs/ActAddTab", item);
          }

        },*/

    rolesTabAdd() {
      const tabIndex = this.tabs.findIndex(el => el.key === `roles`);
      if (tabIndex !== -1) {
        this.changeActiveTab(tabIndex);
      } else {
        let item = {
          name: `${this.$t('title.teamAndAuth')} `,
          key: `roles`,
        };
        item._nodes = { env: '_noco' };
        item._nodes.type = 'roles';
        this.$store.dispatch('tabs/ActAddTab', item);
      }
    },
    disableOrEnableModelTabAdd() {
      const tabIndex = this.tabs.findIndex(el => el.key === `disableOrEnableModel`);
      if (tabIndex !== -1) {
        this.changeActiveTab(tabIndex);
      } else {
        let item = {
          name: `${this.$t('title.metaMgmt')}`,
          key: `disableOrEnableModel`,
        };
        item._nodes = { env: '_noco' };
        item._nodes.type = 'disableOrEnableModel';
        this.$store.dispatch('tabs/ActAddTab', item);
      }
    },
    openAuditTab() {
      const tabIndex = this.tabs.findIndex(el => el.key === `migrationsDir`);
      if (tabIndex !== -1) {
        this.changeActiveTab(tabIndex);
      } else {
        let item = {
          name: `${this.$t('title.audit')}`,
          key: `migrationsDir`,
        };
        item._nodes = {
          env: '_noco',
          dbAlias: 'db',
        };
        item._nodes.type = 'migrationsDir';
        item._nodes.dbKey = '';
        this.$store.dispatch('tabs/ActAddTab', item);
      }
    },
    toggleMini() {
      this.$store.commit('panelSize/MutSize', {
        type: 'treeView',
        size: this.$store.state.panelSize.treeView.size === 18 ? 5 : 18,
      });
      // this.onMiniHoverEnter();
      // this.mini = !this.mini;
    },
    onMiniHoverEnter() {
      if (this.mini && this.$refs.drawer) {
        const el = this.$refs.drawer.$el;
        this.$refs.drawer.width = el.style.width = '320px';
        this.miniExpanded = true;
      }
    },
    onMiniHoverLeave() {
      if (this.mini && this.$refs.drawer) {
        const el = this.$refs.drawer.$el;
        this.navigation.width = this.$refs.drawer.width = el.style.width = '50px';
        this.miniExpanded = false;
      }
    },
    onQuickImport() {
      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',
    }),
    ...mapActions({
      loadTables: 'project/loadTables',
      loadProjects: 'project/loadProjects',
      loadViews: 'project/loadViews',
      loadProcedures: 'project/loadProcedures',
      loadSequences: 'project/loadSequences',
      loadFunctions: 'project/loadFunctions',
      changeActiveTab: 'tabs/changeActiveTab',
      // instantiateSqlMgr: "sqlMgr/instantiateSqlMgr",
      loadDefaultTabs: 'tabs/loadDefaultTabs',
      loadTablesFromParentTreeNode: 'project/loadTablesFromParentTreeNode',
      loadViewsFromParentTreeNode: 'project/loadViewsFromParentTreeNode',
      loadFunctionsFromParentTreeNode: 'project/loadFunctionsFromParentTreeNode',
      loadProceduresFromParentTreeNode: 'project/loadProceduresFromParentTreeNode',
      removeTabsByName: 'tabs/removeTabsByName',
      clearProjects: 'project/clearProjects',
      removeTableTab: 'tabs/removeTableTab',
    }),
    async addTab(item, open, leaf) {
      // console.log("addtab item", item, open, leaf);
      //this.$store.commit('notification/MutToggleProgressBar', true);
      try {
        if (item._nodes.type === 'tableDir' && !open) {
          //load tables
          await this.loadTables(item);
          const currentlyOpened = JSON.parse(JSON.stringify(this.open));
          currentlyOpened.push(item._nodes.key);
          this.activeListItem = item._nodes.key;
          // this.open = currentlyOpened;
        } else if (item._nodes.type === 'viewDir' && !open) {
          await this.loadViews(item);
          const currentlyOpened = JSON.parse(JSON.stringify(this.open));
          currentlyOpened.push(item._nodes.key);
          this.activeListItem = item._nodes.key;
          // this.open = currentlyOpened;
        } else if (item._nodes.type === 'functionDir' && !open) {
          await this.loadFunctions(item);
          const currentlyOpened = JSON.parse(JSON.stringify(this.open));
          currentlyOpened.push(item._nodes.key);
          this.activeListItem = item._nodes.key;
          // this.open = currentlyOpened;
        } else if (item._nodes.type === 'procedureDir' && !open) {
          await this.loadProcedures(item);
          const currentlyOpened = JSON.parse(JSON.stringify(this.open));
          currentlyOpened.push(item._nodes.key);
          this.activeListItem = item._nodes.key;
          // this.open = currentlyOpened;
        } else if (item._nodes.type === 'sequenceDir' && !open) {
          await this.loadSequences(item);
          const currentlyOpened = JSON.parse(JSON.stringify(this.open));
          currentlyOpened.push(item._nodes.key);
          this.activeListItem = item._nodes.key;
          // this.open = currentlyOpened;
        } else if (item._nodes.type === 'env') {
          return;
        } else {
          // const tabIndex = this.tabs.findIndex(el => el.key === item.key);
          const tabIndex = this.tabs.findIndex(el => {
            return (
              ((!el._nodes && !item._nodes) ||
                (el._nodes &&
                  item._nodes &&
                  el._nodes.type === item._nodes.type &&
                  el._nodes.dbAlias === item._nodes.dbAlias)) &&
              item.name === el.name
            );
          });
          if (tabIndex !== -1) {
            this.changeActiveTab(tabIndex);
          } else {
            if (
              item._nodes.type === 'tableDir' ||
              item._nodes.type === 'project' ||
              item._nodes.type === 'viewDir' ||
              item._nodes.type === 'procedureDir' ||
              item._nodes.type === 'sequenceDir' ||
              item._nodes.type === 'db' ||
              item._nodes.type === 'functionDir'
            ) {
              return;
            }
            if (item._nodes.type === 'table') {
              let tableIndex = +item._nodes.key.split('.').pop();
              if (
                !(await this.$store.dispatch('settings/ActCheckMaxTable', {
                  tableIndex,
                }))
              ) {
                return;
              }
            }
            this.$store.dispatch('tabs/ActAddTab', item);
          }
        }
      } catch (e) {
        console.log(e);
      } finally {
        //this.$store.commit('notification/MutToggleProgressBar', false);
      }
    },
    isActiveList(item) {
      return true; //this.treeViewStatus[item.type] = this.treeViewStatus[item.type]  || item.type === this.$route.query.type || item.type === `${this.$route.query.type}Dir`;
    },
    showNode(item) {
      return (
        !(this.$store.getters['project/GtrProjectPrefix'] && ['functionDir', 'procedureDir'].includes(item.type)) &&
        (['tableDir', 'viewDir'].includes(item.type) || this._isUIAllowed('advanced'))
      );
    },
    showCTXMenu(e, item, open, leaf) {
      if (!this._isUIAllowed('treeViewContextMenu')) {
        return;
      }
      if (!item) {
        return;
      }
      e.preventDefault();
      e.stopPropagation();
      this.x = e.clientX;
      this.y = e.clientY;
      this.menuItem = item;

      this.$nextTick(() => {
        this.menuVisible = true;
      });
    },
    async loadProjectsData(id = null) {
      try {
        this.$store.commit('tabs/clear');
        this.loadingProjects = true;
        await this.loadProjects(id);

        if ('toast' in this.$route.query) {
          this.$toast
            .success(
              `Successfully generated ${(this.$store.getters['project/GtrProjectType'] || '').toUpperCase()} APIs`,
              {
                position: 'top-center',
              }
            )
            .goAway(5000);
        }

        try {
          this.open = [
            this.projects[0].key,
            this.projects[0].children[0].key,
            this.projects[0].children[0].children[0].key,
          ];
        } catch (error) {
          console.log('this.open set array error', error);
        }
        this.loadingProjects = false;
        if (!this.isTreeView) {
          if (this.$route.query.type) {
            const node = this.listViewArr.find(n => n.type === `${this.$route.query.type}Dir`);
            await this.addTab({ ...(node || this.listViewArr[0]) }, false, true);
          } else {
            await this.addTab({ ...this.listViewArr[0] }, false, true);
          }
        }
      } catch (error) {
        console.error('loadProjectsData', error);
      }
    },
    ctxMenuOptions() {
      if (!this.menuItem || !this.menuItem._nodes.type) {
        return;
      }
      let options = rightClickOptions[this.menuItem._nodes.type];
      if (!this.$store.getters['users/GtrIsAdmin']) {
        options = rightClickOptionsSub[this.menuItem._nodes.type];
      }
      return options;
      // if (options) {
      //   return Object.keys(options).map(k => typeof options[k] === 'object' ? Object.keys(options[k]) : k);
      // }
      // return [];
    },
    isNested(item) {
      return (
        (item.children && item.children.length) ||
        ['tableDir', 'viewDir', 'functionDir', 'procedureDir', 'sequenceDir'].includes(item.type)
      );
    },
    validateUniqueAlias(v) {
      return (
        (this.$store.state.project.tables || []).every(
          t => this.dialogRenameTable.cookie.id === t.id || t.title !== (v || '')
        ) || 'Duplicate table alias'
      );
    },
    async handleCreateBtnClick(type, item) {
      this.menuItem = item;
      switch (type) {
        case 'tableDir':
          this.dialogGetTableName.dialogShow = true;
          break;
        case 'viewDir':
          this.dialogGetViewName.dialogShow = true;
          break;
        case 'functionDir':
          this.dialogGetFunctionName.dialogShow = true;
          break;
        case 'procedureDir':
          this.dialogGetProcedureName.dialogShow = true;
          break;
        case 'sequenceDir':
          this.dialogGetSequenceName.dialogShow = true;
          break;
      }
      this.$e('c:table:create:navdraw');
    },

    async handleCTXMenuClick(actionStr) {
      ///this.$store.commit('notification/MutToggleProgressBar', true);

      try {
        const item = this.menuItem;
        // const options = rightClickOptions[this.menuItem._nodes.type];
        const action = actionStr; //options[actionStr];
        // this.$e(action)

        if (action) {
          if (action === 'ENV_DB_TABLES_CREATE') {
            this.dialogGetTableName.dialogShow = true;
            this.$e('c:table:create:navdraw:right-click');
          } else if (action === 'ENV_DB_VIEWS_CREATE') {
            this.dialogGetViewName.dialogShow = true;
          } else if (action === 'ENV_DB_PROCEDURES_CREATE') {
            this.dialogGetProcedureName.dialogShow = true;
          } else if (action === 'ENV_DB_SEQUENCES_CREATE') {
            this.dialogGetSequenceName.dialogShow = true;
          } else if (action === 'ENV_DB_FUNCTIONS_CREATE') {
            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);
            this.$e('a:table:refresh:navdraw');
          } 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.quickImportDialog = true;
          } else if (action === 'ENV_DB_FUNCTIONS_REFRESH') {
            await this.loadFunctions(this.menuItem);
            this.$toast.success('Functions refreshed').goAway(1000);
          } else if (action === 'ENV_DB_PROCEDURES_REFRESH') {
            await this.loadProcedures(this.menuItem);
            this.$toast.success('Procedures refreshed').goAway(1000);
          } else if (action === 'ENV_DB_SEQUENCES_REFRESH') {
            await this.loadSequences(this.menuItem);
            this.$toast.success('Table refreshed').goAway(1000);
          } else if (action === 'ENV_DB_TABLES_RENAME') {
            this.dialogRenameTable.cookie = item;
            this.dialogRenameTable.dialogShow = true;
            this.dialogRenameTable.defaultValue = item.name;
            this.$e('c:table:rename:navdraw:right-click');
          } else if (action === 'ENV_DB_MIGRATION_DOWN') {
            await this.sqlMgr.migrator().migrationsDown({
              env: item._nodes.env,
              dbAlias: item._nodes.dbAlias,
              migrationSteps: 99999999999,
              folder: this.currentProjectFolder,
              sqlContentMigrate: 1,
            });
          } else if (action === 'SHOW_NODES') {
            console.log('\n_nodes.type = ', item._nodes.type, '\n');
            console.log('_nodes.key = ', item._nodes.key, '\n');
            console.log('_nodes = ', item._nodes, '\n');
          } else if (
            action === 'ENV_DB_TABLES_DELETE' ||
            action === 'ENV_DB_VIEWS_DELETE' ||
            action === 'ENV_DB_FUNCTIONS_DELETE' ||
            action === 'ENV_DB_PROCEDURES_DELETE' ||
            action === 'ENV_DB_SEQUENCES_DELETE'
          ) {
            this.deleteSelectedNode('showDialog', item);
          } else if (action === 'ENV_DB_TABLES_CREATE_STATEMENT') {
            await this.handleSqlStatementGeneration(
              item,
              'tableCreateStatement',
              `${item.name} Create Statement copied`
            );
          } else if (action === 'ENV_DB_TABLES_INSERT_STATEMENT') {
            await this.handleSqlStatementGeneration(
              item,
              'tableInsertStatement',
              `${item.name} Insert Statement copied`
            );
          } else if (action === 'ENV_DB_TABLES_UPDATE_STATEMENT') {
            await this.handleSqlStatementGeneration(
              item,
              'tableUpdateStatement',
              `${item.name} Update Statement copied`
            );
          } else if (action === 'ENV_DB_TABLES_DELETE_STATEMENT') {
            await this.handleSqlStatementGeneration(
              item,
              'tableSelectStatement',
              `${item.name} Delete Statement copied`
            );
          } else if (action === 'ENV_DB_TABLES_SELECT_STATEMENT') {
            await this.handleSqlStatementGeneration(
              item,
              'tableDeleteStatement',
              `${item.name} Select Statement copied`
            );
          } else {
            console.log(`No Action Fn found for ${action}`);
          }
        }
      } catch (e) {
        console.log(e);
      } finally {
        //this.$store.commit('notification/MutToggleProgressBar', false);
      }
    },

    async handleSqlStatementGeneration(item, func, msg) {
      try {
        let result = await this.$store.dispatch('sqlMgr/ActSqlOp', [
          {
            env: item._nodes.env,
            dbAlias: item._nodes.dbAlias,
          },
          func,
          { tn: item.name },
        ]);
        if (result && result.data) {
          copyTextToClipboard(result.data, 'selection');
        } else {
          copyTextToClipboard('Example String', 'selection');
        }

        let sqlClientNode = { ...item._nodes };
        let newItem = {
          _nodes: sqlClientNode,
        };

        sqlClientNode.type = 'sqlClientDir';
        sqlClientNode.key = sqlClientNode.tableDirKey.split('.');
        sqlClientNode.key.pop();
        sqlClientNode.dbKey = sqlClientNode.key.join('.');
        sqlClientNode.key.push('sqlClient');
        sqlClientNode.key = sqlClientNode.key.join('.');

        newItem.key = sqlClientNode.dbKey + '.sqlClient';
        newItem.name = 'SQL Client';
        newItem.tooltip = 'SQL Client';
        newItem.type = 'sqlClientDir';

        this.$toast.success(msg).goAway(2000);

        this.addTab(newItem, false, false);

        this.$store.commit('queries/MutSetClipboardQuery', result.data);
      } catch (e) {
        console.log(e);
        this.$toast.error('Something went wrong').goAway(2000);
      }
    },

    async mtdDialogRenameTableSubmit(title, cookie) {
      let item = cookie;
      try {
        await this.$api.dbTable.update(item.id, {
          project_id: this.projectId,
          table_name: title,
        });
      } catch (e) {
        this.$toast.error(await this._extractSdkResponseErrorMsg(e)).goAway(3000);
        return;
      }
      await this.removeTabsByName(item);
      await this.loadTablesFromParentTreeNode({
        _nodes: {
          ...item._nodes,
        },
      });
      this.$store.dispatch('tabs/ActAddTab', {
        _nodes: {
          env: this.menuItem._nodes.env,
          dbAlias: this.menuItem._nodes.dbAlias,
          table_name: this.menuItem._nodes.table_name,
          title: title,
          dbConnection: this.menuItem._nodes.dbConnection,
          type: 'table',
          dbKey: this.menuItem._nodes.dbKey,
          key: this.menuItem._nodes.key,
          tableDirKey: this.menuItem._nodes.tableDirKey,
        },
        name: title,
      });
      this.dialogRenameTable.dialogShow = false;
      this.dialogRenameTable.defaultValue = null;
      this.$toast.success('Table renamed successfully').goAway(3000);
      this.$e('a:table:rename');
    },
    mtdDialogRenameTableCancel() {
      this.dialogRenameTable.dialogShow = false;
      this.dialogRenameTable.defaultValue = null;
    },
    mtdTableCreate(table) {
      if (!this.menuItem || this.menuItem.type !== 'tableDir') {
        this.menuItem = this.listViewArr.find(n => n.type === 'tableDir');
      }
      // const tables = table.name.split(',');
      this.$store.commit('notification/MutToggleProgressBar', true);
      this.dialogGetTableName.dialogShow = false;
      setTimeout(() => {
        // for (let i = 0; i < tables.length; ++i) {
        if (table.name) {
          this.$store.dispatch('tabs/ActAddTab', {
            _nodes: {
              env: this.menuItem._nodes.env,
              dbAlias: this.menuItem._nodes.dbAlias,
              table_name: table.name,
              title: table.alias,
              type: 'table',
              dbKey: this.menuItem._nodes.dbKey,
              key: this.menuItem._nodes.key,
              dbConnection: this.menuItem._nodes.dbConnection,
              newTable: table,
            },
            name: table.alias,
          });
        }
      });
      setTimeout(() => this.$store.commit('notification/MutToggleProgressBar', false), 200);

      this.$set(this.dialogGetTableName, 'dialogShow', false);
      this.$e('a:table:create');
    },
    mtdViewCreate(view) {
      // const tables = table.name.split(',');
      this.$store.commit('notification/MutToggleProgressBar', true);
      this.dialogGetViewName.dialogShow = false;
      setTimeout(() => {
        // for (let i = 0; i < tables.length; ++i) {
        if (view.name) {
          this.$store.dispatch('tabs/ActAddTab', {
            _nodes: {
              env: this.menuItem._nodes.env,
              dbAlias: this.menuItem._nodes.dbAlias,
              view_name: view.name,
              title: view.alias,
              type: 'view',
              dbKey: this.menuItem._nodes.key,
              key: this.menuItem._nodes.key,
              dbConnection: this.menuItem._nodes.dbConnection,
              newView: true,
            },
            name: view.alias,
          });
        }
      });
      setTimeout(() => this.$store.commit('notification/MutToggleProgressBar', false), 200);

      this.$set(this.dialogGetTableName, 'dialogShow', false);
    },
    mtdDialogGetTableNameSubmit(tn, cookie) {
      let tables = tn.split(',');
      this.$store.commit('notification/MutToggleProgressBar', true);
      this.dialogGetTableName.dialogShow = false;
      setTimeout(() => {
        for (let i = 0; i < tables.length; ++i) {
          if (tables[i]) {
            this.$store.dispatch('tabs/ActAddTab', {
              _nodes: {
                env: this.menuItem._nodes.env,
                dbAlias: this.menuItem._nodes.dbAlias,
                tn: tables[i],

                type: 'table',
                dbKey: this.menuItem._nodes.dbKey,
                key: this.menuItem._nodes.key,
                dbConnection: this.menuItem._nodes.dbConnection,

                newTable: true,
              },
              name: tables[i],
            });
          }
        }
      });
      setTimeout(() => this.$store.commit('notification/MutToggleProgressBar', false), 200);
    },
    mtdDialogGetTableNameCancel() {
      this.dialogGetTableName.dialogShow = false;
    },
    mtdDialogGetViewNameSubmit(view_name) {
      this.$store.dispatch('tabs/ActAddTab', {
        _nodes: {
          env: this.menuItem._nodes.env,
          dbAlias: this.menuItem._nodes.dbAlias,
          view_name: view_name,

          type: 'view',
          dbKey: this.menuItem._nodes.key,
          key: this.menuItem._nodes.key,
          dbConnection: this.menuItem._nodes.dbConnection,

          newView: true,
        },
        name: view_name,
      });
      this.dialogGetViewName.dialogShow = false;
    },
    mtdDialogGetViewNameCancel() {
      this.dialogGetViewName.dialogShow = false;
    },
    mtdDialogGetFunctionNameSubmit(function_name) {
      this.$store.dispatch('tabs/ActAddTab', {
        _nodes: {
          dbKey: this.menuItem._nodes.dbKey,
          env: this.menuItem._nodes.env,
          dbAlias: this.menuItem._nodes.dbAlias,
          function_name: function_name,
          newFunction: true,
          type: 'function',
          key: this.menuItem._nodes.key,
          dbConnection: this.menuItem._nodes.dbConnection,
        },
        name: function_name,
      });
      this.dialogGetFunctionName.dialogShow = false;
    },
    mtdDialogGetFunctionNameCancel() {
      this.dialogGetFunctionName.dialogShow = false;
    },
    mtdDialogGetProcedureNameSubmit(procedure_name) {
      this.$store.dispatch('tabs/ActAddTab', {
        _nodes: {
          dbKey: this.menuItem._nodes.dbKey,
          env: this.menuItem._nodes.env,
          dbAlias: this.menuItem._nodes.dbAlias,
          procedure_name: procedure_name,
          newProcedure: true,
          type: 'procedure',
          key: this.menuItem._nodes.key,
        },
        name: procedure_name,
      });
      this.dialogGetProcedureName.dialogShow = false;
    },
    mtdDialogGetSequenceNameSubmit(sequence_name) {
      this.$store.dispatch('tabs/ActAddTab', {
        _nodes: {
          dbKey: this.menuItem._nodes.dbKey,
          env: this.menuItem._nodes.env,
          dbAlias: this.menuItem._nodes.dbAlias,
          sequence_name: sequence_name,
          newSequence: true,
          type: 'sequence',
          key: this.menuItem._nodes.key,
          dbConnection: this.menuItem._nodes.dbConnection,
        },
        name: sequence_name,
      });
      this.dialogGetSequenceName.dialogShow = false;
    },
    mtdDialogGetProcedureNameCancel() {
      this.dialogGetProcedureName.dialogShow = false;
    },
    mtdDialogGetSequenceNameCancel() {
      this.dialogGetSequenceName.dialogShow = false;
    },
    async renameSelectedNode(action = '', item) {
      if (action === 'showDialog') {
        this.selectedNodeForRename = {
          dialog: true,
          item: item,
          heading: `Rename ${item._nodes.type}`,
        };
      } else if (action === 'hideDialog') {
        this.selectedNodeForDelete = {
          dialog: false,
          item: null,
          heading: null,
        };
      } else {
      }
    },
    async deleteSelectedNode(action = '', item) {
      if (action === 'showDialog') {
        this.selectedNodeForDelete = {
          dialog: true,
          item: item,
          heading: `Click Submit to Delete The ${item._nodes.type}: ${item.name}`,
        };
      } else if (action === 'hideDialog') {
        this.selectedNodeForDelete = {
          dialog: false,
          item: null,
          heading: null,
        };
      } else {
        item = this.selectedNodeForDelete.item;
        if (item._nodes.type === 'table') {
          await this.checkAndDeleteTable(item, '');
        } else if (item._nodes.type === 'view') {
          const view = await this.$store.dispatch('sqlMgr/ActSqlOp', [
            {
              env: item._nodes.env,
              dbAlias: item._nodes.dbAlias,
            },
            'viewRead',
            { view_name: item._nodes.view_name },
          ]);

          await this.$store.dispatch('sqlMgr/ActSqlOpPlus', [
            {
              env: item._nodes.env,
              dbAlias: item._nodes.dbAlias,
            },
            'viewDelete',
            {
              view_name: item._nodes.view_name,
              oldViewDefination: view.view_definition,
            },
          ]);
          await this.loadViewsFromParentTreeNode({
            _nodes: {
              ...item._nodes,
            },
          });
          this.$toast.success('View deleted successfully').goAway(3000);
        } else if (item._nodes.type === 'function') {
          const _function = await this.$store.dispatch('sqlMgr/ActSqlOp', [
            {
              env: item._nodes.env,
              dbAlias: item._nodes.dbAlias,
            },
            'functionRead',
            {
              function_name: item._nodes.function_name,
            },
          ]);

          await this.$store.dispatch('sqlMgr/ActSqlOpPlus', [
            {
              env: item._nodes.env,
              dbAlias: item._nodes.dbAlias,
            },
            'functionDelete',
            {
              function_name: item._nodes.function_name,
              oldCreateFunction: _function.create_function,
            },
          ]);

          await this.loadFunctionsFromParentTreeNode({
            _nodes: {
              ...item._nodes,
            },
          });
          this.$toast.success('Function deleted successfully').goAway(3000);
        } else if (item._nodes.type === 'procedure') {
          const procedure = await this.$store.dispatch('sqlMgr/ActSqlOp', [
            {
              env: item._nodes.env,
              dbAlias: item._nodes.dbAlias,
            },
            'procedureRead',
            {
              procedure_name: item._nodes.procedure_name,
            },
          ]);

          await this.$store.dispatch('sqlMgr/ActSqlOpPlus', [
            {
              env: item._nodes.env,
              dbAlias: item._nodes.dbAlias,
            },
            'procedureDelete',
            {
              procedure_name: item._nodes.procedure_name,
              create_procedure: procedure.create_procedure,
            },
          ]);

          await this.loadProceduresFromParentTreeNode({
            _nodes: {
              ...item._nodes,
            },
          });
          this.$toast.success('Procedure deleted successfully').goAway(3000);
        }

        await this.removeTabsByName(item);

        this.selectedNodeForDelete = {
          dialog: false,
          item: null,
          heading: null,
        };
      }
    },
    validateTableName(v) {
      return validateTableName(v, this.$store.getters['project/GtrProjectIsGraphql']);
    },
  },
  async created() {
    // this.loadDefaultTabs();
    // this.instantiateSqlMgr();
    const _id = this.$route.params.project;

    if (_id === 'external') {
    }
    await this.loadProjectsData(_id);
    this.loadDefaultTabs(true);
    // this.loadRoles();
  },
  beforeCreate() {},
  mounted() {
    // this.setBorderWidth();
    // this.setEvents();
  },
  async destroyed() {
    await this.clearProjects();
  },
};
</script>
<style scoped>
/deep/ .project-tree .v-treeview-node__level {
  width: 12px;
}

/deep/ .project-tree .v-treeview-node__toggle {
  width: 12px;
}

/deep/ .v-list-item.nested {
  min-height: 25px;
}

/deep/ .v-list-item .v-list-item__icon {
  margin-right: 0;
}

/deep/ .v-list-item.nested .v-list-item__icon {
  min-height: 25px;
  margin-top: 0;
  margin-bottom: 0;
  margin-right: 0;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  60% {
    transform: scale(1);
  }
  70% {
    /*opacity: 0;*/
    transform: scale(1.35);
  }
  80% {
    transform: scale(1);
  }
  90% {
    /*opacity: 0;*/
    transform: scale(1.35);
  }
  100% {
    transform: scale(1);
  }
}

.heart-anim {
  animation-name: pulse;
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
}

/deep/ .advance-menu .v-list-item--dense,
/deep/ .advance-menu .v-list--dense .v-list-item {
  min-height: 32px;
}

/deep/ .advance-menu .v-list-item--dense .v-list-item__icon,
/deep/ .advance-menu .v-list--dense .v-list-item .v-list-item__icon {
  margin-top: 4px;
  margin-bottom: 4px;
}

.font-weight-bold .caption {
  font-weight: 700 !important;
}

/deep/ .v-list-group .v-list-group__header .v-list-item__icon.v-list-group__header__append-icon {
  min-width: auto;
}

.nested .action {
  opacity: 0;
  transition: 0.4s opacity;
}

.nested:hover .action {
  opacity: 1;
}

/deep/ .nc-table-list-filter .v-input__slot {
  min-height: 30px !important;
}

/deep/ .nc-table-list-filter .v-input__slot label {
  top: 6px;
}

/deep/ .nc-table-list-filter.theme--light.v-text-field > .v-input__control > .v-input__slot:before {
  border-top-color: rgba(0, 0, 0, 0.12) !important;
}

/deep/ .nc-table-list-filter.theme--dark.v-text-field > .v-input__control > .v-input__slot:before {
  border-top-color: rgba(255, 255, 255, 0.12) !important;
}

.nc-draggable-child .nc-child-draggable-icon {
  opacity: 0;
  transition: 0.3s opacity;
  position: absolute;
  left: 0;
}

.nc-draggable-child:hover .nc-child-draggable-icon {
  opacity: 1;
}

.flip-list-move {
  transition: transform 0.5s;
}

.no-move {
  transition: transform 0s;
}

.ghost {
  opacity: 0.5;
  background: grey;
}

.nc-project-title {
  height: 30px;
  /*width: 100%;*/
  display: flex;
  justify-content: flex-start;
}

.nc-project-title.shared {
  align-items: center;
}

.nc-project-title:not(.shared) {
  padding-left: 30px;
}

.nc-project-title.shared > h3 {
  padding: 0 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  align-items: center;
}

.nc-project-title > div {
  /*  display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: white;
    font-weight: bold;
    padding: 0 10px 10px 10px;
    text-transform: capitalize;
    line-height: 20px;
    min-width: calc(100% - 30px);*/
}
</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/>.
 *
 */
-->