yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

render properties from tab

Browse Source
This commit is contained in:
Niels Lyngsø
2023-02-17 21:21:32 +01:00
parent f0612d4639
commit 095aefd3b8
3 changed files with 47 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace.context.ts
View File

@@ -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);
});
}

28
src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/document-workspace-view-edit-properties.element.ts
View File

@@ -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<PropertyTypeContainerViewModelBaseModel> = [];
@@ -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);

26
src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/document-workspace-view-edit-tab.element.ts
View File

@@ -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`
<umb-document-workspace-view-edit-properties
.containerName=${this._tabName}></umb-document-workspace-view-edit-properties>
<hr />
<uui-box>
<umb-document-workspace-view-edit-properties
container-type="Tab"
container-name=${this.tabName || ''}></umb-document-workspace-view-edit-properties>
</uui-box>
${repeat(
this._groupContainersMap,
(mapEntry) => mapEntry[0],
(mapEntry) => html`<uui-box .headline=${mapEntry[0]}>
<umb-document-workspace-view-edit-properties
.containerName=${mapEntry[0]}></umb-document-workspace-view-edit-properties>
container-type="Group"
container-name=${mapEntry[0]}></umb-document-workspace-view-edit-properties>
</uui-box>`
)}
`;