@sd-angular/core 1.3.147 → 1.3.148
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 +217 -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/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 +91 -29
- 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.148.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/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 }]
|