Moved to Angular 6.0

----

Pending
* Table width for the points column in incentive
* Linting
* keyboard navigation where it was used earlier
* can remove the unused totals calculated serverside in productledger
* spinner and loading bars
* Activate Guard for Employee Function tabs
* Progress for Fingerprint uploads
* deleted reconcile and receipe features as they were not being used
* focus the right control on component load

overlord/src/app/ledger/ledger.component.ts

@@ -0,0 +1,157 @@
+import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
+import {FormBuilder, FormGroup} from '@angular/forms';
+import {MatAutocompleteSelectedEvent, MatPaginator, MatSort} from '@angular/material';
+import {ActivatedRoute, Router} from '@angular/router';
+import {Observable, of as observableOf} from 'rxjs';
+import {debounceTime, distinctUntilChanged, map, startWith, switchMap} from 'rxjs/operators';
+import * as moment from 'moment';
+import {LedgerDataSource} from './ledger-datasource';
+import {Ledger} from './ledger';
+import {Account} from '../account/account';
+import {LedgerService} from './ledger.service';
+import {AccountService} from '../account/account.service';
+
+@Component({
+  selector: 'app-ledger',
+  templateUrl: './ledger.component.html',
+  styleUrls: ['./ledger.component.css']
+})
+export class LedgerComponent implements OnInit, AfterViewInit {
+  @ViewChild('accountElement') accountElement: ElementRef;
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatSort) sort: MatSort;
+  dataSource: LedgerDataSource;
+  form: FormGroup;
+  info: Ledger;
+  selectedRowId: string;
+  debit: number;
+  credit: number;
+  running: number;
+  /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
+  displayedColumns = ['date', 'particulars', 'type', 'narration', 'debit', 'credit', 'running'];
+
+  accounts: Observable<Account[]>;
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private fb: FormBuilder,
+    private ser: LedgerService,
+    private accountSer: AccountService
+  ) {
+    this.createForm();
+
+    this.accounts = this.form.get('account').valueChanges
+      .pipe(
+        startWith(null),
+        map(x => (x !== null && x.length >= 1) ? x : null),
+        debounceTime(150),
+        distinctUntilChanged(),
+        switchMap(x => (x === null) ? observableOf([]) : this.accountSer.autocomplete(x))
+      );
+  }
+
+  ngOnInit() {
+    this.route.data
+      .subscribe((data: { info: Ledger }) => {
+        this.info = data.info;
+        this.calculateTotals();
+        this.form.setValue({
+          account: this.info.account,
+          startDate: moment(this.info.startDate, 'DD-MMM-YYYY').toDate(),
+          finishDate: moment(this.info.finishDate, 'DD-MMM-YYYY').toDate()
+        });
+        this.dataSource = new LedgerDataSource(this.paginator, this.sort, this.info.body);
+      });
+  }
+
+  ngAfterViewInit() {
+    setTimeout(() => {
+      this.accountElement.nativeElement.focus();
+    }, 0);
+  }
+
+  displayFn(account?: Account): string | undefined {
+    return account ? account.name : undefined;
+  }
+
+  calculateTotals() {
+    this.debit = 0;
+    this.credit = 0;
+    this.running = 0;
+    this.info.body.forEach((item) => {
+      if (item.type !== 'Opening Balance') {
+        this.debit += item.debit;
+        this.credit += item.credit;
+        if (item.posted) {
+          this.running += item.debit - item.credit;
+        }
+      } else {
+        this.running += item.debit - item.credit;
+      }
+      item.running = this.running;
+    });
+  }
+
+  selected(event: MatAutocompleteSelectedEvent): void {
+    this.info.account = event.option.value;
+  }
+
+  selectRow(id: string): void {
+    this.selectedRowId = id;
+  }
+
+  getRowClass(id: string, posted: boolean): string {
+    if (this.selectedRowId === id) {
+      return 'selected';
+    } else if (!posted) {
+      return 'unposted';
+    } else {
+      return '';
+    }
+  }
+
+  show() {
+    const info = this.getInfo();
+    this.router.navigate(['Ledger', info.account.id], {
+      queryParams: {
+        startDate: info.startDate,
+        finishDate: info.finishDate
+      }
+    });
+  }
+
+  createForm() {
+    this.form = this.fb.group({
+      startDate: '',
+      finishDate: '',
+      account: ''
+    });
+  }
+
+  getInfo(): Ledger {
+    const formModel = this.form.value;
+
+    return {
+      account: formModel.account,
+      startDate: moment(formModel.startDate).format('DD-MMM-YYYY'),
+      finishDate: moment(formModel.finishDate).format('DD-MMM-YYYY')
+    };
+  }
+
+  exportCsv() {
+    const data: string[] = ['Date , Name , Type , Narration , Debit , Credit , Running , Posted'];
+    data.push(
+      ...this.dataSource.data.map(x => x.date + ', ' + x.name + ', ' + x.type + ', ' +
+        x.narration + ', ' + x.debit + ', ' + x.credit + ', ' + x.running + ', ' + x.posted)
+    );
+
+    const csvData = new Blob([data.join('\n')], {type: 'text/csv;charset=utf-8;'});
+    const link = document.createElement('a');
+    link.href = window.URL.createObjectURL(csvData);
+    link.setAttribute('download', 'ledger.csv');
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }
+}