[master] upload dois: fixed keyword search that caused view breaking

This commit is contained in:
Alex Martzios 2023-12-12 11:27:58 +02:00
parent 0cd4af74cf
commit d7942231a4
2 changed files with 165 additions and 163 deletions

View File

@ -84,146 +84,149 @@
</div> </div>
</div>--> </div>-->
<!-- Main content (left-side) --> <!-- 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"> <!-- [class.uk-hidden]="!loading && showFound && resultsToShow.length == 0" -->
<div *ngIf="!loading && resultsToShow.length >0 && showFound"> <div class="uk-width-3-4@l uk-width-2-3@m uk-width-1-1">
<!-- Filters --> <div *ngIf="!loading && showFound && allIds.length > 0">
<!-- Actions --> <!-- Filters -->
<div class="uk-flex uk-flex-middle uk-margin-small-bottom" style="grid-gap: 10px;"> <!-- Actions -->
<div *ngIf="accessModeFilter"> <div class="uk-flex uk-flex-middle uk-margin-small-bottom" style="grid-gap: 10px;">
<dropdown-filter [count]="accessModeFilter.countSelectedValues" [name]="accessModeFilter.title" <div *ngIf="accessModeFilter">
dropdownMinWidth="450"> <dropdown-filter [count]="accessModeFilter.countSelectedValues" [name]="accessModeFilter.title"
<div class="uk-padding-small"> dropdownMinWidth="450">
<search-filter [isDisabled]="loading" <div class="uk-padding-small">
[filter]="accessModeFilter" [showResultCount]=true <search-filter [isDisabled]="loading"
(onFilterChange)="updateView()" [actionRoute]="false" [filterValuesNum]="6" [showMoreInline]="false"> [filter]="accessModeFilter" [showResultCount]=true
</search-filter> (onFilterChange)="updateView()" [actionRoute]="false" [filterValuesNum]="6" [showMoreInline]="false">
</div> </search-filter>
</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>--> </dropdown-filter>
</div> </div>
<!-- Search and paging --> <button class="uk-button uk-button-default" [class.uk-button-secondary]="onlyGreen" (click)="onlyGreen=!onlyGreen; updateView()">
<div class="uk-flex uk-flex-middle uk-flex-right"> Green
<div search-input [searchInputClass]="'flat'" [expandable]="true" </button>
class="uk-width-medium@m uk-width-1-1@s" <div *ngIf="accessRouteFilter">
placeholder="Search for DOIs" [value]="keyword" (valueChange)="updateKeyword($event)"> <dropdown-filter [count]="accessRouteFilter.countSelectedValues" [name]="accessRouteFilter.title"
</div> dropdownMinWidth="450">
<!-- will this need an if? --> <div class="uk-padding-small">
<div class="uk-margin-small-left"> <search-filter [isDisabled]="loading"
Viewing {{((page-1)*size + 1)}}-{{resultsToShow.length>(page)*size? (page)*size : resultsToShow.length}} of {{resultsToShow.length}} [filter]="accessRouteFilter" [showResultCount]=true
</div> (onFilterChange)="updateView()" [actionRoute]="false" [filterValuesNum]="6" [showMoreInline]="false">
<div *ngIf="resultsToShow.length > size"> </search-filter>
<ul [class.uk-invisible]="resultsToShow.length<size" class="uk-pagination"> </div>
<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> </dropdown-filter>
<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> </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> </ul>
</div> </div>
<!--<paging-no-load [totalResults]="foundIds.length" [size]="size" [currentPage]="page" </div>-->
(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> </div>
<ng-container *ngIf="!showFound && !loading"> <!-- Search and paging -->
<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 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>
<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-alert uk-alert-primary uk-margin-medium-top">No results found</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-margin-top" uk-grid>
<div *ngFor="let id of notFoundIds"> <div *ngFor="let id of notFoundIds">
<a [href]="properties.doiURL+id" class="custom-external uk-text-break" target="_blank"> <a [href]="properties.doiURL+id" class="custom-external uk-text-break" target="_blank">
{{id}} {{id}}
</a> </a>
</div> </div>
</div> </div>
<div *ngIf="notFoundIds.length == 0 && noValidIds.length > 0 && allIds.length == 0" class="uk-alert uk-alert-warning"> <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. 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> </div>
<ng-container *ngIf="resultsToShow.length > 0 && showFound"> </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 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-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-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 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>
@ -241,45 +244,44 @@
<hr> <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 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> </div>
</ng-container> </ng-container>
<div class="uk-card uk-card-default uk-padding-small uk-margin-small-top uk-margin-small-bottom"> <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-grid uk-child-width-1-2 uk-grid-small" uk-grid>
<div class="uk-flex uk-flex-middle"> <div class="uk-flex uk-flex-middle">
<div class="uk-margin-small-right"> <div class="uk-margin-small-right">
<icon name="check_box" [ratio]="1.8" [flex]="true" [type]="'outlined'" [customClass]="'uk-text-primary'"></icon> <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>
<!--<div *ngIf="notFoundIds.length > 0" class="uk-text-center "> <div>
<div class=""><span uk-icon="icon:question; ratio:2" class="uk-icon-button"></span></div> <div class="uk-text-small uk-text-italic uk-margin-xsmall-bottom">Valid</div>
<div> <div>not found</div> <div class="uk-h6 uk-margin-remove">{{allIds.length}}</div>
<div class="uk-text-bold">{{notFoundIds.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 *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>
</div> </div>
</div> </div>
</div> </div>

View File

@ -323,8 +323,8 @@ export class UploadDoisComponent implements OnInit {
} }
updatePage(page) { updatePage($event) {
this.page = page; this.page = $event.value;
} }
updateKeyword(keyword){ updateKeyword(keyword){