@vgip/meta-ui 2.1.2 → 2.1.3

package/src/lib/resource/view.html

@@ -0,0 +1,70 @@
+<div *ngIf='generalError' class="Vlt-callout Vlt-callout--critical" style='overflow: auto; margin: 20px;'>
+	<i></i>
+	<div class="Vlt-callout__content">
+		<p>{{generalError}}</p>
+	</div>
+</div>
+<div *ngIf='!meta' class="Vlt-progress">
+	<div class="Vlt-progress__bar" [ngClass]="{ loading: metaLoading }" role="progressbar" aria-valuemin="0" aria-valuetext="Loading Metadata" aria-valuemax="100"></div>
+</div>
+<form [vgipMetaFormAutofocus]='!resource || !resource.externalId' *ngIf='meta && !generalError' #resourceForm="ngForm" [name]='resource.resourceType' (ngSubmit)='submit(resourceForm)' (change)='onFormChange()' novalidate>
+	<div class='form-content' style='overflow: hidden;'>
+		<div [ngClass]="{ 'Vlt-callout--dismissed': !formErrors }" class="Vlt-callout Vlt-callout--banner Vlt-callout--critical">
+			<i></i>
+			<div class="Vlt-callout__content" style="margin-top: auto;">
+				<p>There is a problem with one or more fields</p>
+				<small style='font-weight: 600; font-size: 1.0em;' *ngIf='formErrors'>{{ formErrors.message || formErrors }}</small>
+			</div>
+			<button type='button' class="Vlt-callout__dismiss" (click)='clearFormErrors()' aria-label="Dismiss"></button>
+		</div>
+		<div class="Vlt-card__content" style='min-height: 40px;'>
+			<vgip-meta-layout *ngIf='edit' [meta]='meta.layout' [resource]='model' [preview]='false' [integration]='meta.integration' [type]='resource.resourceType' theme='inherit'></vgip-meta-layout>
+			<vgip-meta-layout *ngIf='!edit' [meta]='meta.layout' [resource]='model' [preview]='true' [integration]='meta.integration' [type]='resource.resourceType' theme='inherit' [attr.data-vrn]='resourceVrn'></vgip-meta-layout>
+		</div>
+	</div>
+	<div class="Vlt-card__footer">
+		<button class="Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-btn--outline" type='button' aria-label='Cancel' (click)='close()'>
+			{{ edit ? 'Cancel' : 'Close' }}
+		</button>
+		<button *ngIf='edit' class="Vlt-btn Vlt-btn--app" [ngClass]="{ 'Vlt-btn--primary': isPersistent, 'Vlt-btn--secondary': !isPersistent }" type='submit'>
+			{{ (resource && resource.externalId) ? 'Update' : 'Create' }}
+		</button>
+		<button (click)='setEditMode()' *ngIf='!edit && isEditable' [disabled]='!isEditable' class="Vlt-btn Vlt-btn--app Vlt-btn--primary" type='button' aria-label='Edit'>
+			Edit
+		</button>
+		<div style='margin-right: 8px; flex: 1;'>
+			<div *ngIf='meta.availableLayouts && meta.availableLayouts.length' class="Vlt-form__element Vlt-form__element--big" style='padding: 0; margin: -8px -18px -8px 0;'>
+				<div class="Vlt-select">
+					<label style='all: inherit;'>
+						<select style='border: 0; margin-top: 3px; background: transparent;' (change)='changeLayout()' [(ngModel)]='currentLayoutId' [ngModelOptions]='{ standalone: true }' [disabled]='lockedLayoutId === currentLayoutId'>
+							<option selected disabled>Select layout</option>
+							<option *ngFor='let layout of meta.availableLayouts' [ngValue]='layout.id'>{{layout.name}}</option>
+						</select>
+						<label>Layout</label> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control -->
+					</label>
+				</div>
+			</div>
+		</div>
+		<div class="Vlt-dropdown resource-menu" [ngClass]="{ 'Vlt-dropdown--expanded': resourceMenuVisible }" style='margin-left: 2px;'>
+			<div class="Vlt-dropdown__panel" style='bottom: 40px; right: -4px; top: initial;'>
+				<div class="Vlt-dropdown__panel__content">
+					<a href='#' class="Vlt-dropdown__link" (click)='loadMetadata(currentLayoutId, true, $event)'>
+						<div>
+							<svg class='Vlt-icon Vlt-icon--smaller'><use xlink:href="volta/volta-icons.svg#Vlt-icon-refresh"/></svg>&nbsp;&nbsp;Refresh metadata
+						</div>
+					</a>
+				</div>
+			</div>
+			<div class="Vlt-dropdown__trigger">
+				<button type='button' (click)='openResourceMenu()' class="Vlt-btn Vlt-btn--link" aria-label='Resource menu'>
+					<svg class='Vlt-icon Vlt-icon--small' style='margin: 0;'><use xlink:href="volta/volta-icons.svg#Vlt-icon-more-v-negative"/></svg>
+				</button>
+			</div>
+		</div>
+	</div>
+</form>
+<div class='busy-mask' [ngClass]="{ active: busy }">
+	<div style='height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;'>
+		<div class="Vlt-spinner"></div>
+	</div>
+</div>

package/src/lib/resourceCard/index.ts

@@ -0,0 +1,44 @@
+import { Component, Input, OnInit, ViewContainerRef } from '@angular/core';
+import { MetaResourceService } from '../services/metaResource';
+import { MetaReferenceService } from '../services/metaReference';
+import { MetaRefDialog } from '../refDialog';
+
+@Component({
+    selector: 'vgip-meta-resource-card',
+    templateUrl: './view.html',
+    styleUrls: ['./style.scss'],
+    standalone: false
+})
+export class MetaResourceCard implements OnInit {
+    @Input() resource: any;
+    @Input() model: any;
+
+    integrationCode: string;
+
+    constructor(
+        private metaResource: MetaResourceService,
+        private referenceService: MetaReferenceService,
+        private viewContainerRef: ViewContainerRef
+    ) { }
+
+    ngOnInit() {
+        this.integrationCode = (this.resource.integration || this.resource.integrationCode || '').toLowerCase();
+    }
+
+    open(reference, model?) {
+        const refDialogComponent = this.viewContainerRef.createComponent(MetaRefDialog);
+        this.referenceService.openDialog(
+          refDialogComponent, this.metaResource, this.integrationCode, reference, model,
+            model && (reference.editable === false) // is preview mode
+        ).subscribe((result: any) => {
+            console.log('dialog result', result);
+            // if (result && result.raw) {
+            //   if (!this.parent[reference.type]) {
+            //     this.parent[reference.type] = [];
+            //   }
+            //   this.parent[reference.type].push(result.raw);
+            // }
+        });
+    }
+
+}

package/src/lib/resourceCard/style.scss

@@ -0,0 +1,7 @@
+.Vlt-card {
+  margin-bottom: 8px;
+  padding: 16px;
+  .Vlt-btn-group.Vlt-btn-group--hover {
+    right: -8px;
+  }
+}

package/src/lib/resourceCard/view.html

@@ -0,0 +1,14 @@
+<div class="Vlt-card Vlt-bg-white">
+	<div class="Vlt-card__content Vlt-btn-on-hover">
+		<h5>{{model.Subject || model.subject || model.summary || model.title || model.CaseNumber || model.comment || model.body || model.name || model.topic || '...' }}</h5>
+		<div style='font-size: 12px; line-height: 16px;'>
+			Created: <span class='Vlt-black'>{{model._vgis.createdDate | date:'mediumDate'}}</span>
+			Edited: <span class='Vlt-black'>{{model._vgis.modifiedDate | date:'medium'}}</span>
+		</div>
+		<div class="Vlt-badge Vlt-badge--app Vlt-badge--purple Vlt-badge--small">{{model._vgis.resourceType}}</div>
+		<div class="Vlt-btn-group Vlt-btn-group--hover">
+			<a *ngIf='model._vgis.externalLink' attr.href='{{model._vgis.externalLink}}' target='_blank' 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)='open(resource, model)' class="Vlt-btn Vlt-btn--tertiary Vlt-btn--icon" aria-label='Edit'><svg style='margin-left: 0; margin-right: 0;'><use xlink:href="volta/volta-icons.svg#Vlt-icon-edit"/></svg></button>
+		</div>
+	</div>
+</div>

package/src/lib/services/metaContext/index.ts

@@ -0,0 +1,61 @@
+/*
+ * @Author: Alexander.Vangelov@vonage.com
+ * @Date: 2019-09-19 17:35:19
+ * @Last Modified by: Alexander.Vangelov@vonage.com
+ * @Last Modified time: 2020-03-06 10:10:09
+ */
+
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MetaContextService {
+  phoneNumber: string;
+  displayName: string;
+  defaultContactables: {[integrationCode: string]: any} = {};
+  workers: {[integrationCode: string]: any} = {};
+  contactables: {[integrationCode: string]: any} = {};
+  profiles: {[integrationCode: string]: any} = {};
+  vgipEventId: string;
+  vgipUserId: string;
+  _context: any;
+  uid: string;
+  subject: string;
+  onClick2Dial: (phoneNumber, vrn?: string) => void;
+  onContextChange: BehaviorSubject<any>;
+
+  constructor() {
+    this.onContextChange = new BehaviorSubject({});
+  }
+
+  get context() {
+    return this._context;
+  }
+
+  set context(value) {
+    this._context = value;
+    this.onContextChange.next(this._context);
+  }
+
+  set(context?) {
+    if (context) {
+      if (context.phoneNumber) {
+        this.phoneNumber = context.phoneNumber;
+      }
+      if (context.displayName) {
+        this.displayName = context.displayName;
+      }
+    }
+  }
+
+  setOnClick2Dial(callback: (phoneNumber, vrn?: string) => void) {
+    if (typeof(callback) === 'function') {
+      this.onClick2Dial = callback;
+    } else {
+      delete this.onClick2Dial;
+    }
+  }
+
+}

package/src/lib/services/metaMsg/index.ts

@@ -0,0 +1,84 @@
+/*
+ * @Author: Alexander.Vangelov@vonage.com
+ * @Date: 2019-09-19 17:35:19
+ * @Last Modified by: Alexander.Vangelov@vonage.com
+ * @Last Modified time: 2020-05-03 21:31:16
+ */
+
+ /*
+ * Worker messages systems. Every integration may extend the base functionality by registering an integration worker.
+ * This service provides single response for the worker message requests as a callback.
+ */
+import { Injectable } from '@angular/core';
+
+import { MetaContextService } from '../metaContext';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MetaMsgService {
+  private msgCallbacks: {[state: number]: any} = {}; // message subscribers holder
+  private msgListeneres: Array<string> = []; // ensure listener is registerd only once
+  constructor(private metaContext: MetaContextService) {
+  }
+
+  sendMessage(provider: string, msg: any, callback: (response) => void, isLong = false) {
+    provider = (provider || '').toUpperCase();
+    const providerWorker = this.metaContext.workers[provider];
+    if (providerWorker) {
+      if (this.msgListeneres.indexOf(provider)) {
+        this.msgListeneres.push(provider);
+        providerWorker.addEventListener('message', this.workerMsgListener, false); // register a short time listener
+      }
+      let state; // message unique identifier
+      do {
+        state = new Date().getTime();
+      } while (this.msgCallbacks[state]);
+
+      this.msgCallbacks[state] = callback; // register message callback
+      msg.$state = state;
+      providerWorker.postMessage(msg);
+
+      setTimeout(() => {
+        this.cancelMsgListener(msg.action, state); // give up, worker does not replied on time
+        const listenerIndex = this.msgListeneres.indexOf(provider);
+        if (listenerIndex !== -1) {
+          this.msgListeneres.splice(listenerIndex, 1);
+        }
+        providerWorker.removeEventListener('message', this.workerMsgListener); // remove listener when done
+      }, isLong ? 60000 : 2000);
+    } else {
+      callback({ action: msg.action, error: `Worker ${provider} is not registered` });
+    }
+  }
+
+  private cancelMsgListener(action, storedState) {
+    const storedCallback = this.msgCallbacks[storedState];
+    if (storedCallback) {
+      storedCallback({ action, error: 'Timeout', state: storedState }); // always reply with something
+    }
+    delete this.msgCallbacks[storedState];
+  }
+
+  private workerMsgListener = (msg) => {
+    if (msg && msg.data && msg.data.action && msg.data.$state) {
+      const state = msg.data.$state;
+      const callback = this.msgCallbacks[state]; // original requester callback
+      if (callback) {
+        delete msg.data.$state;
+        callback(msg.data);
+      }
+      delete this.msgCallbacks[state]; // get rid of the listener callback when done
+    }
+    this.removeExpiredListeners(); // wipe out the expired listeners if any
+  };
+
+  private removeExpiredListeners() {
+    const now = new Date();
+    for (const state in this.msgCallbacks) { // cleanup expired listeners (< 1 min ago);
+      if (parseInt(state, 10) < now.setMinutes(now.getMinutes() - 1)) {
+        delete this.msgCallbacks[state];
+      }
+    }
+  }
+}

package/src/lib/services/metaReference/index.ts

@@ -0,0 +1,98 @@
+/*
+ * @Author: Alexander.Vangelov@vonage.com
+ * @Date: 2019-09-19 17:35:19
+ * @Last Modified by: Alexander.Vangelov@vonage.com
+ * @Last Modified time: 2020-05-03 21:31:44
+ */
+
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MetaReferenceService {
+  dialogs: Array<any>;
+  constructor(
+    private router: Router) {
+      this.dialogs = [];
+      this.router.events.subscribe(() => {
+        if (this.dialogs.length) {
+          for (let d = (this.dialogs.length - 1); d >= 0; d--) {
+            this.dialogs[d].onComplete();
+          }
+        }
+      });
+    }
+
+  openDialog(
+    componentRef, metaResource, integrationCode, reference, resource,
+    preview?: boolean, preferResourceType?, theme?: string, overlayContainer?: HTMLElement
+  ) {
+    const references = !(reference instanceof Array) ? [reference] : reference.filter((r) => r.creatable !== false);
+    if (resource && resource.type) {
+      if (!references.find((f) => (f.name || f.resourceType) === (resource.resourceType || resource.type))) {
+        references.push({
+          name: resource.resourceType || resource.type,
+          resourceType: resource.resourceType || resource.type,
+          label: resource.label || resource.resourceType || resource.type
+        });
+      }
+    }
+
+    const modalObservable = new Observable(observer => {
+      const refDialog = componentRef.instance;
+      refDialog.integrationCode = integrationCode;
+      refDialog.reference = references;
+      refDialog.resource = resource;
+      refDialog.metaResource = metaResource;
+      refDialog.edit = !preview;
+      refDialog.preferResourceType = preferResourceType;
+      refDialog.theme = theme;
+
+      const domElem = componentRef.hostView.rootNodes[0] as HTMLElement;
+
+      const dialogIndex = this.dialogs.push(refDialog);
+
+      if (dialogIndex > 1) {
+        const modalPanel: HTMLElement = domElem.querySelector('.Vlt-modal__panel');
+        if (modalPanel) {
+          modalPanel.style.marginLeft = `${(dialogIndex * 5)}px`;
+          modalPanel.style.marginTop = `${(dialogIndex * 10)}px`;
+          modalPanel.style.marginBottom = `${((dialogIndex - 1) * 8)}px`;
+        }
+      }
+
+      if (overlayContainer && overlayContainer.appendChild) {
+        overlayContainer.appendChild(domElem);
+      } else {
+        document.body.appendChild(domElem);
+      }
+
+      refDialog.onComplete = (result) => {
+        if (result) {
+          /* eslint-disable no-underscore-dangle */
+          if (result._vgis) {
+            observer.next({
+              id: result._vgis.externalId || result._vgis.id,
+              label: result._vgis.label,
+              type: result._vgis.resourceType,
+              raw: result
+            });
+          } else {
+            console.log('onComplete non VGIS result', result);
+          }
+          /* eslint-enable no-underscore-dangle */
+        } else {
+          observer.next(undefined);
+        }
+        observer.complete();
+        componentRef.destroy();
+        this.dialogs.splice(dialogIndex - 1, 1);
+      };
+    });
+
+    return modalObservable;
+  }
+}

package/src/lib/services/metaResource/index.ts

@@ -0,0 +1,163 @@
+/*
+ * @Author: Alexander.Vangelov@vonage.com
+ * @Date: 2019-09-19 17:35:19
+ * @Last Modified by: Alexander.Vangelov@vonage.com
+ * @Last Modified time: 2020-08-10 22:35:31
+ */
+
+import { Injectable } from '@angular/core';
+
+import { MetaHttpClient } from './metaHttpClient';
+
+const STORAGE_PARAMS_REGEXES = {
+  localStorage: /^localStorage\.(.*)/,
+  sessionStorage: /^sessionStorage\.(.*)/,
+};
+
+const INTEGRATION_URL_TEMPLATE =
+  '/extensions/v2/accounts/${localStorage.vgis.accountId}/users/${localStorage.vgis.userId}/connectors/${integrationCode}';
+const DELEGATE_INTEGRATION_URL_TEMPLATE =
+  '/portal/v1/accounts/${sessionStorage.vgis.accountId}/users/${sessionStorage.vgis.userId}/integrations/${integrationCode}';
+const RESOURCE_URL_TEMPLATE = INTEGRATION_URL_TEMPLATE + '${parentsPath}/${resourceType}';
+const NEW_RESOURCE_URL_TEMPLATE = INTEGRATION_URL_TEMPLATE + '${parentsPath}/resources/${resourceType}';
+
+export class IMetaParentConfig {
+  resourceType: string;
+  externalId: string;
+  parent?: IMetaParentConfig;
+}
+export class IMetaResourceConfig {
+  integrationCode: string;
+  resourceType: string;
+  externalId?: string;
+  parent?: IMetaParentConfig;
+  delegate?: any;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MetaResourceService {
+  baseIntegrationUrl: string;
+  baseResourceUrl: string;
+  newResourceUrl: string;
+  id: string;
+
+  constructor(private httpClient: MetaHttpClient) { }
+
+  setConfig(config: IMetaResourceConfig) {
+    const baseUrlTemplate = config.delegate ? DELEGATE_INTEGRATION_URL_TEMPLATE : INTEGRATION_URL_TEMPLATE;
+    this.baseIntegrationUrl = baseUrlTemplate.replace(/\${\s*([\w.]+)\s*}/g, (m, value) => {
+      for (const storage of Object.keys(STORAGE_PARAMS_REGEXES)) {
+        const match = value.match(STORAGE_PARAMS_REGEXES[storage]);
+        if (match) {
+          return window[storage].getItem(match[1]) || window[storage].getItem(`cti.${match[1]}`);
+        }
+      }
+      return config[value];
+    });
+    this.baseResourceUrl = RESOURCE_URL_TEMPLATE.replace(/\${\s*([\w.]+)\s*}/g, (m, value) => {
+      for (const storage of Object.keys(STORAGE_PARAMS_REGEXES)) {
+        const match = value.match(STORAGE_PARAMS_REGEXES[storage]);
+        if (match) {
+          return window[storage].getItem(match[1]) || window[storage].getItem(`cti.${match[1]}`);
+        }
+      }
+      if (value === 'parentsPath') {
+        let parentsPath = '';
+        if (config.parent) { // config.parent: { resourceType: '...', id: '...', parent: {...} }
+          let rootParent: any = config.parent;
+          while (rootParent) {
+            parentsPath += `/${rootParent.resourceType || rootParent.type}/${rootParent.externalId || rootParent.id}`;
+            rootParent = rootParent.parent;
+          }
+        }
+        return parentsPath;
+      } else {
+        return config[value];
+      }
+    });
+    this.newResourceUrl = NEW_RESOURCE_URL_TEMPLATE.replace(/\${\s*([\w.]+)\s*}/g, (m, value) => {
+      for (const storage of Object.keys(STORAGE_PARAMS_REGEXES)) {
+        const match = value.match(STORAGE_PARAMS_REGEXES[storage]);
+        if (match) {
+          return window[storage].getItem(match[1]);
+        }
+      }
+      if (value === 'parentsPath') {
+        let parentsPath = '';
+        if (config.parent) { // config.parent: { resourceType: '...', id: '...', parent: {...} }
+          let rootParent: any = config.parent;
+          while (rootParent) {
+            parentsPath += `/${rootParent.resourceType || rootParent.type}/${rootParent.externalId || rootParent.id}`;
+            rootParent = rootParent.parent;
+          }
+        }
+        return parentsPath;
+      } else {
+        return config[value];
+      }
+    });
+    this.id = config.externalId;
+  }
+
+  new(config: IMetaResourceConfig) {
+    const s = new MetaResourceService(this.httpClient);
+    s.setConfig(config);
+    return s;
+  }
+
+  searchIntegration(query, scope?: string) {
+    let searchUrl = `${this.baseIntegrationUrl}/search?q=${encodeURIComponent(query)}`;
+    if (scope) {
+      searchUrl += `&scope=${encodeURIComponent(scope)}`;
+    }
+    return this.httpClient.get(searchUrl);
+  }
+
+  getMetadata(layoutId?, refresh?) {
+    let url = `${this.baseResourceUrl.replace('/v2/', '/v3/')}/metadata`;
+    // url += `?t=${new Date().getTime()}`;
+    if (refresh) {
+      url += `${ url.indexOf('?') === -1 ? '?' : '&' }refresh=true`;
+    }
+    if (layoutId) {
+      url += `${ url.indexOf('?') === -1 ? '?' : '&' }layoutId=${layoutId}`;
+    }
+    return this.httpClient.get(url);
+  }
+
+  getDetails(externalId, extraParams?) {
+    let params = 'referenceDetails=true';
+    if (extraParams) {
+      for (const p in extraParams) {
+        if (extraParams[p]) {
+          params += `&${p}=${extraParams[p]}`;
+        }
+      }
+    }
+    return this.httpClient.get(`${this.baseResourceUrl}/${externalId}?${params}`);
+  }
+
+  getByPath(path) { // TODO not universal!
+    let fullPath = `${this.newResourceUrl}${path}`;
+    if (/^..\//.test(path)) {
+      fullPath = `${this.baseIntegrationUrl}${path.substring(2)}`;
+    }
+    return this.httpClient.get(fullPath);
+  }
+
+  save(payload) {
+    if (this.id) {
+      return this.httpClient.put(
+        `${this.baseResourceUrl}/${this.id}`,
+        payload
+      );
+    } else {
+      return this.httpClient.post(
+        `${this.baseResourceUrl}`,
+        payload
+      );
+    }
+  }
+}

package/src/lib/services/metaResource/metaHttpClient.ts

@@ -0,0 +1,76 @@
+/*
+ * @Author: Alexander.Vangelov@vonage.com
+ * @Date: 2019-09-19 17:35:19
+ * @Last Modified by: Alexander.Vangelov@vonage.com
+ * @Last Modified time: 2019-11-22 14:57:07
+ */
+
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+
+interface HttpClientOptions {
+  headers?: HttpHeaders | { [header: string]: string | string[] };
+  params?: HttpParams;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MetaHttpClient {
+
+  constructor(private httpClient: HttpClient) {}
+
+  delete(url: string, queryParams = {}) {
+    const options = this.prepareOptions(queryParams);
+
+    return this.httpClient.delete(`${this.constructUrl(url)}`, options);
+  }
+
+  get<T>(url: string, queryParams = {}) {
+    const options = this.prepareOptions(queryParams);
+    return this.httpClient.get<T>(`${this.constructUrl(url)}`, options);
+  }
+
+  post<T>(url: string, body: any, queryParams = {}) {
+    const options = this.prepareOptions(queryParams);
+
+    return this.httpClient.post<T>(`${this.constructUrl(url)}`, body, options);
+  }
+
+  put<T>(url: string, body: any, queryParams = {}) {
+    const options = this.prepareOptions(queryParams);
+
+    return this.httpClient.put<T>(`${this.constructUrl(url)}`, body, options);
+  }
+
+  patch<T>(url: string, body: any, queryParams = {}) {
+    const options = this.prepareOptions(queryParams);
+
+    return this.httpClient.patch<T>(`${this.constructUrl(url)}`, body, options);
+  }
+
+  private constructUrl(path: string): string {
+    return /^http/.test(path) ? path : `${path}`;
+  }
+
+  private prepareOptions(queryParams: any): HttpClientOptions {
+    Object.keys(queryParams).forEach(key => {
+      if (queryParams[key] == null || queryParams[key] === '') {
+        delete queryParams[key];
+      }
+    });
+
+    const params = new HttpParams({
+      fromObject: queryParams
+    });
+
+    const options: HttpClientOptions = {
+      headers: new HttpHeaders({
+        Accept: 'application/json'
+      }),
+      params
+    };
+
+    return options;
+  }
+}

package/src/lib/services/metaResource/metaResource.spec.ts

@@ -0,0 +1,24 @@
+/*
+ * @Author: Alexander.Vangelov@vonage.com
+ * @Date: 2020-02-10 18:47:45
+ * @Last Modified by: Alexander.Vangelov@vonage.com
+ * @Last Modified time: 2020-02-10 18:48:29
+ */
+
+import { TestBed } from '@angular/core/testing';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+
+import { MetaResourceService } from './';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+
+describe('MetaResourceService', () => {
+  beforeEach(() => TestBed.configureTestingModule({
+    imports: [],
+    providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()]
+}));
+
+  it('should be created', () => {
+    const service: MetaResourceService = ((TestBed as any).inject || (TestBed as any).get)(MetaResourceService);
+    expect(service).toBeTruthy();
+  });
+});