Beer consumption report can choose menu category for beer

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

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import { Component, OnInit, inject } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -6,10 +7,12 @@ 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 { MenuCategory } from '../core/menu-category';
 import { ToCsvService } from '../shared/to-csv.service';
 import { BeerSaleExportHeaderInterface } from './beer-sale-export-header-interface';
 import { BeerSaleReport } from './beer-sale-report';
@@ -20,13 +23,14 @@ import { BeerSaleReportDataSource } from './beer-sale-report-datasource';
   templateUrl: './beer-sale-report.component.html',
   styleUrls: ['./beer-sale-report.component.css'],
   imports: [
+    CommonModule,
     MatButtonModule,
-
     MatCheckboxModule,
     MatDatepickerModule,
     MatFormFieldModule,
     MatIconModule,
     MatInputModule,
+    MatSelectModule,
     MatTableModule,
     ReactiveFormsModule,
   ],
@@ -36,11 +40,13 @@ export class BeerSaleReportComponent implements OnInit {
   private router = inject(Router);
   private toCsv = inject(ToCsvService);
 
+  menuCategories: MenuCategory[] = [];
   info: BeerSaleReport = new BeerSaleReport();
   dataSource: BeerSaleReportDataSource = new BeerSaleReportDataSource(this.info.data);
   form: FormGroup<{
     startDate: FormControl<Date>;
     finishDate: FormControl<Date>;
+    menuCategory: FormControl<string>;
     regular: FormControl<boolean>;
     happy: FormControl<boolean>;
     staff: FormControl<boolean>;
@@ -55,6 +61,7 @@ export class BeerSaleReportComponent implements OnInit {
     this.form = new FormGroup({
       startDate: new FormControl(new Date(), { nonNullable: true }),
       finishDate: new FormControl(new Date(), { nonNullable: true }),
+      menuCategory: new FormControl('', { nonNullable: true }),
       regular: new FormControl<boolean>(true, { nonNullable: true }),
       happy: new FormControl<boolean>(true, { nonNullable: true }),
       staff: new FormControl<boolean>(true, { nonNullable: true }),
@@ -64,12 +71,14 @@ export class BeerSaleReportComponent implements OnInit {
 
   ngOnInit() {
     this.route.data.subscribe((value) => {
-      const data = value as { info: BeerSaleReport };
+      const data = value as { info: BeerSaleReport; menuCategories: MenuCategory[] };
       this.info = data.info;
+      this.menuCategories = data.menuCategories;
       this.displayedColumns = ['date'].concat(this.info.headers);
       this.form.setValue({
         startDate: moment(this.info.startDate, 'DD-MMM-YYYY').toDate(),
         finishDate: moment(this.info.finishDate, 'DD-MMM-YYYY').toDate(),
+        menuCategory: this.info.menuCategory?.id ?? '',
         regular: this.info.regular,
         happy: this.info.happy,
         staff: this.info.staff,
@@ -85,6 +94,7 @@ export class BeerSaleReportComponent implements OnInit {
       queryParams: {
         startDate: info.startDate,
         finishDate: info.finishDate,
+        menuCategory: info.menuCategory?.id ?? '',
         regular: info.regular,
         happy: info.happy,
         staff: info.staff,
@@ -93,12 +103,18 @@ export class BeerSaleReportComponent implements OnInit {
     });
   }
 
+  filterOn(id: string) {
+    const mc = this.menuCategories.find((x) => x.id === id);
+    this.info.menuCategory = mc ? mc : new MenuCategory({ id });
+  }
+
   getInfo(): BeerSaleReport {
     const formModel = this.form.value;
 
     return new BeerSaleReport({
       startDate: moment(formModel.startDate).format('DD-MMM-YYYY'),
       finishDate: moment(formModel.finishDate).format('DD-MMM-YYYY'),
+      menuCategory: this.info.menuCategory,
       regular: formModel.regular,
       happy: formModel.happy,
       staff: formModel.staff,