Feature: Added product bundles. Have to wire it up to inventory and reports.

bookie/src/app/bundles/bundle-list/bundle-list.component.ts

@@ -0,0 +1,117 @@
+import { AsyncPipe, CurrencyPipe } from '@angular/common';
+import { Component, OnInit, inject } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatOptionModule } from '@angular/material/core';
+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, RouterModule } from '@angular/router';
+import { BehaviorSubject } from 'rxjs';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+
+import { MenuCategory } from '../../core/menu-category';
+import { ToCsvService } from '../../shared/to-csv.service';
+import { Bundle } from '../bundle';
+import { BundleListDataSource } from './bundle-list-datasource';
+
+@Component({
+  selector: 'app-bundle-list',
+  templateUrl: './bundle-list.component.html',
+  styleUrls: ['./bundle-list.component.css'],
+  imports: [
+    AsyncPipe,
+    CurrencyPipe,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule,
+    MatOptionModule,
+    MatSelectModule,
+    MatTableModule,
+    ReactiveFormsModule,
+    RouterModule,
+  ],
+})
+export class BundleListComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  private toCsv = inject(ToCsvService);
+
+  searchFilter = new BehaviorSubject<string>('');
+  menuCategoryFilter = new BehaviorSubject<string>('');
+  data: BehaviorSubject<Bundle[]> = new BehaviorSubject<Bundle[]>([]);
+  dataSource: BundleListDataSource = new BundleListDataSource(this.searchFilter, this.menuCategoryFilter, this.data);
+
+  form: FormGroup<{
+    menuCategory: FormControl<string | null>;
+    filter: FormControl<string>;
+  }>;
+
+  list: Bundle[] = [];
+  menuCategories: MenuCategory[] = [];
+  displayedColumns: string[] = ['name', 'price', 'menuCategory', 'info', 'items'];
+
+  constructor() {
+    this.form = new FormGroup({
+      menuCategory: new FormControl<string | null>(''),
+      filter: new FormControl<string>('', { nonNullable: true }),
+    });
+
+    this.data.subscribe((data: Bundle[]) => {
+      this.list = data;
+    });
+
+    this.form.controls.filter.valueChanges.pipe(debounceTime(150), distinctUntilChanged()).subscribe((value) => {
+      this.searchFilter.next(value ?? '');
+    });
+  }
+
+  filterOn(val: string) {
+    this.menuCategoryFilter.next(val);
+  }
+
+  ngOnInit() {
+    this.dataSource = new BundleListDataSource(this.searchFilter, this.menuCategoryFilter, this.data);
+    this.route.data.subscribe((value) => {
+      const data = value as { list: Bundle[]; menuCategories: MenuCategory[] };
+      this.loadData(data.list, data.menuCategories);
+    });
+  }
+
+  loadData(list: Bundle[], menuCategories: MenuCategory[]) {
+    this.menuCategories = menuCategories;
+    this.data.next(list);
+  }
+
+  exportCsv() {
+    const headers = {
+      Name: 'name',
+      Units: 'units',
+      Price: 'salePrice',
+      MenuCategory: 'menuCategory',
+      Items: 'items',
+    };
+
+    // Map items to count for csv (simple)
+    const csvList = this.dataSource.filteredData.map((b) => ({
+      ...b,
+      menuCategory: b.menuCategory?.name ?? '',
+      items: (b.items ?? [])
+        .map((i) => `${i.name}${i.quantity && i.quantity !== 1 ? ` x${i.quantity}` : ''}`)
+        .join(' | '),
+    }));
+
+    const csvData = new Blob([this.toCsv.toCsv(headers, csvList as unknown as Bundle[])], {
+      type: 'text/csv;charset=utf-8;',
+    });
+
+    const link = document.createElement('a');
+    link.href = window.URL.createObjectURL(csvData);
+    link.setAttribute('download', 'bundles.csv');
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }
+}