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

2026-01-31 15:16:58 +00:00
1 parent b79af6e1c6
commit 6e8843d3c4
@@ -0,0 +1,120 @@
+<h2>Bundle</h2>
+
+<form [formGroup]="form">
+  <div class="row-container">
+    <mat-form-field class="basis-3-4">
+      <mat-label>Name</mat-label>
+      <input matInput #name formControlName="name" />
+    </mat-form-field>
+
+    <mat-form-field class="basis-1-4">
+      <mat-label>Units</mat-label>
+      <input matInput formControlName="units" />
+    </mat-form-field>
+  </div>
+
+  <div class="row-container">
+    <mat-form-field class="basis-1-4">
+      <mat-label>Sale Price</mat-label>
+      <input matInput type="number" formControlName="salePrice" readonly="" />
+      <mat-hint>Computed from bundle items</mat-hint>
+    </mat-form-field>
+
+    <mat-form-field class="basis-2-4">
+      <mat-label>Menu Category</mat-label>
+      <mat-select formControlName="menuCategory">
+        @for (mc of menuCategories; track mc) {
+          <mat-option [value]="mc.id">
+            {{ mc.name }}
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+
+    <mat-checkbox formControlName="hasHappyHour" class="basis-1-4">Has Happy Hour?</mat-checkbox>
+    <mat-checkbox formControlName="isNotAvailable" class="basis-1-4">Not Available?</mat-checkbox>
+  </div>
+
+  <h2>Items</h2>
+
+  <div formGroupName="addRow" class="nutrition-grid">
+    <mat-form-field class="flex-auto">
+      <mat-label>Product</mat-label>
+      <input
+        type="text"
+        matInput
+        formControlName="itemId"
+        [matAutocomplete]="autoItem"
+        [value]="displayFn(form.controls.addRow.controls.itemId.value)"
+      />
+      <mat-autocomplete #autoItem="matAutocomplete" [displayWith]="displayFn" (optionSelected)="bundleSelected($event)">
+        @for (p of itemProducts | async; track p) {
+          <mat-option [value]="p">{{ p.name }}</mat-option>
+        }
+      </mat-autocomplete>
+    </mat-form-field>
+
+    <mat-form-field class="flex-auto">
+      <mat-label>Quantity</mat-label>
+      <input matInput type="number" formControlName="quantity" />
+    </mat-form-field>
+
+    <mat-form-field class="flex-auto">
+      <mat-label>Sale Price</mat-label>
+      <input matInput type="number" formControlName="salePrice" />
+    </mat-form-field>
+
+    <button mat-raised-button color="primary" (click)="addRow()" class="flex-auto">Add</button>
+  </div>
+</form>
+
+<div class="row-container wrapped">
+  <mat-table [dataSource]="dataSource" aria-label="Bundle Items" class="flex-auto">
+    <!-- Name Column (name is "name (units)") -->
+    <ng-container matColumnDef="name">
+      <mat-header-cell *matHeaderCellDef>Item</mat-header-cell>
+      <mat-cell *matCellDef="let row">
+        {{ row.name }}
+      </mat-cell>
+    </ng-container>
+
+    <!-- Quantity Column -->
+    <ng-container matColumnDef="quantity">
+      <mat-header-cell *matHeaderCellDef class="right">Qty</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">
+        {{ row.quantity }}
+      </mat-cell>
+    </ng-container>
+
+    <!-- Sale Price Column -->
+    <ng-container matColumnDef="salePrice">
+      <mat-header-cell *matHeaderCellDef class="right">Sale Price</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">
+        {{ row.salePrice | currency: 'INR' }}
+      </mat-cell>
+    </ng-container>
+
+    <!-- Action Column -->
+    <ng-container matColumnDef="action">
+      <mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="center">
+        <button mat-icon-button tabindex="-1" (click)="editRow(row)">
+          <mat-icon>edit</mat-icon>
+        </button>
+        <button mat-icon-button tabindex="-1" color="warn" (click)="deleteRow(row)">
+          <mat-icon>delete</mat-icon>
+        </button>
+      </mat-cell>
+    </ng-container>
+
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+  </mat-table>
+</div>
+
+<div class="row-container">
+  <button mat-raised-button color="primary" (click)="save()">Save</button>
+  @if (!!item.id) {
+    <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
+  }
+</div>