ahtlon/deck
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

State refactoring, adds a sidebar example, extends the breadcrumb navigation, introduces an API class

Browse Source
This commit is contained in:
Michael Weimann
2018-12-11 19:46:36 +01:00
parent 2649309e57
commit 6a3643384c
11 changed files with 336 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/App.vue
View File

@@ -22,16 +22,13 @@
<template>
<div
id="content"
v-bind:class="{ 'nav-hidden': navHidden, 'sidebar-hidden': sidebarHidden }">
<AppNavigation :menu="menu" />
<div id="content" v-bind:class="{ 'nav-hidden': !navShown, 'sidebar-hidden': !sidebarShown }">
<DeckAppNav />
<div id="app-content">
<Controls />
<router-view />
</div>
<div id="app-sidebar">
<component v-bind:is="sidebarComponent" />
<BoardSidebar v-if="currentBoard" :board="currentBoard" />
</div>
</div>
@@ -39,30 +36,55 @@
<script>
import { AppNavigation } from 'nextcloud-vue'
import Controls from './components/Controls'
import { mapState, mapGetters } from 'vuex'
import Sidebar from './components/Sidebar'
import { mapState } from 'vuex'
import BoardSidebar from './components/board/BoardSidebar'
import DeckAppNav from './components/DeckAppNav'
import { BoardApi } from './services/BoardApi'
const boardApi = new BoardApi()
export default {
name: 'App',
components: {
AppNavigation,
Controls,
Sidebar
BoardSidebar,
DeckAppNav
},
data: function() {
return {
addButton: {
icon: 'icon-add',
classes: [],
text: t('deck', 'Create new board'),
edit: {
text: t('deck', 'new board'),
action: () => {
},
reset: () => {
}
},
action: () => {
this.addButton.classes.push('editing')
}
}
}
},
computed: {
...mapGetters('nav', [
'menu'
]),
...mapState({
navHidden: state => state.nav.hidden,
sidebarHidden: state => state.sidebar.hidden,
sidebarComponent: state => state.sidebar.component
navShown: state => state.navShown,
sidebarShown: state => state.sidebarShown,
currentBoard: state => state.currentBoard
})
},
provide: function() {
return {
boardApi: boardApi
}
},
created: function() {
this.$store.dispatch('boards/loadBoards')
boardApi.loadBoards()
.then((boards) => {
this.$store.dispatch('setBoards', boards)
})
}
}
@@ -76,7 +98,7 @@ export default {
}
#app-sidebar {
transition: width 100ms ease;
transition: max-width 100ms ease;
}
&.nav-hidden {

13
src/components/Controls.vue
View File

@@ -31,6 +31,10 @@
</router-link>
</div>
</div>
<div v-if="board" class="crumb svg">
<a href="#todo">{{ board.title }}</a>
<span style="display: inline;" class="icon-shared" />
</div>
</div>
</template>
@@ -38,9 +42,16 @@
<script>
export default {
name: 'Controls',
props: {
board: {
type: Object,
required: false,
default: null
}
},
methods: {
toggleNav() {
this.$store.dispatch('nav/toggle')
this.$store.dispatch('toggleNav')
}
}
}

102
src/components/DeckAppNav.vue Normal file
View File

@@ -0,0 +1,102 @@
<!--
* @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/>.
*
-->
<template>
<AppNavigation :menu="menu" />
</template>
<script>
import { AppNavigation } from 'nextcloud-vue'
import { translate as t } from 'nextcloud-server/dist/l10n'
import { boardToMenuItem } from './../helpers/boardToMenuItem'
const defaultCategories = [
{
id: 'deck-boards',
classes: [],
icon: 'icon-deck',
text: t('deck', 'All boards'),
router: {
name: 'boards'
}
},
{
id: 'deck-boards-archived',
classes: [],
icon: 'icon-archive',
text: t('deck', 'Archived boards'),
router: {
name: 'boards.archived'
}
},
{
id: 'deck-boards-shared',
classes: [],
icon: 'icon-shared',
text: t('deck', 'Shared boards'),
router: {
name: 'boards.shared'
}
}
]
const addButton = {
icon: 'icon-add',
classes: [],
text: t('deck', 'Create new board'),
edit: {
text: t('deck', 'new board'),
action: () => {
},
reset: () => {
}
},
action: () => {
addButton.classes.push('editing')
}
}
export default {
name: 'DeckAppNav',
components: {
AppNavigation
},
data: function() {
return {
loading: false,
addButton: addButton
}
},
computed: {
menu: function() {
return {
loading: this.loading,
items: defaultCategories
.concat(this.$store.getters.boards.map(boardToMenuItem))
.concat([this.addButton])
}
}
}
}
</script>

48
src/components/Sidebar.vue → src/components/board/Board.vue
View File

@@ -21,12 +21,56 @@
-->
<template>
<div>sidebar</div>
<div>
<Controls :board="board" />
<div v-if="board">
board {{ board.title }}<br>
<button @click="toggleSidebar">toggle sidebar</button>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex'
import Controls from '../Controls'
export default {
name: 'Sidebar'
name: 'Board',
components: {
Controls
},
inject: [
'boardApi'
],
props: {
id: {
type: Number,
default: null
}
},
data: function() {
return {
loading: true
}
},
computed: {
...mapState({
board: state => state.currentBoard
})
},
created: function() {
this.boardApi.loadById(this.id)
.then((board) => {
this.$store.dispatch('setCurrentBoard', board)
this.loading = false
})
},
methods: {
toggleSidebar: function() {
this.$store.dispatch('toggleSidebar')
}
}
}
</script>

14
src/components/Board.vue → src/components/board/BoardSidebar.vue
View File

@@ -21,16 +21,20 @@
-->
<template>
<div>Board goes here, id: {{ id }}</div>
<div>
Board sidebar {{ board.title }}
</div>
</template>
<script>
export default {
name: 'Board',
name: 'BoardSidebar',
props: {
id: {
type: Number,
default: null
board: {
type: Object,
default: function() {
return {}
}
}
}
}

27
src/components/Boards.vue → src/components/boards/Boards.vue
View File

@@ -21,26 +21,31 @@
-->
<template>
<div class="board-list">
<div class="board-list-row board-list-header-row">
<div class="board-list-bullet-cell"><div class="board-list-bullet" /></div>
<div class="board-list-title-cell">Title</div>
<div class="board-list-avatars-cell">Members</div>
<div class="board-list-actions-cell" />
<div>
<Controls />
<div class="board-list">
<div class="board-list-row board-list-header-row">
<div class="board-list-bullet-cell"><div class="board-list-bullet" /></div>
<div class="board-list-title-cell">Title</div>
<div class="board-list-avatars-cell">Members</div>
<div class="board-list-actions-cell" />
</div>
<BoardItem v-for="board in filteredBoards" :key="board.id" :board="board" />
</div>
<BoardItem v-for="board in filteredBoards" :key="board.id" :board="board" />
</div>
</template>
<script>
import BoardItem from './boards/BoardItem'
import BoardItem from './BoardItem'
import Controls from '../Controls'
import { mapGetters } from 'vuex'
export default {
name: 'Main',
components: {
BoardItem
BoardItem,
Controls
},
props: {
navFilter: {
@@ -49,13 +54,13 @@ export default {
}
},
computed: {
...mapGetters('boards', [
...mapGetters([
'filteredBoards'
])
},
watch: {
navFilter: function(value) {
this.$store.commit('boards/setFilter', value)
this.$store.commit('setBoardFilter', value)
}
}
}

60
src/store/modules/boards.js → src/helpers/boardToMenuItem.js
View File

@@ -20,8 +20,6 @@
*
*/
import axios from 'nextcloud-axios'
const boardActions = [
{
action: () => {
@@ -49,18 +47,12 @@ const boardActions = [
}
]
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 => {
export const boardToMenuItem = board => {
return {
id: board.id,
classes: [],
@@ -76,53 +68,3 @@ export const mapBoardToItem = board => {
}
}
}
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
}

12
src/router.js
View File

@@ -23,9 +23,9 @@
import Vue from 'vue'
import Router from 'vue-router'
import { generateUrl } from 'nextcloud-server/dist/router'
import { BOARD_FILTERS } from './store/modules/boards'
import Boards from './components/Boards'
import Board from './components/Board'
import { BOARD_FILTERS } from './store/main'
import Boards from './components/boards/Boards'
import Board from './components/board/Board'
Vue.use(Router)
@@ -66,7 +66,11 @@ export default new Router({
path: '/boards/:id',
name: 'board',
component: Board,
props: true
props: (route) => {
return {
id: parseInt(route.params.id, 10)
}
}
}
]
})

59
src/store/modules/sidebar.js → src/services/BoardApi.js
View File

@@ -20,33 +20,46 @@
*
*/
// initial state
const state = {
hidden: true,
component: 'Sidebar'
}
import axios from 'nextcloud-axios'
// getters
const getters = {}
/**
* This class handles all the api communication with the Deck backend.
*/
export class BoardApi {
// actions
const actions = {
toggle({ commit }) {
commit('toggle')
url(url) {
url = `/apps/deck${url}`
return OC.generateUrl(url)
}
}
// mutations
const mutations = {
toggle(state) {
state.hidden = !state.hidden
loadBoards() {
return axios.get(this.url('/boards'))
.then(
(response) => {
return Promise.resolve(response.data)
},
(err) => {
return Promise.reject(err)
}
)
.catch((err) => {
return Promise.reject(err)
})
}
loadById(id) {
return axios.get(this.url(`/boards/${id}`))
.then(
(response) => {
return Promise.resolve(response.data)
},
(err) => {
return Promise.reject(err)
}
)
.catch((err) => {
return Promise.reject(err)
})
}
}
export default {
namespaced: true,
state,
getters,
actions,
mutations
}

74
src/store/main.js
View File

@@ -22,22 +22,74 @@
import Vue from 'vue'
import Vuex from 'vuex'
import boards from './modules/boards'
import nav from './modules/nav'
import sidebar from './modules/sidebar'
import { boardToMenuItem } from './../helpers/boardToMenuItem'
Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production'
export const BOARD_FILTERS = {
ALL: '',
ARCHIVED: 'archived',
SHARED: 'shared'
}
export default new Vuex.Store({
modules: {
boards,
nav,
sidebar
},
modules: {},
strict: debug,
state: {},
mutations: {},
actions: {}
state: {
navShown: true,
sidebarShown: false,
currentBoard: null,
boards: [],
boardFilter: BOARD_FILTERS.ALL
},
getters: {
boards: state => {
return state.boards
},
filteredBoards: state => {
// filters the boards depending on the active filter
const boards = state.boards.filter(board => {
return state.boardFilter === BOARD_FILTERS.ALL
|| (state.boardFilter === BOARD_FILTERS.ARCHIVED && board.archived === true)
|| (state.boardFilter === BOARD_FILTERS.SHARED && board.shared === 1)
})
return boards.map(boardToMenuItem)
}
},
mutations: {
toggleNav(state) {
state.navShown = !state.navShown
},
toggleSidebar(state) {
state.sidebarShown = !state.sidebarShown
},
setBoards(state, boards) {
state.boards = boards
},
setBoardFilter(state, filter) {
state.boardFilter = filter
},
setCurrentBoard(state, board) {
state.currentBoard = board
}
},
actions: {
setBoards({ commit }, boards) {
commit('setBoards', boards)
},
setBoardFilter({ commmit }, filter) {
commmit('setBoardFilter', filter)
},
toggleNav({ commit }) {
commit('toggleNav')
},
toggleSidebar({ commit }) {
commit('toggleSidebar')
},
setCurrentBoard({ commit }, board) {
commit('setCurrentBoard', board)
}
}
})

113
src/store/modules/nav.js
View File

@@ -1,113 +0,0 @@
/*
* @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 { translate as t } from 'nextcloud-server/dist/l10n'
import { mapBoardToItem } from './boards'
import store from '../main'
let defaultCategories = [
{
id: 'deck-boards',
classes: [],
icon: 'icon-deck',
text: t('deck', 'All boards'),
router: {
name: 'boards'
}
},
{
id: 'deck-boards-archived',
classes: [],
icon: 'icon-archive',
text: t('deck', 'Archived boards'),
router: {
name: 'boards.archived'
}
},
{
id: 'deck-boards-shared',
classes: [],
icon: 'icon-shared',
text: t('deck', 'Shared boards'),
router: {
name: 'boards.shared'
}
}
]
const state = {
hidden: false,
loading: false,
addButton: {
icon: 'icon-add',
classes: [],
text: t('deck', 'Create new board'),
edit: {
text: t('deck', 'new board'),
action: () => {
},
reset: () => {
}
},
action: () => {
store.dispatch('nav/startAddBoard')
}
}
}
const getters = {
menu: (state, getters, rootState) => {
return {
loading: state.loading,
items: defaultCategories
.concat(rootState.boards.boards.map(mapBoardToItem))
.concat([state.addButton])
}
}
}
const actions = {
toggle({ commit }) {
commit('toggle')
},
startAddBoard({ commit }) {
commit('startAddBoard')
}
}
// mutations
const mutations = {
toggle(state) {
state.hidden = !state.hidden
},
startAddBoard(state) {
state.addButton.classes.push('editing')
}
}
export default {
namespaced: true,
state,
getters,
actions,
mutations
}