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

Update search componenents with new theme

This commit is contained in:
Konstantinos Triantafyllou 2022-01-20 11:19:44 +02:00
parent 71800f06c9
commit 78ee2e4bcd
10 changed files with 482 additions and 535 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -131,34 +131,26 @@
</button>
</div>
</form>
<div *ngIf="simpleView">
<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'">
<form [class.uk-disabled]="isDisabled">
<div class="uk-grid uk-grid-small uk-flex uk-flex-center" uk-grid>
<div *ngIf="entitiesSelection">
<entities-selection *ngIf="entitiesSelection" [simpleView]="true" [currentEntity]="entityType"
[properties]="properties"
(selectionChange)=" simpleEntityChanged($event)"
[onChangeNavigate]="true" [customFilter]="customFilter"></entities-selection>
</div>
<div class="uk-padding-remove-left uk-margin-small-top">
<div>
<div *ngIf="selectedFields[0]" class="uk-inline">
<a *ngIf="selectedFields[0].value.length > 0" class="uk-form-icon uk-form-icon-flip"
(click)="selectedFields[0].value = ''"
uk-icon="icon: close"></a>
<input type="text" class="uk-input uk-width-xlarge@l uk-width-large@m uk-width-medium"
[placeholder]="formPlaceholderText" aria-describedby="sizing-addon2"
[(ngModel)]="selectedFields[0].value" name="keyword">
[placeholder]="formPlaceholderText" role="searchbox"
[(ngModel)]="selectedFields[0].value" name="keyword"/>
</div>
<!-- <div class=" uk-width-xlarge@l uk-width-large@m uk-width-medium" [class.quickSelectionsBox]="(resultTypes || quickFilter)">
<quick-selections [resultTypes]="resultTypes" (typeChange)="queryChanged()" [isDisabled]="isDisabled"
[quickFilter]="quickFilter" [QFselected]="(quickFilter)?quickFilter.selected:null"
[properties]="properties">
</quick-selections>
</div>-->
</div>
<div class="uk-padding-remove-left uk-margin-small-top">
<div>
<button (click)="simpleKeywordChanged(null)" type="submit"
class="uk-button portal-button uk-margin-small-left uk-text-bold uk-padding uk-padding-remove-top uk-padding-remove-bottom">
Search

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

@ -3,20 +3,20 @@
<ng-container *ngIf="customFilter && ((customFilterEnabled &&
refineFields.indexOf(customFilter.queryFieldName) ==
-1) ||customFilter.isHiddenFilter)">
<span class="uk-width-small">
<span class="uk-width-auto">
<span class="uk-label uk-label-primary uk-flex uk-flex-middle">
<span class="uk-margin-small-right uk-width-expand uk-text-nowrap uk-text-truncate">{{customFilter.valueName}}</span>
<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-small">
<a [attr.uk-tooltip]="'Remove ' + type.name" (click)="removeResultType(type.id)" [class.uk-disabled]="disableForms || disableRefineForms">
<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-label-primary uk-flex uk-flex-middle">
<span class="uk-margin-small-right uk-width-expand uk-text-nowrap uk-text-truncate">{{type.name}}</span>
<icon name="close" flex="true"></icon>
<span class="uk-margin-small-right uk-width-expand">{{type.name}}</span>
<icon name="close" ratio="0.5" flex="true"></icon>
</span>
</a>
</span>
@ -26,12 +26,12 @@
<ng-container *ngIf="selectedRangeFilters > 0">
<ng-container *ngFor="let filter of rangeFilters ">
<ng-container *ngIf="filter.selectedFromAndToValues">
<span class="uk-width-small">
<span class="uk-width-auto">
<a [attr.uk-tooltip]="'Remove ' + filter.selectedFromAndToValues" (click)="removeRangeFilter(filter)"
[class.uk-disabled]="disableForms || disableRefineForms">
[class.uk-disabled]="disabled">
<span class="uk-label uk-label-primary uk-flex uk-flex-middle">
<span class="uk-margin-small-right uk-width-expand uk-text-nowrap uk-text-truncate">{{filter.selectedFromAndToValues}}</span>
<icon name="close" flex="true"></icon>
<span class="uk-margin-small-right uk-width-expand">{{filter.selectedFromAndToValues}}</span>
<icon name="close" ratio="0.5" flex="true"></icon>
</span>
</a>
</span>
@ -41,11 +41,11 @@
<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-small">
<a [attr.uk-tooltip]="'Remove ' + value.name" (click)="removeFilter(value, filter)" [class.uk-disabled]="disableForms || disableRefineForms">
<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-label-primary uk-flex uk-flex-middle">
<span class="uk-margin-small-right uk-width-expand uk-text-nowrap uk-text-truncate">{{value.name}}</span>
<icon name="close" flex="true"></icon>
<span class="uk-margin-small-right uk-width-expand">{{value.name}}</span>
<icon name="close" ratio="0.5" flex="true"></icon>
</span>
</a>
</span>
@ -55,62 +55,46 @@
</h1>
</ng-template>
<ng-template #filters_column>
<div [class.filterLoading]="(disableForms || disableRefineForms)">
<div class="uk-width-1-1 uk-margin-top" >
<div class="uk-grid uk-flex uk-flex-bottom">
<!-- *ngIf="(selectedRangeFilters+selectedFilters + selectedTypesNum > 0)
|| (filters.length > 0 && (results.length > 0 || disableForms))"-->
<h6 class="uk-text-bold">
Filters
</h6>
<a *ngIf="(selectedRangeFilters+selectedFilters + selectedTypesNum)>1" (click)="clearFilters()"
[class]="((disableForms || disableRefineForms)?'uk-disabled uk-link-muted':'')+' portal-link ' + 'uk-width-1-2'">
<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="selectedRangeFilters+selectedFilters + selectedTypesNum > 0 || (customFilter && (customFilter.selected
== true || customFilter.isHiddenFilter))"
class="uk-margin-small-top uk-margin-medium-bottom">
<ng-container *ngTemplateOutlet="selected_filters_pills; context: {}"></ng-container>
</div>
</div>
<div *ngIf="searchUtils.refineStatus == errorCodes.LOADING && existingFiltersWithValues === 0"
class="'uk-animation-fade uk-margin-top uk-width-1-1" role="alert">
<span class="loading-gif uk-align-center" ></span>
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-divider' + (selectedRangeFilters == 0 && selectedFilters == 0 ? ' uk-margin-small-top' : '')">
<!-- searchUtils.refineStatus == errorCodes.DONE &&-->
<ng-container *ngIf="filters.length > 0 && filters[0].values.length >0 && filters[0].filterId == 'resultbestaccessright'">
<li>
<ul *ngIf="!showUnknownFilters" class="uk-list filters">
<li *ngIf="filters.length > 0 && filters[0].values.length >0 && filters[0].filterId == 'resultbestaccessright'">
<search-filter [filterValuesNum]="filterValuesNum" [showMoreInline]="showMoreFilterValuesInline"
[isDisabled]="disableForms || disableRefineForms"
[isDisabled]="disabled"
[filter]="filters[0]" [showResultCount]=showResultCount
(onFilterChange)="filterChanged($event)" [quickFilter]="quickFilter"
[actionRoute]="true"></search-filter>
</li>
</ng-container>
<li *ngIf="resultTypes && (filters.length > 0)">
<quick-selections [resultTypes]="resultTypes" (typeChange)="queryChanged($event)"
[isDisabled]="disableForms || disableRefineForms" [vertical]="true"
[isDisabled]="disabled" [vertical]="true"
[properties]="properties" [actionRoute]="true">
</quick-selections>
</li>
<ng-container *ngFor="let filter of rangeFilters">
<li>
<range-filter [isDisabled]="disableForms || disableRefineForms" [filter]="filter"
<li *ngFor="let filter of rangeFilters">
<range-filter [isDisabled]="disabled" [filter]="filter"
(onFilterChange)="filterChanged($event)" [actionRoute]="true"></range-filter>
</li>
</ng-container>
<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]="disableForms || disableRefineForms"
[isDisabled]="disabled"
[filter]="filter" [showResultCount]=showResultCount
(onFilterChange)="filterChanged($event)" [actionRoute]="true"></search-filter>
</li>
@ -118,6 +102,7 @@
</ul>
</div>
</ng-template>
<!-- TODO - Kostis Clean up -->
<div *ngIf="!includeOnlyResultsAndFilter" [class]="usedBy != 'deposit' && usedBy != 'orcid' && (!customFilter || customFilter.queryFieldName != 'communityId') ?
(stickyForm?'':' uk-position-relative ') :
(+ (stickyForm?'':' uk-section') +' uk-padding-remove-bottom uk-padding-remove-top ' +
@ -130,21 +115,22 @@
+ (usedBy != 'deposit' && usedBy != 'orcid' && (!customFilter || customFilter.queryFieldName != 'communityId') && !dashboard ?
' image-front-topbar searchFormMinHeight uk-padding-remove-bottom uk-section' : '')
+(simpleView?'':' advancedSearchFormBackground ')">
<!-- TODO - Kostis until here-->
<div class="uk-width-1-1">
<breadcrumbs *ngIf="showBreadcrumb && entityType!='community'"
addClass=" uk-margin-large-left uk-margin-remove-bottom uk-margin-small-top"
[breadcrumbs]="breadcrumbs"></breadcrumbs>
<div class="uk-container uk-container-large">
<div class="uk-padding-small">
<breadcrumbs *ngIf="showBreadcrumb" [breadcrumbs]="breadcrumbs"></breadcrumbs>
</div>
</div>
<div class="uk-position-relative">
<div [class]="'uk-container '+(customFilter && customFilter.queryFieldName ==
'communityId'?' uk-margin-large-bottom ':'uk-margin-top')+
(entityType === 'community' ||entityType === 'stakeholder'?' uk-position-relative':'')" id="searchForm">
<div class="uk-container uk-container-large uk-section" id="searchForm">
<advanced-search-form
[entityType]="entityType"
[fieldIds]="fieldIds"
[fieldIdsMap]="fieldIdsMap"
[selectedFields]="selectedFields"
(queryChange)="queryChanged($event)"
[isDisabled]="disableForms || disableRefineForms"
[isDisabled]="disabled"
[simpleSearchLink]="simpleSearchLink"
[advancedSearchLink]="advancedSearchLink"
[advancedSearchLinkParameters]
@ -154,9 +140,6 @@
[showSwitchSearchLink]="showSwitchSearchLink" [customFilter]="customFilter"
>
</advanced-search-form>
<div *ngIf="entityType === 'community' || entityType === 'stakeholder' " class="uk-position-center-right uk-visible@m">
<img src="assets/common-assets/common/search.svg" class="uk-align-center" width="141" height="171" loading="lazy">
</div>
</div>
</div>
</div>
@ -164,23 +147,16 @@
</div>
<schema2jsonld *ngIf="url" [URL]="url" type="search" [name]=pageTitleWithFilters
[searchAction]=false [description]="metaDescription" ></schema2jsonld>
<div id="tm-main" class=" tm-middle" [class.uk-margin-top]="stickyForm">
<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 ">
<!-- <breadcrumbs *ngIf="showBreadcrumb && entityType!='community'"-->
<!-- addClass="uk-margin-large-left uk-margin-remove-bottom uk-margin-small-top" [breadcrumbs]="breadcrumbs"></breadcrumbs>-->
<div class="uk-container uk-container-large">
<div>
<breadcrumbs *ngIf="showBreadcrumb && entityType=='community'"
addClass=" " [breadcrumbs]="breadcrumbs"></breadcrumbs>
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
[texts]="pageContents['top']"></helper>
<div [class]="(showRefine && !properties.isDashboard)? 'uk-width-4-5@m uk-width-4-5@l uk-width-1-1@s' :'uk-width-1-1'">
<div *ngIf="showRefine && !dashboard" class="uk-offcanvas-content uk-hidden@m uk-margin-top">
<a href="#offcanvas-usage" uk-toggle>
<div *ngIf="showRefine && !dashboard" class="uk-hidden@m uk-margin-top">
<a href="#mobile-filters" uk-toggle>
<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">
@ -197,18 +173,13 @@
</span>
<span>Filters <span
*ngIf="(selectedRangeFilters+selectedFilters) > 0">({{(selectedRangeFilters + selectedFilters)}})</span></span>
<!-- <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1">-->
<!-- <rect x="6" y="4" width="12" height="1"></rect><rect x="6" y="9" width="12" height="1"></rect>-->
<!-- <rect x="6" y="14" width="12" height="1"></rect>-->
<!-- <rect x="2" y="4" width="2" height="1"></rect>-->
<!-- <rect x="2" y="9" width="2" height="1"></rect>-->
<!-- <rect x="2" y="14" width="2" height="1"></rect>-->
<!-- </svg>-->
</a>
<div #offcanvas_element id="offcanvas-usage" uk-offcanvas overlay style="z-index:10000;">
<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">
<button class="uk-offcanvas-close" type="button" uk-close></button>
<a class="uk-offcanvas-close uk-link-text">
<icon name="close" visuallyHidden="close Filters"></icon>
</a>
<div class="uk-width-1-1">
<ng-container *ngTemplateOutlet="filters_column; context: {}"></ng-container>
</div>
@ -222,7 +193,7 @@
<a *ngIf="showSwitchSearchLink && advancedSearchLink" routerLinkActive="router-link-active"
[routerLink]="advancedSearchLink" style="z-index:1;"
[queryParams]="this.routerHelper.createQueryParams(this.parameterNames, this.parameterValues)"
[class]="((disableForms || disableRefineForms)?' uk-disabled uk-link-muted ':'') +' portal-link uk-float-right '">Advanced
[class]="((disabled)?' uk-disabled uk-link-muted ':'') +' portal-link uk-float-right '">Advanced
search
</a>
<!-- <quick-selections [resultTypes]="resultTypes"
@ -231,16 +202,8 @@
[quickFilter]="quickFilter" [QFselected]="(quickFilter)?quickFilter.selected:null"
[properties]="properties">
</quick-selections>-->
</div>
<div class="uk-grid helper-grid uk-padding-small uk-padding-remove-vertical uk-margin-large-bottom">
<!-- <div *ngIf="searchUtils.status == errorCodes.LOADING && filters.length == 0;-->
<!-- else elseGridBlock"-->
<!-- class="'uk-animation-fade uk-margin-top uk-width-1-1" role="alert">-->
<!-- <span class="loading-gif uk-align-center" ></span>-->
<!-- </div>-->
<!-- <div>-->
<!-- <ng-template #elseGridBlock>-->
<div *ngIf="showRefine && !properties.isDashboard
&& (results.length > 0
|| (searchUtils.refineStatus == errorCodes.LOADING && searchUtils.status != errorCodes.LOADING)
@ -282,28 +245,32 @@
<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)"
[isDisabled]="disableForms || disableRefineForms">
[isDisabled]="disabled">
</search-results-per-page>
<search-sorting *ngIf="sort"
[entityType]="entityType" [sortBy]="searchUtils.sortBy"
(sortByChange)="sortByChanged($event)"
[isDisabled]="disableForms || disableRefineForms">
[isDisabled]="disabled">
</search-sorting>
</div>
<div *ngIf="showDownload" class="uk-width-auto@m uk-margin-small-bottom">
<search-download
*ngIf="( entityType !='community' && entityType != 'stakeholder') && usedBy == 'search'"
[isDisabled]="disableForms || disableRefineForms"
[isDisabled]="disabled"
[type]="csvPath" [csvParams]="csvParams" [totalResults]="searchUtils.totalResults"
[piwikSiteId]="piwikSiteId">
</search-download>
</div>
</div>
<div *ngIf="selectedRangeFilters+selectedFilters + selectedTypesNum > 0 || (customFilter && (customFilter.selected == true || customFilter.isHiddenFilter))"
class="uk-margin-small-top uk-margin-medium-bottom">
<ng-container *ngTemplateOutlet="selected_filters_pills;"></ng-container>
</div>
<search-paging [type]="type" [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults"
[(searchUtils)]="searchUtils" [(results)]="results" [(baseUrl)]="searchUtils.baseUrl"
[(parameterNames)]="parameterNames" [(parameterValues)]="parameterValues"
[isDisabled]="disableForms || disableRefineForms">
[isDisabled]="disabled">
</search-paging>
</div>
<div *ngIf="(searchUtils.page <= pagingLimit) || (searchUtils.totalResults <= searchUtils.size*pagingLimit)" class="uk-margin-large-bottom">
@ -352,7 +319,7 @@
<search-paging [type]="type" [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults"
[(searchUtils)]="searchUtils" [(results)]="results" [(baseUrl)]="searchUtils.baseUrl"
[(parameterNames)]="parameterNames" [(parameterValues)]="parameterValues"
[isDisabled]="disableForms || disableRefineForms">
[isDisabled]="disabled">
</search-paging>
</div>
<div *ngIf=" showIndexInfo && searchUtils.status !== errorCodes.LOADING"

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

@ -32,7 +32,7 @@ declare var UIkit: any;
templateUrl: 'newSearchPage.component.html'
})
export class NewSearchPageComponent {
@ViewChild('offcanvas_element') offcanvasElement: ElementRef;
@ViewChild('mobileFilters') mobileFilters: ElementRef;
@Input() piwikSiteId = null;
@Input() hasPrefix: boolean = true;
@Input() prefix: string = "OpenAIRE | ";
@ -206,6 +206,10 @@ export class NewSearchPageComponent {
});
}
get disabled() {
return this.disableForms || this.disableRefineForms
}
updateMeta(title:string) {
let filterArray = [];
let filtervalues = [];
@ -294,8 +298,8 @@ export class NewSearchPageComponent {
}
goTo(page: number = 1, scroll:boolean = true) {
if(this.offcanvasElement && (typeof document !== 'undefined')) {
UIkit.offcanvas(this.offcanvasElement.nativeElement).hide();
if(this.mobileFilters && (typeof document !== 'undefined')) {
UIkit.offcanvas(this.mobileFilters.nativeElement).hide();
}
this.searchUtils.page = page;

3
searchPages/searchUtils/newSearchPage.module.ts
View File

@ -29,6 +29,7 @@ import {AlertModalModule} from "../../utils/modal/alertModal.module";
import {ClickModule} from "../../utils/click/click.module";
import {SearchResultsForOrcidModule} from "../../orcid/recommend-orcid-links/searchResultsForOrcid.module";
import {IconsModule} from "../../utils/icons/icons.module";
import {LoadingModule} from "../../utils/loading/loading.module";
@NgModule({
imports: [
@ -38,7 +39,7 @@ import {IconsModule} from "../../utils/icons/icons.module";
SearchFilterModule, RangeFilterModule,
PiwikServiceModule, HelperModule, Schema2jsonldModule, SEOServiceModule, SearchResultsModule,
SearchResultsInDepositModule, SearchResultsForOrcidModule,
AdvancedSearchFormModule, QuickSelectionsModule, BreadcrumbsModule, AlertModalModule, ClickModule, IconsModule
AdvancedSearchFormModule, QuickSelectionsModule, BreadcrumbsModule, AlertModalModule, ClickModule, IconsModule, LoadingModule
],
declarations: [
NewSearchPageComponent

93
searchPages/searchUtils/portal-search-result.component.html
View File

@ -1,36 +1,31 @@
<ul [class]="'uk-list uk-margin ' + custom_class" uk-height-match="target: .portalSearchCard; row: false">
<ul class="uk-list uk-list-large" [class]="'uk-list uk-margin ' + custom_class" uk-height-match="target: .uk-card-default; row: false">
<errorMessages [status]="[status]" [type]="'results'"></errorMessages>
<li *ngFor="let result of results" class="uk-animation-fade uk-margin-auto">
<div class="uk-card portalSearchCard uk-position-relative uk-flex uk-flex-column uk-flex-center" [class.disabled]="!hasPermission(result)">
<div class="badges">
<div class="uk-card uk-card-default uk-card-body uk-card-hover uk-position-relative uk-flex uk-flex-column uk-flex-center" [class.disabled]="!hasPermission(result)">
<div role="alert">
<div *ngIf="type === 'community' && result.isSubscribed"
class="portal-card-badge uk-text-center">
class="uk-alert-primary uk-padding-small uk-position-top-left uk-text-center">
<span>Subscribed</span>
</div>
<!-- <div *ngIf="type === 'community' && result.status == 'manager'"
class="private-card-badge uk-text-center ">
<span>Private</span>
</div> -->
</div>
<div *ngIf="type === 'community' && result.status === 'manager'"
class="uk-position-top-right uk-margin-small-top uk-margin-right uk-flex uk-flex-middle">
class="uk-position-top-right uk-margin-top uk-margin-right uk-flex uk-flex-middle">
<icon [name]="visibilityIcon.get('RESTRICTED')"></icon>
<span class="space uk-text-small uk-text-capitalize">restricted</span>
</div>
<div *ngIf="type === 'community' && result.status === 'hidden'"
class="uk-position-top-right uk-margin-small-top uk-margin-right uk-flex uk-flex-middle">
class="uk-position-top-right uk-margin-top uk-margin-right uk-flex uk-flex-middle">
<icon [name]="visibilityIcon.get('PRIVATE')"></icon>
<span class="space uk-text-small uk-text-capitalize">private</span>
</div>
<div *ngIf="result.visibility && result.visibility !== 'PUBLIC'"
class="uk-position-top-right uk-margin-small-top uk-margin-right uk-flex uk-flex-middle">
class="uk-position-top-right uk-margin-top uk-margin-right uk-flex uk-flex-middle">
<icon [name]="visibilityIcon.get(result.visibility)"></icon>
<span class="space uk-text-small uk-text-capitalize">{{result.visibility.toLowerCase()}}</span>
</div>
</div>
<div class="uk-grid uk-flex uk-flex-middle" uk-grid>
<a *ngIf="directLink && hasPermission(result)" [href]="(type === 'community')?getCommunityPageUrl(result):getStakeholderPageUrl(result)"
target="_blank"
class="uk-width-1-5@s">
target="_blank" class="uk-width-1-5@s">
<ng-container *ngTemplateOutlet="resultPreview; context: {result: result}"></ng-container>
</a>
<a *ngIf="!directLink && hasPermission(result)"
@ -42,58 +37,50 @@
<ng-container *ngTemplateOutlet="resultPreview; context: {result: result}"></ng-container>
</div>
<div class="uk-width-expand">
<div *ngIf="type === 'community'" [title]="result.shortTitle" class="uk-text-large uk-grid" uk-grid>
<a *ngIf="directLink && hasPermission(result)" [href]="getCommunityPageUrl(result)" target="_blank"
[class]="(result.isManager)?'uk-width-3-4@s portal-link':'portal-link'">
<div *ngIf="type === 'community'" [title]="result.shortTitle" class="uk-margin-bottom">
<a *ngIf="directLink && hasPermission(result)" [href]="getCommunityPageUrl(result)" class="uk-h5 uk-link-text" target="_blank">
{{(result.title) ? result.title : result.shortTitle}}
</a>
<a *ngIf="!directLink && hasPermission(result)" (click)="confirmModalOpen(result)" [class]="(result.isManager)?'uk-width-3-4@s':''"
class="portal-link">
<a *ngIf="!directLink && hasPermission(result)" (click)="confirmModalOpen(result)" class="uk-h5 uk-link-text">
{{(result.title) ? result.title : result.shortTitle}}
</a>
<div *ngIf="!hasPermission(result)" [class.uk-width-3-4@s]="result.isManager">
<h5 *ngIf="!hasPermission(result)">
{{(result.title) ? result.title : result.shortTitle}}
</h5>
</div>
</div>
<div *ngIf="type === 'stakeholder'" [title]="result.index_shortName" class="uk-text-large uk-grid">
<a *ngIf="directLink && hasPermission(result)" [href]="getStakeholderPageUrl(result)" target="_blank"
[class.uk-width-3-4@s]="result.isManager" class="portal-link">
<div *ngIf="type === 'stakeholder'" [title]="result.index_shortName" class="uk-margin-bottom">
<a *ngIf="directLink && hasPermission(result)" [href]="getStakeholderPageUrl(result)" class="uk-h5 uk-link-text" target="_blank">
{{(result.name) ? result.name : result.index_shortName}}
</a>
<a *ngIf="!directLink && hasPermission(result)" (click)="confirmModalOpen(result)" [class.uk-width-3-4@s]="result.isManager"
class="portal-link">
<a *ngIf="!directLink && hasPermission(result)" (click)="confirmModalOpen(result)" class="uk-h5 uk-link-text">
{{(result.name) ? result.name : result.index_shortName}}
</a>
<div *ngIf="!hasPermission(result)" [class.uk-width-3-4@s]="result.isManager">
<h5 *ngIf="!hasPermission(result)">
{{(result.name) ? result.name : result.index_shortName}}
</h5>
</div>
<div *ngIf="result.description" class="uk-margin-bottom multi-line-ellipsis lines-2">
<p class="uk-text-justify">
{{result.description}}
</p>
</div>
<div class="uk-margin-small-top uk-text-small">
<div class="uk-text-small uk-flex uk-flex-middle">
<span class="uk-text-muted" *ngIf="result.date || result.creationDate">Creation Date: </span>
<span class="space" *ngIf="result.date">{{result.date | date:'dd-MM-yyyy'}}</span>
<span class="space" *ngIf="result.creationDate">{{result.creationDate | date:'dd-MM-yyyy'}}</span>
<span *ngIf="type === 'community' && showType && result.type && result.type != ''" class="uk-margin-left">
<span class="uk-margin-small-left" *ngIf="result.date">{{result.date | date:'dd-MM-yyyy'}}</span>
<span class="uk-margin-small-left" *ngIf="result.creationDate">{{result.creationDate | date:'dd-MM-yyyy'}}</span>
<span *ngIf="type === 'community' && showType && result.type" class="uk-margin-left">
<span class="uk-text-muted">Type:</span>
<span
class="space uk-text-capitalize">{{(result.type == 'ri') ? 'Research Initiative' : 'Research Community'}}</span>
<span class="uk-margin-small-left uk-text-capitalize">{{mapType(result.type)}}</span>
</span>
<span *ngIf="type === 'stakeholder' && result.type && result.type != ''" class="uk-margin-left">
<span *ngIf="type === 'stakeholder' && result.type" class="uk-margin-left">
<span class="uk-text-muted">Type:</span>
<span
class="space uk-text-capitalize">{{(result.type == 'ri') ? 'research initiative' : result.type}}</span>
<span class="uk-margin-small-left uk-text-capitalize">{{mapType(result.type)}}</span>
</span>
</div>
<div *ngIf="result.description">
<div class="text-justify descriptionText uk-text-small uk-text-muted uk-margin-auto-right">
<!-- [title]="result.description">-->
{{_formatDescription(result.description)}}
</div>
</div>
</div>
<manage *ngIf="type === 'community' && result.isManager" [communityId]="result.communityId"
class="uk-margin-large-right"></manage>
<manage *ngIf="type === 'stakeholder' && result.isManager" [alias]="result.alias"
class="uk-margin-large-right"></manage>
<div *ngIf="result.isManager" class="uk-flex uk-flex-right uk-margin-top">
<manage [communityId]="result.communityId" [alias]="result.alias"></manage>
</div>
</div>
</li>
@ -105,20 +92,6 @@
</modal-alert>
<ng-template #resultPreview let-result="result">
<div class="uk-flex uk-flex-center">
<img *ngIf="result.logoUrl"
[src]="result | logoUrl"
alt="{{(result.title)?result.title:result.shortTitle}} logo" loading="lazy">
<span *ngIf="!result.logoUrl" class="uk-icon">
<svg viewBox="0 0 20 20" class="uk-width-1-1" xmlns="http://www.w3.org/2000/svg" ratio="2.5"> <circle fill="none"
stroke="#000"
stroke-width="1.1"
cx="7.7" cy="8.6"
r="3.5"></circle> <path
fill="none" stroke="#000" stroke-width="1.1"
d="M1,18.1 C1.7,14.6 4.4,12.1 7.6,12.1 C10.9,12.1 13.7,14.8 14.3,18.3"></path> <path fill="none"
stroke="#000"
stroke-width="1.1"
d="M11.4,4 C12.8,2.4 15.4,2.8 16.3,4.7 C17.2,6.6 15.7,8.9 13.6,8.9 C16.5,8.9 18.8,11.3 19.2,14.1"></path></svg>
</span>
<img *ngIf="result.logoUrl" [src]="result | logoUrl" [alt]="((result.title)?result.title:result.shortTitle) + ' logo'" loading="lazy">
</div>
</ng-template>

26
searchPages/searchUtils/portal-search-result.component.ts
View File

@ -6,7 +6,6 @@ import {CommunityInfo} from "../../connect/community/communityInfo";
import {Router} from "@angular/router";
import {LocalStorageService} from "../../services/localStorage.service";
import {Stakeholder, StakeholderInfo, Visibility} from "../../monitor/entities/stakeholder";
import {StringUtils} from "../../utils/string-utils.class";
@Component({
selector: 'portal-search-result',
@ -21,13 +20,11 @@ export class PortalSearchResultComponent implements OnInit{
@Input() showLoading: boolean = false;
@Input() custom_class: string = "search-results";
@Input() properties: EnvProperties;
@Input() maxCharacters: number = 150;
@ViewChild('AlertModal') modal;
visibilityIcon: Map<Visibility, string> = new Map<Visibility, string> ([
["PRIVATE", 'lock'],
["RESTRICTED", 'group']
]);
public urlParam: string;
public errorCodes: ErrorCodes = new ErrorCodes();
public routerHelper: RouterHelper = new RouterHelper();
@ -50,6 +47,18 @@ export class PortalSearchResultComponent implements OnInit{
});
}
mapType(type: string) {
if(type === 'ri') {
return 'Research Initiative';
} else if(type === 'community') {
return 'Research Community'
} else if(type === 'organization') {
return 'Institution';
} else {
return type;
}
}
hasPermission(result: CommunityInfo & StakeholderInfo) {
if(this.type === "community") {
return result.status === "all" || (result.status === "manager" && result.isManager);
@ -67,11 +76,6 @@ export class PortalSearchResultComponent implements OnInit{
return this.properties.environment != "development";
}
public _formatDescription(description) {
let descr: string = StringUtils.HTMLToString(description);
return (((descr).length > this.maxCharacters) ? (descr.substring(0, (this.maxCharacters - ('...').length)) + "...") : descr);
}
public confirmModalOpen(result: CommunityInfo & Stakeholder) {
this.selected = result;
this.modal.cancelButton = true;
@ -90,15 +94,13 @@ export class PortalSearchResultComponent implements OnInit{
}
public getCommunityPageUrl(communityInfo: CommunityInfo): string {
let url = '';
if (this.isProduction()) {
url = 'https://' + this.getEnvironmentPrefix() + communityInfo.communityId + '.openaire.eu';
return 'https://' + this.getEnvironmentPrefix() + communityInfo.communityId + '.openaire.eu';
} else {
url = this.router.createUrlTree(['/'], {
return this.router.createUrlTree(['/'], {
queryParams: {'communityId': communityInfo.communityId}
}).toString();
}
return url;
}
public getStakeholderPageUrl(stakeholder: Stakeholder) {

7
searchPages/searchUtils/quick-selections.component.ts
View File

@ -29,11 +29,8 @@ import {ActivatedRoute, Router} from "@angular/router";
</span>
</div>
</div>
<div *ngIf="vertical && (resultTypes || quickFilter)"
[class]="(isDisabled ? 'uk-disabled' : '') + ' uk-margin-small-bottom uk-list uk-list-divider'">
<search-filter
[isDisabled]="isDisabled"
[filter]="resultTypes" [showResultCount]='false'
<div *ngIf="vertical && (resultTypes || quickFilter)" [class.uk-disabled]="isDisabled">
<search-filter [isDisabled]="isDisabled" [filter]="resultTypes" [showResultCount]='false'
(onFilterChange)="changed()" [actionRoute]="actionRoute"></search-filter>
</div>

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

@ -1,22 +1,16 @@
<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">
<h6 class="uk-margin-bottom-remove" title = "{{filter.title}}">{{_formatTitle(filter.title,filter.values.length)}}</h6>
<a *ngIf="filter.countSelectedValues>0" (click)="clearFilter()"
[class]="((isDisabled)?'uk-disabled':'') + ' portal-link '">
Clear
</a>
<div *ngIf="filter.values.length >0">
<div class="uk-flex uk-flex-middle uk-margin-bottom">
<h6 [title]="filter.title"
class="uk-margin-right uk-margin-remove-bottom">{{_formatTitle(filter.title, filter.values.length)}}</h6>
<a *ngIf="filter.countSelectedValues>0" class="uk-text-small" (click)="clearFilter()" [class.uk-disabled]="isDisabled">Clear</a>
</div>
<div aria-expanded="false">
<div>
<ng-container>
<div *ngFor="let value of getSelectedAndTopValues(filter, filterValuesNum)"
class="uk-animation-fade filterItem searchFilterItem uk-text-small">
<div title = "{{value.name}}">
class="uk-animation-fade uk-text-small uk-margin-small-bottom">
<div [title]="value.name">
<ng-container *ngTemplateOutlet="input_label_wrapper; context: {filter: filter, value: value}"></ng-container>
</div>
</div>
</ng-container>
<div *ngIf=" addShowMore && (filter.values.length) > filterValuesNum">
<a
[class]="((isDisabled)?'uk-disabled uk-link-muted ':' portal-link ') + ' uk-margin-small-top'"
@ -59,7 +53,8 @@
<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">
<ng-container *ngTemplateOutlet="input_label_wrapper; context: {filter: filter, value: value}"></ng-container>
<ng-container
*ngTemplateOutlet="input_label_wrapper; context: {filter: filter, value: value}"></ng-container>
</div>
</ng-container>
</div>
@ -71,11 +66,10 @@
</div>
</div>
</div>
</div>
<ng-template #input_label let-filter="filter" let-value="value">
<label *ngIf="filter.filterType == 'checkbox' || filter.filterType == 'radio'"
[class]="(isDisabled || (showResultCount && value.number === 0)) ? 'uk-disabled' : ''">
<span *ngIf="filter.filterType == 'checkbox' || filter.filterType == 'radio'" class="uk-flex uk-flex-middle"
[class.uk-disabled]="isDisabled || (showResultCount && value.number === 0)">
<span>
<input *ngIf="filter.filterType == 'checkbox'" type="checkbox" class="uk-checkbox"
[disabled]="isDisabled || (showResultCount && value.number === 0)"
[(ngModel)]="value.selected" (ngModelChange)="filterChange(value.selected)"/>
@ -83,17 +77,17 @@
[disabled]="isDisabled || (showResultCount && value.number === 0)"
[name]="filter.filterId" [value]="value.id" [(ngModel)]="filter.radioValue"
(ngModelChange)="uniqueFilterChange(value)"/>
{{' '+_formatName(value)}}
<span *ngIf = "showResultCount === true" >
{{' ('+(value.number|number)+')'}}
</span>
</label>
<span class="uk-margin-small-left">
{{_formatName(value)}}
<span *ngIf="showResultCount">({{value.number|number}})</span>
</span>
</span>
</ng-template>
<ng-template #input_label_wrapper let-filter="filter" let-value="value">
<a *ngIf="actionRoute" class="filterLabel" [routerLink]="getRoute()"
[queryParams]="getParams(filter,value)"
[class]="(isDisabled || (showResultCount && value.number === 0)) ? 'uk-disabled uk-link-muted' : ''">
<a *ngIf="actionRoute" [routerLink]="getRoute()"
[queryParams]="getParams(filter,value)" class="uk-link-muted"
[class.uk-disabled]="disabled(value.number)" [class.uk-link-text]="!disabled(value.number)">
<ng-container *ngTemplateOutlet="input_label; context: {filter: filter, value: value}"></ng-container>
</a>
<ng-container *ngIf="!actionRoute">

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

@ -10,6 +10,7 @@ import {
import {Filter, Value} from './searchHelperClasses.class';
import {ActivatedRoute, Router} from "@angular/router";
import {SearchFields} from "../../utils/properties/searchFields";
@Component({
selector: 'search-filter',
templateUrl: 'searchFilter.component.html'
@ -41,11 +42,13 @@ export class SearchFilterComponent implements OnInit, OnChanges{
constructor(private _router: Router, private route: ActivatedRoute) {
}
ngOnDestroy() {
if (this.sub) {
this.sub.unsubscribe();
}
}
ngOnInit() {
this.sub = this.route.queryParams.subscribe(params => {
this.queryParams = Object.assign({}, params);
@ -79,6 +82,7 @@ export class SearchFilterComponent implements OnInit, OnChanges{
public _formatTitle(title, length) {
return (((title + " (" + length + ")").length > this._maxCharacters) ? (title.substring(0, (this._maxCharacters - (" (" + length + ")").length - ('...').length)) + "...") : title) + " (" + (length > 95 ? "100" : length) + ")";
}
public _formatName(value) {
//let maxLineLength = 24;
let maxLineLength = 35;
@ -103,6 +107,7 @@ export class SearchFilterComponent implements OnInit, OnChanges{
}
return true;
}
filterChange(selected: boolean) {
if (selected) {
this.filter.countSelectedValues++;
@ -113,6 +118,7 @@ export class SearchFilterComponent implements OnInit, OnChanges{
value: this.filter
});
}
uniqueFilterChange(value: Value) {
let tmp = value.selected;
value.selected = !tmp;
@ -130,6 +136,7 @@ export class SearchFilterComponent implements OnInit, OnChanges{
value: this.filter
});
}
clearFilter() {
for (var i = 0; i < this.filter.values.length; i++) {
this.filter.values[i].selected = false;
@ -188,6 +195,7 @@ export class SearchFilterComponent implements OnInit, OnChanges{
return selected;
}
getNotSelectedValues(filter, sortBy: string = "num"): any {
var notSselected = [];
for (var i = 0; i < filter.values.length; i++) {
@ -235,14 +243,20 @@ export class SearchFilterComponent implements OnInit, OnChanges{
this.isOpen = !this.isOpen;
}
disabled(value) {
return this.isDisabled || (this.showResultCount && value === 0);
}
getFilterName(value) {
let name = value.name + " (" + value.number.format() + ")";
console.log(name);
return name;
}
getRoute() {
return this._router.url.split("?")[0];
}
getParams(filter: Filter, value: Value) {
let params = Object.assign({}, this.queryParams);
/* let qf=false;
@ -273,6 +287,7 @@ export class SearchFilterComponent implements OnInit, OnChanges{
delete params['page'];
return params;
}
checkIfValueIndexOf(array, value) {
let encodedValue = encodeURIComponent(value);
if (array.indexOf(encodedValue) != -1) {
@ -283,6 +298,7 @@ export class SearchFilterComponent implements OnInit, OnChanges{
}
return -1;
}
getEntries(obj) {
if (!Object.entries) {

25
utils/manage/manage.component.ts
View File

@ -4,23 +4,24 @@ import {properties} from "../../../../environments/environment";
@Component({
selector: 'manage',
template: `
<a *ngIf="communityId" [href]="properties.adminPortalURL + '/' + communityId"
[class]=" ((buttonSizeSmall)?'uk-button-small':'')+' uk-button portal-button'"
target="_blank">
Manage
</a>
<a *ngIf="alias" [href]="properties.domain + properties.baseLink + '/dashboard/admin/' + alias"
[class]=" ((buttonSizeSmall)?'uk-button-small':'')+' uk-button portal-button'"
target="_blank">
Manage
</a>
<a [href]="link" class="uk-button uk-button-text uk-text-uppercase" target="_blank">Manage</a>
`
})
export class ManageComponent {
@Input() communityId:string;
@Input() alias: string;
@Input() buttonSizeSmall = true;
properties: EnvProperties = properties;
constructor() {}
constructor() {
}
get link(): string {
if(this.communityId) {
return this.properties.adminPortalURL + '/' + this.communityId;
} else if(this.alias) {
return this.properties.domain + properties.baseLink + '/dashboard/admin/' + this.alias;
} else {
return null;
}
}
}