diff options
Diffstat (limited to 'src/tools/date-time-converter/date-time-converter.vue')
| -rw-r--r-- | src/tools/date-time-converter/date-time-converter.vue | 147 |
1 files changed, 75 insertions, 72 deletions
diff --git a/src/tools/date-time-converter/date-time-converter.vue b/src/tools/date-time-converter/date-time-converter.vue index 4207eb9..fcebce8 100644 --- a/src/tools/date-time-converter/date-time-converter.vue +++ b/src/tools/date-time-converter/date-time-converter.vue @@ -1,42 +1,3 @@ -<template> - <div> - <n-input-group> - <c-input-text - v-model:value="inputDate" - autofocus - placeholder="Put you date string here..." - clearable - test-id="date-time-converter-input" - :validation="validation" - @update:value="onDateInputChanged" - /> - - <n-select - v-model:value="formatIndex" - style="flex: 0 0 170px" - :options="formats.map(({ name }, i) => ({ label: name, value: i }))" - data-test-id="date-time-converter-format-select" - /> - </n-input-group> - - <n-divider /> - - <input-copyable - v-for="{ name, fromDate } in formats" - :key="name" - :label="name" - label-width="150px" - label-position="left" - label-align="right" - :value="formatDateUsingFormatter(fromDate, normalizedDate)" - placeholder="Invalid date..." - :test-id="name" - readonly - mt-2 - /> - </div> -</template> - <script setup lang="ts"> import { formatISO, @@ -46,41 +7,33 @@ import { fromUnixTime, getTime, getUnixTime, - parseISO, - parseJSON, isDate, isValid, + parseISO, + parseJSON, } from 'date-fns'; -import { withDefaultOnError } from '@/utils/defaults'; -import { useValidation } from '@/composable/validation'; import type { DateFormat, ToDateMapper } from './date-time-converter.types'; import { isISO8601DateTimeString, isISO9075DateString, + isMongoObjectId, isRFC3339DateString, isRFC7231DateString, isTimestamp, isUTCDateString, isUnixTimestamp, - isMongoObjectId, } from './date-time-converter.models'; +import { withDefaultOnError } from '@/utils/defaults'; +import { useValidation } from '@/composable/validation'; const inputDate = ref(''); -const toDate: ToDateMapper = (date) => new Date(date); - -function formatDateUsingFormatter(formatter: (date: Date) => string, date?: Date) { - if (!date || !validation.isValid) { - return ''; - } - - return withDefaultOnError(() => formatter(date), ''); -} +const toDate: ToDateMapper = date => new Date(date); const formats: DateFormat[] = [ { name: 'JS locale date string', - fromDate: (date) => date.toString(), + fromDate: date => date.toString(), toDate, formatMatcher: () => false, }, @@ -88,49 +41,49 @@ const formats: DateFormat[] = [ name: 'ISO 8601', fromDate: formatISO, toDate: parseISO, - formatMatcher: (date) => isISO8601DateTimeString(date), + formatMatcher: date => isISO8601DateTimeString(date), }, { name: 'ISO 9075', fromDate: formatISO9075, toDate: parseISO, - formatMatcher: (date) => isISO9075DateString(date), + formatMatcher: date => isISO9075DateString(date), }, { name: 'RFC 3339', fromDate: formatRFC3339, toDate, - formatMatcher: (date) => isRFC3339DateString(date), + formatMatcher: date => isRFC3339DateString(date), }, { name: 'RFC 7231', fromDate: formatRFC7231, toDate, - formatMatcher: (date) => isRFC7231DateString(date), + formatMatcher: date => isRFC7231DateString(date), }, { name: 'Unix timestamp', - fromDate: (date) => String(getUnixTime(date)), - toDate: (sec) => fromUnixTime(+sec), - formatMatcher: (date) => isUnixTimestamp(date), + fromDate: date => String(getUnixTime(date)), + toDate: sec => fromUnixTime(+sec), + formatMatcher: date => isUnixTimestamp(date), }, { name: 'Timestamp', - fromDate: (date) => String(getTime(date)), - toDate: (ms) => parseJSON(+ms), - formatMatcher: (date) => isTimestamp(date), + fromDate: date => String(getTime(date)), + toDate: ms => parseJSON(+ms), + formatMatcher: date => isTimestamp(date), }, { name: 'UTC format', - fromDate: (date) => date.toUTCString(), + fromDate: date => date.toUTCString(), toDate, - formatMatcher: (date) => isUTCDateString(date), + formatMatcher: date => isUTCDateString(date), }, { name: 'Mongo ObjectID', - fromDate: (date) => Math.floor(date.getTime() / 1000).toString(16) + '0000000000000000', - toDate: (objectId) => new Date(parseInt(objectId.substring(0, 8), 16) * 1000), - formatMatcher: (date) => isMongoObjectId(date), + fromDate: date => `${Math.floor(date.getTime() / 1000).toString(16)}0000000000000000`, + toDate: objectId => new Date(parseInt(objectId.substring(0, 8), 16) * 1000), + formatMatcher: date => isMongoObjectId(date), }, ]; @@ -146,7 +99,8 @@ const normalizedDate = computed(() => { try { return toDate(inputDate.value); - } catch (_ignored) { + } + catch (_ignored) { return undefined; } }); @@ -164,9 +118,11 @@ const validation = useValidation({ rules: [ { message: 'This date is invalid for this format', - validator: (value) => + validator: value => withDefaultOnError(() => { - if (value === '') return true; + if (value === '') { + return true; + } const maybeDate = formats[formatIndex.value].toDate(value); return isDate(maybeDate) && isValid(maybeDate); @@ -174,4 +130,51 @@ const validation = useValidation({ }, ], }); + +function formatDateUsingFormatter(formatter: (date: Date) => string, date?: Date) { + if (!date || !validation.isValid) { + return ''; + } + + return withDefaultOnError(() => formatter(date), ''); +} </script> + +<template> + <div> + <n-input-group> + <c-input-text + v-model:value="inputDate" + autofocus + placeholder="Put you date string here..." + clearable + test-id="date-time-converter-input" + :validation="validation" + @update:value="onDateInputChanged" + /> + + <n-select + v-model:value="formatIndex" + style="flex: 0 0 170px" + :options="formats.map(({ name }, i) => ({ label: name, value: i }))" + data-test-id="date-time-converter-format-select" + /> + </n-input-group> + + <n-divider /> + + <input-copyable + v-for="{ name, fromDate } in formats" + :key="name" + :label="name" + label-width="150px" + label-position="left" + label-align="right" + :value="formatDateUsingFormatter(fromDate, normalizedDate)" + placeholder="Invalid date..." + :test-id="name" + readonly + mt-2 + /> + </div> +</template> |