From ed5d152f3ec1c81742c55e4bc52253e30e61839d Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 12 Dec 2022 10:06:10 +0100 Subject: [PATCH] handle documents --- .../document/editor-document.element.ts | 8 ++- .../src/core/mocks/data/document.data.ts | 3 +- .../core/mocks/domains/document.handlers.ts | 35 ++++++++++++ .../core/stores/document/document.store.ts | 53 +++++++++++++++++++ 4 files changed, 97 insertions(+), 2 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/core/mocks/domains/document.handlers.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/document/editor-document.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/document/editor-document.element.ts index 55e8e7d6ce..88b4b8109c 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/document/editor-document.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/document/editor-document.element.ts @@ -3,11 +3,13 @@ import { css, html, LitElement } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import { umbExtensionsRegistry } from '@umbraco-cms/extensions-registry'; import type { ManifestEditorView, ManifestWithLoader } from '@umbraco-cms/models'; +import { UmbContextConsumerMixin, UmbContextProviderMixin } from '@umbraco-cms/context-api'; import '../shared/editor-content/editor-node.element'; +import { UmbDocumentStore } from 'src/core/stores/document/document.store'; @customElement('umb-editor-document') -export class UmbEditorDocumentElement extends LitElement { +export class UmbEditorDocumentElement extends UmbContextConsumerMixin(UmbContextProviderMixin(LitElement)) { static styles = [ UUITextStyles, css` @@ -26,6 +28,10 @@ export class UmbEditorDocumentElement extends LitElement { super(); this._registerEditorViews(); + + this.consumeContext('umbDocumentStore', (documentStore: UmbDocumentStore) => { + this.provideContext('umbNodeStore', documentStore); + }); } private _registerEditorViews() { diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts index ec0e5e066c..ec9afdfabe 100644 --- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts +++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts @@ -1,6 +1,7 @@ import { UmbData } from './data'; import { DocumentTreeItem, PagedDocumentTreeItem } from '@umbraco-cms/backend-api'; import type { DocumentDetails } from '@umbraco-cms/models'; +import { UmbEntityData } from './entity.data'; export const data: Array = [ { @@ -180,7 +181,7 @@ export const data: Array = [ ]; // Temp mocked database -class UmbDocumentData extends UmbData { +class UmbDocumentData extends UmbEntityData { constructor() { super(data); } diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/domains/document.handlers.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/domains/document.handlers.ts new file mode 100644 index 0000000000..65d0c21ba7 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/core/mocks/domains/document.handlers.ts @@ -0,0 +1,35 @@ +import { rest } from 'msw'; +import { umbDocumentData } from '../data/document.data'; +import type { DocumentDetails } from '@umbraco-cms/models'; + +// TODO: add schema +export const handlers = [ + rest.get('/umbraco/management/api/v1/document/details/:key', (req, res, ctx) => { + console.warn('Please move to schema'); + const key = req.params.key as string; + if (!key) return; + + const document = umbDocumentData.getByKey(key); + + return res(ctx.status(200), ctx.json([document])); + }), + + rest.post('/umbraco/management/api/v1/document/save', async (req, res, ctx) => { + console.warn('Please move to schema'); + const data = await req.json(); + if (!data) return; + + const saved = umbDocumentData.save(data); + + return res(ctx.status(200), ctx.json(saved)); + }), + + rest.post('/umbraco/management/api/v1/document/trash', async (req, res, ctx) => { + console.warn('Please move to schema'); + const keys = await req.json(); + + const trashed = umbDocumentData.trash(keys); + + return res(ctx.status(200), ctx.json(trashed)); + }), +]; diff --git a/src/Umbraco.Web.UI.Client/src/core/stores/document/document.store.ts b/src/Umbraco.Web.UI.Client/src/core/stores/document/document.store.ts index 7aeecbc364..a65a7a3721 100644 --- a/src/Umbraco.Web.UI.Client/src/core/stores/document/document.store.ts +++ b/src/Umbraco.Web.UI.Client/src/core/stores/document/document.store.ts @@ -10,6 +10,59 @@ import { ApiError, DocumentResource, DocumentTreeItem, FolderTreeItem, ProblemDe * @description - Data Store for Documents */ export class UmbDocumentStore extends UmbDataStoreBase { + getByKey(key: string): Observable { + // fetch from server and update store + fetch(`/umbraco/management/api/v1/document/details/${key}`) + .then((res) => res.json()) + .then((data) => { + this.update(data); + }); + + return this.items.pipe(map((documents) => documents.find((document) => document.key === key) || null)); + } + + async trash(keys: Array) { + // fetch from server and update store + // TODO: Use node type to hit the right API, or have a general Node API? + const res = await fetch('/umbraco/backoffice/node/trash', { + method: 'POST', + body: JSON.stringify(keys), + headers: { + 'Content-Type': 'application/json', + }, + }); + const data = await res.json(); + this.update(data); + this._entityStore.update(data); + } + + // TODO: make sure UI somehow can follow the status of this action. + save(data: DocumentDetails[]): Promise { + // fetch from server and update store + // TODO: use Fetcher API. + let body: string; + + try { + body = JSON.stringify(data); + } catch (error) { + console.error(error); + return Promise.reject(); + } + + // TODO: Use node type to hit the right API, or have a general Node API? + return fetch('/umbraco/backoffice/node/save', { + method: 'POST', + body: body, + headers: { + 'Content-Type': 'application/json', + }, + }) + .then((res) => res.json()) + .then((data: Array) => { + this.update(data); + }); + } + getTreeRoot(): Observable> { DocumentResource.getTreeDocumentRoot({}).then( (res) => {