From 6c76c62c4f0ed8cfde868716e7acbea3865b8a41 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 12 Aug 2024 20:21:14 +0200 Subject: [PATCH 001/102] export const --- .../src/packages/documents/document-types/search/constants.ts | 1 + 1 file changed, 1 insertion(+) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/document-types/search/constants.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/search/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/search/constants.ts new file mode 100644 index 0000000000..ec598f76cc --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/search/constants.ts @@ -0,0 +1 @@ +export const UMB_DOCUMENT_TYPE_SEARCH_PROVIDER_ALIAS = 'Umb.SearchProvider.DocumentType'; From d1a4f25801916e531c7e5b0e870d10aa378270a2 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 12 Aug 2024 20:21:24 +0200 Subject: [PATCH 002/102] use const --- .../src/packages/documents/document-types/search/manifests.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/search/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/search/manifests.ts index 8deaf580bd..503ee26f29 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/search/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/search/manifests.ts @@ -1,10 +1,11 @@ import { UMB_DOCUMENT_TYPE_ENTITY_TYPE } from '../entity.js'; +import { UMB_DOCUMENT_TYPE_SEARCH_PROVIDER_ALIAS } from './constants.js'; import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry'; export const manifests: Array = [ { name: 'Document Type Search Provider', - alias: 'Umb.SearchProvider.DocumentType', + alias: UMB_DOCUMENT_TYPE_SEARCH_PROVIDER_ALIAS, type: 'searchProvider', api: () => import('./document-type.search-provider.js'), weight: 600, From 0869a19268cb698f2d2390af2e3c6904e0ea7980 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 12 Aug 2024 20:23:44 +0200 Subject: [PATCH 003/102] export from search module --- .../src/packages/documents/document-types/search/index.ts | 1 + 1 file changed, 1 insertion(+) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/document-types/search/index.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/search/index.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/search/index.ts new file mode 100644 index 0000000000..4f07201dcf --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/search/index.ts @@ -0,0 +1 @@ +export * from './constants.js'; From 80128352f58d9ea4cbb48a082257d9a89fc49bdd Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 12 Aug 2024 20:24:00 +0200 Subject: [PATCH 004/102] add search to config --- .../document-types/modals/document-type-picker-modal.token.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/modals/document-type-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/modals/document-type-picker-modal.token.ts index 115868acf2..29190c5ef6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/modals/document-type-picker-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/modals/document-type-picker-modal.token.ts @@ -1,4 +1,5 @@ import { UMB_CREATE_DOCUMENT_TYPE_WORKSPACE_PATH_PATTERN } from '../paths.js'; +import { UMB_DOCUMENT_TYPE_SEARCH_PROVIDER_ALIAS } from '../search/index.js'; import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; import type { UmbDocumentTypeTreeItemModel } from '@umbraco-cms/backoffice/document-type'; import { @@ -24,6 +25,9 @@ export const UMB_DOCUMENT_TYPE_PICKER_MODAL = new UmbModalToken< }, data: { treeAlias: 'Umb.Tree.DocumentType', + search: { + providerAlias: UMB_DOCUMENT_TYPE_SEARCH_PROVIDER_ALIAS, + }, createAction: { label: '#content_createEmpty', modalData: { From fd9a0af50ccfc4450c11289a14885171ef9cd25f Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 12 Aug 2024 20:32:06 +0200 Subject: [PATCH 005/102] use consts --- .../modals/document-type-picker-modal.token.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/modals/document-type-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/modals/document-type-picker-modal.token.ts index 29190c5ef6..74362b03dd 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/modals/document-type-picker-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/modals/document-type-picker-modal.token.ts @@ -1,7 +1,11 @@ import { UMB_CREATE_DOCUMENT_TYPE_WORKSPACE_PATH_PATTERN } from '../paths.js'; import { UMB_DOCUMENT_TYPE_SEARCH_PROVIDER_ALIAS } from '../search/index.js'; import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; -import type { UmbDocumentTypeTreeItemModel } from '@umbraco-cms/backoffice/document-type'; +import { + UMB_DOCUMENT_TYPE_ENTITY_TYPE, + UMB_DOCUMENT_TYPE_ROOT_ENTITY_TYPE, + type UmbDocumentTypeTreeItemModel, +} from '@umbraco-cms/backoffice/document-type'; import { type UmbTreePickerModalValue, type UmbTreePickerModalData, @@ -31,12 +35,12 @@ export const UMB_DOCUMENT_TYPE_PICKER_MODAL = new UmbModalToken< createAction: { label: '#content_createEmpty', modalData: { - entityType: 'document-type', + entityType: UMB_DOCUMENT_TYPE_ENTITY_TYPE, preset: {}, }, extendWithPathPattern: UMB_CREATE_DOCUMENT_TYPE_WORKSPACE_PATH_PATTERN, extendWithPathParams: { - parentEntityType: 'document-type-root', + parentEntityType: UMB_DOCUMENT_TYPE_ROOT_ENTITY_TYPE, parentUnique: null, presetAlias: null, }, From b81fdcbe0ce78829b62f0f62e828dfd9b72561de Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 13 Aug 2024 13:58:38 +0200 Subject: [PATCH 006/102] set base type as default type --- src/Umbraco.Web.UI.Client/src/packages/search/types.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/search/types.ts b/src/Umbraco.Web.UI.Client/src/packages/search/types.ts index a1309314d4..a165bcd2ff 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/search/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/search/types.ts @@ -13,6 +13,7 @@ export type UmbSearchRequestArgs = { query: string; }; -export interface UmbSearchProvider extends UmbApi { +export interface UmbSearchProvider + extends UmbApi { search(args: UmbSearchRequestArgs): Promise>>; } From 696b963b72660a5711b7fa444b88e36c11fb542a Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 13 Aug 2024 13:58:51 +0200 Subject: [PATCH 007/102] export const for provider alias --- .../src/packages/documents/documents/search/constants.ts | 1 + .../src/packages/documents/documents/search/manifests.ts | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/documents/search/constants.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/search/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/search/constants.ts new file mode 100644 index 0000000000..13e085c832 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/search/constants.ts @@ -0,0 +1 @@ +export const UMB_DOCUMENT_SEARCH_PROVIDER_ALIAS = 'Umb.SearchProvider.Document'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/search/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/search/manifests.ts index cdc2e2e024..f9d8b8dce2 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/search/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/search/manifests.ts @@ -1,10 +1,11 @@ import { UMB_DOCUMENT_ENTITY_TYPE } from '../entity.js'; +import { UMB_DOCUMENT_SEARCH_PROVIDER_ALIAS } from './constants.js'; import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry'; export const manifests: Array = [ { name: 'Document Search Provider', - alias: 'Umb.SearchProvider.Document', + alias: UMB_DOCUMENT_SEARCH_PROVIDER_ALIAS, type: 'searchProvider', api: () => import('./document.search-provider.js'), weight: 800, From 5298ad37a91e8ff33aa896dfce16b4f37bd41e26 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 13 Aug 2024 13:59:48 +0200 Subject: [PATCH 008/102] export consts from index --- .../src/packages/documents/documents/search/index.ts | 1 + 1 file changed, 1 insertion(+) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/documents/search/index.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/search/index.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/search/index.ts new file mode 100644 index 0000000000..4f07201dcf --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/search/index.ts @@ -0,0 +1 @@ +export * from './constants.js'; From 8e358bcb2f29628e1a95dca0eec2eebff35c870a Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 13 Aug 2024 14:01:05 +0200 Subject: [PATCH 009/102] add search to document tree item picker --- .../documents/documents/modals/document-picker-modal.token.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/document-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/document-picker-modal.token.ts index b244d4093a..5fb0115f87 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/document-picker-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/document-picker-modal.token.ts @@ -1,3 +1,4 @@ +import { UMB_DOCUMENT_SEARCH_PROVIDER_ALIAS } from '../search/index.js'; import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; import { type UmbTreePickerModalValue, @@ -18,6 +19,9 @@ export const UMB_DOCUMENT_PICKER_MODAL = new UmbModalToken Date: Tue, 13 Aug 2024 14:01:23 +0200 Subject: [PATCH 010/102] render search in generic tree picker modal --- .../tree-picker/tree-picker-modal.element.ts | 173 ++++++++++++++++-- 1 file changed, 156 insertions(+), 17 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts index 29f9991636..9551648860 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts @@ -1,10 +1,15 @@ import type { UmbTreeSelectionConfiguration } from '../types.js'; import type { UmbTreePickerModalData, UmbTreePickerModalValue } from './tree-picker-modal.token.js'; -import { html, customElement, state, ifDefined, nothing } from '@umbraco-cms/backoffice/external/lit'; +import { html, customElement, state, ifDefined, nothing, css, repeat } from '@umbraco-cms/backoffice/external/lit'; import { UMB_WORKSPACE_MODAL, UmbModalBaseElement } from '@umbraco-cms/backoffice/modal'; import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router'; import { UmbDeselectedEvent, UmbSelectedEvent, UmbSelectionChangeEvent } from '@umbraco-cms/backoffice/event'; import type { UmbTreeElement, UmbTreeItemModelBase } from '@umbraco-cms/backoffice/tree'; +import { debounce } from '@umbraco-cms/backoffice/utils'; +import type { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; +import { createExtensionApiByAlias } from '@umbraco-cms/backoffice/extension-registry'; +import type { UmbSearchProvider, UmbSearchRepository } from '@umbraco-cms/backoffice/search'; @customElement('umb-tree-picker-modal') export class UmbTreePickerModalElement extends UmbModalBaseElement< @@ -24,6 +29,20 @@ export class UmbTreePickerModalElement = []; + + @state() + private _searching = false; + + #searchProvider?: any; + override connectedCallback() { super.connectedCallback(); @@ -69,8 +88,12 @@ export class UmbTreePickerModalElement(this, search.providerAlias); + if (!this.#searchProvider) throw new Error(`Search Provider with alias ${search.providerAlias} is not available`); + + this._searchIsEnabled = true; + } + + #onSearchInput(event: UUIInputEvent) { + const value = event.target.value as string; + this._searchQuery = value; + + if (!this._searchQuery) { + this._searchResult = []; + this._searching = false; + return; + } + + this._searching = true; + this.#debouncedSearch(); + } + + #debouncedSearch = debounce(this.#search, 300); + + async #search() { + if (!this._searchQuery) return; + const { data } = await this.#searchProvider.search({ query: this._searchQuery }); + this._searchResult = data?.items ?? []; + this._searching = false; + } + + #onSearchClear() { + this._searchQuery = ''; + this._searchResult = []; + } + override render() { return html` - - - + ${this.#renderSearch()} ${this.#renderTree()}
${this._createPath @@ -124,6 +176,93 @@ export class UmbTreePickerModalElement `; } + + #renderTree() { + return html` + + `; + } + + #renderSearch() { + if (!this._searchIsEnabled) { + return nothing; + } + + return html` + +
+ ${this._searching + ? html`` + : html``} +
+ +
+ + + +
+ +
+ ${this.#renderSearchResult()} + `; + } + + #renderSearchResult() { + if (this._searchQuery && this._searching === false && this._searchResult.length === 0) { + return this.#renderEmptySearchResult(); + } + + return html` + ${repeat( + this._searchResult, + (item) => item.unique, + (item) => this.#renderPickerSearchResultItem(item), + )} + `; + } + + #renderEmptySearchResult() { + return html`No result for "${this._searchQuery}".`; + } + + #renderPickerSearchResultItem(item: any) { + return html` `; + } + + static override styles = [ + UmbTextStyles, + css` + #search-input { + width: 100%; + } + + #search-divider { + width: 100%; + height: 1px; + background-color: var(--uui-color-divider); + margin-top: var(--uui-size-space-5); + margin-bottom: var(--uui-size-space-3); + } + + #search-indicator { + margin-left: 7px; + margin-top: 4px; + } + `, + ]; } export default UmbTreePickerModalElement; From d4be18e62f59c29931a99327c38699babe062fd8 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 13 Aug 2024 14:02:55 +0200 Subject: [PATCH 011/102] remove unused --- .../packages/core/tree/tree-picker/tree-picker-modal.element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts index 9551648860..05dd88321d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts @@ -9,7 +9,7 @@ import { debounce } from '@umbraco-cms/backoffice/utils'; import type { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { createExtensionApiByAlias } from '@umbraco-cms/backoffice/extension-registry'; -import type { UmbSearchProvider, UmbSearchRepository } from '@umbraco-cms/backoffice/search'; +import type { UmbSearchProvider } from '@umbraco-cms/backoffice/search'; @customElement('umb-tree-picker-modal') export class UmbTreePickerModalElement extends UmbModalBaseElement< From cd7231fc2b536022418533a25b50b980d6f6d613 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 13 Aug 2024 14:14:47 +0200 Subject: [PATCH 012/102] split into method --- .../tree-picker/tree-picker-modal.element.ts | 68 ++++++++++--------- 1 file changed, 36 insertions(+), 32 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts index 05dd88321d..d5757531a2 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts @@ -57,38 +57,7 @@ export class UmbTreePickerModalElement { - return { data: createAction.modalData }; - }) - .onSubmit((value) => { - if (value) { - this.value = { selection: [value.unique] }; - this._submitModal(); - } else { - this._rejectModal(); - } - }) - .observeRouteBuilder((routeBuilder) => { - const oldPath = this._createPath; - this._createPath = - routeBuilder({}) + createAction.extendWithPathPattern.generateLocal(createAction.extendWithPathParams); - this.requestUpdate('_createPath', oldPath); - }); - } - + this.#initCreateAction(); this.#initSearch(); } @@ -155,6 +124,41 @@ export class UmbTreePickerModalElement { + return { data: createAction.modalData }; + }) + .onSubmit((value) => { + if (value) { + this.value = { selection: [value.unique] }; + this._submitModal(); + } else { + this._rejectModal(); + } + }) + .observeRouteBuilder((routeBuilder) => { + const oldPath = this._createPath; + this._createPath = + routeBuilder({}) + createAction.extendWithPathPattern.generateLocal(createAction.extendWithPathParams); + this.requestUpdate('_createPath', oldPath); + }); + } + } + override render() { return html` From 3face07715ab2fa59cbb75171da8014e0a75f5a6 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 13 Aug 2024 14:39:02 +0200 Subject: [PATCH 013/102] only render clear button if there is a search query --- .../tree/tree-picker/tree-picker-modal.element.ts | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts index d5757531a2..edd16dae04 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts @@ -213,11 +213,13 @@ export class UmbTreePickerModalElement`}
-
- - - -
+ ${this._searchQuery + ? html` + + + + ` + : nothing}
${this.#renderSearchResult()} From a9477355e085998cd00e1fffc3eae33b0e1f03be Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 13 Aug 2024 14:53:21 +0200 Subject: [PATCH 014/102] add new extension type for Picker Search Result Item --- .../src/packages/core/extension-registry/models/index.ts | 5 ++++- .../models/picker-search-result-item.model.ts | 9 +++++++++ 2 files changed, 13 insertions(+), 1 deletion(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/picker-search-result-item.model.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/index.ts index 47e891bd60..3adb526942 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/index.ts @@ -72,6 +72,7 @@ import type { ManifestEntryPoint } from './entry-point.model.js'; import type { ManifestMonacoMarkdownEditorAction } from './monaco-markdown-editor-action.model.js'; import type { ManifestSectionRoute } from './section-route.model.js'; import type { ManifestBase, ManifestBundle, ManifestCondition } from '@umbraco-cms/backoffice/extension-api'; +import type { ManifestPickerSearchResultItem } from './picker-search-result-item.model.js'; export type * from './app-entry-point.model.js'; export type * from './auth-provider.model.js'; @@ -100,6 +101,7 @@ export type * from './mfa-login-provider.model.js'; export type * from './modal.model.js'; export type * from './monaco-markdown-editor-action.model.js'; export type * from './package-view.model.js'; +export type * from './picker-search-result-item.model.js'; export type * from './preview-app.model.js'; export type * from './property-action.model.js'; export type * from './property-editor.model.js'; @@ -188,6 +190,7 @@ export type ManifestTypes = | ManifestModal | ManifestMonacoMarkdownEditorAction | ManifestPackageView + | ManifestPickerSearchResultItem | ManifestPreviewAppProvider | ManifestPropertyActions | ManifestPropertyEditorSchema @@ -196,10 +199,10 @@ export type ManifestTypes = | ManifestSearchProvider | ManifestSearchResultItem | ManifestSection + | ManifestSectionRoute | ManifestSectionSidebarApp | ManifestSectionSidebarAppMenuKind | ManifestSectionView - | ManifestSectionRoute | ManifestStore | ManifestTheme | ManifestTinyMcePlugin diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/picker-search-result-item.model.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/picker-search-result-item.model.ts new file mode 100644 index 0000000000..8797323f40 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/picker-search-result-item.model.ts @@ -0,0 +1,9 @@ +import type { ManifestElementAndApi } from '@umbraco-cms/backoffice/extension-api'; + +/** + * Represents a picker search result element. + */ +export interface ManifestPickerSearchResultItem extends ManifestElementAndApi { + type: 'pickerSearchResultItem'; + forEntityTypes: Array; +} From 12137dbda977875ecee54ec64e8b369cbdddd994 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 13 Aug 2024 15:03:43 +0200 Subject: [PATCH 015/102] move picker code from modals folder to picker folder --- .../components/input-document/input-document.context.ts | 4 ++-- .../src/packages/documents/documents/index.ts | 1 + .../src/packages/documents/documents/modals/index.ts | 1 - .../{modals => picker}/document-picker-modal.token.ts | 0 .../src/packages/documents/documents/picker/index.ts | 1 + .../documents/recycle-bin/entity-action/manifests.ts | 2 +- .../input-document-granular-user-permission.element.ts | 2 +- 7 files changed, 6 insertions(+), 5 deletions(-) rename src/Umbraco.Web.UI.Client/src/packages/documents/documents/{modals => picker}/document-picker-modal.token.ts (100%) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/index.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.context.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.context.ts index 7f31b74cf7..e142386382 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.context.ts @@ -1,5 +1,5 @@ -import type { UmbDocumentPickerModalData, UmbDocumentPickerModalValue } from '../../modals/index.js'; -import { UMB_DOCUMENT_PICKER_MODAL } from '../../modals/index.js'; +import type { UmbDocumentPickerModalData, UmbDocumentPickerModalValue } from '../../picker/index.js'; +import { UMB_DOCUMENT_PICKER_MODAL } from '../../picker/index.js'; import { UMB_DOCUMENT_ITEM_REPOSITORY_ALIAS } from '../../repository/index.js'; import type { UmbDocumentItemModel } from '../../repository/index.js'; import type { UmbDocumentTreeItemModel } from '../../tree/types.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/index.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/index.ts index 16628f33b6..cd01660773 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/index.ts @@ -12,6 +12,7 @@ export * from './reference/index.js'; export * from './repository/index.js'; export * from './user-permissions/index.js'; export * from './workspace/index.js'; +export * from './picker/index.js'; export * from './tree/index.js'; export { UMB_CONTENT_MENU_ALIAS } from './menu/manifests.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/index.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/index.ts index 5730bfbf75..06f584c66b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/index.ts @@ -4,5 +4,4 @@ export * from './save-modal/index.js'; export * from './unpublish-modal/index.js'; export * from './schedule-modal/index.js'; export * from './shared/index.js'; -export * from './document-picker-modal.token.js'; export type * from './types.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/document-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/document-picker-modal.token.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/document-picker-modal.token.ts rename to src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/document-picker-modal.token.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/index.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/index.ts new file mode 100644 index 0000000000..822da85065 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/index.ts @@ -0,0 +1 @@ +export * from './document-picker-modal.token.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/recycle-bin/entity-action/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/recycle-bin/entity-action/manifests.ts index 7aa3d7932b..6afbe3525a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/recycle-bin/entity-action/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/recycle-bin/entity-action/manifests.ts @@ -2,7 +2,7 @@ import { UMB_DOCUMENT_RECYCLE_BIN_REPOSITORY_ALIAS } from '../repository/index.j import { UMB_DOCUMENT_ENTITY_TYPE } from '../../entity.js'; import { UMB_DOCUMENT_ITEM_REPOSITORY_ALIAS } from '../../repository/index.js'; import { UMB_DOCUMENT_RECYCLE_BIN_ROOT_ENTITY_TYPE } from '../entity.js'; -import { UMB_DOCUMENT_PICKER_MODAL } from '../../modals/document-picker-modal.token.js'; +import { UMB_DOCUMENT_PICKER_MODAL } from '../../picker/index.js'; import { UMB_USER_PERMISSION_DOCUMENT_DELETE, UMB_USER_PERMISSION_DOCUMENT_MOVE, diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/user-permissions/input-document-granular-user-permission/input-document-granular-user-permission.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/user-permissions/input-document-granular-user-permission/input-document-granular-user-permission.element.ts index 6ab1ecd687..78954fe3b7 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/user-permissions/input-document-granular-user-permission/input-document-granular-user-permission.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/user-permissions/input-document-granular-user-permission/input-document-granular-user-permission.element.ts @@ -1,6 +1,6 @@ import type { UmbDocumentUserPermissionModel } from '../types.js'; import { UmbDocumentItemRepository, type UmbDocumentItemModel } from '../../repository/index.js'; -import { UMB_DOCUMENT_PICKER_MODAL } from '../../modals/index.js'; +import { UMB_DOCUMENT_PICKER_MODAL } from '../../picker/index.js'; import { css, customElement, html, repeat, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import type { UmbModalManagerContext } from '@umbraco-cms/backoffice/modal'; From 0604f0e6785c8b3a8e658f37108708927bff677b Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 13 Aug 2024 20:06:53 +0200 Subject: [PATCH 016/102] register document picker search result item --- .../src/packages/documents/documents/manifests.ts | 7 +++++-- .../packages/documents/documents/picker/manifests.ts | 10 ++++++++++ 2 files changed, 15 insertions(+), 2 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/manifests.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/manifests.ts index 66981bdf87..3fb3e70336 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/manifests.ts @@ -4,6 +4,7 @@ import { manifests as entityBulkActionManifests } from './entity-bulk-actions/ma import { manifests as globalContextManifests } from './global-contexts/manifests.js'; import { manifests as menuManifests } from './menu/manifests.js'; import { manifests as modalManifests } from './modals/manifests.js'; +import { manifests as pickerManifests } from './picker/manifests.js'; import { manifests as propertyEditorManifests } from './property-editors/manifests.js'; import { manifests as recycleBinManifests } from './recycle-bin/manifests.js'; import { manifests as repositoryManifests } from './repository/manifests.js'; @@ -12,15 +13,17 @@ import { manifests as trackedReferenceManifests } from './reference/manifests.js import { manifests as treeManifests } from './tree/manifests.js'; import { manifests as userPermissionManifests } from './user-permissions/manifests.js'; import { manifests as workspaceManifests } from './workspace/manifests.js'; -import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry'; -export const manifests: Array = [ +import type { ManifestTypes, UmbBackofficeManifestKind } from '@umbraco-cms/backoffice/extension-registry'; + +export const manifests: Array = [ ...collectionManifests, ...entityActionManifests, ...entityBulkActionManifests, ...globalContextManifests, ...menuManifests, ...modalManifests, + ...pickerManifests, ...propertyEditorManifests, ...recycleBinManifests, ...repositoryManifests, diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/manifests.ts new file mode 100644 index 0000000000..88e1ef42a2 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/manifests.ts @@ -0,0 +1,10 @@ +import type { ManifestTypes, UmbBackofficeManifestKind } from '@umbraco-cms/backoffice/extension-registry'; + +export const manifests: Array = [ + { + type: 'pickerSearchResultItem', + alias: 'Umb.PickerSearchResultItem.Document', + name: 'Document Picker Search Result Item', + element: () => import('./document-picker-search-result-item.element.js'), + }, +]; From d94f98caf35735d6b9f9b0464407c3d98fc25fd4 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 14 Aug 2024 13:07:54 +0200 Subject: [PATCH 017/102] add picker module + picker search result item element --- src/Umbraco.Web.UI.Client/package.json | 1 + .../src/packages/core/picker/index.ts | 1 + .../src/packages/core/picker/search/index.ts | 1 + .../core/picker/search/result-item/index.ts | 1 + .../picker-search-result-item.element.ts | 57 +++++++++++++++++++ src/Umbraco.Web.UI.Client/tsconfig.json | 1 + 6 files changed, 62 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/picker/index.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/picker/search/index.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/index.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/picker-search-result-item.element.ts diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json index adca9e8ed9..10bff7284d 100644 --- a/src/Umbraco.Web.UI.Client/package.json +++ b/src/Umbraco.Web.UI.Client/package.json @@ -28,6 +28,7 @@ "./content-type": "./dist-cms/packages/core/content-type/index.js", "./content": "./dist-cms/packages/core/content/index.js", "./culture": "./dist-cms/packages/core/culture/index.js", + "./picker": "./dist-cms/packages/core/picker/index.js", "./current-user": "./dist-cms/packages/user/current-user/index.js", "./data-type": "./dist-cms/packages/data-type/index.js", "./debug": "./dist-cms/packages/core/debug/index.js", diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/index.ts new file mode 100644 index 0000000000..a5fa9b02d4 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/index.ts @@ -0,0 +1 @@ +export * from './search/index.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/index.ts new file mode 100644 index 0000000000..e214d22c42 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/index.ts @@ -0,0 +1 @@ +export * from './result-item/index.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/index.ts new file mode 100644 index 0000000000..f8662c50d0 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/index.ts @@ -0,0 +1 @@ +export * from './picker-search-result-item.element.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/picker-search-result-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/picker-search-result-item.element.ts new file mode 100644 index 0000000000..f26a04f3c9 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/picker-search-result-item.element.ts @@ -0,0 +1,57 @@ +import { customElement, property } from '@umbraco-cms/backoffice/external/lit'; +import type { ManifestTreeItem } from '@umbraco-cms/backoffice/extension-registry'; +import { + UmbExtensionElementAndApiSlotElementBase, + umbExtensionsRegistry, +} from '@umbraco-cms/backoffice/extension-registry'; +import { createObservablePart } from '@umbraco-cms/backoffice/observable-api'; + +const elementName = 'umb-picker-search-result-item'; +@customElement(elementName) +export class UmbPickerSearchResultItemElement extends UmbExtensionElementAndApiSlotElementBase { + _entityType?: string; + @property({ type: String, reflect: true }) + get entityType() { + return this._entityType; + } + set entityType(newVal) { + this._entityType = newVal; + this.#observeEntityType(); + } + + #observeEntityType() { + if (!this._entityType) return; + + const filterByEntityType = (manifest: ManifestTreeItem) => { + if (!this._entityType) return false; + return manifest.forEntityTypes.includes(this._entityType); + }; + + this.observe( + // TODO: what should we do if there are multiple items for an entity type? + // This method gets all extensions based on a type, then filters them based on the entity type. and then we get the alias of the first one [NL] + createObservablePart( + umbExtensionsRegistry.byTypeAndFilter(this.getExtensionType(), filterByEntityType), + (x) => x[0].alias, + ), + (alias) => { + this.alias = alias; + }, + 'umbObserveAlias', + ); + } + + getExtensionType() { + return 'pickerSearchResultItem'; + } + + getDefaultElementName() { + return 'umb-default-picker-search-result-item'; + } +} + +declare global { + interface HTMLElementTagNameMap { + [elementName]: UmbPickerSearchResultItemElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/tsconfig.json b/src/Umbraco.Web.UI.Client/tsconfig.json index 715ff5c48d..13058d558f 100644 --- a/src/Umbraco.Web.UI.Client/tsconfig.json +++ b/src/Umbraco.Web.UI.Client/tsconfig.json @@ -54,6 +54,7 @@ DON'T EDIT THIS FILE DIRECTLY. It is generated by /devops/tsconfig/index.js "@umbraco-cms/backoffice/content-type": ["./src/packages/core/content-type/index.ts"], "@umbraco-cms/backoffice/content": ["./src/packages/core/content/index.ts"], "@umbraco-cms/backoffice/culture": ["./src/packages/core/culture/index.ts"], + "@umbraco-cms/backoffice/picker": ["./src/packages/core/picker/index.ts"], "@umbraco-cms/backoffice/current-user": ["./src/packages/user/current-user/index.ts"], "@umbraco-cms/backoffice/data-type": ["./src/packages/data-type/index.ts"], "@umbraco-cms/backoffice/debug": ["./src/packages/core/debug/index.ts"], From aa4968c061adbf2db357bb3a1539468e401bc768 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 14 Aug 2024 13:08:24 +0200 Subject: [PATCH 018/102] register document picker search result item --- .../tree-picker/tree-picker-modal.element.ts | 7 +++- ...ument-picker-search-result-item.context.ts | 10 ++++++ ...ument-picker-search-result-item.element.ts | 36 +++++++++++++++++++ .../documents/documents/picker/manifests.ts | 3 ++ 4 files changed, 55 insertions(+), 1 deletion(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/document-picker-search-result-item.context.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/document-picker-search-result-item.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts index edd16dae04..4a447be4c9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts @@ -245,7 +245,12 @@ export class UmbTreePickerModalElement `; + return html` + + `; } static override styles = [ diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/document-picker-search-result-item.context.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/document-picker-search-result-item.context.ts new file mode 100644 index 0000000000..4fd318b5c0 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/document-picker-search-result-item.context.ts @@ -0,0 +1,10 @@ +import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; +import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; + +export class UmbDocumentPickerSearchResultItemContext extends UmbContextBase { + constructor(host: UmbControllerHost) { + super(host, 'pickerSearchResultItem'); + } +} + +export { UmbDocumentPickerSearchResultItemContext as api }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/document-picker-search-result-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/document-picker-search-result-item.element.ts new file mode 100644 index 0000000000..bde3d6c9d4 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/document-picker-search-result-item.element.ts @@ -0,0 +1,36 @@ +import type { UmbDocumentItemModel } from '../repository/item/types.js'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { css, customElement, html, nothing, property } from '@umbraco-cms/backoffice/external/lit'; +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; + +const elementName = 'umb-document-picker-search-result-item'; +@customElement(elementName) +export class UmbDocumentPickerSearchResultItemElement extends UmbLitElement { + @property({ type: Object }) + item?: UmbDocumentItemModel; + + override render() { + if (!this.item) return nothing; + + return html` + + ${this.#renderIcon()} + + `; + } + + #renderIcon() { + if (!this.item?.documentType.icon) return nothing; + return html``; + } + + static override styles = [UmbTextStyles, css``]; +} + +export { UmbDocumentPickerSearchResultItemElement as element }; + +declare global { + interface HTMLElementTagNameMap { + [elementName]: UmbDocumentPickerSearchResultItemElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/manifests.ts index 88e1ef42a2..2db7b348d4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/manifests.ts @@ -1,3 +1,4 @@ +import { UMB_DOCUMENT_ENTITY_TYPE } from '../entity.js'; import type { ManifestTypes, UmbBackofficeManifestKind } from '@umbraco-cms/backoffice/extension-registry'; export const manifests: Array = [ @@ -6,5 +7,7 @@ export const manifests: Array = [ alias: 'Umb.PickerSearchResultItem.Document', name: 'Document Picker Search Result Item', element: () => import('./document-picker-search-result-item.element.js'), + api: () => import('./document-picker-search-result-item.context.js'), + forEntityTypes: [UMB_DOCUMENT_ENTITY_TYPE], }, ]; From b229ca00ee885f5b8b7d5211595b071ea3bd8ca3 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Wed, 14 Aug 2024 14:13:54 +0200 Subject: [PATCH 019/102] import export of media types --- .../entity-actions/export/manifests.ts | 20 +++ .../export/media-type-export.action.ts | 18 ++ .../export/repository/constants.ts | 1 + .../entity-actions/export/repository/index.ts | 2 + .../export/repository/manifests.ts | 11 ++ .../media-type-export.repository.ts | 21 +++ .../media-type-export.server.data-source.ts | 33 ++++ .../entity-actions/import/manifests.ts | 21 +++ .../import/media-type-import.action.ts | 15 ++ .../entity-actions/import/modal/index.ts | 1 + .../entity-actions/import/modal/manifests.ts | 10 ++ .../modal/media-type-import-modal.element.ts | 170 ++++++++++++++++++ .../modal/media-type-import-modal.token.ts | 17 ++ .../import/repository/constants.ts | 1 + .../entity-actions/import/repository/index.ts | 2 + .../import/repository/manifests.ts | 11 ++ .../media-type-import.repository.ts | 21 +++ .../media-type-import.server.data-source.ts | 37 ++++ .../media-types/entity-actions/manifests.ts | 4 + 19 files changed, 416 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/export/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/export/media-type-export.action.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/export/repository/constants.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/export/repository/index.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/export/repository/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/export/repository/media-type-export.repository.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/export/repository/media-type-export.server.data-source.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/media-type-import.action.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/modal/index.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/modal/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/modal/media-type-import-modal.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/modal/media-type-import-modal.token.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/repository/constants.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/repository/index.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/repository/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/repository/media-type-import.repository.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/repository/media-type-import.server.data-source.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/export/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/export/manifests.ts new file mode 100644 index 0000000000..a879adb201 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/export/manifests.ts @@ -0,0 +1,20 @@ +import { UMB_MEDIA_TYPE_ENTITY_TYPE } from '../../entity.js'; +import { manifests as repositoryManifests } from './repository/manifests.js'; +import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry'; + +const entityActions: Array = [ + { + type: 'entityAction', + kind: 'default', + alias: 'Umb.EntityAction.MediaType.Export', + name: 'Export Media Type Entity Action', + forEntityTypes: [UMB_MEDIA_TYPE_ENTITY_TYPE], + api: () => import('./media-type-export.action.js'), + meta: { + icon: 'icon-download-alt', + label: '#actions_export', + }, + }, +]; + +export const manifests: Array = [...entityActions, ...repositoryManifests]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/export/media-type-export.action.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/export/media-type-export.action.ts new file mode 100644 index 0000000000..b61d2c2a54 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/export/media-type-export.action.ts @@ -0,0 +1,18 @@ +import { UmbExportMediaTypeRepository } from './repository/index.js'; +import { blobDownload } from '@umbraco-cms/backoffice/utils'; +import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action'; + +export class UmbExportMediaTypeEntityAction extends UmbEntityActionBase { + #repository = new UmbExportMediaTypeRepository(this); + + override async execute() { + if (!this.args.unique) throw new Error('Unique is not available'); + + const data = await this.#repository.requestExport(this.args.unique); + if (!data) return; + + blobDownload(data, `${this.args.unique}.udt`, 'text/xml'); + } +} + +export default UmbExportMediaTypeEntityAction; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/export/repository/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/export/repository/constants.ts new file mode 100644 index 0000000000..e248f4801e --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/export/repository/constants.ts @@ -0,0 +1 @@ +export const UMB_EXPORT_MEDIA_TYPE_REPOSITORY_ALIAS = 'Umb.Repository.MediaType.Export'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/export/repository/index.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/export/repository/index.ts new file mode 100644 index 0000000000..19252269f8 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/export/repository/index.ts @@ -0,0 +1,2 @@ +export { UmbExportMediaTypeRepository } from './media-type-export.repository.js'; +export { UMB_EXPORT_MEDIA_TYPE_REPOSITORY_ALIAS } from './constants.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/export/repository/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/export/repository/manifests.ts new file mode 100644 index 0000000000..e2b0c96286 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/export/repository/manifests.ts @@ -0,0 +1,11 @@ +import { UMB_EXPORT_MEDIA_TYPE_REPOSITORY_ALIAS } from './constants.js'; +import type { ManifestRepository, ManifestTypes } from '@umbraco-cms/backoffice/extension-registry'; + +const exportRepository: ManifestRepository = { + type: 'repository', + alias: UMB_EXPORT_MEDIA_TYPE_REPOSITORY_ALIAS, + name: 'Export Media Type Repository', + api: () => import('./media-type-export.repository.js'), +}; + +export const manifests: Array = [exportRepository]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/export/repository/media-type-export.repository.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/export/repository/media-type-export.repository.ts new file mode 100644 index 0000000000..8f8c65dbdf --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/export/repository/media-type-export.repository.ts @@ -0,0 +1,21 @@ +import { UmbExportMediaTypeServerDataSource } from './media-type-export.server.data-source.js'; +import { UMB_NOTIFICATION_CONTEXT } from '@umbraco-cms/backoffice/notification'; +import { UmbRepositoryBase } from '@umbraco-cms/backoffice/repository'; + +export class UmbExportMediaTypeRepository extends UmbRepositoryBase { + #exportSource = new UmbExportMediaTypeServerDataSource(this); + + async requestExport(unique: string) { + const { data, error } = await this.#exportSource.export(unique); + + if (!error) { + const notificationContext = await this.getContext(UMB_NOTIFICATION_CONTEXT); + const notification = { data: { message: `Exported` } }; + notificationContext.peek('positive', notification); + } + + return { data, error }; + } +} + +export { UmbExportMediaTypeRepository as api }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/export/repository/media-type-export.server.data-source.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/export/repository/media-type-export.server.data-source.ts new file mode 100644 index 0000000000..7a23bc2fe4 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/export/repository/media-type-export.server.data-source.ts @@ -0,0 +1,33 @@ +import { MediaTypeService } from '@umbraco-cms/backoffice/external/backend-api'; +import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; +import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources'; + +/** + * Export Media Server Data Source + * @export + * @class UmbExportMediaTypeServerDataSource + */ +export class UmbExportMediaTypeServerDataSource { + #host: UmbControllerHost; + + /** + * Creates an instance of UmbExportMediaTypeServerDataSource. + * @param {UmbControllerHost} host + * @memberof UmbExportMediaTypeServerDataSource + */ + constructor(host: UmbControllerHost) { + this.#host = host; + } + + /** + * Export an item for the given id to the destination unique + * @param {unique} unique + * @returns {*} + * @memberof UmbExportMediaTypeServerDataSource + */ + async export(unique: string) { + if (!unique) throw new Error('Unique is missing'); + + return tryExecuteAndNotify(this.#host, MediaTypeService.getMediaTypeByIdExport({ id: unique })); + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/manifests.ts new file mode 100644 index 0000000000..ccf24cd365 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/manifests.ts @@ -0,0 +1,21 @@ +import { UMB_MEDIA_TYPE_ROOT_ENTITY_TYPE } from '../../entity.js'; +import { manifests as repositoryManifests } from './repository/manifests.js'; +import { manifests as modalManifests } from './modal/manifests.js'; +import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry'; + +const entityActions: Array = [ + { + type: 'entityAction', + kind: 'default', + alias: 'Umb.EntityAction.MediaType.Import', + name: 'Export Media Type Entity Action', + forEntityTypes: [UMB_MEDIA_TYPE_ROOT_ENTITY_TYPE], + api: () => import('./media-type-import.action.js'), + meta: { + icon: 'icon-page-up', + label: '#actions_import', + }, + }, +]; + +export const manifests: Array = [...entityActions, ...repositoryManifests, ...modalManifests]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/media-type-import.action.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/media-type-import.action.ts new file mode 100644 index 0000000000..31a026a9f6 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/media-type-import.action.ts @@ -0,0 +1,15 @@ +import { UMB_MEDIA_TYPE_IMPORT_MODAL } from './modal/media-type-import-modal.token.js'; +import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action'; +import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal'; + +export class UmbImportMediaTypeEntityAction extends UmbEntityActionBase { + override async execute() { + const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT); + const modalContext = modalManager.open(this, UMB_MEDIA_TYPE_IMPORT_MODAL, { + data: { unique: this.args.unique }, + }); + await modalContext.onSubmit().catch(() => {}); + } +} + +export default UmbImportMediaTypeEntityAction; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/modal/index.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/modal/index.ts new file mode 100644 index 0000000000..7d34d24e30 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/modal/index.ts @@ -0,0 +1 @@ +export * from './media-type-import-modal.token.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/modal/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/modal/manifests.ts new file mode 100644 index 0000000000..71d2eebc8f --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/modal/manifests.ts @@ -0,0 +1,10 @@ +import type { ManifestModal } from '@umbraco-cms/backoffice/extension-registry'; + +export const manifests: Array = [ + { + type: 'modal', + alias: 'Umb.Modal.MediaType.Import', + name: 'Media Type Import Modal', + element: () => import('./media-type-import-modal.element.js'), + }, +]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/modal/media-type-import-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/modal/media-type-import-modal.element.ts new file mode 100644 index 0000000000..55029ffdb5 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/modal/media-type-import-modal.element.ts @@ -0,0 +1,170 @@ +import { UmbMediaTypeImportRepository } from '../repository/media-type-import.repository.js'; +import type { UmbMediaTypeImportModalData, UmbMediaTypeImportModalValue } from './media-type-import-modal.token.js'; +import { css, html, customElement, query, state, when } from '@umbraco-cms/backoffice/external/lit'; +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; +import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal'; +import type { UmbDropzoneElement } from '@umbraco-cms/backoffice/media'; + +interface UmbMediaTypePreview { + unique: string; + name: string; + alias: string; + icon: string; +} + +@customElement('umb-media-type-import-modal') +export class UmbMediaTypeImportModalLayout extends UmbModalBaseElement< + UmbMediaTypeImportModalData, + UmbMediaTypeImportModalValue +> { + #MediaTypeImportRepository = new UmbMediaTypeImportRepository(this); + #temporaryUnique?: string; + #fileReader; + + @state() + private _fileContent: Array = []; + + @query('#dropzone') + private dropzone?: UmbDropzoneElement; + + constructor() { + super(); + this.#fileReader = new FileReader(); + this.#fileReader.onload = (e) => { + if (typeof e.target?.result === 'string') { + const fileContent = e.target.result; + this.#MediaTypePreviewBuilder(fileContent); + } else { + this.#requestReset(); + } + }; + } + + #onFileDropped() { + const data = this.dropzone?.getFiles()[0]; + if (!data) return; + + this.#temporaryUnique = data.temporaryUnique; + this.#fileReader.readAsText(data.file); + } + + async #onFileImport() { + if (!this.#temporaryUnique) return; + const { error } = await this.#MediaTypeImportRepository.requestImport(this.#temporaryUnique); + if (error) return; + this._submitModal(); + } + + #MediaTypePreviewBuilder(htmlString: string) { + const parser = new DOMParser(); + const doc = parser.parseFromString(htmlString, 'text/xml'); + const childNodes = doc.childNodes; + + const elements: Array = []; + + childNodes.forEach((node) => { + if (node.nodeType === Node.ELEMENT_NODE && node.nodeName === 'MediaType') { + elements.push(node as Element); + } + }); + + this._fileContent = this.#MediaTypePreviewItemBuilder(elements); + } + + #MediaTypePreviewItemBuilder(elements: Array) { + const mediaTypes: Array = []; + elements.forEach((MediaType) => { + const info = MediaType.getElementsByTagName('Info')[0]; + const unique = info.getElementsByTagName('Key')[0].textContent ?? ''; + const name = info.getElementsByTagName('Name')[0].textContent ?? ''; + const alias = info.getElementsByTagName('Alias')[0].textContent ?? ''; + const icon = info.getElementsByTagName('Icon')[0].textContent ?? ''; + + mediaTypes.push({ unique, name, alias, icon }); + }); + return mediaTypes; + } + + #requestReset() { + this._fileContent = []; + this.#temporaryUnique = undefined; + } + + async #onBrowse() { + this.dropzone?.browse(); + } + + override render() { + return html` + ${this.#renderUploadZone()} + + + `; + } + + #renderUploadZone() { + return html` + ${when( + this._fileContent.length, + () => + html` + + + `, + () => + /**TODO Add localizations */ + html`
+ Drag and drop your file here + + +
`, + )} + `; + } + + static override styles = [ + UmbTextStyles, + css` + #wrapper { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + position: relative; + gap: var(--uui-size-space-3); + border: 2px dashed var(--uui-color-divider-standalone); + background-color: var(--uui-color-surface-alt); + padding: var(--uui-size-space-6); + } + + #import { + margin-top: var(--uui-size-space-6); + } + `, + ]; +} + +export default UmbMediaTypeImportModalLayout; + +declare global { + interface HTMLElementTagNameMap { + 'umb-media-type-import-modal': UmbMediaTypeImportModalLayout; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/modal/media-type-import-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/modal/media-type-import-modal.token.ts new file mode 100644 index 0000000000..2b76b49a79 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/modal/media-type-import-modal.token.ts @@ -0,0 +1,17 @@ +import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; + +export interface UmbMediaTypeImportModalData { + unique: string | null; +} + +export interface UmbMediaTypeImportModalValue {} + +export const UMB_MEDIA_TYPE_IMPORT_MODAL = new UmbModalToken( + 'Umb.Modal.MediaType.Import', + { + modal: { + type: 'sidebar', + size: 'small', + }, + }, +); diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/repository/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/repository/constants.ts new file mode 100644 index 0000000000..0da908eb12 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/repository/constants.ts @@ -0,0 +1 @@ +export const UMB_DOCUMENT_TYPE_IMPORT_REPOSITORY_ALIAS = 'Umb.Repository.DocumentType.Import'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/repository/index.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/repository/index.ts new file mode 100644 index 0000000000..02457fbbef --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/repository/index.ts @@ -0,0 +1,2 @@ +export { UmbDocumentTypeImportRepository } from './media-type-import.repository.js'; +export { UMB_DOCUMENT_TYPE_IMPORT_REPOSITORY_ALIAS } from './constants.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/repository/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/repository/manifests.ts new file mode 100644 index 0000000000..f69fc4b453 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/repository/manifests.ts @@ -0,0 +1,11 @@ +import { UMB_DOCUMENT_TYPE_IMPORT_REPOSITORY_ALIAS } from './constants.js'; +import type { ManifestRepository, ManifestTypes } from '@umbraco-cms/backoffice/extension-registry'; + +const importRepository: ManifestRepository = { + type: 'repository', + alias: UMB_DOCUMENT_TYPE_IMPORT_REPOSITORY_ALIAS, + name: 'Import Document Type Repository', + api: () => import('./media-type-import.repository.js'), +}; + +export const manifests: Array = [importRepository]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/repository/media-type-import.repository.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/repository/media-type-import.repository.ts new file mode 100644 index 0000000000..1f13bbe4f5 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/repository/media-type-import.repository.ts @@ -0,0 +1,21 @@ +import { UmbMediaTypeImportServerDataSource } from './media-type-import.server.data-source.js'; +import { UMB_NOTIFICATION_CONTEXT } from '@umbraco-cms/backoffice/notification'; +import { UmbRepositoryBase } from '@umbraco-cms/backoffice/repository'; + +export class UmbMediaTypeImportRepository extends UmbRepositoryBase { + #importSource = new UmbMediaTypeImportServerDataSource(this); + + async requestImport(temporaryUnique: string) { + const { data, error } = await this.#importSource.import(temporaryUnique); + + if (!error) { + const notificationContext = await this.getContext(UMB_NOTIFICATION_CONTEXT); + const notification = { data: { message: `Imported` } }; + notificationContext.peek('positive', notification); + } + + return { data, error }; + } +} + +export { UmbMediaTypeImportRepository as api }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/repository/media-type-import.server.data-source.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/repository/media-type-import.server.data-source.ts new file mode 100644 index 0000000000..c71e44051d --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/repository/media-type-import.server.data-source.ts @@ -0,0 +1,37 @@ +import { MediaTypeService, type PostMediaTypeImportData } from '@umbraco-cms/backoffice/external/backend-api'; +import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; +import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources'; + +/** + * Media Type Import Server Data Source + * @Import + * @class UmbMediaTypeImportServerDataSource + */ +export class UmbMediaTypeImportServerDataSource { + #host: UmbControllerHost; + + /** + * Creates an instance of UmbMediaTypeImportServerDataSource. + * @param {UmbControllerHost} host + * @memberof UmbMediaTypeImportServerDataSource + */ + constructor(host: UmbControllerHost) { + this.#host = host; + } + + /** + * Import an item for the given id to the destination unique + * @param {temporaryUnique} temporaryUnique + * @returns {*} + * @memberof UmbMediaTypeImportServerDataSource + */ + async import(temporaryUnique: string) { + if (!temporaryUnique) throw new Error('Unique is missing'); + + const requestBody: PostMediaTypeImportData = { + requestBody: { file: { id: temporaryUnique } }, + }; + + return tryExecuteAndNotify(this.#host, MediaTypeService.postMediaTypeImport(requestBody)); + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/manifests.ts index 2b726ae1a8..8304c96731 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/manifests.ts @@ -3,6 +3,8 @@ import { UMB_MEDIA_TYPE_DETAIL_REPOSITORY_ALIAS, UMB_MEDIA_TYPE_ITEM_REPOSITORY_ import { manifests as createManifests } from './create/manifests.js'; import { manifests as moveManifests } from './move-to/manifests.js'; import { manifests as duplicateManifests } from './duplicate/manifests.js'; +import { manifests as exportManifests } from './export/manifests.js'; +import { manifests as importManifests } from './import/manifests.js'; import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry'; const entityActions: Array = [ @@ -24,4 +26,6 @@ export const manifests: Array = [ ...createManifests, ...moveManifests, ...duplicateManifests, + ...exportManifests, + ...importManifests, ]; From 9493d25634f9cb872d0f0688a018af7509fc16f9 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Wed, 14 Aug 2024 14:25:22 +0200 Subject: [PATCH 020/102] naming --- .../entity-actions/import/repository/constants.ts | 2 +- .../media-types/entity-actions/import/repository/index.ts | 4 ++-- .../entity-actions/import/repository/manifests.ts | 6 +++--- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/repository/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/repository/constants.ts index 0da908eb12..a990f6ea73 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/repository/constants.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/repository/constants.ts @@ -1 +1 @@ -export const UMB_DOCUMENT_TYPE_IMPORT_REPOSITORY_ALIAS = 'Umb.Repository.DocumentType.Import'; +export const UMB_MEDIA_TYPE_IMPORT_REPOSITORY_ALIAS = 'Umb.Repository.MediaType.Import'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/repository/index.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/repository/index.ts index 02457fbbef..0fe6ef6e20 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/repository/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/repository/index.ts @@ -1,2 +1,2 @@ -export { UmbDocumentTypeImportRepository } from './media-type-import.repository.js'; -export { UMB_DOCUMENT_TYPE_IMPORT_REPOSITORY_ALIAS } from './constants.js'; +export { UmbMediaTypeImportRepository } from './media-type-import.repository.js'; +export { UMB_MEDIA_TYPE_IMPORT_REPOSITORY_ALIAS } from './constants.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/repository/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/repository/manifests.ts index f69fc4b453..d1dd143c9c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/repository/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/repository/manifests.ts @@ -1,10 +1,10 @@ -import { UMB_DOCUMENT_TYPE_IMPORT_REPOSITORY_ALIAS } from './constants.js'; +import { UMB_MEDIA_TYPE_IMPORT_REPOSITORY_ALIAS } from './constants.js'; import type { ManifestRepository, ManifestTypes } from '@umbraco-cms/backoffice/extension-registry'; const importRepository: ManifestRepository = { type: 'repository', - alias: UMB_DOCUMENT_TYPE_IMPORT_REPOSITORY_ALIAS, - name: 'Import Document Type Repository', + alias: UMB_MEDIA_TYPE_IMPORT_REPOSITORY_ALIAS, + name: 'Import Media Type Repository', api: () => import('./media-type-import.repository.js'), }; From 550f9b390bd0e26992af2e6f7bf6722d6c3f623d Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 14 Aug 2024 15:31:18 +0200 Subject: [PATCH 021/102] wip picker modal context --- .../src/packages/core/picker/index.ts | 2 ++ .../core/picker/picker-modal.context.token.ts | 4 ++++ .../src/packages/core/picker/picker-modal.context.ts | 12 ++++++++++++ 3 files changed, 18 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/picker/picker-modal.context.token.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/picker/picker-modal.context.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/index.ts index a5fa9b02d4..9b7375365b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/index.ts @@ -1 +1,3 @@ export * from './search/index.js'; +export * from './picker-modal.context.js'; +export * from './picker-modal.context.token.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/picker-modal.context.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/picker-modal.context.token.ts new file mode 100644 index 0000000000..84381897af --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/picker-modal.context.token.ts @@ -0,0 +1,4 @@ +import type { UmbPickerModalContext } from './picker-modal.context.js'; +import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; + +export const UMB_PICKER_MODAL_CONTEXT = new UmbContextToken('UmbPickerModalContext'); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/picker-modal.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/picker-modal.context.ts new file mode 100644 index 0000000000..a4777834b9 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/picker-modal.context.ts @@ -0,0 +1,12 @@ +import { UMB_PICKER_MODAL_CONTEXT } from './picker-modal.context.token.js'; +import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; +import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; +import { UmbSelectionManager } from '@umbraco-cms/backoffice/utils'; + +export class UmbPickerModalContext extends UmbContextBase { + public readonly selection = new UmbSelectionManager(this); + + constructor(host: UmbControllerHost) { + super(host, UMB_PICKER_MODAL_CONTEXT); + } +} From 251539fdbb440e75eb2a91642b8aee003d83c7fc Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 14 Aug 2024 15:31:35 +0200 Subject: [PATCH 022/102] add tree picker modal context --- .../tree/tree-picker/tree-picker-modal.context.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.context.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.context.ts new file mode 100644 index 0000000000..c80dddb93c --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.context.ts @@ -0,0 +1,11 @@ +import { UmbPickerModalContext } from '@umbraco-cms/backoffice/picker'; +import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; + +export class UmbTreePickerModalContext extends UmbPickerModalContext { + constructor(host: UmbControllerHost) { + super(host); + debugger; + } +} + +export { UmbTreePickerModalContext as api }; From 25dcb36047920f752d4dbccbc5677d1758a51f7b Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 14 Aug 2024 17:36:15 +0200 Subject: [PATCH 023/102] mimic an api coming from a context --- .../tree-picker/tree-picker-modal.element.ts | 41 +++++++++++-------- 1 file changed, 25 insertions(+), 16 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts index 4a447be4c9..7c7339eae4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts @@ -3,13 +3,14 @@ import type { UmbTreePickerModalData, UmbTreePickerModalValue } from './tree-pic import { html, customElement, state, ifDefined, nothing, css, repeat } from '@umbraco-cms/backoffice/external/lit'; import { UMB_WORKSPACE_MODAL, UmbModalBaseElement } from '@umbraco-cms/backoffice/modal'; import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router'; -import { UmbDeselectedEvent, UmbSelectedEvent, UmbSelectionChangeEvent } from '@umbraco-cms/backoffice/event'; -import type { UmbTreeElement, UmbTreeItemModelBase } from '@umbraco-cms/backoffice/tree'; +import { UmbDeselectedEvent, UmbSelectedEvent } from '@umbraco-cms/backoffice/event'; +import type { UmbTreeItemModelBase } from '@umbraco-cms/backoffice/tree'; import { debounce } from '@umbraco-cms/backoffice/utils'; import type { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { createExtensionApiByAlias } from '@umbraco-cms/backoffice/extension-registry'; import type { UmbSearchProvider } from '@umbraco-cms/backoffice/search'; +import { UmbTreePickerModalContext } from './tree-picker-modal.context.js'; @customElement('umb-tree-picker-modal') export class UmbTreePickerModalElement extends UmbModalBaseElement< @@ -43,40 +44,49 @@ export class UmbTreePickerModalElement { + this.updateValue({ selection }); + this.requestUpdate(); + }, + 'umbSelectionObserver', + ); + } + override connectedCallback() { super.connectedCallback(); // TODO: We should make a nicer way to observe the value.. [NL] // This could be by observing when the modalCOntext gets set. [NL] - if (this.modalContext) { - this.observe(this.modalContext.value, (value) => { - this._selectionConfiguration.selection = value?.selection ?? []; - }); - } + this._selectionConfiguration.selection = this.value?.selection ?? []; + this.#api.selection.setSelection(this.value?.selection ?? []); // Same here [NL] this._selectionConfiguration.multiple = this.data?.multiple ?? false; + this.#api.selection.setMultiple(this.data?.multiple ?? false); + this.#api.selection.setSelectable(true); this.#initCreateAction(); this.#initSearch(); } - // Selection - - #onSelectionChange(event: UmbSelectionChangeEvent) { - event.stopPropagation(); - const element = event.target as UmbTreeElement; - this.value = { selection: element.getSelection() }; - this.modalContext?.dispatchEvent(new UmbSelectionChangeEvent()); - } + // Tree Selection #onSelected(event: UmbSelectedEvent) { event.stopPropagation(); + this.#api.selection.select(event.unique); this.modalContext?.dispatchEvent(new UmbSelectedEvent(event.unique)); } #onDeselected(event: UmbDeselectedEvent) { event.stopPropagation(); + this.#api.selection.deselect(event.unique); this.modalContext?.dispatchEvent(new UmbDeselectedEvent(event.unique)); } @@ -194,7 +204,6 @@ export class UmbTreePickerModalElement `; From 532980e2c338a3e77985f6f525dc0d665980a300 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 14 Aug 2024 21:27:47 +0200 Subject: [PATCH 024/102] add picker modal search manager --- .../manager/picker-modal-search.manager.ts | 117 ++++++++++++++++++ 1 file changed, 117 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/picker-modal-search.manager.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/picker-modal-search.manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/picker-modal-search.manager.ts new file mode 100644 index 0000000000..cf8f01acc3 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/picker-modal-search.manager.ts @@ -0,0 +1,117 @@ +import type { UmbPickerModalSearchManagerConfig } from './types.js'; +import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api'; +import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; +import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; +import { createExtensionApiByAlias } from '@umbraco-cms/backoffice/extension-registry'; +import { UmbArrayState, UmbBooleanState, UmbObjectState } from '@umbraco-cms/backoffice/observable-api'; +import type { UmbSearchProvider, UmbSearchRequestArgs } from '@umbraco-cms/backoffice/search'; +import { debounce } from '@umbraco-cms/backoffice/utils'; + +/** + * A manager for searching items in a picker modal. + * @exports + * @class UmbPickerModalSearchManager + * @augments {UmbControllerBase} + * @template ResultItemType + * @template QueryType + */ +export class UmbPickerModalSearchManager< + ResultItemType extends UmbEntityModel = UmbEntityModel, + QueryType extends UmbSearchRequestArgs = UmbSearchRequestArgs, +> extends UmbControllerBase { + #query = new UmbObjectState(undefined); + public readonly query = this.#query.asObservable(); + + #searching = new UmbBooleanState(false); + public readonly searching = this.#searching.asObservable(); + + #resultItems = new UmbArrayState([], (x) => x.unique); + public readonly resultItems = this.#resultItems.asObservable(); + + #config?: UmbPickerModalSearchManagerConfig; + // TODO: lower requirement for search provider item type + #searchProvider?: UmbSearchProvider; + + /** + * Creates an instance of UmbPickerModalSearchManager. + * @param {UmbControllerHost} host The controller host for the search manager. + * @memberof UmbPickerModalSearchManager + */ + constructor(host: UmbControllerHost) { + super(host); + } + + /** + * Set the configuration for the search manager. + * @param {UmbPickerModalSearchManagerConfig} config The configuration for the search manager. + * @memberof UmbPickerModalSearchManager + */ + public setConfig(config: UmbPickerModalSearchManagerConfig) { + this.#config = config; + this.#initSearch(); + } + + /** + * Get the current configuration for the search manager. + * @returns {UmbPickerModalSearchManagerConfig | undefined} The current configuration for the search manager. + * @memberof UmbPickerModalSearchManager + */ + public getConfig(): UmbPickerModalSearchManagerConfig | undefined { + return this.#config; + } + + /** + * Search for items based on the current query. + * @memberof UmbPickerModalSearchManager + */ + public search = debounce(this.#debouncedSearch, 300); + + /** + * Clear the current search query and result items. + * @memberof UmbPickerModalSearchManager + */ + public clear() { + this.#query.setValue(undefined); + this.#resultItems.setValue([]); + this.#searching.setValue(false); + } + + /** + * Set the search query. + * @param {QueryType} query The search query. + * @memberof UmbPickerModalSearchManager + */ + public setQuery(query: QueryType) { + if (!this.query) { + this.clear(); + return; + } + + this.#query.setValue(query); + } + + /** + * Get the current search query. + * @memberof UmbPickerModalSearchManager + * @returns {QueryType | undefined} The current search query. + */ + public getQuery(): QueryType | undefined { + return this.#query.getValue(); + } + + async #initSearch() { + const providerAlias = this.#config?.providerAlias; + if (!providerAlias) throw new Error('No search provider alias provided'); + this.#searchProvider = await createExtensionApiByAlias(this, providerAlias); + if (!this.#searchProvider) throw new Error(`Search Provider with alias ${providerAlias} is not available`); + } + + async #debouncedSearch() { + if (!this.#searchProvider) throw new Error('Search provider is not available'); + const query = this.#query.getValue(); + if (!query) throw new Error('No query provided'); + const { data } = await this.#searchProvider.search(query); + this.#resultItems.setValue(data?.items ?? []); + this.#searching.setValue(false); + } +} From 196bbc709c847fa6bcc36cea8f70ed0542305760 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 14 Aug 2024 21:27:57 +0200 Subject: [PATCH 025/102] export from module --- .../src/packages/core/picker/search/manager/index.ts | 2 ++ .../src/packages/core/picker/search/manager/types.ts | 3 +++ 2 files changed, 5 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/index.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/types.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/index.ts new file mode 100644 index 0000000000..c5be7c8813 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/index.ts @@ -0,0 +1,2 @@ +export * from './picker-modal-search.manager.js'; +export * from './types.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/types.ts new file mode 100644 index 0000000000..b51bd1e30e --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/types.ts @@ -0,0 +1,3 @@ +export interface UmbPickerModalSearchManagerConfig { + providerAlias: string; +} From 68678e75bd1ba660f0a3614fc6ad3d9c8c4bd679 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 14 Aug 2024 21:28:39 +0200 Subject: [PATCH 026/102] split search into components --- .../src/packages/core/picker/search/index.ts | 3 + .../picker-modal-search-result.element.ts | 69 +++++++ .../search/picker-modal-search.element.ts | 85 +++++++++ .../tree-picker/tree-picker-modal.element.ts | 173 +++--------------- .../src/packages/search/types.ts | 9 +- 5 files changed, 186 insertions(+), 153 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-modal-search-result.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-modal-search.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/index.ts index e214d22c42..5d91395614 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/index.ts @@ -1 +1,4 @@ +export * from './manager/index.js'; +export * from './picker-modal-search-result.element.js'; +export * from './picker-modal-search.element.js'; export * from './result-item/index.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-modal-search-result.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-modal-search-result.element.ts new file mode 100644 index 0000000000..6c4e803024 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-modal-search-result.element.ts @@ -0,0 +1,69 @@ +import { UMB_PICKER_MODAL_CONTEXT } from '../picker-modal.context.token.js'; +import type { UmbPickerModalContext } from '../picker-modal.context.js'; +import { customElement, html, repeat, state } from '@umbraco-cms/backoffice/external/lit'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; + +const elementName = 'umb-picker-modal-search-result'; +@customElement(elementName) +export class UmbPickerModalSearchResultElement extends UmbLitElement { + @state() + _query: unknown; + + @state() + _searching: boolean = false; + + @state() + _items: unknown[] = []; + + #pickerModalContext?: UmbPickerModalContext; + + constructor() { + super(); + + this.consumeContext(UMB_PICKER_MODAL_CONTEXT, (context) => { + this.#pickerModalContext = context; + + this.observe(this.#pickerModalContext.search.query, (query) => { + this._query = query; + }); + + this.observe(this.#pickerModalContext.search.searching, (query) => { + this._searching = query; + }); + + this.observe(this.#pickerModalContext.search.resultItems, (items) => { + this._items = items; + }); + }); + } + + override render(): unknown { + if (this._query && this._searching === false && this._items.length === 0) { + return this.#renderEmptyResult(); + } + + return html` + ${repeat( + this._items, + (item: any) => item.unique, + (item: any) => this.#renderResultItem(item), + )} + `; + } + + #renderEmptyResult() { + return html`No result for "${this._query}".`; + } + + #renderResultItem(item: any) { + return html` + + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + [elementName]: UmbPickerModalSearchResultElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-modal-search.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-modal-search.element.ts new file mode 100644 index 0000000000..56273e6259 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-modal-search.element.ts @@ -0,0 +1,85 @@ +import type { UmbPickerModalContext } from '../picker-modal.context.js'; +import { UMB_PICKER_MODAL_CONTEXT } from '../picker-modal.context.token.js'; +import type { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; +import { html, customElement, state, nothing, css } from '@umbraco-cms/backoffice/external/lit'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; + +const elementName = 'umb-picker-modal-search'; +@customElement(elementName) +export class UmbPickerModalSearchElement extends UmbLitElement { + @state() + _query: string = ''; + + @state() + _searching: boolean = false; + + #pickerModalContext?: UmbPickerModalContext; + + constructor() { + super(); + + this.consumeContext(UMB_PICKER_MODAL_CONTEXT, (context) => { + this.#pickerModalContext = context; + + this.observe(this.#pickerModalContext.search.searching, (searching) => { + this._searching = searching; + }); + }); + } + + #onInput(event: UUIInputEvent) { + const value = event.target.value as string; + this.#pickerModalContext?.search.setQuery({ query: value }); + this.#pickerModalContext?.search.search(); + } + + override render() { + return html` + +
+ ${this._searching + ? html`` + : html``} +
+ + ${this._query + ? html` + this.#pickerModalContext?.search.clear()} compact> + + + ` + : nothing} + +
+ `; + } + + static override styles = [ + UmbTextStyles, + css` + uui-input { + width: 100%; + } + + #divider { + width: 100%; + height: 1px; + background-color: var(--uui-color-divider); + margin-top: var(--uui-size-space-5); + margin-bottom: var(--uui-size-space-3); + } + + #searching-indicator { + margin-left: 7px; + margin-top: 4px; + } + `, + ]; +} + +declare global { + interface HTMLElementTagNameMap { + [elementName]: UmbPickerModalSearchElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts index 7c7339eae4..2f1102c083 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts @@ -1,16 +1,11 @@ import type { UmbTreeSelectionConfiguration } from '../types.js'; import type { UmbTreePickerModalData, UmbTreePickerModalValue } from './tree-picker-modal.token.js'; -import { html, customElement, state, ifDefined, nothing, css, repeat } from '@umbraco-cms/backoffice/external/lit'; +import { UmbTreePickerModalContext } from './tree-picker-modal.context.js'; +import { html, customElement, state, ifDefined, nothing } from '@umbraco-cms/backoffice/external/lit'; import { UMB_WORKSPACE_MODAL, UmbModalBaseElement } from '@umbraco-cms/backoffice/modal'; import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router'; import { UmbDeselectedEvent, UmbSelectedEvent } from '@umbraco-cms/backoffice/event'; import type { UmbTreeItemModelBase } from '@umbraco-cms/backoffice/tree'; -import { debounce } from '@umbraco-cms/backoffice/utils'; -import type { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; -import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { createExtensionApiByAlias } from '@umbraco-cms/backoffice/extension-registry'; -import type { UmbSearchProvider } from '@umbraco-cms/backoffice/search'; -import { UmbTreePickerModalContext } from './tree-picker-modal.context.js'; @customElement('umb-tree-picker-modal') export class UmbTreePickerModalElement extends UmbModalBaseElement< @@ -30,20 +25,6 @@ export class UmbTreePickerModalElement = []; - - @state() - private _searching = false; - - #searchProvider?: any; - // TODO: find a way to implement through the manifest api field #api = new UmbTreePickerModalContext(this); @@ -73,7 +54,6 @@ export class UmbTreePickerModalElement(this, search.providerAlias); - if (!this.#searchProvider) throw new Error(`Search Provider with alias ${search.providerAlias} is not available`); - - this._searchIsEnabled = true; - } - - #onSearchInput(event: UUIInputEvent) { - const value = event.target.value as string; - this._searchQuery = value; - - if (!this._searchQuery) { - this._searchResult = []; - this._searching = false; - return; - } - - this._searching = true; - this.#debouncedSearch(); - } - - #debouncedSearch = debounce(this.#search, 300); - - async #search() { - if (!this._searchQuery) return; - const { data } = await this.#searchProvider.search({ query: this._searchQuery }); - this._searchResult = data?.items ?? []; - this._searching = false; - } - - #onSearchClear() { - this._searchQuery = ''; - this._searchResult = []; - } - // Create action #initCreateAction() { // TODO: If data.enableCreate is true, we should add a button to create a new item. [NL] @@ -173,23 +109,16 @@ export class UmbTreePickerModalElement ${this.#renderSearch()} ${this.#renderTree()} -
- - ${this._createPath - ? html` ` - : nothing} - -
+ ${this.#renderActions()} `; } + #renderSearch() { + return html` + + + `; + } #renderTree() { return html` @@ -209,80 +138,24 @@ export class UmbTreePickerModalElement -
- ${this._searching - ? html`` - : html``} -
- - ${this._searchQuery - ? html` - - - - ` +
+ + ${this._createPath + ? html` ` : nothing} - -
- ${this.#renderSearchResult()} + +
`; } - - #renderSearchResult() { - if (this._searchQuery && this._searching === false && this._searchResult.length === 0) { - return this.#renderEmptySearchResult(); - } - - return html` - ${repeat( - this._searchResult, - (item) => item.unique, - (item) => this.#renderPickerSearchResultItem(item), - )} - `; - } - - #renderEmptySearchResult() { - return html`No result for "${this._searchQuery}".`; - } - - #renderPickerSearchResultItem(item: any) { - return html` - - `; - } - - static override styles = [ - UmbTextStyles, - css` - #search-input { - width: 100%; - } - - #search-divider { - width: 100%; - height: 1px; - background-color: var(--uui-color-divider); - margin-top: var(--uui-size-space-5); - margin-bottom: var(--uui-size-space-3); - } - - #search-indicator { - margin-left: 7px; - margin-top: 4px; - } - `, - ]; } export default UmbTreePickerModalElement; diff --git a/src/Umbraco.Web.UI.Client/src/packages/search/types.ts b/src/Umbraco.Web.UI.Client/src/packages/search/types.ts index a165bcd2ff..c051328e18 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/search/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/search/types.ts @@ -1,6 +1,7 @@ import type { UmbApi } from '@umbraco-cms/backoffice/extension-api'; import type { UmbPagedModel, UmbRepositoryResponse } from '@umbraco-cms/backoffice/repository'; +// TODO: lower requirement for search provider item type export type UmbSearchResultItemModel = { entityType: string; icon?: string | null; @@ -13,7 +14,9 @@ export type UmbSearchRequestArgs = { query: string; }; -export interface UmbSearchProvider - extends UmbApi { - search(args: UmbSearchRequestArgs): Promise>>; +export interface UmbSearchProvider< + SearchResultItemType extends UmbSearchResultItemModel = UmbSearchResultItemModel, + SearchRequestArgsType extends UmbSearchRequestArgs = UmbSearchRequestArgs, +> extends UmbApi { + search(args: SearchRequestArgsType): Promise>>; } From 68e371725e9b0af722c47406a6c3d48d5d0b1c23 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 14 Aug 2024 21:28:47 +0200 Subject: [PATCH 027/102] temp config --- .../src/packages/core/picker/picker-modal.context.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/picker-modal.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/picker-modal.context.ts index a4777834b9..8b1f04e33a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker/picker-modal.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/picker-modal.context.ts @@ -1,12 +1,19 @@ import { UMB_PICKER_MODAL_CONTEXT } from './picker-modal.context.token.js'; +import { UmbPickerModalSearchManager } from './search/manager/picker-modal-search.manager.js'; import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; import { UmbSelectionManager } from '@umbraco-cms/backoffice/utils'; export class UmbPickerModalContext extends UmbContextBase { public readonly selection = new UmbSelectionManager(this); + public readonly search = new UmbPickerModalSearchManager(this); constructor(host: UmbControllerHost) { super(host, UMB_PICKER_MODAL_CONTEXT); + + // TODO: temp hardcoded search provider + this.search.setConfig({ + providerAlias: 'Umb.SearchProvider.Document', + }); } } From ede29b01da4573b9a150560d0ddaa875ce1f54b2 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 14 Aug 2024 21:28:55 +0200 Subject: [PATCH 028/102] remove debugger --- .../packages/core/tree/tree-picker/tree-picker-modal.context.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.context.ts index c80dddb93c..4c7cc0c227 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.context.ts @@ -4,7 +4,6 @@ import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; export class UmbTreePickerModalContext extends UmbPickerModalContext { constructor(host: UmbControllerHost) { super(host); - debugger; } } From 6c5d466f8fb2fa0f9230341833a8b6a0d90f54e1 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 14 Aug 2024 21:32:23 +0200 Subject: [PATCH 029/102] rename folder --- src/Umbraco.Web.UI.Client/package.json | 2 +- .../src/packages/core/{picker => picker-modal}/index.ts | 0 .../core/{picker => picker-modal}/picker-modal.context.token.ts | 0 .../core/{picker => picker-modal}/picker-modal.context.ts | 0 .../src/packages/core/{picker => picker-modal}/search/index.ts | 0 .../core/{picker => picker-modal}/search/manager/index.ts | 0 .../search/manager/picker-modal-search.manager.ts | 0 .../core/{picker => picker-modal}/search/manager/types.ts | 0 .../search/picker-modal-search-result.element.ts | 0 .../search/picker-modal-search.element.ts | 0 .../core/{picker => picker-modal}/search/result-item/index.ts | 0 .../search/result-item/picker-search-result-item.element.ts | 0 .../packages/core/tree/tree-picker/tree-picker-modal.context.ts | 2 +- src/Umbraco.Web.UI.Client/tsconfig.json | 2 +- 14 files changed, 3 insertions(+), 3 deletions(-) rename src/Umbraco.Web.UI.Client/src/packages/core/{picker => picker-modal}/index.ts (100%) rename src/Umbraco.Web.UI.Client/src/packages/core/{picker => picker-modal}/picker-modal.context.token.ts (100%) rename src/Umbraco.Web.UI.Client/src/packages/core/{picker => picker-modal}/picker-modal.context.ts (100%) rename src/Umbraco.Web.UI.Client/src/packages/core/{picker => picker-modal}/search/index.ts (100%) rename src/Umbraco.Web.UI.Client/src/packages/core/{picker => picker-modal}/search/manager/index.ts (100%) rename src/Umbraco.Web.UI.Client/src/packages/core/{picker => picker-modal}/search/manager/picker-modal-search.manager.ts (100%) rename src/Umbraco.Web.UI.Client/src/packages/core/{picker => picker-modal}/search/manager/types.ts (100%) rename src/Umbraco.Web.UI.Client/src/packages/core/{picker => picker-modal}/search/picker-modal-search-result.element.ts (100%) rename src/Umbraco.Web.UI.Client/src/packages/core/{picker => picker-modal}/search/picker-modal-search.element.ts (100%) rename src/Umbraco.Web.UI.Client/src/packages/core/{picker => picker-modal}/search/result-item/index.ts (100%) rename src/Umbraco.Web.UI.Client/src/packages/core/{picker => picker-modal}/search/result-item/picker-search-result-item.element.ts (100%) diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json index 10bff7284d..5eac58763e 100644 --- a/src/Umbraco.Web.UI.Client/package.json +++ b/src/Umbraco.Web.UI.Client/package.json @@ -28,7 +28,7 @@ "./content-type": "./dist-cms/packages/core/content-type/index.js", "./content": "./dist-cms/packages/core/content/index.js", "./culture": "./dist-cms/packages/core/culture/index.js", - "./picker": "./dist-cms/packages/core/picker/index.js", + "./picker-modal": "./dist-cms/packages/core/picker-modal/index.js", "./current-user": "./dist-cms/packages/user/current-user/index.js", "./data-type": "./dist-cms/packages/data-type/index.js", "./debug": "./dist-cms/packages/core/debug/index.js", diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/index.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/picker/index.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/index.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/picker-modal.context.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/picker-modal.context.token.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/picker/picker-modal.context.token.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/picker-modal.context.token.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/picker-modal.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/picker-modal.context.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/picker/picker-modal.context.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/picker-modal.context.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/index.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/picker/search/index.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/index.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/manager/index.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/index.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/manager/index.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/picker-modal-search.manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/manager/picker-modal-search.manager.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/picker-modal-search.manager.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/manager/picker-modal-search.manager.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/manager/types.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/types.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/manager/types.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-modal-search-result.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/picker-modal-search-result.element.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-modal-search-result.element.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/picker-modal-search-result.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-modal-search.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/picker-modal-search.element.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-modal-search.element.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/picker-modal-search.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/index.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/index.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/index.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/picker-search-result-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/picker-search-result-item.element.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/picker-search-result-item.element.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/picker-search-result-item.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.context.ts index 4c7cc0c227..6d3c1f0cde 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.context.ts @@ -1,4 +1,4 @@ -import { UmbPickerModalContext } from '@umbraco-cms/backoffice/picker'; +import { UmbPickerModalContext } from '@umbraco-cms/backoffice/picker-modal'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; export class UmbTreePickerModalContext extends UmbPickerModalContext { diff --git a/src/Umbraco.Web.UI.Client/tsconfig.json b/src/Umbraco.Web.UI.Client/tsconfig.json index 13058d558f..506f62fb6f 100644 --- a/src/Umbraco.Web.UI.Client/tsconfig.json +++ b/src/Umbraco.Web.UI.Client/tsconfig.json @@ -54,7 +54,7 @@ DON'T EDIT THIS FILE DIRECTLY. It is generated by /devops/tsconfig/index.js "@umbraco-cms/backoffice/content-type": ["./src/packages/core/content-type/index.ts"], "@umbraco-cms/backoffice/content": ["./src/packages/core/content/index.ts"], "@umbraco-cms/backoffice/culture": ["./src/packages/core/culture/index.ts"], - "@umbraco-cms/backoffice/picker": ["./src/packages/core/picker/index.ts"], + "@umbraco-cms/backoffice/picker-modal": ["./src/packages/core/picker-modal/index.ts"], "@umbraco-cms/backoffice/current-user": ["./src/packages/user/current-user/index.ts"], "@umbraco-cms/backoffice/data-type": ["./src/packages/data-type/index.ts"], "@umbraco-cms/backoffice/debug": ["./src/packages/core/debug/index.ts"], From 0e52f9190d699728b3227668592be952be350c33 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 15 Aug 2024 08:56:15 +0200 Subject: [PATCH 030/102] set searching state when typing --- .../search/manager/picker-modal-search.manager.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/manager/picker-modal-search.manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/manager/picker-modal-search.manager.ts index cf8f01acc3..2140d9be65 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/manager/picker-modal-search.manager.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/manager/picker-modal-search.manager.ts @@ -64,7 +64,10 @@ export class UmbPickerModalSearchManager< * Search for items based on the current query. * @memberof UmbPickerModalSearchManager */ - public search = debounce(this.#debouncedSearch, 300); + public search() { + this.#searching.setValue(true); + this.#debouncedSearch(); + } /** * Clear the current search query and result items. @@ -106,7 +109,9 @@ export class UmbPickerModalSearchManager< if (!this.#searchProvider) throw new Error(`Search Provider with alias ${providerAlias} is not available`); } - async #debouncedSearch() { + #debouncedSearch = debounce(this.#search, 300); + + async #search() { if (!this.#searchProvider) throw new Error('Search provider is not available'); const query = this.#query.getValue(); if (!query) throw new Error('No query provided'); From 1e5f277bcad7254c6e364e64d18a0bd1aff4bbea Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 15 Aug 2024 11:05:48 +0200 Subject: [PATCH 031/102] add types --- .../search/picker-modal-search-result.element.ts | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/picker-modal-search-result.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/picker-modal-search-result.element.ts index 6c4e803024..87a4350854 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/picker-modal-search-result.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/picker-modal-search-result.element.ts @@ -2,18 +2,20 @@ import { UMB_PICKER_MODAL_CONTEXT } from '../picker-modal.context.token.js'; import type { UmbPickerModalContext } from '../picker-modal.context.js'; import { customElement, html, repeat, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import type { UmbSearchRequestArgs } from '@umbraco-cms/backoffice/search'; +import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; const elementName = 'umb-picker-modal-search-result'; @customElement(elementName) export class UmbPickerModalSearchResultElement extends UmbLitElement { @state() - _query: unknown; + _query?: UmbSearchRequestArgs; @state() _searching: boolean = false; @state() - _items: unknown[] = []; + _items: UmbEntityModel[] = []; #pickerModalContext?: UmbPickerModalContext; @@ -37,7 +39,7 @@ export class UmbPickerModalSearchResultElement extends UmbLitElement { }); } - override render(): unknown { + override render() { if (this._query && this._searching === false && this._items.length === 0) { return this.#renderEmptyResult(); } @@ -45,17 +47,17 @@ export class UmbPickerModalSearchResultElement extends UmbLitElement { return html` ${repeat( this._items, - (item: any) => item.unique, - (item: any) => this.#renderResultItem(item), + (item) => item.unique, + (item) => this.#renderResultItem(item), )} `; } #renderEmptyResult() { - return html`No result for "${this._query}".`; + return html`No result for "${this._query?.query}".`; } - #renderResultItem(item: any) { + #renderResultItem(item: UmbEntityModel) { return html` `; From f7dc5d4e5566fbc2ff9ef9fbe213ecc1aa70d143 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 15 Aug 2024 11:28:36 +0200 Subject: [PATCH 032/102] mark selected in search results --- ...ument-picker-search-result-item.element.ts | 42 +++++++++++++++++-- 1 file changed, 39 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/document-picker-search-result-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/document-picker-search-result-item.element.ts index bde3d6c9d4..73eefd3827 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/document-picker-search-result-item.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/document-picker-search-result-item.element.ts @@ -1,19 +1,55 @@ import type { UmbDocumentItemModel } from '../repository/item/types.js'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import { css, customElement, html, nothing, property } from '@umbraco-cms/backoffice/external/lit'; +import { css, customElement, html, nothing, property, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; +import type { UmbPickerModalContext } from '@umbraco-cms/backoffice/picker-modal'; +import { UMB_PICKER_MODAL_CONTEXT } from '@umbraco-cms/backoffice/picker-modal'; const elementName = 'umb-document-picker-search-result-item'; @customElement(elementName) export class UmbDocumentPickerSearchResultItemElement extends UmbLitElement { + #item?: UmbDocumentItemModel | undefined; @property({ type: Object }) - item?: UmbDocumentItemModel; + public get item(): UmbDocumentItemModel | undefined { + return this.#item; + } + public set item(value: UmbDocumentItemModel | undefined) { + this.#item = value; + this.#observeIsSelected(); + } + + @state() + _isSelected = false; + + #pickerModalContext?: UmbPickerModalContext; + + constructor() { + super(); + + this.consumeContext(UMB_PICKER_MODAL_CONTEXT, (context) => { + this.#pickerModalContext = context; + this.#observeIsSelected(); + }); + } + + #observeIsSelected() { + const selectionManager = this.#pickerModalContext?.selection; + if (!selectionManager) return; + + const unique = this.item?.unique; + if (unique === undefined) return; + + this.observe(selectionManager.selection, () => { + this._isSelected = selectionManager.isSelected(unique); + console.log(this._isSelected); + }); + } override render() { if (!this.item) return nothing; return html` - + ${this.#renderIcon()} `; From 859357ffbfa0a8d972bab01a96df61f877982d83 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 15 Aug 2024 12:01:18 +0200 Subject: [PATCH 033/102] observe query --- .../core/picker-modal/search/picker-modal-search.element.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/picker-modal-search.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/picker-modal-search.element.ts index 56273e6259..b939539504 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/picker-modal-search.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/picker-modal-search.element.ts @@ -25,6 +25,10 @@ export class UmbPickerModalSearchElement extends UmbLitElement { this.observe(this.#pickerModalContext.search.searching, (searching) => { this._searching = searching; }); + + this.observe(this.#pickerModalContext.search.query, (query) => { + this._query = query?.query || ''; + }); }); } From e69817d3f655c45b118be215e5f265a47aef078a Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 15 Aug 2024 12:27:16 +0200 Subject: [PATCH 034/102] add total items observable --- .../search/manager/picker-modal-search.manager.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/manager/picker-modal-search.manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/manager/picker-modal-search.manager.ts index 2140d9be65..1212762ad9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/manager/picker-modal-search.manager.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/manager/picker-modal-search.manager.ts @@ -3,7 +3,7 @@ import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; import { createExtensionApiByAlias } from '@umbraco-cms/backoffice/extension-registry'; -import { UmbArrayState, UmbBooleanState, UmbObjectState } from '@umbraco-cms/backoffice/observable-api'; +import { UmbArrayState, UmbBooleanState, UmbNumberState, UmbObjectState } from '@umbraco-cms/backoffice/observable-api'; import type { UmbSearchProvider, UmbSearchRequestArgs } from '@umbraco-cms/backoffice/search'; import { debounce } from '@umbraco-cms/backoffice/utils'; @@ -28,6 +28,9 @@ export class UmbPickerModalSearchManager< #resultItems = new UmbArrayState([], (x) => x.unique); public readonly resultItems = this.#resultItems.asObservable(); + #resultTotalItems = new UmbNumberState(0); + public readonly resultTotalItems = this.#resultTotalItems.asObservable(); + #config?: UmbPickerModalSearchManagerConfig; // TODO: lower requirement for search provider item type #searchProvider?: UmbSearchProvider; @@ -117,6 +120,7 @@ export class UmbPickerModalSearchManager< if (!query) throw new Error('No query provided'); const { data } = await this.#searchProvider.search(query); this.#resultItems.setValue(data?.items ?? []); + this.#resultTotalItems.setValue(data?.total ?? 0); this.#searching.setValue(false); } } From f19038068bf10945e9661933b6f15d4ae31514ba Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 15 Aug 2024 12:52:23 +0200 Subject: [PATCH 035/102] add collection picker modal context --- .../collection-picker-modal.context.ts | 10 ++++++++++ .../core/collection/collection-picker-modal/index.ts | 1 + .../src/packages/core/collection/index.ts | 1 + 3 files changed, 12 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-picker-modal/collection-picker-modal.context.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-picker-modal/index.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-picker-modal/collection-picker-modal.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-picker-modal/collection-picker-modal.context.ts new file mode 100644 index 0000000000..e3e33a2918 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-picker-modal/collection-picker-modal.context.ts @@ -0,0 +1,10 @@ +import { UmbPickerModalContext } from '@umbraco-cms/backoffice/picker-modal'; +import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; + +export class UmbCollectionPickerModalContext extends UmbPickerModalContext { + constructor(host: UmbControllerHost) { + super(host); + } +} + +export { UmbCollectionPickerModalContext as api }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-picker-modal/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-picker-modal/index.ts new file mode 100644 index 0000000000..98b48e9cd0 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-picker-modal/index.ts @@ -0,0 +1 @@ +export * from './collection-picker-modal.context.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/index.ts index 3e54ec50e1..f507d49db7 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/index.ts @@ -5,6 +5,7 @@ import './components/index.js'; export * from './default/collection-default.element.js'; export * from './collection.element.js'; export * from './components/index.js'; +export * from './collection-picker-modal/index.js'; export * from './default/collection-default.context.js'; export * from './default/collection-default.context-token.js'; From aab7aadb2e3f54ae1a803ca1192a7cfde46a8b3d Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 15 Aug 2024 12:52:49 +0200 Subject: [PATCH 036/102] wip upgrade member picker to use search components --- .../member-picker-modal.element.ts | 147 ++++-------------- 1 file changed, 27 insertions(+), 120 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts index e0c3ec8ed1..f87f86be24 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts @@ -1,13 +1,12 @@ import { UmbMemberCollectionRepository } from '../../collection/index.js'; -import { UmbMemberSearchProvider } from '../../search/member.search-provider.js'; import type { UmbMemberDetailModel } from '../../types.js'; import type { UmbMemberItemModel } from '../../repository/index.js'; import type { UmbMemberPickerModalValue, UmbMemberPickerModalData } from './member-picker-modal.token.js'; -import { css, customElement, html, nothing, repeat, state, when } from '@umbraco-cms/backoffice/external/lit'; -import { debounce, UmbSelectionManager } from '@umbraco-cms/backoffice/utils'; +import { customElement, html, repeat, state } from '@umbraco-cms/backoffice/external/lit'; +import { UmbSelectionManager } from '@umbraco-cms/backoffice/utils'; import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import type { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; +import { UmbCollectionPickerModalContext } from '@umbraco-cms/backoffice/collection'; @customElement('umb-member-picker-modal') export class UmbMemberPickerModalElement extends UmbModalBaseElement< @@ -17,18 +16,11 @@ export class UmbMemberPickerModalElement extends UmbModalBaseElement< @state() private _members: Array = []; - @state() - private _searchQuery: string = ''; - - @state() - private _searchResult: Array = []; - - @state() - private _searching = false; - #collectionRepository = new UmbMemberCollectionRepository(this); #selectionManager = new UmbSelectionManager(this); - #searchProvider = new UmbMemberSearchProvider(this); + + // TODO: find a way to implement through the manifest api field + #api = new UmbCollectionPickerModalContext(this); override connectedCallback(): void { super.connectedCallback(); @@ -62,54 +54,20 @@ export class UmbMemberPickerModalElement extends UmbModalBaseElement< } } - #onSearchInput(event: UUIInputEvent) { - const value = event.target.value as string; - this._searchQuery = value; - - if (!this._searchQuery) { - this._searchResult = []; - this._searching = false; - return; - } - - this._searching = true; - this.#debouncedSearch(); - } - - #debouncedSearch = debounce(this.#search, 300); - - async #search() { - if (!this._searchQuery) return; - const { data } = await this.#searchProvider.search({ query: this._searchQuery }); - this._searchResult = data?.items ?? []; - this._searching = false; - } - - #onSearchClear() { - this._searchQuery = ''; - this._searchResult = []; - } - override render() { return html` - ${this.#renderSearch()} ${this.#renderItems()} -
- this.modalContext?.reject()}> - this.modalContext?.submit()}> -
+ + + + ${this.#renderItems()} + ${this.#renderActions()} `; } #renderItems() { - if (this._searchQuery) return nothing; return html` ${repeat( this.#filteredMembers, @@ -119,52 +77,6 @@ export class UmbMemberPickerModalElement extends UmbModalBaseElement< `; } - #renderSearch() { - return html` - -
- ${this._searching - ? html`` - : html``} -
- ${when( - this._searchQuery, - () => html` -
- - - -
- `, - )} - -
- ${this.#renderSearchResult()} - `; - } - - #renderSearchResult() { - if (this._searchQuery && this._searching === false && this._searchResult.length === 0) { - return this.#renderEmptySearchResult(); - } - - return html` - ${repeat( - this._searchResult, - (item) => item.unique, - (item) => this.#renderMemberItem(item), - )} - `; - } - - #renderEmptySearchResult() { - return html`No result for "${this._searchQuery}".`; - } - #renderMemberItem(item: UmbMemberItemModel | UmbMemberDetailModel) { return html` + this.modalContext?.reject()}> + this.modalContext?.submit()}> + + `; + } - #search-divider { - width: 100%; - height: 1px; - background-color: var(--uui-color-divider); - margin-top: var(--uui-size-space-5); - margin-bottom: var(--uui-size-space-3); - } - - #search-indicator { - margin-left: 7px; - margin-top: 4px; - } - `, - ]; + static override styles = [UmbTextStyles]; } export default UmbMemberPickerModalElement; From 366aa0eb43fbfde9c6be2827cd9111d6778b5c44 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 15 Aug 2024 13:11:52 +0200 Subject: [PATCH 037/102] set search feature toggle --- .../manager/picker-modal-search.manager.ts | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/manager/picker-modal-search.manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/manager/picker-modal-search.manager.ts index 1212762ad9..621c5b302c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/manager/picker-modal-search.manager.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/manager/picker-modal-search.manager.ts @@ -19,6 +19,9 @@ export class UmbPickerModalSearchManager< ResultItemType extends UmbEntityModel = UmbEntityModel, QueryType extends UmbSearchRequestArgs = UmbSearchRequestArgs, > extends UmbControllerBase { + #searchable = new UmbBooleanState(false); + public readonly searchable = this.#searchable.asObservable(); + #query = new UmbObjectState(undefined); public readonly query = this.#query.asObservable(); @@ -63,11 +66,30 @@ export class UmbPickerModalSearchManager< return this.#config; } + /** + * Returns whether items can be searched. + * @returns {boolean} Whether items can be searched. + * @memberof UmbPickerModalSearchManager + */ + public getSearchable(): boolean { + return this.#searchable.getValue(); + } + + /** + * Sets whether items can be searched. + * @param {boolean} value Whether items can be searched. + * @memberof UmbPickerModalSearchManager + */ + public setSearchable(value: boolean) { + this.#searchable.setValue(value); + } + /** * Search for items based on the current query. * @memberof UmbPickerModalSearchManager */ public search() { + if (this.getSearchable() === false) throw new Error('Search is not enabled'); this.#searching.setValue(true); this.#debouncedSearch(); } @@ -88,6 +110,7 @@ export class UmbPickerModalSearchManager< * @memberof UmbPickerModalSearchManager */ public setQuery(query: QueryType) { + if (this.getSearchable() === false) throw new Error('Search is not enabled'); if (!this.query) { this.clear(); return; @@ -115,6 +138,7 @@ export class UmbPickerModalSearchManager< #debouncedSearch = debounce(this.#search, 300); async #search() { + if (this.getSearchable() === false) throw new Error('Search is not enabled'); if (!this.#searchProvider) throw new Error('Search provider is not available'); const query = this.#query.getValue(); if (!query) throw new Error('No query provided'); From 7f4e08c3a95096878d18709258f3ebcf4008f149 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 15 Aug 2024 13:40:54 +0200 Subject: [PATCH 038/102] add optional search setting to picker modal data --- src/Umbraco.Web.UI.Client/src/packages/core/modal/types.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/types.ts index 992fb667a5..62a3da2f00 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/types.ts @@ -2,7 +2,13 @@ export interface UmbPickerModalData { multiple?: boolean; filter?: (item: ItemType) => boolean; pickableFilter?: (item: ItemType) => boolean; + search?: UmbPickerModalSearchData; } + +export interface UmbPickerModalSearchData { + providerAlias: string; +} + export interface UmbPickerModalValue { selection: Array; } From ea4dc88ce3ba5b525f390f9781d0329bc1088ae5 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 15 Aug 2024 13:41:09 +0200 Subject: [PATCH 039/102] add getter and setters for modal data in context --- .../core/picker-modal/picker-modal.context.ts | 34 ++++++++++++++++--- 1 file changed, 29 insertions(+), 5 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/picker-modal.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/picker-modal.context.ts index 8b1f04e33a..e0d0cd8222 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/picker-modal.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/picker-modal.context.ts @@ -3,17 +3,41 @@ import { UmbPickerModalSearchManager } from './search/manager/picker-modal-searc import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; import { UmbSelectionManager } from '@umbraco-cms/backoffice/utils'; +import type { UmbPickerModalData } from '@umbraco-cms/backoffice/modal'; +import { UmbObjectState } from '@umbraco-cms/backoffice/observable-api'; -export class UmbPickerModalContext extends UmbContextBase { +export class UmbPickerModalContext< + ModalDataType extends UmbPickerModalData = UmbPickerModalData, +> extends UmbContextBase { public readonly selection = new UmbSelectionManager(this); public readonly search = new UmbPickerModalSearchManager(this); + #data = new UmbObjectState(undefined); + public readonly data = this.#data.asObservable(); + constructor(host: UmbControllerHost) { super(host, UMB_PICKER_MODAL_CONTEXT); + } - // TODO: temp hardcoded search provider - this.search.setConfig({ - providerAlias: 'Umb.SearchProvider.Document', - }); + /** + * Set the data for the picker modal + * @param {ModalDataType} data + * @memberof UmbPickerModalContext + */ + setData(data: ModalDataType) { + const searchProviderAlias = data.search?.providerAlias; + if (searchProviderAlias) { + this.search.setConfig({ providerAlias: searchProviderAlias }); + this.search.setSearchable(true); + } + } + + /** + * Get the data for the picker modal + * @returns {ModalDataType | undefined} + * @memberof UmbPickerModalContext + */ + getData(): ModalDataType | undefined { + return this.#data.getValue(); } } From ea94868d29fedc49dc8f78e6125f05a4d24f2814 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 15 Aug 2024 13:41:24 +0200 Subject: [PATCH 040/102] pass modal data to context --- .../core/tree/tree-picker/tree-picker-modal.element.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts index 2f1102c083..acfa408317 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts @@ -1,6 +1,7 @@ import type { UmbTreeSelectionConfiguration } from '../types.js'; import type { UmbTreePickerModalData, UmbTreePickerModalValue } from './tree-picker-modal.token.js'; import { UmbTreePickerModalContext } from './tree-picker-modal.context.js'; +import type { PropertyValueMap } from '@umbraco-cms/backoffice/external/lit'; import { html, customElement, state, ifDefined, nothing } from '@umbraco-cms/backoffice/external/lit'; import { UMB_WORKSPACE_MODAL, UmbModalBaseElement } from '@umbraco-cms/backoffice/modal'; import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router'; @@ -56,8 +57,14 @@ export class UmbTreePickerModalElement | Map) { + super.updated(_changedProperties); + if (_changedProperties.has('data') && this.data) { + this.#api.setData(this.data); + } + } + // Tree Selection #onSelected(event: UmbSelectedEvent) { event.stopPropagation(); this.#api.selection.select(event.unique); From c4eede3d953d5610cc91f061ed59b093a97d218f Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 15 Aug 2024 14:08:45 +0200 Subject: [PATCH 041/102] add member search provider const --- .../src/packages/members/member/search/constants.ts | 1 + .../src/packages/members/member/search/index.ts | 1 + 2 files changed, 2 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/members/member/search/constants.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/members/member/search/index.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member/search/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member/search/constants.ts new file mode 100644 index 0000000000..8cca6e6a79 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member/search/constants.ts @@ -0,0 +1 @@ +export const UMB_MEMBER_SEARCH_PROVIDER_ALIAS = 'Umb.SearchProvider.Member'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member/search/index.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member/search/index.ts new file mode 100644 index 0000000000..4f07201dcf --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member/search/index.ts @@ -0,0 +1 @@ +export * from './constants.js'; From 05329eed2d29f81b65cc6606a5781f47860690f0 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 15 Aug 2024 14:08:53 +0200 Subject: [PATCH 042/102] use const --- .../src/packages/members/member/search/manifests.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member/search/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member/search/manifests.ts index 9729f06efd..e6b5c3845e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member/search/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member/search/manifests.ts @@ -1,10 +1,11 @@ import { UMB_MEMBER_ENTITY_TYPE } from '../entity.js'; +import { UMB_MEMBER_SEARCH_PROVIDER_ALIAS } from './constants.js'; import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry'; export const manifests: Array = [ { name: 'Member Search Provider', - alias: 'Umb.SearchProvider.Member', + alias: UMB_MEMBER_SEARCH_PROVIDER_ALIAS, type: 'searchProvider', api: () => import('./member.search-provider.js'), weight: 300, From f1b2051e8ed765e32ed52c08cf0d7ca6fa0829b4 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Thu, 15 Aug 2024 14:19:28 +0200 Subject: [PATCH 043/102] fix object object bug --- .../entity-actions/export/media-type-export.action.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/export/media-type-export.action.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/export/media-type-export.action.ts index b61d2c2a54..b6f7b4e539 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/export/media-type-export.action.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/export/media-type-export.action.ts @@ -8,7 +8,7 @@ export class UmbExportMediaTypeEntityAction extends UmbEntityActionBase override async execute() { if (!this.args.unique) throw new Error('Unique is not available'); - const data = await this.#repository.requestExport(this.args.unique); + const { data } = await this.#repository.requestExport(this.args.unique); if (!data) return; blobDownload(data, `${this.args.unique}.udt`, 'text/xml'); From 918aa9360d43977ce1e1edad4aeb0fd59a359db4 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 15 Aug 2024 14:22:54 +0200 Subject: [PATCH 044/102] add search provider to member picker --- .../member-picker-modal/member-picker-modal.token.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.token.ts index b77c28327f..857f5e1aaa 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.token.ts @@ -1,9 +1,12 @@ import type { UmbMemberItemModel } from '../../repository/index.js'; +import { UMB_MEMBER_SEARCH_PROVIDER_ALIAS } from '../../search/constants.js'; +import type { UmbPickerModalSearchData } from '@umbraco-cms/backoffice/modal'; import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; export interface UmbMemberPickerModalData { multiple?: boolean; filter?: (member: UmbMemberItemModel) => boolean; + search?: UmbPickerModalSearchData; } export interface UmbMemberPickerModalValue { @@ -17,5 +20,10 @@ export const UMB_MEMBER_PICKER_MODAL = new UmbModalToken Date: Thu, 15 Aug 2024 14:23:11 +0200 Subject: [PATCH 045/102] set data on api --- .../member-picker-modal/member-picker-modal.element.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts index f87f86be24..a31b518bed 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts @@ -2,6 +2,7 @@ import { UmbMemberCollectionRepository } from '../../collection/index.js'; import type { UmbMemberDetailModel } from '../../types.js'; import type { UmbMemberItemModel } from '../../repository/index.js'; import type { UmbMemberPickerModalValue, UmbMemberPickerModalData } from './member-picker-modal.token.js'; +import type { PropertyValueMap } from '@umbraco-cms/backoffice/external/lit'; import { customElement, html, repeat, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbSelectionManager } from '@umbraco-cms/backoffice/utils'; import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal'; @@ -41,6 +42,13 @@ export class UmbMemberPickerModalElement extends UmbModalBaseElement< ); } + protected override async updated(_changedProperties: PropertyValueMap | Map) { + super.updated(_changedProperties); + if (_changedProperties.has('data') && this.data) { + this.#api.setData(this.data); + } + } + override async firstUpdated() { const { data } = await this.#collectionRepository.requestCollection({}); this._members = data?.items ?? []; From 103917a95c9267f00505ae25fb0806e5b3599d6a Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 15 Aug 2024 14:23:31 +0200 Subject: [PATCH 046/102] listen to select events --- .../document-picker-search-result-item.element.ts | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/document-picker-search-result-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/document-picker-search-result-item.element.ts index 73eefd3827..ad17b20713 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/document-picker-search-result-item.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/document-picker-search-result-item.element.ts @@ -46,10 +46,18 @@ export class UmbDocumentPickerSearchResultItemElement extends UmbLitElement { } override render() { - if (!this.item) return nothing; + const item = this.item; + if (!item) return nothing; return html` - + this.#pickerModalContext?.selection.select(item.unique)} + @deselected=${() => this.#pickerModalContext?.selection.deselect(item.unique)} + ?selected=${this._isSelected}> ${this.#renderIcon()} `; From 4c4c6f12ba527901bcd166b89416c2ff0340d8cb Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 15 Aug 2024 14:45:19 +0200 Subject: [PATCH 047/102] react to prop updates --- .../core/picker-modal/picker-modal.context.ts | 7 ++- .../tree-picker/tree-picker-modal.element.ts | 52 +++++++++---------- 2 files changed, 30 insertions(+), 29 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/picker-modal.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/picker-modal.context.ts index e0d0cd8222..8f08372968 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/picker-modal.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/picker-modal.context.ts @@ -24,11 +24,14 @@ export class UmbPickerModalContext< * @param {ModalDataType} data * @memberof UmbPickerModalContext */ - setData(data: ModalDataType) { - const searchProviderAlias = data.search?.providerAlias; + setData(data: ModalDataType | undefined) { + const searchProviderAlias = data?.search?.providerAlias; if (searchProviderAlias) { this.search.setConfig({ providerAlias: searchProviderAlias }); this.search.setSearchable(true); + } else { + this.search.setConfig({ providerAlias: undefined }); + this.search.setSearchable(false); } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts index acfa408317..ab022e1b8f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts @@ -31,6 +31,27 @@ export class UmbTreePickerModalElement | Map) { + super.updated(_changedProperties); + + if (_changedProperties.has('data')) { + this.#api.setData(this.data); + this._selectionConfiguration.multiple = this.data?.multiple ?? false; + this.#api.selection.setMultiple(this.data?.multiple ?? false); + } + + if (_changedProperties.has('value')) { + this._selectionConfiguration.selection = this.value?.selection ?? []; + this.#api.selection.setSelection(this.value.selection); + } + } + + #observePickerSelection() { this.observe( this.#api.selection.selection, (selection) => { @@ -41,37 +62,14 @@ export class UmbTreePickerModalElement | Map) { - super.updated(_changedProperties); - if (_changedProperties.has('data') && this.data) { - this.#api.setData(this.data); - } - } - // Tree Selection - #onSelected(event: UmbSelectedEvent) { + #onTreeItemSelected(event: UmbSelectedEvent) { event.stopPropagation(); this.#api.selection.select(event.unique); this.modalContext?.dispatchEvent(new UmbSelectedEvent(event.unique)); } - #onDeselected(event: UmbDeselectedEvent) { + #onTreeItemDeselected(event: UmbDeselectedEvent) { event.stopPropagation(); this.#api.selection.deselect(event.unique); this.modalContext?.dispatchEvent(new UmbDeselectedEvent(event.unique)); @@ -140,8 +138,8 @@ export class UmbTreePickerModalElement + @selected=${this.#onTreeItemSelected} + @deselected=${this.#onTreeItemDeselected}> `; } From 2af793e13839ff024c18d4dca50ac240964e5d0f Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 15 Aug 2024 14:57:10 +0200 Subject: [PATCH 048/102] clean up --- .../tree/tree-picker/tree-picker-modal.element.ts | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts index ab022e1b8f..c4fdf36400 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts @@ -41,13 +41,16 @@ export class UmbTreePickerModalElement Date: Thu, 15 Aug 2024 18:19:38 +0200 Subject: [PATCH 049/102] re set object --- .../core/tree/tree-picker/tree-picker-modal.element.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts index c4fdf36400..a9dc059a4e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts @@ -43,14 +43,20 @@ export class UmbTreePickerModalElement Date: Thu, 15 Aug 2024 18:40:17 +0200 Subject: [PATCH 050/102] Update tree-picker-modal.element.ts --- .../core/tree/tree-picker/tree-picker-modal.element.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts index a9dc059a4e..377fc386fc 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts @@ -33,6 +33,10 @@ export class UmbTreePickerModalElement Date: Thu, 15 Aug 2024 19:28:03 +0200 Subject: [PATCH 051/102] hide picker when searching --- .../tree-picker/tree-picker-modal.element.ts | 20 ++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts index 377fc386fc..403611cce7 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts @@ -26,6 +26,9 @@ export class UmbTreePickerModalElement { + this._searchQuery = query?.query; + }, + 'umbPickerSearchQueryObserver', ); } @@ -139,6 +153,10 @@ export class UmbTreePickerModalElement Date: Thu, 15 Aug 2024 21:35:02 +0200 Subject: [PATCH 052/102] clear search when no query --- .../search/manager/picker-modal-search.manager.ts | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/manager/picker-modal-search.manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/manager/picker-modal-search.manager.ts index 621c5b302c..2e084d51bc 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/manager/picker-modal-search.manager.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/manager/picker-modal-search.manager.ts @@ -90,6 +90,13 @@ export class UmbPickerModalSearchManager< */ public search() { if (this.getSearchable() === false) throw new Error('Search is not enabled'); + + const query = this.#query.getValue(); + if (!query?.query) { + this.clear(); + return; + } + this.#searching.setValue(true); this.#debouncedSearch(); } @@ -102,6 +109,7 @@ export class UmbPickerModalSearchManager< this.#query.setValue(undefined); this.#resultItems.setValue([]); this.#searching.setValue(false); + this.#resultTotalItems.setValue(0); } /** @@ -142,6 +150,12 @@ export class UmbPickerModalSearchManager< if (!this.#searchProvider) throw new Error('Search provider is not available'); const query = this.#query.getValue(); if (!query) throw new Error('No query provided'); + + if (!query.query) { + this.clear(); + return; + } + const { data } = await this.#searchProvider.search(query); this.#resultItems.setValue(data?.items ?? []); this.#resultTotalItems.setValue(data?.total ?? 0); From 99ab62248727140eb79390dd880198446badbbba Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 15 Aug 2024 21:49:18 +0200 Subject: [PATCH 053/102] remove unused css --- .../picker/document-picker-search-result-item.element.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/document-picker-search-result-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/document-picker-search-result-item.element.ts index ad17b20713..85e434c396 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/document-picker-search-result-item.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/document-picker-search-result-item.element.ts @@ -1,6 +1,6 @@ import type { UmbDocumentItemModel } from '../repository/item/types.js'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import { css, customElement, html, nothing, property, state } from '@umbraco-cms/backoffice/external/lit'; +import { customElement, html, nothing, property, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import type { UmbPickerModalContext } from '@umbraco-cms/backoffice/picker-modal'; import { UMB_PICKER_MODAL_CONTEXT } from '@umbraco-cms/backoffice/picker-modal'; @@ -68,7 +68,7 @@ export class UmbDocumentPickerSearchResultItemElement extends UmbLitElement { return html``; } - static override styles = [UmbTextStyles, css``]; + static override styles = [UmbTextStyles]; } export { UmbDocumentPickerSearchResultItemElement as element }; From 4351924412f3cc8e6a58a5e52f5640692a1aa06b Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 15 Aug 2024 21:51:39 +0200 Subject: [PATCH 054/102] rename to collection item picker --- .../collection-picker-modal.context.ts | 4 ++-- .../member-picker-modal/member-picker-modal.element.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-picker-modal/collection-picker-modal.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-picker-modal/collection-picker-modal.context.ts index e3e33a2918..d19394e3e6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-picker-modal/collection-picker-modal.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-picker-modal/collection-picker-modal.context.ts @@ -1,10 +1,10 @@ import { UmbPickerModalContext } from '@umbraco-cms/backoffice/picker-modal'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; -export class UmbCollectionPickerModalContext extends UmbPickerModalContext { +export class UmbCollectionItemPickerModalContext extends UmbPickerModalContext { constructor(host: UmbControllerHost) { super(host); } } -export { UmbCollectionPickerModalContext as api }; +export { UmbCollectionItemPickerModalContext as api }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts index a31b518bed..88b150ba83 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts @@ -7,7 +7,7 @@ import { customElement, html, repeat, state } from '@umbraco-cms/backoffice/exte import { UmbSelectionManager } from '@umbraco-cms/backoffice/utils'; import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { UmbCollectionPickerModalContext } from '@umbraco-cms/backoffice/collection'; +import { UmbCollectionItemPickerModalContext } from '@umbraco-cms/backoffice/collection'; @customElement('umb-member-picker-modal') export class UmbMemberPickerModalElement extends UmbModalBaseElement< @@ -21,7 +21,7 @@ export class UmbMemberPickerModalElement extends UmbModalBaseElement< #selectionManager = new UmbSelectionManager(this); // TODO: find a way to implement through the manifest api field - #api = new UmbCollectionPickerModalContext(this); + #api = new UmbCollectionItemPickerModalContext(this); override connectedCallback(): void { super.connectedCallback(); From d7b3e1d2022a553c784c936d021c4e286e4bbe8b Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 15 Aug 2024 21:52:45 +0200 Subject: [PATCH 055/102] rename to collection item picker --- .../collection-item-picker-modal.context.ts} | 0 .../core/collection/collection-item-picker-modal/index.ts | 1 + .../packages/core/collection/collection-picker-modal/index.ts | 1 - src/Umbraco.Web.UI.Client/src/packages/core/collection/index.ts | 2 +- 4 files changed, 2 insertions(+), 2 deletions(-) rename src/Umbraco.Web.UI.Client/src/packages/core/collection/{collection-picker-modal/collection-picker-modal.context.ts => collection-item-picker-modal/collection-item-picker-modal.context.ts} (100%) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-item-picker-modal/index.ts delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-picker-modal/index.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-picker-modal/collection-picker-modal.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-item-picker-modal/collection-item-picker-modal.context.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-picker-modal/collection-picker-modal.context.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-item-picker-modal/collection-item-picker-modal.context.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-item-picker-modal/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-item-picker-modal/index.ts new file mode 100644 index 0000000000..e5f1b5e677 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-item-picker-modal/index.ts @@ -0,0 +1 @@ +export * from './collection-item-picker-modal.context.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-picker-modal/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-picker-modal/index.ts deleted file mode 100644 index 98b48e9cd0..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-picker-modal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './collection-picker-modal.context.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/index.ts index f507d49db7..e3b5fac4d8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/index.ts @@ -5,7 +5,7 @@ import './components/index.js'; export * from './default/collection-default.element.js'; export * from './collection.element.js'; export * from './components/index.js'; -export * from './collection-picker-modal/index.js'; +export * from './collection-item-picker-modal/index.js'; export * from './default/collection-default.context.js'; export * from './default/collection-default.context-token.js'; From d97bef1a65386cfe39ca15c372cacb114145a761 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 15 Aug 2024 21:54:03 +0200 Subject: [PATCH 056/102] rename --- src/Umbraco.Web.UI.Client/src/packages/core/modal/types.ts | 4 ++-- .../member-picker-modal/member-picker-modal.token.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/types.ts index 62a3da2f00..b073a8f293 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/types.ts @@ -2,10 +2,10 @@ export interface UmbPickerModalData { multiple?: boolean; filter?: (item: ItemType) => boolean; pickableFilter?: (item: ItemType) => boolean; - search?: UmbPickerModalSearchData; + search?: UmbPickerModalSearchConfig; } -export interface UmbPickerModalSearchData { +export interface UmbPickerModalSearchConfig { providerAlias: string; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.token.ts index 857f5e1aaa..8da183eefe 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.token.ts @@ -1,12 +1,12 @@ import type { UmbMemberItemModel } from '../../repository/index.js'; import { UMB_MEMBER_SEARCH_PROVIDER_ALIAS } from '../../search/constants.js'; -import type { UmbPickerModalSearchData } from '@umbraco-cms/backoffice/modal'; +import type { UmbPickerModalSearchConfig } from '@umbraco-cms/backoffice/modal'; import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; export interface UmbMemberPickerModalData { multiple?: boolean; filter?: (member: UmbMemberItemModel) => boolean; - search?: UmbPickerModalSearchData; + search?: UmbPickerModalSearchConfig; } export interface UmbMemberPickerModalValue { From 4e7658aaddf93cf7f8e307fb84da8b2a6e8ab6d9 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 15 Aug 2024 21:58:49 +0200 Subject: [PATCH 057/102] rename --- .../core/tree/tree-picker/tree-picker-modal.context.ts | 4 ++-- .../core/tree/tree-picker/tree-picker-modal.element.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.context.ts index 6d3c1f0cde..d1b5f31db7 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.context.ts @@ -1,10 +1,10 @@ import { UmbPickerModalContext } from '@umbraco-cms/backoffice/picker-modal'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; -export class UmbTreePickerModalContext extends UmbPickerModalContext { +export class UmbTreeItemPickerModalContext extends UmbPickerModalContext { constructor(host: UmbControllerHost) { super(host); } } -export { UmbTreePickerModalContext as api }; +export { UmbTreeItemPickerModalContext as api }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts index 403611cce7..7ff48854b8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts @@ -1,6 +1,6 @@ import type { UmbTreeSelectionConfiguration } from '../types.js'; import type { UmbTreePickerModalData, UmbTreePickerModalValue } from './tree-picker-modal.token.js'; -import { UmbTreePickerModalContext } from './tree-picker-modal.context.js'; +import { UmbTreeItemPickerModalContext } from './tree-picker-modal.context.js'; import type { PropertyValueMap } from '@umbraco-cms/backoffice/external/lit'; import { html, customElement, state, ifDefined, nothing } from '@umbraco-cms/backoffice/external/lit'; import { UMB_WORKSPACE_MODAL, UmbModalBaseElement } from '@umbraco-cms/backoffice/modal'; @@ -30,7 +30,7 @@ export class UmbTreePickerModalElement Date: Thu, 15 Aug 2024 22:05:47 +0200 Subject: [PATCH 058/102] clean up --- .../packages/core/picker-modal/picker-modal.context.ts | 3 +-- .../search/manager/picker-modal-search.manager.ts | 10 ++++++++++ .../src/packages/documents/manifests.ts | 4 ++-- 3 files changed, 13 insertions(+), 4 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/picker-modal.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/picker-modal.context.ts index 8f08372968..6850d916f8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/picker-modal.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/picker-modal.context.ts @@ -27,10 +27,9 @@ export class UmbPickerModalContext< setData(data: ModalDataType | undefined) { const searchProviderAlias = data?.search?.providerAlias; if (searchProviderAlias) { - this.search.setConfig({ providerAlias: searchProviderAlias }); + this.search.updateConfig({ providerAlias: searchProviderAlias }); this.search.setSearchable(true); } else { - this.search.setConfig({ providerAlias: undefined }); this.search.setSearchable(false); } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/manager/picker-modal-search.manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/manager/picker-modal-search.manager.ts index 2e084d51bc..bb5a39cfa4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/manager/picker-modal-search.manager.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/manager/picker-modal-search.manager.ts @@ -66,6 +66,16 @@ export class UmbPickerModalSearchManager< return this.#config; } + /** + * Update the current configuration for the search manager. + * @param {Partial} partialConfig + * @memberof UmbPickerModalSearchManager + */ + public updateConfig(partialConfig: Partial) { + const mergedConfig = { ...this.#config, ...partialConfig } as UmbPickerModalSearchManagerConfig; + this.setConfig(mergedConfig); + } + /** * Returns whether items can be searched. * @returns {boolean} Whether items can be searched. diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/manifests.ts index 62f792f664..e9d9a3d2ea 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/manifests.ts @@ -3,9 +3,9 @@ import { manifests as documentBlueprintManifests } from './document-blueprints/m import { manifests as documentManifests } from './documents/manifests.js'; import { manifests as documentTypeManifests } from './document-types/manifests.js'; import { manifests as sectionManifests } from './section/manifests.js'; -import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry'; +import type { ManifestTypes, UmbBackofficeManifestKind } from '@umbraco-cms/backoffice/extension-registry'; -export const manifests: Array = [ +export const manifests: Array = [ ...dashboardManifests, ...documentBlueprintManifests, ...documentManifests, From ca12bf59cf03477f49f4bc9edd682b6189e70c14 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 16 Aug 2024 08:48:12 +0200 Subject: [PATCH 059/102] add method to partially update the search query --- .../search/manager/picker-modal-search.manager.ts | 10 ++++++++++ .../picker-modal/search/picker-modal-search.element.ts | 2 +- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/manager/picker-modal-search.manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/manager/picker-modal-search.manager.ts index bb5a39cfa4..42b47316fe 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/manager/picker-modal-search.manager.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/manager/picker-modal-search.manager.ts @@ -146,6 +146,16 @@ export class UmbPickerModalSearchManager< return this.#query.getValue(); } + /** + * Update the current search query. + * @param {Partial} query + * @memberof UmbPickerModalSearchManager + */ + public updateQuery(query: Partial) { + const mergedQuery = { ...this.getQuery(), ...query } as QueryType; + this.#query.setValue(mergedQuery); + } + async #initSearch() { const providerAlias = this.#config?.providerAlias; if (!providerAlias) throw new Error('No search provider alias provided'); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/picker-modal-search.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/picker-modal-search.element.ts index b939539504..5e31f1a340 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/picker-modal-search.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/picker-modal-search.element.ts @@ -34,7 +34,7 @@ export class UmbPickerModalSearchElement extends UmbLitElement { #onInput(event: UUIInputEvent) { const value = event.target.value as string; - this.#pickerModalContext?.search.setQuery({ query: value }); + this.#pickerModalContext?.search.updateQuery({ query: value }); this.#pickerModalContext?.search.search(); } From e650dcc4cbd74044a6ba20407396d04463d4f89c Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 16 Aug 2024 10:10:11 +0200 Subject: [PATCH 060/102] set up default picker search result item kind --- .../src/packages/core/manifests.ts | 28 ++++--- .../packages/core/picker-modal/manifests.ts | 4 + .../core/picker-modal/search/manifests.ts | 4 + ...picker-search-result-item.context.token.ts | 6 ++ ...fault-picker-search-result-item.context.ts | 10 +++ ...fault-picker-search-result-item.element.ts | 79 +++++++++++++++++++ .../search/result-item/default/manifests.ts | 15 ++++ .../search/result-item/manifests.ts | 4 + .../documents/documents/picker/manifests.ts | 3 +- 9 files changed, 138 insertions(+), 15 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/default/default-picker-search-result-item.context.token.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/default/default-picker-search-result-item.context.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/default/default-picker-search-result-item.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/default/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/manifests.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/manifests.ts index a9e6fb1ecd..777bebacb6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/manifests.ts @@ -10,6 +10,7 @@ import { manifests as extensionManifests } from './extension-registry/manifests. import { manifests as iconRegistryManifests } from './icon-registry/manifests.js'; import { manifests as localizationManifests } from './localization/manifests.js'; import { manifests as modalManifests } from './modal/common/manifests.js'; +import { manifests as pickerModalManifests } from './picker-modal/manifests.js'; import { manifests as propertyActionManifests } from './property-action/manifests.js'; import { manifests as propertyTypeManifests } from './property-type/manifests.js'; import { manifests as recycleBinManifests } from './recycle-bin/manifests.js'; @@ -24,24 +25,25 @@ import type { ManifestTypes, UmbBackofficeManifestKind } from './extension-regis export const manifests: Array = [ ...authManifests, - ...extensionManifests, - ...iconRegistryManifests, - ...cultureManifests, - ...localizationManifests, - ...themeManifests, - ...sectionManifests, - ...treeManifests, ...collectionManifests, - ...workspaceManifests, ...contentManifests, ...contentTypeManifests, - ...propertyTypeManifests, - ...settingsManifests, - ...modalManifests, + ...cultureManifests, + ...debugManifests, ...entityActionManifests, ...entityBulkActionManifests, + ...extensionManifests, + ...iconRegistryManifests, + ...localizationManifests, + ...modalManifests, + ...pickerModalManifests, ...propertyActionManifests, - ...serverFileSystemManifests, - ...debugManifests, + ...propertyTypeManifests, ...recycleBinManifests, + ...sectionManifests, + ...serverFileSystemManifests, + ...settingsManifests, + ...themeManifests, + ...treeManifests, + ...workspaceManifests, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/manifests.ts new file mode 100644 index 0000000000..7504bc1bc5 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/manifests.ts @@ -0,0 +1,4 @@ +import { manifests as searchManifests } from './search/manifests.js'; +import type { ManifestTypes, UmbBackofficeManifestKind } from '@umbraco-cms/backoffice/extension-registry'; + +export const manifests: Array = [...searchManifests]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/manifests.ts new file mode 100644 index 0000000000..2a13be78ab --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/manifests.ts @@ -0,0 +1,4 @@ +import { manifests as resultItemManifests } from './result-item/manifests.js'; +import type { ManifestTypes, UmbBackofficeManifestKind } from '@umbraco-cms/backoffice/extension-registry'; + +export const manifests: Array = [...resultItemManifests]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/default/default-picker-search-result-item.context.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/default/default-picker-search-result-item.context.token.ts new file mode 100644 index 0000000000..554e05cae7 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/default/default-picker-search-result-item.context.token.ts @@ -0,0 +1,6 @@ +import type { UmbDefaultPickerSearchResultItemContext } from './default-picker-search-result-item.context.js'; +import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; + +export const UMB_PICKER_SEARCH_RESULT_ITEM_CONTEXT = new UmbContextToken( + 'UmbPickerSearchResultItemContext', +); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/default/default-picker-search-result-item.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/default/default-picker-search-result-item.context.ts new file mode 100644 index 0000000000..841e04017e --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/default/default-picker-search-result-item.context.ts @@ -0,0 +1,10 @@ +import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; +import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; + +export class UmbDefaultPickerSearchResultItemContext extends UmbContextBase { + constructor(host: UmbControllerHost) { + super(host, 'pickerSearchResultItem'); + } +} + +export { UmbDefaultPickerSearchResultItemContext as api }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/default/default-picker-search-result-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/default/default-picker-search-result-item.element.ts new file mode 100644 index 0000000000..0d2b199a3b --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/default/default-picker-search-result-item.element.ts @@ -0,0 +1,79 @@ +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { customElement, html, nothing, property, state } from '@umbraco-cms/backoffice/external/lit'; +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; +import type { UmbPickerModalContext } from '@umbraco-cms/backoffice/picker-modal'; +import { UMB_PICKER_MODAL_CONTEXT } from '@umbraco-cms/backoffice/picker-modal'; + +const elementName = 'umb-default-picker-search-result-item'; +@customElement(elementName) +export class UmbDefaultPickerSearchResultItemElement extends UmbLitElement { + #item?: any | undefined; + @property({ type: Object }) + public get item(): UmbDocumentItemModel | undefined { + return this.#item; + } + public set item(value: any | undefined) { + this.#item = value; + this.#observeIsSelected(); + } + + @state() + _isSelected = false; + + #pickerModalContext?: UmbPickerModalContext; + + constructor() { + super(); + + this.consumeContext(UMB_PICKER_MODAL_CONTEXT, (context) => { + this.#pickerModalContext = context; + this.#observeIsSelected(); + }); + } + + #observeIsSelected() { + const selectionManager = this.#pickerModalContext?.selection; + if (!selectionManager) return; + + const unique = this.item?.unique; + if (unique === undefined) return; + + this.observe(selectionManager.selection, () => { + this._isSelected = selectionManager.isSelected(unique); + console.log(this._isSelected); + }); + } + + override render() { + const item = this.item; + if (!item) return nothing; + + return html` + this.#pickerModalContext?.selection.select(item.unique)} + @deselected=${() => this.#pickerModalContext?.selection.deselect(item.unique)} + ?selected=${this._isSelected}> + ${this.#renderIcon()} + + `; + } + + #renderIcon() { + if (!this.item?.documentType.icon) return nothing; + return html``; + } + + static override styles = [UmbTextStyles]; +} + +export { UmbDocumentPickerSearchResultItemElement as element }; + +declare global { + interface HTMLElementTagNameMap { + [elementName]: UmbDocumentPickerSearchResultItemElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/default/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/default/manifests.ts new file mode 100644 index 0000000000..12711bdae6 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/default/manifests.ts @@ -0,0 +1,15 @@ +import type { ManifestTypes, UmbBackofficeManifestKind } from '@umbraco-cms/backoffice/extension-registry'; + +export const manifests: Array = [ + { + type: 'kind', + alias: 'Umb.Kind.PickerSearchResultItem.Default', + matchKind: 'default', + matchType: 'pickerSearchResultItem', + manifest: { + type: 'pickerSearchResultItem', + api: () => import('./default-picker-search-result-item.context.js'), + element: () => import('./default-picker-search-result-item.element.js'), + }, + }, +]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/manifests.ts new file mode 100644 index 0000000000..98e3dac659 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/manifests.ts @@ -0,0 +1,4 @@ +import { manifests as defaultManifests } from './default/manifests.js'; +import type { ManifestTypes, UmbBackofficeManifestKind } from '@umbraco-cms/backoffice/extension-registry'; + +export const manifests: Array = [...defaultManifests]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/manifests.ts index 2db7b348d4..f718ec4796 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/manifests.ts @@ -4,10 +4,9 @@ import type { ManifestTypes, UmbBackofficeManifestKind } from '@umbraco-cms/back export const manifests: Array = [ { type: 'pickerSearchResultItem', + kind: 'default', alias: 'Umb.PickerSearchResultItem.Document', name: 'Document Picker Search Result Item', - element: () => import('./document-picker-search-result-item.element.js'), - api: () => import('./document-picker-search-result-item.context.js'), forEntityTypes: [UMB_DOCUMENT_ENTITY_TYPE], }, ]; From 67aad3f8f465ab6528b393214324711ebdad2157 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 16 Aug 2024 10:38:08 +0200 Subject: [PATCH 061/102] use default kind + extension-slot element --- .../core/picker-modal/search/index.ts | 1 - .../picker-modal-search-result.element.ts | 6 +- ...fault-picker-search-result-item.context.ts | 3 +- ...fault-picker-search-result-item.element.ts | 15 ++-- .../picker-modal/search/result-item/index.ts | 1 - .../picker-search-result-item.element.ts | 57 ------------- ...ument-picker-search-result-item.context.ts | 10 --- ...ument-picker-search-result-item.element.ts | 80 ------------------- 8 files changed, 15 insertions(+), 158 deletions(-) delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/index.ts delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/picker-search-result-item.element.ts delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/document-picker-search-result-item.context.ts delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/document-picker-search-result-item.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/index.ts index 5d91395614..6a9f269a0b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/index.ts @@ -1,4 +1,3 @@ export * from './manager/index.js'; export * from './picker-modal-search-result.element.js'; export * from './picker-modal-search.element.js'; -export * from './result-item/index.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/picker-modal-search-result.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/picker-modal-search-result.element.ts index 87a4350854..0ee27a836d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/picker-modal-search-result.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/picker-modal-search-result.element.ts @@ -4,6 +4,7 @@ import { customElement, html, repeat, state } from '@umbraco-cms/backoffice/exte import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import type { UmbSearchRequestArgs } from '@umbraco-cms/backoffice/search'; import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; +import type { ManifestPickerSearchResultItem } from '@umbraco-cms/backoffice/extension-registry'; const elementName = 'umb-picker-modal-search-result'; @customElement(elementName) @@ -59,7 +60,10 @@ export class UmbPickerModalSearchResultElement extends UmbLitElement { #renderResultItem(item: UmbEntityModel) { return html` - + manifest.forEntityTypes.includes(item.entityType)} + .elementProps=${{ item }}> `; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/default/default-picker-search-result-item.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/default/default-picker-search-result-item.context.ts index 841e04017e..7204b6679d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/default/default-picker-search-result-item.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/default/default-picker-search-result-item.context.ts @@ -1,9 +1,10 @@ +import { UMB_PICKER_SEARCH_RESULT_ITEM_CONTEXT } from './default-picker-search-result-item.context.token.js'; import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; export class UmbDefaultPickerSearchResultItemContext extends UmbContextBase { constructor(host: UmbControllerHost) { - super(host, 'pickerSearchResultItem'); + super(host, UMB_PICKER_SEARCH_RESULT_ITEM_CONTEXT); } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/default/default-picker-search-result-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/default/default-picker-search-result-item.element.ts index 0d2b199a3b..9be9f74aea 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/default/default-picker-search-result-item.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/default/default-picker-search-result-item.element.ts @@ -3,16 +3,17 @@ import { customElement, html, nothing, property, state } from '@umbraco-cms/back import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import type { UmbPickerModalContext } from '@umbraco-cms/backoffice/picker-modal'; import { UMB_PICKER_MODAL_CONTEXT } from '@umbraco-cms/backoffice/picker-modal'; +import type { UmbSearchResultItemModel } from '@umbraco-cms/backoffice/search'; const elementName = 'umb-default-picker-search-result-item'; @customElement(elementName) export class UmbDefaultPickerSearchResultItemElement extends UmbLitElement { - #item?: any | undefined; + #item?: UmbSearchResultItemModel | undefined; @property({ type: Object }) - public get item(): UmbDocumentItemModel | undefined { + public get item(): UmbSearchResultItemModel | undefined { return this.#item; } - public set item(value: any | undefined) { + public set item(value: UmbSearchResultItemModel | undefined) { this.#item = value; this.#observeIsSelected(); } @@ -63,17 +64,17 @@ export class UmbDefaultPickerSearchResultItemElement extends UmbLitElement { } #renderIcon() { - if (!this.item?.documentType.icon) return nothing; - return html``; + if (!this.item?.icon) return nothing; + return html``; } static override styles = [UmbTextStyles]; } -export { UmbDocumentPickerSearchResultItemElement as element }; +export { UmbDefaultPickerSearchResultItemElement as element }; declare global { interface HTMLElementTagNameMap { - [elementName]: UmbDocumentPickerSearchResultItemElement; + [elementName]: UmbDefaultPickerSearchResultItemElement; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/index.ts deleted file mode 100644 index f8662c50d0..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './picker-search-result-item.element.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/picker-search-result-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/picker-search-result-item.element.ts deleted file mode 100644 index f26a04f3c9..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/picker-search-result-item.element.ts +++ /dev/null @@ -1,57 +0,0 @@ -import { customElement, property } from '@umbraco-cms/backoffice/external/lit'; -import type { ManifestTreeItem } from '@umbraco-cms/backoffice/extension-registry'; -import { - UmbExtensionElementAndApiSlotElementBase, - umbExtensionsRegistry, -} from '@umbraco-cms/backoffice/extension-registry'; -import { createObservablePart } from '@umbraco-cms/backoffice/observable-api'; - -const elementName = 'umb-picker-search-result-item'; -@customElement(elementName) -export class UmbPickerSearchResultItemElement extends UmbExtensionElementAndApiSlotElementBase { - _entityType?: string; - @property({ type: String, reflect: true }) - get entityType() { - return this._entityType; - } - set entityType(newVal) { - this._entityType = newVal; - this.#observeEntityType(); - } - - #observeEntityType() { - if (!this._entityType) return; - - const filterByEntityType = (manifest: ManifestTreeItem) => { - if (!this._entityType) return false; - return manifest.forEntityTypes.includes(this._entityType); - }; - - this.observe( - // TODO: what should we do if there are multiple items for an entity type? - // This method gets all extensions based on a type, then filters them based on the entity type. and then we get the alias of the first one [NL] - createObservablePart( - umbExtensionsRegistry.byTypeAndFilter(this.getExtensionType(), filterByEntityType), - (x) => x[0].alias, - ), - (alias) => { - this.alias = alias; - }, - 'umbObserveAlias', - ); - } - - getExtensionType() { - return 'pickerSearchResultItem'; - } - - getDefaultElementName() { - return 'umb-default-picker-search-result-item'; - } -} - -declare global { - interface HTMLElementTagNameMap { - [elementName]: UmbPickerSearchResultItemElement; - } -} diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/document-picker-search-result-item.context.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/document-picker-search-result-item.context.ts deleted file mode 100644 index 4fd318b5c0..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/document-picker-search-result-item.context.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; -import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; - -export class UmbDocumentPickerSearchResultItemContext extends UmbContextBase { - constructor(host: UmbControllerHost) { - super(host, 'pickerSearchResultItem'); - } -} - -export { UmbDocumentPickerSearchResultItemContext as api }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/document-picker-search-result-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/document-picker-search-result-item.element.ts deleted file mode 100644 index 85e434c396..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/document-picker-search-result-item.element.ts +++ /dev/null @@ -1,80 +0,0 @@ -import type { UmbDocumentItemModel } from '../repository/item/types.js'; -import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import { customElement, html, nothing, property, state } from '@umbraco-cms/backoffice/external/lit'; -import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import type { UmbPickerModalContext } from '@umbraco-cms/backoffice/picker-modal'; -import { UMB_PICKER_MODAL_CONTEXT } from '@umbraco-cms/backoffice/picker-modal'; - -const elementName = 'umb-document-picker-search-result-item'; -@customElement(elementName) -export class UmbDocumentPickerSearchResultItemElement extends UmbLitElement { - #item?: UmbDocumentItemModel | undefined; - @property({ type: Object }) - public get item(): UmbDocumentItemModel | undefined { - return this.#item; - } - public set item(value: UmbDocumentItemModel | undefined) { - this.#item = value; - this.#observeIsSelected(); - } - - @state() - _isSelected = false; - - #pickerModalContext?: UmbPickerModalContext; - - constructor() { - super(); - - this.consumeContext(UMB_PICKER_MODAL_CONTEXT, (context) => { - this.#pickerModalContext = context; - this.#observeIsSelected(); - }); - } - - #observeIsSelected() { - const selectionManager = this.#pickerModalContext?.selection; - if (!selectionManager) return; - - const unique = this.item?.unique; - if (unique === undefined) return; - - this.observe(selectionManager.selection, () => { - this._isSelected = selectionManager.isSelected(unique); - console.log(this._isSelected); - }); - } - - override render() { - const item = this.item; - if (!item) return nothing; - - return html` - this.#pickerModalContext?.selection.select(item.unique)} - @deselected=${() => this.#pickerModalContext?.selection.deselect(item.unique)} - ?selected=${this._isSelected}> - ${this.#renderIcon()} - - `; - } - - #renderIcon() { - if (!this.item?.documentType.icon) return nothing; - return html``; - } - - static override styles = [UmbTextStyles]; -} - -export { UmbDocumentPickerSearchResultItemElement as element }; - -declare global { - interface HTMLElementTagNameMap { - [elementName]: UmbDocumentPickerSearchResultItemElement; - } -} From b99acd613f8eb333b0771d12b5e4b6a0dfab6b0e Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 16 Aug 2024 10:57:43 +0200 Subject: [PATCH 062/102] move token back to modals --- .../components/input-document/input-document.context.ts | 4 ++-- .../src/packages/documents/documents/index.ts | 1 - .../{picker => modals}/document-picker-modal.token.ts | 0 .../src/packages/documents/documents/modals/index.ts | 1 + .../src/packages/documents/documents/picker/index.ts | 1 - .../documents/recycle-bin/entity-action/manifests.ts | 2 +- .../input-document-granular-user-permission.element.ts | 2 +- 7 files changed, 5 insertions(+), 6 deletions(-) rename src/Umbraco.Web.UI.Client/src/packages/documents/documents/{picker => modals}/document-picker-modal.token.ts (100%) delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/index.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.context.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.context.ts index e142386382..7f31b74cf7 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.context.ts @@ -1,5 +1,5 @@ -import type { UmbDocumentPickerModalData, UmbDocumentPickerModalValue } from '../../picker/index.js'; -import { UMB_DOCUMENT_PICKER_MODAL } from '../../picker/index.js'; +import type { UmbDocumentPickerModalData, UmbDocumentPickerModalValue } from '../../modals/index.js'; +import { UMB_DOCUMENT_PICKER_MODAL } from '../../modals/index.js'; import { UMB_DOCUMENT_ITEM_REPOSITORY_ALIAS } from '../../repository/index.js'; import type { UmbDocumentItemModel } from '../../repository/index.js'; import type { UmbDocumentTreeItemModel } from '../../tree/types.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/index.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/index.ts index cd01660773..16628f33b6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/index.ts @@ -12,7 +12,6 @@ export * from './reference/index.js'; export * from './repository/index.js'; export * from './user-permissions/index.js'; export * from './workspace/index.js'; -export * from './picker/index.js'; export * from './tree/index.js'; export { UMB_CONTENT_MENU_ALIAS } from './menu/manifests.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/document-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/document-picker-modal.token.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/document-picker-modal.token.ts rename to src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/document-picker-modal.token.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/index.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/index.ts index 06f584c66b..c83a3b1a93 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/index.ts @@ -4,4 +4,5 @@ export * from './save-modal/index.js'; export * from './unpublish-modal/index.js'; export * from './schedule-modal/index.js'; export * from './shared/index.js'; +export * from '../modals/document-picker-modal.token.js'; export type * from './types.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/index.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/index.ts deleted file mode 100644 index 822da85065..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './document-picker-modal.token.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/recycle-bin/entity-action/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/recycle-bin/entity-action/manifests.ts index 6afbe3525a..7b38600b9f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/recycle-bin/entity-action/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/recycle-bin/entity-action/manifests.ts @@ -2,7 +2,7 @@ import { UMB_DOCUMENT_RECYCLE_BIN_REPOSITORY_ALIAS } from '../repository/index.j import { UMB_DOCUMENT_ENTITY_TYPE } from '../../entity.js'; import { UMB_DOCUMENT_ITEM_REPOSITORY_ALIAS } from '../../repository/index.js'; import { UMB_DOCUMENT_RECYCLE_BIN_ROOT_ENTITY_TYPE } from '../entity.js'; -import { UMB_DOCUMENT_PICKER_MODAL } from '../../picker/index.js'; +import { UMB_DOCUMENT_PICKER_MODAL } from '../../modals/index.js'; import { UMB_USER_PERMISSION_DOCUMENT_DELETE, UMB_USER_PERMISSION_DOCUMENT_MOVE, diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/user-permissions/input-document-granular-user-permission/input-document-granular-user-permission.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/user-permissions/input-document-granular-user-permission/input-document-granular-user-permission.element.ts index 78954fe3b7..6ab1ecd687 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/user-permissions/input-document-granular-user-permission/input-document-granular-user-permission.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/user-permissions/input-document-granular-user-permission/input-document-granular-user-permission.element.ts @@ -1,6 +1,6 @@ import type { UmbDocumentUserPermissionModel } from '../types.js'; import { UmbDocumentItemRepository, type UmbDocumentItemModel } from '../../repository/index.js'; -import { UMB_DOCUMENT_PICKER_MODAL } from '../../picker/index.js'; +import { UMB_DOCUMENT_PICKER_MODAL } from '../../modals/index.js'; import { css, customElement, html, repeat, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import type { UmbModalManagerContext } from '@umbraco-cms/backoffice/modal'; From 953fc18bb5fffe1c57f9f668555c8889afafb933 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 16 Aug 2024 11:03:29 +0200 Subject: [PATCH 063/102] rename folder to picker --- .../src/packages/core/{picker-modal => picker}/index.ts | 0 .../src/packages/core/{picker-modal => picker}/manifests.ts | 0 .../core/{picker-modal => picker}/picker-modal.context.token.ts | 0 .../core/{picker-modal => picker}/picker-modal.context.ts | 0 .../src/packages/core/{picker-modal => picker}/search/index.ts | 0 .../core/{picker-modal => picker}/search/manager/index.ts | 0 .../search/manager/picker-modal-search.manager.ts | 0 .../core/{picker-modal => picker}/search/manager/types.ts | 0 .../packages/core/{picker-modal => picker}/search/manifests.ts | 0 .../search/picker-modal-search-result.element.ts | 0 .../search/picker-modal-search.element.ts | 0 .../default/default-picker-search-result-item.context.token.ts | 0 .../default/default-picker-search-result-item.context.ts | 0 .../default/default-picker-search-result-item.element.ts | 0 .../search/result-item/default/manifests.ts | 0 .../core/{picker-modal => picker}/search/result-item/manifests.ts | 0 16 files changed, 0 insertions(+), 0 deletions(-) rename src/Umbraco.Web.UI.Client/src/packages/core/{picker-modal => picker}/index.ts (100%) rename src/Umbraco.Web.UI.Client/src/packages/core/{picker-modal => picker}/manifests.ts (100%) rename src/Umbraco.Web.UI.Client/src/packages/core/{picker-modal => picker}/picker-modal.context.token.ts (100%) rename src/Umbraco.Web.UI.Client/src/packages/core/{picker-modal => picker}/picker-modal.context.ts (100%) rename src/Umbraco.Web.UI.Client/src/packages/core/{picker-modal => picker}/search/index.ts (100%) rename src/Umbraco.Web.UI.Client/src/packages/core/{picker-modal => picker}/search/manager/index.ts (100%) rename src/Umbraco.Web.UI.Client/src/packages/core/{picker-modal => picker}/search/manager/picker-modal-search.manager.ts (100%) rename src/Umbraco.Web.UI.Client/src/packages/core/{picker-modal => picker}/search/manager/types.ts (100%) rename src/Umbraco.Web.UI.Client/src/packages/core/{picker-modal => picker}/search/manifests.ts (100%) rename src/Umbraco.Web.UI.Client/src/packages/core/{picker-modal => picker}/search/picker-modal-search-result.element.ts (100%) rename src/Umbraco.Web.UI.Client/src/packages/core/{picker-modal => picker}/search/picker-modal-search.element.ts (100%) rename src/Umbraco.Web.UI.Client/src/packages/core/{picker-modal => picker}/search/result-item/default/default-picker-search-result-item.context.token.ts (100%) rename src/Umbraco.Web.UI.Client/src/packages/core/{picker-modal => picker}/search/result-item/default/default-picker-search-result-item.context.ts (100%) rename src/Umbraco.Web.UI.Client/src/packages/core/{picker-modal => picker}/search/result-item/default/default-picker-search-result-item.element.ts (100%) rename src/Umbraco.Web.UI.Client/src/packages/core/{picker-modal => picker}/search/result-item/default/manifests.ts (100%) rename src/Umbraco.Web.UI.Client/src/packages/core/{picker-modal => picker}/search/result-item/manifests.ts (100%) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/index.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/index.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/picker/index.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/manifests.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/manifests.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/picker/manifests.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/picker-modal.context.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/picker-modal.context.token.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/picker-modal.context.token.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/picker/picker-modal.context.token.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/picker-modal.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/picker-modal.context.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/picker-modal.context.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/picker/picker-modal.context.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/index.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/index.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/picker/search/index.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/manager/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/index.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/manager/index.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/index.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/manager/picker-modal-search.manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/picker-modal-search.manager.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/manager/picker-modal-search.manager.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/picker-modal-search.manager.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/manager/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/types.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/manager/types.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/types.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manifests.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/manifests.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manifests.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/picker-modal-search-result.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-modal-search-result.element.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/picker-modal-search-result.element.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-modal-search-result.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/picker-modal-search.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-modal-search.element.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/picker-modal-search.element.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-modal-search.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/default/default-picker-search-result-item.context.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/default/default-picker-search-result-item.context.token.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/default/default-picker-search-result-item.context.token.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/default/default-picker-search-result-item.context.token.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/default/default-picker-search-result-item.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/default/default-picker-search-result-item.context.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/default/default-picker-search-result-item.context.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/default/default-picker-search-result-item.context.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/default/default-picker-search-result-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/default/default-picker-search-result-item.element.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/default/default-picker-search-result-item.element.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/default/default-picker-search-result-item.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/default/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/default/manifests.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/default/manifests.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/default/manifests.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/manifests.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/manifests.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/manifests.ts From fda4f735f577164e08071e62a342547f77b2313f Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 16 Aug 2024 11:04:15 +0200 Subject: [PATCH 064/102] rename module --- src/Umbraco.Web.UI.Client/package.json | 2 +- src/Umbraco.Web.UI.Client/tsconfig.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json index 5eac58763e..10bff7284d 100644 --- a/src/Umbraco.Web.UI.Client/package.json +++ b/src/Umbraco.Web.UI.Client/package.json @@ -28,7 +28,7 @@ "./content-type": "./dist-cms/packages/core/content-type/index.js", "./content": "./dist-cms/packages/core/content/index.js", "./culture": "./dist-cms/packages/core/culture/index.js", - "./picker-modal": "./dist-cms/packages/core/picker-modal/index.js", + "./picker": "./dist-cms/packages/core/picker/index.js", "./current-user": "./dist-cms/packages/user/current-user/index.js", "./data-type": "./dist-cms/packages/data-type/index.js", "./debug": "./dist-cms/packages/core/debug/index.js", diff --git a/src/Umbraco.Web.UI.Client/tsconfig.json b/src/Umbraco.Web.UI.Client/tsconfig.json index 506f62fb6f..13058d558f 100644 --- a/src/Umbraco.Web.UI.Client/tsconfig.json +++ b/src/Umbraco.Web.UI.Client/tsconfig.json @@ -54,7 +54,7 @@ DON'T EDIT THIS FILE DIRECTLY. It is generated by /devops/tsconfig/index.js "@umbraco-cms/backoffice/content-type": ["./src/packages/core/content-type/index.ts"], "@umbraco-cms/backoffice/content": ["./src/packages/core/content/index.ts"], "@umbraco-cms/backoffice/culture": ["./src/packages/core/culture/index.ts"], - "@umbraco-cms/backoffice/picker-modal": ["./src/packages/core/picker-modal/index.ts"], + "@umbraco-cms/backoffice/picker": ["./src/packages/core/picker/index.ts"], "@umbraco-cms/backoffice/current-user": ["./src/packages/user/current-user/index.ts"], "@umbraco-cms/backoffice/data-type": ["./src/packages/data-type/index.ts"], "@umbraco-cms/backoffice/debug": ["./src/packages/core/debug/index.ts"], From 5c48ce2521638a1eacbf7eaa51fbf79fd616532f Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 16 Aug 2024 11:06:17 +0200 Subject: [PATCH 065/102] rename manager --- .../core/picker/picker-modal.context.ts | 4 +- .../core/picker/search/manager/index.ts | 2 +- ...ch.manager.ts => picker-search.manager.ts} | 46 +++++++++---------- .../core/picker/search/manager/types.ts | 2 +- 4 files changed, 27 insertions(+), 27 deletions(-) rename src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/{picker-modal-search.manager.ts => picker-search.manager.ts} (79%) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/picker-modal.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/picker-modal.context.ts index 6850d916f8..e7e94f175a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker/picker-modal.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/picker-modal.context.ts @@ -1,5 +1,5 @@ import { UMB_PICKER_MODAL_CONTEXT } from './picker-modal.context.token.js'; -import { UmbPickerModalSearchManager } from './search/manager/picker-modal-search.manager.js'; +import { UmbPickerSearchManager } from './search/manager/picker-search.manager.js'; import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; import { UmbSelectionManager } from '@umbraco-cms/backoffice/utils'; @@ -10,7 +10,7 @@ export class UmbPickerModalContext< ModalDataType extends UmbPickerModalData = UmbPickerModalData, > extends UmbContextBase { public readonly selection = new UmbSelectionManager(this); - public readonly search = new UmbPickerModalSearchManager(this); + public readonly search = new UmbPickerSearchManager(this); #data = new UmbObjectState(undefined); public readonly data = this.#data.asObservable(); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/index.ts index c5be7c8813..2eea098988 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/index.ts @@ -1,2 +1,2 @@ -export * from './picker-modal-search.manager.js'; +export * from './picker-search.manager.js'; export * from './types.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/picker-modal-search.manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/picker-search.manager.ts similarity index 79% rename from src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/picker-modal-search.manager.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/picker-search.manager.ts index 42b47316fe..aa72e52e00 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/picker-modal-search.manager.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/picker-search.manager.ts @@ -1,4 +1,4 @@ -import type { UmbPickerModalSearchManagerConfig } from './types.js'; +import type { UmbPickerSearchManagerConfig } from './types.js'; import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; @@ -10,12 +10,12 @@ import { debounce } from '@umbraco-cms/backoffice/utils'; /** * A manager for searching items in a picker modal. * @exports - * @class UmbPickerModalSearchManager + * @class UmbPickerSearchManager * @augments {UmbControllerBase} * @template ResultItemType * @template QueryType */ -export class UmbPickerModalSearchManager< +export class UmbPickerSearchManager< ResultItemType extends UmbEntityModel = UmbEntityModel, QueryType extends UmbSearchRequestArgs = UmbSearchRequestArgs, > extends UmbControllerBase { @@ -34,14 +34,14 @@ export class UmbPickerModalSearchManager< #resultTotalItems = new UmbNumberState(0); public readonly resultTotalItems = this.#resultTotalItems.asObservable(); - #config?: UmbPickerModalSearchManagerConfig; + #config?: UmbPickerSearchManagerConfig; // TODO: lower requirement for search provider item type #searchProvider?: UmbSearchProvider; /** - * Creates an instance of UmbPickerModalSearchManager. + * Creates an instance of UmbPickerSearchManager. * @param {UmbControllerHost} host The controller host for the search manager. - * @memberof UmbPickerModalSearchManager + * @memberof UmbPickerSearchManager */ constructor(host: UmbControllerHost) { super(host); @@ -49,37 +49,37 @@ export class UmbPickerModalSearchManager< /** * Set the configuration for the search manager. - * @param {UmbPickerModalSearchManagerConfig} config The configuration for the search manager. - * @memberof UmbPickerModalSearchManager + * @param {UmbPickerSearchManagerConfig} config The configuration for the search manager. + * @memberof UmbPickerSearchManager */ - public setConfig(config: UmbPickerModalSearchManagerConfig) { + public setConfig(config: UmbPickerSearchManagerConfig) { this.#config = config; this.#initSearch(); } /** * Get the current configuration for the search manager. - * @returns {UmbPickerModalSearchManagerConfig | undefined} The current configuration for the search manager. - * @memberof UmbPickerModalSearchManager + * @returns {UmbPickerSearchManagerConfig | undefined} The current configuration for the search manager. + * @memberof UmbPickerSearchManager */ - public getConfig(): UmbPickerModalSearchManagerConfig | undefined { + public getConfig(): UmbPickerSearchManagerConfig | undefined { return this.#config; } /** * Update the current configuration for the search manager. - * @param {Partial} partialConfig - * @memberof UmbPickerModalSearchManager + * @param {Partial} partialConfig + * @memberof UmbPickerSearchManager */ - public updateConfig(partialConfig: Partial) { - const mergedConfig = { ...this.#config, ...partialConfig } as UmbPickerModalSearchManagerConfig; + public updateConfig(partialConfig: Partial) { + const mergedConfig = { ...this.#config, ...partialConfig } as UmbPickerSearchManagerConfig; this.setConfig(mergedConfig); } /** * Returns whether items can be searched. * @returns {boolean} Whether items can be searched. - * @memberof UmbPickerModalSearchManager + * @memberof UmbPickerSearchManager */ public getSearchable(): boolean { return this.#searchable.getValue(); @@ -88,7 +88,7 @@ export class UmbPickerModalSearchManager< /** * Sets whether items can be searched. * @param {boolean} value Whether items can be searched. - * @memberof UmbPickerModalSearchManager + * @memberof UmbPickerSearchManager */ public setSearchable(value: boolean) { this.#searchable.setValue(value); @@ -96,7 +96,7 @@ export class UmbPickerModalSearchManager< /** * Search for items based on the current query. - * @memberof UmbPickerModalSearchManager + * @memberof UmbPickerSearchManager */ public search() { if (this.getSearchable() === false) throw new Error('Search is not enabled'); @@ -113,7 +113,7 @@ export class UmbPickerModalSearchManager< /** * Clear the current search query and result items. - * @memberof UmbPickerModalSearchManager + * @memberof UmbPickerSearchManager */ public clear() { this.#query.setValue(undefined); @@ -125,7 +125,7 @@ export class UmbPickerModalSearchManager< /** * Set the search query. * @param {QueryType} query The search query. - * @memberof UmbPickerModalSearchManager + * @memberof UmbPickerSearchManager */ public setQuery(query: QueryType) { if (this.getSearchable() === false) throw new Error('Search is not enabled'); @@ -139,7 +139,7 @@ export class UmbPickerModalSearchManager< /** * Get the current search query. - * @memberof UmbPickerModalSearchManager + * @memberof UmbPickerSearchManager * @returns {QueryType | undefined} The current search query. */ public getQuery(): QueryType | undefined { @@ -149,7 +149,7 @@ export class UmbPickerModalSearchManager< /** * Update the current search query. * @param {Partial} query - * @memberof UmbPickerModalSearchManager + * @memberof UmbPickerSearchManager */ public updateQuery(query: Partial) { const mergedQuery = { ...this.getQuery(), ...query } as QueryType; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/types.ts index b51bd1e30e..9e4468e7fc 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/types.ts @@ -1,3 +1,3 @@ -export interface UmbPickerModalSearchManagerConfig { +export interface UmbPickerSearchManagerConfig { providerAlias: string; } From db22959d41a229abb716482ac96fb9ab93ba00df Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 16 Aug 2024 11:06:45 +0200 Subject: [PATCH 066/102] remove modal --- .../core/picker/search/manager/picker-search.manager.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/picker-search.manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/picker-search.manager.ts index aa72e52e00..343f87ef6a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/picker-search.manager.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/picker-search.manager.ts @@ -8,7 +8,7 @@ import type { UmbSearchProvider, UmbSearchRequestArgs } from '@umbraco-cms/backo import { debounce } from '@umbraco-cms/backoffice/utils'; /** - * A manager for searching items in a picker modal. + * A manager for searching items in a picker. * @exports * @class UmbPickerSearchManager * @augments {UmbControllerBase} From 58c394415f55b8a8d47c7f53cb1d4a2a88acac5a Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 16 Aug 2024 11:19:23 +0200 Subject: [PATCH 067/102] remove modal in name --- .../collection-item-picker-modal.context.ts | 6 +-- .../src/packages/core/manifests.ts | 4 +- .../src/packages/core/picker/index.ts | 5 ++- .../core/picker/picker-modal.context.token.ts | 4 -- .../core/picker/picker-modal.context.ts | 45 ------------------- .../core/picker/picker.context.token.ts | 4 ++ .../packages/core/picker/picker.context.ts | 45 +++++++++++++++++++ .../src/packages/core/picker/search/index.ts | 4 +- ...ent.ts => picker-search-result.element.ts} | 8 ++-- ...ch.element.ts => picker-search.element.ts} | 26 +++++------ ...fault-picker-search-result-item.element.ts | 16 +++---- .../src/packages/core/picker/types.ts | 5 +++ .../tree-picker/tree-picker-modal.context.ts | 6 +-- .../tree-picker/tree-picker-modal.element.ts | 21 +++++---- .../member-picker-modal.element.ts | 6 +-- 15 files changed, 105 insertions(+), 100 deletions(-) delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/picker/picker-modal.context.token.ts delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/picker/picker-modal.context.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/picker/picker.context.token.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/picker/picker.context.ts rename src/Umbraco.Web.UI.Client/src/packages/core/picker/search/{picker-modal-search-result.element.ts => picker-search-result.element.ts} (87%) rename src/Umbraco.Web.UI.Client/src/packages/core/picker/search/{picker-modal-search.element.ts => picker-search.element.ts} (67%) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/picker/types.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-item-picker-modal/collection-item-picker-modal.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-item-picker-modal/collection-item-picker-modal.context.ts index d19394e3e6..b620f2d892 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-item-picker-modal/collection-item-picker-modal.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-item-picker-modal/collection-item-picker-modal.context.ts @@ -1,10 +1,10 @@ -import { UmbPickerModalContext } from '@umbraco-cms/backoffice/picker-modal'; +import { UmbPickerContext } from '@umbraco-cms/backoffice/picker'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; -export class UmbCollectionItemPickerModalContext extends UmbPickerModalContext { +export class UmbCollectionItemPickerContext extends UmbPickerContext { constructor(host: UmbControllerHost) { super(host); } } -export { UmbCollectionItemPickerModalContext as api }; +export { UmbCollectionItemPickerContext as api }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/manifests.ts index 777bebacb6..0f01fd1342 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/manifests.ts @@ -10,7 +10,7 @@ import { manifests as extensionManifests } from './extension-registry/manifests. import { manifests as iconRegistryManifests } from './icon-registry/manifests.js'; import { manifests as localizationManifests } from './localization/manifests.js'; import { manifests as modalManifests } from './modal/common/manifests.js'; -import { manifests as pickerModalManifests } from './picker-modal/manifests.js'; +import { manifests as pickerManifests } from './picker/manifests.js'; import { manifests as propertyActionManifests } from './property-action/manifests.js'; import { manifests as propertyTypeManifests } from './property-type/manifests.js'; import { manifests as recycleBinManifests } from './recycle-bin/manifests.js'; @@ -36,7 +36,7 @@ export const manifests: Array = [ ...iconRegistryManifests, ...localizationManifests, ...modalManifests, - ...pickerModalManifests, + ...pickerManifests, ...propertyActionManifests, ...propertyTypeManifests, ...recycleBinManifests, diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/index.ts index 9b7375365b..b19f3e47db 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/index.ts @@ -1,3 +1,4 @@ export * from './search/index.js'; -export * from './picker-modal.context.js'; -export * from './picker-modal.context.token.js'; +export * from './picker.context.js'; +export * from './picker.context.token.js'; +export * from './types.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/picker-modal.context.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/picker-modal.context.token.ts deleted file mode 100644 index 84381897af..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker/picker-modal.context.token.ts +++ /dev/null @@ -1,4 +0,0 @@ -import type { UmbPickerModalContext } from './picker-modal.context.js'; -import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; - -export const UMB_PICKER_MODAL_CONTEXT = new UmbContextToken('UmbPickerModalContext'); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/picker-modal.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/picker-modal.context.ts deleted file mode 100644 index e7e94f175a..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker/picker-modal.context.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { UMB_PICKER_MODAL_CONTEXT } from './picker-modal.context.token.js'; -import { UmbPickerSearchManager } from './search/manager/picker-search.manager.js'; -import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; -import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; -import { UmbSelectionManager } from '@umbraco-cms/backoffice/utils'; -import type { UmbPickerModalData } from '@umbraco-cms/backoffice/modal'; -import { UmbObjectState } from '@umbraco-cms/backoffice/observable-api'; - -export class UmbPickerModalContext< - ModalDataType extends UmbPickerModalData = UmbPickerModalData, -> extends UmbContextBase { - public readonly selection = new UmbSelectionManager(this); - public readonly search = new UmbPickerSearchManager(this); - - #data = new UmbObjectState(undefined); - public readonly data = this.#data.asObservable(); - - constructor(host: UmbControllerHost) { - super(host, UMB_PICKER_MODAL_CONTEXT); - } - - /** - * Set the data for the picker modal - * @param {ModalDataType} data - * @memberof UmbPickerModalContext - */ - setData(data: ModalDataType | undefined) { - const searchProviderAlias = data?.search?.providerAlias; - if (searchProviderAlias) { - this.search.updateConfig({ providerAlias: searchProviderAlias }); - this.search.setSearchable(true); - } else { - this.search.setSearchable(false); - } - } - - /** - * Get the data for the picker modal - * @returns {ModalDataType | undefined} - * @memberof UmbPickerModalContext - */ - getData(): ModalDataType | undefined { - return this.#data.getValue(); - } -} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/picker.context.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/picker.context.token.ts new file mode 100644 index 0000000000..cb8321169c --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/picker.context.token.ts @@ -0,0 +1,4 @@ +import type { UmbPickerContext } from './picker.context.js'; +import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; + +export const UMB_PICKER_CONTEXT = new UmbContextToken('UmbPickerModalContext'); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/picker.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/picker.context.ts new file mode 100644 index 0000000000..2db249670b --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/picker.context.ts @@ -0,0 +1,45 @@ +import { UMB_PICKER_CONTEXT } from './picker.context.token.js'; +import { UmbPickerSearchManager } from './search/manager/picker-search.manager.js'; +import type { UmbPickerContextConfig } from './types.js'; +import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; +import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; +import { UmbSelectionManager } from '@umbraco-cms/backoffice/utils'; +import { UmbObjectState } from '@umbraco-cms/backoffice/observable-api'; + +export class UmbPickerContext< + ConfigType extends UmbPickerContextConfig = UmbPickerContextConfig, +> extends UmbContextBase { + public readonly selection = new UmbSelectionManager(this); + public readonly search = new UmbPickerSearchManager(this); + + #config = new UmbObjectState(undefined); + public readonly config = this.#config.asObservable(); + + constructor(host: UmbControllerHost) { + super(host, UMB_PICKER_CONTEXT); + } + + /** + * Set the config for the picker + * @param {ConfigType} config + * @memberof UmbPickerContext + */ + setConfig(config: ConfigType | undefined) { + const searchProviderAlias = config?.search?.providerAlias; + if (searchProviderAlias) { + this.search.updateConfig({ providerAlias: searchProviderAlias }); + this.search.setSearchable(true); + } else { + this.search.setSearchable(false); + } + } + + /** + * Get the data for the picker + * @returns {ConfigType | undefined} + * @memberof UmbPickerContext + */ + getConfig(): ConfigType | undefined { + return this.#config.getValue(); + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/index.ts index 6a9f269a0b..d60af64ba0 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/index.ts @@ -1,3 +1,3 @@ export * from './manager/index.js'; -export * from './picker-modal-search-result.element.js'; -export * from './picker-modal-search.element.js'; +export * from './picker-search-result.element.js'; +export * from './picker-search.element.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-modal-search-result.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search-result.element.ts similarity index 87% rename from src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-modal-search-result.element.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search-result.element.ts index 0ee27a836d..675843bcb9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-modal-search-result.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search-result.element.ts @@ -1,5 +1,5 @@ -import { UMB_PICKER_MODAL_CONTEXT } from '../picker-modal.context.token.js'; -import type { UmbPickerModalContext } from '../picker-modal.context.js'; +import { UMB_PICKER_CONTEXT } from '../picker.context.token.js'; +import type { UmbPickerContext } from '../picker.context.js'; import { customElement, html, repeat, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import type { UmbSearchRequestArgs } from '@umbraco-cms/backoffice/search'; @@ -18,12 +18,12 @@ export class UmbPickerModalSearchResultElement extends UmbLitElement { @state() _items: UmbEntityModel[] = []; - #pickerModalContext?: UmbPickerModalContext; + #pickerModalContext?: UmbPickerContext; constructor() { super(); - this.consumeContext(UMB_PICKER_MODAL_CONTEXT, (context) => { + this.consumeContext(UMB_PICKER_CONTEXT, (context) => { this.#pickerModalContext = context; this.observe(this.#pickerModalContext.search.query, (query) => { diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-modal-search.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search.element.ts similarity index 67% rename from src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-modal-search.element.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search.element.ts index 5e31f1a340..47dacd85f7 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-modal-search.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search.element.ts @@ -1,32 +1,32 @@ -import type { UmbPickerModalContext } from '../picker-modal.context.js'; -import { UMB_PICKER_MODAL_CONTEXT } from '../picker-modal.context.token.js'; +import type { UmbPickerContext as UmbPickerContext } from '../picker.context.js'; +import { UMB_PICKER_CONTEXT } from '../picker.context.token.js'; import type { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; import { html, customElement, state, nothing, css } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -const elementName = 'umb-picker-modal-search'; +const elementName = 'umb-picker-search'; @customElement(elementName) -export class UmbPickerModalSearchElement extends UmbLitElement { +export class UmbPickerSearchElement extends UmbLitElement { @state() _query: string = ''; @state() _searching: boolean = false; - #pickerModalContext?: UmbPickerModalContext; + #pickerContext?: UmbPickerContext; constructor() { super(); - this.consumeContext(UMB_PICKER_MODAL_CONTEXT, (context) => { - this.#pickerModalContext = context; + this.consumeContext(UMB_PICKER_CONTEXT, (context) => { + this.#pickerContext = context; - this.observe(this.#pickerModalContext.search.searching, (searching) => { + this.observe(this.#pickerContext.search.searching, (searching) => { this._searching = searching; }); - this.observe(this.#pickerModalContext.search.query, (query) => { + this.observe(this.#pickerContext.search.query, (query) => { this._query = query?.query || ''; }); }); @@ -34,8 +34,8 @@ export class UmbPickerModalSearchElement extends UmbLitElement { #onInput(event: UUIInputEvent) { const value = event.target.value as string; - this.#pickerModalContext?.search.updateQuery({ query: value }); - this.#pickerModalContext?.search.search(); + this.#pickerContext?.search.updateQuery({ query: value }); + this.#pickerContext?.search.search(); } override render() { @@ -49,7 +49,7 @@ export class UmbPickerModalSearchElement extends UmbLitElement { ${this._query ? html` - this.#pickerModalContext?.search.clear()} compact> + this.#pickerContext?.search.clear()} compact> ` @@ -84,6 +84,6 @@ export class UmbPickerModalSearchElement extends UmbLitElement { declare global { interface HTMLElementTagNameMap { - [elementName]: UmbPickerModalSearchElement; + [elementName]: UmbPickerSearchElement; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/default/default-picker-search-result-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/default/default-picker-search-result-item.element.ts index 9be9f74aea..fa39e24c60 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/default/default-picker-search-result-item.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/default/default-picker-search-result-item.element.ts @@ -1,8 +1,8 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { customElement, html, nothing, property, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import type { UmbPickerModalContext } from '@umbraco-cms/backoffice/picker-modal'; -import { UMB_PICKER_MODAL_CONTEXT } from '@umbraco-cms/backoffice/picker-modal'; +import type { UmbPickerContext } from '@umbraco-cms/backoffice/picker'; +import { UMB_PICKER_CONTEXT } from '@umbraco-cms/backoffice/picker'; import type { UmbSearchResultItemModel } from '@umbraco-cms/backoffice/search'; const elementName = 'umb-default-picker-search-result-item'; @@ -21,19 +21,19 @@ export class UmbDefaultPickerSearchResultItemElement extends UmbLitElement { @state() _isSelected = false; - #pickerModalContext?: UmbPickerModalContext; + #pickerContext?: UmbPickerContext; constructor() { super(); - this.consumeContext(UMB_PICKER_MODAL_CONTEXT, (context) => { - this.#pickerModalContext = context; + this.consumeContext(UMB_PICKER_CONTEXT, (context) => { + this.#pickerContext = context; this.#observeIsSelected(); }); } #observeIsSelected() { - const selectionManager = this.#pickerModalContext?.selection; + const selectionManager = this.#pickerContext?.selection; if (!selectionManager) return; const unique = this.item?.unique; @@ -55,8 +55,8 @@ export class UmbDefaultPickerSearchResultItemElement extends UmbLitElement { id=${item.unique} readonly selectable - @selected=${() => this.#pickerModalContext?.selection.select(item.unique)} - @deselected=${() => this.#pickerModalContext?.selection.deselect(item.unique)} + @selected=${() => this.#pickerContext?.selection.select(item.unique)} + @deselected=${() => this.#pickerContext?.selection.deselect(item.unique)} ?selected=${this._isSelected}> ${this.#renderIcon()} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/types.ts new file mode 100644 index 0000000000..7aeeb1121d --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/types.ts @@ -0,0 +1,5 @@ +export interface UmbPickerContextConfig { + search?: { + providerAlias: string; + }; +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.context.ts index d1b5f31db7..99f163c25c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.context.ts @@ -1,10 +1,10 @@ -import { UmbPickerModalContext } from '@umbraco-cms/backoffice/picker-modal'; +import { UmbPickerContext } from '@umbraco-cms/backoffice/picker'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; -export class UmbTreeItemPickerModalContext extends UmbPickerModalContext { +export class UmbTreeItemPickerContext extends UmbPickerContext { constructor(host: UmbControllerHost) { super(host); } } -export { UmbTreeItemPickerModalContext as api }; +export { UmbTreeItemPickerContext as api }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts index 7ff48854b8..36f0a9c7e9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts @@ -1,6 +1,6 @@ import type { UmbTreeSelectionConfiguration } from '../types.js'; import type { UmbTreePickerModalData, UmbTreePickerModalValue } from './tree-picker-modal.token.js'; -import { UmbTreeItemPickerModalContext } from './tree-picker-modal.context.js'; +import { UmbTreeItemPickerContext } from './tree-picker-modal.context.js'; import type { PropertyValueMap } from '@umbraco-cms/backoffice/external/lit'; import { html, customElement, state, ifDefined, nothing } from '@umbraco-cms/backoffice/external/lit'; import { UMB_WORKSPACE_MODAL, UmbModalBaseElement } from '@umbraco-cms/backoffice/modal'; @@ -29,12 +29,11 @@ export class UmbTreePickerModalElement { this.updateValue({ selection }); this.requestUpdate(); @@ -81,7 +80,7 @@ export class UmbTreePickerModalElement { this._searchQuery = query?.query; }, @@ -92,13 +91,13 @@ export class UmbTreePickerModalElement | Map) { super.updated(_changedProperties); if (_changedProperties.has('data') && this.data) { - this.#api.setData(this.data); + this.#pickerContext.setConfig(this.data); } } From 994491ac16b07a03e80f8bd43eea52d22b325cb8 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 16 Aug 2024 11:22:37 +0200 Subject: [PATCH 068/102] align naming --- .../packages/core/picker/picker.context.token.ts | 2 +- .../search/picker-search-result.element.ts | 16 ++++++++-------- .../tree-picker/tree-picker-modal.element.ts | 4 ++-- .../member-picker-modal.element.ts | 4 ++-- 4 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/picker.context.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/picker.context.token.ts index cb8321169c..3973df1bfa 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker/picker.context.token.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/picker.context.token.ts @@ -1,4 +1,4 @@ import type { UmbPickerContext } from './picker.context.js'; import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; -export const UMB_PICKER_CONTEXT = new UmbContextToken('UmbPickerModalContext'); +export const UMB_PICKER_CONTEXT = new UmbContextToken('UmbPickerContext'); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search-result.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search-result.element.ts index 675843bcb9..2d7881da43 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search-result.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search-result.element.ts @@ -6,9 +6,9 @@ import type { UmbSearchRequestArgs } from '@umbraco-cms/backoffice/search'; import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; import type { ManifestPickerSearchResultItem } from '@umbraco-cms/backoffice/extension-registry'; -const elementName = 'umb-picker-modal-search-result'; +const elementName = 'umb-picker-search-result'; @customElement(elementName) -export class UmbPickerModalSearchResultElement extends UmbLitElement { +export class UmbPickerSearchResultElement extends UmbLitElement { @state() _query?: UmbSearchRequestArgs; @@ -18,23 +18,23 @@ export class UmbPickerModalSearchResultElement extends UmbLitElement { @state() _items: UmbEntityModel[] = []; - #pickerModalContext?: UmbPickerContext; + #pickerContext?: UmbPickerContext; constructor() { super(); this.consumeContext(UMB_PICKER_CONTEXT, (context) => { - this.#pickerModalContext = context; + this.#pickerContext = context; - this.observe(this.#pickerModalContext.search.query, (query) => { + this.observe(this.#pickerContext.search.query, (query) => { this._query = query; }); - this.observe(this.#pickerModalContext.search.searching, (query) => { + this.observe(this.#pickerContext.search.searching, (query) => { this._searching = query; }); - this.observe(this.#pickerModalContext.search.resultItems, (items) => { + this.observe(this.#pickerContext.search.resultItems, (items) => { this._items = items; }); }); @@ -70,6 +70,6 @@ export class UmbPickerModalSearchResultElement extends UmbLitElement { declare global { interface HTMLElementTagNameMap { - [elementName]: UmbPickerModalSearchResultElement; + [elementName]: UmbPickerSearchResultElement; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts index 36f0a9c7e9..f082c8d041 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts @@ -146,8 +146,8 @@ export class UmbTreePickerModalElement - + + `; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts index a8ee6e5a49..959607265c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts @@ -66,8 +66,8 @@ export class UmbMemberPickerModalElement extends UmbModalBaseElement< return html` - - + + ${this.#renderItems()} ${this.#renderActions()} From 61e5542e01da307b6276f840bcd6afaff5391133 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 16 Aug 2024 12:15:49 +0200 Subject: [PATCH 069/102] register member picker search result item --- .../src/packages/members/member/manifests.ts | 7 +++++-- .../src/packages/members/member/picker/manifests.ts | 12 ++++++++++++ 2 files changed, 17 insertions(+), 2 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/members/member/picker/manifests.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member/manifests.ts index 9fc3d327bf..1a80cef0a9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member/manifests.ts @@ -1,17 +1,20 @@ import { manifests as collectionManifests } from './collection/manifests.js'; import { manifests as entityActionManifests } from './entity-actions/manifests.js'; import { manifests as memberPickerModalManifests } from './components/member-picker-modal/manifests.js'; +import { manifests as pickerManifests } from './picker/manifests.js'; import { manifests as propertyEditorManifests } from './property-editor/manifests.js'; import { manifests as repositoryManifests } from './repository/manifests.js'; import { manifests as searchManifests } from './search/manifests.js'; import { manifests as sectionViewManifests } from './section-view/manifests.js'; import { manifests as workspaceManifests } from './workspace/manifests.js'; -import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry'; -export const manifests: Array = [ +import type { ManifestTypes, UmbBackofficeManifestKind } from '@umbraco-cms/backoffice/extension-registry'; + +export const manifests: Array = [ ...collectionManifests, ...entityActionManifests, ...memberPickerModalManifests, + ...pickerManifests, ...propertyEditorManifests, ...repositoryManifests, ...searchManifests, diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member/picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member/picker/manifests.ts new file mode 100644 index 0000000000..45e2df590f --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member/picker/manifests.ts @@ -0,0 +1,12 @@ +import { UMB_MEMBER_ENTITY_TYPE } from '../entity.js'; +import type { ManifestTypes, UmbBackofficeManifestKind } from '@umbraco-cms/backoffice/extension-registry'; + +export const manifests: Array = [ + { + type: 'pickerSearchResultItem', + kind: 'default', + alias: 'Umb.PickerSearchResultItem.Member', + name: 'Member Picker Search Result Item', + forEntityTypes: [UMB_MEMBER_ENTITY_TYPE], + }, +]; From 296744718ed1a6b91b7d9cf74de252954c60db26 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 16 Aug 2024 12:15:58 +0200 Subject: [PATCH 070/102] remove rename --- .../src/packages/core/picker/search/picker-search.element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search.element.ts index 47dacd85f7..f6e30a7388 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search.element.ts @@ -1,4 +1,4 @@ -import type { UmbPickerContext as UmbPickerContext } from '../picker.context.js'; +import type { UmbPickerContext } from '../picker.context.js'; import { UMB_PICKER_CONTEXT } from '../picker.context.token.js'; import type { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; import { html, customElement, state, nothing, css } from '@umbraco-cms/backoffice/external/lit'; From 15e6844c1fbd90f63febb8d7cdaffad0d6cfe216 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 16 Aug 2024 12:16:04 +0200 Subject: [PATCH 071/102] Update picker-search.manager.ts --- .../core/picker/search/manager/picker-search.manager.ts | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/picker-search.manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/picker-search.manager.ts index 343f87ef6a..49f3e97a40 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/picker-search.manager.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/picker-search.manager.ts @@ -1,10 +1,9 @@ import type { UmbPickerSearchManagerConfig } from './types.js'; import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; -import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; import { createExtensionApiByAlias } from '@umbraco-cms/backoffice/extension-registry'; import { UmbArrayState, UmbBooleanState, UmbNumberState, UmbObjectState } from '@umbraco-cms/backoffice/observable-api'; -import type { UmbSearchProvider, UmbSearchRequestArgs } from '@umbraco-cms/backoffice/search'; +import type { UmbSearchProvider, UmbSearchRequestArgs, UmbSearchResultItemModel } from '@umbraco-cms/backoffice/search'; import { debounce } from '@umbraco-cms/backoffice/utils'; /** @@ -16,7 +15,7 @@ import { debounce } from '@umbraco-cms/backoffice/utils'; * @template QueryType */ export class UmbPickerSearchManager< - ResultItemType extends UmbEntityModel = UmbEntityModel, + ResultItemType extends UmbSearchResultItemModel = UmbSearchResultItemModel, QueryType extends UmbSearchRequestArgs = UmbSearchRequestArgs, > extends UmbControllerBase { #searchable = new UmbBooleanState(false); @@ -35,8 +34,7 @@ export class UmbPickerSearchManager< public readonly resultTotalItems = this.#resultTotalItems.asObservable(); #config?: UmbPickerSearchManagerConfig; - // TODO: lower requirement for search provider item type - #searchProvider?: UmbSearchProvider; + #searchProvider?: UmbSearchProvider; /** * Creates an instance of UmbPickerSearchManager. From 18ff370b2c07f91adc01779e43f5c2f62d00d0d3 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 16 Aug 2024 12:17:40 +0200 Subject: [PATCH 072/102] add readonly --- .../src/packages/core/picker/search/picker-search.element.ts | 2 +- .../default/default-picker-search-result-item.element.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search.element.ts index f6e30a7388..e9ecefef78 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search.element.ts @@ -59,7 +59,7 @@ export class UmbPickerSearchElement extends UmbLitElement { `; } - static override styles = [ + static override readonly styles = [ UmbTextStyles, css` uui-input { diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/default/default-picker-search-result-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/default/default-picker-search-result-item.element.ts index fa39e24c60..8edd4e1b56 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/default/default-picker-search-result-item.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/default/default-picker-search-result-item.element.ts @@ -68,7 +68,7 @@ export class UmbDefaultPickerSearchResultItemElement extends UmbLitElement { return html``; } - static override styles = [UmbTextStyles]; + static override readonly styles = [UmbTextStyles]; } export { UmbDefaultPickerSearchResultItemElement as element }; From 994ba2f28e84cb397abe0557b589b25463708ce7 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 16 Aug 2024 12:18:23 +0200 Subject: [PATCH 073/102] remove todo --- .../member-picker-modal/member-picker-modal.element.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts index 959607265c..aa5ca88067 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts @@ -20,7 +20,6 @@ export class UmbMemberPickerModalElement extends UmbModalBaseElement< #collectionRepository = new UmbMemberCollectionRepository(this); #selectionManager = new UmbSelectionManager(this); - // TODO: find a way to implement through the manifest api field #pickerContext = new UmbCollectionItemPickerContext(this); override connectedCallback(): void { From b84c9b1ef1f8a643d3d86a8653f6b77b69b3bcbe Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 16 Aug 2024 12:20:44 +0200 Subject: [PATCH 074/102] remove optional --- .../default/default-picker-search-result-item.element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/default/default-picker-search-result-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/default/default-picker-search-result-item.element.ts index 8edd4e1b56..4c98c3d266 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/default/default-picker-search-result-item.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/default/default-picker-search-result-item.element.ts @@ -8,7 +8,7 @@ import type { UmbSearchResultItemModel } from '@umbraco-cms/backoffice/search'; const elementName = 'umb-default-picker-search-result-item'; @customElement(elementName) export class UmbDefaultPickerSearchResultItemElement extends UmbLitElement { - #item?: UmbSearchResultItemModel | undefined; + #item: UmbSearchResultItemModel | undefined; @property({ type: Object }) public get item(): UmbSearchResultItemModel | undefined { return this.#item; From 467ac48ad87674c4942edadc92a2ba85bd17d132 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 16 Aug 2024 12:22:43 +0200 Subject: [PATCH 075/102] remove search from document type picker --- .../document-types/modals/document-type-picker-modal.token.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/modals/document-type-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/modals/document-type-picker-modal.token.ts index 74362b03dd..e85346563c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/modals/document-type-picker-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/modals/document-type-picker-modal.token.ts @@ -29,9 +29,6 @@ export const UMB_DOCUMENT_TYPE_PICKER_MODAL = new UmbModalToken< }, data: { treeAlias: 'Umb.Tree.DocumentType', - search: { - providerAlias: UMB_DOCUMENT_TYPE_SEARCH_PROVIDER_ALIAS, - }, createAction: { label: '#content_createEmpty', modalData: { From c5a43aef91af1043ad96c6e94b28f81e9b341aea Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 16 Aug 2024 12:28:12 +0200 Subject: [PATCH 076/102] only render search if search is enabled --- .../search/picker-search-result.element.ts | 23 ++++++++----------- .../picker/search/picker-search.element.ts | 16 ++++++------- 2 files changed, 18 insertions(+), 21 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search-result.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search-result.element.ts index 2d7881da43..2b71d884f6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search-result.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search-result.element.ts @@ -1,6 +1,6 @@ import { UMB_PICKER_CONTEXT } from '../picker.context.token.js'; import type { UmbPickerContext } from '../picker.context.js'; -import { customElement, html, repeat, state } from '@umbraco-cms/backoffice/external/lit'; +import { customElement, html, nothing, repeat, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import type { UmbSearchRequestArgs } from '@umbraco-cms/backoffice/search'; import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; @@ -18,6 +18,9 @@ export class UmbPickerSearchResultElement extends UmbLitElement { @state() _items: UmbEntityModel[] = []; + @state() + _isSearchable: boolean = false; + #pickerContext?: UmbPickerContext; constructor() { @@ -25,22 +28,16 @@ export class UmbPickerSearchResultElement extends UmbLitElement { this.consumeContext(UMB_PICKER_CONTEXT, (context) => { this.#pickerContext = context; - - this.observe(this.#pickerContext.search.query, (query) => { - this._query = query; - }); - - this.observe(this.#pickerContext.search.searching, (query) => { - this._searching = query; - }); - - this.observe(this.#pickerContext.search.resultItems, (items) => { - this._items = items; - }); + this.observe(this.#pickerContext.search.searchable, (isSearchable) => (this._isSearchable = isSearchable)); + this.observe(this.#pickerContext.search.query, (query) => (this._query = query)); + this.observe(this.#pickerContext.search.searching, (query) => (this._searching = query)); + this.observe(this.#pickerContext.search.resultItems, (items) => (this._items = items)); }); } override render() { + if (!this._isSearchable) return nothing; + if (this._query && this._searching === false && this._items.length === 0) { return this.#renderEmptyResult(); } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search.element.ts index e9ecefef78..b0663bf9d4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search.element.ts @@ -14,6 +14,9 @@ export class UmbPickerSearchElement extends UmbLitElement { @state() _searching: boolean = false; + @state() + _isSearchable: boolean = false; + #pickerContext?: UmbPickerContext; constructor() { @@ -21,14 +24,9 @@ export class UmbPickerSearchElement extends UmbLitElement { this.consumeContext(UMB_PICKER_CONTEXT, (context) => { this.#pickerContext = context; - - this.observe(this.#pickerContext.search.searching, (searching) => { - this._searching = searching; - }); - - this.observe(this.#pickerContext.search.query, (query) => { - this._query = query?.query || ''; - }); + this.observe(this.#pickerContext.search.searchable, (isSearchable) => (this._isSearchable = isSearchable)); + this.observe(this.#pickerContext.search.searching, (searching) => (this._searching = searching)); + this.observe(this.#pickerContext.search.query, (query) => (this._query = query?.query || '')); }); } @@ -39,6 +37,8 @@ export class UmbPickerSearchElement extends UmbLitElement { } override render() { + if (!this._isSearchable) return nothing; + return html`
From 19c3cfe02c3cda45bd8270645471a3503a0373e0 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 16 Aug 2024 12:39:55 +0200 Subject: [PATCH 077/102] remove unused import --- .../document-types/modals/document-type-picker-modal.token.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/modals/document-type-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/modals/document-type-picker-modal.token.ts index e85346563c..2081cb7b1b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/modals/document-type-picker-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/modals/document-type-picker-modal.token.ts @@ -1,5 +1,4 @@ import { UMB_CREATE_DOCUMENT_TYPE_WORKSPACE_PATH_PATTERN } from '../paths.js'; -import { UMB_DOCUMENT_TYPE_SEARCH_PROVIDER_ALIAS } from '../search/index.js'; import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; import { UMB_DOCUMENT_TYPE_ENTITY_TYPE, From df07242ce71a2570f53e2fd54608ce088918a6aa Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 16 Aug 2024 12:49:41 +0200 Subject: [PATCH 078/102] split picker and modal --- src/Umbraco.Web.UI.Client/src/packages/core/tree/index.ts | 4 ++-- src/Umbraco.Web.UI.Client/src/packages/core/tree/manifests.ts | 2 +- .../src/packages/core/tree/tree-item-picker/index.ts | 1 + .../tree-item-picker.context.ts} | 0 .../core/tree/{tree-picker => tree-picker-modal}/constants.ts | 0 .../core/tree/{tree-picker => tree-picker-modal}/index.ts | 0 .../core/tree/{tree-picker => tree-picker-modal}/manifests.ts | 0 .../tree-picker-modal.element.ts | 2 +- .../tree-picker-modal.token.ts | 0 9 files changed, 5 insertions(+), 4 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item-picker/index.ts rename src/Umbraco.Web.UI.Client/src/packages/core/tree/{tree-picker/tree-picker-modal.context.ts => tree-item-picker/tree-item-picker.context.ts} (100%) rename src/Umbraco.Web.UI.Client/src/packages/core/tree/{tree-picker => tree-picker-modal}/constants.ts (100%) rename src/Umbraco.Web.UI.Client/src/packages/core/tree/{tree-picker => tree-picker-modal}/index.ts (100%) rename src/Umbraco.Web.UI.Client/src/packages/core/tree/{tree-picker => tree-picker-modal}/manifests.ts (100%) rename src/Umbraco.Web.UI.Client/src/packages/core/tree/{tree-picker => tree-picker-modal}/tree-picker-modal.element.ts (98%) rename src/Umbraco.Web.UI.Client/src/packages/core/tree/{tree-picker => tree-picker-modal}/tree-picker-modal.token.ts (100%) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/index.ts index 5277e210dd..d5eef44476 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/index.ts @@ -10,7 +10,7 @@ export * from './entity-actions/reload-tree-item-children/index.js'; export * from './entity-actions/move/index.js'; export * from './entity-actions/duplicate-to/index.js'; -export type { UmbTreePickerModalData, UmbTreePickerModalValue } from './tree-picker/index.js'; -export { UMB_TREE_PICKER_MODAL, UMB_TREE_PICKER_MODAL_ALIAS } from './tree-picker/index.js'; +export type { UmbTreePickerModalData, UmbTreePickerModalValue } from './tree-picker-modal/index.js'; +export { UMB_TREE_PICKER_MODAL, UMB_TREE_PICKER_MODAL_ALIAS } from './tree-picker-modal/index.js'; export * from './types.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/manifests.ts index ba2be8f035..55aba35023 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/manifests.ts @@ -1,7 +1,7 @@ import { manifests as folderManifests } from './folder/manifests.js'; import { manifests as defaultTreeItemManifests } from './tree-item/tree-item-default/manifests.js'; import { manifests as defaultTreeManifests } from './default/manifests.js'; -import { manifests as treePickerManifests } from './tree-picker/manifests.js'; +import { manifests as treePickerManifests } from './tree-picker-modal/manifests.js'; import { manifests as entityActionManifests } from './entity-actions/manifests.js'; import type { ManifestTypes, UmbBackofficeManifestKind } from '@umbraco-cms/backoffice/extension-registry'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item-picker/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item-picker/index.ts new file mode 100644 index 0000000000..1742c4d49d --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item-picker/index.ts @@ -0,0 +1 @@ +export * from './tree-item-picker.context.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item-picker/tree-item-picker.context.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.context.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item-picker/tree-item-picker.context.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker-modal/constants.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/constants.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker-modal/constants.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker-modal/index.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/index.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker-modal/index.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker-modal/manifests.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/manifests.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker-modal/manifests.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker-modal/tree-picker-modal.element.ts similarity index 98% rename from src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker-modal/tree-picker-modal.element.ts index f082c8d041..745c78e8d1 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker-modal/tree-picker-modal.element.ts @@ -1,6 +1,6 @@ import type { UmbTreeSelectionConfiguration } from '../types.js'; +import { UmbTreeItemPickerContext } from '../tree-item-picker/index.js'; import type { UmbTreePickerModalData, UmbTreePickerModalValue } from './tree-picker-modal.token.js'; -import { UmbTreeItemPickerContext } from './tree-picker-modal.context.js'; import type { PropertyValueMap } from '@umbraco-cms/backoffice/external/lit'; import { html, customElement, state, ifDefined, nothing } from '@umbraco-cms/backoffice/external/lit'; import { UMB_WORKSPACE_MODAL, UmbModalBaseElement } from '@umbraco-cms/backoffice/modal'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker-modal/tree-picker-modal.token.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.token.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker-modal/tree-picker-modal.token.ts From 52233870ff6bed635e4496bb93e9dc4cb0e2c663 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 16 Aug 2024 12:50:41 +0200 Subject: [PATCH 079/102] add correct type --- src/Umbraco.Web.UI.Client/src/packages/members/manifests.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/members/manifests.ts index 79492d90a2..c5d00784c1 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/manifests.ts @@ -2,12 +2,12 @@ import { manifests as memberGroupManifests } from './member-group/manifests.js'; import { manifests as memberManifests } from './member/manifests.js'; import { manifests as memberSectionManifests } from './member-section/manifests.js'; import { manifests as memberTypeManifests } from './member-type/manifests.js'; -import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry'; +import type { ManifestTypes, UmbBackofficeManifestKind } from '@umbraco-cms/backoffice/extension-registry'; import './member/components/index.js'; import './member-group/components/index.js'; -export const manifests: Array = [ +export const manifests: Array = [ ...memberGroupManifests, ...memberManifests, ...memberSectionManifests, From f82641d562daba65b07389515910c01cbe791eca Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 16 Aug 2024 13:03:56 +0200 Subject: [PATCH 080/102] cast type --- .../core/picker/search/manager/picker-search.manager.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/picker-search.manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/picker-search.manager.ts index 49f3e97a40..7306b36826 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/picker-search.manager.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/picker-search.manager.ts @@ -175,7 +175,8 @@ export class UmbPickerSearchManager< } const { data } = await this.#searchProvider.search(query); - this.#resultItems.setValue(data?.items ?? []); + const items = (data?.items as ResultItemType[]) ?? []; + this.#resultItems.setValue(items); this.#resultTotalItems.setValue(data?.total ?? 0); this.#searching.setValue(false); } From 85140b2a19a5f0c0ebb573088d9409b006a83a05 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 16 Aug 2024 13:07:08 +0200 Subject: [PATCH 081/102] add query params to type --- src/Umbraco.Web.UI.Client/src/packages/core/picker/types.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/types.ts index 7aeeb1121d..1d134b429b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/types.ts @@ -1,5 +1,6 @@ export interface UmbPickerContextConfig { search?: { providerAlias: string; + queryParams?: object; }; } From b70682bc6b6851c4a3ede6447643d6492c01a410 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 16 Aug 2024 13:07:26 +0200 Subject: [PATCH 082/102] check for query before showing no results --- .../packages/core/picker/search/picker-search-result.element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search-result.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search-result.element.ts index 2b71d884f6..1b3a6411dc 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search-result.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search-result.element.ts @@ -38,7 +38,7 @@ export class UmbPickerSearchResultElement extends UmbLitElement { override render() { if (!this._isSearchable) return nothing; - if (this._query && this._searching === false && this._items.length === 0) { + if (this._query?.query && this._searching === false && this._items.length === 0) { return this.#renderEmptyResult(); } From 4b37fab3af2bff495613fc5b426dbbbd9b0cb2d4 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 16 Aug 2024 13:07:46 +0200 Subject: [PATCH 083/102] handle query params in context --- .../packages/core/picker/picker.context.ts | 24 ++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/picker.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/picker.context.ts index 2db249670b..1808944c32 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker/picker.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/picker.context.ts @@ -26,12 +26,20 @@ export class UmbPickerContext< */ setConfig(config: ConfigType | undefined) { const searchProviderAlias = config?.search?.providerAlias; + if (searchProviderAlias) { - this.search.updateConfig({ providerAlias: searchProviderAlias }); this.search.setSearchable(true); - } else { - this.search.setSearchable(false); + this.search.updateConfig({ providerAlias: searchProviderAlias }); + + const queryParams = config?.search?.queryParams; + if (queryParams) { + this.search.updateQuery(queryParams); + } + + return; } + + this.search.setSearchable(false); } /** @@ -42,4 +50,14 @@ export class UmbPickerContext< getConfig(): ConfigType | undefined { return this.#config.getValue(); } + + /** + * Update the config for the picker + * @param {Partial} config + * @memberof UmbPickerContext + */ + updateConfig(config: Partial) { + const mergedConfig = { ...this.#config.getValue(), ...config } as ConfigType; + this.#config.setValue(mergedConfig); + } } From 5d9400834d80a0173b3e051af86e92aea54e6e69 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 16 Aug 2024 13:08:52 +0200 Subject: [PATCH 084/102] add query params to type --- src/Umbraco.Web.UI.Client/src/packages/core/modal/types.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/types.ts index b073a8f293..f2d55fad4f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/types.ts @@ -7,6 +7,7 @@ export interface UmbPickerModalData { export interface UmbPickerModalSearchConfig { providerAlias: string; + queryParams?: object; } export interface UmbPickerModalValue { From 054e4cf22a387b8f2d14f0cffe8f67bf7ea8fdd4 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 16 Aug 2024 13:35:30 +0200 Subject: [PATCH 085/102] fix export path --- .../src/packages/documents/documents/modals/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/index.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/index.ts index c83a3b1a93..5730bfbf75 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/index.ts @@ -4,5 +4,5 @@ export * from './save-modal/index.js'; export * from './unpublish-modal/index.js'; export * from './schedule-modal/index.js'; export * from './shared/index.js'; -export * from '../modals/document-picker-modal.token.js'; +export * from './document-picker-modal.token.js'; export type * from './types.js'; From 6be5c60cf639ab26d33b6c267a39c3a1d99acb4d Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 16 Aug 2024 13:35:50 +0200 Subject: [PATCH 086/102] set searchable state from inside --- .../picker/search/manager/picker-search.manager.ts | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/picker-search.manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/picker-search.manager.ts index 7306b36826..3b09cd0927 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/picker-search.manager.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/picker-search.manager.ts @@ -156,9 +156,19 @@ export class UmbPickerSearchManager< async #initSearch() { const providerAlias = this.#config?.providerAlias; - if (!providerAlias) throw new Error('No search provider alias provided'); + if (!providerAlias) { + this.setSearchable(false); + throw new Error('No search provider alias provided'); + } + this.#searchProvider = await createExtensionApiByAlias(this, providerAlias); - if (!this.#searchProvider) throw new Error(`Search Provider with alias ${providerAlias} is not available`); + + if (!this.#searchProvider) { + this.setSearchable(false); + throw new Error(`Search Provider with alias ${providerAlias} is not available`); + } + + this.setSearchable(true); } #debouncedSearch = debounce(this.#search, 300); From 5abfbca2b6a2d98e5393b452db77285ba0771ffb Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 16 Aug 2024 13:35:57 +0200 Subject: [PATCH 087/102] Update picker.context.ts --- .../src/packages/core/picker/picker.context.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/picker.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/picker.context.ts index 1808944c32..18e049c1f7 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker/picker.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/picker.context.ts @@ -28,7 +28,6 @@ export class UmbPickerContext< const searchProviderAlias = config?.search?.providerAlias; if (searchProviderAlias) { - this.search.setSearchable(true); this.search.updateConfig({ providerAlias: searchProviderAlias }); const queryParams = config?.search?.queryParams; From 60b362a50f5f77478161727ff80ed7a8577ea22d Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 16 Aug 2024 13:36:13 +0200 Subject: [PATCH 088/102] configure seach on search manager --- .../core/tree/tree-picker-modal/tree-picker-modal.element.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker-modal/tree-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker-modal/tree-picker-modal.element.ts index 745c78e8d1..821aca4a93 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker-modal/tree-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker-modal/tree-picker-modal.element.ts @@ -7,6 +7,7 @@ import { UMB_WORKSPACE_MODAL, UmbModalBaseElement } from '@umbraco-cms/backoffic import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router'; import { UmbDeselectedEvent, UmbSelectedEvent } from '@umbraco-cms/backoffice/event'; import type { UmbTreeItemModelBase } from '@umbraco-cms/backoffice/tree'; +import { UmbPickerContextConfig } from '@umbraco-cms/backoffice/picker'; @customElement('umb-tree-picker-modal') export class UmbTreePickerModalElement extends UmbModalBaseElement< @@ -47,10 +48,11 @@ export class UmbTreePickerModalElement Date: Fri, 16 Aug 2024 13:52:51 +0200 Subject: [PATCH 089/102] remove outer config --- .../packages/core/picker/picker.context.ts | 50 +------------------ 1 file changed, 1 insertion(+), 49 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/picker.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/picker.context.ts index 18e049c1f7..b586a90e3e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker/picker.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/picker.context.ts @@ -1,62 +1,14 @@ import { UMB_PICKER_CONTEXT } from './picker.context.token.js'; import { UmbPickerSearchManager } from './search/manager/picker-search.manager.js'; -import type { UmbPickerContextConfig } from './types.js'; import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; import { UmbSelectionManager } from '@umbraco-cms/backoffice/utils'; -import { UmbObjectState } from '@umbraco-cms/backoffice/observable-api'; -export class UmbPickerContext< - ConfigType extends UmbPickerContextConfig = UmbPickerContextConfig, -> extends UmbContextBase { +export class UmbPickerContext extends UmbContextBase { public readonly selection = new UmbSelectionManager(this); public readonly search = new UmbPickerSearchManager(this); - #config = new UmbObjectState(undefined); - public readonly config = this.#config.asObservable(); - constructor(host: UmbControllerHost) { super(host, UMB_PICKER_CONTEXT); } - - /** - * Set the config for the picker - * @param {ConfigType} config - * @memberof UmbPickerContext - */ - setConfig(config: ConfigType | undefined) { - const searchProviderAlias = config?.search?.providerAlias; - - if (searchProviderAlias) { - this.search.updateConfig({ providerAlias: searchProviderAlias }); - - const queryParams = config?.search?.queryParams; - if (queryParams) { - this.search.updateQuery(queryParams); - } - - return; - } - - this.search.setSearchable(false); - } - - /** - * Get the data for the picker - * @returns {ConfigType | undefined} - * @memberof UmbPickerContext - */ - getConfig(): ConfigType | undefined { - return this.#config.getValue(); - } - - /** - * Update the config for the picker - * @param {Partial} config - * @memberof UmbPickerContext - */ - updateConfig(config: Partial) { - const mergedConfig = { ...this.#config.getValue(), ...config } as ConfigType; - this.#config.setValue(mergedConfig); - } } From 7052c3cc6e3861ebbd1f29e3c5becc30d7dd535e Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 16 Aug 2024 13:57:50 +0200 Subject: [PATCH 090/102] use selection manager in picker context --- .../member-picker-modal.element.ts | 28 ++++++++----------- 1 file changed, 12 insertions(+), 16 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts index aa5ca88067..74a00b4992 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts @@ -4,7 +4,6 @@ import type { UmbMemberItemModel } from '../../repository/index.js'; import type { UmbMemberPickerModalValue, UmbMemberPickerModalData } from './member-picker-modal.token.js'; import type { PropertyValueMap } from '@umbraco-cms/backoffice/external/lit'; import { customElement, html, repeat, state } from '@umbraco-cms/backoffice/external/lit'; -import { UmbSelectionManager } from '@umbraco-cms/backoffice/utils'; import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { UmbCollectionItemPickerContext } from '@umbraco-cms/backoffice/collection'; @@ -18,21 +17,12 @@ export class UmbMemberPickerModalElement extends UmbModalBaseElement< private _members: Array = []; #collectionRepository = new UmbMemberCollectionRepository(this); - #selectionManager = new UmbSelectionManager(this); - #pickerContext = new UmbCollectionItemPickerContext(this); - override connectedCallback(): void { - super.connectedCallback(); - this.#selectionManager.setSelectable(true); - this.#selectionManager.setMultiple(this.data?.multiple ?? false); - this.#selectionManager.setSelection(this.value?.selection ?? []); - } - constructor() { super(); this.observe( - this.#selectionManager.selection, + this.#pickerContext.selection.selection, (selection) => { this.updateValue({ selection }); this.requestUpdate(); @@ -43,8 +33,14 @@ export class UmbMemberPickerModalElement extends UmbModalBaseElement< protected override async updated(_changedProperties: PropertyValueMap | Map) { super.updated(_changedProperties); - if (_changedProperties.has('data') && this.data) { - this.#pickerContext.setConfig(this.data); + + if (_changedProperties.has('data')) { + this.#pickerContext.search.updateConfig({ ...this.data?.search }); + this.#pickerContext.selection.setMultiple(this.data?.multiple ?? false); + } + + if (_changedProperties.has('value')) { + this.#pickerContext.selection.setSelection(this.value?.selection); } } @@ -89,9 +85,9 @@ export class UmbMemberPickerModalElement extends UmbModalBaseElement< this.#selectionManager.select(item.unique)} - @deselected=${() => this.#selectionManager.deselect(item.unique)} - ?selected=${this.#selectionManager.isSelected(item.unique)}> + @selected=${() => this.#pickerContext.selection.select(item.unique)} + @deselected=${() => this.#pickerContext.selection.deselect(item.unique)} + ?selected=${this.#pickerContext.selection.isSelected(item.unique)}> `; From c9dc7c4a97617c1ee208b460e9d1e32cca4f7d9e Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 16 Aug 2024 13:58:02 +0200 Subject: [PATCH 091/102] remove import --- .../core/tree/tree-picker-modal/tree-picker-modal.element.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker-modal/tree-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker-modal/tree-picker-modal.element.ts index 821aca4a93..c4a15dcc78 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker-modal/tree-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker-modal/tree-picker-modal.element.ts @@ -7,7 +7,6 @@ import { UMB_WORKSPACE_MODAL, UmbModalBaseElement } from '@umbraco-cms/backoffic import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router'; import { UmbDeselectedEvent, UmbSelectedEvent } from '@umbraco-cms/backoffice/event'; import type { UmbTreeItemModelBase } from '@umbraco-cms/backoffice/tree'; -import { UmbPickerContextConfig } from '@umbraco-cms/backoffice/picker'; @customElement('umb-tree-picker-modal') export class UmbTreePickerModalElement extends UmbModalBaseElement< From b68968f80f3ca882dba0dec24b02227f137af633 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 16 Aug 2024 14:00:41 +0200 Subject: [PATCH 092/102] hide item when searching --- .../member-picker-modal.element.ts | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts index 74a00b4992..d7eee02299 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts @@ -3,7 +3,7 @@ import type { UmbMemberDetailModel } from '../../types.js'; import type { UmbMemberItemModel } from '../../repository/index.js'; import type { UmbMemberPickerModalValue, UmbMemberPickerModalData } from './member-picker-modal.token.js'; import type { PropertyValueMap } from '@umbraco-cms/backoffice/external/lit'; -import { customElement, html, repeat, state } from '@umbraco-cms/backoffice/external/lit'; +import { customElement, html, nothing, repeat, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { UmbCollectionItemPickerContext } from '@umbraco-cms/backoffice/collection'; @@ -16,6 +16,9 @@ export class UmbMemberPickerModalElement extends UmbModalBaseElement< @state() private _members: Array = []; + @state() + private _searchQuery?: string; + #collectionRepository = new UmbMemberCollectionRepository(this); #pickerContext = new UmbCollectionItemPickerContext(this); @@ -29,6 +32,14 @@ export class UmbMemberPickerModalElement extends UmbModalBaseElement< }, 'umbSelectionObserver', ); + + this.observe( + this.#pickerContext.search.query, + (query) => { + this._searchQuery = query?.query; + }, + 'umbPickerSearchQueryObserver', + ); } protected override async updated(_changedProperties: PropertyValueMap | Map) { @@ -71,6 +82,10 @@ export class UmbMemberPickerModalElement extends UmbModalBaseElement< } #renderItems() { + if (this._searchQuery) { + return nothing; + } + return html` ${repeat( this.#filteredMembers, From 2eb48691a6fb65d33c49674017157a7cb0235976 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 16 Aug 2024 14:00:49 +0200 Subject: [PATCH 093/102] remove readonly --- .../default/default-picker-search-result-item.element.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/default/default-picker-search-result-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/default/default-picker-search-result-item.element.ts index 4c98c3d266..b718b47db3 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/default/default-picker-search-result-item.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/default/default-picker-search-result-item.element.ts @@ -53,7 +53,6 @@ export class UmbDefaultPickerSearchResultItemElement extends UmbLitElement { this.#pickerContext?.selection.select(item.unique)} @deselected=${() => this.#pickerContext?.selection.deselect(item.unique)} From 798868bbc793edb09972850188c974096871710b Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 16 Aug 2024 14:06:17 +0200 Subject: [PATCH 094/102] build picker code --- src/Umbraco.Web.UI.Client/src/packages/core/vite.config.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/vite.config.ts b/src/Umbraco.Web.UI.Client/src/packages/core/vite.config.ts index c04299b8e1..52da565908 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/vite.config.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/vite.config.ts @@ -36,6 +36,7 @@ export default defineConfig({ 'notification/index': './notification/index.ts', 'object-type/index': './object-type/index.ts', 'picker-input/index': './picker-input/index.ts', + 'picker/index': './picker/index.ts', 'property-action/index': './property-action/index.ts', 'property-editor/index': './property-editor/index.ts', 'property-type/index': './property-type/index.ts', From 320e7ff5de33a0ae5615bb2b63520258d7c34405 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 16 Aug 2024 14:14:53 +0200 Subject: [PATCH 095/102] move explicit element name --- .../src/packages/core/picker/search/index.ts | 2 +- ...ker-search.element.ts => picker-search-field.element.ts} | 6 +++--- .../tree/tree-picker-modal/tree-picker-modal.element.ts | 2 +- .../member-picker-modal/member-picker-modal.element.ts | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) rename src/Umbraco.Web.UI.Client/src/packages/core/picker/search/{picker-search.element.ts => picker-search-field.element.ts} (93%) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/index.ts index d60af64ba0..c943b37222 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/index.ts @@ -1,3 +1,3 @@ export * from './manager/index.js'; export * from './picker-search-result.element.js'; -export * from './picker-search.element.js'; +export * from './picker-search-field.element.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search-field.element.ts similarity index 93% rename from src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search.element.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search-field.element.ts index b0663bf9d4..d178e701aa 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search-field.element.ts @@ -5,9 +5,9 @@ import { html, customElement, state, nothing, css } from '@umbraco-cms/backoffic import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -const elementName = 'umb-picker-search'; +const elementName = 'umb-picker-search-field'; @customElement(elementName) -export class UmbPickerSearchElement extends UmbLitElement { +export class UmbPickerSearchFieldElement extends UmbLitElement { @state() _query: string = ''; @@ -84,6 +84,6 @@ export class UmbPickerSearchElement extends UmbLitElement { declare global { interface HTMLElementTagNameMap { - [elementName]: UmbPickerSearchElement; + [elementName]: UmbPickerSearchFieldElement; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker-modal/tree-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker-modal/tree-picker-modal.element.ts index c4a15dcc78..5299caa3c0 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker-modal/tree-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker-modal/tree-picker-modal.element.ts @@ -147,7 +147,7 @@ export class UmbTreePickerModalElement + `; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts index d7eee02299..ec3dcca072 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts @@ -72,7 +72,7 @@ export class UmbMemberPickerModalElement extends UmbModalBaseElement< return html` - + ${this.#renderItems()} From 2e3e8c5443787264f2cdfe8cbffa09116b8a2f30 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 16 Aug 2024 19:52:45 +0200 Subject: [PATCH 096/102] parse VariantId from DataSet to Block Workspace to Block DataSet --- .../block/workspace/block-element-manager.ts | 16 +++++++++++++++- .../block-element-property-dataset.context.ts | 4 ++++ .../block/workspace/block-workspace.context.ts | 17 ++++++++++++++++- 3 files changed, 35 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-element-manager.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-element-manager.ts index 54bcd7aeff..d7b64b1d4b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-element-manager.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-element-manager.ts @@ -2,10 +2,11 @@ import type { UmbBlockDataType } from '../types.js'; import { UmbBlockElementPropertyDatasetContext } from './block-element-property-dataset.context.js'; import type { UmbContentTypeModel } from '@umbraco-cms/backoffice/content-type'; import { UmbContentTypeStructureManager } from '@umbraco-cms/backoffice/content-type'; -import { UmbObjectState } from '@umbraco-cms/backoffice/observable-api'; +import { UmbClassState, UmbObjectState } from '@umbraco-cms/backoffice/observable-api'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api'; import { UmbDocumentTypeDetailRepository } from '@umbraco-cms/backoffice/document-type'; +import type { UmbVariantId } from '@umbraco-cms/backoffice/variant'; export class UmbBlockElementManager extends UmbControllerBase { // @@ -16,6 +17,9 @@ export class UmbBlockElementManager extends UmbControllerBase { }); #getDataResolver!: () => void; + #variantId = new UmbClassState(undefined); + readonly variantId = this.#variantId.asObservable(); + readonly unique = this.#data.asObservablePart((data) => data?.udi); readonly contentTypeId = this.#data.asObservablePart((data) => data?.contentTypeKey); @@ -35,6 +39,10 @@ export class UmbBlockElementManager extends UmbControllerBase { this.#data.setValue(undefined); } + setVariantId(variantId: UmbVariantId | undefined) { + this.#variantId.setValue(variantId); + } + setData(data: UmbBlockDataType | undefined) { this.#data.setValue(data); this.#getDataResolver(); @@ -56,6 +64,12 @@ export class UmbBlockElementManager extends UmbControllerBase { return this.getData()?.contentTypeKey; } + // We will implement propertyAlias in the future, when implementing Varying Blocks. [NL] + // eslint-disable-next-line @typescript-eslint/no-unused-vars + async propertyVariantId(propertyAlias: string) { + return this.variantId; + } + async propertyValueByAlias(propertyAlias: string) { await this.#getDataPromise; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-element-property-dataset.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-element-property-dataset.context.ts index 22a0d90c66..683d639a18 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-element-property-dataset.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-element-property-dataset.context.ts @@ -35,6 +35,10 @@ export class UmbBlockElementPropertyDatasetContext extends UmbControllerBase imp this.provideContext(UMB_BLOCK_ELEMENT_PROPERTY_DATASET_CONTEXT, this); } + propertyVariantId?(propertyAlias: string): Promise> { + return this.#elementManager.propertyVariantId(propertyAlias); + } + /** * TODO: Write proper JSDocs here. * @param propertyAlias diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts index 0464b2fe88..81e7bae117 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts @@ -6,7 +6,7 @@ import { type UmbRoutableWorkspaceContext, UmbWorkspaceIsNewRedirectController, } from '@umbraco-cms/backoffice/workspace'; -import { UmbObjectState, UmbStringState } from '@umbraco-cms/backoffice/observable-api'; +import { UmbClassState, UmbObjectState, UmbStringState } from '@umbraco-cms/backoffice/observable-api'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; import type { ManifestWorkspace } from '@umbraco-cms/backoffice/extension-registry'; import { UMB_MODAL_CONTEXT } from '@umbraco-cms/backoffice/modal'; @@ -16,6 +16,8 @@ import { UMB_BLOCK_MANAGER_CONTEXT, type UmbBlockWorkspaceData, } from '@umbraco-cms/backoffice/block'; +import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property'; +import type { UmbVariantId } from '@umbraco-cms/backoffice/variant'; export type UmbBlockWorkspaceElementManagerNames = 'content' | 'settings'; export class UmbBlockWorkspaceContext @@ -55,6 +57,9 @@ export class UmbBlockWorkspaceContext(undefined); readonly name = this.#label.asObservable(); + #variantId = new UmbClassState(undefined); + readonly variantId = this.#variantId.asObservable(); + constructor(host: UmbControllerHost, workspaceArgs: { manifest: ManifestWorkspace }) { super(host, workspaceArgs.manifest.alias); const manifest = workspaceArgs.manifest; @@ -83,6 +88,16 @@ export class UmbBlockWorkspaceContext { + this.observe(context.variantId, (variantId) => { + this.#variantId.setValue(variantId); + }); + }); + + this.observe(this.variantId, (variantId) => { + this.content.setVariantId(variantId); + }); + this.routes.setRoutes([ { path: 'create/:elementTypeKey', From 538e1651bf4d83aa6e7010bdb8874f6a1503058a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 16 Aug 2024 19:53:13 +0200 Subject: [PATCH 097/102] Added JSDocs --- .../block-grid-area-type-workspace.context.ts | 13 +++++++++++++ ...ock-grid-inline-property-dataset.context.ts | 14 +++++++++----- .../workspace/block-type-workspace.context.ts | 13 +++++++++++++ .../block/workspace/block-element-manager.ts | 13 +++++++++++++ .../block-element-property-dataset.context.ts | 18 +++++++++++------- .../block/workspace/block-workspace.context.ts | 15 +++++++++++++-- .../content-property-dataset.context.ts | 8 ++------ .../property-type-workspace.context.ts | 13 +++++++++++++ .../property-dataset-base-context.ts | 14 +++++++++----- .../property-dataset-context.interface.ts | 1 - .../core/property/property/property.context.ts | 1 + ...riant-workspace-property-dataset-context.ts | 6 ++++-- .../workspace/data-type-workspace.context.ts | 6 ++++++ .../document-blueprint-workspace.context.ts | 7 ++++++- .../workspace/document-workspace.context.ts | 7 +++++++ .../media/workspace/media-workspace.context.ts | 8 +++++++- .../workspace/member-workspace.context.ts | 7 +++++++ .../property-editor-ui-text-box.element.ts | 15 +++++++++++++-- 18 files changed, 147 insertions(+), 32 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/workspace/block-grid-area-type-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/workspace/block-grid-area-type-workspace.context.ts index 10dd58fa03..24ccefc904 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/workspace/block-grid-area-type-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/workspace/block-grid-area-type-workspace.context.ts @@ -129,6 +129,12 @@ export class UmbBlockGridAreaTypeWorkspaceContext throw new Error('You cannot set a name of a area-type.'); } + /** + * @function propertyValueByAlias + * @param {string} propertyAlias + * @returns {Promise | undefined>} + * @description Get an Observable for the value of this property. + */ async propertyValueByAlias(propertyAlias: keyof UmbBlockGridTypeAreaType) { return this.#data.asObservablePart((data) => data?.[propertyAlias as keyof UmbBlockGridTypeAreaType] as ReturnType); } @@ -137,6 +143,13 @@ export class UmbBlockGridAreaTypeWorkspaceContext return this.#data.getValue()?.[propertyAlias as keyof UmbBlockGridTypeAreaType] as ReturnType; } + /** + * @function setPropertyValue + * @param {string} alias + * @param {unknown} value - value can be a promise resolving into the actual value or the raw value it self. + * @returns {Promise} + * @description Set the value of this property. + */ async setPropertyValue(alias: string, value: unknown) { const currentData = this.#data.value; if (currentData) { diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-inline-property-dataset.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-inline-property-dataset.context.ts index 6f8f9c6a95..d57f88b590 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-inline-property-dataset.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-inline-property-dataset.context.ts @@ -36,8 +36,10 @@ export class UmbBlockGridInlinePropertyDatasetContext extends UmbControllerBase } /** - * TODO: Write proper JSDocs here. - * @param propertyAlias + * @function propertyValueByAlias + * @param {string} propertyAlias + * @returns {Promise | undefined>} + * @description Get an Observable for the value of this property. */ async propertyValueByAlias(propertyAlias: string) { // TODO: Investigate how I do that with the workspaces.. @@ -45,9 +47,11 @@ export class UmbBlockGridInlinePropertyDatasetContext extends UmbControllerBase } /** - * TODO: Write proper JSDocs here. - * @param propertyAlias - * @param value + * @function setPropertyValue + * @param {string} propertyAlias + * @param {unknown} value - value can be a promise resolving into the actual value or the raw value it self. + * @returns {Promise} + * @description Set the value of this property. */ async setPropertyValue(propertyAlias: string, value: unknown) { // TODO: Investigate how I do that with the workspaces.. diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace.context.ts index 74b2b8bfcb..c50aad7dbb 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace.context.ts @@ -136,6 +136,12 @@ export class UmbBlockTypeWorkspaceContext | undefined>} + * @description Get an Observable for the value of this property. + */ async propertyValueByAlias(propertyAlias: string) { return this.#data.asObservablePart((data) => data?.[propertyAlias as keyof BlockTypeData] as ReturnType); } @@ -144,6 +150,13 @@ export class UmbBlockTypeWorkspaceContext} + * @description Set the value of this property. + */ async setPropertyValue(alias: string, value: unknown) { const currentData = this.#data.value; if (currentData) { diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-element-manager.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-element-manager.ts index d7b64b1d4b..15946e4f01 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-element-manager.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-element-manager.ts @@ -70,6 +70,12 @@ export class UmbBlockElementManager extends UmbControllerBase { return this.variantId; } + /** + * @function propertyValueByAlias + * @param {string} propertyAlias + * @returns {Promise | undefined>} + * @description Get an Observable for the value of this property. + */ async propertyValueByAlias(propertyAlias: string) { await this.#getDataPromise; @@ -82,6 +88,13 @@ export class UmbBlockElementManager extends UmbControllerBase { return this.#data.getValue()?.[propertyAlias] as ReturnType; } + /** + * @function setPropertyValue + * @param {string} alias + * @param {unknown} value - value can be a promise resolving into the actual value or the raw value it self. + * @returns {Promise} + * @description Set the value of this property. + */ async setPropertyValue(alias: string, value: unknown) { this.initiatePropertyValueChange(); await this.#getDataPromise; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-element-property-dataset.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-element-property-dataset.context.ts index 683d639a18..8c6064d601 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-element-property-dataset.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-element-property-dataset.context.ts @@ -40,19 +40,23 @@ export class UmbBlockElementPropertyDatasetContext extends UmbControllerBase imp } /** - * TODO: Write proper JSDocs here. - * @param propertyAlias + * @function propertyValueByAlias + * @param {string} propertyAlias + * @returns {Promise | undefined>} + * @description Get an Observable for the value of this property. */ async propertyValueByAlias(propertyAlias: string) { return await this.#elementManager.propertyValueByAlias(propertyAlias); } /** - * TODO: Write proper JSDocs here. - * @param propertyAlias - * @param value + * @function setPropertyValue + * @param {string} alias + * @param {unknown} value - value can be a promise resolving into the actual value or the raw value it self. + * @returns {Promise} + * @description Set the value of this property. */ - async setPropertyValue(propertyAlias: string, value: unknown) { - return this.#elementManager.setPropertyValue(propertyAlias, value); + async setPropertyValue(alias: string, value: unknown) { + return this.#elementManager.setPropertyValue(alias, value); } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts index 81e7bae117..b448865e9a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts @@ -309,8 +309,12 @@ export class UmbBlockWorkspaceContext | undefined>} + * @description Get an Observable for the value of this property. + */ async propertyValueByAlias(propertyAlias: propertyAliasType) { return this.#layout.asObservablePart( (layout) => layout?.[propertyAlias as keyof LayoutDataType] as LayoutDataType[propertyAliasType], @@ -322,6 +326,13 @@ export class UmbBlockWorkspaceContext} + * @description Set the value of this property. + */ async setPropertyValue(alias: string, value: unknown) { const currentData = this.#layout.value; if (currentData) { diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content/property-dataset-context/content-property-dataset.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content/property-dataset-context/content-property-dataset.context.ts index 1f981f0da4..8975b77b29 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/content/property-dataset-context/content-property-dataset.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/content/property-dataset-context/content-property-dataset.context.ts @@ -113,16 +113,12 @@ export class UmbContentPropertyDatasetContext< /** * @function setPropertyValueByVariant * @param {string} propertyAlias - * @param {PromiseLike} value - value can be a promise resolving into the actual value or the raw value it self. + * @param {unknown} value - value can be a promise resolving into the actual value or the raw value it self. * @param {UmbVariantId} propertyVariantId - The variant id for the value to be set for. * @returns {Promise} * @description Get the value of this property. */ - setPropertyValueByVariant( - propertyAlias: string, - value: PromiseLike, - propertyVariantId: UmbVariantId, - ): Promise { + setPropertyValueByVariant(propertyAlias: string, value: unknown, propertyVariantId: UmbVariantId): Promise { return this.#workspace.setPropertyValue(propertyAlias, value, propertyVariantId); } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-type/workspace/property-type-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-type/workspace/property-type-workspace.context.ts index 880e05d8c2..cea75edff0 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-type/workspace/property-type-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-type/workspace/property-type-workspace.context.ts @@ -168,6 +168,12 @@ export class UmbPropertyTypeWorkspaceContext | undefined>} + * @description Get an Observable for the value of this property. + */ async propertyValueByAlias(propertyAlias: string) { return this.#data.asObservablePart((data) => data?.[propertyAlias as keyof PropertyTypeData] as ReturnType); } @@ -176,6 +182,13 @@ export class UmbPropertyTypeWorkspaceContext} value - value can be a promise resolving into the actual value or the raw value it self. + * @returns {Promise} + * @description Set the value of this property. + */ async setPropertyValue(alias: string, value: unknown) { const currentData = this.#data.value; if (currentData) { diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/property-dataset-base-context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/property-dataset-base-context.ts index 0527d11772..33fe7070bb 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/property-dataset-base-context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/property-dataset-base-context.ts @@ -47,8 +47,10 @@ export class UmbPropertyDatasetContextBase } /** - * TODO: Write proper JSDocs here. - * @param propertyAlias + * @function propertyValueByAlias + * @param {string} propertyAlias + * @returns {Promise | undefined>} + * @description Get an Observable for the value of this property. */ async propertyValueByAlias(propertyAlias: string) { return this.#values.asObservablePart((values) => { @@ -58,9 +60,11 @@ export class UmbPropertyDatasetContextBase } /** - * TODO: Write proper JSDocs here. - * @param alias - * @param value + * @function setPropertyValue + * @param {string} alias + * @param {PromiseLike} value - value can be a promise resolving into the actual value or the raw value it self. + * @returns {Promise} + * @description Set the value of this property. */ setPropertyValue(alias: string, value: unknown) { this.#values.appendOne({ alias, value }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/property-dataset-context.interface.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/property-dataset-context.interface.ts index 92527fa278..12cf856163 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/property-dataset-context.interface.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/property-dataset-context.interface.ts @@ -33,6 +33,5 @@ export interface UmbPropertyDatasetContext extends UmbContext { propertyValueByAlias( propertyAlias: string, ): Promise | undefined>; - // TODO: Append the andCulture method as well.. setPropertyValue(propertyAlias: string, value: unknown): void; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property/property/property.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property/property/property.context.ts index 76a0dbaa15..b285836f93 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property/property/property.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property/property/property.context.ts @@ -151,6 +151,7 @@ export class UmbPropertyContext extends UmbContextBase | undefined>} + * @description Get an Observable for the value of this property. */ async propertyValueByAlias(propertyAlias: string) { return await this.#workspace.propertyValueByAlias(propertyAlias); diff --git a/src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/data-type-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/data-type-workspace.context.ts index 49aa80140f..85b078bc0d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/data-type-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/data-type-workspace.context.ts @@ -341,6 +341,12 @@ export class UmbDataTypeWorkspaceContext this.#currentData.update({ editorUiAlias: alias }); } + /** + * @function propertyValueByAlias + * @param {string} propertyAlias + * @returns {Promise | undefined>} + * @description Get an Observable for the value of this property. + */ async propertyValueByAlias(propertyAlias: string) { await this.#getDataPromise; return this.#currentData.asObservablePart( diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/workspace/document-blueprint-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/workspace/document-blueprint-workspace.context.ts index de04460e28..857419aa90 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/workspace/document-blueprint-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/workspace/document-blueprint-workspace.context.ts @@ -251,7 +251,12 @@ export class UmbDocumentBlueprintWorkspaceContext async propertyStructureById(propertyId: string) { return this.structure.propertyStructureById(propertyId); } - + /** + * @function propertyValueByAlias + * @param {string} propertyAlias + * @returns {Promise | undefined>} + * @description Get an Observable for the value of this property. + */ async propertyValueByAlias(propertyAlias: string, variantId?: UmbVariantId) { return this.#currentData.asObservablePart( (data) => diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace.context.ts index df3d705077..bac6f64933 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace.context.ts @@ -351,6 +351,13 @@ export class UmbDocumentWorkspaceContext return this.structure.propertyStructureById(propertyId); } + /** + * @function propertyValueByAlias + * @param {string} propertyAlias + * @param {UmbVariantId} variantId + * @returns {Promise | undefined>} + * @description Get an Observable for the value of this property. + */ async propertyValueByAlias( propertyAlias: string, variantId?: UmbVariantId, diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/media-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/media-workspace.context.ts index 6c5f34884b..dc22cf60a7 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/media-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/media-workspace.context.ts @@ -256,7 +256,13 @@ export class UmbMediaWorkspaceContext async propertyStructureById(propertyId: string) { return this.structure.propertyStructureById(propertyId); } - + /** + * @function propertyValueByAlias + * @param {string} propertyAlias + * @param {UmbVariantId} variantId + * @returns {Promise | undefined>} + * @description Get an Observable for the value of this property. + */ async propertyValueByAlias(propertyAlias: string, variantId?: UmbVariantId) { return this.#currentData.asObservablePart( (data) => diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member/workspace/member-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member/workspace/member-workspace.context.ts index 1e249d615a..df3323d2d1 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member/workspace/member-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member/workspace/member-workspace.context.ts @@ -227,6 +227,13 @@ export class UmbMemberWorkspaceContext return this.structure.propertyStructureById(propertyId); } + /** + * @function propertyValueByAlias + * @param {string} propertyAlias + * @param {UmbVariantId} variantId + * @returns {Promise | undefined>} + * @description Get an Observable for the value of this property. + */ async propertyValueByAlias(propertyAlias: string, variantId?: UmbVariantId) { return this.#currentData.asObservablePart( (data) => diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/text-box/property-editor-ui-text-box.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/text-box/property-editor-ui-text-box.element.ts index 2e3397c100..9f25f98a62 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/text-box/property-editor-ui-text-box.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/text-box/property-editor-ui-text-box.element.ts @@ -8,12 +8,13 @@ import { } from '@umbraco-cms/backoffice/property-editor'; import type { UUIInputElement } from '@umbraco-cms/backoffice/external/uui'; import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation'; +import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property'; type UuiInputTypeType = typeof UUIInputElement.prototype.type; @customElement('umb-property-editor-ui-text-box') export class UmbPropertyEditorUITextBoxElement - extends UmbFormControlMixin(UmbLitElement, undefined) + extends UmbFormControlMixin(UmbLitElement, undefined) implements UmbPropertyEditorUiElement { /** @@ -48,6 +49,16 @@ export class UmbPropertyEditorUITextBoxElement protected override firstUpdated(): void { this.addFormControlElement(this.shadowRoot!.querySelector('uui-input')!); + + this.consumeContext(UMB_PROPERTY_CONTEXT, (context) => { + this.observe(context.variantId, (variantId) => { + console.log('text box variant ', variantId); + }); + }); + } + + override focus() { + return this.shadowRoot?.querySelector('uui-input')?.focus(); } #onInput(e: InputEvent) { @@ -68,7 +79,7 @@ export class UmbPropertyEditorUITextBoxElement ?readonly=${this.readonly}>`; } - static styles = [ + static override styles = [ UmbTextStyles, css` uui-input { From c52f2a248172d398eacbcb5d54115b7663d23c41 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 16 Aug 2024 20:00:24 +0200 Subject: [PATCH 098/102] remove test code --- .../text-box/property-editor-ui-text-box.element.ts | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/text-box/property-editor-ui-text-box.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/text-box/property-editor-ui-text-box.element.ts index 9f25f98a62..c1f3eb193a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/text-box/property-editor-ui-text-box.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/text-box/property-editor-ui-text-box.element.ts @@ -49,12 +49,6 @@ export class UmbPropertyEditorUITextBoxElement protected override firstUpdated(): void { this.addFormControlElement(this.shadowRoot!.querySelector('uui-input')!); - - this.consumeContext(UMB_PROPERTY_CONTEXT, (context) => { - this.observe(context.variantId, (variantId) => { - console.log('text box variant ', variantId); - }); - }); } override focus() { From 264df73fea656ef7dd6aa096c94e297a27e5324b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 16 Aug 2024 20:00:54 +0200 Subject: [PATCH 099/102] remove import --- .../text-box/property-editor-ui-text-box.element.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/text-box/property-editor-ui-text-box.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/text-box/property-editor-ui-text-box.element.ts index c1f3eb193a..f942cbeb72 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/text-box/property-editor-ui-text-box.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/text-box/property-editor-ui-text-box.element.ts @@ -8,7 +8,6 @@ import { } from '@umbraco-cms/backoffice/property-editor'; import type { UUIInputElement } from '@umbraco-cms/backoffice/external/uui'; import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation'; -import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property'; type UuiInputTypeType = typeof UUIInputElement.prototype.type; From 9c6aea0632b45d69574903064d7a33d4be95512a Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 19 Aug 2024 11:44:44 +0200 Subject: [PATCH 100/102] use ref-node as media type ref doesn't exist --- .../import/modal/media-type-import-modal.element.ts | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/modal/media-type-import-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/modal/media-type-import-modal.element.ts index 55029ffdb5..76e40e994f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/modal/media-type-import-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/modal/media-type-import-modal.element.ts @@ -117,17 +117,13 @@ export class UmbMediaTypeImportModalLayout extends UmbModalBaseElement< ${when( this._fileContent.length, () => - html` + html` - `, + `, () => /**TODO Add localizations */ html`
From 513a9c25f637ff009181a4d69a56a48ae12dbce6 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 19 Aug 2024 12:00:00 +0200 Subject: [PATCH 101/102] reload children of entity after import --- .../entity-actions/import/media-type-import.action.ts | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/media-type-import.action.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/media-type-import.action.ts index 31a026a9f6..ee1eaa956c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/media-type-import.action.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/import/media-type-import.action.ts @@ -1,5 +1,6 @@ import { UMB_MEDIA_TYPE_IMPORT_MODAL } from './modal/media-type-import-modal.token.js'; -import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action'; +import { UMB_ACTION_EVENT_CONTEXT } from '@umbraco-cms/backoffice/action'; +import { UmbEntityActionBase, UmbRequestReloadChildrenOfEntityEvent } from '@umbraco-cms/backoffice/entity-action'; import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal'; export class UmbImportMediaTypeEntityAction extends UmbEntityActionBase { @@ -9,6 +10,14 @@ export class UmbImportMediaTypeEntityAction extends UmbEntityActionBase data: { unique: this.args.unique }, }); await modalContext.onSubmit().catch(() => {}); + + const actionEventContext = await this.getContext(UMB_ACTION_EVENT_CONTEXT); + const event = new UmbRequestReloadChildrenOfEntityEvent({ + unique: this.args.unique, + entityType: this.args.entityType, + }); + + actionEventContext.dispatchEvent(event); } } From 881bb1d5883cd6086f91cdadcee65ac6fa1cef11 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Mon, 19 Aug 2024 11:36:09 +0100 Subject: [PATCH 102/102] Swapped to use `umb-ref-item` instead of `uui-ref-node` as `umb-ref-item` handles the node-name hover link/underline and icon. --- .../core/components/ref-item/ref-item.element.ts | 2 +- .../default-picker-search-result-item.element.ts | 12 +++--------- 2 files changed, 4 insertions(+), 10 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/ref-item/ref-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/ref-item/ref-item.element.ts index 7047c7c239..bc4ad0c969 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/ref-item/ref-item.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/ref-item/ref-item.element.ts @@ -31,7 +31,7 @@ export class UmbRefItemElement extends UmbElementMixin(UUIRefElement) { @click=${this.handleOpenClick} @keydown=${this.handleOpenKeydown} ?disabled=${this.disabled}> - ${when(this.icon, () => html``)} + ${when(this.icon, () => html``)}
${this.name}
${this.detail} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/default/default-picker-search-result-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/default/default-picker-search-result-item.element.ts index b718b47db3..f59d63e477 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/default/default-picker-search-result-item.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/default/default-picker-search-result-item.element.ts @@ -41,7 +41,6 @@ export class UmbDefaultPickerSearchResultItemElement extends UmbLitElement { this.observe(selectionManager.selection, () => { this._isSelected = selectionManager.isSelected(unique); - console.log(this._isSelected); }); } @@ -50,23 +49,18 @@ export class UmbDefaultPickerSearchResultItemElement extends UmbLitElement { if (!item) return nothing; return html` - this.#pickerContext?.selection.select(item.unique)} @deselected=${() => this.#pickerContext?.selection.deselect(item.unique)} ?selected=${this._isSelected}> - ${this.#renderIcon()} - + `; } - #renderIcon() { - if (!this.item?.icon) return nothing; - return html``; - } - static override readonly styles = [UmbTextStyles]; }