Moves boards into their own state

This commit is contained in:
Michael Weimann
2018-12-11 15:42:25 +01:00
parent 643d70e6f0
commit 6b2873ab28
7 changed files with 142 additions and 97 deletions

View File

@@ -62,7 +62,7 @@ export default {
}) })
}, },
created: function() { created: function() {
this.$store.dispatch('nav/loadBoards') this.$store.dispatch('boards/loadBoards')
} }
} }

View File

@@ -28,7 +28,7 @@
<div class="board-list-avatars-cell">Members</div> <div class="board-list-avatars-cell">Members</div>
<div class="board-list-actions-cell" /> <div class="board-list-actions-cell" />
</div> </div>
<BoardItem v-for="board in boards" :key="board.id" :board="board" /> <BoardItem v-for="board in filteredBoards" :key="board.id" :board="board" />
</div> </div>
</template> </template>
@@ -49,13 +49,13 @@ export default {
} }
}, },
computed: { computed: {
...mapGetters('nav', [ ...mapGetters('boards', [
'boards' 'filteredBoards'
]) ])
}, },
watch: { watch: {
navFilter: function(value) { navFilter: function(value) {
this.$store.commit('nav/setFilter', value) this.$store.commit('boards/setFilter', value)
} }
} }
} }

View File

@@ -23,7 +23,7 @@
import Vue from 'vue' import Vue from 'vue'
import Router from 'vue-router' import Router from 'vue-router'
import { generateUrl } from 'nextcloud-server/dist/router' import { generateUrl } from 'nextcloud-server/dist/router'
import { BOARD_FILTERS } from './store/modules/nav' import { BOARD_FILTERS } from './store/modules/boards'
import Boards from './components/Boards' import Boards from './components/Boards'
import Board from './components/Board' import Board from './components/Board'

View File

@@ -22,6 +22,7 @@
import Vue from 'vue' import Vue from 'vue'
import Vuex from 'vuex' import Vuex from 'vuex'
import boards from './modules/boards'
import nav from './modules/nav' import nav from './modules/nav'
import sidebar from './modules/sidebar' import sidebar from './modules/sidebar'
@@ -31,6 +32,7 @@ const debug = process.env.NODE_ENV !== 'production'
export default new Vuex.Store({ export default new Vuex.Store({
modules: { modules: {
boards,
nav, nav,
sidebar sidebar
}, },

128
src/store/modules/boards.js Normal file
View File

@@ -0,0 +1,128 @@
/*
* @copyright Copyright (c) 2018 Michael Weimann <mail@michael-weimann.eu>
*
* @author Michael Weimann <mail@michael-weimann.eu>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
import axios from 'nextcloud-axios'
const boardActions = [
{
action: () => {
},
icon: 'icon-edit',
text: t('deck', 'Edit board')
},
{
action: () => {
},
icon: 'icon-archive',
text: t('deck', 'Archive board')
},
{
action: () => {
},
icon: 'icon-delete',
text: t('deck', 'Delete board')
},
{
action: () => {
},
icon: 'icon-settings',
text: t('deck', 'Board details')
}
]
export const BOARD_FILTERS = {
ALL: '',
ARCHIVED: 'archived',
SHARED: 'shared'
}
/**
* Maps an API board to a menu item.
* @param board
* @returns {{id: *, classes: Array, bullet: string, text: *, router: {name: string, params: {id: *}}, utils: {actions: *[]}}}
*/
export const mapBoardToItem = board => {
return {
id: board.id,
classes: [],
bullet: `#${board.color}`,
text: board.title,
owner: board.owner,
router: {
name: 'board',
params: { id: board.id }
},
utils: {
actions: boardActions
}
}
}
const state = {
boards: [],
loading: false,
filter: ''
}
const getters = {
filteredBoards: state => {
// filters the boards depending on the active filter
const boards = state.boards.filter(board => {
return state.filter === BOARD_FILTERS.ALL
|| (state.filter === BOARD_FILTERS.ARCHIVED && board.archived === true)
|| (state.filter === BOARD_FILTERS.SHARED && board.shared === 1)
})
return boards.map(mapBoardToItem)
}
}
const actions = {
toggle({ commit }) {
commit('toggle')
},
loadBoards({ commit }) {
axios.get('/apps/deck/boards')
.then((response) => {
commit('setBoards', response.data)
})
}
}
const mutations = {
toggle(state) {
state.hidden = !state.hidden
},
setBoards(state, boards) {
state.boards = boards
},
setFilter(state, filter) {
state.filter = filter
}
}
export default {
namespaced: true,
state,
getters,
actions,
mutations
}

View File

@@ -1,5 +1,5 @@
/* /*
* @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net> * @copyright Copyright (c) 2018 Michael Weimann <mail@michael-weimann.eu>
* *
* @author Michael Weimann <mail@michael-weimann.eu> * @author Michael Weimann <mail@michael-weimann.eu>
* *
@@ -20,32 +20,8 @@
* *
*/ */
// eslint
import { translate as t } from 'nextcloud-server/dist/l10n' import { translate as t } from 'nextcloud-server/dist/l10n'
import axios from 'nextcloud-axios' import { mapBoardToItem } from './boards'
/**
* Maps an API board to a menu item.
* @param board
* @returns {{id: *, classes: Array, bullet: string, text: *, router: {name: string, params: {id: *}}, utils: {actions: *[]}}}
*/
const mapBoardToItem = board => {
return {
id: board.id,
classes: [],
bullet: `#${board.color}`,
text: board.title,
owner: board.owner,
router: {
name: 'board',
params: { id: board.id }
},
utils: {
actions: boardActions
}
}
}
let defaultCategories = [ let defaultCategories = [
{ {
@@ -77,33 +53,6 @@ let defaultCategories = [
} }
] ]
const boardActions = [
{
action: () => {
},
icon: 'icon-edit',
text: t('deck', 'Edit board')
},
{
action: () => {
},
icon: 'icon-archive',
text: t('deck', 'Archive board')
},
{
action: () => {
},
icon: 'icon-delete',
text: t('deck', 'Delete board')
},
{
action: () => {
},
icon: 'icon-settings',
text: t('deck', 'Board details')
}
]
const addButton = { const addButton = {
icon: 'icon-add', icon: 'icon-add',
text: t('deck', 'Create new board'), text: t('deck', 'Create new board'),
@@ -111,53 +60,25 @@ const addButton = {
} }
} }
// initial state
const state = { const state = {
hidden: false, hidden: false,
boards: [], loading: false
loading: false,
filter: ''
} }
export const BOARD_FILTERS = {
ALL: '',
ARCHIVED: 'archived',
SHARED: 'shared'
}
// getters
const getters = { const getters = {
menu: state => { menu: (state, getters, rootState) => {
return { return {
loading: state.loading, loading: state.loading,
items: defaultCategories items: defaultCategories
.concat(state.boards.map(mapBoardToItem)) .concat(rootState.boards.boards.map(mapBoardToItem))
.concat([addButton]) .concat([addButton])
} }
},
boards: state => {
// filters the boards depending on the active filter
const boards = state.boards.filter(board => {
return state.filter === BOARD_FILTERS.ALL
|| (state.filter === BOARD_FILTERS.ARCHIVED && board.archived === true)
|| (state.filter === BOARD_FILTERS.SHARED && board.shared === 1)
})
return boards.map(mapBoardToItem)
} }
} }
// actions
const actions = { const actions = {
toggle({ commit }) { toggle({ commit }) {
commit('toggle') commit('toggle')
},
loadBoards({ commit }) {
axios.get('/apps/deck/boards')
.then((response) => {
commit('setBoards', response.data)
})
} }
} }
@@ -165,12 +86,6 @@ const actions = {
const mutations = { const mutations = {
toggle(state) { toggle(state) {
state.hidden = !state.hidden state.hidden = !state.hidden
},
setBoards(state, boards) {
state.boards = boards
},
setFilter(state, filter) {
state.filter = filter
} }
} }

View File

@@ -1,5 +1,5 @@
/* /*
* @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net> * @copyright Copyright (c) 2018 Michael Weimann <mail@michael-weimann.eu>
* *
* @author Michael Weimann <mail@michael-weimann.eu> * @author Michael Weimann <mail@michael-weimann.eu>
* *