@bizdoc/core 1.8.5 → 1.8.9

package/src/lib/core/popup/popup.service.ts

@@ -0,0 +1,164 @@
+import { Directionality } from '@angular/cdk/bidi';
+import { ESCAPE } from '@angular/cdk/keycodes';
+import { ConnectedPosition, Overlay, OverlayRef } from '@angular/cdk/overlay';
+import { ComponentPortal, ComponentType } from '@angular/cdk/portal';
+import { ElementRef, Injectable, Injector, Input, TemplateRef } from '@angular/core';
+import { filter } from 'rxjs/operators';
+import { PopupData, PopupComponent, POPUP_DATA } from './popup.component';
+import { PopupRef } from './popup-ref';
+import { SessionService } from '../session.service';
+
+export const BELOW: ConnectedPosition[] = [{
+  originX: 'center',
+  originY: 'bottom',
+  overlayX: 'center',
+  overlayY: 'top',
+  panelClass: ['below', 'center']
+}, {
+  originX: 'start',
+  originY: 'bottom',
+  overlayX: 'start',
+  overlayY: 'top',
+  panelClass: ['below', 'start']
+}, {
+  originX: 'end',
+  originY: 'bottom',
+  overlayX: 'end',
+  overlayY: 'top',
+  panelClass: ['below', 'end']
+}],
+  ABOVE: ConnectedPosition[] = [
+    {
+      originX: 'center',
+      originY: 'top',
+      overlayX: 'center',
+      overlayY: 'bottom',
+      panelClass: ['above', 'center']
+    },
+    {
+      originX: 'start',
+      originY: 'top',
+      overlayX: 'end',
+      overlayY: 'bottom',
+      panelClass: ['above', 'end']
+    }, {
+      originX: 'start',
+      originY: 'top',
+      overlayX: 'start',
+      overlayY: 'bottom',
+      panelClass: ['above', 'start']
+    }],
+  AFTER: ConnectedPosition[] = [
+    {
+      originX: 'end',
+      originY: 'center',
+      overlayX: 'start',
+      overlayY: 'center',
+      panelClass: ['after', 'center']
+    }, {
+      originX: 'end',
+      originY: 'top',
+      overlayX: 'start',
+      overlayY: 'top',
+      panelClass: ['after', 'start']
+    },
+    {
+      originX: 'end',
+      originY: 'bottom',
+      overlayX: 'start',
+      overlayY: 'bottom',
+      panelClass: ['after', 'end']
+    }],
+  BEFORE: ConnectedPosition[] = [{
+    originX: 'start',
+    originY: 'center',
+    overlayX: 'end',
+    overlayY: 'center',
+    panelClass: ['before', 'center']
+  }, {
+    originX: 'start',
+    originY: 'center',
+    overlayX: 'end',
+    overlayY: 'bottom',
+    panelClass: ['before', 'end']
+  }, {
+    originX: 'start',
+    originY: 'top',
+    overlayX: 'end',
+    overlayY: 'top',
+    panelClass: ['before', 'start']
+  }];
+
+export type Position = 'above' | 'end' | 'start' | 'below';
+
+@Injectable({ providedIn: 'root' })
+export class Popup {
+  private _active: PopupRef[] = [];
+  constructor(private _overlay: Overlay,
+    private _session: SessionService,
+    private _injector: Injector) {
+  }
+  public open<T, V = any, D = any>(component: ComponentType<T> | TemplateRef<T>, element: HTMLElement | ElementRef, options?: {
+    position?: Position,
+    disposeOnBackdrop?: boolean;
+    data?: D,
+    duration?: number,
+    class?: string,
+    backdrop?: boolean,
+    injector?: Injector
+  }): PopupRef<T, V, D> {
+    while (this._active.length) {
+      this._active[0]._closed.next(null);
+      this._active.splice(0, 1);
+    }
+    let positions: ConnectedPosition[];
+    const { backdrop, position, disposeOnBackdrop, duration, data, injector, class: clazz } = options || {};
+    switch (position) {
+      case 'above':
+        positions = [...ABOVE, ...BELOW, ...AFTER, ...BEFORE];
+        break;
+      case 'end':
+        positions = [...AFTER, ...BEFORE, ...BELOW, ...ABOVE];
+        break;
+      case 'start':
+        positions = [...BEFORE, ...AFTER, ...BELOW, ...ABOVE];
+        break;
+      default:
+        positions = [...BELOW, ...BEFORE, ...ABOVE, ...AFTER];
+        break;
+    }
+    const positionStrategy = this._overlay.position().
+      flexibleConnectedTo(element).
+      withGrowAfterOpen(true).
+      withViewportMargin(5).
+      withPositions(positions);
+    const oRef = this._overlay.create({
+      positionStrategy,
+      backdropClass: 'cdk-overlay-transparent-backdrop',
+      hasBackdrop: backdrop !== false,
+      disposeOnNavigation: true,
+      direction: this._session.direction,
+      panelClass: ['popup-panel', clazz]
+    });
+    const pRef = new PopupRef<T, V, D>(data);
+    const popupInjector = Injector.create([{ provide: POPUP_DATA, useValue: { component, data } as PopupData },
+    { provide: OverlayRef, useValue: oRef },
+    { provide: PopupRef, useValue: pRef }], injector || this._injector);
+    const portal = new ComponentPortal(PopupComponent, null, popupInjector);
+    oRef.attach(portal);
+    oRef.keydownEvents().pipe(filter(k => k.keyCode === ESCAPE)).
+      subscribe(e => {
+        e.stopPropagation();
+        pRef._closed.next(null);
+      });
+    backdrop !== false && oRef.backdropClick().subscribe(() =>
+      disposeOnBackdrop !== false && pRef._closed.next(null)
+    );
+    pRef._closed.subscribe(() =>
+      oRef.detach()
+    );
+    this._active.push(pRef);
+    duration && setTimeout(() => pRef._closed.next(null), duration);
+    return pRef;
+  }
+}

package/src/lib/core/popup/tooltip.directive.ts

@@ -0,0 +1,47 @@
+import { Component, Directive, ElementRef, Inject, Input, OnInit, TemplateRef } from '@angular/core';
+import { PopupRef } from './popup-ref';
+import { POPUP_DATA } from './popup.component';
+import { Popup, Position } from './popup.service';
+
+@Component({ template: '' })
+export class TooltipComponent {
+  constructor(
+    @Inject(POPUP_DATA) private _data: string,
+    private _element: ElementRef<HTMLElement>
+  ) {
+    _element.nativeElement.innerHTML = _data;
+  }
+}
+@Directive({ selector: '[bizdocTooltip]' }) export
+  class TooltipDirective implements OnInit {
+  @Input('bizdocTooltip') content: string;
+  @Input('bizdocTooltipTemplate') template: TemplateRef<any>;
+  @Input('bizdocTooltipContext') context: any;
+  @Input('bizdocTooltipPosition') position: Position = 'end';
+  @Input('bizdocTooltipDuration') duration: number = 2000;
+  @Input('bizdocTooltipDisabled') disabled = false;
+  private _ref: PopupRef;
+  constructor(
+    private _element: ElementRef<HTMLElement>,
+    private _popup: Popup,
+  ) {
+
+  }
+  ngOnInit(): void {
+    this._element.nativeElement.addEventListener('mouseenter', this._enter.bind(this))
+    this._element.nativeElement.addEventListener('click', this._click.bind(this))
+  }
+  private _enter() {
+    if(!this.disabled) this._ref = this._popup.open(this.template || TooltipComponent, this._element, {
+      class: 'tooltip-panel',
+      position: this.position,
+      backdrop: false,
+      duration: this.duration,
+      data: this.context || this.content
+    });
+
+  }
+  private _click() {
+    this._ref && this._ref.close();
+  }
+}

package/src/lib/core/prompt/ask/ask.dialog.html

@@ -0,0 +1,6 @@
+<h2 mat-dialog-title>{{title}}</h2>
+<mat-dialog-content class="mat-body">{{content}}</mat-dialog-content>
+<mat-dialog-actions>
+  <button mat-button [mat-dialog-close]="true" [color]="color">{{ok}}</button>
+  <button mat-button mat-dialog-close>{{cancel}}</button>
+</mat-dialog-actions>

package/src/lib/core/prompt/ask/ask.dialog.ts

@@ -0,0 +1,35 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { TranslateService } from '../../translate.service';
+import { ThemePalette } from '@angular/material/core';
+
+@Component({
+  selector: 'bizdoc-ask',
+  templateUrl: './ask.dialog.html'
+})
+/** ask component*/
+export class AskDialog {
+  ok: string;
+  cancel: string;
+  title: string;
+  content: string;
+  color: ThemePalette;
+  /** ask ctor */
+  constructor(@Inject(MAT_DIALOG_DATA) data: AskDialogData, translate: TranslateService) {
+    Object.assign(this, {
+      content: data.i18n ? translate.get(data.content) : data.content,
+      title: data.title ? data.i18n ? translate.get(data.title) : data.title : null,
+      cancel: data.cancel ? data.i18n ? translate.get(data.cancel) : data.cancel : translate.get('Cancel'),
+      ok: data.ok ? data.i18n ? translate.get(data.ok) : data.ok : translate.get('OK'),
+      color: data.color || 'primary'
+    });
+  }
+}
+export interface AskDialogData {
+  ok?: string;
+  cancel?: string;
+  title?: string;
+  content: string;
+  color?: ThemePalette;
+  i18n?: boolean;
+}

package/src/lib/core/prompt/mask/mask.component.html

@@ -0,0 +1 @@
+<h1 class="mat-display-2">{{resource|translate}}</h1>

package/src/lib/core/prompt/mask/mask.component.scss

@@ -0,0 +1,14 @@
+:host {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: white;
+  padding: 2em;
+  opacity: .8;
+  display: flex;
+  flex-direction: row;
+  place-content: center center;
+  align-items: center;
+}

package/src/lib/core/prompt/mask/mask.component.ts

@@ -0,0 +1,15 @@
+import { Component, InjectionToken, Inject } from '@angular/core';
+export const MASK_DATA = new InjectionToken<string>('MASK_DATA');
+
+@Component({
+    selector: 'bizdoc-mask',
+  templateUrl: './mask.component.html',
+  styleUrls: ['./mask.component.scss']
+})
+/** component*/
+export class MaskComponent {
+/** ctor */
+  constructor(@Inject(MASK_DATA) public resource: string) {
+
+    }
+}

package/src/lib/core/prompt.service.ts

@@ -0,0 +1,81 @@
+import { Injectable, Injector } from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatDialog } from '@angular/material/dialog';
+import { Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { Subject, Observable } from 'rxjs';
+import { SessionService } from './session.service';
+import { TranslateService } from './translate.service';
+import { AskDialogData, AskDialog } from './prompt/ask/ask.dialog';
+import { MASK_DATA, MaskComponent } from './prompt/mask/mask.component';
+
+@Injectable({ providedIn: 'root' })
+export class PromptService {
+  private readonly _toasts = new Subject<string>();
+  constructor(private _dialog: MatDialog,
+    private _snackbar: MatSnackBar,
+    private _injector: Injector,
+    private _overlay: Overlay,
+    private _translate: TranslateService,
+    private _session: SessionService) {
+    this._toasts.pipe(
+      //concatMap(item => of(item).pipe(delay(2000)))
+    ).subscribe(t => {
+      this._snackbar.open(t, null, {
+        duration: 4000,
+        direction: this._session.direction,
+      });
+    });
+  }
+  toast(content: string, ...args: (string | number)[]) {
+    this._toasts.next(this._translate.get(content, ...args));
+  }
+  toastString(content: string) {
+    this._toasts.next(content);
+  }
+  /**
+   * 
+   * @param content resource
+   * @param args
+   */
+  error(content?: string, ...args: (string | number)[]) {
+    this.errorString(this._translate.get(content || 'Err', ...args));
+  }
+  errorString(content: string) {
+    this._snackbar.open(content, null, {
+      duration: 4000,
+      direction: this._session.direction,
+      politeness: 'off'
+    });
+  }
+  ask(content: string, title?: string, options?: {
+    ok?: string; cancel?: string; color?: 'warn' | 'primary'; i18n?: boolean;
+  }): Observable<any> {
+    const config: AskDialogData = {
+      ...{ content, title, i18n: options && options.i18n !== undefined ? options.i18n : true }, ...options
+    };
+    return this._dialog.open(AskDialog, {
+      direction: this._session.direction,
+      data: config
+    }).afterClosed();
+  }
+  public mask(resource: string): OverlayRef {
+    const position = this._overlay.position().global().centerHorizontally().centerVertically();
+    const config = new OverlayConfig({
+      positionStrategy: position,
+      hasBackdrop: true,
+      direction: this._session.direction
+      //backdropClass: 'cdk-overlay-50-backdrop'
+    });
+
+    const oRef = this._overlay.create(config);
+    const injector = Injector.create([
+      { provide: OverlayRef, useValue: oRef},
+      { provide: MASK_DATA, useValue: resource}
+    ], this._injector);
+    const portal = new ComponentPortal(MaskComponent, null, injector);
+    oRef.attach(portal);
+    oRef.backdropClick().subscribe(() => oRef.dispose());
+    return oRef;
+  }
+}

package/src/lib/core/router.ts

@@ -0,0 +1,29 @@
+import { Injectable } from "@angular/core";
+import { Router } from "@angular/router";
+import { PanesRouter } from "./slots/router.service";
+
+export abstract class RouterImpl {
+  abstract navigate(commands: (string|number)[], extra?);
+}
+@Injectable()
+export class PaneRouter extends RouterImpl {
+  constructor(
+    private _router: PanesRouter
+  ) {
+    super();
+  }
+  navigate(commands: string[], extra?) {
+    this._router.navigate(commands, extra);
+  }
+}
+@Injectable()
+export class NgRouter extends RouterImpl {
+  constructor(
+    private _router: Router
+  ) {
+      super();
+  }
+  navigate(commands: string[], extra?) {
+    this._router.navigate(commands, extra);
+  }
+}

package/src/lib/core/session.service.ts

@@ -0,0 +1,247 @@
+import { Injectable, Inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Direction } from '@angular/cdk/bidi';
+import { Subject, fromEvent, Observable, of } from 'rxjs';
+import { tap } from 'rxjs/operators';
+import { HubConnectionState } from '@microsoft/signalr';
+import { CookieService } from 'ngx-cookie-service';
+const moment = require('moment');
+import { BIZDOC_CONFIG, BizDocConfig, GoogleMapsSettings } from '../core/configuration';
+import { Profile, UserInfo, AvailabilityState, Options } from './models';
+import { FirebaseService, FirebaseState } from './firebase.service';
+import { HubService } from './hub.service';
+import { MATERIAL_PALETTES } from './colors';
+import { MaterialMode } from './functions';
+
+const THEMES: Theme[] = [
+  { name: 'default', primery: 'purple', color: 'purple', accent: 'amber' },
+  { name: 'indigo', primery: 'indigo', color: '#3f51b5', accent: 'pink' },
+  { name: 'green', primery: 'green', color: '#4CAF50', accent: 'amber' },
+  { name: 'dark', primery: 'deepPurple', color: '#404041', accent: 'amber', dark: true },
+  { name: 'brown', primery: 'brown', color: '#795548', accent: 'grey' }], DEFAULT_THEME = 'default';
+
+const SUPPORTED_LANGUAGES = ['en-US', 'he-IL', 'de-DE'], RTL_LANGUALGES = ['he-IL'];
+
+
+@Injectable({ providedIn: 'root' })
+export class SessionService {
+  static readonly Themes: Theme[] = THEMES;
+  private readonly _loaded = new Subject<void>();
+  private readonly _themeChange = new Subject<Theme>();
+  readonly loaded = this._loaded.asObservable();
+  readonly themeChange = this._themeChange.asObservable();
+  private _profile: Profile;
+  private _lang: string;
+  private _firebase = new FirebaseService(this._config ? this._config.firebase : null, this);
+  constructor(@Inject(BIZDOC_CONFIG) private _config: BizDocConfig,
+    private _http: HttpClient,
+    private _cookies: CookieService,
+    private _hub: HubService,
+  ) {
+    ('serviceWorker' in navigator) && this._loadSw();
+    _config && _config.maps && this._loadMaps();
+  }
+  get profile(): Profile { return this._profile; }
+  get accentPalette(): string[] {
+    return Object.values(MATERIAL_PALETTES[this.theme.accent]).
+      slice(1);
+  }
+  get primeryPalette(): string[] {
+    return Object.values(MATERIAL_PALETTES[this.theme.primery]).
+      slice(1);
+  }
+  getAccent(mode: MaterialMode = 500): string {
+    return MATERIAL_PALETTES[this.theme.accent][mode];
+  }
+  getPrimery(mode: MaterialMode = 500): string {
+    return MATERIAL_PALETTES[this.theme.primery][mode];
+  }
+  private _theme: Theme;
+  get theme(): Theme {
+    if (!this._theme) {
+      const name = localStorage.getItem('theme') || DEFAULT_THEME;
+      this._theme = THEMES.find(t => t.name === name);
+    }
+    return this._theme;
+  }
+  set theme(value: Theme) {
+    this._theme = value;
+    this._changeTheme(value).subscribe(() =>
+      this._themeChange.next(value));
+    localStorage.setItem('theme', value.name);
+  }
+  get ok(): boolean { return this.profile !== undefined; }
+  /** language direction */
+  get direction(): Direction {
+    return RTL_LANGUALGES.indexOf(this.language) > -1 ? 'rtl' : 'ltr';
+  }
+  get inverse() {
+    return this.direction === 'rtl';
+  }
+  get userId(): string {
+    return this._profile.byId || this.profile.userId;
+  }
+  get language(): string {
+    if (!this._lang) {
+      this._lang = this._cookies.get('lang');
+      if (!this._lang) {
+        this._lang = this._getBrowserLang() || 'en-US';
+      }
+    }
+    return this._lang;
+  }
+  get aria() { return localStorage.getItem('aria') === '1' }
+  set aria(val: boolean) { localStorage.setItem('aria', val ? '1' : '0') }
+  set language(code: string) {
+    this._cookies.set('lang', code, 365, '/');
+  }
+  get languages(): string[] { return this._config && this._config.languages ? this._config.languages : SUPPORTED_LANGUAGES; }
+  get isImpersonating(): boolean { return this.profile.byId !== undefined; }
+  /** system admin */
+  get isSystem(): boolean {
+    return this.profile.system;
+  }
+  /** online or set in profile */
+  get state(): AvailabilityState {
+    return this.profile.available || 'Online';
+  }
+  set state(value: AvailabilityState) {
+    this.profile.available = value === 'Online' ? null : value;
+    this._http.put(`/api/account/available?mode=${this.profile.available || ''}`, {}).subscribe();
+  }
+  /** */
+  get isOutOfOffice(): boolean {
+    const options = this.profile.options.outOfOffice;
+    if (options && options.active) {
+      const today = moment().startOf('day');
+      return (!options.from || moment(options.from).startOf('day') <= today)
+        && (!options.to || moment(options.to).startOf('day') >= today);
+    }
+    else return false;
+  }
+  /** update profile  */
+  update(profile: Options): Observable<any> {
+    return this._http.put('/api/account/update', profile).pipe(tap(() =>
+      Object.assign(this._profile.options, profile)));
+  }
+  /** mark guide as visited in profile */
+  guide(name: string): Observable<any> {
+    return this._http.put(`/api/account/guide/${name}`, {}, { headers: { 'no-progress': 'true' } }).pipe(
+      tap(() => {
+        const guide = this._profile.guides.find(g => g.name === name);
+        if (guide) guide.mode = undefined;
+        this._profile.options.guides.push(name);
+      }));
+  }
+  /** get profile */
+  refresh(): Observable<any> {
+    return new Observable<any>(observe => {
+      this._http.get<Profile>('/api/account/refresh').subscribe(r => {
+        if (!this._profile)
+          this._changeTheme(this.theme).subscribe(() => {
+            this._profile = r;
+            observe.next();
+            this._loaded.next();
+          });
+        else {
+          this._profile = r;
+          observe.next();
+          this._loaded.next();
+        }
+        this._hub.state !== HubConnectionState.Connected && this._hub.start();
+        this._firebase.state !== FirebaseState.Activated &&
+          this._firebase.activate();
+      }, () => observe.error());
+    });
+  }
+  public unregisterDevice(type: string, token: string): Observable<any> {
+    return this._http.post('/api/account/unregisterDevice', { type, token });
+  }
+  public registerDevice(type: string, token: string): Observable<any> {
+    return this._http.post('/api/account/registerDevice', { type, token });
+  }
+
+  public mayImpersonate(search: string): Observable<UserInfo[]> {
+    return this._http.put<UserInfo[]>('/api/account/granted', {
+      search
+    });
+  }
+  public impersonate(userId: string): Observable<any> {
+    return this._http.post<Profile>('/api/account/impersonate', {
+      userId
+    });
+  }
+  public inboxTouch() {
+    return this._http.put<WatermarkInfo>('/api/account/inboxview', {}, { headers: { 'no-progress': 'true' } }).pipe(
+      tap(e => {
+        this.profile.inboxCount = 0;
+        this.profile.options.inboxView = e.time;
+      })).toPromise();
+  }
+  public notificationsTouch() {
+    return this._http.put<WatermarkInfo>('/api/account/notificationsView', {}, { headers: { 'no-progress': 'true' } }).pipe(tap(e => {
+      this.profile.notificationsCount = 0;
+      this.profile.options.notificationsView = e.time;
+    })).toPromise();
+  }
+  private _getBrowserLang(): string {
+    let lang = navigator.language;
+    if (this.languages.indexOf(lang) > -1)
+      return lang;
+    for (let i = 0; i < navigator.languages.length; i++) {
+      lang = navigator.languages[i];
+      if (this.languages.indexOf(lang) > -1)
+        return lang;
+    }
+    for (let i = 0; i < navigator.languages.length; i++) {
+      const culture = navigator.languages[i].substring(0, 2).toLowerCase();
+      const language = this.languages.find(l => l.startsWith(culture));
+      if (language)
+        return language;
+    }
+    return null;
+  }
+  /**
+   * 
+   * @param theme
+   */
+  private _changeTheme(theme: Theme): Observable<any> {
+    let style = document.getElementById('bizdoc-theme') as HTMLLinkElement;
+    if (style)
+      document.body.removeChild(style);
+
+    if (theme.name === DEFAULT_THEME) {
+      return of(theme);
+    }
+    style = document.createElement('link');
+    style.id = 'bizdoc-theme';
+    style.type = 'text/css';
+    style.rel = 'stylesheet';
+    style.href = `/assets/themes/${theme.name}.min.css`;
+    document.body.append(style);
+
+    return fromEvent(style, 'load');
+  }
+  private _loadSw() {
+    window.addEventListener('load', function () {
+      navigator.serviceWorker.register('/js/app-sw.js').then(function () {
+      }, null);
+    });
+  }
+  private _loadMaps() {
+    const apiKey = (this._config.maps as GoogleMapsSettings).apiKey;
+    const script = document.createElement('script');
+    script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places&language=${this.language}`;
+    document.head.append(script);
+  }
+}
+interface WatermarkInfo {
+  time: Date;
+}
+export interface Theme {
+  name: string;
+  primery: string;
+  accent: string;
+  color: string;
+  dark?: boolean
+}