Flesh out the Board list view

src/api/board.js

@@ -0,0 +1,18 @@
+import Axios from 'axios'
+
+import base from './base.js'
+
+const BOARDS_URL = `${base.baseUrl}/boards`
+
+export default {
+  async get (boardId) {
+    const { data: board } = await Axios.get(`${BOARDS_URL}/${boardId}`)
+    return board
+  },
+
+  async browse (params) {
+    const query = base.buildQueryString(params)
+    const { data: boards } = await Axios.get(`${BOARDS_URL}?${query}`)
+    return boards
+  }
+}

src/components/BoardListItem.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="board">
+    <div class="flex-row">
+      <h3>
+        <router-link :to="'/board/' + board.id">
+          {{ board.id }}. {{ board.title }}
+        </router-link>
+      </h3>
+      <div class="metadata">
+        <p>
+          <span class="text-muted">Created</span>
+          <DateInline :date="board.created_at" />
+        </p>
+        <p>
+          <span class="text-muted">Last Updated</span>
+          <DateInline v-if="board.updated_at" :date="board.updated_at" />
+          <DateInline v-else :date="board.created_at" />
+        </p>
+      </div>
+    </div>
+    <div class="flex-row">
+      <div class="metadata">
+        <div class="text-muted">{{ board.description }}</div>
+      </div>
+      <div class="metadata">
+        <div class="badge" :class="laneBadgeClass(lane)" v-for="lane in board.lanes" :key="lane.list_id">
+          {{ lane.worklist.items.length }}
+          <span class="text-muted">
+            {{ lane.worklist.title }}
+          </span>
+        </div>
+        <div class="badge" v-if="board.lanes.length == 0">
+          No lanes
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import DateInline from '@/components/DateInline.vue'
+
+export default {
+  name: 'BoardListItem',
+  components: {
+    DateInline
+  },
+  props: {
+    narrow: {
+      type: Boolean,
+      default: false
+    },
+    board: {
+      type: Object,
+      default () {
+        return {}
+      }
+    }
+  },
+  methods: {
+    laneBadgeClass (lane) {
+      return {
+        populated: lane.worklist.items.length > 0
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.board {
+  padding: 20px;
+  border-top: solid 1px $grey-100;
+
+  .flex-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+
+    h3 {
+      margin: 0;
+      font-size: 1.25em;
+    }
+  }
+
+  .metadata {
+    display: flex;
+    align-items: center;
+
+    .text-muted {
+      color: $grey-600;
+    }
+
+    p {
+      margin: 0.5em 1em 0 1em;
+    }
+  }
+
+  .details-wide {
+    display: flex;
+    align-items: center;
+  }
+
+  .badge {
+    display: inline-block;
+    text-align: center;
+    padding: 6px 12px;
+    margin: 0 5px;
+    border-radius: 20px;
+    min-width: 80px;
+    background-color: $grey-100;
+    color: $grey-900;
+
+    .text-muted {
+      color: $grey-700;
+    }
+
+    &.populated {
+      background-color: $yellow-100;
+      color: $yellow-900;
+
+      .text-muted {
+        color: $yellow-800;
+      }
+    }
+  }
+}
+</style>

src/views/BoardList.vue

@@ -1,5 +1,59 @@
 <template>
-  <div class="about">
-    <h1>Board list here</h1>
+  <div class="board-list">
+    <h1><FontAwesomeIcon icon="columns" fixed-width />Boards</h1>
+    <Spinner v-if="loading" :fullScreen="true" />
+    <BoardListItem v-for="board in boards" :key="board.id" :board="board" />
   </div>
 </template>
+
+<script>
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faColumns } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
+import board from '@/api/board.js'
+
+import BoardListItem from '@/components/BoardListItem.vue'
+import Spinner from '@/components/Spinner.vue'
+
+library.add(faColumns)
+
+export default {
+  name: 'BoardListView',
+  components: {
+    BoardListItem,
+    FontAwesomeIcon,
+    Spinner
+  },
+  data () {
+    return {
+      boards: [],
+      loading: false
+    }
+  },
+  created () {
+    this.getBoards(this.$route.query)
+  },
+  methods: {
+    async getBoards (filters = {}) {
+      this.$router.push({ query: filters })
+      const params = {
+        ...filters,
+        limit: 10
+      }
+
+      this.boards = []
+      this.loading = true
+      this.boards = await board.browse(params)
+      this.loading = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.svg-inline--fa {
+  margin-right: 30px;
+  color: $grey-400;
+}
+</style>