Simplify things

src/components/Application/ApplicationCard.vue

@@ -9,7 +9,7 @@
             </div>
 
             <div class="truncate text-blue-300">
-              <a href="#0" class="text-inherit no-underline hover:underline focus:underline focus:outline-none">{{ application.environments['prod'].url }}</a>
+              <a href="#0" class="text-inherit no-underline hover:underline focus:underline focus:outline-none" v-text="prodUrl"/>
             </div>
           </div>
 
@@ -27,20 +27,22 @@
         <div class="flex flex-row-reverse items-center justify-between">
           <div class="flex flex-1 justify-between items-center -mx-2">
             <div class="flex-1 px-2">
-              <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>
+              <router-link :to="{name: 'environments', params: { 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>
 
             <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>
+              <a href="#0" class="text-blue-300 no-underline hover:underline focus:underline" v-text="prodUrl"/>
             </div>
 
             <div class="w-1/5 px-2">
-              <php-version :application="application"></php-version>
+              <php-version :application="application"/>
             </div>
           </div>
 
           <div class="px-2">
-            <star-toggle :application="application" :starred="starred" @toggle="starred = !starred"></star-toggle>
+            <star-toggle :application="application" :starred="starred" @toggle="starred = !starred"/>
           </div>
         </div>
       </div>
@@ -49,17 +51,11 @@
 </template>
 
 <script>
-import ApiClient from '@/api-client.js'
 import PhpVersion from '@/components/Application/PhpVersion'
 import StarToggle from '@/components/Application/StarToggle'
 
 export default {
-  mixins: [ApiClient],
-
-  components: {
-    PhpVersion,
-    StarToggle
-  },
+  components: { PhpVersion, StarToggle },
 
   props: {
     application: Object,
@@ -71,6 +67,12 @@ export default {
     return {
       starred: false
     }
+  },
+
+  computed: {
+    prodUrl () {
+      return this.application.environments['prod'].url
+    }
   }
 }
 </script>

src/components/Application/ApplicationTags.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
     <ul class="list-reset flex flex-wrap -mr-2 -mb-2">
-      <li class="tag" :data-type="type.id">{{ type.name }}</li>
-      <li class="tag">{{ level }}</li>
+      <li class="tag" :data-type="application.type" v-text="applicationTypeName"/>
+      <li class="tag">{{ application.level }}</li>
     </ul>
   </div>
 </template>
@@ -10,8 +10,13 @@
 <script>
 export default {
   props: {
-    level: String,
-    type: Object
+    application: Object
+  },
+
+  computed: {
+    applicationTypeName () {
+      return this.$attrs.types[this.application.type].name
+    }
   }
 }
 </script>

src/components/Application/PhpVersion.vue

@@ -6,11 +6,7 @@
 </template>
 
 <script>
-import ApiClient from '@/api-client.js'
-
 export default {
-  mixins: [ApiClient],
-
   props: {
     application: Object
   },
@@ -21,7 +17,7 @@ export default {
         return null
       }
 
-      return this.getVersion('php', this.getEnvironment(this.application.id, 'prod'))
+      return this.application.environments['prod'].versions['php']
     }
   }
 }

src/components/Environment/EnvironmentCards.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="mb-6">
     <div class="flex flex-wrap -mx-4 -mb-6">
-      <div v-for="(environment, key) in environments" class="w-full md:w-1/2 xl:w-1/3 px-4 mb-6" :key="key">
+      <div v-for="(environment, key) in application.environments" class="w-full md:w-1/2 xl:w-1/3 px-4 mb-6" :key="key">
         <div class="border border-gray-400 rounded overflow-hidden shadow">
            <div class="bg-white">
             <div class="border-t-4 border-teal p-3">
@@ -51,7 +51,7 @@
 <script>
 export default {
   props: {
-    environments: Object,
+    application: Object,
     id: String
   }
 }