MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[develop | DONE | FIXED] search page: add a limit of 35 characters and atooltip for displayed selected filters

This commit is contained in:
Alex Martzios 2024-03-04 10:39:01 +02:00
parent 3e8ed4f504
commit ec57ba0dcc
2 changed files with 26 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
searchPages/searchUtils/newSearchPage.component.html
View File

@ -5,7 +5,7 @@
<ng-container *ngFor="let customFilter of customFilters">
<ng-container *ngIf="customFilter.isHiddenFilter">
<li class="uk-flex uk-flex-middle">
<span class="uk-label uk-label-small uk-label-secondary uk-text-truncate">
<span class="uk-label uk-label-small uk-label-secondary uk-text-truncate target1">
{{customFilter.valueName}}
</span>
</li>
@ -15,7 +15,7 @@
<ng-container *ngFor="let type of resultTypes.values; let i = index;">
<ng-container *ngIf="type.selected">
<li class="">
<span class="uk-label uk-label-small uk-label-primary uk-flex uk-flex-middle">
<span class="uk-label uk-label-small uk-label-primary uk-flex uk-flex-middle target2">
<span class="uk-margin-small-right uk-width-expand uk-text-truncate">{{type.name}}</span>
<button [class.uk-disabled]="disabled" (click)="removeResultType(type.id)" class="uk-close uk-icon" [disabled]="disabled">
<icon name="close" flex="true" ratio="0.7"></icon>
@ -29,7 +29,7 @@
<ng-container *ngFor="let filter of rangeFilters ">
<ng-container *ngIf="filter.selectedFromAndToValues">
<li class="">
<span class="uk-label uk-label-small uk-label-primary uk-flex uk-flex-middle">
<span class="uk-label uk-label-small uk-label-primary uk-flex uk-flex-middle target3">
<span class="uk-margin-small-right uk-width-expand uk-text-truncate">{{filter.selectedFromAndToValues}}</span>
<button [class.uk-disabled]="disabled" (click)="removeRangeFilter(filter)" class="uk-close uk-icon" [disabled]="disabled">
<icon name="close" flex="true" ratio="0.7"></icon>
@ -44,7 +44,7 @@
<ng-container *ngFor="let value of getSelectedValues(filter); let i = index; let end = last; ">
<li *ngIf="!customFilter || (customFilter.isHiddenFilter && customFilter.valueId != value.id)"
class="">
<span class="uk-label uk-label-small uk-label-primary uk-flex uk-flex-middle">
<span class="uk-label uk-label-small uk-label-primary uk-flex uk-flex-middle target4">
<span
class="uk-margin-small-right uk-width-expand uk-text-truncate">
<ng-container *ngIf="filter.type && (filter.type == 'boolean' || filter.type == 'triplet') else noboolean">
@ -52,9 +52,15 @@
{{(value.name=='true'||value.name=='Yes')?'Yes':'No'}}
</span>
</ng-container>
<ng-template #noboolean>
{{value.name}}
</ng-template></span>
<ng-template #noboolean>
<span [attr.title]="value.name" *ngIf="value.name.length > filterPillCharactersLimit">
{{value.name | slice:0:filterPillCharactersLimit}}...
</span>
<span *ngIf="value.name.length <= filterPillCharactersLimit">
{{value.name}}
</span>
</ng-template>
</span>
<button [class.uk-disabled]="disabled" (click)="removeFilter(value, filter)" class="uk-close uk-icon" [disabled]="disabled">
<icon name="close" flex="true" ratio="0.7"></icon>
</button>
@ -66,19 +72,23 @@
<ng-container *ngFor="let filter of filters ">
<ng-container *ngIf="filter.countSelectedValues > 0">
<ng-container *ngFor="let value of getSelectedValues(filter); let i = index; let end = last; ">
<li *ngIf="!customFilters || (customFilters[0].isHiddenFilter && customFilters[0].valueId != value.id)"
class="">
<span class="uk-label uk-label-small uk-label-primary uk-flex uk-flex-middle">
<span
class="uk-margin-small-right uk-width-expand uk-text-truncate">
<li *ngIf="!customFilters || (customFilters[0].isHiddenFilter && customFilters[0].valueId != value.id)">
<span class="uk-label uk-label-small uk-label-primary uk-flex uk-flex-middle target5">
<span class="uk-margin-small-right uk-width-expand uk-text-truncate">
<ng-container *ngIf="filter.type && (filter.type == 'boolean' || filter.type == 'triplet') else noboolean">
<span>{{filter.title}}:
{{(value.name=='true'||value.name=='Yes')?'Yes':'No'}}
</span>
</ng-container>
<ng-template #noboolean>
{{value.name}}
</ng-template></span>
<ng-template #noboolean>
<span [attr.title]="value.name" *ngIf="value.name.length > filterPillCharactersLimit">
{{value.name | slice:0:filterPillCharactersLimit}}...
</span>
<span *ngIf="value.name.length <= filterPillCharactersLimit">
{{value.name}}
</span>
</ng-template>
</span>
<button [class.uk-disabled]="disabled" (click)="removeFilter(value, filter)" class="uk-close uk-icon" [disabled]="disabled">
<icon name="close" flex="true" ratio="0.7"></icon>
</button>

1
searchPages/searchUtils/newSearchPage.component.ts
View File

@ -131,6 +131,7 @@ export class NewSearchPageComponent implements OnInit, OnDestroy, OnChanges {
public parameterNames: string[] = [];
public parameterValues: string[] = [];
filterPillCharactersLimit: number = 35;
public csvLimit: number = 0;
public pagingLimit: number = 0;
public resultsPerPage: number = 0;