diff options
Diffstat (limited to 'app/assets/javascripts/integrations')
4 files changed, 103 insertions, 12 deletions
diff --git a/app/assets/javascripts/integrations/edit/components/active_toggle.vue b/app/assets/javascripts/integrations/edit/components/active_toggle.vue new file mode 100644 index 00000000000..2b0aa2586e4 --- /dev/null +++ b/app/assets/javascripts/integrations/edit/components/active_toggle.vue @@ -0,0 +1,53 @@ +<script> +import eventHub from '../event_hub'; +import { GlToggle } from '@gitlab/ui'; + +export default { + name: 'ActiveToggle', + components: { + GlToggle, + }, + props: { + initialActivated: { + type: Boolean, + required: true, + }, + disabled: { + type: Boolean, + required: true, + }, + }, + data() { + return { + activated: this.initialActivated, + }; + }, + mounted() { + // Initialize view + this.$nextTick(() => { + this.onToggle(this.activated); + }); + }, + methods: { + onToggle(e) { + eventHub.$emit('toggle', e); + }, + }, +}; +</script> + +<template> + <div> + <div class="form-group row" role="group"> + <label for="service[active]" class="col-form-label col-sm-2">{{ __('Active') }}</label> + <div class="col-sm-10 pt-1"> + <gl-toggle + v-model="activated" + :disabled="disabled" + name="service[active]" + @change="onToggle" + /> + </div> + </div> + </div> +</template> diff --git a/app/assets/javascripts/integrations/edit/event_hub.js b/app/assets/javascripts/integrations/edit/event_hub.js new file mode 100644 index 00000000000..0948c2e5352 --- /dev/null +++ b/app/assets/javascripts/integrations/edit/event_hub.js @@ -0,0 +1,3 @@ +import Vue from 'vue'; + +export default new Vue(); diff --git a/app/assets/javascripts/integrations/edit/index.js b/app/assets/javascripts/integrations/edit/index.js new file mode 100644 index 00000000000..a2ba581d429 --- /dev/null +++ b/app/assets/javascripts/integrations/edit/index.js @@ -0,0 +1,30 @@ +import Vue from 'vue'; +import { parseBoolean } from '~/lib/utils/common_utils'; +import ActiveToggle from './components/active_toggle.vue'; + +export default el => { + if (!el) { + return null; + } + + const { showActive: showActiveStr, activated: activatedStr, disabled: disabledStr } = el.dataset; + const showActive = parseBoolean(showActiveStr); + const activated = parseBoolean(activatedStr); + const disabled = parseBoolean(disabledStr); + + if (!showActive) { + return null; + } + + return new Vue({ + el, + render(createElement) { + return createElement(ActiveToggle, { + props: { + initialActivated: activated, + disabled, + }, + }); + }, + }); +}; diff --git a/app/assets/javascripts/integrations/integration_settings_form.js b/app/assets/javascripts/integrations/integration_settings_form.js index 1c9b94ade8a..3067f4090b1 100644 --- a/app/assets/javascripts/integrations/integration_settings_form.js +++ b/app/assets/javascripts/integrations/integration_settings_form.js @@ -2,28 +2,33 @@ import $ from 'jquery'; import axios from '../lib/utils/axios_utils'; import flash from '../flash'; import { __ } from '~/locale'; +import initForm from './edit'; +import eventHub from './edit/event_hub'; export default class IntegrationSettingsForm { constructor(formSelector) { this.$form = $(formSelector); + this.formActive = false; // Form Metadata this.canTestService = this.$form.data('canTest'); this.testEndPoint = this.$form.data('testUrl'); // Form Child Elements - this.$serviceToggle = this.$form.find('#service_active'); this.$submitBtn = this.$form.find('button[type="submit"]'); this.$submitBtnLoader = this.$submitBtn.find('.js-btn-spinner'); this.$submitBtnLabel = this.$submitBtn.find('.js-btn-label'); } init() { - // Initialize View - this.toggleServiceState(this.$serviceToggle.is(':checked')); + // Init Vue component + initForm(document.querySelector('.js-vue-integration-settings')); + eventHub.$on('toggle', active => { + this.formActive = active; + this.handleServiceToggle(); + }); // Bind Event Listeners - this.$serviceToggle.on('change', e => this.handleServiceToggle(e)); this.$submitBtn.on('click', e => this.handleSettingsSave(e)); } @@ -31,7 +36,7 @@ export default class IntegrationSettingsForm { // Check if Service is marked active, as if not marked active, // We can skip testing it and directly go ahead to allow form to // be submitted - if (!this.$serviceToggle.is(':checked')) { + if (!this.formActive) { return; } @@ -47,16 +52,16 @@ export default class IntegrationSettingsForm { } } - handleServiceToggle(e) { - this.toggleServiceState($(e.currentTarget).is(':checked')); + handleServiceToggle() { + this.toggleServiceState(); } /** * Change Form's validation enforcement based on service status (active/inactive) */ - toggleServiceState(serviceActive) { - this.toggleSubmitBtnLabel(serviceActive); - if (serviceActive) { + toggleServiceState() { + this.toggleSubmitBtnLabel(); + if (this.formActive) { this.$form.removeAttr('novalidate'); } else if (!this.$form.attr('novalidate')) { this.$form.attr('novalidate', 'novalidate'); @@ -66,10 +71,10 @@ export default class IntegrationSettingsForm { /** * Toggle Submit button label based on Integration status and ability to test service */ - toggleSubmitBtnLabel(serviceActive) { + toggleSubmitBtnLabel() { let btnLabel = __('Save changes'); - if (serviceActive && this.canTestService) { + if (this.formActive && this.canTestService) { btnLabel = __('Test settings and save changes'); } |