@bizdoc/core 1.14.8 → 1.14.9

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

@@ -0,0 +1,141 @@
+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 { NavigationFocus, 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';
+import { TranslateService } from '../core/translate.service';
+
+@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;
+  pageSize: number;
+  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 _translate: TranslateService,
+    private _dialog: MatDialog) {
+  }
+  ngOnInit(): void {
+    this._pane.paramsChange.subscribe(p => {
+      this.folderId = p['id'];
+      if (this.folderId) this._pane.title = this.folder.title;
+    });
+    this._pane.queryParamsChange.subscribe(p => {
+      this.filterType = p['type'];
+      if (this.filterType === 'flagged')
+        this._pane.title = this._translate.get('Flagged');
+      else 
+        if (p['tag'])
+        this._pane.title = this._translate.get('Tags');
+      this.filters = p;
+    });
+    this._router.events.pipe(takeUntil(this._destroy),
+      filter(e => (e instanceof ParamNavigation || e instanceof NavigationStart || e instanceof NavigationFocus)
+      && e.pane.component === ComposePaneComponent)).
+      subscribe((e: NavigationPaneBase<ComposePaneComponent>) =>
+        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,38 @@
+<div class="summary" *ngIf="model.summary" [innerHTML]="model.summary">
+</div>
+<div>
+  <bizdoc-attachments [model]="model"></bizdoc-attachments>
+  <bizdoc-events [model]="model"></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)" [bizdocTooltip]="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>{{model.stateId | state : 'past' }}</span>
+    &nbsp;
+    <span class="time" [bizdocTooltip]="model.received | amCalendar">{{model.received | amTimeAgo}}</span>
+    &nbsp;
+    <span [innerHTML]="sender | sanitizeHtml" (click)="chat($event)" class="who"></span>&nbsp;
+    <span [innerHTML]="awaiting | 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="model.comments.length" class="mat-small">
+      <span *ngIf="!newComments; else newcomments">{{model.comments.length > 1 ? ('CommentsCount' | translate : model.comments.length) : 'OneComment' | translate }}</span>
+    </div>
+  </div>
+  <div *ngIf="model.tags">
+    <span *ngFor="let tag of model.tags" class="mat-chip mat-standard-chip small-chip">{{tag}}</span>
+  </div>
+</div>
+<ng-template #newcomments>
+  <span [innerHTML]="'NewCommentsCount' | translate : model.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,339 @@
+import { Component, Input, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';
+import { HttpErrorResponse } from '@angular/common/http';
+import { MatDialog } from '@angular/material/dialog';
+import { Directionality } from '@angular/cdk/bidi';
+import { Subject, filter } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { RecipientModel, HeaderModel, Action, UserInfo, Gender } from '../../core/models';
+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 { HubService } from '../../core/hub.service';
+import { AccountService } from '../../core/account.service';
+import { ActionDialog, ActionDialogData } from '../../compose/action/action.dialog';
+import { ChatInfo } from '../../chat/chat-info';
+import dayjs from 'dayjs';
+
+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() model: RecipientModel<any>;
+  @Output() readonly sent = new EventEmitter<RecipientModel<any>>();
+  actions?: Action[];
+  newComments?: number;
+  typing?: boolean;
+  note: string;
+  sender?: string;
+  awaiting?: string;
+  mode: 'working' | 'done' | 'failed' | null;
+  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 _mailbox: MailboxService,
+    private _session: SessionService,
+    private _dir: Directionality,
+    private _dialog: MatDialog,
+    private _translate: TranslateService,
+    private _messaging: HubService) {
+  }
+  ngOnInit(): void {
+    this._messaging.comment$.pipe(takeUntil(this._destroy)).
+      subscribe(e => {
+        if (e.id === this.model.id && (e.model.byId || e.model.userId) !== this._session.userId) {
+          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.model.id) {
+        this._refresh();
+        (e.userId !== this._session.userId) && this._accounts.get(e.userId).subscribe(u =>
+          this._sb.toast('MailVersionUpdate', this.model.number, u.name));
+      }
+    });
+    this._mailbox.changed.pipe(takeUntil(this._destroy)).subscribe(e =>
+      (e.id === this.model.id) &&
+      this._refresh());
+    this._messaging.commentTyping$.pipe(takeUntil(this._destroy), filter(e => e.id === this.model.documentId)).subscribe(c => {
+      this.typing = true;
+      clearTimeout(this._typingTask);
+      this._typingTask = setTimeout(() => this.typing = false, TYPING_HINT_TIME);
+    });
+    this._refresh();
+    this._refreshTask = setInterval(() => this._refresh(), REFRESH_TIME);
+  }
+  private async _note() {
+    const { ownerId, ownerById, issued, substituteId, received, replied, log, id, note, byId, action, escalated, originId, draft } = this.model;
+    let target: string;
+    if (action) {
+      target = await this._target(id);
+    }
+    if (substituteId) {
+      const substituting = await this._accounts.get(substituteId).toPromise();
+      if (replied) {
+        const time = this._fromNow(replied),
+          action = this._session.profile.actions.find(a => a.name === action),
+          adjective = (action.adjective || action.title).toLowerCase();
+        if (target)
+          this.note = this._translate.personalize('YouSubstituteActionTakenTo', substituting.gender, adjective,
+            target,
+            this._formatUserElement(substituting), time);
+        else
+          this.note = this._translate.personalize('YouSubstituteActionTaken', substituting.gender, adjective, this._formatUserElement(substituting), time);
+      }
+      else if (escalated) {
+        const escalation = log.find(l => l.type === 'Escalation' && l.recipientId === originId);
+        this.note = this._translate.personalize('EscalatedFrom', substituting.gender, this._formatUserElement(substituting), this._duration(escalation.duration));
+      }
+      else {
+        const time = this._fromNow(received);
+        this.note = this._translate.personalize('SubstitutingNote', substituting.gender,
+          this._formatUserElement(substituting),
+          time,
+          note || '');
+      }
+    }
+    else if (replied) {
+      const time = this._fromNow(replied);
+      if (byId) {
+        if (byId === this._session.profile.byId) {
+          if (target)
+            this.note = this._translate.get('ActionTakenByYouTo', this._actionName(action, 'you'),
+              target,
+              this._session.profile.name, time);
+          else this.note = this._translate.get('ActionTakenByYou', this._actionName(action, 'you'),
+            this._session.profile.name, time);
+        }
+        else
+          this._accounts.get(byId).subscribe(u => {
+            if (target)
+              this.note = this._translate.get('YouTakenActionByTo', this._formatUserElement(u),
+                this._actionName(action, u.gender), target, time);
+            else
+              this.note = this._translate.get('YouTakenActionBy', this._formatUserElement(u),
+                this._actionName(action, u.gender), time);
+          });
+      }
+      else if (this._session.profile.byId) {
+        if (target)
+          this.note = this._translate.personalize('ActionTakenTo', this._session.profile.gender,
+            this._session.profile.name,
+            this._actionName(action, this._session.profile.gender), target, time);
+        else
+          this.note = this._translate.personalize('ActionTaken', this._session.profile.gender, this._session.profile.name,
+            this._actionName(action, this._session.profile.gender), time);
+      }
+      else {
+        if (target)
+          this.note = this._translate.get('YouTakenActionTo', this._actionName(action, 'you'), target, time);
+        else
+          this.note = this._translate.get('YouTakenAction', this._actionName(action, 'you'), time);
+      }
+    }
+    else if (note)
+      this.note = note;
+    else if (originId) {
+      const origin = this.model.recipients.find(r => r.id === originId);
+      const action = this._session.profile.actions.find(a => a.name === origin.action),
+        adjective = action.adjective || action.past || action.title;
+      if ((origin.byId || origin.userId) === this._session.userId)
+        this.note = this._translate.get('ActionByYou', adjective);
+      else if (origin.byId) {
+        const who = await this._accounts.get(origin.userId).toPromise();
+        const by = await this._accounts.get(origin.byId).toPromise();
+        this.note = this._translate.get('ActionByBy', adjective, by.name, who.name);
+      }
+      else {
+        const who = await this._accounts.get(origin.userId).toPromise();
+        this.note = this._translate.get('ActionBy', adjective, who.name);
+      }
+    }
+    else if (ownerId === this._session.userId && !draft) {
+      const time = this._fromNow(issued);
+      if (ownerById) {
+        if (ownerById === this._session.profile.byId)
+          this.note = this._translate.personalize('YouSubmittedNoteBy', this._session.profile.byGender, this._session.profile.name, time);
+        else {
+          const by = await this._accounts.get(ownerById).toPromise();
+          if (this._session.isImpersonating)
+            this.note = this._translate.personalize('SubmittedNoteBy', by.gender,
+              this._formatUserElement(by),
+              this._session.profile.name,
+              time);
+          else
+            this.note = this._translate.personalize('SubmittedNoteYouBy', by.gender,
+              this._formatUserElement(by),
+              time);
+        }
+      }
+      else {
+        if (this._session.isImpersonating)
+          this.note = this._translate.personalize('SubmittedNote', this._session.profile.gender, this._session.profile.name, time);
+        else
+          this.note = this._translate.get('YouSubmittedNote', time);
+      }
+    }
+  }
+  private async _target(id: number) {
+    const origin = this.model.recipients.filter(r => r.originId === id);
+    if (origin.length) {
+      const users = await this._accounts.getAll(origin.map(r => r.userId)).
+        toPromise();
+      return this._translate.join(
+        users.map(u => this._formatUserElement(u))
+      );
+    }
+  }
+
+  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.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 dayjs(date).fromNow();
+  }
+
+  private _duration(time: number) {
+    return dayjs.duration(time, 's').humanize();
+  }
+  /** */
+  private async _refresh() {
+    const { actions } = this.model;
+    this.actions = actions && actions.length ? this._session.profile.actions.filter(a => actions.indexOf(a.name) > -1) : null;
+    const { senderId } = this.model;
+    // sender
+    if (senderId && (senderId !== this._session.userId)) {
+      const who = await this._accounts.get(senderId).toPromise();
+      this.sender = this._formatUserElement(who);
+    }
+    this._comments();
+    this._note();
+    this._awaiting();
+  }
+  private _comments() {
+    const { viewed, comments } = this.model;
+    this.newComments = viewed ?
+      comments.filter(c => c.time > viewed && (c.byId || c.userId) !== this._session.userId).length || null : null;
+  }
+
+  private async _awaiting() {
+    //awaiting
+    let recipients = this.model.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) {
+      if (recipients.indexOf(this._session.userId) < 0 || recipients.length > 1) {
+        const users = await this._accounts.getAll(recipients.filter(r => r !== this._session.userId)).toPromise();
+        const names = users.map(p => this._formatUserElement(p));
+        recipients.indexOf(this._session.userId) > -1 &&
+          names.push(this._translate.get('Yourself'));
+        this.awaiting = this._translate.get('Awaiting', this._translate.join(names));
+      }
+    }
+  }
+
+  /**
+     * 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.model;
+    const data: ActionDialogData = {
+      action,
+      item: this.model
+    };
+    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(async r => {
+          const caction = this._session.profile.actions.find(a => a.name === action),
+            adjective = caction.adjective || caction.title;
+          const target = await this._target(id);
+          if (target)
+            this._sb.toast('SentTo', number, adjective.toLowerCase(), target);
+          else
+            this._sb.toast('Sent', number, adjective.toLowerCase());
+          this.sent.emit(this.model);
+          this.mode = 'done';
+        }, e => {
+          this._handleResponse(e, this.model, '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;
+  }
+}