Renamed void_reason to reason so that we can store the employee name in case of Staff and NC reason in case of NC bills.

Settling NC and Staff bills now asks for Staff name / NC reason

bookie/src/app/sales/reason/reason-datasource.ts

@@ -0,0 +1,16 @@
+import { DataSource } from '@angular/cdk/collections';
+import { Observable, of as observableOf } from 'rxjs';
+
+export class ReasonDatasource extends DataSource<string> {
+
+  constructor(private data: string[]) {
+    super();
+  }
+
+  connect(): Observable<string[]> {
+    return observableOf(this.data);
+  }
+
+  disconnect() {
+  }
+}

bookie/src/app/sales/reason/reason.component.css

@@ -0,0 +1,3 @@
+.selected {
+  background-color: #dddddd;
+}

bookie/src/app/sales/reason/reason.component.html

@@ -0,0 +1,25 @@
+<h2 mat-dialog-title>{{ title }}</h2>
+<mat-dialog-content>
+  <form [formGroup]="form">
+    <mat-table [dataSource]="dataSource">
+      <!-- Reason Column -->
+      <ng-container matColumnDef="reason">
+        <mat-cell *matCellDef="let row" (click)="select(row)">{{row}}</mat-cell>
+        <mat-footer-cell *matFooterCellDef>
+          <mat-form-field fxFlex>
+            <mat-label>Reason</mat-label>
+            <input type="text" matInput #son placeholder="Reason" formControlName="son" autocomplete="off"
+                   (focus)="select($event.target.value) && son.select()" (input)="select($event.target.value)">
+          </mat-form-field>
+        </mat-footer-cell>
+      </ng-container>
+
+      <mat-row *matRowDef="let row; columns: displayedColumns;" [class.selected]="row === selected"></mat-row>
+      <mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
+    </mat-table>
+  </form>
+</mat-dialog-content>
+<mat-dialog-actions align="end">
+  <button mat-button [mat-dialog-close]="false">Cancel</button>
+  <button mat-button (click)="accept()" color="primary" [disabled]="!selected">Ok</button>
+</mat-dialog-actions>

bookie/src/app/sales/reason/reason.component.spec.ts

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

bookie/src/app/sales/reason/reason.component.ts

@@ -0,0 +1,41 @@
+import { Component, ElementRef, Inject, ViewChild } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { ReasonDatasource } from './reason-datasource';
+import { FormBuilder, FormGroup } from "@angular/forms";
+
+@Component({
+  selector: 'app-reason',
+  templateUrl: './reason.component.html',
+  styleUrls: ['./reason.component.css']
+})
+export class ReasonComponent {
+  @ViewChild('son', { static: true }) son: ElementRef;
+  form: FormGroup;
+  dataSource: ReasonDatasource;
+  title: string;
+  selected: string;
+  reasons: string[];
+  displayedColumns = ['reason'];
+
+  constructor(
+    public dialogRef: MatDialogRef<ReasonComponent>,
+    @Inject(MAT_DIALOG_DATA) private data:{ title: string, reasons: string[]},
+    private fb: FormBuilder
+  ) {
+    this.reasons = data.reasons || [];
+    this.title = data.title;
+    this.form = this.fb.group({
+      son: ''
+    });
+    this.dataSource = new ReasonDatasource(this.reasons);
+  }
+
+  select(reason: string) {
+    this.selected = reason.trim();
+    return true;
+  }
+
+  accept(): void {
+    this.dialogRef.close(this.selected);
+  }
+}