Merge pull request #1876 from nextcloud/enh/filterReset

img/filter_set.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4.233 4.233" height="16" width="16"><path d="M.52.465h3.283L2.631 1.918h-.99zm1.122 1.453h.992v1.866l-.996-.455z" paint-order="stroke fill markers"/><ellipse ry=".691" rx=".674" cy="3.461" cx="3.45" fill-rule="evenodd"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4.233 4.233" height="16" width="16"><path d="M.52.465h3.283L2.631 1.918h-.99zm1.122 1.453h.992v1.866l-.996-.455z" paint-order="stroke fill markers"/><ellipse ry=".691" rx=".674" cy="3.461" cx="3.45" fill="#000"/></svg>

src/components/Controls.vue

@@ -146,6 +146,10 @@
 									@click="beforeSetFilter">
 								<label for="noDue">{{ t('deck', 'No due date') }}</label>
 							</div>
+
+							<Button :disabled="!isFilterActive" @click="clearFilter">
+								{{ t('deck', 'Clear filter') }}
+							</Button>
 						</div>
 					</template>
 				</Popover>
@@ -229,6 +233,11 @@ export default {
 			return [...this.board.labels].sort((a, b) => (a.title < b.title) ? -1 : 1)
 		},
 	},
+	watch: {
+		board() {
+			this.clearFilter()
+		},
+	},
 	methods: {
 		beforeSetFilter(e) {
 			if (this.filter.due === e.target.value) {
@@ -269,6 +278,11 @@ export default {
 				this.$router.push({ name: 'board.details' })
 			}
 		},
+		clearFilter() {
+			const filterReset = { tags: [], users: [], due: '' }
+			this.$store.dispatch('setFilter', { ...filterReset })
+			this.filter = filterReset
+		},
 	},
 }
 </script>

src/store/main.js

@@ -256,7 +256,9 @@ export default new Vuex.Store({
 		setFilter({ commit }, filter) {
 			commit('setFilter', filter)
 		},
-		async loadBoardById({ commit }, boardId) {
+		async loadBoardById({ commit, dispatch }, boardId) {
+			const filterReset = { tags: [], users: [], due: '' }
+			dispatch('setFilter', filterReset)
 			commit('setCurrentBoard', null)
 			const board = await apiClient.loadById(boardId)
 			commit('setCurrentBoard', board)