feat: add working days component (#530)

Fixes: #162

src/app/organization/working-days/working-days.component.html

@@ -0,0 +1,48 @@
+<div class="container">
+
+  <mat-card>
+
+    <form [formGroup]="workingDaysForm" (ngSubmit)="submit()">
+
+      <mat-card-content>
+
+        <div fxLayout="column">
+
+          <div fxLayout="row" fxLayout.lt-md="column">
+            <mat-label fxFlex="50%" class="mat-h4">Working Days</mat-label>
+            <div fxFlex="50%" fxLayout="column" formArrayName="recurrence">
+              <div *ngFor="let day of recurrence.controls; let i = index;">
+                <mat-checkbox labelPosition="after" [formControlName]="i">
+                  {{ weekDays[i].name }}
+                </mat-checkbox>
+              </div>
+            </div>
+          </div>
+
+          <mat-form-field>
+            <mat-label>Payments due on non working days</mat-label>
+            <mat-select formControlName="repaymentRescheduleType">
+              <mat-option *ngFor="let repaymentRescheduleType of repaymentRescheduleTypeData" [value]="repaymentRescheduleType.id">
+                {{ repaymentRescheduleType.value }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
+          <mat-checkbox labelPosition="before" formControlName="extendTermForDailyRepayments">
+            Extend the term for loans following a daily repayment schedule
+          </mat-checkbox>
+
+        </div>
+
+      </mat-card-content>
+
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <button mat-raised-button [routerLink]="['../']">Cancel</button>
+        <button mat-raised-button color="primary" [disabled]="workingDaysForm.pristine">Submit</button>
+      </mat-card-actions>
+
+    </form>
+
+  </mat-card>
+
+</div>

src/app/organization/working-days/working-days.component.scss

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

src/app/organization/working-days/working-days.component.spec.ts

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

src/app/organization/working-days/working-days.component.ts

@@ -0,0 +1,119 @@
+/** Angular Imports */
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, FormArray, FormControl } from '@angular/forms';
+import { Router, ActivatedRoute } from '@angular/router';
+
+/** Custom Services */
+import { OrganizationService } from '../organization.service';
+
+/** Recurrence default value. */
+const recurrenceDefaultValue = 'FREQ=WEEKLY;INTERVAL=1;BYDAY=';
+
+/**
+ * Working days component.
+ */
+@Component({
+  selector: 'mifosx-working-days',
+  templateUrl: './working-days.component.html',
+  styleUrls: ['./working-days.component.scss']
+})
+export class WorkingDaysComponent implements OnInit {
+
+  /** Working days form. */
+  workingDaysForm: FormGroup;
+  /** Working days data. */
+  workingDaysData: any;
+  /** Week days */
+  weekDays = [
+    { name: 'Monday', value: 'MO', checked: false },
+    { name: 'Tuesday', value: 'TU', checked: false },
+    { name: 'Wednesday', value: 'WE', checked: false },
+    { name: 'Thursday', value: 'TH', checked: false },
+    { name: 'Friday', value: 'FR', checked: false },
+    { name: 'Saturday', value: 'SA', checked: false },
+    { name: 'Sunday', value: 'SU', checked: false }
+  ];
+  /**  Repayment schedule type data. */
+  repaymentRescheduleTypeData: any;
+
+  /**
+   * Retrieves the working days data from `resolve`.
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {OrganizationService} organizationService Organization Service.
+   * @param {Router} router Router for navigation.
+   */
+  constructor(private formBuilder: FormBuilder,
+              private route: ActivatedRoute,
+              private organizationService: OrganizationService,
+              private router: Router) {
+    this.route.data.subscribe((data: { workingDays: any }) => {
+      this.workingDaysData = data.workingDays;
+    });
+  }
+
+  /**
+   * Creates the working days form.
+   */
+  ngOnInit() {
+    this.createWorkingDaysForm();
+  }
+
+  /**
+   * Creates the working days form.
+   */
+  createWorkingDaysForm() {
+    this.setWeeklyWorkingDays();
+    this.repaymentRescheduleTypeData = this.workingDaysData.repaymentRescheduleOptions;
+    this.workingDaysForm = this.formBuilder.group({
+      'recurrence': this.formBuilder.array(this.createRecurrenceFormArray()),
+      'repaymentRescheduleType': [this.workingDaysData.repaymentRescheduleType.id],
+      'extendTermForDailyRepayments': [this.workingDaysData.extendTermForDailyRepayments]
+    });
+  }
+
+  /**
+   * @returns {FormArray} recurrence form array.
+   */
+  get recurrence(): FormArray {
+    return this.workingDaysForm.get('recurrence') as FormArray;
+  }
+
+  /**
+   * Sets weekly working days.
+   */
+  setWeeklyWorkingDays() {
+    const days = this.workingDaysData.recurrence.replace(recurrenceDefaultValue, '');
+    for (let i = 0; i < this.weekDays.length; i++) {
+      this.weekDays[i].checked = days.includes(this.weekDays[i].value);
+    }
+  }
+
+  /**
+   * Creates the recurrence form array.
+   */
+  createRecurrenceFormArray() {
+    return this.weekDays.map(weekDay => new FormControl(weekDay.checked));
+  }
+
+  /**
+   * Submits the working days form and updates working days configuration,
+   * if successful redirects to organization view.
+   */
+  submit() {
+    const workingDays = this.workingDaysForm.value;
+    // TODO: Update once language and date settings are setup
+    workingDays.locale = 'en';
+    let recurrence = recurrenceDefaultValue;
+    for (let i = 0; i < this.weekDays.length; i++) {
+      if (workingDays.recurrence[i]) {
+        recurrence = recurrence + this.weekDays[i].value + ',';
+      }
+    }
+    workingDays.recurrence = recurrence;
+    this.organizationService.updateWorkingDays(workingDays).subscribe(response => {
+      this.router.navigate(['../'], { relativeTo: this.route });
+    });
+  }
+
+}

src/app/organization/working-days/working-days.resolver.ts

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