@vgip/meta-ui 2.1.3 → 2.1.5

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

@@ -1,43 +0,0 @@
-/*
- * @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

@@ -1,17 +0,0 @@
-<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

@@ -1,597 +0,0 @@
-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;
-    });
-  }
-
-}