feat: add working days component (#530)

Fixes: #162

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

@@ -20,6 +20,7 @@ import { TellersComponent } from './tellers/tellers.component';
 import { PaymentTypesComponent } from './payment-types/payment-types.component';
 import { PasswordPreferencesComponent } from './password-preferences/password-preferences.component';
 import { EntityDataTableChecksComponent } from './entity-data-table-checks/entity-data-table-checks.component';
+import { WorkingDaysComponent } from './working-days/working-days.component';
 
 /** Custom Resolvers */
 import { LoanProvisioningCriteriaResolver } from './loan-provisioning-criteria/loan-provisioning-criteria.resolver';
@@ -32,6 +33,7 @@ import { TellersResolver } from './tellers/tellers.resolver';
 import { PaymentTypesResolver } from './payment-types/payment-types.resolver';
 import { PasswordPreferencesTemplateResolver } from './password-preferences/password-preferences-template.resolver';
 import { EntityDataTableChecksResolver } from './entity-data-table-checks/entity-data-table-checks.resolver';
+import { WorkingDaysResolver } from './working-days/working-days.resolver';
 
 /** Organization Routes */
 const routes: Routes = [
@@ -128,6 +130,14 @@ const routes: Routes = [
           resolve: {
             entityDataTableChecks: EntityDataTableChecksResolver
           }
+        },
+        {
+          path: 'working-days',
+          component: WorkingDaysComponent,
+          data: { title: extract('Working Days'), breadcrumb: 'Working Days' },
+          resolve: {
+            workingDays: WorkingDaysResolver
+          }
         }
       ]
     }
@@ -152,7 +162,8 @@ const routes: Routes = [
     TellersResolver,
     PaymentTypesResolver,
     PasswordPreferencesTemplateResolver,
-    EntityDataTableChecksResolver
+    EntityDataTableChecksResolver,
+    WorkingDaysResolver
   ]
 })
 export class OrganizationRoutingModule { }

src/app/organization/organization.component.html

@@ -113,7 +113,7 @@
             <p matLine>Manage Tellers / Cashiers and Cash Allocation and Settlement</p>
           </mat-list-item>
 
-          <mat-list-item>
+          <mat-list-item [routerLink]="['working-days']">
             <mat-icon matListIcon>
               <fa-icon icon="calendar-alt" size="sm"></fa-icon>
             </mat-icon>

src/app/organization/organization.module.ts

@@ -18,6 +18,7 @@ import { TellersComponent } from './tellers/tellers.component';
 import { PaymentTypesComponent } from './payment-types/payment-types.component';
 import { PasswordPreferencesComponent } from './password-preferences/password-preferences.component';
 import { EntityDataTableChecksComponent } from './entity-data-table-checks/entity-data-table-checks.component';
+import { WorkingDaysComponent } from './working-days/working-days.component';
 
 /**
  * Organization Module
@@ -41,7 +42,8 @@ import { EntityDataTableChecksComponent } from './entity-data-table-checks/entit
     TellersComponent,
     PaymentTypesComponent,
     PasswordPreferencesComponent,
-    EntityDataTableChecksComponent
+    EntityDataTableChecksComponent,
+    WorkingDaysComponent
   ]
 })
 export class OrganizationModule { }

src/app/organization/organization.service.ts

@@ -117,4 +117,19 @@ export class OrganizationService {
     return this.http.delete(`/entityDatatableChecks/${entityDataTableCheckId}`);
   }
 
+  /**
+   * @returns {Observable<any>} Working days data.
+   */
+  getWorkingDays(): Observable<any> {
+    return this.http.get('/workingdays');
+  }
+
+  /**
+   * @param {any} workingDays Working days data.
+   * @returns {Observable<any>}
+   */
+  updateWorkingDays(workingDays: any): Observable<any> {
+    return this.http.put('/workingdays', workingDays);
+  }
+
 }

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