[Trunk | Admin] :

1. angular.json: Update which schema is used according to angular7. 
2. app.routing: Add related organizations routing.
3. pages/affiliations/: Add affiliations folder - affiliations files used by 'Related Organizations' page and 'Personal Info' page (curator).
4. curator.component: Use affiliations.component & hide messages when a change happens.


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

angular.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {

src/app/app.component.ts

@@ -188,8 +188,8 @@ export class AppComponent implements OnInit{
           items: []
         });
         community.items.push({
-          rootItem: new MenuItem('communityAffiliations', 'Community Affiliations', '/affiliations',
+          rootItem: new MenuItem('communityAffiliations', 'Community Organizations', '/organizations',
-            '/affiliations', false, [], [], {communityId: this.communityId}),
+            '/organizations', false, [], [], {communityId: this.communityId}),
           items: []
         });
         /*community.items.push({

src/app/app.routing.ts

@@ -33,6 +33,11 @@ const appRoutes: Routes = [
         loadChildren: './pages/curator/curator.module#CuratorModule',
         resolve: { envSpecific: EnvironmentSpecificResolver  }
     },
+    {
+      path: 'organizations',
+      loadChildren: './pages/affiliations/affiliations.module#AffiliationsModule',
+      resolve: { envSpecific: EnvironmentSpecificResolver  }
+    },
     {
         path: 'communities',
         loadChildren: './pages/community/communities.module#CommunitiesModule',

src/app/pages/affiliations/affiliations-routing.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import {RouterModule} from '@angular/router';
+import {AffiliationsComponent} from './affiliations.component';
+import {IsCommunity} from '../../openaireLibrary/connect/communityGuard/isCommunity.guard';
+import {ConnectAdminLoginGuard} from '../../openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      { path: '', canActivate: [IsCommunity, ConnectAdminLoginGuard], component: AffiliationsComponent}
+    ])
+  ]
+})
+export class AffiliationsRoutingModule { }

src/app/pages/affiliations/affiliations.component.html

@@ -0,0 +1,119 @@
+<ng-template #card let-organization="organization">
+  <div class="uk-card-media-top affiliation-logo uk-padding-small">
+    <img *ngIf= "organization.logo_url != null && organization.logo_url != '' " class="uk-text-center"
+         src="{{organization.logo_url}}" alt="{{(organization.name)?organization.name:''}} logo" width="80" height="80">
+    <span  *ngIf= "organization.logo_url == null || organization.logo_url == '' "class="uk-icon uk-padding-small">
+            <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 20 20" icon="image" ratio="2.5"><circle cx="16.1" cy="6.1" r="1.1"></circle><rect fill="none" stroke="#000" x="0.5" y="2.5" width="19" height="15"></rect><polyline fill="none" stroke="#000" stroke-width="1.01" points="4,13 8,9 13,14"></polyline><polyline fill="none" stroke="#000" stroke-width="1.01" points="11,12 12.5,10.5 16,14"></polyline></svg>
+          </span>
+  </div>
+</ng-template>
+
+<ng-template #affiliations_list>
+  <div class="uk-margin uk-flex uk-flex-middle" uk-grid>
+    <h3 class="uk-h3 uk-width-2-5">
+      <span *ngIf="curatorAffiliations">My Affiliations</span>
+      <span *ngIf="!curatorAffiliations">Related Organizations</span>
+    </h3>
+    <div class="uk-width-expand">
+      <button class="uk-button portal-button uk-align-right" (click)="initAffiliation()">
+        <span uk-icon="plus"></span>
+        Add new Organization
+      </button>
+    </div>
+  </div>
+
+  <ul [class]="'uk-list uk-list-divider uk-margin' + (curatorAffiliations ? ' uk-height-max-large uk-overflow-auto' : '')"
+      uk-height-match="target: > li > div > .uk-card; row: false">
+    <li *ngFor="let result of affiliations; let i=index"
+        class="uk-animation-fade uk-height-small uk-flex uk-flex-middle" uk-grid>
+      <div class="uk-width-1-5">
+        <a *ngIf="result.website_url" target="_blank" [href]="result.website_url"
+           class="affiliation-content uk-card uk-card-small uk-card-default uk-flex uk-flex-middle uk-flex-center">
+          <ng-container *ngTemplateOutlet="card; context: { organization: result, fullView: true}"></ng-container>
+        </a>
+        <span *ngIf="!result.website_url"
+              class="affiliation-content uk-card uk-card-small uk-card-default uk-flex uk-flex-middle uk-flex-center">
+              <ng-container *ngTemplateOutlet="card; context: { organization: result, fullView: true}"></ng-container>
+            </span>
+      </div>
+
+      <div class="uk-width-3-5">
+        <h3 class="uk-h3" title="{{result.name}}">{{_format(result.name)}}</h3>
+        <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>
+      </div>
+    </li>
+  </ul>
+</ng-template>
+
+<div *ngIf="!curatorAffiliations">
+<!--  <div class="uk-padding uk-padding-remove-top uk-text-large uk-text-center uk-width">Edit Community Affiliations</div>-->
+  <div class="uk-flex" uk-grid>
+    <div *ngIf="showLoading" class="uk-align-center uk-animation-fade uk-width-1-2" role="alert">
+      <span class="loading-gif uk-align-center"></span>
+    </div>
+    <div *ngIf="!showLoading" class="uk-align-center uk-width-1-2">
+      <div *ngIf="message" [class]="'uk-animation-fade uk-alert uk-alert-' + messageType" role="alert">
+        {{message}}
+      </div>
+      <ng-container *ngTemplateOutlet="affiliations_list;"></ng-container>
+    </div>
+  </div>
+</div>
+<div *ngIf="curatorAffiliations">
+  <ng-container *ngTemplateOutlet="affiliations_list;"></ng-container>
+</div>
+
+<modal-alert #affiliationModal [okDisabled]="isEmptyAffiliation()" (alertOutput)="addAffiliation()">
+  <table class="uk-align-center">
+    <tbody class="uk-table">
+    <tr>
+      <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-medium@l uk-width-medium@m" id="afname"
+                [(ngModel)]="affiliation.name" required>
+      </td>
+    </tr>
+    <tr>
+      <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" id="logourl"
+                [(ngModel)]="affiliation.logo_url" required>
+      </td>
+    </tr>
+    <tr>
+      <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" id="websiteurl"
+                [(ngModel)]="affiliation.website_url" required>
+      </td>
+    </tr>
+    </tbody>
+  </table>
+</modal-alert>
+<modal-alert #removeAffiliationModal (alertOutput)="removeAffiliation()">
+</modal-alert>

src/app/pages/affiliations/affiliations.component.ts

@@ -0,0 +1,279 @@
+import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+
+import {EnvProperties} from '../../openaireLibrary/utils/properties/env-properties';
+
+import {Session} from '../../openaireLibrary/login/utils/helper.class';
+import {LoginErrorCodes} from '../../openaireLibrary/login/utils/guardHelper.class';
+import {Affiliation} from '../../openaireLibrary/utils/entities/CuratorInfo';
+import {HelperFunctions} from '../../openaireLibrary/utils/HelperFunctions.class';
+import {AlertModal} from '../../openaireLibrary/utils/modal/alert';
+import {UtilitiesService} from '../../openaireLibrary/services/utilities.service';
+import {AffiliationService} from "../../openaireLibrary/connect/affiliations/affiliation.service";
+
+@Component({
+  selector: 'affiliations',
+  templateUrl: './affiliations.component.html',
+})
+
+export class AffiliationsComponent implements OnInit {
+
+  @ViewChild('affiliationModal') affiliationModal: AlertModal;
+  @ViewChild('removeAffiliationModal') removeAffiliationModal: AlertModal;
+  public showLoading = false;
+  public message = '';
+  public messageType = '';
+
+  public affiliation: Affiliation = new Affiliation();
+  public properties: EnvProperties = null;
+
+  private index = 0;
+  private maxCharacters = 70;
+
+  @Input() hasChanged: boolean = false;
+  @Input() curatorAffiliations: boolean = false;
+  @Input() public affiliations: Affiliation[] = [];
+  @Output() affiliationsChange: EventEmitter<boolean> = new EventEmitter();
+  @Output() resetCuratorMessages: EventEmitter<boolean> = new EventEmitter();
+  public communityId: string;
+
+  constructor(private element: ElementRef,
+              private route: ActivatedRoute,
+              private _router: Router,
+              private affiliationService: AffiliationService,
+              private utilitiesService: UtilitiesService) {
+  }
+
+
+  ngOnInit() {
+    this.route.data.subscribe((data: { envSpecific: EnvProperties }) => {
+      this.properties = data.envSpecific;
+      if (!Session.isLoggedIn()) {
+        this._router.navigate(['/user-info'], {
+          queryParams: {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}
+        });
+      } else {
+        this.showLoading = true;
+        this.message = '';
+
+        this.route.queryParams.subscribe(
+          communityId => {
+            this.communityId = communityId['communityId'];
+
+            if(!this.curatorAffiliations) {
+              this.getAffiliations();
+            }
+          }
+        );
+      }
+    });
+  }
+
+  getAffiliations() {
+    this.affiliationService.initAffiliations(this.properties, this.properties.communityAPI + this.communityId + "/organizations");
+    this.affiliationService.affiliations.subscribe(
+      affiliations => {
+        this.affiliations = affiliations;
+        this.showLoading = false;
+      },
+      error => {
+        console.error("Affiliations Component: Error getting affiliations for community with id: "+this.communityId, error);
+        this.showLoading = false;
+      }
+    );
+  }
+
+  initAffiliation(affiliation: Affiliation = null) {
+    this.resetMessages();
+    this.affiliation = new Affiliation();
+    if (affiliation) {
+      this.affiliation.name = affiliation.name;
+      this.affiliation.logo_url = affiliation.logo_url;
+      this.affiliation.website_url = affiliation.website_url;
+      if(!this.curatorAffiliations) {
+        this.affiliation.communityId = affiliation.communityId;
+        this.affiliation.id = affiliation.id;
+      }
+      if(this.curatorAffiliations) {
+        this.affiliationModal.okButtonText = 'OK';
+      } else {
+        this.affiliationModal.okButtonText = 'Save Affiliation';
+      }
+    } else {
+      this.index = -1;
+      this.affiliation.name = '';
+      this.affiliation.logo_url = '';
+      this.affiliation.website_url = '';
+      if(!this.curatorAffiliations) {
+        this.affiliation.communityId = this.communityId;
+      }
+    }
+    this.affiliationModal.okButtonLeft = false;
+    if(this.curatorAffiliations) {
+      this.affiliationModal.okButtonText = 'OK';
+    } else {
+      this.affiliationModal.okButtonText = 'Save Affiliation';
+    }
+    this.affiliationModal.open();
+  }
+
+  public chooseAffiliation(index: number, action: string = 'delete') {
+    this.resetMessages();
+    this.index = index;
+    const affiliation: Affiliation = this.affiliations[index];
+    if (action === 'delete') {
+      this.removeAffiliationModal.message = 'Do you want to remove ' +
+        affiliation.name +  ' from your Affiliations?';
+      this.removeAffiliationModal.okButtonText = 'Yes';
+      this.removeAffiliationModal.cancelButtonText = 'No';
+      this.removeAffiliationModal.open();
+    } else if (action === 'edit') {
+      this.initAffiliation(affiliation);
+    }
+  }
+
+  updateCommunityAffiliations(index: number) {
+    if (!Session.isLoggedIn()) {
+      this._router.navigate(['/user-info'], {
+        queryParams:
+          {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}
+      });
+    } else {
+      HelperFunctions.scroll();
+
+      console.info(this.affiliation);
+
+        this.showLoading = true;
+
+        this.affiliationService.updateAffiliation(this.properties.communityAPI + this.communityId + '/organizations',
+          this.affiliation).subscribe((affiliation) => {
+            if (affiliation) {
+              if (index === -1) {
+                this.affiliations.push(affiliation);
+              } else {
+                this.affiliations[index] = affiliation;
+              }
+              if(this.affiliation.id) {
+                this.handleUpdateSuccess('Your organization has been updated successfully!');
+              } else {
+                this.handleUpdateSuccess('Your organization has been saved successfully!');
+              }
+            }
+          },
+          error => {
+            if(this.affiliation.id) {
+              this.handleUpdateError('Your organization could not be updated. Try again later!', error);
+            } else {
+              this.handleUpdateError('Organization could not be saved. Try again later!', error);
+            }
+          });
+    }
+  }
+
+  addAffiliation() {
+    console.info(this.affiliation);
+    if (!this.isEmptyAffiliation()) {
+
+      if(!HelperFunctions.isTiny(this.affiliation.logo_url)) {
+        this.utilitiesService.getTiny(this.properties.tinyUrl + this.affiliation.logo_url).subscribe((logo_url)=> {
+          this.affiliation.logo_url = logo_url;
+
+          if(!HelperFunctions.isTiny(this.affiliation.website_url)) {
+            this.utilitiesService.getTiny(this.properties.tinyUrl + this.affiliation.website_url).subscribe((website_url) => {
+              this.affiliation.website_url = website_url;
+              if (!this.curatorAffiliations) {
+                this.updateCommunityAffiliations(this.index);
+              } else {
+                if (this.index === -1) {
+                  this.affiliations.push(this.affiliation);
+                } else {
+                  this.affiliations[this.index] = this.affiliation;
+                }
+              }
+              this.change();
+            });
+          }
+        })
+      } else {
+        if(!this.curatorAffiliations) {
+          this.updateCommunityAffiliations(this.index);
+        } else {
+          if (this.index === -1) {
+            this.affiliations.push(this.affiliation);
+          } else {
+            this.affiliations[this.index] = this.affiliation;
+          }
+        }
+        this.change();
+      }
+    }
+  }
+
+  removeAffiliation() {
+    console.info(this.affiliations[this.index]);
+    console.info(this.affiliation);
+    if(!this.curatorAffiliations) {
+      HelperFunctions.scroll();
+
+      this.showLoading = true;
+      this.affiliationService.deleteAffiliation(this.properties.communityAPI + this.communityId + '/organizations',
+        this.affiliations[this.index].id).subscribe((deleteOK) => {
+          this.affiliations.splice(this.index, 1);
+          this.handleUpdateSuccess('Organization has been deleted');
+        },
+        error => {
+          this.handleUpdateError('Organization could not be deleted. Try again later!', error);
+        }
+      );
+    } else {
+      this.affiliations.splice(this.index, 1);
+      this.change();
+    }
+  }
+
+
+  private change() {
+    this.hasChanged = true;
+    if(this.curatorAffiliations) {
+      this.affiliationsChange.emit(this.hasChanged);
+    }
+  }
+
+  private resetMessages() {
+    this.message = '';
+    if(this.curatorAffiliations) {
+      this.resetCuratorMessages.emit(true);
+    }
+  }
+
+  handleUpdateError(message: string, error) {
+    this.resetMessages();
+    this.message = message;
+    this.messageType = "warning";
+    console.log('Server responded: ', error);
+
+    this.showLoading = false;
+  }
+
+  handleUpdateSuccess(message) {
+    this.resetMessages();
+    this.message = message;
+    this.messageType = "success";
+    this.showLoading = false;
+  }
+
+  isEmptyAffiliation(): boolean {
+    return ((!this.affiliation.name || this.affiliation.name === '') ||
+      (!this.affiliation.logo_url || this.affiliation.logo_url === '') ||
+      (!this.affiliation.website_url || this.affiliation.website_url === ''));
+  }
+
+  _format(name: string){
+    if(name) {
+      return (((name).length > this.maxCharacters) ? (name.substring(0, (this.maxCharacters - ('...').length)) + '...') : name);
+    } else {
+      return null;
+    }
+  }
+
+}

src/app/pages/affiliations/affiliations.module.ts

@@ -0,0 +1,31 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {FormsModule} from '@angular/forms';
+import {RouterModule} from '@angular/router';
+
+import {AffiliationsComponent} from './affiliations.component';
+
+import {AffiliationsRoutingModule} from './affiliations-routing.module';
+import {IsCommunity} from '../../openaireLibrary/connect/communityGuard/isCommunity.guard';
+import {ConnectAdminLoginGuard} from '../../openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard';
+import {AffiliationService} from '../../openaireLibrary/connect/affiliations/affiliation.service';
+import {AlertModalModule} from '../../openaireLibrary/utils/modal/alertModal.module';
+import {UtilitiesService} from '../../openaireLibrary/services/utilities.service';
+
+@NgModule({
+  imports: [
+    AffiliationsRoutingModule, CommonModule, FormsModule, RouterModule,
+    AlertModalModule
+  ],
+  declarations: [
+    AffiliationsComponent
+  ],
+  providers: [
+    AffiliationService, UtilitiesService, IsCommunity, ConnectAdminLoginGuard
+  ],
+  exports: [
+    AffiliationsComponent
+  ]
+})
+
+export class AffiliationsModule { }

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

@@ -23,7 +23,7 @@
           <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)="onNameChange()" #name="ngModel" required>
+                  [(ngModel)]="curator.name" (input)="resetMessages(); onNameChange()" #name="ngModel" required>
         </td>
       </tr>
       <tr *ngIf="photo != null">
@@ -34,13 +34,13 @@
               <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)="change()"/>
+              <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)="removePhotoModal.open()">
+              <button class="uk-button uk-button-danger" type="button" (click)="resetMessages(); removePhotoModal.open()">
                 Remove
               </button>
             </div>
@@ -54,7 +54,7 @@
                     class="form-control uk-textarea" rows="6"
                     id="bio"
                     [(ngModel)]="curator.bio"
-                    (input)="change()">
+                    (input)="resetMessages(); change()">
           </textarea>
         </td>
       </tr>
@@ -75,88 +75,17 @@
     </tbody>
   </table>
   <div *ngIf="curatorId != null && curator != null && !showLoading" class="uk-width-1-2">
-    <div class="uk-margin uk-flex uk-flex-middle" uk-grid>
+    <affiliations [curatorAffiliations]="true" [affiliations]="curator.affiliations"
-      <h3 class="uk-h3 uk-width-2-5">My Affiliations
+                  (affiliationsChange)="affiliationsChanged = $event"
-      </h3>
+                  (resetCuratorMessages)="resetMessages();">
-      <div class="uk-width-expand">
+    </affiliations>
-        <button class="uk-button portal-button uk-align-right" (click)="initAffiliation()">
-          <span uk-icon="plus"></span>
-          Add new Affiliation
-        </button>
-      </div>
-    </div>
-    <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="{{_format(result.name)}}">
-        </div>
-        <div class="uk-width-3-5">
-          <h3 class="uk-h3" title="{{result.name}}">{{_format(result.name)}}</h3>
-          <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>
-          <button class="uk-icon-button uk-icon uk-button-danger" title="Remove" uk-icon="minus" (click)="chooseAffiliation(i)"></button>
-        </div>
-      </li>
-    </ul>
   </div>
 </div>
 <div class="uk-float-right">
-  <button class="uk-button uk-margin-small-right" (click)="resetForm()">Cancel</button>
+  <button class="uk-button uk-margin-small-right" (click)="resetMessages(); resetForm()">Cancel</button>
-  <button *ngIf="enabled && hasChanged" class="uk-button uk-button-primary" (click)="updateCurator()">Save</button>
+  <button *ngIf="enabled && (hasChanged || affiliationsChanged)" class="uk-button uk-button-primary" (click)="resetMessages(); updateCurator()">Save</button>
-  <button *ngIf="!enabled || !hasChanged" class="uk-button uk-button-default" disabled>Save</button>
+  <button *ngIf="!enabled || (!hasChanged && !affiliationsChanged)" class="uk-button uk-button-default" disabled>Save</button>
 </div>
-<modal-alert #affiliationModal [okDisabled]="isEmptyAffiliation()" (alertOutput)="addAffiliation()">
-    <table class="uk-align-center">
-      <tbody class="uk-table">
-      <tr>
-        <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-medium@l uk-width-medium@m" id="afname"
-                  [(ngModel)]="affiliation.name" required>
-        </td>
-      </tr>
-      <tr>
-        <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" id="logourl"
-                  [(ngModel)]="affiliation.logo_url" required>
-        </td>
-      </tr>
-      <tr>
-        <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" id="websiteurl"
-                  [(ngModel)]="affiliation.website_url" required>
-        </td>
-      </tr>
-      </tbody>
-    </table>
-</modal-alert>
-<modal-alert #removeAffiliationModal (alertOutput)="removeAffiliation()">
-</modal-alert>
 <modal-alert #removePhotoModal  (alertOutput)="removePhoto()">
   Your photo will be removed after save your data. Are you sure you want to proceed?
 </modal-alert>

src/app/pages/curator/curator.component.ts

@@ -8,7 +8,6 @@ import {LoginErrorCodes} from '../../openaireLibrary/login/utils/guardHelper.cla
 import {CuratorService} from '../../openaireLibrary/connect/curators/curator.service';
 import {Affiliation, Curator} from '../../openaireLibrary/utils/entities/CuratorInfo';
 import {HelperFunctions} from '../../openaireLibrary/utils/HelperFunctions.class';
-import {AlertModal} from '../../openaireLibrary/utils/modal/alert';
 import {UtilitiesService} from '../../openaireLibrary/services/utilities.service';
 
 @Component({
@@ -18,23 +17,19 @@ import {UtilitiesService} from '../../openaireLibrary/services/utilities.service
 
 export class CuratorComponent implements OnInit {
 
-  @ViewChild('affiliationModal') affiliationModal: AlertModal;
-  @ViewChild('removeAffiliationModal') removeAffiliationModal: AlertModal;
   public showLoading = true;
   public updateErrorMessage = '';
   public successfulSaveMessage = '';
 
+  public affiliationsChanged = false;
   public hasChanged = false;
   public curatorId = null;
   public curator: Curator = null;
-  public affiliation: Affiliation = new Affiliation();
   public photo: any = null;
   public properties: EnvProperties = null;
 
   private file: File = null;
   private enabled = true;
-  private index = 0;
-  private maxCharacters = 70;
   private deletePhoto =false;
 
   constructor(private element: ElementRef,
@@ -89,23 +84,6 @@ export class CuratorComponent implements OnInit {
     });
   }
 
-  initAffiliation(affiliation: Affiliation = null) {
-    this.affiliation = new Affiliation();
-    if (affiliation) {
-      this.affiliation.name = affiliation.name;
-      this.affiliation.logo_url = affiliation.logo_url;
-      this.affiliation.website_url = affiliation.website_url;
-      this.affiliationModal.okButtonText = 'Edit Affiliation';
-    } else {
-      this.index = -1;
-      this.affiliation.name = '';
-      this.affiliation.logo_url = '';
-      this.affiliation.website_url = '';
-    }
-    this.affiliationModal.okButtonLeft = false;
-    this.affiliationModal.open();
-  }
-
   public resetForm() {
     if (!Session.isLoggedIn()) {
       this._router.navigate(['/user-info'], {
@@ -152,10 +130,12 @@ export class CuratorComponent implements OnInit {
 
   private change() {
     this.hasChanged = true;
+    this.affiliationsChanged = true;
   }
 
   private resetChange() {
     this.hasChanged = false;
+    this.affiliationsChanged = false;
   }
 
   private resetMessages() {
@@ -163,20 +143,6 @@ export class CuratorComponent implements OnInit {
     this.updateErrorMessage = '';
   }
 
-  public chooseAffiliation(index: number, action: string = 'delete') {
-    this.index = index;
-    const affiliation: Affiliation = this.curator.affiliations[index];
-    if (action === 'delete') {
-      this.removeAffiliationModal.message = 'Do you want to remove ' +
-        affiliation.name +  ' from your Affiliations?';
-      this.removeAffiliationModal.okButtonText = 'Yes';
-      this.removeAffiliationModal.cancelButtonText = 'No';
-      this.removeAffiliationModal.open();
-    } else if (action === 'edit') {
-      this.initAffiliation(affiliation);
-    }
-  }
-
   handleUpdateError(message: string, error) {
     this.resetMessages();
     this.updateErrorMessage = message;
@@ -220,7 +186,7 @@ export class CuratorComponent implements OnInit {
           {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}
       });
     } else {
-      if (this.hasChanged && this.curator && this.curator.name && this.curator.name !== '') {
+      if ((this.hasChanged || this.affiliationsChanged) && this.curator && this.curator.name && this.curator.name !== '') {
         this.showLoading = true;
         if (this.file) {
           this.utilitiesService.uploadPhoto(this.properties.uploadService + '/' + this.curator._id, this.file).subscribe((res) => {
@@ -264,40 +230,6 @@ export class CuratorComponent implements OnInit {
       }
   }
 
-  isEmptyAffiliation(): boolean {
-    return ((!this.affiliation.name || this.affiliation.name === '') ||
-      (!this.affiliation.logo_url || this.affiliation.logo_url === '') ||
-      (!this.affiliation.website_url || this.affiliation.website_url === ''));
-  }
-
-  addAffiliation() {
-    if (!this.isEmptyAffiliation()) {
-      if(!HelperFunctions.isTiny(this.affiliation.logo_url)) {
-        this.utilitiesService.getTiny(this.properties.tinyUrl + this.affiliation.logo_url).subscribe((res)=> {
-          this.affiliation.logo_url = res;
-          if (this.index === -1) {
-            this.curator.affiliations.push(this.affiliation);
-          } else {
-            this.curator.affiliations[this.index] = this.affiliation;
-          }
-          this.change();
-        })
-      } else {
-        if (this.index === -1) {
-          this.curator.affiliations.push(this.affiliation);
-        } else {
-          this.curator.affiliations[this.index] = this.affiliation;
-        }
-        this.change();
-      }
-    }
-  }
-
-  removeAffiliation() {
-    this.curator.affiliations.splice(this.index, 1);
-    this.change();
-  }
-
   onNameChange() {
     this.hasChanged = true;
     if (!this.curator.name || this.curator.name === '') {
@@ -307,14 +239,6 @@ export class CuratorComponent implements OnInit {
     }
   }
 
-  _format(name: string){
-    if(name) {
-      return (((name).length > this.maxCharacters) ? (name.substring(0, (this.maxCharacters - ('...').length)) + '...') : name);
-    } else {
-      return null;
-    }
-  }
-
   removePhoto() {
     this.deletePhoto = true;
     this.hasChanged = true;

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

@@ -11,11 +11,12 @@ import {ConnectAdminLoginGuard} from '../../openaireLibrary/connect/communityGua
 import {CuratorService} from '../../openaireLibrary/connect/curators/curator.service';
 import {AlertModalModule} from '../../openaireLibrary/utils/modal/alertModal.module';
 import {UtilitiesService} from '../../openaireLibrary/services/utilities.service';
+import {AffiliationsModule} from "../affiliations/affiliations.module";
 
 @NgModule({
   imports: [
     CuratorRoutingModule, CommonModule, FormsModule, RouterModule,
-    AlertModalModule
+    AlertModalModule, AffiliationsModule
   ],
   declarations: [
     CuratorComponent