2018-04-30 12:04:58 +00:00
|
|
|
import { Component, OnInit, OnDestroy } from '@angular/core';
|
|
|
|
import { ActivatedRoute, Router } from '@angular/router';
|
2018-04-18 12:57:58 +00:00
|
|
|
import { PagesComponent } from 'app/pages/pages.component';
|
|
|
|
|
|
|
|
import * as AuthStore from '../../store/auth';
|
2018-04-30 11:50:47 +00:00
|
|
|
import * as ModifyStore from '../../store/modify';
|
|
|
|
|
2018-04-18 12:57:58 +00:00
|
|
|
import { Member } from '../../model';
|
|
|
|
import { AuthSelector } from '../../store';
|
2018-04-30 12:04:58 +00:00
|
|
|
import { Store, select } from '@ngrx/store';
|
2018-04-30 11:50:47 +00:00
|
|
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
2018-04-30 12:04:58 +00:00
|
|
|
import { ModifySelector } from '../../store';
|
|
|
|
import { Subscription } from 'rxjs/Subscription';
|
|
|
|
import { RPCClientError } from '@loafer/ng-rpc/protocol';
|
2018-04-18 12:57:58 +00:00
|
|
|
|
2018-04-18 11:27:27 +00:00
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'of-member-profile',
|
|
|
|
templateUrl: './profile.component.html',
|
|
|
|
styleUrls: ['./profile.component.scss']
|
|
|
|
})
|
2018-04-30 12:04:58 +00:00
|
|
|
export class ProfileComponent implements OnInit, OnDestroy {
|
2018-04-18 11:27:27 +00:00
|
|
|
|
2018-04-18 12:57:58 +00:00
|
|
|
member: Member;
|
|
|
|
modifyForm: FormGroup;
|
|
|
|
|
2018-04-30 12:04:58 +00:00
|
|
|
modifiedMember$ = this.modifyStore.pipe(select(ModifySelector.select('member')));
|
|
|
|
|
2018-04-18 12:57:58 +00:00
|
|
|
constructor(
|
|
|
|
public app: PagesComponent,
|
|
|
|
private activatedRoute: ActivatedRoute,
|
|
|
|
private router: Router,
|
|
|
|
private store: Store<AuthStore.State>,
|
|
|
|
private formBuilder: FormBuilder,
|
2018-04-30 12:04:58 +00:00
|
|
|
private modifyStore: Store<ModifyStore.State>
|
2018-04-18 12:57:58 +00:00
|
|
|
) {
|
|
|
|
}
|
|
|
|
|
2018-04-18 11:27:27 +00:00
|
|
|
|
|
|
|
ngOnInit() {
|
2018-04-18 12:57:58 +00:00
|
|
|
this.store.select(AuthSelector.select('member')).subscribe(
|
|
|
|
(member: Member) => {
|
|
|
|
this.member = member;
|
|
|
|
},
|
|
|
|
(error) => {
|
|
|
|
console.log(error);
|
|
|
|
}
|
|
|
|
);
|
|
|
|
this.initForm();
|
|
|
|
}
|
|
|
|
|
2018-04-30 12:04:58 +00:00
|
|
|
ngOnDestroy() {
|
|
|
|
}
|
|
|
|
|
2018-04-18 12:57:58 +00:00
|
|
|
initForm() {
|
|
|
|
this.modifyForm = this.formBuilder.group({
|
2018-04-30 12:04:58 +00:00
|
|
|
'email': [this.member.email,
|
2018-04-30 11:50:47 +00:00
|
|
|
[
|
|
|
|
Validators.required,
|
|
|
|
Validators.email
|
|
|
|
]],
|
2018-04-30 12:04:58 +00:00
|
|
|
'name': [this.member.name, []],
|
|
|
|
'companyName': [this.member.companyName, []],
|
2018-04-30 11:50:47 +00:00
|
|
|
'phone': [this.member.phone, []],
|
2018-04-18 12:57:58 +00:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
modifyProfile() {
|
2018-04-30 11:50:47 +00:00
|
|
|
const modifyValue = Object.assign({}, this.modifyForm.value);
|
|
|
|
const member: Member = {
|
|
|
|
email: this.member.email,
|
|
|
|
name: modifyValue.name,
|
|
|
|
phone: modifyValue.phone,
|
|
|
|
companyName: modifyValue.companyName,
|
|
|
|
};
|
2018-04-30 12:04:58 +00:00
|
|
|
this.modifyStore.dispatch(new ModifyStore.Modify({ member }));
|
|
|
|
|
|
|
|
const modifiedMemberSubscription$ = this.modifiedMember$.subscribe(
|
|
|
|
(m: Member) => {
|
|
|
|
if (m) {
|
|
|
|
console.log(m);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (modifiedMemberSubscription$) {
|
|
|
|
modifiedMemberSubscription$.unsubscribe();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
(error: RPCClientError) => {
|
|
|
|
console.log(error.response.message);
|
|
|
|
}
|
|
|
|
);
|
2018-04-18 11:27:27 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
}
|