Create Vehicle page layout

pages/vehicles/_id.spec.js

@@ -2,6 +2,8 @@ import { mount, createLocalVue } from "@vue/test-utils";
 import Vuex from "vuex";
 import Vehicle from "./_id";
 import mockVehicles from "@/test/fake-vehicles.json";
+import mockPeople from "@/test/fake-people.json";
+import mockFilms from "@/test/fake-films.json";
 
 let $route = {
   path: "/vehicles",
@@ -39,8 +41,11 @@ describe("Vehicle page", () => {
       localVue,
       store,
       computed: {
-        vehicle: () => mockVehicles[0]
-      }
+        vehicle: () => mockVehicles[0],
+        pilot: () => mockPeople[0],
+        film: () => mockFilms[0]
+      },
+      stubs: ["nuxt-link"]
     });
     expect(wrapper.exists()).toBe(true);
   });
@@ -64,8 +69,11 @@ describe("Vehicle page", () => {
       localVue,
       store,
       computed: {
-        vehicle: () => mockVehicles[0]
-      }
+        vehicle: () => mockVehicles[0],
+        pilot: () => jest.fn(),
+        film: () => jest.fn()
+      },
+      stubs: ["nuxt-link"]
     });
 
     await wrapper.vm.$options.asyncData({ store, params: $route.params });

pages/vehicles/_id.vue

@@ -1,6 +1,40 @@
 <template>
-  <div>
-    {{ vehicle }}
+  <div
+    class="py-4 flex flex-col lg:flex-row items-center lg:items-start justify-center"
+  >
+    <article
+      class="mb-4 inline-flex flex-col justify-between bg-gray-100 prose prose-sm rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl"
+    >
+      <header class="p-4 rounded-t-md">
+        <h1>
+          {{ vehicle.name + " (" + vehicle.vehicle_class + ")" }}
+        </h1>
+        <h2 class="text-gray-700 mt-0" v-if="pilot">
+          piloted by
+          <nuxt-link
+            :to="`/people/${pilot.id}`"
+            class="inline-block rounded text-md font-semibold bg-gray-400 py-2 px-4 border-b-4 border-gray-500"
+          >
+            {{ pilot.name }}
+          </nuxt-link>
+        </h2>
+      </header>
+
+      <section class="px-4 pb-4 infos">
+        <p>{{ vehicle.description }}</p>
+
+        <h3>
+          Appears in
+        </h3>
+        <nuxt-link
+          v-if="film"
+          :to="`/films/${film.id}`"
+          class="inline-block rounded text-md font-semibold bg-gray-400 py-2 px-4 border-b-4 border-gray-500"
+        >
+          {{ film.title }}
+        </nuxt-link>
+      </section>
+    </article>
   </div>
 </template>
 
@@ -25,6 +59,12 @@ export default {
       await store.dispatch("vehicles/getVehicle", params.id);
   },
   computed: {
+    pilot: function() {
+      return this.$store.getters["vehicles/getPilot"];
+    },
+    film: function() {
+      return this.$store.getters["vehicles/getFilm"];
+    },
     ...mapGetters({
       vehicle: "vehicles/vehicle"
     })
@@ -32,4 +72,9 @@ export default {
 };
 </script>
 
-<style></style>
+<style lang="css" scoped>
+article header {
+  background-color: #85ffbd;
+  background-image: linear-gradient(45deg, #85ffbd 0%, #fffb7d 100%);
+}
+</style>