yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Aligned the code between the DocumentType, MediaType and MemberType pickers

Browse Source
This commit is contained in:
leekelleher
2024-01-11 15:53:04 +00:00
committed by Jacob Overgaard
parent d9433abf24
commit 7a8589d0bf
3 changed files with 77 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/input-document-type/input-document-type.element.ts
View File

@@ -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` <uui-ref-list>${this._items?.map((item) => this._renderItem(item))}</uui-ref-list>
${this.#renderAddButton()}`;
return html` ${this.#renderItems()} ${this.#renderAddButton()} `;
}
#renderItems() {
if (!this._items) return nothing;
if (this.max === 1 && this.selectedIds.length === 1) return nothing;
<uui-ref-list
>${repeat(
this._items,
(item) => item.id,
(item) => this._renderItem(item),
)}</uui-ref-list
>
`;
}
#renderAddButton() {
if (this.max === 1 && this.selectedIds.length === 1) return nothing;
return html`<uui-button id="add-button" look="placeholder" @click=${this.#openPicker} label="open">
Add
</uui-button>`;
if (this.max > 0 && this.selectedIds.length >= this.max) return nothing;
return html`
<uui-button
id="add-button"
look="placeholder"
@click=${this.#openPicker}
label="${this.localize.term('general_choose')}"
>${this.localize.term('general_choose')}</uui-button
>
`;
}
private _renderItem(item: DocumentTypeItemResponseModel) {

48
src/Umbraco.Web.UI.Client/src/packages/media/media-types/components/input-media-type/input-media-type.element.ts
View File

@@ -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`
<uui-ref-list>${this._items?.map((item) => this._renderItem(item))}</uui-ref-list>
<uui-button id="add-button" look="placeholder" @click=${() => this.#pickerContext.openPicker()} label="open"
>Add</uui-button
<uui-ref-list
>${repeat(
this._items,
(item) => item.id,
(item) => this._renderItem(item),
)}</uui-ref-list
>
`;
}
#renderAddButton() {
if (this.max > 0 && this.selectedIds.length >= this.max) return;
return html`
<uui-button
id="add-button"
look="placeholder"
@click=${this.#openPicker}
label="${this.localize.term('general_choose')}"
>${this.localize.term('general_choose')}</uui-button
>
`;
}
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`
<uui-ref-node name=${ifDefined(item.name)}>
<uui-ref-node-document-type name=${ifDefined(item.name)}>
<uui-action-bar slot="actions">
<uui-button
@click=${() => this.#pickerContext.requestRemoveItem(item.id!)}
label="Remove Media Type ${item.name}"
>Remove</uui-button
>${this.localize.term('general_remove')}</uui-button
>
</uui-action-bar>
</uui-ref-node>
</uui-ref-node-document-type>
`;
}

18
src/Umbraco.Web.UI.Client/src/packages/members/member-types/components/input-member-type/input-member-type.element.ts
View File

@@ -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`
<uui-ref-list
>${repeat(
@@ -131,7 +127,7 @@ export class UmbInputMemberTypeElement extends FormControlMixin(UmbLitElement) {
<uui-button
id="add-button"
look="placeholder"
@click=${this._openPicker}
@click=${this.#openPicker}
label="${this.localize.term('general_choose')}"
>${this.localize.term('general_choose')}</uui-button
>