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

245 lines
6.8 KiB
Vue
Raw Normal View History

2018-11-08 19:23:39 +05:30
<script>
2019-02-13 22:33:31 +05:30
import { GlTooltipDirective } from '@gitlab/ui';
2018-12-13 13:39:08 +05:30
import { sprintf, __ } from '~/locale';
import Icon from '~/vue_shared/components/icon.vue';
import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
import eventHub from '../eventhub';
import IssueDueDate from './issue_due_date.vue';
import IssueTimeEstimate from './issue_time_estimate.vue';
import boardsStore from '../stores/boards_store';
2018-11-08 19:23:39 +05:30
2018-12-13 13:39:08 +05:30
export default {
components: {
Icon,
UserAvatarLink,
TooltipOnTruncate,
IssueDueDate,
IssueTimeEstimate,
},
directives: {
GlTooltip: GlTooltipDirective,
},
props: {
issue: {
type: Object,
required: true,
},
issueLinkBase: {
type: String,
required: true,
},
list: {
type: Object,
required: false,
default: () => ({}),
},
rootPath: {
type: String,
required: true,
},
updateFilters: {
type: Boolean,
required: false,
default: false,
},
groupId: {
type: Number,
required: false,
default: null,
},
},
data() {
return {
limitBeforeCounter: 2,
maxRender: 3,
maxCounter: 99,
};
},
computed: {
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}+`;
}
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() {
if (this.issue.assignees.length <= this.maxRender) {
return false;
}
2018-11-08 19:23:39 +05:30
2018-12-13 13:39:08 +05:30
return this.issue.assignees.length > this.numberOverLimit;
},
issueId() {
if (this.issue.iid) {
return `#${this.issue.iid}`;
}
return false;
},
showLabelFooter() {
return this.issue.labels.find(l => this.showLabel(l)) !== undefined;
},
issueReferencePath() {
const { referencePath, groupId } = this.issue;
return !groupId ? referencePath.split('#')[0] : null;
},
},
methods: {
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;
}
2018-11-08 19:23:39 +05:30
2018-12-13 13:39:08 +05:30
return index < this.limitBeforeCounter;
},
assigneeUrl(assignee) {
if (!assignee) return '';
return `${this.rootPath}${assignee.username}`;
},
avatarUrlTitle(assignee) {
return `Avatar for ${assignee.name}`;
},
showLabel(label) {
if (!label.id) return false;
return true;
},
filterByLabel(label) {
if (!this.updateFilters) return;
const labelTitle = encodeURIComponent(label.title);
const filter = `label_name[]=${labelTitle}`;
this.applyFilter(filter);
},
filterByWeight(weight) {
if (!this.updateFilters) return;
2018-11-08 19:23:39 +05:30
2018-12-13 13:39:08 +05:30
const issueWeight = encodeURIComponent(weight);
const filter = `weight=${issueWeight}`;
2018-11-08 19:23:39 +05:30
2018-12-13 13:39:08 +05:30
this.applyFilter(filter);
},
applyFilter(filter) {
const filterPath = boardsStore.filter.path.split('&');
const filterIndex = filterPath.indexOf(filter);
2018-11-08 19:23:39 +05:30
2018-12-13 13:39:08 +05:30
if (filterIndex === -1) {
filterPath.push(filter);
} else {
filterPath.splice(filterIndex, 1);
}
2018-11-08 19:23:39 +05:30
2018-12-13 13:39:08 +05:30
boardsStore.filter.path = filterPath.join('&');
2018-11-08 19:23:39 +05:30
2018-12-13 13:39:08 +05:30
boardsStore.updateFiltersUrl();
2018-11-08 19:23:39 +05:30
2018-12-13 13:39:08 +05:30
eventHub.$emit('updateTokens');
},
labelStyle(label) {
return {
backgroundColor: label.color,
color: label.textColor,
};
},
},
};
2018-11-08 19:23:39 +05:30
</script>
<template>
<div>
<div class="board-card-header">
2018-12-13 13:39:08 +05:30
<h4 class="board-card-title append-bottom-0 prepend-top-0">
<icon
2018-11-08 19:23:39 +05:30
v-if="issue.confidential"
2018-12-13 13:39:08 +05:30
v-gl-tooltip
name="eye-slash"
:title="__('Confidential')"
class="confidential-icon append-right-4"
:aria-label="__('Confidential')"
2019-02-13 22:33:31 +05:30
/><a :href="issue.path" :title="issue.title" class="js-no-trigger" @mousemove.stop>{{
issue.title
}}</a>
2018-12-13 13:39:08 +05:30
</h4>
</div>
2019-02-13 22:33:31 +05:30
<div v-if="showLabelFooter" class="board-card-labels prepend-top-4 d-flex flex-wrap">
2018-12-13 13:39:08 +05:30
<button
v-for="label in issue.labels"
v-if="showLabel(label)"
:key="label.id"
v-gl-tooltip
:style="labelStyle(label)"
:title="label.description"
class="badge color-label append-right-4 prepend-top-4"
type="button"
2019-02-13 22:33:31 +05:30
@click="filterByLabel(label);"
2018-12-13 13:39:08 +05:30
>
{{ label.title }}
</button>
</div>
<div class="board-card-footer d-flex justify-content-between align-items-end">
2019-02-13 22:33:31 +05:30
<div
class="d-flex align-items-start flex-wrap-reverse board-card-number-container js-board-card-number-container"
>
2018-11-08 19:23:39 +05:30
<span
2018-12-13 13:39:08 +05:30
v-if="issue.referencePath"
class="board-card-number d-flex append-right-8 prepend-top-8"
2018-11-08 19:23:39 +05:30
>
2018-12-13 13:39:08 +05:30
<tooltip-on-truncate
v-if="issueReferencePath"
:title="issueReferencePath"
placement="bottom"
class="board-issue-path block-truncated bold"
2019-02-13 22:33:31 +05:30
>{{ issueReferencePath }}</tooltip-on-truncate
>#{{ issue.iid }}
2018-11-08 19:23:39 +05:30
</span>
2018-12-13 13:39:08 +05:30
<span class="board-info-items prepend-top-8 d-inline-block">
2019-02-13 22:33:31 +05:30
<issue-due-date v-if="issue.dueDate" :date="issue.dueDate" /><issue-time-estimate
2018-12-13 13:39:08 +05:30
v-if="issue.timeEstimate"
:estimate="issue.timeEstimate"
/>
</span>
</div>
2018-11-08 19:23:39 +05:30
<div class="board-card-assignee">
<user-avatar-link
v-for="(assignee, index) in issue.assignees"
v-if="shouldRenderAssignee(index)"
:key="assignee.id"
:link-href="assigneeUrl(assignee)"
:img-alt="avatarUrlTitle(assignee)"
:img-src="assignee.avatar"
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">
2019-02-13 22:33:31 +05:30
<span class="bold d-block">Assignee</span> {{ 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"
2018-11-08 19:23:39 +05:30
>
{{ assigneeCounterLabel }}
</span>
</div>
</div>
</div>
</template>