<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" > <div>{{ $store.getters["project/GtrProjectName"] }}</div> </div> <v-navigation-drawer ref="drawer" v-model="navigation.shown" permanent mini-variant-width="50" class="pl-2 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-btn v-else icon text @click.stop="toggleMini" > <!– <v-icon v-if="mini">mdi-chevron-right-circle</v-icon>–> <!– <v-icon v-else>mdi-pin-outline</v-icon>–> <v-icon class="grey--text">mdi-arrow-expand-horizontal</v-icon> <!– <v-icon v-else>mdi-arrow-expand-horizontal</v-icon>–> </v-btn>--> <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" 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.prevent.stop="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')" 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')" dense @click="openUIACL"> <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" :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 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 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 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 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 dense>--> <!-- <v-list-item dense class="body-2 pt-2"> <div class="d-100 d-flex "> <v-icon color="" @click="toggleMini" class="mr-1" small>mdi-arrow-expand-horizontal</v-icon> <span v-shortkey="[ 'ctrl','shift', 'm']" @shortkey="$store.commit('windows/MutToggleTheme')"></span> <v-tooltip bottom> <template v-slot:activator="{ on }"> <v-icon v-on="on" class="mt-1 ml-3" size="22" @click="$store.commit('windows/MutToggleTheme')"> mdi-format-color-fill </v-icon> </template> Change theme (^⇧M) </v-tooltip> <span v-shortkey="[ 'ctrl','shift', 'b']" @shortkey="changeTheme"></span> <v-tooltip bottom> <template v-slot:activator="{ on }"> <v-icon @dblclick="showAppStore=true" @click="changeTheme" v-on="on" size="23" :style="$vuetify.theme.dark ? {}:{color:'lightgrey'}" class="ml-3">mdi-bat </v-icon> </template> <h3 class="pa-3"> {{ $vuetify.theme.dark ? 'It does come in Black (^⇧B)' : 'Does it come in Black ? (^⇧B)' }} <i></i> </h3> </v-tooltip> </div> </v-list-item>--> <!-- <v-tooltip bottom>--> <!-- <template v-slot:activator="{on}">--> <!-- <v-list-item dense v-on="on" @click="openLink('https://github.com/sponsors/nocodb')" class="body-2">--> <!-- <v-list-item-icon>--> <!-- <v-icon color="red" class=" heart-anim" small> mdi-heart</v-icon>--> <!-- </v-list-item-icon>--> <!-- <v-list-item-title><span class="font-weight-regular caption">Sponsor Us</span></v-list-item-title>--> <!-- </v-list-item>--> <!-- </template>--> <!-- Sponsor Us--> <!-- </v-tooltip>--> <!-- </v-list>--> <!-- <v-divider></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-icon small>mdi-menu-down</v-icon>--> </v-list-item> <v-list dense> <!-- <v-list-item v-for="role in rolesList" @click="setPreviewUSer(role.title)" :key="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>--> <!-- </v-list-item>--> <div class="mx-4 d-flex align-center mb-2"> <template v-for="(role, i) in rolesList"> <!-- <span v-if="i" vertical :key="i" class="mx-2 caption grey--text">or</span>--> <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> <!-- <v-list dense> <v-list-item> <v-list-item-title> <span class="body-2 grey--text">Community</span> <v-icon color="red" class=" heart-anim" small> mdi-heart</v-icon> </v-list-item-title> </v-list-item> <v-list-item dense v-on="on" @click="openLink('https://github.com/sponsors/nocodb')" class="body-2"> <v-list-item-icon> </v-list-item-icon> <v-list-item-title><span class="font-weight-regular caption">Sponsor Us</span></v-list-item-title> </v-list-item> <v-list-item dense v-on="on" @click="openLink('https://github.com/sponsors/nocodb')" class="body-2"> <v-list-item-icon> <v-icon color="red" class=" heart-anim" small> mdi-heart</v-icon> </v-list-item-icon> <v-list-item-title><span class="font-weight-regular caption">Sponsor Us</span></v-list-item-title> </v-list-item> <v-list-item dense v-on="on" @click="openLink('https://github.com/sponsors/nocodb')" class="body-2"> <v-list-item-icon> <v-icon color="red" class=" heart-anim" small> mdi-heart</v-icon> </v-list-item-icon> <v-list-item-title><span class="font-weight-regular caption">Sponsor Us</span></v-list-item-title> </v-list-item> </v-list>--> </div> </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="dialogGetTableName.dialogShow" :dialogShow="dialogGetTableName.dialogShow" :heading="dialogGetTableName.heading" :mtdDialogSubmit="mtdDialogGetTableNameSubmit" :mtdDialogCancel="mtdDialogGetTableNameCancel" />--> <textDlgSubmitCancel v-if="dialogRenameTable.dialogShow" :rules="[validateTableName]" :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="dialogGetViewName.dialogShow" :dialogShow="dialogGetViewName.dialogShow" :heading="dialogGetViewName.heading" :mtdDialogSubmit="mtdDialogGetViewNameSubmit" :mtdDialogCancel="mtdDialogGetViewNameCancel" />--> <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' export default { components: { draggable, ExcelImport, SponsorMini, DlgViewCreate, DlgTableCreate, textDlgSubmitCancel, dlgLabelSubmitCancel, }, 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', }, 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, }, rolesList: 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].tn, order: children[event.moved.newIndex].order, }]) }, openUIACL() { this.disableOrEnableModelTabAdd(); setTimeout(() => { this.$router.push({ query: { ...this.$route.query, nested_1: 'dbacl', }, }); }, 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 { console.log('add app store tab'); let item = {name: `${this.$t('title.appStore')} `, 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 { console.log('add roles tab'); 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 { console.log('add acl tab'); 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 { console.log('add audit tab'); 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 (!item) return; e.preventDefault(); 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) ); }, 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; } }, 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]; if (action) { console.log('action and context', item, action); if (action === 'ENV_DB_TABLES_CREATE') { this.dialogGetTableName.dialogShow = true; } 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); } 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') { console.log(`${item._nodes.type} Rename`); this.dialogRenameTable.cookie = item; this.dialogRenameTable.dialogShow = true; this.dialogRenameTable.defaultValue = item.name; } 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, }); console.log('migrations down done'); } 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' ) { console.log(`${item._nodes.type} 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'; console.log('Generated sql client node', sqlClientNode); 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(_tn, cookie) { let item = cookie; await this.$store.dispatch( // 'sqlMgr/ActSqlOpPlus',[ 'sqlMgr/ActSqlOp', [ { env: item._nodes.env, dbAlias: item._nodes.dbAlias, }, // 'tableRename', 'ncTableAliasRename', { tn: _tn, tn_old: item.name, }, ]); 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, tn: this.menuItem._nodes.tn, _tn: _tn, dbConnection: this.menuItem._nodes.dbConnection, type: 'table', dbKey: this.menuItem._nodes.dbKey, key: this.menuItem._nodes.key, tableDirKey: this.menuItem._nodes.tableDirKey, }, name: _tn, }); this.dialogRenameTable.dialogShow = false; this.dialogRenameTable.defaultValue = null; this.$toast.success('Table renamed successfully').goAway(3000); console.log(_tn, cookie); }, mtdDialogRenameTableCancel() { console.log('mtdDialogGetTableNameCancel cancelled'); 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, tn: table.name, _tn: 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); }, 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, _tn: 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) { console.log(tn); 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() { console.log('mtdDialogGetTableNameCancel cancelled'); this.dialogGetTableName.dialogShow = false; }, mtdDialogGetViewNameSubmit(view_name) { console.log(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() { console.log('mtdDialogGetTableNameCancel cancelled'); this.dialogGetViewName.dialogShow = false; }, mtdDialogGetFunctionNameSubmit(function_name) { console.log(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() { console.log('mtdDialogGetFunctionNameCancel cancelled'); this.dialogGetFunctionName.dialogShow = false; }, mtdDialogGetProcedureNameSubmit(procedure_name) { console.log(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) { console.log(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() { console.log('mtdDialogGetProcedureNameCancel cancelled'); this.dialogGetProcedureName.dialogShow = false; }, mtdDialogGetSequenceNameCancel() { console.log('mtdDialogGetSequenceNameCancel cancelled'); 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', { tn: item._nodes.tn, }, ]); await this.sqlMgr.sqlOpPlus( { env: item._nodes.env, dbAlias: item._nodes.dbAlias, }, 'tableDelete', {tn: item._nodes.tn, 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: 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/>. * */ -->