Merge pull request #32 from akbarcandra/feature/add-http-status-compo…

…nent

Feature: add HTTP status color & description

resources/js/components/HttpStatus.vue

@@ -0,0 +1,57 @@
+<script>
+import Dropdown from './Dropdown';
+import { RESPONSE_CODE_DESCRIPTIONS } from '../constants';
+
+export default {
+    components: {
+        'dropdown': Dropdown,
+    },
+
+    props: ['response'],
+
+    data () {
+        return {
+            colors: [
+                { group: "1", class: "text-blue-500" },
+                { group: "2", class: "text-green-500" },
+                { group: "3", class: "text-yellow-500" },
+                { group: "4", class: "text-orange-400" },
+                { group: "5", class: "text-red-600" }
+            ]
+        }
+    },
+
+    computed: {
+        status () {
+            return this.response.status
+                ? `${this.response.status} ${this.response.statusText}`
+                : "Error"
+        },
+        description () {
+            return RESPONSE_CODE_DESCRIPTIONS[this.response.status] || "Unknown Response Code"
+        },
+        color () {
+            let statusGroup = String(this.response.status)[0] || ''
+            let color = this.colors.find(color => statusGroup === color.group)
+            return color ? color.class : "text-red-600"
+        }
+    }
+}
+</script>
+
+<template>
+    <dropdown class="inline-block text-xs py-2 px-1">
+        <template v-slot:trigger>
+            <span class="text-gray-500">Status:</span>
+            <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="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>
+                </div>
+            </div>
+        </template>
+    </dropdown>
+</template>

resources/js/components/ResponseTabs.vue

@@ -1,16 +1,29 @@
 <script>
+import HttpStatus from './HttpStatus';
+
 export default {
     props: {
         response: {
             type: Object,
-            required: true,
+            default () {
+                return {
+                    data: null,
+                    headers: [],
+                    status: null,
+                    statusText: ''
+                };
+            },
         },
         okToSave: {
             type: Boolean,
             default: true,
         }
     },
 
+    components: {
+      HttpStatus
+    },
+
     data() {
         return {
             currentTab: 'body',
@@ -47,18 +60,15 @@ export default {
             </div>
 
             <div class="ml-auto">
-                <div class="inline-block text-xs py-2 px-1">
-                    <span class="text-gray-500">Status:</span>
-                    <span class="text-green-500">{{response.status}} {{response.statusText}}</span>
-                </div>
+                <http-status :response="response" />
                 <div class="inline-block px-1 text-gray-400" v-if="okToSave">|</div>
                  <button v-if="okToSave" class="inline-block py-2 pl-1 pr-4 text-sm text-primary focus:outline-none" @click="sendResponseData">Save response as example</button>
             </div>
         </div>
 
         <!-- content -->
         <div v-if="currentTab=='body'" class="p-4 text-orange-800 text-sm bg-white">
-            <vue-json-pretty :data="response.data"></vue-json-pretty>
+            <vue-json-pretty :data="response.data" v-if="response.data"></vue-json-pretty>
         </div>
         <div v-if="currentTab=='headers'" class="bg-white">
             <table class="w-full text-left table-collapse">

resources/js/pages/request.vue

@@ -113,10 +113,10 @@ export default {
             this.responseData.route_hash = this.id;
             this.responseData.title = this.requestData.title;
             this.responseData.content.request = this.requestData;
-            this.responseData.content.response.data = data.data;
-            this.responseData.content.response.headers = data.headers;
-            this.responseData.content.response.status = data.status;
-            this.responseData.content.response.statusText = data.statusText;
+            this.responseData.content.response.data = data ? data.data : '';
+            this.responseData.content.response.headers = data ? data.headers : '';
+            this.responseData.content.response.status = data ? data.status : '';
+            this.responseData.content.response.statusText = data ? data.statusText : '';
 
             this.responseReady = true;
         },