implement vuex store

Author: jamesjieye

front-end/src/components/PageHeader.vue

@@ -1,17 +1,26 @@
 <template>
   <div class="page-header d-flex align-content-center">
-    <div class="logo">
+    <div class="logo" @click="goHome()">
       <font-awesome-icon icon="home" class="home-icon" />
-      <img class="logo" src="/static/images/logo.png">
+      <img src="/static/images/logo.png">
     </div>
     <div class="boards-menu-toggle">
       <div class="dropdown">
         <button class="btn dropdown-toggle" type="button" id="boardsMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
           Boards
         </button>
         <div class="dropdown-menu" aria-labelledby="boardsMenu">
-          <h6 class="dropdown-header">Personal Boards</h6>
-          <button class="dropdown-item" type="button">vuejs.spring-boot.mysql</button>
+          <div v-show="!hasBoards" class="dropdown-item">No boards</div>
+          <div v-show="hasBoards">
+            <h6 class="dropdown-header" v-show="personalBoards.length">Personal Boards</h6>
+            <button v-for="board in personalBoards" v-bind:key="board.id" @click="openBoard(board)"
+                    class="dropdown-item" type="button">{{ board.name }}</button>
+            <div v-for="team in teamBoards" v-bind:key="'t' + team.id">
+              <h6 class="dropdown-header">{{ team.name }}</h6>
+              <button v-for="board in team.boards" v-bind:key="board.id" @click="openBoard(board)"
+                      class="dropdown-item" type="button">{{ board.name }}</button>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -24,7 +33,7 @@
     <div class="profile-menu-toggle">
       <div class="dropdown">
         <button class="btn dropdown-toggle" type="button" id="profileMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-          James J. Ye
+          {{ user.name }}
         </button>
         <div class="dropdown-menu" aria-labelledby="profileMenu">
           <button class="dropdown-item" type="button">Profile</button>
@@ -37,9 +46,29 @@
 
 <script>
 import 'bootstrap/dist/js/bootstrap.min'
+import { mapGetters } from 'vuex'
 
 export default {
-  name: 'PageHeader'
+  name: 'PageHeader',
+  computed: {
+    ...mapGetters([
+      'user',
+      'hasBoards',
+      'personalBoards',
+      'teamBoards'
+    ])
+  },
+  created () {
+    this.$store.dispatch('getMyData')
+  },
+  methods: {
+    goHome () {
+      this.$router.push({name: 'home'})
+    },
+    openBoard (board) {
+      this.$router.push({name: 'board', params: { boardId: board.id }})
+    }
+  }
 }
 </script>
 
@@ -53,17 +82,18 @@ export default {
     height: 25px;
     width: 115px;
     margin-top: 2px;
+    cursor: pointer;
 
     .home-icon {
-      font-size: 25px;
+      font-size: 20px;
       vertical-align: middle;
     }
 
     img {
       margin-left: 5px;
+      margin-top: 6px;
       width: 80px;
-      height: 20px;
-      vertical-align: bottom;
+      // vertical-align: bottom;
     }
   }
 
@@ -96,6 +126,7 @@ export default {
       height: calc(1.8125rem + 5px);
       font-size: 1rem;
       border: 1px solid #eee;
+      border-radius: 5px;
     }
 
     input:focus {

front-end/src/router.js

@@ -3,6 +3,7 @@ import Router from 'vue-router'
 import HomePage from '@/views/HomePage'
 import LoginPage from '@/views/LoginPage'
 import RegisterPage from '@/views/RegisterPage'
+import BoardPage from '@/views/BoardPage'
 
 Vue.use(Router)
 
@@ -21,5 +22,9 @@ export default new Router({
     path: '/register',
     name: 'register',
     component: RegisterPage
+  }, {
+    path: '/board/:boardId',
+    name: 'board',
+    component: BoardPage
   }]
 })

front-end/src/services/boards.js

@@ -0,0 +1,18 @@
+import axios from 'axios'
+import errorParser from '@/utils/error-parser'
+
+export default {
+  /**
+   * Create a new board
+   * @param {*} detail the board detail
+   */
+  create (detail) {
+    return new Promise((resolve, reject) => {
+      axios.post('/boards', detail).then(({data}) => {
+        resolve(data)
+      }).catch((error) => {
+        reject(errorParser.parse(error))
+      })
+    })
+  }
+}

front-end/src/services/me.js

@@ -0,0 +1,17 @@
+import axios from 'axios'
+import errorParser from '@/utils/error-parser'
+
+export default {
+  /**
+   * Fetch current user's name, boards, and teams
+   */
+  getMyData () {
+    return new Promise((resolve, reject) => {
+      axios.get('/me').then(({data}) => {
+        resolve(data)
+      }).catch((error) => {
+        reject(errorParser.parse(error))
+      })
+    })
+  }
+}

front-end/src/services/teams.js

@@ -0,0 +1,18 @@
+import axios from 'axios'
+import errorParser from '@/utils/error-parser'
+
+export default {
+  /**
+   * Create a team
+   * @param {*} detail the detail of the team
+   */
+  create (detail) {
+    return new Promise((resolve, reject) => {
+      axios.post('/teams', detail).then(({data}) => {
+        resolve(data)
+      }).catch((error) => {
+        reject(errorParser.parse(error))
+      })
+    })
+  }
+}

front-end/src/store.js

@@ -0,0 +1,15 @@
+import meService from '@/services/me'
+
+export const getMyData = ({ commit }) => {
+  meService.getMyData().then(data => {
+    commit('updateMyData', data)
+  })
+}
+
+export const addTeam = ({commit}, team) => {
+  commit('addTeam', team)
+}
+
+export const addBoard = ({commit}, board) => {
+  commit('addBoard', board)
+}

front-end/src/store/actions.js

@@ -0,0 +1,43 @@
+// export const user = state => state.user
+export const user = state => { return {name: 'James J. Ye'} }
+
+export const hasBoards = state => {
+  // return state.boards.length > 0
+  return true
+}
+
+export const personalBoards = state => {
+  // return state.boards.filter(board => board.teamId === 0)
+  return [{
+    id: 1,
+    name: 'vuejs.spring-boot.mysql',
+    description: 'An implementation of TaskAgile application with Vue.js, Spring Boot, and MySQL'
+  }]
+}
+
+export const teamBoards = state => {
+  // const teams = []
+  //
+  // state.teams.forEach(team => {
+  //   teams.push({
+  //     id: team.id,
+  //     name: team.name,
+  //     boards: state.boards.filter(board => board.teamId === team.id)
+  //   })
+  // })
+  //
+  // return teams
+  return [{
+    id: 1,
+    name: 'Sales & Marketing',
+    boards: [{
+      id: 2,
+      name: '2018 Planning',
+      description: '2018 sales & marketing planning'
+    }, {
+      id: 3,
+      name: 'Ongoing Campaigns',
+      description: '2018 ongoing marketing campaigns'
+    }]
+  }]
+}

front-end/src/store/getters.js

@@ -0,0 +1,26 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import * as getters from './getters'
+import * as actions from './actions'
+import mutations from './mutations'
+import createLogger from 'vuex/dist/logger'
+
+Vue.use(Vuex)
+
+const state = {
+  user: {
+    name: null
+  },
+  teams: [/* {id, name} */],
+  boards: [/* {id, name, description, teamId} */]
+}
+
+export default new Vuex.Store({
+  state,
+  getters,
+  actions,
+  mutations,
+  plugins: process.env.NODE_ENV !== 'production'
+    ? [createLogger()]
+    : []
+})

front-end/src/store/index.js

@@ -0,0 +1,13 @@
+export default {
+  updateMyData (state, data) {
+    state.user.name = data.user.name
+    state.teams = data.teams
+    state.boards = data.boards
+  },
+  addTeam (state, team) {
+    state.teams.push(team)
+  },
+  addBoard (state, board) {
+    state.boards.push(board)
+  }
+}