update angular to v17.

This commit is contained in:
Diamantis Tziotzios 2024-04-08 16:22:56 +03:00
parent bf868d306a
commit 29d38630e1
14 changed files with 86 additions and 139 deletions

View File

@ -1,5 +1,5 @@
# stage1 as builder # stage1 as builder
FROM node:18-alpine AS builder FROM node:20-alpine AS builder
# copy the package.json to install dependencies # copy the package.json to install dependencies
COPY package.json ./ COPY package.json ./

View File

@ -87,19 +87,19 @@
}, },
"serve": { "serve": {
"builder": "@angular-devkit/build-angular:dev-server", "builder": "@angular-devkit/build-angular:dev-server",
"options": { "options": {
"browserTarget": "dmp-frontend:build" "buildTarget": "dmp-frontend:build"
}, },
"configurations": { "configurations": {
"production": { "production": {
"browserTarget": "dmp-frontend:build:production" "buildTarget": "dmp-frontend:build:production"
} }
} }
}, },
"extract-i18n": { "extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n", "builder": "@angular-devkit/build-angular:extract-i18n",
"options": { "options": {
"browserTarget": "dmp-frontend:build" "buildTarget": "dmp-frontend:build"
} }
}, },
"test": { "test": {

View File

@ -6,8 +6,6 @@
"module": "commonjs", "module": "commonjs",
"target": "es5", "target": "es5",
"types": [ "types": [
"jasmine",
"jasminewd2",
"node" "node"
] ]
} }

View File

@ -12,63 +12,55 @@
}, },
"private": true, "private": true,
"dependencies": { "dependencies": {
"@angular/animations": "^16.2.8", "@angular/animations": "^17.3.3",
"@angular/common": "^16.2.8", "@angular/common": "^17.3.3",
"@angular/compiler": "^16.2.8", "@angular/compiler": "^17.3.3",
"@angular/core": "^16.2.8", "@angular/core": "^17.3.3",
"@angular/forms": "^16.2.8", "@angular/forms": "^17.3.3",
"@angular/material-moment-adapter": "^16.2.7", "@angular/material-moment-adapter": "^17.3.3",
"@angular/platform-browser": "^16.2.8", "@angular/platform-browser": "^17.3.3",
"@kolkov/angular-editor": "^2.1.0", "@kolkov/angular-editor": "^2.1.0",
"@ngx-translate/core": "^15.0.0", "@ngx-translate/core": "^15.0.0",
"@ngx-translate/http-loader": "^8.0.0", "@ngx-translate/http-loader": "^8.0.0",
"@swimlane/ngx-datatable": "^20.1.0", "@swimlane/ngx-datatable": "^20.1.0",
"@tinymce/tinymce-angular": "^7.0.0", "@tinymce/tinymce-angular": "^7.0.0",
"@w11k/angular-sticky-things": "^1.5.2",
"bootstrap": "^4.6.0", "bootstrap": "^4.6.0",
"cookieconsent": "^3.1.1", "cookieconsent": "^3.1.1",
"core-js": "^3.33.0",
"dragula": "^3.7.3", "dragula": "^3.7.3",
"file-saver": "^2.0.5", "file-saver": "^2.0.5",
"moment": "^2.29.4", "moment": "^2.30.1",
"keycloak-angular": "^14.0.0", "keycloak-angular": "^15.2.1",
"keycloak-js": "^20.0.5", "keycloak-js": "^24.0.2",
"moment-timezone": "^0.5.43", "moment-timezone": "^0.5.45",
"ng-dialog-animation": "^9.0.4", "ng-dialog-animation": "^9.0.4",
"ng2-dragula": "^5.0.1", "ng2-dragula": "^5.0.1",
"ngx-cookie-service": "^16.0.1", "ngx-cookie-service": "^17.1.0",
"ngx-cookieconsent": "^4.0.2", "ngx-cookieconsent": "^6.0.0",
"ngx-dropzone": "^3.0.0", "ngx-dropzone": "^3.0.0",
"ngx-guided-tour": "^2.0.1", "ngx-guided-tour": "^2.0.1",
"ngx-matomo-client": "^5.0.4", "ngx-matomo-client": "^6.1.2",
"pako": "^1.0.11", "rxjs": "^7.4.0",
"rxjs": "^6.3.2",
"tinymce": "^6.7.0", "tinymce": "^6.7.0",
"ts-simple-nameof": "^1.3.1", "ts-simple-nameof": "^1.3.1",
"tslib": "^2.6.2", "tslib": "^2.6.2",
"zone.js": "~0.13.0" "zone.js": "~0.14.4"
}, },
"devDependencies": { "devDependencies": {
"@angular-devkit/build-angular": "^16.2.5", "@angular-devkit/build-angular": "^17.3.3",
"@angular/cdk": "^16.2.7", "@angular/cdk": "^17.3.3",
"@angular/cli": "16.2.5", "@angular/cli": "17.3.3",
"@angular/compiler-cli": "^16.2.8", "@angular/compiler-cli": "^17.3.3",
"@angular/language-service": "^16.2.8", "@angular/language-service": "^17.3.3",
"@angular/material": "^16.2.7", "@angular/material": "^17.3.3",
"@angular/platform-browser-dynamic": "^16.2.8", "@angular/platform-browser-dynamic": "^17.3.3",
"@angular/router": "^16.2.8", "@angular/router": "^17.3.3",
"@types/dragula": "^3.7.2", "@types/dragula": "^3.7.4",
"@types/file-saver": "^2.0.5", "@types/file-saver": "^2.0.7",
"@types/gapi": "^0.0.45",
"@types/gapi.auth2": "^0.0.58",
"@types/jasmine": "~5.1.0",
"@types/jasminewd2": "~2.0.11",
"@types/moment-timezone": "^0.5.13", "@types/moment-timezone": "^0.5.13",
"@types/node": "^20.8.2", "@types/node": "^20.12.5",
"@types/pako": "^1.0.3", "codelyzer": "^6.0.2",
"codelyzer": "^0.0.28", "ts-node": "~10.9.2",
"ts-node": "~10.9.1",
"tslint": "~6.1.0", "tslint": "~6.1.0",
"typescript": "^4.9.3" "typescript": "^5.2.0"
} }
} }

View File

@ -1,20 +1,19 @@
import { HttpErrorResponse } from '@angular/common/http'; import { HttpErrorResponse } from '@angular/common/http';
import { Injectable } from '@angular/core'; import { Injectable, NgZone } from '@angular/core';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { AppRole } from '@app/core/common/enum/app-role';
import { AppPermission } from '@app/core/common/enum/permission.enum';
import { AppAccount } from '@app/core/model/auth/principal'; import { AppAccount } from '@app/core/model/auth/principal';
import { SnackBarNotificationLevel, UiNotificationService } from '@app/core/services/notification/ui-notification-service'; import { SnackBarNotificationLevel, UiNotificationService } from '@app/core/services/notification/ui-notification-service';
import { BaseService } from '@common/base/base.service'; import { BaseService } from '@common/base/base.service';
import { Guid } from '@common/types/guid';
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
import { KeycloakEventType, KeycloakService } from 'keycloak-angular';
import { Observable, Subject, forkJoin, from, of } from 'rxjs'; import { Observable, Subject, forkJoin, from, of } from 'rxjs';
import { exhaustMap, map, takeUntil } from 'rxjs/operators'; import { exhaustMap, map, takeUntil } from 'rxjs/operators';
import { ConfigurationService } from '../configuration/configuration.service'; import { ConfigurationService } from '../configuration/configuration.service';
import { Guid } from '@common/types/guid';
import { KeycloakEventType, KeycloakService } from 'keycloak-angular';
import { NgZone } from '@angular/core';
import { PrincipalService } from '../http/principal.service'; import { PrincipalService } from '../http/principal.service';
import { AppRole } from '@app/core/common/enum/app-role';
import { AppPermission } from '@app/core/common/enum/permission.enum';
export interface ResolutionContext { export interface ResolutionContext {
roles: AppRole[]; roles: AppRole[];
@ -238,7 +237,7 @@ export class AuthService extends BaseService {
} }
public getUserProfileAvatarUrl(): string { public getUserProfileAvatarUrl(): string {
if (this.appAccount && this.appAccount.profile) { if (this.appAccount && this.appAccount.profile && !this.appAccount.profile.avatarUrl) {
return this.appAccount.profile.avatarUrl; return this.appAccount.profile.avatarUrl;
} }
return null; return null;
@ -253,28 +252,26 @@ export class AuthService extends BaseService {
public authenticate(returnUrl: string) { public authenticate(returnUrl: string) {
this.keycloakService.isLoggedIn().then((isLoggedIn) => { if (!this.keycloakService.isLoggedIn()) {
if (!isLoggedIn) { this.keycloakService.login({
this.keycloakService.login({ scope: this.installationConfiguration.keycloak.scope,
scope: this.installationConfiguration.keycloak.scope, })
}) .then(() => {
.then(() => { this.keycloakService.keycloakEvents$.subscribe({
this.keycloakService.keycloakEvents$.subscribe({ next: (e) => {
next: (e) => { if (
if ( e.type === KeycloakEventType.OnTokenExpired
e.type === KeycloakEventType.OnTokenExpired ) {
) { this.refreshToken({});
this.refreshToken({}); }
} },
}, });
}); this.onAuthenticateSuccess(returnUrl);
this.onAuthenticateSuccess(returnUrl); })
}) .catch((error) => this.onAuthenticateError(error));
.catch((error) => this.onAuthenticateError(error)); } else {
} else { this.zone.run(() => this.router.navigate([returnUrl]));
this.zone.run(() => this.router.navigate([returnUrl])); }
}
});
} }
public refreshToken(httpParams?: Object): Promise<boolean> { public refreshToken(httpParams?: Object): Promise<boolean> {
@ -323,7 +320,7 @@ export class AuthService extends BaseService {
); );
this.zone.run(() => this.router.navigate([returnUrl])); this.zone.run(() => this.router.navigate([returnUrl]));
} }
onAuthenticateSuccessReload(): void { onAuthenticateSuccessReload(): void {
this.authState(true); this.authState(true);
this.uiNotificationService.snackBarNotification( this.uiNotificationService.snackBarNotification(

View File

@ -30,25 +30,22 @@ export class LoginComponent extends BaseComponent implements OnInit {
ngOnInit(): void { ngOnInit(): void {
this.returnUrl = this.route.snapshot.queryParamMap.get('returnUrl') || '/'; this.returnUrl = this.route.snapshot.queryParamMap.get('returnUrl') || '/';
this.keycloakService.isLoggedIn().then(isLoggedIn => { if (!this.keycloakService.isLoggedIn()) {
if (!isLoggedIn) { this.authService.authenticate('/');
this.authService.authenticate('/'); } else {
} else { this.authService.prepareAuthRequest(from(this.keycloakService.getToken())).pipe(takeUntil(this._destroyed)).subscribe(
this.authService.prepareAuthRequest(from(this.keycloakService.getToken())).pipe(takeUntil(this._destroyed)).subscribe( () => {
() => { let returnUrL = this.returnUrl;
let returnUrL = this.returnUrl; let queryParams: Params = {};
let queryParams: Params = {}; if (!this.authService.selectedTenant()) {
if(!this.authService.selectedTenant()){ this.authService.selectedTenant('default');
this.authService.selectedTenant('default'); // returnUrL = '/login/post';
// returnUrL = '/login/post'; // queryParams.returnUrl = this.returnUrl;
// queryParams.returnUrl = this.returnUrl; }
} this.zone.run(() => this.router.navigate([returnUrL], { queryParams }));
this.zone.run(() => this.router.navigate([returnUrL],{queryParams} )); },
}, (error) => this.authService.authenticate('/'));
(error) => this.authService.authenticate('/') );
} }
});
} }
} }

View File

@ -1,15 +1,3 @@
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins/_breakpoints";
@include media-breakpoint-down(sm) {
.lightblue-btn {
font-size: 12px;
}
::ng-deep .mat-paginator-container {
height: auto !important;
}
}
.header-image { .header-image {
background: url("/assets/images/new-dashboard-bg.png") no-repeat; background: url("/assets/images/new-dashboard-bg.png") no-repeat;

View File

@ -1,15 +1,3 @@
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins/_breakpoints";
@include media-breakpoint-down(sm) {
.lightblue-btn {
font-size: 12px;
}
:host ::ng-deep .mat-paginator-container {
height: auto !important;
}
}
:host ::ng-deep .mat-paginator-container { :host ::ng-deep .mat-paginator-container {
flex-direction: row-reverse !important; flex-direction: row-reverse !important;

View File

@ -10,7 +10,7 @@
<a class="logo" [routerLink]="['home']"><img class="logo-image" src="../../../assets/images/nav-logo.png"></a> <a class="logo" [routerLink]="['home']"><img class="logo-image" src="../../../assets/images/nav-logo.png"></a>
<button class="navbar-toggler ml-auto" type="button" [matMenuTriggerFor]="toggleMenu"> <button class="navbar-toggler ml-auto" type="button" [matMenuTriggerFor]="toggleMenu">
<img *ngIf="this.isAuthenticated();else loginoption" mat-card-avatar class="my-mat-card-avatar" [src]="this.getPrincipalAvatar()" (error)="this.applyFallbackAvatar($event)"> <img *ngIf="this.isAuthenticated();else loginoption" mat-card-avatar class="my-mat-card-avatar" [src]="getPrincipalAvatar() ?? getDefaultAvatar()" (error)="this.applyFallbackAvatar($event)">
</button> </button>
<!-- <button class="navbar-toggler ml-auto" type="button" [matMenuTriggerFor]="toggleMenu" (mouseenter)="openMyMenu()"> <!-- <button class="navbar-toggler ml-auto" type="button" [matMenuTriggerFor]="toggleMenu" (mouseenter)="openMyMenu()">
<mat-icon class="toggle-icon">view_headline</mat-icon> <mat-icon class="toggle-icon">view_headline</mat-icon>
@ -54,8 +54,8 @@
<ul class="navbar-nav"> <ul class="navbar-nav">
<!-- Login --> <!-- Login -->
<li class="nav-item" *ngIf="isAuthenticated();else loginoption"> <li class="nav-item" *ngIf="this.isAuthenticated();else loginoption">
<img mat-card-avatar class="my-mat-card-avatar" [src]="this.getPrincipalAvatar()" (error)="this.applyFallbackAvatar($event)" (click)="openProfile()" [matTooltip]="this.getPrincipalName()"> <img mat-card-avatar class="my-mat-card-avatar" [src]="getPrincipalAvatar() ?? getDefaultAvatar()" (error)="this.applyFallbackAvatar($event)" (click)="openProfile()" [matTooltip]="this.getPrincipalName()">
<!--<img mat-card-avatar class="my-mat-card-avatar" *ngIf="!this.principalHasAvatar()" [src]="this.getDefaultAvatar()" (click)="openProfile()"> --> <!--<img mat-card-avatar class="my-mat-card-avatar" *ngIf="!this.principalHasAvatar()" [src]="this.getDefaultAvatar()" (click)="openProfile()"> -->
</li> </li>
<ng-template #loginoption> <ng-template #loginoption>
@ -70,10 +70,6 @@
<div *ngIf="!(isAuthenticated() && onInvalidUrl())"> <div *ngIf="!(isAuthenticated() && onInvalidUrl())">
<!-- <div *ngIf="!(isAuthenticated() && onInvalidUrl())" (mouseleave)="closeMyMenu()"> --> <!-- <div *ngIf="!(isAuthenticated() && onInvalidUrl())" (mouseleave)="closeMyMenu()"> -->
<ul class="list m-2"> <ul class="list m-2">
<!-- <li *ngIf="isAuthenticated();else loginoption" class="d-flex justify-content-center avatar"> -->
<!-- <img mat-card-avatar class="my-mat-card-avatar" [src]="this.getPrincipalAvatar()" (error)="this.applyFallbackAvatar($event)" (click)="openProfile()" [matTooltip]="this.getPrincipalName()"> -->
<!--<img mat-card-avatar class="my-mat-card-avatar" *ngIf="!this.principalHasAvatar()" [src]="this.getDefaultAvatar()" (click)="openProfile()"> -->
<!-- </li> -->
<ng-template #loginoption> <ng-template #loginoption>
<li class="d-flex justify-content-center avatar"> <li class="d-flex justify-content-center avatar">
<button mat-button [routerLink]=" ['/login'] " class="d-flex justify-content-center"> <button mat-button [routerLink]=" ['/login'] " class="d-flex justify-content-center">

View File

@ -53,10 +53,6 @@ export class UserDialogComponent implements OnInit, OnDestroy {
return this.authentication.getUserProfileAvatarUrl() && this.authentication.getUserProfileAvatarUrl().length > 0; return this.authentication.getUserProfileAvatarUrl() && this.authentication.getUserProfileAvatarUrl().length > 0;
} }
public getPrincipalAvatar(): string {
return this.authentication.getUserProfileAvatarUrl();
}
public getDefaultAvatar(): string { public getDefaultAvatar(): string {
return 'assets/images/profile-placeholder.png'; return 'assets/images/profile-placeholder.png';
} }

View File

@ -26,7 +26,7 @@
<p><strong>What are your choices regarding cookies</strong></p> <p><strong>What are your choices regarding cookies</strong></p>
<p><span>If you&#39;d like to delete cookies or instruct your web browser to delete or refuse cookies, please visit the help pages of your web browser.</span></p> <p><span>If you&#39;d like to delete cookies or instruct your web browser to delete or refuse cookies, please visit the help pages of your web browser.</span></p>
<p><span>Please note, however, that if you delete cookies or refuse to accept them, you might not be able to use all of the features we offer, you may not be able to store your preferences, and some of our pages might not display properly.</span></p> <p><span>Please note, however, that if you delete cookies or refuse to accept them, you might not be able to use all of the features we offer, you may not be able to store your preferences, and some of our pages might not display properly.</span></p>
<p><span>Please contact OpenAIRE&rsquo;s Data Protection Officer for further </span><span>information on the cookies that we use and their purposes</span><span>: </span><span class="c5"><a href="mailto:dpo@openaire.eu">dpo@openaire.eu</a></span><span>&nbsp;</span></p> <p><span>Please contact OpenAIRE&rsquo;s Data Protection Officer for further </span><span>information on the cookies that we use and their purposes</span><span>: </span><span class="c5"><a href="mailto:dpo@openaire.eu">dpo&#64;openaire.eu</a></span><span>&nbsp;</span></p>
<p><span></span></p> <p><span></span></p>
<p><span>Last updated: 16/06/2020</span></p> <p><span>Last updated: 16/06/2020</span></p>
</div> </div>

View File

@ -54,7 +54,7 @@
<li> <li>
<h4>Swimlane</h4> <h4>Swimlane</h4>
<p>(The MIT License)</p> <p>(The MIT License)</p>
<p>Copyright (c) 2019 Swimlane < info@swimlane.com> <p>Copyright (c) 2019 Swimlane < info&#64;swimlane.com>
</p> </p>
<p>Permission is hereby granted, free of charge, to any person obtaining <p>Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the a copy of this software and associated documentation files (the

View File

@ -136,10 +136,6 @@ export class SidebarComponent implements OnInit {
return this.authentication.getUserProfileAvatarUrl() != null && this.authentication.getUserProfileAvatarUrl().length > 0; return this.authentication.getUserProfileAvatarUrl() != null && this.authentication.getUserProfileAvatarUrl().length > 0;
} }
public getPrincipalAvatar(): string {
return this.authentication.getUserProfileAvatarUrl();
}
public getDefaultAvatar(): string { public getDefaultAvatar(): string {
return 'assets/images/profile-placeholder.png'; return 'assets/images/profile-placeholder.png';
} }

View File

@ -4,7 +4,6 @@
"outDir": "../out-tsc/spec", "outDir": "../out-tsc/spec",
"baseUrl": "./", "baseUrl": "./",
"types": [ "types": [
"jasmine",
"node" "node"
] ]
}, },