tnx-shared 5.0.60 → 5.0.62

package/bundles/tnx-shared.umd.js

@@ -395,7 +395,8 @@
         MENU_CHANGED: 'MENU_CHANGED',
         ADVANCE_SEARCH_INIT_WITHOUT_UPDATE_ROUTER: 'ADVANCE_SEARCH_INIT_WITHOUT_UPDATE_ROUTER',
         SHOW_WAIT_BOX: 'SHOW_WAIT_BOX',
-        SHOW_REJECT_CONFIRM: 'SHOW_REJECT_CONFIRM'
+        SHOW_REJECT_CONFIRM: 'SHOW_REJECT_CONFIRM',
+        NEED_CLEAR_PERMISSION_CACHE: 'NEED_CLEAR_PERMISSION_CACHE'
     };
     ComCtxConstants.ROOT_USMART = {
         SHOW_CONFIG_DATA_DEFAULT: 'SHOW_CONFIG_DATA_DEFAULT',
@@ -4568,7 +4569,34 @@
     (function (ExportAllMode) {
         ExportAllMode[ExportAllMode["ManualGetData"] = 0] = "ManualGetData";
         ExportAllMode[ExportAllMode["AutoGetData"] = 1] = "AutoGetData";
-    })(exports.ExportAllMode || (exports.ExportAllMode = {}));
+    })(exports.ExportAllMode || (exports.ExportAllMode = {}));
+    (function (EventType) {
+        EventType["CHANGE"] = "change";
+        EventType["ADJUST_VALUE"] = "adjustValue";
+        EventType["MODEL_CHANGED"] = "modelChanged";
+        EventType["FORM_READY"] = "formReady";
+        EventType["ENTER"] = "enter";
+        EventType["HIDE"] = "hide";
+        EventType["ROW_REORDER"] = "rowReorder";
+        EventType["BLUR"] = "blur";
+        EventType["READY"] = "READY";
+        EventType["DATASOURCE_LOADED"] = "dataSourceLoaded";
+        EventType["CLICK"] = "click";
+        EventType["AUTO_CORRECT"] = "autoCorrect";
+        EventType["VALIDATE"] = "validate";
+        EventType["INIT"] = "init";
+        EventType["ADDING"] = "adding";
+        EventType["ADDED"] = "added";
+        EventType["DELETING"] = "deleting";
+        EventType["DELETED"] = "deleted";
+        EventType["SELECT"] = "select";
+        EventType["TABLE_CHANGED"] = "tableChanged";
+        EventType["SAVE"] = "save";
+        EventType["MESSAGE"] = "message";
+        EventType["ROW_FINISH_INIT"] = "rowFinishInit";
+        EventType["TABLE_FINISH_INIT"] = "tableFinishInit";
+        EventType["UPLOADED"] = "uploaded";
+    })(exports.EventType || (exports.EventType = {}));
 
     var _a;
     (function (WorkflowCoreStatusEnum) {
@@ -8913,6 +8941,7 @@
             }
             else {
                 this._applicationContext.getRootContext().replaySubscribeOnce(ComCtxConstants.ROOT.USER_READY, function (rs) {
+                    var firstTimeLogin = rs;
                     var accessToken = _this._oauthService.getAccessToken();
                     var decoded = JWT.default(accessToken);
                     // Chuyển đổi sang dùng instanceId nếu đăng nhập bằng identityv4 nhưng phải sử dụng base userOrgv5
@@ -8954,7 +8983,12 @@
                             localStorage.setItem(_this.CURRENT_USER_KEY, JSON.stringify(user));
                         }
                         _this._applicationContext.getRootContext().data.currentUser = user;
-                        _this._applicationContext.getRootContext().fireReplayEvent(ComCtxConstants.ROOT.USER_LOADED, true);
+                        if (firstTimeLogin) {
+                            _this._applicationContext.getRootContext().fireEvent(ComCtxConstants.ROOT.NEED_CLEAR_PERMISSION_CACHE);
+                        }
+                        else {
+                            _this._applicationContext.getRootContext().fireReplayEvent(ComCtxConstants.ROOT.USER_LOADED, true);
+                        }
                     }, function (err) {
                     });
                 });
@@ -9505,7 +9539,7 @@
     var PermissionService = /** @class */ (function (_super) {
         __extends(PermissionService, _super);
         function PermissionService(http, injector, _moduleConfigService, _userService, _oauthService, _appContext) {
-            var _this = _super.call(this, http, injector, _moduleConfigService.getConfig().environment.apiDomain.authorizationEndpoint + "/" + _moduleConfigService.getConfig().environment.apiVersion + "/permission") || this;
+            var _this = _super.call(this, http, injector, (_moduleConfigService.getConfig().environment.authenticationSettings.coreVersion == 'v4' ? _moduleConfigService.getConfig().environment.apiDomain.authorizationEndpoint : _moduleConfigService.getConfig().environment.apiDomain.authorizationEndpoint + "/" + _moduleConfigService.getConfig().environment.apiVersion) + "/permission") || this;
             _this._moduleConfigService = _moduleConfigService;
             _this._userService = _userService;
             _this._oauthService = _oauthService;
@@ -9738,6 +9772,10 @@
                 }
             });
         };
+        PermissionService.prototype.clearPermissionCache = function (lstModule) {
+            var url = this.serviceUri + "/ClearPermissionCache";
+            return this.defaultPost(url, lstModule);
+        };
         return PermissionService;
     }(BaseService));
     PermissionService.ɵprov = i0.ɵɵdefineInjectable({ factory: function PermissionService_Factory() { return new PermissionService(i0.ɵɵinject(i1$1.HttpClient), i0.ɵɵinject(i0.INJECTOR), i0.ɵɵinject(ModuleConfigService), i0.ɵɵinject(UserService), i0.ɵɵinject(i4.OAuthService), i0.ɵɵinject(ApplicationContextService)); }, token: PermissionService, providedIn: "root" });
@@ -20701,13 +20739,16 @@
                 });
             });
         };
-        MenuService.prototype.renderMenuByAppCode = function (appCode) {
+        MenuService.prototype.renderMenuByAppCode = function (scopeName, appCode) {
             return __awaiter(this, void 0, void 0, function () {
                 var menuUrl;
                 var _this = this;
                 return __generator(this, function (_a) {
                     this._menuItems = [];
                     menuUrl = "assets/menus/" + appCode.toLocaleLowerCase() + ".json";
+                    if (scopeName) {
+                        menuUrl = "assets/menus/" + scopeName.toLocaleLowerCase() + "/" + appCode.toLocaleLowerCase() + ".json";
+                    }
                     fetch(menuUrl).then(function (rs) { return __awaiter(_this, void 0, void 0, function () {
                         var menu, _a, _b;
                         return __generator(this, function (_c) {
@@ -20861,7 +20902,7 @@
                 // Nếu là môi trường triển khai thì cộng thêm tiền tố phân hệ vào router link để có thể chuột phải mở tab mới
                 funcSetNewTabLink = function (link) { return "/" + appCodeLowerCase + link; };
             }
-            this._menuService.renderMenuByAppCode(appCode);
+            this._menuService.renderMenuByAppCode(this.environment.scopeName, appCode);
             this.model = this._menuService.getMenuItems();
             this._router.events.pipe(operators.filter(function (event) { return event instanceof i3.NavigationEnd; }))
                 .subscribe(function (event) {
@@ -23422,7 +23463,7 @@
     };
 
     var CommonAppComponentComponent = /** @class */ (function () {
-        function CommonAppComponentComponent(_globalService, _commonService, renderer, translate, _oauthService, _authenService, _userService, _router, _title, _signalRService, _storageUpdatedService, _customRouteService, _applicationContext, _componentContextService, _activatedRoute, _deviceDetectorService, _cd, _tnClientService, _coreConfigService, _notifierService, _entityMetadataService, _moduleConfigService, _translateService, _messageService, _confirmService, _menuService, _primengConfig, _storageService) {
+        function CommonAppComponentComponent(_globalService, _commonService, renderer, translate, _oauthService, _authenService, _userService, _router, _title, _signalRService, _storageUpdatedService, _customRouteService, _applicationContext, _componentContextService, _activatedRoute, _deviceDetectorService, _cd, _tnClientService, _coreConfigService, _notifierService, _entityMetadataService, _moduleConfigService, _translateService, _messageService, _confirmService, _menuService, _primengConfig, _storageService, _permissionService) {
             var _this = this;
             this._globalService = _globalService;
             this._commonService = _commonService;
@@ -23452,6 +23493,7 @@
             this._menuService = _menuService;
             this._primengConfig = _primengConfig;
             this._storageService = _storageService;
+            this._permissionService = _permissionService;
             this.showQuickNote = true;
             this.allowAnonymous = false;
             this._unsubscribeAll = new rxjs.Subject();
@@ -23605,6 +23647,25 @@
             root.data.allowAnonymous = this.allowAnonymous;
             // get current User
             this._userService.populateCurrentUser();
+            this._componentContextService.subscribe(ComCtxConstants.ROOT.NEED_CLEAR_PERMISSION_CACHE, function () { return __awaiter(_this, void 0, void 0, function () {
+                var clear;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!(this.environment.authenticationSettings.coreVersion == 'v4')) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this.clearPermissionCacheByModule()];
+                        case 1:
+                            clear = _a.sent();
+                            if (!clear.success) {
+                                this._notifierService.showWarning('Có vấn đề trong lúc clear cache quyền');
+                            }
+                            _a.label = 2;
+                        case 2:
+                            this._applicationContext.getRootContext().fireReplayEvent(ComCtxConstants.ROOT.USER_LOADED);
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
             this._componentContextService.subscribe(ComCtxConstants.ROOT.KEY_DOWN_ARROWLEFT, function (e) {
                 if (document.activeElement === _this.cancelButton.nativeElement) {
                     _this.okButton.nativeElement.focus();
@@ -24120,6 +24181,17 @@
                 }
             }
         };
+        CommonAppComponentComponent.prototype.clearPermissionCacheByModule = function () {
+            var appSwitcher = this._moduleConfigService.getConfig().environment.appMetadata.appSwitcher;
+            if (!appSwitcher || !appSwitcher.length) {
+                appSwitcher = [];
+            }
+            var lstModule = appSwitcher.map(function (x) { return x.code; });
+            if (!lstModule) {
+                lstModule = [];
+            }
+            return this._permissionService.clearPermissionCache(lstModule);
+        };
         return CommonAppComponentComponent;
     }());
     CommonAppComponentComponent.decorators = [
@@ -24158,7 +24230,8 @@
         { type: i1.ConfirmationService },
         { type: MenuService },
         { type: i1.PrimeNGConfig },
-        { type: StorageService }
+        { type: StorageService },
+        { type: PermissionService }
     ]; };
     CommonAppComponentComponent.propDecorators = {
         okButton: [{ type: i0.ViewChild, args: ['okButton',] }],
@@ -26315,6 +26388,8 @@
             });
             _this.sourceIcon = {};
             _this.stopCalculatingFunctionColumnWidth = false;
+            _this.FileUploadMode = exports.FileUploadMode;
+            _this.eventType = exports.EventType;
             _this._unSubscribeAll = new rxjs.Subject();
             _this.handleSelectRow = function (evt, data) {
                 if (_this.setting.hasCustomHandleClickRow) {
@@ -26497,6 +26572,94 @@
                 _this.setting.pageSetting.page = 1;
                 _this.getData();
             };
+            _this.handleFieldValueChange = function (control, event, rowData, type) { return __awaiter(_this, void 0, void 0, function () {
+                var eventData, _f, _a_1, _b_1, _c_1, _d_1, _e_1;
+                return __generator(this, function (_g) {
+                    switch (_g.label) {
+                        case 0:
+                            eventData = {
+                                event: event,
+                                rowData: rowData,
+                                type: type
+                            };
+                            _f = type;
+                            switch (_f) {
+                                case exports.EventType.CHANGE: return [3 /*break*/, 1];
+                                case exports.EventType.INIT: return [3 /*break*/, 6];
+                                case exports.EventType.DELETED: return [3 /*break*/, 11];
+                                case exports.EventType.SELECT: return [3 /*break*/, 16];
+                                case exports.EventType.UPLOADED: return [3 /*break*/, 21];
+                            }
+                            return [3 /*break*/, 26];
+                        case 1:
+                            if (!control.onChanged) return [3 /*break*/, 5];
+                            _g.label = 2;
+                        case 2:
+                            _g.trys.push([2, 4, , 5]);
+                            return [4 /*yield*/, control.onChanged(eventData)];
+                        case 3:
+                            _g.sent();
+                            return [3 /*break*/, 5];
+                        case 4:
+                            _a_1 = _g.sent();
+                            return [3 /*break*/, 5];
+                        case 5: return [3 /*break*/, 26];
+                        case 6:
+                            if (!control.onInit) return [3 /*break*/, 10];
+                            _g.label = 7;
+                        case 7:
+                            _g.trys.push([7, 9, , 10]);
+                            return [4 /*yield*/, control.onInit(eventData)];
+                        case 8:
+                            _g.sent();
+                            return [3 /*break*/, 10];
+                        case 9:
+                            _b_1 = _g.sent();
+                            return [3 /*break*/, 10];
+                        case 10: return [3 /*break*/, 26];
+                        case 11:
+                            if (!control.onRemove) return [3 /*break*/, 15];
+                            _g.label = 12;
+                        case 12:
+                            _g.trys.push([12, 14, , 15]);
+                            return [4 /*yield*/, control.onRemove(eventData)];
+                        case 13:
+                            _g.sent();
+                            return [3 /*break*/, 15];
+                        case 14:
+                            _c_1 = _g.sent();
+                            return [3 /*break*/, 15];
+                        case 15: return [3 /*break*/, 26];
+                        case 16:
+                            if (!control.onSelected) return [3 /*break*/, 20];
+                            _g.label = 17;
+                        case 17:
+                            _g.trys.push([17, 19, , 20]);
+                            return [4 /*yield*/, control.onSelected(eventData)];
+                        case 18:
+                            _g.sent();
+                            return [3 /*break*/, 20];
+                        case 19:
+                            _d_1 = _g.sent();
+                            return [3 /*break*/, 20];
+                        case 20: return [3 /*break*/, 26];
+                        case 21:
+                            if (!control.onUploaded) return [3 /*break*/, 25];
+                            _g.label = 22;
+                        case 22:
+                            _g.trys.push([22, 24, , 25]);
+                            return [4 /*yield*/, control.onUploaded(eventData)];
+                        case 23:
+                            _g.sent();
+                            return [3 /*break*/, 25];
+                        case 24:
+                            _e_1 = _g.sent();
+                            return [3 /*break*/, 25];
+                        case 25: return [3 /*break*/, 26];
+                        case 26: return [2 /*return*/];
+                    }
+                });
+            }); };
             _this._activatedRoute = _this._injector.get(i3.ActivatedRoute);
             _this._router = _this._injector.get(i3.Router);
             _this._customRouterService = _this._injector.get(CustomRouterService);
@@ -26804,7 +26967,7 @@
             });
         };
         CrudListComponent.prototype.formatColumns = function (cols) {
-            var e_1, _b;
+            var e_1, _f;
             try {
                 for (var cols_1 = __values(cols), cols_1_1 = cols_1.next(); !cols_1_1.done; cols_1_1 = cols_1.next()) {
                     var col = cols_1_1.value;
@@ -26816,7 +26979,7 @@
             catch (e_1_1) { e_1 = { error: e_1_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_1) throw e_1.error; }
             }
@@ -27015,7 +27178,7 @@
         CrudListComponent.prototype.validatePermission = function (rowData) {
             return __awaiter(this, void 0, void 0, function () {
                 var itemStatus, hasPermission, userData, userId, userIdUpper, userGroupIds, userOrgIds, managerTypes, userIdLastUpper_1, donViIdLastUpper_1;
-                return __generator(this, function (_b) {
+                return __generator(this, function (_f) {
                     this.currentItem = rowData;
                     itemStatus = this.setting.workflowSetting.statuses.find(function (p) { return p.trangThaiContainer.ma == rowData.currentStateCode; });
                     hasPermission = false;
@@ -27082,12 +27245,12 @@
         };
         CrudListComponent.prototype.showActionWorkflow = function (evt, rowData) {
             return __awaiter(this, void 0, void 0, function () {
-                var _b, buttonContexts, hasPermission;
-                return __generator(this, function (_c) {
-                    switch (_c.label) {
+                var _f, buttonContexts, hasPermission;
+                return __generator(this, function (_g) {
+                    switch (_g.label) {
                         case 0: return [4 /*yield*/, this.getActionWorkflow(rowData)];
                         case 1:
-                            _b = __read.apply(void 0, [_c.sent(), 2]), buttonContexts = _b[0], hasPermission = _b[1];
+                            _f = __read.apply(void 0, [_g.sent(), 2]), buttonContexts = _f[0], hasPermission = _f[1];
                             this.buttonContexts = buttonContexts;
                             rowData.__hasPermission = hasPermission;
                             rowData.__actions = this.buttonContexts;
@@ -27101,11 +27264,11 @@
             return __awaiter(this, void 0, void 0, function () {
                 var hasPermission, buttonContexts, statusAction, actions;
                 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.validatePermission(rowData)];
                         case 1:
-                            hasPermission = _b.sent();
+                            hasPermission = _f.sent();
                             buttonContexts = [];
                             if (!hasPermission) {
                                 buttonContexts = [];
@@ -27171,8 +27334,8 @@
             return __awaiter(this, void 0, void 0, function () {
                 var dataProcess_1, validateWf;
                 var _this = this;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0:
                             if (!(workflowAction.actionOptions && !workflowAction.actionOptions.openDialog)) return [3 /*break*/, 2];
                             dataProcess_1 = {
@@ -27182,7 +27345,7 @@
                             };
                             return [4 /*yield*/, this.setting.baseService.validateProcessWorkflow(this.currentItem.id, workflowAction.ma, dataProcess_1)];
                         case 1:
-                            validateWf = _b.sent();
+                            validateWf = _f.sent();
                             this.handleResponse(validateWf, '', function (f) {
                                 _this.setting.baseService.processWorkflow(_this.currentItem.id, workflowAction.ma, dataProcess_1)
                                     .then(function (res) { return _this.handleResponse(res, workflowAction.ten + " th\u00E0nh c\u00F4ng", function (f) {
@@ -27206,7 +27369,7 @@
                             this.actionWorkflow = workflowAction;
                             this.headerWorkflow = workflowAction.ten;
                             this.showFormWorkflow = true;
-                            _b.label = 3;
+                            _f.label = 3;
                         case 3: return [2 /*return*/];
                     }
                 });
@@ -27309,7 +27472,7 @@
             this.onAdd.emit();
         };
         CrudListComponent.prototype.xuatCacMucDaChon_backup = function () {
-            var e_2, _b;
+            var e_2, _f;
             if (this._groupField) {
                 this._notifierService.showWarning('Giao diện hiện tại chưa hỗ trợ xuất excel');
                 return;
@@ -27351,7 +27514,7 @@
             catch (e_2_1) { e_2 = { error: e_2_1 }; }
             finally {
                 try {
-                    if (rowData_1_1 && !rowData_1_1.done && (_b = rowData_1.return)) _b.call(rowData_1);
+                    if (rowData_1_1 && !rowData_1_1.done && (_f = rowData_1.return)) _f.call(rowData_1);
                 }
                 finally { if (e_2) throw e_2.error; }
             }
@@ -27494,8 +27657,8 @@
         CrudListComponent.prototype.checkHasPermissionInLastStatus = function (rowData) {
             return __awaiter(this, void 0, void 0, function () {
                 var statusKetThuc;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0:
                             statusKetThuc = this.setting.workflowSetting.statuses.find(function (q) { return q.type == exports.EnumWFNhomTrangThai.KET_THUC; });
                             if (statusKetThuc == null) {
@@ -27508,46 +27671,46 @@
                             return [4 /*yield*/, this.validatePermission(rowData)];
                         case 1: 
                         // Kiểm tra permission
-                        return [2 /*return*/, _b.sent()];
+                        return [2 /*return*/, _f.sent()];
                     }
                 });
             });
         };
         CrudListComponent.prototype.showContextMenu = function (evt, rowData) {
             return __awaiter(this, void 0, void 0, function () {
-                var _b, _c, _d, _e;
-                return __generator(this, function (_f) {
-                    switch (_f.label) {
+                var _f, _g, _h, _j;
+                return __generator(this, function (_k) {
+                    switch (_k.label) {
                         case 0:
                             this.rowDataCurrent = rowData;
-                            _b = this;
+                            _f = this;
                             return [4 /*yield*/, this.menuButtons(rowData)];
                         case 1:
-                            _b.buttonContexts = _f.sent();
+                            _f.buttonContexts = _k.sent();
                             if (!(!this.setting.hiddenTrinhKy && !rowData.__hiddenTrinhKy)) return [3 /*break*/, 7];
-                            _d = this.setting.checkReadyToTrinhKy();
-                            if (!_d) return [3 /*break*/, 3];
+                            _h = this.setting.checkReadyToTrinhKy();
+                            if (!_h) return [3 /*break*/, 3];
                             return [4 /*yield*/, this.setting.checkAllowTrinhKy(rowData)];
                         case 2:
-                            _d = (_f.sent());
-                            _f.label = 3;
+                            _h = (_k.sent());
+                            _k.label = 3;
                         case 3:
-                            _c = _d;
-                            if (!_c) return [3 /*break*/, 6];
-                            _e = !this.setting.checkPermisionTrinhKy;
-                            if (_e) return [3 /*break*/, 5];
+                            _g = _h;
+                            if (!_g) return [3 /*break*/, 6];
+                            _j = !this.setting.checkPermisionTrinhKy;
+                            if (_j) return [3 /*break*/, 5];
                             return [4 /*yield*/, this.checkHasPermissionInLastStatus(rowData)];
                         case 4:
-                            _e = (_f.sent());
-                            _f.label = 5;
+                            _j = (_k.sent());
+                            _k.label = 5;
                         case 5:
-                            _c = (_e);
-                            _f.label = 6;
+                            _g = (_j);
+                            _k.label = 6;
                         case 6:
-                            if (_c) {
+                            if (_g) {
                                 this.buttonContexts.unshift({ label: this.setting.getLabelButtonTrinhKy(rowData), icon: 'pi pi-send', command: this.trinhKy.bind(this) });
                             }
-                            _f.label = 7;
+                            _k.label = 7;
                         case 7:
                             if (this.buttonContexts.length > 0) {
                                 this._showContextMenu(evt);
@@ -28140,10 +28303,10 @@
                 clearTimeout(this.timeout);
         };
         CrudListComponent.prototype.disableMultipleDelete = function () {
-            var e_3, _b;
+            var e_3, _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;
                     }
@@ -28152,7 +28315,7 @@
             catch (e_3_1) { e_3 = { error: e_3_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_3) throw e_3.error; }
             }
@@ -28222,11 +28385,11 @@
         };
         CrudListComponent.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.model.dataSource)];
                         case 1:
-                            _b.sent();
+                            _f.sent();
                             return [2 /*return*/];
                     }
                 });
@@ -28235,11 +28398,11 @@
         CrudListComponent.prototype.preProcessData = function (dataSource) {
             return __awaiter(this, void 0, void 0, function () {
                 var colHasPipe, _loop_3, this_2, colHasPipe_1, colHasPipe_1_1, col;
-                var e_4, _b;
-                return __generator(this, function (_c) {
+                var e_4, _f;
+                return __generator(this, function (_g) {
                     colHasPipe = this.setting.cols.filter(function (x) { return x.pipe; });
                     _loop_3 = function (col) {
-                        var e_5, _b;
+                        var e_5, _f;
                         var _loop_4 = function (item) {
                             this_2.transform(col.pipe, col.asyncPipe, item[col.field]).then(function (rs) {
                                 item["pipe__" + col.field] = rs;
@@ -28254,7 +28417,7 @@
                         catch (e_5_1) { e_5 = { error: e_5_1 }; }
                         finally {
                             try {
-                                if (dataSource_1_1 && !dataSource_1_1.done && (_b = dataSource_1.return)) _b.call(dataSource_1);
+                                if (dataSource_1_1 && !dataSource_1_1.done && (_f = dataSource_1.return)) _f.call(dataSource_1);
                             }
                             finally { if (e_5) throw e_5.error; }
                         }
@@ -28269,7 +28432,7 @@
                     catch (e_4_1) { e_4 = { error: e_4_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_4) throw e_4.error; }
                     }
@@ -28280,8 +28443,8 @@
         CrudListComponent.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]];
@@ -28289,7 +28452,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:
@@ -28383,7 +28546,7 @@
             return {};
         };
         CrudListComponent.prototype.getMinimizeData = function (model) {
-            var e_6, _b;
+            var e_6, _f;
             if (isLiteralObject(model)) {
                 if (model._dropdownvalue != null && model._dropdownvalue !== '') {
                     return model[model._dropdownvalue];
@@ -28409,7 +28572,7 @@
                 catch (e_6_1) { e_6 = { error: e_6_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_6) throw e_6.error; }
                 }
@@ -28557,7 +28720,7 @@
         };
         CrudListComponent.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;
@@ -28567,10 +28730,10 @@
         };
         CrudListComponent.prototype.createSearchSchema = function () {
             return __awaiter(this, void 0, void 0, function () {
-                var searchInfo, _b, _c, col, control, e_7_1, _loop_5, this_3, _d, _e, field;
-                var e_7, _f, _g, e_8, _h;
-                return __generator(this, function (_j) {
-                    switch (_j.label) {
+                var searchInfo, _f, _g, col, control, e_7_1, _loop_5, this_3, _h, _j, field;
+                var e_7, _k, _l, e_8, _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')];
@@ -28580,14 +28743,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) {
@@ -28600,9 +28763,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, __spread(control));
+                                (_l = searchInfo.schema).push.apply(_l, __spread(control));
                             }
                             else {
                                 if (col.baseService || (col.dataSource && col.dataSource.length > 0)) {
@@ -28656,18 +28819,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_7_1 = _j.sent();
+                            e_7_1 = _o.sent();
                             e_7 = { error: e_7_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_7) throw e_7.error; }
                             return [7 /*endfinally*/];
@@ -28687,15 +28850,15 @@
                                 };
                                 this_3 = 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_5(field);
                                     }
                                 }
                                 catch (e_8_1) { e_8 = { error: e_8_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_8) throw e_8.error; }
                                 }
@@ -28771,7 +28934,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\"\r\n    [ngStyle]=\"_style\">\r\n    <div class=\"ui-helper-clearfix crud-list-header-area\">\r\n        <div *ngIf=\"searchCustom\" class=\"p-grid ui-fluid custom-p-col custom-search-area\">\r\n            <div class=\"p-col-12 main-container-search\">\r\n                <div class=\"p-grid main-container-search-inner\">\r\n                    <ng-container>\r\n                        <ng-container *ngTemplateOutlet=\"searchCustom; context: {$implicit: this}\"></ng-container>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"!setting.hiddenHeader\" class=\"p-grid ui-fluid custom-p-col page-title-area\">\r\n            <div *ngIf=\"!setting.hiddenPageTitle\" class=\"main-title\">\r\n                <h1 *ngIf=\"!hasTemplate('customTitle')\">\r\n                    {{setting.title != null ? setting.title : 'Danh s\u00E1ch ' + setting.objectName}}\r\n                </h1>\r\n\r\n                <ng-container *ngIf=\"hasTemplate('customTitle')\" [ngTemplateOutlet]=\"getTemplate('customTitle')\"\r\n                    [ngTemplateOutletContext]=\"{crudList: this}\">\r\n                </ng-container>\r\n            </div>\r\n\r\n            <div *ngIf=\"!setting.hiddenPageSetting\" class=\"paginator-table\">\r\n                <paging-next-back-only [model]=\"model\" [setting]=\"setting\" (onOldest)=\"onOldest($event)\"\r\n                    (onNext)=\"onNext($event)\" (onPrev)=\"onPrev($event)\" (onLatest)=\"onLatest($event)\"\r\n                    (onChangeLimitPage)=\"savePageSize()\">\r\n                </paging-next-back-only>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"fit-content crud-list-body-area\">\r\n        <div class=\"crud-list-body-area-inner\" style=\"overflow: unset;\">\r\n            <div class=\"flex-container-fit-child\" style=\"overflow: unset;\">\r\n                <div *ngIf=\"!setting.hiddenToolbar\" class=\"p-grid crudListToolbar\">\r\n                    <ng-container>\r\n                        <div *ngIf=\"!setting.hiddenButtons && hasTemplate('toolbar')\"\r\n                            [ngClass]=\"setting.hiddenAdvanceSearch ? 'p-md-12 p-lg-12' : 'p-md-7 p-lg-8'\"\r\n                            class=\"p-col-12 button-group function-topbar custom-toolbar\">\r\n                            <ng-container\r\n                                [ngTemplateOutletContext]=\"{selectedItems: model.selectedItems, crudList: this}\"\r\n                                [ngTemplateOutlet]=\"getTemplate('toolbar')\"></ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"!setting.hiddenButtons && !hasTemplate('toolbar')\"\r\n                            [ngClass]=\"setting.hiddenAdvanceSearch ? 'p-md-12 p-lg-12' : 'p-md-7 p-lg-8'\"\r\n                            class=\"p-col-12 button-group function-topbar\">\r\n                            <button *ngIf=\"!hiddenAdd\" type=\"button\" pButton pRipple label=\"Th\u00EAm m\u1EDBi\" icon=\"pi pi-plus\"\r\n                                class=\"p-button-text\" (click)=\"add()\"></button>\r\n                            <button *ngIf=\"model.selectedItems.length > 0\" type=\"button\" pButton pRipple\r\n                                label=\"Xu\u1EA5t c\u00E1c m\u1EE5c \u0111\u00E3 ch\u1ECDn ({{model.selectedItems.length}})\" icon=\"fas fa-file-excel\"\r\n                                class=\"p-button-text p-button-success\" (click)=\"xuatCacMucDaChon()\"></button>\r\n                            <button *ngIf=\"!hiddenDelete && model.selectedItems.length > 0 && !disableMultipleDelete()\"\r\n                                type=\"button\" pButton pRipple\r\n                                label=\"{{ 'X\u00F3a' | translate }} ({{model.selectedItems.length}})\" icon=\"pi pi-trash\"\r\n                                class=\"p-button-text p-button-danger\" (click)=\"deleteMutiple()\"></button>\r\n                            <ng-container [ngTemplateOutlet]=\"getTemplate('buttonAfterToolbar')\"\r\n                                [ngTemplateOutletContext]=\"{crudList: this}\"></ng-container>\r\n                        </div>\r\n                    </ng-container>\r\n                    <div *ngIf=\"!setting.hiddenAdvanceSearch\" class=\"p-col-12 advance-search-container\"\r\n                        [ngClass]=\"setting.hiddenButtons ? 'p-md-12 p-lg-12' : 'p-md-5 p-lg-4'\">\r\n                        <advance-search #advanceSearch [parentSetting]=\"setting\" [searchInfo]=\"searchInfo\"\r\n                            [loading]=\"model.loading\" (onSearch)=\"handleSearchAdvs($event)\"\r\n                            (onInit)=\"handleInitAdvanceSearch($event)\">\r\n                        </advance-search>\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"hasTemplate('topGrid')\" class=\"extend-content-top-grid\">\r\n                    <ng-container [ngTemplateOutletContext]=\"{selectedItems: model.selectedItems, crudList: this}\"\r\n                        [ngTemplateOutlet]=\"getTemplate('topGrid')\"></ng-container>\r\n                </div>\r\n                <div class=\"container-table fit-content\" [class.--table-responsive]=\"responsive\">\r\n                    <div class=\"container-table-inner\">\r\n                        <ng-container *ngIf=\"!_groupField\">\r\n                            <tn-custom-scrollbar *ngIf=\"showScrollBar\" #scrollbar [config]=\"configScrollBar\"\r\n                                [showScrollHorizontal]=\"showScrollHorizontal\">\r\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldFalse\">\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"hasTemplate('afterCrudList')\">\r\n                                    <ng-container [ngTemplateOutlet]=\"hasTemplate('afterCrudList')\"></ng-container>\r\n                                </ng-container>\r\n                            </tn-custom-scrollbar>\r\n                            <div *ngIf=\"!showScrollBar\">\r\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldFalse\">\r\n                                </ng-container>\r\n                            </div>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"_groupField\">\r\n                            <tn-custom-scrollbar *ngIf=\"showScrollBar\" #scrollbar [config]=\"configScrollBar\"\r\n                                [showScrollHorizontal]=\"showScrollHorizontal\">\r\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldTrue\">\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"hasTemplate('afterCrudList')\">\r\n                                    <ng-container [ngTemplateOutlet]=\"getTemplate('afterCrudList')\"></ng-container>\r\n                                </ng-container>\r\n                            </tn-custom-scrollbar>\r\n                            <div *ngIf=\"!showScrollBar\">\r\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldTrue\">\r\n                                </ng-container>\r\n                            </div>\r\n                        </ng-container>\r\n\r\n                        <div class=\"table-border-line --top\"></div>\r\n                        <div class=\"table-border-line --right\"></div>\r\n                        <div class=\"table-border-line --bottom\"></div>\r\n                        <div class=\"table-border-line --left\"></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n<after-view-checked (loaded)=\"handleReady()\"></after-view-checked>\r\n<settings *ngIf=\"_showSettings && !setting.hiddenSetting\" [entityMetadataService]=\"entityMetadataService\"\r\n    [parentContext]=\"context\" [parentSetting]=\"setting\" [parentModel]=\"model\" (onSave)=\"onSaveSettings($event)\"\r\n    (onCancel)=\"_showSettings = false\">\r\n</settings>\r\n<settings-row *ngIf=\"_showSettingsRowColor && !setting.hiddenSetting\" [entityMetadataService]=\"entityMetadataService\"\r\n    [parentContext]=\"context\" [parentSetting]=\"setting\" [parentModel]=\"model\" (onSave)=\"onSaveColorSettings($event)\"\r\n    (onCancel)=\"_showSettingsRowColor = false\">\r\n</settings-row>\r\n<workflow-setting-dialog *ngIf=\"_showSettingsWorkflow && !setting.hiddenSettingWorkflow\" [parentSetting]=\"setting\"\r\n    [parentContext]=\"context\" [parentModel]=\"model\" (onSaved)=\"onSaveWorkflowSettings($event)\"\r\n    (onRemoved)=\"onRemoveWorkflowSettings($event)\" (onCancel)=\"_showSettingsWorkflow = false\"></workflow-setting-dialog>\r\n<entity-permission *ngIf=\"_showSettingsPermission && !setting.hiddenSettingPermission\" [parentSetting]=\"setting\"\r\n    [parentContext]=\"context\" [parentModel]=\"model\" [searchInfo]=\"searchInfo\"\r\n    (onCancel)=\"_showSettingsPermission = false\">\r\n</entity-permission>\r\n<p-contextMenu #contextMenu [appendTo]=\"'body'\" [model]=\"buttonContexts\">\r\n</p-contextMenu>\r\n<tn-dialog *ngIf=\"showFormWorkflow\" #dialog [header]=\"headerWorkflow | translate\" [popupSize]=\"popupSizeWorkflow\"\r\n    [scrollBarStyleClass]=\"'fit-content'\" (onHide)=\"showFormWorkflow = false\">\r\n    <div style=\"height: 100%\">\r\n        <simple-workflow-form #formBase [baseService]=\"setting.baseService\" [item]=\"currentItem\"\r\n            [action]=\"actionWorkflow\" (onInvalidWorkflow)=\"handleInvalidWF($event)\" (onSaved)=\"handleProcessedWorflow()\"\r\n            (onCancel)=\"showFormWorkflow = false\">\r\n        </simple-workflow-form>\r\n    </div>\r\n</tn-dialog>\r\n<tn-dialog *ngIf=\"processWorkflowModel.showEditForm\" #dialog [header]=\"processWorkflowModel.header | translate\"\r\n    [popupSize]=\"processWorkflowModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\r\n    (onHide)=\"processWorkflowModel.showEditForm = false\">\r\n    <div style=\"height: 100%\">\r\n        <process-workflow-form #formBase [bussinessSetting]=\"setting\" [item]=\"currentItem\"\r\n            [workflow]=\"processWorkflowModel.data.workflow\" [action]=\"processWorkflowModel.data.action\"\r\n            (onSaved)=\"handleProcessedWorkflowBase()\" (onCancel)=\"processWorkflowModel.showEditForm = false\">\r\n        </process-workflow-form>\r\n    </div>\r\n</tn-dialog>\r\n<tn-dialog *ngIf=\"workflowHistoryModel.showEditForm\" #dialog [header]=\"workflowHistoryModel.header | translate\"\r\n    [popupSize]=\"workflowHistoryModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\r\n    (onHide)=\"workflowHistoryModel.showEditForm = false\">\r\n    <div style=\"height: 100%\">\r\n        <workflow-history-new #formBase [baseService]=\"setting.baseService\" [item]=\"currentItem\"\r\n            [workflowSetting]=\"workflowHistoryModel.data.workflowSetting\"\r\n            (onCancel)=\"workflowHistoryModel.showEditForm = false\">\r\n        </workflow-history-new>\r\n    </div>\r\n</tn-dialog>\r\n<workflow-history-dialog *ngIf=\"showHistoryWorkflow\" [baseService]=\"setting.baseService\" [item]=\"currentItem\"\r\n    [workflowSetting]=\"setting.workflowSetting\" (onHide)=\"handleHideHistoryWorkflow()\">\r\n</workflow-history-dialog>\r\n<ng-template #tableGetGroupFieldFalse>\r\n    <p-table #table [dataKey]=\"'id'\" [scrollable]=\"pTableScrollable\" [scrollHeight]=\"pTableScrollHeight\"\r\n        [columns]=\"setting.cols\" [paginator]=\"false\" [value]=\"_dataSource\" (onSort)=\"onSort($event, table)\"\r\n        [class]=\"_tableClass\" [responsive]=\"responsive\" [lazy]=\"lazy\" [loading]=\"model.loading\"\r\n        [(selection)]=\"model.selectedItems\" (onRowReorder)=\"handleRowOrdered($event)\">\r\n        <ng-template *ngIf=\"header\" pTemplate=\"header\" let-columns>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"header, context: {$implicit: columns, crudList: this, rowHeaderFilter: rowHeaderFilter, contentTh: contentTh, containerSticky: containerSticky, funcCheckAll: handleCheckAll}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"!header\" pTemplate=\"header\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"trHeader; context: {$implicit: columns, funcCheckAll: handleCheckAll}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\" let-index=\"rowIndex\" let-expanded=\"expanded\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"trBody; context: {$implicit: rowData, columns: columns, index: index, expanded: expanded, eventSelectRow: handleSelectRow, eventChecked: handleCheckRowData}\">\r\n            </ng-container>\r\n            <after-view-checked *ngIf=\"index == _dataSource.length - 1\" style=\"display: none;\" [renderKey]=\"_dataSource\"\r\n                (loaded)=\"handleTableRendered()\">\r\n            </after-view-checked>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"rowExpansion\" pTemplate=\"rowexpansion\" let-rowData let-expanded=\"expanded\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"rowExpansion; context: {rowData: rowData, expanded: expanded, getColSpanGroup: getColSpanGroup}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"summary\" pTemplate=\"summary\">\r\n            <ng-container *ngTemplateOutlet=\"summary\"></ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"footer\" pTemplate=\"footer\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"footer; context: {$implicit: columns}\"></ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"colgroup\" pTemplate=\"colgroup\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"colgroup; context: {$implicit: columns}\"></ng-container>\r\n        </ng-template>\r\n    </p-table>\r\n</ng-template>\r\n<ng-template #tableGetGroupFieldTrue>\r\n    <p-table #tableGroup [scrollable]=\"pTableScrollable\" [scrollHeight]=\"pTableScrollHeight\" [columns]=\"setting.cols\"\r\n        [paginator]=\"false\" [value]=\"_dataSource\" [metaKeySelection]=\"false\" (onSort)=\"onSort($event, tableGroup)\"\r\n        [class]=\"_tableClass\" [customSort]=\"true\" [responsive]=\"responsive\" [lazy]=\"true\" [loading]=\"model.loading\"\r\n        [(selection)]=\"model.selectedItems\" [expandedRowKeys]=\"model.expandedRowKeys\" [dataKey]=\"_groupField\">\r\n        <ng-template *ngIf=\"header\" pTemplate=\"header\" let-columns>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"header, context: {$implicit: columns, crudList: this, rowHeaderFilter: rowHeaderFilter, contentTh: contentTh, containerSticky: containerSticky, funcCheckAll: handleCheckAll_Group}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"!header\" pTemplate=\"header\" let-columns>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"trHeader; context: {$implicit: columns, funcCheckAll: handleCheckAll_Group}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template pTemplate=\"body\" let-rowData let-rowIndex=\"rowIndex\" let-expanded=\"expanded\" let-columns=\"columns\">\r\n            <tr *ngIf=\"rowGroupMetadata[rowData[_groupField]] && rowGroupMetadata[rowData[_groupField]].index == rowIndex\"\r\n                class=\"p-widget-header group-row\" style=\"border: 0px; border-bottom: 1px solid #eee\">\r\n                <td *ngIf=\"!setting.hiddenCheckbox\" class=\"center chkbox\" [class.sticky]=\"setting.stickyColumn\">\r\n                    <p-checkbox [(ngModel)]=\"rowGroupChecked[rowData[_groupField]]\" binary=\"true\"\r\n                        (onChange)=\"handleCheckRowGroup(rowData)\">\r\n                    </p-checkbox>\r\n                    <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                </td>\r\n                <ng-container *ngIf=\"!rowGroup\">\r\n                    <td [colSpan]=\"getColSpanGroup()\" [class]=\"_classRowGroup\">\r\n                        <div class=\"container-row-group\">\r\n                            <a href=\"javascript:;\" [pRowToggler]=\"rowData\" class=\"container-row-group-toggle\"\r\n                                [class.sticky]=\"setting.stickyColumn\">\r\n                                <i style=\"margin-right:5px\"\r\n                                    [ngClass]=\"expanded ? 'fas fa-fw fa-caret-down' : 'fas fa-fw fa-caret-right'\"></i>\r\n                                <span class=\"content-row-group\">\r\n                                    <ng-container *ngIf=\"!contentRowGroup\">\r\n                                        <ng-container [ngTemplateOutlet]=\"_contentRowGroup\"\r\n                                            [ngTemplateOutletContext]=\"getContextRowGroup(rowData)\">\r\n                                        </ng-container>\r\n                                    </ng-container>\r\n                                    <ng-container *ngIf=\"contentRowGroup\">\r\n                                        <ng-container [ngTemplateOutlet]=\"contentRowGroup\"\r\n                                            [ngTemplateOutletContext]=\"getContextRowGroup(rowData)\">\r\n                                        </ng-container>\r\n                                    </ng-container>\r\n                                </span>\r\n                            </a>\r\n                        </div>\r\n                    </td>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"rowGroup\">\r\n                    <ng-container [ngTemplateOutlet]=\"rowGroup\"\r\n                        [ngTemplateOutletContext]=\"getContextRowGroupRoot(rowData, expanded)\">\r\n                    </ng-container>\r\n                </ng-container>\r\n            </tr>\r\n        </ng-template>\r\n        <ng-template pTemplate=\"rowexpansion\" let-columns=\"columns\" let-rowData let-index=\"rowIndex\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"trBody; context: {$implicit: rowData, columns: columns, index: index, expanded: false, eventSelectRow: handleSelectRowGroup, eventChecked: handleCheckRowData_Group}\">\r\n            </ng-container>\r\n            <after-view-checked *ngIf=\"index == _dataSource.length - 1\" style=\"display: none;\" [renderKey]=\"_dataSource\"\r\n                (loaded)=\"handleTableRendered()\">\r\n            </after-view-checked>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"summary\" pTemplate=\"summary\">\r\n            <ng-container *ngTemplateOutlet=\"summary\"></ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"footer\" pTemplate=\"footer\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"footer; context: {$implicit: columns}\"></ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"colgroup\" pTemplate=\"colgroup\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"colgroup; context: {$implicit: columns}\"></ng-container>\r\n        </ng-template>\r\n    </p-table>\r\n    <after-view-checked></after-view-checked>\r\n</ng-template>\r\n<ng-template #trHeader let-columns let-funcCheckAll=\"funcCheckAll\">\r\n    <tr class=\"title-row\">\r\n        <ng-container *ngIf=\"!setting.hiddenCheckbox\">\r\n            <th [style.width]=\"widthCheckbox\" class=\"chkbox link-or-action cell-checkbox\"\r\n                [class.sticky]=\"setting.stickyColumn\" style=\"z-index: 3 !important;\">\r\n                <button *ngIf=\"!hasTemplate('headerCheckbox')\" type=\"button\" pButton pRipple icon=\"pi pi-refresh\"\r\n                    class=\"p-button-rounded p-button-text btnReload\" pTooltip=\"L\u00E0m m\u1EDBi d\u1EEF li\u1EC7u\" tooltipPosition=\"top\"\r\n                    [disabled]=\"model.loading\" (click)=\"reload()\"></button>\r\n                <ng-container *ngIf=\"hasTemplate('headerCheckbox')\">\r\n                    <ng-container [ngTemplateOutletContext]=\"{crudList: this}\"\r\n                        [ngTemplateOutlet]=\"getTemplate('headerCheckbox')\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n            </th>\r\n        </ng-container>\r\n        <th *ngIf=\"!setting.hiddenOrderColumn\" [style.width]=\"widthOrderColumn\" class=\"stt nopad center\"\r\n            [class.sticky]=\"setting.stickyColumn\" [class.hidden-checkbox]=\"setting.hiddenCheckbox\" style=\"z-index: 3 !important;\">\r\n            {{ 'TT' |translate}}\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <th *ngIf=\"rowExpansion\" class=\"nopad row-expansion-toggle center\" style=\"width: 2.5rem\"\r\n            [class.sticky]=\"setting.stickyColumn\">\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <ng-container *ngFor=\"let col of columns; let i = index\">\r\n            <th *ngIf=\"col && col.visible && col.field!='function'\" [ngStyle]=\"col.extendData.headerStyle\"\r\n                [pTooltip]=\"col.fullLabel\" tooltipStyleClass=\"unset-width\" [class]=\"col.extendData.headerClass\"\r\n                [class.first-th]=\"i==0\" [escape]=\"false\" tooltipPosition=\"top\" [tnSortableColumn]=\"col.field\">\r\n                <ng-container *ngTemplateOutlet=\"contentTh; context: {$implicit: col}\"></ng-container>\r\n                <ng-container *ngIf=\"col.sort || col.sortClient\">\r\n                    <ng-container *ngTemplateOutlet=\"sortIcon; context: {field: col.field}\"></ng-container>\r\n                </ng-container>\r\n            </th>\r\n        </ng-container>\r\n        <th *ngIf=\"enableReorderRow\" style=\"width: 30px\">\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <ng-container *ngTemplateOutlet=\"colFunctionHeader\"></ng-container>\r\n    </tr>\r\n    <ng-container *ngTemplateOutlet=\"rowHeaderFilter; context: {columns: columns, funcCheckAll: funcCheckAll}\">\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #rowHeaderFilter let-columns=\"columns\" let-funcCheckAll=\"funcCheckAll\">\r\n    <tr class=\"filter-row\" *ngIf=\"!setting.hiddenFilterRow\">\r\n        <th *ngIf=\"!setting.hiddenCheckbox\" class=\"chkbox nopad center\" style=\"z-index: 3 !important;\"\r\n            [class.sticky]=\"setting.stickyColumn\" [class.tricheckbox-custom-false]=\"checkedAll === false\"\r\n            [style.width]=\"widthCheckbox\">\r\n            <p-triStateCheckbox [(ngModel)]=\"checkedAll\" binary=\"true\" (onChange)=\"funcCheckAll()\">\r\n            </p-triStateCheckbox>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <th *ngIf=\"!setting.hiddenOrderColumn\" class=\"stt center v-top\" style=\"z-index: 3 !important;\"\r\n            [class.sticky]=\"setting.stickyColumn\" [class.hidden-checkbox]=\"setting.hiddenCheckbox\">\r\n            <div *ngIf=\"!setting.hiddenSetting\" class=\"pick-color-row\" pTooltip=\"C\u1EA5u h\u00ECnh hi\u1EC3n th\u1ECB m\u00E0u\"\r\n                tooltipPosition=\"top\" (click)=\"showSettingRowColor()\">\r\n                <div></div>\r\n                <div></div>\r\n                <div></div>\r\n                <div></div>\r\n            </div>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <th *ngIf=\"rowExpansion\" class=\"nopad center row-expansion-toggle\" [class.sticky]=\"setting.stickyColumn\">\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <ng-container *ngFor=\"let col of columns; let i = index\">\r\n            <th *ngIf=\"col.visible && col.field != 'function'\" class=\"cell-header-filter center\">\r\n                <ng-container *ngIf=\"col.allowFilter\">\r\n                    <ng-container *ngIf=\"col.templateFilter\">\r\n                        <ng-container [ngTemplateOutlet]=\"col.templateFilter\"\r\n                            [ngTemplateOutletContext]=\"{col: col, filterData: filterData, onSearch: onSearch, onShowFilterDropdownPanel: onShowFilterDropdownPanel, onHideFilterDropdownPanel: onHideFilterDropdownPanel}\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"!col.templateFilter\" [ngSwitch]=\"col.controlType\">\r\n                        <ng-container *ngSwitchCase=\"'dropdown'\">\r\n                            <ng-container [ngTemplateOutlet]=\"filterDropdown\"\r\n                                [ngTemplateOutletContext]=\"{col: col.rawColumn}\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchCase=\"'number'\">\r\n                            <ng-container [ngTemplateOutlet]=\"filterNumber\" [ngTemplateOutletContext]=\"{col: col}\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchCase=\"'date'\">\r\n                            <ng-container [ngTemplateOutlet]=\"filterDate\" [ngTemplateOutletContext]=\"{col: col}\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchCase=\"'datetime'\">\r\n                            <ng-container [ngTemplateOutlet]=\"filterDate\" [ngTemplateOutletContext]=\"{col: col}\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchDefault>\r\n                            <ng-container [ngSwitch]=\"col.dataType\">\r\n                                <ng-container *ngSwitchCase=\"'int'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"filterNumber\"\r\n                                        [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"'decimal'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"filterNumber\"\r\n                                        [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"'date'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"filterDate\"\r\n                                        [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"'datetime'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"filterDate\"\r\n                                        [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"'boolean'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"filterBoolean\"\r\n                                        [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchDefault>\r\n                                    <ng-container [ngTemplateOutlet]=\"filterText\"\r\n                                        [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n            </th>\r\n        </ng-container>\r\n        <th *ngIf=\"enableReorderRow\" style=\"width: 30px\">\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <th *ngIf=\"!setting.hiddenFunctionColumn\" class=\"center setting-cell column-function\"\r\n            style=\"z-index: 3 !important;\" [class.sticky]=\"setting.stickyColumn\">\r\n            <button *ngIf=\"!setting.hiddenSetting\" type=\"button\" pButton pRipple icon=\"pi pi-cog\"\r\n                class=\"p-button-rounded p-button-text\" pTooltip=\"C\u1EA5u h\u00ECnh hi\u1EC3n th\u1ECB\" tooltipPosition=\"top\"\r\n                (click)=\"showSettings()\"></button>\r\n            <button *ngIf=\"!setting.hiddenSettingPermission\" type=\"button\" pButton pRipple icon=\"pi pi-users\"\r\n                class=\"p-button-rounded p-button-text\" pTooltip=\"Ph\u00E2n quy\u1EC1n d\u1EEF li\u1EC7u\" tooltipPosition=\"left\"\r\n                (click)=\"showSettingsPermission()\"></button>\r\n            <button *ngIf=\"!setting.hiddenSettingWorkflow\" type=\"button\" pButton pRipple icon=\"pi pi-sitemap\"\r\n                class=\"p-button-rounded p-button-text\" pTooltip=\"C\u1EA5u h\u00ECnh quy tr\u00ECnh\" tooltipPosition=\"left\"\r\n                (click)=\"showSettingsWorkflow()\"></button>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n    </tr>\r\n</ng-template>\r\n<ng-template #colFunctionHeader>\r\n    <ng-container *ngIf=\"!setting.hiddenFunctionColumn\">\r\n        <th class=\"column-function\" style=\"z-index: 3 !important;\" [class.sticky]=\"setting.stickyColumn\"\r\n            [style.width]=\"widthFunctionColumn || _widthFunctionColumn\">\r\n            <div class=\"cell-header-function\">\r\n                <span>{{'GRID.FUNCTION'| translate}}</span>\r\n            </div>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #contentTh let-col>\r\n    <ng-container *ngIf=\"templateHeaderContent[col.field]\">\r\n        <ng-container *ngTemplateOutlet=\"templateHeaderContent[col.field]\"></ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!templateHeaderContent[col.field]\">\r\n        {{col.label}}\r\n    </ng-container>\r\n    <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n</ng-template>\r\n<ng-template #trBody let-rowData let-columns=\"columns\" let-index=\"index\" let-expanded=\"expanded\"\r\n    let-eventSelectRow=\"eventSelectRow\" let-eventChecked=\"eventChecked\">\r\n    <tr class=\"table-row\" [tnReorderableRow]=\"index\" [attr.rowIndex]=\"index\"\r\n        [ngClass]=\"mergeClassObj(rowData, { 'ui-state-highlight': rowData._checked })\" [pTooltip]=\"rowData.tooltip\"\r\n        tooltipPosition=\"top\" [tooltipStyleClass]=\"rowData.tooltipClass\" [escape]=\"escape\"\r\n        (click)=\"eventSelectRow($event, rowData)\">\r\n        <ng-container *ngIf=\"!setting.hiddenCheckbox\">\r\n            <td [style.width]=\"widthCheckbox\" class=\"chkbox link-or-action cell-checkbox\"\r\n                [class.sticky]=\"setting.stickyColumn\">\r\n                <ng-container *ngIf=\"!hasTemplate('checkbox')\">\r\n                    <p-checkbox [(ngModel)]=\"rowData._checked\" binary=\"true\" (onChange)=\"eventChecked(rowData)\">\r\n                    </p-checkbox>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"hasTemplate('checkbox')\">\r\n                    <ng-container [ngTemplateOutlet]=\"getTemplate('checkbox')\"\r\n                        [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n            </td>\r\n        </ng-container>\r\n        <td *ngIf=\"!setting.hiddenOrderColumn && (!rowData.hidden || !rowData.hidden[fieldOrder])\"\r\n            [style.width]=\"widthOrderColumn\" class=\"stt\" style=\"text-align: center;\"\r\n            [class.sticky]=\"setting.stickyColumn\" [class.hidden-checkbox]=\"setting.hiddenCheckbox\" [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldOrder]\"\r\n            [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldOrder]\">\r\n            <span class=\"row-card\" [ngStyle]=\"getBookmarkColor(rowData, columns)\"></span>\r\n            {{rowData[fieldOrder]}}\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </td>\r\n        <td *ngIf=\"rowExpansion\" class=\"no-padding center row-expansion-toggle\" [class.sticky]=\"setting.stickyColumn\">\r\n            <ng-container *ngTemplateOutlet=\"iconToggleRowData; context: {rowData: rowData, expanded: expanded}\">\r\n            </ng-container>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </td>\r\n        <ng-container\r\n            *ngTemplateOutlet=\"dynamicColBodys; context: {$implicit: columns, rowData: rowData, index: index, expanded: expanded}\">\r\n        </ng-container>\r\n        <td *ngIf=\"enableReorderRow\" class=\"no-padding center\">\r\n            <i class=\"fas fa-arrows-alt\" style=\"cursor:pointer; padding: 8px; color: #555;\" pReorderableRowHandle></i>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </td>\r\n        <ng-container *ngIf=\"!setting.hiddenFunctionColumn\">\r\n            <td class=\"text-center column-function\" style=\"text-align: center;\" [class.sticky]=\"setting.stickyColumn\">\r\n                <div *ngIf=\"hasTemplate('function')\" class=\"p-toolbar-group-center button-group\">\r\n                    <ng-container [ngTemplateOutlet]=\"getTemplate('function')\"\r\n                        [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"></ng-container>\r\n                    <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                </div>\r\n                <div *ngIf=\"!hasTemplate('function')\" class=\"p-toolbar-group-center button-group\">\r\n                    <ng-container [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"\r\n                        [ngTemplateOutlet]=\"getTemplate('buttonBefore')\"></ng-container>\r\n                    <button *ngIf=\"setting.showVersionButton\" type=\"button\" pButton pRipple icon=\"fas fa-history\"\r\n                        class=\"p-button-rounded p-button-success link-or-action\" pTooltip=\"Xem l\u1ECBch s\u1EED phi\u00EAn b\u1EA3n\"\r\n                        tooltipPosition=\"top\" (click)=\"showListVersion(rowData)\"></button>\r\n                    <button *ngIf=\"!rowData.hiddenEdit\" type=\"button\" pButton pRipple [disabled]=\"disableEdit(rowData)\"\r\n                        pTooltip=\"{{'FORM.EDIT' | translate}}\" tooltipPosition=\"top\"\r\n                        class=\"p-button-rounded p-button-text p-button-info link-or-action\" icon=\"pi pi-pencil\"\r\n                        (click)=\"edit(rowData)\"></button>\r\n                    <button *ngIf=\"!rowData.hiddenDelete\" type=\"button\" pButton pRipple\r\n                        [disabled]=\"disableDelete(rowData)\" pTooltip=\"{{'FORM.DELETE' | translate}}\"\r\n                        tooltipPosition=\"top\" class=\"p-button-rounded p-button-text p-button-danger link-or-action\"\r\n                        icon=\"pi pi-trash\" (click)=\"delete(rowData)\"></button>\r\n                    <ng-container [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"\r\n                        [ngTemplateOutlet]=\"getTemplate('buttonAfter')\"></ng-container>\r\n                    <button *ngIf=\"setting.showMenuButtons && menuButtons\" type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\r\n                        class=\"link-or-action p-button-text p-button-rounded\" pTooltip=\"Ch\u1EE9c n\u0103ng kh\u00E1c\"\r\n                        tooltipPosition=\"top\" (click)=\"showContextMenu($event, rowData)\"></button>\r\n                </div>\r\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n            </td>\r\n        </ng-container>\r\n    </tr>\r\n</ng-template>\r\n<ng-template #dynamicColBodys let-columns let-rowData=\"rowData\" let-index=\"index\" let-expanded=\"expanded\">\r\n    <ng-container *ngFor=\"let col of columns; let i = index\">\r\n        <ng-container\r\n            *ngTemplateOutlet=\"contentTd; context: {$implicit: rowData, col: col, index: index, i: i, expanded: expanded}\">\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #contentTd let-rowData let-col=\"col\" let-index=\"index\" let-expanded=\"expanded\" let-i=\"i\">\r\n    <td *ngIf=\"col && col.visible && col.field != 'function' && (!rowData.hidden || !rowData.hidden[col.field])\"\r\n        [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[col.field]\"\r\n        [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[col.field]\" [ngStyle]=\"col.extendData.style\"\r\n        [class]=\"col.cellClass\" [class.first-td]=\"i == 0\">\r\n        <span *ngIf=\"col.pipe\">\r\n            <span class=\"p-column-title\" [pTooltip]=\"col.fullLabel\" [escape]=\"false\"\r\n                tooltipPosition=\"top\">{{col.label}}</span>\r\n            {{rowData['pipe__' + col.field]}}\r\n        </span>\r\n        <span *ngIf=\"!col.pipe\">\r\n            <span class=\"p-column-title\" [pTooltip]=\"col.fullLabel\" [escape]=\"false\"\r\n                tooltipPosition=\"top\">{{col.label}}</span>\r\n            <span *ngIf=\"setting.showEditLink && col.showEditLink\" [pTooltip]=\"config.tooltipView\" tooltipPosition=\"top\"\r\n                class=\"link-or-action\">\r\n                <a href=\"javascript:;\" (click)=\"view(rowData)\" [pTooltip]=\"config.tooltipView\" tooltipPosition=\"top\">\r\n                    <ng-container [ngTemplateOutlet]=\"contentCell\"\r\n                        [ngTemplateOutletContext]=\"getContextCell(rowData, index, col, expanded, this)\">\r\n                    </ng-container>\r\n                </a>\r\n            </span>\r\n            <span *ngIf=\"!setting.showEditLink || !col.showEditLink\">\r\n                <ng-container [ngTemplateOutlet]=\"contentCell\"\r\n                    [ngTemplateOutletContext]=\"getContextCell(rowData, index, col, expanded, this)\">\r\n                </ng-container>\r\n            </span>\r\n        </span>\r\n        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n    </td>\r\n</ng-template>\r\n<ng-template #contentCell let-col=\"col\" let-rowData=\"rowData\" let-rowIndex=\"rowIndex\" let-field=\"field\"\r\n    let-expanded=\"expanded\">\r\n    <ng-container *ngIf=\"col.template\">\r\n        <ng-container [ngTemplateOutlet]=\"col.template\"\r\n            [ngTemplateOutletContext]=\"getContextCell(rowData, rowIndex, col, expanded,this)\">\r\n        </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!col.template\">\r\n        <ng-container [ngSwitch]=\"col.dataType\">\r\n            <span *ngSwitchCase=\"'color'\" style=\"display:block;text-align:center;\">\r\n                <div pTooltip=\"{{rowData[field]}}\" tooltipPosition=\"top\" [ngStyle]=\"{'background-color':rowData[field]}\"\r\n                    style=\"width:30px;height:30px;margin:0 auto;\"></div>\r\n            </span>\r\n            <span *ngSwitchCase=\"'icon'\" style=\"display:block;text-align:center;\">\r\n                <i pTooltip=\"{{rowData[field]}}\" tooltipPosition=\"top\" style=\"text-align: center;\"\r\n                    [ngClass]=\"rowData[field]\"></i>\r\n            </span>\r\n            <span *ngSwitchCase=\"'date'\" pTooltip=\"{{rowData[field] | date:'dd/MM/yyyy'}}\" tooltipPosition=\"top\">\r\n                {{_crudService.renderDate(rowData[field], col.format)}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'datetime'\" pTooltip=\"{{rowData[field] | date:'dd/MM/yyyy HH:mm'}}\"\r\n                tooltipPosition=\"top\">\r\n                {{_crudService.renderDateTime(rowData[field], col.format)}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'user'\" class=\"user\">\r\n                {{rowData[field] | userFormat | async}}\r\n            </span>\r\n            <div *ngSwitchCase=\"'users'\" [innerHTML]=\"rowData[field] | usersFormat | async\">\r\n            </div>\r\n            <span *ngSwitchCase=\"'int'\">\r\n                {{rowData[field]}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'decimal'\">\r\n                {{rowData[field]}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'intWithoutMask'\">\r\n                {{rowData[field]}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'currency'\">\r\n                {{rowData[field] | currency:\"VND\"}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'boolean'\">\r\n                <ng-container *ngIf=\"!col.useTriStateCheckbox\">\r\n                    <p-checkbox class=\"boolean-data-type\" binary=\"true\" [pTooltip]=\"getTooltip(rowData._tooltip, field)\"\r\n                        tooltipPosition=\"top\" [disabled]=\"col.disableCheckBox\" [(ngModel)]=\"rowData[field]\">\r\n                    </p-checkbox>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"col.useTriStateCheckbox\">\r\n                    <p-triStateCheckbox class=\"boolean-data-type\" binary=\"true\"\r\n                        [pTooltip]=\"getTooltip(rowData._tooltip, field)\" tooltipPosition=\"top\"\r\n                        [disabled]=\"col.disableCheckBox\" [(ngModel)]=\"rowData[field]\">\r\n                    </p-triStateCheckbox>\r\n                </ng-container>\r\n            </span>\r\n            <span *ngSwitchCase=\"'html'\">\r\n                <div *ngIf=\"rowData[field]==null?'':rowData[field]\" [innerHTML]=\"rowData[field] | safeHtml\"></div>\r\n            </span>\r\n            <span *ngSwitchCase=\"'metadataStatus'\">\r\n                <span *ngIf=\"rowData['rejectReason']\" class=\"label-danger\" [pTooltip]=\"rowData['rejectReason']\"\r\n                    tooltipStyleClass=\"unset-width\" [escape]=\"false\" tooltipPosition=\"top\">T\u1EEB ch\u1ED1i</span>\r\n                <span *ngIf=\"rowData[field] == '0' && !rowData['rejectReason']\" class=\"label-secondary\">Ch\u01B0a\r\n                    duy\u1EC7t</span>\r\n                <span *ngIf=\"rowData[field] == '1' && !rowData['rejectReason']\" class=\"label-warning\">Ch\u1EDD duy\u1EC7t</span>\r\n                <span *ngIf=\"rowData[field] == '2'\" class=\"label-primary\">\u0110\u00E3 duy\u1EC7t</span>\r\n            </span>\r\n            <ng-container *ngSwitchCase=\"'string'\">\r\n                <ng-container *ngTemplateOutlet=\"contentCellString; context: {$implicit: rowData, field: col.field}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"null\">\r\n                <ng-container *ngTemplateOutlet=\"contentCellString; context: {$implicit: rowData, field: col.field}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchDefault>\r\n                <ng-container [ngTemplateOutlet]=\"getComponentByType(col.dataType)\"\r\n                    [ngTemplateOutletContext]=\"getContextCell(rowData, rowIndex, col, expanded, this)\">\r\n                </ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #contentCellString let-rowData let-field=\"field\">\r\n    <span>\r\n        <!-- __sv: Short Value -->\r\n        <ng-container *ngIf=\"rowData[field + '__sv']\">\r\n            <ng-container *ngIf=\"!rowData[field + '__showFull']\">\r\n                {{rowData[field + '__sv']}}\r\n                <span class=\"toggle-showfull\" (click)=\"toggleShowFull(rowData, field)\" pTooltip=\"B\u1EA5m \u0111\u1EC3 xem th\u00EAm\"\r\n                    tooltipPosition=\"top\">[...]</span>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"rowData[field + '__showFull']\">\r\n                {{rowData[field]}}\r\n                <span class=\"toggle-showfull\" (click)=\"toggleShowFull(rowData, field)\">Thu g\u1ECDn</span>\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!rowData[field + '__sv']\">\r\n            {{rowData[field]}}\r\n        </ng-container>\r\n    </span>\r\n</ng-template>\r\n<ng-template #iconToggleRowGroup let-rowData=\"rowData\" let-expanded=\"expanded\">\r\n    <a href=\"javascript:;\" (click)=\"handleToggleRow(rowData, $event)\">\r\n        <i style=\"margin-right:5px\" [ngClass]=\"expanded ? 'fas fa-fw fa-caret-down' : 'fas fa-fw fa-caret-right'\"></i>\r\n    </a>\r\n</ng-template>\r\n<ng-template #iconToggleRowData let-rowData=\"rowData\" let-expanded=\"expanded\">\r\n    <button type=\"button\" pButton pRipple class=\"link-or-action p-button-text p-button-rounded p-button-plain\"\r\n        [icon]=\"expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"\r\n        (click)=\"handleToggleRow(rowData, $event)\"></button>\r\n</ng-template>\r\n<ng-template #_contentRowGroup let-rowData=\"rowData\" let-groupCol=\"groupCol\" let-groupField=\"_groupField\">\r\n    <ng-container [ngTemplateOutlet]=\"contentCell\"\r\n        [ngTemplateOutletContext]=\"{rowData: rowData, col: groupCol, field: _groupField}\">\r\n    </ng-container>\r\n    <span> ({{rowGroupMetadata[rowData[_groupField]].size}})</span>\r\n</ng-template>\r\n<ng-template #entityWorkflowStatus let-rowData=\"rowData\">\r\n    <div class=\"container-text-workflow\">\r\n        <span class=\"content\">{{rowData.statusString ? rowData.statusString : rowData.strcurrentStateCode}}</span>\r\n        <button *ngIf=\"!rowData.hiddenWorkflowAction\" type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\r\n            class=\"link-or-action p-button-text p-button-rounded\" pTooltip=\"H\u00E0nh \u0111\u1ED9ng\" tooltipPosition=\"top\"\r\n            (click)=\"showActionWorkflow($event, rowData)\"></button>\r\n    </div>\r\n</ng-template>\r\n<ng-template #workflowCoreStatus let-rowData=\"rowData\">\r\n    <div class=\"container-text-workflow\">\r\n        <a class=\"content\" (click)=\"goToTask($event)\" href=\"javascript:;\">{{rowData.strworkflowCoreStatus}}</a>\r\n    </div>\r\n</ng-template>\r\n<ng-template #containerSticky>\r\n    <span class=\"fix-sticky top\"></span>\r\n    <span class=\"fix-sticky right\"></span>\r\n    <!-- <span class=\"fix-sticky bottom\"></span> -->\r\n    <span class=\"fix-sticky left\"></span>\r\n</ng-template>\r\n<ng-template #sortIcon let-field=\"field\">\r\n    <i class=\"p-sortable-column-icon pi\" style=\"font-size: 0.8em;\"\r\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>\r\n</ng-template>\r\n<ng-template #filterDropdown let-col=\"col\">\r\n    <div #filterBox style=\"width: 100%; border-radius: 4px;\">\r\n        <dropdown *ngIf=\"col && filterSchema.dropdown[col.field]\" [control]=\"filterSchema.dropdown[col.field]\"\r\n            [dataSource]=\"filterSchema.dropdown[col.field].dataSource\" [(value)]=\"filterData[col.field]\"\r\n            (onHideSmartEvent)=\"onSearch()\" (onShow)=\"onShowFilterDropdownPanel($event)\"\r\n            (onHide)=\"onHideFilterDropdownPanel($event)\" (mousedown)=\"initFilterBoxFocus(filterBox)\"></dropdown>\r\n    </div>\r\n</ng-template>\r\n<ng-template #filterText let-col=\"col\">\r\n    <div #filterBox class=\"text-filter filter-box\" tabindex=\"-1\" (mousedown)=\"initFilterBoxFocus(filterBox)\">\r\n        <div tabindex=\"-1\">\r\n            <input pInputText type=\"text\" class=\"input-search\" [placeholder]=\"col.label\"\r\n                [(ngModel)]=\"filterData[col.field]\" (change)=\"onSearch()\"\r\n                (keyup.esc)=\"onClearSearch(filterBox, col.field)\">\r\n        </div>\r\n        <span [ngClass]=\"{'action-clear': true, 'dirty': filterData[col.field] != null && filterData[col.field] !== ''}\"\r\n            [pTooltip]=\"'B\u1ECF filter'\" tooltipPosition=\"top\" (mousedown)=\"onClearSearch(filterBox, col.field)\"\r\n            tabindex=\"-1\"><i class=\"pi pi-filter-slash\"></i></span>\r\n        <after-view-checked style=\"display: none;\" (loaded)=\"initFilterBoxFocus(filterBox)\">\r\n        </after-view-checked>\r\n    </div>\r\n</ng-template>\r\n<ng-template #filterNumber let-col=\"col\">\r\n    <div #filterBox class=\"number-picker-range filter-box\" tabindex=\"-1\" (mousedown)=\"initFilterBoxFocus(filterBox)\">\r\n        <div tabindex=\"-1\">\r\n            <tn-number-picker-range #numberRange [maskType]=\"col.dataType\" [(ngModel)]=\"filterData[col.field]\"\r\n                [min]=\"col.min\" [max]=\"col.max\" (change)=\"onSearch()\">\r\n            </tn-number-picker-range>\r\n        </div>\r\n        <span\r\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] !== ''))}\"\r\n            [pTooltip]=\"'B\u1ECF filter'\" tooltipPosition=\"top\" (mousedown)=\"onClearNumberSearch(filterBox, numberRange)\"\r\n            tabindex=\"-1\">\r\n            <i class=\"pi pi-filter-slash\"></i></span>\r\n        <after-view-checked style=\"display: none;\" (loaded)=\"initFilterBoxFocus(filterBox)\">\r\n        </after-view-checked>\r\n    </div>\r\n</ng-template>\r\n<ng-template #filterDate let-col=\"col\">\r\n    <div #filterBox class=\"date-picker-range filter-box\" tabindex=\"-1\" (mousedown)=\"initFilterBoxFocus(filterBox)\">\r\n        <div tabindex=\"-1\">\r\n            <tn-datetime-picker-range #dateRange [control]=\"filterSchema.dateRange\"\r\n                (onChanged)=\"onChangeDateTime($event, col.field)\">\r\n            </tn-datetime-picker-range>\r\n        </div>\r\n        <span\r\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] !== ''))}\"\r\n            [pTooltip]=\"'B\u1ECF filter'\" tooltipPosition=\"top\"\r\n            (mousedown)=\"onClearDateSearch(filterBox, dateRange, col.field)\" tabindex=\"-1\"><i\r\n                class=\"pi pi-filter-slash\"></i></span>\r\n        <after-view-checked style=\"display: none;\" (loaded)=\"initFilterBoxFocus(filterBox)\">\r\n        </after-view-checked>\r\n    </div>\r\n</ng-template>\r\n<ng-template #filterBoolean let-col=\"col\">\r\n    <div class=\"filter-boolean-box\">\r\n        <p-selectButton\r\n            [options]=\"[{value: true, label: 'C\u00F3', icon: 'pi pi-check'}, {value: false, label: 'Kh\u00F4ng', icon: 'pi pi-times'}]\"\r\n            [multiple]=\"true\" [(ngModel)]=\"filterData[col.field]\" (onChange)=\"onChangeBoolean($event, col.field)\">\r\n            <ng-template let-item>\r\n                <i style=\"padding: 3px 0;\" [class]=\"item.icon\"></i>\r\n            </ng-template>\r\n        </p-selectButton>\r\n    </div>\r\n</ng-template>",
+                    template: "<div #container class=\"custom-card card card-w-title flex-container-fit-child\" [attr.height-type]=\"setting.heightType\"\r\n    [ngStyle]=\"_style\">\r\n    <div class=\"ui-helper-clearfix crud-list-header-area\">\r\n        <div *ngIf=\"searchCustom\" class=\"p-grid ui-fluid custom-p-col custom-search-area\">\r\n            <div class=\"p-col-12 main-container-search\">\r\n                <div class=\"p-grid main-container-search-inner\">\r\n                    <ng-container>\r\n                        <ng-container *ngTemplateOutlet=\"searchCustom; context: {$implicit: this}\"></ng-container>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"!setting.hiddenHeader\" class=\"p-grid ui-fluid custom-p-col page-title-area\">\r\n            <div *ngIf=\"!setting.hiddenPageTitle\" class=\"main-title\">\r\n                <h1 *ngIf=\"!hasTemplate('customTitle')\">\r\n                    {{setting.title != null ? setting.title : 'Danh s\u00E1ch ' + setting.objectName}}\r\n                </h1>\r\n\r\n                <ng-container *ngIf=\"hasTemplate('customTitle')\" [ngTemplateOutlet]=\"getTemplate('customTitle')\"\r\n                    [ngTemplateOutletContext]=\"{crudList: this}\">\r\n                </ng-container>\r\n            </div>\r\n\r\n            <div *ngIf=\"!setting.hiddenPageSetting\" class=\"paginator-table\">\r\n                <paging-next-back-only [model]=\"model\" [setting]=\"setting\" (onOldest)=\"onOldest($event)\"\r\n                    (onNext)=\"onNext($event)\" (onPrev)=\"onPrev($event)\" (onLatest)=\"onLatest($event)\"\r\n                    (onChangeLimitPage)=\"savePageSize()\">\r\n                </paging-next-back-only>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"fit-content crud-list-body-area\">\r\n        <div class=\"crud-list-body-area-inner\" style=\"overflow: unset;\">\r\n            <div class=\"flex-container-fit-child\" style=\"overflow: unset;\">\r\n                <div *ngIf=\"!setting.hiddenToolbar\" class=\"p-grid crudListToolbar\">\r\n                    <ng-container>\r\n                        <div *ngIf=\"!setting.hiddenButtons && hasTemplate('toolbar')\"\r\n                            [ngClass]=\"setting.hiddenAdvanceSearch ? 'p-md-12 p-lg-12' : 'p-md-7 p-lg-8'\"\r\n                            class=\"p-col-12 button-group function-topbar custom-toolbar\">\r\n                            <ng-container\r\n                                [ngTemplateOutletContext]=\"{selectedItems: model.selectedItems, crudList: this}\"\r\n                                [ngTemplateOutlet]=\"getTemplate('toolbar')\"></ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"!setting.hiddenButtons && !hasTemplate('toolbar')\"\r\n                            [ngClass]=\"setting.hiddenAdvanceSearch ? 'p-md-12 p-lg-12' : 'p-md-7 p-lg-8'\"\r\n                            class=\"p-col-12 button-group function-topbar\">\r\n                            <button *ngIf=\"!hiddenAdd\" type=\"button\" pButton pRipple label=\"Th\u00EAm m\u1EDBi\" icon=\"pi pi-plus\"\r\n                                class=\"p-button-text\" (click)=\"add()\"></button>\r\n                            <button *ngIf=\"model.selectedItems.length > 0\" type=\"button\" pButton pRipple\r\n                                label=\"Xu\u1EA5t c\u00E1c m\u1EE5c \u0111\u00E3 ch\u1ECDn ({{model.selectedItems.length}})\" icon=\"fas fa-file-excel\"\r\n                                class=\"p-button-text p-button-success\" (click)=\"xuatCacMucDaChon()\"></button>\r\n                            <button *ngIf=\"!hiddenDelete && model.selectedItems.length > 0 && !disableMultipleDelete()\"\r\n                                type=\"button\" pButton pRipple\r\n                                label=\"{{ 'X\u00F3a' | translate }} ({{model.selectedItems.length}})\" icon=\"pi pi-trash\"\r\n                                class=\"p-button-text p-button-danger\" (click)=\"deleteMutiple()\"></button>\r\n                            <ng-container [ngTemplateOutlet]=\"getTemplate('buttonAfterToolbar')\"\r\n                                [ngTemplateOutletContext]=\"{crudList: this}\"></ng-container>\r\n                        </div>\r\n                    </ng-container>\r\n                    <div *ngIf=\"!setting.hiddenAdvanceSearch\" class=\"p-col-12 advance-search-container\"\r\n                        [ngClass]=\"setting.hiddenButtons ? 'p-md-12 p-lg-12' : 'p-md-5 p-lg-4'\">\r\n                        <advance-search #advanceSearch [parentSetting]=\"setting\" [searchInfo]=\"searchInfo\"\r\n                            [loading]=\"model.loading\" (onSearch)=\"handleSearchAdvs($event)\"\r\n                            (onInit)=\"handleInitAdvanceSearch($event)\">\r\n                        </advance-search>\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"hasTemplate('topGrid')\" class=\"extend-content-top-grid\">\r\n                    <ng-container [ngTemplateOutletContext]=\"{selectedItems: model.selectedItems, crudList: this}\"\r\n                        [ngTemplateOutlet]=\"getTemplate('topGrid')\"></ng-container>\r\n                </div>\r\n                <div class=\"container-table fit-content\" [class.--table-responsive]=\"responsive\">\r\n                    <div class=\"container-table-inner\">\r\n                        <ng-container *ngIf=\"!_groupField\">\r\n                            <tn-custom-scrollbar *ngIf=\"showScrollBar\" #scrollbar [config]=\"configScrollBar\"\r\n                                [showScrollHorizontal]=\"showScrollHorizontal\">\r\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldFalse\">\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"hasTemplate('afterCrudList')\">\r\n                                    <ng-container [ngTemplateOutlet]=\"hasTemplate('afterCrudList')\"></ng-container>\r\n                                </ng-container>\r\n                            </tn-custom-scrollbar>\r\n                            <div *ngIf=\"!showScrollBar\">\r\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldFalse\">\r\n                                </ng-container>\r\n                            </div>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"_groupField\">\r\n                            <tn-custom-scrollbar *ngIf=\"showScrollBar\" #scrollbar [config]=\"configScrollBar\"\r\n                                [showScrollHorizontal]=\"showScrollHorizontal\">\r\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldTrue\">\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"hasTemplate('afterCrudList')\">\r\n                                    <ng-container [ngTemplateOutlet]=\"getTemplate('afterCrudList')\"></ng-container>\r\n                                </ng-container>\r\n                            </tn-custom-scrollbar>\r\n                            <div *ngIf=\"!showScrollBar\">\r\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldTrue\">\r\n                                </ng-container>\r\n                            </div>\r\n                        </ng-container>\r\n\r\n                        <div class=\"table-border-line --top\"></div>\r\n                        <div class=\"table-border-line --right\"></div>\r\n                        <div class=\"table-border-line --bottom\"></div>\r\n                        <div class=\"table-border-line --left\"></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n<after-view-checked (loaded)=\"handleReady()\"></after-view-checked>\r\n<settings *ngIf=\"_showSettings && !setting.hiddenSetting\" [entityMetadataService]=\"entityMetadataService\"\r\n    [parentContext]=\"context\" [parentSetting]=\"setting\" [parentModel]=\"model\" (onSave)=\"onSaveSettings($event)\"\r\n    (onCancel)=\"_showSettings = false\">\r\n</settings>\r\n<settings-row *ngIf=\"_showSettingsRowColor && !setting.hiddenSetting\" [entityMetadataService]=\"entityMetadataService\"\r\n    [parentContext]=\"context\" [parentSetting]=\"setting\" [parentModel]=\"model\" (onSave)=\"onSaveColorSettings($event)\"\r\n    (onCancel)=\"_showSettingsRowColor = false\">\r\n</settings-row>\r\n<workflow-setting-dialog *ngIf=\"_showSettingsWorkflow && !setting.hiddenSettingWorkflow\" [parentSetting]=\"setting\"\r\n    [parentContext]=\"context\" [parentModel]=\"model\" (onSaved)=\"onSaveWorkflowSettings($event)\"\r\n    (onRemoved)=\"onRemoveWorkflowSettings($event)\" (onCancel)=\"_showSettingsWorkflow = false\"></workflow-setting-dialog>\r\n<entity-permission *ngIf=\"_showSettingsPermission && !setting.hiddenSettingPermission\" [parentSetting]=\"setting\"\r\n    [parentContext]=\"context\" [parentModel]=\"model\" [searchInfo]=\"searchInfo\"\r\n    (onCancel)=\"_showSettingsPermission = false\">\r\n</entity-permission>\r\n<p-contextMenu #contextMenu [appendTo]=\"'body'\" [model]=\"buttonContexts\">\r\n</p-contextMenu>\r\n<tn-dialog *ngIf=\"showFormWorkflow\" #dialog [header]=\"headerWorkflow | translate\" [popupSize]=\"popupSizeWorkflow\"\r\n    [scrollBarStyleClass]=\"'fit-content'\" (onHide)=\"showFormWorkflow = false\">\r\n    <div style=\"height: 100%\">\r\n        <simple-workflow-form #formBase [baseService]=\"setting.baseService\" [item]=\"currentItem\"\r\n            [action]=\"actionWorkflow\" (onInvalidWorkflow)=\"handleInvalidWF($event)\" (onSaved)=\"handleProcessedWorflow()\"\r\n            (onCancel)=\"showFormWorkflow = false\">\r\n        </simple-workflow-form>\r\n    </div>\r\n</tn-dialog>\r\n<tn-dialog *ngIf=\"processWorkflowModel.showEditForm\" #dialog [header]=\"processWorkflowModel.header | translate\"\r\n    [popupSize]=\"processWorkflowModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\r\n    (onHide)=\"processWorkflowModel.showEditForm = false\">\r\n    <div style=\"height: 100%\">\r\n        <process-workflow-form #formBase [bussinessSetting]=\"setting\" [item]=\"currentItem\"\r\n            [workflow]=\"processWorkflowModel.data.workflow\" [action]=\"processWorkflowModel.data.action\"\r\n            (onSaved)=\"handleProcessedWorkflowBase()\" (onCancel)=\"processWorkflowModel.showEditForm = false\">\r\n        </process-workflow-form>\r\n    </div>\r\n</tn-dialog>\r\n<tn-dialog *ngIf=\"workflowHistoryModel.showEditForm\" #dialog [header]=\"workflowHistoryModel.header | translate\"\r\n    [popupSize]=\"workflowHistoryModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\r\n    (onHide)=\"workflowHistoryModel.showEditForm = false\">\r\n    <div style=\"height: 100%\">\r\n        <workflow-history-new #formBase [baseService]=\"setting.baseService\" [item]=\"currentItem\"\r\n            [workflowSetting]=\"workflowHistoryModel.data.workflowSetting\"\r\n            (onCancel)=\"workflowHistoryModel.showEditForm = false\">\r\n        </workflow-history-new>\r\n    </div>\r\n</tn-dialog>\r\n<workflow-history-dialog *ngIf=\"showHistoryWorkflow\" [baseService]=\"setting.baseService\" [item]=\"currentItem\"\r\n    [workflowSetting]=\"setting.workflowSetting\" (onHide)=\"handleHideHistoryWorkflow()\">\r\n</workflow-history-dialog>\r\n<ng-template #tableGetGroupFieldFalse>\r\n    <p-table #table [dataKey]=\"'id'\" [scrollable]=\"pTableScrollable\" [scrollHeight]=\"pTableScrollHeight\"\r\n        [columns]=\"setting.cols\" [paginator]=\"false\" [value]=\"_dataSource\" (onSort)=\"onSort($event, table)\"\r\n        [class]=\"_tableClass\" [responsive]=\"responsive\" [lazy]=\"lazy\" [loading]=\"model.loading\"\r\n        [(selection)]=\"model.selectedItems\" (onRowReorder)=\"handleRowOrdered($event)\">\r\n        <ng-template *ngIf=\"header\" pTemplate=\"header\" let-columns>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"header, context: {$implicit: columns, crudList: this, rowHeaderFilter: rowHeaderFilter, contentTh: contentTh, containerSticky: containerSticky, funcCheckAll: handleCheckAll}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"!header\" pTemplate=\"header\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"trHeader; context: {$implicit: columns, funcCheckAll: handleCheckAll}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\" let-index=\"rowIndex\" let-expanded=\"expanded\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"trBody; context: {$implicit: rowData, columns: columns, index: index, expanded: expanded, eventSelectRow: handleSelectRow, eventChecked: handleCheckRowData}\">\r\n            </ng-container>\r\n            <after-view-checked *ngIf=\"index == _dataSource.length - 1\" style=\"display: none;\" [renderKey]=\"_dataSource\"\r\n                (loaded)=\"handleTableRendered()\">\r\n            </after-view-checked>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"rowExpansion\" pTemplate=\"rowexpansion\" let-rowData let-expanded=\"expanded\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"rowExpansion; context: {rowData: rowData, expanded: expanded, getColSpanGroup: getColSpanGroup}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"summary\" pTemplate=\"summary\">\r\n            <ng-container *ngTemplateOutlet=\"summary\"></ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"footer\" pTemplate=\"footer\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"footer; context: {$implicit: columns}\"></ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"colgroup\" pTemplate=\"colgroup\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"colgroup; context: {$implicit: columns}\"></ng-container>\r\n        </ng-template>\r\n    </p-table>\r\n</ng-template>\r\n<ng-template #tableGetGroupFieldTrue>\r\n    <p-table #tableGroup [scrollable]=\"pTableScrollable\" [scrollHeight]=\"pTableScrollHeight\" [columns]=\"setting.cols\"\r\n        [paginator]=\"false\" [value]=\"_dataSource\" [metaKeySelection]=\"false\" (onSort)=\"onSort($event, tableGroup)\"\r\n        [class]=\"_tableClass\" [customSort]=\"true\" [responsive]=\"responsive\" [lazy]=\"true\" [loading]=\"model.loading\"\r\n        [(selection)]=\"model.selectedItems\" [expandedRowKeys]=\"model.expandedRowKeys\" [dataKey]=\"_groupField\">\r\n        <ng-template *ngIf=\"header\" pTemplate=\"header\" let-columns>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"header, context: {$implicit: columns, crudList: this, rowHeaderFilter: rowHeaderFilter, contentTh: contentTh, containerSticky: containerSticky, funcCheckAll: handleCheckAll_Group}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"!header\" pTemplate=\"header\" let-columns>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"trHeader; context: {$implicit: columns, funcCheckAll: handleCheckAll_Group}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template pTemplate=\"body\" let-rowData let-rowIndex=\"rowIndex\" let-expanded=\"expanded\" let-columns=\"columns\">\r\n            <tr *ngIf=\"rowGroupMetadata[rowData[_groupField]] && rowGroupMetadata[rowData[_groupField]].index == rowIndex\"\r\n                class=\"p-widget-header group-row\" style=\"border: 0px; border-bottom: 1px solid #eee\">\r\n                <td *ngIf=\"!setting.hiddenCheckbox\" class=\"center chkbox\" [class.sticky]=\"setting.stickyColumn\">\r\n                    <p-checkbox [(ngModel)]=\"rowGroupChecked[rowData[_groupField]]\" binary=\"true\"\r\n                        (onChange)=\"handleCheckRowGroup(rowData)\">\r\n                    </p-checkbox>\r\n                    <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                </td>\r\n                <ng-container *ngIf=\"!rowGroup\">\r\n                    <td [colSpan]=\"getColSpanGroup()\" [class]=\"_classRowGroup\">\r\n                        <div class=\"container-row-group\">\r\n                            <a href=\"javascript:;\" [pRowToggler]=\"rowData\" class=\"container-row-group-toggle\"\r\n                                [class.sticky]=\"setting.stickyColumn\">\r\n                                <i style=\"margin-right:5px\"\r\n                                    [ngClass]=\"expanded ? 'fas fa-fw fa-caret-down' : 'fas fa-fw fa-caret-right'\"></i>\r\n                                <span class=\"content-row-group\">\r\n                                    <ng-container *ngIf=\"!contentRowGroup\">\r\n                                        <ng-container [ngTemplateOutlet]=\"_contentRowGroup\"\r\n                                            [ngTemplateOutletContext]=\"getContextRowGroup(rowData)\">\r\n                                        </ng-container>\r\n                                    </ng-container>\r\n                                    <ng-container *ngIf=\"contentRowGroup\">\r\n                                        <ng-container [ngTemplateOutlet]=\"contentRowGroup\"\r\n                                            [ngTemplateOutletContext]=\"getContextRowGroup(rowData)\">\r\n                                        </ng-container>\r\n                                    </ng-container>\r\n                                </span>\r\n                            </a>\r\n                        </div>\r\n                    </td>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"rowGroup\">\r\n                    <ng-container [ngTemplateOutlet]=\"rowGroup\"\r\n                        [ngTemplateOutletContext]=\"getContextRowGroupRoot(rowData, expanded)\">\r\n                    </ng-container>\r\n                </ng-container>\r\n            </tr>\r\n        </ng-template>\r\n        <ng-template pTemplate=\"rowexpansion\" let-columns=\"columns\" let-rowData let-index=\"rowIndex\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"trBody; context: {$implicit: rowData, columns: columns, index: index, expanded: false, eventSelectRow: handleSelectRowGroup, eventChecked: handleCheckRowData_Group}\">\r\n            </ng-container>\r\n            <after-view-checked *ngIf=\"index == _dataSource.length - 1\" style=\"display: none;\" [renderKey]=\"_dataSource\"\r\n                (loaded)=\"handleTableRendered()\">\r\n            </after-view-checked>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"summary\" pTemplate=\"summary\">\r\n            <ng-container *ngTemplateOutlet=\"summary\"></ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"footer\" pTemplate=\"footer\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"footer; context: {$implicit: columns}\"></ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"colgroup\" pTemplate=\"colgroup\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"colgroup; context: {$implicit: columns}\"></ng-container>\r\n        </ng-template>\r\n    </p-table>\r\n    <after-view-checked></after-view-checked>\r\n</ng-template>\r\n<ng-template #trHeader let-columns let-funcCheckAll=\"funcCheckAll\">\r\n    <tr class=\"title-row\">\r\n        <ng-container *ngIf=\"!setting.hiddenCheckbox\">\r\n            <th [style.width]=\"widthCheckbox\" class=\"chkbox link-or-action cell-checkbox\"\r\n                [class.sticky]=\"setting.stickyColumn\" style=\"z-index: 3 !important;\">\r\n                <button *ngIf=\"!hasTemplate('headerCheckbox')\" type=\"button\" pButton pRipple icon=\"pi pi-refresh\"\r\n                    class=\"p-button-rounded p-button-text btnReload\" pTooltip=\"L\u00E0m m\u1EDBi d\u1EEF li\u1EC7u\" tooltipPosition=\"top\"\r\n                    [disabled]=\"model.loading\" (click)=\"reload()\"></button>\r\n                <ng-container *ngIf=\"hasTemplate('headerCheckbox')\">\r\n                    <ng-container [ngTemplateOutletContext]=\"{crudList: this}\"\r\n                        [ngTemplateOutlet]=\"getTemplate('headerCheckbox')\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n            </th>\r\n        </ng-container>\r\n        <th *ngIf=\"!setting.hiddenOrderColumn\" [style.width]=\"widthOrderColumn\" class=\"stt nopad center\"\r\n            [class.sticky]=\"setting.stickyColumn\" [class.hidden-checkbox]=\"setting.hiddenCheckbox\" style=\"z-index: 3 !important;\">\r\n            {{ 'TT' |translate}}\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <th *ngIf=\"rowExpansion\" class=\"nopad row-expansion-toggle center\" style=\"width: 2.5rem\"\r\n            [class.sticky]=\"setting.stickyColumn\">\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <ng-container *ngFor=\"let col of columns; let i = index\">\r\n            <th *ngIf=\"col && col.visible && col.field!='function'\" [ngStyle]=\"col.extendData.headerStyle\"\r\n                [pTooltip]=\"col.fullLabel\" tooltipStyleClass=\"unset-width\" [class]=\"col.extendData.headerClass\"\r\n                [class.first-th]=\"i==0\" [escape]=\"false\" tooltipPosition=\"top\" [tnSortableColumn]=\"col.field\">\r\n                <ng-container *ngTemplateOutlet=\"contentTh; context: {$implicit: col}\"></ng-container>\r\n                <ng-container *ngIf=\"col.sort || col.sortClient\">\r\n                    <ng-container *ngTemplateOutlet=\"sortIcon; context: {field: col.field}\"></ng-container>\r\n                </ng-container>\r\n            </th>\r\n        </ng-container>\r\n        <th *ngIf=\"enableReorderRow\" style=\"width: 30px\">\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <ng-container *ngTemplateOutlet=\"colFunctionHeader\"></ng-container>\r\n    </tr>\r\n    <ng-container *ngTemplateOutlet=\"rowHeaderFilter; context: {columns: columns, funcCheckAll: funcCheckAll}\">\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #rowHeaderFilter let-columns=\"columns\" let-funcCheckAll=\"funcCheckAll\">\r\n    <tr class=\"filter-row\" *ngIf=\"!setting.hiddenFilterRow\">\r\n        <th *ngIf=\"!setting.hiddenCheckbox\" class=\"chkbox nopad center\" style=\"z-index: 3 !important;\"\r\n            [class.sticky]=\"setting.stickyColumn\" [class.tricheckbox-custom-false]=\"checkedAll === false\"\r\n            [style.width]=\"widthCheckbox\">\r\n            <p-triStateCheckbox [(ngModel)]=\"checkedAll\" binary=\"true\" (onChange)=\"funcCheckAll()\">\r\n            </p-triStateCheckbox>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <th *ngIf=\"!setting.hiddenOrderColumn\" class=\"stt center v-top\" style=\"z-index: 3 !important;\"\r\n            [class.sticky]=\"setting.stickyColumn\" [class.hidden-checkbox]=\"setting.hiddenCheckbox\">\r\n            <div *ngIf=\"!setting.hiddenSetting\" class=\"pick-color-row\" pTooltip=\"C\u1EA5u h\u00ECnh hi\u1EC3n th\u1ECB m\u00E0u\"\r\n                tooltipPosition=\"top\" (click)=\"showSettingRowColor()\">\r\n                <div></div>\r\n                <div></div>\r\n                <div></div>\r\n                <div></div>\r\n            </div>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <th *ngIf=\"rowExpansion\" class=\"nopad center row-expansion-toggle\" [class.sticky]=\"setting.stickyColumn\">\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <ng-container *ngFor=\"let col of columns; let i = index\">\r\n            <th *ngIf=\"col.visible && col.field != 'function'\" class=\"cell-header-filter center\">\r\n                <ng-container *ngIf=\"col.allowFilter\">\r\n                    <ng-container *ngIf=\"col.templateFilter\">\r\n                        <ng-container [ngTemplateOutlet]=\"col.templateFilter\"\r\n                            [ngTemplateOutletContext]=\"{col: col, filterData: filterData, onSearch: onSearch, onShowFilterDropdownPanel: onShowFilterDropdownPanel, onHideFilterDropdownPanel: onHideFilterDropdownPanel}\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"!col.templateFilter\" [ngSwitch]=\"col.controlType\">\r\n                        <ng-container *ngSwitchCase=\"'dropdown'\">\r\n                            <ng-container [ngTemplateOutlet]=\"filterDropdown\"\r\n                                [ngTemplateOutletContext]=\"{col: col.rawColumn}\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchCase=\"'number'\">\r\n                            <ng-container [ngTemplateOutlet]=\"filterNumber\" [ngTemplateOutletContext]=\"{col: col}\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchCase=\"'date'\">\r\n                            <ng-container [ngTemplateOutlet]=\"filterDate\" [ngTemplateOutletContext]=\"{col: col}\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchCase=\"'datetime'\">\r\n                            <ng-container [ngTemplateOutlet]=\"filterDate\" [ngTemplateOutletContext]=\"{col: col}\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchDefault>\r\n                            <ng-container [ngSwitch]=\"col.dataType\">\r\n                                <ng-container *ngSwitchCase=\"'int'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"filterNumber\"\r\n                                        [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"'decimal'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"filterNumber\"\r\n                                        [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"'date'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"filterDate\"\r\n                                        [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"'datetime'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"filterDate\"\r\n                                        [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"'boolean'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"filterBoolean\"\r\n                                        [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"'fileUpload'\">\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchDefault>\r\n                                    <ng-container [ngTemplateOutlet]=\"filterText\"\r\n                                        [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n            </th>\r\n        </ng-container>\r\n        <th *ngIf=\"enableReorderRow\" style=\"width: 30px\">\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <th *ngIf=\"!setting.hiddenFunctionColumn\" class=\"center setting-cell column-function\"\r\n            style=\"z-index: 3 !important;\" [class.sticky]=\"setting.stickyColumn\">\r\n            <button *ngIf=\"!setting.hiddenSetting\" type=\"button\" pButton pRipple icon=\"pi pi-cog\"\r\n                class=\"p-button-rounded p-button-text\" pTooltip=\"C\u1EA5u h\u00ECnh hi\u1EC3n th\u1ECB\" tooltipPosition=\"top\"\r\n                (click)=\"showSettings()\"></button>\r\n            <button *ngIf=\"!setting.hiddenSettingPermission\" type=\"button\" pButton pRipple icon=\"pi pi-users\"\r\n                class=\"p-button-rounded p-button-text\" pTooltip=\"Ph\u00E2n quy\u1EC1n d\u1EEF li\u1EC7u\" tooltipPosition=\"left\"\r\n                (click)=\"showSettingsPermission()\"></button>\r\n            <button *ngIf=\"!setting.hiddenSettingWorkflow\" type=\"button\" pButton pRipple icon=\"pi pi-sitemap\"\r\n                class=\"p-button-rounded p-button-text\" pTooltip=\"C\u1EA5u h\u00ECnh quy tr\u00ECnh\" tooltipPosition=\"left\"\r\n                (click)=\"showSettingsWorkflow()\"></button>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n    </tr>\r\n</ng-template>\r\n<ng-template #colFunctionHeader>\r\n    <ng-container *ngIf=\"!setting.hiddenFunctionColumn\">\r\n        <th class=\"column-function\" style=\"z-index: 3 !important;\" [class.sticky]=\"setting.stickyColumn\"\r\n            [style.width]=\"widthFunctionColumn || _widthFunctionColumn\">\r\n            <div class=\"cell-header-function\">\r\n                <span>{{'GRID.FUNCTION'| translate}}</span>\r\n            </div>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #contentTh let-col>\r\n    <ng-container *ngIf=\"templateHeaderContent[col.field]\">\r\n        <ng-container *ngTemplateOutlet=\"templateHeaderContent[col.field]\"></ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!templateHeaderContent[col.field]\">\r\n        {{col.label}}\r\n    </ng-container>\r\n    <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n</ng-template>\r\n<ng-template #trBody let-rowData let-columns=\"columns\" let-index=\"index\" let-expanded=\"expanded\"\r\n    let-eventSelectRow=\"eventSelectRow\" let-eventChecked=\"eventChecked\">\r\n    <tr class=\"table-row\" [tnReorderableRow]=\"index\" [attr.rowIndex]=\"index\"\r\n        [ngClass]=\"mergeClassObj(rowData, { 'ui-state-highlight': rowData._checked })\" [pTooltip]=\"rowData.tooltip\"\r\n        tooltipPosition=\"top\" [tooltipStyleClass]=\"rowData.tooltipClass\" [escape]=\"escape\"\r\n        (click)=\"eventSelectRow($event, rowData)\">\r\n        <ng-container *ngIf=\"!setting.hiddenCheckbox\">\r\n            <td [style.width]=\"widthCheckbox\" class=\"chkbox link-or-action cell-checkbox\"\r\n                [class.sticky]=\"setting.stickyColumn\">\r\n                <ng-container *ngIf=\"!hasTemplate('checkbox')\">\r\n                    <p-checkbox [(ngModel)]=\"rowData._checked\" binary=\"true\" (onChange)=\"eventChecked(rowData)\">\r\n                    </p-checkbox>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"hasTemplate('checkbox')\">\r\n                    <ng-container [ngTemplateOutlet]=\"getTemplate('checkbox')\"\r\n                        [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n            </td>\r\n        </ng-container>\r\n        <td *ngIf=\"!setting.hiddenOrderColumn && (!rowData.hidden || !rowData.hidden[fieldOrder])\"\r\n            [style.width]=\"widthOrderColumn\" class=\"stt\" style=\"text-align: center;\"\r\n            [class.sticky]=\"setting.stickyColumn\" [class.hidden-checkbox]=\"setting.hiddenCheckbox\" [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldOrder]\"\r\n            [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldOrder]\">\r\n            <span class=\"row-card\" [ngStyle]=\"getBookmarkColor(rowData, columns)\"></span>\r\n            {{rowData[fieldOrder]}}\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </td>\r\n        <td *ngIf=\"rowExpansion\" class=\"no-padding center row-expansion-toggle\" [class.sticky]=\"setting.stickyColumn\">\r\n            <ng-container *ngTemplateOutlet=\"iconToggleRowData; context: {rowData: rowData, expanded: expanded}\">\r\n            </ng-container>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </td>\r\n        <ng-container\r\n            *ngTemplateOutlet=\"dynamicColBodys; context: {$implicit: columns, rowData: rowData, index: index, expanded: expanded}\">\r\n        </ng-container>\r\n        <td *ngIf=\"enableReorderRow\" class=\"no-padding center\">\r\n            <i class=\"fas fa-arrows-alt\" style=\"cursor:pointer; padding: 8px; color: #555;\" pReorderableRowHandle></i>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </td>\r\n        <ng-container *ngIf=\"!setting.hiddenFunctionColumn\">\r\n            <td class=\"text-center column-function\" style=\"text-align: center;\" [class.sticky]=\"setting.stickyColumn\">\r\n                <div *ngIf=\"hasTemplate('function')\" class=\"p-toolbar-group-center button-group\">\r\n                    <ng-container [ngTemplateOutlet]=\"getTemplate('function')\"\r\n                        [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"></ng-container>\r\n                    <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                </div>\r\n                <div *ngIf=\"!hasTemplate('function')\" class=\"p-toolbar-group-center button-group\">\r\n                    <ng-container [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"\r\n                        [ngTemplateOutlet]=\"getTemplate('buttonBefore')\"></ng-container>\r\n                    <button *ngIf=\"setting.showVersionButton\" type=\"button\" pButton pRipple icon=\"fas fa-history\"\r\n                        class=\"p-button-rounded p-button-success link-or-action\" pTooltip=\"Xem l\u1ECBch s\u1EED phi\u00EAn b\u1EA3n\"\r\n                        tooltipPosition=\"top\" (click)=\"showListVersion(rowData)\"></button>\r\n                    <button *ngIf=\"!rowData.hiddenEdit\" type=\"button\" pButton pRipple [disabled]=\"disableEdit(rowData)\"\r\n                        pTooltip=\"{{'FORM.EDIT' | translate}}\" tooltipPosition=\"top\"\r\n                        class=\"p-button-rounded p-button-text p-button-info link-or-action\" icon=\"pi pi-pencil\"\r\n                        (click)=\"edit(rowData)\"></button>\r\n                    <button *ngIf=\"!rowData.hiddenDelete\" type=\"button\" pButton pRipple\r\n                        [disabled]=\"disableDelete(rowData)\" pTooltip=\"{{'FORM.DELETE' | translate}}\"\r\n                        tooltipPosition=\"top\" class=\"p-button-rounded p-button-text p-button-danger link-or-action\"\r\n                        icon=\"pi pi-trash\" (click)=\"delete(rowData)\"></button>\r\n                    <ng-container [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"\r\n                        [ngTemplateOutlet]=\"getTemplate('buttonAfter')\"></ng-container>\r\n                    <button *ngIf=\"setting.showMenuButtons && menuButtons\" type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\r\n                        class=\"link-or-action p-button-text p-button-rounded\" pTooltip=\"Ch\u1EE9c n\u0103ng kh\u00E1c\"\r\n                        tooltipPosition=\"top\" (click)=\"showContextMenu($event, rowData)\"></button>\r\n                </div>\r\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n            </td>\r\n        </ng-container>\r\n    </tr>\r\n</ng-template>\r\n<ng-template #dynamicColBodys let-columns let-rowData=\"rowData\" let-index=\"index\" let-expanded=\"expanded\">\r\n    <ng-container *ngFor=\"let col of columns; let i = index\">\r\n        <ng-container\r\n            *ngTemplateOutlet=\"contentTd; context: {$implicit: rowData, col: col, index: index, i: i, expanded: expanded}\">\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #contentTd let-rowData let-col=\"col\" let-index=\"index\" let-expanded=\"expanded\" let-i=\"i\">\r\n    <td *ngIf=\"col && col.visible && col.field != 'function' && (!rowData.hidden || !rowData.hidden[col.field])\"\r\n        [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[col.field]\"\r\n        [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[col.field]\" [ngStyle]=\"col.extendData.style\"\r\n        [class]=\"col.cellClass\" [class.first-td]=\"i == 0\">\r\n        <span *ngIf=\"col.pipe\">\r\n            <span class=\"p-column-title\" [pTooltip]=\"col.fullLabel\" [escape]=\"false\"\r\n                tooltipPosition=\"top\">{{col.label}}</span>\r\n            {{rowData['pipe__' + col.field]}}\r\n        </span>\r\n        <span *ngIf=\"!col.pipe\">\r\n            <span class=\"p-column-title\" [pTooltip]=\"col.fullLabel\" [escape]=\"false\"\r\n                tooltipPosition=\"top\">{{col.label}}</span>\r\n            <span *ngIf=\"setting.showEditLink && col.showEditLink\" [pTooltip]=\"config.tooltipView\" tooltipPosition=\"top\"\r\n                class=\"link-or-action\">\r\n                <a href=\"javascript:;\" (click)=\"view(rowData)\" [pTooltip]=\"config.tooltipView\" tooltipPosition=\"top\">\r\n                    <ng-container [ngTemplateOutlet]=\"contentCell\"\r\n                        [ngTemplateOutletContext]=\"getContextCell(rowData, index, col, expanded, this)\">\r\n                    </ng-container>\r\n                </a>\r\n            </span>\r\n            <span *ngIf=\"!setting.showEditLink || !col.showEditLink\">\r\n                <ng-container [ngTemplateOutlet]=\"contentCell\"\r\n                    [ngTemplateOutletContext]=\"getContextCell(rowData, index, col, expanded, this)\">\r\n                </ng-container>\r\n            </span>\r\n        </span>\r\n        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n    </td>\r\n</ng-template>\r\n<ng-template #contentCell let-col=\"col\" let-rowData=\"rowData\" let-rowIndex=\"rowIndex\" let-field=\"field\"\r\n    let-expanded=\"expanded\">\r\n    <ng-container *ngIf=\"col.template\">\r\n        <ng-container [ngTemplateOutlet]=\"col.template\"\r\n            [ngTemplateOutletContext]=\"getContextCell(rowData, rowIndex, col, expanded,this)\">\r\n        </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!col.template\">\r\n        <ng-container [ngSwitch]=\"col.dataType\">\r\n            <span *ngSwitchCase=\"'color'\" style=\"display:block;text-align:center;\">\r\n                <div pTooltip=\"{{rowData[field]}}\" tooltipPosition=\"top\" [ngStyle]=\"{'background-color':rowData[field]}\"\r\n                    style=\"width:30px;height:30px;margin:0 auto;\"></div>\r\n            </span>\r\n            <span *ngSwitchCase=\"'icon'\" style=\"display:block;text-align:center;\">\r\n                <i pTooltip=\"{{rowData[field]}}\" tooltipPosition=\"top\" style=\"text-align: center;\"\r\n                    [ngClass]=\"rowData[field]\"></i>\r\n            </span>\r\n            <span *ngSwitchCase=\"'date'\" pTooltip=\"{{rowData[field] | date:'dd/MM/yyyy'}}\" tooltipPosition=\"top\">\r\n                {{_crudService.renderDate(rowData[field], col.format)}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'datetime'\" pTooltip=\"{{rowData[field] | date:'dd/MM/yyyy HH:mm'}}\"\r\n                tooltipPosition=\"top\">\r\n                {{_crudService.renderDateTime(rowData[field], col.format)}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'user'\" class=\"user\">\r\n                {{rowData[field] | userFormat | async}}\r\n            </span>\r\n            <div *ngSwitchCase=\"'users'\" [innerHTML]=\"rowData[field] | usersFormat | async\">\r\n            </div>\r\n            <span *ngSwitchCase=\"'int'\">\r\n                {{rowData[field]}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'decimal'\">\r\n                {{rowData[field]}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'intWithoutMask'\">\r\n                {{rowData[field]}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'currency'\">\r\n                {{rowData[field] | currency:\"VND\"}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'boolean'\">\r\n                <ng-container *ngIf=\"!col.useTriStateCheckbox\">\r\n                    <p-checkbox class=\"boolean-data-type\" binary=\"true\" [pTooltip]=\"getTooltip(rowData._tooltip, field)\"\r\n                        tooltipPosition=\"top\" [disabled]=\"col.disableCheckBox\" [(ngModel)]=\"rowData[field]\">\r\n                    </p-checkbox>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"col.useTriStateCheckbox\">\r\n                    <p-triStateCheckbox class=\"boolean-data-type\" binary=\"true\"\r\n                        [pTooltip]=\"getTooltip(rowData._tooltip, field)\" tooltipPosition=\"top\"\r\n                        [disabled]=\"col.disableCheckBox\" [(ngModel)]=\"rowData[field]\">\r\n                    </p-triStateCheckbox>\r\n                </ng-container>\r\n            </span>\r\n            <span *ngSwitchCase=\"'html'\">\r\n                <div *ngIf=\"rowData[field]==null?'':rowData[field]\" [innerHTML]=\"rowData[field] | safeHtml\"></div>\r\n            </span>\r\n            <span *ngSwitchCase=\"'metadataStatus'\">\r\n                <span *ngIf=\"rowData['rejectReason']\" class=\"label-danger\" [pTooltip]=\"rowData['rejectReason']\"\r\n                    tooltipStyleClass=\"unset-width\" [escape]=\"false\" tooltipPosition=\"top\">T\u1EEB ch\u1ED1i</span>\r\n                <span *ngIf=\"rowData[field] == '0' && !rowData['rejectReason']\" class=\"label-secondary\">Ch\u01B0a\r\n                    duy\u1EC7t</span>\r\n                <span *ngIf=\"rowData[field] == '1' && !rowData['rejectReason']\" class=\"label-warning\">Ch\u1EDD duy\u1EC7t</span>\r\n                <span *ngIf=\"rowData[field] == '2'\" class=\"label-primary\">\u0110\u00E3 duy\u1EC7t</span>\r\n            </span>\r\n            <ng-container *ngSwitchCase=\"'fileUpload'\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"fileUploadColumn; context: {$implicit: rowData, field: col.field, fileSetting: col.fileSetting}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'fileManager'\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"fileManagerColumn; context: {$implicit: rowData, field: col.field, fileSetting: col.fileSetting}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'string'\">\r\n                <ng-container *ngTemplateOutlet=\"contentCellString; context: {$implicit: rowData, field: col.field}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"null\">\r\n                <ng-container *ngTemplateOutlet=\"contentCellString; context: {$implicit: rowData, field: col.field}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchDefault>\r\n                <ng-container [ngTemplateOutlet]=\"getComponentByType(col.dataType)\"\r\n                    [ngTemplateOutletContext]=\"getContextCell(rowData, rowIndex, col, expanded, this)\">\r\n                </ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #contentCellString let-rowData let-field=\"field\">\r\n    <span>\r\n        <!-- __sv: Short Value -->\r\n        <ng-container *ngIf=\"rowData[field + '__sv']\">\r\n            <ng-container *ngIf=\"!rowData[field + '__showFull']\">\r\n                {{rowData[field + '__sv']}}\r\n                <span class=\"toggle-showfull\" (click)=\"toggleShowFull(rowData, field)\" pTooltip=\"B\u1EA5m \u0111\u1EC3 xem th\u00EAm\"\r\n                    tooltipPosition=\"top\">[...]</span>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"rowData[field + '__showFull']\">\r\n                {{rowData[field]}}\r\n                <span class=\"toggle-showfull\" (click)=\"toggleShowFull(rowData, field)\">Thu g\u1ECDn</span>\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!rowData[field + '__sv']\">\r\n            {{rowData[field]}}\r\n        </ng-container>\r\n    </span>\r\n</ng-template>\r\n<ng-template #iconToggleRowGroup let-rowData=\"rowData\" let-expanded=\"expanded\">\r\n    <a href=\"javascript:;\" (click)=\"handleToggleRow(rowData, $event)\">\r\n        <i style=\"margin-right:5px\" [ngClass]=\"expanded ? 'fas fa-fw fa-caret-down' : 'fas fa-fw fa-caret-right'\"></i>\r\n    </a>\r\n</ng-template>\r\n<ng-template #iconToggleRowData let-rowData=\"rowData\" let-expanded=\"expanded\">\r\n    <button type=\"button\" pButton pRipple class=\"link-or-action p-button-text p-button-rounded p-button-plain\"\r\n        [icon]=\"expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"\r\n        (click)=\"handleToggleRow(rowData, $event)\"></button>\r\n</ng-template>\r\n<ng-template #_contentRowGroup let-rowData=\"rowData\" let-groupCol=\"groupCol\" let-groupField=\"_groupField\">\r\n    <ng-container [ngTemplateOutlet]=\"contentCell\"\r\n        [ngTemplateOutletContext]=\"{rowData: rowData, col: groupCol, field: _groupField}\">\r\n    </ng-container>\r\n    <span> ({{rowGroupMetadata[rowData[_groupField]].size}})</span>\r\n</ng-template>\r\n<ng-template #entityWorkflowStatus let-rowData=\"rowData\">\r\n    <div class=\"container-text-workflow\">\r\n        <span class=\"content\">{{rowData.statusString ? rowData.statusString : rowData.strcurrentStateCode}}</span>\r\n        <button *ngIf=\"!rowData.hiddenWorkflowAction\" type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\r\n            class=\"link-or-action p-button-text p-button-rounded\" pTooltip=\"H\u00E0nh \u0111\u1ED9ng\" tooltipPosition=\"top\"\r\n            (click)=\"showActionWorkflow($event, rowData)\"></button>\r\n    </div>\r\n</ng-template>\r\n<ng-template #workflowCoreStatus let-rowData=\"rowData\">\r\n    <div class=\"container-text-workflow\">\r\n        <a class=\"content\" (click)=\"goToTask($event)\" href=\"javascript:;\">{{rowData.strworkflowCoreStatus}}</a>\r\n    </div>\r\n</ng-template>\r\n<ng-template #containerSticky>\r\n    <span class=\"fix-sticky top\"></span>\r\n    <span class=\"fix-sticky right\"></span>\r\n    <!-- <span class=\"fix-sticky bottom\"></span> -->\r\n    <span class=\"fix-sticky left\"></span>\r\n</ng-template>\r\n<ng-template #sortIcon let-field=\"field\">\r\n    <i class=\"p-sortable-column-icon pi\" style=\"font-size: 0.8em;\"\r\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>\r\n</ng-template>\r\n<ng-template #filterDropdown let-col=\"col\">\r\n    <div #filterBox style=\"width: 100%; border-radius: 4px;\">\r\n        <dropdown *ngIf=\"col && filterSchema.dropdown[col.field]\" [control]=\"filterSchema.dropdown[col.field]\"\r\n            [dataSource]=\"filterSchema.dropdown[col.field].dataSource\" [(value)]=\"filterData[col.field]\"\r\n            (onHideSmartEvent)=\"onSearch()\" (onShow)=\"onShowFilterDropdownPanel($event)\"\r\n            (onHide)=\"onHideFilterDropdownPanel($event)\" (mousedown)=\"initFilterBoxFocus(filterBox)\"></dropdown>\r\n    </div>\r\n</ng-template>\r\n<ng-template #filterText let-col=\"col\">\r\n    <div #filterBox class=\"text-filter filter-box\" tabindex=\"-1\" (mousedown)=\"initFilterBoxFocus(filterBox)\">\r\n        <div tabindex=\"-1\">\r\n            <input pInputText type=\"text\" class=\"input-search\" [placeholder]=\"col.label\"\r\n                [(ngModel)]=\"filterData[col.field]\" (change)=\"onSearch()\"\r\n                (keyup.esc)=\"onClearSearch(filterBox, col.field)\">\r\n        </div>\r\n        <span [ngClass]=\"{'action-clear': true, 'dirty': filterData[col.field] != null && filterData[col.field] !== ''}\"\r\n            [pTooltip]=\"'B\u1ECF filter'\" tooltipPosition=\"top\" (mousedown)=\"onClearSearch(filterBox, col.field)\"\r\n            tabindex=\"-1\"><i class=\"pi pi-filter-slash\"></i></span>\r\n        <after-view-checked style=\"display: none;\" (loaded)=\"initFilterBoxFocus(filterBox)\">\r\n        </after-view-checked>\r\n    </div>\r\n</ng-template>\r\n<ng-template #filterNumber let-col=\"col\">\r\n    <div #filterBox class=\"number-picker-range filter-box\" tabindex=\"-1\" (mousedown)=\"initFilterBoxFocus(filterBox)\">\r\n        <div tabindex=\"-1\">\r\n            <tn-number-picker-range #numberRange [maskType]=\"col.dataType\" [(ngModel)]=\"filterData[col.field]\"\r\n                [min]=\"col.min\" [max]=\"col.max\" (change)=\"onSearch()\">\r\n            </tn-number-picker-range>\r\n        </div>\r\n        <span\r\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] !== ''))}\"\r\n            [pTooltip]=\"'B\u1ECF filter'\" tooltipPosition=\"top\" (mousedown)=\"onClearNumberSearch(filterBox, numberRange)\"\r\n            tabindex=\"-1\">\r\n            <i class=\"pi pi-filter-slash\"></i></span>\r\n        <after-view-checked style=\"display: none;\" (loaded)=\"initFilterBoxFocus(filterBox)\">\r\n        </after-view-checked>\r\n    </div>\r\n</ng-template>\r\n<ng-template #filterDate let-col=\"col\">\r\n    <div #filterBox class=\"date-picker-range filter-box\" tabindex=\"-1\" (mousedown)=\"initFilterBoxFocus(filterBox)\">\r\n        <div tabindex=\"-1\">\r\n            <tn-datetime-picker-range #dateRange [control]=\"filterSchema.dateRange\"\r\n                (onChanged)=\"onChangeDateTime($event, col.field)\">\r\n            </tn-datetime-picker-range>\r\n        </div>\r\n        <span\r\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] !== ''))}\"\r\n            [pTooltip]=\"'B\u1ECF filter'\" tooltipPosition=\"top\"\r\n            (mousedown)=\"onClearDateSearch(filterBox, dateRange, col.field)\" tabindex=\"-1\"><i\r\n                class=\"pi pi-filter-slash\"></i></span>\r\n        <after-view-checked style=\"display: none;\" (loaded)=\"initFilterBoxFocus(filterBox)\">\r\n        </after-view-checked>\r\n    </div>\r\n</ng-template>\r\n<ng-template #filterBoolean let-col=\"col\">\r\n    <div class=\"filter-boolean-box\">\r\n        <p-selectButton\r\n            [options]=\"[{value: true, label: 'C\u00F3', icon: 'pi pi-check'}, {value: false, label: 'Kh\u00F4ng', icon: 'pi pi-times'}]\"\r\n            [multiple]=\"true\" [(ngModel)]=\"filterData[col.field]\" (onChange)=\"onChangeBoolean($event, col.field)\">\r\n            <ng-template let-item>\r\n                <i style=\"padding: 3px 0;\" [class]=\"item.icon\"></i>\r\n            </ng-template>\r\n        </p-selectButton>\r\n    </div>\r\n</ng-template>\r\n<ng-template #fileUploadColumn let-field=\"field\" let-rowData let-fileSetting=\"fileSetting\">\r\n    <file-upload *ngIf=\"fileSetting.control.mode == FileUploadMode.usingFileInstanceId\"\r\n        [sharedFolderType]=\"fileSetting.control.sharedFolderType\" [readonly]=\"fileSetting.control.readonly\"\r\n        [accept]=\"fileSetting.control.accept\" [(ngModel)]=\"rowData[field]\"\r\n        (onChanged)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.CHANGE)\"\r\n        (onInit)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.INIT)\"\r\n        (onSelect)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.SELECT)\"\r\n        (onRemove)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.DELETED)\">\r\n    </file-upload>\r\n\r\n    <service-file-upload *ngIf=\"fileSetting.control.mode == FileUploadMode.usingServiceFile\"\r\n        [serviceCode]=\"fileSetting.control.serviceCode\" [parentContext]=\"context\" [entity]=\"fileSetting.control.entity\"\r\n        [entityKey]=\"rowData[fileSetting.control.entityKeyField]\" [control]=\"fileSetting.control\"\r\n        [(ngModel)]=\"rowData.field\"\r\n        (onChanged)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.CHANGE)\"\r\n        (onInit)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.INIT)\"\r\n        (onSelect)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.SELECT)\"\r\n        (onRemove)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.DELETED)\">\r\n    </service-file-upload>\r\n</ng-template>\r\n<ng-template #fileManagerColumn let-rowData let-fileSetting=\"fileSetting\" let-field=\"field\">\r\n    <file-manager [control]=\"fileSetting.control\" [serviceCode]=\"fileSetting.control.serviceCode\"\r\n        [entity]=\"fileSetting.control.entity\" [entityKey]=\"rowData[fileSetting.control.entityKeyField]\"\r\n        [readonly]=\"fileSetting.control.readonly\" [layout]=\"fileSetting.control.layout\"\r\n        [fileDataService]=\"fileSetting.control.fileDataService\" [maxFileSize]=\"fileSetting.control.maxFileSize\"\r\n        [(value)]=\"rowData[field]\"\r\n        (onChanged)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.CHANGE)\"\r\n        (onInit)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.INIT)\"\r\n        (onSelect)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.SELECT)\"\r\n        (onRemove)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.DELETED)\"\r\n        (uploaded)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.UPLOADED)\">\r\n    </file-manager>\r\n</ng-template>",
                     providers: [i2$1.DecimalPipe, i2$1.DatePipe],
                     styles: [".container-table{display:flex;flex-direction:column;overflow:hidden}.container-table .container-table-inner{display:flex;height:auto;max-height:100%;min-height:60px;position:relative}.container-table-inner>tn-custom-scrollbar{width:100%}.cell-checkbox{text-align:center}.pick-color-row{border:1px solid #d1d1d1;border-radius:2px;bottom:0;cursor:pointer;display:flex;flex-wrap:wrap;height:1.4em;left:0;margin:auto;position:absolute;right:0;top:0;width:1.4em}.pick-color-row>div{background:#84d140;border:1px solid #fff;flex:0 0 50%}.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{align-items:center;display:flex}.cell-header-function>span{flex:1 1;text-align:center}.cell-header-function button{height:24px;margin:0;padding:0;width:24px}.group-icon{color:#256aa2;font-weight:400}.group-icon i{font-size:.8em;margin-right:5px}.center{text-align:center!important}.row-card{height:100%;left:0;position:absolute;top:0;width:5px}.column-function{background-color:#fff;min-width:80px;padding:0;position:sticky!important;right:0!important;z-index:2!important}.custom-search-area{background-color:#f2f2f2;margin:-.5em -1em .5em;padding-left:.5em;padding-right:.5em}.main-container-search-inner{margin-bottom:-.5em}.chkbox{left:0!important}.chkbox,.stt{background-color:#fff;position:sticky!important;z-index:2!important}.stt{left:35px!important}.stt.hidden-checkbox,.table-row>td:not(.chkbox) .stt,.title-row>th:not(.sticky):not(.chkbox) .stt{left:0!important}.table-row>tr:has(.ui-state-highlight) .stt{background-color:#a6d5fa}.filter-row>th:not(.sticky):not(.chkbox){padding:3px!important}.container-text-workflow{align-items:center;display:flex;justify-content:center}.container-text-workflow .link-or-action{color:#2196f3;cursor:pointer}.container-text-workflow .content{flex:1 1}.btnReload{height:2rem!important;left:50%;position:absolute;top:50%;transform:translate(-50%,calc(-50% - 1px));width:2rem}.toggle-showfull{color:#00f;cursor:pointer;font-size:.8rem;font-weight:700;white-space:nowrap}::ng-deep crud-list .advance-search-container{display:flex;justify-content:flex-end}::ng-deep crud-list advance-search{display:block;flex:1;max-width:400px}::ng-deep crud-list .main-container-search-inner .container-control>div{overflow:hidden}::ng-deep crud-list .ps__rail-x,::ng-deep crud-list .ps__rail-y{z-index:5}::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{min-width:200px;position:fixed;z-index:10}::ng-deep crud-list .p-datatable .p-datatable-thead>tr>th .container-icon-loading{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}::ng-deep crud-list .check-all-custom{height:0;position:absolute;width: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{background-color:#fff;border-radius:3px;display:flex;min-width:0}::ng-deep crud-list .cell-header-filter .filter-box>div{border:1px solid #ced4da;border-radius:3px 0 0 3px;border-right:none;flex:1;outline:none;overflow:hidden}::ng-deep crud-list .cell-header-filter .filter-box>span{align-items:center;background:#f5f6f8;border:1px solid #ced4da;color:#6c757d;cursor:pointer;display:inline-flex;flex-basis:32px;height:32px;justify-content:center;min-width:unset;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{border:none;box-shadow:none!important;padding-left:5px;padding-right:5px}::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{border-color:#2196f3;box-shadow:0 0 0 .2rem #a6d5fa;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{box-shadow:5px 0 15px 1px rgba(0,0,0,.27058823529411763);min-width:250px;position:absolute;top:calc(50% - 16px);z-index:2}::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{border-color:#2196f3;box-shadow:0 0 0 .2rem #a6d5fa;flex:1;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{background-color:#eee;position:absolute;z-index:5}::ng-deep crud-list .table-border-line.--left,::ng-deep crud-list .table-border-line.--right{bottom:0;top:0;width:1px}::ng-deep crud-list .table-border-line.--bottom,::ng-deep crud-list .table-border-line.--top{height:1px;left:0;right:0}::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>p-contextmenu{display:none}@media (max-width:640px){::ng-deep crud-list .--table-responsive .p-datatable-wrapper{padding:1px}}"]
                 },] }
@@ -47411,6 +47574,66 @@
         return TemplateTextMany;
     }());
 
+    var FileUploadSetting = /** @class */ (function () {
+        function FileUploadSetting(init) {
+            this.entityKeyField = 'id';
+            this.readonly = false;
+            this.disabled = false;
+            this.sharedFolderType = exports.SharedFolderType.Tempt;
+            this.mode = exports.FileUploadMode.usingServiceFile;
+            this.layout = exports.EnumFileLayout.LIST;
+            this.multiple = false;
+            this.uploadOnly = false;
+            this.useBreadcrumbs = true;
+            this.useSignature = true;
+            this.control = new FileUploadControlSchema();
+            for (var key in init) {
+                this[key] = init[key];
+            }
+            this.control = new FileUploadControlSchema({
+                serviceCode: this.serviceCode,
+                entity: this.entity,
+                entityKeyField: this.entityKeyField,
+                readonly: this.readonly,
+                accept: this.accept,
+                mode: this.mode,
+                layout: this.layout,
+                sharedFolderType: this.sharedFolderType,
+                fileDataService: this.fileDataService,
+                multiple: this.multiple,
+                disabled: this.disabled
+            });
+        }
+        return FileUploadSetting;
+    }());
+    var FileManagerSetting = /** @class */ (function () {
+        function FileManagerSetting(init) {
+            this.mode = exports.FileManagerMode.multiple;
+            this.layout = exports.EnumFileLayout.SIMPLE;
+            this.readonly = true;
+            this.inTaiLieu = false;
+            this.inTaiLieuChung = false;
+            this.copyToFolderId = '';
+            this.entityKeyField = 'id';
+            this.control = new FileManagerControlSchema();
+            for (var key in init) {
+                this[key] = init[key];
+            }
+            this.control = new FileManagerControlSchema({
+                serviceCode: this.serviceCode,
+                entity: this.entity,
+                entityKeyField: this.entityKeyField,
+                readonly: this.readonly,
+                accept: this.accept,
+                mode: this.mode,
+                layout: this.layout,
+                fileDataService: this.fileDataService,
+                rootFolderName: this.rootFolderName
+            });
+        }
+        return FileManagerSetting;
+    }());
+
     (function (PermissionBase) {
         PermissionBase[PermissionBase["READ"] = 1] = "READ";
         PermissionBase[PermissionBase["EDIT"] = 2] = "EDIT";
@@ -47769,10 +47992,12 @@
     exports.FileExplorerService = FileExplorerService;
     exports.FileManagerComponent = FileManagerComponent;
     exports.FileManagerControlSchema = FileManagerControlSchema;
+    exports.FileManagerSetting = FileManagerSetting;
     exports.FileObjectService = FileObjectService;
     exports.FilePickerDialogComponent = FilePickerDialogComponent;
     exports.FileUploadComponent = FileUploadComponent;
     exports.FileUploadControlSchema = FileUploadControlSchema;
+    exports.FileUploadSetting = FileUploadSetting;
     exports.FileV4Service = FileV4Service;
     exports.Filter = Filter;
     exports.FolderService = FolderService;