debian-mirror-gitlab/app/assets/javascripts/groups/components/app.vue

278 lines
7.4 KiB
Vue
Raw Normal View History

2018-03-17 18:26:18 +05:30
<script>
2021-01-29 00:20:46 +05:30
import { GlLoadingIcon, GlModal } from '@gitlab/ui';
2021-09-30 23:02:18 +05:30
import createFlash from '~/flash';
2021-03-11 19:13:27 +05:30
import { HIDDEN_CLASS } from '~/lib/utils/constants';
2021-09-30 23:02:18 +05:30
import { mergeUrlParams, getParameterByName } from '~/lib/utils/url_utility';
2021-03-11 19:13:27 +05:30
import { __, s__, sprintf } from '~/locale';
2018-03-17 18:26:18 +05:30
2018-11-20 20:47:30 +05:30
import { COMMON_STR, CONTENT_LIST_CLASS } from '../constants';
2021-03-11 19:13:27 +05:30
import eventHub from '../event_hub';
2018-03-17 18:26:18 +05:30
import groupsComponent from './groups.vue';
export default {
components: {
groupsComponent,
2021-01-29 00:20:46 +05:30
GlModal,
2018-12-13 13:39:08 +05:30
GlLoadingIcon,
2018-03-17 18:26:18 +05:30
},
props: {
2018-11-20 20:47:30 +05:30
action: {
type: String,
required: false,
default: '',
},
containerId: {
type: String,
required: false,
default: '',
},
2018-03-17 18:26:18 +05:30
store: {
type: Object,
required: true,
},
service: {
type: Object,
required: true,
},
hideProjects: {
type: Boolean,
required: true,
},
},
data() {
return {
2022-04-04 11:22:00 +05:30
isModalVisible: false,
2018-03-17 18:26:18 +05:30
isLoading: true,
isSearchEmpty: false,
searchEmptyMessage: '',
targetGroup: null,
targetParentGroup: null,
};
},
computed: {
2021-01-29 00:20:46 +05:30
primaryProps() {
return {
text: __('Leave group'),
attributes: [{ variant: 'warning' }, { category: 'primary' }],
};
},
cancelProps() {
return {
text: __('Cancel'),
};
},
groupLeaveConfirmationMessage() {
if (!this.targetGroup) {
return '';
}
return sprintf(s__('GroupsTree|Are you sure you want to leave the "%{fullName}" group?'), {
fullName: this.targetGroup.fullName,
});
},
2018-03-17 18:26:18 +05:30
groups() {
return this.store.getGroups();
},
pageInfo() {
return this.store.getPaginationInfo();
},
},
created() {
2018-05-09 12:01:36 +05:30
this.searchEmptyMessage = this.hideProjects
? COMMON_STR.GROUP_SEARCH_EMPTY
: COMMON_STR.GROUP_PROJECT_SEARCH_EMPTY;
2018-03-17 18:26:18 +05:30
2018-11-20 20:47:30 +05:30
eventHub.$on(`${this.action}fetchPage`, this.fetchPage);
eventHub.$on(`${this.action}toggleChildren`, this.toggleChildren);
eventHub.$on(`${this.action}showLeaveGroupModal`, this.showLeaveGroupModal);
eventHub.$on(`${this.action}updatePagination`, this.updatePagination);
eventHub.$on(`${this.action}updateGroups`, this.updateGroups);
2018-03-17 18:26:18 +05:30
},
mounted() {
this.fetchAllGroups();
2018-11-20 20:47:30 +05:30
if (this.containerId) {
this.containerEl = document.getElementById(this.containerId);
}
2018-03-17 18:26:18 +05:30
},
beforeDestroy() {
2018-11-20 20:47:30 +05:30
eventHub.$off(`${this.action}fetchPage`, this.fetchPage);
eventHub.$off(`${this.action}toggleChildren`, this.toggleChildren);
eventHub.$off(`${this.action}showLeaveGroupModal`, this.showLeaveGroupModal);
eventHub.$off(`${this.action}updatePagination`, this.updatePagination);
eventHub.$off(`${this.action}updateGroups`, this.updateGroups);
2018-03-17 18:26:18 +05:30
},
methods: {
2022-04-04 11:22:00 +05:30
hideModal() {
this.isModalVisible = false;
},
showModal() {
this.isModalVisible = true;
},
2018-11-20 20:47:30 +05:30
fetchGroups({ parentId, page, filterGroupsBy, sortBy, archived, updatePagination }) {
2018-05-09 12:01:36 +05:30
return this.service
.getGroups(parentId, page, filterGroupsBy, sortBy, archived)
2021-03-08 18:12:59 +05:30
.then((res) => {
2018-05-09 12:01:36 +05:30
if (updatePagination) {
this.updatePagination(res.headers);
}
2019-12-04 20:38:33 +05:30
return res.data;
2018-05-09 12:01:36 +05:30
})
.catch(() => {
this.isLoading = false;
2021-03-08 18:12:59 +05:30
window.scrollTo({ top: 0, behavior: 'smooth' });
2018-03-17 18:26:18 +05:30
2021-09-30 23:02:18 +05:30
createFlash({ message: COMMON_STR.FAILURE });
2018-05-09 12:01:36 +05:30
});
2018-03-17 18:26:18 +05:30
},
fetchAllGroups() {
const page = getParameterByName('page') || null;
const sortBy = getParameterByName('sort') || null;
const archived = getParameterByName('archived') || null;
const filterGroupsBy = getParameterByName('filter') || null;
this.isLoading = true;
2020-05-24 23:13:21 +05:30
return this.fetchGroups({
2018-03-17 18:26:18 +05:30
page,
filterGroupsBy,
sortBy,
archived,
updatePagination: true,
2021-03-08 18:12:59 +05:30
}).then((res) => {
2018-03-17 18:26:18 +05:30
this.isLoading = false;
this.updateGroups(res, Boolean(filterGroupsBy));
});
},
2021-11-11 11:23:49 +05:30
fetchPage({ page, filterGroupsBy, sortBy, archived }) {
2018-03-17 18:26:18 +05:30
this.isLoading = true;
2020-05-24 23:13:21 +05:30
return this.fetchGroups({
2018-03-17 18:26:18 +05:30
page,
filterGroupsBy,
sortBy,
archived,
updatePagination: true,
2021-03-08 18:12:59 +05:30
}).then((res) => {
2018-03-17 18:26:18 +05:30
this.isLoading = false;
2021-03-08 18:12:59 +05:30
window.scrollTo({ top: 0, behavior: 'smooth' });
2018-03-17 18:26:18 +05:30
const currentPath = mergeUrlParams({ page }, window.location.href);
2018-05-09 12:01:36 +05:30
window.history.replaceState(
{
page: currentPath,
},
document.title,
currentPath,
);
2018-03-17 18:26:18 +05:30
this.updateGroups(res);
});
},
toggleChildren(group) {
const parentGroup = group;
if (!parentGroup.isOpen) {
if (parentGroup.children.length === 0) {
parentGroup.isChildrenLoading = true;
this.fetchGroups({
parentId: parentGroup.id,
2018-05-09 12:01:36 +05:30
})
2021-03-08 18:12:59 +05:30
.then((res) => {
2018-05-09 12:01:36 +05:30
this.store.setGroupChildren(parentGroup, res);
})
.catch(() => {
parentGroup.isChildrenLoading = false;
});
2018-03-17 18:26:18 +05:30
} else {
parentGroup.isOpen = true;
}
} else {
parentGroup.isOpen = false;
}
},
showLeaveGroupModal(group, parentGroup) {
this.targetGroup = group;
this.targetParentGroup = parentGroup;
2022-04-04 11:22:00 +05:30
this.showModal();
2018-03-17 18:26:18 +05:30
},
leaveGroup() {
this.targetGroup.isBeingRemoved = true;
2018-05-09 12:01:36 +05:30
this.service
.leaveGroup(this.targetGroup.leavePath)
2021-03-08 18:12:59 +05:30
.then((res) => {
window.scrollTo({ top: 0, behavior: 'smooth' });
2018-03-17 18:26:18 +05:30
this.store.removeGroup(this.targetGroup, this.targetParentGroup);
2021-01-29 00:20:46 +05:30
this.$toast.show(res.data.notice);
2018-03-17 18:26:18 +05:30
})
2021-03-08 18:12:59 +05:30
.catch((err) => {
2018-03-17 18:26:18 +05:30
let message = COMMON_STR.FAILURE;
if (err.status === 403) {
message = COMMON_STR.LEAVE_FORBIDDEN;
}
2021-09-30 23:02:18 +05:30
createFlash({ message });
2018-03-17 18:26:18 +05:30
this.targetGroup.isBeingRemoved = false;
});
},
2018-11-20 20:47:30 +05:30
showEmptyState() {
const { containerEl } = this;
const contentListEl = containerEl.querySelector(CONTENT_LIST_CLASS);
const emptyStateEl = containerEl.querySelector('.empty-state');
if (contentListEl) {
contentListEl.remove();
}
if (emptyStateEl) {
emptyStateEl.classList.remove(HIDDEN_CLASS);
}
},
2018-03-17 18:26:18 +05:30
updatePagination(headers) {
this.store.setPaginationInfo(headers);
},
updateGroups(groups, fromSearch) {
2018-11-20 20:47:30 +05:30
const hasGroups = groups && groups.length > 0;
this.isSearchEmpty = !hasGroups;
2018-03-17 18:26:18 +05:30
if (fromSearch) {
this.store.setSearchedGroups(groups);
} else {
this.store.setGroups(groups);
}
2018-11-20 20:47:30 +05:30
if (this.action && !hasGroups && !fromSearch) {
this.showEmptyState();
}
2018-03-17 18:26:18 +05:30
},
},
};
</script>
<template>
<div>
2018-12-05 23:21:45 +05:30
<gl-loading-icon
2018-03-17 18:26:18 +05:30
v-if="isLoading"
:label="s__('GroupsTree|Loading groups')"
2019-07-07 11:18:12 +05:30
size="md"
2018-11-08 19:23:39 +05:30
class="loading-animation prepend-top-20"
2018-03-17 18:26:18 +05:30
/>
<groups-component
2021-01-29 00:20:46 +05:30
v-else
2018-03-17 18:26:18 +05:30
:groups="groups"
:search-empty="isSearchEmpty"
:search-empty-message="searchEmptyMessage"
:page-info="pageInfo"
2018-11-20 20:47:30 +05:30
:action="action"
2018-03-17 18:26:18 +05:30
/>
2021-01-29 00:20:46 +05:30
<gl-modal
modal-id="leave-group-modal"
2022-04-04 11:22:00 +05:30
:visible="isModalVisible"
2018-03-17 18:26:18 +05:30
:title="__('Are you sure?')"
2021-01-29 00:20:46 +05:30
:action-primary="primaryProps"
:action-cancel="cancelProps"
@primary="leaveGroup"
2022-04-04 11:22:00 +05:30
@hide="hideModal"
2021-01-29 00:20:46 +05:30
>
{{ groupLeaveConfirmationMessage }}
</gl-modal>
2018-03-17 18:26:18 +05:30
</div>
</template>