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() {

5
sae-csc/src/app/pages/main/main.html
View file

@ -39,7 +39,10 @@
<!-- advanced filters-->
<div class="filters-container">
<sae-filters-group (selectionchange)="onSelectedChoicesChange()" [appState]="appState"
<sae-filters-group (selectionchange)="onSelectedChoicesChange()"
[store]="store"
[appState]="appState"
[actionTypes]="actionTypes"
[disabled]="!appState.toText.length"></sae-filters-group>
</div>
</div>

4
sae-csc/src/app/pages/main/main.scss
View file

@ -70,4 +70,8 @@
}
}
.filters-container{
margin-top: -60px;
}
}

5
sae-csc/src/app/pages/main/main.ts
View file

@ -5,7 +5,7 @@ import {BottomNavigation} from '../../shared/navigation/bottom-navigation/bottom
import {FeedbackButton} from 'sae-lib/buttons/feedback-button/feedback-button';
import {BotTalks} from 'sae-lib/chatbot/bot-talks/bot-talks';
import {Store} from '@ngrx/store';
import {StateInterface} from '../../redux/reducers';
import {ActionTypes, StateInterface} from '../../redux/reducers';
import {NgClass} from '@angular/common';
@ -25,9 +25,10 @@ import {NgClass} from '@angular/common';
export class Main {
public appState: any = {};
public actionTypes: any = ActionTypes;
public displayBotWarning: boolean = false;
constructor(private store: Store<StateInterface>) {
constructor(public store: Store<StateInterface>) {
this.store.select(state => state.app).subscribe(app => {
console.log('app', app);
this.appState = app;

9
sae-csc/src/app/redux/filters.ts
View file

@ -31,10 +31,11 @@ export const filtersCSC =
value: 'SPM',
}]
,
findings: [{
label: 'FRETTING : Usure induite par petit debat',
value: 'FRETTING',
},
findings: [
{
label: 'FRETTING : Usure induite par petit debat',
value: 'FRETTING',
},
{
label: 'DENT : Impact a bord arrondi',
value: 'DENT',

19
sae-csc/src/app/redux/initialState.ts
View file

@ -41,11 +41,20 @@ export const initialState: StateInterface = {
]
},
findings: {
availableList: [{
label: 'NICK : Impact a bord vif',
value: 'NICK',
}],
selectedList: [filtersCSC.findings]
// filtersCSC.findings
availableList: [
{
label: 'FRETTING : Usure induite par petit debat',
value: 'FRETTING',
},
{
label: 'DENT : Impact a bord arrondi',
value: 'DENT',
}, {
label: 'MISSING PAINT/COATING',
value: 'MISSING_PAINT_COATING',
}],
selectedList: []
},
ata: {
availableList: [{

1
sae-csc/src/app/redux/reducers/index.ts
View file

@ -6,6 +6,7 @@ import {initialState} from '../initialState';
export enum ActionTypes {
UPDATE_USER = '[User] Update User',
UPDATE_APP = '[App] Update App',
UPDATE_FILTER = '[App] Update Filter',
UPDATE_CONVERSATIONS_LIST = '[Conversations] Update Conversations List',
UPDATE_ACTIVE_CONVERSATION = '[Conversations] Update Active Conversation',
POST_MESSAGE_TO_ACTIVE_CONVERSATION = '[Conversations] Post message to Active Conversation',