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-padding-small uk-padding-remove-vertical">
        <div class="uk-grid uk-flex-middle" uk-grid>
          <div class="uk-width-expand">
            <h1 class="uk-h4 uk-margin-small-bottom">Title</h1>
            <div class="uk-margin-bottom">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.</div>
          </div>
          <div *ngIf="filesToUpload && !loading" class="uk-width-xlarge@l uk-width-large@m uk-width-1-1@s uk-margin-small-bottom">
            <div class="uk-flex uk-flex-right">
              <button class="uk-button uk-button-secondary 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]="3" [flex]="true" [type]="'outlined'" [customClass]="'uk-text-primary'"></icon>
              <div class="uk-width-expand uk-margin-left">
                <div class="uk-margin-small-bottom uk-text-bold">
                  {{filesToUpload[0].name}}
                </div>
                <progress class="uk-progress uk-margin-remove" [value]="enableUpload?100:10" max="100"></progress>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div *ngIf="filesToUpload && !loading" class="uk-banner-footer">
      <div class="uk-container uk-container-large">
        <ul class="uk-banner-tab uk-padding-small uk-padding-remove-vertical">
          <li [class.uk-active]="showFound">
            <a (click)="showFound = true">Found</a>
          </li>
          <li [class.uk-active]="!showFound">
            <a (click)="showFound = false">Not Found</a>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <!-- BEFORE UPLOADING -->
  <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>

  <!-- LOADING WHILE UPLOADING -->
  <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>

  <!-- LOADED -->
  <div *ngIf="filesToUpload && !loading" class="uk-section uk-container uk-container-large">
    <div class="uk-grid" uk-grid>
      <!-- Not Found -->
      <!--<div *ngIf="!showFound" class="uk-width-1-1 uk-grid uk-grid-small uk-child-width-1-3@m uk-child-width-1-4@l" uk-grid>
        <div *ngFor="let id of notFoundIds">
          <a [href]="properties.doiURL+id" class="custom-external" target="_blank">
            {{id}}
          </a>
        </div>
      </div>-->

        <!-- Main content (left-side) -->
        <div class="uk-width-3-4@l uk-width-2-3@m uk-width-1-1@s" [class.uk-hidden]="!loading && resultsToShow.length ==0 && showFound">
          <div *ngIf="!loading && resultsToShow.length >0 && showFound">
            <!-- Filters -->
            <!-- Actions -->
            <div class="uk-flex uk-flex-middle uk-margin-small-bottom" style="grid-gap: 10px;">
              <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>
              <button class="uk-button uk-button-default" [class.uk-button-secondary]="onlyGreen" (click)="onlyGreen=!onlyGreen; updateView()">
                Green
              </button>
              <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>
              <button class="uk-button uk-button-default" [class.uk-button-secondary]="onlyDiamond" (click)="onlyDiamond=!onlyDiamond; updateView()" title="Published in a Diamond OA journal">
                Diamond OA
              </button>
              <!--<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 and paging -->
            <div class="uk-flex uk-flex-middle uk-flex-right">
              <div search-input [searchInputClass]="'flat'" [expandable]="true"
                class="uk-width-medium@m uk-width-1-1@s"
                placeholder="Search for DOIs" [value]="keyword" (valueChange)="updateKeyword($event)">
              </div>
              <!-- will this need an if? -->
              <div class="uk-margin-small-left">
                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 -->
            <table class="uk-table uk-table-striped uk-table-middle uk-table-responsive uk-table-hover">
              <thead class="uk-text-nowrap">
                <tr>
                  <th class="uk-width-3-5">
                    <a (click)="sortResults(true)" class="uk-link-reset uk-flex-inline uk-flex-middle">
                      Title
                      <icon [name]="'south'" [flex]="true" [ratio]="0.7" class="uk-margin-xsmall-left"></icon>
                    </a>
                  </th>
                  <th>Access Mode</th>
                  <th>Access Route</th>
                  <th title="Published in a Diamond OA journal">Diamond OA</th>
                </tr>
              </thead>
              <tbody class="uk-text-small">
                <tr *ngFor="let result of resultsToShow.slice((page-1)*size,page*size)">
                  <td class="multi-line-ellipsis lines-1">
                    <div>
                      <a [href]="'https://beta.explore.openaire.eu/search/result?pid='+result.doi"
                        class="uk-link-text" target="_blank"
                        [title]="result.title">
                        {{result.title}}
                      </a>
                    </div>
                  </td>
                  <td>
                    <div>
                      {{result.accessMode}}
                    </div>
                  </td>
                  <!-- TODO: make the labels dynamic-->
                  <td class="uk-text-xsmall">
                    <div class="uk-flex">
                      <span class="access-route-label">
                        <span class="dot green"></span>
                        green
                      </span>
                      <span class="access-route-label uk-margin-xsmall-left">
                        <span class="dot {{result.accessRoute}}"></span>
                        {{result.accessRoute}}
                      </span>
                    </div>
                  </td>
                  <td>
                    <div class="uk-flex uk-flex-middle uk-flex-center">
                      <icon *ngIf="result.diamond" name="done" [flex]="true" [customClass]="'uk-text-success'"></icon>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <ng-container *ngIf="!showFound && !loading">
          <div  *ngIf="notFoundIds.length > 0" class="uk-grid uk-grid-small uk-child-width-1-2@m uk-child-width-1-3@l uk-margin-top" uk-grid>
            <div *ngFor="let id of notFoundIds">
              <a [href]="properties.doiURL+id" class="custom-external uk-text-break" target="_blank">
                {{id}}
              </a>
            </div>
          </div>
            <div *ngIf="notFoundIds.length == 0 && noValidIds.length > 0 && allIds.length == 0" class="uk-alert uk-alert-warning">
              No valid DOIs extracted from the file. Please check the file format. The format should be one DOI per row.
            </div>
          </ng-container>
<!--          <div  *ngIf="!loading && resultsToShow.length == 0" class="uk-alert uk-alert-primary"> No results found</div>-->
        </div>
        <!-- Sidebar (right-side) -->
        <div class="uk-width-1-4@l uk-width-1-3@m  uk-width-1-1@s" [class.uk-width-1-1]="!loading && resultsToShow.length ==0">
          <div class="uk-margin-top">
            <ng-container *ngIf="showFound">
               <span class="uk-text-bold uk-margin-small-bottom">{{foundIds.length}} results</span> found
            </ng-container>
            <ng-container *ngIf="!showFound">
              <span class="uk-text-bold uk-margin-small-bottom">{{notFoundIds.length}} DOIs</span> not found
            </ng-container>
          </div>
          <ng-container *ngIf="resultsToShow.length > 0 && showFound">
          <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']}} <span *ngIf="getercentage(stats['open'])">({{getercentage(stats['open'])}}%)</span></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']}} <span *ngIf="getercentage(stats['restricted'])">({{getercentage(stats['restricted'])}}%)</span></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']}} <span *ngIf="getercentage(stats['embargo'])">({{getercentage(stats['embargo'])}}%)</span></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']}} <span *ngIf="getercentage(stats['closed'])">({{getercentage(stats['closed'])}}%)</span></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']}} <span *ngIf="getercentage(stats['green'])">({{getercentage(stats['green'])}}%)</span></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']}} <span *ngIf="getercentage(stats['gold'])">({{getercentage(stats['gold'])}}%)</span></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']}} <span *ngIf="getercentage(stats['hybrid'])">({{getercentage(stats['hybrid'])}}%)</span></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']}} <span *ngIf="getercentage(stats['bronze'])">({{getercentage(stats['bronze'])}}%)</span></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']}} <span *ngIf="getercentage(stats['diamond'])">({{getercentage(stats['diamond'])}}%)</span></div></div>
          </div>
          </ng-container>
          <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 uk-grid-small" uk-grid>
              <div  class="uk-flex uk-flex-middle">
                <div class="uk-margin-small-right">
                  <icon name="check_box" [ratio]="1.8" [flex]="true" [type]="'outlined'" [customClass]="'uk-text-primary'"></icon>
                </div>
                <div>
                  <div class="uk-text-small uk-text-italic uk-margin-xsmall-bottom">Valid</div>
                  <div class="uk-h6 uk-margin-remove">{{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-flex uk-flex-middle">
                <div class="uk-margin-small-right">
                  <icon name="fiber_smart_record" [ratio]="1.8" [flex]="true" [type]="'outlined'" [customClass]="'uk-text-primary'"></icon>
                </div>
                <div>
                  <div class="uk-text-small uk-text-italic uk-margin-xsmall-bottom">Duplicates</div>
                  <div class="uk-h6 uk-margin-remove">{{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>

    </div>
  </div>
</div>