From 3d6f4edad8a6c128c36123014bcb34b271522cb9 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Wed, 21 Feb 2024 16:15:08 +0100
Subject: [PATCH 1/5] Feature: Block Catalogue Search Function

---
 .../block-catalogue-modal.element.ts          | 28 +++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts
index 1beec67023..0b0dd04710 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts
@@ -6,6 +6,7 @@ import type {
 	UmbBlockTypeWithGroupKey,
 } from '@umbraco-cms/backoffice/block';
 import { css, html, customElement, state, repeat, ifDefined, nothing } from '@umbraco-cms/backoffice/external/lit';
+import type { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
 import {
 	UMB_MODAL_CONTEXT,
 	UmbModalBaseElement,
@@ -21,10 +22,13 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement<
 	private _groupedBlocks: Array<{ name?: string; blocks: Array<UmbBlockTypeWithGroupKey> }> = [];
 
 	@state()
-	_openClipboard?: boolean;
+	private _openClipboard?: boolean;
 
 	@state()
-	_workspacePath?: string;
+	private _workspacePath?: string;
+
+	@state()
+	private _filter?: Array<{ name?: string; blocks: Array<UmbBlockTypeWithGroupKey> }>;
 
 	constructor() {
 		super();
@@ -85,8 +89,21 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement<
 		return html`Clipboard`;
 	}
 
+	#onSearch(e: UUIInputEvent) {
+		console.log('on search change', e.target.value);
+	}
+
 	#renderCreateEmpty() {
 		return html`
+			${this._groupedBlocks.length > 7
+				? html`<uui-input
+						id="search"
+						@change=${this.#onSearch}
+						label=${this.localize.term('general_search')}
+						placeholder=${this.localize.term('placeholders_search')}>
+						<uui-icon name="icon-search" slot="prepend"></uui-icon>
+				  </uui-input>`
+				: nothing}
 			${this._groupedBlocks.map(
 				(group) => html`
 					${group.name ? html`<h4>${group.name}</h4>` : nothing}
@@ -133,6 +150,13 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement<
 
 	static styles = [
 		css`
+			#search {
+				width: 100%;
+				align-items: center;
+			}
+			#search uui-icon {
+				padding-left: var(--uui-size-space-3);
+			}
 			.blockGroup {
 				display: grid;
 				gap: 1rem;

From e9582c45c5b36becf968faedffef3cf4c3cc70fa Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Mon, 26 Feb 2024 13:41:09 +0100
Subject: [PATCH 2/5] set search

---
 .../block-catalogue-modal.element.ts          | 25 ++++++++++++++-----
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts
index 63dbb35be9..86979b23b2 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts
@@ -24,10 +24,10 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement<
 	private _workspacePath?: string;
 
 	@state()
-	private _filtered?: Array<{ name?: string; blocks: Array<UmbBlockTypeWithGroupKey> }>;
+	private _filtered: Array<{ name?: string; blocks: Array<UmbBlockTypeWithGroupKey> }> = [];
 
 	@state()
-	private _search?: string;
+	private _search = '';
 
 	constructor() {
 		super();
@@ -66,6 +66,23 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement<
 		}));
 
 		this._groupedBlocks = [{ blocks: noGroupBlocks }, ...grouped];
+		this.#onFilter();
+	}
+
+	#onFilter() {
+		if (this._search.length < 3) {
+			this._filtered = this._groupedBlocks;
+		} else {
+			const search = this._search.toLowerCase();
+			this._filtered = this._groupedBlocks.filter((group) => {
+				return group.blocks.find((block) => block.label?.toLocaleLowerCase().includes(search)) ? true : false;
+			});
+		}
+	}
+
+	#onSearch(e: UUIInputEvent) {
+		this._search = e.target.value as string;
+		this.#onFilter();
 	}
 
 	render() {
@@ -88,10 +105,6 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement<
 		return html`Clipboard`;
 	}
 
-	#onSearch(e: UUIInputEvent) {
-		console.log('on search change', e.target.value);
-	}
-
 	#renderCreateEmpty() {
 		return html`
 			${this._groupedBlocks.length > 7

From 200442a1cec22795ce3276f4a90a808de279e39b Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Tue, 27 Feb 2024 10:17:30 +0100
Subject: [PATCH 3/5] search function

---
 .../block-catalogue-modal.element.ts          | 53 +++++++++----------
 1 file changed, 26 insertions(+), 27 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts
index 46179f300a..11832f9772 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts
@@ -72,12 +72,12 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement<
 	}
 
 	#onFilter() {
-		if (this._search.length < 3) {
+		if (this._search.length <= 3) {
 			this._filtered = this._groupedBlocks;
 		} else {
 			const search = this._search.toLowerCase();
-			this._filtered = this._groupedBlocks.filter((group) => {
-				return group.blocks.find((block) => block.label?.toLocaleLowerCase().includes(search)) ? true : false;
+			this._filtered = this._groupedBlocks.map((group) => {
+				return { ...group, blocks: group.blocks.filter((block) => block.label?.toLocaleLowerCase().includes(search)) };
 			});
 		}
 	}
@@ -109,37 +109,35 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement<
 
 	#renderCreateEmpty() {
 		return html`
-			${this._groupedBlocks.length > 7
+			${this.data?.blocks && this.data.blocks.length >= 10
 				? html`<uui-input
 						id="search"
-						@change=${this.#onSearch}
+						@input=${this.#onSearch}
 						label=${this.localize.term('general_search')}
 						placeholder=${this.localize.term('placeholders_search')}>
 						<uui-icon name="icon-search" slot="prepend"></uui-icon>
 				  </uui-input>`
 				: nothing}
-			${this._groupedBlocks
-				? this._groupedBlocks.map(
-						(group) => html`
-							${group.name && group.name !== '' ? html`<h4>${group.name}</h4>` : nothing}
-							<div class="blockGroup">
-								${repeat(
-									group.blocks,
-									(block) => block.contentElementTypeKey,
-									(block) => html`
-										<umb-block-type-card
-											.name=${block.label}
-											.iconColor=${block.iconColor}
-											.backgroundColor=${block.backgroundColor}
-											.contentElementTypeKey=${block.contentElementTypeKey}
-											.href="${this._workspacePath}create/${block.contentElementTypeKey}">
-										</umb-block-type-card>
-									`,
-								)}
-							</div>
-						`,
-				  )
-				: ''}
+			${this._filtered.map(
+				(group) => html`
+					${group.name && group.name !== '' ? html`<h4>${group.name}</h4>` : nothing}
+					<div class="blockGroup">
+						${repeat(
+							group.blocks,
+							(block) => block.contentElementTypeKey,
+							(block) => html`
+								<umb-block-type-card
+									.name=${block.label}
+									.iconColor=${block.iconColor}
+									.backgroundColor=${block.backgroundColor}
+									.contentElementTypeKey=${block.contentElementTypeKey}
+									.href="${this._workspacePath}create/${block.contentElementTypeKey}">
+								</umb-block-type-card>
+							`,
+						)}
+					</div>
+				`,
+			)}
 		`;
 	}
 
@@ -169,6 +167,7 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement<
 			#search {
 				width: 100%;
 				align-items: center;
+				margin-bottom: var(--uui-size-layout-1);
 			}
 			#search uui-icon {
 				padding-left: var(--uui-size-space-3);

From 27d6bfa14d0903e8c281f71a97a93f14409ab6ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Tue, 27 Feb 2024 16:44:46 +0100
Subject: [PATCH 4/5] correct block catalogue data parsing

---
 .../context/block-grid-entries.context.ts     | 43 +++++++++----------
 .../block-catalogue-modal.element.ts          | 14 +++---
 2 files changed, 28 insertions(+), 29 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-entries.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-entries.context.ts
index 039d16f8e9..fc2b1924f8 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-entries.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-entries.context.ts
@@ -244,33 +244,32 @@ export class UmbBlockGridEntriesContext
 			// Area entries:
 			if (!this.#areaType) return [];
 
-			if (this.#areaType.specifiedAllowance && this.#areaType.specifiedAllowance.length > 0) {
-				return this.#areaType.specifiedAllowance
-					.flatMap((permission) => {
-						if (permission.groupKey) {
-							return (
-								this._manager
-									?.getBlockTypes()
-									.filter(
-										(blockType) => blockType.groupKey === permission.groupKey && blockType.allowInAreas === true,
-									) ?? []
-							);
-						} else if (permission.elementTypeKey) {
-							return (
-								this._manager?.getBlockTypes().filter((x) => x.contentElementTypeKey === permission.elementTypeKey) ??
-								[]
-							);
-						}
-						return [];
-					})
-					.filter((v, i, a) => a.find((x) => x.contentElementTypeKey === v.contentElementTypeKey) === undefined);
+			if (this.#areaType.specifiedAllowance && this.#areaType.specifiedAllowance?.length > 0) {
+				return (
+					this.#areaType.specifiedAllowance
+						.flatMap((permission) => {
+							if (permission.groupKey) {
+								return (
+									this._manager?.getBlockTypes().filter((blockType) => blockType.groupKey === permission.groupKey) ?? []
+								);
+							} else if (permission.elementTypeKey) {
+								return (
+									this._manager?.getBlockTypes().filter((x) => x.contentElementTypeKey === permission.elementTypeKey) ??
+									[]
+								);
+							}
+							return [];
+						})
+						// Remove duplicates:
+						.filter((v, i, a) => a.findIndex((x) => x.contentElementTypeKey === v.contentElementTypeKey) === i)
+				);
 			}
 
+			// No specific permissions setup, so we will fallback to items allowed in areas:
 			return this._manager.getBlockTypes().filter((x) => x.allowInAreas);
 		}
-		// If no AreaKey, then we are representing the items of the root:
 
-		// Root entries:
+		// If no AreaKey, then we are in the root, looking for items allowed as root:
 		return this._manager.getBlockTypes().filter((x) => x.allowAtRoot);
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts
index 11832f9772..ae7553f0e1 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts
@@ -16,7 +16,9 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement<
 	UmbBlockCatalogueModalData,
 	UmbBlockCatalogueModalValue
 > {
-	@state()
+	//
+	private _search = '';
+
 	private _groupedBlocks: Array<{ name?: string; blocks: Array<UmbBlockTypeWithGroupKey> }> = [];
 
 	@state()
@@ -28,9 +30,6 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement<
 	@state()
 	private _filtered: Array<{ name?: string; blocks: Array<UmbBlockTypeWithGroupKey> }> = [];
 
-	@state()
-	private _search = '';
-
 	constructor() {
 		super();
 
@@ -68,10 +67,11 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement<
 		}));
 
 		this._groupedBlocks = [{ blocks: noGroupBlocks }, ...grouped];
-		this.#onFilter();
+		this.#updateFiltered();
 	}
 
-	#onFilter() {
+	#updateFiltered() {
+		// A minimum of 3 characters is required to start filtering:
 		if (this._search.length <= 3) {
 			this._filtered = this._groupedBlocks;
 		} else {
@@ -84,7 +84,7 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement<
 
 	#onSearch(e: UUIInputEvent) {
 		this._search = e.target.value as string;
-		this.#onFilter();
+		this.#updateFiltered();
 	}
 
 	render() {

From 7930a4c98e42a8826a3dd05b8d43a0bf1a827990 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Tue, 27 Feb 2024 16:51:25 +0100
Subject: [PATCH 5/5] align with current

---
 .../modals/block-catalogue/block-catalogue-modal.element.ts  | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts
index ae7553f0e1..7765df3f9c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts
@@ -71,8 +71,7 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement<
 	}
 
 	#updateFiltered() {
-		// A minimum of 3 characters is required to start filtering:
-		if (this._search.length <= 3) {
+		if (this._search.length === 0) {
 			this._filtered = this._groupedBlocks;
 		} else {
 			const search = this._search.toLowerCase();
@@ -109,7 +108,7 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement<
 
 	#renderCreateEmpty() {
 		return html`
-			${this.data?.blocks && this.data.blocks.length >= 10
+			${this.data?.blocks && this.data.blocks.length > 8
 				? html`<uui-input
 						id="search"
 						@input=${this.#onSearch}