CSC link state to filters

my-workspace/projects/sae-lib/buttons/main-button/main-button.scss

@@ -8,6 +8,7 @@
   display: inline-block;
   font-family: Barlow;
 
+
   button {
     background: shadows.$primary-color;
     color: shadows.$neutral-white;

my-workspace/projects/sae-lib/colours/index/index.html

@@ -1 +0,0 @@
-<p>index works!</p>

my-workspace/projects/sae-lib/colours/index/index.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { Index } from './index';
-
-describe('Index', () => {
-  let component: Index;
-  let fixture: ComponentFixture<Index>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [Index]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(Index);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

my-workspace/projects/sae-lib/colours/index/index.ts

@@ -1,11 +0,0 @@
-import {Component} from '@angular/core';
-
-@Component({
-  selector: 'sae-main-button',
-  imports: [],
-  templateUrl: './index.html',
-  styleUrl: './index.css'
-})
-export class Index {
-
-}

my-workspace/projects/sae-lib/effects/index/index.html

@@ -1 +0,0 @@
-<p>index works!</p>

my-workspace/projects/sae-lib/effects/index/index.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { Index } from './index';
-
-describe('Index', () => {
-  let component: Index;
-  let fixture: ComponentFixture<Index>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [Index]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(Index);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

my-workspace/projects/sae-lib/effects/index/index.ts

@@ -1,11 +0,0 @@
-import {Component} from '@angular/core';
-
-@Component({
-  selector: 'sae-main-button',
-  imports: [],
-  templateUrl: './index.html',
-  styleUrl: './index.css'
-})
-export class Index {
-
-}

my-workspace/projects/sae-lib/filters/filters-group/filters-group.html

@@ -1,7 +1,17 @@
 <div [ngClass]="{highlighted}" class="filter-group">
   <div class="selectors">
-    <sae-multi-selector [label]="'Engine type'"></sae-multi-selector>
+    <sae-multi-selector
-    <sae-multi-selector [label]="'Findings'"></sae-multi-selector>
+      (availableChoicesChange)="onAvailableChoicesChange"
+      (selectedChoicesChange)="onSelectedChoicesChange"
+      [availableChoices]="appState.filters.engineType.availableChoices"
+      [label]="'Engine type'"
+      [selectedChoices]="appState.filters.engineType.selectedChoices"
+    ></sae-multi-selector>
+    <sae-multi-selector
+
+      [disabled]="true" [label]="'Findings'"
+      [selectedChoices]="[]"
+    ></sae-multi-selector>
     <sae-multi-selector [label]="'ATA'"></sae-multi-selector>
     <sae-multi-selector [label]="'Part number'"></sae-multi-selector>
     <sae-multi-selector [label]="'Technical Manual'"></sae-multi-selector>

my-workspace/projects/sae-lib/filters/filters-group/filters-group.scss

@@ -17,10 +17,8 @@
     position: relative;
     right: 0;
     top: 0;
-
     cursor: pointer;
 
-
   }
 
   &:hover {

my-workspace/projects/sae-lib/filters/filters-group/filters-group.ts

@@ -13,4 +13,13 @@ import {NgClass} from '@angular/common';
 })
 export class FiltersGroup {
   @Input() highlighted = false;
+  @Input() appState: any = {};
+ 
+  onSelectedChoicesChange(e: any) {
+    console.log('onSelectedChoicesChange', e);
+  }
+
+  onAvailableChoicesChange(e: any) {
+    console.log('onSelectedChoicesChange', e);
+  }
 }

my-workspace/projects/sae-lib/icons/index/index.html

@@ -1 +0,0 @@
-<p>index works!</p>

my-workspace/projects/sae-lib/icons/index/index.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { Index } from './index';
-
-describe('Index', () => {
-  let component: Index;
-  let fixture: ComponentFixture<Index>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [Index]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(Index);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

my-workspace/projects/sae-lib/icons/index/index.ts

@@ -1,11 +0,0 @@
-import {Component} from '@angular/core';
-
-@Component({
-  selector: 'sae-main-button',
-  imports: [],
-  templateUrl: './index.html',
-  styleUrl: './index.css'
-})
-export class Index {
-
-}

my-workspace/projects/sae-lib/inbox/dropdown/index/index.html

@@ -1 +0,0 @@
-<p>index works!</p>

my-workspace/projects/sae-lib/inbox/dropdown/index/index.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { Index } from './index';
-
-describe('Index', () => {
-  let component: Index;
-  let fixture: ComponentFixture<Index>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [Index]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(Index);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

my-workspace/projects/sae-lib/inbox/dropdown/index/index.ts

@@ -1,11 +0,0 @@
-import {Component} from '@angular/core';
-
-@Component({
-  selector: 'sae-main-button',
-  imports: [],
-  templateUrl: './index.html',
-  styleUrl: './index.css'
-})
-export class Index {
-
-}

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

@@ -13,6 +13,8 @@
                   name="from_text"
                   placeholder=""
                   rows="10"></textarea>
+
+        <sae-main-button></sae-main-button>
         <button (click)="clickFileUpload(fileUpload)" class=" click-file-upload is-outlined">
           <i class="ri-upload-cloud-2-line"></i>
           <span class="label">

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

@@ -31,6 +31,10 @@
     font-weight: 400;
     line-height: 140%;
   }
+
+  .click-file-upload {
+    cursor: pointer;
+  }
 }
 
 #fromText {

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

@@ -1,10 +1,11 @@
 import {Component, EventEmitter, Output} from '@angular/core';
 import {FormsModule} from '@angular/forms';
+import {Index} from '../index';
 
 @Component({
   selector: 'sae-translate-texts',
   standalone: true,
-  imports: [FormsModule],
+  imports: [FormsModule, Index],
   templateUrl: './translate-texts.html',
   styleUrl: './translate-texts.scss'
 })

my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html

@@ -1,40 +1,61 @@
 <!--    sélecteurs-->
-<div class="input-box">
+<div [ngClass]="{
+'is-disabled': disabled
+}"
+     class="input-box"
+>
+  @if (selectedChoices?.length) {
+    <div class="selected-items-counter">
+      {{ selectedChoices.length }}
+    </div>
+  }
   <i class="ri-search-line search-placeholder"></i>
   <div class="label">
     <span class="d-none">
     {{ label }}
     </span>
   </div>
-  <input (blur)="displayDropdown = false" (click)="displayDropdown= !displayDropdown" (focus)="displayDropdown = true"
+  <!--    (blur)="displayDropdown = false" -->
+  <input
+
+    (click)="onClickInput()" (focus)="displayDropdown = true"
     class="is-hidden" placeholder="{{label}}"
     type="text">
-  @if (displayDropdown) {
-
-    <div class="dropdown">
   <div class="dropdown-button selector-button">
     <!--          bouton-->
     <i class="ri-arrow-down-s-line"></i>
   </div>
+
+  @if (displayDropdown && availableChoices?.length) {
+
+    <div class="dropdown">
+
       <div class="dropdown-list">
         <!--      selected:-->
         <div class="selected-items">
 
           @for (sc of selectedChoices; track sc) {
-            <div class="dropdown-item">
+            <div class="dropdown-item"
+                 (click)="selectedChoicesChangeToggleItem(sc)"
+            >
 
               <i class="ri-checkbox-line"></i>
               {{ sc }}
             </div>
           }
         </div>
+        @if (selectedChoices?.length && availableChoices?.length) {
+
           <hr>
+        }
         <div class="available-items">
           <!--      available:-->
-          @for (c of choices; track c) {
+          @for (ac of availableChoices; track ac) {
-            <div class="dropdown-item">
+            <div class="dropdown-item"
+                 (click)="availableChoicesChangeToggleItem(ac)"
+            >
               <i class="ri-checkbox-blank-line"></i>
-              {{ c }}
+              {{ ac }}
             </div>
           }
         </div>

my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.scss

@@ -17,7 +17,7 @@
       top: 10px;
     }
 
-    .disabled & {
+    &.is-disabled {
       color: #525668;
       fill: #525668;
     }
@@ -34,8 +34,20 @@
   }
 
   .selector-button {
-    top: -30px;
+    top: -36px;
-    right: -177px;
+    right: -165px;
+  }
+
+  .selected-items-counter {
+    background: blue;
+    color: white;
+    border-radius: 200px;
+    padding: 10px;
+    display: inline-block;
+    line-height: 10px;
+    position: relative;
+    top: 33px;
+    left: 136px;
   }
 
 
@@ -57,7 +69,7 @@
     font-size: var(--Font-Base, 14px);
 
 
-    .disabled & {
+    .is-disabled & {
       border-color: #525668;
     }
   }
@@ -68,6 +80,19 @@
     border-radius: 8px;
     position: relative;
     display: block;
+    z-index: 10;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+
+    top: -28px;
+    border-left: 1px solid #8D91A4;
+    border-bottom: 1px solid #8D91A4;
+    border-right: 1px solid #8D91A4;
+
+    .dropdown-list {
+      max-height: 200px;
+      overflow-y: auto;
+    }
 
     .dropdown-item {
       padding: 4px;

my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.ts

@@ -1,15 +1,57 @@
-import {Component, Input} from '@angular/core';
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {NgClass} from '@angular/common';
 
 @Component({
   selector: 'sae-multi-selector',
-  imports: [],
+  imports: [
+    NgClass
+  ],
   templateUrl: './multi-selector.html',
   styleUrl: './multi-selector.scss'
 })
 export class MultiSelector {
+  @Input() disabled: boolean = false;
   @Input() label!: string;
-  @Input() choices: any = ['choix 1', 'choix 2', 'choix 3'];
+  // @Input() store: any;
-  @Input() selectedChoices: any = ['choix 4'];
+  // @Input() ActionTypes: any;
-  displayDropdown = true;
+  @Input() availableChoices: any = ['choix 1', 'choix 2', 'choix 3'];
+  @Input() selectedChoices: any = ['choix 4', 'choix 5'];
+  @Input() displayDropdown: boolean = false;
+  @Output() selectedChoicesChange = new EventEmitter<any>();
+  @Output() availableChoicesChange = new EventEmitter<any>();
 
+  constructor() {
+
+  }
+
+  selectedChoicesChangeToggleItem(choice: any) {
+    console.log('toggle selected choice ', choice, 'in filter ', this.label);
+    this.selectedChoicesChange.emit(choice);
+    // console.log(choice);
+    // this.store.dispatch({
+    //   type: this.ActionTypes.UPDATE_FILTER,
+    //   payload: {
+    //     filter: this.label,
+    //     selectedChoice: choice
+    //   }
+    // })
+  }
+
+  availableChoicesChangeToggleItem(choice: any) {
+    this.availableChoicesChange.emit(choice);
+    console.log('toggle available choice ', choice, 'in filter ', this.label);
+    // this.store.dispatch({
+    //     type: this.ActionTypes.UPDATE_FILTER,
+    //     payload: {
+    //       filter: this.label,
+    //       availableChoice: choice
+    //     }
+    //   }
+    // )
+  }
+
+  onClickInput() {
+    if (this.disabled) return;
+    this.displayDropdown = !this.displayDropdown
+  }
 }

sae-csc/src/app/pages/main/main.html

@@ -27,7 +27,7 @@
       <sae-translate-texts></sae-translate-texts>
     </div>
     <!--  analyse de question-->
-    <div id="question_alaysis">
+    <div id="question_analysis">
       <h2 class="title">
         Question analysis
       </h2>
@@ -35,8 +35,7 @@
       <!--filters-->
       <!--      advanced filters-->
       <div class="filters-container">
-
+        <sae-filters-group (selectionchange)="onSelectedChoicesChange" [appState]="appState"></sae-filters-group>
-        <sae-filters-group></sae-filters-group>
       </div>
     </div>
   </main>

sae-csc/src/app/pages/main/main.scss

@@ -1,4 +1,13 @@
-.magic-text {
+:host {
+
+  #question_analysis {
+    sae-bot-talks {
+      top: -50px;
+      position: relative;
+    }
+  }
+
+  .magic-text {
     color: #A86CFD;
     font-family: Barlow;
     font-size: 20px;
@@ -10,12 +19,13 @@
       font-size: 1.25em;
       margin-left: 2px;
     }
-}
+  }
 
-#translation_request {
+  #translation_request {
     .helper {
       padding-left: 2.65vw;
       padding-bottom: 16px;
     }
-}
+  }
 
+}

sae-csc/src/app/pages/main/main.ts

@@ -4,6 +4,8 @@ import {FiltersGroup} from 'sae-lib/filters/filters-group/filters-group';
 import {BottomNavigation} from '../../shared/navigation/bottom-navigation/bottom-navigation';
 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';
 
 
 @Component({
@@ -20,4 +22,20 @@ import {BotTalks} from 'sae-lib/chatbot/bot-talks/bot-talks';
 })
 export class Main {
 
+  public appState: any = {};
+
+  constructor(private store: Store<StateInterface>) {
+    this.store.select(state => state.app).subscribe(app => {
+      this.appState = app;
+    });
+  }
+
+
+  onSelectedChoicesChange(e: any) {
+    console.log('onSelectedChoicesChange', e);
+  }
+
+  onAvailableChoicesChange(e: any) {
+    console.log('onSelectedChoicesChange', e);
+  }
 }

sae-csc/src/app/redux/initialState.ts

@@ -11,8 +11,8 @@ export const initialState: StateInterface = {
     toText: "",
     filters: {
       engineType: {
-        availableList: {},
+        availableList: ['choix 1'],
-        selectedList: {}
+        selectedList: ['choix 2']
       },
       findings: {
         availableList: {},

sae-csc/src/app/redux/reducers/index.ts

@@ -66,8 +66,8 @@ export type Theme = 'light' | 'dark';
 export type Lang = 'fr_FR' | 'en_US';
 
 export type SelectFilterType = {
-  availableList: object;
+  availableList: any;
-  selectedList: object;
+  selectedList: any;
 }
 
 export type technicalManualType = {