CSC link state to filters

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></sae-filters-group>
+        <sae-filters-group (selectionchange)="onSelectedChoicesChange" [appState]="appState"></sae-filters-group>
       </div>
     </div>
   </main>

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

@@ -1,21 +1,31 @@
-.magic-text {
-  color: #A86CFD;
-  font-family: Barlow;
-  font-size: 20px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: normal;
+:host {
 
-  i {
-    font-size: 1.25em;
-    margin-left: 2px;
+  #question_analysis {
+    sae-bot-talks {
+      top: -50px;
+      position: relative;
+    }
   }
-}
 
-#translation_request {
-  .helper {
-    padding-left: 2.65vw;
-    padding-bottom: 16px;
+  .magic-text {
+    color: #A86CFD;
+    font-family: Barlow;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal;
+
+    i {
+      font-size: 1.25em;
+      margin-left: 2px;
+    }
   }
-}
 
+  #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: {},
-        selectedList: {}
+        availableList: ['choix 1'],
+        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;
-  selectedList: object;
+  availableList: any;
+  selectedList: any;
 }
 
 export type technicalManualType = {