[WIP] Upload dois: update sorting and filtering

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

@@ -39,7 +39,7 @@
       <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">
+  <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>
@@ -53,31 +53,57 @@
       </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>
+              <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 *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>
                 <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>-->
-            <div>
+
-              <a class="uk-link uk-width-small" >Sort by</a>
-              <div uk-dropdown>
-                <ul class="uk-nav uk-dropdown-nav">
-                  <li *ngFor="let option of sortByOptions" [class.uk-active]="filterBy == option.value"><a (click)="updateSortBy(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}}
@@ -95,23 +121,18 @@
             <table class="uk-table uk-table-responsive uk-table-striped">
               <tr>
   <!--              <th>DOI</th>-->
-              <th>Title</th>
+                <th><a (click)="sortResults()">Title sort</a></th>
                 <th>Access Mode</th>
                 <th>Access Route</th>
-              <th> in OpenAIRE</th>
+                <th> Published in a Diamond OA journal</th>
               </tr>
               <tr *ngFor="let result of resultsToShow.slice((page-1)*size,page*size)">
-              <ng-container *ngIf="result.found">
                   <td><a [href]="'https://beta.explore.openaire.eu/search/result?pid='+result.doi"
                          target="_blank">{{result.title}}</a></td>
                   <td>{{result.accessMode}}</td>
                   <td>{{result.accessRoute}}</td>
-              </ng-container>
+                <td>             <span *ngIf="result.diamond" uk-icon="check" class="uk-text-success"></span>
-              <ng-container *ngIf="!result.found">
+                </td>
-                <td colspan="3"> {{result.doi}}</td>
-
-              </ng-container>
-              <td><span *ngIf="result.found" uk-icon="check" class="uk-text-success"></span></td>
               </tr>
             </table>
           </div>
@@ -127,14 +148,18 @@
           <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>
-          <div class="uk-grid uk-margin-remove-top"><div class="uk-width-expand"><span class="dot diamond"></span> Diamond</div><div class="uk-text-right uk-width-auto"> {{stats['diamond']}} ({{getercentage(stats['diamond'])}}%)</div></div>
+          <hr>
+          <div class="uk-grid uk-margin-remove-top"><div class="uk-width-expand"><span class="dot diamond"></span> Published in a Diamond OA journal</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-3 ">
+          <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>
@@ -142,13 +167,13 @@
             </div>
 
           </div>
-            <div *ngIf="notFoundIds.length > 0" class="uk-text-center ">
+            <!--<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>-->
           <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>
@@ -166,6 +191,7 @@
         </div>
         </div>
       </div>
+      </ng-container>
     </div>
 
   </div>

src/app/upload-dois/upload-dois.component.ts

@@ -6,6 +6,7 @@ import {Subscriber, timer} from "rxjs";
 import {properties} from "../../environments/environment";
 import {SearchResearchResultsService} from "../openaireLibrary/services/searchResearchResults.service";
 import {map} from "rxjs/operators";
+import {Filter} from "../openaireLibrary/searchPages/searchUtils/searchHelperClasses.class";
 
 @Component({
   selector: 'upload-dois',
@@ -52,26 +53,19 @@ export class UploadDoisComponent implements OnInit {
     bronze:0,
     diamond:0
   }
-  filterBy = null;
+  accessModeFilter:Filter = null;
-  filterByOptions = [{label: "In Openaire", value: "openaire"},
+  accessRouteFilter:Filter = null;
-    {label: "Not found", value: "notFound"},
+
-    {label: "Open Access", value: "access-open"},
+  /*filterByAccessRouteOptions = [
-    {label: "Embargo", value: "access-embargo"},
+    {label: "Green OA", value: "route-green"},
-    {label: "Restricted", value: "access-restricted"},
+    {label: "Published in OA Diamond", value: "route-diamond"},
-    {label: "Closed", value: "access-closed"},
+  ]*/
-    {label: "Green", value: "route-green"},
+  sortByTitleAsc = true;
-    {label: "Gold", value: "route-gold"},
+
-    {label: "Hybrid", value: "route-hybrid"},
-    {label: "Bronze", value: "route-bronze"},
-    {label: "Diamond", value: "route-diamond"},
-  ]
-  sortBy = null;
-  sortByOptions = [{label: "Title", value: "title"},
-    {label: "Access mode", value: "accessMode"},
-  ]
 
   keyword = "";
   loading = false;
+  showFound = true;
   constructor(private _searchResearchResultsService: SearchResearchResultsService) {
 
   }
@@ -95,9 +89,9 @@ export class UploadDoisComponent implements OnInit {
     this.errorMessage = "";
     this.results = [];
     this.resultsToShow = [];
-    this.sortBy = null;
+    this.sortByTitleAsc = true;
-    this.filterBy = null;
     this.keyword = "";
+    this.showFound = true;
     if (this.filesToUpload.length == 0) {
       this.errorMessage = "There is no selected file to upload.";
       return;
@@ -130,7 +124,7 @@ export class UploadDoisComponent implements OnInit {
           let id = this.removeDoubleQuotes(values[0]);
           if (DOI.isValidDOI(id)) {
             id = Identifier.getRawDOIValue(id);
-            console.log(id, id.split("\r")[0]);
+            // console.log(id, id.split("\r")[0]);
             id = id.split("\r")[0]
             if (this.allIds.indexOf(id) > -1) {
               this.duplicateIds.push(id);
@@ -232,20 +226,20 @@ export class UploadDoisComponent implements OnInit {
           doi: matchingDOI,
           title: result.title.name,
           accessMode: result.title.accessMode,
-          accessRoute: null,
+          accessRoute:"gold", //TODO update when we have the values
-          green: false,
+          green: false, //TODO update when we have the values
-          openAccessColor:null,
+          diamond: false, //TODO update when we have the values
-          diamond: false,
-          found: true
         };
         this.results.push(showRes)
-        this.addStatsPerResult(result)
+        this.addStatsPerResult(showRes)
+        console.log(showRes, this.stats)
+        this.initFilters();
       }
       if (data[0] < dois.length) {
         for (let doi of dois) {
           if (this.foundIds.indexOf(doi) == -1) {
             this.notFoundIds.push(doi);
-            this.results.push({doi: doi, title: null, accessMode: null, green: false, openAccessColor:null, diamond: false, accessRoute: null, found: false})
+            // this.results.push({doi: doi, title: null, accessMode: null, green: false, openAccessColor:null, diamond: false, accessRoute: null, found: false})
           }
         }
       }
@@ -269,34 +263,39 @@ export class UploadDoisComponent implements OnInit {
   }
 
   addStatsPerResult(result) {
-    if (result.title.accessMode == "Open Access") {
+    if(result.accessMode) {
+      if (result.accessMode == "Open Access") {
         this.stats.open++;
       }
-    if (result.title.accessMode == "Closed Access") {
+      if (result.accessMode == "Closed Access") {
         this.stats.closed++;
       }
-    if (result.title.accessMode == "Embargo") {
+      if (result.accessMode == "Embargo") {
         this.stats.embargo++;
       }
-    if (result.title.accessMode == "Restricted") {
+      if (result.accessMode == "Restricted") {
         this.stats.restricted++;
       }
+    }
     //TDO add access routes stats
+    if(result.accessRoute) {
+      if (result.accessRoute == "gold") {
+        this.stats.gold++;
+      }
+      if (result.accessRoute == "hybrid") {
+        this.stats.hybrid++;
+      }
+      if (result.accessRoute == "bronze") {
+        this.stats.bronze++;
+      }
+    }
+
   }
 
   updatePage(page) {
     this.page = page;
   }
 
-  updateSortBy(sortBy) {
-    this.sortBy = sortBy;
-    this.updateView();
-  }
-
-  updateFilterBy(filterBy) {
-    this.filterBy = filterBy;
-    this.updateView();
-  }
   updateKeyword(keyword){
     this.keyword = keyword;
     this.updateView();
@@ -304,64 +303,64 @@ export class UploadDoisComponent implements OnInit {
 
   updateView() {
     this.resultsToShow = [...this.results];
-    if (this.filterBy) {
+    this.resultsToShow = this.filterResultsByAccessMode();
-      this.resultsToShow = this.filterResults();
+    this.resultsToShow = this.filterResultsByAccessRoute();
-    }
     if(this.keyword.length > 0){
       this.resultsToShow = this.filterResultsByKeyword();
     }
-    if(this.sortBy){
      this.resultsToShow= this.sortResults();
   }
-
+  filterResultsByAccessMode() {
-
+    if (this.accessModeFilter.countSelectedValues > 0) {
+      for (let value of this.accessModeFilter.values) {
+        if (value.selected == true) {
+          return this.resultsToShow.filter(res => {
+            return res.accessMode == value.id;
+          });
         }
-
+      }
-  filterResults() {
+    }
+    return this.resultsToShow;
+  }
+  filterResultsByAccessRoute() {
+    if (this.accessRouteFilter.countSelectedValues > 0) {
+      for (let value of this.accessRouteFilter.values) {
+        if (value.selected == true) {
+          return this.resultsToShow.filter(res => {
+            return res.accessRoute == value.id;
+          });
+        }
+      }
+    }
+    return this.resultsToShow;
+  }
+  /*filterResults() {
     return this.results.filter(res =>{
-      if(this.filterBy == "openaire"){
+       if(this.filterBy == "route-green") {
-        return res.found
-      }else if(this.filterBy == "notFound"){
-        return !res.found
-      }else if(this.filterBy == "access-closed"){
-        return res.accessMode == "Closed Access";
-      }else if(this.filterBy == "access-restricted"){
-        return res.accessMode == "Restricted";
-      }else if(this.filterBy == "access-open"){
-        return res.accessMode == "Open Access";
-      }else if(this.filterBy == "access-embargo") {
-        return res.accessMode == "Embargo";
-      }else if(this.filterBy == "route-green") {
         return res.green;
       }else if(this.filterBy == "route-diamond") {
         return res.diamond;
-      }else if(this.filterBy == "route-gold") {
-        return res.openAccessColor == "gold";
-      }else if(this.filterBy == "route-hybrid") {
-        return res.openAccessColor == "hybrid";
-      }else if(this.filterBy == "route-bronze") {
-        return res.openAccessColor == "bronze";
       }else{
         return true;
       }
     })
-  }
+  }*/
   filterResultsByKeyword() {
     return this.resultsToShow.filter(res =>{
 
-        return (res.found && (res.title && res.title.toLowerCase().indexOf(this.keyword.toLowerCase()) !=-1))
+        return (res.title && res.title.toLowerCase().indexOf(this.keyword.toLowerCase()) !=-1);
-          || (res.doi && res.doi.indexOf(this.keyword.toLowerCase()) != -1);
 
     })
   }
   sortResults(){
-
+    this.sortByTitleAsc =! this.sortByTitleAsc;
      return this.resultsToShow.sort((n1, n2) => {
-        if (n1[this.sortBy] && n2[this.sortBy] && n1[this.sortBy] > n2[this.sortBy]) {
+
+         if (n1.title && n2.title && ((!this.sortByTitleAsc  && n1.title > n2.title) || (this.sortByTitleAsc && n1.title < n2.title))) {
            return 1;
          }
 
-        if (n1[this.sortBy] && n2[this.sortBy] &&  n1[this.sortBy] < n2[this.sortBy]) {
+       if (n1.title && n2.title && ((this.sortByTitleAsc  && n1.title > n2.title) || (!this.sortByTitleAsc && n1.title < n2.title))) {
            return -1;
          }
 
@@ -378,4 +377,37 @@ export class UploadDoisComponent implements OnInit {
     var num = new Number((number/from)*100);
     return num == 100?100:num.toPrecision(2);
   }
+
+  initFilters(){
+    this.accessModeFilter = {
+      countSelectedValues: 0,
+      filterId: "access-mode",
+      filterOperator: "or",
+      filterType: "radio",
+      originalFilterId: "",
+      title: "Access Mode",
+      valueIsExact: false,
+
+      values:[
+        {name: "Open Access", id: "Open Access", selected:false, number:this.stats["open"]},
+        {name: "Embargo", id: "Embargo", selected:false, number:this.stats["embargo"]},
+        {name: "Restricted", id: "Restricted", selected:false, number:this.stats["restricted"]},
+        {name: "Closed", id: "Closed", selected:false, number:this.stats["closed"]}
+      ]};
+    this.accessRouteFilter = {
+      countSelectedValues: 0,
+      filterId: "access-route",
+      filterOperator: "or",
+      filterType: "radio",
+      originalFilterId: "",
+      title: "Access Route",
+      valueIsExact: false,
+      values:[
+        {name: "Gold", id: "route-gold", selected:false, number:this.stats["gold"]},
+        {name: "Hybrid", id: "route-hybrid", selected:false, number:this.stats["hybrid"]},
+        {name: "Bronze", id: "route-bronze", selected:false, number:this.stats["bronze"]}
+      ]};
+
+  }
+
 }

src/app/upload-dois/upload-dois.module.ts

@@ -6,12 +6,14 @@ import {SearchResearchResultsServiceModule} from "../openaireLibrary/services/se
 import {PagingModule} from "../openaireLibrary/utils/paging.module";
 import {SearchInputModule} from "../openaireLibrary/sharedComponents/search-input/search-input.module";
 import {IconsModule} from "../openaireLibrary/utils/icons/icons.module";
+import {DropdownFilterModule} from "../openaireLibrary/utils/dropdown-filter/dropdown-filter.module";
+import {SearchFilterModule} from "../openaireLibrary/searchPages/searchUtils/searchFilter.module";
 
 
 @NgModule({
   declarations: [UploadDoisComponent],
   imports: [
-    CommonModule, UploadDoisRoutingModule, SearchResearchResultsServiceModule, PagingModule, SearchInputModule, IconsModule
+    CommonModule, UploadDoisRoutingModule, SearchResearchResultsServiceModule, PagingModule, SearchInputModule, IconsModule, DropdownFilterModule, SearchFilterModule
 
   ],
 })