@sd-angular/core 1.3.147 → 1.3.149
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 +1 -1
- package/bundles/sd-angular-core-grid-material.umd.js.map +1 -1
- package/bundles/sd-angular-core-grid-material.umd.min.js +1 -1
- package/bundles/sd-angular-core-grid-material.umd.min.js.map +1 -1
- package/bundles/sd-angular-core-table.umd.js +219 -144
- 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/esm2015/grid-material/src/lib/components/column-inline-filter/column-inline-filter.component.js +2 -2
- package/esm2015/table/src/lib/components/column-inline-filter/column-inline-filter.component.js +34 -12
- package/esm2015/table/src/lib/models/index.js +2 -1
- package/esm2015/table/src/lib/models/table-column.model.js +43 -19
- package/esm2015/table/src/lib/models/table-configuration.model.js +1 -1
- package/esm2015/table/src/lib/table.component.js +19 -3
- package/fesm2015/sd-angular-core-grid-material.js +1 -1
- package/fesm2015/sd-angular-core-grid-material.js.map +1 -1
- package/fesm2015/sd-angular-core-table.js +92 -30
- package/fesm2015/sd-angular-core-table.js.map +1 -1
- package/grid-material/sd-angular-core-grid-material.metadata.json +1 -1
- package/package.json +1 -1
- package/{sd-angular-core-1.3.147.tgz → sd-angular-core-1.3.149.tgz} +0 -0
- package/table/sd-angular-core-table.metadata.json +1 -1
- package/table/src/lib/components/column-inline-filter/column-inline-filter.component.d.ts +11 -4
- package/table/src/lib/models/index.d.ts +1 -0
- package/table/src/lib/models/table-column.model.d.ts +2 -1
- package/table/src/lib/models/table-configuration.model.d.ts +7 -0
|
@@ -968,7 +968,7 @@ class SdTable {
|
|
|
968
968
|
};
|
|
969
969
|
});
|
|
970
970
|
_initConfiguration$1.set(this, (option) => {
|
|
971
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
|
971
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7;
|
|
972
972
|
// Init pagination
|
|
973
973
|
option.paginate = {
|
|
974
974
|
hidden: (_a = option === null || option === void 0 ? void 0 : option.paginate) === null || _a === void 0 ? void 0 : _a.hidden,
|
|
@@ -976,6 +976,22 @@ class SdTable {
|
|
|
976
976
|
pages: (_m = (_j = (_h = option === null || option === void 0 ? void 0 : option.paginate) === null || _h === void 0 ? void 0 : _h.pages) !== null && _j !== void 0 ? _j : (_l = (_k = this.configuration) === null || _k === void 0 ? void 0 : _k.paginate) === null || _l === void 0 ? void 0 : _l.pages) !== null && _m !== void 0 ? _m : (_o = DEFAULT_TABLE_CONFIG.paginate) === null || _o === void 0 ? void 0 : _o.pages,
|
|
977
977
|
showFirstLastButtons: (_q = (_p = option === null || option === void 0 ? void 0 : option.paginate) === null || _p === void 0 ? void 0 : _p.showFirstLastButtons) !== null && _q !== void 0 ? _q : false,
|
|
978
978
|
};
|
|
979
|
+
for (const column of option.columns || []) {
|
|
980
|
+
if (((_s = (_r = column.filter) === null || _r === void 0 ? void 0 : _r.operator) === null || _s === void 0 ? void 0 : _s.enable) && !((_v = (_u = (_t = column.filter) === null || _t === void 0 ? void 0 : _t.operator) === null || _u === void 0 ? void 0 : _u.list) === null || _v === void 0 ? void 0 : _v.length)) {
|
|
981
|
+
if (column.type === 'string') {
|
|
982
|
+
column.filter.operator.list = ((_y = (_x = (_w = this.configuration) === null || _w === void 0 ? void 0 : _w.filter) === null || _x === void 0 ? void 0 : _x.operator) === null || _y === void 0 ? void 0 : _y.defaultListString) || [];
|
|
983
|
+
}
|
|
984
|
+
if (column.type === 'number') {
|
|
985
|
+
column.filter.operator.list = ((_1 = (_0 = (_z = this.configuration) === null || _z === void 0 ? void 0 : _z.filter) === null || _0 === void 0 ? void 0 : _0.operator) === null || _1 === void 0 ? void 0 : _1.defaultListNumber) || [];
|
|
986
|
+
}
|
|
987
|
+
if (column.type === 'values') {
|
|
988
|
+
column.filter.operator.list = ((_4 = (_3 = (_2 = this.configuration) === null || _2 === void 0 ? void 0 : _2.filter) === null || _3 === void 0 ? void 0 : _3.operator) === null || _4 === void 0 ? void 0 : _4.defaultListValues) || [];
|
|
989
|
+
}
|
|
990
|
+
if (column.type === 'date' || column.type === 'datetime') {
|
|
991
|
+
column.filter.operator.list = ((_7 = (_6 = (_5 = this.configuration) === null || _5 === void 0 ? void 0 : _5.filter) === null || _6 === void 0 ? void 0 : _6.operator) === null || _7 === void 0 ? void 0 : _7.defaultListDate) || [];
|
|
992
|
+
}
|
|
993
|
+
}
|
|
994
|
+
}
|
|
979
995
|
return option;
|
|
980
996
|
});
|
|
981
997
|
_loadFilterRegister.set(this, () => {
|
|
@@ -1643,7 +1659,7 @@ _gridId = new WeakMap(), _optionChanges = new WeakMap(), _localItems = new WeakM
|
|
|
1643
1659
|
SdTable.decorators = [
|
|
1644
1660
|
{ type: Component, args: [{
|
|
1645
1661
|
selector: 'sd-table',
|
|
1646
|
-
template: "<ng-container *ngIf=\"gridConfigurationObserver | async as gridConfiguration\">\r\n <ng-container *ngIf=\"gridConfiguration | sdGridConfigurationResult : gridOption : sdSubInformation as configuration\">\r\n <sd-grid-filter\r\n *ngIf=\"!gridOption.filter?.disabled && filterRegister\"\r\n [filterRegister]=\"filterRegister\"\r\n [filter]=\"gridOption?.filter\"\r\n [columns]=\"configuration.firstColumns\"\r\n [externalFilters]=\"gridOption?.filter?.externalFilters\"\r\n [filterDefs]=\"filterDefs\"\r\n #gridFilter>\r\n </sd-grid-filter>\r\n <ng-container *ngIf=\"items | sdGroup : gridOption; $implicit as groupedItems\">\r\n <div class=\"c-container\">\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\r\n class=\"c-table\"\r\n sdScroll\r\n [ngStyle]=\"{\r\n 'max-height': gridOption?.style?.maxHeight,\r\n 'min-height': gridOption?.style?.minHeight\r\n }\">\r\n <table\r\n *ngIf=\"items?.length; else elseEmpty\"\r\n mat-table\r\n [dataSource]=\"groupedItems\"\r\n matSort\r\n [matSortDisabled]=\"!gridOption.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=\"gridOption?.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 && !gridOption?.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\r\n class=\"text-center px-15\"\r\n mat-header-cell\r\n *matHeaderCellDef\r\n style=\"min-width: 50px; max-width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n <ng-container *ngIf=\"items | selectionVisibleSelectAll : gridOption?.selector | async\">\r\n <mat-checkbox\r\n *ngIf=\"!gridOption.selector?.single\"\r\n class=\"c-selection\"\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 px-15\" mat-cell *matCellDef=\"let item\" style=\"min-width: 50px; max-width: 50px\">\r\n <ng-container *ngIf=\"item | selectionVisible : gridOption?.selector\">\r\n <mat-checkbox\r\n class=\"c-selection\"\r\n color=\"primary\"\r\n [(ngModel)]=\"item.isSelected\"\r\n (change)=\"onSelect(item)\"\r\n [disabled]=\"selectedItems | selectionDisable : item : gridOption?.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\">\r\n <th\r\n class=\"px-8 py-8\"\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]=\"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 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; let i = index\"\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 cdkDrag\r\n class=\"px-8 py-8 c-th\"\r\n [ngStyle]=\"{ 'min-width': configuration.firstColumns[i].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=\"false\"\r\n role=\"presentation\"\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]=\"configuration.firstColumns[i].titleHtml || configuration.firstColumns[i].title\"></div>\r\n <sd-column-inline-filter\r\n *ngIf=\"gridOption.filter?.inlineColumn\"\r\n [value]=\"columnFilter[column.field]\"\r\n [columnOperator]=\"columnOperator\"\r\n [columnFilter]=\"columnFilter\"\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 [sdId]=\"item.meta.id\"\r\n [key]=\"key\"\r\n [value]=\"item[column.field]\"\r\n [column]=\"column\"\r\n [item]=\"item\"\r\n [idx]=\"i\"\r\n [cellDef]=\"cellDef\"\r\n [gridOption]=\"gridOption\">\r\n </sd-desktop-cell>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef>\r\n <ng-container *ngIf=\"footerDef[column.field]\">\r\n <ng-container *ngTemplateOutlet=\"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; let i = index\" [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=\"gridOption.filter?.inlineColumn\"\r\n [value]=\"columnFilter[column.field]\"\r\n [columnFilter]=\"columnFilter\"\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 [sdId]=\"item.meta.id\"\r\n [key]=\"key\"\r\n [value]=\"item[column.field]\"\r\n [column]=\"column\"\r\n [item]=\"item\"\r\n [idx]=\"i\"\r\n [cellDef]=\"cellDef\"\r\n [gridOption]=\"gridOption\">\r\n </sd-desktop-cell>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef>\r\n <ng-container *ngIf=\"footerDef[column.field]\">\r\n <ng-container *ngTemplateOutlet=\"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.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 <ng-template #elseEmpty>\r\n <table mat-table [dataSource]=\"[{}]\">\r\n <ng-container matColumnDef=\"sdSelection\" sticky>\r\n <th\r\n class=\"px-15\"\r\n mat-header-cell\r\n *matHeaderCellDef\r\n style=\"min-width: 50px; max-width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdCommand\">\r\n <th\r\n class=\"px-8\"\r\n mat-header-cell\r\n *matHeaderCellDef\r\n 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\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 </ng-container>\r\n <ng-container matColumnDef=\"sdEmpty\">\r\n <td class=\"c-empty\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"configuration.displayedColumns.length\">\r\n <ng-container *ngIf=\"sdEmptyData?.templateRef; else sdEmptyDataNoRef\">\r\n <ng-container *ngTemplateOutlet=\"sdEmptyData.templateRef; context: { item: item }\"> </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 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\"></td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container\r\n *ngFor=\"let column of configuration.columns\"\r\n [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\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 </th>\r\n </ng-container>\r\n <ng-container\r\n *ngFor=\"let column of configuration.firstColumns; let i = index\"\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=\"c-th px-8 py-8\"\r\n [ngStyle]=\"{ 'min-width': configuration.firstColumns[i].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 [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n [class.text-center]=\"column.align === 'center'\"\r\n [innerHTML]=\"configuration.firstColumns[i].titleHtml || configuration.firstColumns[i].title\"></div>\r\n <sd-column-inline-filter\r\n *ngIf=\"gridOption.filter?.inlineColumn\"\r\n [value]=\"columnFilter[column.field]\"\r\n [columnFilter]=\"columnFilter\"\r\n [column]=\"column\"\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\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=\"gridOption.filter?.inlineColumn\"\r\n [value]=\"columnFilter[column.field]\"\r\n [columnFilter]=\"columnFilter\"\r\n [column]=\"column\"\r\n (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\"></tr>\r\n <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\"></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\r\n *ngIf=\"gridFilter && !gridOption.filter?.inlineColumn\"\r\n class=\"mr-10\"\r\n [title]=\"'Filter' | sdTranslate\"\r\n icon=\"filter_alt\"\r\n size=\"sm\"\r\n (action)=\"gridFilter.open()\"\r\n type=\"link\">\r\n </sd-button>\r\n <sd-button\r\n *ngIf=\"gridOption.reload?.visible\"\r\n class=\"mr-10\"\r\n [title]=\"'Reload' | sdTranslate\"\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 *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\" size=\"sm\" type=\"link\">\r\n </sd-button>\r\n </ng-container>\r\n <ng-template #unExporting>\r\n <sd-button\r\n class=\"mr-10\"\r\n [title]=\"exportTitle | sdTranslate\"\r\n icon=\"get_app\"\r\n size=\"sm\"\r\n [matMenuTriggerFor]=\"menu\"\r\n type=\"link\">\r\n </sd-button>\r\n </ng-template>\r\n\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 </mat-menu>\r\n </ng-container>\r\n <sd-button\r\n *ngIf=\"gridOption.config?.visible\"\r\n class=\"mr-10\"\r\n [title]=\"'Configure' | sdTranslate\"\r\n icon=\"settings\"\r\n size=\"sm\"\r\n (action)=\"popupGridConfiguration.open()\"\r\n type=\"link\">\r\n </sd-button>\r\n </div>\r\n <mat-paginator\r\n [class.d-none]=\"gridOption.paginate?.hidden\"\r\n [length]=\"total\"\r\n [pageSize]=\"gridOption.paginate?.pageSize\"\r\n [pageSizeOptions]=\"gridOption.paginate?.pages\"\r\n [showFirstLastButtons]=\"gridOption.paginate?.showFirstLastButtons\"></mat-paginator>\r\n </div>\r\n </div>\r\n <sd-grid-quick-action [gridOption]=\"gridOption\" [selectedItems]=\"selectedItems\" (clear)=\"onClearSelection(groupedItems)\">\r\n </sd-grid-quick-action>\r\n <sd-popup-grid-configuration [gridOption]=\"gridOption\" [key]=\"key\" #popupGridConfiguration> </sd-popup-grid-configuration>\r\n </ng-container>\r\n </ng-container>\r\n</ng-container>\r\n",
|
|
1662
|
+
template: "<ng-container *ngIf=\"gridConfigurationObserver | async as gridConfiguration\">\r\n <ng-container *ngIf=\"gridConfiguration | sdGridConfigurationResult : gridOption : sdSubInformation as configuration\">\r\n <sd-grid-filter\r\n *ngIf=\"!gridOption.filter?.disabled && filterRegister\"\r\n [filterRegister]=\"filterRegister\"\r\n [filter]=\"gridOption?.filter\"\r\n [columns]=\"configuration.firstColumns\"\r\n [externalFilters]=\"gridOption?.filter?.externalFilters\"\r\n [filterDefs]=\"filterDefs\"\r\n #gridFilter>\r\n </sd-grid-filter>\r\n <ng-container *ngIf=\"items | sdGroup : gridOption; $implicit as groupedItems\">\r\n <div class=\"c-container\">\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\r\n class=\"c-table\"\r\n sdScroll\r\n [ngStyle]=\"{\r\n 'max-height': gridOption?.style?.maxHeight,\r\n 'min-height': gridOption?.style?.minHeight\r\n }\">\r\n <table\r\n *ngIf=\"items?.length; else elseEmpty\"\r\n mat-table\r\n [dataSource]=\"groupedItems\"\r\n matSort\r\n [matSortDisabled]=\"!gridOption.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=\"gridOption?.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 && !gridOption?.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\r\n class=\"text-center px-15\"\r\n mat-header-cell\r\n *matHeaderCellDef\r\n style=\"min-width: 50px; max-width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n <ng-container *ngIf=\"items | selectionVisibleSelectAll : gridOption?.selector | async\">\r\n <mat-checkbox\r\n *ngIf=\"!gridOption.selector?.single\"\r\n class=\"c-selection\"\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 px-15\" mat-cell *matCellDef=\"let item\" style=\"min-width: 50px; max-width: 50px\">\r\n <ng-container *ngIf=\"item | selectionVisible : gridOption?.selector\">\r\n <mat-checkbox\r\n class=\"c-selection\"\r\n color=\"primary\"\r\n [(ngModel)]=\"item.isSelected\"\r\n (change)=\"onSelect(item)\"\r\n [disabled]=\"selectedItems | selectionDisable : item : gridOption?.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\">\r\n <th\r\n class=\"px-8 py-8\"\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]=\"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 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; let i = index\"\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 cdkDrag\r\n class=\"px-8 py-8 c-th\"\r\n [ngStyle]=\"{ 'min-width': configuration.firstColumns[i].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=\"false\"\r\n role=\"presentation\"\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]=\"configuration.firstColumns[i].titleHtml || configuration.firstColumns[i].title\"></div>\r\n <sd-column-inline-filter\r\n *ngIf=\"gridOption.filter?.inlineColumn && columnOperator\"\r\n [value]=\"columnFilter[column.field]\"\r\n [(inlineOperator)]=\"columnOperator[column.field]\"\r\n [columnFilter]=\"columnFilter\"\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 [sdId]=\"item.meta.id\"\r\n [key]=\"key\"\r\n [value]=\"item[column.field]\"\r\n [column]=\"column\"\r\n [item]=\"item\"\r\n [idx]=\"i\"\r\n [cellDef]=\"cellDef\"\r\n [gridOption]=\"gridOption\">\r\n </sd-desktop-cell>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef>\r\n <ng-container *ngIf=\"footerDef[column.field]\">\r\n <ng-container *ngTemplateOutlet=\"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; let i = index\" [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=\"gridOption.filter?.inlineColumn && columnOperator\"\r\n [value]=\"columnFilter[column.field]\"\r\n [(inlineOperator)]=\"columnOperator[column.field]\"\r\n [columnFilter]=\"columnFilter\"\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 [sdId]=\"item.meta.id\"\r\n [key]=\"key\"\r\n [value]=\"item[column.field]\"\r\n [column]=\"column\"\r\n [item]=\"item\"\r\n [idx]=\"i\"\r\n [cellDef]=\"cellDef\"\r\n [gridOption]=\"gridOption\">\r\n </sd-desktop-cell>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef>\r\n <ng-container *ngIf=\"footerDef[column.field]\">\r\n <ng-container *ngTemplateOutlet=\"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.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 <ng-template #elseEmpty>\r\n <table mat-table [dataSource]=\"[{}]\">\r\n <ng-container matColumnDef=\"sdSelection\" sticky>\r\n <th\r\n class=\"px-15\"\r\n mat-header-cell\r\n *matHeaderCellDef\r\n style=\"min-width: 50px; max-width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdCommand\">\r\n <th\r\n class=\"px-8\"\r\n mat-header-cell\r\n *matHeaderCellDef\r\n 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\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 </ng-container>\r\n <ng-container matColumnDef=\"sdEmpty\">\r\n <td class=\"c-empty\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"configuration.displayedColumns.length\">\r\n <ng-container *ngIf=\"sdEmptyData?.templateRef; else sdEmptyDataNoRef\">\r\n <ng-container *ngTemplateOutlet=\"sdEmptyData.templateRef; context: { item: item }\"> </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 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\"></td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container\r\n *ngFor=\"let column of configuration.columns\"\r\n [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\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 </th>\r\n </ng-container>\r\n <ng-container\r\n *ngFor=\"let column of configuration.firstColumns; let i = index\"\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=\"c-th px-8 py-8\"\r\n [ngStyle]=\"{ 'min-width': configuration.firstColumns[i].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 [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n [class.text-center]=\"column.align === 'center'\"\r\n [innerHTML]=\"configuration.firstColumns[i].titleHtml || configuration.firstColumns[i].title\"></div>\r\n <sd-column-inline-filter\r\n *ngIf=\"gridOption.filter?.inlineColumn && columnOperator\"\r\n [value]=\"columnFilter[column.field]\"\r\n [(inlineOperator)]=\"columnOperator[column.field]\"\r\n [columnFilter]=\"columnFilter\"\r\n [column]=\"column\"\r\n (filterChange)=\"onFilterChange()\">\r\n </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\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=\"gridOption.filter?.inlineColumn\"\r\n [value]=\"columnFilter[column.field]\"\r\n [columnFilter]=\"columnFilter\"\r\n [column]=\"column\"\r\n (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\"></tr>\r\n <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\"></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\r\n *ngIf=\"gridFilter && !gridOption.filter?.inlineColumn\"\r\n class=\"mr-10\"\r\n [title]=\"'Filter' | sdTranslate\"\r\n icon=\"filter_alt\"\r\n size=\"sm\"\r\n (action)=\"gridFilter.open()\"\r\n type=\"link\">\r\n </sd-button>\r\n <sd-button\r\n *ngIf=\"gridOption.reload?.visible\"\r\n class=\"mr-10\"\r\n [title]=\"'Reload' | sdTranslate\"\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 *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\" size=\"sm\" type=\"link\">\r\n </sd-button>\r\n </ng-container>\r\n <ng-template #unExporting>\r\n <sd-button\r\n class=\"mr-10\"\r\n [title]=\"exportTitle | sdTranslate\"\r\n icon=\"get_app\"\r\n size=\"sm\"\r\n [matMenuTriggerFor]=\"menu\"\r\n type=\"link\">\r\n </sd-button>\r\n </ng-template>\r\n\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 </mat-menu>\r\n </ng-container>\r\n <sd-button\r\n *ngIf=\"gridOption.config?.visible\"\r\n class=\"mr-10\"\r\n [title]=\"'Configure' | sdTranslate\"\r\n icon=\"settings\"\r\n size=\"sm\"\r\n (action)=\"popupGridConfiguration.open()\"\r\n type=\"link\">\r\n </sd-button>\r\n </div>\r\n <mat-paginator\r\n [class.d-none]=\"gridOption.paginate?.hidden\"\r\n [length]=\"total\"\r\n [pageSize]=\"gridOption.paginate?.pageSize\"\r\n [pageSizeOptions]=\"gridOption.paginate?.pages\"\r\n [showFirstLastButtons]=\"gridOption.paginate?.showFirstLastButtons\"></mat-paginator>\r\n </div>\r\n </div>\r\n <sd-grid-quick-action [gridOption]=\"gridOption\" [selectedItems]=\"selectedItems\" (clear)=\"onClearSelection(groupedItems)\">\r\n </sd-grid-quick-action>\r\n <sd-popup-grid-configuration [gridOption]=\"gridOption\" [key]=\"key\" #popupGridConfiguration> </sd-popup-grid-configuration>\r\n </ng-container>\r\n </ng-container>\r\n</ng-container>\r\n",
|
|
1647
1663
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1648
1664
|
animations: [
|
|
1649
1665
|
trigger('detailExpand', [
|
|
@@ -2319,46 +2335,73 @@ SdDesktopCell.propDecorators = {
|
|
|
2319
2335
|
const SdFilterOperators = [
|
|
2320
2336
|
{
|
|
2321
2337
|
value: 'EQUAL',
|
|
2322
|
-
|
|
2338
|
+
symbol: '=',
|
|
2339
|
+
display: 'Bằng',
|
|
2323
2340
|
},
|
|
2324
2341
|
{
|
|
2325
2342
|
value: 'NOT_EQUAL',
|
|
2326
|
-
|
|
2343
|
+
symbol: '≠',
|
|
2344
|
+
display: 'Không bằng',
|
|
2327
2345
|
},
|
|
2328
|
-
{
|
|
2329
|
-
value: 'CONTAIN',
|
|
2330
|
-
display: '∈',
|
|
2331
|
-
},
|
|
2332
|
-
// {
|
|
2333
|
-
// value: 'START_WITH';
|
|
2334
|
-
// display: '=';
|
|
2335
|
-
// },
|
|
2336
|
-
// {
|
|
2337
|
-
// value: 'END_WITH';
|
|
2338
|
-
// display: '=';
|
|
2339
|
-
// },
|
|
2340
2346
|
{
|
|
2341
2347
|
value: 'GREATER_THAN',
|
|
2342
|
-
|
|
2348
|
+
symbol: '>',
|
|
2349
|
+
display: 'Lớn hơn',
|
|
2343
2350
|
},
|
|
2344
2351
|
{
|
|
2345
2352
|
value: 'LESS_THAN',
|
|
2346
|
-
|
|
2353
|
+
symbol: '<',
|
|
2354
|
+
display: 'Nhỏ hơn',
|
|
2347
2355
|
},
|
|
2348
2356
|
{
|
|
2349
2357
|
value: 'GREATER_OR_EQUAL',
|
|
2350
|
-
|
|
2358
|
+
symbol: '≥',
|
|
2359
|
+
display: 'Lớn hơn, hoặc bằng'
|
|
2351
2360
|
},
|
|
2352
2361
|
{
|
|
2353
2362
|
value: 'LESS_OR_EQUAL',
|
|
2354
|
-
|
|
2363
|
+
symbol: '≤',
|
|
2364
|
+
display: 'Nhỏ hơn, hoặc bằng'
|
|
2365
|
+
},
|
|
2366
|
+
{
|
|
2367
|
+
value: 'CONTAIN',
|
|
2368
|
+
symbol: 'join_inner',
|
|
2369
|
+
display: 'Chứa',
|
|
2370
|
+
},
|
|
2371
|
+
{
|
|
2372
|
+
value: 'NOT_CONTAIN',
|
|
2373
|
+
symbol: 'join',
|
|
2374
|
+
display: 'Không chứa',
|
|
2375
|
+
},
|
|
2376
|
+
{
|
|
2377
|
+
value: 'START_WITH',
|
|
2378
|
+
symbol: 'line_start_circle',
|
|
2379
|
+
display: 'Bắt đầu bởi'
|
|
2380
|
+
},
|
|
2381
|
+
{
|
|
2382
|
+
value: 'END_WITH',
|
|
2383
|
+
symbol: 'line_end_circle',
|
|
2384
|
+
display: 'Kết thúc bởi'
|
|
2385
|
+
},
|
|
2386
|
+
{
|
|
2387
|
+
value: 'IN',
|
|
2388
|
+
symbol: 'checklist_rtl',
|
|
2389
|
+
display: 'Nằm trong'
|
|
2390
|
+
},
|
|
2391
|
+
{
|
|
2392
|
+
value: 'NOT_IN',
|
|
2393
|
+
symbol: 'event_list',
|
|
2394
|
+
display: 'Không nằm trong'
|
|
2355
2395
|
},
|
|
2356
2396
|
];
|
|
2357
2397
|
|
|
2358
|
-
var _valueChanges, _subcription;
|
|
2398
|
+
var _inlineOperator_1, _valueChanges, _subcription;
|
|
2359
2399
|
class SdColumnInlineFilter {
|
|
2360
|
-
constructor() {
|
|
2361
|
-
this.
|
|
2400
|
+
constructor(ref) {
|
|
2401
|
+
this.ref = ref;
|
|
2402
|
+
this.inlineSymbol = 'filter_alt';
|
|
2403
|
+
_inlineOperator_1.set(this, void 0);
|
|
2404
|
+
this.inlineOperatorChange = new EventEmitter();
|
|
2362
2405
|
this.columnFilter = {};
|
|
2363
2406
|
this.operators = [];
|
|
2364
2407
|
this.filterChange = new EventEmitter();
|
|
@@ -2367,13 +2410,29 @@ class SdColumnInlineFilter {
|
|
|
2367
2410
|
this.onFilterChange = () => {
|
|
2368
2411
|
this.filterChange.emit();
|
|
2369
2412
|
};
|
|
2413
|
+
this.onChangeOperator = (operator) => {
|
|
2414
|
+
if (operator) {
|
|
2415
|
+
__classPrivateFieldSet(this, _inlineOperator_1, operator.value);
|
|
2416
|
+
this.inlineSymbol = operator.symbol;
|
|
2417
|
+
}
|
|
2418
|
+
else {
|
|
2419
|
+
__classPrivateFieldSet(this, _inlineOperator_1, null);
|
|
2420
|
+
this.inlineSymbol = 'filter_alt';
|
|
2421
|
+
}
|
|
2422
|
+
this.inlineOperatorChange.emit(__classPrivateFieldGet(this, _inlineOperator_1));
|
|
2423
|
+
this.ref.markForCheck();
|
|
2424
|
+
};
|
|
2370
2425
|
}
|
|
2371
2426
|
_value(value) {
|
|
2372
2427
|
this.value = value;
|
|
2373
2428
|
__classPrivateFieldGet(this, _valueChanges).next();
|
|
2374
2429
|
}
|
|
2375
|
-
set
|
|
2376
|
-
|
|
2430
|
+
set _inlineOperator(inlineOperator) {
|
|
2431
|
+
var _a, _b;
|
|
2432
|
+
if (__classPrivateFieldGet(this, _inlineOperator_1) !== inlineOperator) {
|
|
2433
|
+
__classPrivateFieldSet(this, _inlineOperator_1, inlineOperator);
|
|
2434
|
+
this.inlineSymbol = (_b = (_a = SdFilterOperators.find(e => e.value === inlineOperator)) === null || _a === void 0 ? void 0 : _a.symbol) !== null && _b !== void 0 ? _b : 'filter_alt';
|
|
2435
|
+
}
|
|
2377
2436
|
}
|
|
2378
2437
|
set _columnFilter(columnFilter) {
|
|
2379
2438
|
this.columnFilter = columnFilter || {};
|
|
@@ -2406,19 +2465,22 @@ class SdColumnInlineFilter {
|
|
|
2406
2465
|
__classPrivateFieldGet(this, _subcription).unsubscribe();
|
|
2407
2466
|
}
|
|
2408
2467
|
}
|
|
2409
|
-
_valueChanges = new WeakMap(), _subcription = new WeakMap();
|
|
2468
|
+
_inlineOperator_1 = new WeakMap(), _valueChanges = new WeakMap(), _subcription = new WeakMap();
|
|
2410
2469
|
SdColumnInlineFilter.decorators = [
|
|
2411
2470
|
{ type: Component, args: [{
|
|
2412
2471
|
selector: 'sd-column-inline-filter',
|
|
2413
|
-
template: "<div class=\"d-flex c-inline-column\">\r\n <ng-container\r\n *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 <
|
|
2472
|
+
template: "<div class=\"d-flex c-inline-column\">\r\n <ng-container\r\n *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 <div class=\"d-flex align-items-center\" *ngIf=\"operators.length\">\r\n <!-- Only number column icon broken. add mb when not default symbol -->\r\n <sd-button class=\"{{ (column.type === 'number' && inlineSymbol !== 'filter_alt') ? 'mb-4 mr-2 ' :'mr-2 '}}\" fontSet=\"material-symbols-outlined\" [icon]=\"inlineSymbol\" size=\"sm\"\r\n [matMenuTriggerFor]=\"menu\" type=\"link\"> </sd-button>\r\n <mat-menu #menu=\"matMenu\">\r\n <button *ngFor=\"let operator of operators\" (click)=\"onChangeOperator(operator)\" mat-menu-item type=\"button\">\r\n <mat-icon fontSet=\"material-symbols-outlined\" class=\"{{column.type === 'number' ? 'mb-8 ':''}}\">{{ operator.symbol }}</mat-icon>\r\n <span> {{ operator.display }}</span>\r\n </button>\r\n </mat-menu>\r\n </div>\r\n <sd-input\r\n *ngIf=\"column.type === 'string'\"\r\n style=\"flex: 1\"\r\n size=\"sm\"\r\n type=\"text\"\r\n [(model)]=\"columnFilter[column.field]\"\r\n (keyupEnter)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\">\r\n </sd-input>\r\n <sd-input-number\r\n *ngIf=\"column.type === 'number'\"\r\n style=\"flex: 1\"\r\n size=\"sm\"\r\n [(model)]=\"columnFilter[column.field]\"\r\n (keyupEnter)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\">\r\n </sd-input-number>\r\n <sd-select\r\n *ngIf=\"column.type === 'bool'\"\r\n style=\"flex: 1\"\r\n size=\"sm\"\r\n [items]=\"[\r\n { value: '1', display: column.option?.displayOnTrue || 'True' },\r\n { value: '0', display: column.option?.displayOnFalse || 'False' }\r\n ]\"\r\n valueField=\"value\"\r\n displayField=\"display\"\r\n [(model)]=\"columnFilter[column.field]\"\r\n (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\">\r\n <ng-template sdSelectDisplayDef let-item=\"item\">\r\n <sd-badge *ngIf=\"item.value === '1'\" color=\"success\" [title]=\"column.option?.displayOnTrue || 'True'\"> </sd-badge>\r\n <sd-badge *ngIf=\"item.value === '0'\" color=\"danger\" [title]=\"column.option?.displayOnFalse || 'False'\"> </sd-badge>\r\n </ng-template>\r\n </sd-select>\r\n <sd-select\r\n *ngIf=\"column.type === 'values' && column?.option?.selection !== 'AUTOCOMPLETE'\"\r\n style=\"flex: 1\"\r\n size=\"sm\"\r\n [items]=\"column.option.items\"\r\n [valueField]=\"column.option.valueField\"\r\n [displayField]=\"column.option.displayField\"\r\n [(model)]=\"columnFilter[column.field]\"\r\n (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\"\r\n [multiple]=\"column?.option?.selection === 'MULTIPLE' || column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\"\r\n [filtered]=\"column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\">\r\n </sd-select>\r\n <sd-autocomplete\r\n *ngIf=\"column.type === 'values' && column?.option?.selection === 'AUTOCOMPLETE'\"\r\n style=\"flex: 1\"\r\n size=\"sm\"\r\n [items]=\"column.option.items\"\r\n [valueField]=\"column.option.valueField\"\r\n [displayField]=\"column.option.displayField\"\r\n [(model)]=\"columnFilter[column.field]\"\r\n (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\">\r\n </sd-autocomplete>\r\n <ng-container *ngIf=\"column.type === 'date' || column.type === 'datetime' || column.type === 'time'\">\r\n <sd-date-range\r\n *ngIf=\"!column.option?.useFilterDate\"\r\n style=\"flex: 1\"\r\n size=\"sm\"\r\n [(from)]=\"columnFilter[column.field].from\"\r\n [(to)]=\"columnFilter[column.field].to\"\r\n (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\">\r\n </sd-date-range>\r\n <sd-date-time\r\n *ngIf=\"column.option?.useFilterDate\"\r\n style=\"flex: 1\"\r\n type=\"date\"\r\n size=\"sm\"\r\n [(model)]=\"columnFilter[column.field]\"\r\n (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\">\r\n </sd-date-time>\r\n </ng-container>\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>\r\n",
|
|
2414
2473
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
2415
2474
|
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}"]
|
|
2416
2475
|
},] }
|
|
2417
2476
|
];
|
|
2418
|
-
SdColumnInlineFilter.ctorParameters = () => [
|
|
2477
|
+
SdColumnInlineFilter.ctorParameters = () => [
|
|
2478
|
+
{ type: ChangeDetectorRef }
|
|
2479
|
+
];
|
|
2419
2480
|
SdColumnInlineFilter.propDecorators = {
|
|
2420
2481
|
_value: [{ type: Input, args: ['value',] }],
|
|
2421
|
-
|
|
2482
|
+
_inlineOperator: [{ type: Input, args: ['inlineOperator',] }],
|
|
2483
|
+
inlineOperatorChange: [{ type: Output }],
|
|
2422
2484
|
_columnFilter: [{ type: Input, args: ['columnFilter',] }],
|
|
2423
2485
|
_column: [{ type: Input, args: ['column',] }],
|
|
2424
2486
|
filterChange: [{ type: Output }]
|
|
@@ -2861,5 +2923,5 @@ SdTableModule.decorators = [
|
|
|
2861
2923
|
* Generated bundle index. Do not edit.
|
|
2862
2924
|
*/
|
|
2863
2925
|
|
|
2864
|
-
export { MatPaginatorIntlCro, SdFilterOperators, SdTable, SdTableModule, SdGridQuickAction as ɵa, SdDesktopCell as ɵb, SdColumnTooltipPipe as ɵba, SdColumnBadgePipe as ɵbb, SdFilterColumnPipe as ɵbc, SdFilterExternalPipe as ɵbd, SdSelectionActionFilterPipe as ɵbe, SdSelectionVisiblePipe as ɵbf, SdSelectionDisablePipe as ɵbg, SdSelectionVisibleSelectAllPipe as ɵbh, SdCellViewPipe as ɵbi, SdGroupPipe as ɵbj, SdDesktopCellView as ɵc, SdDesktopCommand as ɵd, SdColumnInlineFilter as ɵe, SdGridFilter as ɵf, SdPopupFilter as ɵg, SdMaterialSubInformationDefDirective as ɵh, SdMaterialEmptyDataDefDirective as ɵi, SdMaterialCellDefDirective as ɵj, SdMaterialFooterDefDirective as ɵk, SdMaterialFilterDefDirective as ɵl, TABLE_CONFIG as ɵn, SdTableConfigurationService as ɵo, SdColumnValuesPipe as ɵp, SdTableFilterService as ɵq, SdPopupGridConfiguration as ɵr, SdGridConfigurationResultPipe as ɵs, SdColumnChildrenFilterPipe as ɵt, SdCommandFilterPipe as ɵu, SdCommandDisablePipe as ɵv, SdCommandIconPipe as ɵw, SdCommandTitlePipe as ɵx, SdColumnHtmlTemplatePipe as ɵy, SdColumnTransformPipe as ɵz };
|
|
2926
|
+
export { DEFAULT_TABLE_CONFIG, MatPaginatorIntlCro, SdFilterOperators, SdTable, SdTableModule, TABLE_CONFIG, SdGridQuickAction as ɵa, SdDesktopCell as ɵb, SdColumnTooltipPipe as ɵba, SdColumnBadgePipe as ɵbb, SdFilterColumnPipe as ɵbc, SdFilterExternalPipe as ɵbd, SdSelectionActionFilterPipe as ɵbe, SdSelectionVisiblePipe as ɵbf, SdSelectionDisablePipe as ɵbg, SdSelectionVisibleSelectAllPipe as ɵbh, SdCellViewPipe as ɵbi, SdGroupPipe as ɵbj, SdDesktopCellView as ɵc, SdDesktopCommand as ɵd, SdColumnInlineFilter as ɵe, SdGridFilter as ɵf, SdPopupFilter as ɵg, SdMaterialSubInformationDefDirective as ɵh, SdMaterialEmptyDataDefDirective as ɵi, SdMaterialCellDefDirective as ɵj, SdMaterialFooterDefDirective as ɵk, SdMaterialFilterDefDirective as ɵl, TABLE_CONFIG as ɵn, SdTableConfigurationService as ɵo, SdColumnValuesPipe as ɵp, SdTableFilterService as ɵq, SdPopupGridConfiguration as ɵr, SdGridConfigurationResultPipe as ɵs, SdColumnChildrenFilterPipe as ɵt, SdCommandFilterPipe as ɵu, SdCommandDisablePipe as ɵv, SdCommandIconPipe as ɵw, SdCommandTitlePipe as ɵx, SdColumnHtmlTemplatePipe as ɵy, SdColumnTransformPipe as ɵz };
|
|
2865
2927
|
//# sourceMappingURL=sd-angular-core-table.js.map
|