File
Implements
Metadata
| selector |
crm-profile |
| styleUrls |
profile.component.scss |
| templateUrl |
./profile.component.html |
Methods
|
Private
fillNick
|
fillNick(nick: string)
|
|
|
Parameters :
| Name |
Type |
Optional |
Description |
| nick |
string
|
|
|
|
|
Private
initForm
|
initForm(profile: Profile)
|
|
|
Parameters :
| Name |
Type |
Optional |
Description |
| profile |
Profile
|
|
|
|
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
|
|
|
Private
nicknameValidator
|
nicknameValidator(control: FormControl)
|
|
|
|
Returns : Observable<any>
|
|
onChangeAvatar
|
onChangeAvatar()
|
|
|
|
|
|
saveProfile
|
saveProfile()
|
|
|
|
|
|
advertiserInfo
|
advertiserInfo: any
|
Type : any
|
|
|
|
changeAvatarSubscription
|
changeAvatarSubscription: Subscription
|
Type : Subscription
|
|
|
|
profileStateSubscription
|
profileStateSubscription: Subscription
|
Type : Subscription
|
|
|
import {Component, OnInit, OnDestroy} from '@angular/core';
import {ProfileService} from "../../core/profile/profile.service";
import {FormBuilder, FormGroup, Validators, FormControl} from "@angular/forms";
import {CRMValidators} from "../../shared/validators/CRMValidators";
import {Subscription, Observable} from "rxjs";
import {NotificationsService} from "../../core/notifications/notifications.service";
import {NgbModal, NgbModalOptions} from "@ng-bootstrap/ng-bootstrap";
import {ImgCropeUploadComponent} from "../../shared/components/img-crope-upload/img-crope-upload.component";
import {Profile} from "../../core/models/profile/profile.model";
@Component({
selector: 'crm-profile',
templateUrl: './profile.component.html',
styleUrls: ['./profile.component.scss']
})
export class ProfileComponent implements OnInit, OnDestroy {
profileForm: FormGroup;
profileStateSubscription: Subscription;
changeAvatarSubscription: Subscription;
profile: Profile;
advertiserInfo: any; //todo remove
constructor(private profileService: ProfileService,
private formBuilder: FormBuilder,
private notificationsService: NotificationsService,
private modalService: NgbModal) {
}
ngOnInit() {
this.profile = this.profileService.getLocalProfile();
this.initForm(this.profile);
this.profileStateSubscription = this.profileService.profileState.subscribe(profile => {
this.profile = profile;
this.initForm(profile)
});
}
ngOnDestroy() {
this.profileStateSubscription.unsubscribe();
if (this.changeAvatarSubscription) {
this.changeAvatarSubscription.unsubscribe();
}
}
saveProfile() {
this.profileService.updateProfile(this.profileForm.value).subscribe(
ok => this.notificationsService.success("Changes saved"),
error => console.error(error)
)
}
private initForm(profile: Profile) {
this.profileForm = this.formBuilder.group({
nickname: [this.fillNick(profile.nickname), [Validators.required, CRMValidators.leterOrDigitsOnly], [this.nicknameValidator.bind(this)]],
firstName: [profile.firstName, [Validators.maxLength(40)]],
lastName: [profile.lastName, [Validators.maxLength(40)]],
avatarUrl: [profile.avatarUrl]
})
}
private nicknameValidator(control: FormControl): Observable<any> {
if (control.value === this.profileService.getLocalProfile().nickname) {
return Observable.of(null)
} else {
return this.profileService.checkNickname(control.value)
.map(rs => null)
.catch(error => Observable.of({alreadyExist: true}))
}
}
onChangeAvatar() {
const options: NgbModalOptions = {size: 'lg'};
const modalRef = this.modalService.open(ImgCropeUploadComponent, options);
modalRef.componentInstance.currentImgUrl = this.profileForm.value.avatarUrl;
this.changeAvatarSubscription = modalRef.componentInstance.imageChange.subscribe(url => this.profileForm.patchValue({avatarUrl: url}));
}
private fillNick(nick: string) {
return nick.replace('@', '_').replace('.', '')
}
}
<div class="animated fadeIn">
<div class="row">
<div class="col-xl-3 col-lg-5 col-md-6 col-sm-12 col-xs-12">
<div class="card">
<div class="card-block">
<form [formGroup]="profileForm">
<div class="row">
<div class="col-sm-12 edit-img-container">
<button type="button" class="btn btn-link edit-img" (click)="onChangeAvatar()"><span
class="fa fa-lg fa-pencil"></span> Edit
</button>
<img [src]="profileForm.value.avatarUrl" width="100%">
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label> Email</label>
<input type="text" class="form-control" readonly [value]="profile.user.email"
title="{{profile.user.email}}">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="nickname">Nickname</label>
<input type="text"
class="form-control"
id="nickname"
placeholder="Enter your nickname"
formControlName="nickname">
<crm-form-error [control]="profileForm.controls.nickname"
[errors]="[{name: 'required', message: 'Nickname is required'},
{name: 'invalidNickname', message: 'Nickname is not valid'},
{name: 'alreadyExist', message: 'Nickname already used'}]"></crm-form-error>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="first-name">First name</label>
<input type="text"
class="form-control"
id="first-name"
placeholder="First name"
formControlName="firstName">
<crm-form-error [control]="profileForm.controls.firstName"
[errors]="[{name: 'maxlength', message: 'First name too long'}]"></crm-form-error>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="last-name">Last name</label>
<input type="text"
class="form-control"
id="last-name"
placeholder="Last name"
formControlName="lastName">
<crm-form-error [control]="profileForm.controls.lastName"
[errors]="[{name: 'maxlength', message: 'Last name too long'}]"></crm-form-error>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="last-name"> Role </label>
<input type="text" class="form-control" readonly [value]="profile.user.role.name"
title="{{profile.user.role.name}}">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button class="btn btn-primary" (click)="saveProfile()" [disabled]="!profileForm.valid">Save</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
Legend
Html element with directive