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

Input component: Add searchanle input and add it in advanced search form and linking

This commit is contained in:
Konstantinos Triantafyllou 2022-06-09 16:21:43 +03:00
parent 56d42bcd71
commit 05172dad18
5 changed files with 20 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
claims/claim-utils/claimContextSearchForm.component.html
View File

@ -4,7 +4,7 @@
<advanced-search-input (searchEmitter)="$event">
<div input type="select" [(value)]="showOptions.show" placeholder="Type" hint="Select..."
[options]="showOptions.selectOptions"></div>
<div input type="text" [(value)]="keyword" placeholder="Entities to link" [hint]="'Search for ' + openaireEntities.COMMUNITIES + '...'"></div>
<div input type="text" [(value)]="keyword" [searchable]="true" placeholder="Entities to link" [hint]="'Search for ' + openaireEntities.COMMUNITIES + '...'"></div>
</advanced-search-input>
</div>

2
claims/claim-utils/claimProjectSearchForm.component.html
View File

@ -2,7 +2,7 @@
<advanced-search-input (searchEmitter)="search(page,size)">
<div input type="select" [(value)]="showOptions.show" placeholder="Type" hint="Select..."
[options]="showOptions.selectOptions"></div>
<div input type="text" [(value)]="keyword" placeholder="Entities to link" [hint]="'Search for ' + openaireEntities.PROJECTS + '...'"></div>
<div input type="text" [(value)]="keyword" [searchable]="true" placeholder="Entities to link" [hint]="'Search for ' + openaireEntities.PROJECTS + '...'"></div>
</advanced-search-input>
</div>
<div *ngIf="!showResults">

2
claims/claim-utils/claimResultSearchForm.component.html
View File

@ -2,7 +2,7 @@
<advanced-search-input (searchEmitter)="search(true)">
<div input type="select" [(value)]="showOptions.show" placeholder="Type" hint="Select..."
[options]="showOptions.selectOptions"></div>
<div input type="text" [(value)]="keyword" placeholder="Entities to link" [hint]="'Search for ' + openaireEntities.RESULTS.toLowerCase() + '...'"></div>
<div input type="text" [(value)]="keyword" [searchable]="true" placeholder="Entities to link" [hint]="'Search for ' + openaireEntities.RESULTS.toLowerCase() + '...'"></div>
</advanced-search-input>
</div>

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

@ -154,7 +154,7 @@
<entities-selection [simpleView]="true" [currentEntity]="entityType"
(selectionChange)="simpleEntityChanged($event)" (disableSelectEmitter)="disableSelectChange($event)"
[onChangeNavigate]="true" [customFilter]="customFilter"></entities-selection>
<div input placeholder="Scholary works" [hint]="formPlaceholderText" [(value)]="selectedFields[0].value"></div>
<div input placeholder="Scholary works" [searchable]="true" [hint]="formPlaceholderText" [(value)]="selectedFields[0].value"></div>
</advanced-search-input>
<div *ngIf="selectedFields[0] && disableSelect" search-input [disabled]="isDisabled" [(value)]="selectedFields[0].value"
[placeholder]="formPlaceholderText" (searchEmitter)="simpleKeywordChanged()"></div>

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

@ -1,5 +1,6 @@
import {
AfterViewInit, ChangeDetectorRef,
AfterViewInit,
ChangeDetectorRef,
Component,
ElementRef,
EventEmitter,
@ -115,9 +116,8 @@ declare var UIkit;
</div>
</div>
</ng-template>
<div
*ngIf="(formControl.disabled && disabledIcon) || icon || (selectable && selectArrow) || type === 'autocomplete'"
class="uk-margin-left icon">
<div *ngIf="(formControl.disabled && disabledIcon) || icon || (selectable && selectArrow) || type === 'autocomplete' || searchable"
class="uk-margin-small-left icon">
<icon *ngIf="formControl.disabled && disabledIcon" [name]="disabledIcon" [flex]="true"></icon>
<ng-template [ngIf]="formControl.enabled">
<icon *ngIf="!searchControl?.value && icon" [name]="icon" [flex]="true"></icon>
@ -126,6 +126,9 @@ declare var UIkit;
(click)="resetSearch($event)">
<icon [flex]="true" name="close"></icon>
</button>
<button *ngIf="!!formControl?.value && searchable" class="uk-close uk-icon" (click)="resetValue($event)">
<icon [flex]="true" name="close"></icon>
</button>
</ng-template>
</div>
</div>
@ -137,9 +140,7 @@ declare var UIkit;
<div class="options uk-dropdown" *ngIf="filteredOptions && filteredOptions.length > 0 && opened" #optionBox
uk-dropdown="pos: bottom-justify; mode: none; offset: 15; boundary-align: true;" [attr.boundary]="'#' + id">
<ul class="uk-nav uk-dropdown-nav">
<li *ngFor="let option of filteredOptions; let i=index"
[class.uk-active]="(formControl.value === option.value) || selectedIndex === i"
>
<li *ngFor="let option of filteredOptions; let i=index" [class.uk-active]="(formControl.value === option.value) || selectedIndex === i">
<a (click)="selectOption(option, $event)"
[class]="option.disabled ? 'uk-disabled uk-text-muted' : ''">
<span [attr.uk-tooltip]="(tooltip)?('title: ' + option.label + '; delay: 500; pos:bottom-left'):null">{{option.label}}</span>
@ -201,6 +202,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
@Output() valueChange = new EventEmitter<any | any[]>();
@Input() hint: string;
@Input() tooltip: boolean = false;
@Input() searchable: boolean = false;
/** Text */
@ViewChild('input') input: ElementRef;
/** Textarea options */
@ -549,6 +551,13 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
resetSearch(event: any) {
event.stopPropagation();
this.searchControl.setValue('');
this.focus(true, event);
}
resetValue(event: any) {
event.stopPropagation();
this.formControl.setValue('');
this.focus(true, event);
}
selectOption(option: Option, event) {