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

Input: enable tooltip in select type. Search Sorting: Change options for stakeholders

This commit is contained in:
Konstantinos Triantafyllou 2022-06-06 12:22:01 +03:00
parent 187161fef5
commit f9f9a6d5ea
3 changed files with 51 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -25,7 +25,7 @@
<tr *ngFor="let selectedField of selectedFields; let i = index">
<td>
<div class="uk-grid uk-flex-middle uk-child-width-1-2@m uk-child-width-1-1">
<div input [(value)]="selectedField.id" inputClass="border-bottom" [tooltip]="true"
<div input [(value)]="selectedField.id" inputClass="border-bottom"
[options]="fieldIdsOptions" (valueChange)="fieldIdsChanged(i,selectedField.id)" type="select"></div>
<div input *ngIf="selectedField.id != 'q'" [(value)]="selectedField.includes" inputClass="border-bottom" [options]="getNotOperators(selectedField)" type="select"></div>
<div *ngIf="selectedField.id == 'q'">includes</div>

80
searchPages/searchUtils/searchSorting.component.ts
View File

@ -1,45 +1,55 @@
import {Component, Input, Output, EventEmitter} from '@angular/core';
import {Option} from "../../sharedComponents/input/input.component";
@Component({
selector: 'search-sorting',
template: `
<div class="uk-width-small">
<div input *ngIf="(entityType != 'community' && entityType != 'stakeholder' )"
type="select" placeholder="Sort by" inputClass="flat x-small"
[options]="optionsA" [(value)]="sortBy" [disabled]="isDisabled"
(valueChange)="sortByChanged()"></div>
<div input *ngIf="(entityType == 'community' || entityType == 'stakeholder')"
type="select" placeholder="Sort by" inputClass="flat x-small"
[options]="optionsB" [(value)]="sortBy" [disabled]="isDisabled"
(valueChange)="sortByChanged()"></div>
</div>
`
selector: 'search-sorting',
template: `
<div *ngIf="options" class="uk-width-small">
<div input
type="select" placeholder="Sort by" inputClass="flat x-small"
[options]="options" [(value)]="sortBy" [disabled]="isDisabled"
(valueChange)="sortByChanged()"></div>
</div>
`
})
export class SearchSortingComponent {
@Input() isDisabled: boolean = false;
@Input() sortBy: string = '';
@Input() entityType: string = '';
@Output() sortByChange = new EventEmitter();
public optionsA = [
{value: '', label: 'Relevance'},
{value: 'resultdateofacceptance,descending', label: 'Date (most recent)'},
{value: 'resultdateofacceptance,ascending', label: 'Date (least recent)'},
];
public optionsB = [
{value: '', label: 'Title'},
{value: 'creationdate,descending', label: 'Creation Date (most recent)'},
{value: 'creationdate,ascending', label: 'Creation Date (least recent)'},
];
@Input() isDisabled: boolean = false;
@Input() sortBy: string = '';
@Input() entityType: string = '';
@Output() sortByChange = new EventEmitter();
public options: Option[];
private generalOptions = [
{value: '', label: 'Relevance'},
{value: 'resultdateofacceptance,descending', label: 'Date (most recent)'},
{value: 'resultdateofacceptance,ascending', label: 'Date (least recent)'},
];
private communityOptions = [
{value: '', label: 'Title'},
{value: 'creationdate,descending', label: 'Creation Date (most recent)'},
{value: 'creationdate,ascending', label: 'Creation Date (least recent)'},
];
private stakeholderOptions = [
{value: '', label: 'Name'},
{value: 'creationdate,descending', label: 'Creation Date (most recent)'},
{value: 'creationdate,ascending', label: 'Creation Date (least recent)'},
];
constructor() {
}
constructor () {}
ngOnInit() {}
sortByChanged() {
this.sortByChange.emit(this.sortBy);
ngOnInit() {
if (this.entityType === 'community') {
this.options = this.communityOptions;
} else if (this.entityType === 'stakeholder') {
this.options = this.stakeholderOptions;
} else {
this.options = this.generalOptions;
}
}
sortByChanged() {
this.sortByChange.emit(this.sortBy);
}
}

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

@ -57,7 +57,7 @@ declare var UIkit;
<label>{{placeholderInfo.label}} <sup *ngIf="required">*</sup></label>
</div>
<div class="uk-flex" [class.uk-flex-middle]="type !== 'textarea'"
[attr.uk-tooltip]="(tooltip && !focused && type !== 'chips')?('title: ' + getLabel(formControl.value) + '; delay: 500'):null">
[attr.uk-tooltip]="(tooltip && !focused && type !== 'chips' && type !== 'textarea')?('title: ' + getLabel(formControl.value) + '; delay: 500; pos: bottom-left'):null">
<ng-template [ngIf]="type === 'text' || type === 'URL' || type === 'logoURL'">
<input #input class="input" [attr.placeholder]="placeholderInfo?.static?placeholderInfo.label:hint"
[formControl]="formAsControl" [class.uk-text-truncate]="!focused">
@ -194,13 +194,13 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
@Input() value: any | any[];
@Output() valueChange = new EventEmitter<any | any[]>();
@Input() hint: string;
@Input() tooltip: boolean = false;
/** Text */
@ViewChild('input') input: ElementRef;
/** Textarea options */
@ViewChild('textArea') textArea: ElementRef;
@Input('rows') rows: number = 3;
/** Select | Autocomplete | chips available options */
@Input() tooltip: boolean = false;
@Input() selectArrow: string = 'arrow_drop_down';
@Input() selectedIndex: number = 0;
@Input() selectable: boolean = false;
@ -263,6 +263,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
this.icon = this.selectArrow;
}
this.selectable = true;
this.tooltip = true;
}
}