merge and fix

README.md

@@ -228,6 +228,7 @@ See the [CHANGELOG](CHANGELOG.md) file for details.
     <td align="center"><a href="https://github.com/nityanandagohain"><img src="https://github.com/nityanandagohain.png?size=100" width="100px;" alt="Nityananda Gohain"/><br /><sub><b>Nityananda Gohain</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=nityanandagohain" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/terranblake"><img src="https://github.com/terranblake.png?size=100" width="100px;" alt="Terran Blake"/><br /><sub><b>Terran Blake</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=terranblake" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/hosseinnedaee"><img src="https://github.com/hosseinnedaee.png?size=100" width="100px;" alt="Hossein Nedaee"/><br /><sub><b>Hossein Nedaee</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=hosseinnedaee" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/vlad0337187"><img src="https://github.com/vlad0337187.png?size=100" width="100px;" alt="Vladislav"/><br /><sub><b>Vladislav</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=vlad0337187" title="Code">💻</a></td>
   </tr>
 </table>
 

assets/css/fonts.scss

@@ -1,13 +1,13 @@
 /* Material Design Icons */
 @font-face {
-  font-family: 'Material Icons';
+  font-family: "Material Icons";
   font-style: normal;
   font-weight: 400;
-  src: url(~@/assets/fonts/material-icons-v48.woff2) format('woff2');
+  src: url(~@/assets/fonts/material-icons-v48.woff2) format("woff2");
 }
 
 .material-icons {
-  font-family: 'Material Icons';
+  font-family: "Material Icons";
   font-weight: normal;
   font-style: normal;
   font-size: 24px;
@@ -18,35 +18,42 @@
   white-space: nowrap;
   word-wrap: normal;
   direction: ltr;
-  -webkit-font-feature-settings: 'liga';
+  -webkit-font-feature-settings: "liga";
   -webkit-font-smoothing: antialiased;
 }
 
 /* Roboto Mono 400 */
 @font-face {
-  font-family: 'Roboto Mono';
+  font-family: "Roboto Mono";
   font-style: normal;
   font-weight: 400;
-  src: local('Roboto Mono'), local('RobotoMono-Regular'),
+  src: local("Roboto Mono"), local("RobotoMono-Regular"),
-  url('~@/assets/fonts/roboto-mono-v7-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+    url("~@/assets/fonts/roboto-mono-v7-latin-regular.woff2") format("woff2"),
-  url('~@/assets/fonts/roboto-mono-v7-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+    url("~@/assets/fonts/roboto-mono-v7-latin-regular.woff") format("woff");
+  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 
 /* Poppins 500 */
 @font-face {
-  font-family: 'Poppins';
+  font-family: "Poppins";
   font-style: normal;
   font-weight: 500;
-  src: local('Poppins Medium'), local('Poppins-Medium'),
+  src: local("Poppins Medium"), local("Poppins-Medium"),
-  url('~@/assets/fonts/poppins-v9-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+    url("~@/assets/fonts/poppins-v9-latin-500.woff2") format("woff2"),
-  url('~@/assets/fonts/poppins-v9-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+    url("~@/assets/fonts/poppins-v9-latin-500.woff") format("woff");
+  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
+
 /* poppins-700 - latin */
 @font-face {
-  font-family: 'Poppins';
+  font-family: "Poppins";
   font-style: normal;
   font-weight: 700;
-  src: local('Poppins Bold'), local('Poppins-Bold'),
+  src: local("Poppins Bold"), local("Poppins-Bold"),
-  url('~@/assets/fonts/poppins-v9-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+    url("~@/assets/fonts/poppins-v9-latin-700.woff2") format("woff2"),
-  url('~@/assets/fonts/poppins-v9-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+    url("~@/assets/fonts/poppins-v9-latin-700.woff") format("woff");
+  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }

assets/css/styles.scss

@@ -2,9 +2,11 @@ $responsiveWidth: 720px;
 
 // Make theme transition smoother.
 body.afterLoad {
-  &, & * {
+
+  &,
+  & * {
     transition: background-color 0.2s ease-in-out,
-                border 0.2s ease-in-out;
+      border 0.2s ease-in-out;
   }
 }
 
@@ -180,7 +182,7 @@ h3.title {
 
 header,
 footer {
-  & > div {
+  &>div {
     display: flex;
     padding: 16px;
     width: 100%;
@@ -218,7 +220,6 @@ button {
   transition: all 0.2s ease-in-out;
   fill: var(--act-color);
   height: 40px;
-  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.02);
   cursor: pointer;
 
   span {
@@ -353,7 +354,7 @@ input[type="checkbox"] {
   display: none;
 
   &,
-  & + label {
+  &+label {
     vertical-align: middle;
     cursor: pointer;
 
@@ -372,7 +373,7 @@ input[type="checkbox"] {
     }
   }
 
-  &:checked + label:before {
+  &:checked+label:before {
     background-color: var(--ac-color);
     border-color: var(--ac-color);
     color: var(--act-color);
@@ -567,7 +568,7 @@ div.tab {
   display: none;
 }
 
-input[type="radio"] + label {
+input[type="radio"]+label {
   padding: 8px 16px;
   border-bottom: 2px solid transparent;
   cursor: pointer;
@@ -578,11 +579,11 @@ input[type="radio"] + label {
   }
 }
 
-input[type="radio"]:checked + label {
+input[type="radio"]:checked+label {
   border-color: var(--fg-color);
 }
 
-input[type="radio"]:checked + label + div.tab {
+input[type="radio"]:checked+label+div.tab {
   display: block;
 }
 

assets/css/themes.scss

@@ -1,6 +1,5 @@
 /**
   Main Themes:
-
   - dark (default)
   - light
   - black
@@ -33,6 +32,7 @@
 :root {
   @include darkTheme;
 }
+
 @media(prefers-color-scheme: dark) {
   :root.auto {
     @include darkTheme;
@@ -64,6 +64,7 @@
 :root.light {
   @include lightTheme;
 }
+
 @media(prefers-color-scheme: light) {
   :root.auto {
     @include lightTheme;
@@ -91,6 +92,7 @@
   // Active text color
   --act-color: #000000;
 }
+
 :root.black {
   @include blackTheme;
 }

assets/js/curlparser.js

@@ -2,222 +2,227 @@ import * as cookie from "cookie";
 import * as URL from "url";
 import * as querystring from "querystring";
 
-
 /**
  * given this: [ 'msg1=value1', 'msg2=value2' ]
  * output this: 'msg1=value1&msg2=value2'
  * @param dataArguments
  */
 function joinDataArguments(dataArguments) {
-    let data = '';
+  let data = "";
-    dataArguments.forEach(function(argument, i) {
+  dataArguments.forEach(function(argument, i) {
-        if (i === 0) {
+    if (i === 0) {
-            data += argument;
+      data += argument;
-        } else {
+    } else {
-            data += '&' + argument;
+      data += "&" + argument;
-        }
+    }
-    })
+  });
-    return data;
+  return data;
 }
 
 function parseCurlCommand(curlCommand) {
-    let newlineFound = /\r|\n/.exec(curlCommand);
+  let newlineFound = /\r|\n/.exec(curlCommand);
-    if (newlineFound) {
+  if (newlineFound) {
-        // remove newlines
+    // remove newlines
-        curlCommand = curlCommand.replace(/\\\r|\\\n/g, '');
+    curlCommand = curlCommand.replace(/\\\r|\\\n/g, "");
-    }
+  }
-    // yargs parses -XPOST as separate arguments. just prescreen for it.
+  // yargs parses -XPOST as separate arguments. just prescreen for it.
-    curlCommand = curlCommand.replace(/ -XPOST/, ' -X POST');
+  curlCommand = curlCommand.replace(/ -XPOST/, " -X POST");
-    curlCommand = curlCommand.replace(/ -XGET/, ' -X GET');
+  curlCommand = curlCommand.replace(/ -XGET/, " -X GET");
-    curlCommand = curlCommand.replace(/ -XPUT/, ' -X PUT');
+  curlCommand = curlCommand.replace(/ -XPUT/, " -X PUT");
-    curlCommand = curlCommand.replace(/ -XPATCH/, ' -X PATCH');
+  curlCommand = curlCommand.replace(/ -XPATCH/, " -X PATCH");
-    curlCommand = curlCommand.replace(/ -XDELETE/, ' -X DELETE');
+  curlCommand = curlCommand.replace(/ -XDELETE/, " -X DELETE");
-    curlCommand = curlCommand.trim();
+  curlCommand = curlCommand.trim();
-    let parsedArguments = require("yargs-parser")(curlCommand);
+  let parsedArguments = require("yargs-parser")(curlCommand);
-    let cookieString;
+  let cookieString;
-    let cookies;
+  let cookies;
-    let url = parsedArguments._[1];
+  let url = parsedArguments._[1];
-    if (!url) {
+  if (!url) {
-        for (let argName in parsedArguments) {
+    for (let argName in parsedArguments) {
-            if (typeof parsedArguments[argName] === 'string') {
+      if (typeof parsedArguments[argName] === "string") {
-                if (['http', 'www.'].includes(parsedArguments[argName])) {
+        if (["http", "www."].includes(parsedArguments[argName])) {
-                    url = parsedArguments[argName];
+          url = parsedArguments[argName];
-                }
-            }
         }
+      }
     }
-    let headers;
+  }
+  let headers;
 
-    let parseHeaders = function(headerFieldName) {
+  let parseHeaders = function(headerFieldName) {
-        if (parsedArguments[headerFieldName]) {
+    if (parsedArguments[headerFieldName]) {
-            if (!headers) {
+      if (!headers) {
-                headers = {};
+        headers = {};
-            }
+      }
-            if (!Array.isArray(parsedArguments[headerFieldName])) {
+      if (!Array.isArray(parsedArguments[headerFieldName])) {
-                parsedArguments[headerFieldName] = [parsedArguments[headerFieldName]];
+        parsedArguments[headerFieldName] = [parsedArguments[headerFieldName]];
-            }
+      }
-            parsedArguments[headerFieldName].forEach(function(header) {
+      parsedArguments[headerFieldName].forEach(function(header) {
-                if (header.includes('Cookie')) {
+        if (header.includes("Cookie")) {
-                    // stupid javascript tricks: closure
+          // stupid javascript tricks: closure
-                    cookieString = header;
+          cookieString = header;
-                } else {
+        } else {
-                    let colonIndex = header.indexOf(':');
+          let colonIndex = header.indexOf(":");
-                    let headerName = header.substring(0, colonIndex);
+          let headerName = header.substring(0, colonIndex);
-                    let headerValue = header.substring(colonIndex + 1).trim();
+          let headerValue = header.substring(colonIndex + 1).trim();
-                    headers[headerName] = headerValue;
+          headers[headerName] = headerValue;
-                }
-            })
         }
+      });
     }
+  };
 
-    parseHeaders('H');
+  parseHeaders("H");
-    parseHeaders('header');
+  parseHeaders("header");
-    if (parsedArguments.A) {
+  if (parsedArguments.A) {
-        if (!headers) {
+    if (!headers) {
-            headers = [];
+      headers = [];
-        }
-        headers['User-Agent'] = parsedArguments.A;
-    } else if (parsedArguments['user-agent']) {
-        if (!headers) {
-            headers = [];
-        }
-        headers['User-Agent'] = parsedArguments['user-agent'];
     }
+    headers["User-Agent"] = parsedArguments.A;
+  } else if (parsedArguments["user-agent"]) {
+    if (!headers) {
+      headers = [];
+    }
+    headers["User-Agent"] = parsedArguments["user-agent"];
+  }
 
-    if (parsedArguments.b) {
+  if (parsedArguments.b) {
-        cookieString = parsedArguments.b;
+    cookieString = parsedArguments.b;
-    }
+  }
-    if (parsedArguments.cookie) {
+  if (parsedArguments.cookie) {
-        cookieString = parsedArguments.cookie;
+    cookieString = parsedArguments.cookie;
-    }
+  }
-    let multipartUploads;
+  let multipartUploads;
-    if (parsedArguments.F) {
+  if (parsedArguments.F) {
-        multipartUploads = {};
+    multipartUploads = {};
-        if (!Array.isArray(parsedArguments.F)) {
+    if (!Array.isArray(parsedArguments.F)) {
-            parsedArguments.F = [parsedArguments.F];
+      parsedArguments.F = [parsedArguments.F];
-        }
-        parsedArguments.F.forEach(function(multipartArgument) {
-            // input looks like key=value. value could be json or a file path prepended with an @
-            let splitArguments = multipartArgument.split('=', 2);
-            let key = splitArguments[0];
-            let value = splitArguments[1];
-            multipartUploads[key] = value;
-        })
-    }
-    if (cookieString) {
-        let cookieParseOptions = {
-                decode: function(s) { return s }
-            }
-            // separate out cookie headers into separate data structure
-            // note: cookie is case insensitive
-        cookies = cookie.parse(cookieString.replace(/^Cookie: /gi, ''), cookieParseOptions);
-    }
-    let method;
-    if (parsedArguments.X === 'POST') {
-        method = 'post';
-    } else if (parsedArguments.X === 'PUT' ||
-        parsedArguments['T']) {
-        method = 'put';
-    } else if (parsedArguments.X === 'PATCH') {
-        method = 'patch';
-    } else if (parsedArguments.X === 'DELETE') {
-        method = 'delete';
-    } else if (parsedArguments.X === 'OPTIONS') {
-        method = 'options';
-    } else if ((parsedArguments['d'] ||
-            parsedArguments['data'] ||
-            parsedArguments['data-ascii'] ||
-            parsedArguments['data-binary'] ||
-            parsedArguments['F'] ||
-            parsedArguments['form']) && !((parsedArguments['G'] || parsedArguments['get']))) {
-        method = 'post';
-    } else if (parsedArguments['I'] ||
-        parsedArguments['head']) {
-        method = 'head';
-    } else {
-        method = 'get';
     }
+    parsedArguments.F.forEach(function(multipartArgument) {
+      // input looks like key=value. value could be json or a file path prepended with an @
+      const [key, value] = multipartArgument.split("=", 2);
+      multipartUploads[key] = value;
+    });
+  }
+  if (cookieString) {
+    let cookieParseOptions = {
+      decode: function(s) {
+        return s;
+      }
+    };
+    // separate out cookie headers into separate data structure
+    // note: cookie is case insensitive
+    cookies = cookie.parse(
+      cookieString.replace(/^Cookie: /gi, ""),
+      cookieParseOptions
+    );
+  }
+  let method;
+  if (parsedArguments.X === "POST") {
+    method = "post";
+  } else if (parsedArguments.X === "PUT" || parsedArguments["T"]) {
+    method = "put";
+  } else if (parsedArguments.X === "PATCH") {
+    method = "patch";
+  } else if (parsedArguments.X === "DELETE") {
+    method = "delete";
+  } else if (parsedArguments.X === "OPTIONS") {
+    method = "options";
+  } else if (
+    (parsedArguments["d"] ||
+      parsedArguments["data"] ||
+      parsedArguments["data-ascii"] ||
+      parsedArguments["data-binary"] ||
+      parsedArguments["F"] ||
+      parsedArguments["form"]) &&
+    !(parsedArguments["G"] || parsedArguments["get"])
+  ) {
+    method = "post";
+  } else if (parsedArguments["I"] || parsedArguments["head"]) {
+    method = "head";
+  } else {
+    method = "get";
+  }
 
-    let compressed = !!parsedArguments.compressed;
+  let compressed = !!parsedArguments.compressed;
-    let urlObject = URL.parse(url); // eslint-disable-line
+  let urlObject = URL.parse(url); // eslint-disable-line
 
-    // if GET request with data, convert data to query string
+  // if GET request with data, convert data to query string
-    // NB: the -G flag does not change the http verb. It just moves the data into the url.
+  // NB: the -G flag does not change the http verb. It just moves the data into the url.
-    if (parsedArguments['G'] || parsedArguments['get']) {
+  if (parsedArguments["G"] || parsedArguments["get"]) {
-        urlObject.query = urlObject.query ? urlObject.query : '';
+    urlObject.query = urlObject.query ? urlObject.query : "";
-        let option = 'd' in parsedArguments ? 'd' : 'data' in parsedArguments ? 'data' : null;
+    let option =
-        if (option) {
+      "d" in parsedArguments ? "d" : "data" in parsedArguments ? "data" : null;
-            let urlQueryString = '';
+    if (option) {
+      let urlQueryString = "";
 
-            if (!url.includes('?')) {
+      if (!url.includes("?")) {
-                url += '?';
+        url += "?";
-            } else {
+      } else {
-                urlQueryString += '&';
+        urlQueryString += "&";
-            }
+      }
 
-            if (typeof(parsedArguments[option]) === 'object') {
+      if (typeof parsedArguments[option] === "object") {
-                urlQueryString += parsedArguments[option].join('&');
+        urlQueryString += parsedArguments[option].join("&");
-            } else {
+      } else {
-                urlQueryString += parsedArguments[option];
+        urlQueryString += parsedArguments[option];
-            }
+      }
-            urlObject.query += urlQueryString;
+      urlObject.query += urlQueryString;
-            url += urlQueryString;
+      url += urlQueryString;
-            delete parsedArguments[option];
+      delete parsedArguments[option];
-        }
     }
-    let query = querystring.parse(urlObject.query, null, null, { maxKeys: 10000 });
+  }
+  let query = querystring.parse(urlObject.query, null, null, {
+    maxKeys: 10000
+  });
 
-    urlObject.search = null // Clean out the search/query portion.
+  urlObject.search = null; // Clean out the search/query portion.
-    let request = {
+  let request = {
-        url: url,
+    url: url,
-        urlWithoutQuery: URL.format(urlObject)
+    urlWithoutQuery: URL.format(urlObject)
-    }
+  };
-    if (compressed) {
+  if (compressed) {
-        request['compressed'] = true;
+    request["compressed"] = true;
-    }
+  }
 
-    if (Object.keys(query).length > 0) {
+  if (Object.keys(query).length > 0) {
-        request.query = query;
+    request.query = query;
-    }
+  }
-    if (headers) {
+  if (headers) {
-        request.headers = headers;
+    request.headers = headers;
-    }
+  }
-    request['method'] = method;
+  request["method"] = method;
 
-    if (cookies) {
+  if (cookies) {
-        request.cookies = cookies;
+    request.cookies = cookies;
-        request.cookieString = cookieString.replace('Cookie: ', '');
+    request.cookieString = cookieString.replace("Cookie: ", "");
-    }
+  }
-    if (multipartUploads) {
+  if (multipartUploads) {
-        request.multipartUploads = multipartUploads;
+    request.multipartUploads = multipartUploads;
-    }
+  }
-    if (parsedArguments.data) {
+  if (parsedArguments.data) {
-        request.data = parsedArguments.data;
+    request.data = parsedArguments.data;
-    } else if (parsedArguments['data-binary']) {
+  } else if (parsedArguments["data-binary"]) {
-        request.data = parsedArguments['data-binary']
+    request.data = parsedArguments["data-binary"];
-        request.isDataBinary = true;
+    request.isDataBinary = true;
-    } else if (parsedArguments['d']) {
+  } else if (parsedArguments["d"]) {
-        request.data = parsedArguments['d'];
+    request.data = parsedArguments["d"];
-    } else if (parsedArguments['data-ascii']) {
+  } else if (parsedArguments["data-ascii"]) {
-        request.data = parsedArguments['data-ascii'];
+    request.data = parsedArguments["data-ascii"];
-    }
+  }
 
-    if (parsedArguments['u']) {
+  if (parsedArguments["u"]) {
-        request.auth = parsedArguments['u'];
+    request.auth = parsedArguments["u"];
-    }
+  }
-    if (parsedArguments['user']) {
+  if (parsedArguments["user"]) {
-        request.auth = parsedArguments['user'];
+    request.auth = parsedArguments["user"];
-    }
+  }
-    if (Array.isArray(request.data)) {
+  if (Array.isArray(request.data)) {
-        request.dataArray = request.data
+    request.dataArray = request.data;
-        request.data = joinDataArguments(request.data);
+    request.data = joinDataArguments(request.data);
-    }
+  }
 
-    if (parsedArguments['k'] || parsedArguments['insecure']) {
+  if (parsedArguments["k"] || parsedArguments["insecure"]) {
-        request.insecure = true;
+    request.insecure = true;
-    }
+  }
-    return request;
+  return request;
 }
 
-
 export default parseCurlCommand;

assets/js/pwa.js

@@ -35,8 +35,6 @@ export default () => {
   });
 
   // When the app is uninstalled, add the prompts back
-
-
   return async () => {
     if (deferredPrompt) {
       deferredPrompt.prompt();

build.js

@@ -1,10 +1,12 @@
 const axios = require("axios");
 const fs = require("fs");
-const { spawnSync } = require("child_process");
+const {
+  spawnSync
+} = require("child_process");
 const runCommand = (command, args) =>
   spawnSync(command, args)
-    .stdout.toString()
+  .stdout.toString()
-    .replace(/\n/g, "");
+  .replace(/\n/g, "");
 
 const FAIL_ON_ERROR = false;
 const PW_BUILD_DATA_DIR = "./.postwoman";
@@ -27,7 +29,9 @@ try {
         .get("https://api.github.com/repos/liyasthomas/postwoman/releases")
         // If we can't get it from GitHub, we'll resort to getting it from package.json
         .catch(ex => ({
-          data: [{ tag_name: require("./package.json").version }]
+          data: [{
+            tag_name: require("./package.json").version
+          }]
         }))).data[0]["tag_name"];
     }
 
@@ -37,8 +41,8 @@ try {
     version.variant =
       process.env.TRAVIS_BRANCH ||
       runCommand("git", ["branch"])
-        .split("* ")[1]
+      .split("* ")[1]
-        .split(" ")[0] + (IS_DEV_MODE ? " - DEV MODE" : "");
+      .split(" ")[0] + (IS_DEV_MODE ? " - DEV MODE" : "");
     if (["", "master"].includes(version.variant))
       delete version.variant;
 

components/autocomplete.vue

@@ -29,176 +29,182 @@
 </template>
 
 <style lang="scss" scoped>
-.autocomplete-wrapper {
+  .autocomplete-wrapper {
-  position: relative;
+    position: relative;
 
-  input:focus + ul.suggestions,
+    input:focus + ul.suggestions,
-  ul.suggestions:hover {
+    ul.suggestions:hover {
-    display: block;
-  }
-
-  ul.suggestions {
-    display: none;
-    background-color: var(--atc-color);
-    position: absolute;
-    top: calc(100% - 4px);
-    margin: 0 4px;
-    left: 0;
-    padding: 0;
-    border-radius: 0 0 4px 4px;
-    z-index: 9999;
-    transition: transform 200ms ease-out;
-
-    li {
-      width: 100%;
       display: block;
-      padding: 8px 16px;
+    }
-      font-size: 18px;
-      font-family: 'Roboto Mono', monospace;
-      white-space: pre-wrap;
 
-      &:last-child {
+    ul.suggestions {
-        border-radius: 0 0 4px 4px;
+      display: none;
-      }
+      background-color: var(--atc-color);
+      position: absolute;
+      top: calc(100% - 4px);
+      margin: 0 4px;
+      left: 0;
+      padding: 0;
+      border-radius: 0 0 4px 4px;
+      z-index: 9999;
+      transition: transform 200ms ease-out;
 
-      &:hover,
+      li {
-      &.active {
+        width: 100%;
-        background-color: var(--ac-color);
+        display: block;
-        color: var(--act-color);
+        padding: 8px 16px;
-        cursor: pointer;
+        font-size: 18px;
+        font-family: "Roboto Mono", monospace;
+        white-space: pre-wrap;
+
+        &:last-child {
+          border-radius: 0 0 4px 4px;
+        }
+
+        &:hover,
+        &.active {
+          background-color: var(--ac-color);
+          color: var(--act-color);
+          cursor: pointer;
+        }
       }
     }
   }
-}
 </style>
 
 <script>
-const KEY_TAB = 9;
+  const KEY_TAB = 9;
-const KEY_ESC = 27;
+  const KEY_ESC = 27;
 
-const KEY_ARROW_UP = 38;
+  const KEY_ARROW_UP = 38;
-const KEY_ARROW_DOWN = 40;
+  const KEY_ARROW_DOWN = 40;
 
-export default {
+  export default {
-  props: {
+    props: {
-    spellcheck: {
+      spellcheck: {
-      type: Boolean,
+        type: Boolean,
-      default: true,
+        default: true,
-      required: false
+        required: false
+      },
+
+      placeholder: {
+        type: String,
+        default: "Start typing...",
+        required: false
+      },
+
+      source: {
+        type: Array,
+        required: true
+      }
     },
 
-    placeholder: {
+    watch: {
-      type: String,
+      value() {
-      default: "Start typing...",
+        this.$emit("input", this.value);
-      required: false
+      }
     },
 
-    source: {
+    data() {
-      type: Array,
+      return {
-      required: true
+        value: "application/json",
-    }
+        selectionStart: 0,
-  },
+        suggestionsOffsetLeft: 0,
+        currentSuggestionIndex: -1,
+        suggestionsVisible: false
+      };
+    },
 
-  watch: {
+    methods: {
-    value() {
+      updateSuggestions(event) {
-      this.$emit("input", this.value);
+        // Hide suggestions if ESC pressed.
-    }
+        if (event.which && event.which === KEY_ESC) {
-  },
+          event.preventDefault();
+          this.suggestionsVisible = false;
+          this.currentSuggestionIndex = -1;
+          return;
+        }
 
-  data() {
+        // As suggestions is a reactive property, this implicitly
-    return {
+        // causes suggestions to update.
-      value: "application/json",
+        this.selectionStart = this.$refs.acInput.selectionStart;
-      selectionStart: 0,
+        this.suggestionsOffsetLeft = 12 * this.selectionStart;
-      suggestionsOffsetLeft: 0,
+        this.suggestionsVisible = true;
-      currentSuggestionIndex: -1,
+      },
-      suggestionsVisible: false
-    };
-  },
 
-  methods: {
+      forceSuggestion(text) {
-    updateSuggestions(event) {
+        let input = this.value.substring(0, this.selectionStart);
-      // Hide suggestions if ESC pressed.
+        this.value = input + text;
-      if (event.which && event.which === KEY_ESC) {
+
-        event.preventDefault();
+        this.selectionStart = this.value.length;
-        this.suggestionsVisible = false;
+        this.suggestionsVisible = true;
         this.currentSuggestionIndex = -1;
-        return;
+      },
-      }
 
-      // As suggestions is a reactive property, this implicitly
+      handleKeystroke(event) {
-      // causes suggestions to update.
+        switch (event.which) {
-      this.selectionStart = this.$refs.acInput.selectionStart;
+          case KEY_ARROW_UP:
-      this.suggestionsOffsetLeft = 12 * this.selectionStart;
+            event.preventDefault();
-      this.suggestionsVisible = true;
+            this.currentSuggestionIndex =
+              this.currentSuggestionIndex - 1 >= 0
+                ? this.currentSuggestionIndex - 1
+                : 0;
+            break;
+
+          case KEY_ARROW_DOWN:
+            event.preventDefault();
+            this.currentSuggestionIndex =
+              this.currentSuggestionIndex < this.suggestions.length - 1
+                ? this.currentSuggestionIndex + 1
+                : this.suggestions.length - 1;
+            break;
+
+          case KEY_TAB:
+            event.preventDefault();
+            let activeSuggestion = this.suggestions[
+              this.currentSuggestionIndex >= 0 ? this.currentSuggestionIndex : 0
+            ];
+            if (activeSuggestion) {
+              let input = this.value.substring(0, this.selectionStart);
+              this.value = input + activeSuggestion;
+            }
+            break;
+
+          default:
+            break;
+        }
+      }
     },
 
-    forceSuggestion(text) {
+    computed: {
-      let input = this.value.substring(0, this.selectionStart);
+      /**
-      this.value = input + text;
+       * Gets the suggestions list to be displayed under the input box.
+       *
+       * @returns {default.props.source|{type, required}}
+       */
+      suggestions() {
+        let input = this.value.substring(0, this.selectionStart);
 
-      this.selectionStart = this.value.length;
+        return (
-      this.suggestionsVisible = true;
+          this.source
-      this.currentSuggestionIndex = -1;
+            .filter(entry => {
+              return (
+                entry.toLowerCase().startsWith(input.toLowerCase()) &&
+                input.toLowerCase() !== entry.toLowerCase()
+              );
+            })
+            // Cut off the part that's already been typed.
+            .map(entry => entry.substring(this.selectionStart))
+            // We only want the top 3 suggestions.
+            .slice(0, 3)
+        );
+      }
     },
 
-    handleKeystroke(event) {
+    mounted() {
-      switch (event.which) {
+      this.updateSuggestions({
-
+        target: this.$refs.acInput
-        case KEY_ARROW_UP:
+      });
-          event.preventDefault();
-          this.currentSuggestionIndex =this.currentSuggestionIndex - 1 >= 0 ? this.currentSuggestionIndex - 1 : 0;
-          break;
-
-        case KEY_ARROW_DOWN:
-          event.preventDefault();
-          this.currentSuggestionIndex = this.currentSuggestionIndex < this.suggestions.length - 1  ? this.currentSuggestionIndex + 1
-              : this.suggestions.length - 1;
-          break;
-
-        case KEY_TAB:
-          event.preventDefault();
-          let activeSuggestion = this.suggestions[this.currentSuggestionIndex >= 0 ? this.currentSuggestionIndex : 0];
-          if (activeSuggestion) {
-            let input = this.value.substring(0, this.selectionStart);
-            this.value = input + activeSuggestion;
-          }
-          break;
-
-        default:
-          break;
-      }
     }
-  },
+  };
-
-  computed: {
-    /**
-     * Gets the suggestions list to be displayed under the input box.
-     *
-     * @returns {default.props.source|{type, required}}
-     */
-    suggestions() {
-      let input = this.value.substring(0, this.selectionStart);
-
-      return (
-        this.source
-          .filter(entry => {
-            return (
-              entry.toLowerCase().startsWith(input.toLowerCase()) &&
-              input.toLowerCase() !== entry.toLowerCase()
-            );
-          })
-          // Cut off the part that's already been typed.
-          .map(entry => entry.substring(this.selectionStart))
-          // We only want the top 3 suggestions.
-          .slice(0, 3)
-      );
-    }
-  },
-
-  mounted() {
-    this.updateSuggestions({
-      target: this.$refs.acInput
-    });
-  }
-};
 </script>

components/collections/addCollection.vue

@@ -1,64 +1,64 @@
 <template>
-    <div>
+  <modal v-if="show" @close="hideModal">
-        <modal v-if="show" @close="hideModal">
+    <div slot="header">
-            <div slot="header">
+      <ul>
-            <ul>
+        <li>
-                <li>
+          <div class="flex-wrap">
-                <div class="flex-wrap">
+            <h3 class="title">New Collection</h3>
-                  <h3 class="title">New Collection</h3>
+            <div>
-                  <div>
+              <button class="icon" @click="hideModal">
-                    <button class="icon" @click="hideModal" >
+                <i class="material-icons">close</i>
-                        <i class="material-icons">close</i>
+              </button>
-                    </button>
-                  </div>
-                </div>
-                </li>
-            </ul>
             </div>
-            <div slot="body">
+          </div>
-            <ul>
+        </li>
-                <li>
+      </ul>
-                  <input type="text" v-model="name" placeholder="My New Collection" />
-                </li>
-            </ul>
-            </div>
-            <div slot="footer">
-              <ul>
-                <li>
-                  <button class="icon" @click="addNewCollection">
-                    <i class="material-icons">add</i>
-                    <span>Create</span>
-                  </button>
-                </li>
-              </ul>
-            </div>
-        </modal>
     </div>
+    <div slot="body">
+      <ul>
+        <li>
+          <input type="text" v-model="name" placeholder="My New Collection" />
+        </li>
+      </ul>
+    </div>
+    <div slot="footer">
+      <ul>
+        <li>
+          <button class="icon" @click="addNewCollection">
+            <i class="material-icons">add</i>
+            <span>Create</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </modal>
 </template>
 
 <script>
-import modal from "../../components/modal";
+  import modal from "../../components/modal";
 
-export default {
+  export default {
     props: {
-        show: Boolean,
+      show: Boolean
     },
     components: {
-        modal,
+      modal
     },
     data() {
-        return {
+      return {
-          name: undefined,
+        name: undefined
-        }
+      };
     },
     methods: {
-        addNewCollection() {
+      addNewCollection() {
-            this.$store.commit('postwoman/addNewCollection', { name: this.$data.name })
+        this.$store.commit("postwoman/addNewCollection", {
-            this.$emit('hide-modal')
+          name: this.$data.name
-        },
+        });
-        hideModal() {
+        this.$emit("hide-modal");
-            this.$emit('hide-modal')
+      },
-        },
+      hideModal() {
-    },
+        this.$emit("hide-modal");
-};
+      }
+    }
+  };
 </script>

components/collections/addFolder.vue

@@ -1,64 +1,67 @@
 <template>
-    <modal v-if="show" @close="show = false">
+  <modal v-if="show" @close="show = false">
-        <div slot="header">
+    <div slot="header">
-            <ul>
+      <ul>
-            <li>
+        <li>
-              <div class="flex-wrap">
+          <div class="flex-wrap">
-                <h3 class="title">New Folder</h3>
+            <h3 class="title">New Folder</h3>
-                <div>
+            <div>
-                  <button class="icon" @click="hideModal">
+              <button class="icon" @click="hideModal">
-                  <i class="material-icons">close</i>
+                <i class="material-icons">close</i>
-                  </button>
+              </button>
-                </div>
+            </div>
-              </div>
+          </div>
-            </li>
+        </li>
-            </ul>
+      </ul>
-        </div>
+    </div>
-        <div slot="body">
+    <div slot="body">
-            <ul>
+      <ul>
-            <li>
+        <li>
-                <input type="text" v-model="name" placeholder="My New Folder" />
+          <input type="text" v-model="name" placeholder="My New Folder" />
-            </li>
+        </li>
-            </ul>
+      </ul>
-        </div>
+    </div>
-        <div slot="footer">
+    <div slot="footer">
-          <ul>
+      <ul>
-            <li>
+        <li>
-            <button class="icon" @click="addNewFolder">
+          <button class="icon" @click="addNewFolder">
-              <i class="material-icons">add</i>
+            <i class="material-icons">add</i>
-              <span>Create</span>
+            <span>Create</span>
-            </button>
+          </button>
-            </li>
+        </li>
-          </ul>
+      </ul>
-        </div>
+    </div>
-    </modal>
+  </modal>
 </template>
 
 <script>
-import modal from "../../components/modal";
+  import modal from "../../components/modal";
 
-export default {
+  export default {
     props: {
-        show            : Boolean,
+      show: Boolean,
-        collection      : Object,
+      collection: Object,
-        collectionIndex : Number,
+      collectionIndex: Number
     },
     components: {
-        modal,
+      modal
     },
     data() {
-        return {
+      return {
-            name: undefined,
+        name: undefined
-        }
+      };
     },
     methods: {
-        addNewFolder() {
+      addNewFolder() {
-            this.$store.commit('postwoman/addNewFolder', { folder: { name: this.$data.name }, collectionIndex: this.$props.collectionIndex })
+        this.$store.commit("postwoman/addNewFolder", {
-            this.hideModal()
+          folder: { name: this.$data.name },
-        },
+          collectionIndex: this.$props.collectionIndex
-        hideModal() {
+        });
-            this.$emit('hide-modal')
+        this.hideModal();
-        },
+      },
-    },
+      hideModal() {
-};
+        this.$emit("hide-modal");
+      }
+    }
+  };
 </script>

components/collections/collection.vue

@@ -1,103 +1,103 @@
 <template>
-    <div>
+  <div>
-        <div class="flex-wrap">
+    <div class="flex-wrap">
-          <div>
+      <div>
-            <button class="icon" @click="toggleShowChildren">
+        <button class="icon" @click="toggleShowChildren">
-              <i class="material-icons" v-show='!showChildren'>arrow_right</i>
+          <i class="material-icons" v-show="!showChildren">arrow_right</i>
-              <i class="material-icons" v-show='showChildren'>arrow_drop_down</i>
+          <i class="material-icons" v-show="showChildren">arrow_drop_down</i>
-              <i class="material-icons">folder</i>
+          <i class="material-icons">folder</i>
-              <span>{{collection.name}}</span>
+          <span>{{collection.name}}</span>
-            </button>
+        </button>
-          </div>
+      </div>
-          <div>
+      <div>
-            <button class="icon" @click="removeCollection" v-tooltip="'Delete collection'">
+        <button class="icon" @click="removeCollection" v-tooltip="'Delete collection'">
-              <i class="material-icons">delete</i>
+          <i class="material-icons">delete</i>
-            </button>
+        </button>
-            <button class="icon" @click="$emit('edit-collection')" v-tooltip="'Edit collection'">
+        <button class="icon" @click="$emit('edit-collection')" v-tooltip="'Edit collection'">
-              <i class="material-icons">create</i>
+          <i class="material-icons">create</i>
-            </button>
+        </button>
-            <button class="icon" @click="$emit('add-folder')" v-tooltip="'New Folder'">
+        <button class="icon" @click="$emit('add-folder')" v-tooltip="'New Folder'">
-              <i class="material-icons">create_new_folder</i>
+          <i class="material-icons">create_new_folder</i>
-            </button>
+        </button>
-          </div>
+      </div>
-        </div>
-
-        <div v-show="showChildren">
-            <ul>
-                <li v-for="(folder, index) in collection.folders" :key="folder.name">
-                    <folder
-                        v-bind:folder           = "folder"
-                        v-bind:folderIndex      = "index"
-                        v-bind:collection-index = "collectionIndex"
-                        v-on:edit-folder        = "editFolder(collectionIndex, folder, index)"
-                        v-on:edit-request       = "$emit('edit-request', $event)"
-                    />
-                </li>
-                <li v-if="(collection.folders.length === 0) && (collection.requests.length === 0)">
-                  <label>Collection is empty</label>
-                </li>
-            </ul>
-
-            <ul>
-                <li v-for="(request, index) in collection.requests" :key="index">
-                    <request
-                        v-bind:request          = "request"
-                        v-bind:collection-index = "collectionIndex"
-                        v-bind:folder-index     = "-1"
-                        v-bind:request-index    = "index"
-                        v-on:edit-request       = "$emit('edit-request', { request, collectionIndex, folderIndex: undefined, requestIndex: index })"
-                    ></request>
-                </li>
-            </ul>
-        </div>
     </div>
+
+    <div v-show="showChildren">
+      <ul>
+        <li v-for="(folder, index) in collection.folders" :key="folder.name">
+          <folder
+            v-bind:folder="folder"
+            v-bind:folderIndex="index"
+            v-bind:collection-index="collectionIndex"
+            v-on:edit-folder="editFolder(collectionIndex, folder, index)"
+            v-on:edit-request="$emit('edit-request', $event)"
+          />
+        </li>
+        <li v-if="(collection.folders.length === 0) && (collection.requests.length === 0)">
+          <label>Collection is empty</label>
+        </li>
+      </ul>
+
+      <ul>
+        <li v-for="(request, index) in collection.requests" :key="index">
+          <request
+            v-bind:request="request"
+            v-bind:collection-index="collectionIndex"
+            v-bind:folder-index="-1"
+            v-bind:request-index="index"
+            v-on:edit-request="$emit('edit-request', { request, collectionIndex, folderIndex: undefined, requestIndex: index })"
+          ></request>
+        </li>
+      </ul>
+    </div>
+  </div>
 </template>
 
 <style scoped>
-    ul {
+  ul {
-        display: flex;
+    display: flex;
-        flex-direction: column;
+    flex-direction: column;
-    }
+  }
 
-    ul li {
+  ul li {
-        display: flex;
+    display: flex;
-        padding-left: 16px;
+    padding-left: 16px;
-        border-left: 1px solid var(--brd-color);
+    border-left: 1px solid var(--brd-color);
-    }
+  }
 </style>
 
 <script>
-import folder  from './folder';
+  import folder from "./folder";
-import request from './request';
+  import request from "./request";
 
-export default {
+  export default {
     components: {
-        folder,
+      folder,
-        request,
+      request
     },
     props: {
-        collectionIndex : Number,
+      collectionIndex: Number,
-        collection      : Object,
+      collection: Object
     },
-    data () {
+    data() {
-        return {
+      return {
-            showChildren   : false,
+        showChildren: false,
-            selectedFolder : {},
+        selectedFolder: {}
-        };
+      };
     },
     methods: {
-        toggleShowChildren() {
+      toggleShowChildren() {
-            this.showChildren = !this.showChildren;
+        this.showChildren = !this.showChildren;
-        },
+      },
-        removeCollection() {
+      removeCollection() {
-            if (!confirm("Are you sure you want to remove this collection?")) return;
+        if (!confirm("Are you sure you want to remove this collection?")) return;
-            this.$store.commit('postwoman/removeCollection', {
+        this.$store.commit("postwoman/removeCollection", {
-                collectionIndex: this.collectionIndex,
+          collectionIndex: this.collectionIndex
-            });
+        });
-        },
+      },
-        editFolder(collectionIndex, folder, folderIndex) {
+      editFolder(collectionIndex, folder, folderIndex) {
-            this.$emit('edit-folder', { collectionIndex, folder, folderIndex })
+        this.$emit("edit-folder", { collectionIndex, folder, folderIndex });
-        },
+      }
     }
-};
+  };
 </script>

components/collections/editCollection.vue

@@ -1,67 +1,71 @@
 <template>
-    <div>
+  <modal v-if="show" @close="hideModel">
-        <modal v-if="show" @close="hideModel">
+    <div slot="header">
-            <div slot='header'>
+      <ul>
-            <ul>
+        <li>
-                <li>
+          <div class="flex-wrap">
-                <div class="flex-wrap">
+            <h3 class="title">Edit Collection</h3>
-                  <h3 class="title">Edit Collection</h3>
+            <div>
-                  <div>
+              <button class="icon" @click="hideModel">
-                    <button class="icon" @click="hideModel" >
+                <i class="material-icons">close</i>
-                        <i class="material-icons">close</i>
+              </button>
-                    </button>
-                  </div>
-                </div>
-                </li>
-            </ul>
             </div>
-            <div slot="body">
+          </div>
-            <ul>
+        </li>
-                <li>
+      </ul>
-                  <input type="text" v-model="name" v-bind:placeholder="editingCollection.name" />
-                </li>
-            </ul>
-            </div>
-            <div slot="footer">
-              <ul>
-                <li>
-                  <button class="icon" @click="saveCollection">
-                    <i class="material-icons">save</i>
-                    <span>Save</span>
-                  </button>
-                </li>
-              </ul>
-            </div>
-        </modal>
     </div>
+    <div slot="body">
+      <ul>
+        <li>
+          <input type="text" v-model="name" v-bind:placeholder="editingCollection.name" />
+        </li>
+      </ul>
+    </div>
+    <div slot="footer">
+      <ul>
+        <li>
+          <button class="icon" @click="saveCollection">
+            <i class="material-icons">save</i>
+            <span>Save</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </modal>
 </template>
 
 <script>
-import modal from "../../components/modal";
+  import modal from "../../components/modal";
 
-export default {
+  export default {
     props: {
-        show                   : Boolean,
+      show: Boolean,
-        editingCollection      : Object,
+      editingCollection: Object,
-        editingCollectionIndex : Number,
+      editingCollectionIndex: Number
     },
     components: {
-        modal,
+      modal
     },
     data() {
-        return {
+      return {
-          name: undefined,
+        name: undefined
-        }
+      };
     },
     methods: {
-        saveCollection() {
+      saveCollection() {
-            const collectionUpdated = { ...this.$props.editingCollection, name: this.$data.name }
+        const collectionUpdated = {
-            this.$store.commit('postwoman/editCollection', { collection: collectionUpdated, collectionIndex: this.$props.editingCollectionIndex })
+          ...this.$props.editingCollection,
-            this.$emit('hide-modal');
+          name: this.$data.name
-        },
+        };
-        hideModel() {
+        this.$store.commit("postwoman/editCollection", {
-            this.$emit('hide-modal');
+          collection: collectionUpdated,
-        },
+          collectionIndex: this.$props.editingCollectionIndex
-    },
+        });
-};
+        this.$emit("hide-modal");
+      },
+      hideModel() {
+        this.$emit("hide-modal");
+      }
+    }
+  };
 </script>

components/collections/editFolder.vue

@@ -1,70 +1,70 @@
 <template>
-    <modal v-if="show" @close="show = false">
+  <modal v-if="show" @close="show = false">
-        <div slot="header">
+    <div slot="header">
-            <ul>
+      <ul>
-            <li>
+        <li>
-              <div class="flex-wrap">
+          <div class="flex-wrap">
-                <h3 class="title">Edit Folder</h3>
+            <h3 class="title">Edit Folder</h3>
-                <div>
+            <div>
-                  <button class="icon" @click="hideModal">
+              <button class="icon" @click="hideModal">
-                  <i class="material-icons">close</i>
+                <i class="material-icons">close</i>
-                  </button>
+              </button>
-                </div>
+            </div>
-              </div>
+          </div>
-            </li>
+        </li>
-            </ul>
+      </ul>
-        </div>
+    </div>
-        <div slot="body">
+    <div slot="body">
-            <ul>
+      <ul>
-            <li>
+        <li>
-                <input type="text" v-model="name" v-bind:placeholder="folder.name" />
+          <input type="text" v-model="name" v-bind:placeholder="folder.name" />
-            </li>
+        </li>
-            </ul>
+      </ul>
-        </div>
+    </div>
-        <div slot="footer">
+    <div slot="footer">
-          <ul>
+      <ul>
-            <li>
+        <li>
-            <button class="icon" @click="editFolder">
+          <button class="icon" @click="editFolder">
-              <i class="material-icons">add</i>
+            <i class="material-icons">add</i>
-              <span>Save</span>
+            <span>Save</span>
-            </button>
+          </button>
-            </li>
+        </li>
-          </ul>
+      </ul>
-        </div>
+    </div>
-    </modal>
+  </modal>
 </template>
 
 <script>
-import modal from "../../components/modal";
+  import modal from "../../components/modal";
 
-export default {
+  export default {
     props: {
-        show            : Boolean,
+      show: Boolean,
-        collection      : Object,
+      collection: Object,
-        collectionIndex : Number,
+      collectionIndex: Number,
-        folder          : Object,
+      folder: Object,
-        folderIndex     : Number,
+      folderIndex: Number
     },
     components: {
-        modal,
+      modal
     },
     data() {
-        return {
+      return {
-            name: undefined,
+        name: undefined
-        }
+      };
     },
     methods: {
-        editFolder() {
+      editFolder() {
-            this.$store.commit('postwoman/editFolder', {
+        this.$store.commit("postwoman/editFolder", {
-              collectionIndex : this.$props.collectionIndex,
+          collectionIndex: this.$props.collectionIndex,
-              folder          : { ...this.$props.folder, name: this.$data.name },
+          folder: { ...this.$props.folder, name: this.$data.name },
-              folderIndex     : this.$props.folderIndex,
+          folderIndex: this.$props.folderIndex
-            })
+        });
-            this.hideModal()
+        this.hideModal();
-        },
+      },
-        hideModal() {
+      hideModal() {
-            this.$emit('hide-modal')
+        this.$emit("hide-modal");
-        },
+      }
-    },
+    }
-};
+  };
 </script>

components/collections/editRequest.vue

@@ -1,132 +1,122 @@
-<!--
-Made this component to be separate from `saveRequest` as it handles request editing
-only related to it's positioning and naming inside of collections.
--->
-
 <template>
-    <div>
+  <modal v-if="show" @close="hideModal">
-        <modal v-if="show" @close="hideModal">
+    <div slot="header">
-            <div slot="header">
+      <ul>
-                <ul>
+        <li>
-                    <li>
+          <div class="flex-wrap">
-                        <div class="flex-wrap">
+            <h3 class="title">Edit Request</h3>
-                            <h3 class="title">Edit Request</h3>
+            <div>
-                            <div>
+              <button class="icon" @click="hideModal">
-                              <button class="icon" @click="hideModal">
+                <i class="material-icons">close</i>
-                                <i class="material-icons">close</i>
+              </button>
-                              </button>
-                            </div>
-                        </div>
-                    </li>
-                </ul>
             </div>
-            <div slot="body">
+          </div>
-                <ul>
+        </li>
-                    <li>
+      </ul>
-                        <input  type="text" v-model="requestUpdateData.name" v-bind:placeholder="request.name" />
-                        <select type="text" v-model="requestUpdateData.collectionIndex" >
-                            <option
-                                v-for="(collection, index) in $store.state.postwoman.collections"
-                                :key   = "index"
-                                :value = "index">
-                                {{ collection.name }}
-                            </option>
-                        </select>
-                        <select type="text" v-model="requestUpdateData.folderIndex">
-                            <option
-                                :key   = "undefined"
-                                :value = "undefined">
-                            </option>
-                            <option
-                                v-for="(folder, index) in folders"
-                                :key   = "index"
-                                :value = "index">
-                                {{ folder.name }}
-                            </option>
-                        </select>
-                    </li>
-                </ul>
-            </div>
-            <div slot="footer">
-              <ul>
-                <li>
-                <button class="icon" @click="saveRequest">
-                  <i class="material-icons">save</i>
-                  <span>Save</span>
-                </button>
-                </li>
-              </ul>
-            </div>
-        </modal>
     </div>
+    <div slot="body">
+      <ul>
+        <li>
+          <input type="text" v-model="requestUpdateData.name" v-bind:placeholder="request.name" />
+          <select type="text" v-model="requestUpdateData.collectionIndex">
+            <option
+              v-for="(collection, index) in $store.state.postwoman.collections"
+              :key="index"
+              :value="index"
+            >{{ collection.name }}</option>
+          </select>
+          <select type="text" v-model="requestUpdateData.folderIndex">
+            <option :key="undefined" :value="undefined"></option>
+            <option v-for="(folder, index) in folders" :key="index" :value="index">{{ folder.name }}</option>
+          </select>
+        </li>
+      </ul>
+    </div>
+    <div slot="footer">
+      <ul>
+        <li>
+          <button class="icon" @click="saveRequest">
+            <i class="material-icons">save</i>
+            <span>Save</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </modal>
 </template>
 
 <script>
-import modal from "../../components/modal";
+  import modal from "../../components/modal";
 
-export default {
+  export default {
     props: {
-        show            : Boolean,
+      show: Boolean,
-        collectionIndex : Number,
+      collectionIndex: Number,
-        folderIndex     : Number,
+      folderIndex: Number,
-        request         : Object,
+      request: Object,
-        requestIndex    : Number,
+      requestIndex: Number
     },
     components: {
-        modal,
+      modal
     },
     data() {
-        return {
+      return {
-            requestUpdateData : {
+        requestUpdateData: {
-              name            : undefined,
+          name: undefined,
-              collectionIndex : undefined,
+          collectionIndex: undefined,
-              folderIndex     : undefined,
+          folderIndex: undefined
-            },
         }
+      };
     },
     watch: {
-      'requestUpdateData.collectionIndex': function resetFolderIndex() {
+      "requestUpdateData.collectionIndex": function resetFolderIndex() {
         // if user choosen some folder, than selected other collection, which doesn't have any folders
         // than `requestUpdateData.folderIndex` won't be reseted
-        this.$data.requestUpdateData.folderIndex = undefined
+        this.$data.requestUpdateData.folderIndex = undefined;
-      },
+      }
     },
     computed: {
-        folders() {
+      folders() {
-            const userSelectedAnyCollection = this.$data.requestUpdateData.collectionIndex !== undefined
+        const userSelectedAnyCollection =
-            if  (!userSelectedAnyCollection)  return []
+          this.$data.requestUpdateData.collectionIndex !== undefined;
+        if (!userSelectedAnyCollection) return [];
 
-            return this.$store.state.postwoman.collections[this.$data.requestUpdateData.collectionIndex].folders
+        return this.$store.state.postwoman.collections[
-        },
+          this.$data.requestUpdateData.collectionIndex
+        ].folders;
+      }
     },
     methods: {
-        saveRequest() {
+      saveRequest() {
-            const userSelectedAnyCollection = this.$data.requestUpdateData.collectionIndex !== undefined
+        const userSelectedAnyCollection =
+          this.$data.requestUpdateData.collectionIndex !== undefined;
 
-            const requestUpdated = {
+        const requestUpdated = {
-              ...this.$props.request,
+          ...this.$props.request,
-              name       : this.$data.requestUpdateData.name || this.$props.request.name,
+          name: this.$data.requestUpdateData.name || this.$props.request.name,
-              collection : userSelectedAnyCollection ? this.$data.requestUpdateData.collectionIndex : this.$props.collectionIndex,
+          collection: userSelectedAnyCollection
-              folder     : this.$data.requestUpdateData.folderIndex,
+            ? this.$data.requestUpdateData.collectionIndex
-            }
+            : this.$props.collectionIndex,
+          folder: this.$data.requestUpdateData.folderIndex
+        };
 
-            // pass data separately to don't depend on request's collection, folder fields
+        // pass data separately to don't depend on request's collection, folder fields
-            // probably, they should be deprecated because they don't describe request itself
+        // probably, they should be deprecated because they don't describe request itself
-            this.$store.commit('postwoman/editRequest', {
+        this.$store.commit("postwoman/editRequest", {
-                requestOld                : this.$props.request,
+          requestOld: this.$props.request,
-                requestOldCollectionIndex : this.$props.collectionIndex,
+          requestOldCollectionIndex: this.$props.collectionIndex,
-                requestOldFolderIndex     : this.$props.folderIndex,
+          requestOldFolderIndex: this.$props.folderIndex,
-                requestOldIndex           : this.$props.requestIndex,
+          requestOldIndex: this.$props.requestIndex,
-                requestNew                : requestUpdated,
+          requestNew: requestUpdated,
-                requestNewCollectionIndex : requestUpdated.collection,
+          requestNewCollectionIndex: requestUpdated.collection,
-                requestNewFolderIndex     : requestUpdated.folder,
+          requestNewFolderIndex: requestUpdated.folder
-            });
+        });
 
-            this.hideModal()
+        this.hideModal();
-        },
+      },
-        hideModal() {
+      hideModal() {
-            this.$emit('hide-modal')
+        this.$emit("hide-modal");
-        },
+      }
-    },
+    }
-};
+  };
 </script>

components/collections/folder.vue

@@ -1,90 +1,90 @@
 <template>
-    <div>
+  <div>
-        <div class="flex-wrap">
+    <div class="flex-wrap">
-          <div>
+      <div>
-            <button class="icon" @click="toggleShowChildren">
+        <button class="icon" @click="toggleShowChildren">
-              <i class="material-icons" v-show='!showChildren'>arrow_right</i>
+          <i class="material-icons" v-show="!showChildren">arrow_right</i>
-              <i class="material-icons" v-show='showChildren'>arrow_drop_down</i>
+          <i class="material-icons" v-show="showChildren">arrow_drop_down</i>
-              <i class="material-icons">folder_open</i>
+          <i class="material-icons">folder_open</i>
-              <span>{{folder.name}}</span>
+          <span>{{folder.name}}</span>
-            </button>
+        </button>
-          </div>
+      </div>
-          <div>
+      <div>
-            <button class="icon" @click="removeFolder" v-tooltip="'Delete folder'">
+        <button class="icon" @click="removeFolder" v-tooltip="'Delete folder'">
-              <i class="material-icons">delete</i>
+          <i class="material-icons">delete</i>
-            </button>
+        </button>
-            <button class="icon" @click="editFolder" v-tooltip="'Edit folder'">
+        <button class="icon" @click="editFolder" v-tooltip="'Edit folder'">
-              <i class="material-icons">edit</i>
+          <i class="material-icons">edit</i>
-            </button>
+        </button>
-          </div>
+      </div>
-        </div>
-
-        <div v-show="showChildren">
-            <ul>
-                <li v-for="(request, index) in folder.requests" :key="index">
-                    <request
-                        v-bind:request          = "request"
-                        v-bind:collection-index = "collectionIndex"
-                        v-bind:folder-index     = "folderIndex"
-                        v-bind:request-index    = "index"
-                        v-on:edit-request       = "$emit('edit-request', { request, collectionIndex, folderIndex, requestIndex: index })"
-                    ></request>
-                </li>
-                <li v-if="folder.requests.length === 0">
-                  <label>Folder is empty</label>
-                </li>
-            </ul>
-        </div>
     </div>
+
+    <div v-show="showChildren">
+      <ul>
+        <li v-for="(request, index) in folder.requests" :key="index">
+          <request
+            v-bind:request="request"
+            v-bind:collection-index="collectionIndex"
+            v-bind:folder-index="folderIndex"
+            v-bind:request-index="index"
+            v-on:edit-request="$emit('edit-request', { request, collectionIndex, folderIndex, requestIndex: index })"
+          ></request>
+        </li>
+        <li v-if="folder.requests.length === 0">
+          <label>Folder is empty</label>
+        </li>
+      </ul>
+    </div>
+  </div>
 </template>
 
 <style scoped>
-    ul {
+  ul {
-        display: flex;
+    display: flex;
-        flex-direction: column;
+    flex-direction: column;
-    }
+  }
 
-    ul li {
+  ul li {
-        display: flex;
+    display: flex;
-        padding-left: 16px;
+    padding-left: 16px;
-        border-left: 1px solid var(--brd-color);
+    border-left: 1px solid var(--brd-color);
-    }
+  }
 </style>
 
 <script>
-import request from './request';
+  import request from "./request";
 
-export default {
+  export default {
     props: {
-        folder          : Object,
+      folder: Object,
-        collectionIndex : Number,
+      collectionIndex: Number,
-        folderIndex     : Number,
+      folderIndex: Number
     },
     components: {
-        request,
+      request
     },
-    data () {
+    data() {
-        return {
+      return {
-            showChildren: false,
+        showChildren: false
-        };
+      };
     },
     methods: {
-        toggleShowChildren() {
+      toggleShowChildren() {
-            this.showChildren = !this.showChildren;
+        this.showChildren = !this.showChildren;
-        },
+      },
-        selectRequest(request) {
+      selectRequest(request) {
-            this.$store.commit('postwoman/selectRequest', { request });
+        this.$store.commit("postwoman/selectRequest", { request });
-        },
+      },
-        removeFolder() {
+      removeFolder() {
-            if (!confirm("Are you sure you want to remove this folder?")) return;
+        if (!confirm("Are you sure you want to remove this folder?")) return;
-            this.$store.commit('postwoman/removeFolder', {
+        this.$store.commit("postwoman/removeFolder", {
-                collectionIndex: this.collectionIndex,
+          collectionIndex: this.collectionIndex,
-                folderIndex: this.folderIndex,
+          folderIndex: this.folderIndex
-            });
+        });
-        },
+      },
-        editFolder() {
+      editFolder() {
-            this.$emit('edit-folder')
+        this.$emit("edit-folder");
-        },
+      }
     }
-};
+  };
 </script>

components/collections/importExportCollections.vue

@@ -1,110 +1,117 @@
 <template>
-    <div>
+  <modal v-if="show" @close="hideModel">
-        <modal v-if="show" @close="hideModel">
+    <div slot="header">
-            <div slot="header">
+      <ul>
-            <ul>
+        <li>
-                <li>
+          <div class="flex-wrap">
-                <div class="flex-wrap">
+            <h3 class="title">Import / Export Collections</h3>
-                    <h3 class="title">Import / Export Collections</h3>
+            <div>
-                    <div>
+              <button class="icon" @click="hideModel">
-                    <button class="icon" @click="hideModel">
+                <i class="material-icons">close</i>
-                        <i class="material-icons">close</i>
+              </button>
-                    </button>
-                    </div>
-                </div>
-                </li>
-            </ul>
             </div>
-            <div slot="body">
+          </div>
-              <textarea v-model='collectionJson' rows="8">
+        </li>
-              </textarea>
+      </ul>
-            </div>
-            <div slot="footer">
-              <ul>
-                <li>
-                <button class="icon" @click="openDialogChooseFileToReplaceWith">
-                  <i class="material-icons">get_app</i>
-                  <span>Replace with JSON</span>
-                  <input type="file" @change="replaceWithJSON" style="display: none;" ref="inputChooseFileToReplaceWith">
-                </button>
-                </li>
-                <li>
-                <button class="icon" @click="openDialogChooseFileToImportFrom">
-                  <i class="material-icons">get_app</i>
-                  <span>Import from JSON</span>
-                  <input type="file" @change="importFromJSON" style="display: none;" ref="inputChooseFileToImportFrom">
-                </button>
-                </li>
-                <li>
-                <button class="icon" @click="exportJSON">
-                  <i class="material-icons">get_app</i>
-                  <span>Export JSON</span>
-                </button>
-                </li>
-              </ul>
-            </div>
-        </modal>
     </div>
+    <div slot="body">
+      <textarea v-model="collectionJson" rows="8"></textarea>
+    </div>
+    <div slot="footer">
+      <ul>
+        <li>
+          <button class="icon" @click="openDialogChooseFileToReplaceWith" v-tooltip="'Replace current'">
+            <i class="material-icons">create_new_folder</i>
+            <span>Replace with JSON</span>
+            <input
+              type="file"
+              @change="replaceWithJSON"
+              style="display: none;"
+              ref="inputChooseFileToReplaceWith"
+            />
+          </button>
+        </li>
+        <li>
+          <button class="icon" @click="openDialogChooseFileToImportFrom" v-tooltip="'Preserve current'">
+            <i class="material-icons">folder_shared</i>
+            <span>Import from JSON</span>
+            <input
+              type="file"
+              @change="importFromJSON"
+              style="display: none;"
+              ref="inputChooseFileToImportFrom"
+            />
+          </button>
+        </li>
+        <li>
+          <button class="icon" @click="exportJSON" v-tooltip="'Download file'">
+            <i class="material-icons">get_app</i>
+            <span>Export to JSON</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </modal>
 </template>
 
 <script>
-import modal from "../../components/modal";
+  import modal from "../../components/modal";
 
-export default {
+  export default {
     props: {
-        show: Boolean,
+      show: Boolean
     },
     components: {
-        modal,
+      modal
     },
     computed: {
-        collectionJson () {
+      collectionJson() {
-            return JSON.stringify(this.$store.state.postwoman.collections, null, 2);
+        return JSON.stringify(this.$store.state.postwoman.collections, null, 2);
-        }
+      }
     },
     methods: {
-        hideModel() {
+      hideModel() {
-            this.$emit('hide-modal');
+        this.$emit("hide-modal");
-        },
+      },
-        openDialogChooseFileToReplaceWith() {
+      openDialogChooseFileToReplaceWith() {
-          this.$refs.inputChooseFileToReplaceWith.click();
+        this.$refs.inputChooseFileToReplaceWith.click();
-        },
+      },
-        openDialogChooseFileToImportFrom() {
+      openDialogChooseFileToImportFrom() {
-          this.$refs.inputChooseFileToImportFrom.click();
+        this.$refs.inputChooseFileToImportFrom.click();
-        },
+      },
-        replaceWithJSON() {
+      replaceWithJSON() {
-          let reader = new FileReader();
+        let reader = new FileReader();
-          reader.onload = (event) => {
+        reader.onload = event => {
-            let content = event.target.result;
+          let content = event.target.result;
-            let collections = JSON.parse(content);
+          let collections = JSON.parse(content);
-            this.$store.commit('postwoman/replaceCollections', collections);
+          this.$store.commit("postwoman/replaceCollections", collections);
-          };
+        };
-          reader.readAsText(this.$refs.inputChooseFileToReplaceWith.files[0]);
+        reader.readAsText(this.$refs.inputChooseFileToReplaceWith.files[0]);
-        },
+      },
-        importFromJSON() {
+      importFromJSON() {
-          let reader = new FileReader();
+        let reader = new FileReader();
-          reader.onload = (event) => {
+        reader.onload = event => {
-            let content = event.target.result;
+          let content = event.target.result;
-            let collections = JSON.parse(content);
+          let collections = JSON.parse(content);
-            this.$store.commit('postwoman/importCollections', collections);
+          this.$store.commit("postwoman/importCollections", collections);
-          };
+        };
-          reader.readAsText(this.$refs.inputChooseFileToImportFrom.files[0]);
+        reader.readAsText(this.$refs.inputChooseFileToImportFrom.files[0]);
-        },
+      },
-        exportJSON() {
+      exportJSON() {
-          let text = this.collectionJson;
+        let text = this.collectionJson;
-          text = text.replace(/\n/g, '\r\n');
+        text = text.replace(/\n/g, "\r\n");
-          let blob = new Blob([text], {
+        let blob = new Blob([text], {
-            type: 'text/json'
+          type: "text/json"
-          });
+        });
-          let anchor = document.createElement('a');
+        let anchor = document.createElement("a");
-          anchor.download = 'postwoman-collection.json';
+        anchor.download = "postwoman-collection.json";
-          anchor.href = window.URL.createObjectURL(blob);
+        anchor.href = window.URL.createObjectURL(blob);
-          anchor.target = '_blank';
+        anchor.target = "_blank";
-          anchor.style.display = 'none';
+        anchor.style.display = "none";
-          document.body.appendChild(anchor);
+        document.body.appendChild(anchor);
-          anchor.click();
+        anchor.click();
-          document.body.removeChild(anchor);
+        document.body.removeChild(anchor);
-        }
+      }
-    },
+    }
-};
+  };
 </script>

components/collections/index.vue

@@ -5,50 +5,41 @@ TODO:
 
 <template>
   <div class="collections-wrapper">
-    <addCollection
+    <addCollection v-bind:show="showModalAdd" v-on:hide-modal="displayModalAdd(false)"></addCollection>
-      v-bind:show     = "showModalAdd"
-      v-on:hide-modal = 'displayModalAdd(false)'
-      >
-    </addCollection>
     <editCollection
-      v-bind:show                   = "showModalEdit"
+      v-bind:show="showModalEdit"
-      v-bind:editingCollection      = "editingCollection"
+      v-bind:editingCollection="editingCollection"
-      v-bind:editingCollectionIndex = "editingCollectionIndex"
+      v-bind:editingCollectionIndex="editingCollectionIndex"
-      v-on:hide-modal               = 'displayModalEdit(false)'
+      v-on:hide-modal="displayModalEdit(false)"
-      >
+    ></editCollection>
-    </editCollection>
     <addFolder
-        v-bind:show            = "showModalAddFolder"
+      v-bind:show="showModalAddFolder"
-        v-bind:collection      = "editingCollection"
+      v-bind:collection="editingCollection"
-        v-bind:collectionIndex = "editingCollectionIndex"
+      v-bind:collectionIndex="editingCollectionIndex"
-        v-on:hide-modal        = 'displayModalAddFolder(false)'
+      v-on:hide-modal="displayModalAddFolder(false)"
-    >
+    ></addFolder>
-    </addFolder>
     <editFolder
-        v-bind:show            = "showModalEditFolder"
+      v-bind:show="showModalEditFolder"
-        v-bind:collection      = "editingCollection"
+      v-bind:collection="editingCollection"
-        v-bind:collectionIndex = "editingCollectionIndex"
+      v-bind:collectionIndex="editingCollectionIndex"
-        v-bind:folder          = "editingFolder"
+      v-bind:folder="editingFolder"
-        v-bind:folderIndex     = "editingFolderIndex"
+      v-bind:folderIndex="editingFolderIndex"
-        v-on:hide-modal        = 'displayModalEditFolder(false)'
+      v-on:hide-modal="displayModalEditFolder(false)"
-    >
+    ></editFolder>
-    </editFolder>
     <editRequest
-        v-bind:show            = "showModalEditRequest"
+      v-bind:show="showModalEditRequest"
-        v-bind:collectionIndex = "editingCollectionIndex"
+      v-bind:collectionIndex="editingCollectionIndex"
-        v-bind:folderIndex     = "editingFolderIndex"
+      v-bind:folderIndex="editingFolderIndex"
-        v-bind:request         = "editingRequest"
+      v-bind:request="editingRequest"
-        v-bind:requestIndex    = "editingRequestIndex"
+      v-bind:requestIndex="editingRequestIndex"
-        v-on:hide-modal        = "displayModalEditRequest(false)"
+      v-on:hide-modal="displayModalEditRequest(false)"
-    >
+    ></editRequest>
-    </editRequest>
     <importExportCollections
-        v-bind:show     = "showModalImportExport"
+      v-bind:show="showModalImportExport"
-        v-on:hide-modal = 'displayModalImportExport(false)'
+      v-on:hide-modal="displayModalImportExport(false)"
-        >
+    ></importExportCollections>
-    </importExportCollections>
 
-    <div class='flex-wrap'>
+    <div class="flex-wrap">
       <div>
         <button class="icon" @click="displayModalAdd(true)">
           <i class="material-icons">add</i>
@@ -66,14 +57,13 @@ TODO:
     <ul>
       <li v-for="(collection, index) in collections" :key="collection.name">
         <collection
-          v-bind:collection-index = "index"
+          v-bind:collection-index="index"
-          v-bind:collection       = "collection"
+          v-bind:collection="collection"
-          v-on:edit-collection    = "editCollection(collection, index)"
+          v-on:edit-collection="editCollection(collection, index)"
-          v-on:add-folder         = "addFolder(collection, index)"
+          v-on:add-folder="addFolder(collection, index)"
-          v-on:edit-folder        = "editFolder($event)"
+          v-on:edit-folder="editFolder($event)"
-          v-on:edit-request       = "editRequest($event)"
+          v-on:edit-request="editRequest($event)"
-          >
+        ></collection>
-        </collection>
       </li>
       <li v-if="collections.length === 0">
         <label>Collections are empty</label>
@@ -90,12 +80,12 @@ TODO:
 </style>
 
 <script>
-  import addCollection           from "./addCollection";
+  import addCollection from "./addCollection";
-  import addFolder               from "./addFolder";
+  import addFolder from "./addFolder";
-  import collection              from './collection'
+  import collection from "./collection";
-  import editCollection          from "./editCollection";
+  import editCollection from "./editCollection";
-  import editFolder              from "./editFolder";
+  import editFolder from "./editFolder";
-  import editRequest             from "./editRequest";
+  import editRequest from "./editRequest";
   import importExportCollections from "./importExportCollections";
 
   export default {
@@ -106,96 +96,90 @@ TODO:
       editCollection,
       editFolder,
       editRequest,
-      importExportCollections,
+      importExportCollections
     },
     data() {
       return {
-        showModalAdd           : false,
+        showModalAdd: false,
-        showModalEdit          : false,
+        showModalEdit: false,
-        showModalImportExport  : false,
+        showModalImportExport: false,
-        showModalAddFolder     : false,
+        showModalAddFolder: false,
-        showModalEditFolder    : false,
+        showModalEditFolder: false,
-        showModalEditRequest   : false,
+        showModalEditRequest: false,
-        editingCollection      : undefined,
+        editingCollection: undefined,
-        editingCollectionIndex : undefined,
+        editingCollectionIndex: undefined,
-        editingFolder          : undefined,
+        editingFolder: undefined,
-        editingFolderIndex     : undefined,
+        editingFolderIndex: undefined,
-        editingRequest         : undefined,
+        editingRequest: undefined,
-        editingRequestIndex    : undefined,
+        editingRequestIndex: undefined
-      }
+      };
     },
     computed: {
-      collections () {
+      collections() {
-        return this.$store.state.postwoman.collections
+        return this.$store.state.postwoman.collections;
       }
     },
     methods: {
       displayModalAdd(shouldDisplay) {
-        this.showModalAdd = shouldDisplay
+        this.showModalAdd = shouldDisplay;
       },
       displayModalEdit(shouldDisplay) {
-        this.showModalEdit = shouldDisplay
+        this.showModalEdit = shouldDisplay;
 
-        if (!shouldDisplay)
+        if (!shouldDisplay) this.resetSelectedData();
-          this.resetSelectedData()
       },
       displayModalImportExport(shouldDisplay) {
-        this.showModalImportExport = shouldDisplay
+        this.showModalImportExport = shouldDisplay;
       },
       displayModalAddFolder(shouldDisplay) {
-          this.showModalAddFolder = shouldDisplay
+        this.showModalAddFolder = shouldDisplay;
 
-          if (!shouldDisplay)
+        if (!shouldDisplay) this.resetSelectedData();
-            this.resetSelectedData()
       },
       displayModalEditFolder(shouldDisplay) {
-          this.showModalEditFolder = shouldDisplay
+        this.showModalEditFolder = shouldDisplay;
 
-          if (!shouldDisplay)
+        if (!shouldDisplay) this.resetSelectedData();
-            this.resetSelectedData()
       },
       displayModalEditRequest(shouldDisplay) {
-          this.showModalEditRequest = shouldDisplay
+        this.showModalEditRequest = shouldDisplay;
 
-          if (!shouldDisplay)
+        if (!shouldDisplay) this.resetSelectedData();
-            this.resetSelectedData()
       },
       editCollection(collection, collectionIndex) {
-        this.$data.editingCollection      = collection
+        this.$data.editingCollection = collection;
-        this.$data.editingCollectionIndex = collectionIndex
+        this.$data.editingCollectionIndex = collectionIndex;
-        this.displayModalEdit(true)
+        this.displayModalEdit(true);
       },
       addFolder(collection, collectionIndex) {
-        this.$data.editingCollection      = collection
+        this.$data.editingCollection = collection;
-        this.$data.editingCollectionIndex = collectionIndex
+        this.$data.editingCollectionIndex = collectionIndex;
-        this.displayModalAddFolder(true)
+        this.displayModalAddFolder(true);
       },
       editFolder(payload) {
-        const { collectionIndex, folder, folderIndex } = payload
+        const { collectionIndex, folder, folderIndex } = payload;
-        this.$data.editingCollection      = collection
+        this.$data.editingCollection = collection;
-        this.$data.editingCollectionIndex = collectionIndex
+        this.$data.editingCollectionIndex = collectionIndex;
-        this.$data.editingFolder          = folder
+        this.$data.editingFolder = folder;
-        this.$data.editingFolderIndex     = folderIndex
+        this.$data.editingFolderIndex = folderIndex;
-        this.displayModalEditFolder(true)
+        this.displayModalEditFolder(true);
       },
       editRequest(payload) {
-        const { request, collectionIndex, folderIndex, requestIndex } = payload
+        const { request, collectionIndex, folderIndex, requestIndex } = payload;
-        this.$data.editingCollectionIndex = collectionIndex
+        this.$data.editingCollectionIndex = collectionIndex;
-        this.$data.editingFolderIndex     = folderIndex
+        this.$data.editingFolderIndex = folderIndex;
-        this.$data.editingRequest         = request
+        this.$data.editingRequest = request;
-        this.$data.editingRequestIndex    = requestIndex
+        this.$data.editingRequestIndex = requestIndex;
-        this.displayModalEditRequest(true)
+        this.displayModalEditRequest(true);
-
       },
       resetSelectedData() {
-        this.$data.editingCollection      = undefined
+        this.$data.editingCollection = undefined;
-        this.$data.editingCollectionIndex = undefined
+        this.$data.editingCollectionIndex = undefined;
-        this.$data.editingFolder          = undefined
+        this.$data.editingFolder = undefined;
-        this.$data.editingFolderIndex     = undefined
+        this.$data.editingFolderIndex = undefined;
-        this.$data.editingRequest         = undefined
+        this.$data.editingRequest = undefined;
-        this.$data.editingRequestIndex    = undefined
+        this.$data.editingRequestIndex = undefined;
-      },
+      }
-    },
+    }
-  }
+  };
-
 </script>

components/collections/request.vue

@@ -1,55 +1,55 @@
 <template>
-    <div class="flex-wrap">
+  <div class="flex-wrap">
-      <div>
+    <div>
-        <button class="icon" @click="selectRequest()" v-tooltip="'Use request'">
+      <button class="icon" @click="selectRequest()" v-tooltip="'Use request'">
-          <i class="material-icons">insert_drive_file</i>
+        <i class="material-icons">insert_drive_file</i>
-          <span>{{request.name}}</span>
+        <span>{{request.name}}</span>
-        </button>
+      </button>
-      </div>
-      <div>
-        <button class="icon" @click="removeRequest" v-tooltip="'Delete request'">
-          <i class="material-icons">delete</i>
-        </button>
-        <button class="icon" @click="$emit('edit-request')" v-tooltip="'Edit request'">
-          <i class="material-icons">edit</i>
-        </button>
-      </div>
     </div>
+    <div>
+      <button class="icon" @click="removeRequest" v-tooltip="'Delete request'">
+        <i class="material-icons">delete</i>
+      </button>
+      <button class="icon" @click="$emit('edit-request')" v-tooltip="'Edit request'">
+        <i class="material-icons">edit</i>
+      </button>
+    </div>
+  </div>
 </template>
 
 <style scoped>
-    ul {
+  ul {
-        display: flex;
+    display: flex;
-        flex-direction: column;
+    flex-direction: column;
-    }
+  }
 
-    ul li {
+  ul li {
-        display: flex;
+    display: flex;
-        padding-left: 16px;
+    padding-left: 16px;
-        border-left: 1px solid var(--brd-color);
+    border-left: 1px solid var(--brd-color);
-    }
+  }
 </style>
 
 <script>
-export default {
+  export default {
     props: {
-        request         : Object,
+      request: Object,
-        collectionIndex : Number,
+      collectionIndex: Number,
-        folderIndex     : Number,
+      folderIndex: Number,
-        requestIndex    : Number,
+      requestIndex: Number
     },
     methods: {
-        selectRequest() {
+      selectRequest() {
-            this.$store.commit('postwoman/selectRequest', { request: this.request });
+        this.$store.commit("postwoman/selectRequest", { request: this.request });
-        },
+      },
-        removeRequest() {
+      removeRequest() {
-            if (!confirm("Are you sure you want to remove this request?")) return;
+        if (!confirm("Are you sure you want to remove this request?")) return;
-            this.$store.commit('postwoman/removeRequest', {
+        this.$store.commit("postwoman/removeRequest", {
-                collectionIndex : this.collectionIndex,
+          collectionIndex: this.collectionIndex,
-                folderIndex     : this.folderIndex,
+          folderIndex: this.folderIndex,
-                requestIndex    : this.requestIndex,
+          requestIndex: this.requestIndex
-            });
+        });
-        },
+      }
-    },
+    }
-};
+  };
 </script>

components/collections/saveRequestAs.vue

@@ -1,158 +1,158 @@
 <template>
-    <div>
+  <modal v-if="show" @close="hideModal">
-        <modal v-if="show" @close="hideModal">
+    <div slot="header">
-            <div slot="header">
+      <ul>
-                <ul>
+        <li>
-                    <li>
+          <div class="flex-wrap">
-                        <div class="flex-wrap">
+            <h3 class="title">Save Request As</h3>
-                            <h3 class="title">Save Request As</h3>
+            <div>
-                            <div>
+              <button class="icon" @click="hideModal">
-                              <button class="icon" @click="hideModal">
+                <i class="material-icons">close</i>
-                                <i class="material-icons">close</i>
+              </button>
-                              </button>
-                            </div>
-                        </div>
-                    </li>
-                </ul>
             </div>
-            <div slot="body">
+          </div>
-                <ul>
+        </li>
-                    <li>
+      </ul>
-                        <input  type="text" v-model="requestData.name" v-bind:placeholder="defaultRequestName" />
-                        <select type="text" v-model="requestData.collectionIndex" >
-                            <option
-                                v-for="(collection, index) in $store.state.postwoman.collections"
-                                :key   = "index"
-                                :value = "index">
-                                {{ collection.name }}
-                            </option>
-                        </select>
-                        <select type="text" v-model="requestData.folderIndex" >
-                            <option
-                                :key   = "undefined"
-                                :value = "undefined">
-                            </option>
-                            <option
-                                v-for="(folder, index) in folders"
-                                :key   = "index"
-                                :value = "index">
-                                {{ folder.name }}
-                            </option>
-                        </select>
-                        <select type="text" v-model="requestData.requestIndex" >
-                            <option
-                                :key   = "undefined"
-                                :value = "undefined">
-                            </option>
-                            <option
-                                v-for  ="(folder, index) in requests"
-                                :key   = "index"
-                                :value = "index">
-                                {{ folder.name }}
-                            </option>
-                        </select>
-                    </li>
-                </ul>
-            </div>
-            <div slot="footer">
-              <ul>
-                <li>
-                <button class="icon" @click="saveRequestAs">
-                  <i class="material-icons">save</i>
-                  <span>Save</span>
-                </button>
-                </li>
-              </ul>
-            </div>
-        </modal>
     </div>
+    <div slot="body">
+      <ul>
+        <li>
+          <label for="selectLabel">Label</label>
+          <input type="text" id="selectLabel" v-model="requestData.name" v-bind:placeholder="defaultRequestName" />
+          <label for="selectCollection">Collection</label>
+          <select type="text" id="selectCollection" v-model="requestData.collectionIndex">
+            <option
+              v-for="(collection, index) in $store.state.postwoman.collections"
+              :key="index"
+              :value="index"
+            >{{ collection.name }}</option>
+          </select>
+          <label for="selectFolder">Folder</label>
+          <select type="text" id="selectFolder" v-model="requestData.folderIndex">
+            <option :key="undefined" :value="undefined">/</option>
+            <option v-for="(folder, index) in folders" :key="index" :value="index">{{ folder.name }}</option>
+          </select>
+          <label for="selectRequest">Request</label>
+          <select type="text" id="selectRequest" v-model="requestData.requestIndex">
+            <option :key="undefined" :value="undefined">/</option>
+            <option
+              v-for="(folder, index) in requests"
+              :key="index"
+              :value="index"
+            >{{ folder.name }}</option>
+          </select>
+        </li>
+      </ul>
+    </div>
+    <div slot="footer">
+      <ul>
+        <li>
+          <button class="icon" @click="saveRequestAs">
+            <i class="material-icons">save</i>
+            <span>Save</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </modal>
 </template>
 
 <script>
-import modal from "../../components/modal";
+  import modal from "../../components/modal";
 
-export default {
+  export default {
     props: {
-        show           : Boolean,
+      show: Boolean,
-        editingRequest : Object,
+      editingRequest: Object
     },
     components: {
-        modal,
+      modal
     },
     data() {
-        return {
+      return {
-            defaultRequestName : 'My New Request',
+        defaultRequestName: "My New Request",
-            requestData        : {
+        requestData: {
-                name            : undefined,
+          name: undefined,
-                collectionIndex : undefined,
+          collectionIndex: undefined,
-                folderIndex     : undefined,
+          folderIndex: undefined,
-                requestIndex    : undefined,
+          requestIndex: undefined
-            },
         }
+      };
     },
     watch: {
-        'requestData.collectionIndex': function resetFolderAndRequestIndex() {
+      "requestData.collectionIndex": function resetFolderAndRequestIndex() {
-          // if user choosen some folder, than selected other collection, which doesn't have any folders
+        // if user choosen some folder, than selected other collection, which doesn't have any folders
-          // than `requestUpdateData.folderIndex` won't be reseted
+        // than `requestUpdateData.folderIndex` won't be reseted
-          this.$data.requestData.folderIndex  = undefined
+        this.$data.requestData.folderIndex = undefined;
-          this.$data.requestData.requestIndex = undefined
+        this.$data.requestData.requestIndex = undefined;
-        },
+      },
-        'requestData.folderIndex': function resetRequestIndex() {
+      "requestData.folderIndex": function resetRequestIndex() {
-          this.$data.requestData.requestIndex = undefined
+        this.$data.requestData.requestIndex = undefined;
-        },
+      }
     },
     computed: {
-        folders() {
+      folders() {
-            const userSelectedAnyCollection = this.$data.requestData.collectionIndex !== undefined
+        const userSelectedAnyCollection =
-            if  (!userSelectedAnyCollection)  return []
+          this.$data.requestData.collectionIndex !== undefined;
+        if (!userSelectedAnyCollection) return [];
 
-            return this.$store.state.postwoman.collections[this.$data.requestData.collectionIndex].folders
+        return this.$store.state.postwoman.collections[
-        },
+          this.$data.requestData.collectionIndex
-        requests() {
+        ].folders;
-            const userSelectedAnyCollection = this.$data.requestData.collectionIndex !== undefined
+      },
-            if  (!userSelectedAnyCollection)  return []
+      requests() {
+        const userSelectedAnyCollection =
+          this.$data.requestData.collectionIndex !== undefined;
+        if (!userSelectedAnyCollection) return [];
 
-            const userSelectedAnyFolder = this.$data.requestData.folderIndex !== undefined
+        const userSelectedAnyFolder =
-            if   (userSelectedAnyFolder) {
+          this.$data.requestData.folderIndex !== undefined;
-              const collection = this.$store.state.postwoman.collections[this.$data.requestData.collectionIndex]
+        if (userSelectedAnyFolder) {
-              const folder     = collection.folders[this.$data.requestData.folderIndex]
+          const collection = this.$store.state.postwoman.collections[
-              const requests   = folder.requests
+            this.$data.requestData.collectionIndex
-              return requests
+          ];
-            }
+          const folder = collection.folders[this.$data.requestData.folderIndex];
-            else {
+          const requests = folder.requests;
-              const collection = this.$store.state.postwoman.collections[this.$data.requestData.collectionIndex]
+          return requests;
-              const requests   = collection.requests
+        } else {
-              return requests
+          const collection = this.$store.state.postwoman.collections[
-            }
+            this.$data.requestData.collectionIndex
+          ];
+          const requests = collection.requests;
+          return requests;
         }
+      }
     },
     methods: {
-        saveRequestAs() {
+      saveRequestAs() {
-            const userDidntSpecifyCollection = this.$data.requestData.collectionIndex === undefined
+        const userDidntSpecifyCollection =
-            if   (userDidntSpecifyCollection) {
+          this.$data.requestData.collectionIndex === undefined;
-                this.$toast.error('please, specify collection first', { icon: 'error' })
+        if (userDidntSpecifyCollection) {
-                return
+          this.$toast.error("Select a Collection", {
-            }
+            icon: "error"
+          });
+          return;
+        }
 
-            const requestUpdated = {
+        const requestUpdated = {
-              ...this.$props.editingRequest,
+          ...this.$props.editingRequest,
-              name       : this.$data.requestData.name || this.$data.defaultRequestName,
+          name: this.$data.requestData.name || this.$data.defaultRequestName,
-              collection : this.$data.requestData.collectionIndex,
+          collection: this.$data.requestData.collectionIndex
-            }
+        };
 
-            this.$store.commit('postwoman/saveRequestAs', {
+        this.$store.commit("postwoman/saveRequestAs", {
-                request         : requestUpdated,
+          request: requestUpdated,
-                collectionIndex : this.$data.requestData.collectionIndex,
+          collectionIndex: this.$data.requestData.collectionIndex,
-                folderIndex     : this.$data.requestData.folderIndex,
+          folderIndex: this.$data.requestData.folderIndex,
-                requestIndex    : this.$data.requestData.requestIndex,
+          requestIndex: this.$data.requestData.requestIndex
-            });
+        });
 
-            this.hideModal();
+        this.hideModal();
-        },
+      },
-        hideModal() {
+      hideModal() {
-            this.$emit('hide-modal');
+        this.$emit("hide-modal");
-            this.$emit('hide-model');  // for backward compatibility  // TODO: use fixed event
+        this.$emit("hide-model"); // for backward compatibility  // TODO: use fixed event
-        },
+      }
-    },
+    }
-};
+  };
 </script>

components/history.vue

@@ -2,52 +2,107 @@
   <pw-section class="green" icon="history" label="History">
     <ul>
       <li id="filter-history">
-        <input aria-label="Search" type="text" placeholder="search history" :readonly="history.length === 0" v-model="filterText">
+        <input
+          aria-label="Search"
+          type="text"
+          placeholder="search history"
+          :readonly="history.length === 0"
+          v-model="filterText"
+        />
       </li>
     </ul>
     <ul>
       <li @click="sort_by_label()">
-        <label for="" class="flex-wrap">Label<i class="material-icons">sort</i></label>
+        <label class="flex-wrap">
+          Label
+          <i class="material-icons">unfold_more</i>
+        </label>
       </li>
       <li @click="sort_by_time()">
-        <label for="" class="flex-wrap">Time<i class="material-icons">sort</i></label>
+        <label class="flex-wrap">
+          Time
+          <i class="material-icons">unfold_more</i>
+        </label>
       </li>
       <li @click="sort_by_status_code()">
-        <label for="" class="flex-wrap">Status<i class="material-icons">sort</i></label>
+        <label class="flex-wrap">
+          Status
+          <i class="material-icons">unfold_more</i>
+        </label>
       </li>
       <li @click="sort_by_url()">
-        <label for="" class="flex-wrap">URL<i class="material-icons">sort</i></label>
+        <label class="flex-wrap">
+          URL
+          <i class="material-icons">unfold_more</i>
+        </label>
       </li>
       <li @click="sort_by_path()">
-        <label for="" class="flex-wrap">Path<i class="material-icons">sort</i></label>
+        <label class="flex-wrap">
+          Path
+          <i class="material-icons">unfold_more</i>
+        </label>
       </li>
     </ul>
-    <virtual-list class="virtual-list" :class="{filled: filteredHistory.length}" :size="54" :remain="Math.min(5, filteredHistory.length)">
+    <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" placeholder="No label">
+          <input
+            aria-label="Label"
+            type="text"
+            readonly
+            :value="entry.label"
+            placeholder="No label"
+          />
         </li>
         <li>
-          <input aria-label="Time" type="text" readonly :value="entry.time" :title="entry.date">
+          <input aria-label="Time" type="text" readonly :value="entry.time" :title="entry.date" />
         </li>
         <li class="method-list-item">
-          <input aria-label="Method" type="text" readonly :value="entry.method" :class="findEntryStatus(entry).className" :style="{'--status-code': entry.status}">
+          <input
-          <span class="entry-status-code" :class="findEntryStatus(entry).className" :style="{'--status-code': entry.status}">{{entry.status}}</span>
+            aria-label="Method"
+            type="text"
+            readonly
+            :value="entry.method"
+            :class="findEntryStatus(entry).className"
+            :style="{'--status-code': entry.status}"
+          />
+          <span
+            class="entry-status-code"
+            :class="findEntryStatus(entry).className"
+            :style="{'--status-code': entry.status}"
+          >{{entry.status}}</span>
         </li>
         <li>
-          <input aria-label="URL" type="text" readonly :value="entry.url">
+          <input aria-label="URL" type="text" readonly :value="entry.url" />
         </li>
         <li>
-          <input aria-label="Path" type="text" readonly :value="entry.path" placeholder="No path">
+          <input aria-label="Path" type="text" readonly :value="entry.path" placeholder="No path" />
         </li>
         <div class="show-on-small-screen">
           <li>
-            <button v-tooltip="'Delete entry'" class="icon" :id="'delete-button#'+index" @click="deleteHistory(entry)" aria-label="Delete">
+            <button
+              v-tooltip="'Delete entry'"
+              class="icon"
+              :id="'delete-button#'+index"
+              @click="deleteHistory(entry)"
+              aria-label="Delete"
+            >
               <i class="material-icons">delete</i>
             </button>
           </li>
           <li>
-            <button v-tooltip="'Edit entry'" class="icon" :id="'use-button#'+index" @click="useHistory(entry)" aria-label="Edit">
+            <button
+              v-tooltip="'Edit entry'"
+              class="icon"
+              :id="'use-button#'+index"
+              @click="useHistory(entry)"
+              aria-label="Edit"
+            >
               <i class="material-icons">edit</i>
             </button>
           </li>
@@ -56,7 +111,7 @@
     </virtual-list>
     <ul :class="{hidden: filteredHistory.length != 0 || history.length === 0 }">
       <li>
-        <label>Nothing found for "{{filterText}}"</label>
+        <label>Nothing found "{{filterText}}"</label>
       </li>
     </ul>
     <ul v-if="history.length === 0">
@@ -66,7 +121,12 @@
     </ul>
     <ul v-if="history.length !== 0">
       <li v-if="!isClearingHistory">
-        <button class="icon" id="clear-history-button" :disabled="history.length === 0" @click="enableHistoryClearing">
+        <button
+          class="icon"
+          id="clear-history-button"
+          :disabled="history.length === 0"
+          @click="enableHistoryClearing"
+        >
           <i class="material-icons">clear_all</i>
           <span>Clear All</span>
         </button>
@@ -75,36 +135,52 @@
         <div class="flex-wrap">
           <label for="clear-history-button">Are you sure?</label>
           <div>
-            <button class="icon" id="confirm-clear-history-button" @click="clearHistory">
+            <button class="icon" id="confirm-clear-history-button" @click="clearHistory">Yes</button>
-              Yes
+            <button class="icon" id="reject-clear-history-button" @click="disableHistoryClearing">No</button>
-            </button>
-            <button class="icon" id="reject-clear-history-button" @click="disableHistoryClearing">
-              No
-            </button>
           </div>
         </div>
       </li>
     </ul>
   </pw-section>
 </template>
-<script>
-  import VirtualList from 'vue-virtual-scroll-list'
-  import section from "./section";
-  import {
-    findStatusGroup
-  } from "../pages/index";
 
-  const updateOnLocalStorage = (propertyName, property) => window.localStorage.setItem(propertyName, JSON.stringify(property));
+<style scoped lang="scss">
+  .virtual-list {
+    [readonly] {
+      cursor: default;
+    }
+  }
+
+  .flex-wrap {
+    cursor: pointer;
+  }
+
+  @media (max-width: 720px) {
+    .virtual-list.filled {
+      min-height: 200px;
+    }
+  }
+</style>
+
+<script>
+  import VirtualList from "vue-virtual-scroll-list";
+  import section from "./section";
+  import { findStatusGroup } from "../pages/index";
+
+  const updateOnLocalStorage = (propertyName, property) =>
+    window.localStorage.setItem(propertyName, JSON.stringify(property));
   export default {
     components: {
-      'pw-section': section,
+      "pw-section": section,
       VirtualList
     },
     data() {
-      const localStorageHistory = JSON.parse(window.localStorage.getItem('history'));
+      const localStorageHistory = JSON.parse(
+        window.localStorage.getItem("history")
+      );
       return {
         history: localStorageHistory || [],
-        filterText: '',
+        filterText: "",
         showFilter: false,
         isClearingHistory: false,
         reverse_sort_label: false,
@@ -112,7 +188,7 @@
         reverse_sort_status_code: false,
         reverse_sort_url: false,
         reverse_sort_path: false
-      }
+      };
     },
     computed: {
       filteredHistory() {
@@ -120,7 +196,7 @@
           const filterText = this.filterText.toLowerCase();
           return Object.keys(entry).some(key => {
             let value = entry[key];
-            value = typeof value !== 'string' ? value.toString() : value;
+            value = typeof value !== "string" ? value.toString() : value;
             return value.toLowerCase().includes(filterText);
           });
         });
@@ -129,35 +205,37 @@
     methods: {
       clearHistory() {
         this.history = [];
-        this.filterText = '';
+        this.filterText = "";
         this.disableHistoryClearing();
-        updateOnLocalStorage('history', this.history);
+        updateOnLocalStorage("history", this.history);
-        this.$toast.error('History Deleted', {
+        this.$toast.error("History Deleted", {
-          icon: 'delete'
+          icon: "delete"
         });
       },
       useHistory(entry) {
-        this.$emit('useHistory', entry);
+        this.$emit("useHistory", entry);
       },
       findEntryStatus(entry) {
         const foundStatusGroup = findStatusGroup(entry.status);
-        return foundStatusGroup || {
+        return (
-          className: ''
+          foundStatusGroup || {
-        };
+            className: ""
+          }
+        );
       },
       deleteHistory(entry) {
         this.history.splice(this.history.indexOf(entry), 1);
         if (this.history.length === 0) {
-          this.filterText = '';
+          this.filterText = "";
         }
-        updateOnLocalStorage('history', this.history);
+        updateOnLocalStorage("history", this.history);
-        this.$toast.error('Deleted', {
+        this.$toast.error("Deleted", {
-          icon: 'delete'
+          icon: "delete"
         });
       },
       addEntry(entry) {
         this.history.push(entry);
-        updateOnLocalStorage('history', this.history);
+        updateOnLocalStorage("history", this.history);
       },
       enableHistoryClearing() {
         if (!this.history || !this.history.length) return;
@@ -168,80 +246,72 @@
       },
       sort_by_time() {
         let byDate = this.history.slice(0);
-        byDate.sort((a,b) =>{
+        byDate.sort((a, b) => {
           let date_a = a.date.split("/");
           let date_b = b.date.split("/");
-          let time_a = a.time.split(":")
+          let time_a = a.time.split(":");
-          let time_b = b.time.split(":")
+          let time_b = b.time.split(":");
-          let final_a = new Date(date_a[2], date_a[1], date_a[0], time_a[0], time_a[1], time_a[2]);
+          let final_a = new Date(
-          let final_b = new Date(date_b[2], date_b[1], date_b[0], time_b[0], time_b[1], time_b[2]);
+            date_a[2],
-          if(this.reverse_sort_time)
+            date_a[1],
-            return final_b - final_a;
+            date_a[0],
-          else
+            time_a[0],
-            return final_a - final_b;
+            time_a[1],
-          })
+            time_a[2]
+          );
+          let final_b = new Date(
+            date_b[2],
+            date_b[1],
+            date_b[0],
+            time_b[0],
+            time_b[1],
+            time_b[2]
+          );
+          if (this.reverse_sort_time) return final_b - final_a;
+          else return final_a - final_b;
+        });
         this.history = byDate;
         this.reverse_sort_time = !this.reverse_sort_time;
       },
       sort_by_status_code() {
         let byCode = this.history.slice(0);
-        byCode.sort((a,b) =>{
+        byCode.sort((a, b) => {
-          if(this.reverse_sort_status_code)
+          if (this.reverse_sort_status_code) return b.status - a.status;
-            return b.status - a.status;
+          else return a.status - b.status;
-          else
+        });
-            return a.status - b.status;
-          })
         this.history = byCode;
         this.reverse_sort_status_code = !this.reverse_sort_status_code;
       },
       sort_by_url() {
         let byUrl = this.history.slice(0);
-        byUrl.sort((a, b)=>{
+        byUrl.sort((a, b) => {
-          if(this.reverse_sort_url)
+          if (this.reverse_sort_url)
             return a.url == b.url ? 0 : +(a.url < b.url) || -1;
-          else
+          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)=>{
+        byLabel.sort((a, b) => {
-          if(this.reverse_sort_label)
+          if (this.reverse_sort_label)
             return a.label == b.label ? 0 : +(a.label < b.label) || -1;
-          else
+          else return a.label == b.label ? 0 : +(a.label > b.label) || -1;
-            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)=>{
+        byPath.sort((a, b) => {
-          if(this.reverse_sort_path)
+          if (this.reverse_sort_path)
             return a.path == b.path ? 0 : +(a.path < b.path) || -1;
-          else
+          else return a.path == b.path ? 0 : +(a.path > b.path) || -1;
-            return a.path == b.path ? 0 : +(a.path > b.path) || -1;
         });
         this.history = byPath;
         this.reverse_sort_path = !this.reverse_sort_path;
       }
     }
-  }
+  };
-
 </script>
-<style scoped lang="scss">
-  .virtual-list {
-    [readonly] {
-      cursor: default;
-    }
-  }
-
-  @media (max-width: 720px) {
-    .virtual-list.filled {
-      min-height: 200px;
-    }
-  }
-
-</style>

components/logo.vue

@@ -1,11 +1,34 @@
 <template>
-  <svg version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 612.001 612.001" style="enable-background:new 0 0 612.001 612.001;" xml:space="preserve">
+  <svg
+    version="1.1"
+    id="Capa_1"
+    x="0px"
+    y="0px"
+    viewBox="0 0 612.001 612.001"
+    style="enable-background:new 0 0 612.001 612.001;"
+    xml:space="preserve"
+  >
     <defs id="defs11" />
     <g id="g3826" transform="translate(-516.40798,-163.88978)">
-      <circle :fill="color" transform="scale(1,-1)" style="stroke-width:1.19531453" r="178.70923" cy="-501.55591" cx="822.40845" id="circle3814" />
+      <circle
+        :fill="color"
+        transform="scale(1,-1)"
+        style="stroke-width:1.19531453"
+        r="178.70923"
+        cy="-501.55591"
+        cx="822.40845"
+        id="circle3814"
+      />
       <g id="g3820" transform="translate(516.40798,163.89028)">
         <g id="g3818">
-          <path :fill="color" id="path3816" data-old_color="#121212" class="active-path" data-original="#121212" d="M 64.601,236.822 C 64.601,394.256 192.786,612 306.001,612 412.582,612 547.4,394.256 547.4,236.822 547.4,79.388 439.322,0 306,0 172.678,0 64.601,79.388 64.601,236.822 Z m 304.12,116.415 c 29.475,-29.475 70.598,-40.195 108.552,-32.173 8.021,37.954 -2.698,79.077 -32.173,108.552 -29.475,29.475 -70.598,40.195 -108.552,32.173 -8.022,-37.955 2.698,-79.078 32.173,-108.552 z M 134.727,321.063 c 37.954,-8.021 79.077,2.698 108.552,32.173 29.475,29.475 40.195,70.598 32.173,108.552 -37.954,8.021 -79.077,-2.698 -108.552,-32.173 -29.475,-29.476 -40.194,-70.598 -32.173,-108.552 z" />
+          <path
+            :fill="color"
+            id="path3816"
+            data-old_color="#121212"
+            class="active-path"
+            data-original="#121212"
+            d="M 64.601,236.822 C 64.601,394.256 192.786,612 306.001,612 412.582,612 547.4,394.256 547.4,236.822 547.4,79.388 439.322,0 306,0 172.678,0 64.601,79.388 64.601,236.822 Z m 304.12,116.415 c 29.475,-29.475 70.598,-40.195 108.552,-32.173 8.021,37.954 -2.698,79.077 -32.173,108.552 -29.475,29.475 -70.598,40.195 -108.552,32.173 -8.022,-37.955 2.698,-79.078 32.173,-108.552 z M 134.727,321.063 c 37.954,-8.021 79.077,2.698 108.552,32.173 29.475,29.475 40.195,70.598 32.173,108.552 -37.954,8.021 -79.077,-2.698 -108.552,-32.173 -29.475,-29.476 -40.194,-70.598 -32.173,-108.552 z"
+          />
         </g>
       </g>
     </g>
@@ -24,9 +47,9 @@
 <script>
   export default {
     props: {
-      'color': {
+      color: {
         type: String
       }
     }
-  }
+  };
 </script>

components/modal.vue

@@ -53,13 +53,13 @@
   }
 
   /*
- * The following styles are auto-applied to elements with
+  * The following styles are auto-applied to elements with
- * transition="modal" when their visibility is toggled
+  * transition="modal" when their visibility is toggled
- * by Vue.js.
+  * by Vue.js.
- *
+  *
- * You can easily play with the modal transition by editing
+  * You can easily play with the modal transition by editing
- * these styles.
+  * these styles.
- */
+  */
 
   .modal-fade-enter,
   .modal-fade-leave-active {

components/section.vue

@@ -1,6 +1,11 @@
 <template>
-  <fieldset :id="label.toLowerCase()" :class="{ 'no-colored-frames': noFrameColors }">
+  <fieldset :id="label.toLowerCase()" :class="{ 'no-colored-frames': !frameColorsEnabled }">
-    <legend @click.prevent="collapse"><i class="material-icons icon">{{ icon }}</i><span>{{ label }}</span><i class="material-icons" v-if="isCollapsed">expand_more</i><i class="material-icons" v-if="!isCollapsed">expand_less</i></legend>
+    <legend @click.prevent="collapse">
+      <i class="material-icons icon">{{ icon }}</i>
+      <span>{{ label }}</span>
+      <i class="material-icons" v-if="isCollapsed">expand_more</i>
+      <i class="material-icons" v-if="!isCollapsed">expand_less</i>
+    </legend>
     <div class="collapsible" :class="{ hidden: collapsed }">
       <slot />
     </div>
@@ -17,39 +22,39 @@
 </style>
 
 <script>
-export default {
+  export default {
-  computed: {
+    computed: {
-    noFrameColors() {
+      frameColorsEnabled() {
-      return this.$store.state.postwoman.settings.DISABLE_FRAME_COLORS || false;
+        return this.$store.state.postwoman.settings.FRAME_COLORS_ENABLED || false;
+      }
     },
-  },
 
-  data() {
+    data() {
-    return {
+      return {
-      isCollapsed: false
+        isCollapsed: false
-    }
+      };
-  },
-
-  props: {
-    label: {
-      type: String,
-      default: "Section"
     },
-    icon: {
-      type: String,
-      default: "lens"
-    },
-    collapsed: {
-      type: Boolean
-    }
-  },
 
-  methods: {
+    props: {
-    collapse({ target }) {
+      label: {
-      const parent = target.parentNode.parentNode;
+        type: String,
-      parent.querySelector(".collapsible").classList.toggle("hidden");
+        default: "Section"
-      this.isCollapsed = !this.isCollapsed;
+      },
+      icon: {
+        type: String,
+        default: "lens"
+      },
+      collapsed: {
+        type: Boolean
+      }
+    },
+
+    methods: {
+      collapse({ target }) {
+        const parent = target.parentNode.parentNode;
+        parent.querySelector(".collapsible").classList.toggle("hidden");
+        this.isCollapsed = !this.isCollapsed;
+      }
     }
-  }
+  };
-};
 </script>

components/toggle.vue

@@ -4,7 +4,7 @@
       <span class="handle"></span>
     </label>
     <label class="caption">
-      <slot/>
+      <slot />
     </label>
   </div>
 </template>
@@ -59,8 +59,8 @@
       margin: $handleSpacing;
       background-color: $inactiveHandleColor;
 
-      width: #{ $height - ($handleSpacing * 2) };
+      width: #{$height - ($handleSpacing * 2)};
-      height: #{ $height - ($handleSpacing * 2) };
+      height: #{$height - ($handleSpacing * 2)};
       border-radius: 100px;
 
       pointer-events: none;
@@ -77,14 +77,12 @@
       }
     }
   }
-
 </style>
 
 <script>
   export default {
-
     props: {
-      'on': {
+      on: {
         type: Boolean,
         default: false
       }
@@ -93,10 +91,8 @@
     methods: {
       toggle() {
         const containsOnClass = this.$refs.toggle.classList.toggle("on");
-        this.$emit('change', containsOnClass);
+        this.$emit("change", containsOnClass);
       }
     }
-
+  };
-  }
-
 </script>

directives/textareaAutoHeight.js

@@ -1,8 +1,8 @@
 export default {
- name: "textareaAutoHeight",
+  name: "textareaAutoHeight",
- update(element) {
+  update(element) {
-  if (element.scrollHeight !== element.clientHeight) {
+    if (element.scrollHeight !== element.clientHeight) {
-   element.style.minHeight = `${element.scrollHeight}px`;
+      element.style.minHeight = `${element.scrollHeight}px`;
+    }
   }
- }
 }

layouts/default.vue

@@ -4,7 +4,9 @@
       <div>
         <div class="slide-in">
           <nuxt-link to="/">
-            <h1 class="logo"><logo alt="" style="height: 24px; margin-right: 16px"></logo>Postwoman</h1>
+            <h1 class="logo">
+              <logo alt style="height: 24px; margin-right: 16px"></logo>Postwoman
+            </h1>
           </nuxt-link>
           <h3>API request builder</h3>
         </div>
@@ -12,25 +14,33 @@
           <!--
            We're using manual checks for linkActive because the query string
            seems to mess up the nuxt-link active class.
-         -->
+          -->
           <nuxt-link to="/" :class="linkActive('/')">HTTP</nuxt-link>
           <nuxt-link to="/websocket" :class="linkActive('/websocket')">WebSocket</nuxt-link>
-          <nuxt-link to="/settings" :class="linkActive('/settings')" v-tooltip="'Settings'" aria-label="Settings">
+          <nuxt-link
+            to="/settings"
+            :class="linkActive('/settings')"
+            v-tooltip="'Settings'"
+            aria-label="Settings"
+          >
             <!-- Settings cog -->
             <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
-              <path d="M24 13.616v-3.232c-1.651-.587-2.694-.752-3.219-2.019v-.001c-.527-1.271.1-2.134.847-3.707l-2.285-2.285c-1.561.742-2.433 1.375-3.707.847h-.001c-1.269-.526-1.435-1.576-2.019-3.219h-3.232c-.582 1.635-.749 2.692-2.019 3.219h-.001c-1.271.528-2.132-.098-3.707-.847l-2.285 2.285c.745 1.568 1.375 2.434.847 3.707-.527 1.271-1.584 1.438-3.219 2.02v3.232c1.632.58 2.692.749 3.219 2.019.53 1.282-.114 2.166-.847 3.707l2.285 2.286c1.562-.743 2.434-1.375 3.707-.847h.001c1.27.526 1.436 1.579 2.019 3.219h3.232c.582-1.636.75-2.69 2.027-3.222h.001c1.262-.524 2.12.101 3.698.851l2.285-2.286c-.744-1.563-1.375-2.433-.848-3.706.527-1.271 1.588-1.44 3.221-2.021zm-12 2.384c-2.209 0-4-1.791-4-4s1.791-4 4-4 4 1.791 4 4-1.791 4-4 4z"/>
+              <path
+                d="M24 13.616v-3.232c-1.651-.587-2.694-.752-3.219-2.019v-.001c-.527-1.271.1-2.134.847-3.707l-2.285-2.285c-1.561.742-2.433 1.375-3.707.847h-.001c-1.269-.526-1.435-1.576-2.019-3.219h-3.232c-.582 1.635-.749 2.692-2.019 3.219h-.001c-1.271.528-2.132-.098-3.707-.847l-2.285 2.285c.745 1.568 1.375 2.434.847 3.707-.527 1.271-1.584 1.438-3.219 2.02v3.232c1.632.58 2.692.749 3.219 2.019.53 1.282-.114 2.166-.847 3.707l2.285 2.286c1.562-.743 2.434-1.375 3.707-.847h.001c1.27.526 1.436 1.579 2.019 3.219h3.232c.582-1.636.75-2.69 2.027-3.222h.001c1.262-.524 2.12.101 3.698.851l2.285-2.286c-.744-1.563-1.375-2.433-.848-3.706.527-1.271 1.588-1.44 3.221-2.021zm-12 2.384c-2.209 0-4-1.791-4-4s1.791-4 4-4 4 1.791 4 4-1.791 4-4 4z"
+              />
             </svg>
           </nuxt-link>
         </nav>
       </div>
     </header>
+    <br>
     <nuxt id="main" />
     <footer>
       <!-- Top section of footer: GitHub/install links -->
       <div class="flex-wrap">
         <a href="https://github.com/liyasthomas/postwoman" target="_blank" rel="noopener">
           <button class="icon">
-            <img id="imgGitHub" src="~static/icons/github.svg" alt="GitHub" :style="logoStyle()">
+            <img id="imgGitHub" src="~static/icons/github.svg" alt="GitHub" :style="logoStyle()" />
             <span>GitHub</span>
           </button>
         </a>
@@ -38,9 +48,14 @@
           <i class="material-icons">add_to_home_screen</i>
           <span>Install PWA</span>
         </button>
-        <button class="icon" onClick="window.open('https://twitter.com/share?text=👽 Postwoman • API request builder - Helps you create your requests faster, saving you precious time on your development&url=https://postwoman.io&hashtags=postwoman&via=liyasthomas');">
+        <button
+          class="icon"
+          onClick="window.open('https://twitter.com/share?text=👽 Postwoman • API request builder - Helps you create your requests faster, saving you precious time on your development&url=https://postwoman.io&hashtags=postwoman&via=liyasthomas');"
+        >
           <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
-            <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
+            <path
+              d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"
+            />
           </svg>
           <span>Tweet</span>
         </button>
@@ -48,17 +63,29 @@
       <!-- Bottom section of footer: version/author information -->
       <p class="align-center">
         <span v-if="version.name">
-          <a v-bind:href="'https://github.com/liyasthomas/postwoman/releases/tag/' + version.name" target="_blank" rel="noopener">{{version.name}}</a>
+          <a
+            v-bind:href="'https://github.com/liyasthomas/postwoman/releases/tag/' + version.name"
+            target="_blank"
+            rel="noopener"
+          >{{version.name}}</a>
           <span v-if="version.hash">
-            - <a v-bind:href="'https://github.com/liyasthomas/postwoman/commit/' + version.hash" target="_blank" rel="noopener">{{version.hash}}</a>
+            -
+            <a
+              v-bind:href="'https://github.com/liyasthomas/postwoman/commit/' + version.hash"
+              target="_blank"
+              rel="noopener"
+            >{{version.hash}}</a>
           </span>
-          <span v-if="version.variant"> ({{version.variant}})</span>
+          <span v-if="version.variant">({{version.variant}})</span>
           &#x2022;
-        </span> by <a href="https://liyasthomas.web.app" target="_blank" rel="noopener">Liyas Thomas 🦄</a> &#x2022; <a href="https://postwoman.launchaco.com" target="_blank" rel="noopener">Subscribe</a>
+        </span> by
+        <a href="https://liyasthomas.web.app" target="_blank" rel="noopener">Liyas Thomas 🦄</a> &#x2022;
+        <a href="https://postwoman.launchaco.com" target="_blank" rel="noopener">Subscribe</a>
       </p>
     </footer>
   </div>
 </template>
+
 <style lang="scss">
   .slide-in {
     position: relative;
@@ -106,7 +133,7 @@
 
         &:before {
           width: 100%;
-          height: 100%
+          height: 100%;
         }
       }
 
@@ -139,12 +166,12 @@
       }
     }
   }
-
 </style>
+
 <script>
-  import intializePwa from '../assets/js/pwa';
+  import intializePwa from "../assets/js/pwa";
   import logo from "../components/logo";
-  import * as version from '../.postwoman/version.json';
+  import * as version from "../.postwoman/version.json";
 
   export default {
     components: {
@@ -152,10 +179,10 @@
     },
 
     methods: {
-      linkActive (path) {
+      linkActive(path) {
         return {
-            'nuxt-link-exact-active': this.$route.path === path,
+          "nuxt-link-exact-active": this.$route.path === path,
-            'nuxt-link-active': this.$route.path === path
+          "nuxt-link-active": this.$route.path === path
         };
       }
     },
@@ -167,11 +194,15 @@
         // prompt.
         showInstallPrompt: null,
         logoStyle() {
-          return (((this.$store.state.postwoman.settings.THEME_CLASS || '').includes("light")) ? " filter: invert(100%); -webkit-filter: invert(100%);" : '')
+          return (
+            this.$store.state.postwoman.settings.THEME_CLASS || ""
+          ).includes("light")
+            ? " filter: invert(100%); -webkit-filter: invert(100%);"
+            : "";
         },
 
         version: {}
-      }
+      };
     },
 
     beforeMount() {
@@ -181,36 +212,40 @@
       // Load theme settings
       (() => {
         // Apply theme from settings.
-        document.documentElement.className = this.$store.state.postwoman.settings.THEME_CLASS || '';
+        document.documentElement.className =
+          this.$store.state.postwoman.settings.THEME_CLASS || "";
         // Load theme color data from settings, or use default color.
-        let color = this.$store.state.postwoman.settings.THEME_COLOR || '#50fa7b';
+        let color = this.$store.state.postwoman.settings.THEME_COLOR || "#50fa7b";
         let vibrant = this.$store.state.postwoman.settings.THEME_COLOR_VIBRANT;
         if (vibrant == null) vibrant = true;
-        document.documentElement.style.setProperty('--ac-color', color);
+        document.documentElement.style.setProperty("--ac-color", color);
-        document.documentElement.style.setProperty('--act-color', vibrant ? 'rgb(37, 38, 40)' : '#ffffff');
+        document.documentElement.style.setProperty(
+          "--act-color",
+          vibrant ? "rgb(37, 38, 40)" : "#ffffff"
+        );
       })();
     },
 
     mounted() {
-      if(process.client){
+      if (process.client) {
-          document.body.classList.add('afterLoad');
+        document.body.classList.add("afterLoad");
       }
 
       // Initializes the PWA code - checks if the app is installed,
       // etc.
       (async () => {
         this.showInstallPrompt = await intializePwa();
-        let cookiesAllowed = localStorage.getItem('cookiesAllowed') === 'yes';
+        let cookiesAllowed = localStorage.getItem("cookiesAllowed") === "yes";
-        if(!cookiesAllowed) {
+        if (!cookiesAllowed) {
-          this.$toast.show('We use cookies', {
+          this.$toast.show("We use cookies", {
-            icon: 'info',
+            icon: "info",
             duration: 5000,
-            theme: 'toasted-primary',
+            theme: "toasted-primary",
             action: [
               {
-                text: 'Dismiss',
+                text: "Dismiss",
                 onClick: (e, toastObject) => {
-                  localStorage.setItem('cookiesAllowed', 'yes');
+                  localStorage.setItem("cookiesAllowed", "yes");
                   toastObject.goAway(0);
                 }
               }
@@ -221,10 +256,9 @@
     },
 
     watch: {
-      $route () {
+      $route() {
         this.$toast.clear();
       }
     }
-  }
+  };
-
 </script>

layouts/error.vue

@@ -1,10 +1,16 @@
 <template>
   <div class="page page-error">
-    <img src="~static/icons/error.svg" alt="Error" class="error_banner">
+    <img src="~static/icons/error.svg" alt="Error" class="error_banner" />
     <h2>{{ error.statusCode }}</h2>
     <h3>{{ error.message }}</h3>
-    <p><nuxt-link to="/"><button>Go Home</button></nuxt-link></p>
+    <p>
-    <p><a href="" @click.prevent="reloadApplication">Reload</a></p>
+      <nuxt-link to="/">
+        <button>Go Home</button>
+      </nuxt-link>
+    </p>
+    <p>
+      <a href @click.prevent="reloadApplication">Reload</a>
+    </p>
   </div>
 </template>
 
@@ -25,20 +31,20 @@
 
 <script>
   export default {
-      props: ['error'],
+    props: ["error"],
 
-      methods: {
+    methods: {
-        reloadApplication () {
+      reloadApplication() {
-          this.$router.push('/', () => window.location.reload());
+        this.$router.push("/", () => window.location.reload());
-        }
-      },
-
-      head () {
-          return {
-              bodyAttrs: {
-                  class: 'sticky-footer'
-              }
-          }
       }
-  }
+    },
+
+    head() {
+      return {
+        bodyAttrs: {
+          class: "sticky-footer"
+        }
+      };
+    }
+  };
 </script>

middleware/parsedefaulturl.js

@@ -1,5 +1,8 @@
-export default function({ route, redirect }) {
+export default function ({
-  if(route.fullPath !== '/') {
+  route,
+  redirect
+}) {
+  if (route.fullPath !== '/') {
     return redirect('/');
   }
-} 
+}

nuxt.config.js

@@ -27,9 +27,6 @@ export default {
   server: {
     host: '0.0.0.0', // default: localhost
   },
-  serverMiddleware: [
-    '~/proxy/index.js'
-  ],
   head: {
     title: `${meta.name} \u2022 ${meta.shortDescription}`,
     meta: [

pages/settings.vue

@@ -6,7 +6,12 @@
           <h3 class="title">Background</h3>
           <div class="backgrounds">
             <span :key="theme.class" @click="applyTheme(theme.class)" v-for="theme in themes">
-              <swatch :active="settings.THEME_CLASS === theme.class" :class="{ vibrant: theme.vibrant }" :color="theme.color" :name="theme.name"></swatch>
+              <swatch
+                :active="settings.THEME_CLASS === theme.class"
+                :class="{ vibrant: theme.vibrant }"
+                :color="theme.color"
+                :name="theme.name"
+              ></swatch>
             </span>
           </div>
         </li>
@@ -15,8 +20,17 @@
         <li>
           <h3 class="title">Color</h3>
           <div class="colors">
-            <span :key="entry.color" @click.prevent="setActiveColor(entry.color, entry.vibrant)" v-for="entry in colors">
+            <span
-              <swatch :active="settings.THEME_COLOR === entry.color.toUpperCase()" :class="{ vibrant: entry.vibrant }" :color="entry.color" :name="entry.name" />
+              :key="entry.color"
+              @click.prevent="setActiveColor(entry.color, entry.vibrant)"
+              v-for="entry in colors"
+            >
+              <swatch
+                :active="settings.THEME_COLOR === entry.color.toUpperCase()"
+                :class="{ vibrant: entry.vibrant }"
+                :color="entry.color"
+                :name="entry.name"
+              />
             </span>
           </div>
         </li>
@@ -25,21 +39,26 @@
         <li>
           <h3 class="title">Frames</h3>
           <span>
-            <pw-toggle :on="!settings.DISABLE_FRAME_COLORS" @change="applySetting('DISABLE_FRAME_COLORS', $event)">
+            <pw-toggle
-              Multi-color {{ settings.DISABLE_FRAME_COLORS ? "Disabled" : "Enabled" }}
+              :on="settings.FRAME_COLORS_ENABLED"
-            </pw-toggle>
+              @change="toggleSetting('FRAME_COLORS_ENABLED')"
+            >Multi-color {{ settings.FRAME_COLORS_ENABLED ? "Enabled" : "Disabled" }}</pw-toggle>
           </span>
         </li>
       </ul>
     </pw-section>
-		<pw-section class="blue" icon="public" label="Proxy">
+    <pw-section class="blue" icon="public" label="Proxy">
-			<ul>
+      <ul class="info">
-				<li>
+        <li><p>Postwoman's Proxy is hosted by ApolloTV.<br>You can read the ApolloTV privacy policy by clicking <a href="https://apollotv.xyz/legal" target="_blank">here</a/>.</p></li>
-					<pw-toggle :on="settings.PROXY_ENABLED" @change="applySetting('PROXY_ENABLED', $event)">
+      </ul>
-						Proxy {{ settings.PROXY_ENABLED ? "enabled" : "disabled" }}
+      <ul>
-					</pw-toggle>
+        <li>
-				</li>
+          <pw-toggle
-			</ul>
+            :on="settings.PROXY_ENABLED"
+            @change="toggleSetting('PROXY_ENABLED')"
+          >Proxy {{ settings.PROXY_ENABLED ? "enabled" : "disabled" }}</pw-toggle>
+        </li>
+      </ul>
       <!--
       PROXY SETTINGS URL AND KEY
       --------------
@@ -55,10 +74,16 @@
 				</li>
 			</ul>
       -->
-		</pw-section>
+    </pw-section>
-
   </div>
 </template>
+
+<style scoped>
+  .info {
+    margin-left: 5px;
+  }
+</style>
+
 <script>
   import section from "../components/section";
   import swatch from "../components/settings/swatch";
@@ -66,9 +91,9 @@
 
   export default {
     components: {
-      'pw-section': section,
+      "pw-section": section,
-      'pw-toggle': toggle,
+      "pw-toggle": toggle,
-      'swatch': swatch
+      swatch: swatch
     },
 
     data() {
@@ -78,128 +103,137 @@
         //        set the relevant values.
         themes: [
           {
-            "color": "rgb(37, 38, 40)",
+            color: "rgb(37, 38, 40)",
-            "name": "Kinda Dark",
+            name: "Kinda Dark",
-            "class": ""
+            class: ""
           },
           {
-            "color": "#ffffff",
+            color: "#ffffff",
-            "name": "Clearly White",
+            name: "Clearly White",
-            "vibrant": true,
+            vibrant: true,
-            "class": "light"
+            class: "light"
           },
           {
-            "color": "#000000",
+            color: "#000000",
-            "name": "Just Black",
+            name: "Just Black",
-            "class": "black"
+            class: "black"
           },
           {
-            "color": "var(--bg-color)",
+            color: "var(--bg-color)",
-            "name": "Auto (system)",
+            name: "Auto (system)",
-            "vibrant": window.matchMedia('(prefers-color-scheme: light)').matches,
+            vibrant: window.matchMedia("(prefers-color-scheme: light)").matches,
-            "class": "auto"
+            class: "auto"
           }
         ],
         // You can define a new color here! It will simply store the color value.
         colors: [
           // If the color is vibrant, black is used as the active foreground color.
           {
-            "color": "#50fa7b",
+            color: "#50fa7b",
-            "name": "Green",
+            name: "Green",
-            "vibrant": true
+            vibrant: true
           },
           {
-            "color": "#f1fa8c",
+            color: "#f1fa8c",
-            "name": "Yellow",
+            name: "Yellow",
-            "vibrant": true
+            vibrant: true
           },
           {
-            "color": "#ff79c6",
+            color: "#ff79c6",
-            "name": "Pink",
+            name: "Pink",
-            "vibrant": true
+            vibrant: true
           },
           {
-            "color": "#ff5555",
+            color: "#ff5555",
-            "name": "Red",
+            name: "Red",
-            "vibrant": false
+            vibrant: false
           },
           {
-            "color": "#bd93f9",
+            color: "#bd93f9",
-            "name": "Purple",
+            name: "Purple",
-            "vibrant": true
+            vibrant: true
           },
           {
-            "color": "#ffb86c",
+            color: "#ffb86c",
-            "name": "Orange",
+            name: "Orange",
-            "vibrant": true
+            vibrant: true
           },
           {
-            "color": "#8be9fd",
+            color: "#8be9fd",
-            "name": "Cyan",
+            name: "Cyan",
-            "vibrant": true
+            vibrant: true
           },
           {
-            "color": "#57b5f9",
+            color: "#57b5f9",
-            "name": "Blue",
+            name: "Blue",
-            "vibrant": false
+            vibrant: false
-          },
+          }
         ],
 
         settings: {
-          THEME_CLASS: this.$store.state.postwoman.settings.THEME_CLASS || '',
+          THEME_CLASS: this.$store.state.postwoman.settings.THEME_CLASS || "",
-          THEME_COLOR: '',
+          THEME_COLOR: "",
           THEME_COLOR_VIBRANT: true,
 
-          DISABLE_FRAME_COLORS: this.$store.state.postwoman.settings.DISABLE_FRAME_COLORS || false,
+          FRAME_COLORS_ENABLED:
-          PROXY_ENABLED: this.$store.state.postwoman.settings.PROXY_ENABLED || false,
+            this.$store.state.postwoman.settings.FRAME_COLORS_ENABLED || false,
-          PROXY_URL: this.$store.state.postwoman.settings.PROXY_URL || '',
+          PROXY_ENABLED:
-          PROXY_KEY: this.$store.state.postwoman.settings.PROXY_KEY || ''
+            this.$store.state.postwoman.settings.PROXY_ENABLED || false,
+          PROXY_URL: this.$store.state.postwoman.settings.PROXY_URL || "",
+          PROXY_KEY: this.$store.state.postwoman.settings.PROXY_KEY || ""
         }
-      }
+      };
     },
 
     watch: {
       proxySettings: {
         deep: true,
         handler(value) {
-          this.applySetting('PROXY_URL', value.url);
+          this.applySetting("PROXY_URL", value.url);
-          this.applySetting('PROXY_KEY', value.key);
+          this.applySetting("PROXY_KEY", value.key);
         }
       }
     },
 
     methods: {
       applyTheme(name) {
-        this.applySetting('THEME_CLASS', name);
+        this.applySetting("THEME_CLASS", name);
         document.documentElement.className = name;
         let imgGitHub = document.getElementById("imgGitHub");
-        imgGitHub.style['filter'] = "";
+        imgGitHub.style["filter"] = "";
-        imgGitHub.style['webkit-filter'] = "invert(100%)";
+        imgGitHub.style["webkit-filter"] = "invert(100%)";
         if (name.includes("light")) {
-          imgGitHub.style['filter'] = "invert(100%)";
+          imgGitHub.style["filter"] = "invert(100%)";
-          imgGitHub.style['webkit-filter'] = "invert(100%)";
+          imgGitHub.style["webkit-filter"] = "invert(100%)";
         }
       },
       setActiveColor(color, vibrant) {
         // By default, the color is vibrant.
         if (vibrant == null) vibrant = true;
-        document.documentElement.style.setProperty('--ac-color', color);
+        document.documentElement.style.setProperty("--ac-color", color);
-        document.documentElement.style.setProperty('--act-color', vibrant ? 'rgb(37, 38, 40)' : '#f8f8f2');
+        document.documentElement.style.setProperty(
-        this.applySetting('THEME_COLOR', color.toUpperCase());
+          "--act-color",
-        this.applySetting('THEME_COLOR_VIBRANT', vibrant);
+          vibrant ? "rgb(37, 38, 40)" : "#f8f8f2"
+        );
+        this.applySetting("THEME_COLOR", color.toUpperCase());
+        this.applySetting("THEME_COLOR_VIBRANT", vibrant);
       },
       getActiveColor() {
         // This strips extra spaces and # signs from the strings.
-        const strip = (str) => str.replace(/#/g, '').replace(/ /g, '');
+        const strip = str => str.replace(/#/g, "").replace(/ /g, "");
-        return `#${strip(window.getComputedStyle(document.documentElement).getPropertyValue('--ac-color')).toUpperCase()}`;
+        return `#${strip(
+          window
+            .getComputedStyle(document.documentElement)
+            .getPropertyValue("--ac-color")
+        ).toUpperCase()}`;
       },
       applySetting(key, value) {
         this.settings[key] = value;
-        this.$store.commit('postwoman/applySetting', [key, value]);
+        this.$store.commit("postwoman/applySetting", [key, value]);
       },
       toggleSetting(key) {
         this.settings[key] = !this.settings[key];
-        this.$store.commit('postwoman/applySetting', [key, this.settings[key]]);
+        this.$store.commit("postwoman/applySetting", [key, this.settings[key]]);
       }
     },
     beforeMount() {
@@ -211,9 +245,8 @@
         return {
           url: this.settings.PROXY_URL,
           key: this.settings.PROXY_KEY
-        }
+        };
       }
     }
-  }
+  };
-
 </script>

pages/websocket.vue

@@ -4,7 +4,13 @@
       <ul>
         <li>
           <label for="url">URL</label>
-          <input id="url" type="url" :class="{ error: !urlValid }" v-model="url" @keyup.enter="urlValid ? toggleConnection() : null">
+          <input
+            id="url"
+            type="url"
+            :class="{ error: !urlValid }"
+            v-model="url"
+            @keyup.enter="urlValid ? toggleConnection() : null"
+          />
         </li>
         <li>
           <label for="connect" class="hide-on-small-screen">&nbsp;</label>
@@ -18,13 +24,23 @@
         </li>
       </ul>
     </pw-section>
-    <pw-section class="purple" icon="cloud_download" label="Communication" id="response" ref="response">
+    <pw-section
+      class="purple"
+      icon="cloud_download"
+      label="Communication"
+      id="response"
+      ref="response"
+    >
       <ul>
         <li>
           <label for="log">Log</label>
           <div id="log" name="log" class="log">
             <span v-if="communication.log">
-              <span v-for="(logEntry, index) in communication.log" :style="{ color: logEntry.color }" :key="index">@ {{ logEntry.ts }} {{ getSourcePrefix(logEntry.source) }} {{ logEntry.payload }}</span>
+              <span
+                v-for="(logEntry, index) in communication.log"
+                :style="{ color: logEntry.color }"
+                :key="index"
+              >@ {{ logEntry.ts }} {{ getSourcePrefix(logEntry.source) }} {{ logEntry.payload }}</span>
             </span>
             <span v-else>(waiting for connection)</span>
           </div>
@@ -33,7 +49,14 @@
       <ul>
         <li>
           <label for="message">Message</label>
-          <input id="message" name="message" type="text" v-model="communication.input" :readonly="!connectionState" @keyup.enter="connectionState ? sendMessage() : null">
+          <input
+            id="message"
+            name="message"
+            type="text"
+            v-model="communication.input"
+            :readonly="!connectionState"
+            @keyup.enter="connectionState ? sendMessage() : null"
+          />
         </li>
         <li>
           <label for="send" class="hide-on-small-screen">&nbsp;</label>
@@ -62,7 +85,7 @@
     &,
     span {
       font-size: 18px;
-      font-family: 'Roboto Mono', monospace;
+      font-family: "Roboto Mono", monospace;
     }
 
     span {
@@ -70,13 +93,13 @@
       white-space: pre-wrap;
     }
   }
-
 </style>
+
 <script>
   import section from "../components/section";
   export default {
     components: {
-      'pw-section': section
+      "pw-section": section
     },
     data() {
       return {
@@ -87,19 +110,22 @@
           log: null,
           input: ""
         }
-      }
+      };
     },
     computed: {
       toggleConnectionVerb() {
         return !this.connectionState ? "Connect" : "Disconnect";
       },
       urlValid() {
-        const pattern = new RegExp('^(wss?:\\/\\/)?' +
+        const pattern = new RegExp(
-          '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' +
+          "^(wss?:\\/\\/)?" +
-          '((\\d{1,3}\\.){3}\\d{1,3}))' +
+            "((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|" +
-          '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' +
+            "((\\d{1,3}\\.){3}\\d{1,3}))" +
-          '(\\?[;&a-z\\d%_.~+=-]*)?' +
+            "(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*" +
-          '(\\#[-a-z\\d_]*)?$', 'i');
+            "(\\?[;&a-z\\d%_.~+=-]*)?" +
+            "(\\#[-a-z\\d_]*)?$",
+          "i"
+        );
         return pattern.test(this.url);
       }
     },
@@ -111,51 +137,55 @@
         else return this.disconnect();
       },
       connect() {
-        this.communication.log = [{
+        this.communication.log = [
-          payload: `Connecting to ${this.url}...`,
+          {
-          source: 'info',
+            payload: `Connecting to ${this.url}...`,
-          color: 'var(--ac-color)'
+            source: "info",
-        }];
+            color: "var(--ac-color)"
+          }
+        ];
         try {
           this.socket = new WebSocket(this.url);
-          this.socket.onopen = (event) => {
+          this.socket.onopen = event => {
             this.connectionState = true;
-            this.communication.log = [{
+            this.communication.log = [
-              payload: `Connected to ${this.url}.`,
+              {
-              source: 'info',
+                payload: `Connected to ${this.url}.`,
-              color: 'var(--ac-color)',
+                source: "info",
-              ts: (new Date()).toLocaleTimeString()
+                color: "var(--ac-color)",
-            }];
+                ts: new Date().toLocaleTimeString()
-            this.$toast.success('Connected', {
+              }
-              icon: 'sync'
+            ];
+            this.$toast.success("Connected", {
+              icon: "sync"
             });
           };
-          this.socket.onerror = (event) => {
+          this.socket.onerror = event => {
             this.handleError();
           };
-          this.socket.onclose = (event) => {
+          this.socket.onclose = event => {
             this.connectionState = false;
             this.communication.log.push({
               payload: `Disconnected from ${this.url}.`,
-              source: 'info',
+              source: "info",
-              color: '#ff5555',
+              color: "#ff5555",
-              ts: (new Date()).toLocaleTimeString()
+              ts: new Date().toLocaleTimeString()
             });
-            this.$toast.error('Disconnected', {
+            this.$toast.error("Disconnected", {
-              icon: 'sync_disabled'
+              icon: "sync_disabled"
             });
           };
-          this.socket.onmessage = (event) => {
+          this.socket.onmessage = event => {
             this.communication.log.push({
               payload: event.data,
-              source: 'server',
+              source: "server",
-              ts: (new Date()).toLocaleTimeString()
+              ts: new Date().toLocaleTimeString()
             });
-          }
+          };
         } catch (ex) {
           this.handleError(ex);
-          this.$toast.error('Something went wrong!', {
+          this.$toast.error("Something went wrong!", {
-            icon: 'error'
+            icon: "error"
           });
         }
       },
@@ -167,52 +197,51 @@
         this.connectionState = false;
         this.communication.log.push({
           payload: `An error has occurred.`,
-          source: 'info',
+          source: "info",
-          color: '#ff5555',
+          color: "#ff5555",
-          ts: (new Date()).toLocaleTimeString()
+          ts: new Date().toLocaleTimeString()
-        });
-        if (error != null) this.communication.log.push({
-          payload: error,
-          source: 'info',
-          color: '#ff5555',
-          ts: (new Date()).toLocaleTimeString()
         });
+        if (error != null)
+          this.communication.log.push({
+            payload: error,
+            source: "info",
+            color: "#ff5555",
+            ts: new Date().toLocaleTimeString()
+          });
       },
       sendMessage() {
         const message = this.communication.input;
         this.socket.send(message);
         this.communication.log.push({
           payload: message,
-          source: 'client',
+          source: "client",
-          ts: (new Date()).toLocaleTimeString()
+          ts: new Date().toLocaleTimeString()
         });
         this.communication.input = "";
       },
-      collapse({
+      collapse({ target }) {
-        target
-      }) {
         const el = target.parentNode.className;
-        document.getElementsByClassName(el)[0].classList.toggle('hidden');
+        document.getElementsByClassName(el)[0].classList.toggle("hidden");
       },
       getSourcePrefix(source) {
         const sourceEmojis = {
           // Source used for info messages.
-          'info': '\tℹ️ [INFO]:\t',
+          info: "\tℹ️ [INFO]:\t",
           // Source used for client to server messages.
-          'client': '\t👽 [SENT]:\t',
+          client: "\t👽 [SENT]:\t",
           // Source used for server to client messages.
-          'server': '\t📥 [RECEIVED]:\t'
+          server: "\t📥 [RECEIVED]:\t"
         };
-        if (Object.keys(sourceEmojis).includes(source)) return sourceEmojis[source];
+        if (Object.keys(sourceEmojis).includes(source))
-        return '';
+          return sourceEmojis[source];
+        return "";
       }
     },
-    updated: function () {
+    updated: function() {
-      this.$nextTick(function () {
+      this.$nextTick(function() {
-        var divLog = document.getElementById("log")
+        var divLog = document.getElementById("log");
-        divLog.scrollBy(0, divLog.scrollHeight + 100)
+        divLog.scrollBy(0, divLog.scrollHeight + 100);
-      })
+      });
     }
-  }
+  };
-
 </script>

plugins/vuex-persist.js

@@ -1,5 +1,7 @@
 import VuexPersistence from "vuex-persist";
 
-export default ({ store }) => {
+export default ({
-    new VuexPersistence().plugin(store);
+  store
-}
+}) => {
+  new VuexPersistence().plugin(store);
+}

proxy/index.js

@@ -1,52 +0,0 @@
-import express from 'express';
-import bodyParser from 'body-parser';
-import axios from 'axios';
-
-const app = express();
-
-app.use(bodyParser.json());
-
-app.use((req, res, next) => {
-  res.header('Access-Control-Allow-Origin', '*');
-  res.header('Access-Control-Allow-Headers', '*');
-  next();
-});
-
-app.post('/', async (req, res) => {
-  const {method, url, auth, headers, data} = req.body;
-
-  try {
-    const payload = await axios({
-      method,
-      url,
-      auth,
-      headers,
-      data
-    });
-
-    return await res.json({
-        data: payload.data,
-        status: payload.status,
-        statusText: payload.statusText,
-        headers: payload.headers,
-    });
-
-  } catch(error) {
-    if(error.response) {
-      const errorResponse = error.response;
-      return await res.json({
-        data: errorResponse.data,
-        status: errorResponse.status,
-        statusText: errorResponse.statusText,
-        headers: errorResponse.headers,
-      });
-    } else {
-      return res.status(500).send();
-    }
-  }
-});
-
-export default {
-  path: '/proxy',
-  handler: app
-}

store/postwoman.js

@@ -1,241 +1,268 @@
 import Vue from 'vue'
 
 export const SETTINGS_KEYS = [
-    /**
+  /**
-     * The CSS class that should be applied to the root element.
+   * The CSS class that should be applied to the root element.
-     * Essentially, the name of the background theme.
+   * Essentially, the name of the background theme.
-     */
+   */
-    "THEME_CLASS",
+  "THEME_CLASS",
 
-    /**
+  /**
-     * The hex color code for the currently active theme.
+   * The hex color code for the currently active theme.
-     */
+   */
-    "THEME_COLOR",
+  "THEME_COLOR",
 
-    /**
+  /**
-     * Whether or not THEME_COLOR is considered 'vibrant'.
+   * Whether or not THEME_COLOR is considered 'vibrant'.
-     *
+   *
-     * For readability reasons, if the THEME_COLOR is vibrant,
+   * For readability reasons, if the THEME_COLOR is vibrant,
-     * any text placed on the theme color will have its color
+   * any text placed on the theme color will have its color
-     * inverted from white to black.
+   * inverted from white to black.
-     */
+   */
-    "THEME_COLOR_VIBRANT",
+  "THEME_COLOR_VIBRANT",
 
-    /**
+  /**
-     * Normally, section frames are multicolored in the UI
+   * Normally, section frames are multicolored in the UI
-     * to emphasise the different sections.
+   * to emphasise the different sections.
-     * This setting allows that to be turned off.
+   * This setting allows that to be turned off.
-     */
+   */
-    "DISABLE_FRAME_COLORS",
+  "FRAME_COLORS_ENABLED",
 
-    /**
+  /**
-     * Whether or not requests should be proxied.
+   * Whether or not requests should be proxied.
-     */
+   */
-    "PROXY_ENABLED",
+  "PROXY_ENABLED",
 
-    /**
+  /**
-     * The URL of the proxy to connect to for requests.
+   * The URL of the proxy to connect to for requests.
-     */
+   */
-    "PROXY_URL",
+  "PROXY_URL",
-    /**
+  /**
-     * The security key of the proxy.
+   * The security key of the proxy.
-     */
+   */
-    "PROXY_KEY"
+  "PROXY_KEY",
+
+  /**
+   * An array of properties to exclude from the URL.
+   * e.g. 'auth'
+   */
+  "URL_EXCLUDES"
 ];
 
 export const state = () => ({
-    settings        : {},
+  settings: {},
-    collections     : [{
+  collections: [{
-        name     : 'My First Collection',
+    name: 'My First Collection',
-        folders  : [],
+    folders: [],
-        requests : [],
+    requests: [],
-    }],
+  }],
-    selectedRequest : {},
+  selectedRequest: {},
-    editingRequest  : {},
+  editingRequest: {},
 });
 
 export const mutations = {
 
-    applySetting (state, setting) {
+  applySetting(state, setting) {
-        if (setting == null || !(setting instanceof Array) || setting.length !== 2)
+    if (setting == null || !(setting instanceof Array) || setting.length !== 2)
-            throw new Error("You must provide a setting (array in the form [key, value])");
+      throw new Error("You must provide a setting (array in the form [key, value])");
 
-        const [key, value] = setting;
+    const [key, value] = setting;
-        // Do not just remove this check.
+    // Do not just remove this check.
-        // Add your settings key to the SETTINGS_KEYS array at the
+    // Add your settings key to the SETTINGS_KEYS array at the
-        // top of the file.
+    // top of the file.
-        // This is to ensure that application settings remain documented.
+    // This is to ensure that application settings remain documented.
-        if (!SETTINGS_KEYS.includes(key)) throw new Error("The settings structure does not include the key " + key);
+    if (!SETTINGS_KEYS.includes(key)) throw new Error("The settings structure does not include the key " + key);
 
-        state.settings[key] = value;
+    state.settings[key] = value;
-    },
+  },
 
-    replaceCollections (state, collections) {
+  replaceCollections(state, collections) {
-        state.collections = collections;
+    state.collections = collections;
-    },
+  },
 
-    importCollections (state, collections) {
+  importCollections(state, collections) {
-        state.collections = [...state.collections, ...collections];
+    state.collections = [...state.collections, ...collections];
 
-        let index = 0;
+    let index = 0;
-        for (let collection of collections) {
+    for (let collection of collections) {
-            collection.collectionIndex = index;
+      collection.collectionIndex = index;
-            index += 1;
+      index += 1;
-        }
+    }
-    },
+  },
 
-    addNewCollection (state, collection) {
+  addNewCollection(state, collection) {
-        state.collections.push({
+    state.collections.push({
-            name     : '',
+      name: '',
-            folders  : [],
+      folders: [],
-            requests : [],
+      requests: [],
-            ...collection,
+      ...collection,
-        })
+    })
-    },
+  },
 
-    removeCollection (state, payload) {
+  removeCollection(state, payload) {
-        const { collectionIndex } = payload;
+    const {
-        state.collections.splice(collectionIndex, 1)
+      collectionIndex
-    },
+    } = payload;
+    state.collections.splice(collectionIndex, 1)
+  },
 
-    editCollection (state, payload) {
+  editCollection(state, payload) {
-        const { collection, collectionIndex } = payload
+    const {
-        state.collections[collectionIndex]    = collection
+      collection,
-    },
+      collectionIndex
+    } = payload
+    state.collections[collectionIndex] = collection
+  },
 
-    addNewFolder (state, payload) {
+  addNewFolder(state, payload) {
-        const { collectionIndex, folder } = payload;
+    const {
-        state.collections[collectionIndex].folders.push({
+      collectionIndex,
-            name     : '',
+      folder
-            requests : [],
+    } = payload;
-            ...folder,
+    state.collections[collectionIndex].folders.push({
-        });
+      name: '',
-    },
+      requests: [],
+      ...folder,
+    });
+  },
 
-    editFolder (state, payload) {
+  editFolder(state, payload) {
-        const { collectionIndex, folder, folderIndex } = payload;
+    const {
-        Vue.set(state.collections[collectionIndex].folders, folderIndex, folder)
+      collectionIndex,
-    },
+      folder,
+      folderIndex
+    } = payload;
+    Vue.set(state.collections[collectionIndex].folders, folderIndex, folder)
+  },
 
-    removeFolder (state, payload) {
+  removeFolder(state, payload) {
-        const { collectionIndex, folderIndex } = payload;
+    const {
-        state.collections[collectionIndex].folders.splice(folderIndex, 1)
+      collectionIndex,
-    },
+      folderIndex
+    } = payload;
+    state.collections[collectionIndex].folders.splice(folderIndex, 1)
+  },
 
-    addRequest (state, payload) {
+  addRequest(state, payload) {
-        const { request } = payload;
+    const {
+      request
+    } = payload;
 
-        // Request that is directly attached to collection
+    // Request that is directly attached to collection
-        if (request.folder === -1) {
+    if (request.folder === -1) {
-            state.collections[request.collection].requests.push(request);
+      state.collections[request.collection].requests.push(request);
-            return
+      return
-        }
+    }
 
-        state.collections[request.collection].folders[request.folder].requests.push(request);
+    state.collections[request.collection].folders[request.folder].requests.push(request);
-    },
+  },
 
-    editRequest (state, payload) {
+  editRequest(state, payload) {
-        const {
+    const {
-            requestOld,
+      requestOld,
-            requestOldCollectionIndex,
+      requestOldCollectionIndex,
-            requestOldFolderIndex,
+      requestOldFolderIndex,
-            requestOldIndex,
+      requestOldIndex,
-            requestNew,
+      requestNew,
-            requestNewCollectionIndex,
+      requestNewCollectionIndex,
-            requestNewFolderIndex,
+      requestNewFolderIndex,
-        } = payload
+    } = payload
 
-        const changedCollection = requestOldCollectionIndex !== requestNewCollectionIndex
+    const changedCollection = requestOldCollectionIndex !== requestNewCollectionIndex
-        const changedFolder     = requestOldFolderIndex     !== requestNewFolderIndex
+    const changedFolder = requestOldFolderIndex !== requestNewFolderIndex
-        const changedPlace      = changedCollection || changedFolder
+    const changedPlace = changedCollection || changedFolder
 
-        // set new request
+    // set new request
-        if (requestNewFolderIndex !== undefined)
+    if (requestNewFolderIndex !== undefined)
-            Vue.set(state.collections[requestNewCollectionIndex].folders[requestNewFolderIndex].requests, requestOldIndex, requestNew)
+      Vue.set(state.collections[requestNewCollectionIndex].folders[requestNewFolderIndex].requests, requestOldIndex, requestNew)
-        else
+    else
-            Vue.set(state.collections[requestNewCollectionIndex].requests, requestOldIndex, requestNew)
+      Vue.set(state.collections[requestNewCollectionIndex].requests, requestOldIndex, requestNew)
 
-        // remove old request
+    // remove old request
-        if (changedPlace) {
+    if (changedPlace) {
-            if (requestOldFolderIndex !== undefined)
+      if (requestOldFolderIndex !== undefined)
-                state.collections[requestOldCollectionIndex].folders[requestOldFolderIndex].requests.splice(requestOldIndex, 1)
+        state.collections[requestOldCollectionIndex].folders[requestOldFolderIndex].requests.splice(requestOldIndex, 1)
-            else
+      else
-                state.collections[requestOldCollectionIndex].requests.splice(requestOldIndex, 1)
+        state.collections[requestOldCollectionIndex].requests.splice(requestOldIndex, 1)
-        }
+    }
-    },
+  },
 
-    saveRequestAs (state, payload) {
+  saveRequestAs(state, payload) {
-        const {
+    const {
-            request,
+      request,
-            collectionIndex,
+      collectionIndex,
-            folderIndex,
+      folderIndex,
-            requestIndex,
+      requestIndex,
-        } = payload
+    } = payload
 
-        const specifiedCollection = collectionIndex !== undefined
+    const specifiedCollection = collectionIndex !== undefined
-        const specifiedFolder     = folderIndex     !== undefined
+    const specifiedFolder = folderIndex !== undefined
-        const specifiedRequest    = requestIndex    !== undefined
+    const specifiedRequest = requestIndex !== undefined
 
-        if      (specifiedCollection && specifiedFolder && specifiedRequest)
+    if (specifiedCollection && specifiedFolder && specifiedRequest)
-            Vue.set(state.collections[collectionIndex].folders[folderIndex].requests, requestIndex, request)
+      Vue.set(state.collections[collectionIndex].folders[folderIndex].requests, requestIndex, request)
-        else if (specifiedCollection && specifiedFolder && !specifiedRequest) {
+    else if (specifiedCollection && specifiedFolder && !specifiedRequest) {
-            const requests         = state.collections[collectionIndex].folders[folderIndex].requests
+      const requests = state.collections[collectionIndex].folders[folderIndex].requests
-            const lastRequestIndex = requests.length - 1;
+      const lastRequestIndex = requests.length - 1;
-            Vue.set(requests, lastRequestIndex + 1, request)
+      Vue.set(requests, lastRequestIndex + 1, request)
-        }
+    } else if (specifiedCollection && !specifiedFolder && specifiedRequest) {
-        else if (specifiedCollection && !specifiedFolder && specifiedRequest) {
+      const requests = state.collections[collectionIndex].requests
-            const requests         = state.collections[collectionIndex].requests
+      Vue.set(requests, requestIndex, request)
-            Vue.set(requests,requestIndex, request)
+    } else if (specifiedCollection && !specifiedFolder && !specifiedRequest) {
-        }
+      const requests = state.collections[collectionIndex].requests
-        else if (specifiedCollection && !specifiedFolder && !specifiedRequest) {
+      const lastRequestIndex = requests.length - 1;
-            const requests         = state.collections[collectionIndex].requests
+      Vue.set(requests, lastRequestIndex + 1, request)
-            const lastRequestIndex = requests.length - 1;
+    }
-            Vue.set(requests, lastRequestIndex + 1, request)
-        }
 
-    },
+  },
 
-    saveRequest (state, payload) {
+  saveRequest(state, payload) {
-        const { request } = payload;
+    const {
+      request
+    } = payload;
 
-        // Remove the old request from collection
+    // Remove the old request from collection
-        if (request.hasOwnProperty('oldCollection') && request.oldCollection > -1) {
+    if (request.hasOwnProperty('oldCollection') && request.oldCollection > -1) {
-            const folder = request.hasOwnProperty('oldFolder') && request.oldFolder >= -1 ? request.oldFolder : request.folder;
+      const folder = request.hasOwnProperty('oldFolder') && request.oldFolder >= -1 ? request.oldFolder : request.folder;
-            if (folder > -1) {
+      if (folder > -1) {
-                state.collections[request.oldCollection].folders[folder].requests.splice(request.requestIndex, 1)
+        state.collections[request.oldCollection].folders[folder].requests.splice(request.requestIndex, 1)
-            } else {
+      } else {
-                state.collections[request.oldCollection].requests.splice(request.requestIndex, 1)
+        state.collections[request.oldCollection].requests.splice(request.requestIndex, 1)
-            }
+      }
-        } else if (request.hasOwnProperty('oldFolder') && request.oldFolder !== -1) {
+    } else if (request.hasOwnProperty('oldFolder') && request.oldFolder !== -1) {
-            state.collections[request.collection].folders[folder].requests.splice(request.requestIndex, 1)
+      state.collections[request.collection].folders[folder].requests.splice(request.requestIndex, 1)
-        }
+    }
 
-        delete request.oldCollection;
+    delete request.oldCollection;
-        delete request.oldFolder;
+    delete request.oldFolder;
 
-        // Request that is directly attached to collection
+    // Request that is directly attached to collection
-        if (request.folder === -1) {
+    if (request.folder === -1) {
-            Vue.set(state.collections[request.collection].requests, request.requestIndex, request)
+      Vue.set(state.collections[request.collection].requests, request.requestIndex, request)
-            return
+      return
-        }
+    }
 
-        Vue.set(state.collections[request.collection].folders[request.folder].requests, request.requestIndex, request)
+    Vue.set(state.collections[request.collection].folders[request.folder].requests, request.requestIndex, request)
-    },
+  },
 
-    removeRequest (state, payload) {
+  removeRequest(state, payload) {
-        const { collectionIndex, folderIndex, requestIndex } = payload;
+    const {
+      collectionIndex,
+      folderIndex,
+      requestIndex
+    } = payload;
 
-        // Request that is directly attached to collection
+    // Request that is directly attached to collection
-        if (folderIndex === -1) {
+    if (folderIndex === -1) {
-            state.collections[collectionIndex].requests.splice(requestIndex, 1)
+      state.collections[collectionIndex].requests.splice(requestIndex, 1)
-            return
+      return
-        }
+    }
 
-        state.collections[collectionIndex].folders[folderIndex].requests.splice(requestIndex, 1)
+    state.collections[collectionIndex].folders[folderIndex].requests.splice(requestIndex, 1)
-    },
+  },
 
-    selectRequest (state, payload) {
+  selectRequest(state, payload) {
-        state.selectedRequest = Object.assign({}, payload.request);
+    state.selectedRequest = Object.assign({}, payload.request);
-    },
+  },
 
 };