From e1bfef256208d6740ea441801d96a664e779150e Mon Sep 17 00:00:00 2001
From: Dan Percic <dan@devplant.ro>
Date: Wed, 14 Jul 2021 11:59:01 +0300
Subject: [PATCH] working trash screen

---
 .../screens/trash/trash-screen.component.html | 11 ++------
 .../screens/trash/trash-screen.component.scss |  9 ++++---
 .../screens/trash/trash-screen.component.ts   | 13 +++++++--
 .../page-header/page-header.component.html    |  5 ++--
 .../modules/shared/services/search.service.ts | 27 +++++++++++--------
 5 files changed, 37 insertions(+), 28 deletions(-)

diff --git a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.html
index 995d027c0..9a09159fc 100644
--- a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.html
@@ -25,19 +25,12 @@
                 </span>
 
                 <redaction-circle-button
+                    (action)="bulkDelete()"
                     *ngIf="areSomeEntitiesSelected"
                     icon="red:trash"
                     [tooltip]="'trash.bulk.delete' | translate"
                     type="dark-bg"
                 ></redaction-circle-button>
-
-                <!--                <div class="actions flex-1">-->
-                <!--                    <redaction-input-with-action-->
-                <!--                        [form]="searchForm"-->
-                <!--                        [placeholder]="'trash.search' | translate"-->
-                <!--                        type="search"-->
-                <!--                    ></redaction-input-with-action>-->
-                <!--                </div>-->
             </div>
 
             <div
@@ -141,7 +134,7 @@
                     </div>
 
                     <div class="small-label">
-                        {{ entity.softDeletedTime | date: 'd MMM. yyyy' }}
+                        {{ entity.softDeletedTime | date: 'd MMM. yyyy hh:mm' }}
                     </div>
 
                     <div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.scss
index db5f61403..f7cb8f52a 100644
--- a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.scss
@@ -20,14 +20,15 @@ redaction-table-col-name::ng-deep {
                 > div:not(.scrollbar-placeholder) {
                     padding-left: 10px;
 
-                    .stats-subtitle {
-                        margin-top: 4px;
-                    }
-
                     .table-item-title {
                         max-width: 100%;
                     }
                 }
+
+                > div {
+                    height: 90px;
+                    padding: 0 24px;
+                }
             }
         }
 
diff --git a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts
index b7f82dddd..722dcb24e 100644
--- a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts
@@ -1,4 +1,4 @@
-import { Component, Injector, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Injector, OnInit } from '@angular/core';
 import { AppStateService } from '@state/app-state.service';
 import { PermissionsService } from '@services/permissions.service';
 import { Dossier, DossierTemplateModel } from '@redaction/red-ui-http';
@@ -15,6 +15,7 @@ import { DossiersService } from '../../../dossier/services/dossiers.service';
 @Component({
     templateUrl: './trash-screen.component.html',
     styleUrls: ['./trash-screen.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [FilterService, SearchService, ScreenStateService, SortingService, DossiersService]
 })
 export class TrashScreenComponent extends NewBaseListingComponent<Dossier> implements OnInit {
@@ -33,7 +34,6 @@ export class TrashScreenComponent extends NewBaseListingComponent<Dossier> imple
     ) {
         super(_injector);
         this._sortingService.setScreenName(ScreenNames.DOSSIER_LISTING);
-        this._searchService.setSearchKey('dossierName');
         this._screenStateService.setIdKey('dossierId');
     }
 
@@ -66,6 +66,15 @@ export class TrashScreenComponent extends NewBaseListingComponent<Dossier> imple
         this._loadingService.loadWhile(this._hardDelete(dossierId));
     }
 
+    async bulkDelete() {
+        this._loadingService.start();
+
+        const dossierIds = this._screenStateService.selectedEntitiesIds;
+        for (const dossierId of dossierIds) await this._hardDelete(dossierId);
+
+        this._loadingService.stop();
+    }
+
     trackById(index: number, dossier: Dossier): string {
         return dossier.dossierId;
     }
diff --git a/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html b/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html
index 4e2d0ac7d..ce63e7dbe 100644
--- a/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html
@@ -2,7 +2,7 @@
     <div *ngIf="pageLabel" class="breadcrumb">{{ pageLabel }}</div>
 
     <div class="filters" *ngIf="filters$ | async as filters">
-        <div translate="filters.filter-by"></div>
+        <div translate="filters.filter-by" *ngIf="filters.length"></div>
 
         <ng-container *ngFor="let config of filters; trackBy: trackByLabel">
             <redaction-popup-filter
@@ -16,6 +16,7 @@
         </ng-container>
 
         <redaction-input-with-action
+            *ngIf="searchService.isSearchNeeded"
             [form]="searchService.searchForm"
             [placeholder]="searchPlaceholder"
             type="search"
@@ -39,7 +40,7 @@
         ></redaction-icon-button>
     </ng-container>
 
-    <div class="actions" *ngIf="actionConfigs">
+    <div class="actions" *ngIf="showCloseButton || actionConfigs">
         <ng-container *ngFor="let config of actionConfigs; trackBy: trackByLabel">
             <redaction-circle-button
                 (action)="config.action($event)"
diff --git a/apps/red-ui/src/app/modules/shared/services/search.service.ts b/apps/red-ui/src/app/modules/shared/services/search.service.ts
index 3eb580fe4..49279535a 100644
--- a/apps/red-ui/src/app/modules/shared/services/search.service.ts
+++ b/apps/red-ui/src/app/modules/shared/services/search.service.ts
@@ -26,11 +26,18 @@ export class SearchService<T> {
     }
 
     executeSearchImmediately(): void {
-        const displayed = (
-            this._screenStateService.filteredEntities || this._screenStateService.entities
-        ).filter(entity => this._searchField(entity).toLowerCase().includes(this._searchValue));
+        const displayed =
+            this._screenStateService.filteredEntities || this._screenStateService.entities;
 
-        this._screenStateService.setDisplayedEntities(displayed);
+        if (!this._searchKey) {
+            return this._screenStateService.setDisplayedEntities(displayed);
+        }
+
+        this._screenStateService.setDisplayedEntities(
+            displayed.filter(entity =>
+                this._searchField(entity).toLowerCase().includes(this._searchValue)
+            )
+        );
         this._screenStateService.updateSelection();
     }
 
@@ -38,6 +45,10 @@ export class SearchService<T> {
         this._searchKey = value;
     }
 
+    get isSearchNeeded(): boolean {
+        return !!this._searchKey;
+    }
+
     get searchValue(): string {
         return this.searchForm.get('query').value;
     }
@@ -46,13 +57,7 @@ export class SearchService<T> {
         this.searchForm.reset({ query: '' });
     }
 
-    private get _getSearchKey(): string {
-        if (!this._searchKey) throw new Error('Not implemented');
-
-        return this._searchKey;
-    }
-
     protected _searchField(entity: T): string {
-        return entity[this._getSearchKey];
+        return entity[this._searchKey];
     }
 }