Add Request name label for every requests (#184)

Add Request name label for every requests

Co-authored-by: Gopishankar Haridas <gopih@thoughtworks.com>

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>
@@ -101,6 +107,7 @@
         filterText: '',
         showFilter: false,
         isClearingHistory: false,
+        reverse_sort_label: false,
         reverse_sort_time: false,
         reverse_sort_status_code: false,
         reverse_sort_url: false,
@@ -198,6 +205,17 @@
         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)=>{

pages/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="page">
+      <input @keyup.enter="requestName" id="label" name="label" type="label" v-model="label">
     <pw-modal v-if="showModal" @close="showModal = false">
       <div slot="header">
         <ul>
@@ -419,6 +420,7 @@
     },
     data() {
       return {
+        label:'Enter request name',
         showModal: false,
         copyButton: '<i class="material-icons">file_copy</i>',
         copiedButton: '<i class="material-icons">done</i>',
@@ -523,6 +525,9 @@
       }
     },
     computed: {
+      requestName() {
+        return this.label
+      },
       statusCategory() {
         return findStatusGroup(this.response.status);
       },
@@ -776,6 +781,7 @@
 
             // Addition of an entry to the history component.
             const entry = {
+              label: this.requestName,
               status,
               date,
               time,
@@ -793,6 +799,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(),
@@ -1046,6 +1053,7 @@
             this.params = [];
             break;
           default:
+            this.label = '',
             this.method= 'GET',
             this.url = 'https://reqres.in',
             this.auth = 'None',
@@ -1069,6 +1077,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,