1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
import $ from 'jquery';
import { delay } from 'lodash';
import axios from '../lib/utils/axios_utils';
import { __, s__ } from '~/locale';
import toast from '~/vue_shared/plugins/global_toast';
import initForm from './edit';
import eventHub from './edit/event_hub';
export default class IntegrationSettingsForm {
constructor(formSelector) {
this.$form = $(formSelector);
this.formActive = false;
this.vue = null;
// Form Metadata
this.testEndPoint = this.$form.data('testUrl');
}
init() {
// Init Vue component
this.vue = initForm(
document.querySelector('.js-vue-integration-settings'),
document.querySelector('.js-vue-default-integration-settings'),
);
eventHub.$on('toggle', (active) => {
this.formActive = active;
this.toggleServiceState();
});
eventHub.$on('testIntegration', () => {
this.testIntegration();
});
eventHub.$on('saveIntegration', () => {
this.saveIntegration();
});
}
saveIntegration() {
// Save Service if not active and check the following if active;
// 1) If form contents are valid
// 2) If this service can be saved
// If both conditions are true, we override form submission
// and save the service using provided configuration.
const formValid = this.$form.get(0).checkValidity() || this.formActive === false;
if (formValid) {
delay(() => {
this.$form.trigger('submit');
}, 100);
} else {
eventHub.$emit('validateForm');
this.vue.$store.dispatch('setIsSaving', false);
}
}
testIntegration() {
// 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()) {
// eslint-disable-next-line no-jquery/no-serialize
this.testSettings(this.$form.serialize());
} else {
eventHub.$emit('validateForm');
this.vue.$store.dispatch('setIsTesting', false);
}
}
/**
* Change Form's validation enforcement based on service status (active/inactive)
*/
toggleServiceState() {
if (this.formActive) {
this.$form.removeAttr('novalidate');
} else if (!this.$form.attr('novalidate')) {
this.$form.attr('novalidate', 'novalidate');
}
}
/**
* Test Integration config
*/
testSettings(formData) {
return axios
.put(this.testEndPoint, formData)
.then(({ data }) => {
if (data.error) {
toast(`${data.message} ${data.service_response}`);
} else {
toast(s__('Integrations|Connection successful.'));
}
})
.catch(() => {
toast(__('Something went wrong on our end.'));
})
.finally(() => {
this.vue.$store.dispatch('setIsTesting', false);
});
}
}
|
