From 7a8589d0bf54e2d0e48e94bf3166978d4fe78e4f Mon Sep 17 00:00:00 2001 From: leekelleher Date: Thu, 11 Jan 2024 15:53:04 +0000 Subject: [PATCH] Aligned the code between the DocumentType, MediaType and MemberType pickers --- .../input-document-type.element.ts | 40 ++++++++++++---- .../input-media-type.element.ts | 48 +++++++++++++++---- .../input-member-type.element.ts | 18 +++---- 3 files changed, 77 insertions(+), 29 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/input-document-type/input-document-type.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/input-document-type/input-document-type.element.ts index ad9de9b02a..262cfff0f0 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/input-document-type/input-document-type.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/input-document-type/input-document-type.element.ts @@ -1,5 +1,5 @@ import { UmbDocumentTypePickerContext } from './input-document-type.context.js'; -import { css, html, customElement, property, state, ifDefined, nothing } from '@umbraco-cms/backoffice/external/lit'; +import { css, html, customElement, property, state, ifDefined, repeat, nothing } from '@umbraco-cms/backoffice/external/lit'; import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import type { DocumentTypeItemResponseModel } from '@umbraco-cms/backoffice/backend-api'; @@ -95,6 +95,10 @@ export class UmbInputDocumentTypeElement extends FormControlMixin(UmbLitElement) .observeRouteBuilder((routeBuilder) => { this._editDocumentTypePath = routeBuilder({}); }); + } + + connectedCallback() { + super.connectedCallback(); this.addValidator( 'rangeUnderflow', @@ -123,20 +127,40 @@ export class UmbInputDocumentTypeElement extends FormControlMixin(UmbLitElement) pickableFilter: (x) => x.isElement, }); } else { - this.#pickerContext.openPicker({ hideTreeRoot: true }); + this.#pickerContext.openPicker({ + hideTreeRoot: true, + }); } } render() { - return html` ${this._items?.map((item) => this._renderItem(item))} - ${this.#renderAddButton()}`; + return html` ${this.#renderItems()} ${this.#renderAddButton()} `; + } + + #renderItems() { + if (!this._items) return nothing; + if (this.max === 1 && this.selectedIds.length === 1) return nothing; + ${repeat( + this._items, + (item) => item.id, + (item) => this._renderItem(item), + )} + `; } #renderAddButton() { - if (this.max === 1 && this.selectedIds.length === 1) return nothing; - return html` - Add - `; + if (this.max > 0 && this.selectedIds.length >= this.max) return nothing; + return html` + ${this.localize.term('general_choose')} + `; } private _renderItem(item: DocumentTypeItemResponseModel) { diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/components/input-media-type/input-media-type.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/components/input-media-type/input-media-type.element.ts index 787e5be130..aff4f78246 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/components/input-media-type/input-media-type.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/components/input-media-type/input-media-type.element.ts @@ -1,5 +1,5 @@ import { UmbMediaTypePickerContext } from './input-media-type.context.js'; -import { css, html, customElement, property, state, ifDefined } from '@umbraco-cms/backoffice/external/lit'; +import { css, html, customElement, property, state, ifDefined, repeat } from '@umbraco-cms/backoffice/external/lit'; import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import type { MediaTypeItemResponseModel } from '@umbraco-cms/backoffice/backend-api'; @@ -73,6 +73,10 @@ export class UmbInputMediaTypeElement extends FormControlMixin(UmbLitElement) { constructor() { super(); + } + + connectedCallback() { + super.connectedCallback(); this.addValidator( 'rangeUnderflow', @@ -94,30 +98,54 @@ export class UmbInputMediaTypeElement extends FormControlMixin(UmbLitElement) { return undefined; } + #openPicker() { + this.#pickerContext.openPicker({ + hideTreeRoot: true, + }); + } + render() { - console.log('ITEMS', this._items); + return html` ${this.#renderItems()} ${this.#renderAddButton()} `; + } + + #renderItems() { + if (!this._items) return; return html` - ${this._items?.map((item) => this._renderItem(item))} - this.#pickerContext.openPicker()} label="open" - >Add${repeat( + this._items, + (item) => item.id, + (item) => this._renderItem(item), + )} + `; + } + + #renderAddButton() { + if (this.max > 0 && this.selectedIds.length >= this.max) return; + return html` + ${this.localize.term('general_choose')} `; } private _renderItem(item: MediaTypeItemResponseModel) { if (!item.id) return; - - //TODO: Using uui-ref-node as we don't have a uui-ref-media-type yet. return html` - + this.#pickerContext.requestRemoveItem(item.id!)} label="Remove Media Type ${item.name}" - >Remove${this.localize.term('general_remove')} - + `; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-types/components/input-member-type/input-member-type.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-types/components/input-member-type/input-member-type.element.ts index 94e6483d14..0ce146c11d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member-types/components/input-member-type/input-member-type.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-types/components/input-member-type/input-member-type.element.ts @@ -94,26 +94,22 @@ export class UmbInputMemberTypeElement extends FormControlMixin(UmbLitElement) { this.observe(this.#pickerContext.selectedItems, (selectedItems) => (this._items = selectedItems)); } - protected _openPicker() { + protected getFormElement() { + return undefined; + } + + #openPicker() { this.#pickerContext.openPicker({ hideTreeRoot: true, }); } - protected getFormElement() { - return undefined; - } - render() { - return html` - ${this.#renderItems()} - ${this.#renderAddButton()} - `; + return html` ${this.#renderItems()} ${this.#renderAddButton()} `; } #renderItems() { if (!this._items) return; - // TODO: Add sorting. [LK] return html` ${repeat( @@ -131,7 +127,7 @@ export class UmbInputMemberTypeElement extends FormControlMixin(UmbLitElement) { ${this.localize.term('general_choose')}