* Fixed typo* added doc* Preselect based on the selection mode

demo-shell/src/app/components/files/files.component.html

@@ -13,6 +13,7 @@
                 [currentFolderId]="'-recent-'"
                 locationFormat="/files"
                 [display]="'gallery'"
+                [preselectNodes]="selectedNodes"
                 [showHeader]="false"
                 [maxItems]="5"
                 (preview)="showFile($event)"
@@ -221,6 +222,7 @@
                 [contentActions]="true"
                 [allowDropFiles]="allowDropFiles"
                 [selectionMode]="selectionMode"
+                [preselectNodes]="selectedNodes"
                 [multiselect]="multiselect"
                 [display]="displayMode"
                 [node]="nodeResult"
@@ -643,6 +645,21 @@ <h1>You don't have permissions</h1>
             </mat-slide-toggle>
         </section>
 
+        <section>
+            <mat-slide-toggle
+                color="primary" [(ngModel)]="preselectNodes" id="preselectNodes">
+                Preselect Nodes
+            </mat-slide-toggle>
+        </section>
+
+        <form class="example-form">
+            <mat-form-field *ngIf="preselectNodes" class="preselect-nodes-input">
+                <input matInput
+                (input)="setPreselectNodes($event.target?.value)"
+                placeholder="NodeEntry[] => [{ entry: { isFile: true, id: 'node-id' }}, { entry: { isFile: true, id: 'node-id' }} ]">
+            </mat-form-field>
+        </form>
+
         <h5>Upload</h5>
         <section *ngIf="acceptedFilesTypeShow">
             <mat-form-field floatPlaceholder="float">

demo-shell/src/app/components/files/files.component.scss

@@ -88,4 +88,8 @@
             justify-content: center;
         }
     }
+
+    .preselect-nodes-input {
+        width: 100%;
+    }
 }

demo-shell/src/app/components/files/files.component.ts

@@ -209,6 +209,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
     permissionsStyle: PermissionStyleModel[] = [];
     infiniteScrolling: boolean;
     stickyHeader: boolean;
+    preselectNodes: boolean;
     warnOnMultipleUploads = false;
     thumbnails = false;
 
@@ -217,6 +218,8 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
     displayEmptyMetadata = false;
     hyperlinkNavigation = false;
 
+    selectedNodes = [];
+
     constructor(private notificationService: NotificationService,
                 private uploadService: UploadService,
                 private contentService: ContentService,
@@ -687,4 +690,26 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
         this.router.navigate([], { relativeTo: this.route, queryParams: objectFromMap });
     }
 
+    setPreselectNodes(nodes: string) {
+        this.selectedNodes = this.getArrayFromString(nodes);
+        this.documentList.reload();
+    }
+
+    isStringArray(str: string): boolean {
+        try {
+            const result = JSON.parse(str);
+            return Array.isArray(result);
+        } catch (e) {
+            return false;
+        }
+    }
+
+    private getArrayFromString<T = any>(value: string): T[] {
+        if (this.isStringArray(value)) {
+            return JSON.parse(value);
+        } else {
+            return [];
+        }
+    }
+
 }

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

@@ -73,6 +73,7 @@ Displays the documents from a repository.
 | navigationMode | `string` |  | [User](../../../lib/core/pipes/user-initial.pipe.ts) interaction for folder navigation or file preview. Valid values are "click" and "dblclick". Default value: "dblclick" |
 | node | [`NodePaging`](https://github.com/Alfresco/alfresco-js-api/blob/develop/src/api/content-rest-api/docs/NodePaging.md) | null | The Document list will show all the nodes contained in the [NodePaging](https://github.com/Alfresco/alfresco-js-api/blob/develop/src/api/content-rest-api/docs/NodePaging.md) entity |
 | permissionsStyle | [`PermissionStyleModel`](../../../lib/content-services/src/lib/document-list/models/permissions-style.model.ts)`[]` | \[] | Define a set of CSS styles to apply depending on the permission of the user on that node. See the [Permission Style model](../../../lib/content-services/src/lib/document-list/models/permissions-style.model.ts) page for further details and examples. |
+| preselectNodes | [`NodeEntry`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeEntry.md) `[]` | \[] | Array of nodes to preselect . |
 | rowStyle | `string` |  | The inline style to apply to every row. See the Angular NgStyle docs for more details and usage examples. |
 | rowStyleClass | `string` |  | The CSS class to apply to every row |
 | selectionMode | `string` | "single" | Row selection mode. Can be null, `single` or `multiple`. For `multiple` mode, you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows. |

lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.html

@@ -61,7 +61,7 @@
             adf-highlight-selector=".adf-name-location-cell-name"
             [showHeader]="false"
             [node]="nodePaging"
-            [preSelectedNodes]="preSelectedNodes"
+            [preselectNodes]="preselectNodes"
             [maxItems]="pageSize"
             [rowFilter]="_rowFilter"
             [imageResolver]="imageResolver"

lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.spec.ts

@@ -20,7 +20,7 @@ import { async, fakeAsync, tick, ComponentFixture, TestBed } from '@angular/core
 import { By } from '@angular/platform-browser';
 import { NodeEntry, Node, SiteEntry, SitePaging, NodePaging } from '@alfresco/js-api';
 import { SearchService, SitesService, setupTestBed, NodesApiService, UploadService, FileUploadCompleteEvent } from '@alfresco/adf-core';
-import { Observable, Observer, of, throwError } from 'rxjs';
+import { Observable, Observer, of, throwError, Subject } from 'rxjs';
 import { DropdownBreadcrumbComponent } from '../breadcrumb';
 import { ContentNodeSelectorPanelComponent } from './content-node-selector-panel.component';
 import { ContentNodeSelectorService } from './content-node-selector.service';
@@ -31,7 +31,7 @@ import { DropdownSitesComponent } from '../site-dropdown/sites-dropdown.componen
 import { CustomResourcesService } from '../document-list/services/custom-resources.service';
 import { NodeEntryEvent, ShareDataRow } from '../document-list';
 import { TranslateModule } from '@ngx-translate/core';
-import { FileNode } from '../mock';
+import { FileNode, mockPreselectedNodes, mockNodePagingWithPreselectedNodes } from '../mock';
 
 const ONE_FOLDER_RESULT = {
     list: {
@@ -107,6 +107,7 @@ describe('ContentNodeSelectorComponent', () => {
             });
             const fakeSite = new SiteEntry({ entry: { id: 'fake-site', guid: 'fake-site', title: 'fake-site', visibility: 'visible' } });
             spyOn(sitesService, 'getSite').and.returnValue(of(fakeSite));
+            uploadService.fileUploadComplete = new Subject();
         });
 
         afterEach(() => {
@@ -1147,37 +1148,32 @@ describe('ContentNodeSelectorComponent', () => {
                 }));
             });
 
-            describe('in case preSelectedNodes defined', () => {
+            describe('preselectNodes', () => {
 
-                it('should update completed uploaded files count', () => {
+                it('should update completed uploaded files count', async () => {
                     const completedFiles = 2;
+                    const reloadSpy = spyOn(component.documentList, 'reload');
                     const completeEvent = new FileUploadCompleteEvent(null, completedFiles, { entry: new FileNode('file-name') }, null);
-                    uploadService.fileUploadComplete.next(completeEvent);
 
-                    expect(component.preSelectedNodes).toEqual([]);
-                });
-                it('should NOT be null after selecting node with the necessary permissions', () => {
-                    // const completeEvent = new FileUploadCompleteEvent(null, 1, { entry: {isFile: true} }, null);
-                    spyOn(uploadService, 'uploadFilesInTheQueue').and.callFake(() => {});
-                    spyOn(component.documentList, 'nodeSelected');
-                    // uploadService.fileUploadComplete.next();
-                    // spyOn(uploadService, 'getUploadPromise').and.returnValue(new Promise((success) => {
-                    //     success(ss);
-                    // }));
-
-                    component.preSelectedNodes = [new FileNode()];
                     fixture.detectChanges();
-                    // await fixture.whenStable();
+                    await fixture.whenStable();
+                    uploadService.fileUploadComplete.subscribe(() => {
+                        expect(reloadSpy).not.toHaveBeenCalled();
+                    });
+
+                    uploadService.fileUploadComplete.next(completeEvent);
+                });
 
-                    expect(component.chosenNode.length).toEqual(2);
-                    expect(component.documentList.nodeSelected).toHaveBeenCalled();
-                    // component.select.subscribe((nodes) => {
-                    //     expect(nodes).toBeDefined();
-                    //     expect(nodes).not.toBeNull();
-                    //     expect(component.chosenNode[0]).toBe(entry);
-                    // });
+                it('should NOT be null after selecting node with the necessary permissions', async () => {
+                    const nodeSelectedSpy = spyOn(component.documentList.nodeSelected, 'emit');
 
-                    // component.documentList.ready.emit(nodePage);
+                    component.nodePaging = mockNodePagingWithPreselectedNodes;
+                    component.preselectNodes = mockPreselectedNodes;
+                    component.documentList.onNodeSelect({row: undefined, selection: []});
+
+                    fixture.detectChanges();
+                    await fixture.whenStable();
+                    expect(nodeSelectedSpy).toHaveBeenCalled();
                 });
             });
 

lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.ts

@@ -224,7 +224,7 @@ export class ContentNodeSelectorPanelComponent implements OnInit, OnDestroy {
     searchInput: FormControl = new FormControl();
 
     target: PaginatedComponent;
-    preSelectedNodes: NodeEntry[] = [];
+    preselectNodes: NodeEntry[] = [];
 
     private onDestroy$ = new Subject<boolean>();
 
@@ -287,7 +287,8 @@ export class ContentNodeSelectorPanelComponent implements OnInit, OnDestroy {
             takeUntil(this.onDestroy$)
         )
         .subscribe((uploadedFiles: FileUploadCompleteEvent[]) => {
-            this.preSelectedNodes = [...uploadedFiles.map((uploadedFile) => uploadedFile.data)];
+            console.log('ss');
+            this.preselectNodes = [...uploadedFiles.map((uploadedFile) => uploadedFile.data)];
             this.documentList.reload();
         });
     }
@@ -452,7 +453,7 @@ export class ContentNodeSelectorPanelComponent implements OnInit, OnDestroy {
         this.showingSearchResults = false;
         this.infiniteScroll = false;
         this.breadcrumbFolderTitle = null;
-        this.preSelectedNodes = [];
+        this.preselectNodes = [];
         this.clearSearch();
         this.navigationChange.emit($event);
     }
@@ -528,7 +529,7 @@ export class ContentNodeSelectorPanelComponent implements OnInit, OnDestroy {
         }
     }
 
-    hasPreSelectedNodes(): boolean {
-        return this.preSelectedNodes && this.preSelectedNodes.length > 0;
+    hasPreSelectNodes(): boolean {
+        return this.preselectNodes && this.preselectNodes.length > 0;
     }
 }

lib/content-services/src/lib/document-list/components/document-list.component.spec.ts

@@ -26,7 +26,8 @@ import {
     DataTableComponent,
     DataTableModule,
     ObjectDataTableAdapter,
-    ShowHeaderMode
+    ShowHeaderMode,
+    ThumbnailService
 } from '@alfresco/adf-core';
 import { Subject, of, throwError } from 'rxjs';
 import {
@@ -58,6 +59,7 @@ describe('DocumentList', () => {
     let documentListService: DocumentListService;
     let apiService: AlfrescoApiService;
     let customResourcesService: CustomResourcesService;
+    let thumbnailService: ThumbnailService;
     let fixture: ComponentFixture<DocumentListComponent>;
     let element: HTMLElement;
     let eventMock: any;
@@ -88,6 +90,7 @@ describe('DocumentList', () => {
         documentListService = TestBed.inject(DocumentListService);
         apiService = TestBed.inject(AlfrescoApiService);
         customResourcesService = TestBed.inject(CustomResourcesService);
+        thumbnailService = TestBed.inject(ThumbnailService);
 
         spyFolder = spyOn(documentListService, 'getFolder').and.callFake(() => {
             return Promise.resolve({ list: {} });
@@ -1520,47 +1523,63 @@ describe('DocumentList', () => {
 
     describe('Preselected rows', () => {
 
-        it('should able to emit preselected nodes', async () => {
-            const currentFolderNodeIdChange = new SimpleChange('current-node-id', 'next-node-id', true);
+        beforeEach(() => {
+            spyOn(thumbnailService, 'getMimeTypeIcon').and.returnValue(`assets/images/ft_ic_created.svg`);
+        });
+
+        it('should able to emit nodeSelected event with preselectNodes on the reload', async () => {
             const nodeSelectedSpy = spyOn(documentList.nodeSelected, 'emit');
 
             fixture.detectChanges();
 
             documentList.node = mockNodePagingWithPreselectedNodes;
-            documentList.preSelectedNodes = mockPreselectedNodes;
-            documentList.ngOnChanges({ currentFolderId: currentFolderNodeIdChange });
-
+            documentList.preselectNodes = mockPreselectedNodes;
             documentList.reload();
+
             fixture.detectChanges();
             await fixture.whenStable();
 
-            expect(documentList.preSelectedNodes.length).toBe(2);
+            expect(documentList.preselectNodes.length).toBe(2);
             expect(nodeSelectedSpy).toHaveBeenCalled();
         });
 
-        it('should able to emit preselect  nodes on the reload', async () => {
-            const nodeSelectedSpy = spyOn(documentList.nodeSelected, 'emit');
+        it('should able to select first node from the preselectNodes when selectionMode set to single', async () => {
+            documentList.selectionMode = 'single';
+            fixture.detectChanges();
+
+            documentList.node = mockNodePagingWithPreselectedNodes;
+            documentList.preselectNodes = mockPreselectedNodes;
+            documentList.reload();
 
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            expect(documentList.preselectNodes.length).toBe(2);
+            expect(documentList.getPreselectNodesBasedOnSelectionMode().length).toBe(1);
+        });
+
+        it('should able to select all preselectNodes when selectionMode set to multiple', async () => {
+            documentList.selectionMode = 'multiple';
             fixture.detectChanges();
 
             documentList.node = mockNodePagingWithPreselectedNodes;
-            documentList.preSelectedNodes = mockPreselectedNodes;
+            documentList.preselectNodes = mockPreselectedNodes;
             documentList.reload();
 
             fixture.detectChanges();
             await fixture.whenStable();
 
-            expect(documentList.preSelectedNodes.length).toBe(2);
-            expect(nodeSelectedSpy).toHaveBeenCalled();
+            expect(documentList.preselectNodes.length).toBe(2);
+            expect(documentList.getPreselectNodesBasedOnSelectionMode().length).toBe(2);
         });
 
-        it('should not call nodeSelected when preselectedNodes undefined/empty', async () => {
+        it('should not emit nodeSelected event when preselectNodes undefined/empty', async () => {
             const nodeSelectedSpy = spyOn(documentList.nodeSelected, 'emit');
 
             fixture.detectChanges();
 
             documentList.node = mockNodePagingWithPreselectedNodes;
-            documentList.preSelectedNodes = [];
+            documentList.preselectNodes = [];
             documentList.reload();
 
             fixture.detectChanges();