Adds Clear Clipboard button & logic

src/Umbraco.Web.UI.Client/src/assets/lang/en.ts

@@ -1017,6 +1017,7 @@ export default {
 			if (new Date(date).getTime() < new Date(now).getTime()) return `${duration} ago`;
 			return `in ${duration}`;
 		},
+		clipboard: 'Clipboard',
 	},
 	colors: {
 		black: 'Black',
@@ -2508,6 +2509,7 @@ export default {
 		labelForCopyToClipboard: 'Copy to clipboard',
 		confirmDeleteHeadline: 'Delete from clipboard',
 		confirmDeleteDescription: 'Are you sure you want to delete <strong>{0}</strong> from the clipboard?',
+		confirmClearDescription: 'Are you sure you want to clear the clipboard?',
 		copySuccessHeadline: 'Copied to clipboard',
 	},
 	propertyActions: {

src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts

@@ -194,11 +194,9 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement<
 
 	#renderClipboard() {
 		return html`
-			<uui-box>
-				<umb-clipboard-entry-picker
-					.config=${{ multiple: true, asyncFilter: this.data?.clipboardFilter }}
-					@selection-change=${this.#onClipboardPickerSelectionChange}></umb-clipboard-entry-picker>
-			</uui-box>
+			<umb-clipboard-entry-picker
+				.config=${{ multiple: true, asyncFilter: this.data?.clipboardFilter }}
+				@selection-change=${this.#onClipboardPickerSelectionChange}></umb-clipboard-entry-picker>
 		`;
 	}
 

src/Umbraco.Web.UI.Client/src/packages/clipboard/clipboard-entry/picker-modal/clipboard-entry-picker-modal.element.ts

@@ -27,12 +27,10 @@ export class UmbClipboardEntryPickerModalElement extends UmbModalBaseElement<
 
 	override render() {
 		return html`<umb-body-layout headline="Clipboard">
-			<uui-box>
-				<umb-clipboard-entry-picker
-					.selection=${this.value?.selection}
-					.config=${this.data}
-					@selection-change=${this.#onSelectionChange}></umb-clipboard-entry-picker>
-			</uui-box>
+			<umb-clipboard-entry-picker
+				.selection=${this.value?.selection}
+				.config=${this.data}
+				@selection-change=${this.#onSelectionChange}></umb-clipboard-entry-picker>
 			<div slot="actions">
 				<uui-button label="Close" @click=${this.#close}></uui-button>
 				<uui-button label="Submit" look="primary" color="positive" @click=${this.#submit}></uui-button>

src/Umbraco.Web.UI.Client/src/packages/clipboard/clipboard-entry/picker/clipboard-entry-picker.element.ts

@@ -1,6 +1,7 @@
 import { UmbClipboardCollectionRepository } from '../../collection/index.js';
 import type { UmbClipboardEntryDetailModel } from '../types.js';
-import { css, customElement, html, property, repeat, state, when } from '@umbraco-cms/backoffice/external/lit';
+import UmbClipboardEntryDetailRepository from '../detail/clipboard-entry-detail.repository.js';
+import { css, customElement, html, nothing, property, repeat, state, when } from '@umbraco-cms/backoffice/external/lit';
 import { UmbEntityContext } from '@umbraco-cms/backoffice/entity';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import {
@@ -10,6 +11,7 @@ import {
 import { UmbSelectionManager } from '@umbraco-cms/backoffice/utils';
 import { UMB_ACTION_EVENT_CONTEXT } from '@umbraco-cms/backoffice/action';
 import type { UmbEntityUnique } from '@umbraco-cms/backoffice/entity';
+import { umbConfirmModal } from '@umbraco-cms/backoffice/modal';
 
 // TODO: make this into an extension point (Picker) with two kinds of pickers: tree-item-picker and collection-item-picker;
 @customElement('umb-clipboard-entry-picker')
@@ -28,6 +30,8 @@ export class UmbClipboardEntryPickerElement extends UmbLitElement {
 	#entityContext = new UmbEntityContext(this);
 	#actionEventContext?: typeof UMB_ACTION_EVENT_CONTEXT.TYPE;
 
+	#clipboardDetailRepository = new UmbClipboardEntryDetailRepository(this);
+
 	constructor() {
 		super();
 		this.#entityContext.setEntityType('clipboard-entry');
@@ -117,17 +121,66 @@ export class UmbClipboardEntryPickerElement extends UmbLitElement {
 		}
 	};
 
+	async #clearClipboard() {
+		// Prompt the user to confirm clearing the clipboard
+		await umbConfirmModal(this, {
+			headline: '#clipboard_labelForClearClipboard',
+			content: '#clipboard_confirmClearDescription',
+			color: 'danger',
+			confirmLabel: '#general_clear',
+			cancelLabel: '#general_cancel',
+		});
+
+		for (const item of this._items) {
+			// Clipboard items are a collection of items and the UmbClipboardContext
+			// does not expose a method to use the delete from the underlying clipboardDetailRepository
+			const { error } = await this.#clipboardDetailRepository.delete(item.unique);
+			if (error) {
+				console.error(`Unable to delete clipboard item with unique ${item.unique}`, error);
+			}
+
+			// It did not update/refresh the UI of items/collection after calling delete
+			// Should I dispatch an event to notify this same component to refresh?
+			// Or explictly call request items again which just works
+			this.#requestItems();
+
+			// const event = new UmbRequestReloadStructureForEntityEvent({
+			// 	unique: item.unique,
+			// 	entityType: item.entityType,
+			// });
+
+			// this.dispatchEvent(event);
+		}
+	}
+
 	override render() {
-		return when(
-			this._items.length > 0,
-			() =>
-				repeat(
-					this._items,
-					(item) => item.unique,
-					(item) => this.#renderItem(item),
-				),
-			() => html`<p>There are no items in the clipboard.</p>`,
-		);
+		return html`
+			<uui-box  headline=${this.localize.term('general_clipboard')}>
+				<span slot="header-actions">
+					${when(
+						this._items.length > 0,
+						() => html`
+							<uui-button color="default" look="default" @click="${this.#clearClipboard}">
+								<uui-icon name="delete"></uui-icon>
+								<umb-localize key="clipboard_labelForClearClipboard">Clear Clipboard</umb-localize>
+							</uui-button>
+						`,
+						() => nothing,
+					)}
+				</span>
+
+				${when(
+					this._items.length > 0,
+					() =>
+						repeat(
+							this._items,
+							(item) => item.unique,
+							(item) => this.#renderItem(item),
+						),
+					() => html`<p>There are no items in the clipboard.</p>`,
+				)}
+			</uui-box>
+		`;
 	}
 
 	#renderItem(item: UmbClipboardEntryDetailModel) {