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

[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
This commit is contained in:
k.triantafyllou 2021-03-22 15:10:18 +00:00
parent ec927e226c
commit 92852d0962
4 changed files with 43 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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()">
<mat-form-field class="uk-width-1-1">
<mat-chip-list #chipList>
<mat-chip *ngIf="formControl.value" (click)="resetSearch($event, formControl.value)" [selectable]="false" [removable]="removable"
<mat-chip *ngIf="formControl.value" [selectable]="false" [removable]="removable"
[attr.uk-tooltip]="getLabel(formControl.value)">
<span class="uk-flex uk-flex-middle">
<span class="uk-flex uk-flex-middle uk-width-1-1">
<span class="uk-width-expand uk-text-truncate" [class.uk-text-small]="smallChip">{{getLabel(formControl.value)}}</span>
<icon name="remove_circle" class="mat-chip-remove" [flex]="true" [ratio]="smallChip?0.8:1"
(click)="resetSearch($event)"></icon>
@ -101,7 +102,7 @@ export interface Option {
<div [class.uk-hidden]="formControl.value" class="uk-width-expand uk-position-relative chip-input">
<input #searchInput class="uk-width-1-1" [formControl]="searchControl" [matAutocomplete]="auto"
[matChipInputFor]="chipList" [matAutocompleteConnectedTo]="origin">
<div *ngIf="placeholder && !searchControl.value" class="placeholder uk-width-1-1"
<div *ngIf="placeholder && !searchInput.value" class="placeholder uk-width-1-1"
(click)="searchInput.focus()">{{placeholder}}</div>
</div>
<div class="uk-width-1-1 uk-invisible" matAutocompleteOrigin #origin="matAutocompleteOrigin"></div>
@ -123,7 +124,7 @@ export interface Option {
<mat-chip-list #chipList>
<mat-chip *ngFor="let chip of formAsArray.controls; let i=index" [selectable]="false"
[removable]="removable" [attr.uk-tooltip]="getLabel(chip.value)">
<span class="uk-flex uk-flex-middle">
<span class="uk-flex uk-flex-middle uk-width-1-1">
<span class="uk-width-expand uk-text-truncate" [class.uk-text-small]="smallChip">{{getLabel(chip.value)}}</span>
<icon name="remove_circle" class="mat-chip-remove" [flex]="true" [ratio]="smallChip?0.8:1" (click)="removed(i)"></icon>
</span>
@ -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));
}
}

13
sharedComponents/search-input/search-input.component.ts
View File

@ -22,15 +22,10 @@ import {MatAutocompleteTrigger} from '@angular/material/autocomplete';
</mat-option>
</mat-autocomplete>
</form>
<div *ngIf="selected && !showSearch" class="uk-flex uk-flex-left selected uk-padding-small uk-visible@m">
<span class="uk-flex uk-flex-middle clickable">
<span (click)="toggle()">{{selected}}</span>
<span class="uk-icon space" uk-icon="icon: close; ratio: 0.8" (click)="resetEmitter.emit()">
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="close"><path
fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path>
<path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path>
</svg>
</span>
<div *ngIf="selected && !showSearch" class="uk-flex selected uk-padding-small uk-visible@m">
<span class="uk-flex uk-flex-middle clickable" style="max-width: 100%">
<span class="uk-width-expand uk-text-truncate" (click)="toggle()">{{selected}}</span>
<icon name="close" class="space" [ratio]="0.8" (click)="resetEmitter.emit()"></icon>
</span>
</div>
</div>

4
sharedComponents/search-input/search-input.module.ts
View File

@ -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]);
}
}

14
utils/modal/full-screen-modal/full-screen-modal.component.ts
View File

@ -5,8 +5,9 @@ import {delay} from "rxjs/operators";
@Component({
selector: 'fs-modal',
template: `
<div class="fs-modal" (click)="close()">
<div id="fs-modal" (click)="$event.stopPropagation()" class="fs-modal-dialog">
<div class="fs-modal">
<div class="fs-modal-bg" (click)="close()"></div>
<div id="fs-modal" class="fs-modal-dialog">
<!--<a class="close" (click)="close()">
<icon name="close"></icon>
</a>-->
@ -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();
}
}