debian-mirror-gitlab/app/assets/javascripts/profile/profile.js

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

131 lines
3.6 KiB
JavaScript
Raw Normal View History

2018-05-09 12:01:36 +05:30
import $ from 'jquery';
2022-10-11 01:57:18 +05:30
import Vue from 'vue';
2022-08-13 15:12:31 +05:30
import { VARIANT_DANGER, VARIANT_INFO, createAlert } from '~/flash';
2018-03-17 18:26:18 +05:30
import axios from '~/lib/utils/axios_utils';
2019-02-15 15:39:39 +05:30
import { parseBoolean } from '~/lib/utils/common_utils';
2022-10-11 01:57:18 +05:30
import { parseRailsFormFields } from '~/lib/utils/forms';
2021-03-11 19:13:27 +05:30
import { Rails } from '~/lib/utils/rails_ujs';
2022-10-11 01:57:18 +05:30
import UserProfileSetStatusWrapper from '~/set_status_modal/user_profile_set_status_wrapper.vue';
2016-11-03 12:29:30 +05:30
2018-03-27 19:54:05 +05:30
export default class Profile {
constructor({ form } = {}) {
this.onSubmitForm = this.onSubmitForm.bind(this);
2022-08-13 15:12:31 +05:30
this.form = form || $('.js-edit-user');
2018-03-27 19:54:05 +05:30
this.setRepoRadio();
this.bindEvents();
this.initAvatarGlCrop();
}
2016-11-03 12:29:30 +05:30
2018-03-27 19:54:05 +05:30
initAvatarGlCrop() {
const cropOpts = {
filename: '.js-avatar-filename',
2022-11-25 23:54:43 +05:30
previewImage: '.avatar-image .gl-avatar',
2018-03-27 19:54:05 +05:30
modalCrop: '.modal-profile-crop',
pickImageEl: '.js-choose-user-avatar-button',
uploadImageBtn: '.js-upload-user-avatar',
2018-05-09 12:01:36 +05:30
modalCropImg: '.modal-profile-crop-image',
2018-03-27 19:54:05 +05:30
};
2021-03-08 18:12:59 +05:30
this.avatarGlCrop = $('.js-user-avatar-input').glCrop(cropOpts).data('glcrop');
2018-03-27 19:54:05 +05:30
}
2016-11-03 12:29:30 +05:30
2018-03-27 19:54:05 +05:30
bindEvents() {
2018-12-13 13:39:08 +05:30
$('.js-preferences-form').on('change.preference', 'input[type=radio]', this.submitForm);
2019-09-04 21:01:54 +05:30
$('.js-group-notification-email').on('change', this.submitForm);
2021-03-08 18:12:59 +05:30
$('#user_notification_email').on('select2-selecting', (event) => {
2020-05-30 21:06:31 +05:30
setTimeout(this.submitForm.bind(event.currentTarget));
});
2021-03-11 19:13:27 +05:30
$('#user_email_opted_in').on('change', this.submitForm);
2018-03-27 19:54:05 +05:30
$('#user_notified_of_own_activity').on('change', this.submitForm);
this.form.on('submit', this.onSubmitForm);
}
2016-11-03 12:29:30 +05:30
2018-03-27 19:54:05 +05:30
submitForm() {
2021-01-03 14:25:43 +05:30
const $form = $(this).parents('form');
if ($form.data('remote')) {
Rails.fire($form[0], 'submit');
} else {
$form.submit();
}
2018-03-27 19:54:05 +05:30
}
2016-11-03 12:29:30 +05:30
2018-03-27 19:54:05 +05:30
onSubmitForm(e) {
e.preventDefault();
return this.saveForm();
}
2016-11-03 12:29:30 +05:30
2018-03-27 19:54:05 +05:30
saveForm() {
const self = this;
2018-11-18 11:00:15 +05:30
const formData = new FormData(this.form.get(0));
2018-03-27 19:54:05 +05:30
const avatarBlob = this.avatarGlCrop.getBlob();
2016-11-03 12:29:30 +05:30
2018-03-27 19:54:05 +05:30
if (avatarBlob != null) {
formData.append('user[avatar]', avatarBlob, 'avatar.png');
2018-03-17 18:26:18 +05:30
}
2018-11-18 11:00:15 +05:30
formData.delete('user[avatar]-trigger');
2018-03-27 19:54:05 +05:30
axios({
method: this.form.attr('method'),
url: this.form.attr('action'),
data: formData,
})
2018-11-08 19:23:39 +05:30
.then(({ data }) => {
if (avatarBlob != null) {
this.updateHeaderAvatar();
}
2022-08-13 15:12:31 +05:30
createAlert({
2021-09-30 23:02:18 +05:30
message: data.message,
2022-08-13 15:12:31 +05:30
variant: data.status === 'error' ? VARIANT_DANGER : VARIANT_INFO,
2021-09-30 23:02:18 +05:30
});
2018-11-08 19:23:39 +05:30
})
2018-05-09 12:01:36 +05:30
.then(() => {
window.scrollTo(0, 0);
// Enable submit button after requests ends
self.form.find(':input[disabled]').enable();
})
2021-09-30 23:02:18 +05:30
.catch((error) =>
2022-08-13 15:12:31 +05:30
createAlert({
2021-09-30 23:02:18 +05:30
message: error.message,
2022-08-13 15:12:31 +05:30
variant: VARIANT_DANGER,
2021-09-30 23:02:18 +05:30
}),
);
2016-11-03 12:29:30 +05:30
}
2018-11-08 19:23:39 +05:30
updateHeaderAvatar() {
$('.header-user-avatar').attr('src', this.avatarGlCrop.dataURL);
2021-04-17 20:07:23 +05:30
$('.js-sidebar-user-avatar').attr('src', this.avatarGlCrop.dataURL);
2018-11-08 19:23:39 +05:30
}
2018-03-27 19:54:05 +05:30
setRepoRadio() {
const multiEditRadios = $('input[name="user[multi_file]"]');
2019-02-15 15:39:39 +05:30
if (parseBoolean(this.newRepoActivated)) {
2018-03-27 19:54:05 +05:30
multiEditRadios.filter('[value=on]').prop('checked', true);
} else {
multiEditRadios.filter('[value=off]').prop('checked', true);
2016-11-03 12:29:30 +05:30
}
2018-03-27 19:54:05 +05:30
}
}
2022-10-11 01:57:18 +05:30
export const initSetStatusForm = () => {
const el = document.getElementById('js-user-profile-set-status-form');
if (!el) {
return null;
}
const fields = parseRailsFormFields(el);
return new Vue({
el,
name: 'UserProfileStatusForm',
provide: {
fields,
},
render(h) {
return h(UserProfileSetStatusWrapper);
},
});
};