diff options
Diffstat (limited to 'app/assets/javascripts/integrations/integration_settings_form.js')
-rw-r--r-- | app/assets/javascripts/integrations/integration_settings_form.js | 29 |
1 files changed, 17 insertions, 12 deletions
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'); } |