Skip to content

Commit dfdff7c

Browse files
jamesjieyejamesjieye
committed
implement vuex store
1 parent 68cb300 commit dfdff7c

File tree

14 files changed

+295
-75
lines changed

14 files changed

+295
-75
lines changed

‎front-end/src/components/PageHeader.vue

Lines changed: 40 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,26 @@
11
<template>
22
<div class="page-header d-flex align-content-center">
3-
<div class="logo">
3+
<div class="logo" @click="goHome()">
44
<font-awesome-icon icon="home" class="home-icon" />
5-
<img class="logo" src="/static/images/logo.png">
5+
<img src="/static/images/logo.png">
66
</div>
77
<div class="boards-menu-toggle">
88
<div class="dropdown">
99
<button class="btn dropdown-toggle" type="button" id="boardsMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
1010
Boards
1111
</button>
1212
<div class="dropdown-menu" aria-labelledby="boardsMenu">
13-
<h6 class="dropdown-header">Personal Boards</h6>
14-
<button class="dropdown-item" type="button">vuejs.spring-boot.mysql</button>
13+
<div v-show="!hasBoards" class="dropdown-item">No boards</div>
14+
<div v-show="hasBoards">
15+
<h6 class="dropdown-header" v-show="personalBoards.length">Personal Boards</h6>
16+
<button v-for="board in personalBoards" v-bind:key="board.id" @click="openBoard(board)"
17+
class="dropdown-item" type="button">{{ board.name }}</button>
18+
<div v-for="team in teamBoards" v-bind:key="'t' + team.id">
19+
<h6 class="dropdown-header">{{ team.name }}</h6>
20+
<button v-for="board in team.boards" v-bind:key="board.id" @click="openBoard(board)"
21+
class="dropdown-item" type="button">{{ board.name }}</button>
22+
</div>
23+
</div>
1524
</div>
1625
</div>
1726
</div>
@@ -24,7 +33,7 @@
2433
<div class="profile-menu-toggle">
2534
<div class="dropdown">
2635
<button class="btn dropdown-toggle" type="button" id="profileMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
27-
James J. Ye
36+
{{ user.name }}
2837
</button>
2938
<div class="dropdown-menu" aria-labelledby="profileMenu">
3039
<button class="dropdown-item" type="button">Profile</button>
@@ -37,9 +46,29 @@
3746

3847
<script>
3948
import 'bootstrap/dist/js/bootstrap.min'
49+
import { mapGetters } from 'vuex'
4050
4151
export default {
42-
name: 'PageHeader'
52+
name: 'PageHeader',
53+
computed: {
54+
...mapGetters([
55+
'user',
56+
'hasBoards',
57+
'personalBoards',
58+
'teamBoards'
59+
])
60+
},
61+
created () {
62+
this.$store.dispatch('getMyData')
63+
},
64+
methods: {
65+
goHome () {
66+
this.$router.push({name: 'home'})
67+
},
68+
openBoard (board) {
69+
this.$router.push({name: 'board', params: { boardId: board.id }})
70+
}
71+
}
4372
}
4473
</script>
4574

@@ -53,17 +82,18 @@ export default {
5382
height: 25px;
5483
width: 115px;
5584
margin-top: 2px;
85+
cursor: pointer;
5686
5787
.home-icon {
58-
font-size: 25px;
88+
font-size: 20px;
5989
vertical-align: middle;
6090
}
6191
6292
img {
6393
margin-left: 5px;
94+
margin-top: 6px;
6495
width: 80px;
65-
height: 20px;
66-
vertical-align: bottom;
96+
// vertical-align: bottom;
6797
}
6898
}
6999
@@ -96,6 +126,7 @@ export default {
96126
height: calc(1.8125rem + 5px);
97127
font-size: 1rem;
98128
border: 1px solid #eee;
129+
border-radius: 5px;
99130
}
100131
101132
input:focus {

‎front-end/src/router.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import Router from 'vue-router'
33
import HomePage from '@/views/HomePage'
44
import LoginPage from '@/views/LoginPage'
55
import RegisterPage from '@/views/RegisterPage'
6+
import BoardPage from '@/views/BoardPage'
67

78
Vue.use(Router)
89

@@ -21,5 +22,9 @@ export default new Router({
2122
path: '/register',
2223
name: 'register',
2324
component: RegisterPage
25+
}, {
26+
path: '/board/:boardId',
27+
name: 'board',
28+
component: BoardPage
2429
}]
2530
})

‎front-end/src/services/boards.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import axios from 'axios'
2+
import errorParser from '@/utils/error-parser'
3+
4+
export default {
5+
/**
6+
* Create a new board
7+
* @param {*} detail the board detail
8+
*/
9+
create (detail) {
10+
return new Promise((resolve, reject) => {
11+
axios.post('/boards', detail).then(({data}) => {
12+
resolve(data)
13+
}).catch((error) => {
14+
reject(errorParser.parse(error))
15+
})
16+
})
17+
}
18+
}

‎front-end/src/services/me.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import axios from 'axios'
2+
import errorParser from '@/utils/error-parser'
3+
4+
export default {
5+
/**
6+
* Fetch current user's name, boards, and teams
7+
*/
8+
getMyData () {
9+
return new Promise((resolve, reject) => {
10+
axios.get('/me').then(({data}) => {
11+
resolve(data)
12+
}).catch((error) => {
13+
reject(errorParser.parse(error))
14+
})
15+
})
16+
}
17+
}

‎front-end/src/services/teams.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import axios from 'axios'
2+
import errorParser from '@/utils/error-parser'
3+
4+
export default {
5+
/**
6+
* Create a team
7+
* @param {*} detail the detail of the team
8+
*/
9+
create (detail) {
10+
return new Promise((resolve, reject) => {
11+
axios.post('/teams', detail).then(({data}) => {
12+
resolve(data)
13+
}).catch((error) => {
14+
reject(errorParser.parse(error))
15+
})
16+
})
17+
}
18+
}

‎front-end/src/store.js

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎front-end/src/store/actions.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import meService from '@/services/me'
2+
3+
export const getMyData = ({ commit }) => {
4+
meService.getMyData().then(data => {
5+
commit('updateMyData', data)
6+
})
7+
}
8+
9+
export const addTeam = ({commit}, team) => {
10+
commit('addTeam', team)
11+
}
12+
13+
export const addBoard = ({commit}, board) => {
14+
commit('addBoard', board)
15+
}

‎front-end/src/store/getters.js

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
// export const user = state => state.user
2+
export const user = state => { return {name: 'James J. Ye'} }
3+
4+
export const hasBoards = state => {
5+
// return state.boards.length > 0
6+
return true
7+
}
8+
9+
export const personalBoards = state => {
10+
// return state.boards.filter(board => board.teamId === 0)
11+
return [{
12+
id: 1,
13+
name: 'vuejs.spring-boot.mysql',
14+
description: 'An implementation of TaskAgile application with Vue.js, Spring Boot, and MySQL'
15+
}]
16+
}
17+
18+
export const teamBoards = state => {
19+
// const teams = []
20+
//
21+
// state.teams.forEach(team => {
22+
// teams.push({
23+
// id: team.id,
24+
// name: team.name,
25+
// boards: state.boards.filter(board => board.teamId === team.id)
26+
// })
27+
// })
28+
//
29+
// return teams
30+
return [{
31+
id: 1,
32+
name: 'Sales & Marketing',
33+
boards: [{
34+
id: 2,
35+
name: '2018 Planning',
36+
description: '2018 sales & marketing planning'
37+
}, {
38+
id: 3,
39+
name: 'Ongoing Campaigns',
40+
description: '2018 ongoing marketing campaigns'
41+
}]
42+
}]
43+
}

‎front-end/src/store/index.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import Vue from 'vue'
2+
import Vuex from 'vuex'
3+
import * as getters from './getters'
4+
import * as actions from './actions'
5+
import mutations from './mutations'
6+
import createLogger from 'vuex/dist/logger'
7+
8+
Vue.use(Vuex)
9+
10+
const state = {
11+
user: {
12+
name: null
13+
},
14+
teams: [/* {id, name} */],
15+
boards: [/* {id, name, description, teamId} */]
16+
}
17+
18+
export default new Vuex.Store({
19+
state,
20+
getters,
21+
actions,
22+
mutations,
23+
plugins: process.env.NODE_ENV !== 'production'
24+
? [createLogger()]
25+
: []
26+
})

‎front-end/src/store/mutations.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
export default {
2+
updateMyData (state, data) {
3+
state.user.name = data.user.name
4+
state.teams = data.teams
5+
state.boards = data.boards
6+
},
7+
addTeam (state, team) {
8+
state.teams.push(team)
9+
},
10+
addBoard (state, board) {
11+
state.boards.push(board)
12+
}
13+
}

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy