diff options
Diffstat (limited to 'app')
-rw-r--r-- | app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue | 38 | ||||
-rw-r--r-- | app/assets/javascripts/vue_shared/components/gl_modal.vue | 8 | ||||
-rw-r--r-- | app/assets/javascripts/vue_shared/mixins/confirmation_input_mixin.vue (renamed from app/assets/javascripts/vue_shared/components/confirmation_input.vue) | 52 |
3 files changed, 51 insertions, 47 deletions
diff --git a/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue b/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue index cf025758013..e84c04132c0 100644 --- a/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue +++ b/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue @@ -1,13 +1,12 @@ <script> import axios from '~/lib/utils/axios_utils'; import _ from 'underscore'; - import ConfirmationInput from '~/vue_shared/components/confirmation_input.vue'; + import ConfirmationInputMixin from '~/vue_shared/mixins/confirmation_input_mixin.vue'; import GlModal from '~/vue_shared/components/gl_modal.vue'; import { s__, sprintf } from '~/locale'; export default { components: { - ConfirmationInput, GlModal, }, props: { @@ -33,6 +32,17 @@ }, }, computed: { + confirmationInput() { + const username = this.username; + return { + mixins: [ConfirmationInputMixin], + computed: { + confirmationValue() { + return username; + }, + }, + }; + }, id() { return 'delete-user-modal'; }, @@ -78,46 +88,28 @@ }, }, methods: { - clearInput() { - this.$refs.input.$emit('clear'); - }, - onConfirmed(isConfirmed) { - this.$refs.modal.$emit('toggleCanSubmit', isConfirmed); - }, onSecondaryAction() { - return axios.put(this.blockUserUrl) - .then(() => this.clearInput); + return axios.put(this.blockUserUrl); }, onSubmit() { - return axios.delete(this.deleteUserUrl) - .then(() => this.clearInput); + return axios.delete(this.deleteUserUrl); }, }, - mounted() { - clearInput(); - } }; </script> <template> <gl-modal - ref="modal" :id="id" :header-title-text="title" footer-primary-button-variant="danger" :footer-primary-button-text="primaryButtonLabel" footer-secondary-button-variant="warning" :footer-secondary-button-text="secondaryButtonLabel" + :body-component="confirmationInput" @submit="onSubmit" @secondaryAction="onSecondaryAction" - @cancel="clearInput" > <p v-html="text"></p> - <confirmation-input - ref="input" - :id="`${this.id}-input`" - :confirmation-value="username" - @confirmed="onConfirmed" - /> </gl-modal> </template> diff --git a/app/assets/javascripts/vue_shared/components/gl_modal.vue b/app/assets/javascripts/vue_shared/components/gl_modal.vue index 3646f0e7194..986ed6359e7 100644 --- a/app/assets/javascripts/vue_shared/components/gl_modal.vue +++ b/app/assets/javascripts/vue_shared/components/gl_modal.vue @@ -31,6 +31,11 @@ required: false, default: '', }, + bodyComponent: { + type: Object, + required: false, + default: null, + }, }, data() { @@ -50,9 +55,11 @@ methods: { emitCancel(event) { this.$emit('cancel', event); + this.$emit('clearInputs', event); }, emitSubmit(event) { this.$emit('submit', event); + this.$emit('clearInputs', event); }, toggleCanSubmit(canSubmit) { this.canSubmit = canSubmit; @@ -94,6 +101,7 @@ <div class="modal-body"> <slot></slot> + <component :is="bodyComponent" /> </div> <div class="modal-footer"> diff --git a/app/assets/javascripts/vue_shared/components/confirmation_input.vue b/app/assets/javascripts/vue_shared/mixins/confirmation_input_mixin.vue index 8a5ff70515d..5bfb825fbe3 100644 --- a/app/assets/javascripts/vue_shared/components/confirmation_input.vue +++ b/app/assets/javascripts/vue_shared/mixins/confirmation_input_mixin.vue @@ -3,22 +3,22 @@ import { __, sprintf } from '~/locale'; export default { - props: { - id: { - type: String, - required: true, - }, - confirmationValue: { - type: String, - required: true, - }, - shouldEscapeConfirmationValue: { - type: Boolean, - required: false, - default: true, - }, + data() { + return { + enteredValue: '', + }; }, computed: { + id() { + if (!this.$parent.id) { + throw new Error('Extending component needs to override this!'); + } + return `${this.$parent.id}-input`; + }, + // eslint-disable-next-line vue/return-in-computed-property + confirmationValue() { + throw new Error('Extending component needs to override this!'); + }, inputLabel() { let value = this.confirmationValue; if (this.shouldEscapeConfirmationValue) { @@ -31,23 +31,27 @@ false, ); }, + shouldEscapeConfirmationValue() { + return true; + }, }, mounted() { - this.$on('clear', this.clear); + this.$parent.$on('clearInputs', this.clear); }, beforeDestroy() { - this.$off('clear', this.clear); + this.$parent.$off('clearInputs', this.clear); + }, + created() { + this.onInput(); }, methods: { clear() { - this.$refs.input.value = ''; - this.$emit('confirmed', '' === this.confirmationValue); + this.enteredValue = ''; }, - onInput(event) { - const input = event.target; - this.$emit( - 'confirmed', - input.value === this.confirmationValue, + onInput() { + this.$parent.$emit( + 'toggleCanSubmit', + this.enteredValue === this.confirmationValue, ); }, }, @@ -60,10 +64,10 @@ v-html="inputLabel" :for="id"></label> <input - ref="input" :id="id" type="text" class="form-control" + v-model="enteredValue" @input="onInput" /> </div> |