Label editing in board sidebar

.drone.yml

@@ -225,14 +225,17 @@ trigger:
 kind: pipeline
 name: frontend
 steps:
+  - name: install
+    image: node:11-alpine
+    commands:
+      - npm install
   - name: eslint
     image: node:11-alpine
     commands:
       - npm run lint
   - name: jsbuild
     image: node:11-alpine
     commands:
-      - npm install
       - npm run build
 trigger:
   branch:

src/components/Sidebar.vue

@@ -21,9 +21,7 @@
   -->
 
 <template>
-	<div id="app-sidebar">
-		<router-view name="sidebar" />
-	</div>
+	<router-view name="sidebar" />
 </template>
 
 <script>

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

@@ -21,145 +21,58 @@
   -->
 
 <template>
-	<div class="sidebar">
-		<div class="sidebar-header">
-			<h3>{{ board.title }}</h3>
-		</div>
+	<app-sidebar
+		:actions="[]"
+		:title="board.title"
+		@close="closeSidebar">
 
-		<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>
+		<AppSidebarTab name="Sharing" icon="icon-shared">
+			<SharingTabSidebard :board="board" />
+		</AppSidebarTab>
 
-		<div class="tabsContainer">
-			<div class="tab">
-				<div v-if="activeTab === 'Sharing'">
+		<AppSidebarTab name="Tags" icon="icon-tag">
+			<TagsTabSidebard :board="board" />
+		</AppSidebarTab>
 
-					<multiselect v-model="value" :options="board.sharees" />
+		<AppSidebarTab name="Deleted items" icon="icon-delete">
+			<DeletedTabSidebard :board="board" />
+		</AppSidebarTab>
 
-					<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>
+		<AppSidebarTab name="Timeline" icon="icon-activity">
+			<TimelineTabSidebard :board="board" />
+		</AppSidebarTab>
 
-				<div
-					v-if="activeTab === 'Tags'"
-					id="board-detail-labels"
-				>
-					<ul class="labels">
-						<li v-for="label in board.labels" :key="label.id">
-							<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>
-							</span>
-						</li>
-					</ul>
-				</div>
-			</div>
-		</div>
-	</div>
+	</app-sidebar>
 </template>
 
 <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'
+import { AppSidebar, AppSidebarTab } from 'nextcloud-vue'
 
 export default {
 	name: 'BoardSidebar',
 	components: {
-		Avatar,
-		Multiselect
-	},
-	props: {
-	},
-	data() {
-		return {
-			activeTab: 'Sharing',
-			tabs: [
-				{
-					name: 'Sharing',
-					isSelected: true
-				},
-				{
-					name: 'Tags',
-					isSelected: false
-				},
-				{
-					name: 'Deleted items',
-					isSelected: false
-				},
-				{
-					name: 'Timeline',
-					isSelected: false
-				}
-			]
-		}
+		AppSidebar,
+		AppSidebarTab,
+		SharingTabSidebard,
+		TagsTabSidebard,
+		DeletedTabSidebard,
+		TimelineTabSidebard
 	},
 	computed: {
 		...mapState({
-			board: state => state.currentBoard
+			board: state => state.currentBoard,
+			labels: state => state.labels
 		})
 	},
 	methods: {
 		closeSidebar() {
-			this.$store.dispatch('toggleSidebar')
-		},
-		setSelectedHeader(tabName) {
-			this.activeTab = tabName
-			this.tabs.forEach(tab => {
-				tab.isSelected = (tab.name === tabName)
-			})
+			this.$router.push({ name: 'board' })
 		}
 	}
 }
 </script>
-
-<style lang="scss" scoped>
-  .sidebar-header {
-    h3 {
-      font-size: 14pt;
-      padding: 15px 15px 3px;
-      margin: 0;
-      overflow: hidden;
-    }
-  }
-  .icon-close {
-    position: absolute;
-    top: 0px;
-    right: 0px;
-    padding: 14px;
-    height: 24px;
-    width: 24px;
-  }
-  ul.tab-headers {
-	margin: 15px 15px 0 15px;
-		li {
-			display: inline-block;
-			padding: 12px;
-			&.selected {
-				color: #000;
-				border-bottom: 1px solid #4d4d4d;
-				font-weight: 600;
-			}
-		}
-  }
-	.tabsContainer {
-		.tab {
-			padding: 0 15px 15px;
-		}
-	}
-</style>

src/components/board/DeletedTabSidebard.vue

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

src/components/board/SharingTabSidebard.vue

@@ -0,0 +1,65 @@
+<template>
+	<div>
+		<multiselect :options="sharees" label="label" @search-change="asyncFind">
+			<template #option="scope">
+				{{ scope.option.label }}
+			</template>
+		</multiselect>
+
+		<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'
+import { mapGetters } from 'vuex'
+
+export default {
+	name: 'SharingTabSidebard',
+	components: {
+		Avatar,
+		Multiselect
+	},
+	props: {
+		board: {
+			type: Object,
+			default: undefined
+		}
+	},
+	data() {
+		return {
+			isLoading: false
+		}
+	},
+	computed: {
+		...mapGetters({
+			sharees: 'sharees'
+		})
+	},
+	methods: {
+		asyncFind(query) {
+			this.isLoading = true
+			this.$store.dispatch('loadSharees').then(response => {
+				this.isLoading = false
+			})
+		}
+	}
+
+}
+</script>