first try

Signed-off-by: Jakob Röhrl <jakob.roehrl@web.de>

src/components/board/Board.vue

@@ -103,6 +103,8 @@ export default {
 					this.$store.dispatch('setCurrentBoard', board)
 					this.$store.dispatch('loadStacks', board)
 					this.loading = false
+					console.log(board);
+					this.$store.state.labels = board.labels;
 				})
 		},
 		onDropStack({ removedIndex, addedIndex }) {

src/components/board/BoardSidebar.vue

@@ -35,39 +35,26 @@
 		<div class="tabsContainer">
 			<div class="tab">
 				<div v-if="activeTab === 'Sharing'">
-
+					<SharingTabSidebard :board="board"></SharingTabSidebard>
-					<multiselect v-model="value" :options="board.sharees" />
-
-					<ul
-						id="shareWithList"
-						class="shareWithList"
-					>
-						<li>
-							<avatar :user="board.owner.uid" />
-							<span class="has-tooltip username">
-								{{ board.owner.displayname }}
-							</span>
-						</li>
-						<li v-for="acl in board.acl" :key="acl.participant.uid">
-							<avatar :user="acl.participant.uid" />
-							<span class="has-tooltip username">
-								{{ acl.participant.displayname }}
-							</span>
-						</li>
-					</ul>
 				</div>
 
 				<div
 					v-if="activeTab === 'Tags'"
 					id="board-detail-labels"
 				>
-					<ul class="labels">
+					<TagsTabSidebard :board="board" :labels="labels" />
-						<li v-for="label in board.labels" :key="label.id">
+				</div>
-							<span v-if="!label.edit" :style="{ backgroundColor: `#${label.color}`, color: `#${label.color || '000'}` }" class="label-title">
+
-								<span v-if="label.title">{{ label.title }}</span><i v-if="!label.title"><br></i>
+				<div
-							</span>
+					v-if="activeTab === 'Deleted items'"
-						</li>
+				>
-					</ul>
+					<DeletedTabSidebard :board="board" />
+				</div>
+
+				<div
+					v-if="activeTab === 'Timeline'"
+				>
+					<TimelineTabSidebard :board="board" />
 				</div>
 			</div>
 		</div>
@@ -77,12 +64,20 @@
 <script>
 import { Avatar, Multiselect } from 'nextcloud-vue'
 import { mapState } from 'vuex'
+import SharingTabSidebard from './SharingTabSidebard'
+import TagsTabSidebard from './TagsTabSidebard'
+import DeletedTabSidebard from './DeletedTabSidebard'
+import TimelineTabSidebard from './TimelineTabSidebard'
 
 export default {
 	name: 'BoardSidebar',
 	components: {
 		Avatar,
-		Multiselect
+		Multiselect,
+		SharingTabSidebard,
+		TagsTabSidebard,
+		DeletedTabSidebard,
+		TimelineTabSidebard
 	},
 	props: {
 	},
@@ -111,7 +106,8 @@ export default {
 	},
 	computed: {
 		...mapState({
-			board: state => state.currentBoard
+			board: state => state.currentBoard,
+			labels: state => state.labels
 		})
 	},
 	methods: {

src/components/board/DeletedTabSidebard.vue

@@ -0,0 +1,28 @@
+<template>
+		<div>
+			deleted
+		</div>
+</template>
+
+<script>
+
+export default {
+	name: 'DeletedTabSidebard',
+	components: {
+		
+	},
+	props: {
+	},
+	data() {
+		return {
+		}
+	},
+	props: {
+		board: {
+			type: Object,
+			default: undefined
+		}
+	}
+		
+}
+</script>

src/components/board/SharingTabSidebard.vue

@@ -0,0 +1,50 @@
+<template>
+		<div>
+			<multiselect :options="board.sharees" />
+
+			<ul
+				id="shareWithList"
+				class="shareWithList"
+			>
+				<li>
+					<avatar :user="board.owner.uid" />
+					<span class="has-tooltip username">
+						{{ board.owner.displayname }}
+					</span>
+				</li>
+				<li v-for="acl in board.acl" :key="acl.participant.uid">
+					<avatar :user="acl.participant.uid" />
+					<span class="has-tooltip username">
+						{{ acl.participant.displayname }}
+					</span>
+				</li>
+			</ul>
+		</div>
+</template>
+
+<script>
+import { Avatar, Multiselect } from 'nextcloud-vue'
+
+export default {
+	name: 'SharingTabSidebard',
+	components: {
+		Avatar,
+		Multiselect,
+	},
+	props: {
+	},
+	data() {
+		return {
+		}
+	},
+	props: {
+		board: {
+			type: Object,
+			default: undefined
+		}
+	}
+	
+	
+	
+}
+</script>

src/components/board/TagsTabSidebard.vue

@@ -0,0 +1,57 @@
+<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>
+				</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>
+				</template>
+				
+			</li>
+		</ul>
+	</div>
+</template>
+
+<script>
+
+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) {
+			
+		}
+	},
+	computed: {
+		labelByCurrentBoard() {
+			return (id) => this.$store.getters.labelByCurrentBoard()
+		}
+	},
+	
+		
+}
+</script>

src/components/board/TimelineTabSidebard.vue

@@ -0,0 +1,28 @@
+<template>
+		<div>
+			timeline
+		</div>
+</template>
+
+<script>
+
+export default {
+	name: 'TimelineTabSidebard',
+	components: {
+		
+	},
+	props: {
+	},
+	data() {
+		return {
+		}
+	},
+	props: {
+		board: {
+			type: Object,
+			default: undefined
+		}
+	}
+		
+}
+</script>

src/models/index.js

@@ -46,3 +46,10 @@
  * @property {boolean} archived
  * @property {number} order
  */
+/**
+ * Label model
+ *
+ * @typedef {Object} Label
+ * @property {String} title
+ * @property {String} color
+ */

src/store/label.js

@@ -0,0 +1,43 @@
+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)
+		},
+	}
+}

src/store/main.js

@@ -27,6 +27,7 @@ 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)
 
@@ -42,7 +43,8 @@ export const BOARD_FILTERS = {
 export default new Vuex.Store({
 	modules: {
 		stack,
-		card
+		card,
+		label
 	},
 	strict: debug,
 	state: {