Pull request #209: Updates

Merge in RED/ui from updates to master * commit 'a9f62b7c75929f5488b79b4019410b1453818960': update remaining dependencies update some dependencies angular updates update nx, use onPush change detection
2021-06-14 09:01:11 +02:00 · 2021-06-14 09:01:11 +02:00 · 43a2adf66a
commit 43a2adf66a
parent 83364e208c a9f62b7c75
12 changed files with 1652 additions and 1136 deletions
--- a/apps/red-ui/src/app/modules/dossier/components/scroll-button/scroll-button.component.html
+++ b/apps/red-ui/src/app/modules/dossier/components/scroll-button/scroll-button.component.html
@ -1,3 +1,3 @@
-<button (click)="scroll()" *ngIf="showScrollButton()" class="scroll-button pointer">
+<button (click)="scroll()" [hidden]="!showScrollButton()" class="scroll-button pointer">
    <mat-icon svgIcon="red:arrow-down-o"></mat-icon>
 </button>
--- a/apps/red-ui/src/app/modules/dossier/components/scroll-button/scroll-button.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/components/scroll-button/scroll-button.component.ts
@ -13,17 +13,17 @@ export class ScrollButtonComponent {
    itemSize: number;

    scroll(): void {
-        const scrollOffset = this.scrollViewport.measureScrollOffset('top');
+        const scrollOffset = this.scrollViewport?.measureScrollOffset('top');
        const ligaturePortion = 50;
-        const viewportSize = this.scrollViewport.getViewportSize() - ligaturePortion;
+        const viewportSize = this.scrollViewport?.getViewportSize() - ligaturePortion;

-        this.scrollViewport.scrollToOffset(scrollOffset + viewportSize, 'smooth');
+        this.scrollViewport?.scrollToOffset(scrollOffset + viewportSize, 'smooth');
    }

    showScrollButton(): boolean {
-        const reachedBottom = this.scrollViewport.measureScrollOffset('bottom') === 0;
-        const scrollSize = this.scrollViewport.getDataLength() * this.itemSize;
-        const scrollIsNeeded = this.scrollViewport.getViewportSize() < scrollSize;
+        const reachedBottom = this.scrollViewport?.measureScrollOffset('bottom') === 0;
+        const scrollSize = this.scrollViewport?.getDataLength() * this.itemSize;
+        const scrollIsNeeded = this.scrollViewport?.getViewportSize() < scrollSize;

        return scrollIsNeeded && !reachedBottom;
    }
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.html
@ -176,7 +176,6 @@
            </cdk-virtual-scroll-viewport>

            <redaction-scroll-button
-                *ngIf="scrollBar && itemSize > 0"
                [itemSize]="itemSize"
                [scrollViewport]="scrollBar"
            ></redaction-scroll-button>
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html
@ -310,7 +310,6 @@
            </cdk-virtual-scroll-viewport>

            <redaction-scroll-button
-                *ngIf="scrollBar && itemSize > 0"
                [itemSize]="itemSize"
                [scrollViewport]="scrollBar"
            ></redaction-scroll-button>
--- a/apps/red-ui/src/app/modules/shared/components/buttons/chevron-button/chevron-button.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/buttons/chevron-button/chevron-button.component.ts
@ -1,9 +1,10 @@
-import { Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';

@Component({
    selector: 'redaction-chevron-button',
    templateUrl: './chevron-button.component.html',
-    styleUrls: ['./chevron-button.component.scss']
+    styleUrls: ['./chevron-button.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ChevronButtonComponent {
    @Input() text: string;
--- a/apps/red-ui/src/app/modules/shared/components/buttons/circle-button/circle-button.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/buttons/circle-button/circle-button.component.ts
@ -1,10 +1,18 @@
-import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    EventEmitter,
+    Input,
+    Output,
+    ViewChild
+} from '@angular/core';
 import { MatTooltip } from '@angular/material/tooltip';

@Component({
    selector: 'redaction-circle-button',
    templateUrl: './circle-button.component.html',
-    styleUrls: ['./circle-button.component.scss']
+    styleUrls: ['./circle-button.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class CircleButtonComponent {
    @Input() icon: string;
--- a/apps/red-ui/src/app/modules/shared/components/buttons/file-download-btn/file-download-btn.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/buttons/file-download-btn/file-download-btn.component.ts
@ -1,4 +1,4 @@
-import { Component, Inject, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Inject, Input } from '@angular/core';
 import { PermissionsService } from '@services/permissions.service';
 import { DossierWrapper } from '@state/model/dossier.wrapper';
 import { FileStatusWrapper } from '@models/file/file-status.wrapper';
@ -12,7 +12,8 @@ export type MenuState = 'OPEN' | 'CLOSED';
@Component({
    selector: 'redaction-file-download-btn',
    templateUrl: './file-download-btn.component.html',
-    styleUrls: ['./file-download-btn.component.scss']
+    styleUrls: ['./file-download-btn.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class FileDownloadBtnComponent {
    @Input() dossier: DossierWrapper;
@ -31,17 +32,17 @@ export class FileDownloadBtnComponent {
    ) {}

    get canDownloadFiles() {
-        if (Array.isArray(this.file)) {
-            return (
-                this.file.length > 0 &&
-                this.file.reduce(
-                    (acc, file) => acc && this._permissionsService.canDownloadFiles(file),
-                    true
-                )
-            );
-        } else {
+        if (!Array.isArray(this.file)) {
            return this._permissionsService.canDownloadFiles(this.file);
        }
+
+        return (
+            this.file.length > 0 &&
+            this.file.reduce(
+                (acc, file) => acc && this._permissionsService.canDownloadFiles(file),
+                true
+            )
+        );
    }

    downloadFiles($event: MouseEvent) {
--- a/apps/red-ui/src/app/modules/shared/components/buttons/icon-button/icon-button.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/buttons/icon-button/icon-button.component.ts
@ -1,9 +1,10 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
    selector: 'redaction-icon-button',
    templateUrl: './icon-button.component.html',
-    styleUrls: ['./icon-button.component.scss']
+    styleUrls: ['./icon-button.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class IconButtonComponent {
    @Input() icon: string;
--- a/apps/red-ui/src/app/modules/shared/components/buttons/user-button/user-button.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/buttons/user-button/user-button.component.ts
@ -1,10 +1,11 @@
-import { Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { UserWrapper } from '@services/user.service';

@Component({
    selector: 'redaction-user-button',
    templateUrl: './user-button.component.html',
-    styleUrls: ['./user-button.component.scss']
+    styleUrls: ['./user-button.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class UserButtonComponent {
    @Input() user: UserWrapper;
--- a/apps/red-ui/src/app/modules/shared/components/checkbox/round-checkbox.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/checkbox/round-checkbox.component.ts
@ -19,13 +19,11 @@ export class RoundCheckboxComponent implements OnInit, OnChanges {
    @Input() indeterminate: boolean;
    @Input() type: 'default' | 'red-bg';

-    @ViewChild('wrapper', { static: true }) _wrapper: ElementRef;
+    @ViewChild('wrapper', { static: true }) private readonly _wrapper: ElementRef;

-    @HostBinding('class.active') _activeClass: boolean;
-    @HostBinding('class.inactive') _inactiveClass: boolean;
-    @HostBinding('class.indeterminate') _indeterminateClass: boolean;
-
-    constructor() {}
+    @HostBinding('class.active') private _activeClass: boolean;
+    @HostBinding('class.inactive') private _inactiveClass: boolean;
+    @HostBinding('class.indeterminate') private _indeterminateClass: boolean;

    ngOnInit(): void {
        this._wrapper.nativeElement.style.setProperty('--size', this.size + 'px');
--- a/package.json
+++ b/package.json
@ -35,33 +35,33 @@
    }
  },
  "dependencies": {
-    "@angular/animations": "12.0.0",
-    "@angular/cdk": "~12.0.0",
-    "@angular/common": "12.0.0",
-    "@angular/compiler": "12.0.0",
-    "@angular/core": "12.0.0",
-    "@angular/forms": "12.0.0",
-    "@angular/material": "~12.0.0",
-    "@angular/material-moment-adapter": "^12.0.0",
-    "@angular/platform-browser": "12.0.0",
-    "@angular/platform-browser-dynamic": "12.0.0",
-    "@angular/router": "12.0.0",
-    "@angular/service-worker": "12.0.0",
+    "@angular/animations": "12.0.4",
+    "@angular/cdk": "~12.0.4",
+    "@angular/common": "12.0.4",
+    "@angular/compiler": "12.0.4",
+    "@angular/core": "12.0.4",
+    "@angular/forms": "12.0.4",
+    "@angular/material": "~12.0.4",
+    "@angular/material-moment-adapter": "^12.0.4",
+    "@angular/platform-browser": "12.0.4",
+    "@angular/platform-browser-dynamic": "12.0.4",
+    "@angular/router": "12.0.4",
+    "@angular/service-worker": "12.0.4",
    "@materia-ui/ngx-monaco-editor": "^5.1.0",
    "@ngx-translate/core": "^13.0.0",
    "@ngx-translate/http-loader": "^6.0.0",
-    "@nrwl/angular": "12.3.3",
+    "@nrwl/angular": "12.3.6",
    "@pdftron/webviewer": "7.3.2",
    "@swimlane/ngx-charts": "^17.0.1",
    "file-saver": "^2.0.5",
    "jwt-decode": "^3.1.2",
    "keycloak-angular": "^8.2.0",
-    "keycloak-js": "13.0.0",
+    "keycloak-js": "13.0.1",
    "lodash": "^4.17.21",
    "moment": "^2.29.1",
    "ngx-color-picker": "^11.0.0",
-    "ngx-toastr": "^13.2.1",
-    "papaparse": "^5.3.0",
+    "ngx-toastr": "^14.0.0",
+    "papaparse": "^5.3.1",
    "rxjs": "~6.6.7",
    "scroll-into-view-if-needed": "^2.2.28",
    "streamsaver": "^2.0.5",
@ -69,45 +69,45 @@
    "zone.js": "0.11.4"
  },
  "devDependencies": {
-    "@angular-devkit/build-angular": "12.0.0",
-    "@angular-eslint/eslint-plugin": "12.0.0",
-    "@angular-eslint/eslint-plugin-template": "12.0.0",
-    "@angular-eslint/template-parser": "12.0.0",
-    "@angular/cli": "12.0.0",
-    "@angular/compiler-cli": "12.0.0",
-    "@angular/language-service": "12.0.0",
-    "@nrwl/cli": "12.3.3",
-    "@nrwl/cypress": "12.3.3",
-    "@nrwl/eslint-plugin-nx": "12.3.3",
-    "@nrwl/jest": "12.3.3",
-    "@nrwl/linter": "12.3.3",
-    "@nrwl/tao": "12.3.3",
-    "@nrwl/workspace": "12.3.3",
+    "@angular-devkit/build-angular": "12.0.4",
+    "@angular-eslint/eslint-plugin": "12.1.0",
+    "@angular-eslint/eslint-plugin-template": "12.1.0",
+    "@angular-eslint/template-parser": "12.1.0",
+    "@angular/cli": "12.0.4",
+    "@angular/compiler-cli": "12.0.4",
+    "@angular/language-service": "12.0.4",
+    "@nrwl/cli": "12.3.6",
+    "@nrwl/cypress": "12.3.6",
+    "@nrwl/eslint-plugin-nx": "12.3.6",
+    "@nrwl/jest": "12.3.6",
+    "@nrwl/linter": "12.3.6",
+    "@nrwl/tao": "12.3.6",
+    "@nrwl/workspace": "12.3.6",
    "@types/cypress": "^1.1.3",
    "@types/jest": "26.0.23",
-    "@types/node": "15.3.0",
-    "@typescript-eslint/eslint-plugin": "4.23.0",
-    "@typescript-eslint/parser": "4.23.0",
+    "@types/node": "15.12.2",
+    "@typescript-eslint/eslint-plugin": "4.26.1",
+    "@typescript-eslint/parser": "4.26.1",
    "cypress": "^6.9.1",
    "cypress-file-upload": "^5.0.7",
-    "cypress-keycloak": "^1.6.0",
+    "cypress-keycloak": "^1.7.0",
    "cypress-keycloak-commands": "^1.2.0",
-    "cypress-localstorage-commands": "^1.4.4",
-    "dotenv": "9.0.2",
-    "eslint": "7.26.0",
+    "cypress-localstorage-commands": "^1.4.5",
+    "dotenv": "10.0.0",
+    "eslint": "7.28.0",
    "eslint-config-prettier": "8.3.0",
-    "eslint-plugin-import": "latest",
+    "eslint-plugin-import": "2.23.4",
    "google-translate-api-browser": "^1.1.71",
    "husky": "4.3.8",
-    "jest": "26.6.3",
-    "jest-preset-angular": "8.4.0",
-    "ng-packagr": "12.0.0",
-    "prettier": "2.3.0",
+    "jest": "27.0.4",
+    "jest-preset-angular": "9.0.3",
+    "ng-packagr": "12.0.5",
+    "prettier": "2.3.1",
    "pretty-quick": "^3.1.0",
    "superagent": "^6.1.0",
    "superagent-promise": "^1.1.0",
-    "ts-jest": "26.5.6",
-    "ts-node": "9.1.1",
+    "ts-jest": "27.0.3",
+    "ts-node": "10.0.0",
    "typescript": "4.2.4",
    "webpack": "^4.18.1"
  }
--- a/yarn.lock
+++ b/yarn.lock