From 4f75e5d631537e624fbdc516a0a9c9d8d56ea302 Mon Sep 17 00:00:00 2001
From: Gopishankar Haridas <gopih@thoughtworks.com>
Date: Fri, 4 Oct 2019 14:29:13 +0530
Subject: [PATCH] Added label field for requests

---
 components/history.vue | 24 +++++++++++++++++++++---
 pages/index.vue        | 16 ++++++++++++++++
 2 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/components/history.vue b/components/history.vue
index 88ebf3bb3..fbc08ae8c 100644
--- a/components/history.vue
+++ b/components/history.vue
@@ -6,6 +6,9 @@
       </li>
     </ul>
     <ul>
+      <li @click="sort_by_label()">
+        <label for="" class="flex-wrap">Name<i class="material-icons">sort</i></label>
+      </li>
       <li @click="sort_by_time()">
         <label for="" class="flex-wrap">Time<i class="material-icons">sort</i></label>
       </li>
@@ -21,6 +24,9 @@
     </ul>
     <virtual-list class="virtual-list" :class="{filled: filteredHistory.length}" :size="54" :remain="Math.min(5, filteredHistory.length)">
       <ul v-for="(entry, index) in filteredHistory" :key="index" class="entry">
+        <li>
+          <input aria-label="Label" type="text" readonly :value="entry.label" :title="entry.label">
+        </li>
         <li>
           <input aria-label="Time" type="text" readonly :value="entry.time" :title="entry.date">
         </li>
@@ -104,7 +110,8 @@
         reverse_sort_time: false,
         reverse_sort_status_code: false,
         reverse_sort_url: false,
-        reverse_sort_path: false
+        reverse_sort_path: false,
+        reverse_sort_label: false
       }
     },
     computed: {
@@ -191,13 +198,24 @@
         let byUrl = this.history.slice(0);
         byUrl.sort((a, b)=>{
           if(this.reverse_sort_url)
-            return a.url == b.url ? 0 : +(a.url < b.url) || -1;
+            return a.url === b.url ? 0 : +(a.url < b.url) || -1;
           else
-            return a.url == b.url ? 0 : +(a.url > b.url) || -1;
+            return a.url === b.url ? 0 : +(a.url > b.url) || -1;
         });
         this.history = byUrl;
         this.reverse_sort_url = !this.reverse_sort_url;
       },
+      sort_by_label() {
+        let byLabel = this.history.slice(0);
+        byLabel.sort((a, b)=>{
+          if(this.reverse_sort_label)
+            return a.label === b.label ? 0 : +(a.label < b.label) || -1;
+          else
+            return a.label === b.label ? 0 : +(a.label > b.label) || -1;
+        });
+        this.history = byLabel;
+        this.reverse_sort_label = !this.reverse_sort_label;
+      },
       sort_by_path() {
         let byPath = this.history.slice(0);
         byPath.sort((a, b)=>{
diff --git a/pages/index.vue b/pages/index.vue
index 60f7df3c6..3dffebc31 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="page">
+      <input :class="{ error: !requestName }" @keyup.enter="requestName ? validRequestName() : null" id="label" name="label" type="label" v-model="label">
     <pw-modal v-if="showModal" @close="showModal = false">
       <div slot="header">
         <ul>
@@ -416,6 +417,7 @@
     },
     data() {
       return {
+        label:'Enter request name',
         showModal: false,
         copyButton: '<i class="material-icons">file_copy</i>',
         copiedButton: '<i class="material-icons">done</i>',
@@ -520,6 +522,9 @@
       }
     },
     computed: {
+      requestName() {
+        return this.label.match(/^([^?]*)\??/)[1]
+      },
       statusCategory() {
         return findStatusGroup(this.response.status);
       },
@@ -686,6 +691,13 @@
           behavior: 'smooth'
         });
       },
+      async validRequestName() {
+        if (!this.requestName) {
+          this.$toast.error('Request Name is not valid', {
+            icon: 'error'
+          });
+          return;
+        }},
       async sendRequest() {
         if (!this.isValidURL) {
           this.$toast.error('URL is not formatted properly', {
@@ -773,6 +785,7 @@
 
             // Addition of an entry to the history component.
             const entry = {
+              label: this.requestName,
               status,
               date,
               time,
@@ -790,6 +803,7 @@
 
             // Addition of an entry to the history component.
             const entry = {
+              label: this.requestName,
               status: this.response.status,
               date: new Date().toLocaleDateString(),
               time: new Date().toLocaleTimeString(),
@@ -1043,6 +1057,7 @@
             this.params = [];
             break;
           default:
+            this.label = '',
             this.method= 'GET',
             this.url = 'https://reqres.in',
             this.auth = 'None',
@@ -1066,6 +1081,7 @@
     created() {
       if (Object.keys(this.$route.query).length) this.setRouteQueries(this.$route.query);
       this.$watch(vm => [
+        vm.label,
         vm.method,
         vm.url,
         vm.auth,