2023-11-14 15:13:09 +01:00
< div >
2023-11-15 09:36:56 +01:00
< div class = "uk-banner" >
< div class = "uk-container uk-container-large" >
2023-11-29 12:12:36 +01:00
< div class = "uk-padding-small uk-padding-remove-vertical" >
< div class = "uk-grid uk-flex-middle" uk-grid >
< div class = "uk-width-expand" >
2023-12-12 12:50:19 +01:00
< h1 class = "uk-h4 uk-margin-small-bottom" > Upload DOIs< / h1 >
2023-11-29 12:12:36 +01:00
< div class = "uk-margin-bottom" > Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.< / div >
2023-11-15 09:36:56 +01:00
< / div >
2023-12-12 12:50:19 +01:00
< div * ngIf = "filesToUpload && !loading" class = "uk-width-xlarge@l uk-width-large@m uk-width-1-1 uk-margin-small-bottom" >
2023-11-29 12:12:36 +01:00
< 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 >
2023-11-15 09:36:56 +01:00
< / div >
< / div >
2023-11-09 14:35:44 +01:00
< / div >
< / div >
2023-11-29 12:12:36 +01:00
< / 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 >
2023-11-09 14:35:44 +01:00
< / div >
< / div >
2023-11-29 12:12:36 +01:00
<!-- BEFORE UPLOADING -->
2023-12-12 12:50:19 +01:00
< 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 >
2023-11-09 14:35:44 +01:00
< div class = "uk-button uk-button-secondary" >
< input id = "exampleInputFile" class = "" type = "file" ( change ) = " fileChangeEvent ( $ event ) " / >
2023-11-14 15:13:09 +01:00
< span > Choose File< / span >
2023-11-09 14:35:44 +01:00
< / div >
2023-12-12 12:50:19 +01:00
< div class = "uk-text-meta uk-text-small uk-margin-small-top" >
Maximum size: 5 MB
< / div >
2023-11-09 14:35:44 +01:00
< / div >
< / div >
2023-11-29 12:12:36 +01:00
<!-- LOADING WHILE UPLOADING -->
2023-12-12 12:50:19 +01:00
< 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
2023-11-09 14:35:44 +01:00
< / div >
< / div >
< / div >
2023-11-29 12:12:36 +01:00
< / div >
2023-11-09 14:35:44 +01:00
2023-11-29 12:12:36 +01:00
<!-- LOADED -->
2023-12-12 12:50:19 +01:00
< div * ngIf = "filesToUpload && !loading" class = "uk-section uk-container uk-container-large" id = "loaded" >
2023-11-29 12:12:36 +01:00
< div class = "uk-grid" uk-grid >
<!-- Not Found -->
2023-12-05 13:51:29 +01:00
<!-- <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>
2023-11-29 12:12:36 +01:00
< div * ngFor = "let id of notFoundIds" >
< a [ href ] = " properties . doiURL + id " class = "custom-external" target = "_blank" >
{{id}}
< / a >
< / div >
2023-12-05 13:51:29 +01:00
< / div > -->
2023-12-12 10:27:58 +01:00
<!-- 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 -->
2023-12-12 12:50:19 +01:00
< div class = "uk-flex uk-flex-middle uk-margin-bottom" style = "grid-gap: 10px;" >
2023-12-12 10:27:58 +01:00
< 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 >
2023-11-20 16:58:41 +01:00
< / div >
2023-12-12 10:27:58 +01:00
< / dropdown-filter >
2023-11-29 12:12:36 +01:00
< / div >
2023-12-12 10:27:58 +01:00
< 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 >
2023-11-29 12:12:36 +01:00
< / ul >
2023-11-20 16:58:41 +01:00
< / div >
2023-12-12 10:27:58 +01:00
< / div > -->
< / div >
<!-- Search and paging -->
2023-12-12 12:50:19 +01:00
< div class = "uk-flex uk-flex-middle uk-flex-right@m uk-flex-center uk-flex-wrap" >
2023-12-12 10:27:58 +01:00
< div search-input [ searchInputClass ] = " ' flat ' " [ expandable ] = " true "
2023-12-12 12:50:19 +01:00
class="uk-width-large@m uk-width-1-1"
2023-12-12 10:27:58 +01:00
placeholder="Search for DOIs" [value]="keyword" (valueChange)="updateKeyword($event)">
2023-11-20 16:58:41 +01:00
< / div >
2023-12-12 10:27:58 +01:00
< 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 > -->
2023-11-20 16:58:41 +01:00
< / div >
2023-12-12 10:27:58 +01:00
<!-- 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 >
2023-12-12 12:50:19 +01:00
< 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 >
2023-12-12 10:27:58 +01:00
< / div >
< ng-container * ngIf = "!loading && !showFound" >
2023-12-12 12:50:19 +01:00
< 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 >
2023-12-05 13:51:29 +01:00
< div * ngFor = "let id of notFoundIds" >
< a [ href ] = " properties . doiURL + id " class = "custom-external uk-text-break" target = "_blank" >
{{id}}
< / a >
< / div >
< / div >
2023-12-12 12:50:19 +01:00
< 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 >
2023-12-12 10:27:58 +01:00
< / 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 " >
2023-12-12 12:50:19 +01:00
< div >
2023-12-12 10:27:58 +01:00
< 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
2023-12-05 13:51:29 +01:00
< / ng-container >
2023-11-09 14:35:44 +01:00
< / div >
2023-12-12 10:27:58 +01:00
< ng-container * ngIf = "resultsToShow.length > 0 && showFound" >
2023-11-29 12:12:36 +01:00
< 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> -->
2023-11-09 14:35:44 +01:00
2023-11-29 12:12:36 +01:00
< 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 >
2023-11-09 14:35:44 +01:00
< / div >
2023-12-12 10:27:58 +01:00
< / 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 >
2023-11-09 14:35:44 +01:00
< / div >
2023-12-12 10:27:58 +01:00
< 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 >
2023-11-29 12:12:36 +01:00
< / div >
2023-11-09 14:35:44 +01:00
2023-12-12 10:27:58 +01:00
< / 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 >
2023-11-09 14:35:44 +01:00
< / div >
2023-12-12 10:27:58 +01:00
<!-- <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 > -->
2023-11-29 12:12:36 +01:00
< / div >
2023-11-09 14:35:44 +01:00
< / div >
2023-12-12 10:27:58 +01:00
< / div >
2023-11-09 14:35:44 +01:00
< / div >
2023-10-25 16:42:38 +02:00
< / div >
< / div >