[ADF-2340] add trashcan in demo shell and definitely delete in delete directive (#2976)

* add trashcan in demo shell and definetly delete in delete directive

* fix delte directive test

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

@@ -29,6 +29,7 @@ import { FormViewerComponent } from './components/process-service/form-viewer.co
 import { FormNodeViewerComponent } from './components/process-service/form-node-viewer.component';
 import { AppsViewComponent } from './components/process-service/apps-view.component';
 import { DataTableComponent } from './components/datatable/datatable.component';
+import { TrashcanComponent } from './components/trashcan/trashcan.component';
 import { FilesComponent } from './components/files/files.component';
 import { FileViewComponent } from './components/file-view/file-view.component';
 import { WebscriptComponent } from './components/webscript/webscript.component';
@@ -78,6 +79,7 @@ import { SharedLinkViewComponent } from './components/shared-link-view/shared-li
         DataTableComponent,
         FilesComponent,
         FileViewComponent,
+        TrashcanComponent,
         FormComponent,
         FormListComponent,
         WebscriptComponent,

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

@@ -30,6 +30,7 @@ import { FormNodeViewerComponent } from './components/process-service/form-node-
 import { AppsViewComponent } from './components/process-service/apps-view.component';
 import { SearchResultComponent } from './components/search/search-result.component';
 import { SearchExtendedComponent } from './components/search/search-extended.component';
+import { TrashcanComponent } from './components/trashcan/trashcan.component';
 
 import { DataTableComponent } from './components/datatable/datatable.component';
 import { WebscriptComponent } from './components/webscript/webscript.component';
@@ -65,8 +66,12 @@ export const appRoutes: Routes = [
             {
                 path: 'home',
                 component: HomeComponent
-            }
-            ,
+            },
+            {
+                path: 'trashcan',
+                component: TrashcanComponent,
+                canActivate: [AuthGuardEcm]
+            },
             {
                 path: 'files',
                 component: FilesComponent,

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

@@ -30,6 +30,7 @@ export class AppLayoutComponent {
     links: Array<any> = [
         { href: '/home', icon: 'home', title: 'APP_LAYOUT.HOME' },
         { href: '/files', icon: 'folder_open', title: 'APP_LAYOUT.CONTENT_SERVICES' },
+        { href: '/trashcan', icon: 'delete', title: 'APP_LAYOUT.TRASHCAN' },
         { href: '/activiti', icon: 'device_hub', title: 'APP_LAYOUT.PROCESS_SERVICES' },
         { href: '/login', icon: 'vpn_key', title: 'APP_LAYOUT.LOGIN' },
         { href: '/dl-custom-sources', icon: 'extension', title: 'APP_LAYOUT.CUSTOM_SOURCES' },

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

@@ -199,7 +199,7 @@
                     -->
                     <data-column
                         key="content.sizeInBytes"
-                        title="Size"
+                        title="{{'DOCUMENT_LIST.COLUMNS.SIZE' | translate}}"
                         type="fileSize">
                     </data-column>
                     <!-- Notes: has performance overhead due to multiple files/folders causing separate HTTP calls to get tags -->

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

@@ -0,0 +1,96 @@
+<div class="inner-layout">
+    <div class="inner-layout__header">
+        <adf-breadcrumb [root]="'APP_LAYOUT.TRASHCAN' | translate">
+        </adf-breadcrumb>
+
+        <adf-toolbar class="inline">
+            <button
+                mat-icon-button
+                [adf-delete]="documentList.selection"
+                (delete)="documentList.reload()"
+                [permanent]="true"
+                *ngIf="documentList.selection.length"
+                title="{{ 'TRASHCAN.ACTIONS.DELETE_PERMANENT' | translate }}">
+                <mat-icon>delete_forever</mat-icon>
+            </button>
+
+            <button
+                mat-icon-button
+                (selection-node-restored)="refresh()"
+                [adf-restore]="documentList.selection"
+                *ngIf="documentList.selection.length"
+                title="{{ 'TRASHCAN.ACTIONS.RESTORE' | translate }}">
+                <mat-icon>restore</mat-icon>
+           </button>
+        </adf-toolbar>
+    </div>
+
+    <div class="inner-layout__content">
+
+        <adf-document-list #documentList
+            [attr.class]="documentList.isEmpty() ? 'empty-list' : ''"
+            currentFolderId="-trashcan-"
+            selectionMode="multiple"
+            [navigate]="false"
+            locationFormat="/files"
+            [sorting]="[ 'archivedAt', 'desc' ]"
+            [contextMenuActions]="true"
+            [contentActions]="false">
+
+            <empty-folder-content>
+                <ng-template>
+                    <div class="empty-list__block">
+                        <mat-icon>delete</mat-icon>
+                        <p class="empty-list__title">{{ 'TRASHCAN.EMPTY_STATE.TITLE' | translate }}</p>
+                        <p class="empty-list__text">{{ 'TRASHCAN.EMPTY_STATE.FIRST_TEXT' | translate }}</p>
+                        <p class="empty-list__text">{{ 'TRASHCAN.EMPTY_STATE.SECOND_TEXT' | translate }}</p>
+                    </div>
+                </ng-template>
+            </empty-folder-content>
+
+            <data-columns>
+
+                <data-column
+                    key="$thumbnail"
+                    type="image"
+                    [sortable]="false"
+                    class="image-table-cell">
+                </data-column>
+
+                <data-column
+                    class="adf-data-table-cell--ellipsis__name"
+                    key="name"
+                    title="DOCUMENT_LIST.COLUMNS.DISPLAY_NAME">
+                    <ng-template let-value="value" let-context>
+                        <span class="adf-datatable-cell" title="{{ context?.row?.obj | adfNodeNameTooltip }}">{{ value }}</span>
+                    </ng-template>
+                </data-column>
+
+                <data-column
+                    key="content.sizeInBytes"
+                    title="DOCUMENT_LIST.COLUMNS.SIZE"
+                    type="fileSize">
+                </data-column>
+
+                <data-column
+                    key="archivedAt"
+                    title="DOCUMENT_LIST.COLUMNS.DELETED_ON">
+                    <ng-template let-value="value">
+                        <span title="{{ value | date:'medium' }}">{{ value | adfTimeAgo }}</span>
+                    </ng-template>
+                </data-column>
+
+                <data-column
+                    class="adf-data-table-cell--ellipsis"
+                    key="archivedByUser.displayName"
+                    title="DOCUMENT_LIST.COLUMNS.DELETED_BY">
+                </data-column>
+
+            </data-columns>
+
+        </adf-document-list>
+        <adf-pagination [ngClass]="{ 'no-border' : documentList.isEmpty()}"
+            [target]="documentList">
+        </adf-pagination>
+    </div>
+</div>

demo-shell/src/app/components/trashcan/trashcan.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/components/trashcan/trashcan.component.ts

@@ -0,0 +1,43 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2017 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Component, ViewChild } from '@angular/core';
+import { DocumentListComponent } from '@alfresco/adf-content-services';
+
+@Component({
+    templateUrl: './trashcan.component.html',
+    styleUrls: ['trashcan.component.scss']
+})
+export class TrashcanComponent {
+
+    @ViewChild(DocumentListComponent)
+    documentList;
+
+    refresh() {
+        this.documentList.loadTrashcan();
+        this.documentList.resetSelection();
+    }
+
+}