feat: add edit scheduler job component (#678)

Fixes: #677

src/app/system/manage-scheduler-jobs/edit-scheduler-job/edit-scheduler-job.component.html

@@ -0,0 +1,44 @@
+<div class="container">
+
+  <mat-card>
+
+    <form [formGroup]="jobForm" (ngSubmit)="submit()">
+
+      <mat-card-content>
+
+        <div fxLayout="column">
+
+          <mat-form-field>
+            <mat-label>Job Name</mat-label>
+            <input matInput required formControlName="displayName">
+            <mat-error *ngIf="jobForm.controls.displayName.hasError('required')">
+              Job Name is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field>
+            <mat-label>Cron Expression</mat-label>
+            <input matInput required formControlName="cronExpression">
+            <mat-error *ngIf="jobForm.controls.cronExpression.hasError('required')">
+              Cron Expression is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-checkbox labelPosition="before" formControlName="active">
+            Is job active?
+          </mat-checkbox>
+  
+        </div>
+
+        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+          <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+          <button mat-raised-button color="primary" [disabled]="!jobForm.valid">Submit</button>
+        </mat-card-actions>
+  
+      </mat-card-content>
+
+    </form>
+
+  </mat-card>
+
+</div>

src/app/system/manage-scheduler-jobs/edit-scheduler-job/edit-scheduler-job.component.scss

@@ -0,0 +1,3 @@
+.container {
+  max-width: 37rem;
+}

src/app/system/manage-scheduler-jobs/edit-scheduler-job/edit-scheduler-job.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditSchedulerJobComponent } from './edit-scheduler-job.component';
+
+describe('EditSchedulerJobComponent', () => {
+  let component: EditSchedulerJobComponent;
+  let fixture: ComponentFixture<EditSchedulerJobComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EditSchedulerJobComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditSchedulerJobComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/system/manage-scheduler-jobs/edit-scheduler-job/edit-scheduler-job.component.ts

@@ -0,0 +1,68 @@
+/** Angular Imports */
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { FormBuilder, Validators } from '@angular/forms';
+
+/** Custom Services */
+import { SystemService } from 'app/system/system.service';
+
+/**
+ * Edit scheduler job component.
+ */
+@Component({
+  selector: 'mifosx-edit-scheduler-job',
+  templateUrl: './edit-scheduler-job.component.html',
+  styleUrls: ['./edit-scheduler-job.component.scss']
+})
+export class EditSchedulerJobComponent implements OnInit {
+
+  /** Job Data. */
+  jobData: any;
+  /** Job Form. */
+  jobForm: any;
+
+  /**
+   * Retrieves the selected job data from `resolve`.
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {SystemService} systemService System Service.
+   * @param {Router} router Router for navigation.
+   * @param {ActivatedRoute} route Activated Route.
+   */
+  constructor(private route: ActivatedRoute,
+              private systemService: SystemService,
+              private router: Router,
+              private formBuilder: FormBuilder ) {
+    this.route.data.subscribe((data: { jobSelected: any }) => {
+      this.jobData = data.jobSelected;
+    });
+  }
+
+  /**
+   * Creates and sets job form.
+   */
+  ngOnInit() {
+    this.createJobForm();
+  }
+
+  /**
+   * Creates and sets job form.
+   */
+  createJobForm() {
+    this.jobForm = this.formBuilder.group({
+      'displayName': [this.jobData.displayName, Validators.required],
+      'cronExpression': [this.jobData.cronExpression, Validators.required],
+      'active': [this.jobData.active]
+    });
+  }
+
+  /**
+   * Submits the edit job form.
+   */
+  submit() {
+    this.systemService.updateScheduler(this.jobData.jobId, this.jobForm.value)
+      .subscribe(() => {
+        this.router.navigate(['../'], { relativeTo: this.route });
+    });
+  }
+
+}

src/app/system/manage-scheduler-jobs/manage-scheduler-job.resolver.ts

@@ -0,0 +1,31 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable} from 'rxjs';
+
+/** Custom Services */
+import { SystemService } from '../system.service';
+
+/**
+ * Edit Scheduler Job data resolver.
+ */
+@Injectable()
+export class ManageSchedulerJobResolver implements Resolve<Object> {
+
+  /**
+   * @param {SystemService} systemService System service.
+   */
+  constructor(private systemService: SystemService) {}
+
+  /**
+   * Returns the edit scheduler jobs data.
+   * @returns {Observable<any>}
+   */
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    const jobId = route.paramMap.get('id');
+    return this.systemService.getSelectedJob(jobId);
+  }
+
+}

src/app/system/system-routing.module.ts

@@ -73,6 +73,8 @@ import { ReportResolver } from './manage-reports/report.resolver';
 import { ReportTemplateResolver } from './manage-reports/report-template.resolver';
 import { ViewSchedulerJobComponent } from './manage-scheduler-jobs/view-scheduler-job/view-scheduler-job.component';
 import { ViewSchedulerJobResolver } from './manage-scheduler-jobs/view-scheduler-job/view-scheduler-job.resolver';
+import { EditSchedulerJobComponent } from './manage-scheduler-jobs/edit-scheduler-job/edit-scheduler-job.component';
+import { ManageSchedulerJobResolver } from './manage-scheduler-jobs/manage-scheduler-job.resolver';
 
 const routes: Routes = [
   Route.withShell([
@@ -345,10 +347,23 @@ const routes: Routes = [
           {
             path: ':id',
             data: { title: extract('View Scheduler Job'), routeParamBreadcrumb: 'id' },
-            component: ViewSchedulerJobComponent,
-            resolve: {
-              selectedJob: ViewSchedulerJobResolver
-            }
+            children: [
+              {
+                path: '',
+                component: ViewSchedulerJobComponent,
+                resolve: {
+                  selectedJob: ViewSchedulerJobResolver
+                }
+              },
+              {
+                path: 'edit',
+                component: EditSchedulerJobComponent,
+                data: { title: extract('Edit Scheduler Job'), routeParamBreadcrumb: false, breadcrumb: 'Edit' },
+                resolve: {
+                  jobSelected: ManageSchedulerJobResolver
+                }
+              }
+            ]
           }
         ],
       },
@@ -514,7 +529,8 @@ const routes: Routes = [
     ReportTemplateResolver,
     AuditTrailSearchTemplateResolver,
     AuditTrailResolver,
-    ViewSchedulerJobResolver
+    ViewSchedulerJobResolver,
+    ManageSchedulerJobResolver
   ]
 })
 export class SystemRoutingModule { }

src/app/system/system.module.ts

@@ -50,6 +50,7 @@ import { ColumnDialogComponent } from './manage-data-tables/column-dialog/column
 import { ReportParameterDialogComponent } from './manage-reports/report-parameter-dialog/report-parameter-dialog.component';
 import { AddEventDialogComponent } from './manage-hooks/add-event-dialog/add-event-dialog.component';
 import { ViewSchedulerJobComponent } from './manage-scheduler-jobs/view-scheduler-job/view-scheduler-job.component';
+import { EditSchedulerJobComponent } from './manage-scheduler-jobs/edit-scheduler-job/edit-scheduler-job.component';
 
 @NgModule({
   imports: [
@@ -98,7 +99,8 @@ import { ViewSchedulerJobComponent } from './manage-scheduler-jobs/view-schedule
     ColumnDialogComponent,
     AuditTrailsComponent,
     ViewAuditComponent,
-    ViewSchedulerJobComponent
+    ViewSchedulerJobComponent,
+    EditSchedulerJobComponent
   ],
   entryComponents: [
     ReportParameterDialogComponent,

src/app/system/system.service.ts

@@ -177,11 +177,20 @@ export class SystemService {
   }
 
   /**
-   * @param jobId  Selected Job Id
+   * @param jobId Job Id to be edited
+   * @returns {Observable<any>} Fetches Scheduler Job.
+   */
+  getSelectedJob(jobId: string): Observable<any> {
+    return this.http.get(`/jobs/${jobId}`);
+  }
+
+  /**
+   * @param {string} jobId Job ID of Job to be updated.
+   * @param {any} Job Job to be updated.
    * @returns {Observable<any>}
    */
-  getSelectedJob(jobId: string) {
-    return this.http.get(`/jobs/${jobId}`);
+  updateScheduler(jobId: string, job: any): Observable<any> {
+    return this.http.put(`/jobs/${jobId}`, job);
   }
 
   /**