+ @if (selectedChoices?.length && availableChoices?.length) {
+
+
- @for (c of choices; track c) {
-
+ @for (ac of availableChoices; track ac) {
+
- {{ c }}
+ {{ ac }}
}
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 29461e3..590de50 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
@@ -17,7 +17,7 @@
top: 10px;
}
- .disabled & {
+ &.is-disabled {
color: #525668;
fill: #525668;
}
@@ -34,8 +34,20 @@
}
.selector-button {
- top: -30px;
- right: -177px;
+ top: -36px;
+ right: -165px;
+ }
+
+ .selected-items-counter {
+ background: blue;
+ color: white;
+ border-radius: 200px;
+ padding: 10px;
+ display: inline-block;
+ line-height: 10px;
+ position: relative;
+ top: 33px;
+ left: 136px;
}
@@ -57,7 +69,7 @@
font-size: var(--Font-Base, 14px);
- .disabled & {
+ .is-disabled & {
border-color: #525668;
}
}
@@ -68,6 +80,19 @@
border-radius: 8px;
position: relative;
display: block;
+ z-index: 10;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+
+ top: -28px;
+ border-left: 1px solid #8D91A4;
+ border-bottom: 1px solid #8D91A4;
+ border-right: 1px solid #8D91A4;
+
+ .dropdown-list {
+ max-height: 200px;
+ overflow-y: auto;
+ }
.dropdown-item {
padding: 4px;
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 801b5d7..9dbe994 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,15 +1,57 @@
-import {Component, Input} from '@angular/core';
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {NgClass} from '@angular/common';
@Component({
selector: 'sae-multi-selector',
- imports: [],
+ imports: [
+ NgClass
+ ],
templateUrl: './multi-selector.html',
styleUrl: './multi-selector.scss'
})
export class MultiSelector {
+ @Input() disabled: boolean = false;
@Input() label!: string;
- @Input() choices: any = ['choix 1', 'choix 2', 'choix 3'];
- @Input() selectedChoices: any = ['choix 4'];
- displayDropdown = true;
+ // @Input() store: any;
+ // @Input() ActionTypes: any;
+ @Input() availableChoices: any = ['choix 1', 'choix 2', 'choix 3'];
+ @Input() selectedChoices: any = ['choix 4', 'choix 5'];
+ @Input() displayDropdown: boolean = false;
+ @Output() selectedChoicesChange = new EventEmitter
();
+ @Output() availableChoicesChange = new EventEmitter();
+ constructor() {
+
+ }
+
+ 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
+ // }
+ // })
+ }
+
+ 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
+ // }
+ // }
+ // )
+ }
+
+ onClickInput() {
+ if (this.disabled) return;
+ this.displayDropdown = !this.displayDropdown
+ }
}
diff --git a/sae-csc/src/app/pages/main/main.html b/sae-csc/src/app/pages/main/main.html
index b9348fe..609fd90 100644
--- a/sae-csc/src/app/pages/main/main.html
+++ b/sae-csc/src/app/pages/main/main.html
@@ -27,7 +27,7 @@
+
Question analysis
@@ -35,8 +35,7 @@
-
-
+
diff --git a/sae-csc/src/app/pages/main/main.scss b/sae-csc/src/app/pages/main/main.scss
index fd17653..0cb704d 100644
--- a/sae-csc/src/app/pages/main/main.scss
+++ b/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;
+ }
+ }
+
+}
diff --git a/sae-csc/src/app/pages/main/main.ts b/sae-csc/src/app/pages/main/main.ts
index 6d04940..efe42b4 100644
--- a/sae-csc/src/app/pages/main/main.ts
+++ b/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
) {
+ 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);
+ }
}
diff --git a/sae-csc/src/app/redux/initialState.ts b/sae-csc/src/app/redux/initialState.ts
index a02ca87..8feecc6 100644
--- a/sae-csc/src/app/redux/initialState.ts
+++ b/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: {},
diff --git a/sae-csc/src/app/redux/reducers/index.ts b/sae-csc/src/app/redux/reducers/index.ts
index d1c57ee..a795839 100644
--- a/sae-csc/src/app/redux/reducers/index.ts
+++ b/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 = {