TSK-1787: Update frontend dependencies, including Angular 13

.gitignore

@@ -46,6 +46,8 @@ node_modules/
 
 
 # misc
+
+web/.angular/cache/
 /.sass-cache
 /connect.lock
 /coverage

web/angular.json

@@ -73,13 +73,6 @@
           "options": {
             "browserTarget": "taskana-web:build"
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
-            "exclude": []
-          }
         }
       }
     },

web/cypress/support/commands.js

@@ -22,9 +22,9 @@ Cypress.Commands.add('visitTestWorkbasket', () => {
   cy.visit(Cypress.env('appUrl') + Cypress.env('adminUrl') + '/workbaskets');
   cy.verifyPageLoad('/workbaskets');
 
-  // since the list is loaded dynamically, we need to explicitly wait 700ms for the results
+  // since the list is loaded dynamically, we need to explicitly wait 1000ms for the results
   // in order to avoid errors regarding detached DOM elements although it is a bad practice
-  cy.wait(700);
+  cy.wait(1000);
   cy.get('mat-selection-list').contains(Cypress.env('testValueWorkbasketSelectionName')).should('exist').click();
   cy.visitWorkbasketsInformationPage();
 });

web/package.json

@@ -7,8 +7,8 @@
     "start": "ng serve",
     "start:hmr": "ng serve --hmr --no-live-reload",
     "build": "ng build",
-    "build:prod": "ng build --prod=true",
+    "build:prod": "ng build --configuration production",
-    "build:prod-silent": "ng build --prod=true --no-progress",
+    "build:prod-silent": "ng build --configuration production --no-progress",
     "test": "jest",
     "test:watch": "jest --watch",
     "lint": "eslint --ext .ts src",
@@ -22,57 +22,57 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "12.2.10",
+    "@angular/animations": "13.1.2",
-    "@angular/cdk": "12.2.10",
+    "@angular/cdk": "13.1.2",
-    "@angular/common": "12.2.10",
+    "@angular/common": "13.1.2",
-    "@angular/core": "12.2.10",
+    "@angular/core": "13.1.2",
-    "@angular/forms": "12.2.10",
+    "@angular/forms": "13.1.2",
-    "@angular/material": "12.2.10",
+    "@angular/material": "13.1.2",
-    "@angular/platform-browser": "12.2.10",
+    "@angular/platform-browser": "13.1.2",
-    "@angular/platform-browser-dynamic": "12.2.10",
+    "@angular/platform-browser-dynamic": "13.1.2",
-    "@angular/router": "12.2.10",
+    "@angular/router": "13.1.2",
     "@circlon/angular-tree-component": "11.0.4",
-    "@ngneat/hot-toast": "3.4.1",
+    "@ngneat/hot-toast": "4.1.0",
-    "@ngneat/overview": "2.0.4",
+    "@ngneat/overview": "3.0.2",
-    "@ngxs/store": "3.7.2",
+    "@ngxs/store": "3.7.3",
-    "angular-svg-icon": "12.0.0",
+    "angular-svg-icon": "13.0.0",
     "chart.js": "2.9.4",
-    "core-js": "3.18.3",
+    "core-js": "3.20.3",
     "file-saver": "2.0.5",
     "lodash": "^4.5.0",
     "ng2-charts": "2.4.3",
     "ngx-bootstrap": "7.1.0",
     "ngx-infinite-scroll": "10.0.1",
-    "rxjs": "7.4.0",
+    "rxjs": "7.5.2",
     "tslib": "2.3.1",
     "zone.js": "0.11.4"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "12.1.3",
+    "@angular-builders/custom-webpack": "13.0.0",
-    "@angular-devkit/build-angular": "12.2.10",
+    "@angular-devkit/build-angular": "13.1.3",
-    "@angular/cli": "12.2.10",
+    "@angular/cli": "13.1.3",
-    "@angular/compiler": "12.2.10",
+    "@angular/compiler": "13.1.2",
-    "@angular/compiler-cli": "12.2.10",
+    "@angular/compiler-cli": "13.1.2",
-    "@ngxs/devtools-plugin": "3.7.2",
+    "@ngxs/devtools-plugin": "3.7.3",
     "@types/jest": "26.0.23",
-    "@types/node": "16.11.1",
+    "@types/lodash": "4.14.178",
-    "@typescript-eslint/eslint-plugin": "5.1.0",
+    "@types/node": "16.11.20",
-    "@typescript-eslint/eslint-plugin-tslint": "5.1.0",
+    "@typescript-eslint/eslint-plugin": "5.9.1",
-    "@typescript-eslint/parser": "5.1.0",
+    "@typescript-eslint/eslint-plugin-tslint": "5.9.1",
-    "compression-webpack-plugin": "9.0.0",
+    "@typescript-eslint/parser": "5.9.1",
-    "cypress": "7.7.0",
+    "compression-webpack-plugin": "9.2.0",
-    "@types/lodash": "^4.14.178",
+    "cypress": "9.2.1",
-    "cypress-intellij-reporter": "0.0.6",
+    "cypress-intellij-reporter": "0.0.7",
-    "eslint": "8.0.1",
+    "eslint": "8.7.0",
     "eslint-config-prettier": "8.3.0",
-    "eslint-plugin-import": "2.25.2",
+    "eslint-plugin-import": "2.25.4",
     "eslint-plugin-prettier": "4.0.0",
     "jest": "27.0.5",
-    "jest-preset-angular": "9.0.4",
+    "jest-preset-angular": "11.0.1",
-    "prettier": "2.4.1",
+    "prettier": "2.5.1",
-    "sass": "1.43.2",
+    "sass": "1.48.0",
     "ts-jest": "27.0.7",
     "tslint": "6.1.3",
-    "typescript": "4.2.4"
+    "typescript": "4.5.4"
   }
-}
+}

web/src/app/shared/components/task-filter/task-filter.component.ts

@@ -25,7 +25,7 @@ export class TaskFilterComponent implements OnInit, OnDestroy {
   }
 
   setStatus(state: TaskState) {
-    this.filter.state = state ? [state] : [];
+    this.filter.state = state !== TaskState.ALL ? [state] : [];
     this.updateState();
   }
 

web/src/app/shared/components/workbasket-filter/workbasket-filter.component.ts

@@ -64,7 +64,7 @@ export class WorkbasketFilterComponent implements OnInit, OnDestroy {
   }
 
   selectType(type: WorkbasketType) {
-    this.filter.type = type ? [type] : [];
+    this.filter.type = type !== WorkbasketType.ALL ? [type] : [];
   }
 
   search() {

web/src/app/shared/models/task-state.ts

@@ -1,4 +1,5 @@
 export enum TaskState {
+  ALL = 'ALL',
   READY = 'READY',
   CLAIMED = 'CLAIMED',
   COMPLETED = 'COMPLETED',
@@ -7,7 +8,7 @@ export enum TaskState {
 }
 
 export const ALL_STATES: Map<TaskState, string> = new Map([
-  [undefined, 'All'],
+  [TaskState.ALL, 'All'],
   [TaskState.READY, 'Ready'],
   [TaskState.CLAIMED, 'Claimed'],
   [TaskState.COMPLETED, 'Completed'],

web/src/app/shared/models/workbasket-type.ts

@@ -1,4 +1,5 @@
 export enum WorkbasketType {
+  ALL = 'ALL',
   PERSONAL = 'PERSONAL',
   GROUP = 'GROUP',
   CLEARANCE = 'CLEARANCE',
@@ -6,7 +7,7 @@ export enum WorkbasketType {
 }
 
 export const ALL_TYPES: Map<WorkbasketType, string> = new Map([
-  [undefined, 'All'],
+  [WorkbasketType.ALL, 'All'],
   [WorkbasketType.PERSONAL, 'Personal'],
   [WorkbasketType.GROUP, 'Group'],
   [WorkbasketType.CLEARANCE, 'Clearance'],

web/src/app/shared/shared.module.ts

@@ -132,7 +132,6 @@ const DECLARATIONS = [
     ClassificationsService,
     WorkbasketService,
     ObtainMessageService
-  ],
+  ]
-  entryComponents: [DialogPopUpComponent]
 })
 export class SharedModule {}

web/src/polyfills.ts

@@ -18,18 +18,9 @@
  * BROWSER POLYFILLS
  */
 
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
-/** IE10 and IE11 requires the following to support `@angular/animation`. */
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
 /** Evergreen browsers require these. */
 import 'core-js/es/reflect';
 
-/** ALL Firefox browsers require the following to support `@angular/animation`. */
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
 /** *************************************************************************************************
  * Zone JS is required by Angular itself.
  */

web/src/theme/custom-theme-material.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 @include mat.core();
 
 $my-app-primary: mat.define-palette(mat.$blue-grey-palette);