@vgip/meta-ui 2.1.1 → 2.1.3

package/src/lib/refDialog/index.ts

@@ -0,0 +1,157 @@
+import { Component, ElementRef, OnInit } from '@angular/core';
+import { metaDark, metaLight } from '../common/utils/colorThemes';
+import { MetaResourceService } from '../services/metaResource';
+
+@Component({
+    templateUrl: './view.html',
+    styleUrls: ['./style.scss'],
+    standalone: false
+})
+export class MetaRefDialog implements OnInit {
+  modal: HTMLElement;
+  onComplete: (result?) => undefined;
+  fullResource: any;
+  resources: any = {};
+  models: any = {};
+  reference: any;
+  currentResource: string;
+  services: any = {};
+  integrationCode: string;
+  resource: any;
+  metaResource: MetaResourceService;
+  integrationIcon: string;
+  preferResourceType: string;
+  theme: string;
+
+  constructor(
+    private el: ElementRef
+  ) { }
+
+  get isEditable() {
+    return this.resources[this.currentResource].meta.layout.editable !== false;
+  }
+
+  get isPersistent() {
+    return this.resource && (this.resource.externalId || this.resource.id);
+  }
+
+  ngOnInit() {
+    let references = (this.reference instanceof Array) ? this.reference : [this.reference];
+    /* eslint-disable no-underscore-dangle */
+    if (this.resource && this.resource._vgis) {
+      this.fullResource = this.resource;
+      this.resource = this.resource._vgis;
+    }
+    /* eslint-enable no-underscore-dangle */
+    if (this.resource) {
+      references = references.filter((r) => {
+        const resType = r.name || r.resourceType || '';
+        // comparing case insensitive, because of Zendesk comment vs Comment
+        return (resType.id || resType || '').toLowerCase() === (this.resource.resourceType || this.resource.type || '').toLowerCase();
+      });
+    }
+
+    for (const ref of references) {
+      if (!ref.name) {
+        ref.name = ref.resourceType; // when the resource comes from resources API, not from metadata
+      }
+      if (!this.currentResource) {
+        this.currentResource = ref.name;
+      }
+      if (ref.name === this.preferResourceType) {
+        this.currentResource = this.preferResourceType;
+      }
+      const rs: any = {
+        integrationCode: this.integrationCode,
+        resourceType: ref.resourceType || ref.name,
+        ref
+      };
+      if (this.resource) {
+        rs.externalId = this.resource.id || this.resource.externalId;
+        if (this.resource.eventId) {
+          rs.eventId = this.resource.eventId;
+        }
+        if (this.fullResource) {
+          rs.activity = this.fullResource;
+        }
+        if (this.resource.layoutId) {
+          rs.layoutId = this.resource.layoutId;
+        }
+      }
+      rs.parent = ref.parent;
+      this.resources[ref.name] = rs;
+      this.models[ref.name] = {};
+      if (this.resource) {
+        this.models[ref.name]._vgis = this.resource; // eslint-disable-line no-underscore-dangle
+      }
+    }
+
+    this.modal = this.el.nativeElement.childNodes[0];
+    this.modal.classList.remove('Vlt-modal--out');
+    this.modal.classList.add('Vlt-modal_visible');
+    document.addEventListener('keydown', this.keyEventListener);
+
+    if (this.integrationCode === 'mocks') {
+      this.integrationIcon = 'Brand-icon-vonage';
+    } else {
+      switch (this.integrationCode.toLowerCase()) {
+        case 'office365':
+          this.integrationIcon = 'Brand-icon-office-color';
+          break;
+        case 'sugar':
+          this.integrationIcon = 'Brand-icon-sugarcrm-color';
+          break;
+        case 'msdynamics':
+          this.integrationIcon = 'Brand-icon-dynamics-color';
+          break;
+        default:
+          this.integrationIcon = `Brand-icon-${(this.integrationCode || '').toLowerCase()}-color`;
+      }
+    }
+
+    this.applyTheme();
+  }
+
+  close() {
+    this.modal.classList.remove('Vlt-modal_visible');
+    this.modal.classList.add('Vlt-modal--out');
+  }
+
+  dismiss(ev?) {
+    this.close();
+    this.onComplete(null);
+    if (ev) {
+      ev.preventDefault();
+      ev.stopPropagation();
+      return false;
+    }
+  }
+
+  onResourceDone(result) {
+    this.close();
+    this.onComplete(result);
+  }
+
+  selectResource(ev, resource) {
+    this.currentResource = resource;
+    ev.preventDefault();
+    ev.stopPropagation();
+    return false;
+  }
+
+  keepOrder = (a) => a;
+
+  private keyEventListener = (event) => {
+    if (event && event.key === 'Escape') {
+      document.removeEventListener('keydown', this.keyEventListener);
+      this.dismiss();
+    }
+  };
+
+  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/refDialog/style.scss

@@ -0,0 +1,154 @@
+.Vlt-modal_visible {
+  background: var(--vgip-meta-overlay-background);
+}
+.Vlt-modal__panel {
+  padding: 0;
+  // border: 1px solid var(--vgip-meta-separator-color);
+  background: var(--vgip-meta-resource-bg-color);
+  overflow: hidden;
+  @media only screen and (max-width: 575px) {
+    height: 100%;
+    width: 100%;
+    max-height: none;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    margin: 10px 6px 0 6px;
+    ::ng-deep .busy-mask {
+      min-height: calc(100vh - 58px);
+    }
+  }
+  .Vlt-tabs__header--background {
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+  }
+  .Vlt-tabs__header {
+    background: var(--vgip-meta-resource-bar-color);
+    padding-left: 52px;
+    padding-right: 45px;
+    border-bottom: 0;
+    flex-wrap: wrap;
+    min-height: 52px;
+    max-height: 52px;
+    align-items: center;
+    > .Vlt-icon {
+      position: absolute;
+      left: 14px;
+    }
+    h5 {
+      margin-bottom: 0;
+      font-weight: initial;
+    }
+    .Vlt-tabs__link {
+      padding-top: 4px;
+      padding-bottom: 2px;
+      color: var(--vgip-meta-input-label-color);
+      text-transform: capitalize;
+    }
+    .Vlt-tabs__link_active {
+      color: var(--vgip-meta-input-accent-color);
+      &:after {
+        background: var(--vgip-meta-input-accent-color);
+      }
+    }
+    .Vlt-modal__dismiss {
+      background-image: none;
+      width: 18px;
+      height: 18px;
+      opacity: initial;
+      svg {
+        width: 16px;
+        height: 16px;
+        fill: var(--vgip-meta-input-label-color);
+      }
+      &:hover svg {
+        fill: var(--vgip-meta-input-accent-color);
+      }
+    }
+    &::-webkit-scrollbar {
+      width: 8px;
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: var(--vgip-meta-scrollbar-color);
+      border: 2px solid transparent;
+      border-radius: 6px;
+      background-clip: content-box;
+    }
+  }
+  .Vlt-tabs__content {
+    margin-top: 0;
+    // border-top: 1px solid #e7ebee;
+    .Vlt-tabs__link {
+      font-size: 1.8rem;
+    }
+  }
+  .Vlt-callout--banner {
+    // padding-left: 16px;
+    // padding-right: 20px;
+    -webkit-box-pack: initial;
+    justify-content: initial;
+    text-align: initial;
+    overflow-y: auto;
+    &.Vlt-callout--dismissed {
+      padding: 0;
+    }
+    &:not(.Vlt-callout--dismissed) {
+      min-height: 78px;
+    }
+  }
+  .Vlt-modal__cancel {
+    z-index: 899;
+  }
+  .Vlt-modal__dismiss {
+    right: 16px;
+    top: 14px;
+    // color: #c4cdd5;
+    // &:hover {
+    //   color: #f8fafc;
+    // }
+    // background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2220px%22%20height%3D%2220px%22%20viewBox%3D%220%200%2020%2020%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2048.2%20(47327)%20-%20http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%20--%3E%0A%20%20%20%20%3Ctitle%3Eicn-close%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Modals---Desktop%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20transform%3D%22translate(-512.000000%2C%20-62.000000)%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Modal%22%20transform%3D%22translate(156.000000%2C%2040.000000)%22%20fill%3D%22%23f8fafc%22%20fill-rule%3D%22nonzero%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22icn-close%22%20transform%3D%22translate(356.000000%2C%2022.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group-12%22%20transform%3D%22translate(2.083333%2C%202.500000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22Path-252%22%20points%3D%221.42258898%2015.115968%2015.115968%201.42258898%2013.9374567%200.244077682%200.244077682%2013.9374567%22%3E%3C%2Fpolygon%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22Path-252-Copy%22%20points%3D%220.244077682%201.42258898%2013.9374567%2015.115968%2015.115968%2013.9374567%201.42258898%200.244077682%22%3E%3C%2Fpolygon%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E');
+  }
+  .Vlt-card__footer button {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  .Vlt-select select:disabled {
+    background: initial;
+    cursor: not-allowed;
+  }
+  ::ng-deep .form-content {
+    min-height: 0;
+    max-height: calc(95vh - 172px);
+    @media only screen and (max-width: 575px) {
+      min-height: calc(100vh - 113px);
+    }
+  }
+}
+
+.resource-menu {
+  button {
+    margin: 0 -10px 0;
+    &:not(:hover) .Vlt-icon {
+      color: #616266;
+      fill: #616266;
+    }
+  }
+}
+
+.busy-mask {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: rgba(0,0,0,.32);
+  opacity: 1;
+  z-index: 898;
+  display: none;
+  border-bottom-left-radius: 6px;
+  border-bottom-right-radius: 6px;
+  margin: 1px;
+  cursor: progress;
+  &.active {
+    display: block;
+  }
+}

package/src/lib/refDialog/view.html

@@ -0,0 +1,24 @@
+<div class='Vlt-modal Vlt-modal--large'>
+  <div class="Vlt-modal__panel">
+    <div class="Vlt-tabs">
+      <div class='Vlt-tabs__header--background'>
+        <div class="Vlt-tabs__header Vlt-tabs__header--shadow">
+          <svg class="Vlt-icon" [ngStyle]="{fill: integrationIcon === 'Brand-icon-vonage' ? 'var(--vgip-meta-input-color)' : ''}"><use attr.xlink:href="volta/volta-brand-icons.svg#{{integrationIcon}}" /></svg>
+          <a href='#' *ngFor='let r of resources | keyvalue: keepOrder' (click)='selectResource($event, r.key)' class="Vlt-tabs__link" [ngClass]="{ 'Vlt-tabs__link_active': currentResource === r.key}">
+            {{r.key}}
+          </a>
+          <a href='#' class="Vlt-modal__dismiss" (click)="dismiss($event)">
+            <svg class="Vlt-icon"><use xlink:href="volta/volta-icons.svg#Vlt-icon-cross" /></svg>
+          </a>
+        </div>
+      </div>
+      <div class="Vlt-tabs__content" style='min-height: 90px;'>
+        <ng-container *ngFor='let r of resources | keyvalue: keepOrder'>
+          <div *ngIf='currentResource === r.key' class="Vlt-tabs__panel Vlt-tabs__panel_active">
+            <vgip-meta-resource [resource]='r.value' [model]='models[r.key]' [metaResourceServiceDelegated]='metaResource' (done)='onResourceDone($event)' theme='inherit' [attr.data-theme]='theme'></vgip-meta-resource>
+          </div>
+        </ng-container>
+      </div>
+    </div>
+  </div>
+</div>