From 3043c4f67b9cc23c5cf7f694cdbcea9eeb471f12 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 8 Mar 2023 20:21:47 +0100 Subject: [PATCH] register property editor ui picker --- .../libs/modal/modal.context.ts | 14 -------------- .../data-type-workspace-view-edit.element.ts | 3 ++- .../src/backoffice/shared/index.ts | 6 ++---- .../shared/property-editors/manifests.ts | 5 +++++ .../shared/property-editors/modals/manifests.ts | 12 ++++++++++++ .../modals/property-editor-ui-picker/index.ts | 14 ++++++++++++++ .../property-editor-ui-picker-modal.element.ts | 8 ++------ .../property-editor-ui-picker-modal.stories.ts | 16 +++++++--------- 8 files changed, 44 insertions(+), 34 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/index.ts diff --git a/src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts b/src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts index 089b3afe44..ecdc6985b8 100644 --- a/src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts +++ b/src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts @@ -1,11 +1,8 @@ -import '../../src/backoffice/shared/property-editors/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element'; -import '../../src/backoffice/settings/languages/modals/language-picker/language-picker-modal.element'; import './layouts/search/modal-layout-search.element'; import { UUIModalSidebarSize } from '@umbraco-ui/uui-modal-sidebar'; import { BehaviorSubject } from 'rxjs'; import type { UUIModalDialogElement } from '@umbraco-ui/uui-modal-dialog'; -import type { UmbModalPropertyEditorUIPickerData } from '../../src/backoffice/shared/property-editors/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element'; import { UmbModalHandler } from './modal-handler'; import type { UmbModalToken } from './token/modal-token'; import { UmbContextToken } from '@umbraco-cms/context-api'; @@ -30,17 +27,6 @@ export class UmbModalContext { this.host = host; } - /** - * Opens a Property Editor UI sidebar modal - * @public - * @param {UmbModalPropertyEditorUIPickerData} [data] - * @return {*} {UmbModalHandler} - * @memberof UmbModalContext - */ - public propertyEditorUIPicker(data?: UmbModalPropertyEditorUIPickerData): UmbModalHandler { - return this.open('umb-modal-layout-property-editor-ui-picker', { data, type: 'sidebar', size: 'small' }); - } - public search(): UmbModalHandler { const modalHandler = new UmbModalHandler('umb-modal-layout-search'); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/views/edit/data-type-workspace-view-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/views/edit/data-type-workspace-view-edit.element.ts index bbdc89f5b6..3ca8924d6d 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/views/edit/data-type-workspace-view-edit.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/views/edit/data-type-workspace-view-edit.element.ts @@ -9,6 +9,7 @@ import { umbExtensionsRegistry } from '@umbraco-cms/extensions-api'; import '../../../../../shared/property-editors/shared/property-editor-config/property-editor-config.element'; import '../../../../../shared/components/ref-property-editor-ui/ref-property-editor-ui.element'; +import { UMB_PROPERTY_EDITOR_UI_PICKER_MODAL_TOKEN } from 'src/backoffice/shared/property-editors/modals/property-editor-ui-picker'; @customElement('umb-data-type-workspace-view-edit') export class UmbDataTypeWorkspaceViewEditElement extends UmbLitElement { @@ -100,7 +101,7 @@ export class UmbDataTypeWorkspaceViewEditElement extends UmbLitElement { private _openPropertyEditorUIPicker() { if (!this._dataType) return; - const modalHandler = this._modalContext?.propertyEditorUIPicker({ + const modalHandler = this._modalContext?.open(UMB_PROPERTY_EDITOR_UI_PICKER_MODAL_TOKEN, { selection: this._propertyEditorUiAlias ? [this._propertyEditorUiAlias] : [], }); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/index.ts index d5239f165c..71ca8b6aa6 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/index.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/index.ts @@ -1,8 +1,7 @@ import './components'; import { manifests as propertyActionManifests } from './property-actions/manifests'; -import { manifests as propertyEditorModelManifests } from './property-editors/models/manifests'; -import { manifests as propertyEditorUIManifests } from './property-editors/uis/manifests'; +import { manifests as propertyEditorManifests } from './property-editors/manifests'; import { manifests as collectionViewManifests } from './collection/views/manifests'; import { manifests as modalManifests } from './modals/manifests'; @@ -18,8 +17,7 @@ const registerExtensions = (manifests: Array) => { registerExtensions([ ...propertyActionManifests, - ...propertyEditorModelManifests, - ...propertyEditorUIManifests, + ...propertyEditorManifests, ...collectionViewManifests, ...modalManifests, ]); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/manifests.ts new file mode 100644 index 0000000000..38777fdc5c --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/manifests.ts @@ -0,0 +1,5 @@ +import { manifests as propertyEditorModelManifests } from './models/manifests'; +import { manifests as propertyEditorUIManifests } from './uis/manifests'; +import { manifests as modalManifests } from './modals/manifests'; + +export const manifests = [...propertyEditorModelManifests, ...propertyEditorUIManifests, ...modalManifests]; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/manifests.ts new file mode 100644 index 0000000000..34fdaa64db --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/manifests.ts @@ -0,0 +1,12 @@ +import type { ManifestModal } from '@umbraco-cms/extensions-registry'; + +const modals: Array = [ + { + type: 'modal', + alias: 'Umb.Modal.PropertyEditorUIPicker', + name: 'Property Editor UI Picker Modal', + loader: () => import('./property-editor-ui-picker/property-editor-ui-picker-modal.element'), + }, +]; + +export const manifests = [...modals]; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/index.ts new file mode 100644 index 0000000000..fc01389f3a --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/index.ts @@ -0,0 +1,14 @@ +import { UmbModalToken } from '@umbraco-cms/modal'; + +export interface UmbPropertyEditorUIPickerModalData { + selection?: Array; + submitLabel?: string; +} + +export const UMB_PROPERTY_EDITOR_UI_PICKER_MODAL_TOKEN = new UmbModalToken( + 'Umb.Modal.PropertyEditorUIPicker', + { + type: 'sidebar', + size: 'small', + } +); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts index 47e717ec86..899632a230 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts @@ -8,11 +8,7 @@ import type { UmbModalHandler } from '../../../../../../libs/modal/modal-handler import type { ManifestPropertyEditorUI } from '@umbraco-cms/models'; import { umbExtensionsRegistry } from '@umbraco-cms/extensions-api'; import { UmbLitElement } from '@umbraco-cms/element'; - -export interface UmbModalPropertyEditorUIPickerData { - selection?: Array; - submitLabel?: string; -} +import { UmbPropertyEditorUIPickerModalData } from '.'; interface GroupedPropertyEditorUIs { [key: string]: Array; @@ -87,7 +83,7 @@ export class UmbPropertyEditorUIPickerModalElement extends UmbLitElement { modalHandler?: UmbModalHandler; @property({ type: Object }) - data?: UmbModalPropertyEditorUIPickerData; + data?: UmbPropertyEditorUIPickerModalData; @state() private _groupedPropertyEditorUIs: GroupedPropertyEditorUIs = {}; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/property-editor-ui-picker-modal.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/property-editor-ui-picker-modal.stories.ts index e9246d16a0..16d9f48b9d 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/property-editor-ui-picker-modal.stories.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/property-editor-ui-picker-modal.stories.ts @@ -1,21 +1,19 @@ import { Meta, Story } from '@storybook/web-components'; import { html } from 'lit'; -import type { - UmbPropertyEditorUIPickerModalElement, - UmbModalPropertyEditorUIPickerData, -} from './property-editor-ui-picker-modal.element'; -import './property-editor-ui-picker-modal.element'; +import type { UmbPropertyEditorUIPickerModalElement } from './property-editor-ui-picker-modal.element'; +import type { UmbPropertyEditorUIPickerModalData } from './'; +import './property-editor-ui-picker-modal.element'; import '../../../components/body-layout/body-layout.element'; export default { title: 'API/Modals/Layouts/Property Editor UI Picker', - component: 'umb-modal-layout-property-editor-ui-picker', - id: 'modal-layout-property-editor-ui-picker', + component: 'umb-property-editor-ui-picker-modal', + id: 'umb-property-editor-ui-picker-modal', } as Meta; -const data: UmbModalPropertyEditorUIPickerData = { selection: [] }; +const data: UmbPropertyEditorUIPickerModalData = { selection: [] }; export const Overview: Story = () => html` - + `;