Merge pull request #1108 from umbraco/feature/document-type-picker-edit-action

Feature/document type picker edit action

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/source-type-picker/property-editor-ui-tree-picker-source-type-picker.element.ts

@@ -1,4 +1,4 @@
-import { UmbDocumentTypeInputElement } from '@umbraco-cms/backoffice/document-type';
+import { UmbInputDocumentTypeElement } from '@umbraco-cms/backoffice/document-type';
 import { UmbMediaTypeInputElement } from '@umbraco-cms/backoffice/media-type';
 import { UmbMemberTypeInputElement } from '@umbraco-cms/backoffice/member-type';
 import type { UmbTreePickerSource } from '@umbraco-cms/backoffice/components';
@@ -59,7 +59,7 @@ export class UmbPropertyEditorUITreePickerSourceTypePickerElement extends UmbLit
 	#onChange(event: CustomEvent) {
 		switch (this.sourceType) {
 			case 'content':
-				this.value = (<UmbDocumentTypeInputElement>event.target).selectedIds;
+				this.value = (<UmbInputDocumentTypeElement>event.target).selectedIds;
 				break;
 			case 'media':
 				this.value = (<UmbMediaTypeInputElement>event.target).selectedIds;
@@ -92,9 +92,9 @@ export class UmbPropertyEditorUITreePickerSourceTypePickerElement extends UmbLit
 	}
 
 	#renderTypeContent() {
-		return html`<umb-document-type-input
+		return html`<umb-input-document-type
 			@change=${this.#onChange}
-			.selectedIds=${this.value || []}></umb-document-type-input>`;
+			.selectedIds=${this.value || []}></umb-input-document-type>`;
 	}
 
 	#renderTypeMedia() {

src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/index.ts

@@ -1,3 +1,3 @@
-import './document-type-input/document-type-input.element.js';
+import './input-document-type/input-document-type.element.js';
 
-export * from './document-type-input/document-type-input.element.js';
+export * from './input-document-type/input-document-type.element.js';

src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/input-document-type/input-document-type.element.ts

@@ -1,12 +1,13 @@
-import { UmbDocumentTypePickerContext } from './document-type-input.context.js';
+import { UmbDocumentTypePickerContext } from './input-document-type.context.js';
 import { css, html, customElement, property, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
 import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import type { DocumentTypeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
+import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal';
 
-@customElement('umb-document-type-input')
-export class UmbDocumentTypeInputElement extends FormControlMixin(UmbLitElement) {
+@customElement('umb-input-document-type')
+export class UmbInputDocumentTypeElement extends FormControlMixin(UmbLitElement) {
 	/**
 	 * Selects the element types only
 	 * @type {boolean}
@@ -86,11 +87,23 @@ export class UmbDocumentTypeInputElement extends FormControlMixin(UmbLitElement)
 	@state()
 	private _items?: Array<DocumentTypeItemResponseModel>;
 
+	@state()
+	private _editDocumentTypePath = '';
+
 	#pickerContext = new UmbDocumentTypePickerContext(this);
 
 	constructor() {
 		super();
 
+		new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
+			.addAdditionalPath('document-type')
+			.onSetup(() => {
+				return { data: { entityType: 'document-type', preset: {} } };
+			})
+			.observeRouteBuilder((routeBuilder) => {
+				this._editDocumentTypePath = routeBuilder({});
+			});
+
 		this.addValidator(
 			'rangeUnderflow',
 			() => this.minMessage,
@@ -135,10 +148,17 @@ export class UmbDocumentTypeInputElement extends FormControlMixin(UmbLitElement)
 			<uui-ref-node-document-type name=${ifDefined(item.name)}>
 				<uui-action-bar slot="actions">
 					<uui-button
+						compact
+						href=${this._editDocumentTypePath + 'edit/' + item.id}
+						label=${this.localize.term('general_edit') + ` ${item.name}`}>
+						<uui-icon name="icon-edit"></uui-icon>
+					</uui-button>
+					<uui-button
+						compact
 						@click=${() => this.#pickerContext.requestRemoveItem(item.id!)}
-						label="Remove Document Type ${item.name}"
-						>Remove</uui-button
-					>
+						label="Edit Document Type ${item.name}">
+						<uui-icon name="icon-trash"></uui-icon>
+					</uui-button>
 				</uui-action-bar>
 			</uui-ref-node-document-type>
 		`;
@@ -153,10 +173,10 @@ export class UmbDocumentTypeInputElement extends FormControlMixin(UmbLitElement)
 	];
 }
 
-export default UmbDocumentTypeInputElement;
+export default UmbInputDocumentTypeElement;
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-document-type-input': UmbDocumentTypeInputElement;
+		'umb-input-document-type': UmbInputDocumentTypeElement;
 	}
 }

src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/structure/document-type-workspace-view-structure.element.ts

@@ -1,5 +1,5 @@
 import { UmbDocumentTypeWorkspaceContext } from '../../document-type-workspace.context.js';
-import type { UmbDocumentTypeInputElement } from '../../../components/document-type-input/document-type-input.element.js';
+import type { UmbInputDocumentTypeElement } from '../../../components/input-document-type/input-document-type.element.js';
 import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import type { UUIToggleElement } from '@umbraco-cms/backoffice/external/uui';
@@ -59,11 +59,11 @@ export class UmbDocumentTypeWorkspaceViewStructureElement extends UmbLitElement
 					</div>
 					<div slot="editor">
 						<!-- TODO: maybe we want to somehow display the hierarchy, but not necessary in the same way as old backoffice? -->
-						<umb-document-type-input
+						<umb-input-document-type
 							element-types-only
 							.selectedIds=${this._allowedContentTypeIDs ?? []}
 							@change="${(e: CustomEvent) => {
-								const sortedContentTypesList = (e.target as UmbDocumentTypeInputElement).selectedIds.map(
+								const sortedContentTypesList = (e.target as UmbInputDocumentTypeElement).selectedIds.map(
 									(id, index) => ({
 										id: id,
 										sortOrder: index,
@@ -71,7 +71,7 @@ export class UmbDocumentTypeWorkspaceViewStructureElement extends UmbLitElement
 								);
 								this.#workspaceContext?.setAllowedContentTypes(sortedContentTypesList);
 							}}">
-						</umb-document-type-input>
+						</umb-input-document-type>
 					</div>
 				</umb-property-layout>
 			</uui-box>