#57 converted template-driven form in reactive form

quartz-manager-frontend/src/app/components/simple-trigger-config/simple-trigger-config.component.html

@@ -5,68 +5,76 @@
 
   <mat-card-content *ngIf="shouldShowTheTriggerCardContent()">
     <div fxLayout="column">
-        <form name="configForm" fxFlex="1 1 100%" #configForm="ngForm">
+      <form name="triggerConfigForm" fxFlex="1 1 100%"
+            [formGroup]="simpleTriggerReactiveForm" (ngSubmit)="onSubmitTriggerConfig()">
+        <div>
+          <mat-form-field
+            [appearance]="enabledTriggerForm && !trigger ? 'standard': 'none'"
+            class="full-size-input">
+            <mat-label>Trigger Name *</mat-label>
+            <input id="triggerName"
+                   [readonly]="!enabledTriggerForm || trigger"
+                   matInput placeholder="name of the trigger (unique)"
+                   formControlName="triggerName" name="triggerName">
+          </mat-form-field>
+        </div>
 
+        <div>
+          <mat-form-field
+            [appearance]="enabledTriggerForm ? 'standard': 'none'"
+            class="full-size-input"
+          >
+            <mat-label>Job Class *</mat-label>
+            <mat-select id="jobClass" name="jobClass" formControlName="jobClass" [disabled]="!enabledTriggerForm">
+              <mat-option *ngFor="let job of jobs" [value]="job">
+                {{job}}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+        </div>
+
+        <div>
+          <mat-form-field
+            [appearance]="enabledTriggerForm ? 'standard': 'none'"
+            class="full-size-input"
+          >
+            <mat-label>Misfire Instruction *</mat-label>
+            <mat-select id="misfireInstruction" name="misfireInstruction" formControlName="misfireInstruction"
+                        [disabled]="!enabledTriggerForm">
+              <mat-option value="MISFIRE_INSTRUCTION_FIRE_NOW">FIRE NOW</mat-option>
+              <mat-option value="MISFIRE_INSTRUCTION_RESCHEDULE_NOW_WITH_EXISTING_REPEAT_COUNT">RESCHEDULE NOW WITH
+                EXISTING REPEAT COUNT
+              </mat-option>
+              <mat-option value="MISFIRE_INSTRUCTION_RESCHEDULE_NOW_WITH_REMAINING_REPEAT_COUNT">RESCHEDULE NOW WITH
+                REMAINING REPEAT COUNT
+              </mat-option>
+              <mat-option value="MISFIRE_INSTRUCTION_RESCHEDULE_NEXT_WITH_REMAINING_COUNT">RESCHEDULE NEXT WITH
+                REMAINING COUNT
+              </mat-option>
+              <mat-option value="MISFIRE_INSTRUCTION_RESCHEDULE_NEXT_WITH_EXISTING_COUNT">RESCHEDULE NEXT WITH EXISTING
+                COUNT
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+          <div class="small" [innerHTML]="getMisfireInstructionCaption()"></div>
+        </div>
+
+        <br/>
+
+        <div formGroupName="triggerPeriod">
           <div>
             <mat-form-field
-                [appearance]="enabledTriggerForm && !trigger ? 'standard': 'none'"
-                class="full-size-input">
-              <mat-label>Trigger Name</mat-label>
-              <input  id="triggerName"
-                      [readonly]="!enabledTriggerForm || trigger"
-                      matInput placeholder="name of the trigger (unique)" name="triggerName"
-                      [(ngModel)]="simpleTriggerForm.triggerName">
-            </mat-form-field>
-          </div>
-
-          <div>
-            <mat-form-field
-                [appearance]="enabledTriggerForm ? 'standard': 'none'"
-                class="full-size-input"
-            >
-              <mat-label>Job Class</mat-label>
-              <mat-select id="jobClass" name="jobClass" [(ngModel)]="simpleTriggerForm.jobClass" [disabled]="!enabledTriggerForm">
-                <mat-option *ngFor="let job of jobs" [value]="job">
-                  {{job}}
-                </mat-option>
-              </mat-select>
-            </mat-form-field>
-          </div>
-
-          <div>
-            <mat-form-field
-                [appearance]="enabledTriggerForm ? 'standard': 'none'"
-                class="full-size-input"
+              [appearance]="enabledTriggerForm ? 'standard': 'none'"
+              class="full-size-input"
             >
               <mat-label>Start Date (optional)</mat-label>
               <input id="startDate"
                      [readonly]="!enabledTriggerForm"
-                     matInput name="startDate"
+                     matInput
                      [ngxMatDatetimePicker]="startDatePicker" placeholder="Choose a start date"
-                     [(ngModel)]="simpleTriggerForm.startDate">
+                     formControlName="startDate" name="startDate">
               <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
               <ngx-mat-datetime-picker #startDatePicker showSpinners="true" showSeconds="true">
-<!--                                       [stepHour]="stepHour"-->
-<!--                                       [stepMinute]="stepMinute" [stepSecond]="stepSecond" [touchUi]="touchUi" [color]="color"-->
-<!--                                       [enableMeridian]="enableMeridian" [disableMinute]="disableMinute" [hideTime]="hideTime">-->
-              </ngx-mat-datetime-picker>
-            </mat-form-field>
-          </div>
-
-          <div>
-            <mat-form-field
-                [appearance]="enabledTriggerForm ? 'standard': 'none'"
-                class="full-size-input"
-            >
-              <mat-label>End Date (optional)</mat-label>
-              <input id="endDate"
-                     [readonly]="!enabledTriggerForm"
-                     matInput name="endDate"
-                     [ngxMatDatetimePicker]="endDatePicker" placeholder="Choose a end date"
-                     [(ngModel)]="simpleTriggerForm.endDate"
-              >
-              <mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
-              <ngx-mat-datetime-picker #endDatePicker showSpinners="true" showSeconds="true">
                 <!--                                       [stepHour]="stepHour"-->
                 <!--                                       [stepMinute]="stepMinute" [stepSecond]="stepSecond" [touchUi]="touchUi" [color]="color"-->
                 <!--                                       [enableMeridian]="enableMeridian" [disableMinute]="disableMinute" [hideTime]="hideTime">-->
@@ -76,27 +84,37 @@
 
           <div>
             <mat-form-field
-                  [appearance]="enabledTriggerForm ? 'standard': 'none'"
-                  class="full-size-input"
+              [appearance]="enabledTriggerForm ? 'standard': 'none'"
+              class="full-size-input"
+            >
+              <mat-label>End Date (optional)</mat-label>
+              <input id="endDate"
+                     [readonly]="!enabledTriggerForm"
+                     matInput
+                     [ngxMatDatetimePicker]="endDatePicker" placeholder="Choose a end date"
+                     formControlName="endDate" name="endDate"
+              >
+              <mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
+              <ngx-mat-datetime-picker #endDatePicker showSpinners="true" showSeconds="true">
+                <!--                                       [stepHour]="stepHour"-->
+                <!--                                       [stepMinute]="stepMinute" [stepSecond]="stepSecond" [touchUi]="touchUi" [color]="color"-->
+                <!--                                       [enableMeridian]="enableMeridian" [disableMinute]="disableMinute" [hideTime]="hideTime">-->
+              </ngx-mat-datetime-picker>
+            </mat-form-field>
+          </div>
+        </div>
+
+        <div formGroupName="triggerRecurrence">
+          <div>
+            <mat-form-field
+              [appearance]="enabledTriggerForm ? 'standard': 'none'"
+              class="full-size-input"
             >
               <mat-label>Repeat Interval [in mills]</mat-label>
               <input id="repeatInterval"
                      [readonly]="!enabledTriggerForm"
-                     matInput placeholder="Repeat Interval [in mills]" name="repeatInterval" type="number"
-                     [(ngModel)]="simpleTriggerForm.repeatInterval"
-              >
-            </mat-form-field>
-          </div>
-          <div>
-            <mat-form-field
-                  [appearance]="enabledTriggerForm ? 'standard': 'none'"
-                  class="full-size-input"
-            >
-              <mat-label>Repeat Count</mat-label>
-              <input id="repeatCount"
-                     [readonly]="!enabledTriggerForm"
-                     matInput placeholder="Repeat Count (-1 REPEAT INDEFINITELY)" name="repeatCount" type="number"
-                     [(ngModel)]="simpleTriggerForm.repeatCount"
+                     matInput placeholder="Repeat Interval [in mills]" type="number"
+                     formControlName="repeatInterval" name="repeatInterval"
               >
             </mat-form-field>
           </div>
@@ -106,38 +124,36 @@
               [appearance]="enabledTriggerForm ? 'standard': 'none'"
               class="full-size-input"
             >
-              <mat-label>Misfire Instruction</mat-label>
-              <mat-select id="misfireInstruction" name="misfireInstruction" [(ngModel)]="simpleTriggerForm.misfireInstruction" [disabled]="!enabledTriggerForm">
-                <mat-option value="MISFIRE_INSTRUCTION_FIRE_NOW">FIRE NOW</mat-option>
-                <mat-option value="MISFIRE_INSTRUCTION_RESCHEDULE_NOW_WITH_EXISTING_REPEAT_COUNT">RESCHEDULE NOW WITH EXISTING REPEAT COUNT</mat-option>
-                <mat-option value="MISFIRE_INSTRUCTION_RESCHEDULE_NOW_WITH_REMAINING_REPEAT_COUNT">RESCHEDULE NOW WITH REMAINING REPEAT COUNT</mat-option>
-                <mat-option value="MISFIRE_INSTRUCTION_RESCHEDULE_NEXT_WITH_REMAINING_COUNT">RESCHEDULE NEXT WITH REMAINING COUNT</mat-option>
-                <mat-option value="MISFIRE_INSTRUCTION_RESCHEDULE_NEXT_WITH_EXISTING_COUNT">RESCHEDULE NEXT WITH EXISTING COUNT</mat-option>
-              </mat-select>
+              <mat-label>Repeat Count</mat-label>
+              <input id="repeatCount"
+                     [readonly]="!enabledTriggerForm"
+                     matInput placeholder="Repeat Count (-1 REPEAT INDEFINITELY)" type="number"
+                     formControlName="repeatCount" name="repeatCount"
+              >
             </mat-form-field>
-            <div class="small" [innerHTML]="getMisfireInstructionCaption()"> </div>
           </div>
+        </div>
 
-          <br><br>
+        <button mat-raised-button
+                type="button"
+                *ngIf="enabledTriggerForm"
+                (click)="onResetReactiveForm()">
+          Cancel
+        </button>
+        <button mat-raised-button
+                type="submit" color="primary"
+                [disabled]="!simpleTriggerReactiveForm.valid"
+                *ngIf="enabledTriggerForm">
+          Submit
+        </button>
+        <button mat-raised-button type="button"
+                *ngIf="!enabledTriggerForm"
+                (click)="enabledTriggerForm = true">
+          Reschedule
+        </button>
+
+      </form>
+    </div>
 
-          <button mat-raised-button
-                  type="button"
-                  *ngIf="enabledTriggerForm"
-                  (click)="cancelConfigForm()">
-            Cancel
-          </button>
-          <button mat-raised-button
-              type="button" color="primary"
-                  *ngIf="enabledTriggerForm"
-              (click)="submitConfig()">
-              Submit
-          </button>
-          <button mat-raised-button type="button"
-                  *ngIf="!enabledTriggerForm"
-                  (click)="enabledTriggerForm = true">
-            Reschedule
-          </button>
-        </form>
-      </div>
   </mat-card-content>
 </mat-card>

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<SimpleTrigger>();
 
   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;
+}

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;
 }

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;
   }