From c0761da046efd8709969ac1ab6279c89928864df Mon Sep 17 00:00:00 2001 From: Tykayn Date: Thu, 25 Sep 2025 16:55:38 +0200 Subject: [PATCH] filters link --- .../filters/filters-group/filters-group.html | 124 +++++++++--------- .../filters/filters-group/filters-group.ts | 3 +- .../inputs/multi-selector/multi-selector.html | 9 +- .../inputs/multi-selector/multi-selector.scss | 4 +- .../inputs/multi-selector/multi-selector.ts | 49 +++---- sae-csc/src/app/pages/main/main.html | 5 +- sae-csc/src/app/pages/main/main.scss | 4 + sae-csc/src/app/pages/main/main.ts | 5 +- sae-csc/src/app/redux/filters.ts | 9 +- sae-csc/src/app/redux/initialState.ts | 19 ++- sae-csc/src/app/redux/reducers/index.ts | 1 + 11 files changed, 130 insertions(+), 102 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 21066e8..8cb38ae 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 @@ -1,62 +1,66 @@
-
- - - - - - -
+ + @if(appState.filters){ +
+ + + + + + +
+ + } @if (!hideChipsList) {
@@ -64,7 +68,7 @@
@for (elem of appState.filters.engineType.selectedList; track elem.label) { - }
- - -
} +
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 bfe9e49..9a9a98c 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 @@ -14,13 +14,14 @@ import {CommonModule} from '@angular/common'; }) export class FiltersGroup { @Input() highlighted = false; + @Input() store: any = {}; @Input() appState: any = {}; - @Input() store: any; @Input() actionTypes: any; @Input() disabled!: boolean; @Input() hideChipsList: boolean = false; constructor() { + console.log('constructor filters group', this.appState, this.store, this.actionTypes); } 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 d8cd4b7..4347986 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 @@ -4,7 +4,6 @@ }" class="input-box" > - displayDropdown {{displayDropdown}}
@@ -18,6 +17,7 @@ (focus)="displayDropdown = true" class="is-hidden" placeholder="{{label}}" type="text"> + {{ selectedChoices?.length || 0 }} @@ -52,13 +52,13 @@
- @for(sc of availableChoices; track sc.value){ -
- {{ sc.label }} + {{ ac.label }}
} @@ -66,4 +66,5 @@
} + diff --git a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.scss b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.scss index b6598d6..912727b 100644 --- a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.scss +++ b/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 { diff --git a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.ts b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.ts index e11613b..5f2e4d4 100644 --- a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.ts +++ b/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(); 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() { diff --git a/sae-csc/src/app/pages/main/main.html b/sae-csc/src/app/pages/main/main.html index 2ce8c69..293cd84 100644 --- a/sae-csc/src/app/pages/main/main.html +++ b/sae-csc/src/app/pages/main/main.html @@ -39,7 +39,10 @@
-
diff --git a/sae-csc/src/app/pages/main/main.scss b/sae-csc/src/app/pages/main/main.scss index e453909..350400a 100644 --- a/sae-csc/src/app/pages/main/main.scss +++ b/sae-csc/src/app/pages/main/main.scss @@ -70,4 +70,8 @@ } } + .filters-container{ + margin-top: -60px; + } + } diff --git a/sae-csc/src/app/pages/main/main.ts b/sae-csc/src/app/pages/main/main.ts index 250e2c8..96f0693 100644 --- a/sae-csc/src/app/pages/main/main.ts +++ b/sae-csc/src/app/pages/main/main.ts @@ -5,7 +5,7 @@ import {BottomNavigation} from '../../shared/navigation/bottom-navigation/bottom 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'; +import {ActionTypes, StateInterface} from '../../redux/reducers'; import {NgClass} from '@angular/common'; @@ -25,9 +25,10 @@ import {NgClass} from '@angular/common'; export class Main { public appState: any = {}; + public actionTypes: any = ActionTypes; public displayBotWarning: boolean = false; - constructor(private store: Store) { + constructor(public store: Store) { this.store.select(state => state.app).subscribe(app => { console.log('app', app); this.appState = app; diff --git a/sae-csc/src/app/redux/filters.ts b/sae-csc/src/app/redux/filters.ts index cc3debb..7819f7e 100644 --- a/sae-csc/src/app/redux/filters.ts +++ b/sae-csc/src/app/redux/filters.ts @@ -31,10 +31,11 @@ export const filtersCSC = value: 'SPM', }] , - findings: [{ - label: 'FRETTING : Usure induite par petit debat', - value: 'FRETTING', - }, + findings: [ + { + label: 'FRETTING : Usure induite par petit debat', + value: 'FRETTING', + }, { label: 'DENT : Impact a bord arrondi', value: 'DENT', diff --git a/sae-csc/src/app/redux/initialState.ts b/sae-csc/src/app/redux/initialState.ts index e7693f5..33526f9 100644 --- a/sae-csc/src/app/redux/initialState.ts +++ b/sae-csc/src/app/redux/initialState.ts @@ -41,11 +41,20 @@ export const initialState: StateInterface = { ] }, findings: { - availableList: [{ - label: 'NICK : Impact a bord vif', - value: 'NICK', - }], - selectedList: [filtersCSC.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', + }], + selectedList: [] }, ata: { availableList: [{ diff --git a/sae-csc/src/app/redux/reducers/index.ts b/sae-csc/src/app/redux/reducers/index.ts index 3522279..c46c2b8 100644 --- a/sae-csc/src/app/redux/reducers/index.ts +++ b/sae-csc/src/app/redux/reducers/index.ts @@ -6,6 +6,7 @@ import {initialState} from '../initialState'; 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',