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

filters link

Browse source
This commit is contained in:
Tykayn 2025-09-25 16:55:38 +02:00 • committed by tykayn
parent 03d7a90d24
commit c0761da046
11 changed files with 130 additions and 102 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,62 +1,66 @@
<div [ngClass]="{highlighted, 'is-disabled': disabled}" class="filter-group">
<!-- disabled: {{ disabled }}-->
<div class="selectors">
<sae-multi-selector
(availableChoicesChange)="onAvailableChoicesChange($event, 'engineType')"
(selectedChoicesChange)="onSelectedChoicesChange($event, 'engineType')"
[actionTypes]="actionTypes"
[availableChoices]="appState.filters?.engineType?.availableChoices || []"
[disabled]="disabled"
[label]="'Engine type'"
[selectedChoices]="appState.filters?.engineType?.selectedChoices || []"
[store]="store"
></sae-multi-selector>
<sae-multi-selector
(availableChoicesChange)="onAvailableChoicesChange($event, 'findings')"
(selectedChoicesChange)="onSelectedChoicesChange($event, 'findings')"
[actionTypes]="actionTypes"
[availableChoices]="appState.filters?.findings?.availableChoices || []"
[label]="'Findings'"
[selectedChoices]="appState.filters?.findings?.selectedChoices || []"
[store]="store"
></sae-multi-selector>
<sae-multi-selector
(availableChoicesChange)="onAvailableChoicesChange($event, 'ata')"
(selectedChoicesChange)="onSelectedChoicesChange($event, 'ata')"
[actionTypes]="actionTypes"
[availableChoices]="appState.filters?.ata?.availableChoices || []"
[label]="'ATA'"
[selectedChoices]="appState.filters?.ata?.selectedChoices || []"
[store]="store"
></sae-multi-selector>
<sae-multi-selector
(availableChoicesChange)="onAvailableChoicesChange($event, 'partNumber')"
(selectedChoicesChange)="onSelectedChoicesChange($event, 'partNumber')"
[actionTypes]="actionTypes"
[availableChoices]="appState.filters?.partNumber?.availableChoices || []"
[label]="'Part number'"
[selectedChoices]="appState.filters?.partNumber?.selectedChoices || []"
[store]="store"
></sae-multi-selector>
<sae-multi-selector
(availableChoicesChange)="onAvailableChoicesChange($event, 'technicalManual')"
(selectedChoicesChange)="onSelectedChoicesChange($event, 'technicalManual')"
[actionTypes]="actionTypes"
[availableChoices]="appState.filters?.technicalManual?.availableChoices || []"
[label]="'Technical Manual'"
[selectedChoices]="appState.filters?.technicalManual?.selectedChoices || []"
[store]="store"
></sae-multi-selector>
<sae-multi-selector
(availableChoicesChange)="onAvailableChoicesChange($event, 'wingStatus')"
(selectedChoicesChange)="onSelectedChoicesChange($event, 'wingStatus')"
[actionTypes]="actionTypes"
[availableChoices]="appState.filters?.wingStatus?.availableChoices || []"
[label]="'On-wing/off-wing'"
[selectedChoices]="appState.filters?.wingStatus?.selectedChoices || []"
[store]="store"
></sae-multi-selector>
</div>
@if(appState.filters){
<div class="selectors">
<sae-multi-selector
(availableChoicesChange)="onAvailableChoicesChange($event, 'engineType')"
(selectedChoicesChange)="onSelectedChoicesChange($event, 'engineType')"
[actionTypes]="actionTypes"
[availableChoices]="appState.filters?.engineType?.availableList"
[disabled]="disabled"
[label]="'Engine type'"
[selectedChoices]="appState.filters?.engineType?.selectedList"
[store]="store"
></sae-multi-selector>
<sae-multi-selector
(availableChoicesChange)="onAvailableChoicesChange($event, 'findings')"
(selectedChoicesChange)="onSelectedChoicesChange($event, 'findings')"
[actionTypes]="actionTypes"
[availableChoices]="appState.filters.findings.availableList"
[label]="'Findings'"
[selectedChoices]="appState.filters.findings.selectedList"
[store]="store"
></sae-multi-selector>
<sae-multi-selector
(availableChoicesChange)="onAvailableChoicesChange($event, 'ata')"
(selectedChoicesChange)="onSelectedChoicesChange($event, 'ata')"
[actionTypes]="actionTypes"
[availableChoices]="appState.filters?.ata?.availableList"
[label]="'ATA'"
[selectedChoices]="appState.filters?.ata?.selectedList"
[store]="store"
></sae-multi-selector>
<sae-multi-selector
(availableChoicesChange)="onAvailableChoicesChange($event, 'partNumber')"
(selectedChoicesChange)="onSelectedChoicesChange($event, 'partNumber')"
[actionTypes]="actionTypes"
[availableChoices]="appState.filters?.partNumber?.availableList"
[label]="'Part number'"
[selectedChoices]="appState.filters?.partNumber?.selectedList"
[store]="store"
></sae-multi-selector>
<sae-multi-selector
(availableChoicesChange)="onAvailableChoicesChange($event, 'technicalManual')"
(selectedChoicesChange)="onSelectedChoicesChange($event, 'technicalManual')"
[actionTypes]="actionTypes"
[availableChoices]="appState.filters?.technicalManual?.availableList"
[label]="'Technical Manual'"
[selectedChoices]="appState.filters?.technicalManual?.selectedList"
[store]="store"
></sae-multi-selector>
<sae-multi-selector
(availableChoicesChange)="onAvailableChoicesChange($event, 'wingStatus')"
(selectedChoicesChange)="onSelectedChoicesChange($event, 'wingStatus')"
[actionTypes]="actionTypes"
[availableChoices]="appState.filters?.wingStatus?.availableList"
[label]="'On-wing/off-wing'"
[selectedChoices]="appState.filters?.wingStatus?.selectedList"
[store]="store"
></sae-multi-selector>
</div>
}
@if (!hideChipsList) {
<div (click)="highlighted = !highlighted" class="chips-listing">
@ -64,7 +68,7 @@
<div class="chips-column">
@for (elem of appState.filters.engineType.selectedList; track elem.label) {
<button class="button chips is-rounded is-small">
<button class="button chips is-rounded is-small" (click)="onSelectedChoicesChange(elem, 'engineType')">
{{ elem.label }}
<span class="post-button">
x
@ -122,9 +126,7 @@
</button>
}
</div>
<!-- <div class="chips-column">-->
<!-- </div>-->
</div>
}
</div>

3
my-workspace/projects/sae-lib/filters/filters-group/filters-group.ts
View file

@ -14,13 +14,14 @@ import {CommonModule} from '@angular/common';
})
export class FiltersGroup {
@Input() highlighted = false;
@Input() store: any = {};
@Input() appState: any = {};
@Input() store: any;
@Input() actionTypes: any;
@Input() disabled!: boolean;
@Input() hideChipsList: boolean = false;
constructor() {
console.log('constructor filters group', this.appState, this.store, this.actionTypes);
}

9
my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html
View file

@ -4,7 +4,6 @@
}"
class="input-box"
>
displayDropdown {{displayDropdown}}
<i class="ri-search-line search-placeholder"></i>
<div class="label">
@ -18,6 +17,7 @@
(focus)="displayDropdown = true"
class="is-hidden" placeholder="{{label}}"
type="text">
<span [ngClass]="{ 'is-visible' : selectedChoices?.length}"
class="selected-items-counter">
{{ selectedChoices?.length || 0 }}
@ -52,13 +52,13 @@
<div class="available-items">
<!-- available:-->
@for(sc of availableChoices; track sc.value){
<div (click)="availableChoicesChangeToggleItem(sc)"
@for(ac of availableChoices; track ac.value){
<div (click)="availableChoicesChangeToggleItem(ac)"
class="dropdown-item"
>
<i class="ri-checkbox-line"></i>
{{ sc.label }}
{{ ac.label }}
</div>
}
@ -66,4 +66,5 @@
</div>
</div>
}
</div>

4
my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.scss
View file

@ -53,8 +53,8 @@
position: relative;
z-index: 11;
height: 30px;
top: -36px;
right: 65px;
top: 0;
right:-153px;
&.is-visible {

49
my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.ts
View file

@ -1,4 +1,4 @@
import {Component, EventEmitter, Input, Output} from '@angular/core';
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {CommonModule} from '@angular/common';
@Component({
@ -9,13 +9,14 @@ import {CommonModule} from '@angular/common';
templateUrl: './multi-selector.html',
styleUrl: './multi-selector.scss'
})
export class MultiSelector {
export class MultiSelector implements OnInit {
@Input() disabled: boolean = false;
@Input() label!: string;
// @Input() store: any;
// @Input() ActionTypes: any;
@Input() availableChoices: any = ['choix 1', 'choix 2', 'choix 3'];
@Input() selectedChoices: any = ['choix 4', 'choix 5'];
@Input() availableChoices: any = [{
label : 'aaaaaa',
value: 'AAAAA'
}];
@Input() selectedChoices: any = [ ];
@Input() displayDropdown: boolean = true;
@Input() store: any;
@ -25,33 +26,37 @@ export class MultiSelector {
@Output() availableChoicesChange = new EventEmitter<any>();
constructor() {
}
ngOnInit() {
console.log('constructor multi selector', this.label, this.availableChoices, this.selectedChoices);
}
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
// }
// })
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
// }
// }
// )
this.store.dispatch({
type: this.actionTypes.UPDATE_FILTER,
payload: {
filter: this.label,
availableChoice: choice
}
}
)
}
onClickInput() {