D-Net
/
dnet-applications
16
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

ui

This commit is contained in:
Michele Artini 2023-03-28 11:12:10 +02:00
parent be65886fd3
commit 6676c7f26c
3 changed files with 105 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontends/dnet-is-application/src/app/app.module.ts
View File

@ -40,6 +40,7 @@ import { EmailDialog, EmailsComponent } from './emails/emails.component';
import { WfConfsComponent, WfConfDialog } from './wf-confs/wf-confs.component';
import { MatTabsModule } from '@angular/material/tabs';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatStepperModule } from '@angular/material/stepper';
@NgModule({
declarations: [
@ -105,7 +106,8 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
MatSnackBarModule,
MatPaginatorModule,
MatProgressSpinnerModule,
MatTabsModule
MatTabsModule,
MatStepperModule
],
providers: [{
provide: HTTP_INTERCEPTORS,

112
frontends/dnet-is-application/src/app/wf-confs/wf-conf-dialog.html
View File

@ -1,83 +1,97 @@
<form [formGroup]="wfConfForm" (ngSubmit)="onSubmit()">
<h1 mat-dialog-title>Workflow Configuration</h1>
<div mat-dialog-content>
<mat-vertical-stepper [linear]="true" #stepper>
<mat-step [stepControl]="wfConfFormStep1">
<form [formGroup]="wfConfFormStep1">
<ng-template matStepLabel>Choose Workflow</ng-template>
<mat-form-field appearance="fill" floatLabel="always" style="width: 100%;">
<mat-label>Workflow</mat-label>
<input matInput formControlName="workflow" />
<mat-error *ngIf="wfConfFormStep1.get('workflow')?.invalid">This field is
<strong>required</strong></mat-error>
</mat-form-field>
<div>
<button mat-stroked-button color="primary" matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step [stepControl]="wfConfFormStep2" label="General">
<form [formGroup]="wfConfFormStep2">
<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-form-field appearance="fill" floatLabel="always" style="width: 100%;">
<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-error *ngIf="wfConfFormStep2.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-form-field appearance="fill" floatLabel="always" style="width: 40%;">
<mat-label>Priority</mat-label>
<input matInput formControlName="priority" />
<mat-error *ngIf="wfConfForm.get('priority')?.invalid">This field is <strong>required</strong></mat-error>
<input matInput formControlName="priority" type="number" step="1" min="1" max="100" />
<mat-error *ngIf="wfConfFormStep2.get('priority')?.invalid">Numeric value (range: 1-100)</mat-error>
</mat-form-field>
</mat-card-content>
</mat-card>
<div>
<button mat-stroked-button color="primary" matStepperPrevious>Back</button>
<button mat-stroked-button color="primary" matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step [stepControl]="wfConfFormStep3" label="Worflow Parameters">
<form [formGroup]="wfConfFormStep3">
<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>
<div>
<button mat-stroked-button color="primary" matStepperPrevious>Back</button>
<button mat-stroked-button color="primary" matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step [stepControl]="wfConfFormStep4" label="Scheduling">
<form [formGroup]="wfConfFormStep4">
<section>
<mat-checkbox formControlName="schedulingEnabled">Enabled</mat-checkbox>
</section>
<div *ngIf="wfConfForm.get('schedulingEnabled')?.value">
<div *ngIf="wfConfFormStep4.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
<mat-error *ngIf="wfConfFormStep4.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
<mat-label>Min Interval (in minutes)</mat-label>
<input matInput formControlName="cronMinInterval" type="number" step="10" min="10" max="10080" />
<mat-error *ngIf="wfConfFormStep4.get('cronMinInterval')?.invalid">This field is
<strong>required</strong></mat-error>
</mat-form-field>
</div>
</mat-card-content>
</mat-card>
<div>
<button mat-stroked-button color="primary" matStepperPrevious>Back</button>
<button mat-stroked-button color="primary" matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step>
<ng-template matStepLabel>Done</ng-template>
<p>You are now done.</p>
<div>
<form [formGroup]="wfConfFormFinal" (ngSubmit)="onSubmit()">
<button mat-stroked-button color="primary" type="submit">Submit</button>
<mat-error *ngIf="wfConfFormFinal.errors?.['serverError']">
{{ wfConfFormFinal.errors?.['serverError'] }}
</mat-error>
</form>
</div>
</mat-step>
</mat-vertical-stepper>
</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>

46
frontends/dnet-is-application/src/app/wf-confs/wf-confs.component.ts
View File

@ -57,7 +57,7 @@ export class WfConfsComponent implements OnInit {
priority: 75,
workflow: '',
schedulingEnabled: false,
cronExpression: '',
cronExpression: '0 30 12 1/1 * ?',
cronMinInterval: 9600,
details: new Map,
configured: true,
@ -79,35 +79,51 @@ export class WfConfsComponent implements OnInit {
styleUrls: ['./wf-confs.component.css']
})
export class WfConfDialog {
wfConfForm = new FormGroup({
wfConfFormStep1 = new FormGroup({
workflow: new FormControl('', [Validators.required]),
});
wfConfFormStep2 = 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]),
});
wfConfFormStep3 = new FormGroup({
//systemParams: Map<string, string>,
//userParams: Map<string, string>
});
wfConfFormStep4 = new FormGroup({
schedulingEnabled: new FormControl(false, [Validators.required]),
cronExpression: new FormControl("", [Validators.required]),
cronMinInterval: new FormControl("", [Validators.required]),
});
wfConfFormFinal = new FormGroup({});
constructor(public dialogRef: MatDialogRef<ResMetadataDialog>, @Inject(MAT_DIALOG_DATA) public data: any, public service: ISService) {
this.wfConfForm.get('name')?.setValue(data.name);
this.wfConfFormStep1.get('workflow')?.setValue(data.workflow);
this.wfConfFormStep2.get('name')?.setValue(data.name);
this.wfConfFormStep2.get('enabled')?.setValue(data.enabled);
this.wfConfFormStep2.get('priority')?.setValue(data.priority);
//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
this.wfConfFormStep4.get('schedulingEnabled')?.setValue(data.schedulingEnabled);
this.wfConfFormStep4.get('cronExpression')?.setValue(data.cronExpression);
this.wfConfFormStep4.get('cronMinInterval')?.setValue(data.cronMinInterval);
}
onSubmit(): void {
const conf = Object.assign({}, this.data, this.wfConfForm.value);
this.service.saveWfConfiguration(conf, (data: void) => this.dialogRef.close(1), this.wfConfForm);
const conf = Object.assign({}, this.data, this.wfConfFormStep1.value, this.wfConfFormStep2.value, this.wfConfFormStep3.value, this.wfConfFormStep4.value);
this.service.saveWfConfiguration(conf, (data: void) => this.dialogRef.close(1), this.wfConfFormFinal);
}
onNoClick(): void {