@vgip/meta-ui 2.1.1 → 2.1.3

package/src/lib/index.ts

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

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

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

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

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

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