From 1808d822f0f4391b5b53379e78d7c9023297ac69 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Wed, 23 Aug 2023 10:25:57 +0200 Subject: [PATCH 01/11] composition, tags, delete --- ...nt-type-property-structure-helper.class.ts | 8 +- .../content-type-structure-manager.class.ts | 16 +- .../property-settings-modal.element.ts | 2 +- ...-workspace-view-edit-properties.element.ts | 57 ++++- ...pe-workspace-view-edit-property.element.ts | 206 +++++++++++++++--- 5 files changed, 234 insertions(+), 55 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/content-type-property-structure-helper.class.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/content-type-property-structure-helper.class.ts index f084ca17a5..896b64a7e7 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/content-type-property-structure-helper.class.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/content-type-property-structure-helper.class.ts @@ -29,6 +29,10 @@ export class UmbContentTypePropertyStructureHelper { this.#propertyStructure.sortBy((a, b) => ((a as any).sortOrder ?? 0) - ((b as any).sortOrder ?? 0)); } + public getOwnerDocumentTypes() { + return this.#structure?.documentTypes; + } + public setStructureManager(structure: UmbContentTypePropertyStructureManager) { this.#structure = structure; this.#initResolver?.(undefined); @@ -75,7 +79,7 @@ export class UmbContentTypePropertyStructureHelper { (groupContainers) => { groupContainers.forEach((group) => this._observePropertyStructureOf(group.id)); }, - '_observeGroupContainers' + '_observeGroupContainers', ); } } @@ -99,7 +103,7 @@ export class UmbContentTypePropertyStructureHelper { // Fire update to subscribers: this.#propertyStructure.next(_propertyStructure); }, - '_observePropertyStructureOfGroup' + groupId + '_observePropertyStructureOfGroup' + groupId, ); } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/content-type-structure-manager.class.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/content-type-structure-manager.class.ts index 815f59cd12..690d58ad82 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/content-type-structure-manager.class.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/content-type-structure-manager.class.ts @@ -33,7 +33,7 @@ export class UmbContentTypePropertyStructureManager([], (x) => x.id); readonly documentTypes = this.#documentTypes.asObservable(); private readonly _documentTypeContainers = this.#documentTypes.asObservablePart((x) => - x.flatMap((x) => x.containers ?? []) + x.flatMap((x) => x.containers ?? []), ); #containers: UmbArrayState = @@ -137,7 +137,7 @@ export class UmbContentTypePropertyStructureManager + partialUpdate: Partial, ) { await this.#init; documentTypeId = documentTypeId ?? this.#ownerDocumentTypeId!; @@ -287,7 +287,7 @@ export class UmbContentTypePropertyStructureManager x.id === documentTypeId)?.properties ?? []; - const properties = filterFrozenArray(frozenProperties, (x) => x.id === propertyId); + const properties = filterFrozenArray(frozenProperties, (x) => x.id !== propertyId); this.#documentTypes.updateOne(documentTypeId, { properties }); } @@ -295,7 +295,7 @@ export class UmbContentTypePropertyStructureManager + partialUpdate: Partial, ) { await this.#init; documentTypeId = documentTypeId ?? this.#ownerDocumentTypeId!; @@ -387,7 +387,7 @@ export class UmbContentTypePropertyStructureManager { return data.filter((x) => x.parentId === parentId && x.type === containerType); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/property-settings/property-settings-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/property-settings/property-settings-modal.element.ts index 50aa020935..36a4968a97 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/property-settings/property-settings-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/property-settings/property-settings-modal.element.ts @@ -153,7 +153,7 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement< this._customValidationOptions.forEach((option) => { option.selected = option.value === regEx; }); - console.log(this._customValidationOptions); + //console.log(this._customValidationOptions); this._returnData.validation!.regEx = regEx ?? null; this.requestUpdate('_returnData'); diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts index 379a4d5c4c..282db8a183 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts @@ -1,12 +1,16 @@ import { UmbDocumentTypeWorkspaceContext } from '../../document-type-workspace.context.js'; +import { UmbDocumentTypeWorkspacePropertyElement } from './document-type-workspace-view-edit-property.element.js'; +import './document-type-workspace-view-edit-property.element.js'; import { css, html, customElement, property, state, repeat, ifDefined } from '@umbraco-cms/backoffice/external/lit'; import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui'; import { UmbContentTypePropertyStructureHelper, PropertyContainerTypes } from '@umbraco-cms/backoffice/content-type'; import { UmbSorterController, UmbSorterConfig } from '@umbraco-cms/backoffice/sorter'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import { DocumentTypePropertyTypeResponseModel, PropertyTypeModelBaseModel } from '@umbraco-cms/backoffice/backend-api'; -import { UMB_MODAL_MANAGER_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal'; -import './document-type-workspace-view-edit-property.element.js'; +import { + DocumentTypePropertyTypeResponseModel, + DocumentTypeResponseModel, + PropertyTypeModelBaseModel, +} from '@umbraco-cms/backoffice/backend-api'; import { UMB_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace'; const SORTER_CONFIG: UmbSorterConfig = { compareElementToModel: (element: HTMLElement, model: DocumentTypePropertyTypeResponseModel) => { @@ -77,12 +81,15 @@ export class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitEle @state() _propertyStructure: Array = []; + @state() + _ownerDocumentTypes?: DocumentTypeResponseModel[]; + constructor() { super(); this.consumeContext(UMB_WORKSPACE_CONTEXT, (workspaceContext) => { this._propertyStructureHelper.setStructureManager( - (workspaceContext as UmbDocumentTypeWorkspaceContext).structure + (workspaceContext as UmbDocumentTypeWorkspaceContext).structure, ); }); this.observe(this._propertyStructureHelper.propertyStructure, (propertyStructure) => { @@ -91,12 +98,27 @@ export class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitEle }); } + connectedCallback(): void { + super.connectedCallback(); + const doctypes = this._propertyStructureHelper.getOwnerDocumentTypes(); + if (!doctypes) return; + this.observe(doctypes, (documents) => { + this._ownerDocumentTypes = documents; + }); + } + async #onAddProperty() { const property = await this._propertyStructureHelper.addProperty(this._containerId); if (!property) return; // TODO: Figure out how we from this location can get into the route modal, via URL. // The modal is registered by the document-type-workspace-view-edit-property element, therefor a bit hard to get the URL from here. + + const el = this.shadowRoot?.querySelector( + `document-type-workspace-view-edit-property[data-umb-property-id='${property.id}']`, + ) as UmbDocumentTypeWorkspacePropertyElement; + + window.history.pushState({}, '', el.modalRoute); } render() { @@ -104,21 +126,34 @@ export class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitEle ${repeat( this._propertyStructure, (property) => property.id ?? '' + property.containerId ?? '' + (property as any).sortOrder ?? '', - (property) => - html` { + const inheritedFromDocument = this._ownerDocumentTypes?.find( + (types) => types.containers?.find((containers) => containers.id == property.containerId), + ); + + return html` { this._propertyStructureHelper.partialUpdateProperty(property.id, event.detail); - }}>` + }} + @property-delete=${() => { + this._propertyStructureHelper.removeProperty(property.id!); + }}> + `; + }, )} - - Add property + + Add property `; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts index a209aced8f..894c9ba75f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts @@ -1,9 +1,16 @@ import { UUIInputElement, UUIInputEvent, UUITextStyles } from '@umbraco-cms/backoffice/external/uui'; -import { css, html, customElement, property, state, ifDefined } from '@umbraco-cms/backoffice/external/lit'; +import { css, html, customElement, property, state, ifDefined, nothing } from '@umbraco-cms/backoffice/external/lit'; import { PropertyTypeModelBaseModel } from '@umbraco-cms/backoffice/backend-api'; -import { UMB_PROPERTY_SETTINGS_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal'; +import { + UMB_CONFIRM_MODAL, + UMB_MODAL_MANAGER_CONTEXT_TOKEN, + UMB_PROPERTY_SETTINGS_MODAL, + UmbConfirmModalData, + UmbModalRouteRegistrationController, +} from '@umbraco-cms/backoffice/modal'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import { generateAlias } from '@umbraco-cms/backoffice/utils'; +import { UmbDataTypeRepository } from '@umbraco-cms/backoffice/data-type'; /** * @element document-type-workspace-view-edit-property @@ -27,6 +34,7 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement { const oldValue = this._property; this._property = value; this.#modalRegistration.setUniquePathValue('propertyId', value?.id?.toString()); + this.setDataType(this._property?.dataTypeId); this.requestUpdate('property', oldValue); } @@ -40,11 +48,33 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement { @property({ type: Boolean }) public inherited?: boolean; + #dataTypeRepository = new UmbDataTypeRepository(this); + #modalRegistration; + private _modalManagerContext?: typeof UMB_MODAL_MANAGER_CONTEXT_TOKEN.TYPE; @state() protected _modalRoute?: string; + @property() + public get modalRoute() { + return this._modalRoute; + } + + @property({ type: String, attribute: 'data-owner-document-type-id' }) + public dataOwnerDocumentTypeId?: string; + + @property({ type: String, attribute: 'data-owner-document-type-name' }) + public dataOwnerDocumentTypeName?: string; + + @state() + private _dataTypeName?: string; + + async setDataType(dataTypeId: string | undefined) { + if (!dataTypeId) return; + this.#dataTypeRepository.requestById(dataTypeId).then((x) => (this._dataTypeName = x?.data?.name)); + } + constructor() { super(); @@ -59,6 +89,10 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement { .observeRouteBuilder((routeBuilder) => { this._modalRoute = routeBuilder(null); }); + + this.consumeContext(UMB_MODAL_MANAGER_CONTEXT_TOKEN, (context) => { + this._modalManagerContext = context; + }); } _partialUpdate(partialObject: PropertyTypeModelBaseModel) { @@ -72,19 +106,6 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement { this.dispatchEvent(new CustomEvent('partial-property-update', { detail: partialObject })); } - renderInheritedProperty() { - return this.property - ? html` - -
- ` - : ''; - } - @state() private _aliasLocked = true; @@ -92,6 +113,35 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement { this._aliasLocked = !this._aliasLocked; } + #requestRemove(e: Event) { + e.preventDefault(); + e.stopImmediatePropagation(); + if (!this.property || !this.property.id) return; + + const Message: UmbConfirmModalData = { + headline: `${this.localize.term('actions_delete')} property`, + content: html` + Are you sure you want to delete the property ${this.property.name || this.property.id} + + `, + confirmLabel: this.localize.term('actions_delete'), + color: 'danger', + }; + + const modalHandler = this._modalManagerContext?.open(UMB_CONFIRM_MODAL, Message); + + modalHandler + ?.onSubmit() + .then(() => { + this.dispatchEvent(new CustomEvent('property-delete')); + }) + .catch(() => { + return; + }); + } + #onNameChange(event: UUIInputEvent) { if (event instanceof UUIInputEvent) { const target = event.composedPath()[0] as UUIInputElement; @@ -124,21 +174,7 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement { .value=${this.property.name} @input=${this.#onNameChange}> - { - if (e.target) this._singleValueUpdate('alias', (e.target as HTMLInputElement).value); - }}> - -
''} id="alias-lock" slot="prepend"> - -
- + ${this.renderPropertyAlias()}

- - + + ${this.renderPropertyTags()} + + + + + ` : ''; } + renderInheritedProperty() { + return this.property + ? html` + +
+ ${this.renderPropertyTags()} + + + + ${this.localize.term('contentTypeEditor_inheritedFrom')} + ${this.dataOwnerDocumentTypeName ?? '??'} + + +
+ ` + : ''; + } + + renderPropertyAlias() { + return this.property + ? html` { + if (e.target) this._singleValueUpdate('alias', (e.target as HTMLInputElement).value); + }}> + +
''} id="alias-lock" slot="prepend"> + +
+ ` + : ''; + } + + renderPropertyTags() { + return this.property + ? html`
+ ${this.property.dataTypeId ? html`${this._dataTypeName}` : nothing} + ${this.property.variesByCulture + ? html` + ${this.localize.term('contentTypeEditor_cultureVariantLabel')} + ` + : nothing} + ${this.property.appearance?.labelOnTop == true + ? html` + ${this.localize.term('contentTypeEditor_displaySettingsLabelOnTop')} + ` + : nothing} +
` + : nothing; + } + render() { // TODO: Only show alias on label if user has access to DocumentType within settings: return this.inherited ? this.renderInheritedProperty() : this.renderEditableProperty(); @@ -201,7 +305,8 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement { :host(.--umb-sorter-placeholder) { height: 2px; } - :host(.--umb-sorter-placeholder) > div { + :host(.--umb-sorter-placeholder) > div, + :host(.--umb-sorter-placeholder) > uui-button { display: none; } :host(.--umb-sorter-placeholder)::after { @@ -225,6 +330,7 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement { } #editor { + position: relative; background-color: var(--uui-color-background); } #alias-input, @@ -261,6 +367,40 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement { --uui-textarea-border-color: transparent; font-weight: 0.5rem; /* TODO: Cant change font size of UUI textarea yet */ } + + .types > div uui-icon, + .inherited uui-icon { + vertical-align: sub; + } + + .inherited { + position: absolute; + top: var(--uui-size-space-2); + right: var(--uui-size-space-2); + } + + .types { + position: absolute; + top: var(--uui-size-space-2); + left: var(--uui-size-space-2); + display: flex; + gap: var(--uui-size-space-2); + } + + #editor uui-action-bar { + position: absolute; + top: var(--uui-size-space-2); + right: var(--uui-size-space-2); + display: none; + } + #editor:hover uui-action-bar, + #editor:focus uui-action-bar { + display: block; + } + + a { + color: inherit; + } `, ]; } From 115bc0f36c770a2310b8223d1691e7c567895ffb Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Wed, 23 Aug 2023 16:10:40 +0200 Subject: [PATCH 02/11] modal routing --- ...-workspace-view-edit-properties.element.ts | 37 ++++++++++++------- ...pe-workspace-view-edit-property.element.ts | 17 ++++++++- 2 files changed, 40 insertions(+), 14 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts index 282db8a183..5b71a0c103 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts @@ -12,6 +12,7 @@ import { PropertyTypeModelBaseModel, } from '@umbraco-cms/backoffice/backend-api'; import { UMB_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace'; +import { UMB_PROPERTY_SETTINGS_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal'; const SORTER_CONFIG: UmbSorterConfig = { compareElementToModel: (element: HTMLElement, model: DocumentTypePropertyTypeResponseModel) => { return element.getAttribute('data-umb-property-id') === model.id; @@ -84,6 +85,9 @@ export class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitEle @state() _ownerDocumentTypes?: DocumentTypeResponseModel[]; + @state() + protected _modalRouteNewProperty?: string; + constructor() { super(); @@ -96,6 +100,19 @@ export class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitEle this._propertyStructure = propertyStructure; this.#propertySorter.setModel(this._propertyStructure); }); + + // Note: Route for adding a new property + new UmbModalRouteRegistrationController(this, UMB_PROPERTY_SETTINGS_MODAL) + .addAdditionalPath('new-property') + .onSetup(() => { + return {}; + }) + .onSubmit((result) => { + this.#addProperty(result); + }) + .observeRouteBuilder((routeBuilder) => { + this._modalRouteNewProperty = routeBuilder(null); + }); } connectedCallback(): void { @@ -107,18 +124,11 @@ export class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitEle }); } - async #onAddProperty() { - const property = await this._propertyStructureHelper.addProperty(this._containerId); - if (!property) return; + async #addProperty(propertyData: PropertyTypeModelBaseModel) { + const propertyPlaceholder = await this._propertyStructureHelper.addProperty(this._containerId); + if (!propertyPlaceholder) return; - // TODO: Figure out how we from this location can get into the route modal, via URL. - // The modal is registered by the document-type-workspace-view-edit-property element, therefor a bit hard to get the URL from here. - - const el = this.shadowRoot?.querySelector( - `document-type-workspace-view-edit-property[data-umb-property-id='${property.id}']`, - ) as UmbDocumentTypeWorkspacePropertyElement; - - window.history.pushState({}, '', el.modalRoute); + this._propertyStructureHelper.partialUpdateProperty(propertyPlaceholder.id, propertyData); } render() { @@ -127,8 +137,9 @@ export class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitEle this._propertyStructure, (property) => property.id ?? '' + property.containerId ?? '' + (property as any).sortOrder ?? '', (property) => { + // Note: This piece might be moved into the property component const inheritedFromDocument = this._ownerDocumentTypes?.find( - (types) => types.containers?.find((containers) => containers.id == property.containerId), + (types) => types.containers?.find((containers) => containers.id === property.containerId), ); return html` + href=${ifDefined(this._modalRouteNewProperty)}> Add property `; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts index 894c9ba75f..5a7dc9446c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts @@ -5,6 +5,7 @@ import { UMB_CONFIRM_MODAL, UMB_MODAL_MANAGER_CONTEXT_TOKEN, UMB_PROPERTY_SETTINGS_MODAL, + UMB_WORKSPACE_MODAL, UmbConfirmModalData, UmbModalRouteRegistrationController, } from '@umbraco-cms/backoffice/modal'; @@ -56,6 +57,9 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement { @state() protected _modalRoute?: string; + @state() + protected _editDocumentTypePath?: string; + @property() public get modalRoute() { return this._modalRoute; @@ -90,6 +94,15 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement { this._modalRoute = routeBuilder(null); }); + new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL) + .addAdditionalPath('document-type') + .onSetup(() => { + return { entityType: 'document-type', preset: {} }; + }) + .observeRouteBuilder((routeBuilder) => { + this._editDocumentTypePath = routeBuilder({}); + }); + this.consumeContext(UMB_MODAL_MANAGER_CONTEXT_TOKEN, (context) => { this._modalManagerContext = context; }); @@ -217,7 +230,9 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement { ${this.localize.term('contentTypeEditor_inheritedFrom')} - ${this.dataOwnerDocumentTypeName ?? '??'} + + ${this.dataOwnerDocumentTypeName ?? '??'} + From b9456fde47b5ffb07d7cafde9df140125607b932 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 25 Aug 2023 09:33:34 +0200 Subject: [PATCH 03/11] add createPropertyScaffold --- .../content-type-structure-manager.class.ts | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/content-type-structure-manager.class.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/content-type-structure-manager.class.ts index 690d58ad82..44165935af 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/content-type-structure-manager.class.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/content-type-structure-manager.class.ts @@ -237,10 +237,7 @@ export class UmbContentTypePropertyStructureManager x.id === documentTypeId)?.properties ?? [])]; properties.push(property); From 0983d2e2850aa4f2817c15155a26578e176934b1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 25 Aug 2023 09:43:03 +0200 Subject: [PATCH 04/11] make onSetup async + public createPropertyScaffold --- .../content-type-property-structure-helper.class.ts | 7 +++++++ .../src/packages/core/modal/modal-route-registration.ts | 8 ++++---- ...ocument-type-workspace-view-edit-properties.element.ts | 4 ++-- 3 files changed, 13 insertions(+), 6 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/content-type-property-structure-helper.class.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/content-type-property-structure-helper.class.ts index 896b64a7e7..b7f19d1d10 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/content-type-property-structure-helper.class.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/content-type-property-structure-helper.class.ts @@ -110,6 +110,13 @@ export class UmbContentTypePropertyStructureHelper { // TODO: consider moving this to another class, to separate 'viewer' from 'manipulator': /** Manipulate methods: */ + async createPropertyScaffold(ownerId?: string, sortOrder?: number) { + await this.#init; + if (!this.#structure) return; + + return await this.#structure.createPropertyScaffold(ownerId, sortOrder); + } + async addProperty(ownerId?: string, sortOrder?: number) { await this.#init; if (!this.#structure) return; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-route-registration.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-route-registration.ts index 3ec3939463..8063774c3a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-route-registration.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-route-registration.ts @@ -14,7 +14,7 @@ export class UmbModalRouteRegistration | string; #modalConfig?: UmbModalConfig; - #onSetupCallback?: (routingInfo: Params) => UmbModalTokenData | false; + #onSetupCallback?: (routingInfo: Params) => Promise | UmbModalTokenData | false; #onSubmitCallback?: (data: UmbModalTokenResult) => void; #onRejectCallback?: () => void; @@ -87,7 +87,7 @@ export class UmbModalRouteRegistration UmbModalTokenData | false) { + public onSetup(callback: (routingInfo: Params) => Promise | UmbModalTokenData | false) { this.#onSetupCallback = callback; return this; } @@ -109,11 +109,11 @@ export class UmbModalRouteRegistration { - return {}; + .onSetup(async () => { + return (await this._propertyStructureHelper.createPropertyScaffold()) ?? false; }) .onSubmit((result) => { this.#addProperty(result); From ac8a53de6aff91794a04f90b40c77b820a8b93c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 25 Aug 2023 09:45:54 +0200 Subject: [PATCH 05/11] imports --- .../src/packages/core/sorter/sorter.controller.test.ts | 2 +- .../document-type-workspace-view-edit-properties.element.ts | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/sorter/sorter.controller.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/sorter.controller.test.ts index d7ec58f808..6f14f6afde 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/sorter/sorter.controller.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/sorter.controller.test.ts @@ -1,8 +1,8 @@ import { expect, fixture, html } from '@open-wc/testing'; import { UmbSorterConfig, UmbSorterController } from './sorter.controller.js'; +import UmbTestSorterControllerElement from './stories/test-sorter-controller.element.js'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import { customElement } from '@umbraco-cms/backoffice/external/lit'; -import UmbTestSorterControllerElement from './stories/test-sorter-controller.element.js'; describe('UmbContextConsumer', () => { let hostElement: UmbTestSorterControllerElement; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts index f6360e488f..78e15fede8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts @@ -1,5 +1,4 @@ import { UmbDocumentTypeWorkspaceContext } from '../../document-type-workspace.context.js'; -import { UmbDocumentTypeWorkspacePropertyElement } from './document-type-workspace-view-edit-property.element.js'; import './document-type-workspace-view-edit-property.element.js'; import { css, html, customElement, property, state, repeat, ifDefined } from '@umbraco-cms/backoffice/external/lit'; import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui'; From 61bb89329e2a6a7a02286a9e03ae6a07c2f2c509 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 25 Aug 2023 09:51:39 +0200 Subject: [PATCH 06/11] update implementation to be async --- src/Umbraco.Web.UI.Client/src/shared/router/route.context.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/shared/router/route.context.ts b/src/Umbraco.Web.UI.Client/src/shared/router/route.context.ts index 95057f0bab..9c06390502 100644 --- a/src/Umbraco.Web.UI.Client/src/shared/router/route.context.ts +++ b/src/Umbraco.Web.UI.Client/src/shared/router/route.context.ts @@ -49,9 +49,9 @@ export class UmbRouteContext extends UmbBaseController { __modalKey: modalRegistration.key, path: '/' + modalRegistration.generateModalPath(), component: EmptyDiv, - setup: (component, info) => { + setup: async (component, info) => { if (!this.#modalContext) return; - const modalContext = modalRegistration.routeSetup(this.#modalRouter, this.#modalContext, info.match.params); + const modalContext = await modalRegistration.routeSetup(this.#modalRouter, this.#modalContext, info.match.params); if (modalContext) { modalContext.onSubmit().then( () => { From c1b77b600d34764c163e39e20502a3984858ab2d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 25 Aug 2023 09:56:36 +0200 Subject: [PATCH 07/11] minor correction for scaffold creation --- .../document-type-workspace-view-edit-properties.element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts index 78e15fede8..954986e620 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts @@ -104,7 +104,7 @@ export class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitEle new UmbModalRouteRegistrationController(this, UMB_PROPERTY_SETTINGS_MODAL) .addAdditionalPath('new-property') .onSetup(async () => { - return (await this._propertyStructureHelper.createPropertyScaffold()) ?? false; + return (await this._propertyStructureHelper.createPropertyScaffold(this._containerId)) ?? false; }) .onSubmit((result) => { this.#addProperty(result); From 20a582e5524a66759c9bb06f5e2607c141229c00 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Thu, 31 Aug 2023 13:12:26 +0200 Subject: [PATCH 08/11] remove "data" from property name. remove console --- .../property-settings-modal.element.ts | 1 - ...nt-type-workspace-view-edit-properties.element.ts | 4 ++-- ...ment-type-workspace-view-edit-property.element.ts | 12 ++++++------ 3 files changed, 8 insertions(+), 9 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/property-settings/property-settings-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/property-settings/property-settings-modal.element.ts index 36a4968a97..8354432926 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/property-settings/property-settings-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/property-settings/property-settings-modal.element.ts @@ -153,7 +153,6 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement< this._customValidationOptions.forEach((option) => { option.selected = option.value === regEx; }); - //console.log(this._customValidationOptions); this._returnData.validation!.regEx = regEx ?? null; this.requestUpdate('_returnData'); diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts index 954986e620..d330c3c5de 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts @@ -144,8 +144,8 @@ export class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitEle return html` { diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts index 5a7dc9446c..2ac61aa9ea 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts @@ -65,11 +65,11 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement { return this._modalRoute; } - @property({ type: String, attribute: 'data-owner-document-type-id' }) - public dataOwnerDocumentTypeId?: string; + @property({ type: String, attribute: 'owner-document-type-id' }) + public ownerDocumentTypeId?: string; - @property({ type: String, attribute: 'data-owner-document-type-name' }) - public dataOwnerDocumentTypeName?: string; + @property({ type: String, attribute: 'owner-document-type-name' }) + public ownerDocumentTypeName?: string; @state() private _dataTypeName?: string; @@ -230,8 +230,8 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement { ${this.localize.term('contentTypeEditor_inheritedFrom')} - - ${this.dataOwnerDocumentTypeName ?? '??'} + + ${this.ownerDocumentTypeName ?? '??'} From e3870ae79575072abc1953ab954c9f8e38b1e30e Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Thu, 31 Aug 2023 13:21:41 +0200 Subject: [PATCH 09/11] add unique to observer --- ...ment-type-workspace-view-edit-properties.element.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts index d330c3c5de..0d0befa8e2 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts @@ -118,9 +118,13 @@ export class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitEle super.connectedCallback(); const doctypes = this._propertyStructureHelper.getOwnerDocumentTypes(); if (!doctypes) return; - this.observe(doctypes, (documents) => { - this._ownerDocumentTypes = documents; - }); + this.observe( + doctypes, + (documents) => { + this._ownerDocumentTypes = documents; + }, + 'observeOwnerDocumentTypes', + ); } async #addProperty(propertyData: PropertyTypeModelBaseModel) { From b80d62d8cfbd0932e97edc1e4e3ddf11eb0c34b8 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Thu, 31 Aug 2023 13:55:14 +0200 Subject: [PATCH 10/11] moved comment --- .../document-type-workspace-view-edit-property.element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts index 2ac61aa9ea..1a84c6c78f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts @@ -186,7 +186,6 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement { label="label" .value=${this.property.name} @input=${this.#onNameChange}> - ${this.renderPropertyAlias()}

@@ -252,6 +251,7 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement { @input=${(e: CustomEvent) => { if (e.target) this._singleValueUpdate('alias', (e.target as HTMLInputElement).value); }}> +

''} id="alias-lock" slot="prepend"> From f38ab42ce3c24941c7af8b595705e9800729905d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Thu, 31 Aug 2023 14:04:13 +0200 Subject: [PATCH 11/11] add comment --- .../design/document-type-workspace-view-edit-property.element.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts index 2ac61aa9ea..fe53e43cc2 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts @@ -151,6 +151,7 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement { this.dispatchEvent(new CustomEvent('property-delete')); }) .catch(() => { + // We do not need to react to cancel, so we will leave an empty method to prevent Uncaught Promise Rejection error. return; }); }