Merge pull request #2153 from umbraco/v14/feature/media-member-compositions

Feature: media & member compositions

Author: nielslyngsoe

src/packages/core/content-type/modals/composition-picker/composition-picker-modal.element.ts

@@ -90,17 +90,18 @@ export class UmbCompositionPickerModalElement extends UmbModalBaseElement<
 		await this.#init;
 		if (!this.#compositionRepository) return;
 
-		const isElement = this.data?.isElement;
-		const currentPropertyAliases = this.data?.currentPropertyAliases;
+		// Notice isElement is not available on all types that can be composed.
+		const isElement = this.data?.isElement ?? undefined;
+		const currentPropertyAliases = this.data?.currentPropertyAliases ?? [];
 
 		const { data } = await this.#compositionRepository.availableCompositions({
 			unique: this.#unique,
 			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 			// @ts-ignore
 			// TODO: isElement is not available on all types that can be composed.
-			isElement: isElement ?? false,
+			isElement: isElement,
 			currentCompositeUniques: this._selection,
-			currentPropertyAliases: currentPropertyAliases ?? [],
+			currentPropertyAliases: currentPropertyAliases,
 		});
 
 		if (!data) return;

src/packages/documents/document-types/repository/composition/index.ts

@@ -1,2 +1 @@
-export { UmbDocumentTypeCompositionRepository } from './document-type-composition.repository.js';
 export { UMB_DOCUMENT_TYPE_COMPOSITION_REPOSITORY_ALIAS } from './manifests.js';

src/packages/documents/document-types/repository/composition/manifests.ts

@@ -2,11 +2,11 @@ import type { ManifestRepository, ManifestTypes } from '@umbraco-cms/backoffice/
 
 export const UMB_DOCUMENT_TYPE_COMPOSITION_REPOSITORY_ALIAS = 'Umb.Repository.DocumentType.Composition';
 
-const queryRepository: ManifestRepository = {
+const compositionRepository: ManifestRepository = {
 	type: 'repository',
 	alias: UMB_DOCUMENT_TYPE_COMPOSITION_REPOSITORY_ALIAS,
 	name: 'Document Type Composition Repository',
 	api: () => import('./document-type-composition.repository.js'),
 };
 
-export const manifests: Array<ManifestTypes> = [queryRepository];
+export const manifests: Array<ManifestTypes> = [compositionRepository];

src/packages/media/media-types/index.ts

@@ -1,12 +1,11 @@
 import './components/index.js';
 
 export * from './components/index.js';
-export * from './workspace/index.js';
-
+export * from './entity.js';
 export * from './repository/index.js';
 export * from './tree/types.js';
-export * from './utils.ts/index.js';
 export * from './types.js';
-export * from './entity.js';
+export * from './utils.ts/index.js';
+export * from './workspace/index.js';
 
 export { UMB_MEDIA_TYPE_PICKER_MODAL } from './tree/index.js';

src/packages/media/media-types/repository/composition/index.ts

@@ -0,0 +1 @@
+export { UMB_MEDIA_TYPE_COMPOSITION_REPOSITORY_ALIAS } from './manifests.js';

src/packages/media/media-types/repository/composition/manifests.ts

@@ -0,0 +1,12 @@
+import type { ManifestRepository, ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
+
+export const UMB_MEDIA_TYPE_COMPOSITION_REPOSITORY_ALIAS = 'Umb.Repository.MediaType.Composition';
+
+const compositionRepository: ManifestRepository = {
+	type: 'repository',
+	alias: UMB_MEDIA_TYPE_COMPOSITION_REPOSITORY_ALIAS,
+	name: 'Media Type Composition Repository',
+	api: () => import('./media-type-composition.repository.js'),
+};
+
+export const manifests: Array<ManifestTypes> = [compositionRepository];

src/packages/media/media-types/repository/composition/media-type-composition.repository.ts

@@ -0,0 +1,36 @@
+import { UmbMediaTypeCompositionServerDataSource } from './media-type-composition.server.data-source.js';
+import type { UmbContentTypeCompositionRepository } from '@umbraco-cms/backoffice/content-type';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import type {
+	UmbMediaTypeAvailableCompositionRequestModel,
+	UmbMediaTypeCompositionCompatibleModel,
+	UmbMediaTypeCompositionReferenceModel,
+} from '@umbraco-cms/backoffice/media-type';
+import { UmbRepositoryBase } from '@umbraco-cms/backoffice/repository';
+
+export class UmbMediaTypeCompositionRepository
+	extends UmbRepositoryBase
+	implements
+		UmbContentTypeCompositionRepository<
+			UmbMediaTypeCompositionReferenceModel,
+			UmbMediaTypeCompositionCompatibleModel,
+			UmbMediaTypeAvailableCompositionRequestModel
+		>
+{
+	#compositionSource: UmbMediaTypeCompositionServerDataSource;
+
+	constructor(host: UmbControllerHost) {
+		super(host);
+		this.#compositionSource = new UmbMediaTypeCompositionServerDataSource(this);
+	}
+
+	async getReferences(unique: string) {
+		return this.#compositionSource.getReferences(unique);
+	}
+
+	async availableCompositions(args: UmbMediaTypeAvailableCompositionRequestModel) {
+		return this.#compositionSource.availableCompositions(args);
+	}
+}
+
+export { UmbMediaTypeCompositionRepository as api };

src/packages/media/media-types/repository/composition/media-type-composition.server.data-source.ts

@@ -0,0 +1,86 @@
+import type {
+	UmbMediaTypeCompositionCompatibleModel,
+	UmbMediaTypeCompositionReferenceModel,
+	UmbMediaTypeAvailableCompositionRequestModel,
+} from '../../types.js';
+import { type MediaTypeCompositionRequestModel, MediaTypeService } from '@umbraco-cms/backoffice/external/backend-api';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
+import type { UmbContentTypeCompositionDataSource } from '@umbraco-cms/backoffice/content-type';
+
+/**
+ * A data source for the Media Type Composition that fetches data from the server
+ * @export
+ * @class UmbMediaTypeCompositionServerDataSource
+ */
+export class UmbMediaTypeCompositionServerDataSource
+	implements
+		UmbContentTypeCompositionDataSource<
+			UmbMediaTypeCompositionReferenceModel,
+			UmbMediaTypeCompositionCompatibleModel,
+			UmbMediaTypeAvailableCompositionRequestModel
+		>
+{
+	#host: UmbControllerHost;
+
+	/**
+	 * Creates an instance of UmbMediaTypeCompositionServerDataSource.
+	 * @param {UmbControllerHost} host
+	 * @memberof UmbMediaTypeCompositionServerDataSource
+	 */
+	constructor(host: UmbControllerHost) {
+		this.#host = host;
+	}
+	/**
+	 * Fetches the compatible compositions for a Media type from the server
+	 * @param {string} unique
+	 * @return {*}
+	 * @memberof UmbMediaTypeCompositionServerDataSource
+	 */
+	async getReferences(unique: string) {
+		const response = await tryExecuteAndNotify(
+			this.#host,
+			MediaTypeService.getMediaTypeByIdCompositionReferences({ id: unique }),
+		);
+		const error = response.error;
+		const data: Array<UmbMediaTypeCompositionReferenceModel> | undefined = response.data?.map((reference) => {
+			return {
+				unique: reference.id,
+				icon: reference.icon,
+				name: reference.name,
+			};
+		});
+
+		return { data, error };
+	}
+	/**
+	 * Updates the compositions for a media type on the server
+	 * @param {MediaTypeCompositionRequestModel} requestBody
+	 * @return {*}
+	 * @memberof UmbMediaTypeCompositionServerDataSource
+	 */
+	async availableCompositions(args: UmbMediaTypeAvailableCompositionRequestModel) {
+		const requestBody: MediaTypeCompositionRequestModel = {
+			id: args.unique,
+			currentCompositeIds: args.currentCompositeUniques,
+			currentPropertyAliases: args.currentPropertyAliases,
+		};
+
+		const response = await tryExecuteAndNotify(
+			this.#host,
+			MediaTypeService.postMediaTypeAvailableCompositions({ requestBody }),
+		);
+		const error = response.error;
+		const data: Array<UmbMediaTypeCompositionCompatibleModel> | undefined = response.data?.map((composition) => {
+			return {
+				unique: composition.id,
+				name: composition.name,
+				icon: composition.icon,
+				folderPath: composition.folderPath,
+				isCompatible: composition.isCompatible,
+			};
+		});
+
+		return { data, error };
+	}
+}

src/packages/media/media-types/repository/index.ts

@@ -1,3 +1,4 @@
-export * from './item/index.js';
+export * from './composition/index.js';
 export * from './detail/index.js';
+export * from './item/index.js';
 export * from './structure/index.js';

src/packages/media/media-types/repository/manifests.ts

@@ -1,5 +1,6 @@
 import { manifests as detailManifests } from './detail/manifests.js';
 import { manifests as itemManifests } from './item/manifests.js';
+import { manifests as compositionManifests } from './composition/manifests.js';
 import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
 
-export const manifests: Array<ManifestTypes> = [...detailManifests, ...itemManifests];
+export const manifests: Array<ManifestTypes> = [...detailManifests, ...itemManifests, ...compositionManifests];