openaire-library/searchPages/searchUtils/newSearchPage.component.html

369 lines
21 KiB
HTML
Raw Normal View History

<ng-template #selected_filters_pills>
<h1 class="uk-grid uk-grid-small uk-text-small" uk-grid>
<ng-container *ngIf="customFilter && ((customFilterEnabled &&
refineFields.indexOf(customFilter.queryFieldName) ==
-1) ||customFilter.isHiddenFilter)">
<span class="uk-width-auto">
<span class="uk-label uk-flex uk-flex-middle">
<span class="uk-margin-small-right uk-width-expand">{{customFilter.valueName}}</span>
</span>
</span>
</ng-container>
<ng-container *ngIf=" resultTypes && resultTypes.countSelectedValues > 0">
<ng-container *ngFor="let type of resultTypes.values; let i = index; let end = last; ">
<ng-container *ngIf="type.selected">
<span class="uk-width-auto">
<a [attr.uk-tooltip]="'Remove ' + type.name" (click)="removeResultType(type.id)"
[class.uk-disabled]="disabled">
<span class="uk-label uk-flex uk-flex-middle">
<span class="uk-margin-small-right uk-width-expand">{{type.name}}</span>
<icon class="uk-text-muted" name="close" flex="true" ratio="0.7"></icon>
</span>
</a>
</span>
</ng-container>
</ng-container>
</ng-container>
<ng-container *ngIf="selectedRangeFilters > 0">
<ng-container *ngFor="let filter of rangeFilters ">
<ng-container *ngIf="filter.selectedFromAndToValues">
<span class="uk-width-auto">
<a [attr.uk-tooltip]="'Remove ' + filter.selectedFromAndToValues" (click)="removeRangeFilter(filter)"
[class.uk-disabled]="disabled">
<span class="uk-label uk-flex uk-flex-middle">
<span class="uk-margin-small-right uk-width-expand">{{filter.selectedFromAndToValues}}</span>
<icon class="uk-text-muted" name="close" flex="true" ratio="0.7"></icon>
</span>
</a>
</span>
</ng-container>
</ng-container>
</ng-container>
<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; ">
<span *ngIf="!customFilter || (customFilter.isHiddenFilter && customFilter.valueId != value.id)"
class="uk-width-auto">
<a [attr.uk-tooltip]="'Remove ' + value.name" (click)="removeFilter(value, filter)"
[class.uk-disabled]="disabled">
<span class="uk-label uk-flex uk-flex-middle">
<span class="uk-margin-small-right uk-width-expand">{{value.name}}</span>
<icon class="uk-text-muted" name="close" flex="true" ratio="0.7"></icon>
</span>
</a>
</span>
</ng-container>
</ng-container>
</ng-container>
</h1>
</ng-template>
<ng-template #filters_column>
<div [class.filterLoading]="disabled">
<div class="uk-flex uk-flex-middle">
<h4 class="uk-margin-right uk-margin-remove-bottom">Filters</h4>
<a *ngIf="(selectedRangeFilters + selectedFilters + selectedTypesNum)>0"
(click)="clearFilters()" class="uk-text-small"
[class.uk-disabled]="disabled" [class.uk-link-muted]="disabled">
Clear All
</a>
</div>
<div *ngIf="searchUtils.refineStatus == errorCodes.LOADING && existingFiltersWithValues === 0"
class="uk-margin-top" role="alert">
<loading></loading>
</div>
<div
*ngIf="searchUtils.refineStatus != errorCodes.LOADING && searchUtils.refineStatus != errorCodes.DONE && results.length > 0"
class="uk-margin-top uk-text-meta">
<span *ngIf="searchUtils.refineStatus == errorCodes.NONE">No filters available</span>
<span *ngIf="searchUtils.refineStatus != errorCodes.NONE" class="uk-text-warning">Filters temporarily unavailable. Please try again later.</span>
</div>
<ul *ngIf="!showUnknownFilters" class="uk-list uk-list-xlarge">
<li *ngIf="filters.length > 0 && filters[0].values.length >0 && filters[0].filterId == 'resultbestaccessright'">
<search-filter [filterValuesNum]="filterValuesNum" [showMoreInline]="showMoreFilterValuesInline"
[isDisabled]="disabled"
[filter]="filters[0]" [showResultCount]=showResultCount
(onFilterChange)="filterChanged($event)" [quickFilter]="quickFilter"
[actionRoute]="true"></search-filter>
</li>
<li *ngIf="resultTypes && (filters.length > 0)">
<quick-selections [resultTypes]="resultTypes" (typeChange)="queryChanged($event)"
[isDisabled]="disabled" [vertical]="true"
[properties]="properties" [actionRoute]="true">
</quick-selections>
</li>
<li *ngFor="let filter of rangeFilters">
<range-filter [isDisabled]="disabled" [filter]="filter"
(onFilterChange)="filterChanged($event)" [actionRoute]="true"></range-filter>
</li>
<ng-container *ngFor="let filter of filters ">
<li *ngIf="filter.values && filter.values.length > 0 && filter.filterId != 'resultbestaccessright'">
<search-filter [filterValuesNum]="filterValuesNum" [showMoreInline]="showMoreFilterValuesInline"
[isDisabled]="disabled"
[filter]="filter" [showResultCount]=showResultCount
(onFilterChange)="filterChanged($event)" [actionRoute]="true"></search-filter>
</li>
</ng-container>
</ul>
</div>
</ng-template>
<!-- TODO - Kostis Clean up -->
<div *ngIf="!includeOnlyResultsAndFilter" [class]="usedBy != 'deposit' && usedBy != 'orcid' && (!customFilter || customFilter.queryFieldName != 'communityId') ?
(stickyForm?'':' ') :
(+ (stickyForm?'':' uk-section') +' uk-padding-remove-bottom uk-padding-remove-top ' +
((usedBy == 'deposit' || usedBy == 'orcid') ? ' uk-padding-remove-top ' : ' '))"
[attr.uk-sticky]="(stickyForm?'{animation:false;offset:100;top:90;cls-active:uk-active uk-sticky-below;cls-inactive:uk-sticky '+
(usedBy != 'deposit' && usedBy != 'orcid' && (!customFilter || customFilter.queryFieldName != 'communityId') ?
' uk-position-relative ' :(' uk-section ' ))+'}':null)">
<div [class]="' uk-background-norepeat uk-background-bottom-center uk-padding-remove-bottom uk-flex uk-flex-middle uk-background-fixed '+searchFormClass
+ (usedBy != 'deposit' && usedBy != 'orcid' && (!customFilter || customFilter.queryFieldName != 'communityId')?
' image-front-topbar searchFormMinHeight uk-padding-remove-bottom uk-section uk-section-small' : '')
+(simpleView?'':' advancedSearchFormBackground ')">
<!-- TODO - Kostis until here-->
<div class="uk-width-1-1">
<div class="uk-container uk-container-large">
<div class="uk-padding-small uk-padding-remove-bottom">
<breadcrumbs *ngIf="showBreadcrumb" [breadcrumbs]="breadcrumbs"></breadcrumbs>
</div>
</div>
<div class="uk-position-relative">
<div class="uk-container uk-container-large uk-section uk-section-small uk-margin-bottom" id="searchForm">
2022-03-08 19:42:50 +01:00
<div class="uk-grid uk-flex uk-flex-middle uk-flex-center" uk-grid>
<div id="searchImage"></div>
<advanced-search-form
[entityType]="entityType"
[fieldIds]="fieldIds"
[fieldIdsMap]="fieldIdsMap"
[selectedFields]="selectedFields"
(queryChange)="queryChanged($event)"
[isDisabled]="disabled"
[simpleSearchLink]="simpleSearchLink"
[advancedSearchLink]="advancedSearchLink"
[advancedSearchLinkParameters]="this.routerHelper.createQueryParams(this.parameterNames, this.parameterValues)"
[simpleView]="simpleView" [formPlaceholderText]="formPlaceholderText"
[resultTypes]="resultTypes" [quickFilter]="quickFilter" [entitiesSelection]="entitiesSelection"
[showSwitchSearchLink]="showSwitchSearchLink" [customFilter]="customFilter"
>
</advanced-search-form>
</div>
</div>
</div>
</div>
</div>
</div>
<schema2jsonld *ngIf="url" [URL]="url" type="search" [name]=pageTitleWithFilters
[searchAction]=false [description]="metaDescription"></schema2jsonld>
<div id="tm-main" class="uk-margin-medium-top" [class.uk-margin-top]="stickyForm">
2022-03-15 15:29:59 +01:00
<ng-template #loading>
<loading></loading>
</ng-template>
<ng-template [ngIf]="searchUtils.refineStatus != errorCodes.LOADING || existingFiltersWithValues !== 0" [ngIfElse]="loading">
<div uk-grid>
<div class="tm-main uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l uk-row-first ">
<div class="uk-container uk-container-large">
<div>
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
[texts]="pageContents['top']"></helper>
<div [class]="showRefine? 'uk-width-4-5@m uk-width-4-5@l uk-width-1-1@s' :'uk-width-1-1'">
<div *ngIf="showRefine" class="uk-hidden@m uk-margin-top">
<a href="#mobile-filters" uk-toggle (click)="showOffCanvas=true;">
<span class="uk-icon uk-margin-small-right uk-margin-small-left">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
data-svg="settings">
<ellipse fill="none" stroke="#000" cx="6.11" cy="3.55" rx="2.11" ry="2.15"></ellipse>
<ellipse fill="none" stroke="#000" cx="6.11" cy="15.55" rx="2.11" ry="2.15"></ellipse>
<circle fill="none" stroke="#000" cx="13.15" cy="9.55" r="2.15"></circle>
<rect x="1" y="3" width="3" height="1"></rect>
<rect x="10" y="3" width="8" height="1"></rect>
<rect x="1" y="9" width="8" height="1"></rect>
<rect x="15" y="9" width="3" height="1"></rect>
<rect x="1" y="15" width="3" height="1"></rect>
<rect x="10" y="15" width="8" height="1"></rect>
</svg>
</span>
<span>Filters <span
*ngIf="(selectedRangeFilters+selectedFilters) > 0">({{(selectedRangeFilters + selectedFilters)}}
)</span></span>
</a>
<div #mobileFilters id="mobile-filters" uk-offcanvas="overlay: true" style="z-index:10000;">
<!-- TODO - Kostis check offcanvas-white -->
<div class="uk-offcanvas-bar offcanvas-white">
<a class="uk-offcanvas-close uk-link-text" (click)="showOffCanvas=false">
<icon name="close" visuallyHidden="close Filters"></icon>
</a>
<div *ngIf="showOffCanvas" class="uk-width-1-1">
<ng-container *ngTemplateOutlet="filters_column; context: {}"></ng-container>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="includeOnlyResultsAndFilter"
class="uk-margin-medium-top uk-margin-medium-bottom">
<a *ngIf="showSwitchSearchLink && advancedSearchLink" routerLinkActive="router-link-active"
[routerLink]="advancedSearchLink" style="z-index:1;"
[queryParams]="this.routerHelper.createQueryParams(this.parameterNames, this.parameterValues)"
[class]="((disabled)?' uk-disabled uk-link-muted ':'') +' portal-link uk-float-right '">Advanced
search
</a>
</div>
<div class="uk-grid uk-padding-small uk-padding-remove-vertical uk-margin-large-bottom">
<div *ngIf="showRefine && (results.length > 0
|| (searchUtils.refineStatus == errorCodes.LOADING && searchUtils.status != errorCodes.LOADING)
|| (!hideFilters &&
(existingFiltersWithValues > 0 || (selectedRangeFilters + selectedFilters + selectedTypesNum) > 0)
)
)"
class="uk-width-1-4@m search-filters uk-visible@m">
<ng-container *ngTemplateOutlet="filters_column; context: {}"></ng-container>
</div>
<div class="uk-width-expand@m uk-with-1-1@s">
<!-- Results only for Custom Filter? -->
<div *ngIf="customFilter && !customFilter.isHiddenFilter &&
customFilter.selected == false && customFilter.promptToAddFilter"
class="uk-alert uk-animation-slide-top-small">
Do you want to see results only for {{customFilter.valueName}}? <a
(click)="addCustomFilter();">Click here</a>.
</div>
<!-- Related results for Custom Filter Alert -->
<div *ngIf="openaireLink && (searchUtils.totalResults > 0 || !loadPaging )"
class="uk-alert uk-text-center uk-margin-small-top ">
<span *ngIf="customFilter">The following results are related to <span class="portal-color"
>{{customFilter.valueName}}</span>.</span>
Are you interested to view more results? Visit
<a
class="uk-margin-top uk-link"
[href]="openaireLink+this.routerHelper.createQueryParamsString(this.parameterNames, this.parameterValues)"
target="_blank"> OpenAIRE - Explore</a>.
</div>
2022-03-15 12:13:28 +01:00
<div class="uk-flex uk-flex-between uk-flex-middle uk-flex-wrap uk-margin-medium-top uk-margin-bottom">
<!-- Total results, number of pages -->
<h6 class="uk-margin-remove">
<ng-container *ngIf="results && searchUtils.totalResults > 0">
<span>{{searchUtils.totalResults|number}}</span>
<span class="uk-text-muted uk-text-capitalize"> {{type}}, page </span>
<span>{{searchUtils.page | number}}</span>
<span class="uk-text-muted"> of {{(totalPages(searchUtils.totalResults)|number)}}</span>
</ng-container>
<ng-container *ngIf="!loadPaging && oldTotalResults > 0 && searchUtils.status == errorCodes.LOADING">
<span>{{oldTotalResults|number}}</span>
<span class="uk-text-muted uk-text-capitalize"> {{type}}, page </span>
<span>{{searchUtils.page | number}}</span>
<span class="uk-text-muted"> of {{(totalPages(oldTotalResults)|number)}}</span>
</ng-container>
</h6>
<!-- Download results -->
<div *ngIf="showDownload" class="uk-margin-small-bottom uk-margin-small-top">
<search-download
*ngIf="( entityType !='community' && entityType != 'stakeholder') && usedBy == 'search'"
[isDisabled]="disabled"
[type]="csvPath" [csvParams]="csvParams" [totalResults]="searchUtils.totalResults"
[piwikSiteId]="piwikSiteId">
</search-download>
</div>
</div>
<!-- No Dashboard Filters -->
<div
*ngIf="selectedRangeFilters+selectedFilters + selectedTypesNum > 0 || (customFilter && (customFilter.selected == true || customFilter.isHiddenFilter))">
<ng-container *ngTemplateOutlet="selected_filters_pills;"></ng-container>
</div>
<div class="uk-grid uk-flex-middle uk-child-width-1-1 uk-child-width-1-2@m uk-margin-medium-top" uk-grid>
<div
*ngIf="(results && searchUtils.totalResults > 0) || (!loadPaging && oldTotalResults > 0 && searchUtils.status == errorCodes.LOADING)">
<div class="uk-flex uk-flex-middle">>
<div class="uk-width-small uk-margin-right" *ngIf="searchUtils.totalResults >= 50 || disabled">
<div input type="select" placeholder="Results per page" inputClass="flat x-small"
[options]="['5','10','20','50']" [(value)]="searchUtils.size" [disabled]="disabled"
(valueChange)="sizeChanged($event)"></div>
</div>
2022-04-06 15:26:45 +02:00
<search-sorting *ngIf="sort"
[entityType]="entityType" [sortBy]="searchUtils.sortBy"
(sortByChange)="sortByChanged($event)"
[isDisabled]="disabled">
</search-sorting>
[Trunk | Library]: 1. searchUtils.class.ts: In SearchUtilsClass added field "refineStatus:number = 1;" for refine queries. 2. searchResultsPerPage.component.ts & searchSorting.component.ts: [Bug fix] In EventEmitter (value change), emit raw value, not object with field "value". 3. searchDataProviders.component.ts & searchOrganizations.component.ts & searchProjects.component.ts & searchResearchResults.component.ts: a. Add subscriptions in array to unsubscribe in ngOnDestroy. b. Get properties from environment (no service needed). c. Separate queries for refine and results. d. Do not call refine query when page, results per page, sortBy change (there is still a bug here). e. For refine query, added field "disableRefineForms" default set to false - passed in <new-search-page>. 4. newSearchPage.component.html: a. Disable forms when "disableForms" or "disableRefineForms" is true. b. Do not show filters, until results query returns, but show results while refine is loading. c. Deleted old, unused code. 5. newSearchPage.component.ts: a. Added fields "@Input() disableRefineForms: boolean = false;", "@Input() sortedByChanged: string = "";", "@Input() resultsPerPageChanged: number;" b. When results per page or sortBy change, do not upadate immediately searchUtils values - do not query for refine when these change (there is still a bug here). git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@59155 d315682c-612b-4755-9ff5-7f18f6832af3
2020-07-21 15:48:55 +02:00
</div>
</div>
<search-paging [type]="type" [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults"
[searchUtils]="searchUtils" [results]="results" [baseUrl]="searchUtils.baseUrl"
[parameterNames]="parameterNames" [parameterValues]="parameterValues"
[isDisabled]="disabled">
</search-paging>
</div>
<div
*ngIf="(searchUtils.page <= pagingLimit) || (searchUtils.totalResults <= searchUtils.size*pagingLimit)"
class="uk-margin">
<search-result *ngIf="( entityType !='community' && entityType != 'stakeholder') && usedBy == 'search'"
[results]="results"
[status]=searchUtils.status
[type]="entityType"
[showLoading]="true" [properties]=properties [showImpactFactors]="(customFilter &&
customFilter.queryFieldName == 'communityId' && (customFilter.valueId ==
'elixir-gr' || customFilter.valueId == 'inspired-ris'))">
</search-result>
<deposit-result *ngIf="usedBy == 'deposit'"
[results]="results"
[status]="searchUtils.status"
[type]="entityType"
[zenodoInformation]="zenodoInformation"
[properties]=properties>
</deposit-result>
<orcid-result *ngIf="usedBy == 'orcid'"
[results]="results"
[status]="searchUtils.status"
[type]="entityType"
[properties]=properties>
</orcid-result>
<portal-search-result
*ngIf="(entityType == 'community' || entityType == 'stakeholder') && usedBy == 'search'"
[results]="results"
[status]="searchUtils.status"
[type]="entityType"
[showType]="entityType == 'stakeholder'"
[showLoading]="true" [properties]=properties>
</portal-search-result>
</div>
<div [class]="searchUtils.page > pagingLimit ? 'search-results' : ''"
*ngIf="(searchUtils.page >= pagingLimit) && (searchUtils.totalResults > searchUtils.size*pagingLimit)">
<p class="uk-alert-warning" uk-alert>For more results please try a new, more specific query</p>
</div>
<div class="uk-margin-medium-top">
<search-paging [type]="type" [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults"
[searchUtils]="searchUtils" [results]="results" [baseUrl]="searchUtils.baseUrl"
[parameterNames]="parameterNames" [parameterValues]="parameterValues"
[isDisabled]="disabled">
</search-paging>
</div>
<div *ngIf="showIndexInfo && searchUtils.status !== errorCodes.LOADING"
class="uk-margin-small-top uk-grid uk-child-width-1-2">
<!-- Last Index Info-->
<div class="">
<img src="assets/common-assets/graph.svg" style="opacity: 0.4; width:20px; height:22px" loading="lazy"
alt="graph">
<span class="uk-margin-small-left uk-text-baseline uk-text-muted">Powered by <a
href="https://graph.openaire.eu" class="graph-color">OpenAIRE Research Graph</a></span>
</div>
<div class="uk-text-right">
<span *ngIf="indexUpdateDate" class="uk-text-baseline uk-text-muted">
<a *ngIf="properties.showLastIndexInformationLink"
class="uk-link"
[href]="properties.lastIndexInformationLink" target="_blank">
Last update
</a><span *ngIf="!(properties.showLastIndexInformationLink) ">
Last update
</span>
of records in OpenAIRE: {{indexUpdateDate | date: 'MMM dd, yyyy'}}
</span>
</div>
</div>
</div>
[Trunk | Library]: 1. searchUtils.class.ts: In SearchUtilsClass added field "refineStatus:number = 1;" for refine queries. 2. searchResultsPerPage.component.ts & searchSorting.component.ts: [Bug fix] In EventEmitter (value change), emit raw value, not object with field "value". 3. searchDataProviders.component.ts & searchOrganizations.component.ts & searchProjects.component.ts & searchResearchResults.component.ts: a. Add subscriptions in array to unsubscribe in ngOnDestroy. b. Get properties from environment (no service needed). c. Separate queries for refine and results. d. Do not call refine query when page, results per page, sortBy change (there is still a bug here). e. For refine query, added field "disableRefineForms" default set to false - passed in <new-search-page>. 4. newSearchPage.component.html: a. Disable forms when "disableForms" or "disableRefineForms" is true. b. Do not show filters, until results query returns, but show results while refine is loading. c. Deleted old, unused code. 5. newSearchPage.component.ts: a. Added fields "@Input() disableRefineForms: boolean = false;", "@Input() sortedByChanged: string = "";", "@Input() resultsPerPageChanged: number;" b. When results per page or sortBy change, do not upadate immediately searchUtils values - do not query for refine when these change (there is still a bug here). git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@59155 d315682c-612b-4755-9ff5-7f18f6832af3
2020-07-21 15:48:55 +02:00
<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
[texts]="pageContents['bottom']"></helper>
</div>
</div>
</div>
</div>
</div>
2022-03-15 15:29:59 +01:00
</ng-template>
</div>
<modal-alert #removeCustomFilter (alertOutput)="closeCustomFilterModal()"></modal-alert>