connect-admin/src/app/pages/curator/curator.component.html

92 lines
4.1 KiB
HTML

<div class="uk-padding uk-padding-remove-top uk-text-large uk-text-center uk-width">Edit Personal Info</div>
<div class="uk-flex uk-grid-divider" uk-grid>
<div *ngIf="showLoading" class="uk-animation-fade uk-width-1-1" role="alert">
<span class="loading-gif uk-align-center"></span>
</div>
<table *ngIf="curatorId != null && curator != null && !showLoading" class="uk-width-1-2 uk-align-center">
<tbody class="uk-table uk-align-center">
<tr *ngIf="curator.email != null" >
<td for="email" class="uk-text-bold uk-text-right">E-mail:</td>
<td class="uk-text-left">
{{curator.email}}
</td>
</tr>
<tr *ngIf="curator.name != null">
<td for="name" class="uk-text-bold uk-text-right">
Name
<span class="uk-text-danger uk-text-bold">
*
</span>
:
</td>
<td class="uk-text-left uk-width-1-1">
<div *ngIf="!curator.name || curator.name === ''" class=" uk-text-danger uk-text-small style=display:none"> Please add name. </div>
<input type="text"
class="form-control uk-input" id="name"
[(ngModel)]="curator.name" (input)="resetMessages(); onNameChange()" #name="ngModel" required>
</td>
</tr>
<tr *ngIf="photo != null">
<td for="photo" class="uk-text-bold uk-align-right">Photo:</td>
<td class="uk-text-left">
<div class="uk-flex uk-flex-middle">
<div class="uk-width-1-3">
<img class="uk-border-circle curator-photo" src="{{photo}}" alt="Curator Photo">
</div>
<div uk-form-custom>
<input id="photo" type="file" (change)="fileChangeEvent($event)" (input)="resetMessages(); change()"/>
<button class="uk-button portal-button" type="button" tabindex="-1">
Upload a photo
</button>
</div>
<div class="uk-margin-small-left">
<button class="uk-button uk-button-danger" type="button" (click)="resetMessages(); removePhotoModal.open()">
Remove
</button>
</div>
</div>
</td>
</tr>
<tr *ngIf="curator.bio != null">
<td for="bio" class="uk-text-bold uk-text-right">Biography:</td>
<td class="uk-text-left">
<textarea placeholder={{curator.bio}} type="text"
class="form-control uk-textarea" rows="6"
id="bio"
[(ngModel)]="curator.bio"
(input)="resetMessages(); change()">
</textarea>
</td>
</tr>
<tr *ngIf="curator.bio != null">
<td class="uk-text-right"></td>
<td class="uk-text-left">
<div class="uk-text-danger uk-text-bold">
* Required fields
</div>
</td>
</tr>
<tr>
<td class="uk-text-right"></td>
<td>
<div *ngIf="updateErrorMessage" class="uk-alert uk-alert-danger" role="alert">{{updateErrorMessage}}</div>
<div *ngIf="successfulSaveMessage" class="uk-alert uk-alert-success" role="alert">{{successfulSaveMessage}}</div>
</tr>
</tbody>
</table>
<div *ngIf="curatorId != null && curator != null && !showLoading" class="uk-width-1-2">
<affiliations [curatorAffiliations]="true" [affiliations]="curator.affiliations"
(affiliationsChange)="affiliationsChanged = $event"
(resetCuratorMessages)="resetMessages();">
</affiliations>
</div>
</div>
<div class="uk-float-right">
<button class="uk-button uk-margin-small-right" (click)="resetMessages(); resetForm()">Cancel</button>
<button *ngIf="enabled && (hasChanged || affiliationsChanged)" class="uk-button uk-button-primary" (click)="resetMessages(); updateCurator()">Save</button>
<button *ngIf="!enabled || (!hasChanged && !affiliationsChanged)" class="uk-button uk-button-default" disabled>Save</button>
</div>
<modal-alert #removePhotoModal (alertOutput)="removePhoto()">
Your photo will be removed after save your data. Are you sure you want to proceed?
</modal-alert>