Merge pull request #26 from railken/ft-sidebar-method-color

Add colors and fixed width to methods

resources/js/components/HttpMethods.vue

@@ -0,0 +1,45 @@
+<script>
+
+export default {
+    props: ['request'],
+
+    data () {
+        return {
+            colors: [
+                {method: "GET", class: "text-green-500"},
+                {method: "POST", class: "text-orange-400"},
+                {method: "DELETE", class: "text-red-600"},
+                {method: "PUT", class: "text-blue-500"},
+                {method: "PATCH", class: "text-blue-400"},
+                {method: "OPTIONS", class: "text-grey-500"}
+            ]
+        }
+    },
+
+    computed: {
+        color: function () {
+            let methods = this.request.info.methods
+
+            let colors = this.colors.filter(color => {
+                return methods.indexOf(color.method) !== -1
+            })
+
+            return colors.length === 1 ? colors[0].class : "text-grey-500"
+        }
+    }
+}
+</script>
+
+<template>
+    <span :class="'method-chip text-xs text-center font-bold uppercase ' + color">
+        {{ request.info.methods.length > 1 ? '*' : request.info.methods[0] }}
+    </span>
+</template>
+
+<style scoped>
+    .method-chip {
+        max-width: 45px;
+        width: 100%;
+        display: inline-block;
+    }
+</style>

resources/js/components/SidebarMenu.vue

@@ -1,9 +1,14 @@
 <script>
 import axios from 'axios';
+import HttpMethods from './HttpMethods'
 
 export default {
     props: [],
 
+    components: {
+      HttpMethods
+    },
+
     data() {
         return {
             requests: [],
@@ -88,7 +93,7 @@ export default {
                     <ul v-if="currentTab=='list'">
                         <li class="sm:mb-2" v-for="request in requests.list" :key="request.id">
                             <router-link :to="{name:'request', params:{id: request.id}}" active-class="text-orange-600" class="text-md px-2 -mx-2 py-1 hover:text-orange-600 text-gray-600">
-                                <span class="text-xs text-gray-500 uppercase">{{request.info.methods.join("|")}}</span>
+                                <http-methods :request="request" />
                                 <span class="ml-2">{{truncateString(request.title, 20)}}</span>
                             </router-link>
                         </li>
@@ -102,7 +107,7 @@ export default {
                             <ul class="ml-4">
                                 <li class="sm:mb-2" v-for="request in resources" :key="request.id">
                                     <router-link :to="{name:'request', params:{id: request.id}}" active-class="text-orange-600" class="text-md px-2 -mx-2 py-1 hover:text-orange-600 text-gray-600">
-                                        <span class="text-xs text-gray-500 uppercase">{{request.info.methods.join("|")}}</span>
+                                        <method-methods :request="request" />
                                         <span class="ml-2">{{truncateString(request.title, 20)}}</span>
                                     </router-link>
                                 </li>