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
|
<script>
import { GlFormGroup, GlIcon } from '@gitlab/ui';
import { getIdFromGraphQLId } from '~/graphql_shared/utils';
import LabelsSelect from '~/sidebar/components/labels/labels_select_widget/labels_select_root.vue';
import { __ } from '~/locale';
export default {
components: {
GlFormGroup,
GlIcon,
LabelsSelect,
},
inject: [
'allowLabelRemove',
'attrWorkspacePath',
'fieldName',
'fullPath',
'labelsFilterBasePath',
'initialLabels',
'issuableType',
'labelType',
'variant',
'workspaceType',
],
data() {
return {
selectedLabels: this.initialLabels || [],
};
},
methods: {
handleUpdateSelectedLabels({ labels }) {
this.selectedLabels = labels.map((label) => ({ ...label, id: getIdFromGraphQLId(label.id) }));
},
handleLabelRemove(labelId) {
this.selectedLabels = this.selectedLabels.filter((label) => label.id !== labelId);
},
},
i18n: {
fieldLabel: __('Labels'),
dropdownButtonText: __('Select label'),
listTitle: __('Select label'),
createTitle: __('Create project label'),
manageTitle: __('Manage project labels'),
emptySelection: __('None'),
},
};
</script>
<template>
<gl-form-group class="row" label-class="gl-display-none">
<label class="col-12 gl-display-flex gl-align-center gl-mb-1">
{{ $options.i18n.fieldLabel }}
<div class="gl-ml-3">
<gl-icon name="labels" />
<span class="gl-font-base gl-line-height-24">{{ selectedLabels.length }}</span>
</div>
</label>
<div class="col-12">
<div class="issuable-form-select-holder">
<input
v-for="selectedLabel in selectedLabels"
:key="selectedLabel.id"
:value="selectedLabel.id"
:name="fieldName"
type="hidden"
/>
<labels-select
class="block labels"
:allow-label-remove="allowLabelRemove"
:allow-multiselect="true"
:show-embedded-labels-list="true"
:full-path="fullPath"
:attr-workspace-path="attrWorkspacePath"
:labels-filter-base-path="labelsFilterBasePath"
:dropdown-button-text="$options.i18n.dropdownButtonText"
:labels-list-title="$options.i18n.listTitle"
:footer-create-label-title="$options.i18n.createTitle"
:footer-manage-label-title="$options.i18n.manageTitle"
:variant="variant"
:workspace-type="workspaceType"
:issuable-type="issuableType"
:label-create-type="labelType"
:selected-labels="selectedLabels"
@updateSelectedLabels="handleUpdateSelectedLabels"
@onLabelRemove="handleLabelRemove"
>
{{ $options.i18n.emptySelection }}
</labels-select>
</div>
</div>
</gl-form-group>
</template>
|
