Beer consumption report can choose menu category for beer

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

@@ -31,6 +31,16 @@
       <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
       <mat-datepicker #finishDate></mat-datepicker>
     </mat-form-field>
+    <mat-form-field class="flex-auto">
+      <mat-label>Menu Category</mat-label>
+      <mat-select formControlName="menuCategory" (selectionChange)="filterOn($event.value)">
+        @for (mc of menuCategories; track mc) {
+          <mat-option [value]="mc.id">
+            {{ mc.name }}
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
     <button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
   </div>
   <div class="row-container sm:max-lg:flex-col">
@@ -51,7 +61,7 @@
   @for (col of info.headers; track col) {
     <ng-container matColumnDef="{{ col }}">
       <mat-header-cell *matHeaderCellDef class="right">{{ col }}</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="right">{{ row[col] }}</mat-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row[col] | number: '1.2-2' }}</mat-cell>
     </ng-container>
   }
 

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,

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

@@ -7,9 +7,10 @@ import { BeerSaleReportService } from './beer-sale-report.service';
 export const beerSaleReportResolver: ResolveFn<BeerSaleReport> = (route) => {
   const startDate = route.queryParamMap.get('startDate') ?? null;
   const finishDate = route.queryParamMap.get('finishDate') ?? null;
+  const menuCategory = route.queryParamMap.get('menuCategory') ?? null;
   const regular = route.queryParamMap.get('regular') !== 'false';
   const happy = route.queryParamMap.get('happy') !== 'false';
   const staff = route.queryParamMap.get('staff') !== 'false';
   const nc = route.queryParamMap.get('nc') !== 'false';
-  return inject(BeerSaleReportService).get(startDate, finishDate, regular, happy, staff, nc);
+  return inject(BeerSaleReportService).get(startDate, finishDate, menuCategory, regular, happy, staff, nc);
 };

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

@@ -1,6 +1,7 @@
 import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
+import { menuCategoryListResolver } from '../menu-category/menu-category-list.resolver';
 import { BeerSaleReportComponent } from './beer-sale-report.component';
 import { beerSaleReportResolver } from './beer-sale-report.resolver';
 
@@ -14,6 +15,7 @@ export const routes: Routes = [
     },
     resolve: {
       info: beerSaleReportResolver,
+      menuCategories: menuCategoryListResolver,
     },
     runGuardsAndResolvers: 'always',
   },

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

@@ -19,6 +19,7 @@ export class BeerSaleReportService {
   get(
     startDate: string | null,
     finishDate: string | null,
+    menuCategory: string | null,
     regular: boolean,
     happy: boolean,
     staff: boolean,
@@ -31,6 +32,9 @@ export class BeerSaleReportService {
     if (finishDate !== null) {
       options.params = options.params.set('f', finishDate);
     }
+    if (menuCategory != null) {
+      options.params = options.params.set('m', menuCategory);
+    }
     options.params = options.params.set('r', regular);
     options.params = options.params.set('h', happy);
     options.params = options.params.set('st', staff);

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

@@ -1,8 +1,10 @@
+import { MenuCategory } from '../core/menu-category';
 import { BeerSaleReportItem } from './beer-sale-report-item';
 
 export class BeerSaleReport {
   startDate: string;
   finishDate: string;
+  menuCategory: MenuCategory;
   regular: boolean;
   happy: boolean;
   staff: boolean;
@@ -13,6 +15,7 @@ export class BeerSaleReport {
   public constructor(init?: Partial<BeerSaleReport>) {
     this.startDate = '';
     this.finishDate = '';
+    this.menuCategory = new MenuCategory();
     this.regular = true;
     this.happy = true;
     this.staff = true;