fix gallery view sort drop down empty values (#2990)

restore recent in main pace
trashcan example demo shell add multi select

demo-shell/resources/i18n/en.json

@@ -61,7 +61,12 @@
         "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",
+        "RECENT" : {
+          "EMPTY_STATE": {
+            "TITLE": "Recent is empty"
+          },
+          "TITLE":"Recent Files"
+        },
         "COLUMNS": {
             "DISPLAY_NAME": "Display name",
             "TAG": "Tag",

demo-shell/src/app/app.component.scss

@@ -0,0 +1,35 @@
+.empty-list {
+    .adf-data-table {
+        height: 100%;
+
+        tr:hover, tr:focus {
+            cursor: default;
+        }
+    }
+
+    &__block {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        p {
+            line-height: 0;
+        }
+    }
+
+    &__title {
+        font-size: 18px;
+        font-weight: 600;
+    }
+
+    &__subtitle {
+        font-size: 14px;
+        font-weight: 300;
+    }
+
+    &__block > mat-icon {
+        font-size: 52px;
+        height: 52px;
+        width: 52px;
+    }
+}

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

@@ -22,7 +22,7 @@ import { SettingsService, PageTitleService, StorageService, TranslationService }
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css'],
+  styleUrls: ['./app.component.scss'],
   encapsulation: ViewEncapsulation.None
 })
 export class AppComponent {

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

@@ -8,17 +8,6 @@
             </mat-select>
         </mat-form-field>
     </adf-toolbar-title>
-
-    <div fxFlex="0 1 auto" class="adf-document-action-buttons" fxShow fxHide.lt-sm="true">
-        <button mat-icon-button
-                (restore)="documentList.reload()"
-                [disabled]="!documentList.selection.length"
-                *ngIf="selectedSource === '-trashcan-'"
-                location="/files"
-                [adf-restore]="documentList.selection">
-            <mat-icon>restore</mat-icon>
-        </button>
-    </div>
 </adf-toolbar>
 <adf-document-list
     [currentFolderId]="selectedSource"

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

@@ -1,5 +1,33 @@
 <div class="container">
 
+    <mat-accordion class="adf-container-recent">
+        <mat-expansion-panel  hideToggle="true">
+            <mat-expansion-panel-header >
+                <mat-panel-title>
+                    {{ 'DOCUMENT_LIST.RECENT.TITLE' | translate }}<mat-icon>history</mat-icon>
+                </mat-panel-title>
+            </mat-expansion-panel-header>
+
+            <adf-document-list
+                [currentFolderId]="'-sharedlinks-'"
+                locationFormat="/files"
+                [cardview]="true"
+                [showHeader]="false"
+                [maxItems]="5"
+                (preview)="showFile($event)"
+                selectionMode="null">
+                <empty-folder-content>
+                    <ng-template>
+                        <div class="empty-list__block">
+                            <mat-icon>history</mat-icon>
+                            <p class="empty-list__title">{{ 'DOCUMENT_LIST.RECENT.EMPTY_STATE.TITLE' | translate}}</p>
+                        </div>
+                    </ng-template>
+                </empty-folder-content>
+            </adf-document-list>
+        </mat-expansion-panel>
+    </mat-accordion>
+
     <div class="adf-site-container-style" id="site-container">
         <adf-sites-dropdown (change)="getSiteContent($event)" [hideMyFiles]="false">
         </adf-sites-dropdown>

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

@@ -19,7 +19,7 @@ $minimumDocumentListWidth: 425px;
 }
 
 .adf-not-overlay-viewer {
-    height:900px;
+    height: 900px;
 }
 
 adf-document-list ::ng-deep adf-datatable tr.document-list__create {
@@ -108,7 +108,7 @@ adf-document-list ::ng-deep .adf-datatable-selected > svg {
     margin-bottom: 20px;
 }
 
-.adf-no-result-message{
+.adf-no-result-message {
     height: 32px;
     opacity: 0.26;
     font-size: 24px;
@@ -116,12 +116,23 @@ adf-document-list ::ng-deep .adf-datatable-selected > svg {
     letter-spacing: -1px;
 }
 
-.adf-recent-container{
+.adf-container-recent {
-    border: 1px solid rgba(0, 0, 0, 0.07);
+    mat-icon {
+        margin-left: 20px;
+    }
+
+    .empty-list__block {
+        height: 100%;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
 }
 
 @media (max-width: $minimumDocumentListWidth) {
-    adf-document-list ::ng-deep adf-datatable  {
+    adf-document-list ::ng-deep adf-datatable {
         & ::ng-deep .adf-data-table-cell--fileSize {
             display: none;
         }

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

@@ -17,25 +17,27 @@
             <button
                 mat-icon-button
                 (selection-node-restored)="refresh()"
+                (restore)="documentList.reload()"
                 [adf-restore]="documentList.selection"
                 *ngIf="documentList.selection.length"
                 title="{{ 'TRASHCAN.ACTIONS.RESTORE' | translate }}">
                 <mat-icon>restore</mat-icon>
-           </button>
+            </button>
         </adf-toolbar>
     </div>
 
     <div class="inner-layout__content">
 
         <adf-document-list #documentList
-            [attr.class]="documentList.isEmpty() ? 'empty-list' : ''"
+                           [attr.class]="documentList.isEmpty() ? 'empty-list' : ''"
-            currentFolderId="-trashcan-"
+                           currentFolderId="-trashcan-"
-            selectionMode="multiple"
+                           selectionMode="multiple"
-            [navigate]="false"
+                           [multiselect]="true"
-            locationFormat="/files"
+                           [navigate]="false"
-            [sorting]="[ 'archivedAt', 'desc' ]"
+                           locationFormat="/files"
-            [contextMenuActions]="true"
+                           [sorting]="[ 'archivedAt', 'desc' ]"
-            [contentActions]="false">
+                           [contextMenuActions]="true"
+                           [contentActions]="false">
 
             <empty-folder-content>
                 <ng-template>
@@ -90,7 +92,7 @@
 
         </adf-document-list>
         <adf-pagination [ngClass]="{ 'no-border' : documentList.isEmpty()}"
-            [target]="documentList">
+                        [target]="documentList">
         </adf-pagination>
     </div>
 </div>

demo-shell/src/app/components/trashcan/trashcan.component.scss

@@ -1,35 +0,0 @@
-.empty-list {
-    .adf-data-table {
-        height: 100%;
-
-        tr:hover, tr:focus {
-            cursor: default;
-        }
-    }
-
-    &__block {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-
-        p {
-            line-height: 0;
-        }
-    }
-
-    &__title {
-        font-size: 18px;
-        font-weight: 600;
-    }
-
-    &__subtitle {
-        font-size: 14px;
-        font-weight: 300;
-    }
-
-    &__block > mat-icon {
-        font-size: 52px;
-        height: 52px;
-        width: 52px;
-    }
-}

demo-shell/src/app/material.module.ts

@@ -26,7 +26,8 @@ import {
     MatCardModule,
     MatListModule,
     MatMenuModule,
-    MatToolbarModule
+    MatToolbarModule,
+    MatExpansionModule
 } from '@angular/material';
 
 const MATERIAL_MODULES = [
@@ -39,7 +40,8 @@ const MATERIAL_MODULES = [
     MatCardModule,
     MatListModule,
     MatMenuModule,
-    MatToolbarModule
+    MatToolbarModule,
+    MatExpansionModule
 ];
 
 @NgModule({

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

@@ -33,7 +33,7 @@
         </div>
         <mat-form-field *ngIf="cardview">
             <mat-select [value]="getSortingKey()">
-                <mat-option *ngFor="let col of data.getColumns()"
+                <mat-option *ngFor="let col of getSortableColumns()"
                             [value]="col.key"
                             (click)="onColumnHeaderClick(col)"
                             (keyup.enter)="onColumnHeaderClick(col)">

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

@@ -524,6 +524,12 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck
         return null;
     }
 
+    getSortableColumns() {
+        return this.data.getColumns().filter((currentColum) => {
+            return currentColum.sortable === true;
+        });
+    }
+
     private emitRowSelectionEvent(name: string, row: DataRow) {
         const domEvent = new CustomEvent(name, {
             detail: {