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
|
<script>
import { n__ } from '~/locale';
import VersionRow from '~/packages_and_registries/package_registry/components/details/version_row.vue';
import PackagesListLoader from '~/packages_and_registries/shared/components/packages_list_loader.vue';
import RegistryList from '~/packages_and_registries/shared/components/registry_list.vue';
import DeleteModal from '~/packages_and_registries/package_registry/components/delete_modal.vue';
import {
CANCEL_DELETE_PACKAGE_VERSIONS_TRACKING_ACTION,
DELETE_PACKAGE_VERSIONS_TRACKING_ACTION,
REQUEST_DELETE_PACKAGE_VERSIONS_TRACKING_ACTION,
} from '~/packages_and_registries/package_registry/constants';
import Tracking from '~/tracking';
export default {
components: {
DeleteModal,
VersionRow,
PackagesListLoader,
RegistryList,
},
mixins: [Tracking.mixin()],
props: {
canDestroy: {
type: Boolean,
required: false,
default: false,
},
versions: {
type: Array,
required: true,
default: () => [],
},
pageInfo: {
type: Object,
required: true,
},
isLoading: {
type: Boolean,
required: false,
default: false,
},
},
data() {
return {
itemsToBeDeleted: [],
};
},
computed: {
listTitle() {
return n__('%d version', '%d versions', this.versions.length);
},
isListEmpty() {
return this.versions.length === 0;
},
},
methods: {
deleteItemsCanceled() {
this.track(CANCEL_DELETE_PACKAGE_VERSIONS_TRACKING_ACTION);
this.itemsToBeDeleted = [];
},
deleteItemsConfirmation() {
this.$emit('delete', this.itemsToBeDeleted);
this.track(DELETE_PACKAGE_VERSIONS_TRACKING_ACTION);
this.itemsToBeDeleted = [];
},
setItemsToBeDeleted(items) {
this.itemsToBeDeleted = items;
this.track(REQUEST_DELETE_PACKAGE_VERSIONS_TRACKING_ACTION);
this.$refs.deletePackagesModal.show();
},
},
};
</script>
<template>
<div>
<div v-if="isLoading">
<packages-list-loader />
</div>
<slot v-else-if="isListEmpty" name="empty-state"></slot>
<div v-else>
<registry-list
:hidden-delete="!canDestroy"
:is-loading="isLoading"
:items="versions"
:pagination="pageInfo"
:title="listTitle"
@delete="setItemsToBeDeleted"
@prev-page="$emit('prev-page')"
@next-page="$emit('next-page')"
>
<template #default="{ first, item, isSelected, selectItem }">
<!-- `first` prop is used to decide whether to show the top border
for the first element. We want to show the top border only when
user has permission to bulk delete versions. -->
<version-row
:first="canDestroy && first"
:package-entity="item"
:selected="isSelected(item)"
@select="selectItem(item)"
/>
</template>
</registry-list>
<delete-modal
ref="deletePackagesModal"
:items-to-be-deleted="itemsToBeDeleted"
@confirm="deleteItemsConfirmation"
@cancel="deleteItemsCanceled"
/>
</div>
</div>
</template>
|
