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">Upload DOIs</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 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" id="before_uploading">
    <div class="uk-placeholder uk-width-xlarge@l uk-width-large@m uk-width-1-1 uk-text-center" uk-form-custom>
      <div class="uk-flex uk-flex-center uk-flex-middle">
        <icon [name]="'upload_file'" [flex]="true" [ratio]="2"></icon>
      </div>
      <div class="uk-text-large uk-text-bold uk-margin-top uk-margin-xsmall-bottom">
        Drag and Drop your file here
      </div>
      <div class="uk-text-meta uk-text-small">
        File supported: CSV
      </div>
      <div class="uk-text-bold uk-margin-top uk-margin-bottom">
        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-container uk-flex uk-flex-center uk-margin-medium-bottom" id="loading_while_uploading">
    <div *ngIf="filesToUpload[0]" class="uk-flex uk-flex-middle uk-width-xlarge@l uk-width-large@m uk-width-1-1">
      <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]="this.getercentage(this.foundIds.length + this.notFoundIds.length, false)" max="100"></progress>
        <div *ngIf="loading" class="uk-text-xsmall uk-text-bold uk-margin-small-top">
          {{this.getercentage(this.foundIds.length + this.notFoundIds.length, false)}}% done
        </div>
      </div>
    </div>
  </div>

  <!-- LOADED -->
  <div *ngIf="filesToUpload && !loading" class="uk-section uk-container uk-container-large" id="loaded">
    <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) -->
      <!-- [class.uk-hidden]="!loading && showFound && resultsToShow.length == 0" -->
      <div class="uk-width-3-4@l uk-width-2-3@m uk-width-1-1">
        <div *ngIf="!loading && showFound && allIds.length > 0">
          <!-- Filters -->
          <!-- Actions -->
          <div class="uk-flex uk-flex-middle uk-margin-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@m uk-flex-center uk-flex-wrap">
            <div search-input [searchInputClass]="'flat'" [expandable]="true"
              class="uk-width-large@m uk-width-1-1"
              placeholder="Search for DOIs" [value]="keyword" (valueChange)="updateKeyword($event)">
            </div>
            <div>
              <paging-no-load *ngIf="resultsToShow.length > size" [totalResults]="resultsToShow.length" [size]="size" [currentPage]="page"
                (pageChange)="updatePage($event)">
              </paging-no-load>
            </div>
            <!-- <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> -->
          </div>
          <!-- Table -->
          <table *ngIf="resultsToShow?.length > 0" 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 *ngIf="resultsToShow?.length == 0" class="uk-flex uk-flex-center uk-margin-medium-top">
            <div class="uk-alert uk-alert-primary uk-text-center uk-width-2-3@m uk-width-1-1">
              No results found
            </div>
          </div>
        </div>
        <ng-container *ngIf="!loading && !showFound">
          <div *ngIf="notFoundIds.length > 0" class="uk-grid uk-grid-small uk-child-width-1-2@m uk-child-width-1-3@l" 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-flex uk-flex-center">
            <div class="uk-alert uk-alert-warning uk-text-center uk-width-2-3@m uk-width-1-1">
              No valid DOIs extracted from the file. Please check the file format. The format should be one DOI per row.
            </div>
          </div>
        </ng-container>
      </div>
      <!-- Sidebar (right-side) -->
      <div class="uk-width-1-4@l uk-width-1-3@m uk-width-1-1" [class.uk-width-1-1]="!loading && resultsToShow.length == 0">
        <div>
          <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>