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>
                              </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
                    >
                  </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 />
        <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 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"
    />
    <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 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,
    },
    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");
    },

    /*    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",
    }),
    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, {
          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}`,
        };
      } else if (action === "hideDialog") {
        this.selectedNodeForDelete = {
          dialog: false,
          item: null,
          heading: null,
        };
      } else {
        item = this.selectedNodeForDelete.item;
        if (item._nodes.type === "table") {
          const result = await this.$store.dispatch("sqlMgr/ActSqlOp", [
            {
              env: item._nodes.env,
              dbAlias: item._nodes.dbAlias,
            },
            "columnList",
            {
              table_name: item._nodes.table_name,
            },
          ]);

          await this.sqlMgr.sqlOpPlus(
            {
              env: item._nodes.env,
              dbAlias: item._nodes.dbAlias,
            },
            "tableDelete",
            {
              table_name: item._nodes.table_name,
              columns: columns.data.list,
            }
          );
          await this.loadTablesFromParentTreeNode({
            _nodes: {
              ...item._nodes,
            },
          });
          this.$toast.success("Table deleted successfully").goAway(3000);
        } 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/>.
 *
 */
-->