Merge pull request #1251 from umbraco/chore/mocks-document-media-collection-api

Chore: Mock API for Document and Media Collection

src/Umbraco.Web.UI.Client/src/mocks/data/document/document-collection.manager.ts

@@ -0,0 +1,42 @@
+import type { UmbMockDocumentModel } from './document.data.js';
+import type { UmbDocumentMockDB } from './document.db.js';
+import type { DirectionModel, DocumentCollectionResponseModel } from '@umbraco-cms/backoffice/external/backend-api';
+
+export class UmbMockDocumentCollectionManager {
+	#documentDb: UmbDocumentMockDB;
+
+	#collectionMapper: (item: UmbMockDocumentModel) => DocumentCollectionResponseModel;
+
+	constructor(
+		documentDb: UmbDocumentMockDB,
+		collectionMapper: (item: UmbMockDocumentModel) => DocumentCollectionResponseModel,
+	) {
+		this.#documentDb = documentDb;
+		this.#collectionMapper = collectionMapper;
+	}
+
+	getCollectionDocumentById({
+		id,
+		dataTypeId,
+		orderBy,
+		orderCulture,
+		orderDirection,
+		filter,
+		skip = 0,
+		take = 100,
+	}: {
+		id: string;
+		dataTypeId?: string;
+		orderBy?: string;
+		orderCulture?: string;
+		orderDirection?: DirectionModel;
+		filter?: string;
+		skip?: number;
+		take?: number;
+	}) {
+		const collection = this.#documentDb.getAll().filter((item) => item.parent?.id === id);
+		const items = collection.map((item) => this.#collectionMapper(item)).slice(skip, skip + take);
+		const total = collection.length;
+		return { items: items, total };
+	}
+}

src/Umbraco.Web.UI.Client/src/mocks/data/document/document.db.ts

@@ -4,18 +4,20 @@ import { UmbMockEntityDetailManager } from '../utils/entity/entity-detail.manage
 import { umbDocumentTypeMockDb } from '../document-type/document-type.db.js';
 import { UmbEntityMockDbBase } from '../utils/entity/entity-base.js';
 import { UmbEntityRecycleBin } from '../utils/entity/entity-recycle-bin.js';
-import type { UmbMockDocumentModel } from './document.data.js';
 import { data } from './document.data.js';
+import { UmbMockDocumentCollectionManager } from './document-collection.manager.js';
 import { UmbMockDocumentPublishingManager } from './document-publishing.manager.js';
-import {
-	DocumentVariantStateModel,
-	type CreateDocumentRequestModel,
-	type DocumentItemResponseModel,
-	type DocumentResponseModel,
-	type DocumentTreeItemResponseModel,
-	type DomainsResponseModel,
-} from '@umbraco-cms/backoffice/external/backend-api';
+import type { UmbMockDocumentModel } from './document.data.js';
+import { DocumentVariantStateModel } from '@umbraco-cms/backoffice/external/backend-api';
 import { UmbId } from '@umbraco-cms/backoffice/id';
+import type {
+	DocumentCollectionResponseModel,
+	CreateDocumentRequestModel,
+	DocumentItemResponseModel,
+	DocumentResponseModel,
+	DocumentTreeItemResponseModel,
+	DomainsResponseModel,
+} from '@umbraco-cms/backoffice/external/backend-api';
 
 export class UmbDocumentMockDB extends UmbEntityMockDbBase<UmbMockDocumentModel> {
 	tree = new UmbMockEntityTreeManager<UmbMockDocumentModel>(this, treeItemMapper);
@@ -23,6 +25,7 @@ export class UmbDocumentMockDB extends UmbEntityMockDbBase<UmbMockDocumentModel>
 	detail = new UmbMockEntityDetailManager<UmbMockDocumentModel>(this, createMockDocumentMapper, detailResponseMapper);
 	recycleBin = new UmbEntityRecycleBin<UmbMockDocumentModel>(this.data, treeItemMapper);
 	publishing = new UmbMockDocumentPublishingManager(this);
+	collection = new UmbMockDocumentCollectionManager(this, collectionMapper);
 
 	constructor(data: Array<UmbMockDocumentModel>) {
 		super(data);
@@ -118,4 +121,20 @@ const itemMapper = (model: UmbMockDocumentModel): DocumentItemResponseModel => {
 	};
 };
 
+const collectionMapper = (model: UmbMockDocumentModel): DocumentCollectionResponseModel => {
+	return {
+		creator: null,
+		documentType: {
+			id: model.documentType.id,
+			alias: '',
+			icon: model.documentType.icon,
+		},
+		id: model.id,
+		sortOrder: 0,
+		updater: null,
+		values: model.values,
+		variants: model.variants,
+	};
+};
+
 export const umbDocumentMockDb = new UmbDocumentMockDB(data);

src/Umbraco.Web.UI.Client/src/mocks/data/media/media-collection.manager.ts

@@ -0,0 +1,40 @@
+import type { UmbMockMediaModel } from './media.data.js';
+import type { UmbMediaMockDB } from './media.db.js';
+import type { DirectionModel, MediaCollectionResponseModel } from '@umbraco-cms/backoffice/external/backend-api';
+
+export class UmbMockMediaCollectionManager {
+	#mediaDb: UmbMediaMockDB;
+
+	#collectionMapper: (item: UmbMockMediaModel) => MediaCollectionResponseModel;
+
+	constructor(mediaDb: UmbMediaMockDB, collectionMapper: (item: UmbMockMediaModel) => MediaCollectionResponseModel) {
+		this.#mediaDb = mediaDb;
+		this.#collectionMapper = collectionMapper;
+	}
+
+	getCollectionMedia({
+		id,
+		dataTypeId,
+		orderBy,
+		orderDirection,
+		filter,
+		skip = 0,
+		take = 100,
+	}: {
+		id?: string;
+		dataTypeId?: string;
+		orderBy?: string;
+		orderDirection?: DirectionModel;
+		filter?: string;
+		skip?: number;
+		take?: number;
+	}) {
+		const collection = !id
+			? this.#mediaDb.getAll().filter((item) => item.parent === null)
+			: this.#mediaDb.getAll().filter((item) => item.parent?.id === id);
+
+		const items = collection.map((item) => this.#collectionMapper(item)).slice(skip, skip + take);
+		const total = collection.length;
+		return { items: items, total };
+	}
+}

src/Umbraco.Web.UI.Client/src/mocks/data/media/media.data.ts

@@ -161,7 +161,14 @@ export const data: Array<UmbMockMediaModel> = [
 				value: 'Every day, a rabbit in a military costume greets me at the front door',
 			},
 		],
-		variants: [],
+		variants: [{
+			publishDate: '2023-02-06T15:31:51.354764',
+			culture: 'en-us',
+			segment: null,
+			name: 'John Doe',
+			createDate: '2023-02-06T15:31:46.876902',
+			updateDate: '2023-02-06T15:31:51.354764',
+		},],
 		urls: [],
 	},
 	{

src/Umbraco.Web.UI.Client/src/mocks/data/media/media.db.ts

@@ -4,21 +4,24 @@ import { UmbMockEntityDetailManager } from '../utils/entity/entity-detail.manage
 import { umbMediaTypeMockDb } from '../media-type/media-type.db.js';
 import { UmbEntityMockDbBase } from '../utils/entity/entity-base.js';
 import { UmbEntityRecycleBin } from '../utils/entity/entity-recycle-bin.js';
-import type { UmbMockMediaModel } from './media.data.js';
+import { UmbMockMediaCollectionManager } from './media-collection.manager.js';
 import { data } from './media.data.js';
+import type { UmbMockMediaModel } from './media.data.js';
+import { UmbId } from '@umbraco-cms/backoffice/id';
 import type {
 	CreateMediaRequestModel,
+	MediaCollectionResponseModel,
 	MediaItemResponseModel,
 	MediaResponseModel,
 	MediaTreeItemResponseModel,
 } from '@umbraco-cms/backoffice/external/backend-api';
-import { UmbId } from '@umbraco-cms/backoffice/id';
 
 export class UmbMediaMockDB extends UmbEntityMockDbBase<UmbMockMediaModel> {
 	tree = new UmbMockEntityTreeManager<UmbMockMediaModel>(this, treeItemMapper);
 	item = new UmbMockEntityItemManager<UmbMockMediaModel>(this, itemMapper);
 	detail = new UmbMockEntityDetailManager<UmbMockMediaModel>(this, createMockMediaMapper, detailResponseMapper);
 	recycleBin = new UmbEntityRecycleBin<UmbMockMediaModel>(this.data, treeItemMapper);
+	collection = new UmbMockMediaCollectionManager(this, collectionMapper);
 
 	constructor(data: Array<UmbMockMediaModel>) {
 		super(data);
@@ -100,4 +103,19 @@ const itemMapper = (model: UmbMockMediaModel): MediaItemResponseModel => {
 	};
 };
 
+const collectionMapper = (model: UmbMockMediaModel): MediaCollectionResponseModel => {
+	return {
+		creator: null,
+		id: model.id,
+		mediaType: {
+			id: model.mediaType.id,
+			alias: '',
+			icon: model.mediaType.icon,
+		},
+		sortOrder: 0,
+		values: model.values,
+		variants: model.variants,
+	};
+};
+
 export const umbMediaMockDb = new UmbMediaMockDB(data);

src/Umbraco.Web.UI.Client/src/mocks/handlers/document/collection.handlers.ts

@@ -0,0 +1,18 @@
+const { rest } = window.MockServiceWorker;
+import { umbDocumentMockDb } from '../../data/document/document.db.js';
+import { UMB_SLUG } from './slug.js';
+import { umbracoPath } from '@umbraco-cms/backoffice/utils';
+
+export const collectionHandlers = [
+	rest.get(umbracoPath(`/collection${UMB_SLUG}/:id`), (req, res, ctx) => {
+		const id = req.params.id as string;
+		if (!id) return res(ctx.status(400));
+
+		const skip = Number(req.url.searchParams.get('skip'));
+		const take = Number(req.url.searchParams.get('take'));
+
+		const response = umbDocumentMockDb.collection.getCollectionDocumentById({ id, skip, take });
+
+		return res(ctx.status(200), ctx.json(response));
+	}),
+];

src/Umbraco.Web.UI.Client/src/mocks/handlers/document/index.ts

@@ -5,6 +5,7 @@ import { permissionHandlers } from './permission.handlers.js';
 import { publishingHandlers } from './publishing.handlers.js';
 import { detailHandlers } from './detail.handlers.js';
 import { domainHandlers } from './domain.handlers.js';
+import { collectionHandlers } from './collection.handlers.js';
 
 export const handlers = [
 	...recycleBinHandlers,
@@ -14,4 +15,5 @@ export const handlers = [
 	...publishingHandlers,
 	...detailHandlers,
 	...domainHandlers,
+	...collectionHandlers,
 ];

src/Umbraco.Web.UI.Client/src/mocks/handlers/media/collection.handlers.ts

@@ -0,0 +1,17 @@
+const { rest } = window.MockServiceWorker;
+import { umbMediaMockDb } from '../../data/media/media.db.js';
+import { UMB_SLUG } from './slug.js';
+import { umbracoPath } from '@umbraco-cms/backoffice/utils';
+
+export const collectionHandlers = [
+	rest.get(umbracoPath(`/collection${UMB_SLUG}`), (req, res, ctx) => {
+		const id = req.url.searchParams.get('id') ?? '';
+
+		const skip = Number(req.url.searchParams.get('skip'));
+		const take = Number(req.url.searchParams.get('take'));
+
+		const response = umbMediaMockDb.collection.getCollectionMedia({ id, skip, take });
+
+		return res(ctx.status(200), ctx.json(response));
+	}),
+];

src/Umbraco.Web.UI.Client/src/mocks/handlers/media/index.ts

@@ -2,5 +2,12 @@ import { recycleBinHandlers } from './recycle-bin.handlers.js';
 import { treeHandlers } from './tree.handlers.js';
 import { itemHandlers } from './item.handlers.js';
 import { detailHandlers } from './detail.handlers.js';
+import { collectionHandlers } from './collection.handlers.js';
 
-export const handlers = [...recycleBinHandlers, ...treeHandlers, ...itemHandlers, ...detailHandlers];
+export const handlers = [
+	...recycleBinHandlers,
+	...treeHandlers,
+	...itemHandlers,
+	...detailHandlers,
+	...collectionHandlers,
+];