Criteria: Change criteria in order to be a generic component.

src/app/openaireLibrary

@@ -1 +1 @@
-Subproject commit 799a62afc5c3c752d6b4e3f9e2c6d87433d6a4ad
+Subproject commit 1d2a0effa840836cbb26334eabd9e1ea3752b455

src/app/pages/content-providers/criteria-utils.ts

@@ -2,11 +2,13 @@ import {Option} from "../../openaireLibrary/sharedComponents/input/input.compone
 
 export class CriteriaUtils {
   public static readonly fields: Option[] = [
-    {value: 'title', label: 'Title'},
     {value: 'author', label: 'Author\'s name'},
+    {value: 'title', label: 'Title'},
     {value: 'orcid', label: 'Author\'s ORCID'},
     {value: 'contributor', label: 'Contributor'},
-    {value: 'description', label: 'Description'}
+    {value: 'description', label: 'Description'},
+    {value: 'subject', label: 'Subject'},
+    {value: 'fos', label: 'Field of Science'}
   ]
   
   public static readonly verbs: Option[] = [

src/app/pages/content-providers/criteria/criteria.component.html

@@ -3,118 +3,114 @@
     <loading></loading>
   </div>
   <ng-container *ngIf="!loading">
-    <div class="uk-flex uk-flex-center uk-margin-medium-bottom">
+    <div class="criteria uk-overflow-auto" [ngStyle]="{'max-height.px': maxHeight?maxHeight:null}">
+      <div *ngIf="criteria.length == 0" class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-medium-bottom uk-text-bold">
+        <div>No filters <span *ngIf="dataProvider">for {{dataProvider}}.</span></div>
+        <div *ngIf="dataProvider">If no filters are specified, all {{openaireEntities.RESULTS | lowercase}} of this {{openaireEntities.DATASOURCE | lowercase}} will be included in your
+          {{openaireEntities.COMMUNITY | lowercase}}.
+        </div>
+      </div>
+      <form *ngIf="criteria.length > 0" [formGroup]="selectionCriteriaForm">
+        <div formArrayName="criteria" class="uk-margin-bottom">
+          <ul class="uk-list uk-list-xlarge uk-margin-top uk-margin-bottom">
+            <li *ngFor="let criterion of criteria.controls; let i=index">
+              <div [id]="'criterion-' + i.toString()" [formGroupName]="i.toString()" class="uk-flex">
+                <h3 class="uk-padding uk-margin-remove-bottom uk-margin-top">
+                  {{i + 1}}
+                </h3>
+                <div class="uk-width-expand uk-padding-small criterion uk-border uk-border-rounded uk-overflow-auto" formArrayName="constraint">
+                  <div class="uk-flex-middle uk-grid uk-margin-small-bottom uk-visible@l" uk-grid>
+                    <div class="uk-width-1-4">
+                      <label class="uk-text-uppercase uk-text-bold">Field</label>
+                    </div>
+                    <div class="uk-width-1-4">
+                      <label class="uk-text-uppercase uk-text-bold">Operator</label>
+                    </div>
+                    <div class="uk-width-1-4">
+                      <label class="uk-text-uppercase uk-text-bold">Term</label>
+                    </div>
+                    <div class="uk-width-expand uk-text-truncate">
+                      <label class="uk-text-bold uk-text-uppercase">Match Case</label>
+                    </div>
+                  </div>
+                  <div *ngFor="let constraint of getConstraint(i).controls; let j=index" [formGroupName]="j.toString()"
+                       class="uk-margin-bottom uk-hidden@l">
+                    <div class="uk-flex-middle uk-grid-small uk-margin-medium-bottom" uk-grid>
+                      <div class="uk-flex uk-flex-right uk-width-1-1">
+                        <button class="uk-close uk-icon" (click)="removeConstraint(i, j)">
+                          <icon name="close" ratio="1.5" [flex]="true"
+                                [attr.uk-tooltip]="(getConstraint(i).length === 1?'By removing this constraint, the filter will be removed too':null)"></icon>
+                        </button>
+                      </div>
+                      <div class="uk-width-1-1" input type="select" inputClass="border-bottom" [placeholder]="{static: true, label: 'Choose a field'}"
+                           [options]="fields" [formInput]="constraint.get('field')">
+                        <label class="uk-text-uppercase uk-text-bold uk-width-1-3 uk-text-truncate">Field:</label>
+                      </div>
+                      <div class="uk-width-1-1" input type="select" inputClass="border-bottom"
+                           [options]="verbs" [formInput]="constraint.get('verb')">
+                        <label class="uk-text-uppercase uk-text-bold uk-width-1-3 uk-text-truncate">Operator:</label>
+                      </div>
+                      <div class="uk-width-1-1" input [placeholder]="{static: true, label: 'Type a keyword'}"
+                           [formInput]="constraint.get('value')">
+                        <label class="uk-text-uppercase uk-text-bold uk-width-1-3 uk-text-truncate">Term:</label>
+                      </div>
+                      <div class="uk-width-1-1">
+                        <div class="uk-grid" uk-grid>
+                          <label class="uk-text-uppercase uk-text-bold uk-width-1-3 uk-text-truncate">Match Case</label>
+                          <div class="uk-width-expand">
+                            <mat-slide-toggle [checked]="constraint.get('verb_suffix').value === ''"
+                                              [attr.uk-tooltip]="(constraint.get('verb_suffix').value === ''?('Only \'\'' + constraint.get('value').value + '\'\' matches'):
+                                        ('Both \'\'' + constraint.get('value').value.toUpperCase() + '\'\' and \'\'' + constraint.get('value').value.toLowerCase() + '\'\' match'))"
+                                              (change)="caseSensitive($event, constraint)"></mat-slide-toggle>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div *ngFor="let constraint of getConstraint(i).controls; let j=index"
+                       [formGroupName]="j.toString()" class="uk-margin-bottom uk-visible@l">
+                    <div class="uk-flex uk-flex-middle uk-grid" uk-grid>
+                      <div class="uk-width-1-4" input type="select" inputClass="border-bottom" [placeholder]="{static: true, label: 'Choose a field'}"
+                           [options]="fields" [formInput]="constraint.get('field')"></div>
+                      <div class="uk-width-1-4" input type="select" inputClass="border-bottom"
+                           [options]="verbs" [formInput]="constraint.get('verb')"></div>
+                      <div *ngIf="constraint.get('field').value !== 'fos'" class="uk-width-1-4" inputClass="flat small" input [placeholder]="{static: true, label: 'Type a keyword'}"
+                           [formInput]="constraint.get('value')"></div>
+                      <div *ngIf="constraint.get('field').value === 'fos'" class="uk-width-1-4" inputClass="flat small" input [placeholder]="{static: true, label: 'Choose a FoS'}"
+                           [formInput]="constraint.get('value')" type="select" [options]="fos"></div>
+                      <div class="uk-width-expand">
+                        <mat-slide-toggle [checked]="constraint.get('verb_suffix').value === ''" class="uk-margin-left"
+                                          [attr.uk-tooltip]="(constraint.get('verb_suffix').value === ''?('Only \'\'' + constraint.get('value').value + '\'\' matches'):
+                                        ('Both \'\'' + constraint.get('value').value.toUpperCase() + '\'\' and \'\'' + constraint.get('value').value.toLowerCase() + '\'\' match'))"
+                                          (change)="caseSensitive($event, constraint)"></mat-slide-toggle>
+                      </div>
+                      <div class="uk-flex uk-flex-center">
+                        <button class="uk-close uk-icon" (click)="removeConstraint(i, j)">
+                          <icon name="close" ratio="1.5" [flex]="true"
+                                [attr.uk-tooltip]="(getConstraint(i).length === 1?'By removing this constraint, the filter will be removed too':null)"></icon>
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="uk-margin-top uk-width-1-1 uk-flex uk-flex-center uk-flex-left@l">
+                    <a (click)="addConstraint(i)" class="uk-flex uk-flex-middle uk-button uk-button-link">
+                      <icon name="add" [flex]="true"></icon>
+                      <span class="uk-margin-small-left">Add Constraint</span>
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </form>
+    </div>
+    <div class="uk-flex uk-flex-center uk-margin-top">
       <a (click)="addCriteria()" class="uk-flex uk-flex-middle uk-button uk-button-primary"
          uk-tooltip="<div>Add filter to limit research results.<br>Results which satisfy any of the selected filters will be included in your community.</div>">
         <icon name="add" [flex]="true"></icon>
         <span class="uk-margin-small-left">Add filter</span>
       </a>
     </div>
-    <div *ngIf="criteria.length == 0" class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
-      <div *ngIf="dataProvider">No filters for {{dataProvider.officialname}}.</div>
-      <div>If no filters are specified, all {{openaireEntities.RESULTS | lowercase}} of this {{openaireEntities.DATASOURCE | lowercase}} will be included in your
-        {{openaireEntities.COMMUNITY | lowercase}}.
-      </div>
-    </div>
-    <form *ngIf="criteria.length > 0" [formGroup]="selectionCriteria">
-      <div formArrayName="criteria" class="uk-margin-bottom">
-        <no-load-paging (pageChange)="updatePage($event)" [page]="page" [totalResults]="criteria.length"
-                        [pageSize]="pageSize" [type]="'filter' + (criteria.length > 1?'s':'')">
-        </no-load-paging>
-        <ul class="uk-list uk-list-xlarge uk-margin-top uk-margin-bottom">
-          <li *ngFor="let criterion of currentPage; let i=index">
-            <div [formGroupName]="getIndex(i).toString()" class="uk-flex">
-              <h3 class="uk-padding uk-margin-remove-bottom uk-margin-top">
-                {{getIndex(i) + 1}}
-              </h3>
-              <div class="uk-width-expand uk-padding-small criterion" formArrayName="constraint">
-                <div class="uk-flex-middle uk-grid uk-margin-small-bottom uk-visible@l" uk-grid>
-                  <div class="uk-width-1-4">
-                    <label class="uk-text-uppercase uk-text-bold">Field</label>
-                  </div>
-                  <div class="uk-width-1-4">
-                    <label class="uk-text-uppercase uk-text-bold">Operator</label>
-                  </div>
-                  <div class="uk-width-1-4">
-                    <label class="uk-text-uppercase uk-text-bold">Term</label>
-                  </div>
-                  <div class="uk-width-expand uk-text-truncate">
-                    <label class="uk-text-bold uk-text-uppercase">Match Case</label>
-                  </div>
-                </div>
-                <div *ngFor="let constraint of getConstraint(getIndex(i)).controls; let j=index" [formGroupName]="j.toString()"
-                     class="uk-margin-bottom uk-hidden@l">
-                  <div class="uk-flex-middle uk-grid-small uk-margin-medium-bottom" uk-grid>
-                    <div class="uk-flex uk-flex-right uk-width-1-1">
-                      <button class="uk-close uk-icon" (click)="removeConstraint(getIndex(i), j)">
-                        <icon name="close" ratio="1.5" [flex]="true"
-                              [attr.uk-tooltip]="(getConstraint(getIndex(i)).length === 1?'By removing this constraint, the filter will be removed too':null)"></icon>
-                      </button>
-                    </div>
-                    <div class="uk-width-1-1" input type="select" inputClass="border-bottom" [placeholder]="{static: true, label: 'Choose a field'}"
-                         [options]="fields" [formInput]="constraint.get('field')">
-                      <label class="uk-text-uppercase uk-text-bold uk-width-1-3 uk-text-truncate">Field:</label>
-                    </div>
-                    <div class="uk-width-1-1" input type="select" inputClass="border-bottom"
-                         [options]="verbs" [formInput]="constraint.get('verb')">
-                      <label class="uk-text-uppercase uk-text-bold uk-width-1-3 uk-text-truncate">Operator:</label>
-                    </div>
-                    <div class="uk-width-1-1" input [placeholder]="{static: true, label: 'Type a keyword'}"
-                         [formInput]="constraint.get('value')">
-                      <label class="uk-text-uppercase uk-text-bold uk-width-1-3 uk-text-truncate">Term:</label>
-                    </div>
-                    <div class="uk-width-1-1">
-                      <div class="uk-grid" uk-grid>
-                        <label class="uk-text-uppercase uk-text-bold uk-width-1-3 uk-text-truncate">Match Case</label>
-                        <div class="uk-width-expand">
-                          <mat-slide-toggle [checked]="constraint.get('verb_suffix').value === ''"
-                                            [attr.uk-tooltip]="(constraint.get('verb_suffix').value === ''?('Only \'\'' + constraint.get('value').value + '\'\' matches'):
-                                        ('Both \'\'' + constraint.get('value').value.toUpperCase() + '\'\' and \'\'' + constraint.get('value').value.toLowerCase() + '\'\' match'))"
-                                            (change)="caseSensitive($event, constraint)"></mat-slide-toggle>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div *ngFor="let constraint of getConstraint(getIndex(i)).controls; let j=index"
-                     [formGroupName]="j.toString()" class="uk-margin-bottom uk-visible@l">
-                  <div class="uk-flex uk-flex-middle uk-grid" uk-grid>
-                    <div class="uk-width-1-4" input type="select" inputClass="border-bottom" [placeholder]="{static: true, label: 'Choose a field'}"
-                         [options]="fields" [formInput]="constraint.get('field')"></div>
-                    <div class="uk-width-1-4" input type="select" inputClass="border-bottom"
-                         [options]="verbs" [formInput]="constraint.get('verb')"></div>
-                    <div class="uk-width-1-4" input [placeholder]="{static: true, label: 'Type a keyword'}"
-                         [formInput]="constraint.get('value')"></div>
-                    <div class="uk-width-expand">
-                      <mat-slide-toggle [checked]="constraint.get('verb_suffix').value === ''" class="uk-margin-left"
-                                        [attr.uk-tooltip]="(constraint.get('verb_suffix').value === ''?('Only \'\'' + constraint.get('value').value + '\'\' matches'):
-                                        ('Both \'\'' + constraint.get('value').value.toUpperCase() + '\'\' and \'\'' + constraint.get('value').value.toLowerCase() + '\'\' match'))"
-                                        (change)="caseSensitive($event, constraint)"></mat-slide-toggle>
-                    </div>
-                    <div class="uk-flex uk-flex-center">
-                      <button class="uk-close uk-icon" (click)="removeConstraint(getIndex(i), j)">
-                        <icon name="close" ratio="1.5" [flex]="true"
-                              [attr.uk-tooltip]="(getConstraint(getIndex(i)).length === 1?'By removing this constraint, the filter will be removed too':null)"></icon>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-                <div class="uk-margin-top uk-width-1-1 uk-flex uk-flex-center uk-flex-left@l">
-                  <a (click)="addConstraint(getIndex(i))" class="uk-flex uk-flex-middle uk-button uk-button-link">
-                    <icon name="add" [flex]="true"></icon>
-                    <span class="uk-margin-small-left">Add Constraint</span>
-                  </a>
-                </div>
-              </div>
-            </div>
-          </li>
-        </ul>
-        <div class="uk-margin-small-top">
-          <paging-no-load  [currentPage]="page" [totalResults]="criteria.length" [size]="pageSize"
-                           (pageChange)="updatePage($event)" customClasses="uk-flex-right@m uk-flex-center">
-          </paging-no-load>
-        </div>
-      </div>
-    </form>
   </ng-container>
 </div>

src/app/pages/content-providers/criteria/criteria.component.less

@@ -1,8 +1,7 @@
-@import  (reference) "~src/assets/openaire-theme/less/_import-variables.less";
+.criteria {
+  padding-right: 20px;
+}
 
 .criterion {
-  border: @global-border solid @global-border-width;
-  border-radius: @global-border-radius;
   max-height: 400px;
-  overflow: auto;
 }

src/app/pages/content-providers/criteria/criteria.component.ts

@@ -1,13 +1,16 @@
-import {ChangeDetectorRef, Component, Input, OnInit} from '@angular/core';
-import {EnvProperties} from '../../../openaireLibrary/utils/properties/env-properties';
 import {
-  Constraint,
+  AfterViewInit,
-  ContentProvider,
+  ChangeDetectorRef,
-  Criteria,
+  Component,
-  SelectionCriteria
+  Input,
-} from '../../../openaireLibrary/utils/entities/contentProvider';
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  SimpleChanges
+} from '@angular/core';
+import {EnvProperties} from '../../../openaireLibrary/utils/properties/env-properties';
+import {Constraint, Criteria, SelectionCriteria} from '../../../openaireLibrary/utils/entities/contentProvider';
 import {AbstractControl, UntypedFormArray, UntypedFormBuilder, UntypedFormGroup, Validators} from '@angular/forms';
-import {ManageCommunityContentProvidersService} from '../../../services/manageContentProviders.service';
 import {properties} from "../../../../environments/environment";
 import {Option} from "../../../openaireLibrary/sharedComponents/input/input.component";
 import {MatSlideToggleChange} from "@angular/material/slide-toggle";
@@ -15,79 +18,97 @@ import {HelperFunctions} from "../../../openaireLibrary/utils/HelperFunctions.cl
 import {CriteriaUtils} from "../criteria-utils";
 import {NotificationHandler} from "../../../openaireLibrary/utils/notification-handler";
 import {OpenaireEntities} from "../../../openaireLibrary/utils/properties/searchFields";
+import {ISVocabulariesService} from "../../../openaireLibrary/utils/staticAutoComplete/ISVocabularies.service";
+import {Subscription} from "rxjs";
 
 @Component({
   selector: 'criteria',
   templateUrl: 'criteria.component.html',
   styleUrls: ['criteria.component.less']
 })
-export class CriteriaComponent implements OnInit {
+export class CriteriaComponent implements OnInit, OnChanges, AfterViewInit, OnDestroy {
   @Input()
-  public dataProvider: ContentProvider;
+  public dataProvider: string;
-  public selectionCriteria: UntypedFormGroup;
+  @Input()
+  public selectionCriteria: SelectionCriteria;
+  @Input()
+  public height: number = 0;
+  public maxHeight: number = 0;
+  public selectionCriteriaForm: UntypedFormGroup;
   public properties: EnvProperties = properties;
   public fields: Option[] = CriteriaUtils.fields;
   public verbs: Option[] = CriteriaUtils.verbs;
+  public fos: string[] = [];
   public loading = true;
-  /** Paging */
-  public page: number = 1;
-  public pageSize: number = 5;
   public openaireEntities = OpenaireEntities;
+  private subscriptions: any[] = [];
   
-  constructor(private manageCommunityContentProvidersService: ManageCommunityContentProvidersService,
+  constructor(private cdr: ChangeDetectorRef, private vocabulariesService: ISVocabulariesService,
-              private cdr: ChangeDetectorRef,
               private fb: UntypedFormBuilder) {
   }
   
   ngOnInit() {
     this.reset();
     this.loading = false;
+    this.subscriptions.push(this.vocabulariesService.getVocabularyByType('fos', null, properties).subscribe((fos: any[]) => {
+      this.fos = fos.map(element => element.id);
+    }));
   }
   
-  reset() {
+  ngOnChanges(changes: SimpleChanges) {
-    this.page = 1;
+    this.calculateMaxHeight();
-    if (this.dataProvider) {
+  }
-      this.selectionCriteria = this.fb.group({
+  
-        criteria: this.fb.array([])
+  ngAfterViewInit() {
-      });
+    this.calculateMaxHeight();
-      let selectionCriteria = this.dataProvider.selectioncriteria;
+  }
-      if (selectionCriteria) {
+  
-        selectionCriteria.criteria.forEach(criterion => {
+  ngOnDestroy() {
-          let constraintArray: UntypedFormArray = this.fb.array([]);
+    this.subscriptions.forEach(subscription => {
-          criterion.constraint.forEach(constraint => {
+      if (subscription instanceof Subscription) {
-            constraintArray.push(this.fb.group({
+        subscription.unsubscribe();
-              field: this.fb.control(constraint.field, Validators.required),
+      }
-              verb: this.fb.control(this.removeSuffix(constraint.verb), Validators.required),
+    });
-              value: this.fb.control(constraint.value, Validators.required),
+  }
-              verb_suffix: this.fb.control(this.getSuffix(constraint.verb))
+  
-            }));
+  calculateMaxHeight() {
-          });
+    if(this.height) {
-          this.criteria.push(this.fb.group({
+      if(this.height > 0) {
-            constraint: constraintArray
+        /* Element height - section (70 + 70) - margins(20 + 20) - button height(42) */
-          }));
+        this.maxHeight = this.height - 140 - 40 - 42;
-        });
+        this.cdr.detectChanges();
       }
     }
   }
   
-  get disabled() {
+  reset() {
-    return this.loading || !this.dirty || this.selectionCriteria.invalid;
+    if (this.selectionCriteria?.criteria) {
-  }
+      this.selectionCriteriaForm = this.fb.group({
-  
+        criteria: this.fb.array([])
-  get currentPage(): AbstractControl[] {
+      });
-    if (this.criteria) {
+      this.selectionCriteria.criteria.forEach(criterion => {
-      return this.criteria.controls.slice((this.page - 1) * this.pageSize, this.page * this.pageSize);
+        let constraintArray: UntypedFormArray = this.fb.array([]);
-    } else {
+        criterion.constraint.forEach(constraint => {
-      return [];
+          constraintArray.push(this.fb.group({
+            field: this.fb.control(constraint.field, Validators.required),
+            verb: this.fb.control(this.removeSuffix(constraint.verb), Validators.required),
+            value: this.fb.control(constraint.value, Validators.required),
+            verb_suffix: this.fb.control(this.getSuffix(constraint.verb))
+          }));
+        });
+        this.criteria.push(this.fb.group({
+          constraint: constraintArray
+        }));
+      });
     }
   }
   
-  getIndex(index: number): number {
+  get disabled() {
-    return (this.page - 1)*this.pageSize + index;
+    return this.loading || !this.dirty || this.selectionCriteriaForm.invalid;
   }
   
   public get criteria(): UntypedFormArray {
-    return this.selectionCriteria.get('criteria') as UntypedFormArray;
+    return this.selectionCriteriaForm.get('criteria') as UntypedFormArray;
   }
   
   public getConstraint(i: number): UntypedFormArray {
@@ -103,11 +124,9 @@ export class CriteriaComponent implements OnInit {
         verb_suffix: this.fb.control('_caseinsensitive')
       })
     ]);
-    this.criteria.insert(0, this.fb.group({
+    this.criteria.push(this.fb.group({constraint: constraintArray}));
-      constraint: constraintArray
-    }));
-    this.page = 1;
     this.cdr.detectChanges();
+    document.getElementById('criterion-' + (this.criteria.length - 1).toString()).scrollIntoView({behavior: 'smooth'});
   }
   
   public addConstraint(i: number) {
@@ -126,25 +145,22 @@ export class CriteriaComponent implements OnInit {
     constraintArray.removeAt(j);
     if (constraintArray.length === 0) {
       this.criteria.removeAt(i);
-      while(this.currentPage.length === 0 && this.page > 0) {
-        this.page--;
-      }
     }
     this.cdr.detectChanges();
   }
   
-  get dataProviderCriteria(): Criteria[] {
+  get criteriaArray(): Criteria[] {
-    return (this.dataProvider && this.dataProvider.selectioncriteria && this.dataProvider.selectioncriteria.criteria)?this.dataProvider.selectioncriteria.criteria:[];
+    return (this.selectionCriteria?.criteria) ? this.selectionCriteria?.criteria : [];
   }
   
   get dirty() {
-    if(!this.dataProvider || !this.criteria) {
+    if (!this.dataProvider || !this.criteria) {
       return false;
-    } else if(this.criteria.length !== this.dataProviderCriteria.length) {
+    } else if (this.criteria.length !== this.criteriaArray.length) {
       return true;
     } else {
-      return this.dataProviderCriteria.filter((criterion, i) => {
+      return this.criteriaArray.filter((criterion, i) => {
-        if(criterion.constraint.length !== this.getConstraint(i).length) {
+        if (criterion.constraint.length !== this.getConstraint(i).length) {
           return true;
         } else {
           let temp = this.getConstraint(i).value;
@@ -156,23 +172,10 @@ export class CriteriaComponent implements OnInit {
     }
   }
   
-  save(callback: Function = null) {
+  save(callback: (selectionCriteria) => void = null) {
-    if (this.selectionCriteria.valid) {
+    if (this.selectionCriteriaForm.valid) {
       this.loading = true;
-      this.dataProvider.selectioncriteria = this.parseForm(this.selectionCriteria.value);
+      callback(this.parseForm(this.selectionCriteriaForm.value));
-      this.manageCommunityContentProvidersService.saveContentProvider(this.properties, this.dataProvider).subscribe(() => {
-        this.reset();
-        if(callback)  {
-          callback();
-        }
-        this.loading = false;
-        NotificationHandler.rise('Filters have been <b>successfully updated</b>');
-      }, error => {
-        this.loading = false;
-        this.handeError('An error has been occurred. Try again later!', error);
-      });
-    } else {
-      this.handeError('An error has been occurred. Try again later!');
     }
   }
   
@@ -182,7 +185,7 @@ export class CriteriaComponent implements OnInit {
   }
   
   caseSensitive(event: MatSlideToggleChange, constraint: AbstractControl) {
-    if(event.checked) {
+    if (event.checked) {
       constraint.get('verb_suffix').setValue('');
     } else {
       constraint.get('verb_suffix').setValue('_caseinsensitive');
@@ -194,7 +197,7 @@ export class CriteriaComponent implements OnInit {
   }
   
   getSuffix(verb: string) {
-    if(verb.includes('_caseinsensitive')) {
+    if (verb.includes('_caseinsensitive')) {
       return '_caseinsensitive';
     } else {
       return '';
@@ -215,9 +218,4 @@ export class CriteriaComponent implements OnInit {
     })
     return selectionCriteria;
   }
-  
-  public updatePage(event) {
-    this.page = event.value;
-    HelperFunctions.scroll();
-  }
 }

src/app/pages/content-providers/manage-content-providers.component.ts

@@ -1,4 +1,4 @@
-import {Component, OnInit, ViewChild} from '@angular/core';
+import {ChangeDetectorRef, Component, OnInit, ViewChild} from '@angular/core';
 import {RemoveContentProvidersComponent} from './remove-content-providers.component';
 import {Title} from '@angular/platform-browser';
 import {
@@ -13,6 +13,8 @@ import {CommunityService} from "../../openaireLibrary/connect/community/communit
 import {ContentProvider} from "../../openaireLibrary/utils/entities/contentProvider";
 import {OpenaireEntities} from "../../openaireLibrary/utils/properties/searchFields";
 import {CriteriaComponent} from "./criteria/criteria.component";
+import {NotificationHandler} from "../../openaireLibrary/utils/notification-handler";
+import {ManageCommunityContentProvidersService} from "../../services/manageContentProviders.service";
 
 @Component({
   selector: 'manage-content-providers',
@@ -24,12 +26,16 @@ import {CriteriaComponent} from "./criteria/criteria.component";
                               (communityContentProvidersChanged)="communityContentProvidersChanged($event)">
     </remove-content-providers>
     <fs-modal #addContentProvidersModal>
-      <add-content-providers #addContentProviders [communityContentProviders]="communityContentProviders" [community]="community"
+      <add-content-providers #addContentProviders [communityContentProviders]="communityContentProviders"
+                             [community]="community"
                              (communityContentProvidersChanged)="communityContentProvidersChanged($event)"></add-content-providers>
     </fs-modal>
-    <fs-modal #filtersModal (okEmitter)="saveCriteria()" (cancelEmitter)="criteria.reset()" [okButtonDisabled]="criteria && criteria.disabled">
+    <fs-modal #filtersModal (okEmitter)="saveCriteria()" (cancelEmitter)="criteria.reset()"
-      <div class="uk-container">
+              [okButtonDisabled]="criteria && criteria.disabled">
-        <criteria #criteria *ngIf="contentProvider" [dataProvider]="contentProvider"></criteria>
+      <div class="uk-container uk-container-large">
+        <criteria #criteria *ngIf="dataProvider" [height]="filtersModal.bodyHeight"
+                  [selectionCriteria]="dataProvider.selectioncriteria"
+                  [dataProvider]="dataProvider.officialname"></criteria>
       </div>
     </fs-modal>
   `
@@ -46,10 +52,12 @@ export class ManageContentProvidersComponent implements OnInit {
   public body: string = "Send from page";
   public properties: EnvProperties = properties;
   public community: CommunityInfo;
-  public contentProvider: ContentProvider;
+  public dataProvider: ContentProvider;
 
   constructor(private title: Title,
-              private communityService: CommunityService) {
+              private cdr: ChangeDetectorRef,
+              private communityService: CommunityService,
+              private manageCommunityContentProvidersService: ManageCommunityContentProvidersService) {
   }
 
   ngOnInit() {
@@ -80,17 +88,27 @@ export class ManageContentProvidersComponent implements OnInit {
   }
   
   public openCriteria(contentProvider: ContentProvider) {
-    this.contentProvider = contentProvider;
+    this.dataProvider = contentProvider;
     this.filtersModal.title = 'Filters';
     this.filtersModal.okButtonText = "Save";
     this.filtersModal.back = true;
     this.filtersModal.okButton = true;
     this.filtersModal.open();
+    this.cdr.detectChanges();
   }
   
   public saveCriteria() {
-    let callback: Function = () => {
+    let callback = (selectionCriteria): void => {
-      this.removeContentProvidersComponent.getCommunityContentProviders();
+      this.dataProvider.selectioncriteria = selectionCriteria;
+      this.manageCommunityContentProvidersService.saveContentProvider(this.properties, this.dataProvider).subscribe(() => {
+        this.criteria.reset();
+        this.removeContentProvidersComponent.getCommunityContentProviders();
+        this.criteria.loading = false;
+        NotificationHandler.rise('Filters have been <b>successfully updated</b>');
+      }, error => {
+        this.criteria.loading = false;
+        this.criteria.handeError('An error has been occurred. Try again later!', error);
+      });
     }
     this.removeContentProvidersComponent.loading = true;
     this.criteria.save(callback);