Make tags an object, style based on data value

src/api-client.js

@@ -1,12 +1,23 @@
 import _ from 'lodash'
 
 const data = {
+  types: {
+    drupal: {
+      id: 'drupal',
+      name: 'Drupal'
+    },
+    nodejs: {
+      id: 'nodejs',
+      name: 'Node.js'
+    }
+  },
+
   applications: {
     1: {
       id: 1,
       name: 'Rebuilding Acquia',
       machineName: 'rebuildingacquia',
-      type: 'Drupal',
+      type: 'drupal',
       level: 'Enterprise',
       environments: {
         dev: {
@@ -138,7 +149,7 @@ const data = {
       id: 2,
       name: 'Oliver Davies',
       machineName: 'oliverdavies',
-      type: 'Drupal',
+      type: 'drupal',
       level: 'Professional',
       environments: {
         dev: {
@@ -220,6 +231,10 @@ const data = {
 
 export default {
   methods: {
+    getTypes() {
+      return data.types
+    },
+
     getApplications () {
       return data.applications
     },
@@ -231,6 +246,10 @@ export default {
     getEnvironment (applicationId, environment) {
       return _(this.getApplication(applicationId))
         .get('environments')[environment]
+    },
+
+    getApplicationType (application) {
+      return this.getTypes()[application.type]
     }
   }
 }

src/components/Application/ApplicationCard.vue

@@ -13,7 +13,7 @@
             </div>
           </div>
 
-          <application-tags :type="application.type" :level="application.level" class="mt-6"></application-tags>
+          <application-tags :type="getApplicationType(application)" :level="application.level" class="mt-6"></application-tags>
         </div>
 
         <div class="flex-none w-1/6 text-right">
@@ -30,7 +30,7 @@
               <router-link :to="{name: 'environments', params: {id: id}}" class="text-blue-300 no-underline hover:underline focus:underline"><h2 class="text-base font-normal mb-1">{{ application.name }}</h2></router-link>
             </div>
 
-            <application-tags :type="application.type" :level="application.level" class="w-1/4 px-2"></application-tags>
+            <application-tags :type="getApplicationType(application)" :level="application.level" class="w-1/4 px-2"></application-tags>
 
             <div class="w-2/5 px-2">
               <a href="#0" class="text-blue-300 no-underline hover:underline focus:underline">{{ application.environments['prod'].url }}</a>
@@ -47,10 +47,13 @@
 </template>
 
 <script>
+import ApiClient from '@/api-client.js'
 import ApplicationTags from '@/components/Application/ApplicationTags'
 import StarToggle from '@/components/Application/StarToggle'
 
 export default {
+  mixins: [ApiClient],
+
   components: {
     ApplicationTags,
     StarToggle

src/components/Application/ApplicationTags.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <ul class="list-reset flex flex-wrap -mr-2 -mb-2">
-      <li class="tag is-type">{{ type }}</li>
+      <li class="tag" :data-type="type.id">{{ type.name }}</li>
       <li class="tag">{{ level }}</li>
     </ul>
   </div>
@@ -11,7 +11,7 @@
 export default {
   props: {
     level: String,
-    type: String
+    type: Object
   }
 }
 </script>
@@ -24,4 +24,8 @@ export default {
 .tag[data-type="drupal"] {
   @apply bg-blue-100 border-blue-100 text-white
 }
+
+.tag[data-type="nodejs"] {
+  @apply bg-green border-green text-white
+}
 </style>

src/views/Environment.vue

@@ -44,7 +44,7 @@
             <div>
               <h1 class="text-4xl font-thin mb-2">Overview</h1>
 
-              <application-tags :type="application.type" :level="application.level"></application-tags>
+              <application-tags :type="getApplicationType(application)" :level="application.level"></application-tags>
             </div>
 
             <div class="my-10">

src/views/Environments.vue

@@ -48,7 +48,7 @@
               <div class="mr-16 mb-4 lg:mb-0">
                 <h1 class="text-4xl font-thin mb-2">Environments</h1>
 
-                <application-tags :type="application.type" :level="application.level"></application-tags>
+                <application-tags :type="getApplicationType(application)" :level="application.level"></application-tags>
               </div>
 
               <div class="lg:flex lg:flex-row-reverse flex-1 justify-between _bg-blue items-baseline">