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

Add label handling to the main store

Browse Source 
Signed-off-by: Michael Weimann <mail@michael-weimann.eu>
This commit is contained in:
Michael Weimann
2019-03-24 16:49:03 +01:00
committed by Julius Härtl
parent ec01ab4f42
commit 96ec6b812c
4 changed files with 67 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/board/BoardSidebar.vue
View File

@@ -22,39 +22,38 @@
<template> <template>
<div class="sidebar"> <div class="sidebar">
<div class="sidebar-header"> <div v-if="board">
<h3>{{ board.title }}</h3> <div class="sidebar-header">
</div> <h3>{{ board.title }}</h3>
</div>
<ul class="tab-headers"> <ul class="tab-headers">
<li v-for="tab in tabs" :class="{ 'selected': tab.isSelected }" :key="tab.name"> <li v-for="tab in tabs" :class="{ 'selected': tab.isSelected }" :key="tab.name">
<a @click="setSelectedHeader(tab.name)">{{ tab.name }}</a> <a @click="setSelectedHeader(tab.name)">{{ tab.name }}</a>
</li> </li>
</ul> </ul>
<div class="tabsContainer"> <div class="tabsContainer">
<div class="tab"> <div class="tab">
<div v-if="activeTab === 'Sharing'"> <div v-if="activeTab === 'Sharing'">
<SharingTabSidebard :board="board"></SharingTabSidebard> <SharingTabSidebard :board="board"></SharingTabSidebard>
</div> </div>
<div <div
v-if="activeTab === 'Tags'" v-if="activeTab === 'Tags'"
id="board-detail-labels" id="board-detail-labels">
> <TagsTabSidebard :board="board" />
<TagsTabSidebard :board="board" :labels="labels" /> </div>
</div>
<div <div
v-if="activeTab === 'Deleted items'" v-if="activeTab === 'Deleted items'">
> <DeletedTabSidebard :board="board" />
<DeletedTabSidebard :board="board" /> </div>
</div>
<div <div
v-if="activeTab === 'Timeline'" v-if="activeTab === 'Timeline'">
> <TimelineTabSidebard :board="board" />
<TimelineTabSidebard :board="board" /> </div>
</div> </div>
</div> </div>
</div> </div>

42
src/components/board/TagsTabSidebard.vue
View File

@@ -1,19 +1,17 @@
<template> <template>
<div> <div>
{{labelByCurrentBoard}}
<ul class="labels"> <ul class="labels">
<li v-for="label in labels" :key="label.id"> <li v-for="label in labels" :key="label.id">
<template v-if="editingLabelId === label.id"> <template v-if="editingLabelId === label.id">
<input :value="label.title"><input :value="label.color"> <input :value="label.title"><input :value="label.color">
<button @click="updateLabel()">save</button><button @click="editingLabelId = null">cancel</button> <button @click="updateLabel()">save</button><button @click="editingLabelId = null">cancel</button>
</template> </template>
<template v-else> <template v-else>
<span :style="{ backgroundColor: `#${label.color}`, color: `#white` }" class="label-title"> <span :style="{ backgroundColor: `#${label.color}`, color: `#white` }" class="label-title">
<span v-if="label.title">{{ label.title }}</span><i v-if="!label.title"><br></i> <span v-if="label.title">{{ label.title }}</span><i v-if="!label.title"><br></i>
</span> </span>
<button @click="editingLabelId=label.id">edit</button><button @click="deleteLabel(label.id)">delete</button> <button @click="editingLabelId=label.id">edit</button><button @click="deleteLabel(label.id)">delete</button>
</template> </template>
</li> </li>
</ul> </ul>
</div> </div>
@@ -21,37 +19,27 @@
<script> <script>
import { mapGetters } from 'vuex'
export default { export default {
name: 'TagsTabSidebard', name: 'TagsTabSidebard',
components: {
},
data() { data() {
return { return {
editingLabelId: null, editingLabelId: null
} }
}, },
props: { computed: {
labels: { ...mapGetters({
type: Object, labels: 'currentBoardLabels'
default: undefined })
}
}, },
methods: { methods: {
deleteLabel(id) { deleteLabel(id) {
this.$store.dispatch('removeLabel', id) this.$store.dispatch('removeLabelFromCurrentBoard', id)
}, },
updateLabel(id, name) { updateLabel(id, name) {
} }
}, }
computed: {
labelByCurrentBoard() {
return (id) => this.$store.getters.labelByCurrentBoard()
}
},
} }
</script> </script>

43
src/store/label.js
View File

@@ -1,43 +0,0 @@
import Vue from 'vue'
export default {
state: {
labels: []
},
getters: {
labelByCurrentBoard() {
console.log(state)
return state.currentBoard.labels;
},
labelById: state => (id) => {
//return state.cards.find((card) => card.id === id)
}
},
mutations: {
addLabel(state, label) {
},
updateLabel(state, label) {
},
removeLabel(state, id) {
console.log(this.state.labels);
this.state.labels = this.state.labels.filter((l) => {
return id !== l.id
})
console.log(this.state.labels);
},
},
actions: {
removeLabel({ commit }, id) {
commit('removeLabel', id)
},
}
}

23
src/store/main.js
View File

@@ -27,7 +27,6 @@ import { boardToMenuItem } from './../helpers/boardToMenuItem'
import { BoardApi } from './../services/BoardApi' import { BoardApi } from './../services/BoardApi'
import stack from './stack' import stack from './stack'
import card from './card' import card from './card'
import label from './label'
Vue.use(Vuex) Vue.use(Vuex)
@@ -43,8 +42,7 @@ export const BOARD_FILTERS = {
export default new Vuex.Store({ export default new Vuex.Store({
modules: { modules: {
stack, stack,
card, card
label
}, },
strict: debug, strict: debug,
state: { state: {
@@ -82,6 +80,9 @@ export default new Vuex.Store({
|| (state.boardFilter === BOARD_FILTERS.SHARED && board.shared === 1) || (state.boardFilter === BOARD_FILTERS.SHARED && board.shared === 1)
}) })
return boards.map(boardToMenuItem) return boards.map(boardToMenuItem)
},
currentBoardLabels: state => {
return state.currentBoard.labels
} }
}, },
mutations: { mutations: {
@@ -134,6 +135,17 @@ export default new Vuex.Store({
}, },
setCurrentBoard(state, board) { setCurrentBoard(state, board) {
state.currentBoard = board state.currentBoard = board
},
// label mutators
removeLabelFromCurrentBoard(state, labelId) {
const removeIndex = state.currentBoard.labels.findIndex((l) => {
return labelId !== l.id
})
if (removeIndex > -1) {
state.currentBoard.labels.splice(removeIndex, 1)
}
} }
}, },
actions: { actions: {
@@ -210,6 +222,11 @@ export default new Vuex.Store({
}, },
setCurrentBoard({ commit }, board) { setCurrentBoard({ commit }, board) {
commit('setCurrentBoard', board) commit('setCurrentBoard', board)
},
// label actions
removeLabelFromCurrentBoard({ commit }, labelId) {
commit('removeLabelFromCurrentBoard', labelId);
} }
} }
}) })