@bizdoc/core 1.14.8 → 1.14.9

package/src/lib/notifications/types/long-running-task.notification.ts

@@ -0,0 +1,23 @@
+import { Component, Inject, OnInit, HostListener } from "@angular/core";
+import { NOTIFICATION_DATA } from "./notification-base";
+import { SessionService } from "../../core/session.service";
+import { Report } from "../../core/models";
+import { RouterImpl } from "../../core/router";
+
+@Component({ template: `<span></span>` })
+export
+  class LongRunningTaskNotification implements OnInit {
+  report: Report;
+  ngOnInit(): void {
+    this.report = this._session.profile.reports.find(r => r.name === this.notification.report);
+  }
+  @HostListener('click', ['$event'])
+  open(e: MouseEvent) {
+    this._router.navigate(['reports', this.notification.report]);
+  }
+  constructor(@Inject(NOTIFICATION_DATA) public notification: ReportTask, private _session: SessionService, private _router: RouterImpl) { }
+}
+interface ReportTask extends Notification {
+  report: string;
+  value: number;
+}

package/src/lib/notifications/types/notification-base.ts

@@ -0,0 +1,37 @@
+import { InjectionToken, HostListener, Directive } from "@angular/core";
+import { Notification, UserInfo } from "../../core/models";
+import { SessionService } from "../../core/session.service";
+import { TranslateService } from "../../core/translate.service";
+import { ChatInfo } from "../../chat/chat-info";
+import { OpenPolicy } from "../../core/configuration";
+import { RouterImpl } from "../../core/router";
+
+export const NOTIFICATION_DATA = new InjectionToken<Notification>('notification');
+
+@Directive()
+export abstract class NotificationBase {
+  constructor(public notification: Notification,
+    private _router: RouterImpl,
+    protected _session: SessionService,
+    protected _translate: TranslateService,
+    private _chat: ChatInfo) {
+  }
+  protected _formatUserElement(person: UserInfo) {
+    if (person.id === this._session.userId)
+      return this._translate.get('You');
+    return this._chat.format(person);
+  }
+  @HostListener('click', ['$event'])
+  open(e: MouseEvent) {
+    const userId = (e.srcElement as HTMLElement).getAttribute('data-info');
+    if (userId)
+      this._chat.open(userId);
+    else if (this.notification.recipientId) 
+        this._router.navigate(['mailbox/i', this.notification.recipientId.encodeId()],
+          {
+            policy: OpenPolicy.Tab | OpenPolicy.Expandable
+          });
+  }
+
+}
+

package/src/lib/notifications/types/nudge.notification.ts

@@ -0,0 +1,32 @@
+import { Component, OnInit, Inject } from "@angular/core";
+import dayjs from 'dayjs';
+import { ChatInfo } from "../../chat/chat-info";
+import { Notification } from "../../core/models";
+import { RouterImpl } from "../../core/router";
+import { SessionService } from "../../core/session.service";
+import { TranslateService } from "../../core/translate.service";
+import { NotificationBase, NOTIFICATION_DATA } from "./notification-base";
+
+@Component({
+  template: `<span [innerHTML]='"NudgeNotify" | translate : notification.number : expire.toNow() | sanitizeHtml'></span>`
+})
+export
+  class NudgeNotification extends NotificationBase implements OnInit {
+  message: string;
+  expire: dayjs.Dayjs;
+  ngOnInit(): void {
+    this.expire = dayjs(this.notification.expire);
+  }
+  constructor(
+    router: RouterImpl,
+    translate: TranslateService,
+    session: SessionService,
+    chat: ChatInfo,
+    @Inject(NOTIFICATION_DATA) public notification: Nudge) {
+    super(notification, router, session, translate, chat)
+  }
+}
+interface Nudge extends Notification {
+  expire: Date;
+  number: string;
+}

package/src/lib/notifications/types/state-changed.notification.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit, Inject } from "@angular/core";
+import { RouterImpl } from "../../core/router";
+import { SessionService } from "../../core/session.service";
+import { NotificationBase, NOTIFICATION_DATA } from "./notification-base";
+import { Notification, Form } from "../../core/models";
+import { TranslateService } from "../../core/translate.service";
+import { ChatInfo } from "../../chat/chat-info";
+
+@Component({ template: `<span [innerHTML]="'StateChangedNotify' | translate : form.title : notification.number : (notification.state | state : 'past' | lowercase) | sanitizeHtml"></span>` })
+export
+  class StateChangedNotification extends NotificationBase implements OnInit {
+  form: Form;
+  ngOnInit(): void {
+    this.form = this._session.profile.forms.find(f => f.name === this.notification.form);
+  }
+  constructor(@Inject(NOTIFICATION_DATA) public notification: StateChanged,
+    session: SessionService,
+    router: RouterImpl,
+    translate: TranslateService, chat: ChatInfo) {
+    super(notification, router, session, translate, chat)
+  }
+}
+interface StateChanged extends Notification {
+  number: string;
+  form: string;
+  state: string;
+}

package/src/lib/notifications/types/tagged.notification.ts

@@ -0,0 +1,46 @@
+import { Component, OnInit, Inject } from "@angular/core";
+import { NOTIFICATION_DATA, NotificationBase } from "./notification-base";
+import { Notification } from "../../core/models";
+import { AccountService } from "../../core/account.service";
+import { TranslateService } from "../../core/translate.service";
+import { SessionService } from "../../core/session.service";
+import { ChatInfo } from "../../chat/chat-info";
+import { RouterImpl } from "../../core/router";
+
+/** */
+@Component({
+  template: `<ng-container *ngIf='message'>
+  <span [innerHTML]='message | sanitizeHtml'></span>
+</ng-container>`
+})
+export
+  class TaggedNotification extends NotificationBase implements OnInit {
+  names?: string;
+  message: string;
+  ngOnInit(): void {
+    const form = this._session.profile.forms.find(f => f.name == this.notification.form);
+    if (this.notification.who === this._session.userId)
+      this.message = this._translate.get('TaggedYourselfNotify',
+        form.title,
+        `<a>${this.notification.number}</a>`);
+    else this._accounts.get(this.notification.who).subscribe(u => {
+      this.message = this._translate.get(`Tagged${u.gender || ''}Notify`,
+        this._formatUserElement(u),
+        form.title,
+        `<a>${this.notification.number}</a>`);
+    });
+  }
+  constructor(@Inject(NOTIFICATION_DATA) public notification: Tagged,
+    private _accounts: AccountService,
+    translate: TranslateService,
+    router: RouterImpl,
+    session: SessionService,
+    chat: ChatInfo) {
+    super(notification, router, session, translate, chat);
+  }
+}
+interface Tagged extends Notification {
+  who: string;
+  form: string;
+  number: string;
+}

package/src/lib/notifications/types/text.notification.ts

@@ -0,0 +1,13 @@
+import { Component, OnInit, Inject } from "@angular/core";
+import { NOTIFICATION_DATA } from "./notification-base";
+
+@Component({ template: `<span [innerHTML]="notification.text"></span>` })
+export
+  class TextNotification implements OnInit {
+  ngOnInit(): void {
+  }
+  constructor(@Inject(NOTIFICATION_DATA) public notification: Text) { }
+}
+interface Text {
+  text: string;
+}

package/src/lib/notifications/types/upcoming-event.notification.ts

@@ -0,0 +1,25 @@
+import { Component, OnInit, Inject, HostListener } from "@angular/core";
+import dayjs from 'dayjs';
+import { Notification } from "../../core/models";
+import { RouterImpl } from "../../core/router";
+import { NOTIFICATION_DATA } from "./notification-base";
+
+@Component({
+  template: `<span [bizdocTooltip]="notification.starting | amCalendar" [innerHTML]="'UpcomingEventNotify' | translate : notification.number : duration.fromNow() | sanitizeHtml"></span>`
+})
+export
+  class UpcomingEventNotification implements OnInit {
+  duration: dayjs.Dayjs;
+  ngOnInit(): void {
+    this.duration = dayjs(this.notification.starting);
+  }
+  @HostListener('click', ['$event'])
+  open(e: MouseEvent) {
+    this._router.navigate(['schedule'], { queryParams: { date: new Date(this.notification.starting).valueOf().encodeId() } });
+  }
+  constructor(@Inject(NOTIFICATION_DATA) public notification: UpcommingEvent, private _router: RouterImpl) { }
+}
+interface UpcommingEvent extends Notification {
+  number: string;
+  starting: Date;
+}

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

@@ -0,0 +1,148 @@
+<form [formGroup]="form" autocomplete="off">
+  <mat-accordion>
+    <mat-expansion-panel #notifications>
+      <mat-expansion-panel-header>
+        <mat-panel-title>
+          {{'Notifications' | translate}}
+        </mat-panel-title>
+        <mat-panel-description>
+          <!--<mat-icon>notifications</mat-icon>-->
+        </mat-panel-description>
+      </mat-expansion-panel-header>
+      <div formGroupName="notifications" fxLayout="column">
+        <div fxLayout="row">
+          <mat-slide-toggle formControlName="active">{{'Active' | translate}}</mat-slide-toggle>
+          <span class="divider"></span>
+          <button mat-icon-button (click)="toggleSound()" [bizdocTooltip]="'Sound'|translate"><mat-icon>{{options.notifications.sound ? 'volume_up' : 'volume_off'}}</mat-icon></button>
+        </div>
+        <br />
+        <mat-slide-toggle formControlName="myDocumentStateChange">{{'MyStateChange' | translate}}</mat-slide-toggle>
+        <mat-slide-toggle formControlName="anyDocumentStateChange">{{'AnyStateChange' | translate}}</mat-slide-toggle>
+        <mat-slide-toggle formControlName="commentMyDocument">{{'CommentMyDocument' | translate}}</mat-slide-toggle>
+        <mat-slide-toggle formControlName="commentAnyDocument">{{'CommentAnyDocument' | translate}}</mat-slide-toggle>
+        <mat-slide-toggle formControlName="likes" [style.display]="voating?'':'none'">{{'LikedComment' | translate}}</mat-slide-toggle>
+        <mat-slide-toggle formControlName="tagged">{{'TaggedInComments' | translate}}</mat-slide-toggle>
+        <mat-slide-toggle formControlName="upcomingEvents">{{'UpcomingEvents' | translate}}</mat-slide-toggle>
+        <mat-slide-toggle formControlName="cubeAnomaly">{{'CubeAnomaly' | translate}}</mat-slide-toggle>
+      </div>
+    </mat-expansion-panel>
+    <mat-expansion-panel #emails>
+      <mat-expansion-panel-header>
+        <mat-panel-title>
+          {{'Emails' | translate}}
+        </mat-panel-title>
+        <mat-panel-description>
+          <!--<mat-icon>alternate_email</mat-icon>-->
+        </mat-panel-description>
+      </mat-expansion-panel-header>
+      <div formGroupName="emails" fxLayout="column">
+        <mat-slide-toggle formControlName="active">{{'Active' | translate}}</mat-slide-toggle>
+        <br />
+        <mat-slide-toggle formControlName="mail">{{'Mails' | translate}}</mat-slide-toggle>
+        <mat-slide-toggle formControlName="chat">{{'Conversations' | translate}}</mat-slide-toggle>
+        <mat-slide-toggle formControlName="notifications">{{'EmailNotifications' | translate}}</mat-slide-toggle>
+        <mat-slide-toggle formControlName="events">{{'AlarmEvents' | translate}}</mat-slide-toggle>
+      </div>
+    </mat-expansion-panel>
+    <mat-expansion-panel #outOfOffice>
+      <mat-expansion-panel-header>
+        <mat-panel-title>
+          {{'OutOfOffice' | translate}}
+        </mat-panel-title>
+        <mat-panel-description>
+          <!--<mat-icon>trending_flat</mat-icon>-->
+          <!--{{'OutOfOfficeTip' | translate}}-->
+        </mat-panel-description>
+      </mat-expansion-panel-header>
+      <div formGroupName="outOfOffice" fxLayout="column">
+        <mat-slide-toggle formControlName="active">{{'Active' | translate}}</mat-slide-toggle>
+        <br />
+        <mat-form-field fxFlex>
+          <input matInput [formControl]="substitueId" type="search" [matAutocomplete]="sauto" #substitueInput
+                 [placeholder]="'Associate' | translate" [required]="form.value.outOfOffice.active" />
+          <mat-autocomplete #sauto="matAutocomplete" [displayWith]="display"
+                            (optionSelected)="setSubstitute($event)">
+            <mat-option *ngFor="let u of susers$ | async" [value]="u">
+              <span>{{u.name}}</span>
+            </mat-option>
+          </mat-autocomplete>
+          <mat-hint>{{'OutOfOfficeTip' | translate}}</mat-hint>
+        </mat-form-field>
+        <div>
+          <mat-form-field>
+            <input matInput [matDatepicker]="from" formControlName="from" placeholder="{{'From'| translate}}" />
+            <mat-datepicker-toggle [for]="from" matSuffix></mat-datepicker-toggle>
+            <mat-datepicker #from></mat-datepicker>
+          </mat-form-field>
+          &nbsp;
+          <mat-form-field>
+            <input matInput [matDatepicker]="to" formControlName="to" [min]="form.value.outOfOffice?.from" placeholder="{{'To'| translate}}" />
+            <mat-datepicker-toggle [for]="to" matSuffix></mat-datepicker-toggle>
+            <mat-datepicker #to></mat-datepicker>
+          </mat-form-field>
+        </div>
+      </div>
+    </mat-expansion-panel>
+    <mat-expansion-panel #grantAccess>
+      <mat-expansion-panel-header>
+        <mat-panel-title>
+          {{'GrantAccess' | translate}}
+        </mat-panel-title>
+        <mat-panel-description>
+          <!--<mat-icon>account_circle</mat-icon>-->
+        </mat-panel-description>
+      </mat-expansion-panel-header>
+      <div formGroupName="grantAccess" class="grant-section">
+        <mat-slide-toggle formControlName="active">{{'Active' | translate}}</mat-slide-toggle>
+        <mat-form-field>
+          <mat-chip-list #grantList [attr.aria-label]="" [disabled]="!form.value.grantAccess.active">
+            <mat-chip *ngFor="let u of form.value.grantAccess.users || []"
+                      (removed)="removeGrant(u)">
+              {{u | userName | async}}
+              <mat-icon matChipRemove>cancel</mat-icon>
+            </mat-chip>
+            <input [formControl]="gusers" placeholder="{{'Users'| translate}}"
+                   #grantInput
+                   [matAutocomplete]="grantAuto"
+                   [matChipInputFor]="grantList"
+                   [matChipInputSeparatorKeyCodes]="separatorKeysCodes">
+          </mat-chip-list>
+          <mat-autocomplete #grantAuto="matAutocomplete" (optionSelected)="addGrant(grantInput, $event)">
+            <mat-option *ngFor="let u of gusers$ | async" [value]="u.id">
+              {{u.name}}
+              <span *ngIf="u.email">&nbsp; - {{u.email}}</span>
+            </mat-option>
+          </mat-autocomplete>
+          <mat-hint>{{'GrantTip' | translate}}</mat-hint>
+        </mat-form-field>
+      </div>
+    </mat-expansion-panel>
+    <mat-expansion-panel #preferences>
+      <mat-expansion-panel-header>
+        <mat-panel-title>
+          {{'Preferences' | translate}}
+        </mat-panel-title>
+        <mat-panel-description>
+          <!--<mat-icon></mat-icon>-->
+        </mat-panel-description>
+      </mat-expansion-panel-header>
+      <div fxLayout="column">
+        <mat-form-field>
+          <mat-chip-list #chips [selectable]="false" multiple>
+            <mat-chip *ngFor="let item of form.value.tags"
+                      [removable]="true" (removed)="removeTag(item)">
+              {{item}}
+              <mat-icon matChipRemove>cancel</mat-icon>
+            </mat-chip>
+            <input [placeholder]="'Tags'|translate"
+                   [matChipInputFor]="chips"
+                   [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+                   [matChipInputAddOnBlur]="true"
+                   (matChipInputTokenEnd)="addTag($event)">
+          </mat-chip-list>
+        </mat-form-field>
+        <mat-slide-toggle [formControl]="aRIA">{{'ARIA' | translate}}</mat-slide-toggle>
+      </div>
+    </mat-expansion-panel>
+  </mat-accordion>
+</form>

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

@@ -0,0 +1,19 @@
+ /*.mat-expansion-panel-header-title,
+ .mat-expansion-panel-header-description {
+  flex-basis: 0;
+}
+
+ .mat-expansion-panel-header-description {
+  justify-content: space-between;
+  align-items: center;
+}*/
+
+ :host{
+   max-width: 80vw;
+
+ }
+
+.grant-section {
+  display: flex;
+  flex-direction: column;
+}

package/src/lib/options/options.component.ts

@@ -0,0 +1,262 @@
+import { Component, OnInit, OnDestroy, ViewChild, InjectionToken, Inject } from '@angular/core';
+import { AbstractControl, FormBuilder, FormGroup } from '@angular/forms';
+import { Subject, Observable, merge, of } from 'rxjs';
+import { debounceTime, takeUntil, filter, map, switchMap, tap } from 'rxjs/operators';
+import { OverlayRef } from '@angular/cdk/overlay';
+import { MatExpansionPanel } from '@angular/material/expansion';
+import { MatChipInput, MatChipInputEvent } from '@angular/material/chips';
+import { COMMA, ENTER, SEMICOLON } from '@angular/cdk/keycodes';
+import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { BIZDOC_CONFIG, BizDocConfig } from '../core/configuration';
+import { isString } from '../core/functions';
+import { Options, UserInfo } from '../core/models';
+import { AccountService } from '../core/account.service';
+import { SessionService } from '../core/session.service';
+import { PromptService } from '../core/prompt.service';
+import { MatInput } from '@angular/material/input';
+
+export type OptionType = 'notifications' | 'outofoffice' | 'emails' | 'grantaccess';
+
+export const OPTION_PANEL = new InjectionToken<OptionData>('options');
+
+interface OptionData {
+  open: OptionType;
+}
+
+@Component({
+  selector: 'bizdoc-options',
+  templateUrl: './options.component.html',
+  styleUrls: ['./options.component.scss']
+})
+/** options component*/
+export class OptionsComponent implements OnInit, OnDestroy {
+  private readonly _destroy = new Subject<void>();
+  private _requiredValidator = (control: AbstractControl): { [key: string]: any } | null => {
+    const parent = (control.parent as FormGroup);
+    if (parent && parent.controls['active'].value && !control.value) return {
+      required: true
+    }
+  }
+  @ViewChild('substitueInput', { read: MatInput }) substitueInput: MatInput;
+  @ViewChild('grantInput', { read: MatChipInput }) grantInput: MatChipInput;
+  readonly language = this._fb.control(this._session.language);
+  readonly aRIA = this._fb.control(this._session.aria);
+  readonly languages = this._session.languages;
+  readonly gusers = this._fb.control([]);
+  readonly substitueId = this._fb.control(null);
+  readonly form = this._fb.group({
+    notifications: this._fb.group({
+      active: this._fb.control(false),
+      likes: this._fb.control(false),
+      commentMyDocument: this._fb.control(false),
+      commentAnyDocument: this._fb.control(false),
+      upcomingEvents: this._fb.control(false),
+      tagged: this._fb.control(false),
+      anyDocumentStateChange: this._fb.control(false),
+      myDocumentStateChange: this._fb.control(false),
+      cubeAnomaly: this._fb.control(false),
+      sound: this._fb.control(false),
+    }),
+    tags: this._fb.control(null),
+    emails: this._fb.group({
+      active: this._fb.control(false),
+      mail: this._fb.control(false),
+      chat: this._fb.control(false),
+      notifications: this._fb.control(false),
+      events: this._fb.control(false)
+    }),
+    outOfOffice: this._fb.group({
+      active: this._fb.control(false),
+      substitueId: this._fb.control(null, this._requiredValidator),
+      from: this._fb.control(null),
+      to: this._fb.control(null)
+    }),
+    grantAccess: this._fb.group({
+      active: this._fb.control(false),
+      users: this._fb.control(null, this._requiredValidator)
+    })
+  });
+  susers$: Observable<UserInfo[]>;
+  gusers$: Observable<UserInfo[]>;
+  voating: boolean;
+  options: Options;
+  readonly separatorKeysCodes: number[] = [ENTER, COMMA, SEMICOLON];
+  @ViewChild('outOfOffice', { read: MatExpansionPanel, static: true }) outOfOffice: MatExpansionPanel;
+  @ViewChild('notifications', { read: MatExpansionPanel, static: true }) notifications: MatExpansionPanel;
+  /** options ctor */
+  constructor(@Inject(OPTION_PANEL) private _option: OptionData, overlayRef: OverlayRef, private _fb: FormBuilder,
+    private _accounts: AccountService, private _sb: PromptService,
+    private _session: SessionService,
+    @Inject(BIZDOC_CONFIG) config: BizDocConfig) {
+    this.voating = !config.comments || config.comments.voting !== false;
+    merge(overlayRef.keydownEvents().pipe(filter(k => k.keyCode === 27)), overlayRef.backdropClick()).
+      subscribe(() => overlayRef.dispose());
+  }
+  ngOnInit(): void {
+    this.aRIA.valueChanges.pipe(takeUntil(this._destroy)).
+      subscribe(v => this._session.aria = v);
+    this.language.valueChanges.subscribe(v => this._session.language = v);
+    const outOfOffice = this.form.controls['outOfOffice'] as FormGroup;
+    const grantAccess = this.form.controls['grantAccess'] as FormGroup;
+    const notifications = this.form.controls['notifications'] as FormGroup;
+    const emails = this.form.controls['emails'] as FormGroup;
+    const options = this.options = this._session.profile.options;
+    this.form.patchValue(options, { emitEvent: false });
+    if (!options.notifications.active)
+      this._toggle(notifications, false, 'likes',
+        'commentMyDocument',
+        'commentAnyDocument',
+        'upcomingEvents',
+        'tagged',
+        'anyDocumentStateChange',
+        'myDocumentStateChange',
+        'cubeAnomaly');
+    if (!options.emails.active)
+      this._toggle(emails, false, 'mail',
+        'chat',
+        'notifications',
+        'events');
+    if (!options.grantAccess.active)
+      this.gusers.disable();
+    if (!options.outOfOffice.active) {
+      this.substitueId.disable();
+      this._toggle(outOfOffice, false, 'from', 'to');
+    }
+    else if (!options.outOfOffice.from)
+      this._toggle(outOfOffice, false, 'to');
+    // change
+    notifications.controls['active'].valueChanges.pipe(takeUntil(this._destroy)).
+      subscribe(active =>
+        this._toggle(notifications, active, 'likes',
+          'commentMyDocument',
+          'commentAnyDocument',
+          'upcomingEvents',
+          'tagged',
+          'anyDocumentStateChange',
+          'myDocumentStateChange',
+          'cubeAnomaly'));
+    emails.controls['active'].valueChanges.pipe(takeUntil(this._destroy)).
+      subscribe(active => this._toggle(emails, active, 'mail',
+        'chat',
+        'notifications',
+        'events'));
+    grantAccess.controls['active'].valueChanges.pipe(takeUntil(this._destroy)).
+      subscribe(active => {
+        if (active) {
+          this.gusers.enable();
+          this.grantInput.focus();
+        }
+        else this.gusers.enable();
+      });
+    outOfOffice.controls['active'].valueChanges.pipe(takeUntil(this._destroy)).
+      subscribe(active => {
+        if (active) {
+          this.substitueId.enable();
+          this.substitueInput.focus();
+        }
+        else
+          this.substitueId.disable();
+        this._toggle(outOfOffice, active, 'from');
+        this._toggle(outOfOffice, active && outOfOffice.controls['from'].value, 'to');
+      });
+    outOfOffice.controls['from'].valueChanges.pipe(takeUntil(this._destroy)).
+      subscribe(from =>
+        this._toggle(outOfOffice, from !== null, 'to'));
+    this.gusers$ = this.gusers.valueChanges.pipe(takeUntil(this._destroy),
+      filter(v => isString(v)),
+      debounceTime(100),
+      switchMap(v => this._accounts.findAll(v)),
+      map(r => {
+        const exclude = (grantAccess.value.users as string[])?.slice() || [];
+        exclude.push(this._session.profile.userId);
+        return r.filter(u => exclude.indexOf(u.id) < 0);
+      }));
+    this.susers$ = this.substitueId.valueChanges.pipe(takeUntil(this._destroy),
+      tap(v =>
+        !v && outOfOffice.controls['substitueId'].setValue(null)
+      ),
+      filter(v => isString(v)),
+      switchMap(v => this._accounts.findAll(v)),
+      map(r => r.filter(u => u.id !== this._session.profile.userId)));
+    if (options.outOfOffice.substitueId)
+      this._accounts.get(options.outOfOffice.substitueId).subscribe(u =>
+        this.substitueId.setValue(u, { emitEvent: false }));
+    if (this._option)
+      switch (this._option.open) {
+        case 'outofoffice':
+          this.outOfOffice.open();
+          break;
+        default:
+          this.notifications.open();
+      }
+    this.form.valueChanges.pipe(debounceTime(200), takeUntil(this._destroy)).subscribe(() =>
+      this.form.valid &&
+      this._session.update(this.form.getRawValue()).subscribe(undefined, () => this._sb.error()));
+  }
+  private _toggle(group: FormGroup, active: boolean, ...controls: string[]) {
+    controls.forEach(name => {
+      if (!active) group.controls[name].disable({ emitEvent: false });
+      else group.controls[name].enable({ emitEvent: false });
+    });
+  }
+  toggleSound() {
+    (this.form.controls['notifications'] as FormGroup).controls['sound'].setValue(!this.options.notifications.sound);
+  }
+  display = (item: UserInfo) => {
+    return item ? item.name : null;
+  }
+
+  addTag(event: MatChipInputEvent) {
+    const input = event.input;
+    const value = event.value;
+
+    // Add our fruit
+    if ((value || '').trim()) {
+      this.options.tags.push(value.trim());
+      this.form.patchValue({});
+    }
+
+    // Reset the input value 
+    if (input) {
+      input.value = '';
+    }
+  }
+  removeTag(tag: string) {
+    this.options.tags.remove(tag);
+    this.form.patchValue({});
+  }
+  /**
+   * 
+   * @param id
+   */
+  removeGrant(id: string): void {
+    const users = this.form.value.grantAccess.users as string[];
+    const index = users.indexOf(id);
+
+    if (index >= 0)
+      users.splice(index, 1);
+    this.form.patchValue({});
+  }
+  /**
+   * 
+   * @param inp
+   * @param event
+   */
+  addGrant(inp: HTMLInputElement, event: MatAutocompleteSelectedEvent): void {
+    const users = this.form.value.grantAccess.users as string[];
+    const id = event.option.value as string;
+    if (!users)
+      (this.form.controls['grantAccess'] as FormGroup).controls['users'].setValue([id]);
+    else
+      users.push(id);
+    inp.value = '';
+    this.form.patchValue({});
+  }
+  setSubstitute(event: MatAutocompleteSelectedEvent) {
+    (this.form.controls['outOfOffice'] as FormGroup).controls['substitueId'].setValue((event.option.value as UserInfo).id);
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}

package/src/lib/options/options.service.ts

@@ -0,0 +1,30 @@
+import { Injectable, Injector } from '@angular/core';
+import { OverlayRef, Overlay, OverlayConfig } from '@angular/cdk/overlay';
+import { Directionality } from '@angular/cdk/bidi';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { OptionType, OPTION_PANEL, OptionsComponent } from './options.component';
+
+@Injectable()
+export class OptionsService {
+  constructor(private _dir: Directionality, private _overlay: Overlay, private _injector: Injector) {
+  }
+  open(section?: OptionType) {
+    const position = this._overlay.position().global().centerHorizontally().centerVertically();
+    const config = new OverlayConfig({
+      positionStrategy: position,
+      hasBackdrop: true,
+      disposeOnNavigation: true,
+      backdropClass: 'cdk-overlay-dark-backdrop',
+      direction: this._dir.value
+    });
+
+    const oRef = this._overlay.create(config);
+    const injector = Injector.create([
+      { provide: OPTION_PANEL, useValue: { open: section } },
+      { provide: OverlayRef, useValue: oRef },
+    ], this._injector);
+    const portal = new ComponentPortal(OptionsComponent, null, injector);
+    oRef.attach(portal);
+    oRef.backdropClick().subscribe(() => oRef.dispose());
+  }
+}