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

[Trunk | Library]: 

1. advancedSearchForm.component.html & searchPaging.component.ts & pagingFormatter.component.ts 
   & searchResultsPerPage.component.ts & searchSorting.component.ts & searchFilter.component.html & rangeFilter.component.html:
	Update/ impove "disabled" view (when results/ filters are loading).
2. searchFilter.component.html: [Bug fix] When selecting a radio button, all values of filter seemed to be selected --> name is value.id not filter.filterId.


git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@59115 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
konstantina.galouni 2020-07-14 13:13:44 +00:00
parent 1c71fcfe8c
commit a7e07d8f7e
7 changed files with 43 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
searchPages/searchUtils/advancedSearchForm.component.html
View File

@ -129,7 +129,7 @@
</form>
<div *ngIf="simpleView">
<form class=" uk-margin-medium-bottom uk-margin-top ">
<form [class]="((isDisabled )?'uk-disabled ':'') + ' uk-margin-medium-bottom uk-margin-top' ">
<div class="uk-grid uk-margin-small-left uk-flex" [class.uk-flex-center]="entityType != 'community' && entityType !== 'stakeholder'">
<div
[class]="((entitiesSelection)?'':'uk-width-small@s')+' uk-margin-small-top uk-padding-remove-left'">

16
searchPages/searchUtils/searchFilter.component.html
View File

@ -1,7 +1,8 @@
<div *ngIf= "filter.values.length >0" class="uk-margin-small-bottom">
<div class="uk-margin-small-top uk-margin-bottom uk-grid uk-flex uk-flex-bottom">
<h5 class="uk-margin-bottom-remove" title = "{{filter.title}}">{{_formatTitle(filter.title,filter.values.length)}}</h5>
<a *ngIf="filter.countSelectedValues>0" (click)="clearFilter()" class="portal-link">
<a *ngIf="filter.countSelectedValues>0" (click)="clearFilter()"
[class]="((isDisabled)?'uk-disabled':'') + ' portal-link '">
Clear
</a>
</div>
@ -36,13 +37,13 @@
<div *ngFor="let value of getSelectedAndTopValues(filter, filterValuesNum)"
class="uk-animation-fade filterItem searchFilterItem uk-text-small">
<div title = "{{value.name}}">
<label *ngIf="filter.filterType == 'checkbox' || filter.filterType == 'radio'">
<label *ngIf="filter.filterType == 'checkbox' || filter.filterType == 'radio'"
[class]="(isDisabled || (showResultCount && value.number === 0)) ? 'uk-disabled' : ''">
<!-- [disabled]="isDisabled || (showResultCount && value.number === 0)"-->
<input *ngIf="filter.filterType == 'checkbox'" type="checkbox" class="uk-checkbox"
[disabled]="isDisabled || (showResultCount && value.number === 0)"
[(ngModel)]="value.selected" (ngModelChange)="filterChange(value.selected)" />
<input *ngIf="filter.filterType == 'radio'" type="radio" class="uk-radio"
[disabled]="isDisabled || (showResultCount && value.number === 0)"
[name]=filter.filterId [value]="true" [(ngModel)]="value.selected" (click)="uniqueFilterChange(value)"/>
[name]="value.id" [value]="true" [(ngModel)]="value.selected" (click)="uniqueFilterChange(value)"/>
{{' '+_formatName(value)}}
<span *ngIf = "showResultCount === true" >
{{' ('+(value.number|number)+')'}}
@ -89,7 +90,7 @@
</div>
</div>
<div class="uk-modal-body uk-overflow-auto uk-height-max-small uk-padding-remove
<div class="uk-overflow-auto uk-height-max-small uk-padding-remove
uk-margin-small-left uk-margin-small-right uk-margin-small-top uk-width-1-1">
<!-- <ng-container *ngFor = "let value of getSelectedValues(filter, sortBy)">-->
<!-- <div *ngIf="filterKeywords(value.name)" class = "uk-animation-fade filterItem searchFilterItem">-->
@ -122,11 +123,10 @@
class="uk-animation-fade filterItem searchFilterItem uk-text-small">
<label *ngIf="filter.filterType == 'checkbox' || filter.filterType == 'radio'">
<input *ngIf="filter.filterType == 'checkbox'" type="checkbox" class="uk-checkbox"
[disabled]="isDisabled || (showResultCount && value.number === 0)"
[(ngModel)]="value.selected" (ngModelChange)="filterChange(value.selected)" />
<input *ngIf="filter.filterType == 'radio'" type="radio" class="uk-radio"
[disabled]="isDisabled || (showResultCount && value.number === 0)"
[name]=filter.filterId [value]="true" [(ngModel)]="value.selected" (click)="uniqueFilterChange(value)"/>
[name]="value.id" [value]="true" [(ngModel)]="value.selected" (click)="uniqueFilterChange(value)"/>
{{' '+_formatName(value)}}
<span *ngIf = "showResultCount === true" >
{{' ('+(value.number|number)+')'}}</span>

11
searchPages/searchUtils/searchPaging.component.ts
View File

@ -31,10 +31,16 @@ import {ErrorCodes} from '../../utils/properties/errorCodes';
{{oldTotalResults|number}} {{type}}, page {{searchUtils.page | number}} of {{(totalPages(oldTotalResults)|number)}}
</div-->
<div class="float-children-right-at-medium margin-small-top-at-small uk-width-expand" *ngIf="results && searchUtils.totalResults > searchUtils.size">
<paging [currentPage]="searchUtils.page" [totalResults]="searchUtils.totalResults" [baseUrl]="baseUrl" [size]="searchUtils.size" [parameterNames] = "parameterNames" [parameterValues] = "parameterValues" > </paging>
<paging [currentPage]="searchUtils.page" [totalResults]="searchUtils.totalResults" [baseUrl]="baseUrl"
[size]="searchUtils.size" [parameterNames] = "parameterNames" [parameterValues] = "parameterValues"
[isDisabled]="isDisabled">
</paging>
</div>
<div class="float-children-right-at-medium margin-small-top-at-small uk-width-expand" *ngIf="!loadPaging && oldTotalResults > searchUtils.size && searchUtils.status == errorCodes.LOADING">
<paging [currentPage]="searchUtils.page" [totalResults]="oldTotalResults" [baseUrl]="baseUrl" [size]="searchUtils.size" [parameterNames] = "parameterNames" [parameterValues] = "parameterValues" > </paging>
<paging [currentPage]="searchUtils.page" [totalResults]="oldTotalResults" [baseUrl]="baseUrl"
[size]="searchUtils.size" [parameterNames] = "parameterNames" [parameterValues] = "parameterValues"
[isDisabled]="isDisabled">
</paging>
</div>
</div>
</div>
@ -42,6 +48,7 @@ import {ErrorCodes} from '../../utils/properties/errorCodes';
})
export class SearchPagingComponent {
@Input() isDisabled: boolean = false;
@Input() searchUtils;
@Input() results;
@Input() baseUrl;

9
searchPages/searchUtils/searchResultsPerPage.component.ts
View File

@ -10,10 +10,10 @@ import {Component, Input, Output, EventEmitter} from '@angular/core';
[disableOptionCentering]="true"
panelClass="matSelectionPanel"
class="uk-text-bold matSelection">
<mat-option [value]="5" > 5</mat-option>
<mat-option [value]="10">10</mat-option>
<mat-option [value]="20">20</mat-option>
<mat-option [value]="50">50</mat-option>
<mat-option [value]="5" [disabled]="isDisabled"> 5</mat-option>
<mat-option [value]="10" [disabled]="isDisabled">10</mat-option>
<mat-option [value]="20" [disabled]="isDisabled">20</mat-option>
<mat-option [value]="50" [disabled]="isDisabled">50</mat-option>
</mat-select>
</mat-form-field>
</div>
@ -21,6 +21,7 @@ import {Component, Input, Output, EventEmitter} from '@angular/core';
})
export class SearchResultsPerPageComponent {
@Input() isDisabled: boolean = false;
@Input() size: number;
@Output() sizeChange = new EventEmitter();

14
searchPages/searchUtils/searchSorting.component.ts
View File

@ -11,9 +11,9 @@ import {Component, Input, Output, EventEmitter} from '@angular/core';
[disableOptionCentering]="true"
panelClass="matSelectionPanel"
class="uk-text-bold matSelection">
<mat-option value="">Relevance</mat-option>
<mat-option value="resultdateofacceptance,descending">Date (most recent)</mat-option>
<mat-option value="resultdateofacceptance,ascending">Date (least recent)</mat-option>
<mat-option value="" [disabled]="isDisabled">Relevance</mat-option>
<mat-option value="resultdateofacceptance,descending" [disabled]="isDisabled">Date (most recent)</mat-option>
<mat-option value="resultdateofacceptance,ascending" [disabled]="isDisabled">Date (least recent)</mat-option>
</mat-select>
<mat-select *ngIf="(entityType == 'community' || entityType == 'stakeholder')"
@ -22,9 +22,9 @@ import {Component, Input, Output, EventEmitter} from '@angular/core';
[(ngModel)]="sortBy" (ngModelChange)="sortByChanged()"
[disableOptionCentering]="true"
panelClass="matSelectionPanel">
<mat-option value="">Title</mat-option>
<mat-option value="creationdate,descending">Creation Date (most recent)</mat-option>
<mat-option value="creationdate,ascending">Creation Date (least recent)</mat-option>
<mat-option value="" [disabled]="isDisabled">Title</mat-option>
<mat-option value="creationdate,descending" [disabled]="isDisabled">Creation Date (most recent)</mat-option>
<mat-option value="creationdate,ascending" [disabled]="isDisabled">Creation Date (least recent)</mat-option>
</mat-select>
</mat-form-field>
</div>
@ -32,7 +32,7 @@ import {Component, Input, Output, EventEmitter} from '@angular/core';
})
export class SearchSortingComponent {
@Input() isDisabled: boolean = false;
@Input() sortBy: string = '';
@Input() entityType: string = '';
@Output() sortByChange = new EventEmitter();

3
utils/pagingFormatter.component.ts
View File

@ -10,7 +10,7 @@ import {EnvProperties} from './properties/env-properties';
<ul *ngIf=" ( getTotalPages() > 0 ) && (getTotalPages() > 1) && ( 0 < currentPage && currentPage <= getTotalPages() ) "
class="uk-pagination uk-margin-remove-bottom uk-flex uk-flex-middle">
[class]="(isDisabled ? 'uk-disabled' : '') + ' uk-pagination uk-margin-remove-bottom uk-flex uk-flex-middle'">
<!--li *ngIf=" currentPage > 1" ><a [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',1)" routerLinkActive="router-link-active" [routerLink]=baseUrl aria-label="Previous">
<span><span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="chevron-left" ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.03" points="13 16 7 10 13 4"></polyline></svg></span></span></a></li-->
@ -38,6 +38,7 @@ import {EnvProperties} from './properties/env-properties';
})
export class PagingFormatter {
@Input() isDisabled: boolean = false;
@Input() currentPage: number = 1;
@Input() size: number=10;
@Input() totalResults: number = 10;

20
utils/rangeFilter/rangeFilter.component.html
View File

@ -1,7 +1,8 @@
<div class="uk-margin-small-bottom">
<div class="uk-margin-small-top uk-margin-bottom uk-grid uk-flex uk-flex-bottom">
<h5 class="uk-margin-bottom-remove">{{_formatTitle(filter.title)}}</h5>
<a *ngIf="filter.selectedFromValue || filter.selectedToValue" (click)="clearFilter()" class="portal-link">
<a *ngIf="filter.selectedFromValue || filter.selectedToValue" (click)="clearFilter()"
[class]="(isDisabled ? 'uk-disabled' : '') + ' portal-link'">
Clear
</a>
</div>
@ -9,19 +10,19 @@
<div>
<div class = "uk-animation-fade filterItem searchFilterItem uk-text-small">
<div class="searchFilterBoxValues ">
<form class="uk-inline uk-text-small form-group uk-margin-remove-bottom" #rangeForm="ngForm"
fromYearAfterToYear [rangeRequired]="mandatoryRange">
<form [class]="(isDisabled ? 'uk-disabled' : '') + ' uk-inline uk-text-small form-group uk-margin-remove-bottom'"
#rangeForm="ngForm" fromYearAfterToYear [rangeRequired]="mandatoryRange">
<input class=" uk-input form-control uk-width-1-3 uk-form-small" (focus)="focusedInput = 'from'"
(blur)="focusedInput = ''"
[(ngModel)]="filter.selectedFromValue" name="yearFrom" #yearFrom="ngModel" inValidYear
[maxYear]="yearMax" [minYear]="yearMin"
[placeholder]="'e.g. ' + yearMin " [disabled]="isDisabled"/><span
class="uk-margin-small-left uk-margin-small-right">-</span>
[placeholder]="'e.g. ' + yearMin " />
<span class="uk-margin-small-left uk-margin-small-right">-</span>
<input class=" uk-input form-control uk-width-1-3 uk-form-small" (focus)="focusedInput = 'to'"
(blur)="focusedInput = ''"
[(ngModel)]="filter.selectedToValue" name="yearTo" #yearTo="ngModel" inValidYear
[maxYear]="yearMax" [minYear]="yearMin"
[placeholder]="'e.g. ' + yearMax " [disabled]="isDisabled"/>
[placeholder]="'e.g. ' + yearMax "/>
<button type="submit" (click)="yearChanged()"
[ngStyle]="{'cursor': (rangeForm.valid && (yearFrom.dirty || yearTo.dirty)) ? 'pointer' : 'default'}"
class="uk-icon uk-icon-button uk-margin-small-left uk-text-right uk-button-default"
@ -54,22 +55,23 @@
<!-- Natalia's suggestion-->
<div class="uk-margin-small uk-margin-top uk-text-left">
<ul class="uk-subnav uk-subnav-divider recentyears">
<!-- + (isDisabled ? ' uk-disabled uk-text-muted' : '')"-->
<li><a
[class]="'portal-link uk-text-center '
+ ((stringToNum(filter.selectedFromValue) == currentYear && stringToNum(filter.selectedToValue) == currentYear) ? ' uk-text-bold' : '')
+ (isDisabled ? ' uk-disabled uk-text-muted' : '')"
"
(click)="yearChanged(0)"
>This year</a></li>
<li><a
[class]="'portal-link uk-text-center '
+ ((stringToNum(filter.selectedToValue) == currentYear && stringToNum(filter.selectedFromValue) == currentYear-4) ? ' uk-text-bold' : '')
+ (isDisabled ? ' uk-disabled uk-text-muted' : '')"
"
(click)="yearChanged(4)"
>Last 5 years</a></li>
<li><a
[class]="'portal-link uk-text-center '
+ ((stringToNum(filter.selectedToValue) == currentYear && stringToNum(filter.selectedFromValue) == currentYear-9) ? ' uk-text-bold' : '')
+ (isDisabled ? ' uk-disabled uk-text-muted' : '')"
"
(click)="yearChanged(9)"
>Last 10 years</a></li>
</ul>