irish-monitor/src/app/upload-dois/upload-dois.component.html

<div>
  <div class="uk-banner">
    <div class="uk-container uk-container-large">
      <div class="uk-grid" uk-grid>
        <div class="uk-width-expand">
          <div>Title</div>
          <div>Lorem ipsum.......</div>
        </div>
        <div *ngIf="filesToUpload && !loading" class="uk-width-xlarge">
          <div class="uk-flex uk-flex-right">
            <button class="uk-button uk-button-primary uk-flex uk-flex-middle" uk-form-custom>
              <input id="upload-new" type="file" (change)="fileChangeEvent($event)"/>
              <icon name="upload_file" class="uk-margin-xsmall-right" [flex]="true"></icon>
              <span>upload new file</span>
            </button>
          </div>
          <div *ngIf="filesToUpload[0]" class="uk-flex uk-flex-middle">
            <icon name="description" [ratio]="2" [flex]="true"></icon>
            <div class="uk-width-expand uk-margin-left">
              {{filesToUpload[0].name}}
              <progress class="uk-progress" [value]="enableUpload?100:10" max="100"></progress>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
  <div *ngIf="!filesToUpload || loading"  class="uk-section uk-container uk-flex uk-flex-center">
    <div class="uk-placeholder uk-text-center uk-width-xlarge" uk-form-custom>
      <icon name="upload_file" [ratio]="2"></icon>
      <div><span class="uk-text-large uk-text-bold">Drag and Drop your file here</span></div>
      <div class="uk-text-meta uk-text-small">File supported: CSV</div>
      <div class="uk-padding-small">or</div>
      <div class="uk-button uk-button-secondary">
        <input id="exampleInputFile" class="" type="file" (change)="fileChangeEvent($event)"/>
        <span>Choose File</span>
      </div>
      <div class="uk-text-meta uk-text-small uk-margin-small-top">Maximum size: 5 MB</div>
    </div>
  </div>
  <div *ngIf="loading" class="uk-section uk-container uk-flex uk-flex-center uk-padding-remove-vertical">
      <div *ngIf="filesToUpload[0]" class="uk-grid">
        <div class="uk-width-auto">
          <span uk-icon="icon: file-text; ratio:3"></span>
        </div>
        <div class="uk-width-expand">
          {{filesToUpload[0].name}}
          <progress class="uk-progress" [value]="this.getercentage(this.foundIds.length + this.notFoundIds.length, false)" max="100"></progress>
          <div><span *ngIf="loading">{{this.getercentage(this.foundIds.length + this.notFoundIds.length, false)}}% done</span>
          </div>
        </div>
      </div>
    </div>
  <div *ngIf="filesToUpload && !loading"class="  uk-padding-large">
    <ul uk-tab>
      <li class="uk-active"><a (click)="showFound = true">found</a></li>
      <li class=""><a (click)="showFound = false">not found</a></li>
    </ul>
    <div  class="uk-grid ">

      <!--Not found-->
      <div *ngIf="!showFound" class="uk-width-1-1 uk-grid uk-child-width-1-3">
          <div *ngFor="let id of notFoundIds">{{properties.doiURL+id}}</div>
      </div>
      <!--        found-->
      <ng-container *ngIf="showFound">
        <div class="uk-width-3-4">
          <modal-loading
              [message]="'Uploading, reading your document and fetching results. Please give us a moment..'"></modal-loading>


          <div>

  <!--          Filters-->
            <div class="uk-grid">
              <div *ngIf="accessModeFilter">
                <dropdown-filter [count]="accessModeFilter.countSelectedValues" [name]="accessModeFilter.title"
                                 dropdownMinWidth="450">
                  <div class="uk-padding-small">
                    <search-filter  [isDisabled]="loading"
                                    [filter]="accessModeFilter" [showResultCount]=true
                                    (onFilterChange)="updateView()" [actionRoute]="false" [filterValuesNum]="6" [showMoreInline]="false"></search-filter>
                  </div>
                </dropdown-filter>
              </div>
              <div class="uk-button uk-button-default" [class.uk-button-primary]="onlyGreen" (click)="onlyGreen=!onlyGreen; updateView()">Green</div>
              <div *ngIf="accessRouteFilter">
                <dropdown-filter [count]="accessRouteFilter.countSelectedValues" [name]="accessRouteFilter.title"
                                 dropdownMinWidth="450">
                  <div class="uk-padding-small">
                    <search-filter  [isDisabled]="loading"
                                    [filter]="accessRouteFilter" [showResultCount]=true
                                    (onFilterChange)="updateView()" [actionRoute]="false" [filterValuesNum]="6" [showMoreInline]="false"></search-filter>
                  </div>
                </dropdown-filter>
              </div>
              <div class="uk-button uk-button-default" [class.uk-button-primary]="onlyDiamond" (click)="onlyDiamond=!onlyDiamond; updateView()" title="Published in a Diamond OA journal">Diamond OA</div>
              <!--<div>
                <a class="uk-link uk-width-small" >Filter by</a>
                <div uk-dropdown>
                  <ul class="uk-nav uk-dropdown-nav">
                    <li *ngFor="let option of filterByOptions" [class.uk-active]="filterBy == option.value"><a [class.uk-disabled]="stats[option[option.value]]==0" (click)="updateFilterBy(option.value)">{{option.label}}</a></li>
                  </ul>
                </div>
              </div>-->

              <div search-input [value]="keyword" (valueChange)="updateKeyword($event)"></div>
              <div>
                Viewing {{((page-1)*size + 1)}}-{{resultsToShow.length>(page)*size? (page)*size : resultsToShow.length}} of {{resultsToShow.length}}
              </div>
              <div *ngIf="resultsToShow.length > size">
              <ul [class.uk-invisible]="resultsToShow.length<size"  class="uk-pagination">
                <li ><a class="uk-icon-button uk-icon-button-small" [class.uk-disabled]="page <= 1" (click)="updatePage(page-1)"><span uk-pagination-previous></span></a></li>
                <li><a class="uk-icon-button uk-icon-button-small" [class.uk-disabled]="page*size > resultsToShow.length" (click)="updatePage(page+1)"><span uk-pagination-next></span></a></li>
              </ul>
              </div>

            <!--<paging-no-load [totalResults]="foundIds.length" [size]="size" [currentPage]="page"
                            (pageChange)="updatePage($event)"></paging-no-load>-->
            </div>
            <table class="uk-table uk-table-responsive uk-table-striped">
              <tr>
  <!--              <th>DOI</th>-->
                <th><a (click)="sortResults(true)">Title sort</a></th>
                <th>Access Mode</th>
                <th>Access Route</th>
                <th title="Published in a Diamond OA journal"> Diamond OA</th>
              </tr>
              <tr *ngFor="let result of resultsToShow.slice((page-1)*size,page*size)">
                  <td><a [href]="'https://beta.explore.openaire.eu/search/result?pid='+result.doi"
                         target="_blank">{{result.title}}</a></td>
                  <td>{{result.accessMode}}</td>
                  <td>   <span *ngIf="result.green" ></span> green {{result.accessRoute}}</td>
                <td>             <span *ngIf="result.diamond" uk-icon="check" class="uk-text-success"></span>
                </td>
              </tr>
            </table>
          </div>
        </div>
        <div class="uk-width-1-4">
        <div class="uk-margin-top">
          <span class="uk-text-bold uk-margin-small-bottom">{{foundIds.length}} results</span> found
        </div>
        <div class=" uk-card uk-card-default uk-padding-small  uk-margin-small-top uk-margin-small-bottom">
<!--          <div class="uk-margin-top uk-margin-bottom uk-text-large">Access Rights</div>-->
          <div class="uk-grid uk-margin-remove-top"><div class="uk-width-expand"><span class="dot open"></span> Open Access</div><div class="uk-text-right uk-width-auto"> {{stats['open']}} ({{getercentage(stats['open'])}}%)</div></div>
          <div class="uk-grid uk-margin-remove-top"><div class="uk-width-expand"><span class="dot restricted"></span> Restricted</div><div class="uk-text-right uk-width-auto"> {{stats['restricted']}} ({{getercentage(stats['restricted'])}}%)</div></div>
          <div class="uk-grid uk-margin-remove-top"><div class="uk-width-expand"><span class="dot embargo"></span> Embargo</div><div class="uk-text-right uk-width-auto"> {{stats['embargo']}} ({{getercentage(stats['embargo'])}}%)</div></div>
          <div class="uk-grid uk-margin-remove-top"><div class="uk-width-expand"><span class="dot closed"></span> Closed</div><div class="uk-text-right uk-width-auto"> {{stats['closed']}} ({{getercentage(stats['closed'])}}%)</div></div>
          <hr>
<!--          <div class="uk-margin-top uk-margin-bottom uk-text-large">Access Routes</div>-->

          <div class="uk-grid uk-margin-remove-top"><div class="uk-width-expand"><span class="dot green"></span> Green</div><div class="uk-text-right uk-width-auto"> {{stats['green']}} ({{getercentage(stats['green'])}}%)</div></div>
          <hr>
          <div class="uk-grid uk-margin-remove-top"><div class="uk-width-expand"><span class="dot gold"></span> Gold</div><div class="uk-text-right uk-width-auto"> {{stats['gold']}} ({{getercentage(stats['gold'])}}%)</div></div>
          <div class="uk-grid uk-margin-remove-top"><div class="uk-width-expand"><span class="dot hybrid"></span> Hybrid</div><div class="uk-text-right uk-width-auto"> {{stats['hybrid']}} ({{getercentage(stats['hybrid'])}}%)</div></div>
          <div class="uk-grid uk-margin-remove-top"><div class="uk-width-expand"><span class="dot bronze"></span> Bronze</div><div class="uk-text-right uk-width-auto"> {{stats['bronze']}} ({{getercentage(stats['bronze'])}}%)</div></div>
          <hr>
          <div class="uk-grid uk-margin-remove-top" title="Published in a Diamond OA journal"><div class="uk-width-expand"><span class="dot diamond"></span> Diamond OA</div><div class="uk-text-right uk-width-auto"> {{stats['diamond']}} ({{getercentage(stats['diamond'])}}%)</div></div>
        </div>
        <div class=" uk-card uk-card-default uk-padding-small  uk-margin-small-top uk-margin-small-bottom">
          <div class="uk-grid uk-child-width-1-2 ">
          <div *ngIf="allIds.length > 0" class="uk-text-center ">
            <div class=""><span uk-icon="icon:check; ratio:2" class="uk-icon-button"></span></div>
            <div> <div>valid</div>
              <div class="uk-text-bold">{{allIds.length}}</div>
            </div>

          </div>
            <!--<div *ngIf="notFoundIds.length > 0" class="uk-text-center ">
              <div class=""><span uk-icon="icon:question; ratio:2" class="uk-icon-button"></span></div>
              <div> <div>not found</div>
                <div class="uk-text-bold">{{notFoundIds.length}}</div>
              </div>

            </div>-->
          <div *ngIf="duplicateIds.length > 0" class="uk-text-center ">
            <div class=""><span uk-icon="icon:copy; ratio:2" class="uk-icon-button"></span></div>
            <div> <div>duplicates</div>
              <div class="uk-text-bold">{{duplicateIds.length}}</div>
            </div>

          </div>
          <!--<div *ngIf="noValidIds.length > 0" class="uk-text-center ">
            <div class=""><span uk-icon="icon:close; ratio:2" class="uk-icon-button"></span></div>
            <div> <div>invalid</div>
              <div class="uk-text-bold">{{noValidIds.length}}</div>
            </div>

          </div>-->
        </div>
        </div>
      </div>
      </ng-container>
    </div>

  </div>
</div>