From 6d979e19520def6914aafe5cdc29790ad2bf7b19 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Mon, 27 May 2024 15:05:16 +0200 Subject: [PATCH 1/2] Bugfix: Static file picker --- ...ui-block-grid-layout-stylesheet.element.ts | 3 +++ .../input-static-file.context.ts | 19 +++++++++++++------ .../input-static-file.element.ts | 18 ++++++++++++++++-- .../modals/static-file-picker-modal.token.ts | 4 ++-- .../static-file-item.server.data-source.ts | 15 +++++++++++---- 5 files changed, 45 insertions(+), 14 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-layout-stylesheet/property-editor-ui-block-grid-layout-stylesheet.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-layout-stylesheet/property-editor-ui-block-grid-layout-stylesheet.element.ts index 0b3351a30e..d93dcc568c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-layout-stylesheet/property-editor-ui-block-grid-layout-stylesheet.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-layout-stylesheet/property-editor-ui-block-grid-layout-stylesheet.element.ts @@ -27,6 +27,8 @@ export class UmbPropertyEditorUIBlockGridLayoutStylesheetElement return this._value; } + private _pickableFilter = (item: any) => item.unique.endsWith('css'); + @property({ attribute: false }) public config?: UmbPropertyEditorConfigCollection; @@ -40,6 +42,7 @@ export class UmbPropertyEditorUIBlockGridLayoutStylesheetElement return html` diff --git a/src/Umbraco.Web.UI.Client/src/packages/static-file/components/input-static-file/input-static-file.context.ts b/src/Umbraco.Web.UI.Client/src/packages/static-file/components/input-static-file/input-static-file.context.ts index 95e4f9c262..72c8259c99 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/static-file/components/input-static-file/input-static-file.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/static-file/components/input-static-file/input-static-file.context.ts @@ -1,13 +1,20 @@ -import { UMB_STATIC_FILE_TREE_REPOSITORY_ALIAS } from '../../tree/index.js'; -import { UMB_STATIC_FILE_PICKER_MODAL } from '../../modals/index.js'; +import { UMB_STATIC_FILE_ITEM_REPOSITORY_ALIAS } from '../../repository/item/manifests.js'; +import { + UMB_STATIC_FILE_PICKER_MODAL, + type UmbStaticFilePickerModalData, + type UmbStaticFilePickerModalValue, +} from '../../modals/index.js'; import type { UmbStaticFileItemModel } from '../../repository/item/types.js'; import { UmbPickerInputContext } from '@umbraco-cms/backoffice/picker-input'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; -export class UmbStaticFilePickerContext extends UmbPickerInputContext { +export class UmbStaticFilePickerContext extends UmbPickerInputContext< + UmbStaticFileItemModel, + any, + UmbStaticFilePickerModalData, + UmbStaticFilePickerModalValue +> { constructor(host: UmbControllerHost) { - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - super(host, UMB_STATIC_FILE_TREE_REPOSITORY_ALIAS, UMB_STATIC_FILE_PICKER_MODAL); + super(host, UMB_STATIC_FILE_ITEM_REPOSITORY_ALIAS, UMB_STATIC_FILE_PICKER_MODAL); } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/static-file/components/input-static-file/input-static-file.element.ts b/src/Umbraco.Web.UI.Client/src/packages/static-file/components/input-static-file/input-static-file.element.ts index 6cbe38de74..0b0d4c5ec2 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/static-file/components/input-static-file/input-static-file.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/static-file/components/input-static-file/input-static-file.element.ts @@ -4,9 +4,12 @@ import { css, customElement, html, nothing, property, repeat, state } from '@umb import { splitStringToArray } from '@umbraco-cms/backoffice/utils'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui'; +import { UmbServerFilePathUniqueSerializer } from '@umbraco-cms/backoffice/server-file-system'; @customElement('umb-input-static-file') export class UmbInputStaticFileElement extends UUIFormControlMixin(UmbLitElement, '') { + #serializer = new UmbServerFilePathUniqueSerializer(); + /** * This is a minimum amount of selected files in this input. * @type {number} @@ -70,6 +73,9 @@ export class UmbInputStaticFileElement extends UUIFormControlMixin(UmbLitElement return this.selection.join(','); } + @property() + public pickableFilter?: (item: UmbStaticFileItemModel) => boolean; + @state() private _items?: Array; @@ -112,13 +118,21 @@ export class UmbInputStaticFileElement extends UUIFormControlMixin(UmbLitElement `; } + #openPicker() { + this.#pickerContext.openPicker({ + pickableFilter: this.pickableFilter, + multiple: this.max === 1 ? false : true, + hideTreeRoot: true, + }); + } + #renderAddButton() { if (this.max === 1 && this.selection.length >= this.max) return; return html` this.#pickerContext.openPicker()} + @click=${this.#openPicker} label=${this.localize.term('general_choose')}> `; } @@ -126,7 +140,7 @@ export class UmbInputStaticFileElement extends UUIFormControlMixin(UmbLitElement private _renderItem(item: UmbStaticFileItemModel) { if (!item.unique) return; return html` - + ; +export type UmbStaticFilePickerModalData = UmbTreePickerModalData; export type UmbStaticFilePickerModalValue = UmbTreePickerModalValue; export const UMB_STATIC_FILE_PICKER_MODAL = new UmbModalToken< diff --git a/src/Umbraco.Web.UI.Client/src/packages/static-file/repository/item/static-file-item.server.data-source.ts b/src/Umbraco.Web.UI.Client/src/packages/static-file/repository/item/static-file-item.server.data-source.ts index 0bd42e077f..89b6e0ddac 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/static-file/repository/item/static-file-item.server.data-source.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/static-file/repository/item/static-file-item.server.data-source.ts @@ -3,6 +3,7 @@ import { UmbItemServerDataSourceBase } from '@umbraco-cms/backoffice/repository' import type { StaticFileItemResponseModel } from '@umbraco-cms/backoffice/external/backend-api'; import { StaticFileService } from '@umbraco-cms/backoffice/external/backend-api'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; +import { UmbServerFilePathUniqueSerializer } from '@umbraco-cms/backoffice/server-file-system'; /** * A server data source for Static File items @@ -27,14 +28,20 @@ export class UmbStaticFileItemServerDataSource extends UmbItemServerDataSourceBa } } -/* eslint-disable local-rules/no-direct-api-import */ -const getItems = (uniques: Array) => StaticFileService.getItemStaticFile({ path: uniques }); +const getItems = (uniques: Array) => { + const serializer = new UmbServerFilePathUniqueSerializer(); + const path = uniques.map((unique) => serializer.toServerPath(unique)!); + + /* eslint-disable local-rules/no-direct-api-import */ + return StaticFileService.getItemStaticFile({ path }); +}; const mapper = (item: StaticFileItemResponseModel): UmbStaticFileItemModel => { + const serializer = new UmbServerFilePathUniqueSerializer(); return { isFolder: item.isFolder, name: item.name, - parentUnique: item.parent ? item.parent.path : null, - unique: item.path, + parentUnique: item.parent ? serializer.toUnique(item.parent.path) : null, + unique: serializer.toUnique(item.path), }; }; From 3bf964c8071b6c3fb71ae9a249d3b051dee2cbd7 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Mon, 27 May 2024 14:21:34 +0100 Subject: [PATCH 2/2] Corrected type imports --- .../input-static-file/input-static-file.context.ts | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/static-file/components/input-static-file/input-static-file.context.ts b/src/Umbraco.Web.UI.Client/src/packages/static-file/components/input-static-file/input-static-file.context.ts index 72c8259c99..0e29d38c6c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/static-file/components/input-static-file/input-static-file.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/static-file/components/input-static-file/input-static-file.context.ts @@ -1,10 +1,7 @@ import { UMB_STATIC_FILE_ITEM_REPOSITORY_ALIAS } from '../../repository/item/manifests.js'; -import { - UMB_STATIC_FILE_PICKER_MODAL, - type UmbStaticFilePickerModalData, - type UmbStaticFilePickerModalValue, -} from '../../modals/index.js'; +import { UMB_STATIC_FILE_PICKER_MODAL } from '../../modals/index.js'; import type { UmbStaticFileItemModel } from '../../repository/item/types.js'; +import type { UmbStaticFilePickerModalData, UmbStaticFilePickerModalValue } from '../../modals/index.js'; import { UmbPickerInputContext } from '@umbraco-cms/backoffice/picker-input'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';