From 0235e46dcc9980d14e1a1db1ee697ed6be3be16a Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Wed, 1 Feb 2023 11:58:56 +0000 Subject: [PATCH 01/10] First attempt at getting a prop editor working --- .../property-editor-ui-date-picker.element.ts | 32 ++++++++++++++++++- 1 file changed, 31 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts index 3ebaf9d8a0..376df45aa9 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts @@ -1,6 +1,7 @@ import { html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { UmbPropertyValueChangeEvent } from '../..'; import { UmbLitElement } from '@umbraco-cms/element'; /** @@ -13,11 +14,40 @@ export class UmbPropertyEditorUIDatePickerElement extends UmbLitElement { @property() value = ''; + private updateValue(e: InputEvent) { + console.log('config', this.config); + + const dateField = e.target as HTMLInputElement; + this.value = dateField.value; + this.dispatchEvent(new UmbPropertyValueChangeEvent()); + } + @property({ type: Array, attribute: false }) public config = []; + // CONFIG + // Date format string + // if empty = YYYY-MM-DD + + // Based on the format string + // We need to change the underlying type for UUI-input + + // YYYY-MM-DD = date + // YYYY-MM-DD HH:mm:ss = datetime-local + // HH:mm:ss = time + // HH:mm = time + + + // Config offset time? (Boolean) + // Copmpares against a global value in Umbraco.Sys.SeverVariables + + render() { - return html`
umb-property-editor-ui-date-picker
`; + return html` + +
+ Chosen Value: ${this.value} +
`; } } From d2d5bfde507348f6f1a02a10d5efa596d39c12ff Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Wed, 1 Feb 2023 14:57:11 +0000 Subject: [PATCH 02/10] Add in the other prevalue for this property editor 'offsetTime' bool --- .../property-editors/uis/date-picker/manifests.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/manifests.ts index 51139cd0ea..0a4b96eb04 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/manifests.ts @@ -15,15 +15,25 @@ export const manifest: ManifestPropertyEditorUI = { { alias: 'format', label: 'Date format', - description: 'If left empty then the format is YYYY-MM-DD. (see momentjs.com for supported formats)', + description: 'If left empty then the format is YYYY-MM-DD', propertyEditorUI: 'Umb.PropertyEditorUI.TextBox', }, + { + alias: 'offsetTime', + label: 'Offset time', + description: 'When enabled the time displayed will be offset with the servers timezone, this is useful for scenarios like scheduled publishing when an editor is in a different timezone than the hosted server', + propertyEditorUI: 'Umb.PropertyEditorUI.Toggle', + }, ], defaultData: [ { alias: 'format', value: 'YYYY-MM-DD HH:mm:ss', }, + { + alias: 'offsetTime', + value: false + } ], }, }, From 9791af94e88ae3d699a33b53f70987bd04f90d92 Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Wed, 1 Feb 2023 14:58:05 +0000 Subject: [PATCH 03/10] Add some more fake data types for dates with different config values set --- .../src/core/mocks/data/data-type.data.ts | 55 ++++++++++++++++++- 1 file changed, 54 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts index 6c488aca96..3bd92c84fa 100644 --- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts +++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts @@ -129,7 +129,60 @@ export const data: Array = [ isFolder: false, propertyEditorModelAlias: 'Umbraco.DateTime', propertyEditorUIAlias: 'Umb.PropertyEditorUI.DatePicker', - data: [], + data: [ + { + alias: 'format', + value: 'YYYY-MM-DD', + }, + { + alias: 'offsetTime', + value: true, + } + ], + }, + { + name: 'Date Picker With Time', + type: 'data-type', + icon: 'umb:autofill', + hasChildren: false, + key: 'dt-datePicker-time', + isContainer: false, + parentKey: null, + isFolder: false, + propertyEditorModelAlias: 'Umbraco.DateTime', + propertyEditorUIAlias: 'Umb.PropertyEditorUI.DatePicker', + data: [ + { + alias: 'format', + value: 'YYYY-MM-DD HH:mm:ss', + }, + { + alias: 'offsetTime', + value: true, + } + ], + }, + { + name: 'Time', + type: 'data-type', + icon: 'umb:autofill', + hasChildren: false, + key: 'dt-time', + isContainer: false, + parentKey: null, + isFolder: false, + propertyEditorModelAlias: 'Umbraco.DateTime', + propertyEditorUIAlias: 'Umb.PropertyEditorUI.DatePicker', + data: [ + { + alias: 'format', + value: 'HH:mm:ss', + }, + { + alias: 'offsetTime', + value: false, + } + ], }, { name: 'Email', From de4e9b5a9243504650cafd2f43bf83da088ddb90 Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Wed, 1 Feb 2023 14:58:42 +0000 Subject: [PATCH 04/10] Update fake content node data to use the additional datatypes for dates and also given them a set value to start init render with --- .../src/core/mocks/data/document.data.ts | 27 ++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts index 8444749474..0a30fc13a5 100644 --- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts +++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts @@ -93,6 +93,18 @@ export const data: Array = [ description: '', dataTypeKey: 'dt-datePicker', }, + { + alias: 'datePickerTime', + label: 'Date Picker with Time', + description: 'Now with time', + dataTypeKey: 'dt-datePicker-time', + }, + { + alias: 'time', + label: 'Time', + description: 'Just time', + dataTypeKey: 'dt-time', + }, { alias: 'email', label: 'Email', @@ -244,7 +256,20 @@ export const data: Array = [ dataTypeKey: 'dt-userPicker', }, ], - data: [], + data: [ + { + alias: 'datePicker', + value: '2023-12-24' + }, + { + alias: 'datePickerTime', + value: '2023-12-24 14:52' + }, + { + alias: 'time', + value: '14:52:00' + }, + ], variants: [], }, { From a62a20c4e4f0dad469539d032dfa9de0b218a618 Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Wed, 1 Feb 2023 15:43:55 +0000 Subject: [PATCH 05/10] More of Warren - just bashing out code unsure if this is the best approach ?! --- .../property-editor-ui-date-picker.element.ts | 52 +++++++++++++------ 1 file changed, 36 insertions(+), 16 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts index 376df45aa9..4c239f3da5 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts @@ -3,6 +3,8 @@ import { customElement, property } from 'lit/decorators.js'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { UmbPropertyValueChangeEvent } from '../..'; import { UmbLitElement } from '@umbraco-cms/element'; +import { PropertyEditorConfigDefaultData } from '@umbraco-cms/extensions-registry'; + /** * @element umb-property-editor-ui-date-picker @@ -15,38 +17,56 @@ export class UmbPropertyEditorUIDatePickerElement extends UmbLitElement { value = ''; private updateValue(e: InputEvent) { - console.log('config', this.config); - const dateField = e.target as HTMLInputElement; this.value = dateField.value; this.dispatchEvent(new UmbPropertyValueChangeEvent()); } + private _format?: string; + + // TODO: Warren [Can I get the underlying UUI-input type/enum so I can ensure only valid input types set] + private _inputType?: string = "date"; + + private _offsetTime?: boolean; + @property({ type: Array, attribute: false }) - public config = []; + public set config(config: Array) { - // CONFIG - // Date format string - // if empty = YYYY-MM-DD + console.log('config', config); - // Based on the format string - // We need to change the underlying type for UUI-input + // Format string prevalue/config + this._format = config.find((x) => x.alias === 'format')?.value; - // YYYY-MM-DD = date - // YYYY-MM-DD HH:mm:ss = datetime-local - // HH:mm:ss = time - // HH:mm = time + // TODO: Warren + // When this is set to true then you need to check the Umbraco.Sys.ServerVariables that comes from C# server in a global JS obejct + this._offsetTime = config.find((x) => x.alias === 'offsetTime')?.value; + // Based on the type of format string change the UUI-input type + switch (this._format) { + case 'YYYY-MM-DD': + this._inputType = "date"; + break; - // Config offset time? (Boolean) - // Copmpares against a global value in Umbraco.Sys.SeverVariables + case 'YYYY-MM-DD HH:mm:ss': + this._inputType = "datetime-local"; + break; + case 'HH:mm:ss': + this._inputType = "time"; + break; + + default: + break; + } + } render() { return html` - +
- Chosen Value: ${this.value} + Chosen Value: ${this.value}
+ Config Format: ${this._format}
+ Config TimeOffset enabled?: ${this._offsetTime}
`; } } From 488313b56ca22f053afadd16ae9f325cd65ef2d9 Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Thu, 2 Feb 2023 15:33:28 +0000 Subject: [PATCH 06/10] Work with Jacob pairing session Co-authored-by: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> --- .../property-editor-ui-date-picker.element.ts | 69 +++++++++++-------- .../property-editor-ui-date-picker.stories.ts | 51 ++++++++++++-- .../property-editor-ui-date-picker.test.ts | 33 +++++++-- 3 files changed, 115 insertions(+), 38 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts index 4c239f3da5..29033f6511 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts @@ -1,6 +1,7 @@ import { html } from 'lit'; -import { customElement, property } from 'lit/decorators.js'; +import { customElement, property, state } from 'lit/decorators.js'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { InputType } from '@umbraco-ui/uui'; import { UmbPropertyValueChangeEvent } from '../..'; import { UmbLitElement } from '@umbraco-cms/element'; import { PropertyEditorConfigDefaultData } from '@umbraco-cms/extensions-registry'; @@ -13,8 +14,28 @@ import { PropertyEditorConfigDefaultData } from '@umbraco-cms/extensions-registr export class UmbPropertyEditorUIDatePickerElement extends UmbLitElement { static styles = [UUITextStyles]; + private _value?: Date; + private _valueString?: string; + @property() - value = ''; + set value(value: string | undefined) { + if (value) { + const d = new Date(value); + this._value = d; + this._valueString = `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}T${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`; + } else { + this._value = undefined; + this._valueString = undefined; + } + } + + get value(): string | undefined { + if (this._value) { + const d = this._value; + return `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()} ${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`; + } + return undefined; + } private updateValue(e: InputEvent) { const dateField = e.target as HTMLInputElement; @@ -24,8 +45,8 @@ export class UmbPropertyEditorUIDatePickerElement extends UmbLitElement { private _format?: string; - // TODO: Warren [Can I get the underlying UUI-input type/enum so I can ensure only valid input types set] - private _inputType?: string = "date"; + @state() + private _inputType: InputType = "datetime-local"; private _offsetTime?: boolean; @@ -36,38 +57,28 @@ export class UmbPropertyEditorUIDatePickerElement extends UmbLitElement { // Format string prevalue/config this._format = config.find((x) => x.alias === 'format')?.value; - - // TODO: Warren - // When this is set to true then you need to check the Umbraco.Sys.ServerVariables that comes from C# server in a global JS obejct - this._offsetTime = config.find((x) => x.alias === 'offsetTime')?.value; + const pickTime = this._format?.includes('H') || this._format?.includes('m'); + if (pickTime) { + this._inputType = "datetime-local"; + } else { + this._inputType = "date"; + } // Based on the type of format string change the UUI-input type - switch (this._format) { - case 'YYYY-MM-DD': - this._inputType = "date"; - break; - - case 'YYYY-MM-DD HH:mm:ss': - this._inputType = "datetime-local"; - break; - - case 'HH:mm:ss': - this._inputType = "time"; - break; - - default: - break; + const timeFormatPattern = /^h{1,2}:m{1,2}(:s{1,2})?\s?a?$/gmi; + if (this._format?.toLowerCase().match(timeFormatPattern)) { + this._inputType = "time"; } + + // TODO: Warren - could this be handled in the C# server side code? + // When this is set to true then you need to check the Umbraco.Sys.ServerVariables that comes from C# server in a global JS obejct + // How do we handle this ? + this._offsetTime = config.find((x) => x.alias === 'offsetTime')?.value; } render() { return html` - -
- Chosen Value: ${this.value}
- Config Format: ${this._format}
- Config TimeOffset enabled?: ${this._offsetTime}
-
`; + `; } } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.stories.ts index 783f397430..b3f5beae7e 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.stories.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.stories.ts @@ -8,8 +8,51 @@ export default { title: 'Property Editor UIs/Date Picker', component: 'umb-property-editor-ui-date-picker', id: 'umb-property-editor-ui-date-picker', -} as Meta; + args: { + config: [ + { + alias: 'format', + value: 'YYYY-MM-DD HH:mm:ss' + } + ] + } +} as Meta; -export const AAAOverview: Story = () => - html``; -AAAOverview.storyName = 'Overview'; +const Template: Story = ({config, value}) => html``; + +export const Overview = Template.bind({}); + +export const WithDateValue = Template.bind({}); +WithDateValue.args = { + value: '2021-01-24 15:20' +}; + +export const WithFormat = Template.bind({}); +WithFormat.args = { + config: [ + { + alias: 'format', + value: 'dd/MM/yyyy HH:mm:ss' + } + ] +}; + +export const TimeOnly = Template.bind({}); +TimeOnly.args = { + config: [ + { + alias: 'format', + value: 'HH:mm:ss' + } + ] +}; + +export const DateOnly = Template.bind({}); +DateOnly.args = { + config: [ + { + alias: 'format', + value: 'dd/MM/yyyy' + } + ] +}; \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.test.ts index 48583babe9..05c9ab0920 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.test.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.test.ts @@ -1,21 +1,44 @@ import { expect, fixture, html } from '@open-wc/testing'; +import { UUIInputElement } from '@umbraco-ui/uui'; import { UmbPropertyEditorUIDatePickerElement } from './property-editor-ui-date-picker.element'; import { defaultA11yConfig } from '@umbraco-cms/test-utils'; describe('UmbPropertyEditorUIDatePickerElement', () => { let element: UmbPropertyEditorUIDatePickerElement; + let inputElement: UUIInputElement; beforeEach(async () => { - element = await fixture( - html` ` - ); + element = await fixture( + html` ` + ); + inputElement = element.shadowRoot?.querySelector('uui-input') as UUIInputElement; }); it('is defined with its own instance', () => { - expect(element).to.be.instanceOf(UmbPropertyEditorUIDatePickerElement); + expect(element).to.be.instanceOf(UmbPropertyEditorUIDatePickerElement); + }); + + it('should have an input element', () => { + expect(inputElement).to.exist; + }); + + it('should show a datetime-local input by default', () => { + expect(inputElement.type).to.equal('datetime-local'); + }); + + it('should show a type=date field if the format only contains a date', async () => { + element.config = [{alias: 'format', value: 'YYYY-MM-dd'}]; + await element.updateComplete; + expect(inputElement.type).to.equal('date'); + }); + + it('should show a type=time field if the format only contains a time', async () => { + element.config = [{alias: 'format', value: 'HH:mm'}]; + await element.updateComplete; + expect(inputElement.type).to.equal('time'); }); it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); + await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); }); }); From d88cbac9001db4e014824809b78bf71ac3661ef3 Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Wed, 1 Mar 2023 11:33:20 +0000 Subject: [PATCH 07/10] Remove console.log --- .../uis/date-picker/property-editor-ui-date-picker.element.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts index 29033f6511..a9c698f475 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts @@ -52,9 +52,7 @@ export class UmbPropertyEditorUIDatePickerElement extends UmbLitElement { @property({ type: Array, attribute: false }) public set config(config: Array) { - - console.log('config', config); - + // Format string prevalue/config this._format = config.find((x) => x.alias === 'format')?.value; const pickTime = this._format?.includes('H') || this._format?.includes('m'); From 0a68b8bf899b3e89e184388e9a07dd1c25c17e5e Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Wed, 1 Mar 2023 11:35:19 +0000 Subject: [PATCH 08/10] Update to _onInput as suggested --- .../uis/date-picker/property-editor-ui-date-picker.element.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts index a9c698f475..c7b892870b 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts @@ -37,7 +37,7 @@ export class UmbPropertyEditorUIDatePickerElement extends UmbLitElement { return undefined; } - private updateValue(e: InputEvent) { + private _onInput(e: InputEvent) { const dateField = e.target as HTMLInputElement; this.value = dateField.value; this.dispatchEvent(new UmbPropertyValueChangeEvent()); @@ -76,7 +76,7 @@ export class UmbPropertyEditorUIDatePickerElement extends UmbLitElement { render() { return html` - `; + `; } } From e0884804d7a9ed69f733991f790739d462bbd034 Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Wed, 1 Mar 2023 11:41:05 +0000 Subject: [PATCH 09/10] Update TOO comment to make clear the offsetTime DataType PreValue needs to be implemeneted --- .../date-picker/property-editor-ui-date-picker.element.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts index c7b892870b..035120e8c3 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts @@ -68,9 +68,8 @@ export class UmbPropertyEditorUIDatePickerElement extends UmbLitElement { this._inputType = "time"; } - // TODO: Warren - could this be handled in the C# server side code? - // When this is set to true then you need to check the Umbraco.Sys.ServerVariables that comes from C# server in a global JS obejct - // How do we handle this ? + // TODO: Warren - Need to deal with offSetTime prevalue/config + // Currently the date picker in uui-iinput does not change based on this config this._offsetTime = config.find((x) => x.alias === 'offsetTime')?.value; } From 6e3c770dd9bf8076a7c73a4bcdd5099d9e585990 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Thu, 9 Mar 2023 10:59:52 +0100 Subject: [PATCH 10/10] use the _valueString --- .../property-editor-ui-date-picker.element.ts | 33 +++++++++---------- 1 file changed, 16 insertions(+), 17 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts index 035120e8c3..de79bbf833 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts @@ -6,7 +6,6 @@ import { UmbPropertyValueChangeEvent } from '../..'; import { UmbLitElement } from '@umbraco-cms/element'; import { PropertyEditorConfigDefaultData } from '@umbraco-cms/extensions-registry'; - /** * @element umb-property-editor-ui-date-picker */ @@ -22,19 +21,17 @@ export class UmbPropertyEditorUIDatePickerElement extends UmbLitElement { if (value) { const d = new Date(value); this._value = d; - this._valueString = `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}T${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`; + this._valueString = `${d.getFullYear()}-${ + d.getMonth() + 1 + }-${d.getDate()}T${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`; } else { this._value = undefined; this._valueString = undefined; } } - get value(): string | undefined { - if (this._value) { - const d = this._value; - return `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()} ${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`; - } - return undefined; + get value() { + return this._valueString; } private _onInput(e: InputEvent) { @@ -46,26 +43,25 @@ export class UmbPropertyEditorUIDatePickerElement extends UmbLitElement { private _format?: string; @state() - private _inputType: InputType = "datetime-local"; + private _inputType: InputType = 'datetime-local'; private _offsetTime?: boolean; @property({ type: Array, attribute: false }) public set config(config: Array) { - // Format string prevalue/config this._format = config.find((x) => x.alias === 'format')?.value; const pickTime = this._format?.includes('H') || this._format?.includes('m'); if (pickTime) { - this._inputType = "datetime-local"; + this._inputType = 'datetime-local'; } else { - this._inputType = "date"; + this._inputType = 'date'; } // Based on the type of format string change the UUI-input type - const timeFormatPattern = /^h{1,2}:m{1,2}(:s{1,2})?\s?a?$/gmi; - if (this._format?.toLowerCase().match(timeFormatPattern)) { - this._inputType = "time"; + const timeFormatPattern = /^h{1,2}:m{1,2}(:s{1,2})?\s?a?$/gim; + if (this._format?.toLowerCase().match(timeFormatPattern)) { + this._inputType = 'time'; } // TODO: Warren - Need to deal with offSetTime prevalue/config @@ -74,8 +70,11 @@ export class UmbPropertyEditorUIDatePickerElement extends UmbLitElement { } render() { - return html` - `; + return html` `; } }