tykayn/ng-implementation
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

up filters component

Browse source
This commit is contained in:
Tykayn 2025-09-22 11:57:03 +02:00 • committed by tykayn
parent 4e2451d600
commit e815c56815
2 changed files with 72 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

84
my-workspace/projects/sae-lib/filters/filters-group/filters-group.html
View file

@ -14,73 +14,117 @@
(availableChoicesChange)="onAvailableChoicesChange($event, 'findings')" (availableChoicesChange)="onAvailableChoicesChange($event, 'findings')"
(selectedChoicesChange)="onSelectedChoicesChange($event, 'findings')" (selectedChoicesChange)="onSelectedChoicesChange($event, 'findings')"
[actionTypes]="actionTypes" [actionTypes]="actionTypes"
[availableChoices]="appState.filters?.findings?.availableChoices || []"
[label]="'Findings'" [label]="'Findings'"
[selectedChoices]="appState.filters?.findings?.selectedChoices || []" [selectedChoices]="appState.filters?.findings?.selectedChoices || []"
[availableChoices]="appState.filters?.findings?.availableChoices || []"
[store]="store" [store]="store"
></sae-multi-selector> ></sae-multi-selector>
<sae-multi-selector <sae-multi-selector
(availableChoicesChange)="onAvailableChoicesChange($event, 'ata')" (availableChoicesChange)="onAvailableChoicesChange($event, 'ata')"
(selectedChoicesChange)="onSelectedChoicesChange($event, 'ata')" (selectedChoicesChange)="onSelectedChoicesChange($event, 'ata')"
[actionTypes]="actionTypes" [actionTypes]="actionTypes"
[availableChoices]="appState.filters?.ata?.availableChoices || []"
[label]="'ATA'" [label]="'ATA'"
[selectedChoices]="appState.filters?.ata?.selectedChoices || []" [selectedChoices]="appState.filters?.ata?.selectedChoices || []"
[availableChoices]="appState.filters?.ata?.availableChoices || []"
[store]="store" [store]="store"
></sae-multi-selector> ></sae-multi-selector>
<sae-multi-selector <sae-multi-selector
(availableChoicesChange)="onAvailableChoicesChange($event, 'partNumber')" (availableChoicesChange)="onAvailableChoicesChange($event, 'partNumber')"
(selectedChoicesChange)="onSelectedChoicesChange($event, 'partNumber')" (selectedChoicesChange)="onSelectedChoicesChange($event, 'partNumber')"
[actionTypes]="actionTypes" [actionTypes]="actionTypes"
[availableChoices]="appState.filters?.partNumber?.availableChoices || []"
[label]="'Part number'" [label]="'Part number'"
[selectedChoices]="appState.filters?.partNumber?.selectedChoices || []" [selectedChoices]="appState.filters?.partNumber?.selectedChoices || []"
[availableChoices]="appState.filters?.partNumber?.availableChoices || []"
[store]="store" [store]="store"
></sae-multi-selector> ></sae-multi-selector>
<sae-multi-selector <sae-multi-selector
(availableChoicesChange)="onAvailableChoicesChange($event, 'technicalManual')" (availableChoicesChange)="onAvailableChoicesChange($event, 'technicalManual')"
(selectedChoicesChange)="onSelectedChoicesChange($event, 'technicalManual')" (selectedChoicesChange)="onSelectedChoicesChange($event, 'technicalManual')"
[actionTypes]="actionTypes" [actionTypes]="actionTypes"
[availableChoices]="appState.filters?.technicalManual?.availableChoices || []"
[label]="'Technical Manual'" [label]="'Technical Manual'"
[selectedChoices]="appState.filters?.technicalManual?.selectedChoices || []" [selectedChoices]="appState.filters?.technicalManual?.selectedChoices || []"
[availableChoices]="appState.filters?.technicalManual?.availableChoices || []"
[store]="store" [store]="store"
></sae-multi-selector> ></sae-multi-selector>
<sae-multi-selector <sae-multi-selector
(availableChoicesChange)="onAvailableChoicesChange($event, 'wingStatus')" (availableChoicesChange)="onAvailableChoicesChange($event, 'wingStatus')"
(selectedChoicesChange)="onSelectedChoicesChange($event, 'wingStatus')" (selectedChoicesChange)="onSelectedChoicesChange($event, 'wingStatus')"
[actionTypes]="actionTypes" [actionTypes]="actionTypes"
[availableChoices]="appState.filters?.wingStatus?.availableChoices || []"
[label]="'On-wing/off-wing'" [label]="'On-wing/off-wing'"
[selectedChoices]="appState.filters?.wingStatus?.selectedChoices || []" [selectedChoices]="appState.filters?.wingStatus?.selectedChoices || []"
[availableChoices]="appState.filters?.wingStatus?.availableChoices || []"
[store]="store" [store]="store"
></sae-multi-selector> ></sae-multi-selector>
</div> </div>
<div (click)="highlighted = !highlighted" class="chips-listing"> <div (click)="highlighted = !highlighted" class="chips-listing">
<!-- liste de chips--> <!-- liste de chips-->
<pre> <!-- <pre>-->
filters: <!-- filters:-->
{{ appState.filters }} <!-- {{ appState.filters }}-->
</pre> <!-- </pre>-->
<!-- hideChipsList : {{ hideChipsList }}-->
<!-- selectedChoices : {{ appState.filters.engineType.selectedList.length }}-->
@if (!hideChipsList) { @if (!hideChipsList) {
<div class="chips-column"> <div class="chips-column">
<!-- @for( elem in appState.filters.engineType.selectedChoices; track elem.label ){--> @for (elem of appState.filters.engineType.selectedList; track elem.label) {
<!-- <button class="button chips is-rounded is-small">-->
<!-- {{elem.label}}-->
<!-- <span class="post-button">-->
<!-- x-->
<!-- </span>-->
<!-- </button>-->
<!-- }-->
<button class="button chips is-rounded is-small"> <button class="button chips is-rounded is-small">
filtre col 2 {{ elem.label }}
<span class="post-button"> <span class="post-button">
x x
</span> </span>
</button> </button>
}
</div>
<div class="chips-column">
@for (elem of appState.filters.findings.selectedList; track elem.label) {
<button class="button chips is-rounded is-small">
{{ elem.label }}
<span class="post-button">
x
</span>
</button>
}
</div>
<div class="chips-column">
@for (elem of appState.filters.ata.selectedList; track elem.label) {
<button class="button chips is-rounded is-small">
{{ elem.label }}
<span class="post-button">
x
</span>
</button>
}
</div>
<div class="chips-column">
@for (elem of appState.filters.partNumber.selectedList; track elem.label) {
<button class="button chips is-rounded is-small">
{{ elem.label }}
<span class="post-button">
x
</span>
</button>
}
</div>
<div class="chips-column">
@for (elem of appState.filters.technicalManual.selectedList; track elem.label) {
<button class="button chips is-rounded is-small">
{{ elem.label }}
<span class="post-button">
x
</span>
</button>
}
</div>
<div class="chips-column">
@for (elem of appState.filters.onOffWing.selectedList; track elem.label) {
<button class="button chips is-rounded is-small">
{{ elem.label }}
<span class="post-button">
x
</span>
</button>
}
</div> </div>
} }
<!-- <div class="chips-column">--> <!-- <div class="chips-column">-->

10
my-workspace/projects/sae-lib/filters/filters-group/filters-group.scss
View file

@ -42,13 +42,6 @@
} }
} }
.chips-listing {
display: flex;
border-radius: 8px;
position: absolute;
top: 577px;
}
.filter-group { .filter-group {
@ -64,6 +57,9 @@
} }
.chips-listing { .chips-listing {
display: flex;
position: absolute;
top: 650px;
margin-top: 16px; margin-top: 16px;
border-radius: 4px; border-radius: 4px;
background: variables.$csc-filters-box-color; background: variables.$csc-filters-box-color;