diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-08-11 03:10:11 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-08-11 03:10:11 +0300 |
commit | 7303dddd09bf28d28e36666f0cc2775e9fa27872 (patch) | |
tree | c97552993de10857894e26c7f0c6b412496a063b /app/assets/javascripts/profile | |
parent | 997968e3fa7d1f623f7bd9e2581c58dc7afc5aa5 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/profile')
-rw-r--r-- | app/assets/javascripts/profile/edit/components/profile_edit_app.vue | 83 | ||||
-rw-r--r-- | app/assets/javascripts/profile/edit/constants.js | 7 | ||||
-rw-r--r-- | app/assets/javascripts/profile/edit/index.js | 16 |
3 files changed, 101 insertions, 5 deletions
diff --git a/app/assets/javascripts/profile/edit/components/profile_edit_app.vue b/app/assets/javascripts/profile/edit/components/profile_edit_app.vue index df7f9a5be81..6b39f137880 100644 --- a/app/assets/javascripts/profile/edit/components/profile_edit_app.vue +++ b/app/assets/javascripts/profile/edit/components/profile_edit_app.vue @@ -4,8 +4,12 @@ import { GlForm, GlButton } from '@gitlab/ui'; import { VARIANT_DANGER, VARIANT_INFO, createAlert } from '~/alert'; import axios from '~/lib/utils/axios_utils'; import { readFileAsDataURL } from '~/lib/utils/file_utility'; +import SetStatusForm from '~/set_status_modal/set_status_form.vue'; +import SettingsBlock from '~/packages_and_registries/shared/components/settings_block.vue'; +import { isUserBusy, computedClearStatusAfterValue } from '~/set_status_modal/utils'; +import { AVAILABILITY_STATUS } from '~/set_status_modal/constants'; -import { i18n } from '../constants'; +import { i18n, statusI18n } from '../constants'; import UserAvatar from './user_avatar.vue'; export default { @@ -13,7 +17,16 @@ export default { UserAvatar, GlForm, GlButton, + SettingsBlock, + SetStatusForm, }, + inject: [ + 'currentEmoji', + 'currentMessage', + 'currentAvailability', + 'defaultEmoji', + 'currentClearStatusAfter', + ], props: { profilePath: { type: String, @@ -28,14 +41,44 @@ export default { return { uploadingProfile: false, avatarBlob: null, + status: { + emoji: this.currentEmoji, + message: this.currentMessage, + availability: isUserBusy(this.currentAvailability), + clearStatusAfter: null, + }, }; }, + computed: { + shouldIncludeClearStatusAfterInApiRequest() { + return this.status.clearStatusAfter !== null; + }, + clearStatusAfterApiRequestValue() { + return computedClearStatusAfterValue(this.status.clearStatusAfter); + }, + }, methods: { async onSubmit() { // TODO: Do validation before organizing data. this.uploadingProfile = true; const formData = new FormData(); + // Setting up status data + const statusFieldNameBase = 'user[status]'; + formData.append(`${statusFieldNameBase}[emoji]`, this.status.emoji); + formData.append(`${statusFieldNameBase}[message]`, this.status.message); + formData.append( + `${statusFieldNameBase}[availability]`, + this.status.availability ? AVAILABILITY_STATUS.BUSY : AVAILABILITY_STATUS.NOT_SET, + ); + + if (this.shouldIncludeClearStatusAfterInApiRequest) { + formData.append( + `${statusFieldNameBase}[clear_status_after]`, + this.clearStatusAfterApiRequestValue, + ); + } + if (this.avatarBlob) { formData.append('user[avatar]', this.avatarBlob, 'avatar.png'); } @@ -46,7 +89,6 @@ export default { if (this.avatarBlob) { this.syncHeaderAvatars(); } - createAlert({ message: data.message, variant: data.status === 'error' ? VARIANT_DANGER : VARIANT_INFO, @@ -79,14 +121,47 @@ export default { onBlobChange(blob) { this.avatarBlob = blob; }, + onMessageInput(value) { + this.status.message = value; + }, + onEmojiClick(emoji) { + this.status.emoji = emoji; + }, + onClearStatusAfterClick(after) { + this.status.clearStatusAfter = after; + }, + onAvailabilityInput(value) { + this.status.availability = value; + }, + }, + i18n: { + ...i18n, + ...statusI18n, }, - i18n, }; </script> <template> - <gl-form @submit.prevent="onSubmit"> + <gl-form class="edit-user" @submit.prevent="onSubmit"> <user-avatar @blob-change="onBlobChange" /> + <settings-block class="js-search-settings-section"> + <template #title>{{ $options.i18n.setStatusTitle }}</template> + <template #description>{{ $options.i18n.setStatusDescription }}</template> + <div class="gl-max-w-80"> + <set-status-form + :default-emoji="defaultEmoji" + :emoji="status.emoji" + :message="status.message" + :availability="status.availability" + :clear-status-after="status.clearStatusAfter" + :current-clear-status-after="currentClearStatusAfter" + @message-input="onMessageInput" + @emoji-click="onEmojiClick" + @clear-status-after-click="onClearStatusAfterClick" + @availability-input="onAvailabilityInput" + /> + </div> + </settings-block> <!-- TODO: to implement profile editing form fields --> <!-- It will be implemented in the upcoming MRs --> <!-- Related issue: https://gitlab.com/gitlab-org/gitlab/-/issues/389918 --> diff --git a/app/assets/javascripts/profile/edit/constants.js b/app/assets/javascripts/profile/edit/constants.js index ecd6274e39b..e07615273f7 100644 --- a/app/assets/javascripts/profile/edit/constants.js +++ b/app/assets/javascripts/profile/edit/constants.js @@ -21,6 +21,13 @@ export const avatarI18n = { cropAvatarSetAsNewAvatar: s__('Profiles|Set new profile picture'), }; +export const statusI18n = { + setStatusTitle: s__('Profiles|Current status'), + setStatusDescription: s__( + 'Profiles|This emoji and message will appear on your profile and throughout the interface.', + ), +}; + export const i18n = { updateProfileSettings: s__('Profiles|Update profile settings'), cancel: __('Cancel'), diff --git a/app/assets/javascripts/profile/edit/index.js b/app/assets/javascripts/profile/edit/index.js index 1466eede864..27b410c3a12 100644 --- a/app/assets/javascripts/profile/edit/index.js +++ b/app/assets/javascripts/profile/edit/index.js @@ -7,13 +7,27 @@ export const initProfileEdit = () => { if (!mountEl) return false; - const { profilePath, userPath, ...provides } = mountEl.dataset; + const { + profilePath, + userPath, + currentEmoji, + currentMessage, + currentAvailability, + defaultEmoji, + currentClearStatusAfter, + ...provides + } = mountEl.dataset; return new Vue({ el: mountEl, name: 'ProfileEditRoot', provide: { ...provides, + currentEmoji, + currentMessage, + currentAvailability, + defaultEmoji, + currentClearStatusAfter, hasAvatar: parseBoolean(provides.hasAvatar), gravatarEnabled: parseBoolean(provides.gravatarEnabled), gravatarLink: JSON.parse(provides.gravatarLink), |