[MNT-24028] edit aspects dialog counter bug (#9539)

* [MNT-24028] fix dialog counter bug

* [MNT-24028] update docs

* [MNT-24028] remove fit

docs/content-services/components/aspect-list-dialog.component.md

@@ -11,11 +11,11 @@ Allows a user to choose aspects for a node.
 
 ## Details
 
-The [Aspect List Dialog component](aspect-list-dialog.component.md) works as a dialog showing the list of aspects available.
+The Aspect List Dialog component works as a dialog showing the list of aspects available.
 It is possible to filter the aspect showed via the app.config.json.
 ### Showing the dialog
 
-Unlike most components, the [Aspect List Dialog component](aspect-list-dialog.component.md) is typically shown in a dialog box
+Unlike most components, the Aspect List Dialog component is typically shown in a dialog box
 rather than the main page and you are responsible for opening the dialog yourself. You can use the
 [Angular Material Dialog](https://material.angular.io/components/dialog/overview) for this,
 as shown in the usage example. ADF provides the [`AspectListDialogComponentData`](../../../lib/content-services/src/lib/aspect-list/aspect-list-dialog-data.interface.ts) interface
@@ -40,14 +40,13 @@ The properties are described in the table below:
 | title | `string` | "" | Dialog title |
 | description | `string` | "" | Text to appear as description under the dialog title |
 | overTableMessage | `string` | "" | Text that will be showed on the top of the aspect list table |
-| select | [`Subject<Node>`](https://github.com/Alfresco/alfresco-js-api/blob/develop/src/api/content-rest-api/docs/Node.md) |  | Event emitted with the current node selection when the dialog closes |
+| select | `Subject<string[]>`|  | Event emitted with the current node selection when the dialog closes |
 | nodeId | `string` | "" | Identifier of a node to apply aspects to. |
 | excludedAspects | `string[]` | undefined | List of aspects' ids which should not be displayed. |
 
 If you don't want to manage the dialog yourself then it is easier to use the
 [Aspect List component](aspect-list.component.md), or the
-methods of the [Aspect List service](../services/aspect-list.service.md), which create
-the dialog for you.
+methods of the [Aspect List service](../../../lib/content-services/src/lib/aspect-list//services/aspect-list.service.ts), which create the dialog for you.
 
 ### Usage example
 

docs/content-services/components/aspect-list.component.md

@@ -19,7 +19,7 @@ The aspect are filtered via the app.config.json in this way :
 ## Basic Usage
 
 ```html
-    <adf-aspect-list (valueChanged)="onValueChanged($event)" [nodeId]="nodeId">
+    <adf-aspect-list (valueChanged)="onValueChanged($event)" (updateCounter)="onUpdateCounter($event)" [nodeId]="nodeId">
     </adf-aspect-list>
 ```
 
@@ -37,9 +37,10 @@ The aspect are filtered via the app.config.json in this way :
 | Name | Type | Description |
 | ---- | ---- | ----------- |
 | valueChanged | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<string[]>` | Emitted every time the user select a new aspect |
+| updateCounter | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<number>` | Emitted every time the number of selected aspects changes |
 
 ## See also
 
--   [Aspect List Dialog component](rating.component.md)
--   [Aspect List service](../services/rating.service.md)
--   [Node Aspect service](../services/rating.service.md)
+-   [Aspect List Dialog component](aspect-list-dialog.component.md)
+-   [Aspect List service](../../../lib/content-services/src/lib/aspect-list/services/aspect-list.service.ts)
+-   [Node Aspect service](../../../lib/content-services/src/lib/aspect-list/services/node-aspect.service.ts)

lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.html

@@ -5,11 +5,11 @@
 
 <div class="adf-aspect-list-dialog-information">
     <p id="aspect-list-dialog-over-table-message">{{overTableMessage | translate}}</p>
-    <p id="aspect-list-dialog-counter">{{currentAspectSelection ? currentAspectSelection.length : 0}}
+    <p id="aspect-list-dialog-counter">{{counter}}
         {{'ADF-ASPECT-LIST.DIALOG.SELECTED' | translate}}</p>
 </div>
 <mat-dialog-content class="adf-aspect-dialog-content">
-    <adf-aspect-list #aspectList (valueChanged)="onValueChanged($event)" [nodeId]="currentNodeId" [excludedAspects]="data.excludedAspects">
+    <adf-aspect-list #aspectList (valueChanged)="onValueChanged($event)" (updateCounter)="onUpdateCounter($event)" [nodeId]="currentNodeId" [excludedAspects]="data.excludedAspects">
     </adf-aspect-list>
 </mat-dialog-content>
 

lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.ts

@@ -31,6 +31,7 @@ export class AspectListDialogComponent implements OnInit {
     description: string;
     currentNodeId: string;
     overTableMessage: string;
+    counter = 0;
 
     currentAspectSelection: string[] = [];
 
@@ -57,7 +58,11 @@ export class AspectListDialogComponent implements OnInit {
     }
 
     onValueChanged(aspectList: string[]) {
-       this.currentAspectSelection = aspectList;
+        this.currentAspectSelection = aspectList;
+    }
+
+    onUpdateCounter(count: number) {
+        this.counter = count;
     }
 
     close() {

lib/content-services/src/lib/aspect-list/aspect-list.component.spec.ts

@@ -240,16 +240,18 @@ describe('AspectListComponent', () => {
                 expect(component.nodeAspects.length).toBe(0);
             });
 
-            it('should store not listed aspects and emit all aspects on value change', async () => {
+            it('should store not listed aspects and emit all aspects and count of only visible aspects on change', async () => {
                 const storedAspect = ['stored:aspect'];
                 expect(component.notDisplayedAspects).toEqual(storedAspect);
 
                 spyOn(component.valueChanged, 'emit');
+                spyOn(component.updateCounter, 'emit');
                 const panel = (await loader.getAllHarnesses(MatExpansionPanelHarness))[1];
                 const checkbox = await panel.getHarness(MatCheckboxHarness);
                 await checkbox.toggle();
                 fixture.detectChanges();
                 expect(component.valueChanged.emit).toHaveBeenCalledWith(['frs:AspectOne', 'frs:SecondAspect', ...storedAspect]);
+                expect(component.updateCounter.emit).toHaveBeenCalledWith(2);
             });
         });
 

lib/content-services/src/lib/aspect-list/aspect-list.component.ts

@@ -43,6 +43,10 @@ export class AspectListComponent implements OnInit, OnDestroy {
     @Output()
     valueChanged: EventEmitter<string[]> = new EventEmitter<string[]>();
 
+    /** Emitted every time the number of selected aspects changes */
+    @Output()
+    updateCounter: EventEmitter<number> = new EventEmitter<number>();
+
     propertyColumns: string[] = ['name', 'title', 'dataType'];
     aspects$: Observable<AspectEntry[]> = null;
     nodeAspects: string[] = [];
@@ -74,6 +78,7 @@ export class AspectListComponent implements OnInit, OnDestroy {
                     this.nodeAspectStatus = [ ...this.nodeAspects ];
                     this.notDisplayedAspects = node.aspectNames.filter((aspect) => !this.aspectListService.getVisibleAspects().includes(aspect) && !customAspects.includes(aspect));
                     this.valueChanged.emit([...this.nodeAspects, ...this.notDisplayedAspects]);
+                    this.updateCounter.emit(this.nodeAspects.length);
                 }),
                 concatMap(() => this.aspectListService.getAspects()),
                 takeUntil(this.onDestroy$));
@@ -97,6 +102,7 @@ export class AspectListComponent implements OnInit, OnDestroy {
         }
         this.updateEqualityOfAspectList();
         this.valueChanged.emit([...this.nodeAspects, ...this.notDisplayedAspects]);
+        this.updateCounter.emit(this.nodeAspects.length);
     }
 
     reset() {
@@ -104,6 +110,7 @@ export class AspectListComponent implements OnInit, OnDestroy {
             this.nodeAspects.splice(0, this.nodeAspects.length, ...this.nodeAspectStatus);
             this.hasEqualAspect = true;
             this.valueChanged.emit([...this.nodeAspects, ...this.notDisplayedAspects]);
+            this.updateCounter.emit(this.nodeAspects.length);
         } else {
             this.clear();
         }
@@ -113,6 +120,7 @@ export class AspectListComponent implements OnInit, OnDestroy {
         this.nodeAspects = [];
         this.updateEqualityOfAspectList();
         this.valueChanged.emit([...this.nodeAspects, ...this.notDisplayedAspects]);
+        this.updateCounter.emit(this.nodeAspects.length);
     }
 
     getId(aspect: any): string {