Criteria: Change criteria in order to be a generic component.
This commit is contained in:
parent
798746e041
commit
d9b4be9a5c
|
|
@ -1 +1 @@
|
|||
Subproject commit 799a62afc5c3c752d6b4e3f9e2c6d87433d6a4ad
|
||||
Subproject commit 1d2a0effa840836cbb26334eabd9e1ea3752b455
|
||||
|
|
@ -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[] = [
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,16 @@
|
|||
import {ChangeDetectorRef, Component, Input, OnInit} from '@angular/core';
|
||||
import {EnvProperties} from '../../../openaireLibrary/utils/properties/env-properties';
|
||||
import {
|
||||
Constraint,
|
||||
ContentProvider,
|
||||
Criteria,
|
||||
SelectionCriteria
|
||||
} from '../../../openaireLibrary/utils/entities/contentProvider';
|
||||
AfterViewInit,
|
||||
ChangeDetectorRef,
|
||||
Component,
|
||||
Input,
|
||||
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 selectionCriteria: UntypedFormGroup;
|
||||
public dataProvider: string;
|
||||
@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,
|
||||
private cdr: ChangeDetectorRef,
|
||||
constructor(private cdr: ChangeDetectorRef, private vocabulariesService: ISVocabulariesService,
|
||||
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() {
|
||||
this.page = 1;
|
||||
if (this.dataProvider) {
|
||||
this.selectionCriteria = this.fb.group({
|
||||
criteria: this.fb.array([])
|
||||
});
|
||||
let selectionCriteria = this.dataProvider.selectioncriteria;
|
||||
if (selectionCriteria) {
|
||||
selectionCriteria.criteria.forEach(criterion => {
|
||||
let constraintArray: UntypedFormArray = this.fb.array([]);
|
||||
criterion.constraint.forEach(constraint => {
|
||||
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
|
||||
}));
|
||||
});
|
||||
ngOnChanges(changes: SimpleChanges) {
|
||||
this.calculateMaxHeight();
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
this.calculateMaxHeight();
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.subscriptions.forEach(subscription => {
|
||||
if (subscription instanceof Subscription) {
|
||||
subscription.unsubscribe();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
calculateMaxHeight() {
|
||||
if(this.height) {
|
||||
if(this.height > 0) {
|
||||
/* Element height - section (70 + 70) - margins(20 + 20) - button height(42) */
|
||||
this.maxHeight = this.height - 140 - 40 - 42;
|
||||
this.cdr.detectChanges();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
get disabled() {
|
||||
return this.loading || !this.dirty || this.selectionCriteria.invalid;
|
||||
}
|
||||
|
||||
get currentPage(): AbstractControl[] {
|
||||
if (this.criteria) {
|
||||
return this.criteria.controls.slice((this.page - 1) * this.pageSize, this.page * this.pageSize);
|
||||
} else {
|
||||
return [];
|
||||
reset() {
|
||||
if (this.selectionCriteria?.criteria) {
|
||||
this.selectionCriteriaForm = this.fb.group({
|
||||
criteria: this.fb.array([])
|
||||
});
|
||||
this.selectionCriteria.criteria.forEach(criterion => {
|
||||
let constraintArray: UntypedFormArray = this.fb.array([]);
|
||||
criterion.constraint.forEach(constraint => {
|
||||
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 {
|
||||
return (this.page - 1)*this.pageSize + index;
|
||||
get disabled() {
|
||||
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({
|
||||
constraint: constraintArray
|
||||
}));
|
||||
this.page = 1;
|
||||
this.criteria.push(this.fb.group({constraint: constraintArray}));
|
||||
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[] {
|
||||
return (this.dataProvider && this.dataProvider.selectioncriteria && this.dataProvider.selectioncriteria.criteria)?this.dataProvider.selectioncriteria.criteria:[];
|
||||
get criteriaArray(): 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) => {
|
||||
if(criterion.constraint.length !== this.getConstraint(i).length) {
|
||||
return this.criteriaArray.filter((criterion, i) => {
|
||||
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) {
|
||||
if (this.selectionCriteria.valid) {
|
||||
save(callback: (selectionCriteria) => void = null) {
|
||||
if (this.selectionCriteriaForm.valid) {
|
||||
this.loading = true;
|
||||
this.dataProvider.selectioncriteria = this.parseForm(this.selectionCriteria.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!');
|
||||
callback(this.parseForm(this.selectionCriteriaForm.value));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<div class="uk-container">
|
||||
<criteria #criteria *ngIf="contentProvider" [dataProvider]="contentProvider"></criteria>
|
||||
<fs-modal #filtersModal (okEmitter)="saveCriteria()" (cancelEmitter)="criteria.reset()"
|
||||
[okButtonDisabled]="criteria && criteria.disabled">
|
||||
<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 = () => {
|
||||
this.removeContentProvidersComponent.getCommunityContentProviders();
|
||||
let callback = (selectionCriteria): void => {
|
||||
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);
|
||||
|
|
|
|||
Loading…
Reference in New Issue