Fix some issues in input and search input. Add search input in search-page.
This commit is contained in:
parent
c98bf5aa6f
commit
d983a24aa4
|
|
@ -132,60 +132,47 @@
|
|||
</div>
|
||||
</form>
|
||||
<div *ngIf="simpleView">
|
||||
<form [class.uk-disabled]="isDisabled">
|
||||
<div class="uk-grid uk-grid-small uk-flex uk-flex-center" uk-grid>
|
||||
<form>
|
||||
<div class="uk-margin-small-bottom uk-flex uk-flex-right" *ngIf="showSwitchSearchLink">
|
||||
<a *ngIf ="this.entityType !='all' && this.entityType == this.selectedEntity && advancedSearchLink"
|
||||
[routerLink]="advancedSearchLink" [queryParams]="advancedSearchLinkParameters"
|
||||
[ngClass]="(isDisabled)?'uk-disabled uk-link-muted':null">Advanced search
|
||||
</a>
|
||||
<a *ngIf =" this.entityType !='all' && this.entityType != this.selectedEntity && selectedEntityAdvancedUrl "
|
||||
[routerLink]="selectedEntityAdvancedUrl"
|
||||
[queryParams]="{q:this.selectedFields[0].value,op:'and'}"
|
||||
[ngClass]="(isDisabled)?'uk-disabled uk-link-muted':null">Advanced search
|
||||
</a>
|
||||
<ng-container *ngIf="this.entityType=='all'">
|
||||
<a>Advanced Search</a>
|
||||
<div uk-dropdown class="uk-dropdown">
|
||||
<ul class="uk-list uk-margin-remove-bottom">
|
||||
<li><a
|
||||
[routerLink]="properties.searchLinkToAdvancedResults" [queryParams]="advancedSearchLinkParameters"
|
||||
>Research
|
||||
outcomes</a></li>
|
||||
<li><a
|
||||
[routerLink]="properties.searchLinkToAdvancedProjects" [queryParams]="advancedSearchLinkParameters" >
|
||||
Projects</a></li>
|
||||
<li><a
|
||||
[routerLink]="properties.searchLinkToAdvancedDataProviders" [queryParams]="advancedSearchLinkParameters">
|
||||
Content providers</a></li>
|
||||
<li><a
|
||||
[routerLink]="properties.searchLinkToAdvancedOrganizations" [queryParams]="advancedSearchLinkParameters">
|
||||
Organizations</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div class="uk-flex uk-flex-center">
|
||||
<div *ngIf="entitiesSelection">
|
||||
<entities-selection *ngIf="entitiesSelection" [simpleView]="true" [currentEntity]="entityType"
|
||||
<entities-selection [simpleView]="true" [currentEntity]="entityType"
|
||||
[properties]="properties"
|
||||
(selectionChange)=" simpleEntityChanged($event)"
|
||||
[onChangeNavigate]="true" [customFilter]="customFilter"></entities-selection>
|
||||
</div>
|
||||
<div *ngIf="selectedFields[0]" class="uk-inline uk-link">
|
||||
<a class="uk-form-icon uk-form-icon-flip uk-link-reset"
|
||||
(click)="simpleKeywordChanged(null)" type="submit">
|
||||
<icon name="search" flex="true"></icon>
|
||||
</a>
|
||||
<input type="text" class="uk-input uk-width-large@m uk-width-medium"
|
||||
[placeholder]="formPlaceholderText" role="searchbox"
|
||||
[(ngModel)]="selectedFields[0].value" name="keyword"/>
|
||||
</div>
|
||||
<!-- TODO Check link to advance-->
|
||||
<!--<div>
|
||||
<button (click)="simpleKeywordChanged(null)" type="submit"
|
||||
class="uk-button portal-button uk-margin-small-left uk-text-bold uk-padding uk-padding-remove-top uk-padding-remove-bottom">
|
||||
Search
|
||||
</button>
|
||||
<div class="uk-margin-small-top" *ngIf="showSwitchSearchLink">
|
||||
<a *ngIf ="this.entityType !='all' && this.entityType == this.selectedEntity && advancedSearchLink" routerLinkActive="router-link-active"
|
||||
[routerLink]="advancedSearchLink" style="z-index:1;" [queryParams]="advancedSearchLinkParameters"
|
||||
[class]="(isDisabled)?' uk-disabled uk-link-muted portal-link uk-margin-left ':' portal-link uk-margin-left '">Advanced search
|
||||
</a>
|
||||
<a *ngIf =" this.entityType !='all' && this.entityType != this.selectedEntity && selectedEntityAdvancedUrl "
|
||||
routerLinkActive="router-link-active"
|
||||
[routerLink]="selectedEntityAdvancedUrl" style="z-index:1;"
|
||||
[queryParams]="{q:this.selectedFields[0].value,op:'and'}"
|
||||
[class]="(isDisabled)?' uk-disabled uk-link-muted portal-link uk-margin-left ':' portal-link uk-margin-left '">Advanced search
|
||||
</a>
|
||||
<a *ngIf="this.entityType=='all'" class="portal-link uk-margin-left">Advanced Search</a>
|
||||
<div *ngIf="this.entityType =='all'" uk-dropdown class="uk-dropdown default-dropdown">
|
||||
<ul class="uk-list uk-margin-remove-bottom">
|
||||
<li><a
|
||||
[routerLink]="properties.searchLinkToAdvancedResults" [queryParams]="advancedSearchLinkParameters"
|
||||
>Research
|
||||
outcomes</a></li>
|
||||
<li><a
|
||||
[routerLink]="properties.searchLinkToAdvancedProjects" [queryParams]="advancedSearchLinkParameters" >
|
||||
Projects</a></li>
|
||||
<li><a
|
||||
[routerLink]="properties.searchLinkToAdvancedDataProviders" [queryParams]="advancedSearchLinkParameters">
|
||||
Content providers</a></li>
|
||||
<li><a
|
||||
[routerLink]="properties.searchLinkToAdvancedOrganizations" [queryParams]="advancedSearchLinkParameters">
|
||||
Organizations</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
<div *ngIf="selectedFields[0] && entitiesSelection" search-input [disabled]="isDisabled" [(value)]="selectedFields[0].value"
|
||||
[placeholder]="formPlaceholderText" (searchEmitter)="simpleKeywordChanged()" class="uk-width-xlarge@l uk-width-large"></div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,154 +10,162 @@ import {Subscriber} from "rxjs";
|
|||
import {properties} from "../../../../environments/environment";
|
||||
|
||||
@Component({
|
||||
selector: 'advanced-search-form',
|
||||
templateUrl: 'advancedSearchForm.component.html'
|
||||
selector: 'advanced-search-form',
|
||||
templateUrl: 'advancedSearchForm.component.html'
|
||||
})
|
||||
export class AdvancedSearchFormComponent {
|
||||
@Input() entityType;
|
||||
@Input() fieldIds: string[];
|
||||
@Input() fieldIds: string[];
|
||||
@Input() fieldIdsMap;
|
||||
@Input() selectedFields:AdvancedField[];
|
||||
@Input() selectedFields: AdvancedField[];
|
||||
@Input() isDisabled: boolean = false;
|
||||
@Input() simpleSearchLink;
|
||||
@Input() advancedSearchLink;
|
||||
@Input() advancedSearchLinkParameters;
|
||||
@Input() simpleView:boolean = false;
|
||||
@Input() simpleView: boolean = false;
|
||||
@Input() formPlaceholderText = "Type Keywords...";
|
||||
@Output() queryChange = new EventEmitter();
|
||||
@Input()resultTypes;
|
||||
@Input() quickFilter:{filter: Filter, selected:boolean, filterId:string, value:string};
|
||||
@Output() queryChange = new EventEmitter();
|
||||
@Input() resultTypes;
|
||||
@Input() quickFilter: { filter: Filter, selected: boolean, filterId: string, value: string };
|
||||
validDateFrom: boolean = true;
|
||||
validDateTo: boolean = true;
|
||||
@Input() customFilter: SearchCustomFilter;
|
||||
newFieldId:string;
|
||||
newFieldName:string;
|
||||
fieldList:{[id:string]:any[]} = {};
|
||||
public searchFields:SearchFields = new SearchFields();
|
||||
properties:EnvProperties;
|
||||
public operators: {name:string, id:string}[] = this.searchFields.ADVANCED_SEARCH_OPERATORS;
|
||||
newFieldId: string;
|
||||
newFieldName: string;
|
||||
fieldList: { [id: string]: any[] } = {};
|
||||
public searchFields: SearchFields = new SearchFields();
|
||||
properties: EnvProperties;
|
||||
public operators: { name: string, id: string }[] = this.searchFields.ADVANCED_SEARCH_OPERATORS;
|
||||
selectedEntity;
|
||||
selectedEntitySimpleUrl;
|
||||
selectedEntityAdvancedUrl;
|
||||
@Input() entitiesSelection:boolean;
|
||||
@Input() showSwitchSearchLink:boolean = true;
|
||||
@Input() entitiesSelection: boolean;
|
||||
@Input() showSwitchSearchLink: boolean = true;
|
||||
sub;
|
||||
constructor (private route: ActivatedRoute, private router: Router) {
|
||||
|
||||
constructor(private route: ActivatedRoute, private router: Router) {
|
||||
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
if (this.sub instanceof Subscriber) {
|
||||
this.sub.unsubscribe();
|
||||
}
|
||||
}
|
||||
ngOnInit() {
|
||||
|
||||
ngOnInit() {
|
||||
this.selectedEntity = this.entityType;
|
||||
|
||||
this.properties = properties;
|
||||
this.properties = properties;
|
||||
|
||||
for(var i = 0; i < this.fieldIds.length; i++){
|
||||
this.fieldList[this.fieldIds[i]]=[];
|
||||
}
|
||||
this.newFieldId = this.fieldIds[0];
|
||||
this.newFieldName = this.fieldIdsMap[this.newFieldId].name;
|
||||
}
|
||||
simpleEntityChanged($event){
|
||||
for (var i = 0; i < this.fieldIds.length; i++) {
|
||||
this.fieldList[this.fieldIds[i]] = [];
|
||||
}
|
||||
this.newFieldId = this.fieldIds[0];
|
||||
this.newFieldName = this.fieldIdsMap[this.newFieldId].name;
|
||||
}
|
||||
|
||||
simpleEntityChanged($event) {
|
||||
this.selectedEntity = $event.entity;
|
||||
this.selectedEntitySimpleUrl = $event.simpleUrl;
|
||||
this.selectedEntityAdvancedUrl = $event.advancedUrl;
|
||||
}
|
||||
simpleKeywordChanged($event){
|
||||
|
||||
simpleKeywordChanged() {
|
||||
// this.selectedFields[0].value = $event.value;
|
||||
if(this.selectedEntity == this.entityType) {
|
||||
if (this.selectedEntity == this.entityType) {
|
||||
this.queryChanged();
|
||||
}else{
|
||||
this.router.navigate([this.selectedEntitySimpleUrl], {queryParams:{q:this.selectedFields[0].value,op:"and"}});
|
||||
} else {
|
||||
this.router.navigate([this.selectedEntitySimpleUrl], {queryParams: {q: this.selectedFields[0].value, op: "and"}});
|
||||
}
|
||||
}
|
||||
queryChanged() {
|
||||
this.validDateFrom = true;
|
||||
this.validDateTo = true;
|
||||
|
||||
this.selectedFields.forEach(selectedField => {
|
||||
if(selectedField.type == 'date') {
|
||||
if (selectedField.dateValue.type.indexOf("range") != -1) {
|
||||
if(!Dates.isValidDate(Dates.getDateToString(selectedField.dateValue.from))) {
|
||||
//console.info("INVALID: isValidDate FROM");
|
||||
this.validDateFrom = false;
|
||||
}
|
||||
if(!Dates.isValidDate(Dates.getDateToString(selectedField.dateValue.to))) {
|
||||
//console.info("INVALID: isValidDate TO");
|
||||
this.validDateTo = false;
|
||||
}
|
||||
queryChanged() {
|
||||
this.validDateFrom = true;
|
||||
this.validDateTo = true;
|
||||
|
||||
this.selectedFields.forEach(selectedField => {
|
||||
if (selectedField.type == 'date') {
|
||||
if (selectedField.dateValue.type.indexOf("range") != -1) {
|
||||
if (!Dates.isValidDate(Dates.getDateToString(selectedField.dateValue.from))) {
|
||||
//console.info("INVALID: isValidDate FROM");
|
||||
this.validDateFrom = false;
|
||||
}
|
||||
if (!Dates.isValidDate(Dates.getDateToString(selectedField.dateValue.to))) {
|
||||
//console.info("INVALID: isValidDate TO");
|
||||
this.validDateTo = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if(this.validDateFrom && this.validDateTo) {
|
||||
|
||||
this.queryChange.emit({
|
||||
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
if (this.validDateFrom && this.validDateTo) {
|
||||
|
||||
this.queryChange.emit({});
|
||||
}
|
||||
}
|
||||
|
||||
addField() {
|
||||
this.newFieldId = this.fieldIds[0];
|
||||
var type = this.fieldIdsMap[this.newFieldId].type;
|
||||
if (type == "boolean") {
|
||||
this.selectedFields.push(new AdvancedField(this.newFieldId, this.fieldIdsMap[this.newFieldId].param, this.fieldIdsMap[this.newFieldId].name, type, "true", "and"));
|
||||
} else {
|
||||
this.selectedFields.push(new AdvancedField(this.newFieldId, this.fieldIdsMap[this.newFieldId].param, this.fieldIdsMap[this.newFieldId].name, type, "", "and"));
|
||||
}
|
||||
|
||||
addField() {
|
||||
this.newFieldId = this.fieldIds[0];
|
||||
var type = this.fieldIdsMap[this.newFieldId].type;
|
||||
if(type == "boolean"){
|
||||
this.selectedFields.push(new AdvancedField(this.newFieldId,this.fieldIdsMap[this.newFieldId].param, this.fieldIdsMap[this.newFieldId].name, type, "true", "and"));
|
||||
}else{
|
||||
this.selectedFields.push(new AdvancedField(this.newFieldId, this.fieldIdsMap[this.newFieldId].param,this.fieldIdsMap[this.newFieldId].name, type, "", "and"));
|
||||
}
|
||||
}
|
||||
|
||||
removeField(index: number) {
|
||||
if (this.selectedFields.length == 1) {
|
||||
this.selectedFields[index] = new AdvancedField(this.newFieldId, this.fieldIdsMap[this.newFieldId].param, this.fieldIdsMap[this.newFieldId].name, this.fieldIdsMap[this.newFieldId].type, "", "and");
|
||||
} else {
|
||||
this.selectedFields.splice(index, 1);
|
||||
}
|
||||
//if only one filter left, set the operator to and
|
||||
if (this.selectedFields.length == 1) {
|
||||
this.selectedFields[0].operatorId = "and";
|
||||
}
|
||||
}
|
||||
|
||||
removeField(index: number) {
|
||||
if(this.selectedFields.length == 1){
|
||||
this.selectedFields[index] = new AdvancedField(this.newFieldId,this.fieldIdsMap[this.newFieldId].param, this.fieldIdsMap[this.newFieldId].name, this.fieldIdsMap[this.newFieldId].type, "", "and");
|
||||
}else{
|
||||
this.selectedFields.splice(index, 1);
|
||||
}
|
||||
//if only one filter left, set the operator to and
|
||||
if(this.selectedFields.length==1){
|
||||
this.selectedFields[0].operatorId = "and";
|
||||
}
|
||||
}
|
||||
fieldOperatorChanged(index: number, operatorId: string, operatorName: string) {
|
||||
this.selectedFields[index].operatorId = operatorId;
|
||||
this.selectedFields[index].operatorName = operatorName;
|
||||
}
|
||||
|
||||
fieldOperatorChanged(index: number, operatorId: string, operatorName: string) {
|
||||
this.selectedFields[index].operatorId = operatorId;
|
||||
this.selectedFields[index].operatorName = operatorName;
|
||||
}
|
||||
validateDate(index: number, value: string){
|
||||
this.selectedFields[index].valid = Dates.isValidYear(value);
|
||||
}
|
||||
validateDate(index: number, value: string) {
|
||||
this.selectedFields[index].valid = Dates.isValidYear(value);
|
||||
}
|
||||
|
||||
fieldIdsChanged(index: number, fieldId:string ) {
|
||||
//console.log("Field index::"+index + " " + this.selectedFields[index].id + " function id:" +fieldId);
|
||||
fieldIdsChanged(index: number, fieldId: string) {
|
||||
//console.log("Field index::"+index + " " + this.selectedFields[index].id + " function id:" +fieldId);
|
||||
|
||||
var id= this.fieldIds[0];
|
||||
this.selectedFields[index].name = this.fieldIdsMap[id].name;
|
||||
this.selectedFields[index].type = this.fieldIdsMap[id].type;
|
||||
this.selectedFields[index].value = "";
|
||||
this.selectedFields[index].param = this.fieldIdsMap[id].param;
|
||||
var id = this.fieldIds[0];
|
||||
this.selectedFields[index].name = this.fieldIdsMap[id].name;
|
||||
this.selectedFields[index].type = this.fieldIdsMap[id].type;
|
||||
this.selectedFields[index].value = "";
|
||||
this.selectedFields[index].param = this.fieldIdsMap[id].param;
|
||||
|
||||
var id =fieldId;//this.selectedFields[index].id;
|
||||
this.selectedFields[index].name = this.fieldIdsMap[id].name;
|
||||
this.selectedFields[index].type = this.fieldIdsMap[id].type;
|
||||
this.selectedFields[index].value = "";
|
||||
this.selectedFields[index].param = this.fieldIdsMap[id].param;
|
||||
if(this.fieldIdsMap[id].type == "boolean"){
|
||||
this.selectedFields[index].value = "true";
|
||||
}
|
||||
}
|
||||
valueChanged($event,index:number){
|
||||
this.selectedFields[index].value = $event.value;
|
||||
}
|
||||
updatedValueLabel($event,index:number){
|
||||
this.selectedFields[index].valueLabel = $event.value;
|
||||
}
|
||||
listUpdated($event,fieldId:number){
|
||||
this.fieldList[fieldId] = $event.value;
|
||||
var id = fieldId;//this.selectedFields[index].id;
|
||||
this.selectedFields[index].name = this.fieldIdsMap[id].name;
|
||||
this.selectedFields[index].type = this.fieldIdsMap[id].type;
|
||||
this.selectedFields[index].value = "";
|
||||
this.selectedFields[index].param = this.fieldIdsMap[id].param;
|
||||
if (this.fieldIdsMap[id].type == "boolean") {
|
||||
this.selectedFields[index].value = "true";
|
||||
}
|
||||
}
|
||||
|
||||
valueChanged($event, index: number) {
|
||||
this.selectedFields[index].value = $event.value;
|
||||
}
|
||||
|
||||
updatedValueLabel($event, index: number) {
|
||||
this.selectedFields[index].valueLabel = $event.value;
|
||||
}
|
||||
|
||||
listUpdated($event, fieldId: number) {
|
||||
this.fieldList[fieldId] = $event.value;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,11 +12,12 @@ import {QuickSelectionsModule} from "./quick-selections.module";
|
|||
import {EntitiesSelectionModule} from "./entitiesSelection.module";
|
||||
import { MatSelectModule } from "@angular/material/select";
|
||||
import {IconsModule} from "../../utils/icons/icons.module";
|
||||
import {SearchInputModule} from "../../sharedComponents/search-input/search-input.module";
|
||||
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, FormsModule, RouterModule, EntitiesAutocompleteModule, StaticAutocompleteModule, DateFilterModule, SearchFormModule, QuickSelectionsModule, EntitiesSelectionModule, MatSelectModule, IconsModule
|
||||
CommonModule, FormsModule, RouterModule, EntitiesAutocompleteModule, StaticAutocompleteModule, DateFilterModule, SearchFormModule, QuickSelectionsModule, EntitiesSelectionModule, MatSelectModule, IconsModule, SearchInputModule
|
||||
],
|
||||
declarations: [
|
||||
AdvancedSearchFormComponent,
|
||||
|
|
|
|||
|
|
@ -95,9 +95,9 @@ declare var UIkit;
|
|||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
<div *ngIf="formControl.disabled || icon || (type === 'select' && selectArrow) || type === 'autocomplete'"
|
||||
<div *ngIf="(formControl.disabled && disabledIcon) || icon || (type === 'select' && selectArrow) || type === 'autocomplete'"
|
||||
class="uk-margin-left icon">
|
||||
<icon *ngIf="formControl.disabled" [name]="'lock'" [flex]="true"></icon>
|
||||
<icon *ngIf="formControl.disabled && disabledIcon" [name]="disabledIcon" [flex]="true"></icon>
|
||||
<ng-template [ngIf]="formControl.enabled">
|
||||
<icon *ngIf="!formControl.value && icon" [name]="icon" [flex]="true"></icon>
|
||||
<icon *ngIf="!icon && type === 'select' && selectArrow" name="arrow_drop_down" [flex]="true"></icon>
|
||||
|
|
@ -169,6 +169,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
|
|||
@Input('type') type: InputType = 'text';
|
||||
@Input() validators: ValidatorFn[] | ValidatorFn;
|
||||
@Input() disabled: boolean = false;
|
||||
@Input() disabledIcon: string = 'lock';
|
||||
@Input() value: any | any[];
|
||||
@Output() valueChange = new EventEmitter<any | any[]>();
|
||||
@Input('hint') hint: string;
|
||||
|
|
@ -304,6 +305,13 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
|
|||
if (changes.formControl || changes.validators || changes.options) {
|
||||
this.reset();
|
||||
}
|
||||
if(changes.disabled) {
|
||||
if(this.disabled) {
|
||||
this.formControl.disable();
|
||||
} else {
|
||||
this.formControl.enable();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -359,23 +367,27 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
|
|||
this.required = (validator && validator.required);
|
||||
}
|
||||
this.subscriptions.push(this.formControl.valueChanges.subscribe(value => {
|
||||
value = (value === '') ? null : value;
|
||||
if (this.type === 'logoURL') {
|
||||
this.secure = (!value || value.includes('https://'));
|
||||
}
|
||||
if (this.initValue === value || (this.initValue === '' && value === null)) {
|
||||
this.formControl.markAsPristine();
|
||||
} else {
|
||||
this.formControl.markAsDirty();
|
||||
}
|
||||
if(this.type === 'autocomplete_soft') {
|
||||
this.filteredOptions = this.filter(value);
|
||||
this.cdr.detectChanges();
|
||||
if (this.focused) {
|
||||
this.open(true);
|
||||
if(this.formControl.enabled) {
|
||||
value = (value === '') ? null : value;
|
||||
if (this.type === 'logoURL') {
|
||||
this.secure = (!value || value.includes('https://'));
|
||||
}
|
||||
if (this.initValue === value || (this.initValue === '' && value === null)) {
|
||||
this.formControl.markAsPristine();
|
||||
} else {
|
||||
this.formControl.markAsDirty();
|
||||
}
|
||||
if (this.type === 'autocomplete_soft') {
|
||||
this.filteredOptions = this.filter(value);
|
||||
this.cdr.detectChanges();
|
||||
if (this.focused) {
|
||||
this.open(true);
|
||||
}
|
||||
}
|
||||
if((this.value && value && this.value !== value) || (!this.value && value) || this.value && !value) {
|
||||
this.valueChange.emit(this.formControl.value);
|
||||
}
|
||||
}
|
||||
this.valueChange.emit(this.formControl.value);
|
||||
}));
|
||||
if (this.input) {
|
||||
this.input.nativeElement.disabled = this.formControl.disabled;
|
||||
|
|
|
|||
|
|
@ -20,17 +20,17 @@ import {InputComponent} from "../input/input.component";
|
|||
<div #searchInput class="search-input" [class.collapsed]="hidden" [ngClass]="searchInputClass">
|
||||
<div class="uk-flex uk-flex-middle">
|
||||
<div class="uk-width-expand">
|
||||
<div #input [class.uk-hidden]="hidden" input [formInput]="searchControl" inputClass="search"
|
||||
[placeholder]="{label: placeholder, static: true}" [value]="value" (valueChange)="valueChange.emit($event)"
|
||||
<div #input [class.uk-hidden]="hidden" input [formInput]="searchControl" inputClass="search" [disabledIcon]="null"
|
||||
[placeholder]="{label: placeholder, static: true}" [(value)]="value" (valueChange)="valueChange.emit($event)"
|
||||
[disabled]="disabled" [type]="(options.length > 0?'autocomplete_soft':'text')" [options]="options"></div>
|
||||
</div>
|
||||
<div [class.uk-hidden]="!searchControl?.value && !value" class="uk-width-auto">
|
||||
<div [class.uk-hidden]="(!searchControl?.value && !value) || disabled" class="uk-width-auto">
|
||||
<a class="uk-link-text" (click)="reset()">
|
||||
<icon name="close" [flex]="true"></icon>
|
||||
</a>
|
||||
</div>
|
||||
<div class="uk-width-auto">
|
||||
<div class="search-icon" [class.disabled]="disabled" (click)="search($event)">
|
||||
<div class="search-icon" [class.disabled]="disabled" (click)="search()">
|
||||
<icon name="search" [flex]="true" ratio="1.3"></icon>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -44,8 +44,8 @@ export class SearchInputComponent implements OnInit {
|
|||
@Input() searchInputClass: string = 'inner';
|
||||
@Input() searchControl: AbstractControl;
|
||||
@Input() value: string;
|
||||
@Input() options: string[] = [];
|
||||
@Output() valueChange = new EventEmitter<string>();
|
||||
@Input() options: string[] = [];
|
||||
@Input() placeholder: string;
|
||||
@Input() expandable: boolean = false;
|
||||
@Output() searchEmitter: EventEmitter<void> = new EventEmitter<void>();
|
||||
|
|
@ -61,7 +61,7 @@ export class SearchInputComponent implements OnInit {
|
|||
if(this.input.focused) {
|
||||
if(event.code === 'Enter') {
|
||||
event.preventDefault();
|
||||
this.search(event);
|
||||
this.search();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -85,22 +85,22 @@ export class SearchInputComponent implements OnInit {
|
|||
}
|
||||
}
|
||||
|
||||
public search(event) {
|
||||
public search() {
|
||||
if(!this.disabled) {
|
||||
if (this.expandable) {
|
||||
this.expand(!this.expanded);
|
||||
event.stopPropagation();
|
||||
}
|
||||
this.searchEmitter.emit();
|
||||
}
|
||||
}
|
||||
|
||||
public reset() {
|
||||
this.searchControl.setValue('');
|
||||
if(this.searchControl){
|
||||
this.searchControl.setValue('');
|
||||
} else {
|
||||
this.valueChange.emit('');
|
||||
}
|
||||
}
|
||||
|
||||
get hidden(): boolean {
|
||||
return !this.expanded && !this.searchControl.value;
|
||||
return !this.expanded && ((this.searchControl && !this.searchControl.value) || (!this.searchControl && !this.value));
|
||||
}
|
||||
|
||||
/** @deprecated all*/
|
||||
|
|
|
|||
Loading…
Reference in New Issue