@sd-angular/core 0.0.919 → 0.0.920
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.
- package/bundles/sd-angular-core-grid-material.umd.js +381 -49
- package/bundles/sd-angular-core-grid-material.umd.js.map +1 -1
- package/bundles/sd-angular-core-grid-material.umd.min.js +2 -2
- package/bundles/sd-angular-core-grid-material.umd.min.js.map +1 -1
- package/esm2015/grid-material/sd-angular-core-grid-material.js +30 -25
- package/esm2015/grid-material/src/lib/components/desktop-cell/desktop-cell.component.js +20 -0
- package/esm2015/grid-material/src/lib/components/desktop-cell-editor/desktop-cell-editor.component.js +26 -0
- package/esm2015/grid-material/src/lib/components/desktop-cell-view/desktop-cell-view.component.js +4 -3
- package/esm2015/grid-material/src/lib/grid-material.component.js +115 -4
- package/esm2015/grid-material/src/lib/grid-material.module.js +12 -2
- package/esm2015/grid-material/src/lib/models/grid-column.model.js +1 -1
- package/esm2015/grid-material/src/lib/models/grid-editor.model.js +1 -1
- package/esm2015/grid-material/src/lib/models/grid.model.js +1 -1
- package/esm2015/grid-material/src/lib/pipes/editor-handler-column.pipe.js +39 -0
- package/esm2015/grid-material/src/lib/pipes/editor-handler-row.pipe.js +40 -0
- package/esm2015/grid-material/src/lib/pipes/editor-validate.pipe.js +41 -0
- package/esm2015/grid-material/src/lib/services/grid-configuration.service.js +10 -5
- package/fesm2015/sd-angular-core-grid-material.js +293 -11
- package/fesm2015/sd-angular-core-grid-material.js.map +1 -1
- package/grid-material/sd-angular-core-grid-material.d.ts +29 -24
- package/grid-material/sd-angular-core-grid-material.metadata.json +1 -1
- package/grid-material/src/lib/components/desktop-cell/desktop-cell.component.d.ts +9 -0
- package/grid-material/src/lib/components/desktop-cell-editor/desktop-cell-editor.component.d.ts +7 -0
- package/grid-material/src/lib/grid-material.component.d.ts +5 -0
- package/grid-material/src/lib/models/grid-column.model.d.ts +6 -0
- package/grid-material/src/lib/models/grid-editor.model.d.ts +5 -3
- package/grid-material/src/lib/models/grid.model.d.ts +16 -4
- package/grid-material/src/lib/pipes/editor-handler-column.pipe.d.ts +7 -0
- package/grid-material/src/lib/pipes/editor-handler-row.pipe.d.ts +6 -0
- package/grid-material/src/lib/pipes/editor-validate.pipe.d.ts +7 -0
- package/package.json +1 -1
- package/{sd-angular-core-0.0.919.tgz → sd-angular-core-0.0.920.tgz} +0 -0
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Directive, TemplateRef, Input, InjectionToken, EventEmitter, Component, ViewChild, Output, Injectable, ChangeDetectorRef, Inject, Optional, QueryList, ContentChild, ContentChildren, Pipe, ViewContainerRef, HostListener,
|
|
1
|
+
import { Directive, TemplateRef, Input, InjectionToken, EventEmitter, Component, ViewChild, Output, Injectable, ChangeDetectorRef, Inject, Optional, QueryList, ContentChild, ContentChildren, Pipe, ChangeDetectionStrategy, ViewContainerRef, HostListener, NgModule } from '@angular/core';
|
|
2
2
|
import { __awaiter, __classPrivateFieldGet, __rest, __classPrivateFieldSet } from 'tslib';
|
|
3
3
|
import { MatPaginator, MatPaginatorIntl, MatPaginatorModule } from '@angular/material/paginator';
|
|
4
4
|
import { MatSort, MatSortModule } from '@angular/material/sort';
|
|
@@ -957,7 +957,7 @@ class SdGridConfigurationService {
|
|
|
957
957
|
// }
|
|
958
958
|
// }
|
|
959
959
|
this.generateConfigurationResult = (configuration, gridOption, sdSubInformation) => {
|
|
960
|
-
var _a
|
|
960
|
+
var _a;
|
|
961
961
|
const result = {
|
|
962
962
|
column: {},
|
|
963
963
|
fixedColumn: {},
|
|
@@ -969,15 +969,20 @@ class SdGridConfigurationService {
|
|
|
969
969
|
displayedFooters: [],
|
|
970
970
|
multipleHeader: false
|
|
971
971
|
};
|
|
972
|
-
|
|
972
|
+
const { selection, commands, editor } = gridOption || {};
|
|
973
|
+
if (selection === null || selection === void 0 ? void 0 : selection.visible) {
|
|
973
974
|
result.firstHeaders.push(__classPrivateFieldGet(this, _COLUMNS).SELECTION);
|
|
974
975
|
result.displayedColumns.push(__classPrivateFieldGet(this, _COLUMNS).SELECTION);
|
|
975
976
|
}
|
|
976
|
-
if (
|
|
977
|
+
if (commands === null || commands === void 0 ? void 0 : commands.length) {
|
|
977
978
|
result.firstHeaders.push(__classPrivateFieldGet(this, _COLUMNS).COMMAND);
|
|
978
979
|
result.displayedColumns.push(__classPrivateFieldGet(this, _COLUMNS).COMMAND);
|
|
979
980
|
}
|
|
980
|
-
(
|
|
981
|
+
if (editor.addable || (editor.type === 'inline' && editor.removable) || (editor.type !== 'inline' && editor.editable)) {
|
|
982
|
+
result.firstHeaders.push(__classPrivateFieldGet(this, _COLUMNS).EDITOR);
|
|
983
|
+
result.displayedColumns.push(__classPrivateFieldGet(this, _COLUMNS).EDITOR);
|
|
984
|
+
}
|
|
985
|
+
(_a = configuration === null || configuration === void 0 ? void 0 : configuration.columns) === null || _a === void 0 ? void 0 : _a.filter(col => !col.invisible).forEach(col => {
|
|
981
986
|
var _a;
|
|
982
987
|
if (col.isGeneratedColumn) {
|
|
983
988
|
result.column[col.origin.field] = {
|
|
@@ -1112,7 +1117,7 @@ SdGridService.ctorParameters = () => [
|
|
|
1112
1117
|
{ type: SdUtilityService }
|
|
1113
1118
|
];
|
|
1114
1119
|
|
|
1115
|
-
var _paginator, _sort, _subscription$1, _optionChanges, _initCellDef, _initFilterDef, _initFooterDef, _filterExportInfo, _initConfiguration, _filterLocal, _getFilter, _load$1, _render, _exportedItems, _allColumns, _allExportedColumns, _onExport, _updateSelectedItems;
|
|
1120
|
+
var _paginator, _sort, _subscription$1, _optionChanges, _initCellDef, _initFilterDef, _initFooterDef, _filterExportInfo, _initConfiguration, _filterLocal, _getFilter, _load$1, _render, _exportedItems, _allColumns, _allExportedColumns, _onExport, _updateSelectedItems, _generateEditorHanlder;
|
|
1116
1121
|
class SdGridMaterial {
|
|
1117
1122
|
constructor(ref, configuration, gridConfigurationService, exportService, notifyService, translateService, gridService) {
|
|
1118
1123
|
this.ref = ref;
|
|
@@ -1667,6 +1672,117 @@ class SdGridMaterial {
|
|
|
1667
1672
|
var _a;
|
|
1668
1673
|
(_a = this.gridFilter) === null || _a === void 0 ? void 0 : _a.setFilter(args);
|
|
1669
1674
|
};
|
|
1675
|
+
_generateEditorHanlder.set(this, (item) => {
|
|
1676
|
+
// item.editorHandler = item.editorHandler || {};
|
|
1677
|
+
// this.editorVisiblePipe.transform(null, item, this.gridOption);
|
|
1678
|
+
});
|
|
1679
|
+
this.onCreate = () => {
|
|
1680
|
+
var _a;
|
|
1681
|
+
const { type, editor, columns } = this.gridOption;
|
|
1682
|
+
if (!(editor === null || editor === void 0 ? void 0 : editor.addable)) {
|
|
1683
|
+
return;
|
|
1684
|
+
}
|
|
1685
|
+
const item = {};
|
|
1686
|
+
// Gán giá trị mặc định
|
|
1687
|
+
columns.forEach(column => {
|
|
1688
|
+
if (column.type === 'values') {
|
|
1689
|
+
item[column.field] = '';
|
|
1690
|
+
}
|
|
1691
|
+
else if (column.type === 'bool') {
|
|
1692
|
+
item[column.field] = true;
|
|
1693
|
+
}
|
|
1694
|
+
else if (column.type === 'number') {
|
|
1695
|
+
item[column.field] = null;
|
|
1696
|
+
}
|
|
1697
|
+
});
|
|
1698
|
+
(_a = editor.onAdd) === null || _a === void 0 ? void 0 : _a.call(editor, item);
|
|
1699
|
+
// Đưa item lên dòng đầu tiên nếu type khác popup
|
|
1700
|
+
if (editor.type !== 'popup') {
|
|
1701
|
+
if (type === 'local') {
|
|
1702
|
+
this.items.splice(0, 0, item);
|
|
1703
|
+
}
|
|
1704
|
+
// this.viewItems.splice(0, 0, item);
|
|
1705
|
+
}
|
|
1706
|
+
this.onUpdate(item, false);
|
|
1707
|
+
};
|
|
1708
|
+
this.onUpdate = (item, isModified) => {
|
|
1709
|
+
const { editor, columns } = this.gridOption;
|
|
1710
|
+
item.editorHandlerRow.status = isModified ? 'update' : 'create';
|
|
1711
|
+
item.editorHandlerRow.temporary = Object.assign({}, item);
|
|
1712
|
+
// this.generateEditorHanlder(item);
|
|
1713
|
+
if (editor.type === 'popup') {
|
|
1714
|
+
// Xử lý case popup
|
|
1715
|
+
// this.sdGridPopupEditor.open(item, columns, isModified);
|
|
1716
|
+
}
|
|
1717
|
+
this.ref.detectChanges();
|
|
1718
|
+
};
|
|
1719
|
+
this.onSave = (item) => __awaiter(this, void 0, void 0, function* () {
|
|
1720
|
+
const { editor } = this.gridOption;
|
|
1721
|
+
try {
|
|
1722
|
+
item.editorHandlerRow.saving = true;
|
|
1723
|
+
if (editor.validate) {
|
|
1724
|
+
const result = editor.validate(item);
|
|
1725
|
+
if (result instanceof Promise) {
|
|
1726
|
+
const message = yield result;
|
|
1727
|
+
if (message) {
|
|
1728
|
+
throw message;
|
|
1729
|
+
}
|
|
1730
|
+
}
|
|
1731
|
+
else {
|
|
1732
|
+
if (result) {
|
|
1733
|
+
throw result;
|
|
1734
|
+
}
|
|
1735
|
+
}
|
|
1736
|
+
}
|
|
1737
|
+
if (editor.onSave) {
|
|
1738
|
+
const result = editor.onSave(item);
|
|
1739
|
+
if (result instanceof Promise) {
|
|
1740
|
+
yield result;
|
|
1741
|
+
}
|
|
1742
|
+
}
|
|
1743
|
+
if (item.editorHandlerRow.status === 'create' && editor.type === 'popup') {
|
|
1744
|
+
if (this.gridOption.type === 'local') {
|
|
1745
|
+
this.items.splice(0, 0, item);
|
|
1746
|
+
}
|
|
1747
|
+
// this.viewItems.splice(0, 0, item);
|
|
1748
|
+
}
|
|
1749
|
+
item.editorHandlerRow.status = undefined;
|
|
1750
|
+
// this.generateEditorHanlder(item);
|
|
1751
|
+
}
|
|
1752
|
+
catch (err) {
|
|
1753
|
+
this.notifyService.notify.warning(err);
|
|
1754
|
+
}
|
|
1755
|
+
finally {
|
|
1756
|
+
item.editorHandlerRow.saving = false;
|
|
1757
|
+
this.ref.detectChanges();
|
|
1758
|
+
}
|
|
1759
|
+
});
|
|
1760
|
+
this.onCancel = (item) => {
|
|
1761
|
+
const { editor } = this.gridOption;
|
|
1762
|
+
if (editor.type === 'inline') {
|
|
1763
|
+
if (this.gridOption.type === 'local') {
|
|
1764
|
+
const idx1 = this.items.indexOf(item);
|
|
1765
|
+
this.items.splice(idx1, 1);
|
|
1766
|
+
}
|
|
1767
|
+
// const idx2 = this.viewItems.indexOf(item);
|
|
1768
|
+
// this.viewItems.splice(idx2, 1);
|
|
1769
|
+
return;
|
|
1770
|
+
}
|
|
1771
|
+
if (item.editorHandlerRow.status === 'create') {
|
|
1772
|
+
if (editor.type !== 'popup') {
|
|
1773
|
+
if (this.gridOption.type === 'local') {
|
|
1774
|
+
this.items.splice(0, 1);
|
|
1775
|
+
}
|
|
1776
|
+
// this.viewItems.splice(0, 1);
|
|
1777
|
+
}
|
|
1778
|
+
}
|
|
1779
|
+
else {
|
|
1780
|
+
Object.assign(item, item.editorHandlerRow.temporary);
|
|
1781
|
+
item.editorHandlerRow.status = undefined;
|
|
1782
|
+
// this.generateEditorHanlder(item);
|
|
1783
|
+
this.ref.detectChanges();
|
|
1784
|
+
}
|
|
1785
|
+
};
|
|
1670
1786
|
}
|
|
1671
1787
|
set _gridFilter(gridFilter) {
|
|
1672
1788
|
if (gridFilter && this.gridFilter !== gridFilter) {
|
|
@@ -1723,11 +1839,11 @@ class SdGridMaterial {
|
|
|
1723
1839
|
moveItemInArray(columns, event.previousIndex, event.currentIndex);
|
|
1724
1840
|
}
|
|
1725
1841
|
}
|
|
1726
|
-
_paginator = new WeakMap(), _sort = new WeakMap(), _subscription$1 = new WeakMap(), _optionChanges = new WeakMap(), _initCellDef = new WeakMap(), _initFilterDef = new WeakMap(), _initFooterDef = new WeakMap(), _filterExportInfo = new WeakMap(), _initConfiguration = new WeakMap(), _filterLocal = new WeakMap(), _getFilter = new WeakMap(), _load$1 = new WeakMap(), _render = new WeakMap(), _exportedItems = new WeakMap(), _allColumns = new WeakMap(), _allExportedColumns = new WeakMap(), _onExport = new WeakMap(), _updateSelectedItems = new WeakMap();
|
|
1842
|
+
_paginator = new WeakMap(), _sort = new WeakMap(), _subscription$1 = new WeakMap(), _optionChanges = new WeakMap(), _initCellDef = new WeakMap(), _initFilterDef = new WeakMap(), _initFooterDef = new WeakMap(), _filterExportInfo = new WeakMap(), _initConfiguration = new WeakMap(), _filterLocal = new WeakMap(), _getFilter = new WeakMap(), _load$1 = new WeakMap(), _render = new WeakMap(), _exportedItems = new WeakMap(), _allColumns = new WeakMap(), _allExportedColumns = new WeakMap(), _onExport = new WeakMap(), _updateSelectedItems = new WeakMap(), _generateEditorHanlder = new WeakMap();
|
|
1727
1843
|
SdGridMaterial.decorators = [
|
|
1728
1844
|
{ type: Component, args: [{
|
|
1729
1845
|
selector: 'sd-grid-material',
|
|
1730
|
-
template: "<ng-container *ngIf=\"gridConfigurationObserver | async as gridConfiguration\">\r\n <ng-container *ngIf=\"\r\n gridConfiguration\r\n | sdGridConfigurationResult\r\n : gridOption\r\n : sdSubInformation as configuration\r\n \">\r\n <ng-container *ngIf=\"!gridOption.filter?.disabled\">\r\n <sd-grid-filter [filter]=\"gridOption?.filter\" [columns]=\"configuration.firstColumns\" [filterDefs]=\"filterDefs\">\r\n </sd-grid-filter>\r\n </ng-container>\r\n <div class=\"c-container {{ gridOption?.style?.grid }}\" [ngClass]=\"{ 'mat-elevation-z2': gridOption?.shadow }\">\r\n <div class=\"c-loading\" *ngIf=\"isLoading\">\r\n <mat-spinner *ngIf=\"isLoading\"></mat-spinner>\r\n </div>\r\n <ng-container>\r\n <div class=\"c-table\" [ngStyle]=\"{\r\n 'max-height': gridOption?.maxHeight,\r\n 'min-height': 'gridOption?.minHeight'\r\n }\">\r\n <table *ngIf=\"items?.length; else elseEmpty\" mat-table [dataSource]=\"items\" matSort\r\n [matSortDisabled]=\"!gridOption.sortable\" cdkDropList cdkDropListOrientation=\"horizontal\"\r\n [cdkDropListDisabled]=\"!gridOption.dropDragColumnEnable\"\r\n (cdkDropListDropped)=\"drop($event, configuration.displayedColumns)\" multiTemplateDataRows>\r\n <ng-container matColumnDef=\"sdSubInformation\" sticky>\r\n <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"configuration.displayedColumns.length\">\r\n <div *ngIf=\"sdSubInformation?.templateRef\" [@detailExpand]=\"item.isExpanded ? 'expanded' : 'collapsed'\">\r\n <ng-container *ngIf=\"item.isExpanded\">\r\n <ng-container *ngTemplateOutlet=\"\r\n sdSubInformation.templateRef;\r\n context: { item: item }\r\n \">\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdSubInformationAction\" stickyEnd>\r\n <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 1px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <button *ngIf=\"!element.isExpanding\" mat-icon-button aria-label=\"Expand & Collapse\"\r\n (click)=\"onExpand(element)\">\r\n <mat-icon *ngIf=\"!element.isExpanded\">expand_more</mat-icon>\r\n <mat-icon *ngIf=\"element.isExpanded\">expand_less</mat-icon>\r\n </button>\r\n <div *ngIf=\"element.isExpanding\" class=\"lds-ring\">\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdSelection\" sticky>\r\n <th class=\"text-center px-15\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n <mat-checkbox *ngIf=\"!gridOption.selection?.single\" class=\"c-selection\" color=\"primary\"\r\n [(ngModel)]=\"isSelectAll\" (change)=\"onSelectAll()\" [disabled]=\"\r\n items | selectionDisableSelectAll: gridOption?.selection\r\n \">\r\n </mat-checkbox>\r\n </th>\r\n <td class=\"text-center px-15\" mat-cell *matCellDef=\"let item\" style=\"min-width: 50px; max-width: 50px\">\r\n <mat-checkbox class=\"c-selection\" color=\"primary\" [(ngModel)]=\"item.isSelected\"\r\n (change)=\"onSelect(item)\" [disabled]=\"\r\n selectedItems | selectionDisable: item:gridOption?.selection\r\n \">\r\n </mat-checkbox>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <!-- <ng-container matColumnDef=\"sdEditor\">\r\n <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n <button *ngIf=\"gridOption.editor?.addable && (!gridOption.editor.limit || gridOption.editor.limit > items.length)\" (click)=\"editor.onAdd()\" aria-hidden=\"true\" mat-icon-button>\r\n <mat-icon class=\"c-icon\" [fontSet]=\"command.fontSet\">add</mat-icon>\r\n </button>\r\n </th>\r\n <td class=\"px-8\" mat-cell *matCellDef=\"let item\">\r\n <ng-container *ngIf>\r\n\r\n </ng-container>\r\n <button *ngIf=\"gridOption.editor?.editable\" class=\"mx-2\" (click)=\"editor.onEdit()\" aria-hidden=\"true\" mat-icon-button>\r\n <mat-icon class=\"c-icon\" [fontSet]=\"command.fontSet\">delete</mat-icon>\r\n </button>\r\n <button *ngIf=\"gridOption.editor?.editable\" class=\"mx-2\" (click)=\"editor.on()\" aria-hidden=\"true\" mat-icon-button>\r\n <mat-icon class=\"c-icon\" [fontSet]=\"command.fontSet\">add</mat-icon>\r\n </button>\r\n <button *ngIf=\"gridOption.editor?.editable\" class=\"mx-2\" (click)=\"editor.onRemove()\" aria-hidden=\"true\" mat-icon-button>\r\n <mat-icon class=\"c-icon\" [fontSet]=\"command.fontSet\">add</mat-icon>\r\n </button>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container> -->\r\n <ng-container matColumnDef=\"sdCommand\">\r\n <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n <td class=\"px-8\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-command [commands]=\"gridOption.commands\" [item]=\"item\"></sd-desktop-command>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container *ngFor=\"let column of configuration.firstColumns; let i = index\" [matColumnDef]=\"column.field\"\r\n [sticky]=\"configuration.fixedColumn[column.field]\">\r\n <th mat-header-cell *matHeaderCellDef cdkDrag class=\"px-8 py-8 c-th\"\r\n [ngStyle]=\"{ 'min-width': column.width }\" [attr.rowspan]=\"\r\n configuration.multipleHeader && column.type !== 'children-col'\r\n ? 2\r\n : 1\r\n \" [attr.colspan]=\"\r\n column.type === 'children-col' ? column.children?.length : 1\r\n \">\r\n <div>\r\n <div aria-hidden=\"false\" role=\"presentation\" mat-sort-header [disabled]=\"\r\n !column.sortable || column.type === 'children-col'\r\n \" [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n <div class=\"c-inline-column\" *ngIf=\"gridOption.filter?.inlineColumn\">\r\n <ng-container *ngTemplateOutlet=\"\r\n inlineColumn;\r\n context: { column: column }\r\n \"></ng-container>\r\n </div>\r\n </div>\r\n </th>\r\n <td class=\"c-td px-8\" mat-cell *matCellDef=\"let item\">\r\n <ng-container *ngIf=\"cellDef[column.field]\">\r\n <ng-container *ngTemplateOutlet=\"\r\n cellDef[column.field].templateRef;\r\n context: { item: item, column: column, idx: i }\r\n \">\r\n </ng-container>\r\n </ng-container>\r\n <sd-desktop-cell-view *ngIf=\"!cellDef[column.field]\" [key]=\"key\" [column]=\"column\" [item]=\"item\">\r\n </sd-desktop-cell-view>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef>\r\n <ng-container *ngIf=\"footerDef[column.field]\">\r\n <ng-container *ngTemplateOutlet=\"\r\n footerDef[column.field].templateRef;\r\n context: { items: items, column: column }\r\n \">\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n <ng-container *ngFor=\"let column of configuration.secondColumns; let i = index\"\r\n [matColumnDef]=\"column.field\">\r\n <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"c-th px-8\"\r\n [ngStyle]=\"{ 'min-width': column.width }\">\r\n <div>\r\n <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n <div class=\"c-inline-column\" *ngIf=\"gridOption.filter?.inlineColumn\">\r\n <ng-container *ngTemplateOutlet=\"\r\n inlineColumn;\r\n context: { column: column }\r\n \"></ng-container>\r\n </div>\r\n </div>\r\n </th>\r\n <td class=\"c-td px-8\" mat-cell *matCellDef=\"let item\">\r\n <ng-container *ngIf=\"cellDef[column.field]\">\r\n <ng-container *ngTemplateOutlet=\"\r\n cellDef[column.field].templateRef;\r\n context: { item: item, column: column, idx: i }\r\n \">\r\n </ng-container>\r\n </ng-container>\r\n <sd-desktop-cell-view *ngIf=\"!cellDef[column.field]\" [key]=\"key\" [column]=\"column\" [item]=\"item\">\r\n </sd-desktop-cell-view>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef>\r\n <ng-container *ngIf=\"footerDef[column.field]\">\r\n <ng-container *ngTemplateOutlet=\"\r\n footerDef[column.field].templateRef;\r\n context: { items: items, column: column }\r\n \">\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\"></tr>\r\n <ng-container *ngIf=\"configuration.secondHeaders?.length\">\r\n <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\">\r\n </tr>\r\n </ng-container>\r\n <tr mat-row *matRowDef=\"let row; columns: configuration.displayedColumns\" matRipple class=\"c-row\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: ['sdSubInformation']\" class=\"c-detail-row\"></tr>\r\n <ng-container *ngIf=\"hasFooter && configuration.displayedFooters?.length\">\r\n <tr mat-footer-row *matFooterRowDef=\"configuration.displayedFooters; sticky: true\"></tr>\r\n </ng-container>\r\n </table>\r\n <ng-template #elseEmpty>\r\n <table mat-table [dataSource]=\"[{}]\">\r\n <ng-container matColumnDef=\"sdSelection\" sticky>\r\n <th class=\"px-15\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdEditor\">\r\n <th class=\"px-8\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdCommand\">\r\n <th class=\"px-8\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdSubInformationAction\">\r\n <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 1px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdEmpty\">\r\n <td class=\"c-empty\" mat-cell *matCellDef=\"let item\"\r\n [attr.colspan]=\"configuration.displayedColumns.length\">\r\n <ng-container *ngIf=\"sdEmptyData?.templateRef; else sdEmptyDataNoRef\">\r\n <ng-container *ngTemplateOutlet=\"\r\n sdEmptyData.templateRef;\r\n context: { item: item }\r\n \">\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #sdEmptyDataNoRef>\r\n <mat-icon fontSet=\"material-icons-outlined\">leaderboard</mat-icon>\r\n </ng-template>\r\n </td>\r\n </ng-container>\r\n <ng-container *ngFor=\"let column of configuration.columns\" [matColumnDef]=\"column.field\"\r\n [sticky]=\"configuration.fixedColumn[column.field]\">\r\n <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n </th>\r\n </ng-container>\r\n <ng-container *ngFor=\"let column of configuration.firstColumns\" [matColumnDef]=\"column.field\"\r\n [sticky]=\"configuration.fixedColumn[column.field]\">\r\n <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\" [ngStyle]=\"{ 'min-width': column.width }\"\r\n [attr.rowspan]=\"\r\n configuration.multipleHeader &&\r\n column.type !== 'children-col'\r\n ? 2\r\n : 1\r\n \" [attr.colspan]=\"\r\n column.type === 'children-col' ? column.children?.length : 1\r\n \">\r\n <div>\r\n <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n <div class=\"c-inline-column\" *ngIf=\"gridOption.filter?.inlineColumn\">\r\n <ng-container *ngTemplateOutlet=\"\r\n inlineColumn;\r\n context: { column: column }\r\n \"></ng-container>\r\n </div>\r\n </div>\r\n </th>\r\n </ng-container>\r\n <ng-container *ngFor=\"let column of configuration.secondColumns\" [matColumnDef]=\"column.field\">\r\n <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n <div>\r\n <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n <div class=\"c-inline-column\" *ngIf=\"gridOption.filter?.inlineColumn\">\r\n <ng-container *ngTemplateOutlet=\"\r\n inlineColumn;\r\n context: { column: column }\r\n \"></ng-container>\r\n </div>\r\n </div>\r\n </th>\r\n </ng-container>\r\n <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\">\r\n </tr>\r\n <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\">\r\n </tr>\r\n <tr mat-row *matRowDef=\"let row; columns: ['sdEmpty']\"></tr>\r\n </table>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n <div class=\"c-paginator\">\r\n <div class=\"c-action\">\r\n <sd-button *ngIf=\"\r\n !gridOption.filter?.disabled && !gridOption.filter?.inlineColumn\r\n \" class=\"mr-10\" [title]=\"'Filter' | sdTranslate\" icon=\"filter_alt\" size=\"sm\" (action)=\"gridFilter.open()\"\r\n type=\"link\">\r\n </sd-button>\r\n <sd-button *ngIf=\"gridOption.reload?.visible\" class=\"mr-10\" [title]=\"'Reload' | sdTranslate\" icon=\"refresh\"\r\n size=\"sm\" (action)=\"reload()\" [disabled]=\"!items?.length\" type=\"link\">\r\n </sd-button>\r\n <ng-container *ngIf=\"gridOption.export?.visible && items?.length\">\r\n <ng-container *ngIf=\"isExporting; else unExporting\">\r\n <sd-button class=\"mr-10\" [loading]=\"isExporting\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\"\r\n size=\"sm\" type=\"link\">\r\n </sd-button>\r\n </ng-container>\r\n <ng-template #unExporting>\r\n <sd-button class=\"mr-10\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\" size=\"sm\"\r\n [matMenuTriggerFor]=\"menu\" type=\"link\">\r\n </sd-button>\r\n </ng-template>\r\n\r\n <mat-menu #menu=\"matMenu\">\r\n <button *ngIf=\"gridOption.export?.visibleExcel !== false\" mat-menu-item\r\n (click)=\"sdPopupExport.exportDefault()\" type=\"button\">\r\n <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n <span> {{ \"Export excel\" | sdTranslate }}</span>\r\n </button>\r\n <button *ngIf=\"gridOption.export?.visibleCSV !== false\" mat-menu-item\r\n (click)=\"sdPopupExport.exportDefault(true)\" type=\"button\">\r\n <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n <span> {{ \"Export CSV\" | sdTranslate }}</span>\r\n </button>\r\n <button *ngIf=\"gridOption.export?.key\" mat-menu-item (click)=\"sdPopupExport.open()\" type=\"button\">\r\n <mat-icon fontSet=\"material-icons-outlined\">settings</mat-icon>\r\n <span> {{ \"Configure\" | sdTranslate }}</span>\r\n </button>\r\n </mat-menu>\r\n </ng-container>\r\n <sd-button *ngIf=\"gridOption.config?.visible\" class=\"mr-10\" [title]=\"'Configure' | sdTranslate\"\r\n icon=\"settings\" size=\"sm\" (action)=\"popupGridConfiguration.open()\" type=\"link\">\r\n </sd-button>\r\n </div>\r\n <mat-paginator [class.d-none]=\"gridOption.paginate?.hidden\" [length]=\"total\"\r\n [pageSize]=\"gridOption.paginate?.pageSize\" [pageSizeOptions]=\"gridOption.paginate?.pages\"\r\n [showFirstLastButtons]=\"gridOption.paginate?.showFirstLastButtons\"></mat-paginator>\r\n </div>\r\n </div>\r\n <sd-popup-export *ngIf=\"gridOption.export?.visible\" [gridOption]=\"gridOption\" (export)=\"onExport($event)\"\r\n #sdPopupExport>\r\n </sd-popup-export>\r\n <sd-popup-grid-configuration [gridOption]=\"gridOption\" [key]=\"key\" #popupGridConfiguration>\r\n </sd-popup-grid-configuration>\r\n </ng-container>\r\n</ng-container>\r\n<ng-template #inlineColumn let-column=\"column\">\r\n <ng-container *ngIf=\"\r\n column.type === 'string' ||\r\n column.type === 'number' ||\r\n column.type === 'bool' ||\r\n column.type === 'values' ||\r\n column.type === 'date' ||\r\n column.type === 'datetime' ||\r\n column.type === 'time';\r\n else noFilter\r\n \">\r\n <sd-input *ngIf=\"column.type === 'string'\" size=\"sm\" type=\"text\" [(model)]=\"columnFilter[column.field]\"\r\n (keyupEnter)=\"onFilterChange()\" [disabled]=\"column.filter?.disabled\">\r\n </sd-input>\r\n <sd-input *ngIf=\"column.type === 'number'\" size=\"sm\" type=\"number\" [(model)]=\"columnFilter[column.field]\"\r\n (keyupEnter)=\"onFilterChange()\" [disabled]=\"column.filter?.disabled\">\r\n </sd-input>\r\n <sd-select *ngIf=\"column.type === 'bool'\" size=\"sm\" [items]=\"[\r\n { value: '1', display: column.option?.displayOnTrue || 'True' },\r\n { value: '0', display: column.option?.displayOnFalse || 'False' }\r\n ]\" valueField=\"value\" displayField=\"display\" [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\">\r\n </sd-select>\r\n <sd-select *ngIf=\"\r\n column.type === 'values' && column?.option?.selection !== 'AUTOCOMPLETE'\r\n \" size=\"sm\" [items]=\"column.option.items\" [valueField]=\"column.option.valueField\"\r\n [displayField]=\"column.option.displayField\" [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\" [multiple]=\"\r\n column?.option?.selection === 'MULTIPLE' ||\r\n column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\r\n \" [filtered]=\"column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\">\r\n </sd-select>\r\n <sd-autocomplete *ngIf=\"\r\n column.type === 'values' && column?.option?.selection === 'AUTOCOMPLETE'\r\n \" size=\"sm\" [items]=\"column.option.items\" [valueField]=\"column.option.valueField\"\r\n [displayField]=\"column.option.displayField\" [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\">\r\n </sd-autocomplete>\r\n <sd-date-time *ngIf=\"\r\n column.type === 'date' ||\r\n column.type === 'datetime' ||\r\n column.type === 'time'\r\n \" size=\"sm\" [(model)]=\"columnFilter[column.field]\" [type]=\"column.type\" (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\">\r\n </sd-date-time>\r\n </ng-container>\r\n <ng-template #noFilter>\r\n <sd-input type=\"text\" disabled> </sd-input>\r\n </ng-template>\r\n</ng-template>\r\n\r\n<sd-quick-action *ngIf=\"\r\n selectedItems\r\n | selectionActionFilter: gridOption?.selection?.actions as actions\r\n \" [isOpened]=\"actions?.length\">\r\n <div sdMessage>\r\n <strong class=\"text-info\">{{ selectedItems.length }}</strong>\r\n {{ gridOption?.selection?.message || (\"selected rows\" | sdTranslate) }}\r\n </div>\r\n <div class=\"d-flex align-items-center\" sdAction>\r\n <ng-container *ngFor=\"let action of actions\">\r\n <sd-button *ngIf=\"action.click\" class=\"ml-5\" [tooltip]=\"action.tooltip\" [icon]=\"action.icon\"\r\n [color]=\"action.color || 'secondary'\" [type]=\"action.type || 'light'\" [fontSet]=\"action.fontSet\"\r\n [title]=\"action.title\" size=\"sm\" (action)=\"action.click(selectedItems)\"></sd-button>\r\n <ng-container *ngIf=\"action.children?.length\">\r\n <sd-button class=\"ml-5\" [tooltip]=\"action.tooltip\" [icon]=\"action.icon || 'more_vert'\"\r\n [color]=\"action.color || 'secondary'\" [type]=\"action.type || 'light'\" [fontSet]=\"action.fontSet\"\r\n [title]=\"action.title\" size=\"sm\" [matMenuTriggerFor]=\"menu\">\r\n </sd-button>\r\n <mat-menu #menu=\"matMenu\">\r\n <span>\r\n <button *ngFor=\"let childAction of action.children\" mat-menu-item (click)=\"childAction.click(selectedItems)\"\r\n [disabled]=\"childAction.disabled\">\r\n <mat-icon [fontSet]=\"childAction.fontSet\" class=\"c-icon\">{{ childAction.icon }}\r\n </mat-icon>\r\n <span> {{ childAction.title }}</span>\r\n </button>\r\n </span>\r\n </mat-menu>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</sd-quick-action>",
|
|
1846
|
+
template: "<ng-container *ngIf=\"gridConfigurationObserver | async as gridConfiguration\">\r\n <ng-container *ngIf=\"\r\n gridConfiguration\r\n | sdGridConfigurationResult\r\n : gridOption\r\n : sdSubInformation as configuration\r\n \">\r\n <ng-container *ngIf=\"!gridOption.filter?.disabled\">\r\n <sd-grid-filter [filter]=\"gridOption?.filter\" [columns]=\"configuration.firstColumns\" [filterDefs]=\"filterDefs\">\r\n </sd-grid-filter>\r\n </ng-container>\r\n <div class=\"c-container {{ gridOption?.style?.grid }}\" [ngClass]=\"{ 'mat-elevation-z2': gridOption?.shadow }\">\r\n <div class=\"c-loading\" *ngIf=\"isLoading\">\r\n <mat-spinner *ngIf=\"isLoading\"></mat-spinner>\r\n </div>\r\n <ng-container>\r\n <div class=\"c-table\" [ngStyle]=\"{\r\n 'max-height': gridOption?.maxHeight,\r\n 'min-height': 'gridOption?.minHeight'\r\n }\">\r\n <table *ngIf=\"items?.length; else elseEmpty\" mat-table [dataSource]=\"items\" matSort\r\n [matSortDisabled]=\"!gridOption.sortable\" cdkDropList cdkDropListOrientation=\"horizontal\"\r\n [cdkDropListDisabled]=\"!gridOption.dropDragColumnEnable\"\r\n (cdkDropListDropped)=\"drop($event, configuration.displayedColumns)\" multiTemplateDataRows>\r\n <ng-container matColumnDef=\"sdSubInformation\" sticky>\r\n <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"configuration.displayedColumns.length\">\r\n <div *ngIf=\"sdSubInformation?.templateRef\" [@detailExpand]=\"item.isExpanded ? 'expanded' : 'collapsed'\">\r\n <ng-container *ngIf=\"item.isExpanded\">\r\n <ng-container *ngTemplateOutlet=\"\r\n sdSubInformation.templateRef;\r\n context: { item: item }\r\n \">\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdSubInformationAction\" stickyEnd>\r\n <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 1px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <button *ngIf=\"!element.isExpanding\" mat-icon-button aria-label=\"Expand & Collapse\"\r\n (click)=\"onExpand(element)\">\r\n <mat-icon *ngIf=\"!element.isExpanded\">expand_more</mat-icon>\r\n <mat-icon *ngIf=\"element.isExpanded\">expand_less</mat-icon>\r\n </button>\r\n <div *ngIf=\"element.isExpanding\" class=\"lds-ring\">\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdSelection\" sticky>\r\n <th class=\"text-center px-15\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n <mat-checkbox *ngIf=\"!gridOption.selection?.single\" class=\"c-selection\" color=\"primary\"\r\n [(ngModel)]=\"isSelectAll\" (change)=\"onSelectAll()\" [disabled]=\"\r\n items | selectionDisableSelectAll: gridOption?.selection\r\n \">\r\n </mat-checkbox>\r\n </th>\r\n <td class=\"text-center px-15\" mat-cell *matCellDef=\"let item\" style=\"min-width: 50px; max-width: 50px\">\r\n <mat-checkbox class=\"c-selection\" color=\"primary\" [(ngModel)]=\"item.isSelected\"\r\n (change)=\"onSelect(item)\" [disabled]=\"\r\n selectedItems | selectionDisable: item:gridOption?.selection\r\n \">\r\n </mat-checkbox>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdEditor\">\r\n <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n <button\r\n *ngIf=\"gridOption.editor?.addable && (!gridOption.editor.limit || gridOption.editor.limit > items.length)\"\r\n (click)=\"onCreate()\" aria-hidden=\"true\" mat-icon-button>\r\n <mat-icon class=\"c-icon\">add</mat-icon>\r\n </button>\r\n </th>\r\n <td class=\"px-8\" mat-cell *matCellDef=\"let item\">\r\n <ng-container *sdLet=\"item | sdEditorHandlerRow:gridOption as editorHandler\">\r\n <ng-container *ngIf=\"editorHandler.visible\">\r\n <ng-container *ngIf=\"editorHandler.isInline;else notInline\">\r\n <button *ngIf=\"editorHandler.removable\" class=\"mx-2\" (click)=\"onCancel(item)\" aria-hidden=\"true\"\r\n mat-icon-button>\r\n <mat-icon class=\"c-icon\">delete</mat-icon>\r\n </button>\r\n </ng-container>\r\n <ng-template #notInline>\r\n <ng-container *ngIf=\"!editorHandler.status\">\r\n <button *ngIf=\"editorHandler.editable\" class=\"mx-2\" (click)=\"onUpdate(item)\" aria-hidden=\"true\"\r\n mat-icon-button>\r\n <mat-icon class=\"c-icon\">edit</mat-icon>\r\n </button>\r\n </ng-container>\r\n <ng-container *ngIf=\"editorHandler.status\">\r\n <button class=\"mx-2\" (click)=\"onSave(item)\" aria-hidden=\"true\" mat-icon-button>\r\n <mat-icon class=\"c-icon\">save</mat-icon>\r\n </button>\r\n <button class=\"mx-2\" (click)=\"onCancel(item)\" aria-hidden=\"true\" mat-icon-button>\r\n <mat-icon class=\"c-icon\">close</mat-icon>\r\n </button>\r\n </ng-container>\r\n\r\n </ng-template>\r\n </ng-container>\r\n\r\n </ng-container>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdCommand\">\r\n <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n <td class=\"px-8\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-command [commands]=\"gridOption.commands\" [item]=\"item\"></sd-desktop-command>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container *ngFor=\"let column of configuration.firstColumns; let i = index\" [matColumnDef]=\"column.field\"\r\n [sticky]=\"configuration.fixedColumn[column.field]\">\r\n <th mat-header-cell *matHeaderCellDef cdkDrag class=\"px-8 py-8 c-th\"\r\n [ngStyle]=\"{ 'min-width': column.width }\" [attr.rowspan]=\"\r\n configuration.multipleHeader && column.type !== 'children-col'\r\n ? 2\r\n : 1\r\n \" [attr.colspan]=\"\r\n column.type === 'children-col' ? column.children?.length : 1\r\n \">\r\n <div>\r\n <div aria-hidden=\"false\" role=\"presentation\" mat-sort-header [disabled]=\"\r\n !column.sortable || column.type === 'children-col'\r\n \" [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n <div class=\"c-inline-column\" *ngIf=\"gridOption.filter?.inlineColumn\">\r\n <ng-container *ngTemplateOutlet=\"\r\n inlineColumn;\r\n context: { column: column }\r\n \"></ng-container>\r\n </div>\r\n </div>\r\n </th>\r\n <td class=\"c-td px-8\" mat-cell *matCellDef=\"let item\">\r\n <ng-container *ngIf=\"cellDef[column.field]\">\r\n <ng-container *ngTemplateOutlet=\"\r\n cellDef[column.field].templateRef;\r\n context: { item: item, column: column, idx: i }\r\n \">\r\n </ng-container>\r\n </ng-container>\r\n <sd-desktop-cell *ngIf=\"!cellDef[column.field]\" [key]=\"key\" [column]=\"column\" [item]=\"item\"\r\n [gridOption]=\"gridOption\">\r\n </sd-desktop-cell>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef>\r\n <ng-container *ngIf=\"footerDef[column.field]\">\r\n <ng-container *ngTemplateOutlet=\"\r\n footerDef[column.field].templateRef;\r\n context: { items: items, column: column }\r\n \">\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n <ng-container *ngFor=\"let column of configuration.secondColumns; let i = index\"\r\n [matColumnDef]=\"column.field\">\r\n <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"c-th px-8\"\r\n [ngStyle]=\"{ 'min-width': column.width }\">\r\n <div>\r\n <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n <div class=\"c-inline-column\" *ngIf=\"gridOption.filter?.inlineColumn\">\r\n <ng-container *ngTemplateOutlet=\"\r\n inlineColumn;\r\n context: { column: column }\r\n \"></ng-container>\r\n </div>\r\n </div>\r\n </th>\r\n <td class=\"c-td px-8\" mat-cell *matCellDef=\"let item\">\r\n <ng-container *ngIf=\"cellDef[column.field]\">\r\n <ng-container *ngTemplateOutlet=\"\r\n cellDef[column.field].templateRef;\r\n context: { item: item, column: column, idx: i }\r\n \">\r\n </ng-container>\r\n </ng-container>\r\n <sd-desktop-cell *ngIf=\"!cellDef[column.field]\" [key]=\"key\" [column]=\"column\" [item]=\"item\"\r\n [gridOption]=\"gridOption\">\r\n </sd-desktop-cell>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef>\r\n <ng-container *ngIf=\"footerDef[column.field]\">\r\n <ng-container *ngTemplateOutlet=\"\r\n footerDef[column.field].templateRef;\r\n context: { items: items, column: column }\r\n \">\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\"></tr>\r\n <ng-container *ngIf=\"configuration.secondHeaders?.length\">\r\n <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\">\r\n </tr>\r\n </ng-container>\r\n <tr mat-row *matRowDef=\"let row; columns: configuration.displayedColumns\" matRipple class=\"c-row\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: ['sdSubInformation']\" class=\"c-detail-row\"></tr>\r\n <ng-container *ngIf=\"hasFooter && configuration.displayedFooters?.length\">\r\n <tr mat-footer-row *matFooterRowDef=\"configuration.displayedFooters; sticky: true\"></tr>\r\n </ng-container>\r\n </table>\r\n <ng-template #elseEmpty>\r\n <table mat-table [dataSource]=\"[{}]\">\r\n <ng-container matColumnDef=\"sdSelection\" sticky>\r\n <th class=\"px-15\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdEditor\">\r\n <th class=\"px-8\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n <button\r\n *ngIf=\"gridOption.editor?.addable && (!gridOption.editor.limit || gridOption.editor.limit > items.length)\"\r\n (click)=\"onCreate()\" aria-hidden=\"true\" mat-icon-button>\r\n <mat-icon class=\"c-icon\">add</mat-icon>\r\n </button>\r\n </th>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdCommand\">\r\n <th class=\"px-8\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdSubInformationAction\">\r\n <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 1px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdEmpty\">\r\n <td class=\"c-empty\" mat-cell *matCellDef=\"let item\"\r\n [attr.colspan]=\"configuration.displayedColumns.length\">\r\n <ng-container *ngIf=\"sdEmptyData?.templateRef; else sdEmptyDataNoRef\">\r\n <ng-container *ngTemplateOutlet=\"\r\n sdEmptyData.templateRef;\r\n context: { item: item }\r\n \">\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #sdEmptyDataNoRef>\r\n <mat-icon fontSet=\"material-icons-outlined\">leaderboard</mat-icon>\r\n </ng-template>\r\n </td>\r\n </ng-container>\r\n <ng-container *ngFor=\"let column of configuration.columns\" [matColumnDef]=\"column.field\"\r\n [sticky]=\"configuration.fixedColumn[column.field]\">\r\n <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n </th>\r\n </ng-container>\r\n <ng-container *ngFor=\"let column of configuration.firstColumns\" [matColumnDef]=\"column.field\"\r\n [sticky]=\"configuration.fixedColumn[column.field]\">\r\n <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\" [ngStyle]=\"{ 'min-width': column.width }\"\r\n [attr.rowspan]=\"\r\n configuration.multipleHeader &&\r\n column.type !== 'children-col'\r\n ? 2\r\n : 1\r\n \" [attr.colspan]=\"\r\n column.type === 'children-col' ? column.children?.length : 1\r\n \">\r\n <div>\r\n <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n <div class=\"c-inline-column\" *ngIf=\"gridOption.filter?.inlineColumn\">\r\n <ng-container *ngTemplateOutlet=\"\r\n inlineColumn;\r\n context: { column: column }\r\n \"></ng-container>\r\n </div>\r\n </div>\r\n </th>\r\n </ng-container>\r\n <ng-container *ngFor=\"let column of configuration.secondColumns\" [matColumnDef]=\"column.field\">\r\n <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n <div>\r\n <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n <div class=\"c-inline-column\" *ngIf=\"gridOption.filter?.inlineColumn\">\r\n <ng-container *ngTemplateOutlet=\"\r\n inlineColumn;\r\n context: { column: column }\r\n \"></ng-container>\r\n </div>\r\n </div>\r\n </th>\r\n </ng-container>\r\n <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\">\r\n </tr>\r\n <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\">\r\n </tr>\r\n <tr mat-row *matRowDef=\"let row; columns: ['sdEmpty']\"></tr>\r\n </table>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n <div class=\"c-paginator\">\r\n <div class=\"c-action\">\r\n <sd-button *ngIf=\"\r\n !gridOption.filter?.disabled && !gridOption.filter?.inlineColumn\r\n \" class=\"mr-10\" [title]=\"'Filter' | sdTranslate\" icon=\"filter_alt\" size=\"sm\" (action)=\"gridFilter.open()\"\r\n type=\"link\">\r\n </sd-button>\r\n <sd-button *ngIf=\"gridOption.reload?.visible\" class=\"mr-10\" [title]=\"'Reload' | sdTranslate\" icon=\"refresh\"\r\n size=\"sm\" (action)=\"reload()\" [disabled]=\"!items?.length\" type=\"link\">\r\n </sd-button>\r\n <ng-container *ngIf=\"gridOption.export?.visible && items?.length\">\r\n <ng-container *ngIf=\"isExporting; else unExporting\">\r\n <sd-button class=\"mr-10\" [loading]=\"isExporting\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\"\r\n size=\"sm\" type=\"link\">\r\n </sd-button>\r\n </ng-container>\r\n <ng-template #unExporting>\r\n <sd-button class=\"mr-10\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\" size=\"sm\"\r\n [matMenuTriggerFor]=\"menu\" type=\"link\">\r\n </sd-button>\r\n </ng-template>\r\n\r\n <mat-menu #menu=\"matMenu\">\r\n <button *ngIf=\"gridOption.export?.visibleExcel !== false\" mat-menu-item\r\n (click)=\"sdPopupExport.exportDefault()\" type=\"button\">\r\n <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n <span> {{ \"Export excel\" | sdTranslate }}</span>\r\n </button>\r\n <button *ngIf=\"gridOption.export?.visibleCSV !== false\" mat-menu-item\r\n (click)=\"sdPopupExport.exportDefault(true)\" type=\"button\">\r\n <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n <span> {{ \"Export CSV\" | sdTranslate }}</span>\r\n </button>\r\n <button *ngIf=\"gridOption.export?.key\" mat-menu-item (click)=\"sdPopupExport.open()\" type=\"button\">\r\n <mat-icon fontSet=\"material-icons-outlined\">settings</mat-icon>\r\n <span> {{ \"Configure\" | sdTranslate }}</span>\r\n </button>\r\n </mat-menu>\r\n </ng-container>\r\n <sd-button *ngIf=\"gridOption.config?.visible\" class=\"mr-10\" [title]=\"'Configure' | sdTranslate\"\r\n icon=\"settings\" size=\"sm\" (action)=\"popupGridConfiguration.open()\" type=\"link\">\r\n </sd-button>\r\n </div>\r\n <mat-paginator [class.d-none]=\"gridOption.paginate?.hidden\" [length]=\"total\"\r\n [pageSize]=\"gridOption.paginate?.pageSize\" [pageSizeOptions]=\"gridOption.paginate?.pages\"\r\n [showFirstLastButtons]=\"gridOption.paginate?.showFirstLastButtons\"></mat-paginator>\r\n </div>\r\n </div>\r\n <sd-popup-export *ngIf=\"gridOption.export?.visible\" [gridOption]=\"gridOption\" (export)=\"onExport($event)\"\r\n #sdPopupExport>\r\n </sd-popup-export>\r\n <sd-popup-grid-configuration [gridOption]=\"gridOption\" [key]=\"key\" #popupGridConfiguration>\r\n </sd-popup-grid-configuration>\r\n </ng-container>\r\n</ng-container>\r\n<ng-template #inlineColumn let-column=\"column\">\r\n <ng-container *ngIf=\"\r\n column.type === 'string' ||\r\n column.type === 'number' ||\r\n column.type === 'bool' ||\r\n column.type === 'values' ||\r\n column.type === 'date' ||\r\n column.type === 'datetime' ||\r\n column.type === 'time';\r\n else noFilter\r\n \">\r\n <sd-input *ngIf=\"column.type === 'string'\" size=\"sm\" type=\"text\" [(model)]=\"columnFilter[column.field]\"\r\n (keyupEnter)=\"onFilterChange()\" [disabled]=\"column.filter?.disabled\">\r\n </sd-input>\r\n <sd-input *ngIf=\"column.type === 'number'\" size=\"sm\" type=\"number\" [(model)]=\"columnFilter[column.field]\"\r\n (keyupEnter)=\"onFilterChange()\" [disabled]=\"column.filter?.disabled\">\r\n </sd-input>\r\n <sd-select *ngIf=\"column.type === 'bool'\" size=\"sm\" [items]=\"[\r\n { value: '1', display: column.option?.displayOnTrue || 'True' },\r\n { value: '0', display: column.option?.displayOnFalse || 'False' }\r\n ]\" valueField=\"value\" displayField=\"display\" [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\">\r\n </sd-select>\r\n <sd-select *ngIf=\"\r\n column.type === 'values' && column?.option?.selection !== 'AUTOCOMPLETE'\r\n \" size=\"sm\" [items]=\"column.option.items\" [valueField]=\"column.option.valueField\"\r\n [displayField]=\"column.option.displayField\" [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\" [multiple]=\"\r\n column?.option?.selection === 'MULTIPLE' ||\r\n column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\r\n \" [filtered]=\"column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\">\r\n </sd-select>\r\n <sd-autocomplete *ngIf=\"\r\n column.type === 'values' && column?.option?.selection === 'AUTOCOMPLETE'\r\n \" size=\"sm\" [items]=\"column.option.items\" [valueField]=\"column.option.valueField\"\r\n [displayField]=\"column.option.displayField\" [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\">\r\n </sd-autocomplete>\r\n <sd-date-time *ngIf=\"\r\n column.type === 'date' ||\r\n column.type === 'datetime' ||\r\n column.type === 'time'\r\n \" size=\"sm\" [(model)]=\"columnFilter[column.field]\" [type]=\"column.type\" (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\">\r\n </sd-date-time>\r\n </ng-container>\r\n <ng-template #noFilter>\r\n <sd-input type=\"text\" disabled> </sd-input>\r\n </ng-template>\r\n</ng-template>\r\n\r\n<sd-quick-action *ngIf=\"\r\n selectedItems\r\n | selectionActionFilter: gridOption?.selection?.actions as actions\r\n \" [isOpened]=\"actions?.length\">\r\n <div sdMessage>\r\n <strong class=\"text-info\">{{ selectedItems.length }}</strong>\r\n {{ gridOption?.selection?.message || (\"selected rows\" | sdTranslate) }}\r\n </div>\r\n <div class=\"d-flex align-items-center\" sdAction>\r\n <ng-container *ngFor=\"let action of actions\">\r\n <sd-button *ngIf=\"action.click\" class=\"ml-5\" [tooltip]=\"action.tooltip\" [icon]=\"action.icon\"\r\n [color]=\"action.color || 'secondary'\" [type]=\"action.type || 'light'\" [fontSet]=\"action.fontSet\"\r\n [title]=\"action.title\" size=\"sm\" (action)=\"action.click(selectedItems)\"></sd-button>\r\n <ng-container *ngIf=\"action.children?.length\">\r\n <sd-button class=\"ml-5\" [tooltip]=\"action.tooltip\" [icon]=\"action.icon || 'more_vert'\"\r\n [color]=\"action.color || 'secondary'\" [type]=\"action.type || 'light'\" [fontSet]=\"action.fontSet\"\r\n [title]=\"action.title\" size=\"sm\" [matMenuTriggerFor]=\"menu\">\r\n </sd-button>\r\n <mat-menu #menu=\"matMenu\">\r\n <span>\r\n <button *ngFor=\"let childAction of action.children\" mat-menu-item (click)=\"childAction.click(selectedItems)\"\r\n [disabled]=\"childAction.disabled\">\r\n <mat-icon [fontSet]=\"childAction.fontSet\" class=\"c-icon\">{{ childAction.icon }}\r\n </mat-icon>\r\n <span> {{ childAction.title }}</span>\r\n </button>\r\n </span>\r\n </mat-menu>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</sd-quick-action>",
|
|
1731
1847
|
animations: [
|
|
1732
1848
|
trigger('detailExpand', [
|
|
1733
1849
|
state('collapsed', style({ height: '0', minHeight: '0', visibility: 'hidden' })),
|
|
@@ -1935,7 +2051,8 @@ class SdDesktopCellView {
|
|
|
1935
2051
|
SdDesktopCellView.decorators = [
|
|
1936
2052
|
{ type: Component, args: [{
|
|
1937
2053
|
selector: 'sd-desktop-cell-view',
|
|
1938
|
-
template: "<ng-container *ngIf=\"column
|
|
2054
|
+
template: "<ng-container *ngIf=\"column.htmlTemplate;else useDefaultView\">\r\n <div (click)=\"column.click && column.click(item[column.field], item)\" style=\"overflow-wrap: break-word;\"\r\n [ngClass]=\"{'cursor-pointer':column.click}\"\r\n [innerHTML]=\"(item[column.field] | columnHtmlTemplate:item:column) | safeHtml\">\r\n </div>\r\n</ng-container>\r\n<ng-template #useDefaultView>\r\n <ng-container *sdLet=\"item[column.field] | columnBadge:item:column as badge\">\r\n <ng-container *ngIf=\"column.type === 'string'\">\r\n <ng-container *ngIf=\"!!badge\">\r\n <div *ngIf=\"!column.badgeType\" class=\"c-badge\" style=\"overflow-wrap: break-word;\" matTooltipPosition=\"above\"\r\n [matTooltip]=\"item[column.field] | columnTooltip:item:column\"\r\n [class]=\"{'c-secondary': badge === 'normal', 'c-info': badge === 'info', 'c-success': badge === 'success', 'c-danger': badge === 'danger', 'c-warning': badge === 'warning'}\">\r\n <span *ngIf=\"column.click\" class=\"pointer\"\r\n (click)=\"column.click(item[column.field], item)\">{{item[column.field] |\r\n columnTransform:item:column}}</span>\r\n <ng-container *ngIf=\"!column.click\">{{item[column.field] | columnTransform:item:column}}</ng-container>\r\n </div>\r\n <div *ngIf=\"column.badgeType === 'circle'\" style=\"min-width: 150px\"\r\n class=\"c-badge-circle d-flex align-items-center\"\r\n [class]=\"{'c-unknown': !badge, 'c-secondary': badge === 'normal', 'c-info': badge === 'info', 'c-success': badge === 'success', 'c-danger': badge === 'danger', 'c-warning': badge === 'warning'}\">\r\n <span *ngIf=\"badge\" class=\"material-icons-round c-material-icon mr-4\">\r\n fiber_manual_record\r\n </span>\r\n <span *ngIf=\"!badge\" class=\"material-icons-outlined c-material-icon mr-4\">\r\n fiber_manual_record\r\n </span>\r\n {{item[column.field] | columnTransform:item:column}}\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"!badge\">\r\n <div style=\"overflow-wrap: break-word;\" [matTooltip]=\"item[column.field] | columnTooltip:item:column\">\r\n <a *ngIf=\"column.click\" href=\"javascript:;\"\r\n (click)=\"column.click(item[column.field], item)\">{{item[column.field] | columnTransform:item:column}}</a>\r\n <ng-container *ngIf=\"!column.click\">{{item[column.field] | columnTransform:item:column}}</ng-container>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <div *ngIf=\"column.type === 'number'\">\r\n <a *ngIf=\"column.click\" href=\"javascript:;\" (click)=\"column.click(item[column.field], item)\">{{item[column.field]\r\n | columnTransform:item:column}}</a>\r\n <ng-container *ngIf=\"!column.click\">\r\n {{item[column.field] | columnTransform:item:column}}</ng-container>\r\n </div>\r\n <div *ngIf=\"column.type === 'date'\" matTooltipPosition=\"above\"\r\n [matTooltip]=\"item[column.field] | date:'dd/MM/yyyy'\">\r\n {{item[column.field] | sdTimeDifferent:'dd/MM/yyyy':column.option?.timeDifferent | async}}\r\n </div>\r\n <div *ngIf=\"column.type === 'datetime'\" matTooltipPosition=\"above\"\r\n [matTooltip]=\"item[column.field] | date:'dd/MM/yyyy HH:mm'\">\r\n {{item[column.field] | sdTimeDifferent:'dd/MM/yyyy HH:mm':column.option?.timeDifferent | async}}\r\n </div>\r\n <div *ngIf=\"column.type === 'time'\">\r\n {{item[column.field] | date:'HH:mm'}}\r\n </div>\r\n <div *ngIf=\"column.type === 'bool'\" class=\"align-middle text-center\">\r\n <ng-container *ngIf=\"!!badge\">\r\n <div *ngIf=\"!column.badgeType\" class=\"c-badge\" style=\"overflow-wrap: break-word;\" matTooltipPosition=\"above\"\r\n [matTooltip]=\"item[column.field] | columnTooltip:item:column\"\r\n [class]=\"{'c-secondary': badge === 'normal', 'c-info': badge === 'info', 'c-success': badge === 'success', 'c-danger': badge === 'danger', 'c-warning': badge === 'warning'}\">\r\n <span *ngIf=\"column.click\" class=\"pointer\"\r\n (click)=\"column.click(item[column.field], item)\">{{item[column.field] | columnTransform:item:column}}</span>\r\n <ng-container *ngIf=\"!column.click\">{{item[column.field] | columnTransform:item:column}}</ng-container>\r\n </div>\r\n <div *ngIf=\"column.badgeType === 'circle'\" style=\"min-width: 150px\"\r\n class=\"c-badge-circle d-flex align-items-center\"\r\n [class]=\"{'c-unknown': !badge, 'c-secondary': badge === 'normal', 'c-info': badge === 'info', 'c-success': badge === 'success', 'c-danger': badge === 'danger', 'c-warning': badge === 'warning'}\">\r\n <span *ngIf=\"badge\" class=\"material-icons-round c-material-icon mr-4\">\r\n fiber_manual_record\r\n </span>\r\n <span *ngIf=\"!badge\" class=\"material-icons-outlined c-material-icon mr-4\">\r\n fiber_manual_record\r\n </span>\r\n {{item[column.field] | columnTransform:item:column}}\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"!badge\">\r\n <span *ngIf=\"item[column.field]\" class=\"font-weight-bold c-color-success\">{{item[column.field] |\r\n columnTransform:item:column}}</span>\r\n <span *ngIf=\"!item[column.field]\" class=\"font-weight-bold c-color-danger\">{{item[column.field] |\r\n columnTransform:item:column}}</span>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"column.type === 'values'\">\r\n <ng-container *ngIf=\"column.transform\">{{item[column.field] | columnTransform:item:column}}</ng-container>\r\n <ng-container *ngIf=\"!column.transform\">\r\n <ng-container *ngIf=\"item[column.field] | columnValues:column:key | async; $implicit as valueData\">\r\n <div\r\n *ngIf=\"valueData[column.option?.colorField] || valueData[column.option?.backgroundColorField]; else elseNoStatus\"\r\n class=\"c-badge\"\r\n [ngStyle]=\"{'color':valueData[column.option?.colorField], 'background-color': valueData[column.option?.backgroundColorField]}\">\r\n {{valueData[column.option?.displayField]}}\r\n </div>\r\n <ng-template #elseNoStatus>\r\n <div class=\"text-left\">\r\n {{valueData[column.option?.displayField]}}\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n <div *ngIf=\"column.type === 'image'\" class=\"align-middle text-center\">\r\n <img *ngIf=\"item[column.field]\" [src]=\"item[column.field] | columnTransform:item:column\"\r\n [width]=\"column.option?.width\" [height]=\"column.option?.height\" style=\"margin: 5px 0;object-fit: contain;\"\r\n (click)=\"column.click && column.click(item[column.field], item)\" [ngClass]=\"{'pointer':column.click}\">\r\n <mat-icon *ngIf=\"!item[column.field]\" class=\"c-img\" [ngClass]=\"{'pointer':column.click}\"\r\n (click)=\"column.click && column.click(item[column.field], item)\">image</mat-icon>\r\n </div>\r\n </ng-container>\r\n <sd-desktop-cell-children-view *ngIf=\"column.type === 'children'\" [key]=\"key\" [item]=\"item\" [column]=\"column\">\r\n </sd-desktop-cell-children-view>\r\n</ng-template>",
|
|
2055
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1939
2056
|
styles: [".c-color-success{color:#4caf50}.c-color-danger{color:#f82c13}.c-img{font-size:30px;opacity:.5}.c-img.pointer:hover{opacity:.9}.c-badge{border-radius:20px;display:inline-block;margin-bottom:4px;padding:2px 12px;text-align:center}.c-badge.c-warning{background:#fff3e0;color:#ff9600}.c-badge.c-info{background:#e7e9ff;color:#2962ff}.c-badge.c-success{background:#e8f5e9;color:#4caf50}.c-badge.c-danger{background:#fee8e7;color:#f82c13}.c-badge.c-normal{background:rgba(0,0,0,.12);color:#000}.wes-status .c-material-icon{font-size:12px;height:12px;width:12px}.wes-status.text-secondary .c-material-icon{color:rgba(0,0,0,.5)}.c-badge-circle .c-material-icon{font-size:12px;height:12px;width:12px}.c-badge-circle.c-unknown{color:#212121}.c-badge-circle.c-unknown .c-material-icon{color:rgba(0,0,0,.5)}.c-badge-circle.c-secondary{color:#212121}.c-badge-circle.c-info{color:#2962ff}.c-badge-circle.c-success{color:#4caf50}.c-badge-circle.c-danger{color:#f82c13}.c-badge-circle.c-warning{color:#ff9600}"]
|
|
1940
2057
|
},] }
|
|
1941
2058
|
];
|
|
@@ -2552,6 +2669,166 @@ SdDynamicColumn.propDecorators = {
|
|
|
2552
2669
|
gridOption: [{ type: Input }]
|
|
2553
2670
|
};
|
|
2554
2671
|
|
|
2672
|
+
class SdDesktopCell {
|
|
2673
|
+
constructor() { }
|
|
2674
|
+
}
|
|
2675
|
+
SdDesktopCell.decorators = [
|
|
2676
|
+
{ type: Component, args: [{
|
|
2677
|
+
selector: 'sd-desktop-cell',
|
|
2678
|
+
template: "<ng-container *ngIf=\"column && item\">\r\n <ng-container *ngIf=\"item.editorHandlerRow?.visible;else useView\">\r\n <ng-container *sdLet=\"item[column.field] | sdEditorHandlerColumn:item:column:gridOption\">\r\n <ng-container *ngIf=\"item.editorHandlerColumn[column.field]?.visible;else useView\">\r\n <sd-desktop-cell-editor [column]=\"column\" [item]=\"item\"></sd-desktop-cell-editor>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #useView>\r\n <sd-desktop-cell-view [key]=\"key\" [column]=\"column\" [item]=\"item\"></sd-desktop-cell-view>\r\n </ng-template>\r\n</ng-container>",
|
|
2679
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
2680
|
+
styles: [".c-color-success{color:#4caf50}.c-color-danger{color:#f82c13}.c-img{font-size:30px;opacity:.5}.c-img.pointer:hover{opacity:.9}.c-badge{border-radius:20px;display:inline-block;margin-bottom:4px;padding:2px 12px;text-align:center}.c-badge.c-warning{background:#fff3e0;color:#ff9600}.c-badge.c-info{background:#e7e9ff;color:#2962ff}.c-badge.c-success{background:#e8f5e9;color:#4caf50}.c-badge.c-danger{background:#fee8e7;color:#f82c13}.c-badge.c-normal{background:rgba(0,0,0,.12);color:#000}.wes-status .c-material-icon{font-size:12px;height:12px;width:12px}.wes-status.text-secondary .c-material-icon{color:rgba(0,0,0,.5)}.c-badge-circle .c-material-icon{font-size:12px;height:12px;width:12px}.c-badge-circle.c-unknown{color:#212121}.c-badge-circle.c-unknown .c-material-icon{color:rgba(0,0,0,.5)}.c-badge-circle.c-secondary{color:#212121}.c-badge-circle.c-info{color:#2962ff}.c-badge-circle.c-success{color:#4caf50}.c-badge-circle.c-danger{color:#f82c13}.c-badge-circle.c-warning{color:#ff9600}"]
|
|
2681
|
+
},] }
|
|
2682
|
+
];
|
|
2683
|
+
SdDesktopCell.ctorParameters = () => [];
|
|
2684
|
+
SdDesktopCell.propDecorators = {
|
|
2685
|
+
key: [{ type: Input }],
|
|
2686
|
+
column: [{ type: Input }],
|
|
2687
|
+
item: [{ type: Input }],
|
|
2688
|
+
gridOption: [{ type: Input }]
|
|
2689
|
+
};
|
|
2690
|
+
|
|
2691
|
+
class SdDesktopCellEditor {
|
|
2692
|
+
constructor() {
|
|
2693
|
+
this.onChange = () => {
|
|
2694
|
+
var _a, _b, _c;
|
|
2695
|
+
if (this.column.type === 'children' || this.column.type === 'children-col') {
|
|
2696
|
+
return;
|
|
2697
|
+
}
|
|
2698
|
+
(_c = (_b = (_a = this.column) === null || _a === void 0 ? void 0 : _a.editor) === null || _b === void 0 ? void 0 : _b.change) === null || _c === void 0 ? void 0 : _c.call(_b, this.item);
|
|
2699
|
+
};
|
|
2700
|
+
}
|
|
2701
|
+
}
|
|
2702
|
+
SdDesktopCellEditor.decorators = [
|
|
2703
|
+
{ type: Component, args: [{
|
|
2704
|
+
selector: 'sd-desktop-cell-editor',
|
|
2705
|
+
template: "<sd-input *ngIf=\"column.type === 'string'\" size=\"sm\" type=\"text\" [(model)]=\"item[column.field]\" (sdChange)=\"onChange()\"\r\n [disabled]=\"column.filter?.disabled\">\r\n</sd-input>\r\n<sd-input *ngIf=\"column.type === 'number'\" size=\"sm\" type=\"number\" [(model)]=\"item[column.field]\"\r\n (sdChange)=\"onChange()\" [disabled]=\"column.filter?.disabled\">\r\n</sd-input>\r\n<sd-select *ngIf=\"column.type === 'bool'\" size=\"sm\" [items]=\"[\r\n { value: '1', display: column.option?.displayOnTrue || 'True' },\r\n { value: '0', display: column.option?.displayOnFalse || 'False' }\r\n ]\" valueField=\"value\" displayField=\"display\" [(model)]=\"item[column.field]\" (sdChange)=\"onChange()\"\r\n [disabled]=\"column.filter?.disabled\">\r\n</sd-select>\r\n<sd-select *ngIf=\"\r\n column.type === 'values' && column?.option?.selection !== 'AUTOCOMPLETE'\r\n \" size=\"sm\" [items]=\"column.option.items\" [valueField]=\"column.option.valueField\"\r\n [displayField]=\"column.option.displayField\" [(model)]=\"item[column.field]\" (sdChange)=\"onChange()\"\r\n [disabled]=\"column.filter?.disabled\" [multiple]=\"\r\n column?.option?.selection === 'MULTIPLE' ||\r\n column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\r\n \" [filtered]=\"column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\">\r\n</sd-select>\r\n<sd-autocomplete *ngIf=\"\r\n column.type === 'values' && column?.option?.selection === 'AUTOCOMPLETE'\r\n \" size=\"sm\" [items]=\"column.option.items\" [valueField]=\"column.option.valueField\"\r\n [displayField]=\"column.option.displayField\" [(model)]=\"item[column.field]\" (sdChange)=\"onChange()\"\r\n [disabled]=\"column.filter?.disabled\">\r\n</sd-autocomplete>\r\n<sd-date-time *ngIf=\"\r\n column.type === 'date' ||\r\n column.type === 'datetime' ||\r\n column.type === 'time'\r\n \" size=\"sm\" [(model)]=\"item[column.field]\" [type]=\"column.type\" (sdChange)=\"onChange()\"\r\n [disabled]=\"column.filter?.disabled\">\r\n</sd-date-time>",
|
|
2706
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
2707
|
+
styles: [".c-color-success{color:#4caf50}.c-color-danger{color:#f82c13}.c-img{font-size:30px;opacity:.5}.c-img.pointer:hover{opacity:.9}.c-badge{border-radius:20px;display:inline-block;margin-bottom:4px;padding:2px 12px;text-align:center}.c-badge.c-warning{background:#fff3e0;color:#ff9600}.c-badge.c-info{background:#e7e9ff;color:#2962ff}.c-badge.c-success{background:#e8f5e9;color:#4caf50}.c-badge.c-danger{background:#fee8e7;color:#f82c13}.c-badge.c-normal{background:rgba(0,0,0,.12);color:#000}.wes-status .c-material-icon{font-size:12px;height:12px;width:12px}.wes-status.text-secondary .c-material-icon{color:rgba(0,0,0,.5)}.c-badge-circle .c-material-icon{font-size:12px;height:12px;width:12px}.c-badge-circle.c-unknown{color:#212121}.c-badge-circle.c-unknown .c-material-icon{color:rgba(0,0,0,.5)}.c-badge-circle.c-secondary{color:#212121}.c-badge-circle.c-info{color:#2962ff}.c-badge-circle.c-success{color:#4caf50}.c-badge-circle.c-danger{color:#f82c13}.c-badge-circle.c-warning{color:#ff9600}"]
|
|
2708
|
+
},] }
|
|
2709
|
+
];
|
|
2710
|
+
SdDesktopCellEditor.ctorParameters = () => [];
|
|
2711
|
+
SdDesktopCellEditor.propDecorators = {
|
|
2712
|
+
column: [{ type: Input }],
|
|
2713
|
+
item: [{ type: Input }]
|
|
2714
|
+
};
|
|
2715
|
+
|
|
2716
|
+
class SdEditorHandlerRowPipe {
|
|
2717
|
+
transform(item, gridOption) {
|
|
2718
|
+
const { editor } = gridOption;
|
|
2719
|
+
if (!editor) {
|
|
2720
|
+
return {
|
|
2721
|
+
visible: false
|
|
2722
|
+
};
|
|
2723
|
+
}
|
|
2724
|
+
let isDisabled = false;
|
|
2725
|
+
if (typeof (editor === null || editor === void 0 ? void 0 : editor.disabled) === 'function') {
|
|
2726
|
+
isDisabled = editor.disabled(item);
|
|
2727
|
+
}
|
|
2728
|
+
else {
|
|
2729
|
+
isDisabled = editor === null || editor === void 0 ? void 0 : editor.disabled;
|
|
2730
|
+
}
|
|
2731
|
+
if (editor.type === 'inline') {
|
|
2732
|
+
const removable = editor.removable;
|
|
2733
|
+
if (typeof (removable) === 'function') {
|
|
2734
|
+
item.editorHandlerRow = Object.assign(Object.assign({}, item.editorHandlerRow), { visible: !isDisabled, removable: removable(item), isInline: true });
|
|
2735
|
+
return item.editorHandlerRow;
|
|
2736
|
+
}
|
|
2737
|
+
item.editorHandlerRow = Object.assign(Object.assign({}, item.editorHandlerRow), { visible: !isDisabled, removable: removable, isInline: true });
|
|
2738
|
+
return item.editorHandlerRow;
|
|
2739
|
+
}
|
|
2740
|
+
const editable = editor.editable;
|
|
2741
|
+
if (typeof (editable) === 'function') {
|
|
2742
|
+
item.editorHandlerRow = Object.assign(Object.assign({}, item.editorHandlerRow), { visible: !isDisabled, editable: editable(item), isInline: false });
|
|
2743
|
+
return item.editorHandlerRow;
|
|
2744
|
+
}
|
|
2745
|
+
item.editorHandlerRow = Object.assign(Object.assign({}, item.editorHandlerRow), { visible: !isDisabled, editable: editable, isInline: false });
|
|
2746
|
+
return item.editorHandlerRow;
|
|
2747
|
+
}
|
|
2748
|
+
}
|
|
2749
|
+
SdEditorHandlerRowPipe.decorators = [
|
|
2750
|
+
{ type: Pipe, args: [{
|
|
2751
|
+
name: 'sdEditorHandlerRow'
|
|
2752
|
+
},] }
|
|
2753
|
+
];
|
|
2754
|
+
|
|
2755
|
+
class SdEditorHandlerColumnPipe {
|
|
2756
|
+
transform(value, item, column, gridOption) {
|
|
2757
|
+
if (column.type === 'children' || column.type === 'children-col') {
|
|
2758
|
+
return true;
|
|
2759
|
+
}
|
|
2760
|
+
const { editor } = gridOption;
|
|
2761
|
+
const visible = (col) => {
|
|
2762
|
+
var _a;
|
|
2763
|
+
if (col.type === 'children' || col.type === 'children-col') {
|
|
2764
|
+
return false;
|
|
2765
|
+
}
|
|
2766
|
+
let isDisabled = false;
|
|
2767
|
+
// Kiểm tra xem có bị disabled hay không?
|
|
2768
|
+
if (col.editor) {
|
|
2769
|
+
isDisabled = typeof (col.editor.disabled) === 'function' ? col.editor.disabled(item) : col.editor.disabled;
|
|
2770
|
+
}
|
|
2771
|
+
// Nếu bị disabled return false
|
|
2772
|
+
if (isDisabled) {
|
|
2773
|
+
return false;
|
|
2774
|
+
}
|
|
2775
|
+
if (editor.type !== 'inline') {
|
|
2776
|
+
return !!((_a = item.editorHandlerRow) === null || _a === void 0 ? void 0 : _a.status);
|
|
2777
|
+
}
|
|
2778
|
+
return true;
|
|
2779
|
+
};
|
|
2780
|
+
item.editorHandlerColumn = item.editorHandlerColumn || {};
|
|
2781
|
+
for (const col of gridOption.columns.filter(e => { var _a, _b; return (_b = (_a = column.editor) === null || _a === void 0 ? void 0 : _a.relatedColumns) === null || _b === void 0 ? void 0 : _b.includes(e.field); })) {
|
|
2782
|
+
item.editorHandlerColumn[col.field] = Object.assign(Object.assign({}, item.editorHandlerColumn[col.field]), { visible: visible(col) });
|
|
2783
|
+
}
|
|
2784
|
+
return true;
|
|
2785
|
+
}
|
|
2786
|
+
}
|
|
2787
|
+
SdEditorHandlerColumnPipe.decorators = [
|
|
2788
|
+
{ type: Pipe, args: [{
|
|
2789
|
+
name: 'sdEditorHandlerColumn'
|
|
2790
|
+
},] }
|
|
2791
|
+
];
|
|
2792
|
+
|
|
2793
|
+
class SdEditorValidatePipe {
|
|
2794
|
+
constructor() {
|
|
2795
|
+
this.delay = 1000; // Sau khoảng thời gian delay nếu không có thay đổi thì thì mới bắt đầu thực hiện validate
|
|
2796
|
+
}
|
|
2797
|
+
transform(value, item, validate) {
|
|
2798
|
+
var _a;
|
|
2799
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
2800
|
+
if (!((_a = item.editorHandlerRow) === null || _a === void 0 ? void 0 : _a.visible)) {
|
|
2801
|
+
return true;
|
|
2802
|
+
}
|
|
2803
|
+
this.previous = new Date();
|
|
2804
|
+
yield new Promise(resolve => setTimeout(resolve, this.delay));
|
|
2805
|
+
const now = new Date();
|
|
2806
|
+
const dif = now.getTime() - this.previous.getTime();
|
|
2807
|
+
if (dif < this.delay) {
|
|
2808
|
+
return true;
|
|
2809
|
+
}
|
|
2810
|
+
if (!validate) {
|
|
2811
|
+
item.editorHandlerRow.errorMessage = null;
|
|
2812
|
+
return true;
|
|
2813
|
+
}
|
|
2814
|
+
const result = validate(item);
|
|
2815
|
+
if (result instanceof Promise) {
|
|
2816
|
+
item.editorHandlerRow.errorMessage = yield result;
|
|
2817
|
+
return true;
|
|
2818
|
+
}
|
|
2819
|
+
else {
|
|
2820
|
+
item.editorHandlerRow.errorMessage = result;
|
|
2821
|
+
return true;
|
|
2822
|
+
}
|
|
2823
|
+
});
|
|
2824
|
+
}
|
|
2825
|
+
}
|
|
2826
|
+
SdEditorValidatePipe.decorators = [
|
|
2827
|
+
{ type: Pipe, args: [{
|
|
2828
|
+
name: 'sdEditorValidate'
|
|
2829
|
+
},] }
|
|
2830
|
+
];
|
|
2831
|
+
|
|
2555
2832
|
class MatPaginatorIntlCro extends MatPaginatorIntl {
|
|
2556
2833
|
constructor() {
|
|
2557
2834
|
super(...arguments);
|
|
@@ -2604,6 +2881,8 @@ SdGridMaterialModule.decorators = [
|
|
|
2604
2881
|
MatSliderModule
|
|
2605
2882
|
],
|
|
2606
2883
|
declarations: [
|
|
2884
|
+
SdDesktopCell,
|
|
2885
|
+
SdDesktopCellEditor,
|
|
2607
2886
|
SdDesktopCellView,
|
|
2608
2887
|
SdDesktopCellChildrenView,
|
|
2609
2888
|
SdDesktopCommand,
|
|
@@ -2636,7 +2915,10 @@ SdGridMaterialModule.decorators = [
|
|
|
2636
2915
|
SdFilterExternalPipe,
|
|
2637
2916
|
SdSelectionActionFilterPipe,
|
|
2638
2917
|
SdSelectionDisablePipe,
|
|
2639
|
-
SdSelectionDisableSelectAllPipe
|
|
2918
|
+
SdSelectionDisableSelectAllPipe,
|
|
2919
|
+
SdEditorHandlerRowPipe,
|
|
2920
|
+
SdEditorHandlerColumnPipe,
|
|
2921
|
+
SdEditorValidatePipe
|
|
2640
2922
|
],
|
|
2641
2923
|
exports: [
|
|
2642
2924
|
SdGridMaterial,
|
|
@@ -2669,5 +2951,5 @@ SdGridMaterialModule.decorators = [
|
|
|
2669
2951
|
* Generated bundle index. Do not edit.
|
|
2670
2952
|
*/
|
|
2671
2953
|
|
|
2672
|
-
export { SdGridMaterial, SdGridMaterialModule, SdMaterialCellDefDirective, SdMaterialEmptyDataDefDirective, SdMaterialFilterDefDirective, SdMaterialFooterDefDirective, SdMaterialSubInformationDefDirective, MatPaginatorIntlCro as ɵa, SdGridFilter as ɵb,
|
|
2954
|
+
export { SdGridMaterial, SdGridMaterialModule, SdMaterialCellDefDirective, SdMaterialEmptyDataDefDirective, SdMaterialFilterDefDirective, SdMaterialFooterDefDirective, SdMaterialSubInformationDefDirective, MatPaginatorIntlCro as ɵa, SdGridFilter as ɵb, SdColumnHtmlTemplatePipe as ɵba, SdColumnTransformPipe as ɵbb, SdColumnTooltipPipe as ɵbc, SdColumnBadgePipe as ɵbd, SdFilterColumnPipe as ɵbe, SdFilterExternalPipe as ɵbf, SdSelectionActionFilterPipe as ɵbg, SdSelectionDisablePipe as ɵbh, SdSelectionDisableSelectAllPipe as ɵbi, SdEditorHandlerRowPipe as ɵbj, SdEditorHandlerColumnPipe as ɵbk, SdEditorValidatePipe as ɵbl, SdPopupFilter as ɵc, SdGridFilterService as ɵd, SdPopupExport as ɵe, GRID_MATERIAL_CONFIG as ɵg, SdGridConfigurationService as ɵh, SdGridService as ɵi, SdDesktopCell as ɵj, SdDesktopCellEditor as ɵk, SdDesktopCellView as ɵl, SdDesktopCellChildrenView as ɵm, SdDesktopCommand as ɵn, SdLetDirective as ɵo, SdPopupGridConfiguration as ɵp, SdDynamicColumn as ɵq, SdGeneratedColumnService as ɵr, SdGridConfigurationResultPipe as ɵs, SdColumnChildrenFilterPipe as ɵt, SdColumnTitlePipe as ɵu, SdCommandFilterPipe as ɵv, SdCommandDisablePipe as ɵw, SdCommandIconPipe as ɵx, SdCommandTitlePipe as ɵy, SdColumnValuesPipe as ɵz };
|
|
2673
2955
|
//# sourceMappingURL=sd-angular-core-grid-material.js.map
|