@vgip/meta-ui 2.1.2 → 2.1.3

package/src/lib/fieldRichtext/test.spec.ts

@@ -0,0 +1,43 @@
+/*
+ * @Author: Alexander.Vangelov@vonage.com 
+ * @Date: 2019-09-19 17:35:19 
+ * @Last Modified by: Alexander.Vangelov@vonage.com
+ * @Last Modified time: 2020-02-27 12:17:16
+ */
+
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { NgForm } from '@angular/forms';
+
+import { MetaModule } from '..';
+
+import { FieldRichtext } from '.';
+
+describe('FieldRichtext', () => {
+  let component: FieldRichtext;
+  let fixture: ComponentFixture<FieldRichtext>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [],
+      imports: [
+        MetaModule
+      ],
+      providers: [
+        { provide: NgForm, useValue: new NgForm([], []) }
+      ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FieldRichtext);
+    component = fixture.componentInstance;
+    component.parent = {};
+    component.meta = { name: 'f1' };
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/fieldRichtext/view.html

@@ -0,0 +1,17 @@
+<div class='vgip-meta-field-preview' *ngIf='preview && parent[meta.name]'>
+  <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>
+  <div class='vgip-meta-field-value __gu'>{{parent[meta.name]}}</div>
+</div>
+<div *ngIf='!preview' class="Vlt-form__element" [ngClass]="{ 'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (fq | metaModel).touched) }">
+  <label class="Vlt-label">{{meta.label || meta.name}}<span *ngIf='validations.required' class='Vlt-red'>*</span></label> <!-- eslint-disable-line -->
+  <div class="Vlt-textarea" [ngClass]='{ active: active }'>
+    <input type='hidden' class='main model' [required]='validations.required' [minlength]='validations.minlength' [maxlength]='validations.maxlength' [(ngModel)]='parent[meta.name]' #f='ngModel' [name]='name'/>
+    <quill-editor (onFocus)='active = true' (onBlur)='active = false' class='main model' [(ngModel)]='parent[meta.name]' #fq='ngModel' (ngModelChange)="onModelChangeLocal($event)" [ngModelOptions]='{ standalone: true }' placeholder=' ' [modules]="quillConfigModules"></quill-editor>
+  </div>
+  <small *ngIf='f.invalid && ((f | metaModel)._parent.submitted || (fq | metaModel).touched)' class="Vlt-form__element__error">
+    <span *ngIf="f.errors.required">Required</span>
+    <span *ngIf="f.errors.maxlength">Length can not exceed {{validations.maxlength}} characters</span>
+    <span *ngIf="f.errors.custom">{{f.errors.custom}}&nbsp;</span>
+  </small>
+  <small *ngIf='meta.helpText' class="Vlt-form__element__hint">{{meta.helpText}}</small>
+</div>

package/src/lib/fieldSelect/index.ts

@@ -0,0 +1,597 @@
+import { Component, OnInit, ViewContainerRef } from '@angular/core';
+import { FieldAbstract } from '../fieldAbstract';
+import { ControlContainer, NgForm } from '@angular/forms';
+import { MetaReferenceService } from '../services/metaReference';
+import { MetaResourceService, IMetaResourceConfig } from '../services/metaResource';
+import { MetaRefDialog } from '../refDialog';
+
+@Component({
+    templateUrl: './view.html',
+    styleUrls: ['./style.scss'],
+    viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],
+    standalone: false
+})
+export class FieldSelect extends FieldAbstract implements OnInit {
+  multiple: boolean;
+  input: HTMLInputElement;
+  dropdown: HTMLElement;
+  dropdownScrollContainer: HTMLElement;
+  showText: string;
+  activeSuggestionIndex: number;
+  value: any;
+  isCreatable = false;
+  isUpdatable = false;
+  asyncOptions: Array<any>;
+  searching: boolean;
+  filteredOptions: Array<any>;
+  searchInputText: '';
+  searchInput: HTMLInputElement;
+  private desiredValue: any;
+
+  constructor(
+    private referenceService: MetaReferenceService,
+    private metaResource: MetaResourceService,
+    private viewContainerRef: ViewContainerRef
+  ) {
+    super();
+  }
+
+  get options() {
+    return this.filteredOptions || this.asyncOptions || this.meta.options || this.meta.picklist || [];
+  }
+
+  get groupedOptions() {
+    return this.options.reduce((r, { group }) => {
+      if (!r.some(o => o.group === group)) {
+        r.push({ group, groupItem: this.options.filter(v => v.group === group) });
+      }
+      return r;
+    }, []);
+  }
+
+  get resourceService() {
+    if (!this.metaResourceService) {
+      const metaResourceConfig: IMetaResourceConfig = {
+        integrationCode: this.integrationCode,
+        resourceType: this.resourceType,
+        delegate: this.delegate
+      };
+      this.metaResourceService = this.metaResource.new(metaResourceConfig);
+    }
+    return this.metaResourceService;
+  }
+
+  get optionsBackup() {
+    return this.asyncOptions || this.meta.options || this.meta.picklist || [];
+  }
+
+  // static setup(instance, parent, meta) { } // eslint-disable-line @typescript-eslint/no-unused-vars
+
+  ngOnInit() {
+    // console.log('parent', this.parent);
+    this.validationAttributes = ['required'];
+    this.multiple = (this.meta.type === 'multipicklist') || this.meta.multiple;
+    const origValue = this.parent[this.meta.name];
+    if (this.meta.reference) {
+      this.isCreatable = true;
+      this.isUpdatable = this.meta.reference.updatable
+    }
+    Object.defineProperty(this.parent, this.meta.name, {
+      set: (value) => {
+        this.desiredValue = value;
+        if (this.multiple) {
+          if (value && value instanceof Array === false) {
+            for (const o of this.optionsBackup) {
+              if ((value.id || value) === (o.id || o.value || o.name || 0)) {
+                this.model = [o];
+                this.value = [this.modelToValue(o, this.meta.valueType)];
+                break;
+              }
+            }
+          }
+          if (!value || value.length) {
+            const values = (value instanceof Array) ? value : (value || '').split(';'); // should not handle incorrect values
+            this.value = [];
+            this.model = [];
+            for (const v of values) {
+              if (v) {
+                for (const o of this.optionsBackup) {
+                  if ((v.id || v) === (o.id || o.value || o.name || 0)) {
+                    this.model.push(o);
+                    this.value.push(this.modelToValue(o, this.meta.valueType));
+                    break;
+                  }
+                }
+              }
+            }
+            if (!this.model.length && !this.isPersistedParent) {
+              delete this.model;
+              delete this.value;
+              delete this.showText;
+            } else {
+              this.showText = (this.model || []).map((o) => o.label || o).join(', ');
+            }
+          }
+        } else {
+          if (value) {
+            for (const o of this.options) {
+              if ((value.id || value) === (o.id || o.value || o.name || o)) {
+                this.model = o;
+                this.value = this.modelToValue(o, this.meta.valueType);
+                this.showText = o.label || o;
+                break;
+              }
+            }
+          } else {
+            delete this.model;
+            delete this.value;
+            delete this.showText;
+          }
+        }
+        this.onSubjectChange(this.model);
+        this.meta.$optional = this.isOptional;
+      },
+      get: () => this.value,
+      enumerable: this.sendToServer,
+      configurable: true
+    });
+
+    if (origValue) {
+      this.parent[this.meta.name] = origValue;
+    }
+
+    if (this.default && !this.model) {
+      setTimeout(() => {
+        if (!this.model) {
+          this.parent[this.meta.name] = this.default.id || this.default;
+        }
+      }, 0);
+    }
+
+    if (typeof (this.meta.enabled) !== 'undefined') {
+      if (typeof (this.meta.enabled) === 'object') {
+        for (const par of Object.keys(this.meta.enabled)) {
+          console.log('this.meta.enabled', this.meta.enabled)
+          const parValue = this.parent[par];
+          if (parValue) {
+            // logic for specific values, this works only for true
+          } else {
+            this.logicalDisabled = true;
+            this.clear();
+          }
+          this.parentChangeSubject.subscribe((value) => {
+            if (value && value.hasOwnProperty(par)) {
+              setTimeout(() => {
+                this.logicalDisabled = !value[par];
+                if (this.logicalDisabled) {
+                  this.clear();
+                } else {
+                  this.filterOptions();
+                }
+              }, 0 );
+            }
+          });
+        }
+        this.filterOptions();
+      }
+    }
+
+    if (this.meta.search) {
+      const searchParams = this.meta.search.params;
+      if (searchParams) {
+        for (const par of Object.keys(searchParams)) {
+          const parValue = this.parent[searchParams[par]];
+          if (parValue) {
+            const params = {};
+            params[par] = parValue;
+            this.searchOptions(params);
+          }
+          this.parentChangeSubject.subscribe((value) => {
+            if (value?.hasOwnProperty(searchParams[par])) {
+              if (!this.logicalDisabled) {
+                this.searchOptions(value);
+              }
+            }
+          });
+        }
+      }
+    }
+  }
+
+  onActivated(ev) {
+    // ev.preventDefault();
+    // ev.stopPropagation();
+    this.input = ev.srcElement;
+    if (!this.dropdown) {
+      this.dropdown = ev.srcElement.parentNode.parentNode.parentNode;
+      this.searchInput = this.dropdown.querySelector('.vgip-search_input');
+    }
+    this.showDropdown();
+  }
+
+  detectSearchBlock(element) {
+    return this.elementRef.nativeElement.querySelector('.Vlt-search_wrap').contains(element);
+  }
+
+  onBlur(ev) {
+    let internalControl = false;
+    if (ev.relatedTarget) {
+
+      if (!this.detectSearchBlock(ev.relatedTarget) && !this.elementRef.nativeElement.contains(ev.relatedTarget)) {
+        this.dismissDropdown();
+      } else {
+        internalControl = true;
+      }
+    }
+    if (this.keyListenerActive && !internalControl) {
+      this.input.removeEventListener('keydown', this.keydown);
+      if (this.searchInput) {
+        this.searchInput.removeEventListener('keydown', this.keydown);
+      }
+      setTimeout(() => {
+        if (!this.keyListenerActive) {
+          document.removeEventListener('click', this.clickout);
+        }
+      }, 400);
+      delete this.keyListenerActive;
+    }
+    this.onLeave.emit(ev);
+  }
+
+  onOptionSelect(ev, option) {
+    if (ev) {
+      ev.preventDefault();
+      ev.stopPropagation();
+    }
+    this.focus();
+    if (this.multiple) {
+      if (!this.model) {
+        this.model = [];
+      }
+      const optionIndex = this.model.indexOf(option);
+      if (optionIndex === -1) {
+        this.model.push(option);
+      } else {
+        this.model.splice(optionIndex, 1);
+        if (!this.model.length) {
+          delete this.model;
+        }
+      }
+      this.onModelChange(this.model);
+      if (this.model) {
+        this.showText = (this.model || []).map((o) => o.label || o).join(', ');
+      } else {
+        delete this.showText;
+      }
+    } else {
+      this.dismissDropdown();
+      if (typeof option !== 'undefined') {
+        this.model = option;
+        this.onModelChange(option);
+        this.showText = option.label || (option.id === '' ? '--empty--' : option);
+        if (typeof (option) === 'object' && !option.id && option.id !== '') {
+          delete this.showText;
+        }
+      }
+    }
+  }
+
+  clear(ev?) {
+    delete this.model;
+    this.onModelChange(this.model);
+    delete this.showText;
+    if (ev) {
+      ev.preventDefault();
+      ev.stopPropagation();
+      return false;
+    }
+  }
+
+  openResource(ev) {
+    this.dismissDropdown();
+    if (this.model && typeof(this.meta.reference.updatable) === 'function') {
+      return this.meta.reference.updatable(this);
+    } else if (typeof(this.meta.reference.creatable) === 'function') {
+      return this.meta.reference.creatable(this);
+    }
+    const refDialogComponent = this.viewContainerRef.createComponent(MetaRefDialog);
+    let theme = this.elementRef.nativeElement.dataset.theme;
+    if (!theme || theme === 'inherit') {
+      let parentComponent = this.elementRef.nativeElement.closest('vgip-meta-layout');
+      if (parentComponent) {
+        theme = parentComponent.dataset.theme;
+      }
+      if (!theme || theme === 'inherit') {
+        parentComponent = this.elementRef.nativeElement.closest('vgip-meta-resource');
+        if (parentComponent) {
+          theme = parentComponent.dataset.theme;
+        }
+      }
+    }
+    this.referenceService.openDialog(
+      refDialogComponent, this.metaResource, this.integrationCode, this.meta.reference, null, false, null, theme, this.overlayContainer
+    ).subscribe((result: any) => {
+      if (result) {
+        const existingOptions = (this.meta.options || []).find((o) => (o.id === result.id && o.type === result.type));
+        if (existingOptions) {
+          existingOptions.label = result.label;
+        } else {
+          if (!this.meta.options) {
+            this.meta.options = [];
+          }
+          this.meta.options.unshift(result);
+        }
+        this.onOptionSelect(ev, result);
+      }
+    });
+  }
+
+  showDropdown(updateActiveSuggestionIndex = true) {
+    this.dropdown.classList.add('Vlt-dropdown--expanded');
+    if (!this.keyListenerActive) {
+      if (this.searchInput) {
+        this.searchInput.focus(); // Focus directly on search input first visit
+        this.searchInput.addEventListener('keydown', this.keydown);
+      }
+      this.input.addEventListener('keydown', this.keydown);
+      setTimeout(() => {
+        document.addEventListener('click', this.clickout);
+      }, 200);
+      this.keyListenerActive = true;
+    }
+    if (updateActiveSuggestionIndex && this.options && this.model) {
+      for (let suggestionIndex = 0; suggestionIndex < this.options.length; suggestionIndex++) {
+        if (this.model === this.options[suggestionIndex]) {
+          this.activeSuggestionIndex = suggestionIndex;
+          break;
+        }
+      }
+    }
+    this.ensureDropdownIsVisible();
+  }
+
+  dismissDropdown(event?) {
+    if (event) {
+      this.focus();
+    }
+    if (this.dropdown) {
+      this.dropdown.classList.remove('Vlt-dropdown--expanded');
+    }
+    if (this.searchInput) {
+      this.clearSearchField();
+    }
+    delete this.activeSuggestionIndex;
+  }
+
+  onSearchChange() {
+    const search = new RegExp(this.searchInputText, 'gi');
+    if (this.searchInputText === '') {
+      this.filteredOptions = [...this.optionsBackup];
+    } else {
+      this.filteredOptions = this.optionsBackup.filter(option => (option.label || option.id || option.name || option).match(search));
+    }
+  }
+
+  clearSearchField(ev?) {
+    this.searchInputText = '';
+    this.onSearchChange();
+    if (ev) {
+      ev.preventDefault();
+      ev.stopPropagation();
+      return false;
+    }
+  }
+
+  private ensureDropdownIsVisible() {
+    setTimeout(() => {
+      const holder = this.dropdown.closest('.Vlt-card__content, .Vlt-modal__content');
+      if (holder) {
+        const el = this.elementRef.nativeElement.querySelector('.Vlt-dropdown__panel');
+        const elRect = el.getBoundingClientRect();
+        const holderRect = holder.getBoundingClientRect();
+        if (holderRect.top + holderRect.height < elRect.top + elRect.height) {
+          el.scrollIntoView({ block: 'end' });
+        }
+      }
+    }, 400);
+  }
+
+  private ensureDropdownOptionIsVisible() {
+    if (!this.dropdownScrollContainer) {
+      this.dropdownScrollContainer = this.dropdown.querySelector('.Vlt-dropdown__scroll');
+    }
+    if (this.dropdownScrollContainer && typeof (this.activeSuggestionIndex) === 'number') {
+      const scrollTop = 44 * this.activeSuggestionIndex;
+      const scrollBottom = 44 * (this.activeSuggestionIndex - 7);
+      if (scrollTop < this.dropdownScrollContainer.scrollTop) {
+        this.dropdownScrollContainer.scrollTop = scrollTop;
+      } else if (scrollBottom > this.dropdownScrollContainer.scrollTop) {
+        this.dropdownScrollContainer.scrollTop = scrollBottom;
+      }
+    }
+  }
+
+  private filterOptions() {
+    console.log('filterOptions')
+    this.asyncOptions = [];
+    if (!this.logicalDisabled) {
+      for (const o of this.meta.options) {
+        if (o.for) {
+          for (const par of Object.keys(o.for)) {
+            const parValue = this.parent[par];
+            if (o.for[par].indexOf(parValue) !== -1) {
+              this.asyncOptions.push(o);
+            }
+          }
+        } else {
+          this.asyncOptions.push(o);
+        }
+      }
+    }
+    if (this.model) {
+      // replace current selections with valid ones from the new options list (support duplicate id)
+      if (this.multiple) {
+        const validSelections = [];
+        for (let i = this.model.length - 1; i >= 0; i--) {
+          const applicable = this.asyncOptions.find((o) => o.id === this.model[i].id);
+          if (applicable) {
+            validSelections.push(applicable);
+          }
+        }
+        this.model = validSelections;
+        if (this.model) {
+          this.showText = (this.model || []).map((o) => o.label || o).join(', ');
+        } else {
+          delete this.showText;
+        }
+      } else {
+        this.model = this.asyncOptions.find((m) => m.id === this.model.id);
+      }
+      this.onModelChange(this.model);
+    }
+  }
+
+  private clickout = (event) => {
+    if (
+      event.target.className === 'Vlt-dropdown__link' && this.elementRef.nativeElement.contains(event.target)
+    ) {
+      this.focus();
+    } else if (
+      event.target !== this.input &&
+      !event.target.classList.contains('Vlt-dropdown__block') &&
+      !this.detectSearchBlock(event.target)
+    ) {
+      this.dismissDropdown();
+    } else if (this.detectSearchBlock(event.target)) {
+      event.target.focus();
+    } else {
+      this.focus();
+    }
+  };
+
+  private keydown = (event) => {
+    switch (event.key) {
+      case 'ArrowDown': {
+        this.showDropdown(false);
+        if (typeof (this.activeSuggestionIndex) === 'undefined') {
+          this.activeSuggestionIndex = 0;
+        } else {
+          this.activeSuggestionIndex++;
+          if (this.activeSuggestionIndex >= this.options.length) {
+            this.activeSuggestionIndex = 0;
+          }
+        }
+        this.ensureDropdownOptionIsVisible();
+        event.preventDefault();
+        event.stopPropagation();
+        break;
+      }
+      case 'ArrowUp': {
+        this.showDropdown(false);
+        if (typeof (this.activeSuggestionIndex) === 'undefined') {
+          this.activeSuggestionIndex = this.options.length - 1;
+        } else {
+          this.activeSuggestionIndex--;
+          if (this.activeSuggestionIndex < 0) {
+            this.activeSuggestionIndex = this.options.length - 1;
+          }
+        }
+        this.ensureDropdownOptionIsVisible();
+        event.preventDefault();
+        event.stopPropagation();
+        break;
+      }
+      case 'Enter':
+      case 'Space':
+      case ' ': {
+        if (typeof (this.activeSuggestionIndex) !== 'undefined') {
+          event.preventDefault();
+          event.stopPropagation();
+          this.onOptionSelect(event, this.options[this.activeSuggestionIndex]);
+          if (!this.multiple) {
+            delete this.activeSuggestionIndex;
+          }
+        }
+        break;
+      }
+      case 'Escape': {
+        event.preventDefault();
+        event.stopPropagation();
+        this.dismissDropdown();
+        break;
+      }
+      case 'Backspace': {
+        if (!this.dropdown.classList.contains('Vlt-dropdown--expanded')) {
+          event.preventDefault();
+          event.stopPropagation();
+          this.clear();
+        }
+        break;
+      }
+    }
+  };
+
+  private searchOptions(params?) { // eslint-disable-line @typescript-eslint/no-unused-vars
+    let searchUrl = `/fields/${this.meta.name}/search`;
+    if (this.meta.search) {
+      const searchParams = this.meta.search.params;
+      if (this.meta.search.url) {
+        searchUrl = this.meta.search.url.replace(/\${\s*([\w.]+)\s*}/g, (match, key) => {
+          if (searchParams.hasOwnProperty(key)) {
+            const props = searchParams[key].split('.');
+            const field = props[0];
+            const prop = props[1];
+            delete searchParams[key]; // if it is URL param, remove it as query param
+            let parValue = this.parent[field];
+            if (parValue) {
+              if (prop) {
+                parValue = parValue[prop];
+              }
+              if (parValue) {
+                return parValue;
+              }
+            }
+          }
+          return 'undefined';
+        });
+      }
+      if (searchParams) {
+        for (const par of Object.keys(searchParams)) {
+          const val = this.parent[searchParams[par]];
+          if (val) {
+            searchUrl += `${searchUrl.indexOf('?') === -1 ? '?' : '&'}${par}=${val.id || val}`;
+          }
+        }
+      }
+    }
+    this.searching = true;
+    this.resourceService.getByPath(searchUrl).subscribe((options) => {
+      this.asyncOptions = options;
+      let validValue = false;
+      const value = this.value || this.desiredValue;
+      if (this.multiple) {
+        if (value) {
+          const values = value instanceof Array ? value : (value || "").split(";");
+          validValue = values.some(
+            (v) =>
+              options.find(
+                (o) => (v.id || v) === (o.id || o.value || o.name || 0)
+              ) !== undefined
+          );
+        }
+      } else {
+        if (value) {
+          validValue = options.find((o) => (o.id || o) === (value.id || value)) !== undefined;
+        }
+      }
+
+      if (!validValue) {
+        this.clear();
+      } else {
+        this.parent[this.meta.name] = value;
+      }
+      delete this.searching;
+    });
+  }
+
+}