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

276 lines
7.8 KiB

<template>
<v-container
class="ma-0 pa-0"
style="height:calc(100% - 50px)"
fluid
:style="cssStyle ? cssStyle : ''"
>
<monaco-editor
ref="editor"
v-model="codeLocal"
style="height: 100% "
class="editor card"
theme="vs-dark"
lang="sql"
:minimap="minimap"
:read-only="readOnly"
:actions="actions"
:tables="tables"
:column-names="columnNames"
:column-name-cbk="columnNameCbk"
@selection="selectionFn"
/>
</v-container>
</template>
<script>
import sqlFormatter from 'sql-formatter'
import MonacoEditor from './index.js'
const monaco = require('monaco-editor')
export default {
ssr: false,
components: {
MonacoEditor
// sqlFormatter
},
props: ['code', 'cssStyle', 'readOnly', 'heading', 'tables', 'columnNames', 'columnNameCbk'],
data() {
const vm = this
return {
codeLocal: `${this.code || ''}`,
selection: null,
minimap: {
enabled: true
},
actions: [{
// An unique identifier of the contributed action.
id: 'x-sql-pretify',
// A label of the action that will be presented to the user.
label: 'Format SQL',
// An optional array of keybindings for the action.
keybindings: [
monaco.KeyMod.CtrlCmd | monaco.KeyMod.Alt | monaco.KeyCode.KEY_L
],
// A precondition for this action.
precondition: null,
// A rule to evaluate on top of the precondition in order to dispatch the keybindings.
keybindingContext: null,
contextMenuGroupId: 'navigation',
contextMenuOrder: 1.5,
// Method that will be executed when the action is triggered.
// @param editor The editor instance is passed in as a convinience
run(ed) {
vm.pretify()
}
}, {
// An unique identifier of the contributed action.
id: 'x-sql-execute',
// A label of the action that will be presented to the user.
label: 'Run Query',
// An optional array of keybindings for the action.
keybindings: [
monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter
],
// A precondition for this action.
precondition: null,
// A rule to evaluate on top of the precondition in order to dispatch the keybindings.
keybindingContext: null,
contextMenuGroupId: 'navigation',
contextMenuOrder: 1.5,
// Method that will be executed when the action is triggered.
// @param editor The editor instance is passed in as a convinience
run(ed) {
vm.$emit('execute', ed)
}
}, {
id: 'x-sql-run-all',
label: 'Run All',
keybindings: [
monaco.KeyMod.CtrlCmd | monaco.KeyMod.Alt | monaco.KeyCode.Enter
],
precondition: null,
keybindingContext: null,
contextMenuGroupId: 'navigation',
contextMenuOrder: 1.5,
run(ed) {
vm.$emit('runAll', ed)
}
}, {
id: 'x-sql-bookmark',
label: 'Bookmark Query',
keybindings: [
monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_B
],
precondition: null,
keybindingContext: null,
contextMenuGroupId: 'navigation',
contextMenuOrder: 1.5,
run(ed) {
vm.$emit('bookmark', ed)
}
}, {
id: 'x-sql-search',
label: 'Search Query History',
keybindings: [
monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_P
],
precondition: null,
keybindingContext: null,
contextMenuGroupId: 'navigation',
contextMenuOrder: 1.5,
run(ed) {
vm.$emit('searchHistory', ed)
}
}, {
id: 'x-sql-toggle-bookmark',
label: 'Show/Hide Bookmarks',
keybindings: [
monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_K
],
precondition: null,
keybindingContext: null,
contextMenuGroupId: 'navigation',
contextMenuOrder: 1.5,
run(ed) {
vm.$emit('toggleBookmark', ed)
}
}, {
id: 'x-sql-file-open',
label: 'Open File',
keybindings: [
monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_O
],
precondition: null,
keybindingContext: null,
contextMenuGroupId: 'navigation',
contextMenuOrder: 1.5,
run(ed) {
vm.$emit('openFile', ed)
}
}, {
id: 'x-sql-save-file',
label: 'Save File',
keybindings: [
monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S
],
precondition: null,
keybindingContext: null,
contextMenuGroupId: 'navigation',
contextMenuOrder: 1.5,
run(ed) {
vm.$emit('saveFile', ed)
}
}, {
id: 'x-sql-clear-editor',
label: 'Clear Editor',
keybindings: [
monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_N
],
precondition: null,
keybindingContext: null,
contextMenuGroupId: 'navigation',
contextMenuOrder: 1.5,
run(ed) {
vm.$emit('clearEditor', ed)
}
}]
}
},
computed: {},
watch: {
codeLocal(newValue) {
// INFO: for updating value of prop `code` in parent comp
// console.log("update:code Event Emitted", newValue);
this.$emit('update:code', newValue)
},
code(newValue) {
this.codeLocal = newValue
}
},
methods: {
selectionFn() {
const editor = this.$refs.editor.getMonaco()
const range = editor.getSelection()
const selectedText = editor.getModel().getValueInRange(range)
this.selection = selectedText
this.selectionRange = range
},
pretify() {
const editor = this.$refs.editor.getMonaco()
if (this.selection && this.selectionRange) {
const op = {
identifier: 'prettifySelection',
range: this.selectionRange,
text: sqlFormatter.format(this.selection),
forceMoveMarkers: true
}
editor.executeEdits('sqlFormatter', [op])
this.selection = null
this.selectionRange = null
} else {
// console.log("selected format before:: ", this.codeLocal);
const op = {
identifier: 'prettifyDoc',
range: editor.getModel().getFullModelRange(),
text: sqlFormatter.format(this.codeLocal || ''),
forceMoveMarkers: true
}
editor.executeEdits('sqlFormatter', [op])
}
},
toggleMiniMap() {
const editor = this.$refs.editor.getMonaco()
this.minimap.enabled = !this.minimap.enabled
editor.updateOptions({
minimap: {
enabled: this.minimap.enabled
}
})
},
getCurrentQuery() {
return this.$refs.editor.getCurrentQuery()
},
getAllContent() {
return this.$refs.editor.getAllContent()
},
focus() {
this.$refs.editor.focus()
}
}
}
</script>
<style>
.editor {
/* width: 100%;
height: 800px; */
}
</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/>.
*
*/
-->