styling multi filters

sae-csc/src/app/shared/translate-texts/translate-texts.ts

@@ -0,0 +1,134 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {NgClass} from '@angular/common';
+import {Store} from '@ngrx/store';
+import {StateInterface} from './../../redux/reducers';
+
+@Component({
+  selector: 'sae-translate-texts',
+  imports: [FormsModule, NgClass],
+  templateUrl: './translate-texts.html',
+  styleUrl: './translate-texts.scss'
+})
+export class TranslateTexts {
+  public fromText: string = ''
+  public toText: string = 'résumé ici'
+  public loadingResume: boolean = false;
+  public mode: string = 'demo';
+  public debounceEnabled: boolean = true;
+  public textFocused: boolean = false;
+
+  public fileIsUploaded: boolean = false;
+  public filePath: string = '';
+  public fileWeight: string = '';
+  
+  // testing display of file selector
+  // public fileIsUploaded: boolean = true;
+  // public filePath: string = 'abcd.csv';
+  // public fileWeight: string = '12 kb';
+
+  public fromTimeout: any;
+  public debounceDuration: number = 1000;
+  @Input() appState: any = {};
+  @Output() updateFilters: EventEmitter<any> = new EventEmitter();
+
+  constructor(private store: Store<StateInterface>) {
+    // Subscribe to the app state to get the loading state
+    this.store.select(state => state.app.loading).subscribe(loading => {
+      this.loadingResume = loading;
+    });
+    this.store.select(state => state.app).subscribe(appState => {
+      this.appState = appState;
+    });
+
+  }
+
+  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)
+
+    // this.store.dispatch({})
+    // 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] = '';
+  }
+
+  onFileSelected($event: any) {
+    console.log('file selected', $event, $event.target.value)
+    if ($event.target.value) {
+      this.fileIsUploaded = true;
+      this.filePath = $event.target.value;
+      this.fileWeight = $event.target.value;
+    }
+  }
+
+  onRemoveFileSelected() {
+    this.fileIsUploaded = false;
+    this.filePath = '';
+    this.fileWeight = '';
+
+    // document.getElementById('fromText')?.focus();
+  }
+
+  clickFileUpload(fileUpload: HTMLInputElement) {
+    fileUpload.click();
+    console.log('click file upload', fileUpload)
+  }
+
+  focusFromText(e?: any) {
+    console.log('focus from text', e)
+    console.log('focus from text')
+    this.onRemoveFileSelected()
+    // this.fromText = ' '
+    this.textFocused = true
+  }
+}