D-Net

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';

import { formErrorRequiredFields, formErrorWasntSaved, formSubmitting, formSuccessUpdatedRepo, loadingRepoError,

         loadingRepoMessage, noServiceMessage } from '../../../domain/shared-messages';

import { RepositoryService } from '../../../services/repository.service';

import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';

import { Country, Repository, Timezone, Typology } from '../../../domain/typeScriptClasses';

import { Description, softwarePlatformDesc, platformNameDesc, officialNameDesc, repoDescriptionDesc, countryDesc,

         longtitudeDesc, latitudeDesc, websiteUrlDesc, institutionNameDesc, englishNameDesc, logoUrlDesc, timezoneDesc,

         datasourceTypeDesc, adminEmailDesc, lissnDesc, eissnDesc, issnDesc } from '../../../domain/oa-description';

import { AuthenticationService } from '../../../services/authentication.service';

import {SharedService} from "../../../services/shared.service";

@Component ({

  selector: 'datasource-update-form',

  templateUrl: './datasource-update-form.component.html'

})

export class DatasourceUpdateFormComponent implements OnInit {

  errorMessage: string;

  successMessage: string;

  loadingMessage: string;

  typologies: Typology[] = [];

  timezones: Timezone[] = [];

  countries: Country[] = [];

  datasourceClasses: Map<string, string> = new Map<string, string>();

  classCodes: string[] = [];

  /*  in sources/register (in literature or data mode) the updated repository is emitted */

  @Output() emittedInfo: EventEmitter<Repository> = new EventEmitter();

  @Input() selectedRepo: Repository;

  @Input() showButton: boolean;

  repoId: string;

  formSubmitted = false;

  updateGroup: FormGroup;

  readonly updateGroupDefinition = {

    softwarePlatform : '',

    platformName : '',

    officialName :  ['', Validators.required],

    issn : ['', [Validators.pattern('^\\d{4}-\\d{3}[\\dxX]$')] ],

    eissn : ['', Validators.pattern('^\\d{4}-\\d{3}[\\dxX]$') ],

    lissn : ['', Validators.pattern('^\\d{4}-\\d{3}[\\dxX]$') ],

    repoDescription : ['', Validators.required],

    country : '',

    longtitude : '',

    latitude : '',

    websiteUrl : [''],

    institutionName :  ['', Validators.required],

    englishName: ['', Validators.required],

    logoUrl: ['', Validators.pattern('^(http:\\/\\/www\\.|https:\\/\\/www\\.|http:\\/\\/|https:\\/\\/)?[a-z0-9]+([\\-\\.]{1}[a-z0-9]+)*\\.[a-z]{2,5}(:[0-9]{1,5})?(\\/.*)?$') ],

    timezone: ['', Validators.required],

    datasourceType: ['', Validators.required],

    adminEmail: ['', [Validators.required, Validators.email]]

  };

  softwarePlatformDesc: Description = softwarePlatformDesc;

  platformNameDesc: Description = platformNameDesc;

  officialNameDesc: Description = officialNameDesc;

  issnDesc: Description = issnDesc;

  eissnDesc: Description = eissnDesc;

  lissnDesc: Description = lissnDesc;

  repoDescriptionDesc: Description = repoDescriptionDesc;

  countryDesc: Description = countryDesc;

  longtitudeDesc: Description = longtitudeDesc;

  latitudeDesc: Description = latitudeDesc;

  websiteUrlDesc: Description = websiteUrlDesc;

  institutionNameDesc: Description = institutionNameDesc;

  englishNameDesc: Description = englishNameDesc;

  logoUrlDesc: Description = logoUrlDesc;

  timezoneDesc: Description = timezoneDesc;

  datasourceTypeDesc: Description = datasourceTypeDesc;

  adminEmailDesc: Description = adminEmailDesc;

  constructor(

    private fb: FormBuilder,

    private repoService: RepositoryService,

    private sharedService: SharedService,

    private authService: AuthenticationService

  ) {}

  ngOnInit() {

    this.loadForm();

  }

  loadForm() {

    if (this.selectedRepo) {

      this.repoId = this.selectedRepo.id.split('::')[1];

      this.loadingMessage = loadingRepoMessage;

      this.updateGroup = this.fb.group(this.updateGroupDefinition, {validator: checkPlatform});

      this.getDatasourceClasses();

    } else {

      this.errorMessage = loadingRepoError;

    }

  }

  setupUpdateForm() {

    if (this.selectedRepo) {

      console.log(`my datasource type is: ${this.selectedRepo.datasourceType}`);

      this.updateGroup.setValue({

        softwarePlatform: this.selectedRepo.typology,

        platformName: '',

        officialName: this.selectedRepo.officialName,

        issn: '',

        eissn: '',

        lissn: '',

        repoDescription: this.selectedRepo.description,

        country: this.selectedRepo.countryCode,

        longtitude: this.selectedRepo.longitude,

        latitude: this.selectedRepo.latitude,

        websiteUrl: this.selectedRepo.websiteUrl,

        institutionName: this.selectedRepo.organization,

        englishName: this.selectedRepo.englishName,

        logoUrl: this.selectedRepo.logoUrl,

        timezone: this.selectedRepo.timezone,

        datasourceType: this.selectedRepo.datasourceClass,

        adminEmail: this.selectedRepo.contactEmail

      });

      if ( this.selectedRepo.typology === '' || !this.typologies.some(x => x.value === this.selectedRepo.typology) ) {

        this.updateGroup.get('softwarePlatform').setValue('');

        this.updateGroup.get('platformName').setValue(this.selectedRepo.typology);

      }

      if ((this.selectedRepo.datasourceType === 'opendoar') ||

        (this.selectedRepo.datasourceType === 're3data')) {

        // this.updateGroup.get('officialName').disable();

        this.updateGroup.get('country').disable();

        // this.updateGroup.get('longtitude').disable();

        // this.updateGroup.get('latitude').disable();

        // this.updateGroup.get('websiteUrl').disable();

        // this.updateGroup.get('institutionName').disable();

      }

      if (this.selectedRepo.datasourceType === 'journal') {

        let ssnToShow = this.selectedRepo.issn.slice(0, 4) + '-' + this.selectedRepo.issn.toString().slice(4);

        this.updateGroup.get('issn').setValue(ssnToShow);

        this.updateGroup.get('issn').clearValidators();

        this.updateGroup.get('issn').setValidators([Validators.required, Validators.pattern('^\\d{4}-\\d{3}[\\dxX]$')]);

        if (this.selectedRepo.eissn.trim().length) {

          ssnToShow = this.selectedRepo.eissn.slice(0, 4) + '-' + this.selectedRepo.eissn.toString().slice(4);

          this.updateGroup.get('eissn').setValue(ssnToShow);

        }

        if (this.selectedRepo.lissn.trim().length) {

          ssnToShow = this.selectedRepo.lissn.slice(0, 4) + '-' + this.selectedRepo.lissn.toString().slice(4);

          this.updateGroup.get('lissn').setValue(ssnToShow);

        }

        /* it was decided that all fields will be open, 21-12-2018 */

        /*this.updateGroup.get('issn').disable();

        this.updateGroup.get('eissn').disable();

        this.updateGroup.get('lissn').disable();*/

      }

      /*this.getDatasourceClasses();*/

    }

  }

  getDatasourceClasses() {

    this.repoService.getDatasourceClasses(this.selectedRepo.datasourceType).subscribe(

      classes => this.datasourceClasses = classes,

      error => {

        this.loadingMessage = '';

        this.errorMessage = noServiceMessage;

        console.log(error);

      },

      () => {

        for (const key of Object.keys(this.datasourceClasses)) {

          this.classCodes.push(key);

        }

        this.getCountries();

      }

    );

  }

  getCountries() {

    this.repoService.getCountries()

      .subscribe(

        countries => this.countries = countries.sort( function(a, b) {

          if (a.name < b.name) {

            return -1;

          } else if (a.name > b.name) {

            return 1;

          } else {

            return 0;

          }

        } ),

        error => {

          this.loadingMessage = '';

          this.errorMessage = noServiceMessage;

          console.log(error);

        }, () => {

          this.getTypologies();

        });

  }

  getTypologies() {

    this.repoService.getTypologies().subscribe(

      types => this.typologies = types,

      error => {

        this.loadingMessage = '';

        console.log(error);

      },

      () => {

        this.getTimezones();

      }

    );

  }

  getTimezones() {

    this.repoService.getTimezones().subscribe(

      zones => this.timezones = zones,

      error => {

        this.loadingMessage = '';

        console.log(error);

      },

      () => {

        this.loadingMessage = '';

        this.setupUpdateForm();

      }

    );

  }

  updateRepo() {

    this.formSubmitted = true;

    this.errorMessage = '';

    this.successMessage = '';

    window.scroll(1, 1);

    if (this.updateGroup.valid) {

      if ( this.selectedRepo.datasourceType !== 'journal' || this.updateGroup.get('issn').value ) {

        this.refreshSelectedRepo();

        /*

          call the api only if the current page is sources/update

          [otherwise the repository will be updated during the registration procedure, after the first interface is saved]

        */

        if (this.showButton) {

          this.loadingMessage = formSubmitting;

          this.errorMessage = '';

          // this.repoService.up

          this.repoService.updateRepository(this.selectedRepo).subscribe(

            response => {

              if (response) {

                this.selectedRepo = response;

                console.log(`updateRepository responded: ${JSON.stringify(response)}`);

              }

            },

            error => {

              console.log(error);

              this.loadingMessage = '';

              this.errorMessage = formErrorWasntSaved;

            },

            () => {

              this.loadingMessage = '';

              if (!this.selectedRepo) {

                this.errorMessage = formErrorWasntSaved;

              } else {

                this.successMessage = formSuccessUpdatedRepo;

              }

              //fixme is this the place to update the subject??

              this.sharedService.setRepository(this.selectedRepo);

            }

          );

        }

      } else {

        this.errorMessage = formErrorRequiredFields;

      }

    } else {

      this.errorMessage = formErrorRequiredFields;

    }

  }

  refreshSelectedRepo() {

    if (this.updateGroup.get('softwarePlatform').value ) {

      this.selectedRepo.typology = this.updateGroup.get('softwarePlatform').value;

    } else if (this.updateGroup.get('platformName').value) {

      this.selectedRepo.typology = this.updateGroup.get('platformName').value;

    }

    this.selectedRepo.officialName = this.updateGroup.get('officialName').value.toString();

    this.selectedRepo.description = this.updateGroup.get('repoDescription').value.toString();

    this.selectedRepo.countryCode = this.updateGroup.get('country').value;

    this.selectedRepo.countryName = this.countries.filter(x => x.code === this.updateGroup.get('country').value)[0].name;

    this.selectedRepo.longitude = this.updateGroup.get('longtitude').value;

    this.selectedRepo.latitude = this.updateGroup.get('latitude').value;

    this.selectedRepo.websiteUrl = this.updateGroup.get('websiteUrl').value;

    this.selectedRepo.organization = this.updateGroup.get('institutionName').value.toString();

    this.selectedRepo.englishName = this.updateGroup.get('englishName').value.toString();

    this.selectedRepo.logoUrl = this.updateGroup.get('logoUrl').value;

    this.selectedRepo.timezone = this.updateGroup.get('timezone').value;

    this.selectedRepo.datasourceClass = this.updateGroup.get('datasourceType').value;

    this.selectedRepo.contactEmail = this.updateGroup.get('adminEmail').value;

    if (this.selectedRepo.datasourceType === 'journal') {

      let ssnParts = this.updateGroup.get('issn').value.split('-');

      let correctSSN = ssnParts[0] + ssnParts[1];

      this.selectedRepo.issn = correctSSN;

      if ( this.updateGroup.get('eissn').value ) {

        ssnParts = this.updateGroup.get('eissn').value.split('-');

        correctSSN = ssnParts[0] + ssnParts[1];

        this.selectedRepo.eissn = correctSSN;

      }

      if ( this.updateGroup.get('lissn').value ) {

        ssnParts = this.updateGroup.get('lissn').value.split('-');

        correctSSN = ssnParts[0] + ssnParts[1];

        this.selectedRepo.lissn = correctSSN;

      }

    }

    if (!this.showButton) {

      this.selectedRepo.registeredBy = this.authService.getUserEmail();

      this.selectedRepo.registered = true;

      this.selectedRepo.registrationDate = new Date(Date.now()); // NOT NEEDED ??

      this.emittedInfo.emit(this.selectedRepo);

    }

  }

}

export function checkPlatform(c: AbstractControl) {

  if ( c.get('softwarePlatform').value || c.get('platformName').value ) {

    return null;

  }

  return 'invalid';

}

<div id="page_content">

  <div id="page_content_inner">

    <h2 class="heading_b uk-margin-bottom uk-margin-large-top uk-text-center">Error: 403 Forbidden</h2>

    <!-- TOP HELP CONTENT -->

    <help-content #topHelperContent [position]="'top'"

                  [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">

    </help-content>

    <div class="uk-grid">

      <!-- LEFT HELP CONTENT -->

      <aside-help-content #leftHelperContent [position]="'left'"

                          [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">

      </aside-help-content>

      <!-- MIDDLE -->

      <div class=" uk-width-expand@m">

        <div style="font-size: 180px; color: #28beFF; line-height: 1.2;" class="uk-text-center">

          <strong>403</strong>

        </div>

        <div class="uk-text-center">

          Sorry, access to this resource on the server is forbidden.<br>

          Either check the URL or <a href="/home">go home</a>

        </div>

      </div>

      <!-- RIGHT HELP CONTENT -->

      <aside-help-content #rightHelperContent [position]="'right'"

                          [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">

      </aside-help-content>

    </div>

    <!-- BOTTOM HELP CONTENT -->

    <help-content #bottomHelperContent [position]="'bottom'"

                  [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">

    </help-content>

  </div>

</div>

<div>

  <div class="uk-width-1-1 uk-grid">

    <div class="uk-width-1-1">

      <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{ errorMessage }}</div>

      <div *ngIf="warningMessage" class="uk-alert uk-alert-warning">{{ warningMessage }}</div>

      <div *ngIf="loadingMessage" class="loading-big">

        <div class="loader-big" style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">

          {{ loadingMessage }}

        </div>

        <div class="transparentFilm"></div>

      </div>

      <div id="list_grid" *ngIf="reposOfUser && reposOfUser.length>0"

           class="uk-grid uk-grid-match uk-grid-medium uk-child-width-1-2@s uk-child-width-1-3@m uk-child-width-1-4@l {{tilesView ? 'grid_view' : 'list_view'}}">

        <div *ngFor="let repo of reposOfUser" class="uk-margin-medium-top">

          <a class="md-card" [routerLink]="[getLinkToNext(repo)]">

            <div >

              <div class="md-card-head uk-text-center uk-position-relative">

                <div *ngIf="parent === 'metrics'" class="{{getBadgeCSS(repo)}} uk-position-absolute uk-position-top-left uk-margin-left uk-margin-top">

                  {{getBadgeText(repo)}}

                </div>

                <img *ngIf="!repo.logoUrl" class="md-card-head-img dense-image dense-ready" src="../../../assets/imgs/yourLogoHere.jpg" alt="" data-dense-cap="2">

                <img *ngIf="repo.logoUrl" class="md-card-head-img dense-image dense-ready" src="{{repo.logoUrl}}" alt="" data-dense-cap="2">

              </div>

              <div class="md-card-content">

                <h4 class="heading_c uk-margin-bottom">{{repo.officialname}}</h4>

                <p>{{repo.description}}</p>

                <!--<a class="md-btn md-btn-small md-btn-success" [routerLink]="[getLinkToNext(repo)]">Add to Cart</a>-->

              </div>

            </div>

          </a>

        </div>

      </div>

    </div>

  </div>

</div>

/**

 * angular2-cookie-law

 *

 * Copyright 2016-2017, @andreasonny83, All rights reserved.

 *

 * @author: @andreasonny83 <andreasonny83@gmail.com>

 */

export const closeIcon: string = `

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">

    <path d="M377.047 184.198q0 8.26-6.037 14.297L313.505 256l57.505 57.505q6.037 6.037 6.037 14.297 0 8.578-6.037 14.615l-28.593 28.593q-6.037 6.037-14.615 6.037-8.26 0-14.297-6.037L256 313.505l-57.505 57.505q-6.037 6.037-14.297 6.037-8.578 0-14.615-6.037l-28.593-28.593q-6.037-6.037-6.037-14.615 0-8.26 6.037-14.297L198.495 256l-57.505-57.505q-6.037-6.037-6.037-14.297 0-8.578 6.037-14.615l28.593-28.593q6.037-6.037 14.615-6.037 8.26 0 14.297 6.037L256 198.495l57.505-57.505q6.037-6.037 14.297-6.037 8.578 0 14.615 6.037l28.593 28.593q6.037 6.037 6.037 14.615zM500 256q0-66.401-32.724-122.477-32.724-56.075-88.799-88.799Q322.401 12 256 12q-66.401 0-122.477 32.724-56.075 32.724-88.799 88.799Q12 189.599 12 256q0 66.401 32.724 122.477 32.724 56.075 88.799 88.799Q189.599 500 256 500q66.401 0 122.477-32.724 56.075-32.724 88.799-88.799Q500 322.401 500 256z"></path>

  </svg>

`;

/**

 * Created by stefanos on 15/5/2017.

 */

import { AfterViewInit, Directive, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({

  selector: '[my-form]',

})

export class MyFormDirective implements AfterViewInit {

  constructor(public viewContainerRef: ViewContainerRef, public templateRef: TemplateRef<any>) {}

  ngAfterViewInit(): void {

    this.viewContainerRef.createEmbeddedView(this.templateRef);

  }

}

<!--<div *ngIf="isModalShown" [config]="{ show: true }" (onHidden)="onHidden()" bsModal #autoShownModal="bs-modal"-->

     <!--class="modal in fade" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">-->

  <!--<div class="modal-dialog">-->

    <!--<div class="modal-content">-->

      <!--<div class="modal-body">-->

        <!--<div>-->

          <!--<div>-->

            <!--<h2 class="uk-modal-title">{{title}}</h2>-->

            <!--<ng-content></ng-content>-->

          <!--</div>-->

          <!--<div class="uk-text-right">-->

            <!--<button (click)="hideModal()" class="uk-button uk-button-default uk-margin-small-right" type="button">{{ hideModalButton }}</button>-->

            <!--<button *ngIf="confirmActionButton" (click)="confirmedAction()" class="uk-button uk-button-primary" type="button">{{confirmActionButton}}</button>-->

          <!--</div>-->

        <!--</div>-->

      <!--</div>-->

    <!--</div>-->

  <!--</div>-->

<!--</div>-->

<div *ngIf="isModalShown" class="uk-modal {{isModalShown ? 'uk-open' : ''}}" bsModal #autoShownModal="bs-modal" (onHidden)="onHidden()" aria-hidden="false"

     [ngStyle]="{'display': isModalShown ? 'block' : 'none'}" style="overflow-y: auto">

  <div class="uk-modal-dialog" style="top: 95.5px;">

    <div class="uk-modal-header">

      <h3 class="uk-modal-title">{{title}}

        <!--<i class="material-icons" data-uk-tooltip="{pos:'top'}" title="headline tooltip"></i>-->

      </h3>

    </div>

    <ng-content></ng-content>

    <div class="uk-modal-footer uk-text-right">

      <button (click)="hideModal()" type="button" class="md-btn md-btn-flat uk-modal-close">{{ hideModalButton }}</button>

      <button *ngIf="confirmActionButton" (click)="confirmedAction()" type="button" class="md-btn md-btn-flat md-btn-flat-primary">{{confirmActionButton}}</button>

      <button *ngIf="confirmButNotCloseButton" (click)="confirmedButNotCloseAction()" type="button" class="md-btn md-btn-flat md-btn-flat-primary">{{confirmButNotCloseButton}}</button>

    </div>

  </div>

</div>

<!-- old-ui shelved Terms of Use modal version -->

<!--<div *ngIf="isModalShown" [config]="{ show: true }" (onHidden)="onHidden()" bsModal #autoShownModal="bs-modal"-->

<!--     class="modal in fade" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">-->

<!--  <div class="modal-dialog">-->

<!--    <h2 class="uk-modal-title uk-margin-top uk-margin-left">{{title}}</h2>-->

<!--    <div class="modal-content">-->

<!--      <div class="modal-body">-->

<!--        <div>-->

<!--          <ng-content></ng-content>-->

<!--        </div>-->

<!--      </div>-->

<!--      <div class="uk-text-right uk-margin-bottom uk-margin-right">-->

<!--        <button (click)="hideModal()" class="uk-button uk-button-default uk-margin-small-right" type="button">{{hideModalButton}}</button>-->

<!--        <button *ngIf="confirmActionButton" (click)="confirmedAction()" class="uk-button uk-button-primary" type="button">{{confirmActionButton}}</button>-->

<!--      </div>-->

<!--    </div>-->

<!--  </div>-->

<!--</div>-->

<div>

  <div *ngIf="loadingMessage" class="loading-big">

    <div class="md-class-content">

      <div class="loader-big" style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">

        {{ loadingMessage }}

      </div>

      <div class="whiteFilm"></div>

    </div>

  </div>

  <div *ngIf="repoInterfaceForm && (!loadingMessage || (loadingMessage===''))" [formGroup]="repoInterfaceForm">

    <div class="md-card-toolbar">

      <div class="md-card-toolbar-actions">

        <a *ngIf="!inRegister" (click)="saveInterface()" class="uk-margin-small-right"><i class="md-icon material-icons">save</i></a>

        <a (click)="removeInterface()" class="uk-margin-small-left"><i class="md-icon material-icons">clear</i></a>

      </div>

      <!--<h3 class="md-card-toolbar-heading-text"> Card Heading </h3>-->

    </div>

    <!--<div class="md-card-toolbar interfaceActionsPanel">-->

      <!--<a *ngIf="!inRegister" (click)="saveInterface()" class="uk-margin-small-right"><i class="far fa-save fa-lg"></i></a>-->

      <!--<a (click)="removeInterface()" class="uk-margin-small-left"><i class="fas fa-times fa-lg"></i></a>-->

    <!--</div>-->

    <div class="md-card-content">

      <div *ngIf="successMessage" class="uk-alert uk-alert-success" style="clear: both">{{ successMessage }}</div>

      <div *ngIf="errorMessage" class="uk-alert" [ngClass]="{'uk-alert-warning': errorMessage == invalidCustomBaseUrl,

                'uk-alert-danger': errorMessage != invalidCustomBaseUrl}" style="clear: both">{{ errorMessage }}</div>

      <div class="md-input-wrapper uk-margin-medium-top {{ (repoInterfaceForm.get('baseUrl') != null) ? 'md-input-filled' : '' }}">

        <label class="" for="baseUrl" title="{{ baseUrlDesc.desc }}">Base OAI-PMH URL (*)</label>

        <span *ngIf="showIdentifiedBaseUrl" class="help-block inline" style="margin-top: 8px; margin-bottom: 0px; padding-left: 10px; display: block;">

          Identified

        </span>

        <input id="baseUrl" type="text" class="md-input" formControlName="baseUrl" (blur)="getInterfaceInfo()">

        <span class="md-input-bar"></span>

      </div>

      <!--<div class="form-group has-success">-->

        <!--<label class="control-label" for="baseUrl" title="{{ baseUrlDesc.desc }}">Base OAI-PMH URL (*)</label>-->

        <!--<span *ngIf="identifiedBaseUrl" class="help-block inline" style="margin-top: 0px; margin-bottom: 0px; padding-left: 10px;">-->

          <!--Identified-->

        <!--</span>-->

        <!--<input id="baseUrl" type="text" class="form-control" formControlName="baseUrl" (blur)="getInterfaceInfo()">-->

      <!--</div>-->

      <div class="radioButtonForm uk-margin-top">

        <label class="control-label">Validation Set</label>

        <div class="form-group">

          <label for="selectRadio{{interfaceID}}" title="{{ existingValSetDesc.desc }}"

                 class="uk-button uk-link-muted visible_uk_links"

                 style="display: block; text-align: left;">

            <input id="selectRadio{{interfaceID}}" value="select" name="validationSet{{interfaceID}}" type="radio"

                   (change)="chooseValSet(true)" checked >

            <span class="uk-margin-small-left">Choose existing</span>

          </label>

        </div>

        <div class="md-input-wrapper">

          <!--<label class="">Select repository's country</label>-->

          <select class="md-input" id="selectValidationSet{{interfaceID}}" formControlName="selectValidationSet" (change)="checkIfValid()">

            <option value="" selected>-- none selected --</option>

            <option *ngFor="let set of valsetList" value="{{set}}">{{set}}</option>

          </select>

          <span class="md-input-bar"></span>

        </div>

        <div class="form-group">

          <label for="customRadio{{interfaceID}}" title="{{ customValSetDesc.desc }}"

                 class="uk-button uk-link-muted visible_uk_links"

                 style="display: block; text-align: left;">

            <input id="customRadio{{interfaceID}}" value="custom" name="validationSet{{interfaceID}}" type="radio"

                   (change)="chooseValSet(false)">

            <span class="uk-margin-small-left">or a custom one</span>

          </label>

        </div>

        <div class="md-input-wrapper">

          <input id="customValidationSet{{interfaceID}}" formControlName="customValidationSet"

                 class="md-input" type="text" (keyup)="checkIfValid()">

          <span class="md-input-bar"></span>

        </div>

      </div>

      <!--<div class="form-group">-->

        <!--<label class="control-label">Validation Set</label>-->

        <!--<div>-->

          <!--<label class="uk-button validationSetRadio" for="selectRadio{{interfaceID}}" title="{{ existingValSetDesc.desc }}">-->

            <!--<input id="selectRadio{{interfaceID}}" value="select" name="validationSet{{interfaceID}}" type="radio"-->

                   <!--(change)="chooseValSet(true)" checked >-->

            <!--<span class="uk-margin-small-left">Choose existing</span>-->

          <!--</label>-->

        <!--</div>-->

        <!--<select id="selectValidationSet{{interfaceID}}" formControlName="selectValidationSet"-->

                <!--class="form-control" (change)="checkIfValid()">-->

          <!--<option value="" selected>&#45;&#45; none selected &#45;&#45;</option>-->

          <!--<option *ngFor="let set of valsetList" value="{{set}}">{{set}}</option>-->

        <!--</select>-->

        <!--<div>-->

          <!--<label class="uk-button validationSetRadio" for="customRadio{{interfaceID}}" title="{{ customValSetDesc.desc }}">-->

            <!--<input id="customRadio{{interfaceID}}" value="custom" name="validationSet{{interfaceID}}" type="radio"-->

                   <!--(change)="chooseValSet(false)">-->

            <!--<span class="uk-margin-small-left">or a custom one</span>-->

          <!--</label>-->

        <!--</div>-->

        <!--<input id="customValidationSet{{interfaceID}}" formControlName="customValidationSet"-->

               <!--class="form-control" type="text" (keyup)="checkIfValid()">-->

      <!--</div>-->

      <div class="md-input-wrapper md-input-filled uk-margin-medium-top">

        <label style="top: -16px" class="" for="compLvl" title="{{ compatibilityLevelDesc.desc }}">Desired Compatibility Level (*)</label>

        <select class="md-input" id="compLvl" formControlName="compatibilityLevel" (change)="checkIfValid()">

          <option value="">-- none selected --</option>

          <option *ngFor="let key of classCodes" value="{{key}}">{{compClasses[key]}}</option>

        </select>

        <span class="md-input-bar"></span>

      </div>

      <!--<div class="form-group">-->

        <!--<label class="control-label" for="compLvl" title="{{ compatibilityLevelDesc.desc }}">Desired Compatibility Level (*)</label>-->

        <!--<select class="form-control" id="compLvl" formControlName="compatibilityLevel" (change)="checkIfValid()">-->

          <!--<option value="">&#45;&#45; none selected &#45;&#45;</option>-->

          <!--<option *ngFor="let key of classCodes" value="{{key}}">{{compClasses[key]}}</option>-->

        <!--</select>-->

      <!--</div>-->

      <div class="">

        <label class="">Current Compatibility Level</label>

        <div *ngIf="existingCompLevel">{{ existingCompLevel ? existingCompLevel : 'not available' }}</div>

      </div>

      <!--<div>-->

        <!--<label class="uk-form-controls-text control-label">Current Compatibility Level</label>-->

        <!--<div *ngIf="existingCompLevel">{{ existingCompLevel ? existingCompLevel : 'not available' }}</div>-->

      <!--</div>-->

      <div class="uk-margin-medium-top">

        <label class="" for="comment" title="{{ commentDesc.desc }}">Comments (What else do we need to know?)</label>

        <textarea id="comment" class="uk-textarea" rows="3" formControlName="comment" (blur)="checkIfValid()"></textarea>

      </div>

    </div>

  </div>

</div>

<div *ngIf="loadingMessage" class="loading-big">

  <div class="loader-big" style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">

    {{ loadingMessage }}

  </div>

  <div class="whiteFilm"></div>

</div>

<div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{ errorMessage }}</div>

<div *ngIf="successMessage" class="uk-alert uk-alert-success">{{ successMessage }}</div>

<form *ngIf="selectedRepo && !loadingMessage" [formGroup]="agreementForm">

  <br>

<!--  {{agreementForm.get('acceptTerms').value}}-->

  <form-inline>

    <label><input formControlName="acceptTerms" class="uk-checkbox" type="checkbox" checked> I Agree with the </label>

    <a href="https://zenodo.org/record/1446384#.XiGIAdmxU5n" target="_blank">OpenAIRE's Terms of Agreement for Content Providers</a>

  </form-inline>

<!--  {{agreementForm.get('optOut').value}}-->

  <form-inline>

    <label><input formControlName="optOut" class="uk-checkbox" type="checkbox"> I would like to opt out from "data mining of Open Access publications in my repository"</label>

  </form-inline>

  <br>

  <div *ngIf="showButton" class="form-group">

    <button class="uk-button uk-button-primary updateRepoInfoButton" type="button" (click)="updateRepo()">Update Information</button>

  </div>

</form>

<div *ngIf="loadingMessage" class="loading-big">

  <div class="loader-big" style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">

    {{ loadingMessage }}

  </div>

  <div class="whiteFilm"></div>

</div>

<div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{ errorMessage }}</div>

<div *ngIf="successMessage" class="uk-alert uk-alert-success">{{ successMessage }}</div>

<form *ngIf="selectedRepo && !loadingMessage" [formGroup]="updateGroup" class="uk-margin-medium-bottom">

  <div>

    <h4 class="uk-h4 uk-text-primary uk-scrollspy-inview uk-animation-slide-top-medium" uk-scrollspy-class="">

      Basic information

    </h4>

  </div>

  <div *ngIf="selectedRepo.datasourceType === 'opendoar'" class="uk-alert uk-alert-info">

    The following fields are completed by OpenDOAR.<br>

    If you want to edit them, you can do it by using this

    <a target="_blank" href="{{ 'http://v2.sherpa.ac.uk/id/repository/' + repoId }}">OpenDOAR link</a>

  </div>

  <div *ngIf="selectedRepo.datasourceType === 're3data'" class="uk-alert uk-alert-info">

    The following fields are completed by Re3data.<br>

    If you want to edit them, you can do it by using this

    <a target="_blank" href="{{ 'http://service.re3data.org/repository/' + repoId }}">Re3data link</a>

  </div>

  <div data-dynamic-fields="d_field_wizard" class="uk-grid" data-uk-grid-margin="" dynamic-fields-counter="0">

    <div class="uk-width-medium-1-1 parsley-row form_section uk-row-first">

      <div class="md-input-wrapper {{ (updateGroup.get('softwarePlatform') != null) ? 'md-input-filled' : '' }}">

        <form-inline [description]="softwarePlatformDesc" [valid]="updateGroup.get('softwarePlatform').valid">

          <select formControlName="softwarePlatform" class="md-input">

            <!--      <option value="" selected>[Other] (enter name below)</option> RESTORE AFTER getTypologies begins to work-->

            <option *ngFor="let platform of typologies" value="{{ platform.value }}">{{ platform.name }}</option>

          </select>

        </form-inline>

      </div>

    </div>

  </div>

  <div data-dynamic-fields="d_field_wizard" class="uk-grid" data-uk-grid-margin="" dynamic-fields-counter="0">

    <div class="uk-width-medium-1-1 parsley-row form_section uk-row-first">

      <div class="md-input-wrapper {{(updateGroup.get('platformName') != null) ? 'md-input-filled' : '' }}">

        <form-inline [description]="platformNameDesc" [valid]="updateGroup.get('platformName').valid">

            <span *ngIf="updateGroup.get('platformName').touched && updateGroup.get('platformName').value"

                  class="help-block inline"

                  style="margin-top: 0px; margin-bottom: 0px; font-style: italic">This value will be used as the platform for your repository</span>

          <input formControlName="platformName" class="md-input" style="" type="text">

        </form-inline>

      </div>

    </div>

  </div>

  <div data-dynamic-fields="d_field_wizard" class="uk-grid" data-uk-grid-margin="" dynamic-fields-counter="0">

    <div class="uk-width-medium-1-1 parsley-row form_section uk-row-first">

      <div class="md-input-wrapper {{ (updateGroup.get('officialName') != null) ? 'md-input-filled' : '' }}">

        <form-inline [description]="officialNameDesc" [valid]="updateGroup.get('officialName').valid">

          <input formControlName="officialName" class="md-input" style="" type="text">

        </form-inline>

      </div>

    </div>

  </div>

  <div *ngIf="selectedRepo.datasourceType == 'journal'">

    <div data-dynamic-fields="d_field_wizard" class="uk-grid" data-uk-grid-margin="" dynamic-fields-counter="0">

      <div class="uk-width-medium-1-1 parsley-row form_section uk-row-first">

        <div class="md-input-wrapper {{ (updateGroup.get('issn') != null) ? 'md-input-filled' : '' }}">

          <form-inline [description]="issnDesc" [valid]="updateGroup.get('issn').valid">

            <span *ngIf="updateGroup.get('issn').invalid && updateGroup.get('issn').touched && updateGroup.get('issn').dirty"

                  class="help-block inline uk-text-danger"

                  style="margin-top: 0px; margin-bottom: 0px; padding-left: 10px;">Issn needs to be of the form: "1111-1111" or "1111-111X"</span>

            <input formControlName="issn" class="md-input" type="text"

                   (focus)="updateGroup.get('issn').markAsUntouched()" (blur)="updateGroup.get('issn').updateValueAndValidity()">

          </form-inline>

        </div>

      </div>

    </div>

    <div data-dynamic-fields="d_field_wizard" class="uk-grid" data-uk-grid-margin="" dynamic-fields-counter="0">

      <div class="uk-width-medium-1-1 parsley-row form_section uk-row-first">

        <div class="md-input-wrapper {{ (updateGroup.get('eissn') != null) ? 'md-input-filled' : '' }}">

          <form-inline [description]="eissnDesc" [valid]="updateGroup.get('eissn').valid">

            <span *ngIf="updateGroup.get('eissn').invalid && updateGroup.get('eissn').touched && updateGroup.get('eissn').dirty"

                  class="help-block inline uk-text-danger"

                  style="margin-top: 0px; margin-bottom: 0px; padding-left: 10px;">Eissn needs to be of the form: "1111-1111" or "1111-111X"</span>

            <input formControlName="eissn" class="md-input" type="text"

                   (focus)="updateGroup.get('eissn').markAsUntouched()" (blur)="updateGroup.get('eissn').updateValueAndValidity()">

          </form-inline>

        </div>

      </div>

    </div>

    <div data-dynamic-fields="d_field_wizard" class="uk-grid" data-uk-grid-margin="" dynamic-fields-counter="0">

      <div class="uk-width-medium-1-1 parsley-row form_section uk-row-first">

        <div class="md-input-wrapper {{ (updateGroup.get('lissn') != null) ? 'md-input-filled' : '' }}">

          <form-inline [description]="lissnDesc" [valid]="updateGroup.get('lissn').valid">

            <span *ngIf="updateGroup.get('lissn').invalid && updateGroup.get('lissn').touched && updateGroup.get('lissn').dirty"

                  class="help-block inline uk-text-danger"

                  style="margin-top: 0px; margin-bottom: 0px; padding-left: 10px;">Lissn needs to be of the form: "1111-1111" or "1111-111X"</span>

            <input formControlName="lissn" class="md-input" type="text"

                   (focus)="updateGroup.get('lissn').markAsUntouched()" (blur)="updateGroup.get('lissn').updateValueAndValidity()">

          </form-inline>

        </div>

      </div>

    </div>

  </div>

  <div data-dynamic-fields="d_field_wizard" class="uk-grid" data-uk-grid-margin="" dynamic-fields-counter="0">

    <div class="uk-width-medium-1-1 parsley-row form_section uk-row-first">

      <div class="md-input-wrapper {{ (updateGroup.get('repoDescription') != null) ? 'md-input-filled' : '' }}">

        <form-inline [description]="repoDescriptionDesc" [valid]="updateGroup.get('repoDescription').valid">

          <textarea formControlName="repoDescription" class="md-input"></textarea>

        </form-inline>

      </div>

    </div>

  </div>

  <div data-dynamic-fields="d_field_wizard" class="uk-grid" data-uk-grid-margin="" dynamic-fields-counter="0">

    <div class="uk-width-medium-1-1 parsley-row form_section uk-row-first">

      <div class="md-input-wrapper {{ (updateGroup.get('country') != null) ? 'md-input-filled' : '' }}">

        <form-inline [description]="countryDesc" [valid]="updateGroup.get('country')">

          <select formControlName="country" class="md-input">

            <option value="">-- none selected --</option>

            <option *ngFor="let country of countries" value="{{country.code}}" title="{{country.name}}">{{ country.name }}</option>

          </select>

        </form-inline>

      </div>

    </div>

  </div>

  <div data-dynamic-fields="d_field_wizard" class="uk-grid" data-uk-grid-margin="" dynamic-fields-counter="0">

    <div class="uk-width-medium-1-1 parsley-row form_section uk-row-first">

      <div class="md-input-wrapper {{ (updateGroup.get('longtitude') != null) ? 'md-input-filled' : '' }}">

        <form-inline [description]="longtitudeDesc" [valid]="updateGroup.get('longtitude').valid">

          <input formControlName="longtitude" type="text" class="md-input">

        </form-inline>

      </div>

    </div>

  </div>

  <div data-dynamic-fields="d_field_wizard" class="uk-grid" data-uk-grid-margin="" dynamic-fields-counter="0">

    <div class="uk-width-medium-1-1 parsley-row form_section uk-row-first">

      <div class="md-input-wrapper {{ (updateGroup.get('latitude') != null) ? 'md-input-filled' : '' }}">

        <form-inline [description]="latitudeDesc" [valid]="updateGroup.get('latitude').valid">

          <input formControlName="latitude" type="text" class="md-input">

        </form-inline>

      </div>

    </div>

  </div>

  <div data-dynamic-fields="d_field_wizard" class="uk-grid" data-uk-grid-margin="" dynamic-fields-counter="0">

    <div class="uk-width-medium-1-1 parsley-row form_section uk-row-first">

      <div class="md-input-wrapper {{ (updateGroup.get('websiteUrl') != null) ? 'md-input-filled' : '' }}">

        <form-inline [description]="websiteUrlDesc" [valid]="updateGroup.get('websiteUrl').valid">

          <input formControlName="websiteUrl" class="md-input" type="text">

        </form-inline>

      </div>

    </div>

  </div>

  <div data-dynamic-fields="d_field_wizard" class="uk-grid" data-uk-grid-margin="" dynamic-fields-counter="0">

    <div class="uk-width-medium-1-1 parsley-row form_section uk-row-first">

      <div class="md-input-wrapper {{ (updateGroup.get('institutionName') != null) ? 'md-input-filled' : '' }}">

        <form-inline [description]="institutionNameDesc" [valid]="updateGroup.get('institutionName').valid">

          <input formControlName="institutionName" class="md-input" type="text">

        </form-inline>

      </div>

    </div>

  </div>

  <h4 class="uk-h4 uk-text-primary uk-scrollspy-inview uk-animation-slide-top-medium"

      uk-scrollspy-class="">Extra Information</h4>

  <div data-dynamic-fields="d_field_wizard" class="uk-grid" data-uk-grid-margin="" dynamic-fields-counter="0">

    <div class="uk-width-medium-1-1 parsley-row form_section uk-row-first">

      <div class="md-input-wrapper {{ (updateGroup.get('englishName') != null) ? 'md-input-filled' : '' }}">

        <form-inline [description]="englishNameDesc" [valid]="updateGroup.get('englishName').valid">

          <input formControlName="englishName" class="md-input" type="text">

        </form-inline>

      </div>

    </div>

  </div>

  <div data-dynamic-fields="d_field_wizard" class="uk-grid" data-uk-grid-margin="" dynamic-fields-counter="0">

    <div class="uk-width-medium-1-1 parsley-row form_section uk-row-first">

      <div class="md-input-wrapper {{ (updateGroup.get('logoUrl') != null) ? 'md-input-filled' : '' }}">

        <form-inline [description]="logoUrlDesc" [valid]="updateGroup.get('logoUrl').valid">

        <span *ngIf="updateGroup.get('logoUrl').invalid && updateGroup.get('logoUrl').touched && updateGroup.get('logoUrl').dirty"

              class="help-block inline uk-text-danger"

              style="margin-top: 0px; margin-bottom: 0px; ">The url you entered is not valid</span>

          <input formControlName="logoUrl" class="md-input" type="text"

                 (focus)="updateGroup.get('logoUrl').markAsUntouched()"

                 (blur)="updateGroup.get('logoUrl').updateValueAndValidity()">

          <div class="comment fontItalic">

            Please make sure that the maximum size of the uploaded image is width=360px, height=240px

          </div>

        </form-inline>

      </div>

    </div>

  </div>

  <div data-dynamic-fields="d_field_wizard" class="uk-grid" data-uk-grid-margin="" dynamic-fields-counter="0">

    <div class="uk-width-medium-1-1 parsley-row form_section uk-row-first">

      <div class="md-input-wrapper {{ (updateGroup.get('timezone') != null) ? 'md-input-filled' : '' }}">

        <form-inline [description]="timezoneDesc" [valid]="updateGroup.get('timezone').valid">

          <select formControlName="timezone" class="md-input">

            <option value="">-- none selected --</option>

            <option *ngFor="let timezone of timezones" value="{{ timezone.offset }}">{{ timezone.name }}</option>

          </select>

        </form-inline>

      </div>

    </div>

  </div>

  <div data-dynamic-fields="d_field_wizard" class="uk-grid" data-uk-grid-margin="" dynamic-fields-counter="0">

    <div class="uk-width-medium-1-1 parsley-row form_section uk-row-first">

      <div class="md-input-wrapper {{ (updateGroup.get('datasourceType') != null) ? 'md-input-filled' : '' }}">

        <form-inline [description]="datasourceTypeDesc" [valid]="updateGroup.get('datasourceType').valid">

          <select formControlName="datasourceType" class="md-input">

            <option value="">-- none selected --</option>

            <option *ngFor="let key of classCodes" value="{{key}}">{{ datasourceClasses[key] }}</option>

          </select>

        </form-inline>

      </div>

    </div>

  </div>

  <h4 class="uk-h4 uk-text-primary uk-scrollspy-inview uk-animation-slide-top-medium"

      uk-scrollspy-class="">Administrator & contact information</h4>

  <div data-dynamic-fields="d_field_wizard" class="uk-grid" data-uk-grid-margin="" dynamic-fields-counter="0">

    <div class="uk-width-medium-1-1 parsley-row form_section uk-row-first">

      <div class="md-input-wrapper {{ (updateGroup.get('adminEmail') != null) ? 'md-input-filled' : '' }}">

        <form-inline [description]="adminEmailDesc" [valid]="updateGroup.get('adminEmail').valid">

          <span *ngIf="updateGroup.get('adminEmail').invalid && updateGroup.get('adminEmail').touched && updateGroup.get('adminEmail').dirty"

                class="help-block inline"

                style="margin-top: 0px; margin-bottom: 0px; ">You need to enter a valid email address</span>

          <input formControlName="adminEmail" class="md-input" type="text" (focus)="updateGroup.get('adminEmail').markAsUntouched()" (blur)="updateGroup.get('adminEmail').updateValueAndValidity()">

        </form-inline>

      </div>

    </div>

  </div>

  <div *ngIf="showButton" class="form-group uk-margin-medium-top">

    <button class="uk-button uk-button-primary updateRepoInfoButton" type="button" (click)="updateRepo()">Update Information</button>

  </div>

</form>

<div class="cookie-law-wrapper"

    [ngStyle]="currentStyles"

    *ngIf="!cookieLawSeen"

    [@state]="animation"

    (@state.done)="afterDismissAnimation($event)">

  <div class="copy">

    <span #ref><ng-content></ng-content></span>

    <span *ngIf="ref.childNodes.length == 0">

      By continuing to browse the site, you're agreeing to our use of cookies.

      <span *ngIf="learnMore">

        Learn more in our <a [href]="learnMore" [target]="target">privacy policy</a>.

      </span>

    </span>

    <a href="#" role="button" class="dismiss" (click)="dismiss($event)">

      <span class="clickable uk-icon">

        <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="1">

          <path fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path>

          <path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path>

        </svg>

      </span>

    </a>

  </div>

</div>

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';

import { Country, Repository, Timezone, Typology } from '../../../domain/typeScriptClasses';

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

import {

  adminEmailDesc,

  countryDesc,

  datasourceTypeDesc,

  Description,

  eissnDesc,

  englishNameDesc,

  institutionNameDesc,

  issnDesc,

  latitudeDesc,

  lissnDesc,

  logoUrlDesc,

  longtitudeDesc,

  officialNameDesc,

  platformNameDesc,

  repoDescriptionDesc,

  softwarePlatformDesc,

  timezoneDesc,

  websiteUrlDesc

} from '../../../domain/oa-description';

import { ActivatedRoute } from '@angular/router';

import { RepositoryService } from '../../../services/repository.service';

import { AuthenticationService } from '../../../services/authentication.service';

import { formErrorRequiredFields, noServiceMessage } from '../../../domain/shared-messages';

@Component ({

  selector: 'datasource-create-form',

  templateUrl: './datasource-create-form.component.html'

})

export class DatasourceCreateFormComponent implements OnInit {

  errorMessage: string;

  successMessage: string;

  loadingMessage: string;

  typologies: Typology[] = [];

  timezones: Timezone[] = [];

  countries: Country[] = [];

  datasourceClasses: Map<string, string> = new Map<string, string>();

  classCodes: string[] = [];

  @Input() mode: string;

  @Output() emittedInfo: EventEmitter<Repository> = new EventEmitter();

  @Input() selectedRepo: Repository;

  formSubmitted = false;

  group: FormGroup;

  // old issn regex

  // issn : ['', [Validators.pattern('^\\d\\d\\d\\d[-]\\d\\d\\d\\d$')] ],

  readonly groupDefinition = {

    softwarePlatform : ['', Validators.required],

    platformName : '',

    officialName : ['', Validators.required],

    issn : ['', [Validators.pattern('^\\d{4}-\\d{3}[\\dxX]$')] ],

    eissn : ['', Validators.pattern('^\\d{4}-\\d{3}[\\dxX]$') ],

    lissn : ['', Validators.pattern('^\\d{4}-\\d{3}[\\dxX]$') ],

    repoDescription : ['', Validators.required],

    country : ['', Validators.required],

    longtitude : ['', [Validators.required, Validators.min(-180), Validators.max(180)] ],

    latitude : ['', [Validators.required, Validators.min(-90), Validators.max(90)] ],

    websiteUrl : ['', [Validators.required, Validators.pattern('^(http:\\/\\/www\\.|https:\\/\\/www\\.|http:\\/\\/|https:\\/\\/)?[a-z0-9]+([\\-\\.]{1}[a-z0-9]+)*\\.[a-z]{2,5}(:[0-9]{1,5})?(\\/.*)?$')] ],

    institutionName : ['', Validators.required],

    englishName: ['', Validators.required],

    logoUrl: ['', Validators.pattern('^(http:\\/\\/www\\.|https:\\/\\/www\\.|http:\\/\\/|https:\\/\\/)?[a-z0-9]+([\\-\\.]{1}[a-z0-9]+)*\\.[a-z]{2,5}(:[0-9]{1,5})?(\\/.*)?$') ],

    timezone: ['', Validators.required],

    datasourceType: ['', Validators.required],

    adminEmail: ['', [Validators.required, Validators.email] ]

  };

  softwarePlatformDesc: Description = softwarePlatformDesc;

  platformNameDesc: Description = platformNameDesc;

  officialNameDesc: Description = officialNameDesc;

  issnDesc: Description = issnDesc;

  eissnDesc: Description = eissnDesc;

  lissnDesc: Description = lissnDesc;

  repoDescriptionDesc: Description = repoDescriptionDesc;

  countryDesc: Description = countryDesc;

  longtitudeDesc: Description = longtitudeDesc;

  latitudeDesc: Description = latitudeDesc;

  websiteUrlDesc: Description = websiteUrlDesc;

  institutionNameDesc: Description = institutionNameDesc;

  englishNameDesc: Description = englishNameDesc;

  logoUrlDesc: Description = logoUrlDesc;

  timezoneDesc: Description = timezoneDesc;

  datasourceTypeDesc: Description = datasourceTypeDesc;

  adminEmailDesc: Description = adminEmailDesc;

  constructor(

    private fb: FormBuilder,

    private route: ActivatedRoute,

    private repoService: RepositoryService,

    private authService: AuthenticationService

  ) {}

  ngOnInit() {

    this.loadForm();

  }

  loadForm() {

    if (!this.mode) {

      this.mode = this.route.snapshot.url[0].path.toString();

      console.log(`my mode is ${this.mode}`);

    }

    this.group = this.fb.group(this.groupDefinition);

    if (this.mode === 'journal') {

      this.group.get('issn').clearValidators();

      this.group.get('issn').setValidators([Validators.required, Validators.pattern('^\\d{4}-\\d{3}[\\dxX]$')]);

    }

    this.getTypologies();

    this.getTimezones();

    this.getCountries();

    this.getDatasourceClasses();

    if (this.selectedRepo) {

      this.setupForm();

    }

  }

  setupForm() {

    if (this.selectedRepo) {

      console.log(`my datasource type is: ${this.selectedRepo.datasourceType}`);

      this.group.setValue({

        softwarePlatform: this.selectedRepo.typology,

        platformName: '',

        officialName: this.selectedRepo.officialName,

        issn: '',

        eissn: '',

        lissn: '',

        repoDescription: this.selectedRepo.description,

        country: this.selectedRepo.countryCode,

        longtitude: this.selectedRepo.longitude,

        latitude: this.selectedRepo.latitude,

        websiteUrl: this.selectedRepo.websiteUrl,

        institutionName: this.selectedRepo.organization,

        englishName: this.selectedRepo.englishName,

        logoUrl: this.selectedRepo.logoUrl,

        timezone: this.selectedRepo.timezone,

        datasourceType: this.selectedRepo.datasourceClass,

        adminEmail: this.selectedRepo.contactEmail

      });

      if (this.selectedRepo.datasourceType === 'journal') {

        let ssnToShow = this.selectedRepo.issn.slice(0, 4) + '-' + this.selectedRepo.issn.toString().slice(4);

        this.group.get('issn').setValue(ssnToShow);

        if (this.selectedRepo.eissn.trim().length) {

          ssnToShow = this.selectedRepo.eissn.slice(0, 4) + '-' + this.selectedRepo.eissn.toString().slice(4);

          this.group.get('eissn').setValue(ssnToShow);

        }

        if (this.selectedRepo.lissn.trim().length) {

          ssnToShow = this.selectedRepo.lissn.slice(0, 4) + '-' + this.selectedRepo.lissn.toString().slice(4);

          this.group.get('lissn').setValue(ssnToShow);

        }

      }

    }

  }

  getCountries() {

    this.repoService.getCountries()

      .subscribe(

        countries => this.countries = countries.sort( function(a, b) {

          if (a.name < b.name) {

            return -1;

          } else if (a.name > b.name) {

            return 1;

          } else {

            return 0;

          }

        } ),

        error => {

          this.errorMessage = noServiceMessage;

          console.log(error);

        });

  }

  getDatasourceClasses() {

    this.repoService.getDatasourceClasses(this.mode).subscribe(

      classes => this.datasourceClasses = classes,

      error => {

        this.errorMessage = noServiceMessage;

        console.log(error);

      },

      () => {

        for (const key of Object.keys(this.datasourceClasses)) {

          this.classCodes.push(key);

        }

      }

    );

  }

  getTypologies() {

    this.repoService.getTypologies().subscribe(

      types => this.typologies = types,

      error => console.log(error)

    );

  }

  getTimezones() {

    this.repoService.getTimezones().subscribe(

      zones => this.timezones = zones,

      error => console.log(error)

    );

  }

  registerDatasource() {

    this.formSubmitted = true;

    this.errorMessage = '';

    this.successMessage = '';

    window.scroll(1, 1);

    if (this.group.valid) {

      this.selectedRepo = this.createNewRepository();

      this.emittedInfo.emit(this.selectedRepo);

    } else {

      this.errorMessage = formErrorRequiredFields;

    }

  }

  createNewRepository(): Repository {

    const newRepo: Repository = new Repository();

    newRepo.officialName = this.group.get('officialName').value.toString();

    newRepo.englishName = this.group.get('englishName').value.toString();

    newRepo.websiteUrl = this.group.get('websiteUrl').value;

    newRepo.logoUrl = this.group.get('logoUrl').value;

    newRepo.contactEmail = this.group.get('adminEmail').value;

    newRepo.countryName = this.countries.filter(x => x.code === this.group.get('country').value)[0].name;

    newRepo.countryCode = this.group.get('country').value;

    newRepo.organization = this.group.get('institutionName').value.toString();

    newRepo.latitude = this.group.get('latitude').value;

    newRepo.longitude = this.group.get('longtitude').value;

    newRepo.timezone = this.group.get('timezone').value;

    newRepo.datasourceClass = this.group.get('datasourceType').value;

    if (this.group.get('softwarePlatform').value ) {

      newRepo.typology = this.group.get('softwarePlatform').value;

    } else if (this.group.get('platformName').value) {

      newRepo.typology = this.group.get('platformName').value;

    }

    // newRepo.typology = this.group.get('softwarePlatform').value;

    newRepo.description = this.group.get('repoDescription').value.toString();

    newRepo.issn = '';

    newRepo.eissn = '';

    newRepo.lissn = '';

    if ( this.group.get('issn').value ) {

      let ssnParts = this.group.get('issn').value.split('-');

      let correctSSN = ssnParts[0] + ssnParts[1];

      newRepo.issn = correctSSN;

      if ( this.group.get('eissn').value ) {

        ssnParts = this.group.get('eissn').value.split('-');

        correctSSN = ssnParts[0] + ssnParts[1];

        newRepo.eissn = correctSSN;

      }

      if ( this.group.get('lissn').value ) {

        ssnParts = this.group.get('lissn').value.split('-');

        correctSSN = ssnParts[0] + ssnParts[1];

        newRepo.lissn = correctSSN;

      }

    }

    newRepo.registeredBy = this.authService.getUserEmail();

    /* THE BELOW FIELDS ARE NOT SET IN GWT CODE*/

    newRepo.datasourceType = this.mode;

    newRepo.dateOfCreation = new Date(Date.now()); // NOT NEEDED ??

    newRepo.registered = true;

    newRepo.registrationDate = new Date(Date.now()); // NOT NEEDED ??

    return newRepo;

  }

}

/**

 * Created by stefania on 4/6/17.

 */

import { InlineFormWrapper, MyGroup } from './forms/my-group.interface';

import { MyArray, MyArrayInline, MyArrayWrapper, MyInlineArrayWrapper } from './forms/my-array.interface';

import { MyFormDirective } from './forms/my-form.directive';

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';

import { RouterModule } from '@angular/router';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { HttpClientModule } from '@angular/common/http';

import { AsideHelpContentComponent, HelpContentComponent } from './help-content.component';

import { ConfirmationDialogComponent } from './confirmation-dialog.component';

import { RepositoryTilesComponent } from './repository-tiles.component';

import { ForbiddenPageComponent } from './403-forbidden-page.component';

import { HelpContentService } from '../../services/help-content.service';

import { ModalModule, TabsModule } from 'ngx-bootstrap';

import { TopmenuLandingComponent } from '../topmenulanding/topmenu-landing.component';

import { FooterComponent } from '../footer/footer.component';

import { ReadMoreComponent, ReadMoreTextComponent } from './read-more.component';

import { SideMenuComponent } from "../sidemenu/sidemenu.component";

import { TopmenuDashboardComponent} from "../topmenudashboard/topmenu-dashboard.component";

import { DatasourceUpdateFormComponent } from "./sources-forms/datasource-update-form.component";

import { DatasourceCreateFormComponent } from "./sources-forms/datasource-create-form.component";

import { DatasourceNewInterfaceFormComponent } from "./sources-forms/datasource-new-interface-form.component";

const myGroups = [

  MyGroup,

  MyArray,

  MyArrayWrapper,

  MyArrayInline,

  MyFormDirective,

  MyInlineArrayWrapper,

  InlineFormWrapper

];

@NgModule({

  imports: [

    CommonModule,

    RouterModule,

    TabsModule.forRoot(),

    ModalModule.forRoot(),

    FormsModule,

    ReactiveFormsModule,

    HttpClientModule,

  ],

  entryComponents : [

    MyArrayWrapper

  ],

  declarations: [

    HelpContentComponent,

    AsideHelpContentComponent,

    ConfirmationDialogComponent,

    TopmenuLandingComponent,

    TopmenuDashboardComponent,

    SideMenuComponent,

    FooterComponent,

    RepositoryTilesComponent,

    ForbiddenPageComponent,

    ReadMoreComponent,

    ReadMoreTextComponent,

    DatasourceUpdateFormComponent,

    DatasourceCreateFormComponent,

    DatasourceNewInterfaceFormComponent,

    ...myGroups

  ],

  exports: [

    HelpContentComponent,

    AsideHelpContentComponent,

    ConfirmationDialogComponent,

    TopmenuLandingComponent,

    TopmenuDashboardComponent,

    SideMenuComponent,

    FooterComponent,

    RepositoryTilesComponent,

    ForbiddenPageComponent,

    ...myGroups,

    ReadMoreComponent,

    ReadMoreTextComponent,

    DatasourceUpdateFormComponent,

    DatasourceCreateFormComponent,

    DatasourceNewInterfaceFormComponent,

  ],

  providers: [

    HelpContentService

  ],

})

export class ReusableComponentsModule {

}

<div class="uk-section-primary uk-section uk-section-small uk-padding-remove-bottom">

  <div class="uk-container uk-container-expand">

    <div class="uk-container uk-container-expand uk-margin-small">

      <div class="uk-grid-collapse uk-grid" uk-grid="">

        <div id="footer#3" class="uk-width-expand@s uk-first-column">

          <div class="uk-margin-small uk-margin-remove-top uk-text-left@s uk-text-center">

            <img src="../../../assets/imgs/Logo_Horizontal_white_small-74927fe1.png" data-width="126" data-height="30" class="el-image" alt="OpenAIRE">

          </div>

          <!--div id="footer#5" class="uk-margin uk-text-left@s uk-text-center">

             <img src="assets/commission.jpg"   sizes="(min-width: 50px) 50px" data-width="427" data-height="285" class="el-image" alt="European Commission">

          </div-->

          <div class="uk-margin"><img style="margin-right: 8px; float: left;" src="../../../assets/imgs/commission.jpg" alt="flag black white low" width="50" height="33"><span style="font-size: 8pt; line-height: 0.7!important;">OpenAIRE-Advance receives funding from the European Union's Horizon 2020 Research and Innovation programme under Grant Agreement No. 777541.</span></div>

          <div id="footer#6" class="newsletter uk-margin uk-margin-remove-bottom uk-text-left@s uk-text-center uk-panel">

            <div class="uk-child-width-expand uk-grid-small uk-grid" uk-grid="">

              <div class="uk-width-auto@m uk-first-column"><a class="el-link" href="/newsletter/listing">

                <span class="el-image uk-icon" uk-icon="icon: rss; ratio: 1;">

                  <!--<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <circle cx="3.12" cy="16.8" r="1.85"></circle> <path fill="none" stroke="#000" stroke-width="1.1" d="M1.5,8.2 C1.78,8.18 2.06,8.16 2.35,8.16 C7.57,8.16 11.81,12.37 11.81,17.57 C11.81,17.89 11.79,18.19 11.76,18.5"></path> <path fill="none" stroke="#000" stroke-width="1.1" d="M1.5,2.52 C1.78,2.51 2.06,2.5 2.35,2.5 C10.72,2.5 17.5,9.24 17.5,17.57 C17.5,17.89 17.49,18.19 17.47,18.5"></path></svg>-->

                </span></a></div>            <div>

              <h5 class="el-title uk-margin uk-h5">        Newsletter    </h5>

            </div>

            </div>

          </div>

          <div id="footer#7" class="newsletter uk-margin-small uk-margin-remove-top uk-text-left@s uk-text-center uk-panel">

            <div class="acymailing_module" id="acymailing_module_formAcymailing60611">

              <div class="acymailing_mootoolsbutton" id="acymailing_toggle_formAcymailing60611">

                <p><a class="acymailing_togglemodule" id="acymailing_togglemodule_formAcymailing60611" target="_blank" href="https://www.openaire.eu/past-newsletters/listing">Subscribe</a></p>

              </div>

            </div>

          </div>

          <div class="uk-margin-small uk-margin-remove-top uk-text-left@s uk-text-center">

            <div class="uk-child-width-auto uk-grid-small uk-flex-left@s uk-flex-center uk-grid" uk-grid="">

              <div class="uk-first-column">