diff options
Diffstat (limited to 'app/assets/javascripts/profile/preferences/components/profile_preferences.vue')
-rw-r--r-- | app/assets/javascripts/profile/preferences/components/profile_preferences.vue | 105 |
1 files changed, 90 insertions, 15 deletions
diff --git a/app/assets/javascripts/profile/preferences/components/profile_preferences.vue b/app/assets/javascripts/profile/preferences/components/profile_preferences.vue index 8b2006b7c5b..184ee3810ac 100644 --- a/app/assets/javascripts/profile/preferences/components/profile_preferences.vue +++ b/app/assets/javascripts/profile/preferences/components/profile_preferences.vue @@ -1,31 +1,92 @@ <script> -import { s__ } from '~/locale'; +import { GlButton } from '@gitlab/ui'; +import createFlash, { FLASH_TYPES } from '~/flash'; +import { INTEGRATION_VIEW_CONFIGS, i18n } from '../constants'; import IntegrationView from './integration_view.vue'; -const INTEGRATION_VIEW_CONFIGS = { - sourcegraph: { - title: s__('ProfilePreferences|Sourcegraph'), - label: s__('ProfilePreferences|Enable integrated code intelligence on code views'), - formName: 'sourcegraph_enabled', - }, - gitpod: { - title: s__('ProfilePreferences|Gitpod'), - label: s__('ProfilePreferences|Enable Gitpod integration'), - formName: 'gitpod_enabled', - }, -}; +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'); + } +} export default { name: 'ProfilePreferences', components: { IntegrationView, + GlButton, }, inject: { integrationViews: { default: [], }, + themes: { + default: [], + }, + userFields: { + default: {}, + }, + formEl: 'formEl', + profilePreferencesPath: 'profilePreferencesPath', + bodyClasses: 'bodyClasses', }, integrationViewConfigs: INTEGRATION_VIEW_CONFIGS, + i18n, + data() { + return { + isSubmitEnabled: true, + }; + }, + 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); + }, + beforeDestroy() { + this.formEl.removeEventListener('ajax:beforeSend', this.handleLoading); + this.formEl.removeEventListener('ajax:success', this.handleSuccess); + this.formEl.removeEventListener('ajax:error', this.handleError); + }, + methods: { + handleLoading() { + this.isSubmitEnabled = false; + }, + handleSuccess(customEvent) { + const formData = new FormData(this.formEl); + updateClasses( + this.bodyClasses, + this.applicationThemes[formData.get('user[theme_id]')].css_class, + this.selectedLayout, + ); + 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; + }, + }, }; </script> @@ -36,10 +97,10 @@ export default { </div> <div v-if="integrationViews.length" class="col-lg-4 profile-settings-sidebar"> <h4 class="gl-mt-0" data-testid="profile-preferences-integrations-heading"> - {{ s__('ProfilePreferences|Integrations') }} + {{ $options.i18n.integrations }} </h4> <p> - {{ s__('ProfilePreferences|Customize integrations with third party services.') }} + {{ $options.i18n.integrationsDescription }} </p> </div> <div v-if="integrationViews.length" class="col-lg-8"> @@ -52,5 +113,19 @@ export default { :config="$options.integrationViewConfigs[view.name]" /> </div> + <div class="col-lg-4 profile-settings-sidebar"></div> + <div class="col-lg-8"> + <div class="form-group"> + <gl-button + variant="success" + name="commit" + type="submit" + :disabled="!isSubmitEnabled" + :value="$options.i18n.saveChanges" + > + {{ $options.i18n.saveChanges }} + </gl-button> + </div> + </div> </div> </template> |