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

[Trunk | Library]: 

1. rangeFilter.component.html: Disable button if form is invalid or not dirty (unchanged).
2. loading.component.ts: Added loading gif and <ng-content>.
3. searchResult.component.html: Add class "uk-margin-top" in <ul> (in order to align filters and results).
4. searchFilter.component.html: [Bug fix] class in <ng-container> does nothing. Move class="uk-animation-fade filterItem searchFilterItem uk-text-small" to <div> element (in view more).
5. newSearchPage.component.ts: Close offcanvas for filters (in small screens) when query changes.
6. newSearchPage.component.html: Align filters and results | Use same code for filters in all screens (<ng-template #filters_column>).


git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@58326 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
konstantina.galouni 2020-03-24 15:40:51 +00:00
parent fe937b2f9a
commit 6ea3e7c11f
6 changed files with 245 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,3 +1,69 @@
<ng-template #filters_column>
<!-- let-dynamic_content="dynamic_content">-->
<div *ngIf="selectedRangeFilters > 0 || selectedFilters > 0" class="uk-width-1-1 uk-margin-top uk-margin-medium-bottom ">
<div class="uk-grid uk-flex uk-flex-bottom">
<h5 class="uk-text-bold">Filters</h5>
<a *ngIf="(selectedRangeFilters+selectedFilters)>1" (click)="clearFilters()" [class]="((disableForms)?'uk-disabled uk-link-muted':'')+' portal-link ' + 'uk-width-1-2'">
Clear All
</a>
</div>
<div class="uk-grid uk-grid-small uk-text-small" uk-grid>
<ng-container *ngIf="selectedRangeFilters > 0">
<ng-container *ngFor="let filter of rangeFilters " >
<ng-container *ngIf = "filter.selectedFromAndToValues">
<span [title]="'Remove '+ filter.selectedFromAndToValues" (click) = "removeRangeFilter(filter) " >
<span class="selectedFilterLabel ">
<a [class]="((disableForms)?' uk-disabled':' ')+' uk-link-text '">
<span class=" clickable" aria-hidden="true">
<span class="uk-icon">
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="0.8"><path fill="none" stroke="#000" stroke-width="1.6" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.6" d="M16,4 L4,16"></path></svg>
</span>
</span>
<span class="uk-margin-small-left">{{filter.selectedFromAndToValues}}</span>
</a>
</span>
</span>
</ng-container>
</ng-container>
</ng-container>
<ng-container *ngFor="let filter of filters " >
<ng-container *ngIf = "filter.countSelectedValues > 0">
<span *ngFor="let value of getSelectedValues(filter); let i = index; let end = last; "
[title]="'Remove '+value.name" (click) = "removeFilter(value, filter) " >
<!-- if no grid on the div above, remove it and move class 'selectedFilterLabel' on top span -->
<span class="selectedFilterLabel ">
<a [class]="((disableForms)?' uk-disabled':' ')+' uk-link-text '">
<span class=" clickable" aria-hidden="true">
<span class="uk-icon">
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="0.8"><path fill="none" stroke="#000" stroke-width="1.6" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.6" d="M16,4 L4,16"></path></svg>
</span>
</span>
<span class="uk-margin-small-left" [innerHtml]="(value.name.length > 34)?value.name.substring(0,34)+'...':value.name"></span>
</a>
</span>
</span>
</ng-container>
</ng-container>
</div>
</div>
<div *ngIf="filters.length === 0 && results.length > 0" class="uk-margin-top">
<span class="uk-text-meta">No filters available</span>
</div>
<ul *ngIf="!showUnknownFilters"
[class]="'uk-list uk-list-divider' + (selectedRangeFilters == 0 && selectedFilters == 0 ? ' uk-margin-small-top' : '')">
<ng-container *ngFor="let filter of rangeFilters">
<li>
<range-filter [isDisabled]="disableForms" [filter]="filter" (onFilterChange)="filterChanged($event)"></range-filter>
</li>
</ng-container>
<ng-container *ngFor="let filter of filters ">
<li *ngIf= "filter.values.length >0">
<search-filter [filterValuesNum]="filterValuesNum" [showMoreInline]="showMoreFilterValuesInline" [isDisabled]="disableForms" [filter]="filter" [showResultCount]=showResultCount (onFilterChange)="filterChanged($event)" ></search-filter>
</li>
</ng-container>
</ul>
</ng-template>
<div *ngIf="!includeOnlyResultsAndFilter" [class]="usedBy != 'deposit' && (!customFilter || customFilter.queryFieldName != 'communityId') ?
' image-front-topbar uk-section-default uk-position-relative ' :
@ -74,10 +140,10 @@
<!-- </svg>-->
</a>
<div id="offcanvas-usage" uk-offcanvas overlay style="z-index:10000;">
<div #offcanvas_element id="offcanvas-usage" uk-offcanvas overlay style="z-index:10000;">
<div class="uk-offcanvas-bar offcanvas-white">
<button class="uk-offcanvas-close" type="button" uk-close></button>
<div class="uk-width-1-1 uk-margin-small-bottom uk-margin-top">
<div class="uk-width-1-1">
<!-- <span *ngIf="tableViewLink " class="uk-width-expand">-->
<!-- <span *ngIf="tableViewLink">-->
@ -92,86 +158,89 @@
<!-- class="uk-width-1-2" [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults" [(searchUtils)] = "searchUtils" [type]="csvPath" [csvParams]="csvParams" [totalResults]="searchUtils.totalResults">-->
<!-- </search-download>-->
<div *ngIf="selectedRangeFilters > 0 || selectedFilters > 0" class="uk-margin-small-bottom">
<!-- <div class="uk-grid uk-margin-bottom uk-margin-top">-->
<!-- <span class="uk-text-bold uk-text-large">Filters</span>-->
<!-- <a *ngIf="selectedFilters>1" (click)="clearFilters()" [class]="((disableForms)?'uk-disabled uk-link-muted':'')+' portal-link ' + 'uk-width-1-2'">-->
<!-- HERE-->
<!-- <div *ngIf="selectedRangeFilters > 0 || selectedFilters > 0" class="uk-margin-top uk-margin-small-bottom">-->
<!--&lt;!&ndash; <div class="uk-grid uk-margin-bottom uk-margin-top">&ndash;&gt;-->
<!--&lt;!&ndash; <span class="uk-text-bold uk-text-large">Filters</span>&ndash;&gt;-->
<!--&lt;!&ndash; <a *ngIf="selectedFilters>1" (click)="clearFilters()" [class]="((disableForms)?'uk-disabled uk-link-muted':'')+' portal-link ' + 'uk-width-1-2'">&ndash;&gt;-->
<!--&lt;!&ndash; Clear All&ndash;&gt;-->
<!--&lt;!&ndash; </a>&ndash;&gt;-->
<!--&lt;!&ndash; </div>&ndash;&gt;-->
<!-- <div class="uk-grid uk-flex uk-flex-bottom">-->
<!-- <h5 class="uk-text-bold">Filters</h5>-->
<!-- <a *ngIf="(selectedRangeFilters+selectedFilters)>1" (click)="clearFilters()" [class]="((disableForms)?'uk-disabled uk-link-muted':'')+' portal-link ' + 'uk-width-1-2'">-->
<!-- Clear All-->
<!-- </a>-->
<!-- </div>-->
<div class="uk-grid uk-flex uk-flex-bottom uk-margin-top">
<h5 class="uk-text-bold">Filters</h5>
<a *ngIf="(selectedRangeFilters+selectedFilters)>1" (click)="clearFilters()" [class]="((disableForms)?'uk-disabled uk-link-muted':'')+' portal-link ' + 'uk-width-1-2'">
Clear All
</a>
</div>
</div>
<div *ngIf="selectedRangeFilters > 0 || selectedFilters>0" class="uk-margin-medium-bottom uk-grid uk-grid-small uk-text-small" uk-grid>
<ng-container *ngIf="selectedRangeFilters > 0">
<ng-container *ngFor="let filter of rangeFilters " >
<ng-container *ngIf = "filter.selectedFromAndToValues">
<span [title]="'Remove '+ filter.selectedFromAndToValues" (click) = "removeRangeFilter(filter) " >
<span class="selectedFilterLabel ">
<a [class]="((disableForms)?' uk-disabled':' ')+' uk-link-text '">
<span class=" clickable" aria-hidden="true">
<span class="uk-icon">
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="0.8"><path fill="none" stroke="#000" stroke-width="1.6" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.6" d="M16,4 L4,16"></path></svg>
</span>
</span>
<span class="uk-margin-small-left">{{filter.selectedFromAndToValues}}</span>
</a>
</span>
</span>
</ng-container>
</ng-container>
</ng-container>
<ng-container *ngFor="let filter of filters " >
<ng-container *ngIf = "filter.countSelectedValues > 0">
<!-- <span class="uk-text-bold">{{filter.title}}:</span>-->
<!-- uk-margin-small-top uk-margin-small-right--> <!-- if no grid on the div above, add it -->
<!-- uk-label -->
<span *ngFor="let value of getSelectedValues(filter); let i = index; let end = last; "
[title]="'Remove '+value.name" (click) = "removeFilter(value, filter) " >
<!-- if no grid on the div above, remove it and move class 'selectedFilterLabel' on top span -->
<span class="selectedFilterLabel ">
<a [class]="((disableForms)?' uk-disabled':' ')+' uk-link-text '">
<span class=" clickable" aria-hidden="true">
<span class="uk-icon">
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="0.8"><path fill="none" stroke="#000" stroke-width="1.6" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.6" d="M16,4 L4,16"></path></svg>
</span>
</span>
<span class="uk-margin-small-left" [innerHtml]="(value.name.length > 34)?value.name.substring(0,34)+'...':value.name"></span>
</a>
</span>
</span>
</ng-container>
</ng-container>
</div>
<!-- <div class="uk-margin-small-bottom uk-margin-small-top uk-grid">-->
<!-- <a *ngIf= "showUnknownFilters" class = " portal-link" (click) = "clearFilters() " >Try new Query</a>-->
<!-- </div>-->
<!-- <div *ngIf="selectedRangeFilters > 0 || selectedFilters>0" class="uk-margin-medium-bottom uk-grid uk-grid-small uk-text-small" uk-grid>-->
<!-- <ng-container *ngIf="selectedRangeFilters > 0">-->
<!-- <ng-container *ngFor="let filter of rangeFilters " >-->
<!-- <ng-container *ngIf = "filter.selectedFromAndToValues">-->
<!-- <span [title]="'Remove '+ filter.selectedFromAndToValues" (click) = "removeRangeFilter(filter) " >-->
<!-- <span class="selectedFilterLabel ">-->
<!-- <a [class]="((disableForms)?' uk-disabled':' ')+' uk-link-text '">-->
<!-- <span class=" clickable" aria-hidden="true">-->
<!-- <span class="uk-icon">-->
<!-- <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="0.8"><path fill="none" stroke="#000" stroke-width="1.6" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.6" d="M16,4 L4,16"></path></svg>-->
<!-- </span>-->
<!-- </span>-->
<!-- <span class="uk-margin-small-left">{{filter.selectedFromAndToValues}}</span>-->
<!-- </a>-->
<!-- </span>-->
<!-- </span>-->
<!-- </ng-container>-->
<!-- </ng-container>-->
<!-- </ng-container>-->
<!-- <ng-container *ngFor="let filter of filters " >-->
<!-- <ng-container *ngIf = "filter.countSelectedValues > 0">-->
<!-- &lt;!&ndash; <span class="uk-text-bold">{{filter.title}}:</span>&ndash;&gt;-->
<!-- &lt;!&ndash; uk-margin-small-top uk-margin-small-right&ndash;&gt; &lt;!&ndash; if no grid on the div above, add it &ndash;&gt;-->
<!-- &lt;!&ndash; uk-label &ndash;&gt;-->
<!-- <span *ngFor="let value of getSelectedValues(filter); let i = index; let end = last; "-->
<!-- [title]="'Remove '+value.name" (click) = "removeFilter(value, filter) " >-->
<!-- &lt;!&ndash; if no grid on the div above, remove it and move class 'selectedFilterLabel' on top span &ndash;&gt;-->
<!-- <span class="selectedFilterLabel ">-->
<!-- <a [class]="((disableForms)?' uk-disabled':' ')+' uk-link-text '">-->
<!-- <span class=" clickable" aria-hidden="true">-->
<!-- <span class="uk-icon">-->
<!-- <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="0.8"><path fill="none" stroke="#000" stroke-width="1.6" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.6" d="M16,4 L4,16"></path></svg>-->
<!-- </span>-->
<!-- </span>-->
<!-- <span class="uk-margin-small-left" [innerHtml]="(value.name.length > 34)?value.name.substring(0,34)+'...':value.name"></span>-->
<!-- </a>-->
<!-- </span>-->
<!-- </span>-->
<!-- </ng-container>-->
<!-- </ng-container>-->
<!-- </div>-->
<!--&lt;!&ndash; <div class="uk-margin-small-bottom uk-margin-small-top uk-grid">&ndash;&gt;-->
<!--&lt;!&ndash; <a *ngIf= "showUnknownFilters" class = " portal-link" (click) = "clearFilters() " >Try new Query</a>&ndash;&gt;-->
<!--&lt;!&ndash; </div>&ndash;&gt;-->
<!-- <div *ngIf="filters.length === 0 && searchUtils.keyword.length === 0 && results.length > 0" class="uk-margin-top">-->
<!-- <span class="uk-text-meta">No filters available</span>-->
<!-- </div>-->
<!-- <ul *ngIf="!showUnknownFilters" class="uk-list uk-list-divider">-->
<!-- <ng-container *ngFor="let filter of rangeFilters">-->
<!-- <li>-->
<!-- <range-filter [isDisabled]="disableForms" [filter]="filter" (onFilterChange)="filterChanged($event)"></range-filter>-->
<!-- </li>-->
<!-- </ng-container>-->
<!-- <ng-container *ngFor="let filter of filters ">-->
<!-- <li *ngIf= "filter.values.length >0">-->
<!-- <search-filter [filterValuesNum]="filterValuesNum" [showMoreInline]="showMoreFilterValuesInline" [isDisabled]="disableForms" [filter]="filter" [showResultCount]=showResultCount (onFilterChange)="filterChanged($event)" ></search-filter>-->
<!-- </li>-->
<!-- </ng-container>-->
<!-- </ul>-->
<ng-container *ngTemplateOutlet="filters_column; context: {}"></ng-container>
<!-- END OF HERE-->
</div>
<div *ngIf="filters.length === 0 && searchUtils.keyword.length === 0 && results.length > 0" class="uk-margin-top">
<span class="uk-text-meta">No filters available</span>
</div>
<ul *ngIf="!showUnknownFilters" class="uk-list uk-list-divider">
<ng-container *ngFor="let filter of rangeFilters">
<li>
<range-filter [isDisabled]="disableForms" [filter]="filter" (onFilterChange)="filterChanged($event)"></range-filter>
</li>
</ng-container>
<ng-container *ngFor="let filter of filters ">
<li *ngIf= "filter.values.length >0">
<search-filter [filterValuesNum]="filterValuesNum" [showMoreInline]="showMoreFilterValuesInline" [isDisabled]="disableForms" [filter]="filter" [showResultCount]=showResultCount (onFilterChange)="filterChanged($event)" ></search-filter>
</li>
</ng-container>
</ul>
</div>
</div>
@ -193,88 +262,96 @@
<!-- 'community' && entityType != 'funder') && usedBy == 'search'"-->
<!-- class="uk-width-1-2" [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults" [(searchUtils)] = "searchUtils" [type]="csvPath" [csvParams]="csvParams" [totalResults]="searchUtils.totalResults">-->
<!-- </search-download>-->
<div *ngIf="selectedRangeFilters > 0 || selectedFilters > 0" class="uk-width-1-1 uk-margin-top uk-margin-small-bottom ">
<div class="uk-grid uk-flex uk-flex-bottom uk-margin-small-top">
<h5 class="uk-text-bold">Filters</h5>
<a *ngIf="(selectedRangeFilters+selectedFilters)>1" (click)="clearFilters()" [class]="((disableForms)?'uk-disabled uk-link-muted':'')+' portal-link ' + 'uk-width-1-2'">
Clear All
</a>
</div>
<!-- uk-grid uk-grid-small" uk-grid-->
<!-- uk-margin-left-->
<div *ngIf="selectedRangeFilters > 0 || selectedFilters>0" class="uk-margin-medium-bottom uk-grid uk-grid-small uk-text-small" uk-grid>
<ng-container *ngIf="selectedRangeFilters > 0">
<ng-container *ngFor="let filter of rangeFilters " >
<ng-container *ngIf = "filter.selectedFromAndToValues">
<span [title]="'Remove '+ filter.selectedFromAndToValues" (click) = "removeRangeFilter(filter) " >
<span class="selectedFilterLabel ">
<a [class]="((disableForms)?' uk-disabled':' ')+' uk-link-text '">
<span class=" clickable" aria-hidden="true">
<span class="uk-icon">
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="0.8"><path fill="none" stroke="#000" stroke-width="1.6" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.6" d="M16,4 L4,16"></path></svg>
</span>
</span>
<span class="uk-margin-small-left">{{filter.selectedFromAndToValues}}</span>
</a>
</span>
</span>
</ng-container>
</ng-container>
</ng-container>
<ng-container *ngFor="let filter of filters " >
<ng-container *ngIf = "filter.countSelectedValues > 0">
<!-- <span class="uk-text-bold">{{filter.title}}:</span>-->
<!-- uk-margin-small-top uk-margin-small-right--> <!-- if no grid on the div above, add it -->
<!-- uk-label -->
<span *ngFor="let value of getSelectedValues(filter); let i = index; let end = last; "
[title]="'Remove '+value.name" (click) = "removeFilter(value, filter) " >
<!-- if no grid on the div above, remove it and move class 'selectedFilterLabel' on top span -->
<span class="selectedFilterLabel ">
<a [class]="((disableForms)?' uk-disabled':' ')+' uk-link-text '">
<span class=" clickable" aria-hidden="true">
<span class="uk-icon">
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="0.8"><path fill="none" stroke="#000" stroke-width="1.6" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.6" d="M16,4 L4,16"></path></svg>
</span>
</span>
<span class="uk-margin-small-left" [innerHtml]="(value.name.length > 34)?value.name.substring(0,34)+'...':value.name"></span>
</a>
</span>
</span>
</ng-container>
</ng-container>
</div>
<!-- <div class="uk-margin-small-bottom uk-margin-small-top uk-grid">-->
<!-- <a *ngIf= "showUnknownFilters" class = " portal-link" (click) = "clearFilters() " >Try new Query</a>-->
<!-- HERE-->
<!-- <div *ngIf="selectedRangeFilters > 0 || selectedFilters > 0" class="uk-width-1-1 uk-margin-top uk-margin-medium-bottom ">-->
<!-- <div class="uk-grid uk-flex uk-flex-bottom">-->
<!-- <h5 class="uk-text-bold">Filters</h5>-->
<!-- <a *ngIf="(selectedRangeFilters+selectedFilters)>1" (click)="clearFilters()" [class]="((disableForms)?'uk-disabled uk-link-muted':'')+' portal-link ' + 'uk-width-1-2'">-->
<!-- Clear All-->
<!-- </a>-->
<!-- </div>-->
</div>
<div *ngIf="filters.length === 0 && results.length > 0" class="uk-margin-top">
<span class="uk-text-meta">No filters available</span>
</div>
<ul *ngIf="!showUnknownFilters" class="uk-list uk-list-divider">
<ng-container *ngFor="let filter of rangeFilters">
<li>
<range-filter [isDisabled]="disableForms" [filter]="filter" (onFilterChange)="filterChanged($event)"></range-filter>
</li>
</ng-container>
<ng-container *ngFor="let filter of filters ">
<li *ngIf= "filter.values.length >0">
<search-filter [filterValuesNum]="filterValuesNum" [showMoreInline]="showMoreFilterValuesInline" [isDisabled]="disableForms" [filter]="filter" [showResultCount]=showResultCount (onFilterChange)="filterChanged($event)" ></search-filter>
</li>
</ng-container>
</ul>
<!-- &lt;!&ndash; uk-grid uk-grid-small" uk-grid&ndash;&gt;-->
<!-- &lt;!&ndash; uk-margin-left&ndash;&gt;-->
<!-- <div class="uk-grid uk-grid-small uk-text-small" uk-grid>-->
<!-- <ng-container *ngIf="selectedRangeFilters > 0">-->
<!-- <ng-container *ngFor="let filter of rangeFilters " >-->
<!-- <ng-container *ngIf = "filter.selectedFromAndToValues">-->
<!-- <span [title]="'Remove '+ filter.selectedFromAndToValues" (click) = "removeRangeFilter(filter) " >-->
<!-- <span class="selectedFilterLabel ">-->
<!-- <a [class]="((disableForms)?' uk-disabled':' ')+' uk-link-text '">-->
<!-- <span class=" clickable" aria-hidden="true">-->
<!-- <span class="uk-icon">-->
<!-- <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="0.8"><path fill="none" stroke="#000" stroke-width="1.6" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.6" d="M16,4 L4,16"></path></svg>-->
<!-- </span>-->
<!-- </span>-->
<!-- <span class="uk-margin-small-left">{{filter.selectedFromAndToValues}}</span>-->
<!-- </a>-->
<!-- </span>-->
<!-- </span>-->
<!-- </ng-container>-->
<!-- </ng-container>-->
<!-- </ng-container>-->
<!-- <ng-container *ngFor="let filter of filters " >-->
<!-- <ng-container *ngIf = "filter.countSelectedValues > 0">-->
<!-- &lt;!&ndash; <span class="uk-text-bold">{{filter.title}}:</span>&ndash;&gt;-->
<!-- &lt;!&ndash; uk-margin-small-top uk-margin-small-right&ndash;&gt; &lt;!&ndash; if no grid on the div above, add it &ndash;&gt;-->
<!-- &lt;!&ndash; uk-label &ndash;&gt;-->
<!-- <span *ngFor="let value of getSelectedValues(filter); let i = index; let end = last; "-->
<!-- [title]="'Remove '+value.name" (click) = "removeFilter(value, filter) " >-->
<!-- &lt;!&ndash; if no grid on the div above, remove it and move class 'selectedFilterLabel' on top span &ndash;&gt;-->
<!-- <span class="selectedFilterLabel ">-->
<!-- <a [class]="((disableForms)?' uk-disabled':' ')+' uk-link-text '">-->
<!-- <span class=" clickable" aria-hidden="true">-->
<!-- <span class="uk-icon">-->
<!-- <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="0.8"><path fill="none" stroke="#000" stroke-width="1.6" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.6" d="M16,4 L4,16"></path></svg>-->
<!-- </span>-->
<!-- </span>-->
<!-- <span class="uk-margin-small-left" [innerHtml]="(value.name.length > 34)?value.name.substring(0,34)+'...':value.name"></span>-->
<!-- </a>-->
<!-- </span>-->
<!-- </span>-->
<!-- </ng-container>-->
<!-- </ng-container>-->
<!-- </div>-->
<!-- &lt;!&ndash; <div class="uk-margin-small-bottom uk-margin-small-top uk-grid">&ndash;&gt;-->
<!-- &lt;!&ndash; <a *ngIf= "showUnknownFilters" class = " portal-link" (click) = "clearFilters() " >Try new Query</a>&ndash;&gt;-->
<!-- &lt;!&ndash; </div>&ndash;&gt;-->
<!-- </div>-->
<!-- <div *ngIf="filters.length === 0 && results.length > 0" class="uk-margin-top">-->
<!-- <span class="uk-text-meta">No filters available</span>-->
<!-- </div>-->
<!-- <ul *ngIf="!showUnknownFilters"-->
<!-- [class]="'uk-list uk-list-divider' + (selectedRangeFilters == 0 && selectedFilters == 0 ? ' uk-margin-small-top' : '')">-->
<!-- <ng-container *ngFor="let filter of rangeFilters">-->
<!-- <li>-->
<!-- <range-filter [isDisabled]="disableForms" [filter]="filter" (onFilterChange)="filterChanged($event)"></range-filter>-->
<!-- </li>-->
<!-- </ng-container>-->
<!-- <ng-container *ngFor="let filter of filters ">-->
<!-- <li *ngIf= "filter.values.length >0">-->
<!-- <search-filter [filterValuesNum]="filterValuesNum" [showMoreInline]="showMoreFilterValuesInline" [isDisabled]="disableForms" [filter]="filter" [showResultCount]=showResultCount (onFilterChange)="filterChanged($event)" ></search-filter>-->
<!-- </li>-->
<!-- </ng-container>-->
<!-- </ul>-->
<!--context: { dynamic_content: getDynamicContent(share_research_results_type) }">-->
<ng-container *ngTemplateOutlet="filters_column; context: {}"></ng-container>
<!-- END OF HERE-->
</div>
<div class="uk-width-expand@m uk-with-1-1@s">
<div *ngIf="openaireLink"> <a class="uk-margin-top uk-button uk-button-text" [href]=openaireLink target="_blank" >Results in OpenAIRE</a></div>
<div class="uk-align-center uk-margin-remove-bottom">
<div *ngIf="(results && searchUtils.totalResults > 0) || (!loadPaging && oldTotalResults > 0 && searchUtils.status == errorCodes.LOADING)"
class="uk-grid uk-margin-small-top uk-margin-bottom">
class="uk-grid uk-margin-top uk-margin-bottom">
<div class="uk-width-expand@m uk-grid uk-grid-medium uk-margin-small-bottom">
<search-results-per-page [(size)]="searchUtils.size" (sizeChange)="sizeChanged($event)"></search-results-per-page>
<search-sorting *ngIf="sort" [(sortBy)]="searchUtils.sortBy" (sortByChange)="sortByChanged($event)"></search-sorting>
</div>
<div class="uk-flex uk-flex-middle uk-width-auto@m uk-margin-small-bottom">
<!-- uk-flex uk-flex-middle-->
<div class="uk-width-auto@m uk-margin-small-bottom">
<search-download *ngIf= "!showUnknownFilters && searchUtils.totalResults > 0
&& ( entityType !='community' && entityType != 'funder') && usedBy == 'search'"
[loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults" [(searchUtils)] = "searchUtils"

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

@ -1,4 +1,4 @@
import {Component, Input, Output, ViewChild} from '@angular/core';
import {Component, ElementRef, Input, Output, ViewChild} from '@angular/core';
import {Location} from '@angular/common';
import {ActivatedRoute, Router} from '@angular/router';
import {Meta, Title} from '@angular/platform-browser';
@ -19,11 +19,15 @@ import {RefineResultsUtils} from "../../services/servicesUtils/refineResults.cla
import {RangeFilter} from "../../utils/rangeFilter/rangeFilterHelperClasses.class";
import {ZenodoInformationClass} from "../../deposit/utils/zenodoInformation.class";
declare var UIkit: any;
@Component({
selector: 'new-search-page',
templateUrl: 'newSearchPage.component.html'
})
export class NewSearchPageComponent {
@ViewChild('offcanvas_element') offcanvasElement: ElementRef;
@Input() piwikSiteId = null;
@Input() hasPrefix: boolean = true;
@Input() pageTitle = "";
@ -194,6 +198,10 @@ export class NewSearchPageComponent {
}
goTo(page: number = 1) {
if(this.offcanvasElement) {
UIkit.offcanvas(this.offcanvasElement.nativeElement).hide();
}
this.searchUtils.page = page;
this.buildPageURLParameters(this.filters, this.rangeFilters, true);
this.router.navigate([this.searchUtils.baseUrl], {queryParams: this.routerHelper.createQueryParams(this.parameterNames, this.parameterValues)});

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

@ -111,9 +111,9 @@
<!-- </div>-->
<!-- </div>-->
<!-- </ng-container>-->
<ng-container *ngFor="let value of sort(filter.values)"
class="uk-animation-fade filterItem searchFilterItem uk-text-small">
<div *ngIf="filterKeywords(value.name)" title = "{{value.name}}">
<ng-container *ngFor="let value of sort(filter.values)">
<div *ngIf="filterKeywords(value.name)" title = "{{value.name}}"
class="uk-animation-fade filterItem searchFilterItem uk-text-small">
<label *ngIf="filter.filterType == 'checkbox' || filter.filterType == 'radio'">
<input *ngIf="filter.filterType == 'checkbox'" type="checkbox"
[disabled]="isDisabled || (showResultCount && value.number === 0)"

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

@ -1,4 +1,4 @@
<ul [class]="'uk-list uk-margin '+custom_class">
<ul [class]="'uk-list uk-margin uk-margin-top '+custom_class">
<errorMessages [status]="[status]" [type]="'results'"></errorMessages>
<li *ngFor="let result of results" class="uk-animation-fade">
<div class="uk-card uk-card-default uk-padding uk-card-hover">

7
utils/modal/loading.component.ts
View File

@ -11,7 +11,12 @@ import {Component, ViewEncapsulation, ComponentRef, ElementRef, Input, EventEmit
<div class="uk-modal-body">
<div >
<h4 class="text-center" >{{message}}</h4>
<div class="uk-modal-spinner"></div>
<!-- <div class="uk-spinner"></div>-->
<div class="uk-animation-fade uk-margin-top uk-width-1-1" role="alert">
<span class="loading-gif uk-align-center" ></span>
</div>
<ng-content></ng-content>
</div>
</div>

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

@ -17,9 +17,9 @@
[(ngModel)]="filter.selectedToValue" name="yearTo" #yearTo="ngModel" inValidYear
placeholder="e.g. 2020"/>
<button type="submit" (click)="yearChanged()"
[ngStyle]="{'cursor': rangeForm.valid ? 'pointer' : 'not-allowed'}"
[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"
[disabled]="rangeForm.invalid">
[disabled]="rangeForm.invalid || (!yearFrom.dirty && !yearTo.dirty)">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
icon="chevron-right" ratio="1">
<polyline fill="none" stroke="#000" stroke-width="1.03" points="7 4 13 10 7 16"></polyline>