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 | 262 |
1 files changed, 0 insertions, 262 deletions
diff --git a/app/assets/javascripts/boards/components/issue_card_inner.vue b/app/assets/javascripts/boards/components/issue_card_inner.vue deleted file mode 100644 index e5ea30df767..00000000000 --- a/app/assets/javascripts/boards/components/issue_card_inner.vue +++ /dev/null @@ -1,262 +0,0 @@ -<script> -import { GlLabel, GlTooltipDirective, GlIcon } from '@gitlab/ui'; -import { sortBy } from 'lodash'; -import { mapActions, mapState } from 'vuex'; -import issueCardInner from 'ee_else_ce/boards/mixins/issue_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.vue'; -import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue'; -import { ListType } from '../constants'; -import eventHub from '../eventhub'; -import IssueDueDate from './issue_due_date.vue'; -import IssueTimeEstimate from './issue_time_estimate.vue'; - -export default { - components: { - GlLabel, - GlIcon, - UserAvatarLink, - TooltipOnTruncate, - IssueDueDate, - IssueTimeEstimate, - IssueCardWeight: () => import('ee_component/boards/components/issue_card_weight.vue'), - }, - directives: { - GlTooltip: GlTooltipDirective, - }, - mixins: [issueCardInner], - inject: ['groupId', 'rootPath', 'scopedLabelsAvailable'], - props: { - issue: { - type: Object, - required: true, - }, - list: { - type: Object, - required: false, - default: () => ({}), - }, - updateFilters: { - type: Boolean, - required: false, - default: false, - }, - }, - data() { - return { - limitBeforeCounter: 2, - maxRender: 3, - maxCounter: 99, - }; - }, - 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; - }, - assigneeCounterTooltip() { - const { numberOverLimit, maxCounter } = this; - const count = numberOverLimit > maxCounter ? maxCounter : numberOverLimit; - return sprintf(__('%{count} more assignees'), { count }); - }, - assigneeCounterLabel() { - if (this.numberOverLimit > this.maxCounter) { - return `${this.maxCounter}+`; - } - - return `+${this.numberOverLimit}`; - }, - shouldRenderCounter() { - if (this.issue.assignees.length <= this.maxRender) { - return false; - } - - return this.issue.assignees.length > this.numberOverLimit; - }, - issueId() { - if (this.issue.iid) { - return `#${this.issue.iid}`; - } - return false; - }, - showLabelFooter() { - return this.isShowingLabels && this.issue.labels.find(this.showLabel); - }, - issueReferencePath() { - const { referencePath, groupId } = this.issue; - return !groupId ? referencePath.split('#')[0] : null; - }, - orderedLabels() { - return sortBy(this.issue.labels.filter(this.isNonListLabel), 'title'); - }, - blockedLabel() { - if (this.issue.blockedByCount) { - return n__(`Blocked by %d issue`, `Blocked by %d issues`, this.issue.blockedByCount); - } - return __('Blocked issue'); - }, - }, - methods: { - ...mapActions(['performSearch']), - isIndexLessThanlimit(index) { - return index < this.limitBeforeCounter; - }, - assigneeUrl(assignee) { - if (!assignee) return ''; - return `${this.rootPath}${assignee.username}`; - }, - 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; - }, - isNonListLabel(label) { - return ( - label.id && - !( - (this.list.type || this.list.listType) === ListType.label && - this.list.title === label.title - ) - ); - }, - filterByLabel(label) { - if (!this.updateFilters) return; - const filterPath = window.location.search ? `${window.location.search}&` : '?'; - 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); - }, - }, -}; -</script> -<template> - <div> - <div class="gl-display-flex" dir="auto"> - <h4 class="board-card-title gl-mb-0 gl-mt-0"> - <gl-icon - v-if="issue.blocked" - v-gl-tooltip - name="issue-block" - :title="blockedLabel" - class="issue-blocked-icon gl-mr-2" - :aria-label="blockedLabel" - data-testid="issue-blocked-icon" - /> - <gl-icon - v-if="issue.confidential" - v-gl-tooltip - name="eye-slash" - :title="__('Confidential')" - class="confidential-icon gl-mr-2" - :aria-label="__('Confidential')" - /> - <a - :href="issue.path || issue.webUrl || ''" - :title="issue.title" - class="js-no-trigger" - @mousemove.stop - >{{ issue.title }}</a - > - </h4> - </div> - <div v-if="showLabelFooter" class="board-card-labels gl-mt-2 gl-display-flex gl-flex-wrap"> - <template v-for="label in orderedLabels"> - <gl-label - :key="label.id" - :background-color="label.color" - :title="label.title" - :description="label.description" - size="sm" - :scoped="showScopedLabel(label)" - @click="filterByLabel(label)" - /> - </template> - </div> - <div - class="board-card-footer gl-display-flex gl-justify-content-space-between gl-align-items-flex-end" - > - <div - class="gl-display-flex align-items-start flex-wrap-reverse board-card-number-container gl-overflow-hidden js-board-card-number-container" - > - <span - v-if="issue.referencePath" - class="board-card-number gl-overflow-hidden gl-display-flex gl-mr-3 gl-mt-3" - > - <tooltip-on-truncate - v-if="issueReferencePath" - :title="issueReferencePath" - placement="bottom" - class="board-issue-path gl-text-truncate gl-font-weight-bold" - >{{ issueReferencePath }}</tooltip-on-truncate - > - #{{ issue.iid }} - </span> - <span class="board-info-items gl-mt-3 gl-display-inline-block"> - <issue-due-date - v-if="issue.dueDate" - :date="issue.dueDate" - :closed="issue.closed || Boolean(issue.closedAt)" - /> - <issue-time-estimate v-if="issue.timeEstimate" :estimate="issue.timeEstimate" /> - <issue-card-weight - v-if="validIssueWeight" - :weight="issue.weight" - @click="filterByWeight(issue.weight)" - /> - </span> - </div> - <div class="board-card-assignee gl-display-flex"> - <user-avatar-link - v-for="assignee in cappedAssignees" - :key="assignee.id" - :link-href="assigneeUrl(assignee)" - :img-alt="avatarUrlTitle(assignee)" - :img-src="avatarUrl(assignee)" - :img-size="24" - class="js-no-trigger" - tooltip-placement="bottom" - > - <span class="js-assignee-tooltip"> - <span class="gl-font-weight-bold gl-display-block">{{ __('Assignee') }}</span> - {{ assignee.name }} - <span class="text-white-50">@{{ assignee.username }}</span> - </span> - </user-avatar-link> - <span - v-if="shouldRenderCounter" - v-gl-tooltip - :title="assigneeCounterTooltip" - class="avatar-counter" - data-placement="bottom" - >{{ assigneeCounterLabel }}</span - > - </div> - </div> - </div> -</template> |