@bizdoc/core 1.14.5 → 1.14.9

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,31 @@
+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?);
+}
+/** desktop */
+@Injectable()
+export class PaneRouter extends RouterImpl {
+  constructor(
+    private _router: PanesRouter
+  ) {
+    super();
+  }
+  navigate(commands: string[], extra?) {
+    this._router.navigate(commands, extra);
+  }
+}
+/** mobile */
+@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,265 @@
+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, map } from 'rxjs/operators';
+import { HubConnectionState } from '@microsoft/signalr';
+import { CookieService } from 'ngx-cookie-service';
+import dayjs from 'dayjs';
+import { BIZDOC_CONFIG, BizDocConfig, GoogleMapsSettings, Theme } from '../core/configuration';
+import { Profile, UserInfo, AvailabilityState, Options, Gender } 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', primary: 'purple', color: 'purple', accent: 'amber' },
+  { name: 'indigo', primary: 'indigo', color: '#3f51b5', accent: 'pink' },
+  { name: 'green', primary: 'green', color: '#4CAF50', accent: 'amber' },
+  { name: 'dark', primary: 'deepPurple', color: '#404041', accent: 'amber', dark: true },
+  { name: 'brown', primary: 'brown', color: '#795548', accent: 'grey' }];
+
+const SUPPORTED_LANGUAGES = ['en', 'he', 'de', 'ar', 'ru'],
+  RTL_LANGUALGES = ['he', 'ar'];
+
+export function SessionProviderFactory(provider: SessionService) {
+  return () => provider.prepare();
+}
+
+@Injectable({ providedIn: 'root' })
+export class SessionService {
+  prepare() {
+    const promisses = [];
+    if (this._config.maps)
+      promisses.push(this._googleMaps());
+    return Promise.all(promisses);
+  }
+  readonly Themes: Theme[] = this._config.themes || THEMES;
+  constructor(@Inject(BIZDOC_CONFIG) private _config: BizDocConfig,
+    private _http: HttpClient,
+    private _cookies: CookieService,
+    private _hub: HubService,
+  ) {
+    ('serviceWorker' in navigator) && this._loadSw();
+  }
+  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);
+  get profile(): Profile { return this._profile; }
+  get gender(): Gender { return this.profile.byId ? this._profile.byGender : this._profile.gender; }
+  get accentPalette(): string[] {
+    const palette = MATERIAL_PALETTES[this.theme.accent];
+    return this._constructpalette(palette);
+  }
+  private _constructpalette(palette: { [name: string]: string; }): string[] {
+    return [palette['100'], palette['300'], palette['500'], palette['700'], palette['900'],
+    palette['200'], palette['400'], palette['600'], palette['800'], palette['hex'],
+    palette['a100'], palette['a400'], palette['a200'], palette['a700']];
+  }
+
+  get primeryPalette(): string[] {
+    const palette = MATERIAL_PALETTES[this.theme.primary];
+    return this._constructpalette(palette);
+  }
+  getAccent(mode: MaterialMode = 500): string {
+    return MATERIAL_PALETTES[this.theme.accent][mode];
+  }
+  getPrimery(mode: MaterialMode = 500): string {
+    return MATERIAL_PALETTES[this.theme.primary][mode];
+  }
+  private _theme: Theme;
+  get theme(): Theme {
+    if (!this._theme) {
+      const name = localStorage.getItem('theme');
+      this._theme = name ? this.Themes.find(t => t.name === name) : this.Themes[0];
+    }
+    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 locale() {
+    return this.language.split('-')[0];
+  }
+  get language(): string {
+    if (!this._lang)
+      this._lang = this._cookies.get('lang') || this._getBrowserLang() || SUPPORTED_LANGUAGES[0];
+    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.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();
+  }
+  isInRole(role: string): Observable<boolean> {
+    return this._http.get(`/api/account/isInRole?role=${role}`, {
+      responseType: 'text' as const
+    }).pipe(map(r => r === 'true'));
+  }
+  /** */
+  get isOutOfOffice(): boolean {
+    const options = this.profile.options.outOfOffice;
+    if (options && options.active) {
+      const today = dayjs().startOf('day');
+      return (!options.from || dayjs(options.from).startOf('day') <= today)
+        && (!options.to || dayjs(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;
+      if (lang.length > 2) {
+        lang = lang.substring(0, 2).toLowerCase();
+        if (this.languages.indexOf(lang) > -1)
+          return lang;
+        lang = this.languages.find(l => l.startsWith(lang));
+        if (lang)
+          return lang;
+      }
+    }
+    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 === this.Themes[0].name) {
+      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 _googleMaps() {
+    const apiKey = (this._config.maps as GoogleMapsSettings).apiKey;
+    return new Promise((resolve, reject) => {
+      const script = document.createElement('script');
+      script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places&language=${this.language}`;
+      script.addEventListener('load', resolve, {});
+      document.head.append(script);
+    });
+  }
+}
+interface WatermarkInfo {
+  time: Date;
+}

package/src/lib/core/slots/_slots-theme.scss

@@ -0,0 +1,139 @@
+@mixin slots-theme($theme) {
+  $background: mat.get-color-from-palette($theme, background);
+  $foreground: mat.get-color-from-palette($theme, foreground);
+  $primary: mat.get-color-from-palette($theme, primary);
+  $accent: mat.get-color-from-palette($theme, accent);
+  $gray: mat.define-palette(mat.$gray-palette);
+  $is-dark-theme: mat.get-color-from-palette($theme, is-dark);
+
+  $separator-background: mat.get-color-from-palette($accent, dialog);
+  $active-background: mat.get-color-from-palette($background, dialog);
+
+  .panes {
+    .panes-title {
+      color: mat.get-color-from-palette($foreground, text);
+
+      .mat-icon {
+        /*font-size: 39px;*/
+        /*        width: auto;
+        margin: 0;
+        padding: 0;
+        height: auto;
+*/ /*vertical-align: text-bottom;*/
+      }
+
+/*      .tool {
+        opacity: .1
+      }
+
+      &:hover .tool {
+        opacity: 1
+      }
+*/    }
+
+    .backdrop {
+      position: absolute;
+      z-index: 200;
+      width: 100%;
+      height: 100%;
+      display: block;
+      background: mat.get-color-from-palette($gray, 800);
+      opacity: .8;
+    }
+  }
+
+  .pane {
+    height: 100%;
+    display: flex;
+    -ms-flex-direction: column;
+    -webkit-flex-direction: column;
+    flex-direction: column;
+    overflow-x: hidden;
+
+    .mat-toolbar > * {
+      opacity: .1;
+    }
+
+    &:hover, &.active {
+      .mat-toolbar > * {
+        opacity: 1;
+      }
+    }
+  }
+
+  .tabs {
+    color: mat.get-color-from-palette($foreground, text);
+    background: if($is-dark-theme, #212121, mat.get-color-from-palette($background, card));
+
+    .tabs-title {
+      height: 60px;
+      padding: 0 8px;
+    }
+
+    .mat-tab-link-container {
+      overflow-x: auto;
+      border-bottom: 1px solid lightgray;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      -ms-overflow-style: none; /* IE and Edge */
+      scrollbar-width: none; /* Firefox */
+    }
+
+    .tab {
+      &:hover {
+        .nav-toolbar {
+          opacity: 1;
+        }
+      }
+
+      &:not(:hover) {
+        .nav-toolbar {
+          opacity: .1;
+          background-color: transparent;
+        }
+      }
+
+      .pane {
+        -webkit-flex-grow: 1;
+        flex-grow: 1;
+      }
+    }
+  }
+
+
+  .pane-content {
+
+    &.active {
+      /*background-color: $active-background;*/
+      border-left-color: mat.get-color-from-palette($primary, 500);
+      box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
+    }
+
+    &:not(.active) {
+      .mat-toolbar {
+        background-color: transparent;
+      }
+    }
+  }
+
+  [dir=rtl] .pane-content {
+    border-left: none;
+    border-right-width: 1px;
+    border-right-style: double;
+    border-right-color: transparent;
+
+    &.active {
+      border-right-color: mat.get-color-from-palette($primary, 500);
+    }
+  }
+
+  [dir=rtl] .panes {
+    .scroll-arrow:last-child {
+      right: auto !important;
+      left: 0 !important
+    }
+  }
+}

package/src/lib/core/slots/extended-tab.component.exp.ts

@@ -0,0 +1,35 @@
+import { Component, Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+
+export interface NavigatingEvent {
+  component;
+}
+@Injectable()
+export 
+  class TabsService {
+readonly  _navigating = new Subject<NavigatingEvent>();
+  navigate(component) {
+    this._navigating.next({component})
+  }
+}
+
+
+export class TabRef<T = any> {
+  readonly _stateChange = new Subject<void>();
+  private _title: string;
+    public get title(): string {
+        return this._title;
+    }
+    public set title(value: string) {
+      this._title = value;
+      this._stateChange.next();
+    }
+
+}
+
+@Component({
+  selector: 'bizdoc-tabs',
+  templateUrl: 'extended-tab.component.html'})
+export class ExtendedTabComponent {
+  tabs: TabRef[];
+}

package/src/lib/core/slots/intro.pane.component.exp.ts

@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import { GuideService } from '../guide/guide.service';
+import { SessionService } from '../session.service';
+
+@Component({
+  selector: 'bizdoc-intro.pane',
+  templateUrl: './intro.pane.component.html',
+  styleUrls: ['./intro.pane.component.scss'],
+  host: {
+    class: 'pane'
+  },
+  animations: []
+})
+export class IntroSlotComponent {
+  constructor(private _session: SessionService,
+    private _guide: GuideService) {
+    this._session.profile.forms.filter(f => f.creatable).length;
+  }
+  dismiss() { }
+  intro() {
+    this._guide.start('intro');
+  }
+}

package/src/lib/core/slots/intro.pane.component.html

@@ -0,0 +1,22 @@
+<h2 class="mat-display-1">Get started!</h2>
+
+<h4>Things you can do:</h4>
+<ul>
+  <li>
+    <a slotRouterLink="new">new...</a>
+
+  </li>
+  <li>
+    <a slotRouterLink="mailbox">browse...</a>
+
+  </li>
+</ul>
+
+<p>
+  Take an
+  <a (click)='intro()'>introdoction</a> tour of your options with BizDoc.
+</p>
+
+<div style="-webkit-align-items: end; align-items: end; width: 100%">
+  <button mat-stroked-button (click)="dismiss()">{{'Dismiss' | translate}}</button>
+</div>

package/src/lib/core/slots/intro.pane.component.scss

@@ -0,0 +1,8 @@
+:host {
+  padding: 8px;
+  min-width: 200px;
+}
+
+p {
+  max-width: 300px;
+}