monkey-front-core 0.0.237 → 0.0.238

package/src/lib/core/directives/monkeyecx-popover-options.directive.ts

@@ -0,0 +1,52 @@
+import { Directive, forwardRef, InjectionToken, Input } from '@angular/core';
+
+export const POPOVER_OPTIONS = new InjectionToken('POPOVER_OPTIONS');
+
+export type PopoverDir =
+  | 'rtl'
+  | 'ltr'
+  | 'trtl'
+  | 'tltr'
+  | 'ct'
+  | 'cc'
+  | 'cr'
+  | 'rt'
+  | 'rb'
+  | 'lt'
+  | 'lb';
+
+export interface MonkeyEcxPopoverOptions {
+  dir?: PopoverDir;
+  minwidth?: boolean;
+  backdrop?: boolean;
+  contextmenu?: boolean;
+}
+
+@Directive({
+  selector: '[monkeyecxPopoverOptions]',
+  providers: [
+    {
+      provide: POPOVER_OPTIONS,
+      useExisting: forwardRef(() => {
+        // eslint-disable-next-line no-use-before-define
+        return MonkeyEcxPopoverOptionsDirective;
+      })
+    }
+  ]
+})
+export class MonkeyEcxPopoverOptionsDirective implements MonkeyEcxPopoverOptions {
+  @Input('monkeyecxPopoverOptions')
+  set options(options: MonkeyEcxPopoverOptions) {
+    Object.entries(options).forEach(([k, v]) => {
+      this[k] = v;
+    });
+  }
+
+  minwidth?: boolean;
+
+  dir?: PopoverDir;
+
+  backdrop?: boolean;
+
+  contextmenu?: boolean;
+}

package/src/lib/core/directives/monkeyecx-popover.directive.ts

@@ -0,0 +1,235 @@
+import {
+  ConnectedPosition,
+  FlexibleConnectedPositionStrategy, FlexibleConnectedPositionStrategyOrigin,
+  Overlay,
+  OverlayPositionBuilder,
+  OverlayRef
+} from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import {
+  ChangeDetectorRef,
+  Directive,
+  ElementRef,
+  Inject,
+  Input,
+  NgZone,
+  OnDestroy,
+  Optional,
+  TemplateRef,
+  ViewContainerRef
+} from '@angular/core';
+import { Subscription } from 'rxjs';
+import { NavigationStart, Router } from '@angular/router';
+import { filter } from 'rxjs/operators';
+import { POPOVER_OPTIONS } from './monkeyecx-popover-options.directive';
+import type { PopoverDir, MonkeyEcxPopoverOptions } from './monkeyecx-popover-options.directive';
+
+@Directive({
+  selector: '[monkeyecxPopover]'
+})
+export class MonkeyEcxPopoverDirective implements OnDestroy {
+  private _popover!: boolean;
+
+  get popover() {
+    return this._popover;
+  }
+
+  @Input('monkeyecxPopover')
+  set popover(show: boolean) {
+    this._popover = show;
+    if (show) {
+      this.createPopover();
+    } else if (this.overlayRef) {
+      this.overlayRef.dispose();
+    }
+  }
+
+  @Input('monkeyecxPopoverClosed') closed!: (e?: MouseEvent) => void;
+
+  private _target!: HTMLElement;
+
+  get target() {
+    return this._target;
+  }
+
+  @Input('monkeyecxPopoverTarget')
+  set target(target: HTMLElement) {
+    this._target = target;
+  }
+
+  @Input('monkeyecxPopoverMinwidth') minwidth = false;
+
+  @Input('monkeyecxPopoverBackdrop') backdrop = true;
+
+  @Input('monkeyecxPopoverWatch') watch = false;
+
+  @Input('monkeyecxPopoverDir') dir: PopoverDir = 'ltr';
+
+  @Input('monkeyecxPopoverContextmenu') contextmenu = false;
+
+  @Input('monkeyecxPopoverHeight') height!: number | string;
+
+  private overlayRef!: OverlayRef;
+
+  private positionStrategy!: FlexibleConnectedPositionStrategy;
+
+  private templatePortal!: TemplatePortal;
+
+  private subs = new Subscription();
+
+  private eventsSubs = new Subscription();
+
+  private resizeObserver: any;
+
+  constructor(
+     private tpl: TemplateRef<any>,
+     private vcr: ViewContainerRef,
+     private el: ElementRef,
+     private zone: NgZone,
+     private _viewContainerRef: ViewContainerRef,
+     private _cd: ChangeDetectorRef,
+     private overlay: Overlay,
+    private overlayPositionBuilder: OverlayPositionBuilder,
+     private router: Router,
+    @Inject(POPOVER_OPTIONS) @Optional() private options: MonkeyEcxPopoverOptions
+  ) {
+    this.eventsSubs = this.router.events
+      .pipe(
+        filter((event: any) => {
+          return event instanceof NavigationStart;
+        })
+      )
+      .subscribe(() => {
+        this.onHandleClose();
+      });
+  }
+
+  private onHandleClose(e?: MouseEvent) {
+    this.popover = false;
+    this.subs.unsubscribe();
+    this.resizeObserver?.disconnect();
+    this.zone.run(() => {
+      if (this.closed) {
+        this.closed(e);
+      }
+    });
+  }
+
+  getDirPositions(dir?: PopoverDir): ConnectedPosition[] {
+    const revert = {
+      start: 'end', end: 'start', bottom: 'top', top: 'bottom', center: 'center'
+    };
+    const centerY = (pos: any): ConnectedPosition => {
+      return {
+        originX: 'center', originY: pos, overlayX: 'center', overlayY: revert[pos]
+      };
+    };
+    const centerX = (pos: any): ConnectedPosition => {
+      return {
+        originX: revert[pos], originY: 'center', overlayX: pos, overlayY: 'center'
+      };
+    };
+    const ltr = (axis: any): ConnectedPosition => {
+      return {
+        originX: 'start', originY: axis, overlayX: 'start', overlayY: revert[axis]
+      };
+    };
+    const rtl = (axis: any): ConnectedPosition => {
+      return {
+        originX: 'end', originY: axis, overlayX: 'end', overlayY: revert[axis]
+      };
+    };
+    const side = (axis: any, axis2: any): ConnectedPosition => {
+      return {
+        originX: axis, originY: axis2, overlayX: revert[axis], overlayY: axis2
+      };
+    };
+
+    const cmp = dir || this.options?.dir || this.dir;
+    if (cmp === 'ct') {
+      return [centerY('top'), centerY('bottom'), centerX('start'), centerX('end')];
+    }
+    if (cmp === 'cr') {
+      return [centerX('end'), centerX('start'), centerY('top'), centerY('bottom')];
+    }
+    if (cmp === 'cc') {
+      return [centerX('center')];
+    }
+    if (cmp === 'ltr') {
+      return [ltr('bottom'), ltr('top')];
+    }
+    if (cmp === 'rtl') {
+      return [rtl('bottom'), rtl('top')];
+    }
+    if (cmp === 'tltr') {
+      return [ltr('top'), ltr('bottom')];
+    }
+    if (cmp === 'trtl') {
+      return [rtl('top'), rtl('bottom')];
+    }
+    if (cmp === 'rt') {
+      return [side('end', 'top'), side('end', 'bottom'), ltr('top')];
+    }
+    if (cmp === 'rb') {
+      return [side('end', 'bottom'), side('end', 'top'), ltr('bottom'), rtl('bottom')];
+    }
+    if (cmp === 'lt') {
+      return [side('start', 'top'), side('start', 'bottom'), rtl('top')];
+    }
+    if (cmp === 'lb') {
+      return [side('start', 'bottom'), side('start', 'top'), rtl('bottom')];
+    }
+
+    return [];
+  }
+
+  createPopover(
+    origin?: FlexibleConnectedPositionStrategyOrigin,
+    options?: MonkeyEcxPopoverOptions
+  ) {
+    this.templatePortal = new TemplatePortal(this.tpl, this._viewContainerRef);
+    this.positionStrategy = this.overlayPositionBuilder
+      .flexibleConnectedTo(origin || this.target)
+      .withPush(true)
+      .withGrowAfterOpen(true)
+      .withPositions(this.getDirPositions(options?.dir));
+
+    this.overlayRef = this.overlay.create({
+      positionStrategy: this.positionStrategy,
+      disposeOnNavigation: true,
+      direction: 'ltr',
+      hasBackdrop: this.backdrop,
+      scrollStrategy: this.overlay.scrollStrategies.reposition({
+      }),
+      backdropClass: 'cdk-overlay-transparent-backdrop',
+      width: (this.options?.minwidth || this.minwidth) ? (this.target.offsetWidth - 2) : undefined,
+      maxHeight: '95%',
+      height: this.height
+    });
+
+    this.subs = this.overlayRef.backdropClick().subscribe((e) => {
+      this.onHandleClose(e);
+    });
+
+    const attached = this.overlayRef.attach(this.templatePortal);
+
+    if (this.watch) {
+      try {
+        if ('ResizeObserver' in window) {
+          this.resizeObserver = new ResizeObserver(([{ contentRect }]) => {
+            this.overlayRef.updatePosition();
+          })
+            .observe(attached.rootNodes[0]);
+        }
+      } catch (e) {
+        // not to do
+      }
+    }
+  }
+
+  ngOnDestroy() {
+    this.popover = false;
+    this.subs.unsubscribe();
+    this.eventsSubs.unsubscribe();
+  }
+}

package/src/lib/core/directives/monkeyecx-security-directive.ts

@@ -0,0 +1,68 @@
+import { ChangeDetectorRef, Directive, ElementRef, Input, OnInit } from '@angular/core';
+import { MonkeyEcxTokenCredentials } from '../interfaces';
+import { MonkeyEcxTokenStorageService } from '../services/storage';
+
+@Directive({
+  selector: '[monkeyecxSecurity]',
+})
+export class MonkeyEcxSecurityDirective implements OnInit {
+  @Input('securityRoles') roles: string[] = [];
+
+  @Input('securityByExclusion') byExclusion: boolean = false;
+
+  private tokenCredentials: MonkeyEcxTokenCredentials | null = null;
+
+  constructor(
+    private elementRef: ElementRef,
+    private tokenStorageService: MonkeyEcxTokenStorageService,
+    private cdr: ChangeDetectorRef
+  ) {
+    // not to do
+  }
+
+  private getRole(): string {
+    const { tokenCredentials } = this;
+
+    if (!tokenCredentials) return '';
+
+    if (tokenCredentials?.programAdmin === 'true') {
+      return 'PROGRAM_ADMIN';
+    }
+
+    return tokenCredentials?.role || '';
+  }
+
+  private handleAccess() {
+    const { roles, byExclusion } = this;
+    let display = 'none';
+    const found = roles?.indexOf(this.getRole());
+    if (byExclusion) {
+      display = 'block';
+      if (found > -1) {
+        display = 'none';
+      }
+    } else {
+      display = 'none';
+      if (found > -1) {
+        display = 'block';
+      }
+    }
+
+    if (!roles || roles.length === 0 || this.getRole() === 'PROGRAM_ADMIN') display = 'block';
+    this.elementRef.nativeElement.style.display = display;
+    this.cdr.detectChanges();
+  }
+
+  ngOnInit() {
+    this.elementRef.nativeElement.style.display = 'none';
+    this.cdr.detectChanges();
+
+    this.tokenStorageService.tokenHasChanged().subscribe(() => {
+      this.tokenCredentials = this.tokenStorageService.getToken();
+      this.handleAccess();
+    });
+
+    this.tokenCredentials = this.tokenStorageService.getToken();
+    this.handleAccess();
+  }
+}

package/src/lib/core/directives/monkeyecx-tooltip-directive.ts

@@ -0,0 +1,131 @@
+import { Directive, Input, ElementRef, HostListener, Renderer2 } from '@angular/core';
+
+@Directive({
+  selector: '[monkeyecxTooltip]',
+})
+export class MonkeyEcxTooltipDirective {
+  @Input() tooltipDelay?: number;
+
+  @Input() tooltipPosition?: string;
+
+  @Input() tooltipText?: string;
+
+  @Input() tooltipTitle?: string;
+
+  @Input() enableToShow = true;
+
+  offset = 10;
+
+  tooltip: HTMLElement | null = null;
+
+  constructor(private el: ElementRef, private renderer: Renderer2) {
+    // not to do
+  }
+
+  @HostListener('mouseenter')
+  onMouseEnter() {
+    if (!this.tooltip) {
+      this.show();
+    }
+  }
+
+  @HostListener('mouseleave')
+  onMouseLeave() {
+    if (this.tooltip) {
+      this.hide();
+    }
+  }
+
+  @HostListener('click')
+  clickout() {
+    if (this.tooltip) {
+      this.hide();
+    }
+  }
+
+  show() {
+    if (this.enableToShow) {
+      this.create();
+      this.setPosition();
+      this.renderer.addClass(this.tooltip, 'monkeyecx-tooltip-show');
+      setTimeout(() => {
+        this.hide();
+      }, 5000);
+    }
+  }
+
+  hide() {
+    if (!this.tooltip) return;
+    this.renderer.removeClass(this.tooltip, 'monkeyecx-tooltip-show');
+    this.renderer.removeChild(document.body, this.tooltip);
+
+    this.tooltip = null;
+  }
+
+  create() {
+    const tooltipElement = document.createElement('div');
+
+    this.tooltip = this.renderer.createElement('span');
+
+    if (this.tooltipTitle) {
+      const tooltipTitleElement = document.createElement('span');
+
+      tooltipTitleElement.innerText = `${this.tooltipTitle}`;
+      tooltipTitleElement.className = 'monkeyecx-tooltip-title';
+
+      tooltipElement.appendChild(tooltipTitleElement);
+    }
+
+    if (this.tooltipText) {
+      const tooltipTextElement = document.createElement('span');
+
+      tooltipTextElement.innerText = `${this.tooltipText}`;
+      tooltipTextElement.className = 'monkeyecx-tooltip-description';
+      tooltipElement.appendChild(tooltipTextElement);
+    }
+
+    this.renderer.appendChild(this.tooltip, tooltipElement);
+    this.renderer.appendChild(document.body, this.tooltip);
+
+    this.renderer.addClass(this.tooltip, 'monkeyecx-tooltip');
+    this.renderer.addClass(this.tooltip, `monkeyecx-tooltip-${this.tooltipPosition}`);
+
+    this.renderer.setStyle(this.tooltip, '-webkit-transition', `opacity ${this.tooltipDelay}ms`);
+    this.renderer.setStyle(this.tooltip, '-moz-transition', `opacity ${this.tooltipDelay}ms`);
+    this.renderer.setStyle(this.tooltip, '-o-transition', `opacity ${this.tooltipDelay}ms`);
+    this.renderer.setStyle(this.tooltip, 'transition', `opacity ${this.tooltipDelay}ms`);
+  }
+
+  setPosition() {
+    const hostPos = this.el.nativeElement.getBoundingClientRect();
+    const tooltipPos = this.tooltip?.getBoundingClientRect();
+    if (!tooltipPos) return;
+    const scrollPos =
+      window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
+    let top: number = 0;
+    let left: number = 0;
+
+    if (this.tooltipPosition === 'top') {
+      top = hostPos.top - tooltipPos.height - this.offset;
+      left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
+    }
+
+    if (this.tooltipPosition === 'bottom') {
+      top = hostPos.bottom + this.offset;
+      left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
+    }
+
+    if (this.tooltipPosition === 'left') {
+      top = hostPos.top + (hostPos.height - tooltipPos.height) / 2;
+      left = hostPos.left - tooltipPos.width - this.offset;
+    }
+
+    if (this.tooltipPosition === 'right') {
+      top = hostPos.top + (hostPos.height - tooltipPos.height) / 2;
+      left = hostPos.right + this.offset;
+    }
+
+    this.renderer.setStyle(this.tooltip, 'top', `${top + scrollPos}px`);
+    this.renderer.setStyle(this.tooltip, 'left', `${left}px`);
+  }
+}

package/{lib/core/index.d.ts → src/lib/core/index.ts}

@@ -1,9 +1,9 @@
-export * from './decorators';
-export * from './directives';
-export * from './interceptors';
-export * from './interfaces';
-export * from './model';
-export * from './pipes';
-export * from './services';
-export * from './specification-search';
-export * from './utils';
+export * from './decorators';
+export * from './directives';
+export * from './interceptors';
+export * from './interfaces';
+export * from './model';
+export * from './pipes';
+export * from './services';
+export * from './specification-search';
+export * from './utils';

package/{lib/core/interceptors/index.d.ts → src/lib/core/interceptors/index.ts}

@@ -1,5 +1,5 @@
-export * from './monkeyecx-http-config-error.interceptor';
-export * from './monkeyecx-http-config-header.interceptor';
-export * from './monkeyecx-http-config-interceptor.module';
-export * from './monkeyecx-http-config-loading-in-progress.interceptor';
-export * from './monkeyecx-http-config-queue.interceptor';
+export * from './monkeyecx-http-config-error.interceptor';
+export * from './monkeyecx-http-config-header.interceptor';
+export * from './monkeyecx-http-config-interceptor.module';
+export * from './monkeyecx-http-config-loading-in-progress.interceptor';
+export * from './monkeyecx-http-config-queue.interceptor';

package/src/lib/core/interceptors/monkeyecx-http-config-error.interceptor.ts

@@ -0,0 +1,58 @@
+import { Injectable } from '@angular/core';
+import {
+  HttpErrorResponse,
+  HttpEvent,
+  HttpHandler,
+  HttpInterceptor,
+  HttpRequest
+} from '@angular/common/http';
+import { Observable, throwError } from 'rxjs';
+import { catchError, map, mergeMap, take } from 'rxjs/operators';
+import { MonkeyEcxAuthenticationService } from '../services/auth';
+import { MonkeyEcxErrorHandlingService } from '../services/error';
+
+export interface Headers {
+  name: string;
+  value: string;
+}
+
+@Injectable()
+export class MonkeyEcxHttpConfigErrorInterceptor implements HttpInterceptor {
+  constructor(
+    private monkeyecxAuthenticationService: MonkeyEcxAuthenticationService,
+    private monkeyecxErrorHandlingService: MonkeyEcxErrorHandlingService
+  ) {
+    // no to do
+  }
+
+  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    return next.handle(request).pipe(
+      map((event: HttpEvent<any>) => {
+        return event;
+      }),
+      catchError((error: HttpErrorResponse) => {
+        if (this.monkeyecxAuthenticationService.refreshShouldHappen(error)) {
+          return this.monkeyecxAuthenticationService?.refreshToken()?.pipe(
+            take(1),
+            map(() => {
+              return this.monkeyecxAuthenticationService.getRequestWithHeaders(request);
+            }),
+            mergeMap((resp: any) => {
+              return next.handle(resp).pipe(
+                catchError((error: any) => {
+                  this.monkeyecxErrorHandlingService.handleError(error, 'refresh_token');
+                  return throwError(null);
+                })
+              );
+            }),
+            catchError((error: any) => {
+              this.monkeyecxErrorHandlingService.handleError(error, 'refresh_token');
+              return throwError(null);
+            })
+          ) || throwError(error);
+        }
+        return throwError(error);
+      })
+    );
+  }
+}

package/src/lib/core/interceptors/monkeyecx-http-config-header.interceptor.ts

@@ -0,0 +1,78 @@
+import { Injectable } from '@angular/core';
+import {
+  HttpErrorResponse,
+  HttpEvent,
+  HttpHandler,
+  HttpInterceptor,
+  HttpRequest
+} from '@angular/common/http';
+import { from, Observable, throwError } from 'rxjs';
+import { catchError, first, map, mergeMap, take } from 'rxjs/operators';
+import { MonkeyEcxErrorHandlingService } from '../services/error';
+import { MonkeyEcxAuthenticationService } from '../services/auth';
+import { MonkeyEcxConfigService } from '../services';
+
+@Injectable()
+export class MonkeyEcxHttpConfigHeaderInterceptor implements HttpInterceptor {
+  constructor(
+    private authService: MonkeyEcxAuthenticationService,
+    private errorHandlingService: MonkeyEcxErrorHandlingService,
+    private config: MonkeyEcxConfigService
+  ) {
+    // not to do
+  }
+
+  private async handle(request: HttpRequest<any>) {
+    const { url } = request;
+
+    if (this.authService.isTokenMandatory(url)) {
+      try {
+        await this.config
+          .config()
+          .pipe(
+            first((val: any) => {
+              return !!val && JSON.stringify(val) !== '{}';
+            })
+          )
+          .toPromise();
+      } catch (e) {
+        // not to do
+      }
+    }
+
+    const resp = await this.authService
+      .getRequestWithHeadersOb(request)
+      .pipe(
+        take(1),
+        map((event: any) => {
+          return event;
+        }),
+        catchError((error: HttpErrorResponse) => {
+          this.errorHandlingService.handleError(error);
+          return throwError(error);
+        })
+      )
+      .toPromise();
+
+    return resp;
+  }
+
+  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    return from(this.handle(request)).pipe(
+      take(1),
+      map((event: any) => {
+        return event;
+      }),
+      mergeMap((resp: any) => {
+        request = request.clone({
+          setHeaders: resp
+        });
+        return next.handle(request);
+      }),
+      catchError((error: HttpErrorResponse) => {
+        this.errorHandlingService.handleError(error);
+        return throwError(error);
+      })
+    );
+  }
+}

package/src/lib/core/interceptors/monkeyecx-http-config-interceptor.module.ts

@@ -0,0 +1,40 @@
+import { ModuleWithProviders, NgModule } from '@angular/core';
+import { HTTP_INTERCEPTORS } from '@angular/common/http';
+import { CommonModule } from '@angular/common';
+import { MonkeyEcxHttpConfigErrorInterceptor } from './monkeyecx-http-config-error.interceptor';
+import { MonkeyEcxHttpConfigHeaderInterceptor } from './monkeyecx-http-config-header.interceptor';
+import { MonkeyEcxHttpConfigQueueInterceptor } from './monkeyecx-http-config-queue.interceptor';
+import { MonkeyEcxHttpConfigLoadingInProgressInterceptor } from './monkeyecx-http-config-loading-in-progress.interceptor';
+
+@NgModule({
+  imports: [CommonModule],
+})
+export class MonkeyEcxHttpConfigInterceptorModule {
+  public static forRoot(): ModuleWithProviders<MonkeyEcxHttpConfigInterceptorModule> {
+    return {
+      ngModule: MonkeyEcxHttpConfigInterceptorModule,
+      providers: [
+        {
+          provide: HTTP_INTERCEPTORS,
+          useClass: MonkeyEcxHttpConfigHeaderInterceptor,
+          multi: true,
+        },
+        {
+          provide: HTTP_INTERCEPTORS,
+          useClass: MonkeyEcxHttpConfigErrorInterceptor,
+          multi: true,
+        },
+        {
+          provide: HTTP_INTERCEPTORS,
+          useClass: MonkeyEcxHttpConfigQueueInterceptor,
+          multi: true,
+        },
+        {
+          provide: HTTP_INTERCEPTORS,
+          useClass: MonkeyEcxHttpConfigLoadingInProgressInterceptor,
+          multi: true,
+        },
+      ],
+    };
+  }
+}