From 892f44cf90317fe928c830dca960292ac80fa5c6 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 16 Dec 2024 14:27:27 +0100 Subject: [PATCH] implement filter on entry type --- .../clipboard-entry-picker-modal.element.ts | 4 +- .../clipboard-entry-picker-modal.token.ts | 7 +++- .../clipboard-local-storage.manager.ts | 28 ++++++++++++++ ...rd-collection.local-storage.data-source.ts | 2 +- .../core/clipboard/collection/types.ts | 3 ++ .../paste-from-clipboard.property-action.ts | 38 +++++++++++-------- 6 files changed, 63 insertions(+), 19 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/clipboard/clipboard-entry/picker-modal/clipboard-entry-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/clipboard/clipboard-entry/picker-modal/clipboard-entry-picker-modal.element.ts index f105cb1bb335..531362aba97c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/clipboard/clipboard-entry/picker-modal/clipboard-entry-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/clipboard/clipboard-entry/picker-modal/clipboard-entry-picker-modal.element.ts @@ -31,7 +31,9 @@ export class UmbClipboardEntryPickerModalElement extends UmbModalBaseElement< } override async firstUpdated() { - const { data } = await this.#collectionRepository.requestCollection({}); + const entryType = this.data?.entry?.type; + + const { data } = await this.#collectionRepository.requestCollection({ entry: { type: entryType } }); this._items = data?.items ?? []; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/clipboard/clipboard-entry/picker-modal/clipboard-entry-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/clipboard/clipboard-entry/picker-modal/clipboard-entry-picker-modal.token.ts index a73cd70e8b32..c9236bbae72f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/clipboard/clipboard-entry/picker-modal/clipboard-entry-picker-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/clipboard/clipboard-entry/picker-modal/clipboard-entry-picker-modal.token.ts @@ -2,8 +2,13 @@ import type { UmbClipboardEntryDetailModel } from '../types.js'; import { UMB_CLIPBOARD_ENTRY_PICKER_MODAL_ALIAS } from './constants.js'; import { UmbModalToken, type UmbPickerModalData, type UmbPickerModalValue } from '@umbraco-cms/backoffice/modal'; -export interface UmbClipboardEntryPickerModalData extends UmbPickerModalData {} +export interface UmbClipboardEntryPickerModalData extends UmbPickerModalData { + entry: { + type: string; + }; +} +// eslint-disable-next-line @typescript-eslint/no-empty-object-type export interface UmbClipboardEntryPickerModalValue extends UmbPickerModalValue {} export const UMB_CLIPBOARD_ENTRY_PICKER_MODAL = new UmbModalToken< diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/clipboard/clipboard-local-storage.manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/clipboard/clipboard-local-storage.manager.ts index 1b8c357f231d..9e27ee298808 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/clipboard/clipboard-local-storage.manager.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/clipboard/clipboard-local-storage.manager.ts @@ -2,6 +2,14 @@ import type { UmbClipboardEntryDetailModel } from './clipboard-entry/index.js'; const UMB_CLIPBOARD_LOCALSTORAGE_KEY = 'umb:clipboard'; +interface UmbClipboardLocalStorageFilterModel { + entry?: { + type?: string; + }; + skip?: number; + take?: number; +} + // keep internal export class UmbClipboardLocalStorageManager { // Gets all entries from local storage @@ -29,4 +37,24 @@ export class UmbClipboardLocalStorageManager { setEntries(entries: Array) { localStorage.setItem(UMB_CLIPBOARD_LOCALSTORAGE_KEY, JSON.stringify(entries)); } + + // gets a filtered list of entries + filter(filter: UmbClipboardLocalStorageFilterModel) { + const { entries } = this.getEntries(); + const filteredEntries = this.#filterEntries(entries, filter); + const total = filteredEntries.length; + const skip = filter.skip || 0; + const take = filter.take || total; + const pagedEntries = filteredEntries.slice(skip, skip + take); + return { entries: pagedEntries, total }; + } + + #filterEntries(entries: Array, filter: UmbClipboardLocalStorageFilterModel) { + return entries.filter((entry) => { + if (filter.entry?.type && entry.type !== filter.entry.type) { + return false; + } + return true; + }); + } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/clipboard/collection/repository/clipboard-collection.local-storage.data-source.ts b/src/Umbraco.Web.UI.Client/src/packages/core/clipboard/collection/repository/clipboard-collection.local-storage.data-source.ts index c61495144852..039bccd2341f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/clipboard/collection/repository/clipboard-collection.local-storage.data-source.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/clipboard/collection/repository/clipboard-collection.local-storage.data-source.ts @@ -9,7 +9,7 @@ export class UmbClipboardCollectionLocalStorageDataSource #localStorageManager = new UmbClipboardLocalStorageManager(); async getCollection(filter: UmbClipboardCollectionFilterModel) { - const { entries, total } = this.#localStorageManager.getEntries(); + const { entries, total } = this.#localStorageManager.filter(filter); return { data: { items: entries, total } }; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/clipboard/collection/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/clipboard/collection/types.ts index 30c2d6526f29..c8c955de8bb8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/clipboard/collection/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/clipboard/collection/types.ts @@ -1,4 +1,7 @@ export interface UmbClipboardCollectionFilterModel { + entry?: { + type?: string; + }; skip?: number; take?: number; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/clipboard/property-actions/paste/paste-from-clipboard.property-action.ts b/src/Umbraco.Web.UI.Client/src/packages/core/clipboard/property-actions/paste/paste-from-clipboard.property-action.ts index 45bc91e932b9..3705c7baaca5 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/clipboard/property-actions/paste/paste-from-clipboard.property-action.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/clipboard/property-actions/paste/paste-from-clipboard.property-action.ts @@ -6,11 +6,11 @@ import { UmbPropertyActionBase, type UmbPropertyActionArgs } from '@umbraco-cms/ import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal'; export class UmbColorPickerPasteFromClipboardPropertyAction extends UmbPropertyActionBase { + #detailRepository = new UmbClipboardEntryDetailRepository(this); + #init: Promise; + #entryType: string; #propertyContext?: typeof UMB_PROPERTY_CONTEXT.TYPE; #modalManagerContext?: typeof UMB_MODAL_MANAGER_CONTEXT.TYPE; - #clipboardEntryDetailRepository = new UmbClipboardEntryDetailRepository(this); - #init?: Promise; - #entryType?: string; constructor(host: UmbControllerHost, args: UmbPropertyActionArgs) { super(host, args); @@ -19,6 +19,8 @@ export class UmbColorPickerPasteFromClipboardPropertyAction extends UmbPropertyA throw new Error('The "entry.type" meta property is required'); } + this.#entryType = args.meta.entry.type; + this.#init = Promise.all([ this.consumeContext(UMB_PROPERTY_CONTEXT, (context) => { this.#propertyContext = context; @@ -33,22 +35,26 @@ export class UmbColorPickerPasteFromClipboardPropertyAction extends UmbPropertyA override async execute() { await this.#init; - try { - const modalContext = this.#modalManagerContext?.open(this, UMB_CLIPBOARD_ENTRY_PICKER_MODAL); - const value = await modalContext?.onSubmit(); - const clipboardEntryUnique = value?.selection?.[0]; - console.log(this.#entryType); - if (clipboardEntryUnique) { - const { data: clipboardEntry, error } = - await this.#clipboardEntryDetailRepository.requestByUnique(clipboardEntryUnique); + const modalContext = this.#modalManagerContext?.open(this, UMB_CLIPBOARD_ENTRY_PICKER_MODAL, { + data: { + entry: { + type: this.#entryType, + }, + }, + }); + + const value = await modalContext?.onSubmit(); + const clipboardEntryUnique = value?.selection?.[0]; - const clipboardEntryData = clipboardEntry?.data[0]; + if (clipboardEntryUnique) { + const { data: entry } = await this.#detailRepository.requestByUnique(clipboardEntryUnique); - if (clipboardEntryData) { - this.#propertyContext?.setValue(clipboardEntryData); - } + const entryValue = entry?.data[0]; + + if (entryValue) { + this.#propertyContext?.setValue(entryValue); } - } catch (error) {} + } } } export { UmbColorPickerPasteFromClipboardPropertyAction as api };