debian-mirror-gitlab/app/assets/javascripts/profile/preferences/components/profile_preferences.vue

145 lines
4.4 KiB
Vue
Raw Normal View History

2021-01-29 00:20:46 +05:30
<script>
2021-03-11 19:13:27 +05:30
import { GlButton } from '@gitlab/ui';
import createFlash, { FLASH_TYPES } from '~/flash';
import { INTEGRATION_VIEW_CONFIGS, i18n } from '../constants';
2021-01-29 00:20:46 +05:30
import IntegrationView from './integration_view.vue';
2021-03-11 19:13:27 +05:30
function updateClasses(bodyClasses = '', applicationTheme, layout) {
// Remove body class for any previous theme, re-add current one
document.body.classList.remove(...bodyClasses.split(' '));
document.body.classList.add(applicationTheme);
// Toggle container-fluid class
if (layout === 'fluid') {
document
.querySelector('.content-wrapper .container-fluid')
.classList.remove('container-limited');
} else {
document.querySelector('.content-wrapper .container-fluid').classList.add('container-limited');
}
}
2021-01-29 00:20:46 +05:30
export default {
name: 'ProfilePreferences',
components: {
IntegrationView,
2021-03-11 19:13:27 +05:30
GlButton,
2021-01-29 00:20:46 +05:30
},
inject: {
integrationViews: {
default: [],
},
2021-03-11 19:13:27 +05:30
themes: {
default: [],
},
userFields: {
default: {},
},
formEl: 'formEl',
profilePreferencesPath: 'profilePreferencesPath',
bodyClasses: 'bodyClasses',
2021-01-29 00:20:46 +05:30
},
integrationViewConfigs: INTEGRATION_VIEW_CONFIGS,
2021-03-11 19:13:27 +05:30
i18n,
data() {
return {
isSubmitEnabled: true,
2021-04-17 20:07:23 +05:30
darkModeOnCreate: null,
darkModeOnSubmit: null,
2021-03-11 19:13:27 +05:30
};
},
computed: {
applicationThemes() {
return this.themes.reduce((themes, theme) => {
const { id, ...rest } = theme;
return { ...themes, [id]: rest };
}, {});
},
},
created() {
this.formEl.addEventListener('ajax:beforeSend', this.handleLoading);
this.formEl.addEventListener('ajax:success', this.handleSuccess);
this.formEl.addEventListener('ajax:error', this.handleError);
2021-04-17 20:07:23 +05:30
this.darkModeOnCreate = this.darkModeSelected();
2021-03-11 19:13:27 +05:30
},
beforeDestroy() {
this.formEl.removeEventListener('ajax:beforeSend', this.handleLoading);
this.formEl.removeEventListener('ajax:success', this.handleSuccess);
this.formEl.removeEventListener('ajax:error', this.handleError);
},
methods: {
2021-04-17 20:07:23 +05:30
darkModeSelected() {
const theme = this.getSelectedTheme();
return theme ? theme.css_class === 'gl-dark' : null;
},
getSelectedTheme() {
const themeId = new FormData(this.formEl).get('user[theme_id]');
return this.applicationThemes[themeId] ?? null;
},
2021-03-11 19:13:27 +05:30
handleLoading() {
this.isSubmitEnabled = false;
2021-04-17 20:07:23 +05:30
this.darkModeOnSubmit = this.darkModeSelected();
2021-03-11 19:13:27 +05:30
},
handleSuccess(customEvent) {
2021-04-17 20:07:23 +05:30
// Reload the page if the theme has changed from light to dark mode or vice versa
// to correctly load all required styles.
const modeChanged = this.darkModeOnCreate ? !this.darkModeOnSubmit : this.darkModeOnSubmit;
if (modeChanged) {
window.location.reload();
return;
}
updateClasses(this.bodyClasses, this.getSelectedTheme().css_class, this.selectedLayout);
2021-03-11 19:13:27 +05:30
const { message = this.$options.i18n.defaultSuccess, type = FLASH_TYPES.NOTICE } =
customEvent?.detail?.[0] || {};
createFlash({ message, type });
this.isSubmitEnabled = true;
},
handleError(customEvent) {
const { message = this.$options.i18n.defaultError, type = FLASH_TYPES.ALERT } =
customEvent?.detail?.[0] || {};
createFlash({ message, type });
this.isSubmitEnabled = true;
},
},
2021-01-29 00:20:46 +05:30
};
</script>
<template>
<div class="row gl-mt-3 js-preferences-form">
<div v-if="integrationViews.length" class="col-sm-12">
<hr data-testid="profile-preferences-integrations-rule" />
</div>
<div v-if="integrationViews.length" class="col-lg-4 profile-settings-sidebar">
<h4 class="gl-mt-0" data-testid="profile-preferences-integrations-heading">
2021-03-11 19:13:27 +05:30
{{ $options.i18n.integrations }}
2021-01-29 00:20:46 +05:30
</h4>
<p>
2021-03-11 19:13:27 +05:30
{{ $options.i18n.integrationsDescription }}
2021-01-29 00:20:46 +05:30
</p>
</div>
<div v-if="integrationViews.length" class="col-lg-8">
<integration-view
v-for="view in integrationViews"
:key="view.name"
:help-link="view.help_link"
:message="view.message"
:message-url="view.message_url"
:config="$options.integrationViewConfigs[view.name]"
/>
</div>
2021-10-27 15:23:28 +05:30
<div class="col-sm-12">
<hr />
<gl-button
category="primary"
variant="confirm"
name="commit"
type="submit"
:disabled="!isSubmitEnabled"
:value="$options.i18n.saveChanges"
>
{{ $options.i18n.saveChanges }}
</gl-button>
2021-03-11 19:13:27 +05:30
</div>
2021-01-29 00:20:46 +05:30
</div>
</template>