diff options
Diffstat (limited to 'app/assets/javascripts/boards/components/board_list.vue')
-rw-r--r-- | app/assets/javascripts/boards/components/board_list.vue | 48 |
1 files changed, 33 insertions, 15 deletions
diff --git a/app/assets/javascripts/boards/components/board_list.vue b/app/assets/javascripts/boards/components/board_list.vue index 8dca6be853f..849492effab 100644 --- a/app/assets/javascripts/boards/components/board_list.vue +++ b/app/assets/javascripts/boards/components/board_list.vue @@ -6,12 +6,13 @@ import { sortableStart, sortableEnd } from '~/boards/mixins/sortable_default_opt import { sprintf, __ } from '~/locale'; import defaultSortableConfig from '~/sortable/sortable_config'; import Tracking from '~/tracking'; -import { toggleFormEventPrefix } from '../constants'; +import { toggleFormEventPrefix, DraggableItemTypes } from '../constants'; import eventHub from '../eventhub'; import BoardCard from './board_card.vue'; import BoardNewIssue from './board_new_issue.vue'; export default { + draggableItemTypes: DraggableItemTypes, name: 'BoardList', i18n: { loading: __('Loading'), @@ -27,11 +28,6 @@ export default { GlIntersectionObserver, }, mixins: [Tracking.mixin()], - inject: { - canAdminList: { - default: false, - }, - }, props: { disabled: { type: Boolean, @@ -89,8 +85,8 @@ export default { return !this.isEpicBoard && this.list.listType !== 'closed' && this.showIssueForm; }, listRef() { - // When list is draggable, the reference to the list needs to be accessed differently - return this.canAdminList ? this.$refs.list.$el : this.$refs.list; + // When list is draggable, the reference to the list needs to be accessed differently + return this.canMoveIssue ? this.$refs.list.$el : this.$refs.list; }, showingAllItems() { return this.boardItems.length === this.listItemsCount; @@ -100,8 +96,11 @@ export default { ? this.$options.i18n.showingAllEpics : this.$options.i18n.showingAllIssues; }, + canMoveIssue() { + return !this.disabled; + }, treeRootWrapper() { - return this.canAdminList && !this.listsFlags[this.list.id]?.addItemToListInProgress + return this.canMoveIssue && !this.listsFlags[this.list.id]?.addItemToListInProgress ? Draggable : 'ul'; }, @@ -116,7 +115,7 @@ export default { value: this.boardItems, }; - return this.canAdminList ? options : {}; + return this.canMoveIssue ? options : {}; }, }, watch: { @@ -172,15 +171,33 @@ export default { this.loadNextPage(); } }, - handleDragOnStart() { + handleDragOnStart({ + item: { + dataset: { draggableItemType }, + }, + }) { + if (draggableItemType !== DraggableItemTypes.card) { + return; + } + sortableStart(); this.track('drag_card', { label: 'board' }); }, - handleDragOnEnd(params) { + handleDragOnEnd({ + newIndex: originalNewIndex, + oldIndex, + from, + to, + item: { + dataset: { draggableItemType, itemId, itemIid, itemPath }, + }, + }) { + if (draggableItemType !== DraggableItemTypes.card) { + return; + } + sortableEnd(); - const { oldIndex, from, to, item } = params; - let { newIndex } = params; - const { itemId, itemIid, itemPath } = item.dataset; + let newIndex = originalNewIndex; let { children } = to; let moveBeforeId; let moveAfterId; @@ -267,6 +284,7 @@ export default { :index="index" :list="list" :item="item" + :data-draggable-item-type="$options.draggableItemTypes.card" :disabled="disabled" /> <gl-intersection-observer @appear="onReachingListBottom"> |