diff options
author | Winnie Hellmann <winnie@gitlab.com> | 2017-12-21 14:02:44 +0100 |
---|---|---|
committer | Winnie Hellmann <winnie@gitlab.com> | 2017-12-21 14:02:44 +0100 |
commit | aea5689d94727ce5e45a3201f0b69c5c6dd41f51 (patch) | |
tree | 68d032777776bf8d746903a95cea159da2f00317 | |
parent | e615565756e2a73de85fcf1e1c352d217c23d9fc (diff) | |
download | gitlab-ce-winh-modal-store.tar.gz |
Aborted refactoring [ci skip]winh-modal-store
15 files changed, 74 insertions, 54 deletions
diff --git a/app/assets/javascripts/groups/components/item_actions.vue b/app/assets/javascripts/groups/components/item_actions.vue index 58ba5aff7cf..2238112497d 100644 --- a/app/assets/javascripts/groups/components/item_actions.vue +++ b/app/assets/javascripts/groups/components/item_actions.vue @@ -25,11 +25,6 @@ export default { required: true, }, }, - data() { - return { - modalStatus: false, - }; - }, computed: { leaveBtnTitle() { return COMMON_STR.LEAVE_BTN_TITLE; @@ -43,13 +38,11 @@ export default { }, methods: { onLeaveGroup() { - this.modalStatus = true; + this.$refs.modal.show(); }, - leaveGroup(leaveConfirmed) { - this.modalStatus = false; - if (leaveConfirmed) { - eventHub.$emit('leaveGroup', this.group, this.parentGroup); - } + leaveGroup() { + eventHub.$emit('leaveGroup', this.group, this.parentGroup); + this.$refs.modal.hide(); }, }, }; @@ -83,7 +76,7 @@ export default { aria-hidden="true"/> </a> <modal - v-show="modalStatus" + ref="modal" :primary-button-label="__('Leave')" kind="warning" :title="__('Are you sure?')" diff --git a/app/assets/javascripts/profile/account/components/delete_account_modal.vue b/app/assets/javascripts/profile/account/components/delete_account_modal.vue index 78be6b6e884..1785e0c60d8 100644 --- a/app/assets/javascripts/profile/account/components/delete_account_modal.vue +++ b/app/assets/javascripts/profile/account/components/delete_account_modal.vue @@ -22,7 +22,6 @@ return { enteredPassword: '', enteredUsername: '', - isOpen: false, }; }, components: { @@ -70,32 +69,28 @@ Once you confirm %{deleteAccount}, it cannot be undone or recovered.`), return this.enteredUsername === this.username; }, onSubmit(status) { - if (status) { - if (!this.canSubmit()) { - return; - } - - this.$refs.form.submit(); + if (!this.canSubmit()) { + return; } - this.toggleOpen(false); - }, - toggleOpen(isOpen) { - this.isOpen = isOpen; + this.$refs.form.submit(); + this.$refs.modal.hide(); }, }, + mounted() { + this.$nextTick(() => this.$refs.modal.show()); + }, }; </script> <template> <div> <modal - v-if="isOpen" + ref="modal" :title="s__('Profiles|Delete your account?')" :text="text" :kind="`danger ${!canSubmit() && 'disabled'}`" :primary-button-label="s__('Profiles|Delete account')" - @toggle="toggleOpen" @submit="onSubmit"> <template slot="body" slot-scope="props"> diff --git a/app/assets/javascripts/repo/components/new_dropdown/index.vue b/app/assets/javascripts/repo/components/new_dropdown/index.vue index 781404cf8ca..13901349dba 100644 --- a/app/assets/javascripts/repo/components/new_dropdown/index.vue +++ b/app/assets/javascripts/repo/components/new_dropdown/index.vue @@ -12,7 +12,6 @@ }, data() { return { - openModal: false, modalType: '', }; }, @@ -24,10 +23,7 @@ methods: { createNewItem(type) { this.modalType = type; - this.toggleModalOpen(); - }, - toggleModalOpen() { - this.openModal = !this.openModal; + this.$refs.newModal.show(); }, }, }; @@ -80,10 +76,9 @@ </li> </ul> <new-modal - v-if="openModal" + ref="newModal" :type="modalType" :path="path" - @toggle="toggleModalOpen" /> </div> </template> diff --git a/app/assets/javascripts/repo/components/new_dropdown/modal.vue b/app/assets/javascripts/repo/components/new_dropdown/modal.vue index c191af7dec3..159f00ef605 100644 --- a/app/assets/javascripts/repo/components/new_dropdown/modal.vue +++ b/app/assets/javascripts/repo/components/new_dropdown/modal.vue @@ -32,10 +32,10 @@ type: this.type, }); - this.toggleModalOpen(); + this.$refs.modal.hide(); }, - toggleModalOpen() { - this.$emit('toggle'); + show() { + this.$refs.modal.show(); }, }, computed: { @@ -69,10 +69,10 @@ <template> <modal + ref="modal" :title="modalTitle" :primary-button-label="buttonLabel" kind="success" - @toggle="toggleModalOpen" @submit="createEntryInStore" > <form diff --git a/app/assets/javascripts/repo/components/repo_commit_section.vue b/app/assets/javascripts/repo/components/repo_commit_section.vue index 4e0178072cb..271f821b0b4 100644 --- a/app/assets/javascripts/repo/components/repo_commit_section.vue +++ b/app/assets/javascripts/repo/components/repo_commit_section.vue @@ -16,7 +16,6 @@ export default { }, data() { return { - showNewBranchModal: false, submitCommitsLoading: false, startNewMR: false, commitMessage: '', @@ -58,7 +57,7 @@ export default { start_branch: createNewBranch ? this.currentBranch : undefined, }; - this.showNewBranchModal = false; + this.$refs.modal.hide(); this.submitCommitsLoading = true; this.commitChanges({ payload, newMr: this.startNewMR }) @@ -76,7 +75,7 @@ export default { this.checkCommitStatus() .then((branchChanged) => { if (branchChanged) { - this.showNewBranchModal = true; + this.$refs.modal.show(); } else { this.makeCommit(); } @@ -100,12 +99,11 @@ export default { }" > <modal - v-if="showNewBranchModal" + ref="modal" :primary-button-label="__('Create new branch')" kind="primary" :title="__('Branch has changed')" :text="__('This branch has changed since you started editing. Would you like to create a new branch?')" - @toggle="showNewBranchModal = false" @submit="makeCommit(true)" /> <button diff --git a/app/assets/javascripts/repo/components/repo_edit_button.vue b/app/assets/javascripts/repo/components/repo_edit_button.vue index 37bd9003e96..52013f3c951 100644 --- a/app/assets/javascripts/repo/components/repo_edit_button.vue +++ b/app/assets/javascripts/repo/components/repo_edit_button.vue @@ -9,7 +9,6 @@ export default { computed: { ...mapState([ 'editMode', - 'discardPopupOpen', ]), ...mapGetters([ 'canEditFile', @@ -44,13 +43,12 @@ export default { </span> </button> <modal - v-if="discardPopupOpen" + ref="modal" class="text-left" :primary-button-label="__('Discard changes')" kind="warning" :title="__('Are you sure?')" :text="__('Are you sure you want to discard your changes?')" - @toggle="closeDiscardPopup" @submit="toggleEditMode(true)" /> </div> diff --git a/app/assets/javascripts/repo/stores/actions/file.js b/app/assets/javascripts/repo/stores/actions/file.js index 5bae4fa826a..5952233e8b4 100644 --- a/app/assets/javascripts/repo/stores/actions/file.js +++ b/app/assets/javascripts/repo/stores/actions/file.js @@ -103,7 +103,7 @@ export const createTempFile = ({ state, commit, dispatch }, { tree, name, conten dispatch('setFileActive', file); if (!state.editMode && !file.base64) { - dispatch('toggleEditMode', true); + dispatch('toggleEditMode'); } return Promise.resolve(file); diff --git a/app/assets/javascripts/repo/stores/mutation_types.js b/app/assets/javascripts/repo/stores/mutation_types.js index bc3390f1506..ba871c25d99 100644 --- a/app/assets/javascripts/repo/stores/mutation_types.js +++ b/app/assets/javascripts/repo/stores/mutation_types.js @@ -25,6 +25,5 @@ export const CREATE_TMP_FILE = 'CREATE_TMP_FILE'; export const SET_PREVIEW_MODE = 'SET_PREVIEW_MODE'; export const SET_EDIT_MODE = 'SET_EDIT_MODE'; export const TOGGLE_EDIT_MODE = 'TOGGLE_EDIT_MODE'; -export const TOGGLE_DISCARD_POPUP = 'TOGGLE_DISCARD_POPUP'; export const SET_CURRENT_BRANCH = 'SET_CURRENT_BRANCH'; diff --git a/app/assets/javascripts/repo/stores/mutations.js b/app/assets/javascripts/repo/stores/mutations.js index ae2ba5bedf7..ce5a6a0821a 100644 --- a/app/assets/javascripts/repo/stores/mutations.js +++ b/app/assets/javascripts/repo/stores/mutations.js @@ -27,11 +27,6 @@ export default { editMode: !state.editMode, }); }, - [types.TOGGLE_DISCARD_POPUP](state, discardPopupOpen) { - Object.assign(state, { - discardPopupOpen, - }); - }, [types.SET_COMMIT_REF](state, ref) { Object.assign(state, { currentRef: ref, diff --git a/app/assets/javascripts/repo/stores/state.js b/app/assets/javascripts/repo/stores/state.js index 0068834831e..542e65cb294 100644 --- a/app/assets/javascripts/repo/stores/state.js +++ b/app/assets/javascripts/repo/stores/state.js @@ -3,7 +3,6 @@ export default () => ({ currentBranch: '', currentBlobView: 'repo-preview', currentRef: '', - discardPopupOpen: false, editMode: false, endpoints: {}, isRoot: false, diff --git a/app/assets/javascripts/vue_shared/components/modal.vue b/app/assets/javascripts/vue_shared/components/modal.vue index 55f466b7b41..4823e071ec7 100644 --- a/app/assets/javascripts/vue_shared/components/modal.vue +++ b/app/assets/javascripts/vue_shared/components/modal.vue @@ -1,7 +1,11 @@ <script> +import { mapActions, mapState } from 'vuex'; + +import store from '../stores/modal'; + export default { name: 'modal', - + store, props: { title: { type: String, @@ -49,6 +53,9 @@ export default { }, computed: { + ...mapState([ + 'isVisible', + ]), btnKindClass() { return { [`btn-${this.kind}`]: true, @@ -62,8 +69,12 @@ export default { }, methods: { + ...mapActions([ + 'hide', + ]), close() { this.$emit('toggle', false); + this.hide(); }, emitSubmit(status) { this.$emit('submit', status); @@ -73,7 +84,9 @@ export default { </script> <template> -<div class="modal-open"> +<div + v-if="isVisible" + class="modal-open"> <div class="modal show" role="dialog" diff --git a/app/assets/javascripts/vue_shared/stores/modal/actions.js b/app/assets/javascripts/vue_shared/stores/modal/actions.js new file mode 100644 index 00000000000..e01457d6ab7 --- /dev/null +++ b/app/assets/javascripts/vue_shared/stores/modal/actions.js @@ -0,0 +1,9 @@ +import * as types from './mutation_types' + +export const hide = ({ commit }) => { + commit(types.HIDE); +}; + +export const show = ({ commit }) => { + commit(types.SHOW); +}; diff --git a/app/assets/javascripts/vue_shared/stores/modal/index.js b/app/assets/javascripts/vue_shared/stores/modal/index.js new file mode 100644 index 00000000000..53c2271d023 --- /dev/null +++ b/app/assets/javascripts/vue_shared/stores/modal/index.js @@ -0,0 +1,14 @@ +import Vue from 'vue'; +import Vuex from 'vuex'; +import * as actions from './actions'; +import mutations from './mutations'; + +Vue.use(Vuex); + +export default new Vuex.Store({ + actions, + mutations, + state: { + isVisible: false, + }, +}); diff --git a/app/assets/javascripts/vue_shared/stores/modal/mutation_types.js b/app/assets/javascripts/vue_shared/stores/modal/mutation_types.js new file mode 100644 index 00000000000..bb0b7274b2e --- /dev/null +++ b/app/assets/javascripts/vue_shared/stores/modal/mutation_types.js @@ -0,0 +1,2 @@ +export const HIDE = 'HIDE'; +export const SHOW = 'SHOW'; diff --git a/app/assets/javascripts/vue_shared/stores/modal/mutations.js b/app/assets/javascripts/vue_shared/stores/modal/mutations.js new file mode 100644 index 00000000000..53597ccede7 --- /dev/null +++ b/app/assets/javascripts/vue_shared/stores/modal/mutations.js @@ -0,0 +1,10 @@ +import * as types from './mutation_types' + +export default { + [types.HIDE](state) { + state.isVisible = false; + }, + [types.SHOW](state) { + state.isVisible = true; + }, +}; |