-
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 5f2832a
Showing
6 changed files
with
165 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
120 changes: 120 additions & 0 deletions
120
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,120 @@ | ||
| <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;"> | ||
| <div style="font-weight: 500; margin-bottom: 0.25rem;">Code</div> | ||
| <CodeMirrorEditor :model-value="generatedCode" lang="javascript" :readonly="true" class="code-editor" /> | ||
| </div> | ||
| </div> | ||
| </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 = '' | ||
| } | ||
| } | ||
| } | ||
| } | ||
| </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