1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
<script>
import { GlDisclosureDropdown } from '@gitlab/ui';
// eslint-disable-next-line no-restricted-imports
import { mapActions, mapState } from 'vuex';
import Tracking from '~/tracking';
import {
BOARD_CARD_MOVE_TO_POSITIONS_OPTIONS,
BOARD_CARD_MOVE_TO_POSITIONS_START_OPTION,
} from '../constants';
export default {
BOARD_CARD_MOVE_TO_POSITIONS_OPTIONS,
name: 'BoardCardMoveToPosition',
components: {
GlDisclosureDropdown,
},
mixins: [Tracking.mixin()],
inject: ['isApolloBoard'],
props: {
item: {
type: Object,
required: true,
validator: (item) => ['id', 'iid', 'referencePath'].every((key) => item[key]),
},
list: {
type: Object,
required: false,
default: () => ({}),
},
index: {
type: Number,
required: true,
},
listItemsLength: {
type: Number,
required: true,
},
},
computed: {
...mapState(['pageInfoByListId']),
tracking() {
return {
category: 'boards:list',
label: 'move_to_position',
property: `type_card`,
};
},
listHasNextPage() {
return this.pageInfoByListId[this.list.id]?.hasNextPage;
},
itemIdentifier() {
return `${this.item.id}-${this.item.iid}-${this.index}`;
},
isFirstItemInList() {
return this.index === 0;
},
isLastItemInList() {
return this.index === this.listItemsLength - 1;
},
},
methods: {
...mapActions(['moveItem']),
moveToStart() {
this.track('click_toggle_button', {
label: 'move_to_start',
});
/** in case it is the first in the list don't call any action/mutation * */
if (this.isFirstItemInList) {
return;
}
this.moveToPosition({
positionInList: 0,
});
},
moveToEnd() {
this.track('click_toggle_button', {
label: 'move_to_end',
});
/** in case it is the last in the list don't call any action/mutation * */
if (this.isLastItemInList) {
return;
}
this.moveToPosition({
positionInList: -1,
});
},
moveToPosition({ positionInList }) {
if (this.isApolloBoard) {
this.$emit('moveToPosition', positionInList);
} else {
this.moveItem({
itemId: this.item.id,
itemIid: this.item.iid,
itemPath: this.item.referencePath,
fromListId: this.list.id,
toListId: this.list.id,
positionInList,
atIndex: this.index,
allItemsLoadedInList: !this.listHasNextPage,
});
}
},
selectMoveAction({ text }) {
if (text === BOARD_CARD_MOVE_TO_POSITIONS_START_OPTION) {
this.moveToStart();
} else {
this.moveToEnd();
}
},
},
};
</script>
<template>
<gl-disclosure-dropdown
ref="dropdown"
:key="itemIdentifier"
class="move-to-position gl-display-block gl-mb-2 gl-ml-auto gl-mt-n3 gl-mr-n3 js-no-trigger"
category="tertiary"
:items="$options.BOARD_CARD_MOVE_TO_POSITIONS_OPTIONS"
icon="ellipsis_v"
:tabindex="index"
:toggle-text="s__('Boards|Move card')"
:text-sr-only="true"
no-caret
data-testid="board-move-to-position"
@action="selectMoveAction"
/>
</template>
|
