From 1e04cb6203cecd3bdc6cd1d2cc72f89fd7a474d3 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Wed, 21 Feb 2024 16:53:03 +0000
Subject: [PATCH] Media Collection: Toolbar

to add search capability.
---
 .../media-collection-toolbar.element.ts       | 61 +++++++++++++++++++
 .../collection/media-collection.element.ts    |  4 +-
 2 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/media/media/collection/media-collection-toolbar.element.ts

diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/media-collection-toolbar.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/media-collection-toolbar.element.ts
new file mode 100644
index 0000000000..6e791e0c55
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/media-collection-toolbar.element.ts
@@ -0,0 +1,61 @@
+import type { UmbMediaCollectionContext } from './media-collection.context.js';
+import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UMB_DEFAULT_COLLECTION_CONTEXT } from '@umbraco-cms/backoffice/collection';
+
+@customElement('umb-media-collection-toolbar')
+export class UmbMediaCollectionToolbarElement extends UmbLitElement {
+	#collectionContext?: UmbMediaCollectionContext;
+
+	#inputTimer?: NodeJS.Timeout;
+	#inputTimerAmount = 500;
+
+	constructor() {
+		super();
+
+		this.consumeContext(UMB_DEFAULT_COLLECTION_CONTEXT, (instance) => {
+			this.#collectionContext = instance as UmbMediaCollectionContext;
+		});
+	}
+
+	#updateSearch(event: InputEvent) {
+		const target = event.target as HTMLInputElement;
+		const filter = target.value || '';
+		clearTimeout(this.#inputTimer);
+		this.#inputTimer = setTimeout(() => this.#collectionContext?.setFilter({ filter }), this.#inputTimerAmount);
+	}
+
+	render() {
+		return html`
+			<umb-collection-action-bundle></umb-collection-action-bundle>
+			<uui-input @input=${this.#updateSearch} label="Search" placeholder="Search..." id="input-search"></uui-input>
+			<umb-collection-view-bundle></umb-collection-view-bundle>
+		`;
+	}
+
+	static styles = [
+		css`
+			:host {
+				height: 100%;
+				width: 100%;
+				display: flex;
+				justify-content: space-between;
+				white-space: nowrap;
+				gap: var(--uui-size-space-5);
+				align-items: center;
+			}
+
+			#input-search {
+				width: 100%;
+			}
+		`,
+	];
+}
+
+export default UmbMediaCollectionToolbarElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-media-collection-toolbar': UmbMediaCollectionToolbarElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/media-collection.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/media-collection.element.ts
index 4c3277af0f..79ca338c7a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/media-collection.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/media-collection.element.ts
@@ -1,6 +1,8 @@
 import { css, customElement, html } from '@umbraco-cms/backoffice/external/lit';
 import { UmbCollectionDefaultElement } from '@umbraco-cms/backoffice/collection';
 
+import './media-collection-toolbar.element.js';
+
 @customElement('umb-media-collection')
 export class UmbMediaCollectionElement extends UmbCollectionDefaultElement {
 	constructor() {
@@ -37,7 +39,7 @@ export class UmbMediaCollectionElement extends UmbCollectionDefaultElement {
 
 	protected renderToolbar() {
 		return html`
-			<umb-collection-toolbar slot="header"></umb-collection-toolbar>
+			<umb-media-collection-toolbar slot="header"></umb-media-collection-toolbar>
 			<!-- TODO: Add the Media Upload dropzone component in here. [LK] -->
 			<uui-file-dropzone
 				id="dropzone"