From 520cc5a3faaf35ab4ac631a3e7d0df760767ec39 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= <26099018+JesmoDev@users.noreply.github.com> Date: Thu, 26 Jan 2023 01:52:16 +0100 Subject: [PATCH] add move functionality --- .../media/media/media.tree.store.ts | 26 +++++++++++++----- ...llection-bulk-action-media-move.element.ts | 27 ++++++++++--------- .../collection-view-media-grid.element.ts | 2 -- .../src/core/mocks/data/entity.data.ts | 21 ++++++++++++++- .../src/core/mocks/domains/media.handlers.ts | 12 +++++++++ 5 files changed, 65 insertions(+), 23 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/media.tree.store.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/media.tree.store.ts index b5133ddc1a..50ba9cdc33 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/media.tree.store.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/media.tree.store.ts @@ -6,7 +6,6 @@ import { createObservablePart, ArrayState } from '@umbraco-cms/observable-api'; import { UmbStoreBase } from '@umbraco-cms/store'; import { UmbControllerHostInterface } from '@umbraco-cms/controller'; - export const UMB_MEDIA_TREE_STORE_CONTEXT_TOKEN = new UmbContextToken('UmbMediaTreeStore'); // TODO: Stop using ContentTreeItem @@ -19,12 +18,8 @@ export type MediaTreeItem = ContentTreeItem; * @description - Data Store for Media */ export class UmbMediaTreeStore extends UmbStoreBase { - - - #data = new ArrayState([], (x) => x.key); - constructor(host: UmbControllerHostInterface) { super(host, UMB_MEDIA_TREE_STORE_CONTEXT_TOKEN.toString()); } @@ -44,6 +39,19 @@ export class UmbMediaTreeStore extends UmbStoreBase { this.#data.append(data); } + async move(keys: Array, destination: string) { + // TODO: use backend cli when available. + const res = await fetch('/umbraco/management/api/v1/media/move', { + method: 'POST', + body: JSON.stringify({ keys, destination }), + headers: { + 'Content-Type': 'application/json', + }, + }); + const data = await res.json(); + this.#data.append(data); + } + getTreeRoot(): Observable> { tryExecuteAndNotify(this._host, MediaResource.getTreeMediaRoot({})).then(({ data }) => { if (data) { @@ -54,7 +62,9 @@ export class UmbMediaTreeStore extends UmbStoreBase { // TODO: how do we handle trashed items? // TODO: remove ignore when we know how to handle trashed items. - return createObservablePart(this.#data, (items) => items.filter((item) => item.parentKey === null && !item.isTrashed)); + return createObservablePart(this.#data, (items) => + items.filter((item) => item.parentKey === null && !item.isTrashed) + ); } getTreeItemChildren(key: string): Observable> { @@ -72,7 +82,9 @@ export class UmbMediaTreeStore extends UmbStoreBase { // TODO: how do we handle trashed items? // TODO: remove ignore when we know how to handle trashed items. - return createObservablePart(this.#data, (items) => items.filter((item) => item.parentKey === key && !item.isTrashed)); + return createObservablePart(this.#data, (items) => + items.filter((item) => item.parentKey === key && !item.isTrashed) + ); } getTreeItems(keys: Array): Observable> { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/bulk-actions/collection-bulk-action-media-move.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/bulk-actions/collection-bulk-action-media-move.element.ts index 8759430108..f1a33b163a 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/bulk-actions/collection-bulk-action-media-move.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/bulk-actions/collection-bulk-action-media-move.element.ts @@ -9,6 +9,7 @@ import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '../../../../co import { UmbMediaTreeStore, UMB_MEDIA_TREE_STORE_CONTEXT_TOKEN } from '../../../media/media/media.tree.store'; import { UmbLitElement } from '@umbraco-cms/element'; import type { ManifestCollectionBulkAction, MediaDetails } from '@umbraco-cms/models'; +import { UmbMediaDetailStore } from 'src/backoffice/media/media/media.detail.store'; @customElement('umb-collection-bulk-action-media-move') export class UmbCollectionBulkActionMoveElement extends UmbLitElement { @@ -20,7 +21,7 @@ export class UmbCollectionBulkActionMoveElement extends UmbLitElement { public manifest?: ManifestCollectionBulkAction; #modalService?: UmbModalService; - #mediaStore?: UmbMediaTreeStore; + #mediaTreeStore?: UmbMediaTreeStore; constructor() { super(); @@ -34,23 +35,23 @@ export class UmbCollectionBulkActionMoveElement extends UmbLitElement { }); this.consumeContext(UMB_MEDIA_TREE_STORE_CONTEXT_TOKEN, (instance) => { - this.#mediaStore = instance; + this.#mediaTreeStore = instance; }); } #handleClick(event: Event) { const selectionSubscription = this.#collectionContext?.selection.subscribe((selection) => { - const dataSubscription = this.#collectionContext?.data - .pipe(map((items) => items.filter((item) => selection.includes(item.key)))) - .subscribe((items: Array) => { - const modalHandler = this.#modalService?.contentPicker({ - selection: [], - alias: 'Umb.Tree.Media', - }); - modalHandler?.onClose().then((data) => { - console.log('data', data); - }); - }); + const modalHandler = this.#modalService?.contentPicker({ + selection: [], + alias: 'Umb.Tree.Media', + }); + modalHandler?.onClose().then((data) => { + if (selection.length > 0) { + this.#mediaTreeStore?.move(selection, data.selection[0]); + } + selectionSubscription?.unsubscribe(); + this.#collectionContext?.clearSelection(); + }); }); } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/views/collection-view-media-grid.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/views/collection-view-media-grid.element.ts index 728bd2299f..c1132038f8 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/views/collection-view-media-grid.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/views/collection-view-media-grid.element.ts @@ -116,8 +116,6 @@ export class UmbCollectionViewsMediaGridElement extends UmbLitElement { } private _handleOpenItem(mediaItem: MediaTreeItem) { - console.log('MEDIA ITEM', mediaItem); - //TODO: Fix when we have dynamic routing history.pushState(null, '', 'section/media/media/edit/' + mediaItem.key); } diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/entity.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/entity.data.ts index fbcced78cf..b4593b80c1 100644 --- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/entity.data.ts +++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/entity.data.ts @@ -10,7 +10,7 @@ export class UmbEntityData extends UmbData { getByKey(key: string) { return this.data.find((item) => item.key === key); } - + getByKeys(keys: Array) { return this.data.filter((item) => keys.includes(item.key)); } @@ -31,6 +31,25 @@ export class UmbEntityData extends UmbData { return saveItems; } + move(keys: Array, destination: string) { + const movedItems: Array = []; + + keys.forEach((key) => { + const item = this.getByKey(key); + if (!item) return; + + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + item.parentKey = destination; + this.updateData(item); + movedItems.push(item); + }); + + console.log('data', this.data, 'movedItems', movedItems, 'destination', destination); + + return movedItems; + } + trash(keys: Array) { const trashedItems: Array = []; diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/domains/media.handlers.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/domains/media.handlers.ts index a06d780f2e..c51f47edd5 100644 --- a/src/Umbraco.Web.UI.Client/src/core/mocks/domains/media.handlers.ts +++ b/src/Umbraco.Web.UI.Client/src/core/mocks/domains/media.handlers.ts @@ -24,6 +24,18 @@ export const handlers = [ return res(ctx.status(200), ctx.json(saved)); }), + rest.post('/umbraco/management/api/v1/media/move', async (req, res, ctx) => { + console.warn('Please move to schema'); + const data = await req.json(); + if (!data) return; + + console.log('HANDLER', data); + + const moved = umbMediaData.move(data.keys, data.destination); + + return res(ctx.status(200), ctx.json(moved)); + }), + rest.post('/umbraco/management/api/v1/media/trash', async (req, res, ctx) => { console.warn('Please move to schema'); const keys = await req.json();