From ab4c056f549454dfa1ff0b402a8163be58b668a2 Mon Sep 17 00:00:00 2001
From: Adam Coldrick <adam@sotk.co.uk>
Date: Tue, 12 May 2020 15:59:01 +0100
Subject: [PATCH] Add a basic project detail view

---
 src/components/ProjectTabDetails.vue | 27 +++++++++
 src/components/ProjectTabStories.vue | 56 +++++++++++++++++++
 src/router/index.js                  |  4 ++
 src/views/ProjectDetail.vue          | 83 ++++++++++++++++++++++++++++
 4 files changed, 170 insertions(+)
 create mode 100644 src/components/ProjectTabDetails.vue
 create mode 100644 src/components/ProjectTabStories.vue
 create mode 100644 src/views/ProjectDetail.vue

diff --git a/src/components/ProjectTabDetails.vue b/src/components/ProjectTabDetails.vue
new file mode 100644
index 0000000..55b59e1
--- /dev/null
+++ b/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>
diff --git a/src/components/ProjectTabStories.vue b/src/components/ProjectTabStories.vue
new file mode 100644
index 0000000..8aa52c5
--- /dev/null
+++ b/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>
diff --git a/src/router/index.js b/src/router/index.js
index 4429d17..9429006 100644
--- a/src/router/index.js
+++ b/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',
diff --git a/src/views/ProjectDetail.vue b/src/views/ProjectDetail.vue
new file mode 100644
index 0000000..0a7aba4
--- /dev/null
+++ b/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>