diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2018-01-11 12:11:21 +0000 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2018-01-11 12:11:21 +0000 |
commit | ec94d906b7cb3e5854834e823318a32e161e30a0 (patch) | |
tree | 8b055b92c92ccdb8d38b30c5c51cdcc6cc115ed3 /app | |
parent | c411ce766c8d93b3efabc42a79f33d252eaafe71 (diff) | |
parent | fc9ddab5a01919f4819618b55000a47fba2b2742 (diff) | |
download | gitlab-ce-ec94d906b7cb3e5854834e823318a32e161e30a0.tar.gz |
Merge branch '41613-fix-redundant-modal' into 'master'
Make modal dialog common for Groups tree app
Closes #41613
See merge request gitlab-org/gitlab-ce!16311
Diffstat (limited to 'app')
-rw-r--r-- | app/assets/javascripts/groups/components/app.vue | 48 | ||||
-rw-r--r-- | app/assets/javascripts/groups/components/item_actions.vue | 86 |
2 files changed, 68 insertions, 66 deletions
diff --git a/app/assets/javascripts/groups/components/app.vue b/app/assets/javascripts/groups/components/app.vue index 400306759b2..e035ba462db 100644 --- a/app/assets/javascripts/groups/components/app.vue +++ b/app/assets/javascripts/groups/components/app.vue @@ -1,16 +1,20 @@ <script> /* global Flash */ +import { s__ } from '~/locale'; +import loadingIcon from '~/vue_shared/components/loading_icon.vue'; +import modal from '~/vue_shared/components/modal.vue'; +import { getParameterByName } from '~/lib/utils/common_utils'; +import { mergeUrlParams } from '~/lib/utils/url_utility'; + import eventHub from '../event_hub'; -import { getParameterByName } from '../../lib/utils/common_utils'; -import loadingIcon from '../../vue_shared/components/loading_icon.vue'; import { COMMON_STR } from '../constants'; -import { mergeUrlParams } from '../../lib/utils/url_utility'; import groupsComponent from './groups.vue'; export default { components: { loadingIcon, + modal, groupsComponent, }, props: { @@ -32,6 +36,10 @@ export default { isLoading: true, isSearchEmpty: false, searchEmptyMessage: '', + showModal: false, + groupLeaveConfirmationMessage: '', + targetGroup: null, + targetParentGroup: null, }; }, computed: { @@ -48,7 +56,7 @@ export default { eventHub.$on('fetchPage', this.fetchPage); eventHub.$on('toggleChildren', this.toggleChildren); - eventHub.$on('leaveGroup', this.leaveGroup); + eventHub.$on('showLeaveGroupModal', this.showLeaveGroupModal); eventHub.$on('updatePagination', this.updatePagination); eventHub.$on('updateGroups', this.updateGroups); }, @@ -58,7 +66,7 @@ export default { beforeDestroy() { eventHub.$off('fetchPage', this.fetchPage); eventHub.$off('toggleChildren', this.toggleChildren); - eventHub.$off('leaveGroup', this.leaveGroup); + eventHub.$off('showLeaveGroupModal', this.showLeaveGroupModal); eventHub.$off('updatePagination', this.updatePagination); eventHub.$off('updateGroups', this.updateGroups); }, @@ -141,14 +149,23 @@ export default { parentGroup.isOpen = false; } }, - leaveGroup(group, parentGroup) { - const targetGroup = group; - targetGroup.isBeingRemoved = true; - this.service.leaveGroup(targetGroup.leavePath) + showLeaveGroupModal(group, parentGroup) { + this.targetGroup = group; + this.targetParentGroup = parentGroup; + this.showModal = true; + this.groupLeaveConfirmationMessage = s__(`GroupsTree|Are you sure you want to leave the "${group.fullName}" group?`); + }, + hideLeaveGroupModal() { + this.showModal = false; + }, + leaveGroup() { + this.showModal = false; + this.targetGroup.isBeingRemoved = true; + this.service.leaveGroup(this.targetGroup.leavePath) .then(res => res.json()) .then((res) => { $.scrollTo(0); - this.store.removeGroup(targetGroup, parentGroup); + this.store.removeGroup(this.targetGroup, this.targetParentGroup); Flash(res.notice, 'notice'); }) .catch((err) => { @@ -157,7 +174,7 @@ export default { message = COMMON_STR.LEAVE_FORBIDDEN; } Flash(message); - targetGroup.isBeingRemoved = false; + this.targetGroup.isBeingRemoved = false; }); }, updatePagination(headers) { @@ -190,5 +207,14 @@ export default { :search-empty-message="searchEmptyMessage" :page-info="pageInfo" /> + <modal + v-show="showModal" + :primary-button-label="__('Leave')" + kind="warning" + :title="__('Are you sure?')" + :text="groupLeaveConfirmationMessage" + @cancel="hideLeaveGroupModal" + @submit="leaveGroup" + /> </div> </template> diff --git a/app/assets/javascripts/groups/components/item_actions.vue b/app/assets/javascripts/groups/components/item_actions.vue index 1bde6ae5185..87065b3d6e3 100644 --- a/app/assets/javascripts/groups/components/item_actions.vue +++ b/app/assets/javascripts/groups/components/item_actions.vue @@ -1,56 +1,41 @@ <script> - import { s__ } from '~/locale'; - import tooltip from '~/vue_shared/directives/tooltip'; - import icon from '~/vue_shared/components/icon.vue'; - import modal from '~/vue_shared/components/modal.vue'; - import eventHub from '../event_hub'; - import { COMMON_STR } from '../constants'; +import tooltip from '~/vue_shared/directives/tooltip'; +import icon from '~/vue_shared/components/icon.vue'; +import eventHub from '../event_hub'; +import { COMMON_STR } from '../constants'; - export default { - components: { - icon, - modal, +export default { + components: { + icon, + }, + directives: { + tooltip, + }, + props: { + parentGroup: { + type: Object, + required: false, + default: () => ({}), }, - directives: { - tooltip, + group: { + type: Object, + required: true, }, - props: { - parentGroup: { - type: Object, - required: false, - default: () => ({}), - }, - group: { - type: Object, - required: true, - }, + }, + computed: { + leaveBtnTitle() { + return COMMON_STR.LEAVE_BTN_TITLE; }, - data() { - return { - modalStatus: false, - }; + editBtnTitle() { + return COMMON_STR.EDIT_BTN_TITLE; }, - computed: { - leaveBtnTitle() { - return COMMON_STR.LEAVE_BTN_TITLE; - }, - editBtnTitle() { - return COMMON_STR.EDIT_BTN_TITLE; - }, - leaveConfirmationMessage() { - return s__(`GroupsTree|Are you sure you want to leave the "${this.group.fullName}" group?`); - }, + }, + methods: { + onLeaveGroup() { + eventHub.$emit('showLeaveGroupModal', this.group, this.parentGroup); }, - methods: { - onLeaveGroup() { - this.modalStatus = true; - }, - leaveGroup() { - this.modalStatus = false; - eventHub.$emit('leaveGroup', this.group, this.parentGroup); - }, - }, - }; + }, +}; </script> <template> @@ -78,14 +63,5 @@ class="leave-group btn no-expand"> <icon name="leave"/> </a> - <modal - v-show="modalStatus" - :primary-button-label="__('Leave')" - kind="warning" - :title="__('Are you sure?')" - :text="__('Are you sure you want to leave this group?')" - :body="leaveConfirmationMessage" - @submit="leaveGroup" - /> </div> </template> |