Index: modules/uoa-repository-dashboard-gui/trunk/src/app/pages/adminPg/registration.component.ts
===================================================================
--- modules/uoa-repository-dashboard-gui/trunk/src/app/pages/adminPg/registration.component.ts	(revision 56888)
+++ modules/uoa-repository-dashboard-gui/trunk/src/app/pages/adminPg/registration.component.ts	(nonexistent)
@@ -1,154 +0,0 @@
-import {Component, OnInit} from '@angular/core';
-import {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: 'registration.component.html',
-  styleUrls: ['./registration.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: '',
-    englishName: '',
-    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.repoService.searchRegisteredRepositories(this.dataForm.get('page').value,
-      this.dataForm.get('size').value, urlParams).subscribe(
-        suc => this.repositorySnippet = suc,
-        error => console.log(error),
-      );
-  }
-
-  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();
-        }
-      }
-    );
-    /** **/
-
-  }
-
-}
Index: modules/uoa-repository-dashboard-gui/trunk/src/app/pages/adminPg/registration.component.css
===================================================================
--- modules/uoa-repository-dashboard-gui/trunk/src/app/pages/adminPg/registration.component.css	(revision 56888)
+++ modules/uoa-repository-dashboard-gui/trunk/src/app/pages/adminPg/registration.component.css	(nonexistent)
@@ -1,12 +0,0 @@
-.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;
-}
Index: modules/uoa-repository-dashboard-gui/trunk/src/app/pages/adminPg/registration.component.html
===================================================================
--- modules/uoa-repository-dashboard-gui/trunk/src/app/pages/adminPg/registration.component.html	(revision 56888)
+++ modules/uoa-repository-dashboard-gui/trunk/src/app/pages/adminPg/registration.component.html	(nonexistent)
@@ -1,169 +0,0 @@
-<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 Page</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 *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 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">
-
-                  <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>
Index: modules/uoa-repository-dashboard-gui/trunk/src/app/pages/adminPg/adminPg-registrations.component.ts
===================================================================
--- modules/uoa-repository-dashboard-gui/trunk/src/app/pages/adminPg/adminPg-registrations.component.ts	(nonexistent)
+++ modules/uoa-repository-dashboard-gui/trunk/src/app/pages/adminPg/adminPg-registrations.component.ts	(revision 56889)
@@ -0,0 +1,157 @@
+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();
+        }
+      }
+    );
+    /** **/
+
+  }
+
+}
Index: modules/uoa-repository-dashboard-gui/trunk/src/app/pages/adminPg/adminPg-registrations.component.css
===================================================================
--- modules/uoa-repository-dashboard-gui/trunk/src/app/pages/adminPg/adminPg-registrations.component.css	(nonexistent)
+++ modules/uoa-repository-dashboard-gui/trunk/src/app/pages/adminPg/adminPg-registrations.component.css	(revision 56889)
@@ -0,0 +1,12 @@
+.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;
+}
Index: modules/uoa-repository-dashboard-gui/trunk/src/app/pages/adminPg/adminPg-metrics.component.html
===================================================================
--- modules/uoa-repository-dashboard-gui/trunk/src/app/pages/adminPg/adminPg-metrics.component.html	(revision 56888)
+++ modules/uoa-repository-dashboard-gui/trunk/src/app/pages/adminPg/adminPg-metrics.component.html	(revision 56889)
@@ -21,45 +21,124 @@
 
           <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{ errorMessage }}</div>
           <div *ngIf="successMessage" class="uk-alert uk-alert-success">{{ successMessage }}</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 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>
-            <div class="whiteFilm"></div>
           </div>
-          <div *ngIf="piwiks && piwiks.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">
-                <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 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>
           </div>
 
         </div>
Index: modules/uoa-repository-dashboard-gui/trunk/src/app/pages/adminPg/adminPg.module.ts
===================================================================
--- modules/uoa-repository-dashboard-gui/trunk/src/app/pages/adminPg/adminPg.module.ts	(revision 56888)
+++ modules/uoa-repository-dashboard-gui/trunk/src/app/pages/adminPg/adminPg.module.ts	(revision 56889)
@@ -6,7 +6,7 @@
 import { ReusableComponentsModule } from '../../shared/reusablecomponents/reusable-components.module';
 import { AdminPgComponent } from './adminPg.component';
 import { AdminPgMetricsComponent } from './adminPg-metrics.component';
-import {RegistrationComponent} from './registration.component';
+import {RegistrationComponent} from './adminPg-registrations.component';
 
 @NgModule ({
   imports: [
Index: modules/uoa-repository-dashboard-gui/trunk/src/app/pages/adminPg/adminPg-metrics.component.ts
===================================================================
--- modules/uoa-repository-dashboard-gui/trunk/src/app/pages/adminPg/adminPg-metrics.component.ts	(revision 56888)
+++ modules/uoa-repository-dashboard-gui/trunk/src/app/pages/adminPg/adminPg-metrics.component.ts	(revision 56889)
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import {Component, Input, OnInit, ViewChild} from '@angular/core';
 import { PiwikService } from '../../services/piwik.service';
 import { PiwikInfo } from '../../domain/typeScriptClasses';
 import {
@@ -9,6 +9,13 @@
   validatePiwikSiteSuccess
 } from '../../domain/shared-messages';
 import { ConfirmationDialogComponent } from '../../shared/reusablecomponents/confirmation-dialog.component';
+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';
 
 @Component ({
   selector: 'app-admin-metrics',
@@ -16,7 +23,8 @@
 })
 
 export class AdminPgMetricsComponent implements OnInit {
-  piwiks: PiwikInfo[] = [];
+  piwiks: PiwikInfoPage;
+  urlParams: URLParameter[] = [];
   errorMessage: string;
   successMessage: string;
   loadingMessage: string;
@@ -25,30 +33,70 @@
   modalButton = 'Yes, validate';
   isModalShown: boolean;
 
+  formPrepare = {
+    searchField: '',
+    orderField: 'REPOSITORY_NAME',
+    order: 'ASC',
+    page: '0',
+    quantity: '25',
+    from: '0'
+  };
+
+  dataForm: FormGroup;
+
   @ViewChild('confirmApprovalModal')
   public confirmApprovalModal: ConfirmationDialogComponent;
+  private pageTotal: number;
+  private piwiksTotal: number;
+  private pages = [];
+  private offset = 2;
 
-  constructor(private piwikService: PiwikService) {}
+  constructor(private piwikService: PiwikService,
+              private fb: FormBuilder,
+              private route: ActivatedRoute,
+              private router: Router) {}
 
   ngOnInit() {
-    this.getPiwiks();
+    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
+      );
+
     this.isModalShown = false;
   }
 
+  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');
+  }
 
   getPiwiks() {
     this.loadingMessage = loadingReposMessage;
-    this.piwikService.getPiwikSitesForRepos()
-      .subscribe (
-        piwiks => this.piwiks = piwiks.sort( function(a, b) {
-          if (a.repositoryName < b.repositoryName) {
-            return -1;
-          } else if (a.repositoryName > b.repositoryName) {
-            return 1;
-          } else {
-            return 0;
-          }
-        } ),
+    this.piwikService.getPiwikSitesForRepos(this.urlParams)
+      .subscribe(
+        piwiks => {
+          this.piwiks = piwiks;
+          this.getPages();
+        },
         error => {
           console.log(error);
           this.loadingMessage = '';
@@ -94,4 +142,72 @@
     );
   }
 
+  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();
+    }
+  }
+
 }
Index: modules/uoa-repository-dashboard-gui/trunk/src/app/pages/adminPg/adminPg.routing.ts
===================================================================
--- modules/uoa-repository-dashboard-gui/trunk/src/app/pages/adminPg/adminPg.routing.ts	(revision 56888)
+++ modules/uoa-repository-dashboard-gui/trunk/src/app/pages/adminPg/adminPg.routing.ts	(revision 56889)
@@ -4,7 +4,7 @@
 import { AdminPgComponent } from './adminPg.component';
 import { AdminPgMetricsComponent } from './adminPg-metrics.component';
 import { AuthGuardService } from '../../services/auth-guard.service';
-import {RegistrationComponent} from './registration.component';
+import {RegistrationComponent} from './adminPg-registrations.component';
 
 const adminRoutes: Routes = [
   {
Index: modules/uoa-repository-dashboard-gui/trunk/src/app/pages/adminPg/adminPg-registrations.component.html
===================================================================
--- modules/uoa-repository-dashboard-gui/trunk/src/app/pages/adminPg/adminPg-registrations.component.html	(nonexistent)
+++ modules/uoa-repository-dashboard-gui/trunk/src/app/pages/adminPg/adminPg-registrations.component.html	(revision 56889)
@@ -0,0 +1,169 @@
+<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>
Index: modules/uoa-repository-dashboard-gui/trunk/src/app/services/piwik.service.ts
===================================================================
--- modules/uoa-repository-dashboard-gui/trunk/src/app/services/piwik.service.ts	(revision 56888)
+++ modules/uoa-repository-dashboard-gui/trunk/src/app/services/piwik.service.ts	(revision 56889)
@@ -2,11 +2,13 @@
 * Created by myrto on 12/05/2017
 */
 
-import { HttpClient, HttpHeaders } from '@angular/common/http';
+import {HttpClient, HttpHeaders, HttpParams} from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { environment } from '../../environments/environment';
 import { PiwikInfo } from '../domain/typeScriptClasses';
 import { Observable } from 'rxjs';
+import {URLParameter} from '../domain/url-parameter';
+import {PiwikInfoPage} from '../domain/page-content';
 
 const headerOptions = {
   headers : new HttpHeaders().set('Content-Type', 'application/json')
@@ -50,14 +52,19 @@
     return this.httpClient.get<PiwikInfo>(url, headerOptions);
   }
 
-  getPiwikSitesForRepos(): Observable<PiwikInfo[]> {
+  getPiwikSitesForRepos(urlParams: URLParameter[]): Observable<PiwikInfoPage> {
     const url = `${this.apiUrl}getPiwikSitesForRepos`;
     console.log(`knocking on: ${url}`);
+    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<PiwikInfo[]>(url, headerOptions);
+    return this.httpClient.get<PiwikInfoPage>(url, {params, withCredentials: true});
   }
 
-
   markPiwikSiteAsValidated (repositoryId: string) {
     const url = `${this.apiUrl}markPiwikSiteAsValidated/${repositoryId}`;
     console.log(`knocking on: ${url}`);
Index: modules/uoa-repository-dashboard-gui/trunk/src/app/shared/topmenu/topmenu.component.html
===================================================================
--- modules/uoa-repository-dashboard-gui/trunk/src/app/shared/topmenu/topmenu.component.html	(revision 56888)
+++ modules/uoa-repository-dashboard-gui/trunk/src/app/shared/topmenu/topmenu.component.html	(revision 56889)
@@ -212,7 +212,7 @@
                             <ul *ngIf="getIsUserAdmin()" class="uk-nav uk-navbar-dropdown-nav">
                               <li class="uk-nav-header" style="display: block;">Admin</li>
                               <li style="display: block"><a href="{{adminHomePage}}" target="_blank">Help Texts</a></li>
-                              <li style="display: block"><a [routerLink]="['/admin','metrics']">Metrics</a></li>
+                              <li style="display: block"><a [routerLink]="['/admin/metrics']">Metrics</a></li>
                               <li style="display: block" class="uk-margin-small-bottom"><a [routerLink]="['/admin/registrations']">Registrations</a></li>
                             </ul>
                             <li><a class="" (click)="logout()">Log out</a></li>
Index: modules/uoa-repository-dashboard-gui/trunk/src/app/domain/page-content.ts
===================================================================
--- modules/uoa-repository-dashboard-gui/trunk/src/app/domain/page-content.ts	(revision 56888)
+++ modules/uoa-repository-dashboard-gui/trunk/src/app/domain/page-content.ts	(revision 56889)
@@ -1,6 +1,8 @@
 /**
  * Created by stefania on 7/17/17.
  */
+import {PiwikInfo} from './typeScriptClasses';
+
 export class PageContent {
 
   content: PositionContents;
@@ -33,3 +35,10 @@
   route: string;
   name: string;
 }
+
+export class PiwikInfoPage {
+  total: number;
+  from: number;
+  to: number;
+  results: PiwikInfo[];
+}
