modify ing

src/packages/member/component/profile/profile.component.html

@@ -13,25 +13,25 @@
       <div class="ui-g form-group">
         <div class="ui-g-12">
         <span class="md-inputfield">
-          <input type="text" pInputText readonly value="{{member.email}}">
+          <input type="text" pInputText formControlName="email" readonly value="{{member.email}}">
           <label>Email</label>
         </span>
         </div>
         <div class="ui-g-12">
         <span class="md-inputfield">
-          <input type="text" pInputText value="{{member.name}}" >
+          <input type="text" pInputText formControlName="name" value="{{member.name}}" >
           <label>Name</label>
         </span>
         </div>
         <div class="ui-g-12">
         <span class="md-inputfield">
-          <input type="text" pInputText value="{{member.companyName}}" >
+          <input type="text" pInputText formControlName="companyName" value="{{member.companyName}}" >
           <label>Company Name</label>
         </span>
         </div>
         <div class="ui-g-12">
         <span class="md-inputfield">
-          <input type="text" pInputText  value="{{member.phone}}" >
+          <input type="text" pInputText  formControlName="phone" value="{{member.phone}}" >
           <label>Phone</label>
         </span>
         </div>
@@ -44,4 +44,4 @@
       </button>
     </div>
   </div>
-</form>  
+</form>

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

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<Member> {
+    return this.rpcService.call<Member>('MemberService.modify', member, '');
+  }
 }

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<AuthStore.State>(createSelector(
   (state: State) => state.auth
 ));
 
-export const SignupSelector = new StateSelector<SignupStore.Signup>(createSelector(
+export const SignupSelector = new StateSelector<SignupStore.State>(createSelector(
   selectMemberState,
   (state: State) => state.signup
 ));

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';
+

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
+;

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();
+  }));
+});

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<Action> = 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(['/']));
+
+}

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;
+    }
+  }
+}

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,
+};