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

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

@ -1,70 +1,74 @@
<div [ngClass]="{highlighted, 'is-disabled': disabled}" class="filter-group"> <div [ngClass]="{highlighted, 'is-disabled': disabled}" class="filter-group">
<!-- disabled: {{ disabled }}--> <!-- disabled: {{ disabled }}-->
@if(appState.filters){
<div class="selectors"> <div class="selectors">
<sae-multi-selector <sae-multi-selector
(availableChoicesChange)="onAvailableChoicesChange($event, 'engineType')" (availableChoicesChange)="onAvailableChoicesChange($event, 'engineType')"
(selectedChoicesChange)="onSelectedChoicesChange($event, 'engineType')" (selectedChoicesChange)="onSelectedChoicesChange($event, 'engineType')"
[actionTypes]="actionTypes" [actionTypes]="actionTypes"
[availableChoices]="appState.filters?.engineType?.availableChoices || []" [availableChoices]="appState.filters?.engineType?.availableList"
[disabled]="disabled" [disabled]="disabled"
[label]="'Engine type'" [label]="'Engine type'"
[selectedChoices]="appState.filters?.engineType?.selectedChoices || []" [selectedChoices]="appState.filters?.engineType?.selectedList"
[store]="store" [store]="store"
></sae-multi-selector> ></sae-multi-selector>
<sae-multi-selector <sae-multi-selector
(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 || []" [availableChoices]="appState.filters.findings.availableList"
[label]="'Findings'" [label]="'Findings'"
[selectedChoices]="appState.filters?.findings?.selectedChoices || []" [selectedChoices]="appState.filters.findings.selectedList"
[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 || []" [availableChoices]="appState.filters?.ata?.availableList"
[label]="'ATA'" [label]="'ATA'"
[selectedChoices]="appState.filters?.ata?.selectedChoices || []" [selectedChoices]="appState.filters?.ata?.selectedList"
[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 || []" [availableChoices]="appState.filters?.partNumber?.availableList"
[label]="'Part number'" [label]="'Part number'"
[selectedChoices]="appState.filters?.partNumber?.selectedChoices || []" [selectedChoices]="appState.filters?.partNumber?.selectedList"
[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 || []" [availableChoices]="appState.filters?.technicalManual?.availableList"
[label]="'Technical Manual'" [label]="'Technical Manual'"
[selectedChoices]="appState.filters?.technicalManual?.selectedChoices || []" [selectedChoices]="appState.filters?.technicalManual?.selectedList"
[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 || []" [availableChoices]="appState.filters?.wingStatus?.availableList"
[label]="'On-wing/off-wing'" [label]="'On-wing/off-wing'"
[selectedChoices]="appState.filters?.wingStatus?.selectedChoices || []" [selectedChoices]="appState.filters?.wingStatus?.selectedList"
[store]="store" [store]="store"
></sae-multi-selector> ></sae-multi-selector>
</div> </div>
}
@if (!hideChipsList) { @if (!hideChipsList) {
<div (click)="highlighted = !highlighted" class="chips-listing"> <div (click)="highlighted = !highlighted" class="chips-listing">
<!-- liste de chips--> <!-- liste de chips-->
<div class="chips-column"> <div class="chips-column">
@for (elem of appState.filters.engineType.selectedList; track elem.label) { @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 }} {{ elem.label }}
<span class="post-button"> <span class="post-button">
x x
@ -122,9 +126,7 @@
</button> </button>
} }
</div> </div>
<!-- <div class="chips-column">-->
<!-- </div>-->
</div> </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 { export class FiltersGroup {
@Input() highlighted = false; @Input() highlighted = false;
@Input() store: any = {};
@Input() appState: any = {}; @Input() appState: any = {};
@Input() store: any;
@Input() actionTypes: any; @Input() actionTypes: any;
@Input() disabled!: boolean; @Input() disabled!: boolean;
@Input() hideChipsList: boolean = false; @Input() hideChipsList: boolean = false;
constructor() { constructor() {
console.log('constructor filters group', this.appState, this.store, this.actionTypes); 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" class="input-box"
> >
displayDropdown {{displayDropdown}}
<i class="ri-search-line search-placeholder"></i> <i class="ri-search-line search-placeholder"></i>
<div class="label"> <div class="label">
@ -18,6 +17,7 @@
(focus)="displayDropdown = true" (focus)="displayDropdown = true"
class="is-hidden" placeholder="{{label}}" class="is-hidden" placeholder="{{label}}"
type="text"> type="text">
<span [ngClass]="{ 'is-visible' : selectedChoices?.length}" <span [ngClass]="{ 'is-visible' : selectedChoices?.length}"
class="selected-items-counter"> class="selected-items-counter">
{{ selectedChoices?.length || 0 }} {{ selectedChoices?.length || 0 }}
@ -52,13 +52,13 @@
<div class="available-items"> <div class="available-items">
<!-- available:--> <!-- available:-->
@for(sc of availableChoices; track sc.value){ @for(ac of availableChoices; track ac.value){
<div (click)="availableChoicesChangeToggleItem(sc)" <div (click)="availableChoicesChangeToggleItem(ac)"
class="dropdown-item" class="dropdown-item"
> >
<i class="ri-checkbox-line"></i> <i class="ri-checkbox-line"></i>
{{ sc.label }} {{ ac.label }}
</div> </div>
} }
@ -66,4 +66,5 @@
</div> </div>
</div> </div>
} }
</div> </div>

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

@ -53,8 +53,8 @@
position: relative; position: relative;
z-index: 11; z-index: 11;
height: 30px; height: 30px;
top: -36px; top: 0;
right: 65px; right:-153px;
&.is-visible { &.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'; import {CommonModule} from '@angular/common';
@Component({ @Component({
@ -9,13 +9,14 @@ import {CommonModule} from '@angular/common';
templateUrl: './multi-selector.html', templateUrl: './multi-selector.html',
styleUrl: './multi-selector.scss' styleUrl: './multi-selector.scss'
}) })
export class MultiSelector { export class MultiSelector implements OnInit {
@Input() disabled: boolean = false; @Input() disabled: boolean = false;
@Input() label!: string; @Input() label!: string;
// @Input() store: any; @Input() availableChoices: any = [{
// @Input() ActionTypes: any; label : 'aaaaaa',
@Input() availableChoices: any = ['choix 1', 'choix 2', 'choix 3']; value: 'AAAAA'
@Input() selectedChoices: any = ['choix 4', 'choix 5']; }];
@Input() selectedChoices: any = [ ];
@Input() displayDropdown: boolean = true; @Input() displayDropdown: boolean = true;
@Input() store: any; @Input() store: any;
@ -25,33 +26,37 @@ export class MultiSelector {
@Output() availableChoicesChange = new EventEmitter<any>(); @Output() availableChoicesChange = new EventEmitter<any>();
constructor() { constructor() {
}
ngOnInit() {
console.log('constructor multi selector', this.label, this.availableChoices, this.selectedChoices);
} }
selectedChoicesChangeToggleItem(choice: any) { selectedChoicesChangeToggleItem(choice: any) {
console.log('toggle selected choice ', choice, 'in filter ', this.label); console.log('toggle selected choice ', choice, 'in filter ', this.label);
this.selectedChoicesChange.emit(choice); this.selectedChoicesChange.emit(choice);
// console.log(choice); console.log(choice);
// this.store.dispatch({ this.store.dispatch({
// type: this.ActionTypes.UPDATE_FILTER, type: this.actionTypes.UPDATE_FILTER,
// payload: { payload: {
// filter: this.label, filter: this.label,
// selectedChoice: choice selectedChoice: choice
// } }
// }) })
} }
availableChoicesChangeToggleItem(choice: any) { availableChoicesChangeToggleItem(choice: any) {
this.availableChoicesChange.emit(choice); this.availableChoicesChange.emit(choice);
console.log('toggle available choice ', choice, 'in filter ', this.label); console.log('toggle available choice ', choice, 'in filter ', this.label);
// this.store.dispatch({ this.store.dispatch({
// type: this.ActionTypes.UPDATE_FILTER, type: this.actionTypes.UPDATE_FILTER,
// payload: { payload: {
// filter: this.label, filter: this.label,
// availableChoice: choice availableChoice: choice
// } }
// } }
// ) )
} }
onClickInput() { onClickInput() {

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

@ -39,7 +39,10 @@
<!-- advanced filters--> <!-- advanced filters-->
<div class="filters-container"> <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> [disabled]="!appState.toText.length"></sae-filters-group>
</div> </div>
</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 {FeedbackButton} from 'sae-lib/buttons/feedback-button/feedback-button';
import {BotTalks} from 'sae-lib/chatbot/bot-talks/bot-talks'; import {BotTalks} from 'sae-lib/chatbot/bot-talks/bot-talks';
import {Store} from '@ngrx/store'; import {Store} from '@ngrx/store';
import {StateInterface} from '../../redux/reducers'; import {ActionTypes, StateInterface} from '../../redux/reducers';
import {NgClass} from '@angular/common'; import {NgClass} from '@angular/common';
@ -25,9 +25,10 @@ import {NgClass} from '@angular/common';
export class Main { export class Main {
public appState: any = {}; public appState: any = {};
public actionTypes: any = ActionTypes;
public displayBotWarning: boolean = false; public displayBotWarning: boolean = false;
constructor(private store: Store<StateInterface>) { constructor(public store: Store<StateInterface>) {
this.store.select(state => state.app).subscribe(app => { this.store.select(state => state.app).subscribe(app => {
console.log('app', app); console.log('app', app);
this.appState = app; this.appState = app;

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

@ -31,7 +31,8 @@ export const filtersCSC =
value: 'SPM', value: 'SPM',
}] }]
, ,
findings: [{ findings: [
{
label: 'FRETTING : Usure induite par petit debat', label: 'FRETTING : Usure induite par petit debat',
value: 'FRETTING', value: 'FRETTING',
}, },

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

@ -41,11 +41,20 @@ export const initialState: StateInterface = {
] ]
}, },
findings: { findings: {
availableList: [{ // filtersCSC.findings
label: 'NICK : Impact a bord vif', availableList: [
value: 'NICK', {
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: [filtersCSC.findings] selectedList: []
}, },
ata: { ata: {
availableList: [{ availableList: [{

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

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