SUPPORT-8939:init tree

2025-02-19 14:11:03 +03:00 · 2025-02-19 14:11:03 +03:00 · 0e1f61b600
commit 0e1f61b600
parent 546c0c4cd4
15 changed files with 650 additions and 6 deletions
--- a/backend/src/main/java/ru/micord/ervu/account_applications/component/model/TreeItemDto.java
+++ b/backend/src/main/java/ru/micord/ervu/account_applications/component/model/TreeItemDto.java
@ -0,0 +1,22 @@
+package ru.micord.ervu.account_applications.component.model;
+
+import ru.cg.webbpm.modules.webkit.annotations.Model;
+
+/**
+ * @author r.latypov
+ */
+@Model
+public class TreeItemDto {
+  public Object id;
+  public Object parentId;
+  public String label;
+  public TreeItemDto[] children;
+  public Object businessId;
+  public String domainId;
+
+  public TreeItemDto(Object id, Object parentId, String label) {
+    this.id = id;
+    this.parentId = parentId;
+    this.label = label;
+  }
+}
--- a/backend/src/main/java/ru/micord/ervu/account_applications/component/rpc/TreeItemRpcService.java
+++ b/backend/src/main/java/ru/micord/ervu/account_applications/component/rpc/TreeItemRpcService.java
@ -0,0 +1,29 @@
+package ru.micord.ervu.account_applications.component.rpc;
+
+import java.util.List;
+
+
+import ru.micord.ervu.account_applications.component.model.TreeItemDto;
+import ru.micord.ervu.account_applications.component.service.TreeItemService;
+
+import ru.cg.webbpm.modules.webkit.annotations.RpcCall;
+import ru.cg.webbpm.modules.webkit.annotations.RpcService;
+import ru.cg.webbpm.modules.webkit.beans.Behavior;
+
+/**
+ * @author r.latypov
+ */
+@RpcService
+public class TreeItemRpcService extends Behavior {
+  public TreeItemService treeItemService;
+
+  @RpcCall
+  public List<TreeItemDto> loadTreeData() {
+    return treeItemService.loadTreeData();
+  }
+
+  @RpcCall
+  public List<TreeItemDto> loadTreeDataByDomainId(String domainId) {
+    return treeItemService.loadTreeDataByDomainId(domainId);
+  }
+}
--- a/backend/src/main/java/ru/micord/ervu/account_applications/component/service/TreeItemService.java
+++ b/backend/src/main/java/ru/micord/ervu/account_applications/component/service/TreeItemService.java
@ -0,0 +1,122 @@
+package ru.micord.ervu.account_applications.component.service;
+
+import java.util.*;
+
+
+import database.dao.DefaultLoadDao;
+import org.springframework.stereotype.Service;
+import ru.micord.ervu.account_applications.component.model.TreeItemDto;
+import ru.micord.ervu.account_applications.component.rpc.TreeItemRpcService;
+
+import ru.cg.webbpm.modules.database.api.bean.TableRow;
+import ru.cg.webbpm.modules.database.api.dao.option.LoadOptions;
+import ru.cg.webbpm.modules.database.bean.annotation.GraphSource;
+import ru.cg.webbpm.modules.database.bean.annotation.TypedColumn;
+import ru.cg.webbpm.modules.database.bean.entity_graph.EntityColumn;
+import ru.cg.webbpm.modules.database.bean.entity_graph.EntityColumnType;
+import ru.cg.webbpm.modules.standard_annotations.validation.NotNull;
+
+/**
+ * @author r.latypov
+ */
+@Service
+public class TreeItemService {
+  @NotNull
+  public DefaultLoadDao loadDao;
+  @GraphSource(value = TreeItemRpcService.class, scanMode = GraphSource.ScanMode.SELF)
+  @NotNull
+  public EntityColumn idColumn;
+  @GraphSource(value = TreeItemRpcService.class, scanMode = GraphSource.ScanMode.SELF)
+  @NotNull
+  public EntityColumn parentIdColumn;
+  @GraphSource(value = TreeItemRpcService.class, scanMode = GraphSource.ScanMode.SELF)
+  @TypedColumn(colTypes = EntityColumnType.STRING)
+  @NotNull
+  public EntityColumn labelColumn;
+  @GraphSource(value = TreeItemRpcService.class, scanMode = GraphSource.ScanMode.SELF)
+  public EntityColumn businessIdColumn;
+  @GraphSource(value = TreeItemRpcService.class, scanMode = GraphSource.ScanMode.SELF)
+  public EntityColumn domainIdColumn;
+
+  public List<TreeItemDto> loadTreeData() {
+    List<TreeItemDto> loadedTreeItems = loadTreeItems();
+    loadedTreeItems.forEach(item -> item.domainId = null);
+    return loadedTreeItems.stream()
+        .filter(item -> item.parentId == null)
+        .toList();
+  }
+
+  public List<TreeItemDto> loadTreeDataByDomainId(String domainId) {
+    if (domainId == null || domainIdColumn == null) {
+      return loadTreeData();
+    }
+
+    List<TreeItemDto> filteredTreeItems = loadTreeItems().stream()
+        .filter(item -> item.domainId.equalsIgnoreCase(domainId))
+        .toList();
+    filteredTreeItems.forEach(this::setDomainIdToNull);
+    return filteredTreeItems;
+  }
+
+  private void setDomainIdToNull(TreeItemDto treeItem) {
+    treeItem.domainId = null;
+    TreeItemDto[] treeItemChildren = treeItem.children;
+    if (treeItemChildren != null && treeItemChildren.length > 0) {
+      for (TreeItemDto child : treeItemChildren) {
+        setDomainIdToNull(child);
+      }
+    }
+  }
+  
+  private List<TreeItemDto> loadTreeItems() {
+    List<TreeItemDto> loadedList = this.loadDao.load(getColumns(), new LoadOptions()).stream()
+        .map(this::toTreeItemDto)
+        .toList();
+
+    Map<Object, List<TreeItemDto>> childrenMap = new HashMap<>();
+    loadedList.forEach(item -> {
+      Object parentId = item.parentId;
+      if (parentId != null) {
+        List<TreeItemDto> listFromMap = childrenMap.computeIfAbsent(parentId,
+            k -> new ArrayList<>()
+        );
+        listFromMap.add(item);
+      }
+    });
+
+    loadedList.forEach(item -> {
+      List<TreeItemDto> children = childrenMap.get(item.id);
+      if (children != null) {
+        item.children = children.toArray(new TreeItemDto[0]);
+      }
+    });
+    return loadedList;
+  }
+
+  private Set<EntityColumn> getColumns() {
+    Set<EntityColumn> columnSet = new HashSet<>();
+    columnSet.add(idColumn);
+    columnSet.add(parentIdColumn);
+    columnSet.add(labelColumn);
+    if (businessIdColumn != null) {
+      columnSet.add(businessIdColumn);
+    }
+    if (domainIdColumn != null) {
+      columnSet.add(domainIdColumn);
+    }
+    return columnSet;
+  }
+
+  private TreeItemDto toTreeItemDto(TableRow tableRow) {
+    TreeItemDto treeItemDto = new TreeItemDto(
+        tableRow.get(idColumn), tableRow.get(parentIdColumn), (String) tableRow.get(labelColumn)
+    );
+    if (businessIdColumn != null) {
+      treeItemDto.businessId = tableRow.get(businessIdColumn);
+    }
+    if (domainIdColumn != null) {
+      treeItemDto.domainId = (String) tableRow.get(domainIdColumn);
+    }
+    return treeItemDto;
+  }
+}
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@ -4961,6 +4961,14 @@
        "tslib": "^1.9.0"
      }
    },
+    "ngx-treeview": {
+      "version": "10.0.2-micord.2",
+      "resolved": "https://repo.micord.ru/repository/npm-all/ngx-treeview/-/ngx-treeview-10.0.2-micord.2.tgz",
+      "integrity": "sha512-uFR3vJcaJ4gX/hCe5rZ0wH5rp66me4er8ZuD+IaIanW+2nbWRqGC0ueS5+MZWaxzfKhdukX8Z9qfSUoGSDBECg==",
+      "requires": {
+        "tslib": "1.9.3"
+      }
+    },
    "nice-try": {
      "version": "1.0.5",
      "resolved": "https://repo.micord.ru/repository/npm-all/nice-try/-/nice-try-1.0.5.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@ -52,6 +52,7 @@
    "ngx-cookie": "3.0.1",
    "ngx-international-phone-number": "1.0.6",
    "ngx-toastr": "10.2.0-cg",
+    "ngx-treeview": "10.0.2-micord.2",
    "popper.js": "1.14.7",
    "reflect-metadata": "0.1.13",
    "rxjs": "6.4.0",
--- a/frontend/src/resources/template/account_applications/component/external/ngx-treeview/dropdown-treeview-select.component.html
+++ b/frontend/src/resources/template/account_applications/component/external/ngx-treeview/dropdown-treeview-select.component.html
@ -0,0 +1,61 @@
+<ng-template #itemTemplate let-item="item" let-onCollapseExpand="onCollapseExpand"
+  let-onCheckedChange="onCheckedChange">
+  <div class="text-nowrap row-item">
+    <i *ngIf="item.children"
+       (click)="onCollapseExpand()"
+       aria-hidden="true"
+       [ngSwitch]="item.collapsed">
+      <i *ngSwitchCase="true" class="bi bi-caret-right-fill"></i>
+      <i *ngSwitchCase="false" class="bi bi-caret-down-fill"></i>
+    </i>
+    <label class="form-check-label" (click)="select(item)">{{ item.text }}</label>
+  </div>
+</ng-template>
+<ng-template #headerTemplate let-config="config" let-item="item"
+             let-onCollapseExpand="onCollapseExpand" let-onCheckedChange="onCheckedChange"
+             let-onFilterTextChange="onFilterTextChange">
+  <div *ngIf="config.hasFilter" class="row row-filter">
+    <div class="col-12">
+      <input class="form-control" type="text"
+             [placeholder]="i18n.getFilterPlaceholder()"
+             [(ngModel)]="filterText"
+             (ngModelChange)="onFilterTextChange($event)" />
+    </div>
+  </div>
+  <div *ngIf="config.hasAllCheckBox || config.hasCollapseExpand" class="row">
+    <div class="col-12">
+      <label *ngIf="config.hasAllCheckBox" (click)="select(item)">
+        <strong>{{ i18n.getAllCheckboxText() }}</strong>
+      </label>
+      <label *ngIf="config.hasCollapseExpand" class="float-right" (click)="onCollapseExpand()">
+        <i [title]="i18n.getTooltipCollapseExpandText(item.collapsed)" aria-hidden="true" [ngSwitch]="item.collapsed">
+          <svg *ngSwitchCase="true" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-arrows-angle-expand"
+            fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd"
+              d="M1.5 10.036a.5.5 0 0 1 .5.5v3.5h3.5a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 .5-.5z" />
+            <path fill-rule="evenodd"
+              d="M6.354 9.646a.5.5 0 0 1 0 .708l-4.5 4.5a.5.5 0 0 1-.708-.708l4.5-4.5a.5.5 0 0 1 .708 0zm8.5-8.5a.5.5 0 0 1 0 .708l-4.5 4.5a.5.5 0 0 1-.708-.708l4.5-4.5a.5.5 0 0 1 .708 0z" />
+            <path fill-rule="evenodd"
+              d="M10.036 1.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 1 1-1 0V2h-3.5a.5.5 0 0 1-.5-.5z" />
+          </svg>
+          <svg *ngSwitchCase="false" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-arrows-angle-contract"
+            fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd"
+              d="M9.5 2.036a.5.5 0 0 1 .5.5v3.5h3.5a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 .5-.5z" />
+            <path fill-rule="evenodd"
+              d="M14.354 1.646a.5.5 0 0 1 0 .708l-4.5 4.5a.5.5 0 1 1-.708-.708l4.5-4.5a.5.5 0 0 1 .708 0zm-7.5 7.5a.5.5 0 0 1 0 .708l-4.5 4.5a.5.5 0 0 1-.708-.708l4.5-4.5a.5.5 0 0 1 .708 0z" />
+            <path fill-rule="evenodd"
+              d="M2.036 9.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V10h-3.5a.5.5 0 0 1-.5-.5z" />
+          </svg>
+        </i>
+      </label>
+    </div>
+  </div>
+  <div *ngIf="config.hasDivider" class="dropdown-divider"></div>
+</ng-template>
+<ngx-dropdown-treeview
+        [config]="config"
+        [headerTemplate]="headerTemplate"
+        [items]="items"
+        [itemTemplate]="itemTemplate">
+</ngx-dropdown-treeview>
--- a/frontend/src/resources/template/account_applications/component/field/DropdownTreeView.html
+++ b/frontend/src/resources/template/account_applications/component/field/DropdownTreeView.html
@ -0,0 +1,14 @@
+<div class="row">
+    <div class="col-12">
+        <div class="form-group">
+            <div class="d-inline-block">
+                <ngx-dropdown-treeview-select
+                        [items]="items"
+                        [maxHeight]="maxHeight"
+                        [(value)]="value"
+                        (valueChange)="onValueChange($event)">
+                </ngx-dropdown-treeview-select>
+            </div>
+        </div>
+    </div>
+</div>
--- a/frontend/src/ts/account_applications/component/enum/TreeValuesCacheStrategy.ts
+++ b/frontend/src/ts/account_applications/component/enum/TreeValuesCacheStrategy.ts
@ -0,0 +1,5 @@
+export enum TreeValuesCacheStrategy {
+  BY_PAGE_OBJECT_ID = "BY_PAGE_OBJECT_ID",
+  BY_OBJECT_NAME = "BY_OBJECT_NAME",
+  BY_CUSTOM_NAME = "BY_CUSTOM_NAME",
+}
--- a/frontend/src/ts/account_applications/component/external/ngx-treeview/dropdown-treeview-select/dropdown-treeview-select-i18n.ts
+++ b/frontend/src/ts/account_applications/component/external/ngx-treeview/dropdown-treeview-select/dropdown-treeview-select-i18n.ts
@ -0,0 +1,20 @@
+import {Injectable} from "@angular/core";
+import {DefaultTreeviewI18n, TreeviewItem, TreeviewSelection} from "ngx-treeview";
+
+
+@Injectable()
+export class DropdownTreeviewSelectI18n extends DefaultTreeviewI18n {
+    private internalSelectedItem: TreeviewItem;
+
+    set selectedItem(value: TreeviewItem) {
+        this.internalSelectedItem = value;
+    }
+
+    get selectedItem(): TreeviewItem {
+        return this.internalSelectedItem;
+    }
+
+    getText(selection: TreeviewSelection): string {
+        return this.internalSelectedItem ? this.internalSelectedItem.text : 'Элемент не выбран';
+    }
+}
--- a/frontend/src/ts/account_applications/component/external/ngx-treeview/dropdown-treeview-select/dropdown-treeview-select.component.ts
+++ b/frontend/src/ts/account_applications/component/external/ngx-treeview/dropdown-treeview-select/dropdown-treeview-select.component.ts
@ -0,0 +1,79 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  Output,
+  ViewChild
+} from '@angular/core';
+import {DropdownTreeviewSelectI18n} from './dropdown-treeview-select-i18n';
+import {
+  DropdownTreeviewComponent,
+  TreeviewConfig,
+  TreeviewHelper,
+  TreeviewI18n,
+  TreeviewItem
+} from "ngx-treeview";
+
+@Component({
+             moduleId: module.id,
+             selector: 'ngx-dropdown-treeview-select',
+             templateUrl: './../../../../../../../src/resources/template/account_applications/component/external/ngx-treeview/dropdown-treeview-select.component.html',
+             providers: [{provide: TreeviewI18n, useClass: DropdownTreeviewSelectI18n}],
+             changeDetection: ChangeDetectionStrategy.OnPush
+           })
+export class DropdownTreeviewSelectComponent implements OnChanges {
+  @Input() config: TreeviewConfig;
+  @Input() items: TreeviewItem[];
+  @Input() maxHeight: number;
+  @Input() value: any;
+  @Output() valueChange = new EventEmitter<any>();
+  @ViewChild(DropdownTreeviewComponent) dropdownTreeviewComponent: DropdownTreeviewComponent;
+  filterText: string;
+  private dropdownTreeviewSelectI18n: DropdownTreeviewSelectI18n;
+
+  constructor(public i18n: TreeviewI18n) {
+    this.config = TreeviewConfig.create({
+                                          hasAllCheckBox: false,
+                                          hasCollapseExpand: false,
+                                          hasFilter: true,
+                                          maxHeight: 500
+                                        });
+    this.dropdownTreeviewSelectI18n = i18n as DropdownTreeviewSelectI18n;
+  }
+
+  ngOnChanges(): void {
+    if (this.maxHeight) {
+      this.config.maxHeight = this.maxHeight;
+    }
+    this.updateSelectedItem();
+  }
+
+  select(item: TreeviewItem): void {
+    this.selectItem(item);
+  }
+
+  private updateSelectedItem(): void {
+    if (this.items !== null) {
+      const selectedItem = TreeviewHelper.findItemInList(this.items, this.value);
+      this.selectItem(selectedItem);
+    }
+  }
+
+  private selectItem(item: TreeviewItem): void {
+    if (this.dropdownTreeviewSelectI18n.selectedItem !== item) {
+      this.dropdownTreeviewSelectI18n.selectedItem = item;
+      if (this.dropdownTreeviewComponent) {
+        this.dropdownTreeviewComponent.onSelectedChange([item]);
+      }
+
+      if (item) {
+        if (this.value !== item.value) {
+          this.value = item.value;
+          this.valueChange.emit(item.value);
+        }
+      }
+    }
+  }
+}
--- a/frontend/src/ts/account_applications/component/field/DropdownTreeViewComponent.ts
+++ b/frontend/src/ts/account_applications/component/field/DropdownTreeViewComponent.ts
@ -0,0 +1,246 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Input
+} from "@angular/core";
+import {
+  AdvancedProperty,
+  Event,
+  InputControl,
+  LocalStorageService,
+  NotNull,
+  PageContextHolder,
+  PageObjectUtils,
+  TaskParamsProvider,
+  UserService,
+  Visible,
+  WebbpmStorage
+} from "@webbpm/base-package";
+import {TreeValuesCacheStrategy} from "../enum/TreeValuesCacheStrategy";
+import {TreeItem, TreeviewItem} from "ngx-treeview";
+import {
+  DropdownTreeviewSelectI18n
+} from "../external/ngx-treeview/dropdown-treeview-select/dropdown-treeview-select-i18n";
+import {
+  TreeItemDto
+} from "../../../generated/ru/micord/ervu/account_applications/component/model/TreeItemDto";
+import {
+  TreeItemRpcService
+} from "../../../generated/ru/micord/ervu/account_applications/component/rpc/TreeItemRpcService";
+
+
+@Component({
+             moduleId: module.id,
+             selector: 'dropdown-tree-view',
+             templateUrl: './../../../../../src/resources/template/account_applications/component/field/DropdownTreeView.html',
+             providers: [{
+               provide: DropdownTreeviewSelectI18n, useClass: DropdownTreeviewSelectI18n
+             }],
+             changeDetection: ChangeDetectionStrategy.OnPush
+           })
+export class DropdownTreeViewComponent extends InputControl {
+  @Input()
+  @AdvancedProperty()
+  public treeValuesCacheStrategy: TreeValuesCacheStrategy;
+  @Visible("treeValuesCacheStrategy == TreeValuesCacheStrategy.BY_CUSTOM_NAME")
+  @NotNull("treeValuesCacheStrategy == TreeValuesCacheStrategy.BY_CUSTOM_NAME")
+  @AdvancedProperty()
+  public treeValuesCustomName: string;
+  @Visible("false")
+  public cachedValue: any;
+  public collapseLevel: number;
+  public maxHeight: number;
+  @Visible("false")
+  public items: TreeviewItem[];
+  @Visible("false")
+  public value: any;
+
+  @Visible("false")
+  public valueChangeEvent: Event<TreeItemDto> = new Event<TreeItemDto>();
+
+  private rpcService: TreeItemRpcService;
+  private localStorageService: LocalStorageService;
+  private taskParamsProvider: TaskParamsProvider;
+  private pageContextHolder: PageContextHolder;
+  private webbpmStorage: WebbpmStorage;
+  private storageKey: string;
+
+  constructor(el: ElementRef, cd: ChangeDetectorRef,
+              // todo replace UserService by another one from SUPPORT-8421 providing accountId or domainId
+              private i18n: DropdownTreeviewSelectI18n, private userService: UserService) {
+    super(el, cd);
+  }
+
+  public initialize() {
+    super.initialize();
+    this.rpcService = this.getScript(TreeItemRpcService);
+    this.taskParamsProvider = this.injector.get(TaskParamsProvider);
+    this.localStorageService = this.injector.get(LocalStorageService);
+    this.pageContextHolder = this.injector.get(PageContextHolder);
+    this.webbpmStorage =
+        this.getTreeValuesStorage(this.treeValuesCacheStrategy, this.treeValuesCustomName);
+    this.cachedValue = this.getCachedValue();
+    this.loadTreeItems();
+  }
+
+  private getTreeValuesStorage(treeValuesCacheStrategy: TreeValuesCacheStrategy, customKeyName: string) {
+    if (!treeValuesCacheStrategy) {
+      return null;
+    }
+    switch (treeValuesCacheStrategy) {
+      case TreeValuesCacheStrategy.BY_PAGE_OBJECT_ID:
+        this.storageKey = PageObjectUtils.getPageObjectKey(this);
+        return this.readWebbpmStorage(this.storageKey);
+      case TreeValuesCacheStrategy.BY_OBJECT_NAME:
+        this.storageKey = this.getObjectName();
+        return this.readWebbpmStorage(this.storageKey);
+      case TreeValuesCacheStrategy.BY_CUSTOM_NAME:
+        this.storageKey = customKeyName;
+        return this.readWebbpmStorage(this.storageKey);
+      default:
+        throw new Error("Unknown tree values storage type = " + treeValuesCacheStrategy)
+    }
+  }
+
+  readWebbpmStorage(treeStorageKey: string) {
+    if (this.pageContextHolder.isPageInBpmnContext()) {
+      treeStorageKey = treeStorageKey + "$" + this.taskParamsProvider.processInstanceId
+    }
+    return this.localStorageService.readTemporalWebbpmStorage(treeStorageKey);
+  }
+
+  @Visible()
+  public loadTreeItems(): void {
+    // todo replace the called method by
+    //  this.rpcService.loadTreeDataByDomainId(domainId)
+    this.rpcService.loadTreeData()
+        .then((res: TreeItemDto[]) => {
+          this.items = res.map(value => new TreeviewItem(this.createTreeItem(value)));
+          const rootItem = this.items[0];
+          if (this.cachedValue) {
+            const matchedItem = this.findTreeItemByValue(this.items, this.cachedValue);
+            if (matchedItem) {
+              this.i18n.selectedItem = matchedItem;
+              this.value = matchedItem.value;
+            }
+          }
+          else {
+            this.i18n.selectedItem = rootItem;
+            this.value = rootItem.value;
+          }
+          this.doCollapseLevel();
+          this.valueChangeEvent.trigger(this.value);
+          this.cd.markForCheck();
+        });
+  }
+
+  private findTreeItemByValue(rootItems: TreeviewItem[], valueToFind: any): TreeviewItem | null {
+    for (const item of rootItems) {
+      if (JSON.stringify(item.value) === JSON.stringify(valueToFind)) {
+        return item;
+      }
+      if (item.children) {
+        const found = this.findTreeItemByValue(item.children, valueToFind);
+        if (found) {
+          return found;
+        }
+      }
+    }
+    return null;
+  }
+
+  private createTreeItem(treeItemDto: TreeItemDto): TreeItem {
+    let treeItem: TreeItem;
+    if (treeItemDto) {
+      treeItem = {
+        text: treeItemDto.label,
+        value: treeItemDto,
+        children: this.createTreeItemArray(treeItemDto.children)
+      };
+    }
+    return treeItem;
+  }
+
+  private createTreeItemArray(treeItemDtoArray: TreeItemDto[]): TreeItem[] {
+    if (treeItemDtoArray && treeItemDtoArray.length > 0) {
+      return treeItemDtoArray.map(value => this.createTreeItem(value));
+    }
+    return undefined;
+  }
+
+  public onValueChange($event: any) {
+    this.setCachedValue(this.value);
+    this.valueChangeEvent.trigger($event);
+    this.applyListener(this.changeListeners);
+  }
+
+  @Visible()
+  public getBusinessId(): any {
+    return this.value ? this.value.businessId : this.value;
+  }
+
+  @Visible()
+  public setCollapseLevel(level: number): void {
+    this.collapseLevel = level;
+  }
+
+  private doCollapseLevel(): void {
+    if (this.items != null && this.collapseLevel != null) {
+      this.items.forEach((value) => this.checkCollapseLevelRecursive(value, 0));
+    }
+  }
+
+  private checkCollapseLevelRecursive(viewItem: TreeviewItem, level: number): void {
+    if (level != null && this.collapseLevel != null && level >= this.collapseLevel) {
+      viewItem.setCollapsedRecursive(true);
+    }
+    else if (viewItem.children != null) {
+      viewItem.children.forEach((value) => this.checkCollapseLevelRecursive(value, level + 1))
+    }
+  }
+
+  protected setCachedValue(newValue: any): void {
+    if (this.webbpmStorage) {
+      this.webbpmStorage.put(this.storageKey, newValue);
+    }
+  }
+
+  protected getCachedValue(): any {
+    if (this.webbpmStorage) {
+      return this.webbpmStorage.get(this.storageKey);
+    }
+    return null;
+  }
+
+  getPresentationValue(): string | number | boolean {
+    return this.value;
+  }
+
+  getValue(): any {
+    return this.value;
+  }
+
+  getValueAsModel(): any {
+    return this.value ? this.value : null;
+  }
+
+  setValue(value: any): any {
+    this.value = value;
+  }
+
+  onChange() {
+    super.onChange();
+    this.valueChangeEvent.trigger(this.value);
+  }
+
+  subscribeToModelChange() {
+    //empty because there is no ngModel here
+  }
+
+  unsubscribeToModelChange() {
+    //empty because there is no ngModel here
+  }
+
+}
--- a/frontend/src/ts/account_applications/component/filter/DropdownTreeViewFilterComponent.ts
+++ b/frontend/src/ts/account_applications/component/filter/DropdownTreeViewFilterComponent.ts
@ -0,0 +1,27 @@
+import {AnalyticalScope, Filter, FilterComponent, FilterUtil} from "@webbpm/base-package";
+import {DropdownTreeViewComponent} from "../field/DropdownTreeViewComponent";
+
+@AnalyticalScope(DropdownTreeViewComponent)
+export class DropdownTreeViewFilterComponent extends FilterComponent {
+
+  public isBusinessId: boolean;
+
+  public getFilter(): Filter {
+    let treeViewComponent = this.getScript(DropdownTreeViewComponent) as DropdownTreeViewComponent;
+    let model = treeViewComponent.value;
+
+    if (!model && treeViewComponent.cachedValue) {
+      let value = this.isBusinessId
+                  ? treeViewComponent.cachedValue.businessId
+                  : treeViewComponent.cachedValue.id;
+      return FilterUtil.singleValueFilter(this.getObjectId(), value, this.operation);
+    }
+    else if (model) {
+      let value = this.isBusinessId ? model.businessId : model.id;
+      return FilterUtil.singleValueFilter(this.getObjectId(), value, this.operation);
+    }
+    else {
+      return null;
+    }
+  }
+}
--- a/frontend/src/ts/modules/app/app.module.ts
+++ b/frontend/src/ts/modules/app/app.module.ts
@ -27,6 +27,9 @@ import {NewPasswordComponent} from "./component/new-password.component";
 import {AppProgressIndicationComponent} from "./component/app-progress-indication.component";
 import {AppProgressIndicationService} from "./service/app-progress-indication.service";
 import {VBoxLoadValues} from "../../account_applications/component/container/VBoxLoadValues";
+import {DropdownTreeViewComponent}from "../../account_applications/component/field/DropdownTreeViewComponent";
+import {DropdownTreeviewSelectComponent} from "../../account_applications/component/external/ngx-treeview/dropdown-treeview-select/dropdown-treeview-select.component";
+import {TreeviewModule} from "ngx-treeview";

 registerLocaleData(localeRu);
 export const DIRECTIVES = [
@ -42,7 +45,9 @@ export const DIRECTIVES = [
  forwardRef(() => ResetPasswordComponent),
  forwardRef(() => NewPasswordComponent),
  forwardRef(() => AppProgressIndicationComponent),
-  forwardRef(() => VBoxLoadValues)
+  forwardRef(() => VBoxLoadValues),
+  forwardRef(() => DropdownTreeViewComponent),
+  forwardRef(() => DropdownTreeviewSelectComponent)
 ];

@NgModule({
@ -56,7 +61,8 @@ export const DIRECTIVES = [
              ComponentsModule,
              AgGridModule,
              RouterModule,
-              InternationalPhoneNumberModule
+              InternationalPhoneNumberModule,
+              TreeviewModule.forRoot()
            ],
            declarations: [
              DIRECTIVES
--- a/frontend/systemjs.config.js
+++ b/frontend/systemjs.config.js
@ -60,7 +60,8 @@
      'chartjs-adapter-moment':            'npm:chartjs-adapter-moment/dist/chartjs-adapter-moment.js',
      'tslib':                             'npm:tslib/tslib.js',
      'ngx-international-phone-number':    'npm:ngx-international-phone-number/ngx-international-phone-number.umd.js',
-      'google-libphonenumber':             'npm:google-libphonenumber/dist/libphonenumber.js'
+      'google-libphonenumber':             'npm:google-libphonenumber/dist/libphonenumber.js',
+      'ngx-treeview':                      'npm:ngx-treeview',
    },
    packages: {
      'webbpm':                     { main: 'main',  defaultExtension: 'js'},
@ -85,7 +86,8 @@
      'inputmask': {
        main: 'dist/inputmask.js',
        defaultExtension: 'js'
-      }
+      },
+      'ngx-treeview':               { main: "bundles/ngx-treeview.umd.js", defaultExtension: 'js'}
    }
  });
 })(this);
--- a/frontend/systemjs.preview.config.js
+++ b/frontend/systemjs.preview.config.js
@ -60,7 +60,8 @@
      'chartjs-adapter-moment':            'npm:chartjs-adapter-moment/dist/chartjs-adapter-moment.js',
      'tslib':                             'npm:tslib/tslib.js',
      'ngx-international-phone-number':    'npm:ngx-international-phone-number/ngx-international-phone-number.umd.js',
-      'google-libphonenumber':             'npm:google-libphonenumber/dist/libphonenumber.js'
+      'google-libphonenumber':             'npm:google-libphonenumber/dist/libphonenumber.js',
+      'ng2-dropdown-treeview':             'npm:ng2-dropdown-treeview',
    },
    packages: {
      'preview':                    { main: './modules/preview/preview.main',  defaultExtension: 'js'},
@ -84,7 +85,8 @@
      'inputmask': {
        main: 'dist/inputmask.js',
        defaultExtension: 'js'
-      }
+      },
+      'ng2-dropdown-treeview':{ main: "bundles/ng2-dropdown-treeview.umd.js", defaultExtension: 'js'}
    }
  });
 })(this);