2018-12-13 13:39:08 +05:30
|
|
|
/* eslint-disable no-underscore-dangle, class-methods-use-this, consistent-return, no-shadow, no-param-reassign */
|
2017-08-17 22:00:37 +05:30
|
|
|
/* global ListIssue */
|
2018-11-08 19:23:39 +05:30
|
|
|
|
2018-11-20 20:47:30 +05:30
|
|
|
import { __ } from '~/locale';
|
2018-11-08 19:23:39 +05:30
|
|
|
import ListLabel from '~/vue_shared/models/label';
|
|
|
|
import ListAssignee from '~/vue_shared/models/assignee';
|
2018-11-20 20:47:30 +05:30
|
|
|
import { urlParamsToObject } from '~/lib/utils/common_utils';
|
2018-12-13 13:39:08 +05:30
|
|
|
import boardsStore from '../stores/boards_store';
|
2017-08-17 22:00:37 +05:30
|
|
|
|
|
|
|
const PER_PAGE = 20;
|
|
|
|
|
2018-11-08 19:23:39 +05:30
|
|
|
const TYPES = {
|
|
|
|
backlog: {
|
|
|
|
isPreset: true,
|
|
|
|
isExpandable: true,
|
|
|
|
isBlank: false,
|
|
|
|
},
|
|
|
|
closed: {
|
|
|
|
isPreset: true,
|
|
|
|
isExpandable: true,
|
|
|
|
isBlank: false,
|
|
|
|
},
|
|
|
|
blank: {
|
|
|
|
isPreset: true,
|
|
|
|
isExpandable: false,
|
|
|
|
isBlank: true,
|
|
|
|
},
|
|
|
|
};
|
|
|
|
|
2017-08-17 22:00:37 +05:30
|
|
|
class List {
|
2018-11-08 19:23:39 +05:30
|
|
|
constructor(obj, defaultAvatar) {
|
2017-08-17 22:00:37 +05:30
|
|
|
this.id = obj.id;
|
|
|
|
this._uid = this.guid();
|
|
|
|
this.position = obj.position;
|
2018-11-20 20:47:30 +05:30
|
|
|
this.title = obj.list_type === 'backlog' ? __('Open') : obj.title;
|
2017-08-17 22:00:37 +05:30
|
|
|
this.type = obj.list_type;
|
2018-11-08 19:23:39 +05:30
|
|
|
|
|
|
|
const typeInfo = this.getTypeInfo(this.type);
|
|
|
|
this.preset = !!typeInfo.isPreset;
|
|
|
|
this.isExpandable = !!typeInfo.isExpandable;
|
2017-09-10 17:25:29 +05:30
|
|
|
this.isExpanded = true;
|
2017-08-17 22:00:37 +05:30
|
|
|
this.page = 1;
|
|
|
|
this.loading = true;
|
|
|
|
this.loadingMore = false;
|
|
|
|
this.issues = [];
|
|
|
|
this.issuesSize = 0;
|
|
|
|
this.defaultAvatar = defaultAvatar;
|
|
|
|
|
|
|
|
if (obj.label) {
|
|
|
|
this.label = new ListLabel(obj.label);
|
2018-11-08 19:23:39 +05:30
|
|
|
} else if (obj.user) {
|
|
|
|
this.assignee = new ListAssignee(obj.user);
|
|
|
|
this.title = this.assignee.name;
|
2017-08-17 22:00:37 +05:30
|
|
|
}
|
|
|
|
|
2018-11-08 19:23:39 +05:30
|
|
|
if (!typeInfo.isBlank && this.id) {
|
2017-08-17 22:00:37 +05:30
|
|
|
this.getIssues().catch(() => {
|
|
|
|
// TODO: handle request error
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
guid() {
|
2018-11-08 19:23:39 +05:30
|
|
|
const s4 = () =>
|
|
|
|
Math.floor((1 + Math.random()) * 0x10000)
|
|
|
|
.toString(16)
|
|
|
|
.substring(1);
|
2017-08-17 22:00:37 +05:30
|
|
|
return `${s4()}${s4()}-${s4()}-${s4()}-${s4()}-${s4()}${s4()}${s4()}`;
|
|
|
|
}
|
|
|
|
|
2018-11-08 19:23:39 +05:30
|
|
|
save() {
|
|
|
|
const entity = this.label || this.assignee;
|
|
|
|
let entityType = '';
|
|
|
|
if (this.label) {
|
|
|
|
entityType = 'label_id';
|
|
|
|
} else {
|
|
|
|
entityType = 'assignee_id';
|
|
|
|
}
|
|
|
|
|
|
|
|
return gl.boardService
|
|
|
|
.createList(entity.id, entityType)
|
2018-03-17 18:26:18 +05:30
|
|
|
.then(res => res.data)
|
2018-11-08 19:23:39 +05:30
|
|
|
.then(data => {
|
2017-08-17 22:00:37 +05:30
|
|
|
this.id = data.id;
|
|
|
|
this.type = data.list_type;
|
|
|
|
this.position = data.position;
|
|
|
|
|
|
|
|
return this.getIssues();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2018-11-08 19:23:39 +05:30
|
|
|
destroy() {
|
2018-12-13 13:39:08 +05:30
|
|
|
const index = boardsStore.state.lists.indexOf(this);
|
|
|
|
boardsStore.state.lists.splice(index, 1);
|
|
|
|
boardsStore.updateNewListDropdown(this.id);
|
2017-08-17 22:00:37 +05:30
|
|
|
|
2018-11-08 19:23:39 +05:30
|
|
|
gl.boardService.destroyList(this.id).catch(() => {
|
|
|
|
// TODO: handle request error
|
|
|
|
});
|
2017-08-17 22:00:37 +05:30
|
|
|
}
|
|
|
|
|
2018-11-08 19:23:39 +05:30
|
|
|
update() {
|
|
|
|
gl.boardService.updateList(this.id, this.position).catch(() => {
|
|
|
|
// TODO: handle request error
|
|
|
|
});
|
2017-08-17 22:00:37 +05:30
|
|
|
}
|
|
|
|
|
2018-11-08 19:23:39 +05:30
|
|
|
nextPage() {
|
2017-08-17 22:00:37 +05:30
|
|
|
if (this.issuesSize > this.issues.length) {
|
|
|
|
if (this.issues.length / PER_PAGE >= 1) {
|
|
|
|
this.page += 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
return this.getIssues(false);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-11-08 19:23:39 +05:30
|
|
|
getIssues(emptyIssues = true) {
|
2018-11-20 20:47:30 +05:30
|
|
|
const data = {
|
2018-12-13 13:39:08 +05:30
|
|
|
...urlParamsToObject(boardsStore.filter.path),
|
2018-11-20 20:47:30 +05:30
|
|
|
page: this.page,
|
|
|
|
};
|
2017-08-17 22:00:37 +05:30
|
|
|
|
|
|
|
if (this.label && data.label_name) {
|
|
|
|
data.label_name = data.label_name.filter(label => label !== this.label.title);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (emptyIssues) {
|
|
|
|
this.loading = true;
|
|
|
|
}
|
|
|
|
|
2018-11-08 19:23:39 +05:30
|
|
|
return gl.boardService
|
|
|
|
.getIssuesForList(this.id, data)
|
2018-03-17 18:26:18 +05:30
|
|
|
.then(res => res.data)
|
2018-11-08 19:23:39 +05:30
|
|
|
.then(data => {
|
2017-08-17 22:00:37 +05:30
|
|
|
this.loading = false;
|
|
|
|
this.issuesSize = data.size;
|
|
|
|
|
|
|
|
if (emptyIssues) {
|
|
|
|
this.issues = [];
|
|
|
|
}
|
|
|
|
|
|
|
|
this.createIssues(data.issues);
|
2018-11-18 11:00:15 +05:30
|
|
|
|
|
|
|
return data;
|
2017-08-17 22:00:37 +05:30
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2018-11-08 19:23:39 +05:30
|
|
|
newIssue(issue) {
|
2017-09-10 17:25:29 +05:30
|
|
|
this.addIssue(issue, null, 0);
|
2017-08-17 22:00:37 +05:30
|
|
|
this.issuesSize += 1;
|
|
|
|
|
2018-11-08 19:23:39 +05:30
|
|
|
return gl.boardService
|
|
|
|
.newIssue(this.id, issue)
|
2018-03-17 18:26:18 +05:30
|
|
|
.then(res => res.data)
|
2018-11-08 19:23:39 +05:30
|
|
|
.then(data => this.onNewIssueResponse(issue, data));
|
2017-08-17 22:00:37 +05:30
|
|
|
}
|
|
|
|
|
2018-11-08 19:23:39 +05:30
|
|
|
createIssues(data) {
|
|
|
|
data.forEach(issueObj => {
|
2017-08-17 22:00:37 +05:30
|
|
|
this.addIssue(new ListIssue(issueObj, this.defaultAvatar));
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2018-11-08 19:23:39 +05:30
|
|
|
addIssue(issue, listFrom, newIndex) {
|
2018-03-17 18:26:18 +05:30
|
|
|
let moveBeforeId = null;
|
|
|
|
let moveAfterId = null;
|
2017-08-17 22:00:37 +05:30
|
|
|
|
|
|
|
if (!this.findIssue(issue.id)) {
|
|
|
|
if (newIndex !== undefined) {
|
|
|
|
this.issues.splice(newIndex, 0, issue);
|
|
|
|
|
|
|
|
if (this.issues[newIndex - 1]) {
|
2018-03-17 18:26:18 +05:30
|
|
|
moveBeforeId = this.issues[newIndex - 1].id;
|
2017-08-17 22:00:37 +05:30
|
|
|
}
|
|
|
|
|
|
|
|
if (this.issues[newIndex + 1]) {
|
2018-03-17 18:26:18 +05:30
|
|
|
moveAfterId = this.issues[newIndex + 1].id;
|
2017-08-17 22:00:37 +05:30
|
|
|
}
|
|
|
|
} else {
|
|
|
|
this.issues.push(issue);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.label) {
|
|
|
|
issue.addLabel(this.label);
|
|
|
|
}
|
|
|
|
|
2018-11-08 19:23:39 +05:30
|
|
|
if (this.assignee) {
|
|
|
|
if (listFrom && listFrom.type === 'assignee') {
|
|
|
|
issue.removeAssignee(listFrom.assignee);
|
|
|
|
}
|
|
|
|
issue.addAssignee(this.assignee);
|
|
|
|
}
|
|
|
|
|
2017-08-17 22:00:37 +05:30
|
|
|
if (listFrom) {
|
|
|
|
this.issuesSize += 1;
|
|
|
|
|
2018-03-17 18:26:18 +05:30
|
|
|
this.updateIssueLabel(issue, listFrom, moveBeforeId, moveAfterId);
|
2017-08-17 22:00:37 +05:30
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-11-08 19:23:39 +05:30
|
|
|
moveIssue(issue, oldIndex, newIndex, moveBeforeId, moveAfterId) {
|
2017-08-17 22:00:37 +05:30
|
|
|
this.issues.splice(oldIndex, 1);
|
|
|
|
this.issues.splice(newIndex, 0, issue);
|
|
|
|
|
2018-11-08 19:23:39 +05:30
|
|
|
gl.boardService.moveIssue(issue.id, null, null, moveBeforeId, moveAfterId).catch(() => {
|
|
|
|
// TODO: handle request error
|
|
|
|
});
|
2017-08-17 22:00:37 +05:30
|
|
|
}
|
|
|
|
|
2018-03-17 18:26:18 +05:30
|
|
|
updateIssueLabel(issue, listFrom, moveBeforeId, moveAfterId) {
|
2018-11-08 19:23:39 +05:30
|
|
|
gl.boardService
|
|
|
|
.moveIssue(issue.id, listFrom.id, this.id, moveBeforeId, moveAfterId)
|
2017-08-17 22:00:37 +05:30
|
|
|
.catch(() => {
|
|
|
|
// TODO: handle request error
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2018-11-08 19:23:39 +05:30
|
|
|
findIssue(id) {
|
2018-03-17 18:26:18 +05:30
|
|
|
return this.issues.find(issue => issue.id === id);
|
2017-08-17 22:00:37 +05:30
|
|
|
}
|
|
|
|
|
2018-11-08 19:23:39 +05:30
|
|
|
removeIssue(removeIssue) {
|
|
|
|
this.issues = this.issues.filter(issue => {
|
2017-08-17 22:00:37 +05:30
|
|
|
const matchesRemove = removeIssue.id === issue.id;
|
|
|
|
|
|
|
|
if (matchesRemove) {
|
|
|
|
this.issuesSize -= 1;
|
|
|
|
issue.removeLabel(this.label);
|
|
|
|
}
|
|
|
|
|
|
|
|
return !matchesRemove;
|
|
|
|
});
|
|
|
|
}
|
2018-11-08 19:23:39 +05:30
|
|
|
|
2018-12-13 13:39:08 +05:30
|
|
|
getTypeInfo(type) {
|
2018-11-08 19:23:39 +05:30
|
|
|
return TYPES[type] || {};
|
|
|
|
}
|
|
|
|
|
2018-12-13 13:39:08 +05:30
|
|
|
onNewIssueResponse(issue, data) {
|
2018-11-08 19:23:39 +05:30
|
|
|
issue.id = data.id;
|
|
|
|
issue.iid = data.iid;
|
|
|
|
issue.project = data.project;
|
|
|
|
issue.path = data.real_path;
|
|
|
|
issue.referencePath = data.reference_path;
|
|
|
|
|
|
|
|
if (this.issuesSize > 1) {
|
|
|
|
const moveBeforeId = this.issues[1].id;
|
|
|
|
gl.boardService.moveIssue(issue.id, null, null, null, moveBeforeId);
|
|
|
|
}
|
|
|
|
}
|
2017-08-17 22:00:37 +05:30
|
|
|
}
|
|
|
|
|
|
|
|
window.List = List;
|
2018-11-08 19:23:39 +05:30
|
|
|
|
|
|
|
export default List;
|