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

1965 lines
70 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"
>
<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"
>
&lt;!&ndash; <v-icon v-if="mini">mdi-chevron-right-circle</v-icon>&ndash;&gt;
&lt;!&ndash; <v-icon v-else>mdi-pin-outline</v-icon>&ndash;&gt;
<v-icon class="grey&#45;&#45;text">mdi-arrow-expand-horizontal</v-icon>
&lt;!&ndash; <v-icon v-else>mdi-arrow-expand-horizontal</v-icon>&ndash;&gt;
</v-btn>-->
<v-text-field
v-else
v-model="search"
placeholder="Search tables"
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">
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">
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</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</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&#45;&#45;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&#45;&#45;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&#45;&#45;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"
},
validateTableName,
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: '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 {
console.log('add roles tab');
let item = {name: '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: 'Meta Management', 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: '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,
},
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,
};
}
},
},
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/>.
*
*/
-->