linking lists with reducer

This commit is contained in:
Tykayn 2025-09-25 17:43:02 +02:00 committed by tykayn
parent c0761da046
commit e9d273c5a2
7 changed files with 101 additions and 27 deletions

View file

@ -50,12 +50,12 @@
[store]="store"
></sae-multi-selector>
<sae-multi-selector
(availableChoicesChange)="onAvailableChoicesChange($event, 'wingStatus')"
(selectedChoicesChange)="onSelectedChoicesChange($event, 'wingStatus')"
(availableChoicesChange)="onAvailableChoicesChange($event, 'onOffWing')"
(selectedChoicesChange)="onSelectedChoicesChange($event, 'onOffWing')"
[actionTypes]="actionTypes"
[availableChoices]="appState.filters?.wingStatus?.availableList"
[availableChoices]="appState.filters?.onOffWing?.availableList"
[label]="'On-wing/off-wing'"
[selectedChoices]="appState.filters?.wingStatus?.selectedList"
[selectedChoices]="appState.filters?.onOffWing?.selectedList"
[store]="store"
></sae-multi-selector>
</div>
@ -78,7 +78,7 @@
</div>
<div class="chips-column">
@for (elem of appState.filters.findings.selectedList; track elem.label) {
<button class="button chips is-rounded is-small">
<button class="button chips is-rounded is-small" (click)="onSelectedChoicesChange(elem, 'findings')">
{{ elem.label }}
<span class="post-button">
x
@ -88,7 +88,7 @@
</div>
<div class="chips-column">
@for (elem of appState.filters.ata.selectedList; track elem.label) {
<button class="button chips is-rounded is-small">
<button class="button chips is-rounded is-small" (click)="onSelectedChoicesChange(elem, 'ata')">
{{ elem.label }}
<span class="post-button">
x
@ -98,7 +98,7 @@
</div>
<div class="chips-column">
@for (elem of appState.filters.partNumber.selectedList; track elem.label) {
<button class="button chips is-rounded is-small">
<button class="button chips is-rounded is-small" (click)="onSelectedChoicesChange(elem, 'partNumber')">
{{ elem.label }}
<span class="post-button">
x
@ -108,7 +108,7 @@
</div>
<div class="chips-column">
@for (elem of appState.filters.technicalManual.selectedList; track elem.label) {
<button class="button chips is-rounded is-small">
<button class="button chips is-rounded is-small" (click)="onSelectedChoicesChange(elem, 'technicalManual')">
{{ elem.label }}
<span class="post-button">
x
@ -118,7 +118,7 @@
</div>
<div class="chips-column">
@for (elem of appState.filters.onOffWing.selectedList; track elem.label) {
<button class="button chips is-rounded is-small">
<button class="button chips is-rounded is-small" (click)="onSelectedChoicesChange(elem, 'onOffWing')">
{{ elem.label }}
<span class="post-button">
x

View file

@ -83,6 +83,7 @@
.chips {
cursor: pointer;
background: variables.$csc-chips-bg-color;
color: white;
border: solid 1px variables.$csc-chips-bg-color;

View file

@ -28,11 +28,12 @@ export class FiltersGroup {
onSelectedChoicesChange(choice: any, filterType: string) {
console.log('onSelectedChoicesChange', choice, 'for filter', filterType);
if (this.store && this.actionTypes) {
const choiceValue = typeof choice === 'string' ? choice : choice?.value;
this.store.dispatch({
type: this.actionTypes.UPDATE_FILTER,
payload: {
filter: filterType,
selectedChoice: choice
choice: choiceValue
}
});
}
@ -41,11 +42,12 @@ export class FiltersGroup {
onAvailableChoicesChange(choice: any, filterType: string) {
console.log('onAvailableChoicesChange', choice, 'for filter', filterType);
if (this.store && this.actionTypes) {
const choiceValue = typeof choice === 'string' ? choice : choice?.value;
this.store.dispatch({
type: this.actionTypes.UPDATE_FILTER,
payload: {
filter: filterType,
availableChoice: choice
choice: choiceValue
}
});
}

View file

@ -51,6 +51,7 @@
}
<div class="available-items">
<!-- disponibles:-->
<!-- available:-->
@for(ac of availableChoices; track ac.value){
<div (click)="availableChoicesChangeToggleItem(ac)"