多维表格
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.
 
 
 
 
 
 

1967 lines
68 KiB

<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>
<!-- <img-->
<!-- class="grey lighten-3"-->
<!-- :width="16" :src="`/db-icons/${dbIcons[item._nodes.dbConnection.client]}`"/>-->
</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="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>
</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="['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="['table:rename:trigger:3-dot-menu']"
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="['table:trigger: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="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>
</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="['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="['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.team&auth')
}}</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="['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="['settings:audit']"
dense
class="body-2 nc-settings-audit"
@click="openAuditTab"
v-on="on"
>
<v-list-item-icon>
<v-icon x-small>
mdi-notebook-outline
</v-icon>
</v-list-item-icon>
<!-- Project Metadata -->
<v-list-item-title>
<span class="font-weight-regular caption">{{
$t('title.audit')
}}</span>
</v-list-item-title>
</v-list-item>
</template>
<!-- Meta Management -->
{{ $t('title.auditLogs') }}
</v-tooltip>
</template>
</v-list>
<v-divider />
<v-list v-if="_isUIAllowed('previewAs') || previewAs" dense>
<v-list-item>
<!-- Preview as -->
<span class="body-2 font-weight-medium">{{ $t('activity.previewAs') }}</span>
<v-icon small class="ml-1">
mdi-drama-masks
</v-icon>
</v-list-item>
<v-list dense>
<div class="mx-4 d-flex align-center mb-2">
<template v-for="(role, i) in rolesList">
<v-divider v-if="i" :key="i" vertical class="mx-2 caption grey--text" />
<div
:key="role.title"
:class="`pointer text-center nc-preview-${role.title}`"
@click="setPreviewUSer(role.title)"
>
<v-icon
small
class="mr-1"
:color="role.title === previewAs ? 'x-active' : ''"
>
{{ roleIcon[role.title] }}
</v-icon>
<span
class="caption text-capitalize"
:class="{ 'x-active--text': role.title === previewAs }"
>{{ role.title }}</span>
</div>
</template>
</div>
<template v-if="previewAs">
<!-- <v-divider></v-divider>-->
<v-list-item @click="setPreviewUSer(null)">
<v-icon small class="mr-1">
mdi-close
</v-icon>
<!-- Reset Preview -->
<span class="caption nc-preview-reset">{{ $t('activity.resetReview') }}</span>
</v-list-item>
</template>
</v-list>
</v-list>
</div>
<template v-if="_isUIAllowed('settings')">
<v-divider />
<div class="pt-3 pl-5 pr-3 d-flex align-center pb-2">
<settings-modal>
<template #default="{click}">
<div v-t="['project-settings']" class="caption pointer nc-team-settings" @click="click">
<v-icon color="brown" small class="mr-1">
mdi-cog
</v-icon>
Team & Settings
</div>
</template>
</settings-modal>
</div>
</template>
<div
v-t="['api-docs']"
class="caption pointer nc-docs pb-3 pl-5 pr-3 pt-2 d-flex align-center"
@click="openLink('https://apis.nocodb.com')"
>
<v-icon small class="mr-2">
mdi-api
</v-icon>
API Docs
</div>
<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"
/>
<excel-import
ref="excelImport"
v-model="excelImportDialog"
hide-label
import-to-project
@success="onExcelImport"
/>
</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 ExcelImport from '~/components/import/excelImport'
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,
ExcelImport,
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,
open: [],
search: null,
menuVisible: false,
excelImportDialog: 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: {
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) {
this.$tele.emit(`preview-as:${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('windows/ActToggleDarkMode', !this.$store.state.windows.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.team&auth')} `,
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
}
},
onExcelImport() {
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('windows/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.$tele.emit('table:create:trigger:mdi-plus-circle')
},
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.$tele.emit(action)
if (action) {
if (action === 'ENV_DB_TABLES_CREATE') {
this.dialogGetTableName.dialogShow = true
this.$tele.emit('table:create:trigger: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.$tele.emit('table:refresh')
} 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.excelImportDialog = 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.$tele.emit('table:rename:trigger: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.$tele.emit('table:rename:submit')
},
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.$tele.emit('table:create:submit')
},
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: .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/>.
*
*/
-->