feat: add edit holiday component (#783)

Fixes: #750

src/app/organization/holidays/edit-holiday/edit-holiday.component.html

@@ -0,0 +1,79 @@
+<div class="container">
+
+  <mat-card>
+
+    <form [formGroup]="holidayForm" (ngSubmit)="submit()">
+
+      <mat-card-content>
+
+        <div fxLayout="column">
+
+          <mat-form-field>
+            <mat-label>Name</mat-label>
+            <input matInput required autofocus formControlName="name">
+            <mat-error *ngIf="holidayForm.controls.name.hasError('required')">
+              Name <strong>is required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field *ngIf="!isActiveHoliday">
+            <mat-label>From Date</mat-label>
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="fromDatePicker" required formControlName="fromDate">
+            <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #fromDatePicker></mat-datepicker>
+            <mat-error *ngIf="holidayForm.controls.fromDate.hasError('required')">
+              From Date <strong>is required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field *ngIf="!isActiveHoliday">
+            <mat-label>To Date</mat-label>
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="toDatePicker" required formControlName="toDate">
+            <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #toDatePicker></mat-datepicker>
+            <mat-error *ngIf="holidayForm.controls.toDate.hasError('required')">
+              To Date <strong>is required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field *ngIf="!isActiveHoliday">
+            <mat-label>Repayment Scheduling Type</mat-label>
+            <mat-select required formControlName="reschedulingType">
+              <mat-option *ngFor="let repayments of holidayData.repaymentSchedulingTypes" [value]="repayments.id">
+                {{ repayments.value }} 
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="holidayForm.controls.reschedulingType.hasError('required')">
+              Repayment Scheduling Type is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field *ngIf="!isActiveHoliday && reSchedulingType === 2">
+            <mat-label>Repayment scheduled to</mat-label>
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="repaymentDatePicker" required formControlName="repaymentsRescheduledTo">
+            <mat-datepicker-toggle matSuffix [for]="repaymentDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #repaymentDatePicker></mat-datepicker>
+            <mat-error *ngIf="holidayForm.controls.repaymentsRescheduledTo.hasError('required')">
+              Repayment Scheduled To <strong>is required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field>
+            <mat-label>Description</mat-label>
+            <input matInput formControlName="description">
+          </mat-form-field>
+
+        </div>
+
+      </mat-card-content>
+
+      <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]="!holidayForm.valid">Submit</button>
+      </mat-card-actions>
+
+    </form>
+
+  </mat-card>
+
+</div>

src/app/organization/holidays/edit-holiday/edit-holiday.component.scss

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

src/app/organization/holidays/edit-holiday/edit-holiday.component.spec.ts

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

src/app/organization/holidays/edit-holiday/edit-holiday.component.ts

@@ -0,0 +1,125 @@
+/** Angular Imports. */
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { DatePipe } from '@angular/common';
+
+/** Custom Services. */
+import { OrganizationService } from 'app/organization/organization.service';
+
+/**
+ * Edit Holiday component.
+ */
+@Component({
+  selector: 'mifosx-edit-holiday',
+  templateUrl: './edit-holiday.component.html',
+  styleUrls: ['./edit-holiday.component.scss']
+})
+export class EditHolidayComponent implements OnInit {
+
+  /** Edit Holiday form. */
+  holidayForm: FormGroup;
+  /** Holiday data. */
+  holidayData: any;
+  /** Rescheduling Type. */
+  reSchedulingType: number;
+  /** Is Active Holiday. */
+  isActiveHoliday = true;
+  /** Minimum Date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum Date allowed. */
+  maxDate = new Date();
+
+  /**
+   * Get holiday and holiday template from `Resolver`.
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {DatePipe} datePipe Date Pipe.
+   * @param {OrganizationService} organizatioService Organization Service.
+   * @param {Router} router Router.
+   */
+  constructor(private formBuilder: FormBuilder,
+              private route: ActivatedRoute,
+              private datePipe: DatePipe,
+              private organizatioService: OrganizationService,
+              private router: Router ) {
+    this.route.data.subscribe((data: { holiday: any, holidayTemplate: any }) => {
+      this.holidayData = data.holiday;
+      this.holidayData.repaymentSchedulingTypes = data.holidayTemplate;
+      this.reSchedulingType = this.holidayData.reschedulingType;
+      if ( this.holidayData.status.value === 'Active' ) {
+        this.isActiveHoliday = true;
+      } else {
+        this.isActiveHoliday = false;
+      }
+    });
+  }
+
+  ngOnInit() {
+    this.setEditForm();
+    if (!this.isActiveHoliday) {
+      this.getReschedulingType();
+    }
+  }
+
+  /**
+   * Sets Edit Form.
+   */
+  setEditForm() {
+    this.holidayForm = this.formBuilder.group({
+      'name': [this.holidayData.name, Validators.required],
+      'description': [this.holidayData.description]
+    });
+    if (!this.isActiveHoliday) {
+      this.holidayForm.addControl('fromDate', new FormControl(this.holidayData.fromDate && new Date(this.holidayData.fromDate), Validators.required));
+      this.holidayForm.addControl('toDate', new FormControl(this.holidayData.toDate && new Date(this.holidayData.toDate), Validators.required));
+      this.holidayForm.addControl('reschedulingType', new FormControl(this.holidayData.reschedulingType, Validators.required));
+      if (this.reSchedulingType === 2) {
+        this.holidayForm.addControl('repaymentsRescheduledTo', new FormControl(this.holidayData.repaymentsRescheduledTo && new Date(this.holidayData.repaymentsRescheduledTo), Validators.required));
+      }
+    }
+  }
+
+  /**
+   * Get Rescheduling Type.
+   */
+  getReschedulingType() {
+    this.holidayForm.get('reschedulingType').valueChanges.subscribe( (option: any) => {
+      this.reSchedulingType = option;
+      if (option === 2) {
+        this.holidayForm.addControl('repaymentsRescheduledTo', new FormControl(new Date(), Validators.required));
+      } else {
+        this.holidayForm.removeControl('repaymentsRescheduledTo');
+      }
+    });
+  }
+
+  /**
+   * Submits Edit Holiday Form.
+   */
+  submit() {
+    const dateFormat = 'yyyy-MM-dd';
+    if (!this.isActiveHoliday) {
+      const fromDate: Date = this.holidayForm.value.fromDate;
+      const toDate: Date = this.holidayForm.value.toDate;
+      if (this.reSchedulingType === 2 ) {
+        const repaymentScheduledTo: Date = this.holidayForm.value.repaymentsRescheduledTo;
+        this.holidayForm.patchValue({
+          repaymentsRescheduledTo: this.datePipe.transform(repaymentScheduledTo, dateFormat)
+        });
+      }
+      this.holidayForm.patchValue({
+        fromDate: this.datePipe.transform(fromDate, dateFormat),
+        toDate: this.datePipe.transform(toDate, dateFormat)
+      });
+    }
+    const holidayForm = this.holidayForm.value;
+    holidayForm.locale = 'en';
+    holidayForm.dateFormat = dateFormat;
+    this.organizatioService.updateHoliday(this.holidayData.id, holidayForm).subscribe(response => {
+      /** TODO Add Redirects to ViewMakerCheckerTask page. */
+      this.router.navigate(['../'], { relativeTo: this.route });
+    });
+  }
+
+}

src/app/organization/holidays/holiday-template.resolver.ts

@@ -0,0 +1,30 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { OrganizationService } from 'app/organization/organization.service';
+
+/**
+ * Holiday data template resolver.
+ */
+@Injectable()
+export class HolidayTemplateResolver implements Resolve<Object> {
+
+  /**
+   * @param {OrganizationService} organizationService Organization service.
+   */
+  constructor(private organizationService: OrganizationService) {}
+
+  /**
+   * Returns the holiday data.
+   * @returns {Observable<any>}
+   */
+  resolve(): Observable<any> {
+    return this.organizationService.getHolidayTemplate();
+  }
+
+}

src/app/organization/holidays/holidays.component.ts

@@ -69,6 +69,7 @@ export class HolidaysComponent implements OnInit {
    */
   onChangeOffice() {
     this.officeSelector.valueChanges.subscribe((officeId = this.officeSelector.value) => {
+      this.holidaysData = [];
       this.organizationService.getHolidays(officeId).subscribe((holidays: any) => {
         this.holidaysData = holidays.filter((holiday: any) => holiday.status.value !== 'Deleted');
         this.setHolidays();

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

@@ -47,6 +47,7 @@ import { AllocateCashComponent } from './tellers/cashiers/allocate-cash/allocate
 import { SettleCashComponent } from './tellers/cashiers/settle-cash/settle-cash.component';
 import { EditCashierComponent } from './tellers/cashiers/edit-cashier/edit-cashier.component';
 import { CreateCashierComponent } from './tellers/cashiers/create-cashier/create-cashier.component';
+import { EditHolidayComponent } from './holidays/edit-holiday/edit-holiday.component';
 
 /** Custom Resolvers */
 import { LoanProvisioningCriteriaResolver } from './loan-provisioning-criteria/loan-provisioning-criteria.resolver';
@@ -80,6 +81,7 @@ import { SmsCampaignResolver } from './sms-campaigns/common-resolvers/sms-campai
 import { ManageFundsResolver } from './manage-funds/manage-funds.resolver';
 import { CashierTransactionTemplateResolver } from './tellers/teller-transaction-template.resolver';
 import { EditCashierResolver } from './tellers/common-resolvers/edit-cashier.resolver';
+import { HolidayTemplateResolver } from './holidays/holiday-template.resolver';
 
 /** Organization Routes */
 const routes: Routes = [
@@ -494,6 +496,15 @@ const routes: Routes = [
                   resolve: {
                     holidays: HolidayResolver
                   }
+                },
+                {
+                  path: 'edit',
+                  component: EditHolidayComponent,
+                  data: { title: extract('Edit Holidays'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
+                  resolve: {
+                    holiday: HolidayResolver,
+                    holidayTemplate: HolidayTemplateResolver
+                  }
                 }
               ]
             }
@@ -541,7 +552,9 @@ const routes: Routes = [
     OfficeDatatablesResolver,
     ManageFundsResolver,
     CashierTransactionTemplateResolver,
-    EditCashierResolver
+    EditCashierResolver,
+    HolidayResolver,
+    HolidayTemplateResolver
   ]
 })
 export class OrganizationRoutingModule { }

src/app/organization/organization.module.ts

@@ -50,6 +50,7 @@ import { SettleCashComponent } from './tellers/cashiers/settle-cash/settle-cash.
 import { AllocateCashComponent } from './tellers/cashiers/allocate-cash/allocate-cash.component';
 import { EditCashierComponent } from './tellers/cashiers/edit-cashier/edit-cashier.component';
 import { CreateCashierComponent } from './tellers/cashiers/create-cashier/create-cashier.component';
+import { EditHolidayComponent } from './holidays/edit-holiday/edit-holiday.component';
 
 /**
  * Organization Module
@@ -105,7 +106,8 @@ import { CreateCashierComponent } from './tellers/cashiers/create-cashier/create
     SettleCashComponent,
     AllocateCashComponent,
     EditCashierComponent,
-    CreateCashierComponent
+    CreateCashierComponent,
+    EditHolidayComponent,
   ]
 })
 export class OrganizationModule { }

src/app/organization/organization.service.ts

@@ -477,6 +477,24 @@ export class OrganizationService {
     return this.http.get(`/holidays/${holidayId}`);
   }
 
+  /**
+   * Get Holiday template.
+   * @returns {Observable<any>} Holiday data.
+   */
+  getHolidayTemplate(): Observable<any> {
+    return this.http.get('/holidays/template');
+  }
+
+  /**
+   * Update Holiday.
+   * @param holidayId Holiday Id to be updated.
+   * @param holidayData Holiday data to be updated.
+   * @returns {Observable<any>}
+   */
+  updateHoliday(holidayId: any, holidayData: any): Observable<any> {
+    return this.http.put(`/holidays/${holidayId}`, holidayData);
+  }
+
   /**
    * Delete Holiday.
    * @param holidayId Holiday Id to be deleted.