Add a basic Story detail view

src/App.vue

@@ -31,14 +31,13 @@ export default {
   color: #2c3e50;
 
   h1 {
-    padding-top: 20px;
     font-size: 3rem;
     font-weight: 300;
   }
 }
 
 #page {
-  margin: calc(60px + 10px) 5% 20px calc(10vw + 5%);
+  margin: calc(60px + 20px) 5% 20px calc(10vw + 5%);
 }
 
 body {
@@ -46,4 +45,13 @@ body {
   background-color: #f7f6f4;
   color: #333;
 }
+
+a {
+  color: #c43422;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
 </style>

src/components/Sidebar.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="nav">
-    <router-link to="/">Home</router-link>
+    <router-link to="/" exact>Home</router-link>
     <router-link to="/about">About</router-link>
     <div class="divider"></div>
     <router-link to="/story">Stories</router-link>
@@ -39,7 +39,7 @@ export default {
     text-decoration: none;
     text-align: left;
 
-    &.router-link-exact-active {
+    &.router-link-active {
       color: #f7f6f4;
       background-color: #a03427;
     }

src/router/index.js

@@ -23,6 +23,10 @@ const routes = [
     name: 'Stories',
     component: () => import(/* webpackChunkName: "story" */ '../views/StoryList.vue')
   },
+  {
+    path: '/story/:id',
+    component: () => import(/* webpackChunkName: "story-detail" */ '../views/StoryDetail.vue')
+  },
   {
     path: '/board',
     name: 'Boards',

src/views/StoryDetail.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="story-detail">
+    <div class="header-row">
+      <h1>{{ story.title }}</h1>
+      <div class="metadata">
+        <p class="metadata-row">
+          <strong>Created by</strong>&emsp;
+          <a href="/">{{ creator.full_name }}</a>
+        </p>
+        <p class="metadata-row">
+          <strong>Last updated</strong>&emsp;
+          <span>{{ story.updated_at }}</span>
+        </p>
+      </div>
+    </div>
+    <div class="description">
+      {{ story.description }}
+    </div>
+    <div class="cards">
+      <div class="card column-lg">
+        <h2>Tasks</h2>
+        <p>{{tasks}}</p>
+      </div>
+      <div class="column-md">
+        <div class="card">
+          <h2>Tags</h2>
+          <span class="tag" v-for="tag in story.tags" :key="tag">{{ tag }}</span>
+        </div>
+      </div>
+    </div>
+    <h2>Events Timeline and Comments</h2>
+    <div class="events">
+      {{ events }}
+    </div>
+      {{ projects }}
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  name: 'StoryDetailView',
+  data: function () {
+    return {
+      creator: {},
+      events: [],
+      story: {},
+      tasks: [],
+      projects: []
+    }
+  },
+  created: function () {
+    this.getStory(this.$route.params.id)
+  },
+  methods: {
+    getStory: function (storyId) {
+      const vm = this
+      const baseUrl = 'http://localhost:8080/v1'
+      axios.get(`${baseUrl}/stories/${storyId}`)
+        .then(function (response) {
+          vm.story = response.data
+          axios.get(`${baseUrl}/users/${vm.story.creator_id}`)
+            .then(function (response) {
+              vm.creator = response.data
+            })
+        })
+      axios.get(`${baseUrl}/stories/${storyId}/tasks`)
+        .then(function (response) {
+          const tasks = response.data
+          vm.tasks = tasks
+
+          const requests = []
+          tasks.reduce(function (acc, task) {
+            if (!acc.includes(task.project_id)) {
+              acc.push(task.project_id)
+              requests.push(axios.get(`${baseUrl}/projects/${task.project_id}`))
+            }
+            return acc
+          }, [])
+          Promise.all(requests).then(responses => {
+            vm.projects = responses.map(response => response.data)
+          })
+        })
+      axios.get(`${baseUrl}/events?story_id=${storyId}`)
+        .then(function (response) {
+          vm.events = response.data
+        })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.header-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 20px 0 40px 0;
+
+  h1 {
+    margin: 0;
+    padding: 0;
+  }
+
+  .metadata {
+    color: #959492;
+
+    p {
+      margin: 5px 0;
+    }
+
+    .metadata-row {
+      display: flex;
+      justify-content: space-between;
+
+      strong {
+        margin-right: 10px;
+        font-weight: 300;
+      }
+    }
+  }
+}
+
+h2 {
+  margin-top: 0;
+  font-weight: 300;
+}
+
+.cards {
+  display: flex;
+  margin: 20px 0;
+}
+
+.column-lg {
+  flex: 2 0 0;
+}
+
+.column-md {
+  flex: 1 0 0;
+}
+
+.card {
+  margin: 10px;
+  padding: 30px;
+  border-radius: 5px;
+  background-color: #fff;
+  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
+}
+
+.tag {
+  padding: 6px 12px;
+  margin: 0 5px;
+  background-color: #f0ad4e;
+  color: #f7f6f4;
+  border-radius: 20px;
+}
+</style>

src/views/StoryList.vue

@@ -3,7 +3,7 @@
     <h1>Stories</h1>
     <div class="story" v-for="story in stories" :key="story.id">
       <h3>
-        <a :href="'/story/' + story.id">{{ story.id }}. {{ story.title }}</a>
+        <router-link :to="'/story/' + story.id">{{ story.id }}. {{ story.title }}</router-link>
       </h3>
       <span class="tag" v-for="tag in story.tags" :key="tag">{{ tag }}</span>
     </div>
@@ -44,11 +44,6 @@ export default {
     background-color: #fff;
   }
 
-  a {
-    color: #c43422;
-    text-decoration: none;
-  }
-
   h3 {
     margin-top: 0;
     font-size: 1.25em;