From c2ef5207cd4ad7153de7ab919198a9f95f09d00a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 19 Apr 2023 15:14:02 +0200 Subject: [PATCH] bindings for structure --- .../document-type-workspace-editor.element.ts | 2 +- .../document-type-workspace.context.ts | 38 +++++- ...t-type-workspace-view-structure.element.ts | 125 +++++++++++------- .../input-document-type-picker.element.ts | 3 +- 4 files changed, 118 insertions(+), 50 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace-editor.element.ts index c78d582e58..21c13cfe67 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace-editor.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace-editor.element.ts @@ -14,7 +14,7 @@ export class UmbDocumentTypeWorkspaceEditorElement extends UmbLitElement { @state() private _iconColorAlias?: string; - // TODO:Should be using an alias, and look up in some dictionary/key/value) of project-colors. + // TODO: Color should be using an alias, and look up in some dictionary/key/value) of project-colors. #workspaceContext?: UmbDocumentTypeWorkspaceContext; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace.context.ts index 4ee41fc2b7..bb64aabf17 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace.context.ts @@ -2,7 +2,11 @@ import { UmbWorkspaceContext } from '../../../shared/components/workspace/worksp import { UmbDocumentTypeRepository } from '../repository/document-type.repository'; import { UmbWorkspacePropertyStructureManager } from '../../../shared/components/workspace/workspace-context/workspace-structure-manager.class'; import { UmbEntityWorkspaceContextInterface } from '@umbraco-cms/backoffice/workspace'; -import type { DocumentTypeResponseModel } from '@umbraco-cms/backoffice/backend-api'; +import type { + ContentTypeCompositionModel, + ContentTypeSortModel, + DocumentTypeResponseModel, +} from '@umbraco-cms/backoffice/backend-api'; import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller'; type EntityType = DocumentTypeResponseModel; @@ -80,12 +84,42 @@ export class UmbDocumentTypeWorkspaceContext setAlias(alias: string) { this.structure.updateRootDocumentType({ alias }); } + setDescription(description: string) { + this.structure.updateRootDocumentType({ description }); + } - // TODO => manage setting icon color + // TODO: manage setting icon color alias? setIcon(icon: string) { this.structure.updateRootDocumentType({ icon }); } + setAllowedAsRoot(allowedAsRoot: boolean) { + this.structure.updateRootDocumentType({ allowedAsRoot }); + } + setVariesByCulture(variesByCulture: boolean) { + this.structure.updateRootDocumentType({ variesByCulture }); + } + setVariesBySegment(variesBySegment: boolean) { + this.structure.updateRootDocumentType({ variesBySegment }); + } + setIsElement(isElement: boolean) { + this.structure.updateRootDocumentType({ isElement }); + } + setAllowedContentTypes(allowedContentTypes: Array) { + this.structure.updateRootDocumentType({ allowedContentTypes }); + } + setCompositions(compositions: Array) { + this.structure.updateRootDocumentType({ compositions }); + } + + // Document type specific: + setAllowedTemplateIds(allowedTemplateIds: Array) { + this.structure.updateRootDocumentType({ allowedTemplateIds }); + } + setDefaultTemplateId(defaultTemplateId: string) { + this.structure.updateRootDocumentType({ defaultTemplateId }); + } + async createScaffold(parentId: string) { const { data } = await this.structure.createScaffold(parentId); if (!data) return undefined; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/structure/document-type-workspace-view-structure.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/structure/document-type-workspace-view-structure.element.ts index 94ee23568c..46e0e63560 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/structure/document-type-workspace-view-structure.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/structure/document-type-workspace-view-structure.element.ts @@ -3,11 +3,89 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { customElement, state } from 'lit/decorators.js'; import { UmbDocumentTypeWorkspaceContext } from '../../document-type-workspace.context'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import type { DocumentTypeResponseModel } from '@umbraco-cms/backoffice/backend-api'; import { UMB_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/context-api'; +import { ContentTypeSortModel } from 'libs/backend-api/src'; +import type { UmbInputDocumentTypePickerElement } from 'src/backoffice/shared/components/input-document-type-picker/input-document-type-picker.element'; +import { UUIToggleElement } from '@umbraco-ui/uui'; @customElement('umb-document-type-workspace-view-structure') export class UmbDocumentTypeWorkspaceViewStructureElement extends UmbLitElement { + #workspaceContext?: UmbDocumentTypeWorkspaceContext; + + @state() + private _allowedAsRoot?: boolean; + + @state() + private _allowedContentTypeIDs?: Array; + + constructor() { + super(); + + // TODO: Figure out if this is the best way to consume the context or if it can be strongly typed with an UmbContextToken + this.consumeContext(UMB_ENTITY_WORKSPACE_CONTEXT, (documentTypeContext) => { + this.#workspaceContext = documentTypeContext as UmbDocumentTypeWorkspaceContext; + this._observeDocumentType(); + }); + } + + private _observeDocumentType() { + if (!this.#workspaceContext) return; + this.observe(this.#workspaceContext.allowedAsRoot, (allowedAsRoot) => (this._allowedAsRoot = allowedAsRoot)); + this.observe(this.#workspaceContext.allowedContentTypes, (allowedContentTypes) => { + this._allowedContentTypeIDs = allowedContentTypes + ?.map((x) => x.id) + .filter((x) => x !== undefined) as Array; + console.log('this._allowedContentTypeIDs', this._allowedContentTypeIDs); + }); + } + + render() { + return html` + + +
Allow editors to create content of this type in the root of the content tree.
+
+ +
+ + +
+ Allow content of the specified types to be created underneath content of this type. +
+
+ + + +
+ + + + +
+ Use this document as a collection, displaying its children in a Collection View. This could be a list or a + table. +
+
+ + + `; + } + static styles = [ UUITextStyles, css` @@ -26,51 +104,6 @@ export class UmbDocumentTypeWorkspaceViewStructureElement extends UmbLitElement } `, ]; - - private _workspaceContext?: UmbDocumentTypeWorkspaceContext; - - constructor() { - super(); - - // TODO: Figure out if this is the best way to consume the context or if it can be strongly typed with an UmbContextToken - this.consumeContext(UMB_ENTITY_WORKSPACE_CONTEXT, (documentTypeContext) => { - this._workspaceContext = documentTypeContext as UmbDocumentTypeWorkspaceContext; - this._observeDocumentType(); - }); - } - - private _observeDocumentType() { - if (!this._workspaceContext) return; - } - - render() { - return html` - - -
Allow editors to create content of this type in the root of the content tree.
-
- - -
- Allow content of the specified types to be created underneath content of this type. -
-
- - -
- - - - -
- Use this document as a collection, displaying its children in a Collection View. This could be a list or a - table. -
-
- - - `; - } } export default UmbDocumentTypeWorkspaceViewStructureElement; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-type-picker/input-document-type-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-type-picker/input-document-type-picker.element.ts index c3f844b898..06930f64e7 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-type-picker/input-document-type-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-type-picker/input-document-type-picker.element.ts @@ -30,11 +30,12 @@ export class UmbInputDocumentTypePickerElement extends FormControlMixin(UmbLitEl // TODO: do we need both selectedIds and value? If we just use value we follow the same pattern as native form controls. private _selectedIds: Array = []; + @property({ type: Array }) public get selectedIds(): Array { return this._selectedIds; } public set selectedIds(ids: Array) { - this._selectedIds = ids; + this._selectedIds = ids ?? []; super.value = ids.join(','); this._observePickedDocuments(); }