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
|
<script>
import { GlFormRadio, GlFormRadioGroup, GlTooltipDirective as GlTooltip } from '@gitlab/ui';
import { mapActions, mapGetters, mapState } from 'vuex';
import BoardAddNewColumnForm from '~/boards/components/board_add_new_column_form.vue';
export default {
components: {
BoardAddNewColumnForm,
GlFormRadio,
GlFormRadioGroup,
},
directives: {
GlTooltip,
},
inject: ['scopedLabelsAvailable'],
data() {
return {
selectedId: null,
selectedLabel: null,
};
},
computed: {
...mapState(['labels', 'labelsLoading']),
...mapGetters(['getListByLabelId']),
columnForSelected() {
return this.getListByLabelId(this.selectedId);
},
},
created() {
this.filterItems();
},
methods: {
...mapActions(['createList', 'fetchLabels', 'highlightList', 'setAddColumnFormVisibility']),
addList() {
if (!this.selectedLabel) {
return;
}
this.setAddColumnFormVisibility(false);
if (this.columnForSelected) {
const listId = this.columnForSelected.id;
this.highlightList(listId);
return;
}
this.createList({ labelId: this.selectedId });
},
filterItems(searchTerm) {
this.fetchLabels(searchTerm);
},
setSelectedItem(selectedId) {
const label = this.labels.find(({ id }) => id === selectedId);
if (!selectedId || !label) {
this.selectedLabel = null;
} else {
this.selectedLabel = { ...label };
}
},
},
};
</script>
<template>
<board-add-new-column-form
:loading="labelsLoading"
:none-selected="__('Select a label')"
:search-placeholder="__('Search labels')"
:selected-id="selectedId"
@filter-items="filterItems"
@add-list="addList"
>
<template #selected>
<template v-if="selectedLabel">
<span
class="dropdown-label-box gl-top-0 gl-flex-shrink-0"
:style="{
backgroundColor: selectedLabel.color,
}"
></span>
<div class="gl-text-truncate">{{ selectedLabel.title }}</div>
</template>
</template>
<template #items>
<gl-form-radio-group
v-if="labels.length > 0"
v-model="selectedId"
class="gl-overflow-y-auto gl-px-5 gl-pt-3"
@change="setSelectedItem"
>
<label
v-for="label in labels"
:key="label.id"
class="gl-display-flex gl-mb-5 gl-font-weight-normal gl-overflow-break-word"
>
<gl-form-radio :value="label.id" />
<span
class="dropdown-label-box gl-top-0 gl-flex-shrink-0"
:style="{
backgroundColor: label.color,
}"
></span>
<span>{{ label.title }}</span>
</label>
</gl-form-radio-group>
</template>
</board-add-new-column-form>
</template>
|
