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

196 lines
4.9 KiB
JavaScript
Raw Normal View History

2018-05-09 12:01:36 +05:30
import $ from 'jquery';
2017-08-17 22:00:37 +05:30
import Vue from 'vue';
2018-05-09 12:01:36 +05:30
import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
2017-08-17 22:00:37 +05:30
import eventHub from '../eventhub';
const Store = gl.issueBoards.BoardsStore;
window.gl = window.gl || {};
window.gl.issueBoards = window.gl.issueBoards || {};
gl.issueBoards.IssueCardInner = Vue.extend({
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,
},
2018-03-27 19:54:05 +05:30
groupId: {
type: Number,
required: false,
},
2017-08-17 22:00:37 +05:30
},
data() {
return {
limitBeforeCounter: 3,
maxRender: 4,
maxCounter: 99,
};
},
2017-09-10 17:25:29 +05:30
components: {
2018-05-09 12:01:36 +05:30
UserAvatarLink,
2017-09-10 17:25:29 +05:30
},
2017-08-17 22:00:37 +05:30
computed: {
numberOverLimit() {
return this.issue.assignees.length - this.limitBeforeCounter;
},
assigneeCounterTooltip() {
return `${this.assigneeCounterLabel} more`;
},
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() {
2018-03-17 18:26:18 +05:30
if (this.issue.iid) {
return `#${this.issue.iid}`;
}
return false;
2017-08-17 22:00:37 +05:30
},
showLabelFooter() {
return this.issue.labels.find(l => this.showLabel(l)) !== undefined;
},
},
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;
}
return index < this.limitBeforeCounter;
},
assigneeUrl(assignee) {
return `${this.rootPath}${assignee.username}`;
},
assigneeUrlTitle(assignee) {
return `Assigned to ${assignee.name}`;
},
avatarUrlTitle(assignee) {
return `Avatar for ${assignee.name}`;
},
showLabel(label) {
2017-09-10 17:25:29 +05:30
if (!label.id) return false;
return true;
2017-08-17 22:00:37 +05:30
},
filterByLabel(label, e) {
if (!this.updateFilters) return;
const filterPath = gl.issueBoards.BoardsStore.filter.path.split('&');
const labelTitle = encodeURIComponent(label.title);
const param = `label_name[]=${labelTitle}`;
const labelIndex = filterPath.indexOf(param);
$(e.currentTarget).tooltip('hide');
if (labelIndex === -1) {
filterPath.push(param);
} else {
filterPath.splice(labelIndex, 1);
}
gl.issueBoards.BoardsStore.filter.path = filterPath.join('&');
Store.updateFiltersUrl();
eventHub.$emit('updateTokens');
},
labelStyle(label) {
return {
backgroundColor: label.color,
color: label.textColor,
};
},
},
template: `
<div>
<div class="card-header">
<h4 class="card-title">
<i
class="fa fa-eye-slash confidential-icon"
v-if="issue.confidential"
aria-hidden="true"
/>
<a
class="js-no-trigger"
2018-05-09 12:01:36 +05:30
:href="issue.path"
2017-08-17 22:00:37 +05:30
:title="issue.title">{{ issue.title }}</a>
<span
class="card-number"
2018-03-17 18:26:18 +05:30
v-if="issueId"
2017-08-17 22:00:37 +05:30
>
2018-05-09 12:01:36 +05:30
{{ issue.referencePath }}
2017-08-17 22:00:37 +05:30
</span>
</h4>
<div class="card-assignee">
2017-09-10 17:25:29 +05:30
<user-avatar-link
2017-08-17 22:00:37 +05:30
v-for="(assignee, index) in issue.assignees"
2017-09-10 17:25:29 +05:30
:key="assignee.id"
2017-08-17 22:00:37 +05:30
v-if="shouldRenderAssignee(index)"
2017-09-10 17:25:29 +05:30
class="js-no-trigger"
:link-href="assigneeUrl(assignee)"
:img-alt="avatarUrlTitle(assignee)"
:img-src="assignee.avatar"
:tooltip-text="assigneeUrlTitle(assignee)"
tooltip-placement="bottom"
/>
2017-08-17 22:00:37 +05:30
<span
class="avatar-counter has-tooltip"
:title="assigneeCounterTooltip"
v-if="shouldRenderCounter"
>
{{ assigneeCounterLabel }}
</span>
</div>
</div>
<div
class="card-footer"
v-if="showLabelFooter"
>
<button
class="label color-label has-tooltip"
v-for="label in issue.labels"
type="button"
v-if="showLabel(label)"
@click="filterByLabel(label, $event)"
:style="labelStyle(label)"
:title="label.description"
data-container="body">
{{ label.title }}
</button>
</div>
</div>
`,
});