debian-mirror-gitlab/app/assets/javascripts/boards/components/board_card_inner.vue

389 lines
13 KiB
Vue
Raw Normal View History

2018-11-08 19:23:39 +05:30
<script>
2021-09-30 23:02:18 +05:30
import {
GlLabel,
GlTooltip,
GlTooltipDirective,
GlIcon,
GlLoadingIcon,
GlSprintf,
} from '@gitlab/ui';
2020-04-08 14:13:33 +05:30
import { sortBy } from 'lodash';
2021-04-17 20:07:23 +05:30
import { mapActions, mapGetters, mapState } from 'vuex';
import boardCardInner from 'ee_else_ce/boards/mixins/board_card_inner';
2021-03-11 19:13:27 +05:30
import { isScopedLabel } from '~/lib/utils/common_utils';
import { updateHistory } from '~/lib/utils/url_utility';
2021-01-29 00:20:46 +05:30
import { sprintf, __, n__ } from '~/locale';
2022-01-26 12:08:38 +05:30
import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
2018-12-13 13:39:08 +05:30
import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
2021-03-11 19:13:27 +05:30
import { ListType } from '../constants';
import eventHub from '../eventhub';
2021-04-29 21:17:54 +05:30
import BoardBlockedIcon from './board_blocked_icon.vue';
2018-12-13 13:39:08 +05:30
import IssueDueDate from './issue_due_date.vue';
import IssueTimeEstimate from './issue_time_estimate.vue';
2018-11-08 19:23:39 +05:30
2018-12-13 13:39:08 +05:30
export default {
components: {
2021-09-30 23:02:18 +05:30
GlTooltip,
2020-04-08 14:13:33 +05:30
GlLabel,
2021-09-04 01:27:46 +05:30
GlLoadingIcon,
2020-11-24 15:15:51 +05:30
GlIcon,
2018-12-13 13:39:08 +05:30
UserAvatarLink,
TooltipOnTruncate,
IssueDueDate,
IssueTimeEstimate,
2019-07-31 22:56:46 +05:30
IssueCardWeight: () => import('ee_component/boards/components/issue_card_weight.vue'),
2021-04-29 21:17:54 +05:30
BoardBlockedIcon,
2021-09-30 23:02:18 +05:30
GlSprintf,
2018-12-13 13:39:08 +05:30
},
directives: {
GlTooltip: GlTooltipDirective,
},
2021-04-17 20:07:23 +05:30
mixins: [boardCardInner],
inject: ['rootPath', 'scopedLabelsAvailable'],
2018-12-13 13:39:08 +05:30
props: {
2021-04-17 20:07:23 +05:30
item: {
2018-12-13 13:39:08 +05:30
type: Object,
required: true,
},
list: {
type: Object,
required: false,
default: () => ({}),
},
updateFilters: {
type: Boolean,
required: false,
default: false,
},
2020-11-24 15:15:51 +05:30
},
2018-12-13 13:39:08 +05:30
data() {
return {
limitBeforeCounter: 2,
maxRender: 3,
maxCounter: 99,
};
},
computed: {
2021-09-30 23:02:18 +05:30
...mapState(['isShowingLabels', 'issuableType', 'allowSubEpics']),
2021-10-27 15:23:28 +05:30
...mapGetters(['isEpicBoard', 'isProjectBoard']),
2021-03-08 18:12:59 +05:30
cappedAssignees() {
// e.g. maxRender is 4,
// Render up to all 4 assignees if there are only 4 assigness
// Otherwise render up to the limitBeforeCounter
2021-04-17 20:07:23 +05:30
if (this.item.assignees.length <= this.maxRender) {
return this.item.assignees.slice(0, this.maxRender);
2021-03-08 18:12:59 +05:30
}
2021-04-17 20:07:23 +05:30
return this.item.assignees.slice(0, this.limitBeforeCounter);
2021-03-08 18:12:59 +05:30
},
2018-12-13 13:39:08 +05:30
numberOverLimit() {
2021-04-17 20:07:23 +05:30
return this.item.assignees.length - this.limitBeforeCounter;
2018-12-13 13:39:08 +05:30
},
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}+`;
}
2018-11-08 19:23:39 +05:30
2018-12-13 13:39:08 +05:30
return `+${this.numberOverLimit}`;
2018-11-08 19:23:39 +05:30
},
2018-12-13 13:39:08 +05:30
shouldRenderCounter() {
2021-04-17 20:07:23 +05:30
if (this.item.assignees.length <= this.maxRender) {
2018-12-13 13:39:08 +05:30
return false;
}
2018-11-08 19:23:39 +05:30
2021-04-17 20:07:23 +05:30
return this.item.assignees.length > this.numberOverLimit;
2018-12-13 13:39:08 +05:30
},
2021-04-17 20:07:23 +05:30
itemPrefix() {
return this.isEpicBoard ? '&' : '#';
},
itemId() {
if (this.item.iid) {
return `${this.itemPrefix}${this.item.iid}`;
2018-12-13 13:39:08 +05:30
}
return false;
},
2021-09-30 23:02:18 +05:30
shouldRenderEpicCountables() {
return this.isEpicBoard && this.item.hasIssues;
},
shouldRenderEpicProgress() {
return this.totalWeight > 0;
},
2018-12-13 13:39:08 +05:30
showLabelFooter() {
2021-04-17 20:07:23 +05:30
return this.isShowingLabels && this.item.labels.find(this.showLabel);
2018-12-13 13:39:08 +05:30
},
2021-04-17 20:07:23 +05:30
itemReferencePath() {
const { referencePath } = this.item;
return referencePath.split(this.itemPrefix)[0];
2018-12-13 13:39:08 +05:30
},
2019-07-07 11:18:12 +05:30
orderedLabels() {
2021-04-17 20:07:23 +05:30
return sortBy(this.item.labels.filter(this.isNonListLabel), 'title');
2019-07-07 11:18:12 +05:30
},
2021-01-29 00:20:46 +05:30
blockedLabel() {
2021-04-17 20:07:23 +05:30
if (this.item.blockedByCount) {
return n__(`Blocked by %d issue`, `Blocked by %d issues`, this.item.blockedByCount);
2021-01-29 00:20:46 +05:30
}
return __('Blocked issue');
},
2021-09-30 23:02:18 +05:30
totalEpicsCount() {
return this.item.descendantCounts.openedEpics + this.item.descendantCounts.closedEpics;
},
totalIssuesCount() {
return this.item.descendantCounts.openedIssues + this.item.descendantCounts.closedIssues;
},
totalWeight() {
return (
this.item.descendantWeightSum.openedIssues + this.item.descendantWeightSum.closedIssues
);
},
totalProgress() {
return Math.round((this.item.descendantWeightSum.closedIssues / this.totalWeight) * 100);
},
2021-10-27 15:23:28 +05:30
showReferencePath() {
return !this.isProjectBoard && this.itemReferencePath;
},
2018-12-13 13:39:08 +05:30
},
methods: {
2021-04-29 21:17:54 +05:30
...mapActions(['performSearch', 'setError']),
2018-12-13 13:39:08 +05:30
isIndexLessThanlimit(index) {
return index < this.limitBeforeCounter;
},
assigneeUrl(assignee) {
if (!assignee) return '';
return `${this.rootPath}${assignee.username}`;
},
avatarUrlTitle(assignee) {
2019-09-30 21:07:59 +05:30
return sprintf(__(`Avatar for %{assigneeName}`), { assigneeName: assignee.name });
2018-12-13 13:39:08 +05:30
},
2021-03-08 18:12:59 +05:30
avatarUrl(assignee) {
return assignee.avatarUrl || assignee.avatar || gon.default_avatar_url;
},
2018-12-13 13:39:08 +05:30
showLabel(label) {
if (!label.id) return false;
return true;
},
2019-12-21 20:55:43 +05:30
isNonListLabel(label) {
2021-02-22 17:27:13 +05:30
return (
label.id &&
!(
(this.list.type || this.list.listType) === ListType.label &&
this.list.title === label.title
)
);
2019-12-21 20:55:43 +05:30
},
2018-12-13 13:39:08 +05:30
filterByLabel(label) {
if (!this.updateFilters) return;
2021-03-08 18:12:59 +05:30
const filterPath = window.location.search ? `${window.location.search}&` : '?';
const filter = `label_name[]=${encodeURIComponent(label.title)}`;
2018-12-13 13:39:08 +05:30
2021-03-08 18:12:59 +05:30
if (!filterPath.includes(filter)) {
updateHistory({
url: `${filterPath}${filter}`,
});
this.performSearch();
eventHub.$emit('updateTokens');
}
2018-12-13 13:39:08 +05:30
},
2019-07-31 22:56:46 +05:30
showScopedLabel(label) {
2021-03-08 18:12:59 +05:30
return this.scopedLabelsAvailable && isScopedLabel(label);
2019-07-31 22:56:46 +05:30
},
2018-12-13 13:39:08 +05:30
},
};
2018-11-08 19:23:39 +05:30
</script>
<template>
<div>
2021-01-29 00:20:46 +05:30
<div class="gl-display-flex" dir="auto">
2020-06-23 00:09:42 +05:30
<h4 class="board-card-title gl-mb-0 gl-mt-0">
2021-04-29 21:17:54 +05:30
<board-blocked-icon
2021-04-17 20:07:23 +05:30
v-if="item.blocked"
2021-04-29 21:17:54 +05:30
:item="item"
:unique-id="`${item.id}${list.id}`"
:issuable-type="issuableType"
@blocking-issuables-error="setError"
2020-03-13 15:44:24 +05:30
/>
2020-11-24 15:15:51 +05:30
<gl-icon
2021-04-17 20:07:23 +05:30
v-if="item.confidential"
2018-12-13 13:39:08 +05:30
v-gl-tooltip
name="eye-slash"
:title="__('Confidential')"
2020-07-28 23:09:34 +05:30
class="confidential-icon gl-mr-2"
2018-12-13 13:39:08 +05:30
:aria-label="__('Confidential')"
2019-09-30 21:07:59 +05:30
/>
2021-11-11 11:23:49 +05:30
<gl-icon
v-if="item.hidden"
v-gl-tooltip
name="spam"
:title="__('This issue is hidden because its author has been banned')"
class="gl-mr-2 hidden-icon"
data-testid="hidden-icon"
/>
2021-09-04 01:27:46 +05:30
<a
:href="item.path || item.webUrl || ''"
:title="item.title"
:class="{ 'gl-text-gray-400!': item.isLoading }"
2021-11-11 11:23:49 +05:30
class="js-no-trigger"
2021-09-04 01:27:46 +05:30
@mousemove.stop
>{{ item.title }}</a
>
2018-12-13 13:39:08 +05:30
</h4>
</div>
2021-01-29 00:20:46 +05:30
<div v-if="showLabelFooter" class="board-card-labels gl-mt-2 gl-display-flex gl-flex-wrap">
2019-12-21 20:55:43 +05:30
<template v-for="label in orderedLabels">
2020-04-08 14:13:33 +05:30
<gl-label
2019-07-31 22:56:46 +05:30
:key="label.id"
2021-06-08 01:23:25 +05:30
class="js-no-trigger"
2020-04-08 14:13:33 +05:30
:background-color="label.color"
:title="label.title"
:description="label.description"
size="sm"
:scoped="showScopedLabel(label)"
2019-07-31 22:56:46 +05:30
@click="filterByLabel(label)"
2020-04-08 14:13:33 +05:30
/>
2019-07-31 22:56:46 +05:30
</template>
2018-12-13 13:39:08 +05:30
</div>
2021-01-29 00:20:46 +05:30
<div
class="board-card-footer gl-display-flex gl-justify-content-space-between gl-align-items-flex-end"
>
2019-02-15 15:39:39 +05:30
<div
2021-01-29 00:20:46 +05:30
class="gl-display-flex align-items-start flex-wrap-reverse board-card-number-container gl-overflow-hidden js-board-card-number-container"
2019-02-15 15:39:39 +05:30
>
2021-09-04 01:27:46 +05:30
<gl-loading-icon v-if="item.isLoading" size="md" class="mt-3" />
2018-11-08 19:23:39 +05:30
<span
2021-04-17 20:07:23 +05:30
v-if="item.referencePath"
2021-01-29 00:20:46 +05:30
class="board-card-number gl-overflow-hidden gl-display-flex gl-mr-3 gl-mt-3"
2021-04-17 20:07:23 +05:30
:class="{ 'gl-font-base': isEpicBoard }"
2018-11-08 19:23:39 +05:30
>
2018-12-13 13:39:08 +05:30
<tooltip-on-truncate
2021-10-27 15:23:28 +05:30
v-if="showReferencePath"
2021-04-17 20:07:23 +05:30
:title="itemReferencePath"
2018-12-13 13:39:08 +05:30
placement="bottom"
2021-04-17 20:07:23 +05:30
class="board-item-path gl-text-truncate gl-font-weight-bold"
>{{ itemReferencePath }}</tooltip-on-truncate
2019-09-30 21:07:59 +05:30
>
2021-04-17 20:07:23 +05:30
{{ itemId }}
2018-11-08 19:23:39 +05:30
</span>
2021-01-29 00:20:46 +05:30
<span class="board-info-items gl-mt-3 gl-display-inline-block">
2021-09-30 23:02:18 +05:30
<span v-if="shouldRenderEpicCountables" data-testid="epic-countables">
<gl-tooltip :target="() => $refs.countBadge" data-testid="epic-countables-tooltip">
<p v-if="allowSubEpics" class="gl-font-weight-bold gl-m-0">
{{ __('Epics') }} &#8226;
<span class="gl-font-weight-normal">
<gl-sprintf :message="__('%{openedEpics} open, %{closedEpics} closed')">
<template #openedEpics>{{ item.descendantCounts.openedEpics }}</template>
<template #closedEpics>{{ item.descendantCounts.closedEpics }}</template>
</gl-sprintf>
</span>
</p>
<p class="gl-font-weight-bold gl-m-0">
{{ __('Issues') }} &#8226;
<span class="gl-font-weight-normal">
<gl-sprintf :message="__('%{openedIssues} open, %{closedIssues} closed')">
<template #openedIssues>{{ item.descendantCounts.openedIssues }}</template>
<template #closedIssues>{{ item.descendantCounts.closedIssues }}</template>
</gl-sprintf>
</span>
</p>
<p class="gl-font-weight-bold gl-m-0">
{{ __('Total weight') }} &#8226;
<span class="gl-font-weight-normal" data-testid="epic-countables-total-weight">
{{ totalWeight }}
</span>
</p>
</gl-tooltip>
<gl-tooltip
v-if="shouldRenderEpicProgress"
:target="() => $refs.progressBadge"
data-testid="epic-progress-tooltip"
>
<p class="gl-font-weight-bold gl-m-0">
{{ __('Progress') }} &#8226;
<span class="gl-font-weight-normal" data-testid="epic-progress-tooltip-content">
<gl-sprintf
:message="__('%{completedWeight} of %{totalWeight} weight completed')"
>
<template #completedWeight>{{
item.descendantWeightSum.closedIssues
}}</template>
<template #totalWeight>{{ totalWeight }}</template>
</gl-sprintf>
</span>
</p>
</gl-tooltip>
2021-11-18 22:05:49 +05:30
<span ref="countBadge" class="board-card-info gl-mr-0 gl-pr-0 gl-pl-3">
2021-09-30 23:02:18 +05:30
<span v-if="allowSubEpics" class="gl-mr-3">
<gl-icon name="epic" />
{{ totalEpicsCount }}
</span>
<span class="gl-mr-3" data-testid="epic-countables-counts-issues">
<gl-icon name="issues" />
{{ totalIssuesCount }}
</span>
<span class="gl-mr-3" data-testid="epic-countables-weight-issues">
<gl-icon name="weight" />
{{ totalWeight }}
</span>
</span>
<span
v-if="shouldRenderEpicProgress"
ref="progressBadge"
2021-11-18 22:05:49 +05:30
class="board-card-info gl-pl-0"
2021-09-30 23:02:18 +05:30
>
<span class="gl-mr-3" data-testid="epic-progress">
<gl-icon name="progress" />
{{ totalProgress }}%
</span>
</span>
</span>
<span v-if="!isEpicBoard">
<issue-due-date
v-if="item.dueDate"
:date="item.dueDate"
:closed="item.closed || Boolean(item.closedAt)"
/>
<issue-time-estimate v-if="item.timeEstimate" :estimate="item.timeEstimate" />
<issue-card-weight
v-if="validIssueWeight(item)"
:weight="item.weight"
@click="filterByWeight(item.weight)"
/>
</span>
2018-12-13 13:39:08 +05:30
</span>
</div>
2021-01-29 00:20:46 +05:30
<div class="board-card-assignee gl-display-flex">
2018-11-08 19:23:39 +05:30
<user-avatar-link
2021-03-08 18:12:59 +05:30
v-for="assignee in cappedAssignees"
2018-11-08 19:23:39 +05:30
:key="assignee.id"
:link-href="assigneeUrl(assignee)"
:img-alt="avatarUrlTitle(assignee)"
2021-03-08 18:12:59 +05:30
:img-src="avatarUrl(assignee)"
2018-12-13 13:39:08 +05:30
:img-size="24"
2018-11-08 19:23:39 +05:30
class="js-no-trigger"
tooltip-placement="bottom"
2018-12-13 13:39:08 +05:30
>
<span class="js-assignee-tooltip">
2021-01-29 00:20:46 +05:30
<span class="gl-font-weight-bold gl-display-block">{{ __('Assignee') }}</span>
2019-09-30 21:07:59 +05:30
{{ assignee.name }}
2018-12-13 13:39:08 +05:30
<span class="text-white-50">@{{ assignee.username }}</span>
</span>
</user-avatar-link>
2018-11-08 19:23:39 +05:30
<span
v-if="shouldRenderCounter"
2018-12-13 13:39:08 +05:30
v-gl-tooltip
2018-11-08 19:23:39 +05:30
:title="assigneeCounterTooltip"
class="avatar-counter"
2018-12-13 13:39:08 +05:30
data-placement="bottom"
2019-09-30 21:07:59 +05:30
>{{ assigneeCounterLabel }}</span
2018-11-08 19:23:39 +05:30
>
</div>
</div>
</div>
</template>