yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Media Collection: Toolbar

Browse Source 
to add search capability.
This commit is contained in:
leekelleher
2024-02-21 16:53:03 +00:00
parent ed5d7df30d
commit 1e04cb6203
2 changed files with 64 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/Umbraco.Web.UI.Client/src/packages/media/media/collection/media-collection-toolbar.element.ts Normal file
View File

@@ -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;
}
}

4
src/Umbraco.Web.UI.Client/src/packages/media/media/collection/media-collection.element.ts
View File

@@ -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"