docs(core): upload-collection - add range selection to the example (S…

…AP#7761)
Riskiff · Feb 22, 2022 · 37f0bd5 · 37f0bd5
1 parent 929a53c
commit 37f0bd5
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 8 deletions.
diff --git a/...omponent-docs/upload-collection/examples/upload-collection-complex-example.component.html b/...omponent-docs/upload-collection/examples/upload-collection-complex-example.component.html
@@ -29,14 +29,14 @@
     <li
         fd-list-item
         fd-upload-collection-item
-        *ngFor="let file of files"
+        *ngFor="let file of files; let idx = index"
         [fileName]="file.fileName"
         [extension]="file.extension"
         (deleteClicked)="openDeleteDialog($event, file, deleteDialog)"
         (fileNameChanged)="fileNameChanged($event)"
         [selected]="file.selected"
     >
-        <fd-checkbox [(ngModel)]="file.selected"></fd-checkbox>
+        <fd-checkbox [(ngModel)]="file.selected" (click)="onCheckboxClick(file, idx, $event)"></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>

diff --git a/.../component-docs/upload-collection/examples/upload-collection-complex-example.component.ts b/.../component-docs/upload-collection/examples/upload-collection-complex-example.component.ts
@@ -2,6 +2,16 @@ import { Component, ContentChildren, Input, QueryList, TemplateRef, ViewChild }
 import { DialogService } from '@fundamental-ngx/core/dialog';
 import { FileUploaderComponent } from '@fundamental-ngx/core/file-uploader';
 import { UploadCollectionItemDirective } from '@fundamental-ngx/core/upload-collection';
+import { RangeSelector } from '@fundamental-ngx/core/utils';
+
+interface FileItem {
+    fileName: string;
+    extension: string;
+    icon: string;
+    selected: boolean;
+    marker1?: string;
+    marker2?: string;
+}
 
 @Component({
     selector: 'fd-upload-collection-complex-example',
@@ -13,7 +23,7 @@ export class UploadCollectionComplexExampleComponent {
 
     searchTerm: string;
 
-    files = [
+    files: FileItem[] = [
         { fileName: 'File_Name_1', extension: 'txt', icon: 'activate', selected: false },
         {
             fileName: 'File_Name_2',
@@ -32,6 +42,8 @@ export class UploadCollectionComplexExampleComponent {
     @ViewChild('fileUploader')
     fileUploader: FileUploaderComponent;
 
+    private readonly _rangeSelector = new RangeSelector();
+
     constructor(private _dialogService: DialogService) {}
 
     alert(message: string): void {
@@ -53,6 +65,13 @@ export class UploadCollectionComplexExampleComponent {
         }
     }
 
+    onCheckboxClick(file: FileItem, index: number, event: PointerEvent): void {
+        // additionally to ngModel tracking clicks on checkboxes in order to be able to select ranges
+        // this function will be invoked after ngModel's value is updated, so we can use "file.selected" as current value
+        this._rangeSelector.onRangeElementToggled(index, event);
+        this._rangeSelector.applyValueToEachInRange((idx) => (this.files[idx].selected = file.selected));
+    }
+
     openDeleteDialog(event: UploadCollectionItemDirective, file: any, dialog: TemplateRef<any>): void {
         const dialogRef = this._dialogService.open(dialog, {
             verticalPadding: false,

diff --git a/.../docs/src/app/core/component-docs/upload-collection/upload-collection-docs.component.html b/.../docs/src/app/core/component-docs/upload-collection/upload-collection-docs.component.html
@@ -1,4 +1,4 @@
-<h2>Upload Collection</h2>
+<fd-docs-section-title id="default" componentName="upload-collection"> Upload Collection</fd-docs-section-title>
 <description
     >Use the Upload Collection component to display a list of uploads and allow the user to perform actions on the files
     in that list, such as file name changes or item deletion. <br /><br />
@@ -15,7 +15,9 @@ <h2>Upload Collection</h2>
 
 <separator></separator>
 
-<h2>Upload Collection - Small Mode</h2>
+<fd-docs-section-title id="small-mode" componentName="upload-collection">
+    Upload Collection - Small Mode</fd-docs-section-title
+>
 <description
     >Use the <code>[small]</code> input in addition to a narrower wrapping container for the small upload
     collection.</description
@@ -27,7 +29,9 @@ <h2>Upload Collection - Small Mode</h2>
 
 <separator></separator>
 
-<h2>Upload Collection - Customization</h2>
+<fd-docs-section-title id="customization" componentName="upload-collection">
+    Upload Collection - Customization</fd-docs-section-title
+>
 <description
     >Functionality of the upload collection can be customized by removing the file edit/delete buttons, or disabling
     them. In this example, the first item has no customization options. The second item disables the edit and delete
@@ -40,7 +44,9 @@ <h2>Upload Collection - Customization</h2>
 </component-example>
 <code-example [exampleFiles]="uploadCollectionCustom"></code-example>
 
-<h2>Upload Collection - Complex Example</h2>
+<fd-docs-section-title id="complex" componentName="upload-collection">
+    Upload Collection - Complex Example</fd-docs-section-title
+>
 <description>
     The upload collection can be used along with a variety of other components such as the file uploader, toolbar,
     dialog, button, search input, sorting/filtering functionality etc. to facilitate a smooth user experience. Here in
@@ -53,7 +59,9 @@ <h2>Upload Collection - Complex Example</h2>
 
 <separator></separator>
 
-<h2>Upload Collection - No Data</h2>
+<fd-docs-section-title id="no-data" componentName="upload-collection">
+    Upload Collection - No Data</fd-docs-section-title
+>
 <description>Use a message page component when the user has yet to upload any files.</description>
 <component-example>
     <fd-upload-collection-empty-example></fd-upload-collection-empty-example>