styling changes

*my profile
This commit is contained in:
Sofia Papacharalampous 2024-03-19 13:57:30 +02:00
parent 553fd05040
commit ff40bee420
3 changed files with 35 additions and 13 deletions

View File

@ -29,7 +29,7 @@ export class UserProfileEditorModel {
const formGroup = new UntypedFormBuilder().group({ const formGroup = new UntypedFormBuilder().group({
id: new UntypedFormControl(this.id), id: new UntypedFormControl(this.id),
name: new UntypedFormControl(this.name), name: new UntypedFormControl(this.name),
language: new UntypedFormControl(this.language ? availableLanguages.filter(x => x.value === this.language.value).pop() : '', [Validators.required]), language: new UntypedFormControl(this.language ? availableLanguages.filter(x => x === this.language).pop() : '', [Validators.required]),
timezone: new UntypedFormControl(this.timezone, [Validators.required]), timezone: new UntypedFormControl(this.timezone, [Validators.required]),
culture: new UntypedFormControl(this.culture, [Validators.required]), culture: new UntypedFormControl(this.culture, [Validators.required]),
organization: new UntypedFormControl(this.organization), organization: new UntypedFormControl(this.organization),

View File

@ -16,7 +16,7 @@
<div class="row mb-5"> <div class="row mb-5">
<div class="col"> <div class="col">
<div class="row"> <div class="row">
<div class="col-auto field-title">{{'USER-PROFILE.SETTINGS.NAME' | translate}} *</div> <div class="col-auto mb-1 field-title">{{'USER-PROFILE.SETTINGS.NAME' | translate}} *</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col name-form"> <div class="col name-form">
@ -73,7 +73,7 @@
<div class="row mb-5"> <div class="row mb-5">
<div class="col"> <div class="col">
<div class="row"> <div class="row">
<div class="col-auto field-title">{{'USER-PROFILE.SETTINGS.ORGANIZATION' | translate}}</div> <div class="col-auto mb-1 field-title">{{'USER-PROFILE.SETTINGS.ORGANIZATION' | translate}}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col organization-form"> <div class="col organization-form">
@ -88,7 +88,7 @@
<div class="row mb-5"> <div class="row mb-5">
<div class="col"> <div class="col">
<div class="row"> <div class="row">
<div class="col-auto field-title">{{'USER-PROFILE.SETTINGS.ROLE' | translate}}</div> <div class="col-auto mb-1 field-title">{{'USER-PROFILE.SETTINGS.ROLE' | translate}}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col role-form"> <div class="col role-form">
@ -118,7 +118,7 @@
<div class="row mb-5"> <div class="row mb-5">
<div class="col"> <div class="col">
<div class="row"> <div class="row">
<div class="col-auto field-title">{{'USER-PROFILE.SETTINGS.TIMEZONE' | translate}} *</div> <div class="col-auto mb-1 field-title">{{'USER-PROFILE.SETTINGS.TIMEZONE' | translate}} *</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col timezone-form"> <div class="col timezone-form">
@ -139,7 +139,7 @@
<div class="row mb-5"> <div class="row mb-5">
<div class="col"> <div class="col">
<div class="row"> <div class="row">
<div class="col-auto field-title">{{'USER-PROFILE.SETTINGS.CULTURE' | translate}} *</div> <div class="col-auto mb-1 field-title">{{'USER-PROFILE.SETTINGS.CULTURE' | translate}} *</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col culture-form"> <div class="col culture-form">
@ -160,14 +160,16 @@
<div class="row mb-5"> <div class="row mb-5">
<div class="col"> <div class="col">
<div class="row"> <div class="row">
<div class="col-auto field-title">{{'USER-PROFILE.SETTINGS.LANGUAGE' | translate}} *</div> <div class="col-auto mb-1 field-title">{{'USER-PROFILE.SETTINGS.LANGUAGE' | translate}} *</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col language-form"> <div class="col language-form">
<mat-form-field> <mat-form-field>
<mat-select placeholder="{{'USER-PROFILE.SETTINGS.LANGUAGE' | translate}}" [formControl]="this.formGroup.get('language')" required> <!-- <mat-label>{{'USER-PROFILE.SETTINGS.LANGUAGE' | translate}}</mat-label> -->
<mat-select [formControl]="this.formGroup.get('language')" name="language">
<mat-option *ngFor="let language of languages" [value]="language"> <mat-option *ngFor="let language of languages" [value]="language">
{{ language.label | translate }} {{ "GENERAL.LANGUAGES."+ language | translate }}
</mat-option> </mat-option>
</mat-select> </mat-select>
<mat-error *ngIf="this.formGroup.get('language').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="this.formGroup.get('language').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>

View File

@ -26,6 +26,8 @@ import { Observable, of } from 'rxjs';
import { map, takeUntil } from 'rxjs/operators'; import { map, takeUntil } from 'rxjs/operators';
import { AddAccountDialogComponent } from './add-account/add-account-dialog.component'; import { AddAccountDialogComponent } from './add-account/add-account-dialog.component';
import { UserProfileEditorModel } from './user-profile-editor.model'; import { UserProfileEditorModel } from './user-profile-editor.model';
import { nameof } from 'ts-simple-nameof';
import { Guid } from '@common/types/guid';
@Component({ @Component({
selector: 'app-user-profile', selector: 'app-user-profile',
@ -83,12 +85,24 @@ export class UserProfileComponent extends BaseComponent implements OnInit, OnDes
.pipe(takeUntil(this._destroyed)) .pipe(takeUntil(this._destroyed))
.subscribe((params: Params) => { .subscribe((params: Params) => {
this.currentUserId = this.authService.userId()?.toString(); this.currentUserId = this.authService.userId()?.toString();
const userId = !params['id'] ? 'me' : params['id']; this.user = this.userService.getSingle(
this.user = this.userService.getSingle(userId).pipe(map(result => { Guid.parse(this.currentUserId),
[
nameof<User>(x => x.id),
nameof<User>(x => x.name),
nameof<User>(x => x.additionalInfo.language),
nameof<User>(x => x.additionalInfo.timezone),
nameof<User>(x => x.additionalInfo.culture),
nameof<User>(x => x.additionalInfo.organization),
nameof<User>(x => x.additionalInfo.roleOrganization),
]
)
.pipe(map(result => {
//result['additionalinfo'] = JSON.parse(result['additionalinfo']); //result['additionalinfo'] = JSON.parse(result['additionalinfo']);
this.userProfileEditorModel = new UserProfileEditorModel().fromModel(result); this.userProfileEditorModel = new UserProfileEditorModel().fromModel(result);
this.formGroup = this.userProfileEditorModel.buildForm(this.languageService.getAvailableLanguagesCodes()); this.formGroup = this.userProfileEditorModel.buildForm(this.languageService.getAvailableLanguagesCodes());
// this.formGroup = new FormBuilder().group({ // this.formGroup = new FormBuilder().group({
// language: new FormControl(result['language'] ? availableLanguages.filter(x => x.value === result['language']['value']).pop() : '', [Validators.required]), // language: new FormControl(result['language'] ? availableLanguages.filter(x => x.value === result['language']['value']).pop() : '', [Validators.required]),
// timezone: new FormControl(result['timezone'], [Validators.required]), // timezone: new FormControl(result['timezone'], [Validators.required]),
@ -149,7 +163,13 @@ export class UserProfileComponent extends BaseComponent implements OnInit, OnDes
} }
displayFn(culture?: CultureInfo): string | undefined { displayFn(culture?: CultureInfo): string | undefined {
return culture ? culture.displayName + '-' + culture.nativeName : undefined;
if (culture == null
|| culture.displayName == null
|| culture.nativeName == null)
return undefined;
return culture.displayName + '-' + culture.nativeName;
} }
save() { save() {