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

883 lines
29 KiB

<template>
<v-container class="ma-0 pa-0 sql-editor" fluid style="height: 100%">
<!-- <v-toolbar class="elevation-0 search-toolbar pa-0" :height="48">-->
<!-- <v-autocomplete-->
<!-- ref="search"-->
<!-- v-model="selectedQueryItem"-->
<!-- @change="changedSelectedQuery(selectedQueryItem)"-->
<!-- clearable-->
<!-- item-text="query"-->
<!-- outlined-->
<!-- solo-inverted-->
<!-- dense-->
<!-- single-line-->
<!-- hide-details-->
<!-- open-on-clear-->
<!-- label="Search queries by words ( ⌘ P )"-->
<!-- :items="$store.state.sqlClient.list"-->
<!-- :filter="queryFilter"-->
<!-- prepend-inner-icon="search"-->
<!-- no-data-text="No queries in the search history"-->
<!-- >-->
<!-- <template v-slot:item="{item:query,index:i}">-->
<!-- <v-hover v-slot:default="{ hover }">-->
<!-- <div style="width: 100%">-->
<!-- <v-btn class="pl-0 ml-0 " small text :tooltip="query.type"-->
<!-- >-->
<!-- <b :class="query.typeColor + '&#45;&#45;text'">-->
<!-- <v-icon class="mx-0 ml-n2" :color="query.response.status === 0 ? 'success' : 'error'">-->
<!-- mdi-circle-small-->
<!-- </v-icon>-->
<!-- <span>{{query.type}}</span>-->
<!-- </b>-->
<!-- </v-btn>-->
<!-- <span class="caption grey&#45;&#45;text ml-2" v-if="query.timeTaken">Query took {{query.timeTaken}} Seconds</span>-->
<!-- <div class="float-right">-->
<!-- <span v-if="query.createdAt" class="caption grey&#45;&#45;text">{{dateToHowManyAgo(query.createdAt)}}</span>-->
<!-- <v-btn text primary small class="caption grey&#45;&#45;text"-->
<!-- v-if="query.query.length > 422"-->
<!-- @click.stop="expanded = expanded === i ? -1 : i">...More-->
<!-- </v-btn>-->
<!-- <v-btn small text class=" " @click.prevent.stop="queryDeleteFromHistory(query)">-->
<!-- <v-icon small color="warning">mdi-delete-outline</v-icon>-->
<!-- </v-btn>-->
<!-- <v-btn text primary small @click="copyAndExecute(query)">-->
<!-- <v-icon color="success">mdi-play</v-icon>-->
<!-- </v-btn>-->
<!-- </div>-->
<!-- <div>-->
<!-- <v-hover v-slot:default="{ hover }">-->
<!-- <p class="pa-1"-->
<!-- :class="{'white&#45;&#45;text' : hover, 'grey&#45;&#45;text' : !hover}"-->
<!-- style="white-space: normal;cursor: pointer">-->
<!-- {{expanded === i ? query.query : query.query.substr(0,442)}}</p>-->
<!-- </v-hover>-->
<!-- </div>-->
<!-- </div>-->
<!-- </v-hover>-->
<!-- </template>-->
<!-- </v-autocomplete>-->
<!-- </v-toolbar>-->
<splitpanes style="height: calc(100%)" class="xc-theme">
<pane v-if="showsqlTvs" :size="showsqlTvs ? 25 : 0" :max-size="showsqlTvs ? 50 : 0" style="overflow: auto">
<div v-if="showsqlTvs" style="width: 100%; height: 100%">
<v-row class="pa-0 ma-0 pa-2 pl-2 d-block">
<x-icon
class="mr-2 cursor-pointer"
color="primary"
tooltip="Create New SQL Collection"
@click="openNewCollection('/')"
>
mdi-folder-plus-outline
</x-icon>
<x-icon
class="mr-2 cursor-pointer"
color="primary"
tooltip="Open SQL Collection"
@click="openSqlFileCollection"
>
mdi-folder-open-outline
</x-icon>
<span class="caption float-right warning--text mt-1" style="font-style: italic">
SQL Editor is in<v-icon small color="warning">mdi-alpha</v-icon>
</span>
</v-row>
<v-divider />
<v-expansion-panels v-model="expandedPanel" accordion focusable>
<v-expansion-panel v-for="(tv, i) in sqlTvs" :key="i">
<v-expansion-panel-header hide-actions>
<template #default="{ open }">
<div class="d-flex">
<v-icon color="">
{{ open ? 'mdi-menu-down' : 'mdi-menu-right' }}
</v-icon>
<v-icon small color="grey" class="ml-1 mr-2"> mdi-folder </v-icon>
<span class="body-2 flex-grow-1">{{
$store.getters['sqlClient/GtrCurrentSqlFilePaths'][i].fileName
}}</span>
<x-icon
color="white grey"
class="float-right mr-3"
small
@click="(toggle[i] = true), (x = $event.clientX), (y = $event.clientY)"
@click.stop=""
>
mdi-dots-horizontal
</x-icon>
<recursive-menu
v-model="toggle[i]"
:position-x="x"
:position-y="y"
:items="{
'Add Folder': 'add-folder',
'Reveal in Folder': 'reveal-in-folder',
'Delete Collection': 'delete-collection',
'Refresh Collection': 'refresh-collection',
}"
@click="ctxMenuClickHandler($event, i)"
/>
</div>
</template>
</v-expansion-panel-header>
<v-expansion-panel-content>
<vue-tree-list
v-if="sqlTvs[i]"
class="body-2 sql-query-treeview px-1 pt-2"
:model="tv"
default-tree-node-name="new node"
default-leaf-node-name="new leaf"
:default-expanded="false"
@click="tvNodeOnClick"
@change-name="tvNodeRename"
@delete-node="tvNodeDelete"
@add-node="onAddNode"
>
<span slot="leafNodeIcon" />
<v-icon slot="treeNodeIcon" small color="grey" class="mr-1"> mdi-folder-star </v-icon>
<v-icon slot="addTreeNode" small> mdi-folder-plus </v-icon>
<v-icon slot="addLeafNode" small> mdi-file-plus </v-icon>
<v-icon slot="editNode" small class="mt-n1"> mdi-file-edit </v-icon>
<v-icon slot="delNode" small> mdi-delete </v-icon>
<template #extraLeafNode>
<v-icon small> mdi-delete </v-icon>
</template>
<template #label="{ item }">
<v-icon
v-if="item.isLeaf"
small
class="mr-1"
:color="item.response && item.response.status === 0 ? 'success' : 'error'"
>
mdi-bookmark-outline
</v-icon>
{{ item.name }}
</template>
</vue-tree-list>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</div>
</pane>
<pane style="overflow: auto" :size="showsqlTvs ? 75 : 100">
<div style="position: relative; height: 100%; min-height: 200px">
<v-tabs v-model="tab" style="height: 100%" dense height="38" class="sql-editor-tab">
<v-tab v-for="(c, i) in editors" :key="i">
<template v-if="c.type === 'file'">
{{ c.fileName }}
<v-icon small class="ml-2" @click.prevent.stop="fileClose('showDialog', i)"> close </v-icon>
</template>
<template v-else> Query - {{ i + 1 }} </template>
</v-tab>
<v-tabs-items v-model="tab" style="height: calc(100% - 38px)">
<v-tab-item v-for="(c, i) in editors" :key="i" style="height: 100%">
<div class="d-flex" style="height: 100%; position: relative">
<div style="" class="text-center flex-shrink-1 d-flex flex-column">
<x-icon
tooltip="Execute Query (⌘ ↵)"
icon-class="mx-2 mt-3 elevation-1"
color="success success"
@click="runSelectedSqlCode"
>
mdi-play
</x-icon>
<x-icon
tooltip="Execute Query (⌘ ⌥ ↵)"
icon-class="mx-2 mt-3 elevation-1"
color="info info"
@click="runAllSqlCode"
>
mdi-play
</x-icon>
<x-icon
tooltip="Bookmark Query (⌘ B)"
icon-class="mx-2 mt-3 elevation-1 py-1"
color="amber amber"
small
@click="bookmarkQuery"
>
mdi-star
</x-icon>
<x-icon
:tooltip="showsqlTvs ? 'Close Sql Collection( ⌘ K )' : 'Open Sql Collection( ⌘ K )'"
icon-class="mx-2 mt-3 elevation-1 py-1"
:color="showsqlTvs ? 'amber amber' : 'amber amber'"
small
@click="showSqlCollectionToggle"
>
mdi-folder-star
</x-icon>
<x-icon
tooltip="Open New File (⌘ O)"
icon-class="mx-2 mt-3 elevation-1 py-1"
color="primary blue-grey "
small
@click="openFile"
>
mdi-file
</x-icon>
<x-icon
tooltip="Save Editor Contents (⌘ S)"
icon-class="mx-2 mt-3 elevation-1 py-1"
color="primary blue-grey "
small
@click="fileSave(editors[tab])"
>
save
</x-icon>
<x-icon
tooltip="Clear Editor (⌘ N)"
icon-class="mx-2 mt-3 elevation-1 py-1"
color="error blue-grey "
small
@click="editorClear"
>
mdi-close-box
</x-icon>
</div>
<div class="flex-grow-1" style="overflow: auto; height: 100%">
<MonacoSqlEditor
:ref="`editor-${i}`"
:tables="tableList"
:column-names="tableColumnList"
:code.sync="editors[i].code"
:column-name-cbk="columnNameCbk"
css-style="height:100%"
@execute="runSelectedSqlCode"
@bookmark="bookmarkQuery"
@searchHistory="$refs.search.$el.querySelector('input').click()"
@toggleBookmark="showSqlCollectionToggle"
@saveFile="fileSave(editors[tab])"
@openFile="openFile"
@runAll="runAllSqlCode"
@clearEditor="editorClear"
/>
</div>
</div>
</v-tab-item>
</v-tabs-items>
</v-tabs>
</div>
</pane>
</splitpanes>
<dlgLabelSubmitCancel
v-if="closeFileDlg"
type="primary"
:dialog-show="closeFileDlg"
:actions-mtd="fileClose"
:heading="`$t('tooltip.saveChanges') ?`"
/>
</v-container>
</template>
<script>
/* eslint-disable */
// Todo: handling resize bar when hidden
import { mapGetters } from 'vuex';
import { VueTreeList, Tree, TreeNode } from 'vue-tree-list';
import { Splitpanes, Pane } from 'splitpanes';
import sqlRightClickOptions from '../../helpers/sqlRightClickOptions';
import dlgLabelSubmitCancel from '../utils/DlgLabelSubmitCancel.vue';
import Utils from '../../helpers/Utils';
import MonacoSqlEditor from '../monaco/MonacoSqlEditor';
import { SqlUiFactory } from 'nocodb-sdk';
export default {
components: {
MonacoSqlEditor,
dlgLabelSubmitCancel,
VueTreeList,
Splitpanes,
Pane,
},
data() {
return {
expandedPanel: null,
toggle: {},
tableList: null,
tableColumnList: {},
data: new Tree([
{
name: 'Node 1',
id: 1,
pid: 0,
dragDisabled: true,
addTreeNodeDisabled: true,
addLeafNodeDisabled: true,
editNodeDisabled: true,
delNodeDisabled: true,
children: [
{
name: 'Node 1-2',
id: 2,
isLeaf: true,
pid: 1,
},
],
},
{
name: 'Node 2',
id: 3,
pid: 0,
disabled: true,
},
{
name: 'Node 3',
id: 4,
pid: 0,
},
]),
opened: [],
sqlTvs: [],
fileCollections: [],
filePaths: [],
showsqlTvs: true,
menuVisible: false,
x: 0,
y: 0,
menuItem: null,
closeIndex: null,
closeFileDlg: false,
selectedQueryItem: null,
tab: 0,
expanded: null,
searchQuery: '',
searchOverlay: false,
folderOverlay: false,
loading: false,
editors: [],
headers1: [
{
text: 'API Call History',
align: 'left',
sortable: false,
value: 'query',
class: 'text-center black',
},
],
};
},
computed: {
...mapGetters({
sqlMgr: 'sqlMgr/sqlMgr',
currentProjectFolder: 'project/currentProjectFolder',
projectQueriesFolder: 'project/projectQueriesFolder',
}),
},
watch: {
editors: {
handler(editors) {
this.$store.commit('sqlClient/MutSetEditors', editors);
},
deep: true,
},
},
async created() {
this.$store.dispatch('sqlClient/loadSqlCollectionForProject', {
projectId: 1,
projectName: this.$store.getters['project/GtrProjectName'],
});
try {
/* load all files that are were previously opened */
if (!this.$store.getters['sqlClient/GtrCurrentSqlFilePaths'].length) {
const defaultPath = ''; // path.join(this.currentProjectFolder, 'server', 'tool', this.nodes.dbAlias, this.projectQueriesFolder, 'queries.xc.json');
this.$store.commit('sqlClient/MutSqlFilePathsAdd', {
path: defaultPath,
fileName: '', // path.basename(defaultPath)
});
}
for (let i = 0; i < this.$store.getters['sqlClient/GtrCurrentSqlFilePaths'].length; ++i) {
await this.loadFileCollection(this.$store.getters['sqlClient/GtrCurrentSqlFilePaths'][i]);
}
} catch (e) {
console.log('Failed to load previously opened query collections', e);
}
this.sqlUi = SqlUiFactory.create(this.nodes.dbConnection);
console.log('------------', this.nodes);
this.editors = this.$store.state.sqlClient.editors.map(editor => ({ ...editor }));
this.checkClipboardForQuery(this.$store.state.sqlClient.clipboardQuery);
const vm = this;
this.$store.watch(
state => state.sqlClient.clipboardQuery,
clipboardQuery => vm.checkClipboardForQuery(clipboardQuery)
);
// const client = await this.sqlMgr.projectGetSqlClient({
// env: this.nodes.env,
// dbAlias: this.nodes.dbAlias
// });
// const result = await client.tableList();
// console.log(result)
this.tableList = []; // result.data.list.map(table => table.table_name)
this.expandedPanel = 0;
},
mounted() {},
beforeDestroy() {},
methods: {
dateToHowManyAgo: Utils.dateToHowManyAgo,
findById: Utils.findById,
async openNewCollection() {
// try {
// const toLocalPath = path.join(this.currentProjectFolder, 'server', 'tool', this.nodes.dbAlias, this.projectQueriesFolder)
//
// const userChosenPath = dialog.showSaveDialog({
// defaultPath: toLocalPath,
// filters: [{ name: 'JSON', extensions: ['json'] }]
// })
//
// if (userChosenPath) {
// console.log(userChosenPath)
// fs.writeFileSync(userChosenPath, '[]', 'utf-8')
// const pathObj = {
// path: userChosenPath,
// fileName: path.basename(userChosenPath)
// }
// this.$store.commit('sqlClient/MutSqlFilePathsAdd', pathObj)
// await this.loadFileCollection(pathObj)
// }
// this.$toast.success('New collection loaded successfully').goAway(5000)
// } catch (e) {
// console.log(e)
// throw e
// }
},
async columnNameCbk(tn) {
// tableColumnList
//
// const client = await this.sqlMgr.projectGetSqlClient({
// env: this.nodes.env,
// dbAlias: this.nodes.dbAlias
// });
// const result = await client.columnList({tn});
// const columns = result.data.list.map(table => table.column_name)
// this.$set(this.tableColumnList, tn, columns);
// return columns;
return [];
},
async tvNodeDelete(node) {
console.log(node);
node.remove();
await this.savefileCollections(this.expandedPanel);
},
async tvNodeRename(params) {
console.log(params);
await this.savefileCollections(this.expandedPanel);
},
async onAddNode(params) {
console.log(params);
await this.savefileCollections(this.expandedPanel);
},
tvNodeOnClick(params) {
console.log(params);
if (params.query) {
this.selectQuery(params);
}
},
async openCollectionFolder(pathString) {
shell.showItemInFolder(pathString);
},
tvToObject(index) {
const vm = this;
function _dfs(oldNode) {
const newNode = {};
for (const k in oldNode) {
if (k !== 'children' && k !== 'parent') {
newNode[k] = oldNode[k];
}
}
if (oldNode.children && oldNode.children.length > 0) {
newNode.children = [];
for (let i = 0, len = oldNode.children.length; i < len; i++) {
newNode.children.push(_dfs(oldNode.children[i]));
}
}
return newNode;
}
return _dfs(vm.sqlTvs[index]).children;
},
async tvNodeFolderAdd(index) {
const node = new TreeNode({ name: 'New Folder', isLeaf: false });
if (!this.sqlTvs[index].children) {
this.sqlTvs[index].children = [];
}
this.sqlTvs[index].addChildren(node);
await this.savefileCollections(index);
},
async ctxMenuClickHandler(actionEvent, index) {
console.log(actionEvent, index);
switch (actionEvent.value) {
case 'add-folder':
this.tvNodeFolderAdd(index);
break;
case 'reveal-in-folder':
await this.openCollectionFolder(this.$store.getters['sqlClient/GtrCurrentSqlFilePaths'][index].path);
break;
case 'delete-collection':
this.$store.commit('sqlClient/MutSqlFilePathsRemove', index);
this.fileCollections.splice(index, 1);
this.sqlTvs.splice(index, 1);
break;
case 'refresh-collection':
await this.refreshFileCollection(index);
break;
default:
break;
}
// this.deleteQueryByPath(this.sqlTvs, this.menuItem.path);
},
async runSelectedSqlCode() {
this.executeQuery(this.$refs[`editor-${this.tab}`][0].getCurrentQuery());
},
async runAllSqlCode() {
const queryString = this.$refs[`editor-${this.tab}`][0].getAllContent();
const queries = this.sqlUi.splitQueries(queryString);
if (queries) {
for (const query of queries) {
await this.executeQuery(query);
}
} else {
await this.executeQuery('');
}
console.log(queries);
},
async runSqlCode() {
this.executeQuery(this.editors[this.tab].code);
},
async executeQuery(query) {
if (query.trim() === '') {
this.$toast.info('Query is empty').goAway(5000);
return;
}
this.loading = true;
try {
const result = await this.$store.dispatch('sqlClient/executeQuery', {
envs: {
env: this.nodes.env,
dbAlias: this.nodes.dbAlias,
},
query,
});
this.$store.commit('outputs/MutListSet', { sqlUi: this.sqlUi, headers: [], result });
// this.result = this.sqlUi.handleRawOutput(result, this.headers);
} catch (e) {
this.$toast.error('Query failed : ' + e.message).goAway(3000);
this.$store.commit('outputs/MutListSet', {
headers: [{ text: 'Mesage', value: 'message', sortable: false }],
result: [{ message: e.message }],
});
} finally {
this.loading = false;
}
},
editorClear() {
this.editors[this.tab].code = '';
this.$store.commit('outputs/MutClear');
},
queryDeleteFromHistory(item) {
this.$store.commit('sqlClient/MutListRemoveItem', item);
},
selectQuery({ query }) {
if (this.editors[this.tab].code.trim()) {
this.editors[this.tab].code += '\n\n' + query;
} else {
this.editors[this.tab].code = query;
}
this.$refs[`editor-${this.tab}`][0].focus();
},
async copyAndExecute(query) {
this.selectQuery(query);
await this.runSqlCode();
},
queryFilter(item, queryText, itemText) {
return item.query.toLowerCase().includes(queryText.toLowerCase());
},
changedSelectedQuery(query) {
this.selectQuery({ query });
},
checkClipboardForQuery(clipboardQuery) {
if (clipboardQuery) {
this.$set(this.editors[this.tab], 'code', clipboardQuery);
this.$store.commit('sqlClient/MutSetClipboardQuery', null);
}
},
openFile() {
// if (this.editors.filter(({ type }) => type === 'file').length >= 4) {
// this.$toast.info('Only 4 files can be opened').goAway(4000)
// return
// }
// const vm = this
// const file = dialog.showOpenDialog({
// properties: ['openFile']
// })
// if (file && file[0]) {
// const fileName = path.basename(file[0])
// fs.readFile(file[0], 'utf8', function (err, data) {
// if (err) { return console.log(err) }
// vm.editors.push({ code: data, type: 'file', fileName, filePaths: file[0], edited: false })
// vm.tab = vm.editors.length - 1
// // data is the contents of the text file we just read
// })
// }
},
openSqlFileCollection() {
// const vm = this
// const file = dialog.showOpenDialog({
// properties: ['openFile']
// })
// if (file && file[0]) {
// const fileName = path.basename(file[0])
// const pathObj = {
// path: file[0] + '',
// fileName
// }
//
// if (this.$store.getters['sqlClient/GtrCurrentSqlFilePaths'].every(({ path: p }) => p !== pathObj.path)) {
// this.$store.commit('sqlClient/MutSqlFilePathsAdd', pathObj)
// this.loadFileCollection(pathObj)
// } else {
// this.$toast.info('File already exist in collection').goAway(4000)
// }
// }
},
showSqlCollectionToggle(status = true) {
this.showsqlTvs = !this.showsqlTvs;
},
fileSave(editor, cbk = null) {
// console.log(editor)
// if (editor.type != 'file') {
// return
// }
// const vm = this
// fs.writeFile(editor.filePaths, editor.code, 'utf-8', function (err, result) {
// if (err) {
// vm.$toast.error('Error saving the file').goAway(5000)
// } else {
// vm.$toast.success('File saved successfully').goAway(5000)
// }
// if (cbk) { cbk(err, result) }
// })
},
async fileClose(action = '', index) {
if (action === 'showDialog') {
this.closeFileDlg = true;
this.closeIndex = index;
} else if (action === 'hideDialog') {
this.editors.splice(this.closeIndex, 1);
this.closeFileDlg = false;
this.closeIndex = null;
} else {
const vm = this;
this.fileSave(this.editors[this.closeIndex], function (err, result) {
vm.editors.splice(vm.closeIndex, 1);
vm.closeIndex = null;
vm.closeFileDlg = false;
});
}
},
queryClickHandler(item) {
console.log('bookmark', item);
if (item.type !== 'folder') {
this.selectQuery({ query: item.query });
}
},
ctxMenuShow(e, item) {
if (!item) {
return;
}
this.menuItem = item;
e.preventDefault();
this.x = e.clientX;
this.y = e.clientY;
this.$nextTick(() => {
this.menuVisible = true;
});
},
ctxMenuOptions() {
if (!this.menuItem || !this.menuItem) {
return;
}
const options = sqlRightClickOptions[this.menuItem.type === 'folder' ? 'folder' : 'file'];
return options;
},
async fileCollectionsReload() {
const data = new Tree(await this.fileCollections.read());
console.log(data);
this.sqlTvs = data;
// this.$set(this, 'sqlTvs', data);
},
async savefileCollections(index = 0) {
await this.fileCollections[index].write({ data: this.tvToObject(index) });
},
async bookmarkQuery() {
const q = this.$refs[`editor-${this.tab}`][0].getCurrentQuery();
if (q.trim()) {
this.showsqlTvs = true;
const node = new TreeNode({
id: Date.now(),
type: 'select',
typeColor: 'success',
query: q,
response: { status: 0 },
label: 'Example',
name: 'Last saved query',
pid: 0,
isLeaf: true,
});
let expandedPanelIndex = this.expandedPanel;
if (typeof expandedPanelIndex !== 'number') {
expandedPanelIndex = this.$store.getters['sqlClient/GtrCurrentSqlFilePaths'].findIndex(
file =>
file.path ===
path.join(
this.currentProjectFolder,
'server',
'tool',
this.nodes.dbAlias,
this.projectQueriesFolder,
'queries.xc.json'
)
);
}
if (!this.sqlTvs[expandedPanelIndex].children) {
this.sqlTvs[expandedPanelIndex].children = [];
}
this.sqlTvs[expandedPanelIndex].addChildren(node);
await this.savefileCollections(expandedPanelIndex);
this.$toast.success('Query bookmarked').goAway(1000);
}
},
async loadFileCollection(pathObj, index = 0) {
// try {
// const fileCollection = new FileCollection(pathObj);
// await fileCollection.init();
//
// this.fileCollections.push(fileCollection);
//
// let data = new Tree(await fileCollection.read());
// this.sqlTvs.push(data);
// } catch (e) {
// console.log('Error in loadFileCollection:', e);
// throw e;
// }
},
async refreshFileCollection(index = 0) {
try {
const pathObj = this.$store.getters['sqlClient/GtrCurrentSqlFilePaths'][index];
const fileCollection = new FileCollection(pathObj);
await fileCollection.init();
this.fileCollections[index] = fileCollection;
const data = new Tree(await fileCollection.read());
this.$set(this.sqlTvs, index, data);
} catch (e) {
console.log('Error in loadFileCollection:', e);
throw e;
}
},
},
beforeCreated() {},
destroy() {},
directives: {},
validate({ params }) {
return true;
},
head() {
return {};
},
props: ['nodes'],
};
</script>
<style scoped>
.vertical-resizer {
height: 5px;
background: grey;
cursor: ns-resize;
position: relative;
}
.vertical-resizer + * {
overflow-y: auto;
}
</style>
<!--
/**
* @copyright Copyright (c) 2021, Xgene Cloud Ltd
*
* @author Naveen MR <oof1lab@gmail.com>
* @author Pranav C Balan <pranavxc@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/>.
*
*/
-->