modify->profile change

profile routing & page print
This commit is contained in:
geek 2018-04-18 20:27:27 +09:00
parent f2a16ac753
commit 6d8662e2e6
17 changed files with 205 additions and 39 deletions

View File

@ -1,14 +1,14 @@
<div class="profile" [ngClass]="{'profile-expanded':active}"> <div class="profile" [ngClass]="{'profile-expanded':active}">
<a href="#" (click)="onClick($event)"> <a href="#" (click)="onClick($event)">
<img class="profile-image" src="assets/layout/images/avatar.png" /> <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> <i class="material-icons">keyboard_arrow_down</i>
</a> </a>
</div> </div>
<ul class="ultima-menu profile-menu" [@menu]="active ? 'visible' : 'hidden'"> <ul class="ultima-menu profile-menu" [@menu]="active ? 'visible' : 'hidden'">
<li role="menuitem"> <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> <i class="material-icons">person</i>
<span>Profile</span> <span>Profile</span>
</a> </a>
@ -31,4 +31,4 @@
<span>Logout</span> <span>Logout</span>
</a> </a>
</li> </li>
</ul> </ul>

View File

@ -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 {AppComponent} from 'app/app.component';
import { PagesComponent } from 'app/pages/pages.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({ @Component({
selector: 'of-inline-profile', 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; 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; this.active = !this.active;
setTimeout(() => { setTimeout(() => {
this.app.layoutMenuScrollerViewChild.moveBar(); this.app.layoutMenuScrollerViewChild.moveBar();

View File

@ -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 { }

View File

@ -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>-->

View File

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

View File

@ -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() {
}
}

View File

@ -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 { }

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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() {
}
}

View File

@ -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>

View File

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

View File

@ -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() {
}
}