add keyboard events to the cashier component

Author: LexCoder17

package-lock.json

@@ -1,5 +1,10 @@
 <div #calculatorContainer class="calculator" tabindex="-1">
-  <div class="display" (dblclick)="selectAll()" [class.selected]="isSelected()">
+  <div
+    class="display"
+    (dblclick)="selectAll()"
+    [class.selected]="isSelected()"
+    [class.editing]="selectedItemId() !== null"
+  >
     <ng-container *ngIf="isMultiplying()">
       <div class="multiply-label">
         <span *ngIf="multiplyMode() === 'add'">{{

src/app/components/calculator/calculator.component.html

@@ -38,6 +38,20 @@
     }
   }
 
+  &.editing {
+    background: rgba($success, 0.2);
+    box-shadow:
+      inset 0 2px 8px rgba(0, 0, 0, 0.2),
+      0 0 0 3px rgba($success, 0.6);
+    border: 2px solid $success;
+
+    .display-value,
+    .quantity-display {
+      color: $success;
+      font-weight: 800;
+    }
+  }
+
   .multiply-label {
     font-size: 0.875rem;
     font-weight: 600;

src/app/components/calculator/calculator.component.scss

@@ -34,6 +34,7 @@ export class CalculatorComponent implements AfterViewInit {
   // Inputs
   lastItemPrice = input<number | null>(null);
   itemsCount = input<number>(0);
+  selectedItemId = input<number | null>(null);
 
   // Outputs
   addItem = output<CalculatorAddEvent>();

src/app/components/calculator/calculator.component.ts

@@ -41,6 +41,7 @@
       <app-calculator
         [lastItemPrice]="getLastItemPrice()"
         [itemsCount]="items().length"
+        [selectedItemId]="selectedItemId()"
         (addItem)="onCalculatorAdd($event)"
         (multiplyConfirm)="onCalculatorMultiplyConfirm($event)"
         (looseProductRequest)="openLooseProductModal()"
@@ -409,6 +410,7 @@ <h2>
         <div class="form-group">
           <label for="weight">Weight (kg):</label>
           <input
+            #weightInput
             id="weight"
             type="number"
             step="0.001"
@@ -420,6 +422,7 @@ <h2>
               looseProductWeight() && parseFloat(looseProductWeight()) <= 0
             "
             [readonly]="useScaleWeight() && scaleConnected()"
+            (keydown.enter)="handleLooseProductEnter($event)"
           />
           <small *ngIf="useScaleWeight() && scaleConnected()" class="help-text">
             <i class="fas fa-info-circle"></i>
@@ -430,6 +433,7 @@ <h2>
         <div class="form-group">
           <label for="pricePerKg">Price per kg ($):</label>
           <input
+            #pricePerKgInput
             id="pricePerKg"
             type="number"
             step="0.01"
@@ -441,6 +445,7 @@ <h2>
               looseProductPricePerKg() &&
               parseFloat(looseProductPricePerKg()) <= 0
             "
+            (keydown.enter)="handleLooseProductEnter($event)"
           />
         </div>