From 188e36ae9c9ff8f174a2c4f60ee7bc76339fadda Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Thu, 21 Dec 2023 14:40:07 +0100 Subject: [PATCH] pick element type --- .../data/document-type/document-type.data.ts | 56 +++++++++++++++++++ .../input-block-type.element.ts | 27 ++++++++- .../block-type-workspace-editor.element.ts | 1 + .../token/document-type-picker-modal.token.ts | 4 +- .../core/picker-input/picker-input.context.ts | 19 +++---- .../repository/repository-items.manager.ts | 2 +- .../document-type-input.element.ts | 2 +- .../documents/document-types/index.ts | 1 + .../document-type.tree.server.data-source.ts | 2 + .../documents/document-types/tree/types.ts | 5 +- 10 files changed, 100 insertions(+), 19 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/document-type/document-type.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/document-type/document-type.data.ts index 3343666da2..79254b2eab 100644 --- a/src/Umbraco.Web.UI.Client/src/mocks/data/document-type/document-type.data.ts +++ b/src/Umbraco.Web.UI.Client/src/mocks/data/document-type/document-type.data.ts @@ -1003,6 +1003,62 @@ export const data: Array = [ keepLatestVersionPerDayForDays: null, }, }, + { + allowedTemplateIds: [], + defaultTemplateId: null, + id: '4f68ba66-6fb2-4778-83b8-6ab4ca3a7c5c', + alias: 'simpleElementType', + name: 'Simple Element Type', + description: null, + icon: 'icon-science', + allowedAsRoot: false, + variesByCulture: false, + variesBySegment: false, + isElement: true, + type: 'document-type', + hasChildren: false, + isContainer: false, + parentId: null, + isFolder: false, + properties: [ + { + id: 'b92de6ac-1a22-4a45-a481-b6cae1cccbb0', + containerId: '1e845ca8-1e3e-4b03-be1d-0b4149ce2120', + alias: 'elementProperty', + name: 'Element property', + description: null, + dataTypeId: '0cc0eba1-9960-42c9-bf9b-60e150b429ae', + variesByCulture: false, + variesBySegment: false, + sortOrder: 0, + validation: { + mandatory: false, + mandatoryMessage: null, + regEx: null, + regExMessage: null, + }, + appearance: { + labelOnTop: false, + }, + }, + ], + containers: [ + { + id: '1e845ca8-1e3e-4b03-be1d-0b4149ce2120', + parentId: null, + name: 'Content-group', + type: 'Group', + sortOrder: 0, + }, + ], + allowedContentTypes: [], + compositions: [], + cleanup: { + preventCleanup: false, + keepAllVersionsNewerThanDays: null, + keepLatestVersionPerDayForDays: null, + }, + }, { allowedTemplateIds: [ '2bf464b6-3aca-4388-b043-4eb439cc2643', diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts index bbad4786ff..ec5899606c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts @@ -1,4 +1,9 @@ -import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal'; +import { + UMB_DOCUMENT_TYPE_PICKER_MODAL, + UMB_MODAL_MANAGER_CONTEXT_TOKEN, + UMB_WORKSPACE_MODAL, + UmbModalRouteRegistrationController, +} from '@umbraco-cms/backoffice/modal'; import { UmbBlockTypeBase } from '../../types.js'; import '../block-type-card/index.js'; import { css, html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit'; @@ -39,8 +44,24 @@ export class UmbInputBlockTypeElement { + if (modalManager) { + const modalContext = modalManager.open(UMB_DOCUMENT_TYPE_PICKER_MODAL, { + data: { + hideTreeRoot: true, + multiple: false, + pickableFilter: (x) => x.isElement, + }, + }); + + const modalValue = await modalContext?.onSubmit(); + const selectedElementType = modalValue.selection[0]; + if (selectedElementType) { + this.#blockTypeWorkspaceModalRegistration.open({}, 'create/' + selectedElementType); + } + } + }); + // No need to fire a change event, as all changes are made directly to the property, via context api. } diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace-editor.element.ts index 29a47a5926..01c55c153e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace-editor.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace-editor.element.ts @@ -2,6 +2,7 @@ import { UMB_BLOCK_TYPE_WORKSPACE_CONTEXT } from './block-type-workspace.context import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { customElement, css, html } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; + @customElement('umb-block-type-workspace-editor') export class UmbBlockTypeWorkspaceEditorElement extends UmbLitElement { // diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/document-type-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/document-type-picker-modal.token.ts index 69e7644c69..e967944eee 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/document-type-picker-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/document-type-picker-modal.token.ts @@ -1,7 +1,7 @@ +import { UmbDocumentTypeTreeItemModel } from '@umbraco-cms/backoffice/document-type'; import { UmbModalToken, UmbPickerModalValue, UmbTreePickerModalData } from '@umbraco-cms/backoffice/modal'; -import { UmbEntityTreeItemModel } from '@umbraco-cms/backoffice/tree'; -export type UmbDocumentTypePickerModalData = UmbTreePickerModalData; +export type UmbDocumentTypePickerModalData = UmbTreePickerModalData; export type UmbDocumentTypePickerModalValue = UmbPickerModalValue; export const UMB_DOCUMENT_TYPE_PICKER_MODAL = new UmbModalToken< diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker-input/picker-input.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker-input/picker-input.context.ts index a1aa83abea..28a5bba847 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker-input/picker-input.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker-input/picker-input.context.ts @@ -10,7 +10,6 @@ import { UmbPickerModalData, UmbPickerModalValue, } from '@umbraco-cms/backoffice/modal'; -import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api'; export class UmbPickerInputContext extends UmbBaseController { // TODO: We are way too unsecure about the requirements for the Modal Token, as we have certain expectation for the data and value. @@ -46,14 +45,14 @@ export class UmbPickerInputContext extends Um //@ts-ignore this.#getUnique = getUniqueMethod || ((entry) => entry.id || ''); - this.#itemManager = new UmbRepositoryItemsManager(host, repositoryAlias, this.#getUnique); + this.#itemManager = new UmbRepositoryItemsManager(this, repositoryAlias, this.#getUnique); this.selection = this.#itemManager.uniques; this.selectedItems = this.#itemManager.items; this.#init = Promise.all([ this.#itemManager.init, - new UmbContextConsumerController(this._host, UMB_MODAL_MANAGER_CONTEXT_TOKEN, (instance) => { + this.consumeContext(UMB_MODAL_MANAGER_CONTEXT_TOKEN, (instance) => { this.modalManager = instance; }).asPromise(), ]); @@ -68,11 +67,10 @@ export class UmbPickerInputContext extends Um this.#itemManager.setUniques(selection.filter((value) => value !== null) as Array); } - // TODO: If modalAlias is a ModalToken, then via TS, we should get the correct type for pickerData. Otherwise fallback to unknown. - openPicker(pickerData?: Partial>) { + async openPicker(pickerData?: Partial>) { + await this.#init; if (!this.modalManager) throw new Error('Modal manager context is not initialized'); - // TODO: Update so selection is part of value... const modalContext = this.modalManager.open(this.modalAlias, { data: { multiple: this.max === 1 ? false : true, @@ -84,14 +82,13 @@ export class UmbPickerInputContext extends Um }, }); - modalContext?.onSubmit().then((value) => { - this.setSelection(value.selection); - this.getHostElement().dispatchEvent(new UmbChangeEvent()); - }); + const modalValue = await modalContext?.onSubmit(); + this.setSelection(modalValue.selection); + this.getHostElement().dispatchEvent(new UmbChangeEvent()); } async requestRemoveItem(unique: string) { - // TODO: id won't always be available on the model, so we need to get the unique property from somewhere. Maybe the repository? + // TODO: ID won't always be available on the model, so we need to get the unique property from somewhere. Maybe the repository? const item = this.#itemManager.getItems().find((item) => this.#getUnique(item) === unique); if (!item) throw new Error('Could not find item with unique: ' + unique); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/repository/repository-items.manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/repository/repository-items.manager.ts index 3cee88340b..9d0806d8c8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/repository/repository-items.manager.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/repository/repository-items.manager.ts @@ -1,6 +1,6 @@ import type { UmbItemRepository } from '@umbraco-cms/backoffice/repository'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; -import { UmbArrayState, UmbObserverController } from '@umbraco-cms/backoffice/observable-api'; +import { UmbArrayState } from '@umbraco-cms/backoffice/observable-api'; import { type ManifestRepository, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; import { UmbExtensionApiInitializer } from '@umbraco-cms/backoffice/extension-api'; import { UmbBaseController } from '@umbraco-cms/backoffice/class-api'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/document-type-input/document-type-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/document-type-input/document-type-input.element.ts index 5286fb0a32..6641555bea 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/document-type-input/document-type-input.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/document-type-input/document-type-input.element.ts @@ -115,7 +115,7 @@ export class UmbDocumentTypeInputElement extends FormControlMixin(UmbLitElement) if (this.elementTypesOnly) { this.#pickerContext.openPicker({ hideTreeRoot: true, - pickableFilter: (x) => x.isElement!, + pickableFilter: (x) => x.isElement, }); } else { this.#pickerContext.openPicker({ hideTreeRoot: true }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/index.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/index.ts index df7eace207..6f34cbdcb0 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/index.ts @@ -1,6 +1,7 @@ import './components/index.js'; export * from './repository/index.js'; +export * from './tree/types.js'; export const UMB_DOCUMENT_TYPE_ROOT_ENTITY_TYPE = 'document-type-root'; export const UMB_DOCUMENT_TYPE_ENTITY_TYPE = 'document-type'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/tree/document-type.tree.server.data-source.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/tree/document-type.tree.server.data-source.ts index 36f8515005..48c922f19c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/tree/document-type.tree.server.data-source.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/tree/document-type.tree.server.data-source.ts @@ -50,5 +50,7 @@ const mapper = (item: DocumentTypeTreeItemResponseModel): UmbDocumentTypeTreeIte isContainer: item.isContainer, hasChildren: item.hasChildren, isFolder: item.isFolder, + icon: item.icon, + isElement: item.isElement, }; }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/tree/types.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/tree/types.ts index 103e4b6be3..a862653597 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/tree/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/tree/types.ts @@ -1,5 +1,8 @@ import type { UmbEntityTreeItemModel, UmbEntityTreeRootModel } from '@umbraco-cms/backoffice/tree'; -export interface UmbDocumentTypeTreeItemModel extends UmbEntityTreeItemModel {} +export interface UmbDocumentTypeTreeItemModel extends UmbEntityTreeItemModel { + isElement: boolean; + icon?: string | null; +} // TODO: TREE STORE TYPE PROBLEM: export interface UmbDocumentTypeTreeRootModel extends UmbEntityTreeRootModel {}