From 81576e4ceb2fc53e59035c68f6ec318e0692fdc5 Mon Sep 17 00:00:00 2001
From: dweinholz <david-weinholz@web.de>
Date: Wed, 19 Apr 2023 14:03:12 +0200
Subject: [PATCH 01/15] mail works

---
 src/app/api-connector/vo.service.ts           | 444 ++++----
 .../project-email-modal.component.html        | 127 +++
 .../project-email-modal.component.ts          |  54 +
 .../projext-email-modal.component.scss        |  10 +
 .../shared_modules/shared-module.module.ts    |  61 +-
 src/app/vo_manager/VoOverviewComponent.ts     | 992 +++++++++---------
 src/app/vo_manager/voOverview.component.html  |   8 +
 7 files changed, 974 insertions(+), 722 deletions(-)
 create mode 100644 src/app/shared/modal/email/project-email-modal/project-email-modal.component.html
 create mode 100644 src/app/shared/modal/email/project-email-modal/project-email-modal.component.ts
 create mode 100644 src/app/shared/modal/email/project-email-modal/projext-email-modal.component.scss

diff --git a/src/app/api-connector/vo.service.ts b/src/app/api-connector/vo.service.ts
index b175667402..dc69559cd8 100644
--- a/src/app/api-connector/vo.service.ts
+++ b/src/app/api-connector/vo.service.ts
@@ -1,217 +1,241 @@
-import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
-import { HttpClient, HttpParams } from '@angular/common/http';
-import { map } from 'rxjs/operators';
-import { ApiSettings } from './api-settings.service';
-import { IResponseTemplate } from './response-template';
-import { Resources } from '../vo_manager/resources/resources';
-import { ProjectMember } from '../projectmanagement/project_member.model';
-import { Application } from '../applications/application.model/application.model';
-import { MaintenanceTimeFrame } from '../vo_manager/maintenance/maintenanceTimeFrame.model';
+import {Injectable} from '@angular/core';
+import {Observable} from 'rxjs';
+import {HttpClient, HttpParams} from '@angular/common/http';
+import {map} from 'rxjs/operators';
+import {ApiSettings} from './api-settings.service';
+import {IResponseTemplate} from './response-template';
+import {Resources} from '../vo_manager/resources/resources';
+import {ProjectMember} from '../projectmanagement/project_member.model';
+import {Application} from '../applications/application.model/application.model';
+import {MaintenanceTimeFrame} from '../vo_manager/maintenance/maintenanceTimeFrame.model';
 
 /**
  * Service which provides vo methods.
  */
 @Injectable()
 export class VoService {
-	constructor(private http: HttpClient) {
-		this.http = http;
-	}
-
-	sendTestError(): Observable<IResponseTemplate> {
-		return this.http.get<IResponseTemplate>(`${ApiSettings.getApiBaseURL()}voManagers/test_bug/`, {
-			withCredentials: true,
-		});
-	}
-
-	isVo(): Observable<IResponseTemplate> {
-		return this.http.get<IResponseTemplate>(`${ApiSettings.getApiBaseURL()}voManagers/current/status/`, {
-			withCredentials: true,
-		});
-	}
-
-	getNewsletterSubscriptionCounter(): Observable<IResponseTemplate> {
-		return this.http.get<IResponseTemplate>(`${ApiSettings.getApiBaseURL()}newsletter/subscription/counter/`, {
-			withCredentials: true,
-		});
-	}
-
-	terminateProject(groupId: number | string): Observable<object> {
-		return this.http.delete(`${ApiSettings.getApiBaseURL()}vo/projects/${groupId}/`, {
-			withCredentials: true,
-		});
-	}
-
-	removeResourceFromGroup(groupid: number | string): Observable<object> {
-		return this.http.delete(`${ApiSettings.getApiBaseURL()}vo/projects/${groupid}/resource/`, {
-			withCredentials: true,
-		});
-	}
-
-	resumeProject(groupid: number | string): Observable<object> {
-		return this.http.post(`${ApiSettings.getApiBaseURL()}vo/projects/${groupid}/resource/`, null, {
-			withCredentials: true,
-		});
-	}
-
-	getAllGroupsWithDetails(): Observable<Application[]> {
-		return this.http
-			.get<Application[]>(`${ApiSettings.getApiBaseURL()}vo/projects/details/`, {
-				withCredentials: true,
-			})
-			.pipe(
-				map((applications: Application[]): Application[] => applications.map((application: Application): Application => new Application(application))),
-			);
-	}
-
-	getProjectStatus(groupid: number | string): Observable<IResponseTemplate> {
-		return this.http.get<IResponseTemplate>(`${ApiSettings.getApiBaseURL()}vo/projects/${groupid}/status/`, {
-			withCredentials: true,
-		});
-	}
-
-	getVoProjectResources(): Observable<Resources[]> {
-		return this.http.get<Resources[]>(`${ApiSettings.getApiBaseURL()}vo/projects/resources/`, {
-			withCredentials: true,
-		});
-	}
-
-	getVoProjectResourcesTimeframes(): Observable<Resources[]> {
-		return this.http.get<Resources[]>(`${ApiSettings.getApiBaseURL()}vo/projects/resources/timeFrames/`, {
-			withCredentials: true,
-		});
-	}
-
-	getVoProjectDates(): Observable<Resources[]> {
-		return this.http.get<Resources[]>(`${ApiSettings.getApiBaseURL()}vo/projects/dates/`, {
-			withCredentials: true,
-		});
-	}
-
-	getVoProjectCounter(): Observable<Resources[]> {
-		return this.http.get<Resources[]>(`${ApiSettings.getApiBaseURL()}vo/projects/counter/`, {
-			withCredentials: true,
-		});
-	}
-
-	setProjectStatus(groupid: number | string, status: number): Observable<any> {
-		const params: HttpParams = new HttpParams().set('status', status.toString());
-
-		return this.http.post(`${ApiSettings.getApiBaseURL()}vo/projects/${groupid}/status/`, params, {
-			withCredentials: true,
-		});
-	}
-
-	sendNewsletterToVo(
-		subject: string,
-		message: string,
-		type: string,
-		adminsOnly: boolean,
-		reply?: string,
-	): Observable<IResponseTemplate> {
-		const params: HttpParams = new HttpParams()
-			.set('subject', subject)
-			.set('message', message)
-			.set('admins_only', adminsOnly)
-			.set('reply', reply)
-			.set('type', type);
-
-		return this.http.post<IResponseTemplate>(`${ApiSettings.getApiBaseURL()}voManagers/current/newsletter/`, params, {
-			withCredentials: true,
-		});
-	}
-
-	sendMailToVo(
-		subject: string,
-		message: string,
-		facility: string,
-		type: string,
-		adminsOnly: boolean,
-		expiredTemplate: boolean,
-		removalDate: Date,
-		reply?: string,
-	): Observable<any> {
-		const params: HttpParams = new HttpParams()
-			.set('subject', subject)
-			.set('message', message)
-			.set('admins_only', adminsOnly)
-			.set('reply', reply)
-			.set('facility', facility)
-			.set('expired_template', expiredTemplate)
-			.set('removal_date', removalDate.toUTCString())
-			.set('type', type);
-
-		return this.http.post<IResponseTemplate>(`${ApiSettings.getApiBaseURL()}voManagers/current/voMail/`, params, {
-			withCredentials: true,
-		});
-	}
-
-	/**
-	 * Get members of a project with emails.
-	 *
-	 * @param groupid id of the group
-	 * @returns
-	 */
-	getVoGroupRichMembers(groupid: number | string): Observable<ProjectMember[]> {
-		return this.http.get<ProjectMember[]>(`${ApiSettings.getApiBaseURL()}vo/projects/${groupid}/members/`, {
-			withCredentials: true,
-		});
-	}
-
-	setCurrentUserProcessingVoManager(application_id: number | string): Observable<any> {
-		return this.http.post(`${ApiSettings.getApiBaseURL()}vo/projects/${application_id}/vo_manager/`, null, {
-			withCredentials: true,
-		});
-	}
-
-	unsetProcessingVoManager(application_id: number | string): Observable<any> {
-		return this.http.delete(`${ApiSettings.getApiBaseURL()}vo/projects/${application_id}/vo_manager/`, {
-			withCredentials: true,
-		});
-	}
-
-	setProtected(groupid: number | string, set: boolean): Observable<any> {
-		const parameters: HttpParams = new HttpParams().set('action', set ? 'set' : 'unset');
-
-		return this.http.get(`${ApiSettings.getApiBaseURL()}vo/projects/${groupid}/protected/`, {
-			withCredentials: true,
-			params: parameters,
-		});
-	}
-
-	declineTermination(groupid: number | string): Observable<any> {
-		return this.http.post(`${ApiSettings.getApiBaseURL()}vo/projects/${groupid}/termination/decline/`, {
-			withCredentials: true,
-		});
-	}
-
-	loadMaintenanceTimeFrames(): Observable<MaintenanceTimeFrame[]> {
-		return this.http
-			.get<MaintenanceTimeFrame[]>(`${ApiSettings.getApiBaseURL()}voManagers/maintenance/`, {
-				withCredentials: true,
-			})
-			.pipe(
-				map((maintenanceTimeFrames: MaintenanceTimeFrame[]): MaintenanceTimeFrame[] => maintenanceTimeFrames.map(
-					(maintenanceTimeFrame: MaintenanceTimeFrame): MaintenanceTimeFrame => new MaintenanceTimeFrame(maintenanceTimeFrame),
-				)),
-			);
-	}
-
-	addMaintenanceTimeFrame(timeframe: MaintenanceTimeFrame): Observable<MaintenanceTimeFrame> {
-		const params: HttpParams = new HttpParams()
-			.set('start_time', timeframe.start_time.toJSON())
-			.set('end_time', timeframe.end_time.toJSON())
-			.set('name', timeframe.name)
-			.set('message', timeframe.message);
-
-		return this.http.post<MaintenanceTimeFrame>(`${ApiSettings.getApiBaseURL()}voManagers/maintenance/`, params, {
-			withCredentials: true,
-		});
-	}
-
-	deleteMaintenanceTimeFrame(timeframe: MaintenanceTimeFrame): Observable<any> {
-		return this.http.delete<any>(`${ApiSettings.getApiBaseURL()}voManagers/maintenance/${timeframe.id}/`, {
-			withCredentials: true,
-		});
-	}
+		constructor(private http: HttpClient) {
+				this.http = http;
+		}
+
+		sendTestError(): Observable<IResponseTemplate> {
+				return this.http.get<IResponseTemplate>(`${ApiSettings.getApiBaseURL()}voManagers/test_bug/`, {
+						withCredentials: true,
+				});
+		}
+
+		isVo(): Observable<IResponseTemplate> {
+				return this.http.get<IResponseTemplate>(`${ApiSettings.getApiBaseURL()}voManagers/current/status/`, {
+						withCredentials: true,
+				});
+		}
+
+		getNewsletterSubscriptionCounter(): Observable<IResponseTemplate> {
+				return this.http.get<IResponseTemplate>(`${ApiSettings.getApiBaseURL()}newsletter/subscription/counter/`, {
+						withCredentials: true,
+				});
+		}
+
+		terminateProject(groupId: number | string): Observable<object> {
+				return this.http.delete(`${ApiSettings.getApiBaseURL()}vo/projects/${groupId}/`, {
+						withCredentials: true,
+				});
+		}
+
+		removeResourceFromGroup(groupid: number | string): Observable<object> {
+				return this.http.delete(`${ApiSettings.getApiBaseURL()}vo/projects/${groupid}/resource/`, {
+						withCredentials: true,
+				});
+		}
+
+		resumeProject(groupid: number | string): Observable<object> {
+				return this.http.post(`${ApiSettings.getApiBaseURL()}vo/projects/${groupid}/resource/`, null, {
+						withCredentials: true,
+				});
+		}
+
+		getAllGroupsWithDetails(): Observable<Application[]> {
+				return this.http
+						.get<Application[]>(`${ApiSettings.getApiBaseURL()}vo/projects/details/`, {
+								withCredentials: true,
+						})
+						.pipe(
+								map((applications: Application[]): Application[] => applications.map((application: Application): Application => new Application(application))),
+						);
+		}
+
+		getProjectStatus(groupid: number | string): Observable<IResponseTemplate> {
+				return this.http.get<IResponseTemplate>(`${ApiSettings.getApiBaseURL()}vo/projects/${groupid}/status/`, {
+						withCredentials: true,
+				});
+		}
+
+		getVoProjectResources(): Observable<Resources[]> {
+				return this.http.get<Resources[]>(`${ApiSettings.getApiBaseURL()}vo/projects/resources/`, {
+						withCredentials: true,
+				});
+		}
+
+		getVoProjectResourcesTimeframes(): Observable<Resources[]> {
+				return this.http.get<Resources[]>(`${ApiSettings.getApiBaseURL()}vo/projects/resources/timeFrames/`, {
+						withCredentials: true,
+				});
+		}
+
+		getVoProjectDates(): Observable<Resources[]> {
+				return this.http.get<Resources[]>(`${ApiSettings.getApiBaseURL()}vo/projects/dates/`, {
+						withCredentials: true,
+				});
+		}
+
+		getVoProjectCounter(): Observable<Resources[]> {
+				return this.http.get<Resources[]>(`${ApiSettings.getApiBaseURL()}vo/projects/counter/`, {
+						withCredentials: true,
+				});
+		}
+
+		setProjectStatus(groupid: number | string, status: number): Observable<any> {
+				const params: HttpParams = new HttpParams().set('status', status.toString());
+
+				return this.http.post(`${ApiSettings.getApiBaseURL()}vo/projects/${groupid}/status/`, params, {
+						withCredentials: true,
+				});
+		}
+
+		sendNewsletterToVo(
+				subject: string,
+				message: string,
+				type: string,
+				adminsOnly: boolean,
+				reply?: string,
+		): Observable<IResponseTemplate> {
+				const params: HttpParams = new HttpParams()
+						.set('subject', subject)
+						.set('message', message)
+						.set('admins_only', adminsOnly)
+						.set('reply', reply)
+						.set('type', type);
+
+				return this.http.post<IResponseTemplate>(`${ApiSettings.getApiBaseURL()}voManagers/current/newsletter/`, params, {
+						withCredentials: true,
+				});
+		}
+
+		sendMailToVo(
+				subject: string,
+				message: string,
+				facility: string,
+				type: string,
+				adminsOnly: boolean,
+				expiredTemplate: boolean,
+				removalDate: Date,
+				reply?: string,
+		): Observable<any> {
+				const params: HttpParams = new HttpParams()
+						.set('subject', subject)
+						.set('message', message)
+						.set('admins_only', adminsOnly)
+						.set('reply', reply)
+						.set('facility', facility)
+						.set('expired_template', expiredTemplate)
+						.set('removal_date', removalDate.toUTCString())
+						.set('type', type);
+
+				return this.http.post<IResponseTemplate>(`${ApiSettings.getApiBaseURL()}voManagers/current/voMail/`, params, {
+						withCredentials: true,
+				});
+		}
+
+		sendMailToProjects(
+				projectIds: (string | number)[],
+				subject: string,
+				message: string,
+				adminsOnly: boolean,
+				reply?: string,
+		): Observable<any> {
+
+
+				return this.http.post<IResponseTemplate>(`${ApiSettings.getApiBaseURL()}voManagers/current/voMail/projects/`,
+						{project_ids: projectIds, subject: subject, message: message, adminsOnly: adminsOnly, reply: reply}, {
+								withCredentials: true,
+						});
+		}
+
+
+		getMailTemplates(): Observable<string[]> {
+
+
+				return this.http.get<string[]>(`${ApiSettings.getApiBaseURL()}voManagers/current/voMail/projects/templates/`, {
+						withCredentials: true,
+				});
+		}
+
+		/**
+		 * Get members of a project with emails.
+		 *
+		 * @param groupid id of the group
+		 * @returns
+		 */
+		getVoGroupRichMembers(groupid: number | string): Observable<ProjectMember[]> {
+				return this.http.get<ProjectMember[]>(`${ApiSettings.getApiBaseURL()}vo/projects/${groupid}/members/`, {
+						withCredentials: true,
+				});
+		}
+
+		setCurrentUserProcessingVoManager(application_id: number | string): Observable<any> {
+				return this.http.post(`${ApiSettings.getApiBaseURL()}vo/projects/${application_id}/vo_manager/`, null, {
+						withCredentials: true,
+				});
+		}
+
+		unsetProcessingVoManager(application_id: number | string): Observable<any> {
+				return this.http.delete(`${ApiSettings.getApiBaseURL()}vo/projects/${application_id}/vo_manager/`, {
+						withCredentials: true,
+				});
+		}
+
+		setProtected(groupid: number | string, set: boolean): Observable<any> {
+				const parameters: HttpParams = new HttpParams().set('action', set ? 'set' : 'unset');
+
+				return this.http.get(`${ApiSettings.getApiBaseURL()}vo/projects/${groupid}/protected/`, {
+						withCredentials: true,
+						params: parameters,
+				});
+		}
+
+		declineTermination(groupid: number | string): Observable<any> {
+				return this.http.post(`${ApiSettings.getApiBaseURL()}vo/projects/${groupid}/termination/decline/`, {
+						withCredentials: true,
+				});
+		}
+
+		loadMaintenanceTimeFrames(): Observable<MaintenanceTimeFrame[]> {
+				return this.http
+						.get<MaintenanceTimeFrame[]>(`${ApiSettings.getApiBaseURL()}voManagers/maintenance/`, {
+								withCredentials: true,
+						})
+						.pipe(
+								map((maintenanceTimeFrames: MaintenanceTimeFrame[]): MaintenanceTimeFrame[] => maintenanceTimeFrames.map(
+										(maintenanceTimeFrame: MaintenanceTimeFrame): MaintenanceTimeFrame => new MaintenanceTimeFrame(maintenanceTimeFrame),
+								)),
+						);
+		}
+
+		addMaintenanceTimeFrame(timeframe: MaintenanceTimeFrame): Observable<MaintenanceTimeFrame> {
+				const params: HttpParams = new HttpParams()
+						.set('start_time', timeframe.start_time.toJSON())
+						.set('end_time', timeframe.end_time.toJSON())
+						.set('name', timeframe.name)
+						.set('message', timeframe.message);
+
+				return this.http.post<MaintenanceTimeFrame>(`${ApiSettings.getApiBaseURL()}voManagers/maintenance/`, params, {
+						withCredentials: true,
+				});
+		}
+
+		deleteMaintenanceTimeFrame(timeframe: MaintenanceTimeFrame): Observable<any> {
+				return this.http.delete<any>(`${ApiSettings.getApiBaseURL()}voManagers/maintenance/${timeframe.id}/`, {
+						withCredentials: true,
+				});
+		}
 }
diff --git a/src/app/shared/modal/email/project-email-modal/project-email-modal.component.html b/src/app/shared/modal/email/project-email-modal/project-email-modal.component.html
new file mode 100644
index 0000000000..cea130c303
--- /dev/null
+++ b/src/app/shared/modal/email/project-email-modal/project-email-modal.component.html
@@ -0,0 +1,127 @@
+<div class="modal-header">
+    <h4 class="modal-title" data-test-id="confirmation_modal_title">Sent Mail to specific projects</h4>
+    <button type="button" class="close" style="cursor: pointer" (click)="bsModalRef.hide()" aria-label="Close">
+        <span aria-hidden="true">&times;</span>
+    </button>
+</div>
+<div class="modal-body">
+    <div>
+        Send Mail to:
+        <ul>
+            <li *ngFor="let pr of selectedProjects">{{pr.project_application_shortname}}</li>
+        </ul>
+    </div>
+    <form class="form-horizontal" id="email_form" #f="ngForm">
+
+
+        <div class="form-group row">
+            <div class="col-md-auto">
+                <div class="form-check">
+                    <input
+                            class="form-check-input"
+                            type="checkbox"
+                            [(ngModel)]="emailAdminsOnly"
+                            id="adminOnlyCheckbox"
+                    />
+                    <label class="form-check-label" for="adminOnlyCheckbox"> Group administrators only </label>
+                </div>
+            </div>
+        </div>
+        <div
+
+                class="form-group row"
+                [ngClass]="{
+							'has-danger': emailSub.invalid && (emailSub.dirty || emailSub.touched),
+							'has-success': emailSub.valid && (emailSub.dirty || emailSub.touched)
+						}"
+        >
+            <label class="col-md-12 control-label"><strong>Email subject*</strong></label>
+            <div class="col-md-12">
+                <input
+                        required
+                        id="emailSubject"
+                        name="emailSub"
+                        placeholder="Subject"
+                        class="form-control"
+                        type="text"
+                        [(ngModel)]="emailSubject"
+                        minlength="1"
+                        #emailSub="ngModel"
+                        [ngClass]="{
+									'is-invalid': emailSub.invalid && (emailSub.dirty || emailSub.touched),
+									'is-valid': emailSub.valid && (emailSub.dirty || emailSub.touched)
+								}"
+                />
+            </div>
+        </div>
+
+        <div class="form-group row">
+            <label class="col-md-12 control-label"><strong>Reply to (optional)</strong></label>
+            <div class="col-md-12">
+                <input
+                        id="reply_to"
+                        name="emailReply"
+                        placeholder=""
+                        class="form-control"
+                        type="text"
+                        [(ngModel)]="emailReply"
+                        #emailRep="ngModel"
+                        pattern="([ ]*)(?!(^[.-].*|[^@]*[.-]@|.*\.{2,}.*)|^.{254}.)([a-zA-Z0-9!#$%&'*+\/=?^_`{|}~.-]+@)(?!-.*|.*-\.)([a-zA-Z0-9-]{1,63}\.)+[a-zA-Z]{2,15}([ ]*)"
+                        [ngClass]="{
+									'is-invalid': emailRep.invalid && (emailRep.dirty || emailRep.touched),
+									'is-valid': emailRep.valid && (emailRep.dirty || emailRep.touched)
+								}"
+                />
+            </div>
+        </div>
+        <!-- Textarea -->
+        <div class="form-group row">
+            <label class="col-md-12 control-label"><strong>Email text*</strong></label>
+            <div class="col-md-12">
+							<textarea
+                                    minlength="1"
+                                    required
+                                    class="form-control"
+                                    id="emailText"
+                                    name="emailText"
+                                    [(ngModel)]="emailText"
+                                    type="text"
+                                    #emailT="ngModel"
+                                    [ngClass]="{
+									'is-invalid': emailT.invalid && (emailT.dirty || emailT.touched),
+									'is-valid': emailT.valid && (emailT.dirty || emailT.touched)
+								}"
+                            ></textarea>
+            </div>
+        </div>
+    </form>
+<div class="templates-container">
+  <p>The following keys can be used as variables:</p>
+  <div class="templates-list">
+    <span *ngFor="let template of templates">{{ '{' + template + '}' }}, </span>
+  </div>
+</div>
+
+
+
+</div>
+<div class="modal-footer">
+    <button
+            class="btn btn-secondary col-md-4"
+            type="reset"
+            data-test-id="close_confirmation_modal_btn"
+            (click)=" bsModalRef.hide()"
+    >
+        Abort & Close
+    </button>
+    <button
+            class="btn btn-success col-md-4"
+            [disabled]="
+						f.invalid
+					"
+            data-test-id="confirm_confirmation_modal_btn"
+            (click)="sentProjectsMail(); bsModalRef.hide()"
+    >
+        Sent Mail
+    </button>
+</div>
diff --git a/src/app/shared/modal/email/project-email-modal/project-email-modal.component.ts b/src/app/shared/modal/email/project-email-modal/project-email-modal.component.ts
new file mode 100644
index 0000000000..e810f9c2a6
--- /dev/null
+++ b/src/app/shared/modal/email/project-email-modal/project-email-modal.component.ts
@@ -0,0 +1,54 @@
+import {Component, EventEmitter, Input, OnInit} from '@angular/core';
+import {Application} from '../../../../applications/application.model/application.model';
+import {BsModalRef} from 'ngx-bootstrap/modal';
+import {VoService} from '../../../../api-connector/vo.service';
+import {IResponseTemplate} from '../../../../api-connector/response-template';
+
+@Component({
+		selector: 'app-project-email-modal',
+		templateUrl: './project-email-modal.component.html',
+		styleUrls: ['./projext-email-modal.component.scss'],
+
+})
+export class ProjectEmailModalComponent implements OnInit {
+
+		//currently only for vo
+		@Input() selectedProjects: Application[];
+		emailAdminsOnly: boolean;
+		emailSubject: string;
+		emailReply: string;
+		emailText: string;
+		templates: string[];
+
+		public mailSuccesfullySent: EventEmitter<boolean> = new EventEmitter();
+
+		constructor(public bsModalRef: BsModalRef, private voService: VoService) {
+				// eslint-disable-next-line no-empty-function
+		}
+
+		ngOnInit() {
+				this.getMailTemplates()
+		}
+
+		getMailTemplates(): void {
+				this.voService.getMailTemplates().subscribe((res: string[]) => {
+						this.templates = res
+				})
+		}
+
+		sentProjectsMail(): void {
+				const project_ids = this.selectedProjects.map((pr: Application) => {
+						return pr.project_application_perun_id;
+				});
+
+				this.voService.sendMailToProjects(project_ids, this.emailSubject, this.emailText, this.emailAdminsOnly, this.emailReply).subscribe((res: IResponseTemplate) => {
+						this.mailSuccesfullySent.emit(res.value as boolean)
+				}, () => {
+						this.mailSuccesfullySent.emit(false)
+				})
+		}
+
+		ngOnDestroy(): void {
+				this.bsModalRef.hide();
+		}
+}
diff --git a/src/app/shared/modal/email/project-email-modal/projext-email-modal.component.scss b/src/app/shared/modal/email/project-email-modal/projext-email-modal.component.scss
new file mode 100644
index 0000000000..6e91f2f7da
--- /dev/null
+++ b/src/app/shared/modal/email/project-email-modal/projext-email-modal.component.scss
@@ -0,0 +1,10 @@
+.templates-container {
+  border: 1px solid #ccc;
+  padding: 10px;
+  background-color: #f9f9f9;
+}
+
+.templates-list {
+  margin: 10px 0;
+  font-family: monospace;
+}
diff --git a/src/app/shared/shared_modules/shared-module.module.ts b/src/app/shared/shared_modules/shared-module.module.ts
index 065edc176a..21aacbc5e6 100644
--- a/src/app/shared/shared_modules/shared-module.module.ts
+++ b/src/app/shared/shared_modules/shared-module.module.ts
@@ -1,34 +1,39 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ModalModule } from 'ngx-bootstrap/modal';
-import { ProgressModule, ToastModule } from '@coreui/angular';
-import { ApplicationBaseClassComponent } from './baseClass/application-base-class.component';
-import { NotificationModalComponent } from '../modal/notification-modal';
-import { InformationToastComponent } from '../toaster/information-toast.component';
-import { ConfirmationModalComponent } from '../modal/confirmation-modal.component';
-import { MigrationInformationComponent } from './migration-information/migration-information.component';
-import { ApplicationBadgesComponent } from './components/applications/application-badges/application-badges.component';
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {ModalModule} from 'ngx-bootstrap/modal';
+import {ProgressModule, ToastModule} from '@coreui/angular';
+import {ApplicationBaseClassComponent} from './baseClass/application-base-class.component';
+import {NotificationModalComponent} from '../modal/notification-modal';
+import {InformationToastComponent} from '../toaster/information-toast.component';
+import {ConfirmationModalComponent} from '../modal/confirmation-modal.component';
+import {MigrationInformationComponent} from './migration-information/migration-information.component';
+import {ApplicationBadgesComponent} from './components/applications/application-badges/application-badges.component';
+import {ProjectEmailModalComponent} from '../modal/email/project-email-modal/project-email-modal.component';
+import {FormsModule} from '@angular/forms';
 
 /**
  * Shared module.
  */
 @NgModule({
-	exports: [
-		ApplicationBaseClassComponent,
-		NotificationModalComponent,
-		ConfirmationModalComponent,
-		InformationToastComponent,
-		MigrationInformationComponent,
-		ApplicationBadgesComponent,
-	],
-	imports: [CommonModule, ModalModule.forRoot(), ToastModule, ProgressModule],
-	declarations: [
-		ApplicationBaseClassComponent,
-		NotificationModalComponent,
-		ConfirmationModalComponent,
-		InformationToastComponent,
-		MigrationInformationComponent,
-		ApplicationBadgesComponent,
-	],
+		exports: [
+				ApplicationBaseClassComponent,
+				NotificationModalComponent,
+				ConfirmationModalComponent,
+				InformationToastComponent,
+				MigrationInformationComponent,
+				ApplicationBadgesComponent,
+				ProjectEmailModalComponent
+		],
+		imports: [CommonModule, ModalModule.forRoot(), ToastModule, ProgressModule, FormsModule],
+		declarations: [
+				ApplicationBaseClassComponent,
+				NotificationModalComponent,
+				ConfirmationModalComponent,
+				InformationToastComponent,
+				MigrationInformationComponent,
+				ApplicationBadgesComponent,
+				ProjectEmailModalComponent
+		],
 })
-export class SharedModuleModule {}
+export class SharedModuleModule {
+}
diff --git a/src/app/vo_manager/VoOverviewComponent.ts b/src/app/vo_manager/VoOverviewComponent.ts
index 407ea8f21f..472e7824cf 100644
--- a/src/app/vo_manager/VoOverviewComponent.ts
+++ b/src/app/vo_manager/VoOverviewComponent.ts
@@ -1,515 +1,539 @@
-import { ngxCsv } from 'ngx-csv/ngx-csv';
+import {ngxCsv} from 'ngx-csv/ngx-csv';
 import {
-	Component, OnInit, QueryList, ViewChildren,
+		Component, OnInit, QueryList, ViewChildren,
 } from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
-import { Observable } from 'rxjs';
-import { VoService } from '../api-connector/vo.service';
-import { ProjectMember } from '../projectmanagement/project_member.model';
-import { GroupService } from '../api-connector/group.service';
-import { ComputecenterComponent } from '../projectmanagement/computecenter.component';
-import { IResponseTemplate } from '../api-connector/response-template';
-import { FacilityService } from '../api-connector/facility.service';
-import { FullLayoutComponent } from '../layouts/full-layout.component';
-import { Application } from '../applications/application.model/application.model';
-import { AbstractBaseClass, Application_States } from '../shared/shared_modules/baseClass/abstract-base-class';
+import {DomSanitizer} from '@angular/platform-browser';
+import {Observable} from 'rxjs';
+import {VoService} from '../api-connector/vo.service';
+import {ProjectMember} from '../projectmanagement/project_member.model';
+import {GroupService} from '../api-connector/group.service';
+import {ComputecenterComponent} from '../projectmanagement/computecenter.component';
+import {IResponseTemplate} from '../api-connector/response-template';
+import {FacilityService} from '../api-connector/facility.service';
+import {FullLayoutComponent} from '../layouts/full-layout.component';
+import {Application} from '../applications/application.model/application.model';
+import {AbstractBaseClass, Application_States} from '../shared/shared_modules/baseClass/abstract-base-class';
 import {
-	NgbdSortableHeaderDirective,
-	SortEvent,
+		NgbdSortableHeaderDirective,
+		SortEvent,
 } from '../shared/shared_modules/directives/nbd-sortable-header.directive';
-import { ProjectSortService } from '../shared/shared_modules/services/project-sort.service';
+import {ProjectSortService} from '../shared/shared_modules/services/project-sort.service';
+import {StopVmComponent} from '../virtualmachines/modals/stop-vm/stop-vm.component';
+import {BsModalRef, BsModalService} from 'ngx-bootstrap/modal';
+import {ProjectEmailModalComponent} from '../shared/modal/email/project-email-modal/project-email-modal.component';
 
 /**
  * Vo Overview component.
  */
 @Component({
-	selector: 'app-vo-overview',
-	templateUrl: 'voOverview.component.html',
-	providers: [VoService, GroupService, FacilityService, ProjectSortService],
+		selector: 'app-vo-overview',
+		templateUrl: 'voOverview.component.html',
+		providers: [VoService, GroupService, FacilityService, ProjectSortService],
 })
 export class VoOverviewComponent extends AbstractBaseClass implements OnInit {
-	title: string = 'VO Overview';
-	public emailSubject: string;
-	public emailReply: string = '';
-	public emailText: string;
-	public emailStatus: number = 0;
-
-	public emailHeader: string;
-	public emailVerify: string;
-	public emailType: number;
-	public emailAdminsOnly: boolean = false;
-	public expiredTemplated: boolean = false;
-
-	public removalDate: Date = new Date();
-	public selectedProject: Application;
-	computecenters: ComputecenterComponent[] = [];
-
-	show_openstack_projects: boolean = true;
-	show_simple_vm_projects: boolean = true;
-	show_simple_vm: boolean = true;
-	show_openstack: boolean = true;
-
-	selectedProjectType: string = 'ALL';
-	selectedFacility: string | number = 'ALL';
-
-	public newsletterSubscriptionCounter: number;
-	isLoaded: boolean = false;
-	member_id: number;
-	projects: Application[] = [];
-	projects_filtered: Application[] = [];
-
-	// modal variables for User list
-	public usersModalProjectMembers: ProjectMember[] = [];
-	public usersModalProjectID: number;
-	public usersModalProjectName: string;
-	public managerFacilities: [string, number][];
-	@ViewChildren(NgbdSortableHeaderDirective) headers: QueryList<NgbdSortableHeaderDirective>;
-
-	applictions$: Observable<Application[]>;
-	total$: Observable<number>;
-
-	// public selectedFacility: [string, number];
-
-	constructor(
-		private fullLayout: FullLayoutComponent,
-		private sanitizer: DomSanitizer,
-		private voService: VoService,
-		private groupservice: GroupService,
-		private facilityService: FacilityService,
-		public sortProjectService: ProjectSortService,
-	) {
-		super();
-	}
-
-	ngOnInit(): void {
-		this.getVoProjects();
-		this.getComputeCenters();
-		this.voService.getNewsletterSubscriptionCounter().subscribe((result: IResponseTemplate): void => {
-			this.newsletterSubscriptionCounter = result.value as number;
-		});
-	}
-
-	onSort({ column, direction }: SortEvent) {
-		// resetting other headers
-		this.headers.forEach(header => {
-			if (header.appSortable !== column) {
-				header.direction = '';
-			}
-		});
-
-		this.sortProjectService.sortColumn = column;
-		this.sortProjectService.sortDirection = direction;
-	}
-
-	switchShowSimpleVmProjects(): void {
-		this.show_simple_vm_projects = !this.show_simple_vm_projects;
-	}
-
-	switchOpenStackVmProjects(): void {
-		this.show_openstack_projects = !this.show_openstack_projects;
-	}
-
-	getApplicationInfos(): void {
-		this.voService.getVoProjectResourcesTimeframes().subscribe();
-
-		this.voService.getVoProjectCounter().subscribe();
-		this.voService.getVoProjectDates().subscribe();
-	}
-
-	sendEmail(subject: string, message: string, reply?: string): void {
-		if (reply) {
-			reply = reply.trim();
+		title: string = 'VO Overview';
+		public emailSubject: string;
+		public emailReply: string = '';
+		public emailText: string;
+		public emailStatus: number = 0;
+
+		public emailHeader: string;
+		public emailVerify: string;
+		public emailType: number;
+		public emailAdminsOnly: boolean = false;
+		public expiredTemplated: boolean = false;
+
+		public removalDate: Date = new Date();
+		public selectedProject: Application;
+		computecenters: ComputecenterComponent[] = [];
+		bsModalRef: BsModalRef;
+
+
+		show_openstack_projects: boolean = true;
+		show_simple_vm_projects: boolean = true;
+		show_simple_vm: boolean = true;
+		show_openstack: boolean = true;
+
+		selectedProjectType: string = 'ALL';
+		selectedFacility: string | number = 'ALL';
+
+		public newsletterSubscriptionCounter: number;
+		isLoaded: boolean = false;
+		member_id: number;
+		projects: Application[] = [];
+		projects_filtered: Application[] = [];
+
+		// modal variables for User list
+		public usersModalProjectMembers: ProjectMember[] = [];
+		public usersModalProjectID: number;
+		public usersModalProjectName: string;
+		public managerFacilities: [string, number][];
+
+		projectMailTemplates: string[] = []
+		@ViewChildren(NgbdSortableHeaderDirective) headers: QueryList<NgbdSortableHeaderDirective>;
+
+		applictions$: Observable<Application[]>;
+		total$: Observable<number>;
+
+		// public selectedFacility: [string, number];
+
+		constructor(
+				private fullLayout: FullLayoutComponent,
+				private sanitizer: DomSanitizer,
+				private voService: VoService,
+				private groupservice: GroupService,
+				private facilityService: FacilityService,
+				public sortProjectService: ProjectSortService,
+				private modalService: BsModalService,
+		) {
+				super();
 		}
-		switch (this.emailType) {
-			case 0: {
-				this.sendMailToVo(
-					subject,
-					message,
-					this.selectedFacility.toString(),
-					this.selectedProjectType,
-					this.emailAdminsOnly,
-					this.expiredTemplated,
-					this.removalDate,
-					reply,
-				);
-				break;
-			}
-			case 1: {
-				this.sendNewsletterToVo(subject, message, this.selectedProjectType, this.emailAdminsOnly, reply);
-				break;
-			}
-			default:
+
+		ngOnInit(): void {
+				this.getVoProjects();
+				this.getMailTemplates()
+				this.getComputeCenters();
+				this.voService.getNewsletterSubscriptionCounter().subscribe((result: IResponseTemplate): void => {
+						this.newsletterSubscriptionCounter = result.value as number;
+				});
 		}
-	}
-
-	sendTestBug(): void {
-		this.voService.sendTestError().subscribe();
-	}
-
-	sendNewsletterToVo(
-		subject: string,
-		message: string,
-		selectedProjectType: string,
-		adminsOnly: boolean,
-		reply?: string,
-	): void {
-		this.voService
-			.sendNewsletterToVo(
-				encodeURIComponent(subject),
-				encodeURIComponent(message),
-				selectedProjectType,
-				adminsOnly,
-				encodeURIComponent(reply),
-			)
-			.subscribe((result: IResponseTemplate): void => {
-				if ((result.value as boolean) === true) {
-					this.emailStatus = 1;
-				} else {
-					this.emailStatus = 2;
+
+
+		openProjectMailsModal(): void {
+				const initialState = {selectedProjects: this.projects};
+
+				this.bsModalRef = this.modalService.show(ProjectEmailModalComponent, {initialState});
+				this.bsModalRef.setClass('modal-lg');
+		}
+
+		getMailTemplates(): void {
+				this.voService.getMailTemplates().subscribe((res: string[]) => {
+						this.projectMailTemplates = res
+						console.log(this.projectMailTemplates)
+				})
+		}
+
+		onSort({column, direction}: SortEvent) {
+				// resetting other headers
+				this.headers.forEach(header => {
+						if (header.appSortable !== column) {
+								header.direction = '';
+						}
+				});
+
+				this.sortProjectService.sortColumn = column;
+				this.sortProjectService.sortDirection = direction;
+		}
+
+		switchShowSimpleVmProjects(): void {
+				this.show_simple_vm_projects = !this.show_simple_vm_projects;
+		}
+
+		switchOpenStackVmProjects(): void {
+				this.show_openstack_projects = !this.show_openstack_projects;
+		}
+
+		getApplicationInfos(): void {
+				this.voService.getVoProjectResourcesTimeframes().subscribe();
+
+				this.voService.getVoProjectCounter().subscribe();
+				this.voService.getVoProjectDates().subscribe();
+		}
+
+		sendEmail(subject: string, message: string, reply?: string): void {
+				if (reply) {
+						reply = reply.trim();
 				}
-			});
-	}
-
-	sendMailToVo(
-		subject: string,
-		message: string,
-		facility: string,
-		type: string,
-		adminsOnly: boolean,
-		expiredTemplate: boolean,
-		removalDate: Date,
-		reply?: string,
-	): void {
-		this.voService
-			.sendMailToVo(
-				encodeURIComponent(subject),
-				encodeURIComponent(message),
-				facility,
-				type,
-				adminsOnly,
-				expiredTemplate,
-				removalDate,
-				encodeURIComponent(reply),
-			)
-			.subscribe((result: IResponseTemplate): void => {
-				if ((result.value as boolean) === true) {
-					this.emailStatus = 1;
-				} else {
-					this.emailStatus = 2;
+				switch (this.emailType) {
+						case 0: {
+								this.sendMailToVo(
+										subject,
+										message,
+										this.selectedFacility.toString(),
+										this.selectedProjectType,
+										this.emailAdminsOnly,
+										this.expiredTemplated,
+										this.removalDate,
+										reply,
+								);
+								break;
+						}
+						case 1: {
+								this.sendNewsletterToVo(subject, message, this.selectedProjectType, this.emailAdminsOnly, reply);
+								break;
+						}
+						default:
 				}
-				this.selectedProjectType = 'ALL';
-				this.selectedFacility = 'ALL';
-			});
-	}
-
-	dayChanged(date: { year: number; month: number; day: number }): void {
-		this.removalDate.setDate(date.day);
-		this.removalDate.setMonth(date.month - 1);
-		this.removalDate.setFullYear(date.year);
-	}
-
-	setEmailType(type: number): void {
-		this.emailType = type;
-		switch (this.emailType) {
-			case 0: {
-				this.emailHeader = 'Send email to selected members of the VO';
-				break;
-			}
-			case 1: {
-				this.emailHeader = 'Send newsletter to VO';
-				break;
-			}
-			default:
 		}
-		this.emailVerify = 'Are you sure you want to send this newsletter to all members of the de.NBI VO?';
-	}
-
-	getFacilityName(): string {
-		if (this.selectedFacility === 'ALL') {
-			return 'of the de.NBI VO';
-		} else {
-			const temp_cc = this.computecenters.find(cc => cc.FacilityId === this.selectedFacility);
-			if (temp_cc === undefined) {
-				return 'of the de.NBI VO';
-			} else {
-				return `of the facility "${temp_cc.Name}"`;
-			}
+
+		sendTestBug(): void {
+				this.voService.sendTestError().subscribe();
 		}
-	}
-
-	getMailConfinementByProjectType(): string {
-		switch (this.selectedProjectType) {
-			case 'ALL_GM':
-				return 'of all active projects';
-			case 'EXP':
-				return 'of all expired projects';
-			case 'SVP':
-				return 'of all SimpleVM projects';
-			case 'OVP':
-				return 'of all OpenStack projects';
-			case 'WSH':
-				return 'of all Workshops';
-			default:
-				return '';
+
+		sendNewsletterToVo(
+				subject: string,
+				message: string,
+				selectedProjectType: string,
+				adminsOnly: boolean,
+				reply?: string,
+		): void {
+				this.voService
+						.sendNewsletterToVo(
+								encodeURIComponent(subject),
+								encodeURIComponent(message),
+								selectedProjectType,
+								adminsOnly,
+								encodeURIComponent(reply),
+						)
+						.subscribe((result: IResponseTemplate): void => {
+								if ((result.value as boolean) === true) {
+										this.emailStatus = 1;
+								} else {
+										this.emailStatus = 2;
+								}
+						});
 		}
-	}
-
-	adjustVerifyText(): void {
-		switch (this.emailType) {
-			case 0: {
-				this.emailVerify = `Are you sure you want to send this email to all ${
-					this.emailAdminsOnly ? ' group administrators' : 'members'
-				} ${this.getMailConfinementByProjectType()} ${this.getFacilityName()} ?`;
-				break;
-			}
-			case 1: {
-				this.emailVerify = `Are you sure you want to send this newsletter to all members ${this.getMailConfinementByProjectType()} ${this.getFacilityName()} ?`;
-				break;
-			}
-			default:
-				this.emailVerify = 'Are you sure you want to send this?';
+
+		sendMailToVo(
+				subject: string,
+				message: string,
+				facility: string,
+				type: string,
+				adminsOnly: boolean,
+				expiredTemplate: boolean,
+				removalDate: Date,
+				reply?: string,
+		): void {
+				this.voService
+						.sendMailToVo(
+								encodeURIComponent(subject),
+								encodeURIComponent(message),
+								facility,
+								type,
+								adminsOnly,
+								expiredTemplate,
+								removalDate,
+								encodeURIComponent(reply),
+						)
+						.subscribe((result: IResponseTemplate): void => {
+								if ((result.value as boolean) === true) {
+										this.emailStatus = 1;
+								} else {
+										this.emailStatus = 2;
+								}
+								this.selectedProjectType = 'ALL';
+								this.selectedFacility = 'ALL';
+						});
 		}
-		if (this.selectedProjectType !== 'EXP') {
-			this.expiredTemplated = false;
+
+		dayChanged(date: { year: number; month: number; day: number }): void {
+				this.removalDate.setDate(date.day);
+				this.removalDate.setMonth(date.month - 1);
+				this.removalDate.setFullYear(date.year);
 		}
-	}
-
-	getVoProjects(): void {
-		this.projects = [];
-		this.voService.getAllGroupsWithDetails().subscribe((applications: Application[]): void => {
-			for (const application of applications) {
-				if (application.project_application_lifetime > 0) {
-					application.lifetime_reached = this.lifeTimeReached(application.lifetime_days, application.DaysRunning);
+
+		setEmailType(type: number): void {
+				this.emailType = type;
+				switch (this.emailType) {
+						case 0: {
+								this.emailHeader = 'Send email to selected members of the VO';
+								break;
+						}
+						case 1: {
+								this.emailHeader = 'Send newsletter to VO';
+								break;
+						}
+						default:
 				}
-				this.projects.push(application);
-			}
-			this.sortProjectService.applications = this.projects;
-			this.applictions$ = this.sortProjectService.applications$;
-			this.total$ = this.sortProjectService.total$;
-
-			this.isLoaded = true;
-		});
-	}
-
-	resetEmailModal(): void {
-		this.emailHeader = null;
-		this.emailSubject = null;
-		this.emailText = null;
-		this.emailType = null;
-		this.emailVerify = null;
-		this.emailReply = '';
-		this.emailStatus = 0;
-		this.emailAdminsOnly = false;
-	}
-
-	public resetNotificationModal(): void {
-		this.notificationModalTitle = 'Notification';
-		this.notificationModalMessage = 'Please wait...';
-		this.notificationModalIsClosable = false;
-		this.notificationModalType = 'info';
-	}
-
-	/**
-	 * Get all computecenters.
-	 */
-	getComputeCenters(): void {
-		this.facilityService.getComputeCenters().subscribe((result: any): void => {
-			for (const cc of result) {
-				const compute_center: ComputecenterComponent = new ComputecenterComponent(
-					cc['compute_center_facility_id'],
-					cc['compute_center_name'],
-					cc['compute_center_login'],
-					cc['compute_center_support_mail'],
-				);
-				this.computecenters.push(compute_center);
-			}
-		});
-	}
-
-	/**
-	 * Bugfix not scrollable site after closing modal
-	 */
-	removeModalOpen(): void {
-		document.body.classList.remove('modal-open');
-	}
-
-	public terminateProject(): void {
-		this.voService.terminateProject(this.selectedProject.project_application_perun_id).subscribe(
-			(): void => {
-				const indexAll: number = this.projects.indexOf(this.selectedProject, 0);
-				if (!this.selectedProject.project_application_openstack_project) {
-					this.projects.splice(indexAll, 1);
-					this.sortProjectService.applications = this.projects;
+				this.emailVerify = 'Are you sure you want to send this newsletter to all members of the de.NBI VO?';
+		}
+
+		getFacilityName(): string {
+				if (this.selectedFacility === 'ALL') {
+						return 'of the de.NBI VO';
 				} else {
-					this.getProjectStatus(this.projects[indexAll]);
+						const temp_cc = this.computecenters.find(cc => cc.FacilityId === this.selectedFacility);
+						if (temp_cc === undefined) {
+								return 'of the de.NBI VO';
+						} else {
+								return `of the facility "${temp_cc.Name}"`;
+						}
 				}
-				this.fullLayout.getGroupsEnumeration();
-				if (this.selectedProject.project_application_openstack_project) {
-					this.updateNotificationModal(
-						'Success',
-						'The request to terminate the project was forwarded to the facility manager.',
-						true,
-						'success',
-					);
-				} else {
-					this.updateNotificationModal('Success', 'The  project was terminated.', true, 'success');
+		}
+
+		getMailConfinementByProjectType(): string {
+				switch (this.selectedProjectType) {
+						case 'ALL_GM':
+								return 'of all active projects';
+						case 'EXP':
+								return 'of all expired projects';
+						case 'SVP':
+								return 'of all SimpleVM projects';
+						case 'OVP':
+								return 'of all OpenStack projects';
+						case 'WSH':
+								return 'of all Workshops';
+						default:
+								return '';
 				}
-			},
-			(error: any): void => {
-				if (error['status'] === 409) {
-					this.updateNotificationModal(
-						'Failed',
-						`The project could not be terminated. Reason: ${error['error']['reason']} for ${error['error']['openstackid']}`,
-						true,
-						'danger',
-					);
-				} else {
-					this.updateNotificationModal('Failed', 'The project could not be terminated.', true, 'danger');
+		}
+
+		adjustVerifyText(): void {
+				switch (this.emailType) {
+						case 0: {
+								this.emailVerify = `Are you sure you want to send this email to all ${
+										this.emailAdminsOnly ? ' group administrators' : 'members'
+								} ${this.getMailConfinementByProjectType()} ${this.getFacilityName()} ?`;
+								break;
+						}
+						case 1: {
+								this.emailVerify = `Are you sure you want to send this newsletter to all members ${this.getMailConfinementByProjectType()} ${this.getFacilityName()} ?`;
+								break;
+						}
+						default:
+								this.emailVerify = 'Are you sure you want to send this?';
 				}
-			},
-		);
-	}
-
-	getProjectStatus(project: Application): void {
-		this.voService.getProjectStatus(project.project_application_perun_id).subscribe((res: any): void => {
-			project.project_application_statuses = res['status'];
-		});
-	}
-
-	suspendProject(project: Application): void {
-		this.voService.removeResourceFromGroup(project.project_application_perun_id).subscribe((): void => {
-			this.getProjectStatus(project);
-			project.project_application_compute_center = null;
-		});
-	}
-
-	resumeProject(project: Application): void {
-		this.voService.resumeProject(project.project_application_perun_id).subscribe((): void => {
-			this.getVoProjects();
-		});
-	}
-
-	declineTermination(project: Application): void {
-		this.voService.declineTermination(project.project_application_perun_id).subscribe(
-			(): void => {
-				this.updateNotificationModal('Success', 'The termination was successfully declined', true, 'success');
-				const indexAll: number = this.projects.indexOf(project, 0);
-				this.getProjectStatus(this.projects[indexAll]);
-			},
-			(): void => {
-				this.updateNotificationModal('Failed', 'The status change was not successful.', true, 'danger');
-			},
-		);
-	}
-
-	setProtected(project: Application, set: boolean): void {
-		this.voService.setProtected(project.project_application_perun_id, set).subscribe(
-			(result: any): void => {
-				this.updateNotificationModal(
-					'Success',
-					result['result'] === 'set'
-						? 'The project was successfully set as protected.'
-						: 'The status "Protected" was removed successfully',
-					true,
-					'success',
-				);
-				const indexAll: number = this.projects.indexOf(project, 0);
-				this.getProjectStatus(this.projects[indexAll]);
-			},
-			(error: any): void => {
-				if (error['status'] === 500) {
-					this.updateNotificationModal('Failed', 'The status change was not successful.', true, 'danger');
+				if (this.selectedProjectType !== 'EXP') {
+						this.expiredTemplated = false;
 				}
-			},
-		);
-	}
-
-	getMembersOfTheProject(projectid: number, projectname: string): void {
-		this.voService.getVoGroupRichMembers(projectid).subscribe((members: ProjectMember[]): void => {
-			this.usersModalProjectID = projectid;
-			this.usersModalProjectName = projectname;
-			this.usersModalProjectMembers = members;
-		});
-	}
-
-	showMembersOfTheProject(projectid: number, projectname: string): void {
-		this.getMembersOfTheProject(projectid, projectname);
-	}
-
-	exportTSV(): void {
-		const data = [];
-		this.sortProjectService.sorted_applications.forEach(application => {
-			const entry = {};
-			for (const key in application) {
-				if (typeof application[key] === 'object') {
-					if (key === 'project_application_pi') {
-						entry['project_application_pi_name'] = application[key].username;
-						entry['project_application_pi_email'] = application[key].email;
-						entry['project_application_pi_affiliations'] = JSON.stringify(application[key].user_affiliations);
-					} else if (key === 'project_application_statuses') {
-						const statuses_strings = [];
-						application[key].forEach(status => {
-							statuses_strings.push(Application_States[status]);
-						});
-						entry[key] = JSON.stringify(statuses_strings);
-					} else if (key === 'project_credit_request') {
-						if (application[key] == null) {
-							entry['project_credit_requested'] = 'FALSE';
-							entry['project_credit_request_id'] = 'NONE';
-							entry['project_credit_request_comment'] = 'NONE';
-							entry['project_credit_request_date_submitted'] = 'NONE';
-							entry['project_credit_request_extra_credits'] = 'NONE';
-							entry['project_credit_request_user_name'] = 'NONE';
-							entry['project_credit_request_user_email'] = 'NONE';
-						} else {
-							entry['project_credit_requested'] = 'TRUE';
-							entry['project_credit_request_id'] = JSON.stringify(application[key].Id);
-							entry['project_credit_request_comment'] = application[key].comment;
-							entry['project_credit_request_date_submitted'] = JSON.stringify(application[key].date_submitted);
-							entry['project_credit_request_extra_credits'] = JSON.stringify(application[key].extra_credits);
-							entry['project_credit_request_user_name'] = JSON.stringify(application[key].user.username);
-							entry['project_credit_request_user_email'] = JSON.stringify(application[key].user.email);
+		}
+
+		getVoProjects(): void {
+				this.projects = [];
+				this.voService.getAllGroupsWithDetails().subscribe((applications: Application[]): void => {
+						for (const application of applications) {
+								if (application.project_application_lifetime > 0) {
+										application.lifetime_reached = this.lifeTimeReached(application.lifetime_days, application.DaysRunning);
+								}
+								this.projects.push(application);
 						}
-					} else if (key === 'project_application_edam_terms') {
-						const edam_names = [];
-						application[key].forEach(edam => {
-							edam_names.push(edam.name);
-						});
-						entry['project_application_edam_terms'] = JSON.stringify(edam_names);
-					} else if (key === 'flavors') {
-						const flavor_names = [];
-						application[key].forEach(flavor => {
-							flavor_names.push(flavor.name);
+						this.sortProjectService.applications = this.projects;
+						this.applictions$ = this.sortProjectService.applications$;
+						this.total$ = this.sortProjectService.total$;
+
+						this.isLoaded = true;
+				});
+		}
+
+		resetEmailModal(): void {
+				this.emailHeader = null;
+				this.emailSubject = null;
+				this.emailText = null;
+				this.emailType = null;
+				this.emailVerify = null;
+				this.emailReply = '';
+				this.emailStatus = 0;
+				this.emailAdminsOnly = false;
+		}
+
+		public resetNotificationModal(): void {
+				this.notificationModalTitle = 'Notification';
+				this.notificationModalMessage = 'Please wait...';
+				this.notificationModalIsClosable = false;
+				this.notificationModalType = 'info';
+		}
+
+		/**
+		 * Get all computecenters.
+		 */
+		getComputeCenters(): void {
+				this.facilityService.getComputeCenters().subscribe((result: any): void => {
+						for (const cc of result) {
+								const compute_center: ComputecenterComponent = new ComputecenterComponent(
+										cc['compute_center_facility_id'],
+										cc['compute_center_name'],
+										cc['compute_center_login'],
+										cc['compute_center_support_mail'],
+								);
+								this.computecenters.push(compute_center);
+						}
+				});
+		}
+
+		/**
+		 * Bugfix not scrollable site after closing modal
+		 */
+		removeModalOpen(): void {
+				document.body.classList.remove('modal-open');
+		}
+
+		public terminateProject(): void {
+				this.voService.terminateProject(this.selectedProject.project_application_perun_id).subscribe(
+						(): void => {
+								const indexAll: number = this.projects.indexOf(this.selectedProject, 0);
+								if (!this.selectedProject.project_application_openstack_project) {
+										this.projects.splice(indexAll, 1);
+										this.sortProjectService.applications = this.projects;
+								} else {
+										this.getProjectStatus(this.projects[indexAll]);
+								}
+								this.fullLayout.getGroupsEnumeration();
+								if (this.selectedProject.project_application_openstack_project) {
+										this.updateNotificationModal(
+												'Success',
+												'The request to terminate the project was forwarded to the facility manager.',
+												true,
+												'success',
+										);
+								} else {
+										this.updateNotificationModal('Success', 'The  project was terminated.', true, 'success');
+								}
+						},
+						(error: any): void => {
+								if (error['status'] === 409) {
+										this.updateNotificationModal(
+												'Failed',
+												`The project could not be terminated. Reason: ${error['error']['reason']} for ${error['error']['openstackid']}`,
+												true,
+												'danger',
+										);
+								} else {
+										this.updateNotificationModal('Failed', 'The project could not be terminated.', true, 'danger');
+								}
+						},
+				);
+		}
+
+		getProjectStatus(project: Application): void {
+				this.voService.getProjectStatus(project.project_application_perun_id).subscribe((res: any): void => {
+						project.project_application_statuses = res['status'];
+				});
+		}
+
+		suspendProject(project: Application): void {
+				this.voService.removeResourceFromGroup(project.project_application_perun_id).subscribe((): void => {
+						this.getProjectStatus(project);
+						project.project_application_compute_center = null;
+				});
+		}
+
+		resumeProject(project: Application): void {
+				this.voService.resumeProject(project.project_application_perun_id).subscribe((): void => {
+						this.getVoProjects();
+				});
+		}
+
+		declineTermination(project: Application): void {
+				this.voService.declineTermination(project.project_application_perun_id).subscribe(
+						(): void => {
+								this.updateNotificationModal('Success', 'The termination was successfully declined', true, 'success');
+								const indexAll: number = this.projects.indexOf(project, 0);
+								this.getProjectStatus(this.projects[indexAll]);
+						},
+						(): void => {
+								this.updateNotificationModal('Failed', 'The status change was not successful.', true, 'danger');
+						},
+				);
+		}
+
+		setProtected(project: Application, set: boolean): void {
+				this.voService.setProtected(project.project_application_perun_id, set).subscribe(
+						(result: any): void => {
+								this.updateNotificationModal(
+										'Success',
+										result['result'] === 'set'
+												? 'The project was successfully set as protected.'
+												: 'The status "Protected" was removed successfully',
+										true,
+										'success',
+								);
+								const indexAll: number = this.projects.indexOf(project, 0);
+								this.getProjectStatus(this.projects[indexAll]);
+						},
+						(error: any): void => {
+								if (error['status'] === 500) {
+										this.updateNotificationModal('Failed', 'The status change was not successful.', true, 'danger');
+								}
+						},
+				);
+		}
+
+		getMembersOfTheProject(projectid: number, projectname: string): void {
+				this.voService.getVoGroupRichMembers(projectid).subscribe((members: ProjectMember[]): void => {
+						this.usersModalProjectID = projectid;
+						this.usersModalProjectName = projectname;
+						this.usersModalProjectMembers = members;
+				});
+		}
+
+		showMembersOfTheProject(projectid: number, projectname: string): void {
+				this.getMembersOfTheProject(projectid, projectname);
+		}
+
+		exportTSV(): void {
+				const data = [];
+				this.sortProjectService.sorted_applications.forEach(application => {
+						const entry = {};
+						for (const key in application) {
+								if (typeof application[key] === 'object') {
+										if (key === 'project_application_pi') {
+												entry['project_application_pi_name'] = application[key].username;
+												entry['project_application_pi_email'] = application[key].email;
+												entry['project_application_pi_affiliations'] = JSON.stringify(application[key].user_affiliations);
+										} else if (key === 'project_application_statuses') {
+												const statuses_strings = [];
+												application[key].forEach(status => {
+														statuses_strings.push(Application_States[status]);
+												});
+												entry[key] = JSON.stringify(statuses_strings);
+										} else if (key === 'project_credit_request') {
+												if (application[key] == null) {
+														entry['project_credit_requested'] = 'FALSE';
+														entry['project_credit_request_id'] = 'NONE';
+														entry['project_credit_request_comment'] = 'NONE';
+														entry['project_credit_request_date_submitted'] = 'NONE';
+														entry['project_credit_request_extra_credits'] = 'NONE';
+														entry['project_credit_request_user_name'] = 'NONE';
+														entry['project_credit_request_user_email'] = 'NONE';
+												} else {
+														entry['project_credit_requested'] = 'TRUE';
+														entry['project_credit_request_id'] = JSON.stringify(application[key].Id);
+														entry['project_credit_request_comment'] = application[key].comment;
+														entry['project_credit_request_date_submitted'] = JSON.stringify(application[key].date_submitted);
+														entry['project_credit_request_extra_credits'] = JSON.stringify(application[key].extra_credits);
+														entry['project_credit_request_user_name'] = JSON.stringify(application[key].user.username);
+														entry['project_credit_request_user_email'] = JSON.stringify(application[key].user.email);
+												}
+										} else if (key === 'project_application_edam_terms') {
+												const edam_names = [];
+												application[key].forEach(edam => {
+														edam_names.push(edam.name);
+												});
+												entry['project_application_edam_terms'] = JSON.stringify(edam_names);
+										} else if (key === 'flavors') {
+												const flavor_names = [];
+												application[key].forEach(flavor => {
+														flavor_names.push(flavor.name);
+												});
+										} else if (key === 'dissemination') {
+												/* empty */
+										} else if (key === 'project_application_compute_center') {
+												entry[key] = application[key].Name;
+												entry['project_application_compute_center_id'] = application[key].FacilityId;
+										} else {
+												entry[key] = JSON.stringify(application[key]);
+										}
+								} else {
+										entry[key] = application[key];
+								}
+						}
+						data.push(entry);
+				});
+				if (data.length > 0) {
+						// create CSV file first for convenience
+						const currentDate = new Date().toISOString().split('T')[0];
+						// eslint-disable-next-line
+						const csv = new ngxCsv(data, 'cloud_projects_' + currentDate, {
+								showLabels: true,
+								headers: Object.keys(data[0]),
+								fieldSeparator: '\t',
+								noDownload: true,
 						});
-					} else if (key === 'dissemination') {
-						/* empty */
-					} else if (key === 'project_application_compute_center') {
-						entry[key] = application[key].Name;
-						entry['project_application_compute_center_id'] = application[key].FacilityId;
-					} else {
-						entry[key] = JSON.stringify(application[key]);
-					}
-				} else {
-					entry[key] = application[key];
+						// create TSV file and download it
+						const link = document.createElement('a');
+						link.href = `data:text/tab-separated-values,${encodeURIComponent(csv.getCsv())}`;
+						link.download = `cloud_projects_${currentDate}.tsv`;
+						link.click();
 				}
-			}
-			data.push(entry);
-		});
-		if (data.length > 0) {
-			// create CSV file first for convenience
-			const currentDate = new Date().toISOString().split('T')[0];
-			// eslint-disable-next-line
-			const csv = new ngxCsv(data, 'cloud_projects_' + currentDate, {
-				showLabels: true,
-				headers: Object.keys(data[0]),
-				fieldSeparator: '\t',
-				noDownload: true,
-			});
-			// create TSV file and download it
-			const link = document.createElement('a');
-			link.href = `data:text/tab-separated-values,${encodeURIComponent(csv.getCsv())}`;
-			link.download = `cloud_projects_${currentDate}.tsv`;
-			link.click();
 		}
-	}
 }
diff --git a/src/app/vo_manager/voOverview.component.html b/src/app/vo_manager/voOverview.component.html
index af9aad0c76..ced497c5b1 100644
--- a/src/app/vo_manager/voOverview.component.html
+++ b/src/app/vo_manager/voOverview.component.html
@@ -23,6 +23,14 @@
 				<i class="icon-envelope-letter"></i> Send newsletter ({{ newsletterSubscriptionCounter }})
 			</button>
 
+						<button
+				(click)="openProjectMailsModal(); "
+				type="button "
+				class="btn btn-outline-primary"
+				style="margin-bottom: auto; margin-left: auto; margin-top: auto"
+			>	<i class="icon-envelope-letter"></i>
+				Send Project Maisl
+			</button>
 			<button
 				(click)="setEmailType(0); emailModal.show()"
 				type="button "

From a91a081e02c02bd8692ad1c5a406321b9a4d78a5 Mon Sep 17 00:00:00 2001
From: dweinholz <david-weinholz@web.de>
Date: Wed, 19 Apr 2023 15:46:53 +0200
Subject: [PATCH 02/15] feat(Vo):can now select Projects and send mails with
 templated values

---
 .../application.model/application.model.ts    |    2 +
 .../services/project-sort.service.ts          |  386 ++--
 src/app/vo_manager/VoManager.module.ts        |   34 +-
 src/app/vo_manager/VoOverviewComponent.ts     |   74 +-
 src/app/vo_manager/voOverview.component.html  | 2010 +++++++++--------
 5 files changed, 1305 insertions(+), 1201 deletions(-)

diff --git a/src/app/applications/application.model/application.model.ts b/src/app/applications/application.model/application.model.ts
index 772e046ea9..d099604563 100644
--- a/src/app/applications/application.model/application.model.ts
+++ b/src/app/applications/application.model/application.model.ts
@@ -92,6 +92,8 @@ export class Application {
 
 	migrate_to_simple_vm: boolean = false;
 
+	is_project_selected:boolean=false;
+
 	constructor(aj?: Partial<Application>) {
 		this.dissemination = new ApplicationDissemination(null);
 		Object.assign(this, aj);
diff --git a/src/app/shared/shared_modules/services/project-sort.service.ts b/src/app/shared/shared_modules/services/project-sort.service.ts
index 1cad1f1f25..cb3faaf959 100644
--- a/src/app/shared/shared_modules/services/project-sort.service.ts
+++ b/src/app/shared/shared_modules/services/project-sort.service.ts
@@ -1,203 +1,207 @@
-import { Injectable } from '@angular/core';
+import {Injectable} from '@angular/core';
 import {
-	BehaviorSubject, delay, Observable, of, Subject,
+		BehaviorSubject, delay, Observable, of, Subject,
 } from 'rxjs';
-import { debounceTime, switchMap, tap } from 'rxjs/operators';
-import { Application_States } from '../baseClass/abstract-base-class';
-import { Application } from '../../../applications/application.model/application.model';
+import {debounceTime, switchMap, tap} from 'rxjs/operators';
+import {Application_States} from '../baseClass/abstract-base-class';
+import {Application} from '../../../applications/application.model/application.model';
 import {
-	compare, SortColumn, SortDirection, State,
+		compare, SortColumn, SortDirection, State,
 } from '../directives/nbd-sortable-header.directive';
 
 interface SearchResult {
-	sortedApplications: Application[]
-	total: number
+		sortedApplications: Application[]
+		total: number
 }
 
 @Injectable({
-	providedIn: 'root',
+		providedIn: 'root',
 })
 export class ProjectSortService {
-	public filterStatusList: number[] = [];
-	public showSimpleVM: boolean = true;
-	public showOpenStack: boolean = true;
-	private _loading$ = new BehaviorSubject<boolean>(true);
-	private _search$ = new Subject<void>();
-	private _applications$ = new BehaviorSubject<Application[]>([]);
-	private _total$ = new BehaviorSubject<number>(0);
-	private _applications: Application[] = [];
-	public sorted_applications: Application[] = [];
-
-	_initiateFilterStatusList(): void {
-		this.filterStatusList = [
-			Application_States.ACTIVE,
-			Application_States.SUSPENDED,
-			//	Application_States.DELETED,
-			Application_States.EXPIRED,
-			Application_States.WAIT_FOR_CONFIRMATION,
-			Application_States.TERMINATION_REQUESTED,
-			Application_States.EXPIRES_SOON,
-		];
-	}
-
-	get applications$() {
-		return this._applications$.asObservable();
-	}
-
-	get total$() {
-		return this._total$.asObservable();
-	}
-
-	get loading$() {
-		return this._loading$.asObservable();
-	}
-
-	set page(page: number) {
-		this._set({ page });
-	}
-
-	get page() {
-		return this._state.page;
-	}
-
-	get pageSize() {
-		return this._state.pageSize;
-	}
-
-	set pageSize(pageSize: number) {
-		this._set({ pageSize });
-	}
-
-	get searchTerm() {
-		return this._state.searchTerm;
-	}
-
-	set searchTerm(searchTerm: string) {
-		searchTerm = searchTerm.trim();
-		this._set({ searchTerm });
-	}
-
-	set sortColumn(sortColumn: SortColumn) {
-		this._set({ sortColumn });
-	}
-
-	set sortDirection(sortDirection: SortDirection) {
-		this._set({ sortDirection });
-	}
-
-	set applications(applications: Application[]) {
-		this._applications = applications;
-		this._search$.next();
-	}
-
-	initiateSearch(): void {
-		this._search$.next();
-	}
-
-	private _state: State = {
-		page: 1,
-		pageSize: 10,
-		searchTerm: '',
-		sortColumn: '',
-		sortDirection: '',
-	};
-
-	private _set(patch: Partial<State>) {
-		Object.assign(this._state, patch);
-		this._search$.next();
-	}
-
-	constructor() {
-		this.applications = [];
-		this._initiateFilterStatusList();
-		this._search$
-			.pipe(
-				tap(() => this._loading$.next(true)),
-				debounceTime(200),
-				switchMap(() => this._search()),
-				delay(100),
-				tap(() => this._loading$.next(false)),
-			)
-			.subscribe(result => {
-				this._applications$.next(result.sortedApplications);
-				this._total$.next(result.total);
-			});
-
-		this._search$.next();
-	}
-
-	addOrRemoveFromFilterStatusList(status: Application_States) {
-		const idx = this.filterStatusList.indexOf(status);
-		if (idx === -1) {
-			this.filterStatusList.push(status);
-		} else {
-			this.filterStatusList.splice(idx, 1);
-		}
-		this._search$.next();
-	}
-
-	matches(text: string, project: Application): boolean {
-		const term = text.toLowerCase();
-		if (
-			(!this.showSimpleVM && !project.project_application_openstack_project)
-			|| (!this.showOpenStack && project.project_application_openstack_project)
-		) {
-			return false;
-		}
-
-		if (this.filterStatusList) {
-			const status_match: boolean = project.project_application_statuses.some(r => this.filterStatusList.includes(r));
-			if (!status_match) {
-				return false;
-			}
-		}
-
-		return (
-			project.project_application_shortname.toLowerCase().includes(term)
-			|| project.project_application_perun_id.toString().toLowerCase().includes(term)
-			|| project.project_application_current_credits.toString().toLowerCase().includes(term)
-			|| project.project_application_initial_credits.toString().toLowerCase().includes(term)
-			|| project?.project_application_compute_center?.Name.toString().toLowerCase().includes(term)
-			|| project.project_application_total_ram.toString().toLowerCase().includes(term)
-			|| project.project_application_total_cores.toString().toLowerCase().includes(term)
-			|| project.project_application_total_gpu.toString().toLowerCase().includes(term)
-			|| project.project_application_name.toString().toLowerCase().includes(term)
-		);
-	}
-
-	sort(applications: Application[], column: SortColumn, direction: string): Application[] {
-		if (direction === '' || column === '') {
-			return applications;
-		} else {
-			return [...applications].sort((a, b) => {
-				// if (typeof a[column] == 'string' || typeof a[column] == 'number') {
-
-				// @ts-ignore
-				const res = compare(a[column], b[column]);
-
-				return direction === 'asc' ? res : -res;
-				// }
-			});
-		}
-	}
-
-	private _search(): Observable<SearchResult> {
-		const {
-			sortColumn, sortDirection, pageSize, page, searchTerm,
-		} = this._state;
-
-		// 1. sort
-		let sortedApplications = this.sort(this._applications, sortColumn, sortDirection);
-
-		// 2. filter
-		sortedApplications = sortedApplications.filter(app => this.matches(searchTerm, app));
-		this.sorted_applications = sortedApplications;
-
-		const total = sortedApplications.length;
-
-		// 3. paginate
-		sortedApplications = sortedApplications.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize);
-
-		return of({ sortedApplications, total });
-	}
+		public filterStatusList: number[] = [];
+		public showSimpleVM: boolean = true;
+		public showOpenStack: boolean = true;
+		private _loading$ = new BehaviorSubject<boolean>(true);
+		private _search$ = new Subject<void>();
+		private _applications$ = new BehaviorSubject<Application[]>([]);
+		private _total$ = new BehaviorSubject<number>(0);
+		private _applications: Application[] = [];
+		public sorted_applications: Application[] = [];
+
+		_initiateFilterStatusList(): void {
+				this.filterStatusList = [
+						Application_States.ACTIVE,
+						Application_States.SUSPENDED,
+						//	Application_States.DELETED,
+						Application_States.EXPIRED,
+						Application_States.WAIT_FOR_CONFIRMATION,
+						Application_States.TERMINATION_REQUESTED,
+						Application_States.EXPIRES_SOON,
+				];
+		}
+
+		get applications$() {
+				return this._applications$.asObservable();
+		}
+
+		get total$() {
+				return this._total$.asObservable();
+		}
+
+		get loading$() {
+				return this._loading$.asObservable();
+		}
+
+		set page(page: number) {
+				this._set({page});
+		}
+
+		get page() {
+				return this._state.page;
+		}
+
+		get pageSize() {
+				return this._state.pageSize;
+		}
+
+		set pageSize(pageSize: number) {
+				this._set({pageSize});
+		}
+
+		get searchTerm() {
+				return this._state.searchTerm;
+		}
+
+		set searchTerm(searchTerm: string) {
+				searchTerm = searchTerm.trim();
+				this._set({searchTerm});
+		}
+
+		set sortColumn(sortColumn: SortColumn) {
+				this._set({sortColumn});
+		}
+
+		set sortDirection(sortDirection: SortDirection) {
+				this._set({sortDirection});
+		}
+
+		set applications(applications: Application[]) {
+				this._applications = applications;
+				this._search$.next();
+		}
+
+		get applications() {
+				return this._applications
+		}
+
+		initiateSearch(): void {
+				this._search$.next();
+		}
+
+		private _state: State = {
+				page: 1,
+				pageSize: 10,
+				searchTerm: '',
+				sortColumn: '',
+				sortDirection: '',
+		};
+
+		private _set(patch: Partial<State>) {
+				Object.assign(this._state, patch);
+				this._search$.next();
+		}
+
+		constructor() {
+				this.applications = [];
+				this._initiateFilterStatusList();
+				this._search$
+						.pipe(
+								tap(() => this._loading$.next(true)),
+								debounceTime(200),
+								switchMap(() => this._search()),
+								delay(100),
+								tap(() => this._loading$.next(false)),
+						)
+						.subscribe(result => {
+								this._applications$.next(result.sortedApplications);
+								this._total$.next(result.total);
+						});
+
+				this._search$.next();
+		}
+
+		addOrRemoveFromFilterStatusList(status: Application_States) {
+				const idx = this.filterStatusList.indexOf(status);
+				if (idx === -1) {
+						this.filterStatusList.push(status);
+				} else {
+						this.filterStatusList.splice(idx, 1);
+				}
+				this._search$.next();
+		}
+
+		matches(text: string, project: Application): boolean {
+				const term = text.toLowerCase();
+				if (
+						(!this.showSimpleVM && !project.project_application_openstack_project)
+						|| (!this.showOpenStack && project.project_application_openstack_project)
+				) {
+						return false;
+				}
+
+				if (this.filterStatusList) {
+						const status_match: boolean = project.project_application_statuses.some(r => this.filterStatusList.includes(r));
+						if (!status_match) {
+								return false;
+						}
+				}
+
+				return (
+						project.project_application_shortname.toLowerCase().includes(term)
+						|| project.project_application_perun_id.toString().toLowerCase().includes(term)
+						|| project.project_application_current_credits.toString().toLowerCase().includes(term)
+						|| project.project_application_initial_credits.toString().toLowerCase().includes(term)
+						|| project?.project_application_compute_center?.Name.toString().toLowerCase().includes(term)
+						|| project.project_application_total_ram.toString().toLowerCase().includes(term)
+						|| project.project_application_total_cores.toString().toLowerCase().includes(term)
+						|| project.project_application_total_gpu.toString().toLowerCase().includes(term)
+						|| project.project_application_name.toString().toLowerCase().includes(term)
+				);
+		}
+
+		sort(applications: Application[], column: SortColumn, direction: string): Application[] {
+				if (direction === '' || column === '') {
+						return applications;
+				} else {
+						return [...applications].sort((a, b) => {
+								// if (typeof a[column] == 'string' || typeof a[column] == 'number') {
+
+								// @ts-ignore
+								const res = compare(a[column], b[column]);
+
+								return direction === 'asc' ? res : -res;
+								// }
+						});
+				}
+		}
+
+		private _search(): Observable<SearchResult> {
+				const {
+						sortColumn, sortDirection, pageSize, page, searchTerm,
+				} = this._state;
+
+				// 1. sort
+				let sortedApplications = this.sort(this._applications, sortColumn, sortDirection);
+
+				// 2. filter
+				sortedApplications = sortedApplications.filter(app => this.matches(searchTerm, app));
+				this.sorted_applications = sortedApplications;
+
+				const total = sortedApplications.length;
+
+				// 3. paginate
+				sortedApplications = sortedApplications.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize);
+
+				return of({sortedApplications, total});
+		}
 }
diff --git a/src/app/vo_manager/VoManager.module.ts b/src/app/vo_manager/VoManager.module.ts
index fe03a98e52..770e9d1b11 100644
--- a/src/app/vo_manager/VoManager.module.ts
+++ b/src/app/vo_manager/VoManager.module.ts
@@ -21,27 +21,29 @@ import { MaintenanceComponent } from './maintenance/maintenance.component';
 import { DatePickerComponent } from '../shared/datepicking/datepicker.component';
 import { TimepickerComponent } from '../shared/datepicking/timepicker.component';
 import { SharedModuleModule } from '../shared/shared_modules/shared-module.module';
+import {BadgeComponent} from '@coreui/angular';
 
 /**
  * VO Manager module.
  */
 @NgModule({
-	imports: [
-		VoManagerRoutingModule,
-		TabsModule,
-		FormsModule,
-		CommonModule,
-		ModalModule.forRoot(),
-		ProjectManagementModule,
-		PipeModuleModule,
-		NgbTypeaheadModule,
-		ReactiveFormsModule,
-		SharedDirectivesModule,
-		NgbPaginationModule,
-		DatePickerComponent,
-		TimepickerComponent,
-		SharedModuleModule,
-	],
+		imports: [
+				VoManagerRoutingModule,
+				TabsModule,
+				FormsModule,
+				CommonModule,
+				ModalModule.forRoot(),
+				ProjectManagementModule,
+				PipeModuleModule,
+				NgbTypeaheadModule,
+				ReactiveFormsModule,
+				SharedDirectivesModule,
+				NgbPaginationModule,
+				DatePickerComponent,
+				TimepickerComponent,
+				SharedModuleModule,
+				BadgeComponent,
+		],
 	declarations: [
 		VoOverviewComponent,
 		ResourcesComponent,
diff --git a/src/app/vo_manager/VoOverviewComponent.ts b/src/app/vo_manager/VoOverviewComponent.ts
index 472e7824cf..7d14a3a818 100644
--- a/src/app/vo_manager/VoOverviewComponent.ts
+++ b/src/app/vo_manager/VoOverviewComponent.ts
@@ -3,7 +3,7 @@ import {
 		Component, OnInit, QueryList, ViewChildren,
 } from '@angular/core';
 import {DomSanitizer} from '@angular/platform-browser';
-import {Observable} from 'rxjs';
+import {map, Observable, take} from 'rxjs';
 import {VoService} from '../api-connector/vo.service';
 import {ProjectMember} from '../projectmanagement/project_member.model';
 import {GroupService} from '../api-connector/group.service';
@@ -21,6 +21,7 @@ import {ProjectSortService} from '../shared/shared_modules/services/project-sort
 import {StopVmComponent} from '../virtualmachines/modals/stop-vm/stop-vm.component';
 import {BsModalRef, BsModalService} from 'ngx-bootstrap/modal';
 import {ProjectEmailModalComponent} from '../shared/modal/email/project-email-modal/project-email-modal.component';
+import {application} from 'express';
 
 /**
  * Vo Overview component.
@@ -45,6 +46,7 @@ export class VoOverviewComponent extends AbstractBaseClass implements OnInit {
 
 		public removalDate: Date = new Date();
 		public selectedProject: Application;
+		selectedEmailProjects: Application[] = [];
 		computecenters: ComputecenterComponent[] = [];
 		bsModalRef: BsModalRef;
 
@@ -91,28 +93,71 @@ export class VoOverviewComponent extends AbstractBaseClass implements OnInit {
 
 		ngOnInit(): void {
 				this.getVoProjects();
-				this.getMailTemplates()
 				this.getComputeCenters();
 				this.voService.getNewsletterSubscriptionCounter().subscribe((result: IResponseTemplate): void => {
 						this.newsletterSubscriptionCounter = result.value as number;
 				});
 		}
 
+		selectAllFilteredProjects(): void {
+				this.selectedEmailProjects = [];
 
-		openProjectMailsModal(): void {
-				const initialState = {selectedProjects: this.projects};
+				// get all the applications
+				this.applictions$.pipe(take(1)).subscribe(applications => {
+						// set the selected state of all projects to true
+						applications.forEach(application => {
+								application.is_project_selected = true;
+								this.toggleSelectedEmailApplication(application, application.is_project_selected)
+						});
+				});
+		}
+
+		unselectAll(): void {
+				this.sortProjectService.applications.forEach((pr: Application) => {
+						pr.is_project_selected = false;
+						this.toggleSelectedEmailApplication(pr, pr.is_project_selected);
+				});
+				//		this.selectedEmailProjects = []; // clear the selectedEmailProjects list
+		}
+
+		unselectAllFilteredProjects(): void {
+				// get all the applications
+				this.applictions$.pipe(take(1)).subscribe(applications => {
+						// set the selected state of all projects to false
+						applications.forEach(application => {
+								application.is_project_selected = false;
+								this.toggleSelectedEmailApplication(application, application.is_project_selected)
+
+						});
+				});
+		}
 
-				this.bsModalRef = this.modalService.show(ProjectEmailModalComponent, {initialState});
-				this.bsModalRef.setClass('modal-lg');
+		toggleSelectedEmailApplication(application: Application, isChecked: boolean): void {
+				const index = this.selectedEmailProjects.indexOf(application);
+
+				if (isChecked) {
+						// checkbox was checked
+						if (index === -1) {
+								// application is not in the list, so add it
+								this.selectedEmailProjects.push(application);
+						}
+				} else {
+						// checkbox was unchecked
+						if (index !== -1) {
+								// application is in the list, so remove it
+								this.selectedEmailProjects.splice(index, 1);
+						}
+				}
 		}
 
-		getMailTemplates(): void {
-				this.voService.getMailTemplates().subscribe((res: string[]) => {
-						this.projectMailTemplates = res
-						console.log(this.projectMailTemplates)
-				})
+
+		openProjectMailsModal(): void {
+				const initialState = {selectedProjects: this.selectedEmailProjects};
+
+				this.bsModalRef = this.modalService.show(ProjectEmailModalComponent, {initialState, class: 'modal-lg'});
 		}
 
+
 		onSort({column, direction}: SortEvent) {
 				// resetting other headers
 				this.headers.forEach(header => {
@@ -125,13 +170,6 @@ export class VoOverviewComponent extends AbstractBaseClass implements OnInit {
 				this.sortProjectService.sortDirection = direction;
 		}
 
-		switchShowSimpleVmProjects(): void {
-				this.show_simple_vm_projects = !this.show_simple_vm_projects;
-		}
-
-		switchOpenStackVmProjects(): void {
-				this.show_openstack_projects = !this.show_openstack_projects;
-		}
 
 		getApplicationInfos(): void {
 				this.voService.getVoProjectResourcesTimeframes().subscribe();
diff --git a/src/app/vo_manager/voOverview.component.html b/src/app/vo_manager/voOverview.component.html
index ced497c5b1..0901243f1d 100644
--- a/src/app/vo_manager/voOverview.component.html
+++ b/src/app/vo_manager/voOverview.component.html
@@ -1,1106 +1,1164 @@
 <div *ngIf="isLoaded === false" class="loader" data-test-it="site-loader"></div>
 
 <div *ngIf="isLoaded" class="animated fadeIn" ng-app>
-	<div class="row">
-		<!--/.col-->
+    <div class="row">
+        <!--/.col-->
 
-		<div class="col-lg-12">
-			<button
-				(click)="sendTestBug()"
-				class="btn btn-outline-danger"
-				style="margin-bottom: auto; margin-left: auto; margin-top: auto"
-			>
-				<i class="icon-envelope-letter"></i>
-				Test Error
-			</button>
+        <div class="col-lg-12">
+            <button
+                    (click)="sendTestBug()"
+                    class="btn btn-outline-danger"
+                    style="margin-bottom: auto; margin-left: auto; margin-top: auto"
+            >
+                <i class="icon-envelope-letter"></i>
+                Test Error
+            </button>
 
-			<button
-				(click)="setEmailType(1); emailModal.show()"
-				type="button "
-				class="btn btn-outline-primary"
-				style="margin-bottom: auto; margin-left: auto; margin-top: auto"
-			>
-				<i class="icon-envelope-letter"></i> Send newsletter ({{ newsletterSubscriptionCounter }})
-			</button>
+            <button
+                    (click)="setEmailType(1); emailModal.show()"
+                    type="button "
+                    class="btn btn-outline-primary"
+                    style="margin-bottom: auto; margin-left: auto; margin-top: auto"
+            >
+                <i class="icon-envelope-letter"></i> Send newsletter ({{ newsletterSubscriptionCounter }})
+            </button>
 
-						<button
-				(click)="openProjectMailsModal(); "
-				type="button "
-				class="btn btn-outline-primary"
-				style="margin-bottom: auto; margin-left: auto; margin-top: auto"
-			>	<i class="icon-envelope-letter"></i>
-				Send Project Maisl
-			</button>
-			<button
-				(click)="setEmailType(0); emailModal.show()"
-				type="button "
-				class="btn btn-outline-primary"
-				style="margin-bottom: auto; margin-left: 5px; margin-top: auto"
-			>
-				<i class="icon-envelope-letter"></i>
-				Send email
-			</button>
+            <button
+                    (click)="openProjectMailsModal(); "
+                    type="button "
+                    class="btn btn-outline-primary"
+                    [disabled]="selectedEmailProjects?.length === 0"
+                    style="margin-bottom: auto; margin-left: auto; margin-top: auto"
+            ><i class="icon-envelope-letter"></i>
+                Send Project Mail
+                <c-badge
+                        color="success"
+                >
+                    {{ selectedEmailProjects?.length }}
+                </c-badge>
+            </button>
+            <button
+                    (click)="setEmailType(0); emailModal.show()"
+                    type="button "
+                    class="btn btn-outline-primary"
+                    style="margin-bottom: auto; margin-left: 5px; margin-top: auto"
+            >
+                <i class="icon-envelope-letter"></i>
+                Send email
+            </button>
 
-			<button
-				(click)="getApplicationInfos()"
-				type="button "
-				class="btn btn-outline-primary"
-				style="margin-bottom: auto; margin-left: 5px; margin-top: auto"
-			>
-				<i class="icon-info"></i>
-				Get JSON
-			</button>
+            <button
+                    (click)="getApplicationInfos()"
+                    type="button "
+                    class="btn btn-outline-primary"
+                    style="margin-bottom: auto; margin-left: 5px; margin-top: auto"
+            >
+                <i class="icon-info"></i>
+                Get JSON
+            </button>
 
-			<div class="card">
-				<div class="card-header"><i class="fa fa-align-justify"></i> Projects</div>
+            <div class="card">
+                <div class="card-header"><i class="fa fa-align-justify"></i> Projects</div>
 
-				<div class="card-body">
-					<div class="d-flex justify-content-between p-2">
-						<ngb-pagination
-							[maxSize]="10"
-							[rotate]="true"
-							[boundaryLinks]="true"
-							[collectionSize]="(total$ | async)!"
-							[(page)]="sortProjectService.page"
-							[pageSize]="sortProjectService.pageSize"
-						>
-						</ngb-pagination>
+                <div class="card-body">
+                    <div class="d-flex justify-content-between p-2">
+                        <ngb-pagination
+                                [maxSize]="10"
+                                [rotate]="true"
+                                [boundaryLinks]="true"
+                                [collectionSize]="(total$ | async)!"
+                                [(page)]="sortProjectService.page"
+                                [pageSize]="sortProjectService.pageSize"
+                        ></ngb-pagination>
 
-						<select class="form-select" style="width: auto" name="pageSize" [(ngModel)]="sortProjectService.pageSize">
-							<option [ngValue]="10">10 items per page</option>
-							<option [ngValue]="25">25 items per page</option>
-							<option [ngValue]="50">50 items per page</option>
-						</select>
-					</div>
+                        <div>
+                            <button type="button" class="btn btn-primary me-2" (click)="selectAllFilteredProjects()">
+                                Select All Filtered
+                            </button>
 
-					<div class="table-responsive">
-						<div class="mb-3 row">
-							<label for="table-complete-search" class="col-xs-3 col-sm-auto col-form-label">Full text search:</label>
-							<div class="col-xs-3 col-sm-auto">
-								<input
-									id="table-complete-search"
-									[attr.data-test-id]="'filter_project_name'"
-									type="text"
-									class="form-control"
-									name="searchTerm"
-									[(ngModel)]="sortProjectService.searchTerm"
-								/>
-							</div>
-							<span class="col col-form-label" *ngIf="sortProjectService.loading$ | async">Loading...</span>
-							<div class="col">
-								<div class="float-right">
-									<button
-										type="button "
-										(click)="exportTSV()"
-										class="btn btn-outline-primary"
-										style="margin-bottom: auto; margin-left: 5px; margin-top: auto"
-									>
-										Export as TSV
-									</button>
-								</div>
-							</div>
-						</div>
+                            <button type="button" class="btn btn-primary me-2" (click)="unselectAllFilteredProjects()">
+                                Unselect Filtered
+                            </button>
 
-						<div class="row">
-							<div class="checkbox col">
-								<label style="margin-top: 7px; margin-bottom: 0px !important">
-									<input
-										type="checkbox"
-										(ngModelChange)="sortProjectService.initiateSearch()"
-										[(ngModel)]="sortProjectService.showSimpleVM"
-									/>
-									<span style="margin-left: 5px; bottom: 5px; position: relative" class="badge bg-info-blue"
-										>SimpleVM
+                            <button type="button" class="btn btn-primary" (click)="unselectAll()">
+                                Unselect All
+                            </button>
+                        </div>
+
+                        <select class="form-select" style="width: auto" name="pageSize"
+                                [(ngModel)]="sortProjectService.pageSize">
+                            <option [ngValue]="10">10 items per page</option>
+                            <option [ngValue]="25">25 items per page</option>
+                            <option [ngValue]="50">50 items per page</option>
+                        </select>
+                    </div>
+
+
+                    <div class="table-responsive">
+                        <div class="mb-3 row">
+                            <label for="table-complete-search" class="col-xs-3 col-sm-auto col-form-label">Full text
+                                search:</label>
+                            <div class="col-xs-3 col-sm-auto">
+                                <input
+                                        id="table-complete-search"
+                                        [attr.data-test-id]="'filter_project_name'"
+                                        type="text"
+                                        class="form-control"
+                                        name="searchTerm"
+                                        [(ngModel)]="sortProjectService.searchTerm"
+                                />
+                            </div>
+                            <span class="col col-form-label"
+                                  *ngIf="sortProjectService.loading$ | async">Loading...</span>
+                            <div class="col">
+                                <div class="float-right">
+                                    <button
+                                            type="button "
+                                            (click)="exportTSV()"
+                                            class="btn btn-outline-primary"
+                                            style="margin-bottom: auto; margin-left: 5px; margin-top: auto"
+                                    >
+                                        Export as TSV
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="row">
+                            <div class="checkbox col">
+                                <label style="margin-top: 7px; margin-bottom: 0px !important">
+                                    <input
+                                            type="checkbox"
+                                            (ngModelChange)="sortProjectService.initiateSearch()"
+                                            [(ngModel)]="sortProjectService.showSimpleVM"
+                                    />
+                                    <span style="margin-left: 5px; bottom: 5px; position: relative"
+                                          class="badge bg-info-blue"
+                                    >SimpleVM
 									</span>
-								</label>
-							</div>
-							<div class="checkbox col">
-								<label style="margin-top: 7px; margin-bottom: 0px !important">
-									<input
-										type="checkbox"
-										(ngModelChange)="sortProjectService.initiateSearch()"
-										[(ngModel)]="sortProjectService.showOpenStack"
-									/>
-									<span style="margin-left: 5px; bottom: 5px; position: relative" class="badge bg-danger"
-										>OpenStack
+                                </label>
+                            </div>
+                            <div class="checkbox col">
+                                <label style="margin-top: 7px; margin-bottom: 0px !important">
+                                    <input
+                                            type="checkbox"
+                                            (ngModelChange)="sortProjectService.initiateSearch()"
+                                            [(ngModel)]="sortProjectService.showOpenStack"
+                                    />
+                                    <span style="margin-left: 5px; bottom: 5px; position: relative"
+                                          class="badge bg-danger"
+                                    >OpenStack
 									</span>
-								</label>
-							</div>
-							<div class="checkbox col">
-								<label>
-									<input
-										type="checkbox"
-										(change)="sortProjectService.addOrRemoveFromFilterStatusList(application_states.ACTIVE)"
-										[checked]="sortProjectService.filterStatusList | inList : application_states.ACTIVE"
-									/>
-									<span style="margin-left: 5px" class="badge bg-success"
-										>{{ project_states[project_states.ACTIVE] }}
+                                </label>
+                            </div>
+                            <div class="checkbox col">
+                                <label>
+                                    <input
+                                            type="checkbox"
+                                            (change)="sortProjectService.addOrRemoveFromFilterStatusList(application_states.ACTIVE)"
+                                            [checked]="sortProjectService.filterStatusList | inList : application_states.ACTIVE"
+                                    />
+                                    <span style="margin-left: 5px" class="badge bg-success"
+                                    >{{ project_states[project_states.ACTIVE] }}
 									</span>
-								</label>
-							</div>
-							<div class="checkbox col">
-								<label>
-									<input
-										type="checkbox"
-										(change)="sortProjectService.addOrRemoveFromFilterStatusList(application_states.SUSPENDED)"
-										[checked]="sortProjectService.filterStatusList | inList : application_states.SUSPENDED"
-									/>
-									<span style="margin-left: 5px" class="badge bg-warning"
-										>{{ project_states[project_states.SUSPENDED] }}
+                                </label>
+                            </div>
+                            <div class="checkbox col">
+                                <label>
+                                    <input
+                                            type="checkbox"
+                                            (change)="sortProjectService.addOrRemoveFromFilterStatusList(application_states.SUSPENDED)"
+                                            [checked]="sortProjectService.filterStatusList | inList : application_states.SUSPENDED"
+                                    />
+                                    <span style="margin-left: 5px" class="badge bg-warning"
+                                    >{{ project_states[project_states.SUSPENDED] }}
 									</span>
-								</label>
-							</div>
+                                </label>
+                            </div>
 
-							<div class="checkbox col">
-								<label>
-									<input
-										type="checkbox"
-										(change)="sortProjectService.addOrRemoveFromFilterStatusList(application_states.EXPIRED)"
-										[checked]="sortProjectService.filterStatusList | inList : application_states.EXPIRED"
-									/>
+                            <div class="checkbox col">
+                                <label>
+                                    <input
+                                            type="checkbox"
+                                            (change)="sortProjectService.addOrRemoveFromFilterStatusList(application_states.EXPIRED)"
+                                            [checked]="sortProjectService.filterStatusList | inList : application_states.EXPIRED"
+                                    />
 
-									<span style="margin-left: 5px" class="badge bg-danger">{{
-										lifetime_states[lifetime_states.EXPIRED]
-									}}</span>
-								</label>
-							</div>
-							<div class="checkbox col">
-								<label>
-									<input
-										type="checkbox"
-										(change)="sortProjectService.addOrRemoveFromFilterStatusList(application_states.EXPIRES_SOON)"
-										[checked]="sortProjectService.filterStatusList | inList : application_states.EXPIRES_SOON"
-									/>
-									<span style="margin-left: 5px" class="badge bg-warning">{{
-										lifetime_states[lifetime_states.EXPIRES_SOON]
-									}}</span>
-								</label>
-							</div>
+                                    <span style="margin-left: 5px" class="badge bg-danger">{{
+                                        lifetime_states[lifetime_states.EXPIRED]
+                                        }}</span>
+                                </label>
+                            </div>
+                            <div class="checkbox col">
+                                <label>
+                                    <input
+                                            type="checkbox"
+                                            (change)="sortProjectService.addOrRemoveFromFilterStatusList(application_states.EXPIRES_SOON)"
+                                            [checked]="sortProjectService.filterStatusList | inList : application_states.EXPIRES_SOON"
+                                    />
+                                    <span style="margin-left: 5px" class="badge bg-warning">{{
+                                        lifetime_states[lifetime_states.EXPIRES_SOON]
+                                        }}</span>
+                                </label>
+                            </div>
 
-							<div class="checkbox col">
-								<label>
-									<input
-										type="checkbox"
-										(change)="
+                            <div class="checkbox col">
+                                <label>
+                                    <input
+                                            type="checkbox"
+                                            (change)="
 											sortProjectService.addOrRemoveFromFilterStatusList(application_states.WAIT_FOR_CONFIRMATION)
 										"
-										[checked]="sortProjectService.filterStatusList | inList : application_states.WAIT_FOR_CONFIRMATION"
-									/>
+                                            [checked]="sortProjectService.filterStatusList | inList : application_states.WAIT_FOR_CONFIRMATION"
+                                    />
 
-									<span style="margin-left: 5px" class="badge bg-info">{{
-										application_states[application_states.WAIT_FOR_CONFIRMATION]
-									}}</span>
-								</label>
-							</div>
-							<div class="checkbox col">
-								<label>
-									<input
-										type="checkbox"
-										(change)="
+                                    <span style="margin-left: 5px" class="badge bg-info">{{
+                                        application_states[application_states.WAIT_FOR_CONFIRMATION]
+                                        }}</span>
+                                </label>
+                            </div>
+                            <div class="checkbox col">
+                                <label>
+                                    <input
+                                            type="checkbox"
+                                            (change)="
 											sortProjectService.addOrRemoveFromFilterStatusList(application_states.TERMINATION_REQUESTED)
 										"
-										[checked]="sortProjectService.filterStatusList | inList : application_states.TERMINATION_REQUESTED"
-									/>
-									<span style="margin-left: 5px" class="badge bg-dark">{{
-										application_states[application_states.TERMINATION_REQUESTED]
-									}}</span>
-								</label>
-							</div>
-							<div class="checkbox col">
-								<label>
-									<input
-										type="checkbox"
-										(change)="
+                                            [checked]="sortProjectService.filterStatusList | inList : application_states.TERMINATION_REQUESTED"
+                                    />
+                                    <span style="margin-left: 5px" class="badge bg-dark">{{
+                                        application_states[application_states.TERMINATION_REQUESTED]
+                                        }}</span>
+                                </label>
+                            </div>
+                            <div class="checkbox col">
+                                <label>
+                                    <input
+                                            type="checkbox"
+                                            (change)="
 											sortProjectService.addOrRemoveFromFilterStatusList(application_states.WAIT_FOR_TERMINATION_FM)
 										"
-										[checked]="
+                                            [checked]="
 											sortProjectService.filterStatusList | inList : application_states.WAIT_FOR_TERMINATION_FM
 										"
-									/>
-									<span style="margin-left: 5px" class="badge bg-dark">{{
-										application_states[application_states.WAIT_FOR_TERMINATION_FM]
-									}}</span>
-								</label>
-							</div>
-						</div>
-						<table class="table table-striped">
-							<thead>
-								<tr>
-									<th scope="col"></th>
-									<th scope="col">Facility</th>
+                                    />
+                                    <span style="margin-left: 5px" class="badge bg-dark">{{
+                                        application_states[application_states.WAIT_FOR_TERMINATION_FM]
+                                        }}</span>
+                                </label>
+                            </div>
+                        </div>
+                        <table class="table table-striped">
+                            <thead>
+                            <tr>
+                                <th scope="col"></th>
+                                <th scope="col">Facility</th>
 
-									<th scope="col" appSortable="project_application_perun_id" (sort)="onSort($event)">Project ID</th>
-									<th scope="col" appSortable="project_application_shortname" (sort)="onSort($event)">Project Name</th>
-									<th scope="col">Details</th>
-									<th scope="col">Status</th>
-									<th scope="col" appSortable="project_application_total_ram" (sort)="onSort($event)">Ram</th>
-									<th scope="col" appSortable="project_application_total_cores" (sort)="onSort($event)">Cores</th>
-									<th scope="col" appSortable="project_application_total_gpu" (sort)="onSort($event)">GPUs</th>
+                                <th scope="col" appSortable="project_application_perun_id" (sort)="onSort($event)">
+                                    Project ID
+                                </th>
+                                <th scope="col" appSortable="project_application_shortname" (sort)="onSort($event)">
+                                    Project Name
+                                </th>
+                                <th scope="col">Details</th>
+                                <th scope="col">Status</th>
+                                <th scope="col" appSortable="project_application_total_ram" (sort)="onSort($event)">
+                                    Ram
+                                </th>
+                                <th scope="col" appSortable="project_application_total_cores" (sort)="onSort($event)">
+                                    Cores
+                                </th>
+                                <th scope="col" appSortable="project_application_total_gpu" (sort)="onSort($event)">
+                                    GPUs
+                                </th>
 
-									<th scope="col" appSortable="project_application_initial_credits" (sort)="onSort($event)">Credits</th>
-									<th scope="col">Actions</th>
-								</tr>
-							</thead>
-							<tbody>
-								<tr *ngFor="let project of applictions$ | async; index as i">
-									<td>
-										<app-application-badges [application]="project"></app-application-badges>
-									</td>
-									<td>
-										<ngb-highlight
-											[result]="project?.project_application_compute_center?.Name"
-											highlightClass="highlight-filter"
-											[term]="sortProjectService.searchTerm"
-										></ngb-highlight>
-									</td>
-									<td>
-										<ngb-highlight
-											[result]="project.project_application_perun_id"
-											highlightClass="highlight-filter"
-											[term]="sortProjectService.searchTerm"
-											>>
-										</ngb-highlight>
-									</td>
-									<td>
-										<ngb-highlight
-											[result]="project.project_application_shortname"
-											highlightClass="highlight-filter"
-											[term]="sortProjectService.searchTerm"
-										></ngb-highlight>
-									</td>
+                                <th scope="col" appSortable="project_application_initial_credits"
+                                    (sort)="onSort($event)">Credits
+                                </th>
+                                <th scope="col">Actions</th>
+                            </tr>
+                            </thead>
+                            <tbody>
+                            <tr *ngFor="let project of applictions$ | async; index as i">
+                                <td>
+                                    <input type="checkbox" [(ngModel)]="project.is_project_selected"
+                                           (change)="toggleSelectedEmailApplication(project,project.is_project_selected )">
+                                </td>
+                                <td>
+                                    <app-application-badges [application]="project"></app-application-badges>
+                                </td>
+                                <td>
+                                    <ngb-highlight
+                                            [result]="project?.project_application_compute_center?.Name"
+                                            highlightClass="highlight-filter"
+                                            [term]="sortProjectService.searchTerm"
+                                    ></ngb-highlight>
+                                </td>
+                                <td>
+                                    <ngb-highlight
+                                            [result]="project.project_application_perun_id"
+                                            highlightClass="highlight-filter"
+                                            [term]="sortProjectService.searchTerm"
+                                    >>
+                                    </ngb-highlight>
+                                </td>
+                                <td>
+                                    <ngb-highlight
+                                            [result]="project.project_application_shortname"
+                                            highlightClass="highlight-filter"
+                                            [term]="sortProjectService.searchTerm"
+                                    ></ngb-highlight>
+                                </td>
 
-									<td>
-										<button class="btn btn-secondary" (click)="selectedProject = project; infoModal.show()">
-											Show Details
-										</button>
-									</td>
-									<td>
+                                <td>
+                                    <button class="btn btn-secondary"
+                                            (click)="selectedProject = project; infoModal.show()">
+                                        Show Details
+                                    </button>
+                                </td>
+                                <td>
 										<span
-											*ngIf="project | hasstatusinlist : project_states.ACTIVE"
-											style="margin-left: 5px"
-											class="badge bg-success"
-											>{{ project_states[project_states.ACTIVE] }}
+                                                *ngIf="project | hasstatusinlist : project_states.ACTIVE"
+                                                style="margin-left: 5px"
+                                                class="badge bg-success"
+                                        >{{ project_states[project_states.ACTIVE] }}
 										</span>
-										<span
-											*ngIf="
+                                    <span
+                                            *ngIf="
 												(project?.lifetime_reached | hasStatus : lifetime_states.EXPIRED) &&
 												!(project | hasstatusinlist : application_states.WAIT_FOR_CONFIRMATION)
 											"
-											style="margin-left: 5px"
-											class="badge bg-danger"
-											>{{ lifetime_states[lifetime_states.EXPIRED] }}
+                                            style="margin-left: 5px"
+                                            class="badge bg-danger"
+                                    >{{ lifetime_states[lifetime_states.EXPIRED] }}
 										</span>
-										<span
-											*ngIf="project?.lifetime_reached | hasStatus : lifetime_states.EXPIRES_SOON"
-											style="margin-left: 5px"
-											class="badge bg-warning"
-											>{{ lifetime_states[lifetime_states.EXPIRES_SOON] }}</span
-										>
-										<span
-											*ngIf="project | hasstatusinlist : project_states.SUSPENDED"
-											style="margin-left: 5px"
-											class="badge bg-warning"
-											>{{ project_states[project_states.SUSPENDED] }}
+                                    <span
+                                            *ngIf="project?.lifetime_reached | hasStatus : lifetime_states.EXPIRES_SOON"
+                                            style="margin-left: 5px"
+                                            class="badge bg-warning"
+                                    >{{ lifetime_states[lifetime_states.EXPIRES_SOON] }}</span
+                                    >
+                                    <span
+                                            *ngIf="project | hasstatusinlist : project_states.SUSPENDED"
+                                            style="margin-left: 5px"
+                                            class="badge bg-warning"
+                                    >{{ project_states[project_states.SUSPENDED] }}
 										</span>
-										<span
-											*ngIf="project | hasstatusinlist : application_states.WAIT_FOR_CONFIRMATION"
-											style="margin-left: 5px"
-											class="badge bg-info"
-											>WAIT FOR CONFIRMATION
+                                    <span
+                                            *ngIf="project | hasstatusinlist : application_states.WAIT_FOR_CONFIRMATION"
+                                            style="margin-left: 5px"
+                                            class="badge bg-info"
+                                    >WAIT FOR CONFIRMATION
 										</span>
-										<span
-											*ngIf="project | hasstatusinlist : application_states.TERMINATION_REQUESTED"
-											style="margin-left: 5px"
-											class="badge bg-dark"
-											>TERMINATION REQUESTED
+                                    <span
+                                            *ngIf="project | hasstatusinlist : application_states.TERMINATION_REQUESTED"
+                                            style="margin-left: 5px"
+                                            class="badge bg-dark"
+                                    >TERMINATION REQUESTED
 										</span>
-										<span
-											*ngIf="project | hasstatusinlist : application_states.WAIT_FOR_TERMINATION_FM"
-											style="margin-left: 5px"
-											class="badge bg-dark"
-											>WAIT FOR TERMINATION BY FM
+                                    <span
+                                            *ngIf="project | hasstatusinlist : application_states.WAIT_FOR_TERMINATION_FM"
+                                            style="margin-left: 5px"
+                                            class="badge bg-dark"
+                                    >WAIT FOR TERMINATION BY FM
 										</span>
-										<span
-											*ngIf="project | hasstatusinlist : application_states.PROTECTED"
-											style="margin-left: 5px"
-											class="badge bg-secondary"
-											>PROTECTED
+                                    <span
+                                            *ngIf="project | hasstatusinlist : application_states.PROTECTED"
+                                            style="margin-left: 5px"
+                                            class="badge bg-secondary"
+                                    >PROTECTED
 										</span>
-									</td>
-									<td>
-										<ngb-highlight
-											[result]="project.project_application_total_ram"
-											highlightClass="highlight-filter"
-											[term]="sortProjectService.searchTerm"
-										></ngb-highlight>
-									</td>
-									<td>
-										<ngb-highlight
-											[result]="project.project_application_total_cores"
-											highlightClass="highlight-filter"
-											[term]="sortProjectService.searchTerm"
-											>>
-										</ngb-highlight>
-									</td>
-									<td>
-										<ngb-highlight
-											[result]="project.project_application_total_gpu"
-											highlightClass="highlight-filter"
-											[term]="sortProjectService.searchTerm"
-											>>
-										</ngb-highlight>
-									</td>
+                                </td>
+                                <td>
+                                    <ngb-highlight
+                                            [result]="project.project_application_total_ram"
+                                            highlightClass="highlight-filter"
+                                            [term]="sortProjectService.searchTerm"
+                                    ></ngb-highlight>
+                                </td>
+                                <td>
+                                    <ngb-highlight
+                                            [result]="project.project_application_total_cores"
+                                            highlightClass="highlight-filter"
+                                            [term]="sortProjectService.searchTerm"
+                                    >>
+                                    </ngb-highlight>
+                                </td>
+                                <td>
+                                    <ngb-highlight
+                                            [result]="project.project_application_total_gpu"
+                                            highlightClass="highlight-filter"
+                                            [term]="sortProjectService.searchTerm"
+                                    >>
+                                    </ngb-highlight>
+                                </td>
 
-									<td>
-										<ngb-highlight
-											[result]="project.project_application_current_credits"
-											highlightClass="highlight-filter"
-											[term]="sortProjectService.searchTerm"
-											>>
-										</ngb-highlight>
-										/
-										<ngb-highlight
-											[result]="project.project_application_initial_credits"
-											highlightClass="highlight-filter"
-											[term]="sortProjectService.searchTerm"
-											>>
-										</ngb-highlight>
-									</td>
+                                <td>
+                                    <ngb-highlight
+                                            [result]="project.project_application_current_credits"
+                                            highlightClass="highlight-filter"
+                                            [term]="sortProjectService.searchTerm"
+                                    >>
+                                    </ngb-highlight>
+                                    /
+                                    <ngb-highlight
+                                            [result]="project.project_application_initial_credits"
+                                            highlightClass="highlight-filter"
+                                            [term]="sortProjectService.searchTerm"
+                                    >>
+                                    </ngb-highlight>
+                                </td>
 
-									<td>
-										<div class="btn-group-vertical btn-group-xs">
-											<button
-												type="button"
-												class="btn btn-info"
-												style="margin-left: 5px; margin-bottom: 5px"
-												data-toggle="modal"
-												(click)="
+                                <td>
+                                    <div class="btn-group-vertical btn-group-xs">
+                                        <button
+                                                type="button"
+                                                class="btn btn-info"
+                                                style="margin-left: 5px; margin-bottom: 5px"
+                                                data-toggle="modal"
+                                                (click)="
 													showMembersOfTheProject(project.project_application_perun_id, project.perun_name);
 													usersModal.show()
 												"
-											>
-												<i class="fa fa-users"></i>&nbsp;Show Members
-											</button>
-											<button
-												*ngIf="project | hasstatusinlist : project_states.ACTIVE"
-												style="margin-left: 5px; margin-bottom: 5px"
-												type="button"
-												class="btn btn-warning"
-												(click)="selectedProject = project; suspendModal.show()"
-											>
-												<i class="fa fa-pause"></i>&nbsp;Suspend Project
-											</button>
+                                        >
+                                            <i class="fa fa-users"></i>&nbsp;Show Members
+                                        </button>
+                                        <button
+                                                *ngIf="project | hasstatusinlist : project_states.ACTIVE"
+                                                style="margin-left: 5px; margin-bottom: 5px"
+                                                type="button"
+                                                class="btn btn-warning"
+                                                (click)="selectedProject = project; suspendModal.show()"
+                                        >
+                                            <i class="fa fa-pause"></i>&nbsp;Suspend Project
+                                        </button>
 
-											<button
-												*ngIf="project | hasstatusinlist : project_states.SUSPENDED"
-												style="margin-left: 5px; margin-bottom: 5px"
-												type="button"
-												class="btn btn-success"
-												(click)="selectedProject = project; resumeModal.show()"
-											>
-												<i class="fa fa-play"></i>&nbsp;Resume Project
-											</button>
-											<button
-												style="margin-left: 5px; margin-bottom: 5px"
-												type="button"
-												class="btn btn-danger"
-												[id]="'show_terminate_' + project?.project_application_shortname"
-												[attr.data-test-id]="'show_terminate_' + project?.project_application_shortname"
-												(click)="selectedProject = project; terminateModal.show()"
-												*ngIf="!(project | hasstatusinlist : application_states.WAIT_FOR_TERMINATION_FM)"
-											>
-												<i class="fas fa-trash-alt"></i>&nbsp;Terminate Project
-											</button>
-											<button
-												style="margin-left: 5px; margin-bottom: 5px"
-												type="button"
-												class="btn btn-warning"
-												[id]="'show_decline_terminate_' + project?.project_application_id"
-												[attr.data-test-id]="'show_decline_terminate_' + project?.perun_name"
-												(click)="selectedProject = project; declineTerminationModal.show()"
-												*ngIf="project | hasstatusinlist : application_states.TERMINATION_REQUESTED"
-											>
-												<i class="fa fa-location-arrow"></i> Decline Termination Project
-											</button>
-											<button
-												style="margin-left: 5px; margin-bottom: 5px"
-												type="button"
-												disabled
-												class="btn btn-warning"
-												[id]="'show_terminate_' + project?.project_application_shortname"
-												[attr.data-test-id]="'show_terminate_' + project?.project_application_shortname"
-												(click)="selectedProject = project; terminateModal.show()"
-												*ngIf="project | hasstatusinlist : application_states.WAIT_FOR_TERMINATION_FM"
-											>
-												Processed by FM
-											</button>
-											<button
-												style="margin-left: 5px"
-												type="button"
-												class="btn btn-info"
-												[id]="'set_protected_' + project?.project_application_shortname"
-												(click)="setProtected(project, true); notificationModal.show()"
-												*ngIf="!(project | hasstatusinlist : application_states.PROTECTED)"
-											>
-												<i class="fas fa-lock"></i>&nbsp;Set Protected
-											</button>
-											<button
-												style="margin-left: 5px"
-												type="button"
-												class="btn btn-info"
-												[id]="'set_unprotected_' + project?.project_application_shortname"
-												(click)="setProtected(project, false); notificationModal.show()"
-												*ngIf="project | hasstatusinlist : application_states.PROTECTED"
-											>
-												<i class="fas fa-lock-open"></i>&nbsp;Set Unprotected
-											</button>
-										</div>
-									</td>
-								</tr>
-							</tbody>
-						</table>
-					</div>
-				</div>
-			</div>
-		</div>
-		<!--/.col-->
-	</div>
+                                        <button
+                                                *ngIf="project | hasstatusinlist : project_states.SUSPENDED"
+                                                style="margin-left: 5px; margin-bottom: 5px"
+                                                type="button"
+                                                class="btn btn-success"
+                                                (click)="selectedProject = project; resumeModal.show()"
+                                        >
+                                            <i class="fa fa-play"></i>&nbsp;Resume Project
+                                        </button>
+                                        <button
+                                                style="margin-left: 5px; margin-bottom: 5px"
+                                                type="button"
+                                                class="btn btn-danger"
+                                                [id]="'show_terminate_' + project?.project_application_shortname"
+                                                [attr.data-test-id]="'show_terminate_' + project?.project_application_shortname"
+                                                (click)="selectedProject = project; terminateModal.show()"
+                                                *ngIf="!(project | hasstatusinlist : application_states.WAIT_FOR_TERMINATION_FM)"
+                                        >
+                                            <i class="fas fa-trash-alt"></i>&nbsp;Terminate Project
+                                        </button>
+                                        <button
+                                                style="margin-left: 5px; margin-bottom: 5px"
+                                                type="button"
+                                                class="btn btn-warning"
+                                                [id]="'show_decline_terminate_' + project?.project_application_id"
+                                                [attr.data-test-id]="'show_decline_terminate_' + project?.perun_name"
+                                                (click)="selectedProject = project; declineTerminationModal.show()"
+                                                *ngIf="project | hasstatusinlist : application_states.TERMINATION_REQUESTED"
+                                        >
+                                            <i class="fa fa-location-arrow"></i> Decline Termination Project
+                                        </button>
+                                        <button
+                                                style="margin-left: 5px; margin-bottom: 5px"
+                                                type="button"
+                                                disabled
+                                                class="btn btn-warning"
+                                                [id]="'show_terminate_' + project?.project_application_shortname"
+                                                [attr.data-test-id]="'show_terminate_' + project?.project_application_shortname"
+                                                (click)="selectedProject = project; terminateModal.show()"
+                                                *ngIf="project | hasstatusinlist : application_states.WAIT_FOR_TERMINATION_FM"
+                                        >
+                                            Processed by FM
+                                        </button>
+                                        <button
+                                                style="margin-left: 5px"
+                                                type="button"
+                                                class="btn btn-info"
+                                                [id]="'set_protected_' + project?.project_application_shortname"
+                                                (click)="setProtected(project, true); notificationModal.show()"
+                                                *ngIf="!(project | hasstatusinlist : application_states.PROTECTED)"
+                                        >
+                                            <i class="fas fa-lock"></i>&nbsp;Set Protected
+                                        </button>
+                                        <button
+                                                style="margin-left: 5px"
+                                                type="button"
+                                                class="btn btn-info"
+                                                [id]="'set_unprotected_' + project?.project_application_shortname"
+                                                (click)="setProtected(project, false); notificationModal.show()"
+                                                *ngIf="project | hasstatusinlist : application_states.PROTECTED"
+                                        >
+                                            <i class="fas fa-lock-open"></i>&nbsp;Set Unprotected
+                                        </button>
+                                    </div>
+                                </td>
+                            </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!--/.col-->
+    </div>
 </div>
 
 <div
-	bsModal
-	#usersModal="bs-modal"
-	class="modal fade"
-	tabindex="-1"
-	role="dialog"
-	aria-labelledby="Label"
-	aria-hidden="true"
+        bsModal
+        #usersModal="bs-modal"
+        class="modal fade"
+        tabindex="-1"
+        role="dialog"
+        aria-labelledby="Label"
+        aria-hidden="true"
 >
-	<div class="modal-dialog modal-lg" role="document">
-		<div class="modal-content">
-			<div class="modal-header">
-				<h4 class="modal-title">Members of the Project {{ usersModalProjectID }} ({{ usersModalProjectName }} )</h4>
-				<button type="button" class="close" style="cursor: pointer" (click)="usersModal.hide()" aria-label="Close">
-					<span aria-hidden="true">&times;</span>
-				</button>
-			</div>
-			<div class="modal-body">
-				<div class="table-responsive">
-					<table class="table table-hover" style="word-wrap: break-word; table-layout: fixed">
-						<thead>
-							<tr>
-								<th>User ID</th>
-								<th>Member ID</th>
-								<th>Elixir ID</th>
-								<th>Email</th>
-								<th>Full Name</th>
-							</tr>
-						</thead>
-						<tbody>
-							<tr *ngFor="let member of usersModalProjectMembers">
-								<td>{{ member.userId }}</td>
-								<td>{{ member.memberId }}</td>
-								<td>{{ member.elixirId }}</td>
-								<td>{{ member.email }}</td>
-								<td>{{ member.userName }}</td>
-							</tr>
-						</tbody>
-					</table>
-				</div>
-			</div>
-			<div class="modal-footer">
-				<button type="button" class="btn btn-secondary" (click)="usersModal.hide()">Close</button>
-			</div>
-		</div>
-		<!-- /.modal-content -->
-	</div>
-	<!-- /.modal-dialog -->
+    <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title">Members of the Project {{ usersModalProjectID }} ({{ usersModalProjectName }}
+                    )</h4>
+                <button type="button" class="close" style="cursor: pointer" (click)="usersModal.hide()"
+                        aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <div class="table-responsive">
+                    <table class="table table-hover" style="word-wrap: break-word; table-layout: fixed">
+                        <thead>
+                        <tr>
+                            <th>User ID</th>
+                            <th>Member ID</th>
+                            <th>Elixir ID</th>
+                            <th>Email</th>
+                            <th>Full Name</th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        <tr *ngFor="let member of usersModalProjectMembers">
+                            <td>{{ member.userId }}</td>
+                            <td>{{ member.memberId }}</td>
+                            <td>{{ member.elixirId }}</td>
+                            <td>{{ member.email }}</td>
+                            <td>{{ member.userName }}</td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" (click)="usersModal.hide()">Close</button>
+            </div>
+        </div>
+        <!-- /.modal-content -->
+    </div>
+    <!-- /.modal-dialog -->
 </div>
 <!-- /.modal -->
 
 <div
-	bsModal
-	#emailModal="bs-modal"
-	class="modal fade"
-	tabindex="-1"
-	role="dialog"
-	aria-labelledby="Label"
-	aria-hidden="true"
+        bsModal
+        #emailModal="bs-modal"
+        class="modal fade"
+        tabindex="-1"
+        role="dialog"
+        aria-labelledby="Label"
+        aria-hidden="true"
 >
-	<div class="modal-dialog modal-lg" role="document">
-		<div class="modal-content">
-			<div class="modal-header">
-				<h4 class="modal-title">{{ emailHeader }}</h4>
-				<button type="button" class="close" style="cursor: pointer" (click)="emailModal.hide()" aria-label="Close">
-					<span aria-hidden="true">&times;</span>
-				</button>
-			</div>
-			<div class="modal-body">
-				<div class="alert alert-info">
-					Workshop projects and their members or administrators only receive mails, when they are explicitly chosen. If
-					other restrictions are selected, the mails of administrators and members of workshops are excluded from the
-					list of mails.
-				</div>
-				<form class="form-horizontal" id="email_form" #f="ngForm">
-					<div class="form-group row" *ngIf="emailType === 0">
-						<label class="col-md-12 control-label"><strong>Which facility should receive the email?</strong></label>
-						<div class="col-md-12">
-							<select
-								class="form-control form-select"
-								[(ngModel)]="selectedFacility"
-								(ngModelChange)="this.adjustVerifyText()"
-								name="selectedFacility"
-								id="selectedFacility"
-							>
-								<option value="ALL">All</option>
-								<option *ngFor="let cc of computecenters" [ngValue]="cc.FacilityId">
-									{{ cc.Name }}
-								</option>
-							</select>
-						</div>
-					</div>
+    <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title">{{ emailHeader }}</h4>
+                <button type="button" class="close" style="cursor: pointer" (click)="emailModal.hide()"
+                        aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <div class="alert alert-info">
+                    Workshop projects and their members or administrators only receive mails, when they are explicitly
+                    chosen. If
+                    other restrictions are selected, the mails of administrators and members of workshops are excluded
+                    from the
+                    list of mails.
+                </div>
+                <form class="form-horizontal" id="email_form" #f="ngForm">
+                    <div class="form-group row" *ngIf="emailType === 0">
+                        <label class="col-md-12 control-label"><strong>Which facility should receive the email?</strong></label>
+                        <div class="col-md-12">
+                            <select
+                                    class="form-control form-select"
+                                    [(ngModel)]="selectedFacility"
+                                    (ngModelChange)="this.adjustVerifyText()"
+                                    name="selectedFacility"
+                                    id="selectedFacility"
+                            >
+                                <option value="ALL">All</option>
+                                <option *ngFor="let cc of computecenters" [ngValue]="cc.FacilityId">
+                                    {{ cc.Name }}
+                                </option>
+                            </select>
+                        </div>
+                    </div>
 
-					<div class="form-group row">
-						<label class="col-md-12 control-label"><strong>Who shall receive the email?</strong></label>
-						<div class="col-md-12">
-							<select
-								class="form-control form-select"
-								[(ngModel)]="selectedProjectType"
-								(ngModelChange)="adjustVerifyText()"
-								name="selectedProjectType"
-								id="selectedProjectType"
-							>
-								<option [ngValue]="'ALL'" [defaultSelected]="true">All</option>
-								<option [ngValue]="'ALL_GM'" *ngIf="emailType === 0">All active projects</option>
-								<option [ngValue]="'EXP'" *ngIf="emailType === 0">All expired projects</option>
-								<option [ngValue]="'SVP'">Simple VM projects</option>
-								<option [ngValue]="'OVP'">OpenStack projects</option>
-								<option [ngValue]="'WSH'">Workshops</option>
-							</select>
-						</div>
-					</div>
-					<div class="form-group row" *ngIf="emailType === 0">
-						<div class="col-md-auto">
-							<div class="form-check">
-								<input
-									class="form-check-input"
-									type="checkbox"
-									[ngModelOptions]="{ standalone: true }"
-									[(ngModel)]="emailAdminsOnly"
-									(ngModelChange)="this.adjustVerifyText()"
-									id="adminOnlyCheckbox"
-								/>
-								<label class="form-check-label" for="adminOnlyCheckbox"> Group administrators only </label>
-							</div>
-						</div>
-					</div>
-					<div class="form-group row" *ngIf="emailType === 0 && selectedProjectType === 'EXP'">
-						<div class="col-md-auto">
-							<div class="form-check">
-								<input
-									class="form-check-input"
-									type="checkbox"
-									[ngModelOptions]="{ standalone: true }"
-									[(ngModel)]="expiredTemplated"
-									(ngModelChange)="this.adjustVerifyText()"
-									id="expiredTemplateCheckbox"
-								/>
-								<label class="form-check-label" for="adminOnlyCheckbox">
-									Send templated mail for expired projects
-								</label>
-							</div>
-						</div>
-					</div>
-					<div *ngIf="expiredTemplated && selectedProjectType === 'EXP'" class="form-group row">
-						<label class="col-md-12 control-label"><strong>Set a removal date</strong></label>
-						<div class="mb-3 mx-auto">
-							<app-datepicker (dayChange)="dayChanged($event)"></app-datepicker>
-						</div>
-						<div class="alert alert-danger" *ngIf="!(removalDate | isFutureTime)">
-							Please select a removal date that is in the future.
-						</div>
-					</div>
-					<div
-						*ngIf="!(expiredTemplated && selectedProjectType === 'EXP')"
-						class="form-group row"
-						[ngClass]="{
+                    <div class="form-group row">
+                        <label class="col-md-12 control-label"><strong>Who shall receive the email?</strong></label>
+                        <div class="col-md-12">
+                            <select
+                                    class="form-control form-select"
+                                    [(ngModel)]="selectedProjectType"
+                                    (ngModelChange)="adjustVerifyText()"
+                                    name="selectedProjectType"
+                                    id="selectedProjectType"
+                            >
+                                <option [ngValue]="'ALL'" [defaultSelected]="true">All</option>
+                                <option [ngValue]="'ALL_GM'" *ngIf="emailType === 0">All active projects</option>
+                                <option [ngValue]="'EXP'" *ngIf="emailType === 0">All expired projects</option>
+                                <option [ngValue]="'SVP'">Simple VM projects</option>
+                                <option [ngValue]="'OVP'">OpenStack projects</option>
+                                <option [ngValue]="'WSH'">Workshops</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="form-group row" *ngIf="emailType === 0">
+                        <div class="col-md-auto">
+                            <div class="form-check">
+                                <input
+                                        class="form-check-input"
+                                        type="checkbox"
+                                        [ngModelOptions]="{ standalone: true }"
+                                        [(ngModel)]="emailAdminsOnly"
+                                        (ngModelChange)="this.adjustVerifyText()"
+                                        id="adminOnlyCheckbox"
+                                />
+                                <label class="form-check-label" for="adminOnlyCheckbox"> Group administrators
+                                    only </label>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="form-group row" *ngIf="emailType === 0 && selectedProjectType === 'EXP'">
+                        <div class="col-md-auto">
+                            <div class="form-check">
+                                <input
+                                        class="form-check-input"
+                                        type="checkbox"
+                                        [ngModelOptions]="{ standalone: true }"
+                                        [(ngModel)]="expiredTemplated"
+                                        (ngModelChange)="this.adjustVerifyText()"
+                                        id="expiredTemplateCheckbox"
+                                />
+                                <label class="form-check-label" for="adminOnlyCheckbox">
+                                    Send templated mail for expired projects
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+                    <div *ngIf="expiredTemplated && selectedProjectType === 'EXP'" class="form-group row">
+                        <label class="col-md-12 control-label"><strong>Set a removal date</strong></label>
+                        <div class="mb-3 mx-auto">
+                            <app-datepicker (dayChange)="dayChanged($event)"></app-datepicker>
+                        </div>
+                        <div class="alert alert-danger" *ngIf="!(removalDate | isFutureTime)">
+                            Please select a removal date that is in the future.
+                        </div>
+                    </div>
+                    <div
+                            *ngIf="!(expiredTemplated && selectedProjectType === 'EXP')"
+                            class="form-group row"
+                            [ngClass]="{
 							'has-danger': emailSub.invalid && (emailSub.dirty || emailSub.touched),
 							'has-success': emailSub.valid && (emailSub.dirty || emailSub.touched)
 						}"
-					>
-						<label class="col-md-12 control-label"><strong>Email subject*</strong></label>
-						<div class="col-md-12">
-							<input
-								required
-								id="emailSubject"
-								name="emailSub"
-								placeholder="Subject"
-								class="form-control"
-								type="text"
-								[(ngModel)]="emailSubject"
-								minlength="1"
-								#emailSub="ngModel"
-								[ngClass]="{
+                    >
+                        <label class="col-md-12 control-label"><strong>Email subject*</strong></label>
+                        <div class="col-md-12">
+                            <input
+                                    required
+                                    id="emailSubject"
+                                    name="emailSub"
+                                    placeholder="Subject"
+                                    class="form-control"
+                                    type="text"
+                                    [(ngModel)]="emailSubject"
+                                    minlength="1"
+                                    #emailSub="ngModel"
+                                    [ngClass]="{
 									'is-invalid': emailSub.invalid && (emailSub.dirty || emailSub.touched),
 									'is-valid': emailSub.valid && (emailSub.dirty || emailSub.touched)
 								}"
-							/>
-						</div>
-					</div>
+                            />
+                        </div>
+                    </div>
 
-					<div class="form-group row" *ngIf="!(expiredTemplated && selectedProjectType === 'EXP')">
-						<label class="col-md-12 control-label"><strong>Reply to (optional)</strong></label>
-						<div class="col-md-12">
-							<input
-								id="reply_to"
-								name="emailReply"
-								placeholder=""
-								class="form-control"
-								type="text"
-								[(ngModel)]="emailReply"
-								#emailRep="ngModel"
-								pattern="([ ]*)(?!(^[.-].*|[^@]*[.-]@|.*\.{2,}.*)|^.{254}.)([a-zA-Z0-9!#$%&'*+\/=?^_`{|}~.-]+@)(?!-.*|.*-\.)([a-zA-Z0-9-]{1,63}\.)+[a-zA-Z]{2,15}([ ]*)"
-								[ngClass]="{
+                    <div class="form-group row" *ngIf="!(expiredTemplated && selectedProjectType === 'EXP')">
+                        <label class="col-md-12 control-label"><strong>Reply to (optional)</strong></label>
+                        <div class="col-md-12">
+                            <input
+                                    id="reply_to"
+                                    name="emailReply"
+                                    placeholder=""
+                                    class="form-control"
+                                    type="text"
+                                    [(ngModel)]="emailReply"
+                                    #emailRep="ngModel"
+                                    pattern="([ ]*)(?!(^[.-].*|[^@]*[.-]@|.*\.{2,}.*)|^.{254}.)([a-zA-Z0-9!#$%&'*+\/=?^_`{|}~.-]+@)(?!-.*|.*-\.)([a-zA-Z0-9-]{1,63}\.)+[a-zA-Z]{2,15}([ ]*)"
+                                    [ngClass]="{
 									'is-invalid': emailRep.invalid && (emailRep.dirty || emailRep.touched),
 									'is-valid': emailRep.valid && (emailRep.dirty || emailRep.touched)
 								}"
-							/>
-						</div>
-					</div>
-					<!-- Textarea -->
-					<div class="form-group row" *ngIf="!(expiredTemplated && selectedProjectType === 'EXP')">
-						<label class="col-md-12 control-label"><strong>Email text*</strong></label>
-						<div class="col-md-12">
+                            />
+                        </div>
+                    </div>
+                    <!-- Textarea -->
+                    <div class="form-group row" *ngIf="!(expiredTemplated && selectedProjectType === 'EXP')">
+                        <label class="col-md-12 control-label"><strong>Email text*</strong></label>
+                        <div class="col-md-12">
 							<textarea
-								minlength="1"
-								required
-								class="form-control"
-								id="emailText"
-								name="emailText"
-								[(ngModel)]="emailText"
-								type="text"
-								#emailT="ngModel"
-								[ngClass]="{
+                                    minlength="1"
+                                    required
+                                    class="form-control"
+                                    id="emailText"
+                                    name="emailText"
+                                    [(ngModel)]="emailText"
+                                    type="text"
+                                    #emailT="ngModel"
+                                    [ngClass]="{
 									'is-invalid': emailT.invalid && (emailT.dirty || emailT.touched),
 									'is-valid': emailT.valid && (emailT.dirty || emailT.touched)
 								}"
-							></textarea>
-						</div>
-					</div>
-				</form>
-			</div>
-			<div class="modal-footer">
-				<button
-					type="button"
-					[disabled]="
+                            ></textarea>
+                        </div>
+                    </div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button
+                        type="button"
+                        [disabled]="
 						f.invalid || (this.expiredTemplated && this.selectedProjectType === 'EXP' && !(removalDate | isFutureTime))
 					"
-					class="btn btn-primary"
-					(click)="emailModal.hide(); verifyModal.show()"
-				>
-					Send email
-				</button>
-				<button type="button" class="btn btn-secondary" (click)="emailModal.hide(); resetEmailModal()">Close</button>
-			</div>
-		</div>
-		<!-- /.modal-content -->
-	</div>
-	<!-- /.modal-dialog -->
+                        class="btn btn-primary"
+                        (click)="emailModal.hide(); verifyModal.show()"
+                >
+                    Send email
+                </button>
+                <button type="button" class="btn btn-secondary" (click)="emailModal.hide(); resetEmailModal()">Close
+                </button>
+            </div>
+        </div>
+        <!-- /.modal-content -->
+    </div>
+    <!-- /.modal-dialog -->
 </div>
 <!-- /.modal -->
 
 <div
-	bsModal
-	#verifyModal="bs-modal"
-	class="modal fade"
-	tabindex="-1"
-	role="dialog"
-	aria-labelledby="Label"
-	aria-hidden="true"
+        bsModal
+        #verifyModal="bs-modal"
+        class="modal fade"
+        tabindex="-1"
+        role="dialog"
+        aria-labelledby="Label"
+        aria-hidden="true"
 >
-	<div class="modal-dialog" role="document">
-		<div class="modal-content">
-			<div class="modal-header">
-				<h4 class="modal-title">Send email</h4>
-				<button type="button" class="close" style="cursor: pointer" (click)="verifyModal.hide()" aria-label="Close">
-					<span aria-hidden="true">&times;</span>
-				</button>
-			</div>
-			<div class="modal-body">
-				<div class="alert alert-warning" role="alert">
-					{{ emailVerify }}
-				</div>
-			</div>
-			<div class="modal-footer">
-				<button
-					class="btn btn-success col-md-4"
-					(click)="
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title">Send email</h4>
+                <button type="button" class="close" style="cursor: pointer" (click)="verifyModal.hide()"
+                        aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <div class="alert alert-warning" role="alert">
+                    {{ emailVerify }}
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button
+                        class="btn btn-success col-md-4"
+                        (click)="
 						sendEmail(emailSubject, emailText, emailReply);
 						verifyModal.hide();
 						f.reset();
 						resetEmailModal();
 						successModal.show()
 					"
-				>
-					Yes
-				</button>
-				<button class="btn btn-danger col-md-4" type="reset" (click)="verifyModal.hide(); emailModal.show()">
-					Cancel
-				</button>
-			</div>
-		</div>
-		<!-- /.modal-content -->
-	</div>
-	<!-- /.modal-dialog -->
+                >
+                    Yes
+                </button>
+                <button class="btn btn-danger col-md-4" type="reset" (click)="verifyModal.hide(); emailModal.show()">
+                    Cancel
+                </button>
+            </div>
+        </div>
+        <!-- /.modal-content -->
+    </div>
+    <!-- /.modal-dialog -->
 </div>
 <!-- /.modal -->
 
 <div
-	bsModal
-	#suspendModal="bs-modal"
-	class="modal fade"
-	tabindex="-1"
-	role="dialog"
-	aria-labelledby="Label"
-	aria-hidden="true"
+        bsModal
+        #suspendModal="bs-modal"
+        class="modal fade"
+        tabindex="-1"
+        role="dialog"
+        aria-labelledby="Label"
+        aria-hidden="true"
 >
-	<div class="modal-dialog" role="document">
-		<div class="modal-content">
-			<div class="modal-header">
-				<h4 class="modal-title">Suspend Project {{ selectedProject?.perun_name }}</h4>
-				<button type="button" class="close" style="cursor: pointer" (click)="suspendModal.hide()" aria-label="Close">
-					<span aria-hidden="true">&times;</span>
-				</button>
-			</div>
-			<div class="modal-body">Are you sure you want to suspend {{ selectedProject?.perun_name }} ?</div>
-			<div class="modal-footer">
-				<button class="btn btn-success col-md-4" (click)="suspendProject(selectedProject); suspendModal.hide()">
-					Yes
-				</button>
-				<button class="btn btn-danger col-md-4" type="reset" (click)="suspendModal.hide()">Cancel</button>
-			</div>
-		</div>
-		<!-- /.modal-content -->
-	</div>
-	<!-- /.modal-dialog -->
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title">Suspend Project {{ selectedProject?.perun_name }}</h4>
+                <button type="button" class="close" style="cursor: pointer" (click)="suspendModal.hide()"
+                        aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">Are you sure you want to suspend {{ selectedProject?.perun_name }} ?</div>
+            <div class="modal-footer">
+                <button class="btn btn-success col-md-4" (click)="suspendProject(selectedProject); suspendModal.hide()">
+                    Yes
+                </button>
+                <button class="btn btn-danger col-md-4" type="reset" (click)="suspendModal.hide()">Cancel</button>
+            </div>
+        </div>
+        <!-- /.modal-content -->
+    </div>
+    <!-- /.modal-dialog -->
 </div>
 <!-- /.modal -->
 
 <div
-	bsModal
-	#resumeModal="bs-modal"
-	class="modal fade"
-	tabindex="-1"
-	role="dialog"
-	aria-labelledby="Label"
-	aria-hidden="true"
+        bsModal
+        #resumeModal="bs-modal"
+        class="modal fade"
+        tabindex="-1"
+        role="dialog"
+        aria-labelledby="Label"
+        aria-hidden="true"
 >
-	<div class="modal-dialog" role="document">
-		<div class="modal-content">
-			<div class="modal-header">
-				<h4 class="modal-title">Resume Project {{ selectedProject?.perun_name }}</h4>
-				<button type="button" class="close" style="cursor: pointer" (click)="resumeModal.hide()" aria-label="Close">
-					<span aria-hidden="true">&times;</span>
-				</button>
-			</div>
-			<div class="modal-body">Are you sure you want to resume {{ selectedProject?.perun_name }} ?</div>
-			<div class="modal-footer">
-				<button class="btn btn-success col-md-4" (click)="resumeProject(selectedProject); resumeModal.hide()">
-					Yes
-				</button>
-				<button class="btn btn-danger col-md-4" type="reset" (click)="resumeModal.hide()">Cancel</button>
-			</div>
-		</div>
-		<!-- /.modal-content -->
-	</div>
-	<!-- /.modal-dialog -->
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title">Resume Project {{ selectedProject?.perun_name }}</h4>
+                <button type="button" class="close" style="cursor: pointer" (click)="resumeModal.hide()"
+                        aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">Are you sure you want to resume {{ selectedProject?.perun_name }} ?</div>
+            <div class="modal-footer">
+                <button class="btn btn-success col-md-4" (click)="resumeProject(selectedProject); resumeModal.hide()">
+                    Yes
+                </button>
+                <button class="btn btn-danger col-md-4" type="reset" (click)="resumeModal.hide()">Cancel</button>
+            </div>
+        </div>
+        <!-- /.modal-content -->
+    </div>
+    <!-- /.modal-dialog -->
 </div>
 <!-- /.modal -->
 
 <div
-	bsModal
-	#successModal="bs-modal"
-	class="modal fade"
-	tabindex="-1"
-	role="dialog"
-	aria-labelledby="Label"
-	aria-hidden="true"
+        bsModal
+        #successModal="bs-modal"
+        class="modal fade"
+        tabindex="-1"
+        role="dialog"
+        aria-labelledby="Label"
+        aria-hidden="true"
 >
-	<div class="modal-dialog" role="document">
-		<div class="modal-content">
-			<div class="modal-header">
-				<h4 class="modal-title" *ngIf="emailStatus === 0">Waiting</h4>
-				<h4 class="modal-title" *ngIf="emailStatus === 1">Success</h4>
-				<h4 class="modal-title" *ngIf="emailStatus === 2">Error</h4>
-				<button type="button" class="close" style="cursor: pointer" (click)="successModal.hide()" aria-label="Close">
-					<span aria-hidden="true">&times;</span>
-				</button>
-			</div>
-			<div class="modal-body">
-				<div class="alert alert-primary" role="alert" *ngIf="emailStatus === 0">
-					Sending the email. <i class="fa fa-spinner fa-spin" style="font-size: 24px"></i>
-				</div>
-				<div class="alert alert-success" role="alert" *ngIf="emailStatus === 1">
-					The email has been send successfully.
-				</div>
-			</div>
-			<div class="alert alert-warning" role="alert" *ngIf="emailStatus === 2">
-				when sending the email an error has occurred.
-			</div>
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title" *ngIf="emailStatus === 0">Waiting</h4>
+                <h4 class="modal-title" *ngIf="emailStatus === 1">Success</h4>
+                <h4 class="modal-title" *ngIf="emailStatus === 2">Error</h4>
+                <button type="button" class="close" style="cursor: pointer" (click)="successModal.hide()"
+                        aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <div class="alert alert-primary" role="alert" *ngIf="emailStatus === 0">
+                    Sending the email. <i class="fa fa-spinner fa-spin" style="font-size: 24px"></i>
+                </div>
+                <div class="alert alert-success" role="alert" *ngIf="emailStatus === 1">
+                    The email has been send successfully.
+                </div>
+            </div>
+            <div class="alert alert-warning" role="alert" *ngIf="emailStatus === 2">
+                when sending the email an error has occurred.
+            </div>
 
-			<div class="modal-footer">
-				<button type="button" class="btn btn-secondary" (click)="successModal.hide()">Close</button>
-			</div>
-		</div>
-		<!-- /.modal-content -->
-	</div>
-	<!-- /.modal-dialog -->
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" (click)="successModal.hide()">Close</button>
+            </div>
+        </div>
+        <!-- /.modal-content -->
+    </div>
+    <!-- /.modal-dialog -->
 </div>
 <!-- /.modal -->
 
 <div
-	bsModal
-	#descriptionModal="bs-modal"
-	class="modal fade"
-	tabindex="-1"
-	role="dialog"
-	aria-labelledby="myModalLabel"
-	aria-hidden="true"
+        bsModal
+        #descriptionModal="bs-modal"
+        class="modal fade"
+        tabindex="-1"
+        role="dialog"
+        aria-labelledby="myModalLabel"
+        aria-hidden="true"
 >
-	<div class="modal-dialog modal-info" role="document">
-		<div class="modal-content">
-			<div class="modal-header">
-				<h4 class="modal-title">Description</h4>
-				<button
-					type="button"
-					class="close"
-					style="cursor: pointer"
-					(click)="descriptionModal.hide()"
-					aria-label="Close"
-				>
-					<span aria-hidden="true">&times;</span>
-				</button>
-			</div>
+    <div class="modal-dialog modal-info" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title">Description</h4>
+                <button
+                        type="button"
+                        class="close"
+                        style="cursor: pointer"
+                        (click)="descriptionModal.hide()"
+                        aria-label="Close"
+                >
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
 
-			<div class="modal-body">
-				<p>{{ selectedProject?.project_application_description }}</p>
-			</div>
-			<div class="modal-footer">
-				<button type="button" class="btn btn-primary" (click)="selectedProject = undefined; descriptionModal.hide()">
-					Close
-				</button>
-			</div>
-		</div>
-		<!-- /.modal-content -->
-	</div>
-	<!-- /.modal-dialog -->
+            <div class="modal-body">
+                <p>{{ selectedProject?.project_application_description }}</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-primary"
+                        (click)="selectedProject = undefined; descriptionModal.hide()">
+                    Close
+                </button>
+            </div>
+        </div>
+        <!-- /.modal-content -->
+    </div>
+    <!-- /.modal-dialog -->
 </div>
 
 <div
-	bsModal
-	#infoModal="bs-modal"
-	class="modal fade"
-	tabindex="-1"
-	role="dialog"
-	aria-labelledby="myModalLabel"
-	aria-hidden="true"
+        bsModal
+        #infoModal="bs-modal"
+        class="modal fade"
+        tabindex="-1"
+        role="dialog"
+        aria-labelledby="myModalLabel"
+        aria-hidden="true"
 >
-	<div class="modal-dialog modal-info modal-lg" role="document">
-		<div class="modal-content">
-			<div class="modal-header">
-				<h4 class="modal-title">Details</h4>
-				<button type="button" class="close" style="cursor: pointer" (click)="infoModal.hide()" aria-label="Close">
-					<span aria-hidden="true">&times;</span>
-				</button>
-			</div>
+    <div class="modal-dialog modal-info modal-lg" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title">Details</h4>
+                <button type="button" class="close" style="cursor: pointer" (click)="infoModal.hide()"
+                        aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
 
-			<div class="modal-body">
-				<div class="table-responsive">
-					<table class="table table-hover">
-						<thead>
-							<th>Description</th>
-							<th>Date created (d/m/y)</th>
-							<th>Expiration Date (d/m/y)</th>
-							<th>Days running</th>
-							<th>Lifetime in Days</th>
-						</thead>
-						<tbody>
-							<td>
-								<button class="btn btn-secondary" (click)="infoModal.hide(); descriptionModal.show()">
-									Show Description
-								</button>
-							</td>
+            <div class="modal-body">
+                <div class="table-responsive">
+                    <table class="table table-hover">
+                        <thead>
+                        <th>Description</th>
+                        <th>Date created (d/m/y)</th>
+                        <th>Expiration Date (d/m/y)</th>
+                        <th>Days running</th>
+                        <th>Lifetime in Days</th>
+                        </thead>
+                        <tbody>
+                        <td>
+                            <button class="btn btn-secondary" (click)="infoModal.hide(); descriptionModal.show()">
+                                Show Description
+                            </button>
+                        </td>
 
-							<td>
+                        <td>
 								<span *ngIf="selectedProject?.project_application_date_approved">{{
-									selectedProject?.project_application_date_approved
-								}}</span>
-								<span *ngIf="!selectedProject?.project_application_date_approved">No creation date available</span>
-							</td>
-							<td>
-								<span *ngIf="selectedProject?.date_end">{{ selectedProject?.date_end }}</span>
-								<span *ngIf="!selectedProject?.date_end">No end date available</span>
-							</td>
-							<td>
-								<span *ngIf="selectedProject?.DaysRunning">{{ selectedProject?.DaysRunning }}</span>
-								<span *ngIf="!selectedProject?.DaysRunning">No runtime available</span>
-							</td>
+                                    selectedProject?.project_application_date_approved
+                                    }}</span>
+                            <span *ngIf="!selectedProject?.project_application_date_approved">No creation date available</span>
+                        </td>
+                        <td>
+                            <span *ngIf="selectedProject?.date_end">{{ selectedProject?.date_end }}</span>
+                            <span *ngIf="!selectedProject?.date_end">No end date available</span>
+                        </td>
+                        <td>
+                            <span *ngIf="selectedProject?.DaysRunning">{{ selectedProject?.DaysRunning }}</span>
+                            <span *ngIf="!selectedProject?.DaysRunning">No runtime available</span>
+                        </td>
 
-							<td>
-								<span *ngIf="selectedProject?.lifetime_days">{{ selectedProject?.lifetime_days }}</span>
-								<span *ngIf="!selectedProject?.lifetime_days">No lifetime available</span>
-							</td>
-						</tbody>
-					</table>
-				</div>
-			</div>
-			<div class="modal-footer">
-				<button type="button" class="btn btn-primary" (click)="selectedProject = undefined; infoModal.hide()">
-					Close
-				</button>
-			</div>
-		</div>
-		<!-- /.modal-content -->
-	</div>
-	<!-- /.modal-dialog -->
+                        <td>
+                            <span *ngIf="selectedProject?.lifetime_days">{{ selectedProject?.lifetime_days }}</span>
+                            <span *ngIf="!selectedProject?.lifetime_days">No lifetime available</span>
+                        </td>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-primary" (click)="selectedProject = undefined; infoModal.hide()">
+                    Close
+                </button>
+            </div>
+        </div>
+        <!-- /.modal-content -->
+    </div>
+    <!-- /.modal-dialog -->
 </div>
 
 <div
-	bsModal
-	#declineTerminationModal="bs-modal"
-	class="modal fade"
-	tabindex="-1"
-	role="dialog"
-	aria-labelledby="Label"
-	aria-hidden="true"
+        bsModal
+        #declineTerminationModal="bs-modal"
+        class="modal fade"
+        tabindex="-1"
+        role="dialog"
+        aria-labelledby="Label"
+        aria-hidden="true"
 >
-	<div class="modal-dialog" role="document">
-		<div class="modal-content">
-			<div class="modal-header">
-				<h4 class="modal-title">Decline Termination</h4>
-				<button
-					type="button"
-					class="close"
-					style="cursor: pointer"
-					(click)="declineTerminationModal.hide()"
-					aria-label="Close"
-				>
-					<span aria-hidden="true">&times;</span>
-				</button>
-			</div>
-			<div class="modal-body">
-				<div class="alert alert-warning" role="alert">
-					Are you sure you want to decline the termination of the project -
-					<strong>{{ selectedProject?.project_application_shortname }}</strong
-					>?
-				</div>
-			</div>
-			<div class="modal-footer">
-				<button
-					class="btn btn-success col-md-4"
-					id="decline_termination_project_btn"
-					(click)="declineTermination(selectedProject); declineTerminationModal.hide(); notificationModal.show()"
-				>
-					Yes
-				</button>
-				<button class="btn btn-danger col-md-4" type="reset" (click)="declineTerminationModal.hide()">Cancel</button>
-			</div>
-		</div>
-		<!-- /.modal-content -->
-	</div>
-	<!-- /.modal-dialog -->
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title">Decline Termination</h4>
+                <button
+                        type="button"
+                        class="close"
+                        style="cursor: pointer"
+                        (click)="declineTerminationModal.hide()"
+                        aria-label="Close"
+                >
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <div class="alert alert-warning" role="alert">
+                    Are you sure you want to decline the termination of the project -
+                    <strong>{{ selectedProject?.project_application_shortname }}</strong
+                    >?
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button
+                        class="btn btn-success col-md-4"
+                        id="decline_termination_project_btn"
+                        (click)="declineTermination(selectedProject); declineTerminationModal.hide(); notificationModal.show()"
+                >
+                    Yes
+                </button>
+                <button class="btn btn-danger col-md-4" type="reset" (click)="declineTerminationModal.hide()">Cancel
+                </button>
+            </div>
+        </div>
+        <!-- /.modal-content -->
+    </div>
+    <!-- /.modal-dialog -->
 </div>
 
 <div
-	bsModal
-	#terminateModal="bs-modal"
-	class="modal fade"
-	tabindex="-1"
-	role="dialog"
-	aria-labelledby="Label"
-	aria-hidden="true"
+        bsModal
+        #terminateModal="bs-modal"
+        class="modal fade"
+        tabindex="-1"
+        role="dialog"
+        aria-labelledby="Label"
+        aria-hidden="true"
 >
-	<div class="modal-dialog" role="document">
-		<div class="modal-content">
-			<div class="modal-header">
-				<h4 class="modal-title">Terminate Project - {{ selectedProject?.project_application_shortname }}</h4>
-				<button type="button" class="close" style="cursor: pointer" (click)="terminateModal.hide()" aria-label="Close">
-					<span aria-hidden="true">&times;</span>
-				</button>
-			</div>
-			<div class="modal-body">
-				<div class="alert alert-warning" role="alert">
-					Are you sure you want to terminate the project - {{ selectedProject?.project_application_shortname }}?
-				</div>
-				<app-project-os-details *ngIf="selectedProject" [project]="selectedProject"></app-project-os-details>
-			</div>
-			<div class="modal-footer">
-				<button
-					class="btn btn-success col-md-4"
-					id="terminate_project_btn"
-					data-test-id="approve_terminate_project_btn"
-					(click)="terminateProject(); terminateModal.hide(); notificationModal.show()"
-				>
-					Yes
-				</button>
-				<button class="btn btn-danger col-md-4" type="reset" (click)="terminateModal.hide()">Cancel</button>
-			</div>
-		</div>
-		<!-- /.modal-content -->
-	</div>
-	<!-- /.modal-dialog -->
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title">Terminate Project - {{ selectedProject?.project_application_shortname }}</h4>
+                <button type="button" class="close" style="cursor: pointer" (click)="terminateModal.hide()"
+                        aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <div class="alert alert-warning" role="alert">
+                    Are you sure you want to terminate the project
+                    - {{ selectedProject?.project_application_shortname }}?
+                </div>
+                <app-project-os-details *ngIf="selectedProject" [project]="selectedProject"></app-project-os-details>
+            </div>
+            <div class="modal-footer">
+                <button
+                        class="btn btn-success col-md-4"
+                        id="terminate_project_btn"
+                        data-test-id="approve_terminate_project_btn"
+                        (click)="terminateProject(); terminateModal.hide(); notificationModal.show()"
+                >
+                    Yes
+                </button>
+                <button class="btn btn-danger col-md-4" type="reset" (click)="terminateModal.hide()">Cancel</button>
+            </div>
+        </div>
+        <!-- /.modal-content -->
+    </div>
+    <!-- /.modal-dialog -->
 </div>
 <!-- /.modal -->
 
 <div
-	bsModal
-	#notificationModal="bs-modal"
-	class="modal"
-	tabindex="-1"
-	role="dialog"
-	aria-labelledby="Label"
-	aria-hidden="true"
+        bsModal
+        #notificationModal="bs-modal"
+        class="modal"
+        tabindex="-1"
+        role="dialog"
+        aria-labelledby="Label"
+        aria-hidden="true"
 >
-	<div class="modal-dialog" role="document">
-		<div class="modal-content">
-			<div class="modal-header">
-				<h4 class="modal-title" id="notification_modal_title" data-test-id="notification_modal_title">
-					{{ notificationModalTitle }}
-				</h4>
-				<button
-					type="button"
-					class="close"
-					style="cursor: pointer"
-					(click)="notificationModal.hide()"
-					aria-label="Close"
-				>
-					<span aria-hidden="true">&times;</span>
-				</button>
-			</div>
-			<div class="modal-body">
-				<div
-					class="alert alert-{{ notificationModalType }}"
-					id="notification_message"
-					role="alert"
-					data-test-id="notification_message"
-				>
-					{{ notificationModalMessage }}
-				</div>
-			</div>
-			<div class="modal-footer">
-				<button
-					id="close_notification"
-					data-test-id="close_notification_modal_btn"
-					type="button"
-					(click)="notificationModal.hide(); resetNotificationModal(); removeModalOpen()"
-					class="btn btn-secondary"
-				>
-					Close
-				</button>
-			</div>
-		</div>
-		<!-- /.modal-content -->
-	</div>
-	<!-- /.modal-dialog -->
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title" id="notification_modal_title" data-test-id="notification_modal_title">
+                    {{ notificationModalTitle }}
+                </h4>
+                <button
+                        type="button"
+                        class="close"
+                        style="cursor: pointer"
+                        (click)="notificationModal.hide()"
+                        aria-label="Close"
+                >
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <div
+                        class="alert alert-{{ notificationModalType }}"
+                        id="notification_message"
+                        role="alert"
+                        data-test-id="notification_message"
+                >
+                    {{ notificationModalMessage }}
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button
+                        id="close_notification"
+                        data-test-id="close_notification_modal_btn"
+                        type="button"
+                        (click)="notificationModal.hide(); resetNotificationModal(); removeModalOpen()"
+                        class="btn btn-secondary"
+                >
+                    Close
+                </button>
+            </div>
+        </div>
+        <!-- /.modal-content -->
+    </div>
+    <!-- /.modal-dialog -->
 </div>
 <!-- /.modal -->

From f225e2563851d40c031dea93f2212aee16cae8c1 Mon Sep 17 00:00:00 2001
From: vktrrdk <vrudko@techfak.uni-bielefeld.de>
Date: Wed, 19 Apr 2023 16:55:52 +0200
Subject: [PATCH 03/15] fix(Volume Overview): Change of facility reflects on
 reload of volumes

---
 .../volumes/volumeOverview.component.html     | 151 +++++++++---------
 1 file changed, 79 insertions(+), 72 deletions(-)

diff --git a/src/app/virtualmachines/volumes/volumeOverview.component.html b/src/app/virtualmachines/volumes/volumeOverview.component.html
index ace577c4d0..922f150049 100644
--- a/src/app/virtualmachines/volumes/volumeOverview.component.html
+++ b/src/app/virtualmachines/volumes/volumeOverview.component.html
@@ -39,11 +39,14 @@
 </div>
 
 <div *ngIf="isLoaded" class="card" style="">
-	<div class="card-header">
-		<strong>Volumes</strong> – Overview
-	</div>
+	<div class="card-header"><strong>Volumes</strong> – Overview</div>
 	<div *ngIf="showFacilities" style="margin-bottom: 10px">
-		<select [(ngModel)]="selectedFacility" class="form-control form-select" name="selectedFacility">
+		<select
+			[(ngModel)]="selectedFacility"
+			class="form-control form-select"
+			name="selectedFacility"
+			(ngModelChange)="getFacilityVolumes()"
+		>
 			<option *ngFor="let facility of managerFacilities" [ngValue]="facility">
 				{{ facility['Facility'] }}
 			</option>
@@ -158,7 +161,8 @@
 					<div class="rTableHead col-1">
 						<input type="checkbox" [checked]="all_volumes_checked" (change)="changeCheckAllVolumes()" /><strong
 							style="margin-left: 2px"
-							> Select all</strong
+						>
+							Select all</strong
 						>
 					</div>
 				</div>
@@ -191,82 +195,82 @@
 
 					<div class="rTableCell">{{ volume?.volume_storage }} GB</div>
 					<div class="rTableCell">
-						<div *ngIf="!(volume.volume_projectid | isMigratedProjectId: migratedProjectIds)">
+						<div *ngIf="!(volume.volume_projectid | isMigratedProjectId : migratedProjectIds)">
 							<div
-							*ngIf="
-								(volume?.volume_created_by_user || showFacilities) &&
-								VolumeStates.staticNO_ACTIONS.indexOf(volume?.volume_status) === -1
-							"
-							class="btn-group"
-							dropdown
-						>
-							<button
-								class="btn btn-secondary"
-								(click)="setRequestStatus(0); setSelectedVolume(volume); verifyModal.show()"
-								type="button"
-								id="delete_button_{{ volume.volume_name }}"
+								*ngIf="
+									(volume?.volume_created_by_user || showFacilities) &&
+									VolumeStates.staticNO_ACTIONS.indexOf(volume?.volume_status) === -1
+								"
+								class="btn-group"
+								dropdown
 							>
-								Delete Volume
-							</button>
-							<button
-								class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
-								type="button"
-								aria-haspopup="true"
-								aria-expanded="false"
-								dropdownToggle
-								aria-controls="dropdown-split"
-							></button>
-							<ul class="dropdown-menu" style="cursor: pointer" role="menu" *dropdownMenu>
-								<li
-									*ngIf="volume?.volume_virtualmachine && volume?.volume_status !== VolumeStates.staticERROR"
-									role="menuitem"
+								<button
+									class="btn btn-secondary"
+									(click)="setRequestStatus(0); setSelectedVolume(volume); verifyModal.show()"
+									type="button"
+									id="delete_button_{{ volume.volume_name }}"
 								>
-									<a class="dropdown-item" (click)="setRequestStatus(1); setSelectedVolume(volume); verifyModal.show()"
-										>Detach Volume</a
+									Delete Volume
+								</button>
+								<button
+									class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
+									type="button"
+									aria-haspopup="true"
+									aria-expanded="false"
+									dropdownToggle
+									aria-controls="dropdown-split"
+								></button>
+								<ul class="dropdown-menu" style="cursor: pointer" role="menu" *dropdownMenu>
+									<li
+										*ngIf="volume?.volume_virtualmachine && volume?.volume_status !== VolumeStates.staticERROR"
+										role="menuitem"
 									>
-								</li>
+										<a
+											class="dropdown-item"
+											(click)="setRequestStatus(1); setSelectedVolume(volume); verifyModal.show()"
+											>Detach Volume</a
+										>
+									</li>
 
-								<li
-									*ngIf="!volume?.volume_virtualmachine && volume?.volume_status !== VolumeStates.staticERROR"
-									role="menuitem"
-								>
-									<a
-										class="dropdown-item"
-										(click)="
-											getActiveVmsByProject(volume?.volume_projectid); setSelectedVolume(volume); attachModal.show()
-										"
-										>Attach Volume</a
+									<li
+										*ngIf="!volume?.volume_virtualmachine && volume?.volume_status !== VolumeStates.staticERROR"
+										role="menuitem"
 									>
-								</li>
-								<li *ngIf="volume?.volume_status !== VolumeStates.staticERROR" role="menuitem">
-									<a
-										class="dropdown-item"
-										(click)="
-											extendVolumeStorage = volume?.volume_storage + 1;
-											selected_volume = volume;
-											getSelectedVolumeStorage();
-											extendModal.show()
-										"
-										>Extend Volume</a
-									>
-								</li>
-								<li role="menuitem">
-									<a class="dropdown-item" (click)="setSelectedVolume(volume); renameModal.show()">Rename Volume</a>
-								</li>
-							</ul>
-						</div>
-						</div>
-						<div *ngIf="(volume.volume_projectid | isMigratedProjectId: migratedProjectIds)">
-							<div class="alert alert-info">
-								This volume is part of a migrated project!
+										<a
+											class="dropdown-item"
+											(click)="
+												getActiveVmsByProject(volume?.volume_projectid); setSelectedVolume(volume); attachModal.show()
+											"
+											>Attach Volume</a
+										>
+									</li>
+									<li *ngIf="volume?.volume_status !== VolumeStates.staticERROR" role="menuitem">
+										<a
+											class="dropdown-item"
+											(click)="
+												extendVolumeStorage = volume?.volume_storage + 1;
+												selected_volume = volume;
+												getSelectedVolumeStorage();
+												extendModal.show()
+											"
+											>Extend Volume</a
+										>
+									</li>
+									<li role="menuitem">
+										<a class="dropdown-item" (click)="setSelectedVolume(volume); renameModal.show()">Rename Volume</a>
+									</li>
+								</ul>
 							</div>
 						</div>
+						<div *ngIf="volume.volume_projectid | isMigratedProjectId : migratedProjectIds">
+							<div class="alert alert-info">This volume is part of a migrated project!</div>
+						</div>
 					</div>
 					<div class="rTableCell">
 						<input
 							type="checkbox"
-							[disabled]="(volume.volume_projectid | isMigratedProjectId: migratedProjectIds)"
-							[checked]="isVolChecked(volume) && !(volume.volume_projectid | isMigratedProjectId: migratedProjectIds)"
+							[disabled]="volume.volume_projectid | isMigratedProjectId : migratedProjectIds"
+							[checked]="isVolChecked(volume) && !(volume.volume_projectid | isMigratedProjectId : migratedProjectIds)"
 							(change)="changeCheckedVolume(volume)"
 							*ngIf="
 								(volume?.volume_created_by_user || showFacilities) &&
@@ -926,9 +930,12 @@ <h4 class="modal-title">Create & Attach Volume</h4>
 							"
 						>
 							<option value="undefined" disabled selected hidden>Please Select</option>
-							<option *ngFor="let project of projects"
-											[disabled]="(project[1] | isMigratedProjectId: migratedProjectIds)"
-											[ngValue]="project" id="project_option_{{ project[0] }}">
+							<option
+								*ngFor="let project of projects"
+								[disabled]="project[1] | isMigratedProjectId : migratedProjectIds"
+								[ngValue]="project"
+								id="project_option_{{ project[0] }}"
+							>
 								{{ project[0] }}
 							</option>
 						</select>

From 434626096bc723524138872550ec7e92c4db5152 Mon Sep 17 00:00:00 2001
From: vktrrdk <vrudko@techfak.uni-bielefeld.de>
Date: Wed, 19 Apr 2023 16:59:08 +0200
Subject: [PATCH 04/15] Revert "fix(Volume Overview): Change of facility
 reflects on reload of volumes"

This reverts commit f225e2563851d40c031dea93f2212aee16cae8c1.
---
 .../volumes/volumeOverview.component.html     | 151 +++++++++---------
 1 file changed, 72 insertions(+), 79 deletions(-)

diff --git a/src/app/virtualmachines/volumes/volumeOverview.component.html b/src/app/virtualmachines/volumes/volumeOverview.component.html
index 922f150049..ace577c4d0 100644
--- a/src/app/virtualmachines/volumes/volumeOverview.component.html
+++ b/src/app/virtualmachines/volumes/volumeOverview.component.html
@@ -39,14 +39,11 @@
 </div>
 
 <div *ngIf="isLoaded" class="card" style="">
-	<div class="card-header"><strong>Volumes</strong> – Overview</div>
+	<div class="card-header">
+		<strong>Volumes</strong> – Overview
+	</div>
 	<div *ngIf="showFacilities" style="margin-bottom: 10px">
-		<select
-			[(ngModel)]="selectedFacility"
-			class="form-control form-select"
-			name="selectedFacility"
-			(ngModelChange)="getFacilityVolumes()"
-		>
+		<select [(ngModel)]="selectedFacility" class="form-control form-select" name="selectedFacility">
 			<option *ngFor="let facility of managerFacilities" [ngValue]="facility">
 				{{ facility['Facility'] }}
 			</option>
@@ -161,8 +158,7 @@
 					<div class="rTableHead col-1">
 						<input type="checkbox" [checked]="all_volumes_checked" (change)="changeCheckAllVolumes()" /><strong
 							style="margin-left: 2px"
-						>
-							Select all</strong
+							> Select all</strong
 						>
 					</div>
 				</div>
@@ -195,82 +191,82 @@
 
 					<div class="rTableCell">{{ volume?.volume_storage }} GB</div>
 					<div class="rTableCell">
-						<div *ngIf="!(volume.volume_projectid | isMigratedProjectId : migratedProjectIds)">
+						<div *ngIf="!(volume.volume_projectid | isMigratedProjectId: migratedProjectIds)">
 							<div
-								*ngIf="
-									(volume?.volume_created_by_user || showFacilities) &&
-									VolumeStates.staticNO_ACTIONS.indexOf(volume?.volume_status) === -1
-								"
-								class="btn-group"
-								dropdown
+							*ngIf="
+								(volume?.volume_created_by_user || showFacilities) &&
+								VolumeStates.staticNO_ACTIONS.indexOf(volume?.volume_status) === -1
+							"
+							class="btn-group"
+							dropdown
+						>
+							<button
+								class="btn btn-secondary"
+								(click)="setRequestStatus(0); setSelectedVolume(volume); verifyModal.show()"
+								type="button"
+								id="delete_button_{{ volume.volume_name }}"
 							>
-								<button
-									class="btn btn-secondary"
-									(click)="setRequestStatus(0); setSelectedVolume(volume); verifyModal.show()"
-									type="button"
-									id="delete_button_{{ volume.volume_name }}"
+								Delete Volume
+							</button>
+							<button
+								class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
+								type="button"
+								aria-haspopup="true"
+								aria-expanded="false"
+								dropdownToggle
+								aria-controls="dropdown-split"
+							></button>
+							<ul class="dropdown-menu" style="cursor: pointer" role="menu" *dropdownMenu>
+								<li
+									*ngIf="volume?.volume_virtualmachine && volume?.volume_status !== VolumeStates.staticERROR"
+									role="menuitem"
 								>
-									Delete Volume
-								</button>
-								<button
-									class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
-									type="button"
-									aria-haspopup="true"
-									aria-expanded="false"
-									dropdownToggle
-									aria-controls="dropdown-split"
-								></button>
-								<ul class="dropdown-menu" style="cursor: pointer" role="menu" *dropdownMenu>
-									<li
-										*ngIf="volume?.volume_virtualmachine && volume?.volume_status !== VolumeStates.staticERROR"
-										role="menuitem"
+									<a class="dropdown-item" (click)="setRequestStatus(1); setSelectedVolume(volume); verifyModal.show()"
+										>Detach Volume</a
 									>
-										<a
-											class="dropdown-item"
-											(click)="setRequestStatus(1); setSelectedVolume(volume); verifyModal.show()"
-											>Detach Volume</a
-										>
-									</li>
+								</li>
 
-									<li
-										*ngIf="!volume?.volume_virtualmachine && volume?.volume_status !== VolumeStates.staticERROR"
-										role="menuitem"
+								<li
+									*ngIf="!volume?.volume_virtualmachine && volume?.volume_status !== VolumeStates.staticERROR"
+									role="menuitem"
+								>
+									<a
+										class="dropdown-item"
+										(click)="
+											getActiveVmsByProject(volume?.volume_projectid); setSelectedVolume(volume); attachModal.show()
+										"
+										>Attach Volume</a
 									>
-										<a
-											class="dropdown-item"
-											(click)="
-												getActiveVmsByProject(volume?.volume_projectid); setSelectedVolume(volume); attachModal.show()
-											"
-											>Attach Volume</a
-										>
-									</li>
-									<li *ngIf="volume?.volume_status !== VolumeStates.staticERROR" role="menuitem">
-										<a
-											class="dropdown-item"
-											(click)="
-												extendVolumeStorage = volume?.volume_storage + 1;
-												selected_volume = volume;
-												getSelectedVolumeStorage();
-												extendModal.show()
-											"
-											>Extend Volume</a
-										>
-									</li>
-									<li role="menuitem">
-										<a class="dropdown-item" (click)="setSelectedVolume(volume); renameModal.show()">Rename Volume</a>
-									</li>
-								</ul>
-							</div>
+								</li>
+								<li *ngIf="volume?.volume_status !== VolumeStates.staticERROR" role="menuitem">
+									<a
+										class="dropdown-item"
+										(click)="
+											extendVolumeStorage = volume?.volume_storage + 1;
+											selected_volume = volume;
+											getSelectedVolumeStorage();
+											extendModal.show()
+										"
+										>Extend Volume</a
+									>
+								</li>
+								<li role="menuitem">
+									<a class="dropdown-item" (click)="setSelectedVolume(volume); renameModal.show()">Rename Volume</a>
+								</li>
+							</ul>
 						</div>
-						<div *ngIf="volume.volume_projectid | isMigratedProjectId : migratedProjectIds">
-							<div class="alert alert-info">This volume is part of a migrated project!</div>
+						</div>
+						<div *ngIf="(volume.volume_projectid | isMigratedProjectId: migratedProjectIds)">
+							<div class="alert alert-info">
+								This volume is part of a migrated project!
+							</div>
 						</div>
 					</div>
 					<div class="rTableCell">
 						<input
 							type="checkbox"
-							[disabled]="volume.volume_projectid | isMigratedProjectId : migratedProjectIds"
-							[checked]="isVolChecked(volume) && !(volume.volume_projectid | isMigratedProjectId : migratedProjectIds)"
+							[disabled]="(volume.volume_projectid | isMigratedProjectId: migratedProjectIds)"
+							[checked]="isVolChecked(volume) && !(volume.volume_projectid | isMigratedProjectId: migratedProjectIds)"
 							(change)="changeCheckedVolume(volume)"
 							*ngIf="
 								(volume?.volume_created_by_user || showFacilities) &&
@@ -930,12 +926,9 @@ <h4 class="modal-title">Create & Attach Volume</h4>
 							"
 						>
 							<option value="undefined" disabled selected hidden>Please Select</option>
-							<option
-								*ngFor="let project of projects"
-								[disabled]="project[1] | isMigratedProjectId : migratedProjectIds"
-								[ngValue]="project"
-								id="project_option_{{ project[0] }}"
-							>
+							<option *ngFor="let project of projects"
+											[disabled]="(project[1] | isMigratedProjectId: migratedProjectIds)"
+											[ngValue]="project" id="project_option_{{ project[0] }}">
 								{{ project[0] }}
 							</option>
 						</select>

From 643192f85b438d8228e11a204b7000b3b3cf1b2d Mon Sep 17 00:00:00 2001
From: Viktor Rudko <43116821+vktrrdk@users.noreply.github.com>
Date: Thu, 20 Apr 2023 10:55:50 +0200
Subject: [PATCH 05/15] Fix/fm overview spinner (#5641)

* fix(FM Overview): Change loading status for spinner on facility selection change

* fix(Linting):blacked code

* fix(Volume Overview): Change of facility reflects on reload of volumes

---------

Co-authored-by: vktrrdk <vktrrdk@users.noreply.github.com>
Co-authored-by: dweinholz <david-weinholz@web.de>
---
 .../facilityprojectsoverview.component.ts     |   1 +
 .../volumes/volumeOverview.component.html     | 151 +++++++++---------
 2 files changed, 80 insertions(+), 72 deletions(-)

diff --git a/src/app/facility_manager/facilityprojectsoverview.component.ts b/src/app/facility_manager/facilityprojectsoverview.component.ts
index 3770c914ee..90e9ce3eae 100644
--- a/src/app/facility_manager/facilityprojectsoverview.component.ts
+++ b/src/app/facility_manager/facilityprojectsoverview.component.ts
@@ -198,6 +198,7 @@ export class FacilityProjectsOverviewComponent extends AbstractBaseClass impleme
 	 * Gets projects and sets email subject prefix when selected facility changes.
 	 */
 	onChangeSelectedFacility(): void {
+		this.isLoaded = false;
 		this.getFacilityProjects(this.selectedFacility['FacilityId']);
 		this.emailSubject = `[${this.selectedFacility['Facility']}]`;
 	}
diff --git a/src/app/virtualmachines/volumes/volumeOverview.component.html b/src/app/virtualmachines/volumes/volumeOverview.component.html
index ace577c4d0..922f150049 100644
--- a/src/app/virtualmachines/volumes/volumeOverview.component.html
+++ b/src/app/virtualmachines/volumes/volumeOverview.component.html
@@ -39,11 +39,14 @@
 </div>
 
 <div *ngIf="isLoaded" class="card" style="">
-	<div class="card-header">
-		<strong>Volumes</strong> – Overview
-	</div>
+	<div class="card-header"><strong>Volumes</strong> – Overview</div>
 	<div *ngIf="showFacilities" style="margin-bottom: 10px">
-		<select [(ngModel)]="selectedFacility" class="form-control form-select" name="selectedFacility">
+		<select
+			[(ngModel)]="selectedFacility"
+			class="form-control form-select"
+			name="selectedFacility"
+			(ngModelChange)="getFacilityVolumes()"
+		>
 			<option *ngFor="let facility of managerFacilities" [ngValue]="facility">
 				{{ facility['Facility'] }}
 			</option>
@@ -158,7 +161,8 @@
 					<div class="rTableHead col-1">
 						<input type="checkbox" [checked]="all_volumes_checked" (change)="changeCheckAllVolumes()" /><strong
 							style="margin-left: 2px"
-							> Select all</strong
+						>
+							Select all</strong
 						>
 					</div>
 				</div>
@@ -191,82 +195,82 @@
 
 					<div class="rTableCell">{{ volume?.volume_storage }} GB</div>
 					<div class="rTableCell">
-						<div *ngIf="!(volume.volume_projectid | isMigratedProjectId: migratedProjectIds)">
+						<div *ngIf="!(volume.volume_projectid | isMigratedProjectId : migratedProjectIds)">
 							<div
-							*ngIf="
-								(volume?.volume_created_by_user || showFacilities) &&
-								VolumeStates.staticNO_ACTIONS.indexOf(volume?.volume_status) === -1
-							"
-							class="btn-group"
-							dropdown
-						>
-							<button
-								class="btn btn-secondary"
-								(click)="setRequestStatus(0); setSelectedVolume(volume); verifyModal.show()"
-								type="button"
-								id="delete_button_{{ volume.volume_name }}"
+								*ngIf="
+									(volume?.volume_created_by_user || showFacilities) &&
+									VolumeStates.staticNO_ACTIONS.indexOf(volume?.volume_status) === -1
+								"
+								class="btn-group"
+								dropdown
 							>
-								Delete Volume
-							</button>
-							<button
-								class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
-								type="button"
-								aria-haspopup="true"
-								aria-expanded="false"
-								dropdownToggle
-								aria-controls="dropdown-split"
-							></button>
-							<ul class="dropdown-menu" style="cursor: pointer" role="menu" *dropdownMenu>
-								<li
-									*ngIf="volume?.volume_virtualmachine && volume?.volume_status !== VolumeStates.staticERROR"
-									role="menuitem"
+								<button
+									class="btn btn-secondary"
+									(click)="setRequestStatus(0); setSelectedVolume(volume); verifyModal.show()"
+									type="button"
+									id="delete_button_{{ volume.volume_name }}"
 								>
-									<a class="dropdown-item" (click)="setRequestStatus(1); setSelectedVolume(volume); verifyModal.show()"
-										>Detach Volume</a
+									Delete Volume
+								</button>
+								<button
+									class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
+									type="button"
+									aria-haspopup="true"
+									aria-expanded="false"
+									dropdownToggle
+									aria-controls="dropdown-split"
+								></button>
+								<ul class="dropdown-menu" style="cursor: pointer" role="menu" *dropdownMenu>
+									<li
+										*ngIf="volume?.volume_virtualmachine && volume?.volume_status !== VolumeStates.staticERROR"
+										role="menuitem"
 									>
-								</li>
+										<a
+											class="dropdown-item"
+											(click)="setRequestStatus(1); setSelectedVolume(volume); verifyModal.show()"
+											>Detach Volume</a
+										>
+									</li>
 
-								<li
-									*ngIf="!volume?.volume_virtualmachine && volume?.volume_status !== VolumeStates.staticERROR"
-									role="menuitem"
-								>
-									<a
-										class="dropdown-item"
-										(click)="
-											getActiveVmsByProject(volume?.volume_projectid); setSelectedVolume(volume); attachModal.show()
-										"
-										>Attach Volume</a
+									<li
+										*ngIf="!volume?.volume_virtualmachine && volume?.volume_status !== VolumeStates.staticERROR"
+										role="menuitem"
 									>
-								</li>
-								<li *ngIf="volume?.volume_status !== VolumeStates.staticERROR" role="menuitem">
-									<a
-										class="dropdown-item"
-										(click)="
-											extendVolumeStorage = volume?.volume_storage + 1;
-											selected_volume = volume;
-											getSelectedVolumeStorage();
-											extendModal.show()
-										"
-										>Extend Volume</a
-									>
-								</li>
-								<li role="menuitem">
-									<a class="dropdown-item" (click)="setSelectedVolume(volume); renameModal.show()">Rename Volume</a>
-								</li>
-							</ul>
-						</div>
-						</div>
-						<div *ngIf="(volume.volume_projectid | isMigratedProjectId: migratedProjectIds)">
-							<div class="alert alert-info">
-								This volume is part of a migrated project!
+										<a
+											class="dropdown-item"
+											(click)="
+												getActiveVmsByProject(volume?.volume_projectid); setSelectedVolume(volume); attachModal.show()
+											"
+											>Attach Volume</a
+										>
+									</li>
+									<li *ngIf="volume?.volume_status !== VolumeStates.staticERROR" role="menuitem">
+										<a
+											class="dropdown-item"
+											(click)="
+												extendVolumeStorage = volume?.volume_storage + 1;
+												selected_volume = volume;
+												getSelectedVolumeStorage();
+												extendModal.show()
+											"
+											>Extend Volume</a
+										>
+									</li>
+									<li role="menuitem">
+										<a class="dropdown-item" (click)="setSelectedVolume(volume); renameModal.show()">Rename Volume</a>
+									</li>
+								</ul>
 							</div>
 						</div>
+						<div *ngIf="volume.volume_projectid | isMigratedProjectId : migratedProjectIds">
+							<div class="alert alert-info">This volume is part of a migrated project!</div>
+						</div>
 					</div>
 					<div class="rTableCell">
 						<input
 							type="checkbox"
-							[disabled]="(volume.volume_projectid | isMigratedProjectId: migratedProjectIds)"
-							[checked]="isVolChecked(volume) && !(volume.volume_projectid | isMigratedProjectId: migratedProjectIds)"
+							[disabled]="volume.volume_projectid | isMigratedProjectId : migratedProjectIds"
+							[checked]="isVolChecked(volume) && !(volume.volume_projectid | isMigratedProjectId : migratedProjectIds)"
 							(change)="changeCheckedVolume(volume)"
 							*ngIf="
 								(volume?.volume_created_by_user || showFacilities) &&
@@ -926,9 +930,12 @@ <h4 class="modal-title">Create & Attach Volume</h4>
 							"
 						>
 							<option value="undefined" disabled selected hidden>Please Select</option>
-							<option *ngFor="let project of projects"
-											[disabled]="(project[1] | isMigratedProjectId: migratedProjectIds)"
-											[ngValue]="project" id="project_option_{{ project[0] }}">
+							<option
+								*ngFor="let project of projects"
+								[disabled]="project[1] | isMigratedProjectId : migratedProjectIds"
+								[ngValue]="project"
+								id="project_option_{{ project[0] }}"
+							>
 								{{ project[0] }}
 							</option>
 						</select>

From 5d8793bfc53d54c404c7cb9ebb5498ba0cfd12f2 Mon Sep 17 00:00:00 2001
From: Viktor Rudko <43116821+vktrrdk@users.noreply.github.com>
Date: Thu, 20 Apr 2023 11:02:19 +0200
Subject: [PATCH 06/15] feat(Workshop): Added link to wiki (#5643)

---
 .../workshop-overview/workshop-overview.component.html    | 3 +++
 .../workshop-overview/workshop-overview.component.ts      | 8 +++++++-
 src/links/links.ts                                        | 2 ++
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/app/virtualmachines/workshop/workshop-overview/workshop-overview.component.html b/src/app/virtualmachines/workshop/workshop-overview/workshop-overview.component.html
index a1ff30a22b..b8a75d3e85 100644
--- a/src/app/virtualmachines/workshop/workshop-overview/workshop-overview.component.html
+++ b/src/app/virtualmachines/workshop/workshop-overview/workshop-overview.component.html
@@ -321,6 +321,9 @@
 						timeframes are displayed using the "Central European Time". The date you enter is
 						<strong> dependent on the timezone of your browser </strong>. Please enter the time slots day by day, to be
 						more precise!
+						<br />
+						See more on timeframes
+						<a [href]="WIKI_WORKSHOP_TIMEFRAMES" target="_blank" rel="noopener noreferrer">here</a>.
 					</div>
 					<h6 class="card-title">Existing timeframes</h6>
 					<table class="table" *ngIf="workshopTimeFrames.length > 0">
diff --git a/src/app/virtualmachines/workshop/workshop-overview/workshop-overview.component.ts b/src/app/virtualmachines/workshop/workshop-overview/workshop-overview.component.ts
index 64ff111191..4d2dc699e8 100644
--- a/src/app/virtualmachines/workshop/workshop-overview/workshop-overview.component.ts
+++ b/src/app/virtualmachines/workshop/workshop-overview/workshop-overview.component.ts
@@ -8,7 +8,12 @@ import { UrlData } from '../workshop-urlinfo.model';
 import { WorkshopService } from '../../../api-connector/workshop.service';
 import { ProjectMember } from '../../../projectmanagement/project_member.model';
 import { WorkshopVM } from '../workshop-vm.model';
-import { WIKI_WORKSHOPS, CLOUD_PORTAL_SUPPORT_MAIL, LIFESCIENCE_HOSTEL_SIGNUP } from '../../../../links/links';
+import {
+	WIKI_WORKSHOPS,
+	CLOUD_PORTAL_SUPPORT_MAIL,
+	LIFESCIENCE_HOSTEL_SIGNUP,
+	WIKI_WORKSHOP_TIMEFRAMES,
+} from '../../../../links/links';
 import { WorkshopTimeFrame } from '../workshopTimeFrame.model';
 
 interface MemberVm {
@@ -30,6 +35,7 @@ export class WorkshopOverviewComponent implements OnInit, OnDestroy {
 	WIKI_WORKSHOPS: string = WIKI_WORKSHOPS;
 	LIFESCIENCE_HOSTEL_SIGNUP: string = LIFESCIENCE_HOSTEL_SIGNUP;
 	CLOUD_PORTAL_SUPPORT_MAIL: string = CLOUD_PORTAL_SUPPORT_MAIL;
+	WIKI_WORKSHOP_TIMEFRAMES: string = WIKI_WORKSHOP_TIMEFRAMES;
 	subscription: Subscription = new Subscription();
 	resend_info: boolean = false;
 	sending_mails = false;
diff --git a/src/links/links.ts b/src/links/links.ts
index 9d68a1300e..94bf03e061 100644
--- a/src/links/links.ts
+++ b/src/links/links.ts
@@ -29,6 +29,7 @@ export const SCALE_SCRIPT_LINK: string =	'https://raw.githubusercontent.com/deNB
 export const WIKI_MOUNT_VOLUME: string = `${environment.WIKI_PRE}simple_vm/volumes/#mount-a-volume`;
 export const WIKI_VOLUMES_LINK: string = `${environment.WIKI_PRE}simple_vm/volumes/`;
 export const WIKI_MOSH_LINK: string = `${environment.WIKI_PRE}Tutorials/Mosh/`;
+export const WIKI_WORKSHOP_TIMEFRAMES: string = `${environment.WIKI_PRE}simple_vm/workshop/#workshop-timeframes`;
 export const WIKI_EPHEMERAL_LINK: string = `${environment.WIKI_PRE}simple_vm/new_instance/#information-for-ephemeral-flavors`;
 export const WIKI_GROUP_INVITATIONS: string = `${environment.WIKI_PRE}simple_vm/project_overview/#inviting-members`;
 export const SCALING_UP_WIKI: string = `${environment.WIKI_PRE}simple_vm/Cluster/cluster_overview/#3-scale-up`;
@@ -79,6 +80,7 @@ export const WIKI_LINKS: string[] = [
 	WIKI_MOSH_LINK,
 	WIKI_PERSONAL_DATA,
 	WIKI_SVM_MIGRATION_LINK,
+	WIKI_WORKSHOP_TIMEFRAMES,
 ];
 
 export const LANDING_PAGE_LINKS: string[] = [

From 327724f514504597c62db9e68ce2cfb86dd1515b Mon Sep 17 00:00:00 2001
From: Viktor Rudko <43116821+vktrrdk@users.noreply.github.com>
Date: Thu, 20 Apr 2023 11:09:33 +0200
Subject: [PATCH 07/15] =?UTF-8?q?fix(Application):=20Added=20missing=20pos?=
 =?UTF-8?q?sibility=20of=20changing=20of=20personal=20d=E2=80=A6=20(#5570)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(Application): Added missing possibility of changing of personal data parameters on adjustment

* fix(Linting):blacked code (#5638)

Co-authored-by: vktrrdk <vktrrdk@users.noreply.github.com>

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: vktrrdk <vktrrdk@users.noreply.github.com>

From 25d47587b5d02e81d9d8e233977bef163c61a401 Mon Sep 17 00:00:00 2001
From: Viktor Rudko <43116821+vktrrdk@users.noreply.github.com>
Date: Thu, 20 Apr 2023 11:09:48 +0200
Subject: [PATCH 08/15] feat(VM): Users are able to initiate restart for VMs in
 error-state (#5644)

* feat(VM): Users are able to initiate restart for VMs in error-state

* also added handling for instance detail page
---
 .../vmcard/vmcard.component.html              |  10 +-
 .../vmdetail/vmdetail.component.html          | 159 +++++++++++-------
 2 files changed, 98 insertions(+), 71 deletions(-)

diff --git a/src/app/virtualmachines/vmcard/vmcard.component.html b/src/app/virtualmachines/vmcard/vmcard.component.html
index 4d74001e59..7a4ebb2844 100644
--- a/src/app/virtualmachines/vmcard/vmcard.component.html
+++ b/src/app/virtualmachines/vmcard/vmcard.component.html
@@ -318,7 +318,8 @@
 							!(vm?.status | hasStatus : VirtualMachineStates.staticPORT_CLOSED)) ||
 						(vm?.status | hasStatus : VirtualMachineStates.staticNOT_FOUND) ||
 						(vm?.status | hasStatus : VirtualMachineStates.staticDELETED) ||
-						this.vm.project_is_migrated_to_simple_vm || this.vm.migrate_project_to_simple_vm
+						this.vm.project_is_migrated_to_simple_vm ||
+						this.vm.migrate_project_to_simple_vm
 					"
 					[id]="'showActionsButton_' + vm?.name"
 					[attr.data-test-id]="'show_actions_button_' + vm?.name"
@@ -508,12 +509,7 @@
 						vm.client.features['VM_REBOOT'] &&
 						!(
 							vm?.status
-							| statusInList
-								: [
-										VirtualMachineStates.staticDELETED,
-										VirtualMachineStates.staticERROR,
-										VirtualMachineStates.staticCREATION_FAILED
-								  ]
+							| statusInList : [VirtualMachineStates.staticDELETED, VirtualMachineStates.staticCREATION_FAILED]
 						)
 					"
 				>
diff --git a/src/app/virtualmachines/vmdetail/vmdetail.component.html b/src/app/virtualmachines/vmdetail/vmdetail.component.html
index 8454826dce..aa9fc0aa94 100644
--- a/src/app/virtualmachines/vmdetail/vmdetail.component.html
+++ b/src/app/virtualmachines/vmdetail/vmdetail.component.html
@@ -68,76 +68,102 @@
 				<div class="card-body">
 					<app-virtualmachineinfo [virtualMachine]="virtualMachine"></app-virtualmachineinfo>
 				</div>
-				<hr *ngIf="virtualMachine?.status === virtualMachineStates.staticACTIVE" />
-				<div class="card-body" *ngIf="virtualMachine?.status === virtualMachineStates.staticACTIVE">
-					<span class="text-muted font-weight-bold card-title" style="margin-left: 15px"> Connect Information</span>
-					<div class="p-x-1 py-h">
-						<div *ngFor="let mode of virtualMachine?.modes">
-							<div class="row">
-								<div class="col-4">
-									<div class="callout">
-										<small class="text-muted">via</small><br />
-										<strong class="text-muted">{{ mode.name }}</strong>
+				<hr
+					*ngIf="
+						virtualMachine?.status
+							| statusInList : [virtualMachineStates.staticACTIVE, virtualMachineStates.staticERROR]
+					"
+				/>
+				<div
+					class="card-body"
+					*ngIf="
+						virtualMachine?.status
+							| statusInList : [virtualMachineStates.staticACTIVE, virtualMachineStates.staticERROR]
+					"
+				>
+					<ng-container *ngIf="virtualMachine?.status === virtualMachineStates.staticACTIVE">
+						<span class="text-muted font-weight-bold card-title" style="margin-left: 15px"> Connect Information</span>
+						<div class="p-x-1 py-h">
+							<div *ngFor="let mode of virtualMachine?.modes">
+								<div class="row">
+									<div class="col-4">
+										<div class="callout">
+											<small class="text-muted">via</small><br />
+											<strong class="text-muted">{{ mode.name }}</strong>
+										</div>
 									</div>
-								</div>
-								<div class="col-4">
-									<div class="callout">
-										<small class="text-muted">with</small><br />
-										<strong class="text-muted" [innerHTML]="mode?.description"></strong>
+									<div class="col-4">
+										<div class="callout">
+											<small class="text-muted">with</small><br />
+											<strong class="text-muted" [innerHTML]="mode?.description"></strong>
+										</div>
+									</div>
+									<div class="col-4">
+										<div
+											class="font-weight-bold font-xs btn-block btn btn-outline-secondary"
+											id="copyCommandButton"
+											style="margin-top: 20px"
+											(click)="copyToClipboard(mode.copy_field)"
+											[closeDelay]="3000"
+											ngbTooltip="Copied!"
+											triggers="click:blur"
+										>
+											Copy Command
+										</div>
 									</div>
 								</div>
-								<div class="col-4">
-									<div
-										class="font-weight-bold font-xs btn-block btn btn-outline-secondary"
-										id="copyCommandButton"
-										style="margin-top: 20px"
-										(click)="copyToClipboard(mode.copy_field)"
-										[closeDelay]="3000"
-										ngbTooltip="Copied!"
-										triggers="click:blur"
-									>
-										Copy Command
+								<div class="row" *ngIf="mode.name === 'SSH' || mode.name === 'ssh'">
+									<div class="col-auto">
+										<p class="font-weight-bold font-xs text-muted">
+											Learn more about persistent terminal sessions when using ssh:
+											<a href="{{ WIKI_PERSISTENT_TERMINAL_LINK }}" target="_blank" rel="noopener noreferrer"
+												>Tutorial</a
+											>
+										</p>
 									</div>
 								</div>
-							</div>
-							<div class="row" *ngIf="mode.name === 'SSH' || mode.name === 'ssh'">
-								<div class="col-auto">
-									<p class="font-weight-bold font-xs text-muted">
-										Learn more about persistent terminal sessions when using ssh:
-										<a href="{{ WIKI_PERSISTENT_TERMINAL_LINK }}" target="_blank" rel="noopener noreferrer">Tutorial</a>
-									</p>
+								<div
+									class="row"
+									*ngIf="
+										virtualMachine?.res_env_url !== '' &&
+										virtualMachine?.res_env_url !== null &&
+										virtualMachine?.res_env_url !== undefined &&
+										resenv_by_play(virtualMachine)
+									"
+								>
+									<div class="col-md-1">
+										<span class="font-weight-bold font-xs btn-block text-muted">Research Environment:</span>
+									</div>
+									<div class="col-md-11 font-weight-bold font-xs btn-block text-muted">
+										<a href="{{ virtualMachine?.res_env_url }}" rel="noopener noreferrer" target="_blank">{{
+											virtualMachine?.res_env_url
+										}}</a>
+										<br />
+										For RStudio credentials please visit:
+										<a href="{{ WIKI_RSTUDIO_LINK }}" rel="noopener noreferrer" target="_blank">{{
+											WIKI_RSTUDIO_LINK
+										}}</a>
+										<br />
+										For Apache Guacamole credentials please visit:
+										<a href="{{ WIKI_GUACAMOLE_LINK }}" rel="noopener noreferrer" target="_blank">{{
+											WIKI_GUACAMOLE_LINK
+										}}</a>
+									</div>
 								</div>
 							</div>
-							<div
-								class="row"
-								*ngIf="
-									virtualMachine?.res_env_url !== '' &&
-									virtualMachine?.res_env_url !== null &&
-									virtualMachine?.res_env_url !== undefined &&
-									resenv_by_play(virtualMachine)
-								"
-							>
-								<div class="col-md-1">
-									<span class="font-weight-bold font-xs btn-block text-muted">Research Environment:</span>
-								</div>
-								<div class="col-md-11 font-weight-bold font-xs btn-block text-muted">
-									<a href="{{ virtualMachine?.res_env_url }}" rel="noopener noreferrer" target="_blank">{{
-										virtualMachine?.res_env_url
-									}}</a>
-									<br />
-									For RStudio credentials please visit:
-									<a href="{{ WIKI_RSTUDIO_LINK }}" rel="noopener noreferrer" target="_blank">{{
-										WIKI_RSTUDIO_LINK
-									}}</a>
-									<br />
-									For Apache Guacamole credentials please visit:
-									<a href="{{ WIKI_GUACAMOLE_LINK }}" rel="noopener noreferrer" target="_blank">{{
-										WIKI_GUACAMOLE_LINK
-									}}</a>
+						</div>
+					</ng-container>
+					<ng-container *ngIf="virtualMachine?.status === virtualMachineStates.staticERROR">
+						<span class="text-muted font-weight-bold card-title" style="margin-left: 15px"> Connect Information</span>
+						<div class="row">
+							<div class="col-auto">
+								<div class="alert alert-info">
+									There currently is no connect information available, as the machine is in error-state.
 								</div>
 							</div>
 						</div>
-					</div>
+					</ng-container>
+
 					<hr *ngIf="virtualMachine?.elixir_id === user_elixir_id" />
 					<div class="card-body" *ngIf="virtualMachine?.elixir_id === user_elixir_id || is_project_admin">
 						<span class="text-muted font-weight-bold card-title" style="margin-left: 15px"> Actions</span>
@@ -156,8 +182,13 @@
 							<div
 								class="col-3"
 								*ngIf="
-									virtualMachine?.status === virtualMachineStates.staticACTIVE ||
-									virtualMachine?.status === virtualMachineStates.staticSHUTOFF
+									virtualMachine?.status
+										| statusInList
+											: [
+													virtualMachineStates.staticACTIVE,
+													virtualMachineStates.staticERROR,
+													virtualMachineStates.staticSHUTOFF
+											  ]
 								"
 							>
 								<button
@@ -173,8 +204,8 @@
 							<div
 								class="col-3"
 								*ngIf="
-									virtualMachine?.status === virtualMachineStates.staticACTIVE ||
-									virtualMachine?.status === virtualMachineStates.staticSHUTOFF
+									virtualMachine?.status
+										| statusInList : [virtualMachineStates.staticACTIVE, virtualMachineStates.staticSHUTOFF]
 								"
 							>
 								<button

From 7b0ef2907304ffa06d7d291969fa229c0b663094 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Thu, 20 Apr 2023 12:17:00 +0000
Subject: [PATCH 09/15] feat(Dependencies): Update all non-major dependencies

| datasource | package                          | from   | to     |
| ---------- | -------------------------------- | ------ | ------ |
| npm        | @typescript-eslint/eslint-plugin | 5.58.0 | 5.59.0 |
| npm        | @typescript-eslint/parser        | 5.58.0 | 5.59.0 |
| npm        | billboard.js                     | 3.7.5  | 3.8.0  |
---
 package-lock.json | 191 +++++++++++++++++++++++-----------------------
 package.json      |   4 +-
 2 files changed, 99 insertions(+), 96 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e3bbab6be8..c3b9f48405 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@denbi/cloud-portal-webapp",
-  "version": "4.681.0",
+  "version": "4.682.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@denbi/cloud-portal-webapp",
-      "version": "4.681.0",
+      "version": "4.682.0",
       "dependencies": {
         "@angular-eslint/eslint-plugin": "^15.2.0",
         "@angular/animations": "15.2.7",
@@ -32,7 +32,7 @@
         "acorn": "8.8.2",
         "ajv-formats": "2.1.1",
         "angulartics2": "12.2.0",
-        "billboard.js": "3.7.5",
+        "billboard.js": "3.8.0",
         "bootstrap": "4.6.2",
         "chart.js": "4.2.1",
         "cli-color": "2.0.3",
@@ -4133,8 +4133,9 @@
       "license": "MIT"
     },
     "node_modules/@types/d3-selection": {
-      "version": "3.0.4",
-      "license": "MIT"
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.5.tgz",
+      "integrity": "sha512-xCB0z3Hi8eFIqyja3vW8iV01+OHGYR2di/+e+AiOcXIOrY82lcvWW8Ke1DYE/EUVMsBl4Db9RppSBS3X1U6J0w=="
     },
     "node_modules/@types/d3-shape": {
       "version": "3.1.1",
@@ -4336,15 +4337,15 @@
       }
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "5.58.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.58.0.tgz",
-      "integrity": "sha512-vxHvLhH0qgBd3/tW6/VccptSfc8FxPQIkmNTVLWcCOVqSBvqpnKkBTYrhcGlXfSnd78azwe+PsjYFj0X34/njA==",
+      "version": "5.59.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.59.0.tgz",
+      "integrity": "sha512-p0QgrEyrxAWBecR56gyn3wkG15TJdI//eetInP3zYRewDh0XS+DhB3VUAd3QqvziFsfaQIoIuZMxZRB7vXYaYw==",
       "dev": true,
       "dependencies": {
         "@eslint-community/regexpp": "^4.4.0",
-        "@typescript-eslint/scope-manager": "5.58.0",
-        "@typescript-eslint/type-utils": "5.58.0",
-        "@typescript-eslint/utils": "5.58.0",
+        "@typescript-eslint/scope-manager": "5.59.0",
+        "@typescript-eslint/type-utils": "5.59.0",
+        "@typescript-eslint/utils": "5.59.0",
         "debug": "^4.3.4",
         "grapheme-splitter": "^1.0.4",
         "ignore": "^5.2.0",
@@ -4370,13 +4371,13 @@
       }
     },
     "node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/type-utils": {
-      "version": "5.58.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.58.0.tgz",
-      "integrity": "sha512-FF5vP/SKAFJ+LmR9PENql7fQVVgGDOS+dq3j+cKl9iW/9VuZC/8CFmzIP0DLKXfWKpRHawJiG70rVH+xZZbp8w==",
+      "version": "5.59.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.59.0.tgz",
+      "integrity": "sha512-d/B6VSWnZwu70kcKQSCqjcXpVH+7ABKH8P1KNn4K7j5PXXuycZTPXF44Nui0TEm6rbWGi8kc78xRgOC4n7xFgA==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "5.58.0",
-        "@typescript-eslint/utils": "5.58.0",
+        "@typescript-eslint/typescript-estree": "5.59.0",
+        "@typescript-eslint/utils": "5.59.0",
         "debug": "^4.3.4",
         "tsutils": "^3.21.0"
       },
@@ -4397,17 +4398,17 @@
       }
     },
     "node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/utils": {
-      "version": "5.58.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.58.0.tgz",
-      "integrity": "sha512-gAmLOTFXMXOC+zP1fsqm3VceKSBQJNzV385Ok3+yzlavNHZoedajjS4UyS21gabJYcobuigQPs/z71A9MdJFqQ==",
+      "version": "5.59.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.59.0.tgz",
+      "integrity": "sha512-GGLFd+86drlHSvPgN/el6dRQNYYGOvRSDVydsUaQluwIW3HvbXuxyuD5JETvBt/9qGYe+lOrDk6gRrWOHb/FvA==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@types/json-schema": "^7.0.9",
         "@types/semver": "^7.3.12",
-        "@typescript-eslint/scope-manager": "5.58.0",
-        "@typescript-eslint/types": "5.58.0",
-        "@typescript-eslint/typescript-estree": "5.58.0",
+        "@typescript-eslint/scope-manager": "5.59.0",
+        "@typescript-eslint/types": "5.59.0",
+        "@typescript-eslint/typescript-estree": "5.59.0",
         "eslint-scope": "^5.1.1",
         "semver": "^7.3.7"
       },
@@ -4445,14 +4446,14 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "5.58.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.58.0.tgz",
-      "integrity": "sha512-ixaM3gRtlfrKzP8N6lRhBbjTow1t6ztfBvQNGuRM8qH1bjFFXIJ35XY+FC0RRBKn3C6cT+7VW1y8tNm7DwPHDQ==",
+      "version": "5.59.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.59.0.tgz",
+      "integrity": "sha512-qK9TZ70eJtjojSUMrrEwA9ZDQ4N0e/AuoOIgXuNBorXYcBDk397D2r5MIe1B3cok/oCtdNC5j+lUUpVB+Dpb+w==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "5.58.0",
-        "@typescript-eslint/types": "5.58.0",
-        "@typescript-eslint/typescript-estree": "5.58.0",
+        "@typescript-eslint/scope-manager": "5.59.0",
+        "@typescript-eslint/types": "5.59.0",
+        "@typescript-eslint/typescript-estree": "5.59.0",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -4472,13 +4473,13 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "5.58.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.58.0.tgz",
-      "integrity": "sha512-b+w8ypN5CFvrXWQb9Ow9T4/6LC2MikNf1viLkYTiTbkQl46CnR69w7lajz1icW0TBsYmlpg+mRzFJ4LEJ8X9NA==",
+      "version": "5.59.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.59.0.tgz",
+      "integrity": "sha512-tsoldKaMh7izN6BvkK6zRMINj4Z2d6gGhO2UsI8zGZY3XhLq1DndP3Ycjhi1JwdwPRwtLMW4EFPgpuKhbCGOvQ==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.58.0",
-        "@typescript-eslint/visitor-keys": "5.58.0"
+        "@typescript-eslint/types": "5.59.0",
+        "@typescript-eslint/visitor-keys": "5.59.0"
       },
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -4597,9 +4598,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "5.58.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.58.0.tgz",
-      "integrity": "sha512-JYV4eITHPzVQMnHZcYJXl2ZloC7thuUHrcUmxtzvItyKPvQ50kb9QXBkgNAt90OYMqwaodQh2kHutWZl1fc+1g==",
+      "version": "5.59.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.59.0.tgz",
+      "integrity": "sha512-yR2h1NotF23xFFYKHZs17QJnB51J/s+ud4PYU4MqdZbzeNxpgUr05+dNeCN/bb6raslHvGdd6BFCkVhpPk/ZeA==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -4610,13 +4611,13 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "5.58.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.58.0.tgz",
-      "integrity": "sha512-cRACvGTodA+UxnYM2uwA2KCwRL7VAzo45syNysqlMyNyjw0Z35Icc9ihPJZjIYuA5bXJYiJ2YGUB59BqlOZT1Q==",
+      "version": "5.59.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.59.0.tgz",
+      "integrity": "sha512-sUNnktjmI8DyGzPdZ8dRwW741zopGxltGs/SAPgGL/AAgDpiLsCFLcMNSpbfXfmnNeHmK9h3wGmCkGRGAoUZAg==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.58.0",
-        "@typescript-eslint/visitor-keys": "5.58.0",
+        "@typescript-eslint/types": "5.59.0",
+        "@typescript-eslint/visitor-keys": "5.59.0",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
@@ -4799,12 +4800,12 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "5.58.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.58.0.tgz",
-      "integrity": "sha512-/fBraTlPj0jwdyTwLyrRTxv/3lnU2H96pNTVM6z3esTWLtA5MZ9ghSMJ7Rb+TtUAdtEw9EyJzJ0EydIMKxQ9gA==",
+      "version": "5.59.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.59.0.tgz",
+      "integrity": "sha512-qZ3iXxQhanchCeaExlKPV3gDQFxMUmU35xfd5eCXB6+kUw1TUAbIy2n7QIrwz9s98DQLzNWyHp61fY0da4ZcbA==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.58.0",
+        "@typescript-eslint/types": "5.59.0",
         "eslint-visitor-keys": "^3.3.0"
       },
       "engines": {
@@ -5689,11 +5690,11 @@
       }
     },
     "node_modules/billboard.js": {
-      "version": "3.7.5",
-      "resolved": "https://registry.npmjs.org/billboard.js/-/billboard.js-3.7.5.tgz",
-      "integrity": "sha512-GjA+dO0uLLCNSqmXrx9SUxYlULuydFZmGn2/hwQULBU/dQwARXSycjJ3VzmVyTvbdrHx0iqjffDhlqgI90a0Cg==",
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/billboard.js/-/billboard.js-3.8.0.tgz",
+      "integrity": "sha512-81jRPSBabKizOuugdkwzUgxclHpZzOIilzlK/IXxpgHC0iJTAETCyEVJfwaBEtjFl4lE2DFCvPZFwfNFIFv/eQ==",
       "dependencies": {
-        "@types/d3-selection": "^3.0.4",
+        "@types/d3-selection": "^3.0.5",
         "@types/d3-transition": "^3.0.3",
         "d3-axis": "^3.0.0",
         "d3-brush": "^3.0.0",
@@ -20790,7 +20791,9 @@
       "version": "3.0.0"
     },
     "@types/d3-selection": {
-      "version": "3.0.4"
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.5.tgz",
+      "integrity": "sha512-xCB0z3Hi8eFIqyja3vW8iV01+OHGYR2di/+e+AiOcXIOrY82lcvWW8Ke1DYE/EUVMsBl4Db9RppSBS3X1U6J0w=="
     },
     "@types/d3-shape": {
       "version": "3.1.1",
@@ -20973,15 +20976,15 @@
       }
     },
     "@typescript-eslint/eslint-plugin": {
-      "version": "5.58.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.58.0.tgz",
-      "integrity": "sha512-vxHvLhH0qgBd3/tW6/VccptSfc8FxPQIkmNTVLWcCOVqSBvqpnKkBTYrhcGlXfSnd78azwe+PsjYFj0X34/njA==",
+      "version": "5.59.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.59.0.tgz",
+      "integrity": "sha512-p0QgrEyrxAWBecR56gyn3wkG15TJdI//eetInP3zYRewDh0XS+DhB3VUAd3QqvziFsfaQIoIuZMxZRB7vXYaYw==",
       "dev": true,
       "requires": {
         "@eslint-community/regexpp": "^4.4.0",
-        "@typescript-eslint/scope-manager": "5.58.0",
-        "@typescript-eslint/type-utils": "5.58.0",
-        "@typescript-eslint/utils": "5.58.0",
+        "@typescript-eslint/scope-manager": "5.59.0",
+        "@typescript-eslint/type-utils": "5.59.0",
+        "@typescript-eslint/utils": "5.59.0",
         "debug": "^4.3.4",
         "grapheme-splitter": "^1.0.4",
         "ignore": "^5.2.0",
@@ -20991,29 +20994,29 @@
       },
       "dependencies": {
         "@typescript-eslint/type-utils": {
-          "version": "5.58.0",
-          "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.58.0.tgz",
-          "integrity": "sha512-FF5vP/SKAFJ+LmR9PENql7fQVVgGDOS+dq3j+cKl9iW/9VuZC/8CFmzIP0DLKXfWKpRHawJiG70rVH+xZZbp8w==",
+          "version": "5.59.0",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.59.0.tgz",
+          "integrity": "sha512-d/B6VSWnZwu70kcKQSCqjcXpVH+7ABKH8P1KNn4K7j5PXXuycZTPXF44Nui0TEm6rbWGi8kc78xRgOC4n7xFgA==",
           "dev": true,
           "requires": {
-            "@typescript-eslint/typescript-estree": "5.58.0",
-            "@typescript-eslint/utils": "5.58.0",
+            "@typescript-eslint/typescript-estree": "5.59.0",
+            "@typescript-eslint/utils": "5.59.0",
             "debug": "^4.3.4",
             "tsutils": "^3.21.0"
           }
         },
         "@typescript-eslint/utils": {
-          "version": "5.58.0",
-          "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.58.0.tgz",
-          "integrity": "sha512-gAmLOTFXMXOC+zP1fsqm3VceKSBQJNzV385Ok3+yzlavNHZoedajjS4UyS21gabJYcobuigQPs/z71A9MdJFqQ==",
+          "version": "5.59.0",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.59.0.tgz",
+          "integrity": "sha512-GGLFd+86drlHSvPgN/el6dRQNYYGOvRSDVydsUaQluwIW3HvbXuxyuD5JETvBt/9qGYe+lOrDk6gRrWOHb/FvA==",
           "dev": true,
           "requires": {
             "@eslint-community/eslint-utils": "^4.2.0",
             "@types/json-schema": "^7.0.9",
             "@types/semver": "^7.3.12",
-            "@typescript-eslint/scope-manager": "5.58.0",
-            "@typescript-eslint/types": "5.58.0",
-            "@typescript-eslint/typescript-estree": "5.58.0",
+            "@typescript-eslint/scope-manager": "5.59.0",
+            "@typescript-eslint/types": "5.59.0",
+            "@typescript-eslint/typescript-estree": "5.59.0",
             "eslint-scope": "^5.1.1",
             "semver": "^7.3.7"
           }
@@ -21037,25 +21040,25 @@
       }
     },
     "@typescript-eslint/parser": {
-      "version": "5.58.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.58.0.tgz",
-      "integrity": "sha512-ixaM3gRtlfrKzP8N6lRhBbjTow1t6ztfBvQNGuRM8qH1bjFFXIJ35XY+FC0RRBKn3C6cT+7VW1y8tNm7DwPHDQ==",
+      "version": "5.59.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.59.0.tgz",
+      "integrity": "sha512-qK9TZ70eJtjojSUMrrEwA9ZDQ4N0e/AuoOIgXuNBorXYcBDk397D2r5MIe1B3cok/oCtdNC5j+lUUpVB+Dpb+w==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/scope-manager": "5.58.0",
-        "@typescript-eslint/types": "5.58.0",
-        "@typescript-eslint/typescript-estree": "5.58.0",
+        "@typescript-eslint/scope-manager": "5.59.0",
+        "@typescript-eslint/types": "5.59.0",
+        "@typescript-eslint/typescript-estree": "5.59.0",
         "debug": "^4.3.4"
       }
     },
     "@typescript-eslint/scope-manager": {
-      "version": "5.58.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.58.0.tgz",
-      "integrity": "sha512-b+w8ypN5CFvrXWQb9Ow9T4/6LC2MikNf1viLkYTiTbkQl46CnR69w7lajz1icW0TBsYmlpg+mRzFJ4LEJ8X9NA==",
+      "version": "5.59.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.59.0.tgz",
+      "integrity": "sha512-tsoldKaMh7izN6BvkK6zRMINj4Z2d6gGhO2UsI8zGZY3XhLq1DndP3Ycjhi1JwdwPRwtLMW4EFPgpuKhbCGOvQ==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "5.58.0",
-        "@typescript-eslint/visitor-keys": "5.58.0"
+        "@typescript-eslint/types": "5.59.0",
+        "@typescript-eslint/visitor-keys": "5.59.0"
       }
     },
     "@typescript-eslint/type-utils": {
@@ -21114,19 +21117,19 @@
       }
     },
     "@typescript-eslint/types": {
-      "version": "5.58.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.58.0.tgz",
-      "integrity": "sha512-JYV4eITHPzVQMnHZcYJXl2ZloC7thuUHrcUmxtzvItyKPvQ50kb9QXBkgNAt90OYMqwaodQh2kHutWZl1fc+1g==",
+      "version": "5.59.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.59.0.tgz",
+      "integrity": "sha512-yR2h1NotF23xFFYKHZs17QJnB51J/s+ud4PYU4MqdZbzeNxpgUr05+dNeCN/bb6raslHvGdd6BFCkVhpPk/ZeA==",
       "dev": true
     },
     "@typescript-eslint/typescript-estree": {
-      "version": "5.58.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.58.0.tgz",
-      "integrity": "sha512-cRACvGTodA+UxnYM2uwA2KCwRL7VAzo45syNysqlMyNyjw0Z35Icc9ihPJZjIYuA5bXJYiJ2YGUB59BqlOZT1Q==",
+      "version": "5.59.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.59.0.tgz",
+      "integrity": "sha512-sUNnktjmI8DyGzPdZ8dRwW741zopGxltGs/SAPgGL/AAgDpiLsCFLcMNSpbfXfmnNeHmK9h3wGmCkGRGAoUZAg==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "5.58.0",
-        "@typescript-eslint/visitor-keys": "5.58.0",
+        "@typescript-eslint/types": "5.59.0",
+        "@typescript-eslint/visitor-keys": "5.59.0",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
@@ -21225,12 +21228,12 @@
       }
     },
     "@typescript-eslint/visitor-keys": {
-      "version": "5.58.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.58.0.tgz",
-      "integrity": "sha512-/fBraTlPj0jwdyTwLyrRTxv/3lnU2H96pNTVM6z3esTWLtA5MZ9ghSMJ7Rb+TtUAdtEw9EyJzJ0EydIMKxQ9gA==",
+      "version": "5.59.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.59.0.tgz",
+      "integrity": "sha512-qZ3iXxQhanchCeaExlKPV3gDQFxMUmU35xfd5eCXB6+kUw1TUAbIy2n7QIrwz9s98DQLzNWyHp61fY0da4ZcbA==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "5.58.0",
+        "@typescript-eslint/types": "5.59.0",
         "eslint-visitor-keys": "^3.3.0"
       }
     },
@@ -21780,11 +21783,11 @@
       "dev": true
     },
     "billboard.js": {
-      "version": "3.7.5",
-      "resolved": "https://registry.npmjs.org/billboard.js/-/billboard.js-3.7.5.tgz",
-      "integrity": "sha512-GjA+dO0uLLCNSqmXrx9SUxYlULuydFZmGn2/hwQULBU/dQwARXSycjJ3VzmVyTvbdrHx0iqjffDhlqgI90a0Cg==",
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/billboard.js/-/billboard.js-3.8.0.tgz",
+      "integrity": "sha512-81jRPSBabKizOuugdkwzUgxclHpZzOIilzlK/IXxpgHC0iJTAETCyEVJfwaBEtjFl4lE2DFCvPZFwfNFIFv/eQ==",
       "requires": {
-        "@types/d3-selection": "^3.0.4",
+        "@types/d3-selection": "^3.0.5",
         "@types/d3-transition": "^3.0.3",
         "d3-axis": "^3.0.0",
         "d3-brush": "^3.0.0",
diff --git a/package.json b/package.json
index 0761ff233f..63aa7bbe6c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@denbi/cloud-portal-webapp",
-  "version": "4.681.0",
+  "version": "4.682.0",
   "description": "de.NBI Cloud Portal",
   "scripts": {
     "ng": "ng serve",
@@ -42,7 +42,7 @@
     "acorn": "8.8.2",
     "ajv-formats": "2.1.1",
     "angulartics2": "12.2.0",
-    "billboard.js": "3.7.5",
+    "billboard.js": "3.8.0",
     "bootstrap": "4.6.2",
     "chart.js": "4.2.1",
     "cli-color": "2.0.3",

From b500e744c9a7acc8bbaebef3fb37672665586d66 Mon Sep 17 00:00:00 2001
From: Viktor Rudko <43116821+vktrrdk@users.noreply.github.com>
Date: Thu, 20 Apr 2023 16:18:55 +0200
Subject: [PATCH 10/15] fix(Applications): Distinguish buttons between OS and
 SVM approval on modification request (#5647)

Co-authored-by: dweinholz <david-weinholz@web.de>
---
 .../applications/applications.component.html  | 33 ++++++++++---------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/app/applications/applications.component.html b/src/app/applications/applications.component.html
index 1889b3f107..387a4b4587 100644
--- a/src/app/applications/applications.component.html
+++ b/src/app/applications/applications.component.html
@@ -387,42 +387,45 @@
 														<span class="d-none">Assign Proccessing VO</span>
 													</button>
 													<button
-														[id]="'modification_approval_' + application?.project_application_shortname"
+														[id]="'modification_adjustment_' + application?.project_application_shortname"
+														[attr.data-test-id]="
+															'modification_adjustment_' + application?.project_application_shortname
+														"
 														*ngIf="
 															(application | hasstatusinlist : Application_States.MODIFICATION_REQUESTED) &&
-															application?.project_application_openstack_project &&
 															application?.project_modification_request
 														"
 														style="margin: 2px"
-														[attr.data-test-id]="'modification_approval_' + application?.project_application_shortname"
-														(click)="showConfirmationModal(application, 'approveModification')"
 														type="button"
-														class="btn btn-success"
+														(click)="setApplicationToAdjust(application); showModificationAdjustmentModal()"
+														class="btn btn-primary"
 													>
-														<i class="fa fa-check"></i>&nbsp;
-														<span class="d-none">Approve Modification</span>
+														<i class="fa fa-pen"></i>&nbsp;
+														<span class="d-none"> Adjust Modification</span>
 													</button>
+
 													<button
-														[id]="'modification_adjustment_' + application?.project_application_shortname"
-														[attr.data-test-id]="
-															'modification_adjustment_' + application?.project_application_shortname
-														"
+														[id]="'modification_approval_' + application?.project_application_shortname"
 														*ngIf="
 															(application | hasstatusinlist : Application_States.MODIFICATION_REQUESTED) &&
+															application?.project_application_openstack_project &&
 															application?.project_modification_request
 														"
 														style="margin: 2px"
+														[attr.data-test-id]="'modification_approval_' + application?.project_application_shortname"
+														(click)="showConfirmationModal(application, 'approveModification')"
 														type="button"
-														(click)="setApplicationToAdjust(application); showModificationAdjustmentModal()"
-														class="btn btn-primary"
+														class="btn btn-success"
 													>
-														<i class="fa fa-pen"></i>&nbsp;
-														<span class="d-none"> Adjust Modification</span>
+														<i class="fa fa-check"></i>&nbsp;
+														<span class="d-none">Approve Modification</span>
 													</button>
+
 													<button
 														[id]="'modification_approval_' + application?.project_application_shortname"
 														*ngIf="
 															(application | hasstatusinlist : Application_States.MODIFICATION_REQUESTED) &&
+															!application?.project_application_openstack_project &&
 															application?.project_modification_request
 														"
 														style="margin: 2px"

From f4b196d89bb3ae57abfed7a95e930b8f031c91c5 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Sun, 23 Apr 2023 08:50:48 +0000
Subject: [PATCH 11/15] feat(Dependencies): Update all non-major dependencies

| datasource | package               | from     | to      |
| ---------- | --------------------- | -------- | ------- |
| npm        | @types/node           | 18.15.11 | 18.16.0 |
| npm        | eslint                | 8.38.0   | 8.39.0  |
| npm        | karma-chrome-launcher | 3.1.1    | 3.2.0   |
---
 package-lock.json | 79 +++++++++++++++++++++++++++--------------------
 package.json      |  6 ++--
 2 files changed, 48 insertions(+), 37 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c3b9f48405..719e6183d7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@denbi/cloud-portal-webapp",
-  "version": "4.682.0",
+  "version": "4.683.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@denbi/cloud-portal-webapp",
-      "version": "4.682.0",
+      "version": "4.683.0",
       "dependencies": {
         "@angular-eslint/eslint-plugin": "^15.2.0",
         "@angular/animations": "15.2.7",
@@ -40,7 +40,6 @@
         "css-loader": "6.7.3",
         "cssnano": "6.0.0",
         "d3": "7.8.4",
-        "eslint": "^8.28.0",
         "export-to-csv": "0.2.1",
         "express": "4.18.2",
         "file-saver": "2.0.5",
@@ -87,7 +86,7 @@
         "@compodoc/compodoc": "1.1.19",
         "@playwright/test": "1.32.3",
         "@types/jasmine": "4.3.1",
-        "@types/node": "18.15.11",
+        "@types/node": "18.16.0",
         "@typescript-eslint/eslint-plugin": "^5.43.0",
         "@typescript-eslint/parser": "^5.43.0",
         "async": "3.2.4",
@@ -105,7 +104,7 @@
         "husky": "8.0.3",
         "json-loader": "0.5.7",
         "karma": "6.4.1",
-        "karma-chrome-launcher": "3.1.1",
+        "karma-chrome-launcher": "3.2.0",
         "less-loader": "11.1.0",
         "lint-staged": "13.2.1",
         "ngx-spec": "2.1.5",
@@ -3385,9 +3384,9 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "8.38.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.38.0.tgz",
-      "integrity": "sha512-IoD2MfUnOV58ghIHCiil01PcohxjbYR/qCxsoC+xNgUwh1EY8jOOrYmu3d3a71+tJJ23uscEV4X2HJWMsPJu4g==",
+      "version": "8.39.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.39.0.tgz",
+      "integrity": "sha512-kf9RB0Fg7NZfap83B3QOqOGg9QmD9yBudqQXzzOtn3i4y7ZUXe5ONeW34Gwi+TxhH4mvj72R1Zc300KUMa9Bng==",
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
@@ -4260,9 +4259,9 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "18.15.11",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.11.tgz",
-      "integrity": "sha512-E5Kwq2n4SbMzQOn6wnmBjuK9ouqlURrcZDVfbo9ftDDTFt3nk7ZKK4GMOzoYgnpQJKcxwQw+lGaBvvlMo0qN/Q=="
+      "version": "18.16.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.16.0.tgz",
+      "integrity": "sha512-BsAaKhB+7X+H4GnSjGhJG9Qi8Tw+inU9nJDwmD5CgOmBLEI6ArdhikpLX7DjbjDRDTbqZzU2LSQNZg8WGPiSZQ=="
     },
     "node_modules/@types/parse-json": {
       "version": "4.0.0",
@@ -8330,14 +8329,14 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.38.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.38.0.tgz",
-      "integrity": "sha512-pIdsD2jwlUGf/U38Jv97t8lq6HpaU/G9NKbYmpWpZGw3LdTNhZLbJePqxOXGB5+JEKfOPU/XLxYxFh03nr1KTg==",
+      "version": "8.39.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.39.0.tgz",
+      "integrity": "sha512-mwiok6cy7KTW7rBpo05k6+p4YVZByLNjAZ/ACB9DRCu4YDRwjXI01tWHp6KAUWelsBetTxKK/2sHB0vdS8Z2Og==",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.4.0",
         "@eslint/eslintrc": "^2.0.2",
-        "@eslint/js": "8.38.0",
+        "@eslint/js": "8.39.0",
         "@humanwhocodes/config-array": "^0.11.8",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
@@ -8347,7 +8346,7 @@
         "debug": "^4.3.2",
         "doctrine": "^3.0.0",
         "escape-string-regexp": "^4.0.0",
-        "eslint-scope": "^7.1.1",
+        "eslint-scope": "^7.2.0",
         "eslint-visitor-keys": "^3.4.0",
         "espree": "^9.5.1",
         "esquery": "^1.4.2",
@@ -8563,14 +8562,18 @@
       }
     },
     "node_modules/eslint-scope": {
-      "version": "7.1.1",
-      "license": "BSD-2-Clause",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.0.tgz",
+      "integrity": "sha512-DYj5deGlHBfMt15J7rdtyKNq/Nqlv5KfU4iodrQ019XESsRnwXH9KAE0y3cwtUHDo2ob7CypAnCqefh6vioWRw==",
       "dependencies": {
         "esrecurse": "^4.3.0",
         "estraverse": "^5.2.0"
       },
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
       }
     },
     "node_modules/eslint-utils": {
@@ -11236,17 +11239,19 @@
       }
     },
     "node_modules/karma-chrome-launcher": {
-      "version": "3.1.1",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/karma-chrome-launcher/-/karma-chrome-launcher-3.2.0.tgz",
+      "integrity": "sha512-rE9RkUPI7I9mAxByQWkGJFXfFD6lE4gC5nPuZdobf/QdTEJI6EU4yIay/cfU/xV4ZxlM5JiTv7zWYgA64NpS5Q==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "which": "^1.2.1"
       }
     },
     "node_modules/karma-chrome-launcher/node_modules/which": {
       "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
       "dev": true,
-      "license": "ISC",
       "dependencies": {
         "isexe": "^2.0.0"
       },
@@ -20260,9 +20265,9 @@
       }
     },
     "@eslint/js": {
-      "version": "8.38.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.38.0.tgz",
-      "integrity": "sha512-IoD2MfUnOV58ghIHCiil01PcohxjbYR/qCxsoC+xNgUwh1EY8jOOrYmu3d3a71+tJJ23uscEV4X2HJWMsPJu4g=="
+      "version": "8.39.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.39.0.tgz",
+      "integrity": "sha512-kf9RB0Fg7NZfap83B3QOqOGg9QmD9yBudqQXzzOtn3i4y7ZUXe5ONeW34Gwi+TxhH4mvj72R1Zc300KUMa9Bng=="
     },
     "@foliojs-fork/fontkit": {
       "version": "1.9.1",
@@ -20903,9 +20908,9 @@
       "dev": true
     },
     "@types/node": {
-      "version": "18.15.11",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.11.tgz",
-      "integrity": "sha512-E5Kwq2n4SbMzQOn6wnmBjuK9ouqlURrcZDVfbo9ftDDTFt3nk7ZKK4GMOzoYgnpQJKcxwQw+lGaBvvlMo0qN/Q=="
+      "version": "18.16.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.16.0.tgz",
+      "integrity": "sha512-BsAaKhB+7X+H4GnSjGhJG9Qi8Tw+inU9nJDwmD5CgOmBLEI6ArdhikpLX7DjbjDRDTbqZzU2LSQNZg8WGPiSZQ=="
     },
     "@types/parse-json": {
       "version": "4.0.0"
@@ -23545,14 +23550,14 @@
       }
     },
     "eslint": {
-      "version": "8.38.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.38.0.tgz",
-      "integrity": "sha512-pIdsD2jwlUGf/U38Jv97t8lq6HpaU/G9NKbYmpWpZGw3LdTNhZLbJePqxOXGB5+JEKfOPU/XLxYxFh03nr1KTg==",
+      "version": "8.39.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.39.0.tgz",
+      "integrity": "sha512-mwiok6cy7KTW7rBpo05k6+p4YVZByLNjAZ/ACB9DRCu4YDRwjXI01tWHp6KAUWelsBetTxKK/2sHB0vdS8Z2Og==",
       "requires": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.4.0",
         "@eslint/eslintrc": "^2.0.2",
-        "@eslint/js": "8.38.0",
+        "@eslint/js": "8.39.0",
         "@humanwhocodes/config-array": "^0.11.8",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
@@ -23562,7 +23567,7 @@
         "debug": "^4.3.2",
         "doctrine": "^3.0.0",
         "escape-string-regexp": "^4.0.0",
-        "eslint-scope": "^7.1.1",
+        "eslint-scope": "^7.2.0",
         "eslint-visitor-keys": "^3.4.0",
         "espree": "^9.5.1",
         "esquery": "^1.4.2",
@@ -23852,7 +23857,9 @@
       "requires": {}
     },
     "eslint-scope": {
-      "version": "7.1.1",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.0.tgz",
+      "integrity": "sha512-DYj5deGlHBfMt15J7rdtyKNq/Nqlv5KfU4iodrQ019XESsRnwXH9KAE0y3cwtUHDo2ob7CypAnCqefh6vioWRw==",
       "requires": {
         "esrecurse": "^4.3.0",
         "estraverse": "^5.2.0"
@@ -25427,7 +25434,9 @@
       }
     },
     "karma-chrome-launcher": {
-      "version": "3.1.1",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/karma-chrome-launcher/-/karma-chrome-launcher-3.2.0.tgz",
+      "integrity": "sha512-rE9RkUPI7I9mAxByQWkGJFXfFD6lE4gC5nPuZdobf/QdTEJI6EU4yIay/cfU/xV4ZxlM5JiTv7zWYgA64NpS5Q==",
       "dev": true,
       "requires": {
         "which": "^1.2.1"
@@ -25435,6 +25444,8 @@
       "dependencies": {
         "which": {
           "version": "1.3.1",
+          "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+          "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
           "dev": true,
           "requires": {
             "isexe": "^2.0.0"
diff --git a/package.json b/package.json
index 63aa7bbe6c..0d3981ddfd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@denbi/cloud-portal-webapp",
-  "version": "4.682.0",
+  "version": "4.683.0",
   "description": "de.NBI Cloud Portal",
   "scripts": {
     "ng": "ng serve",
@@ -97,7 +97,7 @@
     "@compodoc/compodoc": "1.1.19",
     "@playwright/test": "1.32.3",
     "@types/jasmine": "4.3.1",
-    "@types/node": "18.15.11",
+    "@types/node": "18.16.0",
     "@typescript-eslint/eslint-plugin": "^5.43.0",
     "@typescript-eslint/parser": "^5.43.0",
     "async": "3.2.4",
@@ -115,7 +115,7 @@
     "husky": "8.0.3",
     "json-loader": "0.5.7",
     "karma": "6.4.1",
-    "karma-chrome-launcher": "3.1.1",
+    "karma-chrome-launcher": "3.2.0",
     "less-loader": "11.1.0",
     "lint-staged": "13.2.1",
     "ngx-spec": "2.1.5",

From 77a711f4fd9742493bc65f1e26b14fe1b744f061 Mon Sep 17 00:00:00 2001
From: dweinholz <david-weinholz@web.de>
Date: Tue, 25 Apr 2023 16:03:13 +0200
Subject: [PATCH 12/15] fixed badge

---
 .../facility.application.component.html       | 46 ++-----------------
 1 file changed, 5 insertions(+), 41 deletions(-)

diff --git a/src/app/facility_manager/facility.application.component.html b/src/app/facility_manager/facility.application.component.html
index 27a1d266bb..3963b52da0 100644
--- a/src/app/facility_manager/facility.application.component.html
+++ b/src/app/facility_manager/facility.application.component.html
@@ -125,43 +125,7 @@
 									<ng-container>
 										<tr>
 											<td>
-												<span
-													*ngIf="application?.project_application_openstack_project"
-													style="font-size: 20px"
-													class="project-openstack_plain_white_redbg"
-													data-toggle="tooltip"
-													title="This is an Openstack project"
-												>
-													<span class="path1"></span>
-													<span class="path2"></span>
-												</span>
-
-												<span
-													*ngIf="application?.project_application_pi_approved"
-													style="margin: 2px"
-													class="badge"
-													data-toggle="tooltip"
-													data-placement="auto"
-													title="This application was approved by a PI"
-												>
-													<span class="icon icon-yes_pi" style="font-size: 20px">
-														<span class="path1"></span><span class="path2"></span><span class="path3"></span
-														><span class="path4"></span>
-													</span>
-												</span>
-												<span
-													*ngIf="!application?.project_application_pi_approved"
-													style="margin: 2px"
-													class="badge"
-													data-toggle="tooltip"
-													data-placement="auto"
-													title="This application is yet not approved by a PI"
-												>
-													<span class="icon icon-no_pi" style="font-size: 2em">
-														<span class="path1"></span><span class="path2"></span><span class="path3"></span
-														><span class="path4"></span>
-													</span>
-												</span>
+												<app-application-badges [application]="application"></app-application-badges>
 											</td>
 											<td>{{ application?.project_application_name }}</td>
 											<td>{{ application?.project_application_shortname }}</td>
@@ -986,10 +950,10 @@
 											Information
 										</button>
 										<!--button (click)="deleteModal.show();setDeleteId(application?.application_status_id)"
-													type="button"
-													class="btn btn-secondary">
-											Remove Application
-									</button-->
+                                                type="button"
+                                                class="btn btn-secondary">
+                                        Remove Application
+                                </button-->
 									</td>
 								</tr>
 								<td colspan="12">

From cf68168788d1960b09db4a02c903dd334d5384ea Mon Sep 17 00:00:00 2001
From: dweinholz <david-weinholz@web.de>
Date: Tue, 25 Apr 2023 16:17:19 +0200
Subject: [PATCH 13/15] fixed label

---
 .../information-detail/information-detail.component.html      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/applications/application-detail/information-detail/information-detail.component.html b/src/app/applications/application-detail/information-detail/information-detail.component.html
index 980f5b9cbe..32b3f7d522 100644
--- a/src/app/applications/application-detail/information-detail/information-detail.component.html
+++ b/src/app/applications/application-detail/information-detail/information-detail.component.html
@@ -96,7 +96,7 @@ <h5>
 		</td>
 	</tr>
 	<tr>
-		<td>Person Related Data</td>
+		<td>Project processes data of human subjects</td>
 		<td>
 			<p *ngIf="application?.project_application_person_related_data">Yes</p>
 			<p *ngIf="!application?.project_application_person_related_data">No</p>
@@ -117,7 +117,7 @@ <h5>
 		</td>
 	</tr>
 	<tr *ngIf="application?.project_application_person_related_data">
-		<td>Sensitive Personal data [Articles 4 (13,14,15), 9 GDPR and Recital 51] </td>
+		<td>Sensitive Personal data [Articles 4 (13,14,15), 9 GDPR and Recital 51]</td>
 		<td>
 			<p *ngIf="application?.project_application_sensitive_data">Yes</p>
 			<p *ngIf="!application?.project_application_sensitive_data">No</p>

From fa71ff5d53983c22f28a144a20ba5e7517a21ca9 Mon Sep 17 00:00:00 2001
From: dweinholz <david-weinholz@web.de>
Date: Tue, 25 Apr 2023 16:19:07 +0200
Subject: [PATCH 14/15] fixed label

---
 .../information-detail/information-detail.component.html    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/applications/application-detail/information-detail/information-detail.component.html b/src/app/applications/application-detail/information-detail/information-detail.component.html
index 32b3f7d522..4e76c095e6 100644
--- a/src/app/applications/application-detail/information-detail/information-detail.component.html
+++ b/src/app/applications/application-detail/information-detail/information-detail.component.html
@@ -103,21 +103,21 @@ <h5>
 		</td>
 	</tr>
 	<tr *ngIf="application?.project_application_person_related_data">
-		<td>No Personal Data (Anonymous)</td>
+		<td>a) No Personal Data (Anonymous)</td>
 		<td>
 			<p *ngIf="application?.project_application_no_personal_data">Yes</p>
 			<p *ngIf="!application?.project_application_no_personal_data">No</p>
 		</td>
 	</tr>
 	<tr *ngIf="application?.project_application_person_related_data">
-		<td>Personal data [Article 4 (1) GDPR] (e.g. name, e-mail)</td>
+		<td>b) Personal data [Article 4 (1) GDPR] (e.g. name, e-mail)</td>
 		<td>
 			<p *ngIf="application?.project_application_nonsensitive_data">Yes</p>
 			<p *ngIf="!application?.project_application_nonsensitive_data">No</p>
 		</td>
 	</tr>
 	<tr *ngIf="application?.project_application_person_related_data">
-		<td>Sensitive Personal data [Articles 4 (13,14,15), 9 GDPR and Recital 51]</td>
+		<td>c) Sensitive Personal data [Articles 4 (13,14,15), 9 GDPR and Recital 51]</td>
 		<td>
 			<p *ngIf="application?.project_application_sensitive_data">Yes</p>
 			<p *ngIf="!application?.project_application_sensitive_data">No</p>

From 0d54a519199776e265c084cb06ea5dca25c51600 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Wed, 26 Apr 2023 10:52:03 +0000
Subject: [PATCH 15/15] feat(Dependencies): Update all non-major dependencies

| datasource | package                           | from    | to      |
| ---------- | --------------------------------- | ------- | ------- |
| npm        | @angular/animations               | 15.2.7  | 15.2.8  |
| npm        | @angular/cdk                      | 15.2.7  | 15.2.8  |
| npm        | @angular/common                   | 15.2.7  | 15.2.8  |
| npm        | @angular/compiler                 | 15.2.7  | 15.2.8  |
| npm        | @angular/compiler-cli             | 15.2.7  | 15.2.8  |
| npm        | @angular/core                     | 15.2.7  | 15.2.8  |
| npm        | @angular/forms                    | 15.2.7  | 15.2.8  |
| npm        | @angular/localize                 | 15.2.7  | 15.2.8  |
| npm        | @angular/platform-browser         | 15.2.7  | 15.2.8  |
| npm        | @angular/platform-browser-dynamic | 15.2.7  | 15.2.8  |
| npm        | @angular/router                   | 15.2.7  | 15.2.8  |
| npm        | @angular/service-worker           | 15.2.7  | 15.2.8  |
| npm        | @angular/upgrade                  | 15.2.7  | 15.2.8  |
| npm        | @types/node                       | 18.16.0 | 18.16.1 |
| npm        | @typescript-eslint/eslint-plugin  | 5.59.0  | 5.59.1  |
| npm        | @typescript-eslint/parser         | 5.59.0  | 5.59.1  |
| npm        | html-to-pdfmake                   | 2.4.16  | 2.4.20  |
| npm        | karma                             | 6.4.1   | 6.4.2   |
| npm        | prettier                          | 2.8.7   | 2.8.8   |
| npm        | slash                             | 5.0.0   | 5.0.1   |
| npm        | webpack-cli                       | 5.0.1   | 5.0.2   |
---
 package-lock.json | 531 +++++++++++++++++++++++++---------------------
 package.json      |  38 ++--
 2 files changed, 310 insertions(+), 259 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 719e6183d7..afee481935 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,26 +1,26 @@
 {
   "name": "@denbi/cloud-portal-webapp",
-  "version": "4.683.0",
+  "version": "4.684.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@denbi/cloud-portal-webapp",
-      "version": "4.683.0",
+      "version": "4.684.0",
       "dependencies": {
         "@angular-eslint/eslint-plugin": "^15.2.0",
-        "@angular/animations": "15.2.7",
-        "@angular/cdk": "15.2.7",
-        "@angular/common": "15.2.7",
-        "@angular/compiler": "15.2.7",
-        "@angular/core": "15.2.7",
-        "@angular/forms": "15.2.7",
-        "@angular/localize": "15.2.7",
-        "@angular/platform-browser": "15.2.7",
-        "@angular/platform-browser-dynamic": "15.2.7",
-        "@angular/router": "15.2.7",
-        "@angular/service-worker": "15.2.7",
-        "@angular/upgrade": "15.2.7",
+        "@angular/animations": "15.2.8",
+        "@angular/cdk": "15.2.8",
+        "@angular/common": "15.2.8",
+        "@angular/compiler": "15.2.8",
+        "@angular/core": "15.2.8",
+        "@angular/forms": "15.2.8",
+        "@angular/localize": "15.2.8",
+        "@angular/platform-browser": "15.2.8",
+        "@angular/platform-browser-dynamic": "15.2.8",
+        "@angular/router": "15.2.8",
+        "@angular/service-worker": "15.2.8",
+        "@angular/upgrade": "15.2.8",
         "@coreui/angular": "^4.3.4",
         "@coreui/coreui": "4.2.6",
         "@coreui/icons-angular": "^4.3.0",
@@ -40,12 +40,13 @@
         "css-loader": "6.7.3",
         "cssnano": "6.0.0",
         "d3": "7.8.4",
+        "eslint": "^8.28.0",
         "export-to-csv": "0.2.1",
         "express": "4.18.2",
         "file-saver": "2.0.5",
         "follow-redirects": "1.15.2",
         "globby": "13.1.4",
-        "html-to-pdfmake": "2.4.16",
+        "html-to-pdfmake": "2.4.20",
         "html2canvas": "1.4.1",
         "http-server": "14.1.1",
         "is-promise": "4.0.0",
@@ -82,11 +83,11 @@
         "@angular-eslint/schematics": "15.2.1",
         "@angular-eslint/template-parser": "15.2.1",
         "@angular/cli": "15.2.6",
-        "@angular/compiler-cli": "15.2.7",
+        "@angular/compiler-cli": "15.2.8",
         "@compodoc/compodoc": "1.1.19",
         "@playwright/test": "1.32.3",
         "@types/jasmine": "4.3.1",
-        "@types/node": "18.16.0",
+        "@types/node": "18.16.1",
         "@typescript-eslint/eslint-plugin": "^5.43.0",
         "@typescript-eslint/parser": "^5.43.0",
         "async": "3.2.4",
@@ -103,13 +104,13 @@
         "html-webpack-plugin": "5.5.1",
         "husky": "8.0.3",
         "json-loader": "0.5.7",
-        "karma": "6.4.1",
+        "karma": "6.4.2",
         "karma-chrome-launcher": "3.2.0",
         "less-loader": "11.1.0",
         "lint-staged": "13.2.1",
         "ngx-spec": "2.1.5",
         "npm-run-all": "4.1.5",
-        "prettier": "2.8.7",
+        "prettier": "2.8.8",
         "raw-loader": "4.0.2",
         "sass-loader": "13.2.2",
         "script-loader": "0.7.2",
@@ -119,7 +120,7 @@
         "ts-node": "10.9.1",
         "typescript": "4.9.5",
         "url-loader": "4.1.1",
-        "webpack-cli": "5.0.1"
+        "webpack-cli": "5.0.2"
       }
     },
     "node_modules/@adobe/css-tools": {
@@ -639,9 +640,9 @@
       }
     },
     "node_modules/@angular/animations": {
-      "version": "15.2.7",
-      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-15.2.7.tgz",
-      "integrity": "sha512-Vmy0AljHc/GOp87O2x0mxUDiyfJFW8ndDE9Xrm/g0rnLnNWsaLtLXr1TWbwF7eTqKA3k/QcUvYAjLMWKvjyKgQ==",
+      "version": "15.2.8",
+      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-15.2.8.tgz",
+      "integrity": "sha512-I3xh8EASQ04s3qXQYpIORI0jFiFmvBQERBqS70TieTCIML7banOf9R3K7sAWB9frG5J0CEUwr+wtF47DCs/7eQ==",
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -649,13 +650,13 @@
         "node": "^14.20.0 || ^16.13.0 || >=18.10.0"
       },
       "peerDependencies": {
-        "@angular/core": "15.2.7"
+        "@angular/core": "15.2.8"
       }
     },
     "node_modules/@angular/cdk": {
-      "version": "15.2.7",
-      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-15.2.7.tgz",
-      "integrity": "sha512-IQg/EuZ3LC/vOHZtcLvkM+FSACXW5PVv2NddJgsBOtfcf1HcTk97VhegtB4WGQTUe1pcxiLGz/aWYuIRknjitw==",
+      "version": "15.2.8",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-15.2.8.tgz",
+      "integrity": "sha512-jiCoxfBFMH29IZIiPmVUzIWetfUNpMIvC20xYVF8RMM819vPogoObzwK4DN/sXcp/6oVbBzZFaYdijhhIt9soQ==",
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -720,9 +721,9 @@
       }
     },
     "node_modules/@angular/common": {
-      "version": "15.2.7",
-      "resolved": "https://registry.npmjs.org/@angular/common/-/common-15.2.7.tgz",
-      "integrity": "sha512-CbmrQeZ0yChQrF/ab3v+gv6x2uLbv/s1wZNUBSO/p1STz6BZzHRJqObVlfPlQvyBx5btBBy/+I1sUh1yumARDA==",
+      "version": "15.2.8",
+      "resolved": "https://registry.npmjs.org/@angular/common/-/common-15.2.8.tgz",
+      "integrity": "sha512-yLDQihiRcVl38HrWMPbqgzOaSUw85AQH5BsGdjbS6BpoBQj3EXOpccCMFsuxOKxPG4toatgawNqrEnK0Jpv9Mw==",
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -730,14 +731,14 @@
         "node": "^14.20.0 || ^16.13.0 || >=18.10.0"
       },
       "peerDependencies": {
-        "@angular/core": "15.2.7",
+        "@angular/core": "15.2.8",
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
     "node_modules/@angular/compiler": {
-      "version": "15.2.7",
-      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-15.2.7.tgz",
-      "integrity": "sha512-SesyYI2ExUa13XukXgIsmfg3ar90HbWeWDJTgmzsIfph0M9t6+SaPGpf3FCtdBgNADIpUFp3cieCOJgLESzxYQ==",
+      "version": "15.2.8",
+      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-15.2.8.tgz",
+      "integrity": "sha512-+dvspIDvuGoYqdL7r/3o9ojkR3fH1zevgC0ISJivcIrMi+WcJ0FV2JmJdnm8V52oNsHy+sMF9eEZGEbCbACE/A==",
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -745,7 +746,7 @@
         "node": "^14.20.0 || ^16.13.0 || >=18.10.0"
       },
       "peerDependencies": {
-        "@angular/core": "15.2.7"
+        "@angular/core": "15.2.8"
       },
       "peerDependenciesMeta": {
         "@angular/core": {
@@ -754,9 +755,9 @@
       }
     },
     "node_modules/@angular/compiler-cli": {
-      "version": "15.2.7",
-      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-15.2.7.tgz",
-      "integrity": "sha512-4v51dOaT8GDUzRh6+mCLZOaYuU9FYX6vOHaLod9np3tVWPhcpoF2ZklRSiQDeFqrhr5B4vuCp/Lh9N2wzc22XQ==",
+      "version": "15.2.8",
+      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-15.2.8.tgz",
+      "integrity": "sha512-fFxaDlbILo0t2t662qA0cjgn+kWItGlc1tFYKU6X7bvYb3t2e0cd9FzrFPLXUQVboGis83ULcJ2zkDxScnuPuQ==",
       "dependencies": {
         "@babel/core": "7.19.3",
         "@jridgewell/sourcemap-codec": "^1.4.14",
@@ -778,7 +779,7 @@
         "node": "^14.20.0 || ^16.13.0 || >=18.10.0"
       },
       "peerDependencies": {
-        "@angular/compiler": "15.2.7",
+        "@angular/compiler": "15.2.8",
         "typescript": ">=4.8.2 <5.0"
       }
     },
@@ -820,9 +821,9 @@
       }
     },
     "node_modules/@angular/core": {
-      "version": "15.2.7",
-      "resolved": "https://registry.npmjs.org/@angular/core/-/core-15.2.7.tgz",
-      "integrity": "sha512-iS7JCJubRFqdndoUdAnvNkQRT3tY5tNFupBQS/sytkwxVrdBg+Is5jpdgk741n824vTMsE+CnuY0SETar8rN6g==",
+      "version": "15.2.8",
+      "resolved": "https://registry.npmjs.org/@angular/core/-/core-15.2.8.tgz",
+      "integrity": "sha512-NDs+g4uM4EhyCvluf8a0YBCFXsDAEfCMHOD5cS00Bl+liTQ7JwtmepkWXMyjLB92irC9JaR79kdy4BoIKOh8WA==",
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -835,9 +836,9 @@
       }
     },
     "node_modules/@angular/forms": {
-      "version": "15.2.7",
-      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-15.2.7.tgz",
-      "integrity": "sha512-rzrebDIrtxxOeMcBzRBxqaOBZ+T1DJrysG/6YWZy428W/Z3MfPxUarPxgfx/oZI+x5uUsDaZmyoRdhVPJ2KhZg==",
+      "version": "15.2.8",
+      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-15.2.8.tgz",
+      "integrity": "sha512-VyevVj20DdQWjAQUyiFTe+DAzqG9GqfAOWn376Y/lhPcwxAojXePTGNgtQud566/urDrNrP5haaLD6O36/3n+w==",
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -845,16 +846,16 @@
         "node": "^14.20.0 || ^16.13.0 || >=18.10.0"
       },
       "peerDependencies": {
-        "@angular/common": "15.2.7",
-        "@angular/core": "15.2.7",
-        "@angular/platform-browser": "15.2.7",
+        "@angular/common": "15.2.8",
+        "@angular/core": "15.2.8",
+        "@angular/platform-browser": "15.2.8",
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
     "node_modules/@angular/localize": {
-      "version": "15.2.7",
-      "resolved": "https://registry.npmjs.org/@angular/localize/-/localize-15.2.7.tgz",
-      "integrity": "sha512-ySuy35QKApWH9sW3PfnAAnZjLl3NT+SacvlEWigrTeCqfBEuDPUG57ugvc1/Lzuo09UOh3HQkrQBbdWAILd8JA==",
+      "version": "15.2.8",
+      "resolved": "https://registry.npmjs.org/@angular/localize/-/localize-15.2.8.tgz",
+      "integrity": "sha512-wJLBp0MUnET9kHzBtqIlZ3RQ56JFItXSgmBXagQq+MU+uJZmGvuw6fez0i5wkgv9Rgnr25oCULVtpTF+T5RGYA==",
       "dependencies": {
         "@babel/core": "7.19.3",
         "glob": "8.1.0",
@@ -869,8 +870,8 @@
         "node": "^14.20.0 || ^16.13.0 || >=18.10.0"
       },
       "peerDependencies": {
-        "@angular/compiler": "15.2.7",
-        "@angular/compiler-cli": "15.2.7"
+        "@angular/compiler": "15.2.8",
+        "@angular/compiler-cli": "15.2.8"
       }
     },
     "node_modules/@angular/localize/node_modules/@babel/core": {
@@ -911,9 +912,9 @@
       }
     },
     "node_modules/@angular/platform-browser": {
-      "version": "15.2.7",
-      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-15.2.7.tgz",
-      "integrity": "sha512-aCbd7xyuP7c2eDITkOTDO2mqP550WHCBN8U6VnjysqtB5ocbJtR6z/MIRItN/Zx+xj3piiaKei//XIkb3Q5fXQ==",
+      "version": "15.2.8",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-15.2.8.tgz",
+      "integrity": "sha512-8sKFUld54inj0FnQ1ydhFxnDgsbbf43W9FALye/5uEtLgwwE/ZvkNYMaQ7hq1JPuQRMDj3gJkFqaLeFjplpHDA==",
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -921,9 +922,9 @@
         "node": "^14.20.0 || ^16.13.0 || >=18.10.0"
       },
       "peerDependencies": {
-        "@angular/animations": "15.2.7",
-        "@angular/common": "15.2.7",
-        "@angular/core": "15.2.7"
+        "@angular/animations": "15.2.8",
+        "@angular/common": "15.2.8",
+        "@angular/core": "15.2.8"
       },
       "peerDependenciesMeta": {
         "@angular/animations": {
@@ -932,9 +933,9 @@
       }
     },
     "node_modules/@angular/platform-browser-dynamic": {
-      "version": "15.2.7",
-      "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-15.2.7.tgz",
-      "integrity": "sha512-t1Nf7hgbcYvhmxuzgUtsV47jrI5CXUBqrtz5I0ilWG92zZTig5qvfd1/2Ub8NHz87uHNrnggyZpL2+4MJ26nyQ==",
+      "version": "15.2.8",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-15.2.8.tgz",
+      "integrity": "sha512-75HyoZNibA3u/FvdK4Aw5KMzUmS/nDk5N8s7gfM09fe1resSPgFiW8JJEkr1xiUdA2WtSRbHs34y5rHLDe7n1Q==",
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -942,16 +943,16 @@
         "node": "^14.20.0 || ^16.13.0 || >=18.10.0"
       },
       "peerDependencies": {
-        "@angular/common": "15.2.7",
-        "@angular/compiler": "15.2.7",
-        "@angular/core": "15.2.7",
-        "@angular/platform-browser": "15.2.7"
+        "@angular/common": "15.2.8",
+        "@angular/compiler": "15.2.8",
+        "@angular/core": "15.2.8",
+        "@angular/platform-browser": "15.2.8"
       }
     },
     "node_modules/@angular/router": {
-      "version": "15.2.7",
-      "resolved": "https://registry.npmjs.org/@angular/router/-/router-15.2.7.tgz",
-      "integrity": "sha512-Wkk+oJSUrVafJjmv9uE1SoY4wDE9bjX7ald+UXePz+QyM/PFoLkm/CzLYjFBkJnsOkOVxw1VmvacoUjWN6BCTQ==",
+      "version": "15.2.8",
+      "resolved": "https://registry.npmjs.org/@angular/router/-/router-15.2.8.tgz",
+      "integrity": "sha512-C62QBEeJSBTNTrQHZiklPrxwJwuENoZzWX22MMJ7dxl+7VjRgnmj8J7mcX9fLjHlL+mC3RvesMlX7sGZRQV1cg==",
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -959,16 +960,16 @@
         "node": "^14.20.0 || ^16.13.0 || >=18.10.0"
       },
       "peerDependencies": {
-        "@angular/common": "15.2.7",
-        "@angular/core": "15.2.7",
-        "@angular/platform-browser": "15.2.7",
+        "@angular/common": "15.2.8",
+        "@angular/core": "15.2.8",
+        "@angular/platform-browser": "15.2.8",
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
     "node_modules/@angular/service-worker": {
-      "version": "15.2.7",
-      "resolved": "https://registry.npmjs.org/@angular/service-worker/-/service-worker-15.2.7.tgz",
-      "integrity": "sha512-lDUWIXpPFd4iICczzvfWJgWgMJ7Q/7ZBQF1IciXP4W5UpE+Vjgxx5mV4y0njzQLb2tn2VNDAOksJK26Y5ks43w==",
+      "version": "15.2.8",
+      "resolved": "https://registry.npmjs.org/@angular/service-worker/-/service-worker-15.2.8.tgz",
+      "integrity": "sha512-iD3qsqN/N2014uCuCka77pu0tqPPsLcP9rUZgAJEM01o/A/ez+E3TmWW2PYvSq2zLZQnZZ40a7dWonIAclJq3Q==",
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -979,14 +980,14 @@
         "node": "^14.20.0 || ^16.13.0 || >=18.10.0"
       },
       "peerDependencies": {
-        "@angular/common": "15.2.7",
-        "@angular/core": "15.2.7"
+        "@angular/common": "15.2.8",
+        "@angular/core": "15.2.8"
       }
     },
     "node_modules/@angular/upgrade": {
-      "version": "15.2.7",
-      "resolved": "https://registry.npmjs.org/@angular/upgrade/-/upgrade-15.2.7.tgz",
-      "integrity": "sha512-9hxJyplabtc5Oia5IDoQG1DKK8d9QbGc8GJ8XlB0HBqMJ9jrsLiFTGqFHpQf4hodE0n/MWfLuPa/xzGFS1g7Bg==",
+      "version": "15.2.8",
+      "resolved": "https://registry.npmjs.org/@angular/upgrade/-/upgrade-15.2.8.tgz",
+      "integrity": "sha512-KDkJmJ36tIkzCTaBhRvd9S4Y+7ILnuCv1BFPo5bnmlGhboWNwoj/40Bo1lGDOWtf6rQA7qVjDptFqdyZS8eUJg==",
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -994,10 +995,10 @@
         "node": "^14.20.0 || ^16.13.0 || >=18.10.0"
       },
       "peerDependencies": {
-        "@angular/compiler": "15.2.7",
-        "@angular/core": "15.2.7",
-        "@angular/platform-browser": "15.2.7",
-        "@angular/platform-browser-dynamic": "15.2.7"
+        "@angular/compiler": "15.2.8",
+        "@angular/core": "15.2.8",
+        "@angular/platform-browser": "15.2.8",
+        "@angular/platform-browser-dynamic": "15.2.8"
       }
     },
     "node_modules/@assemblyscript/loader": {
@@ -4259,9 +4260,9 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "18.16.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.16.0.tgz",
-      "integrity": "sha512-BsAaKhB+7X+H4GnSjGhJG9Qi8Tw+inU9nJDwmD5CgOmBLEI6ArdhikpLX7DjbjDRDTbqZzU2LSQNZg8WGPiSZQ=="
+      "version": "18.16.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.16.1.tgz",
+      "integrity": "sha512-DZxSZWXxFfOlx7k7Rv4LAyiMroaxa3Ly/7OOzZO8cBNho0YzAi4qlbrx8W27JGqG57IgR/6J7r+nOJWw6kcvZA=="
     },
     "node_modules/@types/parse-json": {
       "version": "4.0.0",
@@ -4336,15 +4337,15 @@
       }
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "5.59.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.59.0.tgz",
-      "integrity": "sha512-p0QgrEyrxAWBecR56gyn3wkG15TJdI//eetInP3zYRewDh0XS+DhB3VUAd3QqvziFsfaQIoIuZMxZRB7vXYaYw==",
+      "version": "5.59.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.59.1.tgz",
+      "integrity": "sha512-AVi0uazY5quFB9hlp2Xv+ogpfpk77xzsgsIEWyVS7uK/c7MZ5tw7ZPbapa0SbfkqE0fsAMkz5UwtgMLVk2BQAg==",
       "dev": true,
       "dependencies": {
         "@eslint-community/regexpp": "^4.4.0",
-        "@typescript-eslint/scope-manager": "5.59.0",
-        "@typescript-eslint/type-utils": "5.59.0",
-        "@typescript-eslint/utils": "5.59.0",
+        "@typescript-eslint/scope-manager": "5.59.1",
+        "@typescript-eslint/type-utils": "5.59.1",
+        "@typescript-eslint/utils": "5.59.1",
         "debug": "^4.3.4",
         "grapheme-splitter": "^1.0.4",
         "ignore": "^5.2.0",
@@ -4370,13 +4371,13 @@
       }
     },
     "node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/type-utils": {
-      "version": "5.59.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.59.0.tgz",
-      "integrity": "sha512-d/B6VSWnZwu70kcKQSCqjcXpVH+7ABKH8P1KNn4K7j5PXXuycZTPXF44Nui0TEm6rbWGi8kc78xRgOC4n7xFgA==",
+      "version": "5.59.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.59.1.tgz",
+      "integrity": "sha512-ZMWQ+Oh82jWqWzvM3xU+9y5U7MEMVv6GLioM3R5NJk6uvP47kZ7YvlgSHJ7ERD6bOY7Q4uxWm25c76HKEwIjZw==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "5.59.0",
-        "@typescript-eslint/utils": "5.59.0",
+        "@typescript-eslint/typescript-estree": "5.59.1",
+        "@typescript-eslint/utils": "5.59.1",
         "debug": "^4.3.4",
         "tsutils": "^3.21.0"
       },
@@ -4397,17 +4398,17 @@
       }
     },
     "node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/utils": {
-      "version": "5.59.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.59.0.tgz",
-      "integrity": "sha512-GGLFd+86drlHSvPgN/el6dRQNYYGOvRSDVydsUaQluwIW3HvbXuxyuD5JETvBt/9qGYe+lOrDk6gRrWOHb/FvA==",
+      "version": "5.59.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.59.1.tgz",
+      "integrity": "sha512-MkTe7FE+K1/GxZkP5gRj3rCztg45bEhsd8HYjczBuYm+qFHP5vtZmjx3B0yUCDotceQ4sHgTyz60Ycl225njmA==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@types/json-schema": "^7.0.9",
         "@types/semver": "^7.3.12",
-        "@typescript-eslint/scope-manager": "5.59.0",
-        "@typescript-eslint/types": "5.59.0",
-        "@typescript-eslint/typescript-estree": "5.59.0",
+        "@typescript-eslint/scope-manager": "5.59.1",
+        "@typescript-eslint/types": "5.59.1",
+        "@typescript-eslint/typescript-estree": "5.59.1",
         "eslint-scope": "^5.1.1",
         "semver": "^7.3.7"
       },
@@ -4445,14 +4446,14 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "5.59.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.59.0.tgz",
-      "integrity": "sha512-qK9TZ70eJtjojSUMrrEwA9ZDQ4N0e/AuoOIgXuNBorXYcBDk397D2r5MIe1B3cok/oCtdNC5j+lUUpVB+Dpb+w==",
+      "version": "5.59.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.59.1.tgz",
+      "integrity": "sha512-nzjFAN8WEu6yPRDizIFyzAfgK7nybPodMNFGNH0M9tei2gYnYszRDqVA0xlnRjkl7Hkx2vYrEdb6fP2a21cG1g==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "5.59.0",
-        "@typescript-eslint/types": "5.59.0",
-        "@typescript-eslint/typescript-estree": "5.59.0",
+        "@typescript-eslint/scope-manager": "5.59.1",
+        "@typescript-eslint/types": "5.59.1",
+        "@typescript-eslint/typescript-estree": "5.59.1",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -4472,13 +4473,13 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "5.59.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.59.0.tgz",
-      "integrity": "sha512-tsoldKaMh7izN6BvkK6zRMINj4Z2d6gGhO2UsI8zGZY3XhLq1DndP3Ycjhi1JwdwPRwtLMW4EFPgpuKhbCGOvQ==",
+      "version": "5.59.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.59.1.tgz",
+      "integrity": "sha512-mau0waO5frJctPuAzcxiNWqJR5Z8V0190FTSqRw1Q4Euop6+zTwHAf8YIXNwDOT29tyUDrQ65jSg9aTU/H0omA==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.59.0",
-        "@typescript-eslint/visitor-keys": "5.59.0"
+        "@typescript-eslint/types": "5.59.1",
+        "@typescript-eslint/visitor-keys": "5.59.1"
       },
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -4597,9 +4598,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "5.59.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.59.0.tgz",
-      "integrity": "sha512-yR2h1NotF23xFFYKHZs17QJnB51J/s+ud4PYU4MqdZbzeNxpgUr05+dNeCN/bb6raslHvGdd6BFCkVhpPk/ZeA==",
+      "version": "5.59.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.59.1.tgz",
+      "integrity": "sha512-dg0ICB+RZwHlysIy/Dh1SP+gnXNzwd/KS0JprD3Lmgmdq+dJAJnUPe1gNG34p0U19HvRlGX733d/KqscrGC1Pg==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -4610,13 +4611,13 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "5.59.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.59.0.tgz",
-      "integrity": "sha512-sUNnktjmI8DyGzPdZ8dRwW741zopGxltGs/SAPgGL/AAgDpiLsCFLcMNSpbfXfmnNeHmK9h3wGmCkGRGAoUZAg==",
+      "version": "5.59.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.59.1.tgz",
+      "integrity": "sha512-lYLBBOCsFltFy7XVqzX0Ju+Lh3WPIAWxYpmH/Q7ZoqzbscLiCW00LeYCdsUnnfnj29/s1WovXKh2gwCoinHNGA==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.59.0",
-        "@typescript-eslint/visitor-keys": "5.59.0",
+        "@typescript-eslint/types": "5.59.1",
+        "@typescript-eslint/visitor-keys": "5.59.1",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
@@ -4799,12 +4800,12 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "5.59.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.59.0.tgz",
-      "integrity": "sha512-qZ3iXxQhanchCeaExlKPV3gDQFxMUmU35xfd5eCXB6+kUw1TUAbIy2n7QIrwz9s98DQLzNWyHp61fY0da4ZcbA==",
+      "version": "5.59.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.59.1.tgz",
+      "integrity": "sha512-6waEYwBTCWryx0VJmP7JaM4FpipLsFl9CvYf2foAE8Qh/Y0s+bxWysciwOs0LTBED4JCaNxTZ5rGadB14M6dwA==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.59.0",
+        "@typescript-eslint/types": "5.59.1",
         "eslint-visitor-keys": "^3.3.0"
       },
       "engines": {
@@ -4956,9 +4957,10 @@
       }
     },
     "node_modules/@webpack-cli/serve": {
-      "version": "2.0.1",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-2.0.2.tgz",
+      "integrity": "sha512-S9h3GmOmzUseyeFW3tYNnWS7gNUuwxZ3mmMq0JyW78Vx1SGKPSkt5bT4pB0rUnVfHjP0EL9gW2bOzmtiTfQt0A==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">=14.15.0"
       },
@@ -9964,8 +9966,9 @@
       }
     },
     "node_modules/html-to-pdfmake": {
-      "version": "2.4.16",
-      "license": "MIT"
+      "version": "2.4.20",
+      "resolved": "https://registry.npmjs.org/html-to-pdfmake/-/html-to-pdfmake-2.4.20.tgz",
+      "integrity": "sha512-+tId1Lp3fMoOVdgD1jXeZqznnUXtsxFm3UH7yiMhgpFtY6jHjuNUPkIcjxC8SNnLe0UTX7R0F3vv5TZ23YM1kQ=="
     },
     "node_modules/html-webpack-plugin": {
       "version": "5.5.1",
@@ -11202,9 +11205,10 @@
       }
     },
     "node_modules/karma": {
-      "version": "6.4.1",
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/karma/-/karma-6.4.2.tgz",
+      "integrity": "sha512-C6SU/53LB31BEgRg+omznBEMY4SjHU3ricV6zBcAe1EeILKkeScr+fZXtaI5WyDbkVowJxxAI6h73NcFPmXolQ==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "@colors/colors": "1.5.0",
         "body-parser": "^1.19.0",
@@ -11269,8 +11273,9 @@
     },
     "node_modules/karma/node_modules/cliui": {
       "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
       "dev": true,
-      "license": "ISC",
       "dependencies": {
         "string-width": "^4.2.0",
         "strip-ansi": "^6.0.0",
@@ -11279,8 +11284,9 @@
     },
     "node_modules/karma/node_modules/glob": {
       "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
       "dev": true,
-      "license": "ISC",
       "dependencies": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -11298,8 +11304,9 @@
     },
     "node_modules/karma/node_modules/mime": {
       "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz",
+      "integrity": "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==",
       "dev": true,
-      "license": "MIT",
       "bin": {
         "mime": "cli.js"
       },
@@ -11309,16 +11316,18 @@
     },
     "node_modules/karma/node_modules/source-map": {
       "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
       "dev": true,
-      "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/karma/node_modules/yargs": {
       "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+      "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "cliui": "^7.0.2",
         "escalade": "^3.1.1",
@@ -11334,8 +11343,9 @@
     },
     "node_modules/karma/node_modules/yargs-parser": {
       "version": "20.2.9",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
+      "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
       "dev": true,
-      "license": "ISC",
       "engines": {
         "node": ">=10"
       }
@@ -14501,9 +14511,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "2.8.7",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.7.tgz",
-      "integrity": "sha512-yPngTo3aXUUmyuTjeTUT75txrf+aMh9FiD7q9ZE/i6r0bPb22g4FsE6Y338PQX1bmfy08i9QQCB7/rcUAVntfw==",
+      "version": "2.8.8",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
       "dev": true,
       "bin": {
         "prettier": "bin-prettier.js"
@@ -15798,8 +15808,9 @@
       }
     },
     "node_modules/slash": {
-      "version": "5.0.0",
-      "license": "MIT",
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-5.0.1.tgz",
+      "integrity": "sha512-ywNzUOiXwetmLvTUiCBZpLi+vxqN3i+zDqjs2HHfUSV3wN4UJxVVKWrS1JZDeiJIeBFNgB5pmioC2g0IUTL+rQ==",
       "engines": {
         "node": ">=14.16"
       },
@@ -17657,16 +17668,17 @@
       }
     },
     "node_modules/webpack-cli": {
-      "version": "5.0.1",
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.0.2.tgz",
+      "integrity": "sha512-4y3W5Dawri5+8dXm3+diW6Mn1Ya+Dei6eEVAdIduAmYNLzv1koKVAqsfgrrc9P2mhrYHQphx5htnGkcNwtubyQ==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "@discoveryjs/json-ext": "^0.5.0",
         "@webpack-cli/configtest": "^2.0.1",
         "@webpack-cli/info": "^2.0.1",
-        "@webpack-cli/serve": "^2.0.1",
+        "@webpack-cli/serve": "^2.0.2",
         "colorette": "^2.0.14",
-        "commander": "^9.4.1",
+        "commander": "^10.0.1",
         "cross-spawn": "^7.0.3",
         "envinfo": "^7.7.3",
         "fastest-levenshtein": "^1.0.12",
@@ -17700,6 +17712,15 @@
         }
       }
     },
+    "node_modules/webpack-cli/node_modules/commander": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
+      "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/webpack-dev-middleware": {
       "version": "6.0.1",
       "dev": true,
@@ -18631,17 +18652,17 @@
       }
     },
     "@angular/animations": {
-      "version": "15.2.7",
-      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-15.2.7.tgz",
-      "integrity": "sha512-Vmy0AljHc/GOp87O2x0mxUDiyfJFW8ndDE9Xrm/g0rnLnNWsaLtLXr1TWbwF7eTqKA3k/QcUvYAjLMWKvjyKgQ==",
+      "version": "15.2.8",
+      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-15.2.8.tgz",
+      "integrity": "sha512-I3xh8EASQ04s3qXQYpIORI0jFiFmvBQERBqS70TieTCIML7banOf9R3K7sAWB9frG5J0CEUwr+wtF47DCs/7eQ==",
       "requires": {
         "tslib": "^2.3.0"
       }
     },
     "@angular/cdk": {
-      "version": "15.2.7",
-      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-15.2.7.tgz",
-      "integrity": "sha512-IQg/EuZ3LC/vOHZtcLvkM+FSACXW5PVv2NddJgsBOtfcf1HcTk97VhegtB4WGQTUe1pcxiLGz/aWYuIRknjitw==",
+      "version": "15.2.8",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-15.2.8.tgz",
+      "integrity": "sha512-jiCoxfBFMH29IZIiPmVUzIWetfUNpMIvC20xYVF8RMM819vPogoObzwK4DN/sXcp/6oVbBzZFaYdijhhIt9soQ==",
       "requires": {
         "parse5": "^7.1.2",
         "tslib": "^2.3.0"
@@ -18687,25 +18708,25 @@
       }
     },
     "@angular/common": {
-      "version": "15.2.7",
-      "resolved": "https://registry.npmjs.org/@angular/common/-/common-15.2.7.tgz",
-      "integrity": "sha512-CbmrQeZ0yChQrF/ab3v+gv6x2uLbv/s1wZNUBSO/p1STz6BZzHRJqObVlfPlQvyBx5btBBy/+I1sUh1yumARDA==",
+      "version": "15.2.8",
+      "resolved": "https://registry.npmjs.org/@angular/common/-/common-15.2.8.tgz",
+      "integrity": "sha512-yLDQihiRcVl38HrWMPbqgzOaSUw85AQH5BsGdjbS6BpoBQj3EXOpccCMFsuxOKxPG4toatgawNqrEnK0Jpv9Mw==",
       "requires": {
         "tslib": "^2.3.0"
       }
     },
     "@angular/compiler": {
-      "version": "15.2.7",
-      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-15.2.7.tgz",
-      "integrity": "sha512-SesyYI2ExUa13XukXgIsmfg3ar90HbWeWDJTgmzsIfph0M9t6+SaPGpf3FCtdBgNADIpUFp3cieCOJgLESzxYQ==",
+      "version": "15.2.8",
+      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-15.2.8.tgz",
+      "integrity": "sha512-+dvspIDvuGoYqdL7r/3o9ojkR3fH1zevgC0ISJivcIrMi+WcJ0FV2JmJdnm8V52oNsHy+sMF9eEZGEbCbACE/A==",
       "requires": {
         "tslib": "^2.3.0"
       }
     },
     "@angular/compiler-cli": {
-      "version": "15.2.7",
-      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-15.2.7.tgz",
-      "integrity": "sha512-4v51dOaT8GDUzRh6+mCLZOaYuU9FYX6vOHaLod9np3tVWPhcpoF2ZklRSiQDeFqrhr5B4vuCp/Lh9N2wzc22XQ==",
+      "version": "15.2.8",
+      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-15.2.8.tgz",
+      "integrity": "sha512-fFxaDlbILo0t2t662qA0cjgn+kWItGlc1tFYKU6X7bvYb3t2e0cd9FzrFPLXUQVboGis83ULcJ2zkDxScnuPuQ==",
       "requires": {
         "@babel/core": "7.19.3",
         "@jridgewell/sourcemap-codec": "^1.4.14",
@@ -18751,25 +18772,25 @@
       }
     },
     "@angular/core": {
-      "version": "15.2.7",
-      "resolved": "https://registry.npmjs.org/@angular/core/-/core-15.2.7.tgz",
-      "integrity": "sha512-iS7JCJubRFqdndoUdAnvNkQRT3tY5tNFupBQS/sytkwxVrdBg+Is5jpdgk741n824vTMsE+CnuY0SETar8rN6g==",
+      "version": "15.2.8",
+      "resolved": "https://registry.npmjs.org/@angular/core/-/core-15.2.8.tgz",
+      "integrity": "sha512-NDs+g4uM4EhyCvluf8a0YBCFXsDAEfCMHOD5cS00Bl+liTQ7JwtmepkWXMyjLB92irC9JaR79kdy4BoIKOh8WA==",
       "requires": {
         "tslib": "^2.3.0"
       }
     },
     "@angular/forms": {
-      "version": "15.2.7",
-      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-15.2.7.tgz",
-      "integrity": "sha512-rzrebDIrtxxOeMcBzRBxqaOBZ+T1DJrysG/6YWZy428W/Z3MfPxUarPxgfx/oZI+x5uUsDaZmyoRdhVPJ2KhZg==",
+      "version": "15.2.8",
+      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-15.2.8.tgz",
+      "integrity": "sha512-VyevVj20DdQWjAQUyiFTe+DAzqG9GqfAOWn376Y/lhPcwxAojXePTGNgtQud566/urDrNrP5haaLD6O36/3n+w==",
       "requires": {
         "tslib": "^2.3.0"
       }
     },
     "@angular/localize": {
-      "version": "15.2.7",
-      "resolved": "https://registry.npmjs.org/@angular/localize/-/localize-15.2.7.tgz",
-      "integrity": "sha512-ySuy35QKApWH9sW3PfnAAnZjLl3NT+SacvlEWigrTeCqfBEuDPUG57ugvc1/Lzuo09UOh3HQkrQBbdWAILd8JA==",
+      "version": "15.2.8",
+      "resolved": "https://registry.npmjs.org/@angular/localize/-/localize-15.2.8.tgz",
+      "integrity": "sha512-wJLBp0MUnET9kHzBtqIlZ3RQ56JFItXSgmBXagQq+MU+uJZmGvuw6fez0i5wkgv9Rgnr25oCULVtpTF+T5RGYA==",
       "requires": {
         "@babel/core": "7.19.3",
         "glob": "8.1.0",
@@ -18806,41 +18827,41 @@
       }
     },
     "@angular/platform-browser": {
-      "version": "15.2.7",
-      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-15.2.7.tgz",
-      "integrity": "sha512-aCbd7xyuP7c2eDITkOTDO2mqP550WHCBN8U6VnjysqtB5ocbJtR6z/MIRItN/Zx+xj3piiaKei//XIkb3Q5fXQ==",
+      "version": "15.2.8",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-15.2.8.tgz",
+      "integrity": "sha512-8sKFUld54inj0FnQ1ydhFxnDgsbbf43W9FALye/5uEtLgwwE/ZvkNYMaQ7hq1JPuQRMDj3gJkFqaLeFjplpHDA==",
       "requires": {
         "tslib": "^2.3.0"
       }
     },
     "@angular/platform-browser-dynamic": {
-      "version": "15.2.7",
-      "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-15.2.7.tgz",
-      "integrity": "sha512-t1Nf7hgbcYvhmxuzgUtsV47jrI5CXUBqrtz5I0ilWG92zZTig5qvfd1/2Ub8NHz87uHNrnggyZpL2+4MJ26nyQ==",
+      "version": "15.2.8",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-15.2.8.tgz",
+      "integrity": "sha512-75HyoZNibA3u/FvdK4Aw5KMzUmS/nDk5N8s7gfM09fe1resSPgFiW8JJEkr1xiUdA2WtSRbHs34y5rHLDe7n1Q==",
       "requires": {
         "tslib": "^2.3.0"
       }
     },
     "@angular/router": {
-      "version": "15.2.7",
-      "resolved": "https://registry.npmjs.org/@angular/router/-/router-15.2.7.tgz",
-      "integrity": "sha512-Wkk+oJSUrVafJjmv9uE1SoY4wDE9bjX7ald+UXePz+QyM/PFoLkm/CzLYjFBkJnsOkOVxw1VmvacoUjWN6BCTQ==",
+      "version": "15.2.8",
+      "resolved": "https://registry.npmjs.org/@angular/router/-/router-15.2.8.tgz",
+      "integrity": "sha512-C62QBEeJSBTNTrQHZiklPrxwJwuENoZzWX22MMJ7dxl+7VjRgnmj8J7mcX9fLjHlL+mC3RvesMlX7sGZRQV1cg==",
       "requires": {
         "tslib": "^2.3.0"
       }
     },
     "@angular/service-worker": {
-      "version": "15.2.7",
-      "resolved": "https://registry.npmjs.org/@angular/service-worker/-/service-worker-15.2.7.tgz",
-      "integrity": "sha512-lDUWIXpPFd4iICczzvfWJgWgMJ7Q/7ZBQF1IciXP4W5UpE+Vjgxx5mV4y0njzQLb2tn2VNDAOksJK26Y5ks43w==",
+      "version": "15.2.8",
+      "resolved": "https://registry.npmjs.org/@angular/service-worker/-/service-worker-15.2.8.tgz",
+      "integrity": "sha512-iD3qsqN/N2014uCuCka77pu0tqPPsLcP9rUZgAJEM01o/A/ez+E3TmWW2PYvSq2zLZQnZZ40a7dWonIAclJq3Q==",
       "requires": {
         "tslib": "^2.3.0"
       }
     },
     "@angular/upgrade": {
-      "version": "15.2.7",
-      "resolved": "https://registry.npmjs.org/@angular/upgrade/-/upgrade-15.2.7.tgz",
-      "integrity": "sha512-9hxJyplabtc5Oia5IDoQG1DKK8d9QbGc8GJ8XlB0HBqMJ9jrsLiFTGqFHpQf4hodE0n/MWfLuPa/xzGFS1g7Bg==",
+      "version": "15.2.8",
+      "resolved": "https://registry.npmjs.org/@angular/upgrade/-/upgrade-15.2.8.tgz",
+      "integrity": "sha512-KDkJmJ36tIkzCTaBhRvd9S4Y+7ILnuCv1BFPo5bnmlGhboWNwoj/40Bo1lGDOWtf6rQA7qVjDptFqdyZS8eUJg==",
       "requires": {
         "tslib": "^2.3.0"
       }
@@ -20908,9 +20929,9 @@
       "dev": true
     },
     "@types/node": {
-      "version": "18.16.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.16.0.tgz",
-      "integrity": "sha512-BsAaKhB+7X+H4GnSjGhJG9Qi8Tw+inU9nJDwmD5CgOmBLEI6ArdhikpLX7DjbjDRDTbqZzU2LSQNZg8WGPiSZQ=="
+      "version": "18.16.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.16.1.tgz",
+      "integrity": "sha512-DZxSZWXxFfOlx7k7Rv4LAyiMroaxa3Ly/7OOzZO8cBNho0YzAi4qlbrx8W27JGqG57IgR/6J7r+nOJWw6kcvZA=="
     },
     "@types/parse-json": {
       "version": "4.0.0"
@@ -20981,15 +21002,15 @@
       }
     },
     "@typescript-eslint/eslint-plugin": {
-      "version": "5.59.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.59.0.tgz",
-      "integrity": "sha512-p0QgrEyrxAWBecR56gyn3wkG15TJdI//eetInP3zYRewDh0XS+DhB3VUAd3QqvziFsfaQIoIuZMxZRB7vXYaYw==",
+      "version": "5.59.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.59.1.tgz",
+      "integrity": "sha512-AVi0uazY5quFB9hlp2Xv+ogpfpk77xzsgsIEWyVS7uK/c7MZ5tw7ZPbapa0SbfkqE0fsAMkz5UwtgMLVk2BQAg==",
       "dev": true,
       "requires": {
         "@eslint-community/regexpp": "^4.4.0",
-        "@typescript-eslint/scope-manager": "5.59.0",
-        "@typescript-eslint/type-utils": "5.59.0",
-        "@typescript-eslint/utils": "5.59.0",
+        "@typescript-eslint/scope-manager": "5.59.1",
+        "@typescript-eslint/type-utils": "5.59.1",
+        "@typescript-eslint/utils": "5.59.1",
         "debug": "^4.3.4",
         "grapheme-splitter": "^1.0.4",
         "ignore": "^5.2.0",
@@ -20999,29 +21020,29 @@
       },
       "dependencies": {
         "@typescript-eslint/type-utils": {
-          "version": "5.59.0",
-          "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.59.0.tgz",
-          "integrity": "sha512-d/B6VSWnZwu70kcKQSCqjcXpVH+7ABKH8P1KNn4K7j5PXXuycZTPXF44Nui0TEm6rbWGi8kc78xRgOC4n7xFgA==",
+          "version": "5.59.1",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.59.1.tgz",
+          "integrity": "sha512-ZMWQ+Oh82jWqWzvM3xU+9y5U7MEMVv6GLioM3R5NJk6uvP47kZ7YvlgSHJ7ERD6bOY7Q4uxWm25c76HKEwIjZw==",
           "dev": true,
           "requires": {
-            "@typescript-eslint/typescript-estree": "5.59.0",
-            "@typescript-eslint/utils": "5.59.0",
+            "@typescript-eslint/typescript-estree": "5.59.1",
+            "@typescript-eslint/utils": "5.59.1",
             "debug": "^4.3.4",
             "tsutils": "^3.21.0"
           }
         },
         "@typescript-eslint/utils": {
-          "version": "5.59.0",
-          "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.59.0.tgz",
-          "integrity": "sha512-GGLFd+86drlHSvPgN/el6dRQNYYGOvRSDVydsUaQluwIW3HvbXuxyuD5JETvBt/9qGYe+lOrDk6gRrWOHb/FvA==",
+          "version": "5.59.1",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.59.1.tgz",
+          "integrity": "sha512-MkTe7FE+K1/GxZkP5gRj3rCztg45bEhsd8HYjczBuYm+qFHP5vtZmjx3B0yUCDotceQ4sHgTyz60Ycl225njmA==",
           "dev": true,
           "requires": {
             "@eslint-community/eslint-utils": "^4.2.0",
             "@types/json-schema": "^7.0.9",
             "@types/semver": "^7.3.12",
-            "@typescript-eslint/scope-manager": "5.59.0",
-            "@typescript-eslint/types": "5.59.0",
-            "@typescript-eslint/typescript-estree": "5.59.0",
+            "@typescript-eslint/scope-manager": "5.59.1",
+            "@typescript-eslint/types": "5.59.1",
+            "@typescript-eslint/typescript-estree": "5.59.1",
             "eslint-scope": "^5.1.1",
             "semver": "^7.3.7"
           }
@@ -21045,25 +21066,25 @@
       }
     },
     "@typescript-eslint/parser": {
-      "version": "5.59.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.59.0.tgz",
-      "integrity": "sha512-qK9TZ70eJtjojSUMrrEwA9ZDQ4N0e/AuoOIgXuNBorXYcBDk397D2r5MIe1B3cok/oCtdNC5j+lUUpVB+Dpb+w==",
+      "version": "5.59.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.59.1.tgz",
+      "integrity": "sha512-nzjFAN8WEu6yPRDizIFyzAfgK7nybPodMNFGNH0M9tei2gYnYszRDqVA0xlnRjkl7Hkx2vYrEdb6fP2a21cG1g==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/scope-manager": "5.59.0",
-        "@typescript-eslint/types": "5.59.0",
-        "@typescript-eslint/typescript-estree": "5.59.0",
+        "@typescript-eslint/scope-manager": "5.59.1",
+        "@typescript-eslint/types": "5.59.1",
+        "@typescript-eslint/typescript-estree": "5.59.1",
         "debug": "^4.3.4"
       }
     },
     "@typescript-eslint/scope-manager": {
-      "version": "5.59.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.59.0.tgz",
-      "integrity": "sha512-tsoldKaMh7izN6BvkK6zRMINj4Z2d6gGhO2UsI8zGZY3XhLq1DndP3Ycjhi1JwdwPRwtLMW4EFPgpuKhbCGOvQ==",
+      "version": "5.59.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.59.1.tgz",
+      "integrity": "sha512-mau0waO5frJctPuAzcxiNWqJR5Z8V0190FTSqRw1Q4Euop6+zTwHAf8YIXNwDOT29tyUDrQ65jSg9aTU/H0omA==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "5.59.0",
-        "@typescript-eslint/visitor-keys": "5.59.0"
+        "@typescript-eslint/types": "5.59.1",
+        "@typescript-eslint/visitor-keys": "5.59.1"
       }
     },
     "@typescript-eslint/type-utils": {
@@ -21122,19 +21143,19 @@
       }
     },
     "@typescript-eslint/types": {
-      "version": "5.59.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.59.0.tgz",
-      "integrity": "sha512-yR2h1NotF23xFFYKHZs17QJnB51J/s+ud4PYU4MqdZbzeNxpgUr05+dNeCN/bb6raslHvGdd6BFCkVhpPk/ZeA==",
+      "version": "5.59.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.59.1.tgz",
+      "integrity": "sha512-dg0ICB+RZwHlysIy/Dh1SP+gnXNzwd/KS0JprD3Lmgmdq+dJAJnUPe1gNG34p0U19HvRlGX733d/KqscrGC1Pg==",
       "dev": true
     },
     "@typescript-eslint/typescript-estree": {
-      "version": "5.59.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.59.0.tgz",
-      "integrity": "sha512-sUNnktjmI8DyGzPdZ8dRwW741zopGxltGs/SAPgGL/AAgDpiLsCFLcMNSpbfXfmnNeHmK9h3wGmCkGRGAoUZAg==",
+      "version": "5.59.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.59.1.tgz",
+      "integrity": "sha512-lYLBBOCsFltFy7XVqzX0Ju+Lh3WPIAWxYpmH/Q7ZoqzbscLiCW00LeYCdsUnnfnj29/s1WovXKh2gwCoinHNGA==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "5.59.0",
-        "@typescript-eslint/visitor-keys": "5.59.0",
+        "@typescript-eslint/types": "5.59.1",
+        "@typescript-eslint/visitor-keys": "5.59.1",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
@@ -21233,12 +21254,12 @@
       }
     },
     "@typescript-eslint/visitor-keys": {
-      "version": "5.59.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.59.0.tgz",
-      "integrity": "sha512-qZ3iXxQhanchCeaExlKPV3gDQFxMUmU35xfd5eCXB6+kUw1TUAbIy2n7QIrwz9s98DQLzNWyHp61fY0da4ZcbA==",
+      "version": "5.59.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.59.1.tgz",
+      "integrity": "sha512-6waEYwBTCWryx0VJmP7JaM4FpipLsFl9CvYf2foAE8Qh/Y0s+bxWysciwOs0LTBED4JCaNxTZ5rGadB14M6dwA==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "5.59.0",
+        "@typescript-eslint/types": "5.59.1",
         "eslint-visitor-keys": "^3.3.0"
       }
     },
@@ -21354,7 +21375,9 @@
       "requires": {}
     },
     "@webpack-cli/serve": {
-      "version": "2.0.1",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-2.0.2.tgz",
+      "integrity": "sha512-S9h3GmOmzUseyeFW3tYNnWS7gNUuwxZ3mmMq0JyW78Vx1SGKPSkt5bT4pB0rUnVfHjP0EL9gW2bOzmtiTfQt0A==",
       "dev": true,
       "requires": {}
     },
@@ -24641,7 +24664,9 @@
       }
     },
     "html-to-pdfmake": {
-      "version": "2.4.16"
+      "version": "2.4.20",
+      "resolved": "https://registry.npmjs.org/html-to-pdfmake/-/html-to-pdfmake-2.4.20.tgz",
+      "integrity": "sha512-+tId1Lp3fMoOVdgD1jXeZqznnUXtsxFm3UH7yiMhgpFtY6jHjuNUPkIcjxC8SNnLe0UTX7R0F3vv5TZ23YM1kQ=="
     },
     "html-webpack-plugin": {
       "version": "5.5.1",
@@ -25356,7 +25381,9 @@
       }
     },
     "karma": {
-      "version": "6.4.1",
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/karma/-/karma-6.4.2.tgz",
+      "integrity": "sha512-C6SU/53LB31BEgRg+omznBEMY4SjHU3ricV6zBcAe1EeILKkeScr+fZXtaI5WyDbkVowJxxAI6h73NcFPmXolQ==",
       "dev": true,
       "requires": {
         "@colors/colors": "1.5.0",
@@ -25387,6 +25414,8 @@
       "dependencies": {
         "cliui": {
           "version": "7.0.4",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+          "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
           "dev": true,
           "requires": {
             "string-width": "^4.2.0",
@@ -25396,6 +25425,8 @@
         },
         "glob": {
           "version": "7.2.3",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+          "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
           "dev": true,
           "requires": {
             "fs.realpath": "^1.0.0",
@@ -25408,14 +25439,20 @@
         },
         "mime": {
           "version": "2.6.0",
+          "resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz",
+          "integrity": "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==",
           "dev": true
         },
         "source-map": {
           "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
           "dev": true
         },
         "yargs": {
           "version": "16.2.0",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+          "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
           "dev": true,
           "requires": {
             "cliui": "^7.0.2",
@@ -25429,6 +25466,8 @@
         },
         "yargs-parser": {
           "version": "20.2.9",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
+          "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
           "dev": true
         }
       }
@@ -27448,9 +27487,9 @@
       "version": "1.2.1"
     },
     "prettier": {
-      "version": "2.8.7",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.7.tgz",
-      "integrity": "sha512-yPngTo3aXUUmyuTjeTUT75txrf+aMh9FiD7q9ZE/i6r0bPb22g4FsE6Y338PQX1bmfy08i9QQCB7/rcUAVntfw==",
+      "version": "2.8.8",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
       "dev": true
     },
     "pretty-bytes": {
@@ -28290,7 +28329,9 @@
       }
     },
     "slash": {
-      "version": "5.0.0"
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-5.0.1.tgz",
+      "integrity": "sha512-ywNzUOiXwetmLvTUiCBZpLi+vxqN3i+zDqjs2HHfUSV3wN4UJxVVKWrS1JZDeiJIeBFNgB5pmioC2g0IUTL+rQ=="
     },
     "slice-ansi": {
       "version": "5.0.0",
@@ -29532,15 +29573,17 @@
       }
     },
     "webpack-cli": {
-      "version": "5.0.1",
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.0.2.tgz",
+      "integrity": "sha512-4y3W5Dawri5+8dXm3+diW6Mn1Ya+Dei6eEVAdIduAmYNLzv1koKVAqsfgrrc9P2mhrYHQphx5htnGkcNwtubyQ==",
       "dev": true,
       "requires": {
         "@discoveryjs/json-ext": "^0.5.0",
         "@webpack-cli/configtest": "^2.0.1",
         "@webpack-cli/info": "^2.0.1",
-        "@webpack-cli/serve": "^2.0.1",
+        "@webpack-cli/serve": "^2.0.2",
         "colorette": "^2.0.14",
-        "commander": "^9.4.1",
+        "commander": "^10.0.1",
         "cross-spawn": "^7.0.3",
         "envinfo": "^7.7.3",
         "fastest-levenshtein": "^1.0.12",
@@ -29548,6 +29591,14 @@
         "interpret": "^3.1.1",
         "rechoir": "^0.8.0",
         "webpack-merge": "^5.7.3"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "10.0.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
+          "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
+          "dev": true
+        }
       }
     },
     "webpack-dev-middleware": {
diff --git a/package.json b/package.json
index 0d3981ddfd..a6ffaa0275 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@denbi/cloud-portal-webapp",
-  "version": "4.683.0",
+  "version": "4.684.0",
   "description": "de.NBI Cloud Portal",
   "scripts": {
     "ng": "ng serve",
@@ -19,18 +19,18 @@
   "private": true,
   "dependencies": {
     "@angular-eslint/eslint-plugin": "^15.2.0",
-    "@angular/animations": "15.2.7",
-    "@angular/cdk": "15.2.7",
-    "@angular/common": "15.2.7",
-    "@angular/compiler": "15.2.7",
-    "@angular/core": "15.2.7",
-    "@angular/forms": "15.2.7",
-    "@angular/localize": "15.2.7",
-    "@angular/platform-browser": "15.2.7",
-    "@angular/platform-browser-dynamic": "15.2.7",
-    "@angular/router": "15.2.7",
-    "@angular/service-worker": "15.2.7",
-    "@angular/upgrade": "15.2.7",
+    "@angular/animations": "15.2.8",
+    "@angular/cdk": "15.2.8",
+    "@angular/common": "15.2.8",
+    "@angular/compiler": "15.2.8",
+    "@angular/core": "15.2.8",
+    "@angular/forms": "15.2.8",
+    "@angular/localize": "15.2.8",
+    "@angular/platform-browser": "15.2.8",
+    "@angular/platform-browser-dynamic": "15.2.8",
+    "@angular/router": "15.2.8",
+    "@angular/service-worker": "15.2.8",
+    "@angular/upgrade": "15.2.8",
     "@coreui/angular": "^4.3.4",
     "@coreui/coreui": "4.2.6",
     "@coreui/icons-angular": "^4.3.0",
@@ -56,7 +56,7 @@
     "file-saver": "2.0.5",
     "follow-redirects": "1.15.2",
     "globby": "13.1.4",
-    "html-to-pdfmake": "2.4.16",
+    "html-to-pdfmake": "2.4.20",
     "html2canvas": "1.4.1",
     "http-server": "14.1.1",
     "is-promise": "4.0.0",
@@ -93,11 +93,11 @@
     "@angular-eslint/schematics": "15.2.1",
     "@angular-eslint/template-parser": "15.2.1",
     "@angular/cli": "15.2.6",
-    "@angular/compiler-cli": "15.2.7",
+    "@angular/compiler-cli": "15.2.8",
     "@compodoc/compodoc": "1.1.19",
     "@playwright/test": "1.32.3",
     "@types/jasmine": "4.3.1",
-    "@types/node": "18.16.0",
+    "@types/node": "18.16.1",
     "@typescript-eslint/eslint-plugin": "^5.43.0",
     "@typescript-eslint/parser": "^5.43.0",
     "async": "3.2.4",
@@ -114,13 +114,13 @@
     "html-webpack-plugin": "5.5.1",
     "husky": "8.0.3",
     "json-loader": "0.5.7",
-    "karma": "6.4.1",
+    "karma": "6.4.2",
     "karma-chrome-launcher": "3.2.0",
     "less-loader": "11.1.0",
     "lint-staged": "13.2.1",
     "ngx-spec": "2.1.5",
     "npm-run-all": "4.1.5",
-    "prettier": "2.8.7",
+    "prettier": "2.8.8",
     "raw-loader": "4.0.2",
     "sass-loader": "13.2.2",
     "script-loader": "0.7.2",
@@ -130,7 +130,7 @@
     "ts-node": "10.9.1",
     "typescript": "4.9.5",
     "url-loader": "4.1.1",
-    "webpack-cli": "5.0.1"
+    "webpack-cli": "5.0.2"
   },
   "lint-staged": {
     "*.{js,jsx,ts}": [