handle documents

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() {

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<DocumentDetails> = [
 	{
@@ -180,7 +181,7 @@ export const data: Array<DocumentDetails> = [
 ];
 
 // Temp mocked database
-class UmbDocumentData extends UmbData<DocumentDetails> {
+class UmbDocumentData extends UmbEntityData<DocumentDetails> {
 	constructor() {
 		super(data);
 	}

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<DocumentDetails[]>('/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<string[]>('/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));
+	}),
+];

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<DocumentDetails | DocumentTreeItem> {
+	getByKey(key: string): Observable<DocumentDetails | null> {
+		// 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<string>) {
+		// 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<void> {
+		// 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<DocumentDetails>) => {
+				this.update(data);
+			});
+	}
+
 	getTreeRoot(): Observable<Array<DocumentTreeItem>> {
 		DocumentResource.getTreeDocumentRoot({}).then(
 			(res) => {