feat(core): implement upload-collection in fundamental-ngx

angular.json

@@ -4050,6 +4050,50 @@
           }
         }
       }
+    },
+    "core-upload-collection": {
+      "projectType": "library",
+      "root": "libs/core/src/lib/upload-collection",
+      "sourceRoot": "libs/core/src/lib/upload-collection",
+      "prefix": "fd",
+      "architect": {
+        "build": {
+          "builder": "@nrwl/angular:package",
+          "outputs": [
+            "dist/libs/core/upload-collection"
+          ],
+          "options": {
+            "tsConfig": "libs/core/src/lib/upload-collection/tsconfig.lib.json",
+            "project": "libs/core/src/lib/upload-collection/ng-package.json",
+            "updateBuildableProjectDepsInPackageJson": false
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "libs/core/src/lib/upload-collection/tsconfig.lib.prod.json"
+            }
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "libs/core/src/lib/upload-collection/test.ts",
+            "tsConfig": "libs/core/src/lib/upload-collection/tsconfig.spec.json",
+            "karmaConfig": "libs/core/src/lib/upload-collection/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "libs/core/src/lib/upload-collection/tsconfig.lib.json",
+              "libs/core/src/lib/upload-collection/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
     }
   },
   "defaultProject": "docs",

apps/docs/src/app/core/api-files.ts

@@ -383,4 +383,16 @@ export const API_FILES = {
         'ResizableCardLayoutComponent',
         'ResizableCardItemComponent'
     ],
+    uploadCollection: [
+        'UploadCollectionComponent',
+        'UploadCollectionButtonGroupComponent',
+        'UploadCollectionFormItemComponent',
+        'UploadCollectionItemDirective',
+        'UploadCollectionThumbnailDirective',
+        'UploadCollectionTitleDirective',
+        'UploadCollectionDescriptionDirective',
+        'UploadCollectionTextSeparatorDirective',
+        'UploadCollectionStatusGroupDirective',
+        'UploadCollectionTitleContainerDirective'
+    ]
 };

apps/docs/src/app/core/component-docs/upload-collection/examples/upload-collection-complex-example.component.html

@@ -0,0 +1,107 @@
+<fd-toolbar>
+    <label fd-toolbar-label>
+        <span fd-title>Uploads ({{ files.length }})</span>
+    </label>
+    <fd-toolbar-spacer></fd-toolbar-spacer>
+    <fd-file-uploader
+        #fileUploader
+        (selectedFilesChanged)="selectedFilesChanged($event)"
+        ariaLabel="Choose files"
+        ariaLabelledBy="Choose files"
+        placeholder="Choose Files to upload"
+        buttonLabel="Upload"
+        buttonAriaLabel="browse files"
+        [multiple]="true"
+        [compact]="true"
+        [inputHidden]="true"
+        [(ngModel)]="uploaderFiles"
+    >
+    </fd-file-uploader>
+    <button fd-button compact="true" [disabled]="getFilesSelected() === 0" (click)="alert('Download button clicked')">
+        Download
+    </button>
+    <button fd-button compact="true" [disabled]="getFilesSelected() < 2" (click)="deleteMultiple()">
+        Delete Multiple
+    </button>
+</fd-toolbar>
+
+<fd-upload-collection [selection]="true">
+    <li
+        fd-list-item
+        fd-upload-collection-item
+        *ngFor="let file of files"
+        [fileName]="file.fileName"
+        [extension]="file.extension"
+        (deleteClicked)="openDeleteDialog($event, file, deleteDialog)"
+        (fileNameChanged)="fileNameChanged($event)"
+        [selected]="file.selected"
+    >
+        <fd-checkbox [(ngModel)]="file.selected"></fd-checkbox>
+        <span fd-list-thumbnail fd-upload-collection-thumbnail><fd-icon [glyph]="file.icon"></fd-icon></span>
+        <div fd-list-content>
+            <div fd-upload-collection-title-container>
+                <a href="#" fd-link fd-list-title fd-upload-collection-title></a>
+                <fd-upload-collection-form-item></fd-upload-collection-form-item>
+                <span
+                    *ngIf="file.marker1"
+                    fd-object-marker
+                    [glyph]="file.marker1"
+                    title="Favorite"
+                    aria-label="Favorite Icon"
+                ></span>
+                <span
+                    *ngIf="file.marker2"
+                    fd-object-marker
+                    [glyph]="file.marker2"
+                    title="Flag"
+                    aria-label="Favorite Flag"
+                ></span>
+            </div>
+            <div fd-upload-collection-description>
+                This is the file description
+                <span fd-upload-collection-text-separator></span>
+                This is an additional description
+            </div>
+            <div fd-upload-collection-status-group>
+                <span
+                    fd-object-status
+                    status="negative"
+                    label="Negative Object Status"
+                    title="Object status Negative"
+                    aria-label="Object status Negative"
+                ></span>
+                <span fd-upload-collection-text-separator></span>
+                <span
+                    fd-object-status
+                    status="positive"
+                    label="Positive Object Status"
+                    title="Object status Positive"
+                    aria-label="Object status Positive"
+                ></span>
+            </div>
+        </div>
+        <fd-upload-collection-button-group></fd-upload-collection-button-group>
+    </li>
+</fd-upload-collection>
+
+<fd-message-page glyph="attachment" *ngIf="!files.length" style="margin-top: 30px">
+    <fd-message-page-title>No files found. </fd-message-page-title>
+    <fd-message-page-subtitle> Use the "Upload" button to upload files. </fd-message-page-subtitle>
+</fd-message-page>
+
+<ng-template let-dialog let-dialogConfig="dialogConfig" #deleteDialog>
+    <fd-dialog [dialogConfig]="dialogConfig" [dialogRef]="dialog">
+        <fd-dialog-header>
+            <h1 fd-title>Delete Confirmation</h1>
+        </fd-dialog-header>
+        <fd-dialog-body>
+            <p role="dialog">Are you sure you want to delete this file?</p>
+        </fd-dialog-body>
+
+        <fd-dialog-footer>
+            <fd-button-bar fdType="emphasized" label="Yes" [compact]="false" (click)="dialog.close('Yes')">
+            </fd-button-bar>
+            <fd-button-bar label="Cancel" [compact]="false" (click)="dialog.dismiss()"> </fd-button-bar>
+        </fd-dialog-footer>
+    </fd-dialog>
+</ng-template>

apps/docs/src/app/core/component-docs/upload-collection/examples/upload-collection-complex-example.component.ts

@@ -0,0 +1,89 @@
+import { Component, ContentChildren, Input, QueryList, TemplateRef, ViewChild } from '@angular/core';
+import { DialogService, FileUploaderComponent, UploadCollectionItemDirective } from '@fundamental-ngx/core';
+
+@Component({
+    selector: 'fd-upload-collection-complex-example',
+    templateUrl: './upload-collection-complex-example.component.html'
+})
+export class UploadCollectionComplexExampleComponent {
+    @Input()
+    uploaderFiles: File[];
+
+    searchTerm: string;
+
+    files = [
+        { fileName: 'File_Name_1', extension: 'txt', icon: 'activate', selected: false },
+        {
+            fileName: 'File_Name_2',
+            extension: 'jpg',
+            icon: 'calendar',
+            selected: false,
+            marker1: 'flag',
+            marker2: 'add-favorite'
+        },
+        { fileName: 'File_Name_3', extension: 'pdf', icon: 'customer', selected: false }
+    ];
+
+    @ContentChildren(UploadCollectionItemDirective, { descendants: true })
+    uploadCollectionItems: QueryList<UploadCollectionItemDirective>;
+
+    @ViewChild('fileUploader')
+    fileUploader: FileUploaderComponent;
+
+    constructor(private _dialogService: DialogService) {}
+
+    alert(message: string): void {
+        window.alert(message);
+    }
+
+    selectedFilesChanged(newFiles: File[]): void {
+        if (newFiles && newFiles.length) {
+            newFiles.forEach((file) => {
+                this.files.push({
+                    fileName: file.name.split('.')[0],
+                    extension: file.name.split('.')[1],
+                    icon: 'attachment',
+                    selected: false
+                });
+            });
+            this.uploaderFiles = [];
+            this.fileUploader.selectHandler([]);
+        }
+    }
+
+    openDeleteDialog(event: UploadCollectionItemDirective, file: any, dialog: TemplateRef<any>): void {
+        const dialogRef = this._dialogService.open(dialog, {
+            verticalPadding: false,
+            responsivePadding: true
+        });
+
+        dialogRef.afterClosed.subscribe((result) => {
+            if (result === 'Yes') {
+                this.deleteClicked(event, file);
+            }
+        });
+    }
+
+    fileNameChanged(event: UploadCollectionItemDirective): void {
+        window.alert('User has updated the file name to ' + event.fileName);
+    }
+
+    deleteClicked(event: UploadCollectionItemDirective, file: any): void {
+        window.alert('User has deleted the file ' + event.fileName + '.' + event.extension);
+        this.files.splice(this.files.indexOf(file), 1);
+    }
+
+    deleteMultiple(): void {
+        this.files = this.files.filter((file) => file.selected === false);
+    }
+
+    getFilesSelected(): number {
+        let foundSelected = 0;
+        this.files.forEach((file) => {
+            if (file.selected) {
+                foundSelected++;
+            }
+        });
+        return foundSelected;
+    }
+}

apps/docs/src/app/core/component-docs/upload-collection/examples/upload-collection-custom-example.component.html

@@ -0,0 +1,61 @@
+<fd-upload-collection>
+    <li
+        fd-list-item
+        fd-upload-collection-item
+        *ngFor="let file of files"
+        [fileName]="file.fileName"
+        [extension]="file.extension"
+        (deleteClicked)="deleteClicked($event, file)"
+        (fileNameChanged)="fileNameChanged($event)"
+    >
+        <span fd-list-thumbnail fd-upload-collection-thumbnail><fd-icon [glyph]="file.icon"></fd-icon></span>
+        <div fd-list-content>
+            <div fd-upload-collection-title-container>
+                <a href="#" fd-link fd-list-title fd-upload-collection-title></a>
+                <fd-upload-collection-form-item></fd-upload-collection-form-item>
+                <span
+                    *ngIf="file.marker1"
+                    fd-object-marker
+                    [glyph]="file.marker1"
+                    title="Favorite"
+                    aria-label="Favorite Icon"
+                ></span>
+                <span
+                    *ngIf="file.marker2"
+                    fd-object-marker
+                    [glyph]="file.marker2"
+                    title="Flag"
+                    aria-label="Favorite Flag"
+                ></span>
+            </div>
+            <div fd-upload-collection-description>
+                This is the file description
+                <span fd-upload-collection-text-separator></span>
+                This is an additional description
+            </div>
+            <div fd-upload-collection-status-group>
+                <span
+                    fd-object-status
+                    status="negative"
+                    label="Negative Object Status"
+                    title="Object status Negative"
+                    aria-label="Object status Negative"
+                ></span>
+                <span fd-upload-collection-text-separator></span>
+                <span
+                    fd-object-status
+                    status="positive"
+                    label="Positive Object Status"
+                    title="Object status Positive"
+                    aria-label="Object status Positive"
+                ></span>
+            </div>
+        </div>
+        <fd-upload-collection-button-group
+            [allowFileDeletion]="file.allowDelete"
+            [allowFileNameEdit]="file.allowEdit"
+            [disableFileDeletion]="file.disableDeletion"
+            [disableFileNameEdit]="file.disableEdit"
+        ></fd-upload-collection-button-group>
+    </li>
+</fd-upload-collection>

apps/docs/src/app/core/component-docs/upload-collection/examples/upload-collection-custom-example.component.ts

@@ -0,0 +1,42 @@
+import { Component, ContentChildren, QueryList } from '@angular/core';
+import { UploadCollectionItemDirective } from '@fundamental-ngx/core';
+
+@Component({
+    selector: 'fd-upload-collection-custom-example',
+    templateUrl: './upload-collection-custom-example.component.html'
+})
+export class UploadCollectionCustomExampleComponent {
+    files = [
+        {
+            fileName: 'File_Name_1',
+            extension: 'txt',
+            icon: 'activate',
+            allowEdit: false,
+            allowDelete: false,
+            marker1: 'flag',
+            marker2: 'add-favorite'
+        },
+        {
+            fileName: 'File_Name_2',
+            extension: 'jpg',
+            icon: 'calendar',
+            allowEdit: true,
+            allowDelete: true,
+            disableEdit: true,
+            disableDeletion: true
+        },
+        { fileName: 'File_Name_3', extension: 'pdf', icon: 'customer', allowEdit: true, allowDelete: false }
+    ];
+
+    @ContentChildren(UploadCollectionItemDirective, { descendants: true })
+    uploadCollectionItems: QueryList<UploadCollectionItemDirective>;
+
+    fileNameChanged(event: UploadCollectionItemDirective): void {
+        window.alert('User has updated the file name to ' + event.fileName);
+    }
+
+    deleteClicked(event: UploadCollectionItemDirective, file: any): void {
+        window.alert('User has deleted the file ' + event.fileName + '.' + event.extension);
+        this.files.splice(this.files.indexOf(file), 1);
+    }
+}

apps/docs/src/app/core/component-docs/upload-collection/examples/upload-collection-empty-example.component.html

@@ -0,0 +1,4 @@
+<fd-message-page glyph="attachment" *ngIf="!items.length">
+    <fd-message-page-title>No files found. </fd-message-page-title>
+    <fd-message-page-subtitle> Drop files to upload, or use the "+" button. </fd-message-page-subtitle>
+</fd-message-page>

apps/docs/src/app/core/component-docs/upload-collection/examples/upload-collection-empty-example.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'fd-upload-collection-empty-example',
+    templateUrl: './upload-collection-empty-example.component.html'
+})
+export class UploadCollectionEmptyExampleComponent {
+    items = [];
+}