@bizdoc/core 1.14.8 → 1.14.9

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

@@ -0,0 +1,156 @@
+import { Component, Output, EventEmitter, OnInit, OnDestroy, ViewChild, OnChanges, SimpleChanges, Input, ElementRef, AfterViewInit, ChangeDetectorRef, Inject } from '@angular/core';
+import { FormBuilder } from '@angular/forms';
+import { CdkDragDrop } from '@angular/cdk/drag-drop';
+import { MatChipList } from '@angular/material/chips';
+import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { Subject, Observable } from 'rxjs';
+import { debounceTime, takeUntil, switchMap, filter } from 'rxjs/operators';
+import { State, Form, UserInfo, AxesMap } from '../../core/models';
+import { cleanup, isString } from '../../core/functions';
+import { SessionService } from '../../core/session.service';
+import { MailboxService } from '../../core/mailbox.service';
+import { AccountService } from '../../core/account.service';
+import { AXIS_VALUE_PATTERN } from '../../cube/cube.service';
+import { BizDocConfig, BIZDOC_CONFIG } from '../../core/configuration';
+
+const FILTER_DEBOUNCE = 250;
+
+@Component({
+  selector: 'bizdoc-browse-filter',
+  templateUrl: './filter.component.html',
+  styleUrls: ['./filter.component.scss']
+})
+/** browse-filter component*/
+export class BrowseFilterComponent implements OnInit, OnChanges, AfterViewInit, OnDestroy {
+  readonly pattern = AXIS_VALUE_PATTERN;
+  @Input() values: BrowseFilterArgs;
+  @Input() folderId?: string;
+  @Input() exclude?: string[];
+  @Output() readonly valuesChange = new EventEmitter<BrowseFilterArgs>();
+  readonly senderId = this._fb.control(null);
+  readonly form = this._fb.group({
+    contains: null,
+    form: null,
+    state: null,
+    senderId: null,
+    tag: null
+  });
+  forms: Form[];
+  states: State[];
+  senders$: Observable<UserInfo[]>;
+  tags: string[];
+  filters: {
+    cube?: string;
+    axes: string[];
+  };
+  @ViewChild(MatChipList, { static: true }) chips: MatChipList;
+  @ViewChild('contains', { static: true, read: ElementRef }) contains: ElementRef<HTMLInputElement>;
+  @ViewChild('sender', { static: true, read: ElementRef }) sender: ElementRef<HTMLInputElement>;
+  readonly sources: { [datatype: string]: Observable<{ [name: string]: any }> } = {};
+  private readonly _destroy = new Subject<void>();
+  /** browse-filter ctor */
+  constructor(private _fb: FormBuilder,
+    private _session: SessionService,
+    private _cd: ChangeDetectorRef,
+    private _mailbox: MailboxService,
+    private _accounts: AccountService,
+    @Inject(BIZDOC_CONFIG) private _config: BizDocConfig) {
+    this.states = _session.profile.states;
+    this.forms = _session.profile.forms;
+    this.tags = _session.profile.options.tags;
+  }
+  ngOnInit(): void {
+    if (this.senderId) this.senders$ = this.senderId.valueChanges.
+      pipe(debounceTime(250),
+        filter(v => isString(v)),
+        takeUntil(this._destroy), switchMap(v => this._mailbox.senders(v)));
+    this.form.valueChanges.pipe(takeUntil(this._destroy), debounceTime(FILTER_DEBOUNCE)).subscribe(v => {
+      const value: BrowseFilterArgs = { ...v };
+      cleanup(value);
+      this.valuesChange.emit(value);
+    });
+    this._initialize();
+    this.setValue(this.values);
+  }
+  ngAfterViewInit(): void {
+    this.focus();
+  }
+  ngOnChanges(changes: SimpleChanges): void {
+    this._initialize();
+  }
+  private _initialize() {
+    if (this.folderId) {
+      const folder = this._session.profile.folders.find(f => f.name === this.folderId);
+      if (folder.filters)
+        this.filters = folder.filters;
+      return;
+    }
+    if (this._config.folders && this._config.folders.axes) {
+      const { axes, cube } = this._config.folders;
+      this.filters = { axes, cube };
+    }
+    else
+      this.filters = null;
+  }
+
+  display(keyValue) {
+    return keyValue ? keyValue.value : null;
+  }
+  change(axis: string, evt: MatAutocompleteSelectedEvent) {
+    this.form.controls[axis].setValue(evt.option.value.key);
+  }
+  public setValue(value: BrowseFilterArgs) {
+    this.form.patchValue(Object.assign({
+      contains: null,
+      form: null,
+      state: null,
+      senderId: null,
+      flag: null,
+      tag: null
+    }, value), { emitEvent: false });
+    if (value.senderId)
+      this._accounts.get(value.senderId).subscribe(u => this.senderId.setValue(u, { emitEvent: false }));
+    this.chips.value = value.tag;
+  }
+  clearSender() {
+    this.senderId.setValue(null);
+    this.form.patchValue({ senderId: null });
+  }
+  axesChange(axes: AxesMap) {
+    const value = { ...this.form.value, ...axes };
+    cleanup(value);
+    this.valuesChange.emit(value);
+  }
+  toggleTag(tag: string) {
+    const control = this.form.controls['tag'];
+    control.setValue(control.value !== tag ? tag : null);
+  }
+  displayFn(item: UserInfo): string | undefined {
+    return item ? item.name : undefined;
+  }
+  drop(evt: CdkDragDrop<string, any>) {
+    evt.item.data;
+  }
+  senderSelected(e: MatAutocompleteSelectedEvent) {
+    const info = e.option.value as UserInfo;
+    this.form.patchValue({ senderId: info ? info.id : null });
+  }
+  focus() {
+    if (this.contains) this.contains.nativeElement.focus();
+    else if (this.sender) this.sender.nativeElement.focus();
+    this._cd.detectChanges();
+  }
+
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}
+export interface BrowseFilterArgs {
+  form?: string;
+  flag?: boolean;
+  state?: string;
+  contains?: string;
+  senderId?: string;
+  tag?: string;
+}

package/src/lib/browse/folders-menu.component.html

@@ -0,0 +1,20 @@
+<mat-nav-list id="folders" cdkDropList cdkDropListSortingDisabled (cdkDropListDropped)="drop($event)"
+              cdkDropListConnectedTo="browse-table" [cdkDropListEnterPredicate]="canDrop">
+  <mat-list-item [slotRouterLink]="['mailbox/f/:type=flagged']" slotRouterLinkActive="active" (click)="change.emit()">
+    <mat-icon matListIcon [bizdocTooltip]="'Flagged'|translate" bizdocTooltipPosition="end" [bizdocTooltipDisabled]="!collapsed">star_border</mat-icon>
+    <span matLine>{{'Flagged'|translate}}</span>
+  </mat-list-item>
+  <mat-divider></mat-divider>
+  <mat-list-item *ngFor="let f of folders" [attr.data-help]="'folder-'+f.name" (click)="change.emit()"
+                 [attr.aria-label]="f.title" [slotRouterLink]="['mailbox/f', f.name]" slotRouterLinkActive="active">
+    <mat-icon matListIcon [bizdocTooltip]="f.title" bizdocTooltipPosition="end" [bizdocTooltipDisabled]="!collapsed">{{f.icon}}</mat-icon>
+    <span matLine class="folder-title">
+      <span>
+        {{f.title}}
+      </span>
+      <span *ngIf="f.count">
+        {{f.count}}
+      </span>
+    </span>
+  </mat-list-item>
+</mat-nav-list>

package/src/lib/browse/folders-menu.component.scss

@@ -0,0 +1,15 @@
+.folder-title {
+  display: flex !important;
+  -ms-flex-direction: row;
+  -webkit-flex-direction: row;
+  flex-direction: row;
+
+   :first-child {
+    -ms-flex: 1 auto;
+    -webkit-flex: 1 auto;
+    flex: 1 auto;
+  }
+
+  .folder-count {
+  }
+}

package/src/lib/browse/folders-menu.component.ts

@@ -0,0 +1,42 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CdkDragDrop, CdkDrag } from '@angular/cdk/drag-drop';
+import { Folder, HeaderModel } from '../core/models';
+import { SessionService } from '../core/session.service';
+import { MailboxService } from '../core/mailbox.service';
+import { } from '../core/animations';
+
+@Component({
+  selector: 'bizdoc-folders-menu',
+  templateUrl: './folders-menu.component.html',
+  styleUrls: ['./folders-menu.component.scss'],
+  animations: [
+  ],
+})
+/** folders slot component*/
+export class FoldersMenuComponent {
+  @Input() collapsed: boolean;
+  @Output() readonly change = new EventEmitter();
+  readonly folders: Folder[];
+  constructor(private _session: SessionService,
+    private _mailbox: MailboxService) {
+    this.folders = this._session.profile.folders.filter(f=> f.name !== 'fav');
+  }
+  canDrop = (evt: CdkDrag<HeaderModel>) => {
+    const folder = this._session.profile.folders.find(f => f.name === (evt.data as HeaderModel).folderId);
+    //folder.group;
+    return true;
+  };
+  /**
+   * Mail drop 
+   * @param evt
+   */
+  drop(evt: CdkDragDrop<HeaderModel>) {
+    const folder = this._session.profile.folders[evt.currentIndex], item = evt.item.data as HeaderModel;
+    if (item.folderId !== folder.name) {
+      const originalFolder = this._session.profile.folders.find(f => f.name === evt.item.data.folderId);
+      if (originalFolder.group === folder.group)
+        // move and refresh
+        this._mailbox.move(item.id, folder.name).subscribe();
+    }
+  }
+}

package/src/lib/chat/_chat-theme.scss

@@ -0,0 +1,95 @@
+@mixin chat-theme($theme) {
+  $primary: mat.get-color-from-palette($theme, primary);
+  $accent: mat.get-color-from-palette($theme, accent);
+  $foreground: mat.get-color-from-palette($theme, foreground);
+  $background: mat.get-color-from-palette($theme, background);
+
+  $dragging-border-color:  mat.get-color-from-palette($foreground, divider);
+  $panel-background-color:  mat.get-color-from-palette($background, dialog);
+  $sender-text-color:  mat.get-color-from-palette($foreground, text);
+  $sender-background-color: #fafafa;
+
+  .chat-conversation {
+    .chat-item {
+      position: relative;
+
+      img {
+        max-width: 310px;
+        cursor: pointer;
+      }
+
+      .chat-text {
+        padding: 9px;
+        overflow-wrap: break-word;
+      }
+
+      .chat-time {
+        font-size: small;
+      }
+
+      .chat-info {
+        display: flex;
+        -ms-flex-direction: row;
+        -webkit-flex-direction: row;
+        flex-direction: row;
+      }
+    }
+
+    .chat-watermark {
+      place-content: center flex-end;
+      text-align: end;
+      width: 100%;
+
+      .mat-icon {
+        font-size: 21px;
+        width: 21px;
+        height: 21px;
+      }
+    }
+  }
+
+  .chat-typing {
+    margin-left: 2px;
+    margin-right: 2px;
+    font-size: small;
+    text-transform: lowercase
+  }
+
+  .chat-item {
+    &:not(.you) {
+      .chat-text {
+        color: $sender-text-color;
+        background-color: $sender-background-color;
+        border-radius: 5px 5px;
+        margin: 5px 0 0;
+
+        &:after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 50%;
+          width: 0;
+          height: 0;
+          border: 15px solid transparent;
+          border-top-color: $sender-background-color;
+          border-bottom: 0;
+          border-left: 0;
+          margin-bottom: 1px;
+        }
+      }
+    }
+  }
+
+  [dir=rtl] .chat-item {
+    &:not(.you) {
+      .chat-text {
+        &:after {
+          left: auto;
+          right: 50%;
+          border-right: 0;
+          border-left: 15px solid transparent;
+        }
+      }
+    }
+  }
+}

package/src/lib/chat/chat-info.ts

@@ -0,0 +1,74 @@
+import { Injectable, Inject } from '@angular/core';
+import { Subject } from 'rxjs';
+import { BIZDOC_CONFIG, BizDocConfig, ChatSettings, ChatLauncherFn } from '../core/configuration';
+import { isMobile, isString } from '../core/functions';
+import { Contact, UserInfo } from '../core/models';
+import { SessionService } from '../core/session.service';
+import { RouterImpl } from '../core/router';
+
+export interface ChatOpenEvent {
+  contact: Contact;
+  text?: string;
+  image?: string;
+  resource?: { [key: string]: any };
+}
+
+@Injectable({ providedIn: 'root' })
+export class ChatInfo {
+  private _config: ChatSettings | boolean;
+  private _isMobile = isMobile();
+  _open$ = new Subject<string>();
+  constructor(
+    @Inject(BIZDOC_CONFIG) config: BizDocConfig,
+    private _router: RouterImpl,
+    private _session: SessionService
+  ) {
+    this._config = config.chating;
+  }
+  /**
+   *
+   * @param person
+   */
+  format(person: UserInfo): string {
+    if (this._config && isString((this._config as ChatSettings).app)) {
+      const { app } = this._config as ChatSettings;
+      return `<a href="${(app as string).formatArgs(person.id)}">${name}</a>`;
+    }
+    else if (this._config !== false)
+      return `<a data-info="${person.id}">${person.name}</a>`;
+    return person.name;
+  }
+  /**
+   *
+   * @param userId
+   */
+  open(userId: string, options?: { /*text?: string, resource?: {[key: string]: any}*/ mode?: 'room' | 'full',
+    group?: string
+  }) {
+    let contact = this._session.profile.contacts.find(c => c.id === userId);
+    if (!contact) {
+      contact = {
+        id: userId,
+        accepted: false,
+        time: new Date().toJSON() as any,
+        count: 0
+      } as Contact;
+      this._session.profile.contacts.push(contact);
+    }
+
+    else if (contact.forgotten)
+      contact.forgotten = undefined;
+
+    if (this._config && (this._config as ChatSettings).app)
+      ((this._config as ChatSettings).app as ChatLauncherFn)(userId);
+    else if (this._isMobile)
+      this._open$.next(contact.id);
+    else if (!options || options.mode === 'room')
+      this._router.navigate(['chatroom', contact.id], {
+       // group: options ? options.group : null
+      });
+    else {
+      this._router.navigate(['contacts/c', contact.id]);
+    }
+  }
+}

package/src/lib/chat/chat-pool.component.exp.ts

@@ -0,0 +1,117 @@
+import { Component } from '@angular/core';
+import { CdkDragEnd } from '@angular/cdk/drag-drop';
+
+import { playAudio } from '../core/functions';
+import { Contact } from '../core/models';
+import { HubService } from '../core/hub.service';
+import { SessionService } from '../core/session.service';
+import { ConversationComponent } from './conversation.component';
+
+/** */
+class Chat {
+  constructor(public info: Contact) { }
+  minimize?: boolean;
+  position?: { x: number; y: number };
+}
+
+@Component({
+  templateUrl: './chat-pool.component.html',
+  styleUrls: ['./chat-pool.component.scss']
+})
+export
+  class ChatPoolComponent {
+  readonly items?: Chat[] = [];
+  readonly comp = ConversationComponent;
+  constructor(
+    private _session: SessionService,
+    messaging: HubService
+  ) {
+    setTimeout(() => this._restore(), 500);
+
+    messaging.chat$.subscribe(e => {
+      if (!this.items.find(c => c.info.id !== e.contactId))
+        playAudio('notification_simple-01');
+    });
+  }
+
+  private _restore() {
+    const cookie = localStorage.getItem('chat');
+    cookie && cookie.split(',').forEach(id => {
+      const contact = this._session.profile.contacts.find(c => c.id === id);
+      if (contact) {
+        const args = this._args('chat-' + id);
+        const item = new Chat(contact);
+        item.position = { x: Math.min(args.x, window.innerWidth - 450), y: args.y < 0 ? 0 : Math.min(args.y, window.innerHeight - 100) };
+        item.minimize = args.minimize === 1;
+        this.items.push(item);
+      }
+    });
+  }
+
+  private _args(id: string) {
+    const cookie = localStorage.getItem(id);
+    const args = {} as any;
+    cookie && cookie.split('&').forEach(p => {
+      const param = p.split('=');
+      args[param[0]] = parseInt(param[1]);
+    });
+    return args;
+  }
+
+  open(contact: Contact, position?: { x: number; y: number }) {
+    const comp = this.items.find(c => c.info.id === contact.id);
+
+    if (comp) {
+      //comp.focus();
+      return;
+    }
+    const item = new Chat(contact);
+
+    item.position = position || this._position();
+
+
+    this.items.push(item);
+
+    this._save();
+  }
+
+  private _position() {
+    const args = this._args('chat-position');
+    if (args.x) return { x: args.x, y: args.y };
+
+    let max = 0, min = 0;
+
+    for (let i = 0; i < this.items.length; i++) {
+      let x = this.items[i].position.x;
+      min = min !== 0 ? Math.min(x, min) : x;
+      max = Math.max(x, max);
+    }
+    return { x: Math.min(window.innerWidth - 450, max + 350), y: 0 };
+  }
+
+  private _save() {
+    localStorage.setItem('chat', this.items.map(c => c.info.id).join(','));
+  }
+  drop(item: Chat, evt: CdkDragEnd) {
+    const { x, y } = evt.distance;
+    const { x: x0, y: y0 } = item.position;
+    item.position = { x: x0 + x, y: y0 + y };
+    this._store(item);
+  }
+  private _delete(item: Chat) {
+    localStorage.removeItem('chat-' + item.info.id);
+    localStorage.setItem('chat-position', `x=${item.position.x}&y=${item.position.y}`);
+  }
+  private _store(item: Chat) {
+    localStorage.setItem('chat-' + item.info.id, `x=${item.position.x}&y=${item.position.y}&minimize=${item.minimize ? 1 : 0}`);
+  }
+  close(item: Chat, evt: Event) {
+    this._delete(item);
+    this.items.remove(item);
+    this._save();
+  }
+  minimize(item: Chat, evt: Event) {
+    item.minimize = !item.minimize;
+    this._store(item);
+  }
+}

package/src/lib/chat/chat-pool.component.html

@@ -0,0 +1,13 @@
+<div *ngFor="let c of items"
+     [cdkDragFreeDragPosition]="c.position" cdkDrag cdkDragBoundary="body" (cdkDragEnded)="drop(c, $event)"
+     [class.minimize]="c.minimize"
+     class="chat-panel">
+  <div cdkDragHandle>
+    <div class="chat-tools">
+      <span class="divider"></span>
+      <button (click)="minimize(c, $event)" mat-icon-button [bizdocTooltip]="'Minimize' | translate"><mat-icon>{{c.minimize? 'maximize': 'minimize'}}</mat-icon></button>
+      <button (click)="close(c, $event)" mat-icon-button [bizdocTooltip]="'Close' | translate"><mat-icon>close</mat-icon></button>
+    </div>
+  </div>
+  <bizdoc-chat-conversation [contact]="c.info" class="container"></bizdoc-chat-conversation>
+</div>

package/src/lib/chat/chat-pool.component.scss

@@ -0,0 +1,10 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  flex: 1 auto;
+  overflow-y: auto;
+}
+
+.minimize .container {
+  display: none
+}

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

@@ -0,0 +1,6 @@
+<ng-container *ngIf="contact; else contacts">
+  <bizdoc-chat-conversation [contact]="contact" fxFlex></bizdoc-chat-conversation>
+</ng-container>
+<ng-template #contacts>
+  <bizdoc-contacts (selected)="selected($event)"></bizdoc-contacts>
+</ng-template>

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

@@ -0,0 +1,8 @@
+:host {
+  display: flex;
+  -ms-flex-direction: column;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+  height:100%;
+  width : 300px
+}

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

@@ -0,0 +1,18 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+import { Contact } from '../core/models';
+
+@Component({
+  selector: 'bizdoc-chat',
+  templateUrl: './chat.mobile.component.html',
+  styleUrls: ['./chat.mobile.component.scss']
+})
+export
+  class ChatComponent {
+  @Input() contact: Contact;
+  @Output() contactChange = new EventEmitter<Contact>();
+  selected(contact: Contact) {
+    this.contact = contact;
+    this.contactChange.emit(contact);
+  }
+}