Product sale report can now be section wise

bookie/src/app/product-sale-report/product-sale-report.component.ts

@@ -1,27 +1,18 @@
 import { DecimalPipe } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { MatIconButton, MatButton } from '@angular/material/button';
-import { MatCard, MatCardHeader, MatCardTitleGroup, MatCardTitle, MatCardContent } from '@angular/material/card';
-import { MatDatepickerInput, MatDatepickerToggle, MatDatepicker } from '@angular/material/datepicker';
-import { MatFormField, MatLabel, MatSuffix } from '@angular/material/form-field';
-import { MatIcon } from '@angular/material/icon';
-import { MatInput } from '@angular/material/input';
-import {
-  MatTable,
-  MatColumnDef,
-  MatHeaderCellDef,
-  MatHeaderCell,
-  MatCellDef,
-  MatCell,
-  MatHeaderRowDef,
-  MatHeaderRow,
-  MatRowDef,
-  MatRow,
-} from '@angular/material/table';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, Router } from '@angular/router';
 import moment from 'moment';
 
+import { Section } from '../core/section';
 import { ToasterService } from '../core/toaster.service';
 import { ToCsvService } from '../shared/to-csv.service';
 
@@ -34,41 +25,26 @@ import { ProductSaleReportService } from './product-sale-report.service';
   templateUrl: './product-sale-report.component.html',
   styleUrls: ['./product-sale-report.component.css'],
   imports: [
-    MatCard,
-    MatCardHeader,
-    MatCardTitleGroup,
-    MatCardTitle,
-    MatIconButton,
-    MatIcon,
-    MatCardContent,
+    MatCardModule,
+    MatButtonModule,
     ReactiveFormsModule,
-    MatFormField,
-    MatLabel,
-    MatInput,
-    MatDatepickerInput,
-    MatDatepickerToggle,
-    MatSuffix,
-    MatDatepicker,
-    MatButton,
-    MatTable,
-    MatColumnDef,
-    MatHeaderCellDef,
-    MatHeaderCell,
-    MatCellDef,
-    MatCell,
-    MatHeaderRowDef,
-    MatHeaderRow,
-    MatRowDef,
-    MatRow,
+    MatFormFieldModule,
+    MatInputModule,
+    MatIconModule,
+    MatDatepickerModule,
+    MatTableModule,
+    MatSelectModule,
     DecimalPipe,
   ],
 })
 export class ProductSaleReportComponent implements OnInit {
+  sections: Section[] = [];
   info: ProductSaleReport = new ProductSaleReport();
   dataSource: ProductSaleReportDataSource = new ProductSaleReportDataSource(this.info.amounts);
   form: FormGroup<{
     startDate: FormControl<Date>;
     finishDate: FormControl<Date>;
+    section: FormControl<string | null>;
   }>;
 
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
@@ -85,16 +61,19 @@ export class ProductSaleReportComponent implements OnInit {
     this.form = new FormGroup({
       startDate: new FormControl(new Date(), { nonNullable: true }),
       finishDate: new FormControl(new Date(), { nonNullable: true }),
+      section: new FormControl<string | null>(null),
     });
   }
 
   ngOnInit() {
     this.route.data.subscribe((value) => {
-      const data = value as { info: ProductSaleReport };
+      const data = value as { sections: Section[]; info: ProductSaleReport };
+      this.sections = data.sections;
       this.info = data.info;
       this.form.setValue({
         startDate: moment(this.info.startDate, 'DD-MMM-YYYY').toDate(),
         finishDate: moment(this.info.finishDate, 'DD-MMM-YYYY').toDate(),
+        section: this.info.sectionId || null,
       });
       this.dataSource = new ProductSaleReportDataSource(this.info.amounts);
     });
@@ -102,25 +81,33 @@ export class ProductSaleReportComponent implements OnInit {
 
   show() {
     const info = this.getInfo();
+    const params = {
+      startDate: info.startDate,
+      finishDate: info.finishDate,
+    } as { startDate: string; finishDate: string; section?: string };
+    if (info.sectionId) {
+      params['section'] = info.sectionId;
+    }
     this.router.navigate(['product-sale-report'], {
-      queryParams: {
-        startDate: info.startDate,
-        finishDate: info.finishDate,
-      },
+      queryParams: params,
     });
   }
 
   getInfo(): ProductSaleReport {
     const formModel = this.form.value;
 
-    return new ProductSaleReport({
+    const data = new ProductSaleReport({
       startDate: moment(formModel.startDate).format('DD-MMM-YYYY'),
       finishDate: moment(formModel.finishDate).format('DD-MMM-YYYY'),
     });
+    if (formModel.section) {
+      data.sectionId = formModel.section;
+    }
+    return data;
   }
 
   print() {
-    this.ser.print(this.info.startDate, this.info.finishDate).subscribe({
+    this.ser.print(this.info.startDate, this.info.finishDate, this.info.sectionId).subscribe({
       next: () => {
         this.toaster.show('', 'Successfully Printed');
       },