⚡ Lint and minor UI improvements

components/collections/index.vue

@@ -5,10 +5,7 @@ TODO:
 
 <template>
   <div class="collections-wrapper">
-    <addCollection
-      :show="showModalAdd"
-      @hide-modal="displayModalAdd(false)"
-    />
+    <addCollection :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
     <editCollection
       :show="showModalEdit"
       :editingCollection="editingCollection"
@@ -68,7 +65,9 @@ TODO:
         </a> -->
       </div>
     </div>
-
+    <p v-if="collections.length === 0" class="info">
+      Create new collection
+    </p>
     <virtual-list
       class="virtual-list"
       :class="{ filled: collections.length }"

components/history.vue

@@ -162,11 +162,9 @@
         <label>Nothing found "{{ filterText }}"</label>
       </li>
     </ul>
-    <ul v-if="history.length === 0">
-      <li>
-        <label>History is empty</label>
-      </li>
-    </ul>
+    <p v-if="history.length === 0" class="info">
+      History is empty
+    </p>
     <div v-if="history.length !== 0">
       <div class="flex-wrap" v-if="!isClearingHistory">
         <button
@@ -450,8 +448,8 @@ export default {
       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;
-        else 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;
       });
       this.history = byUrl;
       this.reverse_sort_url = !this.reverse_sort_url;
@@ -460,8 +458,8 @@ export default {
       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;
+          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;
@@ -470,8 +468,8 @@ export default {
       let byPath = this.history.slice(0);
       byPath.sort((a, b) => {
         if (this.reverse_sort_path)
-          return a.path == b.path ? 0 : +(a.path < b.path) || -1;
-        else return a.path == b.path ? 0 : +(a.path > b.path) || -1;
+          return a.path === b.path ? 0 : +(a.path < b.path) || -1;
+        else return a.path === b.path ? 0 : +(a.path > b.path) || -1;
       });
       this.history = byPath;
       this.reverse_sort_path = !this.reverse_sort_path;
@@ -480,11 +478,11 @@ export default {
       let byDuration = this.history.slice(0);
       byDuration.sort((a, b) => {
         if (this.reverse_sort_duration)
-          return a.duration == b.duration
+          return a.duration === b.duration
             ? 0
             : +(a.duration < b.duration) || -1;
         else
-          return a.duration == b.duration
+          return a.duration === b.duration
             ? 0
             : +(a.duration > b.duration) || -1;
       });

pages/doc.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="page">
     <pw-section class="blue" label="Collections" ref="collections">
-      <ul class="info">
+      <ul>
         <li>
-          <p>
+          <p class="info">
             Import any Postwoman Collection to Generate Documentation on-the-go.
           </p>
         </li>
@@ -17,7 +17,7 @@
               v-tooltip="'JSON'"
             >
               <i class="material-icons">folder</i>
-              <span>Import Collections</span>
+              <span>Import collections</span>
             </button>
           </label>
           <input
@@ -55,6 +55,9 @@
     </pw-section>
 
     <pw-section class="green" label="Documentation" ref="documentation">
+      <p v-if="this.items.length === 0" class="info">
+        Generate documentation first
+      </p>
       <div>
         <span
           class="collection"
@@ -111,7 +114,8 @@
               </p>
               <p class="doc-desc" v-if="request.httpPassword">
                 <span>
-                  Password: <code>{{ request.httpPassword || "None" }}</code>
+                  Password:
+                  <code>{{ request.httpPassword || "None" }}</code>
                 </span>
               </p>
               <p class="doc-desc" v-if="request.bearerToken">
@@ -165,12 +169,14 @@
               </p>
               <p class="doc-desc" v-if="request.contentType">
                 <span>
-                  Content Type: <code>{{ request.contentType || "None" }}</code>
+                  Content Type:
+                  <code>{{ request.contentType || "None" }}</code>
                 </span>
               </p>
               <p class="doc-desc" v-if="request.requestType">
                 <span>
-                  Request Type: <code>{{ request.requestType || "None" }}</code>
+                  Request Type:
+                  <code>{{ request.requestType || "None" }}</code>
                 </span>
               </p>
             </span>
@@ -266,12 +272,14 @@
             </p>
             <p class="doc-desc" v-if="request.contentType">
               <span>
-                Content Type: <code>{{ request.contentType || "None" }}</code>
+                Content Type:
+                <code>{{ request.contentType || "None" }}</code>
               </span>
             </p>
             <p class="doc-desc" v-if="request.requestType">
               <span>
-                Request Type: <code>{{ request.requestType || "None" }}</code>
+                Request Type:
+                <code>{{ request.requestType || "None" }}</code>
               </span>
             </p>
           </span>

pages/graphql.vue

@@ -152,6 +152,7 @@
             }"
           />
         </pw-section>
+
         <pw-section class="cyan" label="Query" ref="query">
           <div class="flex-wrap">
             <label for="gqlQuery">{{ $t("query") }}</label>
@@ -185,6 +186,7 @@
             }"
           />
         </pw-section>
+
         <pw-section class="purple" label="Response" ref="response">
           <div class="flex-wrap">
             <label for="responseField">{{ $t("response") }}</label>
@@ -281,7 +283,19 @@
               </div>
             </div>
           </section>
-        </pw-section>
+
+          <p
+            v-if="
+              queryFields.length === 0 &&
+                mutationFields.length === 0 &&
+                subscriptionFields.length === 0 &&
+                gqlTypes.length === 0
+            "
+            class="info"
+          >
+            Send a request first
+          </p></pw-section
+        >
       </aside>
     </div>
   </div>

pages/index.vue

@@ -1408,7 +1408,7 @@ export default {
           requestString.push("xhr.send()");
         }
         return requestString.join("\n");
-      } else if (this.requestType == "Fetch") {
+      } else if (this.requestType === "Fetch") {
         const requestString = [];
         let headers = [];
         requestString.push(
@@ -1868,7 +1868,7 @@ export default {
       });
       const aux = document.createElement("textarea");
       const copy =
-        this.responseType == "application/json"
+        this.responseType === "application/json"
           ? JSON.stringify(this.response.body)
           : this.response.body;
       aux.innerText = copy;
@@ -2010,7 +2010,7 @@ export default {
         let parsedCurl = parseCurlCommand(text);
         this.url = parsedCurl.url.replace(/"/g, "").replace(/'/g, "");
         this.url =
-          this.url.slice(-1).pop() == "/" ? this.url.slice(0, -1) : this.url;
+          this.url.slice(-1).pop() === "/" ? this.url.slice(0, -1) : this.url;
         this.path = "";
         this.headers = [];
         for (const key of Object.keys(parsedCurl.headers)) {

pages/realtime.vue

@@ -36,6 +36,7 @@
             </div>
           </ul>
         </pw-section>
+
         <pw-section
           class="purple"
           label="Communication"
@@ -125,6 +126,7 @@
             </div>
           </ul>
         </pw-section>
+
         <pw-section
           class="purple"
           label="Communication"