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

[develop]: Add tooltip in placeholderInfo.

This commit is contained in:
Konstantinos Triantafyllou 2024-06-25 15:26:51 +03:00
parent 6a781dd478
commit 8afe96a45d
3 changed files with 104 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
monitor/browse-stakeholder/browse-stakeholder-base.component.ts
View File

@ -17,7 +17,6 @@ export class BrowseStakeholderBaseComponent<T> extends StakeholderBaseComponent
filteredStakeholders: T[] = []; filteredStakeholders: T[] = [];
showLoading: boolean = true; showLoading: boolean = true;
isMobile: boolean = false; isMobile: boolean = false;
gridView: boolean = true; gridView: boolean = true;
sortOptions: Option[] = [ sortOptions: Option[] = [
{value: 'alphAsc', label: 'Alphabetically Asc. (A-Z)'}, {value: 'alphAsc', label: 'Alphabetically Asc. (A-Z)'},
@ -31,6 +30,7 @@ export class BrowseStakeholderBaseComponent<T> extends StakeholderBaseComponent
keywordControl: FormControl; keywordControl: FormControl;
hasPublications: boolean = true; hasPublications: boolean = true;
hasOpenAccess: boolean = true; hasOpenAccess: boolean = true;
id = 'results';
/* Services */ /* Services */
protected layoutService: LayoutService; protected layoutService: LayoutService;
@ -101,7 +101,7 @@ export class BrowseStakeholderBaseComponent<T> extends StakeholderBaseComponent
updateCurrentPage($event) { updateCurrentPage($event) {
this.currentPage = $event.value; this.currentPage = $event.value;
HelperFunctions.scrollToId('target'); this._router.navigate([], {fragment: 'results', onSameUrlNavigation: 'reload'});
this.afterStakeholdersInitialized(); this.afterStakeholdersInitialized();
} }

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

@ -49,7 +49,8 @@ export interface Option {
export interface Placeholder { export interface Placeholder {
label: string, label: string,
static?: boolean static?: boolean,
tooltip?: string
} }
export interface YearRange { export interface YearRange {
@ -83,47 +84,69 @@ 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' && type !== 'textarea' && (formControl.value || hint || placeholderInfo?.label))?('title: ' + (formControl.value ?getTooltip(formControl.value):(hint?hint:placeholderInfo?.label)) + '; delay: 500; pos: bottom-left'):null"> [attr.uk-tooltip]="placeholderInfo.tooltip?('title: ' + placeholderInfo.tooltip + '; delay: 500; pos: bottom-left'):
((tooltip && !focused && type !== 'chips' && type !== 'textarea' && (formControl.value || hint || placeholderInfo?.label))?
('title: ' + (formControl.value ?getTooltip(formControl.value):(hint?hint:placeholderInfo?.label)) + '; 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"
[type]="password?'password':'text'" [formControl]="formAsControl" [type]="password?'password':'text'" [formControl]="formAsControl"
[class.uk-text-truncate]="!focused"> [class.uk-text-truncate]="!focused">
</ng-template> </ng-template>
<ng-template [ngIf]="type === 'textarea'"> <ng-template [ngIf]="type === 'textarea'">
<textarea #textArea class="input" [attr.placeholder]="placeholderInfo?.static?placeholderInfo.label:hint" <textarea #textArea class="input"
[attr.placeholder]="placeholderInfo?.static?placeholderInfo.label:hint"
[rows]="rows" [formControl]="formAsControl"></textarea> [rows]="rows" [formControl]="formAsControl"></textarea>
</ng-template> </ng-template>
<ng-template [ngIf]="type === 'select'"> <ng-template [ngIf]="type === 'select'">
<ng-container *ngIf="placeholderInfo?.static"> <ng-container *ngIf="placeholderInfo?.static">
<div *ngIf="!getLabel(formControl.value)" <div *ngIf="!getLabel(formControl.value)"
class="input placeholder uk-width-expand uk-text-truncate" [class.uk-disabled]="formControl.disabled">{{placeholderInfo.label}}</div> class="input placeholder uk-width-expand uk-text-truncate"
[class.uk-disabled]="formControl.disabled">{{ placeholderInfo.label }}
</div>
<div *ngIf="getLabel(formControl.value)" <div *ngIf="getLabel(formControl.value)"
class="input uk-width-expand uk-text-truncate" [class.uk-disabled]="formControl.disabled">{{getLabel(formControl.value)}}</div> class="input uk-width-expand uk-text-truncate"
[class.uk-disabled]="formControl.disabled">{{ getLabel(formControl.value) }}
</div>
</ng-container> </ng-container>
<ng-container *ngIf="!placeholderInfo?.static"> <ng-container *ngIf="!placeholderInfo?.static">
<div *ngIf="!getLabel(formControl.value)" <div *ngIf="!getLabel(formControl.value)"
class="input uk-width-expand uk-text-truncate" [class.uk-disabled]="formControl.disabled">{{noValueSelected}}</div> class="input uk-width-expand uk-text-truncate"
[class.uk-disabled]="formControl.disabled">{{ noValueSelected }}
</div>
<div *ngIf="getLabel(formControl.value)" <div *ngIf="getLabel(formControl.value)"
class="input uk-width-expand uk-text-truncate" [class.uk-disabled]="formControl.disabled">{{getLabel(formControl.value)}}</div> class="input uk-width-expand uk-text-truncate"
[class.uk-disabled]="formControl.disabled">{{ getLabel(formControl.value) }}
</div>
</ng-container> </ng-container>
</ng-template> </ng-template>
<ng-template [ngIf]="type === 'autocomplete'"> <ng-template [ngIf]="type === 'autocomplete'">
<input *ngIf="focused" [attr.placeholder]="placeholderInfo?.static?placeholderInfo.label:hint" <input *ngIf="focused" [attr.placeholder]="placeholderInfo?.static?placeholderInfo.label:hint"
#searchInput class="input" [formControl]="searchControl" [class.uk-text-truncate]="!focused"> #searchInput class="input" [formControl]="searchControl"
[class.uk-text-truncate]="!focused">
<ng-container *ngIf="!focused && !selectable"> <ng-container *ngIf="!focused && !selectable">
<div *ngIf="!getLabel(formControl.value)" <div *ngIf="!getLabel(formControl.value)"
class="input placeholder uk-text-truncate" [class.uk-disabled]="formControl.disabled">{{placeholderInfo?.static ? placeholderInfo.label : getLabel(formAsControl.value)}}</div> class="input placeholder uk-text-truncate"
[class.uk-disabled]="formControl.disabled">{{ placeholderInfo?.static ? placeholderInfo.label : getLabel(formAsControl.value) }}
</div>
<div *ngIf="getLabel(formControl.value)" <div *ngIf="getLabel(formControl.value)"
class="input uk-text-truncate" [class.uk-disabled]="formControl.disabled">{{getLabel(formAsControl.value)}}</div> class="input uk-text-truncate"
[class.uk-disabled]="formControl.disabled">{{ getLabel(formAsControl.value) }}
</div>
</ng-container> </ng-container>
<ng-container *ngIf="!focused && selectable"> <ng-container *ngIf="!focused && selectable">
<div *ngIf="!getLabel(formControl.value)" class="input uk-text-truncate" [class.uk-disabled]="formControl.disabled">{{noValueSelected}}</div> <div *ngIf="!getLabel(formControl.value)" class="input uk-text-truncate"
[class.uk-disabled]="formControl.disabled">{{ noValueSelected }}
</div>
<div *ngIf="getLabel(formControl.value)" <div *ngIf="getLabel(formControl.value)"
class="input uk-text-truncate" [class.uk-disabled]="formControl.disabled">{{getLabel(formControl.value)}}</div> class="input uk-text-truncate"
[class.uk-disabled]="formControl.disabled">{{ getLabel(formControl.value) }}
</div>
</ng-container> </ng-container>
</ng-template> </ng-template>
<ng-template [ngIf]="type === 'autocomplete_soft'"> <ng-template [ngIf]="type === 'autocomplete_soft'">
<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">
</ng-template> </ng-template>
<ng-template [ngIf]="type === 'chips'"> <ng-template [ngIf]="type === 'chips'">
@ -154,26 +177,36 @@ declare var UIkit;
</ng-template> </ng-template>
<ng-template [ngIf]="type === 'year-range' && yearRange && formAsGroup"> <ng-template [ngIf]="type === 'year-range' && yearRange && formAsGroup">
<div class="uk-width-2-5"> <div class="uk-width-2-5">
<input #input class="input uk-text-center uk-text-truncate" [attr.placeholder]="yearRange.from.placeholder" <input #input class="input uk-text-center uk-text-truncate"
maxlength="4" (click)="activeIndex = 0;$event.preventDefault()" [formControl]="getFormByName(yearRange.from.control)"> [attr.placeholder]="yearRange.from.placeholder"
maxlength="4" (click)="activeIndex = 0;$event.preventDefault()"
[formControl]="getFormByName(yearRange.from.control)">
</div> </div>
<div class="uk-width-1-5 uk-text-center">-</div> <div class="uk-width-1-5 uk-text-center">-</div>
<div class="uk-width-2-5"> <div class="uk-width-2-5">
<input #input class="input uk-text-center uk-text-truncate" [attr.placeholder]="yearRange.to.placeholder" <input #input class="input uk-text-center uk-text-truncate"
maxlength="4" (click)="activeIndex = 1;$event.preventDefault()" [formControl]="getFormByName(yearRange.to.control)"> [attr.placeholder]="yearRange.to.placeholder"
maxlength="4" (click)="activeIndex = 1;$event.preventDefault()"
[formControl]="getFormByName(yearRange.to.control)">
</div> </div>
</ng-template> </ng-template>
<ng-template [ngIf]="type === 'date'"> <ng-template [ngIf]="type === 'date'">
<div *ngIf="!formAsControl.getRawValue()" class="input uk-text-truncate" [class.uk-disabled]="formControl.disabled">{{selectADate}}</div> <div *ngIf="!formAsControl.getRawValue()" class="input uk-text-truncate"
<div *ngIf="formAsControl.getRawValue()" class="input uk-text-truncate" [class.uk-disabled]="formControl.disabled">{{formAsControl.getRawValue() | date: 'dd-MM-yyyy'}}</div> [class.uk-disabled]="formControl.disabled">{{ selectADate }}
</div>
<div *ngIf="formAsControl.getRawValue()" class="input uk-text-truncate"
[class.uk-disabled]="formControl.disabled">{{ formAsControl.getRawValue() | date: 'dd-MM-yyyy' }}
</div>
</ng-template> </ng-template>
<div *ngIf="(formControl.disabled && disabledIcon) || icon || (selectable && selectArrow) || type === 'autocomplete' || searchable || type === 'date'" <div *ngIf="(formControl.disabled && disabledIcon) || icon || (selectable && selectArrow) || type === 'autocomplete' || searchable || type === 'date'"
class="uk-margin-small-left icon"> class="uk-margin-small-left icon">
<icon *ngIf="formControl.disabled && disabledIcon" [name]="disabledIcon" [flex]="true"></icon> <icon *ngIf="formControl.disabled && disabledIcon" [name]="disabledIcon" [flex]="true"></icon>
<ng-template [ngIf]="formControl.enabled"> <ng-template [ngIf]="formControl.enabled">
<icon *ngIf="!searchControl?.value && icon" [name]="icon" [flex]="true"></icon> <icon *ngIf="!searchControl?.value && icon" [name]="icon" [flex]="true"></icon>
<icon *ngIf="!icon && selectable && selectArrow" [name]="selectArrow" [flex]="true"></icon> <icon *ngIf="!icon && selectable && selectArrow" [name]="selectArrow"
<button *ngIf="focused && type === 'autocomplete' && (!selectable || searchControl.value)" class="uk-close uk-icon" [flex]="true"></icon>
<button *ngIf="focused && type === 'autocomplete' && (!selectable || searchControl.value)"
class="uk-close uk-icon"
(click)="resetSearch($event)"> (click)="resetSearch($event)">
<icon [flex]="true" name="close"></icon> <icon [flex]="true" name="close"></icon>
</button> </button>
@ -194,13 +227,17 @@ declare var UIkit;
</div> </div>
</div> </div>
<div *ngIf="!mobile && type === 'date' && opened" class="uk-dropdown" #calendarBox <div *ngIf="!mobile && type === 'date' && opened" class="uk-dropdown" #calendarBox
uk-dropdown="pos: bottom-left; mode: none; flip: false ; shift: false" [attr.target]="'#' + id" [attr.boundary]="'#' + id" (click)="$event.stopPropagation()"> uk-dropdown="pos: bottom-left; mode: none; flip: false ; shift: false" [attr.target]="'#' + id"
<mat-calendar [selected]="selectedDate" [startAt]="selectedDate" (selectedChange)="dateChanged($event)"></mat-calendar> [attr.boundary]="'#' + id" (click)="$event.stopPropagation()">
<mat-calendar [selected]="selectedDate" [startAt]="selectedDate"
(selectedChange)="dateChanged($event)"></mat-calendar>
</div> </div>
<mobile-dropdown *ngIf="mobile && type === 'date' && opened" (onClose)="focus(false)" #mobileDropdown> <mobile-dropdown *ngIf="mobile && type === 'date' && opened" (onClose)="focus(false)" #mobileDropdown>
<mat-calendar [selected]="selectedDate" [startAt]="selectedDate" (selectedChange)="dateChanged($event)"></mat-calendar> <mat-calendar [selected]="selectedDate" [startAt]="selectedDate"
(selectedChange)="dateChanged($event)"></mat-calendar>
</mobile-dropdown> </mobile-dropdown>
<div *ngIf="!mobile && filteredOptions && filteredOptions.length > 0 && opened" class="options uk-dropdown" #optionBox <div *ngIf="!mobile && filteredOptions && filteredOptions.length > 0 && opened" class="options uk-dropdown"
#optionBox
uk-dropdown="mode: none; stretch: true; flip: false; shift: false" [attr.boundary]="'#' + id"> uk-dropdown="mode: none; stretch: true; flip: false; shift: false" [attr.boundary]="'#' + id">
<ul class="uk-nav uk-dropdown-nav"> <ul class="uk-nav uk-dropdown-nav">
<li *ngFor="let option of filteredOptions; let i=index" [class.uk-hidden]="option.hidden" <li *ngFor="let option of filteredOptions; let i=index" [class.uk-hidden]="option.hidden"
@ -212,8 +249,10 @@ declare var UIkit;
</li> </li>
</ul> </ul>
</div> </div>
<mobile-dropdown *ngIf="mobile && filteredOptions && filteredOptions.length > 0 && opened" (onClose)="focus(false)" #mobileDropdown> <mobile-dropdown *ngIf="mobile && filteredOptions && filteredOptions.length > 0 && opened"
<div *ngIf="placeholderInfo" class="uk-text-emphasis uk-text-bolder uk-text-center uk-padding-small uk-padding-remove-vertical uk-text-uppercase"> (onClose)="focus(false)" #mobileDropdown>
<div *ngIf="placeholderInfo"
class="uk-text-emphasis uk-text-bolder uk-text-center uk-padding-small uk-padding-remove-vertical uk-text-uppercase">
{{ placeholderInfo.label }} {{ placeholderInfo.label }}
</div> </div>
<div class="uk-padding uk-padding-remove-horizontal"> <div class="uk-padding uk-padding-remove-horizontal">

3
sharedComponents/search-input/search-input.component.ts
View File

@ -23,7 +23,7 @@ import {ClickEvent} from "../../utils/click/click-outside-or-esc.directive";
<div class="uk-flex uk-flex-middle"> <div class="uk-flex uk-flex-middle">
<div class="uk-width-expand"> <div class="uk-width-expand">
<div #input [class.uk-hidden]="hidden" input [formInput]="searchControl" [inputClass]="'search'+(iconPosition === 'left'?' icon-left':'')" [disabledIcon]="null" <div #input [class.uk-hidden]="hidden" input [formInput]="searchControl" [inputClass]="'search'+(iconPosition === 'left'?' icon-left':'')" [disabledIcon]="null"
[placeholder]="{label: placeholder, static: true}" [value]="value" (valueChange)="valueChange.emit($event)" [placeholder]="{label: placeholder, static: true, tooltip: tooltip}" [value]="value" (valueChange)="valueChange.emit($event)"
[disabled]="disabled" [showOptionsOnEmpty]="false" [type]="(options.length > 0?'autocomplete_soft':'text')" [options]="options"></div> [disabled]="disabled" [showOptionsOnEmpty]="false" [type]="(options.length > 0?'autocomplete_soft':'text')" [options]="options"></div>
</div> </div>
<div [class.uk-hidden]="(!searchControl?.value && !value) || disabled" class="uk-width-auto"> <div [class.uk-hidden]="(!searchControl?.value && !value) || disabled" class="uk-width-auto">
@ -53,6 +53,7 @@ export class SearchInputComponent implements OnInit, AfterViewInit {
@Output() valueChange = new EventEmitter<string>(); @Output() valueChange = new EventEmitter<string>();
@Input() options: string[] = []; @Input() options: string[] = [];
@Input() placeholder: string; @Input() placeholder: string;
@Input() tooltip: string;
@Input() expandable: boolean = false; @Input() expandable: boolean = false;
@Output() searchEmitter: EventEmitter<void> = new EventEmitter<void>(); @Output() searchEmitter: EventEmitter<void> = new EventEmitter<void>();
@ViewChild('searchInput') searchInput: ElementRef; @ViewChild('searchInput') searchInput: ElementRef;