up debounce text pair

my-workspace/projects/sae-lib/inbox/translate-texts/translate-texts.html

@@ -9,7 +9,8 @@
         @if (fromText.length > 0) {
           <button (click)="emptyText('fromText')" class="delete-button button">x</button>
         }
-        <textarea [(ngModel)]="fromText" cols="30" id="from_text" name="from_text"
+        <textarea (keyup)="onFromTextChanged()" [(ngModel)]="fromText" cols="30" id="from_text"
+                  name="from_text"
                   placeholder=""
                   rows="10"></textarea>
         <button (click)="clickFileUpload(fileUpload)" class=" click-file-upload is-outlined">
@@ -23,12 +24,19 @@
     </div>
     <div class="column">
 
+
       <div id="toText">
         @if (toText.length > 0) {
           <button (click)="emptyText('toText')" class="delete-button button">x</button>
         }
         <textarea [(ngModel)]="toText" cols="30" id="to_text" name="to_text" rows="10"></textarea>
       </div>
+      @if (loadingResume) {
+        <div class="loading">
+          loading...
+        </div>
+      }
+
     </div>
   </div>
 </div>

my-workspace/projects/sae-lib/inbox/translate-texts/translate-texts.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, EventEmitter, Output} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 
 @Component({
@@ -10,7 +10,67 @@ import {FormsModule} from '@angular/forms';
 })
 export class TranslateTexts {
   public fromText: string = ''
-  public toText: 'fromText' | 'toText' | '' = ''
+  public toText: string = 'résumé ici'
+  public loadingResume: boolean = false;
+  public mode: string = 'demo';
+  public debounceEnabled: boolean = false;
+  public fromTimeout: any;
+  public debounceDuration: number = 1000;
+  @Output() updateFilters: EventEmitter<any> = new EventEmitter();
+
+
+  onToTextChanged(e: any): void {
+    console.log('text changed toText', e)
+    // launch request
+    // in demo mode, fill some filters
+    if (this.mode !== 'production') {
+
+      // Clear any existing timeout to reset the debounce
+      if (this.fromTimeout) {
+        clearTimeout(this.fromTimeout);
+      }
+
+      // Set a new timeout
+      this.fromTimeout = setTimeout(() => {
+        // in demo mode, load demo filters
+        console.log('demo mode')
+
+        const newFilters = [
+          ['filter demo 1', 'filter demo 2'],
+          ['filter demo 3'],
+          ['filter demo 4', 'filter demo ABCD'],
+          ['filter demo 5'],
+        ]
+        this.updateFilters.emit(newFilters);
+        this.loadingResume = false;
+      }, this.debounceDuration);
+    }
+  }
+
+  onFromTextChanged(e?: any): void {
+
+    console.log('text changed fromText', e)
+    // run research after a delay
+    if (this.mode !== 'production') {
+      this.loadingResume = true;
+
+      // Clear any existing timeout to reset the debounce
+      if (this.fromTimeout) {
+        clearTimeout(this.fromTimeout);
+      }
+
+      // Set a new timeout
+      this.fromTimeout = setTimeout(() => {
+          // in demo mode, make a fake resume
+          console.log('demo mode')
+          this.toText = "Résumé de démo à titre d'exemple"
+          this.loadingResume = false;
+        },
+        this.debounceDuration);
+
+    }
+
+  }
 
   emptyText(someText: 'fromText' | 'toText') {
     this[someText] = '';