From d983a24aa4838cca4450e6c2927f1894f8ae9e34 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Tue, 12 Apr 2022 17:20:51 +0300 Subject: [PATCH] Fix some issues in input and search input. Add search input in search-page. --- .../advancedSearchForm.component.html | 85 +++---- .../advancedSearchForm.component.ts | 230 +++++++++--------- .../searchUtils/advancedSearchForm.module.ts | 3 +- sharedComponents/input/input.component.ts | 46 ++-- .../search-input/search-input.component.ts | 26 +- 5 files changed, 199 insertions(+), 191 deletions(-) diff --git a/searchPages/searchUtils/advancedSearchForm.component.html b/searchPages/searchUtils/advancedSearchForm.component.html index a973591a..a39d5598 100644 --- a/searchPages/searchUtils/advancedSearchForm.component.html +++ b/searchPages/searchUtils/advancedSearchForm.component.html @@ -132,60 +132,47 @@
-
-
+ +
+ Advanced search + + Advanced search + + + Advanced Search +
+ +
+ +
+
-
-
- - - - -
- - +
diff --git a/searchPages/searchUtils/advancedSearchForm.component.ts b/searchPages/searchUtils/advancedSearchForm.component.ts index 7e2684b1..989ca4a4 100644 --- a/searchPages/searchUtils/advancedSearchForm.component.ts +++ b/searchPages/searchUtils/advancedSearchForm.component.ts @@ -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; - - 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.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) { 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); } - - fieldOperatorChanged(index: number, operatorId: string, operatorName: string) { - this.selectedFields[index].operatorId = operatorId; - this.selectedFields[index].operatorName = operatorName; + //if only one filter left, set the operator to and + if (this.selectedFields.length == 1) { + this.selectedFields[0].operatorId = "and"; } - validateDate(index: number, value: string){ - this.selectedFields[index].valid = Dates.isValidYear(value); + } + + 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); + } + + 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 = 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"; } - - 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 =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; - } - + } + + 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; + } + } diff --git a/searchPages/searchUtils/advancedSearchForm.module.ts b/searchPages/searchUtils/advancedSearchForm.module.ts index 866f4c39..6ca7e67b 100644 --- a/searchPages/searchUtils/advancedSearchForm.module.ts +++ b/searchPages/searchUtils/advancedSearchForm.module.ts @@ -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, diff --git a/sharedComponents/input/input.component.ts b/sharedComponents/input/input.component.ts index 95855e09..71436adc 100644 --- a/sharedComponents/input/input.component.ts +++ b/sharedComponents/input/input.component.ts @@ -95,9 +95,9 @@ declare var UIkit;
-
- + @@ -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(); @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; diff --git a/sharedComponents/search-input/search-input.component.ts b/sharedComponents/search-input/search-input.component.ts index df1ad9f8..1baa238c 100644 --- a/sharedComponents/search-input/search-input.component.ts +++ b/sharedComponents/search-input/search-input.component.ts @@ -20,17 +20,17 @@ import {InputComponent} from "../input/input.component";
-
-
+
-
+
@@ -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(); + @Input() options: string[] = []; @Input() placeholder: string; @Input() expandable: boolean = false; @Output() searchEmitter: EventEmitter = new EventEmitter(); @@ -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*/