2022-07-04 20:45:20 +02:00
< div class = "uk-section uk-position-relative" style = "min-height: 60vh" >
< div * ngIf = "loading" class = "uk-position-center" >
< loading > < / loading >
< / div >
< ng-container * ngIf = "!loading" >
< div class = "uk-flex uk-flex-center uk-margin-medium-bottom" >
< 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 >
2021-05-19 13:40:29 +02:00
< / a >
< / div >
2022-07-04 20:45:20 +02:00
< 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 >
2022-09-21 09:29:11 +02:00
< div > If no filters are specified, all {{openaireEntities.RESULTS | lowercase}} of this {{openaireEntities.DATASOURCE | lowercase}} will be included in your
{{openaireEntities.COMMUNITY | lowercase}}.
2021-05-19 13:40:29 +02:00
< / div >
< / div >
2022-07-04 20:45:20 +02:00
< 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 >
2021-05-19 13:40:29 +02:00
< 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">
2022-07-04 20:45:20 +02:00
< div class = "uk-flex-middle uk-grid-small uk-margin-medium-bottom" uk-grid >
2021-05-19 13:40:29 +02:00
< div class = "uk-flex uk-flex-right uk-width-1-1" >
2022-07-13 09:49:59 +02:00
< button class = "uk-close uk-icon" ( click ) = " removeConstraint ( getIndex ( i ) , j ) " >
2022-07-04 20:45:20 +02:00
< icon name = "close" ratio = "1.5" [ flex ] = " true "
2021-05-19 13:40:29 +02:00
[attr.uk-tooltip]="(getConstraint(getIndex(i)).length === 1?'By removing this constraint, the filter will be removed too':null)">< / icon >
2022-07-13 09:49:59 +02:00
< / button >
2021-05-19 13:40:29 +02:00
< / div >
2022-07-04 20:45:20 +02:00
< div class = "uk-width-1-1" input type = "select" inputClass = "border-bottom" [ placeholder ] = " { static: true , label: ' Choose a field ' } "
2021-05-19 13:40:29 +02:00
[options]="fields" [formInput]="constraint.get('field')">
< label class = "uk-text-uppercase uk-text-bold uk-width-1-3 uk-text-truncate" > Field:< / label >
< / div >
2022-07-04 20:45:20 +02:00
< div class = "uk-width-1-1" input type = "select" inputClass = "border-bottom"
2021-05-19 13:40:29 +02:00
[options]="verbs" [formInput]="constraint.get('verb')">
< label class = "uk-text-uppercase uk-text-bold uk-width-1-3 uk-text-truncate" > Operator:< / label >
< / div >
2022-07-04 20:45:20 +02:00
< div class = "uk-width-1-1" input [ placeholder ] = " { static: true , label: ' Type a keyword ' } "
2021-05-19 13:40:29 +02:00
[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'):
2022-07-04 20:45:20 +02:00
('Both \'\'' + constraint.get('value').value.toUpperCase() + '\'\' and \'\'' + constraint.get('value').value.toLowerCase() + '\'\' match'))"
2021-05-19 13:40:29 +02:00
(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">
2022-07-04 20:45:20 +02:00
< 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 ' } "
2021-05-19 13:40:29 +02:00
[options]="fields" [formInput]="constraint.get('field')">< / div >
2022-07-04 20:45:20 +02:00
< div class = "uk-width-1-4" input type = "select" inputClass = "border-bottom"
2021-05-19 13:40:29 +02:00
[options]="verbs" [formInput]="constraint.get('verb')">< / div >
2022-07-04 20:45:20 +02:00
< div class = "uk-width-1-4" input [ placeholder ] = " { static: true , label: ' Type a keyword ' } "
2021-05-19 13:40:29 +02:00
[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'):
2022-07-04 20:45:20 +02:00
('Both \'\'' + constraint.get('value').value.toUpperCase() + '\'\' and \'\'' + constraint.get('value').value.toLowerCase() + '\'\' match'))"
2021-05-19 13:40:29 +02:00
(change)="caseSensitive($event, constraint)">< / mat-slide-toggle >
< / div >
< div class = "uk-flex uk-flex-center" >
2022-07-13 09:49:59 +02:00
< button class = "uk-close uk-icon" ( click ) = " removeConstraint ( getIndex ( i ) , j ) " >
2022-07-04 20:45:20 +02:00
< icon name = "close" ratio = "1.5" [ flex ] = " true "
2021-05-19 13:40:29 +02:00
[attr.uk-tooltip]="(getConstraint(getIndex(i)).length === 1?'By removing this constraint, the filter will be removed too':null)">< / icon >
2022-07-13 09:49:59 +02:00
< / button >
2021-05-19 13:40:29 +02:00
< / div >
< / div >
< / div >
2022-07-04 20:45:20 +02:00
< 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 >
2021-05-19 13:40:29 +02:00
< / a >
< / div >
< / div >
< / div >
2022-07-04 20:45:20 +02:00
< / 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 >
2021-05-19 13:40:29 +02:00
< / div >
< / div >
2022-07-04 20:45:20 +02:00
< / form >
< / ng-container >
2021-05-19 13:40:29 +02:00
< / div >