From 6e52988cdd24be4acdb064e6c982383960bfc120 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joe=20K=C3=BCng?= <joekueng05@gmail.com>
Date: Fri, 27 Feb 2026 11:50:17 +0100
Subject: [PATCH] feat(front-end): delay on update

---
 .../src/app/core/layout/navbar.component.html |  2 +-
 .../src/app/core/services/language.service.ts | 13 +++
 .../calculator/calculator-page.component.ts   |  7 +-
 .../quote-result/quote-result.component.html  |  1 +
 .../quote-result/quote-result.component.ts    | 85 +++++++++++++++++--
 5 files changed, 92 insertions(+), 16 deletions(-)

diff --git a/frontend/src/app/core/layout/navbar.component.html b/frontend/src/app/core/layout/navbar.component.html
index 15347c0..a53b967 100644
--- a/frontend/src/app/core/layout/navbar.component.html
+++ b/frontend/src/app/core/layout/navbar.component.html
@@ -19,7 +19,7 @@
         <div class="actions">
           <select
             class="lang-switch"
-            [value]="langService.currentLang()"
+            [value]="langService.selectedLang()"
             (change)="onLanguageChange($event)"
             [attr.aria-label]="'NAV.LANGUAGE_SELECTOR' | translate">
             @for (option of languageOptions; track option.value) {
diff --git a/frontend/src/app/core/services/language.service.ts b/frontend/src/app/core/services/language.service.ts
index 742101e..f431344 100644
--- a/frontend/src/app/core/services/language.service.ts
+++ b/frontend/src/app/core/services/language.service.ts
@@ -15,6 +15,12 @@ export class LanguageService {
   ) {
     this.translate.addLangs(this.supportedLangs);
     this.translate.setDefaultLang('it');
+    this.translate.onLangChange.subscribe(event => {
+      const lang = typeof event.lang === 'string' ? event.lang.toLowerCase() : null;
+      if (this.isSupportedLang(lang) && lang !== this.currentLang()) {
+        this.currentLang.set(lang);
+      }
+    });
 
     const initialTree = this.router.parseUrl(this.router.url);
     const initialSegments = this.getPrimarySegments(initialTree);
@@ -55,6 +61,13 @@ export class LanguageService {
     this.navigateIfChanged(currentTree, targetSegments);
   }
 
+  selectedLang(): 'it' | 'en' | 'de' | 'fr' {
+    const activeLang = typeof this.translate.currentLang === 'string'
+      ? this.translate.currentLang.toLowerCase()
+      : null;
+    return this.isSupportedLang(activeLang) ? activeLang : this.currentLang();
+  }
+
   private ensureLanguageInPath(urlTree: UrlTree): void {
     const segments = this.getPrimarySegments(urlTree);
 
diff --git a/frontend/src/app/features/calculator/calculator-page.component.ts b/frontend/src/app/features/calculator/calculator-page.component.ts
index 9bef380..d8284a5 100644
--- a/frontend/src/app/features/calculator/calculator-page.component.ts
+++ b/frontend/src/app/features/calculator/calculator-page.component.ts
@@ -228,8 +228,7 @@ export class CalculatorPageComponent implements OnInit {
       if (event.id) {
           const currentSessionId = this.result()?.sessionId;
           if (!currentSessionId) return;
-          
-          this.loading.set(true);
+
           this.estimator.updateLineItem(event.id, { quantity: event.quantity }).subscribe({
               next: () => {
                   // 3. Fetch the updated session totals from the backend
@@ -241,24 +240,20 @@ export class CalculatorPageComponent implements OnInit {
 
                           if (this.isInvalidQuote(newResult)) {
                               this.setQuoteError('CALC.ERROR_ZERO_PRICE');
-                              this.loading.set(false);
                               return;
                           }
 
                           this.error.set(false);
                           this.errorKey.set('CALC.ERROR_GENERIC');
                           this.result.set(newResult);
-                          this.loading.set(false);
                       },
                       error: (err) => {
                           console.error('Failed to refresh session totals', err);
-                          this.loading.set(false);
                       }
                   });
               },
               error: (err) => {
                   console.error('Failed to update line item', err);
-                  this.loading.set(false);
               }
           });
       }
diff --git a/frontend/src/app/features/calculator/components/quote-result/quote-result.component.html b/frontend/src/app/features/calculator/components/quote-result/quote-result.component.html
index fd42252..4b009da 100644
--- a/frontend/src/app/features/calculator/components/quote-result/quote-result.component.html
+++ b/frontend/src/app/features/calculator/components/quote-result/quote-result.component.html
@@ -54,6 +54,7 @@
                     [max]="maxInputQuantity"
                     [ngModel]="item.quantity" 
                     (ngModelChange)="updateQuantity(i, $event)"
+                    (blur)="flushQuantityUpdate(i)"
                     class="qty-input">
             </div>
             <div class="item-price">
diff --git a/frontend/src/app/features/calculator/components/quote-result/quote-result.component.ts b/frontend/src/app/features/calculator/components/quote-result/quote-result.component.ts
index dfe8138..3320816 100644
--- a/frontend/src/app/features/calculator/components/quote-result/quote-result.component.ts
+++ b/frontend/src/app/features/calculator/components/quote-result/quote-result.component.ts
@@ -1,4 +1,4 @@
-import { Component, input, output, signal, computed, effect } from '@angular/core';
+import { Component, OnDestroy, input, output, signal, computed, effect } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { TranslateModule } from '@ngx-translate/core';
@@ -14,9 +14,10 @@ import { QuoteResult, QuoteItem } from '../../services/quote-estimator.service';
   templateUrl: './quote-result.component.html',
   styleUrl: './quote-result.component.scss'
 })
-export class QuoteResultComponent {
+export class QuoteResultComponent implements OnDestroy {
   readonly maxInputQuantity = 500;
   readonly directOrderLimit = 100;
+  readonly quantityAutoRefreshMs = 2000;
 
   result = input.required<QuoteResult>();
   consult = output<void>();
@@ -25,31 +26,67 @@ export class QuoteResultComponent {
 
   // Local mutable state for items to handle quantity changes
   items = signal<QuoteItem[]>([]);
+  private lastSentQuantities = new Map<string, number>();
+  private quantityTimers = new Map<string, ReturnType<typeof setTimeout>>();
 
   constructor() {
       effect(() => {
+          this.clearAllQuantityTimers();
+
           // Initialize local items when result inputs change
           // We map to new objects to avoid mutating the input directly if it was a reference
-          this.items.set(this.result().items.map(i => ({...i})));
+          const nextItems = this.result().items.map(i => ({...i}));
+          this.items.set(nextItems);
+
+          this.lastSentQuantities.clear();
+          nextItems.forEach(item => {
+              const key = item.id ?? item.fileName;
+              this.lastSentQuantities.set(key, item.quantity);
+          });
       }, { allowSignalWrites: true });
   }
 
+  ngOnDestroy(): void {
+      this.clearAllQuantityTimers();
+  }
+
   updateQuantity(index: number, newQty: number | string) {
-      const qty = typeof newQty === 'string' ? parseInt(newQty, 10) : newQty;
-      if (qty < 1 || isNaN(qty)) return;
-      const normalizedQty = Math.min(qty, this.maxInputQuantity);
+      const normalizedQty = this.normalizeQuantity(newQty);
+      if (normalizedQty === null) return;
+
+      const item = this.items()[index];
+      if (!item) return;
+      const key = item.id ?? item.fileName;
 
       this.items.update(current => {
           const updated = [...current];
           updated[index] = { ...updated[index], quantity: normalizedQty };
           return updated;
       });
-      
+
+      this.scheduleQuantityRefresh(index, key);
+  }
+
+  flushQuantityUpdate(index: number): void {
+      const item = this.items()[index];
+      if (!item) return;
+
+      const key = item.id ?? item.fileName;
+      this.clearQuantityRefreshTimer(key);
+
+      const normalizedQty = this.normalizeQuantity(item.quantity);
+      if (normalizedQty === null) return;
+
+      if (this.lastSentQuantities.get(key) === normalizedQty) {
+          return;
+      }
+
       this.itemChange.emit({
-          id: this.items()[index].id,
-          fileName: this.items()[index].fileName,
+          id: item.id,
+          fileName: item.fileName,
           quantity: normalizedQty
       });
+      this.lastSentQuantities.set(key, normalizedQty);
   }
 
   hasQuantityOverLimit = computed(() => this.items().some(item => item.quantity > this.directOrderLimit));
@@ -78,4 +115,34 @@ export class QuoteResultComponent {
           weight: Math.ceil(weight)
       };
   });
+
+  private normalizeQuantity(newQty: number | string): number | null {
+      const qty = typeof newQty === 'string' ? parseInt(newQty, 10) : newQty;
+      if (!Number.isFinite(qty) || qty < 1) {
+          return null;
+      }
+      return Math.min(qty, this.maxInputQuantity);
+  }
+
+  private scheduleQuantityRefresh(index: number, key: string): void {
+      this.clearQuantityRefreshTimer(key);
+      const timer = setTimeout(() => {
+          this.quantityTimers.delete(key);
+          this.flushQuantityUpdate(index);
+      }, this.quantityAutoRefreshMs);
+      this.quantityTimers.set(key, timer);
+  }
+
+  private clearQuantityRefreshTimer(key: string): void {
+      const timer = this.quantityTimers.get(key);
+      if (!timer) return;
+      clearTimeout(timer);
+      this.quantityTimers.delete(key);
+  }
+
+  private clearAllQuantityTimers(): void {
+      this.quantityTimers.forEach(timer => clearTimeout(timer));
+      this.quantityTimers.clear();
+  }
+
 }