tnx-shared 5.1.175 → 5.1.179

package/bundles/tnx-shared.umd.js

@@ -521,6 +521,11 @@
         REFRESH_PERMISSION: 'REFRESH_PERMISSION',
         SELECTED_OBJECT_CHANGED: 'SELECTED_OBJECT_CHANGED',
         REFRESH_USER_PERMISSION: 'REFRESH_USER_PERMISSION',
+    };
+    ComCtxConstants.NOTIFICATION = {
+        NOTIFICATION_RELOAD: 'NOTIFICATION_RELOAD',
+        NOTIFICATION_CHANGE: 'NOTIFICATION_CHANGE',
+        NOTIFICATION_USER_CHANGE: 'NOTIFICATION_USER_CHANGE'
     };
 
     //         ctr.prototype[propertyKey] = function (...args) {
@@ -16901,12 +16906,10 @@
                 var _this = this;
                 return __generator(this, function (_a) {
                     return [2 /*return*/, new Promise(function (resolve) {
-                            if (!baseService) {
+                            if (!baseService)
                                 baseService = _this._baseService;
-                            }
-                            if (!dataContext) {
+                            if (!dataContext)
                                 dataContext = _this._dataContext;
-                            }
                             var storageKey = EntityMetadataService.STORAGE_KEY + "_" + baseService.entityName;
                             var item = localStorage.getItem(storageKey);
                             _this._baseService = baseService;
@@ -17077,6 +17080,7 @@
             _this.updatePlusUrl = null;
             _this.dynamicControl = {};
             _this.setValidateForm = true;
+            _this.haveEntityMetadataAPI = true;
             _this.__isFormView = false;
             _this._notifierService = _this._injector.get(NotifierService);
             _this._masterDataService = _this._injector.get(MasterDataService);
@@ -17397,7 +17401,9 @@
                                 this.crudForm.data = data;
                                 this.crudForm.setIsLoadedDataEdit(true);
                             }
-                            if (!this.setting.baseService) return [3 /*break*/, 2];
+                            if (!(this.setting.baseService
+                                && this.haveEntityMetadataAPI) // setting để fix lỗi k load dc entity metadata cho cơ cấu tổ chức service
+                            ) return [3 /*break*/, 2]; // setting để fix lỗi k load dc entity metadata cho cơ cấu tổ chức service
                             return [4 /*yield*/, this._entityMetadataService.load(this.setting.baseService, this.context, true)];
                         case 1:
                             _a.sent(); // force load để đọc từ csdl
@@ -22057,7 +22063,7 @@
         { type: i0.Component, args: [{
                     // tslint:disable-next-line: component-selector
                     selector: 'crud-list',
-                    template: "<div #container class=\"custom-card card card-w-title flex-container-fit-child\" [attr.height-type]=\"setting.heightType\"\r\n    [ngStyle]=\"_style\">\r\n    <div class=\"ui-helper-clearfix crud-list-header-area\">\r\n        <div *ngIf=\"searchCustom\" class=\"p-grid ui-fluid custom-p-col custom-search-area\">\r\n            <div class=\"p-col-12 main-container-search\">\r\n                <div class=\"p-grid main-container-search-inner\">\r\n                    <ng-container>\r\n                        <ng-container *ngTemplateOutlet=\"searchCustom; context: {$implicit: this}\"></ng-container>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"!setting.hiddenHeader\" class=\"p-grid ui-fluid custom-p-col page-title-area\">\r\n            <div *ngIf=\"!setting.hiddenPageTitle\" class=\"main-title\">\r\n                <h1 *ngIf=\"!hasTemplate('customTitle')\">\r\n                    {{setting.title != null ? setting.title : 'Danh s\u00E1ch ' + setting.objectName}}\r\n                </h1>\r\n\r\n                <ng-container *ngIf=\"hasTemplate('customTitle')\" [ngTemplateOutlet]=\"getTemplate('customTitle')\"\r\n                    [ngTemplateOutletContext]=\"{crudList: this}\">\r\n                </ng-container>\r\n            </div>\r\n\r\n            <div *ngIf=\"!setting.hiddenPageSetting\" class=\"paginator-table\">\r\n                <paging-next-back-only [model]=\"model\" [setting]=\"setting\" (onOldest)=\"onOldest($event)\"\r\n                    (onNext)=\"onNext($event)\" (onPrev)=\"onPrev($event)\" (onLatest)=\"onLatest($event)\"\r\n                    (onChangeLimitPage)=\"savePageSize()\">\r\n                </paging-next-back-only>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"fit-content crud-list-body-area\">\r\n        <div class=\"crud-list-body-area-inner\" style=\"overflow: unset;\">\r\n            <div class=\"flex-container-fit-child\" style=\"overflow: unset;\">\r\n                <div *ngIf=\"!setting.hiddenToolbar\" class=\"p-grid crudListToolbar\">\r\n                    <ng-container>\r\n                        <div *ngIf=\"!setting.hiddenButtons && hasTemplate('toolbar')\"\r\n                            [ngClass]=\"setting.hiddenAdvanceSearch ? 'p-md-12 p-lg-12' : 'p-md-7 p-lg-8'\"\r\n                            class=\"p-col-12 button-group function-topbar custom-toolbar\">\r\n                            <ng-container\r\n                                [ngTemplateOutletContext]=\"{selectedItems: model.selectedItems, crudList: this}\"\r\n                                [ngTemplateOutlet]=\"getTemplate('toolbar')\"></ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"!setting.hiddenButtons && !hasTemplate('toolbar')\"\r\n                            [ngClass]=\"setting.hiddenAdvanceSearch ? 'p-md-12 p-lg-12' : 'p-md-7 p-lg-8'\"\r\n                            class=\"p-col-12 button-group function-topbar\">\r\n                            <button *ngIf=\"!hiddenAdd\" type=\"button\" pButton pRipple label=\"Th\u00EAm m\u1EDBi\" icon=\"pi pi-plus\"\r\n                                class=\"p-button-text\" [disabled]=\"!model.baseReady\" (click)=\"add()\"></button>\r\n                            <button *ngIf=\"setting.showExportSelectedItems && model.selectedItems.length > 0\"\r\n                                type=\"button\" pButton pRipple\r\n                                label=\"Xu\u1EA5t c\u00E1c m\u1EE5c \u0111\u00E3 ch\u1ECDn ({{model.selectedItems.length}})\" icon=\"fas fa-file-excel\"\r\n                                class=\"p-button-text p-button-success\" (click)=\"xuatCacMucDaChon()\"></button>\r\n                            <button *ngIf=\"!hiddenDelete && model.selectedItems.length > 0 && !disableMultipleDelete()\"\r\n                                type=\"button\" pButton pRipple\r\n                                label=\"{{ 'X\u00F3a' | translate }} ({{model.selectedItems.length}})\" icon=\"pi pi-trash\"\r\n                                class=\"p-button-text p-button-danger\" (click)=\"deleteMutiple()\"></button>\r\n                            <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]=\"hasTemplate('afterCrudList')\"></ng-container>\r\n                                </ng-container>\r\n                            </tn-custom-scrollbar>\r\n                            <div *ngIf=\"!showScrollBar\">\r\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldFalse\">\r\n                                </ng-container>\r\n                            </div>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"_groupField\">\r\n                            <tn-custom-scrollbar *ngIf=\"showScrollBar\" #scrollbar [config]=\"configScrollBar\"\r\n                                [showScrollHorizontal]=\"showScrollHorizontal\">\r\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldTrue\">\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"hasTemplate('afterCrudList')\">\r\n                                    <ng-container [ngTemplateOutlet]=\"getTemplate('afterCrudList')\"></ng-container>\r\n                                </ng-container>\r\n                            </tn-custom-scrollbar>\r\n                            <div *ngIf=\"!showScrollBar\">\r\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldTrue\">\r\n                                </ng-container>\r\n                            </div>\r\n                        </ng-container>\r\n\r\n                        <div class=\"table-border-line --top\"></div>\r\n                        <div class=\"table-border-line --right\"></div>\r\n                        <div class=\"table-border-line --bottom\"></div>\r\n                        <div class=\"table-border-line --left\"></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n<after-view-checked (loaded)=\"handleReady()\"></after-view-checked>\r\n<settings *ngIf=\"_showSettings && !setting.hiddenSetting\" [entityMetadataService]=\"entityMetadataService\"\r\n    [parentContext]=\"context\" [parentSetting]=\"setting\" [parentModel]=\"model\" (onSave)=\"onSaveSettings($event)\"\r\n    (onCancel)=\"_showSettings = false\">\r\n</settings>\r\n<settings-row *ngIf=\"_showSettingsRowColor && !setting.hiddenSetting\" [entityMetadataService]=\"entityMetadataService\"\r\n    [parentContext]=\"context\" [parentSetting]=\"setting\" [parentModel]=\"model\" (onSave)=\"onSaveColorSettings($event)\"\r\n    (onCancel)=\"_showSettingsRowColor = false\">\r\n</settings-row>\r\n<workflow-setting-dialog *ngIf=\"_showSettingsWorkflow && !setting.hiddenSettingWorkflow\" [parentSetting]=\"setting\"\r\n    [parentContext]=\"context\" [parentModel]=\"model\" (onSaved)=\"onSaveWorkflowSettings($event)\"\r\n    (onRemoved)=\"onRemoveWorkflowSettings($event)\" (onCancel)=\"_showSettingsWorkflow = false\"></workflow-setting-dialog>\r\n<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'\" [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<ng-template #tableGetGroupFieldFalse>\r\n    <p-table #table [dataKey]=\"'id'\" [scrollable]=\"pTableScrollable\" [scrollHeight]=\"pTableScrollHeight\"\r\n        [columns]=\"setting.cols\" [paginator]=\"false\" [value]=\"_dataSource\" (onSort)=\"onSort($event, table)\"\r\n        [class]=\"_tableClass\" [responsive]=\"responsive\" [lazy]=\"lazy\" [loading]=\"model.loading\"\r\n        [(selection)]=\"model.selectedItems\" (onRowReorder)=\"handleRowOrdered($event)\">\r\n        <ng-template *ngIf=\"header\" pTemplate=\"header\" let-columns>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"header, context: {$implicit: columns, crudList: this, rowHeaderFilter: rowHeaderFilter, contentTh: contentTh, containerSticky: containerSticky, funcCheckAll: handleCheckAll}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"!header\" pTemplate=\"header\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"trHeader; context: {$implicit: columns, funcCheckAll: handleCheckAll}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\" let-index=\"rowIndex\" let-expanded=\"expanded\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"trBody; context: {$implicit: rowData, columns: columns, index: index, expanded: expanded, eventSelectRow: handleSelectRow, eventChecked: handleCheckRowData}\">\r\n            </ng-container>\r\n            <after-view-checked *ngIf=\"index == _dataSource.length - 1\" style=\"display: none;\" [renderKey]=\"_dataSource\"\r\n                (loaded)=\"handleTableRendered()\">\r\n            </after-view-checked>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"rowExpansion\" pTemplate=\"rowexpansion\" let-rowData let-expanded=\"expanded\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"rowExpansion; context: {rowData: rowData, expanded: expanded, getColSpanGroup: getColSpanGroup}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"summary\" pTemplate=\"summary\">\r\n            <ng-container *ngTemplateOutlet=\"summary\"></ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"footer\" pTemplate=\"footer\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"footer; context: {$implicit: columns}\"></ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"colgroup\" pTemplate=\"colgroup\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"colgroup; context: {$implicit: columns}\"></ng-container>\r\n        </ng-template>\r\n    </p-table>\r\n</ng-template>\r\n<ng-template #tableGetGroupFieldTrue>\r\n    <p-table #tableGroup [scrollable]=\"pTableScrollable\" [scrollHeight]=\"pTableScrollHeight\" [columns]=\"setting.cols\"\r\n        [paginator]=\"false\" [value]=\"_dataSource\" [metaKeySelection]=\"false\" (onSort)=\"onSort($event, tableGroup)\"\r\n        [class]=\"_tableClass\" [customSort]=\"true\" [responsive]=\"responsive\" [lazy]=\"true\" [loading]=\"model.loading\"\r\n        [(selection)]=\"model.selectedItems\" [expandedRowKeys]=\"model.expandedRowKeys\" [dataKey]=\"_groupField\">\r\n        <ng-template *ngIf=\"header\" pTemplate=\"header\" let-columns>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"header, context: {$implicit: columns, crudList: this, rowHeaderFilter: rowHeaderFilter, contentTh: contentTh, containerSticky: containerSticky, funcCheckAll: handleCheckAll_Group}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"!header\" pTemplate=\"header\" let-columns>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"trHeader; context: {$implicit: columns, funcCheckAll: handleCheckAll_Group}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template pTemplate=\"body\" let-rowData let-rowIndex=\"rowIndex\" let-expanded=\"expanded\" let-columns=\"columns\">\r\n            <tr *ngIf=\"rowGroupMetadata[rowData[_groupField]] && rowGroupMetadata[rowData[_groupField]].index == rowIndex\"\r\n                class=\"p-widget-header group-row\" style=\"border: 0px; border-bottom: 1px solid #eee\">\r\n                <td *ngIf=\"!setting.hiddenCheckbox\" class=\"center chkbox\" [class.sticky]=\"setting.stickyColumn\">\r\n                    <p-checkbox [(ngModel)]=\"rowGroupChecked[rowData[_groupField]]\" binary=\"true\"\r\n                        (onChange)=\"handleCheckRowGroup(rowData)\">\r\n                    </p-checkbox>\r\n                    <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                </td>\r\n                <ng-container *ngIf=\"!rowGroup\">\r\n                    <td [colSpan]=\"getColSpanGroup()\" [class]=\"_classRowGroup\">\r\n                        <div class=\"container-row-group\">\r\n                            <a href=\"javascript:;\" [pRowToggler]=\"rowData\" class=\"container-row-group-toggle\"\r\n                                [class.sticky]=\"setting.stickyColumn\">\r\n                                <i style=\"margin-right:5px\"\r\n                                    [ngClass]=\"expanded ? 'fas fa-fw fa-caret-down' : 'fas fa-fw fa-caret-right'\"></i>\r\n                                <span class=\"content-row-group\">\r\n                                    <ng-container *ngIf=\"!contentRowGroup\">\r\n                                        <ng-container [ngTemplateOutlet]=\"_contentRowGroup\"\r\n                                            [ngTemplateOutletContext]=\"getContextRowGroup(rowData)\">\r\n                                        </ng-container>\r\n                                    </ng-container>\r\n                                    <ng-container *ngIf=\"contentRowGroup\">\r\n                                        <ng-container [ngTemplateOutlet]=\"contentRowGroup\"\r\n                                            [ngTemplateOutletContext]=\"getContextRowGroup(rowData)\">\r\n                                        </ng-container>\r\n                                    </ng-container>\r\n                                </span>\r\n                            </a>\r\n                        </div>\r\n                    </td>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"rowGroup\">\r\n                    <ng-container [ngTemplateOutlet]=\"rowGroup\"\r\n                        [ngTemplateOutletContext]=\"getContextRowGroupRoot(rowData, expanded)\">\r\n                    </ng-container>\r\n                </ng-container>\r\n            </tr>\r\n        </ng-template>\r\n        <ng-template pTemplate=\"rowexpansion\" let-columns=\"columns\" let-rowData let-index=\"rowIndex\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"trBody; context: {$implicit: rowData, columns: columns, index: index, expanded: false, eventSelectRow: handleSelectRowGroup, eventChecked: handleCheckRowData_Group}\">\r\n            </ng-container>\r\n            <after-view-checked *ngIf=\"index == _dataSource.length - 1\" style=\"display: none;\" [renderKey]=\"_dataSource\"\r\n                (loaded)=\"handleTableRendered()\">\r\n            </after-view-checked>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"summary\" pTemplate=\"summary\">\r\n            <ng-container *ngTemplateOutlet=\"summary\"></ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"footer\" pTemplate=\"footer\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"footer; context: {$implicit: columns}\"></ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"colgroup\" pTemplate=\"colgroup\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"colgroup; context: {$implicit: columns}\"></ng-container>\r\n        </ng-template>\r\n    </p-table>\r\n    <after-view-checked></after-view-checked>\r\n</ng-template>\r\n<ng-template #trHeader let-columns let-funcCheckAll=\"funcCheckAll\">\r\n    <tr class=\"title-row\">\r\n        <ng-container *ngIf=\"!setting.hiddenCheckbox\">\r\n            <th [style.width]=\"widthCheckbox\" class=\"chkbox link-or-action cell-checkbox\"\r\n                [class.sticky]=\"setting.stickyColumn\">\r\n                <button *ngIf=\"!hasTemplate('headerCheckbox')\" type=\"button\" pButton pRipple icon=\"pi pi-refresh\"\r\n                    class=\"p-button-rounded p-button-text btnReload\" pTooltip=\"L\u00E0m m\u1EDBi d\u1EEF li\u1EC7u\" tooltipPosition=\"top\"\r\n                    [disabled]=\"model.loading\" (click)=\"reload()\"></button>\r\n                <ng-container *ngIf=\"hasTemplate('headerCheckbox')\">\r\n                    <ng-container [ngTemplateOutletContext]=\"{crudList: this}\"\r\n                        [ngTemplateOutlet]=\"getTemplate('headerCheckbox')\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n            </th>\r\n        </ng-container>\r\n        <th *ngIf=\"!setting.hiddenOrderColumn\" [style.width]=\"widthOrderColumn\" class=\"stt nopad center\"\r\n            [class.sticky]=\"setting.stickyColumn\">\r\n            {{ 'TT' |translate}}\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <th *ngIf=\"rowExpansion\" class=\"nopad row-expansion-toggle center\" style=\"width: 2.5rem\"\r\n            [class.sticky]=\"setting.stickyColumn\">\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <ng-container *ngFor=\"let col of columns; let i = index\">\r\n            <th *ngIf=\"col && col.visible && col.field!='function'\" [ngStyle]=\"col.extendData.headerStyle\"\r\n                [pTooltip]=\"col.fullLabel\" tooltipStyleClass=\"unset-width\" [class]=\"col.extendData.headerClass\"\r\n                [class.first-th]=\"i==0\" [escape]=\"false\" tooltipPosition=\"top\" [tnSortableColumn]=\"col.field\">\r\n                <ng-container *ngTemplateOutlet=\"contentTh; context: {$implicit: col}\"></ng-container>\r\n                <ng-container *ngIf=\"col.sort || col.sortClient\">\r\n                    <ng-container *ngTemplateOutlet=\"sortIcon; context: {field: col.field}\"></ng-container>\r\n                </ng-container>\r\n            </th>\r\n        </ng-container>\r\n        <th *ngIf=\"enableReorderRow\" style=\"width: 30px\">\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <ng-container *ngTemplateOutlet=\"colFunctionHeader\"></ng-container>\r\n    </tr>\r\n    <ng-container *ngTemplateOutlet=\"rowHeaderFilter; context: {columns: columns, funcCheckAll: funcCheckAll}\">\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #rowHeaderFilter let-columns=\"columns\" let-funcCheckAll=\"funcCheckAll\">\r\n    <tr class=\"filter-row\" *ngIf=\"!setting.hiddenFilterRow\">\r\n        <th *ngIf=\"!setting.hiddenCheckbox\" class=\"chkbox nopad center\" [class.sticky]=\"setting.stickyColumn\"\r\n            [class.tricheckbox-custom-false]=\"checkedAll === false\" [style.width]=\"widthCheckbox\">\r\n            <p-triStateCheckbox [(ngModel)]=\"checkedAll\" binary=\"true\" (onChange)=\"funcCheckAll()\">\r\n            </p-triStateCheckbox>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <th *ngIf=\"!setting.hiddenOrderColumn\" class=\"stt center v-top\" [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=\"'decimal'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"filterNumber\"\r\n                                        [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"'date'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"filterDate\"\r\n                                        [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"'datetime'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"filterDate\"\r\n                                        [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"'boolean'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"filterBoolean\"\r\n                                        [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchDefault>\r\n                                    <ng-container [ngTemplateOutlet]=\"filterText\"\r\n                                        [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n            </th>\r\n        </ng-container>\r\n        <th *ngIf=\"enableReorderRow\" style=\"width: 30px\">\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <th *ngIf=\"!setting.hiddenFunctionColumn\" class=\"center setting-cell column-function\"\r\n            [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.hiddenSettingWorkflowNew\" 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            [style.width]=\"widthFunctionColumn || _widthFunctionColumn\">\r\n            <div class=\"cell-header-function\">\r\n                <span>{{'GRID.FUNCTION'| translate}}</span>\r\n            </div>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #contentTh let-col>\r\n    <ng-container *ngIf=\"templateHeaderContent[col.field]\">\r\n        <ng-container *ngTemplateOutlet=\"templateHeaderContent[col.field]\"></ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!templateHeaderContent[col.field]\">\r\n        {{col.label}}\r\n    </ng-container>\r\n    <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n</ng-template>\r\n<ng-template #trBody let-rowData let-columns=\"columns\" let-index=\"index\" let-expanded=\"expanded\"\r\n    let-eventSelectRow=\"eventSelectRow\" let-eventChecked=\"eventChecked\">\r\n    <tr [tnReorderableRow]=\"index\" [attr.rowIndex]=\"index\"\r\n        [ngClass]=\"mergeClassObj(rowData, { 'ui-state-highlight': rowData._checked })\" [pTooltip]=\"rowData.tooltip\"\r\n        tooltipPosition=\"top\" [tooltipStyleClass]=\"rowData.tooltipClass\" [escape]=\"escape\"\r\n        (click)=\"eventSelectRow($event, rowData)\">\r\n        <ng-container *ngIf=\"!setting.hiddenCheckbox\">\r\n            <td [style.width]=\"widthCheckbox\" class=\"chkbox link-or-action cell-checkbox\"\r\n                [class.sticky]=\"setting.stickyColumn\">\r\n                <ng-container *ngIf=\"!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 || !rowData.hidden[fieldOrder])\"\r\n            [style.width]=\"widthOrderColumn\" 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]=\"getBookmarkColor(rowData, columns)\"></span>\r\n            {{rowData[fieldOrder]}}\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </td>\r\n        <td *ngIf=\"rowExpansion\" class=\"no-padding center row-expansion-toggle\" [class.sticky]=\"setting.stickyColumn\">\r\n            <ng-container *ngTemplateOutlet=\"iconToggleRowData; context: {rowData: rowData, expanded: expanded}\">\r\n            </ng-container>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </td>\r\n        <ng-container\r\n            *ngTemplateOutlet=\"dynamicColBodys; context: {$implicit: columns, rowData: rowData, index: index, expanded: expanded}\">\r\n        </ng-container>\r\n        <td *ngIf=\"enableReorderRow\" class=\"no-padding center\">\r\n            <i class=\"fas fa-arrows-alt\" style=\"cursor:pointer; padding: 8px; color: #555;\" pReorderableRowHandle></i>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </td>\r\n        <ng-container *ngIf=\"!setting.hiddenFunctionColumn\">\r\n            <td class=\"text-center column-function\" style=\"text-align: center;\" [class.sticky]=\"setting.stickyColumn\">\r\n                <div *ngIf=\"hasTemplate('function')\" class=\"p-toolbar-group-center button-group\">\r\n                    <ng-container [ngTemplateOutlet]=\"getTemplate('function')\"\r\n                        [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"></ng-container>\r\n                    <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                </div>\r\n                <div *ngIf=\"!hasTemplate('function')\" class=\"p-toolbar-group-center button-group\">\r\n                    <ng-container [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"\r\n                        [ngTemplateOutlet]=\"getTemplate('buttonBefore')\"></ng-container>\r\n                    <button *ngIf=\"setting.showVersionButton\" type=\"button\" pButton pRipple icon=\"pi pi-calendar\"\r\n                        class=\"p-button-rounded p-button-success link-or-action\" pTooltip=\"Xem l\u1ECBch s\u1EED phi\u00EAn b\u1EA3n\"\r\n                        tooltipPosition=\"top\" (click)=\"showListVersion(rowData)\"></button>\r\n                    <button *ngIf=\"!rowData.hiddenEdit\" type=\"button\" pButton pRipple [disabled]=\"disableEdit(rowData)\"\r\n                        pTooltip=\"{{'FORM.EDIT' | translate}}\" tooltipPosition=\"top\"\r\n                        class=\"p-button-rounded p-button-text p-button-info link-or-action\" icon=\"pi pi-pencil\"\r\n                        (click)=\"edit(rowData)\"></button>\r\n                    <button *ngIf=\"!rowData.hiddenDelete\" type=\"button\" pButton pRipple\r\n                        [disabled]=\"disableDelete(rowData)\" pTooltip=\"{{'FORM.DELETE' | translate}}\"\r\n                        tooltipPosition=\"top\" class=\"p-button-rounded p-button-text p-button-danger link-or-action\"\r\n                        icon=\"pi pi-trash\" (click)=\"delete(rowData)\"></button>\r\n                    <button *ngIf=\"this.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                </div>\r\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n            </td>\r\n        </ng-container>\r\n    </tr>\r\n</ng-template>\r\n<ng-template #dynamicColBodys let-columns let-rowData=\"rowData\" let-index=\"index\" let-expanded=\"expanded\">\r\n    <ng-container *ngFor=\"let col of columns; let i = index\">\r\n        <ng-container\r\n            *ngTemplateOutlet=\"contentTd; context: {$implicit: rowData, col: col, index: index, i: i, expanded: expanded}\">\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #contentTd let-rowData let-col=\"col\" let-index=\"index\" let-expanded=\"expanded\" let-i=\"i\">\r\n    <td *ngIf=\"col && col.visible && col.field != 'function' && (!rowData.hidden || !rowData.hidden[col.field])\"\r\n        [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[col.field]\"\r\n        [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[col.field]\" [ngStyle]=\"col.extendData.style\"\r\n        [class]=\"col.cellClass\" [class.first-td]=\"i == 0\">\r\n        <span *ngIf=\"col.pipe\">\r\n            <span class=\"p-column-title\" [pTooltip]=\"col.fullLabel\" [escape]=\"false\"\r\n                tooltipPosition=\"top\">{{col.label}}</span>\r\n            {{rowData['pipe__' + col.field]}}\r\n        </span>\r\n        <span *ngIf=\"!col.pipe\">\r\n            <span class=\"p-column-title\" [pTooltip]=\"col.fullLabel\" [escape]=\"false\"\r\n                tooltipPosition=\"top\">{{col.label}}</span>\r\n            <span *ngIf=\"setting.showEditLink && col.showEditLink\" [pTooltip]=\"config.tooltipView\" tooltipPosition=\"top\"\r\n                class=\"link-or-action\">\r\n                <a href=\"javascript:;\" (click)=\"view(rowData)\" [pTooltip]=\"config.tooltipView\" tooltipPosition=\"top\">\r\n                    <ng-container [ngTemplateOutlet]=\"contentCell\"\r\n                        [ngTemplateOutletContext]=\"getContextCell(rowData, index, col, expanded, this)\">\r\n                    </ng-container>\r\n                </a>\r\n            </span>\r\n            <span *ngIf=\"!setting.showEditLink || !col.showEditLink\">\r\n                <ng-container [ngTemplateOutlet]=\"contentCell\"\r\n                    [ngTemplateOutletContext]=\"getContextCell(rowData, index, col, expanded, this)\">\r\n                </ng-container>\r\n            </span>\r\n        </span>\r\n        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n    </td>\r\n</ng-template>\r\n<ng-template #contentCell let-col=\"col\" let-rowData=\"rowData\" let-rowIndex=\"rowIndex\" let-field=\"field\"\r\n    let-expanded=\"expanded\">\r\n    <ng-container *ngIf=\"col.template\">\r\n        <ng-container [ngTemplateOutlet]=\"col.template\"\r\n            [ngTemplateOutletContext]=\"getContextCell(rowData, rowIndex, col, expanded,this)\">\r\n        </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!col.template\">\r\n        <ng-container [ngSwitch]=\"col.dataType\">\r\n            <span *ngSwitchCase=\"'color'\" style=\"display:block;text-align:center;\">\r\n                <div pTooltip=\"{{rowData[field]}}\" tooltipPosition=\"top\" [ngStyle]=\"{'background-color':rowData[field]}\"\r\n                    style=\"width:30px;height:30px;margin:0 auto;\"></div>\r\n            </span>\r\n            <span *ngSwitchCase=\"'icon'\" style=\"display:block;text-align:center;\">\r\n                <i pTooltip=\"{{rowData[field]}}\" tooltipPosition=\"top\" style=\"text-align: center;\"\r\n                    [ngClass]=\"rowData[field]\"></i>\r\n            </span>\r\n            <span *ngSwitchCase=\"'date'\" pTooltip=\"{{rowData[field] | date:'dd/MM/yyyy'}}\" tooltipPosition=\"top\">\r\n                {{_crudService.renderDate(rowData[field], col.format)}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'datetime'\" pTooltip=\"{{rowData[field] | date:'dd/MM/yyyy HH:mm'}}\"\r\n                tooltipPosition=\"top\">\r\n                {{_crudService.renderDateTime(rowData[field], col.format)}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'user'\" class=\"user\">\r\n                {{rowData[field] | userFormat | async}}\r\n            </span>\r\n            <div *ngSwitchCase=\"'users'\" [innerHTML]=\"rowData[field] | usersFormat | async\">\r\n            </div>\r\n            <span *ngSwitchCase=\"'int'\">\r\n                {{rowData[field]}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'decimal'\">\r\n                {{rowData[field]}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'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=\"'string'\">\r\n                <ng-container *ngTemplateOutlet=\"contentCellString; context: {$implicit: rowData, field: col.field}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"null\">\r\n                <ng-container *ngTemplateOutlet=\"contentCellString; context: {$implicit: rowData, field: col.field}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchDefault>\r\n                <ng-container [ngTemplateOutlet]=\"getComponentByType(col.dataType)\"\r\n                    [ngTemplateOutletContext]=\"getContextCell(rowData, rowIndex, col, expanded, this)\">\r\n                </ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #contentCellString let-rowData let-field=\"field\">\r\n    <span>\r\n        <!-- __sv: Short Value -->\r\n        <ng-container *ngIf=\"rowData[field + '__sv']\">\r\n            <ng-container *ngIf=\"!rowData[field + '__showFull']\">\r\n                {{rowData[field + '__sv']}}\r\n                <span class=\"toggle-showfull\" (click)=\"toggleShowFull(rowData, field)\" pTooltip=\"B\u1EA5m \u0111\u1EC3 xem th\u00EAm\"\r\n                    tooltipPosition=\"top\">[...]</span>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"rowData[field + '__showFull']\">\r\n                {{rowData[field]}}\r\n                <span class=\"toggle-showfull\" (click)=\"toggleShowFull(rowData, field)\">Thu g\u1ECDn</span>\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!rowData[field + '__sv']\">\r\n            {{rowData[field]}}\r\n        </ng-container>\r\n    </span>\r\n</ng-template>\r\n<ng-template #iconToggleRowGroup let-rowData=\"rowData\" let-expanded=\"expanded\">\r\n    <a href=\"javascript:;\" (click)=\"handleToggleRow(rowData, $event)\">\r\n        <i style=\"margin-right:5px\" [ngClass]=\"expanded ? 'fas fa-fw fa-caret-down' : 'fas fa-fw fa-caret-right'\"></i>\r\n    </a>\r\n</ng-template>\r\n<ng-template #iconToggleRowData let-rowData=\"rowData\" let-expanded=\"expanded\">\r\n    <button type=\"button\" pButton pRipple class=\"link-or-action p-button-text p-button-rounded p-button-plain\"\r\n        [icon]=\"expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"\r\n        (click)=\"handleToggleRow(rowData, $event)\"></button>\r\n</ng-template>\r\n<ng-template #_contentRowGroup let-rowData=\"rowData\" let-groupCol=\"groupCol\" let-groupField=\"_groupField\">\r\n    <ng-container [ngTemplateOutlet]=\"contentCell\"\r\n        [ngTemplateOutletContext]=\"{rowData: rowData, col: groupCol, field: _groupField}\">\r\n    </ng-container>\r\n    <span> ({{rowGroupMetadata[rowData[_groupField]].size}})</span>\r\n</ng-template>\r\n<ng-template #trangThaiV5 let-rowData=\"rowData\">\r\n    <div class=\"container-text-workflow\">\r\n        <button *ngIf=\"!rowData.__workflowCode\" pButton class=\"p-button-text link-or-action\" label=\"B\u1EAFt \u0111\u1EA7u\"\r\n            style=\"border: 1px solid #7ca9cd;\" pTooltip=\"B\u1EAFt \u0111\u1EA7u ch\u1EA1y quy tr\u00ECnh\" tooltipPosition=\"top\"\r\n            [disabled]=\"rowData.__startingWorkflow\" (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\r\n            [options]=\"[{value: true, label: 'C\u00F3', icon: 'pi pi-check'}, {value: false, label: 'Kh\u00F4ng', icon: 'pi pi-times'}]\"\r\n            [multiple]=\"true\" [(ngModel)]=\"filterData[col.field]\" (onChange)=\"onChangeBoolean($event, col.field)\">\r\n            <ng-template let-item>\r\n                <i style=\"padding: 3px 0;\" [class]=\"item.icon\"></i>\r\n            </ng-template>\r\n        </p-selectButton>\r\n    </div>\r\n</ng-template>",
+                    template: "<div #container class=\"custom-card card card-w-title flex-container-fit-child\" [attr.height-type]=\"setting.heightType\"\r\n    [ngStyle]=\"_style\">\r\n    <div class=\"ui-helper-clearfix crud-list-header-area\">\r\n        <div *ngIf=\"searchCustom\" class=\"p-grid ui-fluid custom-p-col custom-search-area\">\r\n            <div class=\"p-col-12 main-container-search\">\r\n                <div class=\"p-grid main-container-search-inner\">\r\n                    <ng-container>\r\n                        <ng-container *ngTemplateOutlet=\"searchCustom; context: {$implicit: this}\"></ng-container>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"!setting.hiddenHeader\" class=\"p-grid ui-fluid custom-p-col page-title-area\">\r\n            <div *ngIf=\"!setting.hiddenPageTitle\" class=\"main-title\">\r\n                <h1 *ngIf=\"!hasTemplate('customTitle')\">\r\n                    {{setting.title != null ? setting.title : 'Danh s\u00E1ch ' + setting.objectName}}\r\n                </h1>\r\n\r\n                <ng-container *ngIf=\"hasTemplate('customTitle')\" [ngTemplateOutlet]=\"getTemplate('customTitle')\"\r\n                    [ngTemplateOutletContext]=\"{crudList: this}\">\r\n                </ng-container>\r\n            </div>\r\n\r\n            <div *ngIf=\"!setting.hiddenPageSetting\" class=\"paginator-table\">\r\n                <paging-next-back-only [model]=\"model\" [setting]=\"setting\" (onChanged)=\"getData()\"\r\n                    (onChangeLimitPage)=\"savePageSize()\">\r\n                </paging-next-back-only>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"fit-content crud-list-body-area\">\r\n        <div class=\"crud-list-body-area-inner\" style=\"overflow: unset;\">\r\n            <div class=\"flex-container-fit-child\" style=\"overflow: unset;\">\r\n                <div *ngIf=\"!setting.hiddenToolbar\" class=\"p-grid crudListToolbar\">\r\n                    <ng-container>\r\n                        <div *ngIf=\"!setting.hiddenButtons && hasTemplate('toolbar')\"\r\n                            [ngClass]=\"setting.hiddenAdvanceSearch ? 'p-md-12 p-lg-12' : 'p-md-7 p-lg-8'\"\r\n                            class=\"p-col-12 button-group function-topbar custom-toolbar\">\r\n                            <ng-container\r\n                                [ngTemplateOutletContext]=\"{selectedItems: model.selectedItems, crudList: this}\"\r\n                                [ngTemplateOutlet]=\"getTemplate('toolbar')\"></ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"!setting.hiddenButtons && !hasTemplate('toolbar')\"\r\n                            [ngClass]=\"setting.hiddenAdvanceSearch ? 'p-md-12 p-lg-12' : 'p-md-7 p-lg-8'\"\r\n                            class=\"p-col-12 button-group function-topbar\">\r\n                            <button *ngIf=\"!hiddenAdd\" type=\"button\" pButton pRipple label=\"Th\u00EAm m\u1EDBi\" icon=\"pi pi-plus\"\r\n                                class=\"p-button-text\" [disabled]=\"!model.baseReady\" (click)=\"add()\"></button>\r\n                            <button *ngIf=\"setting.showExportSelectedItems && model.selectedItems.length > 0\"\r\n                                type=\"button\" pButton pRipple\r\n                                label=\"Xu\u1EA5t c\u00E1c m\u1EE5c \u0111\u00E3 ch\u1ECDn ({{model.selectedItems.length}})\" icon=\"fas fa-file-excel\"\r\n                                class=\"p-button-text p-button-success\" (click)=\"xuatCacMucDaChon()\"></button>\r\n                            <button *ngIf=\"!hiddenDelete && model.selectedItems.length > 0 && !disableMultipleDelete()\"\r\n                                type=\"button\" pButton pRipple\r\n                                label=\"{{ 'X\u00F3a' | translate }} ({{model.selectedItems.length}})\" icon=\"pi pi-trash\"\r\n                                class=\"p-button-text p-button-danger\" (click)=\"deleteMutiple()\"></button>\r\n                            <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]=\"hasTemplate('afterCrudList')\"></ng-container>\r\n                                </ng-container>\r\n                            </tn-custom-scrollbar>\r\n                            <div *ngIf=\"!showScrollBar\">\r\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldFalse\">\r\n                                </ng-container>\r\n                            </div>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"_groupField\">\r\n                            <tn-custom-scrollbar *ngIf=\"showScrollBar\" #scrollbar [config]=\"configScrollBar\"\r\n                                [showScrollHorizontal]=\"showScrollHorizontal\">\r\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldTrue\">\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"hasTemplate('afterCrudList')\">\r\n                                    <ng-container [ngTemplateOutlet]=\"getTemplate('afterCrudList')\"></ng-container>\r\n                                </ng-container>\r\n                            </tn-custom-scrollbar>\r\n                            <div *ngIf=\"!showScrollBar\">\r\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldTrue\">\r\n                                </ng-container>\r\n                            </div>\r\n                        </ng-container>\r\n\r\n                        <div class=\"table-border-line --top\"></div>\r\n                        <div class=\"table-border-line --right\"></div>\r\n                        <div class=\"table-border-line --bottom\"></div>\r\n                        <div class=\"table-border-line --left\"></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n<after-view-checked (loaded)=\"handleReady()\"></after-view-checked>\r\n<settings *ngIf=\"_showSettings && !setting.hiddenSetting\" [entityMetadataService]=\"entityMetadataService\"\r\n    [parentContext]=\"context\" [parentSetting]=\"setting\" [parentModel]=\"model\" (onSave)=\"onSaveSettings($event)\"\r\n    (onCancel)=\"_showSettings = false\">\r\n</settings>\r\n<settings-row *ngIf=\"_showSettingsRowColor && !setting.hiddenSetting\" [entityMetadataService]=\"entityMetadataService\"\r\n    [parentContext]=\"context\" [parentSetting]=\"setting\" [parentModel]=\"model\" (onSave)=\"onSaveColorSettings($event)\"\r\n    (onCancel)=\"_showSettingsRowColor = false\">\r\n</settings-row>\r\n<workflow-setting-dialog *ngIf=\"_showSettingsWorkflow && !setting.hiddenSettingWorkflow\" [parentSetting]=\"setting\"\r\n    [parentContext]=\"context\" [parentModel]=\"model\" (onSaved)=\"onSaveWorkflowSettings($event)\"\r\n    (onRemoved)=\"onRemoveWorkflowSettings($event)\" (onCancel)=\"_showSettingsWorkflow = false\"></workflow-setting-dialog>\r\n<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'\" [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<ng-template #tableGetGroupFieldFalse>\r\n    <p-table #table [dataKey]=\"'id'\" [scrollable]=\"pTableScrollable\" [scrollHeight]=\"pTableScrollHeight\"\r\n        [columns]=\"setting.cols\" [paginator]=\"false\" [value]=\"_dataSource\" (onSort)=\"onSort($event, table)\"\r\n        [class]=\"_tableClass\" [responsive]=\"responsive\" [lazy]=\"lazy\" [loading]=\"model.loading\"\r\n        [(selection)]=\"model.selectedItems\" (onRowReorder)=\"handleRowOrdered($event)\">\r\n        <ng-template *ngIf=\"header\" pTemplate=\"header\" let-columns>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"header, context: {$implicit: columns, crudList: this, rowHeaderFilter: rowHeaderFilter, contentTh: contentTh, containerSticky: containerSticky, funcCheckAll: handleCheckAll}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"!header\" pTemplate=\"header\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"trHeader; context: {$implicit: columns, funcCheckAll: handleCheckAll}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\" let-index=\"rowIndex\" let-expanded=\"expanded\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"trBody; context: {$implicit: rowData, columns: columns, index: index, expanded: expanded, eventSelectRow: handleSelectRow, eventChecked: handleCheckRowData}\">\r\n            </ng-container>\r\n            <after-view-checked *ngIf=\"index == _dataSource.length - 1\" style=\"display: none;\" [renderKey]=\"_dataSource\"\r\n                (loaded)=\"handleTableRendered()\">\r\n            </after-view-checked>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"rowExpansion\" pTemplate=\"rowexpansion\" let-rowData let-expanded=\"expanded\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"rowExpansion; context: {rowData: rowData, expanded: expanded, getColSpanGroup: getColSpanGroup}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"summary\" pTemplate=\"summary\">\r\n            <ng-container *ngTemplateOutlet=\"summary\"></ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"footer\" pTemplate=\"footer\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"footer; context: {$implicit: columns}\"></ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"colgroup\" pTemplate=\"colgroup\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"colgroup; context: {$implicit: columns}\"></ng-container>\r\n        </ng-template>\r\n    </p-table>\r\n</ng-template>\r\n<ng-template #tableGetGroupFieldTrue>\r\n    <p-table #tableGroup [scrollable]=\"pTableScrollable\" [scrollHeight]=\"pTableScrollHeight\" [columns]=\"setting.cols\"\r\n        [paginator]=\"false\" [value]=\"_dataSource\" [metaKeySelection]=\"false\" (onSort)=\"onSort($event, tableGroup)\"\r\n        [class]=\"_tableClass\" [customSort]=\"true\" [responsive]=\"responsive\" [lazy]=\"true\" [loading]=\"model.loading\"\r\n        [(selection)]=\"model.selectedItems\" [expandedRowKeys]=\"model.expandedRowKeys\" [dataKey]=\"_groupField\">\r\n        <ng-template *ngIf=\"header\" pTemplate=\"header\" let-columns>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"header, context: {$implicit: columns, crudList: this, rowHeaderFilter: rowHeaderFilter, contentTh: contentTh, containerSticky: containerSticky, funcCheckAll: handleCheckAll_Group}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"!header\" pTemplate=\"header\" let-columns>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"trHeader; context: {$implicit: columns, funcCheckAll: handleCheckAll_Group}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template pTemplate=\"body\" let-rowData let-rowIndex=\"rowIndex\" let-expanded=\"expanded\" let-columns=\"columns\">\r\n            <tr *ngIf=\"rowGroupMetadata[rowData[_groupField]] && rowGroupMetadata[rowData[_groupField]].index == rowIndex\"\r\n                class=\"p-widget-header group-row\" style=\"border: 0px; border-bottom: 1px solid #eee\">\r\n                <td *ngIf=\"!setting.hiddenCheckbox\" class=\"center chkbox\" [class.sticky]=\"setting.stickyColumn\">\r\n                    <p-checkbox [(ngModel)]=\"rowGroupChecked[rowData[_groupField]]\" binary=\"true\"\r\n                        (onChange)=\"handleCheckRowGroup(rowData)\">\r\n                    </p-checkbox>\r\n                    <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                </td>\r\n                <ng-container *ngIf=\"!rowGroup\">\r\n                    <td [colSpan]=\"getColSpanGroup()\" [class]=\"_classRowGroup\">\r\n                        <div class=\"container-row-group\">\r\n                            <a href=\"javascript:;\" [pRowToggler]=\"rowData\" class=\"container-row-group-toggle\"\r\n                                [class.sticky]=\"setting.stickyColumn\">\r\n                                <i style=\"margin-right:5px\"\r\n                                    [ngClass]=\"expanded ? 'fas fa-fw fa-caret-down' : 'fas fa-fw fa-caret-right'\"></i>\r\n                                <span class=\"content-row-group\">\r\n                                    <ng-container *ngIf=\"!contentRowGroup\">\r\n                                        <ng-container [ngTemplateOutlet]=\"_contentRowGroup\"\r\n                                            [ngTemplateOutletContext]=\"getContextRowGroup(rowData)\">\r\n                                        </ng-container>\r\n                                    </ng-container>\r\n                                    <ng-container *ngIf=\"contentRowGroup\">\r\n                                        <ng-container [ngTemplateOutlet]=\"contentRowGroup\"\r\n                                            [ngTemplateOutletContext]=\"getContextRowGroup(rowData)\">\r\n                                        </ng-container>\r\n                                    </ng-container>\r\n                                </span>\r\n                            </a>\r\n                        </div>\r\n                    </td>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"rowGroup\">\r\n                    <ng-container [ngTemplateOutlet]=\"rowGroup\"\r\n                        [ngTemplateOutletContext]=\"getContextRowGroupRoot(rowData, expanded)\">\r\n                    </ng-container>\r\n                </ng-container>\r\n            </tr>\r\n        </ng-template>\r\n        <ng-template pTemplate=\"rowexpansion\" let-columns=\"columns\" let-rowData let-index=\"rowIndex\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"trBody; context: {$implicit: rowData, columns: columns, index: index, expanded: false, eventSelectRow: handleSelectRowGroup, eventChecked: handleCheckRowData_Group}\">\r\n            </ng-container>\r\n            <after-view-checked *ngIf=\"index == _dataSource.length - 1\" style=\"display: none;\" [renderKey]=\"_dataSource\"\r\n                (loaded)=\"handleTableRendered()\">\r\n            </after-view-checked>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"summary\" pTemplate=\"summary\">\r\n            <ng-container *ngTemplateOutlet=\"summary\"></ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"footer\" pTemplate=\"footer\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"footer; context: {$implicit: columns}\"></ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"colgroup\" pTemplate=\"colgroup\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"colgroup; context: {$implicit: columns}\"></ng-container>\r\n        </ng-template>\r\n    </p-table>\r\n    <after-view-checked></after-view-checked>\r\n</ng-template>\r\n<ng-template #trHeader let-columns let-funcCheckAll=\"funcCheckAll\">\r\n    <tr class=\"title-row\">\r\n        <ng-container *ngIf=\"!setting.hiddenCheckbox\">\r\n            <th [style.width]=\"widthCheckbox\" class=\"chkbox link-or-action cell-checkbox\"\r\n                [class.sticky]=\"setting.stickyColumn\">\r\n                <button *ngIf=\"!hasTemplate('headerCheckbox')\" type=\"button\" pButton pRipple icon=\"pi pi-refresh\"\r\n                    class=\"p-button-rounded p-button-text btnReload\" pTooltip=\"L\u00E0m m\u1EDBi d\u1EEF li\u1EC7u\" tooltipPosition=\"top\"\r\n                    [disabled]=\"model.loading\" (click)=\"reload()\"></button>\r\n                <ng-container *ngIf=\"hasTemplate('headerCheckbox')\">\r\n                    <ng-container [ngTemplateOutletContext]=\"{crudList: this}\"\r\n                        [ngTemplateOutlet]=\"getTemplate('headerCheckbox')\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n            </th>\r\n        </ng-container>\r\n        <th *ngIf=\"!setting.hiddenOrderColumn\" [style.width]=\"widthOrderColumn\" class=\"stt nopad center\"\r\n            [class.sticky]=\"setting.stickyColumn\">\r\n            {{ 'TT' |translate}}\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <th *ngIf=\"rowExpansion\" class=\"nopad row-expansion-toggle center\" style=\"width: 2.5rem\"\r\n            [class.sticky]=\"setting.stickyColumn\">\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <ng-container *ngFor=\"let col of columns; let i = index\">\r\n            <th *ngIf=\"col && col.visible && col.field!='function'\" [ngStyle]=\"col.extendData.headerStyle\"\r\n                [pTooltip]=\"col.fullLabel\" tooltipStyleClass=\"unset-width\" [class]=\"col.extendData.headerClass\"\r\n                [class.first-th]=\"i==0\" [escape]=\"false\" tooltipPosition=\"top\" [tnSortableColumn]=\"col.field\">\r\n                <ng-container *ngTemplateOutlet=\"contentTh; context: {$implicit: col}\"></ng-container>\r\n                <ng-container *ngIf=\"col.sort || col.sortClient\">\r\n                    <ng-container *ngTemplateOutlet=\"sortIcon; context: {field: col.field}\"></ng-container>\r\n                </ng-container>\r\n            </th>\r\n        </ng-container>\r\n        <th *ngIf=\"enableReorderRow\" style=\"width: 30px\">\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <ng-container *ngTemplateOutlet=\"colFunctionHeader\"></ng-container>\r\n    </tr>\r\n    <ng-container *ngTemplateOutlet=\"rowHeaderFilter; context: {columns: columns, funcCheckAll: funcCheckAll}\">\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #rowHeaderFilter let-columns=\"columns\" let-funcCheckAll=\"funcCheckAll\">\r\n    <tr class=\"filter-row\" *ngIf=\"!setting.hiddenFilterRow\">\r\n        <th *ngIf=\"!setting.hiddenCheckbox\" class=\"chkbox nopad center\" [class.sticky]=\"setting.stickyColumn\"\r\n            [class.tricheckbox-custom-false]=\"checkedAll === false\" [style.width]=\"widthCheckbox\">\r\n            <p-triStateCheckbox [(ngModel)]=\"checkedAll\" binary=\"true\" (onChange)=\"funcCheckAll()\">\r\n            </p-triStateCheckbox>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <th *ngIf=\"!setting.hiddenOrderColumn\" class=\"stt center v-top\" [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=\"'decimal'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"filterNumber\"\r\n                                        [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"'date'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"filterDate\"\r\n                                        [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"'datetime'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"filterDate\"\r\n                                        [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"'boolean'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"filterBoolean\"\r\n                                        [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchDefault>\r\n                                    <ng-container [ngTemplateOutlet]=\"filterText\"\r\n                                        [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n            </th>\r\n        </ng-container>\r\n        <th *ngIf=\"enableReorderRow\" style=\"width: 30px\">\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <th *ngIf=\"!setting.hiddenFunctionColumn\" class=\"center setting-cell column-function\"\r\n            [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.hiddenSettingWorkflowNew\" 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            [style.width]=\"widthFunctionColumn || _widthFunctionColumn\">\r\n            <div class=\"cell-header-function\">\r\n                <span>{{'GRID.FUNCTION'| translate}}</span>\r\n            </div>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #contentTh let-col>\r\n    <ng-container *ngIf=\"templateHeaderContent[col.field]\">\r\n        <ng-container *ngTemplateOutlet=\"templateHeaderContent[col.field]\"></ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!templateHeaderContent[col.field]\">\r\n        {{col.label}}\r\n    </ng-container>\r\n    <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n</ng-template>\r\n<ng-template #trBody let-rowData let-columns=\"columns\" let-index=\"index\" let-expanded=\"expanded\"\r\n    let-eventSelectRow=\"eventSelectRow\" let-eventChecked=\"eventChecked\">\r\n    <tr [tnReorderableRow]=\"index\" [attr.rowIndex]=\"index\"\r\n        [ngClass]=\"mergeClassObj(rowData, { 'ui-state-highlight': rowData._checked })\" [pTooltip]=\"rowData.tooltip\"\r\n        tooltipPosition=\"top\" [tooltipStyleClass]=\"rowData.tooltipClass\" [escape]=\"escape\"\r\n        (click)=\"eventSelectRow($event, rowData)\">\r\n        <ng-container *ngIf=\"!setting.hiddenCheckbox\">\r\n            <td [style.width]=\"widthCheckbox\" class=\"chkbox link-or-action cell-checkbox\"\r\n                [class.sticky]=\"setting.stickyColumn\">\r\n                <ng-container *ngIf=\"!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 || !rowData.hidden[fieldOrder])\"\r\n            [style.width]=\"widthOrderColumn\" 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]=\"getBookmarkColor(rowData, columns)\"></span>\r\n            {{rowData[fieldOrder]}}\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </td>\r\n        <td *ngIf=\"rowExpansion\" class=\"no-padding center row-expansion-toggle\" [class.sticky]=\"setting.stickyColumn\">\r\n            <ng-container *ngTemplateOutlet=\"iconToggleRowData; context: {rowData: rowData, expanded: expanded}\">\r\n            </ng-container>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </td>\r\n        <ng-container\r\n            *ngTemplateOutlet=\"dynamicColBodys; context: {$implicit: columns, rowData: rowData, index: index, expanded: expanded}\">\r\n        </ng-container>\r\n        <td *ngIf=\"enableReorderRow\" class=\"no-padding center\">\r\n            <i class=\"fas fa-arrows-alt\" style=\"cursor:pointer; padding: 8px; color: #555;\" pReorderableRowHandle></i>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </td>\r\n        <ng-container *ngIf=\"!setting.hiddenFunctionColumn\">\r\n            <td class=\"text-center column-function\" style=\"text-align: center;\" [class.sticky]=\"setting.stickyColumn\">\r\n                <div *ngIf=\"hasTemplate('function')\" class=\"p-toolbar-group-center button-group\">\r\n                    <ng-container [ngTemplateOutlet]=\"getTemplate('function')\"\r\n                        [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"></ng-container>\r\n                    <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                </div>\r\n                <div *ngIf=\"!hasTemplate('function')\" class=\"p-toolbar-group-center button-group\">\r\n                    <ng-container [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"\r\n                        [ngTemplateOutlet]=\"getTemplate('buttonBefore')\"></ng-container>\r\n                    <button *ngIf=\"setting.showVersionButton\" type=\"button\" pButton pRipple icon=\"pi pi-calendar\"\r\n                        class=\"p-button-rounded p-button-success link-or-action\" pTooltip=\"Xem l\u1ECBch s\u1EED phi\u00EAn b\u1EA3n\"\r\n                        tooltipPosition=\"top\" (click)=\"showListVersion(rowData)\"></button>\r\n                    <button *ngIf=\"!rowData.hiddenEdit\" type=\"button\" pButton pRipple [disabled]=\"disableEdit(rowData)\"\r\n                        pTooltip=\"{{'FORM.EDIT' | translate}}\" tooltipPosition=\"top\"\r\n                        class=\"p-button-rounded p-button-text p-button-info link-or-action\" icon=\"pi pi-pencil\"\r\n                        (click)=\"edit(rowData)\"></button>\r\n                    <button *ngIf=\"!rowData.hiddenDelete\" type=\"button\" pButton pRipple\r\n                        [disabled]=\"disableDelete(rowData)\" pTooltip=\"{{'FORM.DELETE' | translate}}\"\r\n                        tooltipPosition=\"top\" class=\"p-button-rounded p-button-text p-button-danger link-or-action\"\r\n                        icon=\"pi pi-trash\" (click)=\"delete(rowData)\"></button>\r\n                    <button *ngIf=\"this.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                </div>\r\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n            </td>\r\n        </ng-container>\r\n    </tr>\r\n</ng-template>\r\n<ng-template #dynamicColBodys let-columns let-rowData=\"rowData\" let-index=\"index\" let-expanded=\"expanded\">\r\n    <ng-container *ngFor=\"let col of columns; let i = index\">\r\n        <ng-container\r\n            *ngTemplateOutlet=\"contentTd; context: {$implicit: rowData, col: col, index: index, i: i, expanded: expanded}\">\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #contentTd let-rowData let-col=\"col\" let-index=\"index\" let-expanded=\"expanded\" let-i=\"i\">\r\n    <td *ngIf=\"col && col.visible && col.field != 'function' && (!rowData.hidden || !rowData.hidden[col.field])\"\r\n        [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[col.field]\"\r\n        [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[col.field]\" [ngStyle]=\"col.extendData.style\"\r\n        [class]=\"col.cellClass\" [class.first-td]=\"i == 0\">\r\n        <span *ngIf=\"col.pipe\">\r\n            <span class=\"p-column-title\" [pTooltip]=\"col.fullLabel\" [escape]=\"false\"\r\n                tooltipPosition=\"top\">{{col.label}}</span>\r\n            {{rowData['pipe__' + col.field]}}\r\n        </span>\r\n        <span *ngIf=\"!col.pipe\">\r\n            <span class=\"p-column-title\" [pTooltip]=\"col.fullLabel\" [escape]=\"false\"\r\n                tooltipPosition=\"top\">{{col.label}}</span>\r\n            <span *ngIf=\"setting.showEditLink && col.showEditLink\" [pTooltip]=\"config.tooltipView\" tooltipPosition=\"top\"\r\n                class=\"link-or-action\">\r\n                <a href=\"javascript:;\" (click)=\"view(rowData)\" [pTooltip]=\"config.tooltipView\" tooltipPosition=\"top\">\r\n                    <ng-container [ngTemplateOutlet]=\"contentCell\"\r\n                        [ngTemplateOutletContext]=\"getContextCell(rowData, index, col, expanded, this)\">\r\n                    </ng-container>\r\n                </a>\r\n            </span>\r\n            <span *ngIf=\"!setting.showEditLink || !col.showEditLink\">\r\n                <ng-container [ngTemplateOutlet]=\"contentCell\"\r\n                    [ngTemplateOutletContext]=\"getContextCell(rowData, index, col, expanded, this)\">\r\n                </ng-container>\r\n            </span>\r\n        </span>\r\n        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n    </td>\r\n</ng-template>\r\n<ng-template #contentCell let-col=\"col\" let-rowData=\"rowData\" let-rowIndex=\"rowIndex\" let-field=\"field\"\r\n    let-expanded=\"expanded\">\r\n    <ng-container *ngIf=\"col.template\">\r\n        <ng-container [ngTemplateOutlet]=\"col.template\"\r\n            [ngTemplateOutletContext]=\"getContextCell(rowData, rowIndex, col, expanded,this)\">\r\n        </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!col.template\">\r\n        <ng-container [ngSwitch]=\"col.dataType\">\r\n            <span *ngSwitchCase=\"'color'\" style=\"display:block;text-align:center;\">\r\n                <div pTooltip=\"{{rowData[field]}}\" tooltipPosition=\"top\" [ngStyle]=\"{'background-color':rowData[field]}\"\r\n                    style=\"width:30px;height:30px;margin:0 auto;\"></div>\r\n            </span>\r\n            <span *ngSwitchCase=\"'icon'\" style=\"display:block;text-align:center;\">\r\n                <i pTooltip=\"{{rowData[field]}}\" tooltipPosition=\"top\" style=\"text-align: center;\"\r\n                    [ngClass]=\"rowData[field]\"></i>\r\n            </span>\r\n            <span *ngSwitchCase=\"'date'\" pTooltip=\"{{rowData[field] | date:'dd/MM/yyyy'}}\" tooltipPosition=\"top\">\r\n                {{_crudService.renderDate(rowData[field], col.format)}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'datetime'\" pTooltip=\"{{rowData[field] | date:'dd/MM/yyyy HH:mm'}}\"\r\n                tooltipPosition=\"top\">\r\n                {{_crudService.renderDateTime(rowData[field], col.format)}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'user'\" class=\"user\">\r\n                {{rowData[field] | userFormat | async}}\r\n            </span>\r\n            <div *ngSwitchCase=\"'users'\" [innerHTML]=\"rowData[field] | usersFormat | async\">\r\n            </div>\r\n            <span *ngSwitchCase=\"'int'\">\r\n                {{rowData[field]}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'decimal'\">\r\n                {{rowData[field]}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'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=\"'string'\">\r\n                <ng-container *ngTemplateOutlet=\"contentCellString; context: {$implicit: rowData, field: col.field}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"null\">\r\n                <ng-container *ngTemplateOutlet=\"contentCellString; context: {$implicit: rowData, field: col.field}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchDefault>\r\n                <ng-container [ngTemplateOutlet]=\"getComponentByType(col.dataType)\"\r\n                    [ngTemplateOutletContext]=\"getContextCell(rowData, rowIndex, col, expanded, this)\">\r\n                </ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #contentCellString let-rowData let-field=\"field\">\r\n    <span>\r\n        <!-- __sv: Short Value -->\r\n        <ng-container *ngIf=\"rowData[field + '__sv']\">\r\n            <ng-container *ngIf=\"!rowData[field + '__showFull']\">\r\n                {{rowData[field + '__sv']}}\r\n                <span class=\"toggle-showfull\" (click)=\"toggleShowFull(rowData, field)\" pTooltip=\"B\u1EA5m \u0111\u1EC3 xem th\u00EAm\"\r\n                    tooltipPosition=\"top\">[...]</span>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"rowData[field + '__showFull']\">\r\n                {{rowData[field]}}\r\n                <span class=\"toggle-showfull\" (click)=\"toggleShowFull(rowData, field)\">Thu g\u1ECDn</span>\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!rowData[field + '__sv']\">\r\n            {{rowData[field]}}\r\n        </ng-container>\r\n    </span>\r\n</ng-template>\r\n<ng-template #iconToggleRowGroup let-rowData=\"rowData\" let-expanded=\"expanded\">\r\n    <a href=\"javascript:;\" (click)=\"handleToggleRow(rowData, $event)\">\r\n        <i style=\"margin-right:5px\" [ngClass]=\"expanded ? 'fas fa-fw fa-caret-down' : 'fas fa-fw fa-caret-right'\"></i>\r\n    </a>\r\n</ng-template>\r\n<ng-template #iconToggleRowData let-rowData=\"rowData\" let-expanded=\"expanded\">\r\n    <button type=\"button\" pButton pRipple class=\"link-or-action p-button-text p-button-rounded p-button-plain\"\r\n        [icon]=\"expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"\r\n        (click)=\"handleToggleRow(rowData, $event)\"></button>\r\n</ng-template>\r\n<ng-template #_contentRowGroup let-rowData=\"rowData\" let-groupCol=\"groupCol\" let-groupField=\"_groupField\">\r\n    <ng-container [ngTemplateOutlet]=\"contentCell\"\r\n        [ngTemplateOutletContext]=\"{rowData: rowData, col: groupCol, field: _groupField}\">\r\n    </ng-container>\r\n    <span> ({{rowGroupMetadata[rowData[_groupField]].size}})</span>\r\n</ng-template>\r\n<ng-template #trangThaiV5 let-rowData=\"rowData\">\r\n    <div class=\"container-text-workflow\">\r\n        <button *ngIf=\"!rowData.__workflowCode\" pButton class=\"p-button-text link-or-action\" label=\"B\u1EAFt \u0111\u1EA7u\"\r\n            style=\"border: 1px solid #7ca9cd;\" pTooltip=\"B\u1EAFt \u0111\u1EA7u ch\u1EA1y quy tr\u00ECnh\" tooltipPosition=\"top\"\r\n            [disabled]=\"rowData.__startingWorkflow\" (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\r\n            [options]=\"[{value: true, label: 'C\u00F3', icon: 'pi pi-check'}, {value: false, label: 'Kh\u00F4ng', icon: 'pi pi-times'}]\"\r\n            [multiple]=\"true\" [(ngModel)]=\"filterData[col.field]\" (onChange)=\"onChangeBoolean($event, col.field)\">\r\n            <ng-template let-item>\r\n                <i style=\"padding: 3px 0;\" [class]=\"item.icon\"></i>\r\n            </ng-template>\r\n        </p-selectButton>\r\n    </div>\r\n</ng-template>",
                     providers: [i2$1.DecimalPipe, i2$1.DatePipe],
                     styles: [".container-table{display:flex;flex-direction:column;overflow:hidden}.container-table .container-table-inner{display:flex;height:auto;max-height:100%;min-height:60px;position:relative}.container-table-inner>tn-custom-scrollbar{width:100%}.cell-checkbox{text-align:center}.pick-color-row{border:1px solid #d1d1d1;border-radius:2px;bottom:0;cursor:pointer;display:flex;flex-wrap:wrap;height:1.4em;left:0;margin:auto;position:absolute;right:0;top:0;width:1.4em}.pick-color-row>div{background:#84d140;border:1px solid #fff;flex:0 0 50%}.pick-color-row>div:nth-child(2){background:#fc6868}.pick-color-row>div:nth-child(3){background:#fbc02d}.pick-color-row>div:nth-child(4){background:#7dc5ff}.cell-header-function{align-items:center;display:flex}.cell-header-function>span{flex:1 1;text-align:center}.cell-header-function button{height:24px;margin:0;padding:0;width:24px}.group-icon{color:#256aa2;font-weight:400}.group-icon i{font-size:.8em;margin-right:5px}.center{text-align:center!important}.row-card{height:100%;left:0;position:absolute;top:0;width:5px}.column-function{min-width:80px;padding:0}.custom-search-area{background-color:#f2f2f2;margin:-.5em -1em .5em;padding-left:.5em;padding-right:.5em}.main-container-search-inner{margin-bottom:-.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}::ng-deep crud-list .advance-search-container{display:flex;justify-content:flex-end}::ng-deep crud-list advance-search{display:block;flex:1;max-width:400px}::ng-deep crud-list .ps__rail-x,::ng-deep crud-list .ps__rail-y{z-index:5}::ng-deep crud-list .p-datatable .p-datatable-thead>tr>th.cell-fixed-filter{z-index:999}::ng-deep crud-list .p-datatable .p-datatable-thead>tr>th.cell-fixed-filter .fixed-filter{min-width:200px;position:fixed;z-index:10}::ng-deep crud-list .p-datatable .p-datatable-thead>tr>th .container-icon-loading{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}::ng-deep crud-list .check-all-custom{height:0;position:absolute;width:0}::ng-deep crud-list .cell-header-filter{position:relative}::ng-deep crud-list .cell-header-filter .tn-dropdown{height:32px}::ng-deep crud-list .cell-header-filter tn-mask .p-inputtext{width:100%}::ng-deep crud-list .cell-header-filter .filter-box{background-color:#fff;border-radius:3px;display:flex;min-width:0}::ng-deep crud-list .cell-header-filter .filter-box>div{border:1px solid #ced4da;border-radius:3px 0 0 3px;border-right:none;flex:1;outline:none;overflow:hidden}::ng-deep crud-list .cell-header-filter .filter-box>span{align-items:center;background:#f5f6f8;border:1px solid #ced4da;color:#6c757d;cursor:pointer;display:inline-flex;flex-basis:32px;height:32px;justify-content:center;min-width:unset;outline:none}::ng-deep crud-list .cell-header-filter .filter-box>span.action-clear{border-radius:0 3px 3px 0}::ng-deep crud-list .cell-header-filter .filter-box>span.action-clear.dirty{color:#008eff}::ng-deep crud-list .cell-header-filter .filter-box input{border:none;box-shadow:none!important;padding-left:5px;padding-right:5px}::ng-deep crud-list .cell-header-filter .filter-box:not(.no-transition){transition:min-width .1s}::ng-deep crud-list .cell-header-filter .filter-box.boolean-filter>div{flex:0 0 109px;width:109px}::ng-deep crud-list .cell-header-filter .p-multiselect-label.p-placeholder{padding-left:.5rem;padding-right:.5rem}::ng-deep crud-list .cell-header-filter.focus-within,::ng-deep crud-list .cell-header-filter:focus-within{z-index:10!important}::ng-deep crud-list .cell-header-filter.focus-within .filter-boolean-box .p-button,::ng-deep crud-list .cell-header-filter:focus-within .filter-boolean-box .p-button{z-index:10}::ng-deep crud-list .cell-header-filter.focus-within .filter-box>div,::ng-deep crud-list .cell-header-filter:focus-within .filter-box>div{border-color:#2196f3;box-shadow:0 0 0 .2rem #a6d5fa;z-index:0}::ng-deep crud-list .cell-header-filter.focus-within .short-filter-box,::ng-deep crud-list .cell-header-filter:focus-within .short-filter-box{box-shadow:5px 0 15px 1px rgba(0,0,0,.27058823529411763);min-width:250px;position:absolute;top:calc(50% - 16px);z-index:2}::ng-deep crud-list .cell-header-filter.focus-within .short-filter-box>div,::ng-deep crud-list .cell-header-filter:focus-within .short-filter-box>div{border-color:#2196f3;box-shadow:0 0 0 .2rem #a6d5fa;flex:1;z-index:0}::ng-deep crud-list .cell-header-filter.focus-within .short-filter-box>span.action-clear,::ng-deep crud-list .cell-header-filter:focus-within .short-filter-box>span.action-clear{display:flex}::ng-deep crud-list .cell-header-filter.focus-within .short-filter-box.boolean-filter,::ng-deep crud-list .cell-header-filter:focus-within .short-filter-box.boolean-filter{min-width:140px}::ng-deep crud-list .cell-header-filter.focus-within .short-filter-box.boolean-filter>div,::ng-deep crud-list .cell-header-filter:focus-within .short-filter-box.boolean-filter>div{flex:0 0 109px;width:109px}::ng-deep crud-list .cell-header-filter.focus-within:nth-last-child(2) .short-filter-box,::ng-deep crud-list .cell-header-filter:focus-within:nth-last-child(2) .short-filter-box{left:50%;transform:translateX(-50%)}::ng-deep crud-list .cell-header-filter:last-child .filter-box{right:3px}::ng-deep crud-list .table-border-line{background-color:#eee;position:absolute;z-index:5}::ng-deep crud-list .table-border-line.--left,::ng-deep crud-list .table-border-line.--right{bottom:0;top:0;width:1px}::ng-deep crud-list .table-border-line.--bottom,::ng-deep crud-list .table-border-line.--top{height:1px;left:0;right:0}::ng-deep crud-list .table-border-line.--left{left:0}::ng-deep crud-list .table-border-line.--right{right:0}::ng-deep crud-list .table-border-line.--top{top:0}::ng-deep crud-list .table-border-line.--bottom{bottom:0}::ng-deep crud-list .filter-boolean-box{text-align:center}::ng-deep crud-list .filter-boolean-box .p-selectbutton{white-space:nowrap}::ng-deep crud-list .custom-search-area crud-form{width:100%}::ng-deep crud-list>p-contextmenu{display:none}@media (max-width:640px){::ng-deep crud-list .--table-responsive .p-datatable-wrapper{padding:1px}}"]
                 },] }
@@ -32297,8 +32303,10 @@
             _this.onEdit = new i0.EventEmitter();
             _this.onView = new i0.EventEmitter();
             _this.onDelete = new i0.EventEmitter();
+            _this.onReloaded = new i0.EventEmitter();
             _this.template = {};
             _this.cachedTransforms = {};
+            _this.indexCount = 0;
             return _this;
         }
         Object.defineProperty(TreeTableComponent.prototype, "dataSource", {
@@ -32310,6 +32318,7 @@
                 if (value) {
                     dataSource = value;
                 }
+                this.indexCount = 0;
                 this.processDataSource(dataSource);
                 this._dataSource = dataSource;
             },
@@ -32327,8 +32336,11 @@
             var _this = this;
             if (!dataSource)
                 return;
+            var index = 0;
             dataSource.forEach(function (itemSource) {
                 var source = itemSource.data;
+                source._index = _this.indexCount++;
+                source._indexInParent = index++;
                 if (source.id == undefined) {
                     source.id = _this._commonService.guid();
                 }
@@ -32594,6 +32606,9 @@
             // }
             return this.findTemplate(controlType);
         };
+        TreeTableComponent.prototype.handleTableRendered = function () {
+            this.onReloaded.emit(true);
+        };
         TreeTableComponent.prototype.handleAdd = function (evt) {
             this.onAdd.emit(evt);
         };
@@ -32606,28 +32621,6 @@
         TreeTableComponent.prototype.handleDelete = function (rowData) {
             this.onDelete.emit(rowData);
         };
-        TreeTableComponent.prototype.onNext = function (event) {
-            this.setting.pageSetting.page = this.setting.pageSetting.page + 1;
-            this.getData();
-            this.scrollTop();
-        };
-        TreeTableComponent.prototype.onPrev = function (event) {
-            if (this.setting.pageSetting.page > 1) {
-                this.setting.pageSetting.page = this.setting.pageSetting.page - 1;
-            }
-            this.getData();
-            this.scrollTop();
-        };
-        TreeTableComponent.prototype.onOldest = function (event) {
-            this.setting.pageSetting.page = Math.ceil(this.model.total / this.setting.pageSetting.pageSize);
-            this.getData();
-            this.scrollTop();
-        };
-        TreeTableComponent.prototype.onLatest = function (event) {
-            this.setting.pageSetting.page = 1;
-            this.getData();
-            this.scrollTop();
-        };
         TreeTableComponent.prototype.savePageSize = function () {
             this.savePageSetting();
         };
@@ -32682,7 +32675,7 @@
     TreeTableComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'tn-tree-table',
-                    template: "<div class=\"custom-card card card-w-title tn-g-page-layout-1\">\r\n    <div class=\"ui-helper-clearfix tn-g-page-layout-1__header-area\">\r\n        <div class=\"p-grid ui-fluid custom-p-col page-title-area\">\r\n            <div class=\"main-title p-col-8\">\r\n                <h1>{{setting.title}}</h1>\r\n            </div>\r\n            <div class=\"p-col-4\">\r\n                <paging-next-back-only [model]=\"model\" [setting]=\"setting\" (onOldest)=\"onOldest($event)\"\r\n                    (onNext)=\"onNext($event)\" (onPrev)=\"onPrev($event)\" (onLatest)=\"onLatest($event)\"\r\n                    (onChangeLimitPage)=\"savePageSize()\">\r\n                </paging-next-back-only>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"p-grid crudListToolbar tn-g-page-layout-1__toolbar-area\">\r\n        <div class=\"p-col-8 button-group function-topbar\">\r\n            <button pButton pRipple type=\"button\" label=\"Th\u00EAm m\u1EDBi\" icon=\"pi pi-plus\" class=\"p-button-text\"\r\n                (click)=\"handleAdd($event)\"></button>\r\n            <button pButton pRipple type=\"button\" label=\"\u0110\u00E1nh l\u1EA1i m\u00E3 ph\u00E2n c\u1EA5p\" icon=\"pi pi-plus\" class=\"p-button-text\"\r\n                (click)=\"handleDanhMaPC($event)\"></button>\r\n        </div>\r\n        <div class=\"p-col-4 p-inputgroup\">\r\n            <input [placeholder]=\"'T\u00ECm ki\u1EBFm'\" [(ngModel)]=\"keyword\" pInputText type=\"text\" (change)=\"getData()\">\r\n            <button pButton type=\"button\" class=\"btn-info btn-search\" label=\"T\u00ECm ki\u1EBFm\" (click)=\"getData()\"></button>\r\n        </div>\r\n    </div>\r\n    <div class=\"tn-g-page-layout-1__table-area\">\r\n        <tn-custom-scrollbar [showScrollHorizontal]=\"true\" class=\"--has-border\">\r\n            <p-treeTable #treetable [value]=\"dataSource\" [columns]=\"setting.cols\" styleClass=\"treeOrganization\">\r\n                <ng-template let-columns pTemplate=\"header\">\r\n                    <tr>\r\n                        <th style=\"width: 70px\" class=\"chkbox\">\r\n                            <button 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\"\r\n                                tooltipPosition=\"top\" [disabled]=\"model.loading\" (click)=\"getData()\"></button>\r\n                        </th>\r\n                        <th *ngFor=\"let col of columns\" [ttSortableColumn]=\"col.field\" [style.width]=\"col.width\"\r\n                            [style.textAlign]=\"col.textAlign\" [className]=\"col.class\" [pTooltip]=\"col.fullLabel\"\r\n                            tooltipStyleClass=\"unset-width\" style=\"text-align: center;\">\r\n                            {{col.label}}\r\n                            <p-treeTableSortIcon [field]=\"col.field\"></p-treeTableSortIcon>\r\n                        </th>\r\n                        <th style=\"text-align: center; width: 8em\">\r\n                            Ch\u1EE9c n\u0103ng\r\n                        </th>\r\n                    </tr>\r\n                </ng-template>\r\n                <ng-template let-rowNode let-rowData=\"rowData\" let-index=\"index\" let-columns=\"columns\" pTemplate=\"body\">\r\n                    <tr [ttRow]=\"rowNode\">\r\n                        <td class=\"chkbox\"></td>\r\n                        <ng-container *ngFor=\"let col of columns; let i = index\">\r\n                            <ng-container\r\n                                *ngTemplateOutlet=\"contentTd; context: {$implicit: rowData, rowNode: rowNode, col: col, index: index, i: i}\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <td style=\"text-align: center; width: 8em;\">\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=\"!rowData.hiddenEdit\" type=\"button\" pButton pRipple\r\n                                    pTooltip=\"{{'FORM.EDIT' | translate}}\" tooltipPosition=\"top\"\r\n                                    [disabled]=\"disableEdit(rowData)\"\r\n                                    class=\"p-button-rounded p-button-text p-button-info link-or-action\"\r\n                                    icon=\"pi pi-pencil\" (click)=\"handleEdit(rowData)\"></button>\r\n                                <button *ngIf=\"!rowData.hiddenDelete\" type=\"button\" pButton pRipple\r\n                                    [disabled]=\"disableDelete(rowData)\" pTooltip=\"{{'FORM.DELETE' | translate}}\"\r\n                                    tooltipPosition=\"top\"\r\n                                    class=\"p-button-rounded p-button-text p-button-danger link-or-action\"\r\n                                    icon=\"pi pi-trash\" (click)=\"handleDelete(rowData)\"></button>\r\n                                <!-- <button *ngIf=\"this.menuButtons\" type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\r\n                                    class=\"link-or-action p-button-text p-button-info p-button-rounded\"\r\n                                    pTooltip=\"Ch\u1EE9c n\u0103ng kh\u00E1c\" tooltipPosition=\"top\"\r\n                                    (click)=\"showContextMenu($event, rowData)\"></button> -->\r\n                            </div>\r\n                        </td>\r\n                    </tr>\r\n                </ng-template>\r\n            </p-treeTable>\r\n            <div class=\"row-bottom-sticky\"></div>\r\n        </tn-custom-scrollbar>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #contentTd let-rowData let-rowNode=\"rowNode\" let-col=\"col\" let-index=\"index\" let-i=\"i\">\r\n    <td *ngIf=\"col && col.visible && col.field != 'function' && (!rowData.hidden || !rowData.hidden[col.field])\"\r\n        [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[col.field]\"\r\n        [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[col.field]\" [ngStyle]=\"col.extendData.style\"\r\n        [class]=\"col.cellClass\" [class.first-td]=\"i == 0\">\r\n        <tn-treeTableToggler *ngIf=\"i == 0\" [rowNode]=\"rowNode\"></tn-treeTableToggler>\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)=\"handleView(rowData)\" [pTooltip]=\"config.tooltipView\"\r\n                    tooltipPosition=\"top\">\r\n                    <ng-container [ngTemplateOutlet]=\"contentCell\"\r\n                        [ngTemplateOutletContext]=\"getContextCell(rowData, index, col, 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, 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, this)\">\r\n        </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!col.template\">\r\n        <ng-container [ngSwitch]=\"col.dataType\">\r\n            <span *ngSwitchCase=\"'color'\" style=\"display:block;text-align:center;\">\r\n                <div pTooltip=\"{{rowData[field]}}\" tooltipPosition=\"top\" [ngStyle]=\"{'background-color':rowData[field]}\"\r\n                    style=\"width:30px;height:30px;margin:0 auto;\"></div>\r\n            </span>\r\n            <span *ngSwitchCase=\"'icon'\" style=\"display:block;text-align:center;\">\r\n                <i pTooltip=\"{{rowData[field]}}\" tooltipPosition=\"top\" style=\"text-align: center;\"\r\n                    [ngClass]=\"rowData[field]\"></i>\r\n            </span>\r\n            <span *ngSwitchCase=\"'date'\" pTooltip=\"{{rowData[field] | date:'dd/MM/yyyy'}}\" tooltipPosition=\"top\">\r\n                {{_crudService.renderDate(rowData[field], col.format)}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'datetime'\" pTooltip=\"{{rowData[field] | date:'dd/MM/yyyy HH:mm'}}\"\r\n                tooltipPosition=\"top\">\r\n                {{_crudService.renderDateTime(rowData[field], col.format)}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'user'\" class=\"user\">\r\n                {{rowData[field] | userFormat | async}}\r\n            </span>\r\n            <div *ngSwitchCase=\"'users'\" [innerHTML]=\"rowData[field] | usersFormat | async\">\r\n            </div>\r\n            <span *ngSwitchCase=\"'int'\">\r\n                {{rowData[field]}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'decimal'\">\r\n                {{rowData[field]}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'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=\"'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, 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 #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>",
+                    template: "<div class=\"custom-card card card-w-title tn-g-page-layout-1\">\r\n    <div class=\"ui-helper-clearfix tn-g-page-layout-1__header-area\">\r\n        <div class=\"p-grid ui-fluid custom-p-col page-title-area\">\r\n            <div class=\"main-title p-col-8\">\r\n                <h1>{{setting.title}}</h1>\r\n            </div>\r\n            <div class=\"p-col-4\">\r\n                <paging-next-back-only [model]=\"model\" [setting]=\"setting\" (onChanged)=\"getData()\"\r\n                    (onChangeLimitPage)=\"savePageSize()\">\r\n                </paging-next-back-only>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"p-grid crudListToolbar tn-g-page-layout-1__toolbar-area\">\r\n        <div class=\"p-col-8 button-group function-topbar\">\r\n            <button pButton pRipple type=\"button\" label=\"Th\u00EAm m\u1EDBi\" icon=\"pi pi-plus\" class=\"p-button-text\"\r\n                (click)=\"handleAdd($event)\"></button>\r\n            <button pButton pRipple type=\"button\" label=\"\u0110\u00E1nh l\u1EA1i m\u00E3 ph\u00E2n c\u1EA5p\" icon=\"pi pi-plus\" class=\"p-button-text\"\r\n                (click)=\"handleDanhMaPC($event)\"></button>\r\n        </div>\r\n        <div class=\"p-col-4 p-inputgroup\">\r\n            <input [placeholder]=\"'T\u00ECm ki\u1EBFm'\" [(ngModel)]=\"keyword\" pInputText type=\"text\" (change)=\"getData()\">\r\n            <button pButton type=\"button\" class=\"btn-info btn-search\" label=\"T\u00ECm ki\u1EBFm\" (click)=\"getData()\"></button>\r\n        </div>\r\n    </div>\r\n    <div class=\"tn-g-page-layout-1__table-area\">\r\n        <tn-custom-scrollbar [showScrollHorizontal]=\"true\" class=\"--has-border\">\r\n            <p-treeTable #treetable [value]=\"dataSource\" [columns]=\"setting.cols\" styleClass=\"treeOrganization\">\r\n                <ng-template let-columns pTemplate=\"header\">\r\n                    <tr>\r\n                        <th style=\"width: 270px\" class=\"chkbox\">\r\n                            <button 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\"\r\n                                tooltipPosition=\"top\" [disabled]=\"model.loading\" (click)=\"getData()\"></button>\r\n                        </th>\r\n                        <th *ngFor=\"let col of columns\" [ttSortableColumn]=\"col.field\" [style.width]=\"col.width\"\r\n                            [style.textAlign]=\"col.textAlign\" [className]=\"col.class\" [pTooltip]=\"col.fullLabel\"\r\n                            tooltipStyleClass=\"unset-width\" style=\"text-align: center;\">\r\n                            {{col.label}}\r\n                            <p-treeTableSortIcon [field]=\"col.field\"></p-treeTableSortIcon>\r\n                        </th>\r\n                        <th style=\"text-align: center; width: 8em\">\r\n                            Ch\u1EE9c n\u0103ng\r\n                        </th>\r\n                    </tr>\r\n                </ng-template>\r\n                <ng-template let-rowNode let-rowData=\"rowData\" let-index=\"index\" let-columns=\"columns\" pTemplate=\"body\">\r\n                    <tr [ttRow]=\"rowNode\">\r\n                        <td class=\"chkbox\">{{rowData._index}} {{rowData._indexInParent}}</td>\r\n                        <ng-container *ngFor=\"let col of columns; let i = index\">\r\n                            <ng-container\r\n                                *ngTemplateOutlet=\"contentTd; context: {$implicit: rowData, rowNode: rowNode, col: col, index: index, i: i}\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <td style=\"text-align: center; width: 8em;\">\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=\"!rowData.hiddenEdit\" type=\"button\" pButton pRipple\r\n                                    pTooltip=\"{{'FORM.EDIT' | translate}}\" tooltipPosition=\"top\"\r\n                                    [disabled]=\"disableEdit(rowData)\"\r\n                                    class=\"p-button-rounded p-button-text p-button-info link-or-action\"\r\n                                    icon=\"pi pi-pencil\" (click)=\"handleEdit(rowData)\"></button>\r\n                                <button *ngIf=\"!rowData.hiddenDelete\" type=\"button\" pButton pRipple\r\n                                    [disabled]=\"disableDelete(rowData)\" pTooltip=\"{{'FORM.DELETE' | translate}}\"\r\n                                    tooltipPosition=\"top\"\r\n                                    class=\"p-button-rounded p-button-text p-button-danger link-or-action\"\r\n                                    icon=\"pi pi-trash\" (click)=\"handleDelete(rowData)\"></button>\r\n                                <!-- <button *ngIf=\"this.menuButtons\" type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\r\n                                    class=\"link-or-action p-button-text p-button-info p-button-rounded\"\r\n                                    pTooltip=\"Ch\u1EE9c n\u0103ng kh\u00E1c\" tooltipPosition=\"top\"\r\n                                    (click)=\"showContextMenu($event, rowData)\"></button> -->\r\n                            </div>\r\n                        </td>\r\n                    </tr>\r\n                    <after-view-checked *ngIf=\"rowData._index == indexCount - 1\" style=\"display: none;\"\r\n                        [renderKey]=\"dataSource\" (loaded)=\"handleTableRendered()\">\r\n                    </after-view-checked>\r\n                </ng-template>\r\n            </p-treeTable>\r\n            <div class=\"row-bottom-sticky\"></div>\r\n        </tn-custom-scrollbar>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #contentTd let-rowData let-rowNode=\"rowNode\" let-col=\"col\" let-index=\"index\" let-i=\"i\">\r\n    <td *ngIf=\"col && col.visible && col.field != 'function' && (!rowData.hidden || !rowData.hidden[col.field])\"\r\n        [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[col.field]\"\r\n        [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[col.field]\" [ngStyle]=\"col.extendData.style\"\r\n        [class]=\"col.cellClass\" [class.first-td]=\"i == 0\">\r\n        <tn-treeTableToggler *ngIf=\"i == 0\" [rowNode]=\"rowNode\"></tn-treeTableToggler>\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)=\"handleView(rowData)\" [pTooltip]=\"config.tooltipView\"\r\n                    tooltipPosition=\"top\">\r\n                    <ng-container [ngTemplateOutlet]=\"contentCell\"\r\n                        [ngTemplateOutletContext]=\"getContextCell(rowData, index, col, 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, 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, this)\">\r\n        </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!col.template\">\r\n        <ng-container [ngSwitch]=\"col.dataType\">\r\n            <span *ngSwitchCase=\"'color'\" style=\"display:block;text-align:center;\">\r\n                <div pTooltip=\"{{rowData[field]}}\" tooltipPosition=\"top\" [ngStyle]=\"{'background-color':rowData[field]}\"\r\n                    style=\"width:30px;height:30px;margin:0 auto;\"></div>\r\n            </span>\r\n            <span *ngSwitchCase=\"'icon'\" style=\"display:block;text-align:center;\">\r\n                <i pTooltip=\"{{rowData[field]}}\" tooltipPosition=\"top\" style=\"text-align: center;\"\r\n                    [ngClass]=\"rowData[field]\"></i>\r\n            </span>\r\n            <span *ngSwitchCase=\"'date'\" pTooltip=\"{{rowData[field] | date:'dd/MM/yyyy'}}\" tooltipPosition=\"top\">\r\n                {{_crudService.renderDate(rowData[field], col.format)}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'datetime'\" pTooltip=\"{{rowData[field] | date:'dd/MM/yyyy HH:mm'}}\"\r\n                tooltipPosition=\"top\">\r\n                {{_crudService.renderDateTime(rowData[field], col.format)}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'user'\" class=\"user\">\r\n                {{rowData[field] | userFormat | async}}\r\n            </span>\r\n            <div *ngSwitchCase=\"'users'\" [innerHTML]=\"rowData[field] | usersFormat | async\">\r\n            </div>\r\n            <span *ngSwitchCase=\"'int'\">\r\n                {{rowData[field]}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'decimal'\">\r\n                {{rowData[field]}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'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=\"'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, 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 #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>",
                     styles: [""]
                 },] }
     ];
@@ -32705,7 +32698,8 @@
         onAdd: [{ type: i0.Output }],
         onEdit: [{ type: i0.Output }],
         onView: [{ type: i0.Output }],
-        onDelete: [{ type: i0.Output }]
+        onDelete: [{ type: i0.Output }],
+        onReloaded: [{ type: i0.Output }]
     };
 
     var TableDetailFormComponent = /** @class */ (function (_super) {
@@ -36031,13 +36025,12 @@
 
     var FileManagerComponent = /** @class */ (function (_super) {
         __extends(FileManagerComponent, _super);
-        function FileManagerComponent(_myDriveService, _injector, _messageService, _translateService, _confirmService, _authenService, _tnClientService, _fileVersionService, _moduleConfigService, _notifierService, _signalrService, _fileExplorerService, _fileExplorerNewService, _deviceDetectorService, _folderService, _fileObjectService, _downloadLinkService, _fileManagerService) {
+        function FileManagerComponent(_myDriveService, _injector, _messageService, _translateService, _authenService, _tnClientService, _fileVersionService, _moduleConfigService, _notifierService, _signalrService, _fileExplorerService, _fileExplorerNewService, _deviceDetectorService, _folderService, _fileObjectService, _downloadLinkService, _fileManagerService) {
             var _this = _super.call(this, _injector) || this;
             _this._myDriveService = _myDriveService;
             _this._injector = _injector;
             _this._messageService = _messageService;
             _this._translateService = _translateService;
-            _this._confirmService = _confirmService;
             _this._authenService = _authenService;
             _this._tnClientService = _tnClientService;
             _this._fileVersionService = _fileVersionService;
@@ -36105,6 +36098,7 @@
             _this.typedLink = '';
             _this.showTaiLieuDungChung = false;
             _this.layoutSimpleAll = false;
+            _this.inited = false;
             _this._moduleConfig = _this._moduleConfigService.getConfig();
             _this.apiUploadUrl = _this._fileObjectService.getUploadUrl();
             _this.userId = _this._userService.getUserIdCombine();
@@ -36127,9 +36121,7 @@
                     this._hasLoadedSource = false;
                     this.rootFolderId = null;
                     this.entityKeyChange.emit(this._entityKey);
-                    if (!this.fileDataService) {
-                        this.getRootFolderContent();
-                    }
+                    this.checkAndLoadRootFolderContent();
                 }
                 else {
                     this.resetData();
@@ -36150,11 +36142,12 @@
         });
         FileManagerComponent.prototype.ngOnInit = function () {
             var _this = this;
-            this.layoutSimpleAll = (this.layout === exports.EnumFileLayout.SIMPLE || this.layout === exports.EnumFileLayout.SIMPLE_FOR_LIST);
-            this.loadDetailFromQueryParam = false;
             if (this.control) {
                 this.control._component = this;
             }
+            this.inited = true;
+            this.layoutSimpleAll = (this.layout === exports.EnumFileLayout.SIMPLE || this.layout === exports.EnumFileLayout.SIMPLE_FOR_LIST);
+            this.loadDetailFromQueryParam = false;
             // Lắng khi ký sim số thành công thì load lại file
             this.rootContext.subscribe('KySoSimThanhCong', function (x) {
                 _this._triggerProcessData();
@@ -36170,6 +36163,12 @@
                 this.fileDataService.register(this);
             }
             this.reloadData();
+            this.checkAndLoadRootFolderContent();
+        };
+        FileManagerComponent.prototype.checkAndLoadRootFolderContent = function () {
+            if (!this.inited || this.fileDataService)
+                return;
+            this.getRootFolderContent();
         };
         FileManagerComponent.prototype.getRootFolderContent = function () {
             var _this = this;
@@ -36298,7 +36297,7 @@
                     dataType: 'explorerItem',
                     sort: true,
                     width: 'auto',
-                    allowFilter: false,
+                    fullTextSearch: true,
                 }),
                 new ColumnSchemaBase({
                     field: 'fileSize',
@@ -36312,14 +36311,13 @@
                     field: 'created',
                     dataType: 'datetime',
                     sort: true,
-                    width: '10em',
-                    allowFilter: false,
+                    width: '10em'
                 }),
                 new ColumnSchemaBase({
                     field: 'currentFileVersion',
                     width: '8em',
                     textAlign: 1,
-                    allowFilter: false,
+                    allowFilter: false
                 }),
             ];
             this.initSetting();
@@ -36328,11 +36326,10 @@
             this.setting.heightType = exports.HeightType.dynamic;
             this.setting.hiddenFilterRow = true;
             this.setting.baseService = this._folderService;
-            this.setting.hiddenHeader = true;
             this.setting.hiddenSetting = true;
             this.setting.hiddenSettingWorkflow = true;
             this.setting.hiddenSettingPermission = true;
-            this.setting.hiddenToolbar = true;
+            this.setting.useWorkflowNew = false;
         };
         // Forms.
         FileManagerComponent.prototype.initForms = function () {
@@ -36665,11 +36662,14 @@
         // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> FOLDER MANULATION.
         // Tạo thư mục.
         FileManagerComponent.prototype.createFolder = function () {
-            this.forms.createFolder.formData.data = {
-                serviceCode: this.serviceCode,
-                entity: this.entity,
-                entityKey: this._entityKey,
-                parentFolderId: this.data.currentFolderId,
+            this.forms.createFolder.formData = {
+                formState: exports.FormState.ADD,
+                data: {
+                    serviceCode: this.serviceCode,
+                    entity: this.entity,
+                    entityKey: this._entityKey,
+                    parentFolderId: this.data.currentFolderId,
+                }
             };
             this.forms.createFolder.show = true;
         };
@@ -36967,7 +36967,7 @@
         // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> BREADCRUMBS.
         FileManagerComponent.prototype.setBreadcrumbs = function () {
             return __awaiter(this, void 0, void 0, function () {
-                var rsFolder, rs, index_1;
+                var rsFolder, rs, index_1, breadcrumbs;
                 var _this = this;
                 return __generator(this, function (_b) {
                     switch (_b.label) {
@@ -36985,7 +36985,7 @@
                             if (rs.success && rs.data) {
                                 if (rs.data.length) {
                                     index_1 = 0;
-                                    this.data.breadcrumbs = rs.data.map(function (folder) {
+                                    breadcrumbs = rs.data.map(function (folder) {
                                         var breadcrumb = {
                                             label: index_1 == 0 ? _this.getRootFolderName(folder.name) : folder.name,
                                             id: folder.id,
@@ -36997,6 +36997,12 @@
                                         index_1++;
                                         return breadcrumb;
                                     });
+                                    if (breadcrumbs.length == 1) {
+                                        if (breadcrumbs[0].label == 'Thư mục đính kèm') {
+                                            breadcrumbs.splice(0, 1);
+                                        }
+                                    }
+                                    this.data.breadcrumbs = breadcrumbs;
                                 }
                                 else {
                                     this.data.breadcrumbs = [];
@@ -37030,7 +37036,7 @@
             else {
                 typeOfFolder = 'đính kèm';
             }
-            return folderNamePrefix + " " + typeOfFolder;
+            return "" + folderNamePrefix + typeOfFolder;
         };
         // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> SIGN.
         // TODO: Lưu ý xử lý trường double click vào nút
@@ -37228,11 +37234,10 @@
             this.onSelected.emit(this.model.selectedItems);
         };
         FileManagerComponent.prototype.reloadData = function () {
-            var _this = this;
-            this._fileManagerService.subsVar = this._fileManagerService.
-                invokeReloadFunction.subscribe(function () {
-                _this._triggerProcessData();
-            });
+            // this._fileManagerService.subsVar = this._fileManagerService.
+            //     invokeReloadFunction.subscribe(() => {
+            //         this._triggerProcessData();
+            //     });
         };
         FileManagerComponent.prototype.addAttachLink = function () {
             return __awaiter(this, void 0, void 0, function () {
@@ -37314,7 +37319,7 @@
         { type: i0.Component, args: [{
                     // tslint:disable-next-line: component-selector
                     selector: 'file-manager',
-                    template: "<div *ngIf=\"layout == _layout.LIST\" class=\"full-layout\">\r\n    <div class=\"fm-toolbar\">\r\n        <div class=\"fm-toolbar-buttons\">\r\n            <ng-container *ngIf=\"!readonly\">\r\n                <button *ngIf=\"!hiddenCreateFolder\" pButton pRipple type=\"button\" pTooltip=\"T\u1EA1o th\u01B0 m\u1EE5c m\u1EDBi\"\r\n                    tooltipPosition=\"top\" icon=\"pi pi-folder\" class=\"p-button-text\" label=\"T\u1EA1o th\u01B0 m\u1EE5c\" iconPos=\"left\"\r\n                    (click)=\"createFolder()\">\r\n                </button>\r\n\r\n                <button pButton icon=\"pi pi-cloud-upload\" pTooltip=\"T\u1EA3i t\u1EC7p tin t\u1EEB m\u00E1y t\u00EDnh c\u1EE7a b\u1EA1n\"\r\n                    tooltipPosition=\"top\" type=\"button\" class=\"p-button-text p-button-primary\" label=\"T\u1EA3i l\u00EAn\"\r\n                    (click)=\"selectFile()\"></button>\r\n\r\n                <button pButton icon=\"pi pi-link\" pTooltip=\"T\u1EA3i t\u1EEB li\u00EAn k\u1EBFt trong h\u1EC7 th\u1ED1ng\" tooltipPosition=\"top\"\r\n                    type=\"button\" class=\"p-button-text p-button-primary\" label=\"T\u1EA3i li\u00EAn k\u1EBFt\"\r\n                    (click)=\"showAttachLinkBox = true\"></button>\r\n\r\n                <!--<button *ngIf=\"model.selectedItems && model.selectedItems.length > 1\" class=\"p-button-text\" pButton\r\n                        type=\"button\"\r\n                        pTooltip=\"N\u00E9n & sao ch\u00E9p \u0111\u01B0\u1EDDng d\u1EABn\" tooltipPosition=\"top\" icon=\"fas fa-file-archive\"\r\n                        iconPos=\"left\" label=\"N\u00E9n & sao ch\u00E9p \u0111\u01B0\u1EDDng d\u1EABn\"\r\n                        (click)=\"generateZipLinkAndCopy()\">\r\n                </button>-->\r\n\r\n                <button *ngIf=\"!inTaiLieu && !inTaiLieuChung\" pButton icon=\"pi pi-book\"\r\n                    pTooltip=\"Sao ch\u00E9p t\u1EEB t\u00E0i li\u1EC7u d\u00F9ng chung ho\u1EB7c c\u00E1 nh\u00E2n\" tooltipPosition=\"top\" type=\"button\"\r\n                    class=\"p-button-text\" label=\"T\u00E0i li\u1EC7u\" (click)=\"showTaiLieuDungChung = true;\">\r\n                </button>\r\n\r\n                <button *ngIf=\"canSelect()\" class=\"p-button-text p-button-success\" pButton type=\"button\"\r\n                    pTooltip=\"Di chuy\u1EC3n th\u01B0 m\u1EE5c/t\u1EC7p tin \u0111\u00E3 ch\u1ECDn\" tooltipPosition=\"top\" icon=\"fas fa-arrows-alt\"\r\n                    iconPos=\"left\" label=\"Di chuy\u1EC3n\" (click)=\"moveExplorerItems()\">\r\n                </button>\r\n\r\n                <button *ngIf=\"canSetMove()\" class=\"p-button-text p-button-success\" pButton type=\"button\"\r\n                    pTooltip=\"Di chuy\u1EC3n th\u01B0 m\u1EE5c/t\u1EC7p tin \u0111\u00E3 ch\u1ECDn t\u1EDBi \u0111\u00E2y\" tooltipPosition=\"top\" icon=\"far fa-hand-paper\"\r\n                    iconPos=\"left\" label=\"\u0110\u1EB7t t\u1EA1i \u0111\u00E2y\" (click)=\"setMoveExplorerItems()\">\r\n                </button>\r\n\r\n                <button *ngIf=\"canSetMove()\" icon=\"pi pi-undo\" pButton class=\"p-button-text p-button-secondary\"\r\n                    type=\"button\" pTooltip=\"B\u1ECF di chuy\u1EC3n th\u01B0 m\u1EE5c/t\u1EC7p tin \u0111\u00E3 ch\u1ECDn\" tooltipPosition=\"top\" label=\"B\u1ECF qua\"\r\n                    (click)=\"cancelMove()\">\r\n                </button>\r\n\r\n                <button *ngIf=\"hasSelect()\" pButton type=\"button\"\r\n                    pTooltip=\"{{ 'X\u00F3a th\u01B0 m\u1EE5c/t\u1EC7p tin \u0111\u00E3 ch\u1ECDn' | translate }}\" tooltipPosition=\"top\" icon=\"pi pi-trash\"\r\n                    iconPos=\"left\" class=\"p-button-text p-button-danger\" label=\"X\u00F3a\"\r\n                    (click)=\"deleteMutiple(model.selectedItems)\"></button>\r\n\r\n                <button *ngIf=\"hasSelect()\" class=\"p-button-text p-button-secondary\" pButton type=\"button\"\r\n                    pTooltip=\"N\u00E9n & t\u1EA3i v\u1EC1\" tooltipPosition=\"top\" icon=\"fas fa-file-archive\" iconPos=\"left\"\r\n                    label=\"T\u1EA3i v\u1EC1\" (click)=\"downloadMultiple()\">\r\n                </button>\r\n            </ng-container>\r\n        </div>\r\n        <ng-container *ngTemplateOutlet=\"breadCrumb\"></ng-container>\r\n    </div>\r\n\r\n    <div class=\"fm-grid\">\r\n        <crud-list #crudList [model]=\"model\" [setting]=\"setting\" [dataSource]=\"_dataSource\"\r\n            [disableKeypressControl]=\"true\" [showScrollBar]=\"false\" class=\"--auto-height-content --no-wrapper-padding\"\r\n            [widthFunctionColumn]=\"'8.2rem'\" (onReload)=\"_triggerProcessData($event)\"\r\n            (onRowSelect)=\"onRowSelect($event)\">\r\n\r\n            <ng-template #explorerItem let-rowData='rowData' let-col='col'>\r\n                <span (click)=\"openObject(rowData)\" class=\"pull-left file-ex-icon\"\r\n                    [innerHTML]=\"rowData.name | fileIcon : !rowData.isFile\">\r\n                </span>\r\n\r\n                <span (click)=\"openObject(rowData)\" class=\"{{rowData.class}} file-ex-name\">\r\n                    {{rowData.name}}\r\n                </span>\r\n                <span *ngIf=\"rowData.signatures\" class=\"pull-right signature\" pTooltip=\"Xem chi ti\u1EBFt k\u00FD s\u1ED1\"\r\n                    tooltipPosition=\"top\" (click)=\"viewListSign($event, rowData.signatures)\">\r\n                    <i class=\"fas fa-signature\"></i>\r\n                </span>\r\n            </ng-template>\r\n\r\n            <ng-template #fileSize let-rowData='rowData'>\r\n                <div *ngIf=\"rowData.isFile\">{{rowData.fileSize | fileSize}}</div>\r\n            </ng-template>\r\n\r\n            <ng-template #function let-rowData=\"rowData\" let-crudList=\"crudList\">\r\n                <div class=\"function-list\">\r\n                    <ng-container *ngIf=\"!readonly\">\r\n                        <button class=\"p-button-rounded p-button-text link-or-action\" pButton type=\"button\"\r\n                            tooltipPosition=\"top\" pTooltip=\"{{getButtonTooltip(rowData)}}\"\r\n                            icon=\"{{getButtonIcon(rowData)}}\" (click)=\"onButtonClick(rowData)\"></button>\r\n\r\n                        <button class=\"p-button-danger p-button-rounded p-button-text link-or-action\" pButton\r\n                            type=\"button\" pTooltip=\"X\u00F3a\" tooltipPosition=\"top\" icon=\"pi pi-trash\"\r\n                            (click)=\"deleteFile(rowData)\"></button>\r\n\r\n\r\n                        <button 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, rowData)\"></button>\r\n                    </ng-container>\r\n                    <button *ngIf=\"readonly\" class=\"p-button-secondary p-button-rounded p-button-text link-or-action\"\r\n                        pButton type=\"button\" pTooltip=\"T\u1EA3i v\u1EC1\" tooltipPosition=\"top\" icon=\"pi pi-cloud-download\"\r\n                        (click)=\"download(rowData)\"></button>\r\n                    <button *ngIf=\"readonly\" class=\"p-button-secondary p-button-rounded p-button-text link-or-action\"\r\n                        pButton type=\"button\" pTooltip=\"Sao ch\u00E9p \u0111\u01B0\u1EDDng d\u1EABn\" tooltipPosition=\"top\" icon=\"pi pi-link\"\r\n                        (click)=\"copyDownloadLink(rowData)\"></button>\r\n                </div>\r\n            </ng-template>\r\n        </crud-list>\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"layout == _layout.SIMPLE\" class=\"not-full-layout\" [class.readonly]=\"readonly\">\r\n    <div *ngIf=\"!readonly || data.breadcrumbs.length > 0\" class=\"fm-toolbar\">\r\n        <div class=\"fm-toolbar-buttons\">\r\n            <ng-container *ngIf=\"!readonly\">\r\n                <button *ngIf=\"!hiddenCreateFolder\" (click)=\"createFolder()\" pButton pRipple type=\"button\"\r\n                    pTooltip=\"T\u1EA1o th\u01B0 m\u1EE5c m\u1EDBi\" tooltipPosition=\"top\" icon=\"pi pi-folder\" class=\"p-button-text\"\r\n                    label=\"T\u1EA1o th\u01B0 m\u1EE5c\" iconPos=\"left\">\r\n                </button>\r\n                <button type=\"button\" pButton class=\"p-button-text p-button-info link-or-action\"\r\n                    icon=\"pi pi-cloud-upload\" (click)=\"selectFile()\" label=\"T\u1EA3i l\u00EAn\"></button>\r\n                <button pButton icon=\"pi pi-link\" pTooltip=\"T\u1EA3i t\u1EEB li\u00EAn k\u1EBFt trong h\u1EC7 th\u1ED1ng\" tooltipPosition=\"top\"\r\n                    type=\"button\" class=\"p-button-text p-button-primary\" label=\"T\u1EA3i li\u00EAn k\u1EBFt\"\r\n                    (click)=\"showAttachLinkBox = true\"></button>\r\n                <button *ngIf=\"!inTaiLieu\" pButton icon=\"pi pi-book\" pTooltip=\"T\u00E0i li\u1EC7u d\u00F9ng chung\"\r\n                    tooltipPosition=\"top\" type=\"button\" class=\"p-button-text\" label=\"T\u00E0i li\u1EC7u\"\r\n                    (click)=\"showTaiLieuDungChung = true;\">\r\n                </button>\r\n            </ng-container>\r\n        </div>\r\n        <ng-container *ngTemplateOutlet=\"breadCrumb\"></ng-container>\r\n    </div>\r\n\r\n    <div class=\"nfl-grid\">\r\n        <div *ngFor=\"let rowData of _dataSource; index as i\" class=\"nfl-item\">\r\n            <div class=\"nfl-no\">\r\n                {{i + 1}}.\r\n            </div>\r\n\r\n            <div class=\"nfl-name\">\r\n                <span class=\"pull-left file-ex-icon\" [innerHTML]=\"rowData.name | fileIcon : !rowData.isFile\">\r\n                </span>\r\n                <a (click)=\"openObject(rowData)\" class=\"{{rowData.class}} file-ex-name\">\r\n                    <span>\r\n                        <span>{{rowData.name}}</span>\r\n                    </span>\r\n                </a>\r\n            </div>\r\n            <div *ngIf=\"rowData.signatures\" class=\"nfl-signature signature\" pTooltip=\"Xem chi ti\u1EBFt k\u00FD s\u1ED1\"\r\n                tooltipPosition=\"top\" (click)=\"viewListSign($event, rowData.signatures)\">\r\n                <i class=\"fas fa-signature\"></i>\r\n            </div>\r\n            <div *ngIf=\"rowData.isFile\" class=\"nfl-version\">\r\n                v{{rowData.currentFileVersion}}\r\n            </div>\r\n\r\n            <div class=\"nfl-function\">\r\n                <ng-container *ngIf=\"!readonly\">\r\n                    <button class=\"p-button-rounded p-button-text link-or-action\" (click)=\"onButtonClick(rowData)\"\r\n                        pButton type=\"button\" tooltipPosition=\"top\" pTooltip=\"{{getButtonTooltip(rowData)}}\"\r\n                        icon=\"{{getButtonIcon(rowData)}}\"></button>\r\n\r\n                    <button class=\"p-button-danger p-button-rounded p-button-text link-or-action\"\r\n                        (click)=\"deleteFile(rowData)\" pButton type=\"button\" pTooltip=\"X\u00F3a\" tooltipPosition=\"top\"\r\n                        icon=\"pi pi-trash\"></button>\r\n                </ng-container>\r\n\r\n                <button *ngIf=\"readonly\" class=\"p-button-secondary p-button-rounded p-button-text link-or-action\"\r\n                    (click)=\"download(rowData)\" pButton type=\"button\" pTooltip=\"T\u1EA3i v\u1EC1\" tooltipPosition=\"top\"\r\n                    icon=\"pi pi-cloud-download\"></button>\r\n                <button *ngIf=\"readonly\" class=\"p-button-secondary p-button-rounded p-button-text link-or-action\"\r\n                    pButton type=\"button\" pTooltip=\"Sao ch\u00E9p \u0111\u01B0\u1EDDng d\u1EABn\" tooltipPosition=\"top\" icon=\"pi pi-link\"\r\n                    (click)=\"copyDownloadLink(rowData)\"></button>\r\n                <button 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, rowData)\"></button>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"!_dataSource || !_dataSource.length\" class=\"nfl-no-item\">\r\n            Ch\u01B0a c\u00F3 t\u00E0i li\u1EC7u \u0111\u01B0\u1EE3c t\u1EA3i l\u00EAn\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"layout == _layout.SIMPLE_FOR_LIST\" class=\"not-full-layout\" [class.readonly]=\"readonly\">\r\n    <div *ngIf=\"!readonly || data.breadcrumbs.length > 0\" class=\"fm-toolbar\">\r\n        <div class=\"fm-toolbar-buttons\">\r\n            <ng-container *ngIf=\"!readonly\">\r\n                <button *ngIf=\"!hiddenCreateFolder\" (click)=\"createFolder()\" pButton pRipple type=\"button\"\r\n                    pTooltip=\"T\u1EA1o th\u01B0 m\u1EE5c m\u1EDBi\" tooltipPosition=\"top\" icon=\"pi pi-folder\" class=\"p-button-text\"\r\n                    label=\"T\u1EA1o th\u01B0 m\u1EE5c\" iconPos=\"left\">\r\n                </button>\r\n                <button type=\"button\" pButton class=\"p-button-text p-button-info link-or-action\"\r\n                    icon=\"pi pi-cloud-upload\" (click)=\"selectFile()\" label=\"T\u1EA3i l\u00EAn\"></button>\r\n                <button pButton icon=\"pi pi-link\" pTooltip=\"T\u1EA3i t\u1EEB li\u00EAn k\u1EBFt trong h\u1EC7 th\u1ED1ng\" tooltipPosition=\"top\"\r\n                    type=\"button\" class=\"p-button-text p-button-primary\" label=\"T\u1EA3i li\u00EAn k\u1EBFt\"\r\n                    (click)=\"showAttachLinkBox = true\"></button>\r\n                <button *ngIf=\"!inTaiLieu\" pButton icon=\"pi pi-book\" pTooltip=\"T\u00E0i li\u1EC7u d\u00F9ng chung\"\r\n                    tooltipPosition=\"top\" type=\"button\" class=\"p-button-text\" label=\"T\u00E0i li\u1EC7u\"\r\n                    (click)=\"showTaiLieuDungChung = true;\">\r\n                </button>\r\n            </ng-container>\r\n        </div>\r\n        <ng-container *ngTemplateOutlet=\"breadCrumb\"></ng-container>\r\n    </div>\r\n\r\n    <div class=\"nfl-grid\">\r\n        <div *ngFor=\"let rowData of _dataSource; index as i\" class=\"nfl-item\">\r\n            <div class=\"nfl-no\">\r\n                {{i + 1}}.\r\n            </div>\r\n\r\n            <div class=\"nfl-name\">\r\n                <span class=\"pull-left file-ex-icon\" [innerHTML]=\"rowData.name | fileIcon : !rowData.isFile\">\r\n                </span>\r\n\r\n                <a (click)=\"openObject(rowData)\" class=\"{{rowData.class}} file-ex-name\">\r\n                    <span>\r\n                        <span>{{rowData.name}}</span>\r\n                        <!-- <div *ngIf=\"rowData.signatures\" class=\"signature\" pTooltip=\"Xem chi ti\u1EBFt k\u00FD s\u1ED1\"\r\n                            tooltipPosition=\"top\" (click)=\"viewListSign($event, rowData.signatures)\">\r\n                            <i class=\"fas fa-signature\"></i>\r\n                        </div> -->\r\n                    </span>\r\n                    <!-- <span class=\"file-ex-extension\">{{rowData.extension}}</span> -->\r\n                </a>\r\n            </div>\r\n\r\n            <div class=\"nfl-function\">\r\n                <ng-container *ngIf=\"!readonly\">\r\n                    <button class=\"p-button-rounded p-button-text link-or-action\" (click)=\"onButtonClick(rowData)\"\r\n                        pButton type=\"button\" tooltipPosition=\"top\" pTooltip=\"{{getButtonTooltip(rowData)}}\"\r\n                        icon=\"{{getButtonIcon(rowData)}}\"></button>\r\n\r\n                    <button class=\"p-button-danger p-button-rounded p-button-text link-or-action\"\r\n                        (click)=\"deleteFile(rowData)\" pButton type=\"button\" pTooltip=\"X\u00F3a\" tooltipPosition=\"top\"\r\n                        icon=\"pi pi-trash\"></button>\r\n                </ng-container>\r\n                <!--\r\n                <button *ngIf=\"readonly\" class=\"p-button-secondary p-button-rounded p-button-text link-or-action\"\r\n                        (click)=\"download(rowData)\" pButton type=\"button\" pTooltip=\"T\u1EA3i v\u1EC1\" tooltipPosition=\"top\"\r\n                        icon=\"pi pi-cloud-download\"></button>\r\n                <button *ngIf=\"readonly\" class=\"p-button-secondary p-button-rounded p-button-text link-or-action\"\r\n                        pButton type=\"button\" pTooltip=\"Sao ch\u00E9p \u0111\u01B0\u1EDDng d\u1EABn\" tooltipPosition=\"top\" icon=\"pi pi-link\"\r\n                        (click)=\"copyDownloadLink(rowData)\"></button> -->\r\n                <button 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, rowData)\"></button>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"!_dataSource || !_dataSource.length\" class=\"nfl-no-item\">\r\n            Ch\u01B0a c\u00F3 t\u00E0i li\u1EC7u \u0111\u01B0\u1EE3c t\u1EA3i l\u00EAn\r\n        </div>\r\n    </div>\r\n</div>\r\n<ng-template #breadCrumb>\r\n    <div *ngIf=\"data.breadcrumbs.length > 1\" class=\"fm-toolbar-path\">\r\n        <p-breadcrumb class=\"customBreadCrumb\" [model]=\"data.breadcrumbs\"></p-breadcrumb>\r\n    </div>\r\n</ng-template>\r\n\r\n<p-fileUpload #fileControl [ngStyle]=\"{'display': 'none'}\" mode=\"basic\" [chooseLabel]=\"chooseLabel\" name=\"file\"\r\n    [url]=\"apiUploadUrl\" [maxFileSize]=\"maxFileSize\" auto=\"true\"\r\n    [invalidFileSizeMessageSummary]=\"invalidFileSizeMessageSummary\"\r\n    [invalidFileSizeMessageDetail]=\"invalidFileSizeMessageDetail\"\r\n    [invalidFileTypeMessageSummary]=\"invalidFileTypeMessageSummary\"\r\n    [invalidFileTypeMessageDetail]=\"invalidFileTypeMessageDetail\"\r\n    [invalidFileLimitMessageSummary]=\"invalidFileLimitMessageSummary\"\r\n    [invalidFileLimitMessageDetail]=\"invalidFileLimitMessageDetail\" (onProgress)=\"onUploadProgress($event)\"\r\n    (onBeforeUpload)=\"onBeforeUpload($event)\" (onSelect)=\"handleSelectFile($event)\" (onUpload)=\"onUploaded($event)\"\r\n    [accept]=\"control ? control.accept: null\">\r\n</p-fileUpload>\r\n<p-contextMenu #contextMenu [appendTo]=\"'body'\" [model]=\"data.itemsMenuFile\" styleClass=\"fm-contextMenu-panel\">\r\n</p-contextMenu>\r\n\r\n<!-- T\u1EA1o m\u1EDBi/ \u0111\u1ED5i t\u00EAn th\u01B0 m\u1EE5c -->\r\n<tn-dialog *ngIf=\"forms.createFolder.show\" #dialog [styleClass]=\"'address-form'\"\r\n    [header]=\"forms.createFolder.header | translate\" [popupSize]=\"forms[formIds.createFolder].popupSize\"\r\n    (onHide)=\"onCancelForm(formIds.createFolder)\">\r\n    <folder-form #formBase [parentModel]=\"model\" [parentContext]=\"context\"\r\n        [model]=\"forms[formIds.createFolder].formData\" (onSaved)=\"onSavedForm(formIds.createFolder)\"\r\n        (onCancel)=\"onCancelForm(formIds.createFolder)\">\r\n    </folder-form>\r\n</tn-dialog>\r\n\r\n<!-- \u0110\u1ED5i t\u00EAn file -->\r\n<tn-dialog *ngIf=\"forms.renameFile.show\" #dialog [styleClass]=\"'address-form'\"\r\n    [header]=\"forms.renameFile.header | translate\" [popupSize]=\"forms[formIds.renameFile].popupSize\"\r\n    (onHide)=\"onCancelForm(formIds.renameFile)\">\r\n    <file-form #formBase [parentModel]=\"model\" [parentContext]=\"context\" [model]=\"forms[formIds.renameFile].formData\"\r\n        (onSaved)=\"onSavedForm(formIds.renameFile)\" (onCancel)=\"onCancelForm(formIds.renameFile)\">\r\n    </file-form>\r\n</tn-dialog>\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)=\"closeFileViewer()\">\r\n</file-viewer>\r\n\r\n<!-- Xem phi\u00EAn b\u1EA3n -->\r\n<tn-dialog *ngIf=\"forms.fileVersionList.show\" #dialog [styleClass]=\"'address-form'\"\r\n    [header]=\"forms.fileVersionList.header | translate\" [popupSize]=\"forms[formIds.fileVersionList].popupSize\"\r\n    (onHide)=\"onCancelForm(formIds.fileVersionList)\">\r\n    <file-version-list *ngIf=\"forms.fileVersionList.show\" [parentModel]=\"model\" [parentContext]=\"context\"\r\n        [fileId]=\"forms[formIds.fileVersionList].fileId\" [readonly]=\"readonly\">\r\n    </file-version-list>\r\n</tn-dialog>\r\n\r\n<tn-dialog *ngIf=\"showAttachLinkBox\" #dialog2 [maximizable]=\"false\" [header]=\"'Nh\u1EADp li\u00EAn k\u1EBFt' | translate\"\r\n    [popupSize]=\"{ width: 600, height: 50}\" (onHide)=\"showAttachLinkBox = false; typedLink=''\">\r\n    <div class=\"p-col-12\">\r\n        <div class=\"p-grid\">\r\n            <div class=\"p-md-10\">\r\n                <input #input type=\"text\" placeholder=\"Nh\u1EADp li\u00EAn k\u1EBFt sao ch\u00E9p t\u1EEB t\u1EC7p tin kh\u00E1c...\"\r\n                    (keyup.enter)=\"addAttachLink()\" pInputText [(ngModel)]=\"typedLink\" class=\"p-col-12\" />\r\n            </div>\r\n            <div class=\"p-md-2\">\r\n                <button type=\"button\" (click)=\"addAttachLink()\" [disabled]=\"typedLink != ''? null : true\" pButton\r\n                    class=\"p-button-primary p-col-12\" label=\"Ok\"></button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <after-view-checked (loaded)=\"focusInput(input)\"></after-view-checked>\r\n</tn-dialog>\r\n\r\n<tn-dialog #dialog3 *ngIf=\"showTaiLieuDungChung\" [header]=\"'T\u00E0i li\u1EC7u' |translate\"\r\n    [popupSize]=\"{ width:1024, height: 800 }\" (onHide)=\"showTaiLieuDungChung = false\">\r\n    <file-tai-lieu #formBase [originalFolderId]=\"data.currentFolderId\"\r\n        (onSaved)=\"showTaiLieuDungChung = false; this._triggerProcessData()\" (onCancel)=\"showTaiLieuDungChung = false\">\r\n    </file-tai-lieu>\r\n</tn-dialog>\r\n\r\n<!--\r\n\r\n<share-file *ngIf=\"forms.shareFile.show\" [parentDataModel]=\"model\" [parentDataContext]=\"context\"\r\n    [model]=\"forms.shareFile.formData\">\r\n</share-file>\r\n\r\n<share-folder *ngIf=\"forms.shareFolder.show\" [parentDataModel]=\"model\" [parentDataContext]=\"context\"\r\n    [model]=\"forms.shareFolder.formData\">\r\n</share-folder>\r\n -->\r\n\r\n<!-- Xem ch\u1EEF k\u00FD s\u1ED1 -->\r\n<tn-dialog *ngIf=\"forms.signatureDetail.show\" #dialog [styleClass]=\"'address-form'\"\r\n    [header]=\"forms.signatureDetail.header | translate\" [popupSize]=\"forms[formIds.signatureDetail].popupSize\"\r\n    (onHide)=\"onCancelForm(formIds.signatureDetail)\">\r\n    <signature-detail [parentModel]=\"model\" [parentContext]=\"context\">\r\n    </signature-detail>\r\n</tn-dialog>\r\n<!--K\u00FD s\u1ED1 sim-->\r\n<tn-dialog *ngIf=\"forms.kySoSim.show\" #dialog [styleClass]=\"'address-form'\" [header]=\"forms.kySoSim.header | translate\"\r\n    [popupSize]=\"forms.kySoSim.popupSize\" [showFooter]=\"true\" (onHide)=\"onCancelForm(formIds.kySoSim)\">\r\n    <app-file-ky-so-sim #fileKySoSim [parentModel]=\"model\" [parentContext]=\"context\">\r\n    </app-file-ky-so-sim>\r\n    <ng-template #footer>\r\n        <button type=\"button\" pButton icon=\"fas fa-images\" [disabled]=\"model.submitting\" class=\"p-button-text\"\r\n            [label]=\"'Ch\u1ECDn ch\u1EEF k\u00FD' | translate\" (click)=\"chonChuKy()\"></button>\r\n        <button type=\"button\" pButton icon=\"fas fa-signature\" class=\"p-button-text ui-button-success\"\r\n            [disabled]=\"model.submitting\" [label]=\"'Th\u1EF1c hi\u1EC7n k\u00FD' | translate\" (click)=\"kySo()\"></button>\r\n        <button type=\"button\" pButton icon=\"pi pi-replay\" class=\"p-button-text p-button-secondary\"\r\n            [label]=\"'FORM.CANCEL' | translate\" preventTab (click)=\"forms.kySoSim.show=false\"></button>\r\n    </ng-template>\r\n</tn-dialog>",
+                    template: "<div *ngIf=\"layout == _layout.LIST\" class=\"full-layout\">\r\n    <div class=\"fm-grid\">\r\n        <crud-list #crudList [model]=\"model\" [setting]=\"setting\" [dataSource]=\"_dataSource\"\r\n            [disableKeypressControl]=\"true\" [showScrollBar]=\"false\" class=\"--auto-height-content --no-wrapper-padding\"\r\n            [widthFunctionColumn]=\"'8.2rem'\" (onReload)=\"_triggerProcessData($event)\"\r\n            (onRowSelect)=\"onRowSelect($event)\">\r\n            <ng-template #customTitle>\r\n                <ng-container *ngTemplateOutlet=\"breadCrumb\"></ng-container>\r\n            </ng-template>\r\n            <ng-template #toolbar>\r\n                <button *ngIf=\"!hiddenCreateFolder\" pButton pRipple type=\"button\" pTooltip=\"T\u1EA1o th\u01B0 m\u1EE5c m\u1EDBi\"\r\n                    tooltipPosition=\"top\" icon=\"pi pi-folder\" class=\"p-button-text\" label=\"T\u1EA1o th\u01B0 m\u1EE5c\" iconPos=\"left\"\r\n                    (click)=\"createFolder()\">\r\n                </button>\r\n\r\n                <button pButton icon=\"pi pi-cloud-upload\" pTooltip=\"T\u1EA3i t\u1EC7p tin t\u1EEB m\u00E1y t\u00EDnh c\u1EE7a b\u1EA1n\"\r\n                    tooltipPosition=\"top\" type=\"button\" class=\"p-button-text p-button-primary\" label=\"T\u1EA3i l\u00EAn\"\r\n                    (click)=\"selectFile()\"></button>\r\n\r\n                <button pButton icon=\"pi pi-link\" pTooltip=\"T\u1EA3i t\u1EEB li\u00EAn k\u1EBFt trong h\u1EC7 th\u1ED1ng\" tooltipPosition=\"top\"\r\n                    type=\"button\" class=\"p-button-text p-button-primary\" label=\"T\u1EA3i li\u00EAn k\u1EBFt\"\r\n                    (click)=\"showAttachLinkBox = true\"></button>\r\n\r\n                <button *ngIf=\"!inTaiLieu && !inTaiLieuChung\" pButton icon=\"pi pi-book\"\r\n                    pTooltip=\"Sao ch\u00E9p t\u1EEB t\u00E0i li\u1EC7u d\u00F9ng chung ho\u1EB7c c\u00E1 nh\u00E2n\" tooltipPosition=\"top\" type=\"button\"\r\n                    class=\"p-button-text\" label=\"T\u00E0i li\u1EC7u\" (click)=\"showTaiLieuDungChung = true;\">\r\n                </button>\r\n\r\n                <button *ngIf=\"canSelect()\" class=\"p-button-text p-button-success\" pButton type=\"button\"\r\n                    pTooltip=\"Di chuy\u1EC3n th\u01B0 m\u1EE5c/t\u1EC7p tin \u0111\u00E3 ch\u1ECDn\" tooltipPosition=\"top\" icon=\"fas fa-arrows-alt\"\r\n                    iconPos=\"left\" label=\"Di chuy\u1EC3n\" (click)=\"moveExplorerItems()\">\r\n                </button>\r\n\r\n                <button *ngIf=\"canSetMove()\" class=\"p-button-text p-button-success\" pButton type=\"button\"\r\n                    pTooltip=\"Di chuy\u1EC3n th\u01B0 m\u1EE5c/t\u1EC7p tin \u0111\u00E3 ch\u1ECDn t\u1EDBi \u0111\u00E2y\" tooltipPosition=\"top\" icon=\"far fa-hand-paper\"\r\n                    iconPos=\"left\" label=\"\u0110\u1EB7t t\u1EA1i \u0111\u00E2y\" (click)=\"setMoveExplorerItems()\">\r\n                </button>\r\n\r\n                <button *ngIf=\"canSetMove()\" icon=\"pi pi-undo\" pButton class=\"p-button-text p-button-secondary\"\r\n                    type=\"button\" pTooltip=\"B\u1ECF di chuy\u1EC3n th\u01B0 m\u1EE5c/t\u1EC7p tin \u0111\u00E3 ch\u1ECDn\" tooltipPosition=\"top\" label=\"B\u1ECF qua\"\r\n                    (click)=\"cancelMove()\">\r\n                </button>\r\n\r\n                <button *ngIf=\"hasSelect()\" pButton type=\"button\"\r\n                    pTooltip=\"{{ 'X\u00F3a th\u01B0 m\u1EE5c/t\u1EC7p tin \u0111\u00E3 ch\u1ECDn' | translate }}\" tooltipPosition=\"top\" icon=\"pi pi-trash\"\r\n                    iconPos=\"left\" class=\"p-button-text p-button-danger\" label=\"X\u00F3a\"\r\n                    (click)=\"deleteMutiple(model.selectedItems)\"></button>\r\n\r\n                <button *ngIf=\"hasSelect()\" class=\"p-button-text p-button-secondary\" pButton type=\"button\"\r\n                    pTooltip=\"N\u00E9n & t\u1EA3i v\u1EC1\" tooltipPosition=\"top\" icon=\"fas fa-file-archive\" iconPos=\"left\"\r\n                    label=\"T\u1EA3i v\u1EC1\" (click)=\"downloadMultiple()\">\r\n                </button>\r\n            </ng-template>\r\n\r\n            <ng-template #explorerItem let-rowData='rowData' let-col='col'>\r\n                <span (click)=\"openObject(rowData)\" class=\"pull-left file-ex-icon\"\r\n                    [innerHTML]=\"rowData.name | fileIcon : !rowData.isFile\">\r\n                </span>\r\n\r\n                <span (click)=\"openObject(rowData)\" class=\"{{rowData.class}} file-ex-name\">\r\n                    {{rowData.name}}\r\n                </span>\r\n                <span *ngIf=\"rowData.signatures\" class=\"pull-right signature\" pTooltip=\"Xem chi ti\u1EBFt k\u00FD s\u1ED1\"\r\n                    tooltipPosition=\"top\" (click)=\"viewListSign($event, rowData.signatures)\">\r\n                    <i class=\"fas fa-signature\"></i>\r\n                </span>\r\n            </ng-template>\r\n\r\n            <ng-template #fileSize let-rowData='rowData'>\r\n                <div *ngIf=\"rowData.isFile\">{{rowData.fileSize | fileSize}}</div>\r\n            </ng-template>\r\n\r\n            <ng-template #function let-rowData=\"rowData\" let-crudList=\"crudList\">\r\n                <div class=\"function-list\">\r\n                    <ng-container *ngIf=\"!readonly\">\r\n                        <button class=\"p-button-rounded p-button-text link-or-action\" pButton type=\"button\"\r\n                            tooltipPosition=\"top\" pTooltip=\"{{getButtonTooltip(rowData)}}\"\r\n                            icon=\"{{getButtonIcon(rowData)}}\" (click)=\"onButtonClick(rowData)\"></button>\r\n\r\n                        <button class=\"p-button-danger p-button-rounded p-button-text link-or-action\" pButton\r\n                            type=\"button\" pTooltip=\"X\u00F3a\" tooltipPosition=\"top\" icon=\"pi pi-trash\"\r\n                            (click)=\"deleteFile(rowData)\"></button>\r\n\r\n\r\n                        <button 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, rowData)\"></button>\r\n                    </ng-container>\r\n                    <button *ngIf=\"readonly\" class=\"p-button-secondary p-button-rounded p-button-text link-or-action\"\r\n                        pButton type=\"button\" pTooltip=\"T\u1EA3i v\u1EC1\" tooltipPosition=\"top\" icon=\"pi pi-cloud-download\"\r\n                        (click)=\"download(rowData)\"></button>\r\n                    <button *ngIf=\"readonly\" class=\"p-button-secondary p-button-rounded p-button-text link-or-action\"\r\n                        pButton type=\"button\" pTooltip=\"Sao ch\u00E9p \u0111\u01B0\u1EDDng d\u1EABn\" tooltipPosition=\"top\" icon=\"pi pi-link\"\r\n                        (click)=\"copyDownloadLink(rowData)\"></button>\r\n                </div>\r\n            </ng-template>\r\n        </crud-list>\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"layout == _layout.SIMPLE\" class=\"not-full-layout\" [class.readonly]=\"readonly\">\r\n    <div *ngIf=\"!readonly || data.breadcrumbs.length > 0\" class=\"fm-toolbar\">\r\n        <div class=\"fm-toolbar-buttons\">\r\n            <ng-container *ngIf=\"!readonly\">\r\n                <button *ngIf=\"!hiddenCreateFolder\" (click)=\"createFolder()\" pButton pRipple type=\"button\"\r\n                    pTooltip=\"T\u1EA1o th\u01B0 m\u1EE5c m\u1EDBi\" tooltipPosition=\"top\" icon=\"pi pi-folder\" class=\"p-button-text\"\r\n                    label=\"T\u1EA1o th\u01B0 m\u1EE5c\" iconPos=\"left\">\r\n                </button>\r\n                <button type=\"button\" pButton class=\"p-button-text p-button-info link-or-action\"\r\n                    icon=\"pi pi-cloud-upload\" (click)=\"selectFile()\" label=\"T\u1EA3i l\u00EAn\"></button>\r\n                <button pButton icon=\"pi pi-link\" pTooltip=\"T\u1EA3i t\u1EEB li\u00EAn k\u1EBFt trong h\u1EC7 th\u1ED1ng\" tooltipPosition=\"top\"\r\n                    type=\"button\" class=\"p-button-text p-button-primary\" label=\"T\u1EA3i li\u00EAn k\u1EBFt\"\r\n                    (click)=\"showAttachLinkBox = true\"></button>\r\n                <button *ngIf=\"!inTaiLieu\" pButton icon=\"pi pi-book\" pTooltip=\"T\u00E0i li\u1EC7u d\u00F9ng chung\"\r\n                    tooltipPosition=\"top\" type=\"button\" class=\"p-button-text\" label=\"T\u00E0i li\u1EC7u\"\r\n                    (click)=\"showTaiLieuDungChung = true;\">\r\n                </button>\r\n            </ng-container>\r\n        </div>\r\n        <ng-container *ngTemplateOutlet=\"breadCrumb\"></ng-container>\r\n    </div>\r\n\r\n    <div class=\"nfl-grid\">\r\n        <div *ngFor=\"let rowData of _dataSource; index as i\" class=\"nfl-item\">\r\n            <div class=\"nfl-no\">\r\n                {{i + 1}}.\r\n            </div>\r\n\r\n            <div class=\"nfl-name\">\r\n                <span class=\"pull-left file-ex-icon\" [innerHTML]=\"rowData.name | fileIcon : !rowData.isFile\">\r\n                </span>\r\n                <a (click)=\"openObject(rowData)\" class=\"{{rowData.class}} file-ex-name\">\r\n                    <span>\r\n                        <span>{{rowData.name}}</span>\r\n                    </span>\r\n                </a>\r\n            </div>\r\n            <div *ngIf=\"rowData.signatures\" class=\"nfl-signature signature\" pTooltip=\"Xem chi ti\u1EBFt k\u00FD s\u1ED1\"\r\n                tooltipPosition=\"top\" (click)=\"viewListSign($event, rowData.signatures)\">\r\n                <i class=\"fas fa-signature\"></i>\r\n            </div>\r\n            <div *ngIf=\"rowData.isFile\" class=\"nfl-version\">\r\n                v{{rowData.currentFileVersion}}\r\n            </div>\r\n\r\n            <div class=\"nfl-function\">\r\n                <ng-container *ngIf=\"!readonly\">\r\n                    <button class=\"p-button-rounded p-button-text link-or-action\" (click)=\"onButtonClick(rowData)\"\r\n                        pButton type=\"button\" tooltipPosition=\"top\" pTooltip=\"{{getButtonTooltip(rowData)}}\"\r\n                        icon=\"{{getButtonIcon(rowData)}}\"></button>\r\n\r\n                    <button class=\"p-button-danger p-button-rounded p-button-text link-or-action\"\r\n                        (click)=\"deleteFile(rowData)\" pButton type=\"button\" pTooltip=\"X\u00F3a\" tooltipPosition=\"top\"\r\n                        icon=\"pi pi-trash\"></button>\r\n                </ng-container>\r\n\r\n                <button *ngIf=\"readonly\" class=\"p-button-secondary p-button-rounded p-button-text link-or-action\"\r\n                    (click)=\"download(rowData)\" pButton type=\"button\" pTooltip=\"T\u1EA3i v\u1EC1\" tooltipPosition=\"top\"\r\n                    icon=\"pi pi-cloud-download\"></button>\r\n                <button *ngIf=\"readonly\" class=\"p-button-secondary p-button-rounded p-button-text link-or-action\"\r\n                    pButton type=\"button\" pTooltip=\"Sao ch\u00E9p \u0111\u01B0\u1EDDng d\u1EABn\" tooltipPosition=\"top\" icon=\"pi pi-link\"\r\n                    (click)=\"copyDownloadLink(rowData)\"></button>\r\n                <button 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, rowData)\"></button>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"!_dataSource || !_dataSource.length\" class=\"nfl-no-item\">\r\n            Ch\u01B0a c\u00F3 t\u00E0i li\u1EC7u \u0111\u01B0\u1EE3c t\u1EA3i l\u00EAn\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"layout == _layout.SIMPLE_FOR_LIST\" class=\"not-full-layout\" [class.readonly]=\"readonly\">\r\n    <div *ngIf=\"!readonly || data.breadcrumbs.length > 0\" class=\"fm-toolbar\">\r\n        <div class=\"fm-toolbar-buttons\">\r\n            <ng-container *ngIf=\"!readonly\">\r\n                <button *ngIf=\"!hiddenCreateFolder\" (click)=\"createFolder()\" pButton pRipple type=\"button\"\r\n                    pTooltip=\"T\u1EA1o th\u01B0 m\u1EE5c m\u1EDBi\" tooltipPosition=\"top\" icon=\"pi pi-folder\" class=\"p-button-text\"\r\n                    label=\"T\u1EA1o th\u01B0 m\u1EE5c\" iconPos=\"left\">\r\n                </button>\r\n                <button type=\"button\" pButton class=\"p-button-text p-button-info link-or-action\"\r\n                    icon=\"pi pi-cloud-upload\" (click)=\"selectFile()\" label=\"T\u1EA3i l\u00EAn\"></button>\r\n                <button pButton icon=\"pi pi-link\" pTooltip=\"T\u1EA3i t\u1EEB li\u00EAn k\u1EBFt trong h\u1EC7 th\u1ED1ng\" tooltipPosition=\"top\"\r\n                    type=\"button\" class=\"p-button-text p-button-primary\" label=\"T\u1EA3i li\u00EAn k\u1EBFt\"\r\n                    (click)=\"showAttachLinkBox = true\"></button>\r\n                <button *ngIf=\"!inTaiLieu\" pButton icon=\"pi pi-book\" pTooltip=\"T\u00E0i li\u1EC7u d\u00F9ng chung\"\r\n                    tooltipPosition=\"top\" type=\"button\" class=\"p-button-text\" label=\"T\u00E0i li\u1EC7u\"\r\n                    (click)=\"showTaiLieuDungChung = true;\">\r\n                </button>\r\n            </ng-container>\r\n        </div>\r\n        <ng-container *ngTemplateOutlet=\"breadCrumb\"></ng-container>\r\n    </div>\r\n\r\n    <div class=\"nfl-grid\">\r\n        <div *ngFor=\"let rowData of _dataSource; index as i\" class=\"nfl-item\">\r\n            <div class=\"nfl-no\">\r\n                {{i + 1}}.\r\n            </div>\r\n\r\n            <div class=\"nfl-name\">\r\n                <span class=\"pull-left file-ex-icon\" [innerHTML]=\"rowData.name | fileIcon : !rowData.isFile\">\r\n                </span>\r\n\r\n                <a (click)=\"openObject(rowData)\" class=\"{{rowData.class}} file-ex-name\">\r\n                    <span>\r\n                        <span>{{rowData.name}}</span>\r\n                        <!-- <div *ngIf=\"rowData.signatures\" class=\"signature\" pTooltip=\"Xem chi ti\u1EBFt k\u00FD s\u1ED1\"\r\n                            tooltipPosition=\"top\" (click)=\"viewListSign($event, rowData.signatures)\">\r\n                            <i class=\"fas fa-signature\"></i>\r\n                        </div> -->\r\n                    </span>\r\n                    <!-- <span class=\"file-ex-extension\">{{rowData.extension}}</span> -->\r\n                </a>\r\n            </div>\r\n\r\n            <div class=\"nfl-function\">\r\n                <ng-container *ngIf=\"!readonly\">\r\n                    <button class=\"p-button-rounded p-button-text link-or-action\" (click)=\"onButtonClick(rowData)\"\r\n                        pButton type=\"button\" tooltipPosition=\"top\" pTooltip=\"{{getButtonTooltip(rowData)}}\"\r\n                        icon=\"{{getButtonIcon(rowData)}}\"></button>\r\n\r\n                    <button class=\"p-button-danger p-button-rounded p-button-text link-or-action\"\r\n                        (click)=\"deleteFile(rowData)\" pButton type=\"button\" pTooltip=\"X\u00F3a\" tooltipPosition=\"top\"\r\n                        icon=\"pi pi-trash\"></button>\r\n                </ng-container>\r\n                <!--\r\n                <button *ngIf=\"readonly\" class=\"p-button-secondary p-button-rounded p-button-text link-or-action\"\r\n                        (click)=\"download(rowData)\" pButton type=\"button\" pTooltip=\"T\u1EA3i v\u1EC1\" tooltipPosition=\"top\"\r\n                        icon=\"pi pi-cloud-download\"></button>\r\n                <button *ngIf=\"readonly\" class=\"p-button-secondary p-button-rounded p-button-text link-or-action\"\r\n                        pButton type=\"button\" pTooltip=\"Sao ch\u00E9p \u0111\u01B0\u1EDDng d\u1EABn\" tooltipPosition=\"top\" icon=\"pi pi-link\"\r\n                        (click)=\"copyDownloadLink(rowData)\"></button> -->\r\n                <button 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, rowData)\"></button>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"!_dataSource || !_dataSource.length\" class=\"nfl-no-item\">\r\n            Ch\u01B0a c\u00F3 t\u00E0i li\u1EC7u \u0111\u01B0\u1EE3c t\u1EA3i l\u00EAn\r\n        </div>\r\n    </div>\r\n</div>\r\n<ng-template #breadCrumb>\r\n    <div *ngIf=\"data.breadcrumbs.length > 1\" class=\"fm-toolbar-path\">\r\n        <p-breadcrumb class=\"customBreadCrumb\" [model]=\"data.breadcrumbs\"></p-breadcrumb>\r\n    </div>\r\n</ng-template>\r\n\r\n<p-fileUpload #fileControl [ngStyle]=\"{'display': 'none'}\" mode=\"basic\" [chooseLabel]=\"chooseLabel\" name=\"file\"\r\n    [url]=\"apiUploadUrl\" [maxFileSize]=\"maxFileSize\" auto=\"true\"\r\n    [invalidFileSizeMessageSummary]=\"invalidFileSizeMessageSummary\"\r\n    [invalidFileSizeMessageDetail]=\"invalidFileSizeMessageDetail\"\r\n    [invalidFileTypeMessageSummary]=\"invalidFileTypeMessageSummary\"\r\n    [invalidFileTypeMessageDetail]=\"invalidFileTypeMessageDetail\"\r\n    [invalidFileLimitMessageSummary]=\"invalidFileLimitMessageSummary\"\r\n    [invalidFileLimitMessageDetail]=\"invalidFileLimitMessageDetail\" (onProgress)=\"onUploadProgress($event)\"\r\n    (onBeforeUpload)=\"onBeforeUpload($event)\" (onSelect)=\"handleSelectFile($event)\" (onUpload)=\"onUploaded($event)\"\r\n    [accept]=\"control ? control.accept: null\">\r\n</p-fileUpload>\r\n<p-contextMenu #contextMenu [appendTo]=\"'body'\" [model]=\"data.itemsMenuFile\" styleClass=\"fm-contextMenu-panel\">\r\n</p-contextMenu>\r\n\r\n<!-- T\u1EA1o m\u1EDBi/ \u0111\u1ED5i t\u00EAn th\u01B0 m\u1EE5c -->\r\n<tn-dialog *ngIf=\"forms.createFolder.show\" #dialog [styleClass]=\"'address-form'\"\r\n    [header]=\"forms.createFolder.header | translate\" [popupSize]=\"forms[formIds.createFolder].popupSize\"\r\n    (onHide)=\"onCancelForm(formIds.createFolder)\">\r\n    <folder-form #formBase [parentModel]=\"model\" [parentContext]=\"context\"\r\n        [model]=\"forms[formIds.createFolder].formData\" (onSaved)=\"onSavedForm(formIds.createFolder)\"\r\n        (onCancel)=\"onCancelForm(formIds.createFolder)\">\r\n    </folder-form>\r\n</tn-dialog>\r\n\r\n<!-- \u0110\u1ED5i t\u00EAn file -->\r\n<tn-dialog *ngIf=\"forms.renameFile.show\" #dialog [styleClass]=\"'address-form'\"\r\n    [header]=\"forms.renameFile.header | translate\" [popupSize]=\"forms[formIds.renameFile].popupSize\"\r\n    (onHide)=\"onCancelForm(formIds.renameFile)\">\r\n    <file-form #formBase [parentModel]=\"model\" [parentContext]=\"context\" [model]=\"forms[formIds.renameFile].formData\"\r\n        (onSaved)=\"onSavedForm(formIds.renameFile)\" (onCancel)=\"onCancelForm(formIds.renameFile)\">\r\n    </file-form>\r\n</tn-dialog>\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)=\"closeFileViewer()\">\r\n</file-viewer>\r\n\r\n<!-- Xem phi\u00EAn b\u1EA3n -->\r\n<tn-dialog *ngIf=\"forms.fileVersionList.show\" #dialog [styleClass]=\"'address-form'\"\r\n    [header]=\"forms.fileVersionList.header | translate\" [popupSize]=\"forms[formIds.fileVersionList].popupSize\"\r\n    (onHide)=\"onCancelForm(formIds.fileVersionList)\">\r\n    <file-version-list *ngIf=\"forms.fileVersionList.show\" [parentModel]=\"model\" [parentContext]=\"context\"\r\n        [fileId]=\"forms[formIds.fileVersionList].fileId\" [readonly]=\"readonly\">\r\n    </file-version-list>\r\n</tn-dialog>\r\n\r\n<tn-dialog *ngIf=\"showAttachLinkBox\" #dialog2 [maximizable]=\"false\" [header]=\"'Nh\u1EADp li\u00EAn k\u1EBFt' | translate\"\r\n    [popupSize]=\"{ width: 600, height: 50}\" (onHide)=\"showAttachLinkBox = false; typedLink=''\">\r\n    <div class=\"p-col-12\">\r\n        <div class=\"p-grid\">\r\n            <div class=\"p-md-10\">\r\n                <input #input type=\"text\" placeholder=\"Nh\u1EADp li\u00EAn k\u1EBFt sao ch\u00E9p t\u1EEB t\u1EC7p tin kh\u00E1c...\"\r\n                    (keyup.enter)=\"addAttachLink()\" pInputText [(ngModel)]=\"typedLink\" class=\"p-col-12\" />\r\n            </div>\r\n            <div class=\"p-md-2\">\r\n                <button type=\"button\" (click)=\"addAttachLink()\" [disabled]=\"typedLink != ''? null : true\" pButton\r\n                    class=\"p-button-primary p-col-12\" label=\"Ok\"></button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <after-view-checked (loaded)=\"focusInput(input)\"></after-view-checked>\r\n</tn-dialog>\r\n\r\n<tn-dialog #dialog3 *ngIf=\"showTaiLieuDungChung\" [header]=\"'T\u00E0i li\u1EC7u' |translate\"\r\n    [popupSize]=\"{ width:1024, height: 800 }\" (onHide)=\"showTaiLieuDungChung = false\">\r\n    <file-tai-lieu #formBase [originalFolderId]=\"data.currentFolderId\"\r\n        (onSaved)=\"showTaiLieuDungChung = false; this._triggerProcessData()\" (onCancel)=\"showTaiLieuDungChung = false\">\r\n    </file-tai-lieu>\r\n</tn-dialog>\r\n\r\n<!--\r\n\r\n<share-file *ngIf=\"forms.shareFile.show\" [parentDataModel]=\"model\" [parentDataContext]=\"context\"\r\n    [model]=\"forms.shareFile.formData\">\r\n</share-file>\r\n\r\n<share-folder *ngIf=\"forms.shareFolder.show\" [parentDataModel]=\"model\" [parentDataContext]=\"context\"\r\n    [model]=\"forms.shareFolder.formData\">\r\n</share-folder>\r\n -->\r\n\r\n<!-- Xem ch\u1EEF k\u00FD s\u1ED1 -->\r\n<tn-dialog *ngIf=\"forms.signatureDetail.show\" #dialog [styleClass]=\"'address-form'\"\r\n    [header]=\"forms.signatureDetail.header | translate\" [popupSize]=\"forms[formIds.signatureDetail].popupSize\"\r\n    (onHide)=\"onCancelForm(formIds.signatureDetail)\">\r\n    <signature-detail [parentModel]=\"model\" [parentContext]=\"context\">\r\n    </signature-detail>\r\n</tn-dialog>\r\n<!--K\u00FD s\u1ED1 sim-->\r\n<tn-dialog *ngIf=\"forms.kySoSim.show\" #dialog [styleClass]=\"'address-form'\" [header]=\"forms.kySoSim.header | translate\"\r\n    [popupSize]=\"forms.kySoSim.popupSize\" [showFooter]=\"true\" (onHide)=\"onCancelForm(formIds.kySoSim)\">\r\n    <app-file-ky-so-sim #fileKySoSim [parentModel]=\"model\" [parentContext]=\"context\">\r\n    </app-file-ky-so-sim>\r\n    <ng-template #footer>\r\n        <button type=\"button\" pButton icon=\"fas fa-images\" [disabled]=\"model.submitting\" class=\"p-button-text\"\r\n            [label]=\"'Ch\u1ECDn ch\u1EEF k\u00FD' | translate\" (click)=\"chonChuKy()\"></button>\r\n        <button type=\"button\" pButton icon=\"fas fa-signature\" class=\"p-button-text ui-button-success\"\r\n            [disabled]=\"model.submitting\" [label]=\"'Th\u1EF1c hi\u1EC7n k\u00FD' | translate\" (click)=\"kySo()\"></button>\r\n        <button type=\"button\" pButton icon=\"pi pi-replay\" class=\"p-button-text p-button-secondary\"\r\n            [label]=\"'FORM.CANCEL' | translate\" preventTab (click)=\"forms.kySoSim.show=false\"></button>\r\n    </ng-template>\r\n</tn-dialog>",
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,
@@ -37323,7 +37328,7 @@
                         },
                         ComponentContextService,
                     ],
-                    styles: [".file-header-tab a{color:#000!important}.file-ex-name:hover{cursor:pointer}.file-ex-name .signature{margin-left:3px}.file-ex-row:hover{background:#e8e8e8}.function-list{text-align:center}.function-list a{margin:5px}.function-list a:hover{color:#6aa3d4}.file-btn{color:#337ab7;cursor:pointer;display:inline-block;font-size:1.1em;line-height:45px;margin-left:10px;padding:5px;vertical-align:middle}.file-btn:hover{color:#3ea8ff}.file-btn i{font-size:1.2em;margin-right:10px}.file-action{text-align:right}.file-row-action i{margin-right:5px}.file-row-action{line-height:34px}.function-list .topbar-items{margin-top:0}.function-list .topbar-items>li .topbar-icon{color:#909090}.function-list .topbar-items>li .topbar-icon:hover{color:#444}.function-list .topbar-items>li>ul{border-top:0;right:15px;top:30px}.function-list .topbar-items>li>ul:before{display:none}.function-list .topbar-items>li.active-top-menu>ul{z-index:1}.function-list .layout-menu li a{border:none;margin:0;text-align:left}.function-list .layout-menu li a i:first-child{color:#666f77;font-size:1.2em}.group-link-share{height:34px}.txt-link-share{max-width:335px!important}.btn-copy-link-share{font-size:small!important}.tbl-checkbox-header{width:3em}.tbl-checkbox{text-align:center;width:3em}.my-drive-checkbox{background-color:#fff;border:1px solid #ccc;box-shadow:inset 0 1px 1px rgba(0,0,0,.075);height:20px;text-align:center;transition:border-color .3s,background-color .3s,box-shadow .3s;width:20px}.get-link-share{cursor:pointer;float:right}.file-toolbar{text-align:right}.function-topbar button:last-child{margin-right:0!important}::ng-deep body>.fm-contextMenu-panel{min-width:210px}.folderUnClickable{pointer-events:none}::ng-deep file-manager .file-menu.ui-menu ul li a{text-align:left!important}::ng-deep file-manager .item-inline-name .ui-tooltip-text{white-space:normal;word-break:break-word}::ng-deep file-manager .full-layout .fm-grid a{display:flex;padding-top:5px}::ng-deep file-manager .full-layout .fm-grid a .file-ex-icon{margin-right:5px}::ng-deep file-manager .full-layout .fm-grid a .file-ex-icon:hover{cursor:pointer}::ng-deep file-manager .fm-toolbar{align-items:center;display:flex;padding-bottom:.5em;padding-left:0;padding-top:.5em}::ng-deep file-manager .fm-toolbar .fm-toolbar-buttons{align-items:center;display:flex;padding-left:3px}::ng-deep file-manager .fm-toolbar .fm-toolbar-path{flex:1 1;margin-left:2em;position:relative}::ng-deep file-manager .fm-toolbar .fm-toolbar-path>p-breadcrumb .p-breadcrumb{background:transparent}::ng-deep file-manager .fm-toolbar .fm-toolbar-path>p-breadcrumb>div{border:none;padding:0}::ng-deep file-manager .fm-toolbar .fm-toolbar-path>p-breadcrumb ul li:not(:last-child)>a{cursor:pointer}::ng-deep file-manager .fm-toolbar .fm-toolbar-path>p-breadcrumb ul li:not(:last-child)>a .p-menuitem-text{color:#2196f3}::ng-deep file-manager .fm-toolbar .fm-toolbar-path>p-breadcrumb ul li:last-child .p-menuitem-text{color:rgba(255,102,0,.685)}::ng-deep file-manager .fm-toolbar .fm-toolbar-path:after{background:#b8b8b8;content:\"\";height:100%;left:-1.4em;position:absolute;top:0;width:2px}::ng-deep file-manager .not-full-layout{border-radius:5px}::ng-deep file-manager .not-full-layout .nfl-grid .nfl-item{display:flex}::ng-deep file-manager .not-full-layout .nfl-grid .nfl-item .nfl-function,::ng-deep file-manager .not-full-layout .nfl-grid .nfl-item .nfl-name,::ng-deep file-manager .not-full-layout .nfl-grid .nfl-item .nfl-no,::ng-deep file-manager .not-full-layout .nfl-grid .nfl-item .nfl-signature,::ng-deep file-manager .not-full-layout .nfl-grid .nfl-item .nfl-version{align-items:center;display:flex;justify-content:center}::ng-deep file-manager .not-full-layout .nfl-grid .nfl-item .nfl-no{flex:0 0 30px}::ng-deep file-manager .not-full-layout .nfl-grid .nfl-item .nfl-name{display:flex;flex:1 1;justify-content:left;margin-right:1em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep file-manager .not-full-layout .nfl-grid .nfl-item .nfl-name .file-ex-name{display:flex;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}::ng-deep file-manager .not-full-layout .nfl-grid .nfl-item .nfl-name .file-ex-name>span:not(.file-ex-extension){display:flex;justify-content:space-between;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}::ng-deep file-manager .not-full-layout .nfl-grid .nfl-item .nfl-version{flex:0 0 auto;font-size:.85rem;font-weight:700;margin-right:5px}::ng-deep file-manager .not-full-layout .nfl-grid .nfl-no-item{align-items:center;display:flex;justify-content:left;padding:1em}::ng-deep td file-manager .not-full-layout .nfl-grid .nfl-no-item{align-items:center;display:flex;justify-content:center;padding:8px}"]
+                    styles: [".file-header-tab a{color:#000!important}.file-ex-name:hover{cursor:pointer}.file-ex-name .signature{margin-left:3px}.file-ex-row:hover{background:#e8e8e8}.function-list{text-align:center}.function-list a{margin:5px}.function-list a:hover{color:#6aa3d4}.file-btn{color:#337ab7;cursor:pointer;display:inline-block;font-size:1.1em;line-height:45px;margin-left:10px;padding:5px;vertical-align:middle}.file-btn:hover{color:#3ea8ff}.file-btn i{font-size:1.2em;margin-right:10px}.file-action{text-align:right}.file-row-action i{margin-right:5px}.file-row-action{line-height:34px}.function-list .topbar-items{margin-top:0}.function-list .topbar-items>li .topbar-icon{color:#909090}.function-list .topbar-items>li .topbar-icon:hover{color:#444}.function-list .topbar-items>li>ul{border-top:0;right:15px;top:30px}.function-list .topbar-items>li>ul:before{display:none}.function-list .topbar-items>li.active-top-menu>ul{z-index:1}.function-list .layout-menu li a{border:none;margin:0;text-align:left}.function-list .layout-menu li a i:first-child{color:#666f77;font-size:1.2em}.group-link-share{height:34px}.txt-link-share{max-width:335px!important}.btn-copy-link-share{font-size:small!important}.tbl-checkbox-header{width:3em}.tbl-checkbox{text-align:center;width:3em}.my-drive-checkbox{background-color:#fff;border:1px solid #ccc;box-shadow:inset 0 1px 1px rgba(0,0,0,.075);height:20px;text-align:center;transition:border-color .3s,background-color .3s,box-shadow .3s;width:20px}.get-link-share{cursor:pointer;float:right}.file-toolbar{text-align:right}.function-topbar button:last-child{margin-right:0!important}::ng-deep body>.fm-contextMenu-panel{min-width:210px}.folderUnClickable{pointer-events:none}::ng-deep file-manager .file-menu.ui-menu ul li a{text-align:left!important}::ng-deep file-manager .item-inline-name .ui-tooltip-text{white-space:normal;word-break:break-word}::ng-deep file-manager .full-layout .fm-grid a{display:flex}::ng-deep file-manager .full-layout .fm-grid a .file-ex-icon{margin-right:5px}::ng-deep file-manager .full-layout .fm-grid a .file-ex-icon:hover{cursor:pointer}::ng-deep file-manager .fm-toolbar{align-items:center;display:flex;padding-bottom:.5em;padding-left:0;padding-top:.5em}::ng-deep file-manager .fm-toolbar .fm-toolbar-buttons{align-items:center;display:flex;padding-left:3px}::ng-deep file-manager .fm-toolbar .fm-toolbar-path{flex:1 1;margin-left:2em;position:relative}::ng-deep file-manager .fm-toolbar .fm-toolbar-path:after{background:#b8b8b8;content:\"\";height:100%;left:-1.4em;position:absolute;top:0;width:2px}::ng-deep file-manager .not-full-layout{border-radius:5px}::ng-deep file-manager .not-full-layout .nfl-grid .nfl-item{display:flex}::ng-deep file-manager .not-full-layout .nfl-grid .nfl-item .nfl-function,::ng-deep file-manager .not-full-layout .nfl-grid .nfl-item .nfl-name,::ng-deep file-manager .not-full-layout .nfl-grid .nfl-item .nfl-no,::ng-deep file-manager .not-full-layout .nfl-grid .nfl-item .nfl-signature,::ng-deep file-manager .not-full-layout .nfl-grid .nfl-item .nfl-version{align-items:center;display:flex;justify-content:center}::ng-deep file-manager .not-full-layout .nfl-grid .nfl-item .nfl-no{flex:0 0 30px}::ng-deep file-manager .not-full-layout .nfl-grid .nfl-item .nfl-name{display:flex;flex:1 1;justify-content:left;margin-right:1em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep file-manager .not-full-layout .nfl-grid .nfl-item .nfl-name .file-ex-name{display:flex;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}::ng-deep file-manager .not-full-layout .nfl-grid .nfl-item .nfl-name .file-ex-name>span:not(.file-ex-extension){display:flex;justify-content:space-between;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}::ng-deep file-manager .not-full-layout .nfl-grid .nfl-item .nfl-version{flex:0 0 auto;font-size:.85rem;font-weight:700;margin-right:5px}::ng-deep file-manager .not-full-layout .nfl-grid .nfl-no-item{align-items:center;display:flex;justify-content:left;padding:1em}::ng-deep file-manager p-breadcrumb .p-breadcrumb{background:transparent;border:none;padding:0}::ng-deep file-manager p-breadcrumb .p-breadcrumb ul li:not(:last-child)>a{cursor:pointer}::ng-deep file-manager p-breadcrumb .p-breadcrumb ul li:not(:last-child)>a .p-menuitem-text{color:#2196f3}::ng-deep file-manager p-breadcrumb .p-breadcrumb ul li:last-child .p-menuitem-text{color:rgba(255,102,0,.685)}::ng-deep td file-manager .not-full-layout .nfl-grid .nfl-no-item{align-items:center;display:flex;justify-content:center;padding:8px}"]
                 },] }
     ];
     FileManagerComponent.ctorParameters = function () { return [
@@ -37331,7 +37336,6 @@
         { type: i0.Injector },
         { type: i1.MessageService },
         { type: i2.TranslateService },
-        { type: i1.ConfirmationService },
         { type: AuthenService },
         { type: TnClientService },
         { type: FileVersionService },
@@ -39424,11 +39428,10 @@
             this.onRefresh = new i0.EventEmitter();
             this.onOldest = new i0.EventEmitter();
             this.onChangeLimitPage = new i0.EventEmitter();
+            this.onChanged = new i0.EventEmitter();
         }
         PagingNextBackOnlyComponent.prototype.ngOnInit = function () {
-        };
-        PagingNextBackOnlyComponent.prototype.getTotal = function () {
-            return this.model.total;
+            this.pageSizeOld = this.setting.pageSetting.pageSize;
         };
         PagingNextBackOnlyComponent.prototype.getFirstIndex = function () {
             return (this.setting.pageSetting.page - 1) * this.setting.pageSetting.pageSize + 1;
@@ -39439,47 +39442,59 @@
                 temp = this.model.total;
             return temp;
         };
-        PagingNextBackOnlyComponent.prototype.goLatest = function (evt, isDisable) {
-            if (isDisable || this.model.loading)
+        PagingNextBackOnlyComponent.prototype.goLatest = function (evt) {
+            if (this.isFirst() || this.model.loading)
                 return;
-            if (this.setting.pageSetting.pageSize == 0)
+            if (this.setting.pageSetting.pageSize == 0) {
                 this.setting.pageSetting.pageSize = 1;
-            if (this.setting.pageSetting.pageSize > 1000)
+            }
+            if (this.setting.pageSetting.pageSize > 1000) {
                 this.setting.pageSetting.pageSize = 1000;
-            this.onLatest.next(null);
+            }
+            this.setting.pageSetting.page = 1;
             this.op.hide();
+            this.onLatest.next(evt);
+            this.onChanged.emit();
         };
-        PagingNextBackOnlyComponent.prototype.goPrev = function (evt, isDisable) {
-            if (isDisable || this.model.loading)
-                return;
-            this.onPrev.next(null);
-        };
-        PagingNextBackOnlyComponent.prototype.goNext = function (evt, isDisable) {
-            if (isDisable || this.model.loading)
+        PagingNextBackOnlyComponent.prototype.goPrev = function (evt) {
+            if (this.isFirst() || this.model.loading)
                 return;
-            this.onNext.next(null);
+            if (this.setting.pageSetting.page > 1) {
+                this.setting.pageSetting.page--;
+            }
+            this.op.hide();
+            this.onPrev.next(evt);
+            this.onChanged.emit();
         };
         PagingNextBackOnlyComponent.prototype.isFirst = function () {
             return this.setting.pageSetting.page <= 1;
         };
-        PagingNextBackOnlyComponent.prototype.isLast = function () {
-            return this.getTotal() <= 0 || this.getLastIndex() == this.getTotal();
-        };
-        PagingNextBackOnlyComponent.prototype.onEnterPaging = function ($event) {
-            // this.op.show($event);
+        PagingNextBackOnlyComponent.prototype.goNext = function (evt) {
+            if (this.isLast() || this.model.loading)
+                return;
+            this.setting.pageSetting.page++;
+            this.op.hide();
+            this.onNext.next(evt);
+            this.onChanged.emit();
         };
-        PagingNextBackOnlyComponent.prototype.onLeavePaging = function ($event) {
-            // this.op.hide();
+        PagingNextBackOnlyComponent.prototype.isLast = function () {
+            return this.model.total <= 0 || this.getLastIndex() == this.model.total;
         };
-        PagingNextBackOnlyComponent.prototype.goOldest = function (evt, isDisable) {
-            if (isDisable || this.model.loading)
+        PagingNextBackOnlyComponent.prototype.goOldest = function (evt) {
+            if (this.isLast() || this.model.loading)
                 return;
-            this.onOldest.next(null);
-            this.op.hide();
+            this.setting.pageSetting.page = Math.ceil(this.model.total / this.setting.pageSetting.pageSize);
+            this.onOldest.next(evt);
+            this.onChanged.emit();
         };
         PagingNextBackOnlyComponent.prototype.saveChangeHandle = function () {
-            this.goLatest(null, false);
+            if (!this.setting.pageSetting.pageSize || this.setting.pageSetting.pageSize.toString() == '0') {
+                this.setting.pageSetting.pageSize = this.pageSizeOld;
+            }
+            this.pageSizeOld = this.setting.pageSetting.pageSize;
+            this.goLatest(null);
             this.onChangeLimitPage.next(null);
+            this.onChanged.emit();
         };
         PagingNextBackOnlyComponent.prototype.handleOverlayShow = function (evt, targetOverlay) {
         };
@@ -39490,7 +39505,7 @@
     PagingNextBackOnlyComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'paging-next-back-only',
-                    template: "<div class=\"paging-container\" [ngClass]=\"ngClass\">\r\n    <div class=\"paging-info\">\r\n        <ng-container>\r\n            <div *ngIf=\"getFirstIndex()<=getTotal() && !setting.hiddenTextPage\" #targetOverlay\r\n                class=\"paging-item paging-info-detail\" (mouseenter)=\"onEnterPaging($event)\"\r\n                (mouseleave)=\"onLeavePaging($event)\" (click)=\"op.toggle($event)\">\r\n                {{getFirstIndex()}} -\r\n                {{getLastIndex()}}\r\n                trong {{getTotal()}}\r\n            </div>\r\n            <div *ngIf=\"(getFirstIndex()>getTotal() || getTotal() == 0) && !setting.hiddenTextPage\"\r\n                class=\"paging-item paging-info-detail\">\r\n                Kh\u00F4ng t\u00ECm th\u1EA5y d\u1EEF li\u1EC7u\r\n            </div>\r\n            <div class=\"paging-item text\" [class.disabled]=\"model.loading\" (click)=\"goPrev($event, isFirst())\"\r\n                style=\"margin-right: 5px;\" pTooltip=\"{{'Trang tr\u01B0\u1EDBc' | translate}}\" tooltipPosition=\"top\"\r\n                [class.disabled]=\"isFirst()\">\r\n                <a href=\"javascript:\" tabindex=\"{{isFirst()?'-1':''}}\"><i class=\"pi pi-chevron-left\"></i></a>\r\n            </div>\r\n            <div class=\"block-page-size\">\r\n                <tn-mask [maskType]=\"'int'\" [min]=\"1\" [max]=\"1000\" [disabled]=\"model.loading ? true : null\"\r\n                    [(ngModel)]=\"setting.pageSetting.pageSize\" (onChanged)=\"saveChangeHandle()\"\r\n                    (keyup.enter)=\"saveChangeHandle()\">\r\n                </tn-mask>\r\n            </div>\r\n            <div class=\"paging-item text\" [class.disabled]=\"model.loading\" (click)=\"goNext($event, isLast())\"\r\n                style=\"margin-left: 5px;\" pTooltip=\"{{'Trang sau' | translate}}\" tooltipPosition=\"left\"\r\n                [class.disabled]=\"isLast()\">\r\n                <a href=\"javascript:\" tabindex=\"{{isLast()?'-1':''}}\"><i class=\"pi pi-chevron-right\"></i></a>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n\r\n<p-overlayPanel #op [styleClass]=\"'paging-advance-overlay'\" [appendTo]=\"'body'\"\r\n    (onShow)=\"handleOverlayShow($event, targetOverlay)\">\r\n    <ul class=\"paging-advance\">\r\n        <li [class.disabled]=\"isFirst()\" (click)=\"goLatest($event, isFirst())\">Trang \u0111\u1EA7u ti\u00EAn</li>\r\n        <li [class.disabled]=\"isLast()\" (click)=\"goOldest($event, isLast())\">Trang cu\u1ED1i c\u00F9ng</li>\r\n    </ul>\r\n</p-overlayPanel>",
+                    template: "<div class=\"paging-container\" [ngClass]=\"ngClass\">\r\n    <div class=\"paging-info\">\r\n        <ng-container>\r\n            <div *ngIf=\"getFirstIndex()<=model.total && !setting.hiddenTextPage\" #targetOverlay\r\n                class=\"paging-item paging-info-detail\" (click)=\"op.toggle($event)\">\r\n                {{getFirstIndex()}} -\r\n                {{getLastIndex()}}\r\n                trong {{model.total}}\r\n            </div>\r\n            <div *ngIf=\"(getFirstIndex()>model.total || model.total == 0) && !setting.hiddenTextPage\"\r\n                class=\"paging-item paging-info-detail\">\r\n                Kh\u00F4ng t\u00ECm th\u1EA5y d\u1EEF li\u1EC7u\r\n            </div>\r\n            <div class=\"paging-item text\" [class.disabled]=\"model.loading\" (click)=\"goPrev($event)\"\r\n                style=\"margin-right: 5px;\" pTooltip=\"{{'Trang tr\u01B0\u1EDBc' | translate}}\" tooltipPosition=\"top\"\r\n                [class.disabled]=\"isFirst()\">\r\n                <a href=\"javascript:\" tabindex=\"{{isFirst()?'-1':''}}\"><i class=\"pi pi-chevron-left\"></i></a>\r\n            </div>\r\n            <div class=\"block-page-size\">\r\n                <tn-mask [maskType]=\"'int'\" [min]=\"1\" [max]=\"1000\" [disabled]=\"model.loading ? true : null\"\r\n                    [(ngModel)]=\"setting.pageSetting.pageSize\" (onChanged)=\"saveChangeHandle()\"\r\n                    (keyup.enter)=\"saveChangeHandle()\">\r\n                </tn-mask>\r\n            </div>\r\n            <div class=\"paging-item text\" [class.disabled]=\"model.loading\" (click)=\"goNext($event)\"\r\n                style=\"margin-left: 5px;\" pTooltip=\"{{'Trang sau' | translate}}\" tooltipPosition=\"left\"\r\n                [class.disabled]=\"isLast()\">\r\n                <a href=\"javascript:\" tabindex=\"{{isLast()?'-1':''}}\"><i class=\"pi pi-chevron-right\"></i></a>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n\r\n<p-overlayPanel #op [styleClass]=\"'paging-advance-overlay'\" [appendTo]=\"'body'\"\r\n    (onShow)=\"handleOverlayShow($event, targetOverlay)\">\r\n    <ul class=\"paging-advance\">\r\n        <li [class.disabled]=\"isFirst()\" (click)=\"goLatest($event)\">Trang \u0111\u1EA7u ti\u00EAn</li>\r\n        <li [class.disabled]=\"isLast()\" (click)=\"goOldest($event)\">Trang cu\u1ED1i c\u00F9ng</li>\r\n    </ul>\r\n</p-overlayPanel>",
                     styles: [".paging-item a{color:#495057}.paging-item:hover{cursor:pointer}.paging-item:hover a{color:#333}.paging-item.disabled a{color:#bdbdbd}.paging-info-detail{border-radius:7px;font-size:.9em;line-height:30px;min-width:100px;padding:2px .5rem 0;text-align:center}.paging-item.text{border-radius:50%;display:inline-block;height:32px;line-height:32px;overflow:hidden;position:relative;text-align:center;transform:perspective(1px);width:32px}.paging-item.text:before{background:#e6e6e6;border-radius:50%;bottom:0;content:\"\";left:0;position:absolute;right:0;top:0;transform:scale(0);transition:all .3s cubic-bezier(.4,.34,.01,.97);z-index:-1}.paging-item.text:hover:before{transform:scale(1)}.paging-item.text>a{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.paging-info-detail{border-radius:5px;display:inline-block;overflow:hidden;position:relative;transform:perspective(1px)}.paging-info-detail:before{background:#e6e6e6;border-radius:5px;bottom:0;content:\"\";left:0;position:absolute;right:0;top:0;transform:scale(0);transition:all .3s cubic-bezier(.4,.34,.01,.97);z-index:-1}.paging-info-detail:hover:before{transform:scale(1)}.paging-item.disabled:hover:before{content:none}.paging-item.disabled:hover{background-color:#fff;cursor:default}.paging-item.disabled:hover a{cursor:default}.paging-info{align-items:center;display:flex;justify-content:flex-end}.item-setting{font-size:18px}.item-setting a{color:#555}.item-setting a:hover{color:#333}.paging-advance{list-style:none;margin:3px 0;padding-left:0}.paging-advance li{line-height:30px;padding-left:15px;width:150px}.paging-advance li.disabled{color:#bdbdbd;outline:none}.paging-advance li.disabled:hover{background:none;cursor:default}.paging-advance li:hover{background:#e6e6e6;cursor:pointer}::ng-deep .paging-advance-overlay{margin-left:30px}::ng-deep .paging-advance-overlay .p-overlaypanel-content{padding:0}::ng-deep paging-next-back-only .block-page-size{display:inline-block;width:60px}::ng-deep paging-next-back-only .block-page-size .p-inputtext{padding-left:5px;padding-right:5px;text-align:center;width:100%}::ng-deep paging-next-back-only .tn-mask-disabled{border:1px solid #ddd;border-radius:4px;display:flex;justify-content:center;line-height:20px;padding:5px}"]
                 },] }
     ];
@@ -39505,7 +39520,8 @@
         onLatest: [{ type: i0.Output }],
         onRefresh: [{ type: i0.Output }],
         onOldest: [{ type: i0.Output }],
-        onChangeLimitPage: [{ type: i0.Output }]
+        onChangeLimitPage: [{ type: i0.Output }],
+        onChanged: [{ type: i0.Output }]
     };
 
     var PermissionUtilsComponent = /** @class */ (function (_super) {
@@ -44150,6 +44166,9 @@
         NotificationService.prototype.sendNotification = function (data) {
             return this.defaultPost(this.serviceUri + "/InsertToManyUser/", data);
         };
+        NotificationService.prototype.sendNotificationMultiple = function (lstNotification) {
+            return this.defaultPost(this.serviceUri + "/InsertMultiple", lstNotification);
+        };
         NotificationService.prototype.markReadById = function (id) {
             return this.defaultPost(this.serviceUri + "/MarkReadById/" + id, {});
         };
@@ -44157,7 +44176,7 @@
             return this.defaultPost(this.serviceUri + "/MarkUnread/" + id, {});
         };
         NotificationService.prototype.markReadAllByUserCurrent = function () {
-            return this.defaultPost(this.serviceUri + "/MarkReadAllByUserCurrent", {});
+            return this.defaultPost(this.serviceUri + "/MarkReadAllByCurrentUser", {});
         };
         return NotificationService;
     }(BaseService));
@@ -44753,6 +44772,7 @@
             _this._crudService = _crudService;
             _this._notifierService = _notifierService;
             _this._customRouterService = _customRouterService;
+            _this.openMenu = new i0.EventEmitter();
             _this.maxNotification = 10;
             _this.totalUnRead = 0;
             _this.bounceNoti = true;
@@ -44762,13 +44782,15 @@
             _this.url = '';
             _this.urldetail = '';
             _this.notifications = [];
-            _this.openMenu = new i0.EventEmitter();
             _this.rootContext.subscribe('NOTIFICATION_CHANGE', function (rs) {
                 _this.refreshNotification();
             });
             _this._signalRService.start('NotificationHub', TopicReloadNotification, function (data) {
                 _this.refreshNotification();
             });
+            _this.rootContext.subscribe(ComCtxConstants.NOTIFICATION.NOTIFICATION_RELOAD, function (res) {
+                _this.refreshNotification();
+            });
             _this.environment = _this._moduleConfigService.getConfig().environment;
             return _this;
         }
@@ -44838,13 +44860,24 @@
                 ],
                 fields: ''
             });
-            this._notificationService.getByGridRequest(gridInfo)
-                .then(function (res) { return _this.handleResponse(res, '', function (f) {
-                _this.notifications = res.data;
-                _this.totalUnRead = res.totalRecord;
-                _this.bounceNoti = true;
-                _this.afterGetNotication();
-            }); });
+            var readedFilters = [
+                this.newFilter('userId', exports.Operator.equal, this.userId),
+                this.newFilter('readedTime', exports.Operator.isNull, '1')
+            ];
+            Promise.all([
+                this._notificationService.getByGridRequest(gridInfo).then(function (res) { return _this.handleResponse(res, '', function (f) {
+                    _this.notifications = res.data;
+                    _this.totalUnRead = 0;
+                    _this.bounceNoti = true;
+                    _this.afterGetNotication();
+                }); }),
+                this._notificationService.getAll(readedFilters, 'readedTime').then(function (res) {
+                    if (res.success && res.data && res.data.length)
+                        _this.totalUnRead = res.totalRecord;
+                    else
+                        _this.totalUnRead = 0;
+                })
+            ]);
         };
         TnAppNotificationComponent.prototype.afterGetNotication = function () {
             var _this = this;
@@ -44866,18 +44899,20 @@
                 if (!rs)
                     return;
                 _this._notificationService.markReadAllByUserCurrent().then(function (rs) {
-                    _this.notifications.forEach(function (element) {
-                        element.readedTime = new Date();
-                    });
-                    _this.rootContext.fireEvent('NOTIFICATION_ALL_READ', true);
+                    // this.notifications.forEach(element => {
+                    //     element.readedTime = new Date();
+                    // });
+                    _this.rootContext.fireEvent(ComCtxConstants.NOTIFICATION.NOTIFICATION_RELOAD, true);
                 });
                 _this.totalUnRead = 0;
             });
         };
         TnAppNotificationComponent.prototype.readById = function (data) {
-            this._notificationService.markReadById(data.id).then(function (rs) {
-                data.readedTime = new Date();
-            });
+            var _this = this;
+            data.readedTime = new Date();
+            this._notificationService.markReadById(data.id).then(function (res) {
+                _this.rootContext.fireEvent(ComCtxConstants.NOTIFICATION.NOTIFICATION_RELOAD);
+            }).catch(function (err) { return _this._commonService.handleError(err, _this._injector); });
         };
         TnAppNotificationComponent.prototype.isHasAvatar = function (item) {
             if (item.avatarId) {
@@ -44926,14 +44961,7 @@
             this.bounceNoti = false;
         };
         TnAppNotificationComponent.prototype.handleClicked = function () {
-            return __awaiter(this, void 0, void 0, function () {
-                var domain;
-                return __generator(this, function (_a) {
-                    domain = this.environment.clientDomain.thongbaoDomain;
-                    window.open("" + domain);
-                    return [2 /*return*/];
-                });
-            });
+            this._router.navigate(["user/managemant-notification"]);
         };
         return TnAppNotificationComponent;
     }(ComponentBase));