From 123f355344e3b924e67a72e7e15ad12455ac49ad Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Fri, 12 May 2023 17:24:27 +0300 Subject: [PATCH] Input: Extend enter - before unfocus. Range-Filder: Add on enter method, in order to change year range on search. --- sharedComponents/input/input.component.ts | 6 ++--- utils/rangeFilter/rangeFilter.component.html | 4 ++-- utils/rangeFilter/rangeFilter.component.ts | 24 ++++++++++++-------- 3 files changed, 20 insertions(+), 14 deletions(-) diff --git a/sharedComponents/input/input.component.ts b/sharedComponents/input/input.component.ts index 0dc6f255..c1a3652a 100644 --- a/sharedComponents/input/input.component.ts +++ b/sharedComponents/input/input.component.ts @@ -381,6 +381,9 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang @HostListener('window:keydown.enter', ['$event']) enter(event: KeyboardEvent) { + if (this.extendEnter) { + this.extendEnter(); + } if (this.opened && this.optionBox) { event.preventDefault(); if (this.filteredOptions[this.selectedIndex]) { @@ -391,9 +394,6 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang } else { this.focus(false, event); } - if (this.extendEnter) { - this.extendEnter(); - } } @HostListener('keydown', ['$event']) diff --git a/utils/rangeFilter/rangeFilter.component.html b/utils/rangeFilter/rangeFilter.component.html index 5ad11d4c..e9cc3522 100644 --- a/utils/rangeFilter/rangeFilter.component.html +++ b/utils/rangeFilter/rangeFilter.component.html @@ -10,9 +10,9 @@
-
+
+ [class.disabled]="disabled"> GO
diff --git a/utils/rangeFilter/rangeFilter.component.ts b/utils/rangeFilter/rangeFilter.component.ts index 084ebce0..d99993c7 100644 --- a/utils/rangeFilter/rangeFilter.component.ts +++ b/utils/rangeFilter/rangeFilter.component.ts @@ -1,10 +1,10 @@ -import {Component, EventEmitter, Input, Output} from '@angular/core'; +import {Component, EventEmitter, Input, Output, ViewChild} from '@angular/core'; import {RangeFilter} from './rangeFilterHelperClasses.class'; import {Dates, StringUtils} from "../string-utils.class"; import {ActivatedRoute, Router} from "@angular/router"; import {properties} from "../../../../environments/environment"; import {UntypedFormBuilder, UntypedFormGroup} from "@angular/forms"; -import {YearRange} from "../../sharedComponents/input/input.component"; +import {InputComponent, YearRange} from "../../sharedComponents/input/input.component"; @Component({ selector: 'range-filter', @@ -17,7 +17,6 @@ export class RangeFilterComponent { @Input() isDisabled:boolean = false; @Input() showQuickButtons:boolean = true; public _maxCharacters:number =28; - public focusedInput: string = ""; @Input() yearMin: number = Dates.yearMin; @Input() yearMax: number = Dates.yearMax; @Input() mandatoryRange:boolean = false; @@ -29,10 +28,16 @@ export class RangeFilterComponent { from: {control: 'yearFrom', placeholder: this.yearMin.toString()}, to: {control: 'yearTo', placeholder: this.yearMax.toString()} } - @Output() onFilterChange = new EventEmitter(); @Input() actionRoute:boolean = false; + @ViewChild('input') input: InputComponent; queryParams = {}; + onEnter: () => void = () => { + if(!this.disabled) { + this.yearChanged(); + } + } + constructor(private _router: Router, private route: ActivatedRoute, private _fb: UntypedFormBuilder) {} ngOnInit() { @@ -51,6 +56,12 @@ export class RangeFilterComponent { public _formatTitle(title){ return ((title.length > this._maxCharacters)?(title.substring(0,(this._maxCharacters - ('...').length))+"..."):title); } + + get disabled() { + return this.isDisabled || this.rangeForm.invalid || + (!this.rangeForm.get('yearFrom').dirty && !this.rangeForm.get('yearTo').dirty) || + this.rangeForm.get('yearFrom').invalid || this.rangeForm.get('yearTo').invalid + } yearChanged(yearsSelected: number = null){ if(yearsSelected != null) { @@ -72,16 +83,11 @@ export class RangeFilterComponent { this.filter.selectedToValue = null; this.rangeForm.get('yearFrom').setValue(this.filter.selectedFromValue); this.rangeForm.get('yearTo').setValue(this.filter.selectedToValue); - console.log(this.rangeForm); this.onFilterChange.emit({ value: this.filter }); } - getFilterName(value){ - return value.name + " (" + value.number.format() + ")"; - } - stringToNum(value: string): number { return +(value); }