Merge pull request #2244 from nextcloud/enh/filter-on-label-click

Toggle filter on clicking card labels

src/components/cards/CardItem.vue

@@ -57,7 +57,7 @@
 				class="labels"
 				@click="openCard">
 				<li v-for="label in card.labels" :key="label.id" :style="labelStyle(label)">
-					<span>{{ label.title }}</span>
+					<span @click="applyLabelFilter(label)">{{ label.title }}</span>
 				</li>
 			</transition-group>
 			<div v-show="!compactMode" class="card-controls compact-item" @click="openCard">
@@ -142,6 +142,9 @@ export default {
 		cancelEdit() {
 			this.editing = false
 		},
+		applyLabelFilter(label) {
+			this.$nextTick(() => this.$store.dispatch('toggleFilter', { tags: [label.id] }))
+		},
 	},
 }
 </script>

src/store/main.js

@@ -132,9 +132,27 @@ export default new Vuex.Store({
 		setSearchQuery(state, searchQuery) {
 			state.searchQuery = searchQuery
 		},
-		setFilter(state, filter) {
+		SET_FILTER(state, filter) {
 			Object.assign(state.filter, filter)
 		},
+		TOGGLE_FILTER(state, filter) {
+			Object.keys(filter).forEach((key) => {
+				switch (key) {
+				case 'due':
+					Vue.set(state.filter, key, filter.due)
+					break
+				default:
+					filter[key].forEach((item) => {
+						if (state.filter[key].indexOf(item) === -1) {
+							state.filter[key].push(item)
+						} else {
+							state.filter[key].splice(state.filter[key].indexOf(item), 1)
+						}
+					})
+					break
+				}
+			})
+		},
 		toggleShowArchived(state) {
 			state.showArchived = !state.showArchived
 		},
@@ -261,7 +279,10 @@ export default new Vuex.Store({
 	},
 	actions: {
 		setFilter({ commit }, filter) {
-			commit('setFilter', filter)
+			commit('SET_FILTER', filter)
+		},
+		toggleFilter({ commit }, filter) {
+			commit('TOGGLE_FILTER', filter)
 		},
 		async loadBoardById({ commit, dispatch }, boardId) {
 			const filterReset = { tags: [], users: [], due: '' }