diff --git a/demo-shell/src/app.config.json b/demo-shell/src/app.config.json index 5369be3999..166b43e018 100644 --- a/demo-shell/src/app.config.json +++ b/demo-shell/src/app.config.json @@ -818,7 +818,23 @@ "presets": { "default": { "exif:exif": "*" - } + }, + "custom-title": [{ + "title": "Exif", + "items": [ + { + "aspect": "exif:exif", + "editing": false, + "properties": [ + "exif:pixelXDimension", + { + "title": "Custom YDimension Name", + "name": "exif:pixelYDimension" + } + ] + } + ] + }] }, "multi-value-pipe-separator": ", ", "multi-value-chips": true diff --git a/docs/content-services/components/content-metadata-card.component.md b/docs/content-services/components/content-metadata-card.component.md index a575d0ec34..6906c0ce25 100644 --- a/docs/content-services/components/content-metadata-card.component.md +++ b/docs/content-services/components/content-metadata-card.component.md @@ -212,6 +212,42 @@ A more complex config is shown in the example below: } ``` +#### Custom property title example + +In layout oriented configuration, the metadata property title can be overridden from ADF as below. + +```json + { + "name": "exif:pixelYDimension", // your desired property name + "title": "Custom YDimension Name" // your desired property title + } +``` + +```json + "content-metadata": { + "presets": { + "kittens": [ + { + "title": "GROUP-TITLE1-TRANSLATION-KEY", + "items": [ + { + "aspect": "exif:exif", + "properties": [ + "exif:pixelXDimension", + { + "title": "Custom YDimension Name", + "name": "exif:pixelYDimension" + } + ] + } + ] + } +``` + +Note: The desired property title should be valid. otherwise it will take default value. + +![custom-ptoperty-title](../../docassets/images/content-meta-data-custom-ptoperty-title.png) + The result of this config would be two accordion groups with the following properties: | GROUP-TITLE1-TRANSLATION-KEY | diff --git a/docs/docassets/images/content-meta-data-custom-ptoperty-title.png b/docs/docassets/images/content-meta-data-custom-ptoperty-title.png new file mode 100644 index 0000000000..b65f12d99b Binary files /dev/null and b/docs/docassets/images/content-meta-data-custom-ptoperty-title.png differ diff --git a/lib/content-services/src/lib/content-metadata/interfaces/layout-oriented-config.interface.ts b/lib/content-services/src/lib/content-metadata/interfaces/layout-oriented-config.interface.ts index 7934b0046e..9651ca98a3 100644 --- a/lib/content-services/src/lib/content-metadata/interfaces/layout-oriented-config.interface.ts +++ b/lib/content-services/src/lib/content-metadata/interfaces/layout-oriented-config.interface.ts @@ -15,10 +15,12 @@ * limitations under the License. */ +import { Property } from './property.interface'; + export interface LayoutOrientedConfigItem { aspect?: string; type?: string; - properties: string | string[]; + properties: string | string[] | Property[]; includeAll?: boolean; exclude?: string | string[]; editable?: boolean; diff --git a/lib/content-services/src/lib/content-metadata/services/config/layout-oriented-config.service.spec.ts b/lib/content-services/src/lib/content-metadata/services/config/layout-oriented-config.service.spec.ts index d287797e48..5dc704adc7 100644 --- a/lib/content-services/src/lib/content-metadata/services/config/layout-oriented-config.service.spec.ts +++ b/lib/content-services/src/lib/content-metadata/services/config/layout-oriented-config.service.spec.ts @@ -16,7 +16,12 @@ */ import { LayoutOrientedConfigService } from './layout-oriented-config.service'; -import { LayoutOrientedConfig, Property, OrganisedPropertyGroup, PropertyGroupContainer } from '../../interfaces/content-metadata.interfaces'; +import { + LayoutOrientedConfig, + Property, + OrganisedPropertyGroup, + PropertyGroupContainer +} from '../../interfaces/content-metadata.interfaces'; describe('LayoutOrientedConfigService', () => { @@ -269,7 +274,32 @@ describe('LayoutOrientedConfigService', () => { expectations: [ { title: 'First group', properties: [property3, property4, property2] } ] + }, + { + name: 'Custom Title', + config: [ + { + title: 'First group', + items: [ + { aspect: 'zestiria', properties: 'property3' }, + { type: 'berseria', properties: ['property2', { title: 'Custom title', name: 'property1' }] }, + { type: 'otherTales', properties: [ { title: 'Custom title', name: 'property5' }] } + ] + } + ], + expectations: [ + { + title: 'First group', + properties: [ + property3, + property2, + { name: 'property1', title: 'Custom title', editable: true }, + { name: 'property5', title: 'Custom title', editable: true } + ] + } + ] } + ]; testCases.forEach((testCase) => { @@ -287,7 +317,7 @@ describe('LayoutOrientedConfigService', () => { ); expectation.properties.forEach((property, j) => { - expect(organisedPropertyGroups[i].properties[j]).toBe(property, `Property should match ${property.name}`); + expect(organisedPropertyGroups[i].properties[j]).toEqual(property, `Property should match ${property.name}`); }); }); }); diff --git a/lib/content-services/src/lib/content-metadata/services/config/layout-oriented-config.service.ts b/lib/content-services/src/lib/content-metadata/services/config/layout-oriented-config.service.ts index 9ad250c2a7..54a5f978b5 100644 --- a/lib/content-services/src/lib/content-metadata/services/config/layout-oriented-config.service.ts +++ b/lib/content-services/src/lib/content-metadata/services/config/layout-oriented-config.service.ts @@ -41,7 +41,10 @@ export class LayoutOrientedConfigService implements ContentMetadataConfig { const organisedPropertyGroup = layoutBlocks.map((layoutBlock) => { const flattenedItems = this.flattenItems(layoutBlock.items), properties = flattenedItems.reduce((props, explodedItem) => { - let property = getProperty(propertyGroups, explodedItem.groupName, explodedItem.propertyName) || []; + const isProperty = typeof explodedItem.property === 'object'; + const propertyName = isProperty ? explodedItem.property.name : explodedItem.property; + let property = getProperty(propertyGroups, explodedItem.groupName, propertyName) || []; + if (isProperty) { property = this.setPropertyTitle(property, explodedItem.property); } property = this.setEditableProperty(property, explodedItem); return props.concat(property); }, []); @@ -101,13 +104,20 @@ export class LayoutOrientedConfigService implements ContentMetadataConfig { return propertyGroup; } + private setPropertyTitle(item: Property | Property[], property: Property): Property | Property[] { + if (!Array.isArray(item)) { + return { ...item, ...(item.name === property.name && !!property.title) && { title: property.title } }; + } + return item; + } + private flattenItems(items) { return items.reduce((accumulator, item) => { const properties = Array.isArray(item.properties) ? item.properties : [item.properties]; - const flattenedProperties = properties.map((propertyName) => { + const flattenedProperties = properties.map((property) => { return { groupName: item.aspect || item.type, - propertyName, + property, editable: item.editable }; }); diff --git a/lib/core/app-config/schema.json b/lib/core/app-config/schema.json index c5861c58db..9b8e8b31cf 100644 --- a/lib/core/app-config/schema.json +++ b/lib/core/app-config/schema.json @@ -461,7 +461,31 @@ }, "properties": { "description": "list of type properties", - "type": "array" + "type": "array", + "items": { + "oneOf": [ + { + "type": "string" + }, + { + "type": "object", + "required": [ + "title", + "name" + ], + "properties": { + "title": { + "description": "Title of aspect properties", + "type": "string" + }, + "name": { + "description": "Name of aspect properties", + "type": "string" + } + } + } + ] + } } } }