[Library|Trunk]

Search all: use route instead of location.pathname in order to work when the base url is not "/"
Advanced search:
	fix sizes and spaces
	autocomplete margin
	date filter sizes
	


git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@58287 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
argiro.kokogiannaki 2020-03-17 16:16:21 +00:00
parent 86e3c978b9
commit 0982dec4c3
6 changed files with 18 additions and 98 deletions

View File

@ -517,7 +517,7 @@ export class SearchAllComponent {
this.parameters["q"] = this.keyword;
this.parameters["op"] = "and";
}
this.router.navigate([location.pathname], {queryParams: this.parameters});
this.router.navigate(["/search/find"], {queryParams: this.parameters});
}
}

View File

@ -24,7 +24,7 @@
<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">Term</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"
@ -96,13 +96,13 @@
</div>
</td>
<td class=" ">
<span type="button" class="uk-icon-button portal-button-reverse "
<span type="button" class="uk-icon-button portal-button-reverse clickable "
(click)="removeField(i)">
<span uk-icon="minus"> </span>
</span>
<div *ngIf="i == selectedFields.length-1 " class="uk-margin-small-top">
<span type="button"
class="uk-icon-button portal-button "
class="uk-icon-button portal-button clickable "
(click)="addField()">
<span uk-icon="plus">
</span>

View File

@ -3,7 +3,6 @@ import {Observable} from 'rxjs';
import { Filter, Value, DateValue} from './searchHelperClasses.class';
import {IMyOptions, IMyDateModel} from '../../utils/my-date-picker/interfaces/index';
// import {IMyDateModel} from '../../../utils/my-date-picker/interfaces/my-date-model.interface';
import {Dates} from '../../utils/string-utils.class';
import {FormControl} from "@angular/forms";
import {MatDatepickerInputEvent} from "@angular/material";
@ -11,59 +10,37 @@ import {MatDatepickerInputEvent} from "@angular/material";
@Component({
selector: 'date-filter',
template: `
<div class="uk-input uk-width-medium">
<div class="uk-input ">
<mat-select *ngIf="dateValue && dateValue.type!='range' " name="{{'select_date_type'+filterId}}" class=" matSelection uk-input" [(ngModel)]=dateValue.type [disableOptionCentering]="true" panelClass="matSelectionPanel">
<mat-option *ngFor="let type of dateValue.types let i = index" [value]="type" (click)="typeChanged(type)">{{dateValue.typesTitle[i]}}</mat-option>
</mat-select>
<div *ngIf="dateValue && dateValue.type=='range' ">
<table class=" uk-table uk-table-responsive" >
<tr>
<td class="uk-padding-remove">
<div class=" uk-grid uk-" >
<div class="uk-padding-remove uk-margin-small-left uk-width-small">
<mat-select name="{{'select_date_type'+filterId}}" [(ngModel)]=dateValue.type [disableOptionCentering]="true" class="matSelection uk-input" panelClass="matSelectionPanel">
<mat-option *ngFor="let type of dateValue.types let i = index" [value]="type" (click)="typeChanged(type)">{{dateValue.typesTitle[i]}}</mat-option>
</mat-select>
</td>
<!-- <td>-->
<!-- From-->
<!-- </td>-->
<td class="uk-padding-remove-vertical" style="width: 112px;">
<mat-form-field style="max-width: 120px;">
</div>
<div class="uk-padding-remove uk-margin-small-left" style="">
<mat-form-field class="uk-width-small">
<input matInput [matDatepicker]="pickerFrom" placeholder="Choose from date"
[formControl]="fromDate" (click)="pickerFrom.open()" (dateChange)="fromDateChanged($event)">
<mat-datepicker-toggle matSuffix [for]="pickerFrom"></mat-datepicker-toggle>
<mat-datepicker #pickerFrom></mat-datepicker>
</mat-form-field>
</td>
<!-- <td>-->
<!-- To -->
<!-- </td>-->
<td class="uk-padding-remove" style="width: 112px;">
<mat-form-field style="max-width: 120px;">
</div>
<div class="uk-padding-remove uk-margin-small-left" style="">
<mat-form-field class="uk-width-small">
<input matInput [matDatepicker]="pickerTo" placeholder="Choose to date"
[formControl]="toDate" (click)="pickerTo.open()" (dateChange)="toDateChanged($event)">
<mat-datepicker-toggle matSuffix [for]="pickerTo"></mat-datepicker-toggle>
<mat-datepicker #pickerTo></mat-datepicker>
</mat-form-field>
</td>
</tr>
</table>
</div>
</div>
<!-- <div *ngIf="dateValue.type=='range' " class="-row dateFilter" >-->
<!-- <table class=" uk-table uk-table-responsive" >-->
<!-- <tr><td>-->
<!-- <select name="{{'select_date_type'+filterId}}" [(ngModel)]=dateValue.type >-->
<!-- <option *ngFor="let type of dateValue.types let i = index" [value]="type" (click)="typeChanged(type)">{{dateValue.typesTitle[i]}}</option>-->
<!-- </select></td>-->
<!-- <td>-->
<!-- From</td><td style="width: 112px;"><my-date-picker name="from" [options]="myDatePickerOptions"-->
<!-- [(ngModel)]="from" (dateChanged)="onFromDateChanged($event)" ></my-date-picker>-->
<!-- </td> <td>-->
<!-- To </td><td style="width: 112px;"> <my-date-picker name="to" [options]="myDatePickerOptions"-->
<!-- [(ngModel)]="to" (dateChanged)="onToDateChanged($event)" ></my-date-picker></td></tr>-->
<!-- </table>-->
<!-- </div>-->
</div>
</div>
</div>
`
})
@ -75,16 +52,6 @@ export class DateFilterComponent {
@Input() validDateFrom: boolean = true;
@Input() validDateTo: boolean = true;
private myDatePickerOptions: IMyOptions = {
// other options...
dateFormat: 'yyyy-mm-dd',
selectionTxtFontSize: '15px',
height:'28px',
width: '100%',
editableDateField: false,
showClearDateBtn: false
};
// Initialized to specific date (09.10.2018).
public from;//: Object = { date: { year: 2018, month: 10, day: 9 } };
public to;//: Object = { date: { year: 2018, month: 10, day: 9 } };
@ -92,35 +59,21 @@ export class DateFilterComponent {
public toDate;
constructor() {
//this.updateDefaultRangeDates(this.dateValue.from,this.dateValue.to);
}
ngOnInit() {
this.updateDefaultRangeDates(this.dateValue.from,this.dateValue.to);
}
updateDefaultRangeDates(df:Date,dt:Date){
//df.setMonth(df.getMonth()-1);
this.fromDate = new FormControl(df);
this.toDate = new FormControl(dt);
//this.from = { date: { year: df.getFullYear(), month: (df.getMonth()+1), day: df.getDate() } };
//this.to = { date: { year: dt.getFullYear(), month: (dt.getMonth()+1), day: dt.getDate() } };
}
typeChanged(type:string){
this.dateValue.setDatesByType(type);
this.updateDefaultRangeDates(this.dateValue.from, this.dateValue.to);
}
/*
onFromDateChanged(event: IMyDateModel) {
this.dateValue.from = Dates.getDateFromString(event.formatted);
this.validDateFrom = true;
}
onToDateChanged(event: IMyDateModel) {
this.dateValue.to = Dates.getDateFromString(event.formatted);
this.validDateTo = true;
}
*/
fromDateChanged(event: MatDatepickerInputEvent<Date>) {
this.dateValue.from = event.value;

View File

@ -1,33 +0,0 @@
import {Component, Input} from '@angular/core';
import {SearchResult} from '../../utils/entities/searchResult';
import {ErrorCodes} from '../../utils/properties/errorCodes';
import {RouterHelper} from '../../utils/routerHelper.class';
@Component({
selector: 'select-content-tabs',
template: `
`
})
export class SelectAllContentTabsComponent {
@Input() searchAll: boolean;
@Input() status: number;
@Input() type: string;
@Input() urlParam: string;
@Input() showLoading: boolean = false;
@Input() showOrganizations: boolean = true;
public errorCodes:ErrorCodes = new ErrorCodes();
public routerHelper:RouterHelper = new RouterHelper();
public errorMessage: string = "No results found";
constructor () {
}
ngOnInit() {}
public quote(params: string):string {
return '"'+params+'"';
}
}

View File

@ -19,7 +19,7 @@ import{EnvProperties} from '../properties/env-properties';
<div class="custom-autocomplete">
<div *ngIf = "showSelected && selectedValue != ''">
<div class="uk-alert-default uk-grid uk-margin-small-left uk-margin-remove-bottom" data-uk-alert="" *ngFor="let item of selected" [title]="showItem(item)" >
<div class="uk-alert-default uk-grid uk-margin-small-left uk-margin-remove-bottom uk-margin-remove-left" data-uk-alert="" *ngFor="let item of selected" [title]="showItem(item)" >
<div class="uk-width-expand uk-padding-remove-left" >{{showItem(item)}} </div>
<div (click)="remove(item)" aria-hidden="true" title="Remove selection" class="uk-padding-remove-left"> <span class="clickable uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="1"><path fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path></svg>

View File

@ -15,7 +15,7 @@ import{EnvProperties} from '../../utils/properties/env-properties';
template: `
<div class="custom-autocomplete uk-width-1-1">
<div *ngIf = "showSelected && selectedValue != ''">
<div class="uk-alert-default uk-grid uk-margin-small-left uk-margin-remove-bottom" data-uk-alert="" *ngFor="let item of selected" [title]="showItem(item)">
<div class="uk-alert-default uk-grid uk-margin-small-left uk-margin-remove-bottom uk-margin-remove-left" data-uk-alert="" *ngFor="let item of selected" [title]="showItem(item)">
<div class="uk-width-expand uk-padding-remove-left " >{{showItem(item)}} </div>
<div (click)="remove(item)" aria-hidden="true" title="Remove selection" class="uk-padding-remove-left">
<span class="clickable uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="1"><path fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path></svg></span>