[Library|Trunk]
Search: move quick selections to the left together with the filters QuickSelections component: create vertical layout, similar to search use parameter for delay time git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@58815 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
argiro.kokogiannaki
parent
026dd123fd
commit
2ace16bf71
|
|
@ -29,7 +29,7 @@ export class AddThisComponent implements OnInit {
|
|||
this.route.queryParams.subscribe(data => {
|
||||
try {
|
||||
if (!this.document.getElementById('addThisScript') && typeof document !== 'undefined') {
|
||||
console.log(" create script AddThis")
|
||||
// console.log(" create script AddThis");
|
||||
const renderer = this.rendererFactory.createRenderer(this.document, {
|
||||
id: '-1',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
|
|
|
|||
|
|
@ -16,18 +16,18 @@
|
|||
<div>
|
||||
|
||||
|
||||
<quick-selections [resultTypes]="resultTypes" (typeChange)="queryChanged()" [isDisabled]="isDisabled"
|
||||
<!-- <quick-selections [resultTypes]="resultTypes" (typeChange)="queryChanged()" [isDisabled]="isDisabled"
|
||||
[quickFilter]="quickFilter" [QFselected]="(quickFilter)?quickFilter.selected:null"
|
||||
[properties]="properties" class="uk-grid "
|
||||
></quick-selections>
|
||||
<hr *ngIf="resultTypes || quickFilter" class="uk-margin-small">
|
||||
<hr *ngIf="resultTypes || quickFilter" class="uk-margin-small">-->
|
||||
<table class=" uk-table uk-table-responsive uk-table-small uk-margin-remove">
|
||||
<tr>
|
||||
<td class="uk-text-muted uk-text-uppercase">Field to search</td>
|
||||
<td class="uk-text-muted uk-text-uppercase uk-width-1-2">Term</td>
|
||||
</tr>
|
||||
<tr *ngFor="let selectedField of selectedFields; let i = index" class="-row ">
|
||||
<td><mat-select [(ngModel)]="selectedField.id" name="selectField_{{i}}" [disableOptionCentering]="true" class="matSelection uk-input" panelClass="matSelectionPanel"
|
||||
<td><mat-select [(ngModel)]="selectedField.id" name="selectField_{{i}}" [disableOptionCentering]="true" class="matSelection" panelClass="matSelectionPanel"
|
||||
(ngModelChange)="fieldIdsChanged(i,selectedField.id)"><!--(click)="fieldIdsChanged(i)" -->
|
||||
<mat-option *ngFor="let id of fieldIds" [value]="id">{{fieldIdsMap[id].name}} </mat-option>
|
||||
</mat-select></td>
|
||||
|
|
@ -147,12 +147,12 @@
|
|||
[placeholder]="formPlaceholderText" aria-describedby="sizing-addon2"
|
||||
[(ngModel)]="selectedFields[0].value" name="keyword">
|
||||
</div>
|
||||
<div class=" uk-width-xlarge@l uk-width-large@m uk-width-medium" [class.quickSelectionsBox]="(resultTypes || quickFilter)">
|
||||
<!-- <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>
|
||||
<div class="uk-padding-remove-left uk-margin-small-top">
|
||||
<button (click)="simpleKeywordChanged(null)" type="submit"
|
||||
|
|
|
|||
|
|
@ -1,13 +1,33 @@
|
|||
<ng-template #filters_column>
|
||||
<!-- let-dynamic_content="dynamic_content">-->
|
||||
<div *ngIf="selectedRangeFilters > 0 || selectedFilters > 0" class="uk-width-1-1 uk-margin-top uk-margin-medium-bottom ">
|
||||
<div *ngIf="selectedRangeFilters+selectedFilters + selectedTypesNum > 0"
|
||||
class="uk-width-1-1 uk-margin-top uk-margin-medium-bottom ">
|
||||
<div class="uk-grid uk-flex uk-flex-bottom">
|
||||
<h5 class="uk-text-bold">Filters</h5>
|
||||
<a *ngIf="(selectedRangeFilters+selectedFilters)>1" (click)="clearFilters()" [class]="((disableForms)?'uk-disabled uk-link-muted':'')+' portal-link ' + 'uk-width-1-2'">
|
||||
<a *ngIf="(selectedRangeFilters+selectedFilters + selectedTypesNum)>1" (click)="clearFilters()"
|
||||
[class]="((disableForms)?'uk-disabled uk-link-muted':'')+' portal-link ' + 'uk-width-1-2'">
|
||||
Clear All
|
||||
</a>
|
||||
</div>
|
||||
<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">
|
||||
|
|
@ -51,6 +71,10 @@
|
|||
</div>
|
||||
<ul *ngIf="!showUnknownFilters"
|
||||
[class]="'uk-list uk-list-divider' + (selectedRangeFilters == 0 && selectedFilters == 0 ? ' uk-margin-small-top' : '')">
|
||||
<quick-selections [resultTypes]="resultTypes" (typeChange)="queryChanged()" [isDisabled]="disableForms"
|
||||
[quickFilter]="quickFilter" [QFselected]="(quickFilter)?quickFilter.selected:null"
|
||||
[properties]="properties" [vertical]="true" [delayTime]="0" >
|
||||
</quick-selections>
|
||||
<ng-container *ngFor="let filter of rangeFilters">
|
||||
<li>
|
||||
<range-filter [isDisabled]="disableForms" [filter]="filter" (onFilterChange)="filterChanged($event)"></range-filter>
|
||||
|
|
@ -256,18 +280,18 @@
|
|||
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="includeOnlyResultsAndFilter && (resultTypes || quickFilter)"
|
||||
<div *ngIf="includeOnlyResultsAndFilter "
|
||||
class="uk-margin-medium-top uk-margin-medium-bottom">
|
||||
<a *ngIf ="showAdvancedSearchLink && advancedSearchLink" routerLinkActive="router-link-active"
|
||||
[routerLink]="advancedSearchLink" style="z-index:1;" [queryParams]="this.routerHelper.createQueryParams(this.parameterNames, this.parameterValues)"
|
||||
[class]="(disableForms?' uk-disabled uk-link-muted ':'') +' portal-link uk-float-right '">Advanced search
|
||||
</a>
|
||||
<quick-selections [resultTypes]="resultTypes"
|
||||
<!-- <quick-selections [resultTypes]="resultTypes"
|
||||
(typeChange)="queryChanged()"
|
||||
[isDisabled]="disableForms"
|
||||
[quickFilter]="quickFilter" [QFselected]="(quickFilter)?quickFilter.selected:null"
|
||||
[properties]="properties">
|
||||
</quick-selections>
|
||||
</quick-selections>-->
|
||||
|
||||
</div>
|
||||
<div class="uk-grid helper-grid uk-padding-small uk-padding-remove-vertical uk-margin-large-bottom" >
|
||||
|
|
|
|||
|
|
@ -76,6 +76,9 @@ export class NewSearchPageComponent {
|
|||
@Input() simpleView: boolean = true;
|
||||
@Input() formPlaceholderText = "Type Keywords...";
|
||||
@Input() resultTypes = null;
|
||||
resultTypeOptions = [{"id":"publication", "name":"Publications"},{"id":"dataset", "name":"Research data"},
|
||||
{"id":"software", "name":"Software"},{"id":"other", "name":" Other research products"}];
|
||||
selectedTypesNum = 0;
|
||||
@Input() quickFilter: { filter: Filter, selected: boolean, filterId: string, value: string };
|
||||
@Input() includeOnlyResultsAndFilter:boolean = false;
|
||||
@Input() showBreadcrumb:boolean = false;
|
||||
|
|
@ -1165,9 +1168,11 @@ public static createRangeFilterQuery(rangeField,selectedFromValue, selectedToVal
|
|||
if (this.resultTypes.other) {
|
||||
values.push("other");
|
||||
}
|
||||
if (values.length > 0) {
|
||||
this.selectedTypesNum = 0;
|
||||
if (values.length > 0 && values.length != 4) {
|
||||
this.parameterNames.push("type");
|
||||
this.parameterValues.push(values.join(","));
|
||||
this.selectedTypesNum = values.length;
|
||||
}
|
||||
if(this.quickFilter) {
|
||||
this.parameterNames.push("qf");
|
||||
|
|
@ -1209,6 +1214,7 @@ public static createRangeFilterQuery(rangeField,selectedFromValue, selectedToVal
|
|||
|
||||
let v: Value = new Value();
|
||||
v.name = RefineResultsUtils.keepPartAfterCharacters(StringUtils.unquote(value), "||");
|
||||
v.name = (v.name.indexOf("::")!=-1)?v.name.substring(v.name.indexOf("::")+2).split("::").join("|"):v.name; // for funding streams
|
||||
v.id = StringUtils.unquote(value);
|
||||
v.selected = true;
|
||||
filter.values.push(v);
|
||||
|
|
@ -1249,10 +1255,10 @@ public static createRangeFilterQuery(rangeField,selectedFromValue, selectedToVal
|
|||
this.resultTypes['other'] = (URLparams["type"].split(",").indexOf("other") != -1);
|
||||
|
||||
} else {
|
||||
this.resultTypes['publication'] = true;
|
||||
this.resultTypes['dataset'] = true;
|
||||
this.resultTypes['software'] = true;
|
||||
this.resultTypes['other'] = true;
|
||||
this.resultTypes['publication'] = false;
|
||||
this.resultTypes['dataset'] = false;
|
||||
this.resultTypes['software'] = false;
|
||||
this.resultTypes['other'] = false;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1391,4 +1397,11 @@ public static createRangeFilterQuery(rangeField,selectedFromValue, selectedToVal
|
|||
this.getRefineFiltersFromURL(params);
|
||||
this.createAdvancedSearchSelectedFiltersFromURLParameters(params);
|
||||
}
|
||||
|
||||
removeResultType(type){
|
||||
if(this.resultTypes && this.resultTypes[type]){
|
||||
this.resultTypes[type]=false;
|
||||
this.goTo(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import {debounceTime} from "rxjs/operators";
|
|||
@Component({
|
||||
selector: 'quick-selections',
|
||||
template: `
|
||||
<form *ngIf="resultTypes || quickFilter" [formGroup]="control" class="uk-text-small uk-margin-small-bottom uk-grid uk-inline uk-flex uk-margin-small-left">
|
||||
<form *ngIf="!vertical && (resultTypes || quickFilter)" [formGroup]="control" class="uk-text-small uk-margin-small-bottom uk-grid uk-inline uk-flex uk-margin-small-left">
|
||||
<div *ngIf="quickFilter" class="uk-margin-small-top uk-padding-remove-left uk-margin-right ">
|
||||
<span class="uk-text-bold">{{quickFilter.value}}</span>
|
||||
<mat-slide-toggle
|
||||
|
|
@ -26,6 +26,48 @@ import {debounceTime} from "rxjs/operators";
|
|||
</span>
|
||||
</div>
|
||||
</form>
|
||||
<form *ngIf="vertical && (resultTypes || quickFilter)" [formGroup]="control" class="uk-margin-small-bottom uk-list uk-list-divider">
|
||||
<li *ngIf="quickFilter" class="uk-margin-small-bottom ">
|
||||
<div class="uk-margin-small-top uk-padding-remove-left uk-margin-right ">
|
||||
<h5 class="">{{quickFilter.value}}</h5>
|
||||
<mat-slide-toggle
|
||||
class="uk-margin-small-left" formControlName="QFselected" (change)="quickFilterChanged()">
|
||||
</mat-slide-toggle>
|
||||
</div>
|
||||
</li>
|
||||
<li *ngIf="resultTypes && showEntities" class="uk-margin-small-bottom ng-star-inserted">
|
||||
<div class="uk-margin-small-top uk-margin-bottom uk-grid uk-flex uk-flex-bottom">
|
||||
<h5 class="uk-margin-bottom-remove" title="Community">Research Type ({{(this.showPublications + this.showDatasets + this.showSoftware + this.showOrp)}})</h5>
|
||||
<a *ngIf="selectedTypesNum>0" (click)="clearTypes()" class="portal-link">
|
||||
Clear
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div *ngIf="showPublications" class="uk-animation-fade filterItem searchFilterItem uk-text-small ng-star-inserted">
|
||||
<div title="Publications">
|
||||
<label class="ng-star-inserted"><input type="checkbox" id="publ" name="Publications" formControlName="publication" (change)="changed()"> Publications</label>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="showDatasets" class="uk-animation-fade filterItem searchFilterItem uk-text-small ng-star-inserted">
|
||||
<div title="Research data">
|
||||
<label class="ng-star-inserted"><input type="checkbox" formControlName="dataset" (change)="changed()"> Research data </label>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="showSoftware" class="uk-animation-fade filterItem searchFilterItem uk-text-small ng-star-inserted">
|
||||
<div title="Software">
|
||||
<label class="ng-star-inserted"> <input type="checkbox" formControlName="software" (change)="changed()"> Software</label>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="showOrp" class="uk-animation-fade filterItem searchFilterItem uk-text-small ng-star-inserted">
|
||||
<div title=" Other research products">
|
||||
<label class="ng-star-inserted"><input type="checkbox" formControlName="other" (change)="changed()"> Other research products</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</form>
|
||||
`
|
||||
})
|
||||
|
||||
|
|
@ -38,12 +80,15 @@ export class QuickSelectionsComponent implements OnChanges {
|
|||
control: FormGroup;
|
||||
initialized = false;
|
||||
@Input() properties: EnvProperties;
|
||||
@Input() vertical: boolean=false;
|
||||
showPublications:boolean= false;
|
||||
showDatasets:boolean= false;
|
||||
showSoftware: boolean = false;
|
||||
showOrp: boolean = false;
|
||||
showEntities = false;
|
||||
resultTypesObs: Subscription ;
|
||||
selectedTypesNum = 0;
|
||||
@Input() delayTime = 0;
|
||||
private clicks = new Subject();
|
||||
constructor(private _fb: FormBuilder, private config: ConfigurationService) {
|
||||
|
||||
|
|
@ -72,7 +117,7 @@ export class QuickSelectionsComponent implements OnChanges {
|
|||
this.resultTypes.dataset = value.dataset;
|
||||
this.resultTypes.software = value.software;
|
||||
this.resultTypes.other = value.other;
|
||||
if (this.resultTypes && !this.resultTypes.publication && !this.resultTypes.dataset && !this.resultTypes.software && !this.resultTypes.other) {
|
||||
if (this.resultTypes && !this.resultTypes.publication && !this.resultTypes.dataset && !this.resultTypes.software && !this.resultTypes.other && !this.vertical) {
|
||||
this.resultTypes.publication = true;
|
||||
this.resultTypes.dataset = true;
|
||||
this.resultTypes.software = true;
|
||||
|
|
@ -123,7 +168,7 @@ export class QuickSelectionsComponent implements OnChanges {
|
|||
});
|
||||
}
|
||||
this.resultTypesObs = this.clicks.pipe(
|
||||
debounceTime(2000)
|
||||
debounceTime(this.delayTime)
|
||||
).subscribe(e =>{this.actuallyChanged()} );
|
||||
|
||||
}
|
||||
|
|
@ -157,7 +202,16 @@ export class QuickSelectionsComponent implements OnChanges {
|
|||
other: (this.resultTypes && this.resultTypes.other)?this.resultTypes.other:null,
|
||||
QFselected: this.QFselected
|
||||
});
|
||||
this.selectedTypesNum = (this.resultTypes && this.resultTypes.publication)?this.resultTypes.publication:0 + (this.resultTypes && this.resultTypes.dataset)?this.resultTypes.dataset:0+ (this.resultTypes && this.resultTypes.software)?this.resultTypes.software:0 + (this.resultTypes && this.resultTypes.other)?this.resultTypes.other:null;
|
||||
}
|
||||
|
||||
clearTypes(){
|
||||
this.resultTypes.publication = false;
|
||||
this.resultTypes.dataset = false;
|
||||
this.resultTypes.software = false;
|
||||
this.resultTypes.other = false;
|
||||
this.setFormValues();
|
||||
this.changed()
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue