Clean up Project detail view

src/components/ProjectTabDetails.vue

@@ -1,17 +1,70 @@
 <template>
   <div class="project-details">
-    <MarkdownContent class-name="description" v-if="project.description" :content="project.description" />
+    <div class="cards">
+      <MarkdownContent class-name="description column-lg" v-if="project.description" :content="project.description" />
+      <div class="column-md">
+        <div class="card">
+          <h2><FontAwesomeIcon icon="code-branch" fixed-width />Branches</h2>
+          <span v-if="!branches.length">This project has no branches.</span>
+          <p v-for="branch in branches" :key="branch.id">
+            {{ branch.name }}
+          </p>
+        </div>
+        <div class="card">
+          <h2><FontAwesomeIcon icon="cubes" fixed-width />Project Groups</h2>
+          <span v-if="!projectGroups.length">This project isn't part of any groups.</span>
+          <p v-for="group in projectGroups" :key="group.id">
+            {{ group.title }}
+          </p>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faCodeBranch, faCubes } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
+import branch from '@/api/branch.js'
+import projectGroup from '@/api/project_group.js'
+
 import MarkdownContent from '@/components/MarkdownContent.vue'
 
+library.add(faCodeBranch)
+library.add(faCubes)
+
 export default {
   name: 'ProjectTabDetails',
   props: ['project'],
   components: {
+    FontAwesomeIcon,
     MarkdownContent
+  },
+  data () {
+    return {
+      branches: [],
+      projectGroups: []
+    }
+  },
+  created () {
+    this.getBranches()
+    this.getProjectGroups()
+  },
+  methods: {
+    async getBranches () {
+      const params = {
+        project_id: this.$route.params.id
+      }
+      this.branches = await branch.browse(params)
+    },
+    async getProjectGroups () {
+      const params = {
+        project_id: this.$route.params.id
+      }
+      this.projectGroups = await projectGroup.browse(params)
+    }
   }
 }
 </script>
@@ -24,4 +77,39 @@ export default {
     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: 0 2px 2px rgba(0, 0, 0, 0.12);
+
+  h2 {
+    margin-top: 0;
+    font-weight: 300;
+  }
+
+  .svg-inline--fa {
+    color: #777;
+    margin-right: 10px;
+  }
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+}
 </style>

src/views/ProjectDetail.vue

@@ -4,7 +4,7 @@
       <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">
+      <li class="tab" :class="{ active: currentTab === tab }" v-for="tab in tabs" :key="tab.name" @click="switchToTab(tab)">
         {{ tab.name }}
       </li>
     </ul>
@@ -41,12 +41,24 @@ export default {
     }
   },
   created () {
-    this.currentTab = this.tabs[0]
     this.getProject(this.$route.params.id)
   },
   methods: {
     async getProject (projectId) {
       this.project = await project.get(projectId)
+      if (Object.keys(this.$route.query).length !== 0) {
+        this.currentTab = this.tabs[1]
+      } else {
+        this.currentTab = this.tabs[0]
+      }
+    },
+    switchToTab (tab) {
+      if (tab !== this.tabs[1]) {
+        // If we're navigating away from the Stories tab, clear
+        // the query string to keep the URL intuitive when shared.
+        this.$router.replace({ query: {} })
+      }
+      this.currentTab = tab
     }
   }
 }