feat: add create cashier component (#1064)

Fixes: #161

src/app/organization/tellers/cashiers/cashiers.component.html

@@ -38,10 +38,12 @@
       <ng-container matColumnDef="vaultActions">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Vault Actions </th>
         <td mat-cell *matCellDef="let cashier">
-          <button class="cashier-action-button" mat-raised-button color="accent" matTooltip="Allocate Cash">
+          <button class="cashier-action-button" mat-raised-button color="accent" matTooltip="Allocate Cash"
+            (click)="routeEdit($event)" [routerLink]="[cashier.id, 'allocate']">
             <i class="fa fa-arrow-up"></i>
           </button>
-          <button class="cashier-action-button" mat-raised-button color="warn" matTooltip="Settle Cash">
+          <button class="cashier-action-button" mat-raised-button color="warn" matTooltip="Settle Cash"
+            (click)="routeEdit($event)" [routerLink]="[cashier.id, 'settle']">
             <i class="fa fa-arrow-down"></i>
           </button>
           <button class="cashier-action-button" mat-raised-button color="primary" matTooltip="View Transactions"

src/app/organization/tellers/cashiers/create-cashier/create-cashier.component.html

@@ -0,0 +1,77 @@
+<div class="container">
+
+  <mat-card>
+
+    <form [formGroup]="createCashierForm" (ngSubmit)="submit()">
+
+      <mat-card-content>
+
+        <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Office</mat-label>
+            <input matInput required autofocus [value]="cashierTemplate.officeName" disabled>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Teller Name</mat-label>
+            <input matInput required autofocus [value]="cashierTemplate.tellerName" disabled>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Cashier</mat-label>
+            <mat-select formControlName="staffId">
+              <mat-option *ngFor="let staff of cashierTemplate.staffOptions" [value]="staff.id">
+                {{ staff.displayName }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="createCashierForm.controls.staffId.hasError('required')">
+              Cashier <strong>is required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Description/Notes</mat-label>
+            <input matInput autofocus formControlName="description">
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>From</mat-label>
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="fromDatePicker" required formControlName="startDate">
+            <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #fromDatePicker></mat-datepicker>
+            <mat-error *ngIf="createCashierForm.controls.startDate.hasError('required')">
+              From Date <strong>is required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>To</mat-label>
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="toDatePicker" required formControlName="endDate">
+            <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #toDatePicker></mat-datepicker>
+            <mat-error *ngIf="createCashierForm.controls.endDate.hasError('required')">
+              To Date <strong>is required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <div fxFlex="48%" style="padding-top: 10px;">
+            <mat-checkbox labelPosition="before" formControlName="isFullDay">
+              Full Day?
+            </mat-checkbox>
+          </div>
+
+        </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]="!createCashierForm.valid">Submit</button>
+      </mat-card-actions>
+
+    </form>
+
+  </mat-card>
+
+</div>

src/app/organization/tellers/cashiers/create-cashier/create-cashier.component.spec.ts

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

src/app/organization/tellers/cashiers/create-cashier/create-cashier.component.ts

@@ -0,0 +1,83 @@
+/** Angular Imports. */
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { DatePipe } from '@angular/common';
+
+/** Custom Services. */
+import { OrganizationService } from 'app/organization/organization.service';
+
+/**
+ * Create Cashier component.
+ */
+@Component({
+  selector: 'mifosx-create-cashier',
+  templateUrl: './create-cashier.component.html',
+  styleUrls: ['./create-cashier.component.scss']
+})
+export class CreateCashierComponent implements OnInit {
+
+  /** Minimum Date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum Date allowed. */
+  maxDate = new Date();
+  /** Cashier Template. */
+  cashierTemplate: any;
+  /** Create cashier form. */
+  createCashierForm: FormGroup;
+
+  /**
+   * Fetches cashier template from `resolve`
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router.
+   * @param {DatePipe} datePipe Date Pipe.
+   * @param {OrganizationService} organizationService Organization Service.
+   */
+  constructor(private formBuilder: FormBuilder,
+              private route: ActivatedRoute,
+              private router: Router,
+              private datePipe: DatePipe,
+              private organizationService: OrganizationService ) {
+    this.route.data.subscribe((data: { cashierTemplate: any }) => {
+      this.cashierTemplate = data.cashierTemplate;
+    });
+  }
+
+  ngOnInit() {
+    this.setCreateCashierForm();
+  }
+
+  /**
+   * Sets Create Charge Form.
+   */
+  setCreateCashierForm() {
+    this.createCashierForm = this.formBuilder.group({
+      'staffId': ['', Validators.required],
+      'description': [''],
+      'startDate': ['', Validators.required],
+      'endDate': ['', Validators.required],
+      'isFullDay': [false]
+    });
+  }
+
+  /**
+   * Submits Create cashier form.
+   */
+  submit() {
+    const dateFormat = 'dd MMMM yyyy';
+    const startDate = this.createCashierForm.value.startDate;
+    const endDate = this.createCashierForm.value.endDate;
+    this.createCashierForm.patchValue({
+      'startDate': this.datePipe.transform(startDate, dateFormat),
+      'endDate': this.datePipe.transform(endDate, dateFormat)
+    });
+    const createCashierForm = this.createCashierForm.value;
+    createCashierForm.locale = 'en';
+    createCashierForm.dateFormat = dateFormat;
+    this.organizationService.createCashier(this.cashierTemplate.tellerId, createCashierForm).subscribe((response: any) => {
+      this.router.navigate(['../'], {relativeTo: this.route});
+    });
+  }
+
+}

src/app/organization/tellers/cashiers/transactions/transactions.component.html

@@ -1,9 +1,9 @@
 <div fxLayout="row" fxLayoutGap="1%" fxLayoutAlign="end" class="container m-b-20">
-  <button mat-raised-button color="accent">
+  <button mat-raised-button color="accent" [routerLink]="['../allocate']">
       <fa-icon icon="arrow-up"></fa-icon>&nbsp;&nbsp;
       Allocate Cash
   </button>
-  <button mat-raised-button color="warn">
+  <button mat-raised-button color="warn" [routerLink]="['../settle']">
       <fa-icon icon="arrow-down"></fa-icon>&nbsp;&nbsp;
       Settle Cash
   </button>

src/app/organization/tellers/cashiers/view-cashier/view-cashier.component.html

@@ -3,6 +3,10 @@
     <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
     Edit
   </button>
+  <button mat-raised-button color="warn" (click)="deleteCashier()">
+    <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+    Delete
+  </button>
 </div>
 
 

src/app/organization/tellers/cashiers/view-cashier/view-cashier.component.ts

@@ -0,0 +1,57 @@
+/** Angular Imports. */
+import { Component } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+
+/** Custom Dialogs */
+import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
+import { MatDialog } from '@angular/material';
+
+/** Custom Services */
+import { OrganizationService } from 'app/organization/organization.service';
+
+/**
+ * View Cashier component.
+ */
+@Component({
+  selector: 'mifosx-view-cashier',
+  templateUrl: './view-cashier.component.html',
+  styleUrls: ['./view-cashier.component.scss']
+})
+export class ViewCashierComponent {
+
+  /** Cashier data. */
+  cashierData: any;
+
+  /**
+   * Get cashier data from `resolve`.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router
+   * @param {OrganizationService} organizationService Organization Service
+   * @param {MatDialog} dialog Mat Dialog
+   */
+  constructor(private route: ActivatedRoute,
+              private router: Router,
+              private organizationService: OrganizationService,
+              public dialog: MatDialog) {
+    this.route.data.subscribe((data: { cashier: any }) => {
+      this.cashierData = data.cashier;
+    });
+  }
+
+  /**
+   * Deletes the cashier.
+   */
+  deleteCashier() {
+    const deleteCashierDialogRef = this.dialog.open(DeleteDialogComponent, {
+      data: { deleteContext: `Cashier id: ${this.cashierData.id}` }
+    });
+    deleteCashierDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.delete) {
+        this.organizationService.deleteCashier(this.cashierData.tellerId, this.cashierData.id).subscribe(() => {
+          this.router.navigate(['../'], {relativeTo: this.route});
+        });
+      }
+    });
+  }
+
+}

src/app/organization/tellers/common-resolvers/cashier.resolver.ts

@@ -25,7 +25,7 @@ export class CashierResolver implements Resolve<Object> {
    */
   resolve(route: ActivatedRouteSnapshot): Observable<any> {
     const cashierId = route.paramMap.get('id');
-    const tellerId = route.parent.paramMap.get('id');
+    const tellerId = route.parent.parent.paramMap.get('id');
     return this.organizationService.getCashier(tellerId, cashierId);
   }
 

src/app/organization/tellers/common-resolvers/edit-cashier.resolver.ts

@@ -24,7 +24,7 @@ export class EditCashierResolver implements Resolve<Object> {
    * @returns {Observable<any>}
    */
   resolve(route: ActivatedRouteSnapshot): Observable<any> {
-    const tellerId = route.parent.paramMap.get('id');
+    const tellerId = route.parent.parent.paramMap.get('id');
     return this.organizationService.getCashierTemplate(tellerId);
   }
 

src/app/organization/tellers/view-cashier/view-cashier.component.ts

@@ -1,28 +0,0 @@
-/** Angular Imports. */
-import { Component } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-
-/**
- * View Cashier component.
- */
-@Component({
-  selector: 'mifosx-view-cashier',
-  templateUrl: './view-cashier.component.html',
-  styleUrls: ['./view-cashier.component.scss']
-})
-export class ViewCashierComponent {
-
-  /** Cashier data. */
-  cashierData: any;
-
-  /**
-   * Get cashier data from `Resolver`.
-   * @param {ActivatedRoute} route Activated Route.
-   */
-  constructor(private route: ActivatedRoute) {
-    this.route.data.subscribe((data: { cashier: any }) => {
-      this.cashierData = data.cashier;
-    });
-  }
-
-}