From e5bc3bb755403f9b289fdd1cf3608ca3a3bdc580 Mon Sep 17 00:00:00 2001
From: Suzana Dirla <dirla.silvia.suzana@gmail.com>
Date: Thu, 5 Jul 2018 14:29:30 +0300
Subject: [PATCH] [ACA-1490] Enable CardView (#491)

* integrate carview

* experimental cardview

* fix tests

* fix spellcheck error
---
 cspell.json                                               | 3 ++-
 src/app.config.json                                       | 3 ++-
 src/app/components/favorites/favorites.component.html     | 6 ++++++
 src/app/components/favorites/favorites.component.spec.ts  | 4 +++-
 src/app/components/files/files.component.html             | 6 ++++++
 src/app/components/files/files.component.spec.ts          | 4 +++-
 src/app/components/libraries/libraries.component.html     | 7 +++++++
 src/app/components/page.component.ts                      | 8 +++++++-
 .../components/recent-files/recent-files.component.html   | 6 ++++++
 .../recent-files/recent-files.component.spec.ts           | 4 +++-
 src/app/components/settings/settings.component.html       | 7 +++++++
 src/app/components/settings/settings.component.ts         | 8 ++++++++
 .../components/shared-files/shared-files.component.html   | 6 ++++++
 .../shared-files/shared-files.component.spec.ts           | 4 +++-
 src/app/components/trashcan/trashcan.component.html       | 6 ++++++
 src/app/components/trashcan/trashcan.component.spec.ts    | 4 +++-
 src/assets/i18n/en.json                                   | 4 ++++
 17 files changed, 82 insertions(+), 8 deletions(-)

diff --git a/cspell.json b/cspell.json
index 6401bf8bd..fec81a42b 100644
--- a/cspell.json
+++ b/cspell.json
@@ -36,7 +36,8 @@
         "tooltip",
         "tooltips",
         "unindent",
-        "exif"
+        "exif",
+        "cardview"
     ],
     "dictionaries": [
         "html"
diff --git a/src/app.config.json b/src/app.config.json
index 7d6ef8fba..c5b410bf8 100644
--- a/src/app.config.json
+++ b/src/app.config.json
@@ -10,7 +10,8 @@
     },
     "experimental": {
         "libraries": false,
-        "comments": false
+        "comments": false,
+        "cardview": false
     },
     "headerColor": "#2196F3",
     "languagePicker": false,
diff --git a/src/app/components/favorites/favorites.component.html b/src/app/components/favorites/favorites.component.html
index 330b340d9..113755bba 100644
--- a/src/app/components/favorites/favorites.component.html
+++ b/src/app/components/favorites/favorites.component.html
@@ -3,6 +3,12 @@
         <adf-breadcrumb root="APP.BROWSE.FAVORITES.TITLE">
         </adf-breadcrumb>
 
+        <button *ifExperimental="'cardview'"
+            mat-icon-button
+            (click)="toggleGalleryView()">
+            <mat-icon *ngIf="displayMode === 'list'" matTooltip="{{ 'APP.DOCUMENT_LIST.TOOLBAR.CARDVIEW' | translate }}">view_comfy</mat-icon>
+            <mat-icon *ngIf="displayMode === 'gallery'" matTooltip="{{ 'APP.DOCUMENT_LIST.TOOLBAR.LISTVIEW' | translate }}">list</mat-icon>
+        </button>
         <adf-toolbar class="inline" *ngIf="!selection.isEmpty">
 
             <button
diff --git a/src/app/components/favorites/favorites.component.spec.ts b/src/app/components/favorites/favorites.component.spec.ts
index ae27594cd..67076d2cd 100644
--- a/src/app/components/favorites/favorites.component.spec.ts
+++ b/src/app/components/favorites/favorites.component.spec.ts
@@ -38,6 +38,7 @@ import { ContentManagementService } from '../../common/services/content-manageme
 import { FavoritesComponent } from './favorites.component';
 import { AppTestingModule } from '../../testing/app-testing.module';
 import { ContentApiService } from '../../services/content-api.service';
+import { ExperimentalDirective } from '../../directives/experimental.directive';
 
 describe('FavoritesComponent', () => {
     let fixture: ComponentFixture<FavoritesComponent>;
@@ -85,7 +86,8 @@ describe('FavoritesComponent', () => {
                     NodeFavoriteDirective,
                     DocumentListComponent,
                     FavoritesComponent,
-                    AppConfigPipe
+                    AppConfigPipe,
+                    ExperimentalDirective
                 ],
                 schemas: [ NO_ERRORS_SCHEMA ]
         });
diff --git a/src/app/components/files/files.component.html b/src/app/components/files/files.component.html
index 56515fd14..4bfdfe6c2 100644
--- a/src/app/components/files/files.component.html
+++ b/src/app/components/files/files.component.html
@@ -6,6 +6,12 @@
             (navigate)="onBreadcrumbNavigate($event)">
         </adf-breadcrumb>
 
+        <button *ifExperimental="'cardview'"
+            mat-icon-button
+            (click)="toggleGalleryView()">
+            <mat-icon *ngIf="displayMode === 'list'" matTooltip="{{ 'APP.DOCUMENT_LIST.TOOLBAR.CARDVIEW' | translate }}">view_comfy</mat-icon>
+            <mat-icon *ngIf="displayMode === 'gallery'" matTooltip="{{ 'APP.DOCUMENT_LIST.TOOLBAR.LISTVIEW' | translate }}">list</mat-icon>
+        </button>
         <adf-toolbar class="inline" *ngIf="!selection.isEmpty">
             <button
                 color="primary"
diff --git a/src/app/components/files/files.component.spec.ts b/src/app/components/files/files.component.spec.ts
index 88868b150..07ddab203 100644
--- a/src/app/components/files/files.component.spec.ts
+++ b/src/app/components/files/files.component.spec.ts
@@ -38,6 +38,7 @@ import { NodeActionsService } from '../../common/services/node-actions.service';
 import { FilesComponent } from './files.component';
 import { AppTestingModule } from '../../testing/app-testing.module';
 import { ContentApiService } from '../../services/content-api.service';
+import { ExperimentalDirective } from '../../directives/experimental.directive';
 
 describe('FilesComponent', () => {
     let node;
@@ -67,7 +68,8 @@ describe('FilesComponent', () => {
                 NodeFavoriteDirective,
                 DocumentListComponent,
                 FileSizePipe,
-                AppConfigPipe
+                AppConfigPipe,
+                ExperimentalDirective
             ],
             providers: [
                 { provide: ActivatedRoute, useValue: {
diff --git a/src/app/components/libraries/libraries.component.html b/src/app/components/libraries/libraries.component.html
index 133da22a2..f46f6a0d1 100644
--- a/src/app/components/libraries/libraries.component.html
+++ b/src/app/components/libraries/libraries.component.html
@@ -2,6 +2,13 @@
     <div class="inner-layout__header">
         <adf-breadcrumb root="APP.BROWSE.LIBRARIES.TITLE">
         </adf-breadcrumb>
+
+        <button *ifExperimental="'cardview'"
+            mat-icon-button
+            (click)="toggleGalleryView()">
+            <mat-icon *ngIf="displayMode === 'list'" matTooltip="{{ 'APP.DOCUMENT_LIST.TOOLBAR.CARDVIEW' | translate }}">view_comfy</mat-icon>
+            <mat-icon *ngIf="displayMode === 'gallery'" matTooltip="{{ 'APP.DOCUMENT_LIST.TOOLBAR.LISTVIEW' | translate }}">list</mat-icon>
+        </button>
         <adf-toolbar class="inline" *ngIf="!selection.isEmpty">
             <ng-container *ifExperimental="'libraries'">
                 <button
diff --git a/src/app/components/page.component.ts b/src/app/components/page.component.ts
index 765612193..6b7d360c6 100644
--- a/src/app/components/page.component.ts
+++ b/src/app/components/page.component.ts
@@ -24,7 +24,7 @@
  */
 
 import { DocumentListComponent, ShareDataRow } from '@alfresco/adf-content-services';
-import { FileUploadErrorEvent } from '@alfresco/adf-core';
+import { DisplayMode, FileUploadErrorEvent } from '@alfresco/adf-core';
 import { OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { MinimalNodeEntity, MinimalNodeEntryEntity } from 'alfresco-js-api';
@@ -46,6 +46,7 @@ export abstract class PageComponent implements OnInit, OnDestroy {
     infoDrawerOpened = false;
     node: MinimalNodeEntryEntity;
     selection: SelectionState;
+    displayMode = DisplayMode.List;
 
     protected subscriptions: Subscription[] = [];
 
@@ -134,4 +135,9 @@ export abstract class PageComponent implements OnInit, OnDestroy {
 
         this.store.dispatch(action);
     }
+
+    toggleGalleryView(): void {
+        this.displayMode = this.displayMode === DisplayMode.List ? DisplayMode.Gallery : DisplayMode.List;
+        this.documentList.display = this.displayMode;
+    }
 }
diff --git a/src/app/components/recent-files/recent-files.component.html b/src/app/components/recent-files/recent-files.component.html
index 0196a3a92..e7d0cc5bb 100644
--- a/src/app/components/recent-files/recent-files.component.html
+++ b/src/app/components/recent-files/recent-files.component.html
@@ -3,6 +3,12 @@
         <adf-breadcrumb root="APP.BROWSE.RECENT.TITLE">
         </adf-breadcrumb>
 
+        <button *ifExperimental="'cardview'"
+            mat-icon-button
+            (click)="toggleGalleryView()">
+            <mat-icon *ngIf="displayMode === 'list'" matTooltip="{{ 'APP.DOCUMENT_LIST.TOOLBAR.CARDVIEW' | translate }}">view_comfy</mat-icon>
+            <mat-icon *ngIf="displayMode === 'gallery'" matTooltip="{{ 'APP.DOCUMENT_LIST.TOOLBAR.LISTVIEW' | translate }}">list</mat-icon>
+        </button>
         <adf-toolbar class="inline" *ngIf="!selection.isEmpty">
 
             <button
diff --git a/src/app/components/recent-files/recent-files.component.spec.ts b/src/app/components/recent-files/recent-files.component.spec.ts
index 1f7865044..7313beb40 100644
--- a/src/app/components/recent-files/recent-files.component.spec.ts
+++ b/src/app/components/recent-files/recent-files.component.spec.ts
@@ -34,6 +34,7 @@ import { ContentManagementService } from '../../common/services/content-manageme
 
 import { RecentFilesComponent } from './recent-files.component';
 import { AppTestingModule } from '../../testing/app-testing.module';
+import { ExperimentalDirective } from '../../directives/experimental.directive';
 
 describe('RecentFilesComponent', () => {
     let fixture: ComponentFixture<RecentFilesComponent>;
@@ -63,7 +64,8 @@ describe('RecentFilesComponent', () => {
                     NodeFavoriteDirective,
                     DocumentListComponent,
                     RecentFilesComponent,
-                    AppConfigPipe
+                    AppConfigPipe,
+                    ExperimentalDirective
                 ],
                 schemas: [ NO_ERRORS_SCHEMA ]
         });
diff --git a/src/app/components/settings/settings.component.html b/src/app/components/settings/settings.component.html
index 1e2a554ed..d07618fa8 100644
--- a/src/app/components/settings/settings.component.html
+++ b/src/app/components/settings/settings.component.html
@@ -73,5 +73,12 @@
                 Comments
             </mat-checkbox>
         </div>
+        <div>
+            <mat-checkbox
+                [(ngModel)]="cardview"
+                (change)="onChangeCardviewFeature($event)">
+                Cardview
+            </mat-checkbox>
+        </div>
     </mat-expansion-panel>
 </mat-accordion>
diff --git a/src/app/components/settings/settings.component.ts b/src/app/components/settings/settings.component.ts
index ae4de7c52..50b5d6eaa 100644
--- a/src/app/components/settings/settings.component.ts
+++ b/src/app/components/settings/settings.component.ts
@@ -50,6 +50,7 @@ export class SettingsComponent implements OnInit {
     languagePicker$: Observable<boolean>;
     libraries: boolean;
     comments: boolean;
+    cardview: boolean;
 
     constructor(
         private store: Store<AppStore>,
@@ -78,6 +79,9 @@ export class SettingsComponent implements OnInit {
 
         const comments = this.appConfig.get('experimental.comments');
         this.comments = (comments === true || comments === 'true');
+
+        const cardview = this.appConfig.get('experimental.cardview');
+        this.cardview = (cardview === true || cardview === 'true');
     }
 
     apply(model: any, isValid: boolean) {
@@ -105,4 +109,8 @@ export class SettingsComponent implements OnInit {
     onChangeCommentsFeature(event: MatCheckboxChange) {
         this.storage.setItem('experimental.comments', event.checked.toString());
     }
+
+    onChangeCardviewFeature(event: MatCheckboxChange) {
+        this.storage.setItem('experimental.cardview', event.checked.toString());
+    }
 }
diff --git a/src/app/components/shared-files/shared-files.component.html b/src/app/components/shared-files/shared-files.component.html
index 8e74cdcf2..b1f346efc 100644
--- a/src/app/components/shared-files/shared-files.component.html
+++ b/src/app/components/shared-files/shared-files.component.html
@@ -3,6 +3,12 @@
         <adf-breadcrumb root="APP.BROWSE.SHARED.TITLE">
         </adf-breadcrumb>
 
+        <button *ifExperimental="'cardview'"
+            mat-icon-button
+            (click)="toggleGalleryView()">
+            <mat-icon *ngIf="displayMode === 'list'" matTooltip="{{ 'APP.DOCUMENT_LIST.TOOLBAR.CARDVIEW' | translate }}">view_comfy</mat-icon>
+            <mat-icon *ngIf="displayMode === 'gallery'" matTooltip="{{ 'APP.DOCUMENT_LIST.TOOLBAR.LISTVIEW' | translate }}">list</mat-icon>
+        </button>
         <adf-toolbar class="inline" *ngIf="!selection.isEmpty">
             <button
                 *ngIf="selection.count === 1"
diff --git a/src/app/components/shared-files/shared-files.component.spec.ts b/src/app/components/shared-files/shared-files.component.spec.ts
index 4cd743077..690d95db7 100644
--- a/src/app/components/shared-files/shared-files.component.spec.ts
+++ b/src/app/components/shared-files/shared-files.component.spec.ts
@@ -33,6 +33,7 @@ import { DocumentListComponent } from '@alfresco/adf-content-services';
 import { ContentManagementService } from '../../common/services/content-management.service';
 import { SharedFilesComponent } from './shared-files.component';
 import { AppTestingModule } from '../../testing/app-testing.module';
+import { ExperimentalDirective } from '../../directives/experimental.directive';
 
 describe('SharedFilesComponent', () => {
     let fixture: ComponentFixture<SharedFilesComponent>;
@@ -61,7 +62,8 @@ describe('SharedFilesComponent', () => {
                     NodeFavoriteDirective,
                     DocumentListComponent,
                     SharedFilesComponent,
-                    AppConfigPipe
+                    AppConfigPipe,
+                    ExperimentalDirective
                 ],
                 schemas: [ NO_ERRORS_SCHEMA ]
             });
diff --git a/src/app/components/trashcan/trashcan.component.html b/src/app/components/trashcan/trashcan.component.html
index 33406bf59..e0f38f48b 100644
--- a/src/app/components/trashcan/trashcan.component.html
+++ b/src/app/components/trashcan/trashcan.component.html
@@ -3,6 +3,12 @@
         <adf-breadcrumb root="APP.BROWSE.TRASHCAN.TITLE">
         </adf-breadcrumb>
 
+        <button *ifExperimental="'cardview'"
+            mat-icon-button
+            (click)="toggleGalleryView()">
+            <mat-icon *ngIf="displayMode === 'list'" matTooltip="{{ 'APP.DOCUMENT_LIST.TOOLBAR.CARDVIEW' | translate }}">view_comfy</mat-icon>
+            <mat-icon *ngIf="displayMode === 'gallery'" matTooltip="{{ 'APP.DOCUMENT_LIST.TOOLBAR.LISTVIEW' | translate }}">list</mat-icon>
+        </button>
         <adf-toolbar class="inline" *ngIf="!selection.isEmpty">
             <button
                 color="primary"
diff --git a/src/app/components/trashcan/trashcan.component.spec.ts b/src/app/components/trashcan/trashcan.component.spec.ts
index 111b3a632..e7e16dd70 100644
--- a/src/app/components/trashcan/trashcan.component.spec.ts
+++ b/src/app/components/trashcan/trashcan.component.spec.ts
@@ -33,6 +33,7 @@ import { DocumentListComponent } from '@alfresco/adf-content-services';
 import { ContentManagementService } from '../../common/services/content-management.service';
 import { TrashcanComponent } from './trashcan.component';
 import { AppTestingModule } from '../../testing/app-testing.module';
+import { ExperimentalDirective } from '../../directives/experimental.directive';
 
 describe('TrashcanComponent', () => {
     let fixture: ComponentFixture<TrashcanComponent>;
@@ -60,7 +61,8 @@ describe('TrashcanComponent', () => {
                 NodeFavoriteDirective,
                 DocumentListComponent,
                 TrashcanComponent,
-                AppConfigPipe
+                AppConfigPipe,
+                ExperimentalDirective
             ],
             schemas: [ NO_ERRORS_SCHEMA ]
         });
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index a9dfa968d..28407ce06 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -146,6 +146,10 @@
                 "SHARED_BY": "Shared by",
                 "DELETED_ON": "Deleted",
                 "DELETED_BY": "Deleted by"
+            },
+            "TOOLBAR": {
+                "CARDVIEW": "Card view mode",
+                "LISTVIEW": "List view mode"
             }
         },
         "SITES_VISIBILITY": {