-
Notifications
You must be signed in to change notification settings - Fork 109
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(ui): Sidebar > Request Context Menu > Generate Code
- Loading branch information
1 parent
0f22829
commit e24ada2
Showing
6 changed files
with
172 additions
and
15 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
127 changes: 127 additions & 0 deletions
127
packages/ui/src/components/modals/GenerateCodeModal.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,127 @@ | ||
| <template> | ||
| <div v-if="showModalComp"> | ||
| <modal :title="title" v-model="showModalComp" height="70vh" width="55rem"> | ||
| <div class="generate-code-modal-container"> | ||
| <label> | ||
| <div style="font-weight: 500; margin-bottom: 0.25rem;">Select Language</div> | ||
| <select v-model="selectedLanguage" class="full-width-input"> | ||
| <option value="" disabled>Select language</option> | ||
| <option v-for="target in availableTargets" :value="target">{{ target.title }}</option> | ||
| </select> | ||
| </label> | ||
| <label v-if="selectedLanguage" style="margin-top: 1rem;"> | ||
| <div style="font-weight: 500; margin-bottom: 0.25rem;">Select Client</div> | ||
| <select v-model="selectedClient" class="full-width-input"> | ||
| <option value="" disabled >Select client</option> | ||
| <option v-for="client in selectedLanguage.clients" :value="client">{{ client.title }}</option> | ||
| </select> | ||
| </label> | ||
| <div v-if="generatedCode" style="margin-top: 1rem; overflow: auto;"> | ||
| <div style="font-weight: 500; margin-bottom: 0.25rem;">Code</div> | ||
| <CodeMirrorEditor :model-value="generatedCode" lang="javascript" :readonly="true" class="code-editor" /> | ||
| </div> | ||
| </div> | ||
| <template #footer> | ||
| <button class="button" @click="copyCode" :disabled="!generatedCode">Copy Code</button> | ||
| </template> | ||
| </modal> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import Modal from '@/components/Modal.vue' | ||
| import { generateCode, getAvailableTargets } from '@/utils/generate-code' | ||
| import CodeMirrorEditor from '../CodeMirrorEditor.vue' | ||
| export default { | ||
| props: { | ||
| showModal: Boolean, | ||
| collectionItem: { | ||
| type: Object, | ||
| required: false | ||
| } | ||
| }, | ||
| components: { | ||
| Modal, | ||
| CodeMirrorEditor, | ||
| }, | ||
| data() { | ||
| return { | ||
| selectedLanguage: '', | ||
| selectedClient: '', | ||
| generatedCode: '', | ||
| } | ||
| }, | ||
| computed: { | ||
| title() { | ||
| let title = 'Generate Code' | ||
| if(this.collectionItem) { | ||
| title = `${title} — ${this.collectionItem.name}` | ||
| } | ||
| return title | ||
| }, | ||
| showModalComp: { | ||
| get() { | ||
| return this.showModal | ||
| }, | ||
| set(value) { | ||
| this.$emit('update:showModal', value) | ||
| } | ||
| }, | ||
| activeWorkspace() { | ||
| return this.$store.state.activeWorkspace | ||
| }, | ||
| availableTargets() { | ||
| return getAvailableTargets() | ||
| }, | ||
| }, | ||
| watch: { | ||
| selectedClient() { | ||
| this.generateCode() | ||
| }, | ||
| selectedLanguage() { | ||
| this.selectedClient = '' | ||
| this.generatedCode = '' | ||
| }, | ||
| collectionItem() { | ||
| this.generateCode() | ||
| } | ||
| }, | ||
| methods: { | ||
| async generateCode() { | ||
| if(this.selectedClient) { | ||
| try { | ||
| const request = JSON.parse(JSON.stringify(this.collectionItem)) | ||
| const { environment } = await this.$store.dispatch('getEnvironmentForRequest', request) | ||
| const code = await generateCode(request, environment, this.selectedLanguage.key, this.selectedClient.key) | ||
| this.generatedCode = code | ||
| } catch(e) { | ||
| this.generatedCode = e.message | ||
| } | ||
| } else { | ||
| this.generatedCode = '' | ||
| } | ||
| }, | ||
| async copyCode() { | ||
| await navigator.clipboard.writeText(this.generatedCode) | ||
| this.$toast.success('Copied to clipboard') | ||
| }, | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <style scoped> | ||
| .generate-code-modal-container { | ||
| display: grid; | ||
| grid-template-rows: auto auto 1fr; | ||
| height: 100%; | ||
| } | ||
| .code-editor { | ||
| height: calc(100% - 1.2rem); | ||
| overflow-y: auto; | ||
| border: 1px solid var(--modal-border-color); | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters