D-Net

<!--                <li aria-expanded="false" class=""><a href="#">Update Interfaces</a></li>-->

                <li aria-expanded="false" class=""><a href="#">Update Terms of Agreement</a></li>

                <li class="el-item">

                  <div>

                    <datasource-update-terms-form #updateTermsForm

                                                  [selectedRepo]="repo"

                                                  [showButton]=true

                                                  (emittedUrl)="getNewLogoUrl($event)"></datasource-update-terms-form>

                  </div>

                </li>

  @ViewChild('updateTermsForm')

import {SourcesModule} from '../sources/sources.module';

    imports: [

        CommonModule,

        TabsModule.forRoot(),

        FormsModule,

        ReactiveFormsModule,

        // SourcesRouting,

        RepositoryRoutingModule,

        ReusableComponentsModule,

        SourcesModule

    ],

                    <!-- ToU: uncomment this section -->

                        <!--<span class="title">Terms of Use</span>

                      </a>

                    </li>

                    <li role="tab" class=" {{ (currentStep < 4) ? 'disabled' : '' }} {{ (currentStep == 4) ? 'current' : '' }}" aria-disabled="true">

                      <a id="wizard_advanced-t-3" href="#wizard_advanced-h-3" aria-controls="wizard_advanced-p-2">

                        <span class="number">4</span>-->

                  <h3 id="wizard_advanced-h-0" tabindex="-1" class="title {{ (currentStep == 1) ? 'current' : '' }}">Enter Information</h3>

                  <h3 id="wizard_advanced-h-1" tabindex="-1" class="title {{ (currentStep == 2) ? 'current' : '' }}">Add Interfaces</h3>

                  <h3 id="wizard_advanced-h-2" tabindex="-1" class="title {{ (currentStep == 3) ? 'current' : '' }}">Finish</h3>

                  <!-- ToU: replace line above with line below -->

                  <!--                  <h3 id="wizard_advanced-h-2" tabindex="-1" class="title {{ (currentStep == 3) ? 'current' : '' }}">Terms of Use</h3>-->

                    <!-- ToU: delete line above and uncomment section below -->

                    <!--<div *ngIf="(currentStep === 3) && !loadingMessage" class="uk-grid">

                      <datasource-update-terms-form #updateTermsForm

                                                    [selectedRepo]="repo"

                                                    [showButton]=false></datasource-update-terms-form>

                    </div>

                  </section>

                  <!– fourth section –>

                  <h3 id="wizard_advanced-h-3" tabindex="-1" class="title {{ (currentStep == 4) ? 'current' : '' }}">Finish</h3>

                  <section id="wizard_advanced-p-3" role="tabpanel" aria-labelledby="wizard_advanced-h-3"

                           class="body step-3 {{ (currentStep == 4) ? 'current' : '' }}" data-step="3" aria-hidden="true">

                    <div *ngIf="(currentStep === 4) && !loadingMessage" class="row openAIRECompliantLogoDownload">-->

                <!-- ToU: replace above <div> with commented section below -->

                <!--<div *ngIf="currentStep != 4" class="actions clearfix">

                  <ul role="menu" aria-label="Pagination">

                    <li class="button_previous {{ (currentStep <= 1) ? 'disabled' : '' }}" aria-disabled="true">

                      <a (click)="moveBackAStep()" role="menuitem"><i class="material-icons"></i> Previous</a>

                    </li>

                    <li *ngIf="currentStep < 3" class="button_next" aria-hidden="false" aria-disabled="false">

                      <a (click)="moveAStep()" role="menuitem">Next<i class="material-icons"></i></a>

                    </li>

                    <li *ngIf="currentStep == 3" class="button_finish" aria-hidden="true">

                      <a (click)="moveAStep()" role="menuitem">Finish</a>

                    </li>

                  </ul>

                </div>-->

                    <!-- ToU: replace above line with below line -->

                    <!--<li role="tab" class=" {{ (currentStep < 3) ? 'disabled' : '' }} {{ (currentStep == 3) ? 'current' : '' }}" aria-disabled="true">-->

                        <!-- ToU: uncomment this section -->

                        <!--<span class="title">Terms of Use</span>

                      </a>

                    </li>

                    <li role="tab" class="last {{ (currentStep < 4) ? 'disabled' : '' }} {{ (currentStep == 4) ? 'current' : '' }}" aria-disabled="true">

                      <a id="wizard_advanced-t-4" href="#wizard_advanced-h-4" aria-controls="wizard_advanced-p-4">

                        <span class="number">5</span>-->

                  <!-- ToU: replace line above with line below -->

                  <!--<h3 id="wizard_advanced-h-3" tabindex="-1" class="title {{ (currentStep == 3) ? 'current' : '' }}">Terms of Use</h3>-->

                  <!-- ToU: replace above 3 lines (starting at class="body step-3) with commented section below -->

                  <!--class="body step-3 {{ (currentStep == 3) ? 'current' : '' }}" data-step="3"  aria-hidden="true">

                    <div *ngIf="(currentStep === 3) && !loadingMessage" class="uk-grid uk-grid-match">

                      <datasource-update-terms-form #updateTermsForm

                                                    [selectedRepo]="repo"

                                                    [showButton]=false></datasource-update-terms-form>

                    </div>

                  </section>

                  <!– fifth section –>

                  <h3 id="wizard_advanced-h-4" tabindex="-1" class="title {{ (currentStep == 4) ? 'current' : '' }}">Finish</h3>

                  <section id="wizard_advanced-p-4" role="tabpanel" aria-labelledby="wizard_advanced-h-4"

                           class="body step-4 {{ (currentStep == 4) ? 'current' : '' }}" data-step="3"  aria-hidden="true">

                    <div *ngIf="(currentStep === 4) && !loadingMessage" class="row openAIRECompliantLogoDownload">-->

                <!-- ToU: replace above <div> with commented section below -->

                <!--<div *ngIf="currentStep != 4" class="actions clearfix">

                  <ul role="menu" aria-label="Pagination">

                    <li class="button_previous {{ (currentStep < 1) ? 'disabled' : '' }}" aria-disabled="true">

                      <a (click)="moveBackAStep()" role="menuitem"><i class="material-icons"></i> Previous</a>

                    </li>

                    <li *ngIf="currentStep < 3" class="button_next" aria-hidden="false" aria-disabled="false">

                      <a (click)="moveAStep()" role="menuitem">Next<i class="material-icons"></i></a>

                    </li>

                    <li *ngIf="currentStep == 3" class="button_finish" aria-hidden="true">

                      <a (click)="moveAStep()" role="menuitem">Finish</a>

                    </li>

                  </ul>

                </div>-->

  // @ViewChild('updateTermsForm')

        // ToU: to enable ToU delete the 2 lines above and uncomment the section below

      /*} else if (stepName === 'termsOfUse') {

        if (this.interfacesArray && this.interfacesArray.length === 0) {

          this.router.navigateByUrl(`/sources/register/${this.datasourceType}?step=basicInformation`);

        } else {

          this.currentStep = 3;

        }

      } else if (stepName === 'finish') {

        this.currentStep = 4;*/

// ToU: replace above line with the comment below

//               this.router.navigateByUrl(`/sources/register/${this.datasourceType}?step=termsOfUse`);

      // ToU: uncomment these lines

    // } else if ( this.currentStep === 3 ) {

    //   this.addRepository();

      // ToU: uncomment these lines

    // } else if (this.currentStep === 3) {

    //   this.router.navigateByUrl(`/sources/register/${this.datasourceType}?step=interfaces`);

          // TODO: update terms when backend is ready, maybe POST with updateRepository

  // @ViewChild('updateTermsForm')

        // ToU: to enable ToU delete the 2 lines above and uncomment the section below

        /*} else if (stepName === 'termsOfUse') {

          if (!this.interfacesArray) {

            this.router.navigateByUrl(`/sources/register/${this.datasourceType}?step=selectDatasource`);

          } else {

            this.currentStep = 3;

          }

        } else if (stepName === 'finish') {

          this.currentStep = 4;*/

// ToU: replace above line with the comment below

              // this.router.navigateByUrl(`/sources/register/${this.datasourceType}?step=termsOfUse`);

      // ToU: uncomment these lines

      // } else if (this.currentStep === 3) {

    //   this.registerRepository();

      // ToU: uncomment these lines

      // } else if (this.currentStep === 3) {

    //   this.router.navigateByUrl(`/sources/register/${this.datasourceType}?step=interfaces`);

          // TODO: update terms when backend is ready, maybe POST with updateRepository

import { DatasourceUpdateTermsFormComponent } from '../../shared/reusablecomponents/sources-forms/datasource-update-terms-form.component';

  exports: [

    DatasourceUpdateTermsFormComponent

  ],

    DatasourceUpdateTermsFormComponent,

<!--&lt;!&ndash; Terms of Use (modal) &ndash;&gt;-->

<!--<confirmation-dialog #subscribeToTermsModal [title]=modalTitle [isModalShown]=isModalShown-->

<!--                     [confirmActionButton]=modalButton (emitObject)="updateTerms()">-->

<!--  <form class="" [formGroup]="agreementForm">-->

<!--    <div formArrayName="terms">-->

<!--      <table class="table">-->

<!--        <tr class="uk-text-nowrap">Do you agree with the <a href="https://zenodo.org/record/1446384#.XiGIAdmxU5n" target="_blank">terms of use</a>?</tr>-->

<!--        <tbody>-->

<!--        <tr class="el-item" *ngFor="let term of terms.controls; let i=index">-->

<!--&lt;!&ndash;          {{term.get('accept').value}}&ndash;&gt;-->

<!--          <br> {{term.get('name').value}} <br>-->

<!--          <div [formGroupName]="i">-->

<!--            <label>-->

<!--              <input id="i" type="checkbox" formControlName="accept"> Yes, I agree to the terms of use.-->

<!--            </label>-->

<!--          </div>-->

<!--        </tr>-->

<!--        </tbody>-->

<!--      </table>-->

<!--    </div>-->

<!--  </form>-->

<!--  &lt;!&ndash;    <pre>{{this.agreementForm.value | json}}</pre>&ndash;&gt;-->

<!--</confirmation-dialog>-->

import {Component, OnInit, ViewChild} from '@angular/core';

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

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

import { RepositorySnippet } from './domain/typeScriptClasses';

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

import {element} from 'protractor';

import {timestamp} from 'rxjs/operators';

  reposOfUser: RepositorySnippet[] = [];

  modalTitle = 'Terms of Use';

  isModalShown: boolean;

  modalButton = 'OK';

  agreementForm = this.fb.group({

    terms: this.fb.array([])

  });

  consentTermsOfUseDate: Date;

  @ViewChild('subscribeToTermsModal')

  public subscribeToTermsModal: ConfirmationDialogComponent;

              private matomoTracker: MatomoTracker,

              private repositoryService: RepositoryService,

              private fb: FormBuilder) {

  getReposOfUser(): void {

    this.repositoryService.getRepositoriesOfUser()

      .subscribe(

        repos => { this.reposOfUser = repos; },

        error => { console.log(error); },

        () => {

          console.log(this.reposOfUser);

          this.reposOfUser.forEach( repo => {

            // TODO: change !repo.consentTermsOfUse check when it gets a non-null value

            if (this.authService.isLoggedIn && !repo.consentTermsOfUse) {

              this.addTerm(repo.officialname, repo.id, repo.consentTermsOfUse);

              this.isModalShown = true;

            }

          });

        }

      );

  }

  updateTerms() {

    /*   update consentTermsOfUse, consentTermsOfUseDate(?)

         depending on  what value will consentTermsOfUse hold

         Also what type of consentTermsOfUse will be? boolean or string */

    for (let i = 0; i < this.terms.length; i++) {

      const  id = this.terms.controls[i].get('id').value;

      if (this.terms.controls[i].get('accept').value === true) {

        console.log(`Agreed to the Terms of Use for: `, id);

      }

    }

    this.consentTermsOfUseDate = new Date(Date.now());

    console.log(this.consentTermsOfUseDate);

    console.log('will POST when backend is ready');

  }

    // this.getReposOfUser();

  addTerm(name: string, id: string, consent: string) {

    this.terms.push(this.newTerm(name, id, consent));

  }

  newTerm(name: string, id: string, consent: string): FormGroup {

    return this.fb.group({

      id: [id],

      name: [name],

      accept: [(consent ? consent : true)]

    });

  }

  get terms() {

    return this.agreementForm.get('terms') as FormArray;

  }

      <label class="" *ngIf="description.label !== null && description.label !== ''"

<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>

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, FormArray, FormBuilder, FormGroup, Validators} from '@angular/forms';

import { Country, Repository, RepositorySnippet, 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 {Router} from '@angular/router';

@Component ({

  selector: 'datasource-update-terms-form',

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

})

export class DatasourceUpdateTermsFormComponent implements OnInit {

  agreementForm = this.fb.group({

    acceptTerms: '',

    optOut: ''

  });

  consentTermsOfUseDate: Date;

  errorMessage: string;

  successMessage: string;

  loadingMessage: 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;

  termsTick: boolean;

  dataMiningTick: boolean;

  readonly updateGroupDefinition = {

    softwarePlatform : ''

  };

  constructor(

    private fb: FormBuilder,

    private repoService: RepositoryService,

    private authService: AuthenticationService,

    private router: Router

  ) {}

  ngOnInit() {

    console.log(this.selectedRepo);

    // this.dataMiningTick = false; // until we have an actual value

    if (this.router.url.indexOf('/sources/update') > -1) {

      console.log('up');

      this.termsTick = (this.selectedRepo.consentTermsOfUse ? (this.selectedRepo.consentTermsOfUse === 'true') : true);

      // this.addTerm(this.selectedRepo.consentTermsOfUse, this.dataMiningTick);

    } else if (this.router.url.indexOf('/sources/register') > -1) {

      console.log('reg');

      this.termsTick = true;

    }

  }

  // TODO: review updateRepo when backend is ready to POST terms

  updateRepo() {

    this.formSubmitted = true;

    this.errorMessage = '';

    this.successMessage = '';

    window.scroll(1, 1);

    if (this.agreementForm.valid) {

      if (this.showButton) {

        this.loadingMessage = formSubmitting;

        this.errorMessage = '';

        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;

            }

          }

        );

      }

    } else {

      this.errorMessage = formErrorRequiredFields;

    }

  }

}

<!-- 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>-->

  consentTermsOfUse: string;

  consentTermsOfUseDate: Date;

  fullTextDownload: string;