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
|
<script>
import {
GlButton,
GlButtonGroup,
GlModal,
GlSprintf,
GlTooltipDirective,
GlModalDirective,
} from '@gitlab/ui';
import { s__, sprintf } from '~/locale';
import timeagoMixin from '~/vue_shared/mixins/timeago';
export default {
components: { GlButton, GlButtonGroup, GlModal, GlSprintf },
directives: { GlTooltip: GlTooltipDirective, GlModal: GlModalDirective },
mixins: [timeagoMixin],
props: {
userLists: {
type: Array,
required: true,
},
},
translations: {
createdTimeagoLabel: s__('UserList|created %{timeago}'),
deleteListTitle: s__('UserList|Delete %{name}?'),
deleteListMessage: s__('User list %{name} will be removed. Are you sure?'),
},
modal: {
id: 'deleteListModal',
actionPrimary: {
text: s__('Delete user list'),
attributes: { variant: 'danger', 'data-testid': 'modal-confirm' },
},
},
data() {
return {
deleteUserList: null,
};
},
computed: {
deleteListName() {
return this.deleteUserList?.name;
},
modalTitle() {
return sprintf(this.$options.translations.deleteListTitle, {
name: this.deleteListName,
});
},
},
methods: {
createdTimeago(list) {
return sprintf(this.$options.translations.createdTimeagoLabel, {
timeago: this.timeFormatted(list.created_at),
});
},
displayList(list) {
return list.user_xids.replace(/,/g, ', ');
},
onDelete() {
this.$emit('delete', this.deleteUserList);
},
confirmDeleteList(list) {
this.deleteUserList = list;
},
},
};
</script>
<template>
<div>
<div
v-for="list in userLists"
:key="list.id"
data-testid="ffUserList"
class="gl-border-b-solid gl-border-gray-100 gl-border-b-1 gl-w-full gl-py-4 gl-display-flex gl-justify-content-space-between"
>
<div class="gl-display-flex gl-flex-direction-column gl-overflow-hidden gl-flex-grow-1">
<span data-testid="ffUserListName" class="gl-font-weight-bold gl-mb-2">
{{ list.name }}
</span>
<span
v-gl-tooltip
:title="tooltipTitle(list.created_at)"
data-testid="ffUserListTimestamp"
class="gl-text-gray-300 gl-mb-2"
>
{{ createdTimeago(list) }}
</span>
<span data-testid="ffUserListIds" class="gl-str-truncated">{{ displayList(list) }}</span>
</div>
<gl-button-group class="gl-align-self-start gl-mt-2">
<gl-button
:href="list.path"
category="secondary"
icon="pencil"
data-testid="edit-user-list"
/>
<gl-button
v-gl-modal="$options.modal.id"
category="secondary"
variant="danger"
icon="remove"
data-testid="delete-user-list"
@click="confirmDeleteList(list)"
/>
</gl-button-group>
</div>
<gl-modal
:title="modalTitle"
:modal-id="$options.modal.id"
:action-primary="$options.modal.actionPrimary"
static
@primary="onDelete"
>
<gl-sprintf :message="$options.translations.deleteListMessage">
<template #name>
<b>{{ deleteListName }}</b>
</template>
</gl-sprintf>
</gl-modal>
</div>
</template>
|
