⚡ Moved Generate code section to modal
This commit is contained in:
Liyas Thomas
191
pages/index.vue
191
pages/index.vue
@@ -1,50 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="page">
|
<div class="page">
|
||||||
<save-request-as
|
|
||||||
v-bind:show="showRequestModal"
|
|
||||||
v-on:hide-model="hideRequestModal"
|
|
||||||
v-bind:editing-request="editRequest"
|
|
||||||
></save-request-as>
|
|
||||||
|
|
||||||
<pw-modal v-if="showModal" @close="showModal = false">
|
|
||||||
<div slot="header">
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<div class="flex-wrap">
|
|
||||||
<h3 class="title">Import cURL</h3>
|
|
||||||
<div>
|
|
||||||
<button class="icon" @click="toggleModal">
|
|
||||||
<i class="material-icons">close</i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div slot="body">
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<textarea
|
|
||||||
id="import-text"
|
|
||||||
autofocus
|
|
||||||
rows="8"
|
|
||||||
placeholder="Enter cURL"
|
|
||||||
></textarea>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div slot="footer">
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<button class="icon" @click="handleImport">
|
|
||||||
<i class="material-icons">get_app</i>
|
|
||||||
<span>Import</span>
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</pw-modal>
|
|
||||||
|
|
||||||
<pw-section
|
<pw-section
|
||||||
v-if="showPreRequestScript"
|
v-if="showPreRequestScript"
|
||||||
class="orange"
|
class="orange"
|
||||||
@@ -80,6 +35,8 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</pw-section>
|
</pw-section>
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
<pw-section class="blue" label="Request" ref="request">
|
<pw-section class="blue" label="Request" ref="request">
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
@@ -268,8 +225,7 @@
|
|||||||
:disabled="!isValidURL"
|
:disabled="!isValidURL"
|
||||||
v-tooltip.bottom="{ content: isHidden ? 'Show Code' : 'Hide Code' }"
|
v-tooltip.bottom="{ content: isHidden ? 'Show Code' : 'Hide Code' }"
|
||||||
>
|
>
|
||||||
<i class="material-icons" v-if="isHidden">flash_on</i>
|
<i class="material-icons">flash_on</i>
|
||||||
<i class="material-icons" v-else>flash_off</i>
|
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
:class="'icon' + (showPreRequestScript ? ' info-response' : '')"
|
:class="'icon' + (showPreRequestScript ? ' info-response' : '')"
|
||||||
@@ -325,44 +281,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</pw-section>
|
</pw-section>
|
||||||
|
|
||||||
<pw-section class="yellow" label="Code" ref="requestCode" v-if="!isHidden">
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<label for="requestType">Request Type</label>
|
|
||||||
<select id="requestType" v-model="requestType">
|
|
||||||
<option>JavaScript XHR</option>
|
|
||||||
<option>Fetch</option>
|
|
||||||
<option>cURL</option>
|
|
||||||
</select>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<div class="flex-wrap">
|
|
||||||
<label for="generatedCode">Generated Code</label>
|
|
||||||
<div>
|
|
||||||
<button
|
|
||||||
class="icon"
|
|
||||||
@click="copyRequestCode"
|
|
||||||
id="copyRequestCode"
|
|
||||||
ref="copyRequestCode"
|
|
||||||
v-tooltip="'Copy code'"
|
|
||||||
>
|
|
||||||
<i class="material-icons">file_copy</i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<textarea
|
|
||||||
id="generatedCode"
|
|
||||||
ref="generatedCode"
|
|
||||||
name="generatedCode"
|
|
||||||
rows="8"
|
|
||||||
v-model="requestCode"
|
|
||||||
></textarea>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</pw-section>
|
|
||||||
|
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<section id="options">
|
<section id="options">
|
||||||
@@ -703,6 +621,106 @@
|
|||||||
<br />
|
<br />
|
||||||
|
|
||||||
<history @useHistory="handleUseHistory" ref="historyComponent"></history>
|
<history @useHistory="handleUseHistory" ref="historyComponent"></history>
|
||||||
|
|
||||||
|
<save-request-as
|
||||||
|
v-bind:show="showRequestModal"
|
||||||
|
v-on:hide-model="hideRequestModal"
|
||||||
|
v-bind:editing-request="editRequest"
|
||||||
|
></save-request-as>
|
||||||
|
|
||||||
|
<pw-modal v-if="showModal" @close="showModal = false">
|
||||||
|
<div slot="header">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<div class="flex-wrap">
|
||||||
|
<h3 class="title">Import cURL</h3>
|
||||||
|
<div>
|
||||||
|
<button class="icon" @click="showModal = false">
|
||||||
|
<i class="material-icons">close</i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div slot="body">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<textarea
|
||||||
|
id="import-text"
|
||||||
|
autofocus
|
||||||
|
rows="8"
|
||||||
|
placeholder="Enter cURL"
|
||||||
|
></textarea>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div slot="footer">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<button class="icon" @click="handleImport">
|
||||||
|
<i class="material-icons">get_app</i>
|
||||||
|
<span>Import</span>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</pw-modal>
|
||||||
|
|
||||||
|
<pw-modal v-if="!isHidden" @close="isHidden = true">
|
||||||
|
<div slot="header">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<div class="flex-wrap">
|
||||||
|
<h3 class="title">Generate code</h3>
|
||||||
|
<div>
|
||||||
|
<button class="icon" @click="isHidden = true">
|
||||||
|
<i class="material-icons">close</i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div slot="body">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<label for="requestType">Request Type</label>
|
||||||
|
<select id="requestType" v-model="requestType">
|
||||||
|
<option>JavaScript XHR</option>
|
||||||
|
<option>Fetch</option>
|
||||||
|
<option>cURL</option>
|
||||||
|
</select>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<div class="flex-wrap">
|
||||||
|
<label for="generatedCode">Generated Code</label>
|
||||||
|
<div>
|
||||||
|
<button
|
||||||
|
class="icon"
|
||||||
|
@click="copyRequestCode"
|
||||||
|
id="copyRequestCode"
|
||||||
|
ref="copyRequestCode"
|
||||||
|
v-tooltip="'Copy code'"
|
||||||
|
>
|
||||||
|
<i class="material-icons">file_copy</i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<textarea
|
||||||
|
id="generatedCode"
|
||||||
|
ref="generatedCode"
|
||||||
|
name="generatedCode"
|
||||||
|
rows="8"
|
||||||
|
v-model="requestCode"
|
||||||
|
></textarea>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div slot="footer"></div>
|
||||||
|
</pw-modal>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
@@ -1794,9 +1812,6 @@ export default {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
toggleModal() {
|
|
||||||
this.showModal = !this.showModal;
|
|
||||||
},
|
|
||||||
switchVisibility() {
|
switchVisibility() {
|
||||||
this.passwordFieldType =
|
this.passwordFieldType =
|
||||||
this.passwordFieldType === "password" ? "text" : "password";
|
this.passwordFieldType === "password" ? "text" : "password";
|
||||||
|
|||||||
Reference in New Issue
Block a user