tnx-shared 5.3.285 → 5.3.287

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/bundles/tnx-shared.umd.js +49 -2
  2. package/bundles/tnx-shared.umd.js.map +1 -1
  3. package/bundles/tnx-shared.umd.min.js +1 -1
  4. package/bundles/tnx-shared.umd.min.js.map +1 -1
  5. package/classes/base/i-list-component.d.ts +2 -0
  6. package/classes/base/i-list-component.d.ts.map +1 -1
  7. package/classes/base/list-base.d.ts +2 -2
  8. package/classes/base/list-base.d.ts.map +1 -1
  9. package/classes/base/list-component-base.d.ts +5 -0
  10. package/classes/base/list-component-base.d.ts.map +1 -1
  11. package/esm2015/classes/base/i-list-component.js +1 -1
  12. package/esm2015/classes/base/list-base.js +6 -4
  13. package/esm2015/classes/base/list-component-base.js +34 -1
  14. package/esm2015/components/crud/crud-form/crud-form.component.js +2 -2
  15. package/esm2015/components/crud/crud-list/crud-list.component.js +2 -2
  16. package/fesm2015/tnx-shared.js +37 -2
  17. package/fesm2015/tnx-shared.js.map +1 -1
  18. package/package.json +2 -2
  19. package/tnx-shared.metadata.json +1 -1
package/fesm2015/tnx-shared.js CHANGED
@@ -14676,7 +14676,7 @@ class CrudFormComponent extends ComponentBase {
14676
14676
  CrudFormComponent.decorators = [
14677
14677
  { type: Component, args: [{
14678
14678
  selector: 'crud-form',
14679
- template: "<div [class]=\"_styleClass\">\n <form #formElement autocomplete=\"off\" autocorrect=\"off\" spellcheck=\"false\"\n [class]=\"'p-grid form-group crud-form' + (formClass ? ' ' + formClass : '')\"\n (keydown.shift.tab)=\"preventBlur($event)\">\n <div class=\"p-grid p-col-12\" [class.grid]=\"useGridTemplate\" style=\"margin: 0\">\n <ng-container *ngFor=\"let control of setting.schema\">\n <ng-container *ngTemplateOutlet=\"customControl; context: {\n control: control, data: _modelData, parentPath: '', path: control.field, showLabel: control.showLabel,\n mdWidth: control.mdWidth, rowSpan: control.rowSpan\n }\">\n </ng-container>\n </ng-container>\n </div>\n </form>\n</div>\n<p-contextMenu #contextMenu [appendTo]=\"'body'\" [model]=\"buttonContexts\">\n</p-contextMenu>\n<ng-template #customControl let-data=\"data\" let-control=\"control\" let-showLabel=\"showLabel\" let-mdWidth=\"mdWidth\"\n let-rowSpan=\"rowSpan\" let-rowIndex=\"index\" let-path=\"path\" let-parentPath=\"parentPath\" let-tablePath=\"tablePath\">\n <div *ngIf=\"!checkHidden(control, data, path)\" id=\"{{path}}-holder\"\n class=\"p-col-{{control.gWidth}} p-md-{{mdWidth}} row-span-{{rowSpan}} {{control.class}} crud-form-control type-{{control.dataType}}\"\n [class.error]=\"data._errors[control.field].length > 0\"\n [class.not-show-in-box-holder]=\"control.showInBox === false\"\n [class.show-in-box-holder]=\"control.showInBox === true\" [ngStyle]=\"control.style\">\n <div class=\"label\" *ngIf=\"showLabel\">\n <label *ngIf=\"control.label && !control.isHtmlLabel\" [pTooltip]=\"control.fullLabel\"\n tooltipPosition=\"top\">{{control.label}}\n <span *ngIf=\"control.required || control.showIconRequired\" class=\"star-required\">*</span>\n </label>\n <ng-container *ngIf=\"control.label && control.isHtmlLabel\">\n <label [innerHTML]=\"control.label | safeHtml\" [pTooltip]=\"control.fullLabel\" tooltipPosition=\"top\">\n </label>\n <span *ngIf=\"control.required || control.showIconRequired\" class=\"star-required\">*</span>\n </ng-container>\n <span *ngIf=\"control.description\" class=\"control-description\">({{control.description}})</span>\n </div>\n <ng-container [ngSwitch]=\"control.controlType\">\n <ng-container *ngSwitchCase=\"'label'\">\n <ng-container [ngTemplateOutlet]=\"labelControl\"\n [ngTemplateOutletContext]=\"{control: control, data: data}\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'title'\">\n <label *ngIf=\"!control.isHtml\" [for]=\"control.for\">{{control.text | translate}}</label>\n <label *ngIf=\"control.isHtml\" [innerHTML]=\"control.text | safeHtml\"></label>\n </ng-container>\n <ng-container *ngSwitchCase=\"'text'\">\n <div class=\"p-inputgroup\" *ngIf=\"control.suffFix\">\n <input [placeholder]=\"control.placeholder\"\n [required]=\"control.validators && control.validators.required\" [pTooltip]=\"data[control.field]\"\n tooltipPosition=\"top\" tooltipStyleClass=\"wrap\"\n [attr.disabled]=\" checkDisabled(data, control) ? true : null\" pInputText\n [type]=\"control.dataFormat\" [max]=\"control.max\" [min]=\"control.min\"\n [maxlength]=\"control.maxLength\" [(ngModel)]=\"data[control.field]\"\n (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n (key.enter)=\"handleFieldValueChange(control, $event, eventType.ENTER, data, parentPath)\" />\n <span class=\"p-inputgroup-addon\">({{control.suffFix}})</span>\n </div>\n <input *ngIf=\"!control.suffFix\" [placeholder]=\"control.placeholder\" [pTooltip]=\"data[control.field]\"\n tooltipPosition=\"top\" tooltipStyleClass=\"wrap\"\n [attr.disabled]=\"checkDisabled(data, control) ? true : null\" pInputText [type]=\"control.dataFormat\"\n [max]=\"control.max\" [min]=\"control.min\" [maxlength]=\"control.maxLength\"\n [(ngModel)]=\"data[control.field]\"\n (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n (key.enter)=\"handleFieldValueChange(control, $event, eventType.ENTER, data, parentPath)\" />\n </ng-container>\n <ng-container *ngSwitchCase=\"'htmlPreview'\">\n <html-preview [control]=\"control\" [(ngModel)]=\"data[control.field]\"\n (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n </html-preview>\n </ng-container>\n <ng-container *ngSwitchCase=\"'reference-text'\">\n <reference-textbox [control]=\"control\" [value]=\"data[control.field]\" [dataSource]=\"control.dataSource\"\n (onInit)=\"handleLoadedControl($event, control, parentPath)\"></reference-textbox>\n </ng-container>\n <ng-container *ngSwitchCase=\"'template'\">\n <ng-container [ngTemplateOutlet]=\"control.template\"\n [ngTemplateOutletContext]=\"{$implicit: _rootNode, control: control, data: data, tablePath: tablePath, parentPath: parentPath, rowIndex: rowIndex, funcUpdateModel: updateModelFromExternal}\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'content'\">\n <div class=\"control-content label\">\n <span [innerHTML]=\"data[control.field] ? (data[control.field] | safeHtml) : ''\">\n </span>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'mask'\">\n <tn-mask [prefix]=\"control.prefix\" [decimalPlaces]=\"control.decimalPlaces\" [suffix]=\"control.suffix\"\n [placeholder]=\"control.placeholder\" [disabled]=\"checkDisabled(data, control)\" tooltipPosition=\"top\"\n [pTooltip]=\"data[control.field]\" [maskType]=\"control.maskType\" [autoFormat]=\"control.autoFormat\"\n [min]=\"control.min\" [max]=\"control.max\" [(ngModel)]=\"data[control.field]\"\n (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n </tn-mask>\n </ng-container>\n <ng-container *ngSwitchCase=\"'numberrange'\">\n <tn-number-picker-range [decimalPlaces]=\"control.decimalPlaces\"\n [disabled]=\"checkDisabled(data, control)\" [maskType]=\"control.maskType\" [min]=\"control.min\"\n [max]=\"control.max\" [placeholder]=\"control.placeholder\" [(ngModel)]=\"data[control.field]\"\n (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n (blur)=\"handleFieldValueChange(control, $event, eventType.BLUR, data, parentPath)\">\n </tn-number-picker-range>\n </ng-container>\n <ng-container *ngSwitchCase=\"'money'\">\n <input currencyMask [attr.disabled]=\"checkDisabled(data, control) ? true : null\" pInputText type=\"tel\"\n tooltipPosition=\"top\" [pTooltip]=\"data[control.field] | number: '1.0-0'\"\n [options]=\"{prefix: '', thousands: '.', decimal: ',',precision:control.dataFormat === 'money'?0:0 }\"\n [(ngModel)]=\"data[control.field]\"\n (ngModelChange)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\" />\n </ng-container>\n <ng-container *ngSwitchCase=\"'phoneOrfax'\">\n <input [placeholder]=\"control.dataFormat==='phone'?'(999) 999-9999':'999-999-9999'\"\n [attr.disabled]=\"checkDisabled(data, control) ? true : null\" type=\"tel\" pInputText\n [(ngModel)]=\"data[control.field]\"\n (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\" />\n </ng-container>\n <ng-container *ngSwitchCase=\"'textarea'\">\n <textarea pInputTextarea [rows]=\"control.rows ? control.rows : 5\"\n [attr.disabled]=\"checkDisabled(data, control) ? true : null\" [(ngModel)]=\"data[control.field]\"\n [placeholder]=\"control.placeholder\"\n (keyup)=\"handleKeyUp(control, $event, eventType.CHANGE, data, parentPath)\"\n (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"></textarea>\n </ng-container>\n <ng-container *ngSwitchCase=\"'editor'\">\n <tn-tinymce *ngIf=\"!checkDisabled(data, control)\"\n [required]=\"control.validators && control.validators.required\" [mode]=\"control.mode\"\n [height]=\"control.height ? control.height : 250\" [languageCode]=\"control.languageCode\"\n [control]=\"control\"\n [disabled]=\"control.disabled || (control.disableCheck && control.disableCheck(model))\"\n [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n (onKeyUp)=\"handleKeyUp(control, $event, eventType.CHANGE, data, parentPath)\"\n (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n </tn-tinymce>\n <div *ngIf=\"checkDisabled(data, control)\" class=\"html-box\"\n [innerHTML]=\"data[control.field] ? (data[control.field] | safeHtml) : ''\">\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'datetime'\">\n <datetime-picker [disabled]=\"checkDisabled(data, control)\" [control]=\"control\"\n [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n </datetime-picker>\n </ng-container>\n <ng-container *ngSwitchCase=\"'autocomplete'\">\n <app-autocomplete-datasource [control]=\"control\"\n [suggestions]=\"data._source[control.field] || control.dataSource\" [(ngModel)]=\"data[control.field]\"\n (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n (onValueChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n </app-autocomplete-datasource>\n </ng-container>\n <ng-container *ngSwitchCase=\"'datetimerange'\">\n <tn-datetime-picker-range [disabled]=\"control.disabled\" [control]=\"control\"\n [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n </tn-datetime-picker-range>\n </ng-container>\n <ng-container *ngSwitchCase=\"'dropdown'\">\n <dropdown [control]=\"control\" [dataSource]=\"getControlDataSource(control, data)\" [data]=\"data\"\n [(value)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n (onChanged)=\"handleChangeDropdown(control, $event, eventType.CHANGE, data, parentPath)\"\n (onHideSmartEvent)=\"handleChangeDropdown(control, $event, eventType.HIDE, data, parentPath)\"\n (adjustValue)=\"handleAdjustValueDropdownEvent(control, parentPath)\"\n (onDataSourceLoaded)=\"handleDataSourceLoaded(control, parentPath, $event)\"\n (onReady)=\"handleControlReadyEvent(control, parentPath)\">\n </dropdown>\n </ng-container>\n <ng-container *ngSwitchCase=\"'imageuploader'\">\n <app-image-uploader [loadByEntityKey]=\"control.loadByEntityKey\" [entityKey]=\"control.entityKey\"\n [defaultNoImageUrl]=\"'/assets/images/no-image.jpg'\" [multiple]=\"control.multiple\"\n [disabled]=\"control.disabled\" [isAvatar]=\"control.isAvatar\" [(ngModel)]=\"data[control.field]\"\n (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n (onInit)=\"handleLoadedControl($event, control, parentPath)\">\n <ng-template *ngIf=\"control.templateItems\" #items let-files>\n <ng-container *ngTemplateOutlet=\"control.templateItems; context: {\n $implicit: files\n }\"></ng-container>\n </ng-template>\n <ng-template *ngIf=\"control.templateItem\" #item let-file>\n <ng-container *ngTemplateOutlet=\"control.templateItem; context: {\n $implicit: file\n }\"></ng-container>\n </ng-template>\n </app-image-uploader>\n </ng-container>\n <ng-container *ngSwitchCase=\"'fileManager'\">\n <file-manager *ngIf=\"control.entityKey || data[control.entityKeyField] || control.rootFolderId\"\n [control]=\"control\" [serviceCode]=\"control.serviceCode\" [entity]=\"control.entity\"\n [hiddenCreateFolder]=\"control.hiddenCreateFolder\"\n [entityKey]=\"control.entityKey ? control.entityKey : data[control.entityKeyField]\"\n [readonly]=\"control.disabled\" [layout]=\"control.layout\" [rootFolderId]=\"control.rootFolderId\"\n [maxFileSize]=\"control.maxFileSize\" [inTaiLieu]=\"control.inTaiLieu\"\n [inTaiLieuChung]=\"control.inTaiLieuChung\" [copyToFolderId]=\"control.copyToFolderId\"\n [filePickerSetting]=\"control.filePickerSetting\" [dataForm]=\"data\"\n [invalidFileSizeMessageSummary]=\"control.invalidFileSizeMessageSummary\"\n [invalidFileSizeMessageDetail]=\"control.invalidFileSizeMessageDetail\"\n [invalidFileTypeMessageSummary]=\"control.invalidFileTypeMessageSummary\"\n [invalidFileTypeMessageDetail]=\"control.invalidFileTypeMessageDetail\"\n [invalidFileLimitMessageSummary]=\"control.invalidFileLimitMessageSummary\"\n [invalidFileLimitMessageDetail]=\"control.invalidFileLimitMessageDetail\" [parentSetting]=\"setting\"\n [noFileMessage]=\"control.noFileMessage\" [(value)]=\"data[control.field]\"\n (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n (onSelected)=\"control.onSelected($event)\"\n (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n (onReady)=\"handleControlReadyEvent(control, parentPath)\">\n </file-manager>\n </ng-container>\n <span *ngSwitchCase=\"'fileUpload'\">\n <file-upload [sharedFolderType]=\"control.sharedFolderType\" [maxFileSize]=\"control.maxFileSize\"\n [invalidFileSizeMessageSummary]=\"control.invalidFileSizeMessageSummary\"\n [invalidFileSizeMessageDetail]=\"control.invalidFileSizeMessageDetail\"\n [invalidFileTypeMessageSummary]=\"control.invalidFileTypeMessageSummary\"\n [invalidFileTypeMessageDetail]=\"control.invalidFileTypeMessageDetail\"\n [invalidFileLimitMessageSummary]=\"control.invalidFileLimitMessageSummary\"\n [invalidFileLimitMessageDetail]=\"control.invalidFileLimitMessageDetail\" [control]=\"control\"\n [showDeleteFile]=\"control.showDeleteFile\" [readonly]=\"control.readonly\" [accept]=\"control.accept\"\n [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n (onRemove)=\"handleFieldValueChange(control, $event, eventType.DELETED, data, parentPath)\">\n </file-upload>\n </span>\n <span *ngSwitchCase=\"'serviceFileUpload'\">\n <service-file-upload *ngIf=\"control.entityKey || data[control.entityKeyField] || control.rootFolderId\"\n [parentContext]=\"context\" [serviceCode]=\"control.serviceCode\" [entity]=\"control.entity\"\n [entityKey]=\"control.entityKey ? control.entityKey : data[control.entityKeyField]\"\n [control]=\"control\" [(ngModel)]=\"data[control.field]\"\n (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n (onRemove)=\"handleFieldValueChange(control, $event, eventType.DELETED, data, parentPath)\">\n </service-file-upload>\n </span>\n <ng-container *ngSwitchCase=\"'user-picker'\">\n <user-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\n [readOnlyValues]=\"data[control.field + '_readOnly']\" [multiple]=\"control.multiple\"\n [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n (onReady)=\"handleReadyControlPicker(control, parentPath)\">\n </user-picker>\n </ng-container>\n <ng-container *ngSwitchCase=\"'switch'\">\n <p-inputSwitch [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\n (onChange)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n </p-inputSwitch>\n </ng-container>\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <div [class]=\"control.class\" role=\"checkbox-alone\">\n <p-checkbox [disabled]=\"checkDisabled(data, control)\" [binary]=\"true\"\n [label]=\"control.isCustomLabel ? control.displayLabel : (!control.hiddenLabel ? control.label : null)\"\n [(ngModel)]=\"data[control.field]\"\n (onChange)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n </p-checkbox>\n <!-- <tn-checkbox [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\n [(ngModel)]=\"data[control.field]\"\n (onChange)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"></tn-checkbox> -->\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'button'\">\n <button type=\"button\" pButton [class]=\"control.btClass\" [icon]=\"control.icon\"\n [label]=\"control.buttonText | translate\" [ngStyle]=\"control.btStyle\" [pTooltip]=\"control.fullLabel\"\n tooltipPosition=\"top\" (click)=\"handleButtonClick(control, $event, parentPath)\"></button>\n </ng-container>\n <ng-container *ngSwitchCase=\"'container'\">\n <div class=\"p-grid p-col-12\" style=\"margin: 0\" [class.not-show-in-box]=\"!control.showInBox\"\n [class.show-in-box]=\"control.showInBox\" [ngStyle]=\"control.boxStyle\">\n <ng-container *ngFor=\"let subControl of control.controls\">\n <ng-container *ngTemplateOutlet=\"customControl; context: {\n control: subControl,\n data: data[control.field],\n parentPath: path,\n rowIndex: rowIndex,\n path: path + '.' + subControl.field,\n showLabel: subControl.showLabel,\n mdWidth: subControl.mdWidth,\n rowSpan: subControl.rowSpan\n }\">\n </ng-container>\n </ng-container>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'checkboxlist'\">\n <check-box-list [control]=\"control\" [dataSource]=\"data._source[control.field] || control.dataSource\"\n [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\n (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n (onSelect)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n (onReady)=\"handleControlReadyEvent(control, parentPath)\">\n </check-box-list>\n </ng-container>\n <ng-container *ngSwitchCase=\"'radiobuttonlist'\">\n <radio-button-list [control]=\"control\" [dataSource]=\"control.dataSource\"\n [disabled]=\"checkDisabled(data, control)\" [(value)]=\"data[control.field]\"\n (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n (adjustValue)=\"handleAdjustValueDropdownEvent(control, parentPath)\"\n (onReady)=\"handleReadyControlPicker(control, parentPath)\"\n (onDataSourceLoaded)=\"handleDataSourceLoaded(control, parentPath, $event)\">\n </radio-button-list>\n </ng-container>\n <ng-container *ngSwitchCase=\"'colorPicker'\">\n <tn-color-picker [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\n (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n </tn-color-picker>\n </ng-container>\n <ng-container *ngSwitchCase=\"'spanControl'\">\n <span *ngIf=\"!control.ishtml\">{{data[control.field]}}</span>\n <span *ngIf=\"control.ishtml\" [innerHTML]=\"data[control.field]\"></span>\n </ng-container>\n <ng-container *ngSwitchCase=\"'colorControl'\">\n <span class=\"show-color-control\" [ngStyle]=\"{ backgroundColor: data[control.sourceField]}\"></span>\n </ng-container>\n <ng-container *ngSwitchCase=\"'address'\">\n <address-picker [control]=\"control\" [showSubLabel]=\"control.showSubLabel\"\n [disabled]=\"checkDisabled(data, control)\" [(data)]=\"data[control.field]\"\n (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n (onSelect)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n (onReady)=\"handleControlReadyEvent(control, parentPath)\">\n </address-picker>\n </ng-container>\n <ng-container *ngSwitchCase=\"'autocomplete-picker'\">\n <autocomplete-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\n [required]=\"control.required\" [readOnlyValues]=\"data[control.field + '_readOnly']\"\n [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n (onReady)=\"handleReadyControlPicker(control, parentPath)\">\n </autocomplete-picker>\n </ng-container>\n <ng-container *ngSwitchCase=\"'cocautochuc'\">\n <cocautochuc-picker [control]=\"control\" [parentOrgId]=\"control.parentOrgId\"\n [disabled]=\"checkDisabled(data, control)\" [parentOrgCode]=\"control.parentOrgCode\"\n [filter]=\"control.filter\" [multiple]=\"control.multiple\" [required]=\"control.required\"\n [isUsingId]=\"control.isUsingId\" [disabledParentItem]=\"control.disabledParentItem\"\n [rootParentId]=\"control.rootParentId\" [(ngModel)]=\"data[control.field]\"\n (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n </cocautochuc-picker>\n </ng-container>\n <ng-container *ngSwitchCase=\"'cocautochuc-picker'\">\n <cocautochuc-picker-list [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\n [required]=\"control.required\" [readOnlyValues]=\"data[control.field + '_readOnly']\"\n [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n (onReady)=\"handleReadyControlPicker(control, parentPath)\">\n </cocautochuc-picker-list>\n </ng-container>\n <ng-container *ngSwitchCase=\"'cocautochuc-picker-new'\">\n <cocautochuc-picker-list-new [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\n [required]=\"control.required\" [readOnlyValues]=\"data[control.field + '_readOnly']\"\n [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n (onReady)=\"handleReadyControlPicker(control, parentPath)\">\n </cocautochuc-picker-list-new>\n </ng-container>\n <ng-container *ngSwitchCase=\"'vanban'\">\n <vanban-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\n [required]=\"control.required\" [readOnly]=\"control.readOnly\" [loaiVanBan]=\"control.loaiVanBan\"\n [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n </vanban-picker>\n </ng-container>\n <ng-container *ngSwitchCase=\"'congviec'\">\n <div>\n <congviec-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\n [required]=\"control.required\" [(ngModel)]=\"data[control.field]\"\n (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n </congviec-picker>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'percent'\">\n <div>\n <tn-mask [suffix]=\"'%'\" [placeholder]=\"control.placeholder\" [maskType]=\"'int'\"\n [autoFormat]=\"control.autoFormat\" [min]=\"0\" [max]=\"100\"\n [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\n (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n </tn-mask>\n <p-slider [step]=\"1\" [min]=\"0\" [max]=\"100\" [disabled]=\"checkDisabled(data, control)\"\n [(ngModel)]=\"data[control.field]\"\n (onSlideEnd)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n </p-slider>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'chips'\">\n <p-chips [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\n [placeholder]=\"control.placeholder\"\n (onAdd)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n (onRemove)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"></p-chips>\n </ng-container>\n <ng-container *ngSwitchCase=\"'entity-picker'\">\n <entity-picker [control]=\"control\" [children]=\"children\" [disabled]=\"checkDisabled(data, control)\"\n [required]=\"control.required\" [readOnly]=\"control.readOnly\" [(ngModel)]=\"data[control.field]\"\n (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n </entity-picker>\n </ng-container>\n <ng-container *ngSwitchCase=\"'table'\">\n <div [class]=\"control.class\">\n <tn-custom-scrollbar class=\"--has-border\" [showScrollHorizontal]=\"true\">\n <p-table class=\"new-table scr-table table-control\" [value]=\"data[control.field]\"\n [columns]=\"control.headerTemplate\" [responsive]=\"true\" [scrollable]=\"false\"\n [rowTrackBy]=\"trackByFuncId\"\n (onRowReorder)=\"handleRowOrdered(control, $event, eventType.ROW_REORDER, data, parentPath)\">\n <ng-template pTemplate=\"colgroup\">\n <colgroup>\n <col *ngIf=\"control.showNumber\" style=\"width: 40px\" />\n <ng-container *ngFor=\"let subControl of control.rowTemplate\">\n <col *ngIf=\"subControl && !subControl.hidden && subControl.visibleInList\"\n [style.width]=\"subControl.width\" />\n </ng-container>\n <col *ngIf=\"control.enableReorderRow\" style=\"width: 30px\" />\n <col *ngIf=\"control.showFunction\" [style.width]=\"control.widthFunctionColumn\" />\n </colgroup>\n </ng-template>\n <ng-template *ngIf=\"getComponentByType(_prefixCustomHeader + control.field)\"\n pTemplate=\"header\" let-columns>\n <ng-container\n *ngTemplateOutlet=\"getComponentByType(_prefixCustomHeader + control.field), context: {$implicit: control.headerTemplate, crudForm: this, containerSticky: containerSticky}\">\n </ng-container>\n </ng-template>\n <ng-template *ngIf=\"!getComponentByType(_prefixCustomHeader + control.field)\"\n pTemplate=\"header\" let-rowData let-columns>\n <tr>\n <th *ngIf=\"control.showNumber\" class=\"th-sticky stt\">\n {{ 'TT' |translate}}\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </th>\n <ng-container *ngFor=\"let subControl of control.rowTemplate\">\n <th *ngIf=\"subControl && !subControl.hidden && subControl.visibleInList\"\n [width]=\"subControl.width\"\n [pTooltip]=\"subControl.fullLabel || subControl.label\" tooltipPosition=\"top\"\n style=\"text-align: center;\">\n {{subControl.label}}\n <span *ngIf=\"subControl.required\" class=\"star-required\">*</span>\n <span *ngIf=\"subControl.description\"\n class=\"subControl-description\">({{subControl.description}})</span>\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </th>\n </ng-container>\n <th *ngIf=\"control.enableReorderRow\">\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </th>\n <th *ngIf=\"control.showFunction\" class=\"table-function column-function\">\n <div class=\"cell-header-function\"><span>Ch\u1EE9c n\u0103ng</span></div>\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-rowData let-ri=\"rowIndex\">\n <tr [pReorderableRow]=\"ri\" [class]=\"rowData.class\"\n (click)=\"handleRowClick(rowData, control)\">\n <td *ngIf=\"control.showNumber\" class=\"stt th-sticky\"\n style=\"text-align: center; vertical-align: inherit\">\n <span>\n {{ri + 1}}\n </span>\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </td>\n <ng-container *ngFor=\"let subControl of control.rowTemplate; let i = index\">\n <td *ngIf=\"subControl && !subControl.hidden && subControl.visibleInList\"\n [class.control-inside]=\"true\" [class]=\"subControl.class\"\n [ngStyle]=\"{'text-align': getTextAlign(subControl.textAlign), 'vertical-align': 'inherit'}\">\n <span class=\"p-column-title\">{{subControl.label}}</span>\n <ng-template [ngIf]=\"getControlType(subControl) != 'column'\">\n <ng-container *ngTemplateOutlet=\"customControl; context: {\n control: subControl,\n data: rowData,\n index: ri,\n tablePath: path,\n parentPath: path + '[' + ri + ']',\n path: path + '[' + ri + '].' + subControl.field,\n showLabel: false,\n mdWidth: 12,\n rowSpan: 1\n }\">\n </ng-container>\n </ng-template>\n <ng-template [ngIf]=\"getControlType(subControl) == 'column'\">\n <span>{{_modelData[control.field][ri][subControl.field]}}</span>\n </ng-template>\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </td>\n </ng-container>\n <td *ngIf=\"control.enableReorderRow\" class=\"no-padding center v-center\">\n <i class=\"fas fa-arrows-alt\" style=\"cursor:pointer; padding: 8px; color: #555;\"\n pReorderableRowHandle></i>\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </td>\n <td *ngIf=\"control.showFunction\" style=\"text-align: center\"\n class=\"column-function text-center\">\n <div *ngIf=\"!control.rowButtonTemplate\"\n class=\"p-toolbar-group-center button-group\">\n <button *ngIf=\"control.showSave\" [disabled]=\"rowData._disableSave\"\n type=\"button\" pButton class=\"p-button-text p-button-rounded\"\n icon=\"pi pi-save\" [pTooltip]=\"'L\u01B0u' | translate\" tooltipPosition=\"top\"\n (click)=\"saveRow(ri, control, path)\"></button>\n <button *ngIf=\"control.showEdit\" [disabled]=\"rowData._disableEdit\"\n type=\"button\" pButton class=\"p-button-text p-button-rounded\"\n icon=\"pi pi-pencil\" [pTooltip]=\"'S\u1EEDa' | translate\" tooltipPosition=\"top\"\n (click)=\"editRow(ri, control, path)\"></button>\n <button *ngIf=\"control.showDelete\" [disabled]=\"rowData._disableDelete\"\n type=\"button\" pButton\n class=\"p-button-text p-button-danger p-button-rounded\"\n icon=\"pi pi-trash\" [pTooltip]=\"'X\u00F3a' | translate\" tooltipPosition=\"top\"\n (click)=\"deleteRow(ri, control, path)\"></button>\n <button *ngIf=\"control.rowButtons\" type=\"button\" pButton\n icon=\"pi pi-ellipsis-v\"\n class=\"link-or-action p-button-text p-button-rounded\"\n pTooltip=\"Ch\u1EE9c n\u0103ng kh\u00E1c\" tooltipPosition=\"top\"\n (click)=\"showContextMenu($event, rowData, control)\"></button>\n </div>\n <div *ngIf=\"control.rowButtonTemplate\"\n class=\"p-toolbar-group-center button-group\">\n <ng-container\n *ngTemplateOutlet=\"control.rowButtonTemplate; context: {rowData: _modelData[control.field][ri], rowIndex: ri, path: path, control: control}\">\n </ng-container>\n </div>\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </td>\n </tr>\n </ng-template>\n <ng-template *ngIf=\"control.summaryTemplate\" pTemplate=\"summary\" let-rowData>\n <ng-container *ngTemplateOutlet=\"control.summaryTemplate; context: {rowData: rowData}\">\n </ng-container>\n </ng-template>\n </p-table>\n </tn-custom-scrollbar>\n <div *ngIf=\"control.showFooter\" class=\"--table-schema-footer\">\n <button *ngIf=\"control.showAdd\" type=\"button\" pButton style=\"width:auto\" label=\"Th\u00EAm m\u1EDBi\"\n icon=\"pi pi-plus\" class=\"p-button-text\" (click)=\"addNewRow(control, path)\"></button>\n <span *ngIf=\"control.showDialog\" style=\"font-weight: normal;\">\n <p-checkbox label=\"M\u1EDF dialog\" [binary]=\"true\" [(ngModel)]=\"control.showEdit\">\n </p-checkbox>\n </span>\n <button *ngIf=\"control.enableAddMulti\" type=\"button\" pButton\n style=\"width:auto; margin-left:10px;\" label=\"Th\u00EAm nhi\u1EC1u\" icon=\"pi pi-clone\"\n class=\"p-button-text\" (click)=\"addMultiRow(control, 5, path)\"></button>\n <button *ngFor=\"let bt of control.footerButtons\" type=\"button\" pButton [class]=\"bt.class\"\n [icon]=\"bt.icon\" [label]=\"bt.label | translate\" style=\"width:auto; margin-left:10px;\"\n (click)=\"messageRow( -1, control, path)\"></button>\n </div>\n </div>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <ng-container *ngIf=\"control.template\">\n <ng-container [ngTemplateOutlet]=\"control.template\" [ngTemplateOutletContext]=\"{\n crudForm: this, data: data, index: rowIndex, parentPath: parentPath, control: control, changeFunc: handleFieldValueChange\n }\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!control.template\" [ngTemplateOutlet]=\"getComponentByType(control.field)\"\n [ngTemplateOutletContext]=\"{\n crudForm: this, data: data, index: rowIndex, parentPath: parentPath, control: control, changeFunc: handleFieldValueChange\n }\">\n </ng-container>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"validation; context: {control: control, data: data}\">\n </ng-container>\n <div *ngIf=\"control.message\" class=\"control-message\">\n <span [class]=\"control.messageClass\">{{control.message}}</span>\n </div>\n </ng-container>\n </div>\n</ng-template>\n<ng-template #validation let-control=\"control\" let-data=\"data\">\n <ng-container *ngIf=\"data._errors[control.field].length > 0\">\n <div class=\"error-container\">\n <ng-container *ngFor=\"let error of data._errors[control.field]\">\n <div class=\"error-item\" *ngIf=\"error\">\n <ng-container [ngTemplateOutlet]=\"errorMessage\" [ngTemplateOutletContext]=\"{content: error}\">\n </ng-container>\n </div>\n </ng-container>\n </div>\n </ng-container>\n</ng-template>\n<ng-template #errorMessage let-content=\"content\">\n <div class=\"error-content\">\n <i class=\"pi pi-ban\"></i>\n <span> {{content}}</span>\n </div>\n</ng-template>\n<ng-template #labelControl let-control=\"control\">\n <ng-container>\n <label [class]=\"getLabelClass(control)\" *ngIf=\"!control.isHtml\" [attr.label-index]=\"control.indexLabel\"\n [pTooltip]=\"control.title\" tooltipPosition=\"top\" tooltipStyleClass=\"wrap\" [escape]=\"false\"\n [for]=\"control.for\">{{control.text | translate}}</label>\n <label [class]=\"getLabelClass(control)\" *ngIf=\"control.isHtml\" [innerHTML]=\"control.text | safeHtml\"\n [attr.label-index]=\"control.indexLabel\"></label>\n </ng-container>\n</ng-template>\n<ng-template #containerSticky>\n <span class=\"fix-sticky top\"></span>\n <span class=\"fix-sticky right\"></span>\n <span class=\"fix-sticky left\"></span>\n</ng-template>\n<!-- <ng-template #templateCongViecForm let-control=\"control\">\n <base-congviec-form [control]=\"control\" [parentSetting]=\"congViecSetting\" [tenCongViec]=\"control.data.tenCongViec\">\n </base-congviec-form>\n</ng-template> -->\n<tn-dialog *ngIf=\"tableFormDialogModel.showEditForm\" #dialog [styleClass]=\"'address-form'\"\n [header]=\"tableFormDialogModel.header | translate\" [popupSize]=\"tableFormDialogModel.popupSize\"\n (onHide)=\"tableFormDialogModel.showEditForm = false\">\n <table-detail-form #formBase [parentSetting]=\"setting\" [schema]=\"tableFormSchema\" [data]=\"tableFormDialogModel.data\"\n (onSaved)=\"handleSavedTableRow($event)\" (onCancel)=\"tableFormDialogModel.showEditForm = false\">\n </table-detail-form>\n</tn-dialog>",
14679
+ template: "<div [class]=\"_styleClass\">\n <form #formElement autocomplete=\"off\" autocorrect=\"off\" spellcheck=\"false\"\n [class]=\"'p-grid form-group crud-form' + (formClass ? ' ' + formClass : '')\"\n (keydown.shift.tab)=\"preventBlur($event)\">\n <div class=\"p-grid p-col-12\" [class.grid]=\"useGridTemplate\" style=\"margin: 0\">\n <ng-container *ngFor=\"let control of setting.schema\">\n <ng-container *ngTemplateOutlet=\"customControl; context: {\n control: control, data: _modelData, parentPath: '', path: control.field, showLabel: control.showLabel,\n mdWidth: control.mdWidth, rowSpan: control.rowSpan\n }\">\n </ng-container>\n </ng-container>\n </div>\n </form>\n</div>\n<p-contextMenu #contextMenu [appendTo]=\"'body'\" [model]=\"buttonContexts\">\n</p-contextMenu>\n<ng-template #customControl let-data=\"data\" let-control=\"control\" let-showLabel=\"showLabel\" let-mdWidth=\"mdWidth\"\n let-rowSpan=\"rowSpan\" let-rowIndex=\"index\" let-path=\"path\" let-parentPath=\"parentPath\" let-tablePath=\"tablePath\">\n <div *ngIf=\"!checkHidden(control, data, path)\" id=\"{{path}}-holder\"\n class=\"p-col-{{control.gWidth}} p-md-{{mdWidth}} row-span-{{rowSpan}} {{control.class}} crud-form-control type-{{control.dataType}}\"\n [class.error]=\"data._errors[control.field].length > 0\"\n [class.not-show-in-box-holder]=\"control.showInBox === false\"\n [class.show-in-box-holder]=\"control.showInBox === true\" [ngStyle]=\"control.style\">\n <div class=\"label\" *ngIf=\"showLabel\">\n <label *ngIf=\"control.label && !control.isHtmlLabel\" [pTooltip]=\"control.fullLabel\"\n tooltipPosition=\"top\">{{control.label}}\n <span *ngIf=\"control.required || control.showIconRequired\" class=\"star-required\">*</span>\n </label>\n <ng-container *ngIf=\"control.label && control.isHtmlLabel\">\n <label [innerHTML]=\"control.label | safeHtml\" [pTooltip]=\"control.fullLabel\" tooltipPosition=\"top\">\n </label>\n <span *ngIf=\"control.required || control.showIconRequired\" class=\"star-required\">*</span>\n </ng-container>\n <span *ngIf=\"control.description\" class=\"control-description\">({{control.description}})</span>\n </div>\n <ng-container [ngSwitch]=\"control.controlType\">\n <ng-container *ngSwitchCase=\"'label'\">\n <ng-container [ngTemplateOutlet]=\"labelControl\"\n [ngTemplateOutletContext]=\"{control: control, data: data}\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'title'\">\n <label *ngIf=\"!control.isHtml\" [for]=\"control.for\">{{control.text | translate}}</label>\n <label *ngIf=\"control.isHtml\" [innerHTML]=\"control.text | safeHtml\"></label>\n </ng-container>\n <ng-container *ngSwitchCase=\"'text'\">\n <div class=\"p-inputgroup\" *ngIf=\"control.suffFix\">\n <input [placeholder]=\"control.placeholder\" [tooltipDisabled]=\"control.dataFormat == 'password'\"\n [required]=\"control.validators && control.validators.required\" [pTooltip]=\"data[control.field]\"\n tooltipPosition=\"top\" tooltipStyleClass=\"wrap\"\n [attr.disabled]=\" checkDisabled(data, control) ? true : null\" pInputText\n [type]=\"control.dataFormat\" [max]=\"control.max\" [min]=\"control.min\"\n [maxlength]=\"control.maxLength\" [(ngModel)]=\"data[control.field]\"\n (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n (key.enter)=\"handleFieldValueChange(control, $event, eventType.ENTER, data, parentPath)\" />\n <span class=\"p-inputgroup-addon\">({{control.suffFix}})</span>\n </div>\n <input *ngIf=\"!control.suffFix\" [placeholder]=\"control.placeholder\"\n [tooltipDisabled]=\"control.dataFormat == 'password'\" [pTooltip]=\"data[control.field]\"\n tooltipPosition=\"top\" tooltipStyleClass=\"wrap\"\n [attr.disabled]=\"checkDisabled(data, control) ? true : null\" pInputText [type]=\"control.dataFormat\"\n [max]=\"control.max\" [min]=\"control.min\" [maxlength]=\"control.maxLength\"\n [(ngModel)]=\"data[control.field]\"\n (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n (key.enter)=\"handleFieldValueChange(control, $event, eventType.ENTER, data, parentPath)\" />\n </ng-container>\n <ng-container *ngSwitchCase=\"'htmlPreview'\">\n <html-preview [control]=\"control\" [(ngModel)]=\"data[control.field]\"\n (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n </html-preview>\n </ng-container>\n <ng-container *ngSwitchCase=\"'reference-text'\">\n <reference-textbox [control]=\"control\" [value]=\"data[control.field]\" [dataSource]=\"control.dataSource\"\n (onInit)=\"handleLoadedControl($event, control, parentPath)\"></reference-textbox>\n </ng-container>\n <ng-container *ngSwitchCase=\"'template'\">\n <ng-container [ngTemplateOutlet]=\"control.template\"\n [ngTemplateOutletContext]=\"{$implicit: _rootNode, control: control, data: data, tablePath: tablePath, parentPath: parentPath, rowIndex: rowIndex, funcUpdateModel: updateModelFromExternal}\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'content'\">\n <div class=\"control-content label\">\n <span [innerHTML]=\"data[control.field] ? (data[control.field] | safeHtml) : ''\">\n </span>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'mask'\">\n <tn-mask [prefix]=\"control.prefix\" [decimalPlaces]=\"control.decimalPlaces\" [suffix]=\"control.suffix\"\n [placeholder]=\"control.placeholder\" [disabled]=\"checkDisabled(data, control)\" tooltipPosition=\"top\"\n [tooltipDisabled]=\"control.dataFormat == 'password'\" [pTooltip]=\"data[control.field]\"\n [maskType]=\"control.maskType\" [autoFormat]=\"control.autoFormat\" [min]=\"control.min\"\n [max]=\"control.max\" [(ngModel)]=\"data[control.field]\"\n (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n </tn-mask>\n </ng-container>\n <ng-container *ngSwitchCase=\"'numberrange'\">\n <tn-number-picker-range [decimalPlaces]=\"control.decimalPlaces\"\n [disabled]=\"checkDisabled(data, control)\" [maskType]=\"control.maskType\" [min]=\"control.min\"\n [max]=\"control.max\" [placeholder]=\"control.placeholder\" [(ngModel)]=\"data[control.field]\"\n (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n (blur)=\"handleFieldValueChange(control, $event, eventType.BLUR, data, parentPath)\">\n </tn-number-picker-range>\n </ng-container>\n <ng-container *ngSwitchCase=\"'money'\">\n <input currencyMask [attr.disabled]=\"checkDisabled(data, control) ? true : null\" pInputText type=\"tel\"\n tooltipPosition=\"top\" [pTooltip]=\"data[control.field] | number: '1.0-0'\"\n [options]=\"{prefix: '', thousands: '.', decimal: ',',precision:control.dataFormat === 'money'?0:0 }\"\n [(ngModel)]=\"data[control.field]\"\n (ngModelChange)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\" />\n </ng-container>\n <ng-container *ngSwitchCase=\"'phoneOrfax'\">\n <input [placeholder]=\"control.dataFormat==='phone'?'(999) 999-9999':'999-999-9999'\"\n [attr.disabled]=\"checkDisabled(data, control) ? true : null\" type=\"tel\" pInputText\n [(ngModel)]=\"data[control.field]\"\n (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\" />\n </ng-container>\n <ng-container *ngSwitchCase=\"'textarea'\">\n <textarea pInputTextarea [rows]=\"control.rows ? control.rows : 5\"\n [attr.disabled]=\"checkDisabled(data, control) ? true : null\" [(ngModel)]=\"data[control.field]\"\n [placeholder]=\"control.placeholder\"\n (keyup)=\"handleKeyUp(control, $event, eventType.CHANGE, data, parentPath)\"\n (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"></textarea>\n </ng-container>\n <ng-container *ngSwitchCase=\"'editor'\">\n <tn-tinymce *ngIf=\"!checkDisabled(data, control)\"\n [required]=\"control.validators && control.validators.required\" [mode]=\"control.mode\"\n [height]=\"control.height ? control.height : 250\" [languageCode]=\"control.languageCode\"\n [control]=\"control\"\n [disabled]=\"control.disabled || (control.disableCheck && control.disableCheck(model))\"\n [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n (onKeyUp)=\"handleKeyUp(control, $event, eventType.CHANGE, data, parentPath)\"\n (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n </tn-tinymce>\n <div *ngIf=\"checkDisabled(data, control)\" class=\"html-box\"\n [innerHTML]=\"data[control.field] ? (data[control.field] | safeHtml) : ''\">\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'datetime'\">\n <datetime-picker [disabled]=\"checkDisabled(data, control)\" [control]=\"control\"\n [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n </datetime-picker>\n </ng-container>\n <ng-container *ngSwitchCase=\"'autocomplete'\">\n <app-autocomplete-datasource [control]=\"control\"\n [suggestions]=\"data._source[control.field] || control.dataSource\" [(ngModel)]=\"data[control.field]\"\n (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n (onValueChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n </app-autocomplete-datasource>\n </ng-container>\n <ng-container *ngSwitchCase=\"'datetimerange'\">\n <tn-datetime-picker-range [disabled]=\"control.disabled\" [control]=\"control\"\n [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n </tn-datetime-picker-range>\n </ng-container>\n <ng-container *ngSwitchCase=\"'dropdown'\">\n <dropdown [control]=\"control\" [dataSource]=\"getControlDataSource(control, data)\" [data]=\"data\"\n [(value)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n (onChanged)=\"handleChangeDropdown(control, $event, eventType.CHANGE, data, parentPath)\"\n (onHideSmartEvent)=\"handleChangeDropdown(control, $event, eventType.HIDE, data, parentPath)\"\n (adjustValue)=\"handleAdjustValueDropdownEvent(control, parentPath)\"\n (onDataSourceLoaded)=\"handleDataSourceLoaded(control, parentPath, $event)\"\n (onReady)=\"handleControlReadyEvent(control, parentPath)\">\n </dropdown>\n </ng-container>\n <ng-container *ngSwitchCase=\"'imageuploader'\">\n <app-image-uploader [loadByEntityKey]=\"control.loadByEntityKey\" [entityKey]=\"control.entityKey\"\n [defaultNoImageUrl]=\"'/assets/images/no-image.jpg'\" [multiple]=\"control.multiple\"\n [disabled]=\"control.disabled\" [isAvatar]=\"control.isAvatar\" [(ngModel)]=\"data[control.field]\"\n (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n (onInit)=\"handleLoadedControl($event, control, parentPath)\">\n <ng-template *ngIf=\"control.templateItems\" #items let-files>\n <ng-container *ngTemplateOutlet=\"control.templateItems; context: {\n $implicit: files\n }\"></ng-container>\n </ng-template>\n <ng-template *ngIf=\"control.templateItem\" #item let-file>\n <ng-container *ngTemplateOutlet=\"control.templateItem; context: {\n $implicit: file\n }\"></ng-container>\n </ng-template>\n </app-image-uploader>\n </ng-container>\n <ng-container *ngSwitchCase=\"'fileManager'\">\n <file-manager *ngIf=\"control.entityKey || data[control.entityKeyField] || control.rootFolderId\"\n [control]=\"control\" [serviceCode]=\"control.serviceCode\" [entity]=\"control.entity\"\n [hiddenCreateFolder]=\"control.hiddenCreateFolder\"\n [entityKey]=\"control.entityKey ? control.entityKey : data[control.entityKeyField]\"\n [readonly]=\"control.disabled\" [layout]=\"control.layout\" [rootFolderId]=\"control.rootFolderId\"\n [maxFileSize]=\"control.maxFileSize\" [inTaiLieu]=\"control.inTaiLieu\"\n [inTaiLieuChung]=\"control.inTaiLieuChung\" [copyToFolderId]=\"control.copyToFolderId\"\n [filePickerSetting]=\"control.filePickerSetting\" [dataForm]=\"data\"\n [invalidFileSizeMessageSummary]=\"control.invalidFileSizeMessageSummary\"\n [invalidFileSizeMessageDetail]=\"control.invalidFileSizeMessageDetail\"\n [invalidFileTypeMessageSummary]=\"control.invalidFileTypeMessageSummary\"\n [invalidFileTypeMessageDetail]=\"control.invalidFileTypeMessageDetail\"\n [invalidFileLimitMessageSummary]=\"control.invalidFileLimitMessageSummary\"\n [invalidFileLimitMessageDetail]=\"control.invalidFileLimitMessageDetail\" [parentSetting]=\"setting\"\n [noFileMessage]=\"control.noFileMessage\" [(value)]=\"data[control.field]\"\n (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n (onSelected)=\"control.onSelected($event)\"\n (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n (onReady)=\"handleControlReadyEvent(control, parentPath)\">\n </file-manager>\n </ng-container>\n <span *ngSwitchCase=\"'fileUpload'\">\n <file-upload [sharedFolderType]=\"control.sharedFolderType\" [maxFileSize]=\"control.maxFileSize\"\n [invalidFileSizeMessageSummary]=\"control.invalidFileSizeMessageSummary\"\n [invalidFileSizeMessageDetail]=\"control.invalidFileSizeMessageDetail\"\n [invalidFileTypeMessageSummary]=\"control.invalidFileTypeMessageSummary\"\n [invalidFileTypeMessageDetail]=\"control.invalidFileTypeMessageDetail\"\n [invalidFileLimitMessageSummary]=\"control.invalidFileLimitMessageSummary\"\n [invalidFileLimitMessageDetail]=\"control.invalidFileLimitMessageDetail\" [control]=\"control\"\n [showDeleteFile]=\"control.showDeleteFile\" [readonly]=\"control.readonly\" [accept]=\"control.accept\"\n [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n (onRemove)=\"handleFieldValueChange(control, $event, eventType.DELETED, data, parentPath)\">\n </file-upload>\n </span>\n <span *ngSwitchCase=\"'serviceFileUpload'\">\n <service-file-upload *ngIf=\"control.entityKey || data[control.entityKeyField] || control.rootFolderId\"\n [parentContext]=\"context\" [serviceCode]=\"control.serviceCode\" [entity]=\"control.entity\"\n [entityKey]=\"control.entityKey ? control.entityKey : data[control.entityKeyField]\"\n [control]=\"control\" [(ngModel)]=\"data[control.field]\"\n (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n (onRemove)=\"handleFieldValueChange(control, $event, eventType.DELETED, data, parentPath)\">\n </service-file-upload>\n </span>\n <ng-container *ngSwitchCase=\"'user-picker'\">\n <user-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\n [readOnlyValues]=\"data[control.field + '_readOnly']\" [multiple]=\"control.multiple\"\n [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n (onReady)=\"handleReadyControlPicker(control, parentPath)\">\n </user-picker>\n </ng-container>\n <ng-container *ngSwitchCase=\"'switch'\">\n <p-inputSwitch [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\n (onChange)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n </p-inputSwitch>\n </ng-container>\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <div [class]=\"control.class\" role=\"checkbox-alone\">\n <p-checkbox [disabled]=\"checkDisabled(data, control)\" [binary]=\"true\"\n [label]=\"control.isCustomLabel ? control.displayLabel : (!control.hiddenLabel ? control.label : null)\"\n [(ngModel)]=\"data[control.field]\"\n (onChange)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n </p-checkbox>\n <!-- <tn-checkbox [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\n [(ngModel)]=\"data[control.field]\"\n (onChange)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"></tn-checkbox> -->\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'button'\">\n <button type=\"button\" pButton [class]=\"control.btClass\" [icon]=\"control.icon\"\n [label]=\"control.buttonText | translate\" [ngStyle]=\"control.btStyle\" [pTooltip]=\"control.fullLabel\"\n tooltipPosition=\"top\" (click)=\"handleButtonClick(control, $event, parentPath)\"></button>\n </ng-container>\n <ng-container *ngSwitchCase=\"'container'\">\n <div class=\"p-grid p-col-12\" style=\"margin: 0\" [class.not-show-in-box]=\"!control.showInBox\"\n [class.show-in-box]=\"control.showInBox\" [ngStyle]=\"control.boxStyle\">\n <ng-container *ngFor=\"let subControl of control.controls\">\n <ng-container *ngTemplateOutlet=\"customControl; context: {\n control: subControl,\n data: data[control.field],\n parentPath: path,\n rowIndex: rowIndex,\n path: path + '.' + subControl.field,\n showLabel: subControl.showLabel,\n mdWidth: subControl.mdWidth,\n rowSpan: subControl.rowSpan\n }\">\n </ng-container>\n </ng-container>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'checkboxlist'\">\n <check-box-list [control]=\"control\" [dataSource]=\"data._source[control.field] || control.dataSource\"\n [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\n (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n (onSelect)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n (onReady)=\"handleControlReadyEvent(control, parentPath)\">\n </check-box-list>\n </ng-container>\n <ng-container *ngSwitchCase=\"'radiobuttonlist'\">\n <radio-button-list [control]=\"control\" [dataSource]=\"control.dataSource\"\n [disabled]=\"checkDisabled(data, control)\" [(value)]=\"data[control.field]\"\n (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n (adjustValue)=\"handleAdjustValueDropdownEvent(control, parentPath)\"\n (onReady)=\"handleReadyControlPicker(control, parentPath)\"\n (onDataSourceLoaded)=\"handleDataSourceLoaded(control, parentPath, $event)\">\n </radio-button-list>\n </ng-container>\n <ng-container *ngSwitchCase=\"'colorPicker'\">\n <tn-color-picker [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\n (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n </tn-color-picker>\n </ng-container>\n <ng-container *ngSwitchCase=\"'spanControl'\">\n <span *ngIf=\"!control.ishtml\">{{data[control.field]}}</span>\n <span *ngIf=\"control.ishtml\" [innerHTML]=\"data[control.field]\"></span>\n </ng-container>\n <ng-container *ngSwitchCase=\"'colorControl'\">\n <span class=\"show-color-control\" [ngStyle]=\"{ backgroundColor: data[control.sourceField]}\"></span>\n </ng-container>\n <ng-container *ngSwitchCase=\"'address'\">\n <address-picker [control]=\"control\" [showSubLabel]=\"control.showSubLabel\"\n [disabled]=\"checkDisabled(data, control)\" [(data)]=\"data[control.field]\"\n (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n (onSelect)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n (onReady)=\"handleControlReadyEvent(control, parentPath)\">\n </address-picker>\n </ng-container>\n <ng-container *ngSwitchCase=\"'autocomplete-picker'\">\n <autocomplete-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\n [required]=\"control.required\" [readOnlyValues]=\"data[control.field + '_readOnly']\"\n [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n (onReady)=\"handleReadyControlPicker(control, parentPath)\">\n </autocomplete-picker>\n </ng-container>\n <ng-container *ngSwitchCase=\"'cocautochuc'\">\n <cocautochuc-picker [control]=\"control\" [parentOrgId]=\"control.parentOrgId\"\n [disabled]=\"checkDisabled(data, control)\" [parentOrgCode]=\"control.parentOrgCode\"\n [filter]=\"control.filter\" [multiple]=\"control.multiple\" [required]=\"control.required\"\n [isUsingId]=\"control.isUsingId\" [disabledParentItem]=\"control.disabledParentItem\"\n [rootParentId]=\"control.rootParentId\" [(ngModel)]=\"data[control.field]\"\n (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n </cocautochuc-picker>\n </ng-container>\n <ng-container *ngSwitchCase=\"'cocautochuc-picker'\">\n <cocautochuc-picker-list [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\n [required]=\"control.required\" [readOnlyValues]=\"data[control.field + '_readOnly']\"\n [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n (onReady)=\"handleReadyControlPicker(control, parentPath)\">\n </cocautochuc-picker-list>\n </ng-container>\n <ng-container *ngSwitchCase=\"'cocautochuc-picker-new'\">\n <cocautochuc-picker-list-new [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\n [required]=\"control.required\" [readOnlyValues]=\"data[control.field + '_readOnly']\"\n [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n (onReady)=\"handleReadyControlPicker(control, parentPath)\">\n </cocautochuc-picker-list-new>\n </ng-container>\n <ng-container *ngSwitchCase=\"'vanban'\">\n <vanban-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\n [required]=\"control.required\" [readOnly]=\"control.readOnly\" [loaiVanBan]=\"control.loaiVanBan\"\n [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n </vanban-picker>\n </ng-container>\n <ng-container *ngSwitchCase=\"'congviec'\">\n <div>\n <congviec-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\n [required]=\"control.required\" [(ngModel)]=\"data[control.field]\"\n (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n </congviec-picker>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'percent'\">\n <div>\n <tn-mask [suffix]=\"'%'\" [placeholder]=\"control.placeholder\" [maskType]=\"'int'\"\n [autoFormat]=\"control.autoFormat\" [min]=\"0\" [max]=\"100\"\n [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\n (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n </tn-mask>\n <p-slider [step]=\"1\" [min]=\"0\" [max]=\"100\" [disabled]=\"checkDisabled(data, control)\"\n [(ngModel)]=\"data[control.field]\"\n (onSlideEnd)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n </p-slider>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'chips'\">\n <p-chips [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\n [placeholder]=\"control.placeholder\"\n (onAdd)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n (onRemove)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"></p-chips>\n </ng-container>\n <ng-container *ngSwitchCase=\"'entity-picker'\">\n <entity-picker [control]=\"control\" [children]=\"children\" [disabled]=\"checkDisabled(data, control)\"\n [required]=\"control.required\" [readOnly]=\"control.readOnly\" [(ngModel)]=\"data[control.field]\"\n (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n </entity-picker>\n </ng-container>\n <ng-container *ngSwitchCase=\"'table'\">\n <div [class]=\"control.class\">\n <tn-custom-scrollbar class=\"--has-border\" [showScrollHorizontal]=\"true\">\n <p-table class=\"new-table scr-table table-control\" [value]=\"data[control.field]\"\n [columns]=\"control.headerTemplate\" [responsive]=\"true\" [scrollable]=\"false\"\n [rowTrackBy]=\"trackByFuncId\"\n (onRowReorder)=\"handleRowOrdered(control, $event, eventType.ROW_REORDER, data, parentPath)\">\n <ng-template pTemplate=\"colgroup\">\n <colgroup>\n <col *ngIf=\"control.showNumber\" style=\"width: 40px\" />\n <ng-container *ngFor=\"let subControl of control.rowTemplate\">\n <col *ngIf=\"subControl && !subControl.hidden && subControl.visibleInList\"\n [style.width]=\"subControl.width\" />\n </ng-container>\n <col *ngIf=\"control.enableReorderRow\" style=\"width: 30px\" />\n <col *ngIf=\"control.showFunction\" [style.width]=\"control.widthFunctionColumn\" />\n </colgroup>\n </ng-template>\n <ng-template *ngIf=\"getComponentByType(_prefixCustomHeader + control.field)\"\n pTemplate=\"header\" let-columns>\n <ng-container\n *ngTemplateOutlet=\"getComponentByType(_prefixCustomHeader + control.field), context: {$implicit: control.headerTemplate, crudForm: this, containerSticky: containerSticky}\">\n </ng-container>\n </ng-template>\n <ng-template *ngIf=\"!getComponentByType(_prefixCustomHeader + control.field)\"\n pTemplate=\"header\" let-rowData let-columns>\n <tr>\n <th *ngIf=\"control.showNumber\" class=\"th-sticky stt\">\n {{ 'TT' |translate}}\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </th>\n <ng-container *ngFor=\"let subControl of control.rowTemplate\">\n <th *ngIf=\"subControl && !subControl.hidden && subControl.visibleInList\"\n [width]=\"subControl.width\"\n [pTooltip]=\"subControl.fullLabel || subControl.label\" tooltipPosition=\"top\"\n style=\"text-align: center;\">\n {{subControl.label}}\n <span *ngIf=\"subControl.required\" class=\"star-required\">*</span>\n <span *ngIf=\"subControl.description\"\n class=\"subControl-description\">({{subControl.description}})</span>\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </th>\n </ng-container>\n <th *ngIf=\"control.enableReorderRow\">\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </th>\n <th *ngIf=\"control.showFunction\" class=\"table-function column-function\">\n <div class=\"cell-header-function\"><span>Ch\u1EE9c n\u0103ng</span></div>\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-rowData let-ri=\"rowIndex\">\n <tr [pReorderableRow]=\"ri\" [class]=\"rowData.class\"\n (click)=\"handleRowClick(rowData, control)\">\n <td *ngIf=\"control.showNumber\" class=\"stt th-sticky\"\n style=\"text-align: center; vertical-align: inherit\">\n <span>\n {{ri + 1}}\n </span>\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </td>\n <ng-container *ngFor=\"let subControl of control.rowTemplate; let i = index\">\n <td *ngIf=\"subControl && !subControl.hidden && subControl.visibleInList\"\n [class.control-inside]=\"true\" [class]=\"subControl.class\"\n [ngStyle]=\"{'text-align': getTextAlign(subControl.textAlign), 'vertical-align': 'inherit'}\">\n <span class=\"p-column-title\">{{subControl.label}}</span>\n <ng-template [ngIf]=\"getControlType(subControl) != 'column'\">\n <ng-container *ngTemplateOutlet=\"customControl; context: {\n control: subControl,\n data: rowData,\n index: ri,\n tablePath: path,\n parentPath: path + '[' + ri + ']',\n path: path + '[' + ri + '].' + subControl.field,\n showLabel: false,\n mdWidth: 12,\n rowSpan: 1\n }\">\n </ng-container>\n </ng-template>\n <ng-template [ngIf]=\"getControlType(subControl) == 'column'\">\n <span>{{_modelData[control.field][ri][subControl.field]}}</span>\n </ng-template>\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </td>\n </ng-container>\n <td *ngIf=\"control.enableReorderRow\" class=\"no-padding center v-center\">\n <i class=\"fas fa-arrows-alt\" style=\"cursor:pointer; padding: 8px; color: #555;\"\n pReorderableRowHandle></i>\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </td>\n <td *ngIf=\"control.showFunction\" style=\"text-align: center\"\n class=\"column-function text-center\">\n <div *ngIf=\"!control.rowButtonTemplate\"\n class=\"p-toolbar-group-center button-group\">\n <button *ngIf=\"control.showSave\" [disabled]=\"rowData._disableSave\"\n type=\"button\" pButton class=\"p-button-text p-button-rounded\"\n icon=\"pi pi-save\" [pTooltip]=\"'L\u01B0u' | translate\" tooltipPosition=\"top\"\n (click)=\"saveRow(ri, control, path)\"></button>\n <button *ngIf=\"control.showEdit\" [disabled]=\"rowData._disableEdit\"\n type=\"button\" pButton class=\"p-button-text p-button-rounded\"\n icon=\"pi pi-pencil\" [pTooltip]=\"'S\u1EEDa' | translate\" tooltipPosition=\"top\"\n (click)=\"editRow(ri, control, path)\"></button>\n <button *ngIf=\"control.showDelete\" [disabled]=\"rowData._disableDelete\"\n type=\"button\" pButton\n class=\"p-button-text p-button-danger p-button-rounded\"\n icon=\"pi pi-trash\" [pTooltip]=\"'X\u00F3a' | translate\" tooltipPosition=\"top\"\n (click)=\"deleteRow(ri, control, path)\"></button>\n <button *ngIf=\"control.rowButtons\" type=\"button\" pButton\n icon=\"pi pi-ellipsis-v\"\n class=\"link-or-action p-button-text p-button-rounded\"\n pTooltip=\"Ch\u1EE9c n\u0103ng kh\u00E1c\" tooltipPosition=\"top\"\n (click)=\"showContextMenu($event, rowData, control)\"></button>\n </div>\n <div *ngIf=\"control.rowButtonTemplate\"\n class=\"p-toolbar-group-center button-group\">\n <ng-container\n *ngTemplateOutlet=\"control.rowButtonTemplate; context: {rowData: _modelData[control.field][ri], rowIndex: ri, path: path, control: control}\">\n </ng-container>\n </div>\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </td>\n </tr>\n </ng-template>\n <ng-template *ngIf=\"control.summaryTemplate\" pTemplate=\"summary\" let-rowData>\n <ng-container *ngTemplateOutlet=\"control.summaryTemplate; context: {rowData: rowData}\">\n </ng-container>\n </ng-template>\n </p-table>\n </tn-custom-scrollbar>\n <div *ngIf=\"control.showFooter\" class=\"--table-schema-footer\">\n <button *ngIf=\"control.showAdd\" type=\"button\" pButton style=\"width:auto\" label=\"Th\u00EAm m\u1EDBi\"\n icon=\"pi pi-plus\" class=\"p-button-text\" (click)=\"addNewRow(control, path)\"></button>\n <span *ngIf=\"control.showDialog\" style=\"font-weight: normal;\">\n <p-checkbox label=\"M\u1EDF dialog\" [binary]=\"true\" [(ngModel)]=\"control.showEdit\">\n </p-checkbox>\n </span>\n <button *ngIf=\"control.enableAddMulti\" type=\"button\" pButton\n style=\"width:auto; margin-left:10px;\" label=\"Th\u00EAm nhi\u1EC1u\" icon=\"pi pi-clone\"\n class=\"p-button-text\" (click)=\"addMultiRow(control, 5, path)\"></button>\n <button *ngFor=\"let bt of control.footerButtons\" type=\"button\" pButton [class]=\"bt.class\"\n [icon]=\"bt.icon\" [label]=\"bt.label | translate\" style=\"width:auto; margin-left:10px;\"\n (click)=\"messageRow( -1, control, path)\"></button>\n </div>\n </div>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <ng-container *ngIf=\"control.template\">\n <ng-container [ngTemplateOutlet]=\"control.template\" [ngTemplateOutletContext]=\"{\n crudForm: this, data: data, index: rowIndex, parentPath: parentPath, control: control, changeFunc: handleFieldValueChange\n }\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!control.template\" [ngTemplateOutlet]=\"getComponentByType(control.field)\"\n [ngTemplateOutletContext]=\"{\n crudForm: this, data: data, index: rowIndex, parentPath: parentPath, control: control, changeFunc: handleFieldValueChange\n }\">\n </ng-container>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"validation; context: {control: control, data: data}\">\n </ng-container>\n <div *ngIf=\"control.message\" class=\"control-message\">\n <span [class]=\"control.messageClass\">{{control.message}}</span>\n </div>\n </ng-container>\n </div>\n</ng-template>\n<ng-template #validation let-control=\"control\" let-data=\"data\">\n <ng-container *ngIf=\"data._errors[control.field].length > 0\">\n <div class=\"error-container\">\n <ng-container *ngFor=\"let error of data._errors[control.field]\">\n <div class=\"error-item\" *ngIf=\"error\">\n <ng-container [ngTemplateOutlet]=\"errorMessage\" [ngTemplateOutletContext]=\"{content: error}\">\n </ng-container>\n </div>\n </ng-container>\n </div>\n </ng-container>\n</ng-template>\n<ng-template #errorMessage let-content=\"content\">\n <div class=\"error-content\">\n <i class=\"pi pi-ban\"></i>\n <span> {{content}}</span>\n </div>\n</ng-template>\n<ng-template #labelControl let-control=\"control\">\n <ng-container>\n <label [class]=\"getLabelClass(control)\" *ngIf=\"!control.isHtml\" [attr.label-index]=\"control.indexLabel\"\n [pTooltip]=\"control.title\" tooltipPosition=\"top\" tooltipStyleClass=\"wrap\" [escape]=\"false\"\n [for]=\"control.for\">{{control.text | translate}}</label>\n <label [class]=\"getLabelClass(control)\" *ngIf=\"control.isHtml\" [innerHTML]=\"control.text | safeHtml\"\n [attr.label-index]=\"control.indexLabel\"></label>\n </ng-container>\n</ng-template>\n<ng-template #containerSticky>\n <span class=\"fix-sticky top\"></span>\n <span class=\"fix-sticky right\"></span>\n <span class=\"fix-sticky left\"></span>\n</ng-template>\n<!-- <ng-template #templateCongViecForm let-control=\"control\">\n <base-congviec-form [control]=\"control\" [parentSetting]=\"congViecSetting\" [tenCongViec]=\"control.data.tenCongViec\">\n </base-congviec-form>\n</ng-template> -->\n<tn-dialog *ngIf=\"tableFormDialogModel.showEditForm\" #dialog [styleClass]=\"'address-form'\"\n [header]=\"tableFormDialogModel.header | translate\" [popupSize]=\"tableFormDialogModel.popupSize\"\n (onHide)=\"tableFormDialogModel.showEditForm = false\">\n <table-detail-form #formBase [parentSetting]=\"setting\" [schema]=\"tableFormSchema\" [data]=\"tableFormDialogModel.data\"\n (onSaved)=\"handleSavedTableRow($event)\" (onCancel)=\"tableFormDialogModel.showEditForm = false\">\n </table-detail-form>\n</tn-dialog>",
14680
14680
  providers: [ComponentContextService],
14681
14681
  styles: [".label-only{font-weight:700;margin-bottom:1em}div.label{position:relative}div.label .star-required{color:red;position:absolute;padding-left:.2em;padding-top:.1em}th>span.star-required{color:red;padding-left:.2em;padding-top:.3em}div.type-container.not-show-in-box-holder{padding:0}.--table-schema-footer{display:flex;align-items:center;font-weight:600;padding:.5em;background:#f8f9fa;color:#495057;border:1px solid #e9ecef}.show-in-box{border:1px solid #ced4da;border-radius:5px}.not-show-in-box{padding:0}.view-mode div.label{padding-bottom:3px}.view-mode div.label label{font-weight:700;font-size:.85em}.view-mode>span:not(:empty){display:inline-block;width:100%;padding:5px 0}.view-mode.type-table div.label+div{padding:5px 0}td>.view-mode{display:inline-block;padding:.25rem .5rem}td>.view-mode .view-mode{padding:0}.crud-form-control div[role=checkbox-alone]{margin-top:24px}.crud-form-control div[role=checkbox-alone].mg-top-0{margin-top:0}.crud-form-control .label+div[role=checkbox-alone]{margin-top:11px}.crud-form-control.type-table div[role=checkbox-alone]{margin-top:6px;text-align:center}.crud-form-control.type-table div[role=checkbox-alone].mg-top-0{margin-top:0}.crud-form-control.type-table div[role=checkbox-alone].align-left{text-align:left}.crud-form-control.type-title{font-size:1.2rem;font-weight:700;color:#025ba7;border-bottom:1px solid #cfcfcf;text-transform:uppercase;padding:5px;margin-bottom:5px}.crud-form-control.type-title>.label{margin-bottom:0}.control-description,.crud-form-control .subControl-description{font-size:.8rem;font-weight:700;color:#007eff;margin-bottom:5px}.control-description{padding-left:.75rem}.th-sticky{text-align:center!important;z-index:2!important;position:sticky!important;top:0;background:inherit}.th-sticky.stt{left:0}.cell-header-function{display:flex;align-items:center}.cell-header-function>span{text-align:center;flex:1 1}.cell-header-function button{width:24px;height:24px;padding:0;margin:0}.no-value{font-size:.8em}@keyframes fadeIn{0%{opacity:0;top:-25px}to{opacity:1;top:0}}@keyframes shrink{0%{height:0}to{height:20px}}@media screen and (min-width:40.063em){.label-right{padding-left:2em}}::ng-deep crud-form .crud-form-control .tn-check-box-list{margin-top:5px}::ng-deep crud-form .crud-form-control>div.label{margin-bottom:5px;font-size:.9rem;height:1.15em}::ng-deep crud-form .crud-form-control>div.label+*{width:100%}::ng-deep crud-form .crud-form-control>.error-container .error-item{overflow:visible;animation:shrink .1s;min-height:20px;padding-top:5px}::ng-deep crud-form .crud-form-control>.error-container .error-item .error-content{display:flex;position:relative;color:red;font-size:.9em;animation:fadeIn .1s}::ng-deep crud-form .crud-form-control>.error-container .error-item .error-content i{font-size:.9em;display:flex;padding-top:1px}::ng-deep crud-form .crud-form-control>.error-container .error-item .error-content span{display:flex;padding-left:5px}::ng-deep crud-form .crud-form-control .control-message{margin-top:5px;font-size:.9rem}::ng-deep crud-form .crud-form-control .control-message .green{color:#00af00}::ng-deep crud-form .crud-form-control .control-message .red{color:red}::ng-deep crud-form .crud-form-control .control-message .blue{color:#0095ff}::ng-deep crud-form .crud-form-control.no-label>div.label{display:none}::ng-deep crud-form .crud-form-control.error .p-dropdown,::ng-deep crud-form .crud-form-control.error .p-inputtext,::ng-deep crud-form .crud-form-control.error .p-multiselect,::ng-deep crud-form .crud-form-control.error .tn-dropdown,::ng-deep crud-form .crud-form-control.error input,::ng-deep crud-form .crud-form-control.error select,::ng-deep crud-form .crud-form-control.error textarea{border-color:#ff5722!important}::ng-deep crud-form .crud-form-control.error .p-autocomplete-multiple-container:not(.p-disabled).p-focus,::ng-deep crud-form .crud-form-control.error .p-inputtext:enabled:focus,::ng-deep crud-form .crud-form-control.error .tn-dropdown:not(.p-disabled).p-focus{box-shadow:0 0 0 .2rem #ffc4b3}::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) .p-dropdown,::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) .p-inputtext,::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) .p-multiselect,::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) .tn-dropdown,::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) input,::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) select,::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) textarea{border-color:#ced4da!important}::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) .p-autocomplete-multiple-container:not(.p-disabled).p-focus,::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) .p-dropdown.tn-dropdown.p-focus,::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) .p-inputtext:enabled:focus{box-shadow:0 0 0 .2rem #a6d5fa}::ng-deep crud-form .crud-form-container{padding:.5rem .5rem 0}::ng-deep crud-form .p-datatable .p-datatable-tbody tr td.control-inside,::ng-deep crud-form .p-datatable .p-datatable-tbody tr td.control-inside .show-in-box:not(.crud-form-control),::ng-deep crud-form base-congviec-form crud-form>.crud-form-container{padding:0}@media screen and (min-width:768px){::ng-deep crud-form .grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}::ng-deep crud-form .grid .p-md-1{width:unset;grid-column:span 1}::ng-deep crud-form .grid .p-md-2{width:unset;grid-column:span 2}::ng-deep crud-form .grid .p-md-3{width:unset;grid-column:span 3}::ng-deep crud-form .grid .p-md-4{width:unset;grid-column:span 4}::ng-deep crud-form .grid .p-md-5{width:unset;grid-column:span 5}::ng-deep crud-form .grid .p-md-6{width:unset;grid-column:span 6}::ng-deep crud-form .grid .p-md-7{width:unset;grid-column:span 7}::ng-deep crud-form .grid .p-md-8{width:unset;grid-column:span 8}::ng-deep crud-form .grid .p-md-9{width:unset;grid-column:span 9}::ng-deep crud-form .grid .p-md-10{width:unset;grid-column:span 10}::ng-deep crud-form .grid .p-md-11{width:unset;grid-column:span 11}::ng-deep crud-form .grid .p-md-12{width:unset;grid-column:span 12}::ng-deep crud-form .grid .row-span-1{grid-row:span 1}::ng-deep crud-form .grid .row-span-2{grid-row:span 2}::ng-deep crud-form .grid .row-span-3{grid-row:span 3}::ng-deep crud-form .grid .row-span-4{grid-row:span 4}::ng-deep crud-form .grid .row-span-5{grid-row:span 5}::ng-deep crud-form .grid .row-span-6{grid-row:span 6}::ng-deep crud-form .grid .row-span-7{grid-row:span 7}::ng-deep crud-form .grid .row-span-8{grid-row:span 8}::ng-deep crud-form .grid .row-span-9{grid-row:span 9}::ng-deep crud-form .grid .row-span-10{grid-row:span 10}::ng-deep crud-form .grid .row-span-11{grid-row:span 11}::ng-deep crud-form .grid .row-span-12{grid-row:span 12}::ng-deep crud-form .grid .row-span-13{grid-row:span 13}::ng-deep crud-form .grid .row-span-14{grid-row:span 14}::ng-deep crud-form .grid .row-span-15{grid-row:span 15}::ng-deep crud-form .grid .row-span-16{grid-row:span 16}::ng-deep crud-form .grid .row-span-17{grid-row:span 17}::ng-deep crud-form .grid .row-span-18{grid-row:span 18}::ng-deep crud-form .grid .row-span-19{grid-row:span 19}::ng-deep crud-form .grid .row-span-20{grid-row:span 20}::ng-deep crud-form .grid .row-span-21{grid-row:span 21}::ng-deep crud-form .grid .row-span-22{grid-row:span 22}::ng-deep crud-form .grid .row-span-23{grid-row:span 23}::ng-deep crud-form .grid .row-span-24{grid-row:span 24}::ng-deep crud-form .grid .row-span-25{grid-row:span 25}::ng-deep crud-form .grid .row-span-26{grid-row:span 26}::ng-deep crud-form .grid .row-span-27{grid-row:span 27}::ng-deep crud-form .grid .row-span-28{grid-row:span 28}::ng-deep crud-form .grid .row-span-29{grid-row:span 29}::ng-deep crud-form .grid .row-span-30{grid-row:span 30}::ng-deep crud-form .grid .row-span-31{grid-row:span 31}::ng-deep crud-form .grid .row-span-32{grid-row:span 32}::ng-deep crud-form .grid .row-span-33{grid-row:span 33}::ng-deep crud-form .grid .row-span-34{grid-row:span 34}::ng-deep crud-form .grid .row-span-35{grid-row:span 35}::ng-deep crud-form .grid .row-span-36{grid-row:span 36}::ng-deep crud-form .grid .row-span-37{grid-row:span 37}::ng-deep crud-form .grid .row-span-38{grid-row:span 38}::ng-deep crud-form .grid .row-span-39{grid-row:span 39}::ng-deep crud-form .grid .row-span-40{grid-row:span 40}::ng-deep crud-form .grid .row-span-41{grid-row:span 41}::ng-deep crud-form .grid .row-span-42{grid-row:span 42}::ng-deep crud-form .grid .row-span-43{grid-row:span 43}::ng-deep crud-form .grid .row-span-44{grid-row:span 44}::ng-deep crud-form .grid .row-span-45{grid-row:span 45}::ng-deep crud-form .grid .row-span-46{grid-row:span 46}::ng-deep crud-form .grid .row-span-47{grid-row:span 47}::ng-deep crud-form .grid .row-span-48{grid-row:span 48}::ng-deep crud-form .grid .row-span-49{grid-row:span 49}::ng-deep crud-form .grid .row-span-50{grid-row:span 50}}:host ::ng-deep .tox-tinymce{border:none;border-top:1px solid #ccc;overflow:unset}:host ::ng-deep .tox-tinymce .tox-editor-container{overflow:unset}:host ::ng-deep .tox-tinymce .tox-toolbar{border:1px solid #ccc;border-bottom:none}:host ::ng-deep .tox-tinymce .tox-edit-area{border:1px solid #ccc}:host ::ng-deep .tox-tinymce .tox-edit-area iframe{box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}:host ::ng-deep .tox-tinymce .tox-menubar{border:1px solid #ccc}:host ::ng-deep .tox .tox-edit-area.tinymce-focus{border:1px solid #66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 3px 0 #66afe9;transition:box-shadow .3s,border-color .3s;transition-property:box-shadow,border-color;transition-duration:.3s,.3s;transition-timing-function:ease,ease;transition-delay:0s,0s}:host ::ng-deep .rq .tox .tox-edit-area{border-left-color:#ff4c46}:host ::ng-deep .table-schema-paging{margin-bottom:40px;display:block}"]
14682
14682
  },] }
@@ -18568,6 +18568,7 @@ class ListComponentBase extends ComponentBase {
18568
18568
  this.config = new CrudListConfig();
18569
18569
  this.enableReorderRow = false;
18570
18570
  this.fieldOrder = FieldOrderCrudList;
18571
+ this.showExportAll = false;
18571
18572
  this._style = {};
18572
18573
  this._rawDataSource = [];
18573
18574
  this._dataSource = [];
@@ -21905,6 +21906,36 @@ class ListComponentBase extends ComponentBase {
21905
21906
  this.handleCheckAll();
21906
21907
  this.buttonAuthorizeModel.showEditForm = false;
21907
21908
  }
21909
+ exportDataAll() {
21910
+ var _a;
21911
+ return __awaiter(this, void 0, void 0, function* () {
21912
+ const lstData = (_a = (yield this.setting.baseService.getDataCustomRoute(this.plusUrl, this.currentGridInfo.filters, this.currentGridInfo.fields, this.currentGridInfo.sorts, -1, 1)).data) !== null && _a !== void 0 ? _a : [];
21913
+ yield this.beforeExportDataAll(lstData);
21914
+ yield this._crudService.getRefDataInDatasource(lstData, this.setting.fieldNeedGetRef);
21915
+ const lstVisibleField = this.setting.cols.filter(item => item.visible && item.dataType != 'trangThaiV5').map(item => {
21916
+ if (item.controlType == 'dropdown' && item.field.startsWith('str')) {
21917
+ return item.field.slice(3);
21918
+ }
21919
+ return item.field;
21920
+ });
21921
+ const lstHeader = ['TT'];
21922
+ lstVisibleField.forEach(item => {
21923
+ const schema = this.setting.modelSchemas.find(x => x.field == item);
21924
+ lstHeader.push((schema === null || schema === void 0 ? void 0 : schema.name) || "");
21925
+ });
21926
+ const printData = [
21927
+ lstHeader,
21928
+ ...lstData.map((item, index) => {
21929
+ const row = [index + 1];
21930
+ this.setting.cols.filter(col => col.visible && col.dataType != 'trangThaiV5').forEach(col => {
21931
+ row.push(item[col.field]);
21932
+ });
21933
+ return row;
21934
+ })
21935
+ ];
21936
+ this._exportService.objectToExcel(printData, 'Danh sách ' + this.setting.objectName, 1);
21937
+ });
21938
+ }
21908
21939
  }
21909
21940
  ListComponentBase.decorators = [
21910
21941
  { type: Directive }
@@ -21987,6 +22018,8 @@ ListComponentBase.propDecorators = {
21987
22018
  childrenFromParent: [{ type: Input }],
21988
22019
  menuButtons: [{ type: Input }],
21989
22020
  fieldOrder: [{ type: Input }],
22021
+ beforeExportDataAll: [{ type: Input }],
22022
+ showExportAll: [{ type: Input }],
21990
22023
  style: [{ type: Input }],
21991
22024
  tableClass: [{ type: Input }],
21992
22025
  allDataSource: [{ type: Input }],
@@ -22486,7 +22519,7 @@ CrudListComponent.decorators = [
22486
22519
  { type: Component, args: [{
22487
22520
  // tslint:disable-next-line: component-selector
22488
22521
  selector: 'crud-list',
22489
- template: "<div #container class=\"custom-card card card-w-title flex-container-fit-child\" [attr.height-type]=\"setting.heightType\"\n [ngStyle]=\"_style\">\n <div class=\"ui-helper-clearfix crud-list-header-area\">\n <div *ngIf=\"!setting.hiddenSearch\">\n <div *ngIf=\"searchCustom && !setting.hiddenSearchCustom\"\n class=\"p-grid ui-fluid custom-p-col custom-search-area\">\n <div class=\"p-col-12 main-container-search\">\n <div class=\"p-grid main-container-search-inner\">\n <ng-container *ngIf=\"!setting.useCommonSearch\">\n <ng-container *ngTemplateOutlet=\"searchCustom; context: {$implicit: this}\"></ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n <div *ngIf=\"setting.useCommonSearch && !hasTemplate('searchCustom')\"\n class=\"p-grid ui-fluid custom-p-col custom-search-area\">\n <div class=\"p-col-12 main-container-search\">\n <div class=\"p-grid main-container-search-inner\">\n <div style=\"width: 100%;\">\n <common-search-form #commonSearch [parentSetting]=\"setting\" [parentModel]=\"model\"\n [templateFilter]=\"templateFilter\" [parentContext]=\"context\"\n [searchBoxTooltip]=\"setting.toolTipSearhBoxCommon\"\n (onClickSearch)=\"handleSearch($event)\"></common-search-form>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"!setting.hiddenHeader\" class=\"p-grid ui-fluid custom-p-col page-title-area\">\n <div *ngIf=\"!setting.hiddenPageTitle\" class=\"main-title\">\n <h1 *ngIf=\"!hasTemplate('customTitle')\">\n {{setting.title != null ? setting.title : 'Danh s\u00E1ch ' + setting.objectName}}\n </h1>\n\n <ng-container *ngIf=\"hasTemplate('customTitle')\" [ngTemplateOutlet]=\"getTemplate('customTitle')\"\n [ngTemplateOutletContext]=\"{\n crudList: this,\n buttonAdd: buttonAdd, buttonExport: buttonExport, buttonDelete: buttonDelete\n }\">\n </ng-container>\n </div>\n\n <div *ngIf=\"!setting.hiddenPageSetting\" class=\"paginator-table\">\n <ng-container *ngIf=\"!paginationTemplate\">\n <paging-next-back-only [model]=\"model\" [setting]=\"setting\" (onChanged)=\"getData()\"\n (onChangeLimitPage)=\"savePageSize()\">\n </paging-next-back-only>\n </ng-container>\n <ng-container *ngIf=\"paginationTemplate\">\n <ng-container [ngTemplateOutlet]=\"paginationTemplate\"></ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n <div *ngIf=\"hasTemplate('topGrid')\" class=\"extend-content-top-grid\">\n <ng-container [ngTemplateOutletContext]=\"{selectedItems: model.selectedItems, crudList: this}\"\n [ngTemplateOutlet]=\"getTemplate('topGrid')\"></ng-container>\n </div>\n <div class=\"fit-content crud-list-body-area\">\n <div class=\"crud-list-body-area-inner\" style=\"overflow: unset;\">\n <div class=\"flex-container-fit-child\" style=\"overflow: unset;\">\n <div *ngIf=\"!setting.hiddenToolbar\" class=\"p-grid crudListToolbar\">\n <ng-container>\n <div *ngIf=\"!setting.hiddenButtons && hasTemplate('toolbar')\"\n [ngClass]=\"setting.hiddenAdvanceSearch ? 'p-md-12 p-lg-12' : 'p-md-7 p-lg-8'\"\n class=\"p-col-12 button-group function-topbar custom-toolbar\">\n <ng-container *ngIf=\"hasTemplate('defaultToolbar')\">\n <ng-container [ngTemplateOutlet]=\"getTemplate('defaultToolbar')\"\n [ngTemplateOutletContext]=\"{\n selectedItems: model.selectedItems, crudList: this,\n buttonAdd: buttonAdd, buttonExport: buttonExport, buttonDelete: buttonDelete}\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"isBtnReady\">\n <ng-container [ngTemplateOutlet]=\"getTemplate('toolbar')\" [ngTemplateOutletContext]=\"{\n selectedItems: model.selectedItems, crudList: this,\n buttonAdd: buttonAdd, buttonExport: buttonExport, buttonDelete: buttonDelete}\">\n </ng-container>\n <ng-container *ngIf=\"isSuperUser\" [ngTemplateOutlet]=\"buttonAuthorize\">\n </ng-container>\n </ng-container>\n </div>\n <div *ngIf=\"!setting.hiddenButtons && !hasTemplate('toolbar')\"\n [ngClass]=\"setting.hiddenAdvanceSearch ? 'p-md-12 p-lg-12' : 'p-md-7 p-lg-8'\"\n class=\"p-col-12 button-group function-topbar\">\n <ng-container *ngIf=\"isBtnReady\">\n <ng-container [ngTemplateOutlet]=\"getTemplate('buttonBeforeToolbar')\"\n [ngTemplateOutletContext]=\"{crudList: this}\"></ng-container>\n <button type=\"button\" pButton label=\"\u0110\u00E1nh STT\" class=\"p-button-text\"\n style=\"display: none\" (click)=\"danhSoThuTuGroupLastest()\"></button>\n <ng-container *ngIf=\"!hiddenAdd\" [ngTemplateOutlet]=\"buttonAdd\"></ng-container>\n <ng-container *ngIf=\"setting.showExportSelectedItems\" [ngTemplateOutlet]=\"buttonExport\">\n </ng-container>\n <ng-container *ngIf=\"setting.showExportWordSelectedItems\"\n [ngTemplateOutlet]=\"buttonExportWord\">\n </ng-container>\n <ng-container *ngIf=\"!hiddenDelete\" [ngTemplateOutlet]=\"buttonDelete\">\n </ng-container>\n <ng-container *ngIf=\"!hiddenReorder\" [ngTemplateOutlet]=\"buttonReorder\">\n </ng-container>\n <button *ngIf=\"!setting.disableShare && model.selectedItems.length > 0\"\n label=\"Chia s\u1EBB li\u00EAn k\u1EBFt\" type=\"button\" pButton pRipple\n [pTooltip]=\"'Chia s\u1EBB li\u00EAn k\u1EBFt' | translate\" tooltipPosition=\"top\"\n class=\"p-button-text p-button-info link-or-action\" icon=\"pi pi-link\"\n (click)=\"createShareLinkMultiple()\"></button>\n <ng-container [ngTemplateOutlet]=\"getTemplate('buttonAfterToolbar')\"\n [ngTemplateOutletContext]=\"{crudList: this}\"></ng-container>\n\n <ng-container *ngIf=\"isSuperUser\" [ngTemplateOutlet]=\"buttonAuthorize\">\n </ng-container>\n </ng-container>\n </div>\n </ng-container>\n <div *ngIf=\"!setting.hiddenAdvanceSearch && !setting.useCommonSearch\"\n class=\"p-col-12 advance-search-container\"\n [ngClass]=\"setting.hiddenButtons ? 'p-md-12 p-lg-12' : 'p-md-5 p-lg-4'\">\n <advance-search #advanceSearch [parentSetting]=\"setting\" [searchInfo]=\"searchInfo\"\n [loading]=\"model.loading\" (onSearch)=\"handleSearchAdvs($event)\"\n (onInit)=\"handleInitAdvanceSearch($event)\">\n </advance-search>\n </div>\n </div>\n <div *ngIf=\"hasTemplate('topGrid')\" class=\"extend-content-top-grid\">\n <ng-container [ngTemplateOutletContext]=\"{selectedItems: model.selectedItems, crudList: this}\"\n [ngTemplateOutlet]=\"getTemplate('topGrid')\"></ng-container>\n </div>\n <div class=\"container-table fit-content\" [class.--table-responsive]=\"responsive\">\n <div class=\"container-table-inner\">\n <ng-container *ngIf=\"!_groupField\">\n <tn-custom-scrollbar *ngIf=\"showScrollBar\" #scrollbar [config]=\"configScrollBar\"\n [showScrollHorizontal]=\"showScrollHorizontal\">\n <ng-container *ngTemplateOutlet=\"tableGetGroupFieldFalse\">\n </ng-container>\n <ng-container *ngIf=\"hasTemplate('afterCrudList')\">\n <ng-container [ngTemplateOutlet]=\"getTemplate('afterCrudList')\"></ng-container>\n </ng-container>\n </tn-custom-scrollbar>\n <div *ngIf=\"!showScrollBar\">\n <ng-container *ngTemplateOutlet=\"tableGetGroupFieldFalse\">\n </ng-container>\n </div>\n </ng-container>\n <ng-container *ngIf=\"_groupField\">\n <tn-custom-scrollbar *ngIf=\"showScrollBar\" #scrollbar [config]=\"configScrollBar\"\n [showScrollHorizontal]=\"showScrollHorizontal\">\n <ng-container *ngTemplateOutlet=\"tableGetGroupFieldTrue\">\n </ng-container>\n <ng-container *ngIf=\"hasTemplate('afterCrudList')\">\n <ng-container [ngTemplateOutlet]=\"getTemplate('afterCrudList')\"></ng-container>\n </ng-container>\n </tn-custom-scrollbar>\n <div *ngIf=\"!showScrollBar\">\n <ng-container *ngTemplateOutlet=\"tableGetGroupFieldTrue\">\n </ng-container>\n </div>\n </ng-container>\n\n <div class=\"table-border-line --top\"></div>\n <div class=\"table-border-line --right\"></div>\n <div class=\"table-border-line --bottom\"></div>\n <div class=\"table-border-line --left\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n<after-view-checked (loaded)=\"handleReady()\"></after-view-checked>\n<settings *ngIf=\"_showSettings && !setting.hiddenSetting\" [entityMetadataService]=\"entityMetadataService\"\n [parentContext]=\"context\" [parentSetting]=\"setting\" [parentModel]=\"model\" (onSave)=\"onSaveSettings($event)\"\n (onDelete)=\"onDeleteSettings()\" (onCancel)=\"_showSettings = false\">\n</settings>\n<settings-row *ngIf=\"_showSettingsRowColor && !setting.hiddenSetting\" [entityMetadataService]=\"entityMetadataService\"\n [parentContext]=\"context\" [parentSetting]=\"setting\" [parentModel]=\"model\" (onSave)=\"onSaveColorSettings($event)\"\n (onCancel)=\"_showSettingsRowColor = false\">\n</settings-row>\n<!-- <workflow-setting-dialog *ngIf=\"_showSettingsWorkflow && !setting.hiddenSettingWorkflow\" [parentSetting]=\"setting\"\n [parentContext]=\"context\" [parentModel]=\"model\" (onSaved)=\"onSaveWorkflowSettings($event)\"\n (onRemoved)=\"onRemoveWorkflowSettings($event)\" (onCancel)=\"_showSettingsWorkflow = false\">\n</workflow-setting-dialog> -->\n<div #workflowSettingDialog *ngIf=\"_showSettingsWorkflow && !setting.hiddenSettingWorkflow\"></div>\n<tn-dialog #dialogWfSettingNew [visible]=\"workflowSettingModel.showEditForm\"\n [header]=\"'C\u1EA5u h\u00ECnh quy tr\u00ECnh nghi\u1EC7p v\u1EE5' | translate\" [popupSize]=\"workflowSettingModel.popupSize\"\n (onHide)=\"workflowSettingModel.showEditForm = false\">\n <!-- <workflow-setting-new #formBase [parentSetting]=\"setting\" (onSaved)=\"onSaveWorkflowSettingsNew($event)\"\n (onCancel)=\"workflowSettingModel.showEditForm = false\"></workflow-setting-new> -->\n <div #workflowsettingnew></div>\n</tn-dialog>\n<entity-permission *ngIf=\"_showSettingsPermission && !setting.hiddenSettingPermission\" [parentSetting]=\"setting\"\n [parentContext]=\"context\" [parentModel]=\"model\" [searchInfo]=\"searchInfo\"\n (onCancel)=\"_showSettingsPermission = false\">\n</entity-permission>\n<p-contextMenu #contextMenu [appendTo]=\"'body'\" [styleClass]=\"'allow-selected'\" [model]=\"buttonContexts\">\n</p-contextMenu>\n<tn-dialog #dialogProcessWorkflowForm [visible]=\"processWorkflowModel.showEditForm\"\n [header]=\"processWorkflowModel.header | translate\" [popupSize]=\"processWorkflowModel.popupSize\"\n [scrollBarStyleClass]=\"'fit-content'\" (onHide)=\"processWorkflowModel.showEditForm = false\">\n <div style=\"height: 100%; padding: 1rem\">\n <!-- <process-workflow-form #formBase [businessSetting]=\"processWorkflowModel.data.setting\" [item]=\"currentItem\"\n [workflow]=\"processWorkflowModel.data.workflow\" [action]=\"processWorkflowModel.data.action\"\n (onSaved)=\"handleProcessedWorkflowBase()\" (onCancel)=\"processWorkflowModel.showEditForm = false\">\n </process-workflow-form> -->\n <div #processWorkflowForm></div>\n </div>\n</tn-dialog>\n<tn-dialog #dialogChoYKienForm [visible]=\"choYKienModel.showEditForm\" [header]=\"choYKienModel.header | translate\"\n [popupSize]=\"choYKienModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\n (onHide)=\"choYKienModel.showEditForm = false\">\n <div style=\"height: 100%\">\n <!-- <cho-y-kien-form #formBase [bussinessSetting]=\"choYKienModel.data.setting\"\n [rowItem]=\"choYKienModel.data.rowData\" (onSaved)=\"choYKienModel.showEditForm = false\"\n (onCancel)=\"choYKienModel.showEditForm = false\">\n </cho-y-kien-form> -->\n <div #choYKienForm></div>\n </div>\n</tn-dialog>\n<tn-dialog *ngIf=\"buttonAuthorizeModel.showEditForm\" #dialog [header]=\"buttonAuthorizeModel.header | translate\"\n [popupSize]=\"buttonAuthorizeModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\n (onHide)=\"handleCloseAuthorizeButtonForm()\">\n <settings-authorize-button [authorizeButtonKey]=\"authorizeButtonKey\"\n [dataSource]=\"buttonAuthorizeModel.data.dataSource\"></settings-authorize-button>\n</tn-dialog>\n\n<tn-dialog [visible]=\"workflowHistoryModel.showEditForm\" [header]=\"workflowHistoryModel.header | translate\"\n [popupSize]=\"workflowHistoryModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\n (onHide)=\"workflowHistoryModel.showEditForm = false\">\n <div style=\"height: 100%\">\n <!-- <workflow-history-new #formBase [businessSetting]=\"workflowHistoryModel.data.setting\"\n [tableName]=\"workflowHistoryModel.data.tableName\" [item]=\"currentItem\"\n [workflowSetting]=\"workflowHistoryModel.data.workflowSetting\"\n (onCancel)=\"workflowHistoryModel.showEditForm = false\">\n </workflow-history-new> -->\n <div #workflowHistoryNew></div>\n </div>\n</tn-dialog>\n<tn-dialog #dialogDetailTask [visible]=\"detailTaskModel.showEditForm\" [header]=\"detailTaskModel.header | translate\"\n [popupSize]=\"detailTaskModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\n (onHide)=\"detailTaskModel.showEditForm = false\">\n <!-- <base-congviec-form #formBase [model]=\"detailTaskModel.data.taskFormModel\" [forceOnlyView]=\"true\"\n (onCancel)=\"detailTaskModel.showEditForm = false\">\n </base-congviec-form> -->\n <div #detailTask></div>\n</tn-dialog>\n\n<tn-dialog #dialogPermissionSharing [visible]=\"permissionSharingModel.showEditForm\"\n [header]=\"permissionSharingModel.header | translate\" [popupSize]=\"permissionSharingModel.popupSize\"\n [scrollBarStyleClass]=\"'fit-content'\" (onHide)=\"permissionSharingModel.showEditForm = false\">\n <div style=\"height: 100%\">\n <!-- <permission-sharing #formBase [item]=\"rowDataCurrent\" [baseService]=\"setting.baseService\"\n (onCancel)=\"permissionSharingModel.showEditForm = false\">\n </permission-sharing> -->\n <div #permissionSharing></div>\n </div>\n</tn-dialog>\n<tn-dialog #dialogWorkflowPermission [visible]=\"permissionListModel.showEditForm\"\n [header]=\"permissionListModel.header | translate\" [popupSize]=\"permissionListModel.popupSize\"\n [scrollBarStyleClass]=\"'fit-content'\" [useDefaultScrollBar]=\"true\"\n (onHide)=\"permissionListModel.showEditForm = false\">\n <div style=\"height: 100%\">\n <!-- <workflow-permission #formBase [item]=\"rowDataCurrent\" [businessSetting]=\"setting\"\n (onCancel)=\"permissionListModel.showEditForm = false\">\n </workflow-permission> -->\n <div #workflowPermission></div>\n </div>\n</tn-dialog>\n<!-- <workflow-history-dialog *ngIf=\"showHistoryWorkflow\" [baseService]=\"setting.baseService\" [item]=\"currentItem\"\n [workflowSetting]=\"setting.workflowSetting\" (onHide)=\"handleHideHistoryWorkflow()\">\n</workflow-history-dialog> -->\n<div #workflowPermission *ngIf=\"showHistoryWorkflow\"></div>\n<tn-dialog #dialogstartWorkflow [visible]=\"startWorkflowModel.showEditForm\"\n [header]=\"startWorkflowModel.header | translate\" [popupSize]=\"startWorkflowModel.popupSize\"\n [scrollBarStyleClass]=\"'fit-content'\" (onHide)=\"startWorkflowModel.showEditForm = false\">\n <div style=\"height: 100%\">\n <!-- <start-workflow #formBase [workflows]=\"startWorkflowModel.data.workflows\"\n [defaultWorkflow]=\"startWorkflowModel.data.defaultWorkflow\"\n (onCancel)=\"startWorkflowModel.showEditForm = false\" (onSaved)=\"handleStartWorkflowFromDialog($event)\">\n </start-workflow> -->\n <div #startWorkflow></div>\n </div>\n</tn-dialog>\n<tn-dialog #dialogBaseCongViecForm [visible]=\"congViecModel.showEditForm\" [styleClass]=\"'congviec-form tn-form-dialog'\"\n [header]=\"congViecModel.header | translate\" [popupSize]=\"congViecModel.popupSize\"\n (onHide)=\"congViecModel.showEditForm = false\">\n <!-- <base-congviec-form #formBase [parentSetting]=\"congViecModel.data.congViecSetting\"\n [model]=\"congViecModel.data.model\" (onSaved)=\"congViecModel.showEditForm = false;getData()\"\n (onCancel)=\"congViecModel.showEditForm = false\">\n </base-congviec-form> -->\n <div #baseCongViecForm></div>\n</tn-dialog>\n<tn-dialog #dialog *ngIf=\"shareLinkModel.showEditForm\" [styleClass]=\"'congviec-form tn-form-dialog'\"\n [header]=\"shareLinkModel.header | translate\" [popupSize]=\"shareLinkModel.popupSize\" [useDefaultScrollBar]=\"true\"\n (onHide)=\"shareLinkModel.showEditForm = false\">\n <share-link-by-permission #formBase [setting]=\"setting\" [lstItem]=\"shareLinkModel.data.lstItem\"\n (onCancel)=\"congViecModel.showEditForm = false\">\n </share-link-by-permission>\n</tn-dialog>\n<tn-dialog #dialogBaseCongViec [visible]=\"attachedTaskModel.showEditForm\"\n [header]=\"attachedTaskModel.header | translate\" [popupSize]=\"attachedTaskModel.popupSize\"\n [useDefaultScrollBar]=\"true\" (onHide)=\"attachedTaskModel.showEditForm = false\">\n <!-- <base-congviec [serviceCode]=\"setting.baseService.serviceCode\" [entity]=\"setting.baseService.entityName\"\n [itemIdAttach]=\"rowDataCurrent.id\"></base-congviec> -->\n <div #baseCongViec></div>\n</tn-dialog>\n<ng-template #tableGetGroupFieldFalse>\n <p-table #table [dataKey]=\"'id'\" [scrollable]=\"pTableScrollable\" [scrollHeight]=\"pTableScrollHeight\"\n [columns]=\"setting.cols\" [paginator]=\"false\" [value]=\"_dataSource\" (onSort)=\"onSort($event, table)\"\n [class]=\"_tableClass\" [responsive]=\"responsive\" [lazy]=\"lazy\" [loading]=\"model.loading\"\n [expandedRowKeys]=\"model.expandedRowKeys\" [(selection)]=\"model.selectedItems\"\n (onRowReorder)=\"handleRowOrdered($event)\">\n <ng-template *ngIf=\"colgroup\" pTemplate=\"colgroup\" let-columns>\n <ng-container *ngTemplateOutlet=\"colgroup; context: {$implicit: columns}\"></ng-container>\n </ng-template>\n <ng-template *ngIf=\"!colgroup\" pTemplate=\"colgroup\" let-columns>\n <ng-container *ngTemplateOutlet=\"baseColgroup; context: {$implicit: columns}\">\n </ng-container>\n </ng-template>\n <ng-template *ngIf=\"header\" pTemplate=\"header\" let-columns>\n <ng-container\n *ngTemplateOutlet=\"header, context: {$implicit: columns, crudList: this, rowHeaderFilter: rowHeaderFilter, contentTh: contentTh, containerSticky: containerSticky, funcCheckAll: handleCheckAll}\">\n </ng-container>\n </ng-template>\n <ng-template *ngIf=\"!header\" pTemplate=\"header\" let-columns>\n <ng-container *ngTemplateOutlet=\"trHeader; context: {$implicit: columns, funcCheckAll: handleCheckAll}\">\n </ng-container>\n </ng-template>\n <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\" let-index=\"rowIndex\" let-expanded=\"expanded\">\n <ng-container\n *ngTemplateOutlet=\"trBody; context: {$implicit: rowData, columns: columns, index: index, expanded: expanded, eventSelectRow: handleSelectRow, eventChecked: handleCheckRowData}\">\n </ng-container>\n <after-view-checked *ngIf=\"index == _dataSource.length - 1\" style=\"display: none;\" [renderKey]=\"_dataSource\"\n (loaded)=\"handleTableRendered()\">\n </after-view-checked>\n </ng-template>\n <ng-template *ngIf=\"rowExpansion\" pTemplate=\"rowexpansion\" let-rowData let-expanded=\"expanded\">\n <ng-container\n *ngTemplateOutlet=\"rowExpansion; context: {$implicit: rowData, expanded: expanded, getColSpanGroup: getColSpanGroup}\">\n </ng-container>\n </ng-template>\n <ng-template *ngIf=\"summary\" pTemplate=\"summary\">\n <ng-container *ngTemplateOutlet=\"summary\"></ng-container>\n </ng-template>\n <ng-template *ngIf=\"footer\" pTemplate=\"footer\" let-columns>\n <ng-container *ngTemplateOutlet=\"footer; context: {$implicit: columns}\"></ng-container>\n </ng-template>\n </p-table>\n</ng-template>\n<ng-template #tableGetGroupFieldTrue>\n <p-table #tableGroup [scrollable]=\"pTableScrollable\" [scrollHeight]=\"pTableScrollHeight\" [columns]=\"setting.cols\"\n [paginator]=\"false\" [value]=\"_dataSource\" [metaKeySelection]=\"false\" (onSort)=\"onSort($event, tableGroup)\"\n [class]=\"_tableClass\" [customSort]=\"true\" [responsive]=\"responsive\" [lazy]=\"true\" [loading]=\"model.loading\"\n [(selection)]=\"model.selectedItems\" [expandedRowKeys]=\"model.expandedRowKeys\" [dataKey]=\"_groupField\">\n <ng-template *ngIf=\"colgroup\" pTemplate=\"colgroup\" let-columns>\n <ng-container *ngTemplateOutlet=\"colgroup; context: {$implicit: columns}\"></ng-container>\n </ng-template>\n <ng-template *ngIf=\"!colgroup\" pTemplate=\"colgroup\" let-columns>\n <ng-container *ngTemplateOutlet=\"baseColgroup; context: {$implicit: columns}\">\n </ng-container>\n </ng-template>\n <ng-template *ngIf=\"header\" pTemplate=\"header\" let-columns>\n <ng-container\n *ngTemplateOutlet=\"header, context: {$implicit: columns, crudList: this, rowHeaderFilter: rowHeaderFilter, contentTh: contentTh, containerSticky: containerSticky, funcCheckAll: handleCheckAll_Group}\">\n </ng-container>\n </ng-template>\n <ng-template *ngIf=\"!header\" pTemplate=\"header\" let-columns>\n <ng-container\n *ngTemplateOutlet=\"trHeader; context: {$implicit: columns, funcCheckAll: handleCheckAll_Group}\">\n </ng-container>\n </ng-template>\n <ng-template pTemplate=\"body\" let-rowData let-rowIndex=\"rowIndex\" let-expanded=\"expanded\" let-columns=\"columns\">\n <tr *ngIf=\"rowGroupMetadata[rowData[_groupField]] && rowGroupMetadata[rowData[_groupField]].index == rowIndex\"\n class=\"p-widget-header group-row\" style=\"border: 0px; border-bottom: 1px solid #eee\">\n <td *ngIf=\"!setting.hiddenCheckbox\" class=\"center chkbox\" [class.sticky]=\"setting.stickyColumn\">\n <p-checkbox [(ngModel)]=\"rowGroupChecked[rowData[_groupField]]\" binary=\"true\"\n (onChange)=\"handleCheckRowGroup(rowData)\">\n </p-checkbox>\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </td>\n <ng-container *ngIf=\"!rowGroup\">\n <td [colSpan]=\"getColSpanGroup()\" [class]=\"_classRowGroup\">\n <div class=\"container-row-group\">\n <a href=\"javascript:;\" [pRowToggler]=\"rowData\" class=\"container-row-group-toggle\"\n [class.sticky]=\"setting.stickyColumn\">\n <i style=\"margin-right:5px\"\n [ngClass]=\"expanded ? 'fas fa-fw fa-caret-down' : 'fas fa-fw fa-caret-right'\"></i>\n <div class=\"content-row-group\">\n <ng-container *ngIf=\"!contentRowGroup\">\n <ng-container [ngTemplateOutlet]=\"_contentRowGroup\"\n [ngTemplateOutletContext]=\"getContextRowGroup(rowData)\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"contentRowGroup\">\n <ng-container [ngTemplateOutlet]=\"contentRowGroup\"\n [ngTemplateOutletContext]=\"getContextRowGroup(rowData)\">\n </ng-container>\n </ng-container>\n </div>\n </a>\n </div>\n </td>\n </ng-container>\n <ng-container *ngIf=\"rowGroup\">\n <ng-container [ngTemplateOutlet]=\"rowGroup\"\n [ngTemplateOutletContext]=\"getContextRowGroupRoot(rowData, expanded)\">\n </ng-container>\n </ng-container>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"rowexpansion\" let-columns=\"columns\" let-rowData let-index=\"rowIndex\">\n <ng-container\n *ngTemplateOutlet=\"trBody; context: {$implicit: rowData, columns: columns, index: index, expanded: false, eventSelectRow: handleSelectRowGroup, eventChecked: handleCheckRowData_Group}\">\n </ng-container>\n <after-view-checked *ngIf=\"index == _dataSource.length - 1\" style=\"display: none;\" [renderKey]=\"_dataSource\"\n (loaded)=\"handleTableRendered()\">\n </after-view-checked>\n </ng-template>\n <ng-template *ngIf=\"summary\" pTemplate=\"summary\">\n <ng-container *ngTemplateOutlet=\"summary\"></ng-container>\n </ng-template>\n <ng-template *ngIf=\"footer\" pTemplate=\"footer\" let-columns>\n <ng-container *ngTemplateOutlet=\"footer; context: {$implicit: columns}\"></ng-container>\n </ng-template>\n </p-table>\n <after-view-checked></after-view-checked>\n</ng-template>\n<ng-template #baseColgroup let-columns>\n <colgroup>\n <col *ngIf=\"!setting.hiddenCheckbox\" [style.width]=\"widthCheckbox\" />\n <col *ngIf=\"!setting.hiddenOrderColumn\" [style.width]=\"widthOrderColumn\" />\n <col *ngIf=\"rowExpansion\" style=\"width: 2.5rem\" />\n <ng-container *ngFor=\"let col of columns; let i = index\">\n <col *ngIf=\"col && col.visible && col.field!='function'\" [style.width]=\"col.width\" />\n </ng-container>\n <col *ngIf=\"enableReorderRow\" style=\"width: 30px\" />\n <col *ngIf=\"!setting.hiddenFunctionColumn\" [style.width]=\"widthFunctionColumn || _widthFunctionColumn\" />\n </colgroup>\n</ng-template>\n<ng-template #buttonAdd>\n <button #buttonBase appAuthorize type=\"button\" pButton pRipple label=\"Th\u00EAm m\u1EDBi\" icon=\"pi pi-plus\"\n class=\"p-button-text\" [suffixAuthorizeCode]=\"setting.suffixAuthorizeCode\" [disabled]=\"!model.baseReady\"\n (click)=\"add()\"></button>\n</ng-template>\n<ng-template #buttonExport>\n <button #buttonBase appAuthorize *ngIf=\"model.selectedItems.length > 0\" type=\"button\" pButton pRipple\n label=\"Xu\u1EA5t c\u00E1c m\u1EE5c \u0111\u00E3 ch\u1ECDn\" icon=\"fas fa-file-excel\" class=\"p-button-text p-button-success\"\n [suffixAuthorizeCode]=\"setting.suffixAuthorizeCode\" (click)=\"xuatCacMucDaChon()\"></button>\n</ng-template>\n<ng-template #buttonAuthorize>\n <button *ngIf=\"!setting.hiddenAuthorizeButton && authorizeButtonKey\" type=\"button\" pButton pRipple\n label=\"Ph\u00E2n quy\u1EC1n n\u00FAt\" icon=\"fas fa-tools\" class=\"p-button-text\" (click)=\"onShowFormSettingButton()\"></button>\n</ng-template>\n\n<ng-template #buttonExportWord>\n <button #buttonBase appAuthorize *ngIf=\"model.selectedItems.length > 0\" type=\"button\" pButton pRipple\n label=\"In c\u00E1c m\u1EE5c \u0111\u00E3 ch\u1ECDn\" icon=\"fas fa-file-word\" class=\"p-button-text p-button-success\"\n [suffixAuthorizeCode]=\"setting.suffixAuthorizeCode\" (click)=\"printByReadingHtml()\"></button>\n</ng-template>\n<ng-template #buttonDelete>\n <button #buttonBase *ngIf=\"(!hiddenDelete && model.selectedItems.length > 0 && !disableMultipleDelete())\"\n appAuthorize type=\"button\" pButton pRipple label=\"X\u00F3a c\u00E1c m\u1EE5c \u0111\u00E3 ch\u1ECDn\" icon=\"pi pi-trash\"\n class=\"p-button-text p-button-danger\" [suffixAuthorizeCode]=\"setting.suffixAuthorizeCode\"\n (click)=\"deleteMutiple()\"></button>\n</ng-template>\n<ng-template #buttonReorder>\n <button #buttonBase\n *ngIf=\"showSaveReorder && enableReorderRow && (_sortField == setting.columnSetting.sortField || _sortDir == 0)\"\n appAuthorize type=\"button\" pButton pRipple label=\"L\u01B0u s\u1EAFp x\u1EBFp\" icon=\"pi pi-save\"\n class=\"p-button-text p-button-success\" (click)=\"saveReorder()\"></button>\n</ng-template>\n<ng-template #trHeader let-columns let-funcCheckAll=\"funcCheckAll\">\n <tr class=\"title-row\">\n <ng-container *ngIf=\"!setting.hiddenCheckbox\">\n <th class=\"chkbox link-or-action cell-checkbox\" [class.sticky]=\"setting.stickyColumn\">\n <button *ngIf=\"!hasTemplate('headerCheckbox') && !setting.useCommonSearch\" type=\"button\" pButton pRipple\n icon=\"pi pi-refresh\" class=\"p-button-rounded p-button-text btnReload\" pTooltip=\"L\u00E0m m\u1EDBi d\u1EEF li\u1EC7u\"\n tooltipPosition=\"top\" [disabled]=\"model.loading\" (click)=\"reload()\"></button>\n <p-triStateCheckbox *ngIf=\"setting.useCommonSearch\" [(ngModel)]=\"checkedAll\" binary=\"true\"\n (onChange)=\"funcCheckAll()\">\n </p-triStateCheckbox>\n <ng-container *ngIf=\"hasTemplate('headerCheckbox')\">\n <ng-container [ngTemplateOutletContext]=\"{crudList: this}\"\n [ngTemplateOutlet]=\"getTemplate('headerCheckbox')\"></ng-container>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </th>\n </ng-container>\n <th *ngIf=\"!setting.hiddenOrderColumn\" class=\"stt nopad center\" [class.sticky]=\"setting.stickyColumn\"\n (dblclick)=\"reload()\">\n {{ 'TT' |translate}}\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </th>\n <th *ngIf=\"rowExpansion\" class=\"nopad row-expansion-toggle center\" style=\"width: 2.5rem\"\n [class.sticky]=\"setting.stickyColumn\">\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </th>\n <ng-container *ngIf=\"hasTemplate('trHeaderBefore')\">\n <ng-container [ngTemplateOutlet]=\"getTemplate('trHeaderBefore')\"\n [ngTemplateOutletContext]=\"{$implicit: columns}\"></ng-container>\n </ng-container>\n <ng-container *ngFor=\"let col of columns; let i = index\">\n <th *ngIf=\"col && col.visible && col.field!='function'\" [ngStyle]=\"col.extendData.headerStyle\"\n [style.left]=\"col.isPinned && col.left ? (col.left + 'px') : ''\" [pTooltip]=\"col.fullLabel\"\n tooltipStyleClass=\"unset-width\" [class]=\"col.extendData.headerClass\"\n [className]=\"col.isPinned && col.width ? col.class : ''\" [class.first-th]=\"i==0\" [escape]=\"false\"\n tooltipPosition=\"top\" [tnSortableColumn]=\"col.field\" [tnSortableColumnDisabled]=\"!col.sort\">\n <ng-container *ngTemplateOutlet=\"contentTh; context: {$implicit: col}\"></ng-container>\n <ng-container *ngIf=\"col.sort || col.sortClient\">\n <ng-container *ngTemplateOutlet=\"sortIcon; context: {field: col.field}\"></ng-container>\n </ng-container>\n </th>\n </ng-container>\n <ng-container *ngIf=\"hasTemplate('trHeaderAfter')\">\n <ng-container [ngTemplateOutlet]=\"getTemplate('trHeaderAfter')\"\n [ngTemplateOutletContext]=\"{$implicit: columns}\"></ng-container>\n </ng-container>\n <th *ngIf=\"enableReorderRow\" style=\"width: 30px\">\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </th>\n <ng-container *ngTemplateOutlet=\"colFunctionHeader\"></ng-container>\n </tr>\n <ng-container *ngTemplateOutlet=\"rowHeaderFilter; context: {columns: columns, funcCheckAll: funcCheckAll}\">\n </ng-container>\n</ng-template>\n<ng-template #rowHeaderFilter let-columns=\"columns\" let-funcCheckAll=\"funcCheckAll\">\n <tr class=\"filter-row\" *ngIf=\"!setting.hiddenFilterRow\">\n <th *ngIf=\"!setting.hiddenCheckbox\" class=\"chkbox nopad center\" [class.sticky]=\"setting.stickyColumn\"\n [class.tricheckbox-custom-false]=\"checkedAll === false\">\n <p-triStateCheckbox [(ngModel)]=\"checkedAll\" binary=\"true\" (onChange)=\"funcCheckAll()\">\n </p-triStateCheckbox>\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </th>\n <th *ngIf=\"!setting.hiddenOrderColumn\" class=\"stt center v-top\" [class.sticky]=\"setting.stickyColumn\">\n <div *ngIf=\"!setting.hiddenSetting\" class=\"pick-color-row\" pTooltip=\"C\u1EA5u h\u00ECnh hi\u1EC3n th\u1ECB m\u00E0u\"\n tooltipPosition=\"top\" (click)=\"showSettingRowColor()\">\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n </div>\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </th>\n <th *ngIf=\"rowExpansion\" class=\"nopad center row-expansion-toggle\" [class.sticky]=\"setting.stickyColumn\">\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </th>\n <ng-container *ngFor=\"let col of columns; let i = index\">\n <th *ngIf=\"col.visible && col.field != 'function'\" class=\"cell-header-filter center\"\n [style.left]=\"col.isPinned && col.left ? (col.left + 'px') : ''\"\n [className]=\"col.isPinned && col.width ? col.class + ' cell-header-filter center': 'cell-header-filter center'\">\n <ng-container *ngIf=\"col.allowFilter\">\n <ng-container *ngIf=\"col.templateFilter\">\n <ng-container [ngTemplateOutlet]=\"col.templateFilter\"\n [ngTemplateOutletContext]=\"{col: col, filterData: filterData, onSearch: onSearch, onShowFilterDropdownPanel: onShowFilterDropdownPanel, onHideFilterDropdownPanel: onHideFilterDropdownPanel}\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!col.templateFilter\" [ngSwitch]=\"col.controlType\">\n <ng-container *ngSwitchCase=\"'dropdown'\">\n <ng-container [ngTemplateOutlet]=\"filterDropdown\"\n [ngTemplateOutletContext]=\"{col: col.rawColumn}\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'number'\">\n <ng-container [ngTemplateOutlet]=\"filterNumber\" [ngTemplateOutletContext]=\"{col: col}\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'date'\">\n <ng-container [ngTemplateOutlet]=\"filterDate\"\n [ngTemplateOutletContext]=\"{col: col, control: filterSchema.dateRange}\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'datetime'\">\n <ng-container [ngTemplateOutlet]=\"filterDate\"\n [ngTemplateOutletContext]=\"{col: col, control: filterSchema.dateTimeRange}\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <ng-container [ngSwitch]=\"col.dataType\">\n <ng-container *ngSwitchCase=\"'int'\">\n <ng-container [ngTemplateOutlet]=\"filterNumber\"\n [ngTemplateOutletContext]=\"{col: col}\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'intWithoutMask'\">\n <ng-container [ngTemplateOutlet]=\"filterNumber\"\n [ngTemplateOutletContext]=\"{col: col}\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'decimal'\">\n <ng-container [ngTemplateOutlet]=\"filterNumber\"\n [ngTemplateOutletContext]=\"{col: col}\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'currency'\">\n <ng-container [ngTemplateOutlet]=\"filterNumber\"\n [ngTemplateOutletContext]=\"{col: col}\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'date'\">\n <ng-container [ngTemplateOutlet]=\"filterDate\"\n [ngTemplateOutletContext]=\"{col: col, control: filterSchema.dateRange}\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'datetime'\">\n <ng-container [ngTemplateOutlet]=\"filterDate\"\n [ngTemplateOutletContext]=\"{col: col, control: filterSchema.dateTimeRange}\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'boolean'\">\n <ng-container [ngTemplateOutlet]=\"filterBoolean\"\n [ngTemplateOutletContext]=\"{col: col}\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <ng-container [ngTemplateOutlet]=\"filterText\"\n [ngTemplateOutletContext]=\"{col: col}\">\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </th>\n </ng-container>\n <th *ngIf=\"enableReorderRow\" style=\"width: 30px\">\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </th>\n <ng-container *ngTemplateOutlet=\"buttonBaseSetting\"></ng-container>\n </tr>\n</ng-template>\n<ng-template #buttonBaseSetting>\n <ng-container *ngIf=\"!setting.hiddenFunctionColumn\">\n <th class=\"center setting-cell column-function\" [class.sticky]=\"setting.stickyColumn\">\n <button *ngIf=\"!setting.hiddenSetting\" type=\"button\" pButton pRipple icon=\"pi pi-cog\"\n class=\"p-button-rounded p-button-text\" pTooltip=\"C\u1EA5u h\u00ECnh hi\u1EC3n th\u1ECB\" tooltipPosition=\"top\"\n (click)=\"showSettings()\"></button>\n <button *ngIf=\"!setting.hiddenSettingPermission\" type=\"button\" pButton pRipple icon=\"pi pi-users\"\n class=\"p-button-rounded p-button-text\" pTooltip=\"Ph\u00E2n quy\u1EC1n d\u1EEF li\u1EC7u\" tooltipPosition=\"left\"\n [disabled]=\"!checkPermissionToUseButton(BUTTON_PHAN_QUYEN)\" (click)=\"showSettingsPermission()\"></button>\n <button *ngIf=\"!setting.hiddenSettingWorkflow\" type=\"button\" pButton pRipple icon=\"pi pi-sitemap\"\n class=\"p-button-rounded p-button-text\" pTooltip=\"C\u1EA5u h\u00ECnh quy tr\u00ECnh\" tooltipPosition=\"left\"\n [disabled]=\"!checkPermissionToUseButton(BUTTON_CAU_HINH_QUY_TRINH)\"\n (click)=\"showSettingsWorkflowNew(dialogWfSettingNew)\"></button>\n <div *ngIf=\"setting.hiddenSetting && setting.hiddenSettingPermission && setting.hiddenSettingWorkflow\"\n class=\"cell-header-function\">\n <span>{{'GRID.FUNCTION'| translate}}</span>\n </div>\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </th>\n </ng-container>\n\n</ng-template>\n<ng-template #colFunctionHeader>\n <ng-container *ngIf=\"!setting.hiddenFunctionColumn\">\n <ng-container *ngIf=\"setting.hiddenFilterRow\">\n <ng-container *ngTemplateOutlet=\"buttonBaseSetting\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!setting.hiddenFilterRow\">\n <th class=\"column-function\" [class.sticky]=\"setting.stickyColumn\">\n <div class=\"cell-header-function\">\n <span>{{'GRID.FUNCTION'| translate}}</span>\n </div>\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </th>\n </ng-container>\n </ng-container>\n</ng-template>\n<ng-template #contentTh let-col>\n <ng-container *ngIf=\"templateHeaderContent[col.field]\">\n <ng-container *ngTemplateOutlet=\"templateHeaderContent[col.field]\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!templateHeaderContent[col.field]\">\n {{col.label}}\n </ng-container>\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n</ng-template>\n<ng-template #trBody let-rowData let-columns=\"columns\" let-index=\"index\" let-expanded=\"expanded\"\n let-eventSelectRow=\"eventSelectRow\" let-eventChecked=\"eventChecked\">\n <tr *ngIf=\"!rowData.template\" [tnReorderableRow]=\"index\" [attr.rowIndex]=\"index\" [ngClass]=\"rowData.objStyleClass\"\n [class.ui-state-highlight]=\"rowData._checked\" [pTooltip]=\"rowData.tooltip\" tooltipPosition=\"top\"\n [tooltipStyleClass]=\"rowData.tooltipClass\" [escape]=\"escape\" (click)=\"eventSelectRow($event, rowData)\">\n <ng-container *ngIf=\"!setting.hiddenCheckbox && !rowData.hidden[fieldCheckbox]\">\n <td class=\"chkbox link-or-action cell-checkbox\" [class.sticky]=\"setting.stickyColumn\"\n [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldCheckbox]\"\n [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldCheckbox]\">\n <ng-container *ngIf=\"!rowData.hiddenCheckBox\">\n <ng-container *ngIf=\"!hasTemplate('checkbox')\">\n <p-checkbox [(ngModel)]=\"rowData._checked\" binary=\"true\" (onChange)=\"eventChecked(rowData)\">\n </p-checkbox>\n </ng-container>\n <ng-container *ngIf=\"hasTemplate('checkbox')\">\n <ng-container [ngTemplateOutlet]=\"getTemplate('checkbox')\"\n [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"></ng-container>\n </ng-container>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </td>\n </ng-container>\n <td *ngIf=\"!setting.hiddenOrderColumn && !rowData.hidden[fieldOrder]\" class=\"stt\" style=\"text-align: center;\"\n [class.sticky]=\"setting.stickyColumn\" [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldOrder]\"\n [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldOrder]\">\n <span class=\"row-card\" [ngStyle]=\"rowData.bookmarkStyle\"></span>\n {{rowData[fieldOrder]}}\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </td>\n <td *ngIf=\"rowExpansion && !rowData.hidden[fieldColExpand]\" class=\"no-padding center row-expansion-toggle\"\n [class.sticky]=\"setting.stickyColumn\" [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldColExpand]\"\n [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldColExpand]\">\n <ng-container *ngTemplateOutlet=\"iconToggleRowData; context: {rowData: rowData, expanded: expanded}\">\n </ng-container>\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </td>\n <ng-container *ngIf=\"!hasTemplate('dynamicColBodys')\">\n <ng-container *ngIf=\"hasTemplate('dynamicColBodysBefore')\">\n <ng-container [ngTemplateOutlet]=\"getTemplate('dynamicColBodysBefore')\"\n [ngTemplateOutletContext]=\"{$implicit: columns, rowData: rowData, index: index, expanded: expanded}\">\n </ng-container>\n </ng-container>\n <ng-container\n *ngTemplateOutlet=\"dynamicColBodys; context: {$implicit: columns, rowData: rowData, index: index, expanded: expanded}\">\n </ng-container>\n <ng-container *ngIf=\"hasTemplate('dynamicColBodysAfter')\">\n <ng-container [ngTemplateOutlet]=\"getTemplate('dynamicColBodysAfter')\"\n [ngTemplateOutletContext]=\"{$implicit: columns, rowData: rowData, index: index, expanded: expanded}\">\n </ng-container>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"hasTemplate('dynamicColBodys')\">\n <ng-container [ngTemplateOutlet]=\"getTemplate('dynamicColBodys')\"\n [ngTemplateOutletContext]=\"{$implicit: columns, rowData: rowData, index: index, expanded: expanded}\">\n </ng-container>\n </ng-container>\n <td *ngIf=\"enableReorderRow && !rowData.hidden[fieldColReorder]\" class=\"no-padding center\"\n [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldColReorder]\"\n [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldColReorder]\">\n <i class=\"fas fa-arrows-alt\" style=\"cursor:pointer; padding: 8px; color: #555;\" pReorderableRowHandle></i>\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </td>\n <ng-container *ngIf=\"!setting.hiddenFunctionColumn && !rowData.hidden[fieldFunction]\">\n <td class=\"text-center column-function\" style=\"text-align: center;\" [class.sticky]=\"setting.stickyColumn\"\n [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldFunction]\"\n [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldFunction]\">\n <div *ngIf=\"hasTemplate('function')\" class=\"p-toolbar-group-center button-group\">\n <ng-container [ngTemplateOutlet]=\"getTemplate('function')\"\n [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"></ng-container>\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </div>\n <div *ngIf=\"!hasTemplate('function')\" class=\"p-toolbar-group-center button-group\">\n <ng-container [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"\n [ngTemplateOutlet]=\"getTemplate('buttonBefore')\"></ng-container>\n <button *ngIf=\"setting.showVersionButton\" type=\"button\" pButton pRipple icon=\"pi pi-calendar\"\n class=\"p-button-rounded p-button-text p-button-success link-or-action\"\n pTooltip=\"Xem l\u1ECBch s\u1EED phi\u00EAn b\u1EA3n\" tooltipPosition=\"top\"\n (click)=\"showListVersion(rowData)\"></button>\n <button #buttonBase *ngIf=\"!rowData.hiddenEdit\" appAuthorize type=\"button\" pButton pRipple\n [disabled]=\"disableEdit(rowData)\" [suffixAuthorizeCode]=\"setting.suffixAuthorizeCode\"\n pTooltip=\"S\u1EEDa\" tooltipPosition=\"top\"\n class=\"p-button-rounded p-button-text p-button-info link-or-action\" icon=\"pi pi-pencil\"\n (click)=\"edit(rowData)\"></button>\n <button #buttonBase *ngIf=\"!rowData.hiddenDelete\" appAuthorize type=\"button\" pButton pRipple\n [disabled]=\"disableDelete(rowData)\" [suffixAuthorizeCode]=\"setting.suffixAuthorizeCode\"\n pTooltip=\"X\u00F3a\" tooltipPosition=\"top\"\n class=\"p-button-rounded p-button-text p-button-danger link-or-action\" icon=\"pi pi-trash\"\n (click)=\"delete(rowData)\"></button>\n <ng-container *ngIf=\"!hiddenBtnFunction\">\n <button *ngIf=\"showMenuButtons && menuButtons\" type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\n class=\"link-or-action p-button-text p-button-info p-button-rounded\"\n pTooltip=\"Ch\u1EE9c n\u0103ng kh\u00E1c\" tooltipPosition=\"top\" [disabled]=\"rowData.disableFunctionRow\"\n (click)=\"showContextMenu($event, rowData)\"></button>\n </ng-container>\n <ng-container [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"\n [ngTemplateOutlet]=\"getTemplate('buttonAfter')\"></ng-container>\n </div>\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </td>\n </ng-container>\n </tr>\n <ng-container *ngIf=\"rowData.template\">\n <ng-container *ngTemplateOutlet=\"rowData.template; context: {\n $implicit: rowData, columns: columns, index: index, expanded: expanded, eventSelectRow: eventSelectRow, eventChecked: eventChecked\n }\"></ng-container>\n </ng-container>\n</ng-template>\n<ng-template #dynamicColBodys let-columns let-rowData=\"rowData\" let-index=\"index\" let-expanded=\"expanded\">\n <ng-container *ngFor=\"let col of columns; let i = index\">\n <ng-container\n *ngTemplateOutlet=\"contentTd; context: {$implicit: rowData, col: col, index: index, i: i, expanded: expanded}\">\n </ng-container>\n </ng-container>\n</ng-template>\n<ng-template #contentTd let-rowData let-col=\"col\" let-index=\"index\" let-expanded=\"expanded\" let-i=\"i\">\n <td *ngIf=\"col && col.visible && col.field != 'function' && !rowData.hidden[col.field]\"\n [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[col.field]\"\n [style.left]=\"col.isPinned && col.left ? (col.left + 'px') : ''\"\n [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[col.field]\" [ngStyle]=\"col.extendData.style\"\n [class]=\"col.cellClass\" [class.first-td]=\"i == 0\">\n <span *ngIf=\"col.pipe\">\n <span class=\"p-column-title\" [pTooltip]=\"col.fullLabel\" [escape]=\"false\"\n tooltipPosition=\"top\">{{col.label}}</span>\n {{rowData['pipe__' + col.field]}}\n </span>\n <span *ngIf=\"!col.pipe\" class=\"contentTd\" [ngClass]=\"{'limit-line': setting.isLimitNumberOfLine}\">\n <span class=\"p-column-title\" [pTooltip]=\"col.fullLabel\" [escape]=\"false\"\n tooltipPosition=\"top\">{{col.label}}</span>\n <span *ngIf=\"setting.showEditLink && col.showEditLink\" [pTooltip]=\"config.tooltipView\" tooltipPosition=\"top\"\n class=\"link-or-action\">\n <ng-container *ngIf=\"col.click\">\n <a href=\"javascript:;\" (click)=\"col.click(rowData)\" [pTooltip]=\"config.tooltipView\"\n tooltipPosition=\"top\">\n <ng-container [ngTemplateOutlet]=\"contentCell\"\n [ngTemplateOutletContext]=\"getContextCell(rowData, index, col, expanded, this)\">\n </ng-container>\n </a>\n </ng-container>\n <ng-container *ngIf=\"!col.click\">\n <a href=\"javascript:;\" (click)=\"view(rowData)\" [pTooltip]=\"config.tooltipView\"\n tooltipPosition=\"top\">\n <ng-container [ngTemplateOutlet]=\"contentCell\"\n [ngTemplateOutletContext]=\"getContextCell(rowData, index, col, expanded, this)\">\n </ng-container>\n </a>\n </ng-container>\n </span>\n <span *ngIf=\"!setting.showEditLink || !col.showEditLink\" class=\"\">\n <ng-container [ngTemplateOutlet]=\"contentCell\"\n [ngTemplateOutletContext]=\"getContextCell(rowData, index, col, expanded, this)\">\n </ng-container>\n </span>\n </span>\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </td>\n</ng-template>\n<ng-template #contentCell let-col=\"col\" let-rowData=\"rowData\" let-rowIndex=\"rowIndex\" let-field=\"field\"\n let-expanded=\"expanded\">\n <ng-container *ngIf=\"col.template\">\n <ng-container [ngTemplateOutlet]=\"col.template\"\n [ngTemplateOutletContext]=\"getContextCell(rowData, rowIndex, col, expanded,this)\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!col.template\">\n <ng-container [ngSwitch]=\"col.dataType\">\n <span *ngSwitchCase=\"'color'\" style=\"display:block;text-align:center;\">\n <div [pTooltip]=\"rowData[field]\" tooltipPosition=\"top\" [ngStyle]=\"{'background-color':rowData[field]}\"\n style=\"width:30px;height:30px;margin:0 auto;\"></div>\n </span>\n <span *ngSwitchCase=\"'icon'\" style=\"display:block;text-align:center;\">\n <i [pTooltip]=\"rowData[field]\" tooltipPosition=\"top\" style=\"text-align: center;\"\n [ngClass]=\"rowData[field]\"></i>\n </span>\n <span *ngSwitchCase=\"'date'\" [pTooltip]=\"rowData[field] | date:'dd/MM/yyyy'\" tooltipPosition=\"top\">\n {{rowData[field] | tnDate:col.dataType:col.format}}\n </span>\n <span *ngSwitchCase=\"'datetime'\" [pTooltip]=\"rowData[field] | date:'dd/MM/yyyy HH:mm'\"\n tooltipPosition=\"top\">\n {{rowData[field] | tnDate:col.dataType:col.format}}\n </span>\n <span *ngSwitchCase=\"'timespan'\">\n {{rowData[field] | tnDate:col.dataType:col.format}}\n </span>\n <span *ngSwitchCase=\"'int'\">\n {{rowData[field] | number}}\n </span>\n <span *ngSwitchCase=\"'intWithoutMask'\">\n {{rowData[field]}}\n </span>\n <span *ngSwitchCase=\"'currency'\">\n {{rowData[field] | currency:\"VND\"}}\n </span>\n <span *ngSwitchCase=\"'decimal'\">\n {{rowData[field] | number}}\n </span>\n <span *ngSwitchCase=\"'boolean'\">\n <p-checkbox class=\"boolean-data-type\" [(ngModel)]=\"rowData[field]\" binary=\"true\"\n [disabled]=\"col.disableCheckBox\">\n </p-checkbox>\n </span>\n <span *ngSwitchCase=\"'html'\">\n <div *ngIf=\"rowData[field]==null?'':rowData[field]\" [innerHTML]=\"rowData[field] | safeHtml\"></div>\n </span>\n <span *ngSwitchCase=\"'metadataStatus'\">\n <span *ngIf=\"rowData['rejectReason']\" class=\"label-danger\" [pTooltip]=\"rowData['rejectReason']\"\n tooltipStyleClass=\"unset-width\" [escape]=\"false\" tooltipPosition=\"top\">T\u1EEB ch\u1ED1i</span>\n <span *ngIf=\"rowData[field] == '0' && !rowData['rejectReason']\" class=\"label-secondary\">Ch\u01B0a\n duy\u1EC7t</span>\n <span *ngIf=\"rowData[field] == '1' && !rowData['rejectReason']\" class=\"label-warning\">Ch\u1EDD duy\u1EC7t</span>\n <span *ngIf=\"rowData[field] == '2'\" class=\"label-primary\">\u0110\u00E3 duy\u1EC7t</span>\n </span>\n <ng-container *ngSwitchCase=\"'fileUpload'\">\n <ng-container\n *ngTemplateOutlet=\"fileUploadColumn; context: {$implicit: rowData, field: col.field, fileSetting: col.fileSetting}\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'fileManager'\">\n <ng-container\n *ngTemplateOutlet=\"fileManagerColumn; context: {$implicit: rowData, field: col.field, fileSetting: col.fileSetting}\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'string'\">\n <ng-container *ngTemplateOutlet=\"contentCellString; context: {$implicit: rowData, field: col.field}\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"null\">\n <ng-container *ngTemplateOutlet=\"contentCellString; context: {$implicit: rowData, field: col.field}\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <ng-container [ngTemplateOutlet]=\"getComponentByType(col.dataType)\"\n [ngTemplateOutletContext]=\"getContextCell(rowData, rowIndex, col, expanded, this)\">\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n</ng-template>\n<ng-template #contentCellString let-rowData let-field=\"field\">\n <span>\n <!-- __sv: Short Value -->\n <ng-container *ngIf=\"rowData[field + '__sv']\">\n <ng-container *ngIf=\"!rowData[field + '__showFull']\">\n {{rowData[field + '__sv']}}\n <span class=\"toggle-showfull\" (click)=\"toggleShowFull(rowData, field)\" pTooltip=\"B\u1EA5m \u0111\u1EC3 xem th\u00EAm\"\n tooltipPosition=\"top\">[...]</span>\n </ng-container>\n <ng-container *ngIf=\"rowData[field + '__showFull']\">\n {{rowData[field]}}\n <span class=\"toggle-showfull\" (click)=\"toggleShowFull(rowData, field)\">Thu g\u1ECDn</span>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!rowData[field + '__sv']\">\n {{rowData[field]}}\n </ng-container>\n </span>\n</ng-template>\n<ng-template #iconToggleRowGroup let-rowData=\"rowData\" let-expanded=\"expanded\">\n <a href=\"javascript:;\" (click)=\"handleToggleRow(rowData, $event)\">\n <i style=\"margin-right:5px\" [ngClass]=\"expanded ? 'fas fa-fw fa-caret-down' : 'fas fa-fw fa-caret-right'\"></i>\n </a>\n</ng-template>\n<ng-template #iconToggleRowData let-rowData=\"rowData\" let-expanded=\"expanded\">\n <button type=\"button\" pButton pRipple class=\"link-or-action p-button-text p-button-rounded p-button-plain\"\n [icon]=\"expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"\n (click)=\"handleToggleRow(rowData, $event)\"></button>\n</ng-template>\n<ng-template #_contentRowGroup let-rowData=\"rowData\" let-groupCol=\"groupCol\" let-groupField=\"_groupField\">\n <ng-container [ngTemplateOutlet]=\"contentCell\"\n [ngTemplateOutletContext]=\"{rowData: rowData, col: groupCol, field: _groupField}\">\n </ng-container>\n <span *ngIf=\"setting.columnSetting.showGroupSize\">\n ({{rowGroupMetadata[rowData[_groupField]].size}})</span>\n</ng-template>\n<ng-template #trangThaiV5 let-rowData=\"rowData\">\n <div class=\"container-text-workflow\">\n <button *ngIf=\"!rowData.__workflowCode && !rowData.hiddenWorkflowAction && !rowData.hiddenStartWorkflow\" pButton\n class=\"p-button-text link-or-action\" label=\"B\u1EAFt \u0111\u1EA7u\" style=\"border: 1px solid #7ca9cd;\"\n pTooltip=\"B\u1EAFt \u0111\u1EA7u ch\u1EA1y quy tr\u00ECnh\" tooltipPosition=\"top\"\n [disabled]=\"rowData.__startingWorkflow && !rowData.__notReadyForStart\"\n (click)=\"showFormStartWorkflow(rowData, dialogstartWorkflow)\"></button>\n <ng-container *ngIf=\"rowData.__workflowCode\">\n <span class=\"content\">{{rowData.__textTrangThai}}</span>\n <button *ngIf=\"!rowData.hiddenWorkflowAction\" type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\n class=\"link-or-action p-button-text p-button-rounded\" pTooltip=\"H\u00E0nh \u0111\u1ED9ng\" tooltipPosition=\"top\"\n [disabled]=\"showingActionWorkflow\"\n (click)=\"showActionWorkflow($event, rowData, dialogProcessWorkflowForm, dialogDetailTask, dialogChoYKienForm)\"></button>\n </ng-container>\n </div>\n</ng-template>\n<ng-template #viewHistory let-rowData=\"rowData\">\n <button pButton icon=\"pi pi-calendar\" class=\"p-button-text p-button-rounded link-or-action\" pTooltip=\"Xem l\u1ECBch s\u1EED\"\n tooltipPosition=\"top\" (click)=\"viewHistoryWorkflow(setting, rowData)\"></button>\n</ng-template>\n<ng-template #containerSticky>\n <span class=\"fix-sticky top\"></span>\n <span class=\"fix-sticky right\"></span>\n <!-- <span class=\"fix-sticky bottom\"></span> -->\n <span class=\"fix-sticky left\"></span>\n</ng-template>\n<ng-template #sortIcon let-field=\"field\">\n <i class=\"p-sortable-column-icon pi\" style=\"font-size: 0.8em;\"\n [ngClass]=\"{'pi-sort-amount-up-alt': field == _sortField && _sortDir === 1, 'pi-sort-amount-down': field == _sortField && _sortDir === -1, 'pi-sort-alt': field != _sortField || _sortDir === 0}\"></i>\n</ng-template>\n<ng-template #filterDropdown let-col=\"col\">\n <div #filterBox style=\"width: 100%; border-radius: 4px;\">\n <dropdown *ngIf=\"col && filterSchema.dropdown[col.field]\" [control]=\"filterSchema.dropdown[col.field]\"\n [dataSource]=\"filterSchema.dropdown[col.field].dataSource\" [(value)]=\"filterData[col.field]\"\n (onChanged)=\"prepareSearch(col)\" (onHideSmartEvent)=\"onSearch()\"\n (onShow)=\"onShowFilterDropdownPanel($event)\" (onHide)=\"onHideFilterDropdownPanel($event)\"\n (mousedown)=\"initFilterBoxFocus(filterBox)\"></dropdown>\n </div>\n</ng-template>\n<ng-template #filterText let-col=\"col\">\n <div #filterBox class=\"text-filter filter-box\" tabindex=\"-1\" (mousedown)=\"initFilterBoxFocus(filterBox)\">\n <div tabindex=\"-1\">\n <input pInputText type=\"text\" class=\"input-search\" [placeholder]=\"col.label\"\n [(ngModel)]=\"filterData[col.field]\" (change)=\"onSearch()\"\n (keyup.esc)=\"onClearSearch(filterBox, col.field)\">\n </div>\n <span [ngClass]=\"{'action-clear': true, 'dirty': filterData[col.field] != null && filterData[col.field] !== ''}\"\n [pTooltip]=\"'B\u1ECF filter'\" tooltipPosition=\"top\" (mousedown)=\"onClearSearch(filterBox, col.field)\"\n tabindex=\"-1\"><i class=\"pi pi-filter-slash\"></i></span>\n <after-view-checked style=\"display: none;\" (loaded)=\"initFilterBoxFocus(filterBox)\">\n </after-view-checked>\n </div>\n</ng-template>\n<ng-template #filterNumber let-col=\"col\">\n <div #filterBox class=\"number-picker-range filter-box\" tabindex=\"-1\" (mousedown)=\"initFilterBoxFocus(filterBox)\">\n <div tabindex=\"-1\">\n <tn-number-picker-range #numberRange [maskType]=\"col.dataType\" [(ngModel)]=\"filterData[col.field]\"\n [min]=\"col.min\" [max]=\"col.max\" [placeholder]=\"col.placeholder\" (change)=\"onSearch()\">\n </tn-number-picker-range>\n </div>\n <span\n [ngClass]=\"{'action-clear': true, 'dirty': filterData[col.field] && ((filterData[col.field][0] != null && filterData[col.field][0] !== '') || (filterData[col.field][1] != null && filterData[col.field][1] !== ''))}\"\n [pTooltip]=\"'B\u1ECF filter'\" tooltipPosition=\"top\" (mousedown)=\"onClearNumberSearch(filterBox, numberRange)\"\n tabindex=\"-1\">\n <i class=\"pi pi-filter-slash\"></i></span>\n <after-view-checked style=\"display: none;\" (loaded)=\"initFilterBoxFocus(filterBox)\">\n </after-view-checked>\n </div>\n</ng-template>\n<ng-template #filterDate let-col=\"col\" let-control=\"control\">\n <div #filterBox class=\"date-picker-range filter-box\" tabindex=\"-1\" (mousedown)=\"initFilterBoxFocus(filterBox)\">\n <div tabindex=\"-1\">\n <tn-datetime-picker-range #dateRange [control]=\"control\" (onChanged)=\"onChangeDateTime($event, col.field)\">\n </tn-datetime-picker-range>\n </div>\n <span\n [ngClass]=\"{'action-clear': true, 'dirty': filterData[col.field] && ((filterData[col.field][0] != null && filterData[col.field][0] !== '') || (filterData[col.field][1] != null && filterData[col.field][1] !== ''))}\"\n [pTooltip]=\"'B\u1ECF filter'\" tooltipPosition=\"top\"\n (mousedown)=\"onClearDateSearch(filterBox, dateRange, col.field)\" tabindex=\"-1\"><i\n class=\"pi pi-filter-slash\"></i></span>\n <after-view-checked style=\"display: none;\" (loaded)=\"initFilterBoxFocus(filterBox)\">\n </after-view-checked>\n </div>\n</ng-template>\n<ng-template #filterBoolean let-col=\"col\">\n <div class=\"filter-boolean-box\">\n <p-selectButton *ngIf=\"!col.minimizeFilter\"\n [options]=\"[{value: true, label: 'C\u00F3', icon: 'pi pi-check'}, {value: false, label: 'Kh\u00F4ng', icon: 'pi pi-times'}]\"\n [multiple]=\"true\" [(ngModel)]=\"filterData[col.field]\" (onChange)=\"onChangeBoolean($event, col.field)\">\n <ng-template let-item>\n <i style=\"padding: 3px 0;\" [class]=\"item.icon\"></i>\n </ng-template>\n </p-selectButton>\n <ng-container *ngIf=\"col.minimizeFilter\">\n <button *ngIf=\"!filterData[col.field]\" type=\"button\" pButton icon=\"pi pi-filter-slash\"\n class=\"btn-filter-boolean\" (click)=\"showCheckBoxFilterMenu($event, col.field)\"></button>\n <button *ngIf=\"filterData[col.field]\" type=\"button\" pButton icon=\"pi pi-filter\"\n class=\"btn-filter-boolean p-button-primary\"\n (click)=\"showCheckBoxFilterMenu($event, col.field)\"></button>\n </ng-container>\n </div>\n</ng-template>\n<ng-template #fileUploadColumn let-field=\"field\" let-rowData let-fileSetting=\"fileSetting\">\n <file-upload *ngIf=\"fileSetting.control.mode == FileUploadMode.usingFileInstanceId\"\n [sharedFolderType]=\"fileSetting.control.sharedFolderType\" [readonly]=\"fileSetting.control.readonly\"\n [accept]=\"fileSetting.control.accept\" [(ngModel)]=\"rowData[field]\"\n (onChanged)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.CHANGE)\"\n (onInit)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.INIT)\"\n (onSelect)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.SELECT)\"\n (onRemove)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.DELETED)\">\n </file-upload>\n\n <service-file-upload *ngIf=\"fileSetting.control.mode == FileUploadMode.usingServiceFile\"\n [serviceCode]=\"fileSetting.control.serviceCode\" [parentContext]=\"context\" [entity]=\"fileSetting.control.entity\"\n [entityKey]=\"rowData[fileSetting.control.entityKeyField]\" [control]=\"fileSetting.control\"\n [fileDataService]=\"fileSetting.control.fileDataService\" [(ngModel)]=\"rowData.field\"\n (onChanged)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.CHANGE)\"\n (onInit)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.INIT)\"\n (onSelect)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.SELECT)\"\n (onRemove)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.DELETED)\">\n </service-file-upload>\n</ng-template>\n<ng-template #fileManagerColumn let-rowData let-fileSetting=\"fileSetting\" let-field=\"field\">\n <file-manager [control]=\"fileSetting.control\" [serviceCode]=\"fileSetting.control.serviceCode\"\n [entity]=\"fileSetting.control.entity\" [entityKey]=\"rowData[fileSetting.control.entityKeyField]\"\n [readonly]=\"fileSetting.control.readonly\" [layout]=\"fileSetting.control.layout\"\n [fileDataService]=\"fileSetting.control.fileDataService\" [maxFileSize]=\"fileSetting.control.maxFileSize\"\n [inTaiLieu]=\"fileSetting.control.inTaiLieu\" [(value)]=\"rowData[field]\" [disabled]=\"fileSetting.control.disabled\"\n [noFileMessage]=\"fileSetting.control.noFileMessage\"\n (onChanged)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.CHANGE)\"\n (onInit)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.INIT)\"\n (onSelect)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.SELECT)\"\n (onRemove)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.DELETED)\"\n (uploaded)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.UPLOADED)\">\n </file-manager>\n</ng-template>",
22522
+ template: "<div #container class=\"custom-card card card-w-title flex-container-fit-child\" [attr.height-type]=\"setting.heightType\"\n [ngStyle]=\"_style\">\n <div class=\"ui-helper-clearfix crud-list-header-area\">\n <div *ngIf=\"!setting.hiddenSearch\">\n <div *ngIf=\"searchCustom && !setting.hiddenSearchCustom\"\n class=\"p-grid ui-fluid custom-p-col custom-search-area\">\n <div class=\"p-col-12 main-container-search\">\n <div class=\"p-grid main-container-search-inner\">\n <ng-container *ngIf=\"!setting.useCommonSearch\">\n <ng-container *ngTemplateOutlet=\"searchCustom; context: {$implicit: this}\"></ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n <div *ngIf=\"setting.useCommonSearch && !hasTemplate('searchCustom')\"\n class=\"p-grid ui-fluid custom-p-col custom-search-area\">\n <div class=\"p-col-12 main-container-search\">\n <div class=\"p-grid main-container-search-inner\">\n <div style=\"width: 100%;\">\n <common-search-form #commonSearch [parentSetting]=\"setting\" [parentModel]=\"model\"\n [templateFilter]=\"templateFilter\" [parentContext]=\"context\"\n [searchBoxTooltip]=\"setting.toolTipSearhBoxCommon\"\n (onClickSearch)=\"handleSearch($event)\"></common-search-form>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"!setting.hiddenHeader\" class=\"p-grid ui-fluid custom-p-col page-title-area\">\n <div *ngIf=\"!setting.hiddenPageTitle\" class=\"main-title\">\n <h1 *ngIf=\"!hasTemplate('customTitle')\">\n {{setting.title != null ? setting.title : 'Danh s\u00E1ch ' + setting.objectName}}\n </h1>\n\n <ng-container *ngIf=\"hasTemplate('customTitle')\" [ngTemplateOutlet]=\"getTemplate('customTitle')\"\n [ngTemplateOutletContext]=\"{\n crudList: this,\n buttonAdd: buttonAdd, buttonExport: buttonExport, buttonDelete: buttonDelete\n }\">\n </ng-container>\n </div>\n\n <div *ngIf=\"!setting.hiddenPageSetting\" class=\"paginator-table\">\n <ng-container *ngIf=\"!paginationTemplate\">\n <paging-next-back-only [model]=\"model\" [setting]=\"setting\" (onChanged)=\"getData()\"\n (onChangeLimitPage)=\"savePageSize()\">\n </paging-next-back-only>\n </ng-container>\n <ng-container *ngIf=\"paginationTemplate\">\n <ng-container [ngTemplateOutlet]=\"paginationTemplate\"></ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n <div *ngIf=\"hasTemplate('topGrid')\" class=\"extend-content-top-grid\">\n <ng-container [ngTemplateOutletContext]=\"{selectedItems: model.selectedItems, crudList: this}\"\n [ngTemplateOutlet]=\"getTemplate('topGrid')\"></ng-container>\n </div>\n <div class=\"fit-content crud-list-body-area\">\n <div class=\"crud-list-body-area-inner\" style=\"overflow: unset;\">\n <div class=\"flex-container-fit-child\" style=\"overflow: unset;\">\n <div *ngIf=\"!setting.hiddenToolbar\" class=\"p-grid crudListToolbar\">\n <ng-container>\n <div *ngIf=\"!setting.hiddenButtons && hasTemplate('toolbar')\"\n [ngClass]=\"setting.hiddenAdvanceSearch ? 'p-md-12 p-lg-12' : 'p-md-7 p-lg-8'\"\n class=\"p-col-12 button-group function-topbar custom-toolbar\">\n <ng-container *ngIf=\"hasTemplate('defaultToolbar')\">\n <ng-container [ngTemplateOutlet]=\"getTemplate('defaultToolbar')\"\n [ngTemplateOutletContext]=\"{\n selectedItems: model.selectedItems, crudList: this,\n buttonAdd: buttonAdd, buttonExport: buttonExport, buttonDelete: buttonDelete}\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"isBtnReady\">\n <ng-container [ngTemplateOutlet]=\"getTemplate('toolbar')\" [ngTemplateOutletContext]=\"{\n selectedItems: model.selectedItems, crudList: this,\n buttonAdd: buttonAdd, buttonExport: buttonExport, buttonDelete: buttonDelete}\">\n </ng-container>\n <ng-container *ngIf=\"isSuperUser\" [ngTemplateOutlet]=\"buttonAuthorize\">\n </ng-container>\n </ng-container>\n </div>\n <div *ngIf=\"!setting.hiddenButtons && !hasTemplate('toolbar')\"\n [ngClass]=\"setting.hiddenAdvanceSearch ? 'p-md-12 p-lg-12' : 'p-md-7 p-lg-8'\"\n class=\"p-col-12 button-group function-topbar\">\n <ng-container *ngIf=\"isBtnReady\">\n <ng-container [ngTemplateOutlet]=\"getTemplate('buttonBeforeToolbar')\"\n [ngTemplateOutletContext]=\"{crudList: this}\"></ng-container>\n <button type=\"button\" pButton label=\"\u0110\u00E1nh STT\" class=\"p-button-text\"\n style=\"display: none\" (click)=\"danhSoThuTuGroupLastest()\"></button>\n <ng-container *ngIf=\"!hiddenAdd\" [ngTemplateOutlet]=\"buttonAdd\"></ng-container>\n <ng-container *ngIf=\"setting.showExportSelectedItems\" [ngTemplateOutlet]=\"buttonExport\">\n </ng-container>\n <ng-container [ngTemplateOutlet]=\"buttonExportAll\">\n </ng-container>\n <ng-container *ngIf=\"setting.showExportWordSelectedItems\"\n [ngTemplateOutlet]=\"buttonExportWord\">\n </ng-container>\n <ng-container *ngIf=\"!hiddenDelete\" [ngTemplateOutlet]=\"buttonDelete\">\n </ng-container>\n <ng-container *ngIf=\"!hiddenReorder\" [ngTemplateOutlet]=\"buttonReorder\">\n </ng-container>\n <button *ngIf=\"!setting.disableShare && model.selectedItems.length > 0\"\n label=\"Chia s\u1EBB li\u00EAn k\u1EBFt\" type=\"button\" pButton pRipple\n [pTooltip]=\"'Chia s\u1EBB li\u00EAn k\u1EBFt' | translate\" tooltipPosition=\"top\"\n class=\"p-button-text p-button-info link-or-action\" icon=\"pi pi-link\"\n (click)=\"createShareLinkMultiple()\"></button>\n <ng-container [ngTemplateOutlet]=\"getTemplate('buttonAfterToolbar')\"\n [ngTemplateOutletContext]=\"{crudList: this}\"></ng-container>\n\n <ng-container *ngIf=\"isSuperUser\" [ngTemplateOutlet]=\"buttonAuthorize\">\n </ng-container>\n </ng-container>\n </div>\n </ng-container>\n <div *ngIf=\"!setting.hiddenAdvanceSearch && !setting.useCommonSearch\"\n class=\"p-col-12 advance-search-container\"\n [ngClass]=\"setting.hiddenButtons ? 'p-md-12 p-lg-12' : 'p-md-5 p-lg-4'\">\n <advance-search #advanceSearch [parentSetting]=\"setting\" [searchInfo]=\"searchInfo\"\n [loading]=\"model.loading\" (onSearch)=\"handleSearchAdvs($event)\"\n (onInit)=\"handleInitAdvanceSearch($event)\">\n </advance-search>\n </div>\n </div>\n <div *ngIf=\"hasTemplate('topGrid')\" class=\"extend-content-top-grid\">\n <ng-container [ngTemplateOutletContext]=\"{selectedItems: model.selectedItems, crudList: this}\"\n [ngTemplateOutlet]=\"getTemplate('topGrid')\"></ng-container>\n </div>\n <div class=\"container-table fit-content\" [class.--table-responsive]=\"responsive\">\n <div class=\"container-table-inner\">\n <ng-container *ngIf=\"!_groupField\">\n <tn-custom-scrollbar *ngIf=\"showScrollBar\" #scrollbar [config]=\"configScrollBar\"\n [showScrollHorizontal]=\"showScrollHorizontal\">\n <ng-container *ngTemplateOutlet=\"tableGetGroupFieldFalse\">\n </ng-container>\n <ng-container *ngIf=\"hasTemplate('afterCrudList')\">\n <ng-container [ngTemplateOutlet]=\"getTemplate('afterCrudList')\"></ng-container>\n </ng-container>\n </tn-custom-scrollbar>\n <div *ngIf=\"!showScrollBar\">\n <ng-container *ngTemplateOutlet=\"tableGetGroupFieldFalse\">\n </ng-container>\n </div>\n </ng-container>\n <ng-container *ngIf=\"_groupField\">\n <tn-custom-scrollbar *ngIf=\"showScrollBar\" #scrollbar [config]=\"configScrollBar\"\n [showScrollHorizontal]=\"showScrollHorizontal\">\n <ng-container *ngTemplateOutlet=\"tableGetGroupFieldTrue\">\n </ng-container>\n <ng-container *ngIf=\"hasTemplate('afterCrudList')\">\n <ng-container [ngTemplateOutlet]=\"getTemplate('afterCrudList')\"></ng-container>\n </ng-container>\n </tn-custom-scrollbar>\n <div *ngIf=\"!showScrollBar\">\n <ng-container *ngTemplateOutlet=\"tableGetGroupFieldTrue\">\n </ng-container>\n </div>\n </ng-container>\n\n <div class=\"table-border-line --top\"></div>\n <div class=\"table-border-line --right\"></div>\n <div class=\"table-border-line --bottom\"></div>\n <div class=\"table-border-line --left\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n<after-view-checked (loaded)=\"handleReady()\"></after-view-checked>\n<settings *ngIf=\"_showSettings && !setting.hiddenSetting\" [entityMetadataService]=\"entityMetadataService\"\n [parentContext]=\"context\" [parentSetting]=\"setting\" [parentModel]=\"model\" (onSave)=\"onSaveSettings($event)\"\n (onDelete)=\"onDeleteSettings()\" (onCancel)=\"_showSettings = false\">\n</settings>\n<settings-row *ngIf=\"_showSettingsRowColor && !setting.hiddenSetting\" [entityMetadataService]=\"entityMetadataService\"\n [parentContext]=\"context\" [parentSetting]=\"setting\" [parentModel]=\"model\" (onSave)=\"onSaveColorSettings($event)\"\n (onCancel)=\"_showSettingsRowColor = false\">\n</settings-row>\n<!-- <workflow-setting-dialog *ngIf=\"_showSettingsWorkflow && !setting.hiddenSettingWorkflow\" [parentSetting]=\"setting\"\n [parentContext]=\"context\" [parentModel]=\"model\" (onSaved)=\"onSaveWorkflowSettings($event)\"\n (onRemoved)=\"onRemoveWorkflowSettings($event)\" (onCancel)=\"_showSettingsWorkflow = false\">\n</workflow-setting-dialog> -->\n<div #workflowSettingDialog *ngIf=\"_showSettingsWorkflow && !setting.hiddenSettingWorkflow\"></div>\n<tn-dialog #dialogWfSettingNew [visible]=\"workflowSettingModel.showEditForm\"\n [header]=\"'C\u1EA5u h\u00ECnh quy tr\u00ECnh nghi\u1EC7p v\u1EE5' | translate\" [popupSize]=\"workflowSettingModel.popupSize\"\n (onHide)=\"workflowSettingModel.showEditForm = false\">\n <!-- <workflow-setting-new #formBase [parentSetting]=\"setting\" (onSaved)=\"onSaveWorkflowSettingsNew($event)\"\n (onCancel)=\"workflowSettingModel.showEditForm = false\"></workflow-setting-new> -->\n <div #workflowsettingnew></div>\n</tn-dialog>\n<entity-permission *ngIf=\"_showSettingsPermission && !setting.hiddenSettingPermission\" [parentSetting]=\"setting\"\n [parentContext]=\"context\" [parentModel]=\"model\" [searchInfo]=\"searchInfo\"\n (onCancel)=\"_showSettingsPermission = false\">\n</entity-permission>\n<p-contextMenu #contextMenu [appendTo]=\"'body'\" [styleClass]=\"'allow-selected'\" [model]=\"buttonContexts\">\n</p-contextMenu>\n<tn-dialog #dialogProcessWorkflowForm [visible]=\"processWorkflowModel.showEditForm\"\n [header]=\"processWorkflowModel.header | translate\" [popupSize]=\"processWorkflowModel.popupSize\"\n [scrollBarStyleClass]=\"'fit-content'\" (onHide)=\"processWorkflowModel.showEditForm = false\">\n <div style=\"height: 100%; padding: 1rem\">\n <!-- <process-workflow-form #formBase [businessSetting]=\"processWorkflowModel.data.setting\" [item]=\"currentItem\"\n [workflow]=\"processWorkflowModel.data.workflow\" [action]=\"processWorkflowModel.data.action\"\n (onSaved)=\"handleProcessedWorkflowBase()\" (onCancel)=\"processWorkflowModel.showEditForm = false\">\n </process-workflow-form> -->\n <div #processWorkflowForm></div>\n </div>\n</tn-dialog>\n<tn-dialog #dialogChoYKienForm [visible]=\"choYKienModel.showEditForm\" [header]=\"choYKienModel.header | translate\"\n [popupSize]=\"choYKienModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\n (onHide)=\"choYKienModel.showEditForm = false\">\n <div style=\"height: 100%\">\n <!-- <cho-y-kien-form #formBase [bussinessSetting]=\"choYKienModel.data.setting\"\n [rowItem]=\"choYKienModel.data.rowData\" (onSaved)=\"choYKienModel.showEditForm = false\"\n (onCancel)=\"choYKienModel.showEditForm = false\">\n </cho-y-kien-form> -->\n <div #choYKienForm></div>\n </div>\n</tn-dialog>\n<tn-dialog *ngIf=\"buttonAuthorizeModel.showEditForm\" #dialog [header]=\"buttonAuthorizeModel.header | translate\"\n [popupSize]=\"buttonAuthorizeModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\n (onHide)=\"handleCloseAuthorizeButtonForm()\">\n <settings-authorize-button [authorizeButtonKey]=\"authorizeButtonKey\"\n [dataSource]=\"buttonAuthorizeModel.data.dataSource\"></settings-authorize-button>\n</tn-dialog>\n\n<tn-dialog [visible]=\"workflowHistoryModel.showEditForm\" [header]=\"workflowHistoryModel.header | translate\"\n [popupSize]=\"workflowHistoryModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\n (onHide)=\"workflowHistoryModel.showEditForm = false\">\n <div style=\"height: 100%\">\n <!-- <workflow-history-new #formBase [businessSetting]=\"workflowHistoryModel.data.setting\"\n [tableName]=\"workflowHistoryModel.data.tableName\" [item]=\"currentItem\"\n [workflowSetting]=\"workflowHistoryModel.data.workflowSetting\"\n (onCancel)=\"workflowHistoryModel.showEditForm = false\">\n </workflow-history-new> -->\n <div #workflowHistoryNew></div>\n </div>\n</tn-dialog>\n<tn-dialog #dialogDetailTask [visible]=\"detailTaskModel.showEditForm\" [header]=\"detailTaskModel.header | translate\"\n [popupSize]=\"detailTaskModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\n (onHide)=\"detailTaskModel.showEditForm = false\">\n <!-- <base-congviec-form #formBase [model]=\"detailTaskModel.data.taskFormModel\" [forceOnlyView]=\"true\"\n (onCancel)=\"detailTaskModel.showEditForm = false\">\n </base-congviec-form> -->\n <div #detailTask></div>\n</tn-dialog>\n\n<tn-dialog #dialogPermissionSharing [visible]=\"permissionSharingModel.showEditForm\"\n [header]=\"permissionSharingModel.header | translate\" [popupSize]=\"permissionSharingModel.popupSize\"\n [scrollBarStyleClass]=\"'fit-content'\" (onHide)=\"permissionSharingModel.showEditForm = false\">\n <div style=\"height: 100%\">\n <!-- <permission-sharing #formBase [item]=\"rowDataCurrent\" [baseService]=\"setting.baseService\"\n (onCancel)=\"permissionSharingModel.showEditForm = false\">\n </permission-sharing> -->\n <div #permissionSharing></div>\n </div>\n</tn-dialog>\n<tn-dialog #dialogWorkflowPermission [visible]=\"permissionListModel.showEditForm\"\n [header]=\"permissionListModel.header | translate\" [popupSize]=\"permissionListModel.popupSize\"\n [scrollBarStyleClass]=\"'fit-content'\" [useDefaultScrollBar]=\"true\"\n (onHide)=\"permissionListModel.showEditForm = false\">\n <div style=\"height: 100%\">\n <!-- <workflow-permission #formBase [item]=\"rowDataCurrent\" [businessSetting]=\"setting\"\n (onCancel)=\"permissionListModel.showEditForm = false\">\n </workflow-permission> -->\n <div #workflowPermission></div>\n </div>\n</tn-dialog>\n<!-- <workflow-history-dialog *ngIf=\"showHistoryWorkflow\" [baseService]=\"setting.baseService\" [item]=\"currentItem\"\n [workflowSetting]=\"setting.workflowSetting\" (onHide)=\"handleHideHistoryWorkflow()\">\n</workflow-history-dialog> -->\n<div #workflowPermission *ngIf=\"showHistoryWorkflow\"></div>\n<tn-dialog #dialogstartWorkflow [visible]=\"startWorkflowModel.showEditForm\"\n [header]=\"startWorkflowModel.header | translate\" [popupSize]=\"startWorkflowModel.popupSize\"\n [scrollBarStyleClass]=\"'fit-content'\" (onHide)=\"startWorkflowModel.showEditForm = false\">\n <div style=\"height: 100%\">\n <!-- <start-workflow #formBase [workflows]=\"startWorkflowModel.data.workflows\"\n [defaultWorkflow]=\"startWorkflowModel.data.defaultWorkflow\"\n (onCancel)=\"startWorkflowModel.showEditForm = false\" (onSaved)=\"handleStartWorkflowFromDialog($event)\">\n </start-workflow> -->\n <div #startWorkflow></div>\n </div>\n</tn-dialog>\n<tn-dialog #dialogBaseCongViecForm [visible]=\"congViecModel.showEditForm\" [styleClass]=\"'congviec-form tn-form-dialog'\"\n [header]=\"congViecModel.header | translate\" [popupSize]=\"congViecModel.popupSize\"\n (onHide)=\"congViecModel.showEditForm = false\">\n <!-- <base-congviec-form #formBase [parentSetting]=\"congViecModel.data.congViecSetting\"\n [model]=\"congViecModel.data.model\" (onSaved)=\"congViecModel.showEditForm = false;getData()\"\n (onCancel)=\"congViecModel.showEditForm = false\">\n </base-congviec-form> -->\n <div #baseCongViecForm></div>\n</tn-dialog>\n<tn-dialog #dialog *ngIf=\"shareLinkModel.showEditForm\" [styleClass]=\"'congviec-form tn-form-dialog'\"\n [header]=\"shareLinkModel.header | translate\" [popupSize]=\"shareLinkModel.popupSize\" [useDefaultScrollBar]=\"true\"\n (onHide)=\"shareLinkModel.showEditForm = false\">\n <share-link-by-permission #formBase [setting]=\"setting\" [lstItem]=\"shareLinkModel.data.lstItem\"\n (onCancel)=\"congViecModel.showEditForm = false\">\n </share-link-by-permission>\n</tn-dialog>\n<tn-dialog #dialogBaseCongViec [visible]=\"attachedTaskModel.showEditForm\"\n [header]=\"attachedTaskModel.header | translate\" [popupSize]=\"attachedTaskModel.popupSize\"\n [useDefaultScrollBar]=\"true\" (onHide)=\"attachedTaskModel.showEditForm = false\">\n <!-- <base-congviec [serviceCode]=\"setting.baseService.serviceCode\" [entity]=\"setting.baseService.entityName\"\n [itemIdAttach]=\"rowDataCurrent.id\"></base-congviec> -->\n <div #baseCongViec></div>\n</tn-dialog>\n<ng-template #tableGetGroupFieldFalse>\n <p-table #table [dataKey]=\"'id'\" [scrollable]=\"pTableScrollable\" [scrollHeight]=\"pTableScrollHeight\"\n [columns]=\"setting.cols\" [paginator]=\"false\" [value]=\"_dataSource\" (onSort)=\"onSort($event, table)\"\n [class]=\"_tableClass\" [responsive]=\"responsive\" [lazy]=\"lazy\" [loading]=\"model.loading\"\n [expandedRowKeys]=\"model.expandedRowKeys\" [(selection)]=\"model.selectedItems\"\n (onRowReorder)=\"handleRowOrdered($event)\">\n <ng-template *ngIf=\"colgroup\" pTemplate=\"colgroup\" let-columns>\n <ng-container *ngTemplateOutlet=\"colgroup; context: {$implicit: columns}\"></ng-container>\n </ng-template>\n <ng-template *ngIf=\"!colgroup\" pTemplate=\"colgroup\" let-columns>\n <ng-container *ngTemplateOutlet=\"baseColgroup; context: {$implicit: columns}\">\n </ng-container>\n </ng-template>\n <ng-template *ngIf=\"header\" pTemplate=\"header\" let-columns>\n <ng-container\n *ngTemplateOutlet=\"header, context: {$implicit: columns, crudList: this, rowHeaderFilter: rowHeaderFilter, contentTh: contentTh, containerSticky: containerSticky, funcCheckAll: handleCheckAll}\">\n </ng-container>\n </ng-template>\n <ng-template *ngIf=\"!header\" pTemplate=\"header\" let-columns>\n <ng-container *ngTemplateOutlet=\"trHeader; context: {$implicit: columns, funcCheckAll: handleCheckAll}\">\n </ng-container>\n </ng-template>\n <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\" let-index=\"rowIndex\" let-expanded=\"expanded\">\n <ng-container\n *ngTemplateOutlet=\"trBody; context: {$implicit: rowData, columns: columns, index: index, expanded: expanded, eventSelectRow: handleSelectRow, eventChecked: handleCheckRowData}\">\n </ng-container>\n <after-view-checked *ngIf=\"index == _dataSource.length - 1\" style=\"display: none;\" [renderKey]=\"_dataSource\"\n (loaded)=\"handleTableRendered()\">\n </after-view-checked>\n </ng-template>\n <ng-template *ngIf=\"rowExpansion\" pTemplate=\"rowexpansion\" let-rowData let-expanded=\"expanded\">\n <ng-container\n *ngTemplateOutlet=\"rowExpansion; context: {$implicit: rowData, expanded: expanded, getColSpanGroup: getColSpanGroup}\">\n </ng-container>\n </ng-template>\n <ng-template *ngIf=\"summary\" pTemplate=\"summary\">\n <ng-container *ngTemplateOutlet=\"summary\"></ng-container>\n </ng-template>\n <ng-template *ngIf=\"footer\" pTemplate=\"footer\" let-columns>\n <ng-container *ngTemplateOutlet=\"footer; context: {$implicit: columns}\"></ng-container>\n </ng-template>\n </p-table>\n</ng-template>\n<ng-template #tableGetGroupFieldTrue>\n <p-table #tableGroup [scrollable]=\"pTableScrollable\" [scrollHeight]=\"pTableScrollHeight\" [columns]=\"setting.cols\"\n [paginator]=\"false\" [value]=\"_dataSource\" [metaKeySelection]=\"false\" (onSort)=\"onSort($event, tableGroup)\"\n [class]=\"_tableClass\" [customSort]=\"true\" [responsive]=\"responsive\" [lazy]=\"true\" [loading]=\"model.loading\"\n [(selection)]=\"model.selectedItems\" [expandedRowKeys]=\"model.expandedRowKeys\" [dataKey]=\"_groupField\">\n <ng-template *ngIf=\"colgroup\" pTemplate=\"colgroup\" let-columns>\n <ng-container *ngTemplateOutlet=\"colgroup; context: {$implicit: columns}\"></ng-container>\n </ng-template>\n <ng-template *ngIf=\"!colgroup\" pTemplate=\"colgroup\" let-columns>\n <ng-container *ngTemplateOutlet=\"baseColgroup; context: {$implicit: columns}\">\n </ng-container>\n </ng-template>\n <ng-template *ngIf=\"header\" pTemplate=\"header\" let-columns>\n <ng-container\n *ngTemplateOutlet=\"header, context: {$implicit: columns, crudList: this, rowHeaderFilter: rowHeaderFilter, contentTh: contentTh, containerSticky: containerSticky, funcCheckAll: handleCheckAll_Group}\">\n </ng-container>\n </ng-template>\n <ng-template *ngIf=\"!header\" pTemplate=\"header\" let-columns>\n <ng-container\n *ngTemplateOutlet=\"trHeader; context: {$implicit: columns, funcCheckAll: handleCheckAll_Group}\">\n </ng-container>\n </ng-template>\n <ng-template pTemplate=\"body\" let-rowData let-rowIndex=\"rowIndex\" let-expanded=\"expanded\" let-columns=\"columns\">\n <tr *ngIf=\"rowGroupMetadata[rowData[_groupField]] && rowGroupMetadata[rowData[_groupField]].index == rowIndex\"\n class=\"p-widget-header group-row\" style=\"border: 0px; border-bottom: 1px solid #eee\">\n <td *ngIf=\"!setting.hiddenCheckbox\" class=\"center chkbox\" [class.sticky]=\"setting.stickyColumn\">\n <p-checkbox [(ngModel)]=\"rowGroupChecked[rowData[_groupField]]\" binary=\"true\"\n (onChange)=\"handleCheckRowGroup(rowData)\">\n </p-checkbox>\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </td>\n <ng-container *ngIf=\"!rowGroup\">\n <td [colSpan]=\"getColSpanGroup()\" [class]=\"_classRowGroup\">\n <div class=\"container-row-group\">\n <a href=\"javascript:;\" [pRowToggler]=\"rowData\" class=\"container-row-group-toggle\"\n [class.sticky]=\"setting.stickyColumn\">\n <i style=\"margin-right:5px\"\n [ngClass]=\"expanded ? 'fas fa-fw fa-caret-down' : 'fas fa-fw fa-caret-right'\"></i>\n <div class=\"content-row-group\">\n <ng-container *ngIf=\"!contentRowGroup\">\n <ng-container [ngTemplateOutlet]=\"_contentRowGroup\"\n [ngTemplateOutletContext]=\"getContextRowGroup(rowData)\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"contentRowGroup\">\n <ng-container [ngTemplateOutlet]=\"contentRowGroup\"\n [ngTemplateOutletContext]=\"getContextRowGroup(rowData)\">\n </ng-container>\n </ng-container>\n </div>\n </a>\n </div>\n </td>\n </ng-container>\n <ng-container *ngIf=\"rowGroup\">\n <ng-container [ngTemplateOutlet]=\"rowGroup\"\n [ngTemplateOutletContext]=\"getContextRowGroupRoot(rowData, expanded)\">\n </ng-container>\n </ng-container>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"rowexpansion\" let-columns=\"columns\" let-rowData let-index=\"rowIndex\">\n <ng-container\n *ngTemplateOutlet=\"trBody; context: {$implicit: rowData, columns: columns, index: index, expanded: false, eventSelectRow: handleSelectRowGroup, eventChecked: handleCheckRowData_Group}\">\n </ng-container>\n <after-view-checked *ngIf=\"index == _dataSource.length - 1\" style=\"display: none;\" [renderKey]=\"_dataSource\"\n (loaded)=\"handleTableRendered()\">\n </after-view-checked>\n </ng-template>\n <ng-template *ngIf=\"summary\" pTemplate=\"summary\">\n <ng-container *ngTemplateOutlet=\"summary\"></ng-container>\n </ng-template>\n <ng-template *ngIf=\"footer\" pTemplate=\"footer\" let-columns>\n <ng-container *ngTemplateOutlet=\"footer; context: {$implicit: columns}\"></ng-container>\n </ng-template>\n </p-table>\n <after-view-checked></after-view-checked>\n</ng-template>\n<ng-template #baseColgroup let-columns>\n <colgroup>\n <col *ngIf=\"!setting.hiddenCheckbox\" [style.width]=\"widthCheckbox\" />\n <col *ngIf=\"!setting.hiddenOrderColumn\" [style.width]=\"widthOrderColumn\" />\n <col *ngIf=\"rowExpansion\" style=\"width: 2.5rem\" />\n <ng-container *ngFor=\"let col of columns; let i = index\">\n <col *ngIf=\"col && col.visible && col.field!='function'\" [style.width]=\"col.width\" />\n </ng-container>\n <col *ngIf=\"enableReorderRow\" style=\"width: 30px\" />\n <col *ngIf=\"!setting.hiddenFunctionColumn\" [style.width]=\"widthFunctionColumn || _widthFunctionColumn\" />\n </colgroup>\n</ng-template>\n<ng-template #buttonAdd>\n <button #buttonBase appAuthorize type=\"button\" pButton pRipple label=\"Th\u00EAm m\u1EDBi\" icon=\"pi pi-plus\"\n class=\"p-button-text\" [suffixAuthorizeCode]=\"setting.suffixAuthorizeCode\" [disabled]=\"!model.baseReady\"\n (click)=\"add()\"></button>\n</ng-template>\n<ng-template #buttonExportAll>\n <button *ngIf=\"showExportAll\" #buttonBase appAuthorize type=\"button\" pButton pRipple label=\"Xu\u1EA5t t\u1EA5t c\u1EA3\"\n icon=\"fas fa-file-excel\" class=\"p-button-text p-button-success\"\n [suffixAuthorizeCode]=\"setting.suffixAuthorizeCode\" (click)=\"exportDataAll()\"></button>\n</ng-template>\n<ng-template #buttonExport>\n <button #buttonBase appAuthorize *ngIf=\"model.selectedItems.length > 0\" type=\"button\" pButton pRipple\n label=\"Xu\u1EA5t c\u00E1c m\u1EE5c \u0111\u00E3 ch\u1ECDn\" icon=\"fas fa-file-excel\" class=\"p-button-text p-button-success\"\n [suffixAuthorizeCode]=\"setting.suffixAuthorizeCode\" (click)=\"xuatCacMucDaChon()\"></button>\n</ng-template>\n<ng-template #buttonAuthorize>\n <button *ngIf=\"!setting.hiddenAuthorizeButton && authorizeButtonKey\" type=\"button\" pButton pRipple\n label=\"Ph\u00E2n quy\u1EC1n n\u00FAt\" icon=\"fas fa-tools\" class=\"p-button-text\" (click)=\"onShowFormSettingButton()\"></button>\n</ng-template>\n\n<ng-template #buttonExportWord>\n <button #buttonBase appAuthorize *ngIf=\"model.selectedItems.length > 0\" type=\"button\" pButton pRipple\n label=\"In c\u00E1c m\u1EE5c \u0111\u00E3 ch\u1ECDn\" icon=\"fas fa-file-word\" class=\"p-button-text p-button-success\"\n [suffixAuthorizeCode]=\"setting.suffixAuthorizeCode\" (click)=\"printByReadingHtml()\"></button>\n</ng-template>\n<ng-template #buttonDelete>\n <button #buttonBase *ngIf=\"(!hiddenDelete && model.selectedItems.length > 0 && !disableMultipleDelete())\"\n appAuthorize type=\"button\" pButton pRipple label=\"X\u00F3a c\u00E1c m\u1EE5c \u0111\u00E3 ch\u1ECDn\" icon=\"pi pi-trash\"\n class=\"p-button-text p-button-danger\" [suffixAuthorizeCode]=\"setting.suffixAuthorizeCode\"\n (click)=\"deleteMutiple()\"></button>\n</ng-template>\n<ng-template #buttonReorder>\n <button #buttonBase\n *ngIf=\"showSaveReorder && enableReorderRow && (_sortField == setting.columnSetting.sortField || _sortDir == 0)\"\n appAuthorize type=\"button\" pButton pRipple label=\"L\u01B0u s\u1EAFp x\u1EBFp\" icon=\"pi pi-save\"\n class=\"p-button-text p-button-success\" (click)=\"saveReorder()\"></button>\n</ng-template>\n<ng-template #trHeader let-columns let-funcCheckAll=\"funcCheckAll\">\n <tr class=\"title-row\">\n <ng-container *ngIf=\"!setting.hiddenCheckbox\">\n <th class=\"chkbox link-or-action cell-checkbox\" [class.sticky]=\"setting.stickyColumn\">\n <button *ngIf=\"!hasTemplate('headerCheckbox') && !setting.useCommonSearch\" type=\"button\" pButton pRipple\n icon=\"pi pi-refresh\" class=\"p-button-rounded p-button-text btnReload\" pTooltip=\"L\u00E0m m\u1EDBi d\u1EEF li\u1EC7u\"\n tooltipPosition=\"top\" [disabled]=\"model.loading\" (click)=\"reload()\"></button>\n <p-triStateCheckbox *ngIf=\"setting.useCommonSearch\" [(ngModel)]=\"checkedAll\" binary=\"true\"\n (onChange)=\"funcCheckAll()\">\n </p-triStateCheckbox>\n <ng-container *ngIf=\"hasTemplate('headerCheckbox')\">\n <ng-container [ngTemplateOutletContext]=\"{crudList: this}\"\n [ngTemplateOutlet]=\"getTemplate('headerCheckbox')\"></ng-container>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </th>\n </ng-container>\n <th *ngIf=\"!setting.hiddenOrderColumn\" class=\"stt nopad center\" [class.sticky]=\"setting.stickyColumn\"\n (dblclick)=\"reload()\">\n {{ 'TT' |translate}}\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </th>\n <th *ngIf=\"rowExpansion\" class=\"nopad row-expansion-toggle center\" style=\"width: 2.5rem\"\n [class.sticky]=\"setting.stickyColumn\">\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </th>\n <ng-container *ngIf=\"hasTemplate('trHeaderBefore')\">\n <ng-container [ngTemplateOutlet]=\"getTemplate('trHeaderBefore')\"\n [ngTemplateOutletContext]=\"{$implicit: columns}\"></ng-container>\n </ng-container>\n <ng-container *ngFor=\"let col of columns; let i = index\">\n <th *ngIf=\"col && col.visible && col.field!='function'\" [ngStyle]=\"col.extendData.headerStyle\"\n [style.left]=\"col.isPinned && col.left ? (col.left + 'px') : ''\" [pTooltip]=\"col.fullLabel\"\n tooltipStyleClass=\"unset-width\" [class]=\"col.extendData.headerClass\"\n [className]=\"col.isPinned && col.width ? col.class : ''\" [class.first-th]=\"i==0\" [escape]=\"false\"\n tooltipPosition=\"top\" [tnSortableColumn]=\"col.field\" [tnSortableColumnDisabled]=\"!col.sort\">\n <ng-container *ngTemplateOutlet=\"contentTh; context: {$implicit: col}\"></ng-container>\n <ng-container *ngIf=\"col.sort || col.sortClient\">\n <ng-container *ngTemplateOutlet=\"sortIcon; context: {field: col.field}\"></ng-container>\n </ng-container>\n </th>\n </ng-container>\n <ng-container *ngIf=\"hasTemplate('trHeaderAfter')\">\n <ng-container [ngTemplateOutlet]=\"getTemplate('trHeaderAfter')\"\n [ngTemplateOutletContext]=\"{$implicit: columns}\"></ng-container>\n </ng-container>\n <th *ngIf=\"enableReorderRow\" style=\"width: 30px\">\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </th>\n <ng-container *ngTemplateOutlet=\"colFunctionHeader\"></ng-container>\n </tr>\n <ng-container *ngTemplateOutlet=\"rowHeaderFilter; context: {columns: columns, funcCheckAll: funcCheckAll}\">\n </ng-container>\n</ng-template>\n<ng-template #rowHeaderFilter let-columns=\"columns\" let-funcCheckAll=\"funcCheckAll\">\n <tr class=\"filter-row\" *ngIf=\"!setting.hiddenFilterRow\">\n <th *ngIf=\"!setting.hiddenCheckbox\" class=\"chkbox nopad center\" [class.sticky]=\"setting.stickyColumn\"\n [class.tricheckbox-custom-false]=\"checkedAll === false\">\n <p-triStateCheckbox [(ngModel)]=\"checkedAll\" binary=\"true\" (onChange)=\"funcCheckAll()\">\n </p-triStateCheckbox>\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </th>\n <th *ngIf=\"!setting.hiddenOrderColumn\" class=\"stt center v-top\" [class.sticky]=\"setting.stickyColumn\">\n <div *ngIf=\"!setting.hiddenSetting\" class=\"pick-color-row\" pTooltip=\"C\u1EA5u h\u00ECnh hi\u1EC3n th\u1ECB m\u00E0u\"\n tooltipPosition=\"top\" (click)=\"showSettingRowColor()\">\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n </div>\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </th>\n <th *ngIf=\"rowExpansion\" class=\"nopad center row-expansion-toggle\" [class.sticky]=\"setting.stickyColumn\">\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </th>\n <ng-container *ngFor=\"let col of columns; let i = index\">\n <th *ngIf=\"col.visible && col.field != 'function'\" class=\"cell-header-filter center\"\n [style.left]=\"col.isPinned && col.left ? (col.left + 'px') : ''\"\n [className]=\"col.isPinned && col.width ? col.class + ' cell-header-filter center': 'cell-header-filter center'\">\n <ng-container *ngIf=\"col.allowFilter\">\n <ng-container *ngIf=\"col.templateFilter\">\n <ng-container [ngTemplateOutlet]=\"col.templateFilter\"\n [ngTemplateOutletContext]=\"{col: col, filterData: filterData, onSearch: onSearch, onShowFilterDropdownPanel: onShowFilterDropdownPanel, onHideFilterDropdownPanel: onHideFilterDropdownPanel}\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!col.templateFilter\" [ngSwitch]=\"col.controlType\">\n <ng-container *ngSwitchCase=\"'dropdown'\">\n <ng-container [ngTemplateOutlet]=\"filterDropdown\"\n [ngTemplateOutletContext]=\"{col: col.rawColumn}\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'number'\">\n <ng-container [ngTemplateOutlet]=\"filterNumber\" [ngTemplateOutletContext]=\"{col: col}\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'date'\">\n <ng-container [ngTemplateOutlet]=\"filterDate\"\n [ngTemplateOutletContext]=\"{col: col, control: filterSchema.dateRange}\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'datetime'\">\n <ng-container [ngTemplateOutlet]=\"filterDate\"\n [ngTemplateOutletContext]=\"{col: col, control: filterSchema.dateTimeRange}\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <ng-container [ngSwitch]=\"col.dataType\">\n <ng-container *ngSwitchCase=\"'int'\">\n <ng-container [ngTemplateOutlet]=\"filterNumber\"\n [ngTemplateOutletContext]=\"{col: col}\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'intWithoutMask'\">\n <ng-container [ngTemplateOutlet]=\"filterNumber\"\n [ngTemplateOutletContext]=\"{col: col}\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'decimal'\">\n <ng-container [ngTemplateOutlet]=\"filterNumber\"\n [ngTemplateOutletContext]=\"{col: col}\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'currency'\">\n <ng-container [ngTemplateOutlet]=\"filterNumber\"\n [ngTemplateOutletContext]=\"{col: col}\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'date'\">\n <ng-container [ngTemplateOutlet]=\"filterDate\"\n [ngTemplateOutletContext]=\"{col: col, control: filterSchema.dateRange}\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'datetime'\">\n <ng-container [ngTemplateOutlet]=\"filterDate\"\n [ngTemplateOutletContext]=\"{col: col, control: filterSchema.dateTimeRange}\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'boolean'\">\n <ng-container [ngTemplateOutlet]=\"filterBoolean\"\n [ngTemplateOutletContext]=\"{col: col}\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <ng-container [ngTemplateOutlet]=\"filterText\"\n [ngTemplateOutletContext]=\"{col: col}\">\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </th>\n </ng-container>\n <th *ngIf=\"enableReorderRow\" style=\"width: 30px\">\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </th>\n <ng-container *ngTemplateOutlet=\"buttonBaseSetting\"></ng-container>\n </tr>\n</ng-template>\n<ng-template #buttonBaseSetting>\n <ng-container *ngIf=\"!setting.hiddenFunctionColumn\">\n <th class=\"center setting-cell column-function\" [class.sticky]=\"setting.stickyColumn\">\n <button *ngIf=\"!setting.hiddenSetting\" type=\"button\" pButton pRipple icon=\"pi pi-cog\"\n class=\"p-button-rounded p-button-text\" pTooltip=\"C\u1EA5u h\u00ECnh hi\u1EC3n th\u1ECB\" tooltipPosition=\"top\"\n (click)=\"showSettings()\"></button>\n <button *ngIf=\"!setting.hiddenSettingPermission\" type=\"button\" pButton pRipple icon=\"pi pi-users\"\n class=\"p-button-rounded p-button-text\" pTooltip=\"Ph\u00E2n quy\u1EC1n d\u1EEF li\u1EC7u\" tooltipPosition=\"left\"\n [disabled]=\"!checkPermissionToUseButton(BUTTON_PHAN_QUYEN)\" (click)=\"showSettingsPermission()\"></button>\n <button *ngIf=\"!setting.hiddenSettingWorkflow\" type=\"button\" pButton pRipple icon=\"pi pi-sitemap\"\n class=\"p-button-rounded p-button-text\" pTooltip=\"C\u1EA5u h\u00ECnh quy tr\u00ECnh\" tooltipPosition=\"left\"\n [disabled]=\"!checkPermissionToUseButton(BUTTON_CAU_HINH_QUY_TRINH)\"\n (click)=\"showSettingsWorkflowNew(dialogWfSettingNew)\"></button>\n <div *ngIf=\"setting.hiddenSetting && setting.hiddenSettingPermission && setting.hiddenSettingWorkflow\"\n class=\"cell-header-function\">\n <span>{{'GRID.FUNCTION'| translate}}</span>\n </div>\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </th>\n </ng-container>\n\n</ng-template>\n<ng-template #colFunctionHeader>\n <ng-container *ngIf=\"!setting.hiddenFunctionColumn\">\n <ng-container *ngIf=\"setting.hiddenFilterRow\">\n <ng-container *ngTemplateOutlet=\"buttonBaseSetting\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!setting.hiddenFilterRow\">\n <th class=\"column-function\" [class.sticky]=\"setting.stickyColumn\">\n <div class=\"cell-header-function\">\n <span>{{'GRID.FUNCTION'| translate}}</span>\n </div>\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </th>\n </ng-container>\n </ng-container>\n</ng-template>\n<ng-template #contentTh let-col>\n <ng-container *ngIf=\"templateHeaderContent[col.field]\">\n <ng-container *ngTemplateOutlet=\"templateHeaderContent[col.field]\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!templateHeaderContent[col.field]\">\n {{col.label}}\n </ng-container>\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n</ng-template>\n<ng-template #trBody let-rowData let-columns=\"columns\" let-index=\"index\" let-expanded=\"expanded\"\n let-eventSelectRow=\"eventSelectRow\" let-eventChecked=\"eventChecked\">\n <tr *ngIf=\"!rowData.template\" [tnReorderableRow]=\"index\" [attr.rowIndex]=\"index\" [ngClass]=\"rowData.objStyleClass\"\n [class.ui-state-highlight]=\"rowData._checked\" [pTooltip]=\"rowData.tooltip\" tooltipPosition=\"top\"\n [tooltipStyleClass]=\"rowData.tooltipClass\" [escape]=\"escape\" (click)=\"eventSelectRow($event, rowData)\">\n <ng-container *ngIf=\"!setting.hiddenCheckbox && !rowData.hidden[fieldCheckbox]\">\n <td class=\"chkbox link-or-action cell-checkbox\" [class.sticky]=\"setting.stickyColumn\"\n [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldCheckbox]\"\n [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldCheckbox]\">\n <ng-container *ngIf=\"!rowData.hiddenCheckBox\">\n <ng-container *ngIf=\"!hasTemplate('checkbox')\">\n <p-checkbox [(ngModel)]=\"rowData._checked\" binary=\"true\" (onChange)=\"eventChecked(rowData)\">\n </p-checkbox>\n </ng-container>\n <ng-container *ngIf=\"hasTemplate('checkbox')\">\n <ng-container [ngTemplateOutlet]=\"getTemplate('checkbox')\"\n [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"></ng-container>\n </ng-container>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </td>\n </ng-container>\n <td *ngIf=\"!setting.hiddenOrderColumn && !rowData.hidden[fieldOrder]\" class=\"stt\" style=\"text-align: center;\"\n [class.sticky]=\"setting.stickyColumn\" [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldOrder]\"\n [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldOrder]\">\n <span class=\"row-card\" [ngStyle]=\"rowData.bookmarkStyle\"></span>\n {{rowData[fieldOrder]}}\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </td>\n <td *ngIf=\"rowExpansion && !rowData.hidden[fieldColExpand]\" class=\"no-padding center row-expansion-toggle\"\n [class.sticky]=\"setting.stickyColumn\" [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldColExpand]\"\n [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldColExpand]\">\n <ng-container *ngTemplateOutlet=\"iconToggleRowData; context: {rowData: rowData, expanded: expanded}\">\n </ng-container>\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </td>\n <ng-container *ngIf=\"!hasTemplate('dynamicColBodys')\">\n <ng-container *ngIf=\"hasTemplate('dynamicColBodysBefore')\">\n <ng-container [ngTemplateOutlet]=\"getTemplate('dynamicColBodysBefore')\"\n [ngTemplateOutletContext]=\"{$implicit: columns, rowData: rowData, index: index, expanded: expanded}\">\n </ng-container>\n </ng-container>\n <ng-container\n *ngTemplateOutlet=\"dynamicColBodys; context: {$implicit: columns, rowData: rowData, index: index, expanded: expanded}\">\n </ng-container>\n <ng-container *ngIf=\"hasTemplate('dynamicColBodysAfter')\">\n <ng-container [ngTemplateOutlet]=\"getTemplate('dynamicColBodysAfter')\"\n [ngTemplateOutletContext]=\"{$implicit: columns, rowData: rowData, index: index, expanded: expanded}\">\n </ng-container>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"hasTemplate('dynamicColBodys')\">\n <ng-container [ngTemplateOutlet]=\"getTemplate('dynamicColBodys')\"\n [ngTemplateOutletContext]=\"{$implicit: columns, rowData: rowData, index: index, expanded: expanded}\">\n </ng-container>\n </ng-container>\n <td *ngIf=\"enableReorderRow && !rowData.hidden[fieldColReorder]\" class=\"no-padding center\"\n [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldColReorder]\"\n [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldColReorder]\">\n <i class=\"fas fa-arrows-alt\" style=\"cursor:pointer; padding: 8px; color: #555;\" pReorderableRowHandle></i>\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </td>\n <ng-container *ngIf=\"!setting.hiddenFunctionColumn && !rowData.hidden[fieldFunction]\">\n <td class=\"text-center column-function\" style=\"text-align: center;\" [class.sticky]=\"setting.stickyColumn\"\n [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldFunction]\"\n [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldFunction]\">\n <div *ngIf=\"hasTemplate('function')\" class=\"p-toolbar-group-center button-group\">\n <ng-container [ngTemplateOutlet]=\"getTemplate('function')\"\n [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"></ng-container>\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </div>\n <div *ngIf=\"!hasTemplate('function')\" class=\"p-toolbar-group-center button-group\">\n <ng-container [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"\n [ngTemplateOutlet]=\"getTemplate('buttonBefore')\"></ng-container>\n <button *ngIf=\"setting.showVersionButton\" type=\"button\" pButton pRipple icon=\"pi pi-calendar\"\n class=\"p-button-rounded p-button-text p-button-success link-or-action\"\n pTooltip=\"Xem l\u1ECBch s\u1EED phi\u00EAn b\u1EA3n\" tooltipPosition=\"top\"\n (click)=\"showListVersion(rowData)\"></button>\n <button #buttonBase *ngIf=\"!rowData.hiddenEdit\" appAuthorize type=\"button\" pButton pRipple\n [disabled]=\"disableEdit(rowData)\" [suffixAuthorizeCode]=\"setting.suffixAuthorizeCode\"\n pTooltip=\"S\u1EEDa\" tooltipPosition=\"top\"\n class=\"p-button-rounded p-button-text p-button-info link-or-action\" icon=\"pi pi-pencil\"\n (click)=\"edit(rowData)\"></button>\n <button #buttonBase *ngIf=\"!rowData.hiddenDelete\" appAuthorize type=\"button\" pButton pRipple\n [disabled]=\"disableDelete(rowData)\" [suffixAuthorizeCode]=\"setting.suffixAuthorizeCode\"\n pTooltip=\"X\u00F3a\" tooltipPosition=\"top\"\n class=\"p-button-rounded p-button-text p-button-danger link-or-action\" icon=\"pi pi-trash\"\n (click)=\"delete(rowData)\"></button>\n <ng-container *ngIf=\"!hiddenBtnFunction\">\n <button *ngIf=\"showMenuButtons && menuButtons\" type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\n class=\"link-or-action p-button-text p-button-info p-button-rounded\"\n pTooltip=\"Ch\u1EE9c n\u0103ng kh\u00E1c\" tooltipPosition=\"top\" [disabled]=\"rowData.disableFunctionRow\"\n (click)=\"showContextMenu($event, rowData)\"></button>\n </ng-container>\n <ng-container [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"\n [ngTemplateOutlet]=\"getTemplate('buttonAfter')\"></ng-container>\n </div>\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </td>\n </ng-container>\n </tr>\n <ng-container *ngIf=\"rowData.template\">\n <ng-container *ngTemplateOutlet=\"rowData.template; context: {\n $implicit: rowData, columns: columns, index: index, expanded: expanded, eventSelectRow: eventSelectRow, eventChecked: eventChecked\n }\"></ng-container>\n </ng-container>\n</ng-template>\n<ng-template #dynamicColBodys let-columns let-rowData=\"rowData\" let-index=\"index\" let-expanded=\"expanded\">\n <ng-container *ngFor=\"let col of columns; let i = index\">\n <ng-container\n *ngTemplateOutlet=\"contentTd; context: {$implicit: rowData, col: col, index: index, i: i, expanded: expanded}\">\n </ng-container>\n </ng-container>\n</ng-template>\n<ng-template #contentTd let-rowData let-col=\"col\" let-index=\"index\" let-expanded=\"expanded\" let-i=\"i\">\n <td *ngIf=\"col && col.visible && col.field != 'function' && !rowData.hidden[col.field]\"\n [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[col.field]\"\n [style.left]=\"col.isPinned && col.left ? (col.left + 'px') : ''\"\n [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[col.field]\" [ngStyle]=\"col.extendData.style\"\n [class]=\"col.cellClass\" [class.first-td]=\"i == 0\">\n <span *ngIf=\"col.pipe\">\n <span class=\"p-column-title\" [pTooltip]=\"col.fullLabel\" [escape]=\"false\"\n tooltipPosition=\"top\">{{col.label}}</span>\n {{rowData['pipe__' + col.field]}}\n </span>\n <span *ngIf=\"!col.pipe\" class=\"contentTd\" [ngClass]=\"{'limit-line': setting.isLimitNumberOfLine}\">\n <span class=\"p-column-title\" [pTooltip]=\"col.fullLabel\" [escape]=\"false\"\n tooltipPosition=\"top\">{{col.label}}</span>\n <span *ngIf=\"setting.showEditLink && col.showEditLink\" [pTooltip]=\"config.tooltipView\" tooltipPosition=\"top\"\n class=\"link-or-action\">\n <ng-container *ngIf=\"col.click\">\n <a href=\"javascript:;\" (click)=\"col.click(rowData)\" [pTooltip]=\"config.tooltipView\"\n tooltipPosition=\"top\">\n <ng-container [ngTemplateOutlet]=\"contentCell\"\n [ngTemplateOutletContext]=\"getContextCell(rowData, index, col, expanded, this)\">\n </ng-container>\n </a>\n </ng-container>\n <ng-container *ngIf=\"!col.click\">\n <a href=\"javascript:;\" (click)=\"view(rowData)\" [pTooltip]=\"config.tooltipView\"\n tooltipPosition=\"top\">\n <ng-container [ngTemplateOutlet]=\"contentCell\"\n [ngTemplateOutletContext]=\"getContextCell(rowData, index, col, expanded, this)\">\n </ng-container>\n </a>\n </ng-container>\n </span>\n <span *ngIf=\"!setting.showEditLink || !col.showEditLink\" class=\"\">\n <ng-container [ngTemplateOutlet]=\"contentCell\"\n [ngTemplateOutletContext]=\"getContextCell(rowData, index, col, expanded, this)\">\n </ng-container>\n </span>\n </span>\n <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n </td>\n</ng-template>\n<ng-template #contentCell let-col=\"col\" let-rowData=\"rowData\" let-rowIndex=\"rowIndex\" let-field=\"field\"\n let-expanded=\"expanded\">\n <ng-container *ngIf=\"col.template\">\n <ng-container [ngTemplateOutlet]=\"col.template\"\n [ngTemplateOutletContext]=\"getContextCell(rowData, rowIndex, col, expanded,this)\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!col.template\">\n <ng-container [ngSwitch]=\"col.dataType\">\n <span *ngSwitchCase=\"'color'\" style=\"display:block;text-align:center;\">\n <div [pTooltip]=\"rowData[field]\" tooltipPosition=\"top\" [ngStyle]=\"{'background-color':rowData[field]}\"\n style=\"width:30px;height:30px;margin:0 auto;\"></div>\n </span>\n <span *ngSwitchCase=\"'icon'\" style=\"display:block;text-align:center;\">\n <i [pTooltip]=\"rowData[field]\" tooltipPosition=\"top\" style=\"text-align: center;\"\n [ngClass]=\"rowData[field]\"></i>\n </span>\n <span *ngSwitchCase=\"'date'\" [pTooltip]=\"rowData[field] | date:'dd/MM/yyyy'\" tooltipPosition=\"top\">\n {{rowData[field] | tnDate:col.dataType:col.format}}\n </span>\n <span *ngSwitchCase=\"'datetime'\" [pTooltip]=\"rowData[field] | date:'dd/MM/yyyy HH:mm'\"\n tooltipPosition=\"top\">\n {{rowData[field] | tnDate:col.dataType:col.format}}\n </span>\n <span *ngSwitchCase=\"'timespan'\">\n {{rowData[field] | tnDate:col.dataType:col.format}}\n </span>\n <span *ngSwitchCase=\"'int'\">\n {{rowData[field] | number}}\n </span>\n <span *ngSwitchCase=\"'intWithoutMask'\">\n {{rowData[field]}}\n </span>\n <span *ngSwitchCase=\"'currency'\">\n {{rowData[field] | currency:\"VND\"}}\n </span>\n <span *ngSwitchCase=\"'decimal'\">\n {{rowData[field] | number}}\n </span>\n <span *ngSwitchCase=\"'boolean'\">\n <p-checkbox class=\"boolean-data-type\" [(ngModel)]=\"rowData[field]\" binary=\"true\"\n [disabled]=\"col.disableCheckBox\">\n </p-checkbox>\n </span>\n <span *ngSwitchCase=\"'html'\">\n <div *ngIf=\"rowData[field]==null?'':rowData[field]\" [innerHTML]=\"rowData[field] | safeHtml\"></div>\n </span>\n <span *ngSwitchCase=\"'metadataStatus'\">\n <span *ngIf=\"rowData['rejectReason']\" class=\"label-danger\" [pTooltip]=\"rowData['rejectReason']\"\n tooltipStyleClass=\"unset-width\" [escape]=\"false\" tooltipPosition=\"top\">T\u1EEB ch\u1ED1i</span>\n <span *ngIf=\"rowData[field] == '0' && !rowData['rejectReason']\" class=\"label-secondary\">Ch\u01B0a\n duy\u1EC7t</span>\n <span *ngIf=\"rowData[field] == '1' && !rowData['rejectReason']\" class=\"label-warning\">Ch\u1EDD duy\u1EC7t</span>\n <span *ngIf=\"rowData[field] == '2'\" class=\"label-primary\">\u0110\u00E3 duy\u1EC7t</span>\n </span>\n <ng-container *ngSwitchCase=\"'fileUpload'\">\n <ng-container\n *ngTemplateOutlet=\"fileUploadColumn; context: {$implicit: rowData, field: col.field, fileSetting: col.fileSetting}\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'fileManager'\">\n <ng-container\n *ngTemplateOutlet=\"fileManagerColumn; context: {$implicit: rowData, field: col.field, fileSetting: col.fileSetting}\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'string'\">\n <ng-container *ngTemplateOutlet=\"contentCellString; context: {$implicit: rowData, field: col.field}\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"null\">\n <ng-container *ngTemplateOutlet=\"contentCellString; context: {$implicit: rowData, field: col.field}\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <ng-container [ngTemplateOutlet]=\"getComponentByType(col.dataType)\"\n [ngTemplateOutletContext]=\"getContextCell(rowData, rowIndex, col, expanded, this)\">\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n</ng-template>\n<ng-template #contentCellString let-rowData let-field=\"field\">\n <span>\n <!-- __sv: Short Value -->\n <ng-container *ngIf=\"rowData[field + '__sv']\">\n <ng-container *ngIf=\"!rowData[field + '__showFull']\">\n {{rowData[field + '__sv']}}\n <span class=\"toggle-showfull\" (click)=\"toggleShowFull(rowData, field)\" pTooltip=\"B\u1EA5m \u0111\u1EC3 xem th\u00EAm\"\n tooltipPosition=\"top\">[...]</span>\n </ng-container>\n <ng-container *ngIf=\"rowData[field + '__showFull']\">\n {{rowData[field]}}\n <span class=\"toggle-showfull\" (click)=\"toggleShowFull(rowData, field)\">Thu g\u1ECDn</span>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!rowData[field + '__sv']\">\n {{rowData[field]}}\n </ng-container>\n </span>\n</ng-template>\n<ng-template #iconToggleRowGroup let-rowData=\"rowData\" let-expanded=\"expanded\">\n <a href=\"javascript:;\" (click)=\"handleToggleRow(rowData, $event)\">\n <i style=\"margin-right:5px\" [ngClass]=\"expanded ? 'fas fa-fw fa-caret-down' : 'fas fa-fw fa-caret-right'\"></i>\n </a>\n</ng-template>\n<ng-template #iconToggleRowData let-rowData=\"rowData\" let-expanded=\"expanded\">\n <button type=\"button\" pButton pRipple class=\"link-or-action p-button-text p-button-rounded p-button-plain\"\n [icon]=\"expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"\n (click)=\"handleToggleRow(rowData, $event)\"></button>\n</ng-template>\n<ng-template #_contentRowGroup let-rowData=\"rowData\" let-groupCol=\"groupCol\" let-groupField=\"_groupField\">\n <ng-container [ngTemplateOutlet]=\"contentCell\"\n [ngTemplateOutletContext]=\"{rowData: rowData, col: groupCol, field: _groupField}\">\n </ng-container>\n <span *ngIf=\"setting.columnSetting.showGroupSize\">\n ({{rowGroupMetadata[rowData[_groupField]].size}})</span>\n</ng-template>\n<ng-template #trangThaiV5 let-rowData=\"rowData\">\n <div class=\"container-text-workflow\">\n <button *ngIf=\"!rowData.__workflowCode && !rowData.hiddenWorkflowAction && !rowData.hiddenStartWorkflow\" pButton\n class=\"p-button-text link-or-action\" label=\"B\u1EAFt \u0111\u1EA7u\" style=\"border: 1px solid #7ca9cd;\"\n pTooltip=\"B\u1EAFt \u0111\u1EA7u ch\u1EA1y quy tr\u00ECnh\" tooltipPosition=\"top\"\n [disabled]=\"rowData.__startingWorkflow && !rowData.__notReadyForStart\"\n (click)=\"showFormStartWorkflow(rowData, dialogstartWorkflow)\"></button>\n <ng-container *ngIf=\"rowData.__workflowCode\">\n <span class=\"content\">{{rowData.__textTrangThai}}</span>\n <button *ngIf=\"!rowData.hiddenWorkflowAction\" type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\n class=\"link-or-action p-button-text p-button-rounded\" pTooltip=\"H\u00E0nh \u0111\u1ED9ng\" tooltipPosition=\"top\"\n [disabled]=\"showingActionWorkflow\"\n (click)=\"showActionWorkflow($event, rowData, dialogProcessWorkflowForm, dialogDetailTask, dialogChoYKienForm)\"></button>\n </ng-container>\n </div>\n</ng-template>\n<ng-template #viewHistory let-rowData=\"rowData\">\n <button pButton icon=\"pi pi-calendar\" class=\"p-button-text p-button-rounded link-or-action\" pTooltip=\"Xem l\u1ECBch s\u1EED\"\n tooltipPosition=\"top\" (click)=\"viewHistoryWorkflow(setting, rowData)\"></button>\n</ng-template>\n<ng-template #containerSticky>\n <span class=\"fix-sticky top\"></span>\n <span class=\"fix-sticky right\"></span>\n <!-- <span class=\"fix-sticky bottom\"></span> -->\n <span class=\"fix-sticky left\"></span>\n</ng-template>\n<ng-template #sortIcon let-field=\"field\">\n <i class=\"p-sortable-column-icon pi\" style=\"font-size: 0.8em;\"\n [ngClass]=\"{'pi-sort-amount-up-alt': field == _sortField && _sortDir === 1, 'pi-sort-amount-down': field == _sortField && _sortDir === -1, 'pi-sort-alt': field != _sortField || _sortDir === 0}\"></i>\n</ng-template>\n<ng-template #filterDropdown let-col=\"col\">\n <div #filterBox style=\"width: 100%; border-radius: 4px;\">\n <dropdown *ngIf=\"col && filterSchema.dropdown[col.field]\" [control]=\"filterSchema.dropdown[col.field]\"\n [dataSource]=\"filterSchema.dropdown[col.field].dataSource\" [(value)]=\"filterData[col.field]\"\n (onChanged)=\"prepareSearch(col)\" (onHideSmartEvent)=\"onSearch()\"\n (onShow)=\"onShowFilterDropdownPanel($event)\" (onHide)=\"onHideFilterDropdownPanel($event)\"\n (mousedown)=\"initFilterBoxFocus(filterBox)\"></dropdown>\n </div>\n</ng-template>\n<ng-template #filterText let-col=\"col\">\n <div #filterBox class=\"text-filter filter-box\" tabindex=\"-1\" (mousedown)=\"initFilterBoxFocus(filterBox)\">\n <div tabindex=\"-1\">\n <input pInputText type=\"text\" class=\"input-search\" [placeholder]=\"col.label\"\n [(ngModel)]=\"filterData[col.field]\" (change)=\"onSearch()\"\n (keyup.esc)=\"onClearSearch(filterBox, col.field)\">\n </div>\n <span [ngClass]=\"{'action-clear': true, 'dirty': filterData[col.field] != null && filterData[col.field] !== ''}\"\n [pTooltip]=\"'B\u1ECF filter'\" tooltipPosition=\"top\" (mousedown)=\"onClearSearch(filterBox, col.field)\"\n tabindex=\"-1\"><i class=\"pi pi-filter-slash\"></i></span>\n <after-view-checked style=\"display: none;\" (loaded)=\"initFilterBoxFocus(filterBox)\">\n </after-view-checked>\n </div>\n</ng-template>\n<ng-template #filterNumber let-col=\"col\">\n <div #filterBox class=\"number-picker-range filter-box\" tabindex=\"-1\" (mousedown)=\"initFilterBoxFocus(filterBox)\">\n <div tabindex=\"-1\">\n <tn-number-picker-range #numberRange [maskType]=\"col.dataType\" [(ngModel)]=\"filterData[col.field]\"\n [min]=\"col.min\" [max]=\"col.max\" [placeholder]=\"col.placeholder\" (change)=\"onSearch()\">\n </tn-number-picker-range>\n </div>\n <span\n [ngClass]=\"{'action-clear': true, 'dirty': filterData[col.field] && ((filterData[col.field][0] != null && filterData[col.field][0] !== '') || (filterData[col.field][1] != null && filterData[col.field][1] !== ''))}\"\n [pTooltip]=\"'B\u1ECF filter'\" tooltipPosition=\"top\" (mousedown)=\"onClearNumberSearch(filterBox, numberRange)\"\n tabindex=\"-1\">\n <i class=\"pi pi-filter-slash\"></i></span>\n <after-view-checked style=\"display: none;\" (loaded)=\"initFilterBoxFocus(filterBox)\">\n </after-view-checked>\n </div>\n</ng-template>\n<ng-template #filterDate let-col=\"col\" let-control=\"control\">\n <div #filterBox class=\"date-picker-range filter-box\" tabindex=\"-1\" (mousedown)=\"initFilterBoxFocus(filterBox)\">\n <div tabindex=\"-1\">\n <tn-datetime-picker-range #dateRange [control]=\"control\" (onChanged)=\"onChangeDateTime($event, col.field)\">\n </tn-datetime-picker-range>\n </div>\n <span\n [ngClass]=\"{'action-clear': true, 'dirty': filterData[col.field] && ((filterData[col.field][0] != null && filterData[col.field][0] !== '') || (filterData[col.field][1] != null && filterData[col.field][1] !== ''))}\"\n [pTooltip]=\"'B\u1ECF filter'\" tooltipPosition=\"top\"\n (mousedown)=\"onClearDateSearch(filterBox, dateRange, col.field)\" tabindex=\"-1\"><i\n class=\"pi pi-filter-slash\"></i></span>\n <after-view-checked style=\"display: none;\" (loaded)=\"initFilterBoxFocus(filterBox)\">\n </after-view-checked>\n </div>\n</ng-template>\n<ng-template #filterBoolean let-col=\"col\">\n <div class=\"filter-boolean-box\">\n <p-selectButton *ngIf=\"!col.minimizeFilter\"\n [options]=\"[{value: true, label: 'C\u00F3', icon: 'pi pi-check'}, {value: false, label: 'Kh\u00F4ng', icon: 'pi pi-times'}]\"\n [multiple]=\"true\" [(ngModel)]=\"filterData[col.field]\" (onChange)=\"onChangeBoolean($event, col.field)\">\n <ng-template let-item>\n <i style=\"padding: 3px 0;\" [class]=\"item.icon\"></i>\n </ng-template>\n </p-selectButton>\n <ng-container *ngIf=\"col.minimizeFilter\">\n <button *ngIf=\"!filterData[col.field]\" type=\"button\" pButton icon=\"pi pi-filter-slash\"\n class=\"btn-filter-boolean\" (click)=\"showCheckBoxFilterMenu($event, col.field)\"></button>\n <button *ngIf=\"filterData[col.field]\" type=\"button\" pButton icon=\"pi pi-filter\"\n class=\"btn-filter-boolean p-button-primary\"\n (click)=\"showCheckBoxFilterMenu($event, col.field)\"></button>\n </ng-container>\n </div>\n</ng-template>\n<ng-template #fileUploadColumn let-field=\"field\" let-rowData let-fileSetting=\"fileSetting\">\n <file-upload *ngIf=\"fileSetting.control.mode == FileUploadMode.usingFileInstanceId\"\n [sharedFolderType]=\"fileSetting.control.sharedFolderType\" [readonly]=\"fileSetting.control.readonly\"\n [accept]=\"fileSetting.control.accept\" [(ngModel)]=\"rowData[field]\"\n (onChanged)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.CHANGE)\"\n (onInit)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.INIT)\"\n (onSelect)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.SELECT)\"\n (onRemove)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.DELETED)\">\n </file-upload>\n\n <service-file-upload *ngIf=\"fileSetting.control.mode == FileUploadMode.usingServiceFile\"\n [serviceCode]=\"fileSetting.control.serviceCode\" [parentContext]=\"context\" [entity]=\"fileSetting.control.entity\"\n [entityKey]=\"rowData[fileSetting.control.entityKeyField]\" [control]=\"fileSetting.control\"\n [fileDataService]=\"fileSetting.control.fileDataService\" [(ngModel)]=\"rowData.field\"\n (onChanged)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.CHANGE)\"\n (onInit)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.INIT)\"\n (onSelect)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.SELECT)\"\n (onRemove)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.DELETED)\">\n </service-file-upload>\n</ng-template>\n<ng-template #fileManagerColumn let-rowData let-fileSetting=\"fileSetting\" let-field=\"field\">\n <file-manager [control]=\"fileSetting.control\" [serviceCode]=\"fileSetting.control.serviceCode\"\n [entity]=\"fileSetting.control.entity\" [entityKey]=\"rowData[fileSetting.control.entityKeyField]\"\n [readonly]=\"fileSetting.control.readonly\" [layout]=\"fileSetting.control.layout\"\n [fileDataService]=\"fileSetting.control.fileDataService\" [maxFileSize]=\"fileSetting.control.maxFileSize\"\n [inTaiLieu]=\"fileSetting.control.inTaiLieu\" [(value)]=\"rowData[field]\" [disabled]=\"fileSetting.control.disabled\"\n [noFileMessage]=\"fileSetting.control.noFileMessage\"\n (onChanged)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.CHANGE)\"\n (onInit)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.INIT)\"\n (onSelect)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.SELECT)\"\n (onRemove)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.DELETED)\"\n (uploaded)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.UPLOADED)\">\n </file-manager>\n</ng-template>",
22490
22523
  providers: [DecimalPipe, DatePipe],
22491
22524
  styles: [".container-table{display:flex;overflow:hidden;flex-direction:column}.container-table .container-table-inner{display:flex;position:relative;height:auto;max-height:100%;min-height:60px}.container-table-inner>tn-custom-scrollbar{width:100%}.cell-checkbox{text-align:center}.pick-color-row{top:0;left:0;right:0;bottom:0;margin:auto;position:absolute;display:flex;flex-wrap:wrap;width:1.4em;height:1.4em;border:1px solid #d1d1d1;border-radius:2px;cursor:pointer}.pick-color-row>div{flex:0 0 50%;background:#84d140;border:1px solid #fff}.pick-color-row>div:nth-child(2){background:#fc6868}.pick-color-row>div:nth-child(3){background:#fbc02d}.pick-color-row>div:nth-child(4){background:#7dc5ff}.cell-header-function{display:flex;align-items:center}.cell-header-function>span{text-align:center;flex:1 1}.cell-header-function button{width:24px;height:24px;padding:0;margin:0}.group-icon{font-weight:400;color:#256aa2}.group-icon i{font-size:.8em;margin-right:5px}.center{text-align:center!important}.row-card{position:absolute;left:0;top:0;width:5px;height:100%}.column-function{min-width:100px;padding:0}.custom-search-area{margin:-.5em -1em .5em;padding-left:.5em;padding-right:.5em;background-color:#f2f2f2}.main-title>h1{font-size:1.2em}.filter-row>th:not(.sticky):not(.chkbox){padding:3px!important}.container-text-workflow{display:flex;align-items:center;justify-content:center}.container-text-workflow .link-or-action{color:#2196f3;cursor:pointer}.container-text-workflow .content{flex:1 1}.btnReload{height:2rem!important;width:2rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.toggle-showfull{color:#00f;cursor:pointer;font-size:.8rem;white-space:nowrap;font-weight:700}.col-share-permission>div:not(:last-child){margin-bottom:5px}.advance-search-container{display:flex;justify-content:flex-end}.btn-filter-boolean{width:26px;height:26px}.btn-filter-boolean:not(.p-button-primary),.btn-filter-boolean:not(.p-button-primary):hover{background:#f5f6f8;color:#6c757d;border-color:#ced4da}::ng-deep crud-list advance-search{display:block;flex:1;max-width:400px}::ng-deep crud-list .ps__rail-x,::ng-deep crud-list .ps__rail-y{z-index:5}::ng-deep crud-list .main-title>*>h1{font-size:1.2em}::ng-deep crud-list .p-datatable .p-datatable-thead>tr>th.cell-fixed-filter{z-index:999}::ng-deep crud-list .p-datatable .p-datatable-thead>tr>th.cell-fixed-filter .fixed-filter{z-index:10;position:fixed;min-width:200px}::ng-deep crud-list .p-datatable .p-datatable-thead>tr>th .container-icon-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}::ng-deep crud-list .check-all-custom{position:absolute;width:0;height:0}::ng-deep crud-list .cell-header-filter{position:relative}::ng-deep crud-list .cell-header-filter .tn-dropdown{height:32px}::ng-deep crud-list .cell-header-filter tn-mask .p-inputtext{width:100%}::ng-deep crud-list .cell-header-filter .filter-box{display:flex;min-width:0;background-color:#fff;border-radius:3px}::ng-deep crud-list .cell-header-filter .filter-box>div{flex:1;border:1px solid #ced4da;border-right:none;border-radius:3px 0 0 3px;outline:none;overflow:hidden}::ng-deep crud-list .cell-header-filter .filter-box>span{cursor:pointer;min-width:unset;flex-basis:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;background:#f5f6f8;color:#6c757d;border:1px solid #ced4da;outline:none}::ng-deep crud-list .cell-header-filter .filter-box>span.action-clear{border-radius:0 3px 3px 0}::ng-deep crud-list .cell-header-filter .filter-box>span.action-clear.dirty{color:#008eff}::ng-deep crud-list .cell-header-filter .filter-box input{padding-left:5px;padding-right:5px;border:none;box-shadow:none!important}::ng-deep crud-list .cell-header-filter .filter-box:not(.no-transition){transition:min-width .1s}::ng-deep crud-list .cell-header-filter .filter-box.boolean-filter>div{flex:0 0 109px;width:109px}::ng-deep crud-list .cell-header-filter .p-multiselect-label.p-placeholder{padding-left:.5rem;padding-right:.5rem}::ng-deep crud-list .cell-header-filter.focus-within,::ng-deep crud-list .cell-header-filter:focus-within{z-index:10!important}::ng-deep crud-list .cell-header-filter.focus-within .filter-boolean-box .p-button,::ng-deep crud-list .cell-header-filter:focus-within .filter-boolean-box .p-button{z-index:10}::ng-deep crud-list .cell-header-filter.focus-within .filter-box>div,::ng-deep crud-list .cell-header-filter:focus-within .filter-box>div{box-shadow:0 0 0 .2rem #a6d5fa;border-color:#2196f3;z-index:0}::ng-deep crud-list .cell-header-filter.focus-within .short-filter-box,::ng-deep crud-list .cell-header-filter:focus-within .short-filter-box{position:absolute;top:calc(50% - 16px);min-width:250px;z-index:2;box-shadow:5px 0 15px 1px rgba(0,0,0,.27058823529411763)}::ng-deep crud-list .cell-header-filter.focus-within .short-filter-box>div,::ng-deep crud-list .cell-header-filter:focus-within .short-filter-box>div{flex:1;box-shadow:0 0 0 .2rem #a6d5fa;border-color:#2196f3;z-index:0}::ng-deep crud-list .cell-header-filter.focus-within .short-filter-box>span.action-clear,::ng-deep crud-list .cell-header-filter:focus-within .short-filter-box>span.action-clear{display:flex}::ng-deep crud-list .cell-header-filter.focus-within .short-filter-box.boolean-filter,::ng-deep crud-list .cell-header-filter:focus-within .short-filter-box.boolean-filter{min-width:140px}::ng-deep crud-list .cell-header-filter.focus-within .short-filter-box.boolean-filter>div,::ng-deep crud-list .cell-header-filter:focus-within .short-filter-box.boolean-filter>div{flex:0 0 109px;width:109px}::ng-deep crud-list .cell-header-filter.focus-within:nth-last-child(2) .short-filter-box,::ng-deep crud-list .cell-header-filter:focus-within:nth-last-child(2) .short-filter-box{left:50%;transform:translateX(-50%)}::ng-deep crud-list .cell-header-filter:last-child .filter-box{right:3px}::ng-deep crud-list .table-border-line{position:absolute;z-index:5;background-color:#eee}::ng-deep crud-list .table-border-line.--left,::ng-deep crud-list .table-border-line.--right{top:0;bottom:0;width:1px}::ng-deep crud-list .table-border-line.--bottom,::ng-deep crud-list .table-border-line.--top{left:0;right:0;height:1px}::ng-deep crud-list .table-border-line.--left{left:0}::ng-deep crud-list .table-border-line.--right{right:0}::ng-deep crud-list .table-border-line.--top{top:0}::ng-deep crud-list .table-border-line.--bottom{bottom:0}::ng-deep crud-list .filter-boolean-box{text-align:center}::ng-deep crud-list .filter-boolean-box .p-selectbutton{white-space:nowrap}::ng-deep crud-list .custom-search-area crud-form{width:100%}::ng-deep crud-list .custom-search-area .main-container-search-inner .container-control{overflow:hidden;padding-bottom:0}::ng-deep crud-list>p-contextmenu{display:none}::ng-deep crud-list .contentTd.limit-line{overflow:hidden;display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical}@media (max-width:640px){::ng-deep crud-list .--table-responsive .p-datatable-wrapper{padding:1px}}"]
22492
22525
  },] }
@@ -22835,6 +22868,7 @@ class ListBase extends ComponentBaseWithButton {
22835
22868
  const beforeValue = this.crudList;
22836
22869
  if (content) {
22837
22870
  this.crudList = content;
22871
+ this.crudList.plusUrl = this.plusUrl;
22838
22872
  if (!beforeValue) {
22839
22873
  this.countReady++;
22840
22874
  this.setDefaultValueFilter();
@@ -23065,6 +23099,7 @@ class ListBase extends ComponentBaseWithButton {
23065
23099
  gridInfo.fields = fields.join(',');
23066
23100
  }
23067
23101
  const resultModify = yield this.modifyGridInfo(gridInfo);
23102
+ this.crudList.currentGridInfo = gridInfo;
23068
23103
  if (this.useDefaltSort && gridInfo.sorts.length == 0) {
23069
23104
  gridInfo.sorts.unshift(this.newSort(this.defaultSortField, this.defaultSortDir));
23070
23105
  }