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
|
<script>
import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
import { mapActions, mapState } from 'vuex';
import { s__ } from '~/locale';
import Tracking from '~/tracking';
export default {
i18n: {
moveToStartText: s__('Boards|Move to start of list'),
moveToEndText: s__('Boards|Move to end of list'),
},
name: 'BoardCardMoveToPosition',
components: {
GlDropdown,
GlDropdownItem,
},
mixins: [Tracking.mixin()],
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 }) {
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,
});
},
},
};
</script>
<template>
<gl-dropdown
ref="dropdown"
:key="itemIdentifier"
icon="ellipsis_v"
:text="s__('Boards|Move card')"
:text-sr-only="true"
class="move-to-position gl-display-block gl-mb-2 gl-ml-2 gl-mt-n3 gl-mr-n3"
category="tertiary"
:tabindex="index"
no-caret
@keydown.esc.native="$emit('hide')"
>
<div>
<gl-dropdown-item @click.stop="moveToStart">
{{ $options.i18n.moveToStartText }}
</gl-dropdown-item>
<gl-dropdown-item @click.stop="moveToEnd">
{{ $options.i18n.moveToEndText }}
</gl-dropdown-item>
</div>
</gl-dropdown>
</template>
|
