mirror of https://github.com/nocodb/nocodb
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.
867 lines
29 KiB
867 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 + '--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--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--text">{{dateToHowManyAgo(query.createdAt)}}</span>--> |
|
<!-- <v-btn text primary small class="caption grey--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--text' : hover, 'grey--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 style="width:100%;height:100%" v-if="showsqlTvs"> |
|
<v-row class="pa-0 ma-0 pa-2 pl-2 d-block"> |
|
<x-icon class="mr-2 cursor-pointer" @click="openNewCollection('/')" color="primary" |
|
tooltip="Create New SQL Collection">mdi-folder-plus-outline |
|
</x-icon> |
|
|
|
<x-icon class="mr-2 cursor-pointer" @click="openSqlFileCollection" color="primary" |
|
tooltip="Open SQL Collection">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-divider> |
|
|
|
<v-expansion-panels accordion focusable v-model="expandedPanel"> |
|
<v-expansion-panel |
|
v-for="(tv,i) in sqlTvs" |
|
:key="i"> |
|
<v-expansion-panel-header hide-actions> |
|
<template v-slot: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)"> |
|
</recursive-menu> |
|
|
|
|
|
</div> |
|
</template> |
|
</v-expansion-panel-header> |
|
<v-expansion-panel-content> |
|
|
|
<vue-tree-list |
|
class="body-2 sql-query-treeview px-1 pt-2" |
|
@click="tvNodeOnClick" |
|
@change-name="tvNodeRename" |
|
@delete-node="tvNodeDelete" |
|
@add-node="onAddNode" |
|
v-if="sqlTvs[i]" |
|
:model="tv" |
|
default-tree-node-name="new node" |
|
default-leaf-node-name="new leaf" |
|
v-bind:default-expanded="false"> |
|
|
|
<span slot="leafNodeIcon"></span> |
|
<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 v-slot:extraLeafNode> |
|
<v-icon small>mdi-delete</v-icon> |
|
</template> |
|
<template v-slot: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 style="height: calc(100% - 38px)" v-model="tab"> |
|
<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" |
|
@click="runSelectedSqlCode" |
|
color="success success">mdi-play |
|
</x-icon> |
|
|
|
<x-icon tooltip="Execute Query (⌘ ⌥ ↵)" icon-class="mx-2 mt-3 elevation-1" @click="runAllSqlCode" |
|
color="info info">mdi-play |
|
</x-icon> |
|
<x-icon tooltip="Bookmark Query (⌘ B)" |
|
icon-class="mx-2 mt-3 elevation-1 py-1" |
|
color="amber amber" |
|
@click="bookmarkQuery" small> |
|
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'" |
|
@click="showSqlCollectionToggle" small> |
|
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 " |
|
@click="openFile" |
|
small> |
|
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 " |
|
@click="fileSave(editors[tab])" small>save |
|
</x-icon> |
|
|
|
<x-icon tooltip="Clear Editor (⌘ N)" icon-class="mx-2 mt-3 elevation-1 py-1" @click="editorClear" |
|
color="error blue-grey " |
|
small> |
|
mdi-close-box |
|
</x-icon> |
|
</div> |
|
<div class="flex-grow-1" style="overflow:auto;height:100%"> |
|
<MonacoSqlEditor |
|
@execute="runSelectedSqlCode" |
|
@bookmark="bookmarkQuery" |
|
@searchHistory=" $refs.search.$el.querySelector('input').click()" |
|
@toggleBookmark="showSqlCollectionToggle" |
|
@saveFile="fileSave(editors[tab])" |
|
@openFile="openFile" |
|
@runAll="runAllSqlCode" |
|
@clearEditor="editorClear" |
|
:tables="tableList" |
|
:columnNames="tableColumnList" |
|
:ref="`editor-${i}`" |
|
:code.sync="editors[i].code" |
|
:columnNameCbk="columnNameCbk" |
|
cssStyle="height:100%" |
|
/> |
|
</div> |
|
</div> |
|
</v-tab-item> |
|
</v-tabs-items> |
|
</v-tabs> |
|
</div> |
|
</pane> |
|
</splitpanes> |
|
|
|
<dlgLabelSubmitCancel |
|
type="primary" |
|
v-if="closeFileDlg" |
|
:dialogShow="closeFileDlg" |
|
:actionsMtd="fileClose" |
|
heading="Save changes ?" |
|
/> |
|
|
|
</v-container> |
|
|
|
|
|
</template> |
|
|
|
<script> |
|
// Todo: handling resize bar when hidden |
|
|
|
|
|
import sqlRightClickOptions from '../../helpers/sqlRightClickOptions' |
|
import dlgLabelSubmitCancel from "../utils/dlgLabelSubmitCancel.vue"; |
|
import {mapGetters, mapActions} from "vuex"; |
|
import {SqlUI} from '../../helpers/SqlUiFactory'; |
|
import {VueTreeList, Tree, TreeNode} from 'vue-tree-list' |
|
import {Splitpanes, Pane} from 'splitpanes' |
|
|
|
|
|
// const {app, dialog, path, fs, shell, FileCollection} = require("electron").remote.require( |
|
// "./libs" |
|
// ); |
|
|
|
|
|
import Utils from '../../helpers/Utils'; |
|
|
|
import MonacoSqlEditor from "../monaco/MonacoSqlEditor"; |
|
|
|
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" |
|
}) |
|
}, |
|
methods: { |
|
dateToHowManyAgo: Utils.dateToHowManyAgo, |
|
findById: Utils.findById, |
|
|
|
|
|
async openNewCollection() { |
|
|
|
try { |
|
var toLocalPath = path.join(this.currentProjectFolder, 'server', 'tool', this.nodes.dbAlias, this.projectQueriesFolder); |
|
|
|
var userChosenPath = dialog.showSaveDialog({ |
|
defaultPath: toLocalPath, |
|
filters: [{name: 'JSON', extensions: ['json']}] |
|
}); |
|
|
|
if (userChosenPath) { |
|
console.log(userChosenPath) |
|
fs.writeFileSync(userChosenPath, "[]", 'utf-8'); |
|
let 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.cn) |
|
// 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) { |
|
|
|
var vm = this; |
|
|
|
function _dfs(oldNode) { |
|
var newNode = {} |
|
|
|
for (var k in oldNode) { |
|
if (k !== 'children' && k !== 'parent') { |
|
newNode[k] = oldNode[k] |
|
} |
|
} |
|
|
|
if (oldNode.children && oldNode.children.length > 0) { |
|
newNode.children = [] |
|
for (var 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) { |
|
var 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 { |
|
let 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().indexOf(queryText.toLowerCase()) > -1 |
|
}, |
|
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]) { |
|
let 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]) { |
|
let fileName = path.basename(file[0]); |
|
const pathObj = { |
|
path: file[0] + '', |
|
fileName: 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; |
|
} |
|
let 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() { |
|
let 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() { |
|
let q = this.$refs[`editor-${this.tab}`][0].getCurrentQuery(); |
|
|
|
if (q.trim()) { |
|
this.showsqlTvs = true; |
|
|
|
var 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; |
|
|
|
let data = new Tree(await fileCollection.read()); |
|
this.$set(this.sqlTvs, index, data); |
|
} catch (e) { |
|
console.log('Error in loadFileCollection:', e); |
|
throw e; |
|
} |
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
beforeCreated() { |
|
}, |
|
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 = SqlUI.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.tn) |
|
|
|
|
|
this.expandedPanel = 0; |
|
}, |
|
mounted() { |
|
} |
|
, |
|
beforeDestroy() { |
|
} |
|
, |
|
destroy() { |
|
} |
|
, |
|
validate({params}) { |
|
return true; |
|
} |
|
, |
|
head() { |
|
return {}; |
|
} |
|
, |
|
props: ["nodes"], |
|
watch: |
|
{ |
|
editors: { |
|
handler(editors) { |
|
this.$store.commit('sqlClient/MutSetEditors', editors) |
|
} |
|
, |
|
deep: true |
|
} |
|
} |
|
, |
|
directives: {} |
|
}; |
|
|
|
|
|
</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/>. |
|
* |
|
*/ |
|
-->
|
|
|