2018-03-09 20:18:59 +00:00
|
|
|
import $ from 'jquery';
|
2022-02-23 03:17:13 +00:00
|
|
|
import createFlash, { FLASH_TYPES } from '~/flash';
|
2018-02-07 21:45:03 +00:00
|
|
|
import axios from '~/lib/utils/axios_utils';
|
2018-11-21 15:20:32 +00:00
|
|
|
import { parseBoolean } from '~/lib/utils/common_utils';
|
2021-02-14 18:09:20 +00:00
|
|
|
import { Rails } from '~/lib/utils/rails_ujs';
|
2019-05-07 21:58:16 +00:00
|
|
|
import TimezoneDropdown, {
|
|
|
|
formatTimezone,
|
|
|
|
} from '~/pages/projects/pipeline_schedules/shared/components/timezone_dropdown';
|
2016-12-14 03:01:05 +00:00
|
|
|
|
2018-02-23 16:18:24 +00:00
|
|
|
export default class Profile {
|
|
|
|
constructor({ form } = {}) {
|
|
|
|
this.onSubmitForm = this.onSubmitForm.bind(this);
|
|
|
|
this.form = form || $('.edit-user');
|
|
|
|
this.setRepoRadio();
|
|
|
|
this.bindEvents();
|
|
|
|
this.initAvatarGlCrop();
|
2019-05-07 21:58:16 +00:00
|
|
|
|
|
|
|
this.$inputEl = $('#user_timezone');
|
|
|
|
|
|
|
|
this.timezoneDropdown = new TimezoneDropdown({
|
|
|
|
$inputEl: this.$inputEl,
|
|
|
|
$dropdownEl: $('.js-timezone-dropdown'),
|
2020-12-24 00:10:25 +00:00
|
|
|
displayFormat: (selectedItem) => formatTimezone(selectedItem),
|
2021-10-01 15:12:53 +00:00
|
|
|
allowEmpty: true,
|
2019-05-07 21:58:16 +00:00
|
|
|
});
|
2018-02-23 16:18:24 +00:00
|
|
|
}
|
2016-07-24 20:45:11 +00:00
|
|
|
|
2018-02-23 16:18:24 +00:00
|
|
|
initAvatarGlCrop() {
|
|
|
|
const cropOpts = {
|
|
|
|
filename: '.js-avatar-filename',
|
|
|
|
previewImage: '.avatar-image .avatar',
|
|
|
|
modalCrop: '.modal-profile-crop',
|
|
|
|
pickImageEl: '.js-choose-user-avatar-button',
|
|
|
|
uploadImageBtn: '.js-upload-user-avatar',
|
2018-03-20 16:00:10 +00:00
|
|
|
modalCropImg: '.modal-profile-crop-image',
|
2018-02-23 16:18:24 +00:00
|
|
|
};
|
2020-12-23 12:10:26 +00:00
|
|
|
this.avatarGlCrop = $('.js-user-avatar-input').glCrop(cropOpts).data('glcrop');
|
2018-02-23 16:18:24 +00:00
|
|
|
}
|
2016-09-08 15:18:35 +00:00
|
|
|
|
2018-02-23 16:18:24 +00:00
|
|
|
bindEvents() {
|
2018-10-10 06:47:49 +00:00
|
|
|
$('.js-preferences-form').on('change.preference', 'input[type=radio]', this.submitForm);
|
2019-02-15 17:56:13 +00:00
|
|
|
$('.js-group-notification-email').on('change', this.submitForm);
|
2020-12-24 00:10:25 +00:00
|
|
|
$('#user_notification_email').on('select2-selecting', (event) => {
|
2020-05-27 21:08:05 +00:00
|
|
|
setTimeout(this.submitForm.bind(event.currentTarget));
|
|
|
|
});
|
2021-02-15 18:09:09 +00:00
|
|
|
$('#user_email_opted_in').on('change', this.submitForm);
|
2018-02-23 16:18:24 +00:00
|
|
|
$('#user_notified_of_own_activity').on('change', this.submitForm);
|
|
|
|
this.form.on('submit', this.onSubmitForm);
|
|
|
|
}
|
2016-07-24 20:45:11 +00:00
|
|
|
|
2018-02-23 16:18:24 +00:00
|
|
|
submitForm() {
|
2020-09-23 15:10:14 +00:00
|
|
|
const $form = $(this).parents('form');
|
|
|
|
|
|
|
|
if ($form.data('remote')) {
|
|
|
|
Rails.fire($form[0], 'submit');
|
|
|
|
} else {
|
|
|
|
$form.submit();
|
|
|
|
}
|
2018-02-23 16:18:24 +00:00
|
|
|
}
|
2016-09-08 15:18:35 +00:00
|
|
|
|
2018-02-23 16:18:24 +00:00
|
|
|
onSubmitForm(e) {
|
|
|
|
e.preventDefault();
|
|
|
|
return this.saveForm();
|
|
|
|
}
|
2016-07-24 20:45:11 +00:00
|
|
|
|
2018-02-23 16:18:24 +00:00
|
|
|
saveForm() {
|
|
|
|
const self = this;
|
2018-07-17 19:03:16 +00:00
|
|
|
const formData = new FormData(this.form.get(0));
|
2018-02-23 16:18:24 +00:00
|
|
|
const avatarBlob = this.avatarGlCrop.getBlob();
|
2016-09-08 15:18:35 +00:00
|
|
|
|
2018-02-23 16:18:24 +00:00
|
|
|
if (avatarBlob != null) {
|
|
|
|
formData.append('user[avatar]', avatarBlob, 'avatar.png');
|
2016-09-08 15:18:35 +00:00
|
|
|
}
|
2018-01-04 18:31:05 +00:00
|
|
|
|
2018-07-17 19:03:16 +00:00
|
|
|
formData.delete('user[avatar]-trigger');
|
|
|
|
|
2018-02-23 16:18:24 +00:00
|
|
|
axios({
|
|
|
|
method: this.form.attr('method'),
|
|
|
|
url: this.form.attr('action'),
|
|
|
|
data: formData,
|
|
|
|
})
|
2018-06-23 17:50:50 +00:00
|
|
|
.then(({ data }) => {
|
|
|
|
if (avatarBlob != null) {
|
|
|
|
this.updateHeaderAvatar();
|
|
|
|
}
|
|
|
|
|
2021-06-21 03:10:27 +00:00
|
|
|
createFlash({
|
|
|
|
message: data.message,
|
2022-02-23 03:17:13 +00:00
|
|
|
type: data.status === 'error' ? FLASH_TYPES.ALERT : FLASH_TYPES.NOTICE,
|
2021-06-21 03:10:27 +00:00
|
|
|
});
|
2018-06-23 17:50:50 +00:00
|
|
|
})
|
2018-03-20 16:00:10 +00:00
|
|
|
.then(() => {
|
|
|
|
window.scrollTo(0, 0);
|
|
|
|
// Enable submit button after requests ends
|
|
|
|
self.form.find(':input[disabled]').enable();
|
|
|
|
})
|
2021-06-21 03:10:27 +00:00
|
|
|
.catch((error) =>
|
|
|
|
createFlash({
|
|
|
|
message: error.message,
|
|
|
|
}),
|
|
|
|
);
|
2016-09-08 15:18:35 +00:00
|
|
|
}
|
2016-07-24 20:45:11 +00:00
|
|
|
|
2018-06-23 17:50:50 +00:00
|
|
|
updateHeaderAvatar() {
|
|
|
|
$('.header-user-avatar').attr('src', this.avatarGlCrop.dataURL);
|
2021-02-19 03:10:49 +00:00
|
|
|
$('.js-sidebar-user-avatar').attr('src', this.avatarGlCrop.dataURL);
|
2018-06-23 17:50:50 +00:00
|
|
|
}
|
|
|
|
|
2018-02-23 16:18:24 +00:00
|
|
|
setRepoRadio() {
|
|
|
|
const multiEditRadios = $('input[name="user[multi_file]"]');
|
2018-11-21 15:20:32 +00:00
|
|
|
if (parseBoolean(this.newRepoActivated)) {
|
2018-02-23 16:18:24 +00:00
|
|
|
multiEditRadios.filter('[value=on]').prop('checked', true);
|
|
|
|
} else {
|
|
|
|
multiEditRadios.filter('[value=off]').prop('checked', true);
|
2016-07-24 20:45:11 +00:00
|
|
|
}
|
2018-02-23 16:18:24 +00:00
|
|
|
}
|
|
|
|
}
|