diff options
Diffstat (limited to 'app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue')
-rw-r--r-- | app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue | 242 |
1 files changed, 118 insertions, 124 deletions
diff --git a/app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue b/app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue index 0d84fabb1be..b7ae18372ab 100644 --- a/app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue +++ b/app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue @@ -1,9 +1,9 @@ <script> -import { GlDatepicker, GlFormInput, GlFormGroup, GlButton, GlIcon } from '@gitlab/ui'; +import { GlDatepicker, GlFormInput, GlFormGroup, GlButton } from '@gitlab/ui'; import MarkdownField from '~/vue_shared/components/markdown/field.vue'; import autofocusonshow from '~/vue_shared/directives/autofocusonshow'; import { timelineFormI18n } from './constants'; -import { getUtcShiftedDateNow } from './utils'; +import { getUtcShiftedDate } from './utils'; export default { name: 'TimelineEventsForm', @@ -15,6 +15,7 @@ export default { 'task-list', 'collapsible-section', 'table', + 'attach-file', 'full-screen', ], components: { @@ -23,175 +24,168 @@ export default { GlFormInput, GlFormGroup, GlButton, - GlIcon, }, i18n: timelineFormI18n, directives: { autofocusonshow, }, props: { - hasTimelineEvents: { + showSaveAndAdd: { type: Boolean, - required: true, + required: false, + default: false, }, isEventProcessed: { type: Boolean, required: true, }, + previousOccurredAt: { + type: String, + required: false, + default: null, + }, + previousNote: { + type: String, + required: false, + default: '', + }, }, data() { - // if occurredAt is undefined, returns "now" in UTC - const placeholderDate = getUtcShiftedDateNow(); + // if occurredAt is null, returns "now" in UTC + const placeholderDate = getUtcShiftedDate(this.previousOccurredAt); return { - timelineText: '', + timelineText: this.previousNote, placeholderDate, hourPickerInput: placeholderDate.getHours(), minutePickerInput: placeholderDate.getMinutes(), - datepickerTextInput: null, + datePickerInput: placeholderDate, }; }, computed: { - occurredAt() { - const [years, months, days] = this.datepickerTextInput.split('-'); + occurredAtString() { + const year = this.datePickerInput.getFullYear(); + const month = this.datePickerInput.getMonth(); + const day = this.datePickerInput.getDate(); + const utcDate = new Date( - Date.UTC(years, months - 1, days, this.hourPickerInput, this.minutePickerInput), + Date.UTC(year, month, day, this.hourPickerInput, this.minutePickerInput), ); return utcDate.toISOString(); }, }, + mounted() { + this.focusDate(); + }, methods: { clear() { - const utcShiftedDateNow = getUtcShiftedDateNow(); - this.placeholderDate = utcShiftedDateNow; - this.hourPickerInput = utcShiftedDateNow.getHours(); - this.minutePickerInput = utcShiftedDateNow.getMinutes(); + const newPlaceholderDate = getUtcShiftedDate(); + this.datePickerInput = newPlaceholderDate; + this.hourPickerInput = newPlaceholderDate.getHours(); + this.minutePickerInput = newPlaceholderDate.getMinutes(); this.timelineText = ''; }, focusDate() { - this.$refs.datepicker.$el.focus(); + this.$refs.datepicker.$el.querySelector('input').focus(); }, handleSave(addAnotherEvent) { - const eventDetails = { + const event = { note: this.timelineText, - occurredAt: this.occurredAt, + occurredAt: this.occurredAtString, }; - this.$emit('save-event', eventDetails, addAnotherEvent); + this.$emit('save-event', event, addAnotherEvent); }, }, }; </script> <template> - <div - class="gl-relative gl-display-flex gl-align-items-center" - :class="{ 'timeline-entry-vertical-line': hasTimelineEvents }" - > - <div - v-if="hasTimelineEvents" - class="gl-display-flex gl-align-items-center gl-justify-content-center gl-align-self-start gl-bg-white gl-text-gray-200 gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-full gl-mt-2 gl-mr-3 gl-w-8 gl-h-8 gl-z-index-1" - > - <gl-icon name="comment" class="note-icon" /> - </div> - <form class="gl-flex-grow-1 gl-border-gray-50" :class="{ 'gl-border-t': hasTimelineEvents }"> - <div - class="gl-display-flex gl-flex-direction-column gl-sm-flex-direction-row datetime-picker" - > - <gl-form-group :label="__('Date')" class="gl-mt-5 gl-mr-5"> - <gl-datepicker id="incident-date" #default="{ formattedDate }" v-model="placeholderDate"> + <form class="gl-flex-grow-1 gl-border-gray-50"> + <div class="gl-display-flex gl-flex-direction-column gl-sm-flex-direction-row"> + <gl-form-group :label="__('Date')" class="gl-mt-5 gl-mr-5"> + <gl-datepicker id="incident-date" ref="datepicker" v-model="datePickerInput" /> + </gl-form-group> + <div class="gl-display-flex gl-mt-5"> + <gl-form-group :label="__('Time')"> + <div class="gl-display-flex"> + <label label-for="timeline-input-hours" class="sr-only"></label> <gl-form-input - id="incident-date" - ref="datepicker" - v-model="datepickerTextInput" - data-testid="input-datepicker" - class="gl-datepicker-input gl-pr-7!" - :value="formattedDate" - :placeholder="__('YYYY-MM-DD')" - @keydown.enter="onKeydown" + id="timeline-input-hours" + v-model="hourPickerInput" + data-testid="input-hours" + size="xs" + type="number" + min="00" + max="23" /> - </gl-datepicker> - </gl-form-group> - <div class="gl-display-flex gl-mt-5"> - <gl-form-group :label="__('Time')"> - <div class="gl-display-flex"> - <label label-for="timeline-input-hours" class="sr-only"></label> - <gl-form-input - id="timeline-input-hours" - v-model="hourPickerInput" - data-testid="input-hours" - size="xs" - type="number" - min="00" - max="23" - /> - <label label-for="timeline-input-minutes" class="sr-only"></label> - <gl-form-input - id="timeline-input-minutes" - v-model="minutePickerInput" - class="gl-ml-3" - data-testid="input-minutes" - size="xs" - type="number" - min="00" - max="59" - /> - </div> - </gl-form-group> - <p class="gl-ml-3 gl-align-self-end gl-line-height-32">{{ __('UTC') }}</p> - </div> - </div> - <div class="common-note-form"> - <gl-form-group class="gl-mb-3" :label="$options.i18n.areaLabel"> - <markdown-field - :can-attach-file="false" - :add-spacing-classes="false" - :show-comment-tool-bar="false" - :textarea-value="timelineText" - :restricted-tool-bar-items="$options.restrictedToolBarItems" - markdown-docs-path="" - :enable-preview="false" - class="bordered-box gl-mt-0" - > - <template #textarea> - <textarea - v-model="timelineText" - class="note-textarea js-gfm-input js-autosize markdown-area" - data-testid="input-note" - dir="auto" - data-supports-quick-actions="false" - :aria-label="$options.i18n.description" - :placeholder="$options.i18n.areaPlaceholder" - > - </textarea> - </template> - </markdown-field> + <label label-for="timeline-input-minutes" class="sr-only"></label> + <gl-form-input + id="timeline-input-minutes" + v-model="minutePickerInput" + class="gl-ml-3" + data-testid="input-minutes" + size="xs" + type="number" + min="00" + max="59" + /> + </div> </gl-form-group> + <p class="gl-ml-3 gl-align-self-end gl-line-height-32">{{ __('UTC') }}</p> </div> - <gl-form-group class="gl-mb-0"> - <gl-button - variant="confirm" - category="primary" - class="gl-mr-3" - :loading="isEventProcessed" - @click="handleSave(false)" - > - {{ $options.i18n.save }} - </gl-button> - <gl-button - variant="confirm" - category="secondary" - class="gl-mr-3 gl-ml-n2" - :loading="isEventProcessed" - @click="handleSave(true)" + </div> + <div class="common-note-form"> + <gl-form-group class="gl-mb-3" :label="$options.i18n.areaLabel"> + <markdown-field + :can-attach-file="false" + :add-spacing-classes="false" + :show-comment-tool-bar="false" + :textarea-value="timelineText" + :restricted-tool-bar-items="$options.restrictedToolBarItems" + markdown-docs-path="" + :enable-preview="false" + class="bordered-box gl-mt-0" > - {{ $options.i18n.saveAndAdd }} - </gl-button> - <gl-button class="gl-ml-n2" :disabled="isEventProcessed" @click="$emit('cancel')"> - {{ $options.i18n.cancel }} - </gl-button> - <div class="gl-border-b gl-pt-5"></div> + <template #textarea> + <textarea + v-model="timelineText" + class="note-textarea js-gfm-input js-autosize markdown-area" + data-testid="input-note" + dir="auto" + data-supports-quick-actions="false" + :aria-label="$options.i18n.description" + :placeholder="$options.i18n.areaPlaceholder" + > + </textarea> + </template> + </markdown-field> </gl-form-group> - </form> - </div> + </div> + <gl-form-group class="gl-mb-0"> + <gl-button + variant="confirm" + category="primary" + class="gl-mr-3" + :loading="isEventProcessed" + @click="handleSave(false)" + > + {{ $options.i18n.save }} + </gl-button> + <gl-button + v-if="showSaveAndAdd" + variant="confirm" + category="secondary" + class="gl-mr-3 gl-ml-n2" + :loading="isEventProcessed" + @click="handleSave(true)" + > + {{ $options.i18n.saveAndAdd }} + </gl-button> + <gl-button class="gl-ml-n2" :disabled="isEventProcessed" @click="$emit('cancel')"> + {{ $options.i18n.cancel }} + </gl-button> + <div class="timeline-event-bottom-border"></div> + </gl-form-group> + </form> </template> |