From 7a9baede19789b5005b1b445335f752547c01b35 Mon Sep 17 00:00:00 2001 From: geek Date: Mon, 30 Apr 2018 20:50:47 +0900 Subject: [PATCH] modify ing --- .../component/profile/profile.component.html | 10 ++-- .../component/profile/profile.component.ts | 23 +++++++-- src/packages/member/service/member.service.ts | 6 +++ src/packages/member/store/index.ts | 7 ++- src/packages/member/store/modify/index.ts | 5 ++ .../member/store/modify/modify.action.ts | 35 +++++++++++++ .../member/store/modify/modify.effect.spec.ts | 15 ++++++ .../member/store/modify/modify.effect.ts | 50 +++++++++++++++++++ .../member/store/modify/modify.reducer.ts | 43 ++++++++++++++++ .../member/store/modify/modify.state.ts | 15 ++++++ 10 files changed, 199 insertions(+), 10 deletions(-) create mode 100644 src/packages/member/store/modify/index.ts create mode 100644 src/packages/member/store/modify/modify.action.ts create mode 100644 src/packages/member/store/modify/modify.effect.spec.ts create mode 100644 src/packages/member/store/modify/modify.effect.ts create mode 100644 src/packages/member/store/modify/modify.reducer.ts create mode 100644 src/packages/member/store/modify/modify.state.ts diff --git a/src/packages/member/component/profile/profile.component.html b/src/packages/member/component/profile/profile.component.html index 88dd32e..4613f90 100644 --- a/src/packages/member/component/profile/profile.component.html +++ b/src/packages/member/component/profile/profile.component.html @@ -13,25 +13,25 @@
- +
- +
- +
- +
@@ -44,4 +44,4 @@
- \ No newline at end of file + diff --git a/src/packages/member/component/profile/profile.component.ts b/src/packages/member/component/profile/profile.component.ts index e84cc1e..be79754 100644 --- a/src/packages/member/component/profile/profile.component.ts +++ b/src/packages/member/component/profile/profile.component.ts @@ -3,10 +3,12 @@ import {ActivatedRoute, Router} from '@angular/router'; import { PagesComponent } from 'app/pages/pages.component'; import * as AuthStore from '../../store/auth'; +import * as ModifyStore from '../../store/modify'; + import { Member } from '../../model'; import { AuthSelector } from '../../store'; import { Store } from '@ngrx/store'; -import {FormBuilder, FormGroup} from '@angular/forms'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ @@ -43,12 +45,27 @@ export class ProfileComponent implements OnInit { initForm() { this.modifyForm = this.formBuilder.group({ - + 'email': [ this.member.email, + [ + Validators.required, + Validators.email + ]], + 'name': [ this.member.name, []], + 'companyName': [this.member.companyName, []], + 'phone': [this.member.phone, []], }); } modifyProfile() { - console.log('clicked'); + const modifyValue = Object.assign({}, this.modifyForm.value); + const member: Member = { + email: this.member.email, + name: modifyValue.name, + phone: modifyValue.phone, + companyName: modifyValue.companyName, + }; + this.store.dispatch(new ModifyStore.Modify({member})); + console.log(member); } } diff --git a/src/packages/member/service/member.service.ts b/src/packages/member/service/member.service.ts index 5778e97..9ec80ec 100644 --- a/src/packages/member/service/member.service.ts +++ b/src/packages/member/service/member.service.ts @@ -4,6 +4,7 @@ import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/map'; import { RESTService } from '@loafer/ng-rest/service'; +import { RPCService } from '@loafer/ng-rpc/service'; import { DomainMember } from 'packages/domain/model'; import { Member } from '../model'; @@ -13,6 +14,7 @@ export class MemberService { public constructor( private restService: RESTService, + private rpcService: RPCService, ) { } @@ -42,4 +44,8 @@ export class MemberService { }, }); } + + public modify(member: Member): Observable { + return this.rpcService.call('MemberService.modify', member, ''); + } } diff --git a/src/packages/member/store/index.ts b/src/packages/member/store/index.ts index abcb025..3da8ec6 100644 --- a/src/packages/member/store/index.ts +++ b/src/packages/member/store/index.ts @@ -12,17 +12,20 @@ import { MODULE } from '../member.constant'; import * as AuthStore from './auth'; import * as SignupStore from './signup'; import * as TotpStore from './totp'; +import * as ModifyStore from './modify'; export interface State { auth: AuthStore.State; - signup: SignupStore.Signup; + signup: SignupStore.State; totp: TotpStore.State; + modify: ModifyStore.State; } export const REDUCERS = { auth: AuthStore.reducer, signup: SignupStore.reducer, totp: TotpStore.reducer, + modify: ModifyStore.reducer, }; export const EFFECTS = [ @@ -38,7 +41,7 @@ export const AuthSelector = new StateSelector(createSelector( (state: State) => state.auth )); -export const SignupSelector = new StateSelector(createSelector( +export const SignupSelector = new StateSelector(createSelector( selectMemberState, (state: State) => state.signup )); diff --git a/src/packages/member/store/modify/index.ts b/src/packages/member/store/modify/index.ts new file mode 100644 index 0000000..c5c34eb --- /dev/null +++ b/src/packages/member/store/modify/index.ts @@ -0,0 +1,5 @@ +export * from './modify.action'; +export * from './modify.effect'; +export * from './modify.reducer'; +export * from './modify.state'; + diff --git a/src/packages/member/store/modify/modify.action.ts b/src/packages/member/store/modify/modify.action.ts new file mode 100644 index 0000000..64dcda3 --- /dev/null +++ b/src/packages/member/store/modify/modify.action.ts @@ -0,0 +1,35 @@ +import { Action } from '@ngrx/store'; + +import { RESTClientError } from '@loafer/ng-rest/protocol'; + +import { Member } from '../../model'; + +export enum ActionType { + Modify = '[member.modify] Modify', + ModifySuccess = '[member.modify] ModifySuccess', + ModifyFailure = '[member.modify] ModifyFailure', +} + +export class Modify implements Action { + readonly type = ActionType.Modify; + + constructor(public payload: {member: Member }) {} +} + +export class ModifySuccess implements Action { + readonly type = ActionType.ModifySuccess; + + constructor(public payload: Member) {} +} + +export class ModifyFailure implements Action { + readonly type = ActionType.ModifyFailure; + + constructor(public payload: RESTClientError) {} +} + +export type Actions = + | Modify + | ModifySuccess + | ModifyFailure +; diff --git a/src/packages/member/store/modify/modify.effect.spec.ts b/src/packages/member/store/modify/modify.effect.spec.ts new file mode 100644 index 0000000..213f4c8 --- /dev/null +++ b/src/packages/member/store/modify/modify.effect.spec.ts @@ -0,0 +1,15 @@ +import { TestBed, inject } from '@angular/core/testing'; + +import { Effects } from './modify.effect'; + +describe('Modify.Effects', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [Effects] + }); + }); + + it('should be created', inject([Effects], (effects: Effects) => { + expect(effects).toBeTruthy(); + })); +}); diff --git a/src/packages/member/store/modify/modify.effect.ts b/src/packages/member/store/modify/modify.effect.ts new file mode 100644 index 0000000..5666148 --- /dev/null +++ b/src/packages/member/store/modify/modify.effect.ts @@ -0,0 +1,50 @@ +import { Injectable } from '@angular/core'; +import { Router } from '@angular/router'; + +import { Effect, Actions } from '@ngrx/effects'; +import { Action } from '@ngrx/store'; + +import { Observable } from 'rxjs/Observable'; +import { of } from 'rxjs/observable/of'; + +import 'rxjs/add/operator/catch'; +import 'rxjs/add/operator/do'; +import 'rxjs/add/operator/exhaustMap'; +import 'rxjs/add/operator/map'; +import 'rxjs/add/operator/take'; + +import { MemberService } from '../../service/member.service'; + +import { + Modify, + ModifySuccess, + ModifyFailure, + ActionType +} from './modify.action'; + +@Injectable() +export class Effects { + + constructor( + private actions$: Actions, + private memberService: MemberService, + private router: Router + ) { } + + @Effect() + modify$: Observable = this.actions$ + .ofType(ActionType.Modify) + .map((action: Modify) => action.payload) + .exhaustMap(payload => + this.memberService + .modify(payload.member) + .map(_member => new ModifySuccess(_member)) + .catch(error => of(new ModifyFailure(error))) + ); + + // @Effect({ dispatch: false }) + // modifySuccess$ = this.actions$ + // .ofType(ActionType.ModifySuccess) + // .do(() => this.router.navigate(['/'])); + +} diff --git a/src/packages/member/store/modify/modify.reducer.ts b/src/packages/member/store/modify/modify.reducer.ts new file mode 100644 index 0000000..7e7fcfc --- /dev/null +++ b/src/packages/member/store/modify/modify.reducer.ts @@ -0,0 +1,43 @@ +import { + Actions, + ActionType, +} from './modify.action'; + +import { + State, + initialState, +} from './modify.state'; + +export function reducer(state = initialState, action: Actions): State { + switch (action.type) { + case ActionType.Modify: { + return { + ...state, + error: null, + pending: true, + }; + } + + case ActionType.ModifySuccess: { + return { + ...state, + error: null, + pending: false, + member: action.payload, + }; + } + + case ActionType.ModifyFailure: { + return { + ...state, + error: action.payload, + pending: false, + member: null, + }; + } + + default: { + return state; + } + } +} diff --git a/src/packages/member/store/modify/modify.state.ts b/src/packages/member/store/modify/modify.state.ts new file mode 100644 index 0000000..e98a140 --- /dev/null +++ b/src/packages/member/store/modify/modify.state.ts @@ -0,0 +1,15 @@ +import { RESTClientError } from '@loafer/ng-rest/protocol'; + +import { Member } from '../../model'; + +export interface State { + error: RESTClientError | null; + pending: boolean; + member: Member | null; +} + +export const initialState: State = { + error: null, + pending: false, + member: null, +};