@bizdoc/core 1.13.11 → 1.13.12

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

@@ -0,0 +1,188 @@
+import { Component, ViewChild, Inject, HostListener, Injector } from '@angular/core';
+import { MatSidenav } from '@angular/material/sidenav';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { filter } from 'rxjs';
+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 { 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);
+    creating: boolean;
+  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 },
+        policy: OpenPolicy.Clear
+      });
+  }
+  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.creating = true;
+    this._mailbox.create(this.forms[0].name).
+      subscribe(r => {
+        this.creating = false;
+        this._router.navigate(['mailbox/i', r.id.encodeId()],
+          {
+            policy: OpenPolicy.Clear,
+            state: { item: r }
+          });
+      }, () => {
+        this._snackBar.open(this._translate.get('Err'), null, { duration: 4000 });
+        this.creating = false;
+      });
+  }
+
+  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;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,81 @@
+<mat-toolbar color="primary" [class.loading]="loading">
+  <button mat-icon-button (click)='menuDrawer.toggle()' [bizdocTooltip]="'Menu' | translate" [attr.aria-label]="'Menu' | translate"><mat-icon>menu</mat-icon></button>
+  <div [routerLink]='["/dashboard"]' matRipple [matRippleUnbounded]="true" [matRippleRadius]="100" [matRippleCentered]="true" style="outline: none">
+    <img id="logo" src="logo.svg" alt="" />
+  </div>
+  <span class="divider"></span>
+  <button mat-icon-button (click)="notifs()" data-help="notifications" [attr.aria-label]="'Notifications' | translate" [bizdocTooltip]="'Notifications' | translate"><mat-icon [matBadge]="profile.notificationsCount" [matBadgeHidden]="!profile.notificationsCount" matBadgeColor="accent">notifications</mat-icon></button>
+  <button mat-icon-button *ngIf='chatEnabled' (click)="chat()" data-help="chat" [attr.aria-label]="'Chat' | translate" [bizdocTooltip]="'Chat' | translate"><mat-icon [matBadge]="profile.conversationsCount" [matBadgeHidden]="!profile.conversationsCount" matBadgeColor="accent">chat</mat-icon></button>
+</mat-toolbar>
+<mat-sidenav-container autosize>
+  <mat-sidenav #menuDrawer data-help="menu" mode="over" closed class="mat-elevation-z5">
+    <mat-nav-list>
+      <mat-list-item [routerLink]='["/dashboard"]' [attr.aria-label]="'Dashboard' | translate" routerLinkActive="active" data-help="dashboard">
+        <mat-icon matListIcon>apps</mat-icon><span>{{'Dashboard' | translate}}</span>
+      </mat-list-item>
+      <mat-expansion-panel class="mat-elevation-z0" [attr.aria-label]="'Mailbox' | translate" data-help="folders">
+        <mat-expansion-panel-header>
+          <mat-panel-title>
+            <mat-icon>inbox</mat-icon>
+            <span>{{'Mailbox' | translate}}</span>
+          </mat-panel-title>
+        </mat-expansion-panel-header>
+        <mat-list-item *ngFor="let f of profile.folders" [routerLink]='["/mailbox/f", f.name]' routerLinkActive="active" [attr.data-help]="'folder-'+f.name" [attr.aria-label]="f.title">
+          <mat-icon matListIcon>{{f.icon}}</mat-icon><span>{{f.title}}</span>
+        </mat-list-item>
+      </mat-expansion-panel>
+      <mat-list-item [routerLink]='["/schedule"]' routerLinkActive="active" *ngIf="schedulerEnabled" [attr.aria-label]="'Scheduler' | translate">
+        <mat-icon matListIcon class="mat-icon-rtl-mirror">date_range</mat-icon><span>{{ 'Schedule' | translate}}</span>
+      </mat-list-item>
+      <mat-divider></mat-divider>
+      <ng-container *ngIf="enableAnalysis">
+      <ng-container *ngFor="let c of profile.cubes">
+        <mat-expansion-panel class="mat-elevation-z0" *ngIf="c.views.length">
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              <mat-icon>{{ c.icon || 'insert_chart_outlined'}}</mat-icon>
+              <span>{{c.title}}</span>
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+          <mat-list-item *ngFor="let v of c.views" [routerLink]='["/cube", c.name, "v", v.name]' routerLinkActive="active" [attr.data-help]="'cube-view-'+v.name">
+            <mat-icon matListIcon>{{v.icon || 'insights'}}</mat-icon><span>{{v.title}}</span>
+          </mat-list-item>
+        </mat-expansion-panel>
+      </ng-container>
+      </ng-container>
+      <mat-expansion-panel *ngIf="profile.reports.length" class="mat-elevation-z0" [attr.aria-label]="'Reports' | translate">
+        <mat-expansion-panel-header>
+          <mat-panel-title>
+            <mat-icon>list_alt</mat-icon>
+            <span>{{'Reports' | translate}}</span>
+          </mat-panel-title>
+        </mat-expansion-panel-header>
+        <mat-list-item *ngFor="let r of profile.reports" [routerLink]='["/reports", r.name]' routerLinkActive="active"
+                       [attr.aria-label]="r.title" [attr.data-help]="'report-'+r.name">
+          <mat-icon matListIcon>{{r.icon}}</mat-icon><span>{{r.title}}</span>
+        </mat-list-item>
+      </mat-expansion-panel>
+      <mat-divider></mat-divider>
+      <mat-list-item role="listitem" data-help="options"
+                     (click)="options($event)">
+        <mat-icon matListIcon>settingson</mat-icon>
+        <span>{{'Settings' | translate}}</span>
+      </mat-list-item>
+      <mat-divider></mat-divider>
+      <mat-list-item role="listitem" (click)="signout($event)">
+        <mat-icon matListIcon>logout</mat-icon>
+        <span>{{'Power' | translate}}</span>
+      </mat-list-item>
+    </mat-nav-list>
+  </mat-sidenav>
+  <mat-sidenav #secondaryDrawer position="end" closed mode="over" autoFocus="false" class="mat-elevation-z3">
+    <ng-container [ngSwitch]="mode">
+    <bizdoc-chat [(contact)]="contact" *ngSwitchCase="'chat'"></bizdoc-chat>
+    <bizdoc-notifications-table *ngSwitchCase="'notifications'"></bizdoc-notifications-table>
+    </ng-container>
+  </mat-sidenav>
+  <mat-sidenav-content data-help="main">
+    <router-outlet></router-outlet>
+  </mat-sidenav-content>
+</mat-sidenav-container>
+<button mat-fab [attr.aria-label]="'Compose'| translate" [@fabFull]="composeState" *ngIf="composeEnabled" color="accent" (click)="compose()" data-help="compose"><mat-icon>add</mat-icon></button>

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

@@ -0,0 +1,49 @@
+$fab-padding: 30px;
+
+#logo {
+  padding-left: 12px;
+  padding-right: 12px;
+  vertical-align: middle;
+  width: 120px;
+  filter: invert(1);
+}
+
+:host ::ng-deep .mat-sidenav-container {
+  height: calc(100% - 58px);
+
+  .home-content {
+    padding: unset;
+  }
+}
+
+::ng-deep .mat-drawer-inner-container {
+  height: auto
+}
+
+router-outlet ~ * {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+}
+
+::ng-deep [dir=rtl] .mat-fab {
+  left: 30px;
+  right: unset
+}
+
+
+.mat-fab {
+  z-index: 1;
+  position: absolute;
+  bottom: $fab-padding;
+  right: $fab-padding;
+}
+
+
+:host ::ng-deep .mat-expansion-panel-header {
+  padding: 0 18px;
+}
+
+:host ::ng-deep .mat-expansion-panel-header .mat-expansion-panel-header-title .mat-icon {
+  padding: 0 3px;
+}

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

@@ -0,0 +1,105 @@
+import { Component, ViewChild, Inject, OnInit, Injector } from '@angular/core';
+import { RouterOutlet, NavigationStart, ActivationEnd, Router } from '@angular/router';
+import { MatSidenav } from '@angular/material/sidenav';
+import { MatBottomSheet } from '@angular/material/bottom-sheet';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { Directionality } from '@angular/cdk/bidi';
+import { first } from 'rxjs/operators';
+import { BizDocConfig, BIZDOC_CONFIG } from '../core/configuration';
+import { fabAnimation } from '../core/animations';
+import { Contact, RecipientModel } from '../core/models';
+import { SessionService } from '../core/session.service';
+import { HubService } from '../core/hub.service';
+import { TranslateService } from '../core/translate.service';
+import { FormSelectorSheet } from '../compose/form-selector/form-selector.sheet';
+import { Popup } from '../core/popup/popup.service';
+import { HomeBase } from './home-base.component';
+import { ChatInfo } from '../chat/chat-info';
+/** home comp */
+@Component({
+  selector: 'bizdoc-mobile-home',
+  templateUrl: './home.mobile.component.html',
+  styleUrls: ['./home.mobile.component.scss'],
+  animations: [fabAnimation]
+})
+export class HomeMobileComponent extends HomeBase implements OnInit {
+  mode: 'chat' | 'notifications';
+  composeState: 'working' | 'done';
+  contact: Contact;
+  composeEnabled: boolean;
+  @ViewChild(MatSidenav, { static: true }) menuDrawer: MatSidenav;
+  @ViewChild('secondaryDrawer', { static: true }) secondaryDrawer: MatSidenav;
+  constructor(
+    injector: Injector,
+    private _router: Router,
+    private _bs: MatBottomSheet,
+    private _dir: Directionality,
+    session: SessionService,
+    popup: Popup,
+    messaging: HubService,
+    translate: TranslateService,
+    snackBar: MatSnackBar,
+    chat: ChatInfo,
+    @Inject(BIZDOC_CONFIG) config: BizDocConfig) {
+    super(popup, session, messaging, translate, snackBar, injector, config);
+    _router.initialNavigation();
+    chat._open$.subscribe(e => {
+      this.mode = 'chat';
+      this.contact = this._session.profile.contacts.find(c => c.id == e);
+    });
+  }
+  ngOnInit() {
+    super.ngOnInit();
+    this._router.events.subscribe(e => {
+      // close menu when xs
+      if (e instanceof NavigationStart) {
+        this.menuDrawer.close();
+      }
+      // enable compose on mobile per route
+      else if (e instanceof ActivationEnd) {
+        if (e.snapshot.children.length === 0)
+          this.composeEnabled = (e as ActivationEnd).snapshot.data['compose'];
+      }
+    });
+  }
+  compose() {
+    this._bs.open(FormSelectorSheet, {
+      autoFocus: true,
+      direction: this._dir.value
+    }).instance.done.
+      pipe(first()).subscribe(() => {
+        this.composeState = 'working';
+        setTimeout(() => this.composeState = 'done', 500)
+      });
+  }
+  onNewMessage(model: RecipientModel<any>) {
+    this._router.navigate(['mailbox/i', model.id.encodeId()],
+      {
+        state: { item: model }
+      });
+  }
+  chat() {
+    this.mode = 'chat';
+    if (this.secondaryDrawer.opened) {
+      if (this.contact) this.contact = null;
+      else this.close();
+    }
+    else this.open();
+  }
+  private open() {
+    this.secondaryDrawer.open().then(this.resize);
+  }
+
+  private close() {
+    this.secondaryDrawer.close().then(this.resize);
+  }
+  getAnimation(outlet: RouterOutlet): string {
+    return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation'];
+  }
+
+  notifs() {
+    super.notifs();
+    this.mode = 'notifications';
+    this.secondaryDrawer.toggle().then(this.resize);
+  }
+}

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

@@ -0,0 +1,18 @@
+<mat-nav-list role="list">
+  <!--dense-->
+  <mat-list-item role="listitem" *ngFor="let n of notifications | sort: 'sent' : 'desc' | slice:0:9; let i=index" class="item" [class.read]="n.read" (click)="open(n, $event)">
+    <h3 *ngComponentOutlet="n.comp; injector: n.injector" matLine></h3>
+    <p matLine><span [bizdocTooltip]="n.sent | amCalendar">{{n.sent | amTimeAgo }}</span></p>
+    <button mat-icon-button [matMenuTriggerFor]="options" [matMenuTriggerData]="{muted: false}" class="tool"><mat-icon>more_vert</mat-icon></button>
+    <mat-menu #options>
+      <ng-template matMenuContent let-muted="muted">
+        <button mat-menu-item (click)="mute(n, true)">{{ (!(muted | async) ? 'Mute': 'Unmute') | translate}}</button>
+      </ng-template>
+    </mat-menu>
+  </mat-list-item>
+</mat-nav-list>
+<div class="tools row">
+  <a (click)="all()">{{'ShowAll'|translate}}</a>&nbsp;
+  <span class="divider"></span>
+  <a (click)='options()'>{{'Options'|translate}}</a>
+</div>

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

@@ -0,0 +1,36 @@
+:host {
+  /*width: 100%;*/
+  /*max-width: 350px*/
+  /*  display: flex;
+  -ms-flex-direction: column;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+*/
+}
+
+.item {
+  &.read {
+  }
+
+  .tool {
+    opacity: .1
+  }
+
+  &:hover .tool {
+    opacity: 1
+  }
+}
+
+/*mat-list-item button {
+  visibility: hidden;
+}
+
+mat-list-item:hover button {
+  visibility: visible
+}*/
+
+.tools {
+  font-variant-caps: all-small-caps;
+  font-size: medium;
+  padding: 8px
+}

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

@@ -0,0 +1,55 @@
+import { Component, Injector, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { Notification } from '../../core/models';
+import { NotificationExtra, NotificationsComponentBase } from "../../notifications/notifications.component-base";
+import { SessionService } from '../../core/session.service';
+import { NotificationsService } from '../../notifications/notifications.service';
+import { OptionsService } from "../../options/options.service";
+import { PopupRef } from "../../core/popup/popup-ref";
+import { PanesRouter } from '../../core/slots/router.service';
+
+@Component({
+  selector: 'bizdoc-notifications',
+  templateUrl: './notifications.component.html',
+  styleUrls: ['./notifications.component.scss']
+})
+/** notifications component*/
+export class QuickNotificationsComponent extends NotificationsComponentBase implements OnInit {
+  notifications: NotificationExtra[];
+  /** notifications ctor */
+  constructor(private _popupRef: PopupRef<QuickNotificationsComponent>,
+    private _router: PanesRouter,
+    private _service: NotificationsService, private _session: SessionService, injector: Injector,
+    private _options: OptionsService) {
+    super(injector);
+  }
+  ngOnInit(): void {
+    this.notifications = this._session.profile.notifications as NotificationExtra[];
+    this.notifications.forEach(n => {
+      n.comp = this._comp(n.type);
+      n.injector = this._getInjector(n);
+    });
+  }
+  open(item: Notification, evt: MouseEvent) {
+    if ((evt.srcElement as HTMLElement).tagName !== 'MAT-ICON') {
+      if (!item.read)
+        this._service.read(item.id, item.sent, true).subscribe(() => item.read = true);
+      this._popupRef.close();
+    }
+  }
+  options() {
+    this._popupRef.close();
+    this._options.open('notifications');
+  }
+  all() {
+    this._popupRef.close();
+    this._router.navigate(['notifications']);
+  }
+  isMuted(item: Notification): Observable<boolean> {
+    return this._service.get(item.id).pipe(map(i => i.mute));
+  }
+  mute(item: Notification, mute: boolean) {
+    this._service.mute(item.id, mute);
+  }
+}

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

@@ -0,0 +1,41 @@
+<div fxLayout="column">
+  <div class="profile-name">
+    <span class="mat-title">
+    <ng-container *ngIf="by">{{by}} \ </ng-container>
+    {{name}}</span>
+  </div>
+  <div fxLayoutAlign="center center" *ngIf="themes.length > 1">
+    <button *ngFor="let t of themes" (click)="changeTheme(t)" mat-icon-button class="theme" [style.background]="t.color" [class.active]="t.name === theme" [class.dark]="t.dark"></button>
+  </div>
+</div>
+<mat-nav-list role="list">
+  <mat-list-item role="listitem" *ngIf="!online" (click)="revive()">
+    <mat-icon [bizdocTooltip]="'Connect'|translate">wifi_off</mat-icon>
+  </mat-list-item>
+  <mat-list-item role="listitem" *ngIf="online" [matMenuTriggerFor]="availability">
+    {{'ShowAs' | translate : (available | translate | lowercase)}}
+  </mat-list-item>
+  <mat-menu #availability>
+    <button mat-menu-item *ngFor="let m of modes" (click)="setAvailable(m)">{{m | translate}}</button>
+  </mat-menu>
+  <mat-divider></mat-divider>
+  <mat-list-item role="listitem" (click)="options()">
+    {{'Options' | translate}}
+  </mat-list-item>
+  <mat-list-item role="listitem" [matMenuTriggerFor]="language">
+    {{'ChangeLanguage' | translate}}
+  </mat-list-item>
+  <mat-menu #language>
+    <button mat-menu-item *ngFor="let l of languages" (click)="changeLanguage(l)">{{l | translate}}</button>
+  </mat-menu>
+  <mat-divider></mat-divider>
+  <mat-list-item role="listitem" [matMenuTriggerFor]="help">
+    {{'Help' | translate}}
+    <span [matBadge]="guidesCount" matBadgeColor="accent" matBadgeOverlap="false" matBadgeSize="small"></span>
+  </mat-list-item>
+  <mat-menu #help>
+    <button mat-menu-item *ngFor="let g of guides" (click)="guide(g.name)">{{g.title}}</button>
+  </mat-menu>
+  <mat-divider></mat-divider>
+  <mat-list-item role="listitem" (click)="about()">{{ 'About' | translate}}</mat-list-item>
+</mat-nav-list>

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

@@ -0,0 +1,16 @@
+.profile-name {
+  margin: 8px;
+}
+
+.theme {
+  height: 22px;
+  width: 22px;
+  -moz-border-radius: 13px 13px;
+  -webkit-border-radius: 13px 13px;
+  border-radius: 13px 13px;
+  margin: 4px;
+
+  &.active.dark {
+    border: 2px solid #f4f4f4;
+  }
+}