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

Change search in order to apply mobile style

This commit is contained in:
Konstantinos Triantafyllou 2022-12-07 16:56:16 +02:00
parent b256147682
commit de42da8b6c
10 changed files with 268 additions and 251 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -46,8 +46,6 @@
placeholder="Type keywords..." placeholder="Type keywords..."
[(ngModel)]="selectedField.value" name="value[{{i}}]"> [(ngModel)]="selectedField.value" name="value[{{i}}]">
</div> </div>
</td> </td>
<td *ngIf="selectedField.type == 'date'"> <td *ngIf="selectedField.type == 'date'">
<date-filter [dateValue]=selectedField.dateValue [validDateFrom]=validDateFrom class="uk-width-expand" <date-filter [dateValue]=selectedField.dateValue [validDateFrom]=validDateFrom class="uk-width-expand"
@ -147,19 +145,19 @@
</ng-container> </ng-container>
<div *ngIf="simpleView" class="uk-flex uk-flex-center uk-flex-wrap"> <div *ngIf="simpleView" class="uk-flex uk-flex-center uk-flex-wrap">
<div class="uk-width-xlarge@l uk-width-large"> <div class="uk-width-xlarge@l uk-width-large">
<div class="uk-margin-small-bottom uk-text-small uk-flex uk-flex-right" [class.uk-light]="dark" *ngIf="showSwitchSearchLink"> <div class="uk-text-small uk-flex uk-flex-right" [class.uk-light]="dark" *ngIf="showSwitchSearchLink">
<a *ngIf ="this.entityType !='all' && this.entityType == this.selectedEntity && advancedSearchLink" <a *ngIf ="this.entityType !='all' && this.entityType == this.selectedEntity && advancedSearchLink"
[routerLink]="advancedSearchLink" [queryParams]="advancedSearchLinkParameters" [routerLink]="advancedSearchLink" [queryParams]="advancedSearchLinkParameters" class="uk-margin-small-bottom"
[ngClass]="(isDisabled)?'uk-disabled uk-link-muted':null">Advanced search [ngClass]="(isDisabled)?'uk-disabled uk-link-muted':null">Advanced search
</a> </a>
<a *ngIf =" this.entityType !='all' && this.entityType != this.selectedEntity && selectedEntityAdvancedUrl " <a *ngIf =" this.entityType !='all' && this.entityType != this.selectedEntity && selectedEntityAdvancedUrl "
[routerLink]="selectedEntityAdvancedUrl" [routerLink]="selectedEntityAdvancedUrl"
[queryParams]="{q:this.selectedFields[0].value,op:'and'}" [queryParams]="{q:this.selectedFields[0].value,op:'and'}" class="uk-margin-small-bottom"
[ngClass]="(isDisabled)?'uk-disabled uk-link-muted':null">Advanced search [ngClass]="(isDisabled)?'uk-disabled uk-link-muted':null">Advanced search
</a> </a>
<a *ngIf =" this.entityType =='all'" <a *ngIf =" this.entityType =='all'"
[routerLink]="properties.searchLinkToAdvancedResults" [routerLink]="properties.searchLinkToAdvancedResults"
[queryParams]="advancedSearchLinkParameters" [queryParams]="advancedSearchLinkParameters" class="uk-margin-small-bottom"
[ngClass]="(isDisabled)?'uk-disabled uk-link-muted':null">Advanced search [ngClass]="(isDisabled)?'uk-disabled uk-link-muted':null">Advanced search
</a> </a>
</div> </div>
@ -173,10 +171,18 @@
[(value)]="selectedFields[0].value" tooltip="true"></div> [(value)]="selectedFields[0].value" tooltip="true"></div>
</advanced-search-input> </advanced-search-input>
<div *ngIf="selectedFields[0] && disableSelect" search-input [disabled]="isDisabled" [(value)]="selectedFields[0].value" <div *ngIf="selectedFields[0] && disableSelect" search-input [disabled]="isDisabled" [(value)]="selectedFields[0].value"
[placeholder]="formPlaceholderText" (searchEmitter)="simpleKeywordChanged()"></div> [placeholder]="formPlaceholderText" (searchEmitter)="simpleKeywordChanged()" [iconPosition]="isMobile?'left':'right'">
<a *ngIf="isMobile" href="#mobile-filters" filters-toggle (click)="filtersClicked.emit(true)" uk-toggle>
<icon name="filters"></icon>
</a>
</div>
</ng-container> </ng-container>
<div *ngIf="selectedFields[0] && !entitiesSelection" search-input [disabled]="isDisabled" [(value)]="selectedFields[0].value" <div *ngIf="selectedFields[0] && !entitiesSelection" search-input [disabled]="isDisabled" [(value)]="selectedFields[0].value"
[placeholder]="formPlaceholderText" (searchEmitter)="simpleKeywordChanged()"></div> [placeholder]="formPlaceholderText" (searchEmitter)="simpleKeywordChanged()" [iconPosition]="isMobile?'left':'right'">
<a *ngIf="isMobile" href="#mobile-filters" filters-toggle (click)="filtersClicked.emit(true)" uk-toggle>
<icon name="filters"></icon>
</a>
</div>
</div> </div>
</div> </div>
</div> </div>

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

@ -41,6 +41,7 @@ export class AdvancedSearchFormComponent implements OnInit, OnDestroy, OnChanges
@Output() queryChange = new EventEmitter(); @Output() queryChange = new EventEmitter();
@Input() resultTypes; @Input() resultTypes;
@Input() quickFilter: { filter: Filter, selected: boolean, filterId: string, value: string }; @Input() quickFilter: { filter: Filter, selected: boolean, filterId: string, value: string };
@Input() isMobile: boolean = false;
public disableSelect: boolean = false; public disableSelect: boolean = false;
validDateFrom: boolean = true; validDateFrom: boolean = true;
validDateTo: boolean = true; validDateTo: boolean = true;
@ -60,6 +61,7 @@ export class AdvancedSearchFormComponent implements OnInit, OnDestroy, OnChanges
selectedEntityAdvancedUrl; selectedEntityAdvancedUrl;
@Input() entitiesSelection: boolean; @Input() entitiesSelection: boolean;
@Input() showSwitchSearchLink: boolean = true; @Input() showSwitchSearchLink: boolean = true;
@Output() filtersClicked: EventEmitter<boolean> = new EventEmitter<boolean>();
sub; sub;
constructor(private route: ActivatedRoute, private router: Router, private cdr: ChangeDetectorRef) {} constructor(private route: ActivatedRoute, private router: Router, private cdr: ChangeDetectorRef) {}

20
searchPages/searchUtils/advancedSearchForm.module.ts
View File

@ -10,26 +10,30 @@ import {DateFilterModule} from './dateFilter.module';
import {SearchFormModule} from './searchForm.module'; import {SearchFormModule} from './searchForm.module';
import {QuickSelectionsModule} from "./quick-selections.module"; import {QuickSelectionsModule} from "./quick-selections.module";
import {EntitiesSelectionModule} from "./entitiesSelection.module"; import {EntitiesSelectionModule} from "./entitiesSelection.module";
import { MatSelectModule } from "@angular/material/select"; import {MatSelectModule} from "@angular/material/select";
import {IconsModule} from "../../utils/icons/icons.module"; import {IconsModule} from "../../utils/icons/icons.module";
import {SearchInputModule} from "../../sharedComponents/search-input/search-input.module"; import {SearchInputModule} from "../../sharedComponents/search-input/search-input.module";
import {AdvancedSearchInputModule} from "../../sharedComponents/advanced-search-input/advanced-search-input.module"; import {AdvancedSearchInputModule} from "../../sharedComponents/advanced-search-input/advanced-search-input.module";
import {InputModule} from "../../sharedComponents/input/input.module"; import {InputModule} from "../../sharedComponents/input/input.module";
import {IconsService} from "../../utils/icons/icons.service";
import {filters} from "../../utils/icons/icons";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, FormsModule, RouterModule, EntitiesAutocompleteModule, StaticAutocompleteModule, DateFilterModule, SearchFormModule, QuickSelectionsModule, EntitiesSelectionModule, MatSelectModule, IconsModule, SearchInputModule, AdvancedSearchInputModule, InputModule CommonModule, FormsModule, RouterModule, EntitiesAutocompleteModule, StaticAutocompleteModule, DateFilterModule,
SearchFormModule, QuickSelectionsModule, EntitiesSelectionModule, MatSelectModule, IconsModule, SearchInputModule, AdvancedSearchInputModule, InputModule
], ],
declarations: [ declarations: [
AdvancedSearchFormComponent, AdvancedSearchFormComponent,
],
providers:[
], ],
exports: [ exports: [
AdvancedSearchFormComponent AdvancedSearchFormComponent
] ]
}) })
export class AdvancedSearchFormModule { } export class AdvancedSearchFormModule {
constructor(private iconsService: IconsService) {
this.iconsService.registerIcons([filters]);
}
}

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

@ -3,7 +3,7 @@
<div class="uk-slider filters-slider" uk-slider="finite: true"> <div class="uk-slider filters-slider" uk-slider="finite: true">
<div [class.uk-invisible]="list.children.length === 0" class="uk-position-relative"> <div [class.uk-invisible]="list.children.length === 0" class="uk-position-relative">
<div class="uk-slider-container"> <div class="uk-slider-container">
<ul #list class="uk-slider-items uk-grid uk-grid-small uk-margin-small-right uk-flex-nowrap"> <ul #list class="uk-slider-items uk-grid uk-grid-small uk-margin-small-right uk-flex-nowrap" style="padding-bottom: 1px">
<ng-container *ngIf="customFilter && ((customFilterEnabled && <ng-container *ngIf="customFilter && ((customFilterEnabled &&
refineFields.indexOf(customFilter.queryFieldName) == refineFields.indexOf(customFilter.queryFieldName) ==
-1) ||customFilter.isHiddenFilter)"> -1) ||customFilter.isHiddenFilter)">
@ -113,56 +113,81 @@
</ul> </ul>
</div> </div>
</ng-template> </ng-template>
<!-- TODO - Clean up --> <ng-template #sorting let-mobile="mobile">
<div *ngIf="!includeOnlyResultsAndFilter" [class]="usedBy != 'deposit' && usedBy != 'orcid' && (!customFilter || customFilter.queryFieldName != 'communityId') ? <div *ngIf="searchUtils.totalResults > 10 || sort || searchUtils.totalResults > searchUtils.size ||
(!loadPaging && oldTotalResults > searchUtils.size && searchUtils.status == errorCodes.LOADING)"
class="uk-grid uk-flex-middle uk-child-width-1-1 uk-child-width-1-2@m" uk-grid>
<div>
<div class="uk-grid uk-flex-middle uk-grid-column-collapse" uk-grid>
<div *ngIf="searchUtils.totalResults > 10 && !mobile" class="uk-width-small uk-margin-right">
<div input type="select" placeholder="Results per page" inputClass="flat x-small"
[options]="pageOptions" [(value)]="searchUtils.size" [disabled]="disabled"
(valueChange)="sizeChanged($event)"></div>
</div>
<search-sorting *ngIf="sort && searchUtils.totalResults > 0"
[entityType]="entityType" [sortBy]="searchUtils.sortBy"
(sortByChange)="sortByChanged($event)"
[isDisabled]="disabled">
</search-sorting>
</div>
</div>
<search-paging *ngIf="!mobile" [type]="type" [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults"
[searchUtils]="searchUtils" [results]="results" [baseUrl]="searchUtils.baseUrl"
[parameterNames]="parameterNames" [parameterValues]="parameterValues"
[isDisabled]="disabled">
</search-paging>
</div>
</ng-template>
<ng-template #main let-mobile="mobile">
<!-- TODO - Clean up -->
<div *ngIf="!includeOnlyResultsAndFilter" [class]="usedBy != 'deposit' && usedBy != 'orcid' && (!customFilter || customFilter.queryFieldName != 'communityId') ?
(stickyForm?'':' ') : (stickyForm?'':' ') :
(+ (stickyForm?'':' uk-section') +' uk-padding-remove-bottom uk-padding-remove-top ' + (+ (stickyForm?'':' uk-section') +' uk-padding-remove-bottom uk-padding-remove-top ' +
((usedBy == 'deposit' || usedBy == 'orcid') ? ' 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 '+ [attr.uk-sticky]="((stickyForm || mobile)?'{offset:100;top:90;cls-active:uk-active uk-sticky-below;cls-inactive:uk-sticky '+
(usedBy != 'deposit' && usedBy != 'orcid' && (!customFilter || customFilter.queryFieldName != 'communityId') ? (usedBy != 'deposit' && usedBy != 'orcid' && (!customFilter || customFilter.queryFieldName != 'communityId') ?
' uk-position-relative ' :(' uk-section ' ))+'}':null)"> ' uk-position-relative ' :(' uk-section ' ))+'}':null)">
<div class="uk-background-norepeat uk-background-bottom-center" [ngClass]="searchForm.class"> <div class="uk-background-norepeat uk-background-bottom-center" [ngClass]="searchForm.class">
<div class="uk-width-1-1"> <div class="uk-width-1-1">
<div *ngIf="showBreadcrumb" class="uk-container uk-container-large" [class.uk-light]="searchForm.dark"> <div *ngIf="showBreadcrumb && !mobile" class="uk-container uk-container-large uk-section uk-section-small uk-padding-remove-bottom" [class.uk-light]="searchForm.dark">
<div class="uk-margin-top"> <div class="uk-margin-top">
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs> <breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
</div>
</div> </div>
</div> <div class="uk-position-relative">
<div class="uk-position-relative"> <div class="uk-container uk-section uk-section-small uk-margin-bottom" id="searchForm">
<div class="uk-container uk-section uk-section-small uk-margin-bottom" id="searchForm"> <div class="uk-grid uk-flex uk-flex-middle uk-flex-center" uk-grid>
<div class="uk-grid uk-flex uk-flex-middle uk-flex-center" uk-grid> <div [class]="'uk-width-1-1'+(simpleView?' uk-width-auto@m' : '')"><div id="searchImage"></div></div>
<div [class]="'uk-width-1-1'+(simpleView?' uk-width-auto@m' : '')"><div id="searchImage"></div></div> <advanced-search-form class="uk-width-expand uk-padding-remove-vertical"
<advanced-search-form class="uk-width-expand uk-padding-remove-vertical" [entityType]="entityType"
[entityType]="entityType" [fieldIds]="fieldIds"
[fieldIds]="fieldIds" [fieldIdsMap]="fieldIdsMap"
[fieldIdsMap]="fieldIdsMap" [selectedFields]="selectedFields"
[selectedFields]="selectedFields" (queryChange)="queryChanged($event)"
(queryChange)="queryChanged($event)" [isDisabled]="disabled"
[isDisabled]="disabled" [dark]="searchForm.dark"
[dark]="searchForm.dark" [simpleSearchLink]="simpleSearchLink"
[simpleSearchLink]="simpleSearchLink" [advancedSearchLink]="advancedSearchLink"
[advancedSearchLink]="advancedSearchLink" [advancedSearchLinkParameters]="this.routerHelper.createQueryParams(this.parameterNames, this.parameterValues)"
[advancedSearchLinkParameters]="this.routerHelper.createQueryParams(this.parameterNames, this.parameterValues)" [simpleView]="simpleView" [formPlaceholderText]="formPlaceholderText" [isMobile]="mobile"
[simpleView]="simpleView" [formPlaceholderText]="formPlaceholderText" [resultTypes]="resultTypes" [quickFilter]="quickFilter" [entitiesSelection]="entitiesSelection"
[resultTypes]="resultTypes" [quickFilter]="quickFilter" [entitiesSelection]="entitiesSelection" [showSwitchSearchLink]="showSwitchSearchLink" [customFilter]="customFilter" (filtersClicked)="showOffCanvas = $event"
[showSwitchSearchLink]="showSwitchSearchLink" [customFilter]="customFilter" >
> </advanced-search-form>
</advanced-search-form> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <schema2jsonld *ngIf="url" [URL]="url" type="search" [name]=pageTitleWithFilters
<schema2jsonld *ngIf="url" [URL]="url" type="search" [name]=pageTitleWithFilters [searchAction]=false [description]="metaDescription"></schema2jsonld>
[searchAction]=false [description]="metaDescription"></schema2jsonld> <div id="tm-main" [class.uk-margin-medium-top]="!includeOnlyResultsAndFilter && properties.adminToolsPortalType != 'eosc'" [class.uk-margin-top]="stickyForm">
<div id="tm-main" [class.uk-margin-medium-top]="!includeOnlyResultsAndFilter && properties.adminToolsPortalType != 'eosc'" <ng-template #loading>
[class.uk-margin-top]="stickyForm"> <loading class="uk-height-medium uk-display-block uk-margin-xlarge-top"></loading>
<ng-template #loading> </ng-template>
<loading [ngClass]="'uk-height-medium uk-display-block uk-margin-xlarge-top'"></loading> <ng-template [ngIf]="searchUtils.refineStatus != errorCodes.LOADING || existingFiltersWithValues !== 0" [ngIfElse]="loading">
</ng-template> <div class="uk-container uk-container-large">
<ng-template [ngIf]="searchUtils.refineStatus != errorCodes.LOADING || existingFiltersWithValues !== 0" [ngIfElse]="loading">
<div class="uk-container uk-container-large search-results-container">
<div [class.uk-margin-top]="properties.adminToolsPortalType == 'eosc'" > <div [class.uk-margin-top]="properties.adminToolsPortalType == 'eosc'" >
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0" <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
[texts]="pageContents['top']"></helper> [texts]="pageContents['top']"></helper>
@ -172,34 +197,19 @@
</quick-selections> </quick-selections>
</div> </div>
<div [class]="showRefine? 'uk-width-4-5@m uk-width-4-5@l uk-width-1-1@s' :'uk-width-1-1'"> <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"> <div *ngIf="showRefine && mobile">
<a href="#mobile-filters" uk-toggle (click)="showOffCanvas=true;"> <div #mobileFilters id="mobile-filters" uk-offcanvas="overlay: true">
<span class="uk-icon uk-margin-small-right uk-margin-small-left"> <div class="uk-offcanvas-bar uk-padding-remove-horizontal">
<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;">
<div class="uk-offcanvas-bar">
<a class="uk-offcanvas-close uk-icon uk-close" (click)="showOffCanvas=false"> <a class="uk-offcanvas-close uk-icon uk-close" (click)="showOffCanvas=false">
<icon name="close" ratio="1.5" visuallyHidden="close filters"></icon> <icon name="close" ratio="1.5" visuallyHidden="close filters"></icon>
</a> </a>
<div *ngIf="showOffCanvas"> <div *ngIf="showOffCanvas" class="uk-padding-small uk-padding-remove-vertical">
<ng-container *ngTemplateOutlet="filters_column; context: {}"></ng-container> <div class="uk-margin-medium-top">
<ng-container *ngTemplateOutlet="sorting; context: {mobile: mobile}"></ng-container>
</div>
<div class="uk-margin-medium-top">
<ng-container *ngTemplateOutlet="filters_column; context: {}"></ng-container>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -207,33 +217,33 @@
</div> </div>
<div *ngIf="includeOnlyResultsAndFilter && showSwitchSearchLink && advancedSearchLink" class="uk-margin-medium-top uk-margin-medium-bottom"> <div *ngIf="includeOnlyResultsAndFilter && showSwitchSearchLink && advancedSearchLink" class="uk-margin-medium-top uk-margin-medium-bottom">
<a routerLinkActive="router-link-active" <a routerLinkActive="router-link-active"
[routerLink]="advancedSearchLink" style="z-index:1;" [routerLink]="advancedSearchLink" style="z-index:1;"
[queryParams]="this.routerHelper.createQueryParams(this.parameterNames, this.parameterValues)" [queryParams]="this.routerHelper.createQueryParams(this.parameterNames, this.parameterValues)"
[class]="((disabled)?' uk-disabled uk-link-muted ':'') +'uk-link uk-float-right '">Advanced [class]="((disabled)?' uk-disabled uk-link-muted ':'') +'uk-link uk-float-right '">Advanced
search search
</a> </a>
</div> </div>
<div class="uk-grid uk-margin-medium-top uk-margin-large-bottom" uk-grid> </div>
<div *ngIf="showRefine && (results.length > 0 </div>
|| (searchUtils.refineStatus == errorCodes.LOADING && searchUtils.status != errorCodes.LOADING) <div class="uk-container" [class.uk-container-large]="!mobile" [class.uk-container-expand]="mobile" [class.uk-padding-remove-horizontal]="mobile">
|| (!hideFilters && <div class="uk-grid uk-margin-large-bottom" [class.uk-margin-top]="!mobile" uk-grid>
(existingFiltersWithValues > 0 || (selectedRangeFilters + selectedFilters + selectedTypesNum) > 0) <div *ngIf="!mobile && 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">
class="uk-width-1-4@m search-filters uk-visible@m"> <ng-container *ngTemplateOutlet="filters_column; context: {}"></ng-container>
<ng-container *ngTemplateOutlet="filters_column; context: {}"></ng-container> </div>
</div> <div class="uk-width-expand@m uk-with-1-1@s">
<div class="uk-width-expand@m uk-with-1-1@s"> <div [class.uk-padding-small]="mobile" class="uk-padding-remove-vertical">
<!-- Results only for Custom Filter? --> <!-- Results only for Custom Filter? -->
<div *ngIf="customFilter && !customFilter.isHiddenFilter && <div *ngIf="customFilter && !customFilter.isHiddenFilter &&
customFilter.selected == false && customFilter.promptToAddFilter" customFilter.selected == false && customFilter.promptToAddFilter"
class="uk-alert uk-animation-slide-top-small"> class="uk-alert uk-animation-slide-top-small">
Do you want to see results only for {{customFilter.valueName}}? <a Do you want to see results only for {{customFilter.valueName}}? <a
(click)="addCustomFilter();">Click here</a>. (click)="addCustomFilter();">Click here</a>.
</div> </div>
<!-- Related results for Custom Filter Alert --> <!-- Related results for Custom Filter Alert -->
<div *ngIf="openaireLink && (searchUtils.totalResults > 0 || !loadPaging )" <div *ngIf="openaireLink && (searchUtils.totalResults > 0 || !loadPaging )"
class="uk-alert uk-margin-small-top "> class="uk-alert uk-margin-small-top ">
<span *ngIf="customFilter">The following results are related to <span class="uk-text-primary uk-text-bold" <span *ngIf="customFilter">The following results are related to <span class="uk-text-primary uk-text-bold"
>{{customFilter.valueName}}</span>.</span> >{{customFilter.valueName}}</span>.</span>
Are you interested to view more results? Visit Are you interested to view more results? Visit
@ -242,7 +252,7 @@
[href]="openaireLink+this.routerHelper.createQueryParamsString(this.parameterNames, this.parameterValues)" [href]="openaireLink+this.routerHelper.createQueryParamsString(this.parameterNames, this.parameterValues)"
target="_blank"> OpenAIRE - Explore</a>. target="_blank"> OpenAIRE - Explore</a>.
</div> </div>
<div class="uk-flex uk-flex-between uk-flex-middle uk-flex-wrap uk-margin-bottom"> <div class="uk-flex uk-flex-between uk-flex-middle uk-flex-wrap">
<!-- Total results, number of pages --> <!-- Total results, number of pages -->
<h6 class="uk-margin-remove"> <h6 class="uk-margin-remove">
<ng-container *ngIf="results && searchUtils.totalResults > 0"> <ng-container *ngIf="results && searchUtils.totalResults > 0">
@ -268,72 +278,52 @@
</search-download> </search-download>
</div> </div>
</div> </div>
<div *ngIf="(searchUtils.status !== errorCodes.LOADING || !loadPaging)"> <div *ngIf="(searchUtils.status !== errorCodes.LOADING || !loadPaging) && !mobile" class="uk-margin-top">
<ng-container *ngTemplateOutlet="selected_filters_pills;"></ng-container> <ng-container *ngTemplateOutlet="selected_filters_pills;"></ng-container>
</div> </div>
<div *ngIf="searchUtils.totalResults > 10 || sort || searchUtils.totalResults > searchUtils.size || <div *ngIf="!mobile" class="uk-margin-medium-topuk-margin-medium-top">
(!loadPaging && oldTotalResults > searchUtils.size && searchUtils.status == errorCodes.LOADING)" <ng-container *ngTemplateOutlet="sorting; context: {mobile: mobile}"></ng-container>
class="uk-grid uk-flex-middle uk-child-width-1-1 uk-child-width-1-2@m uk-margin-medium-top" uk-grid>
<div>
<div class="uk-flex uk-flex-middle">
<div *ngIf="searchUtils.totalResults > 10" class="uk-width-small uk-margin-right">
<div input type="select" placeholder="Results per page" inputClass="flat x-small"
[options]="pageOptions" [(value)]="searchUtils.size" [disabled]="disabled"
(valueChange)="sizeChanged($event)"></div>
</div>
<search-sorting *ngIf="sort && searchUtils.totalResults > 0"
[entityType]="entityType" [sortBy]="searchUtils.sortBy"
(sortByChange)="sortByChanged($event)"
[isDisabled]="disabled">
</search-sorting>
</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>
</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>
<div [class]="searchUtils.page > pagingLimit ? 'search-results' : ''" <div [class]="searchUtils.page > pagingLimit ? 'search-results' : ''"
*ngIf="(searchUtils.page >= pagingLimit) && (searchUtils.totalResults > searchUtils.size*pagingLimit)"> *ngIf="(searchUtils.page >= pagingLimit) && (searchUtils.totalResults > searchUtils.size*pagingLimit)">
<p class="uk-alert uk-alert-warning" uk-alert>For more results please try a new, more specific query</p> <p class="uk-alert uk-alert-warning" uk-alert>For more results please try a new, more specific query</p>
</div> </div>
</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>
</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'" [isMobile]="mobile"
[showLoading]="true" [properties]=properties>
</portal-search-result>
</div>
<div [class.uk-padding-small]="mobile" class="uk-padding-remove-vertical">
<div class="uk-margin-medium-top"> <div class="uk-margin-medium-top">
<search-paging [type]="type" [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults" <search-paging [type]="type" [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults"
[searchUtils]="searchUtils" [results]="results" [baseUrl]="searchUtils.baseUrl" [searchUtils]="searchUtils" [results]="results" [baseUrl]="searchUtils.baseUrl"
[parameterNames]="parameterNames" [parameterValues]="parameterValues" [parameterNames]="parameterNames" [parameterValues]="parameterValues"
[isDisabled]="disabled"> [isDisabled]="disabled" [isMobile]="mobile">
</search-paging> </search-paging>
</div> </div>
<div *ngIf="showIndexInfo && searchUtils.status !== errorCodes.LOADING" class="uk-margin-large-top uk-grid uk-child-width-1-2 uk-text-small"> <div *ngIf="showIndexInfo && searchUtils.status !== errorCodes.LOADING" class="uk-margin-large-top uk-grid uk-child-width-1-2 uk-text-small">
@ -341,24 +331,31 @@
<div> <div>
<icon name="graph" customClass="text-graph"></icon> <icon name="graph" customClass="text-graph"></icon>
<span class="uk-margin-small-left uk-text-baseline"> <span class="uk-margin-small-left uk-text-baseline">
<span class="uk-text-meta">Powered by </span> <span class="uk-text-meta">Powered by </span>
<a href="https://graph.openaire.eu" target="_blank" class="text-graph">OpenAIRE Research Graph</a> <a href="https://graph.openaire.eu" target="_blank" class="text-graph">OpenAIRE Research Graph</a>
</span> </span>
</div> </div>
<div class="uk-text-right"> <div class="uk-text-right">
<span *ngIf="indexUpdateDate" class="uk-text-baseline uk-text-meta"> <span *ngIf="indexUpdateDate" class="uk-text-baseline uk-text-meta">
<a *ngIf="properties.showLastIndexInformationLink" class="uk-link" [href]="properties.lastIndexInformationLink" target="_blank">Last update</a> <a *ngIf="properties.showLastIndexInformationLink" class="uk-link" [href]="properties.lastIndexInformationLink" target="_blank">Last update</a>
<span *ngIf="!(properties.showLastIndexInformationLink)">Last update</span> <span *ngIf="!(properties.showLastIndexInformationLink)">Last update</span>
of records in OpenAIRE: {{indexUpdateDate | date: 'MMM dd, yyyy'}} of records in OpenAIRE: {{indexUpdateDate | date: 'MMM dd, yyyy'}}
</span> </span>
</div> </div>
</div> </div>
</div> </div>
<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
[texts]="pageContents['bottom']"></helper>
</div> </div>
<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
[texts]="pageContents['bottom']"></helper>
</div> </div>
</div> </div>
</ng-template> </ng-template>
</div>
</ng-template>
<div *ngIf="!isMobile" class="uk-visible@m">
<ng-container *ngTemplateOutlet="main; context: {mobile: false}"></ng-container>
</div>
<div *ngIf="isMobile || isServer" class="uk-hidden@m">
<ng-container *ngTemplateOutlet="main; context: {mobile: true}"></ng-container>
</div> </div>
<modal-alert #removeCustomFilter (alertOutput)="closeCustomFilterModal()"></modal-alert> <modal-alert #removeCustomFilter (alertOutput)="closeCustomFilterModal()"></modal-alert>

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

@ -1,15 +1,15 @@
import { import {
ChangeDetectorRef, ChangeDetectorRef,
Component, Component,
ElementRef, ElementRef, Inject,
Input, Input,
OnChanges, OnChanges,
OnDestroy, OnDestroy,
OnInit, OnInit, PLATFORM_ID,
SimpleChanges, SimpleChanges,
ViewChild ViewChild
} from '@angular/core'; } from '@angular/core';
import {Location} from '@angular/common'; import {isPlatformServer, Location} from '@angular/common';
import {ActivatedRoute, Router} from '@angular/router'; import {ActivatedRoute, Router} from '@angular/router';
import {Meta, Title} from '@angular/platform-browser'; import {Meta, Title} from '@angular/platform-browser';
@ -35,6 +35,8 @@ import {AlertModal} from "../../utils/modal/alert";
import {Subscriber} from "rxjs"; import {Subscriber} from "rxjs";
import {IndexInfoService} from "../../utils/indexInfo.service"; import {IndexInfoService} from "../../utils/indexInfo.service";
import {Background} from "../../utils/background-utils"; import {Background} from "../../utils/background-utils";
import {LayoutService} from "../../dashboard/sharedComponents/sidebar/layout.service";
import {Platform} from "@angular/cdk/platform";
export interface SearchForm extends Background {} export interface SearchForm extends Background {}
@ -147,13 +149,8 @@ export class NewSearchPageComponent implements OnInit, OnDestroy, OnChanges {
currentFilterToRemove; currentFilterToRemove;
public indexUpdateDate: Date; public indexUpdateDate: Date;
showOffCanvas:boolean = false; showOffCanvas:boolean = false;
// public resultsPerPageOptions = [ isMobile: boolean = false;
// {label: '5', value: '5'}, isServer: boolean;
// {label: '10', value: '10'},
// {label: '20', value: '20'},
// {label: '50', value: '50'},
// ];
constructor(private route: ActivatedRoute, constructor(private route: ActivatedRoute,
private location: Location, private location: Location,
@ -163,7 +160,10 @@ export class NewSearchPageComponent implements OnInit, OnDestroy, OnChanges {
private router: Router, private router: Router,
private seoService: SEOService, private seoService: SEOService,
private helper: HelperService, private helper: HelperService,
private layoutService: LayoutService,
@Inject(PLATFORM_ID) private platform: any,
private cdr: ChangeDetectorRef, private indexInfoService: IndexInfoService) { private cdr: ChangeDetectorRef, private indexInfoService: IndexInfoService) {
this.isServer = isPlatformServer(this.platform);
} }
ngOnInit() { ngOnInit() {
@ -178,6 +178,10 @@ export class NewSearchPageComponent implements OnInit, OnDestroy, OnChanges {
if (typeof document !== 'undefined' && this.isPiwikEnabled && !this.includeOnlyResultsAndFilter && this.piwikSiteId) { if (typeof document !== 'undefined' && this.isPiwikEnabled && !this.includeOnlyResultsAndFilter && this.piwikSiteId) {
this.subscriptions.push(this._piwikService.trackView(this.properties, this.pageTitle, this.piwikSiteId).subscribe()); this.subscriptions.push(this._piwikService.trackView(this.properties, this.pageTitle, this.piwikSiteId).subscribe());
} }
this.layoutService.isMobile.subscribe(isMobile => {
this.isMobile = isMobile;
this.cdr.detectChanges();
});
this.route.queryParams.subscribe(params => { this.route.queryParams.subscribe(params => {
if (params['page'] && params['page'] != 1) { if (params['page'] && params['page'] != 1) {
HelperFunctions.scrollToId("searchForm"); HelperFunctions.scrollToId("searchForm");

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

@ -1,71 +1,40 @@
<ul class="uk-list uk-list-xlarge" [class]="'uk-list uk-margin ' + custom_class" <ul class="uk-list uk-list-large uk-margin" [class.uk-list-xlarge]="!isMobile" [ngClass]="custom_class"
uk-height-match="target: .uk-card-default; row: false"> uk-height-match="target: .uk-card-default; row: false">
<errorMessages [status]="[status]" [type]="'results'"></errorMessages> <errorMessages [status]="[status]" [type]="'results'"></errorMessages>
<li *ngFor="let result of results"> <li *ngFor="let result of results">
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-flex uk-flex-column uk-flex-center" <div class="uk-card uk-card-default uk-card-body uk-position-relative uk-flex uk-flex-column uk-flex-center"
[ngClass]="result.type" [class.uk-disabled]="!hasPermission(result)"> [ngClass]="result.type" [class.uk-disabled]="!hasPermission(result)">
<div> <div *ngIf="type === 'community' && result.isSubscribed" [class.uk-position-top-left]="!isMobile" [class.uk-position-top-right]="isMobile" class="uk-text-background uk-text-center uk-padding-small uk-text-uppercase uk-text-bold">
<div *ngIf="type === 'community' && result.isSubscribed" <span>Member</span>
class="uk-text-background uk-text-center uk-position-top-left uk-padding-small uk-text-uppercase uk-text-bold"> </div>
<span>Member</span> <div [ngClass]="isMobile?'uk-flex uk-flex-middle uk-margin-bottom':'uk-position-top-right uk-margin-top uk-margin-right uk-flex uk-flex-column uk-flex-middle'">
</div> <div *ngIf="type === 'community' && result.status === 'manager'">
<div *ngIf="type === 'community' && result.status === 'manager'" <icon [name]="visibilityIcon.get('RESTRICTED')" [ratio]="isMobile?0.8:1.2" [flex]="true"></icon>
class="uk-position-top-right uk-margin-top uk-margin-right uk-flex uk-flex-column uk-flex-middle"> <span class="uk-text-small uk-text-capitalize" [class.uk-text-xsmall]="isMobile" [class.uk-margin-xsmall-left]="isMobile">restricted</span>
<icon [name]="visibilityIcon.get('RESTRICTED')" ratio="1.2" [flex]="true"></icon>
<span class="uk-text-small uk-text-capitalize">restricted</span>
</div>
<div *ngIf="type === 'community' && result.status === 'hidden'"
class="uk-position-top-right uk-margin-top uk-margin-right uk-flex uk-flex-column uk-flex-middle">
<icon [name]="visibilityIcon.get('PRIVATE')" ratio="1.2" [flex]="true"></icon>
<span class="uk-text-small uk-text-capitalize">private</span>
</div>
<div *ngIf="result.visibility && result.visibility !== 'PUBLIC'"
class="uk-position-top-right uk-margin-top uk-margin-right uk-flex uk-flex-column uk-flex-middle">
<icon [name]="visibilityIcon.get(result.visibility)" ratio="1.2" [flex]="true"></icon>
<span class="uk-text-small uk-text-capitalize">{{result.visibility.toLowerCase()}}</span>
</div> </div>
<ng-container *ngIf="type === 'community' && result.status === 'hidden'">
<icon [name]="visibilityIcon.get('PRIVATE')" [ratio]="isMobile?0.8:1.2" [flex]="true"></icon>
<span class="uk-text-small uk-text-capitalize" [class.uk-text-xsmall]="isMobile" [class.uk-margin-xsmall-left]="isMobile">private</span>
</ng-container>
<ng-container *ngIf="result.visibility && result.visibility !== 'PUBLIC'">
<icon [name]="visibilityIcon.get(result.visibility)" [ratio]="isMobile?0.8:1.2" [flex]="true"></icon>
<span class="uk-text-small uk-text-capitalize" [class.uk-text-xsmall]="isMobile" [class.uk-margin-xsmall-left]="isMobile">{{result.visibility.toLowerCase()}}</span>
</ng-container>
</div> </div>
<div class="uk-grid uk-flex uk-flex-middle uk-margin-medium-right" uk-grid> <div class="uk-grid uk-flex uk-flex-middle uk-margin-medium-right" uk-grid>
<a *ngIf="directLink && hasPermission(result)"
[href]="(type === 'community')?getCommunityPageUrl(result):getStakeholderPageUrl(result)"
target="_blank" class="uk-width-1-5@s">
<ng-container *ngTemplateOutlet="resultPreview; context: {result: result}"></ng-container>
</a>
<a *ngIf="!directLink && hasPermission(result)"
class="uk-width-1-5@s uk-width-1-1"
(click)="confirmModalOpen(result)">
<ng-container *ngTemplateOutlet="resultPreview; context: {result: result}"></ng-container>
</a>
<div *ngIf="!hasPermission(result)" class="uk-width-1-5@s">
<ng-container *ngTemplateOutlet="resultPreview; context: {result: result}"></ng-container>
</div>
<div class="uk-width-expand"> <div class="uk-width-expand">
<div *ngIf="type === 'community'" [title]="result.shortTitle" class="uk-margin-bottom"> <h5 [class.uk-h5]="!isMobile" [class.uk-h6]="isMobile">
<a *ngIf="directLink && hasPermission(result)" [href]="getCommunityPageUrl(result)" <div *ngIf="type === 'community'" [title]="result.shortTitle" class="uk-margin-bottom">
class="uk-h5 uk-link-heading" target="_blank"> <a *ngIf="directLink && hasPermission(result)" [href]="getCommunityPageUrl(result)" class="uk-link-heading uk-text-truncate uk-display-inline-block" target="_blank">{{(result.title) ? result.title : result.shortTitle}}</a>
{{(result.title) ? result.title : result.shortTitle}} <a *ngIf="!directLink && hasPermission(result)" (click)="confirmModalOpen(result)" class="uk-link-heading uk-text-truncate uk-display-inline-block">{{(result.title) ? result.title : result.shortTitle}}</a>
</a> <div *ngIf="!hasPermission(result)" class="uk-text-truncate uk-display-inline-block">{{(result.title) ? result.title : result.shortTitle}}</div>
<a *ngIf="!directLink && hasPermission(result)" (click)="confirmModalOpen(result)" </div>
class="uk-h5 uk-link-heading"> <div *ngIf="type === 'stakeholder'" [title]="result.index_shortName" class="uk-margin-bottom">
{{(result.title) ? result.title : result.shortTitle}} <a *ngIf="directLink && hasPermission(result)" [href]="getStakeholderPageUrl(result)" class="uk-link-heading uk-text-truncate uk-display-inline-block" target="_blank">{{(result.name) ? result.name : result.index_shortName}}</a>
</a> <a *ngIf="!directLink && hasPermission(result)" (click)="confirmModalOpen(result)" class="uk-link-heading uk-text-truncate uk-display-inline-block">{{(result.name) ? result.name : result.index_shortName}}</a>
<h5 *ngIf="!hasPermission(result)"> <div *ngIf="!hasPermission(result)" class="uk-text-truncate uk-display-inline-block">{{(result.name) ? result.name : result.index_shortName}}</div>
{{(result.title) ? result.title : result.shortTitle}} </div>
</h5> </h5>
</div>
<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-heading" target="_blank">
{{(result.name) ? result.name : result.index_shortName}}
</a>
<a *ngIf="!directLink && hasPermission(result)" (click)="confirmModalOpen(result)"
class="uk-h5 uk-link-heading">
{{(result.name) ? result.name : result.index_shortName}}
</a>
<h5 *ngIf="!hasPermission(result)">
{{(result.name) ? result.name : result.index_shortName}}
</h5>
</div>
<div class="uk-text-small"> <div class="uk-text-small">
<div *ngIf="result.date || result.creationDate" class="uk-flex uk-flex-middle uk-margin-small-bottom"> <div *ngIf="result.date || result.creationDate" class="uk-flex uk-flex-middle uk-margin-small-bottom">
<span class="uk-text-meta">Creation Date: </span> <span class="uk-text-meta">Creation Date: </span>
@ -78,10 +47,21 @@
<span class="uk-margin-small-left uk-text-capitalize">{{mapType(result.type)}}</span> <span class="uk-margin-small-left uk-text-capitalize">{{mapType(result.type)}}</span>
</div> </div>
</div> </div>
<div *ngIf="result.description" class="uk-margin-top uk-text-small multi-line-ellipsis lines-3"> <div *ngIf="result.description && !isMobile" class="uk-margin-top uk-text-small multi-line-ellipsis lines-3">
<p class="uk-text-meta" [innerHTML]="result.description"></p> <p class="uk-text-meta" [innerHTML]="result.description"></p>
</div> </div>
</div> </div>
<div class="uk-width-1-5@m uk-width-1-3 uk-flex-first@m">
<a *ngIf="directLink && hasPermission(result)" [href]="(type === 'community')?getCommunityPageUrl(result):getStakeholderPageUrl(result)" target="_blank">
<ng-container *ngTemplateOutlet="resultPreview; context: {result: result}"></ng-container>
</a>
<a *ngIf="!directLink && hasPermission(result)" (click)="confirmModalOpen(result)">
<ng-container *ngTemplateOutlet="resultPreview; context: {result: result}"></ng-container>
</a>
<div *ngIf="!hasPermission(result)">
<ng-container *ngTemplateOutlet="resultPreview; context: {result: result}"></ng-container>
</div>
</div>
</div> </div>
<div *ngIf="result.isManager" class="uk-flex uk-flex-right uk-margin-top"> <div *ngIf="result.isManager" class="uk-flex uk-flex-right uk-margin-top">
<manage [communityId]="result.communityId" [alias]="result.alias"></manage> <manage [communityId]="result.communityId" [alias]="result.alias"></manage>

43
searchPages/searchUtils/portal-search-result.component.less
View File

@ -1,23 +1,42 @@
@import (reference) "~src/assets/openaire-theme/less/color.less"; @import (reference) "~src/assets/openaire-theme/less/color.less";
@import (reference) "~src/assets/openaire-theme/less/_import-variables.less";
.setType(@color) { .setType(@color, @position: left) {
border-left: 4px solid fade(@color, 30%); border-@{position}: 4px solid fade(@color, 30%);
& .type { & .type {
color: @color; color: @color;
} }
} }
.uk-card { @media(min-width: @breakpoint-medium) {
&.funder { .uk-card {
.setType(@funder-color); &.funder {
} .setType(@funder-color);
}
&.ri { &.ri {
.setType(@ri-color); .setType(@ri-color);
} }
&.organization { &.organization {
.setType(@organization-color); .setType(@organization-color);
}
} }
} }
@media(max-width: @breakpoint-small-max) {
.uk-card {
&.funder {
.setType(@funder-color, bottom);
}
&.ri {
.setType(@ri-color, bottom);
}
&.organization {
.setType(@organization-color, bottom);
}
}
}

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

@ -22,6 +22,7 @@ export class PortalSearchResultComponent implements OnInit{
@Input() showLoading: boolean = false; @Input() showLoading: boolean = false;
@Input() custom_class: string = "search-results"; @Input() custom_class: string = "search-results";
@Input() properties: EnvProperties; @Input() properties: EnvProperties;
@Input() isMobile: boolean = false;
@ViewChild('AlertModal') modal; @ViewChild('AlertModal') modal;
visibilityIcon: Map<Visibility, string> = new Map<Visibility, string> ([ visibilityIcon: Map<Visibility, string> = new Map<Visibility, string> ([
["PRIVATE", 'incognito'], ["PRIVATE", 'incognito'],

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

@ -4,13 +4,13 @@ import {ErrorCodes} from '../../utils/properties/errorCodes';
@Component({ @Component({
selector: 'search-paging', selector: 'search-paging',
template: ` template: `
<paging *ngIf="results && searchUtils.totalResults > searchUtils.size" <paging *ngIf="results && searchUtils.totalResults > searchUtils.size" [position]="isMobile?'center':'right'"
[currentPage]="searchUtils.page" [totalResults]="searchUtils.totalResults" [baseUrl]="baseUrl" [currentPage]="searchUtils.page" [totalResults]="searchUtils.totalResults" [baseUrl]="baseUrl"
[size]="searchUtils.size" [parameterNames]="parameterNames" [parameterValues]="parameterValues" [size]="searchUtils.size" [parameterNames]="parameterNames" [parameterValues]="parameterValues"
[isDisabled]="isDisabled"> [isDisabled]="isDisabled">
</paging> </paging>
<paging *ngIf="!loadPaging && oldTotalResults > searchUtils.size && searchUtils.status == errorCodes.LOADING" <paging *ngIf="!loadPaging && oldTotalResults > searchUtils.size && searchUtils.status == errorCodes.LOADING"
[currentPage]="searchUtils.page" [totalResults]="oldTotalResults" [baseUrl]="baseUrl" [currentPage]="searchUtils.page" [totalResults]="oldTotalResults" [baseUrl]="baseUrl" [position]="isMobile?'center':'right'"
[size]="searchUtils.size" [parameterNames]="parameterNames" [parameterValues]="parameterValues" [size]="searchUtils.size" [parameterNames]="parameterNames" [parameterValues]="parameterValues"
[isDisabled]="isDisabled"> [isDisabled]="isDisabled">
</paging> </paging>
@ -26,6 +26,7 @@ export class SearchPagingComponent {
@Input() parameterValues: string[]; @Input() parameterValues: string[];
@Input() loadPaging: boolean = true; @Input() loadPaging: boolean = true;
@Input() oldTotalResults: number = 0; @Input() oldTotalResults: number = 0;
@Input() isMobile: boolean = false;
public totalResults: number = 0; public totalResults: number = 0;
public errorCodes: ErrorCodes = new ErrorCodes(); public errorCodes: ErrorCodes = new ErrorCodes();

5
sharedComponents/search-input/search-input.component.ts
View File

@ -22,7 +22,7 @@ import {ClickEvent} from "../../utils/click/click-outside-or-esc.directive";
[class.collapsed]="hidden" [ngClass]="searchInputClass"> [class.collapsed]="hidden" [ngClass]="searchInputClass">
<div class="uk-flex uk-flex-middle"> <div class="uk-flex uk-flex-middle">
<div class="uk-width-expand"> <div class="uk-width-expand">
<div #input [class.uk-hidden]="hidden" input [formInput]="searchControl" inputClass="search" [disabledIcon]="null" <div #input [class.uk-hidden]="hidden" input [formInput]="searchControl" [inputClass]="'search'+(iconPosition === 'left'?' icon-left':'')" [disabledIcon]="null"
[placeholder]="{label: placeholder, static: true}" [value]="value" (valueChange)="valueChange.emit($event)" [placeholder]="{label: placeholder, static: true}" [value]="value" (valueChange)="valueChange.emit($event)"
[disabled]="disabled" [showOptionsOnEmpty]="false" [type]="(options.length > 0?'autocomplete_soft':'text')" [options]="options"></div> [disabled]="disabled" [showOptionsOnEmpty]="false" [type]="(options.length > 0?'autocomplete_soft':'text')" [options]="options"></div>
</div> </div>
@ -36,6 +36,9 @@ import {ClickEvent} from "../../utils/click/click-outside-or-esc.directive";
<icon name="search" [flex]="true" ratio="1.3"></icon> <icon name="search" [flex]="true" ratio="1.3"></icon>
</div> </div>
</div> </div>
<div class="uk-width-auto filters-toggle">
<ng-content select="[filters-toggle]"></ng-content>
</div>
</div> </div>
</div> </div>
</div> </div>