diff --git a/app/assets/javascripts/boards/components/board_card_inner.vue b/app/assets/javascripts/boards/components/board_card_inner.vue index 814ff16efec..af1d0bf0807 100644 --- a/app/assets/javascripts/boards/components/board_card_inner.vue +++ b/app/assets/javascripts/boards/components/board_card_inner.vue @@ -11,10 +11,12 @@ import { sortBy } from 'lodash'; import { mapActions, mapGetters, mapState } from 'vuex'; import boardCardInner from 'ee_else_ce/boards/mixins/board_card_inner'; import { isScopedLabel } from '~/lib/utils/common_utils'; +import { updateHistory } from '~/lib/utils/url_utility'; import { sprintf, __, n__ } from '~/locale'; import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue'; import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue'; import { ListType } from '../constants'; +import eventHub from '../eventhub'; import BoardBlockedIcon from './board_blocked_icon.vue'; import IssueDueDate from './issue_due_date.vue'; import IssueTimeEstimate from './issue_time_estimate.vue'; @@ -174,10 +176,19 @@ export default { ) ); }, - labelTarget(label) { + filterByLabel(label) { + if (!this.updateFilters) return; + const filterPath = window.location.search ? `${window.location.search}&` : '?'; - const value = encodeURIComponent(label.title); - return `${filterPath}label_name[]=${value}`; + const filter = `label_name[]=${encodeURIComponent(label.title)}`; + + if (!filterPath.includes(filter)) { + updateHistory({ + url: `${filterPath}${filter}`, + }); + this.performSearch(); + eventHub.$emit('updateTokens'); + } }, showScopedLabel(label) { return this.scopedLabelsAvailable && isScopedLabel(label); @@ -232,7 +243,7 @@ export default { :description="label.description" size="sm" :scoped="showScopedLabel(label)" - :target="labelTarget(label)" + @click="filterByLabel(label)" /> diff --git a/app/assets/javascripts/boards/components/board_filtered_search.vue b/app/assets/javascripts/boards/components/board_filtered_search.vue index aeb2cee590d..fa0c798ca9d 100644 --- a/app/assets/javascripts/boards/components/board_filtered_search.vue +++ b/app/assets/javascripts/boards/components/board_filtered_search.vue @@ -2,7 +2,8 @@ import { pickBy, isEmpty, mapValues } from 'lodash'; import { mapActions } from 'vuex'; import { getIdFromGraphQLId, isGid } from '~/graphql_shared/utils'; -import { updateHistory, setUrlParams } from '~/lib/utils/url_utility'; +import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; +import { updateHistory, setUrlParams, queryToObject } from '~/lib/utils/url_utility'; import { __ } from '~/locale'; import { FILTERED_SEARCH_TERM, @@ -10,6 +11,7 @@ import { } from '~/vue_shared/components/filtered_search_bar/constants'; import FilteredSearch from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue'; import { AssigneeFilterType } from '~/boards/constants'; +import eventHub from '../eventhub'; export default { i18n: { @@ -33,6 +35,7 @@ export default { data() { return { filterParams: this.initialFilterParams, + filteredSearchKey: 0, }; }, computed: { @@ -306,12 +309,21 @@ export default { }, }, created() { + eventHub.$on('updateTokens', this.updateTokens); if (!isEmpty(this.eeFilters)) { this.filterParams = this.eeFilters; } }, + beforeDestroy() { + eventHub.$off('updateTokens', this.updateTokens); + }, methods: { ...mapActions(['performSearch']), + updateTokens() { + const rawFilterParams = queryToObject(window.location.search, { gatherArrays: true }); + this.filterParams = convertObjectPropsToCamelCase(rawFilterParams, {}); + this.filteredSearchKey += 1; + }, handleFilter(filters) { this.filterParams = this.getFilterParams(filters); @@ -399,6 +411,7 @@ export default {