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

linking lists with reducer

Browse source
This commit is contained in:
Tykayn 2025-09-25 17:43:02 +02:00 • committed by tykayn
parent c0761da046
commit e9d273c5a2
7 changed files with 101 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

20
airwatch/src/app/reducers/index.ts
View file

@ -9,6 +9,7 @@ import {ChatbotMessage} from '../services/chatbot.message.type';
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',
@ -58,6 +59,14 @@ export interface UpdateAppAction {
};
}
export interface UpdateFilterAction {
type: ActionTypes.UPDATE_FILTER;
payload: {
name: string;
enabled?: boolean;
};
}
export interface UpdateConversationsListAction {
type: ActionTypes.UPDATE_CONVERSATIONS_LIST;
payload: Array<ChatbotConversation>;
@ -103,6 +112,7 @@ export interface SwitchToNextLanguageAction {
export type AppActions =
| UpdateUserAction
| UpdateAppAction
| UpdateFilterAction
| UpdateConversationsListAction
| UpdateActiveConversationAction
| UpdateConversationPanelAction
@ -168,6 +178,16 @@ function appReducer(state = initialState.app, action: AppActions) {
...state,
...action.payload
};
case ActionTypes.UPDATE_FILTER:
return {
...state,
filters: state.filters.map(f => {
if (f.name !== action.payload.name) return f;
const nextEnabled =
typeof action.payload.enabled === 'boolean' ? action.payload.enabled : !f.enabled;
return { ...f, enabled: nextEnabled };
})
};
case ActionTypes.SWITCH_TO_NEXT_THEME:
// Find the main-button of the current active theme
const currentThemeIndex = state.themesList.indexOf(state.activeTheme);

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

@ -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

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

@ -83,6 +83,7 @@
.chips {
cursor: pointer;
background: variables.$csc-chips-bg-color;
color: white;
border: solid 1px variables.$csc-chips-bg-color;

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

@ -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
}
});
}

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

@ -51,6 +51,7 @@
}
<div class="available-items">
<!-- disponibles:-->
<!-- available:-->
@for(ac of availableChoices; track ac.value){
<div (click)="availableChoicesChangeToggleItem(ac)"

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

@ -23,10 +23,7 @@ export const initialState: StateInterface = {
}],
filters: {
engineType: {
availableList: [{
label: 'ABC',
value: 'ABC',
}],
availableList: [],
selectedList: [
{
label: 'DEF',
@ -42,18 +39,22 @@ export const initialState: StateInterface = {
},
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',
}],
availableList:
filtersCSC.findings
// [
// {
// 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: {

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

@ -27,6 +27,13 @@ export interface UpdateUserAction {
id: string;
};
}
export interface UpdateFilterAction {
type: ActionTypes.UPDATE_FILTER;
payload: {
filter: string;
choice: string;
};
}
export interface UpdateAppAction {
type: ActionTypes.UPDATE_APP;
@ -91,6 +98,7 @@ export type technicalManualType = {
export type AppActions =
| UpdateUserAction
| UpdateAppAction
| UpdateFilterAction
| SendUserFeedbackAction
| SwitchToNextThemeAction
| SwitchToNextLanguageAction;
@ -162,6 +170,47 @@ function appReducer(state = initialState.app, action: AppActions) {
...state,
...action.payload
};
case ActionTypes.UPDATE_FILTER: {
const { filter, choice } = (action as UpdateFilterAction).payload;
const filterGroup = state.filters[filter as keyof typeof state.filters];
if (!filterGroup) {
return state;
}
const isInSelected = filterGroup.selectedList.some((item: any) => item.value === choice);
const isInAvailable = filterGroup.availableList.some((item: any) => item.value === choice);
// If in selected → move to available; if in available → move to selected; else no-op
if (isInSelected) {
const item = filterGroup.selectedList.find((i: any) => i.value === choice);
return {
...state,
filters: {
...state.filters,
[filter]: {
availableList: [...filterGroup.availableList, item],
selectedList: filterGroup.selectedList.filter((i: any) => i.value !== choice)
}
}
};
}
if (isInAvailable) {
const item = filterGroup.availableList.find((i: any) => i.value === choice);
return {
...state,
filters: {
...state.filters,
[filter]: {
availableList: filterGroup.availableList.filter((i: any) => i.value !== choice),
selectedList: [...filterGroup.selectedList, item]
}
}
};
}
return state;
}
default:
return state;
}