[Trunk|Admin]: 1. Add on sidebar menu Community Affiliations under Community Item, also personal info has been moved under Users Items. 2. Delete Sticky Button. 3. Fix unresponsive behaviour on Edit Personal Info page on medium screens.

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-admin-portal/trunk@55994 d315682c-612b-4755-9ff5-7f18f6832af3

src/app/app.component.ts

@@ -58,7 +58,7 @@ export class AppComponent implements OnInit{
           localStorage.setItem('isCommunityManager', Session.isCommunityCurator() + '');
 
           this.isPortalAdministrator = Session.isPortalAdministrator();
-          /*this.isPortalAdministrator = true;*/
+          this.isPortalAdministrator = true;
         }
         this._communitiesService.updateCommunities(this.properties, this.properties.communityAPI + 'communities');
 
@@ -135,8 +135,6 @@ export class AppComponent implements OnInit{
           );
         });
       });
-
-
   }
 
   private buildSideBar() {
@@ -168,12 +166,6 @@ export class AppComponent implements OnInit{
         items: [],
         ukIcon: 'home'
       });
-      this.sideMenuItems.push({
-        rootItem: new MenuItem('personalInfo', 'Personal Info', '/personal',
-          '/personal', false, [], [], {communityId: this.communityId}),
-        items: [],
-        ukIcon: 'user'
-      });
       if (this.isPortalAdministrator) {
         const adminTools: SideMenuItem = {
           rootItem: new MenuItem('adminTools', 'Admin Tools', '/communities',
@@ -195,6 +187,11 @@ export class AppComponent implements OnInit{
             '/community-edit-form', false, [], [], {communityId: this.communityId}),
           items: []
         });
+        community.items.push({
+          rootItem: new MenuItem('communityAffiliations', 'Community Affiliations', '/affiliations',
+            '/affiliations', false, [], [], {communityId: this.communityId}),
+          items: []
+        });
         /*community.items.push({
           rootItem: new MenuItem('communityLayout', 'Community Layout', '/community-layout',
             '/community-layout', false, [], [], {communityId: this.communityId}),
@@ -309,6 +306,11 @@ export class AppComponent implements OnInit{
           items: [],
           ukIcon: 'user'
         };
+        users.items.push( {
+          rootItem: new MenuItem('personalInfo', 'Personal Info', '/personal',
+            '/personal', false, [], [], {communityId: this.communityId}),
+          items: []
+        })
         users.items.push({
           rootItem: new MenuItem('subscribers', 'Subscribers', '/manage-subscribers',
             '/manage-subscribers', false, [], [], {communityId: this.communityId}),

src/app/pages/curator/curator.component.html

@@ -19,10 +19,10 @@
           </span>
           :
         </td>
-        <td class="uk-text-left">
+        <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 uk-width-large@l uk-width-medium@s" id="name"
+                  class="form-control uk-input" id="name"
                   [(ngModel)]="curator.name" (input)="onNameChange()" #name="ngModel" required>
         </td>
       </tr>
@@ -46,7 +46,7 @@
         <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 uk-width-large@l uk-width-medium@s" rows="6"
+                    class="form-control uk-textarea" rows="6"
                     id="bio"
                     [(ngModel)]="curator.bio"
                     (input)="change()">
@@ -73,7 +73,7 @@
     <div class="uk-margin uk-flex uk-flex-middle" uk-grid>
       <h3 class="uk-h3 uk-width-2-5">My Affiliations
       </h3>
-      <div class="uk-width-expand ">
+      <div class="uk-width-expand">
         <button class="uk-button portal-button uk-align-right" (click)="initAffiliation()">
           <span uk-icon="plus"></span>
           Add new Affiliation
@@ -83,11 +83,11 @@
     <ul class="uk-list uk-list-divider uk-margin uk-height-max-large uk-overflow-auto">
       <li *ngFor="let result of curator.affiliations; let i=index" class="uk-animation-fade uk-margin-auto uk-height-small uk-flex uk-flex-middle" uk-grid>
         <div class="uk-width-1-5 uk-card uk-card-default affiliation-card uk-card-body uk-inline">
-          <img class="uk-padding uk-position-center" src="{{result.logo_url}}" width="80" height="80" alt="{{result.name}}">
+          <img class="uk-padding uk-position-center" src="{{result.logo_url}}" width="80" height="80" alt="{{_format(result.name)}}">
         </div>
         <div class="uk-width-3-5">
           <h3 class="uk-h3" title="{{result.name}}">{{_format(result.name)}}</h3>
-          <a href="{{result.logo_url}}" title="{{result.website_url}}" class="uk-margin-auto-top" target="_blank">{{_format(result.website_url)}}</a>
+          <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 uk-card">
           <button class="uk-icon-button uk-icon uk-button-secondary uk-margin-small-right" title="Edit" uk-icon="pencil" (click)="chooseAffiliation(i, 'edit')"></button>
@@ -97,32 +97,54 @@
     </ul>
   </div>
 </div>
-<sticky [enabled]="hasChanged && !!enabled" (save)="updateCurator()" (cancel)="resetForm()"></sticky>
+<div class="uk-float-right">
+  <button class="uk-button" (click)="resetForm()">Cancel</button>
+  <button *ngIf="enabled" class="uk-button uk-button-primary" (click)="updateCurator()">Save</button>
+  <button *ngIf="!enabled" class="uk-button uk-button-default" disabled>Save</button>
+</div>
 <modal-alert #affiliationModal [okDisabled]="isEmptyAffiliation()" (alertOutput)="addAffiliation()">
-    <table>
+    <table class="uk-align-center">
-      <tbody class="uk-table uk-align-center">
+      <tbody class="uk-table">
       <tr>
-        <td for="name" class="uk-text-bold uk-text-right">Name:</td>
+        <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">
           <input  type="text"
-                  class="form-control uk-input uk-width-large@l uk-width-medium@s" id="afname"
+                  class="form-control uk-input uk-width-medium@l uk-width-medium@m" id="afname"
-                  [(ngModel)]="affiliation.name" >
+                  [(ngModel)]="affiliation.name" required>
         </td>
       </tr>
       <tr>
-        <td for="name" class="uk-text-bold uk-text-right">Logo Url:</td>
+        <td for="name" class="uk-text-bold uk-text-right">
+          Logo Url
+          <span class="uk-text-danger uk-text-bold">
+            *
+          </span>
+          :
+        </td>
         <td class="uk-text-left">
           <input  type="text"
-                  class="form-control uk-input uk-width-large@l uk-width-medium@s" id="logourl"
+                  class="form-control uk-input" id="logourl"
-                  [(ngModel)]="affiliation.logo_url">
+                  [(ngModel)]="affiliation.logo_url" required>
         </td>
       </tr>
       <tr>
-        <td for="name" class="uk-text-bold uk-text-right">Website Url:</td>
+        <td for="name" class="uk-text-bold uk-text-right">
+          Website Url
+          <span class="uk-text-danger uk-text-bold">
+            *
+          </span>
+          :
+        </td>
         <td class="uk-text-left">
           <input  type="text"
-                  class="form-control uk-input uk-width-large@l uk-width-medium@s" id="websiteurl"
+                  class="form-control uk-input" id="websiteurl"
-                  [(ngModel)]="affiliation.website_url">
+                  [(ngModel)]="affiliation.website_url" required>
         </td>
       </tr>
       </tbody>

src/app/pages/curator/curator.module.ts

@@ -10,13 +10,12 @@ import {IsCommunity} from '../../openaireLibrary/connect/communityGuard/isCommun
 import {ConnectAdminLoginGuard} from '../../openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard';
 import {CuratorService} from '../../openaireLibrary/connect/curators/curator.service';
 import {AlertModalModule} from '../../openaireLibrary/utils/modal/alertModal.module';
-import {StickyModule} from '../../utils/stickyButton/sticky.module';
 import {CuratorPhotoService} from '../../openaireLibrary/services/curatorPhoto.service';
 
 @NgModule({
   imports: [
     CuratorRoutingModule, CommonModule, FormsModule, RouterModule,
-    AlertModalModule, StickyModule
+    AlertModalModule
   ],
   declarations: [
     CuratorComponent

src/app/utils/stickyButton/sticky.component.ts

@@ -1,30 +0,0 @@
-import {Component, EventEmitter, Input, Output} from '@angular/core';
-
-@Component({
-    selector: 'sticky',
-    template: `
-      <div class="uk-float-right" style="z-index: 100; bottom: 10%; position: fixed; right: 2%">
-        <button class="uk-button" (click)="onCancel()">Cancel</button>
-        <button *ngIf="enabled" class="uk-button uk-button-primary" (click)="onSave()">Save</button>
-        <button *ngIf="!enabled" class="uk-button uk-button-default" disabled>Save</button>
-      </div>
-    `
-})
-
-export class StickyComponent {
-  @Output() public save: EventEmitter<any> = new EventEmitter();
-  @Output() public cancel: EventEmitter<any> = new EventEmitter();
-
-  @Input() public enabled: boolean;
-
-  constructor () {}
-
-  public onSave() {
-    this.save.emit(true);
-  }
-
-  public onCancel() {
-    this.cancel.emit(true);
-  }
-
-}

src/app/utils/stickyButton/sticky.module.ts

@@ -1,19 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule} from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import {StickyComponent} from './sticky.component';
-
-@NgModule({
-    imports: [
-      CommonModule,
-      FormsModule
-    ],
-    declarations: [
-        StickyComponent
-    ],
-    exports: [
-      StickyComponent
-    ]
-})
-
-export class StickyModule { }