@bizdoc/core 1.13.8 → 1.13.12

package/src/lib/compose/comments/comment.component.html

@@ -0,0 +1,36 @@
+<div class="row">
+  <div class="comment-body" #body>
+    <div [innerHTML]="item.text|taggingHtml:item.resource" class="comment-text"></div>
+    <img *ngIf="item.image" [src]="'data:image/png;base64,'+item.image" alt="" (click)="preview()" />
+  </div>
+  <button mat-icon-button *ngIf="me" [matMenuTriggerFor]="menu" class="tool" (click)="$event.stopPropagation()"><mat-icon>more_vert</mat-icon></button>
+  <mat-menu #menu>
+    <ng-template matMenuContent>
+      <button mat-menu-item (click)="edit()">{{'Edit'|translate}}</button>
+      <mat-divider></mat-divider>
+      <button mat-menu-item (click)="delete()">{{'Delete'|translate}}</button>
+    </ng-template>
+  </mat-menu>
+</div>
+<div class="row">
+  <div class="column">
+    <span [innerHTML]="name | sanitizeHtml" (click)="chat($event)"></span>
+    <div>
+      <small fxFlex bizdocTooltip="{{item.edited || item.time | amCalendar }}">{{item.edited || item.time | amTimeAgo}}</small>
+      <ng-container *ngIf="item.edited">
+        &nbsp;<a (click)="edits()" class="modification">{{'Edited'| translate}}</a>
+      </ng-container>
+      <ng-container *ngIf="!me">
+        &nbsp;<a (click)="reply.emit()" class="modification">{{'Reply'| translate}}</a>
+      </ng-container>
+    </div>
+  </div>
+  <div class="comment-actions" *ngIf="voting">
+    <a *ngIf="item.votes > 0 || item.votes < 0" [class.score-negative]="item.votes < 0" class="comment-score" dir="ltr" (click)="votes()" [bizdocTooltip]="'Votes'|translate">{{item.votes}}</a>
+    <button mat-icon-button (click)="vote(1, $event)" [class.voted-true]="item.voted===1" ><mat-icon>thumb_up_alt</mat-icon></button>
+    <button mat-icon-button (click)="vote(-1, $event)" [class.voted-false]="item.voted===-1" ><mat-icon>thumb_down_alt</mat-icon></button>
+  </div>
+</div>
+<ng-template #previewTemplate>
+  <img [src]="'data:image/png;base64,'+item.image" alt="" />
+</ng-template>

package/src/lib/compose/comments/comment.component.ts

@@ -0,0 +1,160 @@
+import { Component, Input, Output, EventEmitter, ViewChild, ElementRef, Inject, TemplateRef, ViewContainerRef, OnInit } from '@angular/core';
+import { Overlay } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { ESCAPE } from '@angular/cdk/keycodes';
+import { forkJoin, merge, Observable, of } from 'rxjs';
+import { filter } from 'rxjs/operators';
+import { BizDocConfig, BIZDOC_CONFIG } from '../../core/configuration';
+import { Comment, DocumentModel, UserInfo } from '../../core/models';
+import { PromptService } from '../../core/prompt.service';
+import { MailboxService } from '../../core/mailbox.service';
+import { SessionService } from '../../core/session.service';
+import { TranslateService } from '../../core/translate.service';
+import { Popup } from "../../core/popup/popup.service";
+import { CommentData, EditCommentComponent } from './edit-comment.component';
+import { CommentEditsComponent, CommentVersionData } from './edits.component';
+import { CommentVoteData, CommentLikesComponent } from './votes.component';
+import { AccountService } from '../../core/account.service';
+import { ChatInfo } from '../../chat/chat-info';
+
+@Component({
+  selector: 'bizdoc-comment',
+  templateUrl: './comment.component.html',
+  host: {
+    class: 'comment'
+  }
+})
+/** comment component*/
+export class CommentComponent implements OnInit {
+  @Input() model!: DocumentModel<any>;
+  @Input() item!: Comment;
+  voting: boolean;
+  @Output() readonly deleted = new EventEmitter();
+  @Output() readonly reply = new EventEmitter();
+  @ViewChild('body') bodyElement: ElementRef<HTMLTextAreaElement>;
+  @ViewChild('previewTemplate') previewTemplate: TemplateRef<any>;
+  name: string = '';
+  me: boolean;
+  constructor(
+    private _session: SessionService,
+    private _ps: PromptService,
+    private _translate: TranslateService,
+    private _chat: ChatInfo,
+    private _accounts: AccountService,
+    private _popup: Popup,
+    private _overlay: Overlay,
+    private _mailbox: MailboxService,
+    private _vc: ViewContainerRef,
+    @Inject(BIZDOC_CONFIG) private _config: BizDocConfig) {
+    this.voting = !_config.comments || _config.comments.voting !== false;
+  }
+  ngOnInit(): void {
+    const me = this._session.userId, you = of('you');
+    this.me = (this.item.byId || this.item.userId) === me;
+    const whos: [Observable<any>] = [this.item.userId === me ? you : this._accounts.get(this.item.userId)];
+    if (this.item.byId)
+      whos.push(this.item.byId === me ? you : this._accounts.get(this.item.byId));
+    if (this.item.parentId) {
+      const parent = this.model.comments.find(c => c.id == this.item.parentId), who = parent.byId || parent.userId;
+      whos.push(who == me ? you : this._accounts.get(who));
+    }
+    forkJoin(whos).subscribe(this._name.bind(this));
+  }
+  private _name(us: Observable<UserInfo | 'you'>) {
+    if (us[0] === 'you')
+      this.name = this._translate.get('You');
+    else
+      this.name = this._formatUserElement(us[0] as UserInfo);
+    if (this.item.byId) {
+      if (us[1] === 'you')
+        this.name = this._translate.get('ByYou', this.name);
+      else
+        this.name = this._translate.get('By', this.name, this._formatUserElement(us[1] as UserInfo));
+    }
+    if (this.item.parentId) {
+      const who = us[2] || us[1];
+      if (who === 'you')
+        this.name = this._translate.get('ReplyingToYou', this.name);
+      else if (us[0] === 'you')
+        this.name = this._translate.get('YouRepliedTo', this._formatUserElement(who as UserInfo));
+      else
+        this.name = this._translate.get('ReplyingTo', this.name, this._formatUserElement(who as UserInfo));
+    }
+  }
+  private _formatUserElement(person: UserInfo) {
+    if (this._config.chating !== false)
+      return this._chat.format(person);
+    else
+      return person.nick || person.name;
+  }
+  /**
+   * Chat
+   * @param e
+   */
+  chat(e: MouseEvent) {
+    const userId = (e.srcElement as HTMLElement).getAttribute('data-info');
+    userId &&
+      this._chat.open(userId);
+  }
+  vote(value: number, event: MouseEvent) {
+    value = this.item.voted !== value ? value : 0;
+    this._mailbox.vote(this.model.documentId, this.item.id, value).subscribe(() => {
+      if (this.item.votes === undefined)
+        this.item.votes = value;
+      else if (value === 0)
+        this.item.votes -= this.item.voted;
+      else
+        this.item.votes += value - (this.item.voted || 0);
+      if (this.item.votes === 0) this.item.votes = undefined;
+      this.item.voted = value !== 0 ? value : undefined;
+    });
+    event.stopPropagation();
+  }
+  edit() {
+    const { id, text, resource, image } = this.item;
+    this._open(EditCommentComponent, {
+      id, text, resource, image,
+      documentId: this.model.documentId
+    } as CommentData).closed.subscribe(c => {
+      c &&
+        Object.assign(this.item, { image: null, text: null }, c)
+    });
+  }
+  private _open(component, data) {
+    return this._popup.open(component, this.bodyElement, { position: 'start', data });
+  }
+  delete() {
+    this._ps.ask('DeleteCommentAsk', null, {
+      ok: 'Delete',
+      color: 'warn'
+    }).subscribe(ok => {
+      ok && this._mailbox.removecomment(this.item.id).subscribe(() => {
+        this.item.deleted = true;
+        this.deleted.emit();
+      }, () => this._ps.error());
+    })
+  }
+  edits() {
+    this._open(CommentEditsComponent, {
+      id: this.item.id,
+      byId: this.item.byId,
+      resource: this.item.resource,
+      documentId: this.model.documentId
+    } as CommentVersionData);
+  }
+  preview() {
+    const oRef = this._overlay.create({
+      hasBackdrop: true,
+      disposeOnNavigation: true,
+      positionStrategy: this._overlay.position().global().centerHorizontally().centerVertically(),
+    });
+    oRef.attach(new TemplatePortal(this.previewTemplate, this._vc));
+    merge(oRef.keydownEvents().pipe(filter(k => k.keyCode === ESCAPE)), oRef.backdropClick()).subscribe(() => oRef.detach());
+  }
+  votes() {
+    this._open(CommentLikesComponent, {
+      id: this.item.id,
+      documentId: this.model.documentId
+    } as CommentVoteData);
+  }
+}

package/src/lib/compose/comments/comments.component.html

@@ -0,0 +1,27 @@
+<bizdoc-none *ngIf="!model.comments.length" icon="format_quote"></bizdoc-none>
+
+<div fxLayout="column" #thread (scroll)="onScroll($event)" class="comments-thread">
+  <ng-container role="listitem" *ngFor="let c of model.comments; trackBy: trackBy">
+    <bizdoc-comment *ngIf="!c.deleted || showDeleted; else deletedMsg"
+                    [model]="model"
+                    [item]="c"
+                    (reply)="reply(c)"
+                    (deleted)="deleted(c)">
+    </bizdoc-comment>
+  </ng-container>
+</div>
+
+<div class="comments-typing" [style.visibility]="typing ? 'visible': 'hidden'">{{'Typing' | translate : typing}}</div>
+
+<div class="comments-reply" *ngIf="replyName">
+  <span [innerHTML]="replyName | sanitizeHtml" (click)="chat($event)"></span>
+  &nbsp; <a class="modification" (click)="clearReply()">{{'Cancel'|translate}}</a>
+</div>
+
+<bizdoc-edit-text (ok)="post($event)" (change)="_textChange.next()"
+                  [disabled]="sending" (focus)="onFocus()" (blur)="onBlur()">
+</bizdoc-edit-text>
+
+<ng-template #deletedMsg>
+  <a (click)="showDeleted = true" class="comment-deleted">{{'Deleted' | translate}}</a>
+</ng-template>

package/src/lib/compose/comments/comments.component.scss

@@ -0,0 +1,33 @@
+:host {
+  display: flex;
+  -ms-flex-direction: column;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+  height: 100%;
+}
+
+.comments-thread {
+  flex: 1 1 auto;
+  overflow: auto;
+  padding: 8px 8px 0 8px;
+}
+
+.comment-deleted {
+  align-self: center;
+  font-variant: all-small-caps;
+}
+
+.comments-typing, .comments-reply {
+  font-size: 12px;
+  padding: 0 8px;
+}
+
+.comments-reply {
+  .modification {
+      font-size:medium
+  }
+}
+
+.modification {
+  font-variant: all-small-caps;
+}

package/src/lib/compose/comments/comments.component.ts

@@ -0,0 +1,220 @@
+import { Component, Input, OnInit, OnDestroy, Output, EventEmitter, OnChanges, ViewChild, ElementRef, AfterViewInit, Inject, SimpleChanges } from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil, debounceTime, filter } from 'rxjs/operators';
+import { BizDocConfig, BIZDOC_CONFIG } from '../../core/configuration';
+import { DocumentModel, Comment, UserInfo } from '../../core/models';
+import { MailboxService } from '../../core/mailbox.service';
+import { HubService } from '../../core/hub.service';
+import { AccountService } from '../../core/account.service';
+import { PromptService } from '../../core/prompt.service';
+import { SessionService } from '../../core/session.service';
+import { TranslateService } from '../../core/translate.service';
+import { ChatInfo } from '../../chat/chat-info';
+import { EditInputComponent, EditTextEvent } from '../../core/tagging/edit-input.component';
+
+export const TYPING_NOTIFY = 500, TYPING_MESSAGE_TIME = 1500;
+
+@Component({
+  selector: 'bizdoc-comments',
+  templateUrl: './comments.component.html',
+  styleUrls: ['./comments.component.scss'],
+  host: {
+    class: 'comments'
+  }
+})
+/** comments component*/
+export class CommentsComponent implements OnInit, OnDestroy, OnChanges, AfterViewInit {
+  @Input() model!: DocumentModel<any>;
+  @Output() readonly change = new EventEmitter();
+  sending = false;
+  @ViewChild('thread', { read: ElementRef, static: true }) threadElement: ElementRef;
+  @ViewChild(EditInputComponent, { static: true }) input: EditInputComponent;
+  typing?: string;
+  showDeleted = false;
+  replyName: string;
+  private _replyTo: Comment;
+  private _inFocus = false;
+  private _top = false;
+  private _typingTask: NodeJS.Timeout;
+  readonly _textChange = new Subject<void>();
+  private _preserveDraft: boolean;
+  private readonly _destroy = new Subject<void>();
+  /** comments ctor */
+  constructor(private _accounts: AccountService,
+    private _session: SessionService,
+    private _sb: PromptService,
+    private _translate: TranslateService,
+    private _chat: ChatInfo,
+    private _mailbox: MailboxService,
+    private _messaging: HubService,
+    @Inject(BIZDOC_CONFIG) private _config: BizDocConfig) {
+    this._preserveDraft = _config.comments && _config.comments.preserveDraft;
+  }
+  ngOnInit(): void {
+    this._messaging.comment$.pipe(takeUntil(this._destroy), filter(e => (e.id === this.model.documentId))).subscribe(e => {
+      if (!this.model.comments.find(c => c.id === e.model.id)) {
+        this.model.comments.push(e.model);
+        if (this._inFocus)
+          this._viewed();
+        this.change.emit();
+      }
+    });
+    this._messaging.commentTyping$.pipe(takeUntil(this._destroy), filter(e => e.id === this.model.documentId)).
+      subscribe(e => {
+        this._accounts.get(e.userId).subscribe(u => {
+          this.typing = u.name;
+          clearTimeout(this._typingTask);
+          this._typingTask = setTimeout(() => this.typing = null, TYPING_MESSAGE_TIME);
+        })
+      });
+    this._messaging.vote$.pipe(takeUntil(this._destroy), filter(e => e.id === this.model.documentId)).subscribe(e => {
+      const comment = this.model.comments.find(c => c.id === e.commentId);
+      comment && (comment.votes = e.votes);
+    });
+    this._messaging.commentUpdate$.pipe(takeUntil(this._destroy), filter(e => e.id === this.model.documentId)).subscribe(e => {
+      const comment = this.model.comments.find(c => c.id === e.model.id);
+      Object.assign(comment, e.model);
+    });
+    this._messaging.commentDelete$.pipe(takeUntil(this._destroy), filter(e => e.id === this.model.documentId)).subscribe(e => {
+      const comment = this.model.comments.find(c => c.id === e.id);
+      comment.deleted = true;
+      this.change.emit();
+    });
+    this._textChange.pipe(debounceTime(TYPING_NOTIFY), takeUntil(this._destroy)).subscribe(() =>
+      this._mailbox.typing(this.model.documentId));
+  }
+  private _formatUserElement(person: UserInfo) {
+    if (this._config.chating !== false)
+      return this._chat.format(person);
+    else
+      return person.nick || person.name;
+  }
+  /**
+   * Chat
+   * @param e
+   */
+  chat(e: MouseEvent) {
+    const userId = (e.srcElement as HTMLElement).getAttribute('data-info');
+    userId &&
+      this._chat.open(userId);
+  }
+  ngOnChanges(changes: SimpleChanges) {
+    const change = changes['model'];
+    if (this._preserveDraft) {
+      !change.firstChange && this._persist((change.previousValue as DocumentModel).documentId.toString());
+
+      const text = localStorage.getItem(this.model.documentId.toString());
+      if (text) this.input.text = text;
+    }
+    this._scrollToBottom();
+  }
+  get unreadComments(): number {
+    if (!this.model.viewed) return this.model.comments.length;
+    const me = this._session.userId;
+    let n = 0;
+    for (let i = this.model.comments.length; i > 0; i--) {
+      let comment = this.model.comments[i - 1];
+      if ((comment.byId || comment.userId) === me) break;
+      if (!comment.deleted && comment.time > this.model.viewed)
+        n++;
+    }
+
+    return n;
+  }
+  deleted(item: Comment) {
+  }
+  reply(item: Comment) {
+    this._replyTo = item;
+    this._accounts.get(item.byId || item.userId).
+      subscribe(u =>
+        this.replyName = this._translate.get('ReplyTo', this._formatUserElement(u)));
+    this.input.focus();
+  }
+  clearReply() {
+    this._replyTo = null;
+    this.replyName = null;
+  }
+  trackBy = (_, item: Comment) => item.id;
+  ngAfterViewInit() {
+    const { comments } = this.model;
+    if (!comments.length)
+      this.focus();
+    else {
+      const comment = comments[comments.length - 1];
+      if ((comment.byId || comment.userId) === this._session.userId)
+        this.focus();
+    }
+    this._scrollToBottom();
+  }
+  public focus() {
+    this.input.focus();
+  }
+  onScroll(evt: Event) {
+    if ((evt.target as HTMLDivElement).scrollTop === 0 && this.model.comments.length && !this._top) {
+      const time = this.model.comments.sort((c0, c1) => c0.time > c1.time ? 1 : -1)[0].time;
+      this._mailbox.comments(this.model.documentId, time).subscribe(cs => {
+        if (cs.length === 0)
+          this._top = true;
+        else {
+          this.model.comments = cs.reverse().concat(this.model.comments)
+          setTimeout(() => this._scrollToBottom());
+        }
+      });
+    }
+  }
+  private _scrollToBottom(): void {
+    try {
+      this.threadElement.nativeElement.scrollTop = this.threadElement.nativeElement.scrollHeight;
+    } catch (e) {
+      console.error(e)
+    }
+  }
+  onFocus() {
+    this._inFocus = true;
+    this._viewed();
+  }
+  onBlur() {
+    this._inFocus = false;
+  }
+  private _viewed() {
+    const { viewed, comments, documentId } = this.model;
+    comments.length && (!viewed || comments.findIndex(c => c.time > viewed) > -1) &&
+      this._mailbox.viewedcomments(documentId).subscribe(e => {
+        this.model.viewed = e.time;
+        this.change.emit();
+      });
+  }
+  post(evt: EditTextEvent) {
+    this.sending = true;
+    const options = { ...evt } as {
+      text?: string,
+      resource?: { [key: string]: any },
+      image?: string,
+      parentId?: number
+    };
+    if (this._replyTo)
+      options.parentId = this._replyTo.id;
+    this._mailbox.comment(this.model.documentId, options).subscribe(c => {
+      this.model.comments.push(c);
+      this.input.clear();
+      this.model.viewed = c.time;
+      this.change.emit();
+      setTimeout(() => this._scrollToBottom());
+      this.sending = false;
+    }, () => {
+      this._sb.error();
+      this.sending = false;
+    });
+  }
+  ngOnDestroy(): void {
+    if (this._typingTask) clearTimeout(this._typingTask);
+    this._destroy.next();
+    this._destroy.complete();
+
+    this._preserveDraft && this._persist(this.model.documentId.toString());
+  }
+  private _persist(id: string) {
+    this.input.text && this.input.text.length &&
+      window.localStorage.setItem(id, this.input.text);
+  }
+}

package/src/lib/compose/comments/comments.pane.component.ts

@@ -0,0 +1,41 @@
+import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Subject, takeUntil } from 'rxjs';
+import { DocumentModel } from '../../core/models';
+import { PaneRef } from '../../core/slots/pane-ref';
+import { TranslateService } from '../../core/translate.service';
+import { CommentsComponent } from './comments.component';
+
+@Component({
+  template: `<bizdoc-comments [model]=model></bizdoc-comments>`,
+  styles: [
+    `:host{
+  min-width: 320px;
+}`  ],
+  host: {
+    class: 'pane'
+  } 
+}) export
+  class CommentsPaneComponent implements OnInit, OnDestroy {
+  model: DocumentModel<any>;
+  @ViewChild(CommentsComponent, { static: true })
+  private _comments: CommentsComponent;
+  public get comments(): CommentsComponent {
+    return this._comments;
+  }
+  private readonly _destroy = new Subject<void>();
+  constructor(translate: TranslateService, private _pane: PaneRef<CommentsPaneComponent>) {
+    _pane.title = translate.get('Comments');
+    _pane.dataChange.subscribe(d => {
+      this.model = d['item'];
+      this._pane.group = `#${this.model.number}`;
+    });
+  }
+  ngOnInit(): void { 
+      this._comments.change.pipe(takeUntil(this._destroy)).
+        subscribe(() => this._pane.badge = this._comments.unreadComments);
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}

package/src/lib/compose/comments/edit-comment.component.html

@@ -0,0 +1,3 @@
+<bizdoc-edit-text (ok)="ok($event)"
+                  [resource]="data.resource" [text]="data.text" [image]="data.image"
+                  [disabled]="sending" autofocus></bizdoc-edit-text>

package/src/lib/compose/comments/edit-comment.component.ts

@@ -0,0 +1,35 @@
+import { Component, Inject } from '@angular/core';
+import { PromptService } from '../../core/prompt.service';
+import { MailboxService } from '../../core/mailbox.service';
+import { POPUP_DATA } from '../../core/popup/popup.component';
+import { PopupRef } from "../../core/popup/popup-ref";
+import { EditTextEvent } from '../../core/tagging/edit-input.component';
+ 
+@Component({
+  selector: 'bizdoc-edit-comment',
+  templateUrl: './edit-comment.component.html',
+})
+export class EditCommentComponent {
+  sending: boolean;
+  constructor(
+    private _popupRef: PopupRef<EditCommentComponent>,
+    @Inject(POPUP_DATA) public data: CommentData,
+    private _sb: PromptService,
+    private _mailbox: MailboxService) {
+  }
+  ok(evt: EditTextEvent) {
+    this.sending = true;
+    this._mailbox.commentupdate(this.data.documentId, this.data.id, evt).subscribe(c =>
+      this._popupRef.close(c), () => {
+        this.sending = false;
+        this._sb.error();
+      });
+  }
+}
+export interface CommentData {
+  documentId: any;
+  id: number;
+  image?: string;
+  text?: string;
+  resource?: { [key: string]: any };
+}

package/src/lib/compose/comments/edits.component.html

@@ -0,0 +1,7 @@
+<span class="mat-title">{{'History' | translate}}</span>
+
+<div *ngFor="let v of versions | async" class="comment">
+  <p [innerHTML]="v.text|taggingHtml:resource"></p>
+  <bizdoc-identity-name class="mat-body" [identity]="v.userId" [by]="v.byId" *ngIf="v.byId || byId"></bizdoc-identity-name>
+  <small>{{v.time | amCalendar}}</small>
+</div>

package/src/lib/compose/comments/edits.component.ts

@@ -0,0 +1,33 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { CommentVersion } from '../../core/models';
+import { POPUP_DATA } from '../../core/popup/popup.component';
+import { MailboxService } from '../../core/mailbox.service';
+
+@Component({
+  selector: 'bizdoc-comment-edits',
+  templateUrl: './edits.component.html',
+  styles: [':host { padding: 8px }']
+})
+export class CommentEditsComponent implements OnInit {
+  versions: Observable<CommentVersion[]>;
+  byId: string;
+    resource: { [key: string]: any; };
+  constructor(
+    @Inject(POPUP_DATA) private _data: CommentVersionData,
+    private _mailbox: MailboxService
+  ) {
+    this.byId = _data.byId;
+    this.resource = _data.resource;
+  }
+  ngOnInit(): void {
+    this.versions = this._mailbox.edits(this._data.documentId, this._data.id);
+  }
+}
+
+export interface CommentVersionData {
+  id: number;
+  byId: string;
+  documentId: number;
+  resource: {[key:string]: any }
+}

package/src/lib/compose/comments/quick-comment.component.exp.ts

@@ -0,0 +1,60 @@
+import { OnDestroy } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
+import { filter, takeUntil } from 'rxjs';
+import { debounceTime, Subject } from 'rxjs';
+import { AccountService } from '../../core/account.service';
+import { HubService } from '../../core/hub.service';
+import { DOCUMENT_MODEL, MailboxService } from '../../core/mailbox.service';
+import { DocumentModel } from '../../core/models';
+import { PromptService } from '../../core/prompt.service';
+import { EditTextEvent } from '../../core/tagging/edit-input.component';
+import { TYPING_MESSAGE_TIME, TYPING_NOTIFY } from './comments.component';
+
+@Component({
+  selector: 'bizdoc-quick-comment',
+  templateUrl: './quick-comment.component.html',
+  styleUrls: ['./quick-comment.component.scss']
+})
+export class QuickCommentComponent implements OnInit, OnDestroy {
+  sending: boolean;
+  typing?: string;
+  private _typingTask: NodeJS.Timeout;
+  readonly _textChange = new Subject<void>();
+  private readonly _destroy = new Subject<void>();
+  constructor(
+    @Inject(DOCUMENT_MODEL) public model: DocumentModel<any>,
+    private _accounts: AccountService,
+    private _mailbox: MailboxService,
+    private _messaging: HubService,
+    private _sb: PromptService
+  ) { }
+  ngOnInit(): void {
+    this._textChange.pipe(debounceTime(TYPING_NOTIFY), takeUntil(this._destroy)).subscribe(() =>
+      this._mailbox.typing(this.model.documentId));
+    this._messaging.commentTyping$.pipe(takeUntil(this._destroy), filter(e => e.id === this.model.documentId)).
+      subscribe(e => {
+        this._accounts.get(e.userId).subscribe(u => {
+          this.typing = u.name;
+          clearTimeout(this._typingTask);
+          this._typingTask = setTimeout(() => this.typing = null, TYPING_MESSAGE_TIME);
+        })
+      });
+  }
+  post(evt: EditTextEvent) {
+    const { text, resource } = evt;
+    this.sending = true;
+    this._mailbox.comment(this.model.documentId, { text, resource }).
+      subscribe(c => {
+        this.model.comments.push(c);
+        this.sending = false;
+      }, () => {
+        this._sb.error()
+        this.sending = false;
+      })
+  }
+  ngOnDestroy(): void {
+    if (this._typingTask) clearTimeout(this._typingTask);
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}

package/src/lib/compose/comments/quick-comment.component.html

@@ -0,0 +1,5 @@
+<div class="comments-typing" [style.visibility]="typing ? 'visible': 'hidden'">{{'Typing' | translate : typing}}</div>
+<bizdoc-edit-text (ok)="post($event)" (change)="_textChange.next()"
+                  [disabled]="sending" [placeholder]="''">
+</bizdoc-edit-text>
+<div *ngIf="model.comments.length">{{(model.comments.length === 1 ? 'OneComment' : 'CommentsCount') | translate: model.comments.length}}</div>