[Monitor dashboard | trunk]

monitor Component: Add fl0 filter


git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@59118 d315682c-612b-4755-9ff5-7f18f6832af3

src/app/monitor/monitor.component.html

@@ -1,3 +1,45 @@
+<ng-template #selected_filters_pills let-margin="margin">
+<!--  <div class="uk-grid uk-grid-small uk-text-small" uk-grid>-->
+    <span *ngIf="periodFilter.selectedFromAndToValues.length > 0"  class="uk-grid-margin" >
+        <span  class="selectedFilterLabel"  [class.uk-margin-small-left]="margin" title="Remove {{periodFilter.selectedFromAndToValues}}">
+          <a (click)="clearPeriodFilter()" [class]="((disableForms)?'  uk-disabled':'  ')+' uk-link-text '"> <i
+            class=" material-icons"></i>
+
+          <span class="uk-margin-small-left">{{periodFilter.selectedFromAndToValues}}</span>
+        </a></span>
+    </span>
+    <ng-container *ngFor="let filter of filters ">
+      <ng-container *ngIf="filter.countSelectedValues > 0">
+        <ng-container *ngFor="let value of filter.values; let i = index;  let end = last; ">
+          <ng-container *ngIf="value.selected">
+             <span  class="uk-grid-margin" >
+                          <!-- if no grid on the div above, remove it and move class 'selectedFilterLabel' on top span -->
+              <span class="selectedFilterLabel " [class.uk-margin-small-left]="margin" [title]="'Remove '+value.name"
+                    (click)="value.selected = false; filter.radioValue=''; filter.countSelectedValues=
+                    filter.countSelectedValues -1;
+                    filterChanged({value:filter}) ">
+                <a [class]="((disableForms)?'  uk-disabled':'  ')+' uk-link-text '">
+                  <span class=" clickable" aria-hidden="true">
+                    <span class="uk-icon">
+                      <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
+                           icon="close" ratio="0.8"><path fill="none" stroke="#000" stroke-width="1.6"
+                                                          d="M16,16 L4,4"></path><path fill="none"
+                                                                                       stroke="#000"
+                                                                                       stroke-width="1.6"
+                                                                                       d="M16,4 L4,16"></path></svg>
+                    </span>
+                  </span>
+                  <span class="uk-margin-small-left"
+                        [innerHtml]="(value.name.length > 34)?value.name.substring(0,34)+'...':value.name"></span>
+                </a>
+              </span>
+            </span>
+          </ng-container>
+        </ng-container>
+      </ng-container>
+    </ng-container>
+<!--  </div>-->
+</ng-template>
 <div id="page_content">
       <div  class="uk-navbar-container uk-sticky uk-sticky-fixed" style="top: 70px; position:
       fixed; width: 100%">
@@ -28,12 +70,9 @@
             </li>
           </ng-template>
         </ul>
-        <div *ngIf="filterApplied">
+        <div *ngIf="countSelectedFilters() > 0" class="uk-grid uk-grid-small">
-          <span>Filters: </span>
+          <span class="uk-grid-margin">Filters: </span>
-          <span *ngIf="periodFilter.selectedFromAndToValues.length > 0" class="selectedFilterLabel">
+          <ng-container *ngTemplateOutlet="selected_filters_pills; context: {margin:true}"></ng-container>
-          <a (click)="clearPeriodFilter()"> <i
-            class=" material-icons"></i>
-          </a>  {{periodFilter.selectedFromAndToValues}}</span>
         </div>
         <div *ngIf="privateStakeholder">
           <div class="uk-text-center uk-height-medium">
@@ -171,18 +210,23 @@
       class=" material-icons md-icon"></i>
     </a></div>
     <div class="uk-padding">
-      <div class="uk-h4 ">Filters</div>
+      <div class="uk-grid uk-flex uk-flex-middle"><div class="uk-h4 ">Filters</div><a *ngIf="countSelectedFilters() > 1"
-      <div *ngIf="periodFilter.selectedFromAndToValues.length > 0">
+        class="  portal-link uk-width-1-2" (click)="clearAll()"> Clear All </a></div>
-        <span  class="selectedFilterLabel" title="Remove {{periodFilter.selectedFromAndToValues}}">
+      <div class="uk-grid uk-grid-small uk-text-small" uk-grid>
-          <a (click)="clearPeriodFilter()"> <i
+        <ng-container *ngTemplateOutlet="selected_filters_pills; context: {margin:false}"></ng-container>
-            class=" material-icons"></i>
-          </a>  {{periodFilter.selectedFromAndToValues}}</span>
       </div>
+
       <ul class="uk-list uk-list-divider  uk-margin-medium">
         <li>
           <range-filter   [filter]="periodFilter" yearMin="2000" yearMax="2020" [mandatoryRange]="true"
                           (onFilterChange)="filter()"></range-filter>
         </li>
+        <ng-container *ngFor="let filter of filters ">
+          <li *ngIf="filter.values.length >0">
+            <search-filter [filter]="filter" [showResultCount]=false
+                           (onFilterChange)="filterChanged($event)"></search-filter>
+          </li>
+        </ng-container>
       </ul>
 
     </div>

src/app/monitor/monitor.component.ts

@@ -19,6 +19,9 @@ import {Subscription} from "rxjs";
 import {Session, User} from "../openaireLibrary/login/utils/helper.class";
 import {UserManagementService} from "../openaireLibrary/services/user-management.service";
 import {RangeFilter} from "../openaireLibrary/utils/rangeFilter/rangeFilterHelperClasses.class";
+import {Filter, Value} from "../openaireLibrary/searchPages/searchUtils/searchHelperClasses.class";
+import {Location} from "@angular/common";
+import {RouterHelper} from "../openaireLibrary/utils/routerHelper.class";
 
 @Component({
   selector: 'monitor',
@@ -45,10 +48,10 @@ export class MonitorComponent implements OnInit, OnDestroy {
   public chartsActiveType: Map<string, IndicatorPath> = new Map<string, IndicatorPath>();
   private errorMessages: ErrorMessagesComponent;
   properties: EnvProperties;
-  fundingL0;
   filterToggle = false;
-  filterApplied = false;
+  public routerHelper: RouterHelper = new RouterHelper();
-
+  filters:Filter[] = [];
+  queryParams = {};
   periodFilter:RangeFilter = { title: "Period",  filterId: "year", originalFilterIdFrom: null, originalFilterIdTo: null, selectedFromValue: null, selectedToValue: null, selectedFromAndToValues: ""};
   privateStakeholder = false;
   public keyword: FormControl;
@@ -65,7 +68,8 @@ export class MonitorComponent implements OnInit, OnDestroy {
     private layoutService: LayoutService,
     private seoService: SEOService,
     private cdr: ChangeDetectorRef,
-    private sanitizer: DomSanitizer, private _fb: FormBuilder,  private router: Router) {
+    private sanitizer: DomSanitizer, private _fb: FormBuilder,  private router: Router,
+    private location: Location) {
     this.errorCodes = new ErrorCodes();
     this.errorMessages = new ErrorMessagesComponent();
     this.status = this.errorCodes.LOADING;
@@ -95,13 +99,8 @@ export class MonitorComponent implements OnInit, OnDestroy {
             this.properties = data.envSpecific;
             var url = data.envSpecific.baseLink + this._router.url;
             this.route.queryParams.subscribe(params => {
+              this.queryParams = Object.assign({}, params);
               this.isViewPublic = (params['view'] == 'public');
-              this.periodFilter.selectedFromValue = (params['year'] && params['year'].indexOf("range")==0)?params['year'].split("range")[1].split(":")[0]:"";
-              this.periodFilter.selectedToValue = (params['year'] && params['year'].indexOf("range")==0)?params['year'].split("range")[1].split(":")[1]:"";
-              this.validateYearRange(false);
-              if (this.stakeholder && !this.privateStakeholder) {
-                this.setIndicators();
-              }
             });
             if (!this.stakeholder || this.stakeholder.alias !== params['stakeholder']) {
               this.status = this.errorCodes.LOADING;
@@ -110,6 +109,13 @@ export class MonitorComponent implements OnInit, OnDestroy {
               subscription = this.stakeholderService.getStakeholderAsObservable().subscribe(stakeholder => {
                 if (stakeholder) {
                   this.stakeholder = stakeholder;
+                  // add fl0 filter only for EC
+                  if(this.stakeholder.index_id == "ec__________::EC"){
+                    this.filters.push({title: "Funding Stream",filterId: "relfundinglevel0_id",originalFilterId: "relfundinglevel0_id", countSelectedValues: 0,
+                      values:[{name: "EC|FP7", id: "ec__________::EC::FP7", selected:  false, number: 0}, {name: "EC|H2020", id: "ec__________::EC::H2020", selected:  false, number: 0}]
+                      ,filterOperator: "or", valueIsExact: true, filterType: "radio", radioValue:""});
+                  }
+                  this.initializeFilters();
                   if(stakeholder.isActive && (stakeholder.isPublic || this.isPublicOrIsMember(stakeholder.isPublic))) {
                     this.seoService.createLinkForCanonicalURL(url, false);
                     this._meta.updateTag({content: url}, "property='og:url'");
@@ -138,12 +144,32 @@ export class MonitorComponent implements OnInit, OnDestroy {
               });
               this.subscriptions.push(subscription);
             } else {
+              console.debug(" stakeholder is already available")
+              this.initializeFilters();
               this.setView(params);
             }
           });
         }));
       });
   }
+  private initializeFilters(){
+    this.periodFilter.selectedFromValue = (this.queryParams['year'] && this.queryParams['year'].indexOf("range")==0)?this.queryParams['year'].split("range")[1].split(":")[0]:"";
+    this.periodFilter.selectedToValue = (this.queryParams['year'] && this.queryParams['year'].indexOf("range")==0)?this.queryParams['year'].split("range")[1].split(":")[1]:"";
+    this.validateYearRange(false);
+
+    for(let filter of this.filters) {
+      if (this.queryParams[filter.filterId]) {
+        for (let value of filter.values) {
+          if (value.id == this.queryParams[filter.filterId]) {
+            value.selected = true;
+            filter.countSelectedValues = 1;
+            break;
+          }
+        }
+      }
+    }
+
+  }
   private validateYearRange(navigateTo:boolean=false){
     let validYears = true;
 
@@ -160,15 +186,42 @@ export class MonitorComponent implements OnInit, OnDestroy {
       validYears = false;
     }
     if(!validYears || navigateTo){
-      this.router.navigate(
+      if(this.periodFilter.selectedFromValue || this.periodFilter.selectedToValue){
-        [],
+        this.queryParams["year"]='range'+(this.periodFilter.selectedFromValue?this.periodFilter.selectedFromValue:'')+":"+(this.periodFilter.selectedToValue?this.periodFilter.selectedToValue:"");
-        {
+      }else{
-          relativeTo: this.route,
+         delete this.queryParams["year"];
-          queryParams: { year: 'range'+(this.periodFilter.selectedFromValue?this.periodFilter.selectedFromValue:'')+":"+(this.periodFilter.selectedToValue?this.periodFilter.selectedToValue:"") },
+      }
-          queryParamsHandling: 'merge'
+      this.location.go(location.pathname, this.routerHelper.createQueryParamsString( Object.keys(this.queryParams), Object.values(this.queryParams)));
-        });
+      this.setIndicators();
     }
   }
+  clearAll(){
+    for(let filter of this.filters) {
+      filter.countSelectedValues = 0;
+      filter.radioValue = "";
+      for (let value of filter.values) {
+        if (value.selected) {
+          value.selected = false;
+        }
+      }
+      if (this.queryParams[filter.filterId]) {
+        delete this.queryParams[filter.filterId];
+      }
+    }
+    this.periodFilter.selectedFromValue = "";
+    this.periodFilter.selectedToValue = "";
+    this.validateYearRange(true)
+  }
+  countSelectedFilters():number{
+    let count = 0;
+    if(this.periodFilter.selectedFromAndToValues.length > 0){
+      count++;
+    }
+    for(let filter of this.filters) {
+      count +=filter.countSelectedValues;
+    }
+    return count;
+  }
   public get open() {
     return this.layoutService.open;
   }
@@ -249,7 +302,38 @@ export class MonitorComponent implements OnInit, OnDestroy {
   filter(){
     this.validateYearRange(true);
   }
-  clearPeriodFilter(){
+  filterChanged($event, navigate:boolean = true) {
+    let selected = "";
+    for(let value of $event.value.values){
+      if(value.selected){
+        selected = value.id;
+        break;
+      }
+    }
+    if(selected){
+      this.queryParams[$event.value.filterId]=selected;
+    }else{
+      delete this.queryParams[$event.value.filterId];
+    }
+    if(navigate) {
+      // this.router.navigate(
+      //   [],
+      //   {
+      //     relativeTo: this.route,
+      //     queryParams: this.queryParams,
+      //   });
+      this.location.go(location.pathname, this.routerHelper.createQueryParamsString( Object.keys(this.queryParams), Object.values(this.queryParams)));
+      this.setIndicators();
+    }
+
+  }
+  private getfl0(){
+    if (this.queryParams["relfundinglevel0_id"] && this.filters.length > 0){
+      return this.queryParams["relfundinglevel0_id"].split("::")[this.queryParams["relfundinglevel0_id"].split("::").length -1];
+    }
+    return null;
+  }
+    clearPeriodFilter(){
     if(this.periodFilter.selectedFromValue || this.periodFilter.selectedToValue){
       this.periodFilter.selectedFromValue = "";
       this.periodFilter.selectedToValue = "";
@@ -258,16 +342,16 @@ export class MonitorComponent implements OnInit, OnDestroy {
 
   }
   private setIndicators() {
+    console.debug("Set Indicators")
     this.periodFilter.selectedFromAndToValues = (this.periodFilter.selectedFromValue || this.periodFilter.selectedToValue?((this.periodFilter.selectedFromValue && !this.periodFilter.selectedToValue?"From ":"")+(!this.periodFilter.selectedFromValue && this.periodFilter.selectedToValue?"Until ":"")+ (this.periodFilter.selectedFromValue?this.periodFilter.selectedFromValue:"") +
       (this.periodFilter.selectedFromValue && this.periodFilter.selectedToValue?" - ":"")+ (this.periodFilter.selectedToValue?this.periodFilter.selectedToValue:"")):"");
-    this.filterApplied = !!(this.periodFilter.selectedFromValue || this.periodFilter.selectedToValue);
     //clear numbers when filters change
     this.numberResults.clear();
     let urls: Map<string, [number, number][]> = new Map<string, [number, number][]>();
     this.activeSubCategory.numbers.forEach((section, i) => {
       section.indicators.forEach((number, j) => {
         if (number.isActive && this.isPublicOrIsMember(number.isPublic)) {
-          let url =this.indicatorUtils.getFullUrlWithFilters(this.stakeholder, number.indicatorPaths[0],this.fundingL0, this.periodFilter.selectedFromValue, this.periodFilter.selectedToValue);
+          let url =this.indicatorUtils.getFullUrlWithFilters(this.stakeholder, number.indicatorPaths[0], this.getfl0(), this.periodFilter.selectedFromValue, this.periodFilter.selectedToValue);
           const pair = JSON.stringify([number.indicatorPaths[0].source, url]);
           const indexes = urls.get(pair) ? urls.get(pair) : [];
           indexes.push([i, j]);
@@ -304,7 +388,7 @@ export class MonitorComponent implements OnInit, OnDestroy {
 
   public getUrlByStakeHolder(indicatorPath: IndicatorPath) {
     return this.sanitizer.bypassSecurityTrustResourceUrl(
-      this.statisticsService.getChartUrl(indicatorPath.source, this.indicatorUtils.getFullUrlWithFilters(this.stakeholder, indicatorPath, this.fundingL0, this.periodFilter.selectedFromValue, this.periodFilter.selectedToValue)));
+      this.statisticsService.getChartUrl(indicatorPath.source, this.indicatorUtils.getFullUrlWithFilters(this.stakeholder, indicatorPath,  this.getfl0(), this.periodFilter.selectedFromValue, this.periodFilter.selectedToValue)));
   }
 
   public setActiveChart(i: number, j: number, type: string) {

src/app/monitor/monitor.module.ts

@@ -20,12 +20,13 @@ import {UserMiniModule} from "../openaireLibrary/login/userMiniModule.module";
 import {ClickModule} from "../openaireLibrary/utils/click/click.module";
 import {BottomModule} from "../openaireLibrary/sharedComponents/bottom.module";
 import {RangeFilterModule} from "../openaireLibrary/utils/rangeFilter/rangeFilter.module";
+import {SearchFilterModule} from "../openaireLibrary/searchPages/searchUtils/searchFilter.module";
 
 @NgModule({
   imports: [
     CommonModule, FormsModule, RouterModule, ErrorMessagesModule,
     HelperModule, Schema2jsonldModule, SEOServiceModule, MonitorRoutingModule, SideBarModule, InputModule,
-    UserMiniModule, ClickModule, BottomModule, RangeFilterModule
+    UserMiniModule, ClickModule, BottomModule, RangeFilterModule, SearchFilterModule
   ],
   declarations: [
     MonitorComponent

src/app/utils/indicator-utils.ts

@@ -372,7 +372,7 @@ export class IndicatorUtils {
         filterApplied = true;
         if(filterType == 'fundingL0') {
           let filterPosition = queries["query"]["name"].split(".").indexOf(filterType == "fundingL0" ? 'fl0' : filterType);
-          if (filterType == "fundingL0") {
+          /*if (filterType == "fundingL0") {*/
             filterApplied = true;
             if (filterPosition != -1) {
               queries["query"]["parameters"][filterPosition - 3] = filterValue;
@@ -380,7 +380,7 @@ export class IndicatorUtils {
               queries["query"]["name"] = queries["query"]["name"] + ".fl0";
               queries["query"]["parameters"].push(filterValue);
             }
-          } else {
+          /*} else {
             filterApplied = true;
             //start_year end_year
             if (filterPosition != -1) {
@@ -392,7 +392,7 @@ export class IndicatorUtils {
               queries["query"]["parameters"].push("9999");
               queries["query"]["parameters"][filterPosition - 3] = filterValue
             }
-          }
+          }*/
         }else{
           let paramFields = queries["query"]["name"].split(".").slice(3);
           // console.debug("Field Params length:" + paramFields.length)

src/assets/theme-assets/dashboard-custom.css

@@ -581,3 +581,7 @@ body.dashboard {
   left: -36px !important;
   width: 36px !important;
 }
+
+.uk-grid.uk-grid-small > .uk-grid-margin{
+  margin-top: 15px !important;
+}