diff --git a/docs/content-services/components/aspect-list-dialog.component.md b/docs/content-services/components/aspect-list-dialog.component.md index 744d1d99f7..edd74a8fbd 100644 --- a/docs/content-services/components/aspect-list-dialog.component.md +++ b/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`](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`| | 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 diff --git a/docs/content-services/components/aspect-list.component.md b/docs/content-services/components/aspect-list.component.md index 4dc90afc7f..3b79c983b5 100644 --- a/docs/content-services/components/aspect-list.component.md +++ b/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 - + ``` @@ -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)`` | Emitted every time the user select a new aspect | +| updateCounter | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`` | 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) diff --git a/lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.html b/lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.html index 719608e810..3cf8a035c5 100644 --- a/lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.html +++ b/lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.html @@ -5,11 +5,11 @@

{{overTableMessage | translate}}

-

{{currentAspectSelection ? currentAspectSelection.length : 0}} +

{{counter}} {{'ADF-ASPECT-LIST.DIALOG.SELECTED' | translate}}

- + diff --git a/lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.ts b/lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.ts index 8a3672e209..76de7939ce 100644 --- a/lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.ts +++ b/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() { diff --git a/lib/content-services/src/lib/aspect-list/aspect-list.component.spec.ts b/lib/content-services/src/lib/aspect-list/aspect-list.component.spec.ts index 75732d8fe7..4b289b9bd5 100644 --- a/lib/content-services/src/lib/aspect-list/aspect-list.component.spec.ts +++ b/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); }); }); diff --git a/lib/content-services/src/lib/aspect-list/aspect-list.component.ts b/lib/content-services/src/lib/aspect-list/aspect-list.component.ts index c18b9ce51b..d6185efbb6 100644 --- a/lib/content-services/src/lib/aspect-list/aspect-list.component.ts +++ b/lib/content-services/src/lib/aspect-list/aspect-list.component.ts @@ -43,6 +43,10 @@ export class AspectListComponent implements OnInit, OnDestroy { @Output() valueChanged: EventEmitter = new EventEmitter(); + /** Emitted every time the number of selected aspects changes */ + @Output() + updateCounter: EventEmitter = new EventEmitter(); + propertyColumns: string[] = ['name', 'title', 'dataType']; aspects$: Observable = 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 {