From 6c117f9f3e66d92aeef2039a09ff33732c01826b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Mon, 2 Nov 2020 15:23:28 +0200
Subject: [PATCH] More sorting

---
 .../components/sorting/sorting.component.ts   | 30 ++++++-------------
 .../project-listing-screen.component.html     | 17 ++++++-----
 .../project-listing-screen.component.ts       | 22 +++++++-------
 .../project-overview-screen.component.html    |  4 +++
 .../project-overview-screen.component.ts      |  2 +-
 apps/red-ui/src/assets/i18n/en.json           |  8 -----
 6 files changed, 35 insertions(+), 48 deletions(-)

diff --git a/apps/red-ui/src/app/components/sorting/sorting.component.ts b/apps/red-ui/src/app/components/sorting/sorting.component.ts
index 8cea9ef94..c49a538eb 100644
--- a/apps/red-ui/src/app/components/sorting/sorting.component.ts
+++ b/apps/red-ui/src/app/components/sorting/sorting.component.ts
@@ -6,28 +6,16 @@ export class SortingOption {
     column: string;
 }
 
-const SORTING_OPTIONS = {
+const SORTING_OPTIONS: { [key: string]: SortingOption[] } = {
+    'project-listing': [
+        { label: 'sorting.recent.label', order: 'desc', column: 'projectDate' },
+        { label: 'sorting.alphabetically.label', order: 'asc', column: 'project.projectName' }
+    ],
     'project-overview': [
-        {
-            label: 'sorting.recent.label',
-            order: 'desc',
-            column: 'added'
-        },
-        {
-            label: 'sorting.alphabetically.label',
-            order: 'asc',
-            column: 'filename'
-        },
-        {
-            label: 'sorting.number-of-pages.label',
-            order: 'asc',
-            column: 'numberOfPages'
-        },
-        {
-            label: 'sorting.number-of-analyses.label',
-            order: 'desc',
-            column: 'numberOfAnalyses'
-        }
+        { label: 'sorting.recent.label', order: 'desc', column: 'added' },
+        { label: 'sorting.alphabetically.label', order: 'asc', column: 'filename' },
+        { label: 'sorting.number-of-pages.label', order: 'asc', column: 'numberOfPages' },
+        { label: 'sorting.number-of-analyses.label', order: 'desc', column: 'numberOfAnalyses' }
     ]
 };
 
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
index eeb8b2417..6938c8a87 100644
--- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
+++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
@@ -74,13 +74,12 @@
                     [class.active]="bulkSelectActive"
                     (click)="toggleBulkSelect()"
                 ></div>
-                <mat-form-field appearance="none" class="red-select">
-                    <mat-select [(ngModel)]="sortingOption" panelClass="red-select-panel">
-                        <mat-option *ngFor="let option of sortingOptions" [value]="option">
-                            {{ option.label | translate }}
-                        </mat-option>
-                    </mat-select>
-                </mat-form-field>
+
+                <redaction-sorting
+                    #sortingComponent
+                    (optionChanged)="sortingOptionChanged($event)"
+                    type="project-listing"
+                ></redaction-sorting>
             </div>
         </div>
 
@@ -89,6 +88,10 @@
 
             <redaction-table-col-name
                 label="project-listing.table-col-names.name.label"
+                column="project.projectName"
+                [activeSortingOption]="sortingOption"
+                [withSort]="true"
+                (toggleSort)="sortingComponent.toggleSort($event)"
             ></redaction-table-col-name>
 
             <redaction-table-col-name
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts
index 7bd9698dd..3d6863f0b 100644
--- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts
+++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { Project } from '@redaction/red-ui-http';
 import { AppStateService, ProjectWrapper } from '../../state/app-state.service';
 import { UserService } from '../../user/user.service';
@@ -7,7 +7,7 @@ import { groupBy, humanize } from '../../utils/functions';
 import { DialogService } from '../../dialogs/dialog.service';
 import { FilterModel } from '../../common/filter/model/filter.model';
 import * as moment from 'moment';
-import { SortingOption } from '../../components/sorting/sorting.component';
+import { SortingComponent, SortingOption } from '../../components/sorting/sorting.component';
 
 @Component({
     selector: 'redaction-project-listing-screen',
@@ -19,15 +19,7 @@ export class ProjectListingScreenComponent implements OnInit {
 
     public projectsChartData: DoughnutChartConfig[] = [];
     public documentsChartData: DoughnutChartConfig[] = [];
-    public sortingOptions: SortingOption[] = [
-        { label: 'project-listing.sorting.recent.label', order: 'desc', column: 'projectDate' },
-        {
-            label: 'project-listing.sorting.alphabetically.label',
-            order: 'asc',
-            column: 'project.projectName'
-        }
-    ];
-    public sortingOption: SortingOption = this.sortingOptions[0];
+
     public bulkSelectActive = false;
 
     public statusFilters: FilterModel[];
@@ -37,6 +29,9 @@ export class ProjectListingScreenComponent implements OnInit {
 
     public displayedProjects: ProjectWrapper[] = [];
 
+    @ViewChild('sortingComponent', { static: true }) public sortingComponent: SortingComponent;
+    public sortingOption: SortingOption = { column: 'projectDate', order: 'desc' };
+
     constructor(
         public readonly appStateService: AppStateService,
         public readonly userService: UserService,
@@ -44,6 +39,7 @@ export class ProjectListingScreenComponent implements OnInit {
     ) {}
 
     public ngOnInit(): void {
+        this.sortingComponent.setOption(this.sortingOption);
         this.appStateService.reset();
         this._calculateData();
         this.appStateService.fileStatusChanged.subscribe(() => {
@@ -125,6 +121,10 @@ export class ProjectListingScreenComponent implements OnInit {
         this.bulkSelectActive = !this.bulkSelectActive;
     }
 
+    public sortingOptionChanged(option: SortingOption) {
+        this.sortingOption = option;
+    }
+
     public getProjectStatusConfig(pw: ProjectWrapper) {
         const obj = pw.files.reduce((acc, file) => {
             const status = file.status;
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
index 486f1308e..8ac32aad1 100644
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
+++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
@@ -119,6 +119,10 @@
             <redaction-table-col-name
                 label="project-overview.table-col-names.status.label"
                 class="flex-end"
+                column="status"
+                [activeSortingOption]="sortingOption"
+                [withSort]="true"
+                (toggleSort)="sortingComponent.toggleSort($event)"
             ></redaction-table-col-name>
 
             <div
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts
index 828ceddf1..a17c7ba68 100644
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts
+++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts
@@ -38,9 +38,9 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
     public addedDateFilters: FilterModel[];
 
     public displayedFiles: FileStatus[] = [];
-    public sortingOption: SortingOption = { column: 'added', order: 'desc' };
 
     @ViewChild('sortingComponent', { static: true }) public sortingComponent: SortingComponent;
+    public sortingOption: SortingOption = { column: 'added', order: 'desc' };
 
     constructor(
         public readonly appStateService: AppStateService,
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index 3002cfadc..adf94761b 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -280,14 +280,6 @@
         },
         "no-projects": {
             "label": "You currently have no projects. You can start your work by creating a new one!"
-        },
-        "sorting": {
-            "recent": {
-                "label": "Recent"
-            },
-            "alphabetically": {
-                "label": "Alphabetically"
-            }
         }
     },
     "file-details": {