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

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

@@ -1,19 +1,17 @@
<template>
<div>
{{labelByCurrentBoard}}
<ul class="labels">
<li v-for="label in labels" :key="label.id">
<template v-if="editingLabelId === label.id">
<input :value="label.title"><input :value="label.color">
<button @click="updateLabel()">save</button><button @click="editingLabelId = null">cancel</button>
<input :value="label.title"><input :value="label.color">
<button @click="updateLabel()">save</button><button @click="editingLabelId = null">cancel</button>
</template>
<template v-else>
<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>
<button @click="editingLabelId=label.id">edit</button><button @click="deleteLabel(label.id)">delete</button>
<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>
<button @click="editingLabelId=label.id">edit</button><button @click="deleteLabel(label.id)">delete</button>
</template>
</li>
</ul>
</div>
@@ -21,37 +19,27 @@
<script>
import { mapGetters } from 'vuex'
export default {
name: 'TagsTabSidebard',
components: {
},
data() {
return {
editingLabelId: null,
}
},
props: {
labels: {
type: Object,
default: undefined
}
},
methods: {
deleteLabel(id) {
this.$store.dispatch('removeLabel', id)
},
updateLabel(id, name) {
editingLabelId: null
}
},
computed: {
labelByCurrentBoard() {
return (id) => this.$store.getters.labelByCurrentBoard()
}
...mapGetters({
labels: 'currentBoardLabels'
})
},
methods: {
deleteLabel(id) {
this.$store.dispatch('removeLabelFromCurrentBoard', id)
},
updateLabel(id, name) {
}
}
}
</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 stack from './stack'
import card from './card'
import label from './label'
Vue.use(Vuex)
@@ -43,8 +42,7 @@ export const BOARD_FILTERS = {
export default new Vuex.Store({
modules: {
stack,
card,
label
card
},
strict: debug,
state: {
@@ -82,6 +80,9 @@ export default new Vuex.Store({
|| (state.boardFilter === BOARD_FILTERS.SHARED && board.shared === 1)
})
return boards.map(boardToMenuItem)
},
currentBoardLabels: state => {
return state.currentBoard.labels
}
},
mutations: {
@@ -134,6 +135,17 @@ export default new Vuex.Store({
},
setCurrentBoard(state, 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: {
@@ -210,6 +222,11 @@ export default new Vuex.Store({
},
setCurrentBoard({ commit }, board) {
commit('setCurrentBoard', board)
},
// label actions
removeLabelFromCurrentBoard({ commit }, labelId) {
commit('removeLabelFromCurrentBoard', labelId);
}
}
})