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

pick element type

Browse Source
This commit is contained in:
Niels Lyngsø
2023-12-21 14:40:07 +01:00
parent 42270ef116
commit 188e36ae9c
10 changed files with 100 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/Umbraco.Web.UI.Client/src/mocks/data/document-type/document-type.data.ts
View File

@@ -1003,6 +1003,62 @@ export const data: Array<UmbMockDocumentTypeModel> = [
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',

27
src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts
View File

@@ -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<BlockType extends UmbBlockTypeBase = UmbBl
}
create() {
//TODO: make flow of picking a element type first, and then:
this.#blockTypeWorkspaceModalRegistration.open({}, 'create/element-type-key');
this.consumeContext(UMB_MODAL_MANAGER_CONTEXT_TOKEN, async (modalManager) => {
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.
}

1
src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace-editor.element.ts
View File

@@ -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 {
//

4
src/Umbraco.Web.UI.Client/src/packages/core/modal/token/document-type-picker-modal.token.ts
View File

@@ -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<UmbEntityTreeItemModel>;
export type UmbDocumentTypePickerModalData = UmbTreePickerModalData<UmbDocumentTypeTreeItemModel>;
export type UmbDocumentTypePickerModalValue = UmbPickerModalValue;
export const UMB_DOCUMENT_TYPE_PICKER_MODAL = new UmbModalToken<

19
src/Umbraco.Web.UI.Client/src/packages/core/picker-input/picker-input.context.ts
View File

@@ -10,7 +10,6 @@ import {
UmbPickerModalData,
UmbPickerModalValue,
} from '@umbraco-cms/backoffice/modal';
import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
export class UmbPickerInputContext<ItemType extends { name: string }> 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<ItemType extends { name: string }> extends Um
//@ts-ignore
this.#getUnique = getUniqueMethod || ((entry) => entry.id || '');
this.#itemManager = new UmbRepositoryItemsManager<ItemType>(host, repositoryAlias, this.#getUnique);
this.#itemManager = new UmbRepositoryItemsManager<ItemType>(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<ItemType extends { name: string }> extends Um
this.#itemManager.setUniques(selection.filter((value) => value !== null) as Array<string>);
}
// TODO: If modalAlias is a ModalToken, then via TS, we should get the correct type for pickerData. Otherwise fallback to unknown.
openPicker(pickerData?: Partial<UmbPickerModalData<ItemType>>) {
async openPicker(pickerData?: Partial<UmbPickerModalData<ItemType>>) {
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<ItemType extends { name: string }> 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);

2
src/Umbraco.Web.UI.Client/src/packages/core/repository/repository-items.manager.ts
View File

@@ -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';

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

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

1
src/Umbraco.Web.UI.Client/src/packages/documents/document-types/index.ts
View File

@@ -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';

2
src/Umbraco.Web.UI.Client/src/packages/documents/document-types/tree/document-type.tree.server.data-source.ts
View File

@@ -50,5 +50,7 @@ const mapper = (item: DocumentTypeTreeItemResponseModel): UmbDocumentTypeTreeIte
isContainer: item.isContainer,
hasChildren: item.hasChildren,
isFolder: item.isFolder,
icon: item.icon,
isElement: item.isElement,
};
};

5
src/Umbraco.Web.UI.Client/src/packages/documents/document-types/tree/types.ts
View File

@@ -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 {}