[AAE-3321] Select uploaded local files by default (#6079)

* [AAE-3111] Select uploaded files by default

* [AAE-3321] Select uploaded local files by default

* * After rebase

* *  Renamed method/property names

* * Fixed comments
* Added a private method to bubble up preselected nodes

* * Added unit tests

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

* * Added way to test in demo shell

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"
@@ -550,7 +552,7 @@
         </section>
 
         <section>
-            <mat-slide-toggle id="adf-multiple-upload-switch" [color]="'primary'" [(ngModel)]="multipleFileUpload">
+            <mat-slide-toggle id="adf-multiple-upload-switch" [color]="'primary'" (change)="onMultipleFilesUpload()" [(ngModel)]="multipleFileUpload" >
                 {{'DOCUMENT_LIST.MULTIPLE_FILE_UPLOAD' | translate}}
             </mat-slide-toggle>
         </section>
@@ -643,6 +645,21 @@
             </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="adf-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;
         }
     }
+
+    .adf-preselect-nodes-input {
+        width: 100%;
+    }
 }

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

@@ -23,13 +23,14 @@ import { Location } from '@angular/common';
 
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Params, Router } from '@angular/router';
-import { MinimalNodeEntity, NodePaging, Pagination, MinimalNodeEntryEntity, SiteEntry, SearchEntry } from '@alfresco/js-api';
+import { MinimalNodeEntity, NodePaging, Pagination, MinimalNodeEntryEntity, SiteEntry, SearchEntry, NodeEntry } from '@alfresco/js-api';
 import {
     AlfrescoApiService, AuthenticationService, AppConfigService, AppConfigValues, ContentService, TranslationService, FolderCreatedEvent, LogService, NotificationService,
     UploadService, DataRow, UserPreferencesService,
     PaginationComponent, FormValues, DisplayMode, ShowHeaderMode, InfinitePaginationComponent, HighlightDirective,
     SharedLinksApiService,
-    FormRenderingService
+    FormRenderingService,
+    FileUploadEvent
 } from '@alfresco/adf-core';
 
 import {
@@ -47,7 +48,7 @@ import { VersionManagerDialogAdapterComponent } from './version-manager-dialog-a
 import { MetadataDialogAdapterComponent } from './metadata-dialog-adapter.component';
 import { Subject } from 'rxjs';
 import { PreviewService } from '../../services/preview.service';
-import { takeUntil } from 'rxjs/operators';
+import { takeUntil, debounceTime, scan } from 'rxjs/operators';
 
 const DEFAULT_FOLDER_TO_SHOW = '-my-';
 
@@ -208,6 +209,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
     permissionsStyle: PermissionStyleModel[] = [];
     infiniteScrolling: boolean;
     stickyHeader: boolean;
+    preselectNodes: boolean;
     warnOnMultipleUploads = false;
     thumbnails = false;
 
@@ -216,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,
@@ -277,6 +281,33 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
             });
         }
 
+        this.uploadService.fileUploadComplete
+        .pipe(
+            debounceTime(300),
+            scan((files, currentFile) => [...files, currentFile], []),
+            takeUntil(this.onDestroy$)
+        )
+        .subscribe((value: any[]) => {
+            let selectedNodes: NodeEntry[] = [];
+
+            if (this.preselectNodes) {
+                if (value && value.length > 0 ) {
+                    if (this.selectionMode === 'single') {
+                        selectedNodes = [...[value[value.length - 1]].map((uploadedFile) => uploadedFile.data)];
+                    } else {
+                        selectedNodes = [...value.map((uploadedFile) => uploadedFile.data)];
+                    }
+                    this.selectedNodes = [...selectedNodes];
+                }
+            }
+
+            this.onFileUploadEvent(value[0]);
+        });
+
+        this.uploadService.fileUploadDeleted
+        .pipe(takeUntil(this.onDestroy$))
+        .subscribe(value => this.onFileUploadEvent(value));
+
         this.contentService.folderCreated
             .pipe(takeUntil(this.onDestroy$))
             .subscribe(value => this.onFolderCreated(value));
@@ -302,6 +333,12 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
             });
     }
 
+    onFileUploadEvent(event: FileUploadEvent) {
+        if (event && event.file.options.parentId === this.documentList.currentFolderId) {
+            this.documentList.reload();
+        }
+    }
+
     ngOnDestroy() {
         this.onDestroy$.next(true);
         this.onDestroy$.complete();
@@ -669,4 +706,30 @@ 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 [];
+        }
+    }
+
+    onMultipleFilesUpload() {
+        this.selectedNodes = [];
+    }
+
 }