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

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

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