From dd4a4acb3aa82b87ded58eecdf2ab8bb75092c0a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Thu, 11 May 2023 11:00:12 +0200 Subject: [PATCH] modal data --- .../token/create-dictionary-modal.token.ts | 2 - .../token/import-dictionary-modal.token.ts | 2 - .../token/property-settings-modal.token.ts | 21 +++++---- .../property-settings-modal.element.ts | 9 ++-- ...pe-workspace-view-edit-property.element.ts | 43 ++++++++++++++----- 5 files changed, 51 insertions(+), 26 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/libs/modal/token/create-dictionary-modal.token.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/create-dictionary-modal.token.ts index 3e635f2cc4..8767cf9c08 100644 --- a/src/Umbraco.Web.UI.Client/libs/modal/token/create-dictionary-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/libs/modal/token/create-dictionary-modal.token.ts @@ -1,8 +1,6 @@ import { Observable } from 'rxjs'; import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; -// TODO: add interface for data -// PropertyTypeViewModelBaseModel export interface UmbCreateDictionaryModalData { unique: string | null; parentName?: Observable; diff --git a/src/Umbraco.Web.UI.Client/libs/modal/token/import-dictionary-modal.token.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/import-dictionary-modal.token.ts index c420afa120..e800f673ba 100644 --- a/src/Umbraco.Web.UI.Client/libs/modal/token/import-dictionary-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/libs/modal/token/import-dictionary-modal.token.ts @@ -1,7 +1,5 @@ import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; -// TODO: add interface for data -// PropertyTypeViewModelBaseModel export interface UmbImportDictionaryModalData { unique: string | null; } diff --git a/src/Umbraco.Web.UI.Client/libs/modal/token/property-settings-modal.token.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/property-settings-modal.token.ts index 80d28d4578..8c625efd1d 100644 --- a/src/Umbraco.Web.UI.Client/libs/modal/token/property-settings-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/libs/modal/token/property-settings-modal.token.ts @@ -1,9 +1,12 @@ +import { PropertyTypeResponseModelBaseModel } from '@umbraco-cms/backoffice/backend-api'; import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; // TODO: add interface for data // PropertyTypeViewModelBaseModel -export interface UmbPropertySettingsModalResult { +export type UmbPropertySettingsModalData = PropertyTypeResponseModelBaseModel; +export type UmbPropertySettingsModalResult = PropertyTypeResponseModelBaseModel; +/*{ label: string; alias: string; description: string; @@ -15,12 +18,12 @@ export interface UmbPropertySettingsModalResult { pattern: string; patternMessage: string; }; -} +}*/ -export const UMB_PROPERTY_SETTINGS_MODAL = new UmbModalToken( - 'Umb.Modal.PropertySettings', - { - type: 'sidebar', - size: 'small', - } -); +export const UMB_PROPERTY_SETTINGS_MODAL = new UmbModalToken< + UmbPropertySettingsModalData, + UmbPropertySettingsModalResult +>('Umb.Modal.PropertySettings', { + type: 'sidebar', + size: 'small', +}); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/modals/property-settings/property-settings-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/modals/property-settings/property-settings-modal.element.ts index 690978f919..6c79fa2559 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/core/modals/property-settings/property-settings-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/modals/property-settings/property-settings-modal.element.ts @@ -7,15 +7,18 @@ import { UMB_MODAL_CONTEXT_TOKEN, UMB_PROPERTY_EDITOR_UI_PICKER_MODAL, UmbPropertySettingsModalResult, + UmbPropertySettingsModalData, } from '@umbraco-cms/backoffice/modal'; import { ManifestPropertyEditorUI } from '@umbraco-cms/backoffice/extensions-registry'; import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extensions-api'; import { UmbModalBaseElement } from '@umbraco-cms/internal/modal'; @customElement('umb-property-settings-modal') -export class UmbPropertySettingsModalElement extends UmbModalBaseElement { - - +// TODO: Could base take a token to get its types?. +export class UmbPropertySettingsModalElement extends UmbModalBaseElement< + UmbPropertySettingsModalData, + UmbPropertySettingsModalResult +> { @state() private _selectedPropertyEditorUI?: ManifestPropertyEditorUI; @state() private _selectedPropertyEditorUIAlias = ''; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts index 57f7cf2e30..57bd0eadde 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts @@ -1,6 +1,6 @@ import { css, html } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; -import { customElement, property } from 'lit/decorators.js'; +import { customElement, property, state } from 'lit/decorators.js'; import { PropertyTypeResponseModelBaseModel } from '@umbraco-cms/backoffice/backend-api'; import { UMB_PROPERTY_SETTINGS_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; @@ -12,6 +12,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; */ @customElement('document-type-workspace-view-edit-property') export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement { + private _property?: PropertyTypeResponseModelBaseModel | undefined; /** * Property, the data object for the property. * @type {PropertyTypeResponseModelBaseModel} @@ -19,7 +20,15 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement { * @default undefined */ @property({ type: Object }) - public property?: PropertyTypeResponseModelBaseModel; + public get property(): PropertyTypeResponseModelBaseModel | undefined { + return this._property; + } + public set property(value: PropertyTypeResponseModelBaseModel | undefined) { + const oldValue = this._property; + this._property = value; + this.#modalRegistration.setUniquePathValue('propertyId', value?.id?.toString()); + this.requestUpdate('property', oldValue); + } /** * Inherited, Determines if the property is part of the main document type thats being edited. @@ -33,16 +42,30 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement { #modalRegistration; + @state() + protected _modalRoute?: string; + constructor() { super(); this.#modalRegistration = new UmbModalRouteRegistrationController(this, UMB_PROPERTY_SETTINGS_MODAL) - .addUniquePaths( - ['propertyId'] - ); + .addUniquePaths(['propertyId']) + .onSetup(() => { + return this.property ?? false; + }) + .onSubmit((result) => { + this._partialUpdate(result); + }) + .observeRouteBuilder((routeBuilder) => { + this._modalRoute = routeBuilder(null); + }); } - _firePartialUpdate(propertyName: string, value: string | number | boolean | null | undefined) { + _partialUpdate(partialObject: PropertyTypeResponseModelBaseModel) { + this.dispatchEvent(new CustomEvent('partial-property-update', { detail: partialObject })); + } + + _singleValueUpdate(propertyName: string, value: string | number | boolean | null | undefined) { const partialObject = {} as any; partialObject[propertyName] = value; @@ -69,23 +92,23 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement { { - if (e.target) this._firePartialUpdate('name', (e.target as HTMLInputElement).value); + if (e.target) this._singleValueUpdate('name', (e.target as HTMLInputElement).value); }}> { - if (e.target) this._firePartialUpdate('alias', (e.target as HTMLInputElement).value); + if (e.target) this._singleValueUpdate('alias', (e.target as HTMLInputElement).value); }}>

{ - if (e.target) this._firePartialUpdate('description', (e.target as HTMLInputElement).value); + if (e.target) this._singleValueUpdate('description', (e.target as HTMLInputElement).value); }}>

-
+ ` : ''; }