2018-10-04 08:19:51 +00:00
|
|
|
<script>
|
2022-08-31 12:13:01 +00:00
|
|
|
import { GlToast, GlTooltipDirective, GlSafeHtmlDirective, GlModal } from '@gitlab/ui';
|
2020-11-24 21:09:39 +00:00
|
|
|
import Vue from 'vue';
|
2022-09-29 15:09:34 +00:00
|
|
|
import { createAlert } from '~/flash';
|
2021-02-14 18:09:20 +00:00
|
|
|
import { BV_SHOW_MODAL, BV_HIDE_MODAL } from '~/lib/utils/constants';
|
2022-09-12 21:10:38 +00:00
|
|
|
import { s__ } from '~/locale';
|
2021-01-14 15:10:46 +00:00
|
|
|
import { updateUserStatus } from '~/rest_api';
|
2021-05-19 09:10:19 +00:00
|
|
|
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
|
2021-02-16 12:09:03 +00:00
|
|
|
import { isUserBusy } from './utils';
|
2022-09-12 21:10:38 +00:00
|
|
|
import { NEVER_TIME_RANGE, AVAILABILITY_STATUS } from './constants';
|
2022-08-31 12:13:01 +00:00
|
|
|
import SetStatusForm from './set_status_form.vue';
|
2018-10-04 08:19:51 +00:00
|
|
|
|
2020-11-24 21:09:39 +00:00
|
|
|
Vue.use(GlToast);
|
|
|
|
|
2018-10-04 08:19:51 +00:00
|
|
|
export default {
|
|
|
|
components: {
|
2018-10-31 15:18:20 +00:00
|
|
|
GlModal,
|
2022-08-31 12:13:01 +00:00
|
|
|
SetStatusForm,
|
2018-10-04 08:19:51 +00:00
|
|
|
},
|
2018-11-05 16:48:55 +00:00
|
|
|
directives: {
|
|
|
|
GlTooltip: GlTooltipDirective,
|
2021-09-09 09:11:16 +00:00
|
|
|
SafeHtml: GlSafeHtmlDirective,
|
2018-11-05 16:48:55 +00:00
|
|
|
},
|
2021-05-19 09:10:19 +00:00
|
|
|
mixins: [glFeatureFlagsMixin()],
|
2018-10-04 08:19:51 +00:00
|
|
|
props: {
|
2020-11-17 15:09:28 +00:00
|
|
|
defaultEmoji: {
|
|
|
|
type: String,
|
|
|
|
required: false,
|
|
|
|
default: '',
|
|
|
|
},
|
2018-10-04 08:19:51 +00:00
|
|
|
currentEmoji: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
currentMessage: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
|
|
|
},
|
2020-11-17 15:09:28 +00:00
|
|
|
currentAvailability: {
|
|
|
|
type: String,
|
|
|
|
required: false,
|
|
|
|
default: '',
|
|
|
|
},
|
2021-03-18 06:11:52 +00:00
|
|
|
currentClearStatusAfter: {
|
|
|
|
type: String,
|
|
|
|
required: false,
|
|
|
|
default: '',
|
|
|
|
},
|
2018-10-04 08:19:51 +00:00
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
defaultEmojiTag: '',
|
|
|
|
emoji: this.currentEmoji,
|
|
|
|
message: this.currentMessage,
|
|
|
|
modalId: 'set-user-status-modal',
|
2020-11-17 15:09:28 +00:00
|
|
|
availability: isUserBusy(this.currentAvailability),
|
2022-09-12 21:10:38 +00:00
|
|
|
clearStatusAfter: NEVER_TIME_RANGE,
|
2018-10-04 08:19:51 +00:00
|
|
|
};
|
|
|
|
},
|
|
|
|
mounted() {
|
2021-01-28 21:09:04 +00:00
|
|
|
this.$root.$emit(BV_SHOW_MODAL, this.modalId);
|
2018-10-04 08:19:51 +00:00
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
closeModal() {
|
2021-01-28 21:09:04 +00:00
|
|
|
this.$root.$emit(BV_HIDE_MODAL, this.modalId);
|
2018-10-04 08:19:51 +00:00
|
|
|
},
|
|
|
|
removeStatus() {
|
2020-11-17 15:09:28 +00:00
|
|
|
this.availability = false;
|
2022-08-31 12:13:01 +00:00
|
|
|
this.emoji = '';
|
|
|
|
this.message = '';
|
2018-10-04 08:19:51 +00:00
|
|
|
this.setStatus();
|
|
|
|
},
|
|
|
|
setStatus() {
|
2021-03-18 06:11:52 +00:00
|
|
|
const { emoji, message, availability, clearStatusAfter } = this;
|
2018-10-04 08:19:51 +00:00
|
|
|
|
2021-01-14 15:10:46 +00:00
|
|
|
updateUserStatus({
|
2018-10-04 08:19:51 +00:00
|
|
|
emoji,
|
|
|
|
message,
|
2020-11-17 15:09:28 +00:00
|
|
|
availability: availability ? AVAILABILITY_STATUS.BUSY : AVAILABILITY_STATUS.NOT_SET,
|
2021-03-18 06:11:52 +00:00
|
|
|
clearStatusAfter:
|
2022-09-12 21:10:38 +00:00
|
|
|
clearStatusAfter.label === NEVER_TIME_RANGE.label ? null : clearStatusAfter.shortcut,
|
2018-10-04 08:19:51 +00:00
|
|
|
})
|
|
|
|
.then(this.onUpdateSuccess)
|
|
|
|
.catch(this.onUpdateFail);
|
|
|
|
},
|
|
|
|
onUpdateSuccess() {
|
2021-01-14 06:11:16 +00:00
|
|
|
this.$toast.show(s__('SetStatusModal|Status updated'));
|
2018-10-04 08:19:51 +00:00
|
|
|
this.closeModal();
|
|
|
|
window.location.reload();
|
|
|
|
},
|
|
|
|
onUpdateFail() {
|
2022-09-29 15:09:34 +00:00
|
|
|
createAlert({
|
2021-06-02 21:10:00 +00:00
|
|
|
message: s__(
|
|
|
|
"SetStatusModal|Sorry, we weren't able to set your status. Please try again later.",
|
|
|
|
),
|
|
|
|
});
|
2018-10-04 08:19:51 +00:00
|
|
|
|
|
|
|
this.closeModal();
|
|
|
|
},
|
2022-08-31 12:13:01 +00:00
|
|
|
handleMessageInput(value) {
|
|
|
|
this.message = value;
|
|
|
|
},
|
|
|
|
handleEmojiClick(emoji) {
|
|
|
|
this.emoji = emoji;
|
|
|
|
},
|
|
|
|
handleClearStatusAfterClick(after) {
|
2021-03-18 06:11:52 +00:00
|
|
|
this.clearStatusAfter = after;
|
|
|
|
},
|
2022-08-31 12:13:01 +00:00
|
|
|
handleAvailabilityInput(value) {
|
|
|
|
this.availability = value;
|
|
|
|
},
|
2018-10-04 08:19:51 +00:00
|
|
|
},
|
2021-09-09 09:11:16 +00:00
|
|
|
safeHtmlConfig: { ADD_TAGS: ['gl-emoji'] },
|
2021-11-18 03:14:17 +00:00
|
|
|
actionPrimary: { text: s__('SetStatusModal|Set status') },
|
|
|
|
actionSecondary: { text: s__('SetStatusModal|Remove status') },
|
2018-10-04 08:19:51 +00:00
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
2018-10-31 15:18:20 +00:00
|
|
|
<gl-modal
|
2018-10-04 08:19:51 +00:00
|
|
|
:title="s__('SetStatusModal|Set a status')"
|
|
|
|
:modal-id="modalId"
|
2021-11-18 03:14:17 +00:00
|
|
|
:action-primary="$options.actionPrimary"
|
|
|
|
:action-secondary="$options.actionSecondary"
|
2019-10-15 18:06:01 +00:00
|
|
|
modal-class="set-user-status-modal"
|
2021-11-18 03:14:17 +00:00
|
|
|
@primary="setStatus"
|
|
|
|
@secondary="removeStatus"
|
2018-10-04 08:19:51 +00:00
|
|
|
>
|
2022-08-31 12:13:01 +00:00
|
|
|
<set-status-form
|
|
|
|
:default-emoji="defaultEmoji"
|
|
|
|
:emoji="emoji"
|
|
|
|
:message="message"
|
|
|
|
:availability="availability"
|
|
|
|
:clear-status-after="clearStatusAfter"
|
|
|
|
:current-clear-status-after="currentClearStatusAfter"
|
|
|
|
@message-input="handleMessageInput"
|
|
|
|
@emoji-click="handleEmojiClick"
|
|
|
|
@clear-status-after-click="handleClearStatusAfterClick"
|
|
|
|
@availability-input="handleAvailabilityInput"
|
|
|
|
/>
|
2018-10-31 15:18:20 +00:00
|
|
|
</gl-modal>
|
2018-10-04 08:19:51 +00:00
|
|
|
</template>
|