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

wip upgrade member picker to use search components

Browse Source
This commit is contained in:
Mads Rasmussen
2024-08-15 12:52:49 +02:00
parent f19038068b
commit aab7aadb2e
1 changed files with 27 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts
View File

@@ -1,13 +1,12 @@
import { UmbMemberCollectionRepository } from '../../collection/index.js';
import { UmbMemberSearchProvider } from '../../search/member.search-provider.js';
import type { UmbMemberDetailModel } from '../../types.js';
import type { UmbMemberItemModel } from '../../repository/index.js';
import type { UmbMemberPickerModalValue, UmbMemberPickerModalData } from './member-picker-modal.token.js';
import { css, customElement, html, nothing, repeat, state, when } from '@umbraco-cms/backoffice/external/lit';
import { debounce, UmbSelectionManager } from '@umbraco-cms/backoffice/utils';
import { customElement, html, repeat, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbSelectionManager } from '@umbraco-cms/backoffice/utils';
import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import type { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
import { UmbCollectionPickerModalContext } from '@umbraco-cms/backoffice/collection';
@customElement('umb-member-picker-modal')
export class UmbMemberPickerModalElement extends UmbModalBaseElement<
@@ -17,18 +16,11 @@ export class UmbMemberPickerModalElement extends UmbModalBaseElement<
@state()
private _members: Array<UmbMemberDetailModel> = [];
@state()
private _searchQuery: string = '';
@state()
private _searchResult: Array<UmbMemberItemModel> = [];
@state()
private _searching = false;
#collectionRepository = new UmbMemberCollectionRepository(this);
#selectionManager = new UmbSelectionManager(this);
#searchProvider = new UmbMemberSearchProvider(this);
// TODO: find a way to implement through the manifest api field
#api = new UmbCollectionPickerModalContext(this);
override connectedCallback(): void {
super.connectedCallback();
@@ -62,54 +54,20 @@ export class UmbMemberPickerModalElement extends UmbModalBaseElement<
}
}
#onSearchInput(event: UUIInputEvent) {
const value = event.target.value as string;
this._searchQuery = value;
if (!this._searchQuery) {
this._searchResult = [];
this._searching = false;
return;
}
this._searching = true;
this.#debouncedSearch();
}
#debouncedSearch = debounce(this.#search, 300);
async #search() {
if (!this._searchQuery) return;
const { data } = await this.#searchProvider.search({ query: this._searchQuery });
this._searchResult = data?.items ?? [];
this._searching = false;
}
#onSearchClear() {
this._searchQuery = '';
this._searchResult = [];
}
override render() {
return html`
<umb-body-layout headline=${this.localize.term('defaultdialogs_selectMembers')}>
<uui-box>${this.#renderSearch()} ${this.#renderItems()}</uui-box>
<div slot="actions">
<uui-button
label=${this.localize.term('general_cancel')}
@click=${() => this.modalContext?.reject()}></uui-button>
<uui-button
color="positive"
look="primary"
label=${this.localize.term('general_submit')}
@click=${() => this.modalContext?.submit()}></uui-button>
</div>
<uui-box>
<umb-picker-modal-search></umb-picker-modal-search>
<umb-picker-modal-search-result></umb-picker-modal-search-result>
${this.#renderItems()}</uui-box
>
${this.#renderActions()}
</umb-body-layout>
`;
}
#renderItems() {
if (this._searchQuery) return nothing;
return html`
${repeat(
this.#filteredMembers,
@@ -119,52 +77,6 @@ export class UmbMemberPickerModalElement extends UmbModalBaseElement<
`;
}
#renderSearch() {
return html`
<uui-input
id="search-input"
placeholder=${this.localize.term('placeholders_search')}
.value=${this._searchQuery}
@input=${this.#onSearchInput}>
<div slot="prepend">
${this._searching
? html`<uui-loader-circle id="search-indicator"></uui-loader-circle>`
: html`<uui-icon name="search"></uui-icon>`}
</div>
${when(
this._searchQuery,
() => html`
<div slot="append">
<uui-button type="button" @click=${this.#onSearchClear} compact>
<uui-icon name="icon-delete"></uui-icon>
</uui-button>
</div>
`,
)}
</uui-input>
<div id="search-divider"></div>
${this.#renderSearchResult()}
`;
}
#renderSearchResult() {
if (this._searchQuery && this._searching === false && this._searchResult.length === 0) {
return this.#renderEmptySearchResult();
}
return html`
${repeat(
this._searchResult,
(item) => item.unique,
(item) => this.#renderMemberItem(item),
)}
`;
}
#renderEmptySearchResult() {
return html`<small>No result for <strong>"${this._searchQuery}"</strong>.</small>`;
}
#renderMemberItem(item: UmbMemberItemModel | UmbMemberDetailModel) {
return html`
<uui-menu-item
@@ -178,27 +90,22 @@ export class UmbMemberPickerModalElement extends UmbModalBaseElement<
`;
}
static override styles = [
UmbTextStyles,
css`
#search-input {
width: 100%;
}
#renderActions() {
return html`
<div slot="actions">
<uui-button
label=${this.localize.term('general_cancel')}
@click=${() => this.modalContext?.reject()}></uui-button>
<uui-button
color="positive"
look="primary"
label=${this.localize.term('general_submit')}
@click=${() => this.modalContext?.submit()}></uui-button>
</div>
`;
}
#search-divider {
width: 100%;
height: 1px;
background-color: var(--uui-color-divider);
margin-top: var(--uui-size-space-5);
margin-bottom: var(--uui-size-space-3);
}
#search-indicator {
margin-left: 7px;
margin-top: 4px;
}
`,
];
static override styles = [UmbTextStyles];
}
export default UmbMemberPickerModalElement;