payne8/am-product-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add basic profile put request use purple as main color

Browse Source
This commit is contained in:
Mason Payne
2019-03-23 23:26:17 -06:00
parent 17ddad6a0f
commit 7c199795f9
9 changed files with 110 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/User.ts
View File

@ -24,7 +24,7 @@ interface Claims {
interface User {
claims: Claims;
customers: string[];
customers?: string[];
}
interface Address {

3
src/app/app.module.ts
View File

@ -1,6 +1,6 @@
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
@ -35,6 +35,7 @@ import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.compon
imports: [
BrowserAnimationsModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule,
ComponentsModule,
RouterModule,

8
src/app/components/sidebar/sidebar.component.ts
View File

@ -89,14 +89,6 @@ export class SidebarComponent implements OnInit {
appModulesService.showTestData.subscribe((newValue: boolean) => {
this.showTestData = newValue;
});
profileService.currentUser().subscribe((user) => {
console.log(user);
});
profileService.currentUser().subscribe((user) => {
console.log(user);
});
}
ngOnInit() {

2
src/app/layouts/admin-layout/admin-layout.component.html
View File

@ -1,5 +1,5 @@
<div class="wrapper">
<div class="sidebar" data-color="danger" data-background-color="white" data-image="./assets/img/sidebar-1.jpg">
<div class="sidebar" [attr.data-color]="currentColor" data-background-color="white" data-image="./assets/img/sidebar-1.jpg">
<app-sidebar></app-sidebar>
<div class="sidebar-background" style="background-image: url(./assets/img/sidebar-4.jpg)"></div>
</div>

21
src/app/layouts/admin-layout/admin-layout.component.ts
View File

@ -6,6 +6,16 @@ import { Router, NavigationEnd, NavigationStart } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';
import PerfectScrollbar from 'perfect-scrollbar';
const COLORS = [
`danger`,
`purple`,
`azure`,
`green`,
`orange`,
`rose`,
`white`,
];
@Component({
selector: 'app-admin-layout',
templateUrl: './admin-layout.component.html',
@ -15,8 +25,17 @@ export class AdminLayoutComponent implements OnInit {
private _router: Subscription;
private lastPoppedUrl: string;
private yScrollStack: number[] = [];
private colorIndex: number = 1;
public currentColor: string = COLORS[this.colorIndex];
constructor( public location: Location, private router: Router) {}
constructor( public location: Location, private router: Router) {
// setInterval(() => {
// this.colorIndex = this.colorIndex + 1;
// if (this.colorIndex > COLORS.length - 1) this.colorIndex = 0;
// this.currentColor = COLORS[this.colorIndex];
// }, 3000);
}
ngOnInit() {
const isWindows = navigator.platform.indexOf('Win') > -1 ? true : false;

1
src/app/layouts/admin-layout/admin-layout.module.ts
View File

@ -33,6 +33,7 @@ import {
CommonModule,
RouterModule.forChild(AdminLayoutRoutes),
FormsModule,
ReactiveFormsModule,
MatButtonModule,
MatRippleModule,
MatFormFieldModule,

9
src/app/profile.service.ts
View File

@ -25,6 +25,10 @@ export class ProfileService {
return this.uberCache.getRequest(this.requestCurrentUser.bind(this), `/api/v1/profile/events`, 'userUpdated');
}
public updateCurrentUser(newUserInfo: User): Observable<RequestStatus> {
return this.http.put<RequestStatus>('/api/v1/profile/me', newUserInfo).pipe(catchError(this.handleError));
}
private handleError(error: HttpErrorResponse) {
if (error.error instanceof ErrorEvent) {
// client or network error
@ -46,3 +50,8 @@ interface UserResponse {
status: string;
user: User
}
interface RequestStatus {
status: string;
eventId: string;
}

71
src/app/user-profile/user-profile.component.html
View File

@ -3,12 +3,12 @@
<div class="row">
<div class="col-md-8">
<div class="card">
<div class="card-header card-header-danger">
<div class="card-header card-header-primary">
<h4 class="card-title">Edit Profile</h4>
<p class="card-category">Complete your profile</p>
</div>
<div class="card-body">
<form>
<form [formGroup]="profileForm" (ngSubmit)="submitUpdatedUserInfo()">
<div class="row">
<div class="col-md-5">
<mat-form-field class="example-full-width">
@ -17,56 +17,63 @@
</div>
<div class="col-md-3">
<mat-form-field class="example-full-width">
<input matInput placeholder="Username">
<input matInput placeholder="Preferred Username" formControlName="preferred_username">
</mat-form-field>
</div>
<div class="col-md-4">
<mat-form-field class="example-full-width">
<input matInput placeholder="Email address" type="email">
<input matInput placeholder="Email address" type="email" value="{{(_currentUser | async)?.claims.email}}" disabled>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col-md-6">
<mat-form-field class="example-full-width">
<input matInput placeholder="Fist Name" type="text">
<input matInput placeholder="Fist Name" type="text" formControlName="given_name">
</mat-form-field>
</div>
<div class="col-md-6">
<mat-form-field class="example-full-width">
<input matInput placeholder="Last Name" type="text">
<input matInput placeholder="Last Name" type="text" formControlName="family_name">
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col-md-12">
<mat-form-field class="example-full-width">
<input matInput placeholder="Adress" type="text">
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col-md-4">
<mat-form-field class="example-full-width">
<input matInput placeholder="City" type="text">
</mat-form-field>
</div>
<div class="col-md-4">
<mat-form-field class="example-full-width">
<input matInput placeholder="Country" type="text">
</mat-form-field>
</div>
<div class="col-md-4">
<mat-form-field class="example-full-width">
<input matInput placeholder="Postal Code" type="text">
</mat-form-field>
</div>
<div formGroupName="address">
<div class="row">
<div class="col-md-12">
<mat-form-field class="example-full-width">
<input matInput placeholder="Adress" type="text" formControlName="street_address">
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col-md-3">
<mat-form-field class="example-full-width">
<input matInput placeholder="City" type="text" formControlName="locality">
</mat-form-field>
</div>
<div class="col-md-3">
<mat-form-field class="example-full-width">
<input matInput placeholder="State" type="text" formControlName="region">
</mat-form-field>
</div>
<div class="col-md-3">
<mat-form-field class="example-full-width">
<input matInput placeholder="Country" type="text" formControlName="country">
</mat-form-field>
</div>
<div class="col-md-3">
<mat-form-field class="example-full-width">
<input matInput placeholder="Postal Code" type="text" formControlName="postal_code">
</mat-form-field>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<label>About Me</label>
<mat-form-field class="example-full-width">
<textarea matInput placeholder="Lamborghini Mercy, Your chick she so thirsty, I'm in that two seat Lambo."></textarea>
<textarea matInput placeholder="Bio..."></textarea>
</mat-form-field>
<!-- <div class="form-group">
@ -77,7 +84,7 @@
</div> -->
</div>
</div>
<button mat-raised-button type="submit" class="btn btn-danger pull-right">Update Profile</button>
<button mat-raised-button type="submit" class="btn btn-primary pull-right">Update Profile</button>
<div class="clearfix"></div>
</form>
</div>
@ -96,7 +103,7 @@
<p class="card-description">
Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens’ bed design but the back is...
</p>
<a href="#pablo" class="btn btn-danger btn-round">Follow</a>
<a href="#pablo" class="btn btn-primary btn-round">Follow</a>
</div>
</div>
</div>

38
src/app/user-profile/user-profile.component.ts
View File

@ -1,4 +1,9 @@
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { take } from 'rxjs/operators';
import { ProfileService } from '../profile.service';
import { User } from '../User';
@Component({
selector: 'app-user-profile',
@ -6,10 +11,41 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./user-profile.component.css']
})
export class UserProfileComponent implements OnInit {
private _currentUser: Observable<User>;
public profileForm: FormGroup = new FormGroup({
given_name: new FormControl(''),
family_name: new FormControl(''),
middle_name: new FormControl(''),
nickname: new FormControl(''),
preferred_username: new FormControl(''),
birthdate: new FormControl(''),
gender: new FormControl(''),
phone_number: new FormControl(''),
website: new FormControl(''),
address: new FormGroup({
street_address: new FormControl(''),
locality: new FormControl(''),
region: new FormControl(''),
postal_code: new FormControl(''),
country: new FormControl('')
})
});
constructor() { }
constructor(
private profileService: ProfileService
) { }
ngOnInit() {
this._currentUser = this.profileService.currentUser();
this.profileService.currentUser().pipe(take(1)).subscribe((user: User) => {
if (user) {
this.profileForm.patchValue(user.claims);
}
});
}
submitUpdatedUserInfo() {
this.profileService.updateCurrentUser({claims: this.profileForm.value}).subscribe();
}
}