linking lists with reducer
This commit is contained in:
parent
c0761da046
commit
e9d273c5a2
7 changed files with 101 additions and 27 deletions
|
@ -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
|
||||
|
|
|
@ -83,6 +83,7 @@
|
|||
|
||||
|
||||
.chips {
|
||||
cursor: pointer;
|
||||
background: variables.$csc-chips-bg-color;
|
||||
color: white;
|
||||
border: solid 1px variables.$csc-chips-bg-color;
|
||||
|
|
|
@ -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
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
@ -51,6 +51,7 @@
|
|||
}
|
||||
<div class="available-items">
|
||||
|
||||
<!-- disponibles:-->
|
||||
<!-- available:-->
|
||||
@for(ac of availableChoices; track ac.value){
|
||||
<div (click)="availableChoicesChangeToggleItem(ac)"
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue