refactor user profile
This commit is contained in:
Dan Percic
parent
909f22979f
commit
813b887cfb
@ -1,51 +1,39 @@
|
||||
<section>
|
||||
<div class='left-container full-height'>
|
||||
<div class='overlay-shadow'></div>
|
||||
<div class='dialog'>
|
||||
<div class='dialog-header'>
|
||||
<div class='heading-l' [translate]="'user-profile.title'"></div>
|
||||
<section class="red-content-inner">
|
||||
<div class="left-container full-height">
|
||||
<div class="overlay-shadow"></div>
|
||||
<div class="dialog">
|
||||
<div class="dialog-header">
|
||||
<div class="heading-l" [translate]="'user-profile.title'"></div>
|
||||
</div>
|
||||
<form [formGroup]='formGroup' (submit)='save()'>
|
||||
<div class='dialog-content'>
|
||||
<div class='dialog-content-left'>
|
||||
<div class='red-input-group required'>
|
||||
<form [formGroup]="formGroup" (submit)="save()">
|
||||
<div class="dialog-content">
|
||||
<div class="dialog-content-left">
|
||||
<div class="red-input-group required">
|
||||
<label [translate]="'user-profile.form.email'"></label>
|
||||
<input
|
||||
formControlName='email'
|
||||
name='email'
|
||||
type='email'
|
||||
/>
|
||||
<input formControlName="email" name="email" type="email" />
|
||||
</div>
|
||||
|
||||
<div class='red-input-group'>
|
||||
<div class="red-input-group">
|
||||
<label [translate]="'user-profile.form.first-name'"></label>
|
||||
<input
|
||||
formControlName='firstName'
|
||||
name='firstName'
|
||||
type='text'
|
||||
/>
|
||||
<input formControlName="firstName" name="firstName" type="text" />
|
||||
</div>
|
||||
|
||||
<div class='red-input-group'>
|
||||
<div class="red-input-group">
|
||||
<label [translate]="'user-profile.form.last-name'"></label>
|
||||
<input
|
||||
formControlName='lastName'
|
||||
name='lastName'
|
||||
type='text'
|
||||
/>
|
||||
<input formControlName="lastName" name="lastName" type="text" />
|
||||
</div>
|
||||
<div class='red-input-group'>
|
||||
<div class="red-input-group">
|
||||
<label [translate]="'top-bar.navigation-items.my-account.children.language.label'"></label>
|
||||
<mat-select formControlName='language'>
|
||||
<mat-option *ngFor='let language of languages' [value]='language'>
|
||||
{{('top-bar.navigation-items.my-account.children.language.' + language) | translate}}
|
||||
<mat-select formControlName="language">
|
||||
<mat-option *ngFor="let language of languages" [value]="language">
|
||||
{{ 'top-bar.navigation-items.my-account.children.language.' + language | translate }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='dialog-actions'>
|
||||
<button [disabled]='formGroup.invalid' color='primary' mat-flat-button type='submit'>
|
||||
<div class="dialog-actions">
|
||||
<button [disabled]="formGroup.invalid || !(profileChanged || languageChanged)" color="primary" mat-flat-button type="submit">
|
||||
{{ 'user-profile.actions.save' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
@ -54,4 +42,4 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<redaction-full-page-loading-indicator [displayed]='!viewReady'></redaction-full-page-loading-indicator>
|
||||
<redaction-full-page-loading-indicator [displayed]="!viewReady"></redaction-full-page-loading-indicator>
|
||||
|
||||
@ -1,40 +1,10 @@
|
||||
@import '../../../assets/styles/red-mixins';
|
||||
|
||||
.left-container {
|
||||
width: 100vw;
|
||||
background-color: $grey-2;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@include scroll-bar;
|
||||
overflow: auto;
|
||||
|
||||
.dialog {
|
||||
border-radius: 8px;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 70px;
|
||||
background-color: $white;
|
||||
max-width: 650px;
|
||||
height: fit-content;
|
||||
box-shadow: 0 1px 5px 0 rgba(40, 50, 65, 0.19);
|
||||
position: unset;
|
||||
|
||||
.heading-l {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.dialog-content {
|
||||
display: flex;
|
||||
|
||||
.dialog-content-left {
|
||||
min-width: 300px;
|
||||
margin-right: 64px;
|
||||
}
|
||||
|
||||
.link-action {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.full-height {
|
||||
@ -43,6 +13,6 @@
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: calc(100% - 50px);
|
||||
height: calc(100% + 50px);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@ -44,17 +44,15 @@ export class UserProfileScreenComponent implements OnInit {
|
||||
this._loadData();
|
||||
}
|
||||
|
||||
private _loadData() {
|
||||
private _loadData(): void {
|
||||
try {
|
||||
this._user = this._userService.getUserById(this._userService.userId);
|
||||
console.log(this._userService.allUsers);
|
||||
this._initialValue = {
|
||||
email: this._user.email,
|
||||
firstName: this._user.firstName,
|
||||
lastName: this._user.lastName,
|
||||
language: this._languageService.currentLanguage
|
||||
};
|
||||
console.log(this._initialValue);
|
||||
this.formGroup.patchValue(this._initialValue, { emitEvent: false });
|
||||
} catch (e) {
|
||||
} finally {
|
||||
@ -62,8 +60,21 @@ export class UserProfileScreenComponent implements OnInit {
|
||||
}
|
||||
}
|
||||
|
||||
public changeLanguage(language: string): void {
|
||||
this._languageService.changeLanguage(language);
|
||||
public get languageChanged(): boolean {
|
||||
return this._initialValue['language'] !== this.formGroup.get('language').value;
|
||||
}
|
||||
|
||||
public get profileChanged(): boolean {
|
||||
const keys = Object.keys(this.formGroup.getRawValue());
|
||||
keys.splice(keys.indexOf('language'), 1);
|
||||
|
||||
for (const key of keys) {
|
||||
if (this._initialValue[key] !== this.formGroup.get(key).value) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
public get languages(): string[] {
|
||||
@ -72,20 +83,27 @@ export class UserProfileScreenComponent implements OnInit {
|
||||
|
||||
public async save(): Promise<void> {
|
||||
this.viewReady = false;
|
||||
const value = this.formGroup.getRawValue() as ProfileModel;
|
||||
this.changeLanguage(value.language);
|
||||
delete value.language;
|
||||
|
||||
await this._userControllerService
|
||||
.updateProfile(
|
||||
{
|
||||
...value,
|
||||
roles: this._user.roles
|
||||
},
|
||||
this._user.userId
|
||||
)
|
||||
.toPromise();
|
||||
this._initialValue = this.formGroup.getRawValue();
|
||||
if (this.languageChanged) {
|
||||
this._languageService.changeLanguage(this.formGroup.get('language').value);
|
||||
}
|
||||
|
||||
if (this.profileChanged) {
|
||||
const value = this.formGroup.value as ProfileModel;
|
||||
delete value.language;
|
||||
|
||||
await this._userControllerService
|
||||
.updateProfile(
|
||||
{
|
||||
...value,
|
||||
roles: this._user.roles
|
||||
},
|
||||
this._user.userId
|
||||
)
|
||||
.toPromise();
|
||||
}
|
||||
|
||||
this._initialValue = this.formGroup.value;
|
||||
this.viewReady = true;
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,34 +8,6 @@
|
||||
justify-content: center;
|
||||
@include scroll-bar;
|
||||
overflow: auto;
|
||||
|
||||
.dialog {
|
||||
border-radius: 8px;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 70px;
|
||||
background-color: $white;
|
||||
max-width: 650px;
|
||||
height: fit-content;
|
||||
box-shadow: 0 1px 5px 0 rgba(40, 50, 65, 0.19);
|
||||
position: unset;
|
||||
|
||||
.heading-l {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.dialog-content {
|
||||
display: flex;
|
||||
|
||||
.dialog-content-left {
|
||||
min-width: 300px;
|
||||
margin-right: 64px;
|
||||
}
|
||||
|
||||
.link-action {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.w-100 {
|
||||
|
||||
@ -120,6 +120,34 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
.dialog {
|
||||
border-radius: 8px;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 70px;
|
||||
background-color: $white;
|
||||
max-width: 650px;
|
||||
height: fit-content;
|
||||
box-shadow: 0 1px 5px 0 rgba(40, 50, 65, 0.19);
|
||||
position: unset;
|
||||
|
||||
.heading-l {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.dialog-content {
|
||||
display: flex;
|
||||
|
||||
.dialog-content-left {
|
||||
min-width: 300px;
|
||||
margin-right: 64px;
|
||||
}
|
||||
|
||||
.link-action {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1600px) {
|
||||
redaction-initials-avatar .username:not(.always-visible) {
|
||||
display: none;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user