mirror of https://github.com/nocodb/nocodb
Pranav C
2 years ago
5 changed files with 17935 additions and 176 deletions
@ -0,0 +1,125 @@ |
|||||||
|
/* eslint-disable */ |
||||||
|
// import assign from "nano-assign";
|
||||||
|
// import sqlAutoCompletions from "./sqlAutoCompletions";
|
||||||
|
// import {ext} from "vee-validate/dist/rules.esm";
|
||||||
|
|
||||||
|
|
||||||
|
export default { |
||||||
|
name: "CustomMonacoEditor", |
||||||
|
|
||||||
|
props: { |
||||||
|
value: { |
||||||
|
default: "", |
||||||
|
type: String |
||||||
|
}, |
||||||
|
theme: { |
||||||
|
type: String, |
||||||
|
default: "vs-dark" |
||||||
|
}, |
||||||
|
lang: {type:String, default: 'typescript'}, |
||||||
|
readOnly:Boolean |
||||||
|
}, |
||||||
|
|
||||||
|
model: { |
||||||
|
event: "change" |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
value(newVal) { |
||||||
|
if (newVal !== this.editor.getValue()) { |
||||||
|
if (typeof newVal === 'object') { |
||||||
|
this.editor.setValue(JSON.stringify(newVal, 0, 2)); |
||||||
|
} else { |
||||||
|
this.editor.setValue(newVal); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
mounted() { |
||||||
|
this.$nextTick(() => { |
||||||
|
if (this.amdRequire) { |
||||||
|
this.amdRequire(["vs/editor/editor.main"], () => { |
||||||
|
this.initMonaco(window.monaco); |
||||||
|
}); |
||||||
|
} else { |
||||||
|
// ESM format so it can't be resolved by commonjs `require` in eslint
|
||||||
|
// eslint-disable import/no-unresolved
|
||||||
|
const monaco = require("monaco-editor"); |
||||||
|
// monaco.editor.defineTheme('monokai', require('./Cobalt.json'))
|
||||||
|
// monaco.editor.setTheme('monokai')
|
||||||
|
|
||||||
|
this.monaco = monaco; |
||||||
|
this.initMonaco(monaco); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
unmounted() { |
||||||
|
|
||||||
|
}, |
||||||
|
|
||||||
|
beforeDestroy() { |
||||||
|
this.editor && this.editor.dispose(); |
||||||
|
}, |
||||||
|
|
||||||
|
methods: { |
||||||
|
resizeLayout() { |
||||||
|
this.editor.layout(); |
||||||
|
}, |
||||||
|
initMonaco(monaco) { |
||||||
|
const code = this.value; |
||||||
|
const model = monaco.editor.createModel(code, this.lang ||"json"); |
||||||
|
|
||||||
|
this.editor = monaco.editor.create(this.$el, { |
||||||
|
model: model, |
||||||
|
theme: this.theme, |
||||||
|
}); |
||||||
|
|
||||||
|
this.editor.onDidChangeModelContent(event => { |
||||||
|
const value = this.editor.getValue(); |
||||||
|
if (this.value !== value) { |
||||||
|
this.$emit("change", value, event); |
||||||
|
} |
||||||
|
}); |
||||||
|
this.editor.updateOptions({ readOnly: this.readOnly }) |
||||||
|
}, |
||||||
|
|
||||||
|
getMonaco() { |
||||||
|
return this.editor; |
||||||
|
}, |
||||||
|
getMonacoModule() { |
||||||
|
return this.monaco; |
||||||
|
}, |
||||||
|
|
||||||
|
|
||||||
|
}, |
||||||
|
|
||||||
|
render(h) { |
||||||
|
return h("div"); |
||||||
|
}, |
||||||
|
created() { |
||||||
|
}, |
||||||
|
destroyed() { |
||||||
|
} |
||||||
|
}; |
||||||
|
/** |
||||||
|
* @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/>.
|
||||||
|
* |
||||||
|
*/ |
||||||
@ -0,0 +1,99 @@ |
|||||||
|
<template> |
||||||
|
<v-dialog :value="true"> |
||||||
|
<v-card style="overflow: hidden"> |
||||||
|
<v-tabs v-model="tab" height="30"> |
||||||
|
<v-tab |
||||||
|
v-for="{lang} in langs" |
||||||
|
:key="lang" |
||||||
|
class="caption" |
||||||
|
> |
||||||
|
{{ lang }} |
||||||
|
</v-tab> |
||||||
|
</v-tabs> |
||||||
|
<div class="nc-snippet-wrapper"> |
||||||
|
<div class="nc-snippet-actions"> |
||||||
|
<v-icon>mdi-clipboard</v-icon>sdds |
||||||
|
<v-select |
||||||
|
v-if="langs[tab].clients" |
||||||
|
v-model="client" |
||||||
|
class="nc-snippet-client" |
||||||
|
outlined |
||||||
|
dense |
||||||
|
hide-details |
||||||
|
style="max-width: 100px" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<custom-monaco-editor style="min-height:500px;max-width: 100%" :value="code" read-only /> |
||||||
|
</div> |
||||||
|
</v-card> |
||||||
|
</v-dialog> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import HTTPSnippet from 'httpsnippet' |
||||||
|
import CustomMonacoEditor from '~/components/monaco/CustomMonacoEditor' |
||||||
|
export default { |
||||||
|
name: 'CodeSnippet', |
||||||
|
components: { CustomMonacoEditor }, |
||||||
|
props: { |
||||||
|
meta: Object, |
||||||
|
view: Object, |
||||||
|
filters: [Object, Array], |
||||||
|
sorts: [Object, Array], |
||||||
|
fileds: [Object, Array] |
||||||
|
}, |
||||||
|
data: () => ({ |
||||||
|
tab: 0, |
||||||
|
client: null, |
||||||
|
langs: [ |
||||||
|
{ |
||||||
|
lang: 'javascript', |
||||||
|
clients: ['XMLHttpRequest', 'jQuery.ajax'] |
||||||
|
}, |
||||||
|
{ |
||||||
|
lang: 'node' |
||||||
|
}, |
||||||
|
{ |
||||||
|
lang: 'shell' |
||||||
|
}, |
||||||
|
{ |
||||||
|
lang: 'php' |
||||||
|
}, |
||||||
|
{ |
||||||
|
lang: 'python' |
||||||
|
}, |
||||||
|
{ |
||||||
|
lang: 'ruby' |
||||||
|
}, |
||||||
|
{ |
||||||
|
lang: 'c' |
||||||
|
} |
||||||
|
] |
||||||
|
}), |
||||||
|
computed: { |
||||||
|
snippet() { |
||||||
|
return new HTTPSnippet({ |
||||||
|
method: 'GET', |
||||||
|
headers: [ |
||||||
|
{ name: 'xc-auth', value: this.$store.state.users.token, comment: 'JWT Auth token' } |
||||||
|
], |
||||||
|
url: new URL(`/api/v1/db/data/noco/${this.projectId}/${this.meta.title}/views/${this.view.title}`, this.$store.state.project.projectInfo.ncSiteUrl).href |
||||||
|
}) |
||||||
|
}, |
||||||
|
code() { |
||||||
|
return this.snippet.convert(this.langs[this.tab].lang, this.client) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.nc-snippet-wrapper{ |
||||||
|
position:relative; |
||||||
|
} |
||||||
|
.nc-snippet-actions{ |
||||||
|
position: absolute; |
||||||
|
right: 10px; |
||||||
|
top:40px; |
||||||
|
} |
||||||
|
</style> |
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue