diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace.context.ts index 855260a7d8..e99359fa89 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace.context.ts @@ -47,7 +47,7 @@ export class UmbDocumentWorkspaceContext this.#documentTypeRepository = new UmbDocumentTypeRepository(this.#host); //this.#dataTypeRepository = new UmbDataTypeRepository(this.#host); - new UmbObserverController(this._host, this.documentTypeKey, (key) => this.loadDocumentType(key)); + new UmbObserverController(this._host, this.documentTypeKey, (key) => this._loadDocumentType(key)); } async load(entityKey: string) { @@ -65,7 +65,7 @@ export class UmbDocumentWorkspaceContext this.#data.next(data); } - async loadDocumentType(key?: string) { + private async _loadDocumentType(key?: string) { if (!key) return; const { data } = await this.#documentTypeRepository.requestByKey(key); @@ -74,28 +74,27 @@ export class UmbDocumentWorkspaceContext // Load inherited and composed types: await data?.compositions?.forEach(async (composition) => { if (composition.key) { - this.loadDocumentType(composition.key); + this._loadDocumentType(composition.key); } }); new UmbObserverController(this._host, await this.#documentTypeRepository.byKey(key), (docType) => { if (docType) { this.#documentTypes.appendOne(docType); - this.initDocumentTypeContainers(docType); - this.loadDocumentTypeCompositions(docType); + this._initDocumentTypeContainers(docType); + this._loadDocumentTypeCompositions(docType); } }); } - async loadDocumentTypeCompositions(documentType: DocumentTypeModel) { + private async _loadDocumentTypeCompositions(documentType: DocumentTypeModel) { documentType.compositions?.forEach((composition) => { - this.loadDocumentType(composition.key); + this._loadDocumentType(composition.key); }); } - async initDocumentTypeContainers(documentType: DocumentTypeModel) { + private async _initDocumentTypeContainers(documentType: DocumentTypeModel) { documentType.containers?.forEach((container) => { - console.log('add container', container); this.#containers.appendOne(container); }); } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/document-workspace-view-edit-properties.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/document-workspace-view-edit-properties.element.ts index 06c4bb75da..67dff0a162 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/document-workspace-view-edit-properties.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/document-workspace-view-edit-properties.element.ts @@ -1,4 +1,4 @@ -import { css, html } from 'lit'; +import { html } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { customElement, property, state } from 'lit/decorators.js'; import { repeat } from 'lit/directives/repeat.js'; @@ -14,9 +14,9 @@ import { export class UmbDocumentWorkspaceViewEditPropertiesElement extends UmbLitElement { static styles = [UUITextStyles]; - private _containerName?: string | undefined; + private _containerName?: string; - @property({ type: String }) + @property({ type: String, attribute: 'container-name', reflect: false }) public get containerName(): string | undefined { return this._containerName; } @@ -26,6 +26,18 @@ export class UmbDocumentWorkspaceViewEditPropertiesElement extends UmbLitElement this._observeGroupContainers(); } + private _containerType?: 'Group' | 'Tab'; + + @property({ type: String, attribute: 'container-type', reflect: false }) + public get containerType(): 'Group' | 'Tab' | undefined { + return this._containerType; + } + public set containerType(value: 'Group' | 'Tab' | undefined) { + if (this._containerType === value) return; + this._containerType = value; + this._observeGroupContainers(); + } + @state() _groupContainers: Array = []; @@ -48,12 +60,15 @@ export class UmbDocumentWorkspaceViewEditPropertiesElement extends UmbLitElement } private _observeGroupContainers() { - if (!this._workspaceContext || !this.containerName) return; + if (!this._workspaceContext || !this._containerName || !this._containerType) return; + + console.log('_observeGroupContainers', this._containerName, this._containerType); // TODO: Should be no need to update this observable if its already there. this.observe( - this._workspaceContext!.containersByNameAndType(this.containerName, 'Group'), + this._workspaceContext!.containersByNameAndType(this._containerName, this._containerType), (groupContainers) => { + console.log('groupContainers', groupContainers); this._groupContainers = groupContainers || []; groupContainers.forEach((group) => { if (group.key) { @@ -69,12 +84,11 @@ export class UmbDocumentWorkspaceViewEditPropertiesElement extends UmbLitElement private _observePropertyStructureOfGroup(group: PropertyTypeContainerViewModelBaseModel) { if (!this._workspaceContext || !group.key) return; - console.log('_observePropertyStructureOfGroup', group); - // TODO: Should be no need to update this observable if its already there. this.observe( this._workspaceContext.propertyStructuresOf(group.key), (properties) => { + console.log('_observePropertyStructureOfGroup', group.name, group.key, properties); // If this need to be able to remove properties, we need to clean out the ones of this group.key before inserting them: //this._propertyStructure = this._propertyStructure.filter((x) => x.containerKey !== group.key); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/document-workspace-view-edit-tab.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/document-workspace-view-edit-tab.element.ts index eb1022b4e9..810518903f 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/document-workspace-view-edit-tab.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/document-workspace-view-edit-tab.element.ts @@ -16,6 +16,10 @@ export class UmbDocumentWorkspaceViewEditTabElement extends UmbLitElement { display: block; margin: var(--uui-size-layout-1); } + + uui-box { + margin-bottom: var(--uui-size-layout-1); + } `, ]; @@ -26,9 +30,11 @@ export class UmbDocumentWorkspaceViewEditTabElement extends UmbLitElement { return this._tabName; } public set tabName(value: string | undefined) { - if (this._tabName === value) return; + const oldValue = this._tabName; + if (oldValue === value) return; this._tabName = value; this._observeTabContainers(); + this.requestUpdate('tabName', oldValue); } @state() @@ -58,10 +64,10 @@ export class UmbDocumentWorkspaceViewEditTabElement extends UmbLitElement { } private _observeTabContainers() { - if (!this._workspaceContext || !this.tabName) return; + if (!this._workspaceContext || !this._tabName) return; this.observe( - this._workspaceContext.containersByNameAndType(this.tabName, 'Tab'), + this._workspaceContext.containersByNameAndType(this._tabName, 'Tab'), (tabContainers) => { this._tabContainers = tabContainers || []; this._observeGroups(); @@ -71,7 +77,7 @@ export class UmbDocumentWorkspaceViewEditTabElement extends UmbLitElement { } private _observeGroups() { - if (!this._workspaceContext || !this.tabName) return; + if (!this._workspaceContext || !this._tabName) return; this._tabContainers.forEach((container) => { this.observe( @@ -96,16 +102,20 @@ export class UmbDocumentWorkspaceViewEditTabElement extends UmbLitElement { } render() { + // TODO: only show tab properties if there was any. We need some event to tell us when the properties is empty. return html` - -
+ + + ${repeat( this._groupContainersMap, (mapEntry) => mapEntry[0], (mapEntry) => html` + container-type="Group" + container-name=${mapEntry[0]}> ` )} `;