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

selected filters in one row slider

This commit is contained in:
argirok 2022-04-19 18:03:09 +03:00
parent e2a5fd4c9e
commit cf9cb00e49
1 changed files with 68 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,57 +1,72 @@
<ng-template #selected_filters_pills> <ng-template #selected_filters_pills>
<h1 class="uk-grid uk-grid-small uk-text-small" uk-grid> <h1 class="" >
<ng-container *ngIf="customFilter && ((customFilterEnabled && <div class=" uk-width-1-1" uk-slider="finite: true">
refineFields.indexOf(customFilter.queryFieldName) == <div class="uk-position-relative " >
-1) ||customFilter.isHiddenFilter)"> <div class="uk-slider-container ">
<span class="uk-width-auto"> <ul class=" uk-slider-items " style="flex-wrap: nowrap !important;" >
<span class="uk-label uk-label-secondary uk-text-truncate"> <ng-container *ngIf="customFilter && ((customFilterEnabled &&
{{customFilter.valueName}} refineFields.indexOf(customFilter.queryFieldName) ==
</span> -1) ||customFilter.isHiddenFilter)">
</span> <li class="uk-margin-small-right">
</ng-container> <span class="uk-label uk-label-secondary uk-text-truncate">
<ng-container *ngIf="resultTypes && resultTypes.countSelectedValues > 0"> {{customFilter.valueName}}
<ng-container *ngFor="let type of resultTypes.values; let i = index;"> </span>
<ng-container *ngIf="type.selected"> </li>
<span class="uk-width-auto"> </ng-container>
<span class="uk-label uk-label-primary uk-flex uk-flex-middle"> <ng-container *ngIf="resultTypes && resultTypes.countSelectedValues > 0">
<span class="uk-margin-small-right uk-width-expand uk-text-truncate">{{type.name}}</span> <ng-container *ngFor="let type of resultTypes.values; let i = index;">
<button [class.uk-disabled]="disabled" (click)="removeResultType(type.id)" class="uk-close uk-icon" [disabled]="disabled"> <ng-container *ngIf="type.selected">
<icon name="close" flex="true" ratio="0.7"></icon> <li class="uk-margin-small-right">
</button> <span class="uk-label uk-label-primary uk-flex uk-flex-middle">
</span> <span class="uk-margin-small-right uk-width-expand uk-text-truncate">{{type.name}}</span>
</span> <button [class.uk-disabled]="disabled" (click)="removeResultType(type.id)" class="uk-close uk-icon" [disabled]="disabled">
</ng-container> <icon name="close" flex="true" ratio="0.7"></icon>
</ng-container> </button>
</ng-container> </span>
<ng-container *ngIf="selectedRangeFilters > 0"> </li>
<ng-container *ngFor="let filter of rangeFilters "> </ng-container>
<ng-container *ngIf="filter.selectedFromAndToValues"> </ng-container>
<span class="uk-width-auto"> </ng-container>
<span class="uk-label uk-label-primary uk-flex uk-flex-middle"> <ng-container *ngIf="selectedRangeFilters > 0">
<span class="uk-margin-small-right uk-width-expand uk-text-truncate">{{filter.selectedFromAndToValues}}</span> <ng-container *ngFor="let filter of rangeFilters ">
<button [class.uk-disabled]="disabled" (click)="removeRangeFilter(filter)" class="uk-close uk-icon" [disabled]="disabled"> <ng-container *ngIf="filter.selectedFromAndToValues">
<icon name="close" flex="true" ratio="0.7"></icon> <li class="uk-margin-small-right">
</button> <span class="uk-label uk-label-primary uk-flex uk-flex-middle">
</span> <span class="uk-margin-small-right uk-width-expand uk-text-truncate">{{filter.selectedFromAndToValues}}</span>
</span> <button [class.uk-disabled]="disabled" (click)="removeRangeFilter(filter)" class="uk-close uk-icon" [disabled]="disabled">
</ng-container> <icon name="close" flex="true" ratio="0.7"></icon>
</ng-container> </button>
</ng-container> </span>
<ng-container *ngFor="let filter of filters "> </li>
<ng-container *ngIf="filter.countSelectedValues > 0"> </ng-container>
<ng-container *ngFor="let value of getSelectedValues(filter); let i = index; let end = last; "> </ng-container>
<span *ngIf="!customFilter || (customFilter.isHiddenFilter && customFilter.valueId != value.id)" </ng-container>
class="uk-width-auto"> <ng-container *ngFor="let filter of filters ">
<span class="uk-label uk-label-primary uk-flex uk-flex-middle"> <ng-container *ngIf="filter.countSelectedValues > 0">
<span class="uk-margin-small-right uk-width-expand uk-text-truncate">{{value.name}}</span> <ng-container *ngFor="let value of getSelectedValues(filter); let i = index; let end = last; ">
<button [class.uk-disabled]="disabled" (click)="removeFilter(value, filter)" class="uk-close uk-icon" [disabled]="disabled"> <li *ngIf="!customFilter || (customFilter.isHiddenFilter && customFilter.valueId != value.id)"
<icon name="close" flex="true" ratio="0.7"></icon> class="uk-margin-small-right">
</button> <span class="uk-label uk-label-primary uk-flex uk-flex-middle">
</span> <span class="uk-margin-small-right uk-width-expand uk-text-truncate">{{value.name}}</span>
</span> <button [class.uk-disabled]="disabled" (click)="removeFilter(value, filter)" class="uk-close uk-icon" [disabled]="disabled">
</ng-container> <icon name="close" flex="true" ratio="0.7"></icon>
</ng-container> </button>
</ng-container> </span>
</li>
</ng-container>
</ng-container>
</ng-container>
<li class="uk-margin-small-right">
<span class="uk-label uk-flex uk-flex-middle uk-invisible" > <!-- adds space--></span>
</li>
</ul>
</div>
<div class="">
<a class="uk-position-center-left-out" uk-slider-item="previous"><span uk-icon="chevron-left"></span></a>
<a class="uk-position-center-right-out" uk-slider-item="next"><span uk-icon="chevron-right"></span></a>
</div>
</div>
</div>
</h1> </h1>
</ng-template> </ng-template>
<ng-template #filters_column> <ng-template #filters_column>