From 71785322c209a27b8d9d68a21ea0c348e6e3d9bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Sat, 29 Aug 2020 11:43:23 +0200
Subject: [PATCH] Toggle filter on clicking card labels
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/cards/CardItem.vue |  5 ++++-
 src/store/main.js                 | 25 +++++++++++++++++++++++--
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/components/cards/CardItem.vue b/src/components/cards/CardItem.vue
index 288808f2a..9b7262eb8 100644
--- a/src/components/cards/CardItem.vue
+++ b/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>
diff --git a/src/store/main.js b/src/store/main.js
index d66149cf5..901f36922 100644
--- a/src/store/main.js
+++ b/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: '' }