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

View File

@ -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>

View File

@ -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() {

View File

@ -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;
} }
} }