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

MemberPicker: code tidyup

Browse Source 
+ adds the `pickableFilter` feature (for MNTP)
This commit is contained in:
leekelleher
2024-04-18 13:43:53 +01:00
parent 2d96fd05dc
commit bbbf803ff1
1 changed files with 33 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,12 +1,12 @@
import type { UmbMemberItemModel } from '../../repository/index.js';
import { UmbMemberPickerContext } from './input-member.context.js';
import { css, html, customElement, property, state, ifDefined, repeat } from '@umbraco-cms/backoffice/external/lit';
import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import type { MemberItemResponseModel } from '@umbraco-cms/backoffice/external/backend-api';
import { css, html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit';
import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal';
import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UmbModalRouteRegistrationController, UMB_WORKSPACE_MODAL } from '@umbraco-cms/backoffice/modal';
import { UmbSorterController } from '@umbraco-cms/backoffice/sorter';
import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
@customElement('umb-input-member')
export class UmbInputMemberElement extends UUIFormControlMixin(UmbLitElement, '') {
@@ -88,7 +88,6 @@ export class UmbInputMemberElement extends UUIFormControlMixin(UmbLitElement, ''
@property()
public set value(idsString: string) {
// Its with full purpose we don't call super.value, as thats being handled by the observation of the context selection.
this.selection = splitStringToArray(idsString);
}
public get value(): string {
@@ -118,10 +117,8 @@ export class UmbInputMemberElement extends UUIFormControlMixin(UmbLitElement, ''
this._editMemberPath = routeBuilder({});
});
this.observe(this.#pickerContext.selection, (selection) => (this.value = selection.join(',')));
this.observe(this.#pickerContext.selectedItems, (selectedItems) => {
this._items = selectedItems;
});
this.observe(this.#pickerContext.selection, (selection) => (this.value = selection.join(',')), '_observeSelection');
this.observe(this.#pickerContext.selectedItems, (selectedItems) => (this._items = selectedItems), '_observeItems');
}
connectedCallback(): void {
@@ -140,49 +137,49 @@ export class UmbInputMemberElement extends UUIFormControlMixin(UmbLitElement, ''
);
}
protected _openPicker() {
this.#pickerContext.openPicker({
hideTreeRoot: true,
});
}
protected _requestRemoveItem(item: UmbMemberItemModel) {
this.#pickerContext.requestRemoveItem(item.unique!);
}
protected getFormElement() {
return undefined;
}
#pickableFilter: (item: UmbMemberItemModel) => boolean = (item) => {
if (this.allowedContentTypeIds && this.allowedContentTypeIds.length > 0) {
return this.allowedContentTypeIds.includes(item.memberType.unique);
}
return true;
};
#openPicker() {
this.#pickerContext.openPicker({
filter: this.filter,
pickableFilter: this.#pickableFilter,
});
}
#requestRemoveItem(item: MemberItemResponseModel) {
this.#pickerContext.requestRemoveItem(item.id!);
#removeItem(item: UmbMemberItemModel) {
this.#pickerContext.requestRemoveItem(item.unique);
}
render() {
return html` ${this.#renderItems()} ${this.#renderAddButton()} `;
return html`${this.#renderItems()} ${this.#renderAddButton()}`;
}
#renderItems() {
if (!this._items) return;
return html`<uui-ref-list>
${repeat(
this._items,
(item) => item.unique,
(item) => this.#renderItem(item),
)}
</uui-ref-list>`;
return html`
<uui-ref-list>
${repeat(
this._items,
(item) => item.unique,
(item) => this.#renderItem(item),
)}
</uui-ref-list>
`;
}
#renderAddButton() {
if (this.max === 1 && this.selection.length >= this.max) return;
return html`<uui-button
id="add-button"
id="btn-add"
look="placeholder"
@click=${this.#openPicker}
label=${this.localize.term('general_choose')}></uui-button>`;
@@ -190,18 +187,11 @@ export class UmbInputMemberElement extends UUIFormControlMixin(UmbLitElement, ''
#renderItem(item: UmbMemberItemModel) {
if (!item.unique) return;
// TODO: get the correct variant name
const name = item.variants[0].name;
return html`
<uui-ref-node name=${ifDefined(item.variants[0].name)} detail=${ifDefined(item.unique)}>
${this.#renderIsTrashed(item)}
<uui-ref-node name=${item.name} id=${item.unique}>
<uui-action-bar slot="actions">
${this.#renderOpenButton(item)}
<uui-button
@click=${() => this._requestRemoveItem(item)}
label="${this.localize.term('general_remove')} ${name}">
${this.localize.term('general_remove')}
</uui-button>
<uui-button @click=${() => this.#removeItem(item)} label=${this.localize.term('general_remove')}></uui-button>
</uui-action-bar>
</uui-ref-node>
`;
@@ -209,26 +199,18 @@ export class UmbInputMemberElement extends UUIFormControlMixin(UmbLitElement, ''
#renderOpenButton(item: UmbMemberItemModel) {
if (!this.showOpenButton) return;
// TODO: get the correct variant name
const name = item.variants[0].name;
return html`
<uui-button
compact
href="${this._editMemberPath}edit/${item.unique}"
label=${this.localize.term('general_edit') + ` ${name}`}>
<uui-icon name="icon-edit"></uui-icon>
label="${this.localize.term('general_open')} ${item.name}">
${this.localize.term('general_open')}
</uui-button>
`;
}
#renderIsTrashed(item: UmbMemberItemModel) {
// TODO: Uncomment, once the Management API model support deleted members. [LK]
// if (!item.isTrashed) return;
// return html`<uui-tag size="s" slot="tag" color="danger">Trashed</uui-tag>`;
}
static styles = [
css`
#add-button {
#btn-add {
width: 100%;
}