From e9d273c5a2a251b29a37a08aeffb3c0263f6fdf6 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Thu, 25 Sep 2025 17:43:02 +0200
Subject: [PATCH] linking lists with reducer

---
 airwatch/src/app/reducers/index.ts            | 20 ++++++++
 .../filters/filters-group/filters-group.html  | 18 +++----
 .../filters/filters-group/filters-group.scss  |  1 +
 .../filters/filters-group/filters-group.ts    |  6 ++-
 .../inputs/multi-selector/multi-selector.html |  1 +
 sae-csc/src/app/redux/initialState.ts         | 33 +++++++------
 sae-csc/src/app/redux/reducers/index.ts       | 49 +++++++++++++++++++
 7 files changed, 101 insertions(+), 27 deletions(-)

diff --git a/airwatch/src/app/reducers/index.ts b/airwatch/src/app/reducers/index.ts
index 0c56b23..bf64da7 100644
--- a/airwatch/src/app/reducers/index.ts
+++ b/airwatch/src/app/reducers/index.ts
@@ -9,6 +9,7 @@ import {ChatbotMessage} from '../services/chatbot.message.type';
 export enum ActionTypes {
   UPDATE_USER = '[User] Update User',
   UPDATE_APP = '[App] Update App',
+  UPDATE_FILTER = '[App] Update Filter',
   UPDATE_CONVERSATIONS_LIST = '[Conversations] Update Conversations List',
   UPDATE_ACTIVE_CONVERSATION = '[Conversations] Update Active Conversation',
   POST_MESSAGE_TO_ACTIVE_CONVERSATION = '[Conversations] Post message to Active Conversation',
@@ -58,6 +59,14 @@ export interface UpdateAppAction {
   };
 }
 
+export interface UpdateFilterAction {
+  type: ActionTypes.UPDATE_FILTER;
+  payload: {
+    name: string;
+    enabled?: boolean;
+  };
+}
+
 export interface UpdateConversationsListAction {
   type: ActionTypes.UPDATE_CONVERSATIONS_LIST;
   payload: Array<ChatbotConversation>;
@@ -103,6 +112,7 @@ export interface SwitchToNextLanguageAction {
 export type AppActions =
   | UpdateUserAction
   | UpdateAppAction
+  | UpdateFilterAction
   | UpdateConversationsListAction
   | UpdateActiveConversationAction
   | UpdateConversationPanelAction
@@ -168,6 +178,16 @@ function appReducer(state = initialState.app, action: AppActions) {
         ...state,
         ...action.payload
       };
+    case ActionTypes.UPDATE_FILTER:
+      return {
+        ...state,
+        filters: state.filters.map(f => {
+          if (f.name !== action.payload.name) return f;
+          const nextEnabled =
+            typeof action.payload.enabled === 'boolean' ? action.payload.enabled : !f.enabled;
+          return { ...f, enabled: nextEnabled };
+        })
+      };
     case ActionTypes.SWITCH_TO_NEXT_THEME:
       // Find the main-button of the current active theme
       const currentThemeIndex = state.themesList.indexOf(state.activeTheme);
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 8cb38ae..14b5c42 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
@@ -50,12 +50,12 @@
         [store]="store"
       ></sae-multi-selector>
       <sae-multi-selector
-        (availableChoicesChange)="onAvailableChoicesChange($event, 'wingStatus')"
-        (selectedChoicesChange)="onSelectedChoicesChange($event, 'wingStatus')"
+        (availableChoicesChange)="onAvailableChoicesChange($event, 'onOffWing')"
+        (selectedChoicesChange)="onSelectedChoicesChange($event, 'onOffWing')"
         [actionTypes]="actionTypes"
-        [availableChoices]="appState.filters?.wingStatus?.availableList"
+        [availableChoices]="appState.filters?.onOffWing?.availableList"
         [label]="'On-wing/off-wing'"
-        [selectedChoices]="appState.filters?.wingStatus?.selectedList"
+        [selectedChoices]="appState.filters?.onOffWing?.selectedList"
         [store]="store"
       ></sae-multi-selector>
     </div>
@@ -78,7 +78,7 @@
       </div>
       <div class="chips-column">
         @for (elem of appState.filters.findings.selectedList; track elem.label) {
-          <button class="button chips is-rounded is-small">
+          <button class="button chips is-rounded is-small" (click)="onSelectedChoicesChange(elem, 'findings')">
             {{ elem.label }}
             <span class="post-button">
                    x
@@ -88,7 +88,7 @@
       </div>
       <div class="chips-column">
         @for (elem of appState.filters.ata.selectedList; track elem.label) {
-          <button class="button chips is-rounded is-small">
+          <button class="button chips is-rounded is-small" (click)="onSelectedChoicesChange(elem, 'ata')">
             {{ elem.label }}
             <span class="post-button">
                    x
@@ -98,7 +98,7 @@
       </div>
       <div class="chips-column">
         @for (elem of appState.filters.partNumber.selectedList; track elem.label) {
-          <button class="button chips is-rounded is-small">
+          <button class="button chips is-rounded is-small" (click)="onSelectedChoicesChange(elem, 'partNumber')">
             {{ elem.label }}
             <span class="post-button">
                    x
@@ -108,7 +108,7 @@
       </div>
       <div class="chips-column">
         @for (elem of appState.filters.technicalManual.selectedList; track elem.label) {
-          <button class="button chips is-rounded is-small">
+          <button class="button chips is-rounded is-small" (click)="onSelectedChoicesChange(elem, 'technicalManual')">
             {{ elem.label }}
             <span class="post-button">
                    x
@@ -118,7 +118,7 @@
       </div>
       <div class="chips-column">
         @for (elem of appState.filters.onOffWing.selectedList; track elem.label) {
-          <button class="button chips is-rounded is-small">
+          <button class="button chips is-rounded is-small" (click)="onSelectedChoicesChange(elem, 'onOffWing')">
             {{ elem.label }}
             <span class="post-button">
                    x
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 d54f42a..33ceccb 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
@@ -83,6 +83,7 @@
 
 
       .chips {
+        cursor: pointer;
         background: variables.$csc-chips-bg-color;
         color: white;
         border: solid 1px variables.$csc-chips-bg-color;
diff --git a/my-workspace/projects/sae-lib/filters/filters-group/filters-group.ts b/my-workspace/projects/sae-lib/filters/filters-group/filters-group.ts
index 9a9a98c..3ed8d21 100644
--- a/my-workspace/projects/sae-lib/filters/filters-group/filters-group.ts
+++ b/my-workspace/projects/sae-lib/filters/filters-group/filters-group.ts
@@ -28,11 +28,12 @@ export class FiltersGroup {
   onSelectedChoicesChange(choice: any, filterType: string) {
     console.log('onSelectedChoicesChange', choice, 'for filter', filterType);
     if (this.store && this.actionTypes) {
+      const choiceValue = typeof choice === 'string' ? choice : choice?.value;
       this.store.dispatch({
         type: this.actionTypes.UPDATE_FILTER,
         payload: {
           filter: filterType,
-          selectedChoice: choice
+          choice: choiceValue
         }
       });
     }
@@ -41,11 +42,12 @@ export class FiltersGroup {
   onAvailableChoicesChange(choice: any, filterType: string) {
     console.log('onAvailableChoicesChange', choice, 'for filter', filterType);
     if (this.store && this.actionTypes) {
+      const choiceValue = typeof choice === 'string' ? choice : choice?.value;
       this.store.dispatch({
         type: this.actionTypes.UPDATE_FILTER,
         payload: {
           filter: filterType,
-          availableChoice: choice
+          choice: choiceValue
         }
       });
     }
diff --git a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html
index 4347986..6fd581a 100644
--- a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html
+++ b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html
@@ -51,6 +51,7 @@
         }
         <div class="available-items">
 
+<!--          disponibles:-->
           <!--      available:-->
           @for(ac of availableChoices; track ac.value){
             <div (click)="availableChoicesChangeToggleItem(ac)"
diff --git a/sae-csc/src/app/redux/initialState.ts b/sae-csc/src/app/redux/initialState.ts
index 33526f9..7ebecf4 100644
--- a/sae-csc/src/app/redux/initialState.ts
+++ b/sae-csc/src/app/redux/initialState.ts
@@ -23,10 +23,7 @@ export const initialState: StateInterface = {
     }],
     filters: {
       engineType: {
-        availableList: [{
-          label: 'ABC',
-          value: 'ABC',
-        }],
+        availableList: [],
         selectedList: [
           {
             label: 'DEF',
@@ -42,18 +39,22 @@ export const initialState: StateInterface = {
       },
       findings: {
         // filtersCSC.findings
-        availableList: [
-          {
-            label: 'FRETTING : Usure induite par petit debat',
-            value: 'FRETTING',
-          },
-          {
-            label: 'DENT : Impact a bord arrondi',
-            value: 'DENT',
-          }, {
-            label: 'MISSING PAINT/COATING',
-            value: 'MISSING_PAINT_COATING',
-          }],
+        availableList:
+          filtersCSC.findings
+          // [
+          // {
+          //   label: 'FRETTING : Usure induite par petit debat',
+          //   value: 'FRETTING',
+          // },
+          // {
+          //   label: 'DENT : Impact a bord arrondi',
+          //   value: 'DENT',
+          // }, {
+          //   label: 'MISSING PAINT/COATING',
+          //   value: 'MISSING_PAINT_COATING',
+          // }]
+
+        ,
         selectedList: []
       },
       ata: {
diff --git a/sae-csc/src/app/redux/reducers/index.ts b/sae-csc/src/app/redux/reducers/index.ts
index c46c2b8..b0ebb49 100644
--- a/sae-csc/src/app/redux/reducers/index.ts
+++ b/sae-csc/src/app/redux/reducers/index.ts
@@ -27,6 +27,13 @@ export interface UpdateUserAction {
     id: string;
   };
 }
+export interface UpdateFilterAction {
+  type: ActionTypes.UPDATE_FILTER;
+  payload: {
+    filter: string;
+    choice: string;
+  };
+}
 
 export interface UpdateAppAction {
   type: ActionTypes.UPDATE_APP;
@@ -91,6 +98,7 @@ export type technicalManualType = {
 export type AppActions =
   | UpdateUserAction
   | UpdateAppAction
+  | UpdateFilterAction
   | SendUserFeedbackAction
   | SwitchToNextThemeAction
   | SwitchToNextLanguageAction;
@@ -162,6 +170,47 @@ function appReducer(state = initialState.app, action: AppActions) {
         ...state,
         ...action.payload
       };
+    case ActionTypes.UPDATE_FILTER: {
+      const { filter, choice } = (action as UpdateFilterAction).payload;
+      const filterGroup = state.filters[filter as keyof typeof state.filters];
+      if (!filterGroup) {
+        return state;
+      }
+
+      const isInSelected = filterGroup.selectedList.some((item: any) => item.value === choice);
+      const isInAvailable = filterGroup.availableList.some((item: any) => item.value === choice);
+
+      // If in selected → move to available; if in available → move to selected; else no-op
+      if (isInSelected) {
+        const item = filterGroup.selectedList.find((i: any) => i.value === choice);
+        return {
+          ...state,
+          filters: {
+            ...state.filters,
+            [filter]: {
+              availableList: [...filterGroup.availableList, item],
+              selectedList: filterGroup.selectedList.filter((i: any) => i.value !== choice)
+            }
+          }
+        };
+      }
+
+      if (isInAvailable) {
+        const item = filterGroup.availableList.find((i: any) => i.value === choice);
+        return {
+          ...state,
+          filters: {
+            ...state.filters,
+            [filter]: {
+              availableList: filterGroup.availableList.filter((i: any) => i.value !== choice),
+              selectedList: [...filterGroup.selectedList, item]
+            }
+          }
+        };
+      }
+
+      return state;
+    }
     default:
       return state;
   }