@bizdoc/core 1.14.5 → 1.14.9

package/src/lib/admin/indices/manage-cube-index.component.ts

@@ -0,0 +1,155 @@
+import { Component, OnInit, ViewChild, TemplateRef, ViewContainerRef, OnDestroy, Inject } from "@angular/core";
+import { MatTableDataSource } from "@angular/material/table";
+import { FormGroup, FormControl, Validators } from "@angular/forms";
+import { Overlay, OverlayRef } from "@angular/cdk/overlay";
+import { merge, Subject } from "rxjs";
+import { filter, takeUntil } from "rxjs/operators";
+import { TemplatePortal } from "@angular/cdk/portal";
+import { Directionality } from "@angular/cdk/bidi";
+import { UtilityComponent } from "../../core/base";
+import { BizDoc } from "../../core/decorators";
+import { UtilityRef } from "../utility-ref";
+import { SessionService } from "../../core/session.service";
+import { CubeAxis } from "../../core/models";
+import { ESCAPE } from "@angular/cdk/keycodes";
+import { PromptService } from "../../core/prompt.service";
+import { ProgressBarMode } from "@angular/material/progress-bar";
+
+@Component({
+  styleUrls: ['./manage-cube-index.component.scss'],
+  templateUrl: './manage-cube-index.component.html'
+})
+@BizDoc({ selector: 'manage-cube-index' })
+export
+  class ManageCubeIndexUtility implements UtilityComponent<any, any>, OnInit, OnDestroy {
+  readonly CURRENCY_CODE: string;
+  dirty = false;
+  axes: CubeAxis[];
+  dataSource: MatTableDataSource<Index>;
+  readonly names: string[];
+  readonly displayedColumns = ['value', 'options'];
+  readonly form: FormGroup = new FormGroup({
+    value: new FormControl(0, Validators.required)
+  });
+  @ViewChild('editTmpl', { static: true }) editTmpl: TemplateRef<any>;
+  loading: ProgressBarMode;
+  private _data: Index[];
+  private _row: Index;
+  private _oRef: OverlayRef;
+  private readonly _destroy = new Subject<void>();
+  constructor(private _dir: Directionality,
+    @Inject(UtilityRef) private _ref: UtilityRef<boolean, Index[], Index[], any, Options>,
+    session: SessionService, private _vc: ViewContainerRef,
+    private _sb: PromptService,
+    private _overlay: Overlay) {
+    const { cube: name, axes: names } = _ref.options;
+    const cube = name ? session.profile.cubes.find(c => c.name === name) : session.profile.cubes[0];
+    this.CURRENCY_CODE = cube.currencyCode;
+    this.axes = cube.axes.filter(a => names ? names.indexOf(a.name) > -1 : !a.hidden);
+    this.names = cube.axes.map(a => a.name);
+    this.axes.forEach((a, i) => {
+      this.displayedColumns.splice(i, 0, a.name);
+      const ctrl = new FormControl(null, Validators.required);
+      this.form.addControl(a.name, ctrl);
+    });
+    this.form.valueChanges.pipe(takeUntil(this._destroy)).subscribe(v => {
+      if (!this.form.valid) return;
+      const axes = [];
+      this.axes.forEach(a => axes[this.names.indexOf(a.name)] = this.form.value[a.name] || null);
+      if (this._row) {
+        if (axes.join() === this._row.axes.join())
+          this._row.value = v.value;
+        else {
+          const row = this._find(axes);
+          if (row) {
+            this._row = row;
+            this.form.controls['value'].setValue(this._row.value, { emitEvent: false });
+          }
+          else
+            this._row.axes = axes;
+        }
+      }
+      else if (v.value) {
+        this._row = { value: v.value, axes };
+        this._data.push(this._row);
+        this.dataSource.filter = '';
+      }
+      this.dirty = true;
+    });
+    const oRef = this._oRef = this._overlay.create({
+      positionStrategy: this._overlay.position().global().centerHorizontally().centerVertically(),
+      backdropClass: 'cdk-overlay-transparent-backdrop',
+      direction: this._dir.value,
+      hasBackdrop: true,
+      panelClass: 'home-panel'
+    });
+    merge(oRef.backdropClick(), oRef.keydownEvents().pipe(filter(k => k.keyCode === ESCAPE))).pipe(takeUntil(this._destroy)).subscribe(() => oRef.detach());
+  }
+  private _find(axes: string[]): Index {
+    const n = this.names.length;
+    return this._data.find(index => {
+      for (let i = 0; i < n; i++)
+        if (axes[i] && axes[i] !== index.axes[i]) return false;
+      return true;
+    });
+  }
+  add() {
+    this._row = null;
+    const values = { value: 0 };
+    this.axes.forEach(a => values[a.name] = null);
+    this.form.patchValue(values, { emitEvent: false });
+    const portal = new TemplatePortal(this.editTmpl, this._vc);
+    this._oRef.attach(portal);
+  }
+  edit(item: Index) {
+    this._row = item;
+    const values = { value: item.value };
+    this.axes.forEach(a => values[a.name] = item.axes[this.names.indexOf(a.name)]);
+    this.form.patchValue(values, { emitEvent: false });
+    const portal = new TemplatePortal(this.editTmpl, this._vc);
+    this._oRef.attach(portal);
+  }
+  remove(index: Index, evt: Event) {
+    this._data.remove(index);
+    this.dataSource.filter = '';
+    evt.stopPropagation();
+  }
+  private _filter(axes: string[]) {
+    const n = axes.length;
+    return this._data.filter(index => {
+      for (let i = 0; i < n; i++)
+        if (this.axes[i] && axes[i] !== index.axes[i]) return false;
+      return true;
+    });
+  }
+  ngOnInit(): void {
+    this.loading = 'query';
+    this._ref.populate().subscribe(m => {
+      this._data = m;
+      this.dataSource = new MatTableDataSource(m);
+      this.loading = null;
+    });
+  }
+  save() {
+    this.loading = 'indeterminate';
+    this._ref.execute(this._data).subscribe(() => {
+      this._sb.toast('ChangesSaved');
+      this.dirty = false;
+      this.loading = null;
+    });
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+  }
+}
+interface Index {
+  id?: number;
+  axes: string[];
+  value: number;
+}
+
+interface Options {
+  cube?: string;
+  index?: string;
+  axes?: string[];
+}

package/src/lib/admin/patterns/patterns.component.html

@@ -0,0 +1,70 @@
+<mat-toolbar>
+  <button mat-button color="primary" (click)="save()" [disabled]="!dirty">{{'SaveChanges'|translate}}</button>
+  <span class="divider"></span>
+  <button mat-icon-button (click)="create()" [bizdocTooltip]="'Add'|translate" data-guide="create"><mat-icon>add</mat-icon></button>
+</mat-toolbar>
+<table mat-table [dataSource]="dataSource" matSort>
+  <ng-container matColumnDef="title" sticky>
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{'Title'|translate}}</th>
+    <td mat-cell *matCellDef="let element"> {{element.title}} </td>
+  </ng-container>
+  <ng-container *ngFor="let r of roles" [matColumnDef]="r.name">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{r.title}}</th>
+    <td mat-cell *matCellDef="let element">
+      <mat-checkbox [checked]="element.roles && element.roles.indexOf(r.name) > -1" (change)="toggle(element, r.name, $event)"></mat-checkbox>
+    </td>
+  </ng-container>
+  <ng-container matColumnDef="options">
+    <th mat-header-cell *matHeaderCellDef></th>
+    <td mat-cell *matCellDef="let element">
+      <button mat-icon-button [matMenuTriggerFor]="options"><mat-icon>more_vert</mat-icon></button>
+      <mat-menu #options>
+        <button mat-menu-item (click)="edit(element)">{{'Edit'|translate}}</button>
+        <mat-divider></mat-divider>
+        <button mat-menu-item (click)="delete(element)">{{'Discard'|translate}}</button>
+      </mat-menu>
+    </td>
+  </ng-container>
+  <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+  <tr mat-row *matRowDef="let element; columns: displayedColumns;"></tr>
+</table>
+<mat-paginator [pageSize]="PAGE_SIZE" hidePageSize showFirstLastButtons *ngIf="paging"></mat-paginator>
+<!-- dialog -->
+<ng-template #properties>
+  <mat-dialog-content>
+    <form [formGroup]="form" autocomplete="off" fxLayout="column">
+      <mat-form-field>
+        <input matInput formControlName="title" [placeholder]="'Title'|translate" required />
+      </mat-form-field>
+      <div formGroupName="axes" *ngIf="cube" fxLayout.gt-sm="row wrap" fxLayout="column wrap"
+           fxLayoutGap="5px grid">
+        <ng-container *ngFor="let a of cube.axes">
+          <mat-form-field *ngIf="include.indexOf(a.name)>-1" fxFlex="50">
+            <input matInput
+                   [matAutocomplete]="segment" [pattern]="pattern"
+                   [formControlName]="a.name" [placeholder]="a.title" />
+            <mat-autocomplete #segment>
+              <mat-option *ngFor="let o of segments[a.name] | async" [value]="o.key">{{o.value}}</mat-option>
+            </mat-autocomplete>
+            <mat-error *ngIf="axes.controls[a.name].invalid">{{'PatternErr' |translate}}</mat-error>
+          </mat-form-field>
+        </ng-container>
+      </div>
+      <mat-form-field>
+        <mat-select formControlName="roles" [placeholder]="'Roles'|translate" multiple required>
+          <mat-option *ngFor="let r of roles" [value]="r.name">{{r.title}}</mat-option>
+        </mat-select>
+        <mat-error *ngIf="form.controls.roles.hasError('required')">{{'Required'|translate:('Roles'|translate)}}</mat-error>
+      </mat-form-field>
+    </form>
+  </mat-dialog-content>
+  <mat-dialog-actions>
+    <button mat-button [mat-dialog-close]="form.value" [disabled]="!form.valid">{{'OK'| translate}}</button>
+    <button mat-button mat-dialog-close>{{'Cancel'| translate}}</button>
+  </mat-dialog-actions>
+</ng-template>
+<style scoped>
+  table {
+    width: 100%
+  }
+</style>

package/src/lib/admin/patterns/patterns.component.ts

@@ -0,0 +1,166 @@
+import { Component, OnInit, Inject, OnDestroy, ViewChild, TemplateRef } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { FormBuilder, Validators } from '@angular/forms';
+import { Subject, Observable } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { Cube, AxisType } from '../../core/models';
+import { BizDoc } from '../../core/decorators';
+import { UtilityComponent } from '../../core/base';
+import { SessionService } from '../../core/session.service';
+import { UtilityRef } from "../utility-ref";
+import { PromptService } from '../../core/prompt.service';
+import { Directionality } from '@angular/cdk/bidi';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatDialog } from '@angular/material/dialog';
+import { MatCheckboxChange } from '@angular/material/checkbox';
+import { DatasourceService } from '../../core/datasource.service';
+import { AXIS_VALUE_PATTERN } from '../../cube/cube.service';
+import { MatSort } from '@angular/material/sort';
+import { MatPaginator } from '@angular/material/paginator';
+
+const PAGE_SIZE = 20;
+
+@Component({
+  templateUrl: './patterns.component.html'
+})
+@BizDoc({
+  selector: 'bizdoc-patterns'
+})
+export class PatternsComponent implements UtilityComponent<boolean, any>, OnInit, OnDestroy {
+  readonly PAGE_SIZE = PAGE_SIZE;
+  readonly pattern = AXIS_VALUE_PATTERN;
+  dataSource: MatTableDataSource<Pattern>;
+  dirty = false;
+  readonly segments: { [key: string]: Observable<Source[]> } = {};
+  roles: Role[] = [];
+  @ViewChild('properties', { static: true }) properties: TemplateRef<any>;
+  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+  include: string[];
+  cube: Cube;
+  readonly displayedColumns = ['title'];
+  readonly axes = this._fb.group({});
+  readonly form = this._fb.group({
+    axes: this.axes,
+    title: this._fb.control(null, Validators.required),
+    roles: this._fb.control([], Validators.required)
+  });
+  private readonly _destroy = new Subject<void>();
+  paging: boolean;
+  constructor(private _session: SessionService,
+    private _dir: Directionality,
+    private _fb: FormBuilder, @Inject(UtilityRef) private _ref: UtilityRef<boolean, Pattern[], Pattern[], any, Options>, private _type: DatasourceService, private _http: HttpClient, private _sb: PromptService, private _dialog: MatDialog) {
+    const { cube, axes } = this._ref.options;
+    const ccube = cube ? this._session.profile.cubes.find(c => c.name === cube) : this._session.profile.cubes[0];
+    if (!ccube)
+      throw 'cube not found.';
+    this.cube = ccube;
+    this.include = axes || ccube.axes.filter(a => !a.hidden && a.combination).map(a => a.name);
+    this.cube.axes.forEach(a => {
+      this.axes.addControl(a.name, this._fb.control(null));
+      this.segments[a.name] = this._type.all(a.dataType);
+    });
+  }
+  ngOnInit() {
+    this.form.valueChanges.pipe(takeUntil(this._destroy)).subscribe(() => this.dirty = true);
+    this._http.get<Role[]>('api/positions/roles').subscribe(r => {
+      this._ref.populate().subscribe(p => {
+        this._columns(r);
+        this._datasource(p);
+      });
+    });
+  }
+  private _datasource(data: Pattern[]) {
+    // roles sorting
+    data.forEach(p => p.roles && p.roles.forEach(r => p[r] = true));
+    this.dataSource = new MatTableDataSource(data || []);
+    this.dataSource.sort = this.sort;
+    this.paging = data.length > PAGE_SIZE;
+    this.dataSource.paginator = this.paginator;
+  }
+
+  private _columns(roles: Role[]) {
+    this.roles = roles;
+    roles.forEach(e => this.displayedColumns.push(e.name));
+    this.displayedColumns.push('options');
+  }
+
+  toggle(pattern: Pattern, role: string, evt: MatCheckboxChange) {
+    if (!pattern.roles) pattern.roles = [];
+    if (evt.checked) {
+      pattern.roles.push(role);
+      pattern[role] = true;
+    }
+    else {
+      pattern.roles.remove(role);
+      pattern[role] = false;
+    }
+    this.dirty = true;
+  }
+  create() {
+    this.form.reset({ axes: {}, roles: [] }, { emitEvent: false });
+    this._dialog.open(this.properties, {
+      direction: this._dir.value,
+      minWidth: '66vw',
+      closeOnNavigation: true
+    }).afterClosed().subscribe((pattern: Pattern) => {
+      if (pattern) {
+        pattern.name = pattern.title.normalize();
+        this._normalize(pattern);
+        this.dataSource.data.push(pattern);
+        this.dataSource.filter = '';
+      }
+    });
+  }
+  private _normalize(pattern: Pattern) {
+    this.roles.forEach(r => pattern[r.name] = pattern.roles.indexOf(r.name) > -1);
+    Object.keys(pattern.axes).forEach(k => {
+      if (pattern.axes[k] === null)
+        delete pattern.axes[k];
+    });
+  }
+
+  delete(pattern: Pattern) {
+    this.dataSource.data.remove(pattern);
+  }
+  edit(pattern: Pattern) {
+    this.form.patchValue(pattern, { emitEvent: false });
+    this._dialog.open(this.properties).afterClosed().subscribe(r => {
+      if (r) {
+        Object.assign(pattern, r);
+        this._normalize(pattern);
+        this.dirty = true;
+      }
+    });
+  }
+  save() {
+    this._ref.execute(this.dataSource.data).subscribe(() => {
+      this.dirty = false;
+      this._sb.toast('ChangesSaved');
+    }, () => this._sb.error());
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}
+interface Options {
+  cube: string;
+  axes: string[];
+}
+interface Pattern {
+  name: string;
+  title: string;
+  roles: string[];
+  axes: {
+    [axis: string]: AxisType;
+  };
+}
+interface Role {
+  title: string;
+  name: string;
+}
+interface Source {
+  key: any;
+  value: any;
+}

package/src/lib/admin/permissions/permissions.component.html

@@ -0,0 +1,21 @@
+<mat-toolbar>
+  <button mat-button (click)="save()" color="primary" [disabled]="!dirty">{{'SaveChanges'|translate}}</button>
+  <span class="divider"></span>
+  <bizdoc-search-input (valueChange)="search($event)"></bizdoc-search-input>
+  <button mat-button [matMenuTriggerFor]="formMenu">{{form?.title}} <mat-icon>arrow_drop_down</mat-icon></button>
+  <mat-menu #formMenu>
+    <button mat-menu-item *ngFor="let f of forms" (click)="formChange(f.name)">{{f.title}}</button>
+  </mat-menu>
+</mat-toolbar>
+<table mat-table matSort [dataSource]="dataSource">
+  <ng-container matColumnDef="title" sticky>
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{'Permission' | translate}}</th>
+    <td mat-cell *matCellDef="let item"> {{item.title || item.name}}</td>
+  </ng-container>
+  <ng-container [matColumnDef]="r.name" *ngFor="let r of roles">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{r.title}}</th>
+    <td mat-cell *matCellDef="let item"> <mat-checkbox [checked]="item[r.name]" [value]="r.name" (change)="change(item, $event)"></mat-checkbox> </td>
+  </ng-container>
+  <tr mat-header-row *matHeaderRowDef="displayColumns; sticky: true"></tr>
+  <tr mat-row *matRowDef="let item; columns: displayColumns;"></tr>
+</table>

package/src/lib/admin/permissions/permissions.component.scss

@@ -0,0 +1,7 @@
+table {
+  width: 100%;
+}
+
+::ng-deep .mat-row {
+  cursor: pointer;
+}

package/src/lib/admin/permissions/permissions.component.ts

@@ -0,0 +1,89 @@
+import { Component, ViewChild, OnInit, Inject } from "@angular/core";
+import { SessionService } from "../../core/session.service";
+import { Role, Form } from "../../core/models";
+import { FormBuilder } from "@angular/forms";
+import { BizDoc } from "../../core/decorators";
+import { UtilityComponent } from "../../core/base";
+import { UtilityRef } from "../utility-ref";
+import { PromptService } from "../../core/prompt.service";
+import { MatTableDataSource } from "@angular/material/table";
+import { MatSort } from "@angular/material/sort";
+import { MatCheckboxChange } from "@angular/material/checkbox";
+
+@Component({
+  templateUrl: './permissions.component.html',
+  styleUrls: ['./permissions.component.scss']
+})
+@BizDoc({
+  selector: 'bizdoc-permissions'
+})
+export class PermissionsUtility implements OnInit, UtilityComponent<boolean, PermisionMap> {
+  readonly roles: Role[];
+  readonly forms: Form[];
+  readonly displayColumns: string[];
+  dirty = false;
+  form: Form;
+  dataSource: MatTableDataSource<Model>;
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
+  private _data: PermisionMap;
+  constructor(@Inject(UtilityRef) private _utilityRef: UtilityRef<boolean, any, PermisionMap, any>, private _session: SessionService,
+    private _sb: PromptService, private _fb: FormBuilder) {
+    this.roles = _session.profile.roles;
+    this.forms = _session.profile.forms;
+    this.displayColumns = ['title'].concat(this.roles.map(r => r.name));
+  }
+  ngOnInit(): void {
+    this._utilityRef.populate().subscribe(r => {
+      this._data = r;
+      this._populate((this.forms.find(f => r[f.name]) || this.forms[0]).name);
+    });
+  }
+  search(value: string) {
+    this.dataSource.filter = value;
+  }
+  formChange(form: string) {
+    this._populate(form);
+  }
+  private _populate(form: string) {
+    this.form = this._session.profile.forms.find(f => f.name === form);
+    if (!this._data[form]) this._data[form] = {};
+    const data = Object.keys(this._data[form]).map(k => {
+      const obj = this._data[form][k];
+      if (!obj.roles)
+        obj.roles = [];
+      else obj.roles.forEach(r=> obj[r] = true);
+      return Object.assign({ name: k }, obj);
+    });
+    this.dataSource = new MatTableDataSource(data);
+    this.dataSource.sort = this.sort;
+  }
+  change(item: Model, e: MatCheckboxChange) {
+    const { value: role } = e.source;
+    if (e.checked) {
+      item.roles.push(role);
+      item[role] = true;
+    }
+    else {
+      item.roles.remove(role);
+      item[role] = false;
+    }
+    this.dirty = true;
+  }
+  save() {
+    this._utilityRef.execute(this._data).subscribe(() => {
+      this.dirty = false;
+      this._sb.toast('ChangesSaved');
+    }, () => this._sb.error());
+  }
+}
+interface Model {
+  name: string;
+  title: string;
+  roles: string[];
+}
+
+interface PermisionMap {
+  [form: string]: {
+    [name: string]: Model;
+  };
+}

package/src/lib/admin/positions/positions-popup.component.html

@@ -0,0 +1,23 @@
+<mat-form-field>
+  <mat-chip-list #chipList [attr.aria-label]="data.title">
+    <mat-chip *ngFor="let u of data.positions"
+              [selectable]="true"
+              [removable]="true"
+              (removed)="removed(u)">
+      <bizdoc-identity-name [identity]=u></bizdoc-identity-name>
+      <mat-icon matChipRemove>cancel</mat-icon>
+    </mat-chip>
+    <input [placeholder]="data.title"
+           [formControl]=control
+           #nameInput
+           [matAutocomplete]="auto"
+           [matChipInputFor]="chipList"
+           [matChipInputSeparatorKeyCodes]="separatorKeysCodes">
+  </mat-chip-list>
+  <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected(nameInput, $event)">
+    <mat-option *ngFor="let u of users$ | async" [value]="u.id">
+      {{u.name}}
+      <span *ngIf="u.email">&nbsp; - {{u.email}}</span>
+    </mat-option>
+  </mat-autocomplete>
+</mat-form-field>

package/src/lib/admin/positions/positions-popup.component.ts

@@ -0,0 +1,68 @@
+import { Component, OnInit, OnDestroy, Inject, AfterViewInit, ViewChild, ElementRef, ChangeDetectorRef } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+import { switchMap, debounceTime, takeUntil } from 'rxjs/operators';
+import { FormControl } from '@angular/forms';
+import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { COMMA, ENTER } from '@angular/cdk/keycodes';
+import { UserInfo } from '../../core/models';
+import { AccountService } from '../../core/account.service';
+import { POPUP_DATA } from '../../core/popup/popup.component';
+
+export interface PositionsData {
+  title: string,
+  positions: string[]
+}
+
+@Component({
+  templateUrl: './positions-popup.component.html',
+  styles:[`:host {padding: 8px}`]
+})
+export
+  class PositionsPopup implements OnInit, AfterViewInit, OnDestroy {
+  readonly separatorKeysCodes: number[] = [ENTER, COMMA];
+  readonly valueChange = new Subject<void>(); 
+  readonly control = new FormControl(null);
+  @ViewChild('nameInput', { static: true, read: ElementRef }) nameInput: ElementRef<HTMLInputElement>;
+  users$: Observable<UserInfo[]>;
+  private readonly _destroy = new Subject<void>();
+  constructor(
+    @Inject(POPUP_DATA) public data: PositionsData,
+    private _cd: ChangeDetectorRef,
+    private _service: AccountService) { }
+  ngOnInit(): void {
+    this.users$ = this.control.valueChanges.pipe(debounceTime(200), takeUntil(this._destroy),
+      switchMap(v => this._service.findAll(v, { take: 20 })));
+  //  this._pRef.backdropClick().subscribe(() => {
+  //    this._pRef.close(this.dirty ? this.positions : null);
+  //  });
+  }
+    ngAfterViewInit(): void {
+      this.nameInput.nativeElement.focus();
+      this._cd.detectChanges();
+    }
+  /**
+   *
+   * @param inp
+   * @param event
+   */
+  selected(inp: HTMLInputElement, event: MatAutocompleteSelectedEvent): void {
+    this.data.positions.push(event.option.value);
+    inp.value = '';
+    this.valueChange.next();
+  }
+  /**
+   *
+   * @param id
+   */
+  removed(id: string): void {
+    const index = this.data.positions.indexOf(id);
+
+    if (index >= 0)
+      this.data.positions.splice(index, 1);
+    this.valueChange.next();
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}