From e815c568155688f0fe85329d24947381ff92a75a Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Mon, 22 Sep 2025 11:57:03 +0200
Subject: [PATCH] up filters component

---
 .../filters/filters-group/filters-group.html  | 94 ++++++++++++++-----
 .../filters/filters-group/filters-group.scss  | 10 +-
 2 files changed, 72 insertions(+), 32 deletions(-)

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 848c2f1..5f44df8 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
@@ -14,73 +14,117 @@
       (availableChoicesChange)="onAvailableChoicesChange($event, 'findings')"
       (selectedChoicesChange)="onSelectedChoicesChange($event, 'findings')"
       [actionTypes]="actionTypes"
+      [availableChoices]="appState.filters?.findings?.availableChoices || []"
       [label]="'Findings'"
       [selectedChoices]="appState.filters?.findings?.selectedChoices || []"
-      [availableChoices]="appState.filters?.findings?.availableChoices || []"
       [store]="store"
     ></sae-multi-selector>
     <sae-multi-selector
       (availableChoicesChange)="onAvailableChoicesChange($event, 'ata')"
       (selectedChoicesChange)="onSelectedChoicesChange($event, 'ata')"
       [actionTypes]="actionTypes"
+      [availableChoices]="appState.filters?.ata?.availableChoices || []"
       [label]="'ATA'"
       [selectedChoices]="appState.filters?.ata?.selectedChoices || []"
-      [availableChoices]="appState.filters?.ata?.availableChoices || []"
       [store]="store"
     ></sae-multi-selector>
     <sae-multi-selector
       (availableChoicesChange)="onAvailableChoicesChange($event, 'partNumber')"
       (selectedChoicesChange)="onSelectedChoicesChange($event, 'partNumber')"
       [actionTypes]="actionTypes"
+      [availableChoices]="appState.filters?.partNumber?.availableChoices || []"
       [label]="'Part number'"
       [selectedChoices]="appState.filters?.partNumber?.selectedChoices || []"
-      [availableChoices]="appState.filters?.partNumber?.availableChoices || []"
       [store]="store"
     ></sae-multi-selector>
     <sae-multi-selector
       (availableChoicesChange)="onAvailableChoicesChange($event, 'technicalManual')"
       (selectedChoicesChange)="onSelectedChoicesChange($event, 'technicalManual')"
       [actionTypes]="actionTypes"
+      [availableChoices]="appState.filters?.technicalManual?.availableChoices || []"
       [label]="'Technical Manual'"
       [selectedChoices]="appState.filters?.technicalManual?.selectedChoices || []"
-      [availableChoices]="appState.filters?.technicalManual?.availableChoices || []"
       [store]="store"
     ></sae-multi-selector>
     <sae-multi-selector
       (availableChoicesChange)="onAvailableChoicesChange($event, 'wingStatus')"
       (selectedChoicesChange)="onSelectedChoicesChange($event, 'wingStatus')"
       [actionTypes]="actionTypes"
+      [availableChoices]="appState.filters?.wingStatus?.availableChoices || []"
       [label]="'On-wing/off-wing'"
       [selectedChoices]="appState.filters?.wingStatus?.selectedChoices || []"
-      [availableChoices]="appState.filters?.wingStatus?.availableChoices || []"
       [store]="store"
     ></sae-multi-selector>
   </div>
   <div (click)="highlighted = !highlighted" class="chips-listing">
     <!--    liste de chips-->
 
-    <pre>
-      filters:
-      {{ appState.filters }}
-    </pre>
+    <!--    <pre>-->
+    <!--      filters:-->
+    <!--      {{ appState.filters }}-->
+    <!--    </pre>-->
+    <!--    hideChipsList : {{ hideChipsList }}-->
+    <!--    selectedChoices : {{ appState.filters.engineType.selectedList.length }}-->
     @if (!hideChipsList) {
       <div class="chips-column">
-        <!--      @for( elem in appState.filters.engineType.selectedChoices; track elem.label ){-->
-        <!--        <button class="button chips is-rounded is-small">-->
-
-        <!--          {{elem.label}}-->
-        <!--          <span class="post-button">-->
-        <!--       x-->
-        <!--     </span>-->
-        <!--        </button>-->
-        <!--      }-->
-
-        <button class="button chips is-rounded is-small">
-          filtre col 2
-          <span class="post-button">
-           x
-         </span>
-        </button>
+        @for (elem of appState.filters.engineType.selectedList; track elem.label) {
+          <button class="button chips is-rounded is-small">
+            {{ elem.label }}
+            <span class="post-button">
+                   x
+                 </span>
+          </button>
+        }
+      </div>
+      <div class="chips-column">
+        @for (elem of appState.filters.findings.selectedList; track elem.label) {
+          <button class="button chips is-rounded is-small">
+            {{ elem.label }}
+            <span class="post-button">
+                   x
+                 </span>
+          </button>
+        }
+      </div>
+      <div class="chips-column">
+        @for (elem of appState.filters.ata.selectedList; track elem.label) {
+          <button class="button chips is-rounded is-small">
+            {{ elem.label }}
+            <span class="post-button">
+                   x
+                 </span>
+          </button>
+        }
+      </div>
+      <div class="chips-column">
+        @for (elem of appState.filters.partNumber.selectedList; track elem.label) {
+          <button class="button chips is-rounded is-small">
+            {{ elem.label }}
+            <span class="post-button">
+                   x
+                 </span>
+          </button>
+        }
+      </div>
+      <div class="chips-column">
+        @for (elem of appState.filters.technicalManual.selectedList; track elem.label) {
+          <button class="button chips is-rounded is-small">
+            {{ elem.label }}
+            <span class="post-button">
+                   x
+                 </span>
+          </button>
+        }
+      </div>
+      <div class="chips-column">
+        @for (elem of appState.filters.onOffWing.selectedList; track elem.label) {
+          <button class="button chips is-rounded is-small">
+            {{ elem.label }}
+            <span class="post-button">
+                   x
+                 </span>
+          </button>
+        }
       </div>
     }
     <!--    <div class="chips-column">-->
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 ab081a9..059657a 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
@@ -42,13 +42,6 @@
     }
   }
 
-  .chips-listing {
-    display: flex;
-    border-radius: 8px;
-    position: absolute;
-    top: 577px;
-  }
-
 
   .filter-group {
 
@@ -64,6 +57,9 @@
     }
 
     .chips-listing {
+      display: flex;
+      position: absolute;
+      top: 650px;
       margin-top: 16px;
       border-radius: 4px;
       background: variables.$csc-filters-box-color;