[ADF-2322] Card view datatable and documentlist (#2968)

* move table in style * Enable the cardview mode * add button in demo shell to change view add missing translation terms toolbar * missing comma * add example in demo shell * style loading and images * border card container * document list tests * test check class and input * test fix * fix test process services * more documentation * rirpristinate base pacakge integgration * remove test color
2025-07-24 17:32:15 +00:00 · 2018-02-21 09:57:01 +00:00
parent ff887772e3
commit 62d5dd1b30
25 changed files with 699 additions and 273 deletions
--- a/demo-shell/resources/i18n/en.json
+++ b/demo-shell/resources/i18n/en.json
@@ -43,6 +43,7 @@
        "DESCRIPTION_UPLOAD" : "Enable upload",
        "ENABLE_INFINITE_SCROLL":"Enable Infinite Scrolling",
        "MULTISELECT_DESCRIPTION" : "Use Cmd (Mac) or Ctrl (Windows) to toggle selection of multiple items",
+        "RECENT" : "Recent Files",
        "COLUMNS": {
            "DISPLAY_NAME": "Display name",
            "TAG": "Tag",
@@ -50,6 +51,13 @@
            "CREATED_ON": "Created on",
            "CREATED": "Created"
        },
+         "TOOLBAR": {
+           "CARDVIEW":"Card view mode",
+           "NEW_FOLDER":"New folder",
+           "EDIT_FOLDER":"Edit folder",
+           "DOWNLOAD":"Download",
+           "DELETE":"Delete"
+         },
        "ACTIONS": {
            "DOWNLOAD": "Download",
            "FOLDER": {
--- a/demo-shell/src/app/components/files/files.component.html
+++ b/demo-shell/src/app/components/files/files.component.html
@@ -1,15 +1,33 @@
 <div class="container">
+
+    <div class="adf-recent-container">
+        <mat-list>
+            <mat-list-item><mat-icon>history</mat-icon>{{ 'DOCUMENT_LIST.RECENT' | translate }}</mat-list-item>
+            <mat-divider></mat-divider>
+        </mat-list>
+
+        <adf-document-list
+            [currentFolderId]="'-recent-'"
+            locationFormat="/files"
+            [cardview]="true"
+            [showHeader]="false"
+            [maxItems]="5"
+            (preview)="showFile($event)"
+            selectionMode="null">
+        </adf-document-list>
+    </div>
+
    <div class="adf-site-container-style" id="site-container">
        <adf-sites-dropdown (change)="getSiteContent($event)" [hideMyFiles]="false">
        </adf-sites-dropdown>
    </div>
    <div class="document-list-container" fxLayout="row" fxLayoutAlign="start stretch" fxLayoutGap="16px">
        <adf-upload-drag-area fxFlex="1 1 auto"
-            [disabled]="disableDragArea"
-            [parentId]="getDocumentListCurrentFolderId()"
-            [versioning]="versioning"
-            [adf-node-permission]="'create'"
-            [adf-nodes]="disableDragArea ? getCurrentDocumentListNode() : []">
+                              [disabled]="disableDragArea"
+                              [parentId]="getDocumentListCurrentFolderId()"
+                              [versioning]="versioning"
+                              [adf-node-permission]="'create'"
+                              [adf-nodes]="disableDragArea ? getCurrentDocumentListNode() : []">
            <div *ngIf="errorMessage" class="error-message">
                <button (click)="resetError()" mat-icon-button>
                    <mat-icon>highlight_off</mat-icon>
@@ -35,26 +53,35 @@
                <adf-toolbar-divider fxFlex="0 0 auto"></adf-toolbar-divider>

                <div fxFlex="0 0 auto" class="adf-document-action-buttons" fxShow fxHide.lt-sm="true">
+                    <button
+                        mat-icon-button
+                        title="{{ 'DOCUMENT_LIST.TOOLBAR.CARDVIEW' | translate }}"
+                        (click)="toogleCardview()">
+                        <mat-icon>view_comfy</mat-icon>
+                    </button>
                    <button
                        mat-icon-button
                        [disabled]="!canCreateContent(documentList.folderNode)"
+                        title="{{ 'DOCUMENT_LIST.TOOLBAR.NEW_FOLDER' | translate }}"
                        [adf-create-folder]="getDocumentListCurrentFolderId()">
                        <mat-icon>create_new_folder</mat-icon>
                    </button>
                    <button mat-icon-button
                            [disabled]="!canEditFolder(documentList.selection)"
+                            title="{{ 'DOCUMENT_LIST.TOOLBAR.EDIT_FOLDER' | translate }}"
                            [adf-edit-folder]="documentList.selection[0]?.entry">
                        <mat-icon>create</mat-icon>
                    </button>
                    <button mat-icon-button
                            [disabled]="!hasSelection(documentList.selection)"
-                            title="Download"
+                            title="{{ 'DOCUMENT_LIST.TOOLBAR.DOWNLOAD' | translate }}"
                            [adfNodeDownload]="documentList.selection">
                        <mat-icon>get_app</mat-icon>
                    </button>
                    <button mat-icon-button
                            adf-node-permission="delete"
                            [adf-nodes]="documentList.selection"
+                            title="{{ 'DOCUMENT_LIST.TOOLBAR.DELETE' | translate }}"
                            (delete)="documentList.reload()"
                            [adf-delete]="documentList.selection">
                        <mat-icon>delete</mat-icon>
@@ -91,29 +118,34 @@
                    <mat-icon>more_vert</mat-icon>
                </button>
                <mat-menu #menu="matMenu">
+                    <button mat-menu-item
+                            (click)="toogleCardview()">
+                        <mat-icon>view_comfy</mat-icon>
+                        <span>{{ 'DOCUMENT_LIST.TOOLBAR.CARDVIEW' | translate }}</span>
+                    </button>
                    <button mat-menu-item
                            [adf-create-folder]="getDocumentListCurrentFolderId()">
                        <mat-icon>create_new_folder</mat-icon>
-                        <span>New folder</span>
+                        <span>{{ 'DOCUMENT_LIST.TOOLBAR.NEW_FOLDER' | translate }}</span>
                    </button>
                    <button mat-menu-item
                            [disabled]="!canEditFolder(documentList.selection)"
                            [adf-edit-folder]="documentList.selection[0]?.entry">
                        <mat-icon>create</mat-icon>
-                        <span>Edit folder</span>
+                        <span>{{ 'DOCUMENT_LIST.TOOLBAR.EDIT_FOLDER' | translate }}</span>
                    </button>
                    <button mat-menu-item
                            [disabled]="!hasSelection(documentList.selection)"
                            title="Download"
                            (click)="downloadNodes(documentList.selection)">
                        <mat-icon>get_app</mat-icon>
-                        <span>Download</span>
+                        <span>{{ 'DOCUMENT_LIST.TOOLBAR.DOWNLOAD' | translate }}</span>
                    </button>
                    <button mat-menu-item
                            adf-node-permission="delete"
                            [adf-nodes]="documentList.selection">
                        <mat-icon>delete</mat-icon>
-                        <span>Delete</span>
+                        <span>{{ 'DOCUMENT_LIST.TOOLBAR.DELETE' | translate }}</span>
                    </button>
                </mat-menu>
            </adf-toolbar>
@@ -128,6 +160,7 @@
                [allowDropFiles]="true"
                [selectionMode]="selectionMode"
                [multiselect]="multiselect"
+                [cardview]="cardview"
                [node]="nodeResult"
                (error)="onNavigationError($event)"
                (success)="resetError()"
@@ -276,13 +309,13 @@
                <ng-template #choose_document_template>
                    <div class="adf-manage-versions-empty">
                        <mat-icon class="adf-manage-versions-empty-icon">face</mat-icon>
-                      {{'VERSION.CHOOSE_FILE' | translate}}
+                        {{'VERSION.CHOOSE_FILE' | translate}}
                    </div>
                </ng-template>
                <ng-template #no_permission_to_versions>
                    <div class="adf-manage-versions-no-permission">
                        <mat-icon class="adf-manage-versions-no-permission-icon">warning</mat-icon>
-                      {{'VERSION.NO_PERMISSION' | translate}}
+                        {{'VERSION.NO_PERMISSION' | translate}}
                    </div>
                </ng-template>
            </div>
@@ -292,7 +325,7 @@

 <context-menu-holder></context-menu-holder>

-<div *ngIf="processId" >
+<div *ngIf="processId">
    <adf-start-process
        [values]="formValues"
        [appId]="processId">
@@ -338,9 +371,9 @@
        </section>

        <section>
-          <mat-slide-toggle [color]="'primary'" [(ngModel)]="maxSizeShow">{{'DOCUMENT_LIST.MAX_SIZE' |
-            translate}}
-          </mat-slide-toggle>
+            <mat-slide-toggle [color]="'primary'" [(ngModel)]="maxSizeShow">{{'DOCUMENT_LIST.MAX_SIZE' |
+                translate}}
+            </mat-slide-toggle>
        </section>

        <section>
@@ -358,15 +391,15 @@
        <h5>Upload</h5>
        <section *ngIf="acceptedFilesTypeShow">
            <mat-form-field floatPlaceholder="float">
-                <input  matInput
-                        placeholder="Extension accepted"
-                        [(ngModel)]="acceptedFilesType"
-                        data-automation-id="accepted-files-type">
+                <input matInput
+                       placeholder="Extension accepted"
+                       [(ngModel)]="acceptedFilesType"
+                       data-automation-id="accepted-files-type">
            </mat-form-field>
        </section>
        <section *ngIf="maxSizeShow">
            <mat-form-field>
-                <input matInput type="number"  placeholder="Max file size" [(ngModel)]="maxFilesSize"
+                <input matInput type="number" placeholder="Max file size" [(ngModel)]="maxFilesSize"
                       data-automation-id="max-files-size">
            </mat-form-field>
        </section>
--- a/demo-shell/src/app/components/files/files.component.scss
+++ b/demo-shell/src/app/components/files/files.component.scss
@@ -30,8 +30,8 @@ adf-document-list ::ng-deep adf-datatable tr.document-list__disable {
    background: red !important;
 }

-adf-document-list ::ng-deep adf-datatable > table > tbody > tr.is-selected > td.adf-data-table-cell.adf-data-table-cell--image.image-table-cell > div > div > mat-icon > svg {
-    fill: #00bcd4;
+adf-document-list ::ng-deep .adf-datatable-selected > svg {
+    fill: #00bcd4 !important;
 }

 .adf-site-container-style {
@@ -116,6 +116,10 @@ adf-document-list ::ng-deep adf-datatable > table > tbody > tr.is-selected > td.
    letter-spacing: -1px;
 }

+.adf-recent-container{
+    border: 1px solid rgba(0, 0, 0, 0.07);
+}
+
@media (max-width: $minimumDocumentListWidth) {
    adf-document-list ::ng-deep adf-datatable  {
        & ::ng-deep .adf-data-table-cell--fileSize {
--- a/demo-shell/src/app/components/files/files.component.ts
+++ b/demo-shell/src/app/components/files/files.component.ts
@@ -49,6 +49,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
    fileNodeId: any;
    showViewer = false;
    showVersions = false;
+    cardview = false;

    toolbarColor = 'default';

@@ -423,4 +424,8 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
    onPrevPage(event: Pagination): void {
        this.turnedPreviousPage.emit(event);
    }
+
+    toogleCardview(event: Pagination): void {
+        this.cardview = !this.cardview;
+    }
 }
--- a/demo-shell/tsconfig.json
+++ b/demo-shell/tsconfig.json
@@ -18,14 +18,6 @@
    "lib": [
      "es2016",
      "dom"
-    ],
-    "paths": {
-      "rxjs/*": [
-        "../node_modules/rxjs/*"
-      ],
-      "@angular/*": [
-        "../node_modules/@angular/*"
-      ]
-    }
+    ]
  }
 }