Add a basic project detail view

src/components/ProjectTabDetails.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="project-details">
+    <MarkdownContent class-name="description" v-if="project.description" :content="project.description" />
+  </div>
+</template>
+
+<script>
+import MarkdownContent from '@/components/MarkdownContent.vue'
+
+export default {
+  name: 'ProjectTabDetails',
+  props: ['project'],
+  components: {
+    MarkdownContent
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.description {
+  margin: 0 10px;
+
+  h1, h2, h3, h4 {
+    font-weight: 300;
+  }
+}
+</style>

src/components/ProjectTabStories.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="project-story-list">
+    <StoryFilters @filter-change="getStories" />
+    <Spinner v-if="loading" :fullScreen="true" />
+    <StoryListItem v-for="story in stories" :key="story.id" :story="story" />
+    <div v-if="!stories.length">
+      No matching stories found.
+    </div>
+  </div>
+</template>
+
+<script>
+import story from '@/api/story.js'
+
+import Spinner from '@/components/Spinner.vue'
+import StoryFilters from '@/components/StoryFilters.vue'
+import StoryListItem from '@/components/StoryListItem.vue'
+
+export default {
+  name: 'ProjectTabStories',
+  props: ['project'],
+  components: {
+    Spinner,
+    StoryFilters,
+    StoryListItem
+  },
+  data () {
+    return {
+      loading: false,
+      stories: []
+    }
+  },
+  mounted () {
+    this.getStories(this.$route.query)
+  },
+  methods: {
+    async getStories (filters = {}) {
+      this.$router.push({ query: filters })
+      const params = {
+        ...filters,
+        project_id: this.project.id,
+        limit: 10
+      }
+
+      this.stories = []
+      this.loading = true
+      this.stories = await story.browse(params)
+      this.loading = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/router/index.js

@@ -42,6 +42,10 @@ const routes = [
     name: 'Projects',
     component: () => import(/* webpackChunkName: "project" */ '../views/ProjectList.vue')
   },
+  {
+    path: '/project/:id',
+    component: () => import(/* webpackChunkName: "project-detail" */ '../views/ProjectDetail.vue')
+  },
   {
     path: '/project-group',
     name: 'Project Groups',

src/views/ProjectDetail.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="project-detail">
+    <div class="header-row">
+      <h1>{{ project.name }}</h1>
+    </div>
+    <ul class="tabs">
+      <li class="tab" :class="{ active: currentTab === tab }" v-for="tab in tabs" :key="tab.name" @click="currentTab = tab">
+        {{ tab.name }}
+      </li>
+    </ul>
+    <component :is="currentTab.component" :project="project"></component>
+  </div>
+</template>
+
+<script>
+import project from '@/api/project.js'
+
+import ProjectTabDetails from '@/components/ProjectTabDetails.vue'
+import ProjectTabStories from '@/components/ProjectTabStories.vue'
+
+export default {
+  name: 'ProjectDetailView',
+  components: {
+    ProjectTabDetails,
+    ProjectTabStories
+  },
+  data () {
+    return {
+      currentTab: {},
+      project: {},
+      tabs: [
+        {
+          name: 'Details',
+          component: ProjectTabDetails
+        },
+        {
+          name: 'Stories involving this Project',
+          component: ProjectTabStories
+        }
+      ]
+    }
+  },
+  created () {
+    this.currentTab = this.tabs[0]
+    this.getProject(this.$route.params.id)
+  },
+  methods: {
+    async getProject (projectId) {
+      this.project = await project.get(projectId)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.project-detail {
+  .tabs {
+    list-style: none;
+    display: flex;
+    //margin: 20px 15% 10px 15%;
+    padding: 0;
+    border-bottom: solid 1px #ddd;
+    text-align: center;
+
+    .tab {
+      flex: 0 1 auto;
+      padding: 20px;
+      font-size: 1.2em;
+      cursor: pointer;
+      transition: 100ms ease-in-out all;
+
+      &:hover {
+        box-shadow: 0 -1px 0 inset #c43422;
+      }
+
+      &.active {
+        color: #c43422;
+        box-shadow: 0 -2px 0 inset #c43422;
+      }
+    }
+  }
+}
+</style>