From be65886fd3f96d7a77c28569fcdd08381171537d Mon Sep 17 00:00:00 2001
From: "michele.artini" <michele.artini@isti.cnr.it>
Date: Mon, 27 Mar 2023 14:16:53 +0200
Subject: [PATCH] ui

---
 .../dnet-is-application/src/app/app.module.ts |  7 +-
 .../src/app/common/is.model.ts                |  4 +-
 .../src/app/wf-confs/wf-conf-dialog.html      | 83 +++++++++++++++++++
 .../src/app/wf-confs/wf-conf.dialog.html      |  0
 .../src/app/wf-confs/wf-confs.component.html  |  7 +-
 .../src/app/wf-confs/wf-confs.component.ts    | 73 +++++++++++++++-
 6 files changed, 167 insertions(+), 7 deletions(-)
 create mode 100644 frontends/dnet-is-application/src/app/wf-confs/wf-conf-dialog.html
 delete mode 100644 frontends/dnet-is-application/src/app/wf-confs/wf-conf.dialog.html

diff --git a/frontends/dnet-is-application/src/app/app.module.ts b/frontends/dnet-is-application/src/app/app.module.ts
index 4585e745..0391345f 100644
--- a/frontends/dnet-is-application/src/app/app.module.ts
+++ b/frontends/dnet-is-application/src/app/app.module.ts
@@ -37,8 +37,9 @@ import { SpinnerHttpInterceptor } from './common/spinner.service';
 import { MdstoresComponent, MdstoreInspectorComponent, MDStoreVersionsDialog, AddMDStoreDialog } from './mdstores/mdstores.component';
 import { CleanerTesterComponent } from './cleaner-tester/cleaner-tester.component';
 import { EmailDialog, EmailsComponent } from './emails/emails.component';
-import { WfConfsComponent } from './wf-confs/wf-confs.component';
+import { WfConfsComponent, WfConfDialog } from './wf-confs/wf-confs.component';
 import { MatTabsModule } from '@angular/material/tabs';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 
 @NgModule({
 	declarations: [
@@ -72,7 +73,8 @@ import { MatTabsModule } from '@angular/material/tabs';
 		CleanerTesterComponent,
 		EmailsComponent,
 		EmailDialog,
-		WfConfsComponent
+		WfConfsComponent,
+		WfConfDialog
 	],
 	imports: [
 		BrowserModule,
@@ -94,6 +96,7 @@ import { MatTabsModule } from '@angular/material/tabs';
 		MatFormFieldModule,
 		MatInputModule,
 		MatSelectModule,
+		MatCheckboxModule,
 		MatTableModule,
 		MatExpansionModule,
 		MatDialogModule,
diff --git a/frontends/dnet-is-application/src/app/common/is.model.ts b/frontends/dnet-is-application/src/app/common/is.model.ts
index acf0d35a..555e8514 100644
--- a/frontends/dnet-is-application/src/app/common/is.model.ts
+++ b/frontends/dnet-is-application/src/app/common/is.model.ts
@@ -233,9 +233,9 @@ export interface WfConf {
 }
 
 export interface WfSubscription {
-
+	// TODO
 }
 
 export interface WfProcessStatus {
-
+	// TODO
 }
diff --git a/frontends/dnet-is-application/src/app/wf-confs/wf-conf-dialog.html b/frontends/dnet-is-application/src/app/wf-confs/wf-conf-dialog.html
new file mode 100644
index 00000000..e3a0af69
--- /dev/null
+++ b/frontends/dnet-is-application/src/app/wf-confs/wf-conf-dialog.html
@@ -0,0 +1,83 @@
+<form [formGroup]="wfConfForm" (ngSubmit)="onSubmit()">
+	<h1 mat-dialog-title>Workflow Configuration</h1>
+
+	<div mat-dialog-content>
+		<section>
+			<mat-checkbox formControlName="enabled">enabled</mat-checkbox>
+		</section>
+
+		<mat-card *ngIf="wfConfForm.get('enabled')?.value">
+			<mat-card-header>
+				<mat-card-subtitle>Description</mat-card-subtitle>
+			</mat-card-header>
+			<mat-card-content>
+				<mat-form-field appearance="fill" floatLabel="always" style="width: 100%;" *ngIf="data.id">
+					<mat-label>ID</mat-label>
+					<input matInput readonly value="{{data.id}}" />
+				</mat-form-field>
+
+				<mat-form-field appearance="fill" floatLabel="always" style="width: 80%;">
+					<mat-label>Name</mat-label>
+					<input matInput formControlName="name" />
+					<mat-error *ngIf="wfConfForm.get('name')?.invalid">This field is <strong>required</strong></mat-error>
+				</mat-form-field>
+
+				<mat-form-field appearance="fill" floatLabel="always" style="width: 20%;">
+					<mat-label>Priority</mat-label>
+					<input matInput formControlName="priority" />
+					<mat-error *ngIf="wfConfForm.get('priority')?.invalid">This field is <strong>required</strong></mat-error>
+				</mat-form-field>
+			</mat-card-content>
+		</mat-card>
+
+		<mat-card style="margin-top: 1em;" *ngIf="wfConfForm.get('enabled')?.value">
+			<mat-card-header>
+				<mat-card-subtitle>Workflow parameters</mat-card-subtitle>
+			</mat-card-header>
+			<mat-card-content>
+				<mat-form-field appearance="fill" floatLabel="always" style="width: 100%;">
+					<mat-label>Workflow</mat-label>
+					<input matInput formControlName="workflow" />
+					<mat-error *ngIf="wfConfForm.get('workflow')?.invalid">This field is <strong>required</strong></mat-error>
+				</mat-form-field>
+			</mat-card-content>
+		</mat-card>
+
+		<mat-card style="margin-top: 1em;" *ngIf="wfConfForm.get('enabled')?.value">
+			<mat-card-header>
+				<mat-card-subtitle>Scheduling</mat-card-subtitle>
+			</mat-card-header>
+			<mat-card-content>
+				<section>
+					<mat-checkbox formControlName="schedulingEnabled">Enabled</mat-checkbox>
+				</section>
+				<div *ngIf="wfConfForm.get('schedulingEnabled')?.value">
+					<mat-form-field appearance="fill" floatLabel="always" style="width: 50%;">
+						<mat-label>Cron Expression</mat-label>
+						<input matInput formControlName="cronExpression" />
+						<mat-error *ngIf="wfConfForm.get('cronExpression')?.invalid">This field is
+							<strong>required</strong></mat-error>
+					</mat-form-field>
+
+					<mat-form-field appearance="fill" floatLabel="always" style="width: 50%;">
+						<mat-label>Min Interval</mat-label>
+						<input matInput formControlName="cronMinInterval" />
+						<mat-error *ngIf="wfConfForm.get('cronMinInterval')?.invalid">This field is
+							<strong>required</strong></mat-error>
+					</mat-form-field>
+				</div>
+			</mat-card-content>
+
+		</mat-card>
+
+	</div>
+
+	<div mat-dialog-actions>
+		<button mat-stroked-button color="primary" type="submit" [disabled]="!wfConfForm.valid">Submit</button>
+		<button mat-stroked-button color="primary" mat-dialog-close>Close</button>
+		<mat-error *ngIf="wfConfForm.errors?.['serverError']">
+			{{ wfConfForm.errors?.['serverError'] }}
+		</mat-error>
+	</div>
+
+</form>
diff --git a/frontends/dnet-is-application/src/app/wf-confs/wf-conf.dialog.html b/frontends/dnet-is-application/src/app/wf-confs/wf-conf.dialog.html
deleted file mode 100644
index e69de29b..00000000
diff --git a/frontends/dnet-is-application/src/app/wf-confs/wf-confs.component.html b/frontends/dnet-is-application/src/app/wf-confs/wf-confs.component.html
index a62d6fca..9d54b451 100644
--- a/frontends/dnet-is-application/src/app/wf-confs/wf-confs.component.html
+++ b/frontends/dnet-is-application/src/app/wf-confs/wf-confs.component.html
@@ -7,10 +7,15 @@
 	</a>
 </nav>
 
+<button mat-stroked-button color="primary" (click)="openAddWfConfDialog()">
+	<mat-icon fontIcon="add"></mat-icon>
+	configure a new workflow
+</button>
+
 <div *ngIf="conf">
 	{{conf}}
 </div>
 
-<div *ngIf="!conf">
+<div *ngIf="!conf" style="margin-top: 2em;">
 	Workflow Configuration does not exist
 </div>
diff --git a/frontends/dnet-is-application/src/app/wf-confs/wf-confs.component.ts b/frontends/dnet-is-application/src/app/wf-confs/wf-confs.component.ts
index 65bcde68..42a5942c 100644
--- a/frontends/dnet-is-application/src/app/wf-confs/wf-confs.component.ts
+++ b/frontends/dnet-is-application/src/app/wf-confs/wf-confs.component.ts
@@ -1,8 +1,10 @@
-import { Component, OnInit, SecurityContext } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
+import { Component, Inject, OnInit, SecurityContext } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 import { KeyValue, WfConf, WfSection } from '../common/is.model';
 import { ISService } from '../common/is.service';
+import { ResMetadataDialog } from '../resources/resources.component';
 
 @Component({
 	selector: 'app-wf-confs',
@@ -44,4 +46,71 @@ export class WfConfsComponent implements OnInit {
 			}
 		});
 	}
+
+	openAddWfConfDialog(): void {
+		const dialogRef = this.dialog.open(WfConfDialog, {
+			data: {
+				id: '',
+				name: '',
+				section: this.section?.id,
+				enabled: true,
+				priority: 75,
+				workflow: '',
+				schedulingEnabled: false,
+				cronExpression: '',
+				cronMinInterval: 9600,
+				details: new Map,
+				configured: true,
+				systemParams: new Map,
+				userParams: new Map
+			},
+			width: '80%'
+		});
+
+		dialogRef.afterClosed().subscribe(result => {
+			if (result) this.router.navigate(['/wfs/conf', result.id]);;
+		});
+	}
+}
+
+@Component({
+	selector: 'wf-conf-dialog',
+	templateUrl: 'wf-conf-dialog.html',
+	styleUrls: ['./wf-confs.component.css']
+})
+export class WfConfDialog {
+	wfConfForm = new FormGroup({
+		name: new FormControl('', [Validators.required]),
+		//details: Map<string, string>,
+		enabled: new FormControl(true, [Validators.required]),
+		priority: new FormControl(75, [Validators.required, Validators.min(1), Validators.max(100)]),
+		schedulingEnabled: new FormControl(false, [Validators.required]),
+		cronExpression: new FormControl("", [Validators.required]),
+		cronMinInterval: new FormControl("", [Validators.required]),
+		workflow: new FormControl('', [Validators.required]),
+		//systemParams: Map<string, string>,
+		//userParams: Map<string, string>
+	});
+
+	constructor(public dialogRef: MatDialogRef<ResMetadataDialog>, @Inject(MAT_DIALOG_DATA) public data: any, public service: ISService) {
+		this.wfConfForm.get('name')?.setValue(data.name);
+		//details
+		this.wfConfForm.get('enabled')?.setValue(data.enabled);
+		this.wfConfForm.get('priority')?.setValue(data.priority);
+		this.wfConfForm.get('schedulingEnabled')?.setValue(data.schedulingEnabled);
+		this.wfConfForm.get('cronExpression')?.setValue(data.cronExpression);
+		this.wfConfForm.get('cronMinInterval')?.setValue(data.cronMinInterval);
+		this.wfConfForm.get('workflow')?.setValue(data.workflow);
+		//systemParams,
+		//userParams
+	}
+
+	onSubmit(): void {
+		const conf = Object.assign({}, this.data, this.wfConfForm.value);
+		this.service.saveWfConfiguration(conf, (data: void) => this.dialogRef.close(1), this.wfConfForm);
+	}
+
+	onNoClick(): void {
+		this.dialogRef.close();
+	}
 }