Sort files & translations

apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html

@@ -27,7 +27,7 @@
         <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}}
+              {{option.label | translate }}
             </mat-option>
           </mat-select>
         </mat-form-field>

apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts

@@ -9,12 +9,7 @@ import { AppStateService, ProjectWrapper } from '../../state/app-state.service';
 import { UserService } from '../../user/user.service';
 import { ProjectDetailsDialogComponent } from '../project-overview-screen/project-details-dialog/project-details-dialog.component';
 import { DoughnutChartConfig } from '../../components/simple-doughnut-chart/simple-doughnut-chart.component';
-
-class SortingOption {
-  label: string;
-  order: string;
-  column: string;
-}
+import { SortingOption } from '../../utils/types';
 
 @Component({
   selector: 'redaction-project-listing-screen',
@@ -25,8 +20,8 @@ export class ProjectListingScreenComponent implements OnInit {
   public projectsChartData: DoughnutChartConfig [] = [];
   public documentsChartData: DoughnutChartConfig [] = [];
   public sortingOptions: SortingOption[] = [
-    { label: 'Recent', order: 'desc', column: 'projectDate' },
-    { label: 'Alphabetically', order: 'asc',  column: 'project.projectName' }
+    { label: 'projects.sorting.recent.label', order: 'desc', column: 'projectDate' },
+    { label: 'projects.sorting.alphabetically.label', order: 'asc',  column: 'project.projectName' }
   ];
   public sortingOption: SortingOption = this.sortingOptions[0];
 

apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html

@@ -25,7 +25,13 @@
         </span>
       <div class="actions">
         <div translate="project-overview.table-header.bulk-select.label"></div>
-        <div translate="project-overview.table-header.recent.label"></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>
       </div>
     </div>
 
@@ -39,7 +45,7 @@
 
     <div class="table-item"
          [class.pointer]="fileStatus.status === 'PROCESSED'"
-         *ngFor="let fileStatus of appStateService.activeProject.files  | sortBy: sorting.order:sorting.name;  trackBy:fileId"
+         *ngFor="let fileStatus of appStateService.activeProject.files  | sortBy: sortingOption.order:sortingOption.column; trackBy:fileId"
          [routerLink]="fileStatus.status === 'PROCESSED' ? ['/ui/projects/'+projectId+'/file/'+fileStatus.fileId] : []">
       <div class="flex-3 table-item-title min-width" [matTooltip]="'['+fileStatus.status+'] '+fileStatus.filename ">
         {{ fileStatus.filename }}

apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts

@@ -19,6 +19,7 @@ import {FileUploadService} from "../../upload/file-upload.service";
 import {UploadStatusOverlayService} from "../../upload/upload-status-dialog/service/upload-status-overlay.service";
 import {AddEditProjectDialogComponent} from "../project-listing-screen/add-edit-project-dialog/add-edit-project-dialog.component";
 import {UserService} from "../../user/user.service";
+import { SortingOption } from '../../utils/types';
 
 
 @Component({
@@ -27,30 +28,19 @@ import {UserService} from "../../user/user.service";
   styleUrls: ['./project-overview-screen.component.scss']
 })
 export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
-
-
-  @ViewChild('dropzoneComponent', {static: true}) dropZoneComponent;
+  @ViewChild('dropzoneComponent', {static: true})
+  dropZoneComponent;
 
   dragActive = false;
 
-  sortOptions: any[] = [{
-    value: {name: 'lastUpdated', order: 'desc'},
-    label: 'project-overview.sorting.last-updated-desc.label',
-    icon: 'red:sort-desc'
-  }, {
-    value: {name: 'lastUpdated', order: 'asc'},
-    label: 'project-overview.sorting.last-updated-asc.label',
-    icon: 'red:sort-asc'
-  }, {
-    value: {name: 'filename', order: 'desc'},
-    label: 'project-overview.sorting.file-name-desc.label',
-    icon: 'red:sort-desc'
-  }, {
-    value: {name: 'filename', order: 'asc'},
-    label: 'project-overview.sorting.file-name-asc.label',
-    icon: 'red:sort-asc'
-  }];
-  sorting: any = this.sortOptions[0].value;
+  public sortingOptions: SortingOption[] = [
+    { label: 'project-overview.sorting.recent.label', order: 'desc', column: 'lastUpdated' },
+    { label: 'project-overview.sorting.alphabetically.label', order: 'asc', column: 'filename' },
+    { label: 'project-overview.sorting.number-of-pages.label', order: 'asc', column: 'numberOfPages' },
+    { label: 'project-overview.sorting.number-of-analyses.label', order: 'desc', column: 'numberOfAnalyses' },
+  ];
+  public sortingOption: SortingOption = this.sortingOptions[0];
+
   projectId: string;
   private _fileStatusInterval;
 
@@ -105,11 +95,6 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
     });
   }
 
-  sortingChanged($event) {
-    this.sorting = $event;
-  }
-
-
   showDetailsDialog($event: MouseEvent) {
     $event.stopPropagation();
     this._dialog.open(ProjectDetailsDialogComponent, {

apps/red-ui/src/app/utils/types.d.ts

@@ -8,3 +8,10 @@ export type Color =
   'finished' |
   'active' |
   'archived';
+
+export class SortingOption {
+  label: string;
+  order: string;
+  column: string;
+}
+

apps/red-ui/src/assets/i18n/en.json

@@ -179,6 +179,14 @@
     },
     "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": {
@@ -243,18 +251,17 @@
       }
     },
     "sorting": {
-      "label": "Sorting",
-      "last-updated-desc": {
-        "label": "Last Updated (Desc)"
+      "recent": {
+        "label": "Recent"
       },
-      "last-updated-asc": {
-        "label": "Last Updated (Asc)"
+      "alphabetically": {
+        "label": "Alphabetically"
       },
-      "file-name-desc": {
-        "label": "Name (Desc)"
+      "number-of-pages": {
+        "label": "Number of pages"
       },
-      "file-name-asc": {
-        "label": "Name (Desc)"
+      "number-of-analyses": {
+        "label": "Number of analyses"
       }
     },
     "upload-error": {