modify->profile change

profile routing & page print

src/app/commons/component/layout/profile/app.profile.component.html

@@ -1,14 +1,14 @@
 <div class="profile" [ngClass]="{'profile-expanded':active}">
     <a href="#" (click)="onClick($event)">
         <img class="profile-image" src="assets/layout/images/avatar.png" />
-        <span class="profile-name">Jane Williams</span>
+        <span class="profile-name">{{member.name}}</span>
         <i class="material-icons">keyboard_arrow_down</i>
     </a>
 </div>
 
 <ul class="ultima-menu profile-menu" [@menu]="active ? 'visible' : 'hidden'">
     <li role="menuitem">
-        <a href="#" class="ripplelink" [attr.tabindex]="!active ? '-1' : null">
+        <a [routerLink]="['/account/profile']" class="ripplelink" [attr.tabindex]="!active ? '-1' : null">
             <i class="material-icons">person</i>
             <span>Profile</span>
         </a>
@@ -31,4 +31,4 @@
             <span>Logout</span>
         </a>
     </li>
-</ul>
+</ul>

src/app/commons/component/layout/profile/app.profile.component.ts

@@ -1,6 +1,11 @@
-import {Component, trigger, state, transition, style, animate} from '@angular/core';
+import {Component, trigger, state, transition, style, animate, OnInit} from '@angular/core';
 import {AppComponent} from 'app/app.component';
 import { PagesComponent } from 'app/pages/pages.component';
+import {ActivatedRoute, Router} from '@angular/router';
+import * as AuthStore from '../../../../../packages/member/store/auth';
+import {select, Store} from '@ngrx/store';
+import {AuthSelector} from '../../../../../packages/member/store';
+import {Member} from '../../../../../packages/member/model';
 
 @Component({
     selector: 'of-inline-profile',
@@ -18,13 +23,34 @@ import { PagesComponent } from 'app/pages/pages.component';
         ])
     ]
 })
-export class AppInlineProfileComponent {
+export class AppInlineProfileComponent implements OnInit {
 
     active: boolean;
 
-    constructor(public app: PagesComponent) {}
+    member: Member;
 
-    onClick(event) {
+  // this.store.select(AuthSelector.select('member');
+
+  constructor(
+    public app: PagesComponent,
+    private activatedRoute: ActivatedRoute,
+    private router: Router,
+    private store: Store<AuthStore.State>,
+  ) {
+  }
+
+
+  ngOnInit() {
+    this.store.select(AuthSelector.select('member')).subscribe(
+      (member: Member) => {
+        this.member = member;
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+  }
+  onClick(event) {
         this.active = !this.active;
         setTimeout(() => {
           this.app.layoutMenuScrollerViewChild.moveBar();

src/app/pages/account/account-page-routing.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { AccountPageComponent } from './account-page.component';
+import { ProfilePageComponent } from './profile/profile-page.component';
+import { SettingsPageComponent } from './settings/settings-page.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: AccountPageComponent,
+    children: [
+      { path: '', redirectTo: 'profile' },
+      { path: 'profile', component:  ProfilePageComponent},
+      { path: 'settings', component: SettingsPageComponent},
+    ]
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class AccountPageRoutingModule { }

src/app/pages/account/account-page.component.html

@@ -0,0 +1,9 @@
+<!--<div class="ui-fluid">-->
+  <!--<div class="ui-g">-->
+    <!--<div class="ui-g-12">-->
+      <!--<div class="card no-margin">-->
+        <router-outlet></router-outlet>
+      <!--</div>-->
+    <!--</div>-->
+  <!--</div>-->
+<!--</div>-->

src/app/pages/account/account-page.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AccountPageComponent } from './account-page.component';
+
+describe('ProfilePageComponent', () => {
+  let component: AccountPageComponent;
+  let fixture: ComponentFixture<AccountPageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AccountPageComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AccountPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/account/account-page.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'of-pages-account',
+  templateUrl: './account-page.component.html',
+})
+export class AccountPageComponent implements OnInit {
+
+  constructor(private route: ActivatedRoute, private router: Router) {
+  }
+
+  ngOnInit() {
+  }
+
+}

src/app/pages/account/account-page.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { AccountPageRoutingModule } from './account-page-routing.module';
+import { AccountPageComponent } from './account-page.component';
+import { ProfilePageComponent } from './profile/profile-page.component';
+import { SettingsPageComponent } from './settings/settings-page.component';
+import { PrimeNGModules } from 'packages/commons/prime-ng/prime-ng.module';
+import { MemberModule } from 'packages/member/member.module';
+
+export const COMPONENTS = [
+  AccountPageComponent,
+  ProfilePageComponent,
+  SettingsPageComponent
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    AccountPageRoutingModule,
+    PrimeNGModules,
+    MemberModule,
+    // NotificationModule,
+  ],
+  declarations: COMPONENTS
+})
+export class AccountPageModule { }

src/app/pages/log/log-page.component.spec.ts

@@ -2,7 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { LogPageComponent } from './log-page.component';
 
-describe('AlertPageComponent', () => {
+describe('ProfilePageComponent', () => {
   let component: LogPageComponent;
   let fixture: ComponentFixture<LogPageComponent>;
 

src/app/pages/pages-routing.module.ts

@@ -22,6 +22,7 @@ const routes: Routes = [
       { path: 'alert', loadChildren: './alert/alert-page.module#AlertPageModule' },
       { path: 'report', loadChildren: './report/report-page.module#ReportPageModule' },
       { path: 'log', loadChildren: './log/log-page.module#LogPageModule' },
+      { path: 'account', loadChildren: './account/account-page.module#AccountPageModule' },
       // { path: 'settings/member', loadChildren: './settings/member/member-page.module#MemberPageModule' },
     ]
   }

src/app/pages/report/report-page.component.spec.ts

@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { AlertPageComponent } from './report-page.component';
+import { ReportPageComponent } from './report-page.component';
 
 describe('AlertPageComponent', () => {
-  let component: AlertPageComponent;
+  let component: ReportPageComponent;
-  let fixture: ComponentFixture<AlertPageComponent>;
+  let fixture: ComponentFixture<ReportPageComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ AlertPageComponent ]
+      declarations: [ ReportPageComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(AlertPageComponent);
+    fixture = TestBed.createComponent(ReportPageComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/packages/member/component/index.ts

@@ -1,10 +1,10 @@
-import { ModifyComponent } from './modify/modify.component';
+import { ProfileComponent } from './profile/profile.component';
 import { SigninComponent } from './signin/signin.component';
 import { SignupComponent } from './signup/signup.component';
 import { ResetPasswordComponent } from './reset-password/reset-password.component';
 
 export const COMPONENTS = [
-  ModifyComponent,
+  ProfileComponent,
   SigninComponent,
   SignupComponent,
   ResetPasswordComponent,

src/packages/member/component/modify/modify.component.html

@@ -1,3 +0,0 @@
-<p>
-  modify works!
-</p>

src/packages/member/component/modify/modify.component.ts

@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'of-member-modify',
-  templateUrl: './modify.component.html',
-  styleUrls: ['./modify.component.scss']
-})
-export class ModifyComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}

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

@@ -0,0 +1,42 @@
+<div class="ui-g">
+  <div class="ui-g-12 ui-md-3">
+    <p-panel [showHeader]="false">
+      <div class="ui-g">
+        <div class="ui-g-12 ui-inputgroup ui-bottom-space-10">
+
+        </div>
+
+        <div class="ui-g-12 ui-bottom-space-10">
+          <img class="profile-image" src="assets/layout/images/dark-user-bg.png" />
+        </div>
+      </div>
+    </p-panel>
+  </div>
+
+  <div class="ui-g form-group">
+    <div class="ui-g-12 ui-md-6 ui-lg-6">
+      <span class="md-inputfield">
+        <input type="text" pInputText readonly value="overflow@loafle.com" [readonly]="true">
+        <label>Email</label>
+      </span>
+    </div>
+    <div class="ui-g-12 ui-md-6 ui-lg-6">
+      <span class="md-inputfield">
+        <input type="text" pInputText readonly value="overflow" >
+        <label>Name</label>
+      </span>
+    </div>
+    <div class="ui-g-12 ui-md-6 ui-lg-6">
+      <span class="md-inputfield">
+        <input type="text" pInputText readonly value="loafle" >
+        <label>Company Name</label>
+      </span>
+    </div>
+    <div class="ui-g-12 ui-md-6 ui-lg-6">
+      <span class="md-inputfield">
+        <input type="text" pInputText readonly value="010-4055-6699" >
+        <label>Phone</label>
+      </span>
+    </div>
+  </div>
+</div>

src/packages/member/component/profile/profile.component.spec.ts

@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ModifyComponent } from './modify.component';
+import { ProfileComponent } from './profile.component';
 
-describe('ModifyComponent', () => {
+describe('ProfileComponent', () => {
-  let component: ModifyComponent;
+  let component: ProfileComponent;
-  let fixture: ComponentFixture<ModifyComponent>;
+  let fixture: ComponentFixture<ProfileComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ModifyComponent ]
+      declarations: [ ProfileComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(ModifyComponent);
+    fixture = TestBed.createComponent(ProfileComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/packages/member/component/profile/profile.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'of-member-profile',
+  templateUrl: './profile.component.html',
+  styleUrls: ['./profile.component.scss']
+})
+export class ProfileComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}