argos/dmp-frontend/src/app/users/profile/user-profile.component.html

91 lines
3.6 KiB
HTML

<div *ngIf="user | async as userProfile; else loading">
<mat-card class="example-card">
<mat-card-content>
<div fxLayout="column" fxLayoutAlign="center center">
<div fxFlex>
<img mat-card-avatar [src]="userProfile.additionalinfo.avatarUrl">
</div>
<mat-card-title>{{userProfile.name}}</mat-card-title>
<mat-card-subtitle>{{userProfile.email}}</mat-card-subtitle>
</div>
</mat-card-content>
</mat-card>
<mat-card>
<mat-card-content>
<div fxLayout="column" fxLayoutAlign="center center">
<div fxFlex>
<h4>{{ 'USER-PROFILE.ASSOCIATED-DMPS' | translate}}</h4>
</div>
<div>
<mat-list>
<mat-list-item class="clickable" (click)="navigateToDmp(dmp)" *ngFor="let dmp of userProfile.associatedDmps" fxLayout="row"
fxLayoutAlign="start center">
<div>
{{ dmp.label }}
</div>
<div>
<mat-chip-list>
<mat-chip>{{ getUserRole(dmp) }}</mat-chip>
</mat-chip-list>
</div>
</mat-list-item>
</mat-list>
<button mat-button (click)="showAllDmps()"> {{'USER-PROFILE.DMPS.SHOW-ALL' | translate}}</button>
</div>
</div>
</mat-card-content>
</mat-card>
<mat-card>
<mat-card-header>
<mat-card-title>
<h4>{{ 'USER-PROFILE.SETTINGS.TITLE' | translate}}</h4>
<button *ngIf="!editMode" mat-icon-button (click)="unlock()">
<mat-icon class="mat-24">edit</mat-icon>
</button>
<button *ngIf="editMode" mat-icon-button (click)="lock()">
<mat-icon class="mat-24">lock</mat-icon>
</button>
</mat-card-title>
</mat-card-header>
<mat-card-content>
<div class="container">
<div class="row">
<div class="col-md-4">
<mat-form-field class="full-width">
<input type="text" placeholder="{{'USER-PROFILE.SETTINGS.TIMEZONE' | translate}}" [formControl]="this.formGroup.get('timezone')"
matInput [matAutocomplete]="timezone">
<mat-autocomplete #timezone="matAutocomplete">
<mat-option *ngFor="let timezone of timezones | async" [value]="timezone">
{{ timezone | timezoneInfoDisplay }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
<div class="col-md-4">
<mat-form-field class="full-width">
<input type="text" placeholder="{{'USER-PROFILE.SETTINGS.CULTURE' | translate}}" [formControl]="this.formGroup.get('culture')"
matInput [matAutocomplete]="culture">
<mat-autocomplete #culture="matAutocomplete" [displayWith]="displayFn">
<mat-option *ngFor="let culture of cultures | async" [value]="culture">
{{ culture.displayName }} - {{ culture.nativeName }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
<div class="col-md-4">
<mat-form-field class="full-width">
<mat-select placeholder="{{'USER-PROFILE.SETTINGS.LANGUAGE' | translate}}" [formControl]="this.formGroup.get('language')">
<mat-option *ngFor="let language of languages" [value]="language">
{{ language.label }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
<ng-template #loading>
</ng-template>