Closes kadai-io#58 - Update Angular to v15

CRoberto1926 · Oct 9, 2024 · 037088b · 037088b
1 parent 3ecf871
commit 037088b
Show file tree

Hide file tree

Showing 85 changed files with 2,710 additions and 2,274 deletions.
diff --git a/web/angular.json b/web/angular.json
@@ -26,10 +26,15 @@
             "polyfills": "src/polyfills.ts",
             "assets": ["src/assets", "src/environments/data-sources"],
             "styles": [
+              "./node_modules/@ngneat/hot-toast/src/styles/styles.css",
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
+              "./node_modules/@circlon/angular-tree-component/css/angular-tree-component.css",
               "src/theme/_main.scss",
               "src/theme/custom-theme-material.scss"
             ],
+            "stylePreprocessorOptions": {
+              "includePaths": ["src/theme"]
+            },
             "scripts": []
           },
           "configurations": {

diff --git a/web/package.json b/web/package.json
@@ -22,39 +22,39 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "14.3.0",
-    "@angular/cdk": "14.2.7",
-    "@angular/common": "14.3.0",
-    "@angular/core": "14.3.0",
-    "@angular/forms": "14.3.0",
-    "@angular/material": "14.2.7",
-    "@angular/platform-browser": "14.3.0",
-    "@angular/platform-browser-dynamic": "14.3.0",
-    "@angular/router": "14.3.0",
+    "@angular/animations": "15.2.10",
+    "@angular/cdk": "15.2.9",
+    "@angular/common": "15.2.10",
+    "@angular/core": "15.2.10",
+    "@angular/forms": "15.2.10",
+    "@angular/material": "15.2.9",
+    "@angular/platform-browser": "15.2.10",
+    "@angular/platform-browser-dynamic": "15.2.10",
+    "@angular/router": "15.2.10",
     "@circlon/angular-tree-component": "11.0.4",
-    "@ngneat/hot-toast": "4.1.0",
+    "@ngneat/hot-toast": "5.0.2",
     "@ngneat/overview": "3.0.4",
-    "@ngxs/router-plugin": "3.7.3",
-    "@ngxs/store": "3.7.3",
+    "@ngxs/router-plugin": "3.8.2",
+    "@ngxs/store": "3.8.2",
     "angular-svg-icon": "13.0.0",
     "chart.js": "2.9.4",
     "core-js": "3.21.1",
     "file-saver": "2.0.5",
     "lodash": "4.17.21",
     "ng2-charts": "2.4.3",
-    "ngx-bootstrap": "8.0.0",
-    "ngx-infinite-scroll": "13.0.1",
+    "ngx-bootstrap": "10.3.0",
+    "ngx-infinite-scroll": "15.0.0",
     "rxjs": "7.5.5",
     "tslib": "2.3.1",
     "zone.js": "0.11.5"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "14.1.0",
-    "@angular-devkit/build-angular": "14.2.13",
-    "@angular/cli": "14.2.13",
-    "@angular/compiler": "14.3.0",
-    "@angular/compiler-cli": "14.3.0",
-    "@ngxs/devtools-plugin": "3.7.3",
+    "@angular-builders/custom-webpack": "15.0.0",
+    "@angular-devkit/build-angular": "15.2.11",
+    "@angular/cli": "15.2.11",
+    "@angular/compiler": "15.2.10",
+    "@angular/compiler-cli": "15.2.10",
+    "@ngxs/devtools-plugin": "3.8.2",
     "@types/jest": "27.4.1",
     "@types/lodash": "4.14.181",
     "@types/node": "17.0.23",
@@ -69,12 +69,12 @@
     "eslint-plugin-import": "2.26.0",
     "eslint-plugin-prettier": "4.0.0",
     "jest": "28.1.3",
-    "jest-preset-angular": "12.1.0",
+    "jest-preset-angular": "12.2.6",
     "prettier": "2.6.2",
     "sass": "1.49.11",
     "ts-jest": "28.0.8",
     "tslint": "6.1.3",
-    "typescript": "4.6.3"
+    "typescript": "4.8.4"
   },
   "packageManager": "[email protected]"
 }
diff --git a/web/src/app/administration/administration.module.ts b/web/src/app/administration/administration.module.ts
@@ -28,7 +28,6 @@ import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import { ClassificationTypesSelectorComponent } from 'app/administration/components/classification-types-selector/classification-types-selector.component';
 import { ClassificationCategoriesService } from 'app/shared/services/classification-categories/classification-categories.service';
 import { AccessItemsManagementComponent } from 'app/administration/components/access-items-management/access-items-management.component';
-import { MatRadioModule } from '@angular/material/radio';
 import { AdministrationRoutingModule } from './administration-routing.module';
 /**
  * Components
@@ -111,7 +110,6 @@ const DECLARATIONS = [
   declarations: DECLARATIONS,
   imports: [
     MODULES,
-    MatRadioModule,
     MatFormFieldModule,
     MatSelectModule,
     MatMenuModule,

diff --git a/.../administration/components/access-items-management/access-items-management.component.scss b/.../administration/components/access-items-management/access-items-management.component.scss
@@ -16,7 +16,7 @@
  *
  */
 
-@import '../../../../theme/colors';
+@import 'colors';
 
 table {
   font-family: arial, sans-serif;
@@ -25,7 +25,7 @@ table {
   margin-bottom: 10px;
 }
 
-::ng-deep .mat-header-cell {
+::ng-deep .mat-mdc-header-cell {
   color: black;
   font-weight: bold;
 }
@@ -119,7 +119,12 @@ tr:first-child > td {
   }
 }
 
-.mat-mini-fab {
+::ng-deep .access-items__groups-expansion-panel * th,
+::ng-deep .access-items__permissions-expansion-panel * th {
+  text-align: left;
+}
+
+.mat-mdc-mini-fab {
   outline-color: none;
   border: none;
   box-shadow: none !important;

diff --git a/.../administration/components/administration-overview/administration-overview.component.html b/.../administration/components/administration-overview/administration-overview.component.html
@@ -17,31 +17,37 @@
   -->
 
 <div class="administration-overview">
-  <nav backgroundColor="#f5f5f5" class="administration-overview__navbar" mat-tab-nav-bar>
-    <a (click)="selectedTab = 'workbaskets'" [active]="selectedTab == 'workbaskets'"
-       class="administration-overview__navbar-links" mat-tab-link
-       routerLink="/kadai/administration/workbaskets">Workbaskets</a>
-    <a (click)="selectedTab = 'classifications'" [active]="selectedTab == 'classifications'"
-       class="administration-overview__navbar-links" mat-tab-link
-       routerLink="/kadai/administration/classifications">Classifications</a>
-    <a (click)="selectedTab = 'access-items-management'"
-       [active]="selectedTab == 'access-items-management'"
-       class="administration-overview__navbar-links"
-       mat-tab-link routerLink="/kadai/administration/access-items-management">Access Items
-      Management</a>
-    <a (click)="selectedTab = 'task-routing'" *ngIf="(routingAccess)"
-       [active]="selectedTab == 'task-routing'"
-       class="administration-overview__navbar-links" mat-tab-link
-       routerLink="/kadai/administration/task-routing">Task Routing</a>
-  </nav>
-  <div class="administration-overview__domain">
-    <mat-form-field appearance="legacy">
-      <mat-select [value]="selectedDomain" matTooltip="Select domain">
-        <mat-option (click)="switchDomain(domain)" *ngFor="let domain of domains" [value]="domain">
-          {{domain ? domain : 'MASTER DOMAIN'}}
-        </mat-option>
-      </mat-select>
-    </mat-form-field>
+  <div class="administration-overview__navbar-container">
+    <nav [tabPanel]="administrationOverviewTabPanel" class="administration-overview__navbar"
+         mat-stretch-tabs="false" mat-tab-nav-bar>
+      <a (click)="selectedTab = 'workbaskets'" [active]="selectedTab == 'workbaskets'"
+         class="administration-overview__navbar-links" mat-tab-link
+         routerLink="/kadai/administration/workbaskets">Workbaskets</a>
+      <a (click)="selectedTab = 'classifications'" [active]="selectedTab == 'classifications'"
+         class="administration-overview__navbar-links" mat-tab-link
+         routerLink="/kadai/administration/classifications">Classifications</a>
+      <a (click)="selectedTab = 'access-items-management'"
+         [active]="selectedTab == 'access-items-management'"
+         class="administration-overview__navbar-links"
+         mat-tab-link routerLink="/kadai/administration/access-items-management">Access Items
+        Management</a>
+      <a (click)="selectedTab = 'task-routing'" *ngIf="(routingAccess)"
+         [active]="selectedTab == 'task-routing'"
+         class="administration-overview__navbar-links" mat-tab-link
+         routerLink="/kadai/administration/task-routing">Task Routing</a>
+    </nav>
+    <div class="administration-overview__domain">
+      <mat-form-field>
+        <mat-select [value]="selectedDomain" matTooltip="Select domain">
+          <mat-option (click)="switchDomain(domain)" *ngFor="let domain of domains"
+                      [value]="domain">
+            {{ domain ? domain : 'MASTER DOMAIN' }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+    </div>
   </div>
-  <router-outlet></router-outlet>
+  <mat-tab-nav-panel #administrationOverviewTabPanel>
+    <router-outlet></router-outlet>
+  </mat-tab-nav-panel>
 </div>
diff --git a/.../administration/components/administration-overview/administration-overview.component.scss b/.../administration/components/administration-overview/administration-overview.component.scss
@@ -16,30 +16,39 @@
  *
  */
 
-@import 'src/theme/_colors.scss';
+@import 'colors';
 
-.administration-overview__navbar {
-  position: relative;
-}
+.administration-overview {
+  &__navbar-container {
+    display: flex;
+    background-color: $light-grey;
+    justify-content: space-between;
+    align-items: flex-end;
+  }
+
+  &__navbar {
+    position: relative;
+    background-color: $light-grey;
+    flex-grow: 2;
+  }
 
-.administration-overview__navbar {
-  background-color: $light-grey;
+  &__domain {
+    height: 48px;
+    margin-right: 24px;
+    z-index: 11;
+    flex-shrink: 1;
+  }
 }
 
-.administration-overview__domain {
-  max-height: 48px;
-  position: absolute;
-  top: 46px;
-  right: 24px;
-  z-index: 11;
+::ng-deep .administration-overview__navbar-container * .mat-mdc-text-field-wrapper {
+  height: 48px;
 }
 
-.mat-tab-link {
+.mat-mdc-tab-link {
   color: #1a202c !important;
 }
 
-.mat-tab-label-active {
+.mdc-tab--active {
   font-weight: bolder !important;
-  color: unset;
   opacity: 1;
 }