Product Ledger Done!!

overlord/src/app/product-ledger/product-ledger.component.html

@@ -1,6 +1,9 @@
 <mat-card>
   <mat-card-title-group>
     <mat-card-title>Product Ledger</mat-card-title>
+    <button mat-button mat-icon-button *ngIf="dataSource.data.length" (click)="exportCsv()">
+      <mat-icon>save_alt</mat-icon>
+    </button>
   </mat-card-title-group>
   <mat-card-content>
     <form [formGroup]="form" fxLayout="column">
@@ -22,8 +25,8 @@
       <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutGap.lt-md="0px"
            fxLayoutAlign="space-around start">
         <mat-form-field fxFlex="80">
-          <input type="text" matInput placeholder="Product" [matAutocomplete]="auto" formControlName="product"
-                 autocomplete="off">
+          <input type="text" matInput #productElement placeholder="Product" [matAutocomplete]="auto"
+                 formControlName="product" autocomplete="off">
           <mat-autocomplete #auto="matAutocomplete" autoActiveFirstOption [displayWith]="displayFn"
                             (optionSelected)="selected($event)">
             <mat-option *ngFor="let product of products | async" [value]="product">{{product.name}}</mat-option>
@@ -44,7 +47,7 @@
       <!-- Particulars Column -->
       <ng-container matColumnDef="particulars">
         <mat-header-cell *matHeaderCellDef mat-sort-header>Particulars</mat-header-cell>
-        <mat-cell *matCellDef="let row"><a [routerLink]="['/', row.url, row.id]">{{row.name}}</a></mat-cell>
+        <mat-cell *matCellDef="let row"><a [routerLink]="row.url">{{row.name}}</a></mat-cell>
         <mat-footer-cell *matFooterCellDef>Closing Balance</mat-footer-cell>
       </ng-container>
 

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

@@ -1,4 +1,4 @@
-import {Component, OnInit, ViewChild} from '@angular/core';
+import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
 import {FormBuilder, FormGroup} from '@angular/forms';
 import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { MatPaginator } from '@angular/material/paginator';
@@ -12,13 +12,15 @@ import {ProductLedger} from './product-ledger';
 import {ProductLedgerService} from './product-ledger.service';
 import {Product} from '../core/product';
 import {ProductService} from '../product/product.service';
+import {ToCsvService} from '../shared/to-csv.service';
 
 @Component({
   selector: 'app-product-ledger',
   templateUrl: './product-ledger.component.html',
   styleUrls: ['./product-ledger.component.css']
 })
-export class ProductLedgerComponent implements OnInit {
+export class ProductLedgerComponent implements OnInit, AfterViewInit {
+  @ViewChild('productElement', { static: true }) productElement: ElementRef;
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
   @ViewChild(MatSort, { static: true }) sort: MatSort;
   dataSource: ProductLedgerDataSource;
@@ -45,6 +47,7 @@ export class ProductLedgerComponent implements OnInit {
     private route: ActivatedRoute,
     private router: Router,
     private fb: FormBuilder,
+    private toCsv: ToCsvService,
     private ser: ProductLedgerService,
     private productSer: ProductService
   ) {
@@ -61,12 +64,7 @@ export class ProductLedgerComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.route.data.pipe(map(
-      (data: { info: ProductLedger }) => {
-        data.info.body = data.info.body.map(x => ({...x, url: x['type'].replace(/ /g, '-').toLowerCase()}));
-        return data;
-      }
-    )).subscribe((data: { info: ProductLedger }) => {
+    this.route.data.subscribe((data: { info: ProductLedger }) => {
         this.info = data.info;
         this.calculateTotals();
         this.form.setValue({
@@ -75,9 +73,16 @@ export class ProductLedgerComponent implements OnInit {
           finishDate: moment(this.info.finishDate, 'DD-MMM-YYYY').toDate()
         });
         this.dataSource = new ProductLedgerDataSource(this.paginator, this.sort, this.info.body);
+
       });
   }
 
+  ngAfterViewInit() {
+    setTimeout(() => {
+      this.productElement.nativeElement.focus();
+    }, 0);
+  }
+
   displayFn(product?: Product): string | undefined {
     return product ? product.name : undefined;
   }
@@ -111,11 +116,11 @@ export class ProductLedgerComponent implements OnInit {
   }
 
   show() {
-    const l = this.prepareSubmit();
-    this.router.navigate(['product-ledger', l.product.id], {
+    const info = this.getInfo();
+    this.router.navigate(['product-ledger', info.product.id], {
       queryParams: {
-        startDate: l.startDate,
-        finishDate: l.finishDate
+        startDate: info.startDate,
+        finishDate: info.finishDate
       }
     });
   }
@@ -128,14 +133,33 @@ export class ProductLedgerComponent implements OnInit {
     });
   }
 
-  prepareSubmit(): ProductLedger {
+  getInfo(): ProductLedger {
     const formModel = this.form.value;
 
     return {
       product: formModel.product,
       startDate: moment(formModel.startDate).format('DD-MMM-YYYY'),
-      finishDate: moment(formModel.finishDate).format('DD-MMM-YYYY'),
-      body: this.info.body
+      finishDate: moment(formModel.finishDate).format('DD-MMM-YYYY')
     };
   }
+
+  exportCsv() {
+    const headers = {
+      Date: 'date',
+      Name: 'name',
+      Type: 'type',
+      Narration: 'narration',
+      Debit: 'debit',
+      Credit: 'credit',
+      Running: 'running',
+      Posted: 'posted'
+    };
+    const csvData = new Blob([this.toCsv.toCsv(headers, this.dataSource.data)], {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);
+  }
 }

overlord/src/app/product-ledger/product-ledger.ts

@@ -13,12 +13,12 @@ export class ProductLedgerItem {
   runningQuantity: number;
   runningAmount: number;
   posted: boolean;
-  url: string;
+  url: string[];
 }
 
 export class ProductLedger {
   startDate: string;
   finishDate: string;
-  product: Product;
-  body: ProductLedgerItem[];
+  product?: Product;
+  body?: ProductLedgerItem[];
 }