filters link

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

@@ -4,7 +4,6 @@
 }"
      class="input-box"
 >
-  displayDropdown {{displayDropdown}}
 
   <i class="ri-search-line search-placeholder"></i>
   <div class="label">
@@ -18,6 +17,7 @@
     (focus)="displayDropdown = true"
     class="is-hidden" placeholder="{{label}}"
     type="text">
+
   <span [ngClass]="{ 'is-visible' : selectedChoices?.length}"
         class="selected-items-counter">
     {{ selectedChoices?.length || 0 }}
@@ -52,13 +52,13 @@
         <div class="available-items">
 
           <!--      available:-->
-          @for(sc of availableChoices; track sc.value){
-            <div (click)="availableChoicesChangeToggleItem(sc)"
+          @for(ac of availableChoices; track ac.value){
+            <div (click)="availableChoicesChangeToggleItem(ac)"
 
                  class="dropdown-item"
             >
               <i class="ri-checkbox-line"></i>
-              {{ sc.label }}
+              {{ ac.label }}
             </div>
           }
 
@@ -66,4 +66,5 @@
       </div>
     </div>
   }
+
 </div>

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

@@ -53,8 +53,8 @@
       position: relative;
       z-index: 11;
       height: 30px;
-      top: -36px;
-      right: 65px;
+      top: 0;
+      right:-153px;
 
 
       &.is-visible {

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

@@ -1,4 +1,4 @@
-import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {CommonModule} from '@angular/common';
 
 @Component({
@@ -9,13 +9,14 @@ import {CommonModule} from '@angular/common';
   templateUrl: './multi-selector.html',
   styleUrl: './multi-selector.scss'
 })
-export class MultiSelector {
+export class MultiSelector implements OnInit {
   @Input() disabled: boolean = false;
   @Input() label!: string;
-  // @Input() store: any;
-  // @Input() ActionTypes: any;
-  @Input() availableChoices: any = ['choix 1', 'choix 2', 'choix 3'];
-  @Input() selectedChoices: any = ['choix 4', 'choix 5'];
+  @Input() availableChoices: any = [{
+    label : 'aaaaaa',
+    value: 'AAAAA'
+  }];
+  @Input() selectedChoices: any = [ ];
   @Input() displayDropdown: boolean = true;
 
   @Input() store: any;
@@ -25,33 +26,37 @@ export class MultiSelector {
   @Output() availableChoicesChange = new EventEmitter<any>();
 
   constructor() {
+      }
+
+  ngOnInit() {
+    console.log('constructor multi selector', this.label, this.availableChoices, this.selectedChoices);
 
   }
 
   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
-    //   }
-    // })
+    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
-    //     }
-    //   }
-    // )
+    this.store.dispatch({
+        type: this.actionTypes.UPDATE_FILTER,
+        payload: {
+          filter: this.label,
+          availableChoice: choice
+        }
+      }
+    )
   }
 
   onClickInput() {