upload dialog improvements (#1740)

Various upload dialog improvements - fix: headers alignment - fix: Name column alignment - fix: rename ‘CANCEL’ button to ‘Cancel all’ (as it’s what it does) - fix: ‘Cancel all’ button still visible after all upload complete - new: improved layout and api for file upload components - new: strongly typed methods for UploadService
2025-07-31 17:38:48 +00:00 · 2017-03-21 14:45:48 +00:00
parent c846556e28
commit 62915aff93
12 changed files with 89 additions and 96 deletions
--- a/ng2-components/ng2-alfresco-upload/src/components/file-uploading-dialog.component.html
+++ b/ng2-components/ng2-alfresco-upload/src/components/file-uploading-dialog.component.html
@@ -4,17 +4,17 @@
            <span id="total-upload-completed">{{totalCompleted}}</span> {{ totalCompletedMsg | translate}}
        </div>
        <div class="buttons">
-            <div class="minimize-button" [ngClass]="{active: _isDialogMinimized}" (keyup.enter)="toggleDialogMinimize()" (click)="toggleDialogMinimize()" tabindex="0">
+            <div class="minimize-button" [ngClass]="{active: isDialogMinimized}" (keyup.enter)="toggleMinimized()" (click)="toggleMinimized()" tabindex="0">
                <i class="material-icons down" title="minimize upload list">keyboard_arrow_down</i>
                <i class="material-icons up" title="expand upload list">keyboard_arrow_up</i>
            </div>

-            <div class="close-button" (click)="toggleShowDialog()" (keyup.enter)="toggleShowDialog()" tabindex="0" title="close upload list">
+            <div class="close-button" (click)="toggleVisible()" (keyup.enter)="toggleVisible()" tabindex="0" title="close upload list">
                <i class="material-icons">clear</i>
            </div>
        </div>
    </div>
-    <div class="body-dialog" *ngIf="filesUploadingList"  [ngClass]="{hide: _isDialogMinimized}">
-        <alfresco-file-uploading-list [filesUploadingList]="filesUploadingList"></alfresco-file-uploading-list>
+    <div class="body-dialog" *ngIf="filesUploadingList"  [ngClass]="{hide: isDialogMinimized}">
+        <alfresco-file-uploading-list [files]="filesUploadingList"></alfresco-file-uploading-list>
    </div>
 </div>
--- a/ng2-components/ng2-alfresco-upload/src/components/file-uploading-dialog.component.spec.ts
+++ b/ng2-components/ng2-alfresco-upload/src/components/file-uploading-dialog.component.spec.ts
@@ -80,7 +80,7 @@ describe('FileUploadingDialogComponent', () => {
    });

    it('should render dialog box with css class show when an element is added to Observer', () => {
-        uploadService.addToQueue([file]);
+        uploadService.addToQueue([<File> { name: 'file' }]);
        component.filesUploadingList = [file];

        fixture.detectChanges();
@@ -88,8 +88,8 @@ describe('FileUploadingDialogComponent', () => {
        expect(element.querySelector('.file-dialog').getAttribute('class')).toEqual('file-dialog show');
    });

-    it('should render dialog box with css class show when the toggleShowDialog is called', () => {
-        component.toggleShowDialog();
+    it('should render dialog box with css class show when the toggleVisible is called', () => {
+        component.toggleVisible();
        fixture.detectChanges();

        expect(element.querySelector('.file-dialog').getAttribute('class')).toEqual('file-dialog show');
@@ -98,7 +98,7 @@ describe('FileUploadingDialogComponent', () => {
    it('should render dialog box with css class hide', () => {
        component.isDialogActive = true;

-        component.toggleShowDialog();
+        component.toggleVisible();
        fixture.detectChanges();

        expect(element.querySelector('.file-dialog').getAttribute('class')).toEqual('file-dialog');
@@ -107,7 +107,7 @@ describe('FileUploadingDialogComponent', () => {
    it('should render minimize dialog as default', () => {
        component.isDialogActive = true;

-        component.toggleDialogMinimize();
+        component.toggleMinimized();
        fixture.detectChanges();

        expect(element.querySelector('.minimize-button').getAttribute('class')).toEqual('minimize-button active');
--- a/ng2-components/ng2-alfresco-upload/src/components/file-uploading-dialog.component.ts
+++ b/ng2-components/ng2-alfresco-upload/src/components/file-uploading-dialog.component.ts
@@ -15,13 +15,13 @@
 * limitations under the License.
 */

-import { Component, ChangeDetectorRef, OnInit, OnDestroy } from '@angular/core';
+import { Component, Input, ChangeDetectorRef, OnInit, OnDestroy } from '@angular/core';
 import { FileModel } from '../models/file.model';
 import { AlfrescoTranslationService } from 'ng2-alfresco-core';
 import { UploadService } from '../services/upload.service';

 /**
- * <file-uploading-dialog [filesUploadingList]="FileModel[]" ></file-uploading-dialog>
+ * <file-uploading-dialog [filesUploadingList]="FileModel[]"></file-uploading-dialog>
 *
 * This component is a hideable and minimizable wich contains the list of the uploading
 * files contained in the filesUploadingList.
@@ -35,20 +35,17 @@ import { UploadService } from '../services/upload.service';
    selector: 'file-uploading-dialog',
    moduleId: module.id,
    templateUrl: './file-uploading-dialog.component.html',
-    styleUrls: ['./file-uploading-dialog.component.css'],
-    host: {'[class.dialog-show]': 'toggleShowDialog'}
+    styleUrls: ['./file-uploading-dialog.component.css']
 })
 export class FileUploadingDialogComponent implements OnInit, OnDestroy {

-    isDialogActive: boolean = false;
-
+    @Input()
    filesUploadingList: FileModel [];

+    isDialogActive: boolean = false;
    totalCompleted: number = 0;
-
    totalCompletedMsg: string = 'FILE_UPLOAD.MESSAGES.SINGLE_COMPLETED';
-
-    private _isDialogMinimized: boolean = false;
+    isDialogMinimized: boolean = false;

    private listSubscription: any;
    private counterSubscription: any;
@@ -83,17 +80,17 @@ export class FileUploadingDialogComponent implements OnInit, OnDestroy {
    }

    /**
-     * Display and hide the dialog component.
+     * Toggle dialog visibility state.
     */
-    toggleShowDialog() {
+    toggleVisible(): void {
        this.isDialogActive = !this.isDialogActive;
    }

    /**
-     * Minimize and expand the dialog component.
+     * Toggle dialog minimized state.
     */
-    toggleDialogMinimize() {
-        this._isDialogMinimized = !this._isDialogMinimized;
+    toggleMinimized(): void {
+        this.isDialogMinimized = !this.isDialogMinimized;
    }

    ngOnDestroy() {
--- a/ng2-components/ng2-alfresco-upload/src/components/file-uploading-list.component.css
+++ b/ng2-components/ng2-alfresco-upload/src/components/file-uploading-list.component.css
@@ -42,7 +42,7 @@
    width: 100%;
 }
 :host .truncate {
-    margin-left: auto;
+    margin-left: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
--- a/ng2-components/ng2-alfresco-upload/src/components/file-uploading-list.component.html
+++ b/ng2-components/ng2-alfresco-upload/src/components/file-uploading-list.component.html
@@ -1,32 +1,38 @@
-<div [ngClass]="{hide:  isUploadCompleted()}" [ngClass]="{show:   !isUploadCompleted()}"
-     class="body-dialog-header">
+<div class="body-dialog-header" *ngIf="!isUploadCompleted()">
    <div class="body-dialog-action"></div>
-    <div class="body-dialog-cancel"><a data-automation-id="cancel_upload_all" href="#" (click)="cancelAllFiles($event)">{{'FILE_UPLOAD.BUTTON.CANCEL' | translate}}</a></div>
+    <div class="body-dialog-cancel">
+        <a data-automation-id="cancel_upload_all" href="#" (click)="cancelAllFiles($event)">{{'FILE_UPLOAD.BUTTON.CANCEL_ALL' | translate}}</a>
+    </div>
 </div>
 <table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
    <tr>
-        <th>{{'FILE_UPLOAD.FILE_INFO.NAME' | translate}}</th>
-        <th>{{'FILE_UPLOAD.FILE_INFO.PROGRESS' | translate}}</th>
-        <th class="mdl-cell--hide-phone size-column">{{'FILE_UPLOAD.FILE_INFO.SIZE' | translate}}</th>
-        <th>{{'FILE_UPLOAD.FILE_INFO.ACTION' | translate}}</th>
+        <th class="mdl-data-table__cell--non-numeric">{{'FILE_UPLOAD.FILE_INFO.NAME' | translate}}</th>
+        <th class="mdl-data-table__cell--non-numeric">{{'FILE_UPLOAD.FILE_INFO.PROGRESS' | translate}}</th>
+        <th class="mdl-data-table__cell--non-numeric mdl-cell--hide-phone size-column">{{'FILE_UPLOAD.FILE_INFO.SIZE' | translate}}</th>
+        <th class="mdl-data-table__cell--non-numeric">{{'FILE_UPLOAD.FILE_INFO.ACTION' | translate}}</th>
    </tr>
-    <tr *ngFor="let file of filesUploadingList" tabindex="0">
-        <td attr.data-automation-id="dialog_{{file.name}}" class="mdl-data-table__cell--non-numeric"><div class="truncate">{{file.name}}</div></td>
-        <td _ngcontent-hvq-3="">
-            <div _ngcontent-hvq-3="" class="mdl-progress mdl-js-progress is-upgraded" id="{{file.id}}"
-                 data-upgraded=",MaterialProgress">
+    <tr *ngFor="let file of files" tabindex="0">
+        <td class="mdl-data-table__cell--non-numeric" attr.data-automation-id="dialog_{{file.name}}">
+            <div class="truncate">{{file.name}}</div>
+        </td>
+        <td class="mdl-data-table__cell--non-numeric">
+            <div class="mdl-progress mdl-js-progress is-upgraded" id="{{file.id}}">
                <div class="progressbar bar bar1" attr.data-automation-id="dialog_progress_{{file.name}}" [style.width.%]="file.progress.percent"></div>
                <div class="bufferbar bar bar2" style="width: 100%;"></div>
                <div class="auxbar bar bar3" style="width: 0%;"></div>
            </div>
        </td>
        <td class="mdl-data-table__cell--non-numeric mdl-cell--hide-phone size-column" attr.data-automation-id="{{file.name}}_filesize">{{file.size}}</td>
-        <td>
-            <span *ngIf="file.done && !file.abort" ><i data-automation-id="done_icon" class="material-icons action-icons">done</i></span>
-            <span *ngIf="file.uploading" (click)="abort(file.id)" class="cursor" tabindex="0"><i data-automation-id="abort_cancel_upload"
-                                                                                     class="material-icons action-icons">
-                remove_circle_outline</i></span>
-            <span *ngIf="file.abort"><i class="material-icons action-icons" data-automation-id="upload_stopped" tabindex="0">remove_circle</i></span>
+        <td class="mdl-data-table__cell--non-numeric">
+            <span *ngIf="file.done && !file.abort">
+                <i data-automation-id="done_icon" class="material-icons action-icons">done</i>
+            </span>
+            <span *ngIf="file.uploading" (click)="cancelFileUpload(file)" class="cursor" tabindex="0">
+                <i data-automation-id="abort_cancel_upload" class="material-icons action-icons">remove_circle_outline</i>
+            </span>
+            <span *ngIf="file.abort">
+                <i class="material-icons action-icons" data-automation-id="upload_stopped" tabindex="0">remove_circle</i>
+            </span>
        </td>
    </tr>
 </table>
--- a/ng2-components/ng2-alfresco-upload/src/components/file-uploading-list.component.ts
+++ b/ng2-components/ng2-alfresco-upload/src/components/file-uploading-list.component.ts
@@ -15,11 +15,11 @@
 * limitations under the License.
 */

-import { Component, ElementRef, Input } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { FileModel } from '../models/file.model';

 /**
- * <alfresco-file-uploading-list [filesUploadingList]="FileModel[]" ></alfresco-file-uploading-list>
+ * <alfresco-file-uploading-list [files]="files"></alfresco-file-uploading-list>
 *
 * This component show a list of the uploading files contained in the filesUploadingList.
 *
@@ -37,31 +37,29 @@ import { FileModel } from '../models/file.model';
 export class FileUploadingListComponent {

    @Input()
-    filesUploadingList: FileModel [];
-
-    constructor(public el: ElementRef) {
-    }
+    files: FileModel[];

    /**
-     * Abort the in progress uploading of a specific file.
+     * Cancel file upload
     *
-     * @param {string} id - FileModel id of the file to abort.
+     * @param {FileModel} file File model to cancel upload for.
+     *
+     * @memberOf FileUploadingListComponent
     */
-    abort(id: string): void {
-        let file = this.filesUploadingList.filter((uploadingFileModel) => {
-            return uploadingFileModel.id === id;
-        });
-        file[0].emitAbort();
+    cancelFileUpload(file: FileModel): void {
+        if (file) {
+            file.emitAbort();
+        }
    }

    /**
     * Call the abort method for each file
     */
-    cancelAllFiles($event) {
-        if ($event) {
-            $event.preventDefault();
+    cancelAllFiles(event: Event): void {
+        if (event) {
+            event.preventDefault();
        }
-        this.filesUploadingList.forEach((uploadingFileModel: FileModel) => {
+        this.files.forEach((uploadingFileModel: FileModel) => {
            uploadingFileModel.emitAbort();
        });
    }
@@ -70,12 +68,12 @@ export class FileUploadingListComponent {
     * Verify if all the files are in state done or abort
     * @returns {boolean} - false if there is a file in progress
     */
-    isUploadCompleted() {
+    isUploadCompleted(): boolean {
        let isPending = false;
        let isAllCompleted = true;
-        for (let i = 0; i < this.filesUploadingList.length && !isPending; i++) {
-            let uploadingFileModel = this.filesUploadingList[i];
-            if (!uploadingFileModel.done && !uploadingFileModel.abort) {
+        for (let i = 0; i < this.files.length && !isPending; i++) {
+            let file = this.files[i];
+            if (!file.done && !file.abort) {
                isPending = true;
                isAllCompleted = false;
            }
--- a/ng2-components/ng2-alfresco-upload/src/components/upload-drag-area.component.html
+++ b/ng2-components/ng2-alfresco-upload/src/components/upload-drag-area.component.html
@@ -1,4 +1,4 @@
-<div file-draggable id='UploadBorder' class="upload-border"
+<div file-draggable id="UploadBorder" class="upload-border"
     (onFilesDropped)="onFilesDropped($event)"
     (onFilesEntityDropped)="onFilesEntityDropped($event)"
     (onFolderEntityDropped)="onFolderEntityDropped($event)"