Adds umb-document-collection and umb-document-collection-toolbar components

src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection-toolbar.element.ts

@@ -0,0 +1,67 @@
+import type { UmbDocumentCollectionContext } from './document-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-document-collection-toolbar')
+export class UmbDocumentCollectionToolbarElement extends UmbLitElement {
+	#collectionContext?: UmbDocumentCollectionContext;
+
+	#inputTimer?: NodeJS.Timeout;
+	#inputTimerAmount = 500;
+
+	constructor() {
+		super();
+
+		this.consumeContext(UMB_DEFAULT_COLLECTION_CONTEXT, (instance) => {
+			this.#collectionContext = instance as UmbDocumentCollectionContext;
+		});
+	}
+
+	#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>
+			${this.#renderSearch()}
+			<umb-collection-view-bundle></umb-collection-view-bundle>
+		`;
+	}
+
+	#renderSearch() {
+		return html`
+			<uui-input @input=${this.#updateSearch} label="Search" placeholder="Search..." id="input-search"></uui-input>
+		`;
+	}
+
+	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 UmbDocumentCollectionToolbarElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-document-collection-toolbar': UmbDocumentCollectionToolbarElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection.context.ts

@@ -0,0 +1,14 @@
+import type { UmbDocumentDetailModel } from '../types.js';
+import type { UmbDocumentCollectionFilterModel } from './types.js';
+import { UMB_DOCUMENT_TABLE_COLLECTION_VIEW_ALIAS } from './views/index.js';
+import { UmbDefaultCollectionContext } from '@umbraco-cms/backoffice/collection';
+import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
+
+export class UmbDocumentCollectionContext extends UmbDefaultCollectionContext<
+	UmbDocumentDetailModel,
+	UmbDocumentCollectionFilterModel
+> {
+	constructor(host: UmbControllerHostElement) {
+		super(host, { pageSize: 5, defaultViewAlias: UMB_DOCUMENT_TABLE_COLLECTION_VIEW_ALIAS });
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection.element.ts

@@ -0,0 +1,19 @@
+import { html, customElement } from '@umbraco-cms/backoffice/external/lit';
+import { UmbCollectionDefaultElement } from '@umbraco-cms/backoffice/collection';
+
+import './document-collection-toolbar.element.js';
+
+@customElement('umb-document-collection')
+export class UmbDocumentCollectionElement extends UmbCollectionDefaultElement {
+	protected renderToolbar() {
+		return html`<umb-document-collection-toolbar slot="header"></umb-document-collection-toolbar>`;
+	}
+}
+
+export default UmbDocumentCollectionElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-document-collection': UmbDocumentCollectionElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/index.ts

@@ -1 +1 @@
-export { UMB_DOCUMENT_COLLECTION_ALIAS } from './manifests.js';
+export const UMB_DOCUMENT_COLLECTION_ALIAS = 'Umb.Collection.Document';

src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/manifests.ts

@@ -2,15 +2,16 @@ import { UMB_DOCUMENT_COLLECTION_REPOSITORY_ALIAS } from './repository/index.js'
 import { manifests as collectionActionManifests } from './action/manifests.js';
 import { manifests as collectionRepositoryManifests } from './repository/manifests.js';
 import { manifests as collectionViewManifests } from './views/manifests.js';
+import { UmbDocumentCollectionContext } from './document-collection.context.js';
+import { UMB_DOCUMENT_COLLECTION_ALIAS } from './index.js';
 import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
 
-export const UMB_DOCUMENT_COLLECTION_ALIAS = 'Umb.Collection.Document';
-
 const collectionManifest: ManifestTypes = {
 	type: 'collection',
-	kind: 'default',
 	alias: UMB_DOCUMENT_COLLECTION_ALIAS,
 	name: 'Document Collection',
+	api: UmbDocumentCollectionContext,
+	element: () => import('./document-collection.element.js'),
 	meta: {
 		repositoryAlias: UMB_DOCUMENT_COLLECTION_REPOSITORY_ALIAS,
 	},

src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/types.ts

@@ -1,4 +1,5 @@
 export interface UmbDocumentCollectionFilterModel {
 	skip?: number;
 	take?: number;
+	filter?: string;
 }