1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
<script>
import { GlToast, GlTooltipDirective, GlModal } from '@gitlab/ui';
import Vue from 'vue';
import { createAlert } from '~/flash';
import { BV_SHOW_MODAL, BV_HIDE_MODAL } from '~/lib/utils/constants';
import { s__ } from '~/locale';
import { updateUserStatus } from '~/rest_api';
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
import { isUserBusy } from './utils';
import { NEVER_TIME_RANGE, AVAILABILITY_STATUS } from './constants';
import SetStatusForm from './set_status_form.vue';
Vue.use(GlToast);
export default {
components: {
GlModal,
SetStatusForm,
},
directives: {
GlTooltip: GlTooltipDirective,
},
mixins: [glFeatureFlagsMixin()],
props: {
defaultEmoji: {
type: String,
required: false,
default: '',
},
currentEmoji: {
type: String,
required: true,
},
currentMessage: {
type: String,
required: true,
},
currentAvailability: {
type: String,
required: false,
default: '',
},
currentClearStatusAfter: {
type: String,
required: false,
default: '',
},
},
data() {
return {
defaultEmojiTag: '',
emoji: this.currentEmoji,
message: this.currentMessage,
modalId: 'set-user-status-modal',
availability: isUserBusy(this.currentAvailability),
clearStatusAfter: NEVER_TIME_RANGE,
};
},
mounted() {
this.$root.$emit(BV_SHOW_MODAL, this.modalId);
},
methods: {
closeModal() {
this.$root.$emit(BV_HIDE_MODAL, this.modalId);
},
removeStatus() {
this.availability = false;
this.emoji = '';
this.message = '';
this.setStatus();
},
setStatus() {
const { emoji, message, availability, clearStatusAfter } = this;
updateUserStatus({
emoji,
message,
availability: availability ? AVAILABILITY_STATUS.BUSY : AVAILABILITY_STATUS.NOT_SET,
clearStatusAfter:
clearStatusAfter.label === NEVER_TIME_RANGE.label ? null : clearStatusAfter.shortcut,
})
.then(this.onUpdateSuccess)
.catch(this.onUpdateFail);
},
onUpdateSuccess() {
this.$toast.show(s__('SetStatusModal|Status updated'));
this.closeModal();
window.location.reload();
},
onUpdateFail() {
createAlert({
message: s__(
"SetStatusModal|Sorry, we weren't able to set your status. Please try again later.",
),
});
this.closeModal();
},
handleMessageInput(value) {
this.message = value;
},
handleEmojiClick(emoji) {
this.emoji = emoji;
},
handleClearStatusAfterClick(after) {
this.clearStatusAfter = after;
},
handleAvailabilityInput(value) {
this.availability = value;
},
},
actionPrimary: { text: s__('SetStatusModal|Set status') },
actionSecondary: { text: s__('SetStatusModal|Remove status') },
};
</script>
<template>
<gl-modal
:title="s__('SetStatusModal|Set a status')"
:modal-id="modalId"
:action-primary="$options.actionPrimary"
:action-secondary="$options.actionSecondary"
modal-class="set-user-status-modal"
@primary="setStatus"
@secondary="removeStatus"
>
<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"
/>
</gl-modal>
</template>
|
