From aab7aadb2e3f54ae1a803ca1192a7cfde46a8b3d Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Thu, 15 Aug 2024 12:52:49 +0200
Subject: [PATCH] wip upgrade member picker to use search components

---
 .../member-picker-modal.element.ts            | 147 ++++--------------
 1 file changed, 27 insertions(+), 120 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts
index e0c3ec8ed1..f87f86be24 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts
@@ -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;