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

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"
-    [class.adf-data-table-card]="cardview"
-    [class.adf-data-table]="!cardview">
+    *ngIf="data" class="full-width"
+    [class.adf-data-table-card]="display === 'gallery'"
+    [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-data-table-card-empty]="cardview">
+                 [class.adf-datatable-row]="display === 'list'"
+                 [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-data-table-card-permissions]="cardview">
+             [class.adf-datatable-row]="display === 'list'"
+             [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-data-table-card-loading]="cardview">
+             [class.adf-datatable-row]="display === 'list'"
+             [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()