diff options
Diffstat (limited to 'app/assets/javascripts/set_status_modal/set_status_form.vue')
-rw-r--r-- | app/assets/javascripts/set_status_modal/set_status_form.vue | 39 |
1 files changed, 26 insertions, 13 deletions
diff --git a/app/assets/javascripts/set_status_modal/set_status_form.vue b/app/assets/javascripts/set_status_modal/set_status_form.vue index dd27a12cbee..c96189c7cae 100644 --- a/app/assets/javascripts/set_status_modal/set_status_form.vue +++ b/app/assets/javascripts/set_status_modal/set_status_form.vue @@ -8,7 +8,6 @@ import { GlFormInputGroup, GlDropdown, GlDropdownItem, - GlSprintf, GlFormGroup, } from '@gitlab/ui'; import $ from 'jquery'; @@ -16,7 +15,8 @@ import SafeHtml from '~/vue_shared/directives/safe_html'; import GfmAutoComplete from 'ee_else_ce/gfm_auto_complete'; import * as Emoji from '~/emoji'; import { s__ } from '~/locale'; -import { TIME_RANGES_WITH_NEVER, AVAILABILITY_STATUS } from './constants'; +import { formatDate, newDate, nSecondsAfter, isToday } from '~/lib/utils/datetime_utility'; +import { TIME_RANGES_WITH_NEVER, AVAILABILITY_STATUS, NEVER_TIME_RANGE } from './constants'; export default { components: { @@ -27,7 +27,6 @@ export default { GlFormInputGroup, GlDropdown, GlDropdownItem, - GlSprintf, GlFormGroup, EmojiPicker: () => import('~/emoji/components/picker.vue'), }, @@ -56,7 +55,7 @@ export default { clearStatusAfter: { type: Object, required: false, - default: () => ({}), + default: null, }, currentClearStatusAfter: { type: String, @@ -80,6 +79,21 @@ export default { noEmoji() { return this.emojiTag === ''; }, + clearStatusAfterDropdownText() { + if (this.clearStatusAfter === null && this.currentClearStatusAfter.length) { + return this.formatClearStatusAfterDate(new Date(this.currentClearStatusAfter)); + } + + if (this.clearStatusAfter?.duration?.seconds) { + const clearStatusAfterDate = nSecondsAfter( + newDate(), + this.clearStatusAfter.duration.seconds, + ); + return this.formatClearStatusAfterDate(clearStatusAfterDate); + } + + return NEVER_TIME_RANGE.label; + }, }, mounted() { this.setupEmojiListAndAutocomplete(); @@ -124,6 +138,13 @@ export default { this.$emit('message-input', ''); this.clearEmoji(); }, + formatClearStatusAfterDate(date) { + if (isToday(date)) { + return formatDate(date, 'h:MMtt'); + } + + return formatDate(date, 'mmm d, yyyy h:MMtt'); + }, }, TIME_RANGES_WITH_NEVER, AVAILABILITY_STATUS, @@ -202,7 +223,7 @@ export default { <gl-form-group :label="$options.i18n.clearStatusAfterDropdownLabel" class="gl-mb-0"> <gl-dropdown block - :text="clearStatusAfter.label" + :text="clearStatusAfterDropdownText" data-testid="clear-status-at-dropdown" toggle-class="gl-mb-0 gl-form-input-md" > @@ -214,14 +235,6 @@ export default { >{{ after.label }}</gl-dropdown-item > </gl-dropdown> - - <template v-if="currentClearStatusAfter.length" #description> - <span data-testid="clear-status-at-message"> - <gl-sprintf :message="$options.i18n.clearStatusAfterMessage"> - <template #date>{{ currentClearStatusAfter }}</template> - </gl-sprintf> - </span> - </template> </gl-form-group> </div> </template> |