[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:
parent
ec927e226c
commit
92852d0962
|
@ -1,6 +1,8 @@
|
||||||
import {
|
import {
|
||||||
Component, ElementRef,
|
Component,
|
||||||
EventEmitter, HostListener,
|
ElementRef,
|
||||||
|
EventEmitter,
|
||||||
|
HostListener,
|
||||||
Input,
|
Input,
|
||||||
OnChanges,
|
OnChanges,
|
||||||
OnDestroy,
|
OnDestroy,
|
||||||
|
@ -15,8 +17,7 @@ import {Observable, of, Subscription} from "rxjs";
|
||||||
import {MatSelect} from "@angular/material/select";
|
import {MatSelect} from "@angular/material/select";
|
||||||
import {MatAutocompleteSelectedEvent} from "@angular/material/autocomplete";
|
import {MatAutocompleteSelectedEvent} from "@angular/material/autocomplete";
|
||||||
import {map, startWith} from "rxjs/operators";
|
import {map, startWith} from "rxjs/operators";
|
||||||
import {MatChipInputEvent, MatChipSelectionChange} from "@angular/material/chips";
|
import {MatChipInputEvent} from "@angular/material/chips";
|
||||||
import {THIS_EXPR} from "@angular/compiler/src/output/output_ast";
|
|
||||||
|
|
||||||
|
|
||||||
export interface Option {
|
export interface Option {
|
||||||
|
@ -90,9 +91,9 @@ export interface Option {
|
||||||
[class.uk-form-danger]="formControl.invalid && formControl.touched" (click)="openSelect()">
|
[class.uk-form-danger]="formControl.invalid && formControl.touched" (click)="openSelect()">
|
||||||
<mat-form-field class="uk-width-1-1">
|
<mat-form-field class="uk-width-1-1">
|
||||||
<mat-chip-list #chipList>
|
<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)">
|
[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>
|
<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"
|
<icon name="remove_circle" class="mat-chip-remove" [flex]="true" [ratio]="smallChip?0.8:1"
|
||||||
(click)="resetSearch($event)"></icon>
|
(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">
|
<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"
|
<input #searchInput class="uk-width-1-1" [formControl]="searchControl" [matAutocomplete]="auto"
|
||||||
[matChipInputFor]="chipList" [matAutocompleteConnectedTo]="origin">
|
[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>
|
(click)="searchInput.focus()">{{placeholder}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="uk-width-1-1 uk-invisible" matAutocompleteOrigin #origin="matAutocompleteOrigin"></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-list #chipList>
|
||||||
<mat-chip *ngFor="let chip of formAsArray.controls; let i=index" [selectable]="false"
|
<mat-chip *ngFor="let chip of formAsArray.controls; let i=index" [selectable]="false"
|
||||||
[removable]="removable" [attr.uk-tooltip]="getLabel(chip.value)">
|
[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>
|
<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>
|
<icon name="remove_circle" class="mat-chip-remove" [flex]="true" [ratio]="smallChip?0.8:1" (click)="removed(i)"></icon>
|
||||||
</span>
|
</span>
|
||||||
|
@ -244,17 +245,21 @@ export class InputComponent implements OnInit, OnDestroy, OnChanges {
|
||||||
if(this.type === 'logoURL') {
|
if(this.type === 'logoURL') {
|
||||||
this.secure = (!this.initValue || this.initValue.includes('https://'));
|
this.secure = (!this.initValue || this.initValue.includes('https://'));
|
||||||
}
|
}
|
||||||
if (this.options && (this.type === 'chips' || this.type === 'autocomplete')) {
|
if (this.type === 'chips' || this.type === 'autocomplete') {
|
||||||
this.filteredOptions = of(this.options);
|
if(!this.options) {
|
||||||
this.searchControl = new FormControl('');
|
console.error('Please provide options to continue');
|
||||||
this.subscriptions.push(this.searchControl.valueChanges.subscribe(value => {
|
} else {
|
||||||
setTimeout(() => {
|
this.filteredOptions = of(this.options);
|
||||||
this.searchInput.nativeElement.focus();
|
this.searchControl = new FormControl('');
|
||||||
this.searchInput.nativeElement.value = value;
|
this.subscriptions.push(this.searchControl.valueChanges.subscribe(value => {
|
||||||
},0);
|
setTimeout(() => {
|
||||||
}));
|
this.searchInput.nativeElement.focus();
|
||||||
this.filteredOptions = this.searchControl.valueChanges.pipe(startWith(''),
|
this.searchInput.nativeElement.value = value;
|
||||||
map(option => this.filter(option)));
|
},0);
|
||||||
|
}));
|
||||||
|
this.filteredOptions = this.searchControl.valueChanges.pipe(startWith(''),
|
||||||
|
map(option => this.filter(option)));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
if (this.formControl && this.formControl.validator) {
|
if (this.formControl && this.formControl.validator) {
|
||||||
let validator = this.formControl.validator({} as AbstractControl);
|
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)) {
|
if (this.initValue === value || (this.initValue === '' && value === null)) {
|
||||||
this.formControl.markAsPristine();
|
this.formControl.markAsPristine();
|
||||||
}
|
}
|
||||||
|
if(this.searchControl) {
|
||||||
|
this.searchControl.setValue(null);
|
||||||
|
}
|
||||||
}));
|
}));
|
||||||
if (!this.formControl.value) {
|
if (!this.formControl.value) {
|
||||||
this.formControl.setValue('');
|
this.formControl.setValue('');
|
||||||
|
@ -337,9 +345,9 @@ export class InputComponent implements OnInit, OnDestroy, OnChanges {
|
||||||
return (option) ? option.label : value;
|
return (option) ? option.label : value;
|
||||||
}
|
}
|
||||||
|
|
||||||
resetSearch(event: any, value: string = null) {
|
resetSearch(event: any) {
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
|
this.searchControl.setValue('');
|
||||||
this.formControl.setValue(null);
|
this.formControl.setValue(null);
|
||||||
this.searchControl.setValue(this.getLabel(value));
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -22,15 +22,10 @@ import {MatAutocompleteTrigger} from '@angular/material/autocomplete';
|
||||||
</mat-option>
|
</mat-option>
|
||||||
</mat-autocomplete>
|
</mat-autocomplete>
|
||||||
</form>
|
</form>
|
||||||
<div *ngIf="selected && !showSearch" class="uk-flex uk-flex-left selected uk-padding-small uk-visible@m">
|
<div *ngIf="selected && !showSearch" class="uk-flex selected uk-padding-small uk-visible@m">
|
||||||
<span class="uk-flex uk-flex-middle clickable">
|
<span class="uk-flex uk-flex-middle clickable" style="max-width: 100%">
|
||||||
<span (click)="toggle()">{{selected}}</span>
|
<span class="uk-width-expand uk-text-truncate" (click)="toggle()">{{selected}}</span>
|
||||||
<span class="uk-icon space" uk-icon="icon: close; ratio: 0.8" (click)="resetEmitter.emit()">
|
<icon name="close" class="space" [ratio]="0.8" (click)="resetEmitter.emit()"></icon>
|
||||||
<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>
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -4,7 +4,7 @@ import {SearchInputComponent} from './search-input.component';
|
||||||
import {MatAutocompleteModule} from '@angular/material/autocomplete';
|
import {MatAutocompleteModule} from '@angular/material/autocomplete';
|
||||||
import {IconsModule} from '../../utils/icons/icons.module';
|
import {IconsModule} from '../../utils/icons/icons.module';
|
||||||
import {IconsService} from '../../utils/icons/icons.service';
|
import {IconsService} from '../../utils/icons/icons.service';
|
||||||
import {search} from '../../utils/icons/icons';
|
import {close, search} from '../../utils/icons/icons';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [SharedModule, MatAutocompleteModule, IconsModule],
|
imports: [SharedModule, MatAutocompleteModule, IconsModule],
|
||||||
|
@ -13,6 +13,6 @@ import {search} from '../../utils/icons/icons';
|
||||||
})
|
})
|
||||||
export class SearchInputModule {
|
export class SearchInputModule {
|
||||||
constructor(private iconsService: IconsService) {
|
constructor(private iconsService: IconsService) {
|
||||||
this.iconsService.registerIcons([search]);
|
this.iconsService.registerIcons([search, close]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,8 +5,9 @@ import {delay} from "rxjs/operators";
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'fs-modal',
|
selector: 'fs-modal',
|
||||||
template: `
|
template: `
|
||||||
<div class="fs-modal" (click)="close()">
|
<div class="fs-modal">
|
||||||
<div id="fs-modal" (click)="$event.stopPropagation()" class="fs-modal-dialog">
|
<div class="fs-modal-bg" (click)="close()"></div>
|
||||||
|
<div id="fs-modal" class="fs-modal-dialog">
|
||||||
<!--<a class="close" (click)="close()">
|
<!--<a class="close" (click)="close()">
|
||||||
<icon name="close"></icon>
|
<icon name="close"></icon>
|
||||||
</a>-->
|
</a>-->
|
||||||
|
@ -46,6 +47,7 @@ export class FullScreenModalComponent implements OnInit {
|
||||||
opened: boolean = false;
|
opened: boolean = false;
|
||||||
private readonly element: any;
|
private readonly element: any;
|
||||||
private subscriptions: any[] = [];
|
private subscriptions: any[] = [];
|
||||||
|
private clickedInside: boolean;
|
||||||
|
|
||||||
constructor(private el: ElementRef) {
|
constructor(private el: ElementRef) {
|
||||||
this.element = el.nativeElement;
|
this.element = el.nativeElement;
|
||||||
|
@ -79,10 +81,10 @@ export class FullScreenModalComponent implements OnInit {
|
||||||
}
|
}
|
||||||
|
|
||||||
close() {
|
close() {
|
||||||
if (typeof document !== "undefined") {
|
if (typeof document !== "undefined" && this.opened) {
|
||||||
this.opened = false;
|
document.getElementsByTagName('html')[0].classList.remove('fs-modal-open');
|
||||||
document.getElementsByTagName('html')[0].classList.remove('fs-modal-open');
|
this.opened = false;
|
||||||
this.cancelEmitter.emit();
|
this.cancelEmitter.emit();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue