diff --git a/src/Umbraco.Web.UI.Client/src/packages/clipboard/clipboard-entry/picker/clipboard-entry-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/clipboard/clipboard-entry/picker/clipboard-entry-picker.element.ts
index fda340058b..46e9c393d7 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/clipboard/clipboard-entry/picker/clipboard-entry-picker.element.ts
+++ b/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,57 @@ export class UmbClipboardEntryPickerElement extends UmbLitElement {
}
};
+ async #clearClipboard() {
+ try {
+ await umbConfirmModal(this, {
+ headline: '#clipboard_labelForClearClipboard',
+ content: '#clipboard_confirmClearDescription',
+ color: 'danger',
+ confirmLabel: '#general_clear',
+ cancelLabel: '#general_cancel',
+ });
+ } catch {
+ return;
+ }
+
+ for (const item of this._items) {
+ const { error } = await this.#clipboardDetailRepository.delete(item.unique);
+ if (error) {
+ console.error(`Unable to delete clipboard item with unique ${item.unique}`, error);
+ }
+ }
+
+ this.#requestItems();
+ }
+
override render() {
- return when(
- this._items.length > 0,
- () =>
- repeat(
- this._items,
- (item) => item.unique,
- (item) => this.#renderItem(item),
- ),
- () => html`
There are no items in the clipboard.
`,
- );
+ return html`
+
+
+ ${when(
+ this._items.length > 0,
+ () => html`
+
+
+ Clear Clipboard
+
+ `,
+ () => nothing,
+ )}
+
+
+ ${when(
+ this._items.length > 0,
+ () =>
+ repeat(
+ this._items,
+ (item) => item.unique,
+ (item) => this.#renderItem(item),
+ ),
+ () => html`There are no items in the clipboard.
`,
+ )}
+
+ `;
}
#renderItem(item: UmbClipboardEntryDetailModel) {