@bizdoc/core 1.8.5 → 1.8.9

package/src/lib/browse/browse.pane.component.ts

@@ -0,0 +1,133 @@
+import { Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { Subject } from 'rxjs';
+import { debounceTime, filter, takeUntil } from 'rxjs/operators';
+import { Directionality } from '@angular/cdk/bidi';
+import { Folder, RecipientModel } from '../core/models';
+import { PanesRouter } from '../core/slots/router.service';
+import { FilterType } from '../core/mailbox.service';
+import { ActionDialog, ActionDialogData } from '../compose/action/action.dialog';
+import { BrowseFilterArgs, BrowseFilterComponent } from './filter/filter.component';
+import { NavigationSelected, NavigationPaneBase, NavigationStart, ParamNavigation, PaneRef } from '../core/slots/pane-ref';
+import { BrowseItemsComponent } from './browse-items.component';
+import { Popup } from '../core/popup/popup.service';
+import { ComposePaneComponent } from '../compose/compose.pane.component';
+import { SessionService } from '../core/session.service';
+import { FormControl } from '@angular/forms';
+import { searchAnimation } from '../core/animations';
+
+@Component({
+  selector: 'bizdoc-browse.pane',
+  templateUrl: './browse.pane.component.html',
+  styleUrls: ['./browse.pane.component.scss'],
+  animations: [searchAnimation],
+  host: {
+    class: 'pane'
+  }
+})
+/** browse component*/
+export class BrowsePaneComponent implements OnInit {
+  @ViewChild(BrowseItemsComponent, { static: true }) items: BrowseItemsComponent;
+  @ViewChild('searchInput', { read: ElementRef }) search: ElementRef;
+  folderId: string;
+  filterType: FilterType;
+  filters: BrowseFilterArgs;
+  searching = false;
+  readonly contains = new FormControl();
+  private readonly _destroy = new Subject<void>();
+  /** browse ctor */
+  constructor(
+    private _pane: PaneRef<BrowsePaneComponent>,
+    private _session: SessionService,
+    private _popup: Popup,
+    private _router: PanesRouter,
+    private _directionality: Directionality,
+    private _dialog: MatDialog) {
+  }
+  ngOnInit(): void {
+    this._pane.paramsChange.subscribe(p => {
+      this.folderId = p['id'];
+      this._pane.title = this.folderId ? this.folder.title : null;
+    });
+    this._pane.queryParamsChange.subscribe(p => {
+      this.filterType = p['type'];
+      this.filters = p;
+    });
+    const events = this._router.events.pipe(takeUntil(this._destroy));
+    events.pipe(filter(e => (e instanceof ParamNavigation || e instanceof NavigationStart || e instanceof NavigationSelected)
+      && e.pane.component === ComposePaneComponent)).
+      subscribe((e: NavigationPaneBase) =>
+        this.items.select(e.pane.data.item.id)
+    );
+    this.contains.valueChanges.pipe(takeUntil(this._destroy), debounceTime(200)).subscribe(v => this.filters = { ...this.filters, contains: v });
+  }
+  get folder(): Folder { return this._session.profile.folders.find(f => f.name === this.folderId); }
+
+  openFilter(evt: Event) {
+    //this.filterElement.nativeElement.scrollIntoView({ behavior: 'smooth' });
+    this._popup.open(BrowseFilterComponent, evt.srcElement as HTMLElement, { position: 'end' }).
+      opened.subscribe(e => {
+        e.folderId = this.folderId;
+        e.values = this.filters;
+        e.exclude = ['contains'];
+        e.valuesChange.pipe(takeUntil(this._destroy)).subscribe(v => this.filters = v);
+      });
+  }
+  /**
+ * Ctrl-f
+ * @param event
+ */
+  @HostListener('document:keydown', ['$event'])
+  handleKeydown(event: KeyboardEvent) {
+    if (event.ctrlKey && (event.which === 70 || event.which === 102)) {
+      this.search.nativeElement.focus();
+      event.preventDefault();
+    }
+  }
+  openSearch() {
+    this.searching = !this.searching;
+    this.searching &&
+      this.search.nativeElement.focus();
+  }
+  clearSearch(evt?: Event) {
+    this.contains.setValue(null);
+    if (evt) {
+      evt.stopPropagation();
+      this.searching = false;
+    }
+  }
+  open(item: RecipientModel<any>) {
+    this._router.navigate(['mailbox/i', item.id.encodeId()],
+      {
+        state: {
+          item: { ...item }
+        },
+      });
+  }
+  view(item: RecipientModel<any>) {
+    this._router.navigate(['mailbox/i', item.id.encodeId(), 'views'],
+      {
+        state: {
+          item: { ...item }
+        }
+      })
+  }
+  sendAll(action: string) {
+    const { selected } = this.items.selection;
+    const data: ActionDialogData = {
+      action,
+      items: selected as RecipientModel[]
+    };
+    this._dialog.open(ActionDialog, {
+      data,
+      direction: this._directionality.value,
+      restoreFocus: false
+    }).afterClosed().subscribe(args =>
+      args &&
+      this.items.sendAll(action, args));
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}

package/src/lib/browse/expanded-item/expanded-item.component.html

@@ -0,0 +1,37 @@
+<div class="summary" *ngIf="item.summary" [innerHTML]="item.summary">
+</div>
+<div>
+  <bizdoc-attachments [model]="item"></bizdoc-attachments>
+  <bizdoc-events [model]="item"></bizdoc-events>
+</div>
+<div class="row">
+  <span class="note" [innerHTML]="note | sanitizeHtml" (click)="chat($event)"></span>
+  <span class="divider"></span>
+  <ng-container *ngFor="let a of actions">
+    <button mat-icon-button (click)="send(a.name)" [matTooltip]="a.title" *ngIf="a.icon" class="tool">
+      <mat-icon>{{a.icon}}</mat-icon>
+    </button>
+  </ng-container>
+</div>
+<div class="row">
+  <div class="mat-small" fxLayout="row">
+    <span>{{item.stateId | state }}</span>
+    &nbsp;
+    <span class="time" matTooltip="{{item.received | amCalendar}}">{{item.received | amTimeAgo}}</span>
+    &nbsp;
+    <span [innerHTML]="who | sanitizeHtml" (click)="chat($event)" class="who"></span>
+  </div>
+  <span class="divider"></span>
+  <div fxLayoutAlign="center center">
+    <span class="mat-small" *ngIf="typing">{{'SomeoneTyping'|translate}}</span>
+    <div *ngIf="item.comments.length" class="mat-small">
+      <span *ngIf="!newComments; else newcomments">{{item.comments.length > 1 ? ('CommentsCount' | translate : item.comments.length) : 'OneComment' | translate }}</span>
+    </div>
+  </div>
+  <div *ngIf="item.tags">
+    <span *ngFor="let tag of item.tags" class="mat-chip mat-standard-chip small-chip">{{tag}}</span>
+  </div>
+</div>
+<ng-template #newcomments>
+  <span [innerHTML]="'NewCommentsCount' | translate : item.comments.length : newComments | sanitizeHtml"></span>
+</ng-template>

package/src/lib/browse/expanded-item/expanded-item.component.scss

@@ -0,0 +1,35 @@
+:host {
+  display: flex;
+  -ms-flex-direction: column;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+  overflow: hidden;
+  padding-right: 24px;
+  padding-left: 24px;
+  text-align: start;
+}
+
+.row {
+  align-items: center;
+  min-height: 27px;
+  flex-direction: row;
+  box-sizing: border-box;
+  display: flex;
+}
+
+::ng-deep .summary {
+  em {
+    /*font-weight: 500;*/
+  }
+}
+
+.note {
+  font-weight: 200;
+}
+
+.time {
+  text-transform: uppercase
+}
+.summary {
+  max-width: fit-content;
+}

package/src/lib/browse/expanded-item/expanded-item.component.ts

@@ -0,0 +1,287 @@
+import { Component, Input, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';
+import { RecipientModel, HeaderModel, Action, UserInfo, Gender } from '../../core/models';
+import { MatDialog } from '@angular/material/dialog';
+import { ActionDialog, ActionDialogData } from '../../compose/action/action.dialog';
+import { MailboxService } from '../../core/mailbox.service';
+import { SessionService } from '../../core/session.service';
+import { PromptService } from '../../core/prompt.service';
+import { TranslateService } from '../../core/translate.service';
+import { HttpErrorResponse } from '@angular/common/http';
+import { Subject, forkJoin, Observable, filter } from 'rxjs';
+import { HubService } from '../../core/hub.service';
+import { takeUntil, map } from 'rxjs/operators';
+import { AccountService } from '../../core/account.service';
+import { Directionality } from '@angular/cdk/bidi';
+import { ChatInfo } from '../../chat/chat-info';
+const moment = require('moment');
+
+const REFRESH_TIME = 30000, TYPING_HINT_TIME = 1500;
+
+@Component({
+  selector: 'bizdoc-expanded-item',
+  templateUrl: './expanded-item.component.html',
+  styleUrls: ['./expanded-item.component.scss']
+})
+export class ExpandedItemComponent implements OnInit, OnDestroy {
+  @Input() item: RecipientModel<any>;
+  @Output() readonly sent = new EventEmitter<RecipientModel<any>>();
+  actions?: Action[];
+  newComments?: number;
+  typing?: boolean;
+  note: string;
+  who?: string;
+  mode: 'working' | 'done' | 'failed' | null;
+  private readonly _me: string;
+  private _typingTask: NodeJS.Timeout;
+  private _refreshTask: NodeJS.Timeout;
+  private readonly _destroy = new Subject<void>();
+  constructor(private _sb: PromptService,
+    private _chat: ChatInfo,
+    private _accounts: AccountService,
+    private _dir: Directionality,
+    private _translate: TranslateService,
+    private _mailbox: MailboxService,
+    private _dialog: MatDialog,
+    private _session: SessionService,
+    private _messaging: HubService) {
+    this._me = this._session.userId;
+  }
+  ngOnInit(): void {
+    this._messaging.comment$.pipe(takeUntil(this._destroy)).
+      subscribe(e => {
+        if (e.id === this.item.id && (e.model.byId || e.model.userId) !== (this._me)) {
+          this._comments();
+          this._accounts.get(e.model.userId).subscribe(u =>
+            this._sb.toast('Commented', u.gender, u.name));
+        }
+      });
+    this._messaging.update$.pipe(takeUntil(this._destroy)).subscribe(e => {
+      if (e.model.id === this.item.id) {
+        this._refresh();
+        (e.userId !== (this._me)) && this._accounts.get(e.userId).subscribe(u =>
+          this._sb.toast('MailVersionUpdate', this.item.number, u.name));
+      }
+    });
+    this._mailbox.changed.pipe(takeUntil(this._destroy)).subscribe(e => {
+      if (e.id === this.item.id)
+        this._refresh();
+    });
+    this._messaging.commentTyping$.pipe(takeUntil(this._destroy), filter(e => e.id === this.item.documentId)).subscribe(c => {
+      this.typing = true;
+      clearTimeout(this._typingTask);
+      this._typingTask = setTimeout(() => this.typing = false, TYPING_HINT_TIME);
+    });
+    this._refresh();
+    // refresh note moment part
+    this._refreshTask = setInterval(() => this._note(), REFRESH_TIME);
+  }
+  private _note() {
+    const { ownerId, issued, substitutingId, received, replied, log, id, note, byId, action } = this.item;
+    if (substitutingId) {
+      this._accounts.get(substitutingId).subscribe(u => {
+        if (replied) {
+          const time = this._fromNow(replied),
+            action = this._session.profile.actions.find(a => a.name === action),
+            adjective = action ? (action.adjective || action.title).toLowerCase() : action;
+          this.note = this._translate.personalize('YouSubstituteActionTaken', u.gender, adjective, this._formatUserElement(u), time);
+        }
+        else {
+          const escalations = issued &&
+            log.filter(l => l.time > issued &&
+              l.type === 'Escalation'
+              && l.recipientId === id);
+          if (escalations && escalations.length) {
+            const duration = moment(escalations[0].time).diff(received, 's');
+            this.note = this._translate.personalize('EscalatedFrom', u.gender, this._formatUserElement(u), this._duration(duration));
+          }
+          else {
+            const time = this._fromNow(received);
+            this.note = this._translate.personalize('SubstitutingNote', this._session.profile.gender,
+              this._formatUserElement(u),
+              time,
+              note || '');
+          }
+        }
+      });
+    }
+    else if (replied) {
+      const time = this._fromNow(replied);
+      if (byId) {
+        if (byId === this._session.profile.byId)
+          this.note = this._translate.get('ActionTakenByYou', this._actionName(action, 'you'),
+            this._session.profile.name, time);
+        else
+          this._accounts.get(byId).subscribe(u =>
+            this.note = this._translate.get('YouTakenActionBy', this._formatUserElement(u),
+              this._actionName(action, u.gender), time));
+      }
+      else if (this._session.profile.byId)
+        this.note = this._translate.personalize('ActionTaken', this._session.profile.gender, this._session.profile.name,
+          this._actionName(action, this._session.profile.gender), time);
+      else
+        this.note = this._translate.get('YouTakenAction', this._actionName(action, 'you'), time);
+    }
+    else if (note)
+      this.note = note;
+    else if (ownerId === this._session.profile.userId && issued) {
+      const time = this._fromNow(issued);
+      if (byId) {
+        if (byId === this._session.profile.byId)
+          this.note = this._translate.get('SubmittedNoteByYou', this._session.profile.name, time);
+        else
+          this._accounts.get(byId).subscribe(u =>
+            this.note = this._translate.personalize('SubmittedNoteBy', u.gender, this._formatUserElement(u), time));
+      }
+      else {
+        if (this._session.profile.byId)
+          this.note = this._translate.personalize('SubmittedNote', this._session.profile.gender, this._session.profile.name, time);
+        else
+          this.note = this._translate.get('YouSubmittedNote', time);
+      }
+    }
+  }
+  private _actionName(name: string, gender: Gender | 'you') {
+    const action = this._session.profile.actions.find(a => a.name === name);
+    if (!action) return name;
+    if (gender === 'you') {
+      const gender = this._session.profile.byGender || this._session.profile.gender;
+      return (
+        (gender === 'Male' ? (action.youMale || action.you) :
+          gender === 'Female' ? (action.youFemale || action.you) :
+            action.you) || action.past ||
+        action.title).toLowerCase();
+    }
+    return ((gender === 'Male' ? (action.pastMale || action.past) :
+      gender === 'Female' ? (action.pastFemale || action.past) :
+        action.past) ||
+      action.title).toLowerCase();
+  }
+  private _fromNow(date: Date) {
+    return moment(date).fromNow();
+  }
+
+  private _duration(time: number) {
+    return moment.duration(time, 's').humanize();
+  }
+  /** */
+  private _refresh(): void {
+    const { actions } = this.item;
+    this.actions = actions && actions.length ? this._session.profile.actions.filter(a => actions.indexOf(a.name) > -1) : null;
+    this._comments();
+    this._note();
+    this._who();
+  }
+  private _comments() {
+    const { viewed, comments } = this.item;
+    this.newComments = viewed ?
+      comments.filter(c => c.time > viewed && (c.byId || c.userId) !== (this._me)).length || null : null;
+  }
+
+  private _who() {
+    const { senderId } = this.item;
+    const observables: Observable<any>[] = [];
+    // sender
+    if (senderId && (senderId !== this._session.profile.userId || this._session.profile.byId)) {
+      const observe = this._accounts.get(senderId).pipe(map(u => this._formatUserElement(u)));
+      observables.push(observe);
+    }
+    //awaiting
+    let recipients = this.item.recipients.filter(r => r.pending && !r.estimate).
+      sort((r0, r1) => r0.received > r1.received ? 1 : -1).
+      map(r => r.userId);
+    recipients = recipients.filter((r, i) => recipients.indexOf(r) === i); /* unique */
+    if (recipients.length > 0) {
+      const me = this._me;
+      if (recipients.indexOf(me) < 0 || recipients.length > 1) {
+        const observe = forkJoin(recipients.filter(r => r !== me).
+          map(r => this._accounts.get(r).
+            pipe(map(p => this._formatUserElement(p))))).
+          pipe(map(n => {
+            recipients.indexOf(me) > -1 &&
+              n.push(this._translate.get('Yourself'));
+            return this._translate.get('Awaiting', this._translate.join(n));
+          }));
+        observables.push(observe);
+      }
+    }
+    observables.length && forkJoin(observables).subscribe(ns => this.who = ns.join(' '));
+  }
+
+  /**
+     * Chat
+     * @param e
+     */
+  chat(e: MouseEvent) {
+    const userId = (e.srcElement as HTMLElement).getAttribute('data-info');
+    userId &&
+      this._chat.open(userId);
+  }
+  private _formatUserElement(person: UserInfo) {
+    return this._chat.format(person);
+  }
+  /**
+   * 
+   * @param action
+   */
+  send(action: string) {
+    const { id, number, version, formId } = this.item;
+    const data: ActionDialogData = {
+      action,
+      item: this.item
+    };
+    this._dialog.open(ActionDialog, {
+      data,
+      direction: this._dir.value
+    }).afterClosed().subscribe(args => {
+      if (args) {
+        this.mode = 'working';
+        this._mailbox.send(id, version, formId, null, action, args).subscribe(() => {
+          const caction = this._session.profile.actions.find(a => a.name === action),
+            adjective = caction.adjective || caction.title;
+          this._sb.toast('Sent', number, adjective.toLowerCase());
+          this.sent.emit(this.item);
+          this.mode = 'done';
+        }, e => {
+          this._handleResponse(e, this.item, 'SendErr');
+          this.mode = 'failed';
+        });
+      }
+    });
+  }
+  /**
+   * 
+   * @param response
+   * @param item
+   * @param message resource
+   */
+  private _handleResponse(response: HttpErrorResponse | any, item: HeaderModel, message: string) {
+    if (response.constructor.name === 'PositionError')
+      switch (response.code) {
+        case 1:
+          this._sb.error('UserDeniedGeoErr');
+          break;
+        default:
+          this._sb.error('GeoErr');
+      }
+    else switch (response.status) {
+      case 409:
+        {
+          this._sb.error('VersionErr', item.number);
+          const obj = response.error /* serialized model */ as RecipientModel<any>;
+          Object.assign(item, obj);
+          break;
+        }
+      case 406:
+        this._sb.errorString(response.error);
+        break;
+      default:
+        this._sb.error(message);
+    }
+  }
+  ngOnDestroy(): void {
+    clearInterval(this._refreshTask);
+    this._destroy.next();
+    this._destroy.complete();
+    this._typingTask && clearTimeout(this._typingTask);
+  }
+}

package/src/lib/browse/filter/filter.component.html

@@ -0,0 +1,50 @@
+<form [formGroup]="form" fxLayout="column">
+  <mat-form-field *ngIf="!exclude || exclude.indexOf('contains') < 0">
+    <input matInput formControlName="contains" autocomplete="off" placeholder="{{'Contains' | translate}}" #contains>
+    <button *ngIf="form.value.contains" matSuffix mat-icon-button aria-label="" (click)="form.get('contains').setValue(null)">
+      <mat-icon>close</mat-icon>
+    </button>
+  </mat-form-field>
+  <mat-form-field>
+    <input matInput [matAutocomplete]="senders" [placeholder]="'Sender' | translate" [formControl]="senderId" #sender/>
+    <mat-autocomplete #senders [displayWith]="displayFn" (optionSelected)="senderSelected($event)">
+      <!--<mat-option [value]="null">
+        {{ 'All' | translate }}
+      </mat-option>-->
+      <mat-option *ngFor="let u of senders$ | async" [value]="u">
+        <span>{{u.name}}</span>
+      </mat-option>
+    </mat-autocomplete>
+    <button matSuffix mat-icon-button *ngIf="senderId.value" (click)="clearSender()"><mat-icon>clear</mat-icon></button>
+  </mat-form-field>
+  <mat-form-field>
+    <mat-select [placeholder]="'Status'|translate" formControlName="state">
+      <mat-option>
+        {{ 'All' | translate }}
+      </mat-option>
+      <mat-option *ngFor="let s of states" [value]="s.name">
+        {{s.title}}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+  <mat-form-field>
+    <mat-select [placeholder]="'Form' | translate" formControlName="form">
+      <mat-option>
+        {{ 'All' | translate }}
+      </mat-option>
+      <mat-option *ngFor="let f of forms" [value]="f.name">{{f.title}}</mat-option>
+    </mat-select>
+  </mat-form-field>
+  <div>
+    <mat-chip-list id="tags" [selectable]="true">
+      <mat-chip color="accent" *ngFor="let tag of tags" [selectable]="true" [selected]="form.value.tag === tag" (click)="toggleTag(tag)" style="cursor: pointer">
+        {{tag}}
+      </mat-chip>
+    </mat-chip-list>
+  </div>
+  <bizdoc-cube-filter *ngIf="filters" class="cube-filter"
+                      [cube]="filters.cube"
+                      [include]="filters.axes"
+                      [axes]="values"
+                      (axesChange)="axesChange($event)"></bizdoc-cube-filter>
+</form>

package/src/lib/browse/filter/filter.component.scss

@@ -0,0 +1,10 @@
+form {
+  /*max-width: 250px;*/
+  padding: 8px;
+}
+
+.cube-filter ::ng-deep {
+  form {
+    padding: 0;
+  }
+}