Add a proper task list to the Story Detail view

src/App.vue

@@ -28,7 +28,7 @@ export default {
   font-family: 'Roboto', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  color: #2c3e50;
+  color: #333;
 
   h1 {
     font-size: 3rem;

src/components/TaskListEntry.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="task-list-entry">
+    <p class="thin"><strong>{{ task.id }}</strong></p>
+    <p class="wide">{{ task.title }}</p>
+    <p>
+      <a href="" v-if="task.assignee_id">{{ assignee.full_name }}</a>
+      <span v-if="!task.assignee_id">Not assigned</span>
+    </p>
+    <p class="thin">{{ branch.name }}</p>
+    <p class="thin">{{ task.status }}</p>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  name: 'TaskListEntry',
+  data: function () {
+    return {
+      assignee: {},
+      branch: {}
+    }
+  },
+  props: ['task'],
+  created: function () {
+    if (this.task.assignee_id) {
+      this.getAssignee(this.task.assignee_id)
+    }
+    this.getBranch(this.task.branch_id)
+  },
+  methods: {
+    async getAssignee (assigneeId) {
+      const baseUrl = 'http://localhost:8080/v1'
+      const { data: assignee } = await axios.get(`${baseUrl}/users/${assigneeId}`)
+      this.assignee = assignee
+    },
+    async getBranch (branchId) {
+      const baseUrl = 'http://localhost:8080/v1'
+      const { data: branch } = await axios.get(`${baseUrl}/branches/${branchId}`)
+      this.branch = branch
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.task-list-entry {
+  display: flex;
+  padding: 10px;
+  font-size: 0.9rem;
+  line-height: 1em;
+
+  p {
+    flex: 1 1 20%;
+
+    &.wide {
+      flex-basis: 50%;
+    }
+    &.thin {
+      flex-basis: 10%;
+    }
+  }
+}
+</style>

src/views/StoryDetail.vue

@@ -19,7 +19,12 @@
     <div class="cards">
       <div class="card column-lg">
         <h2>Tasks</h2>
-        <p>{{tasks}}</p>
+        <div class="project-tasks" v-for="project in projects" :key="project.id">
+          <h3><a href="">{{ project.name }}</a></h3>
+          <div class="task-list">
+            <TaskListEntry v-for="task in tasksForProject(project.id)" :key="task.id" :task="task"/>
+          </div>
+        </div>
       </div>
       <div class="column-md">
         <div class="card">
@@ -30,17 +35,22 @@
     </div>
     <h2>Events Timeline and Comments</h2>
     <div class="events">
-      {{ events }}
+      <div class="timeline-event" v-for="event in events" :key="event.id">
+        {{ event.event_type }}
+      </div>
     </div>
-      {{ projects }}
   </div>
 </template>
 
 <script>
+import TaskListEntry from '@/components/TaskListEntry.vue'
 import axios from 'axios'
 
 export default {
   name: 'StoryDetailView',
+  components: {
+    TaskListEntry
+  },
   data () {
     return {
       creator: {},
@@ -75,6 +85,9 @@ export default {
       this.projects = (await Promise.all(requests)).map(response => response.data)
       const { data: events } = await axios.get(`${baseUrl}/events?story_id=${storyId}`)
       this.events = events
+    },
+    tasksForProject (projectId) {
+      return this.tasks.filter(task => task.project_id === projectId)
     }
   }
 }
@@ -134,7 +147,7 @@ h2 {
   padding: 30px;
   border-radius: 5px;
   background-color: #fff;
-  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
 }
 
 .tag {
@@ -144,4 +157,18 @@ h2 {
   color: #f7f6f4;
   border-radius: 20px;
 }
+
+.task-list {
+  .task-list-entry {
+    border-top: solid 1px #ddd;
+
+    &:nth-of-type(even) {
+      background-color: #f7f6f4;
+    }
+
+    &:last-of-type {
+      border-bottom: solid 1px #ddd;
+    }
+  }
+}
 </style>