From 121f2e364f23177d14d19b90f6e7d801faf8558e Mon Sep 17 00:00:00 2001 From: Fabio Formosa Date: Wed, 2 Nov 2022 20:18:50 +0100 Subject: [PATCH] #57 converted template-driven form in reactive form --- .../simple-trigger-config.component.html | 212 ++++++++++-------- .../simple-trigger-config.component.ts | 103 ++++++--- .../src/app/model/trigger.model.ts | 4 +- .../src/app/model/triggerKey.model.ts | 2 +- 4 files changed, 194 insertions(+), 127 deletions(-) diff --git a/quartz-manager-frontend/src/app/components/simple-trigger-config/simple-trigger-config.component.html b/quartz-manager-frontend/src/app/components/simple-trigger-config/simple-trigger-config.component.html index fc9d603..a979858 100644 --- a/quartz-manager-frontend/src/app/components/simple-trigger-config/simple-trigger-config.component.html +++ b/quartz-manager-frontend/src/app/components/simple-trigger-config/simple-trigger-config.component.html @@ -5,68 +5,76 @@
-
+ +
+ + Trigger Name * + + +
+
+ + Job Class * + + + {{job}} + + + +
+ +
+ + Misfire Instruction * + + FIRE NOW + RESCHEDULE NOW WITH + EXISTING REPEAT COUNT + + RESCHEDULE NOW WITH + REMAINING REPEAT COUNT + + RESCHEDULE NEXT WITH + REMAINING COUNT + + RESCHEDULE NEXT WITH EXISTING + COUNT + + + +
+
+ +
+ +
- Trigger Name - - -
- -
- - Job Class - - - {{job}} - - - -
- -
- Start Date (optional) + formControlName="startDate" name="startDate"> - - - - - -
- -
- - End Date (optional) - - - @@ -76,27 +84,37 @@
+ End Date (optional) + + + + + + + + +
+
+ +
+
+ Repeat Interval [in mills] - -
-
- - Repeat Count -
@@ -106,38 +124,36 @@ [appearance]="enabledTriggerForm ? 'standard': 'none'" class="full-size-input" > - Misfire Instruction - - FIRE NOW - RESCHEDULE NOW WITH EXISTING REPEAT COUNT - RESCHEDULE NOW WITH REMAINING REPEAT COUNT - RESCHEDULE NEXT WITH REMAINING COUNT - RESCHEDULE NEXT WITH EXISTING COUNT - + Repeat Count + -
+
-

+ + + + +
+
- - - - - diff --git a/quartz-manager-frontend/src/app/components/simple-trigger-config/simple-trigger-config.component.ts b/quartz-manager-frontend/src/app/components/simple-trigger-config/simple-trigger-config.component.ts index 3a18050..9d7dc97 100644 --- a/quartz-manager-frontend/src/app/components/simple-trigger-config/simple-trigger-config.component.ts +++ b/quartz-manager-frontend/src/app/components/simple-trigger-config/simple-trigger-config.component.ts @@ -8,6 +8,7 @@ import * as moment from 'moment'; import {TriggerKey} from '../../model/triggerKey.model'; import JobService from '../../services/job.service'; import {MisfireInstruction, MisfireInstructionCaption} from '../../model/misfire-instruction.model'; +import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms'; @Component({ selector: 'qrzmng-simple-trigger-config', @@ -16,10 +17,25 @@ import {MisfireInstruction, MisfireInstructionCaption} from '../../model/misfire }) export class SimpleTriggerConfigComponent implements OnInit { - simpleTriggerForm: SimpleTriggerForm = new SimpleTriggerForm(); - formBackup: SimpleTriggerForm = new SimpleTriggerForm(); - trigger: SimpleTrigger; + + simpleTriggerReactiveForm: FormGroup = this.formBuilder.group({ + triggerName: [this.trigger?.triggerKeyDTO.name, Validators.required], + jobClass: [this.trigger?.jobDetailDTO.jobClassName, Validators.required], + triggerPeriod: this.formBuilder.group({ + startDate: [this.trigger?.startTime && moment(this.trigger?.startTime)], + endDate: [this.trigger?.endTime && moment(this.trigger?.endTime)] + }), + triggerRecurrence: this.formBuilder.group({ + repeatCount: [this.trigger?.repeatCount], + repeatInterval: [this.trigger?.repeatInterval] + }), + misfireInstruction: [MisfireInstruction[this.trigger?.misfireInstruction], Validators.required] + }); + + // simpleTriggerForm: SimpleTriggerForm = new SimpleTriggerForm(); + // formBackup: SimpleTriggerForm = new SimpleTriggerForm(); + scheduler: Scheduler; triggerLoading = true; @@ -37,9 +53,11 @@ export class SimpleTriggerConfigComponent implements OnInit { onNewTrigger = new EventEmitter(); constructor( + private formBuilder: FormBuilder, private schedulerService: SchedulerService, private jobService: JobService - ) { } + ) { + } ngOnInit() { this.fetchJobs(); @@ -50,7 +68,7 @@ export class SimpleTriggerConfigComponent implements OnInit { } openTriggerForm() { - this.enabledTriggerForm = true; + this.enabledTriggerForm = true; } private closeTriggerForm() { @@ -58,7 +76,7 @@ export class SimpleTriggerConfigComponent implements OnInit { } @Input() - set triggerKey(triggerKey: TriggerKey){ + set triggerKey(triggerKey: TriggerKey) { this.selectedTriggerKey = {...triggerKey} as TriggerKey; this.fetchSelectedTrigger(); } @@ -68,11 +86,12 @@ export class SimpleTriggerConfigComponent implements OnInit { this.triggerLoading = true; this.schedulerService.getSimpleTriggerConfig(this.selectedTriggerKey.name) .subscribe((retTrigger: SimpleTrigger) => { - this.trigger = retTrigger; - this.formBackup = this.simpleTriggerForm; - this.simpleTriggerForm = this._fromTriggerToForm(retTrigger); - this.triggerLoading = false; - this.triggerInProgress = this.trigger.mayFireAgain; + this.trigger = retTrigger; + this.simpleTriggerReactiveForm.setValue(this._fromTriggerToReactiveForm(retTrigger)) + // this.formBackup = this.simpleTriggerForm; + // this.simpleTriggerForm = this._fromTriggerToForm(retTrigger); + this.triggerLoading = false; + this.triggerInProgress = this.trigger.mayFireAgain; }) } @@ -80,18 +99,22 @@ export class SimpleTriggerConfigComponent implements OnInit { existsATriggerInProgress = (): boolean => this.trigger && this.triggerInProgress; - cancelConfigForm = () => this.enabledTriggerForm = false; + onResetReactiveForm = () => { + this.simpleTriggerReactiveForm.setValue(this._fromTriggerToReactiveForm(this.trigger)); + this.closeTriggerForm(); + }; - submitConfig = () => { + onSubmitTriggerConfig = () => { const schedulerServiceCall = this.existsATriggerInProgress() ? this.schedulerService.updateSimpleTriggerConfig : this.schedulerService.saveSimpleTriggerConfig; - const simpleTriggerCommand = this._fromFormToCommand(this.simpleTriggerForm); + const simpleTriggerCommand = this._fromReactiveFormToCommand(); schedulerServiceCall(simpleTriggerCommand) .subscribe((retTrigger: SimpleTrigger) => { this.trigger = retTrigger; - this.formBackup = this.simpleTriggerForm; - this.simpleTriggerForm = this._fromTriggerToForm(retTrigger); + + this.simpleTriggerReactiveForm.setValue(this._fromTriggerToReactiveForm(retTrigger)); + this.fetchedTriggers = true; this.triggerInProgress = this.trigger.mayFireAgain; @@ -101,8 +124,21 @@ export class SimpleTriggerConfigComponent implements OnInit { this.closeTriggerForm(); }, error => { - this.simpleTriggerForm = this.formBackup; + this.simpleTriggerReactiveForm.setValue(this._fromTriggerToReactiveForm(this.trigger)); }); + + } + + private _fromTriggerToReactiveForm = (simpleTrigger: SimpleTrigger): SimpleTriggerReactiveForm => { + const simpleTriggerReactiveForm = new SimpleTriggerReactiveForm(); + simpleTriggerReactiveForm.triggerName = simpleTrigger.triggerKeyDTO.name; + simpleTriggerReactiveForm.jobClass = simpleTrigger.jobDetailDTO.jobClassName; + simpleTriggerReactiveForm.triggerRecurrence.repeatCount = simpleTrigger.repeatCount; + simpleTriggerReactiveForm.triggerRecurrence.repeatInterval = simpleTrigger.repeatInterval; + simpleTriggerReactiveForm.triggerPeriod.startDate = simpleTrigger.startTime && moment(simpleTrigger.startTime); + simpleTriggerReactiveForm.triggerPeriod.endDate = simpleTrigger.endTime && moment(simpleTrigger.endTime); + simpleTriggerReactiveForm.misfireInstruction = MisfireInstruction[simpleTrigger.misfireInstruction]; + return simpleTriggerReactiveForm; }; private _fromTriggerToForm = (simpleTrigger: SimpleTrigger): SimpleTriggerForm => { @@ -117,20 +153,35 @@ export class SimpleTriggerConfigComponent implements OnInit { return command; } - private _fromFormToCommand = (simpleTriggerForm: SimpleTriggerForm): SimpleTriggerCommand => { + private _fromReactiveFormToCommand = (): SimpleTriggerCommand => { + const reactiveFormValue = this.simpleTriggerReactiveForm.value; const simpleTriggerCommand = new SimpleTriggerCommand(); - simpleTriggerCommand.triggerName = simpleTriggerForm.triggerName; - simpleTriggerCommand.jobClass = simpleTriggerForm.jobClass; - simpleTriggerCommand.repeatCount = simpleTriggerForm.repeatCount; - simpleTriggerCommand.repeatInterval = simpleTriggerForm.repeatInterval; - simpleTriggerCommand.startDate = simpleTriggerForm.startDate?.toDate(); - simpleTriggerCommand.endDate = simpleTriggerForm.endDate?.toDate(); - simpleTriggerCommand.misfireInstruction = simpleTriggerForm.misfireInstruction; + simpleTriggerCommand.triggerName = reactiveFormValue.triggerName; + simpleTriggerCommand.jobClass = reactiveFormValue.jobClass; + simpleTriggerCommand.repeatCount = reactiveFormValue.triggerRecurrence.repeatCount; + simpleTriggerCommand.repeatInterval = reactiveFormValue.triggerRecurrence.repeatInterval; + simpleTriggerCommand.startDate = reactiveFormValue.triggerPeriod.startDate?.toDate(); + simpleTriggerCommand.endDate = reactiveFormValue.triggerPeriod.endDate?.toDate(); + simpleTriggerCommand.misfireInstruction = reactiveFormValue.misfireInstruction; return simpleTriggerCommand; } getMisfireInstructionCaption(): string { - const misfireInstructionKey = this.simpleTriggerForm.misfireInstruction as unknown as keyof typeof MisfireInstruction; + const misfireInstructionKey = this.simpleTriggerReactiveForm.controls.misfireInstruction.value as unknown as keyof typeof MisfireInstruction; return MisfireInstructionCaption.get(MisfireInstruction[misfireInstructionKey]); } } + +class SimpleTriggerReactiveForm { + triggerName: string; + jobClass: string; + triggerPeriod: { + startDate?; + endDate?; + } = {}; + triggerRecurrence: { + repeatCount?: number; + repeatInterval?: number; + } = {}; + misfireInstruction: string; +} diff --git a/quartz-manager-frontend/src/app/model/trigger.model.ts b/quartz-manager-frontend/src/app/model/trigger.model.ts index d49906d..8d4db4b 100644 --- a/quartz-manager-frontend/src/app/model/trigger.model.ts +++ b/quartz-manager-frontend/src/app/model/trigger.model.ts @@ -3,7 +3,7 @@ import {JobKeyModel} from './jobKey.model'; import {JobDetail} from './jobDetail.model'; export class Trigger { - triggerKeyDTO: TriggerKey; + triggerKeyDTO: TriggerKey = new TriggerKey(); priority: number; startTime: Date; description: string; @@ -12,6 +12,6 @@ export class Trigger { misfireInstruction: number; nextFireTime: Date; jobKeyDTO: JobKeyModel; - jobDetailDTO: JobDetail; + jobDetailDTO: JobDetail = new JobDetail(); mayFireAgain: boolean; } diff --git a/quartz-manager-frontend/src/app/model/triggerKey.model.ts b/quartz-manager-frontend/src/app/model/triggerKey.model.ts index 5c3e156..666b18b 100644 --- a/quartz-manager-frontend/src/app/model/triggerKey.model.ts +++ b/quartz-manager-frontend/src/app/model/triggerKey.model.ts @@ -2,7 +2,7 @@ export class TriggerKey { name: string; group: string; - constructor(name: string, group: string) { + constructor(name?: string, group?: string) { this.name = name; this.group = group; }