Feature/document type tabs

src/mocks/data/document-type.data.ts

@@ -756,11 +756,11 @@ export const data: Array<DocumentTypeResponseModel> = [
 		],
 		compositions: [
 			{
-				id: '5035d7d9-0a63-415c-9e75-ee2cf931db92',
+				id: '8f68ba66-6fb2-4778-83b8-6ab4ca3a7c5d',
 				compositionType: ContentTypeCompositionTypeModel.INHERITANCE,
 			},
 			{
-				id: '8f68ba66-6fb2-4778-83b8-6ab4ca3a7c5d',
+				id: '5035d7d9-0a63-415c-9e75-ee2cf931db92',
 				compositionType: ContentTypeCompositionTypeModel.COMPOSITION,
 			},
 		],

src/packages/core/content-type/content-type-structure-manager.class.ts

@@ -199,11 +199,11 @@ export class UmbContentTypePropertyStructureManager<R extends UmbDetailRepositor
 		containerType: PropertyContainerTypes = 'Tab',
 		parentId: string | null = null
 	) {
-		const ownerRootContainers = this.getOwnerContainers(containerType, parentId);
+		const ownerRootContainers = this.getOwnerContainers(containerType); //getRootContainers() can't differentiates between compositions and locals
 
 		let changedName = newName;
 		if (ownerRootContainers) {
-			while (ownerRootContainers.find((tab) => tab.name === changedName)) {
+			while (ownerRootContainers.find((tab) => tab.name === changedName && tab.id !== parentId)) {
 				changedName = incrementString(changedName);
 			}
 

src/packages/documents/document-types/workspace/document-type-workspace-editor.element.ts

@@ -1,6 +1,6 @@
 import { UmbDocumentTypeWorkspaceContext } from './document-type-workspace.context.js';
 import { UUIInputElement, UUIInputEvent, UUITextStyles } from '@umbraco-cms/backoffice/external/uui';
-import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, customElement, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import {
 	UmbModalManagerContext,
@@ -116,15 +116,16 @@ export class UmbDocumentTypeWorkspaceEditorElement extends UmbLitElement {
 		return html`
 			<umb-workspace-editor alias="Umb.Workspace.DocumentType">
 				<div id="header" slot="header">
-					<uui-button id="icon" @click=${this._handleIconClick} compact>
-						<uui-icon name="${this._icon}" style="color: ${this._iconColorAlias}"></uui-icon>
+					<uui-button id="icon" @click=${this._handleIconClick} label="icon" compact>
+						<uui-icon name="${ifDefined(this._icon)}" style="color: ${this._iconColorAlias}"></uui-icon>
 					</uui-button>
 
-					<uui-input id="name" .value=${this._name} @input="${this.#onNameChange}">
+					<uui-input id="name" .value=${this._name} @input="${this.#onNameChange}" label="name">
 						<!-- TODO: should use UUI-LOCK-INPUT, but that does not fire an event when its locked/unlocked -->
 						<uui-input
 							name="alias"
 							slot="append"
+							label="alias"
 							@input=${this.#onAliasChange}
 							.value=${this._alias}
 							placeholder="Enter alias..."

src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts

@@ -107,17 +107,19 @@ export class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitEle
 					(property) =>
 						html`<document-type-workspace-view-edit-property
 							class="property"
-							data-umb-property-id=${property.id}
-							data-property-container-is=${property.containerId}
-							data-container-id=${this.containerId}
-							?inherited=${ifDefined(property.containerId !== this.containerId)}
+							data-umb-property-id=${ifDefined(property.id)}
+							data-property-container-is=${ifDefined(property.containerId === null ? undefined : property.containerId)}
+							data-container-id=${ifDefined(this.containerId)}
+							?inherited=${property.containerId !== this.containerId}
 							.property=${property}
 							@partial-property-update=${(event: CustomEvent) => {
 								this._propertyStructureHelper.partialUpdateProperty(property.id, event.detail);
 							}}></document-type-workspace-view-edit-property>`
 				)}
 			</div>
-			<uui-button id="add" look="placeholder" @click=${this.#onAddProperty}> Add property </uui-button> `;
+			<uui-button label="Add property" id="add" look="placeholder" @click=${this.#onAddProperty}>
+				Add property
+			</uui-button> `;
 	}
 
 	static styles = [

src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts

@@ -1,5 +1,5 @@
 import { UUIInputElement, UUIInputEvent, UUITextStyles } from '@umbraco-cms/backoffice/external/uui';
-import { css, html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, customElement, property, state, ifDefined } 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 { UmbLitElement } from '@umbraco-cms/internal/lit-element';
@@ -119,14 +119,16 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement {
 						<uui-input
 							name="label"
 							id="label-input"
-							placeholder="Label..."
+							placeholder=${this.localize.term('placeholders_label')}
+							label="label"
 							.value=${this.property.name}
 							@input=${this.#onNameChange}></uui-input>
 						<!-- TODO: should use UUI-LOCK-INPUT, but that does not fire an event when its locked/unlocked -->
 						<uui-input
 							name="alias"
 							id="alias-input"
-							placeholder="Alias..."
+							label="alias"
+							placeholder=${this.localize.term('placeholders_alias')}
 							.value=${this.property.alias}
 							?disabled=${this._aliasLocked}
 							@input=${(e: CustomEvent) => {
@@ -140,16 +142,19 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement {
 						<slot name="property-action-menu"></slot>
 						<p>
 							<uui-textarea
+								label="description"
 								name="description"
 								id="description-input"
-								placeholder="Enter a description..."
+								placeholder=${this.localize.term('placeholders_enterDescription')}
 								.value=${this.property.description}
 								@input=${(e: CustomEvent) => {
 									if (e.target) this._singleValueUpdate('description', (e.target as HTMLInputElement).value);
 								}}></uui-textarea>
 						</p>
 					</div>
-					<uui-button id="editor" label="Edit property settings" href=${this._modalRoute}><b></b></uui-button>
+					<uui-button id="editor" label="Edit property settings" href=${ifDefined(this._modalRoute)}>
+						<b></b>
+					</uui-button>
 			  `
 			: '';
 	}

src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-tab.element.ts

@@ -1,5 +1,5 @@
 import { UmbDocumentTypeWorkspaceContext } from '../../document-type-workspace.context.js';
-import { css, html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, customElement, property, state, repeat, ifDefined } from '@umbraco-cms/backoffice/external/lit';
 import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui';
 import { UmbContentTypeContainerStructureHelper } from '@umbraco-cms/backoffice/content-type';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
@@ -87,7 +87,7 @@ export class UmbDocumentTypeWorkspaceViewEditTabElement extends UmbLitElement {
 				? html`
 						<uui-box>
 							<umb-document-type-workspace-view-edit-properties
-								container-id=${this.ownerTabId}
+								container-id=${ifDefined(this.ownerTabId === null ? undefined : this.ownerTabId)}
 								container-type="Tab"
 								container-name=${this.tabName || ''}></umb-document-type-workspace-view-edit-properties>
 						</uui-box>
@@ -117,12 +117,18 @@ export class UmbDocumentTypeWorkspaceViewEditTabElement extends UmbLitElement {
 						}
 					</div>
 					<umb-document-type-workspace-view-edit-properties
-						container-id=${group.id}
+						container-id=${ifDefined(group.id)}
 						container-type="Group"
 						container-name=${group.name || ''}></umb-document-type-workspace-view-edit-properties>
-				</uui-box>`
+				</uui-box>`,
 			)}
-			<uui-button id="add" look="placeholder" @click=${this.#onAddGroup}> Add Group </uui-button>
+			<uui-button
+				label=${this.localize.term('contentTypeEditor_addGroup')}
+				id="add"
+				look="placeholder"
+				@click=${this.#onAddGroup}>
+				${this.localize.term('contentTypeEditor_addGroup')}
+			</uui-button>
 		`;
 	}