From 5508f8c2d9e0ef90f476ee2f9103dd69e10cabef Mon Sep 17 00:00:00 2001
From: Timo Bejan <timo@devplant.ro>
Date: Sun, 1 Nov 2020 21:02:16 +0200
Subject: [PATCH] filters rework and project overview

---
 .../app/common/filter/filter.component.html   |  18 +-
 .../src/app/common/filter/filter.component.ts |   4 +-
 .../simple-doughnut-chart.component.html      |   2 +-
 .../file-preview-screen.component.html        |   1 -
 .../project-listing-screen.component.html     |  62 ++++--
 .../project-listing-screen.component.ts       | 137 ++++++++++++-
 .../project-overview-screen.component.html    |   6 +-
 .../red-ui/src/app/state/app-state.service.ts |  28 ++-
 apps/red-ui/src/app/utils/functions.ts        |   5 +-
 apps/red-ui/src/assets/i18n/en.json           |  24 +--
 .../red-ui/src/assets/icons/general/pages.svg |  30 ---
 package.json                                  | 186 +++++++++---------
 yarn.lock                                     |   7 +-
 13 files changed, 329 insertions(+), 181 deletions(-)

diff --git a/apps/red-ui/src/app/common/filter/filter.component.html b/apps/red-ui/src/app/common/filter/filter.component.html
index 3a98cdd82..8c91c5b1f 100644
--- a/apps/red-ui/src/app/common/filter/filter.component.html
+++ b/apps/red-ui/src/app/common/filter/filter.component.html
@@ -2,29 +2,27 @@
     <button
         color="accent"
         mat-button
-        class="arrow-button"
+        [class.arrow-button]="hasArrow"
         [matMenuTriggerFor]="filterMenu"
         [ngClass]="{ overlay: hasActiveFilters }"
     >
-        <span translate="file-preview.filter-menu.label"></span>
-        <mat-icon svgIcon="red:arrow-down"></mat-icon>
+        <mat-icon [svgIcon]="icon" *ngIf="icon"></mat-icon>
+        <span [translate]="filterLabel"></span>
+        <mat-icon svgIcon="red:arrow-down" *ngIf="hasArrow"></mat-icon>
     </button>
     <div class="dot" *ngIf="hasActiveFilters"></div>
     <mat-menu #filterMenu="matMenu" xPosition="before" (closed)="applyFilters()">
         <div class="filter-menu-header">
-            <div
-                class="all-caps-label"
-                translate="file-preview.filter-menu.filter-types.label"
-            ></div>
+            <div class="all-caps-label" translate="filter-menu.filter-types.label"></div>
             <div class="actions">
                 <div
                     class="all-caps-label primary pointer"
-                    translate="file-preview.filter-menu.all.label"
+                    translate="filter-menu.all.label"
                     (click)="activateAllFilters(); $event.stopPropagation()"
                 ></div>
                 <div
                     class="all-caps-label primary pointer"
-                    translate="file-preview.filter-menu.none.label"
+                    translate="filter-menu.none.label"
                     (click)="deactivateAllFilters(); $event.stopPropagation()"
                 ></div>
             </div>
@@ -80,5 +78,5 @@
 </div>
 
 <ng-template #defaultFilterTemplate let-filter="filter">
-    {{ filter?.key }}
+    {{ filter?.label }}
 </ng-template>
diff --git a/apps/red-ui/src/app/common/filter/filter.component.ts b/apps/red-ui/src/app/common/filter/filter.component.ts
index b6caaf079..66db2bb09 100644
--- a/apps/red-ui/src/app/common/filter/filter.component.ts
+++ b/apps/red-ui/src/app/common/filter/filter.component.ts
@@ -19,9 +19,11 @@ import { handleCheckedValue } from './utils/filter-utils';
 })
 export class FilterComponent implements OnChanges {
     @Input() filterTemplate: TemplateRef<any>;
-    @Input() manualRedactions: ManualRedactions;
     @Output() filtersChanged = new EventEmitter<FilterModel[]>();
     @Input() filters: FilterModel[] = [];
+    @Input() filterLabel = 'filter-menu.label';
+    @Input() hasArrow = true;
+    @Input() icon: string;
 
     constructor(public readonly appStateService: AppStateService) {}
 
diff --git a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html
index 417a97cd6..5f4d6913e 100644
--- a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html
+++ b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html
@@ -37,7 +37,7 @@
                         {
                             length: val.value,
                             color: val.color,
-                            label: val.value + ' ' + (val.label | translate | lowercase)
+                            label: val.value + ' ' + (val.label | humanize)
                         }
                     ]"
                 >
diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
index 75f5bd125..1c3d4e9ef 100644
--- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
+++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
@@ -90,7 +90,6 @@
                 <redaction-filter
                     [filterTemplate]="annotationFilterTemplate"
                     [filters]="filters"
-                    [manualRedactions]="fileData?.manualRedactions"
                     (filtersChanged)="filtersChanged($event)"
                 ></redaction-filter>
             </div>
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 39bda5bd9..c3e16403b 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
@@ -1,24 +1,41 @@
 <div class="page-header">
     <div class="filters flex-row">
         <div translate="filters.filter-by.label"></div>
-        <button mat-button translate="filters.status.label">
-            <mat-icon svgIcon="red:status"></mat-icon>
-        </button>
-        <button mat-button translate="filters.people.label">
-            <mat-icon svgIcon="red:user"></mat-icon>
-        </button>
-        <button mat-button translate="filters.due-date.label">
-            <mat-icon svgIcon="red:lightning"></mat-icon>
-        </button>
-        <button mat-button translate="filters.created-on.label">
-            <mat-icon svgIcon="red:calendar"></mat-icon>
-        </button>
-        <button mat-button translate="filters.project.label">
-            <mat-icon svgIcon="red:folder"></mat-icon>
-        </button>
-        <button mat-button translate="filters.document.label">
-            <mat-icon svgIcon="red:document"></mat-icon>
-        </button>
+        <redaction-filter
+            [filters]="statusFilters"
+            [filterLabel]="'filters.status.label'"
+            [hasArrow]="false"
+            [icon]="'red:status'"
+            (filtersChanged)="filtersChanged()"
+        ></redaction-filter>
+        <redaction-filter
+            [filters]="peopleFilters"
+            [filterLabel]="'filters.people.label'"
+            [hasArrow]="false"
+            [icon]="'red:user'"
+            (filtersChanged)="filtersChanged()"
+        ></redaction-filter>
+        <redaction-filter
+            [filters]="dueDateFilters"
+            [filterLabel]="'filters.due-date.label'"
+            [hasArrow]="false"
+            [icon]="'red:lightning'"
+            (filtersChanged)="filtersChanged()"
+        ></redaction-filter>
+        <redaction-filter
+            [filters]="addedDateFilters"
+            [filterLabel]="'filters.created-on.label'"
+            [hasArrow]="false"
+            [icon]="'red:calendar'"
+            (filtersChanged)="filtersChanged()"
+        ></redaction-filter>
+
+        <!--        <button mat-button translate="filters.project.label">-->
+        <!--            <mat-icon svgIcon="red:folder"></mat-icon>-->
+        <!--        </button>-->
+        <!--        <button mat-button translate="filters.document.label">-->
+        <!--            <mat-icon svgIcon="red:document"></mat-icon>-->
+        <!--        </button>-->
     </div>
     <button
         (click)="openAddProjectDialog()"
@@ -74,15 +91,14 @@
             </div>
 
             <div
-                *ngIf="appStateService.allProjects?.length === 0"
+                *ngIf="displayedProjects?.length === 0"
                 class="no-data"
                 translate="project-listing.no-projects.label"
             ></div>
 
             <div
                 *ngFor="
-                    let pw of appStateService.allProjects
-                        | sortBy: sortingOption.order:sortingOption.column
+                    let pw of displayedProjects | sortBy: sortingOption.order:sortingOption.column
                 "
                 [routerLink]="[canOpenProject(pw) ? '/ui/projects/' + pw.project.projectId : []]"
                 class="table-item"
@@ -97,6 +113,10 @@
                             <mat-icon svgIcon="red:document"></mat-icon>
                             {{ documentCount(pw) }}
                         </div>
+                        <div>
+                            <mat-icon svgIcon="red:pages"></mat-icon>
+                            {{ pw.totalNumberOfPages }}
+                        </div>
                         <div>
                             <mat-icon svgIcon="red:user"></mat-icon>
                             {{ userCount(pw) }}
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 4186d35d2..098f7070e 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,11 +1,13 @@
-import {Component, OnInit} from '@angular/core';
-import {Project} from '@redaction/red-ui-http';
-import {AppStateService, ProjectWrapper} from '../../state/app-state.service';
-import {UserService} from '../../user/user.service';
-import {DoughnutChartConfig} from '../../components/simple-doughnut-chart/simple-doughnut-chart.component';
-import {SortingOption} from '../../utils/types';
-import {groupBy} from '../../utils/functions';
-import {DialogService} from '../../dialogs/dialog.service';
+import { Component, OnInit } from '@angular/core';
+import { Project } from '@redaction/red-ui-http';
+import { AppStateService, ProjectWrapper } from '../../state/app-state.service';
+import { UserService } from '../../user/user.service';
+import { DoughnutChartConfig } from '../../components/simple-doughnut-chart/simple-doughnut-chart.component';
+import { SortingOption } from '../../utils/types';
+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';
 
 @Component({
     selector: 'redaction-project-listing-screen',
@@ -25,6 +27,13 @@ export class ProjectListingScreenComponent implements OnInit {
     ];
     public sortingOption: SortingOption = this.sortingOptions[0];
 
+    statusFilters: FilterModel[];
+    dueDateFilters: FilterModel[];
+    peopleFilters: FilterModel[];
+    addedDateFilters: FilterModel[];
+
+    displayedProjects: ProjectWrapper[] = [];
+
     constructor(
         public readonly appStateService: AppStateService,
         public readonly userService: UserService,
@@ -40,6 +49,8 @@ export class ProjectListingScreenComponent implements OnInit {
     }
 
     private _calculateData() {
+        this._computeAllFilters();
+        this._filterProjects();
         this.projectsChartData = [
             { value: this.activeProjects, color: 'ACTIVE', label: 'active' },
             { value: this.inactiveProjects, color: 'DELETED', label: 'archived' }
@@ -127,4 +138,114 @@ export class ProjectListingScreenComponent implements OnInit {
         $event.preventDefault();
         this.appStateService.reanalyseProject(project);
     }
+
+    private _computeAllFilters() {
+        const allDistinctFileStatus = new Set<string>();
+        const allDistinctPeople = new Set<string>();
+        const allDistinctDueDates = new Set<string>();
+        const allDistinctAddedDates = new Set<string>();
+        this.appStateService.allProjects.forEach((entry) => {
+            // all people
+            entry.project.memberIds.forEach((memberId) => allDistinctPeople.add(memberId));
+            // due date
+            if (entry.dueDate) {
+                allDistinctDueDates.add(moment(entry.dueDate).format('DD/MM/YYYY'));
+            }
+            // added date
+            allDistinctAddedDates.add(moment(entry.projectDate).format('DD/MM/YYYY'));
+            // file statuses
+            entry.files.forEach((file) => {
+                allDistinctFileStatus.add(file.status);
+            });
+        });
+
+        this.statusFilters = [];
+        allDistinctFileStatus.forEach((status) => {
+            this.statusFilters.push({
+                key: status,
+                label: humanize(status)
+            });
+        });
+
+        this.peopleFilters = [];
+        allDistinctPeople.forEach((userId) => {
+            this.peopleFilters.push({
+                key: userId,
+                label: this.userService.getNameForId(userId)
+            });
+        });
+
+        this.dueDateFilters = [];
+        allDistinctDueDates.forEach((date) => {
+            this.dueDateFilters.push({
+                key: date,
+                label: date
+            });
+        });
+
+        this.addedDateFilters = [];
+        allDistinctAddedDates.forEach((date) => {
+            this.addedDateFilters.push({
+                key: date,
+                label: date
+            });
+        });
+    }
+
+    filtersChanged() {
+        this._filterProjects();
+    }
+
+    private _filterProjects() {
+        const filteredProjects = [];
+
+        for (const project of this.appStateService.allProjects) {
+            const statusFilterMatched = this._checkFilter(
+                project,
+                this.statusFilters,
+                (pw: ProjectWrapper, filter: FilterModel) => pw.hasStatus(filter.key)
+            );
+            const peopleFilterMatched = this._checkFilter(
+                project,
+                this.peopleFilters,
+                (pw: ProjectWrapper, filter: FilterModel) => pw.hasMember(filter.key)
+            );
+            const dueDateFilterMatched = this._checkFilter(
+                project,
+                this.dueDateFilters,
+                (pw: ProjectWrapper, filter: FilterModel) => pw.dueDateMatches(filter.key)
+            );
+            const addedFilterMatched = this._checkFilter(
+                project,
+                this.addedDateFilters,
+                (pw: ProjectWrapper, filter: FilterModel) => pw.addedDateMatches(filter.key)
+            );
+
+            if (
+                statusFilterMatched &&
+                peopleFilterMatched &&
+                addedFilterMatched &&
+                dueDateFilterMatched
+            ) {
+                filteredProjects.push(project);
+            }
+        }
+
+        this.displayedProjects = filteredProjects;
+    }
+
+    private _checkFilter(project: ProjectWrapper, filters: FilterModel[], validate: Function) {
+        const hasChecked = filters.find((f) => f.checked);
+        if (!hasChecked) {
+            return true;
+        }
+        let filterMatched = false;
+        for (const filter of filters) {
+            if (filter.checked && validate(project, filter)) {
+                filterMatched = true;
+                break;
+            }
+        }
+        return filterMatched;
+    }
 }
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 70c5f17f3..b55b25408 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
@@ -290,9 +290,13 @@
 
         <div class="small-label stats-subtitle mt-20">
             <div>
-                <mat-icon svgIcon="red:pages"></mat-icon>
+                <mat-icon svgIcon="red:document"></mat-icon>
                 {{ appStateService.activeProject.files.length }}
             </div>
+            <div>
+                <mat-icon svgIcon="red:pages"></mat-icon>
+                {{ appStateService.activeProject.totalNumberOfPages }}
+            </div>
             <div>
                 <mat-icon svgIcon="red:user"></mat-icon>
                 {{ appStateService.activeProject.project.memberIds.length }}
diff --git a/apps/red-ui/src/app/state/app-state.service.ts b/apps/red-ui/src/app/state/app-state.service.ts
index 6de22ac0c..66d27ba82 100644
--- a/apps/red-ui/src/app/state/app-state.service.ts
+++ b/apps/red-ui/src/app/state/app-state.service.ts
@@ -18,6 +18,7 @@ import { tap } from 'rxjs/operators';
 import { download } from '../utils/file-download-utils';
 import { humanize } from '../utils/functions';
 import { AnnotationWrapper } from '../screens/file/model/annotation.wrapper';
+import * as moment from 'moment';
 
 export interface AppState {
     projects: ProjectWrapper[];
@@ -29,11 +30,33 @@ export interface AppState {
 }
 
 export class ProjectWrapper {
+    totalNumberOfPages?: number;
+
+    hasStatus(status: string) {
+        return this.files.find((f) => f.status === status);
+    }
+
     constructor(public project: Project, public files: FileStatus[]) {}
 
     get projectDate() {
         return this.project.date;
     }
+
+    get dueDate() {
+        return this.project.dueDate;
+    }
+
+    hasMember(key: string) {
+        return this.project.memberIds.indexOf(key) >= 0;
+    }
+
+    dueDateMatches(key: string) {
+        return moment(this.dueDate).format('DD/MM/YYYY') === key;
+    }
+
+    addedDateMatches(key: string) {
+        return moment(this.projectDate).format('DD/MM/YYYY') === key;
+    }
 }
 
 @Injectable({
@@ -313,9 +336,12 @@ export class AppStateService {
             if (p.project.memberIds) {
                 p.project.memberIds.forEach((m) => totalPeople.add(m));
             }
+            let numberOfPages = 0;
             p.files.forEach((f) => {
-                totalAnalysedPages += f.numberOfPages;
+                numberOfPages += f.numberOfPages;
             });
+            p.totalNumberOfPages = numberOfPages;
+            totalAnalysedPages += numberOfPages;
         });
 
         this._appState.totalPeople = totalPeople.size;
diff --git a/apps/red-ui/src/app/utils/functions.ts b/apps/red-ui/src/app/utils/functions.ts
index 16c339525..8ada1c82a 100644
--- a/apps/red-ui/src/app/utils/functions.ts
+++ b/apps/red-ui/src/app/utils/functions.ts
@@ -6,7 +6,10 @@ export function groupBy(xs: any[], key: string) {
 }
 
 export function humanize(str: string) {
-    const frags = str.split(/[ \-_]+/);
+    if (!str) {
+        return undefined;
+    }
+    const frags = str.toLowerCase().split(/[ \-_]+/);
     for (let i = 0; i < frags.length; i++) {
         frags[i] = frags[i].charAt(0).toUpperCase() + frags[i].slice(1);
     }
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index 5a309ac5e..f0a81d195 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -473,18 +473,6 @@
         "view-toggle": {
             "label": "Redacted View"
         },
-        "filter-menu": {
-            "label": "Filter",
-            "all": {
-                "label": "All"
-            },
-            "none": {
-                "label": "None"
-            },
-            "filter-types": {
-                "label": "Filter types"
-            }
-        },
         "tabs": {
             "quick-navigation": {
                 "label": "Quick Navigation"
@@ -587,5 +575,17 @@
             "request": "Redaction Request",
             "ignore": "Ignored redaction"
         }
+    },
+    "filter-menu": {
+        "label": "Filter",
+        "all": {
+            "label": "All"
+        },
+        "none": {
+            "label": "None"
+        },
+        "filter-types": {
+            "label": "Filter types"
+        }
     }
 }
diff --git a/apps/red-ui/src/assets/icons/general/pages.svg b/apps/red-ui/src/assets/icons/general/pages.svg
index 300a88d70..82afe4a31 100644
--- a/apps/red-ui/src/assets/icons/general/pages.svg
+++ b/apps/red-ui/src/assets/icons/general/pages.svg
@@ -30,34 +30,4 @@
 	<path d="M117.765,288.341c0-9.341-6.478-14.915-17.911-14.915c-4.682,0-7.848,0.451-9.503,0.903v29.985
 		c1.95,0.451,4.37,0.592,7.677,0.592C110.246,304.907,117.765,298.74,117.765,288.341z"/>
 </g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
 </svg>
diff --git a/package.json b/package.json
index 40fd1decb..3ac3c831b 100644
--- a/package.json
+++ b/package.json
@@ -1,96 +1,96 @@
 {
-  "name": "redaction",
-  "version": "0.0.97",
-  "license": "MIT",
-  "husky": {
-    "hooks": {
-      "pre-commit": "pretty-quick --staged && ng lint --project=red-ui-http && ng lint --project=red-ui --fix"
+    "name": "redaction",
+    "version": "0.0.97",
+    "license": "MIT",
+    "husky": {
+        "hooks": {
+            "pre-commit": "pretty-quick --staged && ng lint --project=red-ui-http && ng lint --project=red-ui --fix"
+        }
+    },
+    "scripts": {
+        "build-lint-all": "ng lint --project=red-ui-http --fix && ng build --project=red-ui-http && ng lint --project=red-ui --fix && ng build --project=red-ui --prod",
+        "nx": "nx",
+        "start": "nx serve",
+        "build": "nx build",
+        "test": "nx test",
+        "lint": "nx workspace-lint && nx lint",
+        "e2e": "nx e2e",
+        "affected:apps": "nx affected:apps",
+        "affected:libs": "nx affected:libs",
+        "affected:build": "nx affected:build",
+        "affected:e2e": "nx affected:e2e",
+        "affected:test": "nx affected:test",
+        "affected:lint": "nx affected:lint",
+        "affected:dep-graph": "nx affected:dep-graph",
+        "affected": "nx affected",
+        "format": "nx format:write",
+        "format:write": "nx format:write",
+        "format:check": "nx format:check",
+        "update": "nx migrate latest",
+        "workspace-schematic": "nx workspace-schematic",
+        "dep-graph": "nx dep-graph",
+        "help": "nx help",
+        "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points"
+    },
+    "private": true,
+    "dependencies": {
+        "@angular/animations": "^10.0.0",
+        "@angular/cdk": "^10.2.3",
+        "@angular/common": "^10.0.0",
+        "@angular/core": "^10.0.0",
+        "@angular/forms": "^10.0.0",
+        "@angular/material": "^10.2.1",
+        "@angular/platform-browser": "^10.0.0",
+        "@angular/platform-browser-dynamic": "^10.0.0",
+        "@angular/router": "^10.0.0",
+        "@angular/service-worker": "^10.0.0",
+        "@ngx-translate/core": "^13.0.0",
+        "@ngx-translate/http-loader": "^6.0.0",
+        "@nrwl/angular": "^10.2.0",
+        "@pdftron/webviewer": "^7.0.1",
+        "file-saver": "^2.0.2",
+        "jwt-decode": "^3.0.0",
+        "keycloak-angular": "^8.0.1",
+        "keycloak-js": "10.0.2",
+        "lint-staged": "^10.5.0",
+        "ng2-file-upload": "^1.4.0",
+        "ngp-sort-pipe": "^0.0.4",
+        "ngx-dropzone": "^2.2.2",
+        "ngx-toastr": "^13.0.0",
+        "rxjs": "~6.5.5",
+        "scroll-into-view-if-needed": "^2.2.26",
+        "zone.js": "^0.10.2"
+    },
+    "devDependencies": {
+        "@angular-devkit/build-angular": "~0.1000.0",
+        "@angular-devkit/build-ng-packagr": "^0.1001.3",
+        "@angular/cli": "^10.1.2",
+        "@angular/compiler": "^10.0.0",
+        "@angular/compiler-cli": "^10.0.0",
+        "@angular/language-service": "^10.0.0",
+        "@nrwl/cypress": "10.2.0",
+        "@nrwl/jest": "10.2.0",
+        "@nrwl/workspace": "10.2.0",
+        "@types/jest": "26.0.8",
+        "@types/node": "~8.9.4",
+        "codelyzer": "~5.0.1",
+        "cypress": "^4.1.0",
+        "dotenv": "6.2.0",
+        "eslint": "6.8.0",
+        "google-translate-api-browser": "^1.1.71",
+        "husky": "^4.3.0",
+        "jest": "26.2.2",
+        "jest-preset-angular": "8.2.1",
+        "lodash": "^4.17.20",
+        "moment": "^2.29.1",
+        "ng-packagr": "^10.1.2",
+        "prettier": "2.0.4",
+        "pretty-quick": "^3.1.0",
+        "superagent": "^6.1.0",
+        "superagent-promise": "^1.1.0",
+        "ts-jest": "26.1.4",
+        "ts-node": "~7.0.0",
+        "tslint": "~6.0.0",
+        "typescript": "~3.9.3"
     }
-  },
-  "scripts": {
-    "build-lint-all": "ng lint --project=red-ui-http --fix && ng build --project=red-ui-http && ng lint --project=red-ui --fix && ng build --project=red-ui --prod",
-    "nx": "nx",
-    "start": "nx serve",
-    "build": "nx build",
-    "test": "nx test",
-    "lint": "nx workspace-lint && nx lint",
-    "e2e": "nx e2e",
-    "affected:apps": "nx affected:apps",
-    "affected:libs": "nx affected:libs",
-    "affected:build": "nx affected:build",
-    "affected:e2e": "nx affected:e2e",
-    "affected:test": "nx affected:test",
-    "affected:lint": "nx affected:lint",
-    "affected:dep-graph": "nx affected:dep-graph",
-    "affected": "nx affected",
-    "format": "nx format:write",
-    "format:write": "nx format:write",
-    "format:check": "nx format:check",
-    "update": "nx migrate latest",
-    "workspace-schematic": "nx workspace-schematic",
-    "dep-graph": "nx dep-graph",
-    "help": "nx help",
-    "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points"
-  },
-  "private": true,
-  "dependencies": {
-    "@angular/animations": "^10.0.0",
-    "@angular/cdk": "^10.2.3",
-    "@angular/common": "^10.0.0",
-    "@angular/core": "^10.0.0",
-    "@angular/forms": "^10.0.0",
-    "@angular/material": "^10.2.1",
-    "@angular/platform-browser": "^10.0.0",
-    "@angular/platform-browser-dynamic": "^10.0.0",
-    "@angular/router": "^10.0.0",
-    "@angular/service-worker": "^10.0.0",
-    "@ngx-translate/core": "^13.0.0",
-    "@ngx-translate/http-loader": "^6.0.0",
-    "@nrwl/angular": "^10.2.0",
-    "@pdftron/webviewer": "^7.0.1",
-    "file-saver": "^2.0.2",
-    "jwt-decode": "^3.0.0",
-    "keycloak-angular": "^8.0.1",
-    "keycloak-js": "10.0.2",
-    "lint-staged": "^10.5.0",
-    "ng2-file-upload": "^1.4.0",
-    "ngp-sort-pipe": "^0.0.4",
-    "ngx-dropzone": "^2.2.2",
-    "ngx-toastr": "^13.0.0",
-    "rxjs": "~6.5.5",
-    "scroll-into-view-if-needed": "^2.2.26",
-    "zone.js": "^0.10.2"
-  },
-  "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1000.0",
-    "@angular-devkit/build-ng-packagr": "^0.1001.3",
-    "@angular/cli": "^10.1.2",
-    "@angular/compiler": "^10.0.0",
-    "@angular/compiler-cli": "^10.0.0",
-    "@angular/language-service": "^10.0.0",
-    "@nrwl/cypress": "10.2.0",
-    "@nrwl/jest": "10.2.0",
-    "@nrwl/workspace": "10.2.0",
-    "@types/jest": "26.0.8",
-    "@types/node": "~8.9.4",
-    "codelyzer": "~5.0.1",
-    "cypress": "^4.1.0",
-    "dotenv": "6.2.0",
-    "eslint": "6.8.0",
-    "google-translate-api-browser": "^1.1.71",
-    "husky": "^4.3.0",
-    "jest": "26.2.2",
-    "jest-preset-angular": "8.2.1",
-    "lodash": "^4.17.20",
-    "moment": "^2.28.0",
-    "ng-packagr": "^10.1.2",
-    "prettier": "2.0.4",
-    "pretty-quick": "^3.1.0",
-    "superagent": "^6.1.0",
-    "superagent-promise": "^1.1.0",
-    "ts-jest": "26.1.4",
-    "ts-node": "~7.0.0",
-    "tslint": "~6.0.0",
-    "typescript": "~3.9.3"
-  }
 }
diff --git a/yarn.lock b/yarn.lock
index 5a226b447..a73533a42 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7704,11 +7704,16 @@ mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.4, mkdirp@^0.5.5, mkdir
   dependencies:
     minimist "^1.2.5"
 
-moment@^2.27.0, moment@^2.28.0:
+moment@^2.27.0:
   version "2.28.0"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.28.0.tgz#cdfe73ce01327cee6537b0fafac2e0f21a237d75"
   integrity sha512-Z5KOjYmnHyd/ukynmFd/WwyXHd7L4J9vTI/nn5Ap9AVUgaAE15VvQ9MOGmJJygEUklupqIrFnor/tjTwRU+tQw==
 
+moment@^2.29.1:
+  version "2.29.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
+  integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"