import {Component, OnInit, ViewChild} from '@angular/core'; import {MatPaginator, MatSort} from '@angular/material'; import {ClosingStockDataSource} from './closing-stock-datasource'; import {ClosingStock} from './closing-stock'; import {ActivatedRoute, Router} from '@angular/router'; import * as moment from 'moment'; import {FormBuilder, FormGroup} from '@angular/forms'; @Component({ selector: 'app-closing-stock', templateUrl: './closing-stock.component.html', styleUrls: ['./closing-stock.component.css'] }) export class ClosingStockComponent implements OnInit { @ViewChild(MatPaginator) paginator: MatPaginator; @ViewChild(MatSort) sort: MatSort; dataSource: ClosingStockDataSource; form: FormGroup; info: ClosingStock; /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */ displayedColumns = ['product', 'group', 'quantity', 'amount']; constructor(private route: ActivatedRoute, private router: Router, private fb: FormBuilder) { this.createForm(); } createForm() { this.form = this.fb.group({ date: '' }); } ngOnInit() { this.route.data .subscribe((data: { info: ClosingStock }) => { this.info = data.info; this.form.setValue({ date: moment(this.info.date, 'DD-MMM-YYYY').toDate() }); }); this.dataSource = new ClosingStockDataSource(this.paginator, this.sort, this.info.body); } show() { const info = this.getInfo(); this.router.navigate(['ClosingStock', info.date]); } getInfo(): ClosingStock { const formModel = this.form.value; return { date: moment(formModel.date).format('DD-MMM-YYYY') }; } exportCsv() { const data: string[] = ['Product, Group, Quantity, Amount']; data.push( ...this.dataSource.data.map(x => '' + x.product + ', ' + x.group + ', ' + x.quantity + ', ' + x.amount) ); 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', 'closing-stock.csv'); document.body.appendChild(link); link.click(); document.body.removeChild(link); } }