[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
2021-03-22 15:10:18 +00:00 · 2021-03-22 15:10:18 +00:00 · 92852d0962
parent ec927e226c
commit 92852d0962
4 changed files with 43 additions and 38 deletions
--- 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()">
            <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));
  }
 }
--- 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';
            </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>
--- 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]);
  }
 }
--- 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: `
-    <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();
    }
  }