@vgip/meta-ui 2.1.3 → 2.1.5

package/src/lib/index.ts

@@ -1,127 +0,0 @@
-/*
- * @Author: Alexander.Vangelov@vonage.com
- * @Date: 2019-09-19 17:34:34
- * @Last Modified by: Alexander.Vangelov@vonage.com
- * @Last Modified time: 2021-02-09 16:57:29
- */
-
-import { NgModule, ModuleWithProviders } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
-
-import { QuillModule } from 'ngx-quill';
-
-import { MetaRefDialog } from './refDialog';
-
-import { MetaLayout } from './layout';
-
-import { MetaResource } from './resource';
-
-import { MetaResourceCard } from './resourceCard';
-
-import { FieldUnknown } from './fieldUnknown';
-import { FieldInput } from './fieldInput';
-import { FieldText } from './fieldText';
-
-import { FieldSelect } from './fieldSelect';
-
-import { FieldReference } from './fieldReference';
-
-import { FieldComposite } from './fieldComposite';
-
-import { FieldBoolean } from './fieldBoolean';
-import { FieldRadio } from './fieldRadio';
-
-import { FieldList } from './fieldList';
-
-import { FieldRichtext } from './fieldRichtext';
-import { FieldDatetime } from './fieldDatetime';
-
-import { FieldHidden } from './fieldHidden';
-
-import { MetaIconsPipe } from './common/metaIcons.pipe';
-import { MetaModelPipe } from './common/metaModel.pipe';
-import { MetaStripHtmlPipe } from './common/metaStripHtml.pipe';
-import { MetaAutofocusDirective } from './common/metaAutofocus.directive';
-import { MetaContextService } from './services/metaContext';
-import { MetaTrackerService } from './services/metaTracker';
-import { ResourceDraftsService } from './services/resourceDrafts';
-import { MetaMsgService } from './services/metaMsg';
-import { MetaReferenceService } from './services/metaReference';
-import { MetaResourceService } from './services/metaResource';
-import { MetaHttpClient } from './services/metaResource/metaHttpClient';
-import { relativeTimeBuilder } from './common/utils/relativeTimeBuilder';
-import { MetaField, MetaFieldContentDirective } from './metaField';
-
-export * from './common/utils/colorThemes';
-export * from './common/metaNormalizer';
-
-@NgModule({ declarations: [
-        MetaIconsPipe,
-        MetaModelPipe,
-        MetaStripHtmlPipe,
-        MetaField,
-        MetaRefDialog,
-        MetaFieldContentDirective,
-        MetaLayout,
-        MetaResource,
-        MetaResourceCard,
-        FieldUnknown,
-        FieldInput,
-        FieldText,
-        FieldSelect,
-        FieldReference,
-        FieldComposite,
-        FieldBoolean,
-        FieldRadio,
-        FieldList,
-        FieldRichtext,
-        FieldDatetime,
-        FieldHidden,
-        MetaAutofocusDirective
-    ],
-    exports: [
-        MetaIconsPipe,
-        MetaModelPipe,
-        MetaStripHtmlPipe,
-        MetaField,
-        MetaLayout,
-        MetaResource,
-        MetaResourceCard,
-        MetaAutofocusDirective
-    ], imports: [CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        QuillModule.forRoot()
-        // QuillModule.forRoot({
-        //   modules: {
-        //     syntax: false,
-        //     toolbar: [
-        //       ['bold', 'italic', 'underline'],
-        //       [{ list: 'bullet' }],
-        //       [{ header: [1, 2, 3, 4, 5, 6, false] }],
-        //       [{ font: [] }],
-        //       [{ align: [] }]
-        //     ]
-        //   }
-        // })
-    ], providers: [provideHttpClient(withInterceptorsFromDi())] })
-export class MetaModule {
-  static withProviders(customProviders: any): ModuleWithProviders<MetaModule> {
-    return {
-      ngModule: MetaModule,
-      providers: customProviders
-    };
-  }
-}
-
-export {
-  MetaField, MetaFieldContentDirective, MetaRefDialog, MetaResourceCard,
-  MetaIconsPipe, MetaModelPipe, MetaStripHtmlPipe, MetaAutofocusDirective,
-  FieldUnknown, FieldInput, FieldText, FieldSelect, MetaLayout, MetaResource,
-  FieldBoolean, FieldRadio, FieldList, FieldComposite, FieldReference, FieldHidden,
-  FieldRichtext, FieldDatetime, MetaContextService, MetaTrackerService, ResourceDraftsService,
-  MetaMsgService, MetaReferenceService, MetaResourceService, MetaHttpClient,
-  relativeTimeBuilder
-};

package/src/lib/layout/index.ts

@@ -1,255 +0,0 @@
-import {
-  AfterContentChecked,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  Input,
-  OnChanges,
-  OnInit,
-  DoCheck,
-  ViewContainerRef,
-} from "@angular/core";
-import { Subject } from "rxjs";
-import { resourceCardLabel } from "../common/utils/resourceCardLabel";
-import { MetaResourceService } from "../services/metaResource";
-import { MetaReferenceService } from "../services/metaReference";
-import { debounceTime, distinctUntilChanged } from "rxjs/operators";
-import { metaDark, metaLight } from "../common/utils/colorThemes";
-import { MetaMsgService } from "../services/metaMsg";
-import { MetaContextService } from "../services/metaContext";
-
-@Component({
-    selector: "vgip-meta-layout",
-    templateUrl: "./view.html",
-    styleUrls: ["./style.scss"],
-    standalone: false
-})
-export class MetaLayout
-  implements OnInit, AfterContentChecked, OnChanges, DoCheck
-{
-  @Input() meta: any;
-  @Input() resource: any;
-  @Input() integration: any;
-  @Input() type: any;
-  @Input() preview: boolean;
-  @Input() theme: string;
-  @Input() delegate: any;
-
-  optionalFields: any = {};
-  optionalFieldsCount: number;
-  showAll = false;
-  fieldsVisibilityChanged: Subject<string> = new Subject<string>();
-  parentForm: HTMLFormElement;
-  integrationCode: string;
-  resourceType: string;
-  childResourceCardLabel = resourceCardLabel;
-  overlayContainer: HTMLElement;
-
-  constructor(
-    private viewContainerRef: ViewContainerRef,
-    private ref: ChangeDetectorRef,
-    private el: ElementRef,
-    private metaResource: MetaResourceService,
-    private referenceService: MetaReferenceService,
-    private metaMsgService: MetaMsgService,
-    private metaContext: MetaContextService
-  ) {
-    // console.log('MetaLayout', this.meta);
-    this.overlayContainer = el.nativeElement;
-  }
-
-  get isPersistedResource() {
-    // eslint-disable-next-line no-underscore-dangle
-    return (
-      this.resource &&
-      this.resource._vgis &&
-      (this.resource._vgis.externalId || this.resource._vgis.id)
-    );
-  }
-
-  ngOnInit() {
-    this.integrationCode = this.meta.integrationCode || this.integration;
-    this.resourceType = this.meta.resourceType || this.type;
-    this.parentForm = this.el.nativeElement.closest("form");
-    this.configureOptionalSections();
-
-    this.fieldsVisibilityChanged
-      .pipe(debounceTime(100), distinctUntilChanged())
-      .subscribe(() => {
-        this.countOptionalFields();
-      });
-    setTimeout(() => {
-      this.countOptionalFields();
-    }, 0);
-
-    if (this.parentForm) {
-      this.parentForm.addEventListener("change", () => {
-        setTimeout(() => {
-          this.fieldsVisibilityChanged.next(JSON.stringify(this.resource));
-          this.countOptionalFields();
-        }, 0);
-      });
-    }
-
-    if (this.theme !== "inherit") {
-      this.applyTheme();
-    }
-    if (this.isPersistedResource && this.meta.children && this.preview) {
-      this.procChildrenExternalLinks();
-    }
-  }
-
-  ngDoCheck(): void {
-    this.countOptionalFields();
-  }
-
-  ngOnChanges(changes: any) {
-    if (changes.meta) {
-      this.configureOptionalSections();
-      setTimeout(() => {
-        this.countOptionalFields();
-      }, 0);
-    }
-    if (changes.theme) {
-      this.theme = changes.theme.currentValue;
-      this.applyTheme();
-    }
-  }
-
-  countOptionalFields() {
-    let count = 0;
-    const countSectionFields = (s) => {
-      for (const f of s.fields || []) {
-        if (f.fields?.length && !f.visible) {
-          countSectionFields(f);
-        } else {
-          if (f.$optional && !f.$hidden) {
-            count++;
-          }
-        }
-      }
-    };
-    for (const s of this.meta.sections) {
-      const notOptionalAny = s.fields?.find((f) => !f.$optional);
-      s.$optional = !notOptionalAny;
-      if (!s.visible) {
-        countSectionFields(s);
-      }
-    }
-    this.optionalFieldsCount = count;
-  }
-
-  configureOptionalSections() {
-    if (this.meta?.sections) {
-      for (const s of this.meta.sections) {
-        Object.defineProperty(s, "$optional", {
-          value: true,
-          writable: true,
-          configurable: true,
-          enumerable: false,
-        });
-      }
-    }
-  }
-
-  ngAfterContentChecked() {
-    this.ref.detectChanges();
-  }
-
-  toggleOptionalFields() {
-    this.showAll = !this.showAll;
-    this.ngAfterContentChecked();
-  }
-
-  private buildExternalLinkForChild(child) {
-    if (child?.externalId || child.id) {
-      this.metaMsgService.sendMessage(
-        this.integrationCode.toUpperCase(),
-        {
-          action: "buildExternalLink",
-          integrationCode: this.integrationCode.toLowerCase(), // don't know why but all workers are written expecting lowercase
-          ref: {
-            parentRefId: this.resource._vgis.externalId || this.resource._vgis.id,
-            parentResourceType: this.resource._vgis.resourceType,
-            ...child
-          },
-          profile: this.metaContext.profiles[ this.integrationCode.toUpperCase()]
-        },
-        (response) => {
-          if (!response.error) {
-            child.externalLink = response.externalLink;
-          } else {
-            console.warn(
-              "No external link support for",
-              this.integrationCode,
-              child.resourceType
-            );
-          }
-        }
-      );
-    }
-  }
-
-  private procChildrenExternalLinks() {
-    for (const child of this.meta.children) {
-      let childrenValue = this.resource[child.name];
-      Object.defineProperty(this.resource, child.name, {
-        set: (children) => {
-          childrenValue = children;
-          if (children instanceof Array) {
-            childrenValue = children;
-            for (const c in children) {
-              if (children[c]?._vgis && !children[c]._vgis.externalLink) { // some day BE will start providing it
-                this.buildExternalLinkForChild(children[c]._vgis);
-              }
-            }
-          }
-        },
-        get: () => childrenValue,
-        enumerable: true,
-        configurable: true
-      });
-      if (childrenValue) {
-        this.resource[child.name] = childrenValue;
-      }
-    }
-  }
-
-  async openChild(childResource, childModel?) {
-    const metaRefDialog = await import("../refDialog").then(
-      (m) => m.MetaRefDialog
-    );
-    childResource.reference.parent = this.resource._vgis; // eslint-disable-line no-underscore-dangle
-    const refDialogComponent =
-      this.viewContainerRef.createComponent(metaRefDialog);
-    this.referenceService
-      .openDialog(
-        refDialogComponent,
-        this.metaResource,
-        this.integrationCode,
-        childResource.reference,
-        childModel,
-        childModel && childResource.reference.editable === false // is preview mode
-      )
-      .subscribe((result: any) => {
-        if (result?.raw) {
-          if (!this.resource[childResource.name]) {
-            this.resource[childResource.name] = [];
-          }
-          if (childModel) {
-            Object.assign(childModel, result.raw);
-          } else {
-            this.buildExternalLinkForChild(result.raw._vgis);
-            this.resource[childResource.name].push(result.raw);
-          }
-        }
-      });
-  }
-
-  private applyTheme() {
-    const metaTheme = this.theme === "dark" ? metaDark : metaLight;
-    for (const key of Object.keys(metaTheme.properties)) {
-      this.el.nativeElement.style.setProperty(key, metaTheme.properties[key]);
-    }
-  }
-}

package/src/lib/layout/style.scss

@@ -1,67 +0,0 @@
-vgip-meta-field {
-  display: none;
-  &.shown {
-    display: initial;
-  }
-}
-
-.Vlt-section__title {
-  // font-size: 12px;
-  line-height: 14px;
-  // font-weight: normal;
-  margin: 8px;
-  padding: 16px 16px 14px 3px;
-  // text-transform: uppercase;
-  margin-left: -1px;
-  margin-right: -1px;
-  margin-top: -9px;
-  background-color: var(--vgip-meta-resource-bg-color);
-  color: var(--vgip-meta-resource-color);
-  position: sticky;
-  top: -9px;
-  z-index: 3;
-  // box-shadow: 0px 1px 3px rgba(44, 45, 48, 0.1);
-  border-bottom: 1px solid var(--vgip-meta-separator-color);
-}
-
-.Vlt-section {
-  margin: 0;
-  padding-bottom: 8px;
-  display: none;
-  &.shown {
-    display: block;
-  }
-}
-.Vlt-btn.vlt-add-child:hover {
-  transform: scale(1.02);
-}
-
-.for-preview {
-  margin-top: -6px;
-}
-
-.Vlt-card {
-  margin-bottom: 16px;
-  padding: 16px;
-  .Vlt-btn-group.Vlt-btn-group--hover {
-    right: -8px;
-  }
-}
-
-button.more-button:focus {
-  font-weight: bold;
-}
-
-.centered {
-  text-align: center;
-}
-
-.Vlt-btn--link {
-  color: var(--vgip-meta-link-color);
-  &:hover {
-    color: var(--vgip-meta-link-hover-color);
-  }
-  svg {
-    fill: var(--vgip-meta-link-color);
-  }
-}

package/src/lib/layout/view.html

@@ -1,45 +0,0 @@
-<div *ngFor='let section of meta.sections' class='Vlt-section' [ngClass]="{ shown: showAll || section.visible || (!meta.oneTimeOptional && !section.$optional) || (meta.oneTimeOptional && !optionalFieldsCount) }">
-	<h5 *ngIf='section.label' class="Vlt-section__title">{{section.label}}</h5>
-	<div style='overflow: visible;' [ngClass]="{ 'for-preview': preview }">
-		<small *ngIf='section.description' class="Vlt-form__element__hint">{{section.description}}</small>
-		<div>
-			<ng-container *ngFor='let field of section.fields'>
-				<vgip-meta-field *ngIf='!field.$hidden && (showAll || section.visible || !field.$optional)' [meta]='field' [parent]='resource' [integrationCode]='integrationCode' [resourceType]='resourceType' [preview]='preview' [ngClass]="{ shown: !field.$invisible && (showAll || true) }" theme='inherit' [attr.data-theme]='theme' [delegate]='delegate'></vgip-meta-field>
-			</ng-container>
-		</div>
-	</div>
-</div>
-<div *ngIf='isPersistedResource && meta.children && preview'>
-	<div *ngFor='let child of meta.children'>
-		<h5 class='Vlt-children__title'>
-			<svg class="Vlt-icon"><use xlink:href="volta/volta-icons.svg#Vlt-icon-stack" /></svg>&nbsp;
-			{{child.label}} <span class='Vlt-grey'>({{(resource[child.name] || []).length}})</span>
-		</h5>
-		<div *ngFor="let c of resource[child.name]" style='position: relative;'>
-
-			<div class="Vlt-card Vlt-bg-white">
-				<div class="Vlt-card__content Vlt-btn-on-hover">
-					<h5>{{childResourceCardLabel(c)}}</h5>
-					<div style='font-size: 12px; line-height: 16px;'>
-						Created: <span class='Vlt-black'>{{c._vgis.createdDate | date:'mediumDate'}}</span>
-						Edited: <span class='Vlt-black'>{{c._vgis.modifiedDate | date:'medium'}}</span>
-					</div>
-					<div class="Vlt-badge Vlt-badge--app Vlt-badge--purple Vlt-badge--small">{{c._vgis.resourceType}}</div>
-					<div class="Vlt-btn-group Vlt-btn-group--hover">
-						<a *ngIf='c._vgis.externalLink' attr.href='{{c._vgis.externalLink}}' target='_blank' rel='noopener' rel='noopener' class="Vlt-btn Vlt-btn--tertiary Vlt-btn--icon" aria-label='Open external'><svg style='margin-left: 0; margin-right: 0;'><use xlink:href="volta/volta-icons.svg#Vlt-icon-open"/></svg></a>
-						<button type='button' (click)='openChild(child, c)' class="Vlt-btn Vlt-btn--tertiary Vlt-btn--icon"><svg style='margin-left: 0; margin-right: 0;'><use attr.xlink:href="volta/volta-icons.svg#Vlt-icon-{{ child.reference.editable ? 'edit' : 'eye-negative' }}"/></svg></button>
-					</div>
-				</div>
-			</div>
-		</div>
-		<button style='width: 100%; margin-top: 0; max-width: 100%;' type='button' (click)='openChild(child)' class="Vlt-btn Vlt-btn--small Vlt-btn--secondary" [disabled]='child.creatable === false'>
-			<svg><use xlink:href="volta/volta-icons.svg#Vlt-icon-plus"/></svg>{{child.reference.label}}
-		</button>
-	</div>
-</div>
-<div *ngIf='!(meta.oneTimeOptional && showAll)' [ngClass]='{ centered: !meta.oneTimeOptional }'>
-	<button *ngIf='!preview && optionalFieldsCount' type='button' (click)='toggleOptionalFields()' class="Vlt-btn Vlt-btn--small Vlt-btn--link more-button" style='margin: 0; margin-bottom: 10px;'>
-		<svg><use attr.xlink:href="volta/volta-icons.svg#Vlt-icon-chevron-{{ showAll ? 'up' : 'down' }}"/></svg>
-		{{ showAll ? 'Hide' : 'Show' }} Optional Fields ({{optionalFieldsCount}})
-	</button>
-</div>

package/src/lib/metaField/index.ts

@@ -1,133 +0,0 @@
-import { Component, Directive, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, ViewContainerRef } from '@angular/core';
-import { FieldAbstract } from '../fieldAbstract';
-
-const FMAP = async (fType) => {
-  switch (fType) {
-    case '':
-    case null:
-    case undefined:
-    case 'number':
-    // case 'datetime':
-    // case 'time':
-    // case 'date':
-    case 'string': { // eslint-disable-line no-fallthrough
-      // return FieldInput;
-      return import('../fieldInput').then(m => m.FieldInput);
-    }
-    case 'textarea':
-    case 'text': {
-      // return FieldText
-      return import('../fieldText').then(m => m.FieldText);
-    }
-    case 'select':
-    case 'options': {
-      // return FieldSelect
-      return import('../fieldSelect').then(m => m.FieldSelect);
-    }
-    case 'reference': {
-      // return FieldReference;
-      return import('../fieldReference').then(m => m.FieldReference);
-    }
-    case 'composite': {
-      // return FieldComposite;
-      return import('../fieldComposite').then(m => m.FieldComposite);
-    }
-    case 'boolean': {
-      // return FieldBoolean;
-      return import('../fieldBoolean').then(m => m.FieldBoolean);
-    }
-    case 'radio': {
-      // return FieldRadio;
-      return import('../fieldRadio').then(m => m.FieldRadio);
-    }
-    case 'list': {
-      // return FieldList;
-      return import('../fieldList').then(m => m.FieldList);
-    }
-    case 'richtext': {
-      // return FieldRichtext;
-      return import('../fieldRichtext').then(m => m.FieldRichtext);
-    }
-    case 'datetime':
-    case 'time':
-    case 'date': {
-      // return FieldDatetime;
-      return import('../fieldDatetime').then(m => m.FieldDatetime);
-    }
-    case 'hidden': {
-      return import('../fieldHidden').then(m => m.FieldHidden);
-    }
-    default: {
-      // return FieldUnknown;
-      return import('../fieldUnknown').then(m => m.FieldUnknown);
-    }
-  }
-};
-
-@Directive({
-    selector: '[metaFieldContent]',
-    standalone: false
-})
-export class MetaFieldContentDirective {
-  constructor(public viewContainerRef: ViewContainerRef) { }
-}
-
-@Component({
-    selector: 'vgip-meta-field',
-    template: '<ng-template metaFieldContent>Loading</ng-template>',
-    styleUrls: ['../field.scss'],
-    standalone: false
-})
-export class MetaField extends FieldAbstract implements OnInit {
-  @Input() meta: any;
-  @Input() parent: any;
-  @Input() integrationCode: any;
-  @Input() resourceType: any;
-  @Input() index: number;
-  @Input() scope: string;
-  @Input() preview: boolean;
-  @Input() theme: string;
-  @Input() overlayContainer: HTMLElement;
-  @Input() delegate: any;
-
-  // eslint-disable-next-line
-  @Output() onChange = new EventEmitter();
-  // eslint-disable-next-line
-  @Output() onLeave = new EventEmitter();
-
-  @ViewChild(MetaFieldContentDirective, { static: true }) fieldContent: MetaFieldContentDirective;
-
-  constructor(private el: ElementRef) {
-    super();
-  }
-
-  async ngOnInit() {
-    const component = await FMAP(this.meta.type);
-    this.fieldContent.viewContainerRef.clear();
-    const componentRef = this.fieldContent.viewContainerRef.createComponent(component);
-    const field: FieldAbstract = componentRef.instance;
-    if (component.setup) {
-      // console.log('setup', {a: this.el.nativeElement.parentNode.parentNode})
-      component.setup(field, this.parent, this.meta);
-    }
-    field.meta = this.meta;
-    field.parent = this.parent;
-    field.integrationCode = (this.integrationCode || '').toLowerCase();
-    field.resourceType = (this.resourceType || '');
-    field.index = this.index;
-    field.scope = this.scope;
-    field.elementRef = this.el;
-    field.onChange = this.onChange;
-    field.onLeave = this.onLeave;
-    field.preview = this.preview;
-    field.theme = this.theme;
-    field.overlayContainer = this.overlayContainer;
-    field.delegate = this.delegate;
-    Object.defineProperty(field.meta, 'unset', {
-      value: false,
-      writable: true,
-      configurable: true,
-      enumerable: false
-    });
-  }
-}

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

@@ -1,32 +0,0 @@
-
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
-import { MetaModule } from '..';
-import { MetaField } from '.';
-
-describe('MetaField', () => {
-  let component: MetaField;
-  let fixture: ComponentFixture<MetaField>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [],
-      imports: [
-        MetaModule
-      ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(MetaField);
-    component = fixture.componentInstance;
-    component.parent = {};
-    component.meta = { type: 'dummy' };
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});