From 7de81096bb972e98bb7773a6ccffd737a0294234 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Wed, 24 Sep 2025 11:06:25 +0200
Subject: [PATCH] up main page of csc

---
 my-workspace/projects/sae-lib/README.md       |   1 +
 .../sae-lib/chatbot/bot-talks/bot-talks.scss  |   2 +-
 .../filters/filters-group/filters-group.html  |   3 +-
 .../filters/filters-group/filters-group.scss  |  10 +-
 .../inputs/multi-selector/multi-selector.scss |   5 +-
 sae-csc/README.md                             |   5 +
 sae-csc/src/app/pages/main/main.html          |  20 +++-
 sae-csc/src/app/pages/main/main.scss          |  12 ++
 sae-csc/src/app/pages/main/main.ts            |   4 +-
 .../pages/similar-cases/similar-cases.html    |   2 +-
 .../app/pages/similar-cases/similar-cases.ts  |   1 +
 .../translate-texts/translate-texts.html      |  21 +++-
 .../translate-texts/translate-texts.scss      |  10 +-
 .../shared/translate-texts/translate-texts.ts | 106 +++++++++++++++---
 14 files changed, 165 insertions(+), 37 deletions(-)

diff --git a/my-workspace/projects/sae-lib/README.md b/my-workspace/projects/sae-lib/README.md
index 8276589..fe8de2f 100644
--- a/my-workspace/projects/sae-lib/README.md
+++ b/my-workspace/projects/sae-lib/README.md
@@ -61,3 +61,4 @@ Angular CLI does not come with an end-to-end testing framework by default. You c
 ## Additional Resources
 
 For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+
diff --git a/my-workspace/projects/sae-lib/chatbot/bot-talks/bot-talks.scss b/my-workspace/projects/sae-lib/chatbot/bot-talks/bot-talks.scss
index 55dfc6e..e6454e6 100644
--- a/my-workspace/projects/sae-lib/chatbot/bot-talks/bot-talks.scss
+++ b/my-workspace/projects/sae-lib/chatbot/bot-talks/bot-talks.scss
@@ -74,7 +74,7 @@
   }
 
   .avatar-container {
-    background: white;
+    //background: white;
     padding: 12px;
   }
 
diff --git a/my-workspace/projects/sae-lib/filters/filters-group/filters-group.html b/my-workspace/projects/sae-lib/filters/filters-group/filters-group.html
index b62ab92..21066e8 100644
--- a/my-workspace/projects/sae-lib/filters/filters-group/filters-group.html
+++ b/my-workspace/projects/sae-lib/filters/filters-group/filters-group.html
@@ -1,4 +1,5 @@
 <div [ngClass]="{highlighted, 'is-disabled': disabled}" class="filter-group">
+  <!--  disabled: {{ disabled }}-->
   <div class="selectors">
     <sae-multi-selector
       (availableChoicesChange)="onAvailableChoicesChange($event, 'engineType')"
@@ -60,7 +61,7 @@
   @if (!hideChipsList) {
     <div (click)="highlighted = !highlighted" class="chips-listing">
       <!--    liste de chips-->
- 
+
       <div class="chips-column">
         @for (elem of appState.filters.engineType.selectedList; track elem.label) {
           <button class="button chips is-rounded is-small">
diff --git a/my-workspace/projects/sae-lib/filters/filters-group/filters-group.scss b/my-workspace/projects/sae-lib/filters/filters-group/filters-group.scss
index 115fc57..d54f42a 100644
--- a/my-workspace/projects/sae-lib/filters/filters-group/filters-group.scss
+++ b/my-workspace/projects/sae-lib/filters/filters-group/filters-group.scss
@@ -46,6 +46,12 @@
   .filter-group {
 
 
+    &.is-disabled {
+      input {
+        background: grey;
+      }
+    }
+
     .search {
       display: flex;
       min-height: 42px;
@@ -70,8 +76,8 @@
       overflow-y: auto;
 
       .chips-column {
-        padding: 12px 12px;
-        width: 218px;
+        padding: 12px 16px;
+        width: 222px;
         //border: solid 1px #ccc;
       }
 
diff --git a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.scss b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.scss
index 7154d3a..813dfbb 100644
--- a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.scss
+++ b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.scss
@@ -20,8 +20,8 @@
       }
 
       &.is-disabled {
-        color: #525668;
-        fill: #525668;
+        color: #8d91a4;
+        fill: #8d91a4;
       }
     }
 
@@ -82,6 +82,7 @@
 
       .is-disabled & {
         border-color: #525668;
+        background: #8D91A4;
       }
     }
 
diff --git a/sae-csc/README.md b/sae-csc/README.md
index eee778a..5ee8491 100644
--- a/sae-csc/README.md
+++ b/sae-csc/README.md
@@ -57,3 +57,8 @@ Angular CLI does not come with an end-to-end testing framework by default. You c
 ## Additional Resources
 
 For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+
+## doing
+
+display des dropdown de filtres
+syncro from text et store
diff --git a/sae-csc/src/app/pages/main/main.html b/sae-csc/src/app/pages/main/main.html
index 94fdaf7..1272cd9 100644
--- a/sae-csc/src/app/pages/main/main.html
+++ b/sae-csc/src/app/pages/main/main.html
@@ -32,18 +32,28 @@
       <h2 class="title">
         Question analysis
       </h2>
-      @if (displayBotWarning) {
-        <sae-bot-talks
-          [message]="appState.botMessage"></sae-bot-talks>
-      }
+      <!--      @if (displayBotWarning) {-->
+
+      <sae-bot-talks
+        [message]="appState.botMessage"
+        [ngClass]="{ 'is-visible' : displayBotWarning }"></sae-bot-talks>
+      <!--      }-->
       <!--filters-->
       <!--      advanced filters-->
       <div class="filters-container">
         <sae-filters-group (selectionchange)="onSelectedChoicesChange()" [appState]="appState"
-                           [disabled]="!appState.fromText.length"></sae-filters-group>
+                           [disabled]="!appState.toText.length"></sae-filters-group>
       </div>
     </div>
     <app-bottom-navigation></app-bottom-navigation>
+
+    fromText:
+    {{ appState.fromText }}
+    <br>
+    totext:
+    {{ appState.toText }}
+
+
   </main>
   <footer>
 
diff --git a/sae-csc/src/app/pages/main/main.scss b/sae-csc/src/app/pages/main/main.scss
index 13f1c58..e453909 100644
--- a/sae-csc/src/app/pages/main/main.scss
+++ b/sae-csc/src/app/pages/main/main.scss
@@ -58,4 +58,16 @@
     padding-bottom: 400px;
   }
 
+  sae-bot-talks {
+    position: absolute;
+    top: 496px;
+    right: 0;
+    width: 100%;
+    visibility: hidden;
+
+    &.is-visible {
+      visibility: visible;
+    }
+  }
+
 }
diff --git a/sae-csc/src/app/pages/main/main.ts b/sae-csc/src/app/pages/main/main.ts
index 249d805..250e2c8 100644
--- a/sae-csc/src/app/pages/main/main.ts
+++ b/sae-csc/src/app/pages/main/main.ts
@@ -6,6 +6,7 @@ import {FeedbackButton} from 'sae-lib/buttons/feedback-button/feedback-button';
 import {BotTalks} from 'sae-lib/chatbot/bot-talks/bot-talks';
 import {Store} from '@ngrx/store';
 import {StateInterface} from '../../redux/reducers';
+import {NgClass} from '@angular/common';
 
 
 @Component({
@@ -15,7 +16,8 @@ import {StateInterface} from '../../redux/reducers';
     FiltersGroup,
     BottomNavigation,
     FeedbackButton,
-    BotTalks
+    BotTalks,
+    NgClass
   ],
   templateUrl: './main.html',
   styleUrl: './main.scss'
diff --git a/sae-csc/src/app/pages/similar-cases/similar-cases.html b/sae-csc/src/app/pages/similar-cases/similar-cases.html
index fc91dce..7a71be9 100644
--- a/sae-csc/src/app/pages/similar-cases/similar-cases.html
+++ b/sae-csc/src/app/pages/similar-cases/similar-cases.html
@@ -44,7 +44,7 @@
     }
 
     <div class="row filters-row">
-      <sae-filters-group [hideChipsList]="true"></sae-filters-group>
+      <sae-filters-group [disabled]="disabledFilters" [hideChipsList]="true"></sae-filters-group>
     </div>
   </header>
   <main>
diff --git a/sae-csc/src/app/pages/similar-cases/similar-cases.ts b/sae-csc/src/app/pages/similar-cases/similar-cases.ts
index db6efdb..b4d353b 100644
--- a/sae-csc/src/app/pages/similar-cases/similar-cases.ts
+++ b/sae-csc/src/app/pages/similar-cases/similar-cases.ts
@@ -29,6 +29,7 @@ export class SimilarCases {
   public appState: any = {};
   activeTab: string = "summarized";
   displayHeaderTabs: boolean = false;
+  disabledFilters: boolean = true;
 
   constructor(private store: Store<StateInterface>) {
     this.store.select(state => state.app).subscribe(app => {
diff --git a/sae-csc/src/app/shared/translate-texts/translate-texts.html b/sae-csc/src/app/shared/translate-texts/translate-texts.html
index b40349a..bb0a4a6 100644
--- a/sae-csc/src/app/shared/translate-texts/translate-texts.html
+++ b/sae-csc/src/app/shared/translate-texts/translate-texts.html
@@ -1,7 +1,9 @@
 <div class="translate-texts is-{{disabled? 'disabled' : 'enabled'}}">
 
 
-  <div id="fromText">
+  <div [ngClass]="{
+  'is-focused' : fromTextFocused
+  }" id="fromText">
 
     @if (!fileIsUploaded || !appState.fromText.length) {
       <!--      @if (appState.fromText.length == 0) {-->
@@ -46,9 +48,10 @@
     @if (!fileIsUploaded) {
       <textarea
         (focus)="focusFromText()"
+        (blur)="blurFromText()"
         (keyup)="onFromTextChanged()"
         (ngModelChange)="onFromTextChanged()"
-        [(ngModel)]="appState.fromText"
+        [ngModel]="appState.fromText"
         cols="30"
         id="from_text"
         name="from_text"
@@ -57,7 +60,9 @@
     }
   </div>
 
-  <div id="toText">
+  <div [ngClass]="{
+  'is-focused' : toTextFocused
+  }" id="toText">
 
     @if (loadingResume) {
       <div class="loading-container">
@@ -72,9 +77,13 @@
       <button (click)="emptyText('toText')" class="delete-button button">x</button>
     }
     @if (!loadingResume) {
-      <textarea [(ngModel)]="toText" cols="30" id="to_text" name="to_text" rows="10"></textarea>
+      <textarea
+        [ngModel]="appState.toText"
+        (ngModelChange)="onToTextChanged()"
+        (keyup)="onToTextChanged()"
+        (focus)="focusToText()"
+        (blur)="blurToText()"
+        cols="30" id="to_text" name="to_text" rows="10"></textarea>
     }
   </div>
-
 </div>
-
diff --git a/sae-csc/src/app/shared/translate-texts/translate-texts.scss b/sae-csc/src/app/shared/translate-texts/translate-texts.scss
index 36a9ad5..989df9c 100644
--- a/sae-csc/src/app/shared/translate-texts/translate-texts.scss
+++ b/sae-csc/src/app/shared/translate-texts/translate-texts.scss
@@ -17,13 +17,17 @@
     background: white;
     height: 235px;
     width: 648px;
-    overflow-y: auto;
+    overflow: hidden;
     border-radius: 8px;
 
 
     textarea {
       padding: variables.$spacing-4 42px variables.$spacing-4 variables.$spacing-4;
     }
+
+    &.is-focused {
+      outline: 3px solid #255B8E;
+    }
   }
 
   .delete-button {
@@ -77,6 +81,10 @@
       line-height: 140%;
       width: 370px;
     }
+
+    &:focus {
+      outline: none;
+    }
   }
 
   .click-file-upload {
diff --git a/sae-csc/src/app/shared/translate-texts/translate-texts.ts b/sae-csc/src/app/shared/translate-texts/translate-texts.ts
index 9c71237..1cc0323 100644
--- a/sae-csc/src/app/shared/translate-texts/translate-texts.ts
+++ b/sae-csc/src/app/shared/translate-texts/translate-texts.ts
@@ -17,7 +17,8 @@ export class TranslateTexts {
   public loadingResume: boolean = false;
   public mode: string = 'demo';
   public debounceEnabled: boolean = true;
-  public textFocused: boolean = false;
+  public fromTextFocused: boolean = false;
+  public toTextFocused: boolean = false;
 
 
   public fileIsUploaded: boolean = false;
@@ -45,7 +46,7 @@ export class TranslateTexts {
 
   }
 
-  onToTextChanged(e: any): void {
+  onToTextChanged(e?: any): void {
     console.log('text changed toText', e)
     // launch request
     // in demo mode, fill some filters
@@ -61,14 +62,68 @@ export class TranslateTexts {
         // in demo mode, load demo filters
         console.log('demo mode, on émet updateFilters')
 
-        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.updateFilters.emit();
+        this.store.dispatch({
+          type: ActionTypes.UPDATE_APP,
+          payload: {
+            toText: e && typeof e.value === 'function' ? e.value() : this.appState.toText,
+            filters: {
+              engineType:
+                {
+                  // availableList: ['filter demo 1', 'filter demo 2'],
+                  selectedList: [{
+                    label: 'filter demo 1',
+                    value: 'DEF',
+                  }, {
+                    label: 'filter demo 2',
+                    value: 'DEF',
+                  }]
+                },
+              findings: {
+                availableList: [{
+                  label: 'DEF',
+                  value: 'DEF',
+                }],
+                selectedList: [{
+                  label: 'GER',
+                  value: 'GER',
+                }, {
+                  label: '134D',
+                  value: '134D',
+                },]
+              },
+              ata: {
+                availableList: [{
+                  label: 'DEF',
+                  value: 'DEF',
+                }],
+                selectedList: []
+              },
+              partNumber: {
+                availableList: [{
+                  label: 'DEF',
+                  value: 'DEF',
+                }],
+                selectedList: []
+              },
+              technicalManual: {
+                availableList: [{
+                  label: 'DEF',
+                  value: 'DEF',
+                }],
+                selectedList: [{
+                  label: 'DEF',
+                  value: 'DEF',
+                }]
+              },
+              onOffWing: {
+                availableList: [],
+                selectedList: []
+              }
+            }
+          }
+        })
+
         this.loadingResume = false;
       }, this.debounceEnabled ? this.debounceDuration : 0);
     }
@@ -80,7 +135,14 @@ export class TranslateTexts {
 
     console.log('text changed fromText', e)
 
-    // this.store.dispatch({})
+    // Update the fromText property in the Redux store
+    this.store.dispatch({
+      type: ActionTypes.UPDATE_APP,
+      payload: {
+        fromText: this.fromText
+      }
+    });
+
     // run research after a delay
     if (this.mode !== 'production') {
       this.loadingResume = true;
@@ -94,13 +156,14 @@ export class TranslateTexts {
       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.store.dispatch({
             type: ActionTypes.UPDATE_APP,
-            state: {
-              displayBot: true
+            payload: {
+              displayBot: true,
+              toText: "Résumé de démo à titre d'exemple"
             }
           })
 
@@ -140,10 +203,19 @@ export class TranslateTexts {
   }
 
   focusFromText(e?: any) {
-    console.log('focus from text', e)
-    console.log('focus from text')
     this.onRemoveFileSelected()
-    // this.fromText = ' '
-    this.textFocused = true
+    this.fromTextFocused = true
+  }
+
+  blurFromText() {
+    this.fromTextFocused = false
+  }
+
+  focusToText() {
+    this.toTextFocused = true
+  }
+
+  blurToText() {
+    this.toTextFocused = false
   }
 }