D-Net

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

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

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

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

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

import {ActivatedRoute, Params, Router} from '@angular/router';

import {URLParameter} from '../../domain/url-parameter';

@Component({

  selector: 'app-registration',

  templateUrl: 'adminPg-registrations.component.html',

  styleUrls: ['./adminPg-registrations.component.css']

})

export class RegistrationComponent implements OnInit {

  errorMessage: string;

  successMessage: string;

  loadingMessage: string;

  countries: Country[] = [];

  repositorySnippet: RepositorySnippet[] = [];

  urlParams: URLParameter[] = [];

  thisIsForBadUse: RepositorySnippet[] = []; // remove if page total is fixed!!!

  formPrepare = {

    country: '',

    typology: '',

    officialName: '',

    requestSortBy: 'registrationdate',

    order: 'DESCENDING',

    page: '0',

    size: '25'

  };

  dataForm: FormGroup;

  constructor(private repoService: RepositoryService,

              private fb: FormBuilder,

              private route: ActivatedRoute,

              private router: Router) { }

  ngOnInit() {

    this.dataForm = this.fb.group(this.formPrepare);

    const tempUrlParams = new Array<URLParameter>();

    this.route.queryParams

      .subscribe(params => {

        for (const i in params) {

          this.dataForm.get(i).setValue(params[i]);

        }

        for (let i in this.dataForm.controls) {

          if (this.dataForm.get(i).value) {

            tempUrlParams.push({key: i, value: [this.dataForm.get(i).value]});

          }

        }

        this.handleChange();

      },

      error => this.errorMessage = <any>error

    );

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

        }

      );

  }

  getRegisteredRepositories(urlParams: URLParameter[]) {

    this.loadingMessage = loadingReposMessage;

    this.repoService.searchRegisteredRepositories(this.dataForm.get('page').value,

      this.dataForm.get('size').value, urlParams).subscribe(

        suc => this.repositorySnippet = suc,

        error => {

          console.log(error);

          this.loadingMessage = '';

        },

      () => this.loadingMessage = ''

      );

  }

  handleChange() {

    const tempUrlParams = new Array<URLParameter>();

    const map: { [name: string]: string; } = {};

    for (let i in this.dataForm.controls) {

      if (this.dataForm.get(i).value !== '') {

        tempUrlParams.push({key: i, value: [this.dataForm.get(i).value]});

        map[i] = this.dataForm.get(i).value;

      }

    }

    this.router.navigate([`/admin/registrations`],

      {queryParams: map});

    this.getRegisteredRepositories(tempUrlParams);

  }

  handleChangeAndResetPage() {

    this.dataForm.get('page').setValue(0);

    this.handleChange();

  }

  getCountryName(countryCode): string {

    for (const country of Object.values(this.countries)) {

      if (country.code === countryCode) {

        return country.name;

      }

    }

  }

  previousPage() {

    if (this.dataForm.get('page').value > 0) {

      this.dataForm.get('page').setValue(+this.dataForm.get('page').value - 1);

      this.handleChange();

    }

  }

  nextPage() {

    /** remove when page total is fixed!!! **/

    const tempUrlParams = new Array<URLParameter>();

    for (let i in this.dataForm.controls) {

      if (this.dataForm.get(i).value !== '') {

        tempUrlParams.push({key: i, value: [this.dataForm.get(i).value]});

      }

    }

      this.repoService.searchRegisteredRepositories(+this.dataForm.get('page').value + 1,

      this.dataForm.get('size').value, tempUrlParams).subscribe(

      suc => this.thisIsForBadUse = suc,

      error => console.log(error),

      () => {

        if (!(this.thisIsForBadUse.length === 0)) {

          this.dataForm.get('page').setValue(+this.dataForm.get('page').value + 1);

          this.handleChange();

        }

      }

    );

    /** **/

  }

}

.uk-form-horizontal .uk-form-label {

  width: 100px;

}

.uk-form-horizontal .uk-form-controls {

  margin-left: 115px;

}

.uk-search-default .uk-search-input {

  padding-left: 15px;

  padding-right: 15px;

}

          <div class="uk-grid">

            <div class="uk-width-1-1@m uk-padding" style="background-color: #fff; text-align: center">

              <form [formGroup]="dataForm" class="uk-search uk-search-default uk-width-1-1@m">

                <input class="uk-width-1-2 uk-search-input" type="search" formControlName="searchField" placeholder="Search..." style="background-color: #fff">

                <button class="uk-button" (click)="handleChangeAndResetPage()">Search</button>

                <div class="uk-position-right">

                  <button class="uk-button uk-button-primary" (click)="downloadCSV()">Export to CSV</button>

                </div>

              </form>

          <div class="uk-grid">

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

              <div class="uk-grid">

                <div class="uk-width-1-1@m uk-margin-medium">

                  <form [formGroup]="dataForm" class="uk-form-horizontal uk-grid">

                    <div class="uk-width-2-5@m">

                      <div class="uk-margin">

                        <label class="uk-form-label uk-text-right" for="quantity">Items per page: </label>

                        <div class="uk-form-controls">

                          <select class="uk-select" id="quantity" (change)="handleChangeAndResetPage()" formControlName="quantity">

                            <option value="10">10</option>

                            <option value="25" selected>25</option>

                            <option value="50">50</option>

                            <option value="100">100</option>

                          </select>

                        </div>

                      </div>

                    </div>

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

                      <div class="uk-float-right">

                        <label class="uk-form-label uk-text-right" for="orderBy">Order by: </label>

                        <div class="uk-form-controls">

                          <select class="uk-select" id="orderBy" (change)="handleChangeAndResetPage()" formControlName="order">

                            <option value="DSC">Descending</option>

                            <option value="ASC" selected>Ascending</option>

                          </select>

                        </div>

                      </div>

                      <div class="uk-float-right">

                        <label class="uk-form-label uk-text-right" for="sortBy">Sort by: </label>

                        <div class="uk-form-controls">

                          <select class="uk-select" id="sortBy" (change)="handleChangeAndResetPage()" formControlName="orderField">

                            <option value="CREATION_DATE" >Date</option>

                            <option value="REPOSITORY_NAME" selected>Name</option>

                          </select>

                        </div>

                      </div>

                    </div>

                  </form>

                </div>

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

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

                  <!-- TABLE -->

                  <div *ngIf="piwiks && piwiks.results.length>0">

                    <table class="uk-table uk-table-striped uk-table-middle" style="font-size: 12px;">

                      <thead>

                      <tr>

                        <th class="uk-text-nowrap">Repository</th>

                        <th class="uk-text-nowrap">Piwik site</th>

                        <th class="uk-text-nowrap">Requested on</th>

                        <th class="uk-text-nowrap">Requestor</th>

                        <th class="uk-text-nowrap">Validated</th>

                        <th class="uk-text-nowrap">Actions</th>

                      </tr>

                      </thead>

                      <tbody>

                      <tr class="el-item" *ngFor="let piwik of piwiks.results">

                        <td class="uk-table-shrink uk-text-truncate" style="min-width: 400px;">

                          {{ piwik.repositoryName }}<br>(ID: {{ piwik.repositoryId }})

                        </td>

                        <td class="uk-table-shrink">ID: {{ piwik.siteId }}<br>Authentication Token: {{ piwik.authenticationToken }}</td>

                        <td class="uk-text-nowrap uk-table-shrink">{{ piwik.creationDate | date : "yyyy-MM-dd" }}</td>

                        <td class="uk-text-nowrap uk-table-shrink">{{ piwik.requestorName }}<br>{{ piwik.requestorEmail }}</td>

                        <td class="uk-text-nowrap uk-table-shrink">

                          <span *ngIf="piwik.validated">YES<br>on {{ piwik.validationDate | date : "yyyy-MM-dd" }}</span>

                          <span *ngIf="!piwik.validated">NO</span>

                        </td>

                        <td class="uk-text-nowrap uk-table-shrink">

                          <button id="{{ piwik.repositoryId }}"

                                  *ngIf="!piwik.validated"

                                  class="uk-button uk-button-primary validate"

                                  (click)="confirmApproval(piwik.repositoryId)">Validate</button>

                        </td>

                      </tr>

                      </tbody>

                    </table>

                  </div>

                  <ul class="uk-pagination uk-flex-center" uk-margin>

                    <li><a (click)="previousPage()"><span uk-pagination-previous></span></a></li>

<!--                    <li class="uk-active"><span>{{+dataForm.get('page').value + 1}}</span></li>-->

                    <li [ngClass]="{'uk-active': (this.dataForm.get('page').value == page) }" *ngFor="let page of pages">

                      <a (click)="selectPage(page)">{{page+1}}</a> </li>

                    <li><a (click)="nextPage()"><span uk-pagination-next></span></a></li>

                  </ul>

                </div>

              </div>

            </div>

import {RegistrationComponent} from './adminPg-registrations.component';

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

import {URLParameter} from '../../domain/url-parameter';

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

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

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

import {PiwikInfoPage} from '../../domain/page-content';

import {environment} from '../../../environments/environment';

import {st} from '@angular/core/src/render3';

  piwiks: PiwikInfoPage;

  urlParams: URLParameter[] = [];

  formPrepare = {

    searchField: '',

    orderField: 'REPOSITORY_NAME',

    order: 'ASC',

    page: '0',

    quantity: '25',

    from: '0'

  };

  dataForm: FormGroup;

  private pageTotal: number;

  private piwiksTotal: number;

  private pages = [];

  private offset = 2;

  constructor(private piwikService: PiwikService,

              private fb: FormBuilder,

              private route: ActivatedRoute,

              private router: Router) {}

    this.dataForm = this.fb.group(this.formPrepare);

    this.urlParams = [];

    this.route.queryParams

      .subscribe(params => {

          for (const i in params) {

            this.dataForm.get(i).setValue(params[i]);

          }

          for (let i in this.dataForm.controls) {

            if (this.dataForm.get(i).value) {

              this.urlParams.push({key: i, value: [this.dataForm.get(i).value]});

            }

          }

          this.handleChange();

        },

        error => this.errorMessage = <any>error

      );

  downloadCSV() {

    const url = environment.API_ENDPOINT;

    let csvUrlParams = '/piwik/getPiwikSitesForRepos/csv?';

    for (let i in this.dataForm.controls) {

      if (this.dataForm.get(i).value !== '') {

        csvUrlParams = csvUrlParams.concat(i, '=', this.dataForm.get(i).value, '&');

      }

    }

    csvUrlParams = csvUrlParams.split('&page=')[0];

    window.open(url + csvUrlParams, '_blank');

  }

    this.piwikService.getPiwikSitesForRepos(this.urlParams)

      .subscribe(

        piwiks => {

          this.piwiks = piwiks;

          this.getPages();

        },

  handleChange() {

    this.urlParams = [];

    const map: { [name: string]: string; } = {};

    for (let i in this.dataForm.controls) {

      if (this.dataForm.get(i).value !== '') {

        this.urlParams.push({key: i, value: [this.dataForm.get(i).value]});

        map[i] = this.dataForm.get(i).value;

      }

    }

    this.router.navigate([`/admin/metrics`], {queryParams: map});

    this.getPiwiks();

  }

  handleChangeAndResetPage() {

    this.dataForm.get('page').setValue(0);

    this.dataForm.get('from').setValue(0);

    this.handleChange();

  }

  getPages() {

    let addToEndCounter = 0;

    let addToStartCounter = 0;

    this.pages = [];

    this.pageTotal = Math.ceil(this.piwiks.total / (this.dataForm.get('quantity').value));

    for ( let i = (+this.dataForm.get('page').value - this.offset); i < (+this.dataForm.get('page').value + 1 + this.offset); ++i ) {

      if ( i < 0 ) { addToEndCounter++; }

      if ( i >= this.pageTotal ) { addToStartCounter++; }

      if ((i >= 0) && (i < this.pageTotal)) {

        this.pages.push(i);

      }

    }

    for ( let i = 0; i < addToEndCounter; ++i ) {

      if (this.pages.length < this.pageTotal) {

        this.pages.push(this.pages.length);

      }

    }

    for ( let i = 0; i < addToStartCounter; ++i ) {

      if (this.pages[0] > 0) {

        this.pages.unshift(this.pages[0] - 1 );

      }

    }

  }

  selectPage(page) {

    this.dataForm.get('page').setValue(page);

    this.dataForm.get('from').setValue(((+this.dataForm.get('page').value) * (+this.dataForm.get('quantity').value)));

    this.handleChange();

  }

  previousPage() {

    if (this.dataForm.get('page').value > 0) {

      this.dataForm.get('page').setValue(+this.dataForm.get('page').value - 1);

      this.dataForm.get('from').setValue(+this.dataForm.get('from').value - +this.dataForm.get('quantity').value);

      this.handleChange();

    }

  }

  nextPage() {

    // if ((this.dataForm.get('searchField').value) !== '') { this.piwiksTotal = this.piwiks.to; } else { this.piwiksTotal = this.piwiks.total; }

    this.pageTotal = Math.ceil(this.piwiks.total / (this.dataForm.get('quantity').value)) - 1;

    if (this.dataForm.get('page').value < this.pageTotal) {

      this.dataForm.get('page').setValue(+this.dataForm.get('page').value + 1);

      this.dataForm.get('from').setValue(+this.dataForm.get('from').value + +this.dataForm.get('quantity').value);

      this.handleChange();

    }

  }

import {RegistrationComponent} from './adminPg-registrations.component';

<div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">

  <div class="uk-width-1-1@m uk-first-column">

    <h1 class="uk-h2">Registrations Admin</h1>

    <!-- 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-container uk-container-expand uk-margin-medium-top uk-margin-medium-bottom">

      <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 *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{ errorMessage }}</div>

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

          <div class="uk-grid">

            <div class="uk-width-1-1@m uk-padding" style="background-color: #fff; text-align: center">

              <form [formGroup]="dataForm" class="uk-search uk-search-default uk-width-1-1@m">

                <input class="uk-width-1-2 uk-search-input" type="search" formControlName="officialName" placeholder="Search (official name) ..." style="background-color: #fff">

                <button class="uk-button" (click)="handleChangeAndResetPage()">Search</button>

              </form>

            </div>

          </div>

          <div class="uk-grid">

            <div class="uk-width-1-4@m">

              <form [formGroup]="dataForm" class="uk-form-stacked">

                <div class="uk-form-label uk-text-large">Filtered By</div>

                <div class="uk-margin">

                  <div class="uk-form-label uk-text-large">Datasource Type</div>

                  <div class="uk-form-controls">

                    <label><input class="uk-radio" type="radio" value="" (change)="handleChangeAndResetPage()" formControlName="typology"> Any</label><br>

                    <label><input class="uk-radio" type="radio" value="Aggregator" (change)="handleChangeAndResetPage()" formControlName="typology"> Aggregator</label><br>

                    <label><input class="uk-radio" type="radio" value="Journal" (change)="handleChangeAndResetPage()" formControlName="typology"> Journal</label><br>

                    <label><input class="uk-radio" type="radio" value="datarepository" (change)="handleChangeAndResetPage()" formControlName="typology"> Data Repository</label><br>

                    <label><input class="uk-radio" type="radio" value="pubsrepository" (change)="handleChangeAndResetPage()" formControlName="typology"> Public Repository</label><br>

                    <label><input class="uk-radio" type="radio" value="entityregistry" (change)="handleChangeAndResetPage()" formControlName="typology"> Entity Registry</label><br>

                    <label><input class="uk-radio" type="radio" value="Institutional" (change)="handleChangeAndResetPage()" formControlName="typology"> Institutional</label><br>

                    <label><input class="uk-radio" type="radio" value="Thematic" (change)="handleChangeAndResetPage()" formControlName="typology"> Thematic</label><br>

                    <label><input class="uk-radio" type="radio" value="Products" (change)="handleChangeAndResetPage()" formControlName="typology"> Products</label><br>

                    <label><input class="uk-radio" type="radio" value="Unknown" (change)="handleChangeAndResetPage()" formControlName="typology"> Unknown</label>

                  </div>

                </div>

                <div class="uk-margin">

                  <div class="uk-form-label uk-text-large">Countries</div>

                  <div class="uk-form-controls">

                    <ng-container *ngIf="countries && countries.length>0">

                      <read-more [maxHeight]="238">

                        <div><input class="uk-radio" type="radio" value="" (change)="handleChangeAndResetPage()" formControlName="country"> Any</div>

                        <ng-container *ngFor="let country of countries">

                          <div class="">

                            <input class="uk-radio" type="radio" value="{{country.code}}"

                                   (change)="handleChangeAndResetPage()" formControlName="country"> {{country.name}}

                          </div>

                        </ng-container>

                      </read-more>

                    </ng-container>

                  </div>

                </div>

              </form>

            </div>

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

              <div class="uk-grid">

                <div class="uk-width-1-1@m uk-margin-medium">

                  <form [formGroup]="dataForm" class="uk-form-horizontal uk-grid">

                    <div class="uk-width-2-5@m">

                      <div class="uk-margin">

                        <label class="uk-form-label uk-text-right" for="size">Items per page: </label>

                        <div class="uk-form-controls">

                          <select class="uk-select" id="size" (change)="handleChangeAndResetPage()" formControlName="size">

                            <option value="10">10</option>

                            <option value="25" selected>25</option>

                            <option value="50">50</option>

                            <option value="100">100</option>

                          </select>

                        </div>

                      </div>

                    </div>

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

                      <div class="uk-float-right">

                        <label class="uk-form-label uk-text-right" for="orderBy">Order by: </label>

                        <div class="uk-form-controls">

                          <select class="uk-select" id="orderBy" (change)="handleChangeAndResetPage()" formControlName="order">

                            <option value="DESCENDING" selected>Descending</option>

                            <option value="ASCENDING">Ascending</option>

                          </select>

                        </div>

                      </div>

                      <div class="uk-float-right">

                        <label class="uk-form-label uk-text-right" for="sortBy">Sort by: </label>

                        <div class="uk-form-controls">

                          <select class="uk-select" id="sortBy" (change)="handleChangeAndResetPage()" formControlName="requestSortBy">

                            <option value="registrationdate" selected>Date</option>

                            <option value="officialname">Name</option>

                          </select>

                        </div>

                      </div>

                    </div>

                  </form>

                </div>

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

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

                  <!-- TABLE -->

                  <table class="uk-table uk-table-striped">

                    <thead>

                    <tr>

                      <th>Repository</th>

                      <th>Date</th>

                      <th>Organization</th>

                      <th>Type</th>

                    </tr>

                    </thead>

                    <tbody>

                    <tr *ngFor="let res of repositorySnippet">

                      <td class="uk-width-1-6@m">{{res.officialname}} <br> ({{res.id}}) <br> {{res.registeredby}}</td>

                      <td >{{res.registrationdate}}</td>

                      <td> <div *ngFor="let organization of res.organizations">{{organization.legalname + ' (' + getCountryName(organization.country) + ')'}}<br></div></td>

                      <td>{{res.typology.split('::')[0]}}<br>{{res.typology.split('::')[1]}}<br>{{res.typology.split('::')[2]}}</td>

                    </tr>

                    </tbody>

                  </table>

                  <ul class="uk-pagination uk-flex-center" uk-margin>

                    <li><a (click)="previousPage()"><span uk-pagination-previous></span></a></li>

                    <li class="uk-active"><span>{{+dataForm.get('page').value + 1}}</span></li>

                    <li><a (click)="nextPage()"><span uk-pagination-next></span></a></li>

                  </ul>

                </div>

              </div>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</div>

import {HttpClient, HttpHeaders, HttpParams} from '@angular/common/http';

import {URLParameter} from '../domain/url-parameter';

import {PiwikInfoPage} from '../domain/page-content';

  getPiwikSitesForRepos(urlParams: URLParameter[]): Observable<PiwikInfoPage> {

    let params = new HttpParams();

    for (const urlParameter of urlParams) {

      for (const value of urlParameter.value) {

        params = params.append(urlParameter.key, value);

      }

    }

    return this.httpClient.get<PiwikInfoPage>(url, {params, withCredentials: true});

                              <li style="display: block"><a [routerLink]="['/admin/metrics']">Metrics</a></li>

import {PiwikInfo} from './typeScriptClasses';

export class PiwikInfoPage {

  total: number;

  from: number;

  to: number;

  results: PiwikInfo[];

}