tnx-shared 5.3.163 → 5.3.164

package/bundles/tnx-shared.umd.js

@@ -115,7 +115,15 @@
         COLUMN_SETTING: 'COLUMN_SETTING',
         COLOR_SETTING: 'COLOR_SETTING',
         DEFAULT_DATA: 'DEFAULT_DATA',
-        ADVANCE_FILTER: 'ADVANCE_FILTER'
+        ADVANCE_FILTER: 'ADVANCE_FILTER',
+        BUTTON_AUTHORIZE: 'BUTTON_AUTHORIZE',
+        BUTTON_SETTING: 'BUTTON_SETTING'
+    };
+    ComCtxConstants.COMMON_VN = {
+        ADD: 'THEM_MOI',
+        EDIT: 'SUA',
+        DELETE: 'XOA',
+        DELETE_MULTIPLE: 'XOA_CAC_MUC_DA_CHON',
     };
     ComCtxConstants.COMMON = {
         ADD: 'ADD',
@@ -1081,6 +1089,7 @@
             this.useCommonSearch = false;
             this.useCommonFullTextSearch = true;
             this.hiddenSearch = false;
+            this.hiddenAuthorizeButton = false;
             this.hiddenHeader = false;
             this.hiddenPageSetting = false;
             this.hiddenTextPage = false;
@@ -2036,6 +2045,7 @@
             _this.searchMultiple = true;
             _this.disableDisplayFieldServerSearch = false;
             _this.loadOnInit = false;
+            _this.isLazyLoad = false;
             _this.allowLoadDataWhenParentNull = false;
             _this.disabledParentItem = true;
             for (var key in init) {
@@ -2389,6 +2399,16 @@
         }
         return PopupSize;
     }());
+    var ButtonAction = /** @class */ (function () {
+        function ButtonAction(init) {
+            this.lstElement = [];
+            this.isAuthorize = false;
+            for (var key in init) {
+                this[key] = init[key];
+            }
+        }
+        return ButtonAction;
+    }());
     var EventData = /** @class */ (function () {
         function EventData(init) {
             for (var key in init) {
@@ -2885,6 +2905,7 @@
             Object.keys(sessionStorage).filter(function (item) { return /^AUTHORIZATION/.test(item) || /^V4_AUTHORIZATION/.test(item); }).forEach(function (item) {
                 sessionStorage.removeItem(item);
             });
+            sessionStorage.removeItem(ComCtxConstants.LOCALSTORAGE_KEY.BUTTON_AUTHORIZE);
             sessionStorage.removeItem('profiles');
             sessionStorage.removeItem('v4_profiles');
         };
@@ -5395,6 +5416,24 @@
         EnumCanBo[EnumCanBo["NGOAI_DON_VI"] = 2] = "NGOAI_DON_VI";
         EnumCanBo[EnumCanBo["TRONG_DON_VI"] = 3] = "TRONG_DON_VI";
     })(exports.EnumCanBo || (exports.EnumCanBo = {}));
+    exports.PermissionName = void 0;
+    (function (PermissionName) {
+        PermissionName["WATCH"] = "Xem";
+        PermissionName["ADD"] = "Th\u00EAm m\u1EDBi";
+        PermissionName["EDIT"] = "S\u1EEDa";
+        PermissionName["DELETE"] = "X\u00F3a";
+        PermissionName["DELETE_MULTIPLE"] = "X\u00F3a c\u00E1c m\u1EE5c \u0111\u00E3 ch\u1ECDn";
+    })(exports.PermissionName || (exports.PermissionName = {}));
+    exports.EnumProperties = void 0;
+    (function (EnumProperties) {
+        EnumProperties["NG_REFLECT_TEXT"] = "ng-reflect-text";
+        EnumProperties["NG_REFLECT_LABEL"] = "ng-reflect-label";
+        EnumProperties["CRUD_LIST"] = "crud-list";
+        EnumProperties["LABEL"] = "label";
+        EnumProperties["TAG_NAME"] = "tagName";
+        EnumProperties["TOOLTIP"] = "ptooltip";
+        EnumProperties["RESULTS"] = "_results";
+    })(exports.EnumProperties || (exports.EnumProperties = {}));
 
     var ExportItem = /** @class */ (function () {
         function ExportItem(init) {
@@ -10355,6 +10394,10 @@
             this._crudService = injector.get(CrudService);
             this._commonService = injector.get(CommonService);
             this._datePipe = injector.get(i3.DatePipe);
+            var root = this._appContext.getRootContext();
+            if (!root) {
+                this._appContext.addRootContext(this._componentContext, this._activatedRoute);
+            }
             this._componentContext = this._appContext.addComponentContext(this._componentContext, this._activatedRoute, this.getComponentId());
             if (this._componentContext) {
                 this.model = this._componentContext.data;
@@ -11178,9 +11221,9 @@
     var FieldWorkflowCodeInCrudForm = '_WorkflowCode';
     var ɵ0$2 = exports.PermissionBase.READ, ɵ1$1 = exports.PermissionBase.EDIT, ɵ2$1 = exports.PermissionBase.DELETE;
     var DataSourcePermissionBase = [
-        { id: ɵ0$2, ten: 'Xem' },
-        { id: ɵ1$1, ten: 'Sửa' },
-        { id: ɵ2$1, ten: 'Xóa' }
+        { id: ɵ0$2, ten: exports.PermissionName.WATCH },
+        { id: ɵ1$1, ten: exports.PermissionName.EDIT },
+        { id: ɵ2$1, ten: exports.PermissionName.DELETE }
     ];
     var ɵ3 = exports.EnumGioiTinh.NAM, ɵ4 = exports.EnumGioiTinh.NU;
     var DataSourceGioiTinh = [
@@ -19100,307 +19143,6 @@
         onDataBinded: [{ type: i0.Output }]
     };
 
-    var CauHinhWorkflowService = /** @class */ (function (_super) {
-        __extends(CauHinhWorkflowService, _super);
-        function CauHinhWorkflowService(http, injector, _moduleConfigService) {
-            var _this = _super.call(this, http, injector, _moduleConfigService.getConfig().environment.apiDomain.congviecEndpoint + "/" + _moduleConfigService.getConfig().environment.apiVersion + "/CauHinhWorkflow") || this;
-            _this._moduleConfigService = _moduleConfigService;
-            _this.serviceCode = 'congviec';
-            _this.entityName = 'CauHinhWorkflow';
-            _this.endPoint = _moduleConfigService.getConfig().environment.apiDomain.congviecEndpoint;
-            return _this;
-        }
-        return CauHinhWorkflowService;
-    }(BaseService));
-    CauHinhWorkflowService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function CauHinhWorkflowService_Factory() { return new CauHinhWorkflowService(i0__namespace.ɵɵinject(i1__namespace$1.HttpClient), i0__namespace.ɵɵinject(i0__namespace.INJECTOR), i0__namespace.ɵɵinject(ModuleConfigService)); }, token: CauHinhWorkflowService, providedIn: "root" });
-    CauHinhWorkflowService.decorators = [
-        { type: i0.Injectable, args: [{
-                    providedIn: 'root'
-                },] }
-    ];
-    CauHinhWorkflowService.ctorParameters = function () { return [
-        { type: i1$1.HttpClient },
-        { type: i0.Injector },
-        { type: ModuleConfigService }
-    ]; };
-
-    var StateMachinesService = /** @class */ (function (_super) {
-        __extends(StateMachinesService, _super);
-        function StateMachinesService(http, injector, _moduleConfigService) {
-            var _this = _super.call(this, http, injector, _moduleConfigService.getConfig().environment.apiDomain.workflowEndpoint + "/" + _moduleConfigService.getConfig().environment.apiVersion + "/StateMachines") || this;
-            _this._moduleConfigService = _moduleConfigService;
-            _this.entityName = 'StateMachines';
-            _this.serviceCode = 'workflow';
-            _this.endPoint = _moduleConfigService.getConfig().environment.apiDomain.workflowEndpoint;
-            return _this;
-        }
-        StateMachinesService.prototype.changeState = function (itemWorkflowHistory) {
-            return this.defaultPost(this.serviceUri + "/ChangeState", itemWorkflowHistory);
-        };
-        StateMachinesService.prototype.rollback = function (rowData) {
-            return this.defaultPost(this.serviceUri + "/Rollback/" + rowData.__workflowCode + "/" + rowData.id, {});
-        };
-        StateMachinesService.prototype.getUserInProcessForm = function (workflowCode, stateCode, actionCode, itemId) {
-            return this.defaultPost(this.serviceUri + "/GetUserInProcessForm/" + workflowCode + "/" + stateCode + "/" + actionCode + "/" + itemId, {});
-        };
-        return StateMachinesService;
-    }(BaseService));
-    StateMachinesService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function StateMachinesService_Factory() { return new StateMachinesService(i0__namespace.ɵɵinject(i1__namespace$1.HttpClient), i0__namespace.ɵɵinject(i0__namespace.INJECTOR), i0__namespace.ɵɵinject(ModuleConfigService)); }, token: StateMachinesService, providedIn: "root" });
-    StateMachinesService.decorators = [
-        { type: i0.Injectable, args: [{
-                    providedIn: 'root'
-                },] }
-    ];
-    StateMachinesService.ctorParameters = function () { return [
-        { type: i1$1.HttpClient },
-        { type: i0.Injector },
-        { type: ModuleConfigService }
-    ]; };
-
-    var DmLoaiCongViecService = /** @class */ (function (_super) {
-        __extends(DmLoaiCongViecService, _super);
-        function DmLoaiCongViecService(http, injector, _moduleConfigService) {
-            var _this = _super.call(this, http, injector, _moduleConfigService.getConfig().environment.apiDomain.congviecEndpoint + "/" + _moduleConfigService.getConfig().environment.apiVersion + "/DM_LoaiCongViec") || this;
-            _this._moduleConfigService = _moduleConfigService;
-            _this.serviceCode = 'congviec';
-            _this.entityName = 'DM_LoaiCongViec';
-            _this.dicLoaiCongViec = {};
-            _this.keyIdLoaiCongViecRoot = 'root';
-            _this.getWorkflowSettingByIdLoaiCongViec = function (idLoaiCongViec) { return __awaiter(_this, void 0, void 0, function () {
-                var result, idLoaiCongViecs, i;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            if (!!this.dicWorkflowByLoaiCongViec) return [3 /*break*/, 2];
-                            return [4 /*yield*/, this.getDatasourceWorkflowCongViec()];
-                        case 1:
-                            _a.sent();
-                            _a.label = 2;
-                        case 2:
-                            if (!idLoaiCongViec) {
-                                return [2 /*return*/, this.dicWorkflowByLoaiCongViec[this.keyIdLoaiCongViecRoot]];
-                            }
-                            result = this.dicWorkflowByLoaiCongViec[idLoaiCongViec];
-                            if (result)
-                                return [2 /*return*/, result];
-                            return [4 /*yield*/, this.getIdLoaiCongViecs(idLoaiCongViec)];
-                        case 3:
-                            idLoaiCongViecs = _a.sent();
-                            if (!Array.isArray(idLoaiCongViecs))
-                                return [2 /*return*/, null];
-                            if (idLoaiCongViecs.length > 1) {
-                                for (i = idLoaiCongViecs.length - 2; i >= 0; i--) {
-                                    result = this.dicWorkflowByLoaiCongViec[idLoaiCongViecs[i]];
-                                    if (result)
-                                        return [2 /*return*/, result];
-                                }
-                            }
-                            if (!result) {
-                                result = this.dicWorkflowByLoaiCongViec[this.keyIdLoaiCongViecRoot];
-                            }
-                            return [2 /*return*/, result];
-                    }
-                });
-            }); };
-            _this.endPoint = _moduleConfigService.getConfig().environment.apiDomain.congviecEndpoint;
-            return _this;
-        }
-        DmLoaiCongViecService.prototype.getDatasourceWorkflowCongViec = function () {
-            return __awaiter(this, void 0, void 0, function () {
-                var cauHinhWorkflowService, cauHinhWorkflows, notifierService, workflowCodes, stateMachinesService, workflows;
-                var _this = this;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            if (!this.dicWorkflowByLoaiCongViec) {
-                                this.dicWorkflowByLoaiCongViec = {};
-                            }
-                            cauHinhWorkflowService = this._injector.get(CauHinhWorkflowService);
-                            return [4 /*yield*/, cauHinhWorkflowService.getAll([], 'idLoaiCongViec,workflowCodes,workflowCode')];
-                        case 1:
-                            cauHinhWorkflows = (_a.sent()).data;
-                            notifierService = this._injector.get(NotifierService);
-                            if (cauHinhWorkflows == null) {
-                                notifierService.showWarning('Dịch vụ workflow không phản hồi');
-                                return [2 /*return*/, []];
-                            }
-                            workflowCodes = [];
-                            cauHinhWorkflows.forEach(function (itemWorkflowSetting) {
-                                if (itemWorkflowSetting.workflowCodes && !Array.isArray(itemWorkflowSetting.workflowCodes)) {
-                                    itemWorkflowSetting.workflowCodes = itemWorkflowSetting.workflowCodes.split(',');
-                                }
-                                else {
-                                    itemWorkflowSetting.workflowCodes = [];
-                                }
-                                itemWorkflowSetting.workflowCodes.forEach(function (workflowCode) {
-                                    if (workflowCodes.indexOf(workflowCode) == -1) {
-                                        workflowCodes.push(workflowCode);
-                                    }
-                                });
-                            });
-                            stateMachinesService = this._injector.get(StateMachinesService);
-                            return [4 /*yield*/, stateMachinesService.getDataDropdownByFilter([
-                                    this.newFilter('code', exports.Operator.in, workflowCodes)
-                                ], new DropdownOptions({
-                                    valueField: 'code',
-                                    displayField: 'title',
-                                    fieldPlus: 'data'
-                                }))];
-                        case 2:
-                            workflows = (_a.sent());
-                            workflows.forEach(function (item) {
-                                item.data = JSON.parse(item.data);
-                                var stateMachineData = item.data;
-                                stateMachineData.actions = {};
-                                stateMachineData.machines.forEach(function (machine) {
-                                    stateMachineData.actions[machine.code] = [];
-                                    stateMachineData.connections.forEach(function (conn) {
-                                        if (conn.source == machine.id) {
-                                            stateMachineData.actions[machine.code].push(conn);
-                                        }
-                                    });
-                                });
-                            });
-                            cauHinhWorkflows.forEach(function (itemWorkflowSetting) {
-                                itemWorkflowSetting.workflows = workflows.filter(function (q) { return itemWorkflowSetting.workflowCodes.indexOf(q.code) > -1; });
-                                if (!itemWorkflowSetting.idLoaiCongViec) {
-                                    _this.dicWorkflowByLoaiCongViec[_this.keyIdLoaiCongViecRoot] = itemWorkflowSetting;
-                                }
-                                else {
-                                    _this.dicWorkflowByLoaiCongViec[itemWorkflowSetting.idLoaiCongViec] = itemWorkflowSetting;
-                                }
-                            });
-                            return [2 /*return*/, workflows];
-                    }
-                });
-            });
-        };
-        DmLoaiCongViecService.prototype.getIdLoaiCongViecs = function (idLoaiCongViec) {
-            return __awaiter(this, void 0, void 0, function () {
-                var notifierService, itemLoaiCongViec, idLoaiCongViecs;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            notifierService = this._injector.get(NotifierService);
-                            return [4 /*yield*/, this.getItemLoaiCongViec(idLoaiCongViec)];
-                        case 1:
-                            itemLoaiCongViec = _a.sent();
-                            if (itemLoaiCongViec == null) {
-                                notifierService.showWarning('Loại công việc không tồn tại');
-                                return [2 /*return*/, null];
-                            }
-                            idLoaiCongViecs = itemLoaiCongViec.idDuongDan.split(';').filter(function (q) { return !!q; });
-                            return [2 /*return*/, idLoaiCongViecs];
-                    }
-                });
-            });
-        };
-        DmLoaiCongViecService.prototype.getItemLoaiCongViec = function (idLoaiCongViec) {
-            return __awaiter(this, void 0, void 0, function () {
-                var _a, _b;
-                return __generator(this, function (_c) {
-                    switch (_c.label) {
-                        case 0:
-                            if (!!this.dicLoaiCongViec[idLoaiCongViec]) return [3 /*break*/, 2];
-                            _a = this.dicLoaiCongViec;
-                            _b = idLoaiCongViec;
-                            return [4 /*yield*/, this.getDetail(idLoaiCongViec)];
-                        case 1:
-                            _a[_b] = (_c.sent()).data;
-                            _c.label = 2;
-                        case 2: return [2 /*return*/, this.dicLoaiCongViec[idLoaiCongViec]];
-                    }
-                });
-            });
-        };
-        return DmLoaiCongViecService;
-    }(BaseService));
-    DmLoaiCongViecService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function DmLoaiCongViecService_Factory() { return new DmLoaiCongViecService(i0__namespace.ɵɵinject(i1__namespace$1.HttpClient), i0__namespace.ɵɵinject(i0__namespace.INJECTOR), i0__namespace.ɵɵinject(ModuleConfigService)); }, token: DmLoaiCongViecService, providedIn: "root" });
-    DmLoaiCongViecService.decorators = [
-        { type: i0.Injectable, args: [{
-                    providedIn: 'root'
-                },] }
-    ];
-    DmLoaiCongViecService.ctorParameters = function () { return [
-        { type: i1$1.HttpClient },
-        { type: i0.Injector },
-        { type: ModuleConfigService }
-    ]; };
-
-    var CongViecService = /** @class */ (function (_super) {
-        __extends(CongViecService, _super);
-        function CongViecService(http, injector, _moduleConfigService, _dmLoaiCongViecService) {
-            var _this = _super.call(this, http, injector, _moduleConfigService.getConfig().environment.apiDomain.vanbanEndpoint + "/" + _moduleConfigService.getConfig().environment.apiVersion + "/vanbanden") || this;
-            _this._dmLoaiCongViecService = _dmLoaiCongViecService;
-            _this.endPoint = _moduleConfigService.getConfig().environment.apiDomain.vanbanEndpoint;
-            _this._moduleConfig = _moduleConfigService.getConfig();
-            return _this;
-        }
-        CongViecService.prototype.adjustSettingWorkflowForCrudList = function (setting) {
-            this.useWorkflow = true;
-            setting.isWorkflowTree = true;
-            setting.baseService = this;
-            setting.displayField = function (item) { return item.ten; };
-            setting.baseService.useWorkflow = true;
-            setting.workflowConfigAdvance = {
-                getWorkflowSetting: this.getWorkflowConfig.bind(this)
-            };
-        };
-        CongViecService.prototype.getWorkflowConfig = function (rowData) {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, this._dmLoaiCongViecService.getWorkflowSettingByIdLoaiCongViec(rowData.idLoaiCongViec)];
-                        case 1: return [2 /*return*/, _a.sent()];
-                    }
-                });
-            });
-        };
-        CongViecService.prototype.countByMenuState = function (data) {
-            return this.defaultPost(this.serviceUri + "/CountByMenuState", data);
-        };
-        CongViecService.prototype.getDicIdByMenuState = function (data, tuNgay, denNgay) {
-            return this.defaultPost(this.serviceUri + "/GetDicIdByMenuState", {
-                lstTrangThai: data,
-                tuNgay: tuNgay,
-                denNgay: denNgay
-            });
-        };
-        CongViecService.prototype.updateBulkIdCha = function (model) {
-            var url = this.serviceUri + "/UpdateBulkIdCha";
-            return this.defaultPost(url, model);
-        };
-        CongViecService.prototype.deleteBulkCongViecCon = function (ids) {
-            var url = this.serviceUri + "/DeleteBulkCongViecCon";
-            return this.defaultPost(url, ids);
-        };
-        CongViecService.prototype.getDataDashboardCaNhan = function (inputData) {
-            var url = this.serviceUri + "/GetDataDashboardCaNhan";
-            return this.defaultPost(url, inputData);
-        };
-        CongViecService.prototype.getDataDashboardByDonVi = function (inputData) {
-            var url = this.serviceUri + "/GetDataDashboardByDonVi";
-            return this.defaultPost(url, inputData);
-        };
-        CongViecService.prototype.getListTasksDashboard = function (dataFilter) {
-            var url = this.serviceUri + "/getListTasksDashboard";
-            return this.defaultPost(url, dataFilter);
-        };
-        return CongViecService;
-    }(BaseService));
-    CongViecService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function CongViecService_Factory() { return new CongViecService(i0__namespace.ɵɵinject(i1__namespace$1.HttpClient), i0__namespace.ɵɵinject(i0__namespace.INJECTOR), i0__namespace.ɵɵinject(ModuleConfigService), i0__namespace.ɵɵinject(DmLoaiCongViecService)); }, token: CongViecService, providedIn: "root" });
-    CongViecService.decorators = [
-        { type: i0.Injectable, args: [{
-                    providedIn: 'root'
-                },] }
-    ];
-    CongViecService.ctorParameters = function () { return [
-        { type: i1$1.HttpClient },
-        { type: i0.Injector },
-        { type: ModuleConfigService },
-        { type: DmLoaiCongViecService }
-    ]; };
-
     var SearchInfo = /** @class */ (function () {
         function SearchInfo(init) {
             this.fieldSearchText = [];
@@ -21213,6 +20955,307 @@
         { type: CrudService }
     ]; };
 
+    var StateMachinesService = /** @class */ (function (_super) {
+        __extends(StateMachinesService, _super);
+        function StateMachinesService(http, injector, _moduleConfigService) {
+            var _this = _super.call(this, http, injector, _moduleConfigService.getConfig().environment.apiDomain.workflowEndpoint + "/" + _moduleConfigService.getConfig().environment.apiVersion + "/StateMachines") || this;
+            _this._moduleConfigService = _moduleConfigService;
+            _this.entityName = 'StateMachines';
+            _this.serviceCode = 'workflow';
+            _this.endPoint = _moduleConfigService.getConfig().environment.apiDomain.workflowEndpoint;
+            return _this;
+        }
+        StateMachinesService.prototype.changeState = function (itemWorkflowHistory) {
+            return this.defaultPost(this.serviceUri + "/ChangeState", itemWorkflowHistory);
+        };
+        StateMachinesService.prototype.rollback = function (rowData) {
+            return this.defaultPost(this.serviceUri + "/Rollback/" + rowData.__workflowCode + "/" + rowData.id, {});
+        };
+        StateMachinesService.prototype.getUserInProcessForm = function (workflowCode, stateCode, actionCode, itemId) {
+            return this.defaultPost(this.serviceUri + "/GetUserInProcessForm/" + workflowCode + "/" + stateCode + "/" + actionCode + "/" + itemId, {});
+        };
+        return StateMachinesService;
+    }(BaseService));
+    StateMachinesService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function StateMachinesService_Factory() { return new StateMachinesService(i0__namespace.ɵɵinject(i1__namespace$1.HttpClient), i0__namespace.ɵɵinject(i0__namespace.INJECTOR), i0__namespace.ɵɵinject(ModuleConfigService)); }, token: StateMachinesService, providedIn: "root" });
+    StateMachinesService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+    StateMachinesService.ctorParameters = function () { return [
+        { type: i1$1.HttpClient },
+        { type: i0.Injector },
+        { type: ModuleConfigService }
+    ]; };
+
+    var CauHinhWorkflowService = /** @class */ (function (_super) {
+        __extends(CauHinhWorkflowService, _super);
+        function CauHinhWorkflowService(http, injector, _moduleConfigService) {
+            var _this = _super.call(this, http, injector, _moduleConfigService.getConfig().environment.apiDomain.congviecEndpoint + "/" + _moduleConfigService.getConfig().environment.apiVersion + "/CauHinhWorkflow") || this;
+            _this._moduleConfigService = _moduleConfigService;
+            _this.serviceCode = 'congviec';
+            _this.entityName = 'CauHinhWorkflow';
+            _this.endPoint = _moduleConfigService.getConfig().environment.apiDomain.congviecEndpoint;
+            return _this;
+        }
+        return CauHinhWorkflowService;
+    }(BaseService));
+    CauHinhWorkflowService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function CauHinhWorkflowService_Factory() { return new CauHinhWorkflowService(i0__namespace.ɵɵinject(i1__namespace$1.HttpClient), i0__namespace.ɵɵinject(i0__namespace.INJECTOR), i0__namespace.ɵɵinject(ModuleConfigService)); }, token: CauHinhWorkflowService, providedIn: "root" });
+    CauHinhWorkflowService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+    CauHinhWorkflowService.ctorParameters = function () { return [
+        { type: i1$1.HttpClient },
+        { type: i0.Injector },
+        { type: ModuleConfigService }
+    ]; };
+
+    var DmLoaiCongViecService = /** @class */ (function (_super) {
+        __extends(DmLoaiCongViecService, _super);
+        function DmLoaiCongViecService(http, injector, _moduleConfigService) {
+            var _this = _super.call(this, http, injector, _moduleConfigService.getConfig().environment.apiDomain.congviecEndpoint + "/" + _moduleConfigService.getConfig().environment.apiVersion + "/DM_LoaiCongViec") || this;
+            _this._moduleConfigService = _moduleConfigService;
+            _this.serviceCode = 'congviec';
+            _this.entityName = 'DM_LoaiCongViec';
+            _this.dicLoaiCongViec = {};
+            _this.keyIdLoaiCongViecRoot = 'root';
+            _this.getWorkflowSettingByIdLoaiCongViec = function (idLoaiCongViec) { return __awaiter(_this, void 0, void 0, function () {
+                var result, idLoaiCongViecs, i;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!!this.dicWorkflowByLoaiCongViec) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this.getDatasourceWorkflowCongViec()];
+                        case 1:
+                            _a.sent();
+                            _a.label = 2;
+                        case 2:
+                            if (!idLoaiCongViec) {
+                                return [2 /*return*/, this.dicWorkflowByLoaiCongViec[this.keyIdLoaiCongViecRoot]];
+                            }
+                            result = this.dicWorkflowByLoaiCongViec[idLoaiCongViec];
+                            if (result)
+                                return [2 /*return*/, result];
+                            return [4 /*yield*/, this.getIdLoaiCongViecs(idLoaiCongViec)];
+                        case 3:
+                            idLoaiCongViecs = _a.sent();
+                            if (!Array.isArray(idLoaiCongViecs))
+                                return [2 /*return*/, null];
+                            if (idLoaiCongViecs.length > 1) {
+                                for (i = idLoaiCongViecs.length - 2; i >= 0; i--) {
+                                    result = this.dicWorkflowByLoaiCongViec[idLoaiCongViecs[i]];
+                                    if (result)
+                                        return [2 /*return*/, result];
+                                }
+                            }
+                            if (!result) {
+                                result = this.dicWorkflowByLoaiCongViec[this.keyIdLoaiCongViecRoot];
+                            }
+                            return [2 /*return*/, result];
+                    }
+                });
+            }); };
+            _this.endPoint = _moduleConfigService.getConfig().environment.apiDomain.congviecEndpoint;
+            return _this;
+        }
+        DmLoaiCongViecService.prototype.getDatasourceWorkflowCongViec = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var cauHinhWorkflowService, cauHinhWorkflows, notifierService, workflowCodes, stateMachinesService, workflows;
+                var _this = this;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!this.dicWorkflowByLoaiCongViec) {
+                                this.dicWorkflowByLoaiCongViec = {};
+                            }
+                            cauHinhWorkflowService = this._injector.get(CauHinhWorkflowService);
+                            return [4 /*yield*/, cauHinhWorkflowService.getAll([], 'idLoaiCongViec,workflowCodes,workflowCode')];
+                        case 1:
+                            cauHinhWorkflows = (_a.sent()).data;
+                            notifierService = this._injector.get(NotifierService);
+                            if (cauHinhWorkflows == null) {
+                                notifierService.showWarning('Dịch vụ workflow không phản hồi');
+                                return [2 /*return*/, []];
+                            }
+                            workflowCodes = [];
+                            cauHinhWorkflows.forEach(function (itemWorkflowSetting) {
+                                if (itemWorkflowSetting.workflowCodes && !Array.isArray(itemWorkflowSetting.workflowCodes)) {
+                                    itemWorkflowSetting.workflowCodes = itemWorkflowSetting.workflowCodes.split(',');
+                                }
+                                else {
+                                    itemWorkflowSetting.workflowCodes = [];
+                                }
+                                itemWorkflowSetting.workflowCodes.forEach(function (workflowCode) {
+                                    if (workflowCodes.indexOf(workflowCode) == -1) {
+                                        workflowCodes.push(workflowCode);
+                                    }
+                                });
+                            });
+                            stateMachinesService = this._injector.get(StateMachinesService);
+                            return [4 /*yield*/, stateMachinesService.getDataDropdownByFilter([
+                                    this.newFilter('code', exports.Operator.in, workflowCodes)
+                                ], new DropdownOptions({
+                                    valueField: 'code',
+                                    displayField: 'title',
+                                    fieldPlus: 'data'
+                                }))];
+                        case 2:
+                            workflows = (_a.sent());
+                            workflows.forEach(function (item) {
+                                item.data = JSON.parse(item.data);
+                                var stateMachineData = item.data;
+                                stateMachineData.actions = {};
+                                stateMachineData.machines.forEach(function (machine) {
+                                    stateMachineData.actions[machine.code] = [];
+                                    stateMachineData.connections.forEach(function (conn) {
+                                        if (conn.source == machine.id) {
+                                            stateMachineData.actions[machine.code].push(conn);
+                                        }
+                                    });
+                                });
+                            });
+                            cauHinhWorkflows.forEach(function (itemWorkflowSetting) {
+                                itemWorkflowSetting.workflows = workflows.filter(function (q) { return itemWorkflowSetting.workflowCodes.indexOf(q.code) > -1; });
+                                if (!itemWorkflowSetting.idLoaiCongViec) {
+                                    _this.dicWorkflowByLoaiCongViec[_this.keyIdLoaiCongViecRoot] = itemWorkflowSetting;
+                                }
+                                else {
+                                    _this.dicWorkflowByLoaiCongViec[itemWorkflowSetting.idLoaiCongViec] = itemWorkflowSetting;
+                                }
+                            });
+                            return [2 /*return*/, workflows];
+                    }
+                });
+            });
+        };
+        DmLoaiCongViecService.prototype.getIdLoaiCongViecs = function (idLoaiCongViec) {
+            return __awaiter(this, void 0, void 0, function () {
+                var notifierService, itemLoaiCongViec, idLoaiCongViecs;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            notifierService = this._injector.get(NotifierService);
+                            return [4 /*yield*/, this.getItemLoaiCongViec(idLoaiCongViec)];
+                        case 1:
+                            itemLoaiCongViec = _a.sent();
+                            if (itemLoaiCongViec == null) {
+                                notifierService.showWarning('Loại công việc không tồn tại');
+                                return [2 /*return*/, null];
+                            }
+                            idLoaiCongViecs = itemLoaiCongViec.idDuongDan.split(';').filter(function (q) { return !!q; });
+                            return [2 /*return*/, idLoaiCongViecs];
+                    }
+                });
+            });
+        };
+        DmLoaiCongViecService.prototype.getItemLoaiCongViec = function (idLoaiCongViec) {
+            return __awaiter(this, void 0, void 0, function () {
+                var _a, _b;
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
+                        case 0:
+                            if (!!this.dicLoaiCongViec[idLoaiCongViec]) return [3 /*break*/, 2];
+                            _a = this.dicLoaiCongViec;
+                            _b = idLoaiCongViec;
+                            return [4 /*yield*/, this.getDetail(idLoaiCongViec)];
+                        case 1:
+                            _a[_b] = (_c.sent()).data;
+                            _c.label = 2;
+                        case 2: return [2 /*return*/, this.dicLoaiCongViec[idLoaiCongViec]];
+                    }
+                });
+            });
+        };
+        return DmLoaiCongViecService;
+    }(BaseService));
+    DmLoaiCongViecService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function DmLoaiCongViecService_Factory() { return new DmLoaiCongViecService(i0__namespace.ɵɵinject(i1__namespace$1.HttpClient), i0__namespace.ɵɵinject(i0__namespace.INJECTOR), i0__namespace.ɵɵinject(ModuleConfigService)); }, token: DmLoaiCongViecService, providedIn: "root" });
+    DmLoaiCongViecService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+    DmLoaiCongViecService.ctorParameters = function () { return [
+        { type: i1$1.HttpClient },
+        { type: i0.Injector },
+        { type: ModuleConfigService }
+    ]; };
+
+    var CongViecService = /** @class */ (function (_super) {
+        __extends(CongViecService, _super);
+        function CongViecService(http, injector, _moduleConfigService, _dmLoaiCongViecService) {
+            var _this = _super.call(this, http, injector, _moduleConfigService.getConfig().environment.apiDomain.vanbanEndpoint + "/" + _moduleConfigService.getConfig().environment.apiVersion + "/vanbanden") || this;
+            _this._dmLoaiCongViecService = _dmLoaiCongViecService;
+            _this.endPoint = _moduleConfigService.getConfig().environment.apiDomain.vanbanEndpoint;
+            _this._moduleConfig = _moduleConfigService.getConfig();
+            return _this;
+        }
+        CongViecService.prototype.adjustSettingWorkflowForCrudList = function (setting) {
+            this.useWorkflow = true;
+            setting.isWorkflowTree = true;
+            setting.baseService = this;
+            setting.displayField = function (item) { return item.ten; };
+            setting.baseService.useWorkflow = true;
+            setting.workflowConfigAdvance = {
+                getWorkflowSetting: this.getWorkflowConfig.bind(this)
+            };
+        };
+        CongViecService.prototype.getWorkflowConfig = function (rowData) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, this._dmLoaiCongViecService.getWorkflowSettingByIdLoaiCongViec(rowData.idLoaiCongViec)];
+                        case 1: return [2 /*return*/, _a.sent()];
+                    }
+                });
+            });
+        };
+        CongViecService.prototype.countByMenuState = function (data) {
+            return this.defaultPost(this.serviceUri + "/CountByMenuState", data);
+        };
+        CongViecService.prototype.getDicIdByMenuState = function (data, tuNgay, denNgay) {
+            return this.defaultPost(this.serviceUri + "/GetDicIdByMenuState", {
+                lstTrangThai: data,
+                tuNgay: tuNgay,
+                denNgay: denNgay
+            });
+        };
+        CongViecService.prototype.updateBulkIdCha = function (model) {
+            var url = this.serviceUri + "/UpdateBulkIdCha";
+            return this.defaultPost(url, model);
+        };
+        CongViecService.prototype.deleteBulkCongViecCon = function (ids) {
+            var url = this.serviceUri + "/DeleteBulkCongViecCon";
+            return this.defaultPost(url, ids);
+        };
+        CongViecService.prototype.getDataDashboardCaNhan = function (inputData) {
+            var url = this.serviceUri + "/GetDataDashboardCaNhan";
+            return this.defaultPost(url, inputData);
+        };
+        CongViecService.prototype.getDataDashboardByDonVi = function (inputData) {
+            var url = this.serviceUri + "/GetDataDashboardByDonVi";
+            return this.defaultPost(url, inputData);
+        };
+        CongViecService.prototype.getListTasksDashboard = function (dataFilter) {
+            var url = this.serviceUri + "/getListTasksDashboard";
+            return this.defaultPost(url, dataFilter);
+        };
+        return CongViecService;
+    }(BaseService));
+    CongViecService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function CongViecService_Factory() { return new CongViecService(i0__namespace.ɵɵinject(i1__namespace$1.HttpClient), i0__namespace.ɵɵinject(i0__namespace.INJECTOR), i0__namespace.ɵɵinject(ModuleConfigService), i0__namespace.ɵɵinject(DmLoaiCongViecService)); }, token: CongViecService, providedIn: "root" });
+    CongViecService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+    CongViecService.ctorParameters = function () { return [
+        { type: i1$1.HttpClient },
+        { type: i0.Injector },
+        { type: ModuleConfigService },
+        { type: DmLoaiCongViecService }
+    ]; };
+
     var EntityWorkflowHistoryService = /** @class */ (function (_super) {
         __extends(EntityWorkflowHistoryService, _super);
         function EntityWorkflowHistoryService(http, injector, _moduleConfigService) {
@@ -21490,6 +21533,30 @@
         { type: ModuleConfigService }
     ]; };
 
+    var BasePermissionService = /** @class */ (function (_super) {
+        __extends(BasePermissionService, _super);
+        function BasePermissionService(http, injector, _moduleConfigService) {
+            var _this = _super.call(this, http, injector, _moduleConfigService.getConfig().environment.apiDomain.authorizationEndpoint + "/" + _moduleConfigService.getConfig().environment.apiVersion + "/BasePermission") || this;
+            _this._moduleConfigService = _moduleConfigService;
+            _this.entityName = 'BasePermission';
+            _this.serviceCode = 'Authorization';
+            _this.endPoint = _moduleConfigService.getConfig().environment.apiDomain.authorizationEndpoint;
+            return _this;
+        }
+        return BasePermissionService;
+    }(BaseService));
+    BasePermissionService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function BasePermissionService_Factory() { return new BasePermissionService(i0__namespace.ɵɵinject(i1__namespace$1.HttpClient), i0__namespace.ɵɵinject(i0__namespace.INJECTOR), i0__namespace.ɵɵinject(ModuleConfigService)); }, token: BasePermissionService, providedIn: "root" });
+    BasePermissionService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+    BasePermissionService.ctorParameters = function () { return [
+        { type: i1$1.HttpClient },
+        { type: i0.Injector },
+        { type: ModuleConfigService }
+    ]; };
+
     var ListComponentBase = /** @class */ (function (_super) {
         __extends(ListComponentBase, _super);
         function ListComponentBase(_injector, _isTreeTable) {
@@ -21581,8 +21648,8 @@
             _this.showingActionWorkflow = false;
             _this.buttonContexts = [];
             _this.authorizePaths = {};
-            _this.buttonApplyAuthorize = {};
             _this.commonConst = ComCtxConstants.COMMON;
+            _this.buttonApplyAuthorize = {};
             _this._defaultTableClass = 'new-table scr-table crud-list-table';
             _this._tableClass = '';
             _this._showSettingsRowColor = false;
@@ -21613,11 +21680,19 @@
             _this.filter_column = [];
             _this.dataAdvance = {};
             _this.searchModel = {};
+            _this.authorizeButtonKey = '';
+            _this.lstButtonPermission = [];
+            _this.lstButtonTemplate = [];
+            _this.isBtnReady = false;
+            _this.isSuperUser = false;
             _this.showFormWorkflow = false;
             _this.headerWorkflow = '';
+            _this.lstBtnAuthorizeMenu = [];
             _this.popupSizeWorkflow = new PopupSize({ width: 950, height: 540 });
             _this.showHistoryWorkflow = false;
+            _this.showAllButtons = false;
             _this.hiddenBtnFunction = false;
+            _this.lstButtonAction = [];
             // Biến để kiểm tra lần click đầu tiên của user vào dòng trên grid
             // Sử dụng để fix bug set selected row từ form cha, nhưng vào form con ấn sang row khác nó k bỏ selected row đã set từ bên ngoài
             _this.firstRowClick = true;
@@ -21651,6 +21726,11 @@
             _this.detailTaskModel = new DialogModel({
                 header: 'Chi tiết công việc'
             });
+            _this.buttonAuthorizeModel = new DialogModel({
+                header: 'Phân quyền nút chức năng',
+                popupSize: new PopupSize({ width: 1000, height: 700 }),
+                data: { dataSouce: [] }
+            });
             _this.shareLinkModel = new DialogModel({
                 header: 'Chia sẻ quyền',
                 popupSize: new PopupSize({ width: 650, height: 310 })
@@ -21660,7 +21740,6 @@
             });
             _this.BUTTON_PHAN_QUYEN = ButtonPermission.BUTTON_PHAN_QUYEN;
             _this.BUTTON_CAU_HINH_QUY_TRINH = ButtonPermission.BUTTON_CAU_HINH_QUY_TRINH;
-            _this.lstButtonPermission = [];
             _this.buttonPermissionMap = new Map();
             _this.sourceIcon = {};
             _this.stopCalculatingFunctionColumnWidth = false;
@@ -21906,6 +21985,7 @@
             _this._templateInstanceService = _this._injector.get(TemplateInstanceService);
             _this._printService = _this._injector.get(PrintService);
             _this._federationService = _this._injector.get(FederationService);
+            _this._basePermissionService = _this._injector.get(BasePermissionService);
             _this.handleCheckAll = _this.handleCheckAll.bind(_this);
             _this.handleCheckAll_Group = _this.handleCheckAll_Group.bind(_this);
             _this.environment = _this._moduleConfigService.getConfig().environment;
@@ -21981,7 +22061,7 @@
             configurable: true
         });
         ListComponentBase.prototype.ngOnInit = function () {
-            var e_1, _b;
+            var e_1, _f;
             var _this = this;
             this.subscribe(ComCtxConstants.COMMON.ENTITY_METADATA_RELOADED, function (service) {
                 _this.entityMetadataService = service;
@@ -22004,7 +22084,7 @@
             }
             if (!this.setting.hiddenTrinhKy || !this.setting.disableShare) {
                 if (!this.menuButtons) {
-                    this.menuButtons = function () { return __awaiter(_this, void 0, void 0, function () { return __generator(this, function (_b) {
+                    this.menuButtons = function () { return __awaiter(_this, void 0, void 0, function () { return __generator(this, function (_f) {
                         return [2 /*return*/, []];
                     }); }); };
                 }
@@ -22031,11 +22111,12 @@
             var temp = userService.getCurrentUser();
             if (temp != null) {
                 this.currentUser = new TnUser(userService.getCurrentUser());
+                this.isSuperUser = this.currentUser.issuperuser.toLowerCase() === 'true';
             }
             if (this.currentUser == null) {
                 try {
-                    for (var _c = __values(this.lstButtonPermission), _d = _c.next(); !_d.done; _d = _c.next()) {
-                        var buttonPermissionCode = _d.value;
+                    for (var _g = __values(this.lstButtonPermission), _h = _g.next(); !_h.done; _h = _g.next()) {
+                        var buttonPermissionCode = _h.value;
                         var buttonPermission = (this.setting.baseService.serviceCode + "/" + this.setting.baseService.entityName + "/" + buttonPermissionCode).toUpperCase();
                         this.buttonPermissionMap.set(buttonPermission, false);
                     }
@@ -22043,7 +22124,7 @@
                 catch (e_1_1) { e_1 = { error: e_1_1 }; }
                 finally {
                     try {
-                        if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
+                        if (_h && !_h.done && (_f = _g.return)) _f.call(_g);
                     }
                     finally { if (e_1) throw e_1.error; }
                 }
@@ -22054,13 +22135,13 @@
                 && (this._moduleConfigService.getConfig().environment.ignoreAdmin === true
                     || this.currentUser.isadmin.toLowerCase() !== 'true')) {
                 this._permissionService.getServicePermission(this.setting.baseService.serviceCode).then(function (result) {
-                    var e_2, _b;
+                    var e_2, _f;
                     var _a;
                     var lstBasePermission = result;
                     _this.lstButtonPermission = (_a = _this._moduleConfigService.getConfig().environment.buttonPermissions) !== null && _a !== void 0 ? _a : [];
                     try {
-                        for (var _c = __values(_this.lstButtonPermission), _d = _c.next(); !_d.done; _d = _c.next()) {
-                            var buttonPermissionCode = _d.value;
+                        for (var _g = __values(_this.lstButtonPermission), _h = _g.next(); !_h.done; _h = _g.next()) {
+                            var buttonPermissionCode = _h.value;
                             var buttonPermission = (_this.setting.baseService.serviceCode + "/" + _this.setting.baseService.entityName + "/" + buttonPermissionCode).toUpperCase();
                             _this.buttonPermissionMap.set(buttonPermission, lstBasePermission.includes(buttonPermission));
                         }
@@ -22068,7 +22149,7 @@
                     catch (e_2_1) { e_2 = { error: e_2_1 }; }
                     finally {
                         try {
-                            if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
+                            if (_h && !_h.done && (_f = _g.return)) _f.call(_g);
                         }
                         finally { if (e_2) throw e_2.error; }
                     }
@@ -22136,7 +22217,7 @@
             this.buildFilterColumn(this.setting.cols);
         };
         ListComponentBase.prototype.extendColumns = function (cols, appendCol) {
-            var e_3, _b;
+            var e_3, _f;
             var _this = this;
             if (appendCol === void 0) { appendCol = true; }
             this.setting.fieldNeedGetRef = [];
@@ -22282,7 +22363,7 @@
             catch (e_3_1) { e_3 = { error: e_3_1 }; }
             finally {
                 try {
-                    if (cols_1_1 && !cols_1_1.done && (_b = cols_1.return)) _b.call(cols_1);
+                    if (cols_1_1 && !cols_1_1.done && (_f = cols_1.return)) _f.call(cols_1);
                 }
                 finally { if (e_3) throw e_3.error; }
             }
@@ -22305,7 +22386,7 @@
             });
         };
         ListComponentBase.prototype.formatColumns = function (cols) {
-            var e_4, _b;
+            var e_4, _f;
             try {
                 for (var cols_2 = __values(cols), cols_2_1 = cols_2.next(); !cols_2_1.done; cols_2_1 = cols_2.next()) {
                     var col = cols_2_1.value;
@@ -22321,13 +22402,13 @@
             catch (e_4_1) { e_4 = { error: e_4_1 }; }
             finally {
                 try {
-                    if (cols_2_1 && !cols_2_1.done && (_b = cols_2.return)) _b.call(cols_2);
+                    if (cols_2_1 && !cols_2_1.done && (_f = cols_2.return)) _f.call(cols_2);
                 }
                 finally { if (e_4) throw e_4.error; }
             }
         };
         ListComponentBase.prototype.getColumnSetting = function (colGroup) {
-            var e_5, _b;
+            var e_5, _f;
             this.setting.groupColumn = colGroup;
             var dataSetting = localStorage.getItem(ComCtxConstants.LOCALSTORAGE_KEY.COLUMN_SETTING);
             if (dataSetting) {
@@ -22359,7 +22440,7 @@
                 catch (e_5_1) { e_5 = { error: e_5_1 }; }
                 finally {
                     try {
-                        if (settings_1_1 && !settings_1_1.done && (_b = settings_1.return)) _b.call(settings_1);
+                        if (settings_1_1 && !settings_1_1.done && (_f = settings_1.return)) _f.call(settings_1);
                     }
                     finally { if (e_5) throw e_5.error; }
                 }
@@ -22614,14 +22695,14 @@
         };
         ListComponentBase.prototype.handleSearch = function (data) {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0:
                             this.filter_commonSearch = data.filters;
                             this.dataSearchCommon = data.dataForm;
                             return [4 /*yield*/, this.onSearched.emit(data)];
                         case 1:
-                            _b.sent();
+                            _f.sent();
                             this.setting.pageSetting.page = 1;
                             this.getData();
                             return [2 /*return*/];
@@ -22659,17 +22740,17 @@
             if (isTree === void 0) { isTree = false; }
             return __awaiter(this, void 0, void 0, function () {
                 var rs;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0:
                             if (!this.setting.showConfirmExport) return [3 /*break*/, 2];
                             return [4 /*yield*/, this._notifierService.showConfirm('Bạn có chắc chắn muốn xuất bản ghi đã chọn (Và các bản ghi con tương ứng)', 'Xác nhận xuất file')];
                         case 1:
-                            rs = _b.sent();
+                            rs = _f.sent();
                             if (!rs) {
                                 return [2 /*return*/];
                             }
-                            _b.label = 2;
+                            _f.label = 2;
                         case 2:
                             switch (this.setting.exportItemsMode) {
                                 case exports.ExportItemsMode.FromHtml:
@@ -22690,17 +22771,17 @@
             if (isTree === void 0) { isTree = false; }
             return __awaiter(this, void 0, void 0, function () {
                 var rs, header, element, tableEle, headEle, bodyEle, arrHeadEle, arrRowData, strHeadEle, strBodyEle, css, table;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0:
                             if (!this.setting.showConfirmExport) return [3 /*break*/, 2];
                             return [4 /*yield*/, this._notifierService.showConfirm('Bạn có chắc chắn muốn in bản ghi đã chọn (Và các bản ghi con tương ứng)', 'Xác nhận in file')];
                         case 1:
-                            rs = _b.sent();
+                            rs = _f.sent();
                             if (!rs) {
                                 return [2 /*return*/];
                             }
-                            _b.label = 2;
+                            _f.label = 2;
                         case 2:
                             header = 'Danh sách ' + this.setting.objectName;
                             element = isTree ? this.treeTable.el.nativeElement : this.table.el.nativeElement;
@@ -22884,25 +22965,25 @@
         };
         ListComponentBase.prototype.showContextMenu = function (evt, rowData) {
             return __awaiter(this, void 0, void 0, function () {
-                var _b, _c, shareButtons, showWorkflowAttach;
-                var _d;
-                return __generator(this, function (_e) {
-                    switch (_e.label) {
+                var _f, _g, shareButtons, showWorkflowAttach;
+                var _h;
+                return __generator(this, function (_j) {
+                    switch (_j.label) {
                         case 0:
                             this.rowDataCurrent = rowData;
-                            _b = this;
-                            _c = this.getMenuButtonAuthorized;
+                            _f = this;
+                            _g = this.getMenuButtonAuthorized;
                             return [4 /*yield*/, this.menuButtons(rowData)];
-                        case 1: return [4 /*yield*/, _c.apply(this, [_e.sent()])];
+                        case 1: return [4 /*yield*/, _g.apply(this, [_j.sent()])];
                         case 2:
-                            _b.buttonContexts = _e.sent();
+                            _f.buttonContexts = _j.sent();
                             if (!this.setting.disableShare) {
                                 shareButtons = [
                                     { label: 'Chia sẻ', icon: 'pi pi-link', command: this.createShareLink.bind(this) },
                                     { label: 'Danh sách chia sẻ', icon: 'pi pi-list', command: this.showLinkSharing.bind(this) },
                                     // { label: 'Danh sách nhìn thấy', icon: 'pi pi-list', command: this.showListPermissionByItem.bind(this) }
                                 ];
-                                (_d = this.buttonContexts).push.apply(_d, __spreadArray([], __read(shareButtons)));
+                                (_h = this.buttonContexts).push.apply(_h, __spreadArray([], __read(shareButtons)));
                             }
                             showWorkflowAttach = localStorage.getItem('__showWorkflowAttach');
                             if (showWorkflowAttach == 'true') {
@@ -22924,20 +23005,22 @@
         ListComponentBase.prototype.getMenuButtonAuthorized = function (menuButtons) {
             return __awaiter(this, void 0, void 0, function () {
                 var authorizedButtons, serviceCodeByBase, promises, _loop_3, this_2, menuButtons_1, menuButtons_1_1, item;
-                var e_6, _b;
-                return __generator(this, function (_c) {
-                    switch (_c.label) {
+                var e_6, _f;
+                return __generator(this, function (_g) {
+                    switch (_g.label) {
                         case 0:
                             authorizedButtons = [];
-                            serviceCodeByBase = this.setting.baseService != null ? this.setting.baseService.serviceCode : '';
+                            serviceCodeByBase = this.setting.baseService != null ? this.setting.baseService.serviceCode.toUpperCase() : '';
                             promises = [];
                             _loop_3 = function (item) {
-                                if (!item.authorizationPermission) {
+                                var permission = this_2.lstBtnAuthorizeMenu.find(function (p) { return p.rawText == item.label; });
+                                if (!item.authorizationPermission && !permission) {
                                     authorizedButtons.push(item);
                                     return "continue";
                                 }
                                 var serviceCode = item.authorizationServiceCode ? item.authorizationServiceCode : serviceCodeByBase;
-                                promises.push(this_2._permissionService.isAuthorized(serviceCode, item.authorizationPermission, true).then(function (authorized) {
+                                var permissionCode = permission ? permission.permissionCode : item.authorizationPermission;
+                                promises.push(this_2._permissionService.isAuthorized(serviceCode, permissionCode, true).then(function (authorized) {
                                     if (authorized !== true) {
                                         return;
                                     }
@@ -22954,13 +23037,13 @@
                             catch (e_6_1) { e_6 = { error: e_6_1 }; }
                             finally {
                                 try {
-                                    if (menuButtons_1_1 && !menuButtons_1_1.done && (_b = menuButtons_1.return)) _b.call(menuButtons_1);
+                                    if (menuButtons_1_1 && !menuButtons_1_1.done && (_f = menuButtons_1.return)) _f.call(menuButtons_1);
                                 }
                                 finally { if (e_6) throw e_6.error; }
                             }
                             return [4 /*yield*/, Promise.all(promises)];
                         case 1:
-                            _c.sent();
+                            _g.sent();
                             return [2 /*return*/, authorizedButtons];
                     }
                 });
@@ -23575,10 +23658,10 @@
                 clearTimeout(this.timeout);
         };
         ListComponentBase.prototype.disableMultipleDelete = function () {
-            var e_7, _b;
+            var e_7, _f;
             try {
-                for (var _c = __values(this.model.selectedItems), _d = _c.next(); !_d.done; _d = _c.next()) {
-                    var item = _d.value;
+                for (var _g = __values(this.model.selectedItems), _h = _g.next(); !_h.done; _h = _g.next()) {
+                    var item = _h.value;
                     if (this.disableDelete(item)) {
                         return true;
                     }
@@ -23587,7 +23670,7 @@
             catch (e_7_1) { e_7 = { error: e_7_1 }; }
             finally {
                 try {
-                    if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
+                    if (_h && !_h.done && (_f = _g.return)) _f.call(_g);
                 }
                 finally { if (e_7) throw e_7.error; }
             }
@@ -23658,11 +23741,11 @@
         };
         ListComponentBase.prototype.processBaseData = function () {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0: return [4 /*yield*/, this.preProcessData(this._rawDataSource)];
                         case 1:
-                            _b.sent();
+                            _f.sent();
                             return [2 /*return*/];
                     }
                 });
@@ -23671,11 +23754,11 @@
         ListComponentBase.prototype.preProcessData = function (dataSource) {
             return __awaiter(this, void 0, void 0, function () {
                 var colHasPipe, _loop_4, this_3, colHasPipe_1, colHasPipe_1_1, col;
-                var e_8, _b;
-                return __generator(this, function (_c) {
+                var e_8, _f;
+                return __generator(this, function (_g) {
                     colHasPipe = this.setting.cols.filter(function (x) { return x.pipe; });
                     _loop_4 = function (col) {
-                        var e_9, _d;
+                        var e_9, _h;
                         var _loop_5 = function (item) {
                             this_3.transform(col.pipe, col.asyncPipe, item[col.field]).then(function (rs) {
                                 item["pipe__" + col.field + " "] = rs;
@@ -23690,7 +23773,7 @@
                         catch (e_9_1) { e_9 = { error: e_9_1 }; }
                         finally {
                             try {
-                                if (dataSource_1_1 && !dataSource_1_1.done && (_d = dataSource_1.return)) _d.call(dataSource_1);
+                                if (dataSource_1_1 && !dataSource_1_1.done && (_h = dataSource_1.return)) _h.call(dataSource_1);
                             }
                             finally { if (e_9) throw e_9.error; }
                         }
@@ -23705,7 +23788,7 @@
                     catch (e_8_1) { e_8 = { error: e_8_1 }; }
                     finally {
                         try {
-                            if (colHasPipe_1_1 && !colHasPipe_1_1.done && (_b = colHasPipe_1.return)) _b.call(colHasPipe_1);
+                            if (colHasPipe_1_1 && !colHasPipe_1_1.done && (_f = colHasPipe_1.return)) _f.call(colHasPipe_1);
                         }
                         finally { if (e_8) throw e_8.error; }
                     }
@@ -23716,8 +23799,8 @@
         ListComponentBase.prototype.transform = function (pipe, asyncPipe, value) {
             return __awaiter(this, void 0, void 0, function () {
                 var val, val;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0:
                             if (this.cachedTransforms[value]) {
                                 return [2 /*return*/, this.cachedTransforms[value]];
@@ -23725,7 +23808,7 @@
                             if (!asyncPipe) return [3 /*break*/, 2];
                             return [4 /*yield*/, pipe.transform(value)];
                         case 1:
-                            val = _b.sent();
+                            val = _f.sent();
                             this.cachedTransforms[value] = val;
                             return [2 /*return*/, val];
                         case 2:
@@ -23881,7 +23964,7 @@
             }
         };
         ListComponentBase.prototype.getMinimizeData = function (model) {
-            var e_10, _b;
+            var e_10, _f;
             if (isLiteralObject(model)) {
                 if (model._dropdownvalue != null && model._dropdownvalue !== '') {
                     return model[model._dropdownvalue];
@@ -23907,7 +23990,7 @@
                 catch (e_10_1) { e_10 = { error: e_10_1 }; }
                 finally {
                     try {
-                        if (model_1_1 && !model_1_1.done && (_b = model_1.return)) _b.call(model_1);
+                        if (model_1_1 && !model_1_1.done && (_f = model_1.return)) _f.call(model_1);
                     }
                     finally { if (e_10) throw e_10.error; }
                 }
@@ -24042,8 +24125,8 @@
         };
         ListComponentBase.prototype.handleTableRendered = function () {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0:
                             if (this.table) {
                                 this._processAfterRendered(this.table.el.nativeElement);
@@ -24053,7 +24136,7 @@
                             }
                             return [4 /*yield*/, this.modifyButtonFunctionInRow()];
                         case 1:
-                            _b.sent();
+                            _f.sent();
                             this.onReloaded.emit(true);
                             return [2 /*return*/];
                     }
@@ -24086,42 +24169,42 @@
         ListComponentBase.prototype.modifyButtonFunctionInRow = function () {
             var _a;
             return __awaiter(this, void 0, void 0, function () {
-                var _b, _c, rowData, _d, _e, ex_1, e_11_1;
-                var e_11, _f;
-                return __generator(this, function (_g) {
-                    switch (_g.label) {
+                var _f, _g, rowData, total, _h, ex_1, e_11_1;
+                var e_11, _j;
+                return __generator(this, function (_k) {
+                    switch (_k.label) {
                         case 0:
-                            _g.trys.push([0, 8, 9, 10]);
-                            _b = __values(this.model.dataSource), _c = _b.next();
-                            _g.label = 1;
+                            _k.trys.push([0, 8, 9, 10]);
+                            _f = __values(this.model.dataSource), _g = _f.next();
+                            _k.label = 1;
                         case 1:
-                            if (!!_c.done) return [3 /*break*/, 7];
-                            rowData = _c.value;
-                            _g.label = 2;
+                            if (!!_g.done) return [3 /*break*/, 7];
+                            rowData = _g.value;
+                            _k.label = 2;
                         case 2:
-                            _g.trys.push([2, 5, , 6]);
-                            _d = rowData;
-                            _e = this.getMenuButtonAuthorized;
+                            _k.trys.push([2, 5, , 6]);
+                            _h = this.getMenuButtonAuthorized;
                             return [4 /*yield*/, this.menuButtons(rowData)];
-                        case 3: return [4 /*yield*/, _e.apply(this, [(_a = _g.sent()) !== null && _a !== void 0 ? _a : []])];
+                        case 3: return [4 /*yield*/, _h.apply(this, [(_a = _k.sent()) !== null && _a !== void 0 ? _a : []])];
                         case 4:
-                            _d.disableFunctionRow = (_g.sent()).length < 1 && this.setting.disableShare;
+                            total = (_k.sent());
+                            rowData.disableFunctionRow = total.length < 1 && this.setting.disableShare;
                             return [3 /*break*/, 6];
                         case 5:
-                            ex_1 = _g.sent();
+                            ex_1 = _k.sent();
                             this.hiddenBtnFunction = true;
                             return [2 /*return*/];
                         case 6:
-                            _c = _b.next();
+                            _g = _f.next();
                             return [3 /*break*/, 1];
                         case 7: return [3 /*break*/, 10];
                         case 8:
-                            e_11_1 = _g.sent();
+                            e_11_1 = _k.sent();
                             e_11 = { error: e_11_1 };
                             return [3 /*break*/, 10];
                         case 9:
                             try {
-                                if (_c && !_c.done && (_f = _b.return)) _f.call(_b);
+                                if (_g && !_g.done && (_j = _f.return)) _j.call(_f);
                             }
                             finally { if (e_11) throw e_11.error; }
                             return [7 /*endfinally*/];
@@ -24151,10 +24234,10 @@
         };
         ListComponentBase.prototype.createSearchSchema = function () {
             return __awaiter(this, void 0, void 0, function () {
-                var searchInfo, _b, _c, col, control, e_12_1, _loop_6, this_4, _d, _e, field;
-                var e_12, _f, _g, e_13, _h;
-                return __generator(this, function (_j) {
-                    switch (_j.label) {
+                var searchInfo, _f, _g, col, control, e_12_1, _loop_6, this_4, _h, _j, field;
+                var e_12, _k, _l, e_13, _m;
+                return __generator(this, function (_o) {
+                    switch (_o.label) {
                         case 0:
                             if (this.setting.cols == null) {
                                 return [2 /*return*/, this._notifierService.showWarning('Bạn chưa cấu hình cột cho danh sách')];
@@ -24164,14 +24247,14 @@
                             searchInfo.schema = [];
                             searchInfo.fieldDropdown = {};
                             searchInfo.fieldSearchText = [];
-                            _j.label = 1;
+                            _o.label = 1;
                         case 1:
-                            _j.trys.push([1, 6, 7, 8]);
-                            _b = __values(this.setting.cols), _c = _b.next();
-                            _j.label = 2;
+                            _o.trys.push([1, 6, 7, 8]);
+                            _f = __values(this.setting.cols), _g = _f.next();
+                            _o.label = 2;
                         case 2:
-                            if (!!_c.done) return [3 /*break*/, 5];
-                            col = _c.value;
+                            if (!!_g.done) return [3 /*break*/, 5];
+                            col = _g.value;
                             if (!(col.allowFilter != false && col.rawColumn == null)) return [3 /*break*/, 4];
                             if (col.fullTextSearch) {
                                 if (searchInfo.fieldSearchText.indexOf(col.field) == -1) {
@@ -24184,9 +24267,9 @@
                             }
                             return [4 /*yield*/, this.setting.function.getSearchControl(col.field)];
                         case 3:
-                            control = _j.sent();
+                            control = _o.sent();
                             if (control != null) {
-                                (_g = searchInfo.schema).push.apply(_g, __spreadArray([], __read(control)));
+                                (_l = searchInfo.schema).push.apply(_l, __spreadArray([], __read(control)));
                             }
                             else {
                                 if (col.baseService || (col.dataSource && col.dataSource.length > 0)) {
@@ -24240,18 +24323,18 @@
                                     }
                                 }
                             }
-                            _j.label = 4;
+                            _o.label = 4;
                         case 4:
-                            _c = _b.next();
+                            _g = _f.next();
                             return [3 /*break*/, 2];
                         case 5: return [3 /*break*/, 8];
                         case 6:
-                            e_12_1 = _j.sent();
+                            e_12_1 = _o.sent();
                             e_12 = { error: e_12_1 };
                             return [3 /*break*/, 8];
                         case 7:
                             try {
-                                if (_c && !_c.done && (_f = _b.return)) _f.call(_b);
+                                if (_g && !_g.done && (_k = _f.return)) _k.call(_f);
                             }
                             finally { if (e_12) throw e_12.error; }
                             return [7 /*endfinally*/];
@@ -24271,15 +24354,15 @@
                                 };
                                 this_4 = this;
                                 try {
-                                    for (_d = __values(searchInfo.fieldSearchText), _e = _d.next(); !_e.done; _e = _d.next()) {
-                                        field = _e.value;
+                                    for (_h = __values(searchInfo.fieldSearchText), _j = _h.next(); !_j.done; _j = _h.next()) {
+                                        field = _j.value;
                                         _loop_6(field);
                                     }
                                 }
                                 catch (e_13_1) { e_13 = { error: e_13_1 }; }
                                 finally {
                                     try {
-                                        if (_e && !_e.done && (_h = _d.return)) _h.call(_d);
+                                        if (_j && !_j.done && (_m = _h.return)) _m.call(_h);
                                     }
                                     finally { if (e_13) throw e_13.error; }
                                 }
@@ -24317,8 +24400,8 @@
         ListComponentBase.prototype.getItemWorkflowSetting = function (setting, rowData) {
             return __awaiter(this, void 0, void 0, function () {
                 var workflowSetting;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0:
                             workflowSetting = setting.workflowSettingNew;
                             if (!(setting.isWorkflowTree
@@ -24326,8 +24409,8 @@
                                 && setting.workflowConfigAdvance.getWorkflowSetting)) return [3 /*break*/, 2];
                             return [4 /*yield*/, setting.workflowConfigAdvance.getWorkflowSetting(rowData)];
                         case 1:
-                            workflowSetting = _b.sent();
-                            _b.label = 2;
+                            workflowSetting = _f.sent();
+                            _f.label = 2;
                         case 2:
                             if (!workflowSetting || workflowSetting.workflows.length == 0) {
                                 return [2 /*return*/, this._notifierService.showWarning('Đối tượng chưa được cấu hình quy trình nghiệp vụ')];
@@ -24341,13 +24424,13 @@
             return __awaiter(this, void 0, void 0, function () {
                 var workflowSetting, resultCheckExist, modelTask, contentLink, modelEntity, taskWorkflowSetting, compRef;
                 var _this = this;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0:
                             rowData.__startingWorkflow = true;
                             return [4 /*yield*/, this.getItemWorkflowSetting(this.setting, rowData)];
                         case 1:
-                            workflowSetting = _b.sent();
+                            workflowSetting = _f.sent();
                             if (!workflowSetting) {
                                 rowData.__startingWorkflow = false;
                                 return [2 /*return*/];
@@ -24359,7 +24442,7 @@
                                     this.newFilter('entityKey', exports.Operator.equal, rowData.id)
                                 ])];
                         case 2:
-                            resultCheckExist = (_b.sent());
+                            resultCheckExist = (_f.sent());
                             if (!resultCheckExist.success) {
                                 rowData.__startingWorkflow = false;
                                 return [2 /*return*/, this._notifierService.showWarning('Có lỗi xảy ra khi kiểm tra trạng thái đã tạo công việc hay chưa')];
@@ -24371,8 +24454,8 @@
                             if (!this.setting.modifyRowDataForTask) return [3 /*break*/, 4];
                             return [4 /*yield*/, this.setting.modifyRowDataForTask(rowData)];
                         case 3:
-                            _b.sent();
-                            _b.label = 4;
+                            _f.sent();
+                            _f.label = 4;
                         case 4:
                             modelTask = {
                                 id: this._commonService.guid(),
@@ -24387,7 +24470,7 @@
                             };
                             return [4 /*yield*/, this.getCopyPath(this.setting, rowData)];
                         case 5:
-                            contentLink = _b.sent();
+                            contentLink = _f.sent();
                             if (contentLink) {
                                 modelEntity = this.parseAttachLink(contentLink);
                                 modelTask.dinhKemNghiepVuDtos = modelEntity;
@@ -24395,27 +24478,27 @@
                             if (!this.setting.modifyItemTask) return [3 /*break*/, 7];
                             return [4 /*yield*/, this.setting.modifyItemTask(modelTask, rowData)];
                         case 6:
-                            _b.sent();
-                            _b.label = 7;
+                            _f.sent();
+                            _f.label = 7;
                         case 7:
                             if (!(workflowSetting.autoStartTask
                                 && workflowSetting.idLoaiCongViecDefault)) return [3 /*break*/, 9];
                             return [4 /*yield*/, this._dmLoaiCongViecService.getWorkflowSettingByIdLoaiCongViec(workflowSetting.idLoaiCongViecDefault)];
                         case 8:
-                            taskWorkflowSetting = _b.sent();
+                            taskWorkflowSetting = _f.sent();
                             if (taskWorkflowSetting != null && taskWorkflowSetting.workflowCode) {
                                 modelTask[FieldWorkflowCodeInCrudForm] = taskWorkflowSetting.workflowCode;
                                 this.insertTaskAndReload(modelTask, rowData, taskWorkflowSetting);
                                 rowData.__startingWorkflow = false;
                                 return [2 /*return*/];
                             }
-                            _b.label = 9;
+                            _f.label = 9;
                         case 9: return [3 /*break*/, 14];
                         case 10:
                             if (!(workflowSetting.workflows.length == 1)) return [3 /*break*/, 12];
                             return [4 /*yield*/, this.startWorkflow(rowData, workflowSetting.workflows[0])];
                         case 11:
-                            _b.sent();
+                            _f.sent();
                             rowData.__startingWorkflow = false;
                             return [2 /*return*/];
                         case 12:
@@ -24424,13 +24507,13 @@
                             rowData.__startingWorkflow = false;
                             return [4 /*yield*/, this._federationService.loadRemoteNewComponent('commonapp', 'StartWorkflowComponent', this.startWorkflowViewContainer)];
                         case 13:
-                            compRef = _b.sent();
+                            compRef = _f.sent();
                             dialog.buttonTemplateInput = compRef.instance.buttonTemplate;
                             compRef.workflows = workflowSetting.workflows;
                             compRef.defaultWorkflow = workflowSetting.workflowCode;
                             compRef.instance.onSaved.subscribe(function (event) { return _this.handleStartWorkflowFromDialog(event); });
                             compRef.instance.onCancel.subscribe(function (event) { return _this.startWorkflowModel.showEditForm = false; });
-                            _b.label = 14;
+                            _f.label = 14;
                         case 14: return [2 /*return*/];
                     }
                 });
@@ -24476,25 +24559,25 @@
         };
         ListComponentBase.prototype.insertTaskAndReload = function (modelTask, rowData, workflowSetting) {
             return __awaiter(this, void 0, void 0, function () {
-                var _b;
+                var _f;
                 var _this = this;
-                return __generator(this, function (_c) {
-                    switch (_c.label) {
+                return __generator(this, function (_g) {
+                    switch (_g.label) {
                         case 0:
                             if (!this.setting.getDataForNextFirstStepTask) return [3 /*break*/, 2];
-                            _b = modelTask;
+                            _f = modelTask;
                             return [4 /*yield*/, this.setting.getDataForNextFirstStepTask(rowData)];
                         case 1:
-                            _b.itemWorkflowHistory = _c.sent();
+                            _f.itemWorkflowHistory = _g.sent();
                             modelTask.itemWorkflowHistory = this.tongHopWorkflowHistoryForNextFirstStep(modelTask.itemWorkflowHistory, modelTask, workflowSetting, modelTask[FieldWorkflowCodeInCrudForm]);
-                            _c.label = 2;
+                            _g.label = 2;
                         case 2: return [4 /*yield*/, this._congViecService.post(modelTask)
                                 .then(function (res) { return _this.handleResponse(res, '', function (f) {
                                 _this.onStartedWorkflow.emit(rowData.id);
                                 _this.getData();
                             }); })];
                         case 3:
-                            _c.sent();
+                            _g.sent();
                             return [2 /*return*/];
                     }
                 });
@@ -24514,9 +24597,9 @@
             if (dialogDetailTask === void 0) { dialogDetailTask = null; }
             if (dialogChoYKienForm === void 0) { dialogChoYKienForm = null; }
             return __awaiter(this, void 0, void 0, function () {
-                var _b;
-                return __generator(this, function (_c) {
-                    switch (_c.label) {
+                var _f;
+                return __generator(this, function (_g) {
+                    switch (_g.label) {
                         case 0:
                             if (this.showingActionWorkflow)
                                 return [2 /*return*/];
@@ -24525,10 +24608,10 @@
                             this.dialogProcessWorkflowForm = dialogProcessWorkflowForm;
                             this.dialogDetailTask = dialogDetailTask;
                             this.dialogChoYKienForm = dialogChoYKienForm;
-                            _b = this;
+                            _f = this;
                             return [4 /*yield*/, this.getButtonContext(rowData)];
                         case 1:
-                            _b.buttonContexts = _c.sent();
+                            _f.buttonContexts = _g.sent();
                             if (this.buttonContexts.length === 0) {
                                 return [2 /*return*/];
                             }
@@ -24542,20 +24625,20 @@
             return __awaiter(this, void 0, void 0, function () {
                 var resultGetActionWorkflow, buttonContexts;
                 var _this = this;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0:
                             this.showingActionWorkflow = true;
                             resultGetActionWorkflow = null;
                             if (!(!this.setting.isWorkflowTree && this.setting.workflowSettingNew.createTaskInstead)) return [3 /*break*/, 2];
                             return [4 /*yield*/, this.getActionWorkflowByTask(rowData, rowData.dialogHistory)];
                         case 1:
-                            resultGetActionWorkflow = _b.sent();
+                            resultGetActionWorkflow = _f.sent();
                             return [3 /*break*/, 4];
                         case 2: return [4 /*yield*/, this.getActionWorkflow(rowData)];
                         case 3:
-                            resultGetActionWorkflow = _b.sent();
-                            _b.label = 4;
+                            resultGetActionWorkflow = _f.sent();
+                            _f.label = 4;
                         case 4:
                             this.showingActionWorkflow = false;
                             if (!Array.isArray(resultGetActionWorkflow)) {
@@ -24579,11 +24662,11 @@
         ListComponentBase.prototype.getActionWorkflow = function (rowData) {
             return __awaiter(this, void 0, void 0, function () {
                 var workflowSetting;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0: return [4 /*yield*/, this.getItemWorkflowSetting(this.setting, rowData)];
                         case 1:
-                            workflowSetting = _b.sent();
+                            workflowSetting = _f.sent();
                             if (!workflowSetting)
                                 return [2 /*return*/];
                             return [2 /*return*/, this._getActionWorkflowBase(this.setting, rowData, workflowSetting)];
@@ -24593,21 +24676,21 @@
         };
         ListComponentBase.prototype.getActionWorkflowByTask = function (rowData, dialog) {
             return __awaiter(this, void 0, void 0, function () {
-                var _b, workflowPermissionDetailService, userService, result, workflowSetting, crudListSetting;
-                return __generator(this, function (_c) {
-                    switch (_c.label) {
+                var _f, workflowPermissionDetailService, userService, result, workflowSetting, crudListSetting;
+                return __generator(this, function (_g) {
+                    switch (_g.label) {
                         case 0:
                             if (!!rowData.__isGotCongViec) return [3 /*break*/, 2];
-                            _b = rowData;
+                            _f = rowData;
                             return [4 /*yield*/, this._congViecService.getDetailByFilter([
                                     this.newFilter('serviceCode', exports.Operator.equal, this.setting.baseService.serviceCode),
                                     this.newFilter('entity', exports.Operator.equal, this.setting.baseService.entityName),
                                     this.newFilter('entityKey', exports.Operator.equal, rowData.id)
                                 ])];
                         case 1:
-                            _b.__itemCongViec = (_c.sent()).data;
+                            _f.__itemCongViec = (_g.sent()).data;
                             rowData.__isGotCongViec = true;
-                            _c.label = 2;
+                            _g.label = 2;
                         case 2:
                             rowData = rowData.__itemCongViec;
                             if (!rowData) {
@@ -24620,12 +24703,12 @@
                             return [4 /*yield*/, workflowPermissionDetailService.changeEndpoint(this._congViecService)
                                     .appendInfoForWorkflow(userService.getUserIdCombine(), [rowData], 'id', this.setting.ignoreWorkflow)];
                         case 3:
-                            result = _c.sent();
+                            result = _g.sent();
                             if (result !== true)
                                 return [2 /*return*/];
                             return [4 /*yield*/, this._dmLoaiCongViecService.getWorkflowSettingByIdLoaiCongViec(rowData.idLoaiCongViec)];
                         case 4:
-                            workflowSetting = _c.sent();
+                            workflowSetting = _g.sent();
                             if (workflowSetting == null)
                                 return [2 /*return*/];
                             crudListSetting = new CrudListSetting();
@@ -24639,8 +24722,8 @@
             return __awaiter(this, void 0, void 0, function () {
                 var buttonContexts, itemWorkflowSetting_1, actions_1, actionAllows, workflowHistoryService, userService, userId, userIdStringUpper, itemWorkflowHistoryLast;
                 var _this = this;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0:
                             this.currentItem = rowData;
                             this.buttonContexts = [];
@@ -24655,7 +24738,7 @@
                             actions_1 = itemWorkflowSetting_1.data.actions[rowData.__trangThai];
                             return [4 /*yield*/, crudListSetting.baseService.getActionAllow(rowData.id)];
                         case 2:
-                            actionAllows = (_b.sent()).data;
+                            actionAllows = (_f.sent()).data;
                             if (actionAllows) {
                                 actionAllows.forEach(function (actionCode) {
                                     var action = actions_1.find(function (q) { return q.code == actionCode; });
@@ -24684,7 +24767,7 @@
                             }
                             return [4 /*yield*/, workflowHistoryService.changeEndpoint(crudListSetting.baseService).getLastByItemId(rowData.id)];
                         case 3:
-                            itemWorkflowHistoryLast = (_b.sent()).data;
+                            itemWorkflowHistoryLast = (_f.sent()).data;
                             if (itemWorkflowHistoryLast
                                 && itemWorkflowHistoryLast.actionCode != MaActionBatDauQuyTrinh
                                 && itemWorkflowHistoryLast.userIdCreated.toUpperCase() == userIdStringUpper
@@ -24704,7 +24787,7 @@
                                 label: exports.ButtonTextActionCongViec.XEM_LICH_SU,
                                 command: function () { return _this.viewHistoryWorkflow(crudListSetting, rowData); }
                             });
-                            _b.label = 4;
+                            _f.label = 4;
                         case 4: return [2 /*return*/, buttonContexts];
                     }
                 });
@@ -24714,13 +24797,13 @@
             return __awaiter(this, void 0, void 0, function () {
                 var itemTask, taskFormModel, compRef;
                 var _this = this;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0: return [4 /*yield*/, this._congViecService.getDetailByFilter([
                                 this.newFilter('entityKey', exports.Operator.equal, rowData.id)
                             ])];
                         case 1:
-                            itemTask = (_b.sent()).data;
+                            itemTask = (_f.sent()).data;
                             if (itemTask == null) {
                                 return [2 /*return*/, this._notifierService.showWarning('Không tìm thấy công việc gắn với bản ghi')];
                             }
@@ -24731,7 +24814,7 @@
                             this.detailTaskModel.showEditForm = true;
                             return [4 /*yield*/, this._federationService.loadRemoteNewComponent('congviec', 'BaseCongViecFormComponent', this.detailTaskViewContainer)];
                         case 2:
-                            compRef = _b.sent();
+                            compRef = _f.sent();
                             if (this.dialogDetailTask) {
                                 this.dialogDetailTask.buttonTemplateInput = compRef.instance.buttonTemplate;
                             }
@@ -24768,11 +24851,11 @@
             return __awaiter(this, void 0, void 0, function () {
                 var workflowSetting, compRef;
                 var _this = this;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0: return [4 /*yield*/, this.getItemWorkflowSetting(crudListSetting, rowData)];
                         case 1:
-                            workflowSetting = _b.sent();
+                            workflowSetting = _f.sent();
                             if (!workflowSetting)
                                 return [2 /*return*/];
                             this.currentItem = rowData;
@@ -24782,7 +24865,7 @@
                             this.workflowHistoryModel.showEditForm = true;
                             return [4 /*yield*/, this._federationService.loadRemoteNewComponent('commonapp', 'WorkflowHistoryNewComponent', this.workflowHistoryNewViewContainer)];
                         case 2:
-                            compRef = _b.sent();
+                            compRef = _f.sent();
                             compRef.instance.businessSetting = crudListSetting;
                             compRef.instance.tableName = this.workflowHistoryModel.data.tableName;
                             compRef.instance.item = rowData;
@@ -24800,8 +24883,8 @@
             return __awaiter(this, void 0, void 0, function () {
                 var domainNewTab, compRef;
                 var _this = this;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0:
                             if (workflowAction.openNewTab) {
                                 domainNewTab = workflowAction.domainNewTab;
@@ -24823,7 +24906,7 @@
                             this.processWorkflowModel.header = workflowAction.name;
                             return [4 /*yield*/, this._federationService.loadRemoteNewComponent('commonapp', 'ProcessWorkflowFormComponent', this.processWorkflowFormViewContainer)];
                         case 1:
-                            compRef = _b.sent();
+                            compRef = _f.sent();
                             if (this.dialogProcessWorkflowForm) {
                                 this.dialogProcessWorkflowForm.buttonTemplateInput = compRef.instance.buttonTemplate;
                             }
@@ -24842,15 +24925,15 @@
             return __awaiter(this, void 0, void 0, function () {
                 var compRef;
                 var _this = this;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0:
                             this.choYKienModel.data.rowData = rowData;
                             this.choYKienModel.data.setting = crudListSetting;
                             this.choYKienModel.showEditForm = true;
                             return [4 /*yield*/, this._federationService.loadRemoteNewComponent('commonapp', 'ChoYKienFormComponent', this.choYKienFormViewContainer)];
                         case 1:
-                            compRef = _b.sent();
+                            compRef = _f.sent();
                             if (this.dialogChoYKienForm) {
                                 this.dialogChoYKienForm.buttonTemplateInput = compRef.instance.buttonTemplate;
                             }
@@ -24866,8 +24949,8 @@
         ListComponentBase.prototype.startWorkflow = function (rowData, workflow) {
             return __awaiter(this, void 0, void 0, function () {
                 var _this = this;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0: return [4 /*yield*/, this.setting.baseService.startWorkflow(rowData.id, workflow.code)
                                 .then(function (res) { return _this.handleResponse(res, 'Chạy quy trình thành công', function (f) {
                                 _this.onStartedWorkflow.emit(rowData.id);
@@ -24875,7 +24958,7 @@
                                 _this.getData();
                             }); })];
                         case 1:
-                            _b.sent();
+                            _f.sent();
                             return [2 /*return*/];
                     }
                 });
@@ -24900,7 +24983,7 @@
         ListComponentBase.prototype.createShareLink = function () {
             return __awaiter(this, void 0, void 0, function () {
                 var rowData;
-                return __generator(this, function (_b) {
+                return __generator(this, function (_f) {
                     if (!this.setting.checkReadyToTrinhKy()) {
                         return [2 /*return*/, this._notifierService.showWarning('Đang tải dữ liệu danh sách, chờ một lúc rồi thử lại')];
                     }
@@ -24912,17 +24995,17 @@
         };
         ListComponentBase.prototype.createShareLinkMultiple = function () {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_b) {
+                return __generator(this, function (_f) {
                     this.showShareLinkForm(this.model.selectedItems);
                     return [2 /*return*/];
                 });
             });
         };
         ListComponentBase.prototype.disableMultipleCopyLink = function () {
-            var e_14, _b;
+            var e_14, _f;
             try {
-                for (var _c = __values(this.model.selectedItems), _d = _c.next(); !_d.done; _d = _c.next()) {
-                    var item = _d.value;
+                for (var _g = __values(this.model.selectedItems), _h = _g.next(); !_h.done; _h = _g.next()) {
+                    var item = _h.value;
                     if (this.disableCopyLink(item)) {
                         return true;
                     }
@@ -24931,7 +25014,7 @@
             catch (e_14_1) { e_14 = { error: e_14_1 }; }
             finally {
                 try {
-                    if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
+                    if (_h && !_h.done && (_f = _g.return)) _f.call(_g);
                 }
                 finally { if (e_14) throw e_14.error; }
             }
@@ -24951,7 +25034,7 @@
         };
         ListComponentBase.prototype.showSettingsPermission = function () {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_b) {
+                return __generator(this, function (_f) {
                     if (this.creatingSearchInfo)
                         return [2 /*return*/];
                     this._showSettingsPermission = true;
@@ -24963,13 +25046,13 @@
             return __awaiter(this, void 0, void 0, function () {
                 var compRef;
                 var _this = this;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0:
                             this._showSettingsWorkflow = true;
                             return [4 /*yield*/, this._federationService.loadRemoteNewComponent('commonapp', 'WorkflowSettingDialogComponent', this.workflowSettingDialogViewContainer)];
                         case 1:
-                            compRef = _b.sent();
+                            compRef = _f.sent();
                             compRef.instance.parentSetting = this.setting;
                             compRef.instance.parentContext = this.context;
                             compRef.instance.parentModel = this.model;
@@ -24985,13 +25068,13 @@
             return __awaiter(this, void 0, void 0, function () {
                 var compRef;
                 var _this = this;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0:
                             this.workflowSettingModel.showEditForm = true;
                             return [4 /*yield*/, this._federationService.loadRemoteNewComponent('commonapp', 'WorkflowSettingNewComponent', this.workflowsettingnewViewContainer)];
                         case 1:
-                            compRef = _b.sent();
+                            compRef = _f.sent();
                             dialog.buttonTemplateInput = compRef.instance.buttonTemplate;
                             compRef.instance.parentSetting = this.setting;
                             compRef.instance.onSaved.subscribe(function (event) { return _this.onSaveWorkflowSettingsNew(null); });
@@ -25005,13 +25088,13 @@
             return __awaiter(this, void 0, void 0, function () {
                 var compRef;
                 var _this = this;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0:
                             this.permissionSharingModel.showEditForm = true;
                             return [4 /*yield*/, this._federationService.loadRemoteNewComponent('commonapp', 'PermissionSharingComponent', this.permissionSharingViewContainer)];
                         case 1:
-                            compRef = _b.sent();
+                            compRef = _f.sent();
                             compRef.instance.item = this.rowDataCurrent;
                             compRef.instance.baseService = this.setting.baseService;
                             compRef.instance.onCancel.subscribe(function (event) { return _this.permissionSharingModel.showEditForm = false; });
@@ -25023,13 +25106,13 @@
         ListComponentBase.prototype.showAttachedTask = function () {
             return __awaiter(this, void 0, void 0, function () {
                 var compRef;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0:
                             this.attachedTaskModel.showEditForm = true;
                             return [4 /*yield*/, this._federationService.loadRemoteNewComponent('congviec', 'BaseCongViecComponent', this.baseCongViecViewContainer)];
                         case 1:
-                            compRef = _b.sent();
+                            compRef = _f.sent();
                             compRef.instance.serviceCode = this.setting.baseService.serviceCode;
                             compRef.instance.entity = this.setting.baseService.entityName;
                             compRef.instance.itemIdAttach = this.rowDataCurrent.id;
@@ -25042,13 +25125,13 @@
             return __awaiter(this, void 0, void 0, function () {
                 var compRef;
                 var _this = this;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0:
                             this.permissionListModel.showEditForm = true;
                             return [4 /*yield*/, this._federationService.loadRemoteNewComponent('commonapp', 'WorkflowPermissionComponent', this.workflowPermissionViewContainer)];
                         case 1:
-                            compRef = _b.sent();
+                            compRef = _f.sent();
                             // this.dialogWorkflowPermission.buttonTemplateInput = compRef.instance.buttonTemplate;
                             compRef.instance.item = this.rowDataCurrent;
                             compRef.instance.businessSetting = this.setting;
@@ -25105,6 +25188,137 @@
                 });
             });
         };
+        ListComponentBase.prototype.handleShowFormSettingButton = function () {
+            var _a, _b, _c, _d, _e;
+            return __awaiter(this, void 0, void 0, function () {
+                var lstBtnCustom, lstBtnAction, _loop_7, this_5, lstBtnCustom_1, lstBtnCustom_1_1, item, lstMenuButtons, buttonSetting;
+                var e_15, _f;
+                var _this = this;
+                return __generator(this, function (_g) {
+                    switch (_g.label) {
+                        case 0:
+                            // Tổng hợp dữ liệu các nút từ ngTemplate + base + menuButton
+                            this.buttonAuthorizeModel.data.dataSource = [];
+                            lstBtnCustom = this.lstButtonElement[exports.EnumProperties.RESULTS].concat(this.lstButtonTemplate);
+                            lstBtnAction = [];
+                            _loop_7 = function (item) {
+                                var buttonText = (_c = (_b = (_a = item.nativeElement.getAttribute(exports.EnumProperties.LABEL)) !== null && _a !== void 0 ? _a : item.nativeElement.getAttribute(exports.EnumProperties.NG_REFLECT_TEXT)) !== null && _b !== void 0 ? _b : item.nativeElement.getAttribute(exports.EnumProperties.NG_REFLECT_LABEL)) !== null && _c !== void 0 ? _c : item.nativeElement.innerText;
+                                if (!buttonText || lstBtnAction.some(function (p) { return p.rawText === buttonText; })) {
+                                    return "continue";
+                                }
+                                this_5.addButtonAction(lstBtnAction, this_5.authorizeButtonKey, buttonText);
+                            };
+                            this_5 = this;
+                            try {
+                                for (lstBtnCustom_1 = __values(lstBtnCustom), lstBtnCustom_1_1 = lstBtnCustom_1.next(); !lstBtnCustom_1_1.done; lstBtnCustom_1_1 = lstBtnCustom_1.next()) {
+                                    item = lstBtnCustom_1_1.value;
+                                    _loop_7(item);
+                                }
+                            }
+                            catch (e_15_1) { e_15 = { error: e_15_1 }; }
+                            finally {
+                                try {
+                                    if (lstBtnCustom_1_1 && !lstBtnCustom_1_1.done && (_f = lstBtnCustom_1.return)) _f.call(lstBtnCustom_1);
+                                }
+                                finally { if (e_15) throw e_15.error; }
+                            }
+                            return [4 /*yield*/, this.menuButtons({})];
+                        case 1:
+                            lstMenuButtons = (_d = _g.sent()) !== null && _d !== void 0 ? _d : [];
+                            if (lstMenuButtons.length) {
+                                lstMenuButtons.forEach(function (item) { return _this.addButtonAction(lstBtnAction, _this.authorizeButtonKey, item.label); });
+                            }
+                            buttonSetting = JSON.parse(sessionStorage.getItem(ComCtxConstants.LOCALSTORAGE_KEY.BUTTON_AUTHORIZE) || '{}');
+                            ((_e = buttonSetting[this.authorizeButtonKey]) === null || _e === void 0 ? void 0 : _e.length) && buttonSetting[this.authorizeButtonKey].forEach(function (item) {
+                                var permissionItem = lstBtnAction.find(function (p) { return p.permissionCode == item.code; });
+                                if (permissionItem) {
+                                    permissionItem.isAuthorize = true;
+                                    permissionItem.id = item.id;
+                                }
+                            });
+                            this.buttonAuthorizeModel.data.dataSource = lstBtnAction;
+                            this.buttonAuthorizeModel.showEditForm = true;
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        ListComponentBase.prototype.onShowFormSettingButton = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
+                return __generator(this, function (_f) {
+                    this.checkedAll = true;
+                    this.handleCheckAll();
+                    setTimeout(function () {
+                        _this.handleShowFormSettingButton();
+                    }, 100);
+                    return [2 /*return*/];
+                });
+            });
+        };
+        ListComponentBase.prototype.setBtnReady = function (isReady) {
+            this.isBtnReady = isReady;
+        };
+        ListComponentBase.prototype.addButtonAction = function (lstBtnAction, key, rawText, id) {
+            id !== null && id !== void 0 ? id : (id = this._commonService.guid());
+            var permissionCode = this._commonService.convertStringToUnSign(rawText).replace(/ /g, '_').toUpperCase();
+            lstBtnAction.push(new ButtonAction({
+                id: id,
+                rawText: rawText,
+                permissionCode: "[" + key + "]_[" + permissionCode + "]"
+            }));
+        };
+        ListComponentBase.prototype.setAuthorizeButton = function (lstButtonTemplate) {
+            var _a, _b;
+            return __awaiter(this, void 0, void 0, function () {
+                var filterPermission, lstPermissionCode, buttonSetting, lstMenuButton, lstMenuButtons;
+                var _this = this;
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
+                        case 0:
+                            this.authorizeButtonKey = window.location.pathname.substring(1).toUpperCase().replace(/\//g, '_');
+                            if (i0.isDevMode()) {
+                                this.authorizeButtonKey = this.serviceCode.toUpperCase() + "_" + window.location.pathname.substring(1).toUpperCase();
+                            }
+                            filterPermission = [this.newFilter('code', exports.Operator.contain, "[" + this.authorizeButtonKey + "]")];
+                            return [4 /*yield*/, this._basePermissionService.getAllWithIgnore(filterPermission, 'code,id')];
+                        case 1:
+                            lstPermissionCode = (_a = (_f.sent()).data) !== null && _a !== void 0 ? _a : [];
+                            buttonSetting = JSON.parse(sessionStorage.getItem(ComCtxConstants.LOCALSTORAGE_KEY.BUTTON_AUTHORIZE) || '{}');
+                            buttonSetting[this.authorizeButtonKey] = lstPermissionCode;
+                            this.lstButtonTemplate = lstButtonTemplate;
+                            if (!buttonSetting[this.authorizeButtonKey].length) {
+                                this.isBtnReady = true;
+                                return [2 /*return*/];
+                            }
+                            sessionStorage.setItem(ComCtxConstants.LOCALSTORAGE_KEY.BUTTON_AUTHORIZE, JSON.stringify(buttonSetting));
+                            lstMenuButton = [];
+                            return [4 /*yield*/, this.menuButtons({})];
+                        case 2:
+                            lstMenuButtons = (_b = _f.sent()) !== null && _b !== void 0 ? _b : [];
+                            if (!lstMenuButtons.length) {
+                                this.isBtnReady = true;
+                                return [2 /*return*/];
+                            }
+                            lstMenuButtons.forEach(function (item) { return _this.addButtonAction(lstMenuButton, _this.authorizeButtonKey, item.label); });
+                            buttonSetting[this.authorizeButtonKey].forEach(function (item) {
+                                var itemBtnMenu = lstMenuButton.find(function (p) { return p.permissionCode == item.code; });
+                                if (itemBtnMenu) {
+                                    _this.lstBtnAuthorizeMenu.push(itemBtnMenu);
+                                }
+                            });
+                            this.isBtnReady = true;
+                            this.handleTableRendered();
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        ListComponentBase.prototype.handleCloseAuthorizeButtonForm = function () {
+            this.checkedAll = false;
+            this.handleCheckAll();
+            this.buttonAuthorizeModel.showEditForm = false;
+        };
         return ListComponentBase;
     }(ComponentBase));
     ListComponentBase.decorators = [
@@ -25117,6 +25331,7 @@
     ListComponentBase.propDecorators = {
         treeTable: [{ type: i0.ViewChild, args: ['treetable',] }],
         _table: [{ type: i0.ViewChild, args: [table.Table, { static: false },] }],
+        lstButtonElement: [{ type: i0.ViewChildren, args: ['buttonBase',] }],
         container: [{ type: i0.ViewChild, args: ['container', { static: true },] }],
         iconToggleRowGroup: [{ type: i0.ViewChild, args: ['iconToggleRowGroup', { static: true },] }],
         iconToggleRowData: [{ type: i0.ViewChild, args: ['iconToggleRowData', { static: true },] }],
@@ -25380,7 +25595,7 @@
         { type: i0.Component, args: [{
                     // tslint:disable-next-line: component-selector
                     selector: 'crud-list',
-                    template: "<div #container class=\"custom-card card card-w-title flex-container-fit-child\" [attr.height-type]=\"setting.heightType\"\n    [ngStyle]=\"_style\">\n    <div class=\"ui-helper-clearfix crud-list-header-area\">\n        <div *ngIf=\"!setting.hiddenSearch\">\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 *ngIf=\"!setting.useCommonSearch\">\n                            <ng-container *ngTemplateOutlet=\"searchCustom; context: {$implicit: this}\"></ng-container>\n                        </ng-container>\n                    </div>\n                </div>\n            </div>\n            <div *ngIf=\"setting.useCommonSearch && !hasTemplate('searchCustom')\"\n                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                        <div style=\"width: 100%;\">\n                            <common-search-form #commonSearch [parentSetting]=\"setting\" [parentModel]=\"model\"\n                                [templateFilter]=\"templateFilter\" [parentContext]=\"context\"\n                                [searchBoxTooltip]=\"setting.toolTipSearhBoxCommon\"\n                                (onClickSearch)=\"handleSearch($event)\"></common-search-form>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div *ngIf=\"!setting.hiddenHeader\" class=\"p-grid ui-fluid custom-p-col page-title-area\">\n            <div *ngIf=\"!setting.hiddenPageTitle\" class=\"main-title\">\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]=\"{\n                        crudList: this,\n                        buttonAdd: buttonAdd, buttonExport: buttonExport, buttonDelete: buttonDelete\n                    }\">\n                </ng-container>\n            </div>\n\n            <div *ngIf=\"!setting.hiddenPageSetting\" class=\"paginator-table\">\n                <ng-container *ngIf=\"!paginationTemplate\">\n                    <paging-next-back-only [model]=\"model\" [setting]=\"setting\" (onChanged)=\"getData()\"\n                        (onChangeLimitPage)=\"savePageSize()\">\n                    </paging-next-back-only>\n                </ng-container>\n                <ng-container *ngIf=\"paginationTemplate\">\n                    <ng-container [ngTemplateOutlet]=\"paginationTemplate\"></ng-container>\n                </ng-container>\n            </div>\n        </div>\n    </div>\n    <div *ngIf=\"hasTemplate('topGrid')\" class=\"extend-content-top-grid\">\n        <ng-container [ngTemplateOutletContext]=\"{selectedItems: model.selectedItems, crudList: this}\"\n            [ngTemplateOutlet]=\"getTemplate('topGrid')\"></ng-container>\n    </div>\n    <div class=\"fit-content crud-list-body-area\">\n        <div class=\"crud-list-body-area-inner\" style=\"overflow: unset;\">\n            <div class=\"flex-container-fit-child\" style=\"overflow: unset;\">\n                <div *ngIf=\"!setting.hiddenToolbar\" class=\"p-grid crudListToolbar\">\n                    <ng-container>\n                        <div *ngIf=\"!setting.hiddenButtons && hasTemplate('toolbar')\"\n                            [ngClass]=\"setting.hiddenAdvanceSearch ? 'p-md-12 p-lg-12' : 'p-md-7 p-lg-8'\"\n                            class=\"p-col-12 button-group function-topbar custom-toolbar\">\n                            <ng-container [ngTemplateOutlet]=\"getTemplate('toolbar')\" [ngTemplateOutletContext]=\"{\n                                    selectedItems: model.selectedItems, crudList: this,\n                                    buttonAdd: buttonAdd, buttonExport: buttonExport, buttonDelete: buttonDelete\n                                }\">\n                            </ng-container>\n                        </div>\n                        <div *ngIf=\"!setting.hiddenButtons && !hasTemplate('toolbar')\"\n                            [ngClass]=\"setting.hiddenAdvanceSearch ? 'p-md-12 p-lg-12' : 'p-md-7 p-lg-8'\"\n                            class=\"p-col-12 button-group function-topbar\">\n                            <ng-container [ngTemplateOutlet]=\"getTemplate('buttonBeforeToolbar')\"\n                                [ngTemplateOutletContext]=\"{crudList: this}\"></ng-container>\n                            <button type=\"button\" pButton label=\"\u0110\u00E1nh STT\" class=\"p-button-text\" style=\"display: none\"\n                                (click)=\"danhSoThuTuGroupLastest()\"></button>\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\"\n                                [ngTemplateOutlet]=\"buttonExportWord\">\n                            </ng-container>\n                            <ng-container *ngIf=\"!hiddenDelete\" [ngTemplateOutlet]=\"buttonDelete\">\n                            </ng-container>\n                            <ng-container *ngIf=\"!hiddenReorder\" [ngTemplateOutlet]=\"buttonReorder\">\n                            </ng-container>\n                            <button *ngIf=\"!setting.disableShare && model.selectedItems.length > 0\"\n                                label=\"Chia s\u1EBB li\u00EAn k\u1EBFt\" type=\"button\" pButton pRipple\n                                [pTooltip]=\"'Chia s\u1EBB li\u00EAn k\u1EBFt' | translate\" tooltipPosition=\"top\"\n                                class=\"p-button-text p-button-info link-or-action\" icon=\"pi pi-link\"\n                                (click)=\"createShareLinkMultiple()\"></button>\n                            <ng-container [ngTemplateOutlet]=\"getTemplate('buttonAfterToolbar')\"\n                                [ngTemplateOutletContext]=\"{crudList: this}\"></ng-container>\n                        </div>\n                    </ng-container>\n                    <div *ngIf=\"!setting.hiddenAdvanceSearch && !setting.useCommonSearch\"\n                        class=\"p-col-12 advance-search-container\"\n                        [ngClass]=\"setting.hiddenButtons ? 'p-md-12 p-lg-12' : 'p-md-5 p-lg-4'\">\n                        <advance-search #advanceSearch [parentSetting]=\"setting\" [searchInfo]=\"searchInfo\"\n                            [loading]=\"model.loading\" (onSearch)=\"handleSearchAdvs($event)\"\n                            (onInit)=\"handleInitAdvanceSearch($event)\">\n                        </advance-search>\n                    </div>\n                </div>\n                <div *ngIf=\"hasTemplate('topGrid')\" class=\"extend-content-top-grid\">\n                    <ng-container [ngTemplateOutletContext]=\"{selectedItems: model.selectedItems, crudList: this}\"\n                        [ngTemplateOutlet]=\"getTemplate('topGrid')\"></ng-container>\n                </div>\n                <div class=\"container-table fit-content\" [class.--table-responsive]=\"responsive\">\n                    <div class=\"container-table-inner\">\n                        <ng-container *ngIf=\"!_groupField\">\n                            <tn-custom-scrollbar *ngIf=\"showScrollBar\" #scrollbar [config]=\"configScrollBar\"\n                                [showScrollHorizontal]=\"showScrollHorizontal\">\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldFalse\">\n                                </ng-container>\n                                <ng-container *ngIf=\"hasTemplate('afterCrudList')\">\n                                    <ng-container [ngTemplateOutlet]=\"getTemplate('afterCrudList')\"></ng-container>\n                                </ng-container>\n                            </tn-custom-scrollbar>\n                            <div *ngIf=\"!showScrollBar\">\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldFalse\">\n                                </ng-container>\n                            </div>\n                        </ng-container>\n                        <ng-container *ngIf=\"_groupField\">\n                            <tn-custom-scrollbar *ngIf=\"showScrollBar\" #scrollbar [config]=\"configScrollBar\"\n                                [showScrollHorizontal]=\"showScrollHorizontal\">\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldTrue\">\n                                </ng-container>\n                                <ng-container *ngIf=\"hasTemplate('afterCrudList')\">\n                                    <ng-container [ngTemplateOutlet]=\"getTemplate('afterCrudList')\"></ng-container>\n                                </ng-container>\n                            </tn-custom-scrollbar>\n                            <div *ngIf=\"!showScrollBar\">\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldTrue\">\n                                </ng-container>\n                            </div>\n                        </ng-container>\n\n                        <div class=\"table-border-line --top\"></div>\n                        <div class=\"table-border-line --right\"></div>\n                        <div class=\"table-border-line --bottom\"></div>\n                        <div class=\"table-border-line --left\"></div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n<after-view-checked (loaded)=\"handleReady()\"></after-view-checked>\n<settings *ngIf=\"_showSettings && !setting.hiddenSetting\" [entityMetadataService]=\"entityMetadataService\"\n    [parentContext]=\"context\" [parentSetting]=\"setting\" [parentModel]=\"model\" (onSave)=\"onSaveSettings($event)\"\n    (onDelete)=\"onDeleteSettings()\" (onCancel)=\"_showSettings = false\">\n</settings>\n<settings-row *ngIf=\"_showSettingsRowColor && !setting.hiddenSetting\" [entityMetadataService]=\"entityMetadataService\"\n    [parentContext]=\"context\" [parentSetting]=\"setting\" [parentModel]=\"model\" (onSave)=\"onSaveColorSettings($event)\"\n    (onCancel)=\"_showSettingsRowColor = false\">\n</settings-row>\n<!-- <workflow-setting-dialog *ngIf=\"_showSettingsWorkflow && !setting.hiddenSettingWorkflow\" [parentSetting]=\"setting\"\n    [parentContext]=\"context\" [parentModel]=\"model\" (onSaved)=\"onSaveWorkflowSettings($event)\"\n    (onRemoved)=\"onRemoveWorkflowSettings($event)\" (onCancel)=\"_showSettingsWorkflow = false\">\n</workflow-setting-dialog> -->\n<div #workflowSettingDialog *ngIf=\"_showSettingsWorkflow && !setting.hiddenSettingWorkflow\"></div>\n<tn-dialog #dialogWfSettingNew [visible]=\"workflowSettingModel.showEditForm\" [header]=\"'C\u1EA5u h\u00ECnh quy tr\u00ECnh nghi\u1EC7p v\u1EE5' | translate\"\n    [popupSize]=\"workflowSettingModel.popupSize\" (onHide)=\"workflowSettingModel.showEditForm = false\">\n    <!-- <workflow-setting-new #formBase [parentSetting]=\"setting\" (onSaved)=\"onSaveWorkflowSettingsNew($event)\"\n        (onCancel)=\"workflowSettingModel.showEditForm = false\"></workflow-setting-new> -->\n    <div #workflowsettingnew></div>\n</tn-dialog>\n<entity-permission *ngIf=\"_showSettingsPermission && !setting.hiddenSettingPermission\" [parentSetting]=\"setting\"\n    [parentContext]=\"context\" [parentModel]=\"model\" [searchInfo]=\"searchInfo\"\n    (onCancel)=\"_showSettingsPermission = false\">\n</entity-permission>\n<p-contextMenu #contextMenu [appendTo]=\"'body'\" [styleClass]=\"'allow-selected'\" [model]=\"buttonContexts\">\n</p-contextMenu>\n<tn-dialog #dialogProcessWorkflowForm [visible]=\"processWorkflowModel.showEditForm\" [header]=\"processWorkflowModel.header | translate\"\n    [popupSize]=\"processWorkflowModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\n    (onHide)=\"processWorkflowModel.showEditForm = false\">\n    <div style=\"height: 100%; padding: 1rem\">\n        <!-- <process-workflow-form #formBase [businessSetting]=\"processWorkflowModel.data.setting\" [item]=\"currentItem\"\n            [workflow]=\"processWorkflowModel.data.workflow\" [action]=\"processWorkflowModel.data.action\"\n            (onSaved)=\"handleProcessedWorkflowBase()\" (onCancel)=\"processWorkflowModel.showEditForm = false\">\n        </process-workflow-form> -->\n        <div #processWorkflowForm></div>\n    </div>\n</tn-dialog>\n<tn-dialog #dialogChoYKienForm [visible]=\"choYKienModel.showEditForm\" [header]=\"choYKienModel.header | translate\"\n    [popupSize]=\"choYKienModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\n    (onHide)=\"choYKienModel.showEditForm = false\">\n    <div style=\"height: 100%\">\n        <!-- <cho-y-kien-form #formBase [bussinessSetting]=\"choYKienModel.data.setting\"\n            [rowItem]=\"choYKienModel.data.rowData\" (onSaved)=\"choYKienModel.showEditForm = false\"\n            (onCancel)=\"choYKienModel.showEditForm = false\">\n        </cho-y-kien-form> -->\n        <div #choYKienForm></div>\n    </div>\n</tn-dialog>\n<tn-dialog [visible]=\"workflowHistoryModel.showEditForm\" [header]=\"workflowHistoryModel.header | translate\"\n    [popupSize]=\"workflowHistoryModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\n    (onHide)=\"workflowHistoryModel.showEditForm = false\">\n    <div style=\"height: 100%\">\n        <!-- <workflow-history-new #formBase [businessSetting]=\"workflowHistoryModel.data.setting\"\n            [tableName]=\"workflowHistoryModel.data.tableName\" [item]=\"currentItem\"\n            [workflowSetting]=\"workflowHistoryModel.data.workflowSetting\"\n            (onCancel)=\"workflowHistoryModel.showEditForm = false\">\n        </workflow-history-new> -->\n        <div #workflowHistoryNew></div>\n    </div>\n</tn-dialog>\n<tn-dialog #dialogDetailTask [visible]=\"detailTaskModel.showEditForm\" [header]=\"detailTaskModel.header | translate\"\n    [popupSize]=\"detailTaskModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\n    (onHide)=\"detailTaskModel.showEditForm = false\">\n    <!-- <base-congviec-form #formBase [model]=\"detailTaskModel.data.taskFormModel\" [forceOnlyView]=\"true\"\n        (onCancel)=\"detailTaskModel.showEditForm = false\">\n    </base-congviec-form> -->\n    <div #detailTask></div>\n</tn-dialog>\n\n<tn-dialog #dialogPermissionSharing [visible]=\"permissionSharingModel.showEditForm\" [header]=\"permissionSharingModel.header | translate\"\n    [popupSize]=\"permissionSharingModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\n    (onHide)=\"permissionSharingModel.showEditForm = false\">\n    <div style=\"height: 100%\">\n        <!-- <permission-sharing #formBase [item]=\"rowDataCurrent\" [baseService]=\"setting.baseService\"\n            (onCancel)=\"permissionSharingModel.showEditForm = false\">\n        </permission-sharing> -->\n        <div #permissionSharing></div>\n    </div>\n</tn-dialog>\n<tn-dialog #dialogWorkflowPermission [visible]=\"permissionListModel.showEditForm\" [header]=\"permissionListModel.header | translate\"\n    [popupSize]=\"permissionListModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\" [useDefaultScrollBar]=\"true\"\n    (onHide)=\"permissionListModel.showEditForm = false\">\n    <div style=\"height: 100%\">\n        <!-- <workflow-permission #formBase [item]=\"rowDataCurrent\" [businessSetting]=\"setting\"\n            (onCancel)=\"permissionListModel.showEditForm = false\">\n        </workflow-permission> -->\n        <div #workflowPermission></div>\n    </div>\n</tn-dialog>\n<!-- <workflow-history-dialog *ngIf=\"showHistoryWorkflow\" [baseService]=\"setting.baseService\" [item]=\"currentItem\"\n    [workflowSetting]=\"setting.workflowSetting\" (onHide)=\"handleHideHistoryWorkflow()\">\n</workflow-history-dialog> -->\n<div #workflowPermission *ngIf=\"showHistoryWorkflow\"></div>\n<tn-dialog #dialogstartWorkflow [visible]=\"startWorkflowModel.showEditForm\" [header]=\"startWorkflowModel.header | translate\"\n    [popupSize]=\"startWorkflowModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\n    (onHide)=\"startWorkflowModel.showEditForm = false\">\n    <div style=\"height: 100%\">\n        <!-- <start-workflow #formBase [workflows]=\"startWorkflowModel.data.workflows\"\n            [defaultWorkflow]=\"startWorkflowModel.data.defaultWorkflow\"\n            (onCancel)=\"startWorkflowModel.showEditForm = false\" (onSaved)=\"handleStartWorkflowFromDialog($event)\">\n        </start-workflow> -->\n        <div #startWorkflow></div>\n    </div>\n</tn-dialog>\n<tn-dialog #dialogBaseCongViecForm [visible]=\"congViecModel.showEditForm\" [styleClass]=\"'congviec-form tn-form-dialog'\"\n    [header]=\"congViecModel.header | translate\" [popupSize]=\"congViecModel.popupSize\"\n    (onHide)=\"congViecModel.showEditForm = false\">\n    <!-- <base-congviec-form #formBase [parentSetting]=\"congViecModel.data.congViecSetting\"\n        [model]=\"congViecModel.data.model\" (onSaved)=\"congViecModel.showEditForm = false;getData()\"\n        (onCancel)=\"congViecModel.showEditForm = false\">\n    </base-congviec-form> -->\n    <div #baseCongViecForm></div>\n</tn-dialog>\n<tn-dialog #dialog *ngIf=\"shareLinkModel.showEditForm\" [styleClass]=\"'congviec-form tn-form-dialog'\"\n    [header]=\"shareLinkModel.header | translate\" [popupSize]=\"shareLinkModel.popupSize\" [useDefaultScrollBar]=\"true\"\n    (onHide)=\"shareLinkModel.showEditForm = false\">\n    <share-link-by-permission #formBase [setting]=\"setting\" [lstItem]=\"shareLinkModel.data.lstItem\"\n        (onCancel)=\"congViecModel.showEditForm = false\">\n    </share-link-by-permission>\n</tn-dialog>\n<tn-dialog #dialogBaseCongViec [visible]=\"attachedTaskModel.showEditForm\" [header]=\"attachedTaskModel.header | translate\"\n    [popupSize]=\"attachedTaskModel.popupSize\" [useDefaultScrollBar]=\"true\"\n    (onHide)=\"attachedTaskModel.showEditForm = false\">\n    <!-- <base-congviec [serviceCode]=\"setting.baseService.serviceCode\" [entity]=\"setting.baseService.entityName\"\n        [itemIdAttach]=\"rowDataCurrent.id\"></base-congviec> -->\n        <div #baseCongViec></div>\n</tn-dialog>\n<ng-template #tableGetGroupFieldFalse>\n    <p-table #table [dataKey]=\"'id'\" [scrollable]=\"pTableScrollable\" [scrollHeight]=\"pTableScrollHeight\"\n        [columns]=\"setting.cols\" [paginator]=\"false\" [value]=\"_dataSource\" (onSort)=\"onSort($event, table)\"\n        [class]=\"_tableClass\" [responsive]=\"responsive\" [lazy]=\"lazy\" [loading]=\"model.loading\"\n        [expandedRowKeys]=\"model.expandedRowKeys\" [(selection)]=\"model.selectedItems\"\n        (onRowReorder)=\"handleRowOrdered($event)\">\n        <ng-template *ngIf=\"colgroup\" pTemplate=\"colgroup\" let-columns>\n            <ng-container *ngTemplateOutlet=\"colgroup; context: {$implicit: columns}\"></ng-container>\n        </ng-template>\n        <ng-template *ngIf=\"!colgroup\" pTemplate=\"colgroup\" let-columns>\n            <ng-container *ngTemplateOutlet=\"baseColgroup; context: {$implicit: columns}\">\n            </ng-container>\n        </ng-template>\n        <ng-template *ngIf=\"header\" pTemplate=\"header\" let-columns>\n            <ng-container\n                *ngTemplateOutlet=\"header, context: {$implicit: columns, crudList: this, rowHeaderFilter: rowHeaderFilter, contentTh: contentTh, containerSticky: containerSticky, funcCheckAll: handleCheckAll}\">\n            </ng-container>\n        </ng-template>\n        <ng-template *ngIf=\"!header\" pTemplate=\"header\" let-columns>\n            <ng-container *ngTemplateOutlet=\"trHeader; context: {$implicit: columns, funcCheckAll: handleCheckAll}\">\n            </ng-container>\n        </ng-template>\n        <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\" let-index=\"rowIndex\" let-expanded=\"expanded\">\n            <ng-container\n                *ngTemplateOutlet=\"trBody; context: {$implicit: rowData, columns: columns, index: index, expanded: expanded, eventSelectRow: handleSelectRow, eventChecked: handleCheckRowData}\">\n            </ng-container>\n            <after-view-checked *ngIf=\"index == _dataSource.length - 1\" style=\"display: none;\" [renderKey]=\"_dataSource\"\n                (loaded)=\"handleTableRendered()\">\n            </after-view-checked>\n        </ng-template>\n        <ng-template *ngIf=\"rowExpansion\" pTemplate=\"rowexpansion\" let-rowData let-expanded=\"expanded\">\n            <ng-container\n                *ngTemplateOutlet=\"rowExpansion; context: {$implicit: rowData, expanded: expanded, getColSpanGroup: getColSpanGroup}\">\n            </ng-container>\n        </ng-template>\n        <ng-template *ngIf=\"summary\" pTemplate=\"summary\">\n            <ng-container *ngTemplateOutlet=\"summary\"></ng-container>\n        </ng-template>\n        <ng-template *ngIf=\"footer\" pTemplate=\"footer\" let-columns>\n            <ng-container *ngTemplateOutlet=\"footer; context: {$implicit: columns}\"></ng-container>\n        </ng-template>\n    </p-table>\n</ng-template>\n<ng-template #tableGetGroupFieldTrue>\n    <p-table #tableGroup [scrollable]=\"pTableScrollable\" [scrollHeight]=\"pTableScrollHeight\" [columns]=\"setting.cols\"\n        [paginator]=\"false\" [value]=\"_dataSource\" [metaKeySelection]=\"false\" (onSort)=\"onSort($event, tableGroup)\"\n        [class]=\"_tableClass\" [customSort]=\"true\" [responsive]=\"responsive\" [lazy]=\"true\" [loading]=\"model.loading\"\n        [(selection)]=\"model.selectedItems\" [expandedRowKeys]=\"model.expandedRowKeys\" [dataKey]=\"_groupField\">\n        <ng-template *ngIf=\"colgroup\" pTemplate=\"colgroup\" let-columns>\n            <ng-container *ngTemplateOutlet=\"colgroup; context: {$implicit: columns}\"></ng-container>\n        </ng-template>\n        <ng-template *ngIf=\"!colgroup\" pTemplate=\"colgroup\" let-columns>\n            <ng-container *ngTemplateOutlet=\"baseColgroup; context: {$implicit: columns}\">\n            </ng-container>\n        </ng-template>\n        <ng-template *ngIf=\"header\" pTemplate=\"header\" let-columns>\n            <ng-container\n                *ngTemplateOutlet=\"header, context: {$implicit: columns, crudList: this, rowHeaderFilter: rowHeaderFilter, contentTh: contentTh, containerSticky: containerSticky, funcCheckAll: handleCheckAll_Group}\">\n            </ng-container>\n        </ng-template>\n        <ng-template *ngIf=\"!header\" pTemplate=\"header\" let-columns>\n            <ng-container\n                *ngTemplateOutlet=\"trHeader; context: {$implicit: columns, funcCheckAll: handleCheckAll_Group}\">\n            </ng-container>\n        </ng-template>\n        <ng-template pTemplate=\"body\" let-rowData let-rowIndex=\"rowIndex\" let-expanded=\"expanded\" let-columns=\"columns\">\n            <tr *ngIf=\"rowGroupMetadata[rowData[_groupField]] && rowGroupMetadata[rowData[_groupField]].index == rowIndex\"\n                class=\"p-widget-header group-row\" style=\"border: 0px; border-bottom: 1px solid #eee\">\n                <td *ngIf=\"!setting.hiddenCheckbox\" class=\"center chkbox\" [class.sticky]=\"setting.stickyColumn\">\n                    <p-checkbox [(ngModel)]=\"rowGroupChecked[rowData[_groupField]]\" binary=\"true\"\n                        (onChange)=\"handleCheckRowGroup(rowData)\">\n                    </p-checkbox>\n                    <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n                </td>\n                <ng-container *ngIf=\"!rowGroup\">\n                    <td [colSpan]=\"getColSpanGroup()\" [class]=\"_classRowGroup\">\n                        <div class=\"container-row-group\">\n                            <a href=\"javascript:;\" [pRowToggler]=\"rowData\" class=\"container-row-group-toggle\"\n                                [class.sticky]=\"setting.stickyColumn\">\n                                <i style=\"margin-right:5px\"\n                                    [ngClass]=\"expanded ? 'fas fa-fw fa-caret-down' : 'fas fa-fw fa-caret-right'\"></i>\n                                <div class=\"content-row-group\">\n                                    <ng-container *ngIf=\"!contentRowGroup\">\n                                        <ng-container [ngTemplateOutlet]=\"_contentRowGroup\"\n                                            [ngTemplateOutletContext]=\"getContextRowGroup(rowData)\">\n                                        </ng-container>\n                                    </ng-container>\n                                    <ng-container *ngIf=\"contentRowGroup\">\n                                        <ng-container [ngTemplateOutlet]=\"contentRowGroup\"\n                                            [ngTemplateOutletContext]=\"getContextRowGroup(rowData)\">\n                                        </ng-container>\n                                    </ng-container>\n                                </div>\n                            </a>\n                        </div>\n                    </td>\n                </ng-container>\n                <ng-container *ngIf=\"rowGroup\">\n                    <ng-container [ngTemplateOutlet]=\"rowGroup\"\n                        [ngTemplateOutletContext]=\"getContextRowGroupRoot(rowData, expanded)\">\n                    </ng-container>\n                </ng-container>\n            </tr>\n        </ng-template>\n        <ng-template pTemplate=\"rowexpansion\" let-columns=\"columns\" let-rowData let-index=\"rowIndex\">\n            <ng-container\n                *ngTemplateOutlet=\"trBody; context: {$implicit: rowData, columns: columns, index: index, expanded: false, eventSelectRow: handleSelectRowGroup, eventChecked: handleCheckRowData_Group}\">\n            </ng-container>\n            <after-view-checked *ngIf=\"index == _dataSource.length - 1\" style=\"display: none;\" [renderKey]=\"_dataSource\"\n                (loaded)=\"handleTableRendered()\">\n            </after-view-checked>\n        </ng-template>\n        <ng-template *ngIf=\"summary\" pTemplate=\"summary\">\n            <ng-container *ngTemplateOutlet=\"summary\"></ng-container>\n        </ng-template>\n        <ng-template *ngIf=\"footer\" pTemplate=\"footer\" let-columns>\n            <ng-container *ngTemplateOutlet=\"footer; context: {$implicit: columns}\"></ng-container>\n        </ng-template>\n    </p-table>\n    <after-view-checked></after-view-checked>\n</ng-template>\n<ng-template #baseColgroup let-columns>\n    <colgroup>\n        <col *ngIf=\"!setting.hiddenCheckbox\" [style.width]=\"widthCheckbox\" />\n        <col *ngIf=\"!setting.hiddenOrderColumn\" [style.width]=\"widthOrderColumn\" />\n        <col *ngIf=\"rowExpansion\" style=\"width: 2.5rem\" />\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=\"enableReorderRow\" style=\"width: 30px\" />\n        <col *ngIf=\"!setting.hiddenFunctionColumn\" [style.width]=\"widthFunctionColumn || _widthFunctionColumn\" />\n    </colgroup>\n</ng-template>\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 #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()\"></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()\"></button>\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 #buttonReorder>\n    <button\n        *ngIf=\"showSaveReorder && enableReorderRow && (_sortField == setting.columnSetting.sortField || _sortDir == 0)\"\n        [appAuthorize]=\"serviceCode\" [permission]=\"authorizePaths[commonConst.REORDER_SAVE]\"\n        [enableAuthorize]=\"buttonApplyAuthorize[commonConst.REORDER_SAVE]\" type=\"button\" pButton pRipple\n        [label]=\"'L\u01B0u s\u1EAFp x\u1EBFp' | translate\" icon=\"pi pi-save\" class=\"p-button-text p-button-success\"\n        (click)=\"saveReorder()\"></button>\n</ng-template>\n<ng-template #trHeader let-columns let-funcCheckAll=\"funcCheckAll\">\n    <tr class=\"title-row\">\n        <ng-container *ngIf=\"!setting.hiddenCheckbox\">\n            <th class=\"chkbox link-or-action cell-checkbox\" [class.sticky]=\"setting.stickyColumn\">\n                <button *ngIf=\"!hasTemplate('headerCheckbox') && !setting.useCommonSearch\" type=\"button\" pButton pRipple\n                    icon=\"pi pi-refresh\" class=\"p-button-rounded p-button-text btnReload\" pTooltip=\"L\u00E0m m\u1EDBi d\u1EEF li\u1EC7u\"\n                    tooltipPosition=\"top\" [disabled]=\"model.loading\" (click)=\"reload()\"></button>\n                <p-triStateCheckbox *ngIf=\"setting.useCommonSearch\" [(ngModel)]=\"checkedAll\" binary=\"true\"\n                    (onChange)=\"funcCheckAll()\">\n                </p-triStateCheckbox>\n                <ng-container *ngIf=\"hasTemplate('headerCheckbox')\">\n                    <ng-container [ngTemplateOutletContext]=\"{crudList: this}\"\n                        [ngTemplateOutlet]=\"getTemplate('headerCheckbox')\"></ng-container>\n                </ng-container>\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n            </th>\n        </ng-container>\n        <th *ngIf=\"!setting.hiddenOrderColumn\" class=\"stt nopad center\" [class.sticky]=\"setting.stickyColumn\"\n            (dblclick)=\"reload()\">\n            {{ 'TT' |translate}}\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n        </th>\n        <th *ngIf=\"rowExpansion\" class=\"nopad row-expansion-toggle center\" style=\"width: 2.5rem\"\n            [class.sticky]=\"setting.stickyColumn\">\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n        </th>\n        <ng-container *ngIf=\"hasTemplate('trHeaderBefore')\">\n            <ng-container [ngTemplateOutlet]=\"getTemplate('trHeaderBefore')\"\n                [ngTemplateOutletContext]=\"{$implicit: columns}\"></ng-container>\n        </ng-container>\n        <ng-container *ngFor=\"let col of columns; let i = index\">\n            <th *ngIf=\"col && col.visible && col.field!='function'\" [ngStyle]=\"col.extendData.headerStyle\"\n                [style.left]=\"col.isPinned && col.left ? (col.left + 'px') : ''\" [pTooltip]=\"col.fullLabel\"\n                tooltipStyleClass=\"unset-width\" [class]=\"col.extendData.headerClass\"\n                [className]=\"col.isPinned && col.width ? col.class : ''\" [class.first-th]=\"i==0\" [escape]=\"false\"\n                tooltipPosition=\"top\" [tnSortableColumn]=\"col.field\" [tnSortableColumnDisabled]=\"!col.sort\">\n                <ng-container *ngTemplateOutlet=\"contentTh; context: {$implicit: col}\"></ng-container>\n                <ng-container *ngIf=\"col.sort || col.sortClient\">\n                    <ng-container *ngTemplateOutlet=\"sortIcon; context: {field: col.field}\"></ng-container>\n                </ng-container>\n            </th>\n        </ng-container>\n        <ng-container *ngIf=\"hasTemplate('trHeaderAfter')\">\n            <ng-container [ngTemplateOutlet]=\"getTemplate('trHeaderAfter')\"\n                [ngTemplateOutletContext]=\"{$implicit: columns}\"></ng-container>\n        </ng-container>\n        <th *ngIf=\"enableReorderRow\" style=\"width: 30px\">\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n        </th>\n        <ng-container *ngTemplateOutlet=\"colFunctionHeader\"></ng-container>\n    </tr>\n    <ng-container *ngTemplateOutlet=\"rowHeaderFilter; context: {columns: columns, funcCheckAll: funcCheckAll}\">\n    </ng-container>\n</ng-template>\n<ng-template #rowHeaderFilter let-columns=\"columns\" let-funcCheckAll=\"funcCheckAll\">\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)=\"funcCheckAll()\">\n            </p-triStateCheckbox>\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n        </th>\n        <th *ngIf=\"!setting.hiddenOrderColumn\" class=\"stt center v-top\" [class.sticky]=\"setting.stickyColumn\">\n            <div *ngIf=\"!setting.hiddenSetting\" class=\"pick-color-row\" pTooltip=\"C\u1EA5u h\u00ECnh hi\u1EC3n th\u1ECB m\u00E0u\"\n                tooltipPosition=\"top\" (click)=\"showSettingRowColor()\">\n                <div></div>\n                <div></div>\n                <div></div>\n                <div></div>\n            </div>\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n        </th>\n        <th *ngIf=\"rowExpansion\" class=\"nopad center row-expansion-toggle\" [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                [style.left]=\"col.isPinned && col.left ? (col.left + 'px') : ''\"\n                [className]=\"col.isPinned && col.width ? col.class + ' cell-header-filter center': '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\"\n                                [ngTemplateOutletContext]=\"{col: col, control: filterSchema.dateRange}\">\n                            </ng-container>\n                        </ng-container>\n                        <ng-container *ngSwitchCase=\"'datetime'\">\n                            <ng-container [ngTemplateOutlet]=\"filterDate\"\n                                [ngTemplateOutletContext]=\"{col: col, control: filterSchema.dateTimeRange}\">\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=\"'intWithoutMask'\">\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=\"'currency'\">\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, control: filterSchema.dateRange}\">\n                                    </ng-container>\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"'datetime'\">\n                                    <ng-container [ngTemplateOutlet]=\"filterDate\"\n                                        [ngTemplateOutletContext]=\"{col: col, control: filterSchema.dateTimeRange}\">\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=\"enableReorderRow\" style=\"width: 30px\">\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n        </th>\n        <ng-container *ngTemplateOutlet=\"buttonBaseSetting\"></ng-container>\n    </tr>\n</ng-template>\n<ng-template #buttonBaseSetting>\n    <ng-container *ngIf=\"!setting.hiddenFunctionColumn\">\n        <th class=\"center setting-cell column-function\" [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(dialogWfSettingNew)\"></button>\n            <div *ngIf=\"setting.hiddenSetting && setting.hiddenSettingPermission && setting.hiddenSettingWorkflow\"\n                class=\"cell-header-function\">\n                <span>{{'GRID.FUNCTION'| translate}}</span>\n            </div>\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n        </th>\n    </ng-container>\n\n</ng-template>\n<ng-template #colFunctionHeader>\n    <ng-container *ngIf=\"!setting.hiddenFunctionColumn\">\n        <ng-container *ngIf=\"setting.hiddenFilterRow\">\n            <ng-container *ngTemplateOutlet=\"buttonBaseSetting\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!setting.hiddenFilterRow\">\n            <th class=\"column-function\" [class.sticky]=\"setting.stickyColumn\">\n                <div class=\"cell-header-function\">\n                    <span>{{'GRID.FUNCTION'| translate}}</span>\n                </div>\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n            </th>\n        </ng-container>\n    </ng-container>\n</ng-template>\n<ng-template #contentTh let-col>\n    <ng-container *ngIf=\"templateHeaderContent[col.field]\">\n        <ng-container *ngTemplateOutlet=\"templateHeaderContent[col.field]\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"!templateHeaderContent[col.field]\">\n        {{col.label}}\n    </ng-container>\n    <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n</ng-template>\n<ng-template #trBody let-rowData let-columns=\"columns\" let-index=\"index\" let-expanded=\"expanded\"\n    let-eventSelectRow=\"eventSelectRow\" let-eventChecked=\"eventChecked\">\n    <tr *ngIf=\"!rowData.template\" [tnReorderableRow]=\"index\" [attr.rowIndex]=\"index\" [ngClass]=\"rowData.objStyleClass\"\n        [class.ui-state-highlight]=\"rowData._checked\" [pTooltip]=\"rowData.tooltip\" tooltipPosition=\"top\"\n        [tooltipStyleClass]=\"rowData.tooltipClass\" [escape]=\"escape\" (click)=\"eventSelectRow($event, rowData)\">\n        <ng-container *ngIf=\"!setting.hiddenCheckbox && !rowData.hidden[fieldCheckbox]\">\n            <td class=\"chkbox link-or-action cell-checkbox\" [class.sticky]=\"setting.stickyColumn\"\n                [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldCheckbox]\"\n                [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldCheckbox]\">\n                <ng-container *ngIf=\"!rowData.hiddenCheckBox\">\n                    <ng-container *ngIf=\"!hasTemplate('checkbox')\">\n                        <p-checkbox [(ngModel)]=\"rowData._checked\" binary=\"true\" (onChange)=\"eventChecked(rowData)\">\n                        </p-checkbox>\n                    </ng-container>\n                    <ng-container *ngIf=\"hasTemplate('checkbox')\">\n                        <ng-container [ngTemplateOutlet]=\"getTemplate('checkbox')\"\n                            [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"></ng-container>\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n            </td>\n        </ng-container>\n        <td *ngIf=\"!setting.hiddenOrderColumn && !rowData.hidden[fieldOrder]\" class=\"stt\" style=\"text-align: center;\"\n            [class.sticky]=\"setting.stickyColumn\" [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldOrder]\"\n            [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldOrder]\">\n            <span class=\"row-card\" [ngStyle]=\"rowData.bookmarkStyle\"></span>\n            {{rowData[fieldOrder]}}\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n        </td>\n        <td *ngIf=\"rowExpansion && !rowData.hidden[fieldColExpand]\" class=\"no-padding center row-expansion-toggle\"\n            [class.sticky]=\"setting.stickyColumn\" [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldColExpand]\"\n            [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldColExpand]\">\n            <ng-container *ngTemplateOutlet=\"iconToggleRowData; context: {rowData: rowData, expanded: expanded}\">\n            </ng-container>\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n        </td>\n        <ng-container *ngIf=\"!hasTemplate('dynamicColBodys')\">\n            <ng-container *ngIf=\"hasTemplate('dynamicColBodysBefore')\">\n                <ng-container [ngTemplateOutlet]=\"getTemplate('dynamicColBodysBefore')\"\n                    [ngTemplateOutletContext]=\"{$implicit: columns, rowData: rowData, index: index, expanded: expanded}\">\n                </ng-container>\n            </ng-container>\n            <ng-container\n                *ngTemplateOutlet=\"dynamicColBodys; context: {$implicit: columns, rowData: rowData, index: index, expanded: expanded}\">\n            </ng-container>\n            <ng-container *ngIf=\"hasTemplate('dynamicColBodysAfter')\">\n                <ng-container [ngTemplateOutlet]=\"getTemplate('dynamicColBodysAfter')\"\n                    [ngTemplateOutletContext]=\"{$implicit: columns, rowData: rowData, index: index, expanded: expanded}\">\n                </ng-container>\n            </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"hasTemplate('dynamicColBodys')\">\n            <ng-container [ngTemplateOutlet]=\"getTemplate('dynamicColBodys')\"\n                [ngTemplateOutletContext]=\"{$implicit: columns, rowData: rowData, index: index, expanded: expanded}\">\n            </ng-container>\n        </ng-container>\n        <td *ngIf=\"enableReorderRow && !rowData.hidden[fieldColReorder]\" class=\"no-padding center\"\n            [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldColReorder]\"\n            [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldColReorder]\">\n            <i class=\"fas fa-arrows-alt\" style=\"cursor:pointer; padding: 8px; color: #555;\" pReorderableRowHandle></i>\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n        </td>\n        <ng-container *ngIf=\"!setting.hiddenFunctionColumn && !rowData.hidden[fieldFunction]\">\n            <td class=\"text-center column-function\" style=\"text-align: center;\" [class.sticky]=\"setting.stickyColumn\"\n                [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldFunction]\"\n                [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldFunction]\">\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=\"setting.showVersionButton\" type=\"button\" pButton pRipple icon=\"pi pi-calendar\"\n                        class=\"p-button-rounded p-button-text p-button-success link-or-action\"\n                        pTooltip=\"Xem l\u1ECBch s\u1EED phi\u00EAn b\u1EA3n\" tooltipPosition=\"top\"\n                        (click)=\"showListVersion(rowData)\"></button>\n                    <button *ngIf=\"!rowData.hiddenEdit\" [appAuthorize]=\"serviceCode\"\n                        [permission]=\"authorizePaths[commonConst.EDIT]\"\n                        [enableAuthorize]=\"buttonApplyAuthorize[commonConst.EDIT]\" type=\"button\" pButton pRipple\n                        [disabled]=\"disableEdit(rowData)\" [pTooltip]=\"'FORM.EDIT' | translate\" tooltipPosition=\"top\"\n                        class=\"p-button-rounded p-button-text p-button-info link-or-action\" icon=\"pi pi-pencil\"\n                        (click)=\"edit(rowData)\"></button>\n                    <button *ngIf=\"!rowData.hiddenDelete\" [appAuthorize]=\"serviceCode\"\n                        [permission]=\"authorizePaths[commonConst.DELETE]\"\n                        [enableAuthorize]=\"buttonApplyAuthorize[commonConst.DELETE]\" type=\"button\" pButton pRipple\n                        [disabled]=\"disableDelete(rowData)\" [pTooltip]=\"'FORM.DELETE' | translate\" tooltipPosition=\"top\"\n                        class=\"p-button-rounded p-button-text p-button-danger link-or-action\" icon=\"pi pi-trash\"\n                        (click)=\"delete(rowData)\"></button>\n                    <ng-container *ngIf=\"!hiddenBtnFunction\">\n                        <button *ngIf=\"showMenuButtons && 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\" [disabled]=\"rowData.disableFunctionRow\"\n                            (click)=\"showContextMenu($event, rowData)\"></button>\n                    </ng-container>\n                    <ng-container [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"\n                        [ngTemplateOutlet]=\"getTemplate('buttonAfter')\"></ng-container>\n                </div>\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n            </td>\n        </ng-container>\n    </tr>\n    <ng-container *ngIf=\"rowData.template\">\n        <ng-container *ngTemplateOutlet=\"rowData.template; context: {\n            $implicit: rowData, columns: columns, index: index, expanded: expanded, eventSelectRow: eventSelectRow, eventChecked: eventChecked\n        }\"></ng-container>\n    </ng-container>\n</ng-template>\n<ng-template #dynamicColBodys let-columns let-rowData=\"rowData\" let-index=\"index\" let-expanded=\"expanded\">\n    <ng-container *ngFor=\"let col of columns; let i = index\">\n        <ng-container\n            *ngTemplateOutlet=\"contentTd; context: {$implicit: rowData, col: col, index: index, i: i, expanded: expanded}\">\n        </ng-container>\n    </ng-container>\n</ng-template>\n<ng-template #contentTd let-rowData let-col=\"col\" let-index=\"index\" let-expanded=\"expanded\" let-i=\"i\">\n    <td *ngIf=\"col && col.visible && col.field != 'function' && !rowData.hidden[col.field]\"\n        [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[col.field]\"\n        [style.left]=\"col.isPinned && col.left ? (col.left + 'px') : ''\"\n        [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[col.field]\" [ngStyle]=\"col.extendData.style\"\n        [class]=\"col.cellClass\" [class.first-td]=\"i == 0\">\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\" class=\"contentTd\">\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                <ng-container *ngIf=\"col.click\">\n                    <a href=\"javascript:;\" (click)=\"col.click(rowData)\" [pTooltip]=\"config.tooltipView\"\n                        tooltipPosition=\"top\">\n                        <ng-container [ngTemplateOutlet]=\"contentCell\"\n                            [ngTemplateOutletContext]=\"getContextCell(rowData, index, col, expanded, this)\">\n                        </ng-container>\n                    </a>\n                </ng-container>\n                <ng-container *ngIf=\"!col.click\">\n                    <a href=\"javascript:;\" (click)=\"view(rowData)\" [pTooltip]=\"config.tooltipView\"\n                        tooltipPosition=\"top\">\n                        <ng-container [ngTemplateOutlet]=\"contentCell\"\n                            [ngTemplateOutletContext]=\"getContextCell(rowData, index, col, expanded, this)\">\n                        </ng-container>\n                    </a>\n                </ng-container>\n            </span>\n            <span *ngIf=\"!setting.showEditLink || !col.showEditLink\" class=\"\">\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                {{rowData[field] | tnDate:col.dataType:col.format}}\n            </span>\n            <span *ngSwitchCase=\"'datetime'\" [pTooltip]=\"rowData[field] | date:'dd/MM/yyyy HH:mm'\"\n                tooltipPosition=\"top\">\n                {{rowData[field] | tnDate:col.dataType:col.format}}\n            </span>\n            <span *ngSwitchCase=\"'int'\">\n                {{rowData[field] | number}}\n            </span>\n            <span *ngSwitchCase=\"'intWithoutMask'\">\n                {{rowData[field]}}\n            </span>\n            <span *ngSwitchCase=\"'currency'\">\n                {{rowData[field] | currency:\"VND\"}}\n            </span>\n            <span *ngSwitchCase=\"'decimal'\">\n                {{rowData[field] | number}}\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=\"'fileUpload'\">\n                <ng-container\n                    *ngTemplateOutlet=\"fileUploadColumn; context: {$implicit: rowData, field: col.field, fileSetting: col.fileSetting}\">\n                </ng-container>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'fileManager'\">\n                <ng-container\n                    *ngTemplateOutlet=\"fileManagerColumn; context: {$implicit: rowData, field: col.field, fileSetting: col.fileSetting}\">\n                </ng-container>\n            </ng-container>\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 #iconToggleRowGroup let-rowData=\"rowData\" let-expanded=\"expanded\">\n    <a href=\"javascript:;\" (click)=\"handleToggleRow(rowData, $event)\">\n        <i style=\"margin-right:5px\" [ngClass]=\"expanded ? 'fas fa-fw fa-caret-down' : 'fas fa-fw fa-caret-right'\"></i>\n    </a>\n</ng-template>\n<ng-template #iconToggleRowData let-rowData=\"rowData\" let-expanded=\"expanded\">\n    <button type=\"button\" pButton pRipple class=\"link-or-action p-button-text p-button-rounded p-button-plain\"\n        [icon]=\"expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"\n        (click)=\"handleToggleRow(rowData, $event)\"></button>\n</ng-template>\n<ng-template #_contentRowGroup let-rowData=\"rowData\" let-groupCol=\"groupCol\" let-groupField=\"_groupField\">\n    <ng-container [ngTemplateOutlet]=\"contentCell\"\n        [ngTemplateOutletContext]=\"{rowData: rowData, col: groupCol, field: _groupField}\">\n    </ng-container>\n    <span *ngIf=\"setting.columnSetting.showGroupSize\">\n        ({{rowGroupMetadata[rowData[_groupField]].size}})</span>\n</ng-template>\n<ng-template #trangThaiV5 let-rowData=\"rowData\">\n    <div class=\"container-text-workflow\">\n        <button *ngIf=\"!rowData.__workflowCode && !rowData.hiddenWorkflowAction && !rowData.hiddenStartWorkflow\" pButton\n            class=\"p-button-text link-or-action\" label=\"B\u1EAFt \u0111\u1EA7u\" style=\"border: 1px solid #7ca9cd;\"\n            pTooltip=\"B\u1EAFt \u0111\u1EA7u ch\u1EA1y quy tr\u00ECnh\" tooltipPosition=\"top\"\n            [disabled]=\"rowData.__startingWorkflow && !rowData.__notReadyForStart\"\n            (click)=\"showFormStartWorkflow(rowData, dialogstartWorkflow)\"></button>\n        <ng-container *ngIf=\"rowData.__workflowCode\">\n            <span class=\"content\">{{rowData.__textTrangThai}}</span>\n            <button *ngIf=\"!rowData.hiddenWorkflowAction\" type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\n                class=\"link-or-action p-button-text p-button-rounded\" pTooltip=\"H\u00E0nh \u0111\u1ED9ng\" tooltipPosition=\"top\"\n                [disabled]=\"showingActionWorkflow\" (click)=\"showActionWorkflow($event, rowData, dialogProcessWorkflowForm, dialogDetailTask, dialogChoYKienForm)\"></button>\n        </ng-container>\n    </div>\n</ng-template>\n<ng-template #viewHistory let-rowData=\"rowData\">\n    <button pButton icon=\"pi pi-calendar\" class=\"p-button-text p-button-rounded link-or-action\" pTooltip=\"Xem l\u1ECBch s\u1EED\"\n        tooltipPosition=\"top\" (click)=\"viewHistoryWorkflow(setting, rowData)\"></button>\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 #sortIcon let-field=\"field\">\n    <i class=\"p-sortable-column-icon pi\" style=\"font-size: 0.8em;\"\n        [ngClass]=\"{'pi-sort-amount-up-alt': field == _sortField && _sortDir === 1, 'pi-sort-amount-down': field == _sortField && _sortDir === -1, 'pi-sort-alt': field != _sortField || _sortDir === 0}\"></i>\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            (onChanged)=\"prepareSearch(col)\" (onHideSmartEvent)=\"onSearch()\"\n            (onShow)=\"onShowFilterDropdownPanel($event)\" (onHide)=\"onHideFilterDropdownPanel($event)\"\n            (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\" [placeholder]=\"col.placeholder\" (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\" let-control=\"control\">\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]=\"control\" (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 *ngIf=\"!col.minimizeFilter\"\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        <ng-container *ngIf=\"col.minimizeFilter\">\n            <button *ngIf=\"!filterData[col.field]\" type=\"button\" pButton icon=\"pi pi-filter-slash\"\n                class=\"btn-filter-boolean\" (click)=\"showCheckBoxFilterMenu($event, col.field)\"></button>\n            <button *ngIf=\"filterData[col.field]\" type=\"button\" pButton icon=\"pi pi-filter\"\n                class=\"btn-filter-boolean p-button-primary\"\n                (click)=\"showCheckBoxFilterMenu($event, col.field)\"></button>\n        </ng-container>\n    </div>\n</ng-template>\n<ng-template #fileUploadColumn let-field=\"field\" let-rowData let-fileSetting=\"fileSetting\">\n    <file-upload *ngIf=\"fileSetting.control.mode == FileUploadMode.usingFileInstanceId\"\n        [sharedFolderType]=\"fileSetting.control.sharedFolderType\" [readonly]=\"fileSetting.control.readonly\"\n        [accept]=\"fileSetting.control.accept\" [(ngModel)]=\"rowData[field]\"\n        (onChanged)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.CHANGE)\"\n        (onInit)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.INIT)\"\n        (onSelect)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.SELECT)\"\n        (onRemove)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.DELETED)\">\n    </file-upload>\n\n    <service-file-upload *ngIf=\"fileSetting.control.mode == FileUploadMode.usingServiceFile\"\n        [serviceCode]=\"fileSetting.control.serviceCode\" [parentContext]=\"context\" [entity]=\"fileSetting.control.entity\"\n        [entityKey]=\"rowData[fileSetting.control.entityKeyField]\" [control]=\"fileSetting.control\"\n        [fileDataService]=\"fileSetting.control.fileDataService\" [(ngModel)]=\"rowData.field\"\n        (onChanged)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.CHANGE)\"\n        (onInit)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.INIT)\"\n        (onSelect)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.SELECT)\"\n        (onRemove)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.DELETED)\">\n    </service-file-upload>\n</ng-template>\n<ng-template #fileManagerColumn let-rowData let-fileSetting=\"fileSetting\" let-field=\"field\">\n    <file-manager [control]=\"fileSetting.control\" [serviceCode]=\"fileSetting.control.serviceCode\"\n        [entity]=\"fileSetting.control.entity\" [entityKey]=\"rowData[fileSetting.control.entityKeyField]\"\n        [readonly]=\"fileSetting.control.readonly\" [layout]=\"fileSetting.control.layout\"\n        [fileDataService]=\"fileSetting.control.fileDataService\" [maxFileSize]=\"fileSetting.control.maxFileSize\"\n        [inTaiLieu]=\"fileSetting.control.inTaiLieu\" [(value)]=\"rowData[field]\" [disabled]=\"fileSetting.control.disabled\"\n        (onChanged)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.CHANGE)\"\n        (onInit)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.INIT)\"\n        (onSelect)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.SELECT)\"\n        (onRemove)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.DELETED)\"\n        (uploaded)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.UPLOADED)\">\n    </file-manager>\n</ng-template>",
+                    template: "<div #container class=\"custom-card card card-w-title flex-container-fit-child\" [attr.height-type]=\"setting.heightType\"\n    [ngStyle]=\"_style\">\n    <div class=\"ui-helper-clearfix crud-list-header-area\">\n        <div *ngIf=\"!setting.hiddenSearch\">\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 *ngIf=\"!setting.useCommonSearch\">\n                            <ng-container *ngTemplateOutlet=\"searchCustom; context: {$implicit: this}\"></ng-container>\n                        </ng-container>\n                    </div>\n                </div>\n            </div>\n            <div *ngIf=\"setting.useCommonSearch && !hasTemplate('searchCustom')\"\n                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                        <div style=\"width: 100%;\">\n                            <common-search-form #commonSearch [parentSetting]=\"setting\" [parentModel]=\"model\"\n                                [templateFilter]=\"templateFilter\" [parentContext]=\"context\"\n                                [searchBoxTooltip]=\"setting.toolTipSearhBoxCommon\"\n                                (onClickSearch)=\"handleSearch($event)\"></common-search-form>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div *ngIf=\"!setting.hiddenHeader\" class=\"p-grid ui-fluid custom-p-col page-title-area\">\n            <div *ngIf=\"!setting.hiddenPageTitle\" class=\"main-title\">\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]=\"{\n                        crudList: this,\n                        buttonAdd: buttonAdd, buttonExport: buttonExport, buttonDelete: buttonDelete\n                    }\">\n                </ng-container>\n            </div>\n\n            <div *ngIf=\"!setting.hiddenPageSetting\" class=\"paginator-table\">\n                <ng-container *ngIf=\"!paginationTemplate\">\n                    <paging-next-back-only [model]=\"model\" [setting]=\"setting\" (onChanged)=\"getData()\"\n                        (onChangeLimitPage)=\"savePageSize()\">\n                    </paging-next-back-only>\n                </ng-container>\n                <ng-container *ngIf=\"paginationTemplate\">\n                    <ng-container [ngTemplateOutlet]=\"paginationTemplate\"></ng-container>\n                </ng-container>\n            </div>\n        </div>\n    </div>\n    <div *ngIf=\"hasTemplate('topGrid')\" class=\"extend-content-top-grid\">\n        <ng-container [ngTemplateOutletContext]=\"{selectedItems: model.selectedItems, crudList: this}\"\n            [ngTemplateOutlet]=\"getTemplate('topGrid')\"></ng-container>\n    </div>\n    <div class=\"fit-content crud-list-body-area\">\n        <div class=\"crud-list-body-area-inner\" style=\"overflow: unset;\">\n            <div class=\"flex-container-fit-child\" style=\"overflow: unset;\">\n                <div *ngIf=\"!setting.hiddenToolbar && isBtnReady\" class=\"p-grid crudListToolbar\">\n                    <ng-container>\n                        <div *ngIf=\"!setting.hiddenButtons && hasTemplate('toolbar')\"\n                            [ngClass]=\"setting.hiddenAdvanceSearch ? 'p-md-12 p-lg-12' : 'p-md-7 p-lg-8'\"\n                            class=\"p-col-12 button-group function-topbar custom-toolbar\">\n                            <ng-container [ngTemplateOutlet]=\"getTemplate('toolbar')\" [ngTemplateOutletContext]=\"{\n                                    selectedItems: model.selectedItems, crudList: this,\n                                    buttonAdd: buttonAdd, buttonExport: buttonExport, buttonDelete: buttonDelete\n                                }\">\n                            </ng-container>\n                        </div>\n                        <div *ngIf=\"!setting.hiddenButtons && !hasTemplate('toolbar')\"\n                            [ngClass]=\"setting.hiddenAdvanceSearch ? 'p-md-12 p-lg-12' : 'p-md-7 p-lg-8'\"\n                            class=\"p-col-12 button-group function-topbar\">\n                            <ng-container [ngTemplateOutlet]=\"getTemplate('buttonBeforeToolbar')\"\n                                [ngTemplateOutletContext]=\"{crudList: this}\"></ng-container>\n                            <button type=\"button\" pButton label=\"\u0110\u00E1nh STT\" class=\"p-button-text\" style=\"display: none\"\n                                (click)=\"danhSoThuTuGroupLastest()\"></button>\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\"\n                                [ngTemplateOutlet]=\"buttonExportWord\">\n                            </ng-container>\n                            <ng-container *ngIf=\"!hiddenDelete\" [ngTemplateOutlet]=\"buttonDelete\">\n                            </ng-container>\n                            <ng-container *ngIf=\"!hiddenReorder\" [ngTemplateOutlet]=\"buttonReorder\">\n                            </ng-container>\n                            <button *ngIf=\"!setting.disableShare && model.selectedItems.length > 0\"\n                                label=\"Chia s\u1EBB li\u00EAn k\u1EBFt\" type=\"button\" pButton pRipple\n                                [pTooltip]=\"'Chia s\u1EBB li\u00EAn k\u1EBFt' | translate\" tooltipPosition=\"top\"\n                                class=\"p-button-text p-button-info link-or-action\" icon=\"pi pi-link\"\n                                (click)=\"createShareLinkMultiple()\"></button>\n                            <ng-container [ngTemplateOutlet]=\"getTemplate('buttonAfterToolbar')\"\n                                [ngTemplateOutletContext]=\"{crudList: this}\"></ng-container>\n\n                            <ng-container *ngIf=\"isSuperUser\" [ngTemplateOutlet]=\"buttonAuthorize\">\n                            </ng-container>\n                        </div>\n                    </ng-container>\n                    <div *ngIf=\"!setting.hiddenAdvanceSearch && !setting.useCommonSearch\"\n                        class=\"p-col-12 advance-search-container\"\n                        [ngClass]=\"setting.hiddenButtons ? 'p-md-12 p-lg-12' : 'p-md-5 p-lg-4'\">\n                        <advance-search #advanceSearch [parentSetting]=\"setting\" [searchInfo]=\"searchInfo\"\n                            [loading]=\"model.loading\" (onSearch)=\"handleSearchAdvs($event)\"\n                            (onInit)=\"handleInitAdvanceSearch($event)\">\n                        </advance-search>\n                    </div>\n                </div>\n                <div *ngIf=\"hasTemplate('topGrid')\" class=\"extend-content-top-grid\">\n                    <ng-container [ngTemplateOutletContext]=\"{selectedItems: model.selectedItems, crudList: this}\"\n                        [ngTemplateOutlet]=\"getTemplate('topGrid')\"></ng-container>\n                </div>\n                <div class=\"container-table fit-content\" [class.--table-responsive]=\"responsive\">\n                    <div class=\"container-table-inner\">\n                        <ng-container *ngIf=\"!_groupField\">\n                            <tn-custom-scrollbar *ngIf=\"showScrollBar\" #scrollbar [config]=\"configScrollBar\"\n                                [showScrollHorizontal]=\"showScrollHorizontal\">\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldFalse\">\n                                </ng-container>\n                                <ng-container *ngIf=\"hasTemplate('afterCrudList')\">\n                                    <ng-container [ngTemplateOutlet]=\"getTemplate('afterCrudList')\"></ng-container>\n                                </ng-container>\n                            </tn-custom-scrollbar>\n                            <div *ngIf=\"!showScrollBar\">\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldFalse\">\n                                </ng-container>\n                            </div>\n                        </ng-container>\n                        <ng-container *ngIf=\"_groupField\">\n                            <tn-custom-scrollbar *ngIf=\"showScrollBar\" #scrollbar [config]=\"configScrollBar\"\n                                [showScrollHorizontal]=\"showScrollHorizontal\">\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldTrue\">\n                                </ng-container>\n                                <ng-container *ngIf=\"hasTemplate('afterCrudList')\">\n                                    <ng-container [ngTemplateOutlet]=\"getTemplate('afterCrudList')\"></ng-container>\n                                </ng-container>\n                            </tn-custom-scrollbar>\n                            <div *ngIf=\"!showScrollBar\">\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldTrue\">\n                                </ng-container>\n                            </div>\n                        </ng-container>\n\n                        <div class=\"table-border-line --top\"></div>\n                        <div class=\"table-border-line --right\"></div>\n                        <div class=\"table-border-line --bottom\"></div>\n                        <div class=\"table-border-line --left\"></div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n<after-view-checked (loaded)=\"handleReady()\"></after-view-checked>\n<settings *ngIf=\"_showSettings && !setting.hiddenSetting\" [entityMetadataService]=\"entityMetadataService\"\n    [parentContext]=\"context\" [parentSetting]=\"setting\" [parentModel]=\"model\" (onSave)=\"onSaveSettings($event)\"\n    (onDelete)=\"onDeleteSettings()\" (onCancel)=\"_showSettings = false\">\n</settings>\n<settings-row *ngIf=\"_showSettingsRowColor && !setting.hiddenSetting\" [entityMetadataService]=\"entityMetadataService\"\n    [parentContext]=\"context\" [parentSetting]=\"setting\" [parentModel]=\"model\" (onSave)=\"onSaveColorSettings($event)\"\n    (onCancel)=\"_showSettingsRowColor = false\">\n</settings-row>\n<!-- <workflow-setting-dialog *ngIf=\"_showSettingsWorkflow && !setting.hiddenSettingWorkflow\" [parentSetting]=\"setting\"\n    [parentContext]=\"context\" [parentModel]=\"model\" (onSaved)=\"onSaveWorkflowSettings($event)\"\n    (onRemoved)=\"onRemoveWorkflowSettings($event)\" (onCancel)=\"_showSettingsWorkflow = false\">\n</workflow-setting-dialog> -->\n<div #workflowSettingDialog *ngIf=\"_showSettingsWorkflow && !setting.hiddenSettingWorkflow\"></div>\n<tn-dialog #dialogWfSettingNew [visible]=\"workflowSettingModel.showEditForm\"\n    [header]=\"'C\u1EA5u h\u00ECnh quy tr\u00ECnh nghi\u1EC7p v\u1EE5' | translate\" [popupSize]=\"workflowSettingModel.popupSize\"\n    (onHide)=\"workflowSettingModel.showEditForm = false\">\n    <!-- <workflow-setting-new #formBase [parentSetting]=\"setting\" (onSaved)=\"onSaveWorkflowSettingsNew($event)\"\n        (onCancel)=\"workflowSettingModel.showEditForm = false\"></workflow-setting-new> -->\n    <div #workflowsettingnew></div>\n</tn-dialog>\n<entity-permission *ngIf=\"_showSettingsPermission && !setting.hiddenSettingPermission\" [parentSetting]=\"setting\"\n    [parentContext]=\"context\" [parentModel]=\"model\" [searchInfo]=\"searchInfo\"\n    (onCancel)=\"_showSettingsPermission = false\">\n</entity-permission>\n<p-contextMenu #contextMenu [appendTo]=\"'body'\" [styleClass]=\"'allow-selected'\" [model]=\"buttonContexts\">\n</p-contextMenu>\n<tn-dialog #dialogProcessWorkflowForm [visible]=\"processWorkflowModel.showEditForm\"\n    [header]=\"processWorkflowModel.header | translate\" [popupSize]=\"processWorkflowModel.popupSize\"\n    [scrollBarStyleClass]=\"'fit-content'\" (onHide)=\"processWorkflowModel.showEditForm = false\">\n    <div style=\"height: 100%; padding: 1rem\">\n        <!-- <process-workflow-form #formBase [businessSetting]=\"processWorkflowModel.data.setting\" [item]=\"currentItem\"\n            [workflow]=\"processWorkflowModel.data.workflow\" [action]=\"processWorkflowModel.data.action\"\n            (onSaved)=\"handleProcessedWorkflowBase()\" (onCancel)=\"processWorkflowModel.showEditForm = false\">\n        </process-workflow-form> -->\n        <div #processWorkflowForm></div>\n    </div>\n</tn-dialog>\n<tn-dialog #dialogChoYKienForm [visible]=\"choYKienModel.showEditForm\" [header]=\"choYKienModel.header | translate\"\n    [popupSize]=\"choYKienModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\n    (onHide)=\"choYKienModel.showEditForm = false\">\n    <div style=\"height: 100%\">\n        <!-- <cho-y-kien-form #formBase [bussinessSetting]=\"choYKienModel.data.setting\"\n            [rowItem]=\"choYKienModel.data.rowData\" (onSaved)=\"choYKienModel.showEditForm = false\"\n            (onCancel)=\"choYKienModel.showEditForm = false\">\n        </cho-y-kien-form> -->\n        <div #choYKienForm></div>\n    </div>\n</tn-dialog>\n<tn-dialog *ngIf=\"buttonAuthorizeModel.showEditForm\" #dialog [header]=\"buttonAuthorizeModel.header | translate\"\n    [popupSize]=\"buttonAuthorizeModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\n    (onHide)=\"handleCloseAuthorizeButtonForm()\">\n    <settings-authorize-button [authorizeButtonKey]=\"authorizeButtonKey\"\n        [dataSource]=\"buttonAuthorizeModel.data.dataSource\"></settings-authorize-button>\n</tn-dialog>\n\n<tn-dialog [visible]=\"workflowHistoryModel.showEditForm\" [header]=\"workflowHistoryModel.header | translate\"\n    [popupSize]=\"workflowHistoryModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\n    (onHide)=\"workflowHistoryModel.showEditForm = false\">\n    <div style=\"height: 100%\">\n        <!-- <workflow-history-new #formBase [businessSetting]=\"workflowHistoryModel.data.setting\"\n            [tableName]=\"workflowHistoryModel.data.tableName\" [item]=\"currentItem\"\n            [workflowSetting]=\"workflowHistoryModel.data.workflowSetting\"\n            (onCancel)=\"workflowHistoryModel.showEditForm = false\">\n        </workflow-history-new> -->\n        <div #workflowHistoryNew></div>\n    </div>\n</tn-dialog>\n<tn-dialog #dialogDetailTask [visible]=\"detailTaskModel.showEditForm\" [header]=\"detailTaskModel.header | translate\"\n    [popupSize]=\"detailTaskModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\n    (onHide)=\"detailTaskModel.showEditForm = false\">\n    <!-- <base-congviec-form #formBase [model]=\"detailTaskModel.data.taskFormModel\" [forceOnlyView]=\"true\"\n        (onCancel)=\"detailTaskModel.showEditForm = false\">\n    </base-congviec-form> -->\n    <div #detailTask></div>\n</tn-dialog>\n\n<tn-dialog #dialogPermissionSharing [visible]=\"permissionSharingModel.showEditForm\"\n    [header]=\"permissionSharingModel.header | translate\" [popupSize]=\"permissionSharingModel.popupSize\"\n    [scrollBarStyleClass]=\"'fit-content'\" (onHide)=\"permissionSharingModel.showEditForm = false\">\n    <div style=\"height: 100%\">\n        <!-- <permission-sharing #formBase [item]=\"rowDataCurrent\" [baseService]=\"setting.baseService\"\n            (onCancel)=\"permissionSharingModel.showEditForm = false\">\n        </permission-sharing> -->\n        <div #permissionSharing></div>\n    </div>\n</tn-dialog>\n<tn-dialog #dialogWorkflowPermission [visible]=\"permissionListModel.showEditForm\"\n    [header]=\"permissionListModel.header | translate\" [popupSize]=\"permissionListModel.popupSize\"\n    [scrollBarStyleClass]=\"'fit-content'\" [useDefaultScrollBar]=\"true\"\n    (onHide)=\"permissionListModel.showEditForm = false\">\n    <div style=\"height: 100%\">\n        <!-- <workflow-permission #formBase [item]=\"rowDataCurrent\" [businessSetting]=\"setting\"\n            (onCancel)=\"permissionListModel.showEditForm = false\">\n        </workflow-permission> -->\n        <div #workflowPermission></div>\n    </div>\n</tn-dialog>\n<!-- <workflow-history-dialog *ngIf=\"showHistoryWorkflow\" [baseService]=\"setting.baseService\" [item]=\"currentItem\"\n    [workflowSetting]=\"setting.workflowSetting\" (onHide)=\"handleHideHistoryWorkflow()\">\n</workflow-history-dialog> -->\n<div #workflowPermission *ngIf=\"showHistoryWorkflow\"></div>\n<tn-dialog #dialogstartWorkflow [visible]=\"startWorkflowModel.showEditForm\"\n    [header]=\"startWorkflowModel.header | translate\" [popupSize]=\"startWorkflowModel.popupSize\"\n    [scrollBarStyleClass]=\"'fit-content'\" (onHide)=\"startWorkflowModel.showEditForm = false\">\n    <div style=\"height: 100%\">\n        <!-- <start-workflow #formBase [workflows]=\"startWorkflowModel.data.workflows\"\n            [defaultWorkflow]=\"startWorkflowModel.data.defaultWorkflow\"\n            (onCancel)=\"startWorkflowModel.showEditForm = false\" (onSaved)=\"handleStartWorkflowFromDialog($event)\">\n        </start-workflow> -->\n        <div #startWorkflow></div>\n    </div>\n</tn-dialog>\n<tn-dialog #dialogBaseCongViecForm [visible]=\"congViecModel.showEditForm\" [styleClass]=\"'congviec-form tn-form-dialog'\"\n    [header]=\"congViecModel.header | translate\" [popupSize]=\"congViecModel.popupSize\"\n    (onHide)=\"congViecModel.showEditForm = false\">\n    <!-- <base-congviec-form #formBase [parentSetting]=\"congViecModel.data.congViecSetting\"\n        [model]=\"congViecModel.data.model\" (onSaved)=\"congViecModel.showEditForm = false;getData()\"\n        (onCancel)=\"congViecModel.showEditForm = false\">\n    </base-congviec-form> -->\n    <div #baseCongViecForm></div>\n</tn-dialog>\n<tn-dialog #dialog *ngIf=\"shareLinkModel.showEditForm\" [styleClass]=\"'congviec-form tn-form-dialog'\"\n    [header]=\"shareLinkModel.header | translate\" [popupSize]=\"shareLinkModel.popupSize\" [useDefaultScrollBar]=\"true\"\n    (onHide)=\"shareLinkModel.showEditForm = false\">\n    <share-link-by-permission #formBase [setting]=\"setting\" [lstItem]=\"shareLinkModel.data.lstItem\"\n        (onCancel)=\"congViecModel.showEditForm = false\">\n    </share-link-by-permission>\n</tn-dialog>\n<tn-dialog #dialogBaseCongViec [visible]=\"attachedTaskModel.showEditForm\"\n    [header]=\"attachedTaskModel.header | translate\" [popupSize]=\"attachedTaskModel.popupSize\"\n    [useDefaultScrollBar]=\"true\" (onHide)=\"attachedTaskModel.showEditForm = false\">\n    <!-- <base-congviec [serviceCode]=\"setting.baseService.serviceCode\" [entity]=\"setting.baseService.entityName\"\n        [itemIdAttach]=\"rowDataCurrent.id\"></base-congviec> -->\n    <div #baseCongViec></div>\n</tn-dialog>\n<ng-template #tableGetGroupFieldFalse>\n    <p-table #table [dataKey]=\"'id'\" [scrollable]=\"pTableScrollable\" [scrollHeight]=\"pTableScrollHeight\"\n        [columns]=\"setting.cols\" [paginator]=\"false\" [value]=\"_dataSource\" (onSort)=\"onSort($event, table)\"\n        [class]=\"_tableClass\" [responsive]=\"responsive\" [lazy]=\"lazy\" [loading]=\"model.loading\"\n        [expandedRowKeys]=\"model.expandedRowKeys\" [(selection)]=\"model.selectedItems\"\n        (onRowReorder)=\"handleRowOrdered($event)\">\n        <ng-template *ngIf=\"colgroup\" pTemplate=\"colgroup\" let-columns>\n            <ng-container *ngTemplateOutlet=\"colgroup; context: {$implicit: columns}\"></ng-container>\n        </ng-template>\n        <ng-template *ngIf=\"!colgroup\" pTemplate=\"colgroup\" let-columns>\n            <ng-container *ngTemplateOutlet=\"baseColgroup; context: {$implicit: columns}\">\n            </ng-container>\n        </ng-template>\n        <ng-template *ngIf=\"header\" pTemplate=\"header\" let-columns>\n            <ng-container\n                *ngTemplateOutlet=\"header, context: {$implicit: columns, crudList: this, rowHeaderFilter: rowHeaderFilter, contentTh: contentTh, containerSticky: containerSticky, funcCheckAll: handleCheckAll}\">\n            </ng-container>\n        </ng-template>\n        <ng-template *ngIf=\"!header\" pTemplate=\"header\" let-columns>\n            <ng-container *ngTemplateOutlet=\"trHeader; context: {$implicit: columns, funcCheckAll: handleCheckAll}\">\n            </ng-container>\n        </ng-template>\n        <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\" let-index=\"rowIndex\" let-expanded=\"expanded\">\n            <ng-container\n                *ngTemplateOutlet=\"trBody; context: {$implicit: rowData, columns: columns, index: index, expanded: expanded, eventSelectRow: handleSelectRow, eventChecked: handleCheckRowData}\">\n            </ng-container>\n            <after-view-checked *ngIf=\"index == _dataSource.length - 1\" style=\"display: none;\" [renderKey]=\"_dataSource\"\n                (loaded)=\"handleTableRendered()\">\n            </after-view-checked>\n        </ng-template>\n        <ng-template *ngIf=\"rowExpansion\" pTemplate=\"rowexpansion\" let-rowData let-expanded=\"expanded\">\n            <ng-container\n                *ngTemplateOutlet=\"rowExpansion; context: {$implicit: rowData, expanded: expanded, getColSpanGroup: getColSpanGroup}\">\n            </ng-container>\n        </ng-template>\n        <ng-template *ngIf=\"summary\" pTemplate=\"summary\">\n            <ng-container *ngTemplateOutlet=\"summary\"></ng-container>\n        </ng-template>\n        <ng-template *ngIf=\"footer\" pTemplate=\"footer\" let-columns>\n            <ng-container *ngTemplateOutlet=\"footer; context: {$implicit: columns}\"></ng-container>\n        </ng-template>\n    </p-table>\n</ng-template>\n<ng-template #tableGetGroupFieldTrue>\n    <p-table #tableGroup [scrollable]=\"pTableScrollable\" [scrollHeight]=\"pTableScrollHeight\" [columns]=\"setting.cols\"\n        [paginator]=\"false\" [value]=\"_dataSource\" [metaKeySelection]=\"false\" (onSort)=\"onSort($event, tableGroup)\"\n        [class]=\"_tableClass\" [customSort]=\"true\" [responsive]=\"responsive\" [lazy]=\"true\" [loading]=\"model.loading\"\n        [(selection)]=\"model.selectedItems\" [expandedRowKeys]=\"model.expandedRowKeys\" [dataKey]=\"_groupField\">\n        <ng-template *ngIf=\"colgroup\" pTemplate=\"colgroup\" let-columns>\n            <ng-container *ngTemplateOutlet=\"colgroup; context: {$implicit: columns}\"></ng-container>\n        </ng-template>\n        <ng-template *ngIf=\"!colgroup\" pTemplate=\"colgroup\" let-columns>\n            <ng-container *ngTemplateOutlet=\"baseColgroup; context: {$implicit: columns}\">\n            </ng-container>\n        </ng-template>\n        <ng-template *ngIf=\"header\" pTemplate=\"header\" let-columns>\n            <ng-container\n                *ngTemplateOutlet=\"header, context: {$implicit: columns, crudList: this, rowHeaderFilter: rowHeaderFilter, contentTh: contentTh, containerSticky: containerSticky, funcCheckAll: handleCheckAll_Group}\">\n            </ng-container>\n        </ng-template>\n        <ng-template *ngIf=\"!header\" pTemplate=\"header\" let-columns>\n            <ng-container\n                *ngTemplateOutlet=\"trHeader; context: {$implicit: columns, funcCheckAll: handleCheckAll_Group}\">\n            </ng-container>\n        </ng-template>\n        <ng-template pTemplate=\"body\" let-rowData let-rowIndex=\"rowIndex\" let-expanded=\"expanded\" let-columns=\"columns\">\n            <tr *ngIf=\"rowGroupMetadata[rowData[_groupField]] && rowGroupMetadata[rowData[_groupField]].index == rowIndex\"\n                class=\"p-widget-header group-row\" style=\"border: 0px; border-bottom: 1px solid #eee\">\n                <td *ngIf=\"!setting.hiddenCheckbox\" class=\"center chkbox\" [class.sticky]=\"setting.stickyColumn\">\n                    <p-checkbox [(ngModel)]=\"rowGroupChecked[rowData[_groupField]]\" binary=\"true\"\n                        (onChange)=\"handleCheckRowGroup(rowData)\">\n                    </p-checkbox>\n                    <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n                </td>\n                <ng-container *ngIf=\"!rowGroup\">\n                    <td [colSpan]=\"getColSpanGroup()\" [class]=\"_classRowGroup\">\n                        <div class=\"container-row-group\">\n                            <a href=\"javascript:;\" [pRowToggler]=\"rowData\" class=\"container-row-group-toggle\"\n                                [class.sticky]=\"setting.stickyColumn\">\n                                <i style=\"margin-right:5px\"\n                                    [ngClass]=\"expanded ? 'fas fa-fw fa-caret-down' : 'fas fa-fw fa-caret-right'\"></i>\n                                <div class=\"content-row-group\">\n                                    <ng-container *ngIf=\"!contentRowGroup\">\n                                        <ng-container [ngTemplateOutlet]=\"_contentRowGroup\"\n                                            [ngTemplateOutletContext]=\"getContextRowGroup(rowData)\">\n                                        </ng-container>\n                                    </ng-container>\n                                    <ng-container *ngIf=\"contentRowGroup\">\n                                        <ng-container [ngTemplateOutlet]=\"contentRowGroup\"\n                                            [ngTemplateOutletContext]=\"getContextRowGroup(rowData)\">\n                                        </ng-container>\n                                    </ng-container>\n                                </div>\n                            </a>\n                        </div>\n                    </td>\n                </ng-container>\n                <ng-container *ngIf=\"rowGroup\">\n                    <ng-container [ngTemplateOutlet]=\"rowGroup\"\n                        [ngTemplateOutletContext]=\"getContextRowGroupRoot(rowData, expanded)\">\n                    </ng-container>\n                </ng-container>\n            </tr>\n        </ng-template>\n        <ng-template pTemplate=\"rowexpansion\" let-columns=\"columns\" let-rowData let-index=\"rowIndex\">\n            <ng-container\n                *ngTemplateOutlet=\"trBody; context: {$implicit: rowData, columns: columns, index: index, expanded: false, eventSelectRow: handleSelectRowGroup, eventChecked: handleCheckRowData_Group}\">\n            </ng-container>\n            <after-view-checked *ngIf=\"index == _dataSource.length - 1\" style=\"display: none;\" [renderKey]=\"_dataSource\"\n                (loaded)=\"handleTableRendered()\">\n            </after-view-checked>\n        </ng-template>\n        <ng-template *ngIf=\"summary\" pTemplate=\"summary\">\n            <ng-container *ngTemplateOutlet=\"summary\"></ng-container>\n        </ng-template>\n        <ng-template *ngIf=\"footer\" pTemplate=\"footer\" let-columns>\n            <ng-container *ngTemplateOutlet=\"footer; context: {$implicit: columns}\"></ng-container>\n        </ng-template>\n    </p-table>\n    <after-view-checked></after-view-checked>\n</ng-template>\n<ng-template #baseColgroup let-columns>\n    <colgroup>\n        <col *ngIf=\"!setting.hiddenCheckbox\" [style.width]=\"widthCheckbox\" />\n        <col *ngIf=\"!setting.hiddenOrderColumn\" [style.width]=\"widthOrderColumn\" />\n        <col *ngIf=\"rowExpansion\" style=\"width: 2.5rem\" />\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=\"enableReorderRow\" style=\"width: 30px\" />\n        <col *ngIf=\"!setting.hiddenFunctionColumn\" [style.width]=\"widthFunctionColumn || _widthFunctionColumn\" />\n    </colgroup>\n</ng-template>\n<ng-template #buttonAdd>\n    <button #buttonBase appAuthorize type=\"button\" pButton pRipple label=\"Th\u00EAm m\u1EDBi\" icon=\"pi pi-plus\"\n        class=\"p-button-text\" [disabled]=\"!model.baseReady\" (click)=\"add()\"></button>\n</ng-template>\n<ng-template #buttonExport>\n    <button #buttonBase appAuthorize *ngIf=\"model.selectedItems.length > 0\"  type=\"button\" pButton pRipple\n        label=\"Xu\u1EA5t c\u00E1c m\u1EE5c \u0111\u00E3 ch\u1ECDn\" icon=\"fas fa-file-excel\" class=\"p-button-text p-button-success\"\n        (click)=\"xuatCacMucDaChon()\"></button>\n</ng-template>\n<ng-template #buttonAuthorize>\n    <button *ngIf=\"!setting.hiddenAuthorizeButton && authorizeButtonKey\" type=\"button\" pButton\n        pRipple label=\"Ph\u00E2n quy\u1EC1n n\u00FAt\" icon=\"fas fa-tools\" class=\"p-button-text\"\n        (click)=\"onShowFormSettingButton()\"></button>\n</ng-template>\n\n<ng-template #buttonExportWord>\n    <button #buttonBase appAuthorize *ngIf=\"model.selectedItems.length > 0\"  type=\"button\" pButton pRipple label=\"In c\u00E1c m\u1EE5c \u0111\u00E3 ch\u1ECDn\"\n        icon=\"fas fa-file-word\" class=\"p-button-text p-button-success\" (click)=\"printByReadingHtml()\"></button>\n</ng-template>\n<ng-template #buttonDelete>\n    <button #buttonBase *ngIf=\"(!hiddenDelete && model.selectedItems.length > 0 && !disableMultipleDelete())\"\n        appAuthorize type=\"button\" pButton pRipple label=\"X\u00F3a c\u00E1c m\u1EE5c \u0111\u00E3 ch\u1ECDn\" icon=\"pi pi-trash\"\n        class=\"p-button-text p-button-danger\" (click)=\"deleteMutiple()\"></button>\n</ng-template>\n<ng-template  #buttonReorder>\n    <button #buttonBase\n        *ngIf=\"showSaveReorder && enableReorderRow && (_sortField == setting.columnSetting.sortField || _sortDir == 0)\"\n        appAuthorize type=\"button\" pButton pRipple label=\"L\u01B0u s\u1EAFp x\u1EBFp\" icon=\"pi pi-save\"\n        class=\"p-button-text p-button-success\" (click)=\"saveReorder()\"></button>\n</ng-template>\n<ng-template #trHeader let-columns let-funcCheckAll=\"funcCheckAll\">\n    <tr class=\"title-row\">\n        <ng-container *ngIf=\"!setting.hiddenCheckbox\">\n            <th class=\"chkbox link-or-action cell-checkbox\" [class.sticky]=\"setting.stickyColumn\">\n                <button *ngIf=\"!hasTemplate('headerCheckbox') && !setting.useCommonSearch\" type=\"button\" pButton pRipple\n                    icon=\"pi pi-refresh\" class=\"p-button-rounded p-button-text btnReload\" pTooltip=\"L\u00E0m m\u1EDBi d\u1EEF li\u1EC7u\"\n                    tooltipPosition=\"top\" [disabled]=\"model.loading\" (click)=\"reload()\"></button>\n                <p-triStateCheckbox *ngIf=\"setting.useCommonSearch\" [(ngModel)]=\"checkedAll\" binary=\"true\"\n                    (onChange)=\"funcCheckAll()\">\n                </p-triStateCheckbox>\n                <ng-container *ngIf=\"hasTemplate('headerCheckbox')\">\n                    <ng-container [ngTemplateOutletContext]=\"{crudList: this}\"\n                        [ngTemplateOutlet]=\"getTemplate('headerCheckbox')\"></ng-container>\n                </ng-container>\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n            </th>\n        </ng-container>\n        <th *ngIf=\"!setting.hiddenOrderColumn\" class=\"stt nopad center\" [class.sticky]=\"setting.stickyColumn\"\n            (dblclick)=\"reload()\">\n            {{ 'TT' |translate}}\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n        </th>\n        <th *ngIf=\"rowExpansion\" class=\"nopad row-expansion-toggle center\" style=\"width: 2.5rem\"\n            [class.sticky]=\"setting.stickyColumn\">\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n        </th>\n        <ng-container *ngIf=\"hasTemplate('trHeaderBefore')\">\n            <ng-container [ngTemplateOutlet]=\"getTemplate('trHeaderBefore')\"\n                [ngTemplateOutletContext]=\"{$implicit: columns}\"></ng-container>\n        </ng-container>\n        <ng-container *ngFor=\"let col of columns; let i = index\">\n            <th *ngIf=\"col && col.visible && col.field!='function'\" [ngStyle]=\"col.extendData.headerStyle\"\n                [style.left]=\"col.isPinned && col.left ? (col.left + 'px') : ''\" [pTooltip]=\"col.fullLabel\"\n                tooltipStyleClass=\"unset-width\" [class]=\"col.extendData.headerClass\"\n                [className]=\"col.isPinned && col.width ? col.class : ''\" [class.first-th]=\"i==0\" [escape]=\"false\"\n                tooltipPosition=\"top\" [tnSortableColumn]=\"col.field\" [tnSortableColumnDisabled]=\"!col.sort\">\n                <ng-container *ngTemplateOutlet=\"contentTh; context: {$implicit: col}\"></ng-container>\n                <ng-container *ngIf=\"col.sort || col.sortClient\">\n                    <ng-container *ngTemplateOutlet=\"sortIcon; context: {field: col.field}\"></ng-container>\n                </ng-container>\n            </th>\n        </ng-container>\n        <ng-container *ngIf=\"hasTemplate('trHeaderAfter')\">\n            <ng-container [ngTemplateOutlet]=\"getTemplate('trHeaderAfter')\"\n                [ngTemplateOutletContext]=\"{$implicit: columns}\"></ng-container>\n        </ng-container>\n        <th *ngIf=\"enableReorderRow\" style=\"width: 30px\">\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n        </th>\n        <ng-container *ngTemplateOutlet=\"colFunctionHeader\"></ng-container>\n    </tr>\n    <ng-container *ngTemplateOutlet=\"rowHeaderFilter; context: {columns: columns, funcCheckAll: funcCheckAll}\">\n    </ng-container>\n</ng-template>\n<ng-template #rowHeaderFilter let-columns=\"columns\" let-funcCheckAll=\"funcCheckAll\">\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)=\"funcCheckAll()\">\n            </p-triStateCheckbox>\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n        </th>\n        <th *ngIf=\"!setting.hiddenOrderColumn\" class=\"stt center v-top\" [class.sticky]=\"setting.stickyColumn\">\n            <div *ngIf=\"!setting.hiddenSetting\" class=\"pick-color-row\" pTooltip=\"C\u1EA5u h\u00ECnh hi\u1EC3n th\u1ECB m\u00E0u\"\n                tooltipPosition=\"top\" (click)=\"showSettingRowColor()\">\n                <div></div>\n                <div></div>\n                <div></div>\n                <div></div>\n            </div>\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n        </th>\n        <th *ngIf=\"rowExpansion\" class=\"nopad center row-expansion-toggle\" [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                [style.left]=\"col.isPinned && col.left ? (col.left + 'px') : ''\"\n                [className]=\"col.isPinned && col.width ? col.class + ' cell-header-filter center': '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\"\n                                [ngTemplateOutletContext]=\"{col: col, control: filterSchema.dateRange}\">\n                            </ng-container>\n                        </ng-container>\n                        <ng-container *ngSwitchCase=\"'datetime'\">\n                            <ng-container [ngTemplateOutlet]=\"filterDate\"\n                                [ngTemplateOutletContext]=\"{col: col, control: filterSchema.dateTimeRange}\">\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=\"'intWithoutMask'\">\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=\"'currency'\">\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, control: filterSchema.dateRange}\">\n                                    </ng-container>\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"'datetime'\">\n                                    <ng-container [ngTemplateOutlet]=\"filterDate\"\n                                        [ngTemplateOutletContext]=\"{col: col, control: filterSchema.dateTimeRange}\">\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=\"enableReorderRow\" style=\"width: 30px\">\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n        </th>\n        <ng-container *ngTemplateOutlet=\"buttonBaseSetting\"></ng-container>\n    </tr>\n</ng-template>\n<ng-template #buttonBaseSetting>\n    <ng-container *ngIf=\"!setting.hiddenFunctionColumn\">\n        <th class=\"center setting-cell column-function\" [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(dialogWfSettingNew)\"></button>\n            <div *ngIf=\"setting.hiddenSetting && setting.hiddenSettingPermission && setting.hiddenSettingWorkflow\"\n                class=\"cell-header-function\">\n                <span>{{'GRID.FUNCTION'| translate}}</span>\n            </div>\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n        </th>\n    </ng-container>\n\n</ng-template>\n<ng-template #colFunctionHeader>\n    <ng-container *ngIf=\"!setting.hiddenFunctionColumn\">\n        <ng-container *ngIf=\"setting.hiddenFilterRow\">\n            <ng-container *ngTemplateOutlet=\"buttonBaseSetting\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!setting.hiddenFilterRow\">\n            <th class=\"column-function\" [class.sticky]=\"setting.stickyColumn\">\n                <div class=\"cell-header-function\">\n                    <span>{{'GRID.FUNCTION'| translate}}</span>\n                </div>\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n            </th>\n        </ng-container>\n    </ng-container>\n</ng-template>\n<ng-template #contentTh let-col>\n    <ng-container *ngIf=\"templateHeaderContent[col.field]\">\n        <ng-container *ngTemplateOutlet=\"templateHeaderContent[col.field]\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"!templateHeaderContent[col.field]\">\n        {{col.label}}\n    </ng-container>\n    <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n</ng-template>\n<ng-template #trBody let-rowData let-columns=\"columns\" let-index=\"index\" let-expanded=\"expanded\"\n    let-eventSelectRow=\"eventSelectRow\" let-eventChecked=\"eventChecked\">\n    <tr *ngIf=\"!rowData.template\" [tnReorderableRow]=\"index\" [attr.rowIndex]=\"index\" [ngClass]=\"rowData.objStyleClass\"\n        [class.ui-state-highlight]=\"rowData._checked\" [pTooltip]=\"rowData.tooltip\" tooltipPosition=\"top\"\n        [tooltipStyleClass]=\"rowData.tooltipClass\" [escape]=\"escape\" (click)=\"eventSelectRow($event, rowData)\">\n        <ng-container *ngIf=\"!setting.hiddenCheckbox && !rowData.hidden[fieldCheckbox]\">\n            <td class=\"chkbox link-or-action cell-checkbox\" [class.sticky]=\"setting.stickyColumn\"\n                [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldCheckbox]\"\n                [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldCheckbox]\">\n                <ng-container *ngIf=\"!rowData.hiddenCheckBox\">\n                    <ng-container *ngIf=\"!hasTemplate('checkbox')\">\n                        <p-checkbox [(ngModel)]=\"rowData._checked\" binary=\"true\" (onChange)=\"eventChecked(rowData)\">\n                        </p-checkbox>\n                    </ng-container>\n                    <ng-container *ngIf=\"hasTemplate('checkbox')\">\n                        <ng-container [ngTemplateOutlet]=\"getTemplate('checkbox')\"\n                            [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"></ng-container>\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n            </td>\n        </ng-container>\n        <td *ngIf=\"!setting.hiddenOrderColumn && !rowData.hidden[fieldOrder]\" class=\"stt\" style=\"text-align: center;\"\n            [class.sticky]=\"setting.stickyColumn\" [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldOrder]\"\n            [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldOrder]\">\n            <span class=\"row-card\" [ngStyle]=\"rowData.bookmarkStyle\"></span>\n            {{rowData[fieldOrder]}}\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n        </td>\n        <td *ngIf=\"rowExpansion && !rowData.hidden[fieldColExpand]\" class=\"no-padding center row-expansion-toggle\"\n            [class.sticky]=\"setting.stickyColumn\" [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldColExpand]\"\n            [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldColExpand]\">\n            <ng-container *ngTemplateOutlet=\"iconToggleRowData; context: {rowData: rowData, expanded: expanded}\">\n            </ng-container>\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n        </td>\n        <ng-container *ngIf=\"!hasTemplate('dynamicColBodys')\">\n            <ng-container *ngIf=\"hasTemplate('dynamicColBodysBefore')\">\n                <ng-container [ngTemplateOutlet]=\"getTemplate('dynamicColBodysBefore')\"\n                    [ngTemplateOutletContext]=\"{$implicit: columns, rowData: rowData, index: index, expanded: expanded}\">\n                </ng-container>\n            </ng-container>\n            <ng-container\n                *ngTemplateOutlet=\"dynamicColBodys; context: {$implicit: columns, rowData: rowData, index: index, expanded: expanded}\">\n            </ng-container>\n            <ng-container *ngIf=\"hasTemplate('dynamicColBodysAfter')\">\n                <ng-container [ngTemplateOutlet]=\"getTemplate('dynamicColBodysAfter')\"\n                    [ngTemplateOutletContext]=\"{$implicit: columns, rowData: rowData, index: index, expanded: expanded}\">\n                </ng-container>\n            </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"hasTemplate('dynamicColBodys')\">\n            <ng-container [ngTemplateOutlet]=\"getTemplate('dynamicColBodys')\"\n                [ngTemplateOutletContext]=\"{$implicit: columns, rowData: rowData, index: index, expanded: expanded}\">\n            </ng-container>\n        </ng-container>\n        <td *ngIf=\"enableReorderRow && !rowData.hidden[fieldColReorder]\" class=\"no-padding center\"\n            [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldColReorder]\"\n            [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldColReorder]\">\n            <i class=\"fas fa-arrows-alt\" style=\"cursor:pointer; padding: 8px; color: #555;\" pReorderableRowHandle></i>\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n        </td>\n        <ng-container *ngIf=\"!setting.hiddenFunctionColumn && !rowData.hidden[fieldFunction]\">\n            <td class=\"text-center column-function\" style=\"text-align: center;\" [class.sticky]=\"setting.stickyColumn\"\n                [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldFunction]\"\n                [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldFunction]\">\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=\"setting.showVersionButton\" type=\"button\" pButton pRipple icon=\"pi pi-calendar\"\n                        class=\"p-button-rounded p-button-text p-button-success link-or-action\"\n                        pTooltip=\"Xem l\u1ECBch s\u1EED phi\u00EAn b\u1EA3n\" tooltipPosition=\"top\"\n                        (click)=\"showListVersion(rowData)\"></button>\n                    <button #buttonBase *ngIf=\"!rowData.hiddenEdit\" appAuthorize type=\"button\" pButton pRipple\n                        [disabled]=\"disableEdit(rowData)\" [pTooltip]=\"'FORM.EDIT' | translate\" tooltipPosition=\"top\"\n                        class=\"p-button-rounded p-button-text p-button-info link-or-action\" icon=\"pi pi-pencil\"\n                        (click)=\"edit(rowData)\"></button>\n                    <button #buttonBase *ngIf=\"!rowData.hiddenDelete\" appAuthorize type=\"button\" pButton pRipple\n                        [disabled]=\"disableDelete(rowData)\" [pTooltip]=\"'FORM.DELETE' | translate\" tooltipPosition=\"top\"\n                        class=\"p-button-rounded p-button-text p-button-danger link-or-action\" icon=\"pi pi-trash\"\n                        (click)=\"delete(rowData)\"></button>\n                    <ng-container *ngIf=\"!hiddenBtnFunction\">\n                        <button *ngIf=\"showMenuButtons && 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\" [disabled]=\"rowData.disableFunctionRow\"\n                            (click)=\"showContextMenu($event, rowData)\"></button>\n                    </ng-container>\n                    <ng-container [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"\n                        [ngTemplateOutlet]=\"getTemplate('buttonAfter')\"></ng-container>\n                </div>\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n            </td>\n        </ng-container>\n    </tr>\n    <ng-container *ngIf=\"rowData.template\">\n        <ng-container *ngTemplateOutlet=\"rowData.template; context: {\n            $implicit: rowData, columns: columns, index: index, expanded: expanded, eventSelectRow: eventSelectRow, eventChecked: eventChecked\n        }\"></ng-container>\n    </ng-container>\n</ng-template>\n<ng-template #dynamicColBodys let-columns let-rowData=\"rowData\" let-index=\"index\" let-expanded=\"expanded\">\n    <ng-container *ngFor=\"let col of columns; let i = index\">\n        <ng-container\n            *ngTemplateOutlet=\"contentTd; context: {$implicit: rowData, col: col, index: index, i: i, expanded: expanded}\">\n        </ng-container>\n    </ng-container>\n</ng-template>\n<ng-template #contentTd let-rowData let-col=\"col\" let-index=\"index\" let-expanded=\"expanded\" let-i=\"i\">\n    <td *ngIf=\"col && col.visible && col.field != 'function' && !rowData.hidden[col.field]\"\n        [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[col.field]\"\n        [style.left]=\"col.isPinned && col.left ? (col.left + 'px') : ''\"\n        [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[col.field]\" [ngStyle]=\"col.extendData.style\"\n        [class]=\"col.cellClass\" [class.first-td]=\"i == 0\">\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\" class=\"contentTd\">\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                <ng-container *ngIf=\"col.click\">\n                    <a href=\"javascript:;\" (click)=\"col.click(rowData)\" [pTooltip]=\"config.tooltipView\"\n                        tooltipPosition=\"top\">\n                        <ng-container [ngTemplateOutlet]=\"contentCell\"\n                            [ngTemplateOutletContext]=\"getContextCell(rowData, index, col, expanded, this)\">\n                        </ng-container>\n                    </a>\n                </ng-container>\n                <ng-container *ngIf=\"!col.click\">\n                    <a href=\"javascript:;\" (click)=\"view(rowData)\" [pTooltip]=\"config.tooltipView\"\n                        tooltipPosition=\"top\">\n                        <ng-container [ngTemplateOutlet]=\"contentCell\"\n                            [ngTemplateOutletContext]=\"getContextCell(rowData, index, col, expanded, this)\">\n                        </ng-container>\n                    </a>\n                </ng-container>\n            </span>\n            <span *ngIf=\"!setting.showEditLink || !col.showEditLink\" class=\"\">\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                {{rowData[field] | tnDate:col.dataType:col.format}}\n            </span>\n            <span *ngSwitchCase=\"'datetime'\" [pTooltip]=\"rowData[field] | date:'dd/MM/yyyy HH:mm'\"\n                tooltipPosition=\"top\">\n                {{rowData[field] | tnDate:col.dataType:col.format}}\n            </span>\n            <span *ngSwitchCase=\"'int'\">\n                {{rowData[field] | number}}\n            </span>\n            <span *ngSwitchCase=\"'intWithoutMask'\">\n                {{rowData[field]}}\n            </span>\n            <span *ngSwitchCase=\"'currency'\">\n                {{rowData[field] | currency:\"VND\"}}\n            </span>\n            <span *ngSwitchCase=\"'decimal'\">\n                {{rowData[field] | number}}\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=\"'fileUpload'\">\n                <ng-container\n                    *ngTemplateOutlet=\"fileUploadColumn; context: {$implicit: rowData, field: col.field, fileSetting: col.fileSetting}\">\n                </ng-container>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'fileManager'\">\n                <ng-container\n                    *ngTemplateOutlet=\"fileManagerColumn; context: {$implicit: rowData, field: col.field, fileSetting: col.fileSetting}\">\n                </ng-container>\n            </ng-container>\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 #iconToggleRowGroup let-rowData=\"rowData\" let-expanded=\"expanded\">\n    <a href=\"javascript:;\" (click)=\"handleToggleRow(rowData, $event)\">\n        <i style=\"margin-right:5px\" [ngClass]=\"expanded ? 'fas fa-fw fa-caret-down' : 'fas fa-fw fa-caret-right'\"></i>\n    </a>\n</ng-template>\n<ng-template #iconToggleRowData let-rowData=\"rowData\" let-expanded=\"expanded\">\n    <button type=\"button\" pButton pRipple class=\"link-or-action p-button-text p-button-rounded p-button-plain\"\n        [icon]=\"expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"\n        (click)=\"handleToggleRow(rowData, $event)\"></button>\n</ng-template>\n<ng-template #_contentRowGroup let-rowData=\"rowData\" let-groupCol=\"groupCol\" let-groupField=\"_groupField\">\n    <ng-container [ngTemplateOutlet]=\"contentCell\"\n        [ngTemplateOutletContext]=\"{rowData: rowData, col: groupCol, field: _groupField}\">\n    </ng-container>\n    <span *ngIf=\"setting.columnSetting.showGroupSize\">\n        ({{rowGroupMetadata[rowData[_groupField]].size}})</span>\n</ng-template>\n<ng-template #trangThaiV5 let-rowData=\"rowData\">\n    <div class=\"container-text-workflow\">\n        <button *ngIf=\"!rowData.__workflowCode && !rowData.hiddenWorkflowAction && !rowData.hiddenStartWorkflow\" pButton\n            class=\"p-button-text link-or-action\" label=\"B\u1EAFt \u0111\u1EA7u\" style=\"border: 1px solid #7ca9cd;\"\n            pTooltip=\"B\u1EAFt \u0111\u1EA7u ch\u1EA1y quy tr\u00ECnh\" tooltipPosition=\"top\"\n            [disabled]=\"rowData.__startingWorkflow && !rowData.__notReadyForStart\"\n            (click)=\"showFormStartWorkflow(rowData, dialogstartWorkflow)\"></button>\n        <ng-container *ngIf=\"rowData.__workflowCode\">\n            <span class=\"content\">{{rowData.__textTrangThai}}</span>\n            <button *ngIf=\"!rowData.hiddenWorkflowAction\" type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\n                class=\"link-or-action p-button-text p-button-rounded\" pTooltip=\"H\u00E0nh \u0111\u1ED9ng\" tooltipPosition=\"top\"\n                [disabled]=\"showingActionWorkflow\"\n                (click)=\"showActionWorkflow($event, rowData, dialogProcessWorkflowForm, dialogDetailTask, dialogChoYKienForm)\"></button>\n        </ng-container>\n    </div>\n</ng-template>\n<ng-template #viewHistory let-rowData=\"rowData\">\n    <button pButton icon=\"pi pi-calendar\" class=\"p-button-text p-button-rounded link-or-action\" pTooltip=\"Xem l\u1ECBch s\u1EED\"\n        tooltipPosition=\"top\" (click)=\"viewHistoryWorkflow(setting, rowData)\"></button>\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 #sortIcon let-field=\"field\">\n    <i class=\"p-sortable-column-icon pi\" style=\"font-size: 0.8em;\"\n        [ngClass]=\"{'pi-sort-amount-up-alt': field == _sortField && _sortDir === 1, 'pi-sort-amount-down': field == _sortField && _sortDir === -1, 'pi-sort-alt': field != _sortField || _sortDir === 0}\"></i>\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            (onChanged)=\"prepareSearch(col)\" (onHideSmartEvent)=\"onSearch()\"\n            (onShow)=\"onShowFilterDropdownPanel($event)\" (onHide)=\"onHideFilterDropdownPanel($event)\"\n            (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\" [placeholder]=\"col.placeholder\" (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\" let-control=\"control\">\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]=\"control\" (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 *ngIf=\"!col.minimizeFilter\"\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        <ng-container *ngIf=\"col.minimizeFilter\">\n            <button *ngIf=\"!filterData[col.field]\" type=\"button\" pButton icon=\"pi pi-filter-slash\"\n                class=\"btn-filter-boolean\" (click)=\"showCheckBoxFilterMenu($event, col.field)\"></button>\n            <button *ngIf=\"filterData[col.field]\" type=\"button\" pButton icon=\"pi pi-filter\"\n                class=\"btn-filter-boolean p-button-primary\"\n                (click)=\"showCheckBoxFilterMenu($event, col.field)\"></button>\n        </ng-container>\n    </div>\n</ng-template>\n<ng-template #fileUploadColumn let-field=\"field\" let-rowData let-fileSetting=\"fileSetting\">\n    <file-upload *ngIf=\"fileSetting.control.mode == FileUploadMode.usingFileInstanceId\"\n        [sharedFolderType]=\"fileSetting.control.sharedFolderType\" [readonly]=\"fileSetting.control.readonly\"\n        [accept]=\"fileSetting.control.accept\" [(ngModel)]=\"rowData[field]\"\n        (onChanged)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.CHANGE)\"\n        (onInit)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.INIT)\"\n        (onSelect)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.SELECT)\"\n        (onRemove)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.DELETED)\">\n    </file-upload>\n\n    <service-file-upload *ngIf=\"fileSetting.control.mode == FileUploadMode.usingServiceFile\"\n        [serviceCode]=\"fileSetting.control.serviceCode\" [parentContext]=\"context\" [entity]=\"fileSetting.control.entity\"\n        [entityKey]=\"rowData[fileSetting.control.entityKeyField]\" [control]=\"fileSetting.control\"\n        [fileDataService]=\"fileSetting.control.fileDataService\" [(ngModel)]=\"rowData.field\"\n        (onChanged)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.CHANGE)\"\n        (onInit)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.INIT)\"\n        (onSelect)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.SELECT)\"\n        (onRemove)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.DELETED)\">\n    </service-file-upload>\n</ng-template>\n<ng-template #fileManagerColumn let-rowData let-fileSetting=\"fileSetting\" let-field=\"field\">\n    <file-manager [control]=\"fileSetting.control\" [serviceCode]=\"fileSetting.control.serviceCode\"\n        [entity]=\"fileSetting.control.entity\" [entityKey]=\"rowData[fileSetting.control.entityKeyField]\"\n        [readonly]=\"fileSetting.control.readonly\" [layout]=\"fileSetting.control.layout\"\n        [fileDataService]=\"fileSetting.control.fileDataService\" [maxFileSize]=\"fileSetting.control.maxFileSize\"\n        [inTaiLieu]=\"fileSetting.control.inTaiLieu\" [(value)]=\"rowData[field]\" [disabled]=\"fileSetting.control.disabled\"\n        (onChanged)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.CHANGE)\"\n        (onInit)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.INIT)\"\n        (onSelect)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.SELECT)\"\n        (onRemove)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.DELETED)\"\n        (uploaded)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.UPLOADED)\">\n    </file-manager>\n</ng-template>",
                     providers: [i3.DecimalPipe, i3.DatePipe],
                     styles: [".container-table{display:flex;overflow:hidden;flex-direction:column}.container-table .container-table-inner{display:flex;position:relative;height:auto;max-height:100%;min-height:60px}.container-table-inner>tn-custom-scrollbar{width:100%}.cell-checkbox{text-align:center}.pick-color-row{top:0;left:0;right:0;bottom:0;margin:auto;position:absolute;display:flex;flex-wrap:wrap;width:1.4em;height:1.4em;border:1px solid #d1d1d1;border-radius:2px;cursor:pointer}.pick-color-row>div{flex:0 0 50%;background:#84d140;border:1px solid #fff}.pick-color-row>div:nth-child(2){background:#fc6868}.pick-color-row>div:nth-child(3){background:#fbc02d}.pick-color-row>div:nth-child(4){background:#7dc5ff}.cell-header-function{display:flex;align-items:center}.cell-header-function>span{text-align:center;flex:1 1}.cell-header-function button{width:24px;height:24px;padding:0;margin:0}.group-icon{font-weight:400;color:#256aa2}.group-icon i{font-size:.8em;margin-right:5px}.center{text-align:center!important}.row-card{position:absolute;left:0;top:0;width:5px;height:100%}.column-function{min-width:100px;padding:0}.custom-search-area{margin:-.5em -1em .5em;padding-left:.5em;padding-right:.5em;background-color:#f2f2f2}.main-title>h1{font-size:1.2em}.filter-row>th:not(.sticky):not(.chkbox){padding:3px!important}.container-text-workflow{display:flex;align-items:center;justify-content:center}.container-text-workflow .link-or-action{color:#2196f3;cursor:pointer}.container-text-workflow .content{flex:1 1}.btnReload{height:2rem!important;width:2rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.toggle-showfull{color:#00f;cursor:pointer;font-size:.8rem;white-space:nowrap;font-weight:700}.col-share-permission>div:not(:last-child){margin-bottom:5px}.advance-search-container{display:flex;justify-content:flex-end}.btn-filter-boolean{width:26px;height:26px}.btn-filter-boolean:not(.p-button-primary),.btn-filter-boolean:not(.p-button-primary):hover{background:#f5f6f8;color:#6c757d;border-color:#ced4da}::ng-deep crud-list advance-search{display:block;flex:1;max-width:400px}::ng-deep crud-list .ps__rail-x,::ng-deep crud-list .ps__rail-y{z-index:5}::ng-deep crud-list .main-title>*>h1{font-size:1.2em}::ng-deep crud-list .p-datatable .p-datatable-thead>tr>th.cell-fixed-filter{z-index:999}::ng-deep crud-list .p-datatable .p-datatable-thead>tr>th.cell-fixed-filter .fixed-filter{z-index:10;position:fixed;min-width:200px}::ng-deep crud-list .p-datatable .p-datatable-thead>tr>th .container-icon-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}::ng-deep crud-list .check-all-custom{position:absolute;width:0;height:0}::ng-deep crud-list .cell-header-filter{position:relative}::ng-deep crud-list .cell-header-filter .tn-dropdown{height:32px}::ng-deep crud-list .cell-header-filter tn-mask .p-inputtext{width:100%}::ng-deep crud-list .cell-header-filter .filter-box{display:flex;min-width:0;background-color:#fff;border-radius:3px}::ng-deep crud-list .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 crud-list .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 crud-list .cell-header-filter .filter-box>span.action-clear{border-radius:0 3px 3px 0}::ng-deep crud-list .cell-header-filter .filter-box>span.action-clear.dirty{color:#008eff}::ng-deep crud-list .cell-header-filter .filter-box input{padding-left:5px;padding-right:5px;border:none;box-shadow:none!important}::ng-deep crud-list .cell-header-filter .filter-box:not(.no-transition){transition:min-width .1s}::ng-deep crud-list .cell-header-filter .filter-box.boolean-filter>div{flex:0 0 109px;width:109px}::ng-deep crud-list .cell-header-filter .p-multiselect-label.p-placeholder{padding-left:.5rem;padding-right:.5rem}::ng-deep crud-list .cell-header-filter.focus-within,::ng-deep crud-list .cell-header-filter:focus-within{z-index:10!important}::ng-deep crud-list .cell-header-filter.focus-within .filter-boolean-box .p-button,::ng-deep crud-list .cell-header-filter:focus-within .filter-boolean-box .p-button{z-index:10}::ng-deep crud-list .cell-header-filter.focus-within .filter-box>div,::ng-deep crud-list .cell-header-filter:focus-within .filter-box>div{box-shadow:0 0 0 .2rem #a6d5fa;border-color:#2196f3;z-index:0}::ng-deep crud-list .cell-header-filter.focus-within .short-filter-box,::ng-deep crud-list .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 crud-list .cell-header-filter.focus-within .short-filter-box>div,::ng-deep crud-list .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 crud-list .cell-header-filter.focus-within .short-filter-box>span.action-clear,::ng-deep crud-list .cell-header-filter:focus-within .short-filter-box>span.action-clear{display:flex}::ng-deep crud-list .cell-header-filter.focus-within .short-filter-box.boolean-filter,::ng-deep crud-list .cell-header-filter:focus-within .short-filter-box.boolean-filter{min-width:140px}::ng-deep crud-list .cell-header-filter.focus-within .short-filter-box.boolean-filter>div,::ng-deep crud-list .cell-header-filter:focus-within .short-filter-box.boolean-filter>div{flex:0 0 109px;width:109px}::ng-deep crud-list .cell-header-filter.focus-within:nth-last-child(2) .short-filter-box,::ng-deep crud-list .cell-header-filter:focus-within:nth-last-child(2) .short-filter-box{left:50%;transform:translateX(-50%)}::ng-deep crud-list .cell-header-filter:last-child .filter-box{right:3px}::ng-deep crud-list .table-border-line{position:absolute;z-index:5;background-color:#eee}::ng-deep crud-list .table-border-line.--left,::ng-deep crud-list .table-border-line.--right{top:0;bottom:0;width:1px}::ng-deep crud-list .table-border-line.--bottom,::ng-deep crud-list .table-border-line.--top{left:0;right:0;height:1px}::ng-deep crud-list .table-border-line.--left{left:0}::ng-deep crud-list .table-border-line.--right{right:0}::ng-deep crud-list .table-border-line.--top{top:0}::ng-deep crud-list .table-border-line.--bottom{bottom:0}::ng-deep crud-list .filter-boolean-box{text-align:center}::ng-deep crud-list .filter-boolean-box .p-selectbutton{white-space:nowrap}::ng-deep crud-list .custom-search-area crud-form{width:100%}::ng-deep crud-list .custom-search-area .main-container-search-inner .container-control{overflow:hidden;padding-bottom:0}::ng-deep crud-list>p-contextmenu{display:none}::ng-deep crud-list .contentTd{overflow:hidden;display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical}@media (max-width:640px){::ng-deep crud-list .--table-responsive .p-datatable-wrapper{padding:1px}}"]
                 },] }
@@ -25693,6 +25908,7 @@
             _this.hasCrudList = true;
             _this.customGetData = false;
             _this.readyToTrinhKy = false;
+            _this.showAllButtons = false;
             _this.plusUrl = '';
             _this.dataSearchCommon = {};
             _this.popupSizeMax = new PopupSize({ maximize: true });
@@ -25791,7 +26007,7 @@
         };
         ListBase.prototype.mergeInfoToColumnSchema = function () {
             var _this = this;
-            var i = 0, constWidth = 83, sumWidth = 0, widthColBefore = 0; // 83 tổng chiều dài checkbox + stt crud-list 
+            var i = 0, constWidth = 83, sumWidth = 0, widthColBefore = 0; // 83 tổng chiều dài checkbox + stt crud-list
             if (this.setting.hiddenCheckbox)
                 constWidth -= 35;
             if (this.setting.hiddenOrderColumn)
@@ -26119,6 +26335,7 @@
         ListBase.prototype.processGetData = function (response) {
             return __awaiter(this, void 0, void 0, function () {
                 var _a, dataSource, rawDataSource, resetSelectedItems;
+                var _this = this;
                 return __generator(this, function (_b) {
                     switch (_b.label) {
                         case 0:
@@ -26154,11 +26371,26 @@
                             // this._getRefDataDropdown(this.model.dataSource);
                             // K dùng hàm ở trên vì đối với tree list thì model.dataSource đã bị tái cấu trúc
                             this._getRefDataDropdown(rawDataSource);
+                            setTimeout(function () {
+                                _this.setAuthorizeButtons();
+                            }, 10);
                             return [2 /*return*/];
                     }
                 });
             });
         };
+        ListBase.prototype.setAuthorizeButtons = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    if (this.setting.hiddenAuthorizeButton) {
+                        this.crudList.setBtnReady(true);
+                        return [2 /*return*/];
+                    }
+                    this.crudList.setAuthorizeButton(this.lstButtonElement['_results']);
+                    return [2 /*return*/];
+                });
+            });
+        };
         ListBase.prototype.beforeRenderDataSource = function (datasource) {
             return datasource;
         };
@@ -26876,6 +27108,7 @@
         { type: Boolean }
     ]; };
     ListBase.propDecorators = {
+        lstButtonElement: [{ type: i0.ViewChildren, args: ['button',] }],
         contentCrudList: [{ type: i0.ViewChild, args: [CrudListComponent,] }],
         contentTreeTable: [{ type: i0.ViewChild, args: [TreeTableComponent,] }],
         parentModel: [{ type: i0.Input }],
@@ -38351,10 +38584,11 @@
     ]; };
 
     var AuthorizeDirective = /** @class */ (function () {
-        function AuthorizeDirective(_el, _permissionService, _userService, _moduleConfigService) {
+        function AuthorizeDirective(_el, _permissionService, _userService, _commonService, _moduleConfigService) {
             this._el = _el;
             this._permissionService = _permissionService;
             this._userService = _userService;
+            this._commonService = _commonService;
             this._moduleConfigService = _moduleConfigService;
             this._permissionTypes = exports.PermissionTypes.CONTROL;
             this.ignoreAdmin = false;
@@ -38382,13 +38616,16 @@
             configurable: true
         });
         AuthorizeDirective.prototype.ngOnInit = function () {
+        };
+        AuthorizeDirective.prototype.ngAfterViewInit = function () {
             var _this = this;
-            if (!this.enableAuthorize) {
-                return;
-            }
+            this.setAuthorizeButton();
             if (this._moduleCode) {
                 this.appCode = this._moduleCode;
             }
+            if (!this.enableAuthorize) {
+                return;
+            }
             var currentUser = this._userService.getCurrentUser();
             if (!currentUser || !(this.appCode)) {
                 console.log('Không đọc được user hoặc appCode');
@@ -38420,6 +38657,31 @@
                 }
             });
         };
+        AuthorizeDirective.prototype.setAuthorizeButton = function () {
+            var _a, _b, _c;
+            var key = window.location.pathname.substring(1).toUpperCase().replace(/\//g, '_');
+            if (i0.isDevMode()) {
+                key = this.appCode + "_" + window.location.pathname.substring(1).toUpperCase();
+            }
+            // const componentName = this._element.closest(EnumProperties.CRUD_LIST)?.parentNode[EnumProperties.TAG_NAME];
+            // if (componentName && !key.endsWith(componentName)) {
+            //     key += `_${componentName}`;
+            // }
+            var buttonText = (_b = (_a = this._element.getAttribute(exports.EnumProperties.LABEL)) !== null && _a !== void 0 ? _a : this._element.getAttribute(exports.EnumProperties.NG_REFLECT_TEXT)) !== null && _b !== void 0 ? _b : this._element.getAttribute(exports.EnumProperties.NG_REFLECT_LABEL);
+            if (!buttonText) {
+                this.enableAuthorize = false;
+                return;
+            }
+            this.buttonSetting = JSON.parse(sessionStorage.getItem(ComCtxConstants.LOCALSTORAGE_KEY.BUTTON_AUTHORIZE) || '{}');
+            var permissionCode = "[" + key + "]_[" + this._commonService.convertStringToUnSign(buttonText).replace(/ /g, '_').toUpperCase() + "]";
+            var isSetAuthorize = (_c = this.buttonSetting[key]) === null || _c === void 0 ? void 0 : _c.find(function (p) { return p.code == permissionCode; });
+            if (isSetAuthorize) {
+                this.permission = permissionCode;
+            }
+            else {
+                this.enableAuthorize = false;
+            }
+        };
         AuthorizeDirective.prototype.ngAfterContentChecked = function () {
             if (this._label && !this._bind && this._element.innerHTML !== '' && this.keepHTML) {
                 this._label.innerHTML = this._element.innerHTML;
@@ -38438,6 +38700,7 @@
         { type: i0.ElementRef },
         { type: PermissionService },
         { type: UserService },
+        { type: CommonService },
         { type: ModuleConfigService }
     ]; };
     AuthorizeDirective.propDecorators = {
@@ -49749,6 +50012,174 @@
         parentSetting: [{ type: i0.Input }]
     };
 
+    var SettingAuthorizeButtonComponent = /** @class */ (function (_super) {
+        __extends(SettingAuthorizeButtonComponent, _super);
+        function SettingAuthorizeButtonComponent(_injector, _basePermissionService, _moduleConfigService) {
+            var _this = _super.call(this, _injector) || this;
+            _this._injector = _injector;
+            _this._basePermissionService = _basePermissionService;
+            _this._moduleConfigService = _moduleConfigService;
+            _this.authorizeButtonKey = '';
+            _this.dataSource = [];
+            _this.appCode = '';
+            return _this;
+        }
+        SettingAuthorizeButtonComponent.prototype.ngOnInit = function () {
+            this.appCode = this._moduleConfigService.getConfig().appCode;
+            this.setting.baseService = this._basePermissionService;
+            this.customGetData = true;
+            this.setting.hiddenAdvanceSearch = true;
+            this.setting.hiddenHeader = true;
+            this.setting.heightType = exports.HeightType.dynamic;
+            this.setting.hiddenOrderColumn = true;
+            this.setting.hiddenFilterRow = true;
+            this.setting.hiddenSettingWorkflow = true;
+            this.setting.hiddenAuthorizeButton = true;
+            this.setting.hiddenSettingPermission = true;
+            this.setting.fixHeightTypeInDialog = false;
+            this.setting.hiddenCheckbox = false;
+            this.setting.showEditLink = false;
+            this.setting.modelSchemas = [
+                new ModelSchema({
+                    field: 'permissionCode',
+                    name: 'Mã',
+                }),
+                new ModelSchema({
+                    field: 'rawText',
+                    name: 'Tên',
+                }),
+                new ModelSchema({
+                    field: 'isAuthorize',
+                    name: 'Đã tạo quyền',
+                }),
+                new ModelSchema({
+                    field: 'ma1',
+                    name: 'Mã',
+                }),
+            ];
+            this.setting.cols = [
+                new ColumnSchemaBase({ field: 'permissionCode', sort: false, showEditLink: false }),
+                new ColumnSchemaBase({ field: 'rawText', width: '230px', sort: false }),
+                new ColumnSchemaBase({ field: 'isAuthorize', dataType: exports.DataType.boolean, width: '100px', sort: false }),
+            ];
+            _super.prototype.ngOnInit.call(this);
+        };
+        SettingAuthorizeButtonComponent.prototype.getDataCustom = function (gridInfo) {
+            this.model.dataSource = this.dataSource;
+            this.afterGetData();
+        };
+        SettingAuthorizeButtonComponent.prototype.addBasePermission = function (rowData) {
+            return __awaiter(this, void 0, void 0, function () {
+                var insertRes;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, this._basePermissionService.post(rowData)];
+                        case 1:
+                            insertRes = _a.sent();
+                            if (insertRes.success) {
+                                this._notifierService.showSuccess('Thêm quyền thành công');
+                                this.updateDataSource(insertRes.data);
+                                return [2 /*return*/];
+                            }
+                            this._notifierService.showWarning('Có lỗi trong quá trình xử lý, vui lòng thử lại');
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        SettingAuthorizeButtonComponent.prototype.deleteBasePermission = function (rowData) {
+            return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
+                return __generator(this, function (_a) {
+                    this._notifierService.showConfirm('Xác nhận xóa quyền').then(function (res) { return __awaiter(_this, void 0, void 0, function () {
+                        var deleteRes;
+                        return __generator(this, function (_a) {
+                            switch (_a.label) {
+                                case 0:
+                                    if (!res)
+                                        return [2 /*return*/];
+                                    return [4 /*yield*/, this._basePermissionService.delete(rowData.id)];
+                                case 1:
+                                    deleteRes = _a.sent();
+                                    if (deleteRes.success) {
+                                        this._notifierService.showSuccess('Xóa quyền thành công');
+                                        this.updateDataSource(rowData.id, true);
+                                        return [2 /*return*/];
+                                    }
+                                    this._notifierService.showWarning(deleteRes.message);
+                                    return [2 /*return*/];
+                            }
+                        });
+                    }); });
+                    return [2 /*return*/];
+                });
+            });
+        };
+        SettingAuthorizeButtonComponent.prototype.updateDataSource = function (id, isDeleted) {
+            if (isDeleted === void 0) { isDeleted = false; }
+            var currentRow = this.model.dataSource.find(function (p) { return p.id == id; });
+            if (!currentRow)
+                return;
+            if (isDeleted) {
+                currentRow.id = this._commonService.guid();
+            }
+            currentRow.isAuthorize = !isDeleted;
+            this.afterGetData();
+        };
+        SettingAuthorizeButtonComponent.prototype.afterGetData = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
+                return __generator(this, function (_a) {
+                    this._unmarkLoading();
+                    if (!this.model.dataSource.length)
+                        return [2 /*return*/];
+                    this.model.dataSource.forEach(function (item) {
+                        item.name = item.rawText;
+                        item.code = item.permissionCode;
+                        item.moduleCode = _this.appCode;
+                    });
+                    return [2 /*return*/];
+                });
+            });
+        };
+        SettingAuthorizeButtonComponent.prototype.ngOnDestroy = function () {
+            var _this = this;
+            var buttonSetting = JSON.parse(sessionStorage.getItem(ComCtxConstants.LOCALSTORAGE_KEY.BUTTON_AUTHORIZE) || '{}');
+            this.model.dataSource.forEach(function (rowData) {
+                var buttonItem = buttonSetting[_this.authorizeButtonKey].find(function (p) { return p.code == rowData.code; });
+                if (rowData.isAuthorize && !buttonItem) {
+                    buttonSetting[_this.authorizeButtonKey].push({
+                        id: rowData.id,
+                        code: rowData.code,
+                    });
+                }
+                else if (!rowData.isAuthorize && buttonItem) {
+                    var index = buttonSetting[_this.authorizeButtonKey].indexOf(buttonItem);
+                    buttonSetting[_this.authorizeButtonKey].splice(index, 1);
+                }
+            });
+            sessionStorage.setItem(ComCtxConstants.LOCALSTORAGE_KEY.BUTTON_AUTHORIZE, JSON.stringify(buttonSetting));
+        };
+        return SettingAuthorizeButtonComponent;
+    }(DataListBase));
+    SettingAuthorizeButtonComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'settings-authorize-button',
+                    template: "<crud-list #crudList [menuButtons]=\"getMenuButtons\" [model]=\"model\" [setting]=\"setting\" [dataSource]=\"model.dataSource\"\n    [hiddenAdd]=\"true\" [hiddenDelete]=\"true\" [hiddenCopyLink]=\"true\" (onReload)=\"_triggerProcessData($event)\"\n    (onAdd)=\"_add($event)\" (onEdit)=\"_edit($event)\" (onView)=\"_view($event)\" (onDelete)=\"_delete($event)\"\n    (onDeleteMultiple)=\"_deleteMultiple($event)\" (onReloaded)=\"_handleReloaded($event)\" (onCopyLink)=\"_copyLink($event)\"\n    (onCopyLinkMultiple)=\"_copyLinkMultiple()\">\n    <ng-template #function let-rowData=\"rowData\">\n        <button *ngIf=\"!rowData.isAuthorize\" class=\"p-button-rounded p-button-text p-button-info link-or-action\"\n            type=\"button\" pButton icon=\"pi pi-plus\" pTooltip=\"Th\u00EAm m\u1EDBi\" (click)=\"addBasePermission(rowData)\"></button>\n        <button *ngIf=\"rowData.isAuthorize\"\n            class=\"p-button-rounded  p-button-text p-button-danger p-button-info link-or-action\" type=\"button\" pButton\n            icon=\"pi pi-trash\" pTooltip=\"X\u00F3a\" (click)=\"deleteBasePermission(rowData)\"></button>\n    </ng-template>\n</crud-list>",
+                    providers: [ComponentContextService],
+                    styles: [""]
+                },] }
+    ];
+    SettingAuthorizeButtonComponent.ctorParameters = function () { return [
+        { type: i0.Injector },
+        { type: BasePermissionService },
+        { type: ModuleConfigService }
+    ]; };
+    SettingAuthorizeButtonComponent.propDecorators = {
+        authorizeButtonKey: [{ type: i0.Input }],
+        dataSource: [{ type: i0.Input }]
+    };
+
     var SettingsComponent = /** @class */ (function (_super) {
         __extends(SettingsComponent, _super);
         function SettingsComponent(_injector, _domService, _userService) {
@@ -53815,6 +54246,7 @@
             TnAccordionTabComponent,
             SplashComponentComponent,
             SettingsWorkflowComponent,
+            SettingAuthorizeButtonComponent,
             SettingsWorkflowNo1Component,
             CommonLibComponent
         ];
@@ -54022,6 +54454,7 @@
     exports.BaseModule = BaseModule;
     exports.BaseService = BaseService;
     exports.BooleanFormatPipe = BooleanFormatPipe;
+    exports.ButtonAction = ButtonAction;
     exports.ButtonControlSchema = ButtonControlSchema;
     exports.ButtonPermission = ButtonPermission;
     exports.ButtonPermissions = ButtonPermissions;
@@ -54499,7 +54932,9 @@
     exports["ɵdt"] = CheckReadyComponent;
     exports["ɵdu"] = TnAccordionTabComponent;
     exports["ɵdv"] = SettingsWorkflowComponent;
-    exports["ɵdw"] = SettingsWorkflowNo1Component;
+    exports["ɵdw"] = SettingAuthorizeButtonComponent;
+    exports["ɵdx"] = BasePermissionService;
+    exports["ɵdy"] = SettingsWorkflowNo1Component;
     exports["ɵe"] = ListBase;
     exports["ɵf"] = ListComponentBase;
     exports["ɵg"] = TreeTableComponent;