From 2e58abe896f12509dd2c762cfcf9a21406ee937d Mon Sep 17 00:00:00 2001 From: leekelleher Date: Mon, 12 Feb 2024 15:09:11 +0000 Subject: [PATCH] Adds `umb-document-collection` and `umb-document-collection-toolbar` components --- .../document-collection-toolbar.element.ts | 67 +++++++++++++++++++ .../collection/document-collection.context.ts | 14 ++++ .../collection/document-collection.element.ts | 19 ++++++ .../documents/documents/collection/index.ts | 2 +- .../documents/collection/manifests.ts | 7 +- .../documents/documents/collection/types.ts | 1 + 6 files changed, 106 insertions(+), 4 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection-toolbar.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection.context.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection-toolbar.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection-toolbar.element.ts new file mode 100644 index 0000000000..def5e1065d --- /dev/null +++ b/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` + + ${this.#renderSearch()} + + `; + } + + #renderSearch() { + return html` + + `; + } + + 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; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection.context.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection.context.ts new file mode 100644 index 0000000000..8ca794d9eb --- /dev/null +++ b/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 }); + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection.element.ts new file mode 100644 index 0000000000..fb2baa84ba --- /dev/null +++ b/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``; + } +} + +export default UmbDocumentCollectionElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-document-collection': UmbDocumentCollectionElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/index.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/index.ts index 1fb6931016..dff125b07e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/index.ts +++ b/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'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/manifests.ts index 0d25f1a2ef..6495faec15 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/manifests.ts +++ b/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, }, diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/types.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/types.ts index 74cce6495a..fa6136bb06 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/types.ts +++ b/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; }