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

[Library | Trunk] 

Dashboard Sidebar: 
	pass query params for search
	add is activeURL method
	add mini_Title to be visible in mini_sidebar view

New Search page: include  changes for dashboard search
		- filters on the right
		- selected filters on top of the results
		- make selected filters an ng-template




git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@59078 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
argiro.kokogiannaki 2020-07-13 09:15:00 +00:00
parent 5c9575ab7a
commit 3061455f8a
5 changed files with 127 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
dashboard/sharedComponents/sidebar/sideBar.component.html
View File

@ -22,11 +22,13 @@
</span>
<span *ngIf="!item.icon" class="menu_icon"><i class="material-icons">donut_large</i></span>
<span class="menu_title">{{item.title}}</span>
<div class="menu_mini_title">{{item.title}}</div>
</a>
<ng-template [ngIf]="item.items.length > 1">
<a (click)="item.open = !item.open">
<span *ngIf="item.icon" class="menu_icon"><i class="material-icons">{{item.icon}}</i></span>
<span class="menu_title">{{item.title}}</span>
<div class="menu_mini_title">{{item.title}}</div>
</a>
<ul [style.display]="(item.open?'block':'none')">
<ng-template ngFor [ngForOf]="item.items" let-subItem let-j="index">
@ -45,10 +47,11 @@
<ng-template [ngIf]="searchLink">
<hr>
<ul>
<li routerLinkActive="current_section">
<a [routerLink]="searchLink">
<li [class.current_section]="isTheActiveUrl(searchLink)" title="Search for Research Results">
<a [routerLink]="searchLink" [queryParams]="searchParams">
<span class="menu_icon"><i class="material-icons">search</i></span>
<span class="menu_title">Search for Research Results</span>
<div class="menu_mini_title">Search</div>
</a>
</li>
</ul>

4
dashboard/sharedComponents/sidebar/sideBar.component.ts
View File

@ -18,6 +18,7 @@ export class SideBarComponent implements OnInit {
@Input() activeItem: string = '';
@Input() activeSubItem: string = '';
@Input() searchLink = null;
@Input() searchParams = {};
properties;
constructor(private router: Router, private sanitizer: DomSanitizer) {
this.properties = properties;
@ -38,6 +39,9 @@ export class SideBarComponent implements OnInit {
}
}
isTheActiveUrl(menuItemURL): boolean {
return (menuItemURL == this.router.url.split('?')[0])
}
satinizeHTML(html){
return this.sanitizer.bypassSecurityTrustHtml(html);
}

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

@ -1,3 +1,74 @@
<ng-template #selected_filters_pills>
<div class="uk-grid uk-grid-small uk-text-small" uk-grid>
<ng-container *ngIf="selectedTypesNum > 0 && resultTypes">
<ng-container *ngFor="let type of resultTypeOptions; let i = index; let end = last; ">
<ng-container *ngIf="resultTypes[type.id] == true">
<span [title]="'Remove '+ type.name" (click)="removeResultType(type.id) ">
<span class="selectedFilterLabel ">
<a [class]="((disableForms)?' uk-disabled':' ')+' uk-link-text '">
<span class=" clickable" aria-hidden="true">
<span class="uk-icon">
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close"
ratio="0.8"><path fill="none" stroke="#000" stroke-width="1.6" d="M16,16 L4,4"></path><path
fill="none" stroke="#000" stroke-width="1.6" d="M16,4 L4,16"></path></svg>
</span>
</span>
<span class="uk-margin-small-left">{{type.name}}</span>
</a>
</span>
</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 [title]="'Remove '+ filter.selectedFromAndToValues" (click)="removeRangeFilter(filter) ">
<span class="selectedFilterLabel ">
<a [class]="((disableForms)?' uk-disabled':' ')+' uk-link-text '">
<span class=" clickable" aria-hidden="true">
<span class="uk-icon">
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
icon="close" ratio="0.8"><path fill="none" stroke="#000" stroke-width="1.6"
d="M16,16 L4,4"></path><path fill="none"
stroke="#000"
stroke-width="1.6"
d="M16,4 L4,16"></path></svg>
</span>
</span>
<span class="uk-margin-small-left">{{filter.selectedFromAndToValues}}</span>
</a>
</span>
</span>
</ng-container>
</ng-container>
</ng-container>
<ng-container *ngFor="let filter of filters ">
<ng-container *ngIf="filter.countSelectedValues > 0">
<span *ngFor="let value of getSelectedValues(filter); let i = index; let end = last; "
[title]="'Remove '+value.name" (click)="removeFilter(value, filter) ">
<!-- if no grid on the div above, remove it and move class 'selectedFilterLabel' on top span -->
<span class="selectedFilterLabel ">
<a [class]="((disableForms)?' uk-disabled':' ')+' uk-link-text '">
<span class=" clickable" aria-hidden="true">
<span class="uk-icon">
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
icon="close" ratio="0.8"><path fill="none" stroke="#000" stroke-width="1.6"
d="M16,16 L4,4"></path><path fill="none"
stroke="#000"
stroke-width="1.6"
d="M16,4 L4,16"></path></svg>
</span>
</span>
<span class="uk-margin-small-left"
[innerHtml]="(value.name.length > 34)?value.name.substring(0,34)+'...':value.name"></span>
</a>
</span>
</span>
</ng-container>
</ng-container>
</div>
</ng-template>
<ng-template #filters_column>
<!-- let-dynamic_content="dynamic_content">-->
<div *ngIf="selectedRangeFilters+selectedFilters + selectedTypesNum > 0"
@ -9,7 +80,8 @@
Clear All
</a>
</div>
<div class="uk-grid uk-grid-small uk-text-small" uk-grid>
<ng-container *ngTemplateOutlet="selected_filters_pills; context: {}"></ng-container>
<!--<div class="uk-grid uk-grid-small uk-text-small" uk-grid>
<ng-container *ngIf="selectedTypesNum > 0 && resultTypes">
<ng-container *ngFor="let type of resultTypeOptions; let i = index; let end = last; ">
<ng-container *ngIf="resultTypes[type.id] == true">
@ -57,7 +129,7 @@
<ng-container *ngIf="filter.countSelectedValues > 0">
<span *ngFor="let value of getSelectedValues(filter); let i = index; let end = last; "
[title]="'Remove '+value.name" (click)="removeFilter(value, filter) ">
<!-- if no grid on the div above, remove it and move class 'selectedFilterLabel' on top span -->
&lt;!&ndash; if no grid on the div above, remove it and move class 'selectedFilterLabel' on top span &ndash;&gt;
<span class="selectedFilterLabel ">
<a [class]="((disableForms)?' uk-disabled':' ')+' uk-link-text '">
<span class=" clickable" aria-hidden="true">
@ -77,7 +149,7 @@
</span>
</ng-container>
</ng-container>
</div>
</div>-->
</div>
<div *ngIf="filters.length === 0 && results.length > 0" class="uk-margin-top">
<span class="uk-text-meta">No filters available</span>
@ -177,7 +249,7 @@
addClass=" " [breadcrumbs]="breadcrumbs"></breadcrumbs>
<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 [class]="(showRefine && !isDashboardView)? 'uk-width-4-5@m uk-width-4-5@l uk-width-1-1@s' :'uk-width-1-1'">
<div *ngIf="showRefine" class="uk-offcanvas-content uk-hidden@m uk-margin-top">
<a href="#offcanvas-usage" uk-toggle>
@ -330,7 +402,7 @@
</div>
<div class="uk-grid helper-grid uk-padding-small uk-padding-remove-vertical uk-margin-large-bottom">
<div *ngIf="showRefine" class="uk-width-1-4@m search-filters uk-visible@m">
<div *ngIf="showRefine && !properties.isDashboard" class="uk-width-1-4@m search-filters uk-visible@m">
<!-- top: #container-1; bottom: #true; -->
<!-- <div id="container-1" style="z-index: -1;" uk-sticky="top: #container-1; offset: 120; "> -->
<!-- <span *ngIf="tableViewLink" class="uk-width-expand">-->
@ -425,6 +497,13 @@
</div>
<div class="uk-width-expand@m uk-with-1-1@s">
<div *ngIf="properties.isDashboard && selectedRangeFilters+selectedFilters + selectedTypesNum > 0"
class="uk-width-1-1 uk-margin-top uk-margin-medium-bottom ">
<div class="uk-flex uk-flex-bottom">
<span class="uk-margin-small-right">Filters: </span>
<ng-container *ngTemplateOutlet="selected_filters_pills; context: {}"></ng-container>
</div>
</div>
<div *ngIf="openaireLink && (searchUtils.totalResults > 0 || !loadPaging )"><a
class="uk-margin-top uk-button uk-button-text"
[href]="openaireLink+this.routerHelper.createQueryParamsString(this.parameterNames, this.parameterValues)"
@ -532,3 +611,28 @@
</div>
</div>
</div>
<div *ngIf="properties.isDashboard" id="style_switcher" class="filters_switcher"
[class.switcher_active]="filterToggle">
<div id="style_switcher_toggle" (click)="filterToggle= !filterToggle">
<i class=" uk-text-muted">
<svg style="margin-top: 6px;" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
viewBox="0 0 24 24"
fill="white" width="24px" height="24px">
<g>
<path d="M0,0h24 M24,24H0" fill="none"/>
<path
d="M4.25,5.61C6.57,8.59,10,13,10,13v5c0,1.1,0.9,2,2,2h0c1.1,0,2-0.9,2-2v-5c0,0,3.43-4.41,5.75-7.39 C20.26,4.95,19.79,4,18.95,4H5.04C4.21,4,3.74,4.95,4.25,5.61z"/>
<path d="M0,0h24v24H0V0z" fill="none"/>
</g>
</svg>
</i>
</div>
<div class="uk-padding-small uk-padding-remove-top">
<div class="uk-text-right" ><a (click)="filterToggle=!filterToggle"> <i
class=" material-icons md-icon"></i>
</a></div>
<div class="uk-padding-small uk-padding-remove-top uk-overflow-auto" style="height:calc(100vh - 100px);">
<ng-container *ngTemplateOutlet="filters_column; context: {}"></ng-container>
</div>
</div>
</div>

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

@ -104,6 +104,9 @@ export class NewSearchPageComponent {
@Input() entitiesSelection:boolean = true;
@Input() showAdvancedSearchLink:boolean = true;
//Dashboard
filterToggle = false;
constructor(private route: ActivatedRoute,
private location: Location,
private _meta: Meta,
@ -217,6 +220,9 @@ export class NewSearchPageComponent {
}
goTo(page: number = 1, scroll:boolean = true) {
if(this.properties.isDashboard && this.filterToggle){
this.filterToggle=false;
}
if(this.offcanvasElement) {
UIkit.offcanvas(this.offcanvasElement.nativeElement).hide();
}
@ -861,7 +867,7 @@ export class NewSearchPageComponent {
allFqs += fq;
}
}
if (this.customFilter) {
if(this.customFilter && this.customFilter.isHiddenFilter){
allFqs += "&fq=" + StringUtils.URIEncode(this.customFilter.queryFieldName + " exact " + StringUtils.quote((this.customFilter.valueId)));
}

5
searchPages/searchUtils/searchUtils.class.ts
View File

@ -14,10 +14,9 @@ export class SearchCustomFilter{
queryFieldName:string; //country
valueId:string; //gr
valueName:string; // Greece
isApplied:boolean;
isHiddenFilter:boolean;
constructor( fieldName:string, queryFieldName:string, valueId:string, valueName:string ){
this.isApplied = true;
this.isHiddenFilter = true;
this.fieldName = fieldName;
this.queryFieldName = queryFieldName;
this.valueId = valueId;