[WIP] Upload dois: add filtering for green ang diamond. update filtering for access route

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

@@ -84,7 +84,7 @@
                   </div>
                 </dropdown-filter>
               </div>
-
+              <div class="uk-button uk-button-default" [class.uk-button-primary]="onlyGreen" (click)="onlyGreen=!onlyGreen; updateView()">Green</div>
               <div *ngIf="accessRouteFilter">
                 <dropdown-filter [count]="accessRouteFilter.countSelectedValues" [name]="accessRouteFilter.title"
                                  dropdownMinWidth="450">
@@ -95,6 +95,7 @@
                   </div>
                 </dropdown-filter>
               </div>
+              <div class="uk-button uk-button-default" [class.uk-button-primary]="onlyDiamond" (click)="onlyDiamond=!onlyDiamond; updateView()" title="Published in a Diamond OA journal">Diamond OA</div>
               <!--<div>
                 <a class="uk-link uk-width-small" >Filter by</a>
                 <div uk-dropdown>
@@ -121,16 +122,16 @@
             <table class="uk-table uk-table-responsive uk-table-striped">
               <tr>
   <!--              <th>DOI</th>-->
-                <th><a (click)="sortResults()">Title sort</a></th>
+                <th><a (click)="sortResults(true)">Title sort</a></th>
                 <th>Access Mode</th>
                 <th>Access Route</th>
-                <th> Published in a Diamond OA journal</th>
+                <th title="Published in a Diamond OA journal"> Diamond OA</th>
               </tr>
               <tr *ngFor="let result of resultsToShow.slice((page-1)*size,page*size)">
                   <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>
+                  <td>   <span *ngIf="result.green" ></span> green {{result.accessRoute}}</td>
                 <td>             <span *ngIf="result.diamond" uk-icon="check" class="uk-text-success"></span>
                 </td>
               </tr>
@@ -139,16 +140,16 @@
         </div>
         <div class="uk-width-1-4">
         <div class="uk-margin-top">
-          <span class="uk-text-bold uk-margin-small-bottom">{{foundIds.length}} results</span> found in Irish Monitor
+          <span class="uk-text-bold uk-margin-small-bottom">{{foundIds.length}} results</span> found
         </div>
         <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']}} ({{getercentage(stats['open'])}}%)</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']}} ({{getercentage(stats['restricted'])}}%)</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']}} ({{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-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>
@@ -156,7 +157,7 @@
           <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>
           <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 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']}} ({{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-2 ">

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

@@ -55,7 +55,8 @@ export class UploadDoisComponent implements OnInit {
   }
   accessModeFilter:Filter = null;
   accessRouteFilter:Filter = null;
-
+  onlyGreen:boolean = false;
+  onlyDiamond:boolean = false;
   /*filterByAccessRouteOptions = [
     {label: "Green OA", value: "route-green"},
     {label: "Published in OA Diamond", value: "route-diamond"},
@@ -90,6 +91,8 @@ export class UploadDoisComponent implements OnInit {
     this.results = [];
     this.resultsToShow = [];
     this.sortByTitleAsc = true;
+    this.onlyGreen = false;
+    this.onlyDiamond =false;
     this.keyword = "";
     this.showFound = true;
     if (this.filesToUpload.length == 0) {
@@ -227,8 +230,8 @@ export class UploadDoisComponent implements OnInit {
           title: result.title.name,
           accessMode: result.title.accessMode,
           accessRoute:"gold", //TODO update when we have the values
-          green: false, //TODO update when we have the values
+          green: true, //TODO update when we have the values
-          diamond: false, //TODO update when we have the values
+          diamond: true, //TODO update when we have the values
         };
         this.results.push(showRes)
         this.addStatsPerResult(showRes)
@@ -243,7 +246,7 @@ export class UploadDoisComponent implements OnInit {
           }
         }
       }
-      this.resultsToShow = [...this.results];
+      this.updateView();
 
     }));
   }
@@ -277,7 +280,12 @@ export class UploadDoisComponent implements OnInit {
         this.stats.restricted++;
       }
     }
-    //TDO add access routes stats
+    if(result.green){
+      this.stats.green++;
+    }
+    if(result.diamond){
+      this.stats.diamond++;
+    }
     if(result.accessRoute) {
       if (result.accessRoute == "gold") {
         this.stats.gold++;
@@ -305,13 +313,19 @@ export class UploadDoisComponent implements OnInit {
     this.resultsToShow = [...this.results];
     this.resultsToShow = this.filterResultsByAccessMode();
     this.resultsToShow = this.filterResultsByAccessRoute();
+    if(this.onlyGreen){
+      this.resultsToShow = this.resultsToShow.filter(res =>  res.green);
+    }
+    if(this.onlyDiamond){
+      this.resultsToShow = this.resultsToShow.filter(res =>  res.diamond);
+    }
     if(this.keyword.length > 0){
       this.resultsToShow = this.filterResultsByKeyword();
     }
      this.resultsToShow= this.sortResults();
   }
   filterResultsByAccessMode() {
-    if (this.accessModeFilter.countSelectedValues > 0) {
+    if (this.accessModeFilter && this.accessModeFilter.countSelectedValues > 0) {
       for (let value of this.accessModeFilter.values) {
         if (value.selected == true) {
           return this.resultsToShow.filter(res => {
@@ -323,7 +337,7 @@ export class UploadDoisComponent implements OnInit {
     return this.resultsToShow;
   }
   filterResultsByAccessRoute() {
-    if (this.accessRouteFilter.countSelectedValues > 0) {
+    if (this.accessRouteFilter && this.accessRouteFilter.countSelectedValues > 0) {
       for (let value of this.accessRouteFilter.values) {
         if (value.selected == true) {
           return this.resultsToShow.filter(res => {
@@ -352,8 +366,10 @@ export class UploadDoisComponent implements OnInit {
 
     })
   }
-  sortResults(){
+  sortResults(changeSorting= false){
-    this.sortByTitleAsc =! this.sortByTitleAsc;
+    if(changeSorting) {
+      this.sortByTitleAsc = !this.sortByTitleAsc;
+    }
      return this.resultsToShow.sort((n1, n2) => {
 
          if (n1.title && n2.title && ((!this.sortByTitleAsc  && n1.title > n2.title) || (this.sortByTitleAsc && n1.title < n2.title))) {
@@ -403,9 +419,9 @@ export class UploadDoisComponent implements OnInit {
       title: "Access Route",
       valueIsExact: false,
       values:[
-        {name: "Gold", id: "route-gold", selected:false, number:this.stats["gold"]},
+        {name: "Gold", id: "gold", selected:false, number:this.stats["gold"]},
-        {name: "Hybrid", id: "route-hybrid", selected:false, number:this.stats["hybrid"]},
+        {name: "Hybrid", id: "hybrid", selected:false, number:this.stats["hybrid"]},
-        {name: "Bronze", id: "route-bronze", selected:false, number:this.stats["bronze"]}
+        {name: "Bronze", id: "bronze", selected:false, number:this.stats["bronze"]}
       ]};
 
   }