140 lines
3.4 KiB
JavaScript
140 lines
3.4 KiB
JavaScript
import Vue from 'vue';
|
|
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,
|
|
},
|
|
},
|
|
computed: {
|
|
cardUrl() {
|
|
return `${this.issueLinkBase}/${this.issue.id}`;
|
|
},
|
|
assigneeUrl() {
|
|
return `${this.rootPath}${this.issue.assignee.username}`;
|
|
},
|
|
assigneeUrlTitle() {
|
|
return `Assigned to ${this.issue.assignee.name}`;
|
|
},
|
|
avatarUrlTitle() {
|
|
return `Avatar for ${this.issue.assignee.name}`;
|
|
},
|
|
issueId() {
|
|
return `#${this.issue.id}`;
|
|
},
|
|
showLabelFooter() {
|
|
return this.issue.labels.find(l => this.showLabel(l)) !== undefined;
|
|
},
|
|
},
|
|
methods: {
|
|
showLabel(label) {
|
|
if (!this.list) return true;
|
|
|
|
return !this.list.label || label.id !== this.list.label.id;
|
|
},
|
|
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"
|
|
:href="cardUrl"
|
|
:title="issue.title">{{ issue.title }}</a>
|
|
<span
|
|
class="card-number"
|
|
v-if="issue.id"
|
|
>
|
|
{{ issueId }}
|
|
</span>
|
|
</h4>
|
|
<a
|
|
class="card-assignee has-tooltip js-no-trigger"
|
|
:href="assigneeUrl"
|
|
:title="assigneeUrlTitle"
|
|
v-if="issue.assignee"
|
|
data-container="body"
|
|
>
|
|
<img
|
|
class="avatar avatar-inline s20 js-no-trigger"
|
|
:src="issue.assignee.avatar"
|
|
width="20"
|
|
height="20"
|
|
:alt="avatarUrlTitle"
|
|
/>
|
|
</a>
|
|
</div>
|
|
<div class="card-footer" v-if="showLabelFooter">
|
|
<button
|
|
class="label color-label has-tooltip js-no-trigger"
|
|
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>
|
|
`,
|
|
});
|