Merge remote-tracking branch 'origin/develop' into feature/SUPPORT-8956_mfe
# Conflicts: # frontend/src/ts/modules/app/app.module.ts # resources/src/main/resources/business-model/Список заявок на пользователя/Создание заявки на добавление пользователя.page # resources/src/main/resources/business-model/Список заявок на пользователя/Создать заявку на деактивацию.page # resources/src/main/resources/business-model/Список заявок на пользователя/Создать заявку на изменение.page # resources/src/main/resources/business-model/Список заявок на пользователя/Список заявок.page
This commit is contained in:
adel.ka
commit
29eb254dfc
26 changed files with 1635 additions and 202 deletions
8
frontend/package-lock.json
generated
8
frontend/package-lock.json
generated
|
|
@ -4993,6 +4993,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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -1241,7 +1241,7 @@
|
|||
padding: 55px 20px 15px 20px;
|
||||
}
|
||||
|
||||
.webbpm collapsible-panel:not(.grid-setting-panel):not(.column-states-panel):not(.filter-states-panel) .card i {
|
||||
.webbpm collapsible-panel:not(.grid-setting-panel):not(.column-states-panel):not(.filter-states-panel) .card i.fa {
|
||||
float: none;
|
||||
font-size: var(--size-text-secondary);
|
||||
margin-right: 6px;
|
||||
|
|
|
|||
|
|
@ -157,6 +157,147 @@
|
|||
background-color: var(--input-bg);
|
||||
}
|
||||
|
||||
/* DropDownTree start */
|
||||
.webbpm.account-applications dropdown-tree-view .form-group,
|
||||
.webbpm.account-applications dropdown-tree-view .dropdown {
|
||||
display: flex;
|
||||
}
|
||||
.webbpm.account-applications dropdown-tree-view .form-group > label ~ div {
|
||||
width: calc(100% - 160px);
|
||||
}
|
||||
.webbpm.account-applications dropdown-tree-view .dropdown > button:not(:disabled):not(.disabled),
|
||||
.webbpm.account-applications dropdown-tree-view .dropdown > button:not(:disabled):not(.disabled):is(:focus, :active) {
|
||||
font-family: 'Golos';
|
||||
font-size: var(--size-text-secondary);
|
||||
color: var(--color-text-primary);
|
||||
text-align: left;
|
||||
min-height: 32px;
|
||||
width: 100%;
|
||||
padding: 6px 24px 6px 8px;
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--input-border);
|
||||
border-radius: var(--indent-xmini) var(--indent-xmini) 0 0;
|
||||
background-color: var(--input-bg);
|
||||
box-shadow: none;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.webbpm.account-applications dropdown-tree-view .dropdown > button::after {
|
||||
content: "\f282";
|
||||
display: block;
|
||||
position: absolute;
|
||||
color: var(--color-text-active);
|
||||
font-family: bootstrap-icons !important;
|
||||
font-weight: 800 !important;
|
||||
font-size: var(--size-text-mini);
|
||||
top: calc((50% - var(--size-text-secondary) / 2));
|
||||
right: var(--indent-small);
|
||||
height: auto;
|
||||
width: auto;
|
||||
border: 0;
|
||||
}
|
||||
.webbpm.account-applications dropdown-tree-view .dropdown.show > button::after {
|
||||
top: calc(50% - (var(--size-text-secondary) + var(--indent-mini)) / 2);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.webbpm.account-applications dropdown-tree-view .dropdown-menu {
|
||||
padding: 0;
|
||||
border: 1px solid var(--btn-border);
|
||||
border-radius: 8px;
|
||||
background: var(--body-bg);
|
||||
box-shadow: var(--btn-shadow);
|
||||
}
|
||||
.webbpm.account-applications dropdown-tree-view .dropdown-menu :is(.dropdown-container, .treeview-container) {
|
||||
padding: 0;
|
||||
}
|
||||
.webbpm.account-applications dropdown-tree-view .dropdown-menu .treeview-container {
|
||||
margin-bottom: var(--indent-base);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.webbpm.account-applications dropdown-tree-view .treeview-header .row-filter {
|
||||
margin: var(--indent-base) var(--indent-xbase);
|
||||
}
|
||||
.webbpm.account-applications dropdown-tree-view .treeview-header .row-filter > div {
|
||||
padding: 0;
|
||||
}
|
||||
.webbpm.account-applications dropdown-tree-view .treeview-header input {
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--size-text-secondary);
|
||||
width: 100%;
|
||||
min-height: 32px;
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--input-border);
|
||||
border-radius: var(--indent-xmini) var(--indent-xmini) 0 0;
|
||||
background-color: var(--input-bg);
|
||||
box-shadow: none;
|
||||
}
|
||||
.webbpm.account-applications dropdown-tree-view .treeview-header input::placeholder {
|
||||
color: var(--color-text-mute);
|
||||
}
|
||||
.webbpm.account-applications dropdown-tree-view .treeview-header input::-webkit-input-placeholder {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
.webbpm.account-applications dropdown-tree-view .treeview-header input:-moz-placeholder {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
.webbpm.account-applications dropdown-tree-view .treeview-header input::-moz-placeholder {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
.webbpm.account-applications dropdown-tree-view .treeview-header input:-ms-input-placeholder {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
.webbpm.account-applications dropdown-tree-view .row-filter {
|
||||
position: relative;
|
||||
}
|
||||
.webbpm.account-applications dropdown-tree-view .row-filter::after {
|
||||
content: "\f52a";
|
||||
position: absolute;
|
||||
color: var(--color-text-active);
|
||||
font-family: bootstrap-icons !important;
|
||||
font-weight: 800 !important;
|
||||
font-size: var(--size-text-secondary);
|
||||
top: calc(50% - (var(--size-text-secondary) + var(--indent-mini)) / 2);
|
||||
right: var(--indent-xbase);
|
||||
}
|
||||
|
||||
.webbpm.account-applications dropdown-tree-view .dropdown-divider {
|
||||
margin: 0;
|
||||
border-color: var(--btn-border);
|
||||
}
|
||||
.webbpm.account-applications dropdown-tree-view :is(.row-item, .treeview-text) {
|
||||
color: var(--color-text-primary);
|
||||
padding: var(--indent-mini) var(--indent-xbase);
|
||||
border-bottom: 1px solid var(--btn-border);
|
||||
}
|
||||
.webbpm.account-applications dropdown-tree-view .row-item:is(:hover, :focus, :active) {
|
||||
color: var(--color-text-active);
|
||||
}
|
||||
.webbpm.account-applications dropdown-tree-view ngx-treeview-item ngx-treeview-item .treeview-item {
|
||||
padding-left: var(--indent-xbase);
|
||||
}
|
||||
.webbpm.account-applications dropdown-tree-view .row-item label {
|
||||
font-size: var(--size-text-primary);
|
||||
width: auto;
|
||||
min-width: min(7.5vw, 9.375rem); /*150*/
|
||||
}
|
||||
.webbpm.account-applications dropdown-tree-view :is(.bi-caret-down-fill, .bi-caret-right-fill) {
|
||||
margin-right: var(--indent-mini);
|
||||
}
|
||||
.webbpm.account-applications dropdown-tree-view :is(.bi-caret-down-fill, .bi-caret-right-fill)::before {
|
||||
position: relative;
|
||||
top: calc(var(--indent-xmini) / -4);
|
||||
font-size: var(--size-text-secondary);
|
||||
}
|
||||
.webbpm.account-applications dropdown-tree-view .bi-caret-down-fill::before {
|
||||
content: "\f2e9";
|
||||
}
|
||||
.webbpm.account-applications dropdown-tree-view .bi-caret-right-fill::before {
|
||||
content: "\f4fd";
|
||||
}
|
||||
/* DropDownTree end */
|
||||
|
||||
.webbpm.account-applications .selectize-dropdown,
|
||||
.webbpm.account-applications .selectize-input,
|
||||
.webbpm.account-applications .selectize-input input {
|
||||
|
|
@ -253,7 +394,7 @@
|
|||
border: 1px solid var(--btn-border) !important;
|
||||
background-color: var(--panel-bg);
|
||||
}
|
||||
.webbpm.account-applications collapsible-panel .card i {
|
||||
.webbpm.account-applications collapsible-panel .card i.fa {
|
||||
display: none;
|
||||
width: 16px;
|
||||
}
|
||||
|
|
@ -280,7 +421,6 @@
|
|||
}
|
||||
.webbpm.account-applications label {
|
||||
font-size: var(--size-text-mini);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.webbpm.account-applications .width-full label {
|
||||
width: 160px;
|
||||
|
|
|
|||
|
|
@ -31,7 +31,8 @@ body.webbpm.account-applications {
|
|||
--color-text-active: #107abc;
|
||||
--color-text-mute: rgba(2, 12, 18, 0.58);
|
||||
--color-link: #015e98;
|
||||
|
||||
--color-text-secondary: #b1daea;
|
||||
--body-bg: #f8fbfc;
|
||||
--btn-border: rgba(1, 72, 116, 0.11);
|
||||
--btn-bg: rgba(25, 164, 233, 0.1);
|
||||
--btn-active-bg: linear-gradient(155deg, #1491cf 0%, #0f68a0 100%);
|
||||
|
|
@ -40,8 +41,18 @@ body.webbpm.account-applications {
|
|||
--input-bg: rgba(219, 231, 242, 0.8);
|
||||
--input-border: rgba(53, 126, 172, 0.2);
|
||||
--panel-bg: rgba(53, 126, 172, 0.05);
|
||||
--page-bg: rgba(38, 117, 166, 0.03);
|
||||
|
||||
--page-bg: rgba(38, 117, 166, 0.03);
|
||||
--bg-blur-40: blur(20px);
|
||||
--bg-blur-20: blur(10px);
|
||||
--bg-shadow: 4px 4px 2px 0 rgba(3, 20, 36, 0.4);
|
||||
--color-primary-20: rgba(244, 252, 255, 0.2);
|
||||
--color-primary-5: rgba(244, 252, 255, 0.05);
|
||||
--color-success: #00db5d;
|
||||
--color-error: #f91e11;
|
||||
--color-dark: #070e1a;
|
||||
--color-dark-20: rgba(7, 14, 26, 0.2);
|
||||
--color-dark-40: rgba(7, 14, 26, 0.4);
|
||||
--color-tooltip: rgba(8, 40, 59, 0.8);
|
||||
--size-text-header: 32px;
|
||||
--size-text-title: 24px;
|
||||
--size-text-subtitle: 18px;
|
||||
|
|
@ -57,7 +68,11 @@ body.webbpm.account-applications {
|
|||
--indent-small: 12px;
|
||||
--indent-mini: 8px;
|
||||
--indent-xmini: 4px;
|
||||
|
||||
--color-success: #00db5d;
|
||||
--color-dark-20: rgba(7, 14, 26, 0.2);
|
||||
--w-content: calc((100vw - 300px)/100);
|
||||
--indent-huge: min(calc(2.4*var(--w-content)), 3rem); /*48*/
|
||||
--w-screen: min(calc(2*var(--w-content)), 2.5rem); /*40*/
|
||||
--h-header: 60px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,57 @@
|
|||
<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">
|
||||
<input class="form-control" type="text"
|
||||
[placeholder]="i18n.getFilterPlaceholder()"
|
||||
[(ngModel)]="filterText"
|
||||
(ngModelChange)="onFilterTextChange($event)" />
|
||||
</div>
|
||||
<div *ngIf="config.hasAllCheckBox || config.hasCollapseExpand" class="row">
|
||||
<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 *ngIf="config.hasDivider" class="dropdown-divider"></div>
|
||||
</ng-template>
|
||||
<ngx-dropdown-treeview
|
||||
[config]="config"
|
||||
[headerTemplate]="headerTemplate"
|
||||
[items]="items"
|
||||
[itemTemplate]="itemTemplate">
|
||||
</ngx-dropdown-treeview>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
|
||||
<div class="form-group">
|
||||
<label [ngbTooltip]="tooltip | emptyIfNull"
|
||||
[hidden]="!label" class="control-label">
|
||||
<span>{{label}}<span *ngIf="isRequired()" class="alarm"> *</span></span>
|
||||
</label>
|
||||
<div>
|
||||
<ngx-dropdown-treeview-select
|
||||
[items]="items"
|
||||
[maxHeight]="maxHeight"
|
||||
[(value)]="value"
|
||||
(valueChange)="onValueChange($event)">
|
||||
</ngx-dropdown-treeview-select>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -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",
|
||||
}
|
||||
|
|
@ -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 : 'Элемент не выбран';
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,255 @@
|
|||
import {
|
||||
ChangeDetectionStrategy,
|
||||
ChangeDetectorRef,
|
||||
Component,
|
||||
ElementRef,
|
||||
Input
|
||||
} from "@angular/core";
|
||||
import {
|
||||
AdvancedProperty,
|
||||
Event,
|
||||
InputControl,
|
||||
LocalStorageService,
|
||||
NotNull,
|
||||
PageContextHolder,
|
||||
PageObjectUtils,
|
||||
TaskParamsProvider,
|
||||
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,
|
||||
private i18n: DropdownTreeviewSelectI18n) {
|
||||
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 {
|
||||
this.rpcService.loadTreeData().then((res: TreeItemDto[]) => {
|
||||
this.populateTree(res);
|
||||
});
|
||||
}
|
||||
|
||||
private populateTree(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;
|
||||
}
|
||||
|
||||
isValueEmpty(): boolean {
|
||||
return this.value == null;
|
||||
}
|
||||
|
||||
hasValidModel(): boolean {
|
||||
return !this.isRequired() || !this.isValueEmpty()
|
||||
}
|
||||
|
||||
getPresentationValue(): string | number | boolean {
|
||||
return this.value;
|
||||
}
|
||||
|
||||
getValue(): any {
|
||||
return this.value;
|
||||
}
|
||||
|
||||
getValueAsModel(): any {
|
||||
return this.value ? this.value : null;
|
||||
}
|
||||
|
||||
getValueForForm(): any {
|
||||
return this.getBusinessId();
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -21,6 +21,9 @@ import {AppProgressIndicationService} from "./service/app-progress-indication.se
|
|||
import {VBoxLoadValues} from "../../account_applications/component/container/VBoxLoadValues";
|
||||
import {ErvuAccountTextFieldGridEditor} from "../../account_applications/component/editablegrid/editors/ErvuAccountTextFieldGridEditor";
|
||||
import {TokenInterceptor} from "./interceptor/token.interceptor.service";
|
||||
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 = [
|
||||
|
|
@ -29,6 +32,8 @@ export const DIRECTIVES = [
|
|||
forwardRef(() => ApplicationVersionComponent),
|
||||
forwardRef(() => AppProgressIndicationComponent),
|
||||
forwardRef(() => VBoxLoadValues),
|
||||
forwardRef(() => DropdownTreeViewComponent),
|
||||
forwardRef(() => DropdownTreeviewSelectComponent),
|
||||
forwardRef(() => ErvuAccountTextFieldGridEditor)
|
||||
];
|
||||
|
||||
|
|
@ -43,7 +48,8 @@ export const DIRECTIVES = [
|
|||
ComponentsModule,
|
||||
AgGridModule,
|
||||
RouterModule,
|
||||
InternationalPhoneNumberModule
|
||||
InternationalPhoneNumberModule,
|
||||
TreeviewModule.forRoot()
|
||||
],
|
||||
declarations: [
|
||||
DIRECTIVES
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue