From 361699144425655aac42dd0e7df0a3d7404fe2c9 Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@d315682c-612b-4755-9ff5-7f18f6832af3>
Date: Thu, 11 Jul 2019 11:15:46 +0000
Subject: [PATCH] [Trunk|Admin]: Curators page: some changes on the view.'

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-admin-portal/trunk@56489 d315682c-612b-4755-9ff5-7f18f6832af3
---
 .../affiliations/affiliations.component.html  |   4 +-
 src/app/pages/curator/curator.component.html  | 196 +++++++++---------
 2 files changed, 104 insertions(+), 96 deletions(-)

diff --git a/src/app/pages/affiliations/affiliations.component.html b/src/app/pages/affiliations/affiliations.component.html
index 92acc34..e4b9d30 100644
--- a/src/app/pages/affiliations/affiliations.component.html
+++ b/src/app/pages/affiliations/affiliations.component.html
@@ -59,8 +59,8 @@
         <a href="{{result.website_url}}" title="{{result.website_url}}" class="uk-margin-auto-top" target="_blank">{{_format(result.website_url)}}</a>
       </div>
       <div class="uk-width-1-5">
-        <button class="uk-icon-button uk-icon uk-button-secondary uk-margin-small-right" title="Edit" uk-icon="pencil" (click)="chooseAffiliation(i, 'edit')"></button>
-        <button class="uk-icon-button uk-icon uk-button-danger" title="Remove" uk-icon="minus" (click)="chooseAffiliation(i)"></button>
+        <button class="uk-icon-button uk-icon uk-button-secondary uk-margin-small-right uk-margin-small-bottom" title="Edit" uk-icon="pencil" (click)="chooseAffiliation(i, 'edit')"></button>
+        <button class="uk-icon-button uk-icon uk-button-danger uk-margin-small-bottom" title="Remove" uk-icon="minus" (click)="chooseAffiliation(i)"></button>
       </div>
     </li>
   </ul>
diff --git a/src/app/pages/curator/curator.component.html b/src/app/pages/curator/curator.component.html
index 0b7bf6b..71b9d8b 100644
--- a/src/app/pages/curator/curator.component.html
+++ b/src/app/pages/curator/curator.component.html
@@ -1,100 +1,108 @@
-<div class="uk-container uk-container-large">
-<div class="uk-padding uk-padding-remove-top uk-text-large uk-text-center uk-width">Edit Personal Info</div>
-<div class="uk-margin-large-bottom 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@m uk-width-1-1@s 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-center">
-          <div class="uk-flex uk-flex-center" uk-grid>
-            <div class="uk-width-1-1">
-              <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 *ngIf="photo !== 'assets/common-assets/curator-default.png'" class="uk-margin-small-left">
-              <button class="uk-button uk-button-danger" type="button" (click)="resetMessages(); removePhotoModal.open()">
-                Remove
-              </button>
-            </div>
-          </div>
-          <div class="uk-margin-small-top uk-text-warning">
-            Maximum photo resolution is 256x256 pixels.
-          </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="!newCurator && !curatorsEnabled" class="uk-alert uk-alert-warning" role="alert">
-            <span class="uk-margin-small-right uk-icon" uk-icon="warning">
-            </span>
-            Community's Curators page is disabled. Please enable it <a routerLink="/pages" routerLinkActive="router-link-active" [queryParams]="{communityId: communityId, type: 'other'}">here</a>.
-          </div>
-          <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@m uk-width-1-1@s">
-    <affiliations [curatorAffiliations]="true" [affiliations]="curator.affiliations"
-                  (affiliationsChange)="affiliationsChanged = $event"
-                  (resetCuratorMessages)="resetMessages();">
-    </affiliations>
-  </div>
-</div>
-<div class="uk-float-right" style="z-index: 100; bottom: 45px; position: fixed; right: 45px;">
+<ng-template #buttons>
   <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>
+</ng-template>
+<div class="uk-container uk-container-large">
+  <div class="uk-padding uk-padding-remove-top uk-text-large uk-text-center uk-width">Edit Personal Info</div>
+  <div class="uk-margin-large-bottom 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@m uk-width-1-1@s 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" uk-grid>
+              <div class="uk-width-1-3@l">
+                <img class="uk-border-circle curator-photo" src="{{photo}}" alt="Curator Photo">
+              </div>
+              <div class="uk-width-expand@l" uk-grid>
+                <div uk-form-custom class="uk-width-1-2">
+                  <input id="photo" type="file"  (change)="fileChangeEvent($event)" (input)="resetMessages(); change()"/>
+                  <button class="uk-button  portal-button" type="button" tabindex="-1">
+                    Upload
+                  </button>
+                </div>
+                <div *ngIf="photo !== 'assets/common-assets/curator-default.png'" class="uk-width-1-2">
+                  <button class="uk-button uk-button-danger" type="button" (click)="resetMessages(); removePhotoModal.open()">
+                    Remove
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div class="uk-margin-small-top uk-text-warning">
+              Maximum photo resolution is 256x256 pixels.
+            </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="!newCurator && !curatorsEnabled" class="uk-alert uk-alert-warning" role="alert">
+              <span class="uk-margin-small-right uk-icon" uk-icon="warning">
+              </span>
+              Community's Curators page is disabled. Please enable it <a routerLink="/pages" routerLinkActive="router-link-active" [queryParams]="{communityId: communityId, type: 'other'}">here</a>.
+            </div>
+            <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@m uk-width-1-1@s">
+      <affiliations [curatorAffiliations]="true" [affiliations]="curator.affiliations"
+                    (affiliationsChange)="affiliationsChanged = $event"
+                    (resetCuratorMessages)="resetMessages();">
+      </affiliations>
+    </div>
+  </div>
+  <div class="uk-float-right uk-visible@m" style="z-index: 100; bottom: 45px; position: fixed; right: 45px;">
+    <ng-container *ngTemplateOutlet="buttons"></ng-container>
+  </div>
+  <div class="uk-float-right uk-margin-bottom uk-hidden@m">
+    <ng-container *ngTemplateOutlet="buttons"></ng-container>
+  </div>
 </div>
 <modal-alert #removePhotoModal  (alertOutput)="removePhoto()">
   Your photo will be removed after you save your data. Are you sure you want to proceed?