import { Component, OnInit, ViewChild } from '@angular/core'; import { FormBuilder, FormGroup } from '@angular/forms'; import { MatPaginator } from '@angular/material/paginator'; import { MatSort } from '@angular/material/sort'; import { ActivatedRoute, Router } from '@angular/router'; import * as moment from 'moment'; import { ToCsvService } from '../shared/to-csv.service'; import { RawMaterialCost } from './raw-material-cost'; import { RawMaterialCostDataSource } from './raw-material-cost-datasource'; @Component({ selector: 'app-raw-material-cost', templateUrl: './raw-material-cost.component.html', styleUrls: ['./raw-material-cost.component.css'], }) export class RawMaterialCostComponent implements OnInit { @ViewChild(MatPaginator, { static: true }) paginator?: MatPaginator; @ViewChild(MatSort, { static: true }) sort?: MatSort; info: RawMaterialCost = new RawMaterialCost(); dataSource: RawMaterialCostDataSource = new RawMaterialCostDataSource(this.info.body); form: FormGroup; debitQuantity = 0; debitAmount = 0; creditQuantity = 0; creditAmount = 0; runningQuantity = 0; runningAmount = 0; /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */ displayedColumns: string[] = []; columnsNoId = ['name', 'issue', 'sale', 'rmc']; columnsId = ['name', 'group', 'quantity', 'net', 'gross']; constructor( private route: ActivatedRoute, private router: Router, private fb: FormBuilder, private toCsv: ToCsvService, ) { this.form = this.fb.group({ startDate: '', finishDate: '', }); } ngOnInit() { this.route.data.subscribe((value) => { const data = value as { info: RawMaterialCost }; this.info = data.info; this.displayedColumns = this.info.id ? this.columnsId : this.columnsNoId; this.form.setValue({ startDate: moment(this.info.startDate, 'DD-MMM-YYYY').toDate(), finishDate: moment(this.info.finishDate, 'DD-MMM-YYYY').toDate(), }); this.dataSource = new RawMaterialCostDataSource(this.info.body, this.paginator, this.sort); }); } show() { const model = this.prepareSubmit(); this.router.navigate(['raw-material-cost'], { queryParams: { startDate: model.startDate, finishDate: model.finishDate, }, }); } prepareSubmit(): RawMaterialCost { const formModel = this.form.value; return new RawMaterialCost({ startDate: moment(formModel.startDate).format('DD-MMM-YYYY'), finishDate: moment(formModel.finishDate).format('DD-MMM-YYYY'), }); } exportCsv() { let headers: { [display: string]: string }; if (this.info.id) { headers = { Name: 'name', Group: 'group', Quantity: 'quantity', Net: 'net', Gross: 'gross' }; } else { headers = { Name: 'name', Issue: 'issue', Sale: 'sale', RMC: 'rmc' }; } 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', 'raw-material-cost.csv'); document.body.appendChild(link); link.click(); document.body.removeChild(link); } }