2018-12-05 23:21:45 +05:30
|
|
|
<script>
|
2020-11-24 15:15:51 +05:30
|
|
|
/* eslint-disable vue/no-v-html */
|
2018-12-05 23:21:45 +05:30
|
|
|
import $ from 'jquery';
|
2020-01-01 13:55:28 +05:30
|
|
|
import GfmAutoComplete from 'ee_else_ce/gfm_auto_complete';
|
2021-01-29 00:20:46 +05:30
|
|
|
import { GlModal, GlTooltipDirective, GlIcon, GlFormCheckbox } from '@gitlab/ui';
|
2020-10-24 23:57:45 +05:30
|
|
|
import { deprecatedCreateFlash as createFlash } from '~/flash';
|
2018-12-05 23:21:45 +05:30
|
|
|
import { __, s__ } from '~/locale';
|
|
|
|
import Api from '~/api';
|
|
|
|
import EmojiMenuInModal from './emoji_menu_in_modal';
|
2021-01-29 00:20:46 +05:30
|
|
|
import { isUserBusy, isValidAvailibility } from './utils';
|
2020-07-28 23:09:34 +05:30
|
|
|
import * as Emoji from '~/emoji';
|
2018-12-05 23:21:45 +05:30
|
|
|
|
|
|
|
const emojiMenuClass = 'js-modal-status-emoji-menu';
|
2021-01-29 00:20:46 +05:30
|
|
|
export const AVAILABILITY_STATUS = {
|
|
|
|
BUSY: 'busy',
|
|
|
|
NOT_SET: 'not_set',
|
|
|
|
};
|
2018-12-05 23:21:45 +05:30
|
|
|
|
|
|
|
export default {
|
|
|
|
components: {
|
2020-11-24 15:15:51 +05:30
|
|
|
GlIcon,
|
2018-12-13 13:39:08 +05:30
|
|
|
GlModal,
|
2021-01-29 00:20:46 +05:30
|
|
|
GlFormCheckbox,
|
2018-12-13 13:39:08 +05:30
|
|
|
},
|
|
|
|
directives: {
|
|
|
|
GlTooltip: GlTooltipDirective,
|
2018-12-05 23:21:45 +05:30
|
|
|
},
|
|
|
|
props: {
|
2021-01-29 00:20:46 +05:30
|
|
|
defaultEmoji: {
|
|
|
|
type: String,
|
|
|
|
required: false,
|
|
|
|
default: '',
|
|
|
|
},
|
2018-12-05 23:21:45 +05:30
|
|
|
currentEmoji: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
currentMessage: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
|
|
|
},
|
2021-01-29 00:20:46 +05:30
|
|
|
currentAvailability: {
|
|
|
|
type: String,
|
|
|
|
required: false,
|
|
|
|
validator: isValidAvailibility,
|
|
|
|
default: '',
|
|
|
|
},
|
|
|
|
canSetUserAvailability: {
|
|
|
|
type: Boolean,
|
|
|
|
required: false,
|
|
|
|
default: false,
|
|
|
|
},
|
2018-12-05 23:21:45 +05:30
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
defaultEmojiTag: '',
|
|
|
|
emoji: this.currentEmoji,
|
|
|
|
emojiMenu: null,
|
|
|
|
emojiTag: '',
|
|
|
|
isEmojiMenuVisible: false,
|
|
|
|
message: this.currentMessage,
|
|
|
|
modalId: 'set-user-status-modal',
|
|
|
|
noEmoji: true,
|
2021-01-29 00:20:46 +05:30
|
|
|
availability: isUserBusy(this.currentAvailability),
|
2018-12-05 23:21:45 +05:30
|
|
|
};
|
|
|
|
},
|
|
|
|
computed: {
|
2021-01-29 00:20:46 +05:30
|
|
|
isCustomEmoji() {
|
|
|
|
return this.emoji !== this.defaultEmoji;
|
|
|
|
},
|
2018-12-05 23:21:45 +05:30
|
|
|
isDirty() {
|
2021-01-29 00:20:46 +05:30
|
|
|
return Boolean(this.message.length || this.isCustomEmoji);
|
2018-12-05 23:21:45 +05:30
|
|
|
},
|
|
|
|
},
|
|
|
|
mounted() {
|
2020-11-24 15:15:51 +05:30
|
|
|
this.$root.$emit('bv::show::modal', this.modalId);
|
2018-12-05 23:21:45 +05:30
|
|
|
},
|
|
|
|
beforeDestroy() {
|
|
|
|
this.emojiMenu.destroy();
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
closeModal() {
|
|
|
|
this.$root.$emit('bv::hide::modal', this.modalId);
|
|
|
|
},
|
|
|
|
setupEmojiListAndAutocomplete() {
|
|
|
|
const toggleEmojiMenuButtonSelector = '#set-user-status-modal .js-toggle-emoji-menu';
|
|
|
|
const emojiAutocomplete = new GfmAutoComplete();
|
|
|
|
emojiAutocomplete.setup($(this.$refs.statusMessageField), { emojis: true });
|
|
|
|
|
2020-07-28 23:09:34 +05:30
|
|
|
Emoji.initEmojiMap()
|
|
|
|
.then(() => {
|
2018-12-05 23:21:45 +05:30
|
|
|
if (this.emoji) {
|
|
|
|
this.emojiTag = Emoji.glEmojiTag(this.emoji);
|
|
|
|
}
|
|
|
|
this.noEmoji = this.emoji === '';
|
2021-01-29 00:20:46 +05:30
|
|
|
this.defaultEmojiTag = Emoji.glEmojiTag(this.defaultEmoji);
|
2018-12-05 23:21:45 +05:30
|
|
|
|
|
|
|
this.emojiMenu = new EmojiMenuInModal(
|
|
|
|
Emoji,
|
|
|
|
toggleEmojiMenuButtonSelector,
|
|
|
|
emojiMenuClass,
|
|
|
|
this.setEmoji,
|
|
|
|
this.$refs.userStatusForm,
|
|
|
|
);
|
2021-01-29 00:20:46 +05:30
|
|
|
this.setDefaultEmoji();
|
2018-12-05 23:21:45 +05:30
|
|
|
})
|
|
|
|
.catch(() => createFlash(__('Failed to load emoji list.')));
|
|
|
|
},
|
2020-06-23 00:09:42 +05:30
|
|
|
showEmojiMenu(e) {
|
|
|
|
e.stopPropagation();
|
2018-12-05 23:21:45 +05:30
|
|
|
this.isEmojiMenuVisible = true;
|
|
|
|
this.emojiMenu.showEmojiMenu($(this.$refs.toggleEmojiMenuButton));
|
|
|
|
},
|
|
|
|
hideEmojiMenu() {
|
|
|
|
if (!this.isEmojiMenuVisible) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.isEmojiMenuVisible = false;
|
|
|
|
this.emojiMenu.hideMenuElement($(`.${emojiMenuClass}`));
|
|
|
|
},
|
|
|
|
setDefaultEmoji() {
|
|
|
|
const { emojiTag } = this;
|
2021-01-29 00:20:46 +05:30
|
|
|
const hasStatusMessage = Boolean(this.message.length);
|
2018-12-05 23:21:45 +05:30
|
|
|
if (hasStatusMessage && emojiTag) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (hasStatusMessage) {
|
|
|
|
this.noEmoji = false;
|
|
|
|
this.emojiTag = this.defaultEmojiTag;
|
|
|
|
} else if (emojiTag === this.defaultEmojiTag) {
|
|
|
|
this.noEmoji = true;
|
|
|
|
this.clearEmoji();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
setEmoji(emoji, emojiTag) {
|
|
|
|
this.emoji = emoji;
|
|
|
|
this.noEmoji = false;
|
|
|
|
this.clearEmoji();
|
|
|
|
this.emojiTag = emojiTag;
|
|
|
|
},
|
|
|
|
clearEmoji() {
|
|
|
|
if (this.emojiTag) {
|
|
|
|
this.emojiTag = '';
|
|
|
|
}
|
|
|
|
},
|
|
|
|
clearStatusInputs() {
|
|
|
|
this.emoji = '';
|
|
|
|
this.message = '';
|
|
|
|
this.noEmoji = true;
|
|
|
|
this.clearEmoji();
|
|
|
|
this.hideEmojiMenu();
|
|
|
|
},
|
|
|
|
removeStatus() {
|
2021-01-29 00:20:46 +05:30
|
|
|
this.availability = false;
|
2018-12-05 23:21:45 +05:30
|
|
|
this.clearStatusInputs();
|
|
|
|
this.setStatus();
|
|
|
|
},
|
|
|
|
setStatus() {
|
2021-01-29 00:20:46 +05:30
|
|
|
const { emoji, message, availability } = this;
|
2018-12-05 23:21:45 +05:30
|
|
|
|
|
|
|
Api.postUserStatus({
|
|
|
|
emoji,
|
|
|
|
message,
|
2021-01-29 00:20:46 +05:30
|
|
|
availability: availability ? AVAILABILITY_STATUS.BUSY : AVAILABILITY_STATUS.NOT_SET,
|
2018-12-05 23:21:45 +05:30
|
|
|
})
|
|
|
|
.then(this.onUpdateSuccess)
|
|
|
|
.catch(this.onUpdateFail);
|
|
|
|
},
|
|
|
|
onUpdateSuccess() {
|
2021-01-29 00:20:46 +05:30
|
|
|
this.$toast.show(s__('SetStatusModal|Status updated'), {
|
|
|
|
type: 'success',
|
|
|
|
position: 'top-center',
|
|
|
|
});
|
2018-12-05 23:21:45 +05:30
|
|
|
this.closeModal();
|
|
|
|
window.location.reload();
|
|
|
|
},
|
|
|
|
onUpdateFail() {
|
|
|
|
createFlash(
|
|
|
|
s__("SetStatusModal|Sorry, we weren't able to set your status. Please try again later."),
|
|
|
|
);
|
|
|
|
|
|
|
|
this.closeModal();
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
2018-12-13 13:39:08 +05:30
|
|
|
<gl-modal
|
2018-12-05 23:21:45 +05:30
|
|
|
:title="s__('SetStatusModal|Set a status')"
|
|
|
|
:modal-id="modalId"
|
|
|
|
:ok-title="s__('SetStatusModal|Set status')"
|
|
|
|
:cancel-title="s__('SetStatusModal|Remove status')"
|
|
|
|
ok-variant="success"
|
2019-12-21 20:55:43 +05:30
|
|
|
modal-class="set-user-status-modal"
|
2018-12-05 23:21:45 +05:30
|
|
|
@shown="setupEmojiListAndAutocomplete"
|
|
|
|
@hide="hideEmojiMenu"
|
|
|
|
@ok="setStatus"
|
|
|
|
@cancel="removeStatus"
|
|
|
|
>
|
|
|
|
<div>
|
|
|
|
<input
|
|
|
|
v-model="emoji"
|
|
|
|
class="js-status-emoji-field"
|
|
|
|
type="hidden"
|
|
|
|
name="user[status][emoji]"
|
|
|
|
/>
|
2019-02-15 15:39:39 +05:30
|
|
|
<div ref="userStatusForm" class="form-group position-relative m-0">
|
2021-01-29 00:20:46 +05:30
|
|
|
<div class="input-group gl-mb-5">
|
2019-07-31 22:56:46 +05:30
|
|
|
<span class="input-group-prepend">
|
2018-12-05 23:21:45 +05:30
|
|
|
<button
|
|
|
|
ref="toggleEmojiMenuButton"
|
2021-01-29 00:20:46 +05:30
|
|
|
v-gl-tooltip.bottom.hover
|
2018-12-05 23:21:45 +05:30
|
|
|
:title="s__('SetStatusModal|Add status emoji')"
|
|
|
|
:aria-label="s__('SetStatusModal|Add status emoji')"
|
|
|
|
name="button"
|
|
|
|
type="button"
|
|
|
|
class="js-toggle-emoji-menu emoji-menu-toggle-button btn"
|
|
|
|
@click="showEmojiMenu"
|
|
|
|
>
|
|
|
|
<span v-html="emojiTag"></span>
|
|
|
|
<span
|
|
|
|
v-show="noEmoji"
|
|
|
|
class="js-no-emoji-placeholder no-emoji-placeholder position-relative"
|
|
|
|
>
|
2020-11-24 15:15:51 +05:30
|
|
|
<gl-icon name="slight-smile" class="award-control-icon-neutral" />
|
|
|
|
<gl-icon name="smiley" class="award-control-icon-positive" />
|
|
|
|
<gl-icon name="smile" class="award-control-icon-super-positive" />
|
2018-12-05 23:21:45 +05:30
|
|
|
</span>
|
|
|
|
</button>
|
|
|
|
</span>
|
|
|
|
<input
|
|
|
|
ref="statusMessageField"
|
|
|
|
v-model="message"
|
|
|
|
:placeholder="s__('SetStatusModal|What\'s your status?')"
|
|
|
|
type="text"
|
|
|
|
class="form-control form-control input-lg js-status-message-field"
|
|
|
|
name="user[status][message]"
|
|
|
|
@keyup="setDefaultEmoji"
|
|
|
|
@keyup.enter.prevent
|
|
|
|
@click="hideEmojiMenu"
|
|
|
|
/>
|
2019-07-31 22:56:46 +05:30
|
|
|
<span v-show="isDirty" class="input-group-append">
|
2018-12-05 23:21:45 +05:30
|
|
|
<button
|
|
|
|
v-gl-tooltip.bottom
|
|
|
|
:title="s__('SetStatusModal|Clear status')"
|
|
|
|
:aria-label="s__('SetStatusModal|Clear status')"
|
|
|
|
name="button"
|
|
|
|
type="button"
|
|
|
|
class="js-clear-user-status-button clear-user-status btn"
|
2019-03-02 22:35:43 +05:30
|
|
|
@click="clearStatusInputs()"
|
2018-12-05 23:21:45 +05:30
|
|
|
>
|
2020-11-24 15:15:51 +05:30
|
|
|
<gl-icon name="close" />
|
2018-12-05 23:21:45 +05:30
|
|
|
</button>
|
|
|
|
</span>
|
|
|
|
</div>
|
2021-01-29 00:20:46 +05:30
|
|
|
<div v-if="canSetUserAvailability" class="form-group">
|
|
|
|
<div class="gl-display-flex">
|
|
|
|
<gl-form-checkbox
|
|
|
|
v-model="availability"
|
|
|
|
data-testid="user-availability-checkbox"
|
|
|
|
class="gl-mb-0"
|
|
|
|
>
|
|
|
|
<span class="gl-font-weight-bold">{{ s__('SetStatusModal|Busy') }}</span>
|
|
|
|
</gl-form-checkbox>
|
|
|
|
</div>
|
|
|
|
<div class="gl-display-flex">
|
|
|
|
<span class="gl-text-gray-600 gl-ml-5">
|
|
|
|
{{ s__('SetStatusModal|"Busy" will be shown next to your name') }}
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
2018-12-05 23:21:45 +05:30
|
|
|
</div>
|
|
|
|
</div>
|
2018-12-13 13:39:08 +05:30
|
|
|
</gl-modal>
|
2018-12-05 23:21:45 +05:30
|
|
|
</template>
|