Update as per review feedback
This commit is contained in:
parent
00cc34cc73
commit
7357d35494
|
@ -2,5 +2,6 @@
|
||||||
import IntegrationSettingsForm from './integration_settings_form';
|
import IntegrationSettingsForm from './integration_settings_form';
|
||||||
|
|
||||||
$(() => {
|
$(() => {
|
||||||
new IntegrationSettingsForm('.js-integration-settings-form');
|
const integrationSettingsForm = new IntegrationSettingsForm('.js-integration-settings-form');
|
||||||
|
integrationSettingsForm.init();
|
||||||
});
|
});
|
||||||
|
|
|
@ -5,20 +5,14 @@ export default class IntegrationSettingsForm {
|
||||||
this.$form = $(formSelector);
|
this.$form = $(formSelector);
|
||||||
|
|
||||||
// Form Metadata
|
// Form Metadata
|
||||||
this.endPoint = this.$form.attr('action');
|
|
||||||
this.canTestService = this.$form.data('can-test');
|
this.canTestService = this.$form.data('can-test');
|
||||||
|
this.testEndPoint = this.$form.data('test-url');
|
||||||
|
|
||||||
// Form Child Elements
|
// Form Child Elements
|
||||||
this.$serviceToggle = this.$form.find('#service_active');
|
this.$serviceToggle = this.$form.find('#service_active');
|
||||||
this.$submitBtn = this.$form.find('button[type="submit"]');
|
this.$submitBtn = this.$form.find('button[type="submit"]');
|
||||||
this.$submitBtnLoader = this.$submitBtn.find('.js-btn-spinner');
|
this.$submitBtnLoader = this.$submitBtn.find('.js-btn-spinner');
|
||||||
this.$submitBtnLabel = this.$submitBtn.find('.js-btn-label');
|
this.$submitBtnLabel = this.$submitBtn.find('.js-btn-label');
|
||||||
|
|
||||||
// Class Member methods
|
|
||||||
this.handleServiceToggle = this.handleServiceToggle.bind(this);
|
|
||||||
this.handleSettingsSave = this.handleSettingsSave.bind(this);
|
|
||||||
|
|
||||||
this.init();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
init() {
|
init() {
|
||||||
|
@ -26,19 +20,28 @@ export default class IntegrationSettingsForm {
|
||||||
this.toggleServiceState(this.$serviceToggle.is(':checked'));
|
this.toggleServiceState(this.$serviceToggle.is(':checked'));
|
||||||
|
|
||||||
// Bind Event Listeners
|
// Bind Event Listeners
|
||||||
this.$serviceToggle.on('change', this.handleServiceToggle);
|
this.$serviceToggle.on('change', e => this.handleServiceToggle(e));
|
||||||
this.$submitBtn.on('click', this.handleSettingsSave);
|
this.$submitBtn.on('click', e => this.handleSettingsSave(e));
|
||||||
}
|
}
|
||||||
|
|
||||||
handleSettingsSave(e) {
|
handleSettingsSave(e) {
|
||||||
if (this.$serviceToggle.is(':checked')) {
|
// Check if Service is marked active, as if not marked active,
|
||||||
if (this.$form.get(0).checkValidity() &&
|
// We can skip testing it and directly go ahead to allow form to
|
||||||
this.canTestService) {
|
// be submitted
|
||||||
|
if (!this.$serviceToggle.is(':checked')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Service was marked active so now we check;
|
||||||
|
// 1) If form contents are valid
|
||||||
|
// 2) If this service can be tested
|
||||||
|
// If both conditions are true, we override form submission
|
||||||
|
// and test the service using provided configuration.
|
||||||
|
if (this.$form.get(0).checkValidity() && this.canTestService) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
this.testSettings(this.$form.serialize());
|
this.testSettings(this.$form.serialize());
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
handleServiceToggle(e) {
|
handleServiceToggle(e) {
|
||||||
this.toggleServiceState($(e.currentTarget).is(':checked'));
|
this.toggleServiceState($(e.currentTarget).is(':checked'));
|
||||||
|
@ -48,7 +51,7 @@ export default class IntegrationSettingsForm {
|
||||||
* Change Form's validation enforcement based on service status (active/inactive)
|
* Change Form's validation enforcement based on service status (active/inactive)
|
||||||
*/
|
*/
|
||||||
toggleServiceState(serviceActive) {
|
toggleServiceState(serviceActive) {
|
||||||
this.toggleSubmitBtnLabel(serviceActive, this.canTestService);
|
this.toggleSubmitBtnLabel(serviceActive);
|
||||||
if (serviceActive) {
|
if (serviceActive) {
|
||||||
this.$form.removeAttr('novalidate');
|
this.$form.removeAttr('novalidate');
|
||||||
} else if (!this.$form.attr('novalidate')) {
|
} else if (!this.$form.attr('novalidate')) {
|
||||||
|
@ -59,11 +62,14 @@ export default class IntegrationSettingsForm {
|
||||||
/**
|
/**
|
||||||
* Toggle Submit button label based on Integration status and ability to test service
|
* Toggle Submit button label based on Integration status and ability to test service
|
||||||
*/
|
*/
|
||||||
toggleSubmitBtnLabel(serviceActive, canTestService) {
|
toggleSubmitBtnLabel(serviceActive) {
|
||||||
this.$submitBtnLabel.text(
|
let btnLabel = 'Save changes';
|
||||||
serviceActive && canTestService ?
|
|
||||||
'Test settings and save changes' :
|
if (serviceActive && this.canTestService) {
|
||||||
'Save changes');
|
btnLabel = 'Test settings and save changes';
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$submitBtnLabel.text(btnLabel);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -79,11 +85,9 @@ export default class IntegrationSettingsForm {
|
||||||
this.$submitBtnLoader.removeClass('hidden');
|
this.$submitBtnLoader.removeClass('hidden');
|
||||||
} else {
|
} else {
|
||||||
this.$submitBtn.enable();
|
this.$submitBtn.enable();
|
||||||
if (!this.$submitBtnLoader.hasClass('hidden')) {
|
|
||||||
this.$submitBtnLoader.addClass('hidden');
|
this.$submitBtnLoader.addClass('hidden');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
/* eslint-disable promise/catch-or-return, no-new */
|
/* eslint-disable promise/catch-or-return, no-new */
|
||||||
/**
|
/**
|
||||||
|
@ -93,12 +97,12 @@ export default class IntegrationSettingsForm {
|
||||||
this.toggleSubmitBtnState(true);
|
this.toggleSubmitBtnState(true);
|
||||||
$.ajax({
|
$.ajax({
|
||||||
type: 'PUT',
|
type: 'PUT',
|
||||||
url: `${this.endPoint}/test`,
|
url: this.testEndPoint,
|
||||||
data: formData,
|
data: formData,
|
||||||
})
|
})
|
||||||
.done((res) => {
|
.done((res) => {
|
||||||
if (res.error) {
|
if (res.error) {
|
||||||
new Flash(`${res.message}`, null, null, {
|
new Flash(res.message, null, null, {
|
||||||
title: 'Save anyway',
|
title: 'Save anyway',
|
||||||
clickHandler: (e) => {
|
clickHandler: (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
Loading…
Reference in New Issue