add possible future configurability display mode document list and datatable (#2998)

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

@@ -11,7 +11,7 @@
             <adf-document-list
                 [currentFolderId]="'-recent-'"
                 locationFormat="/files"
-                [cardview]="true"
+                [display]="'gallery'"
                 [showHeader]="false"
                 [maxItems]="5"
                 (preview)="showFile($event)"
@@ -67,8 +67,9 @@
                     <button
                         mat-icon-button
                         title="{{ 'DOCUMENT_LIST.TOOLBAR.CARDVIEW' | translate }}"
-                        (click)="toogleCardview()">
+                        (click)="toogleGalleryView()">
-                        <mat-icon>view_comfy</mat-icon>
+                        <mat-icon *ngIf="displayMode === 'list'" >view_comfy</mat-icon>
+                        <mat-icon *ngIf="displayMode === 'gallery'">list</mat-icon>
                     </button>
                     <button
                         mat-icon-button
@@ -130,8 +131,9 @@
                 </button>
                 <mat-menu #menu="matMenu">
                     <button mat-menu-item
-                            (click)="toogleCardview()">
+                            (click)="toogleGalleryView()">
-                        <mat-icon>view_comfy</mat-icon>
+                        <mat-icon *ngIf="displayMode === 'list'" >view_comfy</mat-icon>
+                        <mat-icon *ngIf="displayMode === 'gallery'">list</mat-icon>
                         <span>{{ 'DOCUMENT_LIST.TOOLBAR.CARDVIEW' | translate }}</span>
                     </button>
                     <button mat-menu-item
@@ -171,7 +173,7 @@
                 [allowDropFiles]="true"
                 [selectionMode]="selectionMode"
                 [multiselect]="multiselect"
-                [cardview]="cardview"
+                [display]="displayMode"
                 [node]="nodeResult"
                 (error)="onNavigationError($event)"
                 (success)="resetError()"

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

@@ -21,12 +21,19 @@ import {
 } from '@angular/core';
 import { MatDialog } from '@angular/material';
 import { ActivatedRoute, Params, Router } from '@angular/router';
-import { MinimalNodeEntity, NodePaging, Pagination, PathElementEntity, MinimalNodeEntryEntity, SiteEntry } from 'alfresco-js-api';
+import {
+    MinimalNodeEntity,
+    NodePaging,
+    Pagination,
+    PathElementEntity,
+    MinimalNodeEntryEntity,
+    SiteEntry
+} from 'alfresco-js-api';
 import {
     AuthenticationService, ContentService, TranslationService,
     FileUploadEvent, FolderCreatedEvent, LogService, NotificationService,
     UploadService, DataColumn, DataRow, UserPreferencesService,
-    PaginationComponent, FormValues
+    PaginationComponent, FormValues, DisplayMode
 } from '@alfresco/adf-core';
 
 import { DocumentListComponent, PermissionStyleModel } from '@alfresco/adf-content-services';
@@ -50,7 +57,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
     fileNodeId: any;
     showViewer = false;
     showVersions = false;
-    cardview = false;
+    displayMode = DisplayMode.List;
 
     toolbarColor = 'default';
 
@@ -441,7 +448,11 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
         this.turnedPreviousPage.emit(event);
     }
 
-    toogleCardview(event: Pagination): void {
+    toogleGalleryView(): void {
-        this.cardview = !this.cardview;
+        if (this.displayMode === DisplayMode.List) {
+            this.displayMode = DisplayMode.Gallery;
+        } else {
+            this.displayMode = DisplayMode.List;
+        }
     }
 }

docs/datatable.component.md

@@ -138,7 +138,7 @@ export class DataTableDemo {
 | allowDropFiles | boolean | false | Toggle file drop support for rows (see **ng2-alfresco-core/UploadDirective** for more details) |
 | loading | boolean | false | Flag that indicates if the datatable is in loading state and needs to show the loading template. Read the documentation above to see how to configure a loading template |
 | showHeader | boolean | true | Toggles header visibility |
-| cardview | boolean | true | enable the cardview mode |
+| display | string | 'list' | change the display mode can be one of the values provided by the enum : **list**, **gallery** |
 | selection | DataRow\[] | \[] | Contains selected rows |
     
 ### Events
@@ -205,7 +205,7 @@ If you want enable the card view mode you need to set to true the input paramete
 ```html
 <adf-datatable
     [data]="data"
-    [cardview]="true">
+    [display]="'gallery'">
 </adf-datatable
 ```
 

docs/document-list.component.md

@@ -79,7 +79,7 @@ Displays the documents from a repository.
 | skipCount | `number` | `0` | Number of elements to skip over for pagination purposes  |
 | enableInfiniteScrolling | `boolean` | `false` | Set document list to work in infinite scrolling mode  |
 | showHeader | `boolean` | `true` |  Toggles header visibility   |
-| cardview | `boolean` | `false` |  Enable the cardview mode    |
+| display | string | 'list' | change the display mode can be one of the values provided by the enum : **list**, **gallery** |
 
 ### Events
 
@@ -141,7 +141,7 @@ If you want enable the card view mode you need to set to true the input paramete
 ```html
 <adf-document-list
     [currentFolderId]="'-my-'"
-    [cardview]="true">
+    [display]="'gallery'">
 </adf-document-list>
 ```
 

lib/content-services/document-list/components/document-list.component.html

@@ -9,7 +9,7 @@
     [rowStyle]="rowStyle"
     [rowStyleClass]="rowStyleClass"
     [loading]="loading"
-    [cardview]="cardview"
+    [display]="display"
     [noPermission]="noPermission"
     [showHeader]="!isEmpty() && showHeader"
     (showRowContextMenu)="onShowRowContextMenu($event)"

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

@@ -220,7 +220,7 @@ describe('DocumentList', () => {
     });
 
     it('should use the cardview style if cardview is true', (done) => {
-        documentList.cardview = true;
+        documentList.display = 'gallery';
 
         fixture.detectChanges();
 
@@ -232,7 +232,7 @@ describe('DocumentList', () => {
     });
 
     it('should use the base document list style if cardview is false', (done) => {
-        documentList.cardview = false;
+        documentList.display = 'list';
 
         fixture.detectChanges();
 

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

@@ -21,6 +21,7 @@ import {
     DataRowActionEvent,
     DataSorting,
     DataTableComponent,
+    DisplayMode,
     ObjectDataColumn,
     PaginatedComponent,
     PaginationQueryParams
@@ -71,9 +72,9 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
 
     @ContentChild(DataColumnListComponent) columnList: DataColumnListComponent;
 
-    /* Enable the cardview mode */
+    /* change the display mode of the table list or gallery */
     @Input()
-    cardview: boolean = false;
+    display: string = DisplayMode.List;
 
     /** Define a set of CSS styles styles to apply depending on the permission
      * of the user on that node. See the Permission Style model

lib/core/datatable/components/datatable/datatable.component.html

@@ -1,9 +1,9 @@
 <div
-    *ngIf="data" class="full-width adf-data-table-card"
+    *ngIf="data" class="full-width"
-    [class.adf-data-table-card]="cardview"
+    [class.adf-data-table-card]="display === 'gallery'"
-    [class.adf-data-table]="!cardview">
+    [class.adf-data-table]="display === 'list'">
     <div *ngIf="showHeader && !loading" class="adf-datatable-header">
-        <div class="adf-datatable-row" *ngIf="!cardview">
+        <div class="adf-datatable-row" *ngIf="display === 'list'">
             <!-- Actions (left) -->
             <div *ngIf="actions && actionsPosition === 'left'" class="actions-column adf-datatable-table-cell-header">
                 <span class="sr-only">Actions</span>
@@ -31,7 +31,7 @@
                 <span class="sr-only">Actions</span>
             </div>
         </div>
-        <mat-form-field *ngIf="cardview">
+        <mat-form-field *ngIf="display === 'gallery'">
             <mat-select [value]="getSortingKey()">
                 <mat-option *ngFor="let col of getSortableColumns()"
                             [value]="col.key"
@@ -174,8 +174,8 @@
 
             </div>
             <div *ngIf="data.getRows().length === 0"
-                 [class.adf-datatable-row]="!cardview"
+                 [class.adf-datatable-row]="display === 'list'"
-                 [class.adf-data-table-card-empty]="cardview">
+                 [class.adf-data-table-card-empty]="display === 'gallery'">
                 <div class="adf-no-content-container adf-datatable-table-cell"
                      [attr.colspan]="1 + data.getColumns().length">
                     <ng-template *ngIf="noContentTemplate"
@@ -187,8 +187,8 @@
             </div>
         </ng-container>
         <div *ngIf="!loading && noPermission"
-             [class.adf-datatable-row]="!cardview"
+             [class.adf-datatable-row]="display === 'list'"
-             [class.adf-data-table-card-permissions]="cardview">
+             [class.adf-data-table-card-permissions]="display === 'gallery'">
              class="adf-no-permission__row">
             <div class="adf-no-permission__cell adf-no-content-container adf-datatable-table-cell">
                 <ng-template *ngIf="noPermissionTemplate"
@@ -198,8 +198,8 @@
             </div>
         </div>
         <div *ngIf="loading"
-             [class.adf-datatable-row]="!cardview"
+             [class.adf-datatable-row]="display === 'list'"
-             [class.adf-data-table-card-loading]="cardview">
+             [class.adf-data-table-card-loading]="display === 'gallery'">
             <div class="adf-datatable-table-cell"
                  [attr.colspan]="1 + data.getColumns().length">
                 <ng-template *ngIf="loadingTemplate"

lib/core/datatable/components/datatable/datatable.component.spec.ts

@@ -60,7 +60,7 @@ describe('DataTable', () => {
             [new ObjectDataColumn({ key: 'name' })]
         );
 
-        dataTable.cardview = true;
+        dataTable.display = 'gallery';
         dataTable.ngOnChanges({
             data: new SimpleChange(null, newData, false)
         });
@@ -80,7 +80,7 @@ describe('DataTable', () => {
             [new ObjectDataColumn({ key: 'name' })]
         );
 
-        dataTable.cardview = false;
+
         dataTable.ngOnChanges({
             data: new SimpleChange(null, newData, false)
         });

lib/core/datatable/components/datatable/datatable.component.ts

@@ -38,6 +38,11 @@ import 'rxjs/add/operator/debounceTime';
 import 'rxjs/add/operator/buffer';
 import 'rxjs/add/operator/filter';
 
+export enum DisplayMode {
+    List = 'list',
+    Gallery = 'gallery'
+}
+
 @Component({
     selector: 'adf-datatable',
     styleUrls: ['./datatable.component.scss'],
@@ -53,9 +58,9 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck
     @Input()
     data: DataTableAdapter;
 
-    /* Enable the cardview mode */
+    /* change the display mode of the table list or gallery */
     @Input()
-    cardview: boolean = false;
+    display: string = DisplayMode.List;
 
     /* The rows that the datatable will show */
     @Input()