tnx-shared 5.3.294 → 5.3.296

package/bundles/tnx-shared.umd.js

@@ -595,9 +595,13 @@
         if (!Symbol.asyncIterator)
             throw new TypeError("Symbol.asyncIterator is not defined.");
         var g = generator.apply(thisArg, _arguments || []), i, q = [];
-        return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
-        function verb(n) { if (g[n])
-            i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
+        return i = {}, verb("next"), verb("throw"), verb("return", awaitReturn), i[Symbol.asyncIterator] = function () { return this; }, i;
+        function awaitReturn(f) { return function (v) { return Promise.resolve(v).then(f, reject); }; }
+        function verb(n, f) { if (g[n]) {
+            i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); };
+            if (f)
+                i[n] = f(i[n]);
+        } }
         function resume(n, v) { try {
             step(g[n](v));
         }
@@ -677,7 +681,7 @@
         if (value !== null && value !== void 0) {
             if (typeof value !== "object" && typeof value !== "function")
                 throw new TypeError("Object expected.");
-            var dispose;
+            var dispose, inner;
             if (async) {
                 if (!Symbol.asyncDispose)
                     throw new TypeError("Symbol.asyncDispose is not defined.");
@@ -687,9 +691,18 @@
                 if (!Symbol.dispose)
                     throw new TypeError("Symbol.dispose is not defined.");
                 dispose = value[Symbol.dispose];
+                if (async)
+                    inner = dispose;
             }
             if (typeof dispose !== "function")
                 throw new TypeError("Object not disposable.");
+            if (inner)
+                dispose = function () { try {
+                    inner.call(this);
+                }
+                catch (e) {
+                    return Promise.reject(e);
+                } };
             env.stack.push({ value: value, dispose: dispose, async: async });
         }
         else if (async) {
@@ -22317,8 +22330,13 @@
                                 var maxRowSpan = rowSpan.reduce(function (accumulator, element) {
                                     return (accumulator > element) ? accumulator : element;
                                 });
-                                for (var i = indexHasRowSpan; i < maxRowSpan + indexHasRowSpan; i++) {
-                                    _this.model.dataSource[i]._checked = true;
+                                if (rowData._indexInDataSource < maxRowSpan + indexHasRowSpan) {
+                                    for (var i = indexHasRowSpan; i < maxRowSpan + indexHasRowSpan; i++) {
+                                        _this.model.dataSource[i]._checked = true;
+                                    }
+                                }
+                                else {
+                                    _this.model.dataSource[rowData._indexInDataSource]._checked = true;
                                 }
                                 _this.model.selectedItems = _this.model.selectedItems.concat(_this.model.dataSource.slice(indexHasRowSpan, indexHasRowSpan + maxRowSpan));
                                 _this.model.selectedItem = _this.model.dataSource.slice(indexHasRowSpan, indexHasRowSpan + maxRowSpan);
@@ -23249,7 +23267,8 @@
             // body.
             var firstHead = arrHead[0];
             // const arrRowData = this.getArrRowDataByHtml(bodyEle, arrHead, exportAll);
-            var arrRowData = this.getArrRowDataByHtml(bodyEle, firstHead, exportAll);
+            var arrRowDataAll = this.getArrRowDataHasRowSpanByHtml(bodyEle, firstHead, exportAll);
+            var arrRowData = this.getArrRowDataHasRowSpanByRawData(arrRowDataAll);
             // export.
             arrHead = arrHead.map(function (x) { return x.map(function (z) { return z.value; }); });
             // const dataExport = [arrHead.map(i => i.value), ...arrRowData];
@@ -23257,6 +23276,34 @@
             var fileName = "Danh s\u00E1ch " + this.setting.objectName;
             this._exportService.objectToExcel(dataExport, fileName, (_a = arrHead === null || arrHead === void 0 ? void 0 : arrHead.length) !== null && _a !== void 0 ? _a : 1);
         };
+        ListComponentBase.prototype.getArrRowDataHasRowSpanByRawData = function (rawData) {
+            if (rawData === void 0) { rawData = []; }
+            var transformed = [];
+            for (var index = 0; index < rawData.length; index++) {
+                for (var i = 0; i < rawData[index].length; i++) {
+                    for (var j = 0; j < rawData[index][i].rowSpan; j++) {
+                        if (!transformed[index + j]) {
+                            transformed[index + j] = [];
+                        }
+                        if (j === 0) {
+                            this.getValueRow(transformed[index], i, rawData[index][i].value);
+                        }
+                        else {
+                            transformed[index + j][i] = '';
+                        }
+                    }
+                }
+            }
+            return transformed.map(function (row) { return row.map(function (cell) { return cell || ""; }); });
+        };
+        ListComponentBase.prototype.getValueRow = function (rowData, index, value) {
+            if (rowData[index] != null) {
+                this.getValueRow(rowData, index + 1, value);
+            }
+            else {
+                rowData[index] = value;
+            }
+        };
         ListComponentBase.prototype.headHtmlToString = function (arrHeadEle) {
             var result = '';
             arrHeadEle.forEach(function (element) {
@@ -23478,6 +23525,7 @@
             return result;
         };
         ListComponentBase.prototype.getArrRowDataHasRowSpanByHtml = function (bodyEle, arrHead, exportAll) {
+            var _this = this;
             if (exportAll === void 0) { exportAll = false; }
             var arrRow = exportAll ? bodyEle.querySelectorAll('tr') : bodyEle.querySelectorAll('tr.ui-state-highlight');
             if (!arrRow.length) {
@@ -23487,7 +23535,13 @@
             for (var i = 0; i < arrRow.length; i++) {
                 var row = arrRow[i];
                 var arrTd = row.querySelectorAll('td');
-                arrRowData.push(__spreadArray([], __read(arrTd)).filter(function (x) { return !x.className.includes('chkbox link-or-action cell-checkbox'); }).map(function (x) { return ({ value: x.innerText, rowSpan: x.rowSpan }); }));
+                arrRowData.push(__spreadArray([], __read(arrTd)).filter(function (x) { return !x.className.includes('chkbox link-or-action cell-checkbox'); }).map(function (x) {
+                    var value = x.innerText;
+                    if (value === '') {
+                        value = _this.getValueCheckboxFormat(x);
+                    }
+                    return { value: value, rowSpan: x.rowSpan };
+                }));
             }
             return arrRowData;
         };
@@ -26314,8 +26368,8 @@
     TreeTableComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'tn-tree-table',
-                    template: "<div #container class=\"custom-card card card-w-title tn-g-page-layout-1\">\n    <div class=\"ui-helper-clearfix tn-g-page-layout-1__header-area\">\n        <div *ngIf=\"searchCustom\" class=\"p-grid ui-fluid custom-p-col custom-search-area\">\n            <div class=\"p-col-12 main-container-search\">\n                <div class=\"p-grid main-container-search-inner\">\n                    <ng-container>\n                        <ng-container *ngTemplateOutlet=\"searchCustom; context: {$implicit: this}\"></ng-container>\n                    </ng-container>\n                </div>\n            </div>\n        </div>\n        <div class=\"p-grid ui-fluid custom-p-col page-title-area\">\n            <div class=\"main-title p-col-8\">\n                <h1 *ngIf=\"!hasTemplate('customTitle')\">\n                    {{setting.title != null ? setting.title : 'Danh s\u00E1ch ' + setting.objectName}}\n                </h1>\n\n                <ng-container *ngIf=\"hasTemplate('customTitle')\" [ngTemplateOutlet]=\"getTemplate('customTitle')\"\n                    [ngTemplateOutletContext]=\"{crudList: this}\">\n                </ng-container>\n            </div>\n            <div class=\"p-col-4\">\n                <paging-next-back-only [model]=\"model\" [setting]=\"setting\" (onChanged)=\"getData()\"\n                    (onChangeLimitPage)=\"savePageSize()\">\n                </paging-next-back-only>\n            </div>\n        </div>\n    </div>\n    <div class=\"p-grid crudListToolbar tn-g-page-layout-1__toolbar-area\">\n        <div class=\"p-col-7 button-group function-topbar\">\n            <ng-container [ngTemplateOutlet]=\"getTemplate('buttonBeforeToolbar')\"\n                [ngTemplateOutletContext]=\"{crudList: this}\"></ng-container>\n            <ng-container *ngIf=\"!hiddenAdd\" [ngTemplateOutlet]=\"buttonAdd\"></ng-container>\n            <ng-container *ngIf=\"setting.showExportSelectedItems\" [ngTemplateOutlet]=\"buttonExport\">\n            </ng-container>\n            <ng-container *ngIf=\"setting.showExportWordSelectedItems\" [ngTemplateOutlet]=\"buttonExportWord\">\n            </ng-container>\n            <ng-container *ngIf=\"!hiddenDelete\" [ngTemplateOutlet]=\"buttonDelete\">\n            </ng-container>\n            <button pButton pRipple type=\"button\" label=\"\u0110\u00E1nh l\u1EA1i m\u00E3 ph\u00E2n c\u1EA5p\" icon=\"pi pi-share-alt\"\n                class=\"p-button-text\" style=\"display: none;\" (click)=\"handleDanhMaPC($event)\"></button>\n            <ng-container [ngTemplateOutlet]=\"getTemplate('buttonAfterToolbar')\"\n                [ngTemplateOutletContext]=\"{crudList: this}\"></ng-container>\n        </div>\n        <div class=\"p-col-5 p-inputgroup advance-search-container\">\n            <ng-container *ngIf=\"!setting.hiddenAdvanceSearch\">\n                <advance-search #advanceSearch [parentSetting]=\"setting\" [searchInfo]=\"searchInfo\"\n                    [loading]=\"model.loading\" (onSearch)=\"handleSearchAdvs($event)\"\n                    (onInit)=\"handleInitAdvanceSearch($event)\">\n                </advance-search>\n            </ng-container>\n        </div>\n    </div>\n    <div class=\"tn-g-page-layout-1__table-area\">\n        <tn-custom-scrollbar [showScrollHorizontal]=\"true\" class=\"--has-border\">\n            <p-treeTable #treetable [value]=\"_dataSource\" [columns]=\"setting.cols\" styleClass=\"treeOrganization\">\n                <ng-template pTemplate=\"colgroup\" let-columns>\n                    <colgroup>\n                        <col *ngIf=\"!setting.hiddenCheckbox\" style=\"width: 50px\" />\n                        <col *ngIf=\"!setting.hiddenOrderColumn\" style=\"width: 50px\" />\n                        <ng-container *ngFor=\"let col of columns; let i = index\">\n                            <col *ngIf=\"col && col.visible && col.field!='function'\" [style.width]=\"col.width\" />\n                        </ng-container>\n                        <col *ngIf=\"!setting.hiddenFunctionColumn\"\n                            [style.width]=\"widthFunctionColumn || _widthFunctionColumn\" />\n                    </colgroup>\n                </ng-template>\n                <ng-template pTemplate=\"header\" let-columns>\n                    <tr>\n                        <th *ngIf=\"!setting.hiddenCheckbox\" class=\"chkbox\">\n                            <button type=\"button\" pButton pRipple icon=\"pi pi-refresh\"\n                                class=\"p-button-rounded p-button-text btnReload\" pTooltip=\"L\u00E0m m\u1EDBi d\u1EEF li\u1EC7u\"\n                                tooltipPosition=\"top\" [disabled]=\"model.loading\" (click)=\"getData()\"></button>\n                        </th>\n                        <th *ngIf=\"!setting.hiddenOrderColumn\" class=\"stt nopad center\"\n                            [class.sticky]=\"setting.stickyColumn\" (dblclick)=\"reload()\">\n                            {{ 'TT' |translate}}\n                            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n                        </th>\n                        <ng-container *ngFor=\"let col of columns; let i = index\">\n                            <th *ngIf=\"col && col.visible && col.field!='function'\" [ttSortableColumn]=\"col.field\"\n                                [className]=\"col.class\" [pTooltip]=\"col.fullLabel\" tooltipStyleClass=\"unset-width\"\n                                style=\"text-align: center;\">\n                                {{col.label}}\n                                <p-treeTableSortIcon [field]=\"col.field\"></p-treeTableSortIcon>\n                            </th>\n                        </ng-container>\n                        <th *ngIf=\"!setting.hiddenFunctionColumn\" style=\"text-align: center;\">\n                            Ch\u1EE9c n\u0103ng\n                        </th>\n                    </tr>\n                    <ng-container *ngTemplateOutlet=\"rowHeaderFilter; context: {columns: columns}\">\n                    </ng-container>\n                </ng-template>\n                <ng-template pTemplate=\"body\" let-rowNode let-rowData=\"rowData\" let-index=\"rowIndex\"\n                    let-columns=\"columns\">\n                    <tr [ttRow]=\"rowNode\" [class.generated-by-base]=\"rowData._GeneratedByBase\"\n                        [attr.rowIndex]=\"rowData[fieldIndexInDataSource]\" [class.ui-state-highlight]=\"rowData._checked\"\n                        [pTooltip]=\"rowData.tooltip\" tooltipPosition=\"top\">\n                        <td *ngIf=\"!setting.hiddenCheckbox\" class=\"chkbox link-or-action cell-checkbox\">\n                            <p-checkbox [(ngModel)]=\"rowData._checked\" binary=\"true\"\n                                (onChange)=\"handleCheckRowData(rowData)\">\n                            </p-checkbox>\n                        </td>\n                        <td class=\"chkbox link-or-action cell-checkbox\">{{rowData[fieldOrder]}}</td>\n                        <ng-container *ngFor=\"let col of columns; let i = index\">\n                            <ng-container\n                                *ngTemplateOutlet=\"contentTd; context: {$implicit: rowData, rowNode: rowNode, col: col, index: index, i: i}\">\n                            </ng-container>\n                        </ng-container>\n                        <td *ngIf=\"!setting.hiddenFunctionColumn\" style=\"text-align: center;\">\n                            <div *ngIf=\"hasTemplate('function')\" class=\"p-toolbar-group-center button-group\">\n                                <ng-container [ngTemplateOutlet]=\"getTemplate('function')\"\n                                    [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"></ng-container>\n                                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n                            </div>\n                            <div *ngIf=\"!hasTemplate('function')\" class=\"p-toolbar-group-center button-group\">\n                                <ng-container [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"\n                                    [ngTemplateOutlet]=\"getTemplate('buttonBefore')\"></ng-container>\n                                <button *ngIf=\"!rowData.hiddenEdit\" type=\"button\" pButton pRipple\n                                    [pTooltip]=\"'FORM.EDIT' | translate\" tooltipPosition=\"top\"\n                                    [disabled]=\"disableEdit(rowData)\"\n                                    class=\"p-button-rounded p-button-text p-button-info link-or-action\"\n                                    icon=\"pi pi-pencil\" (click)=\"edit(rowData)\"></button>\n                                <button *ngIf=\"!rowData.hiddenDelete\" type=\"button\" pButton pRipple\n                                    [disabled]=\"disableDelete(rowData)\" [pTooltip]=\"'FORM.DELETE' | translate\"\n                                    tooltipPosition=\"top\"\n                                    class=\"p-button-rounded p-button-text p-button-danger link-or-action\"\n                                    icon=\"pi pi-trash\" (click)=\"delete(rowData)\"></button>\n                                <!-- <button *ngIf=\"this.menuButtons\" type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\n                                    class=\"link-or-action p-button-text p-button-info p-button-rounded\"\n                                    pTooltip=\"Ch\u1EE9c n\u0103ng kh\u00E1c\" tooltipPosition=\"top\"\n                                    (click)=\"showContextMenu($event, rowData)\"></button> -->\n                            </div>\n                        </td>\n                    </tr>\n                    <after-view-checked *ngIf=\"rowData._index == _rawDataSource.length - 1\" style=\"display: none;\"\n                        [renderKey]=\"dataSource\" (loaded)=\"handleTableRendered()\">\n                    </after-view-checked>\n                </ng-template>\n            </p-treeTable>\n            <div class=\"row-bottom-sticky\"></div>\n        </tn-custom-scrollbar>\n    </div>\n</div>\n<ng-template #buttonAdd>\n    <span [appAuthorize]=\"serviceCode\" [permission]=\"authorizePaths[commonConst.ADD]\"\n        [enableAuthorize]=\"buttonApplyAuthorize[commonConst.ADD]\">\n        <button type=\"button\" pButton pRipple label=\"Th\u00EAm m\u1EDBi\" icon=\"pi pi-plus\" class=\"p-button-text\"\n            [disabled]=\"!model.baseReady\" (click)=\"add()\"></button>\n    </span>\n</ng-template>\n<ng-template #buttonDelete>\n    <button *ngIf=\"!hiddenDelete && model.selectedItems.length > 0 && !disableMultipleDelete()\"\n        [appAuthorize]=\"serviceCode\" [permission]=\"authorizePaths[commonConst.DELETE_MULTIPLE]\"\n        [enableAuthorize]=\"buttonApplyAuthorize[commonConst.DELETE_MULTIPLE]\" type=\"button\" pButton pRipple\n        [label]=\"'X\u00F3a ' + (model.selectedItems.length) | translate\" icon=\"pi pi-trash\"\n        class=\"p-button-text p-button-danger\" (click)=\"deleteMutiple()\"></button>\n</ng-template>\n<ng-template #contentTd let-rowData let-rowNode=\"rowNode\" let-col=\"col\" let-index=\"index\" let-i=\"i\"\n    let-expanded=\"expanded\">\n    <td *ngIf=\"col && col.visible && col.field != 'function' && (!rowData.hidden || !rowData.hidden[col.field])\"\n        [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[col.field]\"\n        [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[col.field]\" [ngStyle]=\"col.extendData.style\"\n        [class]=\"col.cellClass\" [class.first-td]=\"i == 0\">\n        <tn-treeTableToggler *ngIf=\"col.colHasToggleIcon\" [rowNode]=\"rowNode\"></tn-treeTableToggler>\n        <span *ngIf=\"col.pipe\">\n            <!-- <span class=\"p-column-title\" [pTooltip]=\"col.fullLabel\" [escape]=\"false\"\n                tooltipPosition=\"top\">{{col.label}}</span> -->\n            {{rowData['pipe__' + col.field]}}\n        </span>\n        <span *ngIf=\"!col.pipe\">\n            <!-- <span class=\"p-column-title\" [pTooltip]=\"col.fullLabel\" [escape]=\"false\"\n                tooltipPosition=\"top\">{{col.label}}</span> -->\n            <span *ngIf=\"setting.showEditLink && col.showEditLink\" [pTooltip]=\"config.tooltipView\" tooltipPosition=\"top\"\n                class=\"link-or-action\">\n                <a href=\"javascript:;\" (click)=\"view(rowData)\" [pTooltip]=\"config.tooltipView\" tooltipPosition=\"top\">\n                    <ng-container [ngTemplateOutlet]=\"contentCell\"\n                        [ngTemplateOutletContext]=\"getContextCell(rowData, index, col, expanded, this)\">\n                    </ng-container>\n                </a>\n            </span>\n            <span *ngIf=\"!setting.showEditLink || !col.showEditLink\">\n                <ng-container [ngTemplateOutlet]=\"contentCell\"\n                    [ngTemplateOutletContext]=\"getContextCell(rowData, index, col, expanded, this)\">\n                </ng-container>\n            </span>\n        </span>\n        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n    </td>\n</ng-template>\n<ng-template #contentCell let-col=\"col\" let-rowData=\"rowData\" let-rowIndex=\"rowIndex\" let-field=\"field\"\n    let-expanded=\"expanded\">\n    <ng-container *ngIf=\"col.template\">\n        <ng-container [ngTemplateOutlet]=\"col.template\"\n            [ngTemplateOutletContext]=\"getContextCell(rowData, rowIndex, col, expanded, this)\">\n        </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"!col.template\">\n        <ng-container [ngSwitch]=\"col.dataType\">\n            <span *ngSwitchCase=\"'color'\" style=\"display:block;text-align:center;\">\n                <div [pTooltip]=\"rowData[field]\" tooltipPosition=\"top\" [ngStyle]=\"{'background-color':rowData[field]}\"\n                    style=\"width:30px;height:30px;margin:0 auto;\"></div>\n            </span>\n            <span *ngSwitchCase=\"'icon'\" style=\"display:block;text-align:center;\">\n                <i [pTooltip]=\"rowData[field]\" tooltipPosition=\"top\" style=\"text-align: center;\"\n                    [ngClass]=\"rowData[field]\"></i>\n            </span>\n            <span *ngSwitchCase=\"'date'\" [pTooltip]=\"rowData[field] | date:'dd/MM/yyyy'\" tooltipPosition=\"top\">\n                {{_crudService.renderDate(rowData[field], col.format)}}\n            </span>\n            <span *ngSwitchCase=\"'datetime'\" [pTooltip]=\"rowData[field] | date:'dd/MM/yyyy HH:mm'\"\n                tooltipPosition=\"top\">\n                {{_crudService.renderDateTime(rowData[field], col.format)}}\n            </span>\n            <span *ngSwitchCase=\"'int'\">\n                {{rowData[field]}}\n            </span>\n            <span *ngSwitchCase=\"'decimal'\">\n                {{rowData[field]}}\n            </span>\n            <span *ngSwitchCase=\"'boolean'\">\n                <p-checkbox class=\"boolean-data-type\" [(ngModel)]=\"rowData[field]\" binary=\"true\"\n                    [disabled]=\"col.disableCheckBox\">\n                </p-checkbox>\n            </span>\n            <span *ngSwitchCase=\"'html'\">\n                <div *ngIf=\"rowData[field]==null?'':rowData[field]\" [innerHTML]=\"rowData[field] | safeHtml\"></div>\n            </span>\n            <span *ngSwitchCase=\"'metadataStatus'\">\n                <span *ngIf=\"rowData['rejectReason']\" class=\"label-danger\" [pTooltip]=\"rowData['rejectReason']\"\n                    tooltipStyleClass=\"unset-width\" [escape]=\"false\" tooltipPosition=\"top\">T\u1EEB ch\u1ED1i</span>\n                <span *ngIf=\"rowData[field] == '0' && !rowData['rejectReason']\" class=\"label-secondary\">Ch\u01B0a\n                    duy\u1EC7t</span>\n                <span *ngIf=\"rowData[field] == '1' && !rowData['rejectReason']\" class=\"label-warning\">Ch\u1EDD duy\u1EC7t</span>\n                <span *ngIf=\"rowData[field] == '2'\" class=\"label-primary\">\u0110\u00E3 duy\u1EC7t</span>\n            </span>\n            <ng-container *ngSwitchCase=\"'string'\">\n                <ng-container *ngTemplateOutlet=\"contentCellString; context: {$implicit: rowData, field: col.field}\">\n                </ng-container>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"null\">\n                <ng-container *ngTemplateOutlet=\"contentCellString; context: {$implicit: rowData, field: col.field}\">\n                </ng-container>\n            </ng-container>\n            <ng-container *ngSwitchDefault>\n                <ng-container [ngTemplateOutlet]=\"getComponentByType(col.dataType)\"\n                    [ngTemplateOutletContext]=\"getContextCell(rowData, rowIndex, col, expanded, this)\">\n                </ng-container>\n            </ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n<ng-template #contentCellString let-rowData let-field=\"field\">\n    <span>\n        <!-- __sv: Short Value -->\n        <ng-container *ngIf=\"rowData[field + '__sv']\">\n            <ng-container *ngIf=\"!rowData[field + '__showFull']\">\n                {{rowData[field + '__sv']}}\n                <span class=\"toggle-showfull\" (click)=\"toggleShowFull(rowData, field)\" pTooltip=\"B\u1EA5m \u0111\u1EC3 xem th\u00EAm\"\n                    tooltipPosition=\"top\">[...]</span>\n            </ng-container>\n            <ng-container *ngIf=\"rowData[field + '__showFull']\">\n                {{rowData[field]}}\n                <span class=\"toggle-showfull\" (click)=\"toggleShowFull(rowData, field)\">Thu g\u1ECDn</span>\n            </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!rowData[field + '__sv']\">\n            {{rowData[field]}}\n        </ng-container>\n    </span>\n</ng-template>\n<ng-template #containerSticky>\n    <span class=\"fix-sticky top\"></span>\n    <span class=\"fix-sticky right\"></span>\n    <!-- <span class=\"fix-sticky bottom\"></span> -->\n    <span class=\"fix-sticky left\"></span>\n</ng-template>\n<ng-template #rowHeaderFilter let-columns=\"columns\">\n    <tr class=\"filter-row\" *ngIf=\"!setting.hiddenFilterRow\">\n        <th *ngIf=\"!setting.hiddenCheckbox\" class=\"chkbox nopad center\" [class.sticky]=\"setting.stickyColumn\"\n            [class.tricheckbox-custom-false]=\"checkedAll === false\">\n            <p-triStateCheckbox [(ngModel)]=\"checkedAll\" binary=\"true\" (onChange)=\"handleCheckAll()\">\n            </p-triStateCheckbox>\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n        </th>\n        <th class=\"chkbox nopad center\" [class.sticky]=\"setting.stickyColumn\">\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n        </th>\n        <ng-container *ngFor=\"let col of columns; let i = index\">\n            <th *ngIf=\"col.visible && col.field != 'function'\" class=\"cell-header-filter center\">\n                <ng-container *ngIf=\"col.allowFilter\">\n                    <ng-container *ngIf=\"col.templateFilter\">\n                        <ng-container [ngTemplateOutlet]=\"col.templateFilter\"\n                            [ngTemplateOutletContext]=\"{col: col, filterData: filterData, onSearch: onSearch, onShowFilterDropdownPanel: onShowFilterDropdownPanel, onHideFilterDropdownPanel: onHideFilterDropdownPanel}\">\n                        </ng-container>\n                    </ng-container>\n                    <ng-container *ngIf=\"!col.templateFilter\" [ngSwitch]=\"col.controlType\">\n                        <ng-container *ngSwitchCase=\"'dropdown'\">\n                            <ng-container [ngTemplateOutlet]=\"filterDropdown\"\n                                [ngTemplateOutletContext]=\"{col: col.rawColumn}\">\n                            </ng-container>\n                        </ng-container>\n                        <ng-container *ngSwitchCase=\"'number'\">\n                            <ng-container [ngTemplateOutlet]=\"filterNumber\" [ngTemplateOutletContext]=\"{col: col}\">\n                            </ng-container>\n                        </ng-container>\n                        <ng-container *ngSwitchCase=\"'date'\">\n                            <ng-container [ngTemplateOutlet]=\"filterDate\" [ngTemplateOutletContext]=\"{col: col}\">\n                            </ng-container>\n                        </ng-container>\n                        <ng-container *ngSwitchCase=\"'datetime'\">\n                            <ng-container [ngTemplateOutlet]=\"filterDate\" [ngTemplateOutletContext]=\"{col: col}\">\n                            </ng-container>\n                        </ng-container>\n                        <ng-container *ngSwitchDefault>\n                            <ng-container [ngSwitch]=\"col.dataType\">\n                                <ng-container *ngSwitchCase=\"'int'\">\n                                    <ng-container [ngTemplateOutlet]=\"filterNumber\"\n                                        [ngTemplateOutletContext]=\"{col: col}\">\n                                    </ng-container>\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"'decimal'\">\n                                    <ng-container [ngTemplateOutlet]=\"filterNumber\"\n                                        [ngTemplateOutletContext]=\"{col: col}\">\n                                    </ng-container>\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"'date'\">\n                                    <ng-container [ngTemplateOutlet]=\"filterDate\"\n                                        [ngTemplateOutletContext]=\"{col: col}\">\n                                    </ng-container>\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"'datetime'\">\n                                    <ng-container [ngTemplateOutlet]=\"filterDate\"\n                                        [ngTemplateOutletContext]=\"{col: col}\">\n                                    </ng-container>\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"'boolean'\">\n                                    <ng-container [ngTemplateOutlet]=\"filterBoolean\"\n                                        [ngTemplateOutletContext]=\"{col: col}\">\n                                    </ng-container>\n                                </ng-container>\n                                <ng-container *ngSwitchDefault>\n                                    <ng-container [ngTemplateOutlet]=\"filterText\"\n                                        [ngTemplateOutletContext]=\"{col: col}\">\n                                    </ng-container>\n                                </ng-container>\n                            </ng-container>\n                        </ng-container>\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n            </th>\n        </ng-container>\n        <th *ngIf=\"!setting.hiddenFunctionColumn\" class=\"center setting-cell column-function\"\n            [class.sticky]=\"setting.stickyColumn\">\n            <!-- <button *ngIf=\"!setting.hiddenSetting\" type=\"button\" pButton pRipple icon=\"pi pi-cog\"\n                class=\"p-button-rounded p-button-text\" pTooltip=\"C\u1EA5u h\u00ECnh hi\u1EC3n th\u1ECB\" tooltipPosition=\"top\"\n                (click)=\"showSettings()\"></button>\n            <button *ngIf=\"!setting.hiddenSettingPermission\" type=\"button\" pButton pRipple icon=\"pi pi-users\"\n                class=\"p-button-rounded p-button-text\" pTooltip=\"Ph\u00E2n quy\u1EC1n d\u1EEF li\u1EC7u\" tooltipPosition=\"left\"\n                [disabled]=\"checkPermissionToUseButton(BUTTON_PHAN_QUYEN)\" (click)=\"showSettingsPermission()\"></button>\n            <button *ngIf=\"!setting.hiddenSettingWorkflow\" type=\"button\" pButton pRipple icon=\"pi pi-sitemap\"\n                class=\"p-button-rounded p-button-text\" pTooltip=\"C\u1EA5u h\u00ECnh quy tr\u00ECnh\" tooltipPosition=\"left\"\n                [disabled]=\"checkPermissionToUseButton(BUTTON_CAU_HINH_QUY_TRINH)\"\n                (click)=\"showSettingsWorkflowNew()\"></button> -->\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n        </th>\n    </tr>\n</ng-template>\n<ng-template #filterDropdown let-col=\"col\">\n    <div #filterBox style=\"width: 100%; border-radius: 4px;\">\n        <dropdown *ngIf=\"col && filterSchema.dropdown[col.field]\" [control]=\"filterSchema.dropdown[col.field]\"\n            [dataSource]=\"filterSchema.dropdown[col.field].dataSource\" [(value)]=\"filterData[col.field]\"\n            (onHideSmartEvent)=\"onSearch()\" (onShow)=\"onShowFilterDropdownPanel($event)\"\n            (onHide)=\"onHideFilterDropdownPanel($event)\" (mousedown)=\"initFilterBoxFocus(filterBox)\"></dropdown>\n    </div>\n</ng-template>\n<ng-template #filterText let-col=\"col\">\n    <div #filterBox class=\"text-filter filter-box\" tabindex=\"-1\" (mousedown)=\"initFilterBoxFocus(filterBox)\">\n        <div tabindex=\"-1\">\n            <input pInputText type=\"text\" class=\"input-search\" [placeholder]=\"col.label\"\n                [(ngModel)]=\"filterData[col.field]\" (change)=\"onSearch()\"\n                (keyup.esc)=\"onClearSearch(filterBox, col.field)\">\n        </div>\n        <span [ngClass]=\"{'action-clear': true, 'dirty': filterData[col.field] != null && filterData[col.field] !== ''}\"\n            [pTooltip]=\"'B\u1ECF filter'\" tooltipPosition=\"top\" (mousedown)=\"onClearSearch(filterBox, col.field)\"\n            tabindex=\"-1\"><i class=\"pi pi-filter-slash\"></i></span>\n        <after-view-checked style=\"display: none;\" (loaded)=\"initFilterBoxFocus(filterBox)\">\n        </after-view-checked>\n    </div>\n</ng-template>\n<ng-template #filterNumber let-col=\"col\">\n    <div #filterBox class=\"number-picker-range filter-box\" tabindex=\"-1\" (mousedown)=\"initFilterBoxFocus(filterBox)\">\n        <div tabindex=\"-1\">\n            <tn-number-picker-range #numberRange [maskType]=\"col.dataType\" [(ngModel)]=\"filterData[col.field]\"\n                [min]=\"col.min\" [max]=\"col.max\" (change)=\"onSearch()\">\n            </tn-number-picker-range>\n        </div>\n        <span\n            [ngClass]=\"{'action-clear': true, 'dirty': filterData[col.field] && ((filterData[col.field][0] != null && filterData[col.field][0] !== '') || (filterData[col.field][1] != null && filterData[col.field][1] !== ''))}\"\n            [pTooltip]=\"'B\u1ECF filter'\" tooltipPosition=\"top\" (mousedown)=\"onClearNumberSearch(filterBox, numberRange)\"\n            tabindex=\"-1\">\n            <i class=\"pi pi-filter-slash\"></i></span>\n        <after-view-checked style=\"display: none;\" (loaded)=\"initFilterBoxFocus(filterBox)\">\n        </after-view-checked>\n    </div>\n</ng-template>\n<ng-template #filterDate let-col=\"col\">\n    <div #filterBox class=\"date-picker-range filter-box\" tabindex=\"-1\" (mousedown)=\"initFilterBoxFocus(filterBox)\">\n        <div tabindex=\"-1\">\n            <tn-datetime-picker-range #dateRange [control]=\"filterSchema.dateRange\"\n                (onChanged)=\"onChangeDateTime($event, col.field)\">\n            </tn-datetime-picker-range>\n        </div>\n        <span\n            [ngClass]=\"{'action-clear': true, 'dirty': filterData[col.field] && ((filterData[col.field][0] != null && filterData[col.field][0] !== '') || (filterData[col.field][1] != null && filterData[col.field][1] !== ''))}\"\n            [pTooltip]=\"'B\u1ECF filter'\" tooltipPosition=\"top\"\n            (mousedown)=\"onClearDateSearch(filterBox, dateRange, col.field)\" tabindex=\"-1\"><i\n                class=\"pi pi-filter-slash\"></i></span>\n        <after-view-checked style=\"display: none;\" (loaded)=\"initFilterBoxFocus(filterBox)\">\n        </after-view-checked>\n    </div>\n</ng-template>\n<ng-template #filterBoolean let-col=\"col\">\n    <div class=\"filter-boolean-box\">\n        <p-selectButton\n            [options]=\"[{value: true, label: 'C\u00F3', icon: 'pi pi-check'}, {value: false, label: 'Kh\u00F4ng', icon: 'pi pi-times'}]\"\n            [multiple]=\"true\" [(ngModel)]=\"filterData[col.field]\" (onChange)=\"onChangeBoolean($event, col.field)\">\n            <ng-template let-item>\n                <i style=\"padding: 3px 0;\" [class]=\"item.icon\"></i>\n            </ng-template>\n        </p-selectButton>\n    </div>\n</ng-template>\n<ng-template #buttonExport>\n    <button *ngIf=\"model.selectedItems.length > 0\" [appAuthorize]=\"serviceCode\"\n        [permission]=\"authorizePaths[commonConst.EXPORT_EXCEL]\"\n        [enableAuthorize]=\"buttonApplyAuthorize[commonConst.EXPORT_EXCEL]\" type=\"button\" pButton pRipple\n        label=\"Xu\u1EA5t c\u00E1c m\u1EE5c \u0111\u00E3 ch\u1ECDn ({{model.selectedItems.length}})\" icon=\"fas fa-file-excel\"\n        class=\"p-button-text p-button-success\" (click)=\"xuatCacMucDaChon(true)\"></button>\n</ng-template>\n<ng-template #buttonExportWord>\n    <button *ngIf=\"model.selectedItems.length > 0\" [appAuthorize]=\"serviceCode\"\n        [permission]=\"authorizePaths[commonConst.EXPORT_EXCEL]\"\n        [enableAuthorize]=\"buttonApplyAuthorize[commonConst.EXPORT_EXCEL]\" type=\"button\" pButton pRipple\n        label=\"In c\u00E1c m\u1EE5c \u0111\u00E3 ch\u1ECDn ({{model.selectedItems.length}})\" icon=\"fas fa-file-word\"\n        class=\"p-button-text p-button-success\" (click)=\"printByReadingHtml(true)\"></button>\n</ng-template>",
-                    styles: [".filter-row>th:not(.sticky):not(.chkbox){padding:3px!important}.advance-search-container{display:flex;justify-content:flex-end}::ng-deep tn-tree-table advance-search{display:block;flex:1;max-width:400px}::ng-deep tn-tree-table .ps__rail-x,::ng-deep tn-tree-table .ps__rail-y{z-index:5}::ng-deep tn-tree-table .p-treetable .p-treetable-thead>tr>th.cell-fixed-filter{z-index:999}::ng-deep tn-tree-table .p-treetable .p-treetable-thead>tr>th.cell-fixed-filter .fixed-filter{z-index:10;position:fixed;min-width:200px}::ng-deep tn-tree-table .p-treetable .p-treetable-thead>tr>th .container-icon-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}::ng-deep tn-tree-table tr.generated-by-base td.chkbox{background:#e9ecef}::ng-deep tn-tree-table .cell-header-filter{position:relative}::ng-deep tn-tree-table .cell-header-filter .tn-dropdown{height:32px}::ng-deep tn-tree-table .cell-header-filter tn-mask .p-inputtext{width:100%}::ng-deep tn-tree-table .cell-header-filter .filter-box{display:flex;min-width:0;background-color:#fff;border-radius:3px}::ng-deep tn-tree-table .cell-header-filter .filter-box>div{flex:1;border:1px solid #ced4da;border-right:none;border-radius:3px 0 0 3px;outline:none;overflow:hidden}::ng-deep tn-tree-table .cell-header-filter .filter-box>span{cursor:pointer;min-width:unset;flex-basis:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;background:#f5f6f8;color:#6c757d;border:1px solid #ced4da;outline:none}::ng-deep tn-tree-table .cell-header-filter .filter-box>span.action-clear{border-radius:0 3px 3px 0}::ng-deep tn-tree-table .cell-header-filter .filter-box>span.action-clear.dirty{color:#008eff}::ng-deep tn-tree-table .cell-header-filter .filter-box input{padding-left:5px;padding-right:5px;border:none;box-shadow:none!important}::ng-deep tn-tree-table .cell-header-filter .filter-box:not(.no-transition){transition:min-width .1s}::ng-deep tn-tree-table .cell-header-filter .filter-box.boolean-filter>div{flex:0 0 109px;width:109px}::ng-deep tn-tree-table .cell-header-filter .p-multiselect-label.p-placeholder{padding-left:.5rem;padding-right:.5rem}::ng-deep tn-tree-table .cell-header-filter.focus-within,::ng-deep tn-tree-table .cell-header-filter:focus-within{z-index:10!important}::ng-deep tn-tree-table .cell-header-filter.focus-within .filter-boolean-box .p-button,::ng-deep tn-tree-table .cell-header-filter:focus-within .filter-boolean-box .p-button{z-index:10}::ng-deep tn-tree-table .cell-header-filter.focus-within .filter-box>div,::ng-deep tn-tree-table .cell-header-filter:focus-within .filter-box>div{box-shadow:0 0 0 .2rem #a6d5fa;border-color:#2196f3;z-index:0}::ng-deep tn-tree-table .cell-header-filter.focus-within .short-filter-box,::ng-deep tn-tree-table .cell-header-filter:focus-within .short-filter-box{position:absolute;top:calc(50% - 16px);min-width:250px;z-index:2;box-shadow:5px 0 15px 1px rgba(0,0,0,.27058823529411763)}::ng-deep tn-tree-table .cell-header-filter.focus-within .short-filter-box>div,::ng-deep tn-tree-table .cell-header-filter:focus-within .short-filter-box>div{flex:1;box-shadow:0 0 0 .2rem #a6d5fa;border-color:#2196f3;z-index:0}::ng-deep tn-tree-table .cell-header-filter.focus-within .short-filter-box>span.action-clear,::ng-deep tn-tree-table .cell-header-filter:focus-within .short-filter-box>span.action-clear{display:flex}::ng-deep tn-tree-table .cell-header-filter.focus-within .short-filter-box.boolean-filter,::ng-deep tn-tree-table .cell-header-filter:focus-within .short-filter-box.boolean-filter{min-width:140px}::ng-deep tn-tree-table .cell-header-filter.focus-within .short-filter-box.boolean-filter>div,::ng-deep tn-tree-table .cell-header-filter:focus-within .short-filter-box.boolean-filter>div{flex:0 0 109px;width:109px}::ng-deep tn-tree-table .cell-header-filter.focus-within:nth-last-child(2) .short-filter-box,::ng-deep tn-tree-table .cell-header-filter:focus-within:nth-last-child(2) .short-filter-box{left:50%;transform:translateX(-50%)}::ng-deep tn-tree-table .cell-header-filter:last-child .filter-box{right:3px}::ng-deep tn-tree-table .table-border-line{position:absolute;z-index:5;background-color:#eee}::ng-deep tn-tree-table .table-border-line.--left,::ng-deep tn-tree-table .table-border-line.--right{top:0;bottom:0;width:1px}::ng-deep tn-tree-table .table-border-line.--bottom,::ng-deep tn-tree-table .table-border-line.--top{left:0;right:0;height:1px}::ng-deep tn-tree-table .table-border-line.--left{left:0}::ng-deep tn-tree-table .table-border-line.--right{right:0}::ng-deep tn-tree-table .table-border-line.--top{top:0}::ng-deep tn-tree-table .table-border-line.--bottom{bottom:0}::ng-deep tn-tree-table .filter-boolean-box{text-align:center}::ng-deep tn-tree-table .filter-boolean-box .p-selectbutton{white-space:nowrap}::ng-deep tn-tree-table .custom-search-area crud-form{width:100%}::ng-deep tn-tree-table>p-contextmenu{display:none}"]
+                    template: "<div #container class=\"custom-card card card-w-title tn-g-page-layout-1\">\n    <div class=\"ui-helper-clearfix tn-g-page-layout-1__header-area\">\n        <div *ngIf=\"searchCustom\" class=\"p-grid ui-fluid custom-p-col custom-search-area\">\n            <div class=\"p-col-12 main-container-search\">\n                <div class=\"p-grid main-container-search-inner\">\n                    <ng-container>\n                        <ng-container *ngTemplateOutlet=\"searchCustom; context: {$implicit: this}\"></ng-container>\n                    </ng-container>\n                </div>\n            </div>\n        </div>\n        <div class=\"p-grid ui-fluid custom-p-col page-title-area\">\n            <div class=\"main-title p-col-8\">\n                <h1 *ngIf=\"!hasTemplate('customTitle')\">\n                    {{setting.title != null ? setting.title : 'Danh s\u00E1ch ' + setting.objectName}}\n                </h1>\n\n                <ng-container *ngIf=\"hasTemplate('customTitle')\" [ngTemplateOutlet]=\"getTemplate('customTitle')\"\n                    [ngTemplateOutletContext]=\"{crudList: this}\">\n                </ng-container>\n            </div>\n            <div class=\"p-col-4\">\n                <paging-next-back-only [model]=\"model\" [setting]=\"setting\" (onChanged)=\"getData()\"\n                    (onChangeLimitPage)=\"savePageSize()\">\n                </paging-next-back-only>\n            </div>\n        </div>\n    </div>\n    <div class=\"p-grid crudListToolbar tn-g-page-layout-1__toolbar-area\">\n        <div class=\"p-col-7 button-group function-topbar\">\n            <ng-container [ngTemplateOutlet]=\"getTemplate('buttonBeforeToolbar')\"\n                [ngTemplateOutletContext]=\"{crudList: this}\"></ng-container>\n            <ng-container *ngIf=\"!hiddenAdd\" [ngTemplateOutlet]=\"buttonAdd\"></ng-container>\n            <ng-container *ngIf=\"setting.showExportSelectedItems\" [ngTemplateOutlet]=\"buttonExport\">\n            </ng-container>\n            <ng-container *ngIf=\"setting.showExportWordSelectedItems\" [ngTemplateOutlet]=\"buttonExportWord\">\n            </ng-container>\n            <ng-container *ngIf=\"!hiddenDelete\" [ngTemplateOutlet]=\"buttonDelete\">\n            </ng-container>\n            <button pButton pRipple type=\"button\" label=\"\u0110\u00E1nh l\u1EA1i m\u00E3 ph\u00E2n c\u1EA5p\" icon=\"pi pi-share-alt\"\n                class=\"p-button-text\" style=\"display: none;\" (click)=\"handleDanhMaPC($event)\"></button>\n            <ng-container [ngTemplateOutlet]=\"getTemplate('buttonAfterToolbar')\"\n                [ngTemplateOutletContext]=\"{crudList: this}\"></ng-container>\n        </div>\n        <div class=\"p-col-5 p-inputgroup advance-search-container\">\n            <ng-container *ngIf=\"!setting.hiddenAdvanceSearch\">\n                <advance-search #advanceSearch [parentSetting]=\"setting\" [searchInfo]=\"searchInfo\"\n                    [loading]=\"model.loading\" (onSearch)=\"handleSearchAdvs($event)\"\n                    (onInit)=\"handleInitAdvanceSearch($event)\">\n                </advance-search>\n            </ng-container>\n        </div>\n    </div>\n    <div class=\"tn-g-page-layout-1__table-area\">\n        <tn-custom-scrollbar [showScrollHorizontal]=\"true\" class=\"--has-border\">\n            <p-treeTable #treetable [value]=\"_dataSource\" [columns]=\"setting.cols\" styleClass=\"treeOrganization\">\n                <ng-template pTemplate=\"colgroup\" let-columns>\n                    <colgroup>\n                        <col *ngIf=\"!setting.hiddenCheckbox\" style=\"width: 50px\" />\n                        <col *ngIf=\"!setting.hiddenOrderColumn\" style=\"width: 50px\" />\n                        <ng-container *ngFor=\"let col of columns; let i = index\">\n                            <col *ngIf=\"col && col.visible && col.field!='function'\" [style.width]=\"col.width\" />\n                        </ng-container>\n                        <col *ngIf=\"!setting.hiddenFunctionColumn\"\n                            [style.width]=\"widthFunctionColumn || _widthFunctionColumn\" />\n                    </colgroup>\n                </ng-template>\n                <ng-template pTemplate=\"header\" let-columns>\n                    <tr>\n                        <th *ngIf=\"!setting.hiddenCheckbox\" class=\"chkbox\">\n                            <button type=\"button\" pButton pRipple icon=\"pi pi-refresh\"\n                                class=\"p-button-rounded p-button-text btnReload\" pTooltip=\"L\u00E0m m\u1EDBi d\u1EEF li\u1EC7u\"\n                                tooltipPosition=\"top\" [disabled]=\"model.loading\" (click)=\"getData()\"></button>\n                        </th>\n                        <th *ngIf=\"!setting.hiddenOrderColumn\" class=\"stt nopad center\"\n                            [class.sticky]=\"setting.stickyColumn\" (dblclick)=\"reload()\">\n                            {{ 'TT' |translate}}\n                            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n                        </th>\n                        <ng-container *ngFor=\"let col of columns; let i = index\">\n                            <th *ngIf=\"col && col.visible && col.field!='function'\" [ttSortableColumn]=\"col.field\"\n                                [className]=\"col.class\" [pTooltip]=\"col.fullLabel\" tooltipStyleClass=\"unset-width\"\n                                style=\"text-align: center;\">\n                                {{col.label}}\n                                <p-treeTableSortIcon [field]=\"col.field\"></p-treeTableSortIcon>\n                            </th>\n                        </ng-container>\n                        <th *ngIf=\"!setting.hiddenFunctionColumn\" style=\"text-align: center;\">\n                            Ch\u1EE9c n\u0103ng\n                        </th>\n                    </tr>\n                    <ng-container *ngTemplateOutlet=\"rowHeaderFilter; context: {columns: columns}\">\n                    </ng-container>\n                </ng-template>\n                <ng-template pTemplate=\"body\" let-rowNode let-rowData=\"rowData\" let-index=\"rowIndex\"\n                    let-columns=\"columns\">\n                    <tr [ttRow]=\"rowNode\" [class.generated-by-base]=\"rowData._GeneratedByBase\"\n                        [attr.rowIndex]=\"rowData[fieldIndexInDataSource]\" [class.ui-state-highlight]=\"rowData._checked\"\n                        [pTooltip]=\"rowData.tooltip\" tooltipPosition=\"top\" (click)=\"handleSelectRow($event, rowData)\">\n                        <td *ngIf=\"!setting.hiddenCheckbox\" class=\"chkbox link-or-action cell-checkbox\">\n                            <p-checkbox [(ngModel)]=\"rowData._checked\" binary=\"true\"\n                                (onChange)=\"handleCheckRowData(rowData)\">\n                            </p-checkbox>\n                        </td>\n                        <td class=\"stt\" style=\"text-align: center;\">{{rowData[fieldOrder]}}</td>\n                        <ng-container *ngFor=\"let col of columns; let i = index\">\n                            <ng-container\n                                *ngTemplateOutlet=\"contentTd; context: {$implicit: rowData, rowNode: rowNode, col: col, index: index, i: i}\">\n                            </ng-container>\n                        </ng-container>\n                        <td *ngIf=\"!setting.hiddenFunctionColumn\" style=\"text-align: center;\">\n                            <div *ngIf=\"hasTemplate('function')\" class=\"p-toolbar-group-center button-group\">\n                                <ng-container [ngTemplateOutlet]=\"getTemplate('function')\"\n                                    [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"></ng-container>\n                                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n                            </div>\n                            <div *ngIf=\"!hasTemplate('function')\" class=\"p-toolbar-group-center button-group\">\n                                <ng-container [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"\n                                    [ngTemplateOutlet]=\"getTemplate('buttonBefore')\"></ng-container>\n                                <button *ngIf=\"!rowData.hiddenEdit\" type=\"button\" pButton pRipple\n                                    [pTooltip]=\"'FORM.EDIT' | translate\" tooltipPosition=\"top\"\n                                    [disabled]=\"disableEdit(rowData)\"\n                                    class=\"p-button-rounded p-button-text p-button-info link-or-action\"\n                                    icon=\"pi pi-pencil\" (click)=\"edit(rowData)\"></button>\n                                <button *ngIf=\"!rowData.hiddenDelete\" type=\"button\" pButton pRipple\n                                    [disabled]=\"disableDelete(rowData)\" [pTooltip]=\"'FORM.DELETE' | translate\"\n                                    tooltipPosition=\"top\"\n                                    class=\"p-button-rounded p-button-text p-button-danger link-or-action\"\n                                    icon=\"pi pi-trash\" (click)=\"delete(rowData)\"></button>\n                                <!-- <button *ngIf=\"this.menuButtons\" type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\n                                    class=\"link-or-action p-button-text p-button-info p-button-rounded\"\n                                    pTooltip=\"Ch\u1EE9c n\u0103ng kh\u00E1c\" tooltipPosition=\"top\"\n                                    (click)=\"showContextMenu($event, rowData)\"></button> -->\n                            </div>\n                        </td>\n                    </tr>\n                    <after-view-checked *ngIf=\"rowData._index == _rawDataSource.length - 1\" style=\"display: none;\"\n                        [renderKey]=\"dataSource\" (loaded)=\"handleTableRendered()\">\n                    </after-view-checked>\n                </ng-template>\n            </p-treeTable>\n            <div class=\"row-bottom-sticky\"></div>\n        </tn-custom-scrollbar>\n    </div>\n</div>\n<ng-template #buttonAdd>\n    <span [appAuthorize]=\"serviceCode\" [permission]=\"authorizePaths[commonConst.ADD]\"\n        [enableAuthorize]=\"buttonApplyAuthorize[commonConst.ADD]\">\n        <button type=\"button\" pButton pRipple label=\"Th\u00EAm m\u1EDBi\" icon=\"pi pi-plus\" class=\"p-button-text\"\n            [disabled]=\"!model.baseReady\" (click)=\"add()\"></button>\n    </span>\n</ng-template>\n<ng-template #buttonDelete>\n    <button *ngIf=\"!hiddenDelete && model.selectedItems.length > 0 && !disableMultipleDelete()\"\n        [appAuthorize]=\"serviceCode\" [permission]=\"authorizePaths[commonConst.DELETE_MULTIPLE]\"\n        [enableAuthorize]=\"buttonApplyAuthorize[commonConst.DELETE_MULTIPLE]\" type=\"button\" pButton pRipple\n        [label]=\"'X\u00F3a ' + (model.selectedItems.length) | translate\" icon=\"pi pi-trash\"\n        class=\"p-button-text p-button-danger\" (click)=\"deleteMutiple()\"></button>\n</ng-template>\n<ng-template #contentTd let-rowData let-rowNode=\"rowNode\" let-col=\"col\" let-index=\"index\" let-i=\"i\"\n    let-expanded=\"expanded\">\n    <td *ngIf=\"col && col.visible && col.field != 'function' && (!rowData.hidden || !rowData.hidden[col.field])\"\n        [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[col.field]\"\n        [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[col.field]\" [ngStyle]=\"col.extendData.style\"\n        [class]=\"col.cellClass\" [class.first-td]=\"i == 0\">\n        <tn-treeTableToggler *ngIf=\"col.colHasToggleIcon\" [rowNode]=\"rowNode\"></tn-treeTableToggler>\n        <span *ngIf=\"col.pipe\">\n            <!-- <span class=\"p-column-title\" [pTooltip]=\"col.fullLabel\" [escape]=\"false\"\n                tooltipPosition=\"top\">{{col.label}}</span> -->\n            {{rowData['pipe__' + col.field]}}\n        </span>\n        <span *ngIf=\"!col.pipe\">\n            <!-- <span class=\"p-column-title\" [pTooltip]=\"col.fullLabel\" [escape]=\"false\"\n                tooltipPosition=\"top\">{{col.label}}</span> -->\n            <span *ngIf=\"setting.showEditLink && col.showEditLink\" [pTooltip]=\"config.tooltipView\" tooltipPosition=\"top\"\n                class=\"link-or-action\">\n                <a href=\"javascript:;\" (click)=\"view(rowData)\" [pTooltip]=\"config.tooltipView\" tooltipPosition=\"top\">\n                    <ng-container [ngTemplateOutlet]=\"contentCell\"\n                        [ngTemplateOutletContext]=\"getContextCell(rowData, index, col, expanded, this)\">\n                    </ng-container>\n                </a>\n            </span>\n            <span *ngIf=\"!setting.showEditLink || !col.showEditLink\">\n                <ng-container [ngTemplateOutlet]=\"contentCell\"\n                    [ngTemplateOutletContext]=\"getContextCell(rowData, index, col, expanded, this)\">\n                </ng-container>\n            </span>\n        </span>\n        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n    </td>\n</ng-template>\n<ng-template #contentCell let-col=\"col\" let-rowData=\"rowData\" let-rowIndex=\"rowIndex\" let-field=\"field\"\n    let-expanded=\"expanded\">\n    <ng-container *ngIf=\"col.template\">\n        <ng-container [ngTemplateOutlet]=\"col.template\"\n            [ngTemplateOutletContext]=\"getContextCell(rowData, rowIndex, col, expanded, this)\">\n        </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"!col.template\">\n        <ng-container [ngSwitch]=\"col.dataType\">\n            <span *ngSwitchCase=\"'color'\" style=\"display:block;text-align:center;\">\n                <div [pTooltip]=\"rowData[field]\" tooltipPosition=\"top\" [ngStyle]=\"{'background-color':rowData[field]}\"\n                    style=\"width:30px;height:30px;margin:0 auto;\"></div>\n            </span>\n            <span *ngSwitchCase=\"'icon'\" style=\"display:block;text-align:center;\">\n                <i [pTooltip]=\"rowData[field]\" tooltipPosition=\"top\" style=\"text-align: center;\"\n                    [ngClass]=\"rowData[field]\"></i>\n            </span>\n            <span *ngSwitchCase=\"'date'\" [pTooltip]=\"rowData[field] | date:'dd/MM/yyyy'\" tooltipPosition=\"top\">\n                {{_crudService.renderDate(rowData[field], col.format)}}\n            </span>\n            <span *ngSwitchCase=\"'datetime'\" [pTooltip]=\"rowData[field] | date:'dd/MM/yyyy HH:mm'\"\n                tooltipPosition=\"top\">\n                {{_crudService.renderDateTime(rowData[field], col.format)}}\n            </span>\n            <span *ngSwitchCase=\"'int'\">\n                {{rowData[field]}}\n            </span>\n            <span *ngSwitchCase=\"'decimal'\">\n                {{rowData[field]}}\n            </span>\n            <span *ngSwitchCase=\"'boolean'\">\n                <p-checkbox class=\"boolean-data-type\" [(ngModel)]=\"rowData[field]\" binary=\"true\"\n                    [disabled]=\"col.disableCheckBox\">\n                </p-checkbox>\n            </span>\n            <span *ngSwitchCase=\"'html'\">\n                <div *ngIf=\"rowData[field]==null?'':rowData[field]\" [innerHTML]=\"rowData[field] | safeHtml\"></div>\n            </span>\n            <span *ngSwitchCase=\"'metadataStatus'\">\n                <span *ngIf=\"rowData['rejectReason']\" class=\"label-danger\" [pTooltip]=\"rowData['rejectReason']\"\n                    tooltipStyleClass=\"unset-width\" [escape]=\"false\" tooltipPosition=\"top\">T\u1EEB ch\u1ED1i</span>\n                <span *ngIf=\"rowData[field] == '0' && !rowData['rejectReason']\" class=\"label-secondary\">Ch\u01B0a\n                    duy\u1EC7t</span>\n                <span *ngIf=\"rowData[field] == '1' && !rowData['rejectReason']\" class=\"label-warning\">Ch\u1EDD duy\u1EC7t</span>\n                <span *ngIf=\"rowData[field] == '2'\" class=\"label-primary\">\u0110\u00E3 duy\u1EC7t</span>\n            </span>\n            <ng-container *ngSwitchCase=\"'string'\">\n                <ng-container *ngTemplateOutlet=\"contentCellString; context: {$implicit: rowData, field: col.field}\">\n                </ng-container>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"null\">\n                <ng-container *ngTemplateOutlet=\"contentCellString; context: {$implicit: rowData, field: col.field}\">\n                </ng-container>\n            </ng-container>\n            <ng-container *ngSwitchDefault>\n                <ng-container [ngTemplateOutlet]=\"getComponentByType(col.dataType)\"\n                    [ngTemplateOutletContext]=\"getContextCell(rowData, rowIndex, col, expanded, this)\">\n                </ng-container>\n            </ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n<ng-template #contentCellString let-rowData let-field=\"field\">\n    <span>\n        <!-- __sv: Short Value -->\n        <ng-container *ngIf=\"rowData[field + '__sv']\">\n            <ng-container *ngIf=\"!rowData[field + '__showFull']\">\n                {{rowData[field + '__sv']}}\n                <span class=\"toggle-showfull\" (click)=\"toggleShowFull(rowData, field)\" pTooltip=\"B\u1EA5m \u0111\u1EC3 xem th\u00EAm\"\n                    tooltipPosition=\"top\">[...]</span>\n            </ng-container>\n            <ng-container *ngIf=\"rowData[field + '__showFull']\">\n                {{rowData[field]}}\n                <span class=\"toggle-showfull\" (click)=\"toggleShowFull(rowData, field)\">Thu g\u1ECDn</span>\n            </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!rowData[field + '__sv']\">\n            {{rowData[field]}}\n        </ng-container>\n    </span>\n</ng-template>\n<ng-template #containerSticky>\n    <span class=\"fix-sticky top\"></span>\n    <span class=\"fix-sticky right\"></span>\n    <!-- <span class=\"fix-sticky bottom\"></span> -->\n    <span class=\"fix-sticky left\"></span>\n</ng-template>\n<ng-template #rowHeaderFilter let-columns=\"columns\">\n    <tr class=\"filter-row\" *ngIf=\"!setting.hiddenFilterRow\">\n        <th *ngIf=\"!setting.hiddenCheckbox\" class=\"chkbox nopad center\" [class.sticky]=\"setting.stickyColumn\"\n            [class.tricheckbox-custom-false]=\"checkedAll === false\">\n            <p-triStateCheckbox [(ngModel)]=\"checkedAll\" binary=\"true\" (onChange)=\"handleCheckAll()\">\n            </p-triStateCheckbox>\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n        </th>\n        <th class=\"chkbox nopad center\" [class.sticky]=\"setting.stickyColumn\">\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n        </th>\n        <ng-container *ngFor=\"let col of columns; let i = index\">\n            <th *ngIf=\"col.visible && col.field != 'function'\" class=\"cell-header-filter center\">\n                <ng-container *ngIf=\"col.allowFilter\">\n                    <ng-container *ngIf=\"col.templateFilter\">\n                        <ng-container [ngTemplateOutlet]=\"col.templateFilter\"\n                            [ngTemplateOutletContext]=\"{col: col, filterData: filterData, onSearch: onSearch, onShowFilterDropdownPanel: onShowFilterDropdownPanel, onHideFilterDropdownPanel: onHideFilterDropdownPanel}\">\n                        </ng-container>\n                    </ng-container>\n                    <ng-container *ngIf=\"!col.templateFilter\" [ngSwitch]=\"col.controlType\">\n                        <ng-container *ngSwitchCase=\"'dropdown'\">\n                            <ng-container [ngTemplateOutlet]=\"filterDropdown\"\n                                [ngTemplateOutletContext]=\"{col: col.rawColumn}\">\n                            </ng-container>\n                        </ng-container>\n                        <ng-container *ngSwitchCase=\"'number'\">\n                            <ng-container [ngTemplateOutlet]=\"filterNumber\" [ngTemplateOutletContext]=\"{col: col}\">\n                            </ng-container>\n                        </ng-container>\n                        <ng-container *ngSwitchCase=\"'date'\">\n                            <ng-container [ngTemplateOutlet]=\"filterDate\" [ngTemplateOutletContext]=\"{col: col}\">\n                            </ng-container>\n                        </ng-container>\n                        <ng-container *ngSwitchCase=\"'datetime'\">\n                            <ng-container [ngTemplateOutlet]=\"filterDate\" [ngTemplateOutletContext]=\"{col: col}\">\n                            </ng-container>\n                        </ng-container>\n                        <ng-container *ngSwitchDefault>\n                            <ng-container [ngSwitch]=\"col.dataType\">\n                                <ng-container *ngSwitchCase=\"'int'\">\n                                    <ng-container [ngTemplateOutlet]=\"filterNumber\"\n                                        [ngTemplateOutletContext]=\"{col: col}\">\n                                    </ng-container>\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"'decimal'\">\n                                    <ng-container [ngTemplateOutlet]=\"filterNumber\"\n                                        [ngTemplateOutletContext]=\"{col: col}\">\n                                    </ng-container>\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"'date'\">\n                                    <ng-container [ngTemplateOutlet]=\"filterDate\"\n                                        [ngTemplateOutletContext]=\"{col: col}\">\n                                    </ng-container>\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"'datetime'\">\n                                    <ng-container [ngTemplateOutlet]=\"filterDate\"\n                                        [ngTemplateOutletContext]=\"{col: col}\">\n                                    </ng-container>\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"'boolean'\">\n                                    <ng-container [ngTemplateOutlet]=\"filterBoolean\"\n                                        [ngTemplateOutletContext]=\"{col: col}\">\n                                    </ng-container>\n                                </ng-container>\n                                <ng-container *ngSwitchDefault>\n                                    <ng-container [ngTemplateOutlet]=\"filterText\"\n                                        [ngTemplateOutletContext]=\"{col: col}\">\n                                    </ng-container>\n                                </ng-container>\n                            </ng-container>\n                        </ng-container>\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n            </th>\n        </ng-container>\n        <th *ngIf=\"!setting.hiddenFunctionColumn\" class=\"center setting-cell column-function\"\n            [class.sticky]=\"setting.stickyColumn\">\n            <!-- <button *ngIf=\"!setting.hiddenSetting\" type=\"button\" pButton pRipple icon=\"pi pi-cog\"\n                class=\"p-button-rounded p-button-text\" pTooltip=\"C\u1EA5u h\u00ECnh hi\u1EC3n th\u1ECB\" tooltipPosition=\"top\"\n                (click)=\"showSettings()\"></button>\n            <button *ngIf=\"!setting.hiddenSettingPermission\" type=\"button\" pButton pRipple icon=\"pi pi-users\"\n                class=\"p-button-rounded p-button-text\" pTooltip=\"Ph\u00E2n quy\u1EC1n d\u1EEF li\u1EC7u\" tooltipPosition=\"left\"\n                [disabled]=\"checkPermissionToUseButton(BUTTON_PHAN_QUYEN)\" (click)=\"showSettingsPermission()\"></button>\n            <button *ngIf=\"!setting.hiddenSettingWorkflow\" type=\"button\" pButton pRipple icon=\"pi pi-sitemap\"\n                class=\"p-button-rounded p-button-text\" pTooltip=\"C\u1EA5u h\u00ECnh quy tr\u00ECnh\" tooltipPosition=\"left\"\n                [disabled]=\"checkPermissionToUseButton(BUTTON_CAU_HINH_QUY_TRINH)\"\n                (click)=\"showSettingsWorkflowNew()\"></button> -->\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n        </th>\n    </tr>\n</ng-template>\n<ng-template #filterDropdown let-col=\"col\">\n    <div #filterBox style=\"width: 100%; border-radius: 4px;\">\n        <dropdown *ngIf=\"col && filterSchema.dropdown[col.field]\" [control]=\"filterSchema.dropdown[col.field]\"\n            [dataSource]=\"filterSchema.dropdown[col.field].dataSource\" [(value)]=\"filterData[col.field]\"\n            (onHideSmartEvent)=\"onSearch()\" (onShow)=\"onShowFilterDropdownPanel($event)\"\n            (onHide)=\"onHideFilterDropdownPanel($event)\" (mousedown)=\"initFilterBoxFocus(filterBox)\"></dropdown>\n    </div>\n</ng-template>\n<ng-template #filterText let-col=\"col\">\n    <div #filterBox class=\"text-filter filter-box\" tabindex=\"-1\" (mousedown)=\"initFilterBoxFocus(filterBox)\">\n        <div tabindex=\"-1\">\n            <input pInputText type=\"text\" class=\"input-search\" [placeholder]=\"col.label\"\n                [(ngModel)]=\"filterData[col.field]\" (change)=\"onSearch()\"\n                (keyup.esc)=\"onClearSearch(filterBox, col.field)\">\n        </div>\n        <span [ngClass]=\"{'action-clear': true, 'dirty': filterData[col.field] != null && filterData[col.field] !== ''}\"\n            [pTooltip]=\"'B\u1ECF filter'\" tooltipPosition=\"top\" (mousedown)=\"onClearSearch(filterBox, col.field)\"\n            tabindex=\"-1\"><i class=\"pi pi-filter-slash\"></i></span>\n        <after-view-checked style=\"display: none;\" (loaded)=\"initFilterBoxFocus(filterBox)\">\n        </after-view-checked>\n    </div>\n</ng-template>\n<ng-template #filterNumber let-col=\"col\">\n    <div #filterBox class=\"number-picker-range filter-box\" tabindex=\"-1\" (mousedown)=\"initFilterBoxFocus(filterBox)\">\n        <div tabindex=\"-1\">\n            <tn-number-picker-range #numberRange [maskType]=\"col.dataType\" [(ngModel)]=\"filterData[col.field]\"\n                [min]=\"col.min\" [max]=\"col.max\" (change)=\"onSearch()\">\n            </tn-number-picker-range>\n        </div>\n        <span\n            [ngClass]=\"{'action-clear': true, 'dirty': filterData[col.field] && ((filterData[col.field][0] != null && filterData[col.field][0] !== '') || (filterData[col.field][1] != null && filterData[col.field][1] !== ''))}\"\n            [pTooltip]=\"'B\u1ECF filter'\" tooltipPosition=\"top\" (mousedown)=\"onClearNumberSearch(filterBox, numberRange)\"\n            tabindex=\"-1\">\n            <i class=\"pi pi-filter-slash\"></i></span>\n        <after-view-checked style=\"display: none;\" (loaded)=\"initFilterBoxFocus(filterBox)\">\n        </after-view-checked>\n    </div>\n</ng-template>\n<ng-template #filterDate let-col=\"col\">\n    <div #filterBox class=\"date-picker-range filter-box\" tabindex=\"-1\" (mousedown)=\"initFilterBoxFocus(filterBox)\">\n        <div tabindex=\"-1\">\n            <tn-datetime-picker-range #dateRange [control]=\"filterSchema.dateRange\"\n                (onChanged)=\"onChangeDateTime($event, col.field)\">\n            </tn-datetime-picker-range>\n        </div>\n        <span\n            [ngClass]=\"{'action-clear': true, 'dirty': filterData[col.field] && ((filterData[col.field][0] != null && filterData[col.field][0] !== '') || (filterData[col.field][1] != null && filterData[col.field][1] !== ''))}\"\n            [pTooltip]=\"'B\u1ECF filter'\" tooltipPosition=\"top\"\n            (mousedown)=\"onClearDateSearch(filterBox, dateRange, col.field)\" tabindex=\"-1\"><i\n                class=\"pi pi-filter-slash\"></i></span>\n        <after-view-checked style=\"display: none;\" (loaded)=\"initFilterBoxFocus(filterBox)\">\n        </after-view-checked>\n    </div>\n</ng-template>\n<ng-template #filterBoolean let-col=\"col\">\n    <div class=\"filter-boolean-box\">\n        <p-selectButton\n            [options]=\"[{value: true, label: 'C\u00F3', icon: 'pi pi-check'}, {value: false, label: 'Kh\u00F4ng', icon: 'pi pi-times'}]\"\n            [multiple]=\"true\" [(ngModel)]=\"filterData[col.field]\" (onChange)=\"onChangeBoolean($event, col.field)\">\n            <ng-template let-item>\n                <i style=\"padding: 3px 0;\" [class]=\"item.icon\"></i>\n            </ng-template>\n        </p-selectButton>\n    </div>\n</ng-template>\n<ng-template #buttonExport>\n    <button *ngIf=\"model.selectedItems.length > 0\" [appAuthorize]=\"serviceCode\"\n        [permission]=\"authorizePaths[commonConst.EXPORT_EXCEL]\"\n        [enableAuthorize]=\"buttonApplyAuthorize[commonConst.EXPORT_EXCEL]\" type=\"button\" pButton pRipple\n        label=\"Xu\u1EA5t c\u00E1c m\u1EE5c \u0111\u00E3 ch\u1ECDn ({{model.selectedItems.length}})\" icon=\"fas fa-file-excel\"\n        class=\"p-button-text p-button-success\" (click)=\"xuatCacMucDaChon(true)\"></button>\n</ng-template>\n<ng-template #buttonExportWord>\n    <button *ngIf=\"model.selectedItems.length > 0\" [appAuthorize]=\"serviceCode\"\n        [permission]=\"authorizePaths[commonConst.EXPORT_EXCEL]\"\n        [enableAuthorize]=\"buttonApplyAuthorize[commonConst.EXPORT_EXCEL]\" type=\"button\" pButton pRipple\n        label=\"In c\u00E1c m\u1EE5c \u0111\u00E3 ch\u1ECDn ({{model.selectedItems.length}})\" icon=\"fas fa-file-word\"\n        class=\"p-button-text p-button-success\" (click)=\"printByReadingHtml(true)\"></button>\n</ng-template>",
+                    styles: [".filter-row>th:not(.sticky):not(.chkbox){padding:3px!important}.advance-search-container{display:flex;justify-content:flex-end}::ng-deep tn-tree-table advance-search{display:block;flex:1;max-width:400px}::ng-deep tn-tree-table p-treetable .p-treetable .p-treetable-tbody>tr.ui-state-highlight{background:#e3f2fd!important}::ng-deep tn-tree-table p-treetable .p-treetable .p-treetable-tbody>tr.ui-state-highlight td{border-color:#fff}::ng-deep tn-tree-table p-treetable .p-treetable .p-treetable-tbody>tr.ui-state-highlight td .fix-sticky{background-color:#fff}::ng-deep tn-tree-table .ps__rail-x,::ng-deep tn-tree-table .ps__rail-y{z-index:5}::ng-deep tn-tree-table .p-treetable .p-treetable-thead>tr>th.cell-fixed-filter{z-index:999}::ng-deep tn-tree-table .p-treetable .p-treetable-thead>tr>th.cell-fixed-filter .fixed-filter{z-index:10;position:fixed;min-width:200px}::ng-deep tn-tree-table .p-treetable .p-treetable-thead>tr>th .container-icon-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}::ng-deep tn-tree-table tr.generated-by-base td.chkbox{background:#e9ecef}::ng-deep tn-tree-table .cell-header-filter{position:relative}::ng-deep tn-tree-table .cell-header-filter .tn-dropdown{height:32px}::ng-deep tn-tree-table .cell-header-filter tn-mask .p-inputtext{width:100%}::ng-deep tn-tree-table .cell-header-filter .filter-box{display:flex;min-width:0;background-color:#fff;border-radius:3px}::ng-deep tn-tree-table .cell-header-filter .filter-box>div{flex:1;border:1px solid #ced4da;border-right:none;border-radius:3px 0 0 3px;outline:none;overflow:hidden}::ng-deep tn-tree-table .cell-header-filter .filter-box>span{cursor:pointer;min-width:unset;flex-basis:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;background:#f5f6f8;color:#6c757d;border:1px solid #ced4da;outline:none}::ng-deep tn-tree-table .cell-header-filter .filter-box>span.action-clear{border-radius:0 3px 3px 0}::ng-deep tn-tree-table .cell-header-filter .filter-box>span.action-clear.dirty{color:#008eff}::ng-deep tn-tree-table .cell-header-filter .filter-box input{padding-left:5px;padding-right:5px;border:none;box-shadow:none!important}::ng-deep tn-tree-table .cell-header-filter .filter-box:not(.no-transition){transition:min-width .1s}::ng-deep tn-tree-table .cell-header-filter .filter-box.boolean-filter>div{flex:0 0 109px;width:109px}::ng-deep tn-tree-table .cell-header-filter .p-multiselect-label.p-placeholder{padding-left:.5rem;padding-right:.5rem}::ng-deep tn-tree-table .cell-header-filter.focus-within,::ng-deep tn-tree-table .cell-header-filter:focus-within{z-index:10!important}::ng-deep tn-tree-table .cell-header-filter.focus-within .filter-boolean-box .p-button,::ng-deep tn-tree-table .cell-header-filter:focus-within .filter-boolean-box .p-button{z-index:10}::ng-deep tn-tree-table .cell-header-filter.focus-within .filter-box>div,::ng-deep tn-tree-table .cell-header-filter:focus-within .filter-box>div{box-shadow:0 0 0 .2rem #a6d5fa;border-color:#2196f3;z-index:0}::ng-deep tn-tree-table .cell-header-filter.focus-within .short-filter-box,::ng-deep tn-tree-table .cell-header-filter:focus-within .short-filter-box{position:absolute;top:calc(50% - 16px);min-width:250px;z-index:2;box-shadow:5px 0 15px 1px rgba(0,0,0,.27058823529411763)}::ng-deep tn-tree-table .cell-header-filter.focus-within .short-filter-box>div,::ng-deep tn-tree-table .cell-header-filter:focus-within .short-filter-box>div{flex:1;box-shadow:0 0 0 .2rem #a6d5fa;border-color:#2196f3;z-index:0}::ng-deep tn-tree-table .cell-header-filter.focus-within .short-filter-box>span.action-clear,::ng-deep tn-tree-table .cell-header-filter:focus-within .short-filter-box>span.action-clear{display:flex}::ng-deep tn-tree-table .cell-header-filter.focus-within .short-filter-box.boolean-filter,::ng-deep tn-tree-table .cell-header-filter:focus-within .short-filter-box.boolean-filter{min-width:140px}::ng-deep tn-tree-table .cell-header-filter.focus-within .short-filter-box.boolean-filter>div,::ng-deep tn-tree-table .cell-header-filter:focus-within .short-filter-box.boolean-filter>div{flex:0 0 109px;width:109px}::ng-deep tn-tree-table .cell-header-filter.focus-within:nth-last-child(2) .short-filter-box,::ng-deep tn-tree-table .cell-header-filter:focus-within:nth-last-child(2) .short-filter-box{left:50%;transform:translateX(-50%)}::ng-deep tn-tree-table .cell-header-filter:last-child .filter-box{right:3px}::ng-deep tn-tree-table .table-border-line{position:absolute;z-index:5;background-color:#eee}::ng-deep tn-tree-table .table-border-line.--left,::ng-deep tn-tree-table .table-border-line.--right{top:0;bottom:0;width:1px}::ng-deep tn-tree-table .table-border-line.--bottom,::ng-deep tn-tree-table .table-border-line.--top{left:0;right:0;height:1px}::ng-deep tn-tree-table .table-border-line.--left{left:0}::ng-deep tn-tree-table .table-border-line.--right{right:0}::ng-deep tn-tree-table .table-border-line.--top{top:0}::ng-deep tn-tree-table .table-border-line.--bottom{bottom:0}::ng-deep tn-tree-table .filter-boolean-box{text-align:center}::ng-deep tn-tree-table .filter-boolean-box .p-selectbutton{white-space:nowrap}::ng-deep tn-tree-table .custom-search-area crud-form{width:100%}::ng-deep tn-tree-table>p-contextmenu{display:none}"]
                 },] }
     ];
     TreeTableComponent.ctorParameters = function () { return [
@@ -43752,6 +43806,7 @@
     }());
     var DatasourceFieldFilter = [
         { id: 'userName', ten: 'Tài khoản' },
+        { id: 'code', ten: 'Mã' },
         { id: 'email', ten: 'Email' },
     ];
     var DatasourceFilterCanBo = [
@@ -54262,6 +54317,14 @@
                         fullTextSearch: true,
                         width: '100px'
                     }),
+                    new EntityPickerColumn({
+                        label: 'Mã',
+                        code: 'code',
+                        dataType: 'string',
+                        operator: exports.Operator.contain,
+                        fullTextSearch: true,
+                        width: '160px'
+                    }),
                     new EntityPickerColumn({
                         label: 'Họ và tên',
                         code: 'fullNameNew',