[ACA-4464] Add user/groups - should not be able to select the same user multiple times (#7066)

lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.html

@@ -34,11 +34,13 @@
             class="adf-permission-result-list"
             [class.adf-permission-result-list-search]="searchedWord.length === 0">
     <ng-template let-data>
-        <mat-selection-list class="adf-permission-result-list-elements" (keydown.control.a)="selectAll( data?.list?.entries)">
+        <mat-selection-list class="adf-permission-result-list-elements" (keydown.control.a)="onSelectionChange()"
+                            (selectionChange)="onSelectionChange()">
             <mat-list-option id="adf-add-permission-group-everyone"
                              class="adf-list-option-item"
                              #eveyone
-                             (click)="elementClicked(EVERYONE)">
+                             disableRipple
+                             [value]="EVERYONE">
                 <adf-user-icon-column [node]="EVERYONE" id="add-group-icon" [selected]="eveyone.selected"></adf-user-icon-column>
                 <p class="adf-result-name">
                     {{'PERMISSION_MANAGER.ADD-PERMISSION.EVERYONE' | translate}}
@@ -46,7 +48,8 @@
             </mat-list-option>
 
             <mat-list-option *ngFor="let item of data?.list?.entries; let idx = index"
-                             (click)="elementClicked(item)"
+                             disableRipple
+                             [value]="item"
                              class="adf-list-option-item"
                              id="result_option_{{idx}}"
                              #option>

lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.spec.ts

@@ -207,4 +207,41 @@ describe('AddPermissionPanelComponent', () => {
             expect(element.querySelector('#result_option_0 .mat-list-text').innerHTML).not.toEqual(element.querySelector('#result_option_1 .mat-list-text').innerHTML);
         });
     }));
+
+    it('should emit unique element in between multiple search', async(() => {
+        searchApiService = fixture.componentRef.injector.get(SearchService);
+        spyOn(searchApiService, 'search').and.returnValue(of(fakeAuthorityListResult));
+        let searchAttempt = 0;
+
+        component.select.subscribe((items) => {
+            searchAttempt++;
+            expect(items.length).toBe(1);
+            expect(items[0].entry.id).toBeDefined();
+            expect(items[0].entry.id).not.toBeNull();
+            expect(items[0].entry.id).toBe(fakeAuthorityListResult.list.entries[0].entry.id);
+        });
+
+        typeWordIntoSearchInput('a');
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            let listElement: DebugElement = fixture.debugElement.query(By.css('#result_option_0'));
+            expect(listElement).not.toBeNull();
+            listElement.triggerEventHandler('click', {});
+
+            const clearButton = fixture.debugElement.query(By.css('#adf-permission-clear-input'));
+            expect(clearButton).not.toBeNull();
+            clearButton.triggerEventHandler('click', {});
+            fixture.detectChanges();
+
+            typeWordIntoSearchInput('abc');
+            fixture.detectChanges();
+            fixture.whenStable().then(() => {
+                fixture.detectChanges();
+                listElement = fixture.debugElement.query(By.css('#result_option_0'));
+                expect(listElement).not.toBeNull();
+                listElement.triggerEventHandler('click', {});
+                expect(searchAttempt).toBe(2);
+            });
+        });
+    }));
 });

lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.ts

@@ -15,13 +15,14 @@
  * limitations under the License.
  */
 
-import { SearchService, SearchConfigurationService } from '@alfresco/adf-core';
+import { SearchConfigurationService, SearchService } from '@alfresco/adf-core';
 import { NodeEntry } from '@alfresco/js-api';
-import { Component, ViewEncapsulation, EventEmitter, Output, ViewChild } from '@angular/core';
+import { Component, EventEmitter, Output, ViewChild, ViewEncapsulation } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { debounceTime } from 'rxjs/operators';
 import { SearchPermissionConfigurationService } from './search-config-permission.service';
 import { SearchComponent } from '../../../search/components/search.component';
+import { MatSelectionList } from '@angular/material/list';
 
 @Component({
     selector: 'adf-add-permission-panel',
@@ -37,9 +38,12 @@ export class AddPermissionPanelComponent {
     @ViewChild('search', { static: true })
     search: SearchComponent;
 
+    @ViewChild(MatSelectionList, { static: false })
+    matSelectionList: MatSelectionList;
+
     /** Emitted when a permission list item is selected. */
     @Output()
-    select: EventEmitter<any> = new EventEmitter();
+    select: EventEmitter<NodeEntry[]> = new EventEmitter();
 
     searchInput: FormControl = new FormControl();
     searchedWord = '';
@@ -55,6 +59,9 @@ export class AddPermissionPanelComponent {
             debounceTime(this.debounceSearch)
         )
         .subscribe((searchValue) => {
+            const selectionOptions = this.matSelectionList.selectedOptions.selected.map(option => option.value);
+            this.selectedItems.push(...selectionOptions);
+            this.matSelectionList.deselectAll();
             this.searchedWord = searchValue;
             if (!searchValue) {
                 this.search.resetResults();
@@ -62,24 +69,17 @@ export class AddPermissionPanelComponent {
         });
     }
 
-    elementClicked(item: NodeEntry) {
+    onSelectionChange() {
-        if (this.isAlreadySelected(item)) {
+        const currentSelection = this.matSelectionList.selectedOptions.selected.map(option => option.value);
-            this.selectedItems.splice(this.selectedItems.indexOf(item), 1);
+        const uniqueSelection = [ ...currentSelection, ...this.selectedItems ]
-        } else {
+            .reduce((uniquesElements, currentElement) => {
-            this.selectedItems.push(item);
+            const isExist = uniquesElements.find(uniqueElement => uniqueElement.entry.id === currentElement.entry.id);
-        }
+            if (!isExist) {
-        this.select.emit(this.selectedItems);
+                uniquesElements.push(currentElement);
-    }
+            }
-
+            return uniquesElements;
-    selectAll(items: NodeEntry[]) {
+            }, []);
-        if (items?.length > 0) {
+        this.select.emit(uniqueSelection);
-            this.selectedItems = items;
-            this.select.emit(this.selectedItems);
-        }
-    }
-
-    private isAlreadySelected(item: NodeEntry): boolean {
-        return this.selectedItems.indexOf(item) >= 0;
     }
 
     clearSearch() {