D-Net

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