Input: enable tooltip in select type. Search Sorting: Change options for stakeholders
This commit is contained in:
parent
187161fef5
commit
f9f9a6d5ea
|
@ -25,7 +25,7 @@
|
||||||
<tr *ngFor="let selectedField of selectedFields; let i = index">
|
<tr *ngFor="let selectedField of selectedFields; let i = index">
|
||||||
<td>
|
<td>
|
||||||
<div class="uk-grid uk-flex-middle uk-child-width-1-2@m uk-child-width-1-1">
|
<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>
|
[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 input *ngIf="selectedField.id != 'q'" [(value)]="selectedField.includes" inputClass="border-bottom" [options]="getNotOperators(selectedField)" type="select"></div>
|
||||||
<div *ngIf="selectedField.id == 'q'">includes</div>
|
<div *ngIf="selectedField.id == 'q'">includes</div>
|
||||||
|
|
|
@ -1,17 +1,13 @@
|
||||||
import {Component, Input, Output, EventEmitter} from '@angular/core';
|
import {Component, Input, Output, EventEmitter} from '@angular/core';
|
||||||
|
import {Option} from "../../sharedComponents/input/input.component";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'search-sorting',
|
selector: 'search-sorting',
|
||||||
template: `
|
template: `
|
||||||
<div class="uk-width-small">
|
<div *ngIf="options" class="uk-width-small">
|
||||||
<div input *ngIf="(entityType != 'community' && entityType != 'stakeholder' )"
|
<div input
|
||||||
type="select" placeholder="Sort by" inputClass="flat x-small"
|
type="select" placeholder="Sort by" inputClass="flat x-small"
|
||||||
[options]="optionsA" [(value)]="sortBy" [disabled]="isDisabled"
|
[options]="options" [(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>
|
(valueChange)="sortByChanged()"></div>
|
||||||
</div>
|
</div>
|
||||||
`
|
`
|
||||||
|
@ -22,21 +18,35 @@ export class SearchSortingComponent {
|
||||||
@Input() sortBy: string = '';
|
@Input() sortBy: string = '';
|
||||||
@Input() entityType: string = '';
|
@Input() entityType: string = '';
|
||||||
@Output() sortByChange = new EventEmitter();
|
@Output() sortByChange = new EventEmitter();
|
||||||
public optionsA = [
|
public options: Option[];
|
||||||
|
private generalOptions = [
|
||||||
{value: '', label: 'Relevance'},
|
{value: '', label: 'Relevance'},
|
||||||
{value: 'resultdateofacceptance,descending', label: 'Date (most recent)'},
|
{value: 'resultdateofacceptance,descending', label: 'Date (most recent)'},
|
||||||
{value: 'resultdateofacceptance,ascending', label: 'Date (least recent)'},
|
{value: 'resultdateofacceptance,ascending', label: 'Date (least recent)'},
|
||||||
];
|
];
|
||||||
public optionsB = [
|
private communityOptions = [
|
||||||
{value: '', label: 'Title'},
|
{value: '', label: 'Title'},
|
||||||
{value: 'creationdate,descending', label: 'Creation Date (most recent)'},
|
{value: 'creationdate,descending', label: 'Creation Date (most recent)'},
|
||||||
{value: 'creationdate,ascending', label: 'Creation Date (least 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() {
|
||||||
|
if (this.entityType === 'community') {
|
||||||
ngOnInit() {}
|
this.options = this.communityOptions;
|
||||||
|
} else if (this.entityType === 'stakeholder') {
|
||||||
|
this.options = this.stakeholderOptions;
|
||||||
|
} else {
|
||||||
|
this.options = this.generalOptions;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
sortByChanged() {
|
sortByChanged() {
|
||||||
|
|
|
@ -57,7 +57,7 @@ declare var UIkit;
|
||||||
<label>{{placeholderInfo.label}} <sup *ngIf="required">*</sup></label>
|
<label>{{placeholderInfo.label}} <sup *ngIf="required">*</sup></label>
|
||||||
</div>
|
</div>
|
||||||
<div class="uk-flex" [class.uk-flex-middle]="type !== 'textarea'"
|
<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'">
|
<ng-template [ngIf]="type === 'text' || type === 'URL' || type === 'logoURL'">
|
||||||
<input #input class="input" [attr.placeholder]="placeholderInfo?.static?placeholderInfo.label:hint"
|
<input #input class="input" [attr.placeholder]="placeholderInfo?.static?placeholderInfo.label:hint"
|
||||||
[formControl]="formAsControl" [class.uk-text-truncate]="!focused">
|
[formControl]="formAsControl" [class.uk-text-truncate]="!focused">
|
||||||
|
@ -194,13 +194,13 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
|
||||||
@Input() value: any | any[];
|
@Input() value: any | any[];
|
||||||
@Output() valueChange = new EventEmitter<any | any[]>();
|
@Output() valueChange = new EventEmitter<any | any[]>();
|
||||||
@Input() hint: string;
|
@Input() hint: string;
|
||||||
|
@Input() tooltip: boolean = false;
|
||||||
/** Text */
|
/** Text */
|
||||||
@ViewChild('input') input: ElementRef;
|
@ViewChild('input') input: ElementRef;
|
||||||
/** Textarea options */
|
/** Textarea options */
|
||||||
@ViewChild('textArea') textArea: ElementRef;
|
@ViewChild('textArea') textArea: ElementRef;
|
||||||
@Input('rows') rows: number = 3;
|
@Input('rows') rows: number = 3;
|
||||||
/** Select | Autocomplete | chips available options */
|
/** Select | Autocomplete | chips available options */
|
||||||
@Input() tooltip: boolean = false;
|
|
||||||
@Input() selectArrow: string = 'arrow_drop_down';
|
@Input() selectArrow: string = 'arrow_drop_down';
|
||||||
@Input() selectedIndex: number = 0;
|
@Input() selectedIndex: number = 0;
|
||||||
@Input() selectable: boolean = false;
|
@Input() selectable: boolean = false;
|
||||||
|
@ -263,6 +263,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
|
||||||
this.icon = this.selectArrow;
|
this.icon = this.selectArrow;
|
||||||
}
|
}
|
||||||
this.selectable = true;
|
this.selectable = true;
|
||||||
|
this.tooltip = true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue