From ffb90276913a7b122a5d377bbcbb5720313e9cc8 Mon Sep 17 00:00:00 2001 From: Tykayn Date: Mon, 6 Oct 2025 18:08:14 +0200 Subject: [PATCH] up dropdown listing csc --- .../filters/filters-group/filters-group.html | 12 +++++ .../filters/filters-group/filters-group.ts | 8 ++++ .../inputs/multi-selector/multi-selector.html | 22 ++++++--- .../inputs/multi-selector/multi-selector.scss | 47 ++++++++++++++++--- .../inputs/multi-selector/multi-selector.ts | 26 ++++++++-- sae-csc/public/checkbox-active.svg | 8 ++++ sae-csc/public/checkbox-inactive.svg | 4 ++ sae-csc/public/shield.svg | 3 ++ sae-csc/src/app/redux/filters.ts | 7 +-- .../bottom-navigation/bottom-navigation.html | 5 +- .../bottom-navigation/bottom-navigation.scss | 10 +++- 11 files changed, 128 insertions(+), 24 deletions(-) create mode 100644 sae-csc/public/checkbox-active.svg create mode 100644 sae-csc/public/checkbox-inactive.svg create mode 100644 sae-csc/public/shield.svg 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 14b5c42..7561f0e 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 @@ -4,57 +4,69 @@ @if(appState.filters){
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 3ed8d21..921e2b1 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 @@ -20,6 +20,9 @@ export class FiltersGroup { @Input() disabled!: boolean; @Input() hideChipsList: boolean = false; + // Gère quel sélecteur a son dropdown ouvert + activeLabel: string | null = null; + constructor() { console.log('constructor filters group', this.appState, this.store, this.actionTypes); @@ -52,4 +55,9 @@ export class FiltersGroup { }); } } + + onClickedOnInput(event: any) { + const label = event?.label; + this.activeLabel = label || null; + } } 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 6de0643..a05469b 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 @@ -11,10 +11,9 @@ {{ label }}
+ - + checkbox + {{ sc.label }} + } -
+ +
+ +
Add new part number
+ +
}
@@ -60,8 +66,10 @@ class="dropdown-item" > - - {{ ac.label }} + checkbox + + {{ ac.label }} +
} 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 941efee..25d1a37 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 @@ -103,15 +103,25 @@ position: relative; display: block; z-index: 100; - border-top-left-radius: 0; - border-top-right-radius: 0; width: 218px; - top: -47px; + top: -24px; left: 0; - border-left: 1px solid #8D91A4; - border-bottom: 1px solid #8D91A4; - border-right: 1px solid #8D91A4; + border: 1px solid #8D91A4; + box-shadow: 0 0 13px 0 rgba(37, 91, 142, 0.10); +color: var(--color-text-base, #1B1D27); + +text-overflow: ellipsis; + +/* Text/text-base */ +font-family: var(--Fonts-Font-text, Barlow); +font-size: var(--Font-Base, 14px); +font-style: normal; +font-weight: 400; +line-height: 100%; /* 14px */ + + + .dropdown-list { max-height: 200px; overflow-y: auto; @@ -129,4 +139,29 @@ } } + .separator{ + display: flex; +width: 186px; +height: 34px; +min-height: 34px; +max-height: 34px; +padding: var(--Spacing-Spacing-20, 8px) var(--Spacing-Spacing-30, 12px); +align-items: center; +gap: var(--Spacing-Spacing-10, 4px); +border-radius: var(--Radius-list, 0); +background: #F5F5F5; + +.label{ + overflow: hidden; +color: var(--color-text-secondary, #525668); +leading-trim: both; +text-edge: cap; +text-overflow: ellipsis; +font-family: var(--Fonts-Font-text, Barlow); +font-size: var(--Font-Base, 14px); +font-style: italic; +font-weight: 400; +line-height: 100%; /* 14px */ +} + } } 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 a662f31..c17dc51 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 @@ -22,6 +22,7 @@ export class MultiSelector implements OnInit { @Input() store: any; @Input() actionTypes: any; + @Output() clickedOnInput = new EventEmitter(); @Output() selectedChoicesChange = new EventEmitter(); @Output() availableChoicesChange = new EventEmitter(); @@ -73,6 +74,12 @@ export class MultiSelector implements OnInit { availableChoicesChangeToggleItem(choice: any) { this.availableChoicesChange.emit(choice); console.log('toggle available choice ', choice, 'in filter ', this.label); + // Retire immédiatement l'élément cliqué de la liste des disponibles (feedback UI optimiste) + const clickedValue = typeof choice === 'string' ? choice : choice?.value; + this.availableChoices = (this.availableChoices || []).filter((c: any) => { + const value = typeof c === 'string' ? c : c?.value; + return value !== clickedValue; + }); this.store.dispatch({ type: this.actionTypes.UPDATE_FILTER, payload: { @@ -83,12 +90,25 @@ export class MultiSelector implements OnInit { ) } - onClickInput() { + onInputClickedOrFocused(event?: any) { + // Informe le parent que cet input a été cliqué/focus pour fermer les autres dropdowns + this.clickedOnInput.emit({ label: this.label }); if (this.disabled) { console.info('disabled input'); return; } - this.displayDropdown = !this.displayDropdown; - console.log('Toggled dropdown:', this.displayDropdown); + this.displayDropdown = true; + } + + onClickInput() { + console.log('click dropdown:', this.displayDropdown); + if (this.disabled) { + console.info('disabled input'); + return; + } + // Informe le parent pour fermer les autres puis ouvre celui-ci + this.clickedOnInput.emit({ label: this.label }); + this.displayDropdown = true; + console.log('Opened dropdown:', this.displayDropdown); } } diff --git a/sae-csc/public/checkbox-active.svg b/sae-csc/public/checkbox-active.svg new file mode 100644 index 0000000..49835fc --- /dev/null +++ b/sae-csc/public/checkbox-active.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/sae-csc/public/checkbox-inactive.svg b/sae-csc/public/checkbox-inactive.svg new file mode 100644 index 0000000..70087f2 --- /dev/null +++ b/sae-csc/public/checkbox-inactive.svg @@ -0,0 +1,4 @@ + + + + diff --git a/sae-csc/public/shield.svg b/sae-csc/public/shield.svg new file mode 100644 index 0000000..d6eca99 --- /dev/null +++ b/sae-csc/public/shield.svg @@ -0,0 +1,3 @@ + + + diff --git a/sae-csc/src/app/redux/filters.ts b/sae-csc/src/app/redux/filters.ts index 7819f7e..f61774e 100644 --- a/sae-csc/src/app/redux/filters.ts +++ b/sae-csc/src/app/redux/filters.ts @@ -148,7 +148,7 @@ export const filtersCSC = value: 'DEVIATION_TO_INSTRUCTIONS', }, { label: 'DEVIATION TO INSTRUCTIONS Revision', - value: 'DEVIATION_TO_INSTRUCTIONS', + value: 'DEVIATION_TO_INSTRUCTIONS_REVISION', }, { label: 'PRESERVATION_OVERDUE', @@ -339,10 +339,7 @@ export const filtersCSC = { label: 'PIT, PITTING : Piqure', value: 'PIT', - }, { - label: 'VOIDS :Vides, Cavites', - value: 'VOIDS', - }, + }, { label: 'HARD LANDING/VERTICAL ACCEL', diff --git a/sae-csc/src/app/shared/navigation/bottom-navigation/bottom-navigation.html b/sae-csc/src/app/shared/navigation/bottom-navigation/bottom-navigation.html index c83b18c..0d8d0d1 100644 --- a/sae-csc/src/app/shared/navigation/bottom-navigation/bottom-navigation.html +++ b/sae-csc/src/app/shared/navigation/bottom-navigation/bottom-navigation.html @@ -36,7 +36,10 @@ ×
-

Privacy Policy

+

+ Privacy Policy + shield +

Personal Data Protection Policy

diff --git a/sae-csc/src/app/shared/navigation/bottom-navigation/bottom-navigation.scss b/sae-csc/src/app/shared/navigation/bottom-navigation/bottom-navigation.scss index 82639b7..ea0fc6e 100644 --- a/sae-csc/src/app/shared/navigation/bottom-navigation/bottom-navigation.scss +++ b/sae-csc/src/app/shared/navigation/bottom-navigation/bottom-navigation.scss @@ -1,8 +1,8 @@ @use '../../../../styles/variables-barrel' as variables; .bottom-navigation { - position: relative; - top: 280px; + position: absolute; + top: 872px; padding: 0 0 16px; @@ -78,6 +78,12 @@ cursor: pointer; } + .title{ + img{ + margin-left: 16px; + } + } + .popup-content { position: relative; width: 90%;