Tidy up the front-end

package.json

@@ -11,17 +11,17 @@
     },
     "devDependencies": {
         "axios": "^0.19",
-        "cross-env": "^5.2",
-        "laravel-mix": "^4.0.7",
-        "resolve-url-loader": "^2.3.1",
-        "sass": "^1.15.2",
-        "sass-loader": "^7.1.0",
-        "tailwindcss": "^1.1.0",
-        "vue": "^2.6.10",
+        "cross-env": "^7.0",
+        "laravel-mix": "^5.0.0",
+        "laravel-mix-purgecss": "^5.0.0-rc.1",
+        "resolve-url-loader": "^3.1.1",
+        "sass": "^1.25.0",
+        "sass-loader": "^8.0.0",
+        "tailwindcss": "^1.2.0",
+        "vue": "^2.6.11",
         "vue-codemirror": "^4.0.6",
-        "vue-json-pretty": "^1.6.1",
         "vue-multiselect": "^2.1.6",
-        "vue-router": "^3.0.7",
-        "vue-template-compiler": "^2.6.6"
+        "vue-router": "^3.1.5",
+        "vue-template-compiler": "^2.6.11"
     }
 }

public/mix-manifest.json

@@ -1,4 +1,6 @@
 {
-    "/app.js": "/app.js?id=6d45c759d30f94caad5e",
-    "/app.css": "/app.css?id=9616cf67a534a0553548"
+    "/app.js": "/app.js?id=c920685566fb2b779405",
+    "/app.css": "/app.css?id=623635520365772a959d",
+    "/manifest.js": "/manifest.js?id=3c768977c2574a34506e",
+    "/vendor.js": "/vendor.js?id=db199b5ef6bfafd409c5"
 }

public/vendor.js.LICENSE.txt

@@ -0,0 +1,11 @@
+/*!
+  * vue-router v3.1.5
+  * (c) 2020 Evan You
+  * @license MIT
+  */
+
+/*!
+ * Vue.js v2.6.11
+ * (c) 2014-2019 Evan You
+ * Released under the MIT License.
+ */

resources/js/app.js

@@ -13,9 +13,13 @@ const router = new VueRouter({
     base: '/' + Compass.path,
 });
 
+Vue.component('alert', require('./components/Alert').default);
+Vue.component('omnibox', require('./components/Omnibox').default);
 Vue.component('site-header', require('./components/SiteHeader').default);
+Vue.component('request-tabs', require('./components/RequestTabs').default);
 Vue.component('sidebar-menu', require('./components/SidebarMenu').default);
-Vue.component('alert', require('./components/Alert').default);
+Vue.component('content-space', require('./components/ContentSpace').default);
+Vue.component('response-tabs', require('./components/ResponseTabs').default);
 
 Vue.mixin(Base);
 

resources/js/base.js

@@ -115,19 +115,6 @@ export default {
             }, 100);
         },
 
-        /**
-         * Truncate the given string.
-         *
-         * src: https://gist.github.com/DylanAttal/13716cfd9272e92a544ddddde221eab1
-         */
-        truncateString(str, num) {
-            if (str.length <= num) {
-                return str
-            }
-
-            return str.slice(0, num) + '...'
-        },
-
         /**
          * Normalize header 'Content-Type' into selected request body option.
          *

resources/js/components/ContentSpace.vue

@@ -0,0 +1,25 @@
+<script>
+export default {
+    props: {
+        description: {
+            type: String,
+            default: ''
+        }
+    }
+}
+</script>
+
+<template>
+    <section class="flex items-center justify-center">
+        <div class="my-40">
+            <svg class="h-64 w-64" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
+                <circle fill="#f3f3f3" cx="18" cy="18" r="14.5" />
+                <path fill="#fff" d="M17.343 20.748l8.777 5.381-5.379-8.778z" />
+                <path fill="#fff" d="M18.657 15.267L9.879 9.886l5.38 8.779z" />
+                <circle fill="#fff" cx="18" cy="18.008" r="3.055" />
+                <circle fill="#f3f3f3" cx="18" cy="18.008" r="1.648" /></svg>
+
+            <p class="text-center text-gray-500 text-lg">{{ description }}</p>
+        </div>
+    </section>
+</template>

resources/js/components/DataTable.vue

@@ -4,24 +4,33 @@ import HeaderFields from './HeaderFields';
 import SelectOption from 'vue-multiselect';
 
 export default {
+    inheritAttrs: false,
+
     components: {
         FilesInput,
         HeaderFields,
-        SelectOption,
+        SelectOption
     },
 
     props: {
         src: {
             type: String,
-            required: true,
+            required: true
         },
         content: {
             type: Array,
-            required: true,
+            required: true
         },
         optionable: {
             type: Boolean,
-            default: false,
+            default: false
+        }
+    },
+
+    computed: {
+        items: {
+            get() { return this.content },
+            set(val) { this.$emit('update:content', val) }
         }
     },
 
@@ -33,11 +42,11 @@ export default {
             }
         },
         updateRow(row) {
-            this.content[row].included = true;
-            this.content[row].new = false;
+            this.items[row].included = true;
+            this.items[row].new = false;
         },
         addRow() {
-            this.content.push({
+            this.items.push({
                 included: false,
                 key: null,
                 value: null,
@@ -47,34 +56,34 @@ export default {
             });
         },
         removeRow(row) {
-            this.content.splice(row, 1);
-        },
+            this.items.splice(row, 1);
+        }
     }
 }
 </script>
 
 <template>
     <table class="w-full text-left table-collapse table-fixed">
         <thead>
-            <tr>
-                <th class="p-4 border-gray-200 text-xs font-semibold text-gray-700 w-4"></th>
-                <th class="p-2 border-l border-gray-200 text-xs font-semibold text-gray-700 w-1/4">Key</th>
-                <th class="p-2 border-l border-gray-200 text-xs font-semibold text-gray-700 w-1/4">Value</th>
-                <th class="p-2 border-l border-gray-200 text-xs font-semibold text-gray-700 w-auto">Description</th>
+            <tr class="bg-gray-100">
+                <th class="p-4 border-b border-gray-200 text-xs font-semibold text-gray-700 w-4"></th>
+                <th class="p-2 border-b border-gray-200 text-xs font-semibold text-gray-700 w-1/4">Key</th>
+                <th class="p-2 border-b border-gray-200 text-xs font-semibold text-gray-700 w-1/4">Value</th>
+                <th class="p-2 border-b border-gray-200 text-xs font-semibold text-gray-700 w-auto">Description</th>
             </tr>
         </thead>
         <tbody class="align-middle">
-            <tr v-for="(col, row) in content"
+            <tr v-for="(col, row) in items"
                 :key="row"
                 @mouseover="activateElmnt(src + row)"
                 @mouseout="activateElmnt(null)">
 
                 <!-- Checkbox -->
-                <td class="border-t border-gray-200 text-xs text-gray-800 text-center">
+                <td class="border-b border-gray-200 text-xs text-gray-800 text-center">
                     <input type="checkbox" v-model="col.included" :class="col.new ? 'hidden' : ''">
                 </td>
                 <!-- Key -->
-                <td class="p-0 border-l border-t border-gray-200 text-xs text-gray-800" :class="optionable ? 'relative' : ''">
+                <td class="p-0 border-b border-gray-200 text-xs text-gray-800" :class="optionable ? 'relative' : ''">
                     <input
                         v-show="src!=='header'"
                         type="text"
@@ -97,7 +106,7 @@ export default {
                     <header-fields v-show="src==='header'" list="keys" v-model="col.key" @input="handleInput(row, col)" />
                 </td>
                 <!-- Value -->
-                <td class="p-0 border-l border-t border-gray-200 text-xs text-gray-800">
+                <td class="p-0 border-b border-gray-200 text-xs text-gray-800">
                     <input
                         v-show="col.type==='text' && src!=='header'"
                         type="text"
@@ -109,7 +118,7 @@ export default {
                     <header-fields v-show="src==='header'" list="values" v-model="col.value" />
                 </td>
                 <!-- Description -->
-                <td class="pl-2 border-l border-t border-gray-200 text-xs text-gray-800 relative">
+                <td class="pl-2 border-b border-gray-200 text-xs text-gray-800 relative">
                     <input
                         type="text"
                         class="appearance-none focus:outline-none w-full bg-transparent"

resources/js/components/HeaderFields.vue

@@ -1,6 +1,6 @@
 <script>
 import SelectOption from 'vue-multiselect';
-import HeaderFields from './../data/HeaderFields.json';
+import { HTTP_HEADER_FIELDS } from '../constants';
 
 export default {
     components: {
@@ -11,12 +11,14 @@ export default {
 
     data() {
         return {
-            fields: [],
             selectedField: this.value,
         }
     },
 
     computed: {
+        fields() {
+            return this.list === 'keys' ? HTTP_HEADER_FIELDS.KEYS : HTTP_HEADER_FIELDS.VALUES;
+        },
         placeholder() {
             return 'Select ' + this.list.slice(0, -1) + ' options';
         }
@@ -28,12 +30,6 @@ export default {
         }
     },
 
-    mounted() {
-        this.list === 'keys'
-            ? this.fields = HeaderFields.keys
-            : this.fields = HeaderFields.values;
-    },
-
     methods: {
         handleHeader() {
             this.$emit('input', this.selectedField);

resources/js/components/HttpMethods.vue

@@ -1,26 +1,13 @@
 <script>
+import { HTTP_REQUEST_METHODS } from "../constants";
 
 export default {
     props: ['request'],
 
-    data () {
-        return {
-            methods: [
-                {name: "GET", color: "text-green-500"},
-                {name: "POST", color: "text-orange-400"},
-                {name: "DELETE", color: "text-red-600"},
-                {name: "PUT", color: "text-blue-500"},
-                {name: "PATCH", color: "text-blue-400"},
-                {name: "OPTIONS", color: "text-grey-500"}
-            ]
-        }
-    },
-
     computed: {
         method() {
-            const selectedMethod = this.request.content.selectedMethod || this.request.info.methods[0]
-
-            return this.methods.filter(method => method.name === selectedMethod)[0]
+            const selectedMethod = this.request.content.selectedMethod || this.request.info.methods[0];
+            return HTTP_REQUEST_METHODS.filter(method => method.name === selectedMethod)[0];
         }
     }
 }

resources/js/components/HttpStatus.vue

@@ -46,7 +46,7 @@ export default {
             <span :class="color">{{status}}</span>
         </template>
         <template v-slot:lists>
-            <div class="mt-2 mr-4 bg-white border rounded w-64 py-2 shadow-xl">
+            <div class="mt-2 mr-4 bg-white border border-gray-200 rounded rounded-t-none w-64 py-2 shadow-xl">
                 <div class="px-3 py-1 mt-2">
                     <span class="text-base text-gray-700 font-medium">{{status}}</span>
                     <p class="text-gray-700 text-xs mt-1">{{description}}</p>