@kuzntsv/uikit 1.0.79 → 1.0.81
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as i0 from "@angular/core";
|
|
2
|
-
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Directive, ElementRef, HostListener, Injectable, InjectionToken, Injector, NgZone, Pipe, computed, effect, inject, input, linkedSignal, makeEnvironmentProviders, model, output, signal, viewChild } from "@angular/core";
|
|
2
|
+
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Directive, ElementRef, HostListener, Injectable, InjectionToken, Injector, NgZone, Pipe, computed, effect, inject, input, linkedSignal, makeEnvironmentProviders, model, output, signal, untracked, viewChild } from "@angular/core";
|
|
3
3
|
import { Router, RouterLink } from "@angular/router";
|
|
4
4
|
import { ReplaySubject, Subject, Subscription, filter, finalize, forkJoin, map, of, startWith, switchMap, take, tap } from "rxjs";
|
|
5
|
-
import { API_NAME, AuthService, HIDE_ROLE_MARKER, NotificationService, RoleService, UIKIT_NOTIFICATION_TOKEN, formatZodError } from "@kuzntsv/uikit";
|
|
5
|
+
import { API_NAME, AuthService, HIDE_ROLE_MARKER, NotificationService, RoleService, SignalSelectionModel, UIKIT_NOTIFICATION_TOKEN, formatZodError } from "@kuzntsv/uikit";
|
|
6
6
|
import * as i1$1 from "@angular/forms";
|
|
7
7
|
import { FormControl, FormGroup, FormsModule, NgControl, ReactiveFormsModule, Validators } from "@angular/forms";
|
|
8
8
|
import { MatAnchor, MatButton, MatIconButton } from "@angular/material/button";
|
|
@@ -34,10 +34,9 @@ import { MatProgressSpinner } from "@angular/material/progress-spinner";
|
|
|
34
34
|
import * as i3$1 from "@angular/cdk/scrolling";
|
|
35
35
|
import { ScrollingModule } from "@angular/cdk/scrolling";
|
|
36
36
|
import { MatFormField as MatFormField$1, MatLabel as MatLabel$1, MatSelect } from "@angular/material/select";
|
|
37
|
-
import { SelectionModel } from "@angular/cdk/collections";
|
|
38
37
|
import { MatCheckbox } from "@angular/material/checkbox";
|
|
39
38
|
import * as i3 from "@angular/material/paginator";
|
|
40
|
-
import { MatPaginator, MatPaginatorModule } from "@angular/material/paginator";
|
|
39
|
+
import { MatPaginator, MatPaginatorIntl, MatPaginatorModule } from "@angular/material/paginator";
|
|
41
40
|
import * as i2 from "@angular/material/sort";
|
|
42
41
|
import { MatSort, MatSortModule } from "@angular/material/sort";
|
|
43
42
|
import * as i1 from "@angular/material/table";
|
|
@@ -4418,6 +4417,15 @@ const PageStateSchema = z.object({
|
|
|
4418
4417
|
pageSize: z.number().int().positive()
|
|
4419
4418
|
});
|
|
4420
4419
|
const TableStateSchema = SortStateSchema.merge(PageStateSchema);
|
|
4420
|
+
function getRuPaginatorIntl() {
|
|
4421
|
+
const intl = new MatPaginatorIntl();
|
|
4422
|
+
intl.itemsPerPageLabel = "Записей на странице";
|
|
4423
|
+
intl.firstPageLabel = "Первая страница";
|
|
4424
|
+
intl.previousPageLabel = "Предыдущая страница";
|
|
4425
|
+
intl.nextPageLabel = "Следующая страница";
|
|
4426
|
+
intl.lastPageLabel = "Последняя страница";
|
|
4427
|
+
return intl;
|
|
4428
|
+
}
|
|
4421
4429
|
var TableComponent = class TableComponent {
|
|
4422
4430
|
data = input([], ...ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []);
|
|
4423
4431
|
length = input(0, ...ngDevMode ? [{ debugName: "length" }] : /* istanbul ignore next */ []);
|
|
@@ -4454,64 +4462,67 @@ var TableComponent = class TableComponent {
|
|
|
4454
4462
|
defaultPageIndex = 0;
|
|
4455
4463
|
defaultPageSize = 10;
|
|
4456
4464
|
dataSource = new MatTableDataSource();
|
|
4457
|
-
selection =
|
|
4465
|
+
selection = computed(() => {
|
|
4466
|
+
return new SignalSelectionModel(this.allowMultiSelect(), [], (a, b) => a?.id === b?.id);
|
|
4467
|
+
}, ...ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []);
|
|
4458
4468
|
displayedColumns = computed(() => {
|
|
4459
4469
|
return ["select", ...this.columnOptions()?.filter((c) => !c.hide).map((item) => item.name) || []];
|
|
4460
4470
|
}, ...ngDevMode ? [{ debugName: "displayedColumns" }] : /* istanbul ignore next */ []);
|
|
4471
|
+
totals = computed(() => {
|
|
4472
|
+
const currentData = this.data();
|
|
4473
|
+
const options = this.columnOptions();
|
|
4474
|
+
const result = {};
|
|
4475
|
+
options.forEach((col) => {
|
|
4476
|
+
if (!col.footer) return;
|
|
4477
|
+
const values = currentData.map((t) => t[col.name]).filter((v) => typeof v === "number");
|
|
4478
|
+
result[col.name] = values.length ? values.reduce((acc, v) => acc + v, 0) : "";
|
|
4479
|
+
});
|
|
4480
|
+
return result;
|
|
4481
|
+
}, ...ngDevMode ? [{ debugName: "totals" }] : /* istanbul ignore next */ []);
|
|
4461
4482
|
constructor() {
|
|
4462
4483
|
effect(() => {
|
|
4463
4484
|
this.dataSource.data = [...this.data()];
|
|
4464
|
-
|
|
4465
|
-
|
|
4466
|
-
|
|
4467
|
-
|
|
4468
|
-
}
|
|
4485
|
+
const currentData = this.data();
|
|
4486
|
+
const model = this.selection();
|
|
4487
|
+
const nextSelected = currentData.filter((item) => model.isSelected(item));
|
|
4488
|
+
if (nextSelected.length > 0) model.select(...nextSelected);
|
|
4469
4489
|
});
|
|
4470
4490
|
effect(() => {
|
|
4471
|
-
const
|
|
4472
|
-
|
|
4473
|
-
paginator._intl.itemsPerPageLabel = "Записей на странице";
|
|
4474
|
-
paginator._intl.firstPageLabel = "Первая страница";
|
|
4475
|
-
paginator._intl.previousPageLabel = "Предыдущая страница";
|
|
4476
|
-
paginator._intl.nextPageLabel = "Следующая страница";
|
|
4477
|
-
paginator._intl.lastPageLabel = "Последняя страница";
|
|
4478
|
-
paginator._intl.changes.next();
|
|
4479
|
-
}
|
|
4480
|
-
});
|
|
4481
|
-
}
|
|
4482
|
-
ngOnInit() {
|
|
4483
|
-
this.selection = new SelectionModel(this.allowMultiSelect());
|
|
4484
|
-
this.selection.changed.subscribe((change) => {
|
|
4485
|
-
this.selectionChange.emit(change.source.selected);
|
|
4491
|
+
const selectedArray = this.selection().selected();
|
|
4492
|
+
untracked(() => this.selectionChange.emit(selectedArray));
|
|
4486
4493
|
});
|
|
4487
4494
|
}
|
|
4488
4495
|
onPageEvent(event) {
|
|
4489
|
-
|
|
4496
|
+
const newState = {
|
|
4490
4497
|
pageIndex: event.pageIndex,
|
|
4491
4498
|
pageSize: event.pageSize
|
|
4492
|
-
}
|
|
4499
|
+
};
|
|
4500
|
+
this.pageState.set(newState);
|
|
4501
|
+
this.pageStateChange.emit(newState);
|
|
4493
4502
|
}
|
|
4494
4503
|
onSortEvent(sort) {
|
|
4495
|
-
|
|
4504
|
+
const newState = {
|
|
4496
4505
|
sortActive: sort.active,
|
|
4497
4506
|
sortDirection: sort.direction
|
|
4498
|
-
}
|
|
4507
|
+
};
|
|
4508
|
+
this.sortState.set(newState);
|
|
4509
|
+
this.sortStateChange.emit(newState);
|
|
4499
4510
|
}
|
|
4500
4511
|
isAllSelected() {
|
|
4501
|
-
|
|
4512
|
+
const pageRows = this.dataSource.data;
|
|
4513
|
+
if (pageRows.length === 0) return false;
|
|
4514
|
+
return pageRows.every((row) => this.selection().isSelected(row));
|
|
4502
4515
|
}
|
|
4503
4516
|
masterToggle() {
|
|
4504
|
-
|
|
4505
|
-
|
|
4506
|
-
else this.dataSource.data.forEach((row) => this.selection.select(row));
|
|
4517
|
+
if (this.isAllSelected()) this.selection().clear();
|
|
4518
|
+
else this.selection().select(...this.dataSource.data);
|
|
4507
4519
|
}
|
|
4508
4520
|
onRowClicked(row) {
|
|
4509
|
-
|
|
4510
|
-
else this.selection.select(row);
|
|
4521
|
+
this.selection().toggle(row);
|
|
4511
4522
|
}
|
|
4512
4523
|
onRowDblClicked(row) {
|
|
4513
|
-
this.selection.clear();
|
|
4514
|
-
this.selection.select(row);
|
|
4524
|
+
this.selection().clear();
|
|
4525
|
+
this.selection().select(row);
|
|
4515
4526
|
if (!this.rowDblClickedDisable()) this.rowDoubleClicked.emit(row);
|
|
4516
4527
|
}
|
|
4517
4528
|
onContextMenu(event, itemForMenu) {
|
|
@@ -4527,11 +4538,6 @@ var TableComponent = class TableComponent {
|
|
|
4527
4538
|
contextMenu.openMenu();
|
|
4528
4539
|
}
|
|
4529
4540
|
}
|
|
4530
|
-
getTotal(columnName) {
|
|
4531
|
-
const arr = this.dataSource.data.filter((t) => typeof t[columnName] === "number").map((t) => t[columnName]);
|
|
4532
|
-
if (arr.length === 0) return "";
|
|
4533
|
-
else return arr.reduce((acc, value) => acc + value, 0);
|
|
4534
|
-
}
|
|
4535
4541
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
4536
4542
|
minVersion: "12.0.0",
|
|
4537
4543
|
version: "22.2.2",
|
|
@@ -4610,6 +4616,10 @@ var TableComponent = class TableComponent {
|
|
|
4610
4616
|
selectionChange: "selectionChange",
|
|
4611
4617
|
rowDoubleClicked: "rowDoubleClicked"
|
|
4612
4618
|
},
|
|
4619
|
+
providers: [{
|
|
4620
|
+
provide: MatPaginatorIntl,
|
|
4621
|
+
useFactory: getRuPaginatorIntl
|
|
4622
|
+
}],
|
|
4613
4623
|
viewQueries: [
|
|
4614
4624
|
{
|
|
4615
4625
|
propertyName: "sort",
|
|
@@ -4634,7 +4644,7 @@ var TableComponent = class TableComponent {
|
|
|
4634
4644
|
}
|
|
4635
4645
|
],
|
|
4636
4646
|
ngImport: i0,
|
|
4637
|
-
template: "<div class=\"component-container\">\r\n <div class=\"table-container\">\r\n <table mat-table [dataSource]=\"dataSource\"\r\n matSort\r\n [matSortActive]=\"sortState().sortActive\"\r\n [matSortDirection]=\"sortState().sortDirection\"\r\n (matSortChange)=\"onSortEvent($event)\"\r\n matSortDisableClear>\r\n\r\n <!-- Выбор строки Column -->\r\n <ng-container matColumnDef=\"select\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n @if (allowMultiSelect()) {\r\n <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\r\n </mat-checkbox>\r\n }\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(row) : null\"\r\n [checked]=\"selection.isSelected(row)\">\r\n </mat-checkbox>\r\n </td>\r\n @if (footer()) {\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n }\r\n </ng-container>\r\n\r\n @for (item of columnOptions(); track item) {\r\n <ng-container matColumnDef={{item.name}}>\r\n <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]=\"item.titleSortDisable\">{{item.title}}</th>\r\n @if (!item.format) {\r\n <td mat-cell *matCellDef=\"let element\" (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n {{element[item.name]}}\r\n </td>\r\n @if (footer()) {\r\n <td mat-footer-cell *matFooterCellDef>\r\n @if (item.footer) {\r\n <strong>{{ getTotal(item.name) }}</strong>\r\n }\r\n @if (item.footerTitle) {\r\n <strong>{{ item.footerTitle }}</strong>\r\n }\r\n </td>\r\n } \r\n }\r\n @if (item.format === 'pre-wrap') {\r\n <td mat-cell *matCellDef=\"let element\" (contextmenu)=\"onContextMenu($event, element)\" class=\"pre-wrap\" [matTooltip]=\"item.tooltip ?? ''\">\r\n {{element[item.name]}}\r\n </td>\r\n @if (footer()) {\r\n <td mat-footer-cell *matFooterCellDef>\r\n @if (item.footerTitle) {\r\n <strong>{{ item.footerTitle }}</strong>\r\n }\r\n </td>\r\n }\r\n }\r\n @if (item.format === 'link') {\r\n <td mat-cell *matCellDef=\"let element\" (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n <a [href]=\"element[item.name]\" target=\"_blank\">{{element[item.name]}}</a>\r\n </td>\r\n @if (footer()) {\r\n <td mat-footer-cell *matFooterCellDef>\r\n @if (item.footerTitle) {\r\n <strong>{{ item.footerTitle }}</strong>\r\n }\r\n </td>\r\n }\r\n }\r\n @if (item.format === 'linkIcon') {\r\n <td mat-cell *matCellDef=\"let element\" (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n @if (element[item.name]) {\r\n <a [href]=\"element[item.name]\" target=\"_blank\">\r\n @if (item.icon) {\r\n <mat-icon [class]=\"item.classList ? item.classList : ''\" >{{item.icon}}</mat-icon>\r\n } \r\n @if (item.symbol) {\r\n <span [class]=\"item.classList ? item.classList : ''\" >{{item.symbol}}</span>\r\n }\r\n </a>\r\n }\r\n </td>\r\n @if (footer()) {\r\n <td mat-footer-cell *matFooterCellDef>\r\n @if (item.footerTitle) {\r\n <strong>{{ item.footerTitle }}</strong>\r\n }\r\n </td>\r\n }\r\n }\r\n @if (item.format === 'routerLink') {\r\n <td mat-cell *matCellDef=\"let element\" (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n <a [routerLink]=\"[element[item.name]]\">{{element[item.name]}}</a>\r\n </td>\r\n @if (footer()) {\r\n <td mat-footer-cell *matFooterCellDef>\r\n @if (item.footerTitle) {\r\n <strong>{{ item.footerTitle }}</strong>\r\n }\r\n </td>\r\n }\r\n }\r\n @if (item.format === 'routerLinkIcon') {\r\n <td mat-cell *matCellDef=\"let element\" (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n @if (element[item.name]) {\r\n <a [routerLink]=\"[element[item.name]]\">\r\n @if (item.icon) {\r\n <mat-icon [class]=\"item.classList ? item.classList : ''\" >{{item.icon}}</mat-icon>\r\n } \r\n @if (item.symbol) {\r\n <span [class]=\"item.classList ? item.classList : ''\" >{{item.symbol}}</span>\r\n }\r\n </a>\r\n }\r\n </td>\r\n @if (footer()) {\r\n <td mat-footer-cell *matFooterCellDef>\r\n @if (item.footerTitle) {\r\n <strong>{{ item.footerTitle }}</strong>\r\n }\r\n </td>\r\n }\r\n }\r\n @if (item.format === 'checkbox') {\r\n <td mat-cell *matCellDef=\"let element\" (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n <mat-checkbox [checked]=\"element[item.name] === 1\" [disabled]=\"true\"></mat-checkbox>\r\n </td>\r\n @if (footer()) {\r\n <td mat-footer-cell *matFooterCellDef>\r\n @if (item.footerTitle) {\r\n <strong>{{ item.footerTitle }}</strong>\r\n }\r\n </td>\r\n }\r\n }\r\n @if (item.format === 'icon') {\r\n <td mat-cell *matCellDef=\"let element\" (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n @if (item.icon) {\r\n <mat-icon [class]=\"item.classList ? item.classList : ''\" >{{item.icon}}</mat-icon>\r\n } \r\n @if (item.symbol) {\r\n <span [class]=\"item.classList ? item.classList : ''\" >{{item.symbol}}</span>\r\n }\r\n </td>\r\n @if (footer()) {\r\n <td mat-footer-cell *matFooterCellDef>\r\n @if (item.footerTitle) {\r\n <strong>{{ item.footerTitle }}</strong>\r\n }\r\n </td>\r\n }\r\n }\r\n @if (item.format === 'icons') {\r\n <td mat-cell *matCellDef=\"let element\" (contextmenu)=\"onContextMenu($event, element)\">\r\n @if (item.icons) {\r\n <mat-icon [class]=\"item.classList ? item.classList[element[item.name]] : ''\" \r\n [matTooltip]=\"item.tooltips ? item.tooltips[element[item.name]] : ''\">{{item.icons[element[item.name]]}}</mat-icon>\r\n } \r\n @if (item.symbols) {\r\n <span [class]=\"item.classList ? item.classList[element[item.name]] : ''\" >{{item.symbols[element[item.name]]}}</span>\r\n }\r\n </td>\r\n @if (footer()) {\r\n <td mat-footer-cell *matFooterCellDef>\r\n @if (item.footerTitle) {\r\n <strong>{{ item.footerTitle }}</strong>\r\n }\r\n </td>\r\n }\r\n }\r\n @if (item.format === 'actions') {\r\n <td mat-cell *matCellDef=\"let element\" (contextmenu)=\"onContextMenu($event, element)\">\r\n @if (item.actions) {\r\n <div class=\"actions-container\">\r\n @for (action of item.actions; track action) {\r\n @if (!(action.hideFn ? action.hideFn(element) : action.hide)) {\r\n <button mat-icon-button\r\n (click)=\"action.onClickFn ? action.onClickFn(element) : ''\"\r\n (mousedown)=\"action.onClickMiddleFn ? action.onClickMiddleFn($event, element) : ''\"\r\n [disabled]=\"action.disabledFn ? action.disabledFn(element) : action.disabled\"\r\n [matTooltip]=\"action.tooltip ? action.tooltip : ''\" >\r\n @if (action.icon) {\r\n <mat-icon [class]=\"action.classList ? action.classList : ''\" >{{action.icon}}</mat-icon>\r\n }\r\n @if (action.symbol) {\r\n <span [class]=\"action.classList ? action.classList : ''\" >{{action.symbol}}</span>\r\n }\r\n {{ action.title }}\r\n </button>\r\n }\r\n }\r\n </div>\r\n } \r\n </td>\r\n @if (footer()) {\r\n <td mat-footer-cell *matFooterCellDef>\r\n @if (item.footerTitle) {\r\n <strong>{{ item.footerTitle }}</strong>\r\n }\r\n </td>\r\n }\r\n }\r\n @if (item.format === 'image') {\r\n <td mat-cell *matCellDef=\"let element\" (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n @if (element[item.name]) {\r\n <img\r\n [src]=\"element[item.name]\"\r\n [alt]=\"item.imageAlt && element[item.imageAlt] ? element[item.imageAlt] : ''\"\r\n [class]=\"item.classList ? item.classList : ''\"\r\n />\r\n } \r\n </td>\r\n @if (footer()) {\r\n <td mat-footer-cell *matFooterCellDef>\r\n @if (item.footerTitle) {\r\n <strong>{{ item.footerTitle }}</strong>\r\n }\r\n </td>\r\n }\r\n }\r\n </ng-container>\r\n }\r\n\r\n <tr class=\"mat-row\" *matNoDataRow>\r\n <td class=\"mat-cell\" colspan=\"9999\">\r\n Нет данных для отображения\r\n </td>\r\n </tr>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns(); sticky: true\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns();\" \r\n (click)=\"onRowClicked(row)\" (dblclick)=\"onRowDblClicked(row)\" \r\n class=\"element-row\" [class.selected-row]=\"selection.isSelected(row)\">\r\n </tr>\r\n @if (footer()) {\r\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns(); sticky: true\"></tr>\r\n }\r\n </table>\r\n <div style=\"visibility: hidden; position: fixed\"\r\n [style.left]=\"contextMenuPosition.x\"\r\n [style.top]=\"contextMenuPosition.y\"\r\n [matMenuTriggerFor]=\"contextMenu\" #menuTrigger=\"matMenuTrigger\">\r\n </div>\r\n <mat-menu #contextMenu=\"matMenu\">\r\n <ng-template matMenuContent let-id=\"id\">\r\n @for (menuItem of opt(); track menuItem) {\r\n @if (menuItem.title === '-' && !(menuItem.hideFn ? menuItem.hideFn(itemForMenu) : menuItem.hide)) {\r\n <mat-divider></mat-divider>\r\n }\r\n @if (menuItem.title !== '-' && !(menuItem.hideFn ? menuItem.hideFn(itemForMenu) : menuItem.hide)) {\r\n <button mat-menu-item\r\n (click)=\"menuItem.onClickFn ? menuItem.onClickFn(itemForMenu) : ''\"\r\n (mousedown)=\"menuItem.onClickMiddleFn ? menuItem.onClickMiddleFn($event, itemForMenu, menuTrigger) : ''\"\r\n [disabled]=\"menuItem.disabledFn ? menuItem.disabledFn(itemForMenu) : menuItem.disabled\">\r\n @if (menuItem.icon) {\r\n <mat-icon [class]=\"menuItem.classList ? menuItem.classList : ''\">{{menuItem.icon}}</mat-icon>\r\n }\r\n @if (menuItem.symbol) {\r\n <span [class]=\"menuItem.classList ? menuItem.classList : ''\">{{menuItem.symbol}}</span>\r\n }\r\n {{ menuItem.title }}\r\n </button>\r\n }\r\n }\r\n </ng-template>\r\n </mat-menu>\r\n</div>\r\n\r\n\r\n<mat-paginator [length]=\"length()\"\r\n [pageIndex]=\"pageState().pageIndex || defaultPageIndex\"\r\n [pageSizeOptions]=\"[5, 10, 20, 50, 100]\"\r\n [pageSize]=\"pageState().pageSize || defaultPageSize\"\r\n (page)=\"onPageEvent($event)\"\r\n showFirstLastButtons\r\n itemsPerPageLabel=\"\"\r\n></mat-paginator>\r\n</div>\r\n",
|
|
4647
|
+
template: "<div class=\"component-container\">\r\n <div class=\"table-container\">\r\n <table\r\n mat-table\r\n [dataSource]=\"dataSource\"\r\n matSort\r\n [matSortActive]=\"sortState().sortActive\"\r\n [matSortDirection]=\"sortState().sortDirection\"\r\n (matSortChange)=\"onSortEvent($event)\"\r\n matSortDisableClear\r\n >\r\n <!-- Выбор строки Column -->\r\n <ng-container matColumnDef=\"select\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n @if (allowMultiSelect()) {\r\n <mat-checkbox\r\n (change)=\"$event ? masterToggle() : null\"\r\n [checked]=\"selection().hasValue() && isAllSelected()\"\r\n [indeterminate]=\"selection().hasValue() && !isAllSelected()\"\r\n >\r\n </mat-checkbox>\r\n }\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <mat-checkbox\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? onRowClicked(row) : null\"\r\n [checked]=\"selection().isSelected(row)\"\r\n >\r\n </mat-checkbox>\r\n </td>\r\n @if (footer()) {\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n }\r\n </ng-container>\r\n\r\n @for (item of columnOptions(); track item.name) {\r\n <ng-container [matColumnDef]=\"item.name\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n mat-sort-header\r\n [disabled]=\"item.titleSortDisable\"\r\n >\r\n {{ item.title }}\r\n </th>\r\n @if (!item.format) {\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element\"\r\n (contextmenu)=\"onContextMenu($event, element)\"\r\n [matTooltip]=\"item.tooltip ?? ''\"\r\n >\r\n {{ element[item.name] }}\r\n </td>\r\n @if (footer()) {\r\n <td mat-footer-cell *matFooterCellDef>\r\n @if (item.footer) {\r\n <strong>{{ totals()[item.name] }}</strong>\r\n }\r\n @if (item.footerTitle) {\r\n <strong>{{ item.footerTitle }}</strong>\r\n }\r\n </td>\r\n }\r\n }\r\n @if (item.format === \"pre-wrap\") {\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element\"\r\n (contextmenu)=\"onContextMenu($event, element)\"\r\n class=\"pre-wrap\"\r\n [matTooltip]=\"item.tooltip ?? ''\"\r\n >\r\n {{ element[item.name] }}\r\n </td>\r\n @if (footer()) {\r\n <td mat-footer-cell *matFooterCellDef>\r\n @if (item.footerTitle) {\r\n <strong>{{ item.footerTitle }}</strong>\r\n }\r\n </td>\r\n }\r\n }\r\n @if (item.format === \"link\") {\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element\"\r\n (contextmenu)=\"onContextMenu($event, element)\"\r\n [matTooltip]=\"item.tooltip ?? ''\"\r\n >\r\n <a [href]=\"element[item.name]\" target=\"_blank\">{{\r\n element[item.name]\r\n }}</a>\r\n </td>\r\n @if (footer()) {\r\n <td mat-footer-cell *matFooterCellDef>\r\n @if (item.footerTitle) {\r\n <strong>{{ item.footerTitle }}</strong>\r\n }\r\n </td>\r\n }\r\n }\r\n @if (item.format === \"linkIcon\") {\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element\"\r\n (contextmenu)=\"onContextMenu($event, element)\"\r\n [matTooltip]=\"item.tooltip ?? ''\"\r\n >\r\n @if (element[item.name]) {\r\n <a [href]=\"element[item.name]\" target=\"_blank\">\r\n @if (item.icon) {\r\n <mat-icon [class]=\"item.classList ? item.classList : ''\">{{\r\n item.icon\r\n }}</mat-icon>\r\n }\r\n @if (item.symbol) {\r\n <span [class]=\"item.classList ? item.classList : ''\">{{\r\n item.symbol\r\n }}</span>\r\n }\r\n </a>\r\n }\r\n </td>\r\n @if (footer()) {\r\n <td mat-footer-cell *matFooterCellDef>\r\n @if (item.footerTitle) {\r\n <strong>{{ item.footerTitle }}</strong>\r\n }\r\n </td>\r\n }\r\n }\r\n @if (item.format === \"routerLink\") {\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element\"\r\n (contextmenu)=\"onContextMenu($event, element)\"\r\n [matTooltip]=\"item.tooltip ?? ''\"\r\n >\r\n <a [routerLink]=\"[element[item.name]]\">{{\r\n element[item.name]\r\n }}</a>\r\n </td>\r\n @if (footer()) {\r\n <td mat-footer-cell *matFooterCellDef>\r\n @if (item.footerTitle) {\r\n <strong>{{ item.footerTitle }}</strong>\r\n }\r\n </td>\r\n }\r\n }\r\n @if (item.format === \"routerLinkIcon\") {\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element\"\r\n (contextmenu)=\"onContextMenu($event, element)\"\r\n [matTooltip]=\"item.tooltip ?? ''\"\r\n >\r\n @if (element[item.name]) {\r\n <a [routerLink]=\"[element[item.name]]\">\r\n @if (item.icon) {\r\n <mat-icon [class]=\"item.classList ? item.classList : ''\">{{\r\n item.icon\r\n }}</mat-icon>\r\n }\r\n @if (item.symbol) {\r\n <span [class]=\"item.classList ? item.classList : ''\">{{\r\n item.symbol\r\n }}</span>\r\n }\r\n </a>\r\n }\r\n </td>\r\n @if (footer()) {\r\n <td mat-footer-cell *matFooterCellDef>\r\n @if (item.footerTitle) {\r\n <strong>{{ item.footerTitle }}</strong>\r\n }\r\n </td>\r\n }\r\n }\r\n @if (item.format === \"checkbox\") {\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element\"\r\n (contextmenu)=\"onContextMenu($event, element)\"\r\n [matTooltip]=\"item.tooltip ?? ''\"\r\n >\r\n <mat-checkbox\r\n [checked]=\"element[item.name] === 1\"\r\n [disabled]=\"true\"\r\n ></mat-checkbox>\r\n </td>\r\n @if (footer()) {\r\n <td mat-footer-cell *matFooterCellDef>\r\n @if (item.footerTitle) {\r\n <strong>{{ item.footerTitle }}</strong>\r\n }\r\n </td>\r\n }\r\n }\r\n @if (item.format === \"icon\") {\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element\"\r\n (contextmenu)=\"onContextMenu($event, element)\"\r\n [matTooltip]=\"item.tooltip ?? ''\"\r\n >\r\n @if (item.icon) {\r\n <mat-icon [class]=\"item.classList ? item.classList : ''\">{{\r\n item.icon\r\n }}</mat-icon>\r\n }\r\n @if (item.symbol) {\r\n <span [class]=\"item.classList ? item.classList : ''\">{{\r\n item.symbol\r\n }}</span>\r\n }\r\n </td>\r\n @if (footer()) {\r\n <td mat-footer-cell *matFooterCellDef>\r\n @if (item.footerTitle) {\r\n <strong>{{ item.footerTitle }}</strong>\r\n }\r\n </td>\r\n }\r\n }\r\n @if (item.format === \"icons\") {\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element\"\r\n (contextmenu)=\"onContextMenu($event, element)\"\r\n >\r\n @if (item.icons) {\r\n <mat-icon\r\n [class]=\"\r\n item.classList ? item.classList[element[item.name]] : ''\r\n \"\r\n [matTooltip]=\"\r\n item.tooltips ? item.tooltips[element[item.name]] : ''\r\n \"\r\n >{{ item.icons[element[item.name]] }}</mat-icon\r\n >\r\n }\r\n @if (item.symbols) {\r\n <span\r\n [class]=\"\r\n item.classList ? item.classList[element[item.name]] : ''\r\n \"\r\n >{{ item.symbols[element[item.name]] }}</span\r\n >\r\n }\r\n </td>\r\n @if (footer()) {\r\n <td mat-footer-cell *matFooterCellDef>\r\n @if (item.footerTitle) {\r\n <strong>{{ item.footerTitle }}</strong>\r\n }\r\n </td>\r\n }\r\n }\r\n @if (item.format === \"actions\") {\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element\"\r\n (contextmenu)=\"onContextMenu($event, element)\"\r\n >\r\n @if (item.actions) {\r\n <div class=\"actions-container\">\r\n @for (action of item.actions; track action) {\r\n @if (\r\n !(action.hideFn ? action.hideFn(element) : action.hide)\r\n ) {\r\n <button\r\n mat-icon-button\r\n (click)=\"\r\n action.onClickFn ? action.onClickFn(element) : ''\r\n \"\r\n (mousedown)=\"\r\n action.onClickMiddleFn\r\n ? action.onClickMiddleFn($event, element)\r\n : ''\r\n \"\r\n [disabled]=\"\r\n action.disabledFn\r\n ? action.disabledFn(element)\r\n : action.disabled\r\n \"\r\n [matTooltip]=\"action.tooltip ? action.tooltip : ''\"\r\n >\r\n @if (action.icon) {\r\n <mat-icon\r\n [class]=\"action.classList ? action.classList : ''\"\r\n >{{ action.icon }}</mat-icon\r\n >\r\n }\r\n @if (action.symbol) {\r\n <span\r\n [class]=\"action.classList ? action.classList : ''\"\r\n >{{ action.symbol }}</span\r\n >\r\n }\r\n {{ action.title }}\r\n </button>\r\n }\r\n }\r\n </div>\r\n }\r\n </td>\r\n @if (footer()) {\r\n <td mat-footer-cell *matFooterCellDef>\r\n @if (item.footerTitle) {\r\n <strong>{{ item.footerTitle }}</strong>\r\n }\r\n </td>\r\n }\r\n }\r\n @if (item.format === \"image\") {\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element\"\r\n (contextmenu)=\"onContextMenu($event, element)\"\r\n [matTooltip]=\"item.tooltip ?? ''\"\r\n >\r\n @if (element[item.name]) {\r\n <img\r\n [src]=\"element[item.name]\"\r\n [alt]=\"\r\n item.imageAlt && element[item.imageAlt]\r\n ? element[item.imageAlt]\r\n : ''\r\n \"\r\n [class]=\"item.classList ? item.classList : ''\"\r\n />\r\n }\r\n </td>\r\n @if (footer()) {\r\n <td mat-footer-cell *matFooterCellDef>\r\n @if (item.footerTitle) {\r\n <strong>{{ item.footerTitle }}</strong>\r\n }\r\n </td>\r\n }\r\n }\r\n </ng-container>\r\n }\r\n\r\n <tr class=\"mat-row\" *matNoDataRow>\r\n <td class=\"mat-cell\" colspan=\"9999\">Нет данных для отображения</td>\r\n </tr>\r\n\r\n <tr\r\n mat-header-row\r\n *matHeaderRowDef=\"displayedColumns(); sticky: true\"\r\n ></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: displayedColumns();\"\r\n (click)=\"onRowClicked(row)\"\r\n (dblclick)=\"onRowDblClicked(row)\"\r\n class=\"element-row\"\r\n [class.selected-row]=\"selection().isSelected(row)\"\r\n ></tr>\r\n @if (footer()) {\r\n <tr\r\n mat-footer-row\r\n *matFooterRowDef=\"displayedColumns(); sticky: true\"\r\n ></tr>\r\n }\r\n </table>\r\n <div\r\n style=\"visibility: hidden; position: fixed\"\r\n [style.left]=\"contextMenuPosition.x\"\r\n [style.top]=\"contextMenuPosition.y\"\r\n [matMenuTriggerFor]=\"contextMenu\"\r\n #menuTrigger=\"matMenuTrigger\"\r\n ></div>\r\n <mat-menu #contextMenu=\"matMenu\">\r\n <ng-template matMenuContent let-id=\"id\">\r\n @for (menuItem of opt(); track menuItem) {\r\n @if (\r\n menuItem.title === \"-\" &&\r\n !(menuItem.hideFn ? menuItem.hideFn(itemForMenu) : menuItem.hide)\r\n ) {\r\n <mat-divider></mat-divider>\r\n }\r\n @if (\r\n menuItem.title !== \"-\" &&\r\n !(menuItem.hideFn ? menuItem.hideFn(itemForMenu) : menuItem.hide)\r\n ) {\r\n <button\r\n mat-menu-item\r\n (click)=\"\r\n menuItem.onClickFn ? menuItem.onClickFn(itemForMenu) : ''\r\n \"\r\n (mousedown)=\"\r\n menuItem.onClickMiddleFn\r\n ? menuItem.onClickMiddleFn($event, itemForMenu, menuTrigger)\r\n : ''\r\n \"\r\n [disabled]=\"\r\n menuItem.disabledFn\r\n ? menuItem.disabledFn(itemForMenu)\r\n : menuItem.disabled\r\n \"\r\n >\r\n @if (menuItem.icon) {\r\n <mat-icon\r\n [class]=\"menuItem.classList ? menuItem.classList : ''\"\r\n >{{ menuItem.icon }}</mat-icon\r\n >\r\n }\r\n @if (menuItem.symbol) {\r\n <span [class]=\"menuItem.classList ? menuItem.classList : ''\">{{\r\n menuItem.symbol\r\n }}</span>\r\n }\r\n {{ menuItem.title }}\r\n </button>\r\n }\r\n }\r\n </ng-template>\r\n </mat-menu>\r\n </div>\r\n\r\n <mat-paginator\r\n [length]=\"length()\"\r\n [pageIndex]=\"pageState().pageIndex || defaultPageIndex\"\r\n [pageSizeOptions]=\"[5, 10, 20, 50, 100]\"\r\n [pageSize]=\"pageState().pageSize || defaultPageSize\"\r\n (page)=\"onPageEvent($event)\"\r\n showFirstLastButtons\r\n itemsPerPageLabel=\"\"\r\n ></mat-paginator>\r\n</div>\r\n",
|
|
4638
4648
|
styles: [".component-container{display:flex;flex-direction:column;height:100%}.table-container{display:flex;flex-direction:column;justify-content:space-between;flex:auto;margin:0 20px;overflow:auto;height:400px}.center{position:absolute;inset:0 0 56px;background:#00000026;z-index:1;display:flex;align-items:center;justify-content:center}.mat-column-select{overflow:initial}tr.mat-footer-row{font-weight:700;height:56px}.mat-table{overflow-x:scroll}.mat-cell,.mat-header-cell{word-wrap:initial;display:table-cell;padding:0 10px;line-break:unset;white-space:nowrap;overflow:hidden;vertical-align:middle}.mat-row,.mat-header-row{display:table-row}tr.element-row:not(.selected-row):hover{background:#f5f5f5}tr.element-row:not(.selected-row):active{background:#efefef}.selected-row{background-color:#eee}.fact-done-row{background-color:#eefdec}a,a:visited,a:hover,a:active{color:inherit}.pre-wrap{white-space:pre-wrap}.actions-container{display:flex;column-gap:5px}\n"],
|
|
4639
4649
|
dependencies: [
|
|
4640
4650
|
{
|
|
@@ -4950,7 +4960,11 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
4950
4960
|
MatTooltipModule,
|
|
4951
4961
|
MatIconButton
|
|
4952
4962
|
],
|
|
4953
|
-
template: "<div class=\"component-container\">\r\n <div class=\"table-container\">\r\n <table mat-table [dataSource]=\"dataSource\"\r\n matSort\r\n [matSortActive]=\"sortState().sortActive\"\r\n [matSortDirection]=\"sortState().sortDirection\"\r\n (matSortChange)=\"onSortEvent($event)\"\r\n matSortDisableClear>\r\n\r\n <!-- Выбор строки Column -->\r\n <ng-container matColumnDef=\"select\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n @if (allowMultiSelect()) {\r\n <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\r\n </mat-checkbox>\r\n }\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(row) : null\"\r\n [checked]=\"selection.isSelected(row)\">\r\n </mat-checkbox>\r\n </td>\r\n @if (footer()) {\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n }\r\n </ng-container>\r\n\r\n @for (item of columnOptions(); track item) {\r\n <ng-container matColumnDef={{item.name}}>\r\n <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]=\"item.titleSortDisable\">{{item.title}}</th>\r\n @if (!item.format) {\r\n <td mat-cell *matCellDef=\"let element\" (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n {{element[item.name]}}\r\n </td>\r\n @if (footer()) {\r\n <td mat-footer-cell *matFooterCellDef>\r\n @if (item.footer) {\r\n <strong>{{ getTotal(item.name) }}</strong>\r\n }\r\n @if (item.footerTitle) {\r\n <strong>{{ item.footerTitle }}</strong>\r\n }\r\n </td>\r\n } \r\n }\r\n @if (item.format === 'pre-wrap') {\r\n <td mat-cell *matCellDef=\"let element\" (contextmenu)=\"onContextMenu($event, element)\" class=\"pre-wrap\" [matTooltip]=\"item.tooltip ?? ''\">\r\n {{element[item.name]}}\r\n </td>\r\n @if (footer()) {\r\n <td mat-footer-cell *matFooterCellDef>\r\n @if (item.footerTitle) {\r\n <strong>{{ item.footerTitle }}</strong>\r\n }\r\n </td>\r\n }\r\n }\r\n @if (item.format === 'link') {\r\n <td mat-cell *matCellDef=\"let element\" (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n <a [href]=\"element[item.name]\" target=\"_blank\">{{element[item.name]}}</a>\r\n </td>\r\n @if (footer()) {\r\n <td mat-footer-cell *matFooterCellDef>\r\n @if (item.footerTitle) {\r\n <strong>{{ item.footerTitle }}</strong>\r\n }\r\n </td>\r\n }\r\n }\r\n @if (item.format === 'linkIcon') {\r\n <td mat-cell *matCellDef=\"let element\" (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n @if (element[item.name]) {\r\n <a [href]=\"element[item.name]\" target=\"_blank\">\r\n @if (item.icon) {\r\n <mat-icon [class]=\"item.classList ? item.classList : ''\" >{{item.icon}}</mat-icon>\r\n } \r\n @if (item.symbol) {\r\n <span [class]=\"item.classList ? item.classList : ''\" >{{item.symbol}}</span>\r\n }\r\n </a>\r\n }\r\n </td>\r\n @if (footer()) {\r\n <td mat-footer-cell *matFooterCellDef>\r\n @if (item.footerTitle) {\r\n <strong>{{ item.footerTitle }}</strong>\r\n }\r\n </td>\r\n }\r\n }\r\n @if (item.format === 'routerLink') {\r\n <td mat-cell *matCellDef=\"let element\" (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n <a [routerLink]=\"[element[item.name]]\">{{element[item.name]}}</a>\r\n </td>\r\n @if (footer()) {\r\n <td mat-footer-cell *matFooterCellDef>\r\n @if (item.footerTitle) {\r\n <strong>{{ item.footerTitle }}</strong>\r\n }\r\n </td>\r\n }\r\n }\r\n @if (item.format === 'routerLinkIcon') {\r\n <td mat-cell *matCellDef=\"let element\" (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n @if (element[item.name]) {\r\n <a [routerLink]=\"[element[item.name]]\">\r\n @if (item.icon) {\r\n <mat-icon [class]=\"item.classList ? item.classList : ''\" >{{item.icon}}</mat-icon>\r\n } \r\n @if (item.symbol) {\r\n <span [class]=\"item.classList ? item.classList : ''\" >{{item.symbol}}</span>\r\n }\r\n </a>\r\n }\r\n </td>\r\n @if (footer()) {\r\n <td mat-footer-cell *matFooterCellDef>\r\n @if (item.footerTitle) {\r\n <strong>{{ item.footerTitle }}</strong>\r\n }\r\n </td>\r\n }\r\n }\r\n @if (item.format === 'checkbox') {\r\n <td mat-cell *matCellDef=\"let element\" (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n <mat-checkbox [checked]=\"element[item.name] === 1\" [disabled]=\"true\"></mat-checkbox>\r\n </td>\r\n @if (footer()) {\r\n <td mat-footer-cell *matFooterCellDef>\r\n @if (item.footerTitle) {\r\n <strong>{{ item.footerTitle }}</strong>\r\n }\r\n </td>\r\n }\r\n }\r\n @if (item.format === 'icon') {\r\n <td mat-cell *matCellDef=\"let element\" (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n @if (item.icon) {\r\n <mat-icon [class]=\"item.classList ? item.classList : ''\" >{{item.icon}}</mat-icon>\r\n } \r\n @if (item.symbol) {\r\n <span [class]=\"item.classList ? item.classList : ''\" >{{item.symbol}}</span>\r\n }\r\n </td>\r\n @if (footer()) {\r\n <td mat-footer-cell *matFooterCellDef>\r\n @if (item.footerTitle) {\r\n <strong>{{ item.footerTitle }}</strong>\r\n }\r\n </td>\r\n }\r\n }\r\n @if (item.format === 'icons') {\r\n <td mat-cell *matCellDef=\"let element\" (contextmenu)=\"onContextMenu($event, element)\">\r\n @if (item.icons) {\r\n <mat-icon [class]=\"item.classList ? item.classList[element[item.name]] : ''\" \r\n [matTooltip]=\"item.tooltips ? item.tooltips[element[item.name]] : ''\">{{item.icons[element[item.name]]}}</mat-icon>\r\n } \r\n @if (item.symbols) {\r\n <span [class]=\"item.classList ? item.classList[element[item.name]] : ''\" >{{item.symbols[element[item.name]]}}</span>\r\n }\r\n </td>\r\n @if (footer()) {\r\n <td mat-footer-cell *matFooterCellDef>\r\n @if (item.footerTitle) {\r\n <strong>{{ item.footerTitle }}</strong>\r\n }\r\n </td>\r\n }\r\n }\r\n @if (item.format === 'actions') {\r\n <td mat-cell *matCellDef=\"let element\" (contextmenu)=\"onContextMenu($event, element)\">\r\n @if (item.actions) {\r\n <div class=\"actions-container\">\r\n @for (action of item.actions; track action) {\r\n @if (!(action.hideFn ? action.hideFn(element) : action.hide)) {\r\n <button mat-icon-button\r\n (click)=\"action.onClickFn ? action.onClickFn(element) : ''\"\r\n (mousedown)=\"action.onClickMiddleFn ? action.onClickMiddleFn($event, element) : ''\"\r\n [disabled]=\"action.disabledFn ? action.disabledFn(element) : action.disabled\"\r\n [matTooltip]=\"action.tooltip ? action.tooltip : ''\" >\r\n @if (action.icon) {\r\n <mat-icon [class]=\"action.classList ? action.classList : ''\" >{{action.icon}}</mat-icon>\r\n }\r\n @if (action.symbol) {\r\n <span [class]=\"action.classList ? action.classList : ''\" >{{action.symbol}}</span>\r\n }\r\n {{ action.title }}\r\n </button>\r\n }\r\n }\r\n </div>\r\n } \r\n </td>\r\n @if (footer()) {\r\n <td mat-footer-cell *matFooterCellDef>\r\n @if (item.footerTitle) {\r\n <strong>{{ item.footerTitle }}</strong>\r\n }\r\n </td>\r\n }\r\n }\r\n @if (item.format === 'image') {\r\n <td mat-cell *matCellDef=\"let element\" (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n @if (element[item.name]) {\r\n <img\r\n [src]=\"element[item.name]\"\r\n [alt]=\"item.imageAlt && element[item.imageAlt] ? element[item.imageAlt] : ''\"\r\n [class]=\"item.classList ? item.classList : ''\"\r\n />\r\n } \r\n </td>\r\n @if (footer()) {\r\n <td mat-footer-cell *matFooterCellDef>\r\n @if (item.footerTitle) {\r\n <strong>{{ item.footerTitle }}</strong>\r\n }\r\n </td>\r\n }\r\n }\r\n </ng-container>\r\n }\r\n\r\n <tr class=\"mat-row\" *matNoDataRow>\r\n <td class=\"mat-cell\" colspan=\"9999\">\r\n Нет данных для отображения\r\n </td>\r\n </tr>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns(); sticky: true\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns();\" \r\n (click)=\"onRowClicked(row)\" (dblclick)=\"onRowDblClicked(row)\" \r\n class=\"element-row\" [class.selected-row]=\"selection.isSelected(row)\">\r\n </tr>\r\n @if (footer()) {\r\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns(); sticky: true\"></tr>\r\n }\r\n </table>\r\n <div style=\"visibility: hidden; position: fixed\"\r\n [style.left]=\"contextMenuPosition.x\"\r\n [style.top]=\"contextMenuPosition.y\"\r\n [matMenuTriggerFor]=\"contextMenu\" #menuTrigger=\"matMenuTrigger\">\r\n </div>\r\n <mat-menu #contextMenu=\"matMenu\">\r\n <ng-template matMenuContent let-id=\"id\">\r\n @for (menuItem of opt(); track menuItem) {\r\n @if (menuItem.title === '-' && !(menuItem.hideFn ? menuItem.hideFn(itemForMenu) : menuItem.hide)) {\r\n <mat-divider></mat-divider>\r\n }\r\n @if (menuItem.title !== '-' && !(menuItem.hideFn ? menuItem.hideFn(itemForMenu) : menuItem.hide)) {\r\n <button mat-menu-item\r\n (click)=\"menuItem.onClickFn ? menuItem.onClickFn(itemForMenu) : ''\"\r\n (mousedown)=\"menuItem.onClickMiddleFn ? menuItem.onClickMiddleFn($event, itemForMenu, menuTrigger) : ''\"\r\n [disabled]=\"menuItem.disabledFn ? menuItem.disabledFn(itemForMenu) : menuItem.disabled\">\r\n @if (menuItem.icon) {\r\n <mat-icon [class]=\"menuItem.classList ? menuItem.classList : ''\">{{menuItem.icon}}</mat-icon>\r\n }\r\n @if (menuItem.symbol) {\r\n <span [class]=\"menuItem.classList ? menuItem.classList : ''\">{{menuItem.symbol}}</span>\r\n }\r\n {{ menuItem.title }}\r\n </button>\r\n }\r\n }\r\n </ng-template>\r\n </mat-menu>\r\n</div>\r\n\r\n\r\n<mat-paginator [length]=\"length()\"\r\n [pageIndex]=\"pageState().pageIndex || defaultPageIndex\"\r\n [pageSizeOptions]=\"[5, 10, 20, 50, 100]\"\r\n [pageSize]=\"pageState().pageSize || defaultPageSize\"\r\n (page)=\"onPageEvent($event)\"\r\n showFirstLastButtons\r\n itemsPerPageLabel=\"\"\r\n></mat-paginator>\r\n</div>\r\n",
|
|
4963
|
+
providers: [{
|
|
4964
|
+
provide: MatPaginatorIntl,
|
|
4965
|
+
useFactory: getRuPaginatorIntl
|
|
4966
|
+
}],
|
|
4967
|
+
template: "<div class=\"component-container\">\r\n <div class=\"table-container\">\r\n <table\r\n mat-table\r\n [dataSource]=\"dataSource\"\r\n matSort\r\n [matSortActive]=\"sortState().sortActive\"\r\n [matSortDirection]=\"sortState().sortDirection\"\r\n (matSortChange)=\"onSortEvent($event)\"\r\n matSortDisableClear\r\n >\r\n <!-- Выбор строки Column -->\r\n <ng-container matColumnDef=\"select\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n @if (allowMultiSelect()) {\r\n <mat-checkbox\r\n (change)=\"$event ? masterToggle() : null\"\r\n [checked]=\"selection().hasValue() && isAllSelected()\"\r\n [indeterminate]=\"selection().hasValue() && !isAllSelected()\"\r\n >\r\n </mat-checkbox>\r\n }\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <mat-checkbox\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? onRowClicked(row) : null\"\r\n [checked]=\"selection().isSelected(row)\"\r\n >\r\n </mat-checkbox>\r\n </td>\r\n @if (footer()) {\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n }\r\n </ng-container>\r\n\r\n @for (item of columnOptions(); track item.name) {\r\n <ng-container [matColumnDef]=\"item.name\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n mat-sort-header\r\n [disabled]=\"item.titleSortDisable\"\r\n >\r\n {{ item.title }}\r\n </th>\r\n @if (!item.format) {\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element\"\r\n (contextmenu)=\"onContextMenu($event, element)\"\r\n [matTooltip]=\"item.tooltip ?? ''\"\r\n >\r\n {{ element[item.name] }}\r\n </td>\r\n @if (footer()) {\r\n <td mat-footer-cell *matFooterCellDef>\r\n @if (item.footer) {\r\n <strong>{{ totals()[item.name] }}</strong>\r\n }\r\n @if (item.footerTitle) {\r\n <strong>{{ item.footerTitle }}</strong>\r\n }\r\n </td>\r\n }\r\n }\r\n @if (item.format === \"pre-wrap\") {\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element\"\r\n (contextmenu)=\"onContextMenu($event, element)\"\r\n class=\"pre-wrap\"\r\n [matTooltip]=\"item.tooltip ?? ''\"\r\n >\r\n {{ element[item.name] }}\r\n </td>\r\n @if (footer()) {\r\n <td mat-footer-cell *matFooterCellDef>\r\n @if (item.footerTitle) {\r\n <strong>{{ item.footerTitle }}</strong>\r\n }\r\n </td>\r\n }\r\n }\r\n @if (item.format === \"link\") {\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element\"\r\n (contextmenu)=\"onContextMenu($event, element)\"\r\n [matTooltip]=\"item.tooltip ?? ''\"\r\n >\r\n <a [href]=\"element[item.name]\" target=\"_blank\">{{\r\n element[item.name]\r\n }}</a>\r\n </td>\r\n @if (footer()) {\r\n <td mat-footer-cell *matFooterCellDef>\r\n @if (item.footerTitle) {\r\n <strong>{{ item.footerTitle }}</strong>\r\n }\r\n </td>\r\n }\r\n }\r\n @if (item.format === \"linkIcon\") {\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element\"\r\n (contextmenu)=\"onContextMenu($event, element)\"\r\n [matTooltip]=\"item.tooltip ?? ''\"\r\n >\r\n @if (element[item.name]) {\r\n <a [href]=\"element[item.name]\" target=\"_blank\">\r\n @if (item.icon) {\r\n <mat-icon [class]=\"item.classList ? item.classList : ''\">{{\r\n item.icon\r\n }}</mat-icon>\r\n }\r\n @if (item.symbol) {\r\n <span [class]=\"item.classList ? item.classList : ''\">{{\r\n item.symbol\r\n }}</span>\r\n }\r\n </a>\r\n }\r\n </td>\r\n @if (footer()) {\r\n <td mat-footer-cell *matFooterCellDef>\r\n @if (item.footerTitle) {\r\n <strong>{{ item.footerTitle }}</strong>\r\n }\r\n </td>\r\n }\r\n }\r\n @if (item.format === \"routerLink\") {\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element\"\r\n (contextmenu)=\"onContextMenu($event, element)\"\r\n [matTooltip]=\"item.tooltip ?? ''\"\r\n >\r\n <a [routerLink]=\"[element[item.name]]\">{{\r\n element[item.name]\r\n }}</a>\r\n </td>\r\n @if (footer()) {\r\n <td mat-footer-cell *matFooterCellDef>\r\n @if (item.footerTitle) {\r\n <strong>{{ item.footerTitle }}</strong>\r\n }\r\n </td>\r\n }\r\n }\r\n @if (item.format === \"routerLinkIcon\") {\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element\"\r\n (contextmenu)=\"onContextMenu($event, element)\"\r\n [matTooltip]=\"item.tooltip ?? ''\"\r\n >\r\n @if (element[item.name]) {\r\n <a [routerLink]=\"[element[item.name]]\">\r\n @if (item.icon) {\r\n <mat-icon [class]=\"item.classList ? item.classList : ''\">{{\r\n item.icon\r\n }}</mat-icon>\r\n }\r\n @if (item.symbol) {\r\n <span [class]=\"item.classList ? item.classList : ''\">{{\r\n item.symbol\r\n }}</span>\r\n }\r\n </a>\r\n }\r\n </td>\r\n @if (footer()) {\r\n <td mat-footer-cell *matFooterCellDef>\r\n @if (item.footerTitle) {\r\n <strong>{{ item.footerTitle }}</strong>\r\n }\r\n </td>\r\n }\r\n }\r\n @if (item.format === \"checkbox\") {\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element\"\r\n (contextmenu)=\"onContextMenu($event, element)\"\r\n [matTooltip]=\"item.tooltip ?? ''\"\r\n >\r\n <mat-checkbox\r\n [checked]=\"element[item.name] === 1\"\r\n [disabled]=\"true\"\r\n ></mat-checkbox>\r\n </td>\r\n @if (footer()) {\r\n <td mat-footer-cell *matFooterCellDef>\r\n @if (item.footerTitle) {\r\n <strong>{{ item.footerTitle }}</strong>\r\n }\r\n </td>\r\n }\r\n }\r\n @if (item.format === \"icon\") {\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element\"\r\n (contextmenu)=\"onContextMenu($event, element)\"\r\n [matTooltip]=\"item.tooltip ?? ''\"\r\n >\r\n @if (item.icon) {\r\n <mat-icon [class]=\"item.classList ? item.classList : ''\">{{\r\n item.icon\r\n }}</mat-icon>\r\n }\r\n @if (item.symbol) {\r\n <span [class]=\"item.classList ? item.classList : ''\">{{\r\n item.symbol\r\n }}</span>\r\n }\r\n </td>\r\n @if (footer()) {\r\n <td mat-footer-cell *matFooterCellDef>\r\n @if (item.footerTitle) {\r\n <strong>{{ item.footerTitle }}</strong>\r\n }\r\n </td>\r\n }\r\n }\r\n @if (item.format === \"icons\") {\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element\"\r\n (contextmenu)=\"onContextMenu($event, element)\"\r\n >\r\n @if (item.icons) {\r\n <mat-icon\r\n [class]=\"\r\n item.classList ? item.classList[element[item.name]] : ''\r\n \"\r\n [matTooltip]=\"\r\n item.tooltips ? item.tooltips[element[item.name]] : ''\r\n \"\r\n >{{ item.icons[element[item.name]] }}</mat-icon\r\n >\r\n }\r\n @if (item.symbols) {\r\n <span\r\n [class]=\"\r\n item.classList ? item.classList[element[item.name]] : ''\r\n \"\r\n >{{ item.symbols[element[item.name]] }}</span\r\n >\r\n }\r\n </td>\r\n @if (footer()) {\r\n <td mat-footer-cell *matFooterCellDef>\r\n @if (item.footerTitle) {\r\n <strong>{{ item.footerTitle }}</strong>\r\n }\r\n </td>\r\n }\r\n }\r\n @if (item.format === \"actions\") {\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element\"\r\n (contextmenu)=\"onContextMenu($event, element)\"\r\n >\r\n @if (item.actions) {\r\n <div class=\"actions-container\">\r\n @for (action of item.actions; track action) {\r\n @if (\r\n !(action.hideFn ? action.hideFn(element) : action.hide)\r\n ) {\r\n <button\r\n mat-icon-button\r\n (click)=\"\r\n action.onClickFn ? action.onClickFn(element) : ''\r\n \"\r\n (mousedown)=\"\r\n action.onClickMiddleFn\r\n ? action.onClickMiddleFn($event, element)\r\n : ''\r\n \"\r\n [disabled]=\"\r\n action.disabledFn\r\n ? action.disabledFn(element)\r\n : action.disabled\r\n \"\r\n [matTooltip]=\"action.tooltip ? action.tooltip : ''\"\r\n >\r\n @if (action.icon) {\r\n <mat-icon\r\n [class]=\"action.classList ? action.classList : ''\"\r\n >{{ action.icon }}</mat-icon\r\n >\r\n }\r\n @if (action.symbol) {\r\n <span\r\n [class]=\"action.classList ? action.classList : ''\"\r\n >{{ action.symbol }}</span\r\n >\r\n }\r\n {{ action.title }}\r\n </button>\r\n }\r\n }\r\n </div>\r\n }\r\n </td>\r\n @if (footer()) {\r\n <td mat-footer-cell *matFooterCellDef>\r\n @if (item.footerTitle) {\r\n <strong>{{ item.footerTitle }}</strong>\r\n }\r\n </td>\r\n }\r\n }\r\n @if (item.format === \"image\") {\r\n <td\r\n mat-cell\r\n *matCellDef=\"let element\"\r\n (contextmenu)=\"onContextMenu($event, element)\"\r\n [matTooltip]=\"item.tooltip ?? ''\"\r\n >\r\n @if (element[item.name]) {\r\n <img\r\n [src]=\"element[item.name]\"\r\n [alt]=\"\r\n item.imageAlt && element[item.imageAlt]\r\n ? element[item.imageAlt]\r\n : ''\r\n \"\r\n [class]=\"item.classList ? item.classList : ''\"\r\n />\r\n }\r\n </td>\r\n @if (footer()) {\r\n <td mat-footer-cell *matFooterCellDef>\r\n @if (item.footerTitle) {\r\n <strong>{{ item.footerTitle }}</strong>\r\n }\r\n </td>\r\n }\r\n }\r\n </ng-container>\r\n }\r\n\r\n <tr class=\"mat-row\" *matNoDataRow>\r\n <td class=\"mat-cell\" colspan=\"9999\">Нет данных для отображения</td>\r\n </tr>\r\n\r\n <tr\r\n mat-header-row\r\n *matHeaderRowDef=\"displayedColumns(); sticky: true\"\r\n ></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: displayedColumns();\"\r\n (click)=\"onRowClicked(row)\"\r\n (dblclick)=\"onRowDblClicked(row)\"\r\n class=\"element-row\"\r\n [class.selected-row]=\"selection().isSelected(row)\"\r\n ></tr>\r\n @if (footer()) {\r\n <tr\r\n mat-footer-row\r\n *matFooterRowDef=\"displayedColumns(); sticky: true\"\r\n ></tr>\r\n }\r\n </table>\r\n <div\r\n style=\"visibility: hidden; position: fixed\"\r\n [style.left]=\"contextMenuPosition.x\"\r\n [style.top]=\"contextMenuPosition.y\"\r\n [matMenuTriggerFor]=\"contextMenu\"\r\n #menuTrigger=\"matMenuTrigger\"\r\n ></div>\r\n <mat-menu #contextMenu=\"matMenu\">\r\n <ng-template matMenuContent let-id=\"id\">\r\n @for (menuItem of opt(); track menuItem) {\r\n @if (\r\n menuItem.title === \"-\" &&\r\n !(menuItem.hideFn ? menuItem.hideFn(itemForMenu) : menuItem.hide)\r\n ) {\r\n <mat-divider></mat-divider>\r\n }\r\n @if (\r\n menuItem.title !== \"-\" &&\r\n !(menuItem.hideFn ? menuItem.hideFn(itemForMenu) : menuItem.hide)\r\n ) {\r\n <button\r\n mat-menu-item\r\n (click)=\"\r\n menuItem.onClickFn ? menuItem.onClickFn(itemForMenu) : ''\r\n \"\r\n (mousedown)=\"\r\n menuItem.onClickMiddleFn\r\n ? menuItem.onClickMiddleFn($event, itemForMenu, menuTrigger)\r\n : ''\r\n \"\r\n [disabled]=\"\r\n menuItem.disabledFn\r\n ? menuItem.disabledFn(itemForMenu)\r\n : menuItem.disabled\r\n \"\r\n >\r\n @if (menuItem.icon) {\r\n <mat-icon\r\n [class]=\"menuItem.classList ? menuItem.classList : ''\"\r\n >{{ menuItem.icon }}</mat-icon\r\n >\r\n }\r\n @if (menuItem.symbol) {\r\n <span [class]=\"menuItem.classList ? menuItem.classList : ''\">{{\r\n menuItem.symbol\r\n }}</span>\r\n }\r\n {{ menuItem.title }}\r\n </button>\r\n }\r\n }\r\n </ng-template>\r\n </mat-menu>\r\n </div>\r\n\r\n <mat-paginator\r\n [length]=\"length()\"\r\n [pageIndex]=\"pageState().pageIndex || defaultPageIndex\"\r\n [pageSizeOptions]=\"[5, 10, 20, 50, 100]\"\r\n [pageSize]=\"pageState().pageSize || defaultPageSize\"\r\n (page)=\"onPageEvent($event)\"\r\n showFirstLastButtons\r\n itemsPerPageLabel=\"\"\r\n ></mat-paginator>\r\n</div>\r\n",
|
|
4954
4968
|
styles: [".component-container{display:flex;flex-direction:column;height:100%}.table-container{display:flex;flex-direction:column;justify-content:space-between;flex:auto;margin:0 20px;overflow:auto;height:400px}.center{position:absolute;inset:0 0 56px;background:#00000026;z-index:1;display:flex;align-items:center;justify-content:center}.mat-column-select{overflow:initial}tr.mat-footer-row{font-weight:700;height:56px}.mat-table{overflow-x:scroll}.mat-cell,.mat-header-cell{word-wrap:initial;display:table-cell;padding:0 10px;line-break:unset;white-space:nowrap;overflow:hidden;vertical-align:middle}.mat-row,.mat-header-row{display:table-row}tr.element-row:not(.selected-row):hover{background:#f5f5f5}tr.element-row:not(.selected-row):active{background:#efefef}.selected-row{background-color:#eee}.fact-done-row{background-color:#eefdec}a,a:visited,a:hover,a:active{color:inherit}.pre-wrap{white-space:pre-wrap}.actions-container{display:flex;column-gap:5px}\n"]
|
|
4955
4969
|
}]
|
|
4956
4970
|
}],
|