diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 7fea6eb74eebf9eb4cadcb0a12c561ac5f52baa7..55c09166f692cd7827c1b411e40d76248c16e357 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -19,7 +19,7 @@ const routes: Routes = [ path: 'member/:id', component: MemberDetailsComponent }, { - path: 'addMember', component: AddMemberFormComponent + path: 'addMemberForm', component: AddMemberFormComponent }, { path: 'routes', diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 5d4e76d44df974bd36c4f45f9355885bbd00a935..1de3801e320654e07554370667efcf64d9ba3088 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -31,13 +31,14 @@ import { SidenavListComponent } from './navigation/sidenav-list/sidenav-list.com import {MatSidenavModule} from "@angular/material/sidenav"; import {MatToolbarModule} from "@angular/material/toolbar"; import {FlexLayoutModule} from "@angular/flex-layout"; -import {ActionReducerMap, StoreModule} from '@ngrx/store'; +import { StoreModule} from '@ngrx/store'; import {StoreDevtoolsModule} from "@ngrx/store-devtools"; import {environment} from "../environments/environment"; 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.html b/src/app/components/members/member-table/add-member-form/add-member-form.component.html index f20e25a708016ab2800e6e2f60a78a7da09790fa..4fdc64ce1898781ffa1d17bc91011623715af560 100644 --- a/src/app/components/members/member-table/add-member-form/add-member-form.component.html +++ b/src/app/components/members/member-table/add-member-form/add-member-form.component.html @@ -1,4 +1,5 @@ -

Add Member Form

+

Add Member

+
- - - - + + + + > + + + diff --git a/src/app/components/routes/routes.component.scss b/src/app/components/routes/routes.component.scss index b9113eec8b931d5b6c32ed25f70b771233935cbc..9fa554cade93101b80f7354216cdf3df5c07e172 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/components/routes/routes.component.ts b/src/app/components/routes/routes.component.ts index 6bc4486fb8b1df3ec88dea7ab715c9b11357a0ab..2ddeba35f12a6355e986897fd9e8310c80f94ad6 100644 --- a/src/app/components/routes/routes.component.ts +++ b/src/app/components/routes/routes.component.ts @@ -1,32 +1,61 @@ -import { Component, 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 {AppState} from "../../store/model/app-state-model"; -import {loadRoutes} from "../../store/actions/routes.actions"; -import {getAllRoutes} from "../../store/selectors/routes.selectors"; +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', templateUrl: './routes.component.html', styleUrls: ['./routes.component.scss'], }) -export class RoutesComponent implements OnInit { - routes$?: Observable; +export class RoutesComponent implements OnInit, OnDestroy { + routes$: Observable = this.store.select(getAllRoutes); + currentMember: Member | undefined; + onDestroy$ = new Subject(); - constructor(private routeService: RouteService, private store: Store) { - this.store.dispatch(loadRoutes()); + 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()); + }); } - // async interactions in ngOnInit ngOnInit(): void { - this.routes$ = this.store.select(getAllRoutes); - + this.store.dispatch(loadRoutes()); } - addRouteToFavorites(route: Route): void { + ngOnDestroy(): void { + this.onDestroy$.next(); + this.onDestroy$.complete(); + } + refreshRoutesComponent() { + this.ngOnInit(); } } - diff --git a/src/app/models/favouriteRoutes.ts b/src/app/models/favouriteRoutes.ts deleted file mode 100644 index 9d502c378384bf682b8de0d5bd3a7d0722a8fab8..0000000000000000000000000000000000000000 --- 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 ab224bda9dcda1a29deca23b83ae7038331adb68..1e96dfe868a2845a422956bcd449debdb15e6e88 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[]; } diff --git a/src/app/navigation/header/header.component.html b/src/app/navigation/header/header.component.html index d8876b877119914541127a983964a58fd6a7be32..86aeb60217f9998d76bbd3a691f1984889200899 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}} + + + + +
  • Members
    • diff --git a/src/app/navigation/header/header.component.scss b/src/app/navigation/header/header.component.scss index 015f32748fd3a3f4845800386a8b9bfe47ee58ac..8cdcb5aa0dbac583a5e2736bb1a00befb8702d73 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/navigation/header/header.component.ts b/src/app/navigation/header/header.component.ts index e7287c9e856e0c0159efbb832c4aeb171c46ce52..fc52f34463a95f628a25aa910056a5162b99ce66 100644 --- a/src/app/navigation/header/header.component.ts +++ b/src/app/navigation/header/header.component.ts @@ -1,20 +1,42 @@ -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[] = []; + onDestroy$ = new Subject(); @Output() sidenavToggle = new EventEmitter; - constructor() { } + constructor(private store: Store) { + } ngOnInit(): void { + this.store.select(getAllMembers).pipe(takeUntil(this.onDestroy$)).subscribe( + (data: Member[]) => { + this.members = data; + }); } onToggleSidenav() { this.sidenavToggle.emit(); } + + onSelectEvent(id: number){ + this.store.dispatch(updateCurrentMember({id})); + } + + 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 461253083ca7928b436401f754712b43aa765d0a..28eb7f30c9c23b8bc3f79e48f6ca46254104e621 100644 --- a/src/app/services/member.service.ts +++ b/src/app/services/member.service.ts @@ -13,8 +13,7 @@ export class MemberService { constructor(private http: HttpClient) { } public getMembers(): Observable { - console.log("Get all!!!!"); - return this.http.get(`${this.apiServerUrl}/members/all`); + return this.http.get(`${this.apiServerUrl}/members`); } public getMemberById(memberId: number): Observable { @@ -22,8 +21,7 @@ export class MemberService { } public addMember(member: Member): Observable { - console.log("Add member") - 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 f715bf980424987378ea372fa94e3b2ae5b10bf2..359361b0a1b9a94ea985c2dc5a49e412982253da 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/actions/members.actions.ts b/src/app/store/actions/members.actions.ts index 7f730aba3a0906af641327fb0e75f5f7ecd5a9be..851c3468339ff56ef9f36bdb1041492e097219f9 100644 --- a/src/app/store/actions/members.actions.ts +++ b/src/app/store/actions/members.actions.ts @@ -1,6 +1,5 @@ import { createAction, props } from '@ngrx/store'; import { Member } from '../../models/member'; -import {Route} from "../../models/route"; // Get all Members export const loadMembers = createAction( @@ -32,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 }>() @@ -49,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 }>() @@ -71,18 +68,24 @@ export const updateMember = createAction( ); export const updateMemberSuccess = createAction( - '[Routes] Update Member Success', + '[Member] Update Member Success', props<{ member: Member }>() ); export const updateMemberFail = createAction( - '[Routes] Update Member Fail', + '[Member] Update Member Fail', props<{ error: string }>() ); // load specific route export const getCurrentMember = createAction( - '[Routes] Load Current Member' + '[Member] Load Current Member' ); +export const updateCurrentMember = createAction( + '[Member] Update Current Member', + props<{ id: number }>() +); + + diff --git a/src/app/store/effects/members.effects.ts b/src/app/store/effects/members.effects.ts index 2ed4e473762b0c2e6328fa3fc7cdcdbbec1df10d..0623224a07409faa6224b244ba972e183d499af7 100644 --- a/src/app/store/effects/members.effects.ts +++ b/src/app/store/effects/members.effects.ts @@ -1,9 +1,10 @@ import { Injectable } from '@angular/core'; -import { Actions, createEffect, Effect, ofType } from '@ngrx/effects'; -import { of } from 'rxjs'; +import { Actions, createEffect, ofType } from '@ngrx/effects'; +import {of, switchMap, tap} from 'rxjs'; import { mergeMap, map, catchError } from 'rxjs/operators'; import * as MembersActions from '../actions/members.actions'; import { MemberService } from '../../services/member.service'; +import {Router} from "@angular/router"; @@ -24,16 +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( @@ -42,40 +33,21 @@ 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))) ) ) ); - -// addMember$ = createEffect(() => - // this.actions$.pipe( - // ofType(MembersActions.addMember), - // mergeMap((data) => - // this.memberService.addMember(data.member)), - // tap(() => this.router.navigate(['members'])), - // map((member: Member) => MembersActions.addMemberSuccess({member}), - // ))); - - // @Effect() addMember$ = createEffect(()=> - // this.actions$.pipe( - // ofType(addMember), - // tap((member) => console.log(member)), - // concatMap(({member}) => - // this.memberService.addMember(member).pipe( - // map((newMember) => addMemberSuccess(newMember)), - // catchError(() => EMPTY) - // ) - // ))); - updateMember$ = createEffect(() => this.actions$.pipe( ofType(MembersActions.updateMember), diff --git a/src/app/store/reducers/members.reducer.ts b/src/app/store/reducers/members.reducer.ts index de2d0242f712f28523692517d1fdb18f75a729c7..e51e7646f6de26480bcf33b2d54688fd98d9fa5d 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"; + @@ -10,7 +10,7 @@ export interface MembersState { member: Member | undefined; error: string; loading: boolean; - currentMember: Member; + currentMember: Member | undefined; } const initialState: Readonly = { @@ -18,45 +18,10 @@ 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 function memberReducer(state = initialState, action: MemberActions.AddMember){ -// switch (action.type) { -// case MemberActions.ADD_MEMBER: -// return { -// ...state, -// members: [...state.members, action.payload] -// }; -// default: -// return state; -// } -// } - - export const membersReducer = createReducer( - // get all routes initialState, on(MemberActions.loadMembers, (state): MembersState => { return { @@ -81,37 +46,44 @@ 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, members: [...state.members, member], - loading:true}}), + loading: true + }} + ), 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())), @@ -147,9 +119,18 @@ export const membersReducer = createReducer( // loading:true, } }), + + on(MemberActions.updateCurrentMember, (state, { id } ): MembersState => { + return { + ...state, + currentMember: state.members.find(member => member.id === id), + + // loading: false, + }; + }), ); -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 da3c36f6be0b318903131fd8df1107fcf57fd752..c52aeca65c6a47da5b6802ba6a07672140e68a45 100644 --- a/src/app/store/selectors/members.selectors.ts +++ b/src/app/store/selectors/members.selectors.ts @@ -3,31 +3,15 @@ import { MembersState } from '../reducers/members.reducer'; + export const getAllMemberState = createFeatureSelector('members'); -// export const getMemberEditingState = 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 getMemberById = (id: number) => createSelector(getAllMembers, (allMembers) => { -// if (allMembers) { -// return allMembers.find(member => { -// return member.id === id; -// }); -// } else { -// return {}; -// } -// }); + +export const getMember = createSelector(getAllMemberState, (state) => state.member); + + +export const getCurrentMember = createSelector(getAllMemberState, (state) => state.currentMember); + +