diff options
Diffstat (limited to 'app/assets/javascripts/monitoring/components/date_time_picker/date_time_picker_input.vue')
-rw-r--r-- | app/assets/javascripts/monitoring/components/date_time_picker/date_time_picker_input.vue | 77 |
1 files changed, 77 insertions, 0 deletions
diff --git a/app/assets/javascripts/monitoring/components/date_time_picker/date_time_picker_input.vue b/app/assets/javascripts/monitoring/components/date_time_picker/date_time_picker_input.vue new file mode 100644 index 00000000000..0388a6190d9 --- /dev/null +++ b/app/assets/javascripts/monitoring/components/date_time_picker/date_time_picker_input.vue @@ -0,0 +1,77 @@ +<script> +import _ from 'underscore'; +import { s__, sprintf } from '~/locale'; +import { GlFormGroup, GlFormInput } from '@gitlab/ui'; +import { dateFormats } from '~/monitoring/constants'; + +const inputGroupText = { + invalidFeedback: sprintf(s__('Format: %{dateFormat}'), { + dateFormat: dateFormats.dateTimePicker.format, + }), + placeholder: dateFormats.dateTimePicker.format, +}; + +export default { + components: { + GlFormGroup, + GlFormInput, + }, + props: { + state: { + default: null, + required: true, + validator: prop => typeof prop === 'boolean' || prop === null, + }, + value: { + default: null, + required: false, + validator: prop => typeof prop === 'string' || prop === null, + }, + label: { + type: String, + default: '', + required: true, + }, + id: { + type: String, + required: false, + default: () => _.uniqueId('dateTimePicker_'), + }, + }, + data() { + return { + inputGroupText, + }; + }, + computed: { + invalidFeedback() { + return this.state ? '' : this.inputGroupText.invalidFeedback; + }, + inputState() { + // When the state is valid we want to show no + // green outline. Hence passing null and not true. + if (this.state === true) { + return null; + } + return this.state; + }, + }, + methods: { + onInputBlur(e) { + this.$emit('input', e.target.value.trim() || null); + }, + }, +}; +</script> + +<template> + <gl-form-group :label="label" label-size="sm" :label-for="id" :invalid-feedback="invalidFeedback"> + <gl-form-input + :id="id" + :value="value" + :state="inputState" + :placeholder="inputGroupText.placeholder" + @blur="onInputBlur" + /> + </gl-form-group> +</template> |