claimsByToken.component: min-height added in data tables | searchFilterModal.component: component added to show all values of a filter in search pages - modal closes when a checkbox is clicked | in search pages and browse results modal added to show all values of a filter with more than 5 values
git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-portal/trunk@47255 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
konstantina.galouni
parent
941b3640f2
commit
ccb28ccf02
|
|
@ -49,7 +49,7 @@ import {RouterHelper} from '../../utils/routerHelper.class';
|
|||
<div class = "uk-alert uk-alert-primary " >No pending claims found.</div>
|
||||
</div>
|
||||
|
||||
<div class="uk-overflow-container">
|
||||
<div class="uk-overflow-container custom-dataTable-content">
|
||||
<!--table *ngIf="pending_claims && pending_claims.length > 0" class="uk-table uk-table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -78,7 +78,7 @@ import {RouterHelper} from '../../utils/routerHelper.class';
|
|||
</tbody>
|
||||
</table-->
|
||||
|
||||
<table *ngIf="pending_claims && pending_claims.length > 0" class="uk-table uk-table-striped custom-dataTable-content"
|
||||
<table *ngIf="pending_claims && pending_claims.length > 0" class="uk-table uk-table-striped"
|
||||
[mfData]="pending_claims" #mf1="mfDataTable" [mfRowsOnPage]="rowsOnPage" [mfActivePage]="1">
|
||||
<!--[(mfSortBy)]="sortByClaimDate1" (mfSortOrder)="sortOrder"-->
|
||||
<thead>
|
||||
|
|
@ -107,18 +107,12 @@ import {RouterHelper} from '../../utils/routerHelper.class';
|
|||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td>
|
||||
</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>
|
||||
<div>
|
||||
<paging-no-load [currentPage]="1" [totalResults]="pending_claims.length" [size]="rowsOnPage" (pageChange)="refreshTable(mf1, $event)"></paging-no-load>
|
||||
</td>
|
||||
</tr>
|
||||
</div>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2> Already Curated Claims</h2>
|
||||
|
||||
|
|
@ -126,7 +120,7 @@ import {RouterHelper} from '../../utils/routerHelper.class';
|
|||
<div class = "uk-alert uk-alert-primary " >No curated claims found.</div>
|
||||
</div>
|
||||
|
||||
<div class="uk-overflow-container">
|
||||
<div class="uk-overflow-container custom-dataTable-content">
|
||||
<!--table *ngIf="curated_claims && curated_claims.length > 0" class="uk-table uk-table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
|
|||
|
|
@ -15,27 +15,35 @@ import {RouterHelper} from '../../utils/routerHelper.class';
|
|||
template: `
|
||||
|
||||
|
||||
<h4 class="tm-article-subtitle">{{filter.title}}</h4>
|
||||
<h4 class="tm-article-subtitle">{{filter.title}}</h4>
|
||||
<div *ngIf="filter.values.length == 0" class="uk-alert uk-alert-primary" role="alert">No {{filter.title}} statistics found</div>
|
||||
<ul *ngIf="filter.values.length > 0 && !viewAll" class="uk-list uk-list-line browseFilters">
|
||||
<ul *ngIf="filter.values.length > 0 " class="uk-list uk-list-line browseFilters">
|
||||
<li *ngFor= "let value of filter.values.slice(0,5)"><!--a [href]="baseUrl+'?'+filter.filterId+'='+value.id">{{_formatName(value)}} ({{value.number}})</a-->
|
||||
<a class = " filterItem" [queryParams]="routerHelper.createQueryParam(filter.filterId,quote(value.id))" routerLinkActive="router-link-active" [routerLink]=baseUrl>
|
||||
<span class="filterName"><div title = "{{value.name}}">{{_formatName(value)}} </div></span><span class="filterNumber" > ({{value.number}})</span></a>
|
||||
</li>
|
||||
<li *ngIf= " filter.values.length > 5 && !viewAll " (click)="viewAll=true;">
|
||||
<span ><span class="uk-text-muted clickable">View more </span><a><span uk-icon="icon: triangle-right"></span></a></span>
|
||||
</li>
|
||||
</ul>
|
||||
<ul *ngIf="filter.values.length > 0 && viewAll" class="uk-list uk-list-line browseFilters">
|
||||
<li *ngFor= "let value of filter.values"><!--a [href]="baseUrl+'?'+filter.filterId+'='+value.id">{{_formatName(value)}} ({{value.number}})</a-->
|
||||
<a class = " filterItem" [queryParams]="routerHelper.createQueryParam(filter.filterId,quote(value.id))" routerLinkActive="router-link-active" [routerLink]=baseUrl>
|
||||
<span class="filterName"><div title = "{{value.name}}">{{_formatName(value)}} </div></span><span class="filterNumber" > ({{value.number}})</span></a>
|
||||
</li>
|
||||
<li *ngIf= " filter.values.length > 5 && viewAll " (click)="viewAll=false;">
|
||||
<span ><span class="uk-text-muted clickable">View less </span><a><span uk-icon="icon: triangle-up"></span></a></span>
|
||||
<li *ngIf= " filter.values.length > 5 ">
|
||||
<span uk-toggle="target: #modal"><span class="uk-text-muted clickable">View more </span><a><span uk-icon="icon: triangle-right"></span></a></span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<!-- This is the modal -->
|
||||
<div id="modal" uk-modal>
|
||||
<div class="uk-modal-dialog uk-modal-body">
|
||||
<button class="uk-modal-close-default" type="button" uk-close></button>
|
||||
|
||||
<h4 class="tm-article-subtitle">{{filter.title}}</h4>
|
||||
<ul *ngIf="filter.values.length > 0" class="uk-list uk-list-line browseFilters">
|
||||
<li *ngFor= "let value of filter.values"><!--a [href]="baseUrl+'?'+filter.filterId+'='+value.id">{{_formatName(value)}} ({{value.number}})</a-->
|
||||
<a class = "uk-modal-close filterItem" [queryParams]="routerHelper.createQueryParam(filter.filterId,quote(value.id))" routerLinkActive="router-link-active" [routerLink]=baseUrl>
|
||||
<span class="filterName"><div title = "{{value.name}}">{{_formatName(value)}} </div></span><span class="filterNumber" > ({{value.number}})</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
`
|
||||
|
||||
})
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@ import {Component, Input, Output, EventEmitter} from '@angular/core';
|
|||
import {Observable} from 'rxjs/Observable';
|
||||
|
||||
import { Filter, Value} from './searchHelperClasses.class';
|
||||
import {Open} from '../../utils/modal/open.component';
|
||||
|
||||
@Component({
|
||||
selector: 'search-filter',
|
||||
template: `
|
||||
|
||||
<ul *ngIf= "filter.values.length >0" class = "uk-accordion uk-animation-fade" uk-accordion="">
|
||||
<li class="uk-open">
|
||||
<h3 class="uk-accordion-title uk-margin-bottom-remove uk-margin-top">{{_formatTitle(filter.title,filter.values.length)}}
|
||||
|
|
@ -19,20 +19,20 @@ import { Filter, Value} from './searchHelperClasses.class';
|
|||
<input [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" />
|
||||
{{_formatName(value)}} </div></span><span class="filterNumber" *ngIf = "showResultCount === true" > ({{value.number}})</span>
|
||||
</div>
|
||||
<div class="uk-grid-divider uk-margin-remove"></div>
|
||||
<div *ngFor = "let value of getNotSelectedValues(filter)" class = "uk-animation-fade filterItem">
|
||||
<!--div class="uk-grid-divider uk-margin-remove"></div-->
|
||||
<hr *ngIf="getSelectedValues(filter).length > 0 && getNotSelectedValues(filter).length > 0" class="uk-grid-divider uk-margin-remove">
|
||||
<div *ngFor = "let value of getNotSelectedValues(filter).slice(0,5-getSelectedValues(filter).length)" class = "uk-animation-fade filterItem">
|
||||
|
||||
<span class="filterName"><div title = "{{value.name}}"> <input [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" />
|
||||
{{_formatName(value)}} </div></span><span class="filterNumber" *ngIf = "showResultCount === true" > ({{value.number}})</span>
|
||||
</div>
|
||||
|
||||
<a *ngIf="(getSelectedValues(filter).length + getNotSelectedValues(filter).length) > 5" (click)="toggle()">Show More</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
`
|
||||
})
|
||||
|
||||
|
|
@ -43,6 +43,16 @@ export class SearchFilterComponent {
|
|||
public showAll:boolean = false;
|
||||
public _maxCharacters:number =28;
|
||||
|
||||
@Output() toggleModal = new EventEmitter();
|
||||
|
||||
@Output() modalChange = new EventEmitter();
|
||||
filterModalChange() {
|
||||
console.info("Modal Changed");
|
||||
this.modalChange.emit({
|
||||
value: true
|
||||
});
|
||||
//this.close();
|
||||
}
|
||||
|
||||
constructor () {
|
||||
}
|
||||
|
|
@ -71,7 +81,6 @@ export class SearchFilterComponent {
|
|||
this.filter.countSelectedValues--;
|
||||
// this.reorderFilterValues();
|
||||
}
|
||||
|
||||
}
|
||||
getSelectedValues(filter):any{
|
||||
var selected = [];
|
||||
|
|
@ -121,4 +130,12 @@ export class SearchFilterComponent {
|
|||
// this.filter.values.splice(0, 0, selectedValue);
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
toggle() {
|
||||
this.toggleModal.emit({
|
||||
value: this.filter
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,101 @@
|
|||
import {Component, ViewEncapsulation, ComponentRef, ElementRef, Input, EventEmitter, Output} from '@angular/core';
|
||||
// import { DynamicComponentLoader} from '@angular/core';
|
||||
|
||||
import {Open} from '../../utils/modal/open.component';
|
||||
import { Filter} from './searchHelperClasses.class';
|
||||
|
||||
@Component({
|
||||
selector: 'modal-search-filter',
|
||||
template: `
|
||||
<div *ngIf="filter!=undefined" [class]="(!isOpen)?'uk-modal ':'uk-modal uk-open uk-animation-fade'" uk-modal [open]="!isOpen" id="modal-{{filter.filterId}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
||||
<div class="uk-modal-dialog uk-modal-body">
|
||||
<button type="button" class="uk-modal-close-default" uk-close (click)="close()"></button>
|
||||
|
||||
|
||||
<h3 class="uk-margin-bottom-remove uk-margin-top">
|
||||
{{filter.title}}
|
||||
</h3>
|
||||
|
||||
<div class="uk-accordion-content searchFilterBoxValues ">
|
||||
<div *ngFor = "let value of getSelectedValues(filter)" class = "uk-animation-fade filterItem">
|
||||
|
||||
<span class="filterName"><div title = "{{value.name}}">
|
||||
<input [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterModalChange(value.selected)">
|
||||
{{value.name}} </div></span><span class="filterNumber" *ngIf = "showResultCount === true" > ({{value.number}})</span>
|
||||
</div>
|
||||
<hr *ngIf="getSelectedValues(filter).length > 0 && getNotSelectedValues(filter).length > 0" class="uk-grid-divider uk-margin-remove">
|
||||
<div *ngFor = "let value of getNotSelectedValues(filter)" class = "uk-animation-fade filterItem">
|
||||
<span class="filterName"><div title = "{{value.name}}">
|
||||
<input [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterModalChange(value.selected)">
|
||||
{{value.name}} </div></span><span class="filterNumber" *ngIf = "showResultCount === true" > ({{value.number}})</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
`,
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
/**
|
||||
* API to an open search filter window.
|
||||
*/
|
||||
export class SearchFilterModalComponent{
|
||||
@Input() filter: Filter;
|
||||
@Output() modalChange = new EventEmitter();
|
||||
|
||||
public isOpen:boolean=false;
|
||||
|
||||
constructor( public _elementRef: ElementRef){}
|
||||
|
||||
filterModalChange(selected:boolean) {
|
||||
console.info("Modal Changed");
|
||||
this.filterChange(selected);
|
||||
this.modalChange.emit({
|
||||
value: selected
|
||||
});
|
||||
this.close();
|
||||
}
|
||||
filterChange(selected:boolean){
|
||||
if(selected){
|
||||
this.filter.countSelectedValues++;
|
||||
// this.reorderFilterValues();
|
||||
}else{
|
||||
this.filter.countSelectedValues--;
|
||||
// this.reorderFilterValues();
|
||||
}
|
||||
}
|
||||
getSelectedValues(filter):any{
|
||||
var selected = [];
|
||||
if(filter.countSelectedValues >0){
|
||||
for (var i=0; i < filter.values.length; i++){
|
||||
if(filter.values[i].selected){
|
||||
selected.push(filter.values[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
return selected;
|
||||
|
||||
}
|
||||
getNotSelectedValues(filter):any{
|
||||
var notSselected = [];
|
||||
if(filter.countSelectedValues >0){
|
||||
for (var i=0; i < filter.values.length; i++){
|
||||
if(!filter.values[i].selected){
|
||||
notSselected.push(filter.values[i]);
|
||||
}
|
||||
}
|
||||
}else {
|
||||
notSselected = filter.values;
|
||||
}
|
||||
return notSselected;
|
||||
}
|
||||
|
||||
open() {
|
||||
this.isOpen = true;
|
||||
}
|
||||
|
||||
close() {
|
||||
this.isOpen = false;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -8,6 +8,8 @@ import {SearchUtilsClass} from './searchUtils.class';
|
|||
import {DOI, StringUtils} from '../../utils/string-utils.class';
|
||||
import {ModalLoading} from '../../utils/modal/loading.component';
|
||||
import { Meta} from '../../../angular2-meta';
|
||||
import{SearchFilterComponent} from './searchFilter.component';
|
||||
import {SearchFilterModalComponent} from './searchFilterModal.component';
|
||||
|
||||
@Component({
|
||||
selector: 'search-page',
|
||||
|
|
@ -37,7 +39,7 @@ import { Meta} from '../../../angular2-meta';
|
|||
</div>
|
||||
<div class="uk-grid uk-width-1-1 uk-margin">
|
||||
<div class=" search-filters uk-width-1-4@l uk-width-1-4@m uk-width-1-1@s">
|
||||
<search-filter *ngFor="let filter of filters " [filter]="filter" [showResultCount]=showResultCount (change)="filterChanged($event)"></search-filter>
|
||||
<search-filter *ngFor="let filter of filters " [filter]="filter" [showResultCount]=showResultCount (change)="filterChanged($event)" (toggleModal)="toggleModal($event)"></search-filter>
|
||||
</div>
|
||||
|
||||
<div class="uk-width-3-4@m uk-width-3-4@l uk-width-1-1@s" >
|
||||
|
|
@ -66,6 +68,8 @@ import { Meta} from '../../../angular2-meta';
|
|||
|
||||
<modal-loading [message]= "'Loading results...'"></modal-loading>
|
||||
|
||||
<modal-search-filter [filter]="currentFilter" (modalChange)="filterChanged($event)"></modal-search-filter>
|
||||
|
||||
`
|
||||
})
|
||||
export class SearchPageComponent {
|
||||
|
|
@ -94,6 +98,11 @@ export class SearchPageComponent {
|
|||
public urlParam: string;
|
||||
public parameterNames:string[] =[];
|
||||
public parameterValues:string[] =[];
|
||||
|
||||
@ViewChild (SearchFilterModalComponent) searchFilterModal : SearchFilterModalComponent ;
|
||||
public currentFilter: Filter;
|
||||
|
||||
|
||||
constructor (private location: Location , private _meta: Meta) {
|
||||
}
|
||||
|
||||
|
|
@ -107,6 +116,12 @@ export class SearchPageComponent {
|
|||
ngAfterViewChecked(){
|
||||
|
||||
}
|
||||
|
||||
toggleModal($event) {
|
||||
this.currentFilter = $event.value;
|
||||
this.searchFilterModal.open();
|
||||
}
|
||||
|
||||
updateDescription(description:string){
|
||||
this._meta.updateMeta("description", description);
|
||||
this._meta.updateMeta("og:description", description);
|
||||
|
|
@ -443,6 +458,7 @@ export class SearchPageComponent {
|
|||
|
||||
}
|
||||
filterChanged($event){
|
||||
console.info("filter Changed");
|
||||
this.goTo(1);
|
||||
}
|
||||
keywordChanged($event) {
|
||||
|
|
|
|||
|
|
@ -7,18 +7,22 @@ import{SearchPageComponent} from './searchPage.component';
|
|||
import{SearchFormModule} from './searchForm.module';
|
||||
import{SearchResultsModule} from './searchResults.module';
|
||||
import{SearchFilterComponent} from './searchFilter.component';
|
||||
import{SearchFilterModalComponent} from './searchFilterModal.component';
|
||||
import{LoadingModalModule} from '../../utils/modal/loadingModal.module';
|
||||
import {ReportsServiceModule} from '../../services/reportsService.module';
|
||||
import{SearchPagingModule} from './searchPaging.module';
|
||||
import {SearchDownloadModule} from './searchDownload.module';
|
||||
import {ModalModule} from '../../utils/modal/modal.module';
|
||||
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, FormsModule,RouterModule, SearchFormModule, SearchResultsModule, LoadingModalModule, ReportsServiceModule, SearchPagingModule, SearchDownloadModule
|
||||
CommonModule, FormsModule,RouterModule, SearchFormModule, SearchResultsModule, LoadingModalModule, ReportsServiceModule, SearchPagingModule, SearchDownloadModule, ModalModule
|
||||
],
|
||||
declarations: [
|
||||
SearchPageComponent,
|
||||
SearchFilterComponent
|
||||
SearchFilterComponent,
|
||||
SearchFilterModalComponent
|
||||
,
|
||||
],
|
||||
|
||||
|
|
@ -26,7 +30,7 @@ import {SearchDownloadModule} from './searchDownload.module';
|
|||
],
|
||||
exports: [
|
||||
SearchPageComponent,
|
||||
SearchFilterComponent
|
||||
SearchFilterComponent
|
||||
]
|
||||
})
|
||||
export class SearchPageModule { }
|
||||
|
|
|
|||
|
|
@ -142,7 +142,7 @@
|
|||
}
|
||||
|
||||
.custom-dataTable-content {
|
||||
min-height: 1000px;
|
||||
min-height: 600px;
|
||||
}
|
||||
|
||||
.filterItem span {
|
||||
|
|
|
|||
Loading…
Reference in New Issue