More sorting

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' }
     ]
 };
 

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

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;

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

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,

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": {