From e68284ba516a93a483045a2f54115c2c3e1482a8 Mon Sep 17 00:00:00 2001 From: Marcel Date: Tue, 22 Nov 2022 10:30:36 +0100 Subject: [PATCH 01/10] current member --- .../member-table/member-table.component.html | 15 +++++ .../member-table/member-table.component.ts | 1 + .../routes/route/route.component.ts | 14 ++-- .../navigation/header/header.component.html | 10 +++ src/app/navigation/header/header.component.ts | 24 ++++++- src/app/store/actions/members.actions.ts | 13 ++-- src/app/store/effects/members.effects.ts | 28 ++------ src/app/store/reducers/members.reducer.ts | 65 +++++++++---------- 8 files changed, 101 insertions(+), 69 deletions(-) diff --git a/src/app/components/members/member-table/member-table.component.html b/src/app/components/members/member-table/member-table.component.html index 243cd35..d112e8d 100644 --- a/src/app/components/members/member-table/member-table.component.html +++ b/src/app/components/members/member-table/member-table.component.html @@ -1,3 +1,16 @@ +
+ + + + + + + + + + +
+
diff --git a/src/app/components/members/member-table/member-table.component.ts b/src/app/components/members/member-table/member-table.component.ts index fd60f87..5165dde 100644 --- a/src/app/components/members/member-table/member-table.component.ts +++ b/src/app/components/members/member-table/member-table.component.ts @@ -25,6 +25,7 @@ export class MemberTableComponent implements OnInit { @ViewChild(MatPaginator) paginator!: MatPaginator; @ViewChild(MatSort) sort!: MatSort; members?: Member[]; + currentUser?: Member; displayedColumns: string[] = [ 'id', diff --git a/src/app/components/routes/route/route.component.ts b/src/app/components/routes/route/route.component.ts index ffe16c9..f06b42b 100644 --- a/src/app/components/routes/route/route.component.ts +++ b/src/app/components/routes/route/route.component.ts @@ -23,7 +23,7 @@ export class RouteComponent implements OnInit { @Input() route?: Route; containsFavorite: boolean = false; favoriteRoutes: FavouriteRoute[] | undefined = undefined; - currentMember: Member = {}; + currentMember: Member | undefined = {}; constructor( private router: Router, @@ -35,12 +35,12 @@ export class RouteComponent implements OnInit { this.store.select(getCurrentMember).subscribe((member) => { this.currentMember = member; }); - this.containsFavorite = this.currentMember.favouriteRoutes?.filter( + this.containsFavorite = this.currentMember?.favouriteRoutes?.filter( (fav) => fav.id === this.route?.id ).length ? true : false; - this.favoriteRoutes = this.currentMember.favouriteRoutes; + this.favoriteRoutes = this.currentMember?.favouriteRoutes; } deleteRoute(route: Route): void { @@ -76,10 +76,10 @@ export class RouteComponent implements OnInit { } const member: Member = { - id: this.currentMember.id, - firstName: this.currentMember.firstName, - lastName: this.currentMember.lastName, - addressDto: this.currentMember.addressDto, + id: this.currentMember?.id, + firstName: this.currentMember?.firstName, + lastName: this.currentMember?.lastName, + addressDto: this.currentMember?.addressDto, favouriteRoutes: this.favoriteRoutes, }; diff --git a/src/app/navigation/header/header.component.html b/src/app/navigation/header/header.component.html index d8876b8..1d5cfb7 100644 --- a/src/app/navigation/header/header.component.html +++ b/src/app/navigation/header/header.component.html @@ -5,6 +5,16 @@
CLIMBING GYM
+
+ + + + {{member.firstName}} {{member.lastName}} + + + + +
diff --git a/src/app/components/members/member-table/member-table.component.ts b/src/app/components/members/member-table/member-table.component.ts index 5165dde..95553da 100644 --- a/src/app/components/members/member-table/member-table.component.ts +++ b/src/app/components/members/member-table/member-table.component.ts @@ -11,6 +11,7 @@ import {select, Store} from "@ngrx/store"; import {getAllMembers} from "../../../store/selectors/members.selectors"; import {loadMembers, removeMember} from "../../../store/actions/members.actions"; import {Router} from "@angular/router"; +import {Observable} from "rxjs"; @Component({ @@ -24,8 +25,7 @@ export class MemberTableComponent implements OnInit { dataSource!: MatTableDataSource; @ViewChild(MatPaginator) paginator!: MatPaginator; @ViewChild(MatSort) sort!: MatSort; - members?: Member[]; - currentUser?: Member; + members$: Member[] = []; displayedColumns: string[] = [ 'id', @@ -39,30 +39,18 @@ export class MemberTableComponent implements OnInit { } ngOnInit(): void { - this.store.dispatch(loadMembers()); + this.store.select(getAllMembers).subscribe( (data: Member[]) => { - this.members = data; - this.dataSource = new MatTableDataSource(this.members) - this.dataSource.paginator = this.paginator; - this.dataSource.sort = this.sort; - }); + this.members$ = data; + if(this.members$) { + this.dataSource = new MatTableDataSource(this.members$) + this.dataSource.paginator = this.paginator; + this.dataSource.sort = this.sort; + }}); } - // public getMembers(): void { - // this.memberService.getMembers().subscribe( - // (data: Member[]) => { - // console.log(data); - // this.members = data; - // this.dataSource = new MatTableDataSource(this.members); - // this.dataSource.paginator = this.paginator; - // this.dataSource.sort = this.sort; - // }, - // (error: HttpErrorResponse) => { - // alert(error.message); - // } - // ); - // } + applyFilter(event: Event) { const filterValue = (event.target as HTMLInputElement).value; @@ -74,19 +62,13 @@ export class MemberTableComponent implements OnInit { } onDeleteMember(id: number) { - this.store.dispatch(removeMember({id})); - // this.store.dispatch(loadMembers()); - - // this.ngOnInit(); - - // this.router - // .navigateByUrl('/routes', { skipLocationChange: true }) - // .then(() => this.router.navigate(['/members'])); + this.store + .dispatch(removeMember({id})); } openAddFormDialog(enterAnimation: any) { this.dialog.open(AddMemberFormComponent, { - enterAnimationDuration: enterAnimation, + enterAnimationDuration: enterAnimation, exitAnimationDuration: enterAnimation, width: '50%', }); } diff --git a/src/app/components/routes/route/add-route-form/add-route-form.component.scss b/src/app/components/routes/route/add-route-form/add-route-form.component.scss index b9c6665..e058daf 100644 --- a/src/app/components/routes/route/add-route-form/add-route-form.component.scss +++ b/src/app/components/routes/route/add-route-form/add-route-form.component.scss @@ -22,10 +22,10 @@ mat-divider { } form { - font-size: 1.4rem; + font-size: 1.0rem; border: 2px solid darkgrey; background-color: white; - width: 20%; + width: 30%; margin: 30px auto; padding: 20px; display: flex; diff --git a/src/app/components/routes/route/route.component.html b/src/app/components/routes/route/route.component.html index 25dcb64..9b088f9 100644 --- a/src/app/components/routes/route/route.component.html +++ b/src/app/components/routes/route/route.component.html @@ -1,4 +1,4 @@ - + info favorite diff --git a/src/app/components/routes/route/route.component.ts b/src/app/components/routes/route/route.component.ts index f06b42b..fb244f1 100644 --- a/src/app/components/routes/route/route.component.ts +++ b/src/app/components/routes/route/route.component.ts @@ -35,11 +35,9 @@ export class RouteComponent implements OnInit { this.store.select(getCurrentMember).subscribe((member) => { this.currentMember = member; }); - this.containsFavorite = this.currentMember?.favouriteRoutes?.filter( + this.containsFavorite = !!this.currentMember?.favouriteRoutes?.filter( (fav) => fav.id === this.route?.id - ).length - ? true - : false; + ).length; this.favoriteRoutes = this.currentMember?.favouriteRoutes; } diff --git a/src/app/components/routes/routes.component.html b/src/app/components/routes/routes.component.html index fd3ed1e..19cf5e0 100644 --- a/src/app/components/routes/routes.component.html +++ b/src/app/components/routes/routes.component.html @@ -1,8 +1,9 @@ - - - - - - + + + + + + + diff --git a/src/app/components/routes/routes.component.scss b/src/app/components/routes/routes.component.scss index b9113ee..9fa554c 100644 --- a/src/app/components/routes/routes.component.scss +++ b/src/app/components/routes/routes.component.scss @@ -19,7 +19,5 @@ button { width: 100px; height: 38px; cursor: pointer; - margin-top: 40px; - margin-bottom: -10px; - margin-right: 70%; + margin-top: 40px; } diff --git a/src/app/navigation/header/header.component.html b/src/app/navigation/header/header.component.html index 1d5cfb7..01feb08 100644 --- a/src/app/navigation/header/header.component.html +++ b/src/app/navigation/header/header.component.html @@ -5,7 +5,7 @@ -
+
diff --git a/src/app/navigation/header/header.component.scss b/src/app/navigation/header/header.component.scss index 015f327..8cdcb5a 100644 --- a/src/app/navigation/header/header.component.scss +++ b/src/app/navigation/header/header.component.scss @@ -19,6 +19,13 @@ a:active { padding-left: 6px; } +mat-select{ + color: black; + font-size: 1.1rem; +} + + + //nav { // height: 60px; // width: 100%; diff --git a/src/app/services/member.service.ts b/src/app/services/member.service.ts index 4612530..eea79ec 100644 --- a/src/app/services/member.service.ts +++ b/src/app/services/member.service.ts @@ -13,7 +13,6 @@ export class MemberService { constructor(private http: HttpClient) { } public getMembers(): Observable { - console.log("Get all!!!!"); return this.http.get(`${this.apiServerUrl}/members/all`); } @@ -22,7 +21,6 @@ export class MemberService { } public addMember(member: Member): Observable { - console.log("Add member") return this.http.post(`${this.apiServerUrl}/member/add`, member); } diff --git a/src/app/store/actions/members.actions.ts b/src/app/store/actions/members.actions.ts index 094260a..851c346 100644 --- a/src/app/store/actions/members.actions.ts +++ b/src/app/store/actions/members.actions.ts @@ -31,7 +31,6 @@ export const loadMemberFail = createAction( //Add one Member -//TODO: Add Member Success and Failure export const addMember = createAction( '[Member] Add Member', props<{ member: Member }>() @@ -48,7 +47,6 @@ export const addMemberFailure = createAction( // Remove one Member -//TODO: Remove Member Success and Failure export const removeMember = createAction( '[Member] Remove Member', props<{ id: number }>() diff --git a/src/app/store/effects/members.effects.ts b/src/app/store/effects/members.effects.ts index 94eebe2..9187fcd 100644 --- a/src/app/store/effects/members.effects.ts +++ b/src/app/store/effects/members.effects.ts @@ -25,17 +25,6 @@ export class MembersEffects { ) ); - // loadMember - loadMember$ = createEffect(() => - this.actions$.pipe( - ofType(MembersActions.loadMember), - switchMap((member) => - this.memberService.getMemberById(member.id).pipe( - map((member) => MembersActions.loadMemberSuccess( {payload: member})), - catchError((error) => of(MembersActions.loadMembersFailure(error))) - )) - )); - removeMember$ = createEffect(() => this.actions$.pipe( ofType(MembersActions.removeMember), @@ -43,16 +32,16 @@ export class MembersEffects { this.memberService.deleteMember(member.id) .pipe(map(() => member.id))), map((id) => MembersActions.removeMemberSuccess({id}), + catchError((error) => of(MembersActions.removeMemberFailure(error))) ))); //TODO: Without using router addMember$ = createEffect(() =>this.actions$.pipe( ofType(MembersActions.addMember), - switchMap((data) =>this.memberService.addMember(data.member)), - tap(() => this.router.navigate(['members'])), - map( - (member) => MembersActions.addMemberSuccess({ member }), + switchMap((data) => + this.memberService.addMember(data.member)), + map((member) => MembersActions.addMemberSuccess({ member }), catchError((error) => of(MembersActions.addMemberFailure(error))) ) ) diff --git a/src/app/store/reducers/members.reducer.ts b/src/app/store/reducers/members.reducer.ts index 14f1490..bcdc012 100644 --- a/src/app/store/reducers/members.reducer.ts +++ b/src/app/store/reducers/members.reducer.ts @@ -43,7 +43,6 @@ const initialState: Readonly = { }; export const membersReducer = createReducer( - // get all routes initialState, on(MemberActions.loadMembers, (state): MembersState => { return { @@ -68,24 +67,25 @@ export const membersReducer = createReducer( } }), - //Load one Member TODO: Success and Failure + //Load one Member TODO: Failure on(MemberActions.loadMember, (state, { id }): MembersState => { return { ...state, + member: state.members.find(member => member.id === id), loading: true } }), - // on(MemberActions.loadMemberSuccess, (state, action): MembersState => - // { - // return { - // ...state, - // member: state.members. - // loading: false, - // } - // }), - - //Add Member TODO: Success and Failure + on(MemberActions.loadMemberSuccess, (state, {payload}): MembersState => + { + return { + ...state, + members: [...state.members, payload], + loading: false, + } + }), + + //Add Member TODO:Failure on(MemberActions.addMember, (state, { member }): MembersState => { return { ...state, @@ -94,11 +94,13 @@ export const membersReducer = createReducer( on(MemberActions.addMemberSuccess, (state, { member }): MembersState => { return { - ...state, members: [...state.members, member], loading:false}}), + ...state, members: + [...state.members, member], + loading:false}}), //Remove Member TODO: Success and Failure - on(MemberActions.removeMemberSuccess, (state, { id }): MembersState => { + on(MemberActions.removeMember, (state, { id }): MembersState => { return { ...state, members: state.members.filter((members) => members.id !== parseInt(id.toString())), diff --git a/src/app/store/selectors/members.selectors.ts b/src/app/store/selectors/members.selectors.ts index da3c36f..82e0c91 100644 --- a/src/app/store/selectors/members.selectors.ts +++ b/src/app/store/selectors/members.selectors.ts @@ -15,19 +15,9 @@ export const getMemberById = (id: number) => createSelector(getAllMembers, (allM }); } else { return {}; - } -}); -export const getCurrentMember = createSelector( - getAllMemberState, - (state) => state.currentMember + }}); + +export const getCurrentMember = createSelector(getAllMemberState, (state) => state.currentMember ); -// export const getMemberById = (id: number) => createSelector(getAllMembers, (allMembers) => { -// if (allMembers) { -// return allMembers.find(member => { -// return member.id === id; -// }); -// } else { -// return {}; -// } -// }); + -- GitLab From d1d689633e97ebe55054afdeecf71b26c1f381ca Mon Sep 17 00:00:00 2001 From: Marcel Date: Thu, 24 Nov 2022 14:13:53 +0100 Subject: [PATCH 03/10] changed service calls (removed /all and /add) --- .../add-member-form.component.ts | 4 +- .../member-details.component.html | 12 +++--- .../member-details.component.ts | 39 ++++++++++++------- .../member-table/member-table.component.ts | 28 +++++++------ .../navigation/header/header.component.html | 2 +- src/app/navigation/header/header.component.ts | 22 ++++++----- src/app/services/member.service.ts | 4 +- src/app/services/route.service.ts | 4 +- src/app/store/effects/members.effects.ts | 1 + src/app/store/selectors/members.selectors.ts | 17 +++----- 10 files changed, 73 insertions(+), 60 deletions(-) diff --git a/src/app/components/members/member-table/add-member-form/add-member-form.component.ts b/src/app/components/members/member-table/add-member-form/add-member-form.component.ts index 275f84f..ea2ce21 100644 --- a/src/app/components/members/member-table/add-member-form/add-member-form.component.ts +++ b/src/app/components/members/member-table/add-member-form/add-member-form.component.ts @@ -6,13 +6,12 @@ import { FormControl, } from '@angular/forms'; -import { MemberService } from '../../../../services/member.service'; import { Router } from '@angular/router'; import { Member } from '../../../../models/member'; import {addMember, loadMembers} from "../../../../store/actions/members.actions"; import {Store} from "@ngrx/store"; import {AppState} from "../../../../store/model/app-state-model"; -import {getAllMembers} from "../../../../store/selectors/members.selectors"; + @Component({ selector: 'app-add-member-form', @@ -86,6 +85,7 @@ export class AddMemberFormComponent implements OnInit { }, }; this.store.dispatch(addMember({ member })); + //TODO: loadMembers wird vermutlich zu früh aufgerufen. Frage? Wieso ist Member trotzdem schon im state this.store.dispatch(loadMembers()); console.log(member) } diff --git a/src/app/components/members/member-table/member-details/member-details.component.html b/src/app/components/members/member-table/member-details/member-details.component.html index b642d65..1a07daf 100644 --- a/src/app/components/members/member-table/member-details/member-details.component.html +++ b/src/app/components/members/member-table/member-details/member-details.component.html @@ -1,21 +1,21 @@ - Id: {{ member$.id }} - {{ member$.firstName }} {{ member$.lastName }} + Id: {{ member.id }} + {{ member.firstName }} {{ member.lastName }}

- {{ member$.addressDto.street}} {{ member$.addressDto.houseNumber }}, - {{ member$.addressDto.postCode }} + {{ member.addressDto.street}} {{ member.addressDto.houseNumber }}, + {{ member.addressDto.postCode }}


Favourite Routes
-
+

- {{ route.name }}, {{ route.difficultyLevelEnum }}

diff --git a/src/app/components/members/member-table/member-details/member-details.component.ts b/src/app/components/members/member-table/member-details/member-details.component.ts index 8a944f0..a33c713 100644 --- a/src/app/components/members/member-table/member-details/member-details.component.ts +++ b/src/app/components/members/member-table/member-details/member-details.component.ts @@ -1,37 +1,46 @@ -import { Component, Input, OnInit } from '@angular/core'; +import {Component, OnDestroy, OnInit} from '@angular/core'; import { MemberService } from '../../../../services/member.service'; import { ActivatedRoute } from '@angular/router'; import { Member } from '../../../../models/member'; -import {loadMember, loadMembers, removeMember} from "../../../../store/actions/members.actions"; +import {loadMember} from "../../../../store/actions/members.actions"; import {AppState} from "../../../../store/model/app-state-model"; -import {select, Store} from "@ngrx/store"; -import {getMemberById} from "../../../../store/selectors/members.selectors"; +import {Store} from "@ngrx/store"; +import {getMember} from "../../../../store/selectors/members.selectors"; +import {Subject, Subscription, takeUntil} from "rxjs"; + @Component({ selector: 'app-member-details', templateUrl: './member-details.component.html', styleUrls: ['./member-details.component.scss'], }) -export class MemberDetailsComponent implements OnInit { - member$?: Member; +export class MemberDetailsComponent implements OnInit, OnDestroy { + member?: Member; + subscription?: Subscription; + onDestroy$ = new Subject(); + displayedColumns: string[] = ['id', 'firstName', 'lastName', 'address', 'favouriteRoutes']; constructor(private memberService: MemberService, private activatedRoute: ActivatedRoute, private store: Store) {} - ngOnInit(): void { - this.activatedRoute.params.subscribe((params) => + ngOnInit(): void { + this.subscription = this.activatedRoute.params.subscribe((params) => this.getMemberById(parseInt(params['id']))); - } - //TODO: Get Member without http call - getMemberById(id: number) { - - this.store.dispatch(loadMember({id})); - this.store.select(getMemberById(id)) + this.store.select(getMember).pipe(takeUntil(this.onDestroy$)) .subscribe((member) => { - this.member$ = member; + this.member = member; }); + } + + ngOnDestroy(): void { + this.subscription?.unsubscribe(); + this.onDestroy$.next(); + this.onDestroy$.complete(); + } + getMemberById(id: number) { + this.store.dispatch(loadMember({id})); } } diff --git a/src/app/components/members/member-table/member-table.component.ts b/src/app/components/members/member-table/member-table.component.ts index 95553da..089a047 100644 --- a/src/app/components/members/member-table/member-table.component.ts +++ b/src/app/components/members/member-table/member-table.component.ts @@ -1,4 +1,4 @@ -import {Component, OnInit, ViewChild} from '@angular/core'; +import {Component, OnDestroy, OnInit, ViewChild} from '@angular/core'; import {MemberService} from '../../../services/member.service'; import {Member} from '../../../models/member'; import {MatPaginator} from '@angular/material/paginator'; @@ -7,11 +7,11 @@ import {MatTableDataSource} from '@angular/material/table'; import {MatDialog} from '@angular/material/dialog'; import {AddMemberFormComponent} from './add-member-form/add-member-form.component'; import {AppState} from "../../../store/model/app-state-model"; -import {select, Store} from "@ngrx/store"; +import {Store} from "@ngrx/store"; import {getAllMembers} from "../../../store/selectors/members.selectors"; import {loadMembers, removeMember} from "../../../store/actions/members.actions"; import {Router} from "@angular/router"; -import {Observable} from "rxjs"; +import {Subject, takeUntil} from "rxjs"; @Component({ @@ -20,12 +20,13 @@ import {Observable} from "rxjs"; styleUrls: ['./member-table.component.scss'], }) -export class MemberTableComponent implements OnInit { +export class MemberTableComponent implements OnInit, OnDestroy { title = 'Member-Table'; dataSource!: MatTableDataSource; @ViewChild(MatPaginator) paginator!: MatPaginator; @ViewChild(MatSort) sort!: MatSort; - members$: Member[] = []; + members: Member[] = []; + onDestroy$ = new Subject(); displayedColumns: string[] = [ 'id', @@ -39,18 +40,21 @@ export class MemberTableComponent implements OnInit { } ngOnInit(): void { - - this.store.select(getAllMembers).subscribe( + this.store.dispatch(loadMembers()); + this.store.select(getAllMembers).pipe(takeUntil(this.onDestroy$)).subscribe( (data: Member[]) => { - this.members$ = data; - if(this.members$) { - this.dataSource = new MatTableDataSource(this.members$) + this.members = data; + if(this.members) { + this.dataSource = new MatTableDataSource(this.members) this.dataSource.paginator = this.paginator; this.dataSource.sort = this.sort; }}); } - + ngOnDestroy(): void { + this.onDestroy$.next(); + this.onDestroy$.complete(); + } applyFilter(event: Event) { const filterValue = (event.target as HTMLInputElement).value; @@ -72,4 +76,6 @@ export class MemberTableComponent implements OnInit { width: '50%', }); } + + } diff --git a/src/app/navigation/header/header.component.html b/src/app/navigation/header/header.component.html index 01feb08..86aeb60 100644 --- a/src/app/navigation/header/header.component.html +++ b/src/app/navigation/header/header.component.html @@ -8,7 +8,7 @@
- + {{member.firstName}} {{member.lastName}} diff --git a/src/app/navigation/header/header.component.ts b/src/app/navigation/header/header.component.ts index 5fdb8ad..a5e7f1d 100644 --- a/src/app/navigation/header/header.component.ts +++ b/src/app/navigation/header/header.component.ts @@ -1,28 +1,29 @@ -import {Component, EventEmitter, OnInit, Output} from '@angular/core'; +import {Component, EventEmitter, OnDestroy, OnInit, Output} from '@angular/core'; import {Member} from "../../models/member"; import {loadMembers, updateCurrentMember} from "../../store/actions/members.actions"; import {Store} from "@ngrx/store"; import {getAllMembers} from "../../store/selectors/members.selectors"; +import {Subject, takeUntil} from "rxjs"; @Component({ selector: 'app-header', templateUrl: './header.component.html', styleUrls: ['./header.component.scss'] }) -export class HeaderComponent implements OnInit { +export class HeaderComponent implements OnInit, OnDestroy { - members$: Member[] = []; + members: Member[] = []; currentMember: Member = {}; + onDestroy$ = new Subject(); @Output() sidenavToggle = new EventEmitter; constructor(private store: Store) { } ngOnInit(): void { - this.store.dispatch(loadMembers()); - this.store.select(getAllMembers).subscribe( + this.store.select(getAllMembers).pipe(takeUntil(this.onDestroy$)).subscribe( (data: Member[]) => { - this.members$ = data; + this.members = data; }); } @@ -35,8 +36,9 @@ export class HeaderComponent implements OnInit { this.store.dispatch(updateCurrentMember({id})); } - // onChange(event: Event){ - // this.currentMember = (event.target as Object); - // console.log(this.currentMember) - // } + ngOnDestroy(): void { + this.onDestroy$.next(); + this.onDestroy$.complete(); + } + } diff --git a/src/app/services/member.service.ts b/src/app/services/member.service.ts index eea79ec..28eb7f3 100644 --- a/src/app/services/member.service.ts +++ b/src/app/services/member.service.ts @@ -13,7 +13,7 @@ export class MemberService { constructor(private http: HttpClient) { } public getMembers(): Observable { - return this.http.get(`${this.apiServerUrl}/members/all`); + return this.http.get(`${this.apiServerUrl}/members`); } public getMemberById(memberId: number): Observable { @@ -21,7 +21,7 @@ export class MemberService { } public addMember(member: Member): Observable { - return this.http.post(`${this.apiServerUrl}/member/add`, member); + return this.http.post(`${this.apiServerUrl}/member`, member); } public updateMember(member: Member, memberId: number | undefined): Observable { diff --git a/src/app/services/route.service.ts b/src/app/services/route.service.ts index f715bf9..359361b 100644 --- a/src/app/services/route.service.ts +++ b/src/app/services/route.service.ts @@ -13,7 +13,7 @@ export class RouteService { constructor(private http: HttpClient) {} public getRoutes(): Observable { - return this.http.get(`${this.apiServerUrl}/climbingRoutes/all`); + return this.http.get(`${this.apiServerUrl}/climbingRoutes`); } public getRouteById(routeId: number): Observable { @@ -24,7 +24,7 @@ export class RouteService { public addRoute(route: Route): Observable { return this.http.post( - `${this.apiServerUrl}/climbingRoute/add`, + `${this.apiServerUrl}/climbingRoute`, route ); } diff --git a/src/app/store/effects/members.effects.ts b/src/app/store/effects/members.effects.ts index 9187fcd..0623224 100644 --- a/src/app/store/effects/members.effects.ts +++ b/src/app/store/effects/members.effects.ts @@ -25,6 +25,7 @@ export class MembersEffects { ) ); + removeMember$ = createEffect(() => this.actions$.pipe( ofType(MembersActions.removeMember), diff --git a/src/app/store/selectors/members.selectors.ts b/src/app/store/selectors/members.selectors.ts index 82e0c91..a543db8 100644 --- a/src/app/store/selectors/members.selectors.ts +++ b/src/app/store/selectors/members.selectors.ts @@ -1,5 +1,6 @@ import { createFeatureSelector, createSelector } from '@ngrx/store'; import { MembersState } from '../reducers/members.reducer'; +import {getAllUserState} from "./routes.selectors"; @@ -8,16 +9,10 @@ export const getAllMemberState = createFeatureSelector('members'); export const getAllMembers = createSelector(getAllMemberState, (state: MembersState) => state.members); -export const getMemberById = (id: number) => createSelector(getAllMembers, (allMembers) => { - if (allMembers) { - return allMembers.find(member => { - return member.id === id; - }); - } else { - return {}; - }}); - -export const getCurrentMember = createSelector(getAllMemberState, (state) => state.currentMember -); + +export const getMember = createSelector(getAllMemberState, (state) => state.member); + + +export const getCurrentMember = createSelector(getAllMemberState, (state) => state.currentMember); -- GitLab From 1a7d76db746743b91ec25c61c636656342d682f7 Mon Sep 17 00:00:00 2001 From: Marcel Date: Thu, 24 Nov 2022 15:20:58 +0100 Subject: [PATCH 04/10] changed service calls (removed /all and /add) --- .../routes/route/add-route-form/add-route-form.component.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/routes/route/add-route-form/add-route-form.component.scss b/src/app/components/routes/route/add-route-form/add-route-form.component.scss index e058daf..62d88dd 100644 --- a/src/app/components/routes/route/add-route-form/add-route-form.component.scss +++ b/src/app/components/routes/route/add-route-form/add-route-form.component.scss @@ -25,7 +25,7 @@ form { font-size: 1.0rem; border: 2px solid darkgrey; background-color: white; - width: 30%; + width: 40%; margin: 30px auto; padding: 20px; display: flex; -- GitLab From 9357984c8bb21dec9f04e1003ea02f4f9aad030a Mon Sep 17 00:00:00 2001 From: Marcel Date: Fri, 25 Nov 2022 08:58:13 +0100 Subject: [PATCH 05/10] Add Member is working --- src/app/app.module.ts | 2 + .../add-member-form.component.ts | 6 +-- .../member-table/member-table.component.ts | 49 +++++++++++++------ 3 files changed, 39 insertions(+), 18 deletions(-) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 6062b08..1de3801 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -38,6 +38,7 @@ import {EffectsModule} from "@ngrx/effects"; import {RoutesEffects} from "./store/effects/routes.effects"; import {reducers} from "./store/rootReducer"; import {MembersEffects} from "./store/effects/members.effects"; +import {MatProgressSpinnerModule} from "@angular/material/progress-spinner"; @NgModule({ declarations: [ @@ -76,6 +77,7 @@ import {MembersEffects} from "./store/effects/members.effects"; MatSidenavModule, MatToolbarModule, FlexLayoutModule, + MatProgressSpinnerModule, StoreModule.forRoot( reducers ), /** * Folgendes würde man bei einem Reducer nehmen diff --git a/src/app/components/members/member-table/add-member-form/add-member-form.component.ts b/src/app/components/members/member-table/add-member-form/add-member-form.component.ts index ea2ce21..b416578 100644 --- a/src/app/components/members/member-table/add-member-form/add-member-form.component.ts +++ b/src/app/components/members/member-table/add-member-form/add-member-form.component.ts @@ -84,10 +84,10 @@ export class AddMemberFormComponent implements OnInit { postCode: this.addMemberForm.get('addressDto.postCode')?.value, }, }; + //TODO: loadMembers wird vermutlich zu früh aufgerufen. Frage? Wieso ist Member trotzdem schon im state this.store.dispatch(addMember({ member })); - //TODO: loadMembers wird vermutlich zu früh aufgerufen. Frage? Wieso ist Member trotzdem schon im state - this.store.dispatch(loadMembers()); - console.log(member) + // this.store.dispatch(loadMembers()); + console.log(member) } } diff --git a/src/app/components/members/member-table/member-table.component.ts b/src/app/components/members/member-table/member-table.component.ts index 089a047..4a01d64 100644 --- a/src/app/components/members/member-table/member-table.component.ts +++ b/src/app/components/members/member-table/member-table.component.ts @@ -1,4 +1,4 @@ -import {Component, OnDestroy, OnInit, ViewChild} from '@angular/core'; +import {AfterViewInit, Component, OnDestroy, OnInit, ViewChild} from '@angular/core'; import {MemberService} from '../../../services/member.service'; import {Member} from '../../../models/member'; import {MatPaginator} from '@angular/material/paginator'; @@ -11,7 +11,11 @@ import {Store} from "@ngrx/store"; import {getAllMembers} from "../../../store/selectors/members.selectors"; import {loadMembers, removeMember} from "../../../store/actions/members.actions"; import {Router} from "@angular/router"; -import {Subject, takeUntil} from "rxjs"; +import { Subject, takeUntil} from "rxjs"; +import {Actions, ofType} from "@ngrx/effects"; +import {MembersEffects} from "../../../store/effects/members.effects"; +import * as MemberActions from "../../../store/actions/members.actions"; + @Component({ @@ -20,12 +24,12 @@ import {Subject, takeUntil} from "rxjs"; styleUrls: ['./member-table.component.scss'], }) -export class MemberTableComponent implements OnInit, OnDestroy { +export class MemberTableComponent implements OnInit, OnDestroy, AfterViewInit { title = 'Member-Table'; - dataSource!: MatTableDataSource; @ViewChild(MatPaginator) paginator!: MatPaginator; @ViewChild(MatSort) sort!: MatSort; members: Member[] = []; + dataSource!: MatTableDataSource; onDestroy$ = new Subject(); displayedColumns: string[] = [ @@ -36,19 +40,35 @@ export class MemberTableComponent implements OnInit, OnDestroy { 'delete', ]; - constructor(private router: Router, private memberService: MemberService, private dialog: MatDialog, private store: Store) { + + constructor(private router: Router, private memberService: MemberService, private dialog: MatDialog, private store: Store, updates$: Actions) { + updates$.pipe( + ofType(MemberActions.addMemberSuccess), + takeUntil(this.onDestroy$) + ) + .subscribe(() => { + this.store.dispatch(loadMembers()); + this.store.select(getAllMembers).pipe(takeUntil(this.onDestroy$)).subscribe( + (data) => { + this.members = data; + this.dataSource = new MatTableDataSource(this.members); + }); + }); } ngOnInit(): void { - this.store.dispatch(loadMembers()); - this.store.select(getAllMembers).pipe(takeUntil(this.onDestroy$)).subscribe( - (data: Member[]) => { - this.members = data; - if(this.members) { - this.dataSource = new MatTableDataSource(this.members) - this.dataSource.paginator = this.paginator; - this.dataSource.sort = this.sort; - }}); + + this.store.dispatch(loadMembers()); + this.store.select(getAllMembers).pipe(takeUntil(this.onDestroy$)).subscribe( + (data) => { + this.members = data; + this.dataSource = new MatTableDataSource(this.members); + }); + } + + ngAfterViewInit(): void { + this.dataSource.paginator = this.paginator; + this.dataSource.sort = this.sort; } ngOnDestroy(): void { @@ -77,5 +97,4 @@ export class MemberTableComponent implements OnInit, OnDestroy { }); } - } -- GitLab From e0df37584f33113d29cc0e54ecc1f260e592c7d8 Mon Sep 17 00:00:00 2001 From: Marcel Date: Fri, 25 Nov 2022 09:59:42 +0100 Subject: [PATCH 06/10] Add Member is working --- .../member-table/add-member-form/add-member-form.component.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/app/components/members/member-table/add-member-form/add-member-form.component.ts b/src/app/components/members/member-table/add-member-form/add-member-form.component.ts index b416578..b738fc7 100644 --- a/src/app/components/members/member-table/add-member-form/add-member-form.component.ts +++ b/src/app/components/members/member-table/add-member-form/add-member-form.component.ts @@ -86,7 +86,6 @@ export class AddMemberFormComponent implements OnInit { }; //TODO: loadMembers wird vermutlich zu früh aufgerufen. Frage? Wieso ist Member trotzdem schon im state this.store.dispatch(addMember({ member })); - // this.store.dispatch(loadMembers()); console.log(member) } } -- GitLab From 1a3872a9d55496571910d5677443a38edbe46574 Mon Sep 17 00:00:00 2001 From: BastianStruggl Date: Fri, 25 Nov 2022 13:27:13 +0100 Subject: [PATCH 07/10] Climbing-hall - problem with null --- .../routes/route/route.component.ts | 53 +++++-------------- .../components/routes/routes.component.html | 2 +- src/app/components/routes/routes.component.ts | 19 +++---- src/app/models/favouriteRoutes.ts | 5 -- src/app/models/member.ts | 4 +- 5 files changed, 22 insertions(+), 61 deletions(-) delete mode 100644 src/app/models/favouriteRoutes.ts diff --git a/src/app/components/routes/route/route.component.ts b/src/app/components/routes/route/route.component.ts index fb244f1..f39de28 100644 --- a/src/app/components/routes/route/route.component.ts +++ b/src/app/components/routes/route/route.component.ts @@ -5,14 +5,10 @@ import { RouteService } from '../../../services/route.service'; import { Store } from '@ngrx/store'; import { AppState } from '../../../store/model/app-state-model'; import { removeRoute } from '../../../store/actions/routes.actions'; -import { - getCurrentMember, -} from '../../../store/selectors/members.selectors'; import { updateMember, } from '../../../store/actions/members.actions'; import { Member } from '../../../models/member'; -import { FavouriteRoute } from '../../../models/favouriteRoutes'; @Component({ selector: 'app-route', @@ -20,10 +16,9 @@ import { FavouriteRoute } from '../../../models/favouriteRoutes'; styleUrls: ['./route.component.scss'], }) export class RouteComponent implements OnInit { - @Input() route?: Route; + @Input() route: Route | null = null; + @Input() currentMember: Member | undefined = undefined; containsFavorite: boolean = false; - favoriteRoutes: FavouriteRoute[] | undefined = undefined; - currentMember: Member | undefined = {}; constructor( private router: Router, @@ -32,56 +27,32 @@ export class RouteComponent implements OnInit { ) {} ngOnInit(): void { - this.store.select(getCurrentMember).subscribe((member) => { - this.currentMember = member; - }); this.containsFavorite = !!this.currentMember?.favouriteRoutes?.filter( (fav) => fav.id === this.route?.id ).length; - this.favoriteRoutes = this.currentMember?.favouriteRoutes; } deleteRoute(route: Route): void { const id: number = route.id !== undefined ? route.id : 0; this.store.dispatch(removeRoute({ id })); - - // redirect to "dummy" and then back to this component to achieve a "refresh" without site reload this.router .navigateByUrl('/members', { skipLocationChange: true }) .then(() => this.router.navigate(['/routes'])); } toggleFavoriteRoute() { - const newFavoriteRoute: FavouriteRoute = { - id: this.route?.id, - name: this.route?.name !== undefined ? this.route?.name : '', - difficultyLevelEnum: - this.route?.difficultyLevelEnum !== undefined - ? this.route?.difficultyLevelEnum - : '', - }; - - console.log(newFavoriteRoute); - - if (!this.containsFavorite) { - this.favoriteRoutes = Object.assign([], this.favoriteRoutes); - this.favoriteRoutes?.push(newFavoriteRoute); - } else { - this.favoriteRoutes = this.favoriteRoutes?.filter(function (element) { - return element.id !== newFavoriteRoute.id; - }); - console.log('removed favorite route'); + if (!this.containsFavorite && this.route !== null) { + this.currentMember?.favouriteRoutes?.push(this.route); + } else { + this.currentMember?.favouriteRoutes?.filter((element) => { + return element.id !== this.route?.id; + }); } - const member: Member = { - id: this.currentMember?.id, - firstName: this.currentMember?.firstName, - lastName: this.currentMember?.lastName, - addressDto: this.currentMember?.addressDto, - favouriteRoutes: this.favoriteRoutes, - }; - - this.store.dispatch(updateMember({ member })); + let member = this.currentMember; + if (member !== undefined) { + this.store.dispatch(updateMember({ member })); + } this.router .navigateByUrl('/members', { skipLocationChange: true }) .then(() => this.router.navigate(['/routes'])); diff --git a/src/app/components/routes/routes.component.html b/src/app/components/routes/routes.component.html index 19cf5e0..9463137 100644 --- a/src/app/components/routes/routes.component.html +++ b/src/app/components/routes/routes.component.html @@ -3,7 +3,7 @@ - + diff --git a/src/app/components/routes/routes.component.ts b/src/app/components/routes/routes.component.ts index 6bc4486..7289c2e 100644 --- a/src/app/components/routes/routes.component.ts +++ b/src/app/components/routes/routes.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import {Component, Input, OnInit} from '@angular/core'; import { RouteService } from '../../services/route.service'; import { Route } from '../../models/route'; import {select, Store} from "@ngrx/store"; @@ -6,6 +6,8 @@ import {Observable} from "rxjs"; import {AppState} from "../../store/model/app-state-model"; import {loadRoutes} from "../../store/actions/routes.actions"; import {getAllRoutes} from "../../store/selectors/routes.selectors"; +import {getCurrentMember} from "../../store/selectors/members.selectors"; +import {Member} from "../../models/member"; @Component({ selector: 'app-routes', @@ -13,20 +15,13 @@ import {getAllRoutes} from "../../store/selectors/routes.selectors"; styleUrls: ['./routes.component.scss'], }) export class RoutesComponent implements OnInit { - routes$?: Observable; + routes$: Observable = this.store.select(getAllRoutes); + currentMember$: Observable = this.store.select(getCurrentMember); - constructor(private routeService: RouteService, private store: Store) { - this.store.dispatch(loadRoutes()); - } + constructor(private routeService: RouteService, private store: Store) {} - // async interactions in ngOnInit ngOnInit(): void { - this.routes$ = this.store.select(getAllRoutes); - - } - - addRouteToFavorites(route: Route): void { - + this.store.dispatch(loadRoutes()); } } diff --git a/src/app/models/favouriteRoutes.ts b/src/app/models/favouriteRoutes.ts deleted file mode 100644 index 9d502c3..0000000 --- a/src/app/models/favouriteRoutes.ts +++ /dev/null @@ -1,5 +0,0 @@ -export interface FavouriteRoute { - id?: number; - name: string; - difficultyLevelEnum: string; -} diff --git a/src/app/models/member.ts b/src/app/models/member.ts index ab224bd..1e96dfe 100644 --- a/src/app/models/member.ts +++ b/src/app/models/member.ts @@ -1,10 +1,10 @@ import { Address } from './address'; -import { FavouriteRoute } from './favouriteRoutes'; +import {Route} from "./route"; export interface Member { id?: number; firstName?: string; lastName?: string; addressDto?: Address; - favouriteRoutes?: FavouriteRoute[]; + favouriteRoutes?: Route[]; } -- GitLab From 136419a199af1be7461c49eeb86efbcb5073d4b4 Mon Sep 17 00:00:00 2001 From: BastianStruggl Date: Fri, 25 Nov 2022 14:45:59 +0100 Subject: [PATCH 08/10] Climbing-hall - problem with null - first progression --- .../routes/route/route.component.ts | 15 ++++++++++----- .../components/routes/routes.component.html | 2 +- src/app/components/routes/routes.component.ts | 19 ++++++++++++++----- 3 files changed, 25 insertions(+), 11 deletions(-) diff --git a/src/app/components/routes/route/route.component.ts b/src/app/components/routes/route/route.component.ts index f39de28..a1383be 100644 --- a/src/app/components/routes/route/route.component.ts +++ b/src/app/components/routes/route/route.component.ts @@ -16,20 +16,24 @@ import { Member } from '../../../models/member'; styleUrls: ['./route.component.scss'], }) export class RouteComponent implements OnInit { - @Input() route: Route | null = null; - @Input() currentMember: Member | undefined = undefined; + @Input() route: Route | undefined; + @Input() currentMember: Member | undefined; containsFavorite: boolean = false; constructor( private router: Router, private routeService: RouteService, private store: Store - ) {} + ) { + } ngOnInit(): void { this.containsFavorite = !!this.currentMember?.favouriteRoutes?.filter( (fav) => fav.id === this.route?.id ).length; + + console.log("Curren Member") + console.log(this.currentMember); } deleteRoute(route: Route): void { @@ -41,7 +45,8 @@ export class RouteComponent implements OnInit { } toggleFavoriteRoute() { - if (!this.containsFavorite && this.route !== null) { + if (!this.containsFavorite && this.route !== undefined) { + this.currentMember = Object.assign([], this.currentMember); this.currentMember?.favouriteRoutes?.push(this.route); } else { this.currentMember?.favouriteRoutes?.filter((element) => { @@ -50,7 +55,7 @@ export class RouteComponent implements OnInit { } let member = this.currentMember; - if (member !== undefined) { + if (member) { this.store.dispatch(updateMember({ member })); } this.router diff --git a/src/app/components/routes/routes.component.html b/src/app/components/routes/routes.component.html index 9463137..1d47482 100644 --- a/src/app/components/routes/routes.component.html +++ b/src/app/components/routes/routes.component.html @@ -3,7 +3,7 @@ - + diff --git a/src/app/components/routes/routes.component.ts b/src/app/components/routes/routes.component.ts index 7289c2e..f71d571 100644 --- a/src/app/components/routes/routes.component.ts +++ b/src/app/components/routes/routes.component.ts @@ -1,8 +1,8 @@ -import {Component, Input, OnInit} from '@angular/core'; +import {Component, Input, OnDestroy, OnInit} from '@angular/core'; import { RouteService } from '../../services/route.service'; import { Route } from '../../models/route'; import {select, Store} from "@ngrx/store"; -import {Observable} from "rxjs"; +import {Observable, Subject, takeUntil} from "rxjs"; import {AppState} from "../../store/model/app-state-model"; import {loadRoutes} from "../../store/actions/routes.actions"; import {getAllRoutes} from "../../store/selectors/routes.selectors"; @@ -14,14 +14,23 @@ import {Member} from "../../models/member"; templateUrl: './routes.component.html', styleUrls: ['./routes.component.scss'], }) -export class RoutesComponent implements OnInit { +export class RoutesComponent implements OnInit, OnDestroy { routes$: Observable = this.store.select(getAllRoutes); - currentMember$: Observable = this.store.select(getCurrentMember); + currentMember: Member | undefined; + onDestroy$ = new Subject(); - constructor(private routeService: RouteService, private store: Store) {} + constructor(private routeService: RouteService, private store: Store) { + this.store.select(getCurrentMember).pipe(takeUntil(this.onDestroy$)).subscribe(data => this.currentMember = data); + console.log(this.currentMember); + } ngOnInit(): void { this.store.dispatch(loadRoutes()); } + + ngOnDestroy(): void { + this.onDestroy$.next(); + this.onDestroy$.complete(); + } } -- GitLab From 7aac30b0d31ba8f1bb9842c629fe17a346657b76 Mon Sep 17 00:00:00 2001 From: BastianStruggl Date: Tue, 29 Nov 2022 22:35:41 +0100 Subject: [PATCH 09/10] Climbing-hall - new application state --- .../add-route-form.component.ts | 12 +++-- .../route-detail-page.component.ts | 25 +++++----- .../routes/route/route.component.ts | 36 ++++++-------- .../components/routes/routes.component.html | 2 +- src/app/components/routes/routes.component.ts | 49 ++++++++++++++----- 5 files changed, 74 insertions(+), 50 deletions(-) diff --git a/src/app/components/routes/route/add-route-form/add-route-form.component.ts b/src/app/components/routes/route/add-route-form/add-route-form.component.ts index a8dcde8..8602d92 100644 --- a/src/app/components/routes/route/add-route-form/add-route-form.component.ts +++ b/src/app/components/routes/route/add-route-form/add-route-form.component.ts @@ -3,9 +3,9 @@ import { FormControl, FormGroup, Validators } from '@angular/forms'; import { Router } from '@angular/router'; import { RouteService } from '../../../../services/route.service'; import { Route } from '../../../../models/route'; -import {Store} from "@ngrx/store"; -import {AppState} from "../../../../store/model/app-state-model"; -import {addRoute} from "../../../../store/actions/routes.actions"; +import { Store } from '@ngrx/store'; +import { AppState } from '../../../../store/model/app-state-model'; +import { addRoute } from '../../../../store/actions/routes.actions'; @Component({ selector: 'app-add-route-form', @@ -24,7 +24,11 @@ export class AddRouteFormComponent implements OnInit { difficultyLevel: new FormControl('', [Validators.required], []), }); - constructor(private router: Router, private routeService: RouteService, private store: Store) { + constructor( + private router: Router, + private routeService: RouteService, + private store: Store + ) { this.addRouteForm.valueChanges.subscribe(); } diff --git a/src/app/components/routes/route/route-detail-page/route-detail-page.component.ts b/src/app/components/routes/route/route-detail-page/route-detail-page.component.ts index b42dd21..471c88f 100644 --- a/src/app/components/routes/route/route-detail-page/route-detail-page.component.ts +++ b/src/app/components/routes/route/route-detail-page/route-detail-page.component.ts @@ -2,11 +2,15 @@ import { Component, Input, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { Route } from '../../../../models/route'; import { RouteService } from '../../../../services/route.service'; -import {changeLoadingProcess, loadRoute, removeRoute} from "../../../../store/actions/routes.actions"; -import {select, Store} from "@ngrx/store"; -import {AppState} from "../../../../store/model/app-state-model"; -import { getRoute} from "../../../../store/selectors/routes.selectors"; -import {Observable} from "rxjs"; +import { + changeLoadingProcess, + loadRoute, + removeRoute, +} from '../../../../store/actions/routes.actions'; +import { select, Store } from '@ngrx/store'; +import { AppState } from '../../../../store/model/app-state-model'; +import { getRoute } from '../../../../store/selectors/routes.selectors'; +import { Observable } from 'rxjs'; // import {getAllRoutes, getRoute} from "../../../../store/selectors/routes.selectors"; @Component({ @@ -31,12 +35,11 @@ export class RouteDetailPageComponent implements OnInit { getRoute(id: number, isLoading: boolean) { // saves Route per id in store (logic happens in reducer) - this.store.dispatch(loadRoute( { id })); + this.store.dispatch(loadRoute({ id })); // get current Route from store - this.store.select(getRoute) - .subscribe((route) => { - this.route = route; - }); - this.store.dispatch(changeLoadingProcess( { isLoading } )); + this.store.select(getRoute).subscribe((route) => { + this.route = route; + }); + this.store.dispatch(changeLoadingProcess({ isLoading })); } } diff --git a/src/app/components/routes/route/route.component.ts b/src/app/components/routes/route/route.component.ts index a1383be..9d21d03 100644 --- a/src/app/components/routes/route/route.component.ts +++ b/src/app/components/routes/route/route.component.ts @@ -1,14 +1,13 @@ -import { Component, Input, OnInit } from '@angular/core'; +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import { Router } from '@angular/router'; import { Route } from '../../../models/route'; import { RouteService } from '../../../services/route.service'; import { Store } from '@ngrx/store'; import { AppState } from '../../../store/model/app-state-model'; import { removeRoute } from '../../../store/actions/routes.actions'; -import { - updateMember, -} from '../../../store/actions/members.actions'; +import { updateMember } from '../../../store/actions/members.actions'; import { Member } from '../../../models/member'; +import { Subject } from 'rxjs'; @Component({ selector: 'app-route', @@ -18,48 +17,41 @@ import { Member } from '../../../models/member'; export class RouteComponent implements OnInit { @Input() route: Route | undefined; @Input() currentMember: Member | undefined; + @Output() refreshParentRoutes = new EventEmitter(); containsFavorite: boolean = false; + onDestroy$ = new Subject(); constructor( private router: Router, private routeService: RouteService, private store: Store - ) { - } + ) {} ngOnInit(): void { + // checks if current component is a favorite route and saves it as a boolean this.containsFavorite = !!this.currentMember?.favouriteRoutes?.filter( (fav) => fav.id === this.route?.id ).length; - - console.log("Curren Member") - console.log(this.currentMember); } deleteRoute(route: Route): void { const id: number = route.id !== undefined ? route.id : 0; this.store.dispatch(removeRoute({ id })); - this.router - .navigateByUrl('/members', { skipLocationChange: true }) - .then(() => this.router.navigate(['/routes'])); } toggleFavoriteRoute() { - if (!this.containsFavorite && this.route !== undefined) { - this.currentMember = Object.assign([], this.currentMember); - this.currentMember?.favouriteRoutes?.push(this.route); - } else { - this.currentMember?.favouriteRoutes?.filter((element) => { - return element.id !== this.route?.id; - }); + if (!this.containsFavorite && this.route !== undefined) { + this.currentMember?.favouriteRoutes?.push(this.route); + } else { + this.currentMember?.favouriteRoutes?.filter((element) => { + return element.id !== this.route?.id; + }); } let member = this.currentMember; if (member) { this.store.dispatch(updateMember({ member })); } - this.router - .navigateByUrl('/members', { skipLocationChange: true }) - .then(() => this.router.navigate(['/routes'])); + this.refreshParentRoutes.next(); } } diff --git a/src/app/components/routes/routes.component.html b/src/app/components/routes/routes.component.html index 1d47482..a9fa8aa 100644 --- a/src/app/components/routes/routes.component.html +++ b/src/app/components/routes/routes.component.html @@ -3,7 +3,7 @@ - + > diff --git a/src/app/components/routes/routes.component.ts b/src/app/components/routes/routes.component.ts index f71d571..2ddeba3 100644 --- a/src/app/components/routes/routes.component.ts +++ b/src/app/components/routes/routes.component.ts @@ -1,13 +1,20 @@ -import {Component, Input, OnDestroy, OnInit} from '@angular/core'; +import { Component, Input, OnDestroy, OnInit } from '@angular/core'; import { RouteService } from '../../services/route.service'; import { Route } from '../../models/route'; -import {select, Store} from "@ngrx/store"; -import {Observable, Subject, takeUntil} from "rxjs"; -import {AppState} from "../../store/model/app-state-model"; -import {loadRoutes} from "../../store/actions/routes.actions"; -import {getAllRoutes} from "../../store/selectors/routes.selectors"; -import {getCurrentMember} from "../../store/selectors/members.selectors"; -import {Member} from "../../models/member"; +import { Store } from '@ngrx/store'; +import { Observable, Subject, takeUntil } from 'rxjs'; +import { AppState } from '../../store/model/app-state-model'; +import { loadRoutes } from '../../store/actions/routes.actions'; +import { getAllRoutes } from '../../store/selectors/routes.selectors'; +import { + getAllMembers, + getCurrentMember, +} from '../../store/selectors/members.selectors'; +import { Member } from '../../models/member'; +import { Actions, ofType } from '@ngrx/effects'; +import * as RouteActions from '../../store/actions/routes.actions'; +import { loadMembers } from '../../store/actions/members.actions'; +import { MatTableDataSource } from '@angular/material/table'; @Component({ selector: 'app-routes', @@ -19,9 +26,24 @@ export class RoutesComponent implements OnInit, OnDestroy { currentMember: Member | undefined; onDestroy$ = new Subject(); - constructor(private routeService: RouteService, private store: Store) { - this.store.select(getCurrentMember).pipe(takeUntil(this.onDestroy$)).subscribe(data => this.currentMember = data); - console.log(this.currentMember); + constructor( + private routeService: RouteService, + private store: Store, + delete$: Actions + ) { + // JSON.parse creates a copy of the original object - that avoids errors later + this.store + .select(getCurrentMember) + .pipe(takeUntil(this.onDestroy$)) + .subscribe( + (data) => (this.currentMember = JSON.parse(JSON.stringify(data))) + ); + + delete$ + .pipe(ofType(RouteActions.removeRouteSuccess), takeUntil(this.onDestroy$)) + .subscribe(() => { + this.store.dispatch(loadRoutes()); + }); } ngOnInit(): void { @@ -32,5 +54,8 @@ export class RoutesComponent implements OnInit, OnDestroy { this.onDestroy$.next(); this.onDestroy$.complete(); } -} + refreshRoutesComponent() { + this.ngOnInit(); + } +} -- GitLab From 4740011c4d1232977eb069feea153fe54fe065cb Mon Sep 17 00:00:00 2001 From: Marcel Date: Tue, 6 Dec 2022 08:14:01 +0100 Subject: [PATCH 10/10] some changes --- .../add-member-form.component.ts | 2 +- .../member-table/member-table.component.ts | 1 - .../routes/route/route.component.ts | 11 ++++-- src/app/navigation/header/header.component.ts | 2 - src/app/store/reducers/members.reducer.ts | 38 +++++-------------- src/app/store/selectors/members.selectors.ts | 3 +- 6 files changed, 20 insertions(+), 37 deletions(-) diff --git a/src/app/components/members/member-table/add-member-form/add-member-form.component.ts b/src/app/components/members/member-table/add-member-form/add-member-form.component.ts index b738fc7..d2f1a75 100644 --- a/src/app/components/members/member-table/add-member-form/add-member-form.component.ts +++ b/src/app/components/members/member-table/add-member-form/add-member-form.component.ts @@ -84,7 +84,7 @@ export class AddMemberFormComponent implements OnInit { postCode: this.addMemberForm.get('addressDto.postCode')?.value, }, }; - //TODO: loadMembers wird vermutlich zu früh aufgerufen. Frage? Wieso ist Member trotzdem schon im state + this.store.dispatch(addMember({ member })); console.log(member) } diff --git a/src/app/components/members/member-table/member-table.component.ts b/src/app/components/members/member-table/member-table.component.ts index 4a01d64..8b9d4d9 100644 --- a/src/app/components/members/member-table/member-table.component.ts +++ b/src/app/components/members/member-table/member-table.component.ts @@ -13,7 +13,6 @@ import {loadMembers, removeMember} from "../../../store/actions/members.actions" import {Router} from "@angular/router"; import { Subject, takeUntil} from "rxjs"; import {Actions, ofType} from "@ngrx/effects"; -import {MembersEffects} from "../../../store/effects/members.effects"; import * as MemberActions from "../../../store/actions/members.actions"; diff --git a/src/app/components/routes/route/route.component.ts b/src/app/components/routes/route/route.component.ts index 9d21d03..f6ccc84 100644 --- a/src/app/components/routes/route/route.component.ts +++ b/src/app/components/routes/route/route.component.ts @@ -1,13 +1,15 @@ -import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; import { Router } from '@angular/router'; import { Route } from '../../../models/route'; import { RouteService } from '../../../services/route.service'; import { Store } from '@ngrx/store'; import { AppState } from '../../../store/model/app-state-model'; import { removeRoute } from '../../../store/actions/routes.actions'; -import { updateMember } from '../../../store/actions/members.actions'; +import { + updateMember, +} from '../../../store/actions/members.actions'; import { Member } from '../../../models/member'; -import { Subject } from 'rxjs'; +import {Subject} from "rxjs"; @Component({ selector: 'app-route', @@ -37,6 +39,9 @@ export class RouteComponent implements OnInit { deleteRoute(route: Route): void { const id: number = route.id !== undefined ? route.id : 0; this.store.dispatch(removeRoute({ id })); + this.router + .navigateByUrl('/members', { skipLocationChange: true }) + .then(() => this.router.navigate(['/routes'])); } toggleFavoriteRoute() { diff --git a/src/app/navigation/header/header.component.ts b/src/app/navigation/header/header.component.ts index a5e7f1d..fc52f34 100644 --- a/src/app/navigation/header/header.component.ts +++ b/src/app/navigation/header/header.component.ts @@ -13,7 +13,6 @@ import {Subject, takeUntil} from "rxjs"; export class HeaderComponent implements OnInit, OnDestroy { members: Member[] = []; - currentMember: Member = {}; onDestroy$ = new Subject(); @Output() sidenavToggle = new EventEmitter; @@ -32,7 +31,6 @@ export class HeaderComponent implements OnInit, OnDestroy { } onSelectEvent(id: number){ - console.log(id); this.store.dispatch(updateCurrentMember({id})); } diff --git a/src/app/store/reducers/members.reducer.ts b/src/app/store/reducers/members.reducer.ts index bcdc012..e51e764 100644 --- a/src/app/store/reducers/members.reducer.ts +++ b/src/app/store/reducers/members.reducer.ts @@ -1,7 +1,7 @@ import {Member} from "../../models/member"; -import {Action, createAction, createReducer, on} from "@ngrx/store"; +import {Action, createReducer, on} from "@ngrx/store"; import * as MemberActions from '../actions/members.actions' -import {state} from "@angular/animations"; + @@ -18,28 +18,7 @@ const initialState: Readonly = { member: undefined, error: '', loading: false, - currentMember: { - // "id": 6, - // "firstName": "Anna", - // "lastName": "Auerbach", - // "addressDto": { - // "street": "Heegstraße", - // "houseNumber": 78, - // "postCode": "99345" - // }, - // "favouriteRoutes": [ - // { - // "id": 11, - // "name": "Fingerzerstörer", - // "difficultyLevelEnum": "HELL" - // }, - // { - // "id": 12, - // "name": "Endlos", - // "difficultyLevelEnum": "EASY" - // } - // ] - }, + currentMember: {}, }; export const membersReducer = createReducer( @@ -90,13 +69,17 @@ export const membersReducer = createReducer( return { ...state, members: [...state.members, member], - loading:true}}), + loading: true + }} + ), on(MemberActions.addMemberSuccess, (state, { member }): MembersState => { return { ...state, members: [...state.members, member], - loading:false}}), + loading: false + } + }), //Remove Member TODO: Success and Failure @@ -138,7 +121,6 @@ export const membersReducer = createReducer( }), on(MemberActions.updateCurrentMember, (state, { id } ): MembersState => { - console.log(id); return { ...state, currentMember: state.members.find(member => member.id === id), @@ -148,7 +130,7 @@ export const membersReducer = createReducer( }), ); -export function reducer(state: MembersState | undefined, action: Action) { +export function reducer(state: MembersState , action: Action) { return membersReducer(state, action); } diff --git a/src/app/store/selectors/members.selectors.ts b/src/app/store/selectors/members.selectors.ts index a543db8..c52aeca 100644 --- a/src/app/store/selectors/members.selectors.ts +++ b/src/app/store/selectors/members.selectors.ts @@ -1,11 +1,10 @@ import { createFeatureSelector, createSelector } from '@ngrx/store'; import { MembersState } from '../reducers/members.reducer'; -import {getAllUserState} from "./routes.selectors"; + export const getAllMemberState = createFeatureSelector('members'); -// export const getMemberEditingState = createFeatureSelector('members'); export const getAllMembers = createSelector(getAllMemberState, (state: MembersState) => state.members); -- GitLab