tnx-shared 5.1.412 → 5.1.414

package/bundles/tnx-shared.umd.js

@@ -4756,9 +4756,21 @@
     }());
     ButtonPermission.BUTTON_PHAN_QUYEN = 'BUTTON_PHAN_QUYEN';
     ButtonPermission.BUTTON_CAU_HINH_QUY_TRINH = 'BUTTON_CAU_HINH_QUY_TRINH';
+    ButtonPermission.ADD = 'ADD';
+    ButtonPermission.EDIT = 'EDIT';
+    ButtonPermission.DELETE = 'DELETE';
+    ButtonPermission.DELETE_MULTIPLE = 'DELETE_MULTIPLE';
+    ButtonPermission.EXPORT_EXCEL = 'EXPORT_EXCEL';
+    ButtonPermission.EXPORT_EXCEL_ALL = 'EXPORT_EXCEL_ALL';
     var ButtonPermissions = [
         'BUTTON_PHAN_QUYEN',
-        'BUTTON_CAU_HINH_QUY_TRINH'
+        'BUTTON_CAU_HINH_QUY_TRINH',
+        'ADD',
+        'EDIT',
+        'DELETE',
+        'DELETE_MULTIPLE',
+        'EXPORT_EXCEL',
+        'EXPORT_EXCEL_ALL',
     ];
 
     (function (PermissionBase) {
@@ -20620,6 +20632,7 @@
             _this.pTableScrollable = false;
             _this.pTableScrollHeight = null;
             _this.responsive = true;
+            _this.enableBasicAuthorize = false;
             _this.authorizeButtons = [
                 ComCtxConstants.COMMON.ADD,
                 ComCtxConstants.COMMON.EDIT,
@@ -21049,6 +21062,7 @@
                 _this.entityMetadataService = service;
             });
             this.filterSchema.dateRange = new DateTimeRangeControlSchema({ appendTo: 'body' });
+            this.filterSchema.dateTimeRange = new DateTimeRangeControlSchema({ appendTo: 'body', showTime: true });
             this.filterSchema.dropdown = {};
             dataSourceIcon.forEach(function (source) {
                 _this.sourceIcon[source.id] = source.ten;
@@ -21074,17 +21088,17 @@
             if (!this.serviceCode && this.setting.baseService) {
                 this.serviceCode = this.setting.baseService.serviceCode;
             }
-            if (this.authorizePath) {
+            if (!this.authorizePath) {
                 this.authorizePaths[ComCtxConstants.COMMON.ADD] = this.authorizePath + "/ADD";
                 this.authorizePaths[ComCtxConstants.COMMON.EDIT] = this.authorizePath + "/EDIT";
                 this.authorizePaths[ComCtxConstants.COMMON.DELETE] = this.authorizePath + "/DELETE";
                 this.authorizePaths[ComCtxConstants.COMMON.DELETE_MULTIPLE] = this.authorizePath + "/DELETE_MULTIPLE";
                 this.authorizePaths[ComCtxConstants.COMMON.EXPORT_EXCEL] = this.authorizePath + "/EXPORT_EXCEL";
                 this.authorizePaths[ComCtxConstants.COMMON.EXPORT_ALL_EXCEL] = this.authorizePath + "/EXPORT_ALL_EXCEL";
-                this.authorizeButtons.forEach(function (button) {
-                    _this.buttonApplyAuthorize[button] = true;
-                });
             }
+            this.authorizeButtons.forEach(function (button) {
+                _this.buttonApplyAuthorize[button] = true;
+            });
             var userService = this._injector.get(UserService);
             var temp = userService.getCurrentUser();
             if (temp != null) {
@@ -22688,20 +22702,10 @@
                         templateFilter.push.apply(templateFilter, __spread(_this.getRangeFilter(col)));
                         break;
                     case exports.DataType.date:
+                        templateFilter.push.apply(templateFilter, __spread(_this.getDateRangeFilter(col, function (date) { return new Date(date.getFullYear(), date.getMonth(), date.getDate()); }, function (date) { return new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1, 0, 0, -1); })));
+                        break;
                     case exports.DataType.datetime:
-                        templateFilter.push.apply(templateFilter, __spread(_this.getRangeFilter(col, function (item) {
-                            if (item[0] == null) {
-                                return null;
-                            }
-                            var date = new Date(item[0]);
-                            return new Date(date.getFullYear(), date.getMonth(), date.getDate());
-                        }, function (item) {
-                            if (item[1] == null) {
-                                return null;
-                            }
-                            var date = new Date(item[1]);
-                            return new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1, 0, 0, -1);
-                        })));
+                        templateFilter.push.apply(templateFilter, __spread(_this.getDateRangeFilter(col, function (date) { return new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds()); }, function (date) { return new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds()); })));
                         break;
                     default:
                         templateFilter.push(new Filter({
@@ -22713,6 +22717,21 @@
                 }
             });
         };
+        ListComponentBase.prototype.getDateRangeFilter = function (col, parseDateFrom, parseDateTo) {
+            return this.getRangeFilter(col, function (item) {
+                if (item[0] == null) {
+                    return null;
+                }
+                var date = new Date(item[0]);
+                return parseDateFrom(date);
+            }, function (item) {
+                if (item[1] == null) {
+                    return null;
+                }
+                var date = new Date(item[1]);
+                return parseDateTo(date);
+            });
+        };
         ListComponentBase.prototype.getRangeFilter = function (col, funcGetValueFrom, funcGetValueTo) {
             if (funcGetValueFrom === void 0) { funcGetValueFrom = null; }
             if (funcGetValueTo === void 0) { funcGetValueTo = null; }
@@ -23795,6 +23814,7 @@
         pTableScrollable: [{ type: i0.Input }],
         pTableScrollHeight: [{ type: i0.Input }],
         responsive: [{ type: i0.Input }],
+        enableBasicAuthorize: [{ type: i0.Input }],
         serviceCode: [{ type: i0.Input }],
         authorizePath: [{ type: i0.Input }],
         authorizeButtons: [{ type: i0.Input }],
@@ -23900,7 +23920,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]=\"{\r\n                        crudList: this,\r\n                        buttonAdd: buttonAdd, buttonExport: buttonExport, buttonDelete: buttonDelete\r\n                    }\">\r\n                </ng-container>\r\n            </div>\r\n\r\n            <div *ngIf=\"!setting.hiddenPageSetting\" class=\"paginator-table\">\r\n                <ng-container *ngIf=\"!paginationTemplate\">\r\n                    <paging-next-back-only [model]=\"model\" [setting]=\"setting\" (onChanged)=\"getData()\"\r\n                        (onChangeLimitPage)=\"savePageSize()\">\r\n                    </paging-next-back-only>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"paginationTemplate\">\r\n                    <ng-container [ngTemplateOutlet]=\"paginationTemplate\"></ng-container>\r\n                </ng-container>\r\n            </div>\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=\"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 [ngTemplateOutlet]=\"getTemplate('toolbar')\" [ngTemplateOutletContext]=\"{\r\n                                    selectedItems: model.selectedItems, crudList: this,\r\n                                    buttonAdd: buttonAdd, buttonExport: buttonExport, buttonDelete: buttonDelete\r\n                                }\">\r\n                            </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                            <ng-container [ngTemplateOutlet]=\"getTemplate('buttonBeforeToolbar')\"\r\n                                [ngTemplateOutletContext]=\"{crudList: this}\"></ng-container>\r\n                            <button type=\"button\" pButton label=\"\u0110\u00E1nh STT\" class=\"p-button-text\" style=\"display: none\"\r\n                                (click)=\"danhSoThuTuGroupLastest()\"></button>\r\n                            <ng-container *ngIf=\"!hiddenAdd\" [ngTemplateOutlet]=\"buttonAdd\"></ng-container>\r\n                            <ng-container *ngIf=\"setting.showExportSelectedItems\" [ngTemplateOutlet]=\"buttonExport\">\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"!hiddenDelete\" [ngTemplateOutlet]=\"buttonDelete\">\r\n                            </ng-container>\r\n                            <button *ngIf=\"!setting.disableShare && model.selectedItems.length > 0\"\r\n                                label=\"Chia s\u1EBB li\u00EAn k\u1EBFt\" type=\"button\" pButton pRipple\r\n                                [pTooltip]=\"'Chia s\u1EBB li\u00EAn k\u1EBFt' | translate\" tooltipPosition=\"top\"\r\n                                class=\"p-button-text p-button-info link-or-action\" icon=\"pi pi-link\"\r\n                                (click)=\"createShareLinkMultiple()\"></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]=\"getTemplate('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    (onDelete)=\"onDeleteSettings()\" (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\">\r\n</workflow-setting-dialog>\r\n<tn-dialog *ngIf=\"workflowSettingModel.showEditForm\" [header]=\"'C\u1EA5u h\u00ECnh quy tr\u00ECnh nghi\u1EC7p v\u1EE5' | translate\"\r\n    [popupSize]=\"workflowSettingModel.popupSize\" (onHide)=\"workflowSettingModel.showEditForm = false\">\r\n    <workflow-setting-new #formBase [parentSetting]=\"setting\" (onSaved)=\"onSaveWorkflowSettingsNew($event)\"\r\n        (onCancel)=\"workflowSettingModel.showEditForm = false\"></workflow-setting-new>\r\n</tn-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'\" [styleClass]=\"'allow-selected'\" [model]=\"buttonContexts\">\r\n</p-contextMenu>\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%; padding: 1rem\">\r\n        <process-workflow-form #formBase [businessSetting]=\"processWorkflowModel.data.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=\"choYKienModel.showEditForm\" #dialog [header]=\"choYKienModel.header | translate\"\r\n    [popupSize]=\"choYKienModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\r\n    (onHide)=\"choYKienModel.showEditForm = false\">\r\n    <div style=\"height: 100%\">\r\n        <cho-y-kien-form #formBase [bussinessSetting]=\"choYKienModel.data.setting\"\r\n            [rowItem]=\"choYKienModel.data.rowData\" (onSaved)=\"choYKienModel.showEditForm = false\"\r\n            (onCancel)=\"choYKienModel.showEditForm = false\">\r\n        </cho-y-kien-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 [businessSetting]=\"workflowHistoryModel.data.setting\"\r\n            [tableName]=\"workflowHistoryModel.data.tableName\" [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<tn-dialog *ngIf=\"detailTaskModel.showEditForm\" #dialog [header]=\"detailTaskModel.header | translate\"\r\n    [popupSize]=\"detailTaskModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\r\n    (onHide)=\"detailTaskModel.showEditForm = false\">\r\n    <base-congviec-form #formBase [model]=\"detailTaskModel.data.taskFormModel\" [forceOnlyView]=\"true\"\r\n        (onCancel)=\"detailTaskModel.showEditForm = false\">\r\n    </base-congviec-form>\r\n</tn-dialog>\r\n\r\n<!-- <tn-dialog *ngIf=\"showDetailForm\" #dialog [styleClass]=\"'congviec-form tn-form-dialog'\"\r\n    [header]=\"setting.popupHeader | translate\" [popupSize]=\"setting.popupSize\" (onHide)=\"showDetailForm = false\">\r\n    <base-congviec-form #formBase [parentModel]=\"model\" [parentSetting]=\"setting\" [parentContext]=\"context\"\r\n        [model]=\"formModel\" [crudList]=\"crudList\" (onSaved)=\"showDetailForm = false;crudList.reload()\"\r\n        (onCancel)=\"_handleCancel($event)\" (onAfterSaved)=\"onAfterSaved($event)\">\r\n    </base-congviec-form>\r\n</tn-dialog> -->\r\n\r\n<tn-dialog *ngIf=\"permissionSharingModel.showEditForm\" #dialog [header]=\"permissionSharingModel.header | translate\"\r\n    [popupSize]=\"permissionSharingModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\r\n    (onHide)=\"permissionSharingModel.showEditForm = false\">\r\n    <div style=\"height: 100%\">\r\n        <permission-sharing #formBase [item]=\"rowDataCurrent\" [baseService]=\"setting.baseService\"\r\n            (onCancel)=\"permissionSharingModel.showEditForm = false\">\r\n        </permission-sharing>\r\n    </div>\r\n</tn-dialog>\r\n<tn-dialog *ngIf=\"permissionListModel.showEditForm\" #dialog [header]=\"permissionListModel.header | translate\"\r\n    [popupSize]=\"permissionListModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\" [useDefaultScrollBar]=\"true\"\r\n    (onHide)=\"permissionListModel.showEditForm = false\">\r\n    <div style=\"height: 100%\">\r\n        <workflow-permission #formBase [item]=\"rowDataCurrent\" [businessSetting]=\"setting\"\r\n            (onCancel)=\"permissionListModel.showEditForm = false\">\r\n        </workflow-permission>\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<tn-dialog *ngIf=\"startWorkflowModel.showEditForm\" #dialog [header]=\"startWorkflowModel.header | translate\"\r\n    [popupSize]=\"startWorkflowModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\r\n    (onHide)=\"startWorkflowModel.showEditForm = false\">\r\n    <div style=\"height: 100%\">\r\n        <start-workflow #formBase [workflows]=\"startWorkflowModel.data.workflows\"\r\n            [defaultWorkflow]=\"startWorkflowModel.data.defaultWorkflow\"\r\n            (onCancel)=\"startWorkflowModel.showEditForm = false\" (onSaved)=\"handleStartWorkflowFromDialog($event)\">\r\n        </start-workflow>\r\n    </div>\r\n</tn-dialog>\r\n<tn-dialog *ngIf=\"congViecModel.showEditForm\" #dialog [styleClass]=\"'congviec-form tn-form-dialog'\"\r\n    [header]=\"congViecModel.header | translate\" [popupSize]=\"congViecModel.popupSize\"\r\n    (onHide)=\"congViecModel.showEditForm = false\">\r\n    <base-congviec-form #formBase [parentSetting]=\"congViecModel.data.congViecSetting\"\r\n        [model]=\"congViecModel.data.model\" (onSaved)=\"congViecModel.showEditForm = false;getData()\"\r\n        (onCancel)=\"congViecModel.showEditForm = false\">\r\n    </base-congviec-form>\r\n</tn-dialog>\r\n<tn-dialog *ngIf=\"shareLinkModel.showEditForm\" #dialog [styleClass]=\"'congviec-form tn-form-dialog'\"\r\n    [header]=\"shareLinkModel.header | translate\" [popupSize]=\"shareLinkModel.popupSize\" [useDefaultScrollBar]=\"true\"\r\n    (onHide)=\"shareLinkModel.showEditForm = false\">\r\n    <share-link-by-permission #formBase [setting]=\"setting\" [lstItem]=\"shareLinkModel.data.lstItem\"\r\n        (onCancel)=\"congViecModel.showEditForm = false\">\r\n    </share-link-by-permission>\r\n</tn-dialog>\r\n<tn-dialog *ngIf=\"attachedTaskModel.showEditForm\" [header]=\"attachedTaskModel.header | translate\"\r\n    [popupSize]=\"attachedTaskModel.popupSize\" [useDefaultScrollBar]=\"true\"\r\n    (onHide)=\"attachedTaskModel.showEditForm = false\">\r\n    <base-congviec [serviceCode]=\"setting.baseService.serviceCode\" [entity]=\"setting.baseService.entityName\"\r\n        [itemIdAttach]=\"rowDataCurrent.id\"></base-congviec>\r\n</tn-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=\"colgroup\" pTemplate=\"colgroup\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"colgroup; context: {$implicit: columns}\"></ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"!colgroup\" pTemplate=\"colgroup\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"baseColgroup; context: {$implicit: columns}\">\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=\"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: {$implicit: 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    </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=\"colgroup\" pTemplate=\"colgroup\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"colgroup; context: {$implicit: columns}\"></ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"!colgroup\" pTemplate=\"colgroup\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"baseColgroup; context: {$implicit: columns}\">\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=\"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                                <div 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                                </div>\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    </p-table>\r\n    <after-view-checked></after-view-checked>\r\n</ng-template>\r\n<ng-template #baseColgroup let-columns>\r\n    <colgroup>\r\n        <col *ngIf=\"!setting.hiddenCheckbox\" [style.width]=\"widthCheckbox\" />\r\n        <col *ngIf=\"!setting.hiddenOrderColumn\" [style.width]=\"widthOrderColumn\" />\r\n        <col *ngIf=\"rowExpansion\" style=\"width: 2.5rem\" />\r\n        <ng-container *ngFor=\"let col of columns; let i = index\">\r\n            <col *ngIf=\"col && col.visible && col.field!='function'\" [style.width]=\"col.width\" />\r\n        </ng-container>\r\n        <col *ngIf=\"enableReorderRow\" style=\"width: 30px\" />\r\n        <col *ngIf=\"!setting.hiddenFunctionColumn\" [style.width]=\"widthFunctionColumn || _widthFunctionColumn\" />\r\n    </colgroup>\r\n</ng-template>\r\n<ng-template #buttonAdd>\r\n    <span [appAuthorize]=\"serviceCode\" [permission]=\"authorizePaths[commonConst.ADD]\"\r\n        [enableAuthorize]=\"buttonApplyAuthorize[commonConst.ADD]\">\r\n        <button type=\"button\" pButton pRipple label=\"Th\u00EAm m\u1EDBi\" icon=\"pi pi-plus\" class=\"p-button-text\"\r\n            [disabled]=\"!model.baseReady\" (click)=\"add()\"></button>\r\n    </span>\r\n</ng-template>\r\n<ng-template #buttonExport>\r\n    <button *ngIf=\"model.selectedItems.length > 0\" [appAuthorize]=\"serviceCode\"\r\n        [permission]=\"authorizePaths[commonConst.EXPORT_EXCEL]\"\r\n        [enableAuthorize]=\"buttonApplyAuthorize[commonConst.EXPORT_EXCEL]\" 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</ng-template>\r\n<ng-template #buttonDelete>\r\n    <button *ngIf=\"!hiddenDelete && model.selectedItems.length > 0 && !disableMultipleDelete()\"\r\n        [appAuthorize]=\"serviceCode\" [permission]=\"authorizePaths[commonConst.DELETE_MULTIPLE]\"\r\n        [enableAuthorize]=\"buttonApplyAuthorize[commonConst.DELETE_MULTIPLE]\" type=\"button\" pButton pRipple\r\n        [label]=\"'X\u00F3a ' + (model.selectedItems.length) | translate\" icon=\"pi pi-trash\"\r\n        class=\"p-button-text p-button-danger\" (click)=\"deleteMutiple()\"></button>\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 class=\"chkbox link-or-action cell-checkbox\" [class.sticky]=\"setting.stickyColumn\">\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\" class=\"stt nopad center\" [class.sticky]=\"setting.stickyColumn\"\r\n            (dblclick)=\"reload()\">\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                [tnSortableColumnDisabled]=\"!col.sort\">\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\" [class.sticky]=\"setting.stickyColumn\"\r\n            [class.tricheckbox-custom-false]=\"checkedAll === false\">\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\" [class.sticky]=\"setting.stickyColumn\">\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=\"'intWithoutMask'\">\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=\"'currency'\">\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            [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                [disabled]=\"!checkPermissionToUseButton(BUTTON_PHAN_QUYEN)\" (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                [disabled]=\"!checkPermissionToUseButton(BUTTON_CAU_HINH_QUY_TRINH)\"\r\n                (click)=\"showSettingsWorkflowNew()\"></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\" [class.sticky]=\"setting.stickyColumn\">\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 *ngIf=\"!rowData.template\" [tnReorderableRow]=\"index\" [attr.rowIndex]=\"index\" [ngClass]=\"rowData.objStyleClass\"\r\n        [class.ui-state-highlight]=\"rowData._checked\" [pTooltip]=\"rowData.tooltip\" tooltipPosition=\"top\"\r\n        [tooltipStyleClass]=\"rowData.tooltipClass\" [escape]=\"escape\" (click)=\"eventSelectRow($event, rowData)\">\r\n        <ng-container *ngIf=\"!setting.hiddenCheckbox && !rowData.hidden[fieldCheckbox]\">\r\n            <td class=\"chkbox link-or-action cell-checkbox\" [class.sticky]=\"setting.stickyColumn\"\r\n                [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldCheckbox]\"\r\n                [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldCheckbox]\">\r\n                <ng-container *ngIf=\"!rowData.hiddenCheckBox\">\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>\r\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n            </td>\r\n        </ng-container>\r\n        <td *ngIf=\"!setting.hiddenOrderColumn && !rowData.hidden[fieldOrder]\" class=\"stt\" style=\"text-align: center;\"\r\n            [class.sticky]=\"setting.stickyColumn\" [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldOrder]\"\r\n            [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldOrder]\">\r\n            <span class=\"row-card\" [ngStyle]=\"rowData.bookmarkStyle\"></span>\r\n            {{rowData[fieldOrder]}}\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </td>\r\n        <td *ngIf=\"rowExpansion && !rowData.hidden[fieldColExpand]\" class=\"no-padding center row-expansion-toggle\"\r\n            [class.sticky]=\"setting.stickyColumn\" [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldColExpand]\"\r\n            [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldColExpand]\">\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 && !rowData.hidden[fieldColReorder]\" class=\"no-padding center\"\r\n            [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldColReorder]\"\r\n            [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldColReorder]\">\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 && !rowData.hidden[fieldFunction]\">\r\n            <td class=\"text-center column-function\" style=\"text-align: center;\" [class.sticky]=\"setting.stickyColumn\"\r\n                [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldFunction]\"\r\n                [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldFunction]\">\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=\"pi pi-calendar\"\r\n                        class=\"p-button-rounded p-button-text p-button-success link-or-action\"\r\n                        pTooltip=\"Xem l\u1ECBch s\u1EED phi\u00EAn b\u1EA3n\" tooltipPosition=\"top\"\r\n                        (click)=\"showListVersion(rowData)\"></button>\r\n                    <button *ngIf=\"!rowData.hiddenEdit\" [appAuthorize]=\"serviceCode\"\r\n                        [permission]=\"authorizePaths[commonConst.EDIT]\"\r\n                        [enableAuthorize]=\"buttonApplyAuthorize[commonConst.EDIT]\" type=\"button\" pButton pRipple\r\n                        [disabled]=\"disableEdit(rowData)\" [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\" [appAuthorize]=\"serviceCode\"\r\n                        [permission]=\"authorizePaths[commonConst.DELETE]\"\r\n                        [enableAuthorize]=\"buttonApplyAuthorize[commonConst.DELETE]\" type=\"button\" pButton pRipple\r\n                        [disabled]=\"disableDelete(rowData)\" [pTooltip]=\"'FORM.DELETE' | translate\" tooltipPosition=\"top\"\r\n                        class=\"p-button-rounded p-button-text p-button-danger link-or-action\" icon=\"pi pi-trash\"\r\n                        (click)=\"delete(rowData)\"></button>\r\n                    <button *ngIf=\"showMenuButtons && menuButtons\" type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\r\n                        class=\"link-or-action p-button-text p-button-info p-button-rounded\" pTooltip=\"Ch\u1EE9c n\u0103ng kh\u00E1c\"\r\n                        tooltipPosition=\"top\" (click)=\"showContextMenu($event, rowData)\"></button>\r\n                    <ng-container [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"\r\n                        [ngTemplateOutlet]=\"getTemplate('buttonAfter')\"></ng-container>\r\n                </div>\r\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n            </td>\r\n        </ng-container>\r\n    </tr>\r\n    <ng-container *ngIf=\"rowData.template\">\r\n        <ng-container *ngTemplateOutlet=\"rowData.template; context: {\r\n            $implicit: rowData, columns: columns, index: index, expanded: expanded, eventSelectRow: eventSelectRow, eventChecked: eventChecked\r\n        }\"></ng-container>\r\n    </ng-container>\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[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                {{rowData[field] | tnDate:col.dataType: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                {{rowData[field] | tnDate:col.dataType: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] | number}}\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=\"'decimal'\">\r\n                {{rowData[field] | number}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'boolean'\">\r\n                <p-checkbox class=\"boolean-data-type\" [(ngModel)]=\"rowData[field]\" binary=\"true\"\r\n                    [disabled]=\"col.disableCheckBox\">\r\n                </p-checkbox>\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 *ngIf=\"setting.columnSetting.showGroupSize\">\r\n        ({{rowGroupMetadata[rowData[_groupField]].size}})</span>\r\n</ng-template>\r\n<ng-template #trangThaiV5 let-rowData=\"rowData\">\r\n    <div class=\"container-text-workflow\">\r\n        <button *ngIf=\"!rowData.__workflowCode && !rowData.hiddenWorkflowAction && !rowData.hiddenStartWorkflow\" pButton\r\n            class=\"p-button-text link-or-action\" label=\"B\u1EAFt \u0111\u1EA7u\" style=\"border: 1px solid #7ca9cd;\"\r\n            pTooltip=\"B\u1EAFt \u0111\u1EA7u ch\u1EA1y quy tr\u00ECnh\" tooltipPosition=\"top\"\r\n            [disabled]=\"rowData.__startingWorkflow && !rowData.__notReadyForStart\"\r\n            (click)=\"showFormStartWorkflow(rowData)\"></button>\r\n        <ng-container *ngIf=\"rowData.__workflowCode\">\r\n            <span class=\"content\">{{rowData.__textTrangThai}}</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                [disabled]=\"showingActionWorkflow\" (click)=\"showActionWorkflow($event, rowData)\"></button>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #viewHistory let-rowData=\"rowData\">\r\n    <button pButton icon=\"pi pi-calendar\" class=\"p-button-text p-button-rounded link-or-action\" pTooltip=\"Xem l\u1ECBch s\u1EED\"\r\n        tooltipPosition=\"top\" (click)=\"viewHistoryWorkflow(setting, rowData)\"></button>\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 *ngIf=\"!col.minimizeFilter\"\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        <ng-container *ngIf=\"col.minimizeFilter\">\r\n            <button *ngIf=\"!filterData[col.field]\" type=\"button\" pButton icon=\"pi pi-filter-slash\"\r\n                class=\"btn-filter-boolean\" (click)=\"showCheckBoxFilterMenu($event, col.field)\"></button>\r\n            <button *ngIf=\"filterData[col.field]\" type=\"button\" pButton icon=\"pi pi-filter\"\r\n                class=\"btn-filter-boolean p-button-primary\"\r\n                (click)=\"showCheckBoxFilterMenu($event, col.field)\"></button>\r\n        </ng-container>\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.mode == FileUploadMode.usingFileInstanceId\"\r\n        [sharedFolderType]=\"fileSetting.control.sharedFolderType\" [readonly]=\"fileSetting.control.readonly\"\r\n        [accept]=\"fileSetting.control.accept\" [(ngModel)]=\"rowData[field]\">\r\n    </file-upload>\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        [fileDataService]=\"fileSetting.control.fileDataService\" [(ngModel)]=\"rowData.field\">\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\" [fileDataService]=\"fileSetting.control.fileDataService\"\r\n        [maxFileSize]=\"fileSetting.control.maxFileSize\" [inTaiLieu]=\"fileSetting.control.inTaiLieu\"\r\n        [(value)]=\"rowData[field]\">\r\n    </file-manager>\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]=\"{\r\n                        crudList: this,\r\n                        buttonAdd: buttonAdd, buttonExport: buttonExport, buttonDelete: buttonDelete\r\n                    }\">\r\n                </ng-container>\r\n            </div>\r\n\r\n            <div *ngIf=\"!setting.hiddenPageSetting\" class=\"paginator-table\">\r\n                <ng-container *ngIf=\"!paginationTemplate\">\r\n                    <paging-next-back-only [model]=\"model\" [setting]=\"setting\" (onChanged)=\"getData()\"\r\n                        (onChangeLimitPage)=\"savePageSize()\">\r\n                    </paging-next-back-only>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"paginationTemplate\">\r\n                    <ng-container [ngTemplateOutlet]=\"paginationTemplate\"></ng-container>\r\n                </ng-container>\r\n            </div>\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=\"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 [ngTemplateOutlet]=\"getTemplate('toolbar')\" [ngTemplateOutletContext]=\"{\r\n                                    selectedItems: model.selectedItems, crudList: this,\r\n                                    buttonAdd: buttonAdd, buttonExport: buttonExport, buttonDelete: buttonDelete\r\n                                }\">\r\n                            </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                            <ng-container [ngTemplateOutlet]=\"getTemplate('buttonBeforeToolbar')\"\r\n                                [ngTemplateOutletContext]=\"{crudList: this}\"></ng-container>\r\n                            <button type=\"button\" pButton label=\"\u0110\u00E1nh STT\" class=\"p-button-text\" style=\"display: none\"\r\n                                (click)=\"danhSoThuTuGroupLastest()\"></button>\r\n                            <ng-container *ngIf=\"!hiddenAdd\" [ngTemplateOutlet]=\"buttonAdd\"></ng-container>\r\n                            <ng-container *ngIf=\"setting.showExportSelectedItems\" [ngTemplateOutlet]=\"buttonExport\">\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"!hiddenDelete\" [ngTemplateOutlet]=\"buttonDelete\">\r\n                            </ng-container>\r\n                            <button *ngIf=\"!setting.disableShare && model.selectedItems.length > 0\"\r\n                                label=\"Chia s\u1EBB li\u00EAn k\u1EBFt\" type=\"button\" pButton pRipple\r\n                                [pTooltip]=\"'Chia s\u1EBB li\u00EAn k\u1EBFt' | translate\" tooltipPosition=\"top\"\r\n                                class=\"p-button-text p-button-info link-or-action\" icon=\"pi pi-link\"\r\n                                (click)=\"createShareLinkMultiple()\"></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]=\"getTemplate('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    (onDelete)=\"onDeleteSettings()\" (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\">\r\n</workflow-setting-dialog>\r\n<tn-dialog *ngIf=\"workflowSettingModel.showEditForm\" [header]=\"'C\u1EA5u h\u00ECnh quy tr\u00ECnh nghi\u1EC7p v\u1EE5' | translate\"\r\n    [popupSize]=\"workflowSettingModel.popupSize\" (onHide)=\"workflowSettingModel.showEditForm = false\">\r\n    <workflow-setting-new #formBase [parentSetting]=\"setting\" (onSaved)=\"onSaveWorkflowSettingsNew($event)\"\r\n        (onCancel)=\"workflowSettingModel.showEditForm = false\"></workflow-setting-new>\r\n</tn-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'\" [styleClass]=\"'allow-selected'\" [model]=\"buttonContexts\">\r\n</p-contextMenu>\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%; padding: 1rem\">\r\n        <process-workflow-form #formBase [businessSetting]=\"processWorkflowModel.data.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=\"choYKienModel.showEditForm\" #dialog [header]=\"choYKienModel.header | translate\"\r\n    [popupSize]=\"choYKienModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\r\n    (onHide)=\"choYKienModel.showEditForm = false\">\r\n    <div style=\"height: 100%\">\r\n        <cho-y-kien-form #formBase [bussinessSetting]=\"choYKienModel.data.setting\"\r\n            [rowItem]=\"choYKienModel.data.rowData\" (onSaved)=\"choYKienModel.showEditForm = false\"\r\n            (onCancel)=\"choYKienModel.showEditForm = false\">\r\n        </cho-y-kien-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 [businessSetting]=\"workflowHistoryModel.data.setting\"\r\n            [tableName]=\"workflowHistoryModel.data.tableName\" [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<tn-dialog *ngIf=\"detailTaskModel.showEditForm\" #dialog [header]=\"detailTaskModel.header | translate\"\r\n    [popupSize]=\"detailTaskModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\r\n    (onHide)=\"detailTaskModel.showEditForm = false\">\r\n    <base-congviec-form #formBase [model]=\"detailTaskModel.data.taskFormModel\" [forceOnlyView]=\"true\"\r\n        (onCancel)=\"detailTaskModel.showEditForm = false\">\r\n    </base-congviec-form>\r\n</tn-dialog>\r\n\r\n<!-- <tn-dialog *ngIf=\"showDetailForm\" #dialog [styleClass]=\"'congviec-form tn-form-dialog'\"\r\n    [header]=\"setting.popupHeader | translate\" [popupSize]=\"setting.popupSize\" (onHide)=\"showDetailForm = false\">\r\n    <base-congviec-form #formBase [parentModel]=\"model\" [parentSetting]=\"setting\" [parentContext]=\"context\"\r\n        [model]=\"formModel\" [crudList]=\"crudList\" (onSaved)=\"showDetailForm = false;crudList.reload()\"\r\n        (onCancel)=\"_handleCancel($event)\" (onAfterSaved)=\"onAfterSaved($event)\">\r\n    </base-congviec-form>\r\n</tn-dialog> -->\r\n\r\n<tn-dialog *ngIf=\"permissionSharingModel.showEditForm\" #dialog [header]=\"permissionSharingModel.header | translate\"\r\n    [popupSize]=\"permissionSharingModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\r\n    (onHide)=\"permissionSharingModel.showEditForm = false\">\r\n    <div style=\"height: 100%\">\r\n        <permission-sharing #formBase [item]=\"rowDataCurrent\" [baseService]=\"setting.baseService\"\r\n            (onCancel)=\"permissionSharingModel.showEditForm = false\">\r\n        </permission-sharing>\r\n    </div>\r\n</tn-dialog>\r\n<tn-dialog *ngIf=\"permissionListModel.showEditForm\" #dialog [header]=\"permissionListModel.header | translate\"\r\n    [popupSize]=\"permissionListModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\" [useDefaultScrollBar]=\"true\"\r\n    (onHide)=\"permissionListModel.showEditForm = false\">\r\n    <div style=\"height: 100%\">\r\n        <workflow-permission #formBase [item]=\"rowDataCurrent\" [businessSetting]=\"setting\"\r\n            (onCancel)=\"permissionListModel.showEditForm = false\">\r\n        </workflow-permission>\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<tn-dialog *ngIf=\"startWorkflowModel.showEditForm\" #dialog [header]=\"startWorkflowModel.header | translate\"\r\n    [popupSize]=\"startWorkflowModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\r\n    (onHide)=\"startWorkflowModel.showEditForm = false\">\r\n    <div style=\"height: 100%\">\r\n        <start-workflow #formBase [workflows]=\"startWorkflowModel.data.workflows\"\r\n            [defaultWorkflow]=\"startWorkflowModel.data.defaultWorkflow\"\r\n            (onCancel)=\"startWorkflowModel.showEditForm = false\" (onSaved)=\"handleStartWorkflowFromDialog($event)\">\r\n        </start-workflow>\r\n    </div>\r\n</tn-dialog>\r\n<tn-dialog *ngIf=\"congViecModel.showEditForm\" #dialog [styleClass]=\"'congviec-form tn-form-dialog'\"\r\n    [header]=\"congViecModel.header | translate\" [popupSize]=\"congViecModel.popupSize\"\r\n    (onHide)=\"congViecModel.showEditForm = false\">\r\n    <base-congviec-form #formBase [parentSetting]=\"congViecModel.data.congViecSetting\"\r\n        [model]=\"congViecModel.data.model\" (onSaved)=\"congViecModel.showEditForm = false;getData()\"\r\n        (onCancel)=\"congViecModel.showEditForm = false\">\r\n    </base-congviec-form>\r\n</tn-dialog>\r\n<tn-dialog *ngIf=\"shareLinkModel.showEditForm\" #dialog [styleClass]=\"'congviec-form tn-form-dialog'\"\r\n    [header]=\"shareLinkModel.header | translate\" [popupSize]=\"shareLinkModel.popupSize\" [useDefaultScrollBar]=\"true\"\r\n    (onHide)=\"shareLinkModel.showEditForm = false\">\r\n    <share-link-by-permission #formBase [setting]=\"setting\" [lstItem]=\"shareLinkModel.data.lstItem\"\r\n        (onCancel)=\"congViecModel.showEditForm = false\">\r\n    </share-link-by-permission>\r\n</tn-dialog>\r\n<tn-dialog *ngIf=\"attachedTaskModel.showEditForm\" [header]=\"attachedTaskModel.header | translate\"\r\n    [popupSize]=\"attachedTaskModel.popupSize\" [useDefaultScrollBar]=\"true\"\r\n    (onHide)=\"attachedTaskModel.showEditForm = false\">\r\n    <base-congviec [serviceCode]=\"setting.baseService.serviceCode\" [entity]=\"setting.baseService.entityName\"\r\n        [itemIdAttach]=\"rowDataCurrent.id\"></base-congviec>\r\n</tn-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=\"colgroup\" pTemplate=\"colgroup\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"colgroup; context: {$implicit: columns}\"></ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"!colgroup\" pTemplate=\"colgroup\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"baseColgroup; context: {$implicit: columns}\">\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=\"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: {$implicit: 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    </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=\"colgroup\" pTemplate=\"colgroup\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"colgroup; context: {$implicit: columns}\"></ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"!colgroup\" pTemplate=\"colgroup\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"baseColgroup; context: {$implicit: columns}\">\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=\"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                                <div 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                                </div>\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    </p-table>\r\n    <after-view-checked></after-view-checked>\r\n</ng-template>\r\n<ng-template #baseColgroup let-columns>\r\n    <colgroup>\r\n        <col *ngIf=\"!setting.hiddenCheckbox\" [style.width]=\"widthCheckbox\" />\r\n        <col *ngIf=\"!setting.hiddenOrderColumn\" [style.width]=\"widthOrderColumn\" />\r\n        <col *ngIf=\"rowExpansion\" style=\"width: 2.5rem\" />\r\n        <ng-container *ngFor=\"let col of columns; let i = index\">\r\n            <col *ngIf=\"col && col.visible && col.field!='function'\" [style.width]=\"col.width\" />\r\n        </ng-container>\r\n        <col *ngIf=\"enableReorderRow\" style=\"width: 30px\" />\r\n        <col *ngIf=\"!setting.hiddenFunctionColumn\" [style.width]=\"widthFunctionColumn || _widthFunctionColumn\" />\r\n    </colgroup>\r\n</ng-template>\r\n<ng-template #buttonAdd>\r\n    <span [appAuthorize]=\"serviceCode\" [permission]=\"authorizePaths[commonConst.ADD]\"\r\n        [enableAuthorize]=\"buttonApplyAuthorize[commonConst.ADD]\">\r\n        <button type=\"button\" pButton pRipple label=\"Th\u00EAm m\u1EDBi\" icon=\"pi pi-plus\" class=\"p-button-text\"\r\n            [disabled]=\"!model.baseReady\" (click)=\"add()\"></button>\r\n    </span>\r\n</ng-template>\r\n<ng-template #buttonExport>\r\n    <button *ngIf=\"model.selectedItems.length > 0\" [appAuthorize]=\"serviceCode\"\r\n        [permission]=\"authorizePaths[commonConst.EXPORT_EXCEL]\"\r\n        [enableAuthorize]=\"buttonApplyAuthorize[commonConst.EXPORT_EXCEL]\" 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</ng-template>\r\n<ng-template #buttonDelete>\r\n    <button *ngIf=\"!hiddenDelete && model.selectedItems.length > 0 && !disableMultipleDelete()\"\r\n        [appAuthorize]=\"serviceCode\" [permission]=\"authorizePaths[commonConst.DELETE_MULTIPLE]\"\r\n        [enableAuthorize]=\"buttonApplyAuthorize[commonConst.DELETE_MULTIPLE]\" type=\"button\" pButton pRipple\r\n        [label]=\"'X\u00F3a ' + (model.selectedItems.length) | translate\" icon=\"pi pi-trash\"\r\n        class=\"p-button-text p-button-danger\" (click)=\"deleteMutiple()\"></button>\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 class=\"chkbox link-or-action cell-checkbox\" [class.sticky]=\"setting.stickyColumn\">\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\" class=\"stt nopad center\" [class.sticky]=\"setting.stickyColumn\"\r\n            (dblclick)=\"reload()\">\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                [tnSortableColumnDisabled]=\"!col.sort\">\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\" [class.sticky]=\"setting.stickyColumn\"\r\n            [class.tricheckbox-custom-false]=\"checkedAll === false\">\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\" [class.sticky]=\"setting.stickyColumn\">\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\"\r\n                                [ngTemplateOutletContext]=\"{col: col, control: filterSchema.dateRange}\">\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, control: filterSchema.dateTimeRange}\">\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=\"'intWithoutMask'\">\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=\"'currency'\">\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, control: filterSchema.dateRange}\">\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, control: filterSchema.dateTimeRange}\">\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            [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                [disabled]=\"!checkPermissionToUseButton(BUTTON_PHAN_QUYEN)\" (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                [disabled]=\"!checkPermissionToUseButton(BUTTON_CAU_HINH_QUY_TRINH)\"\r\n                (click)=\"showSettingsWorkflowNew()\"></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\" [class.sticky]=\"setting.stickyColumn\">\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 *ngIf=\"!rowData.template\" [tnReorderableRow]=\"index\" [attr.rowIndex]=\"index\" [ngClass]=\"rowData.objStyleClass\"\r\n        [class.ui-state-highlight]=\"rowData._checked\" [pTooltip]=\"rowData.tooltip\" tooltipPosition=\"top\"\r\n        [tooltipStyleClass]=\"rowData.tooltipClass\" [escape]=\"escape\" (click)=\"eventSelectRow($event, rowData)\">\r\n        <ng-container *ngIf=\"!setting.hiddenCheckbox && !rowData.hidden[fieldCheckbox]\">\r\n            <td class=\"chkbox link-or-action cell-checkbox\" [class.sticky]=\"setting.stickyColumn\"\r\n                [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldCheckbox]\"\r\n                [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldCheckbox]\">\r\n                <ng-container *ngIf=\"!rowData.hiddenCheckBox\">\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>\r\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n            </td>\r\n        </ng-container>\r\n        <td *ngIf=\"!setting.hiddenOrderColumn && !rowData.hidden[fieldOrder]\" class=\"stt\" style=\"text-align: center;\"\r\n            [class.sticky]=\"setting.stickyColumn\" [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldOrder]\"\r\n            [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldOrder]\">\r\n            <span class=\"row-card\" [ngStyle]=\"rowData.bookmarkStyle\"></span>\r\n            {{rowData[fieldOrder]}}\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </td>\r\n        <td *ngIf=\"rowExpansion && !rowData.hidden[fieldColExpand]\" class=\"no-padding center row-expansion-toggle\"\r\n            [class.sticky]=\"setting.stickyColumn\" [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldColExpand]\"\r\n            [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldColExpand]\">\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 && !rowData.hidden[fieldColReorder]\" class=\"no-padding center\"\r\n            [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldColReorder]\"\r\n            [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldColReorder]\">\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 && !rowData.hidden[fieldFunction]\">\r\n            <td class=\"text-center column-function\" style=\"text-align: center;\" [class.sticky]=\"setting.stickyColumn\"\r\n                [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldFunction]\"\r\n                [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldFunction]\">\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=\"pi pi-calendar\"\r\n                        class=\"p-button-rounded p-button-text p-button-success link-or-action\"\r\n                        pTooltip=\"Xem l\u1ECBch s\u1EED phi\u00EAn b\u1EA3n\" tooltipPosition=\"top\"\r\n                        (click)=\"showListVersion(rowData)\"></button>\r\n                    <button *ngIf=\"!rowData.hiddenEdit\" [appAuthorize]=\"serviceCode\"\r\n                        [permission]=\"authorizePaths[commonConst.EDIT]\"\r\n                        [enableAuthorize]=\"buttonApplyAuthorize[commonConst.EDIT]\" type=\"button\" pButton pRipple\r\n                        [disabled]=\"disableEdit(rowData)\" [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\" [appAuthorize]=\"serviceCode\"\r\n                        [permission]=\"authorizePaths[commonConst.DELETE]\"\r\n                        [enableAuthorize]=\"buttonApplyAuthorize[commonConst.DELETE]\" type=\"button\" pButton pRipple\r\n                        [disabled]=\"disableDelete(rowData)\" [pTooltip]=\"'FORM.DELETE' | translate\" tooltipPosition=\"top\"\r\n                        class=\"p-button-rounded p-button-text p-button-danger link-or-action\" icon=\"pi pi-trash\"\r\n                        (click)=\"delete(rowData)\"></button>\r\n                    <button *ngIf=\"showMenuButtons && menuButtons\" type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\r\n                        class=\"link-or-action p-button-text p-button-info p-button-rounded\" pTooltip=\"Ch\u1EE9c n\u0103ng kh\u00E1c\"\r\n                        tooltipPosition=\"top\" (click)=\"showContextMenu($event, rowData)\"></button>\r\n                    <ng-container [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"\r\n                        [ngTemplateOutlet]=\"getTemplate('buttonAfter')\"></ng-container>\r\n                </div>\r\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n            </td>\r\n        </ng-container>\r\n    </tr>\r\n    <ng-container *ngIf=\"rowData.template\">\r\n        <ng-container *ngTemplateOutlet=\"rowData.template; context: {\r\n            $implicit: rowData, columns: columns, index: index, expanded: expanded, eventSelectRow: eventSelectRow, eventChecked: eventChecked\r\n        }\"></ng-container>\r\n    </ng-container>\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[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                {{rowData[field] | tnDate:col.dataType: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                {{rowData[field] | tnDate:col.dataType: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] | number}}\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=\"'decimal'\">\r\n                {{rowData[field] | number}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'boolean'\">\r\n                <p-checkbox class=\"boolean-data-type\" [(ngModel)]=\"rowData[field]\" binary=\"true\"\r\n                    [disabled]=\"col.disableCheckBox\">\r\n                </p-checkbox>\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 *ngIf=\"setting.columnSetting.showGroupSize\">\r\n        ({{rowGroupMetadata[rowData[_groupField]].size}})</span>\r\n</ng-template>\r\n<ng-template #trangThaiV5 let-rowData=\"rowData\">\r\n    <div class=\"container-text-workflow\">\r\n        <button *ngIf=\"!rowData.__workflowCode && !rowData.hiddenWorkflowAction && !rowData.hiddenStartWorkflow\" pButton\r\n            class=\"p-button-text link-or-action\" label=\"B\u1EAFt \u0111\u1EA7u\" style=\"border: 1px solid #7ca9cd;\"\r\n            pTooltip=\"B\u1EAFt \u0111\u1EA7u ch\u1EA1y quy tr\u00ECnh\" tooltipPosition=\"top\"\r\n            [disabled]=\"rowData.__startingWorkflow && !rowData.__notReadyForStart\"\r\n            (click)=\"showFormStartWorkflow(rowData)\"></button>\r\n        <ng-container *ngIf=\"rowData.__workflowCode\">\r\n            <span class=\"content\">{{rowData.__textTrangThai}}</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                [disabled]=\"showingActionWorkflow\" (click)=\"showActionWorkflow($event, rowData)\"></button>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #viewHistory let-rowData=\"rowData\">\r\n    <button pButton icon=\"pi pi-calendar\" class=\"p-button-text p-button-rounded link-or-action\" pTooltip=\"Xem l\u1ECBch s\u1EED\"\r\n        tooltipPosition=\"top\" (click)=\"viewHistoryWorkflow(setting, rowData)\"></button>\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\" let-control=\"control\">\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]=\"control\" (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 *ngIf=\"!col.minimizeFilter\"\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        <ng-container *ngIf=\"col.minimizeFilter\">\r\n            <button *ngIf=\"!filterData[col.field]\" type=\"button\" pButton icon=\"pi pi-filter-slash\"\r\n                class=\"btn-filter-boolean\" (click)=\"showCheckBoxFilterMenu($event, col.field)\"></button>\r\n            <button *ngIf=\"filterData[col.field]\" type=\"button\" pButton icon=\"pi pi-filter\"\r\n                class=\"btn-filter-boolean p-button-primary\"\r\n                (click)=\"showCheckBoxFilterMenu($event, col.field)\"></button>\r\n        </ng-container>\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.mode == FileUploadMode.usingFileInstanceId\"\r\n        [sharedFolderType]=\"fileSetting.control.sharedFolderType\" [readonly]=\"fileSetting.control.readonly\"\r\n        [accept]=\"fileSetting.control.accept\" [(ngModel)]=\"rowData[field]\">\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        [fileDataService]=\"fileSetting.control.fileDataService\" [(ngModel)]=\"rowData.field\">\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        [inTaiLieu]=\"fileSetting.control.inTaiLieu\" [(value)]=\"rowData[field]\">\r\n    </file-manager>\r\n</ng-template>",
                     providers: [i4$1.DecimalPipe, i4$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{min-width:100px;padding:0}.custom-search-area{background-color:#f2f2f2;margin:-.5em -1em .5em;padding-left:.5em;padding-right:.5em}.main-title>h1{font-size:1.2em}.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;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}.col-share-permission>div:not(:last-child){margin-bottom:5px}.advance-search-container{display:flex;justify-content:flex-end}.btn-filter-boolean{height:26px;width:26px}.btn-filter-boolean:not(.p-button-primary),.btn-filter-boolean:not(.p-button-primary):hover{background:#f5f6f8;border-color:#ced4da;color:#6c757d}::ng-deep crud-list advance-search{display:block;flex:1;max-width:400px}::ng-deep crud-list .ps__rail-x,::ng-deep crud-list .ps__rail-y{z-index:5}::ng-deep crud-list .main-title>*>h1{font-size:1.2em}::ng-deep crud-list .p-datatable .p-datatable-thead>tr>th.cell-fixed-filter{z-index:999}::ng-deep crud-list .p-datatable .p-datatable-thead>tr>th.cell-fixed-filter .fixed-filter{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 .custom-search-area .main-container-search-inner .container-control{overflow:hidden;padding-bottom:0}::ng-deep crud-list>p-contextmenu{display:none}@media (max-width:640px){::ng-deep crud-list .--table-responsive .p-datatable-wrapper{padding:1px}}"]
                 },] }
@@ -37104,7 +37124,7 @@
     ServiceFileUploadComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'service-file-upload',
-                    template: "<div class=\"file-upload\">\r\n    <div class=\"fl-icon\">\r\n        <i *ngIf=\"loading\" class=\"pi pi-spin pi-spinner\"></i>\r\n        <i *ngIf=\"!loading\" class=\"pi pi-file-o\"></i>\r\n    </div>\r\n\r\n    <div class=\"fl-file-name\" (click)=\"openFileViewer()\">\r\n        <div>\r\n            <ng-container *ngIf=\"!showNoti\">\r\n                <span pTooltip=\"{{selectedFileName}}\">{{selectedFileNameShort}}</span>\r\n                <span *ngIf=\"extension\">.{{extension}} </span>\r\n            </ng-container>\r\n            <span *ngIf=\"showNoti\"> {{notification}} </span>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"fl-buttons\">\r\n        <button *ngIf=\"!hasFile && !readonly\" pTooltip=\"Ch\u1ECDn file\" class=\"fl-choose\"\r\n            class=\"link-or-action p-button-text p-button-rounded fl-choose\" tooltipPosition=\"top\" pButton type=\"button\"\r\n            icon=\"pi pi-plus\" (click)=\"onOpenSelect()\"></button>\r\n\r\n        <button *ngIf=\"hasFile && !readonly\" (click)=\"onRemoveFile()\"\r\n            class=\"link-or-action p-button-text p-button-rounded p-button-danger fl-remove\" pTooltip=\"X\u00F3a file\"\r\n            tooltipPosition=\"top\" pButton type=\"button\" icon=\"pi pi-trash\"></button>\r\n\r\n        <button [disabled]=\"!menu || !menu.length\" type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\r\n            class=\"link-or-action p-button-text p-button-rounded\" pTooltip=\"Th\u00EAm\" tooltipPosition=\"top\"\r\n            (click)=\"showContextMenu($event)\"></button>\r\n    </div>\r\n\r\n    <div style=\"display: none;\">\r\n        <p-fileUpload #file [accept]=\"accept\" class=\"file-upload\" mode=\"basic\" [chooseLabel]=\"chooseLabel\" name=\"file[]\"\r\n            [maxFileSize]=\"control.maxFileSize\" pTooltip=\"Ch\u1ECDn t\u1EEB m\u00E1y t\u00EDnh\" toolStipPosition=\"top\" [multiple]=\"false\"\r\n            [invalidFileSizeMessageSummary]=\"control.invalidFileSizeMessageSummary\"\r\n            [invalidFileSizeMessageDetail]=\"control.invalidFileSizeMessageDetail\"\r\n            [invalidFileTypeMessageSummary]=\"control.invalidFileTypeMessageSummary\"\r\n            [invalidFileTypeMessageDetail]=\"control.invalidFileTypeMessageDetail\"\r\n            [invalidFileLimitMessageSummary]=\"control.invalidFileLimitMessageSummary\"\r\n            [invalidFileLimitMessageDetail]=\"control.invalidFileLimitMessageDetail\" (onSelect)=\"onSelectFile($event)\">\r\n        </p-fileUpload>\r\n    </div>\r\n\r\n</div>\r\n\r\n<p-contextMenu #contextMenu [appendTo]=\"'body'\" [model]=\"menu\" styleClass=\"fm-contextMenu-panel\">\r\n</p-contextMenu>\r\n\r\n<!-- Xem file tr\u1EF1c tuy\u1EBFn -->\r\n<file-viewer *ngIf=\"forms.fileViewer.show\" [parentModel]=\"model\" [parentContext]=\"context\" [readonly]=\"readonly\"\r\n    [model]=\"forms.fileViewer.formData\" (onClose)=\"this.forms.fileViewer.show = false;\">\r\n</file-viewer>",
+                    template: "<div class=\"file-upload\">\r\n    <div class=\"fl-icon\">\r\n        <i *ngIf=\"loading\" class=\"pi pi-spin pi-spinner\"></i>\r\n        <i *ngIf=\"!loading\" class=\"pi pi-file-o\"></i>\r\n    </div>\r\n\r\n    <div class=\"fl-file-name\" (click)=\"openFileViewer()\">\r\n        <div>\r\n            <ng-container *ngIf=\"!showNoti\">\r\n                <span pTooltip=\"{{selectedFileName}}\">{{selectedFileNameShort}}</span>\r\n                <span *ngIf=\"extension\">.{{extension}} </span>\r\n            </ng-container>\r\n            <span *ngIf=\"showNoti\"> {{notification}} </span>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"fl-buttons\">\r\n        <button *ngIf=\"!hasFile && !readonly\" pTooltip=\"Ch\u1ECDn file\" class=\"fl-choose\"\r\n            class=\"link-or-action p-button-text p-button-rounded fl-choose\" tooltipPosition=\"top\" pButton type=\"button\"\r\n            icon=\"pi pi-plus\" (click)=\"onOpenSelect()\"></button>\r\n\r\n        <button *ngIf=\"hasFile && !readonly\" (click)=\"onRemoveFile()\"\r\n            class=\"link-or-action p-button-text p-button-rounded p-button-danger fl-remove\" pTooltip=\"X\u00F3a file\"\r\n            tooltipPosition=\"top\" pButton type=\"button\" icon=\"pi pi-trash\"></button>\r\n\r\n        <button [disabled]=\"!menu || !menu.length\" type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\r\n            class=\"link-or-action p-button-text p-button-rounded\" pTooltip=\"Th\u00EAm\" tooltipPosition=\"top\"\r\n            (click)=\"showContextMenu($event)\"></button>\r\n    </div>\r\n\r\n    <div style=\"display: none;\">\r\n        <p-fileUpload #file [accept]=\"accept\" class=\"file-upload\" mode=\"basic\" [chooseLabel]=\"chooseLabel\" name=\"file[]\"\r\n            [maxFileSize]=\"control.maxFileSize\" pTooltip=\"Ch\u1ECDn t\u1EEB m\u00E1y t\u00EDnh\" toolStipPosition=\"top\" [multiple]=\"false\"\r\n            [invalidFileSizeMessageSummary]=\"control.invalidFileSizeMessageSummary\"\r\n            [invalidFileSizeMessageDetail]=\"control.invalidFileSizeMessageDetail\"\r\n            [invalidFileTypeMessageSummary]=\"control.invalidFileTypeMessageSummary\"\r\n            [invalidFileTypeMessageDetail]=\"control.invalidFileTypeMessageDetail\"\r\n            [invalidFileLimitMessageSummary]=\"control.invalidFileLimitMessageSummary\"\r\n            [invalidFileLimitMessageDetail]=\"control.invalidFileLimitMessageDetail\" (onSelect)=\"onSelectFile($event)\">\r\n        </p-fileUpload>\r\n    </div>\r\n\r\n</div>\r\n\r\n<p-contextMenu #contextMenu [appendTo]=\"'body'\" [model]=\"menu\" styleClass=\"fm-contextMenu-panel\">\r\n</p-contextMenu>\r\n\r\n<!-- Xem file tr\u1EF1c tuy\u1EBFn -->\r\n<file-viewer #fileViewerNew *ngIf=\"forms.fileViewer.show\" [parentModel]=\"model\" [parentContext]=\"context\"\r\n    [readonly]=\"readonly\" [model]=\"forms.fileViewer.formData\" (onClose)=\"this.forms.fileViewer.show = false;\">\r\n</file-viewer>",
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,
@@ -46349,12 +46369,12 @@
             // đổi ngược title và owner theo application.json
             return this.environment.appMetadata.main.reverseTopbarTitle == null || this.environment.appMetadata.main.reverseTopbarTitle == false
                 ? this.environment.appMetadata.main.owner
-                : this.environment.appMetadata.main.title;
+                : this.environment.appMetadata.main.titleShort;
         };
         AppTopBarV1Component.prototype.getTitle = function () {
             // đổi ngược title và owner theo application.json
             return this.environment.appMetadata.main.reverseTopbarTitle == null || this.environment.appMetadata.main.reverseTopbarTitle == false
-                ? this.environment.appMetadata.main.title
+                ? this.environment.appMetadata.main.titleShort
                 : this.environment.appMetadata.main.owner;
         };
         AppTopBarV1Component.prototype.reloadWindow = function () {
@@ -46365,7 +46385,7 @@
     AppTopBarV1Component.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-topbar-v1',
-                    template: "<div class=\"topbar clearfix tn-l-top-bar\">\r\n    <div class=\"topbar-left tn-l-top-bar-left\" [ngClass]=\"{'beta-version': !environment.isProduction }\">\r\n        <div class=\"tn-l-left-menu-toggle-block\">\r\n            <a tabindex=\"1\" id=\"menu-button\" class=\"tn-l-left-menu-toggle\" href=\"#\"\r\n                (click)=\"_commonService.onMenuButtonClick($event)\">\r\n                <i class=\"pi pi-chevron-left\"></i>\r\n            </a>\r\n        </div>\r\n\r\n        <div class=\"topbar-logo tn-l-logo-wrapper\">\r\n            <a tabindex=\"2\" href=\"javascript:\" style=\"display: inline-block;\">\r\n                <img class=\"topbar-logo tn-l-logo\" [src]=\"environment.appMetadata.main.logo\" (click)=\"goToHome()\" /></a>\r\n        </div>\r\n        <div class=\"topbar-title tn-l-logo-title-block\">\r\n            <div class=\"topbar-owner\">\r\n                {{getOwner()}}\r\n            </div>\r\n            <div class=\"topbar-description\">\r\n                {{getTitle()}}\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"setting-default-container\">\r\n        <ng-container *ngIf=\"showDefaultSetting && currentUser\">\r\n            <a tabindex=\"3\" href=\"javascript:void(0)\" class=\"tn-l-m-default-setting pi pi-cog\"\r\n                (click)=\"settingDefault()\">\r\n            </a>\r\n            <h3 class=\"tn-l-default-detting\" (click)=\"settingDefault()\">\r\n                {{defaultDataSetting}} <i class=\"pi pi-pencil\" style=\"margin-left:10px\"></i></h3>\r\n        </ng-container>\r\n    </div>\r\n    <div #notify class=\"notify-message\">\r\n        <marquee (mouseover)=\"handleMouseOver($event)\" (mouseout)=\"handleMouseOut($event)\">{{message}}</marquee>\r\n    </div>\r\n    <div class=\"topbar-right tn-l-top-bar-right\" [ngClass]=\"{'beta-version': !environment.isProduction}\"\r\n        oncontextmenu=\"return false\">\r\n        <div class=\"tn-l-top-bar-right-block-1\">\r\n            <a tabindex=\"4\" class=\"topbar-menu-button\" id=\"topbar-menu-button\" href=\"#\"\r\n                (click)=\"_commonService.onTopbarMenuButtonClick($event)\">\r\n                <svg focusable=\"false\" class=\"tn-m-topbar-menu-toggle\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                    viewBox=\"0 0 448 512\">\r\n                    <path fill=\"currentColor\"\r\n                        d=\"M0 224h192V32H0v192zm256-192v192h192V32H256zM0 480h192V288H0v192zm256-192v192h192V288H256z\">\r\n                    </path>\r\n                </svg>\r\n                <span *ngIf=\"messages && messages.totalUnRead > 0\" class=\"topbar-badge animated rubberBand\"\r\n                    [ngClass]=\"{'topbar-badge-bounce': messages.bounceNoti}\">{{messages.totalUnRead}}</span>\r\n            </a>\r\n        </div>\r\n\r\n        <div class=\"tn-l-top-bar-right-block-2\">\r\n            <ul class=\"topbar-items fadeInDown\" [ngClass]=\"{'topbar-items-visible': _commonService.topbarMenuActive}\">\r\n                <li *ngIf=\"_commonService.profileMode==='top'||_commonService.isHorizontal()\" #profile\r\n                    class=\"profile-item tn-l-top-bar-menu-item\"\r\n                    [ngClass]=\"{'active-top-menu':_commonService.activeTopbarItem === profile}\">\r\n\r\n                    <a href=\"#\" tabindex=\"10\" class=\"UserPane tn-l-top-bar-menu-item-inner\"\r\n                        (click)=\"_commonService.onTopbarItemClick($event,profile)\">\r\n                        <div class=\"profile-image-wrapper topbar-icon-left\">\r\n                            <img class=\"profile-image tn-l-profile-img\" [src-fallback]=\"defaultAvatar\"\r\n                                [src]=\"getCurrentUserAvatar()\" />\r\n                        </div>\r\n                        <div class=\"profile-info-wrapper\">\r\n                            <div class=\"topbar-item-name-wrapper\"\r\n                                [ngClass]=\"{'not-show-position': !getCurrentUserPosition()}\">\r\n                                <span class=\"topbar-item-name tn-l-user-name\">{{getCurrentUserFullName()}}</span>\r\n                            </div>\r\n                            <div class=\"topbar-item-role-wrapper tn-l-topbar-item-role-wrapper\"><span\r\n                                    class=\"topbar-item-role\">{{getCurrentUserPosition()}}</span></div>\r\n                        </div>\r\n                        <i class=\"pi pi-user\" style=\"opacity: 0; position: absolute;\"></i>\r\n                    </a>\r\n\r\n                    <ul class=\"layout-menu fadeInDown tn-l-switcher\">\r\n                        <ng-container *ngIf=\"currentUser\">\r\n                            <li role=\"menuitem\">\r\n                                <a href=\"#\" (click)=\"onEditInfo($event)\">\r\n                                    <i class=\"pi pi-inbox\"></i>\r\n                                    <span>Th\u01B0 m\u1EE5c c\u00E1 nh\u00E2n</span>\r\n                                </a>\r\n                            </li>\r\n                            <li role=\"menuitem\">\r\n                                <a href=\"#\" (click)=\"onEditInfo($event, UserRedirectType.PERSONAL_INFO)\">\r\n                                    <i class=\"pi pi-user-edit\"></i>\r\n                                    <span>C\u1EADp nh\u1EADt th\u00F4ng tin</span>\r\n                                </a>\r\n                            </li>\r\n                            <li role=\"menuitem\">\r\n                                <a href=\"javascript:;\" (click)=\"onTopbarLogout()\">\r\n                                    <i class=\"pi pi-sign-out\"></i>\r\n                                    <span>\u0110\u0103ng xu\u1EA5t</span>\r\n                                </a>\r\n                            </li>\r\n                        </ng-container>\r\n                        <li *ngIf=\"!currentUser\" role=\"menuitem\">\r\n                            <a href=\"javascript:;\" (click)=\"login()\">\r\n                                <i class=\"pi pi-sign-in\"></i>\r\n                                <span>\u0110\u0103ng nh\u1EADp</span>\r\n                            </a>\r\n                        </li>\r\n                    </ul>\r\n                </li>\r\n                <li *ngIf=\"_customizeUiService.isShowHelp()\" #help class=\"menu-help tn-l-top-bar-menu-item\" tn-app-help>\r\n                </li>\r\n                <li *ngIf=\"_customizeUiService.isShowNotification()\" id=\"li-notifications\"\r\n                    class=\"tn-l-top-bar-menu-item\" #messages\r\n                    [ngClass]=\"{'active-top-menu':_commonService.activeTopbarItem === messages || _commonService.activeTopbarItem === 0}\"\r\n                    tn-app-notification (openMenu)=\"_commonService.onTopbarItemClick($event,messages)\"></li>\r\n                <li id=\"li-app-switcher\" class=\"tn-l-top-bar-menu-item\" #modules\r\n                    [ngClass]=\"{'active-top-menu':_commonService.activeTopbarItem === modules || _commonService.activeTopbarItem === 1}\">\r\n                    <a href=\"#\" tabindex=\"7\" class=\"tn-l-top-bar-menu-item-inner\" style=\"height: 30px;\"\r\n                        pTooltip=\"Danh s\u00E1ch ph\u00E2n h\u1EC7\" tooltipPosition=\"bottom\"\r\n                        (click)=\"_commonService.onTopbarItemClick($event,modules)\">\r\n                        <span class=\"topbar-icon-left tn-l-topbar-icon-left\">\r\n                            <svg focusable=\"false\" class=\"topbar-icon animated swing svgmodule\" role=\"img\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\">\r\n                                <path fill=\"currentColor\"\r\n                                    d=\"M0 224h192V32H0v192zm256-192v192h192V32H256zM0 480h192V288H0v192zm256-192v192h192V288H256z\">\r\n                                </path>\r\n                            </svg>\r\n                            <!-- <i class=\"pi pi-microsoft\"></i> -->\r\n                        </span>\r\n                        <span class=\"topbar-item-name\">{{ 'Danh s\u00E1ch ph\u00E2n h\u1EC7' | translate}}</span>\r\n                    </a>\r\n                    <ul class=\"app-switcher layout-menu fadeInDown\">\r\n                        <tn-custom-scrollbar #scrollbar class=\"app-switcher-holder\">\r\n                            <li role=\"menuitem\" class=\"wrapper-appswitch\">\r\n                                <ng-container *ngFor=\"let item of appSwitcherItems; let ind = index;\">\r\n                                    <a class=\"switcher-item tn-l-switcher-item\" href=\"javascript:\"\r\n                                        (click)=\"switchApp(item)\">\r\n                                        <span class=\"tn-l-switcher-item-inner\">\r\n                                            <i class=\"{{item.icon}} app-switcher-item-icon tn-l-switcher-item-icon\"></i>\r\n                                            <div class=\"tn-l-switcher-item-label\">\r\n                                                {{ item.title | translate}}\r\n                                            </div>\r\n                                        </span>\r\n                                    </a>\r\n                                </ng-container>\r\n                            </li>\r\n                        </tn-custom-scrollbar>\r\n                    </ul>\r\n                </li>\r\n            </ul>\r\n        </div>\r\n    </div>\r\n</div>",
+                    template: "<div class=\"topbar clearfix tn-l-top-bar\">\r\n    <div class=\"topbar-left tn-l-top-bar-left\" [ngClass]=\"{'beta-version': !environment.isProduction }\">\r\n        <div class=\"tn-l-left-menu-toggle-block\">\r\n            <a tabindex=\"1\" id=\"menu-button\" class=\"tn-l-left-menu-toggle\" href=\"#\"\r\n                (click)=\"_commonService.onMenuButtonClick($event)\">\r\n                <i class=\"pi pi-chevron-left\"></i>\r\n            </a>\r\n        </div>\r\n\r\n        <div class=\"topbar-logo tn-l-logo-wrapper\">\r\n            <a tabindex=\"2\" href=\"javascript:\" style=\"display: inline-block;\">\r\n                <img class=\"topbar-logo tn-l-logo\" [src]=\"environment.appMetadata.main.logo\" (click)=\"goToHome()\" /></a>\r\n        </div>\r\n        <div class=\"topbar-title tn-l-logo-title-block\">\r\n            <div class=\"topbar-owner\">\r\n                {{getTitle()}}\r\n            </div>\r\n            <div class=\"topbar-description\">\r\n                {{getOwner()}}\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"setting-default-container\">\r\n        <ng-container *ngIf=\"showDefaultSetting && currentUser\">\r\n            <a tabindex=\"3\" href=\"javascript:void(0)\" class=\"tn-l-m-default-setting pi pi-cog\"\r\n                (click)=\"settingDefault()\">\r\n            </a>\r\n            <h3 class=\"tn-l-default-detting\" (click)=\"settingDefault()\">\r\n                {{defaultDataSetting}} <i class=\"pi pi-pencil\" style=\"margin-left:10px\"></i></h3>\r\n        </ng-container>\r\n    </div>\r\n    <div #notify class=\"notify-message\">\r\n        <marquee (mouseover)=\"handleMouseOver($event)\" (mouseout)=\"handleMouseOut($event)\">{{message}}</marquee>\r\n    </div>\r\n    <div class=\"topbar-right tn-l-top-bar-right\" [ngClass]=\"{'beta-version': !environment.isProduction}\"\r\n        oncontextmenu=\"return false\">\r\n        <div class=\"tn-l-top-bar-right-block-1\">\r\n            <a tabindex=\"4\" class=\"topbar-menu-button\" id=\"topbar-menu-button\" href=\"#\"\r\n                (click)=\"_commonService.onTopbarMenuButtonClick($event)\">\r\n                <svg focusable=\"false\" class=\"tn-m-topbar-menu-toggle\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                    viewBox=\"0 0 448 512\">\r\n                    <path fill=\"currentColor\"\r\n                        d=\"M0 224h192V32H0v192zm256-192v192h192V32H256zM0 480h192V288H0v192zm256-192v192h192V288H256z\">\r\n                    </path>\r\n                </svg>\r\n                <span *ngIf=\"messages && messages.totalUnRead > 0\" class=\"topbar-badge animated rubberBand\"\r\n                    [ngClass]=\"{'topbar-badge-bounce': messages.bounceNoti}\">{{messages.totalUnRead}}</span>\r\n            </a>\r\n        </div>\r\n\r\n        <div class=\"tn-l-top-bar-right-block-2\">\r\n            <ul class=\"topbar-items fadeInDown\" [ngClass]=\"{'topbar-items-visible': _commonService.topbarMenuActive}\">\r\n                <li *ngIf=\"_commonService.profileMode==='top'||_commonService.isHorizontal()\" #profile\r\n                    class=\"profile-item tn-l-top-bar-menu-item\"\r\n                    [ngClass]=\"{'active-top-menu':_commonService.activeTopbarItem === profile}\">\r\n\r\n                    <a href=\"#\" tabindex=\"10\" class=\"UserPane tn-l-top-bar-menu-item-inner\"\r\n                        (click)=\"_commonService.onTopbarItemClick($event,profile)\">\r\n                        <div class=\"profile-image-wrapper topbar-icon-left\">\r\n                            <img class=\"profile-image tn-l-profile-img\" [src-fallback]=\"defaultAvatar\"\r\n                                [src]=\"getCurrentUserAvatar()\" />\r\n                        </div>\r\n                        <div class=\"profile-info-wrapper\">\r\n                            <div class=\"topbar-item-name-wrapper\"\r\n                                [ngClass]=\"{'not-show-position': !getCurrentUserPosition()}\">\r\n                                <span class=\"topbar-item-name tn-l-user-name\">{{getCurrentUserFullName()}}</span>\r\n                            </div>\r\n                            <div class=\"topbar-item-role-wrapper tn-l-topbar-item-role-wrapper\"><span\r\n                                    class=\"topbar-item-role\">{{getCurrentUserPosition()}}</span></div>\r\n                        </div>\r\n                        <i class=\"pi pi-user\" style=\"opacity: 0; position: absolute;\"></i>\r\n                    </a>\r\n\r\n                    <ul class=\"layout-menu fadeInDown tn-l-switcher\">\r\n                        <ng-container *ngIf=\"currentUser\">\r\n                            <li role=\"menuitem\">\r\n                                <a href=\"#\" (click)=\"onEditInfo($event)\">\r\n                                    <i class=\"pi pi-inbox\"></i>\r\n                                    <span>Th\u01B0 m\u1EE5c c\u00E1 nh\u00E2n</span>\r\n                                </a>\r\n                            </li>\r\n                            <li role=\"menuitem\">\r\n                                <a href=\"#\" (click)=\"onEditInfo($event, UserRedirectType.PERSONAL_INFO)\">\r\n                                    <i class=\"pi pi-user-edit\"></i>\r\n                                    <span>C\u1EADp nh\u1EADt th\u00F4ng tin</span>\r\n                                </a>\r\n                            </li>\r\n                            <li role=\"menuitem\">\r\n                                <a href=\"javascript:;\" (click)=\"onTopbarLogout()\">\r\n                                    <i class=\"pi pi-sign-out\"></i>\r\n                                    <span>\u0110\u0103ng xu\u1EA5t</span>\r\n                                </a>\r\n                            </li>\r\n                        </ng-container>\r\n                        <li *ngIf=\"!currentUser\" role=\"menuitem\">\r\n                            <a href=\"javascript:;\" (click)=\"login()\">\r\n                                <i class=\"pi pi-sign-in\"></i>\r\n                                <span>\u0110\u0103ng nh\u1EADp</span>\r\n                            </a>\r\n                        </li>\r\n                    </ul>\r\n                </li>\r\n                <li *ngIf=\"_customizeUiService.isShowHelp()\" #help class=\"menu-help tn-l-top-bar-menu-item\" tn-app-help>\r\n                </li>\r\n                <li *ngIf=\"_customizeUiService.isShowNotification()\" id=\"li-notifications\"\r\n                    class=\"tn-l-top-bar-menu-item\" #messages\r\n                    [ngClass]=\"{'active-top-menu':_commonService.activeTopbarItem === messages || _commonService.activeTopbarItem === 0}\"\r\n                    tn-app-notification (openMenu)=\"_commonService.onTopbarItemClick($event,messages)\"></li>\r\n                <li id=\"li-app-switcher\" class=\"tn-l-top-bar-menu-item\" #modules\r\n                    [ngClass]=\"{'active-top-menu':_commonService.activeTopbarItem === modules || _commonService.activeTopbarItem === 1}\">\r\n                    <a href=\"#\" tabindex=\"7\" class=\"tn-l-top-bar-menu-item-inner\" style=\"height: 30px;\"\r\n                        pTooltip=\"Danh s\u00E1ch ph\u00E2n h\u1EC7\" tooltipPosition=\"bottom\"\r\n                        (click)=\"_commonService.onTopbarItemClick($event,modules)\">\r\n                        <span class=\"topbar-icon-left tn-l-topbar-icon-left\">\r\n                            <svg focusable=\"false\" class=\"topbar-icon animated swing svgmodule\" role=\"img\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\">\r\n                                <path fill=\"currentColor\"\r\n                                    d=\"M0 224h192V32H0v192zm256-192v192h192V32H256zM0 480h192V288H0v192zm256-192v192h192V288H256z\">\r\n                                </path>\r\n                            </svg>\r\n                            <!-- <i class=\"pi pi-microsoft\"></i> -->\r\n                        </span>\r\n                        <span class=\"topbar-item-name\">{{ 'Danh s\u00E1ch ph\u00E2n h\u1EC7' | translate}}</span>\r\n                    </a>\r\n                    <ul class=\"app-switcher layout-menu fadeInDown\">\r\n                        <tn-custom-scrollbar #scrollbar class=\"app-switcher-holder\">\r\n                            <li role=\"menuitem\" class=\"wrapper-appswitch\">\r\n                                <ng-container *ngFor=\"let item of appSwitcherItems; let ind = index;\">\r\n                                    <a class=\"switcher-item tn-l-switcher-item\" href=\"javascript:\"\r\n                                        (click)=\"switchApp(item)\">\r\n                                        <span class=\"tn-l-switcher-item-inner\">\r\n                                            <i class=\"{{item.icon}} app-switcher-item-icon tn-l-switcher-item-icon\"></i>\r\n                                            <div class=\"tn-l-switcher-item-label\">\r\n                                                {{ item.title | translate}}\r\n                                            </div>\r\n                                        </span>\r\n                                    </a>\r\n                                </ng-container>\r\n                            </li>\r\n                        </tn-custom-scrollbar>\r\n                    </ul>\r\n                </li>\r\n            </ul>\r\n        </div>\r\n    </div>\r\n</div>",
                     providers: [ComponentContextService],
                     styles: [".topBarSearchButton:disabled{background-color:#eee!important;border:1px solid #c8c8c8!important;border-right:none!important;color:#c1c1c1!important;opacity:1}::ng-deep app-topbar a{outline:none}input:disabled::-moz-placeholder{color:#b1b1b1}input:disabled::placeholder{color:#b1b1b1}.UserPane.UserPane{display:flex}.profile-image-wrapper{order:1}.tn-l-user-name.tn-l-user-name.tn-l-user-name.tn-l-user-name.tn-l-user-name{float:none;margin-top:0}.profile-info-wrapper.profile-info-wrapper.profile-info-wrapper.profile-info-wrapper{display:inline-flex;flex-direction:column;float:none;justify-content:center;order:0;text-align:right}.tn-l-logo{image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}.tn-l-default-detting{color:#fff;cursor:pointer;margin:0}.tn-l-left-menu-toggle-block{align-items:center;align-self:stretch;box-shadow:0 0 5px 0 rgba(0,0,0,.3764705882352941);display:flex}.tn-l-left-menu-toggle{color:#fff;padding:8px;transition:transform .25s ease-in-out}::ng-deep .layout-menu-static-inactive app-topbar .tn-l-left-menu-toggle{transform:rotate(180deg)}.tn-l-logo-title-block.tn-l-logo-title-block.tn-l-logo-title-block.tn-l-logo-title-block{margin-left:0;margin-right:30px}.topbar-logo.topbar-logo.topbar-logo{float:none}.tn-l-logo.tn-l-logo.tn-l-logo.tn-l-logo{height:40px;margin:0;width:auto}.tn-l-logo-wrapper.tn-l-logo-wrapper.tn-l-logo-wrapper.tn-l-logo-wrapper{font-size:0;height:auto;margin:0;padding-left:8px;padding-right:8px;width:auto}.tn-l-top-bar{display:flex}.topbar-description,.topbar-owner{white-space:nowrap}.topbar-owner.topbar-owner.topbar-owner.topbar-owner.topbar-owner{font-size:15px}.topbar-description.topbar-description.topbar-description.topbar-description.topbar-description{font-size:11px;text-transform:none}.tn-l-top-bar-left.tn-l-top-bar-left.tn-l-top-bar-left{display:flex;float:none;width:auto}.tn-l-top-bar-left{align-items:center}.tn-m-topbar-menu-toggle{display:block;height:28px;margin:auto;width:30px}.tn-m-topbar-menu-toggle g{stroke:#fff}.tn-m-topbar-menu-toggle path{fill:#fff}.tn-l-m-default-setting{display:none}.setting-default-container{justify-content:center}.notify-message,.setting-default-container{align-items:center;display:flex;margin-left:30px}.notify-message{flex:1 1;overflow:hidden}.notify-message>marquee{color:#ff0;font-size:500;white-space:nowrap}.search-item{margin-right:10px}.tn-l-switcher-item.tn-l-switcher-item.tn-l-switcher-item{background:#fff}.tn-l-switcher-item-label{color:#52abff;text-align:center;text-shadow:none}.tn-l-switcher-item-icon.tn-l-switcher-item-icon.tn-l-switcher-item-icon.tn-l-switcher-item-icon{color:#52abff;font-size:38px;margin:5px auto;text-shadow:none}.tn-l-switcher-item.tn-l-switcher-item.tn-l-switcher-item.tn-l-switcher-item.tn-l-switcher-item{padding:8px}.tn-l-switcher.tn-l-switcher{margin-bottom:0}::ng-deep .layout-wrapper app-topbar-v1 .layout-menu li a.switcher-item{margin-top:0;width:unset}::ng-deep .layout-wrapper app-topbar-v1 .layout-menu li a.switcher-item:nth-child(3n+0){border-left:none}::ng-deep .layout-wrapper app-topbar-v1 .layout-menu li a.switcher-item:nth-child(3n+1){border-right:none}::ng-deep .layout-wrapper app-topbar-v1 .layout-menu li a.switcher-item:nth-child(3n+2){border:none}::ng-deep .layout-wrapper app-topbar-v1 .layout-menu li a.switcher-item:nth-child(3n+1):last-child,::ng-deep .layout-wrapper app-topbar-v1 .layout-menu li a.switcher-item:nth-child(3n+2):last-child{width:unset}::ng-deep .layout-wrapper app-topbar-v1 .layout-menu li a span{line-height:1.2}::ng-deep .layout-wrapper app-topbar-v1 .topbar .topbar-left{box-shadow:none}::ng-deep .layout-wrapper app-topbar-v1 .wrapper-appswitch{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));text-align:center}@media (max-width:1024px){::ng-deep .layout-wrapper app-topbar-v1 .layout-menu li a.switcher-item{width:unset}}@media (min-width:1025px){.tn-l-top-bar-right{align-items:center;display:flex;justify-content:space-between}.tn-l-top-bar-right.tn-l-top-bar-right.tn-l-top-bar-right{padding:0 15px}.topbar-items.topbar-items.topbar-items{align-items:center;display:flex;flex-direction:row-reverse;justify-content:flex-start;margin:0}.topbar-items.topbar-items.topbar-items,.topbar-items.topbar-items.topbar-items>li{float:none}::ng-deep .topbar .topbar-items>li>a{margin-top:0}::ng-deep .topbar .topbar-items>li>a>span>i{color:#fff;font-size:24px}.topbar .topbar-items>li>a.UserPane{height:auto;line-height:inherit;top:0}a.UserPane .profile-image.profile-image.profile-image.profile-image{margin-top:0}}@media (min-width:1025px) and (max-width:1400px){.tn-l-logo-title-block.tn-l-logo-title-block.tn-l-logo-title-block.tn-l-logo-title-block{margin-right:19px}.search-item{margin-right:0}.tn-l-top-bar-right.tn-l-top-bar-right.tn-l-top-bar-right{padding-left:15px}.topbar-items>li.profile-item{margin-left:14px}}@media (max-width:1024px){.tn-l-m-default-setting{align-items:center;color:#fff;display:flex;font-size:28px;height:36px;justify-content:center;width:36px}.tn-l-default-detting{display:none}::ng-deep .layout-menu-static-mobile-inactive app-topbar .tn-l-left-menu-toggle{transform:rotate(180deg)}.profile-info-wrapper.profile-info-wrapper.profile-info-wrapper.profile-info-wrapper{text-align:left}.topbar .topbar-right #topbar-menu-button{align-items:center;display:flex;justify-content:center;width:36px}.tn-l-top-bar-right-block-1{display:flex}.tn-l-logo-wrapper.tn-l-logo-wrapper.tn-l-logo-wrapper.tn-l-logo-wrapper{padding-left:5px;padding-right:5px}.tn-l-logo-title-block,.tn-l-top-bar-left,.topbar-description,.topbar-owner{overflow:hidden}.topbar-description,.topbar-owner{text-overflow:ellipsis}.tn-l-top-bar-menu-item:empty{display:none}.tn-l-top-bar-left.tn-l-top-bar-left.tn-l-top-bar-left{padding-left:0;padding-right:0}.topbar-title.topbar-title.topbar-title.topbar-title{margin:0}.topbar-owner.topbar-owner.topbar-owner.topbar-owner.topbar-owner{font-size:14px}.topbar-description.topbar-description.topbar-description.topbar-description.topbar-description{font-size:10px}.tn-l-top-bar-right{flex:1;position:relative}.topbar-menu-button span.topbar-badge{right:-4px}.tn-l-top-bar-right.tn-l-top-bar-right.tn-l-top-bar-right{align-items:center;display:flex;justify-content:flex-end;padding:0 .5em}.tn-l-top-bar-right.tn-l-top-bar-right.tn-l-top-bar-right #topbar-menu-button{margin-left:.5em;position:relative;right:0;top:0}.app-switcher.layout-menu.layout-menu.layout-menu.layout-menu{width:270px}.profile-image-wrapper{order:0}.tn-l-user-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:220px}::ng-deep app-topbar .tn-l-top-bar-menu-item .topbar-icon-left{align-items:center;display:flex;justify-content:center}.tn-l-topbar-item-role-wrapper{display:none}}"]
                 },] }
@@ -46798,11 +46818,11 @@
             // đổi ngược title và owner theo application.json
             return this.environment.appMetadata.main.reverseTopbarTitle == null || this.environment.appMetadata.main.reverseTopbarTitle == false
                 ? this.environment.appMetadata.main.owner
-                : this.environment.appMetadata.main.title;
+                : this.environment.appMetadata.main.titleShort;
         };
         AppTopBarV2Component.prototype.getTitle = function () {
             return this.environment.appMetadata.main.reverseTopbarTitle == null || this.environment.appMetadata.main.reverseTopbarTitle == false
-                ? this.environment.appMetadata.main.title
+                ? this.environment.appMetadata.main.titleShort
                 : this.environment.appMetadata.main.owner;
         };
         AppTopBarV2Component.prototype.reloadWindow = function () {
@@ -46813,7 +46833,7 @@
     AppTopBarV2Component.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-topbar-v2',
-                    template: "<div class=\"topbar clearfix tn-l-top-bar\">\r\n    <div class=\"topbar-left tn-l-top-bar-left\" [ngClass]=\"{'beta-version': !environment.isProduction }\">\r\n        <div class=\"tn-l-left-menu-toggle-block\">\r\n            <a tabindex=\"1\" id=\"menu-button\" class=\"tn-l-left-menu-toggle\" href=\"#\"\r\n                (click)=\"_commonService.onMenuButtonClick($event)\">\r\n                <i class=\"pi pi-chevron-left\"></i>\r\n            </a>\r\n        </div>\r\n\r\n        <div class=\"topbar-logo tn-l-logo-wrapper\">\r\n            <a tabindex=\"2\" href=\"javascript:\" style=\"display: inline-block;\">\r\n                <img class=\"topbar-logo tn-l-logo\" [src]=\"environment.appMetadata.main.logo\" (click)=\"goToHome()\" /></a>\r\n        </div>\r\n        <div class=\"topbar-title tn-l-logo-title-block\">\r\n            <div class=\"topbar-owner\">\r\n                {{getOwner()}}\r\n            </div>\r\n            <div class=\"topbar-description\">\r\n                {{getTitle()}}\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"setting-default-container\">\r\n        <ng-container *ngIf=\"showDefaultSetting && currentUser\">\r\n            <a tabindex=\"3\" href=\"javascript:void(0)\" class=\"tn-l-m-default-setting pi pi-cog\"\r\n                (click)=\"settingDefault()\">\r\n            </a>\r\n            <h3 class=\"tn-l-default-detting\" (click)=\"settingDefault()\">\r\n                {{defaultDataSetting}} <i class=\"pi pi-pencil\" style=\"margin-left:10px\"></i></h3>\r\n        </ng-container>\r\n    </div>\r\n    <div #notify class=\"notify-message\">\r\n        <marquee (mouseover)=\"handleMouseOver($event)\" (mouseout)=\"handleMouseOut($event)\">{{message}}</marquee>\r\n    </div>\r\n    <div class=\"topbar-right tn-l-top-bar-right\" [ngClass]=\"{'beta-version': !environment.isProduction}\"\r\n        oncontextmenu=\"return false\">\r\n        <div class=\"tn-l-top-bar-right-block-1\">\r\n            <a tabindex=\"4\" class=\"topbar-menu-button\" id=\"topbar-menu-button\" href=\"#\"\r\n                (click)=\"_commonService.onTopbarMenuButtonClick($event)\">\r\n                <svg focusable=\"false\" class=\"tn-m-topbar-menu-toggle\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                    viewBox=\"0 0 448 512\">\r\n                    <path fill=\"currentColor\"\r\n                        d=\"M0 224h192V32H0v192zm256-192v192h192V32H256zM0 480h192V288H0v192zm256-192v192h192V288H256z\">\r\n                    </path>\r\n                </svg>\r\n                <span *ngIf=\"messages && messages.totalUnRead > 0\" class=\"topbar-badge animated rubberBand\"\r\n                    [ngClass]=\"{'topbar-badge-bounce': messages.bounceNoti}\">{{messages.totalUnRead}}</span>\r\n            </a>\r\n        </div>\r\n\r\n        <div class=\"tn-l-top-bar-right-block-2\">\r\n            <ul class=\"topbar-items fadeInDown\" [ngClass]=\"{'topbar-items-visible': _commonService.topbarMenuActive}\">\r\n                <li #profile class=\"profile-item tn-l-top-bar-menu-item\"\r\n                    *ngIf=\"_commonService.profileMode==='top'||_commonService.isHorizontal()\"\r\n                    [ngClass]=\"{'active-top-menu':_commonService.activeTopbarItem === profile}\">\r\n\r\n                    <a href=\"#\" tabindex=\"10\" class=\"UserPane tn-l-top-bar-menu-item-inner\"\r\n                        (click)=\"_commonService.onTopbarItemClick($event,profile)\">\r\n                        <div class=\"profile-image-wrapper topbar-icon-left\">\r\n                            <img class=\"profile-image tn-l-profile-img\" [src-fallback]=\"defaultAvatar\"\r\n                                [src]=\"getCurrentUserAvatar()\" />\r\n                        </div>\r\n                        <div class=\"profile-info-wrapper\">\r\n                            <div class=\"topbar-item-name-wrapper\"\r\n                                [ngClass]=\"{'not-show-position': !getCurrentUserPosition()}\">\r\n                                <span class=\"topbar-item-name tn-l-user-name\">{{getCurrentUserFullName()}}</span>\r\n                            </div>\r\n                            <div class=\"topbar-item-role-wrapper tn-l-topbar-item-role-wrapper\"><span\r\n                                    class=\"topbar-item-role\">{{getCurrentUserPosition()}}</span></div>\r\n                        </div>\r\n                        <i class=\"pi pi-user\" style=\"opacity: 0; position: absolute;\"></i>\r\n                    </a>\r\n\r\n                    <ul class=\"layout-menu fadeInDown tn-l-switcher\">\r\n                        <li *ngIf=\"currentUser\" role=\"menuitem\">\r\n                            <a href=\"javascript:;\" (click)=\"onTopbarLogout()\">\r\n                                <i class=\"pi pi-sign-out\"></i>\r\n                                <span>\u0110\u0103ng xu\u1EA5t</span>\r\n                            </a>\r\n                        </li>\r\n                        <li *ngIf=\"!currentUser\" role=\"menuitem\">\r\n                            <a href=\"javascript:;\" (click)=\"login()\">\r\n                                <i class=\"pi pi-sign-in\"></i>\r\n                                <span>\u0110\u0103ng nh\u1EADp</span>\r\n                            </a>\r\n                        </li>\r\n                    </ul>\r\n                </li>\r\n                <li *ngIf=\"_customizeUiService.isShowHelp()\" #help class=\"menu-help tn-l-top-bar-menu-item\" tn-app-help>\r\n                </li>\r\n                <li *ngIf=\"_customizeUiService.isShowNotification()\" id=\"li-notifications\"\r\n                    class=\"tn-l-top-bar-menu-item\" #messages\r\n                    [ngClass]=\"{'active-top-menu':_commonService.activeTopbarItem === messages || _commonService.activeTopbarItem === 0}\"\r\n                    tn-app-notification (openMenu)=\"_commonService.onTopbarItemClick($event,messages)\"></li>\r\n                <li id=\"li-app-switcher\" class=\"tn-l-top-bar-menu-item\" #modules\r\n                    [ngClass]=\"{'active-top-menu':_commonService.activeTopbarItem === modules || _commonService.activeTopbarItem === 1}\">\r\n                    <a href=\"#\" tabindex=\"7\" class=\"tn-l-top-bar-menu-item-inner\" style=\"height: 30px;\"\r\n                        pTooltip=\"Danh s\u00E1ch ph\u00E2n h\u1EC7\" tooltipPosition=\"bottom\"\r\n                        (click)=\"_commonService.onTopbarItemClick($event,modules)\">\r\n                        <span class=\"topbar-icon-left tn-l-topbar-icon-left\">\r\n                            <svg focusable=\"false\" class=\"topbar-icon animated swing svgmodule\" role=\"img\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\">\r\n                                <path fill=\"currentColor\"\r\n                                    d=\"M0 224h192V32H0v192zm256-192v192h192V32H256zM0 480h192V288H0v192zm256-192v192h192V288H256z\">\r\n                                </path>\r\n                            </svg>\r\n                            <!-- <i class=\"pi pi-microsoft\"></i> -->\r\n                        </span>\r\n                        <span class=\"topbar-item-name\">{{ 'Danh s\u00E1ch ph\u00E2n h\u1EC7' | translate}}</span>\r\n                    </a>\r\n                    <ul class=\"app-switcher layout-menu fadeInDown\">\r\n                        <tn-custom-scrollbar #scrollbar class=\"app-switcher-holder\">\r\n                            <li role=\"menuitem\" class=\"wrapper-appswitch\">\r\n                                <ng-container *ngFor=\"let item of appSwitcherItems; let ind = index;\">\r\n                                    <a class=\"switcher-item tn-l-switcher-item\" href=\"javascript:\"\r\n                                        (click)=\"switchApp(item)\">\r\n                                        <span class=\"tn-l-switcher-item-inner\">\r\n                                            <i class=\"{{item.icon}} app-switcher-item-icon tn-l-switcher-item-icon\"></i>\r\n                                            <div class=\"tn-l-switcher-item-label\">\r\n                                                {{ item.title | translate}}\r\n                                            </div>\r\n                                        </span>\r\n                                    </a>\r\n                                </ng-container>\r\n                            </li>\r\n                        </tn-custom-scrollbar>\r\n                    </ul>\r\n                </li>\r\n            </ul>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
+                    template: "<div class=\"topbar clearfix tn-l-top-bar\">\r\n    <div class=\"topbar-left tn-l-top-bar-left\" [ngClass]=\"{'beta-version': !environment.isProduction }\">\r\n        <div class=\"tn-l-left-menu-toggle-block\">\r\n            <a tabindex=\"1\" id=\"menu-button\" class=\"tn-l-left-menu-toggle\" href=\"#\"\r\n                (click)=\"_commonService.onMenuButtonClick($event)\">\r\n                <i class=\"pi pi-chevron-left\"></i>\r\n            </a>\r\n        </div>\r\n\r\n        <div class=\"topbar-logo tn-l-logo-wrapper\">\r\n            <a tabindex=\"2\" href=\"javascript:\" style=\"display: inline-block;\">\r\n                <img class=\"topbar-logo tn-l-logo\" [src]=\"environment.appMetadata.main.logo\" (click)=\"goToHome()\" /></a>\r\n        </div>\r\n        <div class=\"topbar-title tn-l-logo-title-block\">\r\n            <div class=\"topbar-owner\">\r\n                {{getTitle()}}\r\n            </div>\r\n            <div class=\"topbar-description\">\r\n                {{getOwner()}}\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"setting-default-container\">\r\n        <ng-container *ngIf=\"showDefaultSetting && currentUser\">\r\n            <a tabindex=\"3\" href=\"javascript:void(0)\" class=\"tn-l-m-default-setting pi pi-cog\"\r\n                (click)=\"settingDefault()\">\r\n            </a>\r\n            <h3 class=\"tn-l-default-detting\" (click)=\"settingDefault()\">\r\n                {{defaultDataSetting}} <i class=\"pi pi-pencil\" style=\"margin-left:10px\"></i></h3>\r\n        </ng-container>\r\n    </div>\r\n    <div #notify class=\"notify-message\">\r\n        <marquee (mouseover)=\"handleMouseOver($event)\" (mouseout)=\"handleMouseOut($event)\">{{message}}</marquee>\r\n    </div>\r\n    <div class=\"topbar-right tn-l-top-bar-right\" [ngClass]=\"{'beta-version': !environment.isProduction}\"\r\n        oncontextmenu=\"return false\">\r\n        <div class=\"tn-l-top-bar-right-block-1\">\r\n            <a tabindex=\"4\" class=\"topbar-menu-button\" id=\"topbar-menu-button\" href=\"#\"\r\n                (click)=\"_commonService.onTopbarMenuButtonClick($event)\">\r\n                <svg focusable=\"false\" class=\"tn-m-topbar-menu-toggle\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                    viewBox=\"0 0 448 512\">\r\n                    <path fill=\"currentColor\"\r\n                        d=\"M0 224h192V32H0v192zm256-192v192h192V32H256zM0 480h192V288H0v192zm256-192v192h192V288H256z\">\r\n                    </path>\r\n                </svg>\r\n                <span *ngIf=\"messages && messages.totalUnRead > 0\" class=\"topbar-badge animated rubberBand\"\r\n                    [ngClass]=\"{'topbar-badge-bounce': messages.bounceNoti}\">{{messages.totalUnRead}}</span>\r\n            </a>\r\n        </div>\r\n\r\n        <div class=\"tn-l-top-bar-right-block-2\">\r\n            <ul class=\"topbar-items fadeInDown\" [ngClass]=\"{'topbar-items-visible': _commonService.topbarMenuActive}\">\r\n                <li #profile class=\"profile-item tn-l-top-bar-menu-item\"\r\n                    *ngIf=\"_commonService.profileMode==='top'||_commonService.isHorizontal()\"\r\n                    [ngClass]=\"{'active-top-menu':_commonService.activeTopbarItem === profile}\">\r\n\r\n                    <a href=\"#\" tabindex=\"10\" class=\"UserPane tn-l-top-bar-menu-item-inner\"\r\n                        (click)=\"_commonService.onTopbarItemClick($event,profile)\">\r\n                        <div class=\"profile-image-wrapper topbar-icon-left\">\r\n                            <img class=\"profile-image tn-l-profile-img\" [src-fallback]=\"defaultAvatar\"\r\n                                [src]=\"getCurrentUserAvatar()\" />\r\n                        </div>\r\n                        <div class=\"profile-info-wrapper\">\r\n                            <div class=\"topbar-item-name-wrapper\"\r\n                                [ngClass]=\"{'not-show-position': !getCurrentUserPosition()}\">\r\n                                <span class=\"topbar-item-name tn-l-user-name\">{{getCurrentUserFullName()}}</span>\r\n                            </div>\r\n                            <div class=\"topbar-item-role-wrapper tn-l-topbar-item-role-wrapper\"><span\r\n                                    class=\"topbar-item-role\">{{getCurrentUserPosition()}}</span></div>\r\n                        </div>\r\n                        <i class=\"pi pi-user\" style=\"opacity: 0; position: absolute;\"></i>\r\n                    </a>\r\n\r\n                    <ul class=\"layout-menu fadeInDown tn-l-switcher\">\r\n                        <li *ngIf=\"currentUser\" role=\"menuitem\">\r\n                            <a href=\"javascript:;\" (click)=\"onTopbarLogout()\">\r\n                                <i class=\"pi pi-sign-out\"></i>\r\n                                <span>\u0110\u0103ng xu\u1EA5t</span>\r\n                            </a>\r\n                        </li>\r\n                        <li *ngIf=\"!currentUser\" role=\"menuitem\">\r\n                            <a href=\"javascript:;\" (click)=\"login()\">\r\n                                <i class=\"pi pi-sign-in\"></i>\r\n                                <span>\u0110\u0103ng nh\u1EADp</span>\r\n                            </a>\r\n                        </li>\r\n                    </ul>\r\n                </li>\r\n                <li *ngIf=\"_customizeUiService.isShowHelp()\" #help class=\"menu-help tn-l-top-bar-menu-item\" tn-app-help>\r\n                </li>\r\n                <li *ngIf=\"_customizeUiService.isShowNotification()\" id=\"li-notifications\"\r\n                    class=\"tn-l-top-bar-menu-item\" #messages\r\n                    [ngClass]=\"{'active-top-menu':_commonService.activeTopbarItem === messages || _commonService.activeTopbarItem === 0}\"\r\n                    tn-app-notification (openMenu)=\"_commonService.onTopbarItemClick($event,messages)\"></li>\r\n                <li id=\"li-app-switcher\" class=\"tn-l-top-bar-menu-item\" #modules\r\n                    [ngClass]=\"{'active-top-menu':_commonService.activeTopbarItem === modules || _commonService.activeTopbarItem === 1}\">\r\n                    <a href=\"#\" tabindex=\"7\" class=\"tn-l-top-bar-menu-item-inner\" style=\"height: 30px;\"\r\n                        pTooltip=\"Danh s\u00E1ch ph\u00E2n h\u1EC7\" tooltipPosition=\"bottom\"\r\n                        (click)=\"_commonService.onTopbarItemClick($event,modules)\">\r\n                        <span class=\"topbar-icon-left tn-l-topbar-icon-left\">\r\n                            <svg focusable=\"false\" class=\"topbar-icon animated swing svgmodule\" role=\"img\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\">\r\n                                <path fill=\"currentColor\"\r\n                                    d=\"M0 224h192V32H0v192zm256-192v192h192V32H256zM0 480h192V288H0v192zm256-192v192h192V288H256z\">\r\n                                </path>\r\n                            </svg>\r\n                            <!-- <i class=\"pi pi-microsoft\"></i> -->\r\n                        </span>\r\n                        <span class=\"topbar-item-name\">{{ 'Danh s\u00E1ch ph\u00E2n h\u1EC7' | translate}}</span>\r\n                    </a>\r\n                    <ul class=\"app-switcher layout-menu fadeInDown\">\r\n                        <tn-custom-scrollbar #scrollbar class=\"app-switcher-holder\">\r\n                            <li role=\"menuitem\" class=\"wrapper-appswitch\">\r\n                                <ng-container *ngFor=\"let item of appSwitcherItems; let ind = index;\">\r\n                                    <a class=\"switcher-item tn-l-switcher-item\" href=\"javascript:\"\r\n                                        (click)=\"switchApp(item)\">\r\n                                        <span class=\"tn-l-switcher-item-inner\">\r\n                                            <i class=\"{{item.icon}} app-switcher-item-icon tn-l-switcher-item-icon\"></i>\r\n                                            <div class=\"tn-l-switcher-item-label\">\r\n                                                {{ item.title | translate}}\r\n                                            </div>\r\n                                        </span>\r\n                                    </a>\r\n                                </ng-container>\r\n                            </li>\r\n                        </tn-custom-scrollbar>\r\n                    </ul>\r\n                </li>\r\n            </ul>\r\n        </div>\r\n    </div>\r\n</div>",
                     providers: [ComponentContextService],
                     styles: [".topBarSearchButton:disabled{background-color:#eee!important;border:1px solid #c8c8c8!important;border-right:none!important;color:#c1c1c1!important;opacity:1}::ng-deep app-topbar a{outline:none}input:disabled::-moz-placeholder{color:#b1b1b1}input:disabled::placeholder{color:#b1b1b1}.UserPane.UserPane{display:flex}.profile-image-wrapper{order:1}.tn-l-user-name.tn-l-user-name.tn-l-user-name.tn-l-user-name.tn-l-user-name{float:none;margin-top:0}.profile-info-wrapper.profile-info-wrapper.profile-info-wrapper.profile-info-wrapper{display:inline-flex;flex-direction:column;float:none;justify-content:center;order:0;text-align:right}.tn-l-logo{image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}.tn-l-default-detting{color:#fff;cursor:pointer;margin:0}.tn-l-left-menu-toggle-block{align-items:center;align-self:stretch;box-shadow:0 0 5px 0 rgba(0,0,0,.3764705882352941);display:flex}.tn-l-left-menu-toggle{color:#fff;padding:8px;transition:transform .25s ease-in-out}::ng-deep .layout-menu-static-inactive app-topbar .tn-l-left-menu-toggle{transform:rotate(180deg)}.tn-l-logo-title-block.tn-l-logo-title-block.tn-l-logo-title-block.tn-l-logo-title-block{margin-left:0;margin-right:30px}.topbar-logo.topbar-logo.topbar-logo{float:none}.tn-l-logo.tn-l-logo.tn-l-logo.tn-l-logo{height:40px;margin:0;width:auto}.tn-l-logo-wrapper.tn-l-logo-wrapper.tn-l-logo-wrapper.tn-l-logo-wrapper{font-size:0;height:auto;margin:0;padding-left:8px;padding-right:8px;width:auto}.tn-l-top-bar{display:flex}.topbar-description,.topbar-owner{white-space:nowrap}.topbar-owner.topbar-owner.topbar-owner.topbar-owner.topbar-owner{font-size:15px}.topbar-description.topbar-description.topbar-description.topbar-description.topbar-description{font-size:11px;text-transform:none}.tn-l-top-bar-left.tn-l-top-bar-left.tn-l-top-bar-left{display:flex;float:none;width:auto}.tn-l-top-bar-left{align-items:center}.tn-m-topbar-menu-toggle{display:block;height:28px;margin:auto;width:30px}.tn-m-topbar-menu-toggle g{stroke:#fff}.tn-m-topbar-menu-toggle path{fill:#fff}.tn-l-m-default-setting{display:none}.setting-default-container{justify-content:center}.notify-message,.setting-default-container{align-items:center;display:flex;margin-left:30px}.notify-message{flex:1 1;overflow:hidden}.notify-message>marquee{color:#ff0;font-size:500;white-space:nowrap}.search-item{margin-right:10px}.tn-l-switcher-item.tn-l-switcher-item.tn-l-switcher-item{background:#fff}.tn-l-switcher-item-label{color:#52abff;text-align:center;text-shadow:none}.tn-l-switcher-item-icon.tn-l-switcher-item-icon.tn-l-switcher-item-icon.tn-l-switcher-item-icon{color:#52abff;font-size:38px;margin:5px auto;text-shadow:none}.tn-l-switcher-item.tn-l-switcher-item.tn-l-switcher-item.tn-l-switcher-item.tn-l-switcher-item{padding:8px}.tn-l-switcher.tn-l-switcher{margin-bottom:0}::ng-deep .layout-wrapper app-topbar-v2 .layout-menu li a.switcher-item{margin-top:0;width:unset}::ng-deep .layout-wrapper app-topbar-v2 .layout-menu li a.switcher-item:nth-child(3n+0){border-left:none}::ng-deep .layout-wrapper app-topbar-v2 .layout-menu li a.switcher-item:nth-child(3n+1){border-right:none}::ng-deep .layout-wrapper app-topbar-v2 .layout-menu li a.switcher-item:nth-child(3n+2){border:none}::ng-deep .layout-wrapper app-topbar-v2 .layout-menu li a.switcher-item:nth-child(3n+1):last-child,::ng-deep .layout-wrapper app-topbar-v2 .layout-menu li a.switcher-item:nth-child(3n+2):last-child{width:unset}::ng-deep .layout-wrapper app-topbar-v2 .layout-menu li a span{line-height:1.2}::ng-deep .layout-wrapper app-topbar-v2 .topbar .topbar-left{box-shadow:none}::ng-deep .layout-wrapper app-topbar-v2 .wrapper-appswitch{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));text-align:center}@media (max-width:1024px){::ng-deep .layout-wrapper app-topbar-v2 .layout-menu li a.switcher-item{width:unset}}@media (min-width:1025px){.tn-l-top-bar-right{align-items:center;display:flex;justify-content:space-between}.tn-l-top-bar-right.tn-l-top-bar-right.tn-l-top-bar-right{padding:0 15px}.topbar-items.topbar-items.topbar-items{align-items:center;display:flex;flex-direction:row-reverse;justify-content:flex-start;margin:0}.topbar-items.topbar-items.topbar-items,.topbar-items.topbar-items.topbar-items>li{float:none}::ng-deep .topbar .topbar-items>li>a{margin-top:0}::ng-deep .topbar .topbar-items>li>a>span>i{color:#fff;font-size:24px}.topbar .topbar-items>li>a.UserPane{height:auto;line-height:inherit;top:0}a.UserPane .profile-image.profile-image.profile-image.profile-image{margin-top:0}}@media (min-width:1025px) and (max-width:1400px){.tn-l-logo-title-block.tn-l-logo-title-block.tn-l-logo-title-block.tn-l-logo-title-block{margin-right:19px}.search-item{margin-right:0}.tn-l-top-bar-right.tn-l-top-bar-right.tn-l-top-bar-right{padding-left:15px}.topbar-items>li.profile-item{margin-left:14px}}@media (max-width:1024px){.tn-l-m-default-setting{align-items:center;color:#fff;display:flex;font-size:28px;height:36px;justify-content:center;width:36px}.tn-l-default-detting{display:none}::ng-deep .layout-menu-static-mobile-inactive app-topbar .tn-l-left-menu-toggle{transform:rotate(180deg)}.profile-info-wrapper.profile-info-wrapper.profile-info-wrapper.profile-info-wrapper{text-align:left}.topbar .topbar-right #topbar-menu-button{align-items:center;display:flex;justify-content:center;width:36px}.tn-l-top-bar-right-block-1{display:flex}.tn-l-logo-wrapper.tn-l-logo-wrapper.tn-l-logo-wrapper.tn-l-logo-wrapper{padding-left:5px;padding-right:5px}.tn-l-logo-title-block,.tn-l-top-bar-left,.topbar-description,.topbar-owner{overflow:hidden}.topbar-description,.topbar-owner{text-overflow:ellipsis}.tn-l-top-bar-menu-item:empty{display:none}.tn-l-top-bar-left.tn-l-top-bar-left.tn-l-top-bar-left{padding-left:0;padding-right:0}.topbar-title.topbar-title.topbar-title.topbar-title{margin:0}.topbar-owner.topbar-owner.topbar-owner.topbar-owner.topbar-owner{font-size:14px}.topbar-description.topbar-description.topbar-description.topbar-description.topbar-description{font-size:10px}.tn-l-top-bar-right{flex:1;position:relative}.topbar-menu-button span.topbar-badge{right:-4px}.tn-l-top-bar-right.tn-l-top-bar-right.tn-l-top-bar-right{align-items:center;display:flex;justify-content:flex-end;padding:0 .5em}.tn-l-top-bar-right.tn-l-top-bar-right.tn-l-top-bar-right #topbar-menu-button{margin-left:.5em;position:relative;right:0;top:0}.app-switcher.layout-menu.layout-menu.layout-menu.layout-menu{width:270px}.profile-image-wrapper{order:0}.tn-l-user-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:220px}::ng-deep app-topbar .tn-l-top-bar-menu-item .topbar-icon-left{align-items:center;display:flex;justify-content:center}.tn-l-topbar-item-role-wrapper{display:none}}"]
                 },] }
@@ -47562,11 +47582,11 @@
             // đổi ngược title và owner theo application.json
             return this.environment.appMetadata.main.reverseTopbarTitle == null || this.environment.appMetadata.main.reverseTopbarTitle == false
                 ? this.environment.appMetadata.main.owner
-                : this.environment.appMetadata.main.title;
+                : this.environment.appMetadata.main.titleShort;
         };
         AppTopBarComponent.prototype.getTitle = function () {
             return this.environment.appMetadata.main.reverseTopbarTitle == null || this.environment.appMetadata.main.reverseTopbarTitle == false
-                ? this.environment.appMetadata.main.title
+                ? this.environment.appMetadata.main.titleShort
                 : this.environment.appMetadata.main.owner;
         };
         AppTopBarComponent.prototype.reloadWindow = function () {
@@ -47578,7 +47598,7 @@
         { type: i0.Component, args: [{
                     // tslint:disable-next-line: component-selector
                     selector: 'app-topbar',
-                    template: "<ng-container [ngSwitch]=\"layoutAppSwitcher\">\r\n    <ng-container *ngSwitchDefault>\r\n        <ng-container [ngTemplateOutlet]=\"appSwitcherDefault\">\r\n        </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngSwitchCase=\"EnumTypeSplash.NEW_V1\">\r\n        <app-topbar-v1></app-topbar-v1>\r\n    </ng-container>\r\n\r\n    <ng-container *ngSwitchCase=\"EnumTypeSplash.NEW_V2\">\r\n        <app-topbar-v2></app-topbar-v2>\r\n    </ng-container>\r\n</ng-container>\r\n\r\n\r\n<ng-template #appSwitcherDefault>\r\n    <div class=\"topbar clearfix tn-l-top-bar\">\r\n        <div class=\"topbar-left tn-l-top-bar-left\" [ngClass]=\"{'beta-version': !environment.isProduction }\">\r\n            <div class=\"tn-l-left-menu-toggle-block\">\r\n                <a tabindex=\"1\" id=\"menu-button\" class=\"tn-l-left-menu-toggle\" href=\"#\"\r\n                    (click)=\"_commonService.onMenuButtonClick($event)\">\r\n                    <i class=\"pi pi-chevron-left\"></i>\r\n                </a>\r\n            </div>\r\n\r\n            <div class=\"topbar-logo tn-l-logo-wrapper\">\r\n                <a tabindex=\"2\" href=\"javascript:\" style=\"display: inline-block;\">\r\n                    <img class=\"topbar-logo tn-l-logo\" [src]=\"environment.appMetadata.main.logo\"\r\n                        (click)=\"goToHome()\" /></a>\r\n            </div>\r\n            <div class=\"topbar-title tn-l-logo-title-block\">\r\n                <div class=\"topbar-owner\">\r\n                    {{getOwner()}}\r\n                </div>\r\n                <div class=\"topbar-description\">\r\n                    {{getTitle()}}\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"setting-default-container\">\r\n            <ng-container *ngIf=\"showDefaultSetting && currentUser\">\r\n                <a tabindex=\"3\" href=\"javascript:void(0)\" class=\"tn-l-m-default-setting pi pi-cog\"\r\n                    (click)=\"settingDefault()\">\r\n                </a>\r\n                <h3 class=\"tn-l-default-detting\" (click)=\"settingDefault()\">\r\n                    {{defaultDataSetting}} <i class=\"pi pi-pencil\" style=\"margin-left:10px\"></i></h3>\r\n            </ng-container>\r\n        </div>\r\n        <div #notify class=\"notify-message\">\r\n            <marquee (mouseover)=\"handleMouseOver($event)\" (mouseout)=\"handleMouseOut($event)\">{{message}}</marquee>\r\n        </div>\r\n        <div class=\"topbar-right tn-l-top-bar-right\" [ngClass]=\"{'beta-version': !environment.isProduction}\"\r\n            oncontextmenu=\"return false\">\r\n            <div class=\"tn-l-top-bar-right-block-1\">\r\n                <a tabindex=\"4\" class=\"topbar-menu-button\" id=\"topbar-menu-button\" href=\"#\"\r\n                    (click)=\"_commonService.onTopbarMenuButtonClick($event)\">\r\n                    <svg focusable=\"false\" class=\"tn-m-topbar-menu-toggle\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                        viewBox=\"0 0 448 512\">\r\n                        <path fill=\"currentColor\"\r\n                            d=\"M0 224h192V32H0v192zm256-192v192h192V32H256zM0 480h192V288H0v192zm256-192v192h192V288H256z\">\r\n                        </path>\r\n                    </svg>\r\n                    <span *ngIf=\"messages && messages.totalUnRead > 0\" class=\"topbar-badge animated rubberBand\"\r\n                        [ngClass]=\"{'topbar-badge-bounce': messages.bounceNoti}\">{{messages.totalUnRead}}</span>\r\n                </a>\r\n            </div>\r\n\r\n            <div class=\"tn-l-top-bar-right-block-2\">\r\n                <ul class=\"topbar-items fadeInDown\"\r\n                    [ngClass]=\"{'topbar-items-visible': _commonService.topbarMenuActive}\">\r\n                    <li #profile class=\"profile-item tn-l-top-bar-menu-item\"\r\n                        *ngIf=\"_commonService.profileMode==='top'||_commonService.isHorizontal()\"\r\n                        [ngClass]=\"{'active-top-menu':_commonService.activeTopbarItem === profile}\">\r\n\r\n                        <a href=\"#\" tabindex=\"10\" class=\"UserPane tn-l-top-bar-menu-item-inner\"\r\n                            (click)=\"_commonService.onTopbarItemClick($event,profile)\">\r\n                            <div class=\"profile-image-wrapper topbar-icon-left\">\r\n                                <img class=\"profile-image tn-l-profile-img\" [src-fallback]=\"defaultAvatar\"\r\n                                    [src]=\"getCurrentUserAvatar()\" />\r\n                            </div>\r\n                            <div class=\"profile-info-wrapper\">\r\n                                <div class=\"topbar-item-name-wrapper\"\r\n                                    [ngClass]=\"{'not-show-position': !getCurrentUserPosition()}\">\r\n                                    <span class=\"topbar-item-name tn-l-user-name\">{{getCurrentUserFullName()}}</span>\r\n                                </div>\r\n                                <div class=\"topbar-item-role-wrapper tn-l-topbar-item-role-wrapper\"><span\r\n                                        class=\"topbar-item-role\">{{getCurrentUserPosition()}}</span></div>\r\n                            </div>\r\n                            <i class=\"pi pi-user\" style=\"opacity: 0; position: absolute;\"></i>\r\n                        </a>\r\n\r\n                        <ul class=\"layout-menu fadeInDown tn-l-switcher\">\r\n                            <li *ngIf=\"currentUser\" role=\"menuitem\">\r\n                                <a href=\"#\" (click)=\"onEditInfo($event)\">\r\n                                    <i class=\"pi pi-inbox\"></i>\r\n                                    <span>Th\u01B0 m\u1EE5c c\u00E1 nh\u00E2n</span>\r\n                                </a>\r\n                            </li>\r\n                            <li *ngIf=\"currentUser\" role=\"menuitem\">\r\n                                <a href=\"#\" (click)=\"onEditInfo($event)\">\r\n                                    <i class=\"pi pi-user-edit\"></i>\r\n                                    <span>C\u1EADp nh\u1EADt th\u00F4ng tin</span>\r\n                                </a>\r\n                            </li>\r\n                            <li *ngIf=\"currentUser\" role=\"menuitem\">\r\n                                <a href=\"javascript:;\" (click)=\"onTopbarLogout()\">\r\n                                    <i class=\"pi pi-sign-out\"></i>\r\n                                    <span>\u0110\u0103ng xu\u1EA5t</span>\r\n                                </a>\r\n                            </li>\r\n                            <li *ngIf=\"!currentUser\" role=\"menuitem\">\r\n                                <a href=\"javascript:;\" (click)=\"login()\">\r\n                                    <i class=\"pi pi-sign-in\"></i>\r\n                                    <span>\u0110\u0103ng nh\u1EADp</span>\r\n                                </a>\r\n                            </li>\r\n                        </ul>\r\n                    </li>\r\n                    <li *ngIf=\"_customizeUiService.isShowHelp()\" #help class=\"menu-help tn-l-top-bar-menu-item\"\r\n                        tn-app-help></li>\r\n                    <li *ngIf=\"_customizeUiService.isShowNotification()\" id=\"li-notifications\"\r\n                        class=\"tn-l-top-bar-menu-item\" #messages\r\n                        [ngClass]=\"{'active-top-menu':_commonService.activeTopbarItem === messages || _commonService.activeTopbarItem === 0}\"\r\n                        tn-app-notification (openMenu)=\"_commonService.onTopbarItemClick($event,messages)\"></li>\r\n                    <li id=\"li-app-switcher\" class=\"tn-l-top-bar-menu-item\" #modules\r\n                        [ngClass]=\"{'active-top-menu':_commonService.activeTopbarItem === modules || _commonService.activeTopbarItem === 1}\">\r\n                        <a href=\"#\" tabindex=\"7\" (click)=\"_commonService.onTopbarItemClick($event,modules)\"\r\n                            style=\"height: 30px;\" pTooltip=\"Danh s\u00E1ch ph\u00E2n h\u1EC7\" tooltipPosition=\"bottom\"\r\n                            class=\"tn-l-top-bar-menu-item-inner\">\r\n                            <span class=\"topbar-icon-left tn-l-topbar-icon-left\">\r\n                                <svg focusable=\"false\" class=\"topbar-icon animated swing svgmodule\" role=\"img\"\r\n                                    xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\">\r\n                                    <path fill=\"currentColor\"\r\n                                        d=\"M0 224h192V32H0v192zm256-192v192h192V32H256zM0 480h192V288H0v192zm256-192v192h192V288H256z\">\r\n                                    </path>\r\n                                </svg>\r\n                                <!-- <i class=\"pi pi-microsoft\"></i> -->\r\n                            </span>\r\n                            <span class=\"topbar-item-name\">{{ 'Danh s\u00E1ch ph\u00E2n h\u1EC7' | translate}}</span>\r\n                        </a>\r\n                        <ul class=\"app-switcher layout-menu fadeInDown\">\r\n                            <tn-custom-scrollbar #scrollbar class=\"app-switcher-holder\">\r\n                                <li role=\"menuitem\" style=\"text-align: center;\">\r\n                                    <ng-container *ngFor=\"let item of appSwitcherItems; let ind = index;\">\r\n                                        <a class=\"switcher-item tn-l-switcher-item\" href=\"javascript:\"\r\n                                            [style.background]=\"item.background\" (click)=\"switchApp(item)\">\r\n                                            <span class=\"tn-l-switcher-item-inner\" [style.color]=\"item.colorTitle\">\r\n                                                <i class=\"{{item.icon}} app-switcher-item-icon tn-l-switcher-item-icon\"\r\n                                                    [style.color]=\"item.colorIcon\"></i>\r\n                                                <div class=\"tn-l-switcher-item-label\">\r\n                                                    {{ item.title | translate}}\r\n                                                </div>\r\n                                            </span>\r\n                                        </a>\r\n                                    </ng-container>\r\n                                </li>\r\n                            </tn-custom-scrollbar>\r\n                        </ul>\r\n                    </li>\r\n                </ul>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n",
+                    template: "<ng-container [ngSwitch]=\"layoutAppSwitcher\">\r\n    <ng-container *ngSwitchDefault>\r\n        <ng-container [ngTemplateOutlet]=\"appSwitcherDefault\">\r\n        </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngSwitchCase=\"EnumTypeSplash.NEW_V1\">\r\n        <app-topbar-v1></app-topbar-v1>\r\n    </ng-container>\r\n\r\n    <ng-container *ngSwitchCase=\"EnumTypeSplash.NEW_V2\">\r\n        <app-topbar-v2></app-topbar-v2>\r\n    </ng-container>\r\n</ng-container>\r\n\r\n\r\n<ng-template #appSwitcherDefault>\r\n    <div class=\"topbar clearfix tn-l-top-bar\">\r\n        <div class=\"topbar-left tn-l-top-bar-left\" [ngClass]=\"{'beta-version': !environment.isProduction }\">\r\n            <div class=\"tn-l-left-menu-toggle-block\">\r\n                <a tabindex=\"1\" id=\"menu-button\" class=\"tn-l-left-menu-toggle\" href=\"#\"\r\n                    (click)=\"_commonService.onMenuButtonClick($event)\">\r\n                    <i class=\"pi pi-chevron-left\"></i>\r\n                </a>\r\n            </div>\r\n\r\n            <div class=\"topbar-logo tn-l-logo-wrapper\">\r\n                <a tabindex=\"2\" href=\"javascript:\" style=\"display: inline-block;\">\r\n                    <img class=\"topbar-logo tn-l-logo\" [src]=\"environment.appMetadata.main.logo\"\r\n                        (click)=\"goToHome()\" /></a>\r\n            </div>\r\n            <div class=\"topbar-title tn-l-logo-title-block\">\r\n                <div class=\"topbar-owner\">\r\n                    {{getTitle()}}\r\n                </div>\r\n                <div class=\"topbar-description\">\r\n                    {{getOwner()}}\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"setting-default-container\">\r\n            <ng-container *ngIf=\"showDefaultSetting && currentUser\">\r\n                <a tabindex=\"3\" href=\"javascript:void(0)\" class=\"tn-l-m-default-setting pi pi-cog\"\r\n                    (click)=\"settingDefault()\">\r\n                </a>\r\n                <h3 class=\"tn-l-default-detting\" (click)=\"settingDefault()\">\r\n                    {{defaultDataSetting}} <i class=\"pi pi-pencil\" style=\"margin-left:10px\"></i></h3>\r\n            </ng-container>\r\n        </div>\r\n        <div #notify class=\"notify-message\">\r\n            <marquee (mouseover)=\"handleMouseOver($event)\" (mouseout)=\"handleMouseOut($event)\">{{message}}</marquee>\r\n        </div>\r\n        <div class=\"topbar-right tn-l-top-bar-right\" [ngClass]=\"{'beta-version': !environment.isProduction}\"\r\n            oncontextmenu=\"return false\">\r\n            <div class=\"tn-l-top-bar-right-block-1\">\r\n                <a tabindex=\"4\" class=\"topbar-menu-button\" id=\"topbar-menu-button\" href=\"#\"\r\n                    (click)=\"_commonService.onTopbarMenuButtonClick($event)\">\r\n                    <svg focusable=\"false\" class=\"tn-m-topbar-menu-toggle\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                        viewBox=\"0 0 448 512\">\r\n                        <path fill=\"currentColor\"\r\n                            d=\"M0 224h192V32H0v192zm256-192v192h192V32H256zM0 480h192V288H0v192zm256-192v192h192V288H256z\">\r\n                        </path>\r\n                    </svg>\r\n                    <span *ngIf=\"messages && messages.totalUnRead > 0\" class=\"topbar-badge animated rubberBand\"\r\n                        [ngClass]=\"{'topbar-badge-bounce': messages.bounceNoti}\">{{messages.totalUnRead}}</span>\r\n                </a>\r\n            </div>\r\n\r\n            <div class=\"tn-l-top-bar-right-block-2\">\r\n                <ul class=\"topbar-items fadeInDown\"\r\n                    [ngClass]=\"{'topbar-items-visible': _commonService.topbarMenuActive}\">\r\n                    <li #profile class=\"profile-item tn-l-top-bar-menu-item\"\r\n                        *ngIf=\"_commonService.profileMode==='top'||_commonService.isHorizontal()\"\r\n                        [ngClass]=\"{'active-top-menu':_commonService.activeTopbarItem === profile}\">\r\n\r\n                        <a href=\"#\" tabindex=\"10\" class=\"UserPane tn-l-top-bar-menu-item-inner\"\r\n                            (click)=\"_commonService.onTopbarItemClick($event,profile)\">\r\n                            <div class=\"profile-image-wrapper topbar-icon-left\">\r\n                                <img class=\"profile-image tn-l-profile-img\" [src-fallback]=\"defaultAvatar\"\r\n                                    [src]=\"getCurrentUserAvatar()\" />\r\n                            </div>\r\n                            <div class=\"profile-info-wrapper\">\r\n                                <div class=\"topbar-item-name-wrapper\"\r\n                                    [ngClass]=\"{'not-show-position': !getCurrentUserPosition()}\">\r\n                                    <span class=\"topbar-item-name tn-l-user-name\">{{getCurrentUserFullName()}}</span>\r\n                                </div>\r\n                                <div class=\"topbar-item-role-wrapper tn-l-topbar-item-role-wrapper\"><span\r\n                                        class=\"topbar-item-role\">{{getCurrentUserPosition()}}</span></div>\r\n                            </div>\r\n                            <i class=\"pi pi-user\" style=\"opacity: 0; position: absolute;\"></i>\r\n                        </a>\r\n\r\n                        <ul class=\"layout-menu fadeInDown tn-l-switcher\">\r\n                            <li *ngIf=\"currentUser\" role=\"menuitem\">\r\n                                <a href=\"#\" (click)=\"onEditInfo($event)\">\r\n                                    <i class=\"pi pi-inbox\"></i>\r\n                                    <span>Th\u01B0 m\u1EE5c c\u00E1 nh\u00E2n</span>\r\n                                </a>\r\n                            </li>\r\n                            <li *ngIf=\"currentUser\" role=\"menuitem\">\r\n                                <a href=\"#\" (click)=\"onEditInfo($event)\">\r\n                                    <i class=\"pi pi-user-edit\"></i>\r\n                                    <span>C\u1EADp nh\u1EADt th\u00F4ng tin</span>\r\n                                </a>\r\n                            </li>\r\n                            <li *ngIf=\"currentUser\" role=\"menuitem\">\r\n                                <a href=\"javascript:;\" (click)=\"onTopbarLogout()\">\r\n                                    <i class=\"pi pi-sign-out\"></i>\r\n                                    <span>\u0110\u0103ng xu\u1EA5t</span>\r\n                                </a>\r\n                            </li>\r\n                            <li *ngIf=\"!currentUser\" role=\"menuitem\">\r\n                                <a href=\"javascript:;\" (click)=\"login()\">\r\n                                    <i class=\"pi pi-sign-in\"></i>\r\n                                    <span>\u0110\u0103ng nh\u1EADp</span>\r\n                                </a>\r\n                            </li>\r\n                        </ul>\r\n                    </li>\r\n                    <li *ngIf=\"_customizeUiService.isShowHelp()\" #help class=\"menu-help tn-l-top-bar-menu-item\"\r\n                        tn-app-help></li>\r\n                    <li *ngIf=\"_customizeUiService.isShowNotification()\" id=\"li-notifications\"\r\n                        class=\"tn-l-top-bar-menu-item\" #messages\r\n                        [ngClass]=\"{'active-top-menu':_commonService.activeTopbarItem === messages || _commonService.activeTopbarItem === 0}\"\r\n                        tn-app-notification (openMenu)=\"_commonService.onTopbarItemClick($event,messages)\"></li>\r\n                    <li id=\"li-app-switcher\" class=\"tn-l-top-bar-menu-item\" #modules\r\n                        [ngClass]=\"{'active-top-menu':_commonService.activeTopbarItem === modules || _commonService.activeTopbarItem === 1}\">\r\n                        <a href=\"#\" tabindex=\"7\" (click)=\"_commonService.onTopbarItemClick($event,modules)\"\r\n                            style=\"height: 30px;\" pTooltip=\"Danh s\u00E1ch ph\u00E2n h\u1EC7\" tooltipPosition=\"bottom\"\r\n                            class=\"tn-l-top-bar-menu-item-inner\">\r\n                            <span class=\"topbar-icon-left tn-l-topbar-icon-left\">\r\n                                <svg focusable=\"false\" class=\"topbar-icon animated swing svgmodule\" role=\"img\"\r\n                                    xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\">\r\n                                    <path fill=\"currentColor\"\r\n                                        d=\"M0 224h192V32H0v192zm256-192v192h192V32H256zM0 480h192V288H0v192zm256-192v192h192V288H256z\">\r\n                                    </path>\r\n                                </svg>\r\n                                <!-- <i class=\"pi pi-microsoft\"></i> -->\r\n                            </span>\r\n                            <span class=\"topbar-item-name\">{{ 'Danh s\u00E1ch ph\u00E2n h\u1EC7' | translate}}</span>\r\n                        </a>\r\n                        <ul class=\"app-switcher layout-menu fadeInDown\">\r\n                            <tn-custom-scrollbar #scrollbar class=\"app-switcher-holder\">\r\n                                <li role=\"menuitem\" style=\"text-align: center;\">\r\n                                    <ng-container *ngFor=\"let item of appSwitcherItems; let ind = index;\">\r\n                                        <a class=\"switcher-item tn-l-switcher-item\" href=\"javascript:\"\r\n                                            [style.background]=\"item.background\" (click)=\"switchApp(item)\">\r\n                                            <span class=\"tn-l-switcher-item-inner\" [style.color]=\"item.colorTitle\">\r\n                                                <i class=\"{{item.icon}} app-switcher-item-icon tn-l-switcher-item-icon\"\r\n                                                    [style.color]=\"item.colorIcon\"></i>\r\n                                                <div class=\"tn-l-switcher-item-label\">\r\n                                                    {{ item.title | translate}}\r\n                                                </div>\r\n                                            </span>\r\n                                        </a>\r\n                                    </ng-container>\r\n                                </li>\r\n                            </tn-custom-scrollbar>\r\n                        </ul>\r\n                    </li>\r\n                </ul>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>",
                     providers: [ComponentContextService],
                     styles: [".topBarSearchButton:disabled{background-color:#eee!important;border:1px solid #c8c8c8!important;border-right:none!important;color:#c1c1c1!important;opacity:1}::ng-deep app-topbar a{outline:none}input:disabled::-moz-placeholder{color:#b1b1b1}input:disabled::placeholder{color:#b1b1b1}.UserPane.UserPane{display:flex}.profile-image-wrapper{order:1}.tn-l-user-name.tn-l-user-name.tn-l-user-name.tn-l-user-name.tn-l-user-name{float:none;margin-top:0}.profile-info-wrapper.profile-info-wrapper.profile-info-wrapper.profile-info-wrapper{display:inline-flex;flex-direction:column;float:none;justify-content:center;order:0;text-align:right}.tn-l-logo{image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}.tn-l-default-detting{color:#fff;cursor:pointer;margin:0}.tn-l-left-menu-toggle-block{align-items:center;align-self:stretch;box-shadow:0 0 5px 0 rgba(0,0,0,.3764705882352941);display:flex}.tn-l-left-menu-toggle{color:#fff;padding:8px;transition:transform .25s ease-in-out}::ng-deep .layout-menu-static-inactive app-topbar .tn-l-left-menu-toggle{transform:rotate(180deg)}.tn-l-logo-title-block.tn-l-logo-title-block.tn-l-logo-title-block.tn-l-logo-title-block{margin-left:0;margin-right:30px}.topbar-logo.topbar-logo.topbar-logo{float:none}.tn-l-logo.tn-l-logo.tn-l-logo.tn-l-logo{height:40px;margin:0;width:auto}.tn-l-logo-wrapper.tn-l-logo-wrapper.tn-l-logo-wrapper.tn-l-logo-wrapper{font-size:0;height:auto;margin:0;padding-left:8px;padding-right:8px;width:auto}.tn-l-top-bar{display:flex}.topbar-description,.topbar-owner{white-space:nowrap}.topbar-owner.topbar-owner.topbar-owner.topbar-owner.topbar-owner{font-size:15px}.topbar-description.topbar-description.topbar-description.topbar-description.topbar-description{font-size:11px;text-transform:none}.tn-l-top-bar-left.tn-l-top-bar-left.tn-l-top-bar-left{display:flex;float:none;width:auto}.tn-l-top-bar-left{align-items:center}.tn-m-topbar-menu-toggle{display:block;height:28px;margin:auto;width:30px}.tn-m-topbar-menu-toggle g{stroke:#fff}.tn-m-topbar-menu-toggle path{fill:#fff}.tn-l-m-default-setting{display:none}.setting-default-container{justify-content:center}.notify-message,.setting-default-container{align-items:center;display:flex;margin-left:30px}.notify-message{flex:1 1;overflow:hidden}.notify-message>marquee{color:#ff0;font-size:500;white-space:nowrap}.search-item{margin-right:10px}.tn-l-switcher-item-inner{padding-top:4px}.tn-l-switcher-item.tn-l-switcher-item.tn-l-switcher-item{align-items:center;display:inline-flex;justify-content:center}.tn-l-switcher-item-label{margin-top:4px}.tn-l-switcher-item-icon.tn-l-switcher-item-icon.tn-l-switcher-item-icon.tn-l-switcher-item-icon{font-size:38px;margin:0 auto}.tn-l-switcher-item.tn-l-switcher-item.tn-l-switcher-item.tn-l-switcher-item.tn-l-switcher-item{padding:8px}.tn-l-switcher.tn-l-switcher{margin-bottom:0}@media (min-width:1025px){.tn-l-top-bar-right{align-items:center;display:flex;justify-content:space-between}.tn-l-top-bar-right.tn-l-top-bar-right.tn-l-top-bar-right{padding:0 15px}.topbar-items.topbar-items.topbar-items{align-items:center;display:flex;flex-direction:row-reverse;justify-content:flex-start;margin:0}.topbar-items.topbar-items.topbar-items,.topbar-items.topbar-items.topbar-items>li{float:none}::ng-deep .topbar .topbar-items>li>a{margin-top:0}::ng-deep .topbar .topbar-items>li>a>span>i{color:#fff;font-size:24px}.topbar .topbar-items>li>a.UserPane{height:auto;line-height:inherit;top:0}a.UserPane .profile-image.profile-image.profile-image.profile-image{margin-top:0}}@media (min-width:1025px) and (max-width:1400px){.tn-l-logo-title-block.tn-l-logo-title-block.tn-l-logo-title-block.tn-l-logo-title-block{margin-right:19px}.search-item{margin-right:0}.tn-l-top-bar-right.tn-l-top-bar-right.tn-l-top-bar-right{padding-left:15px}.topbar-items>li.profile-item{margin-left:14px}}@media (max-width:1024px){.tn-l-m-default-setting{align-items:center;color:#fff;display:flex;font-size:28px;height:36px;justify-content:center;width:36px}.tn-l-default-detting{display:none}::ng-deep .layout-menu-static-mobile-inactive app-topbar .tn-l-left-menu-toggle{transform:rotate(180deg)}.profile-info-wrapper.profile-info-wrapper.profile-info-wrapper.profile-info-wrapper{text-align:left}.topbar .topbar-right #topbar-menu-button{align-items:center;display:flex;justify-content:center;width:36px}.tn-l-top-bar-right-block-1{display:flex}.tn-l-logo-wrapper.tn-l-logo-wrapper.tn-l-logo-wrapper.tn-l-logo-wrapper{padding-left:5px;padding-right:5px}.tn-l-logo-title-block,.tn-l-top-bar-left,.topbar-description,.topbar-owner{overflow:hidden}.topbar-description,.topbar-owner{text-overflow:ellipsis}.tn-l-top-bar-menu-item:empty{display:none}.tn-l-top-bar-left.tn-l-top-bar-left.tn-l-top-bar-left{padding-left:0;padding-right:0}.topbar-title.topbar-title.topbar-title.topbar-title{margin:0}.topbar-owner.topbar-owner.topbar-owner.topbar-owner.topbar-owner{font-size:14px}.topbar-description.topbar-description.topbar-description.topbar-description.topbar-description{font-size:10px}.tn-l-top-bar-right{flex:1;position:relative}.topbar-menu-button span.topbar-badge{right:-4px}.tn-l-top-bar-right.tn-l-top-bar-right.tn-l-top-bar-right{align-items:center;display:flex;justify-content:flex-end;padding:0 .5em}.tn-l-top-bar-right.tn-l-top-bar-right.tn-l-top-bar-right #topbar-menu-button{margin-left:.5em;position:relative;right:0;top:0}.app-switcher.layout-menu.layout-menu.layout-menu.layout-menu{width:270px}.profile-image-wrapper{order:0}.tn-l-user-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:220px}::ng-deep app-topbar .tn-l-top-bar-menu-item .topbar-icon-left{align-items:center;display:flex;justify-content:center}.tn-l-topbar-item-role-wrapper{display:none}}"]
                 },] }
@@ -56849,13 +56869,15 @@
                         label: 'Giảng viên',
                         code: 'isGiangVien',
                         dataType: 'boolean',
-                        width: '90px'
+                        width: '90px',
+                        hidden: this.control.userType !== exports.UserType.CanBo,
                     }),
                     new EntityPickerColumn({
                         label: 'Chuyên viên',
                         code: 'isChuyenVien',
                         dataType: 'boolean',
-                        width: '90px'
+                        width: '90px',
+                        hidden: this.control.userType !== exports.UserType.CanBo,
                     })
                 ], mdWidth: 12 }));
             this.fieldSearchText = __spread(this.controlPicker.fieldSearchText);
@@ -56982,7 +57004,8 @@
             if (this.controlPicker.fieldPlus) {
                 arrField.push.apply(arrField, __spread(this.controlPicker.fieldPlus.split(',')));
             }
-            var arrDisplayField = this.controlPicker.columns.filter(function (x) { return x.isDisplay == true && !x.notInFields && x.dataType != 'custom'; })
+            var arrDisplayField = this.controlPicker.columns
+                .filter(function (x) { return x.isDisplay == true && !x.notInFields && x.dataType != 'custom'; })
                 .map(function (x) { return x.code; });
             this._commonService.addDistinct(arrDisplayField, arrField);
             return arrField.toString();