From e4209d1e7e89f43580bb660219247b1aca85022f Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 17 Apr 2023 21:58:15 +0200 Subject: [PATCH] add getter for min a max --- .../libs/picker/picker.context.ts | 11 +++---- .../data-type-input.element.ts | 5 ++++ .../input-language-picker.element.ts | 29 +++++++++++++------ 3 files changed, 31 insertions(+), 14 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/libs/picker/picker.context.ts b/src/Umbraco.Web.UI.Client/libs/picker/picker.context.ts index bd5fda6a2e..9b49179712 100644 --- a/src/Umbraco.Web.UI.Client/libs/picker/picker.context.ts +++ b/src/Umbraco.Web.UI.Client/libs/picker/picker.context.ts @@ -1,4 +1,4 @@ -import { UmbItemRepository, UmbTreeRepository } from '@umbraco-cms/backoffice/repository'; +import { UmbItemRepository } from '@umbraco-cms/backoffice/repository'; import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller'; import { ArrayState, UmbObserverController } from '@umbraco-cms/backoffice/observable-api'; import { createExtensionClass, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extensions-api'; @@ -14,7 +14,7 @@ import { UmbChangeEvent } from '@umbraco-cms/backoffice/events'; export class UmbPickerContext { host: UmbControllerHostElement; - modalAlias: UmbModalToken | string; + modalAlias: string | UmbModalToken; repository?: UmbItemRepository; #getUnique: (entry: ItemType) => string | undefined; @@ -36,7 +36,7 @@ export class UmbPickerContext { constructor( host: UmbControllerHostElement, repositoryAlias: string, - modalAlias: UmbModalToken | string, + modalAlias: string | UmbModalToken, getUniqueMethod?: (entry: ItemType) => string | undefined ) { this.host = host; @@ -74,13 +74,14 @@ export class UmbPickerContext { this.#selection.next(selection); } - // TODO: this need to accept an options object at some point to pass to the modal context - openPicker() { + // TODO: revisit this method. How do we best pass picker data? + openPicker(pickerData: any) { if (!this.modalContext) throw new Error('Modal context is not initialized'); const modalHandler = this.modalContext.open(this.modalAlias, { multiple: this.max === 1 ? false : true, selection: [...this.getSelection()], + ...pickerData, }); modalHandler?.onSubmit().then(({ selection }: any) => { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/components/data-type-input/data-type-input.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/components/data-type-input/data-type-input.element.ts index db4aafbef9..7e86e55ce4 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/components/data-type-input/data-type-input.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/components/data-type-input/data-type-input.element.ts @@ -44,11 +44,16 @@ export class UmbDataTypeInputElement extends FormControlMixin(UmbLitElement) { * @attr * @default undefined */ + private _max: number | undefined; @property({ type: Number }) + public get max(): number | undefined { + return this._max; + } public set max(value: number | undefined) { if (value !== undefined) { this.#pickerContext.max = value; } + this._max = value; } /** diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-language-picker/input-language-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-language-picker/input-language-picker.element.ts index 7de61d2d50..961f3f9572 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-language-picker/input-language-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-language-picker/input-language-picker.element.ts @@ -21,10 +21,15 @@ export class UmbInputLanguagePickerElement extends FormControlMixin(UmbLitElemen * This is a minimum amount of selected items in this input. * @type {number} * @attr - * @default undefined + * @default 0 */ @property({ type: Number }) - min?: number; + public get min(): number { + return this.#pickerContext.min; + } + public set min(value: number) { + this.#pickerContext.min = value; + } /** * Min validation message. @@ -39,10 +44,15 @@ export class UmbInputLanguagePickerElement extends FormControlMixin(UmbLitElemen * This is a maximum amount of selected items in this input. * @type {number} * @attr - * @default undefined + * @default Infinite */ @property({ type: Number }) - max?: number; + public get max(): number { + return this.#pickerContext.max; + } + public set max(value: number) { + this.#pickerContext.max = value; + } /** * Max validation message. @@ -92,7 +102,7 @@ export class UmbInputLanguagePickerElement extends FormControlMixin(UmbLitElemen () => !!this.max && this._selectedIsoCodes.length > this.max ); - this.observe(this.#pickerContext.selection, (selection) => (this.selectedIsoCodes = selection)); + this.observe(this.#pickerContext.selection, (selection) => (this._selectedIsoCodes = selection)); this.observe(this.#pickerContext.selectedItems, (selectedItems) => (this._items = selectedItems)); } @@ -101,14 +111,15 @@ export class UmbInputLanguagePickerElement extends FormControlMixin(UmbLitElemen } private _openPicker() { - // TODO: add filter - // filter: this.filter, - this.#pickerContext.openPicker(); + this.#pickerContext.openPicker({ + filter: this.filter, + hello: 'world', + }); } render() { return html` - ${this._items.map((item) => this._renderItem(item))} + ${this._items.map((item) => this._renderItem(item))}