@brggroup/share-lib 0.1.59 → 0.1.61

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 (21) hide show
  1. package/fesm2022/brggroup-share-lib.mjs +119 -917
  2. package/fesm2022/brggroup-share-lib.mjs.map +1 -1
  3. package/lib/admin/component/index.d.ts +0 -3
  4. package/lib/admin/component/index.d.ts.map +1 -1
  5. package/lib/components/wf-editor/workflow-editor.component.d.ts +5 -1
  6. package/lib/components/wf-editor/workflow-editor.component.d.ts.map +1 -1
  7. package/package.json +1 -1
  8. package/lib/admin/component/mail-template/App_MailTemplate.model.d.ts +0 -25
  9. package/lib/admin/component/mail-template/App_MailTemplate.model.d.ts.map +0 -1
  10. package/lib/admin/component/mail-template/App_MailTemplate.service.d.ts +0 -25
  11. package/lib/admin/component/mail-template/App_MailTemplate.service.d.ts.map +0 -1
  12. package/lib/admin/component/mail-template/detail/mail-template-detail.d.ts +0 -48
  13. package/lib/admin/component/mail-template/detail/mail-template-detail.d.ts.map +0 -1
  14. package/lib/admin/component/mail-template/list/mail-template-list.d.ts +0 -52
  15. package/lib/admin/component/mail-template/list/mail-template-list.d.ts.map +0 -1
  16. package/lib/admin/component/mail-template/mail-send-setting-detail/mail-send-setting-detail.d.ts +0 -28
  17. package/lib/admin/component/mail-template/mail-send-setting-detail/mail-send-setting-detail.d.ts.map +0 -1
  18. package/lib/admin/component/mail-template/mail-send-setting.model.d.ts +0 -23
  19. package/lib/admin/component/mail-template/mail-send-setting.model.d.ts.map +0 -1
  20. package/lib/admin/component/mail-template/mail-send-setting.service.d.ts +0 -13
  21. package/lib/admin/component/mail-template/mail-send-setting.service.d.ts.map +0 -1
package/fesm2022/brggroup-share-lib.mjs CHANGED
@@ -71,36 +71,32 @@ import * as i5$4 from 'ng-zorro-antd/dropdown';
71
71
  import { NzDropDownModule, NzContextMenuService } from 'ng-zorro-antd/dropdown';
72
72
  import * as i1$6 from 'ng-zorro-antd/upload';
73
73
  import { NzUploadModule } from 'ng-zorro-antd/upload';
74
- import * as i12 from 'ng-zorro-antd/popconfirm';
74
+ import * as i9$1 from 'ng-zorro-antd/popconfirm';
75
75
  import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
76
76
  import * as i3$4 from 'ng-zorro-antd/tree-select';
77
77
  import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
78
- import * as i17 from 'ng-zorro-antd/empty';
78
+ import * as i5$5 from 'ng-zorro-antd/empty';
79
79
  import { NzEmptyModule } from 'ng-zorro-antd/empty';
80
80
  import * as i16 from 'ng-zorro-antd/alert';
81
81
  import { NzAlertModule, NzAlertComponent } from 'ng-zorro-antd/alert';
82
82
  import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
83
83
  import * as i1$7 from 'ng-zorro-antd/tabs';
84
84
  import { NzTabsModule } from 'ng-zorro-antd/tabs';
85
- import * as i12$1 from '@angular/cdk/clipboard';
85
+ import * as i12 from '@angular/cdk/clipboard';
86
86
  import { ClipboardModule } from '@angular/cdk/clipboard';
87
87
  import * as i6$2 from 'ng-zorro-antd/tree';
88
88
  import { NzTreeModule, NzTreeNode } from 'ng-zorro-antd/tree';
89
89
  import * as signalR from '@microsoft/signalr';
90
90
  import { HubConnectionState } from '@microsoft/signalr';
91
91
  import * as i4$2 from 'ng-zorro-antd/menu';
92
- import * as i12$2 from 'ng-zorro-antd/color-picker';
92
+ import * as i12$1 from 'ng-zorro-antd/color-picker';
93
93
  import { NzColorPickerModule } from 'ng-zorro-antd/color-picker';
94
- import { DomSanitizer, Title } from '@angular/platform-browser';
95
- import * as i16$2 from '@kolkov/angular-editor';
96
- import { AngularEditorModule } from '@kolkov/angular-editor';
97
- import * as i21 from '@materia-ui/ngx-monaco-editor';
98
- import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';
99
94
  import * as i2$3 from 'ng-zorro-antd/progress';
100
95
  import { NzProgressModule } from 'ng-zorro-antd/progress';
101
96
  import * as XLSX from 'xlsx';
102
97
  import * as i2$4 from 'ng-zorro-antd/layout';
103
98
  import { NzLayoutModule } from 'ng-zorro-antd/layout';
99
+ import { Title } from '@angular/platform-browser';
104
100
  import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
105
101
  import { NzBackTopModule } from 'ng-zorro-antd/back-top';
106
102
  import * as i14 from 'ng-zorro-antd/segmented';
@@ -626,7 +622,7 @@ class TokenStorage {
626
622
  }
627
623
  }
628
624
 
629
- const URLs$d = {
625
+ const URLs$c = {
630
626
  login: '/api/Auth/Login',
631
627
  register: '/api/Auth/Register',
632
628
  pingAuth: '/api/Auth/PingAuth',
@@ -695,7 +691,7 @@ class AuthService extends HTTPService {
695
691
  }
696
692
  }
697
693
  async sendSignIn(body) {
698
- return firstValueFrom(this.httpClient.post(AppGlobals.apiEndpoint + URLs$d.login, body, {
694
+ return firstValueFrom(this.httpClient.post(AppGlobals.apiEndpoint + URLs$c.login, body, {
699
695
  headers: new HttpHeaders().set('Content-Type', 'application/json').set('No-Loading-Mark', '1'),
700
696
  }));
701
697
  }
@@ -715,7 +711,7 @@ class AuthService extends HTTPService {
715
711
  ---------------------------------------- */
716
712
  async pingAuth() {
717
713
  try {
718
- const res = await this.get(AppGlobals.apiEndpoint + URLs$d.pingAuth, true);
714
+ const res = await this.get(AppGlobals.apiEndpoint + URLs$c.pingAuth, true);
719
715
  return res?.IsSuccess;
720
716
  }
721
717
  catch {
@@ -750,10 +746,10 @@ class AuthService extends HTTPService {
750
746
  PASSWORD
751
747
  ---------------------------------------- */
752
748
  changePassword(data) {
753
- return this.postData(AppGlobals.apiEndpoint + URLs$d.changePassword, data);
749
+ return this.postData(AppGlobals.apiEndpoint + URLs$c.changePassword, data);
754
750
  }
755
751
  setPass(data) {
756
- return this.postData(AppGlobals.apiEndpoint + URLs$d.setPass, data);
752
+ return this.postData(AppGlobals.apiEndpoint + URLs$c.setPass, data);
757
753
  }
758
754
  /* ----------------------------------------
759
755
  REGISTER
@@ -774,7 +770,7 @@ class AuthService extends HTTPService {
774
770
  }
775
771
  }
776
772
  async sendSignUp(d) {
777
- return this.postData(AppGlobals.apiEndpoint + URLs$d.register, d);
773
+ return this.postData(AppGlobals.apiEndpoint + URLs$c.register, d);
778
774
  }
779
775
  /* ----------------------------------------
780
776
  CHANGE ORG
@@ -796,7 +792,7 @@ class AuthService extends HTTPService {
796
792
  }
797
793
  async sendChangeOrg(App_Org_Id) {
798
794
  let params = new HttpParams().append('App_Org_Id', App_Org_Id);
799
- return this.postParams(AppGlobals.apiEndpoint + URLs$d.changeOrgLogin, params);
795
+ return this.postParams(AppGlobals.apiEndpoint + URLs$c.changeOrgLogin, params);
800
796
  }
801
797
  static pingInterVal;
802
798
  startPingAuth(intervalTime) {
@@ -3132,7 +3128,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
3132
3128
  }]
3133
3129
  }] });
3134
3130
 
3135
- const URLs$c = {
3131
+ const URLs$b = {
3136
3132
  getById: '/api/App_Dic_Domain/GetById',
3137
3133
  getAll: '/api/App_Dic_Domain/GetAll',
3138
3134
  getList: '/api/App_Dic_Domain/GetList',
@@ -3144,21 +3140,21 @@ const URLs$c = {
3144
3140
  class DicDomainService extends HTTPService {
3145
3141
  getById(id) {
3146
3142
  let pr = new HttpParams().append('id', id);
3147
- return this.postParams(AppGlobals.apiEndpoint + URLs$c.getById, pr);
3143
+ return this.postParams(AppGlobals.apiEndpoint + URLs$b.getById, pr);
3148
3144
  }
3149
3145
  getPaging(filter) {
3150
- return this.postData(AppGlobals.apiEndpoint + URLs$c.getPaging, filter);
3146
+ return this.postData(AppGlobals.apiEndpoint + URLs$b.getPaging, filter);
3151
3147
  }
3152
3148
  addOrEdit(obj) {
3153
- return this.postData(AppGlobals.apiEndpoint + URLs$c.addOrEdit, obj);
3149
+ return this.postData(AppGlobals.apiEndpoint + URLs$b.addOrEdit, obj);
3154
3150
  }
3155
3151
  delete(id) {
3156
3152
  const params = new HttpParams().append('id', id);
3157
- return this.postParams(AppGlobals.apiEndpoint + URLs$c.delete, params);
3153
+ return this.postParams(AppGlobals.apiEndpoint + URLs$b.delete, params);
3158
3154
  }
3159
3155
  async getByDomain(DomainCode) {
3160
3156
  var pr = new HttpParams().append('DomainCode', DomainCode);
3161
- const ret = await this.postParams(AppGlobals.apiEndpoint + URLs$c.getByDomain, pr);
3157
+ const ret = await this.postParams(AppGlobals.apiEndpoint + URLs$b.getByDomain, pr);
3162
3158
  return ret.Data;
3163
3159
  }
3164
3160
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DicDomainService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
@@ -4700,7 +4696,7 @@ class FileListComponent extends BaseComponent {
4700
4696
  }
4701
4697
  }
4702
4698
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: FileListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
4703
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: FileListComponent, isStandalone: true, selector: "app-file-list", usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n <div nz-col nzSpan=\"18\">\r\n <div nz-row [nzGutter]=\"[8, 0]\">\r\n <div nz-col>\r\n <button nz-button nzType=\"primary\" (click)=\"edit(null)\">{{ TranslateKey.ADD | translate }}</button>\r\n </div>\r\n <div nz-col>\r\n <button nz-button nzType=\"primary\" (click)=\"getData()\">{{ TranslateKey.SEARCH | translate }}</button>\r\n </div>\r\n <nz-upload\r\n [nzAction]=\"\r\n AppGlobals.apiEndpoint +\r\n '/api/file/UploadFile?SaveToDB=' +\r\n (SaveTo == 'DB' ? 'true' : 'false') +\r\n '&FileCode=' +\r\n FileCode\r\n \"\r\n (nzChange)=\"handleChange($event)\"\r\n >\r\n <button nz-button>\r\n <nz-icon nzType=\"upload\" />\r\n T\u1EA3i file\r\n </button>\r\n </nz-upload>\r\n <extend-select\r\n nz-col\r\n nzSpan=\"3\"\r\n [placeHolder]=\"'Save To'\"\r\n [lstItem]=\"[\r\n {\r\n Code: 'DB',\r\n Name: 'DB',\r\n },\r\n {\r\n Code: 'DISC',\r\n Name: 'DISC',\r\n },\r\n ]\"\r\n [valueField]=\"'Code'\"\r\n [displayField]=\"'Name'\"\r\n [(_ngModel)]=\"SaveTo\"\r\n ></extend-select>\r\n <div nz-col [nzSpan]=\"8\">\r\n <input nz-input placeholder=\"File Code\" [(ngModel)]=\"FileCode\" />\r\n </div>\r\n </div>\r\n </div>\r\n <div nz-col nzSpan=\"6\">\r\n <div nz-row nzJustify=\"end\">\r\n <nz-pagination\r\n [nzSize]=\"'small'\"\r\n [nzPageIndex]=\"filter.PageIndex + 1\"\r\n [nzPageSize]=\"filter.PageSize\"\r\n [nzTotal]=\"data?.TotalCount || 0\"\r\n [nzShowSizeChanger]=\"true\"\r\n [nzShowTotal]=\"showTotalTpl\"\r\n [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n >\r\n </nz-pagination>\r\n\r\n <ng-template #showTotalTpl let-total let-range=\"range\">\r\n {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n </ng-template>\r\n </div>\r\n </div>\r\n <div nz-col nzSpan=\"24\">\r\n <nz-table\r\n #table\r\n [nzData]=\"this.data?.LstItem || []\"\r\n [nzBordered]=\"true\"\r\n [nzSize]=\"'small'\"\r\n [nzShowSizeChanger]=\"true\"\r\n [nzFrontPagination]=\"false\"\r\n >\r\n <thead>\r\n <tr>\r\n @for (item of this.data?.LstHeader; track $index) {\r\n @if (item.Code == \"Code\") {\r\n <th [nzWidth]=\"item.Width\" nzCustomFilter>\r\n {{ item.Code }}\r\n <nz-filter-trigger\r\n [nzActive]=\"filter.Code ? true : false\"\r\n [nzDropdownMenu]=\"searchCodeMenu\"\r\n (nzVisibleChange)=\"isDropdownCodeVisible = $event\"\r\n >\r\n <nz-icon nzType=\"search\" />\r\n </nz-filter-trigger>\r\n </th>\r\n } @else {\r\n <th [nzWidth]=\"item.Width\">{{ item.Name }}</th>\r\n }\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (row of data?.LstItem; track $index; let i = $index) {\r\n @if (row != selectedItem) {\r\n <tr (click)=\"selectedItem = row\">\r\n @for (col of this.data?.LstHeader; track $index) {\r\n <td [class]=\"col.Class\" [nzBreakWord]=\"col.Class && col.Class.includes('BreakWord')\">\r\n @if (col.Code == \"NO\") {\r\n {{ i + 1 + filter.PageIndex * filter.PageSize }}\r\n } @else if (col.Code == \"ACTION\") {\r\n <!-- <i\r\n nz-icon\r\n nzType=\"download\"\r\n nzTheme=\"outline\"\r\n class=\"color-primary cursor-pointer icon-size-16\"\r\n (click)=\"download(row)\"\r\n ></i>\r\n &nbsp;\r\n <a\r\n nz-popconfirm\r\n [nzPopconfirmTitle]=\"TranslateKey.CONFIRM_DELETE | translate\"\r\n nzPopconfirmPlacement=\"top\"\r\n (nzOnConfirm)=\"delete(row)\"\r\n (click)=\"$event.stopPropagation()\"\r\n nzOkDanger\r\n >\r\n <i nz-icon nzType=\"delete\" nzTheme=\"outline\" class=\"color-warn cursor-pointer icon-size-16\"></i>\r\n </a> -->\r\n } @else {\r\n @if (col.Type == \"CHECKBOX\") {\r\n @if (row[col.Code]) {\r\n <nz-icon nzType=\"check-circle\" nzTheme=\"outline\" class=\"color-primary\" />\r\n } @else {\r\n <nz-icon nzType=\"close\" nzTheme=\"outline\" class=\"color-warn\" />\r\n }\r\n } @else {\r\n {{ row[col.Code] }}\r\n }\r\n }\r\n </td>\r\n }\r\n </tr>\r\n } @else {\r\n <tr>\r\n @for (col of this.data?.LstHeader; track $index) {\r\n <td [class]=\"col.Class\" [nzBreakWord]=\"col.Class && col.Class.includes('BreakWord')\">\r\n @if (col.Code == \"NO\") {\r\n {{ i + 1 + filter.PageIndex * filter.PageSize }}\r\n } @else if (col.Code == \"ACTION\") {\r\n <i\r\n *ngIf=\"row.IsContentOnly\"\r\n nz-tooltip=\"Move to disk\"\r\n nz-icon\r\n nzType=\"file\"\r\n nzTheme=\"outline\"\r\n class=\"color-primary cursor-pointer icon-size-16\"\r\n (click)=\"moveFileToDisk(row)\"\r\n ></i>\r\n <box [width]=\"5\"></box>\r\n <i\r\n nz-icon\r\n nzType=\"save\"\r\n nzTheme=\"outline\"\r\n class=\"color-primary cursor-pointer icon-size-16\"\r\n (click)=\"save(row)\"\r\n ></i>\r\n <box [width]=\"5\"></box>\r\n <i\r\n nz-icon\r\n nzType=\"download\"\r\n nzTheme=\"outline\"\r\n class=\"color-primary cursor-pointer icon-size-16\"\r\n (click)=\"download(row)\"\r\n ></i>\r\n <box [width]=\"5\"></box>\r\n <a\r\n nz-popconfirm\r\n [nzPopconfirmTitle]=\"TranslateKey.CONFIRM_DELETE | translate\"\r\n nzPopconfirmPlacement=\"top\"\r\n (nzOnConfirm)=\"delete(row)\"\r\n nzOkDanger\r\n >\r\n <i nz-icon nzType=\"delete\" nzTheme=\"outline\" class=\"color-warn cursor-pointer icon-size-16\"></i>\r\n </a>\r\n } @else if (col.Code == \"Code\") {\r\n <extend-input [size]=\"'small'\" [(_ngModel)]=\"row.Code\"></extend-input>\r\n } @else if (col.Code == \"IsTemp\") {\r\n <extend-checkbox [(_ngModel)]=\"row.IsTemp\"></extend-checkbox>\r\n } @else if (col.Code == \"FileName\") {\r\n <extend-input [size]=\"'small'\" [(_ngModel)]=\"row.FileName\"></extend-input>\r\n } @else {\r\n @if (col.Type == \"CHECKBOX\") {\r\n @if (row[col.Code]) {\r\n <nz-icon nzType=\"check-circle\" nzTheme=\"outline\" class=\"color-primary\" />\r\n } @else {\r\n <nz-icon nzType=\"close\" nzTheme=\"outline\" class=\"color-warn\" />\r\n }\r\n } @else {\r\n {{ row[col.Code] }}\r\n }\r\n }\r\n </td>\r\n }\r\n </tr>\r\n }\r\n }\r\n </tbody>\r\n </nz-table>\r\n </div>\r\n</div>\r\n\r\n<nz-dropdown-menu #searchCodeMenu=\"nzDropdownMenu\">\r\n <div class=\"ant-table-filter-dropdown\">\r\n <div class=\"search-box\">\r\n <input\r\n type=\"text\"\r\n nz-input\r\n [(ngModel)]=\"filter.Code\"\r\n [appAutoFocus]=\"isDropdownCodeVisible\"\r\n (keyup.enter)=\"search()\"\r\n />\r\n <button nz-button nzSize=\"small\" nzType=\"primary\" (click)=\"search()\" class=\"search-button\">\r\n {{ \"SEARCH\" | translate }}\r\n </button>\r\n <button nz-button nzSize=\"small\" (click)=\"filter.Code = ''; search()\">{{ \"RESET\" | translate }}</button>\r\n </div>\r\n </div>\r\n</nz-dropdown-menu>\r\n", dependencies: [{ kind: "ngmodule", type: NzUploadModule }, { kind: "component", type: i1$6.NzUploadComponent, selector: "nz-upload", inputs: ["nzType", "nzLimit", "nzSize", "nzFileType", "nzAccept", "nzAction", "nzDirectory", "nzOpenFileDialogOnClick", "nzBeforeUpload", "nzCustomRequest", "nzData", "nzFilter", "nzFileList", "nzDisabled", "nzHeaders", "nzListType", "nzMultiple", "nzName", "nzShowUploadList", "nzShowButton", "nzWithCredentials", "nzRemove", "nzPreview", "nzPreviewFile", "nzPreviewIsImage", "nzTransformFile", "nzDownload", "nzIconRender", "nzFileListRender"], outputs: ["nzChange", "nzFileListChange"], exportAs: ["nzUpload"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "component", type: ExtendSelectComponent, selector: "extend-select", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "dropdownMatchSelectWidth", "labelSpan", "labelFlex", "disabled", "required", "noBottom", "multiple", "showSelectAll", "maxTagCount", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "lstItem", "displayField", "displayFields", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "itemChange", "onFocus"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzPaginationModule }, { kind: "component", type: i5$3.NzPaginationComponent, selector: "nz-pagination", inputs: ["nzShowTotal", "nzItemRender", "nzSize", "nzPageSizeOptions", "nzShowSizeChanger", "nzShowQuickJumper", "nzSimple", "nzDisabled", "nzResponsive", "nzHideOnSinglePage", "nzTotal", "nzPageIndex", "nzPageSize"], outputs: ["nzPageSizeChange", "nzPageIndexChange"], exportAs: ["nzPagination"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i6$1.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "component", type: i6$1.NzThAddOnComponent, selector: "th[nzColumnKey], th[nzSortFn], th[nzSortOrder], th[nzFilters], th[nzShowSort], th[nzShowFilter], th[nzCustomFilter]", inputs: ["nzColumnKey", "nzFilterMultiple", "nzSortOrder", "nzSortPriority", "nzSortDirections", "nzFilters", "nzSortFn", "nzFilterFn", "nzShowSort", "nzShowFilter", "nzCustomFilter"], outputs: ["nzCheckedChange", "nzSortOrderChange", "nzFilterChange"] }, { kind: "directive", type: i6$1.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$1.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$1.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$1.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$1.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "component", type: i6$1.NzFilterTriggerComponent, selector: "nz-filter-trigger", inputs: ["nzActive", "nzDropdownMenu", "nzVisible", "nzBackdrop"], outputs: ["nzVisibleChange"], exportAs: ["nzFilterTrigger"] }, { kind: "directive", type: i6$1.NzCellBreakWordDirective, selector: "th[nzBreakWord],td[nzBreakWord]", inputs: ["nzBreakWord"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { kind: "ngmodule", type: NzPopconfirmModule }, { kind: "directive", type: i12.NzPopconfirmDirective, selector: "[nz-popconfirm]", inputs: ["nzPopconfirmArrowPointAtCenter", "nzPopconfirmTitle", "nzPopconfirmTitleContext", "nz-popconfirm", "nzPopconfirmTrigger", "nzPopconfirmPlacement", "nzPopconfirmOrigin", "nzPopconfirmMouseEnterDelay", "nzPopconfirmMouseLeaveDelay", "nzPopconfirmOverlayClassName", "nzPopconfirmOverlayStyle", "nzPopconfirmVisible", "nzOkText", "nzOkType", "nzOkDisabled", "nzOkDanger", "nzCancelText", "nzBeforeConfirm", "nzIcon", "nzCondition", "nzPopconfirmShowArrow", "nzPopconfirmBackdrop", "nzAutofocus"], outputs: ["nzPopconfirmVisibleChange", "nzOnCancel", "nzOnConfirm"], exportAs: ["nzPopconfirm"] }, { kind: "component", type: ExtendInput, selector: "extend-input", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "inputClass", "labelSpan", "labelFlex", "inputFlex", "showClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "autofocus", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "displayField", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "onclickClearIcon", "onenter"] }, { kind: "component", type: ExtendCheckbox, selector: "extend-checkbox", inputs: ["label", "labelSpan", "labelFlex", "paddingTop", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "ngmodule", type: NzDropDownModule }, { kind: "component", type: i5$4.NzDropdownMenuComponent, selector: "nz-dropdown-menu", exportAs: ["nzDropdownMenu"] }, { kind: "directive", type: AutoFocusDirective, selector: "[appAutoFocus]", inputs: ["appAutoFocus"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$2.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i4$1.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i5$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i8.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }] });
4699
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: FileListComponent, isStandalone: true, selector: "app-file-list", usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n <div nz-col nzSpan=\"18\">\r\n <div nz-row [nzGutter]=\"[8, 0]\">\r\n <div nz-col>\r\n <button nz-button nzType=\"primary\" (click)=\"edit(null)\">{{ TranslateKey.ADD | translate }}</button>\r\n </div>\r\n <div nz-col>\r\n <button nz-button nzType=\"primary\" (click)=\"getData()\">{{ TranslateKey.SEARCH | translate }}</button>\r\n </div>\r\n <nz-upload\r\n [nzAction]=\"\r\n AppGlobals.apiEndpoint +\r\n '/api/file/UploadFile?SaveToDB=' +\r\n (SaveTo == 'DB' ? 'true' : 'false') +\r\n '&FileCode=' +\r\n FileCode\r\n \"\r\n (nzChange)=\"handleChange($event)\"\r\n >\r\n <button nz-button>\r\n <nz-icon nzType=\"upload\" />\r\n T\u1EA3i file\r\n </button>\r\n </nz-upload>\r\n <extend-select\r\n nz-col\r\n nzSpan=\"3\"\r\n [placeHolder]=\"'Save To'\"\r\n [lstItem]=\"[\r\n {\r\n Code: 'DB',\r\n Name: 'DB',\r\n },\r\n {\r\n Code: 'DISC',\r\n Name: 'DISC',\r\n },\r\n ]\"\r\n [valueField]=\"'Code'\"\r\n [displayField]=\"'Name'\"\r\n [(_ngModel)]=\"SaveTo\"\r\n ></extend-select>\r\n <div nz-col [nzSpan]=\"8\">\r\n <input nz-input placeholder=\"File Code\" [(ngModel)]=\"FileCode\" />\r\n </div>\r\n </div>\r\n </div>\r\n <div nz-col nzSpan=\"6\">\r\n <div nz-row nzJustify=\"end\">\r\n <nz-pagination\r\n [nzSize]=\"'small'\"\r\n [nzPageIndex]=\"filter.PageIndex + 1\"\r\n [nzPageSize]=\"filter.PageSize\"\r\n [nzTotal]=\"data?.TotalCount || 0\"\r\n [nzShowSizeChanger]=\"true\"\r\n [nzShowTotal]=\"showTotalTpl\"\r\n [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n >\r\n </nz-pagination>\r\n\r\n <ng-template #showTotalTpl let-total let-range=\"range\">\r\n {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n </ng-template>\r\n </div>\r\n </div>\r\n <div nz-col nzSpan=\"24\">\r\n <nz-table\r\n #table\r\n [nzData]=\"this.data?.LstItem || []\"\r\n [nzBordered]=\"true\"\r\n [nzSize]=\"'small'\"\r\n [nzShowSizeChanger]=\"true\"\r\n [nzFrontPagination]=\"false\"\r\n >\r\n <thead>\r\n <tr>\r\n @for (item of this.data?.LstHeader; track $index) {\r\n @if (item.Code == \"Code\") {\r\n <th [nzWidth]=\"item.Width\" nzCustomFilter>\r\n {{ item.Code }}\r\n <nz-filter-trigger\r\n [nzActive]=\"filter.Code ? true : false\"\r\n [nzDropdownMenu]=\"searchCodeMenu\"\r\n (nzVisibleChange)=\"isDropdownCodeVisible = $event\"\r\n >\r\n <nz-icon nzType=\"search\" />\r\n </nz-filter-trigger>\r\n </th>\r\n } @else {\r\n <th [nzWidth]=\"item.Width\">{{ item.Name }}</th>\r\n }\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (row of data?.LstItem; track $index; let i = $index) {\r\n @if (row != selectedItem) {\r\n <tr (click)=\"selectedItem = row\">\r\n @for (col of this.data?.LstHeader; track $index) {\r\n <td [class]=\"col.Class\" [nzBreakWord]=\"col.Class && col.Class.includes('BreakWord')\">\r\n @if (col.Code == \"NO\") {\r\n {{ i + 1 + filter.PageIndex * filter.PageSize }}\r\n } @else if (col.Code == \"ACTION\") {\r\n <!-- <i\r\n nz-icon\r\n nzType=\"download\"\r\n nzTheme=\"outline\"\r\n class=\"color-primary cursor-pointer icon-size-16\"\r\n (click)=\"download(row)\"\r\n ></i>\r\n &nbsp;\r\n <a\r\n nz-popconfirm\r\n [nzPopconfirmTitle]=\"TranslateKey.CONFIRM_DELETE | translate\"\r\n nzPopconfirmPlacement=\"top\"\r\n (nzOnConfirm)=\"delete(row)\"\r\n (click)=\"$event.stopPropagation()\"\r\n nzOkDanger\r\n >\r\n <i nz-icon nzType=\"delete\" nzTheme=\"outline\" class=\"color-warn cursor-pointer icon-size-16\"></i>\r\n </a> -->\r\n } @else {\r\n @if (col.Type == \"CHECKBOX\") {\r\n @if (row[col.Code]) {\r\n <nz-icon nzType=\"check-circle\" nzTheme=\"outline\" class=\"color-primary\" />\r\n } @else {\r\n <nz-icon nzType=\"close\" nzTheme=\"outline\" class=\"color-warn\" />\r\n }\r\n } @else {\r\n {{ row[col.Code] }}\r\n }\r\n }\r\n </td>\r\n }\r\n </tr>\r\n } @else {\r\n <tr>\r\n @for (col of this.data?.LstHeader; track $index) {\r\n <td [class]=\"col.Class\" [nzBreakWord]=\"col.Class && col.Class.includes('BreakWord')\">\r\n @if (col.Code == \"NO\") {\r\n {{ i + 1 + filter.PageIndex * filter.PageSize }}\r\n } @else if (col.Code == \"ACTION\") {\r\n <i\r\n *ngIf=\"row.IsContentOnly\"\r\n nz-tooltip=\"Move to disk\"\r\n nz-icon\r\n nzType=\"file\"\r\n nzTheme=\"outline\"\r\n class=\"color-primary cursor-pointer icon-size-16\"\r\n (click)=\"moveFileToDisk(row)\"\r\n ></i>\r\n <box [width]=\"5\"></box>\r\n <i\r\n nz-icon\r\n nzType=\"save\"\r\n nzTheme=\"outline\"\r\n class=\"color-primary cursor-pointer icon-size-16\"\r\n (click)=\"save(row)\"\r\n ></i>\r\n <box [width]=\"5\"></box>\r\n <i\r\n nz-icon\r\n nzType=\"download\"\r\n nzTheme=\"outline\"\r\n class=\"color-primary cursor-pointer icon-size-16\"\r\n (click)=\"download(row)\"\r\n ></i>\r\n <box [width]=\"5\"></box>\r\n <a\r\n nz-popconfirm\r\n [nzPopconfirmTitle]=\"TranslateKey.CONFIRM_DELETE | translate\"\r\n nzPopconfirmPlacement=\"top\"\r\n (nzOnConfirm)=\"delete(row)\"\r\n nzOkDanger\r\n >\r\n <i nz-icon nzType=\"delete\" nzTheme=\"outline\" class=\"color-warn cursor-pointer icon-size-16\"></i>\r\n </a>\r\n } @else if (col.Code == \"Code\") {\r\n <extend-input [size]=\"'small'\" [(_ngModel)]=\"row.Code\"></extend-input>\r\n } @else if (col.Code == \"IsTemp\") {\r\n <extend-checkbox [(_ngModel)]=\"row.IsTemp\"></extend-checkbox>\r\n } @else if (col.Code == \"FileName\") {\r\n <extend-input [size]=\"'small'\" [(_ngModel)]=\"row.FileName\"></extend-input>\r\n } @else {\r\n @if (col.Type == \"CHECKBOX\") {\r\n @if (row[col.Code]) {\r\n <nz-icon nzType=\"check-circle\" nzTheme=\"outline\" class=\"color-primary\" />\r\n } @else {\r\n <nz-icon nzType=\"close\" nzTheme=\"outline\" class=\"color-warn\" />\r\n }\r\n } @else {\r\n {{ row[col.Code] }}\r\n }\r\n }\r\n </td>\r\n }\r\n </tr>\r\n }\r\n }\r\n </tbody>\r\n </nz-table>\r\n </div>\r\n</div>\r\n\r\n<nz-dropdown-menu #searchCodeMenu=\"nzDropdownMenu\">\r\n <div class=\"ant-table-filter-dropdown\">\r\n <div class=\"search-box\">\r\n <input\r\n type=\"text\"\r\n nz-input\r\n [(ngModel)]=\"filter.Code\"\r\n [appAutoFocus]=\"isDropdownCodeVisible\"\r\n (keyup.enter)=\"search()\"\r\n />\r\n <button nz-button nzSize=\"small\" nzType=\"primary\" (click)=\"search()\" class=\"search-button\">\r\n {{ \"SEARCH\" | translate }}\r\n </button>\r\n <button nz-button nzSize=\"small\" (click)=\"filter.Code = ''; search()\">{{ \"RESET\" | translate }}</button>\r\n </div>\r\n </div>\r\n</nz-dropdown-menu>\r\n", dependencies: [{ kind: "ngmodule", type: NzUploadModule }, { kind: "component", type: i1$6.NzUploadComponent, selector: "nz-upload", inputs: ["nzType", "nzLimit", "nzSize", "nzFileType", "nzAccept", "nzAction", "nzDirectory", "nzOpenFileDialogOnClick", "nzBeforeUpload", "nzCustomRequest", "nzData", "nzFilter", "nzFileList", "nzDisabled", "nzHeaders", "nzListType", "nzMultiple", "nzName", "nzShowUploadList", "nzShowButton", "nzWithCredentials", "nzRemove", "nzPreview", "nzPreviewFile", "nzPreviewIsImage", "nzTransformFile", "nzDownload", "nzIconRender", "nzFileListRender"], outputs: ["nzChange", "nzFileListChange"], exportAs: ["nzUpload"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "component", type: ExtendSelectComponent, selector: "extend-select", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "dropdownMatchSelectWidth", "labelSpan", "labelFlex", "disabled", "required", "noBottom", "multiple", "showSelectAll", "maxTagCount", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "lstItem", "displayField", "displayFields", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "itemChange", "onFocus"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzPaginationModule }, { kind: "component", type: i5$3.NzPaginationComponent, selector: "nz-pagination", inputs: ["nzShowTotal", "nzItemRender", "nzSize", "nzPageSizeOptions", "nzShowSizeChanger", "nzShowQuickJumper", "nzSimple", "nzDisabled", "nzResponsive", "nzHideOnSinglePage", "nzTotal", "nzPageIndex", "nzPageSize"], outputs: ["nzPageSizeChange", "nzPageIndexChange"], exportAs: ["nzPagination"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i6$1.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "component", type: i6$1.NzThAddOnComponent, selector: "th[nzColumnKey], th[nzSortFn], th[nzSortOrder], th[nzFilters], th[nzShowSort], th[nzShowFilter], th[nzCustomFilter]", inputs: ["nzColumnKey", "nzFilterMultiple", "nzSortOrder", "nzSortPriority", "nzSortDirections", "nzFilters", "nzSortFn", "nzFilterFn", "nzShowSort", "nzShowFilter", "nzCustomFilter"], outputs: ["nzCheckedChange", "nzSortOrderChange", "nzFilterChange"] }, { kind: "directive", type: i6$1.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$1.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$1.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$1.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$1.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "component", type: i6$1.NzFilterTriggerComponent, selector: "nz-filter-trigger", inputs: ["nzActive", "nzDropdownMenu", "nzVisible", "nzBackdrop"], outputs: ["nzVisibleChange"], exportAs: ["nzFilterTrigger"] }, { kind: "directive", type: i6$1.NzCellBreakWordDirective, selector: "th[nzBreakWord],td[nzBreakWord]", inputs: ["nzBreakWord"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { kind: "ngmodule", type: NzPopconfirmModule }, { kind: "directive", type: i9$1.NzPopconfirmDirective, selector: "[nz-popconfirm]", inputs: ["nzPopconfirmArrowPointAtCenter", "nzPopconfirmTitle", "nzPopconfirmTitleContext", "nz-popconfirm", "nzPopconfirmTrigger", "nzPopconfirmPlacement", "nzPopconfirmOrigin", "nzPopconfirmMouseEnterDelay", "nzPopconfirmMouseLeaveDelay", "nzPopconfirmOverlayClassName", "nzPopconfirmOverlayStyle", "nzPopconfirmVisible", "nzOkText", "nzOkType", "nzOkDisabled", "nzOkDanger", "nzCancelText", "nzBeforeConfirm", "nzIcon", "nzCondition", "nzPopconfirmShowArrow", "nzPopconfirmBackdrop", "nzAutofocus"], outputs: ["nzPopconfirmVisibleChange", "nzOnCancel", "nzOnConfirm"], exportAs: ["nzPopconfirm"] }, { kind: "component", type: ExtendInput, selector: "extend-input", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "inputClass", "labelSpan", "labelFlex", "inputFlex", "showClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "autofocus", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "displayField", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "onclickClearIcon", "onenter"] }, { kind: "component", type: ExtendCheckbox, selector: "extend-checkbox", inputs: ["label", "labelSpan", "labelFlex", "paddingTop", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "ngmodule", type: NzDropDownModule }, { kind: "component", type: i5$4.NzDropdownMenuComponent, selector: "nz-dropdown-menu", exportAs: ["nzDropdownMenu"] }, { kind: "directive", type: AutoFocusDirective, selector: "[appAutoFocus]", inputs: ["appAutoFocus"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$2.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i4$1.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i5$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i8.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }] });
4704
4700
  }
4705
4701
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: FileListComponent, decorators: [{
4706
4702
  type: Component,
@@ -4954,7 +4950,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
4954
4950
  }]
4955
4951
  }] });
4956
4952
 
4957
- const URLs$b = {
4953
+ const URLs$a = {
4958
4954
  getById: '/api/App_Menu/GetById',
4959
4955
  getAll: '/api/App_Menu/GetAll',
4960
4956
  getList: '/api/App_Menu/GetList',
@@ -4967,29 +4963,29 @@ const URLs$b = {
4967
4963
  class MenuService extends HTTPService {
4968
4964
  getById(id) {
4969
4965
  let pr = new HttpParams().append('id', id);
4970
- return this.postParams(AppGlobals.apiEndpoint + URLs$b.getById, pr);
4966
+ return this.postParams(AppGlobals.apiEndpoint + URLs$a.getById, pr);
4971
4967
  }
4972
4968
  getAll() {
4973
- return this.post(AppGlobals.apiEndpoint + URLs$b.getAll);
4969
+ return this.post(AppGlobals.apiEndpoint + URLs$a.getAll);
4974
4970
  }
4975
4971
  getList(filter) {
4976
- return this.postData(AppGlobals.apiEndpoint + URLs$b.getList, filter);
4972
+ return this.postData(AppGlobals.apiEndpoint + URLs$a.getList, filter);
4977
4973
  }
4978
4974
  getPaging(filter) {
4979
- return this.postData(AppGlobals.apiEndpoint + URLs$b.getPaging, filter);
4975
+ return this.postData(AppGlobals.apiEndpoint + URLs$a.getPaging, filter);
4980
4976
  }
4981
4977
  addOrEdit(obj) {
4982
- return this.postData(AppGlobals.apiEndpoint + URLs$b.addOrEdit, obj);
4978
+ return this.postData(AppGlobals.apiEndpoint + URLs$a.addOrEdit, obj);
4983
4979
  }
4984
4980
  addOrEditInListComponent(obj) {
4985
- return this.postData(AppGlobals.apiEndpoint + URLs$b.addOrEditInListComponent, obj);
4981
+ return this.postData(AppGlobals.apiEndpoint + URLs$a.addOrEditInListComponent, obj);
4986
4982
  }
4987
4983
  delete(id) {
4988
4984
  const params = new HttpParams().append('id', id);
4989
- return this.postParams(AppGlobals.apiEndpoint + URLs$b.delete, params);
4985
+ return this.postParams(AppGlobals.apiEndpoint + URLs$a.delete, params);
4990
4986
  }
4991
4987
  getTree() {
4992
- return this.post(AppGlobals.apiEndpoint + URLs$b.getTree);
4988
+ return this.post(AppGlobals.apiEndpoint + URLs$a.getTree);
4993
4989
  }
4994
4990
  getRoleMenuRefByMenuId(menuId) {
4995
4991
  let pr = new HttpParams().append('menuId', menuId);
@@ -5124,7 +5120,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
5124
5120
  ], template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n <div nz-col nzSpan=\"24\">\r\n <div nz-flex nzJustify=\"end\">\r\n <div nz-flex nzGap=\"small\">\r\n <button-add (click)=\"edit(null)\"></button-add>\r\n <button-search (click)=\"search()\"></button-search>\r\n </div>\r\n </div>\r\n </div>\r\n <div nz-col nzSpan=\"24\">\r\n <nz-table\r\n #table\r\n [nzData]=\"this.data?.LstItem || []\"\r\n [nzBordered]=\"true\"\r\n [nzSize]=\"'small'\"\r\n [nzFrontPagination]=\"false\"\r\n [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 214px)' }\"\r\n >\r\n <ng-template #showTotalTpl let-total let-range=\"range\">\r\n {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n </ng-template>\r\n <thead>\r\n <tr>\r\n <th nzWidth=\"50px\">#</th>\r\n <th>T\u00EAn</th>\r\n <th>URL</th>\r\n <th nzWidth=\"90px\">Icon</th>\r\n <th nzWidth=\"90px\">Order</th>\r\n <th>Menu cha</th>\r\n <th nzWidth=\"110px\">Header menu</th>\r\n <th nzWidth=\"80px\">Hi\u1EC7u l\u1EF1c</th>\r\n <th nzWidth=\"75px\" nzRight>Thao t\u00E1c</th>\r\n </tr>\r\n <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n <th></th>\r\n <th>\r\n <extend-input\r\n [size]=\"'small'\"\r\n [showClear]=\"true\"\r\n [(_ngModel)]=\"filter.Name\"\r\n (onclickClearIcon)=\"search()\"\r\n ></extend-input>\r\n </th>\r\n <th></th>\r\n <th></th>\r\n <th></th>\r\n <th>\r\n <extend-input\r\n [size]=\"'small'\"\r\n [showClear]=\"true\"\r\n [(_ngModel)]=\"filter.ParentName\"\r\n (onclickClearIcon)=\"search()\"\r\n ></extend-input>\r\n </th>\r\n <th></th>\r\n <th></th>\r\n <th class=\"center\" nzRight>\r\n <icon-add (click)=\"add()\"></icon-add>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (row of table.data; track $index; let i = $index) {\r\n @if (selectedMenu != row) {\r\n <tr (click)=\"selectedMenu = row\">\r\n <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n <td>{{ row.TreeNodeName }}</td>\r\n <td>{{ row.Url }}</td>\r\n <td>{{ row.Icon }}</td>\r\n <td>{{ row.OrderValue }}</td>\r\n <td>{{ row.ParentName }}</td>\r\n <td class=\"text-center\">\r\n @if (row.IsHeaderMenu) {\r\n <icon-check></icon-check>\r\n }\r\n </td>\r\n <td class=\"text-center\">\r\n @if (row.IsActive) {\r\n <icon-check></icon-check>\r\n }\r\n </td>\r\n <td class=\"text-center\" nzRight>\r\n <icon-edit (click)=\"edit(row)\"></icon-edit>\r\n <box [width]=\"4\"></box>\r\n <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n </td>\r\n </tr>\r\n } @else {\r\n <tr (keyup.enter)=\"save()\" class=\"selected\">\r\n <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n <td>\r\n <extend-input [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.Name\"></extend-input>\r\n </td>\r\n <td>\r\n <extend-input [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.Url\"></extend-input>\r\n </td>\r\n <td>\r\n <extend-input [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.Icon\"></extend-input>\r\n </td>\r\n <td>\r\n <extend-input-number [size]=\"'small'\" [(_ngModel)]=\"selectedMenu.OrderValue\"></extend-input-number>\r\n </td>\r\n <td>\r\n <nz-tree-select\r\n class=\"full-width\"\r\n [nzNodes]=\"treeMenu\"\r\n nzShowSearch\r\n nzPlaceHolder=\" \"\r\n [nzSize]=\"'small'\"\r\n [nzDropdownMatchSelectWidth]=\"false\"\r\n [(ngModel)]=\"selectedMenu.ParentId\"\r\n ></nz-tree-select>\r\n </td>\r\n <td class=\"text-center\">\r\n <extend-checkbox [(_ngModel)]=\"selectedMenu.IsHeaderMenu\"></extend-checkbox>\r\n </td>\r\n <td class=\"text-center\">\r\n <extend-checkbox [(_ngModel)]=\"selectedMenu.IsActive\"></extend-checkbox>\r\n </td>\r\n <td class=\"text-center\" nzRight>\r\n <icon-save (click)=\"save()\"></icon-save>\r\n <box [width]=\"4\"></box>\r\n <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n </tbody>\r\n </nz-table>\r\n </div>\r\n <div nz-col nzSpan=\"24\">\r\n <div nz-flex nzJustify=\"end\">\r\n <nz-pagination\r\n [nzSize]=\"'small'\"\r\n [nzPageIndex]=\"filter.PageIndex + 1\"\r\n [nzPageSize]=\"filter.PageSize\"\r\n [nzTotal]=\"data?.TotalCount || 0\"\r\n [nzShowSizeChanger]=\"true\"\r\n [nzShowTotal]=\"showTotalTpl\"\r\n [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n >\r\n </nz-pagination>\r\n\r\n <ng-template #showTotalTpl let-total let-range=\"range\">\r\n {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n </ng-template>\r\n </div>\r\n </div>\r\n</div>\r\n" }]
5125
5121
  }] });
5126
5122
 
5127
- const URLs$a = {
5123
+ const URLs$9 = {
5128
5124
  getById: '/api/App_Role/GetById',
5129
5125
  getAll: '/api/App_Role/GetAll',
5130
5126
  getList: '/api/App_Role/GetList',
@@ -5136,23 +5132,23 @@ class RoleService extends HTTPService {
5136
5132
  commonService = inject(CommonService);
5137
5133
  getById(id) {
5138
5134
  let pr = new HttpParams().append('id', id);
5139
- return this.postParams(AppGlobals.apiEndpoint + URLs$a.getById, pr);
5135
+ return this.postParams(AppGlobals.apiEndpoint + URLs$9.getById, pr);
5140
5136
  }
5141
5137
  getAll() {
5142
- return this.post(AppGlobals.apiEndpoint + URLs$a.getAll);
5138
+ return this.post(AppGlobals.apiEndpoint + URLs$9.getAll);
5143
5139
  }
5144
5140
  getList(filter) {
5145
- return this.postData(AppGlobals.apiEndpoint + URLs$a.getList, filter);
5141
+ return this.postData(AppGlobals.apiEndpoint + URLs$9.getList, filter);
5146
5142
  }
5147
5143
  getPaging(filter) {
5148
- return this.postData(AppGlobals.apiEndpoint + URLs$a.getPaging, filter);
5144
+ return this.postData(AppGlobals.apiEndpoint + URLs$9.getPaging, filter);
5149
5145
  }
5150
5146
  addOrEdit(obj) {
5151
- return this.postData(AppGlobals.apiEndpoint + URLs$a.addOrEdit, obj);
5147
+ return this.postData(AppGlobals.apiEndpoint + URLs$9.addOrEdit, obj);
5152
5148
  }
5153
5149
  delete(id) {
5154
5150
  const params = new HttpParams().append('id', id);
5155
- return this.postParams(AppGlobals.apiEndpoint + URLs$a.delete, params);
5151
+ return this.postParams(AppGlobals.apiEndpoint + URLs$9.delete, params);
5156
5152
  }
5157
5153
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RoleService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
5158
5154
  static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RoleService, providedIn: 'root' });
@@ -5419,7 +5415,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
5419
5415
  ], template: "<form nz-form [formGroup]=\"formData\">\r\n <!-- BUTTONS -->\r\n <div nz-col [nzSpan]=\"24\">\r\n <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n <button-save (click)=\"save()\"></button-save>\r\n <button-delete *ngIf=\"formData.controls.App_Menu_Id.value\" (click)=\"delete()\"></button-delete>\r\n <button-back (click)=\"goto('/admin/menu')\"></button-back>\r\n </div>\r\n </div>\r\n\r\n <nz-divider></nz-divider>\r\n\r\n <div nz-row [nzGutter]=\"['0', '16']\">\r\n <div nz-col [nzMd]=\"12\" [nzSm]=\"24\">\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"8\" nzLabelAlign=\"left\" nzNoColon=\"true\"> Menu cha </nz-form-label>\r\n <nz-form-control [nzSpan]=\"16\">\r\n <!-- <nz-select #parentSelect nzShowSearch nzAllowClear formControlName=\"ParentId\">\r\n @for (item of allMenu; track $index) {\r\n <nz-option [nzLabel]=\"item.TreeNodeName\" [nzValue]=\"item.App_Menu_Id\"></nz-option>\r\n }\r\n </nz-select> -->\r\n <nz-tree-select\r\n class=\"full-width\"\r\n [nzNodes]=\"treeMenu\"\r\n nzShowSearch\r\n nzPlaceHolder=\" \"\r\n formControlName=\"ParentId\"\r\n ></nz-tree-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"8\" nzFor=\"Name\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired> T\u00EAn </nz-form-label>\r\n <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n <input nz-input formControlName=\"Name\" id=\"Name\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"8\" nzFor=\"Url\" nzLabelAlign=\"left\" nzNoColon=\"true\"> URL </nz-form-label>\r\n <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n <input nz-input formControlName=\"Url\" id=\"Url\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"8\" nzFor=\"Icon\" nzLabelAlign=\"left\" nzNoColon=\"true\"> Icon </nz-form-label>\r\n <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n <input nz-input formControlName=\"Icon\" id=\"Icon\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"8\" nzFor=\"OrderValue\" nzLabelAlign=\"left\" nzNoColon=\"true\">Order value</nz-form-label>\r\n <nz-form-control [nzSpan]=\"16\">\r\n <nz-input-number formControlName=\"OrderValue\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n <div nz-row>\r\n <div nz-col [nzSpan]=\"8\"></div>\r\n <div nz-col [nzSpan]=\"16\">\r\n <label nz-checkbox formControlName=\"IsActive\">Active</label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- C\u1ED8T PH\u1EA2I: QU\u1EA2N L\u00DD ROLE -->\r\n <div nz-col [nzMd]=\"12\" [nzSm]=\"24\">\r\n <div style=\"border: 1px solid #d9d9d9; border-radius: 4px; padding: 16px; height: 100%; margin-left: 10px\">\r\n <h4 style=\"margin-top: 0; margin-bottom: 16px\">\r\n <span nz-icon nzType=\"team\" style=\"margin-right: 8px\"></span>\r\n Qu\u1EA3n l\u00FD Role\r\n </h4>\r\n\r\n <!-- Hi\u1EC3n th\u1ECB khi \u0110ANG T\u1EA0O M\u1EDAI (ch\u01B0a c\u00F3 App_Menu_Id) -->\r\n <nz-alert\r\n *ngIf=\"!formData.controls.App_Menu_Id.value\"\r\n nzType=\"info\"\r\n nzMessage=\"Vui l\u00F2ng l\u01B0u Menu tr\u01B0\u1EDBc\"\r\n nzDescription=\"B\u1EA1n c\u1EA7n l\u01B0u Menu tr\u01B0\u1EDBc, sau \u0111\u00F3 m\u1EDBi c\u00F3 th\u1EC3 th\u00EAm Role.\"\r\n nzShowIcon\r\n ></nz-alert>\r\n\r\n <!-- Hi\u1EC3n th\u1ECB khi \u0110ANG C\u1EACP NH\u1EACT (\u0111\u00E3 c\u00F3 App_Menu_Id) -->\r\n <div *ngIf=\"formData.controls.App_Menu_Id.value\">\r\n <div nz-flex [nzJustify]=\"'space-between'\" [nzAlign]=\"'center'\" style=\"margin-bottom: 12px\">\r\n <span style=\"font-weight: 500\">Roles ({{ lstRoleMenu.length }})</span>\r\n <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"openAddRoleModal()\">\r\n <span nz-icon nzType=\"plus\"></span>\r\n Th\u00EAm\r\n </button>\r\n </div>\r\n\r\n <div style=\"max-height: 400px; overflow-y: auto\">\r\n <nz-table\r\n #roleTable\r\n [nzData]=\"lstRoleMenu\"\r\n [nzSize]=\"'small'\"\r\n [nzShowPagination]=\"false\"\r\n [nzLoading]=\"isLoadingRoles\"\r\n >\r\n <thead>\r\n <tr>\r\n <th nzWidth=\"40px\">STT</th>\r\n <th>Role</th>\r\n <th nzWidth=\"50px\" nzAlign=\"center\" nz-tooltip nzTooltipTitle=\"Xem\">\r\n <span nz-icon nzType=\"eye\" nzTheme=\"outline\"></span>\r\n </th>\r\n <th nzWidth=\"50px\" nzAlign=\"center\" nz-tooltip nzTooltipTitle=\"S\u1EEDa\">\r\n <span nz-icon nzType=\"edit\" nzTheme=\"outline\"></span>\r\n </th>\r\n <th nzWidth=\"50px\" nzAlign=\"center\"></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let item of roleTable.data; let i = index\">\r\n <td>{{ i + 1 }}</td>\r\n <td>\r\n <div style=\"font-weight: 500\">{{ item.RoleName }}</div>\r\n <div style=\"font-size: 12px; color: #888\">{{ item.RoleCode }}</div>\r\n </td>\r\n <td nzAlign=\"center\">\r\n <label nz-checkbox [(ngModel)]=\"item.HasViewPermission\" [ngModelOptions]=\"{ standalone: true }\">\r\n </label>\r\n </td>\r\n <td nzAlign=\"center\">\r\n <label nz-checkbox [(ngModel)]=\"item.HasEditPermission\" [ngModelOptions]=\"{ standalone: true }\">\r\n </label>\r\n </td>\r\n <td nzAlign=\"center\">\r\n <icon-delete (click)=\"deleteRoleFromMenu(item)\"></icon-delete>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </nz-table>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</form>\r\n\r\n<!-- Modal ch\u1ECDn Role -->\r\n<nz-modal\r\n [(nzVisible)]=\"isAddRoleModalVisible\"\r\n nzTitle=\"Th\u00EAm Role v\u00E0o Menu\"\r\n [nzWidth]=\"700\"\r\n (nzOnCancel)=\"closeAddRoleModal()\"\r\n (nzOnOk)=\"addRolesToMenu()\"\r\n nzOkText=\"Th\u00EAm\"\r\n nzCancelText=\"H\u1EE7y\"\r\n>\r\n <ng-container *nzModalContent>\r\n <!-- Search box -->\r\n <nz-input-group [nzPrefix]=\"prefixIconSearch\" style=\"margin-bottom: 16px\">\r\n <input\r\n type=\"text\"\r\n nz-input\r\n placeholder=\"T\u00ECm ki\u1EBFm Role...\"\r\n [(ngModel)]=\"searchRoleText\"\r\n (ngModelChange)=\"filterAvailableRoles()\"\r\n />\r\n </nz-input-group>\r\n <ng-template #prefixIconSearch>\r\n <span nz-icon nzType=\"search\"></span>\r\n </ng-template>\r\n\r\n <nz-table\r\n #addRoleTable\r\n [nzData]=\"lstFilteredRole\"\r\n [nzSize]=\"'small'\"\r\n [nzShowPagination]=\"true\"\r\n [nzPageSize]=\"10\"\r\n [nzLoading]=\"isLoadingAvailableRoles\"\r\n >\r\n <thead>\r\n <tr>\r\n <th\r\n nzWidth=\"60px\"\r\n nzShowCheckbox\r\n [(nzChecked)]=\"isAllRoleChecked\"\r\n (nzCheckedChange)=\"onAllRoleChecked($event)\"\r\n [nzIndeterminate]=\"isRoleIndeterminate\"\r\n ></th>\r\n <th nzWidth=\"150px\">M\u00E3 Role</th>\r\n <th>T\u00EAn Role</th>\r\n <th>M\u00F4 t\u1EA3</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let item of addRoleTable.data\">\r\n <td nz-flex nzJustify=\"center\">\r\n <label nz-checkbox [(ngModel)]=\"item.checked\" (ngModelChange)=\"onRoleChecked(item, $event)\"></label>\r\n </td>\r\n <td>{{ item.Code }}</td>\r\n <td>{{ item.Name }}</td>\r\n <td>{{ item.Description }}</td>\r\n </tr>\r\n </tbody>\r\n </nz-table>\r\n </ng-container>\r\n</nz-modal>\r\n" }]
5420
5416
  }] });
5421
5417
 
5422
- const URLs$9 = {
5418
+ const URLs$8 = {
5423
5419
  getById: '/api/App_Org/GetById',
5424
5420
  getAll: '/api/App_Org/GetAll',
5425
5421
  getList: '/api/App_Org/GetList',
@@ -5431,23 +5427,23 @@ class OrgService extends HTTPService {
5431
5427
  cms = inject(CommonService);
5432
5428
  getById(id) {
5433
5429
  let pr = new HttpParams().append('id', id);
5434
- return this.postParams(AppGlobals.apiEndpoint + URLs$9.getById, pr);
5430
+ return this.postParams(AppGlobals.apiEndpoint + URLs$8.getById, pr);
5435
5431
  }
5436
5432
  getAll() {
5437
- return this.post(AppGlobals.apiEndpoint + URLs$9.getAll);
5433
+ return this.post(AppGlobals.apiEndpoint + URLs$8.getAll);
5438
5434
  }
5439
5435
  getList(filter) {
5440
- return this.postData(AppGlobals.apiEndpoint + URLs$9.getList, filter);
5436
+ return this.postData(AppGlobals.apiEndpoint + URLs$8.getList, filter);
5441
5437
  }
5442
5438
  getPaging(filter) {
5443
- return this.postData(AppGlobals.apiEndpoint + URLs$9.getPaging, filter);
5439
+ return this.postData(AppGlobals.apiEndpoint + URLs$8.getPaging, filter);
5444
5440
  }
5445
5441
  addOrEdit(obj) {
5446
- return this.postData(AppGlobals.apiEndpoint + URLs$9.addOrEdit, obj);
5442
+ return this.postData(AppGlobals.apiEndpoint + URLs$8.addOrEdit, obj);
5447
5443
  }
5448
5444
  delete(id) {
5449
5445
  const params = new HttpParams().append('id', id);
5450
- return this.postParams(AppGlobals.apiEndpoint + URLs$9.delete, params);
5446
+ return this.postParams(AppGlobals.apiEndpoint + URLs$8.delete, params);
5451
5447
  }
5452
5448
  getAllForLogin(UserName) {
5453
5449
  const params = new HttpParams().append('UserName', UserName);
@@ -5575,7 +5571,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
5575
5571
  ], template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n <div nz-col nzSpan=\"24\">\r\n <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n <button-add (click)=\"edit(null)\"></button-add>\r\n <button-search (click)=\"search()\"></button-search>\r\n </div>\r\n </div>\r\n <div nz-col nzSpan=\"24\">\r\n <nz-table\r\n #table\r\n [nzData]=\"this.data.LstItem || []\"\r\n [nzBordered]=\"true\"\r\n [nzSize]=\"'small'\"\r\n [nzFrontPagination]=\"false\"\r\n [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 214px)' }\"\r\n >\r\n <ng-template #showTotalTpl let-total let-range=\"range\">\r\n {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n </ng-template>\r\n <thead>\r\n <tr>\r\n <th nzWidth=\"50px\">#</th>\r\n <th>M\u00E3</th>\r\n <th>T\u00EAn</th>\r\n <th>T\u00EAn \u0111\u01A1n v\u1ECB cha</th>\r\n <th>Th\u1EE9 t\u1EF1</th>\r\n <th>Hi\u1EC7u l\u1EF1c</th>\r\n <th nzWidth=\"75px\">Thao t\u00E1c</th>\r\n </tr>\r\n <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n <th></th>\r\n <th>\r\n <extend-input [size]=\"'small'\" [(_ngModel)]=\"filter.Code\" (onclickClearIcon)=\"search()\"></extend-input>\r\n </th>\r\n <th>\r\n <extend-input [size]=\"'small'\" [(_ngModel)]=\"filter.Name\" (onclickClearIcon)=\"search()\"></extend-input>\r\n </th>\r\n <th>\r\n <extend-input\r\n [size]=\"'small'\"\r\n [(_ngModel)]=\"filter.ParentName\"\r\n (onclickClearIcon)=\"search()\"\r\n ></extend-input>\r\n </th>\r\n <th></th>\r\n <th></th>\r\n <th></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (row of table.data; track $index; let i = $index) {\r\n <tr>\r\n <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n <td>{{ row.Code }}</td>\r\n <td>{{ row.Name }}</td>\r\n <td>{{ row.ParentName }}</td>\r\n <td>{{ row.OrderValue }}</td>\r\n <td class=\"center\">\r\n @if (row.IsActive) {\r\n <icon-check></icon-check>\r\n }\r\n </td>\r\n <td nz-flex nzGap=\"small\" nzJustify=\"center\">\r\n <icon-edit (click)=\"edit(row)\"></icon-edit>\r\n <icon-delete (click)=\"delete(row)\"></icon-delete>\r\n </td>\r\n </tr>\r\n }\r\n </tbody>\r\n </nz-table>\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"24\">\r\n <div nz-flex nzJustify=\"end\">\r\n <nz-pagination\r\n [nzSize]=\"'small'\"\r\n [nzPageIndex]=\"filter.PageIndex + 1\"\r\n [nzPageSize]=\"filter.PageSize\"\r\n [nzTotal]=\"data.TotalCount || 0\"\r\n [nzShowSizeChanger]=\"true\"\r\n [nzShowTotal]=\"showTotalTpl\"\r\n [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n >\r\n </nz-pagination>\r\n\r\n <ng-template #showTotalTpl let-total let-range=\"range\">\r\n {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n </ng-template>\r\n </div>\r\n </div>\r\n</div>\r\n" }]
5576
5572
  }] });
5577
5573
 
5578
- const URLs$8 = {
5574
+ const URLs$7 = {
5579
5575
  getById: '/api/App_User/GetById',
5580
5576
  getByIdEx: '/api/App_User/GetByIdEx',
5581
5577
  getAll: '/api/App_User/GetAll',
@@ -5588,27 +5584,27 @@ class UserService extends HTTPService {
5588
5584
  cms = inject(CommonService);
5589
5585
  getById(id) {
5590
5586
  const params = new HttpParams().append('id', id);
5591
- return this.postParams(AppGlobals.apiEndpoint + URLs$8.getById, params);
5587
+ return this.postParams(AppGlobals.apiEndpoint + URLs$7.getById, params);
5592
5588
  }
5593
5589
  getByIdEx(id) {
5594
5590
  const params = new HttpParams().append('id', id);
5595
- return this.postParams(AppGlobals.apiEndpoint + URLs$8.getByIdEx, params);
5591
+ return this.postParams(AppGlobals.apiEndpoint + URLs$7.getByIdEx, params);
5596
5592
  }
5597
5593
  getAll() {
5598
- return this.post(AppGlobals.apiEndpoint + URLs$8.getAll);
5594
+ return this.post(AppGlobals.apiEndpoint + URLs$7.getAll);
5599
5595
  }
5600
5596
  getList(filter) {
5601
- return this.postData(AppGlobals.apiEndpoint + URLs$8.getList, filter);
5597
+ return this.postData(AppGlobals.apiEndpoint + URLs$7.getList, filter);
5602
5598
  }
5603
5599
  getPaging(filter) {
5604
- return this.postData(AppGlobals.apiEndpoint + URLs$8.getPaging, filter);
5600
+ return this.postData(AppGlobals.apiEndpoint + URLs$7.getPaging, filter);
5605
5601
  }
5606
5602
  addOrEdit(obj) {
5607
- return this.postData(AppGlobals.apiEndpoint + URLs$8.addOrEdit, obj);
5603
+ return this.postData(AppGlobals.apiEndpoint + URLs$7.addOrEdit, obj);
5608
5604
  }
5609
5605
  delete(id) {
5610
5606
  const params = new HttpParams().append('id', id);
5611
- return this.postParams(AppGlobals.apiEndpoint + URLs$8.delete, params);
5607
+ return this.postParams(AppGlobals.apiEndpoint + URLs$7.delete, params);
5612
5608
  }
5613
5609
  importUser(data) {
5614
5610
  return this.postData(`${AppGlobals.apiEndpoint}/api/App_User/ImportUser`, data);
@@ -6270,7 +6266,7 @@ class RolePermissionComponent extends BaseComponent {
6270
6266
  .finally(() => (this.isSaving = false));
6271
6267
  }
6272
6268
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RolePermissionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
6273
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: RolePermissionComponent, isStandalone: true, selector: "role-resource-permission", usesInheritance: true, ngImport: i0, template: "<nz-card [nzBordered]=\"false\" nzTitle=\"C\u1EA5u h\u00ECnh Ph\u00E2n quy\u1EC1n H\u1EC7 th\u1ED1ng\">\r\n <div class=\"header-action\" nz-row nzJustify=\"space-between\" nzAlign=\"middle\" style=\"margin-bottom: 24px\">\r\n <div nz-col>\r\n <span style=\"margin-right: 16px; font-weight: bold\">Ch\u1ECDn Nh\u00F3m quy\u1EC1n (Role):</span>\r\n <nz-select\r\n [(ngModel)]=\"selectedId\"\r\n (ngModelChange)=\"onRoleChange($event)\"\r\n nzPlaceHolder=\"-- Vui l\u00F2ng ch\u1ECDn Role --\"\r\n style=\"width: 300px\"\r\n >\r\n <nz-option *ngFor=\"let role of lstRole\" [nzValue]=\"role.App_Role_Id\" [nzLabel]=\"role.Name || ''\"></nz-option>\r\n </nz-select>\r\n </div>\r\n <div nz-col>\r\n <button nz-button nzType=\"primary\" (click)=\"savePermissions()\" [nzLoading]=\"isSaving\" [disabled]=\"!selectedId\">\r\n <i nz-icon nzType=\"save\"></i> L\u01B0u c\u1EA5u h\u00ECnh\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <nz-divider></nz-divider>\r\n\r\n <nz-spin [nzSpinning]=\"isLoading\">\r\n <div *ngIf=\"!selectedId\" style=\"text-align: center; color: #999; padding: 40px 0\">\r\n Vui l\u00F2ng ch\u1ECDn m\u1ED9t Nh\u00F3m quy\u1EC1n \u0111\u1EC3 xem v\u00E0 c\u1EA5u h\u00ECnh.\r\n </div>\r\n\r\n <div *ngIf=\"selectedId\">\r\n <div *ngFor=\"let group of resourceGroups\" style=\"margin-bottom: 24px\">\r\n <h4 style=\"border-left: 4px solid #1890ff; padding-left: 8px; margin-bottom: 16px\">\r\n {{ group.ResourceName }}\r\n </h4>\r\n\r\n <nz-card [nzBordered]=\"true\" nzSize=\"small\">\r\n <nz-row [nzGutter]=\"[16, 16]\">\r\n <nz-col [nzSpan]=\"6\" *ngFor=\"let perm of group.permissions\">\r\n <label\r\n nz-checkbox\r\n [nzChecked]=\"isPermissionChecked(perm.App_Permission_Id)\"\r\n (nzCheckedChange)=\"onCheckChange(perm.App_Permission_Id, $event)\"\r\n >\r\n {{ perm.PermissionName }} <br />\r\n <small style=\"color: #888\">{{ perm.PermissionCode }}</small>\r\n <button\r\n nz-button\r\n nzType=\"text\"\r\n cdkCopyToClipboard=\"{{ perm.PermissionCode }}\"\r\n (click)=\"$event.stopPropagation(); success('\u0110\u00E3 copy: ' + perm.PermissionCode)\"\r\n >\r\n <i nz-icon nzType=\"copy\" style=\"color: #888\"></i>\r\n </button>\r\n </label>\r\n </nz-col>\r\n </nz-row>\r\n </nz-card>\r\n </div>\r\n </div>\r\n </nz-spin>\r\n</nz-card>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzCardModule }, { kind: "component", type: i3$5.NzCardComponent, selector: "nz-card", inputs: ["nzBordered", "nzLoading", "nzHoverable", "nzBodyStyle", "nzCover", "nzActions", "nzType", "nzSize", "nzTitle", "nzExtra"], exportAs: ["nzCard"] }, { kind: "ngmodule", type: NzSelectModule }, { kind: "component", type: i6.NzOptionComponent, selector: "nz-option", inputs: ["nzTitle", "nzLabel", "nzValue", "nzKey", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }, { kind: "component", type: i6.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzBorderless", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus"], exportAs: ["nzSelect"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$2.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i4$1.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzDividerModule }, { kind: "component", type: i8$1.NzDividerComponent, selector: "nz-divider", inputs: ["nzText", "nzType", "nzOrientation", "nzVariant", "nzDashed", "nzPlain"], exportAs: ["nzDivider"] }, { kind: "ngmodule", type: NzSpinModule }, { kind: "component", type: i2$1.NzSpinComponent, selector: "nz-spin", inputs: ["nzIndicator", "nzSize", "nzTip", "nzDelay", "nzSimple", "nzSpinning"], exportAs: ["nzSpin"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzCheckboxModule }, { kind: "component", type: i3$1.NzCheckboxComponent, selector: "[nz-checkbox]", inputs: ["nzValue", "nzAutoFocus", "nzDisabled", "nzIndeterminate", "nzChecked", "nzId", "nzName"], outputs: ["nzCheckedChange"], exportAs: ["nzCheckbox"] }, { kind: "ngmodule", type: ClipboardModule }, { kind: "directive", type: i12$1.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }] });
6269
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: RolePermissionComponent, isStandalone: true, selector: "role-resource-permission", usesInheritance: true, ngImport: i0, template: "<nz-card [nzBordered]=\"false\" nzTitle=\"C\u1EA5u h\u00ECnh Ph\u00E2n quy\u1EC1n H\u1EC7 th\u1ED1ng\">\r\n <div class=\"header-action\" nz-row nzJustify=\"space-between\" nzAlign=\"middle\" style=\"margin-bottom: 24px\">\r\n <div nz-col>\r\n <span style=\"margin-right: 16px; font-weight: bold\">Ch\u1ECDn Nh\u00F3m quy\u1EC1n (Role):</span>\r\n <nz-select\r\n [(ngModel)]=\"selectedId\"\r\n (ngModelChange)=\"onRoleChange($event)\"\r\n nzPlaceHolder=\"-- Vui l\u00F2ng ch\u1ECDn Role --\"\r\n style=\"width: 300px\"\r\n >\r\n <nz-option *ngFor=\"let role of lstRole\" [nzValue]=\"role.App_Role_Id\" [nzLabel]=\"role.Name || ''\"></nz-option>\r\n </nz-select>\r\n </div>\r\n <div nz-col>\r\n <button nz-button nzType=\"primary\" (click)=\"savePermissions()\" [nzLoading]=\"isSaving\" [disabled]=\"!selectedId\">\r\n <i nz-icon nzType=\"save\"></i> L\u01B0u c\u1EA5u h\u00ECnh\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <nz-divider></nz-divider>\r\n\r\n <nz-spin [nzSpinning]=\"isLoading\">\r\n <div *ngIf=\"!selectedId\" style=\"text-align: center; color: #999; padding: 40px 0\">\r\n Vui l\u00F2ng ch\u1ECDn m\u1ED9t Nh\u00F3m quy\u1EC1n \u0111\u1EC3 xem v\u00E0 c\u1EA5u h\u00ECnh.\r\n </div>\r\n\r\n <div *ngIf=\"selectedId\">\r\n <div *ngFor=\"let group of resourceGroups\" style=\"margin-bottom: 24px\">\r\n <h4 style=\"border-left: 4px solid #1890ff; padding-left: 8px; margin-bottom: 16px\">\r\n {{ group.ResourceName }}\r\n </h4>\r\n\r\n <nz-card [nzBordered]=\"true\" nzSize=\"small\">\r\n <nz-row [nzGutter]=\"[16, 16]\">\r\n <nz-col [nzSpan]=\"6\" *ngFor=\"let perm of group.permissions\">\r\n <label\r\n nz-checkbox\r\n [nzChecked]=\"isPermissionChecked(perm.App_Permission_Id)\"\r\n (nzCheckedChange)=\"onCheckChange(perm.App_Permission_Id, $event)\"\r\n >\r\n {{ perm.PermissionName }} <br />\r\n <small style=\"color: #888\">{{ perm.PermissionCode }}</small>\r\n <button\r\n nz-button\r\n nzType=\"text\"\r\n cdkCopyToClipboard=\"{{ perm.PermissionCode }}\"\r\n (click)=\"$event.stopPropagation(); success('\u0110\u00E3 copy: ' + perm.PermissionCode)\"\r\n >\r\n <i nz-icon nzType=\"copy\" style=\"color: #888\"></i>\r\n </button>\r\n </label>\r\n </nz-col>\r\n </nz-row>\r\n </nz-card>\r\n </div>\r\n </div>\r\n </nz-spin>\r\n</nz-card>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzCardModule }, { kind: "component", type: i3$5.NzCardComponent, selector: "nz-card", inputs: ["nzBordered", "nzLoading", "nzHoverable", "nzBodyStyle", "nzCover", "nzActions", "nzType", "nzSize", "nzTitle", "nzExtra"], exportAs: ["nzCard"] }, { kind: "ngmodule", type: NzSelectModule }, { kind: "component", type: i6.NzOptionComponent, selector: "nz-option", inputs: ["nzTitle", "nzLabel", "nzValue", "nzKey", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }, { kind: "component", type: i6.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzBorderless", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus"], exportAs: ["nzSelect"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$2.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i4$1.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzDividerModule }, { kind: "component", type: i8$1.NzDividerComponent, selector: "nz-divider", inputs: ["nzText", "nzType", "nzOrientation", "nzVariant", "nzDashed", "nzPlain"], exportAs: ["nzDivider"] }, { kind: "ngmodule", type: NzSpinModule }, { kind: "component", type: i2$1.NzSpinComponent, selector: "nz-spin", inputs: ["nzIndicator", "nzSize", "nzTip", "nzDelay", "nzSimple", "nzSpinning"], exportAs: ["nzSpin"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzCheckboxModule }, { kind: "component", type: i3$1.NzCheckboxComponent, selector: "[nz-checkbox]", inputs: ["nzValue", "nzAutoFocus", "nzDisabled", "nzIndeterminate", "nzChecked", "nzId", "nzName"], outputs: ["nzCheckedChange"], exportAs: ["nzCheckbox"] }, { kind: "ngmodule", type: ClipboardModule }, { kind: "directive", type: i12.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }] });
6274
6270
  }
6275
6271
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RolePermissionComponent, decorators: [{
6276
6272
  type: Component,
@@ -6517,7 +6513,7 @@ class PermissionManagerComponent extends BaseComponent {
6517
6513
  this.loadData();
6518
6514
  }
6519
6515
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: PermissionManagerComponent, deps: [{ token: i2.FormBuilder }, { token: PermissionService }], target: i0.ɵɵFactoryTarget.Component });
6520
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: PermissionManagerComponent, isStandalone: true, selector: "resource-permission", usesInheritance: true, ngImport: i0, template: "<nz-card nzTitle=\"Qu\u1EA3n l\u00FD Danh m\u1EE5c M\u00E3 quy\u1EC1n (App_Permission)\" [nzBordered]=\"false\">\r\n <div class=\"table-operations\" nz-row nzJustify=\"space-between\" style=\"margin-bottom: 16px\">\r\n <div nz-col nz-flex nzGap=\"small\">\r\n <expandable-search [(searchValue)]=\"searchText\" (onSearch)=\"loadData()\"></expandable-search>\r\n <button-reload (click)=\"loadData()\"></button-reload>\r\n </div>\r\n <div nz-col>\r\n <button nz-button nzType=\"primary\" (click)=\"openBulkModal()\" style=\"margin-right: 8px\">\r\n <i nz-icon nzType=\"plus\"></i> T\u1EA1o m\u1EDBi (default)\r\n </button>\r\n <button nz-button nzType=\"primary\" (click)=\"openModal()\"><i nz-icon nzType=\"plus\"></i> Th\u00EAm m\u1EDBi</button>\r\n </div>\r\n </div>\r\n\r\n <nz-table\r\n #basicTable\r\n [nzData]=\"permissions\"\r\n nzBordered\r\n nzSize=\"small\"\r\n nzShowPagination=\"true\"\r\n nzShowSizeChanger=\"true\"\r\n >\r\n <thead>\r\n <tr>\r\n <th>Resource</th>\r\n <th>Permission code</th>\r\n <th>Permission name</th>\r\n <th>Description</th>\r\n <th nzAlign=\"center\">H\u00E0nh \u0111\u1ED9ng</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let data of basicTable.data\">\r\n <td>\r\n <div nz-flex nzGap=\"small\">\r\n <span>{{ data.ResourceName }}</span\r\n ><nz-tag [nzColor]=\"'blue'\">{{ data.ResourceCode }}</nz-tag>\r\n </div>\r\n </td>\r\n <td>\r\n <strong>{{ data.PermissionCode }}</strong>\r\n </td>\r\n <td>{{ data.PermissionName }}</td>\r\n <td>{{ data.Description }}</td>\r\n <td nzAlign=\"center\">\r\n <a (click)=\"openModal(data)\"><i nz-icon nzType=\"edit\" nzTheme=\"outline\"></i></a>\r\n <nz-divider nzType=\"vertical\"></nz-divider>\r\n <a\r\n nz-popconfirm\r\n nzPopconfirmTitle=\"X\u00E1c nh\u1EADn x\u00F3a?\"\r\n nzPopconfirmPlacement=\"left\"\r\n (nzOnConfirm)=\"deletePermission(data.App_Permission_Id)\"\r\n style=\"color: red\"\r\n >\r\n <i nz-icon nzType=\"delete\" nzTheme=\"outline\"></i>\r\n </a>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </nz-table>\r\n</nz-card>\r\n\r\n<nz-modal\r\n [(nzVisible)]=\"isBulkModalVisible\"\r\n nzTitle=\"Create Resource permission\"\r\n (nzOnCancel)=\"closeBulkModal()\"\r\n (nzOnOk)=\"saveBulkPermissions()\"\r\n [nzMaskClosable]=\"false\"\r\n nzWidth=\"750px\"\r\n>\r\n <ng-container *nzModalContent>\r\n <!-- <div style=\"margin-bottom: 16px; color: #666\">\r\n <i nz-icon nzType=\"info-circle\"></i> H\u1EC7 th\u1ED1ng s\u1EBD t\u1EF1 \u0111\u1ED9ng sinh m\u00E3 quy\u1EC1n v\u00E0 t\u00EAn thao t\u00E1c d\u1EF1a tr\u00EAn Module b\u1EA1n nh\u1EADp.\r\n B\u1EA1n c\u00F3 th\u1EC3 b\u1ECF t\u00EDch c\u00E1c thao t\u00E1c kh\u00F4ng c\u1EA7n thi\u1EBFt.\r\n </div> -->\r\n\r\n <form nz-form [formGroup]=\"bulkForm\" nzLayout=\"vertical\">\r\n <nz-row [nzGutter]=\"16\">\r\n <nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>Resource Code</nz-form-label>\r\n <nz-form-control nzErrorTip=\"Vui l\u00F2ng nh\u1EADp m\u00E3 Module vi\u1EBFt li\u1EC1n!\">\r\n <input nz-input formControlName=\"ResourceCode\" placeholder=\"VD: Invoices, Products...\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </nz-col>\r\n\r\n <nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>Resource Name</nz-form-label>\r\n <nz-form-control nzErrorTip=\"Vui l\u00F2ng nh\u1EADp t\u00EAn Module!\">\r\n <input nz-input formControlName=\"ResourceName\" placeholder=\"VD: H\u00F3a \u0111\u01A1n, S\u1EA3n ph\u1EA9m...\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </nz-col>\r\n </nz-row>\r\n </form>\r\n\r\n <nz-divider nzText=\"Danh s\u00E1ch Thao t\u00E1c\" nzOrientation=\"left\"></nz-divider>\r\n\r\n <nz-row [nzGutter]=\"[16, 16]\">\r\n @for (item of bulkActionCheckboxes; track $index) {\r\n <nz-col [nzSpan]=\"$index == 0 ? 24 : 8\">\r\n <label nz-checkbox [(ngModel)]=\"item.checked\" [ngModelOptions]=\"{ standalone: true }\">\r\n {{ item.label }}\r\n </label>\r\n </nz-col>\r\n }\r\n </nz-row>\r\n </ng-container>\r\n</nz-modal>\r\n\r\n<nz-modal\r\n [(nzVisible)]=\"isModalVisible\"\r\n [nzTitle]=\"isEditMode ? 'Update Resource permission' : 'Create Resource permission'\"\r\n (nzOnCancel)=\"closeModal()\"\r\n (nzOnOk)=\"savePermission()\"\r\n [nzOkLoading]=\"isSaving\"\r\n [nzMaskClosable]=\"false\"\r\n>\r\n <ng-container *nzModalContent>\r\n <form nz-form [formGroup]=\"permissionForm\" nzLayout=\"vertical\">\r\n <nz-row [nzGutter]=\"16\">\r\n <nz-col [nzSpan]=\"24\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>Resource name</nz-form-label>\r\n <nz-form-control nzErrorTip=\"Vui l\u00F2ng nh\u1EADp nh\u00F3m Resource name!\">\r\n <input nz-input formControlName=\"ResourceName\" placeholder=\"VD: Todos\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </nz-col>\r\n\r\n <nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>Resource code</nz-form-label>\r\n <nz-form-control nzErrorTip=\"Vui l\u00F2ng nh\u1EADp nh\u00F3m Resource Code!\">\r\n <input nz-input formControlName=\"ResourceCode\" placeholder=\"VD: todo\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </nz-col>\r\n\r\n <nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>Permission code</nz-form-label>\r\n <nz-form-control nzErrorTip=\"Vui l\u00F2ng nh\u1EADp Permission code!\">\r\n <input\r\n nz-input\r\n formControlName=\"actionSuffix\"\r\n placeholder=\"-- Ch\u1ECDn ho\u1EB7c t\u1EF1 nh\u1EADp --\"\r\n [nzAutocomplete]=\"auto\"\r\n />\r\n\r\n <nz-autocomplete #auto>\r\n <nz-auto-option *ngFor=\"let option of filteredActionOptions\" [nzValue]=\"option.value\">\r\n {{ option.label }}\r\n </nz-auto-option>\r\n </nz-autocomplete>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </nz-col>\r\n </nz-row>\r\n\r\n <nz-form-item>\r\n <nz-form-label>M\u00E3 quy\u1EC1n h\u1EC7 th\u1ED1ng (T\u1EF1 \u0111\u1ED9ng sinh)</nz-form-label>\r\n <nz-form-control>\r\n <input\r\n nz-input\r\n formControlName=\"PermissionCode\"\r\n style=\"background-color: #f5f5f5; color: #1890ff; font-weight: bold; font-family: monospace\"\r\n />\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <nz-form-item>\r\n <nz-form-label nzRequired>T\u00EAn thao t\u00E1c hi\u1EC3n th\u1ECB</nz-form-label>\r\n <nz-form-control nzErrorTip=\"Vui l\u00F2ng nh\u1EADp t\u00EAn thao t\u00E1c!\">\r\n <input nz-input formControlName=\"PermissionName\" placeholder=\"VD: Xem c\u00F4ng vi\u1EC7c c\u1EE7a m\u00ECnh\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </form>\r\n </ng-container>\r\n</nz-modal>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: NzCardModule }, { kind: "component", type: i3$5.NzCardComponent, selector: "nz-card", inputs: ["nzBordered", "nzLoading", "nzHoverable", "nzBodyStyle", "nzCover", "nzActions", "nzType", "nzSize", "nzTitle", "nzExtra"], exportAs: ["nzCard"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i5$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i6$1.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "directive", type: i6$1.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$1.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$1.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$1.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$1.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "directive", type: i6$1.NzCellAlignDirective, selector: "th[nzAlign],td[nzAlign]", inputs: ["nzAlign"] }, { kind: "ngmodule", type: NzTagModule }, { kind: "component", type: i7.NzTagComponent, selector: "nz-tag", inputs: ["nzMode", "nzColor", "nzChecked", "nzBordered"], outputs: ["nzOnClose", "nzCheckedChange"], exportAs: ["nzTag"] }, { kind: "ngmodule", type: NzDividerModule }, { kind: "component", type: i8$1.NzDividerComponent, selector: "nz-divider", inputs: ["nzText", "nzType", "nzOrientation", "nzVariant", "nzDashed", "nzPlain"], exportAs: ["nzDivider"] }, { kind: "ngmodule", type: NzModalModule }, { kind: "component", type: i15.NzModalComponent, selector: "nz-modal", inputs: ["nzMask", "nzMaskClosable", "nzCloseOnNavigation", "nzVisible", "nzClosable", "nzOkLoading", "nzOkDisabled", "nzCancelDisabled", "nzCancelLoading", "nzKeyboard", "nzNoAnimation", "nzCentered", "nzDraggable", "nzContent", "nzFooter", "nzZIndex", "nzWidth", "nzWrapClassName", "nzClassName", "nzStyle", "nzTitle", "nzCloseIcon", "nzMaskStyle", "nzBodyStyle", "nzOkText", "nzCancelText", "nzOkType", "nzOkDanger", "nzIconType", "nzModalType", "nzAutofocus", "nzOnOk", "nzOnCancel"], outputs: ["nzOnOk", "nzOnCancel", "nzAfterOpen", "nzAfterClose", "nzVisibleChange"], exportAs: ["nzModal"] }, { kind: "directive", type: i15.NzModalContentDirective, selector: "[nzModalContent]", exportAs: ["nzModalContent"] }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "directive", type: i5.NzFormDirective, selector: "[nz-form]", inputs: ["nzLayout", "nzNoColon", "nzAutoTips", "nzDisableAutoTips", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzForm"] }, { kind: "component", type: i5.NzFormItemComponent, selector: "nz-form-item", exportAs: ["nzFormItem"] }, { kind: "component", type: i5.NzFormLabelComponent, selector: "nz-form-label", inputs: ["nzFor", "nzRequired", "nzNoColon", "nzTooltipTitle", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzFormLabel"] }, { kind: "component", type: i5.NzFormControlComponent, selector: "nz-form-control", inputs: ["nzSuccessTip", "nzWarningTip", "nzErrorTip", "nzValidatingTip", "nzExtra", "nzAutoTips", "nzDisableAutoTips", "nzHasFeedback", "nzValidateStatus"], exportAs: ["nzFormControl"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$2.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i4$1.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzSelectModule }, { kind: "ngmodule", type: NzCheckboxModule }, { kind: "component", type: i3$1.NzCheckboxComponent, selector: "[nz-checkbox]", inputs: ["nzValue", "nzAutoFocus", "nzDisabled", "nzIndeterminate", "nzChecked", "nzId", "nzName"], outputs: ["nzCheckedChange"], exportAs: ["nzCheckbox"] }, { kind: "ngmodule", type: NzAutocompleteModule }, { kind: "component", type: i16$1.NzAutocompleteComponent, selector: "nz-autocomplete", inputs: ["nzWidth", "nzOverlayClassName", "nzOverlayStyle", "nzDefaultActiveFirstOption", "nzBackfill", "compareWith", "nzDataSource"], outputs: ["selectionChange"], exportAs: ["nzAutocomplete"] }, { kind: "component", type: i16$1.NzAutocompleteOptionComponent, selector: "nz-auto-option", inputs: ["nzValue", "nzLabel", "nzDisabled"], outputs: ["selectionChange", "mouseEntered"], exportAs: ["nzAutoOption"] }, { kind: "directive", type: i16$1.NzAutocompleteTriggerDirective, selector: "input[nzAutocomplete], textarea[nzAutocomplete]", inputs: ["nzAutocomplete"], exportAs: ["nzAutocompleteTrigger"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "component", type: ExpandableSearchComponent, selector: "expandable-search", inputs: ["searchValue"], outputs: ["searchValueChange", "onSearch"] }, { kind: "ngmodule", type: NzPopconfirmModule }, { kind: "directive", type: i12.NzPopconfirmDirective, selector: "[nz-popconfirm]", inputs: ["nzPopconfirmArrowPointAtCenter", "nzPopconfirmTitle", "nzPopconfirmTitleContext", "nz-popconfirm", "nzPopconfirmTrigger", "nzPopconfirmPlacement", "nzPopconfirmOrigin", "nzPopconfirmMouseEnterDelay", "nzPopconfirmMouseLeaveDelay", "nzPopconfirmOverlayClassName", "nzPopconfirmOverlayStyle", "nzPopconfirmVisible", "nzOkText", "nzOkType", "nzOkDisabled", "nzOkDanger", "nzCancelText", "nzBeforeConfirm", "nzIcon", "nzCondition", "nzPopconfirmShowArrow", "nzPopconfirmBackdrop", "nzAutofocus"], outputs: ["nzPopconfirmVisibleChange", "nzOnCancel", "nzOnConfirm"], exportAs: ["nzPopconfirm"] }, { kind: "directive", type: NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "component", type: ButtonReload, selector: "button-reload" }] });
6516
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: PermissionManagerComponent, isStandalone: true, selector: "resource-permission", usesInheritance: true, ngImport: i0, template: "<nz-card nzTitle=\"Qu\u1EA3n l\u00FD Danh m\u1EE5c M\u00E3 quy\u1EC1n (App_Permission)\" [nzBordered]=\"false\">\r\n <div class=\"table-operations\" nz-row nzJustify=\"space-between\" style=\"margin-bottom: 16px\">\r\n <div nz-col nz-flex nzGap=\"small\">\r\n <expandable-search [(searchValue)]=\"searchText\" (onSearch)=\"loadData()\"></expandable-search>\r\n <button-reload (click)=\"loadData()\"></button-reload>\r\n </div>\r\n <div nz-col>\r\n <button nz-button nzType=\"primary\" (click)=\"openBulkModal()\" style=\"margin-right: 8px\">\r\n <i nz-icon nzType=\"plus\"></i> T\u1EA1o m\u1EDBi (default)\r\n </button>\r\n <button nz-button nzType=\"primary\" (click)=\"openModal()\"><i nz-icon nzType=\"plus\"></i> Th\u00EAm m\u1EDBi</button>\r\n </div>\r\n </div>\r\n\r\n <nz-table\r\n #basicTable\r\n [nzData]=\"permissions\"\r\n nzBordered\r\n nzSize=\"small\"\r\n nzShowPagination=\"true\"\r\n nzShowSizeChanger=\"true\"\r\n >\r\n <thead>\r\n <tr>\r\n <th>Resource</th>\r\n <th>Permission code</th>\r\n <th>Permission name</th>\r\n <th>Description</th>\r\n <th nzAlign=\"center\">H\u00E0nh \u0111\u1ED9ng</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let data of basicTable.data\">\r\n <td>\r\n <div nz-flex nzGap=\"small\">\r\n <span>{{ data.ResourceName }}</span\r\n ><nz-tag [nzColor]=\"'blue'\">{{ data.ResourceCode }}</nz-tag>\r\n </div>\r\n </td>\r\n <td>\r\n <strong>{{ data.PermissionCode }}</strong>\r\n </td>\r\n <td>{{ data.PermissionName }}</td>\r\n <td>{{ data.Description }}</td>\r\n <td nzAlign=\"center\">\r\n <a (click)=\"openModal(data)\"><i nz-icon nzType=\"edit\" nzTheme=\"outline\"></i></a>\r\n <nz-divider nzType=\"vertical\"></nz-divider>\r\n <a\r\n nz-popconfirm\r\n nzPopconfirmTitle=\"X\u00E1c nh\u1EADn x\u00F3a?\"\r\n nzPopconfirmPlacement=\"left\"\r\n (nzOnConfirm)=\"deletePermission(data.App_Permission_Id)\"\r\n style=\"color: red\"\r\n >\r\n <i nz-icon nzType=\"delete\" nzTheme=\"outline\"></i>\r\n </a>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </nz-table>\r\n</nz-card>\r\n\r\n<nz-modal\r\n [(nzVisible)]=\"isBulkModalVisible\"\r\n nzTitle=\"Create Resource permission\"\r\n (nzOnCancel)=\"closeBulkModal()\"\r\n (nzOnOk)=\"saveBulkPermissions()\"\r\n [nzMaskClosable]=\"false\"\r\n nzWidth=\"750px\"\r\n>\r\n <ng-container *nzModalContent>\r\n <!-- <div style=\"margin-bottom: 16px; color: #666\">\r\n <i nz-icon nzType=\"info-circle\"></i> H\u1EC7 th\u1ED1ng s\u1EBD t\u1EF1 \u0111\u1ED9ng sinh m\u00E3 quy\u1EC1n v\u00E0 t\u00EAn thao t\u00E1c d\u1EF1a tr\u00EAn Module b\u1EA1n nh\u1EADp.\r\n B\u1EA1n c\u00F3 th\u1EC3 b\u1ECF t\u00EDch c\u00E1c thao t\u00E1c kh\u00F4ng c\u1EA7n thi\u1EBFt.\r\n </div> -->\r\n\r\n <form nz-form [formGroup]=\"bulkForm\" nzLayout=\"vertical\">\r\n <nz-row [nzGutter]=\"16\">\r\n <nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>Resource Code</nz-form-label>\r\n <nz-form-control nzErrorTip=\"Vui l\u00F2ng nh\u1EADp m\u00E3 Module vi\u1EBFt li\u1EC1n!\">\r\n <input nz-input formControlName=\"ResourceCode\" placeholder=\"VD: Invoices, Products...\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </nz-col>\r\n\r\n <nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>Resource Name</nz-form-label>\r\n <nz-form-control nzErrorTip=\"Vui l\u00F2ng nh\u1EADp t\u00EAn Module!\">\r\n <input nz-input formControlName=\"ResourceName\" placeholder=\"VD: H\u00F3a \u0111\u01A1n, S\u1EA3n ph\u1EA9m...\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </nz-col>\r\n </nz-row>\r\n </form>\r\n\r\n <nz-divider nzText=\"Danh s\u00E1ch Thao t\u00E1c\" nzOrientation=\"left\"></nz-divider>\r\n\r\n <nz-row [nzGutter]=\"[16, 16]\">\r\n @for (item of bulkActionCheckboxes; track $index) {\r\n <nz-col [nzSpan]=\"$index == 0 ? 24 : 8\">\r\n <label nz-checkbox [(ngModel)]=\"item.checked\" [ngModelOptions]=\"{ standalone: true }\">\r\n {{ item.label }}\r\n </label>\r\n </nz-col>\r\n }\r\n </nz-row>\r\n </ng-container>\r\n</nz-modal>\r\n\r\n<nz-modal\r\n [(nzVisible)]=\"isModalVisible\"\r\n [nzTitle]=\"isEditMode ? 'Update Resource permission' : 'Create Resource permission'\"\r\n (nzOnCancel)=\"closeModal()\"\r\n (nzOnOk)=\"savePermission()\"\r\n [nzOkLoading]=\"isSaving\"\r\n [nzMaskClosable]=\"false\"\r\n>\r\n <ng-container *nzModalContent>\r\n <form nz-form [formGroup]=\"permissionForm\" nzLayout=\"vertical\">\r\n <nz-row [nzGutter]=\"16\">\r\n <nz-col [nzSpan]=\"24\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>Resource name</nz-form-label>\r\n <nz-form-control nzErrorTip=\"Vui l\u00F2ng nh\u1EADp nh\u00F3m Resource name!\">\r\n <input nz-input formControlName=\"ResourceName\" placeholder=\"VD: Todos\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </nz-col>\r\n\r\n <nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>Resource code</nz-form-label>\r\n <nz-form-control nzErrorTip=\"Vui l\u00F2ng nh\u1EADp nh\u00F3m Resource Code!\">\r\n <input nz-input formControlName=\"ResourceCode\" placeholder=\"VD: todo\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </nz-col>\r\n\r\n <nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>Permission code</nz-form-label>\r\n <nz-form-control nzErrorTip=\"Vui l\u00F2ng nh\u1EADp Permission code!\">\r\n <input\r\n nz-input\r\n formControlName=\"actionSuffix\"\r\n placeholder=\"-- Ch\u1ECDn ho\u1EB7c t\u1EF1 nh\u1EADp --\"\r\n [nzAutocomplete]=\"auto\"\r\n />\r\n\r\n <nz-autocomplete #auto>\r\n <nz-auto-option *ngFor=\"let option of filteredActionOptions\" [nzValue]=\"option.value\">\r\n {{ option.label }}\r\n </nz-auto-option>\r\n </nz-autocomplete>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </nz-col>\r\n </nz-row>\r\n\r\n <nz-form-item>\r\n <nz-form-label>M\u00E3 quy\u1EC1n h\u1EC7 th\u1ED1ng (T\u1EF1 \u0111\u1ED9ng sinh)</nz-form-label>\r\n <nz-form-control>\r\n <input\r\n nz-input\r\n formControlName=\"PermissionCode\"\r\n style=\"background-color: #f5f5f5; color: #1890ff; font-weight: bold; font-family: monospace\"\r\n />\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <nz-form-item>\r\n <nz-form-label nzRequired>T\u00EAn thao t\u00E1c hi\u1EC3n th\u1ECB</nz-form-label>\r\n <nz-form-control nzErrorTip=\"Vui l\u00F2ng nh\u1EADp t\u00EAn thao t\u00E1c!\">\r\n <input nz-input formControlName=\"PermissionName\" placeholder=\"VD: Xem c\u00F4ng vi\u1EC7c c\u1EE7a m\u00ECnh\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </form>\r\n </ng-container>\r\n</nz-modal>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: NzCardModule }, { kind: "component", type: i3$5.NzCardComponent, selector: "nz-card", inputs: ["nzBordered", "nzLoading", "nzHoverable", "nzBodyStyle", "nzCover", "nzActions", "nzType", "nzSize", "nzTitle", "nzExtra"], exportAs: ["nzCard"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i5$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i6$1.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "directive", type: i6$1.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$1.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$1.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$1.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$1.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "directive", type: i6$1.NzCellAlignDirective, selector: "th[nzAlign],td[nzAlign]", inputs: ["nzAlign"] }, { kind: "ngmodule", type: NzTagModule }, { kind: "component", type: i7.NzTagComponent, selector: "nz-tag", inputs: ["nzMode", "nzColor", "nzChecked", "nzBordered"], outputs: ["nzOnClose", "nzCheckedChange"], exportAs: ["nzTag"] }, { kind: "ngmodule", type: NzDividerModule }, { kind: "component", type: i8$1.NzDividerComponent, selector: "nz-divider", inputs: ["nzText", "nzType", "nzOrientation", "nzVariant", "nzDashed", "nzPlain"], exportAs: ["nzDivider"] }, { kind: "ngmodule", type: NzModalModule }, { kind: "component", type: i15.NzModalComponent, selector: "nz-modal", inputs: ["nzMask", "nzMaskClosable", "nzCloseOnNavigation", "nzVisible", "nzClosable", "nzOkLoading", "nzOkDisabled", "nzCancelDisabled", "nzCancelLoading", "nzKeyboard", "nzNoAnimation", "nzCentered", "nzDraggable", "nzContent", "nzFooter", "nzZIndex", "nzWidth", "nzWrapClassName", "nzClassName", "nzStyle", "nzTitle", "nzCloseIcon", "nzMaskStyle", "nzBodyStyle", "nzOkText", "nzCancelText", "nzOkType", "nzOkDanger", "nzIconType", "nzModalType", "nzAutofocus", "nzOnOk", "nzOnCancel"], outputs: ["nzOnOk", "nzOnCancel", "nzAfterOpen", "nzAfterClose", "nzVisibleChange"], exportAs: ["nzModal"] }, { kind: "directive", type: i15.NzModalContentDirective, selector: "[nzModalContent]", exportAs: ["nzModalContent"] }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "directive", type: i5.NzFormDirective, selector: "[nz-form]", inputs: ["nzLayout", "nzNoColon", "nzAutoTips", "nzDisableAutoTips", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzForm"] }, { kind: "component", type: i5.NzFormItemComponent, selector: "nz-form-item", exportAs: ["nzFormItem"] }, { kind: "component", type: i5.NzFormLabelComponent, selector: "nz-form-label", inputs: ["nzFor", "nzRequired", "nzNoColon", "nzTooltipTitle", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzFormLabel"] }, { kind: "component", type: i5.NzFormControlComponent, selector: "nz-form-control", inputs: ["nzSuccessTip", "nzWarningTip", "nzErrorTip", "nzValidatingTip", "nzExtra", "nzAutoTips", "nzDisableAutoTips", "nzHasFeedback", "nzValidateStatus"], exportAs: ["nzFormControl"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$2.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i4$1.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzSelectModule }, { kind: "ngmodule", type: NzCheckboxModule }, { kind: "component", type: i3$1.NzCheckboxComponent, selector: "[nz-checkbox]", inputs: ["nzValue", "nzAutoFocus", "nzDisabled", "nzIndeterminate", "nzChecked", "nzId", "nzName"], outputs: ["nzCheckedChange"], exportAs: ["nzCheckbox"] }, { kind: "ngmodule", type: NzAutocompleteModule }, { kind: "component", type: i16$1.NzAutocompleteComponent, selector: "nz-autocomplete", inputs: ["nzWidth", "nzOverlayClassName", "nzOverlayStyle", "nzDefaultActiveFirstOption", "nzBackfill", "compareWith", "nzDataSource"], outputs: ["selectionChange"], exportAs: ["nzAutocomplete"] }, { kind: "component", type: i16$1.NzAutocompleteOptionComponent, selector: "nz-auto-option", inputs: ["nzValue", "nzLabel", "nzDisabled"], outputs: ["selectionChange", "mouseEntered"], exportAs: ["nzAutoOption"] }, { kind: "directive", type: i16$1.NzAutocompleteTriggerDirective, selector: "input[nzAutocomplete], textarea[nzAutocomplete]", inputs: ["nzAutocomplete"], exportAs: ["nzAutocompleteTrigger"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "component", type: ExpandableSearchComponent, selector: "expandable-search", inputs: ["searchValue"], outputs: ["searchValueChange", "onSearch"] }, { kind: "ngmodule", type: NzPopconfirmModule }, { kind: "directive", type: i9$1.NzPopconfirmDirective, selector: "[nz-popconfirm]", inputs: ["nzPopconfirmArrowPointAtCenter", "nzPopconfirmTitle", "nzPopconfirmTitleContext", "nz-popconfirm", "nzPopconfirmTrigger", "nzPopconfirmPlacement", "nzPopconfirmOrigin", "nzPopconfirmMouseEnterDelay", "nzPopconfirmMouseLeaveDelay", "nzPopconfirmOverlayClassName", "nzPopconfirmOverlayStyle", "nzPopconfirmVisible", "nzOkText", "nzOkType", "nzOkDisabled", "nzOkDanger", "nzCancelText", "nzBeforeConfirm", "nzIcon", "nzCondition", "nzPopconfirmShowArrow", "nzPopconfirmBackdrop", "nzAutofocus"], outputs: ["nzPopconfirmVisibleChange", "nzOnCancel", "nzOnConfirm"], exportAs: ["nzPopconfirm"] }, { kind: "directive", type: NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "component", type: ButtonReload, selector: "button-reload" }] });
6521
6517
  }
6522
6518
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: PermissionManagerComponent, decorators: [{
6523
6519
  type: Component,
@@ -6925,7 +6921,7 @@ class RoleDetailComponent extends BaseComponent {
6925
6921
  // this.notiService.success('Đã xóa User khỏi danh sách');
6926
6922
  }
6927
6923
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RoleDetailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
6928
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: RoleDetailComponent, isStandalone: true, selector: "app-menu-detail", viewQueries: [{ propertyName: "parentSelect", first: true, predicate: ["parentSelect"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<form nz-form [formGroup]=\"formData\">\r\n <div nz-flex nzJustify=\"end\">\r\n <div nz-flex [nzGap]=\"'small'\">\r\n <button-save (click)=\"save()\"></button-save>\r\n <button-delete *ngIf=\"item.App_Role_Id\" (click)=\"delete()\"></button-delete>\r\n <button-back (click)=\"goto('/admin/role')\"></button-back>\r\n </div>\r\n </div>\r\n\r\n <nz-divider></nz-divider>\r\n\r\n <div nz-row [nzGutter]=\"[32, 0]\">\r\n <div nz-col [nzMd]=\"12\" [nzSm]=\"24\">\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"8\" nzFor=\"Code\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired> M\u00E3 </nz-form-label>\r\n <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n <input nz-input formControlName=\"Code\" id=\"Code\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"8\" nzFor=\"Name\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired> T\u00EAn </nz-form-label>\r\n <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n <input nz-input formControlName=\"Name\" id=\"Name\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"8\" nzFor=\"Description\" nzLabelAlign=\"left\" nzNoColon=\"true\"> M\u00F4 t\u1EA3 </nz-form-label>\r\n <nz-form-control [nzSpan]=\"16\">\r\n <input nz-input formControlName=\"Description\" id=\"Description\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n <div nz-row>\r\n <div nz-col [nzSpan]=\"8\"></div>\r\n <div nz-col [nzSpan]=\"16\">\r\n <label nz-checkbox formControlName=\"IsActive\">Active</label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-tabset nzType=\"card\" nzSize=\"small\">\r\n <nz-tab nzTitle=\"Menu\">\r\n <h3>Ph\u00E2n quy\u1EC1n Menu</h3>\r\n <nz-tree\r\n [nzData]=\"nodes\"\r\n nzCheckable\r\n nzMultiple\r\n [(nzCheckedKeys)]=\"checkedKeys\"\r\n (nzCheckedKeysChange)=\"change()\"\r\n ></nz-tree>\r\n </nz-tab>\r\n <nz-tab nzTitle=\"User\">\r\n <div style=\"padding: 8px\">\r\n <h3 style=\"margin-bottom: 16px\">Danh s\u00E1ch User trong Role</h3>\r\n\r\n <div nz-flex [nzJustify]=\"'space-between'\" [nzAlign]=\"'center'\" style=\"margin-bottom: 12px\">\r\n <span style=\"font-weight: 500\">Users ({{ lstUserInRole.length }})</span>\r\n <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"openAddUserModal()\">\r\n <span nz-icon nzType=\"plus\"></span>\r\n Th\u00EAm User\r\n </button>\r\n </div>\r\n\r\n <div style=\"max-height: 450px; overflow-y: auto\">\r\n <nz-table\r\n #userTable\r\n [nzData]=\"lstUserInRole\"\r\n [nzSize]=\"'small'\"\r\n [nzShowPagination]=\"lstUserInRole.length > 20\"\r\n [nzPageSize]=\"20\"\r\n >\r\n <thead>\r\n <tr>\r\n <th nzWidth=\"40px\">STT</th>\r\n <th>User</th>\r\n <th nzWidth=\"50px\" nzAlign=\"center\"></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let item of userTable.data; let i = index\">\r\n <td>{{ i + 1 }}</td>\r\n <td>\r\n <div style=\"font-weight: 500\">{{ item.UserName }}</div>\r\n <div style=\"font-size: 12px; color: #888\">{{ item.FullName }}</div>\r\n <div *ngIf=\"item.Email\" style=\"font-size: 11px; color: #aaa\">{{ item.Email }}</div>\r\n </td>\r\n <td nzAlign=\"center\">\r\n <button\r\n nz-button\r\n nzType=\"link\"\r\n nzDanger\r\n nzSize=\"small\"\r\n nz-popconfirm\r\n nzPopconfirmTitle=\"X\u00F3a User n\u00E0y?\"\r\n (nzOnConfirm)=\"deleteUserFromRole(item)\"\r\n >\r\n <span nz-icon nzType=\"delete\" nzTheme=\"outline\"></span>\r\n </button>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </nz-table>\r\n </div>\r\n </div>\r\n </nz-tab>\r\n </nz-tabset>\r\n </div>\r\n </div>\r\n</form>\r\n\r\n<!-- Modal ch\u1ECDn User -->\r\n<nz-modal\r\n [(nzVisible)]=\"isAddUserModalVisible\"\r\n nzTitle=\"Th\u00EAm User v\u00E0o Role\"\r\n [nzWidth]=\"700\"\r\n (nzOnCancel)=\"closeAddUserModal()\"\r\n (nzOnOk)=\"addUsersToRole()\"\r\n nzOkText=\"Th\u00EAm\"\r\n nzCancelText=\"H\u1EE7y\"\r\n>\r\n <ng-container *nzModalContent>\r\n <!-- Search box -->\r\n <nz-input-group [nzPrefix]=\"prefixIconSearch\" style=\"margin-bottom: 16px\">\r\n <input\r\n type=\"text\"\r\n nz-input\r\n placeholder=\"T\u00ECm ki\u1EBFm User...\"\r\n [(ngModel)]=\"searchUserText\"\r\n (ngModelChange)=\"filterAvailableUsers()\"\r\n />\r\n </nz-input-group>\r\n <ng-template #prefixIconSearch>\r\n <span nz-icon nzType=\"search\"></span>\r\n </ng-template>\r\n\r\n <nz-table\r\n #addUserTable\r\n [nzData]=\"lstFilteredUser\"\r\n [nzSize]=\"'small'\"\r\n [nzShowPagination]=\"true\"\r\n [nzPageSize]=\"10\"\r\n [nzLoading]=\"isLoadingAvailableUsers\"\r\n >\r\n <thead>\r\n <tr>\r\n <th\r\n nzWidth=\"60px\"\r\n nzShowCheckbox\r\n [(nzChecked)]=\"isAllUserChecked\"\r\n (nzCheckedChange)=\"onAllUserChecked($event)\"\r\n [nzIndeterminate]=\"isUserIndeterminate\"\r\n ></th>\r\n <th nzWidth=\"150px\">Username</th>\r\n <th>T\u00EAn \u0111\u1EA7y \u0111\u1EE7</th>\r\n <th>Email</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let item of addUserTable.data\">\r\n <td>\r\n <label nz-checkbox [(ngModel)]=\"item.checked\" (ngModelChange)=\"onUserChecked(item, $event)\"></label>\r\n </td>\r\n <td>{{ item.UserName }}</td>\r\n <td>{{ item.FullName }}</td>\r\n <td>{{ item.Email }}</td>\r\n </tr>\r\n </tbody>\r\n </nz-table>\r\n </ng-container>\r\n</nz-modal>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "directive", type: i5.NzFormDirective, selector: "[nz-form]", inputs: ["nzLayout", "nzNoColon", "nzAutoTips", "nzDisableAutoTips", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzForm"] }, { kind: "component", type: i5.NzFormItemComponent, selector: "nz-form-item", exportAs: ["nzFormItem"] }, { kind: "component", type: i5.NzFormLabelComponent, selector: "nz-form-label", inputs: ["nzFor", "nzRequired", "nzNoColon", "nzTooltipTitle", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzFormLabel"] }, { kind: "component", type: i5.NzFormControlComponent, selector: "nz-form-control", inputs: ["nzSuccessTip", "nzWarningTip", "nzErrorTip", "nzValidatingTip", "nzExtra", "nzAutoTips", "nzDisableAutoTips", "nzHasFeedback", "nzValidateStatus"], exportAs: ["nzFormControl"] }, { kind: "ngmodule", type: NzTreeModule }, { kind: "component", type: i6$2.NzTreeComponent, selector: "nz-tree", inputs: ["nzShowIcon", "nzHideUnMatched", "nzBlockNode", "nzExpandAll", "nzSelectMode", "nzCheckStrictly", "nzShowExpand", "nzShowLine", "nzCheckable", "nzAsyncData", "nzDraggable", "nzMultiple", "nzExpandedIcon", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualHeight", "nzTreeTemplate", "nzBeforeDrop", "nzData", "nzExpandedKeys", "nzSelectedKeys", "nzCheckedKeys", "nzSearchValue", "nzSearchFunc"], outputs: ["nzExpandedKeysChange", "nzSelectedKeysChange", "nzCheckedKeysChange", "nzSearchValueChange", "nzClick", "nzDblClick", "nzContextMenu", "nzCheckboxChange", "nzExpandChange", "nzOnDragStart", "nzOnDragEnter", "nzOnDragOver", "nzOnDragLeave", "nzOnDrop", "nzOnDragEnd"], exportAs: ["nzTree"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "ngmodule", type: NzTabsModule }, { kind: "component", type: i1$7.NzTabSetComponent, selector: "nz-tabset", inputs: ["nzSelectedIndex", "nzTabPosition", "nzTabBarExtraContent", "nzCanDeactivate", "nzAddIcon", "nzTabBarStyle", "nzType", "nzSize", "nzAnimated", "nzTabBarGutter", "nzHideAdd", "nzCentered", "nzHideAll", "nzLinkRouter", "nzLinkExact", "nzDestroyInactiveTabPane"], outputs: ["nzSelectChange", "nzSelectedIndexChange", "nzTabListScroll", "nzClose", "nzAdd"], exportAs: ["nzTabset"] }, { kind: "component", type: i1$7.NzTabComponent, selector: "nz-tab", inputs: ["nzTitle", "nzClosable", "nzCloseIcon", "nzDisabled", "nzForceRender"], outputs: ["nzSelect", "nzDeselect", "nzClick", "nzContextmenu"], exportAs: ["nzTab"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i5$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i5$1.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i5$1.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$2.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i4$1.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzCheckboxModule }, { kind: "component", type: i3$1.NzCheckboxComponent, selector: "[nz-checkbox]", inputs: ["nzValue", "nzAutoFocus", "nzDisabled", "nzIndeterminate", "nzChecked", "nzId", "nzName"], outputs: ["nzCheckedChange"], exportAs: ["nzCheckbox"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i6$1.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "directive", type: i6$1.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$1.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$1.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$1.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$1.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "directive", type: i6$1.NzCellAlignDirective, selector: "th[nzAlign],td[nzAlign]", inputs: ["nzAlign"] }, { kind: "component", type: i6$1.NzThSelectionComponent, selector: "th[nzSelections],th[nzChecked],th[nzShowCheckbox],th[nzShowRowSelection]", inputs: ["nzSelections", "nzChecked", "nzDisabled", "nzIndeterminate", "nzLabel", "nzShowCheckbox", "nzShowRowSelection"], outputs: ["nzCheckedChange"] }, { kind: "ngmodule", type: NzModalModule }, { kind: "component", type: i15.NzModalComponent, selector: "nz-modal", inputs: ["nzMask", "nzMaskClosable", "nzCloseOnNavigation", "nzVisible", "nzClosable", "nzOkLoading", "nzOkDisabled", "nzCancelDisabled", "nzCancelLoading", "nzKeyboard", "nzNoAnimation", "nzCentered", "nzDraggable", "nzContent", "nzFooter", "nzZIndex", "nzWidth", "nzWrapClassName", "nzClassName", "nzStyle", "nzTitle", "nzCloseIcon", "nzMaskStyle", "nzBodyStyle", "nzOkText", "nzCancelText", "nzOkType", "nzOkDanger", "nzIconType", "nzModalType", "nzAutofocus", "nzOnOk", "nzOnCancel"], outputs: ["nzOnOk", "nzOnCancel", "nzAfterOpen", "nzAfterClose", "nzVisibleChange"], exportAs: ["nzModal"] }, { kind: "directive", type: i15.NzModalContentDirective, selector: "[nzModalContent]", exportAs: ["nzModalContent"] }, { kind: "ngmodule", type: NzPopconfirmModule }, { kind: "directive", type: i12.NzPopconfirmDirective, selector: "[nz-popconfirm]", inputs: ["nzPopconfirmArrowPointAtCenter", "nzPopconfirmTitle", "nzPopconfirmTitleContext", "nz-popconfirm", "nzPopconfirmTrigger", "nzPopconfirmPlacement", "nzPopconfirmOrigin", "nzPopconfirmMouseEnterDelay", "nzPopconfirmMouseLeaveDelay", "nzPopconfirmOverlayClassName", "nzPopconfirmOverlayStyle", "nzPopconfirmVisible", "nzOkText", "nzOkType", "nzOkDisabled", "nzOkDanger", "nzCancelText", "nzBeforeConfirm", "nzIcon", "nzCondition", "nzPopconfirmShowArrow", "nzPopconfirmBackdrop", "nzAutofocus"], outputs: ["nzPopconfirmVisibleChange", "nzOnCancel", "nzOnConfirm"], exportAs: ["nzPopconfirm"] }, { kind: "ngmodule", type: NzEmptyModule }, { kind: "ngmodule", type: NzAlertModule }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzDividerModule }, { kind: "component", type: i8$1.NzDividerComponent, selector: "nz-divider", inputs: ["nzText", "nzType", "nzOrientation", "nzVariant", "nzDashed", "nzPlain"], exportAs: ["nzDivider"] }, { kind: "component", type: ButtonBack, selector: "button-back" }, { kind: "component", type: ButtonSave, selector: "button-save" }, { kind: "component", type: ButtonDelete, selector: "button-delete" }] });
6924
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: RoleDetailComponent, isStandalone: true, selector: "app-menu-detail", viewQueries: [{ propertyName: "parentSelect", first: true, predicate: ["parentSelect"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<form nz-form [formGroup]=\"formData\">\r\n <div nz-flex nzJustify=\"end\">\r\n <div nz-flex [nzGap]=\"'small'\">\r\n <button-save (click)=\"save()\"></button-save>\r\n <button-delete *ngIf=\"item.App_Role_Id\" (click)=\"delete()\"></button-delete>\r\n <button-back (click)=\"goto('/admin/role')\"></button-back>\r\n </div>\r\n </div>\r\n\r\n <nz-divider></nz-divider>\r\n\r\n <div nz-row [nzGutter]=\"[32, 0]\">\r\n <div nz-col [nzMd]=\"12\" [nzSm]=\"24\">\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"8\" nzFor=\"Code\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired> M\u00E3 </nz-form-label>\r\n <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n <input nz-input formControlName=\"Code\" id=\"Code\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"8\" nzFor=\"Name\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired> T\u00EAn </nz-form-label>\r\n <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n <input nz-input formControlName=\"Name\" id=\"Name\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"8\" nzFor=\"Description\" nzLabelAlign=\"left\" nzNoColon=\"true\"> M\u00F4 t\u1EA3 </nz-form-label>\r\n <nz-form-control [nzSpan]=\"16\">\r\n <input nz-input formControlName=\"Description\" id=\"Description\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n <div nz-row>\r\n <div nz-col [nzSpan]=\"8\"></div>\r\n <div nz-col [nzSpan]=\"16\">\r\n <label nz-checkbox formControlName=\"IsActive\">Active</label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-tabset nzType=\"card\" nzSize=\"small\">\r\n <nz-tab nzTitle=\"Menu\">\r\n <h3>Ph\u00E2n quy\u1EC1n Menu</h3>\r\n <nz-tree\r\n [nzData]=\"nodes\"\r\n nzCheckable\r\n nzMultiple\r\n [(nzCheckedKeys)]=\"checkedKeys\"\r\n (nzCheckedKeysChange)=\"change()\"\r\n ></nz-tree>\r\n </nz-tab>\r\n <nz-tab nzTitle=\"User\">\r\n <div style=\"padding: 8px\">\r\n <h3 style=\"margin-bottom: 16px\">Danh s\u00E1ch User trong Role</h3>\r\n\r\n <div nz-flex [nzJustify]=\"'space-between'\" [nzAlign]=\"'center'\" style=\"margin-bottom: 12px\">\r\n <span style=\"font-weight: 500\">Users ({{ lstUserInRole.length }})</span>\r\n <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"openAddUserModal()\">\r\n <span nz-icon nzType=\"plus\"></span>\r\n Th\u00EAm User\r\n </button>\r\n </div>\r\n\r\n <div style=\"max-height: 450px; overflow-y: auto\">\r\n <nz-table\r\n #userTable\r\n [nzData]=\"lstUserInRole\"\r\n [nzSize]=\"'small'\"\r\n [nzShowPagination]=\"lstUserInRole.length > 20\"\r\n [nzPageSize]=\"20\"\r\n >\r\n <thead>\r\n <tr>\r\n <th nzWidth=\"40px\">STT</th>\r\n <th>User</th>\r\n <th nzWidth=\"50px\" nzAlign=\"center\"></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let item of userTable.data; let i = index\">\r\n <td>{{ i + 1 }}</td>\r\n <td>\r\n <div style=\"font-weight: 500\">{{ item.UserName }}</div>\r\n <div style=\"font-size: 12px; color: #888\">{{ item.FullName }}</div>\r\n <div *ngIf=\"item.Email\" style=\"font-size: 11px; color: #aaa\">{{ item.Email }}</div>\r\n </td>\r\n <td nzAlign=\"center\">\r\n <button\r\n nz-button\r\n nzType=\"link\"\r\n nzDanger\r\n nzSize=\"small\"\r\n nz-popconfirm\r\n nzPopconfirmTitle=\"X\u00F3a User n\u00E0y?\"\r\n (nzOnConfirm)=\"deleteUserFromRole(item)\"\r\n >\r\n <span nz-icon nzType=\"delete\" nzTheme=\"outline\"></span>\r\n </button>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </nz-table>\r\n </div>\r\n </div>\r\n </nz-tab>\r\n </nz-tabset>\r\n </div>\r\n </div>\r\n</form>\r\n\r\n<!-- Modal ch\u1ECDn User -->\r\n<nz-modal\r\n [(nzVisible)]=\"isAddUserModalVisible\"\r\n nzTitle=\"Th\u00EAm User v\u00E0o Role\"\r\n [nzWidth]=\"700\"\r\n (nzOnCancel)=\"closeAddUserModal()\"\r\n (nzOnOk)=\"addUsersToRole()\"\r\n nzOkText=\"Th\u00EAm\"\r\n nzCancelText=\"H\u1EE7y\"\r\n>\r\n <ng-container *nzModalContent>\r\n <!-- Search box -->\r\n <nz-input-group [nzPrefix]=\"prefixIconSearch\" style=\"margin-bottom: 16px\">\r\n <input\r\n type=\"text\"\r\n nz-input\r\n placeholder=\"T\u00ECm ki\u1EBFm User...\"\r\n [(ngModel)]=\"searchUserText\"\r\n (ngModelChange)=\"filterAvailableUsers()\"\r\n />\r\n </nz-input-group>\r\n <ng-template #prefixIconSearch>\r\n <span nz-icon nzType=\"search\"></span>\r\n </ng-template>\r\n\r\n <nz-table\r\n #addUserTable\r\n [nzData]=\"lstFilteredUser\"\r\n [nzSize]=\"'small'\"\r\n [nzShowPagination]=\"true\"\r\n [nzPageSize]=\"10\"\r\n [nzLoading]=\"isLoadingAvailableUsers\"\r\n >\r\n <thead>\r\n <tr>\r\n <th\r\n nzWidth=\"60px\"\r\n nzShowCheckbox\r\n [(nzChecked)]=\"isAllUserChecked\"\r\n (nzCheckedChange)=\"onAllUserChecked($event)\"\r\n [nzIndeterminate]=\"isUserIndeterminate\"\r\n ></th>\r\n <th nzWidth=\"150px\">Username</th>\r\n <th>T\u00EAn \u0111\u1EA7y \u0111\u1EE7</th>\r\n <th>Email</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let item of addUserTable.data\">\r\n <td>\r\n <label nz-checkbox [(ngModel)]=\"item.checked\" (ngModelChange)=\"onUserChecked(item, $event)\"></label>\r\n </td>\r\n <td>{{ item.UserName }}</td>\r\n <td>{{ item.FullName }}</td>\r\n <td>{{ item.Email }}</td>\r\n </tr>\r\n </tbody>\r\n </nz-table>\r\n </ng-container>\r\n</nz-modal>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "directive", type: i5.NzFormDirective, selector: "[nz-form]", inputs: ["nzLayout", "nzNoColon", "nzAutoTips", "nzDisableAutoTips", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzForm"] }, { kind: "component", type: i5.NzFormItemComponent, selector: "nz-form-item", exportAs: ["nzFormItem"] }, { kind: "component", type: i5.NzFormLabelComponent, selector: "nz-form-label", inputs: ["nzFor", "nzRequired", "nzNoColon", "nzTooltipTitle", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzFormLabel"] }, { kind: "component", type: i5.NzFormControlComponent, selector: "nz-form-control", inputs: ["nzSuccessTip", "nzWarningTip", "nzErrorTip", "nzValidatingTip", "nzExtra", "nzAutoTips", "nzDisableAutoTips", "nzHasFeedback", "nzValidateStatus"], exportAs: ["nzFormControl"] }, { kind: "ngmodule", type: NzTreeModule }, { kind: "component", type: i6$2.NzTreeComponent, selector: "nz-tree", inputs: ["nzShowIcon", "nzHideUnMatched", "nzBlockNode", "nzExpandAll", "nzSelectMode", "nzCheckStrictly", "nzShowExpand", "nzShowLine", "nzCheckable", "nzAsyncData", "nzDraggable", "nzMultiple", "nzExpandedIcon", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualHeight", "nzTreeTemplate", "nzBeforeDrop", "nzData", "nzExpandedKeys", "nzSelectedKeys", "nzCheckedKeys", "nzSearchValue", "nzSearchFunc"], outputs: ["nzExpandedKeysChange", "nzSelectedKeysChange", "nzCheckedKeysChange", "nzSearchValueChange", "nzClick", "nzDblClick", "nzContextMenu", "nzCheckboxChange", "nzExpandChange", "nzOnDragStart", "nzOnDragEnter", "nzOnDragOver", "nzOnDragLeave", "nzOnDrop", "nzOnDragEnd"], exportAs: ["nzTree"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "ngmodule", type: NzTabsModule }, { kind: "component", type: i1$7.NzTabSetComponent, selector: "nz-tabset", inputs: ["nzSelectedIndex", "nzTabPosition", "nzTabBarExtraContent", "nzCanDeactivate", "nzAddIcon", "nzTabBarStyle", "nzType", "nzSize", "nzAnimated", "nzTabBarGutter", "nzHideAdd", "nzCentered", "nzHideAll", "nzLinkRouter", "nzLinkExact", "nzDestroyInactiveTabPane"], outputs: ["nzSelectChange", "nzSelectedIndexChange", "nzTabListScroll", "nzClose", "nzAdd"], exportAs: ["nzTabset"] }, { kind: "component", type: i1$7.NzTabComponent, selector: "nz-tab", inputs: ["nzTitle", "nzClosable", "nzCloseIcon", "nzDisabled", "nzForceRender"], outputs: ["nzSelect", "nzDeselect", "nzClick", "nzContextmenu"], exportAs: ["nzTab"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i5$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i5$1.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i5$1.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$2.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i4$1.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzCheckboxModule }, { kind: "component", type: i3$1.NzCheckboxComponent, selector: "[nz-checkbox]", inputs: ["nzValue", "nzAutoFocus", "nzDisabled", "nzIndeterminate", "nzChecked", "nzId", "nzName"], outputs: ["nzCheckedChange"], exportAs: ["nzCheckbox"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i6$1.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "directive", type: i6$1.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$1.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$1.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$1.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$1.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "directive", type: i6$1.NzCellAlignDirective, selector: "th[nzAlign],td[nzAlign]", inputs: ["nzAlign"] }, { kind: "component", type: i6$1.NzThSelectionComponent, selector: "th[nzSelections],th[nzChecked],th[nzShowCheckbox],th[nzShowRowSelection]", inputs: ["nzSelections", "nzChecked", "nzDisabled", "nzIndeterminate", "nzLabel", "nzShowCheckbox", "nzShowRowSelection"], outputs: ["nzCheckedChange"] }, { kind: "ngmodule", type: NzModalModule }, { kind: "component", type: i15.NzModalComponent, selector: "nz-modal", inputs: ["nzMask", "nzMaskClosable", "nzCloseOnNavigation", "nzVisible", "nzClosable", "nzOkLoading", "nzOkDisabled", "nzCancelDisabled", "nzCancelLoading", "nzKeyboard", "nzNoAnimation", "nzCentered", "nzDraggable", "nzContent", "nzFooter", "nzZIndex", "nzWidth", "nzWrapClassName", "nzClassName", "nzStyle", "nzTitle", "nzCloseIcon", "nzMaskStyle", "nzBodyStyle", "nzOkText", "nzCancelText", "nzOkType", "nzOkDanger", "nzIconType", "nzModalType", "nzAutofocus", "nzOnOk", "nzOnCancel"], outputs: ["nzOnOk", "nzOnCancel", "nzAfterOpen", "nzAfterClose", "nzVisibleChange"], exportAs: ["nzModal"] }, { kind: "directive", type: i15.NzModalContentDirective, selector: "[nzModalContent]", exportAs: ["nzModalContent"] }, { kind: "ngmodule", type: NzPopconfirmModule }, { kind: "directive", type: i9$1.NzPopconfirmDirective, selector: "[nz-popconfirm]", inputs: ["nzPopconfirmArrowPointAtCenter", "nzPopconfirmTitle", "nzPopconfirmTitleContext", "nz-popconfirm", "nzPopconfirmTrigger", "nzPopconfirmPlacement", "nzPopconfirmOrigin", "nzPopconfirmMouseEnterDelay", "nzPopconfirmMouseLeaveDelay", "nzPopconfirmOverlayClassName", "nzPopconfirmOverlayStyle", "nzPopconfirmVisible", "nzOkText", "nzOkType", "nzOkDisabled", "nzOkDanger", "nzCancelText", "nzBeforeConfirm", "nzIcon", "nzCondition", "nzPopconfirmShowArrow", "nzPopconfirmBackdrop", "nzAutofocus"], outputs: ["nzPopconfirmVisibleChange", "nzOnCancel", "nzOnConfirm"], exportAs: ["nzPopconfirm"] }, { kind: "ngmodule", type: NzEmptyModule }, { kind: "ngmodule", type: NzAlertModule }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzDividerModule }, { kind: "component", type: i8$1.NzDividerComponent, selector: "nz-divider", inputs: ["nzText", "nzType", "nzOrientation", "nzVariant", "nzDashed", "nzPlain"], exportAs: ["nzDivider"] }, { kind: "component", type: ButtonBack, selector: "button-back" }, { kind: "component", type: ButtonSave, selector: "button-save" }, { kind: "component", type: ButtonDelete, selector: "button-delete" }] });
6929
6925
  }
6930
6926
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RoleDetailComponent, decorators: [{
6931
6927
  type: Component,
@@ -6959,7 +6955,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
6959
6955
  args: ['parentSelect', { static: false }]
6960
6956
  }] } });
6961
6957
 
6962
- const URLs$7 = {
6958
+ const URLs$6 = {
6963
6959
  getById: '/api/App_Setting/GetById',
6964
6960
  getAll: '/api/App_Setting/GetAll',
6965
6961
  getList: '/api/App_Setting/GetList',
@@ -6975,34 +6971,34 @@ let SettingService$1 = class SettingService extends HTTPService {
6975
6971
  commonService = inject(CommonService);
6976
6972
  getById(id) {
6977
6973
  const params = new HttpParams().append('id', id);
6978
- return this.postParams(AppGlobals.apiEndpoint + URLs$7.getById, params);
6974
+ return this.postParams(AppGlobals.apiEndpoint + URLs$6.getById, params);
6979
6975
  }
6980
6976
  getPaging(filter) {
6981
- return this.postData(AppGlobals.apiEndpoint + URLs$7.getPaging, filter);
6977
+ return this.postData(AppGlobals.apiEndpoint + URLs$6.getPaging, filter);
6982
6978
  }
6983
6979
  addOrEdit(obj) {
6984
- return this.postData(AppGlobals.apiEndpoint + URLs$7.addOrEdit, obj);
6980
+ return this.postData(AppGlobals.apiEndpoint + URLs$6.addOrEdit, obj);
6985
6981
  }
6986
6982
  delete(id) {
6987
6983
  const params = new HttpParams().append('id', id);
6988
- return this.postParams(AppGlobals.apiEndpoint + URLs$7.delete, params);
6984
+ return this.postParams(AppGlobals.apiEndpoint + URLs$6.delete, params);
6989
6985
  }
6990
6986
  getByCodeAnonymous(code) {
6991
6987
  const params = new HttpParams().append('Code', code);
6992
- return this.getParams(AppGlobals.apiEndpoint + URLs$7.getByCodeAnonymous, params);
6988
+ return this.getParams(AppGlobals.apiEndpoint + URLs$6.getByCodeAnonymous, params);
6993
6989
  }
6994
6990
  // getGroupByCodeAnonymous(code: string) {
6995
6991
  // const params = new HttpParams().append('Code', code);
6996
6992
  // return this.getParams(AppGlobals.apiEndpoint + URLs.getByCodeAnonymous, params);
6997
6993
  // }
6998
6994
  getAllConfig() {
6999
- return this.post(AppGlobals.apiEndpoint + URLs$7.GetAllConfig);
6995
+ return this.post(AppGlobals.apiEndpoint + URLs$6.GetAllConfig);
7000
6996
  }
7001
6997
  applyConfig(config) {
7002
- return this.postData(AppGlobals.apiEndpoint + URLs$7.ApplyConfig, config);
6998
+ return this.postData(AppGlobals.apiEndpoint + URLs$6.ApplyConfig, config);
7003
6999
  }
7004
7000
  getDbInfo() {
7005
- return this.post(AppGlobals.apiEndpoint + URLs$7.GetDbInfo);
7001
+ return this.post(AppGlobals.apiEndpoint + URLs$6.GetDbInfo);
7006
7002
  }
7007
7003
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: SettingService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
7008
7004
  static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: SettingService, providedIn: 'root' });
@@ -7122,7 +7118,7 @@ class SettingListComponent extends BaseComponent {
7122
7118
  this.getData();
7123
7119
  }
7124
7120
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: SettingListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
7125
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: SettingListComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n <div nz-col nzSpan=\"24\">\r\n <div nz-flex nzJustify=\"end\">\r\n <div nz-flex nzGap=\"small\">\r\n <button-search (click)=\"search()\"></button-search>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div nz-col nzSpan=\"24\">\r\n <nz-table\r\n #table\r\n [nzData]=\"this.data?.LstItem || []\"\r\n [nzBordered]=\"true\"\r\n [nzSize]=\"'small'\"\r\n [nzShowSizeChanger]=\"true\"\r\n [nzFrontPagination]=\"false\"\r\n [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 214px)' }\"\r\n >\r\n <thead>\r\n <tr>\r\n <th nzWidth=\"50px\">#</th>\r\n <th>Code</th>\r\n <th>Value</th>\r\n <th>Description</th>\r\n <th nzWidth=\"75px\">Active</th>\r\n <th nzWidth=\"75px\">Action</th>\r\n </tr>\r\n <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n <th></th>\r\n <th>\r\n <extend-input size=\"small\" [(_ngModel)]=\"filter.Code\" (onclickClearIcon)=\"search()\"></extend-input>\r\n </th>\r\n <th>\r\n <extend-input size=\"small\" [(_ngModel)]=\"filter.Value\" (onclickClearIcon)=\"search()\"></extend-input>\r\n </th>\r\n <th>\r\n <extend-input size=\"small\" [(_ngModel)]=\"filter.Description\" (onclickClearIcon)=\"search()\"></extend-input>\r\n </th>\r\n <th class=\"center\">\r\n <extend-checkbox [(_ngModel)]=\"filter.IsActive\"></extend-checkbox>\r\n </th>\r\n <th class=\"center\">\r\n <nz-icon\r\n nzType=\"plus\"\r\n nzTheme=\"outline\"\r\n class=\"color-primary cursor-pointer icon-size-16\"\r\n (click)=\"$event.stopPropagation(); add()\"\r\n ></nz-icon>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (row of data?.LstItem; track $index; let i = $index) {\r\n @if (selectedRow != row) {\r\n <tr (click)=\"selectedRow = row\">\r\n <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n <td>{{ row.Code }}</td>\r\n <td>{{ row.Value }}</td>\r\n <td>{{ row.Description }}</td>\r\n <td class=\"text-center\">\r\n @if (row.IsActive) {\r\n <nz-icon nzType=\"check-circle\" nzTheme=\"outline\" class=\"color-primary\" />\r\n } @else {\r\n <nz-icon nzType=\"close\" nzTheme=\"outline\" class=\"color-warn\" />\r\n }\r\n </td>\r\n <td class=\"text-center\">\r\n <a\r\n nz-popconfirm\r\n nzOkDanger\r\n nzPopconfirmPlacement=\"top\"\r\n [nzPopconfirmTitle]=\"TranslateKey.CONFIRM_DELETE | translate\"\r\n (click)=\"$event.stopPropagation()\"\r\n (nzOnConfirm)=\"delete(row)\"\r\n >\r\n <i nz-icon nzType=\"delete\" nzTheme=\"outline\" class=\"color-warn cursor-pointer icon-size-16\"></i>\r\n </a>\r\n </td>\r\n </tr>\r\n } @else {\r\n <tr (keyup.enter)=\"save()\">\r\n <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n <td>\r\n <extend-input [required]=\"true\" [(_ngModel)]=\"selectedRow.Code\"></extend-input>\r\n </td>\r\n <td>\r\n <extend-input [(_ngModel)]=\"selectedRow.Value\"></extend-input>\r\n </td>\r\n <td class=\"form-item-no-bottom\">\r\n <extend-textarea [minRows]=\"1\" [(_ngModel)]=\"selectedRow.Description\"></extend-textarea>\r\n </td>\r\n <td class=\"text-center\">\r\n <extend-checkbox [(_ngModel)]=\"selectedRow.IsActive\"></extend-checkbox>\r\n </td>\r\n <td class=\"text-center\">\r\n <nz-icon\r\n nzType=\"save\"\r\n nzTheme=\"outline\"\r\n class=\"color-primary cursor-pointer icon-size-16\"\r\n (click)=\"$event.stopPropagation(); save()\"\r\n ></nz-icon>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n </tbody>\r\n </nz-table>\r\n </div>\r\n <div nz-col nzSpan=\"24\">\r\n <div nz-row nzJustify=\"end\">\r\n <nz-pagination\r\n [nzSize]=\"'small'\"\r\n [nzPageIndex]=\"filter.PageIndex + 1\"\r\n [nzPageSize]=\"filter.PageSize\"\r\n [nzTotal]=\"data?.TotalCount || 0\"\r\n [nzShowSizeChanger]=\"true\"\r\n [nzShowTotal]=\"showTotalTpl\"\r\n [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n >\r\n </nz-pagination>\r\n\r\n <ng-template #showTotalTpl let-total let-range=\"range\">\r\n {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n </ng-template>\r\n </div>\r\n </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "component", type: ButtonSearch, selector: "button-search" }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i6$1.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "directive", type: i6$1.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$1.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$1.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$1.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$1.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "component", type: ExtendInput, selector: "extend-input", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "inputClass", "labelSpan", "labelFlex", "inputFlex", "showClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "autofocus", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "displayField", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "onclickClearIcon", "onenter"] }, { kind: "component", type: ExtendCheckbox, selector: "extend-checkbox", inputs: ["label", "labelSpan", "labelFlex", "paddingTop", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "ngmodule", type: NzPopconfirmModule }, { kind: "directive", type: i12.NzPopconfirmDirective, selector: "[nz-popconfirm]", inputs: ["nzPopconfirmArrowPointAtCenter", "nzPopconfirmTitle", "nzPopconfirmTitleContext", "nz-popconfirm", "nzPopconfirmTrigger", "nzPopconfirmPlacement", "nzPopconfirmOrigin", "nzPopconfirmMouseEnterDelay", "nzPopconfirmMouseLeaveDelay", "nzPopconfirmOverlayClassName", "nzPopconfirmOverlayStyle", "nzPopconfirmVisible", "nzOkText", "nzOkType", "nzOkDisabled", "nzOkDanger", "nzCancelText", "nzBeforeConfirm", "nzIcon", "nzCondition", "nzPopconfirmShowArrow", "nzPopconfirmBackdrop", "nzAutofocus"], outputs: ["nzPopconfirmVisibleChange", "nzOnCancel", "nzOnConfirm"], exportAs: ["nzPopconfirm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "component", type: ExtendTextArea, selector: "extend-textarea", inputs: ["label", "placeHolder", "labelAlign", "floatingLabel", "displayInline", "formItemNoButtom", "labelSpan", "labelFlex", "inputFlex", "disabled", "required", "noBottom", "selectModeType", "inputClass", "size", "isSubmited", "minRows", "maxRows", "lstItem", "displayField", "valueField", "formData", "controlName", "_ngModel", "isTouched", "inputErrorMessage", "errorMessages"], outputs: ["_ngModelChange"] }, { kind: "ngmodule", type: NzPaginationModule }, { kind: "component", type: i5$3.NzPaginationComponent, selector: "nz-pagination", inputs: ["nzShowTotal", "nzItemRender", "nzSize", "nzPageSizeOptions", "nzShowSizeChanger", "nzShowQuickJumper", "nzSimple", "nzDisabled", "nzResponsive", "nzHideOnSinglePage", "nzTotal", "nzPageIndex", "nzPageSize"], outputs: ["nzPageSizeChange", "nzPageIndexChange"], exportAs: ["nzPagination"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }] });
7121
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: SettingListComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n <div nz-col nzSpan=\"24\">\r\n <div nz-flex nzJustify=\"end\">\r\n <div nz-flex nzGap=\"small\">\r\n <button-search (click)=\"search()\"></button-search>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div nz-col nzSpan=\"24\">\r\n <nz-table\r\n #table\r\n [nzData]=\"this.data?.LstItem || []\"\r\n [nzBordered]=\"true\"\r\n [nzSize]=\"'small'\"\r\n [nzShowSizeChanger]=\"true\"\r\n [nzFrontPagination]=\"false\"\r\n [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 214px)' }\"\r\n >\r\n <thead>\r\n <tr>\r\n <th nzWidth=\"50px\">#</th>\r\n <th>Code</th>\r\n <th>Value</th>\r\n <th>Description</th>\r\n <th nzWidth=\"75px\">Active</th>\r\n <th nzWidth=\"75px\">Action</th>\r\n </tr>\r\n <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n <th></th>\r\n <th>\r\n <extend-input size=\"small\" [(_ngModel)]=\"filter.Code\" (onclickClearIcon)=\"search()\"></extend-input>\r\n </th>\r\n <th>\r\n <extend-input size=\"small\" [(_ngModel)]=\"filter.Value\" (onclickClearIcon)=\"search()\"></extend-input>\r\n </th>\r\n <th>\r\n <extend-input size=\"small\" [(_ngModel)]=\"filter.Description\" (onclickClearIcon)=\"search()\"></extend-input>\r\n </th>\r\n <th class=\"center\">\r\n <extend-checkbox [(_ngModel)]=\"filter.IsActive\"></extend-checkbox>\r\n </th>\r\n <th class=\"center\">\r\n <nz-icon\r\n nzType=\"plus\"\r\n nzTheme=\"outline\"\r\n class=\"color-primary cursor-pointer icon-size-16\"\r\n (click)=\"$event.stopPropagation(); add()\"\r\n ></nz-icon>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (row of data?.LstItem; track $index; let i = $index) {\r\n @if (selectedRow != row) {\r\n <tr (click)=\"selectedRow = row\">\r\n <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n <td>{{ row.Code }}</td>\r\n <td>{{ row.Value }}</td>\r\n <td>{{ row.Description }}</td>\r\n <td class=\"text-center\">\r\n @if (row.IsActive) {\r\n <nz-icon nzType=\"check-circle\" nzTheme=\"outline\" class=\"color-primary\" />\r\n } @else {\r\n <nz-icon nzType=\"close\" nzTheme=\"outline\" class=\"color-warn\" />\r\n }\r\n </td>\r\n <td class=\"text-center\">\r\n <a\r\n nz-popconfirm\r\n nzOkDanger\r\n nzPopconfirmPlacement=\"top\"\r\n [nzPopconfirmTitle]=\"TranslateKey.CONFIRM_DELETE | translate\"\r\n (click)=\"$event.stopPropagation()\"\r\n (nzOnConfirm)=\"delete(row)\"\r\n >\r\n <i nz-icon nzType=\"delete\" nzTheme=\"outline\" class=\"color-warn cursor-pointer icon-size-16\"></i>\r\n </a>\r\n </td>\r\n </tr>\r\n } @else {\r\n <tr (keyup.enter)=\"save()\">\r\n <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n <td>\r\n <extend-input [required]=\"true\" [(_ngModel)]=\"selectedRow.Code\"></extend-input>\r\n </td>\r\n <td>\r\n <extend-input [(_ngModel)]=\"selectedRow.Value\"></extend-input>\r\n </td>\r\n <td class=\"form-item-no-bottom\">\r\n <extend-textarea [minRows]=\"1\" [(_ngModel)]=\"selectedRow.Description\"></extend-textarea>\r\n </td>\r\n <td class=\"text-center\">\r\n <extend-checkbox [(_ngModel)]=\"selectedRow.IsActive\"></extend-checkbox>\r\n </td>\r\n <td class=\"text-center\">\r\n <nz-icon\r\n nzType=\"save\"\r\n nzTheme=\"outline\"\r\n class=\"color-primary cursor-pointer icon-size-16\"\r\n (click)=\"$event.stopPropagation(); save()\"\r\n ></nz-icon>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n </tbody>\r\n </nz-table>\r\n </div>\r\n <div nz-col nzSpan=\"24\">\r\n <div nz-row nzJustify=\"end\">\r\n <nz-pagination\r\n [nzSize]=\"'small'\"\r\n [nzPageIndex]=\"filter.PageIndex + 1\"\r\n [nzPageSize]=\"filter.PageSize\"\r\n [nzTotal]=\"data?.TotalCount || 0\"\r\n [nzShowSizeChanger]=\"true\"\r\n [nzShowTotal]=\"showTotalTpl\"\r\n [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n >\r\n </nz-pagination>\r\n\r\n <ng-template #showTotalTpl let-total let-range=\"range\">\r\n {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n </ng-template>\r\n </div>\r\n </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "component", type: ButtonSearch, selector: "button-search" }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i6$1.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "directive", type: i6$1.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$1.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$1.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$1.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$1.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "component", type: ExtendInput, selector: "extend-input", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "inputClass", "labelSpan", "labelFlex", "inputFlex", "showClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "autofocus", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "displayField", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "onclickClearIcon", "onenter"] }, { kind: "component", type: ExtendCheckbox, selector: "extend-checkbox", inputs: ["label", "labelSpan", "labelFlex", "paddingTop", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "ngmodule", type: NzPopconfirmModule }, { kind: "directive", type: i9$1.NzPopconfirmDirective, selector: "[nz-popconfirm]", inputs: ["nzPopconfirmArrowPointAtCenter", "nzPopconfirmTitle", "nzPopconfirmTitleContext", "nz-popconfirm", "nzPopconfirmTrigger", "nzPopconfirmPlacement", "nzPopconfirmOrigin", "nzPopconfirmMouseEnterDelay", "nzPopconfirmMouseLeaveDelay", "nzPopconfirmOverlayClassName", "nzPopconfirmOverlayStyle", "nzPopconfirmVisible", "nzOkText", "nzOkType", "nzOkDisabled", "nzOkDanger", "nzCancelText", "nzBeforeConfirm", "nzIcon", "nzCondition", "nzPopconfirmShowArrow", "nzPopconfirmBackdrop", "nzAutofocus"], outputs: ["nzPopconfirmVisibleChange", "nzOnCancel", "nzOnConfirm"], exportAs: ["nzPopconfirm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "component", type: ExtendTextArea, selector: "extend-textarea", inputs: ["label", "placeHolder", "labelAlign", "floatingLabel", "displayInline", "formItemNoButtom", "labelSpan", "labelFlex", "inputFlex", "disabled", "required", "noBottom", "selectModeType", "inputClass", "size", "isSubmited", "minRows", "maxRows", "lstItem", "displayField", "valueField", "formData", "controlName", "_ngModel", "isTouched", "inputErrorMessage", "errorMessages"], outputs: ["_ngModelChange"] }, { kind: "ngmodule", type: NzPaginationModule }, { kind: "component", type: i5$3.NzPaginationComponent, selector: "nz-pagination", inputs: ["nzShowTotal", "nzItemRender", "nzSize", "nzPageSizeOptions", "nzShowSizeChanger", "nzShowQuickJumper", "nzSimple", "nzDisabled", "nzResponsive", "nzHideOnSinglePage", "nzTotal", "nzPageIndex", "nzPageSize"], outputs: ["nzPageSizeChange", "nzPageIndexChange"], exportAs: ["nzPagination"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }] });
7126
7122
  }
7127
7123
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: SettingListComponent, decorators: [{
7128
7124
  type: Component,
@@ -7143,7 +7139,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
7143
7139
  ], template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n <div nz-col nzSpan=\"24\">\r\n <div nz-flex nzJustify=\"end\">\r\n <div nz-flex nzGap=\"small\">\r\n <button-search (click)=\"search()\"></button-search>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div nz-col nzSpan=\"24\">\r\n <nz-table\r\n #table\r\n [nzData]=\"this.data?.LstItem || []\"\r\n [nzBordered]=\"true\"\r\n [nzSize]=\"'small'\"\r\n [nzShowSizeChanger]=\"true\"\r\n [nzFrontPagination]=\"false\"\r\n [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 214px)' }\"\r\n >\r\n <thead>\r\n <tr>\r\n <th nzWidth=\"50px\">#</th>\r\n <th>Code</th>\r\n <th>Value</th>\r\n <th>Description</th>\r\n <th nzWidth=\"75px\">Active</th>\r\n <th nzWidth=\"75px\">Action</th>\r\n </tr>\r\n <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n <th></th>\r\n <th>\r\n <extend-input size=\"small\" [(_ngModel)]=\"filter.Code\" (onclickClearIcon)=\"search()\"></extend-input>\r\n </th>\r\n <th>\r\n <extend-input size=\"small\" [(_ngModel)]=\"filter.Value\" (onclickClearIcon)=\"search()\"></extend-input>\r\n </th>\r\n <th>\r\n <extend-input size=\"small\" [(_ngModel)]=\"filter.Description\" (onclickClearIcon)=\"search()\"></extend-input>\r\n </th>\r\n <th class=\"center\">\r\n <extend-checkbox [(_ngModel)]=\"filter.IsActive\"></extend-checkbox>\r\n </th>\r\n <th class=\"center\">\r\n <nz-icon\r\n nzType=\"plus\"\r\n nzTheme=\"outline\"\r\n class=\"color-primary cursor-pointer icon-size-16\"\r\n (click)=\"$event.stopPropagation(); add()\"\r\n ></nz-icon>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (row of data?.LstItem; track $index; let i = $index) {\r\n @if (selectedRow != row) {\r\n <tr (click)=\"selectedRow = row\">\r\n <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n <td>{{ row.Code }}</td>\r\n <td>{{ row.Value }}</td>\r\n <td>{{ row.Description }}</td>\r\n <td class=\"text-center\">\r\n @if (row.IsActive) {\r\n <nz-icon nzType=\"check-circle\" nzTheme=\"outline\" class=\"color-primary\" />\r\n } @else {\r\n <nz-icon nzType=\"close\" nzTheme=\"outline\" class=\"color-warn\" />\r\n }\r\n </td>\r\n <td class=\"text-center\">\r\n <a\r\n nz-popconfirm\r\n nzOkDanger\r\n nzPopconfirmPlacement=\"top\"\r\n [nzPopconfirmTitle]=\"TranslateKey.CONFIRM_DELETE | translate\"\r\n (click)=\"$event.stopPropagation()\"\r\n (nzOnConfirm)=\"delete(row)\"\r\n >\r\n <i nz-icon nzType=\"delete\" nzTheme=\"outline\" class=\"color-warn cursor-pointer icon-size-16\"></i>\r\n </a>\r\n </td>\r\n </tr>\r\n } @else {\r\n <tr (keyup.enter)=\"save()\">\r\n <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n <td>\r\n <extend-input [required]=\"true\" [(_ngModel)]=\"selectedRow.Code\"></extend-input>\r\n </td>\r\n <td>\r\n <extend-input [(_ngModel)]=\"selectedRow.Value\"></extend-input>\r\n </td>\r\n <td class=\"form-item-no-bottom\">\r\n <extend-textarea [minRows]=\"1\" [(_ngModel)]=\"selectedRow.Description\"></extend-textarea>\r\n </td>\r\n <td class=\"text-center\">\r\n <extend-checkbox [(_ngModel)]=\"selectedRow.IsActive\"></extend-checkbox>\r\n </td>\r\n <td class=\"text-center\">\r\n <nz-icon\r\n nzType=\"save\"\r\n nzTheme=\"outline\"\r\n class=\"color-primary cursor-pointer icon-size-16\"\r\n (click)=\"$event.stopPropagation(); save()\"\r\n ></nz-icon>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n </tbody>\r\n </nz-table>\r\n </div>\r\n <div nz-col nzSpan=\"24\">\r\n <div nz-row nzJustify=\"end\">\r\n <nz-pagination\r\n [nzSize]=\"'small'\"\r\n [nzPageIndex]=\"filter.PageIndex + 1\"\r\n [nzPageSize]=\"filter.PageSize\"\r\n [nzTotal]=\"data?.TotalCount || 0\"\r\n [nzShowSizeChanger]=\"true\"\r\n [nzShowTotal]=\"showTotalTpl\"\r\n [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n (nzPageIndexChange)=\"onQueryParamsChange($event - 1, filter.PageSize)\"\r\n (nzPageSizeChange)=\"onQueryParamsChange(filter.PageIndex, $event)\"\r\n >\r\n </nz-pagination>\r\n\r\n <ng-template #showTotalTpl let-total let-range=\"range\">\r\n {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n </ng-template>\r\n </div>\r\n </div>\r\n</div>\r\n" }]
7144
7140
  }] });
7145
7141
 
7146
- const URLs$6 = {
7142
+ const URLs$5 = {
7147
7143
  getById: '/api/file/GetById',
7148
7144
  getAll: '/api/file/GetAll',
7149
7145
  getList: '/api/file/GetList',
@@ -7157,23 +7153,23 @@ class FileService extends HTTPService {
7157
7153
  commonService = inject(CommonService);
7158
7154
  getById(id) {
7159
7155
  const params = new HttpParams().append('id', id);
7160
- return this.postParams(AppGlobals.apiEndpoint + URLs$6.getById, params);
7156
+ return this.postParams(AppGlobals.apiEndpoint + URLs$5.getById, params);
7161
7157
  }
7162
7158
  getAll() {
7163
- return this.post(AppGlobals.apiEndpoint + URLs$6.getAll);
7159
+ return this.post(AppGlobals.apiEndpoint + URLs$5.getAll);
7164
7160
  }
7165
7161
  getList(filter) {
7166
- return this.postData(AppGlobals.apiEndpoint + URLs$6.getList, filter);
7162
+ return this.postData(AppGlobals.apiEndpoint + URLs$5.getList, filter);
7167
7163
  }
7168
7164
  getPaging(filter) {
7169
- return this.postData(AppGlobals.apiEndpoint + URLs$6.getPaging, filter);
7165
+ return this.postData(AppGlobals.apiEndpoint + URLs$5.getPaging, filter);
7170
7166
  }
7171
7167
  addOrEdit(obj) {
7172
- return this.postData(AppGlobals.apiEndpoint + URLs$6.addOrEdit, obj);
7168
+ return this.postData(AppGlobals.apiEndpoint + URLs$5.addOrEdit, obj);
7173
7169
  }
7174
7170
  delete(id) {
7175
7171
  const params = new HttpParams().append('id', id);
7176
- return this.postParams(AppGlobals.apiEndpoint + URLs$6.delete, params);
7172
+ return this.postParams(AppGlobals.apiEndpoint + URLs$5.delete, params);
7177
7173
  }
7178
7174
  downloadFile(id) {
7179
7175
  const params = new HttpParams().append('id', id);
@@ -7215,7 +7211,7 @@ class FileService extends HTTPService {
7215
7211
  });
7216
7212
  }
7217
7213
  addFileWithRef(obj) {
7218
- return this.postData(AppGlobals.apiEndpoint + URLs$6.addFileWithRef, obj);
7214
+ return this.postData(AppGlobals.apiEndpoint + URLs$5.addFileWithRef, obj);
7219
7215
  }
7220
7216
  getAnhWithRef(Ref_Table, Ref_Id) {
7221
7217
  return this.commonService.ESP({
@@ -7224,7 +7220,7 @@ class FileService extends HTTPService {
7224
7220
  });
7225
7221
  }
7226
7222
  moveFileToDisk(obj) {
7227
- return this.postData(AppGlobals.apiEndpoint + URLs$6.moveFileToDisk, obj);
7223
+ return this.postData(AppGlobals.apiEndpoint + URLs$5.moveFileToDisk, obj);
7228
7224
  }
7229
7225
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: FileService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
7230
7226
  static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: FileService, providedIn: 'root' });
@@ -7584,7 +7580,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
7584
7580
  ], template: "<form nz-form [formGroup]=\"formData\">\r\n <div nz-row>\r\n <div nz-col nzSpan=\"24\">\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"8\" nzFor=\"UserName\" nzLabelAlign=\"left\" nzNoColon=\"true\">\r\n T\u00EAn \u0111\u0103ng nh\u1EADp\r\n </nz-form-label>\r\n <nz-form-control [nzSpan]=\"16\">\r\n <input nz-input formControlName=\"UserName\" autocomplete=\"off\" nzDisabled />\r\n </nz-form-control>\r\n </nz-form-item>\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"8\" nzFor=\"Password\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n M\u1EADt kh\u1EA9u\r\n </nz-form-label>\r\n <nz-form-control nzErrorTip=\"{{ 'REQUIRED' | translate }}\">\r\n <nz-input-group [nzSuffix]=\"visiblePass ? suffixTemplateHiddenPassword : suffixTemplateShowPassword\">\r\n <input type=\"{{ passwordType }}\" nz-input formControlName=\"Password\" autocomplete=\"new-password\" />\r\n </nz-input-group>\r\n </nz-form-control>\r\n <ng-template #suffixTemplateShowPassword>\r\n <nz-icon\r\n nzType=\"eye\"\r\n nzTheme=\"outline\"\r\n nz-tooltip\r\n nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\r\n nzTooltipPlacement=\"right\"\r\n (click)=\"visiblePass = !visiblePass; passwordType = 'text'\"\r\n />\r\n </ng-template>\r\n <ng-template #suffixTemplateHiddenPassword>\r\n <nz-icon\r\n nzType=\"eye-invisible\"\r\n nzTheme=\"outline\"\r\n nz-tooltip\r\n nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\r\n nzTooltipPlacement=\"right\"\r\n (click)=\"visiblePass = !visiblePass; passwordType = 'password'\"\r\n />\r\n </ng-template>\r\n </nz-form-item>\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"8\" nzFor=\"RetypePassword\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n Nh\u1EADp l\u1EA1i M\u1EADt kh\u1EA9u\r\n </nz-form-label>\r\n <nz-form-control nzErrorTip=\"M\u1EADt kh\u1EA9u kh\u00F4ng kh\u1EDBp\">\r\n <nz-input-group [nzSuffix]=\"visibleRePass ? suffixTemplateHiddenRePassword : suffixTemplateShowRePassword\">\r\n <input type=\"{{ rePasswordType }}\" nz-input formControlName=\"RetypePassword\" autocomplete=\"new-password\" />\r\n </nz-input-group>\r\n </nz-form-control>\r\n <ng-template #suffixTemplateShowRePassword>\r\n <nz-icon\r\n nzType=\"eye\"\r\n nzTheme=\"outline\"\r\n nz-tooltip\r\n nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\r\n nzTooltipPlacement=\"right\"\r\n (click)=\"visibleRePass = !visibleRePass; rePasswordType = 'text'\"\r\n />\r\n </ng-template>\r\n <ng-template #suffixTemplateHiddenRePassword>\r\n <nz-icon\r\n nzType=\"eye-invisible\"\r\n nzTheme=\"outline\"\r\n nz-tooltip\r\n nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\r\n nzTooltipPlacement=\"right\"\r\n (click)=\"visibleRePass = !visibleRePass; rePasswordType = 'password'\"\r\n />\r\n </ng-template>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col nzSpan=\"24\">\r\n <div nz-flex nzJustify=\"end\" nzGap=\"small\">\r\n <button nz-button nzType=\"default\" (click)=\"close()\">{{ TranslateKey.CLOSE | translate }}</button>\r\n <button nz-button nzType=\"primary\" (click)=\"submit()\" nzDanger>{{ TranslateKey.OK | translate }}</button>\r\n </div>\r\n </div>\r\n </div>\r\n</form>\r\n" }]
7585
7581
  }] });
7586
7582
 
7587
- const URLs$5 = {
7583
+ const URLs$4 = {
7588
7584
  getById: '/api/App_Setting/GetById',
7589
7585
  getAll: '/api/App_Setting/GetAll',
7590
7586
  getList: '/api/App_Setting/GetList',
@@ -7605,10 +7601,10 @@ class SettingService extends HTTPService {
7605
7601
  });
7606
7602
  }
7607
7603
  getAll() {
7608
- return this.post(AppGlobals.apiEndpoint + URLs$5.getAll);
7604
+ return this.post(AppGlobals.apiEndpoint + URLs$4.getAll);
7609
7605
  }
7610
7606
  getList(filter) {
7611
- return this.postData(AppGlobals.apiEndpoint + URLs$5.getList, filter);
7607
+ return this.postData(AppGlobals.apiEndpoint + URLs$4.getList, filter);
7612
7608
  }
7613
7609
  getPaging(filter) {
7614
7610
  return this.cms.ESP({
@@ -7624,24 +7620,24 @@ class SettingService extends HTTPService {
7624
7620
  }
7625
7621
  delete(id) {
7626
7622
  const params = new HttpParams().append('id', id);
7627
- return this.postParams(AppGlobals.apiEndpoint + URLs$5.delete, params);
7623
+ return this.postParams(AppGlobals.apiEndpoint + URLs$4.delete, params);
7628
7624
  }
7629
7625
  getByCodeAnonymous(code) {
7630
7626
  const params = new HttpParams().append('Code', code);
7631
- return this.getParams(AppGlobals.apiEndpoint + URLs$5.getByCodeAnonymous, params);
7627
+ return this.getParams(AppGlobals.apiEndpoint + URLs$4.getByCodeAnonymous, params);
7632
7628
  }
7633
7629
  // getGroupByCodeAnonymous(code: string) {
7634
7630
  // const params = new HttpParams().append('Code', code);
7635
7631
  // return this.getParams(AppGlobals.apiEndpoint + URLs.getByCodeAnonymous, params);
7636
7632
  // }
7637
7633
  getAllConfig() {
7638
- return this.post(AppGlobals.apiEndpoint + URLs$5.GetAllConfig);
7634
+ return this.post(AppGlobals.apiEndpoint + URLs$4.GetAllConfig);
7639
7635
  }
7640
7636
  applyConfig(config) {
7641
- return this.postData(AppGlobals.apiEndpoint + URLs$5.ApplyConfig, config);
7637
+ return this.postData(AppGlobals.apiEndpoint + URLs$4.ApplyConfig, config);
7642
7638
  }
7643
7639
  getDbInfo() {
7644
- return this.post(AppGlobals.apiEndpoint + URLs$5.GetDbInfo);
7640
+ return this.post(AppGlobals.apiEndpoint + URLs$4.GetDbInfo);
7645
7641
  }
7646
7642
  loadConfigTheme() {
7647
7643
  return this.cms.ESP({
@@ -7986,7 +7982,7 @@ class UserDetailComponent extends BaseComponent {
7986
7982
  // this.notiService.success('Đã xóa Role khỏi danh sách');
7987
7983
  }
7988
7984
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: UserDetailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
7989
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: UserDetailComponent, isStandalone: true, selector: "app-user-detail", usesInheritance: true, ngImport: i0, template: "<form nz-form [formGroup]=\"formData\">\r\n <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n @if (item?.App_User_Id) {\r\n <button nz-button nzType=\"primary\" type=\"button\" (click)=\"resetPassword()\">\r\n {{ TranslateKey.RESET_PASSWORD | translate }}\r\n </button>\r\n <button nz-button nzType=\"primary\" type=\"button\" nzDanger (click)=\"delete()\">\r\n {{ TranslateKey.DELETE | translate }}\r\n </button>\r\n }\r\n <button-save (click)=\"save()\"></button-save>\r\n <button-back (click)=\"goto('/admin/user')\"></button-back>\r\n </div>\r\n\r\n <nz-divider></nz-divider>\r\n\r\n <div nz-row [nzGutter]=\"[16, 16]\">\r\n <!-- C\u1ED8T TR\u00C1I: FORM USER -->\r\n <div nz-col [nzMd]=\"12\" [nzSm]=\"24\">\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"8\" nzFor=\"UserName\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n T\u00EAn \u0111\u0103ng nh\u1EADp\r\n </nz-form-label>\r\n <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n <input nz-input formControlName=\"UserName\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"8\" nzFor=\"FullName\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n T\u00EAn ng\u01B0\u1EDDi d\u00F9ng\r\n </nz-form-label>\r\n <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n <input nz-input formControlName=\"FullName\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <div *ngIf=\"!item?.App_User_Id\" nz-row [nzGutter]=\"16\">\r\n <div nz-col [nzSpan]=\"24\">\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"8\" nzFor=\"Password\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n M\u1EADt kh\u1EA9u\r\n </nz-form-label>\r\n <nz-form-control nzErrorTip=\"{{ 'REQUIRED' | translate }}\">\r\n <nz-input-group [nzSuffix]=\"visiblePass ? suffixTemplateHiddenPassword : suffixTemplateShowPassword\">\r\n <input type=\"{{ passwordType }}\" nz-input formControlName=\"Password\" autocomplete=\"new-password\" />\r\n </nz-input-group>\r\n </nz-form-control>\r\n <ng-template #suffixTemplateShowPassword>\r\n <nz-icon\r\n nzType=\"eye\"\r\n nzTheme=\"outline\"\r\n nz-tooltip\r\n nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\r\n nzTooltipPlacement=\"right\"\r\n (click)=\"visiblePass = !visiblePass; passwordType = 'text'\"\r\n />\r\n </ng-template>\r\n <ng-template #suffixTemplateHiddenPassword>\r\n <nz-icon\r\n nzType=\"eye-invisible\"\r\n nzTheme=\"outline\"\r\n nz-tooltip\r\n nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\r\n nzTooltipPlacement=\"right\"\r\n (click)=\"visiblePass = !visiblePass; passwordType = 'password'\"\r\n />\r\n </ng-template>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzSpan]=\"24\">\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"8\" nzFor=\"RetypePassword\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n Nh\u1EADp l\u1EA1i M\u1EADt kh\u1EA9u\r\n </nz-form-label>\r\n <nz-form-control nzErrorTip=\"M\u1EADt kh\u1EA9u kh\u00F4ng kh\u1EDBp\">\r\n <nz-input-group\r\n [nzSuffix]=\"visibleRePass ? suffixTemplateHiddenRePassword : suffixTemplateShowRePassword\"\r\n >\r\n <input\r\n type=\"{{ rePasswordType }}\"\r\n nz-input\r\n formControlName=\"RetypePassword\"\r\n autocomplete=\"new-password\"\r\n />\r\n </nz-input-group>\r\n </nz-form-control>\r\n <ng-template #suffixTemplateShowRePassword>\r\n <nz-icon\r\n nzType=\"eye\"\r\n nzTheme=\"outline\"\r\n nz-tooltip\r\n nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\r\n nzTooltipPlacement=\"right\"\r\n (click)=\"visibleRePass = !visibleRePass; rePasswordType = 'text'\"\r\n />\r\n </ng-template>\r\n <ng-template #suffixTemplateHiddenRePassword>\r\n <nz-icon\r\n nzType=\"eye-invisible\"\r\n nzTheme=\"outline\"\r\n nz-tooltip\r\n nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\r\n nzTooltipPlacement=\"right\"\r\n (click)=\"visibleRePass = !visibleRePass; rePasswordType = 'password'\"\r\n />\r\n </ng-template>\r\n </nz-form-item>\r\n </div>\r\n </div>\r\n\r\n <div nz-row>\r\n <div nz-col [nzSpan]=\"8\"></div>\r\n <div nz-col [nzSpan]=\"16\">\r\n <label nz-checkbox formControlName=\"IsActive\">Active</label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- C\u1ED8T PH\u1EA2I: TABS ORG & ROLE -->\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-tabset nzType=\"card\" nzSize=\"small\">\r\n <!-- TAB ORG -->\r\n <nz-tab nzTitle=\"\u0110\u01A1n v\u1ECB\">\r\n <div style=\"padding: 8px\">\r\n <h3 style=\"margin-bottom: 16px\">Danh s\u00E1ch \u0110\u01A1n v\u1ECB</h3>\r\n\r\n <div nz-flex [nzJustify]=\"'space-between'\" [nzAlign]=\"'center'\" style=\"margin-bottom: 12px\">\r\n <span style=\"font-weight: 500\">\u0110\u01A1n v\u1ECB ({{ lstOrgInUser.length }})</span>\r\n <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"openAddOrgModal()\">\r\n <span nz-icon nzType=\"plus\"></span>\r\n Th\u00EAm \u0110\u01A1n v\u1ECB\r\n </button>\r\n </div>\r\n\r\n <div style=\"max-height: 450px; overflow-y: auto\">\r\n <nz-table\r\n #orgTable\r\n [nzData]=\"lstOrgInUser\"\r\n [nzSize]=\"'small'\"\r\n [nzShowPagination]=\"lstOrgInUser.length > 20\"\r\n [nzPageSize]=\"20\"\r\n [nzBordered]=\"true\"\r\n >\r\n <thead>\r\n <tr>\r\n <th nzWidth=\"40px\">STT</th>\r\n <th>\u0110\u01A1n v\u1ECB</th>\r\n <th nzWidth=\"50px\" nzAlign=\"center\"></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let item of orgTable.data; let i = index\">\r\n <td>{{ i + 1 }}</td>\r\n <td>\r\n <div style=\"font-weight: 500\">{{ item.Name }}</div>\r\n <div style=\"font-size: 12px; color: #888\">{{ item.Code }}</div>\r\n </td>\r\n <td nzAlign=\"center\">\r\n <button\r\n nz-button\r\n nzType=\"link\"\r\n nzDanger\r\n nzSize=\"small\"\r\n nz-popconfirm\r\n nzPopconfirmTitle=\"X\u00F3a \u0110\u01A1n v\u1ECB n\u00E0y?\"\r\n nzAutofocus=\"ok\"\r\n (nzOnConfirm)=\"deleteOrgFromUser(item)\"\r\n >\r\n <span nz-icon nzType=\"delete\" nzTheme=\"outline\"></span>\r\n </button>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </nz-table>\r\n </div>\r\n </div>\r\n </nz-tab>\r\n\r\n <!-- TAB ROLE -->\r\n <nz-tab nzTitle=\"Nh\u00F3m quy\u1EC1n\">\r\n <div style=\"padding: 8px\">\r\n <h3 style=\"margin-bottom: 16px\">Danh s\u00E1ch Nh\u00F3m quy\u1EC1n</h3>\r\n\r\n <div nz-flex [nzJustify]=\"'space-between'\" [nzAlign]=\"'center'\" style=\"margin-bottom: 12px\">\r\n <span style=\"font-weight: 500\">Roles ({{ lstRoleInUser.length }})</span>\r\n <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"openAddRoleModal()\">\r\n <span nz-icon nzType=\"plus\"></span>\r\n Th\u00EAm Role\r\n </button>\r\n </div>\r\n\r\n <div style=\"max-height: 450px; overflow-y: auto\">\r\n <nz-table\r\n #roleTable\r\n [nzData]=\"lstRoleInUser\"\r\n [nzSize]=\"'small'\"\r\n [nzShowPagination]=\"lstRoleInUser.length > 20\"\r\n [nzPageSize]=\"20\"\r\n [nzBordered]=\"true\"\r\n >\r\n <thead>\r\n <tr>\r\n <th nzWidth=\"40px\">STT</th>\r\n <th>Role</th>\r\n <th nzWidth=\"50px\" nzAlign=\"center\"></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let item of roleTable.data; let i = index\">\r\n <td>{{ i + 1 }}</td>\r\n <td>\r\n <div style=\"font-weight: 500\">{{ item.Name }}</div>\r\n <div style=\"font-size: 12px; color: #888\">{{ item.Code }}</div>\r\n </td>\r\n <td nzAlign=\"center\">\r\n <button\r\n nz-button\r\n nzType=\"link\"\r\n nzDanger\r\n nzSize=\"small\"\r\n nz-popconfirm\r\n nzPopconfirmTitle=\"X\u00F3a Role n\u00E0y?\"\r\n (nzOnConfirm)=\"deleteRoleFromUser(item)\"\r\n >\r\n <span nz-icon nzType=\"delete\" nzTheme=\"outline\"></span>\r\n </button>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </nz-table>\r\n </div>\r\n </div>\r\n </nz-tab>\r\n </nz-tabset>\r\n </div>\r\n </div>\r\n</form>\r\n\r\n<!-- Modal ch\u1ECDn Org -->\r\n<nz-modal\r\n [(nzVisible)]=\"isAddOrgModalVisible\"\r\n nzTitle=\"Th\u00EAm \u0110\u01A1n v\u1ECB v\u00E0o User\"\r\n [nzWidth]=\"700\"\r\n (nzOnCancel)=\"closeAddOrgModal()\"\r\n (nzOnOk)=\"addOrgsToUser()\"\r\n nzOkText=\"Th\u00EAm\"\r\n nzCancelText=\"H\u1EE7y\"\r\n>\r\n <ng-container *nzModalContent>\r\n <nz-alert\r\n *ngIf=\"!isOneUserMultiOrgs\"\r\n nzType=\"info\"\r\n nzMessage=\"Ch\u1EC9 \u0111\u01B0\u1EE3c ch\u1ECDn 1 \u0110\u01A1n v\u1ECB\"\r\n nzShowIcon\r\n style=\"margin-bottom: 16px\"\r\n ></nz-alert>\r\n <!-- Search box -->\r\n <nz-input-group [nzPrefix]=\"prefixIconSearchOrg\" style=\"margin-bottom: 16px\">\r\n <input\r\n type=\"text\"\r\n nz-input\r\n placeholder=\"T\u00ECm ki\u1EBFm \u0110\u01A1n v\u1ECB...\"\r\n [(ngModel)]=\"searchOrgText\"\r\n (ngModelChange)=\"filterAvailableOrgs()\"\r\n />\r\n </nz-input-group>\r\n <ng-template #prefixIconSearchOrg>\r\n <span nz-icon nzType=\"search\"></span>\r\n </ng-template>\r\n\r\n <nz-table\r\n #addOrgTable\r\n [nzData]=\"lstFilteredOrg\"\r\n [nzSize]=\"'small'\"\r\n [nzShowPagination]=\"true\"\r\n [nzPageSize]=\"10\"\r\n [nzLoading]=\"isLoadingAvailableOrgs\"\r\n >\r\n <thead>\r\n <tr>\r\n <th\r\n nzWidth=\"60px\"\r\n [nzShowCheckbox]=\"isOneUserMultiOrgs\"\r\n [(nzChecked)]=\"isAllOrgChecked\"\r\n (nzCheckedChange)=\"onAllOrgChecked($event)\"\r\n [nzIndeterminate]=\"isOrgIndeterminate\"\r\n ></th>\r\n <th nzWidth=\"150px\">M\u00E3</th>\r\n <th>T\u00EAn</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let item of addOrgTable.data\">\r\n <td nzAlign=\"center\">\r\n <label nz-checkbox [(ngModel)]=\"item.checked\" (ngModelChange)=\"onOrgChecked(item, $event)\"></label>\r\n </td>\r\n <td>{{ item.Code }}</td>\r\n <td>{{ item.TreeNodeName || item.Name }}</td>\r\n </tr>\r\n </tbody>\r\n </nz-table>\r\n </ng-container>\r\n</nz-modal>\r\n\r\n<!-- Modal ch\u1ECDn Role -->\r\n<nz-modal\r\n [(nzVisible)]=\"isAddRoleModalVisible\"\r\n nzTitle=\"Th\u00EAm Role v\u00E0o User\"\r\n [nzWidth]=\"700\"\r\n (nzOnCancel)=\"closeAddRoleModal()\"\r\n (nzOnOk)=\"addRolesToUser()\"\r\n nzOkText=\"Th\u00EAm\"\r\n nzCancelText=\"H\u1EE7y\"\r\n>\r\n <ng-container *nzModalContent>\r\n <!-- Search box -->\r\n <nz-input-group [nzPrefix]=\"prefixIconSearchRole\" style=\"margin-bottom: 16px\">\r\n <input\r\n type=\"text\"\r\n nz-input\r\n placeholder=\"T\u00ECm ki\u1EBFm Role...\"\r\n [(ngModel)]=\"searchRoleText\"\r\n (ngModelChange)=\"filterAvailableRoles()\"\r\n />\r\n </nz-input-group>\r\n <ng-template #prefixIconSearchRole>\r\n <span nz-icon nzType=\"search\"></span>\r\n </ng-template>\r\n\r\n <nz-table\r\n #addRoleTable\r\n [nzData]=\"lstFilteredRole\"\r\n [nzSize]=\"'small'\"\r\n [nzShowPagination]=\"true\"\r\n [nzPageSize]=\"10\"\r\n [nzLoading]=\"isLoadingAvailableRoles\"\r\n >\r\n <thead>\r\n <tr>\r\n <th\r\n nzWidth=\"60px\"\r\n nzShowCheckbox\r\n [(nzChecked)]=\"isAllRoleChecked\"\r\n (nzCheckedChange)=\"onAllRoleChecked($event)\"\r\n [nzIndeterminate]=\"isRoleIndeterminate\"\r\n ></th>\r\n <th nzWidth=\"150px\">M\u00E3</th>\r\n <th>T\u00EAn</th>\r\n <th>M\u00F4 t\u1EA3</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let item of addRoleTable.data\">\r\n <td nzAlign=\"center\">\r\n <label nz-checkbox [(ngModel)]=\"item.checked\" (ngModelChange)=\"onRoleChecked(item, $event)\"></label>\r\n </td>\r\n <td>{{ item.Code }}</td>\r\n <td>{{ item.Name }}</td>\r\n <td>{{ item.Description }}</td>\r\n </tr>\r\n </tbody>\r\n </nz-table>\r\n </ng-container>\r\n</nz-modal>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "directive", type: i5.NzFormDirective, selector: "[nz-form]", inputs: ["nzLayout", "nzNoColon", "nzAutoTips", "nzDisableAutoTips", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzForm"] }, { kind: "component", type: i5.NzFormItemComponent, selector: "nz-form-item", exportAs: ["nzFormItem"] }, { kind: "component", type: i5.NzFormLabelComponent, selector: "nz-form-label", inputs: ["nzFor", "nzRequired", "nzNoColon", "nzTooltipTitle", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzFormLabel"] }, { kind: "component", type: i5.NzFormControlComponent, selector: "nz-form-control", inputs: ["nzSuccessTip", "nzWarningTip", "nzErrorTip", "nzValidatingTip", "nzExtra", "nzAutoTips", "nzDisableAutoTips", "nzHasFeedback", "nzValidateStatus"], exportAs: ["nzFormControl"] }, { kind: "ngmodule", type: NzSelectModule }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$2.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i4$1.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i5$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i5$1.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i5$1.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { kind: "ngmodule", type: NzCheckboxModule }, { kind: "component", type: i3$1.NzCheckboxComponent, selector: "[nz-checkbox]", inputs: ["nzValue", "nzAutoFocus", "nzDisabled", "nzIndeterminate", "nzChecked", "nzId", "nzName"], outputs: ["nzCheckedChange"], exportAs: ["nzCheckbox"] }, { kind: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i8.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i6$1.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "directive", type: i6$1.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$1.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$1.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$1.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$1.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "directive", type: i6$1.NzCellAlignDirective, selector: "th[nzAlign],td[nzAlign]", inputs: ["nzAlign"] }, { kind: "component", type: i6$1.NzThSelectionComponent, selector: "th[nzSelections],th[nzChecked],th[nzShowCheckbox],th[nzShowRowSelection]", inputs: ["nzSelections", "nzChecked", "nzDisabled", "nzIndeterminate", "nzLabel", "nzShowCheckbox", "nzShowRowSelection"], outputs: ["nzCheckedChange"] }, { kind: "ngmodule", type: NzModalModule }, { kind: "component", type: i15.NzModalComponent, selector: "nz-modal", inputs: ["nzMask", "nzMaskClosable", "nzCloseOnNavigation", "nzVisible", "nzClosable", "nzOkLoading", "nzOkDisabled", "nzCancelDisabled", "nzCancelLoading", "nzKeyboard", "nzNoAnimation", "nzCentered", "nzDraggable", "nzContent", "nzFooter", "nzZIndex", "nzWidth", "nzWrapClassName", "nzClassName", "nzStyle", "nzTitle", "nzCloseIcon", "nzMaskStyle", "nzBodyStyle", "nzOkText", "nzCancelText", "nzOkType", "nzOkDanger", "nzIconType", "nzModalType", "nzAutofocus", "nzOnOk", "nzOnCancel"], outputs: ["nzOnOk", "nzOnCancel", "nzAfterOpen", "nzAfterClose", "nzVisibleChange"], exportAs: ["nzModal"] }, { kind: "directive", type: i15.NzModalContentDirective, selector: "[nzModalContent]", exportAs: ["nzModalContent"] }, { kind: "ngmodule", type: NzPopconfirmModule }, { kind: "directive", type: i12.NzPopconfirmDirective, selector: "[nz-popconfirm]", inputs: ["nzPopconfirmArrowPointAtCenter", "nzPopconfirmTitle", "nzPopconfirmTitleContext", "nz-popconfirm", "nzPopconfirmTrigger", "nzPopconfirmPlacement", "nzPopconfirmOrigin", "nzPopconfirmMouseEnterDelay", "nzPopconfirmMouseLeaveDelay", "nzPopconfirmOverlayClassName", "nzPopconfirmOverlayStyle", "nzPopconfirmVisible", "nzOkText", "nzOkType", "nzOkDisabled", "nzOkDanger", "nzCancelText", "nzBeforeConfirm", "nzIcon", "nzCondition", "nzPopconfirmShowArrow", "nzPopconfirmBackdrop", "nzAutofocus"], outputs: ["nzPopconfirmVisibleChange", "nzOnCancel", "nzOnConfirm"], exportAs: ["nzPopconfirm"] }, { kind: "ngmodule", type: NzEmptyModule }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzDividerModule }, { kind: "component", type: i8$1.NzDividerComponent, selector: "nz-divider", inputs: ["nzText", "nzType", "nzOrientation", "nzVariant", "nzDashed", "nzPlain"], exportAs: ["nzDivider"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "ngmodule", type: NzTabsModule }, { kind: "component", type: i1$7.NzTabSetComponent, selector: "nz-tabset", inputs: ["nzSelectedIndex", "nzTabPosition", "nzTabBarExtraContent", "nzCanDeactivate", "nzAddIcon", "nzTabBarStyle", "nzType", "nzSize", "nzAnimated", "nzTabBarGutter", "nzHideAdd", "nzCentered", "nzHideAll", "nzLinkRouter", "nzLinkExact", "nzDestroyInactiveTabPane"], outputs: ["nzSelectChange", "nzSelectedIndexChange", "nzTabListScroll", "nzClose", "nzAdd"], exportAs: ["nzTabset"] }, { kind: "component", type: i1$7.NzTabComponent, selector: "nz-tab", inputs: ["nzTitle", "nzClosable", "nzCloseIcon", "nzDisabled", "nzForceRender"], outputs: ["nzSelect", "nzDeselect", "nzClick", "nzContextmenu"], exportAs: ["nzTab"] }, { kind: "component", type: NzAlertComponent, selector: "nz-alert", inputs: ["nzAction", "nzCloseText", "nzIconType", "nzMessage", "nzDescription", "nzType", "nzCloseable", "nzShowIcon", "nzBanner", "nzNoAnimation", "nzIcon"], outputs: ["nzOnClose"], exportAs: ["nzAlert"] }, { kind: "component", type: ButtonBack, selector: "button-back" }, { kind: "component", type: ButtonSave, selector: "button-save" }] });
7985
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: UserDetailComponent, isStandalone: true, selector: "app-user-detail", usesInheritance: true, ngImport: i0, template: "<form nz-form [formGroup]=\"formData\">\r\n <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n @if (item?.App_User_Id) {\r\n <button nz-button nzType=\"primary\" type=\"button\" (click)=\"resetPassword()\">\r\n {{ TranslateKey.RESET_PASSWORD | translate }}\r\n </button>\r\n <button nz-button nzType=\"primary\" type=\"button\" nzDanger (click)=\"delete()\">\r\n {{ TranslateKey.DELETE | translate }}\r\n </button>\r\n }\r\n <button-save (click)=\"save()\"></button-save>\r\n <button-back (click)=\"goto('/admin/user')\"></button-back>\r\n </div>\r\n\r\n <nz-divider></nz-divider>\r\n\r\n <div nz-row [nzGutter]=\"[16, 16]\">\r\n <!-- C\u1ED8T TR\u00C1I: FORM USER -->\r\n <div nz-col [nzMd]=\"12\" [nzSm]=\"24\">\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"8\" nzFor=\"UserName\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n T\u00EAn \u0111\u0103ng nh\u1EADp\r\n </nz-form-label>\r\n <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n <input nz-input formControlName=\"UserName\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"8\" nzFor=\"FullName\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n T\u00EAn ng\u01B0\u1EDDi d\u00F9ng\r\n </nz-form-label>\r\n <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n <input nz-input formControlName=\"FullName\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <div *ngIf=\"!item?.App_User_Id\" nz-row [nzGutter]=\"16\">\r\n <div nz-col [nzSpan]=\"24\">\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"8\" nzFor=\"Password\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n M\u1EADt kh\u1EA9u\r\n </nz-form-label>\r\n <nz-form-control nzErrorTip=\"{{ 'REQUIRED' | translate }}\">\r\n <nz-input-group [nzSuffix]=\"visiblePass ? suffixTemplateHiddenPassword : suffixTemplateShowPassword\">\r\n <input type=\"{{ passwordType }}\" nz-input formControlName=\"Password\" autocomplete=\"new-password\" />\r\n </nz-input-group>\r\n </nz-form-control>\r\n <ng-template #suffixTemplateShowPassword>\r\n <nz-icon\r\n nzType=\"eye\"\r\n nzTheme=\"outline\"\r\n nz-tooltip\r\n nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\r\n nzTooltipPlacement=\"right\"\r\n (click)=\"visiblePass = !visiblePass; passwordType = 'text'\"\r\n />\r\n </ng-template>\r\n <ng-template #suffixTemplateHiddenPassword>\r\n <nz-icon\r\n nzType=\"eye-invisible\"\r\n nzTheme=\"outline\"\r\n nz-tooltip\r\n nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\r\n nzTooltipPlacement=\"right\"\r\n (click)=\"visiblePass = !visiblePass; passwordType = 'password'\"\r\n />\r\n </ng-template>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzSpan]=\"24\">\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"8\" nzFor=\"RetypePassword\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n Nh\u1EADp l\u1EA1i M\u1EADt kh\u1EA9u\r\n </nz-form-label>\r\n <nz-form-control nzErrorTip=\"M\u1EADt kh\u1EA9u kh\u00F4ng kh\u1EDBp\">\r\n <nz-input-group\r\n [nzSuffix]=\"visibleRePass ? suffixTemplateHiddenRePassword : suffixTemplateShowRePassword\"\r\n >\r\n <input\r\n type=\"{{ rePasswordType }}\"\r\n nz-input\r\n formControlName=\"RetypePassword\"\r\n autocomplete=\"new-password\"\r\n />\r\n </nz-input-group>\r\n </nz-form-control>\r\n <ng-template #suffixTemplateShowRePassword>\r\n <nz-icon\r\n nzType=\"eye\"\r\n nzTheme=\"outline\"\r\n nz-tooltip\r\n nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\r\n nzTooltipPlacement=\"right\"\r\n (click)=\"visibleRePass = !visibleRePass; rePasswordType = 'text'\"\r\n />\r\n </ng-template>\r\n <ng-template #suffixTemplateHiddenRePassword>\r\n <nz-icon\r\n nzType=\"eye-invisible\"\r\n nzTheme=\"outline\"\r\n nz-tooltip\r\n nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\r\n nzTooltipPlacement=\"right\"\r\n (click)=\"visibleRePass = !visibleRePass; rePasswordType = 'password'\"\r\n />\r\n </ng-template>\r\n </nz-form-item>\r\n </div>\r\n </div>\r\n\r\n <div nz-row>\r\n <div nz-col [nzSpan]=\"8\"></div>\r\n <div nz-col [nzSpan]=\"16\">\r\n <label nz-checkbox formControlName=\"IsActive\">Active</label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- C\u1ED8T PH\u1EA2I: TABS ORG & ROLE -->\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-tabset nzType=\"card\" nzSize=\"small\">\r\n <!-- TAB ORG -->\r\n <nz-tab nzTitle=\"\u0110\u01A1n v\u1ECB\">\r\n <div style=\"padding: 8px\">\r\n <h3 style=\"margin-bottom: 16px\">Danh s\u00E1ch \u0110\u01A1n v\u1ECB</h3>\r\n\r\n <div nz-flex [nzJustify]=\"'space-between'\" [nzAlign]=\"'center'\" style=\"margin-bottom: 12px\">\r\n <span style=\"font-weight: 500\">\u0110\u01A1n v\u1ECB ({{ lstOrgInUser.length }})</span>\r\n <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"openAddOrgModal()\">\r\n <span nz-icon nzType=\"plus\"></span>\r\n Th\u00EAm \u0110\u01A1n v\u1ECB\r\n </button>\r\n </div>\r\n\r\n <div style=\"max-height: 450px; overflow-y: auto\">\r\n <nz-table\r\n #orgTable\r\n [nzData]=\"lstOrgInUser\"\r\n [nzSize]=\"'small'\"\r\n [nzShowPagination]=\"lstOrgInUser.length > 20\"\r\n [nzPageSize]=\"20\"\r\n [nzBordered]=\"true\"\r\n >\r\n <thead>\r\n <tr>\r\n <th nzWidth=\"40px\">STT</th>\r\n <th>\u0110\u01A1n v\u1ECB</th>\r\n <th nzWidth=\"50px\" nzAlign=\"center\"></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let item of orgTable.data; let i = index\">\r\n <td>{{ i + 1 }}</td>\r\n <td>\r\n <div style=\"font-weight: 500\">{{ item.Name }}</div>\r\n <div style=\"font-size: 12px; color: #888\">{{ item.Code }}</div>\r\n </td>\r\n <td nzAlign=\"center\">\r\n <button\r\n nz-button\r\n nzType=\"link\"\r\n nzDanger\r\n nzSize=\"small\"\r\n nz-popconfirm\r\n nzPopconfirmTitle=\"X\u00F3a \u0110\u01A1n v\u1ECB n\u00E0y?\"\r\n nzAutofocus=\"ok\"\r\n (nzOnConfirm)=\"deleteOrgFromUser(item)\"\r\n >\r\n <span nz-icon nzType=\"delete\" nzTheme=\"outline\"></span>\r\n </button>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </nz-table>\r\n </div>\r\n </div>\r\n </nz-tab>\r\n\r\n <!-- TAB ROLE -->\r\n <nz-tab nzTitle=\"Nh\u00F3m quy\u1EC1n\">\r\n <div style=\"padding: 8px\">\r\n <h3 style=\"margin-bottom: 16px\">Danh s\u00E1ch Nh\u00F3m quy\u1EC1n</h3>\r\n\r\n <div nz-flex [nzJustify]=\"'space-between'\" [nzAlign]=\"'center'\" style=\"margin-bottom: 12px\">\r\n <span style=\"font-weight: 500\">Roles ({{ lstRoleInUser.length }})</span>\r\n <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"openAddRoleModal()\">\r\n <span nz-icon nzType=\"plus\"></span>\r\n Th\u00EAm Role\r\n </button>\r\n </div>\r\n\r\n <div style=\"max-height: 450px; overflow-y: auto\">\r\n <nz-table\r\n #roleTable\r\n [nzData]=\"lstRoleInUser\"\r\n [nzSize]=\"'small'\"\r\n [nzShowPagination]=\"lstRoleInUser.length > 20\"\r\n [nzPageSize]=\"20\"\r\n [nzBordered]=\"true\"\r\n >\r\n <thead>\r\n <tr>\r\n <th nzWidth=\"40px\">STT</th>\r\n <th>Role</th>\r\n <th nzWidth=\"50px\" nzAlign=\"center\"></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let item of roleTable.data; let i = index\">\r\n <td>{{ i + 1 }}</td>\r\n <td>\r\n <div style=\"font-weight: 500\">{{ item.Name }}</div>\r\n <div style=\"font-size: 12px; color: #888\">{{ item.Code }}</div>\r\n </td>\r\n <td nzAlign=\"center\">\r\n <button\r\n nz-button\r\n nzType=\"link\"\r\n nzDanger\r\n nzSize=\"small\"\r\n nz-popconfirm\r\n nzPopconfirmTitle=\"X\u00F3a Role n\u00E0y?\"\r\n (nzOnConfirm)=\"deleteRoleFromUser(item)\"\r\n >\r\n <span nz-icon nzType=\"delete\" nzTheme=\"outline\"></span>\r\n </button>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </nz-table>\r\n </div>\r\n </div>\r\n </nz-tab>\r\n </nz-tabset>\r\n </div>\r\n </div>\r\n</form>\r\n\r\n<!-- Modal ch\u1ECDn Org -->\r\n<nz-modal\r\n [(nzVisible)]=\"isAddOrgModalVisible\"\r\n nzTitle=\"Th\u00EAm \u0110\u01A1n v\u1ECB v\u00E0o User\"\r\n [nzWidth]=\"700\"\r\n (nzOnCancel)=\"closeAddOrgModal()\"\r\n (nzOnOk)=\"addOrgsToUser()\"\r\n nzOkText=\"Th\u00EAm\"\r\n nzCancelText=\"H\u1EE7y\"\r\n>\r\n <ng-container *nzModalContent>\r\n <nz-alert\r\n *ngIf=\"!isOneUserMultiOrgs\"\r\n nzType=\"info\"\r\n nzMessage=\"Ch\u1EC9 \u0111\u01B0\u1EE3c ch\u1ECDn 1 \u0110\u01A1n v\u1ECB\"\r\n nzShowIcon\r\n style=\"margin-bottom: 16px\"\r\n ></nz-alert>\r\n <!-- Search box -->\r\n <nz-input-group [nzPrefix]=\"prefixIconSearchOrg\" style=\"margin-bottom: 16px\">\r\n <input\r\n type=\"text\"\r\n nz-input\r\n placeholder=\"T\u00ECm ki\u1EBFm \u0110\u01A1n v\u1ECB...\"\r\n [(ngModel)]=\"searchOrgText\"\r\n (ngModelChange)=\"filterAvailableOrgs()\"\r\n />\r\n </nz-input-group>\r\n <ng-template #prefixIconSearchOrg>\r\n <span nz-icon nzType=\"search\"></span>\r\n </ng-template>\r\n\r\n <nz-table\r\n #addOrgTable\r\n [nzData]=\"lstFilteredOrg\"\r\n [nzSize]=\"'small'\"\r\n [nzShowPagination]=\"true\"\r\n [nzPageSize]=\"10\"\r\n [nzLoading]=\"isLoadingAvailableOrgs\"\r\n >\r\n <thead>\r\n <tr>\r\n <th\r\n nzWidth=\"60px\"\r\n [nzShowCheckbox]=\"isOneUserMultiOrgs\"\r\n [(nzChecked)]=\"isAllOrgChecked\"\r\n (nzCheckedChange)=\"onAllOrgChecked($event)\"\r\n [nzIndeterminate]=\"isOrgIndeterminate\"\r\n ></th>\r\n <th nzWidth=\"150px\">M\u00E3</th>\r\n <th>T\u00EAn</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let item of addOrgTable.data\">\r\n <td nzAlign=\"center\">\r\n <label nz-checkbox [(ngModel)]=\"item.checked\" (ngModelChange)=\"onOrgChecked(item, $event)\"></label>\r\n </td>\r\n <td>{{ item.Code }}</td>\r\n <td>{{ item.TreeNodeName || item.Name }}</td>\r\n </tr>\r\n </tbody>\r\n </nz-table>\r\n </ng-container>\r\n</nz-modal>\r\n\r\n<!-- Modal ch\u1ECDn Role -->\r\n<nz-modal\r\n [(nzVisible)]=\"isAddRoleModalVisible\"\r\n nzTitle=\"Th\u00EAm Role v\u00E0o User\"\r\n [nzWidth]=\"700\"\r\n (nzOnCancel)=\"closeAddRoleModal()\"\r\n (nzOnOk)=\"addRolesToUser()\"\r\n nzOkText=\"Th\u00EAm\"\r\n nzCancelText=\"H\u1EE7y\"\r\n>\r\n <ng-container *nzModalContent>\r\n <!-- Search box -->\r\n <nz-input-group [nzPrefix]=\"prefixIconSearchRole\" style=\"margin-bottom: 16px\">\r\n <input\r\n type=\"text\"\r\n nz-input\r\n placeholder=\"T\u00ECm ki\u1EBFm Role...\"\r\n [(ngModel)]=\"searchRoleText\"\r\n (ngModelChange)=\"filterAvailableRoles()\"\r\n />\r\n </nz-input-group>\r\n <ng-template #prefixIconSearchRole>\r\n <span nz-icon nzType=\"search\"></span>\r\n </ng-template>\r\n\r\n <nz-table\r\n #addRoleTable\r\n [nzData]=\"lstFilteredRole\"\r\n [nzSize]=\"'small'\"\r\n [nzShowPagination]=\"true\"\r\n [nzPageSize]=\"10\"\r\n [nzLoading]=\"isLoadingAvailableRoles\"\r\n >\r\n <thead>\r\n <tr>\r\n <th\r\n nzWidth=\"60px\"\r\n nzShowCheckbox\r\n [(nzChecked)]=\"isAllRoleChecked\"\r\n (nzCheckedChange)=\"onAllRoleChecked($event)\"\r\n [nzIndeterminate]=\"isRoleIndeterminate\"\r\n ></th>\r\n <th nzWidth=\"150px\">M\u00E3</th>\r\n <th>T\u00EAn</th>\r\n <th>M\u00F4 t\u1EA3</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let item of addRoleTable.data\">\r\n <td nzAlign=\"center\">\r\n <label nz-checkbox [(ngModel)]=\"item.checked\" (ngModelChange)=\"onRoleChecked(item, $event)\"></label>\r\n </td>\r\n <td>{{ item.Code }}</td>\r\n <td>{{ item.Name }}</td>\r\n <td>{{ item.Description }}</td>\r\n </tr>\r\n </tbody>\r\n </nz-table>\r\n </ng-container>\r\n</nz-modal>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "directive", type: i5.NzFormDirective, selector: "[nz-form]", inputs: ["nzLayout", "nzNoColon", "nzAutoTips", "nzDisableAutoTips", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzForm"] }, { kind: "component", type: i5.NzFormItemComponent, selector: "nz-form-item", exportAs: ["nzFormItem"] }, { kind: "component", type: i5.NzFormLabelComponent, selector: "nz-form-label", inputs: ["nzFor", "nzRequired", "nzNoColon", "nzTooltipTitle", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzFormLabel"] }, { kind: "component", type: i5.NzFormControlComponent, selector: "nz-form-control", inputs: ["nzSuccessTip", "nzWarningTip", "nzErrorTip", "nzValidatingTip", "nzExtra", "nzAutoTips", "nzDisableAutoTips", "nzHasFeedback", "nzValidateStatus"], exportAs: ["nzFormControl"] }, { kind: "ngmodule", type: NzSelectModule }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$2.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i4$1.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i5$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i5$1.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i5$1.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { kind: "ngmodule", type: NzCheckboxModule }, { kind: "component", type: i3$1.NzCheckboxComponent, selector: "[nz-checkbox]", inputs: ["nzValue", "nzAutoFocus", "nzDisabled", "nzIndeterminate", "nzChecked", "nzId", "nzName"], outputs: ["nzCheckedChange"], exportAs: ["nzCheckbox"] }, { kind: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i8.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i6$1.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "directive", type: i6$1.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$1.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$1.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$1.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$1.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "directive", type: i6$1.NzCellAlignDirective, selector: "th[nzAlign],td[nzAlign]", inputs: ["nzAlign"] }, { kind: "component", type: i6$1.NzThSelectionComponent, selector: "th[nzSelections],th[nzChecked],th[nzShowCheckbox],th[nzShowRowSelection]", inputs: ["nzSelections", "nzChecked", "nzDisabled", "nzIndeterminate", "nzLabel", "nzShowCheckbox", "nzShowRowSelection"], outputs: ["nzCheckedChange"] }, { kind: "ngmodule", type: NzModalModule }, { kind: "component", type: i15.NzModalComponent, selector: "nz-modal", inputs: ["nzMask", "nzMaskClosable", "nzCloseOnNavigation", "nzVisible", "nzClosable", "nzOkLoading", "nzOkDisabled", "nzCancelDisabled", "nzCancelLoading", "nzKeyboard", "nzNoAnimation", "nzCentered", "nzDraggable", "nzContent", "nzFooter", "nzZIndex", "nzWidth", "nzWrapClassName", "nzClassName", "nzStyle", "nzTitle", "nzCloseIcon", "nzMaskStyle", "nzBodyStyle", "nzOkText", "nzCancelText", "nzOkType", "nzOkDanger", "nzIconType", "nzModalType", "nzAutofocus", "nzOnOk", "nzOnCancel"], outputs: ["nzOnOk", "nzOnCancel", "nzAfterOpen", "nzAfterClose", "nzVisibleChange"], exportAs: ["nzModal"] }, { kind: "directive", type: i15.NzModalContentDirective, selector: "[nzModalContent]", exportAs: ["nzModalContent"] }, { kind: "ngmodule", type: NzPopconfirmModule }, { kind: "directive", type: i9$1.NzPopconfirmDirective, selector: "[nz-popconfirm]", inputs: ["nzPopconfirmArrowPointAtCenter", "nzPopconfirmTitle", "nzPopconfirmTitleContext", "nz-popconfirm", "nzPopconfirmTrigger", "nzPopconfirmPlacement", "nzPopconfirmOrigin", "nzPopconfirmMouseEnterDelay", "nzPopconfirmMouseLeaveDelay", "nzPopconfirmOverlayClassName", "nzPopconfirmOverlayStyle", "nzPopconfirmVisible", "nzOkText", "nzOkType", "nzOkDisabled", "nzOkDanger", "nzCancelText", "nzBeforeConfirm", "nzIcon", "nzCondition", "nzPopconfirmShowArrow", "nzPopconfirmBackdrop", "nzAutofocus"], outputs: ["nzPopconfirmVisibleChange", "nzOnCancel", "nzOnConfirm"], exportAs: ["nzPopconfirm"] }, { kind: "ngmodule", type: NzEmptyModule }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzDividerModule }, { kind: "component", type: i8$1.NzDividerComponent, selector: "nz-divider", inputs: ["nzText", "nzType", "nzOrientation", "nzVariant", "nzDashed", "nzPlain"], exportAs: ["nzDivider"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "ngmodule", type: NzTabsModule }, { kind: "component", type: i1$7.NzTabSetComponent, selector: "nz-tabset", inputs: ["nzSelectedIndex", "nzTabPosition", "nzTabBarExtraContent", "nzCanDeactivate", "nzAddIcon", "nzTabBarStyle", "nzType", "nzSize", "nzAnimated", "nzTabBarGutter", "nzHideAdd", "nzCentered", "nzHideAll", "nzLinkRouter", "nzLinkExact", "nzDestroyInactiveTabPane"], outputs: ["nzSelectChange", "nzSelectedIndexChange", "nzTabListScroll", "nzClose", "nzAdd"], exportAs: ["nzTabset"] }, { kind: "component", type: i1$7.NzTabComponent, selector: "nz-tab", inputs: ["nzTitle", "nzClosable", "nzCloseIcon", "nzDisabled", "nzForceRender"], outputs: ["nzSelect", "nzDeselect", "nzClick", "nzContextmenu"], exportAs: ["nzTab"] }, { kind: "component", type: NzAlertComponent, selector: "nz-alert", inputs: ["nzAction", "nzCloseText", "nzIconType", "nzMessage", "nzDescription", "nzType", "nzCloseable", "nzShowIcon", "nzBanner", "nzNoAnimation", "nzIcon"], outputs: ["nzOnClose"], exportAs: ["nzAlert"] }, { kind: "component", type: ButtonBack, selector: "button-back" }, { kind: "component", type: ButtonSave, selector: "button-save" }] });
7990
7986
  }
7991
7987
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: UserDetailComponent, decorators: [{
7992
7988
  type: Component,
@@ -8201,7 +8197,7 @@ class UserProfileComponent extends BaseComponent {
8201
8197
  localStorage.setItem('side-width', this.sideWidth);
8202
8198
  }
8203
8199
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: UserProfileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
8204
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: UserProfileComponent, isStandalone: true, selector: "app-user-profile", usesInheritance: true, ngImport: i0, template: "<!-- <h3>User Profile</h3> -->\r\n<nz-tabset [nzSize]=\"'small'\" [nzType]=\"'card'\" (nzSelectedIndexChange)=\"nzSelectedIndexChange($event)\">\r\n <nz-tab [nzTitle]=\"'\u0110\u1ED5i m\u1EADt kh\u1EA9u'\">\r\n <form [formGroup]=\"formData\" (ngSubmit)=\"onSubmit()\" nz-form>\r\n <div nz-row>\r\n <div nz-col [nzSpan]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"10\" [nzFor]=\"'CurrentPassword'\" nzNoColon nzLabelWrap nzRequired>\r\n M\u1EADt kh\u1EA9u hi\u1EC7n t\u1EA1i\r\n </nz-form-label>\r\n <nz-form-control [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n <nz-input-group\r\n [nzSuffix]=\"\r\n !CurrentPasswordVisible ? suffixTemplateShowCurrentPassword : suffixTemplateHiddenCurrentPassword\r\n \"\r\n >\r\n <input\r\n nz-input\r\n type=\"{{ CurrentPasswordType }}\"\r\n formControlName=\"CurrentPassword\"\r\n id=\"CurrentPassword\"\r\n />\r\n </nz-input-group>\r\n <ng-template #suffixTemplateShowCurrentPassword>\r\n <nz-icon\r\n nzType=\"eye\"\r\n nzTheme=\"outline\"\r\n nz-tooltip\r\n nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\r\n nzTooltipPlacement=\"right\"\r\n (click)=\"CurrentPasswordVisible = !CurrentPasswordVisible; CurrentPasswordType = 'text'\"\r\n />\r\n </ng-template>\r\n <ng-template #suffixTemplateHiddenCurrentPassword>\r\n <nz-icon\r\n nzType=\"eye-invisible\"\r\n nzTheme=\"outline\"\r\n nz-tooltip\r\n nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\r\n nzTooltipPlacement=\"right\"\r\n (click)=\"CurrentPasswordVisible = !CurrentPasswordVisible; CurrentPasswordType = 'password'\"\r\n />\r\n </ng-template>\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"10\" [nzFor]=\"'NewPassword'\" nzNoColon nzLabelWrap nzRequired>\r\n M\u1EADt kh\u1EA9u m\u1EDBi\r\n </nz-form-label>\r\n <nz-form-control [nzErrorTip]=\"NewPasswordErrorTpl\">\r\n <nz-input-group\r\n [nzSuffix]=\"!NewPasswordVisible ? suffixTemplateShowNewPassword : suffixTemplateHiddenNewPassword\"\r\n >\r\n <input nz-input type=\"{{ NewPasswordType }}\" formControlName=\"NewPassword\" id=\"NewPassword\" />\r\n </nz-input-group>\r\n <ng-template #suffixTemplateShowNewPassword>\r\n <nz-icon\r\n nzType=\"eye\"\r\n nzTheme=\"outline\"\r\n nz-tooltip\r\n nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\r\n nzTooltipPlacement=\"right\"\r\n (click)=\"NewPasswordVisible = !NewPasswordVisible; NewPasswordType = 'text'\"\r\n />\r\n </ng-template>\r\n <ng-template #suffixTemplateHiddenNewPassword>\r\n <nz-icon\r\n nzType=\"eye-invisible\"\r\n nzTheme=\"outline\"\r\n nz-tooltip\r\n nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\r\n nzTooltipPlacement=\"right\"\r\n (click)=\"NewPasswordVisible = !NewPasswordVisible; NewPasswordType = 'password'\"\r\n />\r\n </ng-template>\r\n <ng-template #NewPasswordErrorTpl let-control>\r\n @if (control.errors?.[\"required\"]) {\r\n {{ \"REQUIRED_FIELD\" | translate }}\r\n }\r\n @if (control.errors?.[\"minlength\"]) {\r\n M\u1EADt kh\u1EA9u d\u00E0i t\u1ED1i thi\u1EC3u 6 k\u00FD t\u1EF1\r\n }\r\n </ng-template>\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"10\" [nzFor]=\"'ConfirmPassword'\" nzNoColon nzLabelWrap nzRequired>\r\n X\u00E1c nh\u1EADn m\u1EADt kh\u1EA9u m\u1EDBi\r\n </nz-form-label>\r\n <nz-form-control [nzErrorTip]=\"ConfirmPasswordErrorTpl\">\r\n <nz-input-group\r\n [nzSuffix]=\"\r\n !ConfirmPasswordVisible ? suffixTemplateShowConfirmPassword : suffixTemplateHiddenConfirmPassword\r\n \"\r\n >\r\n <input\r\n nz-input\r\n type=\"{{ ConfirmPasswordType }}\"\r\n formControlName=\"ConfirmPassword\"\r\n id=\"ConfirmPassword\"\r\n />\r\n </nz-input-group>\r\n <ng-template #suffixTemplateShowConfirmPassword>\r\n <nz-icon\r\n nzType=\"eye\"\r\n nzTheme=\"outline\"\r\n nz-tooltip\r\n nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\r\n nzTooltipPlacement=\"right\"\r\n (click)=\"ConfirmPasswordVisible = !ConfirmPasswordVisible; ConfirmPasswordType = 'text'\"\r\n />\r\n </ng-template>\r\n <ng-template #suffixTemplateHiddenConfirmPassword>\r\n <nz-icon\r\n nzType=\"eye-invisible\"\r\n nzTheme=\"outline\"\r\n nz-tooltip\r\n nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\r\n nzTooltipPlacement=\"right\"\r\n (click)=\"ConfirmPasswordVisible = !ConfirmPasswordVisible; ConfirmPasswordType = 'password'\"\r\n />\r\n </ng-template>\r\n <ng-template #ConfirmPasswordErrorTpl let-control>\r\n @if (control.errors?.[\"required\"]) {\r\n {{ \"REQUIRED_FIELD\" | translate }}\r\n }\r\n @if (control.errors?.[\"passwordMismatch\"]) {\r\n M\u1EADt kh\u1EA9u kh\u00F4ng kh\u1EDBp\r\n }\r\n </ng-template>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n </div>\r\n\r\n <button nz-button nzType=\"primary\">\u0110\u1ED5i m\u1EADt kh\u1EA9u</button>\r\n </form>\r\n </nz-tab>\r\n\r\n <nz-tab [nzTitle]=\"'Giao di\u1EC7n'\">\r\n <div nz-row>\r\n <extend-checkbox\r\n nz-col\r\n [nzSpan]=\"6\"\r\n [label]=\"'High contrast'\"\r\n [labelSpan]=\"0\"\r\n [(_ngModel)]=\"isHighContrast\"\r\n (_ngModelChange)=\"onChangeHighContrast()\"\r\n ></extend-checkbox>\r\n\r\n <extend-input\r\n nz-col\r\n [nzSpan]=\"6\"\r\n [label]=\"'Side width'\"\r\n [(_ngModel)]=\"sideWidth\"\r\n (_ngModelChange)=\"onChangeSideWidth()\"\r\n ></extend-input>\r\n </div>\r\n\r\n <div nz-row [nzGutter]=\"16\">\r\n <div nz-col>\r\n Theme color:\r\n <nz-color-picker\r\n nzShowText\r\n [ngModel]=\"\r\n profileService.userProfile[profileService.KEY_THEME_COLOR] ||\r\n profileService.themecf[profileService.KEY_THEME_COLOR] ||\r\n profileService.DEFAULT_THEME_COLOR\r\n \"\r\n (ngModelChange)=\"\r\n profileService.updateUserProfile(profileService.KEY_THEME_COLOR, $event); profileService.loadTheme()\r\n \"\r\n ></nz-color-picker>\r\n </div>\r\n </div>\r\n\r\n <div nz-row [nzGutter]=\"16\">\r\n <div nz-col>\r\n Theme menu color:\r\n <nz-color-picker\r\n nzShowText\r\n [ngModel]=\"\r\n profileService.userProfile[profileService.KEY_THEME_MENU_COLOR] ||\r\n profileService.themecf[profileService.KEY_THEME_MENU_COLOR] ||\r\n profileService.DEFAULT_THEME_MENU_COLOR\r\n \"\r\n (ngModelChange)=\"\r\n profileService.updateUserProfile(profileService.KEY_THEME_MENU_COLOR, $event); profileService.loadTheme()\r\n \"\r\n ></nz-color-picker>\r\n </div>\r\n </div>\r\n\r\n <div nz-row [nzGutter]=\"16\">\r\n <div nz-col>\r\n <button type=\"button\" nz-button nzType=\"primary\" nzDanger (click)=\"profileService.resetTheme()\">\r\n Reset Theme\r\n </button>\r\n </div>\r\n </div>\r\n </nz-tab>\r\n <!-- <nz-tab [nzTitle]=\"'Tab3'\"> Tab3 </nz-tab> -->\r\n</nz-tabset>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "directive", type: i5.NzFormDirective, selector: "[nz-form]", inputs: ["nzLayout", "nzNoColon", "nzAutoTips", "nzDisableAutoTips", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzForm"] }, { kind: "component", type: i5.NzFormItemComponent, selector: "nz-form-item", exportAs: ["nzFormItem"] }, { kind: "component", type: i5.NzFormLabelComponent, selector: "nz-form-label", inputs: ["nzFor", "nzRequired", "nzNoColon", "nzTooltipTitle", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzFormLabel"] }, { kind: "component", type: i5.NzFormControlComponent, selector: "nz-form-control", inputs: ["nzSuccessTip", "nzWarningTip", "nzErrorTip", "nzValidatingTip", "nzExtra", "nzAutoTips", "nzDisableAutoTips", "nzHasFeedback", "nzValidateStatus"], exportAs: ["nzFormControl"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i5$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i5$1.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i5$1.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzTabsModule }, { kind: "component", type: i1$7.NzTabSetComponent, selector: "nz-tabset", inputs: ["nzSelectedIndex", "nzTabPosition", "nzTabBarExtraContent", "nzCanDeactivate", "nzAddIcon", "nzTabBarStyle", "nzType", "nzSize", "nzAnimated", "nzTabBarGutter", "nzHideAdd", "nzCentered", "nzHideAll", "nzLinkRouter", "nzLinkExact", "nzDestroyInactiveTabPane"], outputs: ["nzSelectChange", "nzSelectedIndexChange", "nzTabListScroll", "nzClose", "nzAdd"], exportAs: ["nzTabset"] }, { kind: "component", type: i1$7.NzTabComponent, selector: "nz-tab", inputs: ["nzTitle", "nzClosable", "nzCloseIcon", "nzDisabled", "nzForceRender"], outputs: ["nzSelect", "nzDeselect", "nzClick", "nzContextmenu"], exportAs: ["nzTab"] }, { kind: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i8.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { kind: "component", type: ExtendCheckbox, selector: "extend-checkbox", inputs: ["label", "labelSpan", "labelFlex", "paddingTop", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$2.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i4$1.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "component", type: ExtendInput, selector: "extend-input", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "inputClass", "labelSpan", "labelFlex", "inputFlex", "showClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "autofocus", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "displayField", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "onclickClearIcon", "onenter"] }, { kind: "ngmodule", type: NzColorPickerModule }, { kind: "component", type: i12$2.NzColorPickerComponent, selector: "nz-color-picker", inputs: ["nzFormat", "nzValue", "nzSize", "nzDefaultValue", "nzTrigger", "nzTitle", "nzFlipFlop", "nzShowText", "nzOpen", "nzAllowClear", "nzDisabled", "nzDisabledAlpha"], outputs: ["nzOnChange", "nzOnFormatChange", "nzOnClear", "nzOnOpenChange"], exportAs: ["NzColorPicker"] }] });
8200
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: UserProfileComponent, isStandalone: true, selector: "app-user-profile", usesInheritance: true, ngImport: i0, template: "<!-- <h3>User Profile</h3> -->\r\n<nz-tabset [nzSize]=\"'small'\" [nzType]=\"'card'\" (nzSelectedIndexChange)=\"nzSelectedIndexChange($event)\">\r\n <nz-tab [nzTitle]=\"'\u0110\u1ED5i m\u1EADt kh\u1EA9u'\">\r\n <form [formGroup]=\"formData\" (ngSubmit)=\"onSubmit()\" nz-form>\r\n <div nz-row>\r\n <div nz-col [nzSpan]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"10\" [nzFor]=\"'CurrentPassword'\" nzNoColon nzLabelWrap nzRequired>\r\n M\u1EADt kh\u1EA9u hi\u1EC7n t\u1EA1i\r\n </nz-form-label>\r\n <nz-form-control [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n <nz-input-group\r\n [nzSuffix]=\"\r\n !CurrentPasswordVisible ? suffixTemplateShowCurrentPassword : suffixTemplateHiddenCurrentPassword\r\n \"\r\n >\r\n <input\r\n nz-input\r\n type=\"{{ CurrentPasswordType }}\"\r\n formControlName=\"CurrentPassword\"\r\n id=\"CurrentPassword\"\r\n />\r\n </nz-input-group>\r\n <ng-template #suffixTemplateShowCurrentPassword>\r\n <nz-icon\r\n nzType=\"eye\"\r\n nzTheme=\"outline\"\r\n nz-tooltip\r\n nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\r\n nzTooltipPlacement=\"right\"\r\n (click)=\"CurrentPasswordVisible = !CurrentPasswordVisible; CurrentPasswordType = 'text'\"\r\n />\r\n </ng-template>\r\n <ng-template #suffixTemplateHiddenCurrentPassword>\r\n <nz-icon\r\n nzType=\"eye-invisible\"\r\n nzTheme=\"outline\"\r\n nz-tooltip\r\n nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\r\n nzTooltipPlacement=\"right\"\r\n (click)=\"CurrentPasswordVisible = !CurrentPasswordVisible; CurrentPasswordType = 'password'\"\r\n />\r\n </ng-template>\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"10\" [nzFor]=\"'NewPassword'\" nzNoColon nzLabelWrap nzRequired>\r\n M\u1EADt kh\u1EA9u m\u1EDBi\r\n </nz-form-label>\r\n <nz-form-control [nzErrorTip]=\"NewPasswordErrorTpl\">\r\n <nz-input-group\r\n [nzSuffix]=\"!NewPasswordVisible ? suffixTemplateShowNewPassword : suffixTemplateHiddenNewPassword\"\r\n >\r\n <input nz-input type=\"{{ NewPasswordType }}\" formControlName=\"NewPassword\" id=\"NewPassword\" />\r\n </nz-input-group>\r\n <ng-template #suffixTemplateShowNewPassword>\r\n <nz-icon\r\n nzType=\"eye\"\r\n nzTheme=\"outline\"\r\n nz-tooltip\r\n nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\r\n nzTooltipPlacement=\"right\"\r\n (click)=\"NewPasswordVisible = !NewPasswordVisible; NewPasswordType = 'text'\"\r\n />\r\n </ng-template>\r\n <ng-template #suffixTemplateHiddenNewPassword>\r\n <nz-icon\r\n nzType=\"eye-invisible\"\r\n nzTheme=\"outline\"\r\n nz-tooltip\r\n nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\r\n nzTooltipPlacement=\"right\"\r\n (click)=\"NewPasswordVisible = !NewPasswordVisible; NewPasswordType = 'password'\"\r\n />\r\n </ng-template>\r\n <ng-template #NewPasswordErrorTpl let-control>\r\n @if (control.errors?.[\"required\"]) {\r\n {{ \"REQUIRED_FIELD\" | translate }}\r\n }\r\n @if (control.errors?.[\"minlength\"]) {\r\n M\u1EADt kh\u1EA9u d\u00E0i t\u1ED1i thi\u1EC3u 6 k\u00FD t\u1EF1\r\n }\r\n </ng-template>\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"10\" [nzFor]=\"'ConfirmPassword'\" nzNoColon nzLabelWrap nzRequired>\r\n X\u00E1c nh\u1EADn m\u1EADt kh\u1EA9u m\u1EDBi\r\n </nz-form-label>\r\n <nz-form-control [nzErrorTip]=\"ConfirmPasswordErrorTpl\">\r\n <nz-input-group\r\n [nzSuffix]=\"\r\n !ConfirmPasswordVisible ? suffixTemplateShowConfirmPassword : suffixTemplateHiddenConfirmPassword\r\n \"\r\n >\r\n <input\r\n nz-input\r\n type=\"{{ ConfirmPasswordType }}\"\r\n formControlName=\"ConfirmPassword\"\r\n id=\"ConfirmPassword\"\r\n />\r\n </nz-input-group>\r\n <ng-template #suffixTemplateShowConfirmPassword>\r\n <nz-icon\r\n nzType=\"eye\"\r\n nzTheme=\"outline\"\r\n nz-tooltip\r\n nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\r\n nzTooltipPlacement=\"right\"\r\n (click)=\"ConfirmPasswordVisible = !ConfirmPasswordVisible; ConfirmPasswordType = 'text'\"\r\n />\r\n </ng-template>\r\n <ng-template #suffixTemplateHiddenConfirmPassword>\r\n <nz-icon\r\n nzType=\"eye-invisible\"\r\n nzTheme=\"outline\"\r\n nz-tooltip\r\n nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\r\n nzTooltipPlacement=\"right\"\r\n (click)=\"ConfirmPasswordVisible = !ConfirmPasswordVisible; ConfirmPasswordType = 'password'\"\r\n />\r\n </ng-template>\r\n <ng-template #ConfirmPasswordErrorTpl let-control>\r\n @if (control.errors?.[\"required\"]) {\r\n {{ \"REQUIRED_FIELD\" | translate }}\r\n }\r\n @if (control.errors?.[\"passwordMismatch\"]) {\r\n M\u1EADt kh\u1EA9u kh\u00F4ng kh\u1EDBp\r\n }\r\n </ng-template>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n </div>\r\n\r\n <button nz-button nzType=\"primary\">\u0110\u1ED5i m\u1EADt kh\u1EA9u</button>\r\n </form>\r\n </nz-tab>\r\n\r\n <nz-tab [nzTitle]=\"'Giao di\u1EC7n'\">\r\n <div nz-row>\r\n <extend-checkbox\r\n nz-col\r\n [nzSpan]=\"6\"\r\n [label]=\"'High contrast'\"\r\n [labelSpan]=\"0\"\r\n [(_ngModel)]=\"isHighContrast\"\r\n (_ngModelChange)=\"onChangeHighContrast()\"\r\n ></extend-checkbox>\r\n\r\n <extend-input\r\n nz-col\r\n [nzSpan]=\"6\"\r\n [label]=\"'Side width'\"\r\n [(_ngModel)]=\"sideWidth\"\r\n (_ngModelChange)=\"onChangeSideWidth()\"\r\n ></extend-input>\r\n </div>\r\n\r\n <div nz-row [nzGutter]=\"16\">\r\n <div nz-col>\r\n Theme color:\r\n <nz-color-picker\r\n nzShowText\r\n [ngModel]=\"\r\n profileService.userProfile[profileService.KEY_THEME_COLOR] ||\r\n profileService.themecf[profileService.KEY_THEME_COLOR] ||\r\n profileService.DEFAULT_THEME_COLOR\r\n \"\r\n (ngModelChange)=\"\r\n profileService.updateUserProfile(profileService.KEY_THEME_COLOR, $event); profileService.loadTheme()\r\n \"\r\n ></nz-color-picker>\r\n </div>\r\n </div>\r\n\r\n <div nz-row [nzGutter]=\"16\">\r\n <div nz-col>\r\n Theme menu color:\r\n <nz-color-picker\r\n nzShowText\r\n [ngModel]=\"\r\n profileService.userProfile[profileService.KEY_THEME_MENU_COLOR] ||\r\n profileService.themecf[profileService.KEY_THEME_MENU_COLOR] ||\r\n profileService.DEFAULT_THEME_MENU_COLOR\r\n \"\r\n (ngModelChange)=\"\r\n profileService.updateUserProfile(profileService.KEY_THEME_MENU_COLOR, $event); profileService.loadTheme()\r\n \"\r\n ></nz-color-picker>\r\n </div>\r\n </div>\r\n\r\n <div nz-row [nzGutter]=\"16\">\r\n <div nz-col>\r\n <button type=\"button\" nz-button nzType=\"primary\" nzDanger (click)=\"profileService.resetTheme()\">\r\n Reset Theme\r\n </button>\r\n </div>\r\n </div>\r\n </nz-tab>\r\n <!-- <nz-tab [nzTitle]=\"'Tab3'\"> Tab3 </nz-tab> -->\r\n</nz-tabset>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "directive", type: i5.NzFormDirective, selector: "[nz-form]", inputs: ["nzLayout", "nzNoColon", "nzAutoTips", "nzDisableAutoTips", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzForm"] }, { kind: "component", type: i5.NzFormItemComponent, selector: "nz-form-item", exportAs: ["nzFormItem"] }, { kind: "component", type: i5.NzFormLabelComponent, selector: "nz-form-label", inputs: ["nzFor", "nzRequired", "nzNoColon", "nzTooltipTitle", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzFormLabel"] }, { kind: "component", type: i5.NzFormControlComponent, selector: "nz-form-control", inputs: ["nzSuccessTip", "nzWarningTip", "nzErrorTip", "nzValidatingTip", "nzExtra", "nzAutoTips", "nzDisableAutoTips", "nzHasFeedback", "nzValidateStatus"], exportAs: ["nzFormControl"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i5$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i5$1.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i5$1.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzTabsModule }, { kind: "component", type: i1$7.NzTabSetComponent, selector: "nz-tabset", inputs: ["nzSelectedIndex", "nzTabPosition", "nzTabBarExtraContent", "nzCanDeactivate", "nzAddIcon", "nzTabBarStyle", "nzType", "nzSize", "nzAnimated", "nzTabBarGutter", "nzHideAdd", "nzCentered", "nzHideAll", "nzLinkRouter", "nzLinkExact", "nzDestroyInactiveTabPane"], outputs: ["nzSelectChange", "nzSelectedIndexChange", "nzTabListScroll", "nzClose", "nzAdd"], exportAs: ["nzTabset"] }, { kind: "component", type: i1$7.NzTabComponent, selector: "nz-tab", inputs: ["nzTitle", "nzClosable", "nzCloseIcon", "nzDisabled", "nzForceRender"], outputs: ["nzSelect", "nzDeselect", "nzClick", "nzContextmenu"], exportAs: ["nzTab"] }, { kind: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i8.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { kind: "component", type: ExtendCheckbox, selector: "extend-checkbox", inputs: ["label", "labelSpan", "labelFlex", "paddingTop", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$2.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i4$1.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "component", type: ExtendInput, selector: "extend-input", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "inputClass", "labelSpan", "labelFlex", "inputFlex", "showClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "autofocus", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "displayField", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "onclickClearIcon", "onenter"] }, { kind: "ngmodule", type: NzColorPickerModule }, { kind: "component", type: i12$1.NzColorPickerComponent, selector: "nz-color-picker", inputs: ["nzFormat", "nzValue", "nzSize", "nzDefaultValue", "nzTrigger", "nzTitle", "nzFlipFlop", "nzShowText", "nzOpen", "nzAllowClear", "nzDisabled", "nzDisabledAlpha"], outputs: ["nzOnChange", "nzOnFormatChange", "nzOnClear", "nzOnOpenChange"], exportAs: ["NzColorPicker"] }] });
8205
8201
  }
8206
8202
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: UserProfileComponent, decorators: [{
8207
8203
  type: Component,
@@ -8223,7 +8219,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
8223
8219
  ], template: "<!-- <h3>User Profile</h3> -->\r\n<nz-tabset [nzSize]=\"'small'\" [nzType]=\"'card'\" (nzSelectedIndexChange)=\"nzSelectedIndexChange($event)\">\r\n <nz-tab [nzTitle]=\"'\u0110\u1ED5i m\u1EADt kh\u1EA9u'\">\r\n <form [formGroup]=\"formData\" (ngSubmit)=\"onSubmit()\" nz-form>\r\n <div nz-row>\r\n <div nz-col [nzSpan]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"10\" [nzFor]=\"'CurrentPassword'\" nzNoColon nzLabelWrap nzRequired>\r\n M\u1EADt kh\u1EA9u hi\u1EC7n t\u1EA1i\r\n </nz-form-label>\r\n <nz-form-control [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n <nz-input-group\r\n [nzSuffix]=\"\r\n !CurrentPasswordVisible ? suffixTemplateShowCurrentPassword : suffixTemplateHiddenCurrentPassword\r\n \"\r\n >\r\n <input\r\n nz-input\r\n type=\"{{ CurrentPasswordType }}\"\r\n formControlName=\"CurrentPassword\"\r\n id=\"CurrentPassword\"\r\n />\r\n </nz-input-group>\r\n <ng-template #suffixTemplateShowCurrentPassword>\r\n <nz-icon\r\n nzType=\"eye\"\r\n nzTheme=\"outline\"\r\n nz-tooltip\r\n nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\r\n nzTooltipPlacement=\"right\"\r\n (click)=\"CurrentPasswordVisible = !CurrentPasswordVisible; CurrentPasswordType = 'text'\"\r\n />\r\n </ng-template>\r\n <ng-template #suffixTemplateHiddenCurrentPassword>\r\n <nz-icon\r\n nzType=\"eye-invisible\"\r\n nzTheme=\"outline\"\r\n nz-tooltip\r\n nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\r\n nzTooltipPlacement=\"right\"\r\n (click)=\"CurrentPasswordVisible = !CurrentPasswordVisible; CurrentPasswordType = 'password'\"\r\n />\r\n </ng-template>\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"10\" [nzFor]=\"'NewPassword'\" nzNoColon nzLabelWrap nzRequired>\r\n M\u1EADt kh\u1EA9u m\u1EDBi\r\n </nz-form-label>\r\n <nz-form-control [nzErrorTip]=\"NewPasswordErrorTpl\">\r\n <nz-input-group\r\n [nzSuffix]=\"!NewPasswordVisible ? suffixTemplateShowNewPassword : suffixTemplateHiddenNewPassword\"\r\n >\r\n <input nz-input type=\"{{ NewPasswordType }}\" formControlName=\"NewPassword\" id=\"NewPassword\" />\r\n </nz-input-group>\r\n <ng-template #suffixTemplateShowNewPassword>\r\n <nz-icon\r\n nzType=\"eye\"\r\n nzTheme=\"outline\"\r\n nz-tooltip\r\n nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\r\n nzTooltipPlacement=\"right\"\r\n (click)=\"NewPasswordVisible = !NewPasswordVisible; NewPasswordType = 'text'\"\r\n />\r\n </ng-template>\r\n <ng-template #suffixTemplateHiddenNewPassword>\r\n <nz-icon\r\n nzType=\"eye-invisible\"\r\n nzTheme=\"outline\"\r\n nz-tooltip\r\n nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\r\n nzTooltipPlacement=\"right\"\r\n (click)=\"NewPasswordVisible = !NewPasswordVisible; NewPasswordType = 'password'\"\r\n />\r\n </ng-template>\r\n <ng-template #NewPasswordErrorTpl let-control>\r\n @if (control.errors?.[\"required\"]) {\r\n {{ \"REQUIRED_FIELD\" | translate }}\r\n }\r\n @if (control.errors?.[\"minlength\"]) {\r\n M\u1EADt kh\u1EA9u d\u00E0i t\u1ED1i thi\u1EC3u 6 k\u00FD t\u1EF1\r\n }\r\n </ng-template>\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"10\" [nzFor]=\"'ConfirmPassword'\" nzNoColon nzLabelWrap nzRequired>\r\n X\u00E1c nh\u1EADn m\u1EADt kh\u1EA9u m\u1EDBi\r\n </nz-form-label>\r\n <nz-form-control [nzErrorTip]=\"ConfirmPasswordErrorTpl\">\r\n <nz-input-group\r\n [nzSuffix]=\"\r\n !ConfirmPasswordVisible ? suffixTemplateShowConfirmPassword : suffixTemplateHiddenConfirmPassword\r\n \"\r\n >\r\n <input\r\n nz-input\r\n type=\"{{ ConfirmPasswordType }}\"\r\n formControlName=\"ConfirmPassword\"\r\n id=\"ConfirmPassword\"\r\n />\r\n </nz-input-group>\r\n <ng-template #suffixTemplateShowConfirmPassword>\r\n <nz-icon\r\n nzType=\"eye\"\r\n nzTheme=\"outline\"\r\n nz-tooltip\r\n nzTooltipTitle=\"{{ 'SHOW' | translate }}\"\r\n nzTooltipPlacement=\"right\"\r\n (click)=\"ConfirmPasswordVisible = !ConfirmPasswordVisible; ConfirmPasswordType = 'text'\"\r\n />\r\n </ng-template>\r\n <ng-template #suffixTemplateHiddenConfirmPassword>\r\n <nz-icon\r\n nzType=\"eye-invisible\"\r\n nzTheme=\"outline\"\r\n nz-tooltip\r\n nzTooltipTitle=\"{{ 'HIDDEN' | translate }}\"\r\n nzTooltipPlacement=\"right\"\r\n (click)=\"ConfirmPasswordVisible = !ConfirmPasswordVisible; ConfirmPasswordType = 'password'\"\r\n />\r\n </ng-template>\r\n <ng-template #ConfirmPasswordErrorTpl let-control>\r\n @if (control.errors?.[\"required\"]) {\r\n {{ \"REQUIRED_FIELD\" | translate }}\r\n }\r\n @if (control.errors?.[\"passwordMismatch\"]) {\r\n M\u1EADt kh\u1EA9u kh\u00F4ng kh\u1EDBp\r\n }\r\n </ng-template>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n </div>\r\n\r\n <button nz-button nzType=\"primary\">\u0110\u1ED5i m\u1EADt kh\u1EA9u</button>\r\n </form>\r\n </nz-tab>\r\n\r\n <nz-tab [nzTitle]=\"'Giao di\u1EC7n'\">\r\n <div nz-row>\r\n <extend-checkbox\r\n nz-col\r\n [nzSpan]=\"6\"\r\n [label]=\"'High contrast'\"\r\n [labelSpan]=\"0\"\r\n [(_ngModel)]=\"isHighContrast\"\r\n (_ngModelChange)=\"onChangeHighContrast()\"\r\n ></extend-checkbox>\r\n\r\n <extend-input\r\n nz-col\r\n [nzSpan]=\"6\"\r\n [label]=\"'Side width'\"\r\n [(_ngModel)]=\"sideWidth\"\r\n (_ngModelChange)=\"onChangeSideWidth()\"\r\n ></extend-input>\r\n </div>\r\n\r\n <div nz-row [nzGutter]=\"16\">\r\n <div nz-col>\r\n Theme color:\r\n <nz-color-picker\r\n nzShowText\r\n [ngModel]=\"\r\n profileService.userProfile[profileService.KEY_THEME_COLOR] ||\r\n profileService.themecf[profileService.KEY_THEME_COLOR] ||\r\n profileService.DEFAULT_THEME_COLOR\r\n \"\r\n (ngModelChange)=\"\r\n profileService.updateUserProfile(profileService.KEY_THEME_COLOR, $event); profileService.loadTheme()\r\n \"\r\n ></nz-color-picker>\r\n </div>\r\n </div>\r\n\r\n <div nz-row [nzGutter]=\"16\">\r\n <div nz-col>\r\n Theme menu color:\r\n <nz-color-picker\r\n nzShowText\r\n [ngModel]=\"\r\n profileService.userProfile[profileService.KEY_THEME_MENU_COLOR] ||\r\n profileService.themecf[profileService.KEY_THEME_MENU_COLOR] ||\r\n profileService.DEFAULT_THEME_MENU_COLOR\r\n \"\r\n (ngModelChange)=\"\r\n profileService.updateUserProfile(profileService.KEY_THEME_MENU_COLOR, $event); profileService.loadTheme()\r\n \"\r\n ></nz-color-picker>\r\n </div>\r\n </div>\r\n\r\n <div nz-row [nzGutter]=\"16\">\r\n <div nz-col>\r\n <button type=\"button\" nz-button nzType=\"primary\" nzDanger (click)=\"profileService.resetTheme()\">\r\n Reset Theme\r\n </button>\r\n </div>\r\n </div>\r\n </nz-tab>\r\n <!-- <nz-tab [nzTitle]=\"'Tab3'\"> Tab3 </nz-tab> -->\r\n</nz-tabset>\r\n" }]
8224
8220
  }] });
8225
8221
 
8226
- const URLs$4 = {
8222
+ const URLs$3 = {
8227
8223
  getById: '/api/App_Sequence/GetById',
8228
8224
  getAll: '/api/App_Sequence/GetAll',
8229
8225
  getList: '/api/App_Sequence/GetList',
@@ -8235,13 +8231,13 @@ class SequenceService extends HTTPService {
8235
8231
  commonService = inject(CommonService);
8236
8232
  getById(id) {
8237
8233
  const params = new HttpParams().append('id', id);
8238
- return this.postParams(AppGlobals.apiEndpoint + URLs$4.getById, params);
8234
+ return this.postParams(AppGlobals.apiEndpoint + URLs$3.getById, params);
8239
8235
  }
8240
8236
  getAll() {
8241
- return this.post(AppGlobals.apiEndpoint + URLs$4.getAll);
8237
+ return this.post(AppGlobals.apiEndpoint + URLs$3.getAll);
8242
8238
  }
8243
8239
  getList(filter) {
8244
- return this.postData(AppGlobals.apiEndpoint + URLs$4.getList, filter);
8240
+ return this.postData(AppGlobals.apiEndpoint + URLs$3.getList, filter);
8245
8241
  }
8246
8242
  getPaging(filter) {
8247
8243
  return this.commonService.ESP({
@@ -8257,7 +8253,7 @@ class SequenceService extends HTTPService {
8257
8253
  }
8258
8254
  delete(id) {
8259
8255
  const params = new HttpParams().append('id', id);
8260
- return this.postParams(AppGlobals.apiEndpoint + URLs$4.delete, params);
8256
+ return this.postParams(AppGlobals.apiEndpoint + URLs$3.delete, params);
8261
8257
  }
8262
8258
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: SequenceService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
8263
8259
  static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: SequenceService, providedIn: 'root' });
@@ -8480,7 +8476,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
8480
8476
  ], template: "<form nz-form [formGroup]=\"formData\">\r\n <div nz-row [nzGutter]=\"[32, 16]\">\r\n <div nz-col [nzSpan]=\"24\">\r\n <div nz-flex [nzGap]=\"'small'\">\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"goback()\">{{ \"BACK\" | translate }}</button>\r\n <button nz-button nzType=\"primary\" type=\"button\" (click)=\"save()\">{{ TranslateKey.SAVE | translate }}</button>\r\n <button *ngIf=\"item?.App_Sequence_Id\" nz-button nzType=\"primary\" type=\"button\" nzDanger (click)=\"delete()\">\r\n {{ TranslateKey.DELETE | translate }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div nz-col [nzMd]=\"12\" [nzSm]=\"24\">\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"8\" nzFor=\"Code\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired> M\u00E3 </nz-form-label>\r\n <nz-form-control [nzSpan]=\"16\" [nzErrorTip]=\"'REQUIRED_FIELD' | translate\">\r\n <input nz-input formControlName=\"Code\" id=\"Code\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"8\" nzFor=\"Name\" nzLabelAlign=\"left\" nzNoColon=\"true\"> Lo\u1EA1i </nz-form-label>\r\n <nz-form-control [nzSpan]=\"16\">\r\n <nz-select formControlName=\"Type\" nzAllowClear>\r\n <nz-option nzValue=\"daily\" nzLabel=\"Daily\"></nz-option>\r\n <nz-option nzValue=\"monthly\" nzLabel=\"Monthly\"></nz-option>\r\n <nz-option nzValue=\"yearly\" nzLabel=\"Yearly\"></nz-option>\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"8\" nzFor=\"Prefix\" nzLabelAlign=\"left\" nzNoColon=\"true\"> Prefix </nz-form-label>\r\n <nz-form-control [nzSpan]=\"16\">\r\n <input nz-input formControlName=\"Prefix\" id=\"Prefix\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"8\" nzFor=\"Suffix\" nzLabelAlign=\"left\" nzNoColon=\"true\"> Suffix </nz-form-label>\r\n <nz-form-control [nzSpan]=\"16\">\r\n <input nz-input formControlName=\"Suffix\" id=\"Suffix\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <div nz-row>\r\n <div nz-col [nzSpan]=\"8\"></div>\r\n <div nz-col [nzSpan]=\"16\">\r\n <label nz-checkbox formControlName=\"IsActive\">Active</label>\r\n </div>\r\n </div>\r\n\r\n <box [height]=\"16\"></box>\r\n\r\n <nz-alert\r\n nzShowIcon\r\n nzType=\"info\"\r\n nzMessage=\"\uD83D\uDCA1 H\u01B0\u1EDBng d\u1EABn Prefix, Suffix\"\r\n [nzDescription]=\"descriptionTemplate2\"\r\n ></nz-alert>\r\n <ng-template #descriptionTemplate2>\r\n <div>{{ \"{ORG_CODE}\" }}</div>\r\n <div>{{ \"{yyyy}\" }}</div>\r\n <div>{{ \"{yy}\" }}</div>\r\n </ng-template>\r\n </div>\r\n\r\n <div nz-col [nzMd]=\"12\" [nzSm]=\"24\">\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"8\" nzFor=\"Length\" nzLabelAlign=\"left\" nzNoColon=\"true\"> Length </nz-form-label>\r\n <nz-form-control [nzSpan]=\"16\">\r\n <nz-input-number id=\"Length\" formControlName=\"Length\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"8\" nzFor=\"SeqStartAt\" nzLabelAlign=\"left\" nzNoColon=\"true\"> SeqStartAt </nz-form-label>\r\n <nz-form-control [nzSpan]=\"16\">\r\n <nz-input-number id=\"SeqStartAt\" formControlName=\"SeqStartAt\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <extend-textarea [label]=\"'M\u00F4 t\u1EA3'\" [formData]=\"formData\" [controlName]=\"'Description'\"></extend-textarea>\r\n </div>\r\n\r\n <div nz-col nzSpan=\"24\"></div>\r\n </div>\r\n</form>\r\n" }]
8481
8477
  }] });
8482
8478
 
8483
- const URLs$3 = {
8479
+ const URLs$2 = {
8484
8480
  getPaging: '/api/Cache/paging',
8485
8481
  remove: '/api/Cache/remove',
8486
8482
  removeStartWith: '/api/Cache/remove-start-with',
@@ -8490,22 +8486,22 @@ const URLs$3 = {
8490
8486
  };
8491
8487
  class CacheService extends HTTPService {
8492
8488
  getPaging(filter) {
8493
- return this.postData(AppGlobals.apiEndpoint + URLs$3.getPaging, filter);
8489
+ return this.postData(AppGlobals.apiEndpoint + URLs$2.getPaging, filter);
8494
8490
  }
8495
8491
  getValue(key) {
8496
8492
  const params = new HttpParams().append('key', key);
8497
- return this.postParams(AppGlobals.apiEndpoint + URLs$3.getValue, params);
8493
+ return this.postParams(AppGlobals.apiEndpoint + URLs$2.getValue, params);
8498
8494
  }
8499
8495
  remove(key) {
8500
8496
  const params = new HttpParams().append('key', key);
8501
- return this.postParams(AppGlobals.apiEndpoint + URLs$3.remove, params);
8497
+ return this.postParams(AppGlobals.apiEndpoint + URLs$2.remove, params);
8502
8498
  }
8503
8499
  removeStartWith(prefix) {
8504
8500
  const params = new HttpParams().append('prefix', prefix);
8505
- return this.postParams(AppGlobals.apiEndpoint + URLs$3.removeStartWith, params);
8501
+ return this.postParams(AppGlobals.apiEndpoint + URLs$2.removeStartWith, params);
8506
8502
  }
8507
8503
  clearAll() {
8508
- return this.post(AppGlobals.apiEndpoint + URLs$3.clearAll);
8504
+ return this.post(AppGlobals.apiEndpoint + URLs$2.clearAll);
8509
8505
  }
8510
8506
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: CacheService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
8511
8507
  static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: CacheService, providedIn: 'root' });
@@ -8696,7 +8692,7 @@ class CacheListComponent extends BaseComponent {
8696
8692
  this.getData();
8697
8693
  }
8698
8694
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: CacheListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
8699
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: CacheListComponent, isStandalone: true, selector: "app-cache-list", usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n <div nz-col nzSpan=\"24\">\r\n <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n <button nz-button nzType=\"primary\" nzDanger (click)=\"isModalVisible = true; prefix = ''\">\r\n <span nz-icon nzType=\"delete\"></span> Remove Start With\r\n </button>\r\n <button nz-button nzType=\"primary\" nzDanger (click)=\"clearAll()\">\r\n <span nz-icon nzType=\"delete\"></span> Clear All Cache\r\n </button>\r\n <button-search (click)=\"getData()\"></button-search>\r\n </div>\r\n </div>\r\n\r\n <div nz-col nzSpan=\"24\">\r\n <nz-table\r\n #table\r\n [nzData]=\"this.data.LstItem || []\"\r\n [nzBordered]=\"true\"\r\n [nzSize]=\"'small'\"\r\n [nzFrontPagination]=\"false\"\r\n [nzScroll]=\"{ x: 'auto' }\"\r\n >\r\n <thead>\r\n <tr>\r\n <th nzWidth=\"80px\" nzAlign=\"center\">Action</th>\r\n <th nzWidth=\"50px\">#</th>\r\n <th>Cache key</th>\r\n <th>TTL</th>\r\n <th>Size</th>\r\n </tr>\r\n <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n <th></th>\r\n <th></th>\r\n <th>\r\n <extend-input\r\n [size]=\"'small'\"\r\n [showClear]=\"true\"\r\n [(_ngModel)]=\"filter.CacheKey\"\r\n (onclickClearIcon)=\"search()\"\r\n ></extend-input>\r\n </th>\r\n <th></th>\r\n <th></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (cache of table.data; track $index; let i = $index) {\r\n <tr>\r\n <td class=\"center\">\r\n <!-- N\u00FAt xem chi ti\u1EBFt -->\r\n <a (click)=\"openDetailModal(cache.CacheKey)\" style=\"color: #1890ff; font-size: 16px; margin-right: 8px\">\r\n <span nz-icon nzType=\"eye\"></span>\r\n </a>\r\n <icon-delete nzTooltipTitle=\"X\u00F3a Prefix n\u00E0y\" (click)=\"deleteCache(cache.CacheKey)\"></icon-delete>\r\n </td>\r\n <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n <td>\r\n {{ cache.CacheKey | limitLetters: 100 }}\r\n </td>\r\n <td>{{ cache.TtlMinutes | durationFormat }}</td>\r\n <td>{{ cache.SizeBytes | formatBytes }}</td>\r\n </tr>\r\n }\r\n </tbody>\r\n </nz-table>\r\n </div>\r\n</div>\r\n\r\n<nz-drawer\r\n [nzPlacement]=\"'right'\"\r\n [nzWidth]=\"'40vw'\"\r\n [nzVisible]=\"isDrawerVisible\"\r\n [nzContent]=\"contentTemplate\"\r\n [nzFooter]=\"footerTemplate\"\r\n (nzOnClose)=\"isDrawerVisible = false\"\r\n>\r\n <ng-template #contentTemplate>\r\n <div nz-flex nzJustify=\"space-between\">\r\n Key\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n nzType=\"default\"\r\n cdkCopyToClipboard=\"{{ selectedKey }}\"\r\n (click)=\"$event.stopPropagation(); success('\u0110\u00E3 copy to clipboard')\"\r\n >\r\n <i nz-icon nzType=\"copy\" style=\"color: #888\"></i>Copy\r\n </button>\r\n </div>\r\n <box [height]=\"4\"></box>\r\n <pre\r\n style=\"\r\n background: #2b2b2b;\r\n color: #a9b7c6;\r\n padding: 12px;\r\n border-radius: 4px;\r\n overflow: auto;\r\n font-family: monospace;\r\n \"\r\n >{{ selectedKey }} </pre\r\n >\r\n\r\n <nz-divider></nz-divider>\r\n\r\n <div nz-flex nzJustify=\"space-between\">\r\n Value\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n nzType=\"default\"\r\n cdkCopyToClipboard=\"{{ selectedValue }}\"\r\n (click)=\"$event.stopPropagation(); success('\u0110\u00E3 copy to clipboard')\"\r\n >\r\n <i nz-icon nzType=\"copy\" style=\"color: #888\"></i>Copy\r\n </button>\r\n </div>\r\n <box [height]=\"4\"></box>\r\n <pre\r\n style=\"\r\n background: #2b2b2b;\r\n color: #a9b7c6;\r\n padding: 12px;\r\n border-radius: 4px;\r\n overflow: auto;\r\n font-family: monospace;\r\n \"\r\n >{{ selectedValue | json }} \r\n </pre\r\n >\r\n </ng-template>\r\n <ng-template #footerTemplate>\r\n <div nz-flex [nzGap]=\"6\" [nzJustify]=\"'end'\">\r\n <button nz-button (click)=\"isDrawerVisible = false\">Close</button>\r\n </div>\r\n </ng-template>\r\n</nz-drawer>\r\n\r\n<nz-modal\r\n [(nzVisible)]=\"isModalVisible\"\r\n nzTitle=\"Remove cache by prefix\"\r\n [nzWidth]=\"500\"\r\n (nzOnCancel)=\"isModalVisible = false\"\r\n (nzOnOk)=\"removeStartWith(this.prefix)\"\r\n nzOkText=\"Delete Cache\"\r\n nzOkDanger\r\n nzCancelText=\"Cancel\"\r\n>\r\n <ng-container *nzModalContent>\r\n <extend-input [label]=\"'Prefix'\" [(_ngModel)]=\"prefix\"></extend-input>\r\n </ng-container>\r\n</nz-modal>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$2.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i4$1.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "component", type: ButtonSearch, selector: "button-search" }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i6$1.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "directive", type: i6$1.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$1.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$1.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$1.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$1.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "directive", type: i6$1.NzCellAlignDirective, selector: "th[nzAlign],td[nzAlign]", inputs: ["nzAlign"] }, { kind: "ngmodule", type: NzPaginationModule }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: ExtendInput, selector: "extend-input", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "inputClass", "labelSpan", "labelFlex", "inputFlex", "showClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "autofocus", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "displayField", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "onclickClearIcon", "onenter"] }, { kind: "ngmodule", type: NzModalModule }, { kind: "component", type: i15.NzModalComponent, selector: "nz-modal", inputs: ["nzMask", "nzMaskClosable", "nzCloseOnNavigation", "nzVisible", "nzClosable", "nzOkLoading", "nzOkDisabled", "nzCancelDisabled", "nzCancelLoading", "nzKeyboard", "nzNoAnimation", "nzCentered", "nzDraggable", "nzContent", "nzFooter", "nzZIndex", "nzWidth", "nzWrapClassName", "nzClassName", "nzStyle", "nzTitle", "nzCloseIcon", "nzMaskStyle", "nzBodyStyle", "nzOkText", "nzCancelText", "nzOkType", "nzOkDanger", "nzIconType", "nzModalType", "nzAutofocus", "nzOnOk", "nzOnCancel"], outputs: ["nzOnOk", "nzOnCancel", "nzAfterOpen", "nzAfterClose", "nzVisibleChange"], exportAs: ["nzModal"] }, { kind: "directive", type: i15.NzModalContentDirective, selector: "[nzModalContent]", exportAs: ["nzModalContent"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzDrawerModule }, { kind: "component", type: i4$3.NzDrawerComponent, selector: "nz-drawer", inputs: ["nzContent", "nzCloseIcon", "nzClosable", "nzMaskClosable", "nzMask", "nzCloseOnNavigation", "nzNoAnimation", "nzKeyboard", "nzTitle", "nzExtra", "nzFooter", "nzPlacement", "nzSize", "nzMaskStyle", "nzBodyStyle", "nzWrapClassName", "nzWidth", "nzHeight", "nzZIndex", "nzOffsetX", "nzOffsetY", "nzVisible"], outputs: ["nzOnViewInit", "nzOnClose", "nzVisibleChange"], exportAs: ["nzDrawer"] }, { kind: "ngmodule", type: ClipboardModule }, { kind: "directive", type: i12$1.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "pipe", type: DurationFormatPipe, name: "durationFormat" }, { kind: "pipe", type: LimitLettersPipe, name: "limitLetters" }, { kind: "pipe", type: FormatBytesPipe, name: "formatBytes" }, { kind: "component", type: NzDividerComponent, selector: "nz-divider", inputs: ["nzText", "nzType", "nzOrientation", "nzVariant", "nzDashed", "nzPlain"], exportAs: ["nzDivider"] }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }] });
8695
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: CacheListComponent, isStandalone: true, selector: "app-cache-list", usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n <div nz-col nzSpan=\"24\">\r\n <div nz-flex nzGap=\"small\" nzJustify=\"end\">\r\n <button nz-button nzType=\"primary\" nzDanger (click)=\"isModalVisible = true; prefix = ''\">\r\n <span nz-icon nzType=\"delete\"></span> Remove Start With\r\n </button>\r\n <button nz-button nzType=\"primary\" nzDanger (click)=\"clearAll()\">\r\n <span nz-icon nzType=\"delete\"></span> Clear All Cache\r\n </button>\r\n <button-search (click)=\"getData()\"></button-search>\r\n </div>\r\n </div>\r\n\r\n <div nz-col nzSpan=\"24\">\r\n <nz-table\r\n #table\r\n [nzData]=\"this.data.LstItem || []\"\r\n [nzBordered]=\"true\"\r\n [nzSize]=\"'small'\"\r\n [nzFrontPagination]=\"false\"\r\n [nzScroll]=\"{ x: 'auto' }\"\r\n >\r\n <thead>\r\n <tr>\r\n <th nzWidth=\"80px\" nzAlign=\"center\">Action</th>\r\n <th nzWidth=\"50px\">#</th>\r\n <th>Cache key</th>\r\n <th>TTL</th>\r\n <th>Size</th>\r\n </tr>\r\n <tr class=\"tr-search\" (keyup.enter)=\"search()\">\r\n <th></th>\r\n <th></th>\r\n <th>\r\n <extend-input\r\n [size]=\"'small'\"\r\n [showClear]=\"true\"\r\n [(_ngModel)]=\"filter.CacheKey\"\r\n (onclickClearIcon)=\"search()\"\r\n ></extend-input>\r\n </th>\r\n <th></th>\r\n <th></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (cache of table.data; track $index; let i = $index) {\r\n <tr>\r\n <td class=\"center\">\r\n <!-- N\u00FAt xem chi ti\u1EBFt -->\r\n <a (click)=\"openDetailModal(cache.CacheKey)\" style=\"color: #1890ff; font-size: 16px; margin-right: 8px\">\r\n <span nz-icon nzType=\"eye\"></span>\r\n </a>\r\n <icon-delete nzTooltipTitle=\"X\u00F3a Prefix n\u00E0y\" (click)=\"deleteCache(cache.CacheKey)\"></icon-delete>\r\n </td>\r\n <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n <td>\r\n {{ cache.CacheKey | limitLetters: 100 }}\r\n </td>\r\n <td>{{ cache.TtlMinutes | durationFormat }}</td>\r\n <td>{{ cache.SizeBytes | formatBytes }}</td>\r\n </tr>\r\n }\r\n </tbody>\r\n </nz-table>\r\n </div>\r\n</div>\r\n\r\n<nz-drawer\r\n [nzPlacement]=\"'right'\"\r\n [nzWidth]=\"'40vw'\"\r\n [nzVisible]=\"isDrawerVisible\"\r\n [nzContent]=\"contentTemplate\"\r\n [nzFooter]=\"footerTemplate\"\r\n (nzOnClose)=\"isDrawerVisible = false\"\r\n>\r\n <ng-template #contentTemplate>\r\n <div nz-flex nzJustify=\"space-between\">\r\n Key\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n nzType=\"default\"\r\n cdkCopyToClipboard=\"{{ selectedKey }}\"\r\n (click)=\"$event.stopPropagation(); success('\u0110\u00E3 copy to clipboard')\"\r\n >\r\n <i nz-icon nzType=\"copy\" style=\"color: #888\"></i>Copy\r\n </button>\r\n </div>\r\n <box [height]=\"4\"></box>\r\n <pre\r\n style=\"\r\n background: #2b2b2b;\r\n color: #a9b7c6;\r\n padding: 12px;\r\n border-radius: 4px;\r\n overflow: auto;\r\n font-family: monospace;\r\n \"\r\n >{{ selectedKey }} </pre\r\n >\r\n\r\n <nz-divider></nz-divider>\r\n\r\n <div nz-flex nzJustify=\"space-between\">\r\n Value\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n nzType=\"default\"\r\n cdkCopyToClipboard=\"{{ selectedValue }}\"\r\n (click)=\"$event.stopPropagation(); success('\u0110\u00E3 copy to clipboard')\"\r\n >\r\n <i nz-icon nzType=\"copy\" style=\"color: #888\"></i>Copy\r\n </button>\r\n </div>\r\n <box [height]=\"4\"></box>\r\n <pre\r\n style=\"\r\n background: #2b2b2b;\r\n color: #a9b7c6;\r\n padding: 12px;\r\n border-radius: 4px;\r\n overflow: auto;\r\n font-family: monospace;\r\n \"\r\n >{{ selectedValue | json }} \r\n </pre\r\n >\r\n </ng-template>\r\n <ng-template #footerTemplate>\r\n <div nz-flex [nzGap]=\"6\" [nzJustify]=\"'end'\">\r\n <button nz-button (click)=\"isDrawerVisible = false\">Close</button>\r\n </div>\r\n </ng-template>\r\n</nz-drawer>\r\n\r\n<nz-modal\r\n [(nzVisible)]=\"isModalVisible\"\r\n nzTitle=\"Remove cache by prefix\"\r\n [nzWidth]=\"500\"\r\n (nzOnCancel)=\"isModalVisible = false\"\r\n (nzOnOk)=\"removeStartWith(this.prefix)\"\r\n nzOkText=\"Delete Cache\"\r\n nzOkDanger\r\n nzCancelText=\"Cancel\"\r\n>\r\n <ng-container *nzModalContent>\r\n <extend-input [label]=\"'Prefix'\" [(_ngModel)]=\"prefix\"></extend-input>\r\n </ng-container>\r\n</nz-modal>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$2.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i4$1.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "component", type: ButtonSearch, selector: "button-search" }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i6$1.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "directive", type: i6$1.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$1.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$1.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$1.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$1.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "directive", type: i6$1.NzCellAlignDirective, selector: "th[nzAlign],td[nzAlign]", inputs: ["nzAlign"] }, { kind: "ngmodule", type: NzPaginationModule }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: ExtendInput, selector: "extend-input", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "inputClass", "labelSpan", "labelFlex", "inputFlex", "showClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "autofocus", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "displayField", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "onclickClearIcon", "onenter"] }, { kind: "ngmodule", type: NzModalModule }, { kind: "component", type: i15.NzModalComponent, selector: "nz-modal", inputs: ["nzMask", "nzMaskClosable", "nzCloseOnNavigation", "nzVisible", "nzClosable", "nzOkLoading", "nzOkDisabled", "nzCancelDisabled", "nzCancelLoading", "nzKeyboard", "nzNoAnimation", "nzCentered", "nzDraggable", "nzContent", "nzFooter", "nzZIndex", "nzWidth", "nzWrapClassName", "nzClassName", "nzStyle", "nzTitle", "nzCloseIcon", "nzMaskStyle", "nzBodyStyle", "nzOkText", "nzCancelText", "nzOkType", "nzOkDanger", "nzIconType", "nzModalType", "nzAutofocus", "nzOnOk", "nzOnCancel"], outputs: ["nzOnOk", "nzOnCancel", "nzAfterOpen", "nzAfterClose", "nzVisibleChange"], exportAs: ["nzModal"] }, { kind: "directive", type: i15.NzModalContentDirective, selector: "[nzModalContent]", exportAs: ["nzModalContent"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzDrawerModule }, { kind: "component", type: i4$3.NzDrawerComponent, selector: "nz-drawer", inputs: ["nzContent", "nzCloseIcon", "nzClosable", "nzMaskClosable", "nzMask", "nzCloseOnNavigation", "nzNoAnimation", "nzKeyboard", "nzTitle", "nzExtra", "nzFooter", "nzPlacement", "nzSize", "nzMaskStyle", "nzBodyStyle", "nzWrapClassName", "nzWidth", "nzHeight", "nzZIndex", "nzOffsetX", "nzOffsetY", "nzVisible"], outputs: ["nzOnViewInit", "nzOnClose", "nzVisibleChange"], exportAs: ["nzDrawer"] }, { kind: "ngmodule", type: ClipboardModule }, { kind: "directive", type: i12.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "pipe", type: DurationFormatPipe, name: "durationFormat" }, { kind: "pipe", type: LimitLettersPipe, name: "limitLetters" }, { kind: "pipe", type: FormatBytesPipe, name: "formatBytes" }, { kind: "component", type: NzDividerComponent, selector: "nz-divider", inputs: ["nzText", "nzType", "nzOrientation", "nzVariant", "nzDashed", "nzPlain"], exportAs: ["nzDivider"] }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }] });
8700
8696
  }
8701
8697
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: CacheListComponent, decorators: [{
8702
8698
  type: Component,
@@ -8948,821 +8944,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
8948
8944
  args: [{ imports: [CommonModule, NzTabsModule, NzTableModule, NzDividerModule, NzGridModule, ExtendInput], template: "<nz-tabset [nzSize]=\"'small'\" [nzType]=\"'card'\">\r\n <nz-tab [nzTitle]=\"'app.config'\">\r\n <nz-table #table [nzData]=\"lstConfig || []\" [nzBordered]=\"true\" [nzSize]=\"'small'\" [nzFrontPagination]=\"false\">\r\n <thead>\r\n <tr>\r\n <th>Key</th>\r\n <th>Value</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (row of table.data; track $index; let i = $index) {\r\n <tr>\r\n <td>{{ row.Key }}</td>\r\n <td>{{ row.Value }}</td>\r\n </tr>\r\n }\r\n </tbody>\r\n </nz-table>\r\n </nz-tab>\r\n <nz-tab [nzTitle]=\"'DB Info'\">\r\n @for (connection of dbInfo; track $index) {\r\n <extend-input [label]=\"'Name'\" [labelSpan]=\"4\" [disabled]=\"true\" [_ngModel]=\"connection.Name\"></extend-input>\r\n <extend-input\r\n [label]=\"'ProviderName'\"\r\n [labelSpan]=\"4\"\r\n [disabled]=\"true\"\r\n [_ngModel]=\"connection.ProviderName\"\r\n ></extend-input>\r\n <extend-input\r\n [label]=\"'ConnectionString'\"\r\n [labelSpan]=\"4\"\r\n [disabled]=\"true\"\r\n [_ngModel]=\"connection.ConnectionString\"\r\n ></extend-input>\r\n\r\n <nz-divider></nz-divider>\r\n }\r\n </nz-tab>\r\n</nz-tabset>\r\n" }]
8949
8945
  }] });
8950
8946
 
8951
- const URLs$2 = {
8952
- getById: AppGlobals.apiEndpoint + '/api/MI/App_MailTemplate/GetById',
8953
- getAll: AppGlobals.apiEndpoint + '/api/MI/App_MailTemplate/GetAll',
8954
- getList: AppGlobals.apiEndpoint + '/api/MI/App_MailTemplate/GetList',
8955
- getPaging: AppGlobals.apiEndpoint + '/api/MI/App_MailTemplate/GetPaging',
8956
- addOrEdit: AppGlobals.apiEndpoint + '/api/MI/App_MailTemplate/AddOrEdit',
8957
- delete: AppGlobals.apiEndpoint + '/api/MI/App_MailTemplate/Delete',
8958
- sendTestEmail: AppGlobals.apiEndpoint + '/api/MI/App_MailTemplate/SendTestEmail',
8959
- };
8960
- class App_MailTemplateService extends HTTPService {
8961
- cmservice = inject(CommonService);
8962
- getById(id) {
8963
- const params = new HttpParams().append('id', id);
8964
- return this.postParams(URLs$2.getById, params);
8965
- }
8966
- getAll() {
8967
- return this.cmservice.ESP({
8968
- SPN: 'App_MailTemplate_getAll',
8969
- });
8970
- }
8971
- getList(filter) {
8972
- return this.postData(URLs$2.getList, filter);
8973
- }
8974
- getPaging(filter) {
8975
- return this.cmservice.ESP({
8976
- SPN: 'App_MailTemplate_getPaging',
8977
- Params: [filter],
8978
- });
8979
- }
8980
- addOrEdit(obj) {
8981
- return this.postData(URLs$2.addOrEdit, obj);
8982
- }
8983
- delete(id) {
8984
- const params = new HttpParams().append('id', id);
8985
- return this.postParams(URLs$2.delete, params);
8986
- }
8987
- getSettingsByTemplateId(templateId) {
8988
- return this.cmservice.ESP({
8989
- SPN: 'App_MailSendSetting_getByTemplateId',
8990
- Params: [templateId],
8991
- });
8992
- }
8993
- sendTestEmail(payload) {
8994
- return this.postData(URLs$2.sendTestEmail, payload);
8995
- }
8996
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: App_MailTemplateService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
8997
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: App_MailTemplateService, providedIn: 'root' });
8998
- }
8999
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: App_MailTemplateService, decorators: [{
9000
- type: Injectable,
9001
- args: [{ providedIn: 'root' }]
9002
- }] });
9003
-
9004
- class MailSendSettingService extends HTTPService {
9005
- commonService = inject(CommonService);
9006
- getById(id) {
9007
- return this.commonService.ESP({
9008
- SPN: 'App_MailSendSetting_getById',
9009
- Params: [id],
9010
- });
9011
- }
9012
- getAll() {
9013
- return this.commonService.ESP({
9014
- SPN: 'App_MailSendSetting_getAll',
9015
- });
9016
- }
9017
- getPaging(filter) {
9018
- return this.commonService.ESP({
9019
- SPN: 'App_MailSendSetting_getPaging',
9020
- Params: [filter],
9021
- });
9022
- }
9023
- addOrEdit(obj) {
9024
- return this.commonService.ESP({
9025
- SPN: 'App_MailSendSetting_addOrEdit',
9026
- Params: [obj],
9027
- });
9028
- }
9029
- delete(id) {
9030
- return this.commonService.ESP({
9031
- SPN: 'App_MailSendSetting_deleteById',
9032
- Params: [id],
9033
- });
9034
- }
9035
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: MailSendSettingService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
9036
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: MailSendSettingService, providedIn: 'root' });
9037
- }
9038
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: MailSendSettingService, decorators: [{
9039
- type: Injectable,
9040
- args: [{
9041
- providedIn: 'root',
9042
- }]
9043
- }] });
9044
-
9045
- class App_MailTemplate {
9046
- // #region properties
9047
- App_MailTemplate_Id;
9048
- App_Org_Id;
9049
- IsActive;
9050
- CreatedDate;
9051
- CreatedUser;
9052
- UpdatedDate;
9053
- UpdatedUser;
9054
- Code;
9055
- Name;
9056
- Subject;
9057
- MailFrom;
9058
- MailTo;
9059
- MailCC;
9060
- MailBCC;
9061
- MailContent;
9062
- SPN_Data;
9063
- }
9064
- class App_MailTemplateFilter extends GridFilter {
9065
- App_MailTemplate_Id;
9066
- Code;
9067
- Name;
9068
- }
9069
-
9070
- class App_MailSendSetting {
9071
- // #region properties
9072
- App_MailSendSetting_Id;
9073
- App_Org_Id;
9074
- IsActive;
9075
- CreatedDate;
9076
- CreatedUser;
9077
- UpdatedDate;
9078
- UpdatedUser;
9079
- Code;
9080
- Name;
9081
- SendTime;
9082
- CronTime;
9083
- App_MailTemplate_Id;
9084
- // #endregion properties
9085
- // Extended properties
9086
- MailTemplateName;
9087
- MailTemplateCode;
9088
- }
9089
- class App_MailSendSettingFilter extends GridFilter {
9090
- Code;
9091
- Name;
9092
- App_MailTemplate_Id;
9093
- }
9094
-
9095
- class MailTemplateListComponent extends BaseComponent {
9096
- templateService = inject(App_MailTemplateService);
9097
- settingService = inject(MailSendSettingService);
9098
- sanitizer = inject(DomSanitizer);
9099
- // Tab Management
9100
- selectedTabIndex = 0;
9101
- // Mail Template Data
9102
- templateData;
9103
- templateFilter = new App_MailTemplateFilter();
9104
- isDropdownTemplateCodeVisible = false;
9105
- isDropdownTemplateNameVisible = false;
9106
- ignoreTemplateQueryParams = true;
9107
- // Preview Modal
9108
- isPreviewModalVisible = false;
9109
- previewTemplate = null;
9110
- previewHtmlContent = null;
9111
- testEmail = '';
9112
- isSendingTestEmail = false;
9113
- // Mail Send Setting Data
9114
- settingData;
9115
- settingFilter = new App_MailSendSettingFilter();
9116
- isDropdownSettingCodeVisible = false;
9117
- isDropdownSettingNameVisible = false;
9118
- ignoreSettingQueryParams = true;
9119
- ngOnInit() {
9120
- // Load filters from storage
9121
- this.templateFilter = this.AppGlobals.getFilter(App_MailTemplateFilter.name) || new App_MailTemplateFilter();
9122
- this.settingFilter = this.AppGlobals.getFilter(App_MailSendSettingFilter.name) || new App_MailSendSettingFilter();
9123
- const tab = this.getUrlQueryParam('tab');
9124
- if (tab === '1') {
9125
- this.selectedTabIndex = 1;
9126
- }
9127
- else {
9128
- this.selectedTabIndex = 0;
9129
- }
9130
- // Load data for current tab
9131
- this.getTemplateData();
9132
- this.getSettingData();
9133
- setTimeout(() => {
9134
- Breadcrumb.lstBreadcrumb = [
9135
- {
9136
- Name: 'Mail Management',
9137
- Click: () => this.refreshCurrentTab(),
9138
- },
9139
- {
9140
- Name: 'Danh sách',
9141
- Click: () => this.refreshCurrentTab(),
9142
- },
9143
- ];
9144
- }, 0);
9145
- }
9146
- ngOnDestroy() {
9147
- this.AppGlobals.setFilter(App_MailTemplateFilter.name, this.templateFilter);
9148
- this.AppGlobals.setFilter(App_MailSendSettingFilter.name, this.settingFilter);
9149
- Breadcrumb.lstBreadcrumb = [];
9150
- }
9151
- onTabChange(index) {
9152
- this.selectedTabIndex = index;
9153
- this.refreshCurrentTab();
9154
- this.router.navigate([], {
9155
- relativeTo: this.route,
9156
- queryParams: { tab: index },
9157
- queryParamsHandling: 'merge',
9158
- });
9159
- }
9160
- refreshCurrentTab() {
9161
- if (this.selectedTabIndex === 0) {
9162
- this.getTemplateData();
9163
- }
9164
- else {
9165
- this.getSettingData();
9166
- }
9167
- }
9168
- // ==================== MAIL TEMPLATE TAB ====================
9169
- searchTemplate() {
9170
- this.templateFilter.PageIndex = 0;
9171
- this.getTemplateData();
9172
- }
9173
- getTemplateData() {
9174
- this.templateService
9175
- .getPaging(this.templateFilter)
9176
- .then((res) => {
9177
- this.templateData = res.Data;
9178
- }, (err) => this.handleError(err))
9179
- .finally(() => {
9180
- setTimeout(() => {
9181
- this.ignoreTemplateQueryParams = false;
9182
- }, 500);
9183
- });
9184
- }
9185
- editTemplate(item) {
9186
- if (item) {
9187
- this.router.navigate([`/admin/mail-template/template/${item.App_MailTemplate_Id}`], {
9188
- queryParams: { tab: 0 },
9189
- });
9190
- }
9191
- else {
9192
- this.router.navigate([`/admin/mail-template/template/new`], {
9193
- queryParams: { tab: 0 },
9194
- });
9195
- }
9196
- }
9197
- async deleteTemplate(item) {
9198
- if (item.App_MailTemplate_Id) {
9199
- try {
9200
- await this.templateService.delete(item.App_MailTemplate_Id);
9201
- this.notiService.success(this.translate.instant(this.TranslateKey.DELETE_SUCCESS));
9202
- this.getTemplateData();
9203
- }
9204
- catch (err) {
9205
- this.handleError(err);
9206
- }
9207
- }
9208
- }
9209
- onTemplateQueryParamsChange(params) {
9210
- if (this.ignoreTemplateQueryParams)
9211
- return;
9212
- const { pageSize, pageIndex } = params;
9213
- this.templateFilter.PageIndex = pageIndex - 1;
9214
- this.templateFilter.PageSize = pageSize;
9215
- this.getTemplateData();
9216
- }
9217
- // ==================== MAIL SEND SETTING TAB ====================
9218
- searchSetting() {
9219
- this.settingFilter.PageIndex = 0;
9220
- this.getSettingData();
9221
- }
9222
- getSettingData() {
9223
- this.settingService
9224
- .getPaging(this.settingFilter)
9225
- .then((res) => {
9226
- this.settingData = res.Data;
9227
- }, (err) => this.handleError(err))
9228
- .finally(() => {
9229
- setTimeout(() => {
9230
- this.ignoreSettingQueryParams = false;
9231
- }, 500);
9232
- });
9233
- }
9234
- editSetting(item) {
9235
- if (item) {
9236
- this.router.navigate([`/admin/mail-template/setting/${item.App_MailSendSetting_Id}`], {
9237
- queryParams: { tab: 1 },
9238
- });
9239
- }
9240
- else {
9241
- this.router.navigate([`/admin/mail-template/setting/new`], {
9242
- queryParams: { tab: 1 },
9243
- });
9244
- }
9245
- }
9246
- async deleteSetting(item) {
9247
- if (item.App_MailSendSetting_Id) {
9248
- try {
9249
- await this.settingService.delete(item.App_MailSendSetting_Id);
9250
- this.notiService.success(this.translate.instant(this.TranslateKey.DELETE_SUCCESS));
9251
- this.getSettingData();
9252
- }
9253
- catch (err) {
9254
- this.handleError(err);
9255
- }
9256
- }
9257
- }
9258
- onSettingQueryParamsChange(params) {
9259
- if (this.ignoreSettingQueryParams)
9260
- return;
9261
- const { pageSize, pageIndex } = params;
9262
- this.settingFilter.PageIndex = pageIndex - 1;
9263
- this.settingFilter.PageSize = pageSize;
9264
- this.getSettingData();
9265
- }
9266
- // ==================== PREVIEW EMAIL ====================
9267
- previewTemplateEmail(item) {
9268
- this.previewTemplate = item;
9269
- // Replace placeholders với sample data
9270
- const htmlContent = item.MailContent || '';
9271
- this.previewHtmlContent = this.sanitizer.sanitize(1, htmlContent)
9272
- ? this.sanitizer.bypassSecurityTrustHtml(htmlContent)
9273
- : null;
9274
- this.isPreviewModalVisible = true;
9275
- }
9276
- closePreviewModal() {
9277
- this.isPreviewModalVisible = false;
9278
- this.previewTemplate = null;
9279
- this.previewHtmlContent = null;
9280
- this.testEmail = '';
9281
- }
9282
- editFromPreview() {
9283
- if (this.previewTemplate) {
9284
- this.editTemplate(this.previewTemplate);
9285
- this.closePreviewModal();
9286
- }
9287
- }
9288
- validateEmail(email) {
9289
- const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
9290
- return emailRegex.test(email);
9291
- }
9292
- async sendTestEmail() {
9293
- if (!this.testEmail || !this.testEmail.trim()) {
9294
- this.notiService.warning('Vui lòng nhập email nhận test');
9295
- return;
9296
- }
9297
- if (!this.validateEmail(this.testEmail)) {
9298
- this.notiService.warning('Email không đúng định dạng');
9299
- return;
9300
- }
9301
- if (!this.previewTemplate) {
9302
- this.notiService.error('Không tìm thấy thông tin template');
9303
- return;
9304
- }
9305
- this.isSendingTestEmail = true;
9306
- try {
9307
- // Prepare data
9308
- const payload = {
9309
- MailFrom: this.previewTemplate.MailFrom,
9310
- TestEmail: this.testEmail.trim(),
9311
- MailContent: this.previewTemplate.MailContent,
9312
- TemplateName: this.previewTemplate.Name,
9313
- Subject: 'Test Email - ' + this.previewTemplate.Name,
9314
- };
9315
- const res = await this.templateService.sendTestEmail(payload);
9316
- if (res.IsSuccess) {
9317
- this.notiService.success('Gửi email test thành công đến ' + this.testEmail);
9318
- }
9319
- else {
9320
- this.notiService.error(res.ErrorMessage);
9321
- }
9322
- }
9323
- catch (err) {
9324
- this.handleError(err);
9325
- }
9326
- finally {
9327
- this.isSendingTestEmail = false;
9328
- }
9329
- }
9330
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: MailTemplateListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
9331
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: MailTemplateListComponent, isStandalone: true, selector: "app-mail-template-list", usesInheritance: true, ngImport: i0, template: "<nz-tabset [(nzSelectedIndex)]=\"selectedTabIndex\" (nzSelectedIndexChange)=\"onTabChange($event)\" nzType=\"card\">\r\n <!-- TAB 1: MAIL TEMPLATE -->\r\n <nz-tab nzTitle=\"Mail Templates\">\r\n <div nz-row [nzGutter]=\"[0, 8]\">\r\n <div nz-col nzSpan=\"24\">\r\n <div nz-row [nzGutter]=\"[8, 0]\">\r\n <div nz-col>\r\n <button nz-button nzType=\"primary\" (click)=\"editTemplate(null)\">{{ TranslateKey.ADD | translate }}</button>\r\n </div>\r\n <div nz-col>\r\n <!-- <button nz-button nzType=\"primary\" (click)=\"getTemplateData()\">{{ TranslateKey.SEARCH | translate }}</button> -->\r\n </div>\r\n </div>\r\n </div>\r\n <div nz-col nzSpan=\"24\">\r\n <nz-table\r\n #templateTable\r\n [nzData]=\"this.templateData?.LstItem || []\"\r\n [nzBordered]=\"true\"\r\n [nzSize]=\"'small'\"\r\n [nzShowSizeChanger]=\"true\"\r\n [nzFrontPagination]=\"false\"\r\n [nzPageIndex]=\"templateFilter.PageIndex + 1\"\r\n [nzPageSize]=\"templateFilter.PageSize\"\r\n [nzTotal]=\"this.templateData?.TotalCount || 0\"\r\n [nzShowTotal]=\"showTotalTpl\"\r\n [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n (nzQueryParams)=\"onTemplateQueryParamsChange($event)\"\r\n >\r\n <ng-template #showTotalTpl let-total let-range=\"range\">\r\n {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n </ng-template>\r\n <thead>\r\n <tr>\r\n @for (item of this.templateData?.LstHeader; track $index) {\r\n @if (item.Code == \"Code\") {\r\n <th [nzWidth]=\"item.Width\" nzCustomFilter>\r\n {{ item.Name }}\r\n <nz-filter-trigger\r\n [nzActive]=\"templateFilter.Code ? true : false\"\r\n [nzDropdownMenu]=\"searchTemplateCodeMenu\"\r\n (nzVisibleChange)=\"isDropdownTemplateCodeVisible = $event\"\r\n >\r\n <nz-icon nzType=\"search\" />\r\n </nz-filter-trigger>\r\n </th>\r\n } @else if (item.Code == \"Name\") {\r\n <th [nzWidth]=\"item.Width\" nzCustomFilter>\r\n {{ item.Name }}\r\n <nz-filter-trigger\r\n [nzActive]=\"templateFilter.Name ? true : false\"\r\n [nzDropdownMenu]=\"searchTemplateNameMenu\"\r\n (nzVisibleChange)=\"isDropdownTemplateNameVisible = $event\"\r\n >\r\n <nz-icon nzType=\"search\" />\r\n </nz-filter-trigger>\r\n </th>\r\n } @else {\r\n <th [nzWidth]=\"item.Width\">{{ item.Name }}</th>\r\n }\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (row of templateTable.data; track $index; let i = $index) {\r\n <tr>\r\n @for (col of this.templateData?.LstHeader; track $index) {\r\n <td [class]=\"col.Class\">\r\n @if (col.Code == \"NO\") {\r\n {{ i + 1 + templateFilter.PageIndex * templateFilter.PageSize }}\r\n } @else if (col.Code == \"ACTION\") {\r\n <i\r\n nz-icon\r\n nzType=\"eye\"\r\n nzTheme=\"outline\"\r\n class=\"color-primary cursor-pointer icon-size-16\"\r\n (click)=\"previewTemplateEmail(row)\"\r\n title=\"Xem tr\u01B0\u1EDBc\"\r\n ></i>\r\n &nbsp;\r\n <i\r\n nz-icon\r\n nzType=\"edit\"\r\n nzTheme=\"outline\"\r\n class=\"color-primary cursor-pointer icon-size-16\"\r\n (click)=\"editTemplate(row)\"\r\n ></i>\r\n &nbsp;\r\n <i\r\n nz-icon\r\n nzType=\"delete\"\r\n nzTheme=\"outline\"\r\n class=\"color-warn cursor-pointer icon-size-16\"\r\n nz-popconfirm\r\n [nzPopconfirmTitle]=\"TranslateKey.CONFIRM_DELETE | translate\"\r\n nzPopconfirmPlacement=\"top\"\r\n (nzOnConfirm)=\"deleteTemplate(row)\"\r\n nzOkDanger\r\n ></i>\r\n } @else {\r\n @if (col.Type == \"CHECKBOX\") {\r\n @if (row[col.Code]) {\r\n <nz-icon nzType=\"check-circle\" nzTheme=\"outline\" class=\"color-primary\" />\r\n } @else {\r\n <nz-icon nzType=\"close\" nzTheme=\"outline\" class=\"color-warn\" />\r\n }\r\n } @else {\r\n {{ row[col.Code] }}\r\n }\r\n }\r\n </td>\r\n }\r\n </tr>\r\n }\r\n </tbody>\r\n </nz-table>\r\n </div>\r\n </div>\r\n\r\n <!-- Search Dropdowns for Template -->\r\n <nz-dropdown-menu #searchTemplateCodeMenu=\"nzDropdownMenu\">\r\n <div class=\"ant-table-filter-dropdown\">\r\n <div class=\"search-box\">\r\n <input\r\n type=\"text\"\r\n nz-input\r\n [(ngModel)]=\"templateFilter.Code\"\r\n [appAutoFocus]=\"isDropdownTemplateCodeVisible\"\r\n (keyup.enter)=\"searchTemplate()\"\r\n />\r\n <button nz-button nzSize=\"small\" nzType=\"primary\" (click)=\"searchTemplate()\" class=\"search-button\">\r\n {{ \"SEARCH\" | translate }}\r\n </button>\r\n <button nz-button nzSize=\"small\" (click)=\"templateFilter.Code = ''; searchTemplate()\">\r\n {{ \"RESET\" | translate }}\r\n </button>\r\n </div>\r\n </div>\r\n </nz-dropdown-menu>\r\n <nz-dropdown-menu #searchTemplateNameMenu=\"nzDropdownMenu\">\r\n <div class=\"ant-table-filter-dropdown\">\r\n <div class=\"search-box\">\r\n <input\r\n type=\"text\"\r\n nz-input\r\n [(ngModel)]=\"templateFilter.Name\"\r\n [appAutoFocus]=\"isDropdownTemplateNameVisible\"\r\n (keyup.enter)=\"searchTemplate()\"\r\n />\r\n <button nz-button nzSize=\"small\" nzType=\"primary\" (click)=\"searchTemplate()\" class=\"search-button\">\r\n {{ \"SEARCH\" | translate }}\r\n </button>\r\n <button nz-button nzSize=\"small\" (click)=\"templateFilter.Name = ''; searchTemplate()\">\r\n {{ \"RESET\" | translate }}\r\n </button>\r\n </div>\r\n </div>\r\n </nz-dropdown-menu>\r\n </nz-tab>\r\n\r\n <!-- TAB 2: MAIL SEND SETTING -->\r\n <nz-tab nzTitle=\"Mail Send Settings\">\r\n <div nz-row [nzGutter]=\"[0, 8]\">\r\n <div nz-col nzSpan=\"24\">\r\n <div nz-row [nzGutter]=\"[8, 0]\">\r\n <div nz-col>\r\n <button nz-button nzType=\"primary\" (click)=\"editSetting(null)\">{{ TranslateKey.ADD | translate }}</button>\r\n </div>\r\n <div nz-col>\r\n <!-- <button nz-button nzType=\"primary\" (click)=\"getSettingData()\">{{ TranslateKey.SEARCH | translate }}</button> -->\r\n </div>\r\n </div>\r\n </div>\r\n <div nz-col nzSpan=\"24\">\r\n <nz-table\r\n #settingTable\r\n [nzData]=\"this.settingData?.LstItem || []\"\r\n [nzBordered]=\"true\"\r\n [nzSize]=\"'small'\"\r\n [nzShowSizeChanger]=\"true\"\r\n [nzFrontPagination]=\"false\"\r\n [nzPageIndex]=\"settingFilter.PageIndex + 1\"\r\n [nzPageSize]=\"settingFilter.PageSize\"\r\n [nzTotal]=\"this.settingData?.TotalCount || 0\"\r\n [nzShowTotal]=\"showTotalTpl2\"\r\n [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n [nzScroll]=\"{ y: 'calc(100vh - 290px)' }\"\r\n (nzQueryParams)=\"onSettingQueryParamsChange($event)\"\r\n >\r\n <ng-template #showTotalTpl2 let-total let-range=\"range\">\r\n {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n </ng-template>\r\n <thead>\r\n <tr>\r\n @for (item of this.settingData?.LstHeader; track $index) {\r\n @if (item.Code == \"Code\") {\r\n <th [nzWidth]=\"item.Width\" nzCustomFilter>\r\n {{ item.Name }}\r\n <nz-filter-trigger\r\n [nzActive]=\"settingFilter.Code ? true : false\"\r\n [nzDropdownMenu]=\"searchSettingCodeMenu\"\r\n (nzVisibleChange)=\"isDropdownSettingCodeVisible = $event\"\r\n >\r\n <nz-icon nzType=\"search\" />\r\n </nz-filter-trigger>\r\n </th>\r\n } @else if (item.Code == \"Name\") {\r\n <th [nzWidth]=\"item.Width\" nzCustomFilter>\r\n {{ item.Name }}\r\n <nz-filter-trigger\r\n [nzActive]=\"settingFilter.Name ? true : false\"\r\n [nzDropdownMenu]=\"searchSettingNameMenu\"\r\n (nzVisibleChange)=\"isDropdownSettingNameVisible = $event\"\r\n >\r\n <nz-icon nzType=\"search\" />\r\n </nz-filter-trigger>\r\n </th>\r\n } @else {\r\n <th [nzWidth]=\"item.Width\">{{ item.Name }}</th>\r\n }\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (row of settingTable.data; track $index; let i = $index) {\r\n <tr>\r\n @for (col of this.settingData?.LstHeader; track $index) {\r\n <td [class]=\"col.Class\">\r\n @if (col.Code == \"NO\") {\r\n {{ i + 1 + settingFilter.PageIndex * settingFilter.PageSize }}\r\n } @else if (col.Code == \"ACTION\") {\r\n <i\r\n nz-icon\r\n nzType=\"edit\"\r\n nzTheme=\"outline\"\r\n class=\"color-primary cursor-pointer icon-size-16\"\r\n (click)=\"editSetting(row)\"\r\n ></i>\r\n &nbsp;\r\n\r\n <i\r\n nz-icon\r\n nzType=\"delete\"\r\n nzTheme=\"outline\"\r\n class=\"color-warn cursor-pointer icon-size-16\"\r\n nz-popconfirm\r\n [nzPopconfirmTitle]=\"TranslateKey.CONFIRM_DELETE | translate\"\r\n nzPopconfirmPlacement=\"top\"\r\n (nzOnConfirm)=\"deleteSetting(row)\"\r\n nzOkDanger\r\n ></i>\r\n } @else {\r\n @if (col.Type == \"CHECKBOX\") {\r\n @if (row[col.Code]) {\r\n <nz-icon nzType=\"check-circle\" nzTheme=\"outline\" class=\"color-primary\" />\r\n } @else {\r\n <nz-icon nzType=\"close\" nzTheme=\"outline\" class=\"color-warn\" />\r\n }\r\n } @else {\r\n {{ row[col.Code] }}\r\n }\r\n }\r\n </td>\r\n }\r\n </tr>\r\n }\r\n </tbody>\r\n </nz-table>\r\n </div>\r\n </div>\r\n\r\n <!-- Search Dropdowns for Setting -->\r\n <nz-dropdown-menu #searchSettingCodeMenu=\"nzDropdownMenu\">\r\n <div class=\"ant-table-filter-dropdown\">\r\n <div class=\"search-box\">\r\n <input\r\n type=\"text\"\r\n nz-input\r\n [(ngModel)]=\"settingFilter.Code\"\r\n [appAutoFocus]=\"isDropdownSettingCodeVisible\"\r\n (keyup.enter)=\"searchSetting()\"\r\n />\r\n <button nz-button nzSize=\"small\" nzType=\"primary\" (click)=\"searchSetting()\" class=\"search-button\">\r\n {{ \"SEARCH\" | translate }}\r\n </button>\r\n <button nz-button nzSize=\"small\" (click)=\"settingFilter.Code = ''; searchSetting()\">\r\n {{ \"RESET\" | translate }}\r\n </button>\r\n </div>\r\n </div>\r\n </nz-dropdown-menu>\r\n <nz-dropdown-menu #searchSettingNameMenu=\"nzDropdownMenu\">\r\n <div class=\"ant-table-filter-dropdown\">\r\n <div class=\"search-box\">\r\n <input\r\n type=\"text\"\r\n nz-input\r\n [(ngModel)]=\"settingFilter.Name\"\r\n [appAutoFocus]=\"isDropdownSettingNameVisible\"\r\n (keyup.enter)=\"searchSetting()\"\r\n />\r\n <button nz-button nzSize=\"small\" nzType=\"primary\" (click)=\"searchSetting()\" class=\"search-button\">\r\n {{ \"SEARCH\" | translate }}\r\n </button>\r\n <button nz-button nzSize=\"small\" (click)=\"settingFilter.Name = ''; searchSetting()\">\r\n {{ \"RESET\" | translate }}\r\n </button>\r\n </div>\r\n </div>\r\n </nz-dropdown-menu>\r\n </nz-tab>\r\n</nz-tabset>\r\n\r\n<!-- ==================== PREVIEW EMAIL MODAL ==================== -->\r\n<nz-modal\r\n [(nzVisible)]=\"isPreviewModalVisible\"\r\n [nzTitle]=\"'Preview: ' + (previewTemplate?.Name || '')\"\r\n [nzWidth]=\"900\"\r\n (nzOnCancel)=\"closePreviewModal()\"\r\n [nzFooter]=\"previewFooter\"\r\n [nzBodyStyle]=\"{ maxHeight: '70vh', overflow: 'auto' }\"\r\n>\r\n <ng-container *nzModalContent>\r\n <!-- Alert Info -->\r\n <nz-alert nzType=\"info\" nzMessage=\"L\u01B0u \u00FD : \u0110\u00E2y l\u00E0 b\u1EA3n xem tr\u01B0\u1EDBc\" nzShowIcon style=\"margin-top: 16px\"></nz-alert>\r\n <!-- Email Headers -->\r\n <div style=\"margin-bottom: 16px; padding: 12px; background: #f5f5f5; border-radius: 4px; font-size: 13px\">\r\n <div style=\"margin-bottom: 4px\">\r\n <strong style=\"display: inline-block; width: 60px\">From:</strong>\r\n <span>{{ previewTemplate?.MailFrom }}</span>\r\n </div>\r\n <div style=\"margin-bottom: 4px\">\r\n <strong style=\"display: inline-block; width: 60px\">To:</strong>\r\n <span>{{ previewTemplate?.MailTo }}</span>\r\n </div>\r\n <div *ngIf=\"previewTemplate?.MailCC\" style=\"margin-bottom: 4px\">\r\n <strong style=\"display: inline-block; width: 60px\">CC:</strong>\r\n <span>{{ previewTemplate?.MailCC }}</span>\r\n </div>\r\n <div *ngIf=\"previewTemplate?.MailBCC\" style=\"margin-bottom: 4px\">\r\n <strong style=\"display: inline-block; width: 60px\">BCC:</strong>\r\n <span>{{ previewTemplate?.MailBCC }}</span>\r\n </div>\r\n </div>\r\n\r\n <nz-divider [nzText]=\"'Email Content'\" nzOrientation=\"left\"></nz-divider>\r\n\r\n <!-- Email Content Preview -->\r\n <div\r\n style=\"\r\n border: 1px solid #d9d9d9;\r\n padding: 24px;\r\n background: white;\r\n border-radius: 4px;\r\n font-family: Arial, sans-serif;\r\n line-height: 1.6;\r\n \"\r\n [innerHTML]=\"previewHtmlContent\"\r\n ></div>\r\n\r\n <!-- ==================== TEST EMAIL SECTION ==================== -->\r\n <nz-divider [nzText]=\"'\uD83D\uDCE8 G\u1EEDi Email Test'\" nzOrientation=\"left\" style=\"margin-top: 24px\"></nz-divider>\r\n\r\n <div style=\"padding: 16px; background: #f9f9f9; border-radius: 4px; border: 1px solid #e0e0e0\">\r\n <div nz-row [nzGutter]=\"[8, 8]\" [nzAlign]=\"'middle'\">\r\n <div nz-col [nzSpan]=\"20\">\r\n <nz-form-item style=\"margin-bottom: 0\">\r\n <nz-form-control style=\"width: 100%\">\r\n <input\r\n nz-input\r\n [(ngModel)]=\"testEmail\"\r\n placeholder=\"Nh\u1EADp email nh\u1EADn test (v\u00ED d\u1EE5: test@example.com)\"\r\n [disabled]=\"isSendingTestEmail\"\r\n (keyup.enter)=\"sendTestEmail()\"\r\n type=\"email\"\r\n />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzSpan]=\"4\">\r\n <button\r\n nz-button\r\n nzType=\"primary\"\r\n nzBlock\r\n (click)=\"sendTestEmail()\"\r\n [nzLoading]=\"isSendingTestEmail\"\r\n [disabled]=\"!testEmail || isSendingTestEmail\"\r\n >\r\n <span nz-icon nzType=\"send\"></span>\r\n G\u1EEDi\r\n </button>\r\n </div>\r\n </div>\r\n <div style=\"margin-top: 8px; font-size: 12px; color: #666\">\r\n <span nz-icon nzType=\"info-circle\" style=\"margin-right: 4px\"></span>\r\n Email s\u1EBD \u0111\u01B0\u1EE3c g\u1EEDi v\u1EDBi n\u1ED9i dung hi\u1EC7n t\u1EA1i (placeholder gi\u1EEF nguy\u00EAn)\r\n </div>\r\n </div>\r\n <!-- ==================== K\u1EBET TH\u00DAC TEST EMAIL SECTION ==================== -->\r\n </ng-container>\r\n\r\n <!-- Modal Footer -->\r\n <ng-template #previewFooter>\r\n <button nz-button nzType=\"default\" (click)=\"closePreviewModal()\">\u0110\u00F3ng</button>\r\n </ng-template>\r\n</nz-modal>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i6$1.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "component", type: i6$1.NzThAddOnComponent, selector: "th[nzColumnKey], th[nzSortFn], th[nzSortOrder], th[nzFilters], th[nzShowSort], th[nzShowFilter], th[nzCustomFilter]", inputs: ["nzColumnKey", "nzFilterMultiple", "nzSortOrder", "nzSortPriority", "nzSortDirections", "nzFilters", "nzSortFn", "nzFilterFn", "nzShowSort", "nzShowFilter", "nzCustomFilter"], outputs: ["nzCheckedChange", "nzSortOrderChange", "nzFilterChange"] }, { kind: "directive", type: i6$1.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$1.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$1.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$1.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$1.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "component", type: i6$1.NzFilterTriggerComponent, selector: "nz-filter-trigger", inputs: ["nzActive", "nzDropdownMenu", "nzVisible", "nzBackdrop"], outputs: ["nzVisibleChange"], exportAs: ["nzFilterTrigger"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$2.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i4$1.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzDropDownModule }, { kind: "component", type: i5$4.NzDropdownMenuComponent, selector: "nz-dropdown-menu", exportAs: ["nzDropdownMenu"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutoFocusDirective, selector: "[appAutoFocus]", inputs: ["appAutoFocus"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i5$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "ngmodule", type: NzSpinModule }, { kind: "ngmodule", type: NzPopconfirmModule }, { kind: "directive", type: i12.NzPopconfirmDirective, selector: "[nz-popconfirm]", inputs: ["nzPopconfirmArrowPointAtCenter", "nzPopconfirmTitle", "nzPopconfirmTitleContext", "nz-popconfirm", "nzPopconfirmTrigger", "nzPopconfirmPlacement", "nzPopconfirmOrigin", "nzPopconfirmMouseEnterDelay", "nzPopconfirmMouseLeaveDelay", "nzPopconfirmOverlayClassName", "nzPopconfirmOverlayStyle", "nzPopconfirmVisible", "nzOkText", "nzOkType", "nzOkDisabled", "nzOkDanger", "nzCancelText", "nzBeforeConfirm", "nzIcon", "nzCondition", "nzPopconfirmShowArrow", "nzPopconfirmBackdrop", "nzAutofocus"], outputs: ["nzPopconfirmVisibleChange", "nzOnCancel", "nzOnConfirm"], exportAs: ["nzPopconfirm"] }, { kind: "ngmodule", type: NzTabsModule }, { kind: "component", type: i1$7.NzTabSetComponent, selector: "nz-tabset", inputs: ["nzSelectedIndex", "nzTabPosition", "nzTabBarExtraContent", "nzCanDeactivate", "nzAddIcon", "nzTabBarStyle", "nzType", "nzSize", "nzAnimated", "nzTabBarGutter", "nzHideAdd", "nzCentered", "nzHideAll", "nzLinkRouter", "nzLinkExact", "nzDestroyInactiveTabPane"], outputs: ["nzSelectChange", "nzSelectedIndexChange", "nzTabListScroll", "nzClose", "nzAdd"], exportAs: ["nzTabset"] }, { kind: "component", type: i1$7.NzTabComponent, selector: "nz-tab", inputs: ["nzTitle", "nzClosable", "nzCloseIcon", "nzDisabled", "nzForceRender"], outputs: ["nzSelect", "nzDeselect", "nzClick", "nzContextmenu"], exportAs: ["nzTab"] }, { kind: "ngmodule", type: NzDividerModule }, { kind: "component", type: i8$1.NzDividerComponent, selector: "nz-divider", inputs: ["nzText", "nzType", "nzOrientation", "nzVariant", "nzDashed", "nzPlain"], exportAs: ["nzDivider"] }, { kind: "ngmodule", type: NzAlertModule }, { kind: "component", type: i16.NzAlertComponent, selector: "nz-alert", inputs: ["nzAction", "nzCloseText", "nzIconType", "nzMessage", "nzDescription", "nzType", "nzCloseable", "nzShowIcon", "nzBanner", "nzNoAnimation", "nzIcon"], outputs: ["nzOnClose"], exportAs: ["nzAlert"] }, { kind: "ngmodule", type: NzModalModule }, { kind: "component", type: i15.NzModalComponent, selector: "nz-modal", inputs: ["nzMask", "nzMaskClosable", "nzCloseOnNavigation", "nzVisible", "nzClosable", "nzOkLoading", "nzOkDisabled", "nzCancelDisabled", "nzCancelLoading", "nzKeyboard", "nzNoAnimation", "nzCentered", "nzDraggable", "nzContent", "nzFooter", "nzZIndex", "nzWidth", "nzWrapClassName", "nzClassName", "nzStyle", "nzTitle", "nzCloseIcon", "nzMaskStyle", "nzBodyStyle", "nzOkText", "nzCancelText", "nzOkType", "nzOkDanger", "nzIconType", "nzModalType", "nzAutofocus", "nzOnOk", "nzOnCancel"], outputs: ["nzOnOk", "nzOnCancel", "nzAfterOpen", "nzAfterClose", "nzVisibleChange"], exportAs: ["nzModal"] }, { kind: "directive", type: i15.NzModalContentDirective, selector: "[nzModalContent]", exportAs: ["nzModalContent"] }] });
9332
- }
9333
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: MailTemplateListComponent, decorators: [{
9334
- type: Component,
9335
- args: [{ selector: 'app-mail-template-list', standalone: true, imports: [
9336
- CommonModule,
9337
- NzTableModule,
9338
- NzButtonModule,
9339
- NzIconModule,
9340
- TranslateModule,
9341
- NzGridModule,
9342
- NzDropDownModule,
9343
- FormsModule,
9344
- AutoFocusDirective,
9345
- NzInputModule,
9346
- NzSpinModule,
9347
- NzPopconfirmModule,
9348
- NzTabsModule,
9349
- NzDividerModule,
9350
- NzAlertModule,
9351
- NzModalModule,
9352
- ], template: "<nz-tabset [(nzSelectedIndex)]=\"selectedTabIndex\" (nzSelectedIndexChange)=\"onTabChange($event)\" nzType=\"card\">\r\n <!-- TAB 1: MAIL TEMPLATE -->\r\n <nz-tab nzTitle=\"Mail Templates\">\r\n <div nz-row [nzGutter]=\"[0, 8]\">\r\n <div nz-col nzSpan=\"24\">\r\n <div nz-row [nzGutter]=\"[8, 0]\">\r\n <div nz-col>\r\n <button nz-button nzType=\"primary\" (click)=\"editTemplate(null)\">{{ TranslateKey.ADD | translate }}</button>\r\n </div>\r\n <div nz-col>\r\n <!-- <button nz-button nzType=\"primary\" (click)=\"getTemplateData()\">{{ TranslateKey.SEARCH | translate }}</button> -->\r\n </div>\r\n </div>\r\n </div>\r\n <div nz-col nzSpan=\"24\">\r\n <nz-table\r\n #templateTable\r\n [nzData]=\"this.templateData?.LstItem || []\"\r\n [nzBordered]=\"true\"\r\n [nzSize]=\"'small'\"\r\n [nzShowSizeChanger]=\"true\"\r\n [nzFrontPagination]=\"false\"\r\n [nzPageIndex]=\"templateFilter.PageIndex + 1\"\r\n [nzPageSize]=\"templateFilter.PageSize\"\r\n [nzTotal]=\"this.templateData?.TotalCount || 0\"\r\n [nzShowTotal]=\"showTotalTpl\"\r\n [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n (nzQueryParams)=\"onTemplateQueryParamsChange($event)\"\r\n >\r\n <ng-template #showTotalTpl let-total let-range=\"range\">\r\n {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n </ng-template>\r\n <thead>\r\n <tr>\r\n @for (item of this.templateData?.LstHeader; track $index) {\r\n @if (item.Code == \"Code\") {\r\n <th [nzWidth]=\"item.Width\" nzCustomFilter>\r\n {{ item.Name }}\r\n <nz-filter-trigger\r\n [nzActive]=\"templateFilter.Code ? true : false\"\r\n [nzDropdownMenu]=\"searchTemplateCodeMenu\"\r\n (nzVisibleChange)=\"isDropdownTemplateCodeVisible = $event\"\r\n >\r\n <nz-icon nzType=\"search\" />\r\n </nz-filter-trigger>\r\n </th>\r\n } @else if (item.Code == \"Name\") {\r\n <th [nzWidth]=\"item.Width\" nzCustomFilter>\r\n {{ item.Name }}\r\n <nz-filter-trigger\r\n [nzActive]=\"templateFilter.Name ? true : false\"\r\n [nzDropdownMenu]=\"searchTemplateNameMenu\"\r\n (nzVisibleChange)=\"isDropdownTemplateNameVisible = $event\"\r\n >\r\n <nz-icon nzType=\"search\" />\r\n </nz-filter-trigger>\r\n </th>\r\n } @else {\r\n <th [nzWidth]=\"item.Width\">{{ item.Name }}</th>\r\n }\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (row of templateTable.data; track $index; let i = $index) {\r\n <tr>\r\n @for (col of this.templateData?.LstHeader; track $index) {\r\n <td [class]=\"col.Class\">\r\n @if (col.Code == \"NO\") {\r\n {{ i + 1 + templateFilter.PageIndex * templateFilter.PageSize }}\r\n } @else if (col.Code == \"ACTION\") {\r\n <i\r\n nz-icon\r\n nzType=\"eye\"\r\n nzTheme=\"outline\"\r\n class=\"color-primary cursor-pointer icon-size-16\"\r\n (click)=\"previewTemplateEmail(row)\"\r\n title=\"Xem tr\u01B0\u1EDBc\"\r\n ></i>\r\n &nbsp;\r\n <i\r\n nz-icon\r\n nzType=\"edit\"\r\n nzTheme=\"outline\"\r\n class=\"color-primary cursor-pointer icon-size-16\"\r\n (click)=\"editTemplate(row)\"\r\n ></i>\r\n &nbsp;\r\n <i\r\n nz-icon\r\n nzType=\"delete\"\r\n nzTheme=\"outline\"\r\n class=\"color-warn cursor-pointer icon-size-16\"\r\n nz-popconfirm\r\n [nzPopconfirmTitle]=\"TranslateKey.CONFIRM_DELETE | translate\"\r\n nzPopconfirmPlacement=\"top\"\r\n (nzOnConfirm)=\"deleteTemplate(row)\"\r\n nzOkDanger\r\n ></i>\r\n } @else {\r\n @if (col.Type == \"CHECKBOX\") {\r\n @if (row[col.Code]) {\r\n <nz-icon nzType=\"check-circle\" nzTheme=\"outline\" class=\"color-primary\" />\r\n } @else {\r\n <nz-icon nzType=\"close\" nzTheme=\"outline\" class=\"color-warn\" />\r\n }\r\n } @else {\r\n {{ row[col.Code] }}\r\n }\r\n }\r\n </td>\r\n }\r\n </tr>\r\n }\r\n </tbody>\r\n </nz-table>\r\n </div>\r\n </div>\r\n\r\n <!-- Search Dropdowns for Template -->\r\n <nz-dropdown-menu #searchTemplateCodeMenu=\"nzDropdownMenu\">\r\n <div class=\"ant-table-filter-dropdown\">\r\n <div class=\"search-box\">\r\n <input\r\n type=\"text\"\r\n nz-input\r\n [(ngModel)]=\"templateFilter.Code\"\r\n [appAutoFocus]=\"isDropdownTemplateCodeVisible\"\r\n (keyup.enter)=\"searchTemplate()\"\r\n />\r\n <button nz-button nzSize=\"small\" nzType=\"primary\" (click)=\"searchTemplate()\" class=\"search-button\">\r\n {{ \"SEARCH\" | translate }}\r\n </button>\r\n <button nz-button nzSize=\"small\" (click)=\"templateFilter.Code = ''; searchTemplate()\">\r\n {{ \"RESET\" | translate }}\r\n </button>\r\n </div>\r\n </div>\r\n </nz-dropdown-menu>\r\n <nz-dropdown-menu #searchTemplateNameMenu=\"nzDropdownMenu\">\r\n <div class=\"ant-table-filter-dropdown\">\r\n <div class=\"search-box\">\r\n <input\r\n type=\"text\"\r\n nz-input\r\n [(ngModel)]=\"templateFilter.Name\"\r\n [appAutoFocus]=\"isDropdownTemplateNameVisible\"\r\n (keyup.enter)=\"searchTemplate()\"\r\n />\r\n <button nz-button nzSize=\"small\" nzType=\"primary\" (click)=\"searchTemplate()\" class=\"search-button\">\r\n {{ \"SEARCH\" | translate }}\r\n </button>\r\n <button nz-button nzSize=\"small\" (click)=\"templateFilter.Name = ''; searchTemplate()\">\r\n {{ \"RESET\" | translate }}\r\n </button>\r\n </div>\r\n </div>\r\n </nz-dropdown-menu>\r\n </nz-tab>\r\n\r\n <!-- TAB 2: MAIL SEND SETTING -->\r\n <nz-tab nzTitle=\"Mail Send Settings\">\r\n <div nz-row [nzGutter]=\"[0, 8]\">\r\n <div nz-col nzSpan=\"24\">\r\n <div nz-row [nzGutter]=\"[8, 0]\">\r\n <div nz-col>\r\n <button nz-button nzType=\"primary\" (click)=\"editSetting(null)\">{{ TranslateKey.ADD | translate }}</button>\r\n </div>\r\n <div nz-col>\r\n <!-- <button nz-button nzType=\"primary\" (click)=\"getSettingData()\">{{ TranslateKey.SEARCH | translate }}</button> -->\r\n </div>\r\n </div>\r\n </div>\r\n <div nz-col nzSpan=\"24\">\r\n <nz-table\r\n #settingTable\r\n [nzData]=\"this.settingData?.LstItem || []\"\r\n [nzBordered]=\"true\"\r\n [nzSize]=\"'small'\"\r\n [nzShowSizeChanger]=\"true\"\r\n [nzFrontPagination]=\"false\"\r\n [nzPageIndex]=\"settingFilter.PageIndex + 1\"\r\n [nzPageSize]=\"settingFilter.PageSize\"\r\n [nzTotal]=\"this.settingData?.TotalCount || 0\"\r\n [nzShowTotal]=\"showTotalTpl2\"\r\n [nzPageSizeOptions]=\"AppGlobals.pageSizeOptions\"\r\n [nzScroll]=\"{ y: 'calc(100vh - 290px)' }\"\r\n (nzQueryParams)=\"onSettingQueryParamsChange($event)\"\r\n >\r\n <ng-template #showTotalTpl2 let-total let-range=\"range\">\r\n {{ range[0] | number }} - {{ range[1] | number }} / {{ total | number }}\r\n </ng-template>\r\n <thead>\r\n <tr>\r\n @for (item of this.settingData?.LstHeader; track $index) {\r\n @if (item.Code == \"Code\") {\r\n <th [nzWidth]=\"item.Width\" nzCustomFilter>\r\n {{ item.Name }}\r\n <nz-filter-trigger\r\n [nzActive]=\"settingFilter.Code ? true : false\"\r\n [nzDropdownMenu]=\"searchSettingCodeMenu\"\r\n (nzVisibleChange)=\"isDropdownSettingCodeVisible = $event\"\r\n >\r\n <nz-icon nzType=\"search\" />\r\n </nz-filter-trigger>\r\n </th>\r\n } @else if (item.Code == \"Name\") {\r\n <th [nzWidth]=\"item.Width\" nzCustomFilter>\r\n {{ item.Name }}\r\n <nz-filter-trigger\r\n [nzActive]=\"settingFilter.Name ? true : false\"\r\n [nzDropdownMenu]=\"searchSettingNameMenu\"\r\n (nzVisibleChange)=\"isDropdownSettingNameVisible = $event\"\r\n >\r\n <nz-icon nzType=\"search\" />\r\n </nz-filter-trigger>\r\n </th>\r\n } @else {\r\n <th [nzWidth]=\"item.Width\">{{ item.Name }}</th>\r\n }\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (row of settingTable.data; track $index; let i = $index) {\r\n <tr>\r\n @for (col of this.settingData?.LstHeader; track $index) {\r\n <td [class]=\"col.Class\">\r\n @if (col.Code == \"NO\") {\r\n {{ i + 1 + settingFilter.PageIndex * settingFilter.PageSize }}\r\n } @else if (col.Code == \"ACTION\") {\r\n <i\r\n nz-icon\r\n nzType=\"edit\"\r\n nzTheme=\"outline\"\r\n class=\"color-primary cursor-pointer icon-size-16\"\r\n (click)=\"editSetting(row)\"\r\n ></i>\r\n &nbsp;\r\n\r\n <i\r\n nz-icon\r\n nzType=\"delete\"\r\n nzTheme=\"outline\"\r\n class=\"color-warn cursor-pointer icon-size-16\"\r\n nz-popconfirm\r\n [nzPopconfirmTitle]=\"TranslateKey.CONFIRM_DELETE | translate\"\r\n nzPopconfirmPlacement=\"top\"\r\n (nzOnConfirm)=\"deleteSetting(row)\"\r\n nzOkDanger\r\n ></i>\r\n } @else {\r\n @if (col.Type == \"CHECKBOX\") {\r\n @if (row[col.Code]) {\r\n <nz-icon nzType=\"check-circle\" nzTheme=\"outline\" class=\"color-primary\" />\r\n } @else {\r\n <nz-icon nzType=\"close\" nzTheme=\"outline\" class=\"color-warn\" />\r\n }\r\n } @else {\r\n {{ row[col.Code] }}\r\n }\r\n }\r\n </td>\r\n }\r\n </tr>\r\n }\r\n </tbody>\r\n </nz-table>\r\n </div>\r\n </div>\r\n\r\n <!-- Search Dropdowns for Setting -->\r\n <nz-dropdown-menu #searchSettingCodeMenu=\"nzDropdownMenu\">\r\n <div class=\"ant-table-filter-dropdown\">\r\n <div class=\"search-box\">\r\n <input\r\n type=\"text\"\r\n nz-input\r\n [(ngModel)]=\"settingFilter.Code\"\r\n [appAutoFocus]=\"isDropdownSettingCodeVisible\"\r\n (keyup.enter)=\"searchSetting()\"\r\n />\r\n <button nz-button nzSize=\"small\" nzType=\"primary\" (click)=\"searchSetting()\" class=\"search-button\">\r\n {{ \"SEARCH\" | translate }}\r\n </button>\r\n <button nz-button nzSize=\"small\" (click)=\"settingFilter.Code = ''; searchSetting()\">\r\n {{ \"RESET\" | translate }}\r\n </button>\r\n </div>\r\n </div>\r\n </nz-dropdown-menu>\r\n <nz-dropdown-menu #searchSettingNameMenu=\"nzDropdownMenu\">\r\n <div class=\"ant-table-filter-dropdown\">\r\n <div class=\"search-box\">\r\n <input\r\n type=\"text\"\r\n nz-input\r\n [(ngModel)]=\"settingFilter.Name\"\r\n [appAutoFocus]=\"isDropdownSettingNameVisible\"\r\n (keyup.enter)=\"searchSetting()\"\r\n />\r\n <button nz-button nzSize=\"small\" nzType=\"primary\" (click)=\"searchSetting()\" class=\"search-button\">\r\n {{ \"SEARCH\" | translate }}\r\n </button>\r\n <button nz-button nzSize=\"small\" (click)=\"settingFilter.Name = ''; searchSetting()\">\r\n {{ \"RESET\" | translate }}\r\n </button>\r\n </div>\r\n </div>\r\n </nz-dropdown-menu>\r\n </nz-tab>\r\n</nz-tabset>\r\n\r\n<!-- ==================== PREVIEW EMAIL MODAL ==================== -->\r\n<nz-modal\r\n [(nzVisible)]=\"isPreviewModalVisible\"\r\n [nzTitle]=\"'Preview: ' + (previewTemplate?.Name || '')\"\r\n [nzWidth]=\"900\"\r\n (nzOnCancel)=\"closePreviewModal()\"\r\n [nzFooter]=\"previewFooter\"\r\n [nzBodyStyle]=\"{ maxHeight: '70vh', overflow: 'auto' }\"\r\n>\r\n <ng-container *nzModalContent>\r\n <!-- Alert Info -->\r\n <nz-alert nzType=\"info\" nzMessage=\"L\u01B0u \u00FD : \u0110\u00E2y l\u00E0 b\u1EA3n xem tr\u01B0\u1EDBc\" nzShowIcon style=\"margin-top: 16px\"></nz-alert>\r\n <!-- Email Headers -->\r\n <div style=\"margin-bottom: 16px; padding: 12px; background: #f5f5f5; border-radius: 4px; font-size: 13px\">\r\n <div style=\"margin-bottom: 4px\">\r\n <strong style=\"display: inline-block; width: 60px\">From:</strong>\r\n <span>{{ previewTemplate?.MailFrom }}</span>\r\n </div>\r\n <div style=\"margin-bottom: 4px\">\r\n <strong style=\"display: inline-block; width: 60px\">To:</strong>\r\n <span>{{ previewTemplate?.MailTo }}</span>\r\n </div>\r\n <div *ngIf=\"previewTemplate?.MailCC\" style=\"margin-bottom: 4px\">\r\n <strong style=\"display: inline-block; width: 60px\">CC:</strong>\r\n <span>{{ previewTemplate?.MailCC }}</span>\r\n </div>\r\n <div *ngIf=\"previewTemplate?.MailBCC\" style=\"margin-bottom: 4px\">\r\n <strong style=\"display: inline-block; width: 60px\">BCC:</strong>\r\n <span>{{ previewTemplate?.MailBCC }}</span>\r\n </div>\r\n </div>\r\n\r\n <nz-divider [nzText]=\"'Email Content'\" nzOrientation=\"left\"></nz-divider>\r\n\r\n <!-- Email Content Preview -->\r\n <div\r\n style=\"\r\n border: 1px solid #d9d9d9;\r\n padding: 24px;\r\n background: white;\r\n border-radius: 4px;\r\n font-family: Arial, sans-serif;\r\n line-height: 1.6;\r\n \"\r\n [innerHTML]=\"previewHtmlContent\"\r\n ></div>\r\n\r\n <!-- ==================== TEST EMAIL SECTION ==================== -->\r\n <nz-divider [nzText]=\"'\uD83D\uDCE8 G\u1EEDi Email Test'\" nzOrientation=\"left\" style=\"margin-top: 24px\"></nz-divider>\r\n\r\n <div style=\"padding: 16px; background: #f9f9f9; border-radius: 4px; border: 1px solid #e0e0e0\">\r\n <div nz-row [nzGutter]=\"[8, 8]\" [nzAlign]=\"'middle'\">\r\n <div nz-col [nzSpan]=\"20\">\r\n <nz-form-item style=\"margin-bottom: 0\">\r\n <nz-form-control style=\"width: 100%\">\r\n <input\r\n nz-input\r\n [(ngModel)]=\"testEmail\"\r\n placeholder=\"Nh\u1EADp email nh\u1EADn test (v\u00ED d\u1EE5: test@example.com)\"\r\n [disabled]=\"isSendingTestEmail\"\r\n (keyup.enter)=\"sendTestEmail()\"\r\n type=\"email\"\r\n />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzSpan]=\"4\">\r\n <button\r\n nz-button\r\n nzType=\"primary\"\r\n nzBlock\r\n (click)=\"sendTestEmail()\"\r\n [nzLoading]=\"isSendingTestEmail\"\r\n [disabled]=\"!testEmail || isSendingTestEmail\"\r\n >\r\n <span nz-icon nzType=\"send\"></span>\r\n G\u1EEDi\r\n </button>\r\n </div>\r\n </div>\r\n <div style=\"margin-top: 8px; font-size: 12px; color: #666\">\r\n <span nz-icon nzType=\"info-circle\" style=\"margin-right: 4px\"></span>\r\n Email s\u1EBD \u0111\u01B0\u1EE3c g\u1EEDi v\u1EDBi n\u1ED9i dung hi\u1EC7n t\u1EA1i (placeholder gi\u1EEF nguy\u00EAn)\r\n </div>\r\n </div>\r\n <!-- ==================== K\u1EBET TH\u00DAC TEST EMAIL SECTION ==================== -->\r\n </ng-container>\r\n\r\n <!-- Modal Footer -->\r\n <ng-template #previewFooter>\r\n <button nz-button nzType=\"default\" (click)=\"closePreviewModal()\">\u0110\u00F3ng</button>\r\n </ng-template>\r\n</nz-modal>\r\n" }]
9353
- }] });
9354
-
9355
- class MailTemplateDetailComponent extends BaseComponent {
9356
- templateService = inject(App_MailTemplateService);
9357
- settingService = inject(MailSendSettingService);
9358
- sanitizer = inject(DomSanitizer);
9359
- fb = inject(FormBuilder);
9360
- form;
9361
- item = new App_MailTemplate();
9362
- isNew = true;
9363
- // Settings list
9364
- lstSettings = [];
9365
- isLoadingSettings = false;
9366
- // Preview Modal
9367
- isPreviewModalVisible = false;
9368
- previewHtmlContent = null;
9369
- previewMailFrom = '';
9370
- previewMailTo = '';
9371
- previewMailCC = '';
9372
- previewMailBCC = '';
9373
- // Angular Editor Config
9374
- editorConfig = {
9375
- editable: true,
9376
- spellcheck: false,
9377
- height: '300px',
9378
- minHeight: '200px',
9379
- maxHeight: 'auto',
9380
- width: 'auto',
9381
- minWidth: '0',
9382
- translate: 'yes',
9383
- enableToolbar: true,
9384
- showToolbar: true,
9385
- placeholder: 'Nhập nội dung email...',
9386
- defaultParagraphSeparator: '',
9387
- defaultFontName: 'Arial',
9388
- defaultFontSize: '3',
9389
- fonts: [
9390
- { class: 'arial', name: 'Arial' },
9391
- { class: 'times-new-roman', name: 'Times New Roman' },
9392
- { class: 'calibri', name: 'Calibri' },
9393
- { class: 'comic-sans-ms', name: 'Comic Sans MS' },
9394
- ],
9395
- customClasses: [],
9396
- uploadUrl: '',
9397
- sanitize: false,
9398
- toolbarPosition: 'top',
9399
- toolbarHiddenButtons: [['insertVideo', 'insertImage']],
9400
- };
9401
- ngOnInit() {
9402
- this.initForm();
9403
- const id = this.getUrlParam('id');
9404
- if (id && id !== 'new') {
9405
- this.isNew = false;
9406
- this.loadData(id);
9407
- this.loadSettings(id);
9408
- }
9409
- setTimeout(() => {
9410
- Breadcrumb.lstBreadcrumb = [
9411
- {
9412
- Name: 'Mail template',
9413
- Click: () => this.goto('/admin/mail-template'),
9414
- },
9415
- {
9416
- Name: this.isNew ? 'Tạo mới Template' : 'Chỉnh sửa Template',
9417
- Click: () => { },
9418
- },
9419
- ];
9420
- }, 0);
9421
- }
9422
- ngOnDestroy() {
9423
- Breadcrumb.lstBreadcrumb = [];
9424
- }
9425
- initForm() {
9426
- this.form = this.fb.group({
9427
- App_MailTemplate_Id: [null],
9428
- Code: ['', [Validators.required, Validators.maxLength(50)]],
9429
- Name: ['', [Validators.required, Validators.maxLength(250)]],
9430
- Subject: ['', [Validators.required, Validators.maxLength(250)]],
9431
- MailFrom: ['', [Validators.required, Validators.maxLength(250)]],
9432
- MailTo: ['', [Validators.required, Validators.maxLength(1000)]],
9433
- MailCC: ['', [Validators.maxLength(1000)]],
9434
- MailBCC: ['', [Validators.maxLength(1000)]],
9435
- MailContent: ['', [Validators.required]],
9436
- SPN_Data: ['', [Validators.maxLength(50)]],
9437
- IsActive: [true],
9438
- });
9439
- }
9440
- loadData(id) {
9441
- this.isLoading = true;
9442
- this.templateService
9443
- .getById(id)
9444
- .then((res) => {
9445
- if (res.Data) {
9446
- console.log(res.Data);
9447
- this.item = res.Data;
9448
- console.log(this.item);
9449
- this.form.patchValue({
9450
- App_MailTemplate_Id: this.item.App_MailTemplate_Id,
9451
- Code: this.item.Code,
9452
- Name: this.item.Name,
9453
- MailFrom: this.item.MailFrom,
9454
- MailTo: this.item.MailTo,
9455
- MailCC: this.item.MailCC,
9456
- MailBCC: this.item.MailBCC,
9457
- MailContent: this.item.MailContent,
9458
- SPN_Data: this.item.SPN_Data,
9459
- IsActive: this.item.IsActive,
9460
- });
9461
- }
9462
- }, (err) => this.handleError(err))
9463
- .finally(() => {
9464
- this.isLoading = false;
9465
- });
9466
- }
9467
- loadSettings(templateId) {
9468
- this.isLoadingSettings = true;
9469
- this.templateService
9470
- .getSettingsByTemplateId(templateId)
9471
- .then((res) => {
9472
- if (res.Data && Array.isArray(res.Data)) {
9473
- this.lstSettings = res.Data;
9474
- }
9475
- else {
9476
- this.lstSettings = [];
9477
- }
9478
- }, (err) => {
9479
- this.handleError(err);
9480
- this.lstSettings = [];
9481
- })
9482
- .finally(() => {
9483
- this.isLoadingSettings = false;
9484
- });
9485
- }
9486
- async save() {
9487
- if (this.form.invalid) {
9488
- this.touchControls(this.form);
9489
- this.notiService.warning('Vui lòng nhập đầy đủ thông tin bắt buộc');
9490
- return;
9491
- }
9492
- this.isSaving = true;
9493
- const formValue = this.form.value;
9494
- const data = {
9495
- ...this.item,
9496
- ...formValue,
9497
- };
9498
- try {
9499
- const res = await this.templateService.addOrEdit(data);
9500
- this.notiService.success(this.isNew ? 'Thêm mới thành công' : 'Cập nhật thành công');
9501
- this.router.navigateByUrl(`admin/mail-template/template/${res.Data}`);
9502
- }
9503
- catch (err) {
9504
- this.handleError(err);
9505
- }
9506
- finally {
9507
- this.isSaving = false;
9508
- }
9509
- }
9510
- async delete() {
9511
- if (!this.item.App_MailTemplate_Id)
9512
- return;
9513
- try {
9514
- await this.templateService.delete(this.item.App_MailTemplate_Id);
9515
- this.notiService.success(this.translate.instant(this.TranslateKey.DELETE_SUCCESS));
9516
- // Quay lại với query param tab=0
9517
- this.router.navigate(['/admin/mail-template'], {
9518
- queryParams: { tab: 0 },
9519
- });
9520
- }
9521
- catch (err) {
9522
- this.handleError(err);
9523
- }
9524
- }
9525
- cancel() {
9526
- // Quay lại với query param tab=0
9527
- this.router.navigate(['/admin/mail-template'], {
9528
- queryParams: { tab: 0 },
9529
- });
9530
- }
9531
- // ==================== SETTINGS MANAGEMENT ====================
9532
- addSetting() {
9533
- if (!this.item.App_MailTemplate_Id) {
9534
- this.notiService.warning('Vui lòng lưu Template trước khi thêm lịch gửi');
9535
- return;
9536
- }
9537
- // Navigate to Setting Detail với templateId
9538
- this.router.navigate(['/admin/mail-template/setting/new'], {
9539
- queryParams: {
9540
- templateId: this.item.App_MailTemplate_Id,
9541
- tab: 0, // Quay về tab 0 sau khi tạo Setting
9542
- },
9543
- });
9544
- }
9545
- editSetting(setting) {
9546
- this.router.navigate(['/admin/mail-template/setting', setting.App_MailSendSetting_Id], {
9547
- queryParams: { tab: 0 },
9548
- });
9549
- }
9550
- async deleteSetting(setting) {
9551
- if (!setting.App_MailSendSetting_Id)
9552
- return;
9553
- try {
9554
- await this.settingService.delete(setting.App_MailSendSetting_Id);
9555
- this.notiService.success(this.translate.instant(this.TranslateKey.DELETE_SUCCESS));
9556
- // Reload settings list
9557
- if (this.item.App_MailTemplate_Id) {
9558
- this.loadSettings(this.item.App_MailTemplate_Id);
9559
- }
9560
- }
9561
- catch (err) {
9562
- this.handleError(err);
9563
- }
9564
- }
9565
- previewEmail() {
9566
- const formValue = this.form.value;
9567
- // Lấy HTML content từ form
9568
- const htmlContent = formValue.MailContent || '';
9569
- this.previewHtmlContent = this.sanitizer.bypassSecurityTrustHtml(htmlContent);
9570
- this.previewMailFrom = formValue.MailFrom || '';
9571
- this.previewMailTo = formValue.MailTo || '';
9572
- this.previewMailCC = formValue.MailCC || '';
9573
- this.previewMailBCC = formValue.MailBCC || '';
9574
- this.isPreviewModalVisible = true;
9575
- }
9576
- closePreviewModal() {
9577
- this.isPreviewModalVisible = false;
9578
- this.previewHtmlContent = null;
9579
- }
9580
- editorOptions = {
9581
- language: 'html', // java, javascript, python, csharp, html, markdown, ruby
9582
- theme: 'vs-dark', // vs, vs-dark, hc-black
9583
- automaticLayout: true,
9584
- };
9585
- code = this.getCode();
9586
- getCode() {
9587
- return ('<html><!-- // !!! Tokens can be inspected using F1 > Developer: Inspect Tokens !!! -->\n<head>\n <!-- HTML comment -->\n <style type="text/css">\n /* CSS comment */\n </style>\n <script type="javascript">\n // JavaScript comment\n </' +
9588
- 'script>\n</head>\n<body></body>\n</html>');
9589
- }
9590
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: MailTemplateDetailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
9591
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: MailTemplateDetailComponent, isStandalone: true, selector: "app-mail-template-detail", usesInheritance: true, ngImport: i0, template: "<nz-spin [nzSpinning]=\"isLoading\" nzTip=\"\u0110ang t\u1EA3i...\">\r\n <form nz-form [formGroup]=\"form\">\r\n <div nz-row [nzGutter]=\"['16', '16']\">\r\n <!-- C\u1ED8T TR\u00C1I: FORM TEMPLATE -->\r\n <div nz-col [nzMd]=\"12\" [nzSm]=\"24\">\r\n <!-- Code -->\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"4\" nzFor=\"code\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired> M\u00E3 </nz-form-label>\r\n <nz-form-control [nzSpan]=\"20\" [nzErrorTip]=\"'Vui l\u00F2ng nh\u1EADp M\u00E3'\">\r\n <input nz-input formControlName=\"Code\" id=\"code\" placeholder=\"V\u00ED d\u1EE5: WELCOME_EMAIL\" maxlength=\"50\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <!-- Name -->\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"4\" nzFor=\"name\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired> T\u00EAn </nz-form-label>\r\n <nz-form-control [nzSpan]=\"20\" [nzErrorTip]=\"'Vui l\u00F2ng nh\u1EADp T\u00EAn'\">\r\n <input\r\n nz-input\r\n formControlName=\"Name\"\r\n id=\"name\"\r\n placeholder=\"V\u00ED d\u1EE5: Email ch\u00E0o m\u1EEBng kh\u00E1ch h\u00E0ng\"\r\n maxlength=\"250\"\r\n />\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <extend-input\r\n [labelSpan]=\"4\"\r\n [label]=\"'Subject'\"\r\n [required]=\"true\"\r\n [formData]=\"form\"\r\n [controlName]=\"''\"\r\n ></extend-input>\r\n\r\n <!-- MailFrom -->\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"4\" nzFor=\"mailfrom\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n From\r\n </nz-form-label>\r\n <nz-form-control [nzSpan]=\"20\" [nzErrorTip]=\"'Vui l\u00F2ng nh\u1EADp From'\">\r\n <input\r\n nz-input\r\n formControlName=\"MailFrom\"\r\n id=\"mailfrom\"\r\n placeholder=\"V\u00ED d\u1EE5: noreply@company.com\"\r\n maxlength=\"250\"\r\n />\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <!-- MailTo -->\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"4\" nzFor=\"mailto\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n To\r\n </nz-form-label>\r\n <nz-form-control [nzSpan]=\"20\" [nzErrorTip]=\"'Vui l\u00F2ng nh\u1EADp To'\">\r\n <input\r\n nz-input\r\n formControlName=\"MailTo\"\r\n id=\"mailto\"\r\n placeholder=\"V\u00ED d\u1EE5: customer@example.com ho\u1EB7c {{ '{' }}CustomerEmail{{ '}' }}\"\r\n maxlength=\"1000\"\r\n />\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <!-- MailCC -->\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"4\" nzFor=\"mailcc\" nzLabelAlign=\"left\" nzNoColon=\"true\"> CC </nz-form-label>\r\n <nz-form-control [nzSpan]=\"20\">\r\n <input\r\n nz-input\r\n formControlName=\"MailCC\"\r\n id=\"mailcc\"\r\n placeholder=\"Ph\u00E2n c\u00E1ch b\u1EB1ng d\u1EA5u ph\u1EA9y n\u1EBFu nhi\u1EC1u\"\r\n maxlength=\"1000\"\r\n />\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <!-- MailBCC -->\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"4\" nzFor=\"mailbcc\" nzLabelAlign=\"left\" nzNoColon=\"true\"> BCC </nz-form-label>\r\n <nz-form-control [nzSpan]=\"20\">\r\n <input\r\n nz-input\r\n formControlName=\"MailBCC\"\r\n id=\"mailbcc\"\r\n placeholder=\"Ph\u00E2n c\u00E1ch b\u1EB1ng d\u1EA5u ph\u1EA9y n\u1EBFu nhi\u1EC1u\"\r\n maxlength=\"1000\"\r\n />\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <!-- MailContent - Angular Editor -->\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"4\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n N\u1ED9i dung\r\n <button\r\n nz-button\r\n nzType=\"link\"\r\n nzSize=\"small\"\r\n (click)=\"previewEmail()\"\r\n style=\"margin-left: 8px\"\r\n type=\"button\"\r\n title=\"Xem tr\u01B0\u1EDBc email\"\r\n >\r\n <span nz-icon nzType=\"eye\"></span>\r\n </button>\r\n </nz-form-label>\r\n <nz-form-control [nzSpan]=\"20\" [nzErrorTip]=\"'Vui l\u00F2ng nh\u1EADp N\u1ED9i dung'\">\r\n <angular-editor id=\"mailcontent\" formControlName=\"MailContent\" [config]=\"editorConfig\"></angular-editor>\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <!-- Info about placeholders -->\r\n <div nz-row>\r\n <div nz-col [nzSpan]=\"4\"></div>\r\n <div nz-col [nzSpan]=\"20\">\r\n <div\r\n style=\"\r\n background: #e6f7ff;\r\n border-left: 3px solid #1890ff;\r\n padding: 12px 16px;\r\n margin-bottom: 16px;\r\n border-radius: 2px;\r\n font-size: 13px;\r\n \"\r\n >\r\n <div style=\"font-weight: 600; margin-bottom: 4px; color: #1890ff\">\uD83D\uDCA1 H\u01B0\u1EDBng d\u1EABn Placeholders</div>\r\n <div>\r\n S\u1EED d\u1EE5ng <code>{{ \"{\" }}TenTruong{{ \"}\" }}</code> \u0111\u1EC3 ch\u00E8n d\u1EEF li\u1EC7u \u0111\u1ED9ng. V\u00ED d\u1EE5:\r\n <code>{{ \"{\" }}UserName{{ \"}\" }}</code\r\n >, <code>{{ \"{\" }}OrderCode{{ \"}\" }}</code>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- SPN_Data -->\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"4\" nzFor=\"spndata\" nzLabelAlign=\"left\" nzNoColon=\"true\"> SPN Data </nz-form-label>\r\n <nz-form-control [nzSpan]=\"20\">\r\n <input\r\n nz-input\r\n formControlName=\"SPN_Data\"\r\n id=\"spndata\"\r\n placeholder=\"V\u00ED d\u1EE5: Rpt_Revenue_Daily\"\r\n maxlength=\"50\"\r\n />\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <!-- IsActive -->\r\n <div nz-row>\r\n <div nz-col [nzSpan]=\"4\"></div>\r\n <div nz-col [nzSpan]=\"20\">\r\n <label nz-checkbox formControlName=\"IsActive\">Active</label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- C\u1ED8T PH\u1EA2I: QU\u1EA2N L\u00DD MAIL SEND SETTINGS -->\r\n <div nz-col [nzMd]=\"12\" [nzSm]=\"24\">\r\n <div style=\"border: 1px solid #d9d9d9; border-radius: 4px; padding: 16px; height: 100%\">\r\n <h4 style=\"margin-top: 0; margin-bottom: 16px\">\r\n <span nz-icon nzType=\"clock-circle\" style=\"margin-right: 8px\"></span>\r\n Qu\u1EA3n l\u00FD L\u1ECBch g\u1EEDi\r\n </h4>\r\n\r\n <!-- Hi\u1EC3n th\u1ECB khi \u0110ANG T\u1EA0O M\u1EDAI (ch\u01B0a c\u00F3 App_MailTemplate_Id) -->\r\n <nz-alert\r\n *ngIf=\"!item.App_MailTemplate_Id\"\r\n nzType=\"info\"\r\n nzMessage=\"Vui l\u00F2ng l\u01B0u Template tr\u01B0\u1EDBc\"\r\n nzDescription=\"B\u1EA1n c\u1EA7n l\u01B0u Template tr\u01B0\u1EDBc, sau \u0111\u00F3 m\u1EDBi c\u00F3 th\u1EC3 th\u00EAm l\u1ECBch g\u1EEDi.\"\r\n nzShowIcon\r\n ></nz-alert>\r\n\r\n <!-- Hi\u1EC3n th\u1ECB khi \u0110ANG C\u1EACP NH\u1EACT (\u0111\u00E3 c\u00F3 App_MailTemplate_Id) -->\r\n <div *ngIf=\"item.App_MailTemplate_Id\">\r\n <div nz-flex [nzJustify]=\"'space-between'\" [nzAlign]=\"'center'\" style=\"margin-bottom: 12px\">\r\n <span style=\"font-weight: 500\">L\u1ECBch g\u1EEDi ({{ lstSettings.length }})</span>\r\n <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"addSetting()\">\r\n <span nz-icon nzType=\"plus\"></span>\r\n Th\u00EAm\r\n </button>\r\n </div>\r\n\r\n <div style=\"max-height: 400px; overflow-y: auto\">\r\n <nz-table\r\n #settingsTable\r\n [nzData]=\"lstSettings\"\r\n [nzSize]=\"'small'\"\r\n [nzShowPagination]=\"lstSettings.length > 20\"\r\n [nzPageSize]=\"20\"\r\n [nzLoading]=\"isLoadingSettings\"\r\n >\r\n <thead>\r\n <tr>\r\n <th nzWidth=\"40px\">STT</th>\r\n <th>Setting</th>\r\n <th nzWidth=\"50px\" nzAlign=\"center\"></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let setting of settingsTable.data; let i = index\">\r\n <td>{{ i + 1 }}</td>\r\n <td>\r\n <div style=\"font-weight: 500\">{{ setting.Name }}</div>\r\n <div style=\"font-size: 12px; color: #888\">\r\n <code style=\"font-size: 11px\">{{ setting.CronTime }}</code>\r\n </div>\r\n <div style=\"font-size: 11px; color: #aaa\">\r\n <span\r\n nz-icon\r\n [nzType]=\"setting.IsActive ? 'check-circle' : 'close-circle'\"\r\n [style.color]=\"setting.IsActive ? '#52c41a' : '#ff4d4f'\"\r\n ></span>\r\n {{ setting.IsActive ? \"Active\" : \"Inactive\" }}\r\n </div>\r\n </td>\r\n <td nzAlign=\"center\">\r\n <button\r\n nz-button\r\n nzType=\"link\"\r\n nzSize=\"small\"\r\n (click)=\"editSetting(setting)\"\r\n style=\"padding: 0; margin-right: 4px\"\r\n >\r\n <span nz-icon nzType=\"edit\" nzTheme=\"outline\"></span>\r\n </button>\r\n <button\r\n nz-button\r\n nzType=\"link\"\r\n nzDanger\r\n nzSize=\"small\"\r\n nz-popconfirm\r\n nzPopconfirmTitle=\"X\u00F3a l\u1ECBch g\u1EEDi n\u00E0y?\"\r\n (nzOnConfirm)=\"deleteSetting(setting)\"\r\n >\r\n <span nz-icon nzType=\"delete\" nzTheme=\"outline\"></span>\r\n </button>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </nz-table>\r\n\r\n <nz-empty\r\n *ngIf=\"lstSettings.length === 0 && !isLoadingSettings\"\r\n nzNotFoundContent=\"Ch\u01B0a c\u00F3 l\u1ECBch g\u1EEDi\"\r\n [nzNotFoundImage]=\"'simple'\"\r\n ></nz-empty>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- BUTTONS -->\r\n <div nz-col [nzSpan]=\"24\">\r\n <nz-divider></nz-divider>\r\n <div nz-flex [nzGap]=\"'small'\">\r\n <button nz-button nzType=\"primary\" type=\"button\" (click)=\"save()\" [nzLoading]=\"isSaving\">\r\n {{ TranslateKey.SAVE | translate }}\r\n </button>\r\n <button\r\n *ngIf=\"item.App_MailTemplate_Id\"\r\n nz-button\r\n nzType=\"primary\"\r\n nzDanger\r\n nz-popconfirm\r\n [nzPopconfirmTitle]=\"TranslateKey.CONFIRM_DELETE | translate\"\r\n nzPopconfirmPlacement=\"top\"\r\n (nzOnConfirm)=\"delete()\"\r\n [disabled]=\"isSaving\"\r\n >\r\n {{ TranslateKey.DELETE | translate }}\r\n </button>\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"cancel()\" [disabled]=\"isSaving\">\r\n {{ \"BACK\" | translate }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n\r\n <!-- Preview Email Modal -->\r\n <nz-modal\r\n [(nzVisible)]=\"isPreviewModalVisible\"\r\n [nzTitle]=\"'Preview: ' + (form.value.Name || 'Email Template')\"\r\n [nzWidth]=\"900\"\r\n (nzOnCancel)=\"closePreviewModal()\"\r\n [nzFooter]=\"previewFooter\"\r\n [nzBodyStyle]=\"{ maxHeight: '70vh', overflow: 'auto' }\"\r\n >\r\n <ng-container *nzModalContent>\r\n <!-- Info Alert -->\r\n <nz-alert nzType=\"info\" nzMessage=\"L\u01B0u \u00FD: \u0110\u00E2y l\u00E0 b\u1EA3n xem tr\u01B0\u1EDBc\" nzShowIcon style=\"margin-top: 16px\"></nz-alert>\r\n <!-- Email Headers -->\r\n <div style=\"margin-bottom: 16px; padding: 12px; background: #f5f5f5; border-radius: 4px; font-size: 13px\">\r\n <div style=\"margin-bottom: 4px\">\r\n <strong style=\"display: inline-block; width: 60px\">From:</strong>\r\n <span>{{ previewMailFrom }}</span>\r\n </div>\r\n <div style=\"margin-bottom: 4px\">\r\n <strong style=\"display: inline-block; width: 60px\">To:</strong>\r\n <span>{{ previewMailTo }}</span>\r\n </div>\r\n <div *ngIf=\"previewMailCC\" style=\"margin-bottom: 4px\">\r\n <strong style=\"display: inline-block; width: 60px\">CC:</strong>\r\n <span>{{ previewMailCC }}</span>\r\n </div>\r\n <div *ngIf=\"previewMailBCC\" style=\"margin-bottom: 4px\">\r\n <strong style=\"display: inline-block; width: 60px\">BCC:</strong>\r\n <span>{{ previewMailBCC }}</span>\r\n </div>\r\n </div>\r\n\r\n <nz-divider [nzText]=\"'Email Content'\" nzOrientation=\"left\"></nz-divider>\r\n\r\n <!-- Email Content Preview -->\r\n <div\r\n style=\"\r\n border: 1px solid #d9d9d9;\r\n padding: 24px;\r\n background: white;\r\n border-radius: 4px;\r\n font-family: Arial, sans-serif;\r\n line-height: 1.6;\r\n min-height: 200px;\r\n \"\r\n [innerHTML]=\"previewHtmlContent\"\r\n ></div>\r\n </ng-container>\r\n <!-- Modal Footer -->\r\n <ng-template #previewFooter>\r\n <button nz-button nzType=\"default\" (click)=\"closePreviewModal()\">\u0110\u00F3ng</button>\r\n </ng-template>\r\n </nz-modal>\r\n</nz-spin>\r\n\r\n<ngx-monaco-editor [options]=\"editorOptions\"></ngx-monaco-editor>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "directive", type: i5.NzFormDirective, selector: "[nz-form]", inputs: ["nzLayout", "nzNoColon", "nzAutoTips", "nzDisableAutoTips", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzForm"] }, { kind: "component", type: i5.NzFormItemComponent, selector: "nz-form-item", exportAs: ["nzFormItem"] }, { kind: "component", type: i5.NzFormLabelComponent, selector: "nz-form-label", inputs: ["nzFor", "nzRequired", "nzNoColon", "nzTooltipTitle", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzFormLabel"] }, { kind: "component", type: i5.NzFormControlComponent, selector: "nz-form-control", inputs: ["nzSuccessTip", "nzWarningTip", "nzErrorTip", "nzValidatingTip", "nzExtra", "nzAutoTips", "nzDisableAutoTips", "nzHasFeedback", "nzValidateStatus"], exportAs: ["nzFormControl"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i5$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$2.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i4$1.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "ngmodule", type: NzCheckboxModule }, { kind: "component", type: i3$1.NzCheckboxComponent, selector: "[nz-checkbox]", inputs: ["nzValue", "nzAutoFocus", "nzDisabled", "nzIndeterminate", "nzChecked", "nzId", "nzName"], outputs: ["nzCheckedChange"], exportAs: ["nzCheckbox"] }, { kind: "ngmodule", type: NzSpinModule }, { kind: "component", type: i2$1.NzSpinComponent, selector: "nz-spin", inputs: ["nzIndicator", "nzSize", "nzTip", "nzDelay", "nzSimple", "nzSpinning"], exportAs: ["nzSpin"] }, { kind: "ngmodule", type: NzPopconfirmModule }, { kind: "directive", type: i12.NzPopconfirmDirective, selector: "[nz-popconfirm]", inputs: ["nzPopconfirmArrowPointAtCenter", "nzPopconfirmTitle", "nzPopconfirmTitleContext", "nz-popconfirm", "nzPopconfirmTrigger", "nzPopconfirmPlacement", "nzPopconfirmOrigin", "nzPopconfirmMouseEnterDelay", "nzPopconfirmMouseLeaveDelay", "nzPopconfirmOverlayClassName", "nzPopconfirmOverlayStyle", "nzPopconfirmVisible", "nzOkText", "nzOkType", "nzOkDisabled", "nzOkDanger", "nzCancelText", "nzBeforeConfirm", "nzIcon", "nzCondition", "nzPopconfirmShowArrow", "nzPopconfirmBackdrop", "nzAutofocus"], outputs: ["nzPopconfirmVisibleChange", "nzOnCancel", "nzOnConfirm"], exportAs: ["nzPopconfirm"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i6$1.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "directive", type: i6$1.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$1.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$1.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$1.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$1.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "directive", type: i6$1.NzCellAlignDirective, selector: "th[nzAlign],td[nzAlign]", inputs: ["nzAlign"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzDividerModule }, { kind: "component", type: i8$1.NzDividerComponent, selector: "nz-divider", inputs: ["nzText", "nzType", "nzOrientation", "nzVariant", "nzDashed", "nzPlain"], exportAs: ["nzDivider"] }, { kind: "ngmodule", type: AngularEditorModule }, { kind: "component", type: i16$2.AngularEditorComponent, selector: "angular-editor", inputs: ["id", "config", "placeholder", "tabIndex"], outputs: ["html", "viewMode", "blur", "focus"] }, { kind: "ngmodule", type: NzEmptyModule }, { kind: "component", type: i17.NzEmptyComponent, selector: "nz-empty", inputs: ["nzNotFoundImage", "nzNotFoundContent", "nzNotFoundFooter"], exportAs: ["nzEmpty"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "ngmodule", type: NzAlertModule }, { kind: "component", type: i16.NzAlertComponent, selector: "nz-alert", inputs: ["nzAction", "nzCloseText", "nzIconType", "nzMessage", "nzDescription", "nzType", "nzCloseable", "nzShowIcon", "nzBanner", "nzNoAnimation", "nzIcon"], outputs: ["nzOnClose"], exportAs: ["nzAlert"] }, { kind: "ngmodule", type: NzModalModule }, { kind: "component", type: i15.NzModalComponent, selector: "nz-modal", inputs: ["nzMask", "nzMaskClosable", "nzCloseOnNavigation", "nzVisible", "nzClosable", "nzOkLoading", "nzOkDisabled", "nzCancelDisabled", "nzCancelLoading", "nzKeyboard", "nzNoAnimation", "nzCentered", "nzDraggable", "nzContent", "nzFooter", "nzZIndex", "nzWidth", "nzWrapClassName", "nzClassName", "nzStyle", "nzTitle", "nzCloseIcon", "nzMaskStyle", "nzBodyStyle", "nzOkText", "nzCancelText", "nzOkType", "nzOkDanger", "nzIconType", "nzModalType", "nzAutofocus", "nzOnOk", "nzOnCancel"], outputs: ["nzOnOk", "nzOnCancel", "nzAfterOpen", "nzAfterClose", "nzVisibleChange"], exportAs: ["nzModal"] }, { kind: "directive", type: i15.NzModalContentDirective, selector: "[nzModalContent]", exportAs: ["nzModalContent"] }, { kind: "component", type: ExtendInput, selector: "extend-input", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "inputClass", "labelSpan", "labelFlex", "inputFlex", "showClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "autofocus", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "displayField", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "onclickClearIcon", "onenter"] }, { kind: "ngmodule", type: MonacoEditorModule }, { kind: "component", type: i21.MonacoEditorComponent, selector: "ngx-monaco-editor", inputs: ["options", "uri"], outputs: ["init"] }] });
9592
- }
9593
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: MailTemplateDetailComponent, decorators: [{
9594
- type: Component,
9595
- args: [{ selector: 'app-mail-template-detail', standalone: true, imports: [
9596
- CommonModule,
9597
- ReactiveFormsModule,
9598
- TranslateModule,
9599
- NzFormModule,
9600
- NzInputModule,
9601
- NzButtonModule,
9602
- NzGridModule,
9603
- NzCheckboxModule,
9604
- NzSpinModule,
9605
- NzPopconfirmModule,
9606
- NzTableModule,
9607
- NzIconModule,
9608
- NzDividerModule,
9609
- AngularEditorModule,
9610
- NzEmptyModule,
9611
- NzFlexModule,
9612
- NzAlertModule,
9613
- NzModalModule,
9614
- ExtendInput,
9615
- MonacoEditorModule,
9616
- ], template: "<nz-spin [nzSpinning]=\"isLoading\" nzTip=\"\u0110ang t\u1EA3i...\">\r\n <form nz-form [formGroup]=\"form\">\r\n <div nz-row [nzGutter]=\"['16', '16']\">\r\n <!-- C\u1ED8T TR\u00C1I: FORM TEMPLATE -->\r\n <div nz-col [nzMd]=\"12\" [nzSm]=\"24\">\r\n <!-- Code -->\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"4\" nzFor=\"code\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired> M\u00E3 </nz-form-label>\r\n <nz-form-control [nzSpan]=\"20\" [nzErrorTip]=\"'Vui l\u00F2ng nh\u1EADp M\u00E3'\">\r\n <input nz-input formControlName=\"Code\" id=\"code\" placeholder=\"V\u00ED d\u1EE5: WELCOME_EMAIL\" maxlength=\"50\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <!-- Name -->\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"4\" nzFor=\"name\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired> T\u00EAn </nz-form-label>\r\n <nz-form-control [nzSpan]=\"20\" [nzErrorTip]=\"'Vui l\u00F2ng nh\u1EADp T\u00EAn'\">\r\n <input\r\n nz-input\r\n formControlName=\"Name\"\r\n id=\"name\"\r\n placeholder=\"V\u00ED d\u1EE5: Email ch\u00E0o m\u1EEBng kh\u00E1ch h\u00E0ng\"\r\n maxlength=\"250\"\r\n />\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <extend-input\r\n [labelSpan]=\"4\"\r\n [label]=\"'Subject'\"\r\n [required]=\"true\"\r\n [formData]=\"form\"\r\n [controlName]=\"''\"\r\n ></extend-input>\r\n\r\n <!-- MailFrom -->\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"4\" nzFor=\"mailfrom\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n From\r\n </nz-form-label>\r\n <nz-form-control [nzSpan]=\"20\" [nzErrorTip]=\"'Vui l\u00F2ng nh\u1EADp From'\">\r\n <input\r\n nz-input\r\n formControlName=\"MailFrom\"\r\n id=\"mailfrom\"\r\n placeholder=\"V\u00ED d\u1EE5: noreply@company.com\"\r\n maxlength=\"250\"\r\n />\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <!-- MailTo -->\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"4\" nzFor=\"mailto\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n To\r\n </nz-form-label>\r\n <nz-form-control [nzSpan]=\"20\" [nzErrorTip]=\"'Vui l\u00F2ng nh\u1EADp To'\">\r\n <input\r\n nz-input\r\n formControlName=\"MailTo\"\r\n id=\"mailto\"\r\n placeholder=\"V\u00ED d\u1EE5: customer@example.com ho\u1EB7c {{ '{' }}CustomerEmail{{ '}' }}\"\r\n maxlength=\"1000\"\r\n />\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <!-- MailCC -->\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"4\" nzFor=\"mailcc\" nzLabelAlign=\"left\" nzNoColon=\"true\"> CC </nz-form-label>\r\n <nz-form-control [nzSpan]=\"20\">\r\n <input\r\n nz-input\r\n formControlName=\"MailCC\"\r\n id=\"mailcc\"\r\n placeholder=\"Ph\u00E2n c\u00E1ch b\u1EB1ng d\u1EA5u ph\u1EA9y n\u1EBFu nhi\u1EC1u\"\r\n maxlength=\"1000\"\r\n />\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <!-- MailBCC -->\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"4\" nzFor=\"mailbcc\" nzLabelAlign=\"left\" nzNoColon=\"true\"> BCC </nz-form-label>\r\n <nz-form-control [nzSpan]=\"20\">\r\n <input\r\n nz-input\r\n formControlName=\"MailBCC\"\r\n id=\"mailbcc\"\r\n placeholder=\"Ph\u00E2n c\u00E1ch b\u1EB1ng d\u1EA5u ph\u1EA9y n\u1EBFu nhi\u1EC1u\"\r\n maxlength=\"1000\"\r\n />\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <!-- MailContent - Angular Editor -->\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"4\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n N\u1ED9i dung\r\n <button\r\n nz-button\r\n nzType=\"link\"\r\n nzSize=\"small\"\r\n (click)=\"previewEmail()\"\r\n style=\"margin-left: 8px\"\r\n type=\"button\"\r\n title=\"Xem tr\u01B0\u1EDBc email\"\r\n >\r\n <span nz-icon nzType=\"eye\"></span>\r\n </button>\r\n </nz-form-label>\r\n <nz-form-control [nzSpan]=\"20\" [nzErrorTip]=\"'Vui l\u00F2ng nh\u1EADp N\u1ED9i dung'\">\r\n <angular-editor id=\"mailcontent\" formControlName=\"MailContent\" [config]=\"editorConfig\"></angular-editor>\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <!-- Info about placeholders -->\r\n <div nz-row>\r\n <div nz-col [nzSpan]=\"4\"></div>\r\n <div nz-col [nzSpan]=\"20\">\r\n <div\r\n style=\"\r\n background: #e6f7ff;\r\n border-left: 3px solid #1890ff;\r\n padding: 12px 16px;\r\n margin-bottom: 16px;\r\n border-radius: 2px;\r\n font-size: 13px;\r\n \"\r\n >\r\n <div style=\"font-weight: 600; margin-bottom: 4px; color: #1890ff\">\uD83D\uDCA1 H\u01B0\u1EDBng d\u1EABn Placeholders</div>\r\n <div>\r\n S\u1EED d\u1EE5ng <code>{{ \"{\" }}TenTruong{{ \"}\" }}</code> \u0111\u1EC3 ch\u00E8n d\u1EEF li\u1EC7u \u0111\u1ED9ng. V\u00ED d\u1EE5:\r\n <code>{{ \"{\" }}UserName{{ \"}\" }}</code\r\n >, <code>{{ \"{\" }}OrderCode{{ \"}\" }}</code>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- SPN_Data -->\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"4\" nzFor=\"spndata\" nzLabelAlign=\"left\" nzNoColon=\"true\"> SPN Data </nz-form-label>\r\n <nz-form-control [nzSpan]=\"20\">\r\n <input\r\n nz-input\r\n formControlName=\"SPN_Data\"\r\n id=\"spndata\"\r\n placeholder=\"V\u00ED d\u1EE5: Rpt_Revenue_Daily\"\r\n maxlength=\"50\"\r\n />\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <!-- IsActive -->\r\n <div nz-row>\r\n <div nz-col [nzSpan]=\"4\"></div>\r\n <div nz-col [nzSpan]=\"20\">\r\n <label nz-checkbox formControlName=\"IsActive\">Active</label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- C\u1ED8T PH\u1EA2I: QU\u1EA2N L\u00DD MAIL SEND SETTINGS -->\r\n <div nz-col [nzMd]=\"12\" [nzSm]=\"24\">\r\n <div style=\"border: 1px solid #d9d9d9; border-radius: 4px; padding: 16px; height: 100%\">\r\n <h4 style=\"margin-top: 0; margin-bottom: 16px\">\r\n <span nz-icon nzType=\"clock-circle\" style=\"margin-right: 8px\"></span>\r\n Qu\u1EA3n l\u00FD L\u1ECBch g\u1EEDi\r\n </h4>\r\n\r\n <!-- Hi\u1EC3n th\u1ECB khi \u0110ANG T\u1EA0O M\u1EDAI (ch\u01B0a c\u00F3 App_MailTemplate_Id) -->\r\n <nz-alert\r\n *ngIf=\"!item.App_MailTemplate_Id\"\r\n nzType=\"info\"\r\n nzMessage=\"Vui l\u00F2ng l\u01B0u Template tr\u01B0\u1EDBc\"\r\n nzDescription=\"B\u1EA1n c\u1EA7n l\u01B0u Template tr\u01B0\u1EDBc, sau \u0111\u00F3 m\u1EDBi c\u00F3 th\u1EC3 th\u00EAm l\u1ECBch g\u1EEDi.\"\r\n nzShowIcon\r\n ></nz-alert>\r\n\r\n <!-- Hi\u1EC3n th\u1ECB khi \u0110ANG C\u1EACP NH\u1EACT (\u0111\u00E3 c\u00F3 App_MailTemplate_Id) -->\r\n <div *ngIf=\"item.App_MailTemplate_Id\">\r\n <div nz-flex [nzJustify]=\"'space-between'\" [nzAlign]=\"'center'\" style=\"margin-bottom: 12px\">\r\n <span style=\"font-weight: 500\">L\u1ECBch g\u1EEDi ({{ lstSettings.length }})</span>\r\n <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"addSetting()\">\r\n <span nz-icon nzType=\"plus\"></span>\r\n Th\u00EAm\r\n </button>\r\n </div>\r\n\r\n <div style=\"max-height: 400px; overflow-y: auto\">\r\n <nz-table\r\n #settingsTable\r\n [nzData]=\"lstSettings\"\r\n [nzSize]=\"'small'\"\r\n [nzShowPagination]=\"lstSettings.length > 20\"\r\n [nzPageSize]=\"20\"\r\n [nzLoading]=\"isLoadingSettings\"\r\n >\r\n <thead>\r\n <tr>\r\n <th nzWidth=\"40px\">STT</th>\r\n <th>Setting</th>\r\n <th nzWidth=\"50px\" nzAlign=\"center\"></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let setting of settingsTable.data; let i = index\">\r\n <td>{{ i + 1 }}</td>\r\n <td>\r\n <div style=\"font-weight: 500\">{{ setting.Name }}</div>\r\n <div style=\"font-size: 12px; color: #888\">\r\n <code style=\"font-size: 11px\">{{ setting.CronTime }}</code>\r\n </div>\r\n <div style=\"font-size: 11px; color: #aaa\">\r\n <span\r\n nz-icon\r\n [nzType]=\"setting.IsActive ? 'check-circle' : 'close-circle'\"\r\n [style.color]=\"setting.IsActive ? '#52c41a' : '#ff4d4f'\"\r\n ></span>\r\n {{ setting.IsActive ? \"Active\" : \"Inactive\" }}\r\n </div>\r\n </td>\r\n <td nzAlign=\"center\">\r\n <button\r\n nz-button\r\n nzType=\"link\"\r\n nzSize=\"small\"\r\n (click)=\"editSetting(setting)\"\r\n style=\"padding: 0; margin-right: 4px\"\r\n >\r\n <span nz-icon nzType=\"edit\" nzTheme=\"outline\"></span>\r\n </button>\r\n <button\r\n nz-button\r\n nzType=\"link\"\r\n nzDanger\r\n nzSize=\"small\"\r\n nz-popconfirm\r\n nzPopconfirmTitle=\"X\u00F3a l\u1ECBch g\u1EEDi n\u00E0y?\"\r\n (nzOnConfirm)=\"deleteSetting(setting)\"\r\n >\r\n <span nz-icon nzType=\"delete\" nzTheme=\"outline\"></span>\r\n </button>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </nz-table>\r\n\r\n <nz-empty\r\n *ngIf=\"lstSettings.length === 0 && !isLoadingSettings\"\r\n nzNotFoundContent=\"Ch\u01B0a c\u00F3 l\u1ECBch g\u1EEDi\"\r\n [nzNotFoundImage]=\"'simple'\"\r\n ></nz-empty>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- BUTTONS -->\r\n <div nz-col [nzSpan]=\"24\">\r\n <nz-divider></nz-divider>\r\n <div nz-flex [nzGap]=\"'small'\">\r\n <button nz-button nzType=\"primary\" type=\"button\" (click)=\"save()\" [nzLoading]=\"isSaving\">\r\n {{ TranslateKey.SAVE | translate }}\r\n </button>\r\n <button\r\n *ngIf=\"item.App_MailTemplate_Id\"\r\n nz-button\r\n nzType=\"primary\"\r\n nzDanger\r\n nz-popconfirm\r\n [nzPopconfirmTitle]=\"TranslateKey.CONFIRM_DELETE | translate\"\r\n nzPopconfirmPlacement=\"top\"\r\n (nzOnConfirm)=\"delete()\"\r\n [disabled]=\"isSaving\"\r\n >\r\n {{ TranslateKey.DELETE | translate }}\r\n </button>\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"cancel()\" [disabled]=\"isSaving\">\r\n {{ \"BACK\" | translate }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n\r\n <!-- Preview Email Modal -->\r\n <nz-modal\r\n [(nzVisible)]=\"isPreviewModalVisible\"\r\n [nzTitle]=\"'Preview: ' + (form.value.Name || 'Email Template')\"\r\n [nzWidth]=\"900\"\r\n (nzOnCancel)=\"closePreviewModal()\"\r\n [nzFooter]=\"previewFooter\"\r\n [nzBodyStyle]=\"{ maxHeight: '70vh', overflow: 'auto' }\"\r\n >\r\n <ng-container *nzModalContent>\r\n <!-- Info Alert -->\r\n <nz-alert nzType=\"info\" nzMessage=\"L\u01B0u \u00FD: \u0110\u00E2y l\u00E0 b\u1EA3n xem tr\u01B0\u1EDBc\" nzShowIcon style=\"margin-top: 16px\"></nz-alert>\r\n <!-- Email Headers -->\r\n <div style=\"margin-bottom: 16px; padding: 12px; background: #f5f5f5; border-radius: 4px; font-size: 13px\">\r\n <div style=\"margin-bottom: 4px\">\r\n <strong style=\"display: inline-block; width: 60px\">From:</strong>\r\n <span>{{ previewMailFrom }}</span>\r\n </div>\r\n <div style=\"margin-bottom: 4px\">\r\n <strong style=\"display: inline-block; width: 60px\">To:</strong>\r\n <span>{{ previewMailTo }}</span>\r\n </div>\r\n <div *ngIf=\"previewMailCC\" style=\"margin-bottom: 4px\">\r\n <strong style=\"display: inline-block; width: 60px\">CC:</strong>\r\n <span>{{ previewMailCC }}</span>\r\n </div>\r\n <div *ngIf=\"previewMailBCC\" style=\"margin-bottom: 4px\">\r\n <strong style=\"display: inline-block; width: 60px\">BCC:</strong>\r\n <span>{{ previewMailBCC }}</span>\r\n </div>\r\n </div>\r\n\r\n <nz-divider [nzText]=\"'Email Content'\" nzOrientation=\"left\"></nz-divider>\r\n\r\n <!-- Email Content Preview -->\r\n <div\r\n style=\"\r\n border: 1px solid #d9d9d9;\r\n padding: 24px;\r\n background: white;\r\n border-radius: 4px;\r\n font-family: Arial, sans-serif;\r\n line-height: 1.6;\r\n min-height: 200px;\r\n \"\r\n [innerHTML]=\"previewHtmlContent\"\r\n ></div>\r\n </ng-container>\r\n <!-- Modal Footer -->\r\n <ng-template #previewFooter>\r\n <button nz-button nzType=\"default\" (click)=\"closePreviewModal()\">\u0110\u00F3ng</button>\r\n </ng-template>\r\n </nz-modal>\r\n</nz-spin>\r\n\r\n<ngx-monaco-editor [options]=\"editorOptions\"></ngx-monaco-editor>\r\n" }]
9617
- }] });
9618
-
9619
- class MailSendSettingDetailComponent extends BaseComponent {
9620
- settingService = inject(MailSendSettingService);
9621
- templateService = inject(App_MailTemplateService);
9622
- fb = inject(FormBuilder);
9623
- form;
9624
- item = new App_MailSendSetting();
9625
- isNew = true;
9626
- // Dropdown data
9627
- lstMailTemplate = [];
9628
- ngOnInit() {
9629
- this.initForm();
9630
- this.loadMailTemplates();
9631
- const id = this.getUrlParam('id');
9632
- if (id && id !== 'new') {
9633
- this.isNew = false;
9634
- this.loadData(id);
9635
- }
9636
- else {
9637
- // Check if templateId in query params (when create from template detail)
9638
- const templateId = this.getUrlQueryParam('templateId');
9639
- if (templateId) {
9640
- this.form.patchValue({ App_MailTemplate_Id: templateId });
9641
- }
9642
- }
9643
- setTimeout(() => {
9644
- Breadcrumb.lstBreadcrumb = [
9645
- {
9646
- Name: 'Mail Management',
9647
- Click: () => this.goto('/admin/mail-template'),
9648
- },
9649
- {
9650
- Name: this.isNew ? 'Thêm mới Mail Send Setting' : 'Chỉnh sửa Mail Send Setting',
9651
- Click: () => { },
9652
- },
9653
- ];
9654
- }, 0);
9655
- }
9656
- ngOnDestroy() {
9657
- Breadcrumb.lstBreadcrumb = [];
9658
- }
9659
- initForm() {
9660
- this.form = this.fb.group({
9661
- App_MailSendSetting_Id: [null],
9662
- App_MailTemplate_Id: [null, [Validators.required]],
9663
- Code: ['', [Validators.required, Validators.maxLength(50)]],
9664
- Name: ['', [Validators.required, Validators.maxLength(250)]],
9665
- SendTime: [null],
9666
- CronTime: [''],
9667
- IsActive: [true],
9668
- });
9669
- }
9670
- loadMailTemplates() {
9671
- this.templateService.getAll().then((res) => {
9672
- if (res.Data) {
9673
- this.lstMailTemplate = res.Data;
9674
- }
9675
- }, (err) => this.handleError(err));
9676
- }
9677
- loadData(id) {
9678
- this.isLoading = true;
9679
- this.settingService
9680
- .getById(id)
9681
- .then((res) => {
9682
- if (res.Data) {
9683
- this.item = res.Data;
9684
- this.form.patchValue({
9685
- App_MailSendSetting_Id: this.item.App_MailSendSetting_Id,
9686
- App_MailTemplate_Id: this.item.App_MailTemplate_Id,
9687
- Code: this.item.Code,
9688
- Name: this.item.Name,
9689
- SendTime: this.item.SendTime ? new Date(this.item.SendTime) : null,
9690
- CronTime: this.item.CronTime,
9691
- IsActive: this.item.IsActive,
9692
- });
9693
- }
9694
- }, (err) => this.handleError(err))
9695
- .finally(() => {
9696
- this.isLoading = false;
9697
- });
9698
- }
9699
- async save() {
9700
- if (this.form.invalid) {
9701
- this.touchControls(this.form);
9702
- this.notiService.warning('Vui lòng nhập đầy đủ thông tin bắt buộc');
9703
- return;
9704
- }
9705
- this.isSaving = true;
9706
- const formValue = this.form.value;
9707
- const data = {
9708
- ...this.item,
9709
- ...formValue,
9710
- };
9711
- try {
9712
- await this.settingService.addOrEdit(data);
9713
- this.notiService.success(this.isNew ? 'Thêm mới thành công!' : 'Cập nhật thành công!');
9714
- this.goback();
9715
- }
9716
- catch (err) {
9717
- this.handleError(err);
9718
- }
9719
- finally {
9720
- this.isSaving = false;
9721
- }
9722
- }
9723
- async delete() {
9724
- if (!this.item.App_MailSendSetting_Id)
9725
- return;
9726
- try {
9727
- await this.settingService.delete(this.item.App_MailSendSetting_Id);
9728
- this.notiService.success(this.translate.instant(this.TranslateKey.DELETE_SUCCESS));
9729
- this.router.navigate(['/admin/mail-template'], {
9730
- queryParams: { tab: 1 },
9731
- });
9732
- }
9733
- catch (err) {
9734
- this.handleError(err);
9735
- }
9736
- }
9737
- cancel() {
9738
- this.goback();
9739
- }
9740
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: MailSendSettingDetailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
9741
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: MailSendSettingDetailComponent, isStandalone: true, selector: "app-mail-send-setting-detail", usesInheritance: true, ngImport: i0, template: "<nz-spin [nzSpinning]=\"isLoading\" nzTip=\"\u0110ang t\u1EA3i...\">\r\n <form nz-form [formGroup]=\"form\">\r\n <div nz-row [nzGutter]=\"['16', '16']\">\r\n <!-- Form Column -->\r\n <div nz-col [nzSpan]=\"12\">\r\n <!-- Template Select -->\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"4\" nzFor=\"template\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n Mail Template\r\n </nz-form-label>\r\n <nz-form-control [nzSpan]=\"20\" [nzErrorTip]=\"'Vui l\u00F2ng ch\u1ECDn Mail Template'\">\r\n <nz-select\r\n formControlName=\"App_MailTemplate_Id\"\r\n nzId=\"template\"\r\n nzPlaceHolder=\"-- Ch\u1ECDn Mail Template --\"\r\n nzShowSearch\r\n >\r\n <nz-option\r\n *ngFor=\"let template of lstMailTemplate\"\r\n [nzValue]=\"template.App_MailTemplate_Id\"\r\n [nzLabel]=\"template.Code + ' - ' + template.Name\"\r\n ></nz-option>\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <!-- Code -->\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"4\" nzFor=\"code\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n M\u00E3\r\n </nz-form-label>\r\n <nz-form-control [nzSpan]=\"20\" [nzErrorTip]=\"'Vui l\u00F2ng nh\u1EADp M\u00E3'\">\r\n <input \r\n nz-input \r\n formControlName=\"Code\" \r\n id=\"code\"\r\n placeholder=\"V\u00ED d\u1EE5: DAILY_8AM\" \r\n maxlength=\"50\" \r\n />\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <!-- Name -->\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"4\" nzFor=\"name\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n T\u00EAn\r\n </nz-form-label>\r\n <nz-form-control [nzSpan]=\"20\" [nzErrorTip]=\"'Vui l\u00F2ng nh\u1EADp T\u00EAn'\">\r\n <input \r\n nz-input \r\n formControlName=\"Name\" \r\n id=\"name\"\r\n placeholder=\"V\u00ED d\u1EE5: G\u1EEDi b\u00E1o c\u00E1o l\u00FAc 8h s\u00E1ng\" \r\n maxlength=\"250\" \r\n />\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <!-- CronTime -->\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"4\" nzFor=\"crontime\" nzLabelAlign=\"left\" nzNoColon=\"true\">\r\n Cron Time\r\n </nz-form-label>\r\n <nz-form-control [nzSpan]=\"20\" [nzErrorTip]=\"'Vui l\u00F2ng nh\u1EADp Cron Time'\">\r\n <input \r\n nz-input \r\n formControlName=\"CronTime\" \r\n id=\"crontime\"\r\n placeholder=\"V\u00ED d\u1EE5: 0 8 * * *\" \r\n maxlength=\"50\" \r\n />\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <!-- Cron Time Help -->\r\n <div nz-row>\r\n <div nz-col [nzSpan]=\"4\"></div>\r\n <div nz-col [nzSpan]=\"20\">\r\n <div style=\"\r\n background: #e6f7ff; \r\n border: 1px solid #91d5ff; \r\n border-radius: 4px; \r\n padding: 12px; \r\n margin-bottom: 16px;\r\n font-size: 13px;\r\n \">\r\n <div style=\"font-weight: 600; margin-bottom: 8px;\">\r\n \u2139\uFE0F H\u01B0\u1EDBng d\u1EABn Cron Time\r\n </div>\r\n <ul style=\"margin: 0; padding-left: 20px;\">\r\n <li><code>0 8 * * *</code> - 8h s\u00E1ng h\u00E0ng ng\u00E0y</li>\r\n <li><code>0 17 * * *</code> - 5h chi\u1EC1u h\u00E0ng ng\u00E0y</li>\r\n <li><code>0 8 * * 1</code> - 8h s\u00E1ng Th\u1EE9 2</li>\r\n <li><code>0 9 1 * *</code> - 9h s\u00E1ng ng\u00E0y 1 h\u00E0ng th\u00E1ng</li>\r\n <li><code>*/30 * * * *</code> - M\u1ED7i 30 ph\u00FAt</li>\r\n </ul>\r\n <small style=\"color: #666;\">Format: <code>ph\u00FAt gi\u1EDD ng\u00E0y th\u00E1ng th\u1EE9</code></small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- SendTime -->\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"4\" nzFor=\"sendtime\" nzLabelAlign=\"left\" nzNoColon=\"true\">\r\n Th\u1EDDi gian g\u1EEDi\r\n </nz-form-label>\r\n <nz-form-control [nzSpan]=\"20\">\r\n <nz-date-picker\r\n formControlName=\"SendTime\"\r\n nzId=\"sendtime\"\r\n nzShowTime\r\n nzFormat=\"dd/MM/yyyy HH:mm:ss\"\r\n nzPlaceHolder=\"Ch\u1ECDn th\u1EDDi gian g\u1EEDi\"\r\n style=\"width: 100%;\"\r\n ></nz-date-picker>\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <!-- IsActive -->\r\n <div nz-row>\r\n <div nz-col [nzSpan]=\"4\"></div>\r\n <div nz-col [nzSpan]=\"20\">\r\n <label nz-checkbox formControlName=\"IsActive\">Hi\u1EC7u l\u1EF1c</label>\r\n </div>\r\n </div>\r\n\r\n <!-- Buttons -->\r\n <div nz-row style=\"margin-top: 24px;\">\r\n <div nz-col [nzSpan]=\"4\"></div>\r\n <div nz-col [nzSpan]=\"20\">\r\n <nz-divider></nz-divider>\r\n <div nz-flex [nzGap]=\"'small'\">\r\n <button nz-button nzType=\"primary\" type=\"button\" (click)=\"save()\" [nzLoading]=\"isSaving\">\r\n {{ TranslateKey.SAVE | translate }}\r\n </button>\r\n <button \r\n *ngIf=\"!isNew\" \r\n nz-button \r\n nzType=\"primary\" \r\n type=\"button\" \r\n nzDanger \r\n nz-popconfirm\r\n [nzPopconfirmTitle]=\"TranslateKey.CONFIRM_DELETE | translate\"\r\n nzPopconfirmPlacement=\"top\"\r\n (nzOnConfirm)=\"delete()\"\r\n nzOkDanger\r\n [disabled]=\"isLoading || isSaving\"\r\n >\r\n {{ TranslateKey.DELETE | translate }}\r\n </button>\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"cancel()\" [disabled]=\"isLoading || isSaving\">\r\n {{ TranslateKey.BACK | translate }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n</nz-spin>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "directive", type: i5.NzFormDirective, selector: "[nz-form]", inputs: ["nzLayout", "nzNoColon", "nzAutoTips", "nzDisableAutoTips", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzForm"] }, { kind: "component", type: i5.NzFormItemComponent, selector: "nz-form-item", exportAs: ["nzFormItem"] }, { kind: "component", type: i5.NzFormLabelComponent, selector: "nz-form-label", inputs: ["nzFor", "nzRequired", "nzNoColon", "nzTooltipTitle", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzFormLabel"] }, { kind: "component", type: i5.NzFormControlComponent, selector: "nz-form-control", inputs: ["nzSuccessTip", "nzWarningTip", "nzErrorTip", "nzValidatingTip", "nzExtra", "nzAutoTips", "nzDisableAutoTips", "nzHasFeedback", "nzValidateStatus"], exportAs: ["nzFormControl"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i5$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$2.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i4$1.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "ngmodule", type: NzCheckboxModule }, { kind: "component", type: i3$1.NzCheckboxComponent, selector: "[nz-checkbox]", inputs: ["nzValue", "nzAutoFocus", "nzDisabled", "nzIndeterminate", "nzChecked", "nzId", "nzName"], outputs: ["nzCheckedChange"], exportAs: ["nzCheckbox"] }, { kind: "ngmodule", type: NzSelectModule }, { kind: "component", type: i6.NzOptionComponent, selector: "nz-option", inputs: ["nzTitle", "nzLabel", "nzValue", "nzKey", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }, { kind: "component", type: i6.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzBorderless", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus"], exportAs: ["nzSelect"] }, { kind: "ngmodule", type: NzSpinModule }, { kind: "component", type: i2$1.NzSpinComponent, selector: "nz-spin", inputs: ["nzIndicator", "nzSize", "nzTip", "nzDelay", "nzSimple", "nzSpinning"], exportAs: ["nzSpin"] }, { kind: "ngmodule", type: NzPopconfirmModule }, { kind: "directive", type: i12.NzPopconfirmDirective, selector: "[nz-popconfirm]", inputs: ["nzPopconfirmArrowPointAtCenter", "nzPopconfirmTitle", "nzPopconfirmTitleContext", "nz-popconfirm", "nzPopconfirmTrigger", "nzPopconfirmPlacement", "nzPopconfirmOrigin", "nzPopconfirmMouseEnterDelay", "nzPopconfirmMouseLeaveDelay", "nzPopconfirmOverlayClassName", "nzPopconfirmOverlayStyle", "nzPopconfirmVisible", "nzOkText", "nzOkType", "nzOkDisabled", "nzOkDanger", "nzCancelText", "nzBeforeConfirm", "nzIcon", "nzCondition", "nzPopconfirmShowArrow", "nzPopconfirmBackdrop", "nzAutofocus"], outputs: ["nzPopconfirmVisibleChange", "nzOnCancel", "nzOnConfirm"], exportAs: ["nzPopconfirm"] }, { kind: "ngmodule", type: NzAlertModule }, { kind: "ngmodule", type: NzDatePickerModule }, { kind: "component", type: i5$2.NzDatePickerComponent, selector: "nz-date-picker,nz-week-picker,nz-month-picker,nz-quarter-picker,nz-year-picker,nz-range-picker", inputs: ["nzAllowClear", "nzAutoFocus", "nzDisabled", "nzBorderless", "nzInputReadOnly", "nzInline", "nzOpen", "nzDisabledDate", "nzLocale", "nzPlaceHolder", "nzPopupStyle", "nzDropdownClassName", "nzSize", "nzStatus", "nzFormat", "nzDateRender", "nzDisabledTime", "nzRenderExtraFooter", "nzShowToday", "nzMode", "nzShowNow", "nzRanges", "nzDefaultPickerValue", "nzSeparator", "nzSuffixIcon", "nzBackdrop", "nzId", "nzPlacement", "nzShowWeekNumber", "nzShowTime"], outputs: ["nzOnPanelChange", "nzOnCalendarChange", "nzOnOk", "nzOnOpenChange"], exportAs: ["nzDatePicker"] }, { kind: "ngmodule", type: NzEmptyModule }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "ngmodule", type: NzDividerModule }, { kind: "component", type: i8$1.NzDividerComponent, selector: "nz-divider", inputs: ["nzText", "nzType", "nzOrientation", "nzVariant", "nzDashed", "nzPlain"], exportAs: ["nzDivider"] }] });
9742
- }
9743
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: MailSendSettingDetailComponent, decorators: [{
9744
- type: Component,
9745
- args: [{ selector: 'app-mail-send-setting-detail', standalone: true, imports: [
9746
- CommonModule,
9747
- ReactiveFormsModule,
9748
- TranslateModule,
9749
- NzFormModule,
9750
- NzInputModule,
9751
- NzButtonModule,
9752
- NzGridModule,
9753
- NzCheckboxModule,
9754
- NzSelectModule,
9755
- NzSpinModule,
9756
- NzPopconfirmModule,
9757
- NzAlertModule,
9758
- NzDatePickerModule,
9759
- NzEmptyModule,
9760
- NzFlexModule,
9761
- NzAlertModule,
9762
- NzDividerModule,
9763
- ], template: "<nz-spin [nzSpinning]=\"isLoading\" nzTip=\"\u0110ang t\u1EA3i...\">\r\n <form nz-form [formGroup]=\"form\">\r\n <div nz-row [nzGutter]=\"['16', '16']\">\r\n <!-- Form Column -->\r\n <div nz-col [nzSpan]=\"12\">\r\n <!-- Template Select -->\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"4\" nzFor=\"template\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n Mail Template\r\n </nz-form-label>\r\n <nz-form-control [nzSpan]=\"20\" [nzErrorTip]=\"'Vui l\u00F2ng ch\u1ECDn Mail Template'\">\r\n <nz-select\r\n formControlName=\"App_MailTemplate_Id\"\r\n nzId=\"template\"\r\n nzPlaceHolder=\"-- Ch\u1ECDn Mail Template --\"\r\n nzShowSearch\r\n >\r\n <nz-option\r\n *ngFor=\"let template of lstMailTemplate\"\r\n [nzValue]=\"template.App_MailTemplate_Id\"\r\n [nzLabel]=\"template.Code + ' - ' + template.Name\"\r\n ></nz-option>\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <!-- Code -->\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"4\" nzFor=\"code\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n M\u00E3\r\n </nz-form-label>\r\n <nz-form-control [nzSpan]=\"20\" [nzErrorTip]=\"'Vui l\u00F2ng nh\u1EADp M\u00E3'\">\r\n <input \r\n nz-input \r\n formControlName=\"Code\" \r\n id=\"code\"\r\n placeholder=\"V\u00ED d\u1EE5: DAILY_8AM\" \r\n maxlength=\"50\" \r\n />\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <!-- Name -->\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"4\" nzFor=\"name\" nzLabelAlign=\"left\" nzNoColon=\"true\" nzRequired>\r\n T\u00EAn\r\n </nz-form-label>\r\n <nz-form-control [nzSpan]=\"20\" [nzErrorTip]=\"'Vui l\u00F2ng nh\u1EADp T\u00EAn'\">\r\n <input \r\n nz-input \r\n formControlName=\"Name\" \r\n id=\"name\"\r\n placeholder=\"V\u00ED d\u1EE5: G\u1EEDi b\u00E1o c\u00E1o l\u00FAc 8h s\u00E1ng\" \r\n maxlength=\"250\" \r\n />\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <!-- CronTime -->\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"4\" nzFor=\"crontime\" nzLabelAlign=\"left\" nzNoColon=\"true\">\r\n Cron Time\r\n </nz-form-label>\r\n <nz-form-control [nzSpan]=\"20\" [nzErrorTip]=\"'Vui l\u00F2ng nh\u1EADp Cron Time'\">\r\n <input \r\n nz-input \r\n formControlName=\"CronTime\" \r\n id=\"crontime\"\r\n placeholder=\"V\u00ED d\u1EE5: 0 8 * * *\" \r\n maxlength=\"50\" \r\n />\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <!-- Cron Time Help -->\r\n <div nz-row>\r\n <div nz-col [nzSpan]=\"4\"></div>\r\n <div nz-col [nzSpan]=\"20\">\r\n <div style=\"\r\n background: #e6f7ff; \r\n border: 1px solid #91d5ff; \r\n border-radius: 4px; \r\n padding: 12px; \r\n margin-bottom: 16px;\r\n font-size: 13px;\r\n \">\r\n <div style=\"font-weight: 600; margin-bottom: 8px;\">\r\n \u2139\uFE0F H\u01B0\u1EDBng d\u1EABn Cron Time\r\n </div>\r\n <ul style=\"margin: 0; padding-left: 20px;\">\r\n <li><code>0 8 * * *</code> - 8h s\u00E1ng h\u00E0ng ng\u00E0y</li>\r\n <li><code>0 17 * * *</code> - 5h chi\u1EC1u h\u00E0ng ng\u00E0y</li>\r\n <li><code>0 8 * * 1</code> - 8h s\u00E1ng Th\u1EE9 2</li>\r\n <li><code>0 9 1 * *</code> - 9h s\u00E1ng ng\u00E0y 1 h\u00E0ng th\u00E1ng</li>\r\n <li><code>*/30 * * * *</code> - M\u1ED7i 30 ph\u00FAt</li>\r\n </ul>\r\n <small style=\"color: #666;\">Format: <code>ph\u00FAt gi\u1EDD ng\u00E0y th\u00E1ng th\u1EE9</code></small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- SendTime -->\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"4\" nzFor=\"sendtime\" nzLabelAlign=\"left\" nzNoColon=\"true\">\r\n Th\u1EDDi gian g\u1EEDi\r\n </nz-form-label>\r\n <nz-form-control [nzSpan]=\"20\">\r\n <nz-date-picker\r\n formControlName=\"SendTime\"\r\n nzId=\"sendtime\"\r\n nzShowTime\r\n nzFormat=\"dd/MM/yyyy HH:mm:ss\"\r\n nzPlaceHolder=\"Ch\u1ECDn th\u1EDDi gian g\u1EEDi\"\r\n style=\"width: 100%;\"\r\n ></nz-date-picker>\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <!-- IsActive -->\r\n <div nz-row>\r\n <div nz-col [nzSpan]=\"4\"></div>\r\n <div nz-col [nzSpan]=\"20\">\r\n <label nz-checkbox formControlName=\"IsActive\">Hi\u1EC7u l\u1EF1c</label>\r\n </div>\r\n </div>\r\n\r\n <!-- Buttons -->\r\n <div nz-row style=\"margin-top: 24px;\">\r\n <div nz-col [nzSpan]=\"4\"></div>\r\n <div nz-col [nzSpan]=\"20\">\r\n <nz-divider></nz-divider>\r\n <div nz-flex [nzGap]=\"'small'\">\r\n <button nz-button nzType=\"primary\" type=\"button\" (click)=\"save()\" [nzLoading]=\"isSaving\">\r\n {{ TranslateKey.SAVE | translate }}\r\n </button>\r\n <button \r\n *ngIf=\"!isNew\" \r\n nz-button \r\n nzType=\"primary\" \r\n type=\"button\" \r\n nzDanger \r\n nz-popconfirm\r\n [nzPopconfirmTitle]=\"TranslateKey.CONFIRM_DELETE | translate\"\r\n nzPopconfirmPlacement=\"top\"\r\n (nzOnConfirm)=\"delete()\"\r\n nzOkDanger\r\n [disabled]=\"isLoading || isSaving\"\r\n >\r\n {{ TranslateKey.DELETE | translate }}\r\n </button>\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"cancel()\" [disabled]=\"isLoading || isSaving\">\r\n {{ TranslateKey.BACK | translate }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n</nz-spin>" }]
9764
- }] });
9765
-
9766
8947
  class LogServerService extends HTTPService {
9767
8948
  getListServerLog() {
9768
8949
  return this.get(AppGlobals.apiEndpoint + '/api/LogServer/GetListServerLog');
@@ -10671,6 +9852,8 @@ class WorkflowEditorComponent extends BaseComponent {
10671
9852
  onDeleteAction = new EventEmitter();
10672
9853
  onDeleteRule = new EventEmitter();
10673
9854
  onDeleteRuleLine = new EventEmitter();
9855
+ onCheckRule = new EventEmitter();
9856
+ onCheckAllRule = new EventEmitter();
10674
9857
  //#endregion
10675
9858
  //#region wf editor
10676
9859
  Math = Math;
@@ -12250,8 +11433,21 @@ class WorkflowEditorComponent extends BaseComponent {
12250
11433
  });
12251
11434
  }
12252
11435
  }
11436
+ checkAction(item) {
11437
+ this.onCheckRule.emit({
11438
+ ruleline: item,
11439
+ sourceActionId: this.hoverAction?.IsTempId ? 0 : this.hoverAction?.WF_TemplateStageAction_Id,
11440
+ });
11441
+ }
11442
+ checkAllAction() {
11443
+ // this.actionRuleModalVisible = false
11444
+ this.onCheckAllRule.emit({
11445
+ lstruleline: this.hoverAction?.actionRule.lstLine,
11446
+ sourceActionId: this.hoverAction?.IsTempId ? 0 : this.hoverAction?.WF_TemplateStageAction_Id,
11447
+ });
11448
+ }
12253
11449
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: WorkflowEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
12254
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: WorkflowEditorComponent, isStandalone: true, selector: "app-workflow-editor", inputs: { lstOrg: "lstOrg", lstRole: "lstRole", lstEmailTemplate: "lstEmailTemplate" }, outputs: { onSave: "onSave", onDeleteStage: "onDeleteStage", onDeleteAction: "onDeleteAction", onDeleteRule: "onDeleteRule", onDeleteRuleLine: "onDeleteRuleLine" }, host: { listeners: { "window:keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, static: true }, { propertyName: "svgRef", first: true, predicate: ["svg"], descendants: true, static: true }, { propertyName: "inputStageStatusElement", first: true, predicate: ["inputStageStatusElement"], descendants: true }, { propertyName: "inputActionTypeElement", first: true, predicate: ["inputActionTypeElement"], descendants: true }, { propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n #canvasRef\r\n class=\"workflow-canvas\"\r\n [class.connecting]=\"!!connectingFrom\"\r\n [class.dragging-point]=\"!!draggingPoint\"\r\n [style.width.px]=\"getCanvasWidth()\"\r\n [style.height.px]=\"getCanvasHeight()\"\r\n (mousedown)=\"onMouseDownCanvas($event)\"\r\n (mousemove)=\"onMouseMoveCanvas($event)\"\r\n (mouseup)=\"onMouseUpCanvas($event)\"\r\n (click)=\"onClickCanvas($event)\"\r\n>\r\n <!-- \r\n\r\n [style.width.px]=\"getCanvasWidth()\"\r\n [style.height.px]=\"getCanvasHeight()\" \r\n\r\n [style.width.px]=\"CANVAS_WIDTH\"\r\n [style.height.px]=\"CANVAS_HEIGHT\"\r\n\r\n style=\"width: 100%; height: calc(100vh - 120px)\"\r\n \r\n -->\r\n\r\n <div class=\"toolbar\" (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\r\n <button nz-button nzSize=\"small\" nz-tooltip=\"Editor setting\" (click)=\"settingVisible = true\">\r\n <nz-icon nzType=\"setting\"></nz-icon>\r\n </button>\r\n\r\n <button nz-button nzSize=\"small\" nz-tooltip=\"Infomation\" (click)=\"infoVisible = true\">\r\n <nz-icon nzType=\"info-circle\"></nz-icon>\r\n </button>\r\n\r\n <box [width]=\"1\"></box>\r\n <span class=\"divider\"></span>\r\n <box [width]=\"1\"></box>\r\n\r\n <button nz-button nzSize=\"small\" nz-tooltip=\"Template setting\" (click)=\"drawTemplateVisibel = true\">\r\n <nz-icon nzType=\"setting\"></nz-icon> T\r\n </button>\r\n\r\n <box [width]=\"1\"></box>\r\n <span class=\"divider\"></span>\r\n <box [width]=\"1\"></box>\r\n\r\n <button nz-button nzSize=\"small\" nzDanger [nzLoading]=\"!ready\" nz-tooltip=\"Save (Ctrl + S)\" (click)=\"save()\">\r\n <nz-icon nzType=\"save\"></nz-icon>\r\n </button>\r\n <button nz-button nzSize=\"small\" nz-tooltip=\"Add stage\" (click)=\"addStage()\">\r\n <nz-icon nzType=\"plus\" class=\"color-primary\"></nz-icon>\r\n </button>\r\n\r\n <box [width]=\"1\"></box>\r\n <span class=\"divider\"></span>\r\n <box [width]=\"1\"></box>\r\n\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n [nzType]=\"isMoveMode ? 'primary' : 'default'\"\r\n nz-tooltip=\"Move mode\"\r\n (click)=\"isMoveMode = true\"\r\n >\r\n <nz-icon><img src=\"/assets/icon/hand-palm.png\" width=\"19\" height=\"19\" /></nz-icon>\r\n </button>\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n [nzType]=\"!isMoveMode ? 'primary' : 'default'\"\r\n nz-tooltip=\"Select mode\"\r\n (click)=\"isMoveMode = false\"\r\n >\r\n <nz-icon><img src=\"/assets/icon/cursor.png\" width=\"19\" height=\"19\" /></nz-icon>\r\n </button>\r\n\r\n <box [width]=\"1\"></box>\r\n <span class=\"divider\"></span>\r\n <box [width]=\"1\"></box>\r\n\r\n <!-- UNDO / REDO -->\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n nzType=\"default\"\r\n [disabled]=\"undoStack.length === 0\"\r\n nz-tooltip=\"Undo\"\r\n (click)=\"undo()\"\r\n >\r\n <nz-icon nzType=\"undo\"></nz-icon>\r\n </button>\r\n\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n nzType=\"default\"\r\n [disabled]=\"redoStack.length === 0\"\r\n nz-tooltip=\"Redo\"\r\n (click)=\"redo()\"\r\n >\r\n <nz-icon nzType=\"redo\"></nz-icon>\r\n </button>\r\n\r\n <box [width]=\"1\"></box>\r\n <span class=\"divider\"></span>\r\n <box [width]=\"1\"></box>\r\n\r\n <!-- ALIGN -->\r\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignLeft()\">\u27F8</button>\r\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignCenter()\">\u2261</button>\r\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignRight()\">\u27F9</button>\r\n\r\n <span class=\"divider\"></span>\r\n\r\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignTop()\">\u21D1</button>\r\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignMiddle()\">\u2550</button>\r\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignBottom()\">\u21D3</button>\r\n\r\n <span class=\"divider\"></span>\r\n\r\n <!-- DISTRIBUTE -->\r\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 3\" (click)=\"distributeHorizontal()\">\r\n \u21C4\r\n </button>\r\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 3\" (click)=\"distributeVertical()\">\u21C5</button>\r\n </div>\r\n\r\n <div\r\n class=\"canvas-content\"\r\n [class.panning]=\"isMoveMode\"\r\n [style.transform]=\"'translate(' + template.editorOption.panX + 'px,' + template.editorOption.panY + 'px)'\"\r\n >\r\n <!-- GRID -->\r\n <div *ngIf=\"wfcSetting.ShowGrid\" class=\"grid-layer\"></div>\r\n\r\n <!-- <div class=\"zoom-toolbar\">\r\n <button nz-button nzSize=\"small\" (click)=\"zoomOut()\">\u2212</button>\r\n <span>{{ zoom * 100 | number: \"1.0-0\" }}%</span>\r\n <button nz-button nzSize=\"small\" (click)=\"zoomIn()\">+</button>\r\n </div> -->\r\n\r\n <!-- SVG EDGES -->\r\n <svg #svg class=\"edges-layer\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\">\r\n <g [attr.transform]=\"svgTransform\">\r\n <!-- DEFS -->\r\n <defs>\r\n <!-- glow effect -->\r\n <filter id=\"edge-glow\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\r\n <feGaussianBlur stdDeviation=\"2\" result=\"blur\" />\r\n <feMerge>\r\n <feMergeNode in=\"blur\" />\r\n <feMergeNode in=\"SourceGraphic\" />\r\n </feMerge>\r\n </filter>\r\n\r\n <!-- arrow markers -->\r\n <marker\r\n id=\"arrow-blue\"\r\n markerWidth=\"10\"\r\n markerHeight=\"10\"\r\n refX=\"10\"\r\n refY=\"5\"\r\n orient=\"auto\"\r\n markerUnits=\"strokeWidth\"\r\n >\r\n <path class=\"blue\" d=\"M0,0 L10,5 L0,10\"></path>\r\n </marker>\r\n\r\n <marker\r\n id=\"arrow-red\"\r\n markerWidth=\"10\"\r\n markerHeight=\"10\"\r\n refX=\"10\"\r\n refY=\"5\"\r\n orient=\"auto\"\r\n markerUnits=\"strokeWidth\"\r\n >\r\n <path class=\"red\" d=\"M0,0 L10,5 L0,10\"></path>\r\n </marker>\r\n\r\n <marker\r\n id=\"arrow-blue-start\"\r\n markerWidth=\"10\"\r\n markerHeight=\"10\"\r\n viewBox=\"0 0 10 10\"\r\n refX=\"0\"\r\n refY=\"5\"\r\n orient=\"auto\"\r\n markerUnits=\"strokeWidth\"\r\n >\r\n <path class=\"blue\" d=\"M10,0 L0,5 L10,10\"></path>\r\n </marker>\r\n\r\n <marker\r\n id=\"arrow-red-start\"\r\n markerWidth=\"10\"\r\n markerHeight=\"10\"\r\n viewBox=\"0 0 10 10\"\r\n refX=\"0\"\r\n refY=\"5\"\r\n orient=\"auto\"\r\n markerUnits=\"strokeWidth\"\r\n >\r\n <path class=\"red\" d=\"M10,0 L0,5 L10,10\"></path>\r\n </marker>\r\n </defs>\r\n\r\n <!-- EDGES B\u00CCNH TH\u01AF\u1EDCNG -->\r\n <ng-container *ngFor=\"let e of normalEdges; let i = index\">\r\n <path\r\n class=\"edge\"\r\n [attr.id]=\"'edge-path-' + i\"\r\n [attr.d]=\"buildPath(e)\"\r\n marker-end=\"url(#arrow-blue)\"\r\n [attr.marker-start]=\"e.allowBack ? 'url(#arrow-blue-start)' : ''\"\r\n ></path>\r\n\r\n <path\r\n class=\"edge-hit\"\r\n [attr.d]=\"buildPath(e)\"\r\n (mouseenter)=\"onMouseEnterEdge(e)\"\r\n (mouseleave)=\"onMouseLeaveEdge(e)\"\r\n (click)=\"onClickEdge(e, $event)\"\r\n ></path>\r\n\r\n <!-- LABEL -->\r\n <!-- text b\u00E1m theo line -->\r\n <!-- \r\n <text *ngIf=\"e.ActionText\" class=\"edge-label\" dy=\"-6\">\r\n <textPath [attr.href]=\"'#edge-path-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n {{ e.ActionText }}\r\n </textPath>\r\n </text> \r\n \r\n <text *ngIf=\"e.allowBack && e.labelBack\" class=\"edge-label\" dy=\"14\">\r\n <textPath [attr.href]=\"'#edge-path-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n {{ e.labelBack }}\r\n </textPath>\r\n </text>\r\n -->\r\n\r\n <!-- text th\u1EB3ng n\u1EB1m ngang -->\r\n <text\r\n *ngIf=\"e.ActionText\"\r\n class=\"edge-label\"\r\n [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\r\n [attr.text-anchor]=\"'middle'\"\r\n >\r\n {{ e.ActionText }}\r\n </text>\r\n\r\n <text\r\n *ngIf=\"e.allowBack && e.labelBack\"\r\n class=\"edge-label\"\r\n [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n [attr.y]=\"getEdgeLabelPosition(e).y + 14\"\r\n [attr.text-anchor]=\"'middle'\"\r\n >\r\n {{ e.labelBack }}\r\n </text>\r\n </ng-container>\r\n\r\n <!-- EDGE \u0110ANG HOVER (LU\u00D4N TR\u00CAN C\u00D9NG) -->\r\n <ng-container *ngFor=\"let e of hoverEdges; let i = index\">\r\n <path\r\n class=\"edge red\"\r\n [attr.id]=\"'edge-path-hover-' + i\"\r\n [attr.d]=\"buildPath(e)\"\r\n marker-end=\"url(#arrow-red)\"\r\n [attr.marker-start]=\"e.allowBack ? 'url(#arrow-red-start)' : ''\"\r\n ></path>\r\n\r\n <path\r\n class=\"edge-hit\"\r\n [attr.d]=\"buildPath(e)\"\r\n (mouseleave)=\"onMouseLeaveEdge(e)\"\r\n (click)=\"onClickEdge(e, $event)\"\r\n ></path>\r\n\r\n <!-- LABEL -->\r\n <!-- <text *ngIf=\"e.ActionText\" class=\"edge-label\" dy=\"-6\">\r\n <textPath [attr.href]=\"'#edge-path-hover-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n {{ e.ActionText }}\r\n </textPath>\r\n </text>\r\n\r\n <text *ngIf=\"e.allowBack && e.labelBack\" class=\"edge-label\" dy=\"14\">\r\n <textPath [attr.href]=\"'#edge-path-hover-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n {{ e.labelBack }}\r\n </textPath>\r\n </text> -->\r\n\r\n <text\r\n *ngIf=\"e.ActionText\"\r\n class=\"edge-label\"\r\n [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\r\n [attr.text-anchor]=\"'middle'\"\r\n >\r\n {{ e.ActionText }}\r\n </text>\r\n\r\n <text\r\n *ngIf=\"e.allowBack && e.labelBack\"\r\n class=\"edge-label\"\r\n [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n [attr.y]=\"getEdgeLabelPosition(e).y + 14\"\r\n [attr.text-anchor]=\"'middle'\"\r\n >\r\n {{ e.labelBack }}\r\n </text>\r\n </ng-container>\r\n\r\n <!-- preview -->\r\n <path\r\n *ngIf=\"connectingFrom\"\r\n class=\"edge\"\r\n [attr.d]=\"buildPreviewPath()\"\r\n stroke-dasharray=\"5,5\"\r\n marker-end=\"url(#arrow-blue)\"\r\n ></path>\r\n </g>\r\n </svg>\r\n\r\n <div\r\n *ngIf=\"isSelecting && selectStart && selectEnd\"\r\n class=\"selection-box\"\r\n [style.left.px]=\"Math.min(selectStart.x, selectEnd.x)\"\r\n [style.top.px]=\"Math.min(selectStart.y, selectEnd.y)\"\r\n [style.width.px]=\"Math.abs(selectEnd.x - selectStart.x)\"\r\n [style.height.px]=\"Math.abs(selectEnd.y - selectStart.y)\"\r\n ></div>\r\n\r\n <!-- lstStage -->\r\n @for (n of lstStage; track $index) {\r\n <!-- START NODE -->\r\n @if (n.StageType === \"_start_\") {\r\n <nz-card\r\n class=\"workflow-node workflow-node-start\"\r\n [attr.data-id]=\"n.Code\"\r\n [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\r\n [style.left.px]=\"n.editorOption.x\"\r\n [style.top.px]=\"n.editorOption.y\"\r\n [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\r\n nzSize=\"small\"\r\n (mousedown)=\"onMouseDownNode($event, n)\"\r\n (click)=\"$event.stopPropagation(); onClickStage(n)\"\r\n >\r\n <nz-tag [nzColor]=\"'green'\"> START </nz-tag>\r\n\r\n @if (!n.editorOption.isReverse) {\r\n <!-- connector RIGHT: output -->\r\n <div class=\"connector connector-right connector-start\" (click)=\"onClickConnector($event, n, 'right')\"></div>\r\n } @else {\r\n <div\r\n class=\"connector connector-right connector-start reverse\"\r\n (click)=\"onClickConnector($event, n, 'right')\"\r\n ></div>\r\n }\r\n </nz-card>\r\n }\r\n <!-- END NODE -->\r\n @else if (n.StageType === \"_end_\") {\r\n <nz-card\r\n class=\"workflow-node workflow-node-end\"\r\n [attr.data-id]=\"n.Code\"\r\n [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\r\n [style.left.px]=\"n.editorOption.x\"\r\n [style.top.px]=\"n.editorOption.y\"\r\n [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\r\n nzSize=\"small\"\r\n (mousedown)=\"onMouseDownNode($event, n)\"\r\n (click)=\"$event.stopPropagation(); onClickStage(n)\"\r\n >\r\n <nz-tag [nzColor]=\"'red'\"> END </nz-tag>\r\n\r\n @if (!n.editorOption.isReverse) {\r\n <!-- connector LEFT: input -->\r\n <div class=\"connector connector-left connector-end\" (click)=\"onClickConnector($event, n, 'left')\"></div>\r\n } @else {\r\n <div\r\n class=\"connector connector-left connector-end reverse\"\r\n (click)=\"onClickConnector($event, n, 'left')\"\r\n ></div>\r\n }\r\n </nz-card>\r\n } @else {\r\n <nz-card\r\n class=\"workflow-node\"\r\n [attr.data-id]=\"n.Code\"\r\n [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\r\n [style.left.px]=\"n.editorOption.x\"\r\n [style.top.px]=\"n.editorOption.y\"\r\n [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\r\n nzSize=\"small\"\r\n (mousedown)=\"onMouseDownNode($event, n)\"\r\n (click)=\"$event.stopPropagation(); onClickStage(n)\"\r\n >\r\n <div class=\"title\">{{ n.Code }}</div>\r\n\r\n <div>{{ n.Name }}</div>\r\n\r\n @if (!n.editorOption.isReverse) {\r\n <!-- connector RIGHT: output -->\r\n <div class=\"connector connector-right\" (click)=\"onClickConnector($event, n, 'right')\"></div>\r\n\r\n <!-- connector LEFT: input -->\r\n <div class=\"connector connector-left\" (click)=\"onClickConnector($event, n, 'left')\"></div>\r\n } @else {\r\n <div class=\"connector connector-right reverse\" (click)=\"onClickConnector($event, n, 'right')\"></div>\r\n <div class=\"connector connector-left reverse\" (click)=\"onClickConnector($event, n, 'left')\"></div>\r\n }\r\n </nz-card>\r\n }\r\n }\r\n\r\n <!-- POINTS -->\r\n @for (p of connectingPoints; track $index) {\r\n @if (p != draggingPoint) {\r\n <div\r\n class=\"waypoint\"\r\n [style.left.px]=\"p.x\"\r\n [style.top.px]=\"p.y\"\r\n (mousedown)=\"onmousedownPoint($event, p)\"\r\n (contextmenu)=\"onRightClickPoint($event, hoverAction!, $index)\"\r\n ></div>\r\n } @else {\r\n <div\r\n class=\"waypoint dragging\"\r\n [style.left.px]=\"p.x\"\r\n [style.top.px]=\"p.y\"\r\n (mousedown)=\"onmousedownPoint($event, p)\"\r\n ></div>\r\n }\r\n }\r\n </div>\r\n</div>\r\n\r\n<!-- drawer TEMPLATE -->\r\n<nz-drawer\r\n [nzTitle]=\"drawTemplateTitle\"\r\n nzPlacement=\"right\"\r\n [nzWidth]=\"500\"\r\n [nzClosable]=\"false\"\r\n [nzVisible]=\"drawTemplateVisibel\"\r\n [nzFooter]=\"footerTplTemplate\"\r\n (nzOnClose)=\"drawTemplateVisibel = false\"\r\n>\r\n <ng-template #drawTemplateTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; Template </ng-template>\r\n <ng-container *nzDrawerContent>\r\n <extend-select\r\n [label]=\"'Org'\"\r\n [lstItem]=\"lstOrg\"\r\n [valueField]=\"'App_Org_Id'\"\r\n [displayFields]=\"['Name', 'Code']\"\r\n [(_ngModel)]=\"template.App_Org_Id\"\r\n ></extend-select>\r\n <extend-input [label]=\"'Code'\" [(_ngModel)]=\"template.Code\"></extend-input>\r\n <extend-input [label]=\"'Name'\" [(_ngModel)]=\"template.Name\"></extend-input>\r\n <extend-select\r\n [label]=\"'Type'\"\r\n [lstItem]=\"template.lstTemplateType\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"template.DocType\"\r\n ></extend-select>\r\n <extend-textarea [label]=\"'Desscription'\" [(_ngModel)]=\"template.Description\"></extend-textarea>\r\n <extend-select\r\n [label]=\"'Print template'\"\r\n [lstItem]=\"template.lstTemplatePrint\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"template.TemplatePrint\"\r\n ></extend-select>\r\n <extend-select\r\n [label]=\"'Apply to'\"\r\n [lstItem]=\"template.lstApplyTo\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"template.ApplyTo\"\r\n ></extend-select>\r\n\r\n <extend-checkbox [label]=\"'Active'\" [(_ngModel)]=\"template.IsActive\"></extend-checkbox>\r\n <extend-checkbox [label]=\"'Use Allow back'\" [(_ngModel)]=\"template.editorOption.AllowbackInUse\"></extend-checkbox>\r\n\r\n <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Stage</h3>\r\n\r\n <div nz-row [nzGutter]=\"[0, 5]\">\r\n @for (tag of getLstStage; track tag) {\r\n <div nz-col>\r\n <nz-tag (click)=\"hoverStage = tag\">\r\n {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\r\n </nz-tag>\r\n </div>\r\n }\r\n </div>\r\n\r\n <box [height]=\"16\"></box>\r\n\r\n <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Stage status</h3>\r\n\r\n <div nz-row [nzGutter]=\"[0, 5]\">\r\n @for (tag of template.lstStageStatus; track tag) {\r\n <div nz-col>\r\n <nz-tag\r\n [nzMode]=\"checkRemoveableStageStatus(tag) ? 'closeable' : 'default'\"\r\n (nzOnClose)=\"handleCloseStageStatus(tag)\"\r\n >\r\n {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\r\n </nz-tag>\r\n </div>\r\n }\r\n\r\n <div nz-col>\r\n @if (!inputStageStatusVisible) {\r\n <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInputStageStatus()\">\r\n <nz-icon nzType=\"plus\" />\r\n New Action type\r\n </nz-tag>\r\n } @else {\r\n <input\r\n #inputStageStatusElement\r\n nz-input\r\n nzSize=\"small\"\r\n type=\"text\"\r\n style=\"width: 150px\"\r\n placeholder=\"Code\"\r\n [(ngModel)]=\"inputStageStatusCode\"\r\n (keydown.enter)=\"inputStageStatusNameElement.select()\"\r\n />\r\n <input\r\n #inputStageStatusNameElement\r\n nz-input\r\n nzSize=\"small\"\r\n type=\"text\"\r\n style=\"width: 150px\"\r\n placeholder=\"Name\"\r\n [(ngModel)]=\"inputStageStatusName\"\r\n (blur)=\"handleInputStageStatusConfirm()\"\r\n (keydown.enter)=\"handleInputStageStatusConfirm()\"\r\n />\r\n }\r\n </div>\r\n </div>\r\n\r\n <box [height]=\"16\"></box>\r\n\r\n <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Action type</h3>\r\n\r\n <div nz-row [nzGutter]=\"[0, 5]\">\r\n @for (tag of template.lstActionType; track tag) {\r\n <div nz-col>\r\n <nz-tag\r\n [nzMode]=\"checkRemoveableActionType(tag) ? 'closeable' : 'default'\"\r\n (nzOnClose)=\"handleCloseActionType(tag)\"\r\n >\r\n {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\r\n </nz-tag>\r\n </div>\r\n }\r\n\r\n <div nz-col>\r\n @if (!inputActionTypeVisible) {\r\n <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInputActionType()\">\r\n <nz-icon nzType=\"plus\" />\r\n New Action type\r\n </nz-tag>\r\n } @else {\r\n <input\r\n #inputActionTypeElement\r\n nz-input\r\n nzSize=\"small\"\r\n type=\"text\"\r\n style=\"width: 150px\"\r\n placeholder=\"Code\"\r\n [(ngModel)]=\"inputActionTypeCode\"\r\n (keydown.enter)=\"inputActionTypeNameElement.select()\"\r\n />\r\n <input\r\n #inputActionTypeNameElement\r\n nz-input\r\n nzSize=\"small\"\r\n type=\"text\"\r\n style=\"width: 150px\"\r\n placeholder=\"Name\"\r\n [(ngModel)]=\"inputActionTypeName\"\r\n (blur)=\"handleInputActionTypeConfirm()\"\r\n (keydown.enter)=\"handleInputActionTypeConfirm()\"\r\n />\r\n }\r\n </div>\r\n </div>\r\n\r\n <box [height]=\"16\"></box>\r\n\r\n <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Action status</h3>\r\n\r\n <div nz-row [nzGutter]=\"[0, 5]\">\r\n @for (tag of template.lstActionStatus; track tag) {\r\n <div nz-col>\r\n @if (template.editingActionStatus != tag) {\r\n <nz-tag\r\n [nzMode]=\"checkRemoveableActionStatus(tag.Code) ? 'closeable' : 'default'\"\r\n (nzOnClose)=\"handleClose(tag.Code)\"\r\n (click)=\"template.editingActionStatus = checkRemoveableActionStatus(tag.Code) ? tag : undefined\"\r\n >\r\n {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\r\n </nz-tag>\r\n } @else {\r\n <input\r\n nz-input\r\n nzSize=\"small\"\r\n type=\"text\"\r\n style=\"width: 150px\"\r\n [appAutoFocus]=\"true\"\r\n [(ngModel)]=\"tag.Code\"\r\n (blur)=\"template.editingActionStatus = undefined\"\r\n (keydown.enter)=\"template.editingActionStatus = undefined\"\r\n />&nbsp;&nbsp;\r\n }\r\n </div>\r\n }\r\n\r\n <div nz-col>\r\n @if (!inputVisible) {\r\n <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInput()\">\r\n <nz-icon nzType=\"plus\" />\r\n New Action status\r\n </nz-tag>\r\n } @else {\r\n <input\r\n #inputElement\r\n nz-input\r\n nzSize=\"small\"\r\n type=\"text\"\r\n style=\"width: 150px\"\r\n placeholder=\"+ New Action status\"\r\n [(ngModel)]=\"inputValue\"\r\n (blur)=\"handleInputConfirm()\"\r\n (keydown.enter)=\"handleInputConfirm()\"\r\n />\r\n }\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #footerTplTemplate>\r\n <div nz-flex [nzGap]=\"6\" [nzJustify]=\"'end'\">\r\n <button nz-button nzDanger [nzLoading]=\"!ready\" (click)=\"save()\">Save</button>\r\n <button nz-button (click)=\"drawTemplateVisibel = false\">Close</button>\r\n </div>\r\n </ng-template>\r\n</nz-drawer>\r\n\r\n<!-- drawer STAGE -->\r\n<nz-drawer\r\n [nzTitle]=\"drawerTitleStage\"\r\n [nzPlacement]=\"selectedStage?.editorOption?.drawerPosition == 'left' ? 'left' : 'right'\"\r\n [nzVisible]=\"!!selectedStage\"\r\n [nzWidth]=\"'calc(50vw)'\"\r\n [nzClosable]=\"false\"\r\n [nzFooter]=\"footerTplNode\"\r\n (nzOnClose)=\"selectedStage = undefined\"\r\n>\r\n <ng-template #drawerTitleStage>\r\n <div nz-row nzJustify=\"space-between\">\r\n @if (selectedStage && selectedStage.editorOption) {\r\n @if (selectedStage.editorOption.drawerPosition == \"left\") {\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n nz-tooltip=\"To the right\"\r\n (click)=\"selectedStage.editorOption.drawerPosition = 'right'\"\r\n >\r\n <nz-icon nzType=\"double-right\"></nz-icon>\r\n </button>\r\n STAGE\r\n } @else {\r\n STAGE\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n nz-tooltip=\"To the left\"\r\n (click)=\"selectedStage.editorOption.drawerPosition = 'left'\"\r\n >\r\n <nz-icon nzType=\"double-left\"></nz-icon>\r\n </button>\r\n }\r\n }\r\n </div>\r\n </ng-template>\r\n <ng-container *nzDrawerContent>\r\n <ng-container *ngIf=\"selectedStage\">\r\n <nz-radio-group [(ngModel)]=\"selectedStage.StageType\">\r\n <label nz-radio nzValue=\"_start_\">UI start</label>\r\n <label nz-radio nzValue=\"_end_\">UI end</label>\r\n <label nz-radio nzValue=\"start\">START</label>\r\n <label nz-radio nzValue=\"node\">NODE</label>\r\n <label nz-radio nzValue=\"end\">END</label>\r\n </nz-radio-group>\r\n\r\n <box [height]=\"16\"></box>\r\n\r\n <div nz-row [nzGutter]=\"32\" class=\"form-item-no-bottom\">\r\n <extend-input\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Code'\"\r\n [floatingLabel]=\"true\"\r\n [required]=\"true\"\r\n [(_ngModel)]=\"selectedStage.Code\"\r\n ></extend-input>\r\n\r\n <extend-input\r\n nz-col\r\n [nzSpan]=\"16\"\r\n [label]=\"'Name'\"\r\n [floatingLabel]=\"true\"\r\n [required]=\"true\"\r\n [(_ngModel)]=\"selectedStage.Name\"\r\n ></extend-input>\r\n </div>\r\n\r\n <div nz-row [nzGutter]=\"32\" class=\"form-item-no-bottom\">\r\n <extend-input-number\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Sequence'\"\r\n [floatingLabel]=\"true\"\r\n [(_ngModel)]=\"selectedStage.SeqValue\"\r\n ></extend-input-number>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"16\"\r\n [label]=\"'Org implement'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"lstOrg\"\r\n [valueField]=\"'App_Org_Id'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedStage.App_Org_Id\"\r\n ></extend-select>\r\n </div>\r\n\r\n <div nz-row [nzGutter]=\"32\" class=\"form-item-no-bottom\">\r\n <extend-input-number\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Number of Days'\"\r\n [floatingLabel]=\"true\"\r\n [precision]=\"1\"\r\n [(_ngModel)]=\"selectedStage.NumberDay\"\r\n ></extend-input-number>\r\n </div>\r\n\r\n @if (selectedStage.editorOption) {\r\n @if ([\"start\", \"node\", \"end\"].includes(selectedStage.StageType.toLowerCase())) {\r\n <extend-checkbox\r\n [label]=\"'Reverse'\"\r\n [labelSpan]=\"0\"\r\n [(_ngModel)]=\"selectedStage.editorOption.isReverse\"\r\n ></extend-checkbox>\r\n }\r\n\r\n <extend-checkbox\r\n [label]=\"'Require user action'\"\r\n [labelSpan]=\"0\"\r\n [(_ngModel)]=\"selectedStage.IsRequireUser\"\r\n ></extend-checkbox>\r\n }\r\n\r\n <box [height]=\"16\"></box>\r\n\r\n <div nz-row [nzGutter]=\"16\">\r\n <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;List Action</h3>\r\n <div nz-col>\r\n <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"addAction()\">\r\n <nz-icon nzType=\"plus\"></nz-icon>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <nz-table nzSize=\"small\" [nzData]=\"lstActionOfCurrentStage\" [nzShowPagination]=\"false\" [nzNoResult]=\"'&nbsp;'\">\r\n <thead>\r\n <tr [hidden]=\"true\">\r\n <th nzWidth=\"40px\"></th>\r\n <th></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (action of lstActionOfCurrentStage; track $index) {\r\n <tr (click)=\"onclickaction(action)\">\r\n <td\r\n style=\"border-bottom: solid 1px orange\"\r\n [ngStyle]=\"{\r\n 'border-left': action == hoverAction ? 'solid 4px orange' : '',\r\n 'border-top': $index == 0 ? 'solid 1px orange' : '',\r\n }\"\r\n >\r\n ({{ $index + 1 }})\r\n <nz-icon\r\n nzType=\"delete\"\r\n nzTheme=\"outline\"\r\n class=\"color-warn cursor-pointer icon-size-16\"\r\n (click)=\"$event.stopPropagation(); deleteAction(action)\"\r\n ></nz-icon>\r\n </td>\r\n <td\r\n style=\"border-bottom: solid 1px orange\"\r\n [ngStyle]=\"{\r\n 'border-top': $index == 0 ? 'solid 1px orange' : '',\r\n }\"\r\n >\r\n <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\r\n <div nz-col [nzSpan]=\"8\" class=\"has-floating-label floating-label\">\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"24\" style=\"z-index: 2\">\r\n <label>Action status</label>\r\n </nz-form-label>\r\n <nz-form-control [nzSpan]=\"24\">\r\n <nz-input-group class=\"full-width\">\r\n <input\r\n nz-input\r\n [(ngModel)]=\"action.ActionStatus\"\r\n [nzAutocomplete]=\"auto\"\r\n (ngModelChange)=\"nzAutocompletechange($event, template.lstActionStatus)\"\r\n (click)=\"lstActionStatusFiltered = template.lstActionStatus\"\r\n (keyup.enter)=\"onenterAotu(action.ActionStatus)\"\r\n (blur)=\"onenterAotu(action.ActionStatus)\"\r\n />\r\n <nz-autocomplete #auto [compareWith]=\"compareFun\">\r\n @for (option of lstActionStatusFiltered; track $index) {\r\n <nz-auto-option [nzValue]=\"option.Code\" [nzLabel]=\"option.Code\">\r\n {{ option.Code }}\r\n <icon-delete\r\n *ngIf=\"checkRemoveableActionStatus(option.Code)\"\r\n style=\"float: right\"\r\n [size]=\"12\"\r\n (click)=\"handleClose(option.Code)\"\r\n ></icon-delete>\r\n </nz-auto-option>\r\n }\r\n </nz-autocomplete>\r\n </nz-input-group>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <extend-input\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Action text'\"\r\n [floatingLabel]=\"true\"\r\n [(_ngModel)]=\"action.ActionText\"\r\n (_ngModelChange)=\"onchangeActionText(action)\"\r\n ></extend-input>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Action type'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"template.lstActionType\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"action.ActionType\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Stage status'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"template.lstStageStatus\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"action.StageStatus\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Next stage'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"getlstStage\"\r\n [valueField]=\"'WF_TemplateStage_Id'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"action.To_WF_TemplateStage_Id\"\r\n (_ngModelChange)=\"onchangeNextStage(action)\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Next stage status'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"template.lstStageStatus\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"action.To_StageStatus\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Process status'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"template.lstProcessStatus\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"action.DocProcessStatus\"\r\n ></extend-select>\r\n </div>\r\n <box [height]=\"8\"></box>\r\n <div nz-row>Role</div>\r\n <div nz-row>\r\n <extend-select\r\n nz-col\r\n nzSpan=\"24\"\r\n [size]=\"'small'\"\r\n [lstItem]=\"lstRole\"\r\n [valueField]=\"'App_Role_Id'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [multiple]=\"true\"\r\n [(_ngModel)]=\"action._lstRoleId\"\r\n (_ngModelChange)=\"onselectedRoleEmail(action)\"\r\n ></extend-select>\r\n </div>\r\n <box [height]=\"8\"></box>\r\n <div nz-row>Email action</div>\r\n <div nz-row>\r\n <extend-select\r\n nz-col\r\n nzSpan=\"24\"\r\n [size]=\"'small'\"\r\n [lstItem]=\"lstEmailAction\"\r\n [valueField]=\"'ID'\"\r\n [displayField]=\"'Name'\"\r\n [multiple]=\"true\"\r\n [(_ngModel)]=\"action._lstEmailActionId\"\r\n (_ngModelChange)=\"onselectedRoleEmail(action)\"\r\n ></extend-select>\r\n </div>\r\n <box [height]=\"8\"></box>\r\n <div *ngIf=\"action._lstEmailActionId && action._lstEmailActionId.length\" nz-row>Email template</div>\r\n <div *ngIf=\"action._lstEmailActionId && action._lstEmailActionId.length\" nz-row>\r\n <div nz-col nzSpan=\"1\"></div>\r\n <div nz-col nzSpan=\"23\" class=\"form-item-no-bottom\" style=\"font-weight: normal\">\r\n @for (actionRef of lstActionRefOf(action); track $index) {\r\n <div nz-row>\r\n <extend-select\r\n nz-col\r\n nzSpan=\"24\"\r\n [labelSpan]=\"12\"\r\n [size]=\"'small'\"\r\n [label]=\"emailActionText(actionRef.To_WF_TemplateStageAction_Id)\"\r\n [lstItem]=\"lstEmailTemplate\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"actionRef.TemplateMail\"\r\n ></extend-select>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n <box [height]=\"8\"></box>\r\n <div nz-row [nzGutter]=\"8\">\r\n Action rule\r\n <button nz-button nzType=\"text\" nzSize=\"small\" (click)=\"actionRuleModalVisible = true\">\r\n <nz-icon nzType=\"export\" nzTheme=\"outline\" class=\"color-primary\" />\r\n </button>\r\n <button\r\n *ngIf=\"action.WF_TransitionsRule_Id\"\r\n nz-button\r\n nzType=\"text\"\r\n nzSize=\"small\"\r\n (click)=\"deleteActionRule(action)\"\r\n >\r\n <nz-icon nzType=\"delete\" nzTheme=\"outline\" class=\"color-warn\" />\r\n </button>\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n </tbody>\r\n </nz-table>\r\n\r\n <box [height]=\"16\"></box>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #footerTplNode>\r\n <div\r\n nz-flex\r\n [nzGap]=\"6\"\r\n [nzJustify]=\"\r\n selectedStage && selectedStage.editorOption && selectedStage.editorOption.drawerPosition == 'left'\r\n ? 'start'\r\n : 'end'\r\n \"\r\n >\r\n <button nz-button nzDanger nzDanger [nzLoading]=\"!ready\" (click)=\"save()\">Save</button>\r\n <button nz-button (click)=\"selectedStage = undefined\">Close</button>\r\n <button\r\n *ngIf=\"selectedStage && ['START', 'END'].indexOf(selectedStage.StageType) < 0\"\r\n nz-button\r\n nzDanger\r\n (click)=\"deleteStage()\"\r\n >\r\n Delete\r\n </button>\r\n </div>\r\n </ng-template>\r\n</nz-drawer>\r\n\r\n<!-- drawer ACTION -->\r\n<nz-drawer\r\n [nzTitle]=\"drawerTitleAction\"\r\n nzTitle=\"ACTION\"\r\n [nzPlacement]=\"selectedAction?.editorOption?.drawerPosition == 'left' ? 'left' : 'right'\"\r\n [nzClosable]=\"false\"\r\n [nzWidth]=\"750\"\r\n [nzVisible]=\"!!selectedAction\"\r\n [nzFooter]=\"footerTplAction\"\r\n (nzOnClose)=\"selectedAction = undefined\"\r\n>\r\n <ng-template #drawerTitleAction>\r\n <div nz-row nzJustify=\"space-between\">\r\n @if (selectedAction && selectedAction.editorOption) {\r\n @if (selectedAction.editorOption.drawerPosition == \"left\") {\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n nz-tooltip=\"To the right\"\r\n (click)=\"selectedAction.editorOption.drawerPosition = 'right'\"\r\n >\r\n <nz-icon nzType=\"double-right\"></nz-icon>\r\n </button>\r\n ACTION\r\n } @else {\r\n ACTION\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n nz-tooltip=\"To the left\"\r\n (click)=\"selectedAction.editorOption.drawerPosition = 'left'\"\r\n >\r\n <nz-icon nzType=\"double-left\"></nz-icon>\r\n </button>\r\n }\r\n }\r\n </div>\r\n </ng-template>\r\n <ng-container *nzDrawerContent>\r\n <ng-container *ngIf=\"selectedAction\">\r\n <div>\r\n <strong\r\n >{{ selectedAction.getFromStageCode(lstStage) }} -> {{ selectedAction.getToStageCode(lstStage) }}</strong\r\n >\r\n </div>\r\n <div>{{ selectedAction.getFromStageName(lstStage) }} -> {{ selectedAction.getToStageName(lstStage) }}</div>\r\n\r\n <box [height]=\"16\"></box>\r\n\r\n <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\r\n <div nz-col [nzSpan]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"24\" style=\"height: 32px\">Action status</nz-form-label>\r\n <nz-form-control [nzSpan]=\"24\">\r\n <nz-input-group class=\"full-width\">\r\n <input\r\n nz-input\r\n [(ngModel)]=\"selectedAction.ActionStatus\"\r\n [nzAutocomplete]=\"auto\"\r\n (ngModelChange)=\"nzAutocompletechange($event, template.lstActionStatus)\"\r\n (click)=\"lstActionStatusFiltered = template.lstActionStatus\"\r\n (keyup.enter)=\"onenterAotu(selectedAction.ActionStatus)\"\r\n (blur)=\"onenterAotu(selectedAction.ActionStatus)\"\r\n />\r\n <nz-autocomplete #auto [compareWith]=\"compareFun\">\r\n @for (option of lstActionStatusFiltered; track $index) {\r\n <nz-auto-option [nzValue]=\"option.Code\" [nzLabel]=\"option.Code\">\r\n {{ option.Code }}\r\n <icon-delete\r\n *ngIf=\"checkRemoveableActionStatus(option.Code)\"\r\n style=\"float: right\"\r\n [size]=\"12\"\r\n (click)=\"handleClose(option.Code)\"\r\n ></icon-delete>\r\n </nz-auto-option>\r\n }\r\n </nz-autocomplete>\r\n </nz-input-group>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <extend-input\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Action text'\"\r\n [floatingLabel]=\"true\"\r\n [(_ngModel)]=\"selectedAction.ActionText\"\r\n (_ngModelChange)=\"onchangeActionText(selectedAction)\"\r\n ></extend-input>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Action type'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"template.lstActionType\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedAction.ActionType\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Stage status'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"template.lstStageStatus\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedAction.StageStatus\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Next stage'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"lstStage\"\r\n [valueField]=\"'WF_TemplateStage_Id'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedAction.To_WF_TemplateStage_Id\"\r\n (_ngModelChange)=\"onchangeNextStage(selectedAction)\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Next stage status'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"template.lstStageStatus\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedAction.To_StageStatus\"\r\n ></extend-select>\r\n </div>\r\n\r\n <!-- <box [height]=\"16\"></box> -->\r\n <nz-divider></nz-divider>\r\n\r\n @if (template.editorOption.AllowbackInUse) {\r\n <extend-checkbox\r\n [label]=\"'Allow back'\"\r\n [labelSpan]=\"0\"\r\n [(_ngModel)]=\"selectedAction.allowBack\"\r\n (_ngModelChange)=\"onchangeAllowBack(selectedAction)\"\r\n ></extend-checkbox>\r\n }\r\n\r\n <box [height]=\"16\"></box>\r\n\r\n @if (selectedAction.allowBack) {\r\n <div>\r\n <strong\r\n >{{ selectedAction.getToStageCode(lstStage) }} -> {{ selectedAction.getFromStageCode(lstStage) }}</strong\r\n >\r\n </div>\r\n <div>{{ selectedAction.getToStageName(lstStage) }} -> {{ selectedAction.getFromStageName(lstStage) }}</div>\r\n\r\n @if (selectedBackAction) {\r\n <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\r\n <div nz-col [nzSpan]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"24\" style=\"height: 32px\">Action status</nz-form-label>\r\n <nz-form-control [nzSpan]=\"24\">\r\n <nz-input-group class=\"full-width\">\r\n <input\r\n nz-input\r\n [(ngModel)]=\"selectedBackAction.ActionStatus\"\r\n [nzAutocomplete]=\"auto\"\r\n (ngModelChange)=\"nzAutocompletechange($event, template.lstActionStatus)\"\r\n (click)=\"lstActionStatusFiltered = template.lstActionStatus\"\r\n (keyup.enter)=\"onenterAotu(selectedBackAction.ActionStatus)\"\r\n (blur)=\"onenterAotu(selectedBackAction.ActionStatus)\"\r\n />\r\n <nz-autocomplete #auto [compareWith]=\"compareFun\">\r\n @for (option of lstActionStatusFiltered; track $index) {\r\n <nz-auto-option [nzValue]=\"option.Code\" [nzLabel]=\"option.Code\">\r\n {{ option.Code }}\r\n <icon-delete\r\n *ngIf=\"checkRemoveableActionStatus(option.Code)\"\r\n style=\"float: right\"\r\n [size]=\"12\"\r\n (click)=\"handleClose(option.Code)\"\r\n ></icon-delete>\r\n </nz-auto-option>\r\n }\r\n </nz-autocomplete>\r\n </nz-input-group>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <extend-input\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Action text'\"\r\n [floatingLabel]=\"true\"\r\n [(_ngModel)]=\"selectedBackAction.ActionText\"\r\n (_ngModelChange)=\"onchangeActionText(selectedBackAction)\"\r\n ></extend-input>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Action type'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"template.lstActionType\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedBackAction.ActionType\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Stage status'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"template.lstStageStatus\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedBackAction.StageStatus\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Next stage'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"lstStage\"\r\n [valueField]=\"'WF_TemplateStage_Id'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedBackAction.To_WF_TemplateStage_Id\"\r\n (_ngModelChange)=\"onchangeNextStage(selectedBackAction)\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Next stage status'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"template.lstStageStatus\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedBackAction.To_StageStatus\"\r\n ></extend-select>\r\n </div>\r\n }\r\n }\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #footerTplAction>\r\n <div\r\n nz-flex\r\n [nzGap]=\"6\"\r\n [nzJustify]=\"selectedAction && selectedAction.editorOption.drawerPosition == 'left' ? 'start' : 'end'\"\r\n >\r\n <button nz-button nzDanger nzDanger [nzLoading]=\"!ready\" (click)=\"save()\">Save</button>\r\n <button nz-button nzDanger (click)=\"deleteAction(selectedAction!)\">Delete</button>\r\n <button nz-button (click)=\"selectedAction = undefined\">Close</button>\r\n </div>\r\n </ng-template>\r\n</nz-drawer>\r\n\r\n<!-- setting editor -->\r\n<nz-drawer\r\n [nzTitle]=\"drawSettingTitle\"\r\n nzPlacement=\"right\"\r\n [nzClosable]=\"false\"\r\n [nzVisible]=\"settingVisible\"\r\n (nzOnClose)=\"settingVisible = false\"\r\n>\r\n <ng-template #drawSettingTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; Editor </ng-template>\r\n <ng-container *nzDrawerContent>\r\n <div class=\"form-item-no-bottom\">\r\n <extend-checkbox [label]=\"'Show grid'\" [labelSpan]=\"0\" [(_ngModel)]=\"wfcSetting.ShowGrid\"></extend-checkbox>\r\n\r\n <box [height]=\"16\"></box>\r\n </div>\r\n </ng-container>\r\n</nz-drawer>\r\n\r\n<!-- editor infomation -->\r\n<nz-drawer\r\n [nzTitle]=\"drawInfoTitle\"\r\n nzPlacement=\"right\"\r\n [nzClosable]=\"false\"\r\n [nzVisible]=\"infoVisible\"\r\n (nzOnClose)=\"infoVisible = false\"\r\n>\r\n <ng-template #drawInfoTitle> <nz-icon nzType=\"info-circle\"></nz-icon> &nbsp; Infomation </ng-template>\r\n <ng-container *nzDrawerContent>\r\n <p>1. C\u00E1c th\u00E0nh ph\u1EA7n: Stage or Node (stag, node quy tr\u00ECnh), Action or Connector (\u0111\u01B0\u1EDDng n\u1ED1i gi\u1EEFa c\u00E1c stage)</p>\r\n <p>2. Save \u0111\u1EC3 load c\u00E1c th\u00F4ng tin: Stage status, Action type</p>\r\n <p>\r\n 3. N\u1ED1i 2 node (t\u1EA1o connector t\u01B0\u01A1ng \u0111\u01B0\u01A1ng t\u1EA1o action):\r\n <br />- Click ch\u1EA5m cam t\u1EEB Node ngu\u1ED3n \u0111\u1EBFn ch\u1EA5m xanh c\u1EE7a Node \u0111\u00EDch (ho\u1EB7c click v\u00E0o Node \u0111\u00EDch), c\u00F3 th\u1EC3 click th\u00E0nh\r\n nhi\u1EC1u \u0111i\u1EC3m \u0111\u1EC3 t\u1EA1o \u0111\u01B0\u1EDDng n\u1ED1i cong<br />- Khi hover connector chuy\u1EC3n sang m\u1EA7u \u0111\u1ECF c\u00F3 th\u1EC3 click \u0111\u00FAp \u0111\u1EC3 th\u00EAm m\u1ED9t \u0111i\u1EC3m\r\n c\u1EE7a connector<br />- Khi hover l\u00EAn \u0111i\u1EC3m c\u1EE7a connector c\u00F3 th\u1EC3 di chuy\u1EC3n \u0111i\u1EC3m \u0111\u00F3 b\u1EB1ng c\u00E1ch nh\u1EA5n gi\u1EEF chu\u1ED9t v\u00E0 k\u00E9o th\u1EA3\r\n \u0111\u1EBFn v\u1ECB tr\u00ED m\u1EDBi<br />- Chu\u1ED9t ph\u1EA3i v\u00E0o \u0111i\u1EC3m n\u1ED1i connector \u0111\u1EC3 xo\u00E1 \u0111i\u1EC3m \u0111\u00F3\r\n </p>\r\n </ng-container>\r\n</nz-drawer>\r\n\r\n<!-- action rule modal -->\r\n<nz-modal\r\n [(nzVisible)]=\"actionRuleModalVisible\"\r\n [nzMaskClosable]=\"false\"\r\n [nzClosable]=\"false\"\r\n [nzKeyboard]=\"true\"\r\n [nzWidth]=\"'75vw'\"\r\n>\r\n <ng-container *nzModalTitle>\r\n ACTION RULE: [{{ selectedStage?.Code }}] {{ selectedStage?.Name }} > [{{ hoverAction?.ActionStatus }}]\r\n {{ hoverAction?.ActionText }}\r\n </ng-container>\r\n <ng-container *nzModalContent>\r\n @if (hoverAction && hoverAction.actionRule) {\r\n <div nz-row [nzGutter]=\"32\" class=\"form-item-no-bottom\">\r\n <extend-input nz-col nzSpan=\"12\" [label]=\"'Code'\" [(_ngModel)]=\"hoverAction.actionRule.Code\"></extend-input>\r\n <extend-input nz-col nzSpan=\"12\" [label]=\"'Name'\" [(_ngModel)]=\"hoverAction.actionRule.Name\"></extend-input>\r\n <extend-input nz-col nzSpan=\"12\" [label]=\"'Note'\" [(_ngModel)]=\"hoverAction.actionRule.Note\"></extend-input>\r\n <extend-checkbox\r\n nz-col\r\n nzSpan=\"12\"\r\n [label]=\"'IsActive'\"\r\n [(_ngModel)]=\"hoverAction.actionRule.IsActive\"\r\n ></extend-checkbox>\r\n </div>\r\n <box [height]=\"8\"></box>\r\n <div nz-row [nzGutter]=\"16\">\r\n <div nz-col nzSpan=\"24\">\r\n <nz-table nzSize=\"small\" [nzData]=\"hoverAction.actionRule.lstLine\" [nzShowPagination]=\"false\">\r\n <thead>\r\n <tr>\r\n <th [nzWidth]=\"'40px'\"><icon-add (click)=\"addActionRuleLine()\"></icon-add></th>\r\n <th [nzWidth]=\"'250px'\">Rule type</th>\r\n <th>Template</th>\r\n <th>Template stage</th>\r\n <th>Template action</th>\r\n <th>Store to exec</th>\r\n <th [nzWidth]=\"'50px'\">Active</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (item of hoverAction.actionRule.lstLine; track $index) {\r\n <tr>\r\n <td><icon-delete (click)=\"deleteActionRuleLine(hoverAction.actionRule, item)\"></icon-delete></td>\r\n <td>\r\n <dic-domain-select\r\n [size]=\"'small'\"\r\n [DomainCode]=\"'WF_RuleType'\"\r\n [(_ngModel)]=\"item.RuleType\"\r\n ></dic-domain-select>\r\n </td>\r\n <td>\r\n <extend-select\r\n #xxx\r\n [size]=\"'small'\"\r\n [lstItem]=\"lstTemplateForRule(item)\"\r\n [valueField]=\"'WF_Template_Id'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [dropdownMatchSelectWidth]=\"false\"\r\n [(_ngModel)]=\"item.WF_Template_Id\"\r\n (_ngModelChange)=\"item.WF_TemplateStage_Id = 0; item.WF_TemplateStageAction_Id = 0\"\r\n ></extend-select>\r\n </td>\r\n <td>\r\n <extend-select\r\n #yyy\r\n [size]=\"'small'\"\r\n [lstItem]=\"lstStageForRule(xxx._ngModel)\"\r\n [valueField]=\"'WF_TemplateStage_Id'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [dropdownMatchSelectWidth]=\"false\"\r\n [(_ngModel)]=\"item.WF_TemplateStage_Id\"\r\n (_ngModelChange)=\"item.WF_TemplateStageAction_Id = 0\"\r\n ></extend-select>\r\n </td>\r\n <td>\r\n <extend-select\r\n [size]=\"'small'\"\r\n [lstItem]=\"lstActionForRule(yyy._ngModel)\"\r\n [valueField]=\"'WF_TemplateStageAction_Id'\"\r\n [displayFields]=\"['ActionStatus', 'ActionText']\"\r\n [dropdownMatchSelectWidth]=\"false\"\r\n [(_ngModel)]=\"item.WF_TemplateStageAction_Id\"\r\n ></extend-select>\r\n </td>\r\n <td>\r\n <extend-input [size]=\"'small'\" [(_ngModel)]=\"item.StoreToExec\"></extend-input>\r\n </td>\r\n <td class=\"text-center\">\r\n <extend-checkbox [(_ngModel)]=\"item.IsActive\"></extend-checkbox>\r\n </td>\r\n </tr>\r\n }\r\n </tbody>\r\n </nz-table>\r\n </div>\r\n </div>\r\n }\r\n </ng-container>\r\n <ng-container *nzModalFooter>\r\n <button nz-button nzType=\"primary\" (click)=\"actionRuleModalVisible = false\">OK</button>\r\n </ng-container>\r\n</nz-modal>\r\n", styles: ["@charset \"UTF-8\";::ng-deep .workflow-wrapper{border:solid 1px lightgray;overflow:hidden;width:100%}.workflow-canvas{position:relative;background:#f0f2f5;cursor:default;overflow:hidden;outline:1px dashed rgba(0,0,0,.1)}.workflow-canvas .edges-layer{position:absolute;inset:0;width:100%;height:100%;z-index:1}.workflow-canvas .edges-layer path{stroke-width:2;fill:none}.canvas-content{transform-origin:0 0;width:100%;height:100%}.canvas-content{outline:1px dashed red}.canvas-content.panning{cursor:grab}.canvas-content.panning:active{cursor:grabbing}.workflow-canvas.panning{cursor:grab}.workflow-canvas.panning:active{cursor:grabbing}.workflow-canvas.connecting,.workflow-canvas.connecting .workflow-node{cursor:crosshair}.workflow-node{position:absolute;width:160px;cursor:grab;-webkit-user-select:none;user-select:none;z-index:2}.workflow-node:active{cursor:grabbing}.workflow-node.connecting-source,.workflow-node.selected,.workflow-node:hover:not(.workflow-node-start,.workflow-node-end){outline:2px dashed #1890ff}.workflow-node .title{font-weight:600;margin-bottom:6px}.workflow-node-start{width:0px}.workflow-node-start.connecting-source,.workflow-node-start.selected,.workflow-node-start:hover{outline:unset}.workflow-node-start.connecting-source nz-tag,.workflow-node-start.selected nz-tag,.workflow-node-start:hover nz-tag{outline:2px dashed}.workflow-node-start nz-tag{position:relative;top:45px;right:35px}.workflow-node-end{width:0px}.workflow-node-end.connecting-source,.workflow-node-end.selected,.workflow-node-end:hover{outline:unset}.workflow-node-end.connecting-source nz-tag,.workflow-node-end.selected nz-tag,.workflow-node-end:hover nz-tag{outline:2px dashed}.workflow-node-end nz-tag{position:relative;top:45px;right:32px}.connector{position:absolute;top:39px;width:12px;height:12px;background:#1890ff;border-radius:50%;transform:translateY(-50%);cursor:crosshair;transition:box-shadow .15s ease-out,transform .15s ease-out}.connector:hover{box-shadow:0 0 0 3px #1890ff4d;transform:translateY(-50%) scale(1.15)}.connector-right{right:-8px;background:orange}.connector-right.reverse,.connector-left{left:-8px}.connector-left.reverse{left:unset;right:-8px}.connector-start{width:16px;height:16px;right:-8px;background:green;box-shadow:0 0 0 3px #1890ff4d}.connector-end{width:16px;height:16px;left:-8px;background:#000;box-shadow:0 0 0 3px #1890ff4d}.edge{cursor:pointer;stroke:#1890ff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;fill:none;transition:stroke .15s ease}.edge-hit{stroke:transparent;stroke-width:18px!important;fill:none;cursor:pointer}.edge-hit:hover+.edge{stroke:#ff4d4f;stroke-width:2}.workflow-canvas.dragging-point .edge-hit{pointer-events:none}.edge:hover+.edge-label{fill:#1890ff;font-weight:500}.edge-label{font-size:12px;fill:#555;pointer-events:none;-webkit-user-select:none;user-select:none}.blue{stroke:#1890ff!important}.red{stroke:#ff4d4f!important;box-shadow:0 0 0 3px #1890ff4d!important}.workflow-svg{background:transparent;overflow:visible}.waypoint{position:absolute;width:10px;height:10px;background:#ff4d4f;border-radius:50%;transform:translate(-50%,-50%) scale(1);cursor:move;z-index:1;transition:transform .12s ease-out,background-color .12s ease-out,box-shadow .12s ease-out}.waypoint:hover{background:#ff7875;transform:translate(-50%,-50%) scale(1.25);box-shadow:0 0 0 4px #ff787559}.waypoint.dragging{transition:none;transform:translate(-50%,-50%) scale(1.15);pointer-events:none}.workflow-canvas.dragging-point svg{cursor:grabbing}.selection-box{position:absolute;border:1px dashed #1890ff;background:#1890ff1a;pointer-events:none}.toolbar{position:absolute;top:8px;left:8px;display:flex;gap:4px;padding:6px;background:#fff;border-radius:6px;box-shadow:0 2px 8px #00000026;z-index:100}.toolbar .divider{width:1px;background:#e5e5e5;margin:0 2px}.zoom-toolbar{position:absolute;top:8px;left:8px;z-index:10;display:flex;align-items:center;gap:6px;background:#fff;padding:4px 6px;border-radius:6px;box-shadow:0 2px 6px #00000026}.zoom-toolbar span{min-width:40px;text-align:center;font-size:12px}nz-tag.selected{outline:2px dashed #1890ff}.grid-layer{position:absolute;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(rgba(0,0,0,.08) 1px,transparent 1px);background-size:20px 20px}.grid-layer{background-image:linear-gradient(to right,rgba(0,0,0,.06) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.06) 1px,transparent 1px);background-size:20px 20px}.editable-tag{background:#fff;border-style:dashed}::ng-deep .minimap{position:absolute;width:180px;height:125px;top:0;right:0;background-color:#eee;border:1px solid #aaa;opacity:.9;z-index:1}::ng-deep .minimap-node{position:absolute;background-color:#607a86}::ng-deep .minimap-node-round{position:absolute;background-color:#607a86;border-radius:10px}::ng-deep .minimap-node-round-start{background-color:green}::ng-deep .minimap-node-round-end{background-color:#000}::ng-deep .minimap-viewport{position:absolute;box-sizing:border-box;background-color:#4f6f7e66;z-index:1;cursor:move}::ng-deep .has-floating-label.floating-label{position:relative;padding-top:14px}::ng-deep .has-floating-label nz-form-item nz-form-label{position:absolute;top:12px;left:16px;transform:translateY(-50%);background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 80%,#ffffff 80%);z-index:1;height:auto;line-height:normal;padding:0 4px}::ng-deep .has-floating-label nz-form-item nz-form-label label{font-size:12px;color:var(--darkgray, #565656);font-weight:700;height:auto;line-height:normal;padding:0;display:flex;align-items:center}::ng-deep .has-floating-label .full-width{width:100%}.has-floating-label.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label,.has-floating-label.floating-label nz-form-item:has(input[disabled]) nz-form-label,.has-floating-label.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label{background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 60%,#f5f5f5 50%)}.has-floating-label.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label label,.has-floating-label.floating-label nz-form-item:has(input[disabled]) nz-form-label label,.has-floating-label.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label label{color:#bfbfbf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzCardModule }, { kind: "component", type: i3$5.NzCardComponent, selector: "nz-card", inputs: ["nzBordered", "nzLoading", "nzHoverable", "nzBodyStyle", "nzCover", "nzActions", "nzType", "nzSize", "nzTitle", "nzExtra"], exportAs: ["nzCard"] }, { kind: "ngmodule", type: NzDrawerModule }, { kind: "component", type: i4$3.NzDrawerComponent, selector: "nz-drawer", inputs: ["nzContent", "nzCloseIcon", "nzClosable", "nzMaskClosable", "nzMask", "nzCloseOnNavigation", "nzNoAnimation", "nzKeyboard", "nzTitle", "nzExtra", "nzFooter", "nzPlacement", "nzSize", "nzMaskStyle", "nzBodyStyle", "nzWrapClassName", "nzWidth", "nzHeight", "nzZIndex", "nzOffsetX", "nzOffsetY", "nzVisible"], outputs: ["nzOnViewInit", "nzOnClose", "nzVisibleChange"], exportAs: ["nzDrawer"] }, { kind: "directive", type: i4$3.NzDrawerContentDirective, selector: "[nzDrawerContent]", exportAs: ["nzDrawerContent"] }, { kind: "ngmodule", type: NzTagModule }, { kind: "component", type: i7.NzTagComponent, selector: "nz-tag", inputs: ["nzMode", "nzColor", "nzChecked", "nzBordered"], outputs: ["nzOnClose", "nzCheckedChange"], exportAs: ["nzTag"] }, { kind: "ngmodule", type: NzRadioModule }, { kind: "component", type: i6$3.NzRadioComponent, selector: "[nz-radio],[nz-radio-button]", inputs: ["nzValue", "nzDisabled", "nzAutoFocus", "nz-radio-button"], exportAs: ["nzRadio"] }, { kind: "component", type: i6$3.NzRadioGroupComponent, selector: "nz-radio-group", inputs: ["nzDisabled", "nzButtonStyle", "nzSize", "nzName"], exportAs: ["nzRadioGroup"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$2.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i4$1.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i8.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { kind: "component", type: ExtendInput, selector: "extend-input", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "inputClass", "labelSpan", "labelFlex", "inputFlex", "showClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "autofocus", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "displayField", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "onclickClearIcon", "onenter"] }, { kind: "component", type: ExtendSelectComponent, selector: "extend-select", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "dropdownMatchSelectWidth", "labelSpan", "labelFlex", "disabled", "required", "noBottom", "multiple", "showSelectAll", "maxTagCount", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "lstItem", "displayField", "displayFields", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "itemChange", "onFocus"] }, { kind: "component", type: ExtendCheckbox, selector: "extend-checkbox", inputs: ["label", "labelSpan", "labelFlex", "paddingTop", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "component", type: ExtendTextArea, selector: "extend-textarea", inputs: ["label", "placeHolder", "labelAlign", "floatingLabel", "displayInline", "formItemNoButtom", "labelSpan", "labelFlex", "inputFlex", "disabled", "required", "noBottom", "selectModeType", "inputClass", "size", "isSubmited", "minRows", "maxRows", "lstItem", "displayField", "valueField", "formData", "controlName", "_ngModel", "isTouched", "inputErrorMessage", "errorMessages"], outputs: ["_ngModelChange"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i5$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i5$1.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "component", type: ExtendInputNumber, selector: "extend-input-number", inputs: ["label", "placeHolder", "labelAlign", "floatingLabel", "hiddenUpDown", "labelSpan", "labelFlex", "inputFlex", "disabled", "required", "noBottom", "size", "min", "max", "precision", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "isSubmited", "separatorType", "formData", "controlName", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i6$1.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "directive", type: i6$1.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$1.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$1.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$1.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$1.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "ngmodule", type: NzDividerModule }, { kind: "component", type: i8$1.NzDividerComponent, selector: "nz-divider", inputs: ["nzText", "nzType", "nzOrientation", "nzVariant", "nzDashed", "nzPlain"], exportAs: ["nzDivider"] }, { kind: "directive", type: AutoFocusDirective, selector: "[appAutoFocus]", inputs: ["appAutoFocus"] }, { kind: "ngmodule", type: NzAutocompleteModule }, { kind: "component", type: i16$1.NzAutocompleteComponent, selector: "nz-autocomplete", inputs: ["nzWidth", "nzOverlayClassName", "nzOverlayStyle", "nzDefaultActiveFirstOption", "nzBackfill", "compareWith", "nzDataSource"], outputs: ["selectionChange"], exportAs: ["nzAutocomplete"] }, { kind: "component", type: i16$1.NzAutocompleteOptionComponent, selector: "nz-auto-option", inputs: ["nzValue", "nzLabel", "nzDisabled"], outputs: ["selectionChange", "mouseEntered"], exportAs: ["nzAutoOption"] }, { kind: "directive", type: i16$1.NzAutocompleteTriggerDirective, selector: "input[nzAutocomplete], textarea[nzAutocomplete]", inputs: ["nzAutocomplete"], exportAs: ["nzAutocompleteTrigger"] }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: NzModalComponent, selector: "nz-modal", inputs: ["nzMask", "nzMaskClosable", "nzCloseOnNavigation", "nzVisible", "nzClosable", "nzOkLoading", "nzOkDisabled", "nzCancelDisabled", "nzCancelLoading", "nzKeyboard", "nzNoAnimation", "nzCentered", "nzDraggable", "nzContent", "nzFooter", "nzZIndex", "nzWidth", "nzWrapClassName", "nzClassName", "nzStyle", "nzTitle", "nzCloseIcon", "nzMaskStyle", "nzBodyStyle", "nzOkText", "nzCancelText", "nzOkType", "nzOkDanger", "nzIconType", "nzModalType", "nzAutofocus", "nzOnOk", "nzOnCancel"], outputs: ["nzOnOk", "nzOnCancel", "nzAfterOpen", "nzAfterClose", "nzVisibleChange"], exportAs: ["nzModal"] }, { kind: "directive", type: NzModalContentDirective, selector: "[nzModalContent]", exportAs: ["nzModalContent"] }, { kind: "directive", type: NzModalTitleDirective, selector: "[nzModalTitle]", exportAs: ["nzModalTitle"] }, { kind: "component", type: IconAdd, selector: "icon-add", inputs: ["size"], outputs: ["click"] }, { kind: "directive", type: NzModalFooterDirective, selector: "[nzModalFooter]", exportAs: ["nzModalFooter"] }, { kind: "component", type: DicDomainSelectComponent, selector: "dic-domain-select", inputs: ["layOutType", "label", "placeHolder", "labelSpan", "labelAlign", "disabled", "required", "multiple", "showSelectAll", "maxTagCount", "inputWidth", "inputHeight", "size", "borderBottomOnly", "defaultFirstItem", "DomainCode", "ParentItemCode", "_ngModel", "formData", "controlName"], outputs: ["_ngModelChange"] }] });
11450
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: WorkflowEditorComponent, isStandalone: true, selector: "app-workflow-editor", inputs: { lstOrg: "lstOrg", lstRole: "lstRole", lstEmailTemplate: "lstEmailTemplate" }, outputs: { onSave: "onSave", onDeleteStage: "onDeleteStage", onDeleteAction: "onDeleteAction", onDeleteRule: "onDeleteRule", onDeleteRuleLine: "onDeleteRuleLine", onCheckRule: "onCheckRule", onCheckAllRule: "onCheckAllRule" }, host: { listeners: { "window:keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, static: true }, { propertyName: "svgRef", first: true, predicate: ["svg"], descendants: true, static: true }, { propertyName: "inputStageStatusElement", first: true, predicate: ["inputStageStatusElement"], descendants: true }, { propertyName: "inputActionTypeElement", first: true, predicate: ["inputActionTypeElement"], descendants: true }, { propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n #canvasRef\r\n class=\"workflow-canvas\"\r\n [class.connecting]=\"!!connectingFrom\"\r\n [class.dragging-point]=\"!!draggingPoint\"\r\n [style.width.px]=\"getCanvasWidth()\"\r\n [style.height.px]=\"getCanvasHeight()\"\r\n (mousedown)=\"onMouseDownCanvas($event)\"\r\n (mousemove)=\"onMouseMoveCanvas($event)\"\r\n (mouseup)=\"onMouseUpCanvas($event)\"\r\n (click)=\"onClickCanvas($event)\"\r\n>\r\n <!-- \r\n\r\n [style.width.px]=\"getCanvasWidth()\"\r\n [style.height.px]=\"getCanvasHeight()\" \r\n\r\n [style.width.px]=\"CANVAS_WIDTH\"\r\n [style.height.px]=\"CANVAS_HEIGHT\"\r\n\r\n style=\"width: 100%; height: calc(100vh - 120px)\"\r\n \r\n -->\r\n\r\n <div class=\"toolbar\" (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\r\n <button nz-button nzSize=\"small\" nz-tooltip=\"Editor setting\" (click)=\"settingVisible = true\">\r\n <nz-icon nzType=\"setting\"></nz-icon>\r\n </button>\r\n\r\n <button nz-button nzSize=\"small\" nz-tooltip=\"Infomation\" (click)=\"infoVisible = true\">\r\n <nz-icon nzType=\"info-circle\"></nz-icon>\r\n </button>\r\n\r\n <box [width]=\"1\"></box>\r\n <span class=\"divider\"></span>\r\n <box [width]=\"1\"></box>\r\n\r\n <button nz-button nzSize=\"small\" nz-tooltip=\"Template setting\" (click)=\"drawTemplateVisibel = true\">\r\n <nz-icon nzType=\"setting\"></nz-icon> T\r\n </button>\r\n\r\n <box [width]=\"1\"></box>\r\n <span class=\"divider\"></span>\r\n <box [width]=\"1\"></box>\r\n\r\n <button nz-button nzSize=\"small\" nzDanger [nzLoading]=\"!ready\" nz-tooltip=\"Save (Ctrl + S)\" (click)=\"save()\">\r\n <nz-icon nzType=\"save\"></nz-icon>\r\n </button>\r\n <button nz-button nzSize=\"small\" nz-tooltip=\"Add stage\" (click)=\"addStage()\">\r\n <nz-icon nzType=\"plus\" class=\"color-primary\"></nz-icon>\r\n </button>\r\n\r\n <box [width]=\"1\"></box>\r\n <span class=\"divider\"></span>\r\n <box [width]=\"1\"></box>\r\n\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n [nzType]=\"isMoveMode ? 'primary' : 'default'\"\r\n nz-tooltip=\"Move mode\"\r\n (click)=\"isMoveMode = true\"\r\n >\r\n <nz-icon><img src=\"/assets/icon/hand-palm.png\" width=\"19\" height=\"19\" /></nz-icon>\r\n </button>\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n [nzType]=\"!isMoveMode ? 'primary' : 'default'\"\r\n nz-tooltip=\"Select mode\"\r\n (click)=\"isMoveMode = false\"\r\n >\r\n <nz-icon><img src=\"/assets/icon/cursor.png\" width=\"19\" height=\"19\" /></nz-icon>\r\n </button>\r\n\r\n <box [width]=\"1\"></box>\r\n <span class=\"divider\"></span>\r\n <box [width]=\"1\"></box>\r\n\r\n <!-- UNDO / REDO -->\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n nzType=\"default\"\r\n [disabled]=\"undoStack.length === 0\"\r\n nz-tooltip=\"Undo\"\r\n (click)=\"undo()\"\r\n >\r\n <nz-icon nzType=\"undo\"></nz-icon>\r\n </button>\r\n\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n nzType=\"default\"\r\n [disabled]=\"redoStack.length === 0\"\r\n nz-tooltip=\"Redo\"\r\n (click)=\"redo()\"\r\n >\r\n <nz-icon nzType=\"redo\"></nz-icon>\r\n </button>\r\n\r\n <box [width]=\"1\"></box>\r\n <span class=\"divider\"></span>\r\n <box [width]=\"1\"></box>\r\n\r\n <!-- ALIGN -->\r\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignLeft()\">\u27F8</button>\r\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignCenter()\">\u2261</button>\r\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignRight()\">\u27F9</button>\r\n\r\n <span class=\"divider\"></span>\r\n\r\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignTop()\">\u21D1</button>\r\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignMiddle()\">\u2550</button>\r\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignBottom()\">\u21D3</button>\r\n\r\n <span class=\"divider\"></span>\r\n\r\n <!-- DISTRIBUTE -->\r\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 3\" (click)=\"distributeHorizontal()\">\r\n \u21C4\r\n </button>\r\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 3\" (click)=\"distributeVertical()\">\u21C5</button>\r\n </div>\r\n\r\n <div\r\n class=\"canvas-content\"\r\n [class.panning]=\"isMoveMode\"\r\n [style.transform]=\"'translate(' + template.editorOption.panX + 'px,' + template.editorOption.panY + 'px)'\"\r\n >\r\n <!-- GRID -->\r\n <div *ngIf=\"wfcSetting.ShowGrid\" class=\"grid-layer\"></div>\r\n\r\n <!-- <div class=\"zoom-toolbar\">\r\n <button nz-button nzSize=\"small\" (click)=\"zoomOut()\">\u2212</button>\r\n <span>{{ zoom * 100 | number: \"1.0-0\" }}%</span>\r\n <button nz-button nzSize=\"small\" (click)=\"zoomIn()\">+</button>\r\n </div> -->\r\n\r\n <!-- SVG EDGES -->\r\n <svg #svg class=\"edges-layer\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\">\r\n <g [attr.transform]=\"svgTransform\">\r\n <!-- DEFS -->\r\n <defs>\r\n <!-- glow effect -->\r\n <filter id=\"edge-glow\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\r\n <feGaussianBlur stdDeviation=\"2\" result=\"blur\" />\r\n <feMerge>\r\n <feMergeNode in=\"blur\" />\r\n <feMergeNode in=\"SourceGraphic\" />\r\n </feMerge>\r\n </filter>\r\n\r\n <!-- arrow markers -->\r\n <marker\r\n id=\"arrow-blue\"\r\n markerWidth=\"10\"\r\n markerHeight=\"10\"\r\n refX=\"10\"\r\n refY=\"5\"\r\n orient=\"auto\"\r\n markerUnits=\"strokeWidth\"\r\n >\r\n <path class=\"blue\" d=\"M0,0 L10,5 L0,10\"></path>\r\n </marker>\r\n\r\n <marker\r\n id=\"arrow-red\"\r\n markerWidth=\"10\"\r\n markerHeight=\"10\"\r\n refX=\"10\"\r\n refY=\"5\"\r\n orient=\"auto\"\r\n markerUnits=\"strokeWidth\"\r\n >\r\n <path class=\"red\" d=\"M0,0 L10,5 L0,10\"></path>\r\n </marker>\r\n\r\n <marker\r\n id=\"arrow-blue-start\"\r\n markerWidth=\"10\"\r\n markerHeight=\"10\"\r\n viewBox=\"0 0 10 10\"\r\n refX=\"0\"\r\n refY=\"5\"\r\n orient=\"auto\"\r\n markerUnits=\"strokeWidth\"\r\n >\r\n <path class=\"blue\" d=\"M10,0 L0,5 L10,10\"></path>\r\n </marker>\r\n\r\n <marker\r\n id=\"arrow-red-start\"\r\n markerWidth=\"10\"\r\n markerHeight=\"10\"\r\n viewBox=\"0 0 10 10\"\r\n refX=\"0\"\r\n refY=\"5\"\r\n orient=\"auto\"\r\n markerUnits=\"strokeWidth\"\r\n >\r\n <path class=\"red\" d=\"M10,0 L0,5 L10,10\"></path>\r\n </marker>\r\n </defs>\r\n\r\n <!-- EDGES B\u00CCNH TH\u01AF\u1EDCNG -->\r\n <ng-container *ngFor=\"let e of normalEdges; let i = index\">\r\n <path\r\n class=\"edge\"\r\n [attr.id]=\"'edge-path-' + i\"\r\n [attr.d]=\"buildPath(e)\"\r\n marker-end=\"url(#arrow-blue)\"\r\n [attr.marker-start]=\"e.allowBack ? 'url(#arrow-blue-start)' : ''\"\r\n ></path>\r\n\r\n <path\r\n class=\"edge-hit\"\r\n [attr.d]=\"buildPath(e)\"\r\n (mouseenter)=\"onMouseEnterEdge(e)\"\r\n (mouseleave)=\"onMouseLeaveEdge(e)\"\r\n (click)=\"onClickEdge(e, $event)\"\r\n ></path>\r\n\r\n <!-- LABEL -->\r\n <!-- text b\u00E1m theo line -->\r\n <!-- \r\n <text *ngIf=\"e.ActionText\" class=\"edge-label\" dy=\"-6\">\r\n <textPath [attr.href]=\"'#edge-path-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n {{ e.ActionText }}\r\n </textPath>\r\n </text> \r\n \r\n <text *ngIf=\"e.allowBack && e.labelBack\" class=\"edge-label\" dy=\"14\">\r\n <textPath [attr.href]=\"'#edge-path-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n {{ e.labelBack }}\r\n </textPath>\r\n </text>\r\n -->\r\n\r\n <!-- text th\u1EB3ng n\u1EB1m ngang -->\r\n <text\r\n *ngIf=\"e.ActionText\"\r\n class=\"edge-label\"\r\n [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\r\n [attr.text-anchor]=\"'middle'\"\r\n >\r\n {{ e.ActionText }}\r\n </text>\r\n\r\n <text\r\n *ngIf=\"e.allowBack && e.labelBack\"\r\n class=\"edge-label\"\r\n [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n [attr.y]=\"getEdgeLabelPosition(e).y + 14\"\r\n [attr.text-anchor]=\"'middle'\"\r\n >\r\n {{ e.labelBack }}\r\n </text>\r\n </ng-container>\r\n\r\n <!-- EDGE \u0110ANG HOVER (LU\u00D4N TR\u00CAN C\u00D9NG) -->\r\n <ng-container *ngFor=\"let e of hoverEdges; let i = index\">\r\n <path\r\n class=\"edge red\"\r\n [attr.id]=\"'edge-path-hover-' + i\"\r\n [attr.d]=\"buildPath(e)\"\r\n marker-end=\"url(#arrow-red)\"\r\n [attr.marker-start]=\"e.allowBack ? 'url(#arrow-red-start)' : ''\"\r\n ></path>\r\n\r\n <path\r\n class=\"edge-hit\"\r\n [attr.d]=\"buildPath(e)\"\r\n (mouseleave)=\"onMouseLeaveEdge(e)\"\r\n (click)=\"onClickEdge(e, $event)\"\r\n ></path>\r\n\r\n <!-- LABEL -->\r\n <!-- <text *ngIf=\"e.ActionText\" class=\"edge-label\" dy=\"-6\">\r\n <textPath [attr.href]=\"'#edge-path-hover-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n {{ e.ActionText }}\r\n </textPath>\r\n </text>\r\n\r\n <text *ngIf=\"e.allowBack && e.labelBack\" class=\"edge-label\" dy=\"14\">\r\n <textPath [attr.href]=\"'#edge-path-hover-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n {{ e.labelBack }}\r\n </textPath>\r\n </text> -->\r\n\r\n <text\r\n *ngIf=\"e.ActionText\"\r\n class=\"edge-label\"\r\n [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\r\n [attr.text-anchor]=\"'middle'\"\r\n >\r\n {{ e.ActionText }}\r\n </text>\r\n\r\n <text\r\n *ngIf=\"e.allowBack && e.labelBack\"\r\n class=\"edge-label\"\r\n [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n [attr.y]=\"getEdgeLabelPosition(e).y + 14\"\r\n [attr.text-anchor]=\"'middle'\"\r\n >\r\n {{ e.labelBack }}\r\n </text>\r\n </ng-container>\r\n\r\n <!-- preview -->\r\n <path\r\n *ngIf=\"connectingFrom\"\r\n class=\"edge\"\r\n [attr.d]=\"buildPreviewPath()\"\r\n stroke-dasharray=\"5,5\"\r\n marker-end=\"url(#arrow-blue)\"\r\n ></path>\r\n </g>\r\n </svg>\r\n\r\n <div\r\n *ngIf=\"isSelecting && selectStart && selectEnd\"\r\n class=\"selection-box\"\r\n [style.left.px]=\"Math.min(selectStart.x, selectEnd.x)\"\r\n [style.top.px]=\"Math.min(selectStart.y, selectEnd.y)\"\r\n [style.width.px]=\"Math.abs(selectEnd.x - selectStart.x)\"\r\n [style.height.px]=\"Math.abs(selectEnd.y - selectStart.y)\"\r\n ></div>\r\n\r\n <!-- lstStage -->\r\n @for (n of lstStage; track $index) {\r\n <!-- START NODE -->\r\n @if (n.StageType === \"_start_\") {\r\n <nz-card\r\n class=\"workflow-node workflow-node-start\"\r\n [attr.data-id]=\"n.Code\"\r\n [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\r\n [style.left.px]=\"n.editorOption.x\"\r\n [style.top.px]=\"n.editorOption.y\"\r\n [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\r\n nzSize=\"small\"\r\n (mousedown)=\"onMouseDownNode($event, n)\"\r\n (click)=\"$event.stopPropagation(); onClickStage(n)\"\r\n >\r\n <nz-tag [nzColor]=\"'green'\"> START </nz-tag>\r\n\r\n @if (!n.editorOption.isReverse) {\r\n <!-- connector RIGHT: output -->\r\n <div class=\"connector connector-right connector-start\" (click)=\"onClickConnector($event, n, 'right')\"></div>\r\n } @else {\r\n <div\r\n class=\"connector connector-right connector-start reverse\"\r\n (click)=\"onClickConnector($event, n, 'right')\"\r\n ></div>\r\n }\r\n </nz-card>\r\n }\r\n <!-- END NODE -->\r\n @else if (n.StageType === \"_end_\") {\r\n <nz-card\r\n class=\"workflow-node workflow-node-end\"\r\n [attr.data-id]=\"n.Code\"\r\n [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\r\n [style.left.px]=\"n.editorOption.x\"\r\n [style.top.px]=\"n.editorOption.y\"\r\n [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\r\n nzSize=\"small\"\r\n (mousedown)=\"onMouseDownNode($event, n)\"\r\n (click)=\"$event.stopPropagation(); onClickStage(n)\"\r\n >\r\n <nz-tag [nzColor]=\"'red'\"> END </nz-tag>\r\n\r\n @if (!n.editorOption.isReverse) {\r\n <!-- connector LEFT: input -->\r\n <div class=\"connector connector-left connector-end\" (click)=\"onClickConnector($event, n, 'left')\"></div>\r\n } @else {\r\n <div\r\n class=\"connector connector-left connector-end reverse\"\r\n (click)=\"onClickConnector($event, n, 'left')\"\r\n ></div>\r\n }\r\n </nz-card>\r\n } @else {\r\n <nz-card\r\n class=\"workflow-node\"\r\n [attr.data-id]=\"n.Code\"\r\n [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\r\n [style.left.px]=\"n.editorOption.x\"\r\n [style.top.px]=\"n.editorOption.y\"\r\n [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\r\n nzSize=\"small\"\r\n (mousedown)=\"onMouseDownNode($event, n)\"\r\n (click)=\"$event.stopPropagation(); onClickStage(n)\"\r\n >\r\n <div class=\"title\">{{ n.Code }}</div>\r\n\r\n <div>{{ n.Name }}</div>\r\n\r\n @if (!n.editorOption.isReverse) {\r\n <!-- connector RIGHT: output -->\r\n <div class=\"connector connector-right\" (click)=\"onClickConnector($event, n, 'right')\"></div>\r\n\r\n <!-- connector LEFT: input -->\r\n <div class=\"connector connector-left\" (click)=\"onClickConnector($event, n, 'left')\"></div>\r\n } @else {\r\n <div class=\"connector connector-right reverse\" (click)=\"onClickConnector($event, n, 'right')\"></div>\r\n <div class=\"connector connector-left reverse\" (click)=\"onClickConnector($event, n, 'left')\"></div>\r\n }\r\n </nz-card>\r\n }\r\n }\r\n\r\n <!-- POINTS -->\r\n @for (p of connectingPoints; track $index) {\r\n @if (p != draggingPoint) {\r\n <div\r\n class=\"waypoint\"\r\n [style.left.px]=\"p.x\"\r\n [style.top.px]=\"p.y\"\r\n (mousedown)=\"onmousedownPoint($event, p)\"\r\n (contextmenu)=\"onRightClickPoint($event, hoverAction!, $index)\"\r\n ></div>\r\n } @else {\r\n <div\r\n class=\"waypoint dragging\"\r\n [style.left.px]=\"p.x\"\r\n [style.top.px]=\"p.y\"\r\n (mousedown)=\"onmousedownPoint($event, p)\"\r\n ></div>\r\n }\r\n }\r\n </div>\r\n</div>\r\n\r\n<!-- drawer TEMPLATE -->\r\n<nz-drawer\r\n [nzTitle]=\"drawTemplateTitle\"\r\n nzPlacement=\"right\"\r\n [nzWidth]=\"500\"\r\n [nzClosable]=\"false\"\r\n [nzVisible]=\"drawTemplateVisibel\"\r\n [nzFooter]=\"footerTplTemplate\"\r\n (nzOnClose)=\"drawTemplateVisibel = false\"\r\n>\r\n <ng-template #drawTemplateTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; Template </ng-template>\r\n <ng-container *nzDrawerContent>\r\n <extend-select\r\n [label]=\"'Org'\"\r\n [lstItem]=\"lstOrg\"\r\n [valueField]=\"'App_Org_Id'\"\r\n [displayFields]=\"['Name', 'Code']\"\r\n [(_ngModel)]=\"template.App_Org_Id\"\r\n ></extend-select>\r\n <extend-input [label]=\"'Code'\" [(_ngModel)]=\"template.Code\"></extend-input>\r\n <extend-input [label]=\"'Name'\" [(_ngModel)]=\"template.Name\"></extend-input>\r\n <extend-select\r\n [label]=\"'Type'\"\r\n [lstItem]=\"template.lstTemplateType\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"template.DocType\"\r\n ></extend-select>\r\n <extend-textarea [label]=\"'Desscription'\" [(_ngModel)]=\"template.Description\"></extend-textarea>\r\n <extend-select\r\n [label]=\"'Print template'\"\r\n [lstItem]=\"template.lstTemplatePrint\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"template.TemplatePrint\"\r\n ></extend-select>\r\n <extend-select\r\n [label]=\"'Apply to'\"\r\n [lstItem]=\"template.lstApplyTo\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"template.ApplyTo\"\r\n ></extend-select>\r\n\r\n <extend-checkbox [label]=\"'Active'\" [(_ngModel)]=\"template.IsActive\"></extend-checkbox>\r\n <extend-checkbox [label]=\"'Use Allow back'\" [(_ngModel)]=\"template.editorOption.AllowbackInUse\"></extend-checkbox>\r\n\r\n <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Stage</h3>\r\n\r\n <div nz-row [nzGutter]=\"[0, 5]\">\r\n @for (tag of getLstStage; track tag) {\r\n <div nz-col>\r\n <nz-tag (click)=\"hoverStage = tag\">\r\n {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\r\n </nz-tag>\r\n </div>\r\n }\r\n </div>\r\n\r\n <box [height]=\"16\"></box>\r\n\r\n <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Stage status</h3>\r\n\r\n <div nz-row [nzGutter]=\"[0, 5]\">\r\n @for (tag of template.lstStageStatus; track tag) {\r\n <div nz-col>\r\n <nz-tag\r\n [nzMode]=\"checkRemoveableStageStatus(tag) ? 'closeable' : 'default'\"\r\n (nzOnClose)=\"handleCloseStageStatus(tag)\"\r\n >\r\n {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\r\n </nz-tag>\r\n </div>\r\n }\r\n\r\n <div nz-col>\r\n @if (!inputStageStatusVisible) {\r\n <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInputStageStatus()\">\r\n <nz-icon nzType=\"plus\" />\r\n New Action type\r\n </nz-tag>\r\n } @else {\r\n <input\r\n #inputStageStatusElement\r\n nz-input\r\n nzSize=\"small\"\r\n type=\"text\"\r\n style=\"width: 150px\"\r\n placeholder=\"Code\"\r\n [(ngModel)]=\"inputStageStatusCode\"\r\n (keydown.enter)=\"inputStageStatusNameElement.select()\"\r\n />\r\n <input\r\n #inputStageStatusNameElement\r\n nz-input\r\n nzSize=\"small\"\r\n type=\"text\"\r\n style=\"width: 150px\"\r\n placeholder=\"Name\"\r\n [(ngModel)]=\"inputStageStatusName\"\r\n (blur)=\"handleInputStageStatusConfirm()\"\r\n (keydown.enter)=\"handleInputStageStatusConfirm()\"\r\n />\r\n }\r\n </div>\r\n </div>\r\n\r\n <box [height]=\"16\"></box>\r\n\r\n <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Action type</h3>\r\n\r\n <div nz-row [nzGutter]=\"[0, 5]\">\r\n @for (tag of template.lstActionType; track tag) {\r\n <div nz-col>\r\n <nz-tag\r\n [nzMode]=\"checkRemoveableActionType(tag) ? 'closeable' : 'default'\"\r\n (nzOnClose)=\"handleCloseActionType(tag)\"\r\n >\r\n {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\r\n </nz-tag>\r\n </div>\r\n }\r\n\r\n <div nz-col>\r\n @if (!inputActionTypeVisible) {\r\n <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInputActionType()\">\r\n <nz-icon nzType=\"plus\" />\r\n New Action type\r\n </nz-tag>\r\n } @else {\r\n <input\r\n #inputActionTypeElement\r\n nz-input\r\n nzSize=\"small\"\r\n type=\"text\"\r\n style=\"width: 150px\"\r\n placeholder=\"Code\"\r\n [(ngModel)]=\"inputActionTypeCode\"\r\n (keydown.enter)=\"inputActionTypeNameElement.select()\"\r\n />\r\n <input\r\n #inputActionTypeNameElement\r\n nz-input\r\n nzSize=\"small\"\r\n type=\"text\"\r\n style=\"width: 150px\"\r\n placeholder=\"Name\"\r\n [(ngModel)]=\"inputActionTypeName\"\r\n (blur)=\"handleInputActionTypeConfirm()\"\r\n (keydown.enter)=\"handleInputActionTypeConfirm()\"\r\n />\r\n }\r\n </div>\r\n </div>\r\n\r\n <box [height]=\"16\"></box>\r\n\r\n <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Action status</h3>\r\n\r\n <div nz-row [nzGutter]=\"[0, 5]\">\r\n @for (tag of template.lstActionStatus; track tag) {\r\n <div nz-col>\r\n @if (template.editingActionStatus != tag) {\r\n <nz-tag\r\n [nzMode]=\"checkRemoveableActionStatus(tag.Code) ? 'closeable' : 'default'\"\r\n (nzOnClose)=\"handleClose(tag.Code)\"\r\n (click)=\"template.editingActionStatus = checkRemoveableActionStatus(tag.Code) ? tag : undefined\"\r\n >\r\n {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\r\n </nz-tag>\r\n } @else {\r\n <input\r\n nz-input\r\n nzSize=\"small\"\r\n type=\"text\"\r\n style=\"width: 150px\"\r\n [appAutoFocus]=\"true\"\r\n [(ngModel)]=\"tag.Code\"\r\n (blur)=\"template.editingActionStatus = undefined\"\r\n (keydown.enter)=\"template.editingActionStatus = undefined\"\r\n />&nbsp;&nbsp;\r\n }\r\n </div>\r\n }\r\n\r\n <div nz-col>\r\n @if (!inputVisible) {\r\n <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInput()\">\r\n <nz-icon nzType=\"plus\" />\r\n New Action status\r\n </nz-tag>\r\n } @else {\r\n <input\r\n #inputElement\r\n nz-input\r\n nzSize=\"small\"\r\n type=\"text\"\r\n style=\"width: 150px\"\r\n placeholder=\"+ New Action status\"\r\n [(ngModel)]=\"inputValue\"\r\n (blur)=\"handleInputConfirm()\"\r\n (keydown.enter)=\"handleInputConfirm()\"\r\n />\r\n }\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #footerTplTemplate>\r\n <div nz-flex [nzGap]=\"6\" [nzJustify]=\"'end'\">\r\n <button nz-button nzDanger [nzLoading]=\"!ready\" (click)=\"save()\">Save</button>\r\n <button nz-button (click)=\"drawTemplateVisibel = false\">Close</button>\r\n </div>\r\n </ng-template>\r\n</nz-drawer>\r\n\r\n<!-- drawer STAGE -->\r\n<nz-drawer\r\n [nzTitle]=\"drawerTitleStage\"\r\n [nzPlacement]=\"selectedStage?.editorOption?.drawerPosition == 'left' ? 'left' : 'right'\"\r\n [nzVisible]=\"!!selectedStage\"\r\n [nzWidth]=\"'calc(50vw)'\"\r\n [nzClosable]=\"false\"\r\n [nzFooter]=\"footerTplNode\"\r\n (nzOnClose)=\"selectedStage = undefined\"\r\n>\r\n <ng-template #drawerTitleStage>\r\n <div nz-row nzJustify=\"space-between\">\r\n @if (selectedStage && selectedStage.editorOption) {\r\n @if (selectedStage.editorOption.drawerPosition == \"left\") {\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n nz-tooltip=\"To the right\"\r\n (click)=\"selectedStage.editorOption.drawerPosition = 'right'\"\r\n >\r\n <nz-icon nzType=\"double-right\"></nz-icon>\r\n </button>\r\n STAGE\r\n } @else {\r\n STAGE\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n nz-tooltip=\"To the left\"\r\n (click)=\"selectedStage.editorOption.drawerPosition = 'left'\"\r\n >\r\n <nz-icon nzType=\"double-left\"></nz-icon>\r\n </button>\r\n }\r\n }\r\n </div>\r\n </ng-template>\r\n <ng-container *nzDrawerContent>\r\n <ng-container *ngIf=\"selectedStage\">\r\n <nz-radio-group [(ngModel)]=\"selectedStage.StageType\">\r\n <label nz-radio nzValue=\"_start_\">UI start</label>\r\n <label nz-radio nzValue=\"_end_\">UI end</label>\r\n <label nz-radio nzValue=\"start\">START</label>\r\n <label nz-radio nzValue=\"node\">NODE</label>\r\n <label nz-radio nzValue=\"end\">END</label>\r\n </nz-radio-group>\r\n\r\n <box [height]=\"16\"></box>\r\n\r\n <div nz-row [nzGutter]=\"32\" class=\"form-item-no-bottom\">\r\n <extend-input\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Code'\"\r\n [floatingLabel]=\"true\"\r\n [required]=\"true\"\r\n [(_ngModel)]=\"selectedStage.Code\"\r\n ></extend-input>\r\n\r\n <extend-input\r\n nz-col\r\n [nzSpan]=\"16\"\r\n [label]=\"'Name'\"\r\n [floatingLabel]=\"true\"\r\n [required]=\"true\"\r\n [(_ngModel)]=\"selectedStage.Name\"\r\n ></extend-input>\r\n </div>\r\n\r\n <div nz-row [nzGutter]=\"32\" class=\"form-item-no-bottom\">\r\n <extend-input-number\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Sequence'\"\r\n [floatingLabel]=\"true\"\r\n [(_ngModel)]=\"selectedStage.SeqValue\"\r\n ></extend-input-number>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"16\"\r\n [label]=\"'Org implement'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"lstOrg\"\r\n [valueField]=\"'App_Org_Id'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedStage.App_Org_Id\"\r\n ></extend-select>\r\n </div>\r\n\r\n <div nz-row [nzGutter]=\"32\" class=\"form-item-no-bottom\">\r\n <extend-input-number\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Number of Days'\"\r\n [floatingLabel]=\"true\"\r\n [precision]=\"1\"\r\n [(_ngModel)]=\"selectedStage.NumberDay\"\r\n ></extend-input-number>\r\n </div>\r\n\r\n @if (selectedStage.editorOption) {\r\n @if ([\"start\", \"node\", \"end\"].includes(selectedStage.StageType.toLowerCase())) {\r\n <extend-checkbox\r\n [label]=\"'Reverse'\"\r\n [labelSpan]=\"0\"\r\n [(_ngModel)]=\"selectedStage.editorOption.isReverse\"\r\n ></extend-checkbox>\r\n }\r\n\r\n <extend-checkbox\r\n [label]=\"'Require user action'\"\r\n [labelSpan]=\"0\"\r\n [(_ngModel)]=\"selectedStage.IsRequireUser\"\r\n ></extend-checkbox>\r\n }\r\n\r\n <box [height]=\"16\"></box>\r\n\r\n <div nz-row [nzGutter]=\"16\">\r\n <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;List Action</h3>\r\n <div nz-col>\r\n <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"addAction()\">\r\n <nz-icon nzType=\"plus\"></nz-icon>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <nz-table nzSize=\"small\" [nzData]=\"lstActionOfCurrentStage\" [nzShowPagination]=\"false\" [nzNoResult]=\"'&nbsp;'\">\r\n <thead>\r\n <tr [hidden]=\"true\">\r\n <th nzWidth=\"40px\"></th>\r\n <th></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (action of lstActionOfCurrentStage; track $index) {\r\n <tr (click)=\"onclickaction(action)\">\r\n <td\r\n style=\"border-bottom: solid 1px orange\"\r\n [ngStyle]=\"{\r\n 'border-left': action == hoverAction ? 'solid 4px orange' : '',\r\n 'border-top': $index == 0 ? 'solid 1px orange' : '',\r\n }\"\r\n >\r\n ({{ $index + 1 }})\r\n <nz-icon\r\n nzType=\"delete\"\r\n nzTheme=\"outline\"\r\n class=\"color-warn cursor-pointer icon-size-16\"\r\n (click)=\"$event.stopPropagation(); deleteAction(action)\"\r\n ></nz-icon>\r\n </td>\r\n <td\r\n style=\"border-bottom: solid 1px orange\"\r\n [ngStyle]=\"{\r\n 'border-top': $index == 0 ? 'solid 1px orange' : '',\r\n }\"\r\n >\r\n <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\r\n <div nz-col [nzSpan]=\"8\" class=\"has-floating-label floating-label\">\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"24\" style=\"z-index: 2\">\r\n <label>Action status</label>\r\n </nz-form-label>\r\n <nz-form-control [nzSpan]=\"24\">\r\n <nz-input-group class=\"full-width\">\r\n <input\r\n nz-input\r\n [(ngModel)]=\"action.ActionStatus\"\r\n [nzAutocomplete]=\"auto\"\r\n (ngModelChange)=\"nzAutocompletechange($event, template.lstActionStatus)\"\r\n (click)=\"lstActionStatusFiltered = template.lstActionStatus\"\r\n (keyup.enter)=\"onenterAotu(action.ActionStatus)\"\r\n (blur)=\"onenterAotu(action.ActionStatus)\"\r\n />\r\n <nz-autocomplete #auto [compareWith]=\"compareFun\">\r\n @for (option of lstActionStatusFiltered; track $index) {\r\n <nz-auto-option [nzValue]=\"option.Code\" [nzLabel]=\"option.Code\">\r\n {{ option.Code }}\r\n <icon-delete\r\n *ngIf=\"checkRemoveableActionStatus(option.Code)\"\r\n style=\"float: right\"\r\n [size]=\"12\"\r\n (click)=\"handleClose(option.Code)\"\r\n ></icon-delete>\r\n </nz-auto-option>\r\n }\r\n </nz-autocomplete>\r\n </nz-input-group>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <extend-input\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Action text'\"\r\n [floatingLabel]=\"true\"\r\n [(_ngModel)]=\"action.ActionText\"\r\n (_ngModelChange)=\"onchangeActionText(action)\"\r\n ></extend-input>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Action type'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"template.lstActionType\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"action.ActionType\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Stage status'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"template.lstStageStatus\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"action.StageStatus\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Next stage'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"getlstStage\"\r\n [valueField]=\"'WF_TemplateStage_Id'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"action.To_WF_TemplateStage_Id\"\r\n (_ngModelChange)=\"onchangeNextStage(action)\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Next stage status'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"template.lstStageStatus\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"action.To_StageStatus\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Process status'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"template.lstProcessStatus\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"action.DocProcessStatus\"\r\n ></extend-select>\r\n </div>\r\n <box [height]=\"8\"></box>\r\n <div nz-row>Role</div>\r\n <div nz-row>\r\n <extend-select\r\n nz-col\r\n nzSpan=\"24\"\r\n [size]=\"'small'\"\r\n [lstItem]=\"lstRole\"\r\n [valueField]=\"'App_Role_Id'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [multiple]=\"true\"\r\n [(_ngModel)]=\"action._lstRoleId\"\r\n (_ngModelChange)=\"onselectedRoleEmail(action)\"\r\n ></extend-select>\r\n </div>\r\n <box [height]=\"8\"></box>\r\n <div nz-row>Email action</div>\r\n <div nz-row>\r\n <extend-select\r\n nz-col\r\n nzSpan=\"24\"\r\n [size]=\"'small'\"\r\n [lstItem]=\"lstEmailAction\"\r\n [valueField]=\"'ID'\"\r\n [displayField]=\"'Name'\"\r\n [multiple]=\"true\"\r\n [(_ngModel)]=\"action._lstEmailActionId\"\r\n (_ngModelChange)=\"onselectedRoleEmail(action)\"\r\n ></extend-select>\r\n </div>\r\n <box [height]=\"8\"></box>\r\n <div *ngIf=\"action._lstEmailActionId && action._lstEmailActionId.length\" nz-row>Email template</div>\r\n <div *ngIf=\"action._lstEmailActionId && action._lstEmailActionId.length\" nz-row>\r\n <div nz-col nzSpan=\"1\"></div>\r\n <div nz-col nzSpan=\"23\" class=\"form-item-no-bottom\" style=\"font-weight: normal\">\r\n @for (actionRef of lstActionRefOf(action); track $index) {\r\n <div nz-row>\r\n <extend-select\r\n nz-col\r\n nzSpan=\"24\"\r\n [labelSpan]=\"12\"\r\n [size]=\"'small'\"\r\n [label]=\"emailActionText(actionRef.To_WF_TemplateStageAction_Id)\"\r\n [lstItem]=\"lstEmailTemplate\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"actionRef.TemplateMail\"\r\n ></extend-select>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n <box [height]=\"8\"></box>\r\n <div nz-row [nzGutter]=\"8\">\r\n Action rule\r\n <button nz-button nzType=\"text\" nzSize=\"small\" (click)=\"actionRuleModalVisible = true\">\r\n <nz-icon nzType=\"export\" nzTheme=\"outline\" class=\"color-primary\" />\r\n </button>\r\n <button\r\n *ngIf=\"action.WF_TransitionsRule_Id\"\r\n nz-button\r\n nzType=\"text\"\r\n nzSize=\"small\"\r\n (click)=\"deleteActionRule(action)\"\r\n >\r\n <nz-icon nzType=\"delete\" nzTheme=\"outline\" class=\"color-warn\" />\r\n </button>\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n </tbody>\r\n </nz-table>\r\n\r\n <box [height]=\"16\"></box>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #footerTplNode>\r\n <div\r\n nz-flex\r\n [nzGap]=\"6\"\r\n [nzJustify]=\"\r\n selectedStage && selectedStage.editorOption && selectedStage.editorOption.drawerPosition == 'left'\r\n ? 'start'\r\n : 'end'\r\n \"\r\n >\r\n <button nz-button nzDanger nzDanger [nzLoading]=\"!ready\" (click)=\"save()\">Save</button>\r\n <button nz-button (click)=\"selectedStage = undefined\">Close</button>\r\n <button\r\n *ngIf=\"selectedStage && ['START', 'END'].indexOf(selectedStage.StageType) < 0\"\r\n nz-button\r\n nzDanger\r\n (click)=\"deleteStage()\"\r\n >\r\n Delete\r\n </button>\r\n </div>\r\n </ng-template>\r\n</nz-drawer>\r\n\r\n<!-- drawer ACTION -->\r\n<nz-drawer\r\n [nzTitle]=\"drawerTitleAction\"\r\n nzTitle=\"ACTION\"\r\n [nzPlacement]=\"selectedAction?.editorOption?.drawerPosition == 'left' ? 'left' : 'right'\"\r\n [nzClosable]=\"false\"\r\n [nzWidth]=\"750\"\r\n [nzVisible]=\"!!selectedAction\"\r\n [nzFooter]=\"footerTplAction\"\r\n (nzOnClose)=\"selectedAction = undefined\"\r\n>\r\n <ng-template #drawerTitleAction>\r\n <div nz-row nzJustify=\"space-between\">\r\n @if (selectedAction && selectedAction.editorOption) {\r\n @if (selectedAction.editorOption.drawerPosition == \"left\") {\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n nz-tooltip=\"To the right\"\r\n (click)=\"selectedAction.editorOption.drawerPosition = 'right'\"\r\n >\r\n <nz-icon nzType=\"double-right\"></nz-icon>\r\n </button>\r\n ACTION\r\n } @else {\r\n ACTION\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n nz-tooltip=\"To the left\"\r\n (click)=\"selectedAction.editorOption.drawerPosition = 'left'\"\r\n >\r\n <nz-icon nzType=\"double-left\"></nz-icon>\r\n </button>\r\n }\r\n }\r\n </div>\r\n </ng-template>\r\n <ng-container *nzDrawerContent>\r\n <ng-container *ngIf=\"selectedAction\">\r\n <div>\r\n <strong\r\n >{{ selectedAction.getFromStageCode(lstStage) }} -> {{ selectedAction.getToStageCode(lstStage) }}</strong\r\n >\r\n </div>\r\n <div>{{ selectedAction.getFromStageName(lstStage) }} -> {{ selectedAction.getToStageName(lstStage) }}</div>\r\n\r\n <box [height]=\"16\"></box>\r\n\r\n <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\r\n <div nz-col [nzSpan]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"24\" style=\"height: 32px\">Action status</nz-form-label>\r\n <nz-form-control [nzSpan]=\"24\">\r\n <nz-input-group class=\"full-width\">\r\n <input\r\n nz-input\r\n [(ngModel)]=\"selectedAction.ActionStatus\"\r\n [nzAutocomplete]=\"auto\"\r\n (ngModelChange)=\"nzAutocompletechange($event, template.lstActionStatus)\"\r\n (click)=\"lstActionStatusFiltered = template.lstActionStatus\"\r\n (keyup.enter)=\"onenterAotu(selectedAction.ActionStatus)\"\r\n (blur)=\"onenterAotu(selectedAction.ActionStatus)\"\r\n />\r\n <nz-autocomplete #auto [compareWith]=\"compareFun\">\r\n @for (option of lstActionStatusFiltered; track $index) {\r\n <nz-auto-option [nzValue]=\"option.Code\" [nzLabel]=\"option.Code\">\r\n {{ option.Code }}\r\n <icon-delete\r\n *ngIf=\"checkRemoveableActionStatus(option.Code)\"\r\n style=\"float: right\"\r\n [size]=\"12\"\r\n (click)=\"handleClose(option.Code)\"\r\n ></icon-delete>\r\n </nz-auto-option>\r\n }\r\n </nz-autocomplete>\r\n </nz-input-group>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <extend-input\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Action text'\"\r\n [floatingLabel]=\"true\"\r\n [(_ngModel)]=\"selectedAction.ActionText\"\r\n (_ngModelChange)=\"onchangeActionText(selectedAction)\"\r\n ></extend-input>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Action type'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"template.lstActionType\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedAction.ActionType\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Stage status'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"template.lstStageStatus\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedAction.StageStatus\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Next stage'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"lstStage\"\r\n [valueField]=\"'WF_TemplateStage_Id'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedAction.To_WF_TemplateStage_Id\"\r\n (_ngModelChange)=\"onchangeNextStage(selectedAction)\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Next stage status'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"template.lstStageStatus\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedAction.To_StageStatus\"\r\n ></extend-select>\r\n </div>\r\n\r\n <!-- <box [height]=\"16\"></box> -->\r\n <nz-divider></nz-divider>\r\n\r\n @if (template.editorOption.AllowbackInUse) {\r\n <extend-checkbox\r\n [label]=\"'Allow back'\"\r\n [labelSpan]=\"0\"\r\n [(_ngModel)]=\"selectedAction.allowBack\"\r\n (_ngModelChange)=\"onchangeAllowBack(selectedAction)\"\r\n ></extend-checkbox>\r\n }\r\n\r\n <box [height]=\"16\"></box>\r\n\r\n @if (selectedAction.allowBack) {\r\n <div>\r\n <strong\r\n >{{ selectedAction.getToStageCode(lstStage) }} -> {{ selectedAction.getFromStageCode(lstStage) }}</strong\r\n >\r\n </div>\r\n <div>{{ selectedAction.getToStageName(lstStage) }} -> {{ selectedAction.getFromStageName(lstStage) }}</div>\r\n\r\n @if (selectedBackAction) {\r\n <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\r\n <div nz-col [nzSpan]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"24\" style=\"height: 32px\">Action status</nz-form-label>\r\n <nz-form-control [nzSpan]=\"24\">\r\n <nz-input-group class=\"full-width\">\r\n <input\r\n nz-input\r\n [(ngModel)]=\"selectedBackAction.ActionStatus\"\r\n [nzAutocomplete]=\"auto\"\r\n (ngModelChange)=\"nzAutocompletechange($event, template.lstActionStatus)\"\r\n (click)=\"lstActionStatusFiltered = template.lstActionStatus\"\r\n (keyup.enter)=\"onenterAotu(selectedBackAction.ActionStatus)\"\r\n (blur)=\"onenterAotu(selectedBackAction.ActionStatus)\"\r\n />\r\n <nz-autocomplete #auto [compareWith]=\"compareFun\">\r\n @for (option of lstActionStatusFiltered; track $index) {\r\n <nz-auto-option [nzValue]=\"option.Code\" [nzLabel]=\"option.Code\">\r\n {{ option.Code }}\r\n <icon-delete\r\n *ngIf=\"checkRemoveableActionStatus(option.Code)\"\r\n style=\"float: right\"\r\n [size]=\"12\"\r\n (click)=\"handleClose(option.Code)\"\r\n ></icon-delete>\r\n </nz-auto-option>\r\n }\r\n </nz-autocomplete>\r\n </nz-input-group>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <extend-input\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Action text'\"\r\n [floatingLabel]=\"true\"\r\n [(_ngModel)]=\"selectedBackAction.ActionText\"\r\n (_ngModelChange)=\"onchangeActionText(selectedBackAction)\"\r\n ></extend-input>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Action type'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"template.lstActionType\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedBackAction.ActionType\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Stage status'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"template.lstStageStatus\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedBackAction.StageStatus\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Next stage'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"lstStage\"\r\n [valueField]=\"'WF_TemplateStage_Id'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedBackAction.To_WF_TemplateStage_Id\"\r\n (_ngModelChange)=\"onchangeNextStage(selectedBackAction)\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Next stage status'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"template.lstStageStatus\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedBackAction.To_StageStatus\"\r\n ></extend-select>\r\n </div>\r\n }\r\n }\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #footerTplAction>\r\n <div\r\n nz-flex\r\n [nzGap]=\"6\"\r\n [nzJustify]=\"selectedAction && selectedAction.editorOption.drawerPosition == 'left' ? 'start' : 'end'\"\r\n >\r\n <button nz-button nzDanger nzDanger [nzLoading]=\"!ready\" (click)=\"save()\">Save</button>\r\n <button nz-button nzDanger (click)=\"deleteAction(selectedAction!)\">Delete</button>\r\n <button nz-button (click)=\"selectedAction = undefined\">Close</button>\r\n </div>\r\n </ng-template>\r\n</nz-drawer>\r\n\r\n<!-- setting editor -->\r\n<nz-drawer\r\n [nzTitle]=\"drawSettingTitle\"\r\n nzPlacement=\"right\"\r\n [nzClosable]=\"false\"\r\n [nzVisible]=\"settingVisible\"\r\n (nzOnClose)=\"settingVisible = false\"\r\n>\r\n <ng-template #drawSettingTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; Editor </ng-template>\r\n <ng-container *nzDrawerContent>\r\n <div class=\"form-item-no-bottom\">\r\n <extend-checkbox [label]=\"'Show grid'\" [labelSpan]=\"0\" [(_ngModel)]=\"wfcSetting.ShowGrid\"></extend-checkbox>\r\n\r\n <box [height]=\"16\"></box>\r\n </div>\r\n </ng-container>\r\n</nz-drawer>\r\n\r\n<!-- editor infomation -->\r\n<nz-drawer\r\n [nzTitle]=\"drawInfoTitle\"\r\n nzPlacement=\"right\"\r\n [nzClosable]=\"false\"\r\n [nzVisible]=\"infoVisible\"\r\n (nzOnClose)=\"infoVisible = false\"\r\n>\r\n <ng-template #drawInfoTitle> <nz-icon nzType=\"info-circle\"></nz-icon> &nbsp; Infomation </ng-template>\r\n <ng-container *nzDrawerContent>\r\n <p>1. C\u00E1c th\u00E0nh ph\u1EA7n: Stage or Node (stag, node quy tr\u00ECnh), Action or Connector (\u0111\u01B0\u1EDDng n\u1ED1i gi\u1EEFa c\u00E1c stage)</p>\r\n <p>2. Save \u0111\u1EC3 load c\u00E1c th\u00F4ng tin: Stage status, Action type</p>\r\n <p>\r\n 3. N\u1ED1i 2 node (t\u1EA1o connector t\u01B0\u01A1ng \u0111\u01B0\u01A1ng t\u1EA1o action):\r\n <br />- Click ch\u1EA5m cam t\u1EEB Node ngu\u1ED3n \u0111\u1EBFn ch\u1EA5m xanh c\u1EE7a Node \u0111\u00EDch (ho\u1EB7c click v\u00E0o Node \u0111\u00EDch), c\u00F3 th\u1EC3 click th\u00E0nh\r\n nhi\u1EC1u \u0111i\u1EC3m \u0111\u1EC3 t\u1EA1o \u0111\u01B0\u1EDDng n\u1ED1i cong<br />- Khi hover connector chuy\u1EC3n sang m\u1EA7u \u0111\u1ECF c\u00F3 th\u1EC3 click \u0111\u00FAp \u0111\u1EC3 th\u00EAm m\u1ED9t \u0111i\u1EC3m\r\n c\u1EE7a connector<br />- Khi hover l\u00EAn \u0111i\u1EC3m c\u1EE7a connector c\u00F3 th\u1EC3 di chuy\u1EC3n \u0111i\u1EC3m \u0111\u00F3 b\u1EB1ng c\u00E1ch nh\u1EA5n gi\u1EEF chu\u1ED9t v\u00E0 k\u00E9o th\u1EA3\r\n \u0111\u1EBFn v\u1ECB tr\u00ED m\u1EDBi<br />- Chu\u1ED9t ph\u1EA3i v\u00E0o \u0111i\u1EC3m n\u1ED1i connector \u0111\u1EC3 xo\u00E1 \u0111i\u1EC3m \u0111\u00F3\r\n </p>\r\n </ng-container>\r\n</nz-drawer>\r\n\r\n<!-- action rule modal -->\r\n<nz-modal\r\n [(nzVisible)]=\"actionRuleModalVisible\"\r\n [nzMaskClosable]=\"false\"\r\n [nzClosable]=\"false\"\r\n [nzKeyboard]=\"true\"\r\n [nzWidth]=\"'75vw'\"\r\n>\r\n <ng-container *nzModalTitle>\r\n ACTION RULE: [{{ selectedStage?.Code }}] {{ selectedStage?.Name }} > [{{ hoverAction?.ActionStatus }}]\r\n {{ hoverAction?.ActionText }}\r\n </ng-container>\r\n <ng-container *nzModalContent>\r\n @if (hoverAction && hoverAction.actionRule) {\r\n <div nz-row [nzGutter]=\"32\" class=\"form-item-no-bottom\">\r\n <extend-input nz-col nzSpan=\"12\" [label]=\"'Code'\" [(_ngModel)]=\"hoverAction.actionRule.Code\"></extend-input>\r\n <extend-input nz-col nzSpan=\"12\" [label]=\"'Name'\" [(_ngModel)]=\"hoverAction.actionRule.Name\"></extend-input>\r\n <extend-input nz-col nzSpan=\"12\" [label]=\"'Note'\" [(_ngModel)]=\"hoverAction.actionRule.Note\"></extend-input>\r\n <extend-checkbox\r\n nz-col\r\n nzSpan=\"12\"\r\n [label]=\"'IsActive'\"\r\n [(_ngModel)]=\"hoverAction.actionRule.IsActive\"\r\n ></extend-checkbox>\r\n </div>\r\n <box [height]=\"8\"></box>\r\n <div nz-row [nzGutter]=\"16\">\r\n <div nz-col nzSpan=\"24\">\r\n <nz-table nzSize=\"small\" [nzData]=\"hoverAction.actionRule.lstLine\" [nzShowPagination]=\"false\">\r\n <thead>\r\n <tr>\r\n <th [nzWidth]=\"'40px'\"><icon-add (click)=\"addActionRuleLine()\"></icon-add></th>\r\n <th [nzWidth]=\"'250px'\">Rule type</th>\r\n <th>Template</th>\r\n <th>Template stage</th>\r\n <th>Template action</th>\r\n <th>Store to exec</th>\r\n <th [nzWidth]=\"'50px'\">Active</th>\r\n <th>Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (item of hoverAction.actionRule.lstLine; track $index) {\r\n <tr>\r\n <td><icon-delete (click)=\"deleteActionRuleLine(hoverAction.actionRule, item)\"></icon-delete></td>\r\n <td>\r\n <dic-domain-select\r\n [size]=\"'small'\"\r\n [DomainCode]=\"'WF_RuleType'\"\r\n [(_ngModel)]=\"item.RuleType\"\r\n ></dic-domain-select>\r\n </td>\r\n <td>\r\n <extend-select\r\n #xxx\r\n [size]=\"'small'\"\r\n [lstItem]=\"lstTemplateForRule(item)\"\r\n [valueField]=\"'WF_Template_Id'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [dropdownMatchSelectWidth]=\"false\"\r\n [(_ngModel)]=\"item.WF_Template_Id\"\r\n (_ngModelChange)=\"item.WF_TemplateStage_Id = 0; item.WF_TemplateStageAction_Id = 0\"\r\n ></extend-select>\r\n </td>\r\n <td>\r\n <extend-select\r\n #yyy\r\n [size]=\"'small'\"\r\n [lstItem]=\"lstStageForRule(xxx._ngModel)\"\r\n [valueField]=\"'WF_TemplateStage_Id'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [dropdownMatchSelectWidth]=\"false\"\r\n [(_ngModel)]=\"item.WF_TemplateStage_Id\"\r\n (_ngModelChange)=\"item.WF_TemplateStageAction_Id = 0\"\r\n ></extend-select>\r\n </td>\r\n <td>\r\n <extend-select\r\n [size]=\"'small'\"\r\n [lstItem]=\"lstActionForRule(yyy._ngModel)\"\r\n [valueField]=\"'WF_TemplateStageAction_Id'\"\r\n [displayFields]=\"['ActionStatus', 'ActionText']\"\r\n [dropdownMatchSelectWidth]=\"false\"\r\n [(_ngModel)]=\"item.WF_TemplateStageAction_Id\"\r\n ></extend-select>\r\n </td>\r\n <td>\r\n <extend-input [size]=\"'small'\" [(_ngModel)]=\"item.StoreToExec\"></extend-input>\r\n </td>\r\n <td class=\"text-center\">\r\n <extend-checkbox [(_ngModel)]=\"item.IsActive\"></extend-checkbox>\r\n </td>\r\n <td>\r\n <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"checkAction(item)\">Check</button>\r\n </td>\r\n </tr>\r\n }\r\n </tbody>\r\n </nz-table>\r\n </div>\r\n </div>\r\n }\r\n </ng-container>\r\n <ng-container *nzModalFooter>\r\n <button nz-button nzType=\"primary\" (click)=\"checkAllAction()\">OK</button>\r\n </ng-container>\r\n</nz-modal>\r\n", styles: ["@charset \"UTF-8\";::ng-deep .workflow-wrapper{border:solid 1px lightgray;overflow:hidden;width:100%}.workflow-canvas{position:relative;background:#f0f2f5;cursor:default;overflow:hidden;outline:1px dashed rgba(0,0,0,.1)}.workflow-canvas .edges-layer{position:absolute;inset:0;width:100%;height:100%;z-index:1}.workflow-canvas .edges-layer path{stroke-width:2;fill:none}.canvas-content{transform-origin:0 0;width:100%;height:100%}.canvas-content{outline:1px dashed red}.canvas-content.panning{cursor:grab}.canvas-content.panning:active{cursor:grabbing}.workflow-canvas.panning{cursor:grab}.workflow-canvas.panning:active{cursor:grabbing}.workflow-canvas.connecting,.workflow-canvas.connecting .workflow-node{cursor:crosshair}.workflow-node{position:absolute;width:160px;cursor:grab;-webkit-user-select:none;user-select:none;z-index:2}.workflow-node:active{cursor:grabbing}.workflow-node.connecting-source,.workflow-node.selected,.workflow-node:hover:not(.workflow-node-start,.workflow-node-end){outline:2px dashed #1890ff}.workflow-node .title{font-weight:600;margin-bottom:6px}.workflow-node-start{width:0px}.workflow-node-start.connecting-source,.workflow-node-start.selected,.workflow-node-start:hover{outline:unset}.workflow-node-start.connecting-source nz-tag,.workflow-node-start.selected nz-tag,.workflow-node-start:hover nz-tag{outline:2px dashed}.workflow-node-start nz-tag{position:relative;top:45px;right:35px}.workflow-node-end{width:0px}.workflow-node-end.connecting-source,.workflow-node-end.selected,.workflow-node-end:hover{outline:unset}.workflow-node-end.connecting-source nz-tag,.workflow-node-end.selected nz-tag,.workflow-node-end:hover nz-tag{outline:2px dashed}.workflow-node-end nz-tag{position:relative;top:45px;right:32px}.connector{position:absolute;top:39px;width:12px;height:12px;background:#1890ff;border-radius:50%;transform:translateY(-50%);cursor:crosshair;transition:box-shadow .15s ease-out,transform .15s ease-out}.connector:hover{box-shadow:0 0 0 3px #1890ff4d;transform:translateY(-50%) scale(1.15)}.connector-right{right:-8px;background:orange}.connector-right.reverse,.connector-left{left:-8px}.connector-left.reverse{left:unset;right:-8px}.connector-start{width:16px;height:16px;right:-8px;background:green;box-shadow:0 0 0 3px #1890ff4d}.connector-end{width:16px;height:16px;left:-8px;background:#000;box-shadow:0 0 0 3px #1890ff4d}.edge{cursor:pointer;stroke:#1890ff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;fill:none;transition:stroke .15s ease}.edge-hit{stroke:transparent;stroke-width:18px!important;fill:none;cursor:pointer}.edge-hit:hover+.edge{stroke:#ff4d4f;stroke-width:2}.workflow-canvas.dragging-point .edge-hit{pointer-events:none}.edge:hover+.edge-label{fill:#1890ff;font-weight:500}.edge-label{font-size:12px;fill:#555;pointer-events:none;-webkit-user-select:none;user-select:none}.blue{stroke:#1890ff!important}.red{stroke:#ff4d4f!important;box-shadow:0 0 0 3px #1890ff4d!important}.workflow-svg{background:transparent;overflow:visible}.waypoint{position:absolute;width:10px;height:10px;background:#ff4d4f;border-radius:50%;transform:translate(-50%,-50%) scale(1);cursor:move;z-index:1;transition:transform .12s ease-out,background-color .12s ease-out,box-shadow .12s ease-out}.waypoint:hover{background:#ff7875;transform:translate(-50%,-50%) scale(1.25);box-shadow:0 0 0 4px #ff787559}.waypoint.dragging{transition:none;transform:translate(-50%,-50%) scale(1.15);pointer-events:none}.workflow-canvas.dragging-point svg{cursor:grabbing}.selection-box{position:absolute;border:1px dashed #1890ff;background:#1890ff1a;pointer-events:none}.toolbar{position:absolute;top:8px;left:8px;display:flex;gap:4px;padding:6px;background:#fff;border-radius:6px;box-shadow:0 2px 8px #00000026;z-index:100}.toolbar .divider{width:1px;background:#e5e5e5;margin:0 2px}.zoom-toolbar{position:absolute;top:8px;left:8px;z-index:10;display:flex;align-items:center;gap:6px;background:#fff;padding:4px 6px;border-radius:6px;box-shadow:0 2px 6px #00000026}.zoom-toolbar span{min-width:40px;text-align:center;font-size:12px}nz-tag.selected{outline:2px dashed #1890ff}.grid-layer{position:absolute;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(rgba(0,0,0,.08) 1px,transparent 1px);background-size:20px 20px}.grid-layer{background-image:linear-gradient(to right,rgba(0,0,0,.06) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.06) 1px,transparent 1px);background-size:20px 20px}.editable-tag{background:#fff;border-style:dashed}::ng-deep .minimap{position:absolute;width:180px;height:125px;top:0;right:0;background-color:#eee;border:1px solid #aaa;opacity:.9;z-index:1}::ng-deep .minimap-node{position:absolute;background-color:#607a86}::ng-deep .minimap-node-round{position:absolute;background-color:#607a86;border-radius:10px}::ng-deep .minimap-node-round-start{background-color:green}::ng-deep .minimap-node-round-end{background-color:#000}::ng-deep .minimap-viewport{position:absolute;box-sizing:border-box;background-color:#4f6f7e66;z-index:1;cursor:move}::ng-deep .has-floating-label.floating-label{position:relative;padding-top:14px}::ng-deep .has-floating-label nz-form-item nz-form-label{position:absolute;top:12px;left:16px;transform:translateY(-50%);background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 80%,#ffffff 80%);z-index:1;height:auto;line-height:normal;padding:0 4px}::ng-deep .has-floating-label nz-form-item nz-form-label label{font-size:12px;color:var(--darkgray, #565656);font-weight:700;height:auto;line-height:normal;padding:0;display:flex;align-items:center}::ng-deep .has-floating-label .full-width{width:100%}.has-floating-label.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label,.has-floating-label.floating-label nz-form-item:has(input[disabled]) nz-form-label,.has-floating-label.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label{background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 60%,#f5f5f5 50%)}.has-floating-label.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label label,.has-floating-label.floating-label nz-form-item:has(input[disabled]) nz-form-label label,.has-floating-label.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label label{color:#bfbfbf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzCardModule }, { kind: "component", type: i3$5.NzCardComponent, selector: "nz-card", inputs: ["nzBordered", "nzLoading", "nzHoverable", "nzBodyStyle", "nzCover", "nzActions", "nzType", "nzSize", "nzTitle", "nzExtra"], exportAs: ["nzCard"] }, { kind: "ngmodule", type: NzDrawerModule }, { kind: "component", type: i4$3.NzDrawerComponent, selector: "nz-drawer", inputs: ["nzContent", "nzCloseIcon", "nzClosable", "nzMaskClosable", "nzMask", "nzCloseOnNavigation", "nzNoAnimation", "nzKeyboard", "nzTitle", "nzExtra", "nzFooter", "nzPlacement", "nzSize", "nzMaskStyle", "nzBodyStyle", "nzWrapClassName", "nzWidth", "nzHeight", "nzZIndex", "nzOffsetX", "nzOffsetY", "nzVisible"], outputs: ["nzOnViewInit", "nzOnClose", "nzVisibleChange"], exportAs: ["nzDrawer"] }, { kind: "directive", type: i4$3.NzDrawerContentDirective, selector: "[nzDrawerContent]", exportAs: ["nzDrawerContent"] }, { kind: "ngmodule", type: NzTagModule }, { kind: "component", type: i7.NzTagComponent, selector: "nz-tag", inputs: ["nzMode", "nzColor", "nzChecked", "nzBordered"], outputs: ["nzOnClose", "nzCheckedChange"], exportAs: ["nzTag"] }, { kind: "ngmodule", type: NzRadioModule }, { kind: "component", type: i6$3.NzRadioComponent, selector: "[nz-radio],[nz-radio-button]", inputs: ["nzValue", "nzDisabled", "nzAutoFocus", "nz-radio-button"], exportAs: ["nzRadio"] }, { kind: "component", type: i6$3.NzRadioGroupComponent, selector: "nz-radio-group", inputs: ["nzDisabled", "nzButtonStyle", "nzSize", "nzName"], exportAs: ["nzRadioGroup"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i2$2.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i3$2.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i4$1.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i8.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { kind: "component", type: ExtendInput, selector: "extend-input", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "inputClass", "labelSpan", "labelFlex", "inputFlex", "showClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "autofocus", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "displayField", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "onclickClearIcon", "onenter"] }, { kind: "component", type: ExtendSelectComponent, selector: "extend-select", inputs: ["label", "floatingLabel", "placeHolder", "labelAlign", "dropdownMatchSelectWidth", "labelSpan", "labelFlex", "disabled", "required", "noBottom", "multiple", "showSelectAll", "maxTagCount", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "lstItem", "displayField", "displayFields", "valueField", "formData", "controlName", "_ngModel", "isSubmited"], outputs: ["_ngModelChange", "itemChange", "onFocus"] }, { kind: "component", type: ExtendCheckbox, selector: "extend-checkbox", inputs: ["label", "labelSpan", "labelFlex", "paddingTop", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "component", type: ExtendTextArea, selector: "extend-textarea", inputs: ["label", "placeHolder", "labelAlign", "floatingLabel", "displayInline", "formItemNoButtom", "labelSpan", "labelFlex", "inputFlex", "disabled", "required", "noBottom", "selectModeType", "inputClass", "size", "isSubmited", "minRows", "maxRows", "lstItem", "displayField", "valueField", "formData", "controlName", "_ngModel", "isTouched", "inputErrorMessage", "errorMessages"], outputs: ["_ngModelChange"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i5$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i5$1.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i3$3.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "component", type: ExtendInputNumber, selector: "extend-input-number", inputs: ["label", "placeHolder", "labelAlign", "floatingLabel", "hiddenUpDown", "labelSpan", "labelFlex", "inputFlex", "disabled", "required", "noBottom", "size", "min", "max", "precision", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "isSubmited", "separatorType", "formData", "controlName", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i6$1.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "directive", type: i6$1.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i6$1.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i6$1.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i6$1.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i6$1.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "ngmodule", type: NzDividerModule }, { kind: "component", type: i8$1.NzDividerComponent, selector: "nz-divider", inputs: ["nzText", "nzType", "nzOrientation", "nzVariant", "nzDashed", "nzPlain"], exportAs: ["nzDivider"] }, { kind: "directive", type: AutoFocusDirective, selector: "[appAutoFocus]", inputs: ["appAutoFocus"] }, { kind: "ngmodule", type: NzAutocompleteModule }, { kind: "component", type: i16$1.NzAutocompleteComponent, selector: "nz-autocomplete", inputs: ["nzWidth", "nzOverlayClassName", "nzOverlayStyle", "nzDefaultActiveFirstOption", "nzBackfill", "compareWith", "nzDataSource"], outputs: ["selectionChange"], exportAs: ["nzAutocomplete"] }, { kind: "component", type: i16$1.NzAutocompleteOptionComponent, selector: "nz-auto-option", inputs: ["nzValue", "nzLabel", "nzDisabled"], outputs: ["selectionChange", "mouseEntered"], exportAs: ["nzAutoOption"] }, { kind: "directive", type: i16$1.NzAutocompleteTriggerDirective, selector: "input[nzAutocomplete], textarea[nzAutocomplete]", inputs: ["nzAutocomplete"], exportAs: ["nzAutocompleteTrigger"] }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: NzModalComponent, selector: "nz-modal", inputs: ["nzMask", "nzMaskClosable", "nzCloseOnNavigation", "nzVisible", "nzClosable", "nzOkLoading", "nzOkDisabled", "nzCancelDisabled", "nzCancelLoading", "nzKeyboard", "nzNoAnimation", "nzCentered", "nzDraggable", "nzContent", "nzFooter", "nzZIndex", "nzWidth", "nzWrapClassName", "nzClassName", "nzStyle", "nzTitle", "nzCloseIcon", "nzMaskStyle", "nzBodyStyle", "nzOkText", "nzCancelText", "nzOkType", "nzOkDanger", "nzIconType", "nzModalType", "nzAutofocus", "nzOnOk", "nzOnCancel"], outputs: ["nzOnOk", "nzOnCancel", "nzAfterOpen", "nzAfterClose", "nzVisibleChange"], exportAs: ["nzModal"] }, { kind: "directive", type: NzModalContentDirective, selector: "[nzModalContent]", exportAs: ["nzModalContent"] }, { kind: "directive", type: NzModalTitleDirective, selector: "[nzModalTitle]", exportAs: ["nzModalTitle"] }, { kind: "component", type: IconAdd, selector: "icon-add", inputs: ["size"], outputs: ["click"] }, { kind: "directive", type: NzModalFooterDirective, selector: "[nzModalFooter]", exportAs: ["nzModalFooter"] }, { kind: "component", type: DicDomainSelectComponent, selector: "dic-domain-select", inputs: ["layOutType", "label", "placeHolder", "labelSpan", "labelAlign", "disabled", "required", "multiple", "showSelectAll", "maxTagCount", "inputWidth", "inputHeight", "size", "borderBottomOnly", "defaultFirstItem", "DomainCode", "ParentItemCode", "_ngModel", "formData", "controlName"], outputs: ["_ngModelChange"] }] });
12255
11451
  }
12256
11452
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: WorkflowEditorComponent, decorators: [{
12257
11453
  type: Component,
@@ -12285,7 +11481,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
12285
11481
  IconAdd,
12286
11482
  NzModalFooterDirective,
12287
11483
  DicDomainSelectComponent,
12288
- ], template: "<div\r\n #canvasRef\r\n class=\"workflow-canvas\"\r\n [class.connecting]=\"!!connectingFrom\"\r\n [class.dragging-point]=\"!!draggingPoint\"\r\n [style.width.px]=\"getCanvasWidth()\"\r\n [style.height.px]=\"getCanvasHeight()\"\r\n (mousedown)=\"onMouseDownCanvas($event)\"\r\n (mousemove)=\"onMouseMoveCanvas($event)\"\r\n (mouseup)=\"onMouseUpCanvas($event)\"\r\n (click)=\"onClickCanvas($event)\"\r\n>\r\n <!-- \r\n\r\n [style.width.px]=\"getCanvasWidth()\"\r\n [style.height.px]=\"getCanvasHeight()\" \r\n\r\n [style.width.px]=\"CANVAS_WIDTH\"\r\n [style.height.px]=\"CANVAS_HEIGHT\"\r\n\r\n style=\"width: 100%; height: calc(100vh - 120px)\"\r\n \r\n -->\r\n\r\n <div class=\"toolbar\" (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\r\n <button nz-button nzSize=\"small\" nz-tooltip=\"Editor setting\" (click)=\"settingVisible = true\">\r\n <nz-icon nzType=\"setting\"></nz-icon>\r\n </button>\r\n\r\n <button nz-button nzSize=\"small\" nz-tooltip=\"Infomation\" (click)=\"infoVisible = true\">\r\n <nz-icon nzType=\"info-circle\"></nz-icon>\r\n </button>\r\n\r\n <box [width]=\"1\"></box>\r\n <span class=\"divider\"></span>\r\n <box [width]=\"1\"></box>\r\n\r\n <button nz-button nzSize=\"small\" nz-tooltip=\"Template setting\" (click)=\"drawTemplateVisibel = true\">\r\n <nz-icon nzType=\"setting\"></nz-icon> T\r\n </button>\r\n\r\n <box [width]=\"1\"></box>\r\n <span class=\"divider\"></span>\r\n <box [width]=\"1\"></box>\r\n\r\n <button nz-button nzSize=\"small\" nzDanger [nzLoading]=\"!ready\" nz-tooltip=\"Save (Ctrl + S)\" (click)=\"save()\">\r\n <nz-icon nzType=\"save\"></nz-icon>\r\n </button>\r\n <button nz-button nzSize=\"small\" nz-tooltip=\"Add stage\" (click)=\"addStage()\">\r\n <nz-icon nzType=\"plus\" class=\"color-primary\"></nz-icon>\r\n </button>\r\n\r\n <box [width]=\"1\"></box>\r\n <span class=\"divider\"></span>\r\n <box [width]=\"1\"></box>\r\n\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n [nzType]=\"isMoveMode ? 'primary' : 'default'\"\r\n nz-tooltip=\"Move mode\"\r\n (click)=\"isMoveMode = true\"\r\n >\r\n <nz-icon><img src=\"/assets/icon/hand-palm.png\" width=\"19\" height=\"19\" /></nz-icon>\r\n </button>\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n [nzType]=\"!isMoveMode ? 'primary' : 'default'\"\r\n nz-tooltip=\"Select mode\"\r\n (click)=\"isMoveMode = false\"\r\n >\r\n <nz-icon><img src=\"/assets/icon/cursor.png\" width=\"19\" height=\"19\" /></nz-icon>\r\n </button>\r\n\r\n <box [width]=\"1\"></box>\r\n <span class=\"divider\"></span>\r\n <box [width]=\"1\"></box>\r\n\r\n <!-- UNDO / REDO -->\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n nzType=\"default\"\r\n [disabled]=\"undoStack.length === 0\"\r\n nz-tooltip=\"Undo\"\r\n (click)=\"undo()\"\r\n >\r\n <nz-icon nzType=\"undo\"></nz-icon>\r\n </button>\r\n\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n nzType=\"default\"\r\n [disabled]=\"redoStack.length === 0\"\r\n nz-tooltip=\"Redo\"\r\n (click)=\"redo()\"\r\n >\r\n <nz-icon nzType=\"redo\"></nz-icon>\r\n </button>\r\n\r\n <box [width]=\"1\"></box>\r\n <span class=\"divider\"></span>\r\n <box [width]=\"1\"></box>\r\n\r\n <!-- ALIGN -->\r\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignLeft()\">\u27F8</button>\r\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignCenter()\">\u2261</button>\r\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignRight()\">\u27F9</button>\r\n\r\n <span class=\"divider\"></span>\r\n\r\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignTop()\">\u21D1</button>\r\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignMiddle()\">\u2550</button>\r\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignBottom()\">\u21D3</button>\r\n\r\n <span class=\"divider\"></span>\r\n\r\n <!-- DISTRIBUTE -->\r\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 3\" (click)=\"distributeHorizontal()\">\r\n \u21C4\r\n </button>\r\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 3\" (click)=\"distributeVertical()\">\u21C5</button>\r\n </div>\r\n\r\n <div\r\n class=\"canvas-content\"\r\n [class.panning]=\"isMoveMode\"\r\n [style.transform]=\"'translate(' + template.editorOption.panX + 'px,' + template.editorOption.panY + 'px)'\"\r\n >\r\n <!-- GRID -->\r\n <div *ngIf=\"wfcSetting.ShowGrid\" class=\"grid-layer\"></div>\r\n\r\n <!-- <div class=\"zoom-toolbar\">\r\n <button nz-button nzSize=\"small\" (click)=\"zoomOut()\">\u2212</button>\r\n <span>{{ zoom * 100 | number: \"1.0-0\" }}%</span>\r\n <button nz-button nzSize=\"small\" (click)=\"zoomIn()\">+</button>\r\n </div> -->\r\n\r\n <!-- SVG EDGES -->\r\n <svg #svg class=\"edges-layer\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\">\r\n <g [attr.transform]=\"svgTransform\">\r\n <!-- DEFS -->\r\n <defs>\r\n <!-- glow effect -->\r\n <filter id=\"edge-glow\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\r\n <feGaussianBlur stdDeviation=\"2\" result=\"blur\" />\r\n <feMerge>\r\n <feMergeNode in=\"blur\" />\r\n <feMergeNode in=\"SourceGraphic\" />\r\n </feMerge>\r\n </filter>\r\n\r\n <!-- arrow markers -->\r\n <marker\r\n id=\"arrow-blue\"\r\n markerWidth=\"10\"\r\n markerHeight=\"10\"\r\n refX=\"10\"\r\n refY=\"5\"\r\n orient=\"auto\"\r\n markerUnits=\"strokeWidth\"\r\n >\r\n <path class=\"blue\" d=\"M0,0 L10,5 L0,10\"></path>\r\n </marker>\r\n\r\n <marker\r\n id=\"arrow-red\"\r\n markerWidth=\"10\"\r\n markerHeight=\"10\"\r\n refX=\"10\"\r\n refY=\"5\"\r\n orient=\"auto\"\r\n markerUnits=\"strokeWidth\"\r\n >\r\n <path class=\"red\" d=\"M0,0 L10,5 L0,10\"></path>\r\n </marker>\r\n\r\n <marker\r\n id=\"arrow-blue-start\"\r\n markerWidth=\"10\"\r\n markerHeight=\"10\"\r\n viewBox=\"0 0 10 10\"\r\n refX=\"0\"\r\n refY=\"5\"\r\n orient=\"auto\"\r\n markerUnits=\"strokeWidth\"\r\n >\r\n <path class=\"blue\" d=\"M10,0 L0,5 L10,10\"></path>\r\n </marker>\r\n\r\n <marker\r\n id=\"arrow-red-start\"\r\n markerWidth=\"10\"\r\n markerHeight=\"10\"\r\n viewBox=\"0 0 10 10\"\r\n refX=\"0\"\r\n refY=\"5\"\r\n orient=\"auto\"\r\n markerUnits=\"strokeWidth\"\r\n >\r\n <path class=\"red\" d=\"M10,0 L0,5 L10,10\"></path>\r\n </marker>\r\n </defs>\r\n\r\n <!-- EDGES B\u00CCNH TH\u01AF\u1EDCNG -->\r\n <ng-container *ngFor=\"let e of normalEdges; let i = index\">\r\n <path\r\n class=\"edge\"\r\n [attr.id]=\"'edge-path-' + i\"\r\n [attr.d]=\"buildPath(e)\"\r\n marker-end=\"url(#arrow-blue)\"\r\n [attr.marker-start]=\"e.allowBack ? 'url(#arrow-blue-start)' : ''\"\r\n ></path>\r\n\r\n <path\r\n class=\"edge-hit\"\r\n [attr.d]=\"buildPath(e)\"\r\n (mouseenter)=\"onMouseEnterEdge(e)\"\r\n (mouseleave)=\"onMouseLeaveEdge(e)\"\r\n (click)=\"onClickEdge(e, $event)\"\r\n ></path>\r\n\r\n <!-- LABEL -->\r\n <!-- text b\u00E1m theo line -->\r\n <!-- \r\n <text *ngIf=\"e.ActionText\" class=\"edge-label\" dy=\"-6\">\r\n <textPath [attr.href]=\"'#edge-path-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n {{ e.ActionText }}\r\n </textPath>\r\n </text> \r\n \r\n <text *ngIf=\"e.allowBack && e.labelBack\" class=\"edge-label\" dy=\"14\">\r\n <textPath [attr.href]=\"'#edge-path-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n {{ e.labelBack }}\r\n </textPath>\r\n </text>\r\n -->\r\n\r\n <!-- text th\u1EB3ng n\u1EB1m ngang -->\r\n <text\r\n *ngIf=\"e.ActionText\"\r\n class=\"edge-label\"\r\n [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\r\n [attr.text-anchor]=\"'middle'\"\r\n >\r\n {{ e.ActionText }}\r\n </text>\r\n\r\n <text\r\n *ngIf=\"e.allowBack && e.labelBack\"\r\n class=\"edge-label\"\r\n [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n [attr.y]=\"getEdgeLabelPosition(e).y + 14\"\r\n [attr.text-anchor]=\"'middle'\"\r\n >\r\n {{ e.labelBack }}\r\n </text>\r\n </ng-container>\r\n\r\n <!-- EDGE \u0110ANG HOVER (LU\u00D4N TR\u00CAN C\u00D9NG) -->\r\n <ng-container *ngFor=\"let e of hoverEdges; let i = index\">\r\n <path\r\n class=\"edge red\"\r\n [attr.id]=\"'edge-path-hover-' + i\"\r\n [attr.d]=\"buildPath(e)\"\r\n marker-end=\"url(#arrow-red)\"\r\n [attr.marker-start]=\"e.allowBack ? 'url(#arrow-red-start)' : ''\"\r\n ></path>\r\n\r\n <path\r\n class=\"edge-hit\"\r\n [attr.d]=\"buildPath(e)\"\r\n (mouseleave)=\"onMouseLeaveEdge(e)\"\r\n (click)=\"onClickEdge(e, $event)\"\r\n ></path>\r\n\r\n <!-- LABEL -->\r\n <!-- <text *ngIf=\"e.ActionText\" class=\"edge-label\" dy=\"-6\">\r\n <textPath [attr.href]=\"'#edge-path-hover-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n {{ e.ActionText }}\r\n </textPath>\r\n </text>\r\n\r\n <text *ngIf=\"e.allowBack && e.labelBack\" class=\"edge-label\" dy=\"14\">\r\n <textPath [attr.href]=\"'#edge-path-hover-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n {{ e.labelBack }}\r\n </textPath>\r\n </text> -->\r\n\r\n <text\r\n *ngIf=\"e.ActionText\"\r\n class=\"edge-label\"\r\n [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\r\n [attr.text-anchor]=\"'middle'\"\r\n >\r\n {{ e.ActionText }}\r\n </text>\r\n\r\n <text\r\n *ngIf=\"e.allowBack && e.labelBack\"\r\n class=\"edge-label\"\r\n [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n [attr.y]=\"getEdgeLabelPosition(e).y + 14\"\r\n [attr.text-anchor]=\"'middle'\"\r\n >\r\n {{ e.labelBack }}\r\n </text>\r\n </ng-container>\r\n\r\n <!-- preview -->\r\n <path\r\n *ngIf=\"connectingFrom\"\r\n class=\"edge\"\r\n [attr.d]=\"buildPreviewPath()\"\r\n stroke-dasharray=\"5,5\"\r\n marker-end=\"url(#arrow-blue)\"\r\n ></path>\r\n </g>\r\n </svg>\r\n\r\n <div\r\n *ngIf=\"isSelecting && selectStart && selectEnd\"\r\n class=\"selection-box\"\r\n [style.left.px]=\"Math.min(selectStart.x, selectEnd.x)\"\r\n [style.top.px]=\"Math.min(selectStart.y, selectEnd.y)\"\r\n [style.width.px]=\"Math.abs(selectEnd.x - selectStart.x)\"\r\n [style.height.px]=\"Math.abs(selectEnd.y - selectStart.y)\"\r\n ></div>\r\n\r\n <!-- lstStage -->\r\n @for (n of lstStage; track $index) {\r\n <!-- START NODE -->\r\n @if (n.StageType === \"_start_\") {\r\n <nz-card\r\n class=\"workflow-node workflow-node-start\"\r\n [attr.data-id]=\"n.Code\"\r\n [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\r\n [style.left.px]=\"n.editorOption.x\"\r\n [style.top.px]=\"n.editorOption.y\"\r\n [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\r\n nzSize=\"small\"\r\n (mousedown)=\"onMouseDownNode($event, n)\"\r\n (click)=\"$event.stopPropagation(); onClickStage(n)\"\r\n >\r\n <nz-tag [nzColor]=\"'green'\"> START </nz-tag>\r\n\r\n @if (!n.editorOption.isReverse) {\r\n <!-- connector RIGHT: output -->\r\n <div class=\"connector connector-right connector-start\" (click)=\"onClickConnector($event, n, 'right')\"></div>\r\n } @else {\r\n <div\r\n class=\"connector connector-right connector-start reverse\"\r\n (click)=\"onClickConnector($event, n, 'right')\"\r\n ></div>\r\n }\r\n </nz-card>\r\n }\r\n <!-- END NODE -->\r\n @else if (n.StageType === \"_end_\") {\r\n <nz-card\r\n class=\"workflow-node workflow-node-end\"\r\n [attr.data-id]=\"n.Code\"\r\n [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\r\n [style.left.px]=\"n.editorOption.x\"\r\n [style.top.px]=\"n.editorOption.y\"\r\n [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\r\n nzSize=\"small\"\r\n (mousedown)=\"onMouseDownNode($event, n)\"\r\n (click)=\"$event.stopPropagation(); onClickStage(n)\"\r\n >\r\n <nz-tag [nzColor]=\"'red'\"> END </nz-tag>\r\n\r\n @if (!n.editorOption.isReverse) {\r\n <!-- connector LEFT: input -->\r\n <div class=\"connector connector-left connector-end\" (click)=\"onClickConnector($event, n, 'left')\"></div>\r\n } @else {\r\n <div\r\n class=\"connector connector-left connector-end reverse\"\r\n (click)=\"onClickConnector($event, n, 'left')\"\r\n ></div>\r\n }\r\n </nz-card>\r\n } @else {\r\n <nz-card\r\n class=\"workflow-node\"\r\n [attr.data-id]=\"n.Code\"\r\n [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\r\n [style.left.px]=\"n.editorOption.x\"\r\n [style.top.px]=\"n.editorOption.y\"\r\n [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\r\n nzSize=\"small\"\r\n (mousedown)=\"onMouseDownNode($event, n)\"\r\n (click)=\"$event.stopPropagation(); onClickStage(n)\"\r\n >\r\n <div class=\"title\">{{ n.Code }}</div>\r\n\r\n <div>{{ n.Name }}</div>\r\n\r\n @if (!n.editorOption.isReverse) {\r\n <!-- connector RIGHT: output -->\r\n <div class=\"connector connector-right\" (click)=\"onClickConnector($event, n, 'right')\"></div>\r\n\r\n <!-- connector LEFT: input -->\r\n <div class=\"connector connector-left\" (click)=\"onClickConnector($event, n, 'left')\"></div>\r\n } @else {\r\n <div class=\"connector connector-right reverse\" (click)=\"onClickConnector($event, n, 'right')\"></div>\r\n <div class=\"connector connector-left reverse\" (click)=\"onClickConnector($event, n, 'left')\"></div>\r\n }\r\n </nz-card>\r\n }\r\n }\r\n\r\n <!-- POINTS -->\r\n @for (p of connectingPoints; track $index) {\r\n @if (p != draggingPoint) {\r\n <div\r\n class=\"waypoint\"\r\n [style.left.px]=\"p.x\"\r\n [style.top.px]=\"p.y\"\r\n (mousedown)=\"onmousedownPoint($event, p)\"\r\n (contextmenu)=\"onRightClickPoint($event, hoverAction!, $index)\"\r\n ></div>\r\n } @else {\r\n <div\r\n class=\"waypoint dragging\"\r\n [style.left.px]=\"p.x\"\r\n [style.top.px]=\"p.y\"\r\n (mousedown)=\"onmousedownPoint($event, p)\"\r\n ></div>\r\n }\r\n }\r\n </div>\r\n</div>\r\n\r\n<!-- drawer TEMPLATE -->\r\n<nz-drawer\r\n [nzTitle]=\"drawTemplateTitle\"\r\n nzPlacement=\"right\"\r\n [nzWidth]=\"500\"\r\n [nzClosable]=\"false\"\r\n [nzVisible]=\"drawTemplateVisibel\"\r\n [nzFooter]=\"footerTplTemplate\"\r\n (nzOnClose)=\"drawTemplateVisibel = false\"\r\n>\r\n <ng-template #drawTemplateTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; Template </ng-template>\r\n <ng-container *nzDrawerContent>\r\n <extend-select\r\n [label]=\"'Org'\"\r\n [lstItem]=\"lstOrg\"\r\n [valueField]=\"'App_Org_Id'\"\r\n [displayFields]=\"['Name', 'Code']\"\r\n [(_ngModel)]=\"template.App_Org_Id\"\r\n ></extend-select>\r\n <extend-input [label]=\"'Code'\" [(_ngModel)]=\"template.Code\"></extend-input>\r\n <extend-input [label]=\"'Name'\" [(_ngModel)]=\"template.Name\"></extend-input>\r\n <extend-select\r\n [label]=\"'Type'\"\r\n [lstItem]=\"template.lstTemplateType\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"template.DocType\"\r\n ></extend-select>\r\n <extend-textarea [label]=\"'Desscription'\" [(_ngModel)]=\"template.Description\"></extend-textarea>\r\n <extend-select\r\n [label]=\"'Print template'\"\r\n [lstItem]=\"template.lstTemplatePrint\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"template.TemplatePrint\"\r\n ></extend-select>\r\n <extend-select\r\n [label]=\"'Apply to'\"\r\n [lstItem]=\"template.lstApplyTo\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"template.ApplyTo\"\r\n ></extend-select>\r\n\r\n <extend-checkbox [label]=\"'Active'\" [(_ngModel)]=\"template.IsActive\"></extend-checkbox>\r\n <extend-checkbox [label]=\"'Use Allow back'\" [(_ngModel)]=\"template.editorOption.AllowbackInUse\"></extend-checkbox>\r\n\r\n <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Stage</h3>\r\n\r\n <div nz-row [nzGutter]=\"[0, 5]\">\r\n @for (tag of getLstStage; track tag) {\r\n <div nz-col>\r\n <nz-tag (click)=\"hoverStage = tag\">\r\n {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\r\n </nz-tag>\r\n </div>\r\n }\r\n </div>\r\n\r\n <box [height]=\"16\"></box>\r\n\r\n <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Stage status</h3>\r\n\r\n <div nz-row [nzGutter]=\"[0, 5]\">\r\n @for (tag of template.lstStageStatus; track tag) {\r\n <div nz-col>\r\n <nz-tag\r\n [nzMode]=\"checkRemoveableStageStatus(tag) ? 'closeable' : 'default'\"\r\n (nzOnClose)=\"handleCloseStageStatus(tag)\"\r\n >\r\n {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\r\n </nz-tag>\r\n </div>\r\n }\r\n\r\n <div nz-col>\r\n @if (!inputStageStatusVisible) {\r\n <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInputStageStatus()\">\r\n <nz-icon nzType=\"plus\" />\r\n New Action type\r\n </nz-tag>\r\n } @else {\r\n <input\r\n #inputStageStatusElement\r\n nz-input\r\n nzSize=\"small\"\r\n type=\"text\"\r\n style=\"width: 150px\"\r\n placeholder=\"Code\"\r\n [(ngModel)]=\"inputStageStatusCode\"\r\n (keydown.enter)=\"inputStageStatusNameElement.select()\"\r\n />\r\n <input\r\n #inputStageStatusNameElement\r\n nz-input\r\n nzSize=\"small\"\r\n type=\"text\"\r\n style=\"width: 150px\"\r\n placeholder=\"Name\"\r\n [(ngModel)]=\"inputStageStatusName\"\r\n (blur)=\"handleInputStageStatusConfirm()\"\r\n (keydown.enter)=\"handleInputStageStatusConfirm()\"\r\n />\r\n }\r\n </div>\r\n </div>\r\n\r\n <box [height]=\"16\"></box>\r\n\r\n <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Action type</h3>\r\n\r\n <div nz-row [nzGutter]=\"[0, 5]\">\r\n @for (tag of template.lstActionType; track tag) {\r\n <div nz-col>\r\n <nz-tag\r\n [nzMode]=\"checkRemoveableActionType(tag) ? 'closeable' : 'default'\"\r\n (nzOnClose)=\"handleCloseActionType(tag)\"\r\n >\r\n {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\r\n </nz-tag>\r\n </div>\r\n }\r\n\r\n <div nz-col>\r\n @if (!inputActionTypeVisible) {\r\n <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInputActionType()\">\r\n <nz-icon nzType=\"plus\" />\r\n New Action type\r\n </nz-tag>\r\n } @else {\r\n <input\r\n #inputActionTypeElement\r\n nz-input\r\n nzSize=\"small\"\r\n type=\"text\"\r\n style=\"width: 150px\"\r\n placeholder=\"Code\"\r\n [(ngModel)]=\"inputActionTypeCode\"\r\n (keydown.enter)=\"inputActionTypeNameElement.select()\"\r\n />\r\n <input\r\n #inputActionTypeNameElement\r\n nz-input\r\n nzSize=\"small\"\r\n type=\"text\"\r\n style=\"width: 150px\"\r\n placeholder=\"Name\"\r\n [(ngModel)]=\"inputActionTypeName\"\r\n (blur)=\"handleInputActionTypeConfirm()\"\r\n (keydown.enter)=\"handleInputActionTypeConfirm()\"\r\n />\r\n }\r\n </div>\r\n </div>\r\n\r\n <box [height]=\"16\"></box>\r\n\r\n <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Action status</h3>\r\n\r\n <div nz-row [nzGutter]=\"[0, 5]\">\r\n @for (tag of template.lstActionStatus; track tag) {\r\n <div nz-col>\r\n @if (template.editingActionStatus != tag) {\r\n <nz-tag\r\n [nzMode]=\"checkRemoveableActionStatus(tag.Code) ? 'closeable' : 'default'\"\r\n (nzOnClose)=\"handleClose(tag.Code)\"\r\n (click)=\"template.editingActionStatus = checkRemoveableActionStatus(tag.Code) ? tag : undefined\"\r\n >\r\n {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\r\n </nz-tag>\r\n } @else {\r\n <input\r\n nz-input\r\n nzSize=\"small\"\r\n type=\"text\"\r\n style=\"width: 150px\"\r\n [appAutoFocus]=\"true\"\r\n [(ngModel)]=\"tag.Code\"\r\n (blur)=\"template.editingActionStatus = undefined\"\r\n (keydown.enter)=\"template.editingActionStatus = undefined\"\r\n />&nbsp;&nbsp;\r\n }\r\n </div>\r\n }\r\n\r\n <div nz-col>\r\n @if (!inputVisible) {\r\n <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInput()\">\r\n <nz-icon nzType=\"plus\" />\r\n New Action status\r\n </nz-tag>\r\n } @else {\r\n <input\r\n #inputElement\r\n nz-input\r\n nzSize=\"small\"\r\n type=\"text\"\r\n style=\"width: 150px\"\r\n placeholder=\"+ New Action status\"\r\n [(ngModel)]=\"inputValue\"\r\n (blur)=\"handleInputConfirm()\"\r\n (keydown.enter)=\"handleInputConfirm()\"\r\n />\r\n }\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #footerTplTemplate>\r\n <div nz-flex [nzGap]=\"6\" [nzJustify]=\"'end'\">\r\n <button nz-button nzDanger [nzLoading]=\"!ready\" (click)=\"save()\">Save</button>\r\n <button nz-button (click)=\"drawTemplateVisibel = false\">Close</button>\r\n </div>\r\n </ng-template>\r\n</nz-drawer>\r\n\r\n<!-- drawer STAGE -->\r\n<nz-drawer\r\n [nzTitle]=\"drawerTitleStage\"\r\n [nzPlacement]=\"selectedStage?.editorOption?.drawerPosition == 'left' ? 'left' : 'right'\"\r\n [nzVisible]=\"!!selectedStage\"\r\n [nzWidth]=\"'calc(50vw)'\"\r\n [nzClosable]=\"false\"\r\n [nzFooter]=\"footerTplNode\"\r\n (nzOnClose)=\"selectedStage = undefined\"\r\n>\r\n <ng-template #drawerTitleStage>\r\n <div nz-row nzJustify=\"space-between\">\r\n @if (selectedStage && selectedStage.editorOption) {\r\n @if (selectedStage.editorOption.drawerPosition == \"left\") {\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n nz-tooltip=\"To the right\"\r\n (click)=\"selectedStage.editorOption.drawerPosition = 'right'\"\r\n >\r\n <nz-icon nzType=\"double-right\"></nz-icon>\r\n </button>\r\n STAGE\r\n } @else {\r\n STAGE\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n nz-tooltip=\"To the left\"\r\n (click)=\"selectedStage.editorOption.drawerPosition = 'left'\"\r\n >\r\n <nz-icon nzType=\"double-left\"></nz-icon>\r\n </button>\r\n }\r\n }\r\n </div>\r\n </ng-template>\r\n <ng-container *nzDrawerContent>\r\n <ng-container *ngIf=\"selectedStage\">\r\n <nz-radio-group [(ngModel)]=\"selectedStage.StageType\">\r\n <label nz-radio nzValue=\"_start_\">UI start</label>\r\n <label nz-radio nzValue=\"_end_\">UI end</label>\r\n <label nz-radio nzValue=\"start\">START</label>\r\n <label nz-radio nzValue=\"node\">NODE</label>\r\n <label nz-radio nzValue=\"end\">END</label>\r\n </nz-radio-group>\r\n\r\n <box [height]=\"16\"></box>\r\n\r\n <div nz-row [nzGutter]=\"32\" class=\"form-item-no-bottom\">\r\n <extend-input\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Code'\"\r\n [floatingLabel]=\"true\"\r\n [required]=\"true\"\r\n [(_ngModel)]=\"selectedStage.Code\"\r\n ></extend-input>\r\n\r\n <extend-input\r\n nz-col\r\n [nzSpan]=\"16\"\r\n [label]=\"'Name'\"\r\n [floatingLabel]=\"true\"\r\n [required]=\"true\"\r\n [(_ngModel)]=\"selectedStage.Name\"\r\n ></extend-input>\r\n </div>\r\n\r\n <div nz-row [nzGutter]=\"32\" class=\"form-item-no-bottom\">\r\n <extend-input-number\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Sequence'\"\r\n [floatingLabel]=\"true\"\r\n [(_ngModel)]=\"selectedStage.SeqValue\"\r\n ></extend-input-number>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"16\"\r\n [label]=\"'Org implement'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"lstOrg\"\r\n [valueField]=\"'App_Org_Id'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedStage.App_Org_Id\"\r\n ></extend-select>\r\n </div>\r\n\r\n <div nz-row [nzGutter]=\"32\" class=\"form-item-no-bottom\">\r\n <extend-input-number\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Number of Days'\"\r\n [floatingLabel]=\"true\"\r\n [precision]=\"1\"\r\n [(_ngModel)]=\"selectedStage.NumberDay\"\r\n ></extend-input-number>\r\n </div>\r\n\r\n @if (selectedStage.editorOption) {\r\n @if ([\"start\", \"node\", \"end\"].includes(selectedStage.StageType.toLowerCase())) {\r\n <extend-checkbox\r\n [label]=\"'Reverse'\"\r\n [labelSpan]=\"0\"\r\n [(_ngModel)]=\"selectedStage.editorOption.isReverse\"\r\n ></extend-checkbox>\r\n }\r\n\r\n <extend-checkbox\r\n [label]=\"'Require user action'\"\r\n [labelSpan]=\"0\"\r\n [(_ngModel)]=\"selectedStage.IsRequireUser\"\r\n ></extend-checkbox>\r\n }\r\n\r\n <box [height]=\"16\"></box>\r\n\r\n <div nz-row [nzGutter]=\"16\">\r\n <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;List Action</h3>\r\n <div nz-col>\r\n <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"addAction()\">\r\n <nz-icon nzType=\"plus\"></nz-icon>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <nz-table nzSize=\"small\" [nzData]=\"lstActionOfCurrentStage\" [nzShowPagination]=\"false\" [nzNoResult]=\"'&nbsp;'\">\r\n <thead>\r\n <tr [hidden]=\"true\">\r\n <th nzWidth=\"40px\"></th>\r\n <th></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (action of lstActionOfCurrentStage; track $index) {\r\n <tr (click)=\"onclickaction(action)\">\r\n <td\r\n style=\"border-bottom: solid 1px orange\"\r\n [ngStyle]=\"{\r\n 'border-left': action == hoverAction ? 'solid 4px orange' : '',\r\n 'border-top': $index == 0 ? 'solid 1px orange' : '',\r\n }\"\r\n >\r\n ({{ $index + 1 }})\r\n <nz-icon\r\n nzType=\"delete\"\r\n nzTheme=\"outline\"\r\n class=\"color-warn cursor-pointer icon-size-16\"\r\n (click)=\"$event.stopPropagation(); deleteAction(action)\"\r\n ></nz-icon>\r\n </td>\r\n <td\r\n style=\"border-bottom: solid 1px orange\"\r\n [ngStyle]=\"{\r\n 'border-top': $index == 0 ? 'solid 1px orange' : '',\r\n }\"\r\n >\r\n <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\r\n <div nz-col [nzSpan]=\"8\" class=\"has-floating-label floating-label\">\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"24\" style=\"z-index: 2\">\r\n <label>Action status</label>\r\n </nz-form-label>\r\n <nz-form-control [nzSpan]=\"24\">\r\n <nz-input-group class=\"full-width\">\r\n <input\r\n nz-input\r\n [(ngModel)]=\"action.ActionStatus\"\r\n [nzAutocomplete]=\"auto\"\r\n (ngModelChange)=\"nzAutocompletechange($event, template.lstActionStatus)\"\r\n (click)=\"lstActionStatusFiltered = template.lstActionStatus\"\r\n (keyup.enter)=\"onenterAotu(action.ActionStatus)\"\r\n (blur)=\"onenterAotu(action.ActionStatus)\"\r\n />\r\n <nz-autocomplete #auto [compareWith]=\"compareFun\">\r\n @for (option of lstActionStatusFiltered; track $index) {\r\n <nz-auto-option [nzValue]=\"option.Code\" [nzLabel]=\"option.Code\">\r\n {{ option.Code }}\r\n <icon-delete\r\n *ngIf=\"checkRemoveableActionStatus(option.Code)\"\r\n style=\"float: right\"\r\n [size]=\"12\"\r\n (click)=\"handleClose(option.Code)\"\r\n ></icon-delete>\r\n </nz-auto-option>\r\n }\r\n </nz-autocomplete>\r\n </nz-input-group>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <extend-input\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Action text'\"\r\n [floatingLabel]=\"true\"\r\n [(_ngModel)]=\"action.ActionText\"\r\n (_ngModelChange)=\"onchangeActionText(action)\"\r\n ></extend-input>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Action type'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"template.lstActionType\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"action.ActionType\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Stage status'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"template.lstStageStatus\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"action.StageStatus\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Next stage'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"getlstStage\"\r\n [valueField]=\"'WF_TemplateStage_Id'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"action.To_WF_TemplateStage_Id\"\r\n (_ngModelChange)=\"onchangeNextStage(action)\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Next stage status'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"template.lstStageStatus\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"action.To_StageStatus\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Process status'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"template.lstProcessStatus\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"action.DocProcessStatus\"\r\n ></extend-select>\r\n </div>\r\n <box [height]=\"8\"></box>\r\n <div nz-row>Role</div>\r\n <div nz-row>\r\n <extend-select\r\n nz-col\r\n nzSpan=\"24\"\r\n [size]=\"'small'\"\r\n [lstItem]=\"lstRole\"\r\n [valueField]=\"'App_Role_Id'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [multiple]=\"true\"\r\n [(_ngModel)]=\"action._lstRoleId\"\r\n (_ngModelChange)=\"onselectedRoleEmail(action)\"\r\n ></extend-select>\r\n </div>\r\n <box [height]=\"8\"></box>\r\n <div nz-row>Email action</div>\r\n <div nz-row>\r\n <extend-select\r\n nz-col\r\n nzSpan=\"24\"\r\n [size]=\"'small'\"\r\n [lstItem]=\"lstEmailAction\"\r\n [valueField]=\"'ID'\"\r\n [displayField]=\"'Name'\"\r\n [multiple]=\"true\"\r\n [(_ngModel)]=\"action._lstEmailActionId\"\r\n (_ngModelChange)=\"onselectedRoleEmail(action)\"\r\n ></extend-select>\r\n </div>\r\n <box [height]=\"8\"></box>\r\n <div *ngIf=\"action._lstEmailActionId && action._lstEmailActionId.length\" nz-row>Email template</div>\r\n <div *ngIf=\"action._lstEmailActionId && action._lstEmailActionId.length\" nz-row>\r\n <div nz-col nzSpan=\"1\"></div>\r\n <div nz-col nzSpan=\"23\" class=\"form-item-no-bottom\" style=\"font-weight: normal\">\r\n @for (actionRef of lstActionRefOf(action); track $index) {\r\n <div nz-row>\r\n <extend-select\r\n nz-col\r\n nzSpan=\"24\"\r\n [labelSpan]=\"12\"\r\n [size]=\"'small'\"\r\n [label]=\"emailActionText(actionRef.To_WF_TemplateStageAction_Id)\"\r\n [lstItem]=\"lstEmailTemplate\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"actionRef.TemplateMail\"\r\n ></extend-select>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n <box [height]=\"8\"></box>\r\n <div nz-row [nzGutter]=\"8\">\r\n Action rule\r\n <button nz-button nzType=\"text\" nzSize=\"small\" (click)=\"actionRuleModalVisible = true\">\r\n <nz-icon nzType=\"export\" nzTheme=\"outline\" class=\"color-primary\" />\r\n </button>\r\n <button\r\n *ngIf=\"action.WF_TransitionsRule_Id\"\r\n nz-button\r\n nzType=\"text\"\r\n nzSize=\"small\"\r\n (click)=\"deleteActionRule(action)\"\r\n >\r\n <nz-icon nzType=\"delete\" nzTheme=\"outline\" class=\"color-warn\" />\r\n </button>\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n </tbody>\r\n </nz-table>\r\n\r\n <box [height]=\"16\"></box>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #footerTplNode>\r\n <div\r\n nz-flex\r\n [nzGap]=\"6\"\r\n [nzJustify]=\"\r\n selectedStage && selectedStage.editorOption && selectedStage.editorOption.drawerPosition == 'left'\r\n ? 'start'\r\n : 'end'\r\n \"\r\n >\r\n <button nz-button nzDanger nzDanger [nzLoading]=\"!ready\" (click)=\"save()\">Save</button>\r\n <button nz-button (click)=\"selectedStage = undefined\">Close</button>\r\n <button\r\n *ngIf=\"selectedStage && ['START', 'END'].indexOf(selectedStage.StageType) < 0\"\r\n nz-button\r\n nzDanger\r\n (click)=\"deleteStage()\"\r\n >\r\n Delete\r\n </button>\r\n </div>\r\n </ng-template>\r\n</nz-drawer>\r\n\r\n<!-- drawer ACTION -->\r\n<nz-drawer\r\n [nzTitle]=\"drawerTitleAction\"\r\n nzTitle=\"ACTION\"\r\n [nzPlacement]=\"selectedAction?.editorOption?.drawerPosition == 'left' ? 'left' : 'right'\"\r\n [nzClosable]=\"false\"\r\n [nzWidth]=\"750\"\r\n [nzVisible]=\"!!selectedAction\"\r\n [nzFooter]=\"footerTplAction\"\r\n (nzOnClose)=\"selectedAction = undefined\"\r\n>\r\n <ng-template #drawerTitleAction>\r\n <div nz-row nzJustify=\"space-between\">\r\n @if (selectedAction && selectedAction.editorOption) {\r\n @if (selectedAction.editorOption.drawerPosition == \"left\") {\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n nz-tooltip=\"To the right\"\r\n (click)=\"selectedAction.editorOption.drawerPosition = 'right'\"\r\n >\r\n <nz-icon nzType=\"double-right\"></nz-icon>\r\n </button>\r\n ACTION\r\n } @else {\r\n ACTION\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n nz-tooltip=\"To the left\"\r\n (click)=\"selectedAction.editorOption.drawerPosition = 'left'\"\r\n >\r\n <nz-icon nzType=\"double-left\"></nz-icon>\r\n </button>\r\n }\r\n }\r\n </div>\r\n </ng-template>\r\n <ng-container *nzDrawerContent>\r\n <ng-container *ngIf=\"selectedAction\">\r\n <div>\r\n <strong\r\n >{{ selectedAction.getFromStageCode(lstStage) }} -> {{ selectedAction.getToStageCode(lstStage) }}</strong\r\n >\r\n </div>\r\n <div>{{ selectedAction.getFromStageName(lstStage) }} -> {{ selectedAction.getToStageName(lstStage) }}</div>\r\n\r\n <box [height]=\"16\"></box>\r\n\r\n <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\r\n <div nz-col [nzSpan]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"24\" style=\"height: 32px\">Action status</nz-form-label>\r\n <nz-form-control [nzSpan]=\"24\">\r\n <nz-input-group class=\"full-width\">\r\n <input\r\n nz-input\r\n [(ngModel)]=\"selectedAction.ActionStatus\"\r\n [nzAutocomplete]=\"auto\"\r\n (ngModelChange)=\"nzAutocompletechange($event, template.lstActionStatus)\"\r\n (click)=\"lstActionStatusFiltered = template.lstActionStatus\"\r\n (keyup.enter)=\"onenterAotu(selectedAction.ActionStatus)\"\r\n (blur)=\"onenterAotu(selectedAction.ActionStatus)\"\r\n />\r\n <nz-autocomplete #auto [compareWith]=\"compareFun\">\r\n @for (option of lstActionStatusFiltered; track $index) {\r\n <nz-auto-option [nzValue]=\"option.Code\" [nzLabel]=\"option.Code\">\r\n {{ option.Code }}\r\n <icon-delete\r\n *ngIf=\"checkRemoveableActionStatus(option.Code)\"\r\n style=\"float: right\"\r\n [size]=\"12\"\r\n (click)=\"handleClose(option.Code)\"\r\n ></icon-delete>\r\n </nz-auto-option>\r\n }\r\n </nz-autocomplete>\r\n </nz-input-group>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <extend-input\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Action text'\"\r\n [floatingLabel]=\"true\"\r\n [(_ngModel)]=\"selectedAction.ActionText\"\r\n (_ngModelChange)=\"onchangeActionText(selectedAction)\"\r\n ></extend-input>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Action type'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"template.lstActionType\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedAction.ActionType\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Stage status'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"template.lstStageStatus\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedAction.StageStatus\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Next stage'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"lstStage\"\r\n [valueField]=\"'WF_TemplateStage_Id'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedAction.To_WF_TemplateStage_Id\"\r\n (_ngModelChange)=\"onchangeNextStage(selectedAction)\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Next stage status'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"template.lstStageStatus\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedAction.To_StageStatus\"\r\n ></extend-select>\r\n </div>\r\n\r\n <!-- <box [height]=\"16\"></box> -->\r\n <nz-divider></nz-divider>\r\n\r\n @if (template.editorOption.AllowbackInUse) {\r\n <extend-checkbox\r\n [label]=\"'Allow back'\"\r\n [labelSpan]=\"0\"\r\n [(_ngModel)]=\"selectedAction.allowBack\"\r\n (_ngModelChange)=\"onchangeAllowBack(selectedAction)\"\r\n ></extend-checkbox>\r\n }\r\n\r\n <box [height]=\"16\"></box>\r\n\r\n @if (selectedAction.allowBack) {\r\n <div>\r\n <strong\r\n >{{ selectedAction.getToStageCode(lstStage) }} -> {{ selectedAction.getFromStageCode(lstStage) }}</strong\r\n >\r\n </div>\r\n <div>{{ selectedAction.getToStageName(lstStage) }} -> {{ selectedAction.getFromStageName(lstStage) }}</div>\r\n\r\n @if (selectedBackAction) {\r\n <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\r\n <div nz-col [nzSpan]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"24\" style=\"height: 32px\">Action status</nz-form-label>\r\n <nz-form-control [nzSpan]=\"24\">\r\n <nz-input-group class=\"full-width\">\r\n <input\r\n nz-input\r\n [(ngModel)]=\"selectedBackAction.ActionStatus\"\r\n [nzAutocomplete]=\"auto\"\r\n (ngModelChange)=\"nzAutocompletechange($event, template.lstActionStatus)\"\r\n (click)=\"lstActionStatusFiltered = template.lstActionStatus\"\r\n (keyup.enter)=\"onenterAotu(selectedBackAction.ActionStatus)\"\r\n (blur)=\"onenterAotu(selectedBackAction.ActionStatus)\"\r\n />\r\n <nz-autocomplete #auto [compareWith]=\"compareFun\">\r\n @for (option of lstActionStatusFiltered; track $index) {\r\n <nz-auto-option [nzValue]=\"option.Code\" [nzLabel]=\"option.Code\">\r\n {{ option.Code }}\r\n <icon-delete\r\n *ngIf=\"checkRemoveableActionStatus(option.Code)\"\r\n style=\"float: right\"\r\n [size]=\"12\"\r\n (click)=\"handleClose(option.Code)\"\r\n ></icon-delete>\r\n </nz-auto-option>\r\n }\r\n </nz-autocomplete>\r\n </nz-input-group>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <extend-input\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Action text'\"\r\n [floatingLabel]=\"true\"\r\n [(_ngModel)]=\"selectedBackAction.ActionText\"\r\n (_ngModelChange)=\"onchangeActionText(selectedBackAction)\"\r\n ></extend-input>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Action type'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"template.lstActionType\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedBackAction.ActionType\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Stage status'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"template.lstStageStatus\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedBackAction.StageStatus\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Next stage'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"lstStage\"\r\n [valueField]=\"'WF_TemplateStage_Id'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedBackAction.To_WF_TemplateStage_Id\"\r\n (_ngModelChange)=\"onchangeNextStage(selectedBackAction)\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Next stage status'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"template.lstStageStatus\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedBackAction.To_StageStatus\"\r\n ></extend-select>\r\n </div>\r\n }\r\n }\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #footerTplAction>\r\n <div\r\n nz-flex\r\n [nzGap]=\"6\"\r\n [nzJustify]=\"selectedAction && selectedAction.editorOption.drawerPosition == 'left' ? 'start' : 'end'\"\r\n >\r\n <button nz-button nzDanger nzDanger [nzLoading]=\"!ready\" (click)=\"save()\">Save</button>\r\n <button nz-button nzDanger (click)=\"deleteAction(selectedAction!)\">Delete</button>\r\n <button nz-button (click)=\"selectedAction = undefined\">Close</button>\r\n </div>\r\n </ng-template>\r\n</nz-drawer>\r\n\r\n<!-- setting editor -->\r\n<nz-drawer\r\n [nzTitle]=\"drawSettingTitle\"\r\n nzPlacement=\"right\"\r\n [nzClosable]=\"false\"\r\n [nzVisible]=\"settingVisible\"\r\n (nzOnClose)=\"settingVisible = false\"\r\n>\r\n <ng-template #drawSettingTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; Editor </ng-template>\r\n <ng-container *nzDrawerContent>\r\n <div class=\"form-item-no-bottom\">\r\n <extend-checkbox [label]=\"'Show grid'\" [labelSpan]=\"0\" [(_ngModel)]=\"wfcSetting.ShowGrid\"></extend-checkbox>\r\n\r\n <box [height]=\"16\"></box>\r\n </div>\r\n </ng-container>\r\n</nz-drawer>\r\n\r\n<!-- editor infomation -->\r\n<nz-drawer\r\n [nzTitle]=\"drawInfoTitle\"\r\n nzPlacement=\"right\"\r\n [nzClosable]=\"false\"\r\n [nzVisible]=\"infoVisible\"\r\n (nzOnClose)=\"infoVisible = false\"\r\n>\r\n <ng-template #drawInfoTitle> <nz-icon nzType=\"info-circle\"></nz-icon> &nbsp; Infomation </ng-template>\r\n <ng-container *nzDrawerContent>\r\n <p>1. C\u00E1c th\u00E0nh ph\u1EA7n: Stage or Node (stag, node quy tr\u00ECnh), Action or Connector (\u0111\u01B0\u1EDDng n\u1ED1i gi\u1EEFa c\u00E1c stage)</p>\r\n <p>2. Save \u0111\u1EC3 load c\u00E1c th\u00F4ng tin: Stage status, Action type</p>\r\n <p>\r\n 3. N\u1ED1i 2 node (t\u1EA1o connector t\u01B0\u01A1ng \u0111\u01B0\u01A1ng t\u1EA1o action):\r\n <br />- Click ch\u1EA5m cam t\u1EEB Node ngu\u1ED3n \u0111\u1EBFn ch\u1EA5m xanh c\u1EE7a Node \u0111\u00EDch (ho\u1EB7c click v\u00E0o Node \u0111\u00EDch), c\u00F3 th\u1EC3 click th\u00E0nh\r\n nhi\u1EC1u \u0111i\u1EC3m \u0111\u1EC3 t\u1EA1o \u0111\u01B0\u1EDDng n\u1ED1i cong<br />- Khi hover connector chuy\u1EC3n sang m\u1EA7u \u0111\u1ECF c\u00F3 th\u1EC3 click \u0111\u00FAp \u0111\u1EC3 th\u00EAm m\u1ED9t \u0111i\u1EC3m\r\n c\u1EE7a connector<br />- Khi hover l\u00EAn \u0111i\u1EC3m c\u1EE7a connector c\u00F3 th\u1EC3 di chuy\u1EC3n \u0111i\u1EC3m \u0111\u00F3 b\u1EB1ng c\u00E1ch nh\u1EA5n gi\u1EEF chu\u1ED9t v\u00E0 k\u00E9o th\u1EA3\r\n \u0111\u1EBFn v\u1ECB tr\u00ED m\u1EDBi<br />- Chu\u1ED9t ph\u1EA3i v\u00E0o \u0111i\u1EC3m n\u1ED1i connector \u0111\u1EC3 xo\u00E1 \u0111i\u1EC3m \u0111\u00F3\r\n </p>\r\n </ng-container>\r\n</nz-drawer>\r\n\r\n<!-- action rule modal -->\r\n<nz-modal\r\n [(nzVisible)]=\"actionRuleModalVisible\"\r\n [nzMaskClosable]=\"false\"\r\n [nzClosable]=\"false\"\r\n [nzKeyboard]=\"true\"\r\n [nzWidth]=\"'75vw'\"\r\n>\r\n <ng-container *nzModalTitle>\r\n ACTION RULE: [{{ selectedStage?.Code }}] {{ selectedStage?.Name }} > [{{ hoverAction?.ActionStatus }}]\r\n {{ hoverAction?.ActionText }}\r\n </ng-container>\r\n <ng-container *nzModalContent>\r\n @if (hoverAction && hoverAction.actionRule) {\r\n <div nz-row [nzGutter]=\"32\" class=\"form-item-no-bottom\">\r\n <extend-input nz-col nzSpan=\"12\" [label]=\"'Code'\" [(_ngModel)]=\"hoverAction.actionRule.Code\"></extend-input>\r\n <extend-input nz-col nzSpan=\"12\" [label]=\"'Name'\" [(_ngModel)]=\"hoverAction.actionRule.Name\"></extend-input>\r\n <extend-input nz-col nzSpan=\"12\" [label]=\"'Note'\" [(_ngModel)]=\"hoverAction.actionRule.Note\"></extend-input>\r\n <extend-checkbox\r\n nz-col\r\n nzSpan=\"12\"\r\n [label]=\"'IsActive'\"\r\n [(_ngModel)]=\"hoverAction.actionRule.IsActive\"\r\n ></extend-checkbox>\r\n </div>\r\n <box [height]=\"8\"></box>\r\n <div nz-row [nzGutter]=\"16\">\r\n <div nz-col nzSpan=\"24\">\r\n <nz-table nzSize=\"small\" [nzData]=\"hoverAction.actionRule.lstLine\" [nzShowPagination]=\"false\">\r\n <thead>\r\n <tr>\r\n <th [nzWidth]=\"'40px'\"><icon-add (click)=\"addActionRuleLine()\"></icon-add></th>\r\n <th [nzWidth]=\"'250px'\">Rule type</th>\r\n <th>Template</th>\r\n <th>Template stage</th>\r\n <th>Template action</th>\r\n <th>Store to exec</th>\r\n <th [nzWidth]=\"'50px'\">Active</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (item of hoverAction.actionRule.lstLine; track $index) {\r\n <tr>\r\n <td><icon-delete (click)=\"deleteActionRuleLine(hoverAction.actionRule, item)\"></icon-delete></td>\r\n <td>\r\n <dic-domain-select\r\n [size]=\"'small'\"\r\n [DomainCode]=\"'WF_RuleType'\"\r\n [(_ngModel)]=\"item.RuleType\"\r\n ></dic-domain-select>\r\n </td>\r\n <td>\r\n <extend-select\r\n #xxx\r\n [size]=\"'small'\"\r\n [lstItem]=\"lstTemplateForRule(item)\"\r\n [valueField]=\"'WF_Template_Id'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [dropdownMatchSelectWidth]=\"false\"\r\n [(_ngModel)]=\"item.WF_Template_Id\"\r\n (_ngModelChange)=\"item.WF_TemplateStage_Id = 0; item.WF_TemplateStageAction_Id = 0\"\r\n ></extend-select>\r\n </td>\r\n <td>\r\n <extend-select\r\n #yyy\r\n [size]=\"'small'\"\r\n [lstItem]=\"lstStageForRule(xxx._ngModel)\"\r\n [valueField]=\"'WF_TemplateStage_Id'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [dropdownMatchSelectWidth]=\"false\"\r\n [(_ngModel)]=\"item.WF_TemplateStage_Id\"\r\n (_ngModelChange)=\"item.WF_TemplateStageAction_Id = 0\"\r\n ></extend-select>\r\n </td>\r\n <td>\r\n <extend-select\r\n [size]=\"'small'\"\r\n [lstItem]=\"lstActionForRule(yyy._ngModel)\"\r\n [valueField]=\"'WF_TemplateStageAction_Id'\"\r\n [displayFields]=\"['ActionStatus', 'ActionText']\"\r\n [dropdownMatchSelectWidth]=\"false\"\r\n [(_ngModel)]=\"item.WF_TemplateStageAction_Id\"\r\n ></extend-select>\r\n </td>\r\n <td>\r\n <extend-input [size]=\"'small'\" [(_ngModel)]=\"item.StoreToExec\"></extend-input>\r\n </td>\r\n <td class=\"text-center\">\r\n <extend-checkbox [(_ngModel)]=\"item.IsActive\"></extend-checkbox>\r\n </td>\r\n </tr>\r\n }\r\n </tbody>\r\n </nz-table>\r\n </div>\r\n </div>\r\n }\r\n </ng-container>\r\n <ng-container *nzModalFooter>\r\n <button nz-button nzType=\"primary\" (click)=\"actionRuleModalVisible = false\">OK</button>\r\n </ng-container>\r\n</nz-modal>\r\n", styles: ["@charset \"UTF-8\";::ng-deep .workflow-wrapper{border:solid 1px lightgray;overflow:hidden;width:100%}.workflow-canvas{position:relative;background:#f0f2f5;cursor:default;overflow:hidden;outline:1px dashed rgba(0,0,0,.1)}.workflow-canvas .edges-layer{position:absolute;inset:0;width:100%;height:100%;z-index:1}.workflow-canvas .edges-layer path{stroke-width:2;fill:none}.canvas-content{transform-origin:0 0;width:100%;height:100%}.canvas-content{outline:1px dashed red}.canvas-content.panning{cursor:grab}.canvas-content.panning:active{cursor:grabbing}.workflow-canvas.panning{cursor:grab}.workflow-canvas.panning:active{cursor:grabbing}.workflow-canvas.connecting,.workflow-canvas.connecting .workflow-node{cursor:crosshair}.workflow-node{position:absolute;width:160px;cursor:grab;-webkit-user-select:none;user-select:none;z-index:2}.workflow-node:active{cursor:grabbing}.workflow-node.connecting-source,.workflow-node.selected,.workflow-node:hover:not(.workflow-node-start,.workflow-node-end){outline:2px dashed #1890ff}.workflow-node .title{font-weight:600;margin-bottom:6px}.workflow-node-start{width:0px}.workflow-node-start.connecting-source,.workflow-node-start.selected,.workflow-node-start:hover{outline:unset}.workflow-node-start.connecting-source nz-tag,.workflow-node-start.selected nz-tag,.workflow-node-start:hover nz-tag{outline:2px dashed}.workflow-node-start nz-tag{position:relative;top:45px;right:35px}.workflow-node-end{width:0px}.workflow-node-end.connecting-source,.workflow-node-end.selected,.workflow-node-end:hover{outline:unset}.workflow-node-end.connecting-source nz-tag,.workflow-node-end.selected nz-tag,.workflow-node-end:hover nz-tag{outline:2px dashed}.workflow-node-end nz-tag{position:relative;top:45px;right:32px}.connector{position:absolute;top:39px;width:12px;height:12px;background:#1890ff;border-radius:50%;transform:translateY(-50%);cursor:crosshair;transition:box-shadow .15s ease-out,transform .15s ease-out}.connector:hover{box-shadow:0 0 0 3px #1890ff4d;transform:translateY(-50%) scale(1.15)}.connector-right{right:-8px;background:orange}.connector-right.reverse,.connector-left{left:-8px}.connector-left.reverse{left:unset;right:-8px}.connector-start{width:16px;height:16px;right:-8px;background:green;box-shadow:0 0 0 3px #1890ff4d}.connector-end{width:16px;height:16px;left:-8px;background:#000;box-shadow:0 0 0 3px #1890ff4d}.edge{cursor:pointer;stroke:#1890ff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;fill:none;transition:stroke .15s ease}.edge-hit{stroke:transparent;stroke-width:18px!important;fill:none;cursor:pointer}.edge-hit:hover+.edge{stroke:#ff4d4f;stroke-width:2}.workflow-canvas.dragging-point .edge-hit{pointer-events:none}.edge:hover+.edge-label{fill:#1890ff;font-weight:500}.edge-label{font-size:12px;fill:#555;pointer-events:none;-webkit-user-select:none;user-select:none}.blue{stroke:#1890ff!important}.red{stroke:#ff4d4f!important;box-shadow:0 0 0 3px #1890ff4d!important}.workflow-svg{background:transparent;overflow:visible}.waypoint{position:absolute;width:10px;height:10px;background:#ff4d4f;border-radius:50%;transform:translate(-50%,-50%) scale(1);cursor:move;z-index:1;transition:transform .12s ease-out,background-color .12s ease-out,box-shadow .12s ease-out}.waypoint:hover{background:#ff7875;transform:translate(-50%,-50%) scale(1.25);box-shadow:0 0 0 4px #ff787559}.waypoint.dragging{transition:none;transform:translate(-50%,-50%) scale(1.15);pointer-events:none}.workflow-canvas.dragging-point svg{cursor:grabbing}.selection-box{position:absolute;border:1px dashed #1890ff;background:#1890ff1a;pointer-events:none}.toolbar{position:absolute;top:8px;left:8px;display:flex;gap:4px;padding:6px;background:#fff;border-radius:6px;box-shadow:0 2px 8px #00000026;z-index:100}.toolbar .divider{width:1px;background:#e5e5e5;margin:0 2px}.zoom-toolbar{position:absolute;top:8px;left:8px;z-index:10;display:flex;align-items:center;gap:6px;background:#fff;padding:4px 6px;border-radius:6px;box-shadow:0 2px 6px #00000026}.zoom-toolbar span{min-width:40px;text-align:center;font-size:12px}nz-tag.selected{outline:2px dashed #1890ff}.grid-layer{position:absolute;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(rgba(0,0,0,.08) 1px,transparent 1px);background-size:20px 20px}.grid-layer{background-image:linear-gradient(to right,rgba(0,0,0,.06) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.06) 1px,transparent 1px);background-size:20px 20px}.editable-tag{background:#fff;border-style:dashed}::ng-deep .minimap{position:absolute;width:180px;height:125px;top:0;right:0;background-color:#eee;border:1px solid #aaa;opacity:.9;z-index:1}::ng-deep .minimap-node{position:absolute;background-color:#607a86}::ng-deep .minimap-node-round{position:absolute;background-color:#607a86;border-radius:10px}::ng-deep .minimap-node-round-start{background-color:green}::ng-deep .minimap-node-round-end{background-color:#000}::ng-deep .minimap-viewport{position:absolute;box-sizing:border-box;background-color:#4f6f7e66;z-index:1;cursor:move}::ng-deep .has-floating-label.floating-label{position:relative;padding-top:14px}::ng-deep .has-floating-label nz-form-item nz-form-label{position:absolute;top:12px;left:16px;transform:translateY(-50%);background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 80%,#ffffff 80%);z-index:1;height:auto;line-height:normal;padding:0 4px}::ng-deep .has-floating-label nz-form-item nz-form-label label{font-size:12px;color:var(--darkgray, #565656);font-weight:700;height:auto;line-height:normal;padding:0;display:flex;align-items:center}::ng-deep .has-floating-label .full-width{width:100%}.has-floating-label.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label,.has-floating-label.floating-label nz-form-item:has(input[disabled]) nz-form-label,.has-floating-label.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label{background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 60%,#f5f5f5 50%)}.has-floating-label.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label label,.has-floating-label.floating-label nz-form-item:has(input[disabled]) nz-form-label label,.has-floating-label.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label label{color:#bfbfbf}\n"] }]
11484
+ ], template: "<div\r\n #canvasRef\r\n class=\"workflow-canvas\"\r\n [class.connecting]=\"!!connectingFrom\"\r\n [class.dragging-point]=\"!!draggingPoint\"\r\n [style.width.px]=\"getCanvasWidth()\"\r\n [style.height.px]=\"getCanvasHeight()\"\r\n (mousedown)=\"onMouseDownCanvas($event)\"\r\n (mousemove)=\"onMouseMoveCanvas($event)\"\r\n (mouseup)=\"onMouseUpCanvas($event)\"\r\n (click)=\"onClickCanvas($event)\"\r\n>\r\n <!-- \r\n\r\n [style.width.px]=\"getCanvasWidth()\"\r\n [style.height.px]=\"getCanvasHeight()\" \r\n\r\n [style.width.px]=\"CANVAS_WIDTH\"\r\n [style.height.px]=\"CANVAS_HEIGHT\"\r\n\r\n style=\"width: 100%; height: calc(100vh - 120px)\"\r\n \r\n -->\r\n\r\n <div class=\"toolbar\" (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\r\n <button nz-button nzSize=\"small\" nz-tooltip=\"Editor setting\" (click)=\"settingVisible = true\">\r\n <nz-icon nzType=\"setting\"></nz-icon>\r\n </button>\r\n\r\n <button nz-button nzSize=\"small\" nz-tooltip=\"Infomation\" (click)=\"infoVisible = true\">\r\n <nz-icon nzType=\"info-circle\"></nz-icon>\r\n </button>\r\n\r\n <box [width]=\"1\"></box>\r\n <span class=\"divider\"></span>\r\n <box [width]=\"1\"></box>\r\n\r\n <button nz-button nzSize=\"small\" nz-tooltip=\"Template setting\" (click)=\"drawTemplateVisibel = true\">\r\n <nz-icon nzType=\"setting\"></nz-icon> T\r\n </button>\r\n\r\n <box [width]=\"1\"></box>\r\n <span class=\"divider\"></span>\r\n <box [width]=\"1\"></box>\r\n\r\n <button nz-button nzSize=\"small\" nzDanger [nzLoading]=\"!ready\" nz-tooltip=\"Save (Ctrl + S)\" (click)=\"save()\">\r\n <nz-icon nzType=\"save\"></nz-icon>\r\n </button>\r\n <button nz-button nzSize=\"small\" nz-tooltip=\"Add stage\" (click)=\"addStage()\">\r\n <nz-icon nzType=\"plus\" class=\"color-primary\"></nz-icon>\r\n </button>\r\n\r\n <box [width]=\"1\"></box>\r\n <span class=\"divider\"></span>\r\n <box [width]=\"1\"></box>\r\n\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n [nzType]=\"isMoveMode ? 'primary' : 'default'\"\r\n nz-tooltip=\"Move mode\"\r\n (click)=\"isMoveMode = true\"\r\n >\r\n <nz-icon><img src=\"/assets/icon/hand-palm.png\" width=\"19\" height=\"19\" /></nz-icon>\r\n </button>\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n [nzType]=\"!isMoveMode ? 'primary' : 'default'\"\r\n nz-tooltip=\"Select mode\"\r\n (click)=\"isMoveMode = false\"\r\n >\r\n <nz-icon><img src=\"/assets/icon/cursor.png\" width=\"19\" height=\"19\" /></nz-icon>\r\n </button>\r\n\r\n <box [width]=\"1\"></box>\r\n <span class=\"divider\"></span>\r\n <box [width]=\"1\"></box>\r\n\r\n <!-- UNDO / REDO -->\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n nzType=\"default\"\r\n [disabled]=\"undoStack.length === 0\"\r\n nz-tooltip=\"Undo\"\r\n (click)=\"undo()\"\r\n >\r\n <nz-icon nzType=\"undo\"></nz-icon>\r\n </button>\r\n\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n nzType=\"default\"\r\n [disabled]=\"redoStack.length === 0\"\r\n nz-tooltip=\"Redo\"\r\n (click)=\"redo()\"\r\n >\r\n <nz-icon nzType=\"redo\"></nz-icon>\r\n </button>\r\n\r\n <box [width]=\"1\"></box>\r\n <span class=\"divider\"></span>\r\n <box [width]=\"1\"></box>\r\n\r\n <!-- ALIGN -->\r\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignLeft()\">\u27F8</button>\r\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignCenter()\">\u2261</button>\r\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignRight()\">\u27F9</button>\r\n\r\n <span class=\"divider\"></span>\r\n\r\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignTop()\">\u21D1</button>\r\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignMiddle()\">\u2550</button>\r\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignBottom()\">\u21D3</button>\r\n\r\n <span class=\"divider\"></span>\r\n\r\n <!-- DISTRIBUTE -->\r\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 3\" (click)=\"distributeHorizontal()\">\r\n \u21C4\r\n </button>\r\n <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 3\" (click)=\"distributeVertical()\">\u21C5</button>\r\n </div>\r\n\r\n <div\r\n class=\"canvas-content\"\r\n [class.panning]=\"isMoveMode\"\r\n [style.transform]=\"'translate(' + template.editorOption.panX + 'px,' + template.editorOption.panY + 'px)'\"\r\n >\r\n <!-- GRID -->\r\n <div *ngIf=\"wfcSetting.ShowGrid\" class=\"grid-layer\"></div>\r\n\r\n <!-- <div class=\"zoom-toolbar\">\r\n <button nz-button nzSize=\"small\" (click)=\"zoomOut()\">\u2212</button>\r\n <span>{{ zoom * 100 | number: \"1.0-0\" }}%</span>\r\n <button nz-button nzSize=\"small\" (click)=\"zoomIn()\">+</button>\r\n </div> -->\r\n\r\n <!-- SVG EDGES -->\r\n <svg #svg class=\"edges-layer\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\">\r\n <g [attr.transform]=\"svgTransform\">\r\n <!-- DEFS -->\r\n <defs>\r\n <!-- glow effect -->\r\n <filter id=\"edge-glow\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\r\n <feGaussianBlur stdDeviation=\"2\" result=\"blur\" />\r\n <feMerge>\r\n <feMergeNode in=\"blur\" />\r\n <feMergeNode in=\"SourceGraphic\" />\r\n </feMerge>\r\n </filter>\r\n\r\n <!-- arrow markers -->\r\n <marker\r\n id=\"arrow-blue\"\r\n markerWidth=\"10\"\r\n markerHeight=\"10\"\r\n refX=\"10\"\r\n refY=\"5\"\r\n orient=\"auto\"\r\n markerUnits=\"strokeWidth\"\r\n >\r\n <path class=\"blue\" d=\"M0,0 L10,5 L0,10\"></path>\r\n </marker>\r\n\r\n <marker\r\n id=\"arrow-red\"\r\n markerWidth=\"10\"\r\n markerHeight=\"10\"\r\n refX=\"10\"\r\n refY=\"5\"\r\n orient=\"auto\"\r\n markerUnits=\"strokeWidth\"\r\n >\r\n <path class=\"red\" d=\"M0,0 L10,5 L0,10\"></path>\r\n </marker>\r\n\r\n <marker\r\n id=\"arrow-blue-start\"\r\n markerWidth=\"10\"\r\n markerHeight=\"10\"\r\n viewBox=\"0 0 10 10\"\r\n refX=\"0\"\r\n refY=\"5\"\r\n orient=\"auto\"\r\n markerUnits=\"strokeWidth\"\r\n >\r\n <path class=\"blue\" d=\"M10,0 L0,5 L10,10\"></path>\r\n </marker>\r\n\r\n <marker\r\n id=\"arrow-red-start\"\r\n markerWidth=\"10\"\r\n markerHeight=\"10\"\r\n viewBox=\"0 0 10 10\"\r\n refX=\"0\"\r\n refY=\"5\"\r\n orient=\"auto\"\r\n markerUnits=\"strokeWidth\"\r\n >\r\n <path class=\"red\" d=\"M10,0 L0,5 L10,10\"></path>\r\n </marker>\r\n </defs>\r\n\r\n <!-- EDGES B\u00CCNH TH\u01AF\u1EDCNG -->\r\n <ng-container *ngFor=\"let e of normalEdges; let i = index\">\r\n <path\r\n class=\"edge\"\r\n [attr.id]=\"'edge-path-' + i\"\r\n [attr.d]=\"buildPath(e)\"\r\n marker-end=\"url(#arrow-blue)\"\r\n [attr.marker-start]=\"e.allowBack ? 'url(#arrow-blue-start)' : ''\"\r\n ></path>\r\n\r\n <path\r\n class=\"edge-hit\"\r\n [attr.d]=\"buildPath(e)\"\r\n (mouseenter)=\"onMouseEnterEdge(e)\"\r\n (mouseleave)=\"onMouseLeaveEdge(e)\"\r\n (click)=\"onClickEdge(e, $event)\"\r\n ></path>\r\n\r\n <!-- LABEL -->\r\n <!-- text b\u00E1m theo line -->\r\n <!-- \r\n <text *ngIf=\"e.ActionText\" class=\"edge-label\" dy=\"-6\">\r\n <textPath [attr.href]=\"'#edge-path-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n {{ e.ActionText }}\r\n </textPath>\r\n </text> \r\n \r\n <text *ngIf=\"e.allowBack && e.labelBack\" class=\"edge-label\" dy=\"14\">\r\n <textPath [attr.href]=\"'#edge-path-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n {{ e.labelBack }}\r\n </textPath>\r\n </text>\r\n -->\r\n\r\n <!-- text th\u1EB3ng n\u1EB1m ngang -->\r\n <text\r\n *ngIf=\"e.ActionText\"\r\n class=\"edge-label\"\r\n [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\r\n [attr.text-anchor]=\"'middle'\"\r\n >\r\n {{ e.ActionText }}\r\n </text>\r\n\r\n <text\r\n *ngIf=\"e.allowBack && e.labelBack\"\r\n class=\"edge-label\"\r\n [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n [attr.y]=\"getEdgeLabelPosition(e).y + 14\"\r\n [attr.text-anchor]=\"'middle'\"\r\n >\r\n {{ e.labelBack }}\r\n </text>\r\n </ng-container>\r\n\r\n <!-- EDGE \u0110ANG HOVER (LU\u00D4N TR\u00CAN C\u00D9NG) -->\r\n <ng-container *ngFor=\"let e of hoverEdges; let i = index\">\r\n <path\r\n class=\"edge red\"\r\n [attr.id]=\"'edge-path-hover-' + i\"\r\n [attr.d]=\"buildPath(e)\"\r\n marker-end=\"url(#arrow-red)\"\r\n [attr.marker-start]=\"e.allowBack ? 'url(#arrow-red-start)' : ''\"\r\n ></path>\r\n\r\n <path\r\n class=\"edge-hit\"\r\n [attr.d]=\"buildPath(e)\"\r\n (mouseleave)=\"onMouseLeaveEdge(e)\"\r\n (click)=\"onClickEdge(e, $event)\"\r\n ></path>\r\n\r\n <!-- LABEL -->\r\n <!-- <text *ngIf=\"e.ActionText\" class=\"edge-label\" dy=\"-6\">\r\n <textPath [attr.href]=\"'#edge-path-hover-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n {{ e.ActionText }}\r\n </textPath>\r\n </text>\r\n\r\n <text *ngIf=\"e.allowBack && e.labelBack\" class=\"edge-label\" dy=\"14\">\r\n <textPath [attr.href]=\"'#edge-path-hover-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n {{ e.labelBack }}\r\n </textPath>\r\n </text> -->\r\n\r\n <text\r\n *ngIf=\"e.ActionText\"\r\n class=\"edge-label\"\r\n [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\r\n [attr.text-anchor]=\"'middle'\"\r\n >\r\n {{ e.ActionText }}\r\n </text>\r\n\r\n <text\r\n *ngIf=\"e.allowBack && e.labelBack\"\r\n class=\"edge-label\"\r\n [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n [attr.y]=\"getEdgeLabelPosition(e).y + 14\"\r\n [attr.text-anchor]=\"'middle'\"\r\n >\r\n {{ e.labelBack }}\r\n </text>\r\n </ng-container>\r\n\r\n <!-- preview -->\r\n <path\r\n *ngIf=\"connectingFrom\"\r\n class=\"edge\"\r\n [attr.d]=\"buildPreviewPath()\"\r\n stroke-dasharray=\"5,5\"\r\n marker-end=\"url(#arrow-blue)\"\r\n ></path>\r\n </g>\r\n </svg>\r\n\r\n <div\r\n *ngIf=\"isSelecting && selectStart && selectEnd\"\r\n class=\"selection-box\"\r\n [style.left.px]=\"Math.min(selectStart.x, selectEnd.x)\"\r\n [style.top.px]=\"Math.min(selectStart.y, selectEnd.y)\"\r\n [style.width.px]=\"Math.abs(selectEnd.x - selectStart.x)\"\r\n [style.height.px]=\"Math.abs(selectEnd.y - selectStart.y)\"\r\n ></div>\r\n\r\n <!-- lstStage -->\r\n @for (n of lstStage; track $index) {\r\n <!-- START NODE -->\r\n @if (n.StageType === \"_start_\") {\r\n <nz-card\r\n class=\"workflow-node workflow-node-start\"\r\n [attr.data-id]=\"n.Code\"\r\n [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\r\n [style.left.px]=\"n.editorOption.x\"\r\n [style.top.px]=\"n.editorOption.y\"\r\n [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\r\n nzSize=\"small\"\r\n (mousedown)=\"onMouseDownNode($event, n)\"\r\n (click)=\"$event.stopPropagation(); onClickStage(n)\"\r\n >\r\n <nz-tag [nzColor]=\"'green'\"> START </nz-tag>\r\n\r\n @if (!n.editorOption.isReverse) {\r\n <!-- connector RIGHT: output -->\r\n <div class=\"connector connector-right connector-start\" (click)=\"onClickConnector($event, n, 'right')\"></div>\r\n } @else {\r\n <div\r\n class=\"connector connector-right connector-start reverse\"\r\n (click)=\"onClickConnector($event, n, 'right')\"\r\n ></div>\r\n }\r\n </nz-card>\r\n }\r\n <!-- END NODE -->\r\n @else if (n.StageType === \"_end_\") {\r\n <nz-card\r\n class=\"workflow-node workflow-node-end\"\r\n [attr.data-id]=\"n.Code\"\r\n [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\r\n [style.left.px]=\"n.editorOption.x\"\r\n [style.top.px]=\"n.editorOption.y\"\r\n [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\r\n nzSize=\"small\"\r\n (mousedown)=\"onMouseDownNode($event, n)\"\r\n (click)=\"$event.stopPropagation(); onClickStage(n)\"\r\n >\r\n <nz-tag [nzColor]=\"'red'\"> END </nz-tag>\r\n\r\n @if (!n.editorOption.isReverse) {\r\n <!-- connector LEFT: input -->\r\n <div class=\"connector connector-left connector-end\" (click)=\"onClickConnector($event, n, 'left')\"></div>\r\n } @else {\r\n <div\r\n class=\"connector connector-left connector-end reverse\"\r\n (click)=\"onClickConnector($event, n, 'left')\"\r\n ></div>\r\n }\r\n </nz-card>\r\n } @else {\r\n <nz-card\r\n class=\"workflow-node\"\r\n [attr.data-id]=\"n.Code\"\r\n [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\r\n [style.left.px]=\"n.editorOption.x\"\r\n [style.top.px]=\"n.editorOption.y\"\r\n [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\r\n nzSize=\"small\"\r\n (mousedown)=\"onMouseDownNode($event, n)\"\r\n (click)=\"$event.stopPropagation(); onClickStage(n)\"\r\n >\r\n <div class=\"title\">{{ n.Code }}</div>\r\n\r\n <div>{{ n.Name }}</div>\r\n\r\n @if (!n.editorOption.isReverse) {\r\n <!-- connector RIGHT: output -->\r\n <div class=\"connector connector-right\" (click)=\"onClickConnector($event, n, 'right')\"></div>\r\n\r\n <!-- connector LEFT: input -->\r\n <div class=\"connector connector-left\" (click)=\"onClickConnector($event, n, 'left')\"></div>\r\n } @else {\r\n <div class=\"connector connector-right reverse\" (click)=\"onClickConnector($event, n, 'right')\"></div>\r\n <div class=\"connector connector-left reverse\" (click)=\"onClickConnector($event, n, 'left')\"></div>\r\n }\r\n </nz-card>\r\n }\r\n }\r\n\r\n <!-- POINTS -->\r\n @for (p of connectingPoints; track $index) {\r\n @if (p != draggingPoint) {\r\n <div\r\n class=\"waypoint\"\r\n [style.left.px]=\"p.x\"\r\n [style.top.px]=\"p.y\"\r\n (mousedown)=\"onmousedownPoint($event, p)\"\r\n (contextmenu)=\"onRightClickPoint($event, hoverAction!, $index)\"\r\n ></div>\r\n } @else {\r\n <div\r\n class=\"waypoint dragging\"\r\n [style.left.px]=\"p.x\"\r\n [style.top.px]=\"p.y\"\r\n (mousedown)=\"onmousedownPoint($event, p)\"\r\n ></div>\r\n }\r\n }\r\n </div>\r\n</div>\r\n\r\n<!-- drawer TEMPLATE -->\r\n<nz-drawer\r\n [nzTitle]=\"drawTemplateTitle\"\r\n nzPlacement=\"right\"\r\n [nzWidth]=\"500\"\r\n [nzClosable]=\"false\"\r\n [nzVisible]=\"drawTemplateVisibel\"\r\n [nzFooter]=\"footerTplTemplate\"\r\n (nzOnClose)=\"drawTemplateVisibel = false\"\r\n>\r\n <ng-template #drawTemplateTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; Template </ng-template>\r\n <ng-container *nzDrawerContent>\r\n <extend-select\r\n [label]=\"'Org'\"\r\n [lstItem]=\"lstOrg\"\r\n [valueField]=\"'App_Org_Id'\"\r\n [displayFields]=\"['Name', 'Code']\"\r\n [(_ngModel)]=\"template.App_Org_Id\"\r\n ></extend-select>\r\n <extend-input [label]=\"'Code'\" [(_ngModel)]=\"template.Code\"></extend-input>\r\n <extend-input [label]=\"'Name'\" [(_ngModel)]=\"template.Name\"></extend-input>\r\n <extend-select\r\n [label]=\"'Type'\"\r\n [lstItem]=\"template.lstTemplateType\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"template.DocType\"\r\n ></extend-select>\r\n <extend-textarea [label]=\"'Desscription'\" [(_ngModel)]=\"template.Description\"></extend-textarea>\r\n <extend-select\r\n [label]=\"'Print template'\"\r\n [lstItem]=\"template.lstTemplatePrint\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"template.TemplatePrint\"\r\n ></extend-select>\r\n <extend-select\r\n [label]=\"'Apply to'\"\r\n [lstItem]=\"template.lstApplyTo\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"template.ApplyTo\"\r\n ></extend-select>\r\n\r\n <extend-checkbox [label]=\"'Active'\" [(_ngModel)]=\"template.IsActive\"></extend-checkbox>\r\n <extend-checkbox [label]=\"'Use Allow back'\" [(_ngModel)]=\"template.editorOption.AllowbackInUse\"></extend-checkbox>\r\n\r\n <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Stage</h3>\r\n\r\n <div nz-row [nzGutter]=\"[0, 5]\">\r\n @for (tag of getLstStage; track tag) {\r\n <div nz-col>\r\n <nz-tag (click)=\"hoverStage = tag\">\r\n {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\r\n </nz-tag>\r\n </div>\r\n }\r\n </div>\r\n\r\n <box [height]=\"16\"></box>\r\n\r\n <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Stage status</h3>\r\n\r\n <div nz-row [nzGutter]=\"[0, 5]\">\r\n @for (tag of template.lstStageStatus; track tag) {\r\n <div nz-col>\r\n <nz-tag\r\n [nzMode]=\"checkRemoveableStageStatus(tag) ? 'closeable' : 'default'\"\r\n (nzOnClose)=\"handleCloseStageStatus(tag)\"\r\n >\r\n {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\r\n </nz-tag>\r\n </div>\r\n }\r\n\r\n <div nz-col>\r\n @if (!inputStageStatusVisible) {\r\n <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInputStageStatus()\">\r\n <nz-icon nzType=\"plus\" />\r\n New Action type\r\n </nz-tag>\r\n } @else {\r\n <input\r\n #inputStageStatusElement\r\n nz-input\r\n nzSize=\"small\"\r\n type=\"text\"\r\n style=\"width: 150px\"\r\n placeholder=\"Code\"\r\n [(ngModel)]=\"inputStageStatusCode\"\r\n (keydown.enter)=\"inputStageStatusNameElement.select()\"\r\n />\r\n <input\r\n #inputStageStatusNameElement\r\n nz-input\r\n nzSize=\"small\"\r\n type=\"text\"\r\n style=\"width: 150px\"\r\n placeholder=\"Name\"\r\n [(ngModel)]=\"inputStageStatusName\"\r\n (blur)=\"handleInputStageStatusConfirm()\"\r\n (keydown.enter)=\"handleInputStageStatusConfirm()\"\r\n />\r\n }\r\n </div>\r\n </div>\r\n\r\n <box [height]=\"16\"></box>\r\n\r\n <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Action type</h3>\r\n\r\n <div nz-row [nzGutter]=\"[0, 5]\">\r\n @for (tag of template.lstActionType; track tag) {\r\n <div nz-col>\r\n <nz-tag\r\n [nzMode]=\"checkRemoveableActionType(tag) ? 'closeable' : 'default'\"\r\n (nzOnClose)=\"handleCloseActionType(tag)\"\r\n >\r\n {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\r\n </nz-tag>\r\n </div>\r\n }\r\n\r\n <div nz-col>\r\n @if (!inputActionTypeVisible) {\r\n <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInputActionType()\">\r\n <nz-icon nzType=\"plus\" />\r\n New Action type\r\n </nz-tag>\r\n } @else {\r\n <input\r\n #inputActionTypeElement\r\n nz-input\r\n nzSize=\"small\"\r\n type=\"text\"\r\n style=\"width: 150px\"\r\n placeholder=\"Code\"\r\n [(ngModel)]=\"inputActionTypeCode\"\r\n (keydown.enter)=\"inputActionTypeNameElement.select()\"\r\n />\r\n <input\r\n #inputActionTypeNameElement\r\n nz-input\r\n nzSize=\"small\"\r\n type=\"text\"\r\n style=\"width: 150px\"\r\n placeholder=\"Name\"\r\n [(ngModel)]=\"inputActionTypeName\"\r\n (blur)=\"handleInputActionTypeConfirm()\"\r\n (keydown.enter)=\"handleInputActionTypeConfirm()\"\r\n />\r\n }\r\n </div>\r\n </div>\r\n\r\n <box [height]=\"16\"></box>\r\n\r\n <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Action status</h3>\r\n\r\n <div nz-row [nzGutter]=\"[0, 5]\">\r\n @for (tag of template.lstActionStatus; track tag) {\r\n <div nz-col>\r\n @if (template.editingActionStatus != tag) {\r\n <nz-tag\r\n [nzMode]=\"checkRemoveableActionStatus(tag.Code) ? 'closeable' : 'default'\"\r\n (nzOnClose)=\"handleClose(tag.Code)\"\r\n (click)=\"template.editingActionStatus = checkRemoveableActionStatus(tag.Code) ? tag : undefined\"\r\n >\r\n {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\r\n </nz-tag>\r\n } @else {\r\n <input\r\n nz-input\r\n nzSize=\"small\"\r\n type=\"text\"\r\n style=\"width: 150px\"\r\n [appAutoFocus]=\"true\"\r\n [(ngModel)]=\"tag.Code\"\r\n (blur)=\"template.editingActionStatus = undefined\"\r\n (keydown.enter)=\"template.editingActionStatus = undefined\"\r\n />&nbsp;&nbsp;\r\n }\r\n </div>\r\n }\r\n\r\n <div nz-col>\r\n @if (!inputVisible) {\r\n <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInput()\">\r\n <nz-icon nzType=\"plus\" />\r\n New Action status\r\n </nz-tag>\r\n } @else {\r\n <input\r\n #inputElement\r\n nz-input\r\n nzSize=\"small\"\r\n type=\"text\"\r\n style=\"width: 150px\"\r\n placeholder=\"+ New Action status\"\r\n [(ngModel)]=\"inputValue\"\r\n (blur)=\"handleInputConfirm()\"\r\n (keydown.enter)=\"handleInputConfirm()\"\r\n />\r\n }\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #footerTplTemplate>\r\n <div nz-flex [nzGap]=\"6\" [nzJustify]=\"'end'\">\r\n <button nz-button nzDanger [nzLoading]=\"!ready\" (click)=\"save()\">Save</button>\r\n <button nz-button (click)=\"drawTemplateVisibel = false\">Close</button>\r\n </div>\r\n </ng-template>\r\n</nz-drawer>\r\n\r\n<!-- drawer STAGE -->\r\n<nz-drawer\r\n [nzTitle]=\"drawerTitleStage\"\r\n [nzPlacement]=\"selectedStage?.editorOption?.drawerPosition == 'left' ? 'left' : 'right'\"\r\n [nzVisible]=\"!!selectedStage\"\r\n [nzWidth]=\"'calc(50vw)'\"\r\n [nzClosable]=\"false\"\r\n [nzFooter]=\"footerTplNode\"\r\n (nzOnClose)=\"selectedStage = undefined\"\r\n>\r\n <ng-template #drawerTitleStage>\r\n <div nz-row nzJustify=\"space-between\">\r\n @if (selectedStage && selectedStage.editorOption) {\r\n @if (selectedStage.editorOption.drawerPosition == \"left\") {\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n nz-tooltip=\"To the right\"\r\n (click)=\"selectedStage.editorOption.drawerPosition = 'right'\"\r\n >\r\n <nz-icon nzType=\"double-right\"></nz-icon>\r\n </button>\r\n STAGE\r\n } @else {\r\n STAGE\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n nz-tooltip=\"To the left\"\r\n (click)=\"selectedStage.editorOption.drawerPosition = 'left'\"\r\n >\r\n <nz-icon nzType=\"double-left\"></nz-icon>\r\n </button>\r\n }\r\n }\r\n </div>\r\n </ng-template>\r\n <ng-container *nzDrawerContent>\r\n <ng-container *ngIf=\"selectedStage\">\r\n <nz-radio-group [(ngModel)]=\"selectedStage.StageType\">\r\n <label nz-radio nzValue=\"_start_\">UI start</label>\r\n <label nz-radio nzValue=\"_end_\">UI end</label>\r\n <label nz-radio nzValue=\"start\">START</label>\r\n <label nz-radio nzValue=\"node\">NODE</label>\r\n <label nz-radio nzValue=\"end\">END</label>\r\n </nz-radio-group>\r\n\r\n <box [height]=\"16\"></box>\r\n\r\n <div nz-row [nzGutter]=\"32\" class=\"form-item-no-bottom\">\r\n <extend-input\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Code'\"\r\n [floatingLabel]=\"true\"\r\n [required]=\"true\"\r\n [(_ngModel)]=\"selectedStage.Code\"\r\n ></extend-input>\r\n\r\n <extend-input\r\n nz-col\r\n [nzSpan]=\"16\"\r\n [label]=\"'Name'\"\r\n [floatingLabel]=\"true\"\r\n [required]=\"true\"\r\n [(_ngModel)]=\"selectedStage.Name\"\r\n ></extend-input>\r\n </div>\r\n\r\n <div nz-row [nzGutter]=\"32\" class=\"form-item-no-bottom\">\r\n <extend-input-number\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Sequence'\"\r\n [floatingLabel]=\"true\"\r\n [(_ngModel)]=\"selectedStage.SeqValue\"\r\n ></extend-input-number>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"16\"\r\n [label]=\"'Org implement'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"lstOrg\"\r\n [valueField]=\"'App_Org_Id'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedStage.App_Org_Id\"\r\n ></extend-select>\r\n </div>\r\n\r\n <div nz-row [nzGutter]=\"32\" class=\"form-item-no-bottom\">\r\n <extend-input-number\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Number of Days'\"\r\n [floatingLabel]=\"true\"\r\n [precision]=\"1\"\r\n [(_ngModel)]=\"selectedStage.NumberDay\"\r\n ></extend-input-number>\r\n </div>\r\n\r\n @if (selectedStage.editorOption) {\r\n @if ([\"start\", \"node\", \"end\"].includes(selectedStage.StageType.toLowerCase())) {\r\n <extend-checkbox\r\n [label]=\"'Reverse'\"\r\n [labelSpan]=\"0\"\r\n [(_ngModel)]=\"selectedStage.editorOption.isReverse\"\r\n ></extend-checkbox>\r\n }\r\n\r\n <extend-checkbox\r\n [label]=\"'Require user action'\"\r\n [labelSpan]=\"0\"\r\n [(_ngModel)]=\"selectedStage.IsRequireUser\"\r\n ></extend-checkbox>\r\n }\r\n\r\n <box [height]=\"16\"></box>\r\n\r\n <div nz-row [nzGutter]=\"16\">\r\n <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;List Action</h3>\r\n <div nz-col>\r\n <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"addAction()\">\r\n <nz-icon nzType=\"plus\"></nz-icon>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <nz-table nzSize=\"small\" [nzData]=\"lstActionOfCurrentStage\" [nzShowPagination]=\"false\" [nzNoResult]=\"'&nbsp;'\">\r\n <thead>\r\n <tr [hidden]=\"true\">\r\n <th nzWidth=\"40px\"></th>\r\n <th></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (action of lstActionOfCurrentStage; track $index) {\r\n <tr (click)=\"onclickaction(action)\">\r\n <td\r\n style=\"border-bottom: solid 1px orange\"\r\n [ngStyle]=\"{\r\n 'border-left': action == hoverAction ? 'solid 4px orange' : '',\r\n 'border-top': $index == 0 ? 'solid 1px orange' : '',\r\n }\"\r\n >\r\n ({{ $index + 1 }})\r\n <nz-icon\r\n nzType=\"delete\"\r\n nzTheme=\"outline\"\r\n class=\"color-warn cursor-pointer icon-size-16\"\r\n (click)=\"$event.stopPropagation(); deleteAction(action)\"\r\n ></nz-icon>\r\n </td>\r\n <td\r\n style=\"border-bottom: solid 1px orange\"\r\n [ngStyle]=\"{\r\n 'border-top': $index == 0 ? 'solid 1px orange' : '',\r\n }\"\r\n >\r\n <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\r\n <div nz-col [nzSpan]=\"8\" class=\"has-floating-label floating-label\">\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"24\" style=\"z-index: 2\">\r\n <label>Action status</label>\r\n </nz-form-label>\r\n <nz-form-control [nzSpan]=\"24\">\r\n <nz-input-group class=\"full-width\">\r\n <input\r\n nz-input\r\n [(ngModel)]=\"action.ActionStatus\"\r\n [nzAutocomplete]=\"auto\"\r\n (ngModelChange)=\"nzAutocompletechange($event, template.lstActionStatus)\"\r\n (click)=\"lstActionStatusFiltered = template.lstActionStatus\"\r\n (keyup.enter)=\"onenterAotu(action.ActionStatus)\"\r\n (blur)=\"onenterAotu(action.ActionStatus)\"\r\n />\r\n <nz-autocomplete #auto [compareWith]=\"compareFun\">\r\n @for (option of lstActionStatusFiltered; track $index) {\r\n <nz-auto-option [nzValue]=\"option.Code\" [nzLabel]=\"option.Code\">\r\n {{ option.Code }}\r\n <icon-delete\r\n *ngIf=\"checkRemoveableActionStatus(option.Code)\"\r\n style=\"float: right\"\r\n [size]=\"12\"\r\n (click)=\"handleClose(option.Code)\"\r\n ></icon-delete>\r\n </nz-auto-option>\r\n }\r\n </nz-autocomplete>\r\n </nz-input-group>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <extend-input\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Action text'\"\r\n [floatingLabel]=\"true\"\r\n [(_ngModel)]=\"action.ActionText\"\r\n (_ngModelChange)=\"onchangeActionText(action)\"\r\n ></extend-input>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Action type'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"template.lstActionType\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"action.ActionType\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Stage status'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"template.lstStageStatus\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"action.StageStatus\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Next stage'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"getlstStage\"\r\n [valueField]=\"'WF_TemplateStage_Id'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"action.To_WF_TemplateStage_Id\"\r\n (_ngModelChange)=\"onchangeNextStage(action)\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Next stage status'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"template.lstStageStatus\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"action.To_StageStatus\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Process status'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"template.lstProcessStatus\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"action.DocProcessStatus\"\r\n ></extend-select>\r\n </div>\r\n <box [height]=\"8\"></box>\r\n <div nz-row>Role</div>\r\n <div nz-row>\r\n <extend-select\r\n nz-col\r\n nzSpan=\"24\"\r\n [size]=\"'small'\"\r\n [lstItem]=\"lstRole\"\r\n [valueField]=\"'App_Role_Id'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [multiple]=\"true\"\r\n [(_ngModel)]=\"action._lstRoleId\"\r\n (_ngModelChange)=\"onselectedRoleEmail(action)\"\r\n ></extend-select>\r\n </div>\r\n <box [height]=\"8\"></box>\r\n <div nz-row>Email action</div>\r\n <div nz-row>\r\n <extend-select\r\n nz-col\r\n nzSpan=\"24\"\r\n [size]=\"'small'\"\r\n [lstItem]=\"lstEmailAction\"\r\n [valueField]=\"'ID'\"\r\n [displayField]=\"'Name'\"\r\n [multiple]=\"true\"\r\n [(_ngModel)]=\"action._lstEmailActionId\"\r\n (_ngModelChange)=\"onselectedRoleEmail(action)\"\r\n ></extend-select>\r\n </div>\r\n <box [height]=\"8\"></box>\r\n <div *ngIf=\"action._lstEmailActionId && action._lstEmailActionId.length\" nz-row>Email template</div>\r\n <div *ngIf=\"action._lstEmailActionId && action._lstEmailActionId.length\" nz-row>\r\n <div nz-col nzSpan=\"1\"></div>\r\n <div nz-col nzSpan=\"23\" class=\"form-item-no-bottom\" style=\"font-weight: normal\">\r\n @for (actionRef of lstActionRefOf(action); track $index) {\r\n <div nz-row>\r\n <extend-select\r\n nz-col\r\n nzSpan=\"24\"\r\n [labelSpan]=\"12\"\r\n [size]=\"'small'\"\r\n [label]=\"emailActionText(actionRef.To_WF_TemplateStageAction_Id)\"\r\n [lstItem]=\"lstEmailTemplate\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"actionRef.TemplateMail\"\r\n ></extend-select>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n <box [height]=\"8\"></box>\r\n <div nz-row [nzGutter]=\"8\">\r\n Action rule\r\n <button nz-button nzType=\"text\" nzSize=\"small\" (click)=\"actionRuleModalVisible = true\">\r\n <nz-icon nzType=\"export\" nzTheme=\"outline\" class=\"color-primary\" />\r\n </button>\r\n <button\r\n *ngIf=\"action.WF_TransitionsRule_Id\"\r\n nz-button\r\n nzType=\"text\"\r\n nzSize=\"small\"\r\n (click)=\"deleteActionRule(action)\"\r\n >\r\n <nz-icon nzType=\"delete\" nzTheme=\"outline\" class=\"color-warn\" />\r\n </button>\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n </tbody>\r\n </nz-table>\r\n\r\n <box [height]=\"16\"></box>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #footerTplNode>\r\n <div\r\n nz-flex\r\n [nzGap]=\"6\"\r\n [nzJustify]=\"\r\n selectedStage && selectedStage.editorOption && selectedStage.editorOption.drawerPosition == 'left'\r\n ? 'start'\r\n : 'end'\r\n \"\r\n >\r\n <button nz-button nzDanger nzDanger [nzLoading]=\"!ready\" (click)=\"save()\">Save</button>\r\n <button nz-button (click)=\"selectedStage = undefined\">Close</button>\r\n <button\r\n *ngIf=\"selectedStage && ['START', 'END'].indexOf(selectedStage.StageType) < 0\"\r\n nz-button\r\n nzDanger\r\n (click)=\"deleteStage()\"\r\n >\r\n Delete\r\n </button>\r\n </div>\r\n </ng-template>\r\n</nz-drawer>\r\n\r\n<!-- drawer ACTION -->\r\n<nz-drawer\r\n [nzTitle]=\"drawerTitleAction\"\r\n nzTitle=\"ACTION\"\r\n [nzPlacement]=\"selectedAction?.editorOption?.drawerPosition == 'left' ? 'left' : 'right'\"\r\n [nzClosable]=\"false\"\r\n [nzWidth]=\"750\"\r\n [nzVisible]=\"!!selectedAction\"\r\n [nzFooter]=\"footerTplAction\"\r\n (nzOnClose)=\"selectedAction = undefined\"\r\n>\r\n <ng-template #drawerTitleAction>\r\n <div nz-row nzJustify=\"space-between\">\r\n @if (selectedAction && selectedAction.editorOption) {\r\n @if (selectedAction.editorOption.drawerPosition == \"left\") {\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n nz-tooltip=\"To the right\"\r\n (click)=\"selectedAction.editorOption.drawerPosition = 'right'\"\r\n >\r\n <nz-icon nzType=\"double-right\"></nz-icon>\r\n </button>\r\n ACTION\r\n } @else {\r\n ACTION\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n nz-tooltip=\"To the left\"\r\n (click)=\"selectedAction.editorOption.drawerPosition = 'left'\"\r\n >\r\n <nz-icon nzType=\"double-left\"></nz-icon>\r\n </button>\r\n }\r\n }\r\n </div>\r\n </ng-template>\r\n <ng-container *nzDrawerContent>\r\n <ng-container *ngIf=\"selectedAction\">\r\n <div>\r\n <strong\r\n >{{ selectedAction.getFromStageCode(lstStage) }} -> {{ selectedAction.getToStageCode(lstStage) }}</strong\r\n >\r\n </div>\r\n <div>{{ selectedAction.getFromStageName(lstStage) }} -> {{ selectedAction.getToStageName(lstStage) }}</div>\r\n\r\n <box [height]=\"16\"></box>\r\n\r\n <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\r\n <div nz-col [nzSpan]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"24\" style=\"height: 32px\">Action status</nz-form-label>\r\n <nz-form-control [nzSpan]=\"24\">\r\n <nz-input-group class=\"full-width\">\r\n <input\r\n nz-input\r\n [(ngModel)]=\"selectedAction.ActionStatus\"\r\n [nzAutocomplete]=\"auto\"\r\n (ngModelChange)=\"nzAutocompletechange($event, template.lstActionStatus)\"\r\n (click)=\"lstActionStatusFiltered = template.lstActionStatus\"\r\n (keyup.enter)=\"onenterAotu(selectedAction.ActionStatus)\"\r\n (blur)=\"onenterAotu(selectedAction.ActionStatus)\"\r\n />\r\n <nz-autocomplete #auto [compareWith]=\"compareFun\">\r\n @for (option of lstActionStatusFiltered; track $index) {\r\n <nz-auto-option [nzValue]=\"option.Code\" [nzLabel]=\"option.Code\">\r\n {{ option.Code }}\r\n <icon-delete\r\n *ngIf=\"checkRemoveableActionStatus(option.Code)\"\r\n style=\"float: right\"\r\n [size]=\"12\"\r\n (click)=\"handleClose(option.Code)\"\r\n ></icon-delete>\r\n </nz-auto-option>\r\n }\r\n </nz-autocomplete>\r\n </nz-input-group>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <extend-input\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Action text'\"\r\n [floatingLabel]=\"true\"\r\n [(_ngModel)]=\"selectedAction.ActionText\"\r\n (_ngModelChange)=\"onchangeActionText(selectedAction)\"\r\n ></extend-input>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Action type'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"template.lstActionType\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedAction.ActionType\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Stage status'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"template.lstStageStatus\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedAction.StageStatus\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Next stage'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"lstStage\"\r\n [valueField]=\"'WF_TemplateStage_Id'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedAction.To_WF_TemplateStage_Id\"\r\n (_ngModelChange)=\"onchangeNextStage(selectedAction)\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Next stage status'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"template.lstStageStatus\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedAction.To_StageStatus\"\r\n ></extend-select>\r\n </div>\r\n\r\n <!-- <box [height]=\"16\"></box> -->\r\n <nz-divider></nz-divider>\r\n\r\n @if (template.editorOption.AllowbackInUse) {\r\n <extend-checkbox\r\n [label]=\"'Allow back'\"\r\n [labelSpan]=\"0\"\r\n [(_ngModel)]=\"selectedAction.allowBack\"\r\n (_ngModelChange)=\"onchangeAllowBack(selectedAction)\"\r\n ></extend-checkbox>\r\n }\r\n\r\n <box [height]=\"16\"></box>\r\n\r\n @if (selectedAction.allowBack) {\r\n <div>\r\n <strong\r\n >{{ selectedAction.getToStageCode(lstStage) }} -> {{ selectedAction.getFromStageCode(lstStage) }}</strong\r\n >\r\n </div>\r\n <div>{{ selectedAction.getToStageName(lstStage) }} -> {{ selectedAction.getFromStageName(lstStage) }}</div>\r\n\r\n @if (selectedBackAction) {\r\n <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\r\n <div nz-col [nzSpan]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label [nzSpan]=\"24\" style=\"height: 32px\">Action status</nz-form-label>\r\n <nz-form-control [nzSpan]=\"24\">\r\n <nz-input-group class=\"full-width\">\r\n <input\r\n nz-input\r\n [(ngModel)]=\"selectedBackAction.ActionStatus\"\r\n [nzAutocomplete]=\"auto\"\r\n (ngModelChange)=\"nzAutocompletechange($event, template.lstActionStatus)\"\r\n (click)=\"lstActionStatusFiltered = template.lstActionStatus\"\r\n (keyup.enter)=\"onenterAotu(selectedBackAction.ActionStatus)\"\r\n (blur)=\"onenterAotu(selectedBackAction.ActionStatus)\"\r\n />\r\n <nz-autocomplete #auto [compareWith]=\"compareFun\">\r\n @for (option of lstActionStatusFiltered; track $index) {\r\n <nz-auto-option [nzValue]=\"option.Code\" [nzLabel]=\"option.Code\">\r\n {{ option.Code }}\r\n <icon-delete\r\n *ngIf=\"checkRemoveableActionStatus(option.Code)\"\r\n style=\"float: right\"\r\n [size]=\"12\"\r\n (click)=\"handleClose(option.Code)\"\r\n ></icon-delete>\r\n </nz-auto-option>\r\n }\r\n </nz-autocomplete>\r\n </nz-input-group>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <extend-input\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Action text'\"\r\n [floatingLabel]=\"true\"\r\n [(_ngModel)]=\"selectedBackAction.ActionText\"\r\n (_ngModelChange)=\"onchangeActionText(selectedBackAction)\"\r\n ></extend-input>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Action type'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"template.lstActionType\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedBackAction.ActionType\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Stage status'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"template.lstStageStatus\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedBackAction.StageStatus\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Next stage'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"lstStage\"\r\n [valueField]=\"'WF_TemplateStage_Id'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedBackAction.To_WF_TemplateStage_Id\"\r\n (_ngModelChange)=\"onchangeNextStage(selectedBackAction)\"\r\n ></extend-select>\r\n\r\n <extend-select\r\n nz-col\r\n [nzSpan]=\"8\"\r\n [label]=\"'Next stage status'\"\r\n [floatingLabel]=\"true\"\r\n [lstItem]=\"template.lstStageStatus\"\r\n [valueField]=\"'Code'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [(_ngModel)]=\"selectedBackAction.To_StageStatus\"\r\n ></extend-select>\r\n </div>\r\n }\r\n }\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #footerTplAction>\r\n <div\r\n nz-flex\r\n [nzGap]=\"6\"\r\n [nzJustify]=\"selectedAction && selectedAction.editorOption.drawerPosition == 'left' ? 'start' : 'end'\"\r\n >\r\n <button nz-button nzDanger nzDanger [nzLoading]=\"!ready\" (click)=\"save()\">Save</button>\r\n <button nz-button nzDanger (click)=\"deleteAction(selectedAction!)\">Delete</button>\r\n <button nz-button (click)=\"selectedAction = undefined\">Close</button>\r\n </div>\r\n </ng-template>\r\n</nz-drawer>\r\n\r\n<!-- setting editor -->\r\n<nz-drawer\r\n [nzTitle]=\"drawSettingTitle\"\r\n nzPlacement=\"right\"\r\n [nzClosable]=\"false\"\r\n [nzVisible]=\"settingVisible\"\r\n (nzOnClose)=\"settingVisible = false\"\r\n>\r\n <ng-template #drawSettingTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; Editor </ng-template>\r\n <ng-container *nzDrawerContent>\r\n <div class=\"form-item-no-bottom\">\r\n <extend-checkbox [label]=\"'Show grid'\" [labelSpan]=\"0\" [(_ngModel)]=\"wfcSetting.ShowGrid\"></extend-checkbox>\r\n\r\n <box [height]=\"16\"></box>\r\n </div>\r\n </ng-container>\r\n</nz-drawer>\r\n\r\n<!-- editor infomation -->\r\n<nz-drawer\r\n [nzTitle]=\"drawInfoTitle\"\r\n nzPlacement=\"right\"\r\n [nzClosable]=\"false\"\r\n [nzVisible]=\"infoVisible\"\r\n (nzOnClose)=\"infoVisible = false\"\r\n>\r\n <ng-template #drawInfoTitle> <nz-icon nzType=\"info-circle\"></nz-icon> &nbsp; Infomation </ng-template>\r\n <ng-container *nzDrawerContent>\r\n <p>1. C\u00E1c th\u00E0nh ph\u1EA7n: Stage or Node (stag, node quy tr\u00ECnh), Action or Connector (\u0111\u01B0\u1EDDng n\u1ED1i gi\u1EEFa c\u00E1c stage)</p>\r\n <p>2. Save \u0111\u1EC3 load c\u00E1c th\u00F4ng tin: Stage status, Action type</p>\r\n <p>\r\n 3. N\u1ED1i 2 node (t\u1EA1o connector t\u01B0\u01A1ng \u0111\u01B0\u01A1ng t\u1EA1o action):\r\n <br />- Click ch\u1EA5m cam t\u1EEB Node ngu\u1ED3n \u0111\u1EBFn ch\u1EA5m xanh c\u1EE7a Node \u0111\u00EDch (ho\u1EB7c click v\u00E0o Node \u0111\u00EDch), c\u00F3 th\u1EC3 click th\u00E0nh\r\n nhi\u1EC1u \u0111i\u1EC3m \u0111\u1EC3 t\u1EA1o \u0111\u01B0\u1EDDng n\u1ED1i cong<br />- Khi hover connector chuy\u1EC3n sang m\u1EA7u \u0111\u1ECF c\u00F3 th\u1EC3 click \u0111\u00FAp \u0111\u1EC3 th\u00EAm m\u1ED9t \u0111i\u1EC3m\r\n c\u1EE7a connector<br />- Khi hover l\u00EAn \u0111i\u1EC3m c\u1EE7a connector c\u00F3 th\u1EC3 di chuy\u1EC3n \u0111i\u1EC3m \u0111\u00F3 b\u1EB1ng c\u00E1ch nh\u1EA5n gi\u1EEF chu\u1ED9t v\u00E0 k\u00E9o th\u1EA3\r\n \u0111\u1EBFn v\u1ECB tr\u00ED m\u1EDBi<br />- Chu\u1ED9t ph\u1EA3i v\u00E0o \u0111i\u1EC3m n\u1ED1i connector \u0111\u1EC3 xo\u00E1 \u0111i\u1EC3m \u0111\u00F3\r\n </p>\r\n </ng-container>\r\n</nz-drawer>\r\n\r\n<!-- action rule modal -->\r\n<nz-modal\r\n [(nzVisible)]=\"actionRuleModalVisible\"\r\n [nzMaskClosable]=\"false\"\r\n [nzClosable]=\"false\"\r\n [nzKeyboard]=\"true\"\r\n [nzWidth]=\"'75vw'\"\r\n>\r\n <ng-container *nzModalTitle>\r\n ACTION RULE: [{{ selectedStage?.Code }}] {{ selectedStage?.Name }} > [{{ hoverAction?.ActionStatus }}]\r\n {{ hoverAction?.ActionText }}\r\n </ng-container>\r\n <ng-container *nzModalContent>\r\n @if (hoverAction && hoverAction.actionRule) {\r\n <div nz-row [nzGutter]=\"32\" class=\"form-item-no-bottom\">\r\n <extend-input nz-col nzSpan=\"12\" [label]=\"'Code'\" [(_ngModel)]=\"hoverAction.actionRule.Code\"></extend-input>\r\n <extend-input nz-col nzSpan=\"12\" [label]=\"'Name'\" [(_ngModel)]=\"hoverAction.actionRule.Name\"></extend-input>\r\n <extend-input nz-col nzSpan=\"12\" [label]=\"'Note'\" [(_ngModel)]=\"hoverAction.actionRule.Note\"></extend-input>\r\n <extend-checkbox\r\n nz-col\r\n nzSpan=\"12\"\r\n [label]=\"'IsActive'\"\r\n [(_ngModel)]=\"hoverAction.actionRule.IsActive\"\r\n ></extend-checkbox>\r\n </div>\r\n <box [height]=\"8\"></box>\r\n <div nz-row [nzGutter]=\"16\">\r\n <div nz-col nzSpan=\"24\">\r\n <nz-table nzSize=\"small\" [nzData]=\"hoverAction.actionRule.lstLine\" [nzShowPagination]=\"false\">\r\n <thead>\r\n <tr>\r\n <th [nzWidth]=\"'40px'\"><icon-add (click)=\"addActionRuleLine()\"></icon-add></th>\r\n <th [nzWidth]=\"'250px'\">Rule type</th>\r\n <th>Template</th>\r\n <th>Template stage</th>\r\n <th>Template action</th>\r\n <th>Store to exec</th>\r\n <th [nzWidth]=\"'50px'\">Active</th>\r\n <th>Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (item of hoverAction.actionRule.lstLine; track $index) {\r\n <tr>\r\n <td><icon-delete (click)=\"deleteActionRuleLine(hoverAction.actionRule, item)\"></icon-delete></td>\r\n <td>\r\n <dic-domain-select\r\n [size]=\"'small'\"\r\n [DomainCode]=\"'WF_RuleType'\"\r\n [(_ngModel)]=\"item.RuleType\"\r\n ></dic-domain-select>\r\n </td>\r\n <td>\r\n <extend-select\r\n #xxx\r\n [size]=\"'small'\"\r\n [lstItem]=\"lstTemplateForRule(item)\"\r\n [valueField]=\"'WF_Template_Id'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [dropdownMatchSelectWidth]=\"false\"\r\n [(_ngModel)]=\"item.WF_Template_Id\"\r\n (_ngModelChange)=\"item.WF_TemplateStage_Id = 0; item.WF_TemplateStageAction_Id = 0\"\r\n ></extend-select>\r\n </td>\r\n <td>\r\n <extend-select\r\n #yyy\r\n [size]=\"'small'\"\r\n [lstItem]=\"lstStageForRule(xxx._ngModel)\"\r\n [valueField]=\"'WF_TemplateStage_Id'\"\r\n [displayFields]=\"['Code', 'Name']\"\r\n [dropdownMatchSelectWidth]=\"false\"\r\n [(_ngModel)]=\"item.WF_TemplateStage_Id\"\r\n (_ngModelChange)=\"item.WF_TemplateStageAction_Id = 0\"\r\n ></extend-select>\r\n </td>\r\n <td>\r\n <extend-select\r\n [size]=\"'small'\"\r\n [lstItem]=\"lstActionForRule(yyy._ngModel)\"\r\n [valueField]=\"'WF_TemplateStageAction_Id'\"\r\n [displayFields]=\"['ActionStatus', 'ActionText']\"\r\n [dropdownMatchSelectWidth]=\"false\"\r\n [(_ngModel)]=\"item.WF_TemplateStageAction_Id\"\r\n ></extend-select>\r\n </td>\r\n <td>\r\n <extend-input [size]=\"'small'\" [(_ngModel)]=\"item.StoreToExec\"></extend-input>\r\n </td>\r\n <td class=\"text-center\">\r\n <extend-checkbox [(_ngModel)]=\"item.IsActive\"></extend-checkbox>\r\n </td>\r\n <td>\r\n <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"checkAction(item)\">Check</button>\r\n </td>\r\n </tr>\r\n }\r\n </tbody>\r\n </nz-table>\r\n </div>\r\n </div>\r\n }\r\n </ng-container>\r\n <ng-container *nzModalFooter>\r\n <button nz-button nzType=\"primary\" (click)=\"checkAllAction()\">OK</button>\r\n </ng-container>\r\n</nz-modal>\r\n", styles: ["@charset \"UTF-8\";::ng-deep .workflow-wrapper{border:solid 1px lightgray;overflow:hidden;width:100%}.workflow-canvas{position:relative;background:#f0f2f5;cursor:default;overflow:hidden;outline:1px dashed rgba(0,0,0,.1)}.workflow-canvas .edges-layer{position:absolute;inset:0;width:100%;height:100%;z-index:1}.workflow-canvas .edges-layer path{stroke-width:2;fill:none}.canvas-content{transform-origin:0 0;width:100%;height:100%}.canvas-content{outline:1px dashed red}.canvas-content.panning{cursor:grab}.canvas-content.panning:active{cursor:grabbing}.workflow-canvas.panning{cursor:grab}.workflow-canvas.panning:active{cursor:grabbing}.workflow-canvas.connecting,.workflow-canvas.connecting .workflow-node{cursor:crosshair}.workflow-node{position:absolute;width:160px;cursor:grab;-webkit-user-select:none;user-select:none;z-index:2}.workflow-node:active{cursor:grabbing}.workflow-node.connecting-source,.workflow-node.selected,.workflow-node:hover:not(.workflow-node-start,.workflow-node-end){outline:2px dashed #1890ff}.workflow-node .title{font-weight:600;margin-bottom:6px}.workflow-node-start{width:0px}.workflow-node-start.connecting-source,.workflow-node-start.selected,.workflow-node-start:hover{outline:unset}.workflow-node-start.connecting-source nz-tag,.workflow-node-start.selected nz-tag,.workflow-node-start:hover nz-tag{outline:2px dashed}.workflow-node-start nz-tag{position:relative;top:45px;right:35px}.workflow-node-end{width:0px}.workflow-node-end.connecting-source,.workflow-node-end.selected,.workflow-node-end:hover{outline:unset}.workflow-node-end.connecting-source nz-tag,.workflow-node-end.selected nz-tag,.workflow-node-end:hover nz-tag{outline:2px dashed}.workflow-node-end nz-tag{position:relative;top:45px;right:32px}.connector{position:absolute;top:39px;width:12px;height:12px;background:#1890ff;border-radius:50%;transform:translateY(-50%);cursor:crosshair;transition:box-shadow .15s ease-out,transform .15s ease-out}.connector:hover{box-shadow:0 0 0 3px #1890ff4d;transform:translateY(-50%) scale(1.15)}.connector-right{right:-8px;background:orange}.connector-right.reverse,.connector-left{left:-8px}.connector-left.reverse{left:unset;right:-8px}.connector-start{width:16px;height:16px;right:-8px;background:green;box-shadow:0 0 0 3px #1890ff4d}.connector-end{width:16px;height:16px;left:-8px;background:#000;box-shadow:0 0 0 3px #1890ff4d}.edge{cursor:pointer;stroke:#1890ff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;fill:none;transition:stroke .15s ease}.edge-hit{stroke:transparent;stroke-width:18px!important;fill:none;cursor:pointer}.edge-hit:hover+.edge{stroke:#ff4d4f;stroke-width:2}.workflow-canvas.dragging-point .edge-hit{pointer-events:none}.edge:hover+.edge-label{fill:#1890ff;font-weight:500}.edge-label{font-size:12px;fill:#555;pointer-events:none;-webkit-user-select:none;user-select:none}.blue{stroke:#1890ff!important}.red{stroke:#ff4d4f!important;box-shadow:0 0 0 3px #1890ff4d!important}.workflow-svg{background:transparent;overflow:visible}.waypoint{position:absolute;width:10px;height:10px;background:#ff4d4f;border-radius:50%;transform:translate(-50%,-50%) scale(1);cursor:move;z-index:1;transition:transform .12s ease-out,background-color .12s ease-out,box-shadow .12s ease-out}.waypoint:hover{background:#ff7875;transform:translate(-50%,-50%) scale(1.25);box-shadow:0 0 0 4px #ff787559}.waypoint.dragging{transition:none;transform:translate(-50%,-50%) scale(1.15);pointer-events:none}.workflow-canvas.dragging-point svg{cursor:grabbing}.selection-box{position:absolute;border:1px dashed #1890ff;background:#1890ff1a;pointer-events:none}.toolbar{position:absolute;top:8px;left:8px;display:flex;gap:4px;padding:6px;background:#fff;border-radius:6px;box-shadow:0 2px 8px #00000026;z-index:100}.toolbar .divider{width:1px;background:#e5e5e5;margin:0 2px}.zoom-toolbar{position:absolute;top:8px;left:8px;z-index:10;display:flex;align-items:center;gap:6px;background:#fff;padding:4px 6px;border-radius:6px;box-shadow:0 2px 6px #00000026}.zoom-toolbar span{min-width:40px;text-align:center;font-size:12px}nz-tag.selected{outline:2px dashed #1890ff}.grid-layer{position:absolute;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(rgba(0,0,0,.08) 1px,transparent 1px);background-size:20px 20px}.grid-layer{background-image:linear-gradient(to right,rgba(0,0,0,.06) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.06) 1px,transparent 1px);background-size:20px 20px}.editable-tag{background:#fff;border-style:dashed}::ng-deep .minimap{position:absolute;width:180px;height:125px;top:0;right:0;background-color:#eee;border:1px solid #aaa;opacity:.9;z-index:1}::ng-deep .minimap-node{position:absolute;background-color:#607a86}::ng-deep .minimap-node-round{position:absolute;background-color:#607a86;border-radius:10px}::ng-deep .minimap-node-round-start{background-color:green}::ng-deep .minimap-node-round-end{background-color:#000}::ng-deep .minimap-viewport{position:absolute;box-sizing:border-box;background-color:#4f6f7e66;z-index:1;cursor:move}::ng-deep .has-floating-label.floating-label{position:relative;padding-top:14px}::ng-deep .has-floating-label nz-form-item nz-form-label{position:absolute;top:12px;left:16px;transform:translateY(-50%);background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 80%,#ffffff 80%);z-index:1;height:auto;line-height:normal;padding:0 4px}::ng-deep .has-floating-label nz-form-item nz-form-label label{font-size:12px;color:var(--darkgray, #565656);font-weight:700;height:auto;line-height:normal;padding:0;display:flex;align-items:center}::ng-deep .has-floating-label .full-width{width:100%}.has-floating-label.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label,.has-floating-label.floating-label nz-form-item:has(input[disabled]) nz-form-label,.has-floating-label.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label{background:linear-gradient(to bottom,var(--form-bg-color, #ffffff) 60%,#f5f5f5 50%)}.has-floating-label.floating-label nz-form-item:has(.ant-select-disabled) nz-form-label label,.has-floating-label.floating-label nz-form-item:has(input[disabled]) nz-form-label label,.has-floating-label.floating-label nz-form-item:has(.ant-input-disabled) nz-form-label label{color:#bfbfbf}\n"] }]
12289
11485
  }], propDecorators: { lstOrg: [{
12290
11486
  type: Input
12291
11487
  }], lstRole: [{
@@ -12307,6 +11503,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
12307
11503
  }], onDeleteRuleLine: [{
12308
11504
  type: Output,
12309
11505
  args: ['onDeleteRuleLine']
11506
+ }], onCheckRule: [{
11507
+ type: Output,
11508
+ args: ['onCheckRule']
11509
+ }], onCheckAllRule: [{
11510
+ type: Output,
11511
+ args: ['onCheckAllRule']
12310
11512
  }], canvasRef: [{
12311
11513
  type: ViewChild,
12312
11514
  args: ['canvas', { static: true }]
@@ -13193,7 +12395,7 @@ class NotificationCenterComponent {
13193
12395
  return item.id;
13194
12396
  }
13195
12397
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: NotificationCenterComponent, deps: [{ token: NotificationService }], target: i0.ɵɵFactoryTarget.Component });
13196
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: NotificationCenterComponent, isStandalone: true, selector: "app-notification-center", ngImport: i0, template: "<div\r\n class=\"bell-trigger\"\r\n nz-popover\r\n [nzPopoverTitle]=\"notiTitle\"\r\n [nzPopoverContent]=\"notiContent\"\r\n nzPopoverTrigger=\"click\"\r\n nzPopoverPlacement=\"bottomCenter\"\r\n nzPopoverOverlayClassName=\"enterprise-noti-popover\"\r\n>\r\n <nz-badge [nzCount]=\"0\" [nzOverflowCount]=\"99\" nzSize=\"small\">\r\n <span nz-icon nzType=\"bell\" nzTheme=\"outline\" class=\"bell-icon\"></span>\r\n </nz-badge>\r\n</div>\r\n\r\n<ng-template #notiTitle>\r\n <div class=\"noti-header\">\r\n <span class=\"noti-title-text\">Th\u00F4ng b\u00E1o</span>\r\n <a *ngIf=\"hasNoti\" class=\"noti-mark-read\">\u0110\u00E1nh d\u1EA5u \u0111\u00E3 \u0111\u1ECDc</a>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #notiContent>\r\n <div class=\"noti-body\">\r\n @if (!hasNoti) {\r\n <box [height]=\"8\"></box>\r\n <nz-empty nzNotFoundContent=\"Kh\u00F4ng c\u00F3 Th\u00F4ng b\u00E1o\"></nz-empty>\r\n } @else {\r\n <nz-list nzItemLayout=\"horizontal\" [nzSplit]=\"false\">\r\n <nz-list-item class=\"noti-item unread\">\r\n <nz-list-item-meta\r\n [nzAvatar]=\"avatarTemplate\"\r\n nzTitle=\"H\u1EC7 th\u1ED1ng b\u1EA3o tr\u00EC\"\r\n nzDescription=\"H\u1EC7 th\u1ED1ng s\u1EBD b\u1EA3o tr\u00EC v\u00E0o 12:00 \u0111\u00EAm nay.\"\r\n ></nz-list-item-meta>\r\n </nz-list-item>\r\n\r\n <nz-list-item class=\"noti-item\">\r\n <nz-list-item-meta\r\n [nzAvatar]=\"avatarTemplate\"\r\n nzTitle=\"B\u00E1o c\u00E1o tu\u1EA7n \u0111\u00E3 s\u1EB5n s\u00E0ng\"\r\n nzDescription=\"Nh\u1EA5n v\u00E0o \u0111\u1EC3 xem chi ti\u1EBFt b\u00E1o c\u00E1o. Nh\u1EA5n v\u00E0o \u0111\u1EC3 xem chi ti\u1EBFt b\u00E1o c\u00E1o.\"\r\n ></nz-list-item-meta>\r\n </nz-list-item>\r\n </nz-list>\r\n\r\n <ng-template #avatarTemplate>\r\n <nz-avatar nzIcon=\"info\" class=\"noti-avatar\"></nz-avatar>\r\n </ng-template>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";::ng-deep .enterprise-noti-popover .ant-popover-inner-content{padding:0!important}::ng-deep .enterprise-noti-popover .ant-popover-title{padding:0!important;border-bottom:1px solid #f0f0f0}.bell-trigger{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;transition:background-color .3s;margin-top:4px}.bell-trigger .bell-icon{color:#fff}.bell-trigger:hover{background-color:#ffffff26}.bell-trigger ::ng-deep .ant-badge-count{box-shadow:0 0 0 2px #1f2937}.bell-trigger ::ng-deep .ant-badge-multiple-words{padding:0 3px}.noti-header{display:flex;justify-content:space-between;align-items:center;width:340px;padding:6px 8px}.noti-header .noti-title-text{font-size:16px;font-weight:600;color:#262626}.noti-header .noti-mark-read{font-size:13px;color:#1890ff;cursor:pointer;transition:opacity .3s}.noti-header .noti-mark-read:hover{opacity:.8}.noti-body{width:340px;max-height:400px;overflow-y:auto;overflow-x:hidden}.noti-body .noti-item{padding:14px 16px;cursor:pointer;border-bottom:1px solid #f0f0f0;transition:all .3s ease}.noti-body .noti-item:last-child{border-bottom:none}.noti-body .noti-item:hover{background-color:#f5f5f5}.noti-body .noti-item.unread{background-color:#e6f7ff;position:relative}.noti-body .noti-item.unread:after{content:\"\";position:absolute;top:50%;right:16px;transform:translateY(-50%);width:8px;height:8px;background-color:#1890ff;border-radius:50%}.noti-body .noti-item.unread:hover{background-color:#dcf4ff}.noti-body .noti-avatar{background-color:#1890ff;color:#fff}.noti-body ::ng-deep .ant-list-item-meta-title{margin-bottom:6px;font-size:14px;font-weight:500;line-height:1.4;color:#1f1f1f;word-break:break-word;padding-right:12px}.noti-body ::ng-deep .ant-list-item-meta-description{font-size:13px;line-height:1.4;color:#8c8c8c;word-break:break-word;padding-right:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: NzPopoverModule }, { kind: "directive", type: i3$6.NzPopoverDirective, selector: "[nz-popover]", inputs: ["nzPopoverArrowPointAtCenter", "nzPopoverTitle", "nzPopoverContent", "nz-popover", "nzPopoverTrigger", "nzPopoverPlacement", "nzPopoverOrigin", "nzPopoverVisible", "nzPopoverMouseEnterDelay", "nzPopoverMouseLeaveDelay", "nzPopoverOverlayClassName", "nzPopoverOverlayStyle", "nzPopoverOverlayClickable", "nzPopoverBackdrop"], outputs: ["nzPopoverVisibleChange"], exportAs: ["nzPopover"] }, { kind: "ngmodule", type: NzBadgeModule }, { kind: "component", type: i4$4.NzBadgeComponent, selector: "nz-badge", inputs: ["nzShowZero", "nzShowDot", "nzStandalone", "nzDot", "nzOverflowCount", "nzColor", "nzStyle", "nzText", "nzTitle", "nzStatus", "nzCount", "nzOffset", "nzSize"], exportAs: ["nzBadge"] }, { kind: "ngmodule", type: NzSkeletonModule }, { kind: "ngmodule", type: NzEmptyModule }, { kind: "component", type: i17.NzEmptyComponent, selector: "nz-empty", inputs: ["nzNotFoundImage", "nzNotFoundContent", "nzNotFoundFooter"], exportAs: ["nzEmpty"] }, { kind: "ngmodule", type: NzListModule }, { kind: "component", type: i6$4.NzListComponent, selector: "nz-list, [nz-list]", inputs: ["nzDataSource", "nzBordered", "nzGrid", "nzHeader", "nzFooter", "nzItemLayout", "nzRenderItem", "nzLoading", "nzLoadMore", "nzPagination", "nzSize", "nzSplit", "nzNoResult"], exportAs: ["nzList"] }, { kind: "component", type: i6$4.NzListItemComponent, selector: "nz-list-item, [nz-list-item]", inputs: ["nzActions", "nzContent", "nzExtra", "nzNoFlex"], exportAs: ["nzListItem"] }, { kind: "component", type: i6$4.NzListItemMetaComponent, selector: "nz-list-item-meta, [nz-list-item-meta]", inputs: ["nzAvatar", "nzTitle", "nzDescription"], exportAs: ["nzListItemMeta"] }, { kind: "ngmodule", type: NzAvatarModule }, { kind: "component", type: i7$1.NzAvatarComponent, selector: "nz-avatar", inputs: ["nzShape", "nzSize", "nzGap", "nzText", "nzSrc", "nzSrcSet", "nzAlt", "nzIcon"], outputs: ["nzError"], exportAs: ["nzAvatar"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "directive", type: i3$2.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
12398
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: NotificationCenterComponent, isStandalone: true, selector: "app-notification-center", ngImport: i0, template: "<div\r\n class=\"bell-trigger\"\r\n nz-popover\r\n [nzPopoverTitle]=\"notiTitle\"\r\n [nzPopoverContent]=\"notiContent\"\r\n nzPopoverTrigger=\"click\"\r\n nzPopoverPlacement=\"bottomCenter\"\r\n nzPopoverOverlayClassName=\"enterprise-noti-popover\"\r\n>\r\n <nz-badge [nzCount]=\"0\" [nzOverflowCount]=\"99\" nzSize=\"small\">\r\n <span nz-icon nzType=\"bell\" nzTheme=\"outline\" class=\"bell-icon\"></span>\r\n </nz-badge>\r\n</div>\r\n\r\n<ng-template #notiTitle>\r\n <div class=\"noti-header\">\r\n <span class=\"noti-title-text\">Th\u00F4ng b\u00E1o</span>\r\n <a *ngIf=\"hasNoti\" class=\"noti-mark-read\">\u0110\u00E1nh d\u1EA5u \u0111\u00E3 \u0111\u1ECDc</a>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #notiContent>\r\n <div class=\"noti-body\">\r\n @if (!hasNoti) {\r\n <box [height]=\"8\"></box>\r\n <nz-empty nzNotFoundContent=\"Kh\u00F4ng c\u00F3 Th\u00F4ng b\u00E1o\"></nz-empty>\r\n } @else {\r\n <nz-list nzItemLayout=\"horizontal\" [nzSplit]=\"false\">\r\n <nz-list-item class=\"noti-item unread\">\r\n <nz-list-item-meta\r\n [nzAvatar]=\"avatarTemplate\"\r\n nzTitle=\"H\u1EC7 th\u1ED1ng b\u1EA3o tr\u00EC\"\r\n nzDescription=\"H\u1EC7 th\u1ED1ng s\u1EBD b\u1EA3o tr\u00EC v\u00E0o 12:00 \u0111\u00EAm nay.\"\r\n ></nz-list-item-meta>\r\n </nz-list-item>\r\n\r\n <nz-list-item class=\"noti-item\">\r\n <nz-list-item-meta\r\n [nzAvatar]=\"avatarTemplate\"\r\n nzTitle=\"B\u00E1o c\u00E1o tu\u1EA7n \u0111\u00E3 s\u1EB5n s\u00E0ng\"\r\n nzDescription=\"Nh\u1EA5n v\u00E0o \u0111\u1EC3 xem chi ti\u1EBFt b\u00E1o c\u00E1o. Nh\u1EA5n v\u00E0o \u0111\u1EC3 xem chi ti\u1EBFt b\u00E1o c\u00E1o.\"\r\n ></nz-list-item-meta>\r\n </nz-list-item>\r\n </nz-list>\r\n\r\n <ng-template #avatarTemplate>\r\n <nz-avatar nzIcon=\"info\" class=\"noti-avatar\"></nz-avatar>\r\n </ng-template>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";::ng-deep .enterprise-noti-popover .ant-popover-inner-content{padding:0!important}::ng-deep .enterprise-noti-popover .ant-popover-title{padding:0!important;border-bottom:1px solid #f0f0f0}.bell-trigger{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;transition:background-color .3s;margin-top:4px}.bell-trigger .bell-icon{color:#fff}.bell-trigger:hover{background-color:#ffffff26}.bell-trigger ::ng-deep .ant-badge-count{box-shadow:0 0 0 2px #1f2937}.bell-trigger ::ng-deep .ant-badge-multiple-words{padding:0 3px}.noti-header{display:flex;justify-content:space-between;align-items:center;width:340px;padding:6px 8px}.noti-header .noti-title-text{font-size:16px;font-weight:600;color:#262626}.noti-header .noti-mark-read{font-size:13px;color:#1890ff;cursor:pointer;transition:opacity .3s}.noti-header .noti-mark-read:hover{opacity:.8}.noti-body{width:340px;max-height:400px;overflow-y:auto;overflow-x:hidden}.noti-body .noti-item{padding:14px 16px;cursor:pointer;border-bottom:1px solid #f0f0f0;transition:all .3s ease}.noti-body .noti-item:last-child{border-bottom:none}.noti-body .noti-item:hover{background-color:#f5f5f5}.noti-body .noti-item.unread{background-color:#e6f7ff;position:relative}.noti-body .noti-item.unread:after{content:\"\";position:absolute;top:50%;right:16px;transform:translateY(-50%);width:8px;height:8px;background-color:#1890ff;border-radius:50%}.noti-body .noti-item.unread:hover{background-color:#dcf4ff}.noti-body .noti-avatar{background-color:#1890ff;color:#fff}.noti-body ::ng-deep .ant-list-item-meta-title{margin-bottom:6px;font-size:14px;font-weight:500;line-height:1.4;color:#1f1f1f;word-break:break-word;padding-right:12px}.noti-body ::ng-deep .ant-list-item-meta-description{font-size:13px;line-height:1.4;color:#8c8c8c;word-break:break-word;padding-right:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: NzPopoverModule }, { kind: "directive", type: i3$6.NzPopoverDirective, selector: "[nz-popover]", inputs: ["nzPopoverArrowPointAtCenter", "nzPopoverTitle", "nzPopoverContent", "nz-popover", "nzPopoverTrigger", "nzPopoverPlacement", "nzPopoverOrigin", "nzPopoverVisible", "nzPopoverMouseEnterDelay", "nzPopoverMouseLeaveDelay", "nzPopoverOverlayClassName", "nzPopoverOverlayStyle", "nzPopoverOverlayClickable", "nzPopoverBackdrop"], outputs: ["nzPopoverVisibleChange"], exportAs: ["nzPopover"] }, { kind: "ngmodule", type: NzBadgeModule }, { kind: "component", type: i4$4.NzBadgeComponent, selector: "nz-badge", inputs: ["nzShowZero", "nzShowDot", "nzStandalone", "nzDot", "nzOverflowCount", "nzColor", "nzStyle", "nzText", "nzTitle", "nzStatus", "nzCount", "nzOffset", "nzSize"], exportAs: ["nzBadge"] }, { kind: "ngmodule", type: NzSkeletonModule }, { kind: "ngmodule", type: NzEmptyModule }, { kind: "component", type: i5$5.NzEmptyComponent, selector: "nz-empty", inputs: ["nzNotFoundImage", "nzNotFoundContent", "nzNotFoundFooter"], exportAs: ["nzEmpty"] }, { kind: "ngmodule", type: NzListModule }, { kind: "component", type: i6$4.NzListComponent, selector: "nz-list, [nz-list]", inputs: ["nzDataSource", "nzBordered", "nzGrid", "nzHeader", "nzFooter", "nzItemLayout", "nzRenderItem", "nzLoading", "nzLoadMore", "nzPagination", "nzSize", "nzSplit", "nzNoResult"], exportAs: ["nzList"] }, { kind: "component", type: i6$4.NzListItemComponent, selector: "nz-list-item, [nz-list-item]", inputs: ["nzActions", "nzContent", "nzExtra", "nzNoFlex"], exportAs: ["nzListItem"] }, { kind: "component", type: i6$4.NzListItemMetaComponent, selector: "nz-list-item-meta, [nz-list-item-meta]", inputs: ["nzAvatar", "nzTitle", "nzDescription"], exportAs: ["nzListItemMeta"] }, { kind: "ngmodule", type: NzAvatarModule }, { kind: "component", type: i7$1.NzAvatarComponent, selector: "nz-avatar", inputs: ["nzShape", "nzSize", "nzGap", "nzText", "nzSrc", "nzSrcSet", "nzAlt", "nzIcon"], outputs: ["nzError"], exportAs: ["nzAvatar"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "directive", type: i3$2.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
13197
12399
  }
13198
12400
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: NotificationCenterComponent, decorators: [{
13199
12401
  type: Component,
@@ -13807,5 +13009,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
13807
13009
  * Generated bundle index. Do not edit.
13808
13010
  */
13809
13011
 
13810
- export { ABAC_RULES_TOKEN, ActionRule, ActionRuleLine, AnimatedDigitComponent, AppGlobals, AppStorage, App_Dic_Domain, App_Dic_DomainFilter, App_File, App_Menu$1 as App_Menu, App_Org, App_Role, App_Role_Menu_Ref, App_Setting, App_SettingFilter, App_User, AuthGuard, AuthService, AutoFocusDirective, BarGraphComponent, BaseComponent, BaseGuardChangeComponent, BaseOverlayComponent, Box, Breadcrumb, CacheListComponent, CheckModel, CommonService, ConfigComponent, CustomNotiComponent, CustomNotiService, DashcardComponent, DateInputParserDirective, DateTimeHelper, DicDomainListComponent, DicDomainPipe, DicDomainSelectComponent, DicDomainService, DocTemplate, DoughnutGraphComponent, DownloadHelper, DurationFormatPipe, ENUM_ResponseType, ExpandableSearchComponent, ExtendCheckbox, ExtendDatePicker, ExtendDateRangePicker, ExtendInput, ExtendInputNumber, ExtendPaginationComponent, ExtendSelectComponent, ExtendTableComponent, ExtendTextArea, FileFilter, FileListComponent, FileService, GlobalSpinnerComponent, GridFilter, H3Icon, HTTPService, HasPermissionDirective, HasPermissionPipe, HideIfErrorDirective, HighlightPipe, IconAdd, IconCheck, IconClose, IconDelete, IconEdit, IconSave, IconSearch, IconView, LayoutComponent, LimitLettersPipe, LimitWordsPipe, LineGraphComponent, LoadingService, LogAppComponent, LogServerComponent, LogServerDetailComponent, LoginComponent, MailSendSettingDetailComponent, MailTemplateDetailComponent, MailTemplateListComponent, MenuDetailComponent, MenuFilter, MenuListComponent, MenuService, MonitorComponent, NoPermission, Nodata, NotiService, NullIfEmptyDirective, NumberOnlyDirective, OrderOption, OrgDetailComponent, OrgFilter, OrgListComponent, OrgService, PagingData, PagingModel, PdfViewerComponent, PermissionComponent, PermissionService$1 as PermissionService, ReadMoreProComponent, RoleDetailComponent, RoleFilter, RoleListComponent, RoleService, RouteMonitorService, SequenceDetailComponent, SequenceListComponent, SessionManagerService, SettingListComponent, SettingService$1 as SettingService, TableHeader, ThemeService, TokenStorage, TranslateKey, URLs$d as URLs, UnsavedChangesGuard, UpperCaseFirsLetterEachWordDirective, UppercaseDirective, UppercaseFirstLetterDirective, UserDetailComponent, UserFilter, UserListComponent, UserProfileComponent, UserProfileService, UserService, VersionComponent, VscService, WF_TemplateActionRef, WF_TransitionRule, WF_TransitionRuleLine, Workflow, WorkflowAction, WorkflowActionEditorOption, WorkflowActionRef, WorkflowEditorComponent, WorkflowEditorOption, WorkflowStage, WorkflowStageEditorOption, XLSXHelper, authInterceptor };
13012
+ export { ABAC_RULES_TOKEN, ActionRule, ActionRuleLine, AnimatedDigitComponent, AppGlobals, AppStorage, App_Dic_Domain, App_Dic_DomainFilter, App_File, App_Menu$1 as App_Menu, App_Org, App_Role, App_Role_Menu_Ref, App_Setting, App_SettingFilter, App_User, AuthGuard, AuthService, AutoFocusDirective, BarGraphComponent, BaseComponent, BaseGuardChangeComponent, BaseOverlayComponent, Box, Breadcrumb, CacheListComponent, CheckModel, CommonService, ConfigComponent, CustomNotiComponent, CustomNotiService, DashcardComponent, DateInputParserDirective, DateTimeHelper, DicDomainListComponent, DicDomainPipe, DicDomainSelectComponent, DicDomainService, DocTemplate, DoughnutGraphComponent, DownloadHelper, DurationFormatPipe, ENUM_ResponseType, ExpandableSearchComponent, ExtendCheckbox, ExtendDatePicker, ExtendDateRangePicker, ExtendInput, ExtendInputNumber, ExtendPaginationComponent, ExtendSelectComponent, ExtendTableComponent, ExtendTextArea, FileFilter, FileListComponent, FileService, GlobalSpinnerComponent, GridFilter, H3Icon, HTTPService, HasPermissionDirective, HasPermissionPipe, HideIfErrorDirective, HighlightPipe, IconAdd, IconCheck, IconClose, IconDelete, IconEdit, IconSave, IconSearch, IconView, LayoutComponent, LimitLettersPipe, LimitWordsPipe, LineGraphComponent, LoadingService, LogAppComponent, LogServerComponent, LogServerDetailComponent, LoginComponent, MenuDetailComponent, MenuFilter, MenuListComponent, MenuService, MonitorComponent, NoPermission, Nodata, NotiService, NullIfEmptyDirective, NumberOnlyDirective, OrderOption, OrgDetailComponent, OrgFilter, OrgListComponent, OrgService, PagingData, PagingModel, PdfViewerComponent, PermissionComponent, PermissionService$1 as PermissionService, ReadMoreProComponent, RoleDetailComponent, RoleFilter, RoleListComponent, RoleService, RouteMonitorService, SequenceDetailComponent, SequenceListComponent, SessionManagerService, SettingListComponent, SettingService$1 as SettingService, TableHeader, ThemeService, TokenStorage, TranslateKey, URLs$c as URLs, UnsavedChangesGuard, UpperCaseFirsLetterEachWordDirective, UppercaseDirective, UppercaseFirstLetterDirective, UserDetailComponent, UserFilter, UserListComponent, UserProfileComponent, UserProfileService, UserService, VersionComponent, VscService, WF_TemplateActionRef, WF_TransitionRule, WF_TransitionRuleLine, Workflow, WorkflowAction, WorkflowActionEditorOption, WorkflowActionRef, WorkflowEditorComponent, WorkflowEditorOption, WorkflowStage, WorkflowStageEditorOption, XLSXHelper, authInterceptor };
13811
13013
  //# sourceMappingURL=brggroup-share-lib.mjs.map