On clicking use button from history, view will scroll to request section, moved history section below response section

This commit is contained in:
Liyas Thomas 2019-08-23 10:49:35 +05:30
parent 8f03f709fb
commit 5c9b8addf3
2 changed files with 35 additions and 32 deletions

View File

@ -75,7 +75,7 @@
<h3>API request builder</h3> <h3>API request builder</h3>
</div> </div>
</header> </header>
<fieldset class="request"> <fieldset class="request" ref="request">
<legend v-on:click="collapse">Request ↕</legend> <legend v-on:click="collapse">Request ↕</legend>
<div class="collapsible"> <div class="collapsible">
<ul> <ul>
@ -104,37 +104,6 @@
</ul> </ul>
</div> </div>
</fieldset> </fieldset>
<fieldset class="history hidden">
<legend v-on:click="collapse">History ↕</legend>
<div class="collapsible">
<ul v-for="entry in history">
<li>
<label for="time">Time</label>
<input name="time" type="text" readonly :value="entry.time">
</li>
<li>
<label for="name">Method</label>
<input name="name" type="text" readonly :value="entry.method">
</li>
<li>
<label for="name">URL</label>
<input name="name" type="text" readonly :value="entry.url">
</li>
<li>
<label for="name">Path</label>
<input name="name" type="text" readonly :value="entry.path">
</li>
<li>
<label for="delete">&nbsp;</label>
<button name="delete" @click="deleteHistory(entry)">Delete</button>
</li>
<li>
<label for="use">&nbsp;</label>
<button name="use" @click="useHistory(entry)">Use</button>
</li>
</ul>
</div>
</fieldset>
<fieldset class="reqbody" v-if="method === 'POST' || method === 'PUT'"> <fieldset class="reqbody" v-if="method === 'POST' || method === 'PUT'">
<legend v-on:click="collapse">Request Body ↕</legend> <legend v-on:click="collapse">Request Body ↕</legend>
<div class="collapsible"> <div class="collapsible">
@ -253,6 +222,37 @@
</ul> </ul>
</div> </div>
</fieldset> </fieldset>
<fieldset class="history">
<legend v-on:click="collapse">History ↕</legend>
<div class="collapsible">
<ul v-for="entry in history">
<li>
<label for="time">Time</label>
<input name="time" type="text" readonly :value="entry.time">
</li>
<li>
<label for="name">Method</label>
<input name="name" type="text" readonly :value="entry.method">
</li>
<li>
<label for="name">URL</label>
<input name="name" type="text" readonly :value="entry.url">
</li>
<li>
<label for="name">Path</label>
<input name="name" type="text" readonly :value="entry.path">
</li>
<li>
<label for="delete">&nbsp;</label>
<button name="delete" @click="deleteHistory(entry)">Delete</button>
</li>
<li>
<label for="use">&nbsp;</label>
<button name="use" @click="useHistory(entry)">Use</button>
</li>
</ul>
</div>
</fieldset>
<footer> <footer>
<a href="https://github.com/liyasthomas/postwoman"><img src="icons/github.svg" alt="" style="margin-right: 16px">GitHub</a> <a href="https://github.com/liyasthomas/postwoman"><img src="icons/github.svg" alt="" style="margin-right: 16px">GitHub</a>
<button id="installPWA" onclick="installPWA()"> <button id="installPWA" onclick="installPWA()">

View File

@ -87,6 +87,9 @@ const app = new Vue({
this.method = method this.method = method
this.url = url this.url = url
this.path = path this.path = path
this.$refs.request.scrollIntoView({
behavior: 'smooth'
})
}, },
collapse({ collapse({
target target