@sd-angular/core 1.3.241 → 1.3.243
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-export.umd.js +3 -1
- package/bundles/sd-angular-core-export.umd.js.map +1 -1
- package/bundles/sd-angular-core-export.umd.min.js +1 -1
- package/bundles/sd-angular-core-export.umd.min.js.map +1 -1
- package/bundles/sd-angular-core-table.umd.js +13 -5
- package/bundles/sd-angular-core-table.umd.js.map +1 -1
- package/bundles/sd-angular-core-table.umd.min.js +1 -1
- package/bundles/sd-angular-core-table.umd.min.js.map +1 -1
- package/bundles/sd-angular-core-upload-excel.umd.js +4 -4
- package/bundles/sd-angular-core-upload-excel.umd.js.map +1 -1
- package/bundles/sd-angular-core-upload-excel.umd.min.js +2 -2
- package/bundles/sd-angular-core-upload-excel.umd.min.js.map +1 -1
- package/esm2015/export/src/lib/export.model.js +1 -1
- package/esm2015/export/src/lib/export.service.js +4 -2
- package/esm2015/table/src/lib/table.component.js +14 -6
- package/esm2015/upload-excel/src/lib/upload-excel.component.js +4 -4
- package/export/sd-angular-core-export.metadata.json +1 -1
- package/export/src/lib/export.model.d.ts +15 -34
- package/export/src/lib/export.service.d.ts +3 -3
- package/fesm2015/sd-angular-core-export.js +3 -1
- package/fesm2015/sd-angular-core-export.js.map +1 -1
- package/fesm2015/sd-angular-core-table.js +13 -5
- package/fesm2015/sd-angular-core-table.js.map +1 -1
- package/fesm2015/sd-angular-core-upload-excel.js +2 -2
- package/fesm2015/sd-angular-core-upload-excel.js.map +1 -1
- package/package.json +1 -1
- package/{sd-angular-core-1.3.241.tgz → sd-angular-core-1.3.243.tgz} +0 -0
- package/table/sd-angular-core-table.metadata.json +1 -1
- package/upload-excel/sd-angular-core-upload-excel.metadata.json +1 -1
- package/upload-excel/src/lib/upload-excel.component.d.ts +4 -4
|
@@ -1521,12 +1521,14 @@ class SdTable {
|
|
|
1521
1521
|
else if (column.type === 'date') {
|
|
1522
1522
|
let date = item[column.field];
|
|
1523
1523
|
// Nếu là date thì convert theo đúng format
|
|
1524
|
-
obj[column.field] = Date.toFormat(date, 'dd/MM/yyyy');
|
|
1524
|
+
// obj[column.field] = Date.toFormat(date, 'dd/MM/yyyy');
|
|
1525
|
+
obj[column.field] = Date.isDate(date) ? new Date(date) : undefined;
|
|
1525
1526
|
}
|
|
1526
1527
|
else if (column.type === 'datetime') {
|
|
1527
1528
|
let date = item[column.field];
|
|
1528
1529
|
// Nếu là datetime thì convert theo đúng format
|
|
1529
|
-
obj[column.field] = Date.toFormat(date, 'dd/MM/yyyy HH:mm');
|
|
1530
|
+
// obj[column.field] = Date.toFormat(date, 'dd/MM/yyyy HH:mm');
|
|
1531
|
+
obj[column.field] = Date.isDate(date) ? new Date(date) : undefined;
|
|
1530
1532
|
}
|
|
1531
1533
|
else if (column.type === 'time') {
|
|
1532
1534
|
let date = item[column.field];
|
|
@@ -1635,7 +1637,13 @@ class SdTable {
|
|
|
1635
1637
|
});
|
|
1636
1638
|
return;
|
|
1637
1639
|
}
|
|
1638
|
-
tableColumns.push(
|
|
1640
|
+
tableColumns.push({
|
|
1641
|
+
field: column.field,
|
|
1642
|
+
title: column.title,
|
|
1643
|
+
description: column.description,
|
|
1644
|
+
width: column.width,
|
|
1645
|
+
numFmt: column.type === 'datetime' ? 'dd/mm/yyyy hh:mm:ss' : column.type === 'date' ? 'dd/mm/yyyy' : undefined
|
|
1646
|
+
});
|
|
1639
1647
|
});
|
|
1640
1648
|
// Lấy columns từ configuration
|
|
1641
1649
|
if (this.configuration) {
|
|
@@ -1658,7 +1666,7 @@ class SdTable {
|
|
|
1658
1666
|
.map(e => e.data);
|
|
1659
1667
|
}
|
|
1660
1668
|
// Chỉ lấy các columns được thiết lập
|
|
1661
|
-
const columnFields = columns.map(e => e.field);
|
|
1669
|
+
const columnFields = (columns === null || columns === void 0 ? void 0 : columns.map(e => e.field)) || [];
|
|
1662
1670
|
return [...tableColumns, ...(((_b = (_a = this.tableOption.export) === null || _a === void 0 ? void 0 : _a.columns) === null || _b === void 0 ? void 0 : _b.filter(e => { var _a; return !((_a = e.export) === null || _a === void 0 ? void 0 : _a.disabled); })) || [])].filter(column => !(columnFields === null || columnFields === void 0 ? void 0 : columnFields.length) || columnFields.includes(column.field));
|
|
1663
1671
|
});
|
|
1664
1672
|
this.exportExcel = () => {
|
|
@@ -2042,7 +2050,7 @@ _gridId = new WeakMap(), _optionChanges = new WeakMap(), _localItems = new WeakM
|
|
|
2042
2050
|
SdTable.decorators = [
|
|
2043
2051
|
{ type: Component, args: [{
|
|
2044
2052
|
selector: 'sd-table',
|
|
2045
|
-
template: "<ng-container *ngIf=\"configuration\">\r\n <sd-table-filter\r\n *ngIf=\"!tableOption.filter?.disabled && filterRegister\"\r\n [filterRegister]=\"filterRegister\"\r\n [filter]=\"tableOption?.filter\"\r\n [columns]=\"configuration.firstColumns\"\r\n [externalFilters]=\"tableOption?.filter?.externalFilters\"\r\n [filterDefs]=\"filterDefs\">\r\n </sd-table-filter>\r\n <ng-container *ngIf=\"items | sdGroup : tableOption; $implicit as groupedItems\">\r\n <div class=\"c-container\">\r\n <div class=\"c-loading\" *ngIf=\"isLoading\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n <ng-container>\r\n <div\r\n class=\"c-table\"\r\n sdScroll\r\n [ngStyle]=\"{\r\n 'max-height': tableOption?.style?.maxHeight,\r\n 'min-height': tableOption?.style?.minHeight\r\n }\">\r\n <table\r\n mat-table\r\n [dataSource]=\"groupedItems\"\r\n [trackBy]=\"trackBy\"\r\n matSort\r\n [matSortDisabled]=\"!tableOption.sort?.enable\"\r\n 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 <ng-container *ngIf=\"sdSubInformation?.templateRef\">\r\n <ng-container *ngIf=\"tableOption?.expand?.always; else useExpandCollapse\">\r\n <ng-container *ngTemplateOutlet=\"sdSubInformation.templateRef; context: { item: item }\"> </ng-container>\r\n </ng-container>\r\n <ng-template #useExpandCollapse>\r\n <div [@detailExpand]=\"item.isExpanded ? 'expanded' : 'collapsed'\">\r\n <ng-container *ngIf=\"item.isExpanded\">\r\n <ng-container *ngTemplateOutlet=\"sdSubInformation.templateRef; context: { item: item }\"> </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-template>\r\n </ng-container>\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\r\n class=\"p-0\"\r\n mat-header-cell\r\n *matHeaderCellDef\r\n style=\"width: 1px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <button\r\n *ngIf=\"!element.isExpanding && !tableOption?.expand?.always\"\r\n mat-icon-button\r\n 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 p-0\" mat-header-cell *matHeaderCellDef [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n <ng-container *ngIf=\"items | selectionVisibleSelectAll : tableOption?.selector | async\">\r\n <mat-checkbox\r\n *ngIf=\"!tableOption.selector?.single\"\r\n class=\"c-selection px-15\"\r\n style=\"width: 50px\"\r\n color=\"primary\"\r\n [(ngModel)]=\"isSelectAll\"\r\n (change)=\"onSelectAll()\">\r\n </mat-checkbox>\r\n </ng-container>\r\n </th>\r\n <td class=\"text-center p-0\" mat-cell *matCellDef=\"let item\">\r\n <ng-container *ngIf=\"item | selectionVisible : tableOption?.selector\">\r\n <mat-checkbox\r\n class=\"c-selection px-15\"\r\n style=\"width: 50px\"\r\n color=\"primary\"\r\n [(ngModel)]=\"item.meta.selector.isSelected\"\r\n (change)=\"onSelect(item)\"\r\n [disabled]=\"selectedTableItems | selectionDisable : item : tableOption?.selector\">\r\n </mat-checkbox>\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\" sticky>\r\n <th\r\n class=\"p-0\"\r\n mat-header-cell\r\n *matHeaderCellDef\r\n 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]=\"tableOption.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 matColumnDef=\"sdGroup\">\r\n <th mat-header-cell *matHeaderCellDef class=\"px-8 py-8\" [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"!item?.sdGroup ? 1 : configuration.displayedColumns.length\">\r\n <div [innerHtml]=\"item?.sdGroup?.htmlTemplate | safeHtml\"></div>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container\r\n *ngFor=\"let column of configuration.firstColumns\"\r\n [matColumnDef]=\"column.field\"\r\n [sticky]=\"configuration.fixedColumn[column.field]\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n class=\"px-8 py-8 c-th\"\r\n [ngStyle]=\"{ 'min-width': column.width }\"\r\n [attr.rowspan]=\"configuration.multipleHeader && column.type !== 'children-col' ? 2 : 1\"\r\n [attr.colspan]=\"column.type === 'children-col' ? column.children?.length : 1\">\r\n <div>\r\n <div\r\n aria-hidden=\"true\"\r\n mat-sort-header\r\n [disabled]=\"!column.sortable || column.type === 'children-col'\"\r\n [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n [class.text-center]=\"column.align === 'center'\"\r\n [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n <sd-column-inline-filter\r\n *ngIf=\"!tableOption.filter?.disabled && !tableOption.filter?.hideInlineFilter && columnOperator\"\r\n [value]=\"columnFilter[column.field]\"\r\n [(inlineOperator)]=\"columnOperator[column.field]\"\r\n (operatorChange)=\"onOperatorChange(column, $event)\"\r\n [columnFilter]=\"columnFilter\"\r\n [cacheValues]=\"cacheValues\"\r\n [column]=\"column\"\r\n (filterChange)=\"onFilterChange()\">\r\n </sd-column-inline-filter>\r\n </div>\r\n </th>\r\n <td class=\"c-td px-0\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-cell\r\n class=\"d-block px-8\"\r\n *ngIf=\"!item?.sdGroup\"\r\n [value]=\"item[column.field]\"\r\n [column]=\"column\"\r\n [item]=\"item\"\r\n [cellDef]=\"cellDef\">\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=\"footerDef[column.field].templateRef; context: { items: items, column: column }\">\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\" [matColumnDef]=\"column.field\">\r\n <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"c-th px-8\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n <div>\r\n <div\r\n [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n [class.text-center]=\"column.align === 'center'\"\r\n [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n <sd-column-inline-filter\r\n *ngIf=\"!tableOption.filter?.disabled && !tableOption.filter?.hideInlineFilter && columnOperator\"\r\n [value]=\"columnFilter[column.field]\"\r\n [(inlineOperator)]=\"columnOperator[column.field]\"\r\n (operatorChange)=\"onOperatorChange(column, $event)\"\r\n [columnFilter]=\"columnFilter\"\r\n [cacheValues]=\"cacheValues\"\r\n [column]=\"column\"\r\n (filterChange)=\"onFilterChange()\">\r\n </sd-column-inline-filter>\r\n </div>\r\n </th>\r\n <td class=\"c-td px-0\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-cell class=\"d-block px-8\" [value]=\"item[column.field]\" [column]=\"column\" [item]=\"item\" [cellDef]=\"cellDef\">\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=\"footerDef[column.field].templateRef; context: { items: items, column: column }\">\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\"></tr>\r\n </ng-container>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: configuration.displayedColumns\"\r\n matRipple\r\n class=\"c-row\"\r\n [class.selected]=\"row.meta.selector.isSelected\"></tr>\r\n\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 </div>\r\n </ng-container>\r\n <div class=\"c-paginator\">\r\n <div class=\"c-action\">\r\n <ng-container *sdMobileTablet>\r\n <sd-button\r\n *ngIf=\"tableFilter\"\r\n class=\"mr-8\"\r\n [title]=\"'Filter' | sdTranslate\"\r\n icon=\"filter_alt\"\r\n size=\"sm\"\r\n (action)=\"tableFilter.open()\"\r\n type=\"link\">\r\n </sd-button>\r\n </ng-container>\r\n <ng-container *sdDesktop>\r\n <sd-button\r\n *ngIf=\"tableOption.reload?.visible\"\r\n class=\"mr-8\"\r\n title=\"T\u1EA3i l\u1EA1i\"\r\n icon=\"refresh\"\r\n size=\"sm\"\r\n (action)=\"reload()\"\r\n [disabled]=\"!items?.length\"\r\n type=\"link\">\r\n </sd-button>\r\n </ng-container>\r\n <ng-container *ngIf=\"tableOption.export?.visible && items?.length\">\r\n <ng-container *ngIf=\"isExporting; else exportable\">\r\n <sd-button class=\"mr-8\" [loading]=\"isExporting\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\" size=\"sm\" type=\"link\">\r\n </sd-button>\r\n </ng-container>\r\n <ng-template #exportable>\r\n <sd-button class=\"mr-8\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\" size=\"sm\" [matMenuTriggerFor]=\"menu\" type=\"link\">\r\n </sd-button>\r\n </ng-template>\r\n <mat-menu #menu=\"matMenu\">\r\n <button mat-menu-item (click)=\"exportExcel()\" type=\"button\">\r\n <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n <span> Xu\u1EA5t excel</span>\r\n </button>\r\n <button mat-menu-item (click)=\"exportCSV()\" type=\"button\">\r\n <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n <span> Xu\u1EA5t CSV</span>\r\n </button>\r\n <button *ngIf=\"tableOption.export?.key\" mat-menu-item (click)=\"sdPopupExport.open()\" type=\"button\">\r\n <mat-icon fontSet=\"material-icons-outlined\">settings</mat-icon>\r\n <span>Thi\u1EBFt l\u1EADp</span>\r\n </button>\r\n </mat-menu>\r\n </ng-container>\r\n <ng-container *sdDesktop>\r\n <sd-button\r\n *ngIf=\"popupConfiguration\"\r\n class=\"mr-8\"\r\n [title]=\"'Configure' | sdTranslate\"\r\n icon=\"settings\"\r\n size=\"sm\"\r\n (action)=\"popupConfiguration.open()\"\r\n type=\"link\">\r\n </sd-button>\r\n </ng-container>\r\n </div>\r\n <ng-container *sdDesktop>\r\n <mat-paginator\r\n [class.d-none]=\"tableOption.paginate?.hidden\"\r\n [length]=\"total\"\r\n [pageSize]=\"tableOption.paginate?.pageSize\"\r\n [pageSizeOptions]=\"tableOption.paginate?.pages\"\r\n [showFirstLastButtons]=\"tableOption.paginate?.showFirstLastButtons\"></mat-paginator>\r\n </ng-container>\r\n <ng-container *sdMobileTablet>\r\n <mat-paginator\r\n [class.d-none]=\"tableOption.paginate?.hidden\"\r\n [length]=\"total\"\r\n [pageSize]=\"tableOption.paginate?.pageSize\"\r\n hidePageSize=\"true\"></mat-paginator>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <sd-popup-export\r\n *ngIf=\"tableOption.export?.visible\"\r\n [configuration]=\"configuration\"\r\n [tableOption]=\"tableOption\"\r\n (export)=\"onExport($event)\"\r\n #sdPopupExport></sd-popup-export>\r\n <sd-table-quick-action [tableOption]=\"tableOption\" [selectedTableItems]=\"selectedTableItems\" (clear)=\"onClearSelection(groupedItems)\">\r\n </sd-table-quick-action>\r\n <sd-popup-configuration *ngIf=\"tableOption?.key && tableOption.config?.visible\" [tableOption]=\"tableOption\"> </sd-popup-configuration>\r\n </ng-container>\r\n</ng-container>\r\n",
|
|
2053
|
+
template: "<ng-container *ngIf=\"configuration\">\r\n <sd-table-filter\r\n *ngIf=\"!tableOption.filter?.disabled && filterRegister\"\r\n [filterRegister]=\"filterRegister\"\r\n [filter]=\"tableOption?.filter\"\r\n [columns]=\"configuration.firstColumns\"\r\n [externalFilters]=\"tableOption?.filter?.externalFilters\"\r\n [filterDefs]=\"filterDefs\">\r\n </sd-table-filter>\r\n <ng-container *ngIf=\"items | sdGroup : tableOption; $implicit as groupedItems\">\r\n <div class=\"c-container\">\r\n <div class=\"c-loading\" *ngIf=\"isLoading\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n <ng-container>\r\n <div\r\n class=\"c-table\"\r\n sdScroll\r\n [ngStyle]=\"{\r\n 'max-height': tableOption?.style?.maxHeight,\r\n 'min-height': tableOption?.style?.minHeight\r\n }\">\r\n <table\r\n mat-table\r\n [dataSource]=\"groupedItems\"\r\n [trackBy]=\"trackBy\"\r\n matSort\r\n [matSortDisabled]=\"!tableOption.sort?.enable\"\r\n 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 <ng-container *ngIf=\"sdSubInformation?.templateRef\">\r\n <ng-container *ngIf=\"tableOption?.expand?.always; else useExpandCollapse\">\r\n <ng-container *ngTemplateOutlet=\"sdSubInformation.templateRef; context: { item: item }\"> </ng-container>\r\n </ng-container>\r\n <ng-template #useExpandCollapse>\r\n <div [@detailExpand]=\"item.isExpanded ? 'expanded' : 'collapsed'\">\r\n <ng-container *ngIf=\"item.isExpanded\">\r\n <ng-container *ngTemplateOutlet=\"sdSubInformation.templateRef; context: { item: item }\"> </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-template>\r\n </ng-container>\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\r\n class=\"p-0\"\r\n mat-header-cell\r\n *matHeaderCellDef\r\n style=\"width: 1px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <button\r\n *ngIf=\"!element.isExpanding && !tableOption?.expand?.always\"\r\n mat-icon-button\r\n 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 p-0\" mat-header-cell *matHeaderCellDef [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n <ng-container *ngIf=\"items | selectionVisibleSelectAll : tableOption?.selector | async\">\r\n <mat-checkbox\r\n *ngIf=\"!tableOption.selector?.single\"\r\n class=\"c-selection px-15\"\r\n style=\"width: 50px\"\r\n color=\"primary\"\r\n [(ngModel)]=\"isSelectAll\"\r\n (change)=\"onSelectAll()\">\r\n </mat-checkbox>\r\n </ng-container>\r\n </th>\r\n <td class=\"text-center p-0\" mat-cell *matCellDef=\"let item\">\r\n <ng-container *ngIf=\"item | selectionVisible : tableOption?.selector\">\r\n <mat-checkbox\r\n class=\"c-selection px-15\"\r\n style=\"width: 50px\"\r\n color=\"primary\"\r\n [(ngModel)]=\"item.meta.selector.isSelected\"\r\n (change)=\"onSelect(item)\"\r\n [disabled]=\"selectedTableItems | selectionDisable : item : tableOption?.selector\">\r\n </mat-checkbox>\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\" sticky>\r\n <th\r\n class=\"p-0\"\r\n mat-header-cell\r\n *matHeaderCellDef\r\n 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]=\"tableOption.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 matColumnDef=\"sdGroup\">\r\n <th mat-header-cell *matHeaderCellDef class=\"px-8 py-8\" [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"!item?.sdGroup ? 1 : configuration.displayedColumns.length\">\r\n <div [innerHtml]=\"item?.sdGroup?.htmlTemplate | safeHtml\"></div>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container\r\n *ngFor=\"let column of configuration.firstColumns\"\r\n [matColumnDef]=\"column.field\"\r\n [sticky]=\"configuration.fixedColumn[column.field]\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n class=\"px-8 py-8 c-th\"\r\n [ngStyle]=\"{ 'min-width': column.width }\"\r\n [attr.rowspan]=\"configuration.multipleHeader && column.type !== 'children-col' ? 2 : 1\"\r\n [attr.colspan]=\"column.type === 'children-col' ? column.children?.length : 1\">\r\n <div>\r\n <div\r\n aria-hidden=\"true\"\r\n mat-sort-header\r\n [disabled]=\"!column.sortable || column.type === 'children-col'\"\r\n [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n [class.text-center]=\"column.align === 'center'\"\r\n [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n <sd-column-inline-filter\r\n *ngIf=\"!tableOption.filter?.disabled && !tableOption.filter?.hideInlineFilter && columnOperator\"\r\n [value]=\"columnFilter[column.field]\"\r\n [(inlineOperator)]=\"columnOperator[column.field]\"\r\n (operatorChange)=\"onOperatorChange(column, $event)\"\r\n [columnFilter]=\"columnFilter\"\r\n [cacheValues]=\"cacheValues\"\r\n [column]=\"column\"\r\n (filterChange)=\"onFilterChange()\">\r\n </sd-column-inline-filter>\r\n </div>\r\n </th>\r\n <td class=\"c-td px-0\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-cell\r\n class=\"d-block px-8\"\r\n *ngIf=\"!item?.sdGroup\"\r\n [value]=\"item[column.field]\"\r\n [column]=\"column\"\r\n [item]=\"item\"\r\n [cellDef]=\"cellDef\">\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=\"footerDef[column.field].templateRef; context: { items: items, column: column }\">\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\" [matColumnDef]=\"column.field\">\r\n <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"c-th px-8\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n <div>\r\n <div\r\n [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n [class.text-center]=\"column.align === 'center'\"\r\n [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n <sd-column-inline-filter\r\n *ngIf=\"!tableOption.filter?.disabled && !tableOption.filter?.hideInlineFilter && columnOperator\"\r\n [value]=\"columnFilter[column.field]\"\r\n [(inlineOperator)]=\"columnOperator[column.field]\"\r\n (operatorChange)=\"onOperatorChange(column, $event)\"\r\n [columnFilter]=\"columnFilter\"\r\n [cacheValues]=\"cacheValues\"\r\n [column]=\"column\"\r\n (filterChange)=\"onFilterChange()\">\r\n </sd-column-inline-filter>\r\n </div>\r\n </th>\r\n <td class=\"c-td px-0\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-cell class=\"d-block px-8\" [value]=\"item[column.field]\" [column]=\"column\" [item]=\"item\" [cellDef]=\"cellDef\">\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=\"footerDef[column.field].templateRef; context: { items: items, column: column }\">\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\"></tr>\r\n </ng-container>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: configuration.displayedColumns\"\r\n matRipple\r\n class=\"c-row\"\r\n [class.selected]=\"row.meta.selector.isSelected\"></tr>\r\n\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 </div>\r\n </ng-container>\r\n <div class=\"c-paginator\">\r\n <div class=\"c-action\">\r\n <ng-container *sdMobileTablet>\r\n <sd-button\r\n *ngIf=\"tableFilter\"\r\n class=\"mr-8\"\r\n [title]=\"'Filter' | sdTranslate\"\r\n icon=\"filter_alt\"\r\n size=\"sm\"\r\n (action)=\"tableFilter.open()\"\r\n type=\"link\">\r\n </sd-button>\r\n </ng-container>\r\n <ng-container *sdDesktop>\r\n <sd-button\r\n *ngIf=\"tableFilter\"\r\n class=\"mr-8\"\r\n [title]=\"'Filter' | sdTranslate\"\r\n icon=\"filter_alt\"\r\n size=\"sm\"\r\n (action)=\"tableFilter.open()\"\r\n type=\"link\">\r\n </sd-button>\r\n <sd-button\r\n *ngIf=\"tableOption.reload?.visible\"\r\n class=\"mr-8\"\r\n title=\"T\u1EA3i l\u1EA1i\"\r\n icon=\"refresh\"\r\n size=\"sm\"\r\n (action)=\"reload()\"\r\n [disabled]=\"!items?.length\"\r\n type=\"link\">\r\n </sd-button>\r\n </ng-container>\r\n <ng-container *ngIf=\"tableOption.export?.visible && items?.length\">\r\n <ng-container *ngIf=\"isExporting; else exportable\">\r\n <sd-button class=\"mr-8\" [loading]=\"isExporting\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\" size=\"sm\" type=\"link\">\r\n </sd-button>\r\n </ng-container>\r\n <ng-template #exportable>\r\n <sd-button class=\"mr-8\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\" size=\"sm\" [matMenuTriggerFor]=\"menu\" type=\"link\">\r\n </sd-button>\r\n </ng-template>\r\n <mat-menu #menu=\"matMenu\">\r\n <button mat-menu-item (click)=\"exportExcel()\" type=\"button\">\r\n <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n <span> Xu\u1EA5t excel</span>\r\n </button>\r\n <button mat-menu-item (click)=\"exportCSV()\" type=\"button\">\r\n <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n <span> Xu\u1EA5t CSV</span>\r\n </button>\r\n <button *ngIf=\"tableOption.export?.key\" mat-menu-item (click)=\"sdPopupExport.open()\" type=\"button\">\r\n <mat-icon fontSet=\"material-icons-outlined\">settings</mat-icon>\r\n <span>Thi\u1EBFt l\u1EADp</span>\r\n </button>\r\n </mat-menu>\r\n </ng-container>\r\n <ng-container *sdDesktop>\r\n <sd-button\r\n *ngIf=\"popupConfiguration\"\r\n class=\"mr-8\"\r\n [title]=\"'Configure' | sdTranslate\"\r\n icon=\"settings\"\r\n size=\"sm\"\r\n (action)=\"popupConfiguration.open()\"\r\n type=\"link\">\r\n </sd-button>\r\n </ng-container>\r\n </div>\r\n <ng-container *sdDesktop>\r\n <mat-paginator\r\n [class.d-none]=\"tableOption.paginate?.hidden\"\r\n [length]=\"total\"\r\n [pageSize]=\"tableOption.paginate?.pageSize\"\r\n [pageSizeOptions]=\"tableOption.paginate?.pages\"\r\n [showFirstLastButtons]=\"tableOption.paginate?.showFirstLastButtons\"></mat-paginator>\r\n </ng-container>\r\n <ng-container *sdMobileTablet>\r\n <mat-paginator\r\n [class.d-none]=\"tableOption.paginate?.hidden\"\r\n [length]=\"total\"\r\n [pageSize]=\"tableOption.paginate?.pageSize\"\r\n hidePageSize=\"true\"></mat-paginator>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <sd-popup-export\r\n *ngIf=\"tableOption.export?.visible\"\r\n [configuration]=\"configuration\"\r\n [tableOption]=\"tableOption\"\r\n (export)=\"onExport($event)\"\r\n #sdPopupExport></sd-popup-export>\r\n <sd-table-quick-action [tableOption]=\"tableOption\" [selectedTableItems]=\"selectedTableItems\" (clear)=\"onClearSelection(groupedItems)\">\r\n </sd-table-quick-action>\r\n <sd-popup-configuration *ngIf=\"tableOption?.key && tableOption.config?.visible\" [tableOption]=\"tableOption\"> </sd-popup-configuration>\r\n </ng-container>\r\n</ng-container>\r\n",
|
|
2046
2054
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
2047
2055
|
animations: [
|
|
2048
2056
|
trigger('detailExpand', [
|