github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
多维表格
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
3415 Commits
134 Branches
271 Tags
1.2 GiB
 
 
 
 
 
 
Tree: 0c4507baa4
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '0c4507baa4'
${ noResults }
nocodb/packages/nc-gui/components/ProjectTreeView.vue

2151 lines
71 KiB
Raw Blame History

<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 />
<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"
/>
<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/>.
*
*/
-->