From 92852d0962f53362097e265d51e9dc5683064473 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Mon, 22 Mar 2021 15:10:18 +0000 Subject: [PATCH] [Library | Trunk]: 1. Input fix bug with search control value. Remove selection of chip in autocomplete. 2. Search Input: Add truncate on selected value. 3. Full screen modal: Fix close method git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@60688 d315682c-612b-4755-9ff5-7f18f6832af3 --- sharedComponents/input/input.component.ts | 50 +++++++++++-------- .../search-input/search-input.component.ts | 13 ++--- .../search-input/search-input.module.ts | 4 +- .../full-screen-modal.component.ts | 14 +++--- 4 files changed, 43 insertions(+), 38 deletions(-) diff --git a/sharedComponents/input/input.component.ts b/sharedComponents/input/input.component.ts index 291767d9..45c88911 100644 --- a/sharedComponents/input/input.component.ts +++ b/sharedComponents/input/input.component.ts @@ -1,6 +1,8 @@ import { - Component, ElementRef, - EventEmitter, HostListener, + Component, + ElementRef, + EventEmitter, + HostListener, Input, OnChanges, OnDestroy, @@ -15,8 +17,7 @@ import {Observable, of, Subscription} from "rxjs"; import {MatSelect} from "@angular/material/select"; import {MatAutocompleteSelectedEvent} from "@angular/material/autocomplete"; import {map, startWith} from "rxjs/operators"; -import {MatChipInputEvent, MatChipSelectionChange} from "@angular/material/chips"; -import {THIS_EXPR} from "@angular/compiler/src/output/output_ast"; +import {MatChipInputEvent} from "@angular/material/chips"; export interface Option { @@ -90,9 +91,9 @@ export interface Option { [class.uk-form-danger]="formControl.invalid && formControl.touched" (click)="openSelect()"> - - + {{getLabel(formControl.value)}} @@ -101,7 +102,7 @@ export interface Option {
-
{{placeholder}}
@@ -123,7 +124,7 @@ export interface Option { - + {{getLabel(chip.value)}} @@ -244,17 +245,21 @@ export class InputComponent implements OnInit, OnDestroy, OnChanges { if(this.type === 'logoURL') { this.secure = (!this.initValue || this.initValue.includes('https://')); } - if (this.options && (this.type === 'chips' || this.type === 'autocomplete')) { - this.filteredOptions = of(this.options); - this.searchControl = new FormControl(''); - this.subscriptions.push(this.searchControl.valueChanges.subscribe(value => { - setTimeout(() => { - this.searchInput.nativeElement.focus(); - this.searchInput.nativeElement.value = value; - },0); - })); - this.filteredOptions = this.searchControl.valueChanges.pipe(startWith(''), - map(option => this.filter(option))); + if (this.type === 'chips' || this.type === 'autocomplete') { + if(!this.options) { + console.error('Please provide options to continue'); + } else { + this.filteredOptions = of(this.options); + this.searchControl = new FormControl(''); + this.subscriptions.push(this.searchControl.valueChanges.subscribe(value => { + setTimeout(() => { + this.searchInput.nativeElement.focus(); + this.searchInput.nativeElement.value = value; + },0); + })); + this.filteredOptions = this.searchControl.valueChanges.pipe(startWith(''), + map(option => this.filter(option))); + } } if (this.formControl && this.formControl.validator) { let validator = this.formControl.validator({} as AbstractControl); @@ -268,6 +273,9 @@ export class InputComponent implements OnInit, OnDestroy, OnChanges { if (this.initValue === value || (this.initValue === '' && value === null)) { this.formControl.markAsPristine(); } + if(this.searchControl) { + this.searchControl.setValue(null); + } })); if (!this.formControl.value) { this.formControl.setValue(''); @@ -337,9 +345,9 @@ export class InputComponent implements OnInit, OnDestroy, OnChanges { return (option) ? option.label : value; } - resetSearch(event: any, value: string = null) { + resetSearch(event: any) { event.stopPropagation(); + this.searchControl.setValue(''); this.formControl.setValue(null); - this.searchControl.setValue(this.getLabel(value)); } } diff --git a/sharedComponents/search-input/search-input.component.ts b/sharedComponents/search-input/search-input.component.ts index 1c93072c..74073e52 100644 --- a/sharedComponents/search-input/search-input.component.ts +++ b/sharedComponents/search-input/search-input.component.ts @@ -22,15 +22,10 @@ import {MatAutocompleteTrigger} from '@angular/material/autocomplete'; -
- - {{selected}} - - - - - +
+ + {{selected}} +
diff --git a/sharedComponents/search-input/search-input.module.ts b/sharedComponents/search-input/search-input.module.ts index b435fdc6..d81f2259 100644 --- a/sharedComponents/search-input/search-input.module.ts +++ b/sharedComponents/search-input/search-input.module.ts @@ -4,7 +4,7 @@ import {SearchInputComponent} from './search-input.component'; import {MatAutocompleteModule} from '@angular/material/autocomplete'; import {IconsModule} from '../../utils/icons/icons.module'; import {IconsService} from '../../utils/icons/icons.service'; -import {search} from '../../utils/icons/icons'; +import {close, search} from '../../utils/icons/icons'; @NgModule({ imports: [SharedModule, MatAutocompleteModule, IconsModule], @@ -13,6 +13,6 @@ import {search} from '../../utils/icons/icons'; }) export class SearchInputModule { constructor(private iconsService: IconsService) { - this.iconsService.registerIcons([search]); + this.iconsService.registerIcons([search, close]); } } diff --git a/utils/modal/full-screen-modal/full-screen-modal.component.ts b/utils/modal/full-screen-modal/full-screen-modal.component.ts index 99185b1f..b119ef3e 100644 --- a/utils/modal/full-screen-modal/full-screen-modal.component.ts +++ b/utils/modal/full-screen-modal/full-screen-modal.component.ts @@ -5,8 +5,9 @@ import {delay} from "rxjs/operators"; @Component({ selector: 'fs-modal', template: ` -
-
+
+
+
@@ -46,6 +47,7 @@ export class FullScreenModalComponent implements OnInit { opened: boolean = false; private readonly element: any; private subscriptions: any[] = []; + private clickedInside: boolean; constructor(private el: ElementRef) { this.element = el.nativeElement; @@ -79,10 +81,10 @@ export class FullScreenModalComponent implements OnInit { } close() { - if (typeof document !== "undefined") { - this.opened = false; - document.getElementsByTagName('html')[0].classList.remove('fs-modal-open'); - this.cancelEmitter.emit(); + if (typeof document !== "undefined" && this.opened) { + document.getElementsByTagName('html')[0].classList.remove('fs-modal-open'); + this.opened = false; + this.cancelEmitter.emit(); } }