uoa-repository-manager-ui/src/app/pages/repository/metrics/metrics-usagestats-report-results.component.html

<div id="page_content_inner">
  <h2 class="heading_b uk-margin-bottom">Get usage statistics report</h2>

  <!-- TOP HELP CONTENT -->
  <help-content #topHelperContent [position]="'top'"
                [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
  </help-content>

  <div class="uk-grid">

    <!-- LEFT HELP CONTENT -->
    <aside-help-content #leftHelperContent [position]="'left'"
                        [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
    </aside-help-content>

    <!-- MIDDLE -->
    <div *ngIf="release === '5'; else elseBlock" class="uk-width-expand@m">
      <div *ngIf="errorMessage" class="uk-alert uk-alert-warning">{{errorMessage}}</div>
      <div *ngIf="loadingMessage" class="loading-big">
        <div class="loader-big" style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">
          {{ loadingMessage }}
        </div>
        <div class="transparentFilm"></div>
      </div>
      <div *ngIf="compressed; else notCompressed" class="uk-margin-top">
        <a [href]=r5report?.Data target="_blank">Download report here</a>
      </div>
      <ng-template #notCompressed>
        <div *ngIf="r5report?.[reportItems]?.length === 0" class="uk-alert uk-alert-warning">
          Service did not find any data
        </div>
        <div *ngIf="r5report?.[reportItems]?.length > 0" class="md-card">
          <div class="md-card-content large-padding">

            <div class="uk-margin-bottom" data-uk-margin="">

              <div class="uk-grid">
                <div class="uk-width-4-5@m">
                  <h3>{{ r5report?.Report_Header?.Report_Name }} Report Results</h3>
                </div>
<!--                <div class="uk-width-1-5@m">-->
<!--                  <div [formGroup]="pageSizeSelect" class="md-input-wrapper md-input-filled">-->
<!--                    <label class="">Results per page</label>-->
<!--                    <select class="md-input" formControlName="selectPageSize" (change)="getPageSize()">-->
<!--                      <option value="10" selected>10</option>-->
<!--                      <option value="25">25</option>-->
<!--                      <option value="50">50</option>-->
<!--                      <option value="100">100</option>-->
<!--                    </select>-->
<!--                    <span class="md-input-bar"></span>-->
<!--                  </div>-->
<!--                </div>-->
              </div>

            </div>

            <hr>

            <div class="uk-grid uk-grid-divider" data-uk-grid-margin="">

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

                <!-- RESULTS TABLE -->
                <div class="uk-overflow-container">
                  <table class="uk-table table_check" style="overflow-wrap: anywhere;">
                    <thead>
                    <tr>
                      <ng-container *ngIf="chosenReport === 'DSR'; else notDSR">
                        <th>Dataset Title</th>
                        <th>Publisher</th>
                        <th>YOP</th>
                        <th>Access Method</th>
                      </ng-container>

                      <ng-template #notDSR>
                        <th>Platform</th>
                        <th *ngIf="chosenReport === 'PR'">Data type</th>
                        <th>Access method</th>
                      </ng-template>

                      <th *ngIf="granularity === 'Monthly'">Count</th>
                      <ng-container *ngIf="granularity === 'Totals'">
                        <th *ngFor="let Instance of r5report[reportItems][0].Performance[0].Instance">
                          {{Instance.MetricType}}
                        </th>
                      </ng-container>
                    </tr>
                    </thead>
                    <tbody>
                    <ng-container *ngFor="let item of r5report[reportItems]; let i=index">
                      <tr>
                        <ng-container *ngIf="chosenReport === 'DSR'; else notDsrRow">
                          <td class="uk-width-1-3">{{item.Dataset_Title}}</td>
                          <td>{{item.Publisher}}</td>
                          <td>{{item.YOP}}</td>
                          <td>{{item.Access_Method}}</td>
                        </ng-container>
                        <ng-template #notDsrRow>
                          <td>{{item.Platform}}</td>
                          <td *ngIf="chosenReport === 'PR'">{{item.Data_Type}}</td>
                          <td>{{item.Access_Method}}</td>
                        </ng-template>
                        <ng-container *ngIf="granularity === 'Totals'">
                          <td *ngFor="let instance of item.Performance[0].Instance">
                            {{instance.Count}}
                          </td>
                        </ng-container>
                        <td class="uk-text-center" *ngIf="granularity === 'Monthly'">
                          <a *ngIf="item?.Performance?.length > 0" (click)="displayItemPerformance(i)">
                            {{ (selectedItemIndex === i) ? 'Hide' : 'See' }} results
                          </a>
                        </td>
                      </tr>
                      <tr *ngIf="(selectedItemIndex === i)">
                        <td colspan="6">
                          <div class="uk-animation-slide-top-medium uk-margin-small-top">
                            <table class="uk-table uk-table-middle uk-table-striped innerTable uk-margin-small-top uk-margin-small-bottom">
                              <tr>
                                <th>Month</th>
                                <th *ngFor="let instance of item.Performance[0].Instance">{{instance.MetricType}}</th>
                              </tr>
                              <tr *ngFor="let month of item.Performance">
                                <td>{{ month.Period.Begin_Date | date: "MMM yyyy" }}</td>
                                <td *ngFor="let instance of month.Instance">{{ instance.Count }}</td>
                              </tr>
                            </table>
                          </div>
                        </td>
                      </tr>
                    </ng-container>
                    </tbody>

                  </table>
                </div>

              </div>

            </div>

          </div>
        </div>

      </ng-template>

<!--      <pre>{{r5report | json}}</pre>-->
    </div>
    <ng-template #elseBlock>
      <div class="uk-width-expand@m">

      <div *ngIf="errorMessage" class="uk-alert uk-alert-warning">{{errorMessage}}</div>
      <div *ngIf="loadingMessage" class="loading-big">
        <div class="loader-big" style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">
          {{ loadingMessage }}
        </div>
        <div class="transparentFilm"></div>
      </div>

      <div *ngIf="repoResponse" class="md-card">
        <div class="md-card-content large-padding">

          <div class="uk-margin-bottom" data-uk-margin="">

            <div class="uk-grid">
              <div class="uk-width-4-5@m">
                <h3>{{ repoResponse.ReportDefinition['@Name'] }} Report Results
                  <!--<span *ngIf="repoResponse.Report &&-->
                  <!--repoResponse.Report.Report &&-->
                  <!--repoResponse.Report.Report.Customer &&-->
                  <!--repoResponse.Report.Report.Customer.ReportItems &&-->
                  <!--repoResponse.Report.Report.Customer.ReportItems.length > 0">for {{ repoResponse.Report.Report.Customer.ReportItems[0].ItemPlatform }}</span>-->
                </h3>
              </div>
              <div class="uk-width-1-5@m">
                <div [formGroup]="pageSizeSelect" class="md-input-wrapper md-input-filled">
                  <label class="">Results per page</label>
                  <select class="md-input" formControlName="selectPageSize" (change)="getPageSize()">
                    <option value="10" selected>10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                  </select>
                  <span class="md-input-bar"></span>
                </div>
              </div>
            </div>

          </div>

          <hr>

          <div class="uk-grid uk-grid-divider" data-uk-grid-margin="">

            <div class="uk-width-3-4@m uk-row-first">

              <!-- RESULTS TABLE -->
              <div class="uk-overflow-container">
                <table class="uk-table table_check" style="overflow-wrap: anywhere;">
                  <thead>
                  <tr>
                    <th class="uk-width-1-6" *ngIf="chosenReport !== 'RR1'">Title</th>
                    <th class="uk-width-1-6" *ngIf="chosenReport !== 'RR1'">Publisher</th>
                    <th class="uk-width-1-6" *ngIf="chosenReport === 'RR1'">Platform name</th>
                    <th class="uk-width-1-6">{{ (chosenReport !== 'RR1') ? 'Item Urls' : 'Url' }}</th>
                    <th class="uk-width-1-6">Type</th>
                    <th class="uk-width-1-6" colspan="2">Downloads/Views</th>
                    <!--<th class="uk-width-2-10">Repository</th>-->
                    <!--<th class="uk-width-1-10">Validation Type</th>-->
                    <!--<th class="uk-width-1-10">Status</th>-->
                    <!--<th class="uk-width-1-10">Score</th>-->
                    <!--<th class="uk-width-1-10">Started</th>-->
                    <!--<th class="uk-width-2-10">Guidelines</th>-->
                    <!--<th class="uk-width-1-10">Actions</th>-->
                    <!--<th class="uk-width-1-10"></th>-->
                  </tr>
                  </thead>
                  <tbody>
                  <tr *ngIf="infoMessage">
                    <td colspan="6">{{ infoMessage }}</td>
                  </tr>
                  <ng-container *ngIf="repoResponse?.Report?.Report?.Customer?.ReportItems">
                    <ng-container *ngFor="let item of repoResponse.Report.Report.Customer.ReportItems; let item_i = index">
                      <tr>
                        <td *ngIf="chosenReport !== 'RR1'">{{ item.ItemName }}</td>
                        <td *ngIf="chosenReport !== 'RR1'">{{ item.ItemPublisher }}</td>
                        <td *ngIf="chosenReport === 'RR1'">{{ item.ItemPlatform }}</td>
                        <td>
                          <div *ngFor="let url of transformItem(item.ItemIdentifier); let i = index" class="uk-margin-small-bottom">
                            <!--<br *ngIf="i>0">-->
                            {{ url }}
                          </div>
                        </td>
                        <td>{{ item.ItemDataType }}</td>
                        <td class="uk-text-center"
                            *ngIf="repoResponse.ReportDefinition.Filters.ReportAttribute[0].Value === 'Monthly'" colspan="2">
                          <a *ngIf="item.ItemPerformance && (item.ItemPerformance.length > 0)"
                             (click)="displayItemPerformance(item_i)">{{ (selectedItemIndex === item_i) ? 'Hide' : 'See' }} results</a>
                        </td>
                        <td class="uk-text-center"
                            *ngIf="repoResponse.ReportDefinition.Filters.ReportAttribute[0].Value === 'Totals'">
                          {{ item.ItemPerformance[0].Instance[0].Count }}
                        </td>
                        <td class="uk-text-center"
                            *ngIf="repoResponse.ReportDefinition.Filters.ReportAttribute[0].Value === 'Totals'">
                          {{ item.ItemPerformance[0].Instance[1].Count }}
                        </td>
                      </tr>
                      <tr *ngIf="(selectedItemIndex === item_i)">
                        <td colspan="6">
                          <div class="uk-animation-slide-top-medium uk-margin-small-top">
                            <table class="uk-table uk-table-middle uk-table-striped innerTable uk-margin-small-top uk-margin-small-bottom">
                              <tr>
                                <th>Month</th>
                                <th>Downloads</th>
                                <th>Views</th>
                              </tr>
                              <tr *ngFor="let month of item.ItemPerformance">
                                <td>{{ month.Period.Begin | date: "MMM yyyy" }}</td>
                                <td>{{ month.Instance[0].Count }}</td>
                                <td>{{ month.Instance[1].Count }}</td>
                              </tr>
                            </table>
                          </div>
                        </td>
                      </tr>
                    </ng-container>
                  </ng-container>
                  </tbody>
                </table>
              </div>

              <!-- BOTTOM PAGINATION LINKS -->
              <ul class="uk-pagination uk-margin-medium-top">
                <li class="uk-pagination-previous"><a (click)="goToPreviousPage()"><i class="uk-icon-angle-left"></i><span class="uk-margin-left">Previous</span></a></li>
                <li class=""><span>page {{ (totalPages > 0) ? page+1 : 0 }} of {{ totalPages }}</span></li>
                <li class="uk-pagination-next"><a (click)="goToNextPage()"><span class="uk-margin-right">Next</span><i class="uk-icon-angle-right"></i></a></li>
              </ul>

            </div>

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

              <div class="uk-margin-medium-bottom">
                <p>
                  Number of results:
                  <span class="uk-badge uk-badge-success uk-text-upper uk-margin-small-left">{{ repoResponse.ReportDefinition.Filters.ReportAttribute[1].Value }}</span>
                </p>
                <p>
                  Filters:
                  <span *ngFor="let filter of repoResponse.ReportDefinition.Filters.Filter; let i = index" class="uk-badge uk-badge-outline uk-text-upper uk-margin-small-left">
                      {{ filter.Name }}: {{ filter.Value }}
                    </span>
                </p>
              </div>
              <h2 class="heading_c uk-margin-small-bottom">Details</h2>
              <ul class="md-list md-list-addon">
                <li>
                  <div class="md-list-addon-element">
                    <i class="md-list-addon-icon material-icons"></i>
                  </div>
                  <div class="md-list-content">
                    <span class="md-list-heading">{{ repoResponse.Report.Report['@Created'] | date: "yyyy-MM-dd HH:mm:ss" }}</span>
                    <span class="uk-text-small uk-text-muted">Date run</span>
                  </div>
                </li>
                <li>
                  <div class="md-list-addon-element">
                    <i class="md-list-addon-icon material-icons"></i>
                  </div>
                  <div class="md-list-content">
                    <span class="md-list-heading">{{ coveredPeriod }}</span>
                    <span class="uk-text-small uk-text-muted">Period covered</span>
                  </div>
                </li>
              </ul>
            </div>

          </div>

        </div>
      </div>



      <!--<div *ngIf="repoResponse" class="uk-margin-top">-->
      <!--<h3>{{ repoResponse.ReportDefinition['@Name'] }} Report Results-->
      <!--<span *ngIf="repoResponse.Report &&-->
      <!--repoResponse.Report.Report &&-->
      <!--repoResponse.Report.Report.Customer &&-->
      <!--repoResponse.Report.Report.Customer.ReportItems &&-->
      <!--repoResponse.Report.Report.Customer.ReportItems.length > 0">for {{ repoResponse.Report.Report.Customer.ReportItems[0].ItemPlatform }}</span>-->
      <!--</h3>-->
      <!--<div class="uk-width-1-2">-->
      <!--<table class="uk-table">-->
      <!--<tr>-->
      <!--<th>Period covered</th>-->
      <!--<td>{{ coveredPeriod }}</td>-->
      <!--</tr>-->
      <!--<tr>-->
      <!--<th>Filters</th>-->
      <!--<td>-->
      <!--<span *ngFor="let filter of repoResponse.ReportDefinition.Filters.Filter; let i = index">-->
      <!--<br *ngIf="i>0">-->
      <!--{{ filter.Name }}: {{ filter.Value }}-->
      <!--</span>-->
      <!--</td>-->
      <!--</tr>-->
      <!--<tr>-->
      <!--<th>Date run</th>-->
      <!--<td>{{ repoResponse.Report.Report['@Created'] | date: "yyyy-MM-dd HH:mm:ss" }}</td>-->
      <!--</tr>-->
      <!--<tr>-->
      <!--<th>Number of results</th>-->
      <!--<td>{{ repoResponse.ReportDefinition.Filters.ReportAttribute[1].Value }}</td>-->
      <!--</tr>-->
      <!--</table>-->
      <!--</div>-->
      <!--<div *ngIf="repoResponse.Report.Report.Customer &&-->
      <!--repoResponse.Report.Report.Customer.ReportItems">-->
      <!--<div>-->
      <!--<div class="show-options uk-inline" style="float: right;">-->
      <!--<div class="filterLabel" style="display: inline;">Results per page:</div>-->
      <!--<div [formGroup]="pageSizeSelect" class="inlineBlock">-->
      <!--<select class="form-control" formControlName="selectPageSize" (change)="getPageSize()">-->
      <!--<option value="10" selected>10</option>-->
      <!--<option value="25">25</option>-->
      <!--<option value="50">50</option>-->
      <!--<option value="100">100</option>-->
      <!--</select>-->
      <!--</div>-->
      <!--</div>-->
      <!--</div><br>-->
      <!--<div class="contentAndPagerPanel">-->

      <!--&lt;!&ndash; TOP PAGINATION LINKS &ndash;&gt;-->
      <!--<div>-->
      <!--<ul class="uk-pagination">-->
      <!--<li>-->
      <!--<a class="uk-link uk-link-muted" (click)="goToPreviousPage()">-->
      <!--<span class="uk-margin-small-right uk-pagination-previous uk-icon" uk-pagination-previous="">-->
      <!--<svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"-->
      <!--icon="pagination-previous" ratio="1"></svg>-->
      <!--</span>-->
      <!--Previous-->
      <!--</a>-->
      <!--</li>-->
      <!--<li class="uk-margin-auto-left">-->
      <!--<a class="uk-link uk-link-muted" (click)="goToNextPage()">-->
      <!--Next-->
      <!--<span class="uk-margin-small-left uk-pagination-next uk-icon" uk-pagination-next="">-->
      <!--<svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"-->
      <!--icon="pagination-next" ratio="1"></svg>-->
      <!--</span>-->
      <!--</a>-->
      <!--</li>-->
      <!--</ul>-->
      <!--<div class="resultsPageLabel">page {{ (totalPages > 0) ? page+1 : 0 }} of {{ totalPages }}</div>-->
      <!--</div>-->


      <!--&lt;!&ndash; RESULTS TABLE &ndash;&gt;-->
      <!--<div>-->
      <!--<div>-->
      <!--<div class="uk-overflow-auto uk-scrollspy-inview uk-animation-slide-top-medium uk-margin-top uk-margin-bottom">-->

      <!--<table class="uk-table uk-table-middle uk-table-striped" style="vertical-align: top !important;">-->
      <!--<thead>-->
      <!--<tr>-->
      <!--<th *ngIf="chosenReport !== 'RR1'">Title</th>-->
      <!--<th *ngIf="chosenReport !== 'RR1'">Publisher</th>-->
      <!--<th *ngIf="chosenReport === 'RR1'">Platform name</th>-->
      <!--<th>{{ (chosenReport !== 'RR1') ? 'Item Urls' : 'Url' }}</th>-->
      <!--<th>Type</th>-->
      <!--<th colspan="2">Downloads/Views</th>-->
      <!--</tr>-->
      <!--</thead>-->
      <!--<td colspan="6" *ngIf="infoMessage" class="uk-alert">{{ infoMessage }}</td>-->
      <!--<tbody *ngFor="let item of repoResponse.Report.Report.Customer.ReportItems; let item_i = index"-->
      <!--style="border-bottom: 1px solid whitesmoke;">-->
      <!--<tr>-->
      <!--<td *ngIf="chosenReport !== 'RR1'">{{ item.ItemName }}</td>-->
      <!--<td *ngIf="chosenReport !== 'RR1'">{{ item.ItemPublisher }}</td>-->
      <!--<td *ngIf="chosenReport === 'RR1'">{{ item.ItemPlatform }}</td>-->
      <!--<td style="min-width: 300px;">-->
      <!--<span *ngFor="let url of transformItem(item.ItemIdentifier); let i = index">-->
      <!--<br *ngIf="i>0">{{ url }}-->
      <!--</span>-->
      <!--</td>-->
      <!--<td>{{ item.ItemDataType }}</td>-->
      <!--<td class="uk-text-center"-->
      <!--*ngIf="repoResponse.ReportDefinition.Filters.ReportAttribute[0].Value === 'Monthly'" colspan="2">-->
      <!--<a *ngIf="item.ItemPerformance && (item.ItemPerformance.length > 0)"-->
      <!--(click)="displayItemPerformance(item_i)">{{ (selectedItemIndex === item_i) ? 'Hide' : 'See' }} results</a>-->
      <!--</td>-->
      <!--<td class="uk-text-center"-->
      <!--*ngIf="repoResponse.ReportDefinition.Filters.ReportAttribute[0].Value === 'Totals'">-->
      <!--{{ item.ItemPerformance[0].Instance[0].Count }}-->
      <!--</td>-->
      <!--<td class="uk-text-center"-->
      <!--*ngIf="repoResponse.ReportDefinition.Filters.ReportAttribute[0].Value === 'Totals'">-->
      <!--{{ item.ItemPerformance[0].Instance[1].Count }}-->
      <!--</td>-->
      <!--</tr>-->
      <!--<tr *ngIf="(selectedItemIndex === item_i)">-->
      <!--<td colspan="6">-->
      <!--<div class="uk-animation-slide-top-medium uk-margin-small-top">-->
      <!--<table class="uk-table uk-table-middle uk-table-striped innerTable">-->
      <!--<tr>-->
      <!--<th>Month</th>-->
      <!--<th>Downloads</th>-->
      <!--<th>Views</th>-->
      <!--</tr>-->
      <!--<tr *ngFor="let month of item.ItemPerformance">-->
      <!--<td>{{ month.Period.Begin | date: "MMM yyyy" }}</td>-->
      <!--<td>{{ month.Instance[0].Count }}</td>-->
      <!--<td>{{ month.Instance[1].Count }}</td>-->
      <!--</tr>-->
      <!--</table>-->
      <!--</div>-->
      <!--</td>-->
      <!--</tr>-->
      <!--</tbody>-->
      <!--</table>-->

      <!--</div>-->
      <!--</div>-->
      <!--</div>-->

      <!--&lt;!&ndash; BOTTOM PAGINATION LINKS &ndash;&gt;-->
      <!--<div>-->
      <!--<ul class="uk-pagination">-->
      <!--<li>-->
      <!--<a class="uk-link uk-link-muted" (click)="goToPreviousPage()">-->
      <!--<span class="uk-margin-small-right uk-pagination-previous uk-icon" uk-pagination-previous="">-->
      <!--<svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"-->
      <!--icon="pagination-previous" ratio="1"></svg>-->
      <!--</span>-->
      <!--Previous-->
      <!--</a>-->
      <!--</li>-->
      <!--<li class="uk-margin-auto-left">-->
      <!--<a class="uk-link uk-link-muted" (click)="goToNextPage()">-->
      <!--Next-->
      <!--<span class="uk-margin-small-left uk-pagination-next uk-icon" uk-pagination-next="">-->
      <!--<svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"-->
      <!--icon="pagination-next" ratio="1"></svg>-->
      <!--</span>-->
      <!--</a>-->
      <!--</li>-->
      <!--</ul>-->
      <!--<div class="resultsPageLabel">page {{ (totalPages > 0) ? page+1 : 0 }} of {{ totalPages }}</div>-->
      <!--</div>-->
      <!--</div>-->
      <!--</div>-->

      <!--</div>-->

    </div>
    </ng-template>

    <!-- RIGHT HELP CONTENT -->
    <aside-help-content #rightHelperContent [position]="'right'"
                        [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
    </aside-help-content>

  </div>

  <!-- BOTTOM HELP CONTENT -->
  <help-content #bottomHelperContent [position]="'bottom'"
                [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
  </help-content>

</div>