gitlab-org--gitlab-foss/app/assets/javascripts/notifications_form.js

56 lines
1.6 KiB
JavaScript
Raw Normal View History

import $ from 'jquery';
import { __ } from './locale';
import axios from './lib/utils/axios_utils';
import flash from './flash';
2017-12-15 04:31:58 -05:00
export default class NotificationsForm {
constructor() {
this.toggleCheckbox = this.toggleCheckbox.bind(this);
this.initEventListeners();
}
2016-07-24 16:45:11 -04:00
2017-12-15 04:31:58 -05:00
initEventListeners() {
$(document).on('change', '.js-custom-notification-event', this.toggleCheckbox);
}
2016-07-24 16:45:11 -04:00
2017-12-15 04:31:58 -05:00
toggleCheckbox(e) {
const $checkbox = $(e.currentTarget);
const $parent = $checkbox.closest('.form-check');
2016-07-24 16:45:11 -04:00
2017-12-15 04:31:58 -05:00
this.saveEvent($checkbox, $parent);
}
2016-07-24 16:45:11 -04:00
2017-12-15 04:31:58 -05:00
// eslint-disable-next-line class-methods-use-this
showCheckboxLoadingSpinner($parent) {
$parent
.addClass('is-loading')
2017-12-15 04:31:58 -05:00
.find('.custom-notification-event-loading')
.removeClass('fa-check')
.addClass('spinner align-middle')
2017-12-15 04:31:58 -05:00
.removeClass('is-done');
}
2016-07-24 16:45:11 -04:00
2017-12-15 04:31:58 -05:00
saveEvent($checkbox, $parent) {
const form = $parent.parents('form').first();
2016-07-24 16:45:11 -04:00
this.showCheckboxLoadingSpinner($parent);
axios[form.attr('method')](form.attr('action'), form.serialize())
.then(({ data }) => {
$checkbox.enable();
if (data.saved) {
$parent
.find('.custom-notification-event-loading')
.toggleClass('spinner fa-check is-done align-middle');
setTimeout(() => {
$parent
.removeClass('is-loading')
.find('.custom-notification-event-loading')
.toggleClass('spinner fa-check is-done align-middle');
}, 2000);
}
})
.catch(() => flash(__('There was an error saving your notification settings.')));
2017-12-15 04:31:58 -05:00
}
}