From e54f14171cb5107f5b2c2bf7c32fb26a3ce62e71 Mon Sep 17 00:00:00 2001 From: Jan Ackermann Date: Fri, 6 Sep 2024 10:09:33 +0200 Subject: [PATCH 1/3] Show relative date in ocDatePicker --- .../src/components/OcDatepicker/OcDatepicker.vue | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/design-system/src/components/OcDatepicker/OcDatepicker.vue b/packages/design-system/src/components/OcDatepicker/OcDatepicker.vue index e7cecc22afc..c764d349951 100644 --- a/packages/design-system/src/components/OcDatepicker/OcDatepicker.vue +++ b/packages/design-system/src/components/OcDatepicker/OcDatepicker.vue @@ -10,6 +10,7 @@ :clear-button-enabled="isClearable" :clear-button-accessible-label="$gettext('Clear date')" class="oc-date-picker" + :description-message="relativeDate" /> @@ -17,6 +18,7 @@ import { computed, defineComponent, onMounted, PropType, ref, unref, watch } from 'vue' import { useGettext } from 'vue3-gettext' import { DateTime } from 'luxon' + export default defineComponent({ name: 'OcDatepicker', status: 'ready', @@ -37,6 +39,15 @@ export default defineComponent({ return date.isValid ? date : null }) + const relativeDate = computed(() => { + if (!unref(date)) { + return '' + } + return unref(date) + .setLocale((current || '').split('_')[0]) + .toRelative() + }) + const isMinDateUndercut = computed(() => { if (!props.minDate || !unref(date)) { return false @@ -74,6 +85,7 @@ export default defineComponent({ return { dateInputString, + relativeDate, errorMessage } } From 134d28065bbfb2d17ed956aedb362a916daaff6c Mon Sep 17 00:00:00 2001 From: Jan Ackermann Date: Fri, 6 Sep 2024 10:49:20 +0200 Subject: [PATCH 2/3] Fix bug where date in the past error message was not shown in the create link modal --- .../components/OcDatepicker/OcDatepicker.vue | 26 ++++++++++++------- .../src/components/CreateLinkModal.vue | 5 ++-- pnpm-lock.yaml | 18 ++++++------- 3 files changed, 27 insertions(+), 22 deletions(-) diff --git a/packages/design-system/src/components/OcDatepicker/OcDatepicker.vue b/packages/design-system/src/components/OcDatepicker/OcDatepicker.vue index c764d349951..f778b24963a 100644 --- a/packages/design-system/src/components/OcDatepicker/OcDatepicker.vue +++ b/packages/design-system/src/components/OcDatepicker/OcDatepicker.vue @@ -4,13 +4,13 @@ v-bind="$attrs" :label="label" type="date" + class="oc-date-picker" :min="minDate?.toISODate()" :fix-message-line="true" - :error-message="errorMessage" :clear-button-enabled="isClearable" :clear-button-accessible-label="$gettext('Clear date')" - class="oc-date-picker" - :description-message="relativeDate" + :error-message="inputErrorMessage" + :description-message="inputDescriptionMessage" /> @@ -27,10 +27,11 @@ export default defineComponent({ label: { type: String, required: true }, isClearable: { type: Boolean, default: true }, currentDate: { type: Object as PropType, required: false, default: null }, - minDate: { type: Object as PropType, required: false, default: null } + minDate: { type: Object as PropType, required: false, default: null }, + errorMessage: { type: String, required: false, default: '' } }, emits: ['dateChanged'], - setup(props, { emit }) { + setup(props, { emit, attrs }) { const { $gettext, current } = useGettext() const dateInputString = ref('') @@ -39,10 +40,11 @@ export default defineComponent({ return date.isValid ? date : null }) - const relativeDate = computed(() => { - if (!unref(date)) { + const inputDescriptionMessage = computed(() => { + if (!unref(date) || unref(inputErrorMessage)) { return '' } + return unref(date) .setLocale((current || '').split('_')[0]) .toRelative() @@ -55,7 +57,11 @@ export default defineComponent({ return unref(date) < props.minDate }) - const errorMessage = computed(() => { + const inputErrorMessage = computed(() => { + if (props.errorMessage) { + return props.errorMessage + } + if (unref(isMinDateUndercut)) { return $gettext('The date must be after %{date}', { date: props.minDate @@ -85,8 +91,8 @@ export default defineComponent({ return { dateInputString, - relativeDate, - errorMessage + inputDescriptionMessage, + inputErrorMessage } } }) diff --git a/packages/web-pkg/src/components/CreateLinkModal.vue b/packages/web-pkg/src/components/CreateLinkModal.vue index 010c6b5d5f9..c56c7ec2ce5 100644 --- a/packages/web-pkg/src/components/CreateLinkModal.vue +++ b/packages/web-pkg/src/components/CreateLinkModal.vue @@ -32,8 +32,7 @@ type="password" :password-policy="!selectedLinkTypeIsInternal ? passwordPolicy : null" :generate-password-method="generatePasswordMethod" - :error-message="password.error" - :description-message=" + :error-message=" selectedLinkTypeIsInternal ? $gettext('Password cannot be set for internal links') : undefined @@ -53,7 +52,7 @@ :min-date="DateTime.now()" :label="$gettext('Expiry date')" :disabled="selectedLinkTypeIsInternal" - :description-message=" + :error-message=" selectedLinkTypeIsInternal ? $gettext('Expiry date cannot be set for internal links') : undefined diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 46ecad1865c..3ccb74b9f8d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -10147,7 +10147,7 @@ snapshots: '@cucumber/ci-environment': 10.0.1 '@cucumber/cucumber-expressions': 17.1.0 '@cucumber/gherkin': 28.0.0 - '@cucumber/gherkin-streams': 5.0.1(@cucumber/gherkin@28.0.0)(@cucumber/message-streams@4.0.1(@cucumber/messages@26.0.0))(@cucumber/messages@24.1.0) + '@cucumber/gherkin-streams': 5.0.1(@cucumber/gherkin@28.0.0)(@cucumber/message-streams@4.0.1(@cucumber/messages@24.1.0))(@cucumber/messages@24.1.0) '@cucumber/gherkin-utils': 9.0.0 '@cucumber/html-formatter': 21.6.0(@cucumber/messages@24.1.0) '@cucumber/message-streams': 4.0.1(@cucumber/messages@24.1.0) @@ -10195,7 +10195,7 @@ snapshots: '@cucumber/gherkin-streams': 5.0.1(@cucumber/gherkin@26.0.3)(@cucumber/message-streams@4.0.1(@cucumber/messages@21.0.1))(@cucumber/messages@21.0.1) '@cucumber/gherkin-utils': 8.0.2 '@cucumber/html-formatter': 20.2.1(@cucumber/messages@21.0.1) - '@cucumber/message-streams': 4.0.1(@cucumber/messages@21.0.1) + '@cucumber/message-streams': 4.0.1(@cucumber/messages@26.0.0) '@cucumber/messages': 21.0.1 '@cucumber/tag-expressions': 5.0.1 assertion-error-formatter: 3.0.0 @@ -10233,15 +10233,15 @@ snapshots: '@cucumber/gherkin-streams@5.0.1(@cucumber/gherkin@26.0.3)(@cucumber/message-streams@4.0.1(@cucumber/messages@21.0.1))(@cucumber/messages@21.0.1)': dependencies: '@cucumber/gherkin': 26.0.3 - '@cucumber/message-streams': 4.0.1(@cucumber/messages@21.0.1) + '@cucumber/message-streams': 4.0.1(@cucumber/messages@26.0.0) '@cucumber/messages': 21.0.1 commander: 9.1.0 source-map-support: 0.5.21 - '@cucumber/gherkin-streams@5.0.1(@cucumber/gherkin@28.0.0)(@cucumber/message-streams@4.0.1(@cucumber/messages@26.0.0))(@cucumber/messages@24.1.0)': + '@cucumber/gherkin-streams@5.0.1(@cucumber/gherkin@28.0.0)(@cucumber/message-streams@4.0.1(@cucumber/messages@24.1.0))(@cucumber/messages@24.1.0)': dependencies: '@cucumber/gherkin': 28.0.0 - '@cucumber/message-streams': 4.0.1(@cucumber/messages@21.0.1) + '@cucumber/message-streams': 4.0.1(@cucumber/messages@24.1.0) '@cucumber/messages': 24.1.0 commander: 9.1.0 source-map-support: 0.5.21 @@ -10282,14 +10282,14 @@ snapshots: dependencies: '@cucumber/messages': 24.1.0 - '@cucumber/message-streams@4.0.1(@cucumber/messages@21.0.1)': - dependencies: - '@cucumber/messages': 21.0.1 - '@cucumber/message-streams@4.0.1(@cucumber/messages@24.1.0)': dependencies: '@cucumber/messages': 24.1.0 + '@cucumber/message-streams@4.0.1(@cucumber/messages@26.0.0)': + dependencies: + '@cucumber/messages': 26.0.0 + '@cucumber/messages@19.1.4': dependencies: '@types/uuid': 8.3.4 From ad1ae0944ba160b4f7a7d0c35d2d9bc36e8d1e3b Mon Sep 17 00:00:00 2001 From: Jan Ackermann Date: Fri, 6 Sep 2024 10:50:19 +0200 Subject: [PATCH 3/3] rm unused prop --- .../design-system/src/components/OcDatepicker/OcDatepicker.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/design-system/src/components/OcDatepicker/OcDatepicker.vue b/packages/design-system/src/components/OcDatepicker/OcDatepicker.vue index f778b24963a..176208ad5a1 100644 --- a/packages/design-system/src/components/OcDatepicker/OcDatepicker.vue +++ b/packages/design-system/src/components/OcDatepicker/OcDatepicker.vue @@ -31,7 +31,7 @@ export default defineComponent({ errorMessage: { type: String, required: false, default: '' } }, emits: ['dateChanged'], - setup(props, { emit, attrs }) { + setup(props, { emit }) { const { $gettext, current } = useGettext() const dateInputString = ref('')