diff options
Diffstat (limited to 'app/assets/javascripts/boards/components/issue_card_inner.vue')
-rw-r--r-- | app/assets/javascripts/boards/components/issue_card_inner.vue | 50 |
1 files changed, 30 insertions, 20 deletions
diff --git a/app/assets/javascripts/boards/components/issue_card_inner.vue b/app/assets/javascripts/boards/components/issue_card_inner.vue index ddd20ff281c..457d0d4dcd6 100644 --- a/app/assets/javascripts/boards/components/issue_card_inner.vue +++ b/app/assets/javascripts/boards/components/issue_card_inner.vue @@ -1,6 +1,6 @@ <script> import { sortBy } from 'lodash'; -import { mapState } from 'vuex'; +import { mapActions, mapState } from 'vuex'; import { GlLabel, GlTooltipDirective, GlIcon } from '@gitlab/ui'; import issueCardInner from 'ee_else_ce/boards/mixins/issue_card_inner'; import { sprintf, __, n__ } from '~/locale'; @@ -8,9 +8,10 @@ import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue'; import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue'; import IssueDueDate from './issue_due_date.vue'; import IssueTimeEstimate from './issue_time_estimate.vue'; -import boardsStore from '../stores/boards_store'; +import eventHub from '../eventhub'; import { isScopedLabel } from '~/lib/utils/common_utils'; import { ListType } from '../constants'; +import { updateHistory } from '~/lib/utils/url_utility'; export default { components: { @@ -26,6 +27,7 @@ export default { GlTooltip: GlTooltipDirective, }, mixins: [issueCardInner], + inject: ['groupId', 'rootPath', 'scopedLabelsAvailable'], props: { issue: { type: Object, @@ -42,7 +44,6 @@ export default { default: false, }, }, - inject: ['groupId', 'rootPath'], data() { return { limitBeforeCounter: 2, @@ -52,6 +53,16 @@ export default { }, computed: { ...mapState(['isShowingLabels']), + cappedAssignees() { + // e.g. maxRender is 4, + // Render up to all 4 assignees if there are only 4 assigness + // Otherwise render up to the limitBeforeCounter + if (this.issue.assignees.length <= this.maxRender) { + return this.issue.assignees.slice(0, this.maxRender); + } + + return this.issue.assignees.slice(0, this.limitBeforeCounter); + }, numberOverLimit() { return this.issue.assignees.length - this.limitBeforeCounter; }, @@ -98,19 +109,10 @@ export default { }, }, methods: { + ...mapActions(['performSearch']), isIndexLessThanlimit(index) { return index < this.limitBeforeCounter; }, - shouldRenderAssignee(index) { - // Eg. maxRender is 4, - // Render up to all 4 assignees if there are only 4 assigness - // Otherwise render up to the limitBeforeCounter - if (this.issue.assignees.length <= this.maxRender) { - return index < this.maxRender; - } - - return index < this.limitBeforeCounter; - }, assigneeUrl(assignee) { if (!assignee) return ''; return `${this.rootPath}${assignee.username}`; @@ -118,6 +120,9 @@ export default { avatarUrlTitle(assignee) { return sprintf(__(`Avatar for %{assigneeName}`), { assigneeName: assignee.name }); }, + avatarUrl(assignee) { + return assignee.avatarUrl || assignee.avatar || gon.default_avatar_url; + }, showLabel(label) { if (!label.id) return false; return true; @@ -133,13 +138,19 @@ export default { }, filterByLabel(label) { if (!this.updateFilters) return; - const labelTitle = encodeURIComponent(label.title); - const filter = `label_name[]=${labelTitle}`; + const filterPath = window.location.search ? `${window.location.search}&` : '?'; + const filter = `label_name[]=${encodeURIComponent(label.title)}`; - boardsStore.toggleFilter(filter); + if (!filterPath.includes(filter)) { + updateHistory({ + url: `${filterPath}${filter}`, + }); + this.performSearch(); + eventHub.$emit('updateTokens'); + } }, showScopedLabel(label) { - return boardsStore.scopedLabels.enabled && isScopedLabel(label); + return this.scopedLabelsAvailable && isScopedLabel(label); }, }, }; @@ -222,12 +233,11 @@ export default { </div> <div class="board-card-assignee gl-display-flex"> <user-avatar-link - v-for="(assignee, index) in issue.assignees" - v-if="shouldRenderAssignee(index)" + v-for="assignee in cappedAssignees" :key="assignee.id" :link-href="assigneeUrl(assignee)" :img-alt="avatarUrlTitle(assignee)" - :img-src="assignee.avatarUrl || assignee.avatar || assignee.avatar_url" + :img-src="avatarUrl(assignee)" :img-size="24" class="js-no-trigger" tooltip-placement="bottom" |