@sd-angular/core 0.0.944 → 0.0.948
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 +141 -74
- 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/bundles/sd-angular-core-tab-router.umd.js +28 -23
- package/bundles/sd-angular-core-tab-router.umd.js.map +1 -1
- package/bundles/sd-angular-core-tab-router.umd.min.js +1 -1
- package/bundles/sd-angular-core-tab-router.umd.min.js.map +1 -1
- package/esm2015/grid-material/sd-angular-core-grid-material.js +27 -26
- package/esm2015/grid-material/src/lib/components/column-inline-filter/column-inline-filter.component.js +34 -0
- package/esm2015/grid-material/src/lib/components/desktop-cell-children-view/desktop-cell-children-view.component.js +2 -2
- package/esm2015/grid-material/src/lib/components/desktop-cell-editor/desktop-cell-editor.component.js +1 -1
- package/esm2015/grid-material/src/lib/components/desktop-cell-view/desktop-cell-view.component.js +3 -3
- package/esm2015/grid-material/src/lib/components/desktop-editor-validation/desktop-editor-validation.component.js +2 -2
- package/esm2015/grid-material/src/lib/grid-material.component.js +16 -8
- package/esm2015/grid-material/src/lib/grid-material.module.js +3 -1
- 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/column-badge.pipe.js +5 -2
- package/esm2015/grid-material/src/lib/pipes/column-transform.pipe.js +24 -17
- package/esm2015/grid-material/src/lib/pipes/editor-handler-column.pipe.js +16 -10
- package/esm2015/grid-material/src/lib/pipes/editor-validate.pipe.js +13 -11
- package/esm2015/tab-router/src/lib/components/tab-router-outlet/tab-router-outlet.component.js +9 -4
- package/fesm2015/sd-angular-core-grid-material.js +106 -48
- package/fesm2015/sd-angular-core-grid-material.js.map +1 -1
- package/fesm2015/sd-angular-core-tab-router.js +8 -3
- package/fesm2015/sd-angular-core-tab-router.js.map +1 -1
- package/grid-material/sd-angular-core-grid-material.d.ts +26 -25
- package/grid-material/sd-angular-core-grid-material.metadata.json +1 -1
- package/grid-material/src/lib/components/column-inline-filter/column-inline-filter.component.d.ts +13 -0
- package/grid-material/src/lib/models/grid-column.model.d.ts +4 -3
- package/grid-material/src/lib/models/grid-editor.model.d.ts +1 -1
- package/grid-material/src/lib/models/grid.model.d.ts +1 -0
- package/grid-material/src/lib/pipes/column-badge.pipe.d.ts +1 -1
- package/grid-material/src/lib/pipes/column-transform.pipe.d.ts +4 -4
- package/grid-material/src/lib/pipes/editor-handler-column.pipe.d.ts +1 -0
- package/grid-material/src/lib/pipes/editor-validate.pipe.d.ts +1 -2
- package/package.json +1 -1
- package/{sd-angular-core-0.0.944.tgz → sd-angular-core-0.0.948.tgz} +0 -0
|
@@ -1956,7 +1956,10 @@
|
|
|
1956
1956
|
this.items = (args === null || args === void 0 ? void 0 : args.items) || [];
|
|
1957
1957
|
this.total = (args === null || args === void 0 ? void 0 : args.total) || 0;
|
|
1958
1958
|
// this.isHiddenPaginator = this.filterInfo.pageNumber === 0 && this.total <= this.filterInfo.pageSize;
|
|
1959
|
-
this.items.forEach(function (item) {
|
|
1959
|
+
this.items.forEach(function (item) {
|
|
1960
|
+
item.originItem = Object.assign({}, item);
|
|
1961
|
+
item.sdId = hash__namespace(item);
|
|
1962
|
+
});
|
|
1960
1963
|
return [4 /*yield*/, ((_c = (_b = (_a = this.gridOption) === null || _a === void 0 ? void 0 : _a.reload) === null || _b === void 0 ? void 0 : _b.onReload) === null || _c === void 0 ? void 0 : _c.call(_b, this.items))];
|
|
1961
1964
|
case 1:
|
|
1962
1965
|
_t.sent();
|
|
@@ -2372,7 +2375,7 @@
|
|
|
2372
2375
|
(_a = _this.gridFilter) === null || _a === void 0 ? void 0 : _a.setFilter(args);
|
|
2373
2376
|
};
|
|
2374
2377
|
this.onCreate = function () {
|
|
2375
|
-
var _a;
|
|
2378
|
+
var _a, _b;
|
|
2376
2379
|
var _t = _this.gridOption, type = _t.type, editor = _t.editor, columns = _t.columns;
|
|
2377
2380
|
if (!(editor === null || editor === void 0 ? void 0 : editor.addable)) {
|
|
2378
2381
|
return;
|
|
@@ -2390,11 +2393,16 @@
|
|
|
2390
2393
|
item[column.field] = null;
|
|
2391
2394
|
}
|
|
2392
2395
|
});
|
|
2393
|
-
(
|
|
2396
|
+
if (type === 'local') {
|
|
2397
|
+
(_a = editor.onAdd) === null || _a === void 0 ? void 0 : _a.call(editor, item, _this.localItems);
|
|
2398
|
+
}
|
|
2399
|
+
else {
|
|
2400
|
+
(_b = editor.onAdd) === null || _b === void 0 ? void 0 : _b.call(editor, item, _this.items);
|
|
2401
|
+
}
|
|
2394
2402
|
// Đưa item lên dòng đầu tiên nếu type khác popup
|
|
2395
2403
|
if (editor.type !== 'popup') {
|
|
2396
2404
|
if (type === 'local') {
|
|
2397
|
-
_this.localItems = __spread([item], _this.
|
|
2405
|
+
_this.localItems = __spread([item], _this.localItems);
|
|
2398
2406
|
}
|
|
2399
2407
|
_this.items = __spread([item], _this.items);
|
|
2400
2408
|
}
|
|
@@ -2607,7 +2615,7 @@
|
|
|
2607
2615
|
return false;
|
|
2608
2616
|
}).map(function (item) {
|
|
2609
2617
|
var editorStatus = item.editorStatus, editorHandlerRow = item.editorHandlerRow, editorHandlerColumn = item.editorHandlerColumn, expandDetail = item.expandDetail, isExpanded = item.isExpanded, isExpanding = item.isExpanding, isSelected = item.isSelected, originItem = item.originItem, result = __rest(item, ["editorStatus", "editorHandlerRow", "editorHandlerColumn", "expandDetail", "isExpanded", "isExpanding", "isSelected", "originItem"]);
|
|
2610
|
-
return Object.assign(Object.assign({}, result), { editorErrorMessage:
|
|
2618
|
+
return Object.assign(Object.assign({}, result), { editorErrorMessage: item.editorErrorMessage });
|
|
2611
2619
|
});
|
|
2612
2620
|
},
|
|
2613
2621
|
enumerable: false,
|
|
@@ -2629,7 +2637,7 @@
|
|
|
2629
2637
|
SdGridMaterial.decorators = [
|
|
2630
2638
|
{ type: core.Component, args: [{
|
|
2631
2639
|
selector: 'sd-grid-material',
|
|
2632
|
-
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=\"sdEditorValidation\">\r\n <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 2px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n </th>\r\n <td class=\"p-0 position-relative\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-editor-validation [sdId]=\"item.sdId\" [item]=\"item\" [gridOption]=\"gridOption\">\r\n </sd-desktop-editor-validation>\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.editorStatus | sdEditorHandlerRow:item:gridOption as editorHandler\">\r\n <div *ngIf=\"editorHandler\" class=\"d-flex align-items-center justify-content-center\">\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 <button *ngIf=\"editorHandler.removable\" class=\"mx-2\" (click)=\"onRemove(item)\" aria-hidden=\"true\"\r\n mat-icon-button>\r\n <mat-icon class=\"c-icon\">delete</mat-icon>\r\n </button>\r\n <button *ngIf=\"editorHandler.savable\" class=\"mx-2\" (click)=\"onSave(item)\" aria-hidden=\"true\"\r\n mat-icon-button>\r\n <mat-icon class=\"c-icon\">save</mat-icon>\r\n </button>\r\n <button *ngIf=\"editorHandler.cancelable\" class=\"mx-2\" (click)=\"onCancel(item)\" aria-hidden=\"true\"\r\n mat-icon-button>\r\n <mat-icon class=\"c-icon\">close</mat-icon>\r\n </button>\r\n </div>\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 <sd-desktop-cell [sdId]=\"item.sdId\" [key]=\"key\" [value]=\"item[column.field]\" [column]=\"column\"\r\n [item]=\"item\" [idx]=\"i\" [cellDef]=\"cellDef\" [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 <sd-desktop-cell [sdId]=\"item.sdId\" [key]=\"key\" [value]=\"item[column.field]\" [column]=\"column\"\r\n [item]=\"item\" [idx]=\"i\" [cellDef]=\"cellDef\" [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\"\r\n [style]=\"row | sdStyleRowCss:gridOption\"></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=\"sdEditorValidation\">\r\n <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 4px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n </th>\r\n <td class=\"p-0\" mat-cell *matCellDef=\"let item\">\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\" 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>",
|
|
2640
|
+
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=\"sdEditorValidation\">\r\n <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 2px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n </th>\r\n <td class=\"p-0 position-relative\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-editor-validation [sdId]=\"item.sdId\" [item]=\"item\" [gridOption]=\"gridOption\">\r\n </sd-desktop-editor-validation>\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.editorStatus | sdEditorHandlerRow:item:gridOption as editorHandler\">\r\n <div *ngIf=\"editorHandler\" class=\"d-flex align-items-center justify-content-center\">\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 <button *ngIf=\"editorHandler.removable\" class=\"mx-2\" (click)=\"onRemove(item)\" aria-hidden=\"true\"\r\n mat-icon-button>\r\n <mat-icon class=\"c-icon\">delete</mat-icon>\r\n </button>\r\n <button *ngIf=\"editorHandler.savable\" class=\"mx-2\" (click)=\"onSave(item)\" aria-hidden=\"true\"\r\n mat-icon-button>\r\n <mat-icon class=\"c-icon\">save</mat-icon>\r\n </button>\r\n <button *ngIf=\"editorHandler.cancelable\" class=\"mx-2\" (click)=\"onCancel(item)\" aria-hidden=\"true\"\r\n mat-icon-button>\r\n <mat-icon class=\"c-icon\">close</mat-icon>\r\n </button>\r\n </div>\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 <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\" [value]=\"columnFilter[column.field]\"\r\n [columnFilter]=\"columnFilter\" [column]=\"columnFilter\" (filterChange)=\"onFilterChange()\">\r\n </sd-column-inline-filter>\r\n </div>\r\n </th>\r\n <td class=\"c-td px-8\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-cell [sdId]=\"item.sdId\" [key]=\"key\" [value]=\"item[column.field]\" [column]=\"column\"\r\n [item]=\"item\" [idx]=\"i\" [cellDef]=\"cellDef\" [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 <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\" [value]=\"columnFilter[column.field]\"\r\n [columnFilter]=\"columnFilter\" [column]=\"columnFilter\" (filterChange)=\"onFilterChange()\">\r\n </sd-column-inline-filter>\r\n </div>\r\n </th>\r\n <td class=\"c-td px-8\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-cell [sdId]=\"item.sdId\" [key]=\"key\" [value]=\"item[column.field]\" [column]=\"column\"\r\n [item]=\"item\" [idx]=\"i\" [cellDef]=\"cellDef\" [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\"\r\n [style]=\"row | sdStyleRowCss:gridOption\"></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=\"sdEditorValidation\">\r\n <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 4px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n </th>\r\n <td class=\"p-0\" mat-cell *matCellDef=\"let item\">\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\" 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 <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\"\r\n [value]=\"columnFilter[column.field]\" [columnFilter]=\"columnFilter\" [column]=\"columnFilter\"\r\n (filterChange)=\"onFilterChange()\"></sd-column-inline-filter>\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 <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\" [value]=\"columnFilter[column.field]\" [columnFilter]=\"columnFilter\"\r\n [column]=\"columnFilter\" (filterChange)=\"onFilterChange()\"></sd-column-inline-filter>\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<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>",
|
|
2633
2641
|
animations: [
|
|
2634
2642
|
animations.trigger('detailExpand', [
|
|
2635
2643
|
animations.state('collapsed', animations.style({ height: '0', minHeight: '0', visibility: 'hidden' })),
|
|
@@ -2637,7 +2645,7 @@
|
|
|
2637
2645
|
animations.transition('expanded <=> collapsed', animations.animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
|
|
2638
2646
|
]),
|
|
2639
2647
|
],
|
|
2640
|
-
styles: [":host{display:flex;flex-direction:column;height:100%;overflow:auto}:host .c-container{display:flex;flex:1;flex-direction:column;min-height:200px;position:relative}:host .c-container .c-table{flex:1;min-height:300px;overflow:auto;position:relative}:host .c-container .c-table table{border-collapse:separate;width:100%}:host .c-container .c-table table tr.c-first-header.mat-header-row,:host .c-container .c-table table tr.c-second-header.mat-header-row{height:40px}:host .c-container .c-table table tr.c-detail-row{height:0}:host .c-container .c-table table tr.c-row td{border-bottom-width:0}:host .c-container .c-table table tr.c-row.c-expandable{cursor:pointer}:host .c-container .c-table table tr.c-row.c-expandable:hover{background:#f5f5f5}:host .c-container .c-table table th.mat-header-cell{background-color:#f2f3f4;border-bottom:0!important}:host .c-container .c-table table td.mat-cell,:host .c-container .c-table table td.mat-footer-cell,:host .c-container .c-table table th.mat-header-cell{border-bottom-color:#f2f2f2!important}:host .c-container .c-table .c-th{color:#212121;font-size:14px;font-weight:500;line-height:20px;vertical-align:middle}:host .c-container .c-table .c-td:first{padding-left:10px}:host .c-container .c-loading{align-items:center;background:rgba(0,0,0,.15);bottom:56px;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:2}:host .c-container .c-paginator{align-items:center;background-color:#fff;display:flex;flex-direction:row;justify-content:space-between}:host .c-container .c-paginator .c-action{padding:5px}:host .c-container .c-empty{background-color:#fff;border:none!important;text-align:center}:host .c-container .c-empty mat-icon{font-size:150px;height:auto;margin-bottom:30px;margin-top:30px;opacity:.2;width:auto}:host mat-icon.c-icon{color:rgba(0,0,0,.54)!important}:host .lds-ring{display:inline-block;height:40px;position:relative;width:40px}:host .lds-ring div{-webkit-animation:lds-ring 1.2s cubic-bezier(.5,0,.5,1) infinite;animation:lds-ring 1.2s cubic-bezier(.5,0,.5,1) infinite;border:4px solid transparent;border-radius:50%;border-top-color:#cef;box-sizing:border-box;display:block;height:32px;margin:4px;position:absolute;width:32px}:host .lds-ring div:first-child{-webkit-animation-delay:-.45s;animation-delay:-.45s}:host .lds-ring div:nth-child(2){-webkit-animation-delay:-.3s;animation-delay:-.3s}:host .lds-ring div:nth-child(3){-webkit-animation-delay:-.15s;animation-delay:-.15s}:host .style1 .mat-table{border:1px solid #dde0e5}:host .style1 .mat-table tr.mat-header-row{background:#f2f3f4}:host .style1 .mat-table th.mat-header-cell{padding:10px 0}:host .style1 .c-paginator{border:1px solid #dde0e5;border-top:none!important}:host .style1 .mat-form-field-wrapper{background:#fff;padding:0}@-webkit-keyframes lds-ring{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes lds-ring{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}:host ::ng-deep .mat-sort-header-content{display:block;text-align:left;width:100%}:host ::ng-deep .mat-select-arrow{color:#a6a6a6}:host ::ng-deep .mat-sort-header-disabled{background-image:none!important;cursor:default!important;padding-right:12px!important}:host ::ng-deep .mat-sort-header-container{align-items:start!important}:host ::ng-deep .mat-sort-header-arrow{margin-top:4px!important}:host ::ng-deep .mat-sort-header{cursor:pointer}:host ::ng-deep .mat-sort-header[aria-sort]{background-position:center right 0;background-repeat:no-repeat;background-size:16px 16px;cursor:pointer;padding-right:24px}:host ::ng-deep .mat-sort-header[aria-sort=none]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath fill='%237A7A7A' d='M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z'/%3E%3C/svg%3E\")}:host ::ng-deep .mat-sort-header[aria-sort=ascending]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath fill='%237A7A7A' d='M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z'/%3E%3C/svg%3E\")}:host ::ng-deep .mat-sort-header[aria-sort=descending]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath fill='%237A7A7A' d='M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z'/%3E%3C/svg%3E\")}
|
|
2648
|
+
styles: [":host{display:flex;flex-direction:column;height:100%;overflow:auto}:host .c-container{display:flex;flex:1;flex-direction:column;min-height:200px;position:relative}:host .c-container .c-table{flex:1;min-height:300px;overflow:auto;position:relative}:host .c-container .c-table table{border-collapse:separate;width:100%}:host .c-container .c-table table tr.c-first-header.mat-header-row,:host .c-container .c-table table tr.c-second-header.mat-header-row{height:40px}:host .c-container .c-table table tr.c-detail-row{height:0}:host .c-container .c-table table tr.c-row td{border-bottom-width:0}:host .c-container .c-table table tr.c-row.c-expandable{cursor:pointer}:host .c-container .c-table table tr.c-row.c-expandable:hover{background:#f5f5f5}:host .c-container .c-table table th.mat-header-cell{background-color:#f2f3f4;border-bottom:0!important}:host .c-container .c-table table td.mat-cell,:host .c-container .c-table table td.mat-footer-cell,:host .c-container .c-table table th.mat-header-cell{border-bottom-color:#f2f2f2!important}:host .c-container .c-table .c-th{color:#212121;font-size:14px;font-weight:500;line-height:20px;vertical-align:middle}:host .c-container .c-table .c-td:first{padding-left:10px}:host .c-container .c-loading{align-items:center;background:rgba(0,0,0,.15);bottom:56px;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:2}:host .c-container .c-paginator{align-items:center;background-color:#fff;display:flex;flex-direction:row;justify-content:space-between}:host .c-container .c-paginator .c-action{padding:5px}:host .c-container .c-empty{background-color:#fff;border:none!important;text-align:center}:host .c-container .c-empty mat-icon{font-size:150px;height:auto;margin-bottom:30px;margin-top:30px;opacity:.2;width:auto}:host mat-icon.c-icon{color:rgba(0,0,0,.54)!important}:host .lds-ring{display:inline-block;height:40px;position:relative;width:40px}:host .lds-ring div{-webkit-animation:lds-ring 1.2s cubic-bezier(.5,0,.5,1) infinite;animation:lds-ring 1.2s cubic-bezier(.5,0,.5,1) infinite;border:4px solid transparent;border-radius:50%;border-top-color:#cef;box-sizing:border-box;display:block;height:32px;margin:4px;position:absolute;width:32px}:host .lds-ring div:first-child{-webkit-animation-delay:-.45s;animation-delay:-.45s}:host .lds-ring div:nth-child(2){-webkit-animation-delay:-.3s;animation-delay:-.3s}:host .lds-ring div:nth-child(3){-webkit-animation-delay:-.15s;animation-delay:-.15s}:host .style1 .mat-table{border:1px solid #dde0e5}:host .style1 .mat-table tr.mat-header-row{background:#f2f3f4}:host .style1 .mat-table th.mat-header-cell{padding:10px 0}:host .style1 .c-paginator{border:1px solid #dde0e5;border-top:none!important}:host .style1 .mat-form-field-wrapper{background:#fff;padding:0}@-webkit-keyframes lds-ring{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes lds-ring{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}:host ::ng-deep .mat-sort-header-content{display:block;text-align:left;width:100%}:host ::ng-deep .mat-select-arrow{color:#a6a6a6}:host ::ng-deep .mat-sort-header-disabled{background-image:none!important;cursor:default!important;padding-right:12px!important}:host ::ng-deep .mat-sort-header-container{align-items:start!important}:host ::ng-deep .mat-sort-header-arrow{margin-top:4px!important}:host ::ng-deep .mat-sort-header{cursor:pointer}:host ::ng-deep .mat-sort-header[aria-sort]{background-position:center right 0;background-repeat:no-repeat;background-size:16px 16px;cursor:pointer;padding-right:24px}:host ::ng-deep .mat-sort-header[aria-sort=none]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath fill='%237A7A7A' d='M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z'/%3E%3C/svg%3E\")}:host ::ng-deep .mat-sort-header[aria-sort=ascending]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath fill='%237A7A7A' d='M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z'/%3E%3C/svg%3E\")}:host ::ng-deep .mat-sort-header[aria-sort=descending]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath fill='%237A7A7A' d='M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z'/%3E%3C/svg%3E\")}"]
|
|
2641
2649
|
},] }
|
|
2642
2650
|
];
|
|
2643
2651
|
SdGridMaterial.ctorParameters = function () { return [
|
|
@@ -2912,9 +2920,9 @@
|
|
|
2912
2920
|
SdDesktopCellView.decorators = [
|
|
2913
2921
|
{ type: core.Component, args: [{
|
|
2914
2922
|
selector: 'sd-desktop-cell-view',
|
|
2915
|
-
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
|
|
2923
|
+
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 *sdLet=\"item[column.field] | columnTooltip:item:column as tooltip\">\r\n <ng-container *sdLet=\"item[column.field] | columnTransform:item:column:key | async as val\">\r\n <ng-container\r\n *ngIf=\"column.type === 'string' || column.type === 'number' || column.type === 'bool' || column.type === 'values'\">\r\n <ng-container *ngIf=\"!!badge\">\r\n <div *ngIf=\"!column.badgeType\" class=\"c-badge\" matTooltipPosition=\"above\" [matTooltip]=\"tooltip\"\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\" (click)=\"column.click(item[column.field], item)\">{{val}}</span>\r\n <ng-container *ngIf=\"!column.click\">{{val}}\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"column.badgeType === 'circle'\" class=\"c-badge-circle d-flex align-items-center\"\r\n [matTooltip]=\"tooltip\"\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 <span *ngIf=\"column.click\" class=\"pointer\" (click)=\"column.click(item[column.field], item)\">{{val}}</span>\r\n <ng-container *ngIf=\"!column.click\">{{val}}\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"!badge\">\r\n <div class=\"text-break\" [matTooltip]=\"tooltip\">\r\n <a *ngIf=\"column.click\" href=\"javascript:;\" (click)=\"column.click(item[column.field], item)\">{{val}}</a>\r\n <ng-container *ngIf=\"!column.click\">{{val}}\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <div *ngIf=\"column.type === 'date'\" matTooltipPosition=\"above\"\r\n [matTooltip]=\"item[column.field] | date:'dd/MM/yyyy'\">\r\n {{val | 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 {{val | sdTimeDifferent:'dd/MM/yyyy HH:mm':column.option?.timeDifferent | async}}\r\n </div>\r\n <div *ngIf=\"column.type === 'time'\">\r\n {{val | date:'HH:mm'}}\r\n </div>\r\n <div *ngIf=\"column.type === 'image'\" class=\"align-middle text-center\">\r\n <img *ngIf=\"val\" [src]=\"val\" [width]=\"column.option?.width\" [height]=\"column.option?.height\"\r\n style=\"margin: 5px 0;object-fit: contain;\" (click)=\"column.click && column.click(item[column.field], item)\"\r\n [ngClass]=\"{'pointer':column.click}\">\r\n <mat-icon *ngIf=\"!val\" 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 </ng-container>\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>",
|
|
2916
2924
|
changeDetection: core.ChangeDetectionStrategy.OnPush,
|
|
2917
|
-
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}.
|
|
2925
|
+
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;overflow-wrap:break-word;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}.c-badge-circle{min-width:150px}.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}"]
|
|
2918
2926
|
},] }
|
|
2919
2927
|
];
|
|
2920
2928
|
SdDesktopCellView.ctorParameters = function () { return []; };
|
|
@@ -2926,21 +2934,35 @@
|
|
|
2926
2934
|
};
|
|
2927
2935
|
|
|
2928
2936
|
var SdColumnTransformPipe = /** @class */ (function () {
|
|
2929
|
-
function SdColumnTransformPipe(
|
|
2930
|
-
this.
|
|
2937
|
+
function SdColumnTransformPipe(gridService) {
|
|
2938
|
+
this.gridService = gridService;
|
|
2931
2939
|
}
|
|
2932
|
-
SdColumnTransformPipe.prototype.transform = function (value, rowData, column) {
|
|
2933
|
-
var _a, _b;
|
|
2934
|
-
|
|
2935
|
-
|
|
2936
|
-
|
|
2937
|
-
|
|
2938
|
-
|
|
2939
|
-
|
|
2940
|
-
|
|
2941
|
-
|
|
2942
|
-
|
|
2943
|
-
|
|
2940
|
+
SdColumnTransformPipe.prototype.transform = function (value, rowData, column, key) {
|
|
2941
|
+
var _a, _b, _c;
|
|
2942
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
2943
|
+
var data;
|
|
2944
|
+
return __generator(this, function (_d) {
|
|
2945
|
+
switch (_d.label) {
|
|
2946
|
+
case 0:
|
|
2947
|
+
if (column === null || column === void 0 ? void 0 : column.transform) {
|
|
2948
|
+
return [2 /*return*/, column.transform(value, rowData)];
|
|
2949
|
+
}
|
|
2950
|
+
if (!(column.type === 'values')) return [3 /*break*/, 2];
|
|
2951
|
+
return [4 /*yield*/, this.gridService.loadValues(column, key)];
|
|
2952
|
+
case 1:
|
|
2953
|
+
data = _d.sent();
|
|
2954
|
+
return [2 /*return*/, (_a = data.obj[value]) !== null && _a !== void 0 ? _a : value];
|
|
2955
|
+
case 2:
|
|
2956
|
+
if (column.type === 'number' && Number.isNumber(value)) {
|
|
2957
|
+
return [2 /*return*/, Number.toVNCurrency(value)]; // this.decimalPipe.transform(value, '1.0-2');
|
|
2958
|
+
}
|
|
2959
|
+
if (column.type === 'bool') {
|
|
2960
|
+
return [2 /*return*/, value === true ? (((_b = column.option) === null || _b === void 0 ? void 0 : _b.displayOnTrue) || 'True') : (((_c = column.option) === null || _c === void 0 ? void 0 : _c.displayOnFalse) || 'False')];
|
|
2961
|
+
}
|
|
2962
|
+
return [2 /*return*/, value];
|
|
2963
|
+
}
|
|
2964
|
+
});
|
|
2965
|
+
});
|
|
2944
2966
|
};
|
|
2945
2967
|
return SdColumnTransformPipe;
|
|
2946
2968
|
}());
|
|
@@ -2950,7 +2972,7 @@
|
|
|
2950
2972
|
},] }
|
|
2951
2973
|
];
|
|
2952
2974
|
SdColumnTransformPipe.ctorParameters = function () { return [
|
|
2953
|
-
{ type:
|
|
2975
|
+
{ type: SdGridService }
|
|
2954
2976
|
]; };
|
|
2955
2977
|
|
|
2956
2978
|
var SdFilterExternalPipe = /** @class */ (function () {
|
|
@@ -3049,7 +3071,7 @@
|
|
|
3049
3071
|
SdDesktopCellChildrenView.decorators = [
|
|
3050
3072
|
{ type: core.Component, args: [{
|
|
3051
3073
|
selector: 'sd-desktop-cell-children-view',
|
|
3052
|
-
template: "<ng-container *ngIf=\"column.children?.length\">\r\n <div class=\"row mx-0\">\r\n <div *ngFor=\"let childColumn of column.children | columnChildrenFilter:item\" class=\"px-2\"\r\n [ngClass]=\"{'col-6': childColumn?.colSpan === 1, 'col-12': !childColumn?.colSpan || childColumn?.colSpan === 2}\">\r\n <span class=\"c-title\">\r\n {{item | columnTitle:childColumn | async}}:\r\n </span>\r\n <ng-container *ngIf=\"childColumn.htmlTemplate;else useDefaultView\">\r\n <div (click)=\"childColumn.click && childColumn.click(item[childColumn.field], item)\"\r\n style=\"display:inline-block ;overflow-wrap: break-word;\" [ngClass]=\"{'cursor-pointer':childColumn.click}\"\r\n [innerHTML]=\"(item[childColumn.field] | columnHtmlTemplate:item:childColumn) | safeHtml\">\r\n </div>\r\n </ng-container>\r\n <ng-template #useDefaultView>\r\n <span *ngIf=\"childColumn.type === 'string'\">\r\n <a *ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] |\r\n columnTransform:item:childColumn}}</a>\r\n <ng-container *ngIf=\"!childColumn.click\">\r\n {{item[childColumn.field] | columnTransform:item:childColumn}}</ng-container>\r\n </span>\r\n <span *ngIf=\"childColumn.type === 'number'\">\r\n <a *ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] |\r\n columnTransform:item:childColumn}}</a>\r\n <ng-container *ngIf=\"!childColumn.click\">\r\n {{item[childColumn.field] | columnTransform:item:childColumn}}\r\n </ng-container>\r\n </span>\r\n <span *ngIf=\"childColumn.type === 'datetime'\">\r\n <a *ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] |\r\n sdTimeDifferent:'dd/MM/yyyy HH:mm':childColumn.option?.timeDifferent | async}}</a>\r\n <ng-container *ngIf=\"!childColumn.click\">\r\n <span matTooltipPosition=\"above\"\r\n [matTooltip]=\"item[childColumn.field] | date:'dd/MM/yyyy HH:mm'\">{{item[childColumn.field] |\r\n sdTimeDifferent:'dd/MM/yyyy HH:mm':childColumn.option?.timeDifferent | async}}</span>\r\n </ng-container>\r\n </span>\r\n <span *ngIf=\"childColumn.type === 'date'\">\r\n <a *ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] |\r\n sdTimeDifferent:'dd/MM/yyyy':childColumn.option?.timeDifferent | async}}</a>\r\n <ng-container *ngIf=\"!childColumn.click\">\r\n <span matTooltipPosition=\"above\"\r\n [matTooltip]=\"item[childColumn.field] | date:'dd/MM/yyyy'\">{{item[childColumn.field] |\r\n sdTimeDifferent:'dd/MM/yyyy':childColumn.option?.timeDifferent | async}}</span>\r\n </ng-container>\r\n </span>\r\n <span *ngIf=\"childColumn.type === 'time'\">\r\n <a *ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] | date:'HH:mm'}}</a>\r\n <ng-container *ngIf=\"!childColumn.click\">\r\n {{item[childColumn.field] | date:'HH:mm'}}\r\n </ng-container>\r\n </span>\r\n <span *ngIf=\"childColumn.type === 'bool'\"\r\n (click)=\"childColumn.click && childColumn.click(item[childColumn.field], item)\">\r\n <strong *ngIf=\"item[childColumn.field]\" class=\"text-success\">{{childColumn.option?.displayOnTrue ||\r\n 'True'}}</strong>\r\n <strong *ngIf=\"!item[childColumn.field]\" class=\"text-danger\">{{childColumn.option?.displayOnFalse ||\r\n 'False'}}</strong>\r\n </span>\r\n <ng-container *ngIf=\"childColumn.type === 'values'\">\r\n <ng-container *ngIf=\"childColumn.transform\">{{item[childColumn.field] | columnTransform:item:childColumn}}</ng-container>\r\n <ng-container *ngIf=\"!childColumn.transform\">\r\n <ng-container *ngIf=\"item[childColumn.field] | columnValues:childColumn:key | async; $implicit as valueData\">\r\n <div\r\n *ngIf=\"valueData[childColumn.option?.colorField] || valueData[childColumn.option?.backgroundColorField]; else elseNoStatus\"\r\n [ngStyle]=\"{'color':valueData[childColumn.option?.colorField], 'background-color': valueData[childColumn.option?.backgroundColorField]}\">\r\n {{valueData[childColumn.option?.displayField]}}\r\n </div>\r\n <ng-template #elseNoStatus>\r\n {{valueData[childColumn.option?.displayField]}}\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n \r\n </ng-container>\r\n <img *ngIf=\"childColumn.type === 'image'\" [src]=\"item[childColumn.field] | columnTransform:item:childColumn\" [width]=\"childColumn.display?.width\"\r\n [height]=\"childColumn.display?.height\" style=\"margin: 5px 0\"\r\n (click)=\"childColumn.click && childColumn.click(item[childColumn.field], item)\">\r\n </ng-template>\r\n </div>\r\n </div>\r\n</ng-container>",
|
|
3074
|
+
template: "<ng-container *ngIf=\"column.children?.length\">\r\n <div class=\"row mx-0\">\r\n <div *ngFor=\"let childColumn of column.children | columnChildrenFilter:item\" class=\"px-2\"\r\n [ngClass]=\"{'col-6': childColumn?.colSpan === 1, 'col-12': !childColumn?.colSpan || childColumn?.colSpan === 2}\">\r\n <span class=\"c-title\">\r\n {{item | columnTitle:childColumn | async}}:\r\n </span>\r\n <ng-container *ngIf=\"childColumn.htmlTemplate;else useDefaultView\">\r\n <div (click)=\"childColumn.click && childColumn.click(item[childColumn.field], item)\"\r\n style=\"display:inline-block ;overflow-wrap: break-word;\" [ngClass]=\"{'cursor-pointer':childColumn.click}\"\r\n [innerHTML]=\"(item[childColumn.field] | columnHtmlTemplate:item:childColumn) | safeHtml\">\r\n </div>\r\n </ng-container>\r\n <ng-template #useDefaultView>\r\n <span *ngIf=\"childColumn.type === 'string'\">\r\n <a *ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] |\r\n columnTransform:item:childColumn | async}}</a>\r\n <ng-container *ngIf=\"!childColumn.click\">\r\n {{item[childColumn.field] | columnTransform:item:childColumn | async}}</ng-container>\r\n </span>\r\n <span *ngIf=\"childColumn.type === 'number'\">\r\n <a *ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] |\r\n columnTransform:item:childColumn | async}}</a>\r\n <ng-container *ngIf=\"!childColumn.click\">\r\n {{item[childColumn.field] | columnTransform:item:childColumn | async}}\r\n </ng-container>\r\n </span>\r\n <span *ngIf=\"childColumn.type === 'datetime'\">\r\n <a *ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] |\r\n sdTimeDifferent:'dd/MM/yyyy HH:mm':childColumn.option?.timeDifferent | async}}</a>\r\n <ng-container *ngIf=\"!childColumn.click\">\r\n <span matTooltipPosition=\"above\"\r\n [matTooltip]=\"item[childColumn.field] | date:'dd/MM/yyyy HH:mm'\">{{item[childColumn.field] |\r\n sdTimeDifferent:'dd/MM/yyyy HH:mm':childColumn.option?.timeDifferent | async}}</span>\r\n </ng-container>\r\n </span>\r\n <span *ngIf=\"childColumn.type === 'date'\">\r\n <a *ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] |\r\n sdTimeDifferent:'dd/MM/yyyy':childColumn.option?.timeDifferent | async}}</a>\r\n <ng-container *ngIf=\"!childColumn.click\">\r\n <span matTooltipPosition=\"above\"\r\n [matTooltip]=\"item[childColumn.field] | date:'dd/MM/yyyy'\">{{item[childColumn.field] |\r\n sdTimeDifferent:'dd/MM/yyyy':childColumn.option?.timeDifferent | async}}</span>\r\n </ng-container>\r\n </span>\r\n <span *ngIf=\"childColumn.type === 'time'\">\r\n <a *ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] | date:'HH:mm'}}</a>\r\n <ng-container *ngIf=\"!childColumn.click\">\r\n {{item[childColumn.field] | date:'HH:mm'}}\r\n </ng-container>\r\n </span>\r\n <span *ngIf=\"childColumn.type === 'bool'\"\r\n (click)=\"childColumn.click && childColumn.click(item[childColumn.field], item)\">\r\n <strong *ngIf=\"item[childColumn.field]\" class=\"text-success\">{{childColumn.option?.displayOnTrue ||\r\n 'True'}}</strong>\r\n <strong *ngIf=\"!item[childColumn.field]\" class=\"text-danger\">{{childColumn.option?.displayOnFalse ||\r\n 'False'}}</strong>\r\n </span>\r\n <ng-container *ngIf=\"childColumn.type === 'values'\">\r\n <ng-container *ngIf=\"childColumn.transform\">{{item[childColumn.field] | columnTransform:item:childColumn | async}}</ng-container>\r\n <ng-container *ngIf=\"!childColumn.transform\">\r\n <ng-container *ngIf=\"item[childColumn.field] | columnValues:childColumn:key | async; $implicit as valueData\">\r\n <div\r\n *ngIf=\"valueData[childColumn.option?.colorField] || valueData[childColumn.option?.backgroundColorField]; else elseNoStatus\"\r\n [ngStyle]=\"{'color':valueData[childColumn.option?.colorField], 'background-color': valueData[childColumn.option?.backgroundColorField]}\">\r\n {{valueData[childColumn.option?.displayField]}}\r\n </div>\r\n <ng-template #elseNoStatus>\r\n {{valueData[childColumn.option?.displayField]}}\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n \r\n </ng-container>\r\n <img *ngIf=\"childColumn.type === 'image'\" [src]=\"item[childColumn.field] | columnTransform:item:childColumn | async\" [width]=\"childColumn.display?.width\"\r\n [height]=\"childColumn.display?.height\" style=\"margin: 5px 0\"\r\n (click)=\"childColumn.click && childColumn.click(item[childColumn.field], item)\">\r\n </ng-template>\r\n </div>\r\n </div>\r\n</ng-container>",
|
|
3053
3075
|
styles: [".c-title{color:#212529;font-size:13px;font-weight:700;line-height:1.7;margin-right:3px}.c-children{color:#212529;font-size:14px;overflow-wrap:break-word}"]
|
|
3054
3076
|
},] }
|
|
3055
3077
|
];
|
|
@@ -3146,7 +3168,10 @@
|
|
|
3146
3168
|
if (column.type === 'string' && (column === null || column === void 0 ? void 0 : column.badge)) {
|
|
3147
3169
|
return column.badge(value, rowData);
|
|
3148
3170
|
}
|
|
3149
|
-
if (column.type === 'bool'
|
|
3171
|
+
if (column.type === 'bool') {
|
|
3172
|
+
return !!value ? 'success' : 'danger';
|
|
3173
|
+
}
|
|
3174
|
+
if (column.type === 'values' && (column === null || column === void 0 ? void 0 : column.badge)) {
|
|
3150
3175
|
return column.badge(value, rowData);
|
|
3151
3176
|
}
|
|
3152
3177
|
return null;
|
|
@@ -3692,7 +3717,7 @@
|
|
|
3692
3717
|
selector: 'sd-desktop-cell-editor',
|
|
3693
3718
|
template: "<sd-input *ngIf=\"column.type === 'string'\" size=\"sm\" type=\"text\" [(model)]=\"item[column.field]\" (sdChange)=\"onChange()\" disableErrorMessage>\r\n</sd-input>\r\n<sd-input *ngIf=\"column.type === 'number'\" size=\"sm\" type=\"number\" [(model)]=\"item[column.field]\"\r\n (sdChange)=\"onChange()\" disableErrorMessage>\r\n</sd-input>\r\n<sd-select *ngIf=\"column.type === 'bool'\" size=\"sm\" [items]=\"[\r\n { value: true, display: column.option?.displayOnTrue || 'True' },\r\n { value: false, display: column.option?.displayOnFalse || 'False' }\r\n ]\" valueField=\"value\" displayField=\"display\" [(model)]=\"item[column.field]\" (sdChange)=\"onChange()\" disableErrorMessage>\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()\" [multiple]=\"\r\n column?.option?.selection === 'MULTIPLE' ||\r\n column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\r\n \" [filtered]=\"column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\" disableErrorMessage>\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()\" disableErrorMessage>\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()\" disableErrorMessage>\r\n</sd-date-time>",
|
|
3694
3719
|
changeDetection: core.ChangeDetectionStrategy.OnPush,
|
|
3695
|
-
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}.
|
|
3720
|
+
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}.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}"]
|
|
3696
3721
|
},] }
|
|
3697
3722
|
];
|
|
3698
3723
|
SdDesktopCellEditor.ctorParameters = function () { return []; };
|
|
@@ -3742,16 +3767,10 @@
|
|
|
3742
3767
|
},] }
|
|
3743
3768
|
];
|
|
3744
3769
|
|
|
3770
|
+
var _visible;
|
|
3745
3771
|
var SdEditorHandlerColumnPipe = /** @class */ (function () {
|
|
3746
3772
|
function SdEditorHandlerColumnPipe() {
|
|
3747
|
-
|
|
3748
|
-
SdEditorHandlerColumnPipe.prototype.transform = function (value, item, column, gridOption) {
|
|
3749
|
-
var e_1, _c;
|
|
3750
|
-
if (column.type === 'children' || column.type === 'children-col') {
|
|
3751
|
-
return;
|
|
3752
|
-
}
|
|
3753
|
-
var columns = gridOption.columns;
|
|
3754
|
-
var visible = function (col) {
|
|
3773
|
+
_visible.set(this, function (col, item) {
|
|
3755
3774
|
if (col.type === 'children' || col.type === 'children-col') {
|
|
3756
3775
|
return false;
|
|
3757
3776
|
}
|
|
@@ -3763,13 +3782,21 @@
|
|
|
3763
3782
|
}
|
|
3764
3783
|
}
|
|
3765
3784
|
return true;
|
|
3766
|
-
};
|
|
3785
|
+
});
|
|
3786
|
+
}
|
|
3787
|
+
SdEditorHandlerColumnPipe.prototype.transform = function (value, item, column, gridOption) {
|
|
3788
|
+
var e_1, _c;
|
|
3789
|
+
console.log(value, column.field);
|
|
3790
|
+
if (column.type === 'children' || column.type === 'children-col') {
|
|
3791
|
+
return;
|
|
3792
|
+
}
|
|
3793
|
+
var columns = gridOption.columns;
|
|
3767
3794
|
item.editorHandlerColumn = item.editorHandlerColumn || {};
|
|
3768
|
-
item.editorHandlerColumn[column.field] = Object.assign(Object.assign({}, item.editorHandlerColumn[column.field]), { visible:
|
|
3795
|
+
item.editorHandlerColumn[column.field] = Object.assign(Object.assign({}, item.editorHandlerColumn[column.field]), { visible: __classPrivateFieldGet(this, _visible).call(this, column, item) });
|
|
3769
3796
|
try {
|
|
3770
3797
|
for (var _d = __values(columns.filter(function (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); })), _e = _d.next(); !_e.done; _e = _d.next()) {
|
|
3771
3798
|
var col = _e.value;
|
|
3772
|
-
item.editorHandlerColumn[col.field] = Object.assign(Object.assign({}, item.editorHandlerColumn[col.field]), { visible:
|
|
3799
|
+
item.editorHandlerColumn[col.field] = Object.assign(Object.assign({}, item.editorHandlerColumn[col.field]), { visible: __classPrivateFieldGet(this, _visible).call(this, col, item) });
|
|
3773
3800
|
}
|
|
3774
3801
|
}
|
|
3775
3802
|
catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
|
@@ -3784,15 +3811,18 @@
|
|
|
3784
3811
|
};
|
|
3785
3812
|
return SdEditorHandlerColumnPipe;
|
|
3786
3813
|
}());
|
|
3814
|
+
_visible = new WeakMap();
|
|
3787
3815
|
SdEditorHandlerColumnPipe.decorators = [
|
|
3788
3816
|
{ type: core.Pipe, args: [{
|
|
3789
3817
|
name: 'sdEditorHandlerColumn'
|
|
3790
3818
|
},] }
|
|
3791
3819
|
];
|
|
3792
3820
|
|
|
3821
|
+
var _previous, _delay;
|
|
3793
3822
|
var SdEditorValidatePipe = /** @class */ (function () {
|
|
3794
3823
|
function SdEditorValidatePipe() {
|
|
3795
|
-
this
|
|
3824
|
+
_previous.set(this, void 0);
|
|
3825
|
+
_delay.set(this, 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
|
|
3796
3826
|
}
|
|
3797
3827
|
SdEditorValidatePipe.prototype.transform = function (sdId, item, gridOption) {
|
|
3798
3828
|
return __awaiter(this, void 0, void 0, function () {
|
|
@@ -3802,29 +3832,28 @@
|
|
|
3802
3832
|
switch (_b.label) {
|
|
3803
3833
|
case 0:
|
|
3804
3834
|
editor = gridOption.editor;
|
|
3805
|
-
item.editorHandlerRow = item.editorHandlerRow || {};
|
|
3806
3835
|
if (!editor.validate) {
|
|
3807
|
-
item.
|
|
3836
|
+
item.editorErrorMessage = null;
|
|
3808
3837
|
return [2 /*return*/];
|
|
3809
3838
|
}
|
|
3810
|
-
this
|
|
3811
|
-
return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, _this
|
|
3839
|
+
__classPrivateFieldSet(this, _previous, new Date());
|
|
3840
|
+
return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, __classPrivateFieldGet(_this, _delay)); })];
|
|
3812
3841
|
case 1:
|
|
3813
3842
|
_b.sent();
|
|
3814
3843
|
now = new Date();
|
|
3815
|
-
dif = now.getTime() - this.
|
|
3816
|
-
if (dif < this
|
|
3844
|
+
dif = now.getTime() - __classPrivateFieldGet(this, _previous).getTime();
|
|
3845
|
+
if (dif < __classPrivateFieldGet(this, _delay)) {
|
|
3817
3846
|
return [2 /*return*/];
|
|
3818
3847
|
}
|
|
3819
3848
|
result = editor.validate(item);
|
|
3820
3849
|
if (!(result instanceof Promise)) return [3 /*break*/, 3];
|
|
3821
|
-
_a = item
|
|
3850
|
+
_a = item;
|
|
3822
3851
|
return [4 /*yield*/, result];
|
|
3823
3852
|
case 2:
|
|
3824
|
-
_a.
|
|
3853
|
+
_a.editorErrorMessage = _b.sent();
|
|
3825
3854
|
return [2 /*return*/];
|
|
3826
3855
|
case 3:
|
|
3827
|
-
item.
|
|
3856
|
+
item.editorErrorMessage = result;
|
|
3828
3857
|
return [2 /*return*/];
|
|
3829
3858
|
}
|
|
3830
3859
|
});
|
|
@@ -3832,6 +3861,7 @@
|
|
|
3832
3861
|
};
|
|
3833
3862
|
return SdEditorValidatePipe;
|
|
3834
3863
|
}());
|
|
3864
|
+
_previous = new WeakMap(), _delay = new WeakMap();
|
|
3835
3865
|
SdEditorValidatePipe.decorators = [
|
|
3836
3866
|
{ type: core.Pipe, args: [{
|
|
3837
3867
|
name: 'sdEditorValidate'
|
|
@@ -3861,7 +3891,7 @@
|
|
|
3861
3891
|
SdDesktopEditorValidation.decorators = [
|
|
3862
3892
|
{ type: core.Component, args: [{
|
|
3863
3893
|
selector: 'sd-desktop-editor-validation',
|
|
3864
|
-
template: "<ng-container *sdLet=\"item.sdId | sdEditorValidate:item:gridOption\">\r\n <div class=\"c-editor-validation\" [class.c-danger]=\"!!item.
|
|
3894
|
+
template: "<ng-container *sdLet=\"item.sdId | sdEditorValidate:item:gridOption | async\">\r\n <div class=\"c-editor-validation\" [class.c-danger]=\"!!item.editorErrorMessage\" matTooltipPosition=\"after\"\r\n [matTooltip]=\"item.editorErrorMessage\">\r\n </div>\r\n</ng-container>",
|
|
3865
3895
|
changeDetection: core.ChangeDetectionStrategy.OnPush,
|
|
3866
3896
|
styles: [":host{height:100%;left:0;position:absolute;top:0}:host .c-editor-validation{height:100%;max-width:4px;min-width:4px;width:4px}:host .c-danger{background-color:#f82c13}"]
|
|
3867
3897
|
},] }
|
|
@@ -3873,6 +3903,41 @@
|
|
|
3873
3903
|
gridOption: [{ type: core.Input }]
|
|
3874
3904
|
};
|
|
3875
3905
|
|
|
3906
|
+
var SdColumnInlineFilter = /** @class */ (function () {
|
|
3907
|
+
function SdColumnInlineFilter() {
|
|
3908
|
+
var _this = this;
|
|
3909
|
+
this.columnFilter = {};
|
|
3910
|
+
this.filterChange = new core.EventEmitter();
|
|
3911
|
+
this.onFilterChange = function () {
|
|
3912
|
+
_this.filterChange.emit();
|
|
3913
|
+
};
|
|
3914
|
+
}
|
|
3915
|
+
SdColumnInlineFilter.prototype.ngOnInit = function () {
|
|
3916
|
+
if (['date', 'datetime', 'time'].includes(this.column.type)) {
|
|
3917
|
+
this.columnFilter[this.column.field] = this.columnFilter[this.column.field] || {
|
|
3918
|
+
from: null,
|
|
3919
|
+
to: null
|
|
3920
|
+
};
|
|
3921
|
+
}
|
|
3922
|
+
};
|
|
3923
|
+
return SdColumnInlineFilter;
|
|
3924
|
+
}());
|
|
3925
|
+
SdColumnInlineFilter.decorators = [
|
|
3926
|
+
{ type: core.Component, args: [{
|
|
3927
|
+
selector: 'sd-column-inline-filter',
|
|
3928
|
+
template: "<div class=\"c-inline-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 <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-range *ngIf=\"\r\n column.type === 'date' ||\r\n column.type === 'datetime' ||\r\n column.type === 'time'\r\n \" size=\"sm\" [(from)]=\"columnFilter[column.field].from\" [(to)]=\"columnFilter[column.field].to\"\r\n (sdChange)=\"onFilterChange()\" [disabled]=\"column.filter?.disabled\">\r\n </sd-date-range>\r\n </ng-container>\r\n <ng-template #noFilter>\r\n <sd-input type=\"text\" size=\"sm\" disabled> </sd-input>\r\n </ng-template>\r\n</div>",
|
|
3929
|
+
changeDetection: core.ChangeDetectionStrategy.OnPush,
|
|
3930
|
+
styles: [":host ::ng-deep .c-inline-column .mat-form-field-wrapper{background-color:#fff;border-radius:8px;margin:8px 0 0!important;padding:0!important}"]
|
|
3931
|
+
},] }
|
|
3932
|
+
];
|
|
3933
|
+
SdColumnInlineFilter.ctorParameters = function () { return []; };
|
|
3934
|
+
SdColumnInlineFilter.propDecorators = {
|
|
3935
|
+
value: [{ type: core.Input }],
|
|
3936
|
+
columnFilter: [{ type: core.Input }],
|
|
3937
|
+
column: [{ type: core.Input }],
|
|
3938
|
+
filterChange: [{ type: core.Output }]
|
|
3939
|
+
};
|
|
3940
|
+
|
|
3876
3941
|
var MatPaginatorIntlCro = /** @class */ (function (_super) {
|
|
3877
3942
|
__extends(MatPaginatorIntlCro, _super);
|
|
3878
3943
|
function MatPaginatorIntlCro() {
|
|
@@ -3938,6 +4003,7 @@
|
|
|
3938
4003
|
SdDesktopCellView,
|
|
3939
4004
|
SdDesktopCellChildrenView,
|
|
3940
4005
|
SdDesktopCommand,
|
|
4006
|
+
SdColumnInlineFilter,
|
|
3941
4007
|
SdGridMaterial,
|
|
3942
4008
|
SdLetDirective,
|
|
3943
4009
|
SdMaterialFooterDefDirective,
|
|
@@ -4013,20 +4079,21 @@
|
|
|
4013
4079
|
exports.SdMaterialSubInformationDefDirective = SdMaterialSubInformationDefDirective;
|
|
4014
4080
|
exports.ɵa = MatPaginatorIntlCro;
|
|
4015
4081
|
exports.ɵb = SdGridFilter;
|
|
4016
|
-
exports.ɵba =
|
|
4017
|
-
exports.ɵbb =
|
|
4018
|
-
exports.ɵbc =
|
|
4019
|
-
exports.ɵbd =
|
|
4020
|
-
exports.ɵbe =
|
|
4021
|
-
exports.ɵbf =
|
|
4022
|
-
exports.ɵbg =
|
|
4023
|
-
exports.ɵbh =
|
|
4024
|
-
exports.ɵbi =
|
|
4025
|
-
exports.ɵbj =
|
|
4026
|
-
exports.ɵbk =
|
|
4027
|
-
exports.ɵbl =
|
|
4028
|
-
exports.ɵbm =
|
|
4029
|
-
exports.ɵbn =
|
|
4082
|
+
exports.ɵba = SdCommandTitlePipe;
|
|
4083
|
+
exports.ɵbb = SdColumnValuesPipe;
|
|
4084
|
+
exports.ɵbc = SdColumnHtmlTemplatePipe;
|
|
4085
|
+
exports.ɵbd = SdColumnTransformPipe;
|
|
4086
|
+
exports.ɵbe = SdColumnTooltipPipe;
|
|
4087
|
+
exports.ɵbf = SdColumnBadgePipe;
|
|
4088
|
+
exports.ɵbg = SdFilterColumnPipe;
|
|
4089
|
+
exports.ɵbh = SdFilterExternalPipe;
|
|
4090
|
+
exports.ɵbi = SdSelectionActionFilterPipe;
|
|
4091
|
+
exports.ɵbj = SdSelectionDisablePipe;
|
|
4092
|
+
exports.ɵbk = SdSelectionDisableSelectAllPipe;
|
|
4093
|
+
exports.ɵbl = SdEditorHandlerRowPipe;
|
|
4094
|
+
exports.ɵbm = SdEditorHandlerColumnPipe;
|
|
4095
|
+
exports.ɵbn = SdEditorValidatePipe;
|
|
4096
|
+
exports.ɵbo = SdStyleRowCss;
|
|
4030
4097
|
exports.ɵc = SdPopupFilter;
|
|
4031
4098
|
exports.ɵd = SdGridFilterService;
|
|
4032
4099
|
exports.ɵe = SdPopupExport;
|
|
@@ -4039,17 +4106,17 @@
|
|
|
4039
4106
|
exports.ɵm = SdDesktopCellView;
|
|
4040
4107
|
exports.ɵn = SdDesktopCellChildrenView;
|
|
4041
4108
|
exports.ɵo = SdDesktopCommand;
|
|
4042
|
-
exports.ɵp =
|
|
4043
|
-
exports.ɵq =
|
|
4044
|
-
exports.ɵr =
|
|
4045
|
-
exports.ɵs =
|
|
4046
|
-
exports.ɵt =
|
|
4047
|
-
exports.ɵu =
|
|
4048
|
-
exports.ɵv =
|
|
4049
|
-
exports.ɵw =
|
|
4050
|
-
exports.ɵx =
|
|
4051
|
-
exports.ɵy =
|
|
4052
|
-
exports.ɵz =
|
|
4109
|
+
exports.ɵp = SdColumnInlineFilter;
|
|
4110
|
+
exports.ɵq = SdLetDirective;
|
|
4111
|
+
exports.ɵr = SdPopupGridConfiguration;
|
|
4112
|
+
exports.ɵs = SdDynamicColumn;
|
|
4113
|
+
exports.ɵt = SdGeneratedColumnService;
|
|
4114
|
+
exports.ɵu = SdGridConfigurationResultPipe;
|
|
4115
|
+
exports.ɵv = SdColumnChildrenFilterPipe;
|
|
4116
|
+
exports.ɵw = SdColumnTitlePipe;
|
|
4117
|
+
exports.ɵx = SdCommandFilterPipe;
|
|
4118
|
+
exports.ɵy = SdCommandDisablePipe;
|
|
4119
|
+
exports.ɵz = SdCommandIconPipe;
|
|
4053
4120
|
|
|
4054
4121
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4055
4122
|
|