[ACS-5611] Add custom metadata side panels to metadata card component (…

…#8974) * [ACS-5611] Add custom panels to metadata card component * [ACS-5611] Add custom metadata panels unit tests * [ACS-5611] CR fixes * [ACS-5611] CR fixes
Alfresco · Oct 9, 2023 · 4cc4498 · 4cc4498
1 parent 3a374ad
commit 4cc4498
Show file tree

Hide file tree

Showing 12 changed files with 101 additions and 4 deletions.
diff --git a/docs/README.md b/docs/README.md
@@ -357,6 +357,7 @@ for more information about installing and using the source code.
 | [Base Card View Content Update interface](content-services/interfaces/base-card-view-content-update.interface.md) | Specifies required properties and methods for Card View Content Update service. |  |
 | Extends from BaseCardViewUpdate. | [Source](../lib/content-services/src/lib/interfaces/base-card-view-content-update.interface.ts) |  |
 | [Search widget interface](content-services/interfaces/search-widget.interface.md) | Specifies required properties for Search filter component widgets. | [Source](../lib/content-services/src/lib/search/models/search-widget.interface.ts) |
+| [Content Metadata Custom Panel interface](content-services/interfaces/content-metadata-custom-panel.interface.md) | Specifies required properties for metadata custom panel. | [Source](../lib/content-services/src/lib/content-metadata/interfaces/content-metadata-custom-panel.interface.ts) |
 
 ### Models
 

diff --git a/docs/content-services/components/content-metadata-card.component.md b/docs/content-services/components/content-metadata-card.component.md
@@ -27,6 +27,7 @@ Displays and edits metadata related to a node.
     -   [Use chips for multi value properties](#use-chips-for-multi-value-properties)
 -   [Copy to Clipboard on click](#copy-to-clipboard-on-click)
 -   [Search select options (ACS 7+)](#search-select-options-acs-7)
+-   [Custom metadata panels](#custom-metadata-panels)
 
 ## Basic Usage
 
@@ -53,6 +54,7 @@ Displays and edits metadata related to a node.
 | readOnly | `boolean` | false | (optional) This flag sets the metadata in read only mode preventing changes. |
 | displayDefaultProperties | `boolean` |  | (optional) This flag displays/hides the metadata properties. |
 | editable | `boolean` |  | (optional) This flag toggles editable of content. |
+| customPanels | [`ContentMetadataCustomPanel`](../interfaces/content-metadata-custom-panel.interface.md)`[]` | | (optional) List of custom metadata panels to be displayed as [`Dynamic components`](../../extensions/components/dynamic.component.md). |
 
 ### Events
 
@@ -438,3 +440,7 @@ When the list of values is too long, the options selection panel will be enhance
 ```
 
 ![Chips for multi value properties](../../docassets/images/adf-search-select.png)
+
+## Custom metadata panels
+
+If there is a need to display some custom node properties that require additional UI or data to be fetched you can define custom metadata panels for the metadata component. After creating custom component to be displayed it has to be registered in [Extension Service](../../extensions/services/extension.service.md). Both `panelTitle` and `component` properties have to be defined.
diff --git a/docs/content-services/interfaces/content-metadata-custom-panel.interface.md b/docs/content-services/interfaces/content-metadata-custom-panel.interface.md
@@ -0,0 +1,31 @@
+---
+Title: Content Metadata Custom Panel interface
+Added: v6.4.0
+Status: Active
+Last reviewed: 2023-10-06
+---
+
+# [Content Metadata Custom Panel interface](../../../lib/content-services/src/lib/content-metadata/interfaces/content-metadata-custom-panel.interface.ts "Defined in content-metadata-custom-panel.interface.ts")
+
+Specifies required properties for custom metadata panel to be displayed in [ContentMetadataCardComponent](../components/content-metadata-card.component.md).
+
+## Basic usage
+
+```ts
+export interface ContentMetadataCustomPanel {
+    panelTitle: string;
+    component: string;
+}
+```
+
+### Properties
+
+| Name | Type | Default value | Description |
+| ---- | ---- | ------------- | ----------- |
+| panelTitle | `string` |  | Title for the panel the will be displayed in expansion panel header. |
+| component | `string` |  | Id of the registered [Dynamic component](../../extensions/components/dynamic.component.md) to be displayed inside expansion panel. |
+
+## See also
+
+-   [ContentMetadataCardComponent](../components/content-metadata-card.component.md)
+-   [Dynamic Component](../../extensions/components/dynamic.component.md)
diff --git a/docs/versionIndex.md b/docs/versionIndex.md
@@ -12,6 +12,7 @@ backend services have been tested with each released version of ADF.
 
 ## Versions
 
+-   [v6.4.0](#v640)
 -   [v6.2.0](#v620)
 -   [v6.1.0](#v610)
 -   [v6.0.0](#v600)
@@ -43,6 +44,14 @@ backend services have been tested with each released version of ADF.
 -   [v2.1.0](#v210)
 -   [v2.0.0](#v200)
 
+## v6.4.0
+
+<!--v640 start-->
+
+-   [Content Metadata Custom Panel interface](content-services/interfaces/content-metadata-custom-panel.interface.md)
+
+<!--v640 end-->
+
 ## v6.2.0
 
 <!--v620 start-->

diff --git a/...ib/content-metadata/components/content-metadata-card/content-metadata-card.component.html b/...ib/content-metadata/components/content-metadata-card/content-metadata-card.component.html
@@ -10,7 +10,8 @@
             [displayAspect]="displayAspect"
             [preset]="preset"
             [displayTags]="displayTags"
-            [displayCategories]="displayCategories">
+            [displayCategories]="displayCategories"
+            [customPanels]="customPanels">
         </adf-content-metadata>
     </mat-card-content>
     <mat-card-footer class="adf-content-metadata-card-footer">

diff --git a/.../lib/content-metadata/components/content-metadata-card/content-metadata-card.component.ts b/.../lib/content-metadata/components/content-metadata-card/content-metadata-card.component.ts
@@ -18,7 +18,7 @@
 import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';
 import { Node } from '@alfresco/js-api';
 import { NodeAspectService } from '../../../aspect-list/services/node-aspect.service';
-import { PresetConfig } from '../../interfaces/content-metadata.interfaces';
+import { ContentMetadataCustomPanel, PresetConfig } from '../../interfaces/content-metadata.interfaces';
 import { VersionCompatibilityService } from '../../../version-compatibility/version-compatibility.service';
 import { ContentService } from '../../../common/services/content.service';
 import { AllowableOperationsEnum } from '../../../common/models/allowable-operations.enum';
@@ -80,6 +80,10 @@ export class ContentMetadataCardComponent implements OnChanges {
     @Input()
     editable? = false;
 
+    /** List of custom metadata panels to be displayed with registered custom components */
+    @Input()
+    customPanels: ContentMetadataCustomPanel[];
+
     /** Emitted when content's editable state is changed. */
     @Output()
     editableChange = new EventEmitter<boolean>();

diff --git a/...ices/src/lib/content-metadata/components/content-metadata/content-metadata.component.html b/...ices/src/lib/content-metadata/components/content-metadata/content-metadata.component.html
@@ -78,6 +78,12 @@
                 </adf-categories-management>
             </div>
         </ng-container>
+        <mat-expansion-panel *ngFor="let customPanel of customPanels">
+            <mat-expansion-panel-header>
+                <mat-panel-title>{{ customPanel.panelTitle | translate }}</mat-panel-title>
+            </mat-expansion-panel-header>
+            <adf-dynamic-component [id]="customPanel.component" [data]="{ node }"></adf-dynamic-component>
+        </mat-expansion-panel>
         <ng-container *ngIf="expanded">
             <ng-container *ngIf="groupedProperties$ | async; else loading; let groupedProperties">
                 <div *ngFor="let group of groupedProperties; let first = first;"

diff --git a/...s/src/lib/content-metadata/components/content-metadata/content-metadata.component.spec.ts b/...s/src/lib/content-metadata/components/content-metadata/content-metadata.component.spec.ts
@@ -1405,6 +1405,17 @@ describe('ContentMetadataComponent', () => {
             });
         });
     });
+
+    describe('Custom metadata panels', () => {
+        it('should render correct custom panel with title and component', () => {
+            component.customPanels = [{ panelTitle: 'testTitle', component: 'testComponent' }];
+            fixture.detectChanges();
+            const panelTitle = fixture.debugElement.queryAll(By.css('mat-panel-title'))[1].nativeElement;
+            const customComponent = fixture.debugElement.query(By.css('adf-dynamic-component')).nativeElement;
+            expect(panelTitle.innerText).toEqual('testTitle');
+            expect(customComponent).toBeDefined();
+        });
+    });
 });
 
 const queryDom = (fixture: ComponentFixture<ContentMetadataComponent>, properties: string = 'properties') =>

diff --git a/...rvices/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts b/...rvices/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts
@@ -36,7 +36,7 @@ import {
     UpdateNotification
 } from '@alfresco/adf-core';
 import { ContentMetadataService } from '../../services/content-metadata.service';
-import { CardViewGroup, PresetConfig } from '../../interfaces/content-metadata.interfaces';
+import { CardViewGroup, PresetConfig, ContentMetadataCustomPanel } from '../../interfaces/content-metadata.interfaces';
 import { catchError, debounceTime, map, takeUntil } from 'rxjs/operators';
 import { CardViewContentUpdateService } from '../../../common/services/card-view-content-update.service';
 import { NodesApiService } from '../../../common/services/nodes-api.service';
@@ -115,6 +115,10 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy {
     @Input()
     displayCategories = false;
 
+    /** List of custom metadata panels to be displayed with registered custom components */
+    @Input()
+    customPanels: ContentMetadataCustomPanel[] = [];
+
     private _assignedTags: string[] = [];
     private assignedTagsEntries: TagEntry[] = [];
     private _editable = false;

diff --git a/lib/content-services/src/lib/content-metadata/content-metadata.module.ts b/lib/content-services/src/lib/content-metadata/content-metadata.module.ts
@@ -23,14 +23,16 @@ import { ContentMetadataComponent } from './components/content-metadata/content-
 import { ContentMetadataCardComponent } from './components/content-metadata-card/content-metadata-card.component';
 import { TagModule } from '../tag/tag.module';
 import { CategoriesModule } from '../category/category.module';
+import { ExtensionsModule } from '@alfresco/adf-extensions';
 
 @NgModule({
     imports: [
         CommonModule,
         MaterialModule,
         CoreModule,
         TagModule,
-        CategoriesModule
+        CategoriesModule,
+        ExtensionsModule
     ],
     exports: [
         ContentMetadataComponent,

diff --git a/...t-services/src/lib/content-metadata/interfaces/content-metadata-custom-panel.interface.ts b/...t-services/src/lib/content-metadata/interfaces/content-metadata-custom-panel.interface.ts
@@ -0,0 +1,21 @@
+/*!
+ * @license
+ * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export interface ContentMetadataCustomPanel {
+    panelTitle: string;
+    component: string;
+}
diff --git a/lib/content-services/src/lib/content-metadata/interfaces/content-metadata.interfaces.ts b/lib/content-services/src/lib/content-metadata/interfaces/content-metadata.interfaces.ts
@@ -24,3 +24,4 @@ export * from './content-metadata-config.interface';
 export * from './indifferent-config.interface';
 export * from './layout-oriented-config.interface';
 export * from './preset-config.interface';
+export * from './content-metadata-custom-panel.interface';