mirror of https://github.com/nocodb/nocodb
աɨռɢӄաօռɢ
3 years ago
committed by
GitHub
28 changed files with 18658 additions and 573 deletions
@ -0,0 +1,128 @@
|
||||
/* 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, |
||||
minimap: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, minimap: { |
||||
enabled: this.minimap |
||||
} |
||||
}); |
||||
|
||||
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,272 @@
|
||||
<template> |
||||
<div class="nc-container" :class="{active:modal}" @click="modal=false"> |
||||
<div class="nc-snippet elevation-3 pa-4" @click.stop> |
||||
<h3 class="font-weight-medium mb-4"> |
||||
Code Snippet |
||||
</h3> |
||||
|
||||
<v-icon class="nc-snippet-close" @click="modal=false"> |
||||
mdi-close |
||||
</v-icon> |
||||
|
||||
<div v-if="modal"> |
||||
<v-tabs v-model="tab" height="30" show-arrows @change="client=null"> |
||||
<v-tab |
||||
v-for="{lang} in langs" |
||||
:key="lang" |
||||
v-t="['c:snippet:tab', {lang}]" |
||||
class="caption" |
||||
> |
||||
{{ lang }} |
||||
</v-tab> |
||||
</v-tabs> |
||||
<div class="nc-snippet-wrapper mt-4"> |
||||
<div class="nc-snippet-actions d-flex"> |
||||
<v-btn |
||||
v-t="['c:snippet:copy', {client: langs[tab].clients && (client || langs[tab].clients[0]), lang: langs[tab ||0].lang}]" |
||||
color="primary" |
||||
class="rounded caption " |
||||
@click="copyToClipboard" |
||||
> |
||||
<v-icon small> |
||||
mdi-clipboard-outline |
||||
</v-icon> |
||||
Copy To Clipboard |
||||
</v-btn> |
||||
<div |
||||
v-if="langs[tab].clients" |
||||
class=" ml-2 d-flex align-center" |
||||
> |
||||
<v-menu bottom offset-y> |
||||
<template #activator="{on}"> |
||||
<v-btn class="caption text-uppercase" color="primary" v-on="on"> |
||||
{{ client || langs[tab].clients[0] }} |
||||
<v-icon small> |
||||
mdi-chevron-down |
||||
</v-icon> |
||||
</v-btn> |
||||
</template> |
||||
<v-list dense> |
||||
<v-list-item |
||||
v-for="c in langs[tab].clients" |
||||
:key="c" |
||||
dense |
||||
@click="client = c" |
||||
> |
||||
<v-list-item-title class="text-uppercase"> |
||||
{{ c }} |
||||
</v-list-item-title> |
||||
</v-list-item> |
||||
</v-list> |
||||
</v-menu> |
||||
</div> |
||||
</div> |
||||
<custom-monaco-editor |
||||
hide-line-num |
||||
:theme="$store.state.windows.darkTheme ? 'vs-dark' : 'vs-light'" |
||||
style="min-height:500px;max-width: 100%" |
||||
:value="code" |
||||
read-only |
||||
/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import HTTPSnippet from 'httpsnippet' |
||||
import CustomMonacoEditor from '~/components/monaco/CustomMonacoEditor' |
||||
import { copyTextToClipboard } from '~/helpers/xutils' |
||||
|
||||
export default { |
||||
name: 'CodeSnippet', |
||||
components: { CustomMonacoEditor }, |
||||
props: { |
||||
meta: Object, |
||||
view: Object, |
||||
filters: [Object, Array], |
||||
sorts: [Object, Array], |
||||
fileds: [Object, Array], |
||||
queryParams: Object, |
||||
value: Boolean |
||||
}, |
||||
data: () => ({ |
||||
tab: 0, |
||||
client: null, |
||||
langs: [ |
||||
{ |
||||
lang: 'shell', |
||||
clients: ['curl', 'wget'] |
||||
}, |
||||
{ |
||||
lang: 'javascript', |
||||
clients: ['axios', 'fetch', 'jquery', 'xhr'] |
||||
}, |
||||
{ |
||||
lang: 'node', |
||||
clients: ['axios', 'fetch', 'request', 'native', 'unirest'] |
||||
}, |
||||
{ |
||||
lang: 'nocodb-sdk', |
||||
clients: ['javascript', 'node'] |
||||
}, |
||||
{ |
||||
lang: 'php' |
||||
}, |
||||
{ |
||||
lang: 'python', |
||||
clients: ['python3', |
||||
'requests'] |
||||
}, |
||||
{ |
||||
lang: 'ruby' |
||||
}, |
||||
{ |
||||
lang: 'java' |
||||
}, |
||||
{ |
||||
lang: 'c' |
||||
} |
||||
] |
||||
}), |
||||
computed: { |
||||
modal: { |
||||
get() { |
||||
return this.value |
||||
}, |
||||
set(v) { |
||||
this.$emit('input', v) |
||||
} |
||||
}, |
||||
apiUrl() { |
||||
return new URL(`/api/v1/db/data/noco/${this.projectId}/${this.meta.title}/views/${this.view.title}`, (this.$store.state.project.projectInfo && this.$store.state.project.projectInfo.ncSiteUrl) || '/').href |
||||
}, |
||||
snippet() { |
||||
return new HTTPSnippet({ |
||||
method: 'GET', |
||||
headers: [ |
||||
{ name: 'xc-auth', value: this.$store.state.users.token, comment: 'JWT Auth token' } |
||||
], |
||||
url: this.apiUrl, |
||||
queryString: Object.entries(this.queryParams || {}).map(([name, value]) => { |
||||
return { |
||||
name, value: String(value) |
||||
} |
||||
}) |
||||
}) |
||||
}, |
||||
code() { |
||||
if (this.langs[this.tab].lang === 'nocodb-sdk') { |
||||
return `${ |
||||
this.client === 'node' |
||||
? 'const { Api } require("nocodb-sdk");' |
||||
: 'import { Api } from "nocodb-sdk";' |
||||
} |
||||
|
||||
const api = new Api({ |
||||
baseURL: ${JSON.stringify(this.apiUrl)}, |
||||
headers: { |
||||
"xc-auth": ${JSON.stringify(this.$store.state.users.token)} |
||||
} |
||||
}) |
||||
|
||||
api.dbViewRow.list( |
||||
"noco", |
||||
${JSON.stringify(this.projectName)}, |
||||
${JSON.stringify(this.meta.title)}, |
||||
${JSON.stringify(this.view.title)}, ${JSON.stringify(this.queryParams, null, 4)}).then(function (data) { |
||||
console.log(data); |
||||
}).catch(function (error) { |
||||
console.error(error); |
||||
});` |
||||
} |
||||
|
||||
return this.snippet.convert(this.langs[this.tab].lang, this.client || (this.langs[this.tab].clients && this.langs[this.tab].clients[0]), {}) |
||||
} |
||||
}, |
||||
mounted() { |
||||
(document.querySelector('[data-app]') || this.$root.$el).append(this.$el) |
||||
}, |
||||
|
||||
destroyed() { |
||||
this.$el.parentNode && this.$el.parentNode.removeChild(this.$el) |
||||
}, |
||||
methods: { |
||||
copyToClipboard() { |
||||
copyTextToClipboard(this.code) |
||||
this.$toast.success('Code copied to clipboard successfully.').goAway(3000) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.nc-snippet-wrapper { |
||||
position: relative; |
||||
border: 1px solid #7773; |
||||
border-radius: 4px; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.nc-snippet-actions { |
||||
position: absolute; |
||||
right: 10px; |
||||
bottom: 10px; |
||||
z-index: 99999; |
||||
} |
||||
|
||||
.nc-container { |
||||
position: fixed; |
||||
pointer-events: none; |
||||
width: 100vw; |
||||
height: 100vh; |
||||
z-index: 9999; |
||||
right: 0; |
||||
top: 0; |
||||
|
||||
.nc-snippet { |
||||
background-color: var(--v-backgroundColorDefault-base); |
||||
height: 100%; |
||||
width: max(50%, 700px); |
||||
position: absolute; |
||||
bottom: 0; |
||||
top: 0; |
||||
right: min(-50%, -700px); |
||||
transition: .3s right; |
||||
|
||||
} |
||||
|
||||
&.active { |
||||
pointer-events: all; |
||||
|
||||
& > .nc-snippet { |
||||
right: 0 |
||||
} |
||||
} |
||||
|
||||
.nc-snippet-close { |
||||
position: absolute; |
||||
right: 16px; |
||||
top: 16px; |
||||
} |
||||
} |
||||
|
||||
::v-deep { |
||||
.v-tabs { |
||||
height: 100%; |
||||
|
||||
.v-tabs-items { |
||||
height: calc(100% - 30px); |
||||
|
||||
.v-window__container { |
||||
height: 100%; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.v-slide-group__prev--disabled { |
||||
display: none |
||||
} |
||||
} |
||||
</style> |
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue