@bizdoc/core 1.8.8 → 1.8.9

package/src/lib/home/_home-theme.scss

@@ -0,0 +1,155 @@
+@mixin home-theme($theme) {
+  $accent: map-get($theme, accent);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+  $is-dark-theme: map-get($theme, is-dark);
+
+  $menu-background: mat-color($mat-gray, 700);
+  $menu-color: white; //mat-color($foreground, text);
+  $sub-menu-background: if($is-dark-theme,mat-color($mat-gray, 800),mat-color($mat-gray, 100));
+  $sub-menu-color: if($is-dark-theme, mat-color($foreground, text), mat-color($mat-gray, 900));
+  $active-color: mat-color($accent);
+  $sub-menu-active-width: 12px;
+  $active-width: 6px;
+
+  .nav-menu {
+    background: $menu-background;
+    color: $menu-color;
+
+
+    .mat-list-item {
+      color: $menu-color;
+
+      .mat-icon {
+        color: $menu-color;
+      }
+
+      &.active:after {
+        content: '\00a0';
+        /*z-index: -1;*/
+        border-right: $sub-menu-active-width solid mat-color($background, background);
+        border-top: 28px solid transparent;
+        border-bottom: 28px solid transparent;
+        width: 0;
+        height: 0;
+        right: 0;
+        top: 0;
+        position: absolute;
+        box-sizing: border-box;
+      }
+    }
+  }
+
+  .nav-menu.nav-open .mat-list-item.active:after {
+    border-right-color: $sub-menu-background;
+  }
+
+  [dir=rtl] .nav-menu.nav-open .mat-list-item.active:after {
+    border-left-color: $sub-menu-background;
+  }
+
+  .sub-menu {
+    background: $sub-menu-background;
+    border-right: 2px solid lightgray;
+    color: $sub-menu-color;
+    /*height: inherit;*/
+
+
+    .mat-list-item {
+      color: $sub-menu-color !important;
+
+      &.active:after {
+        background: $active-color;
+        border: none;
+        width: $active-width;
+        height: 100%;
+      }
+
+      .mat-icon {
+        color: $sub-menu-color;
+      }
+    }
+  }
+
+
+  [dir=rtl]
+  .nav-menu {
+    .mat-list-item.active:after {
+      border-right: none;
+      border-left: $sub-menu-active-width solid mat-color($background, background);
+      right: auto;
+      left: 0;
+    }
+
+    .sub-menu {
+      border-left: 2px solid lightgray;
+      border-right: none;
+
+      .mat-list-item.active:after {
+        border: none;
+      }
+    }
+  }
+
+  .mat-toolbar.nav-toolbar {
+    border-radius: 4px 4px 0 0;
+    /*    -moz-animation: show-toolbar;
+    -o-animation: show-toolbar;
+    -webkit-animation: show-toolbar;
+    animation: show-toolbar;
+    -moz-animation-duration: .5s;
+    -o-animation-duration: .5s;
+    -webkit-animation-duration: .5s;
+    animation-duration: .5s;
+    -moz-animation-fill-mode: forwards;
+    -o-animation-fill-mode: forwards;
+    -webkit-animation-fill-mode: forwards;
+    animation-fill-mode: forwards;
+*/
+  }
+  /*  @keyframes show-toolbar {
+    from {
+      height: 0;
+    }
+
+    to {
+      height: 64px;
+    }
+  }
+*/
+
+  @include loading()
+}
+
+@mixin loading {
+  .loading {
+    background: linear-gradient(to left, rgb(0 0 0 / 42%) 71%, rgb(0 0 0 / 53%) 14%, rgb(0 0 0 / 57%) 53%);
+    -webkit-backface-visibility: hidden;
+    animation: loading 20s linear infinite;
+  }
+
+  [dir=rtl] .loading:before {
+    left: unset;
+    right: -200px;
+    -moz-animation-fill-mode: backwards;
+    -o-animation-fill-mode: backwards;
+    -webkit-animation-fill-mode: backwards;
+    animation-fill-mode: backwards;
+  }
+
+  @media(max-width: 599px) {
+    .loading:before {
+      height: 58px;
+    }
+  }
+
+  @keyframes loading {
+    0% {
+      background-position: 0px 0;
+    }
+
+    100% {
+      background-position: 100em 0;
+    }
+  }
+}

package/src/lib/home/about/about.dialog.html

@@ -0,0 +1,19 @@
+<h2 mat-dialog-title>BizDoc v{{version}}</h2>
+<mat-dialog-content>
+  <div *ngIf="license; else none">
+    <div [ngSwitch]="license.mode">
+      <div *ngSwitchCase="'Grace'"> {{"GraceLicense" | translate : moment(license.expiration).toNow() }}</div>
+      <div *ngSwitchCase="'Limited'">{{'LimitLicense'|translate}}</div>
+      <div *ngSwitchCase="'Expired'">{{"ExpiredLicense" | translate : (license.expiration | amTimeAgo)}}</div>
+    </div>
+    <div [innerHtml]='"LicencedTo" | translate : license.companyName'></div>
+  </div>
+  <br />
+  <span>&copy; Moding Ltd.</span>
+</mat-dialog-content>
+<mat-dialog-actions>
+  <button mat-button mat-dialog-close>{{'OK'|translate}}</button>
+</mat-dialog-actions>
+<ng-template #none>
+  <div>{{'EvaluationLicense' | translate}}</div>
+</ng-template>

package/src/lib/home/about/about.dialog.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+const moment = require('moment');
+import { License } from '../../core/models';
+import { SessionService } from '../../core/session.service';
+
+@Component({
+  selector: 'bizdoc-about',
+  templateUrl: './about.dialog.html'
+})
+/** about component*/
+export class AboutDialog {
+  readonly license: License = this._session.profile.license;
+  readonly moment = moment;
+  readonly version = 5.2;
+  /** about ctor */
+  constructor(private _session: SessionService) {
+  }
+}

package/src/lib/home/home-base.component.ts

@@ -0,0 +1,88 @@
+import { Directive, Inject, Injector, OnInit } from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { BizDocConfig, BIZDOC_CONFIG, ChatSettings } from '../core/configuration';
+import { Profile, RecipientModel } from '../core/models';
+import { SessionService } from '../core/session.service';
+import { Popup } from '../core/popup/popup.service';
+import { TranslateService } from '../core/translate.service';
+import { HubService } from '../core/hub.service';
+import { QuickSignComponent } from './sign/sign.component';
+import { QuickOptionsComponent } from './options/options.component';
+import { OutOfOfficeData, OutOfOfficeToast } from './outofoffice/outofoffice.component';
+import { HttpInterceptor, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { debounceTime } from 'rxjs';
+import { AppHttpInterceptor } from '../core/http.interceptor';
+
+export const TOAST_DURATION = 4000;
+
+@Directive()
+export abstract class HomeBase implements OnInit {
+  chatEnabled: boolean;
+  profile: Profile;
+  loading: boolean;
+  constructor(
+    protected _popup: Popup,
+    protected _session: SessionService,
+    private _messaging: HubService,
+    protected _translate: TranslateService,
+    protected _snackBar: MatSnackBar,
+    private _injector: Injector,
+    @Inject(BIZDOC_CONFIG) config: BizDocConfig) {
+
+    this.chatEnabled = config.chating !== false &&
+      (!config.chating || !(config.chating as ChatSettings).app);
+    this.profile = _session.profile;
+  }
+  ngOnInit() {
+    const interceptor = (this._injector.get(HTTP_INTERCEPTORS) as HttpInterceptor[]).find(i => i instanceof AppHttpInterceptor) as AppHttpInterceptor;
+    interceptor.active$.pipe(debounceTime(100)).subscribe(e =>
+      this.loading = e);
+    this._messaging.new$.subscribe(m => {
+      const { model: { formId: name, subject, number } } = m;
+      const form = this._session.profile.forms.find(f => f.name === name), msg = this._translate.get('NewMail', form.title, number, subject || '');
+      this._snackBar.open(msg, this._translate.get('OpenNew'), {
+        duration: 5000,
+        direction: this._session.direction,
+        politeness: 'assertive'
+      }).onAction().subscribe(() => {
+        this._session.profile.inboxCount--;
+        this.onNewMessage(m.model);
+      }
+      );
+    });
+    if (this._session.isImpersonating)
+      this._snackBar.open(this._translate.get('Impersonating', this._session.profile.name), null, {
+        duration: TOAST_DURATION,
+        verticalPosition: 'top',
+        direction: this._session.direction
+      });
+    else if (this._session.isOutOfOffice) {
+      const options = this._session.profile.options.outOfOffice;
+        this._snackBar.openFromComponent(OutOfOfficeToast, {
+          verticalPosition: 'top',
+          direction: this._session.direction,
+          data: {
+            substituteId: options.substitueId
+          } as OutOfOfficeData
+        });
+    }
+  }
+  resize() {
+    window.dispatchEvent(new Event('resize'));
+  }
+  abstract onNewMessage(model: RecipientModel);
+  /** options */
+  options(evt: Event) {
+    this._popup.open(QuickOptionsComponent, evt.srcElement as HTMLElement, { position: 'end' });
+  }
+  signout(evt: Event) {
+      this._popup.open(QuickSignComponent, evt.srcElement as HTMLElement, { position: 'end' });
+  }
+  mails() {
+    this._session.inboxTouch();
+  }
+  notifs() {
+    this._session.profile.notifications.length &&
+      this._session.notificationsTouch();
+  }
+}

package/src/lib/home/home.desktop.component.html

@@ -0,0 +1,87 @@
+<div [class.nav-collapsed]="collapsed" [class.nav-open]="submenu" class="nav-menu row">
+  <!--[class.loading]="loading"-->
+  <div fxLayout="column">
+    <div>
+      <div [class.active]="activeMenu === 'new'" class="new-container" *ngIf="forms.length">
+        <button mat-raised-button class="compose" [bizdocTooltip]="'Compose'|translate"
+                (click)="opennew()"
+                [attr.aria-label]="'Compose'| translate" color="primary" data-help="compose">
+          <mat-icon>add</mat-icon>
+          <span class="nav-label">{{'Compose'| translate}}</span>
+        </button>
+      </div>
+      <mat-nav-list>
+        <mat-list-item [attr.aria-label]="'Dashboard' | translate"
+                       (click)="nav('dashboard')" [class.active]="activeMenu === 'dashboard'"
+                       data-help="dashboard"
+                       [bizdocTooltip]="'Dashboard'|translate">
+          <mat-icon matListIcon>apps</mat-icon><span class="nav-label">{{'Dashboard' | translate}}</span>
+        </mat-list-item>
+        <mat-list-item (click)="mails()" [bizdocTooltip]="'Mailbox'|translate"
+                       [class.active]="activeMenu === 'mailbox'"
+                       [attr.aria-label]="'Mailbox' | translate" data-help="folders">
+          <mat-icon matListIcon [matBadge]="profile.inboxCount" [matBadgeHidden]="profile.inboxCount < 1" matBadgeColor="accent">inbox</mat-icon>
+          <span class="nav-label">{{'Mailbox' | translate}}</span>
+        </mat-list-item>
+        <mat-list-item [attr.aria-label]="'Scheduler' | translate"
+                       (click)="nav('schedule')" [class.active]="activeMenu === 'schedule'"
+                       [bizdocTooltip]="'Scheduler'|translate">
+          <mat-icon matListIcon class="mat-icon-rtl-mirror">date_range</mat-icon><span class="nav-label">{{ 'Scheduler' | translate}}</span>
+        </mat-list-item>
+        <mat-list-item *ngIf='chatEnabled' data-help="chat" [attr.aria-label]="'Chat' | translate"
+                       (click)="nav('contacts')" [class.active]="activeMenu === 'contacts'"
+                       [bizdocTooltip]="'Chat'|translate">
+          <mat-icon matListIcon [matBadge]="profile.conversationsCount" [matBadgeHidden]="!profile.conversationsCount" matBadgeColor="accent">chat</mat-icon><span class="nav-label">{{ 'Chat' | translate}}</span>
+        </mat-list-item>
+        <mat-divider></mat-divider>
+        <mat-list-item *ngIf="profile.cubes.length"
+                       (click)="opensubmenu('cube')"
+                       [class.active]="activeMenu === 'cube'"
+                       [bizdocTooltip]="'Cube'|translate" data-help="cube" [attr.aria-label]="'Cube' | translate">
+          <mat-icon matListIcon>equalizer</mat-icon><span class="nav-label">{{'Cube' | translate}}</span>
+        </mat-list-item>
+        <mat-list-item *ngIf="profile.reports.length"
+                       (click)="opensubmenu('reports')"
+                       [class.active]="activeMenu === 'reports'"
+                       [bizdocTooltip]="'Reports'|translate" data-help="reports" [attr.aria-label]="'Reports' | translate">
+          <mat-icon matListIcon>list_alt</mat-icon><span class="nav-label">{{'Reports' | translate}}</span>
+        </mat-list-item>
+        <ng-container *ngIf="sysAdmin">
+          <mat-divider></mat-divider>
+          <mat-list-item (click)="opensubmenu('admin')"
+                         [class.active]="activeMenu === 'admin'"
+                         [bizdocTooltip]="'System'|translate" [attr.aria-label]="'System' | translate">
+            <mat-icon matListIcon>device_hub</mat-icon>
+            <span class="nav-label">{{'Workflow' | translate}}</span>
+          </mat-list-item>
+        </ng-container>
+      </mat-nav-list>
+    </div>
+    <span class="divider"></span>
+    <!--<lottie name="lf30_editor_qr7zgmcs" *ngIf="loading"></lottie>-->
+    <!--@animate-->
+    <div class="sign-in">
+      <button mat-icon-button data-help="sign-in" [bizdocTooltip]="'Settings' | translate"
+              [attr.aria-label]="'Settings' | translate" (click)="options($event)">
+        <mat-icon matAnimate="rotate">settingson</mat-icon>
+      </button>
+      <span class="divider"></span>
+      <button mat-icon-button [attr.aria-label]="'Power' | translate" (click)="signout($event)" [bizdocTooltip]="'Exit'|translate">
+        <mat-icon class="mat-icon-rtl-mirror">logout</mat-icon>
+      </button>
+    </div>
+  </div>
+  <div *ngIf="submenu" class="sub-menu" (mouseleave)="collapsesubmenu()" [@submenu]="submenuMode" (@submenu.done)="resize()">
+    <div class="action" *ngIf="submenu !== 'new'">
+      <button mat-icon-button (click)="togglePinned()"><mat-icon class="mat-icon-rtl-mirror" [matTooltip]="(pinned?'Collapse':'Expand')|translate" [inline]="true">{{pinned ? 'keyboard_double_arrow_left' : 'keyboard_double_arrow_right'}}</mat-icon></button>
+    </div>
+    <ng-container [ngSwitch]="submenu">
+      <bizdoc-new-menu *ngSwitchCase="'new'" (change)="closesubmenu()"></bizdoc-new-menu>
+      <bizdoc-folders-menu *ngSwitchCase="'mailbox'" [collapsed]="submenuMode === 'shrink'" (change)="collapsesubmenu()"></bizdoc-folders-menu>
+      <bizdoc-admin-menu *ngSwitchCase="'admin'" [collapsed]="submenuMode === 'shrink'"></bizdoc-admin-menu>
+      <bizdoc-reports-menu *ngSwitchCase="'reports'" [collapsed]="submenuMode === 'shrink'" (change)="collapsesubmenu()"></bizdoc-reports-menu>
+      <bizdoc-cube-menu *ngSwitchCase="'cube'" [collapsed]="submenuMode === 'shrink'" (change)="collapsesubmenu()"></bizdoc-cube-menu>
+    </ng-container>
+  </div>
+</div>
+<bizdoc-panes></bizdoc-panes>

package/src/lib/home/home.desktop.component.scss

@@ -0,0 +1,66 @@
+:host {
+  display: flex;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+}
+
+
+.nav-menu {
+  height: 100%;
+  z-index: 1;
+
+  .sub-menu {
+    min-width: 200px;
+    display: block;
+    z-index: 1;
+    overflow-x: hidden;
+
+    .action {
+      display: flex;
+      -ms-flex-direction: row-reverse;
+      -webkit-flex-direction: row-reverse;
+      flex-direction: row-reverse;
+    }
+  }
+
+  .new-container {
+    margin: 8px 8px 0 8px;
+
+    button {
+      min-width: 35px;
+      padding: 0 10px;
+      height: 40px;
+    }
+  }
+
+  .nav-icon {
+    display: none;
+  }
+
+  &.nav-collapsed {
+    .nav-icon {
+      display: unset;
+    }
+
+    .nav-label {
+      display: none;
+    }
+
+    .sign-in {
+      -ms-flex-direction: column;
+      -webkit-flex-direction: column;
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+
+  .sign-in {
+    display: flex;
+    -ms-flex-direction: row;
+    -webkit-flex-direction: row;
+    flex-direction: row;
+    overflow: hidden;
+    margin-bottom: 5px;
+  }
+}

package/src/lib/home/home.desktop.component.ts

@@ -0,0 +1,181 @@
+import { Component, ViewChild, Inject, HostListener, Injector } from '@angular/core';
+import { filter } from 'rxjs';
+import { MatSidenav } from '@angular/material/sidenav';
+import { BizDocConfig, BIZDOC_CONFIG, OpenPolicy } from '../core/configuration';
+import { submenuAnimation } from '../core/animations';
+import { Form, RecipientModel } from '../core/models';
+import { SessionService } from '../core/session.service';
+import { PanesRouter } from '../core/slots/router.service';
+import { Popup } from '../core/popup/popup.service';
+import { TranslateService } from '../core/translate.service';
+import { HubService } from '../core/hub.service';
+import { HomeBase } from './home-base.component';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { NavigationPaneBase, NavigationStart } from '../core/slots/pane-ref';
+import { MailboxService } from '../core/mailbox.service';
+
+/** home comp */
+@Component({
+  selector: 'bizdoc-home',
+  templateUrl: './home.desktop.component.html',
+  styleUrls: ['./home.desktop.component.scss'],
+  animations: [submenuAnimation]
+})
+export class HomeComponent extends HomeBase {
+  readonly sysAdmin = this._session.isSystem;
+  private _submenuMode: 'full' | 'shrink' = localStorage.getItem('submenuMode') as any || 'full';
+  readonly forms = this._session.profile.forms.filter(f => f.creatable);
+  public get submenuMode(): 'full' | 'shrink' {
+    return this._submenuMode;
+  }
+  public set submenuMode(value: 'full' | 'shrink') {
+    this._submenuMode = value;
+    localStorage.setItem('submenuMode', value)
+  }
+  private _submenu: string = localStorage.getItem('submenu');
+  private _path: string;
+  get activeMenu() {
+    return this._submenu || this._path;
+  }
+  public get submenu(): string {
+    return this._submenu;
+  }
+  public set submenu(value: string) {
+    this._submenu = value;
+    if (value) localStorage.setItem('submenu', value);
+    else localStorage.removeItem('submenu');
+  }
+  private _is(name, val?: boolean) {
+    if (val === undefined)
+      return localStorage.getItem(name) === '1';
+    else
+      localStorage.setItem(name, val ? '1' : '0');
+  }
+  private _isOrDefault(name, $default) {
+    const val = localStorage.getItem(name);
+    return val ? val === '1' : $default;
+  }
+  private _collapsed = this._isOrDefault('collapsed', true);
+  public get collapsed() {
+    return this._collapsed;
+  }
+  public set collapsed(value) {
+    this._collapsed = value;
+    this._is('collapsed', this.collapsed);
+  }
+  private _pinned = this._isOrDefault('pinned', true);
+  public get pinned() {
+    return this._pinned;
+  }
+  public set pinned(value) {
+    this._pinned = value;
+    this._is('pinned', value)
+  }
+  @ViewChild(MatSidenav, { static: true }) drawer: MatSidenav;
+  constructor(
+    private _router: PanesRouter,
+    private _mailbox: MailboxService,
+    injector: Injector,
+    session: SessionService,
+    popup: Popup,
+    messaging: HubService,
+    translate: TranslateService,
+    snackBar: MatSnackBar,
+    @Inject(BIZDOC_CONFIG) config: BizDocConfig) {
+    super(popup, session, messaging, translate, snackBar, injector, config);
+    _router.events.pipe(filter(e => e instanceof NavigationStart && e.pane.path && e.pane.mode === 'pane')).
+      subscribe((e: NavigationPaneBase) =>
+        this._path = e.pane.path.split('/')[0]
+      );
+  }
+  nav(path) {
+    this._router.navigate([path]);
+    this.submenu = null;
+    this.collapsesubmenu();
+  }
+  onNewMessage(model: RecipientModel) {
+    this._router.navigate(['mailbox/i', model.id.encodeId()],
+      {
+        state: { item: model }
+      });
+  }
+  closesubmenu() {
+    this.submenu = null;
+  }
+  opennew() {
+    if (this.forms.length > 1) {
+      if (this.submenu === 'new')
+        this.closesubmenu();
+      else
+        this.opensubmenu('new');
+    }
+    else this._create();
+  }
+  private _create() {
+    this._mailbox.create(this.forms[0].name).
+      subscribe(r => {
+        this._router.navigate(['mailbox/i', r.id.encodeId()],
+          {
+            policy: OpenPolicy.Clear,
+            state: { item: r }
+          });
+      }, () => this._snackBar.open(this._translate.get('Err'), null, { duration: 4000 }));
+  }
+
+  opensubmenu(menu: string) {
+    if (this.submenu === menu)
+      this.submenuMode = this.submenuMode === 'full' ? 'shrink' : 'full';
+    else {
+      this.submenu = menu;
+      this.submenuMode = 'full';
+    }
+  }
+  collapsesubmenu() {
+    if (!this.pinned && this.submenu !== 'new') this.submenuMode = 'shrink';
+  }
+  togglePinned() {
+    this.pinned = !this.pinned;
+    this.submenuMode = this.pinned ? 'full' : 'shrink';
+  }
+  mails() {
+    super.mails();
+    this.opensubmenu('mailbox');
+  }
+  private _collapseToggle = false;
+  /**
+   * Alt + n/N, Ctrl + .
+   * @param event
+   */
+  @HostListener('document:keydown', ['$event'])
+  handleKeyboardEvent(event: KeyboardEvent) {
+    if (event.altKey && (event.which === 110 || event.which === 78)) {
+      if (this.submenu === 'new')
+        this.submenu = null;
+      else {
+        if (this.forms.length === 1)
+          this._create();
+        else {
+          this.submenu = 'new';
+          this.submenuMode = 'full';
+        }
+      }
+      event.preventDefault();
+    }
+    else if (event.ctrlKey && event.which === 190) {
+      if (this.submenu) {
+        this.submenuMode = this.submenuMode === 'shrink' ? 'full' : 'shrink';
+        this._collapseToggle = true;
+      }
+      else if (!this.collapsed)
+        this.collapsed = true;
+      else {
+        if (this._collapseToggle) {
+          this._collapseToggle = false;
+          this.submenuMode = null;
+        }
+        else
+          this.collapsed = false;
+      }
+    }
+  }
+}