summaryrefslogtreecommitdiff
path: root/app/assets
diff options
context:
space:
mode:
Diffstat (limited to 'app/assets')
-rw-r--r--app/assets/javascripts/boards/components/board_card.vue14
-rw-r--r--app/assets/javascripts/boards/components/board_list.vue72
-rw-r--r--app/assets/javascripts/boards/index.js1
-rw-r--r--app/assets/javascripts/boards/models/list.js31
-rw-r--r--app/assets/javascripts/boards/stores/boards_store.js15
5 files changed, 89 insertions, 44 deletions
diff --git a/app/assets/javascripts/boards/components/board_card.vue b/app/assets/javascripts/boards/components/board_card.vue
index 6f9eb465dc2..12d68256598 100644
--- a/app/assets/javascripts/boards/components/board_card.vue
+++ b/app/assets/javascripts/boards/components/board_card.vue
@@ -50,8 +50,7 @@ export default {
return this.detailIssue.issue && this.detailIssue.issue.id === this.issue.id;
},
multiSelectVisible() {
- const ids = this.multiSelect.list.map(issue => issue.id);
- return ids.indexOf(this.issue.id) !== -1;
+ return this.multiSelect.list.findIndex(issue => issue.id === this.issue.id) > -1;
},
canMultiSelect() {
return gon.features && gon.features.multiSelectBoard;
@@ -71,12 +70,13 @@ export default {
// If CMD or CTRL is clicked
const isMultiSelect = this.canMultiSelect && (e.ctrlKey || e.metaKey);
- if (
- boardsStore.detail.issue &&
- boardsStore.detail.issue.id === this.issue.id &&
- !isMultiSelect
- ) {
+
+ if (boardsStore.detail.issue && boardsStore.detail.issue.id === this.issue.id) {
eventHub.$emit('clearDetailIssue', isMultiSelect);
+
+ if (isMultiSelect) {
+ eventHub.$emit('newDetailIssue', this.issue, isMultiSelect);
+ }
} else {
eventHub.$emit('newDetailIssue', this.issue, isMultiSelect);
boardsStore.setListDetail(this.list);
diff --git a/app/assets/javascripts/boards/components/board_list.vue b/app/assets/javascripts/boards/components/board_list.vue
index 430db41aeaa..38c008e86c4 100644
--- a/app/assets/javascripts/boards/components/board_list.vue
+++ b/app/assets/javascripts/boards/components/board_list.vue
@@ -104,6 +104,7 @@ export default {
multiSelectOpts.multiDrag = true;
multiSelectOpts.selectedClass = 'js-multi-select';
multiSelectOpts.animation = 500;
+ // multiSelectOpts.multiDragKey = 'shift'
}
const options = getBoardSortableDefaultOptions({
@@ -166,30 +167,27 @@ export default {
const { list } = card;
- let issue = list.findIssue(Number(e.item.dataset.issueId));
-
- if (e.items && e.items.length) {
- issue = [];
- e.items.forEach(item => {
- issue.push(list.findIssue(Number(item.dataset.issueId)));
- });
- }
+ const issue = list.findIssue(Number(e.item.dataset.issueId));
boardsStore.startMoving(list, issue);
sortableStart();
},
onAdd: e => {
- if (e.items && e.items.length) {
- // Not using e.newIndex here instead taking
- // min of all the newIndicies
- // Whenever the we select multiple items and drag
- const newIndex = Math.min(...e.newIndicies.map(obj => obj.index));
-
+ const { items = [], newIndicies = [] } = e;
+ if (items.length) {
+ // Not using e.newIndex here instead taking a min of all
+ // the newIndicies. Basically we have to find that during
+ // a drop which is the index we're going to start putting
+ // all the dropped elements from.
+ console.log(newIndicies.map(obj => obj.index))
+ const newIndex = Math.min(...newIndicies.map(obj => obj.index).filter(i => i !== -1));
+ console.log(newIndex);
+ const issues = items.map(item => boardsStore.moving.list.findIssue(Number(item.dataset.issueId)));
boardsStore.moveMultipleIssuesToList(
boardsStore.moving.list,
this.list,
- boardsStore.moving.issue,
+ issues,
newIndex,
);
@@ -221,15 +219,20 @@ export default {
onUpdate: e => {
const sortedArray = this.sortable.toArray().filter(id => id !== '-1');
- if (e.items && e.items.length) {
- const newIndex = Math.min(...e.newIndicies.map(obj => obj.index));
+ const { items = [], newIndicies = [], oldIndicies = [] } = e;
+ if (items.length) {
+ const newIndex = Math.min(...newIndicies.map(obj => obj.index));
+ const issues = items.map(item => boardsStore.moving.list.findIssue(Number(item.dataset.issueId)));
boardsStore.moveMultipleIssuesInList(
this.list,
- boardsStore.moving.issue,
- e.oldIndex,
+ issues,
+ oldIndicies.map(obj => obj.index),
newIndex,
sortedArray,
);
+ e.items.forEach(el => {
+ Sortable.utils.deselect(el);
+ });
boardsStore.clearMultiSelect();
return;
}
@@ -245,6 +248,29 @@ export default {
onMove(e) {
return !e.related.classList.contains('board-list-count');
},
+ onSelect(e) {
+ const {
+ item: { classList },
+ } = e;
+
+ if (
+ classList &&
+ classList.contains('js-multi-select') &&
+ !classList.contains('multi-select')
+ ) {
+ Sortable.utils.deselect(e.item);
+ }
+ },
+ onDeselect: (e) => {
+ const {
+ item: { dataset, classList },
+ } = e;
+
+ if (classList && classList.contains('multi-select') && !classList.contains('js-multi-select')) {
+ const issue = this.list.findIssue(Number(dataset.issueId));
+ boardsStore.toggleMultiSelect(issue);
+ }
+ },
});
this.sortable = Sortable.create(this.$refs.list, options);
@@ -289,6 +315,11 @@ export default {
this.loadNextPage();
}
},
+ foo(issues) {
+ console.log(this.list.title);
+ console.log(issues.map(issue => issue.id));
+ return issues;
+ }
},
};
</script>
@@ -316,9 +347,10 @@ export default {
class="board-list w-100 h-100 list-unstyled mb-0 p-1 js-board-list"
>
<board-card
- v-for="(issue, index) in issues"
+ v-for="(issue, index) in foo(issues)"
ref="issue"
:key="issue.id"
+ :foo="issue.id"
:index="index"
:list="list"
:issue="issue"
diff --git a/app/assets/javascripts/boards/index.js b/app/assets/javascripts/boards/index.js
index 86b10dc4b61..18da92ebd31 100644
--- a/app/assets/javascripts/boards/index.js
+++ b/app/assets/javascripts/boards/index.js
@@ -195,7 +195,6 @@ export default () => {
clearDetailIssue(multiSelect = false) {
if (multiSelect) {
boardsStore.clearMultiSelect();
- return;
}
boardsStore.clearDetailIssue();
},
diff --git a/app/assets/javascripts/boards/models/list.js b/app/assets/javascripts/boards/models/list.js
index dc44f632551..bde00d5de94 100644
--- a/app/assets/javascripts/boards/models/list.js
+++ b/app/assets/javascripts/boards/models/list.js
@@ -5,6 +5,7 @@ import { __ } from '~/locale';
import ListLabel from './label';
import ListAssignee from './assignee';
import { urlParamsToObject } from '~/lib/utils/common_utils';
+import flash from '~/flash';
import boardsStore from '../stores/boards_store';
import ListMilestone from './milestone';
@@ -193,7 +194,7 @@ class List {
this.issues.splice(newIndex, 0, ...issues);
} else {
- Array.prototype.push.apply(this.issues, issues);
+ this.issues.push(...issues);
}
if (this.label) {
@@ -276,15 +277,15 @@ class List {
});
}
- moveMultipleIssues(issues, oldIndex, newIndex, moveBeforeId, moveAfterId) {
- this.issues.splice(oldIndex, issues.length);
+ moveMultipleIssues(issues, oldIndicies, newIndex, moveBeforeId, moveAfterId) {
+ oldIndicies.reverse().forEach(index => {
+ this.issues.splice(index, 1);
+ });
this.issues.splice(newIndex, 0, ...issues);
gl.boardService
.moveMultipleIssues(issues.map(issue => issue.id), null, null, moveBeforeId, moveAfterId)
- .catch(() => {
- // TODO: handle request error
- });
+ .catch(() => flash(__('Something went wrong on our end.')));
}
updateIssueLabel(issue, listFrom, moveBeforeId, moveAfterId) {
@@ -304,15 +305,27 @@ class List {
moveBeforeId,
moveAfterId,
)
- .catch(() => {
- // TODO: handle error
- });
+ .catch(() => flash(__('Something went wrong on our end.')));
}
findIssue(id) {
return this.issues.find(issue => issue.id === id);
}
+ removeMultipleIssues(removeIssues) {
+ const ids = removeIssues.map(issue => issue.id);
+ debugger;
+ this.issues = this.issues.filter(issue => {
+ const matchesRemove = ids.findIndex(id => id === issue.id) > -1;
+ if (matchesRemove) {
+ this.issuesSize -= 1;
+ issue.removeLabel(this.label);
+ }
+ return !matchesRemove;
+ });
+ console.log(this.issues);
+ }
+
removeIssue(removeIssue) {
this.issues = this.issues.filter(issue => {
const matchesRemove = removeIssue.id === issue.id;
diff --git a/app/assets/javascripts/boards/stores/boards_store.js b/app/assets/javascripts/boards/stores/boards_store.js
index 0c65178e1fd..5425bd64429 100644
--- a/app/assets/javascripts/boards/stores/boards_store.js
+++ b/app/assets/javascripts/boards/stores/boards_store.js
@@ -173,9 +173,14 @@ const boardsStore = {
currentList.removeIssue(issue);
});
});
-
+ if (this.shouldRemoveIssue(listFrom, listTo)) {
+ listFrom.removeMultipleIssues(issues);
+ }
listTo.addMultipleIssues(issues, listFrom, newIndex);
} else {
+ if (this.shouldRemoveIssue(listFrom, listTo)) {
+ listFrom.removeMultipleIssues(issues);
+ }
// Add to new lists issues if it doesn't already exist
listTo.addMultipleIssues(issues, listFrom, newIndex);
}
@@ -214,10 +219,6 @@ const boardsStore = {
list.removeIssue(issue);
});
});
- } else if (this.shouldRemoveIssue(listFrom, listTo)) {
- issues.forEach(issue => {
- listFrom.removeIssue(issue);
- });
}
},
@@ -282,11 +283,11 @@ const boardsStore = {
list.moveIssue(issue, oldIndex, newIndex, beforeId, afterId);
},
- moveMultipleIssuesInList(list, issues, oldIndex, newIndex, idArray) {
+ moveMultipleIssuesInList(list, issues, oldIndicies, newIndex, idArray) {
const beforeId = parseInt(idArray[newIndex - 1], 10) || null;
const afterId = parseInt(idArray[newIndex + issues.length], 10) || null;
- list.moveMultipleIssues(issues, oldIndex, newIndex, beforeId, afterId);
+ list.moveMultipleIssues(issues, oldIndicies, newIndex, beforeId, afterId);
},
findList(key, val, type = 'label') {
const filteredList = this.state.lists.filter(list => {
View Lorry Controller Status