debian-mirror-gitlab/app/assets/javascripts/registry/explorer/pages/details.vue

154 lines
4.2 KiB
Vue
Raw Normal View History

2020-03-13 15:44:24 +05:30
<script>
2020-06-23 00:09:42 +05:30
import { mapState, mapActions } from 'vuex';
import { GlPagination, GlResizeObserverDirective } from '@gitlab/ui';
2020-03-13 15:44:24 +05:30
import { GlBreakpointInstance } from '@gitlab/ui/dist/utils';
import Tracking from '~/tracking';
2020-06-23 00:09:42 +05:30
import DeleteAlert from '../components/details_page/delete_alert.vue';
import DeleteModal from '../components/details_page/delete_modal.vue';
import DetailsHeader from '../components/details_page/details_header.vue';
import TagsTable from '../components/details_page/tags_table.vue';
import TagsLoader from '../components/details_page/tags_loader.vue';
import EmptyTagsState from '../components/details_page/empty_tags_state.vue';
2020-03-13 15:44:24 +05:30
import { decodeAndParse } from '../utils';
import {
2020-06-23 00:09:42 +05:30
ALERT_SUCCESS_TAG,
ALERT_DANGER_TAG,
ALERT_SUCCESS_TAGS,
ALERT_DANGER_TAGS,
} from '../constants/index';
2020-03-13 15:44:24 +05:30
export default {
components: {
2020-06-23 00:09:42 +05:30
DeleteAlert,
DetailsHeader,
2020-03-13 15:44:24 +05:30
GlPagination,
2020-06-23 00:09:42 +05:30
DeleteModal,
TagsTable,
TagsLoader,
EmptyTagsState,
2020-03-13 15:44:24 +05:30
},
directives: {
GlResizeObserver: GlResizeObserverDirective,
},
2020-06-23 00:09:42 +05:30
mixins: [Tracking.mixin()],
2020-03-13 15:44:24 +05:30
data() {
return {
itemsToBeDeleted: [],
isDesktop: true,
2020-06-23 00:09:42 +05:30
deleteAlertType: null,
2020-03-13 15:44:24 +05:30
};
},
computed: {
2020-06-23 00:09:42 +05:30
...mapState(['tagsPagination', 'isLoading', 'config', 'tags']),
2020-03-13 15:44:24 +05:30
imageName() {
const { name } = decodeAndParse(this.$route.params.id);
return name;
},
tracking() {
return {
2020-06-23 00:09:42 +05:30
label:
this.itemsToBeDeleted?.length > 1 ? 'bulk_registry_tag_delete' : 'registry_tag_delete',
2020-03-13 15:44:24 +05:30
};
},
currentPage: {
get() {
return this.tagsPagination.page;
},
set(page) {
2020-04-08 14:13:33 +05:30
this.requestTagsList({ pagination: { page }, params: this.$route.params.id });
2020-03-13 15:44:24 +05:30
},
},
2020-05-24 23:13:21 +05:30
},
mounted() {
this.requestTagsList({ params: this.$route.params.id });
2020-03-13 15:44:24 +05:30
},
methods: {
...mapActions(['requestTagsList', 'requestDeleteTag', 'requestDeleteTags']),
2020-06-23 00:09:42 +05:30
deleteTags(toBeDeletedList) {
this.itemsToBeDeleted = toBeDeletedList.map(name => ({
...this.tags.find(t => t.name === name),
}));
2020-03-13 15:44:24 +05:30
this.track('click_button');
this.$refs.deleteModal.show();
},
2020-06-23 00:09:42 +05:30
handleSingleDelete() {
const [itemToDelete] = this.itemsToBeDeleted;
2020-03-13 15:44:24 +05:30
this.itemsToBeDeleted = [];
2020-04-22 19:07:51 +05:30
return this.requestDeleteTag({ tag: itemToDelete, params: this.$route.params.id })
2020-05-24 23:13:21 +05:30
.then(() => {
2020-06-23 00:09:42 +05:30
this.deleteAlertType = ALERT_SUCCESS_TAG;
2020-05-24 23:13:21 +05:30
})
.catch(() => {
2020-06-23 00:09:42 +05:30
this.deleteAlertType = ALERT_DANGER_TAG;
2020-05-24 23:13:21 +05:30
});
2020-03-13 15:44:24 +05:30
},
handleMultipleDelete() {
const { itemsToBeDeleted } = this;
this.itemsToBeDeleted = [];
2020-04-22 19:07:51 +05:30
return this.requestDeleteTags({
2020-06-23 00:09:42 +05:30
ids: itemsToBeDeleted.map(x => x.name),
2020-03-13 15:44:24 +05:30
params: this.$route.params.id,
2020-04-22 19:07:51 +05:30
})
2020-05-24 23:13:21 +05:30
.then(() => {
2020-06-23 00:09:42 +05:30
this.deleteAlertType = ALERT_SUCCESS_TAGS;
2020-05-24 23:13:21 +05:30
})
.catch(() => {
2020-06-23 00:09:42 +05:30
this.deleteAlertType = ALERT_DANGER_TAGS;
2020-05-24 23:13:21 +05:30
});
2020-03-13 15:44:24 +05:30
},
onDeletionConfirmed() {
this.track('confirm_delete');
2020-06-23 00:09:42 +05:30
if (this.itemsToBeDeleted.length > 1) {
2020-03-13 15:44:24 +05:30
this.handleMultipleDelete();
} else {
2020-06-23 00:09:42 +05:30
this.handleSingleDelete();
2020-03-13 15:44:24 +05:30
}
},
handleResize() {
this.isDesktop = GlBreakpointInstance.isDesktop();
},
},
};
</script>
<template>
2020-04-08 14:13:33 +05:30
<div v-gl-resize-observer="handleResize" class="my-3 w-100 slide-enter-to-element">
2020-06-23 00:09:42 +05:30
<delete-alert
v-model="deleteAlertType"
:garbage-collection-help-page-path="config.garbageCollectionHelpPagePath"
:is-admin="config.isAdmin"
2020-05-24 23:13:21 +05:30
class="my-2"
2020-06-23 00:09:42 +05:30
/>
2020-04-08 14:13:33 +05:30
2020-06-23 00:09:42 +05:30
<details-header :image-name="imageName" />
2020-04-08 14:13:33 +05:30
2020-06-23 00:09:42 +05:30
<tags-table :tags="tags" :is-loading="isLoading" :is-desktop="isDesktop" @delete="deleteTags">
2020-04-08 14:13:33 +05:30
<template #empty>
2020-06-23 00:09:42 +05:30
<empty-tags-state :no-containers-image="config.noContainersImage" />
2020-04-08 14:13:33 +05:30
</template>
2020-06-23 00:09:42 +05:30
<template #loader>
<tags-loader v-once />
</template>
</tags-table>
2020-04-08 14:13:33 +05:30
<gl-pagination
2020-04-22 19:07:51 +05:30
v-if="!isLoading"
2020-04-08 14:13:33 +05:30
ref="pagination"
v-model="currentPage"
:per-page="tagsPagination.perPage"
:total-items="tagsPagination.total"
align="center"
class="w-100"
2020-03-13 15:44:24 +05:30
/>
2020-04-08 14:13:33 +05:30
2020-06-23 00:09:42 +05:30
<delete-modal
2020-04-08 14:13:33 +05:30
ref="deleteModal"
2020-06-23 00:09:42 +05:30
:items-to-be-deleted="itemsToBeDeleted"
@confirmDelete="onDeletionConfirmed"
2020-04-08 14:13:33 +05:30
@cancel="track('cancel_delete')"
2020-06-23 00:09:42 +05:30
/>
2020-03-13 15:44:24 +05:30
</div>
</template>