Board filter (#1507)

* filter field

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

* build filters

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

* Implement tag and assigned user filters

Signed-off-by: Julius Härtl <jus@bitgrid.net>

* small changes

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

* new icon

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

* Properly style filter popover

Signed-off-by: Julius Härtl <jus@bitgrid.net>

* Make sure that due is reactive

Signed-off-by: Julius Härtl <jus@bitgrid.net>

* filers are working now :)

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

Co-authored-by: Julius Härtl <jus@bitgrid.net>

src/store/card.js

@@ -30,9 +30,56 @@ export default {
 		cards: [],
 	},
 	getters: {
-		cardsByStack: (state, getters) => (id) => {
-			return state.cards.filter((card) => card.stackId === id && (getters.getSearchQuery === '' || (card.title.toLowerCase().includes(getters.getSearchQuery.toLowerCase()) || card.description.toLowerCase().includes(getters.getSearchQuery.toLowerCase())))
-			).sort((a, b) => a.order - b.order)
+		cardsByStack: (state, getters, rootState) => (id) => {
+			return state.cards.filter((card) => {
+				const { tags, users, due } = rootState.filter
+				let allTagsMatch = true
+				let allUsersMatch = true
+
+				if (tags.length > 0) {
+					tags.forEach((tag) => {
+						if (card.labels.findIndex((l) => l.id === tag) === -1) {
+							allTagsMatch = false
+						}
+					})
+					if (!allTagsMatch) {
+						return false
+					}
+				}
+
+				if (users.length > 0) {
+					users.forEach((user) => {
+						if (card.assignedUsers.findIndex((u) => u.participant.uid === user) === -1) {
+							allUsersMatch = false
+						}
+					})
+					if (!allUsersMatch) {
+						return false
+					}
+				}
+
+				if (due !== '') {
+					const datediffHour = ((new Date(card.duedate) - new Date()) / 3600000)
+					switch (due) {
+					case 'noDue':
+						return (card.duedate === null)
+					case 'overdue':
+						return (card.overdue === 3)
+					case 'dueToday':
+						return (card.overdue >= 2)
+					case 'dueWeek':
+						return (datediffHour <= 168 && card.duedate !== null)
+					case 'dueMonth':
+						return (datediffHour <= 5040 && card.duedate !== null)
+					}
+				}
+
+				return true
+			})
+				.filter((card) => card.stackId === id && (getters.getSearchQuery === ''
+					|| (card.title.toLowerCase().includes(getters.getSearchQuery.toLowerCase())
+					|| card.description.toLowerCase().includes(getters.getSearchQuery.toLowerCase()))
+						.sort((a, b) => a.order - b.order)))
 		},
 		cardById: state => (id) => {
 			return state.cards.find((card) => card.id === id)

src/store/main.js

@@ -60,11 +60,17 @@ export default new Vuex.Store({
 		assignableUsers: [],
 		boardFilter: BOARD_FILTERS.ALL,
 		searchQuery: '',
+		activity: [],
+		activityLoadMore: true,
+		filter: { tags: [], users: [], due: '' },
 	},
 	getters: {
 		getSearchQuery: state => {
 			return state.searchQuery
 		},
+		getFilter: state => {
+			return state.filter
+		},
 		boards: state => {
 			return state.boards
 		},
@@ -112,6 +118,9 @@ export default new Vuex.Store({
 		setSearchQuery(state, searchQuery) {
 			state.searchQuery = searchQuery
 		},
+		setFilter(state, filter) {
+			Object.assign(state.filter, filter)
+		},
 		toggleShowArchived(state) {
 			state.showArchived = !state.showArchived
 		},
@@ -232,6 +241,9 @@ export default new Vuex.Store({
 		},
 	},
 	actions: {
+		setFilter({ commit }, filter) {
+			commit('setFilter', filter)
+		},
 		async loadBoardById({ commit }, boardId) {
 			commit('setCurrentBoard', null)
 			const board = await apiClient.loadById(boardId)