@brggroup/share-lib 0.1.60 → 0.1.62
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.
- package/fesm2022/brggroup-share-lib.mjs +520 -85
- package/fesm2022/brggroup-share-lib.mjs.map +1 -1
- package/lib/admin/component/menu/list/menu-list.d.ts +2 -0
- package/lib/admin/component/menu/list/menu-list.d.ts.map +1 -1
- package/lib/auth/auth.service.d.ts.map +1 -1
- package/lib/components/base.component.d.ts +12 -3
- package/lib/components/base.component.d.ts.map +1 -1
- package/lib/components/breadcrumb/breadcrumb.d.ts +1 -0
- package/lib/components/breadcrumb/breadcrumb.d.ts.map +1 -1
- package/lib/components/dic-domain-select/dic-domain-select.d.ts +37 -0
- package/lib/components/dic-domain-select/dic-domain-select.d.ts.map +1 -0
- package/lib/components/dynamic-form/dynamic-form-test/dynamic-form-test.d.ts +16 -0
- package/lib/components/dynamic-form/dynamic-form-test/dynamic-form-test.d.ts.map +1 -0
- package/lib/components/dynamic-form/form-builder.d.ts +38 -0
- package/lib/components/dynamic-form/form-builder.d.ts.map +1 -0
- package/lib/components/index.d.ts +1 -0
- package/lib/components/index.d.ts.map +1 -1
- package/lib/components/layout/layout.component.d.ts +18 -4
- package/lib/components/layout/layout.component.d.ts.map +1 -1
- package/lib/components/wf-editor/workflow-editor.component.d.ts +5 -1
- package/lib/components/wf-editor/workflow-editor.component.d.ts.map +1 -1
- package/lib/services/noti.service.d.ts +12 -3
- package/lib/services/noti.service.d.ts.map +1 -1
- package/lib/services/router-monitor.service.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -6,7 +6,7 @@ import * as i1$8 from '@angular/common/http';
|
|
|
6
6
|
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
|
|
7
7
|
import * as i3 from '@ngx-translate/core';
|
|
8
8
|
import { TranslateService, TranslateModule, TranslatePipe } from '@ngx-translate/core';
|
|
9
|
-
import { firstValueFrom, fromEvent, startWith, map, BehaviorSubject, of, catchError, throwError, finalize, from, switchMap as switchMap$1, take, filter, Subject,
|
|
9
|
+
import { firstValueFrom, fromEvent, startWith, map, BehaviorSubject, of, catchError, throwError, finalize, from, switchMap as switchMap$1, take, filter, Subject, debounceTime, distinctUntilChanged as distinctUntilChanged$1 } from 'rxjs';
|
|
10
10
|
import * as i15 from 'ng-zorro-antd/modal';
|
|
11
11
|
import { NzModalService, NzModalModule, NzModalRef, NZ_MODAL_DATA, NzModalComponent, NzModalContentDirective, NzModalTitleDirective, NzModalFooterDirective } from 'ng-zorro-antd/modal';
|
|
12
12
|
import * as i1 from 'ng-zorro-antd/notification';
|
|
@@ -89,21 +89,25 @@ 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 { NzMenuModule } from 'ng-zorro-antd/menu';
|
|
92
93
|
import * as i12$1 from 'ng-zorro-antd/color-picker';
|
|
93
94
|
import { NzColorPickerModule } from 'ng-zorro-antd/color-picker';
|
|
94
95
|
import * as i2$3 from 'ng-zorro-antd/progress';
|
|
95
96
|
import { NzProgressModule } from 'ng-zorro-antd/progress';
|
|
97
|
+
import * as i3$6 from '@angular/cdk/drag-drop';
|
|
98
|
+
import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
|
|
99
|
+
import * as i10 from 'ng-zorro-antd/slider';
|
|
100
|
+
import { NzSliderModule } from 'ng-zorro-antd/slider';
|
|
96
101
|
import * as XLSX from 'xlsx';
|
|
97
102
|
import * as i2$4 from 'ng-zorro-antd/layout';
|
|
98
103
|
import { NzLayoutModule } from 'ng-zorro-antd/layout';
|
|
99
104
|
import { Title } from '@angular/platform-browser';
|
|
100
105
|
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
|
|
101
106
|
import { NzBackTopModule } from 'ng-zorro-antd/back-top';
|
|
102
|
-
import * as i14 from 'ng-zorro-antd/segmented';
|
|
103
107
|
import { NzSegmentedModule } from 'ng-zorro-antd/segmented';
|
|
104
108
|
import * as i4$4 from 'ng-zorro-antd/badge';
|
|
105
109
|
import { NzBadgeModule } from 'ng-zorro-antd/badge';
|
|
106
|
-
import * as i3$
|
|
110
|
+
import * as i3$7 from 'ng-zorro-antd/popover';
|
|
107
111
|
import { NzPopoverModule } from 'ng-zorro-antd/popover';
|
|
108
112
|
import { NzSkeletonModule } from 'ng-zorro-antd/skeleton';
|
|
109
113
|
import * as i6$4 from 'ng-zorro-antd/list';
|
|
@@ -383,12 +387,13 @@ class NotiService {
|
|
|
383
387
|
notification = inject(CustomNotiService);
|
|
384
388
|
translate = inject(TranslateService);
|
|
385
389
|
device = inject(DeviceService);
|
|
386
|
-
async success(title, content = '',
|
|
387
|
-
if (showPopup) {
|
|
390
|
+
async success(title, content = '', options) {
|
|
391
|
+
if (options?.showPopup) {
|
|
388
392
|
return new Promise((resolve) => {
|
|
389
393
|
const modalRef = this.modal.success({
|
|
390
394
|
nzTitle: title ?? this.translate.instant(TranslateKey.SUCCESS),
|
|
391
395
|
nzContent: content,
|
|
396
|
+
nzWidth: options?.popupWidth || '420px',
|
|
392
397
|
nzOnOk: () => resolve(),
|
|
393
398
|
});
|
|
394
399
|
});
|
|
@@ -397,12 +402,13 @@ class NotiService {
|
|
|
397
402
|
const notiRef = this.notification.success(title ?? this.translate.instant(TranslateKey.SUCCESS), content);
|
|
398
403
|
}
|
|
399
404
|
}
|
|
400
|
-
async warning(title, content = '',
|
|
401
|
-
if (showPopup) {
|
|
405
|
+
async warning(title, content = '', options) {
|
|
406
|
+
if (options?.showPopup) {
|
|
402
407
|
return new Promise((resolve) => {
|
|
403
408
|
const modalRef = this.modal.warning({
|
|
404
409
|
nzTitle: title,
|
|
405
410
|
nzContent: content,
|
|
411
|
+
nzWidth: options?.popupWidth || '420px',
|
|
406
412
|
nzOnOk: () => resolve(),
|
|
407
413
|
});
|
|
408
414
|
});
|
|
@@ -411,12 +417,13 @@ class NotiService {
|
|
|
411
417
|
const notiRef = this.notification.warning(title, content);
|
|
412
418
|
}
|
|
413
419
|
}
|
|
414
|
-
async error(title, content = '',
|
|
415
|
-
if (showPopup) {
|
|
420
|
+
async error(title, content = '', options) {
|
|
421
|
+
if (options?.showPopup) {
|
|
416
422
|
return new Promise((resolve) => {
|
|
417
423
|
const modalRef = this.modal.error({
|
|
418
424
|
nzTitle: title,
|
|
419
425
|
nzContent: content,
|
|
426
|
+
nzWidth: options?.popupWidth || '420px',
|
|
420
427
|
nzOnOk: () => resolve(),
|
|
421
428
|
});
|
|
422
429
|
});
|
|
@@ -730,11 +737,8 @@ class AuthService extends HTTPService {
|
|
|
730
737
|
}
|
|
731
738
|
async checkUserMenu(url) {
|
|
732
739
|
try {
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
// Params: [url],
|
|
736
|
-
// });
|
|
737
|
-
const ret = await this.post(AppGlobals.apiEndpoint + '/api/Auth/checkUserMenu');
|
|
740
|
+
let pr = new HttpParams().append('url', url);
|
|
741
|
+
const ret = await this.postParams(AppGlobals.apiEndpoint + '/api/Auth/checkUserMenu', pr);
|
|
738
742
|
return ret.IsSuccess && ret.Data == '1';
|
|
739
743
|
}
|
|
740
744
|
catch (error) {
|
|
@@ -1413,6 +1417,7 @@ class BaseComponent {
|
|
|
1413
1417
|
goto(url, isNewTab = false) {
|
|
1414
1418
|
if (!url)
|
|
1415
1419
|
return;
|
|
1420
|
+
console.log('goto: ', url, isNewTab);
|
|
1416
1421
|
if (isNewTab) {
|
|
1417
1422
|
window.open(url, '_blank');
|
|
1418
1423
|
}
|
|
@@ -1465,14 +1470,14 @@ class BaseComponent {
|
|
|
1465
1470
|
get urlPath() {
|
|
1466
1471
|
return this.router.url.split('?')[0];
|
|
1467
1472
|
}
|
|
1468
|
-
success(title, content = '',
|
|
1469
|
-
this.notiService.success(title, content,
|
|
1473
|
+
success(title, content = '', options) {
|
|
1474
|
+
this.notiService.success(title, content, options);
|
|
1470
1475
|
}
|
|
1471
|
-
warning(title, content = '',
|
|
1472
|
-
this.notiService.warning(title, content,
|
|
1476
|
+
warning(title, content = '', options) {
|
|
1477
|
+
this.notiService.warning(title, content, options);
|
|
1473
1478
|
}
|
|
1474
|
-
error(title, content = '',
|
|
1475
|
-
this.notiService.error(title, content,
|
|
1479
|
+
error(title, content = '', options) {
|
|
1480
|
+
this.notiService.error(title, content, options);
|
|
1476
1481
|
}
|
|
1477
1482
|
handleError(err) {
|
|
1478
1483
|
this.notiService.handleError(err);
|
|
@@ -3374,6 +3379,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
|
|
|
3374
3379
|
|
|
3375
3380
|
class Breadcrumb extends BaseComponent {
|
|
3376
3381
|
Breadcrumb = Breadcrumb;
|
|
3382
|
+
static position = 'header';
|
|
3377
3383
|
static _lstBreadcrumb = [];
|
|
3378
3384
|
static get lstBreadcrumb() {
|
|
3379
3385
|
return Breadcrumb._lstBreadcrumb;
|
|
@@ -3398,11 +3404,11 @@ class Breadcrumb extends BaseComponent {
|
|
|
3398
3404
|
}
|
|
3399
3405
|
}
|
|
3400
3406
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: Breadcrumb, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3401
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: Breadcrumb, isStandalone: true, selector: "app-breadcrumb", usesInheritance: true, ngImport: i0, template: "<nz-breadcrumb>\r\n
|
|
3407
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: Breadcrumb, isStandalone: true, selector: "app-breadcrumb", usesInheritance: true, ngImport: i0, template: "@if (Breadcrumb.lstBreadcrumb && Breadcrumb.lstBreadcrumb.length) {\r\n <nz-breadcrumb>\r\n <nz-breadcrumb-item (click)=\"gohome()\">\r\n <nz-icon nzType=\"home\" nzTheme=\"outline\" />\r\n </nz-breadcrumb-item>\r\n @for (item of Breadcrumb.lstBreadcrumb; track $index) {\r\n <nz-breadcrumb-item (click)=\"onclick(item)\">{{ item.Name }}</nz-breadcrumb-item>\r\n }\r\n </nz-breadcrumb>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: NzBreadCrumbModule }, { kind: "component", type: i1$3.NzBreadCrumbComponent, selector: "nz-breadcrumb", inputs: ["nzAutoGenerate", "nzSeparator", "nzRouteLabel", "nzRouteLabelFn", "nzRouteFn"], exportAs: ["nzBreadcrumb"] }, { kind: "component", type: i1$3.NzBreadCrumbItemComponent, selector: "nz-breadcrumb-item", inputs: ["nzOverlay"], exportAs: ["nzBreadcrumbItem"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }] });
|
|
3402
3408
|
}
|
|
3403
3409
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: Breadcrumb, decorators: [{
|
|
3404
3410
|
type: Component,
|
|
3405
|
-
args: [{ selector: 'app-breadcrumb', imports: [NzBreadCrumbModule, NzIconModule], template: "<nz-breadcrumb>\r\n
|
|
3411
|
+
args: [{ selector: 'app-breadcrumb', imports: [NzBreadCrumbModule, NzIconModule], template: "@if (Breadcrumb.lstBreadcrumb && Breadcrumb.lstBreadcrumb.length) {\r\n <nz-breadcrumb>\r\n <nz-breadcrumb-item (click)=\"gohome()\">\r\n <nz-icon nzType=\"home\" nzTheme=\"outline\" />\r\n </nz-breadcrumb-item>\r\n @for (item of Breadcrumb.lstBreadcrumb; track $index) {\r\n <nz-breadcrumb-item (click)=\"onclick(item)\">{{ item.Name }}</nz-breadcrumb-item>\r\n }\r\n </nz-breadcrumb>\r\n}\r\n" }]
|
|
3406
3412
|
}] });
|
|
3407
3413
|
|
|
3408
3414
|
class NoPermission {
|
|
@@ -4458,7 +4464,7 @@ class DicDomainListComponent extends BaseComponent {
|
|
|
4458
4464
|
this.getData();
|
|
4459
4465
|
}
|
|
4460
4466
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DicDomainListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
4461
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: DicDomainListComponent, isStandalone: true, selector: "app-dic-domain-list", usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n <div nz-col nzSpan=\"24\">\r\n <nz-table\r\n [nzData]=\"data?.LstItem || []\"\r\n [nzBordered]=\"true\"\r\n [nzSize]=\"'small'\"\r\n [nzFrontPagination]=\"false\"\r\n [nzScroll]=\"{ x: 'auto', y: 'calc(100vh - 174px)' }\"\r\n >\r\n <thead>\r\n <tr>\r\n <th nzWidth=\"50px\">#</th>\r\n <th>Domain Code</th>\r\n <th>Item Code</th>\r\n <th>Item Value</th>\r\n <th nzWidth=\"100px\">Order Value</th>\r\n <th nzWidth=\"150px\">Child Domain Code</th>\r\n <th nzWidth=\"150px\">Parent Item Code</th>\r\n <th nzWidth=\"75px\">Active</th>\r\n <th nzWidth=\"75px\" nzRight>Action</th>\r\n </tr>\r\n <tr (keyup.enter)=\"search()\" class=\"tr-search\">\r\n <th></th>\r\n <th>\r\n <extend-input\r\n [size]=\"'small'\"\r\n [showClear]=\"true\"\r\n [(_ngModel)]=\"filter.DomainCode\"\r\n (onclickClearIcon)=\"search()\"\r\n ></extend-input>\r\n </th>\r\n <th>\r\n <extend-input\r\n [size]=\"'small'\"\r\n [showClear]=\"true\"\r\n [(_ngModel)]=\"filter.ItemCode\"\r\n (onclickClearIcon)=\"search()\"\r\n ></extend-input>\r\n </th>\r\n <th>\r\n <extend-input\r\n [size]=\"'small'\"\r\n [showClear]=\"true\"\r\n [(_ngModel)]=\"filter.ItemValue\"\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></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 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.DomainCode }}</td>\r\n <td>{{ row.ItemCode }}</td>\r\n <td>{{ row.ItemValue }}</td>\r\n <td>{{ row.OrderValue }}</td>\r\n <td>{{ row.ChildDomainCode }}</td>\r\n <td>{{ row.ParentItemCode }}</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 class=\"center\" nzRight>\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 [(_ngModel)]=\"selectedRow.DomainCode\"></extend-input>\r\n </td>\r\n <td>\r\n <extend-input [(_ngModel)]=\"selectedRow.ItemCode\"></extend-input>\r\n </td>\r\n <td>\r\n <extend-textarea\r\n [minRows]=\"1\"\r\n [formItemNoButtom]=\"true\"\r\n [(_ngModel)]=\"selectedRow.ItemValue\"\r\n ></extend-textarea>\r\n </td>\r\n <td>\r\n <extend-input-number [(_ngModel)]=\"selectedRow.OrderValue\"></extend-input-number>\r\n </td>\r\n <td>\r\n <extend-input [(_ngModel)]=\"selectedRow.ChildDomainCode\"></extend-input>\r\n </td>\r\n <td>\r\n <extend-input [(_ngModel)]=\"selectedRow.ParentItemCode\"></extend-input>\r\n </td>\r\n <td class=\"center\">\r\n <extend-checkbox [(_ngModel)]=\"selectedRow.IsActive\"></extend-checkbox>\r\n </td>\r\n <td class=\"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", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: NzTagModule }, { 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: 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.NzCellFixedDirective, selector: "td[nzRight],th[nzRight],td[nzLeft],th[nzLeft]", inputs: ["nzRight", "nzLeft", "colspan", "colSpan"] }, { 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: "component", type: IconAdd, selector: "icon-add", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconCheck, selector: "icon-check", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconSave, selector: "icon-save", 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: "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: "component", type: ExtendCheckbox, selector: "extend-checkbox", inputs: ["label", "labelSpan", "labelFlex", "paddingTop", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "ngmodule", type: NzDropDownModule }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { 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"] }] });
|
|
4467
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: DicDomainListComponent, isStandalone: true, selector: "app-dic-domain-list", usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n <div nz-col nzSpan=\"24\">\r\n <nz-table [nzData]=\"data?.LstItem || []\" [nzBordered]=\"true\" [nzSize]=\"'small'\" [nzFrontPagination]=\"false\">\r\n <thead>\r\n <tr>\r\n <th nzWidth=\"50px\">#</th>\r\n <th>Domain Code</th>\r\n <th>Item Code</th>\r\n <th>Item Value</th>\r\n <th nzWidth=\"100px\">Order Value</th>\r\n <th nzWidth=\"150px\">Child Domain Code</th>\r\n <th nzWidth=\"150px\">Parent Item Code</th>\r\n <th nzWidth=\"75px\">Active</th>\r\n <th nzWidth=\"75px\" nzRight>Action</th>\r\n </tr>\r\n <tr (keyup.enter)=\"search()\" class=\"tr-search\">\r\n <th></th>\r\n <th>\r\n <extend-input\r\n [size]=\"'small'\"\r\n [showClear]=\"true\"\r\n [(_ngModel)]=\"filter.DomainCode\"\r\n (onclickClearIcon)=\"search()\"\r\n ></extend-input>\r\n </th>\r\n <th>\r\n <extend-input\r\n [size]=\"'small'\"\r\n [showClear]=\"true\"\r\n [(_ngModel)]=\"filter.ItemCode\"\r\n (onclickClearIcon)=\"search()\"\r\n ></extend-input>\r\n </th>\r\n <th>\r\n <extend-input\r\n [size]=\"'small'\"\r\n [showClear]=\"true\"\r\n [(_ngModel)]=\"filter.ItemValue\"\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></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 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.DomainCode }}</td>\r\n <td>{{ row.ItemCode }}</td>\r\n <td>{{ row.ItemValue }}</td>\r\n <td>{{ row.OrderValue }}</td>\r\n <td>{{ row.ChildDomainCode }}</td>\r\n <td>{{ row.ParentItemCode }}</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 class=\"center\" nzRight>\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 [(_ngModel)]=\"selectedRow.DomainCode\"></extend-input>\r\n </td>\r\n <td>\r\n <extend-input [(_ngModel)]=\"selectedRow.ItemCode\"></extend-input>\r\n </td>\r\n <td>\r\n <extend-textarea\r\n [minRows]=\"1\"\r\n [formItemNoButtom]=\"true\"\r\n [(_ngModel)]=\"selectedRow.ItemValue\"\r\n ></extend-textarea>\r\n </td>\r\n <td>\r\n <extend-input-number [(_ngModel)]=\"selectedRow.OrderValue\"></extend-input-number>\r\n </td>\r\n <td>\r\n <extend-input [(_ngModel)]=\"selectedRow.ChildDomainCode\"></extend-input>\r\n </td>\r\n <td>\r\n <extend-input [(_ngModel)]=\"selectedRow.ParentItemCode\"></extend-input>\r\n </td>\r\n <td class=\"center\">\r\n <extend-checkbox [(_ngModel)]=\"selectedRow.IsActive\"></extend-checkbox>\r\n </td>\r\n <td class=\"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", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: NzTagModule }, { 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: 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.NzCellFixedDirective, selector: "td[nzRight],th[nzRight],td[nzLeft],th[nzLeft]", inputs: ["nzRight", "nzLeft", "colspan", "colSpan"] }, { 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: "component", type: IconAdd, selector: "icon-add", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconCheck, selector: "icon-check", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconSave, selector: "icon-save", 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: "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: "component", type: ExtendCheckbox, selector: "extend-checkbox", inputs: ["label", "labelSpan", "labelFlex", "paddingTop", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "ngmodule", type: NzDropDownModule }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { 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"] }] });
|
|
4462
4468
|
}
|
|
4463
4469
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DicDomainListComponent, decorators: [{
|
|
4464
4470
|
type: Component,
|
|
@@ -4482,10 +4488,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
|
|
|
4482
4488
|
NzButtonModule,
|
|
4483
4489
|
Box,
|
|
4484
4490
|
ExtendTextArea,
|
|
4485
|
-
], template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n <div nz-col nzSpan=\"24\">\r\n <nz-table
|
|
4491
|
+
], template: "<div nz-row [nzGutter]=\"[0, 8]\">\r\n <div nz-col nzSpan=\"24\">\r\n <nz-table [nzData]=\"data?.LstItem || []\" [nzBordered]=\"true\" [nzSize]=\"'small'\" [nzFrontPagination]=\"false\">\r\n <thead>\r\n <tr>\r\n <th nzWidth=\"50px\">#</th>\r\n <th>Domain Code</th>\r\n <th>Item Code</th>\r\n <th>Item Value</th>\r\n <th nzWidth=\"100px\">Order Value</th>\r\n <th nzWidth=\"150px\">Child Domain Code</th>\r\n <th nzWidth=\"150px\">Parent Item Code</th>\r\n <th nzWidth=\"75px\">Active</th>\r\n <th nzWidth=\"75px\" nzRight>Action</th>\r\n </tr>\r\n <tr (keyup.enter)=\"search()\" class=\"tr-search\">\r\n <th></th>\r\n <th>\r\n <extend-input\r\n [size]=\"'small'\"\r\n [showClear]=\"true\"\r\n [(_ngModel)]=\"filter.DomainCode\"\r\n (onclickClearIcon)=\"search()\"\r\n ></extend-input>\r\n </th>\r\n <th>\r\n <extend-input\r\n [size]=\"'small'\"\r\n [showClear]=\"true\"\r\n [(_ngModel)]=\"filter.ItemCode\"\r\n (onclickClearIcon)=\"search()\"\r\n ></extend-input>\r\n </th>\r\n <th>\r\n <extend-input\r\n [size]=\"'small'\"\r\n [showClear]=\"true\"\r\n [(_ngModel)]=\"filter.ItemValue\"\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></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 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.DomainCode }}</td>\r\n <td>{{ row.ItemCode }}</td>\r\n <td>{{ row.ItemValue }}</td>\r\n <td>{{ row.OrderValue }}</td>\r\n <td>{{ row.ChildDomainCode }}</td>\r\n <td>{{ row.ParentItemCode }}</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 class=\"center\" nzRight>\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 [(_ngModel)]=\"selectedRow.DomainCode\"></extend-input>\r\n </td>\r\n <td>\r\n <extend-input [(_ngModel)]=\"selectedRow.ItemCode\"></extend-input>\r\n </td>\r\n <td>\r\n <extend-textarea\r\n [minRows]=\"1\"\r\n [formItemNoButtom]=\"true\"\r\n [(_ngModel)]=\"selectedRow.ItemValue\"\r\n ></extend-textarea>\r\n </td>\r\n <td>\r\n <extend-input-number [(_ngModel)]=\"selectedRow.OrderValue\"></extend-input-number>\r\n </td>\r\n <td>\r\n <extend-input [(_ngModel)]=\"selectedRow.ChildDomainCode\"></extend-input>\r\n </td>\r\n <td>\r\n <extend-input [(_ngModel)]=\"selectedRow.ParentItemCode\"></extend-input>\r\n </td>\r\n <td class=\"center\">\r\n <extend-checkbox [(_ngModel)]=\"selectedRow.IsActive\"></extend-checkbox>\r\n </td>\r\n <td class=\"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" }]
|
|
4486
4492
|
}] });
|
|
4487
4493
|
|
|
4488
|
-
class DicDomainSelectComponent {
|
|
4494
|
+
let DicDomainSelectComponent$1 = class DicDomainSelectComponent {
|
|
4489
4495
|
layOutType = 'horizontal';
|
|
4490
4496
|
label = '';
|
|
4491
4497
|
placeHolder = '';
|
|
@@ -4544,8 +4550,8 @@ class DicDomainSelectComponent {
|
|
|
4544
4550
|
}
|
|
4545
4551
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DicDomainSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4546
4552
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: DicDomainSelectComponent, isStandalone: true, selector: "dic-domain-select", inputs: { layOutType: "layOutType", label: "label", placeHolder: "placeHolder", labelSpan: "labelSpan", labelAlign: "labelAlign", disabled: "disabled", required: "required", multiple: "multiple", showSelectAll: "showSelectAll", maxTagCount: "maxTagCount", inputWidth: "inputWidth", inputHeight: "inputHeight", size: "size", borderBottomOnly: "borderBottomOnly", defaultFirstItem: "defaultFirstItem", DomainCode: "DomainCode", ParentItemCode: "ParentItemCode", _ngModel: "_ngModel", formData: "formData", controlName: "controlName" }, outputs: { _ngModelChange: "_ngModelChange" }, ngImport: i0, template: "<extend-select\r\n [placeHolder]=\"placeHolder\"\r\n [borderBottomOnly]=\"borderBottomOnly\"\r\n [size]=\"size\"\r\n [inputWidth]=\"inputWidth\"\r\n [inputHeight]=\"inputHeight\"\r\n [label]=\"label\"\r\n [labelSpan]=\"labelSpan\"\r\n [lstItem]=\"lstItem\"\r\n [displayField]=\"'ItemValue'\"\r\n [valueField]=\"'ItemCode'\"\r\n [multiple]=\"multiple\"\r\n [showSelectAll]=\"showSelectAll\"\r\n [required]=\"required\"\r\n [disabled]=\"disabled\"\r\n [formData]=\"formData\"\r\n [controlName]=\"controlName\"\r\n [(_ngModel)]=\"_ngModel\"\r\n (_ngModelChange)=\"onSelectChange($event)\"\r\n></extend-select>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: NzFormModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: NzSelectModule }, { 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"] }] });
|
|
4547
|
-
}
|
|
4548
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DicDomainSelectComponent, decorators: [{
|
|
4553
|
+
};
|
|
4554
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DicDomainSelectComponent$1, decorators: [{
|
|
4549
4555
|
type: Component,
|
|
4550
4556
|
args: [{ selector: 'dic-domain-select', imports: [
|
|
4551
4557
|
CommonModule,
|
|
@@ -5003,6 +5009,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
|
|
|
5003
5009
|
|
|
5004
5010
|
class MenuListComponent extends BaseComponent {
|
|
5005
5011
|
service = inject(MenuService);
|
|
5012
|
+
Breadcrumb = Breadcrumb;
|
|
5006
5013
|
data;
|
|
5007
5014
|
filter = new MenuFilter();
|
|
5008
5015
|
selectedMenu;
|
|
@@ -5093,7 +5100,7 @@ class MenuListComponent extends BaseComponent {
|
|
|
5093
5100
|
}
|
|
5094
5101
|
}
|
|
5095
5102
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: MenuListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
5096
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: MenuListComponent, isStandalone: true, selector: "app-menu-list", 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-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", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { 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: ReactiveFormsModule }, { kind: "ngmodule", type: NzTreeSelectModule }, { kind: "component", type: i3$4.NzTreeSelectComponent, selector: "nz-tree-select", inputs: ["nzId", "nzAllowClear", "nzShowExpand", "nzShowLine", "nzDropdownMatchSelectWidth", "nzCheckable", "nzHideUnMatched", "nzShowIcon", "nzShowSearch", "nzDisabled", "nzAsyncData", "nzMultiple", "nzDefaultExpandAll", "nzCheckStrictly", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualHeight", "nzExpandedIcon", "nzNotFoundContent", "nzNodes", "nzOpen", "nzSize", "nzPlaceHolder", "nzDropdownStyle", "nzDropdownClassName", "nzBackdrop", "nzStatus", "nzPlacement", "nzExpandedKeys", "nzDisplayWith", "nzMaxTagCount", "nzMaxTagPlaceholder", "nzTreeTemplate"], outputs: ["nzOpenChange", "nzCleared", "nzRemoved", "nzExpandChange", "nzTreeClick", "nzTreeCheckboxChange"], exportAs: ["nzTreeSelect"] }, { kind: "component", type: ButtonSearch, selector: "button-search" }, { kind: "component", type: ButtonAdd, selector: "button-add" }, { 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: 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.NzCellFixedDirective, selector: "td[nzRight],th[nzRight],td[nzLeft],th[nzLeft]", inputs: ["nzRight", "nzLeft", "colspan", "colSpan"] }, { 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: "component", type: IconAdd, selector: "icon-add", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconEdit, selector: "icon-edit", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconCheck, selector: "icon-check", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconSave, selector: "icon-save", 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: "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: "component", type: ExtendCheckbox, selector: "extend-checkbox", inputs: ["label", "labelSpan", "labelFlex", "paddingTop", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }] });
|
|
5103
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: MenuListComponent, isStandalone: true, selector: "app-menu-list", 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-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 >\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", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { 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: ReactiveFormsModule }, { kind: "ngmodule", type: NzTreeSelectModule }, { kind: "component", type: i3$4.NzTreeSelectComponent, selector: "nz-tree-select", inputs: ["nzId", "nzAllowClear", "nzShowExpand", "nzShowLine", "nzDropdownMatchSelectWidth", "nzCheckable", "nzHideUnMatched", "nzShowIcon", "nzShowSearch", "nzDisabled", "nzAsyncData", "nzMultiple", "nzDefaultExpandAll", "nzCheckStrictly", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualHeight", "nzExpandedIcon", "nzNotFoundContent", "nzNodes", "nzOpen", "nzSize", "nzPlaceHolder", "nzDropdownStyle", "nzDropdownClassName", "nzBackdrop", "nzStatus", "nzPlacement", "nzExpandedKeys", "nzDisplayWith", "nzMaxTagCount", "nzMaxTagPlaceholder", "nzTreeTemplate"], outputs: ["nzOpenChange", "nzCleared", "nzRemoved", "nzExpandChange", "nzTreeClick", "nzTreeCheckboxChange"], exportAs: ["nzTreeSelect"] }, { kind: "component", type: ButtonSearch, selector: "button-search" }, { kind: "component", type: ButtonAdd, selector: "button-add" }, { 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: 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.NzCellFixedDirective, selector: "td[nzRight],th[nzRight],td[nzLeft],th[nzLeft]", inputs: ["nzRight", "nzLeft", "colspan", "colSpan"] }, { 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: "component", type: IconAdd, selector: "icon-add", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconEdit, selector: "icon-edit", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconCheck, selector: "icon-check", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconSave, selector: "icon-save", 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: "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: "component", type: ExtendCheckbox, selector: "extend-checkbox", inputs: ["label", "labelSpan", "labelFlex", "paddingTop", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }] });
|
|
5097
5104
|
}
|
|
5098
5105
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: MenuListComponent, decorators: [{
|
|
5099
5106
|
type: Component,
|
|
@@ -5117,7 +5124,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
|
|
|
5117
5124
|
ExtendInputNumber,
|
|
5118
5125
|
ExtendCheckbox,
|
|
5119
5126
|
Box,
|
|
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
|
|
5127
|
+
], 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 >\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" }]
|
|
5121
5128
|
}] });
|
|
5122
5129
|
|
|
5123
5130
|
const URLs$9 = {
|
|
@@ -5552,7 +5559,7 @@ class OrgListComponent extends BaseComponent {
|
|
|
5552
5559
|
this.getData();
|
|
5553
5560
|
}
|
|
5554
5561
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: OrgListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
5555
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: OrgListComponent, isStandalone: true, selector: "app-org-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-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
|
|
5562
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: OrgListComponent, isStandalone: true, selector: "app-org-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-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 >\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", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { 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: ButtonAdd, selector: "button-add" }, { 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: "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: "component", type: IconEdit, selector: "icon-edit", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconCheck, selector: "icon-check", 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"] }] });
|
|
5556
5563
|
}
|
|
5557
5564
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: OrgListComponent, decorators: [{
|
|
5558
5565
|
type: Component,
|
|
@@ -5568,7 +5575,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
|
|
|
5568
5575
|
IconDelete,
|
|
5569
5576
|
IconCheck,
|
|
5570
5577
|
ExtendInput,
|
|
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
|
|
5578
|
+
], 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 >\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" }]
|
|
5572
5579
|
}] });
|
|
5573
5580
|
|
|
5574
5581
|
const URLs$7 = {
|
|
@@ -6024,7 +6031,7 @@ class RoleMenuPermission extends BaseComponent {
|
|
|
6024
6031
|
this.permissionService.updateRoleMenuRef(payload).then(() => this.success(), (err) => this.handleError(err));
|
|
6025
6032
|
}
|
|
6026
6033
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RoleMenuPermission, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
6027
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: RoleMenuPermission, isStandalone: true, selector: "app-role-menu-permission", 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-save (click)=\"saveRoleMenuMap()\"></button-save>\r\n <button-reload (click)=\"getData()\"></button-reload>\r\n </div>\r\n </div>\r\n <div nz-col nzSpan=\"24\">\r\n <nz-table [nzData]=\"lstMenu\" nzShowPagination=\"false\" [nzBordered]=\"true\" [nzSize]=\"'small'\">\r\n <thead>\r\n <tr>\r\n <th nzWidth=\"200px\">\r\n <extend-input\r\n [size]=\"'small'\"\r\n [placeHolder]=\"'Search Role ...'\"\r\n [(_ngModel)]=\"roleFilter.Name\"\r\n (keyup.enter)=\"getData()\"\r\n (onclickClearIcon)=\"getData()\"\r\n ></extend-input>\r\n <extend-input\r\n [size]=\"'small'\"\r\n [placeHolder]=\"'Search Menu ...'\"\r\n [(_ngModel)]=\"menuFilter.Name\"\r\n (keyup.enter)=\"getData()\"\r\n (onclickClearIcon)=\"getData()\"\r\n ></extend-input>\r\n </th>\r\n @for (role of lstRole; track role.App_Role_Id) {\r\n <th style=\"text-align: center\">{{ role.Name }}</th>\r\n }\r\n </tr>\r\n <tr>\r\n <th nzWidth=\"200px\"></th>\r\n @for (role of lstRole; track role.App_Role_Id) {\r\n <th style=\"text-align: center\">\r\n <label\r\n nz-checkbox\r\n [nzChecked]=\"roleColumnState[role.App_Role_Id!].checked\"\r\n [nzIndeterminate]=\"roleColumnState[role.App_Role_Id!].indeterminate\"\r\n (nzCheckedChange)=\"toggleRolePermissions(role.App_Role_Id!, $event)\"\r\n ></label>\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (menu of lstMenu; track menu.App_Menu_Id) {\r\n <tr>\r\n <td>{{ menu.TreeNodeName }}</td>\r\n @for (role of lstRole; track role.App_Role_Id) {\r\n <td class=\"text-center\">\r\n <label\r\n nz-checkbox\r\n [(ngModel)]=\"roleMenuMap[role.App_Role_Id!][menu.App_Menu_Id]\"\r\n (ngModelChange)=\"onSinglePermissionChange(role.App_Role_Id!)\"\r\n ></label>\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", dependencies: [{ kind: "ngmodule", type: NzSpinModule }, { 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: 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: 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: TranslateModule }, { kind: "ngmodule", type: NzButtonModule }, { 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: ButtonSave, selector: "button-save" }, { kind: "component", type: ButtonReload, selector: "button-reload" }, { 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"] }] });
|
|
6034
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: RoleMenuPermission, isStandalone: true, selector: "app-role-menu-permission", 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-save (click)=\"saveRoleMenuMap()\"></button-save>\r\n <button-reload (click)=\"getData()\"></button-reload>\r\n </div>\r\n </div>\r\n <div nz-col nzSpan=\"24\">\r\n <nz-table [nzData]=\"lstMenu\" nzShowPagination=\"false\" [nzBordered]=\"true\" [nzSize]=\"'small'\">\r\n <thead>\r\n <tr>\r\n <th nzWidth=\"200px\">\r\n <extend-input\r\n [size]=\"'small'\"\r\n [placeHolder]=\"'Search Role ...'\"\r\n [(_ngModel)]=\"roleFilter.Name\"\r\n [showClear]=\"true\"\r\n (keyup.enter)=\"getData()\"\r\n (onclickClearIcon)=\"getData()\"\r\n ></extend-input>\r\n <extend-input\r\n [size]=\"'small'\"\r\n [placeHolder]=\"'Search Menu ...'\"\r\n [showClear]=\"true\"\r\n [(_ngModel)]=\"menuFilter.Name\"\r\n (keyup.enter)=\"getData()\"\r\n (onclickClearIcon)=\"getData()\"\r\n ></extend-input>\r\n </th>\r\n @for (role of lstRole; track role.App_Role_Id) {\r\n <th style=\"text-align: center\">{{ role.Name }}</th>\r\n }\r\n </tr>\r\n <tr>\r\n <th nzWidth=\"200px\"></th>\r\n @for (role of lstRole; track role.App_Role_Id) {\r\n <th style=\"text-align: center\">\r\n <label\r\n nz-checkbox\r\n [nzChecked]=\"roleColumnState[role.App_Role_Id!].checked\"\r\n [nzIndeterminate]=\"roleColumnState[role.App_Role_Id!].indeterminate\"\r\n (nzCheckedChange)=\"toggleRolePermissions(role.App_Role_Id!, $event)\"\r\n ></label>\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (menu of lstMenu; track menu.App_Menu_Id) {\r\n <tr>\r\n <td>{{ menu.TreeNodeName }}</td>\r\n @for (role of lstRole; track role.App_Role_Id) {\r\n <td class=\"text-center\">\r\n <label\r\n nz-checkbox\r\n [(ngModel)]=\"roleMenuMap[role.App_Role_Id!][menu.App_Menu_Id]\"\r\n (ngModelChange)=\"onSinglePermissionChange(role.App_Role_Id!)\"\r\n ></label>\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", dependencies: [{ kind: "ngmodule", type: NzSpinModule }, { 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: 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: 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: TranslateModule }, { kind: "ngmodule", type: NzButtonModule }, { 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: ButtonSave, selector: "button-save" }, { kind: "component", type: ButtonReload, selector: "button-reload" }, { 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"] }] });
|
|
6028
6035
|
}
|
|
6029
6036
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RoleMenuPermission, decorators: [{
|
|
6030
6037
|
type: Component,
|
|
@@ -6040,7 +6047,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
|
|
|
6040
6047
|
ButtonSave,
|
|
6041
6048
|
ButtonReload,
|
|
6042
6049
|
ExtendInput,
|
|
6043
|
-
], 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-save (click)=\"saveRoleMenuMap()\"></button-save>\r\n <button-reload (click)=\"getData()\"></button-reload>\r\n </div>\r\n </div>\r\n <div nz-col nzSpan=\"24\">\r\n <nz-table [nzData]=\"lstMenu\" nzShowPagination=\"false\" [nzBordered]=\"true\" [nzSize]=\"'small'\">\r\n <thead>\r\n <tr>\r\n <th nzWidth=\"200px\">\r\n <extend-input\r\n [size]=\"'small'\"\r\n [placeHolder]=\"'Search Role ...'\"\r\n [(_ngModel)]=\"roleFilter.Name\"\r\n (keyup.enter)=\"getData()\"\r\n (onclickClearIcon)=\"getData()\"\r\n ></extend-input>\r\n <extend-input\r\n [size]=\"'small'\"\r\n [placeHolder]=\"'Search Menu ...'\"\r\n [(_ngModel)]=\"menuFilter.Name\"\r\n (keyup.enter)=\"getData()\"\r\n (onclickClearIcon)=\"getData()\"\r\n ></extend-input>\r\n </th>\r\n @for (role of lstRole; track role.App_Role_Id) {\r\n <th style=\"text-align: center\">{{ role.Name }}</th>\r\n }\r\n </tr>\r\n <tr>\r\n <th nzWidth=\"200px\"></th>\r\n @for (role of lstRole; track role.App_Role_Id) {\r\n <th style=\"text-align: center\">\r\n <label\r\n nz-checkbox\r\n [nzChecked]=\"roleColumnState[role.App_Role_Id!].checked\"\r\n [nzIndeterminate]=\"roleColumnState[role.App_Role_Id!].indeterminate\"\r\n (nzCheckedChange)=\"toggleRolePermissions(role.App_Role_Id!, $event)\"\r\n ></label>\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (menu of lstMenu; track menu.App_Menu_Id) {\r\n <tr>\r\n <td>{{ menu.TreeNodeName }}</td>\r\n @for (role of lstRole; track role.App_Role_Id) {\r\n <td class=\"text-center\">\r\n <label\r\n nz-checkbox\r\n [(ngModel)]=\"roleMenuMap[role.App_Role_Id!][menu.App_Menu_Id]\"\r\n (ngModelChange)=\"onSinglePermissionChange(role.App_Role_Id!)\"\r\n ></label>\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" }]
|
|
6050
|
+
], 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-save (click)=\"saveRoleMenuMap()\"></button-save>\r\n <button-reload (click)=\"getData()\"></button-reload>\r\n </div>\r\n </div>\r\n <div nz-col nzSpan=\"24\">\r\n <nz-table [nzData]=\"lstMenu\" nzShowPagination=\"false\" [nzBordered]=\"true\" [nzSize]=\"'small'\">\r\n <thead>\r\n <tr>\r\n <th nzWidth=\"200px\">\r\n <extend-input\r\n [size]=\"'small'\"\r\n [placeHolder]=\"'Search Role ...'\"\r\n [(_ngModel)]=\"roleFilter.Name\"\r\n [showClear]=\"true\"\r\n (keyup.enter)=\"getData()\"\r\n (onclickClearIcon)=\"getData()\"\r\n ></extend-input>\r\n <extend-input\r\n [size]=\"'small'\"\r\n [placeHolder]=\"'Search Menu ...'\"\r\n [showClear]=\"true\"\r\n [(_ngModel)]=\"menuFilter.Name\"\r\n (keyup.enter)=\"getData()\"\r\n (onclickClearIcon)=\"getData()\"\r\n ></extend-input>\r\n </th>\r\n @for (role of lstRole; track role.App_Role_Id) {\r\n <th style=\"text-align: center\">{{ role.Name }}</th>\r\n }\r\n </tr>\r\n <tr>\r\n <th nzWidth=\"200px\"></th>\r\n @for (role of lstRole; track role.App_Role_Id) {\r\n <th style=\"text-align: center\">\r\n <label\r\n nz-checkbox\r\n [nzChecked]=\"roleColumnState[role.App_Role_Id!].checked\"\r\n [nzIndeterminate]=\"roleColumnState[role.App_Role_Id!].indeterminate\"\r\n (nzCheckedChange)=\"toggleRolePermissions(role.App_Role_Id!, $event)\"\r\n ></label>\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (menu of lstMenu; track menu.App_Menu_Id) {\r\n <tr>\r\n <td>{{ menu.TreeNodeName }}</td>\r\n @for (role of lstRole; track role.App_Role_Id) {\r\n <td class=\"text-center\">\r\n <label\r\n nz-checkbox\r\n [(ngModel)]=\"roleMenuMap[role.App_Role_Id!][menu.App_Menu_Id]\"\r\n (ngModelChange)=\"onSinglePermissionChange(role.App_Role_Id!)\"\r\n ></label>\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" }]
|
|
6044
6051
|
}] });
|
|
6045
6052
|
|
|
6046
6053
|
class App_User {
|
|
@@ -6113,22 +6120,21 @@ class UserRolePermission extends BaseComponent {
|
|
|
6113
6120
|
.catch((err) => this.handleError(err));
|
|
6114
6121
|
}
|
|
6115
6122
|
initializeRoleMenuMap() {
|
|
6116
|
-
this.userRoleMap = {};
|
|
6117
|
-
// 1. Chuyển Array sang Set với khóa tổ hợp "UserId_RoleId" để tra cứu O(1)
|
|
6118
6123
|
const userRoleSet = new Set(this.lstUserRoleRef.map((x) => `${x.App_User_Id}_${x.App_Role_Id}`));
|
|
6119
6124
|
this.lstUser.forEach((user) => {
|
|
6120
6125
|
const userId = user.App_User_Id;
|
|
6121
|
-
this.userRoleMap[userId]
|
|
6126
|
+
if (!this.userRoleMap[userId]) {
|
|
6127
|
+
this.userRoleMap[userId] = {};
|
|
6128
|
+
}
|
|
6122
6129
|
this.lstRole.forEach((role) => {
|
|
6123
6130
|
const roleId = role.App_Role_Id;
|
|
6124
|
-
|
|
6125
|
-
|
|
6131
|
+
if (this.userRoleMap[userId][roleId] === undefined) {
|
|
6132
|
+
this.userRoleMap[userId][roleId] = userRoleSet.has(`${userId}_${roleId}`);
|
|
6133
|
+
}
|
|
6126
6134
|
});
|
|
6127
|
-
// 3. Khởi tạo luôn trạng thái Checkbox tổng cho dòng này
|
|
6128
6135
|
this.updateUserRowState(userId);
|
|
6129
6136
|
});
|
|
6130
6137
|
}
|
|
6131
|
-
// Hàm tính toán trạng thái Checked/Indeterminate và lưu vào Object
|
|
6132
6138
|
updateUserRowState(userId) {
|
|
6133
6139
|
if (!this.lstRole.length) {
|
|
6134
6140
|
this.userRowState[userId] = { checked: false, indeterminate: false };
|
|
@@ -6183,7 +6189,7 @@ class UserRolePermission extends BaseComponent {
|
|
|
6183
6189
|
this.permissionService.updateUserRoleRef(payload).then(() => this.success(), (err) => this.handleError(err));
|
|
6184
6190
|
}
|
|
6185
6191
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: UserRolePermission, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
6186
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: UserRolePermission, isStandalone: true, selector: "app-user-role-permission", 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-save (click)=\"saveUserRoleMap()\"></button-save>\r\n <button-reload (click)=\"getData()\"></button-reload>\r\n </div>\r\n </div>\r\n <div nz-col nzSpan=\"24\">\r\n <nz-table\r\n [nzData]=\"lstUser\"\r\n nzShowPagination=\"false\"\r\n [nzBordered]=\"true\"\r\n [nzSize]=\"'small'\"\r\n [nzScroll]=\"{ x: 'auto' }\"\r\n >\r\n <thead>\r\n <tr>\r\n <th nzWidth=\"200px\">\r\n <extend-input\r\n [size]=\"'small'\"\r\n [placeHolder]=\"'Search Role ...'\"\r\n [(_ngModel)]=\"roleFilter.Name\"\r\n (keyup.enter)=\"getData()\"\r\n (onclickClearIcon)=\"getData()\"\r\n ></extend-input>\r\n <extend-input\r\n [size]=\"'small'\"\r\n [placeHolder]=\"'Search User ...'\"\r\n [(_ngModel)]=\"userFilter.FullName\"\r\n (keyup.enter)=\"getData()\"\r\n (onclickClearIcon)=\"getData()\"\r\n ></extend-input>\r\n </th>\r\n <th nzWidth=\"40px\"></th>\r\n @for (role of lstRole; track role.App_Role_Id) {\r\n <th style=\"text-align: center\">{{ role.Name }}</th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (user of lstUser; track user.App_User_Id) {\r\n <tr>\r\n <td>{{ user.FullName }}</td>\r\n <td>\r\n <label\r\n nz-checkbox\r\n [nzChecked]=\"userRowState[user.App_User_Id!].checked\"\r\n [nzIndeterminate]=\"userRowState[user.App_User_Id!].indeterminate\"\r\n (nzCheckedChange)=\"toggleUserPermissions(user.App_User_Id!, $event)\"\r\n ></label>\r\n </td>\r\n @for (role of lstRole; track role.App_Role_Id) {\r\n <td class=\"text-center\">\r\n <label\r\n nz-checkbox\r\n [(ngModel)]=\"userRoleMap[user.App_User_Id!][role.App_Role_Id!]\"\r\n (ngModelChange)=\"onSinglePermissionChange(user.App_User_Id!)\"\r\n ></label>\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", dependencies: [{ kind: "ngmodule", type: NzSpinModule }, { 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: 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: 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: TranslateModule }, { kind: "ngmodule", type: NzButtonModule }, { 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: ButtonSave, selector: "button-save" }, { kind: "component", type: ButtonReload, selector: "button-reload" }, { 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"] }] });
|
|
6192
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: UserRolePermission, isStandalone: true, selector: "app-user-role-permission", 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-save (click)=\"saveUserRoleMap()\"></button-save>\r\n <button-reload (click)=\"getData()\"></button-reload>\r\n </div>\r\n </div>\r\n <div nz-col nzSpan=\"24\">\r\n <nz-table\r\n [nzData]=\"lstUser\"\r\n nzShowPagination=\"false\"\r\n [nzBordered]=\"true\"\r\n [nzSize]=\"'small'\"\r\n [nzScroll]=\"{ x: 'auto' }\"\r\n >\r\n <thead>\r\n <tr>\r\n <th nzWidth=\"200px\">\r\n <extend-input\r\n [size]=\"'small'\"\r\n [placeHolder]=\"'Search Role ...'\"\r\n [(_ngModel)]=\"roleFilter.Name\"\r\n [showClear]=\"true\"\r\n (keyup.enter)=\"getData()\"\r\n (onclickClearIcon)=\"getData()\"\r\n ></extend-input>\r\n <extend-input\r\n [size]=\"'small'\"\r\n [placeHolder]=\"'Search User ...'\"\r\n [showClear]=\"true\"\r\n [(_ngModel)]=\"userFilter.FullName\"\r\n (keyup.enter)=\"getData()\"\r\n (onclickClearIcon)=\"getData()\"\r\n ></extend-input>\r\n </th>\r\n <th nzWidth=\"40px\"></th>\r\n @for (role of lstRole; track role.App_Role_Id) {\r\n <th style=\"text-align: center\">{{ role.Name }}</th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (user of lstUser; track user.App_User_Id) {\r\n <tr>\r\n <td>{{ user.FullName }}</td>\r\n <td>\r\n <label\r\n nz-checkbox\r\n [nzChecked]=\"userRowState[user.App_User_Id!].checked\"\r\n [nzIndeterminate]=\"userRowState[user.App_User_Id!].indeterminate\"\r\n (nzCheckedChange)=\"toggleUserPermissions(user.App_User_Id!, $event)\"\r\n ></label>\r\n </td>\r\n @for (role of lstRole; track role.App_Role_Id) {\r\n <td class=\"text-center\">\r\n <label\r\n nz-checkbox\r\n [(ngModel)]=\"userRoleMap[user.App_User_Id!][role.App_Role_Id!]\"\r\n (ngModelChange)=\"onSinglePermissionChange(user.App_User_Id!)\"\r\n ></label>\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", dependencies: [{ kind: "ngmodule", type: NzSpinModule }, { 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: 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: 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: TranslateModule }, { kind: "ngmodule", type: NzButtonModule }, { 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: ButtonSave, selector: "button-save" }, { kind: "component", type: ButtonReload, selector: "button-reload" }, { 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"] }] });
|
|
6187
6193
|
}
|
|
6188
6194
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: UserRolePermission, decorators: [{
|
|
6189
6195
|
type: Component,
|
|
@@ -6199,7 +6205,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
|
|
|
6199
6205
|
ButtonSave,
|
|
6200
6206
|
ButtonReload,
|
|
6201
6207
|
ExtendInput,
|
|
6202
|
-
], 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-save (click)=\"saveUserRoleMap()\"></button-save>\r\n <button-reload (click)=\"getData()\"></button-reload>\r\n </div>\r\n </div>\r\n <div nz-col nzSpan=\"24\">\r\n <nz-table\r\n [nzData]=\"lstUser\"\r\n nzShowPagination=\"false\"\r\n [nzBordered]=\"true\"\r\n [nzSize]=\"'small'\"\r\n [nzScroll]=\"{ x: 'auto' }\"\r\n >\r\n <thead>\r\n <tr>\r\n <th nzWidth=\"200px\">\r\n <extend-input\r\n [size]=\"'small'\"\r\n [placeHolder]=\"'Search Role ...'\"\r\n [(_ngModel)]=\"roleFilter.Name\"\r\n (keyup.enter)=\"getData()\"\r\n (onclickClearIcon)=\"getData()\"\r\n ></extend-input>\r\n <extend-input\r\n [size]=\"'small'\"\r\n [placeHolder]=\"'Search User ...'\"\r\n [(_ngModel)]=\"userFilter.FullName\"\r\n (keyup.enter)=\"getData()\"\r\n (onclickClearIcon)=\"getData()\"\r\n ></extend-input>\r\n </th>\r\n <th nzWidth=\"40px\"></th>\r\n @for (role of lstRole; track role.App_Role_Id) {\r\n <th style=\"text-align: center\">{{ role.Name }}</th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (user of lstUser; track user.App_User_Id) {\r\n <tr>\r\n <td>{{ user.FullName }}</td>\r\n <td>\r\n <label\r\n nz-checkbox\r\n [nzChecked]=\"userRowState[user.App_User_Id!].checked\"\r\n [nzIndeterminate]=\"userRowState[user.App_User_Id!].indeterminate\"\r\n (nzCheckedChange)=\"toggleUserPermissions(user.App_User_Id!, $event)\"\r\n ></label>\r\n </td>\r\n @for (role of lstRole; track role.App_Role_Id) {\r\n <td class=\"text-center\">\r\n <label\r\n nz-checkbox\r\n [(ngModel)]=\"userRoleMap[user.App_User_Id!][role.App_Role_Id!]\"\r\n (ngModelChange)=\"onSinglePermissionChange(user.App_User_Id!)\"\r\n ></label>\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" }]
|
|
6208
|
+
], 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-save (click)=\"saveUserRoleMap()\"></button-save>\r\n <button-reload (click)=\"getData()\"></button-reload>\r\n </div>\r\n </div>\r\n <div nz-col nzSpan=\"24\">\r\n <nz-table\r\n [nzData]=\"lstUser\"\r\n nzShowPagination=\"false\"\r\n [nzBordered]=\"true\"\r\n [nzSize]=\"'small'\"\r\n [nzScroll]=\"{ x: 'auto' }\"\r\n >\r\n <thead>\r\n <tr>\r\n <th nzWidth=\"200px\">\r\n <extend-input\r\n [size]=\"'small'\"\r\n [placeHolder]=\"'Search Role ...'\"\r\n [(_ngModel)]=\"roleFilter.Name\"\r\n [showClear]=\"true\"\r\n (keyup.enter)=\"getData()\"\r\n (onclickClearIcon)=\"getData()\"\r\n ></extend-input>\r\n <extend-input\r\n [size]=\"'small'\"\r\n [placeHolder]=\"'Search User ...'\"\r\n [showClear]=\"true\"\r\n [(_ngModel)]=\"userFilter.FullName\"\r\n (keyup.enter)=\"getData()\"\r\n (onclickClearIcon)=\"getData()\"\r\n ></extend-input>\r\n </th>\r\n <th nzWidth=\"40px\"></th>\r\n @for (role of lstRole; track role.App_Role_Id) {\r\n <th style=\"text-align: center\">{{ role.Name }}</th>\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (user of lstUser; track user.App_User_Id) {\r\n <tr>\r\n <td>{{ user.FullName }}</td>\r\n <td>\r\n <label\r\n nz-checkbox\r\n [nzChecked]=\"userRowState[user.App_User_Id!].checked\"\r\n [nzIndeterminate]=\"userRowState[user.App_User_Id!].indeterminate\"\r\n (nzCheckedChange)=\"toggleUserPermissions(user.App_User_Id!, $event)\"\r\n ></label>\r\n </td>\r\n @for (role of lstRole; track role.App_Role_Id) {\r\n <td class=\"text-center\">\r\n <label\r\n nz-checkbox\r\n [(ngModel)]=\"userRoleMap[user.App_User_Id!][role.App_Role_Id!]\"\r\n (ngModelChange)=\"onSinglePermissionChange(user.App_User_Id!)\"\r\n ></label>\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" }]
|
|
6203
6209
|
}] });
|
|
6204
6210
|
|
|
6205
6211
|
class RolePermissionComponent extends BaseComponent {
|
|
@@ -6675,7 +6681,7 @@ class RoleListComponent extends BaseComponent {
|
|
|
6675
6681
|
this.getData();
|
|
6676
6682
|
}
|
|
6677
6683
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RoleListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
6678
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: RoleListComponent, isStandalone: true, selector: "app-role-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-add (click)=\"edit(null)\"></button-add>\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
|
|
6684
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: RoleListComponent, isStandalone: true, selector: "app-role-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-add (click)=\"edit(null)\"></button-add>\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 >\r\n <thead>\r\n <tr>\r\n <th nzWidth=\"50px\">#</th>\r\n <th>Code</th>\r\n <th>Name</th>\r\n <th>Description</th>\r\n <th>Active</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></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.Description }}</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 <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", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { 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: ButtonAdd, selector: "button-add" }, { 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: "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: "component", type: IconCheck, selector: "icon-check", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconEdit, selector: "icon-edit", inputs: ["size"], outputs: ["click"] }, { 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"] }] });
|
|
6679
6685
|
}
|
|
6680
6686
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RoleListComponent, decorators: [{
|
|
6681
6687
|
type: Component,
|
|
@@ -6691,7 +6697,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
|
|
|
6691
6697
|
IconEdit,
|
|
6692
6698
|
IconDelete,
|
|
6693
6699
|
ExtendInput,
|
|
6694
|
-
], 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)=\"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
|
|
6700
|
+
], 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)=\"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 >\r\n <thead>\r\n <tr>\r\n <th nzWidth=\"50px\">#</th>\r\n <th>Code</th>\r\n <th>Name</th>\r\n <th>Description</th>\r\n <th>Active</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></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.Description }}</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 <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" }]
|
|
6695
6701
|
}] });
|
|
6696
6702
|
|
|
6697
6703
|
class RoleDetailComponent extends BaseComponent {
|
|
@@ -7118,7 +7124,7 @@ class SettingListComponent extends BaseComponent {
|
|
|
7118
7124
|
this.getData();
|
|
7119
7125
|
}
|
|
7120
7126
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: SettingListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
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"] }] });
|
|
7127
|
+
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 >\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"] }] });
|
|
7122
7128
|
}
|
|
7123
7129
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: SettingListComponent, decorators: [{
|
|
7124
7130
|
type: Component,
|
|
@@ -7136,7 +7142,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
|
|
|
7136
7142
|
NzPaginationModule,
|
|
7137
7143
|
NzGridModule,
|
|
7138
7144
|
NzFlexModule,
|
|
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
|
|
7145
|
+
], 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 >\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" }]
|
|
7140
7146
|
}] });
|
|
7141
7147
|
|
|
7142
7148
|
const URLs$5 = {
|
|
@@ -7490,7 +7496,7 @@ class UserListComponent extends BaseComponent {
|
|
|
7490
7496
|
}
|
|
7491
7497
|
}
|
|
7492
7498
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: UserListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
7493
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: UserListComponent, isStandalone: true, selector: "app-user-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-add (click)=\"edit(null)\"></button-add>\r\n <button-search (click)=\"search()\"></button-search>\r\n <button nz-button nz-dropdown [nzDropdownMenu]=\"menuAction\" nzTrigger=\"click\">\r\n <nz-icon nzType=\"more\" nzTheme=\"outline\" />\r\n <!-- {{ TranslateKey.ACTION | translate }} -->\r\n </button>\r\n <nz-dropdown-menu #menuAction=\"nzDropdownMenu\">\r\n <ul nz-menu>\r\n <li nz-menu-item (click)=\"import()\">Import</li>\r\n </ul>\r\n </nz-dropdown-menu>\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 <thead>\r\n <tr>\r\n <th nzWidth=\"50px\">#</th>\r\n <th>T\u00EAn \u0111\u0103ng nh\u1EADp</th>\r\n <th>T\u00EAn ng\u01B0\u1EDDi d\u00F9ng</th>\r\n <th>\u0110\u01A1n v\u1ECB</th>\r\n <th nzWidth=\"75px\">Hi\u1EC7u l\u1EF1c</th>\r\n <th nzWidth=\"100px\">\u0110ang online</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><extend-input [size]=\"'small'\" [(_ngModel)]=\"filter.UserName\"></extend-input></th>\r\n <th><extend-input [size]=\"'small'\" [(_ngModel)]=\"filter.FullName\"></extend-input></th>\r\n <th><extend-input [size]=\"'small'\" [(_ngModel)]=\"filter.OrgName\"></extend-input></th>\r\n <th></th>\r\n <th class=\"center\"><extend-checkbox [(_ngModel)]=\"showOnlineOnly\"></extend-checkbox></th>\r\n <th></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (row of getLstUser(); track $index; let i = $index) {\r\n <tr>\r\n <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n <td>{{ row.UserName }}</td>\r\n <td>{{ row.FullName }}</td>\r\n <td>\r\n {{ row.OrgName }}\r\n <div *ngIf=\"row.LstOrgName\" [innerHtml]=\"row.LstOrgName\"></div>\r\n </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 class=\"text-center\">\r\n @if (SignalRService.connection?.state == HubConnectionState.Connected && row.LoginStatus) {\r\n <icon-check></icon-check>\r\n }\r\n </td>\r\n <td class=\"center\">\r\n <icon-edit (click)=\"edit(row)\"></icon-edit>\r\n <box [width]=\"4\"></box><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 <div nz-col [nzSpan]=\"24\">\r\n <div nz-flex nzJustify=\"end\" 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\r\n<nz-dropdown-menu #menu=\"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.UserName\"\r\n [appAutoFocus]=\"filter.isUserNameSearch\"\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.UserName = ''; search()\">{{ \"RESET\" | translate }}</button>\r\n </div>\r\n </div>\r\n</nz-dropdown-menu>\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: "component", type: ButtonAdd, selector: "button-add" }, { kind: "component", type: ButtonSearch, selector: "button-search" }, { kind: "component", type: IconCheck, selector: "icon-check", inputs: ["size"], outputs: ["click"] }, { 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: "ngmodule", type: NzPopconfirmModule }, { kind: "ngmodule", type: NzDropDownModule }, { kind: "directive", type: i4$2.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i4$2.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "directive", type: i5$4.NzDropDownDirective, selector: "[nz-dropdown]", inputs: ["nzDropdownMenu", "nzTrigger", "nzMatchWidthElement", "nzBackdrop", "nzClickHide", "nzDisabled", "nzVisible", "nzOverlayClassName", "nzOverlayStyle", "nzPlacement"], outputs: ["nzVisibleChange"], exportAs: ["nzDropdown"] }, { kind: "component", type: i5$4.NzDropdownMenuComponent, selector: "nz-dropdown-menu", exportAs: ["nzDropdownMenu"] }, { kind: "directive", type: i5$4.NzDropdownButtonDirective, selector: "[nz-button][nz-dropdown]" }, { 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: "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: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconEdit, selector: "icon-edit", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { 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: 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: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { 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"] }] });
|
|
7499
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: UserListComponent, isStandalone: true, selector: "app-user-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-add (click)=\"edit(null)\"></button-add>\r\n <button-search (click)=\"search()\"></button-search>\r\n <button nz-button nz-dropdown [nzDropdownMenu]=\"menuAction\" nzTrigger=\"click\">\r\n <nz-icon nzType=\"more\" nzTheme=\"outline\" />\r\n <!-- {{ TranslateKey.ACTION | translate }} -->\r\n </button>\r\n <nz-dropdown-menu #menuAction=\"nzDropdownMenu\">\r\n <ul nz-menu>\r\n <li nz-menu-item (click)=\"import()\">Import</li>\r\n </ul>\r\n </nz-dropdown-menu>\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 >\r\n <thead>\r\n <tr>\r\n <th nzWidth=\"50px\">#</th>\r\n <th>T\u00EAn \u0111\u0103ng nh\u1EADp</th>\r\n <th>T\u00EAn ng\u01B0\u1EDDi d\u00F9ng</th>\r\n <th>\u0110\u01A1n v\u1ECB</th>\r\n <th nzWidth=\"75px\">Hi\u1EC7u l\u1EF1c</th>\r\n <th nzWidth=\"100px\">\u0110ang online</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><extend-input [size]=\"'small'\" [(_ngModel)]=\"filter.UserName\"></extend-input></th>\r\n <th><extend-input [size]=\"'small'\" [(_ngModel)]=\"filter.FullName\"></extend-input></th>\r\n <th><extend-input [size]=\"'small'\" [(_ngModel)]=\"filter.OrgName\"></extend-input></th>\r\n <th></th>\r\n <th class=\"center\"><extend-checkbox [(_ngModel)]=\"showOnlineOnly\"></extend-checkbox></th>\r\n <th></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (row of getLstUser(); track $index; let i = $index) {\r\n <tr>\r\n <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n <td>{{ row.UserName }}</td>\r\n <td>{{ row.FullName }}</td>\r\n <td>\r\n {{ row.OrgName }}\r\n <div *ngIf=\"row.LstOrgName\" [innerHtml]=\"row.LstOrgName\"></div>\r\n </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 class=\"text-center\">\r\n @if (SignalRService.connection?.state == HubConnectionState.Connected && row.LoginStatus) {\r\n <icon-check></icon-check>\r\n }\r\n </td>\r\n <td class=\"center\">\r\n <icon-edit (click)=\"edit(row)\"></icon-edit>\r\n <box [width]=\"4\"></box><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 <div nz-col [nzSpan]=\"24\">\r\n <div nz-flex nzJustify=\"end\" 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\r\n<nz-dropdown-menu #menu=\"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.UserName\"\r\n [appAutoFocus]=\"filter.isUserNameSearch\"\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.UserName = ''; search()\">{{ \"RESET\" | translate }}</button>\r\n </div>\r\n </div>\r\n</nz-dropdown-menu>\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: "component", type: ButtonAdd, selector: "button-add" }, { kind: "component", type: ButtonSearch, selector: "button-search" }, { kind: "component", type: IconCheck, selector: "icon-check", inputs: ["size"], outputs: ["click"] }, { 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: "ngmodule", type: NzPopconfirmModule }, { kind: "ngmodule", type: NzDropDownModule }, { kind: "directive", type: i4$2.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i4$2.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "directive", type: i5$4.NzDropDownDirective, selector: "[nz-dropdown]", inputs: ["nzDropdownMenu", "nzTrigger", "nzMatchWidthElement", "nzBackdrop", "nzClickHide", "nzDisabled", "nzVisible", "nzOverlayClassName", "nzOverlayStyle", "nzPlacement"], outputs: ["nzVisibleChange"], exportAs: ["nzDropdown"] }, { kind: "component", type: i5$4.NzDropdownMenuComponent, selector: "nz-dropdown-menu", exportAs: ["nzDropdownMenu"] }, { kind: "directive", type: i5$4.NzDropdownButtonDirective, selector: "[nz-button][nz-dropdown]" }, { 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: "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: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconEdit, selector: "icon-edit", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { 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: 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: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { 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"] }] });
|
|
7494
7500
|
}
|
|
7495
7501
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: UserListComponent, decorators: [{
|
|
7496
7502
|
type: Component,
|
|
@@ -7516,7 +7522,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
|
|
|
7516
7522
|
NzGridModule,
|
|
7517
7523
|
NzFlexModule,
|
|
7518
7524
|
NzButtonModule,
|
|
7519
|
-
], 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 <button nz-button nz-dropdown [nzDropdownMenu]=\"menuAction\" nzTrigger=\"click\">\r\n <nz-icon nzType=\"more\" nzTheme=\"outline\" />\r\n <!-- {{ TranslateKey.ACTION | translate }} -->\r\n </button>\r\n <nz-dropdown-menu #menuAction=\"nzDropdownMenu\">\r\n <ul nz-menu>\r\n <li nz-menu-item (click)=\"import()\">Import</li>\r\n </ul>\r\n </nz-dropdown-menu>\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
|
|
7525
|
+
], 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 <button nz-button nz-dropdown [nzDropdownMenu]=\"menuAction\" nzTrigger=\"click\">\r\n <nz-icon nzType=\"more\" nzTheme=\"outline\" />\r\n <!-- {{ TranslateKey.ACTION | translate }} -->\r\n </button>\r\n <nz-dropdown-menu #menuAction=\"nzDropdownMenu\">\r\n <ul nz-menu>\r\n <li nz-menu-item (click)=\"import()\">Import</li>\r\n </ul>\r\n </nz-dropdown-menu>\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 >\r\n <thead>\r\n <tr>\r\n <th nzWidth=\"50px\">#</th>\r\n <th>T\u00EAn \u0111\u0103ng nh\u1EADp</th>\r\n <th>T\u00EAn ng\u01B0\u1EDDi d\u00F9ng</th>\r\n <th>\u0110\u01A1n v\u1ECB</th>\r\n <th nzWidth=\"75px\">Hi\u1EC7u l\u1EF1c</th>\r\n <th nzWidth=\"100px\">\u0110ang online</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><extend-input [size]=\"'small'\" [(_ngModel)]=\"filter.UserName\"></extend-input></th>\r\n <th><extend-input [size]=\"'small'\" [(_ngModel)]=\"filter.FullName\"></extend-input></th>\r\n <th><extend-input [size]=\"'small'\" [(_ngModel)]=\"filter.OrgName\"></extend-input></th>\r\n <th></th>\r\n <th class=\"center\"><extend-checkbox [(_ngModel)]=\"showOnlineOnly\"></extend-checkbox></th>\r\n <th></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (row of getLstUser(); track $index; let i = $index) {\r\n <tr>\r\n <td>{{ i + 1 + filter.PageIndex * filter.PageSize }}</td>\r\n <td>{{ row.UserName }}</td>\r\n <td>{{ row.FullName }}</td>\r\n <td>\r\n {{ row.OrgName }}\r\n <div *ngIf=\"row.LstOrgName\" [innerHtml]=\"row.LstOrgName\"></div>\r\n </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 class=\"text-center\">\r\n @if (SignalRService.connection?.state == HubConnectionState.Connected && row.LoginStatus) {\r\n <icon-check></icon-check>\r\n }\r\n </td>\r\n <td class=\"center\">\r\n <icon-edit (click)=\"edit(row)\"></icon-edit>\r\n <box [width]=\"4\"></box><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 <div nz-col [nzSpan]=\"24\">\r\n <div nz-flex nzJustify=\"end\" 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\r\n<nz-dropdown-menu #menu=\"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.UserName\"\r\n [appAutoFocus]=\"filter.isUserNameSearch\"\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.UserName = ''; search()\">{{ \"RESET\" | translate }}</button>\r\n </div>\r\n </div>\r\n</nz-dropdown-menu>\r\n" }]
|
|
7520
7526
|
}] });
|
|
7521
7527
|
|
|
7522
7528
|
class ResetPassComponent extends BaseComponent {
|
|
@@ -8355,7 +8361,7 @@ class SequenceListComponent extends BaseComponent {
|
|
|
8355
8361
|
this.getData();
|
|
8356
8362
|
}
|
|
8357
8363
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: SequenceListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
8358
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: SequenceListComponent, 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-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\r\n <div nz-col nzSpan=\"24\">\r\n <nz-table\r\n #table\r\n [nzData]=\"data.LstItem || []\"\r\n [nzBordered]=\"true\"\r\n [nzSize]=\"'small'\"\r\n [nzShowSizeChanger]=\"true\"\r\n [nzFrontPagination]=\"false\"\r\n
|
|
8364
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: SequenceListComponent, 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-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\r\n <div nz-col nzSpan=\"24\">\r\n <nz-table\r\n #table\r\n [nzData]=\"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 <th nzWidth=\"50px\">#</th>\r\n <th>Code</th>\r\n <th nzWidth=\"75px\">Type</th>\r\n <th nzWidth=\"75px\">Prefix</th>\r\n <th nzWidth=\"75px\">Suffix</th>\r\n <th nzWidth=\"75px\">Length</th>\r\n <th nzWidth=\"75px\">Start at</th>\r\n <th>Description</th>\r\n <th nzWidth=\"75px\">Active</th>\r\n <th nzWidth=\"75px\" nzRight>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\"></extend-input>\r\n </th>\r\n <th></th>\r\n <th></th>\r\n <th></th>\r\n <th></th>\r\n <th></th>\r\n <th></th>\r\n <th></th>\r\n <th nzRight></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.Type }}</td>\r\n <td>{{ row.Prefix }}</td>\r\n <td>{{ row.Suffix }}</td>\r\n <td>{{ row.Length }}</td>\r\n <td>{{ row.SeqStartAt }}</td>\r\n <td>{{ row.Description }}</td>\r\n <td class=\"center\">\r\n @if (row.IsActive) {\r\n <nz-icon nzType=\"check-circle\" nzTheme=\"outline\" class=\"color-primary\" />\r\n }\r\n </td>\r\n <td class=\"center\" nzRight>\r\n <icon-edit></icon-edit>\r\n <box [width]=\"4\"></box>\r\n <icon-delete></icon-delete>\r\n </td>\r\n </tr>\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: "component", type: ButtonSearch, selector: "button-search" }, { kind: "component", type: ButtonAdd, selector: "button-add" }, { 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: 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.NzCellFixedDirective, selector: "td[nzRight],th[nzRight],td[nzLeft],th[nzLeft]", inputs: ["nzRight", "nzLeft", "colspan", "colSpan"] }, { 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: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "component", type: IconEdit, selector: "icon-edit", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { 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: CommonModule }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }] });
|
|
8359
8365
|
}
|
|
8360
8366
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: SequenceListComponent, decorators: [{
|
|
8361
8367
|
type: Component,
|
|
@@ -8372,7 +8378,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
|
|
|
8372
8378
|
IconDelete,
|
|
8373
8379
|
NzPaginationModule,
|
|
8374
8380
|
CommonModule,
|
|
8375
|
-
], 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\r\n <div nz-col nzSpan=\"24\">\r\n <nz-table\r\n #table\r\n [nzData]=\"data.LstItem || []\"\r\n [nzBordered]=\"true\"\r\n [nzSize]=\"'small'\"\r\n [nzShowSizeChanger]=\"true\"\r\n [nzFrontPagination]=\"false\"\r\n
|
|
8381
|
+
], 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\r\n <div nz-col nzSpan=\"24\">\r\n <nz-table\r\n #table\r\n [nzData]=\"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 <th nzWidth=\"50px\">#</th>\r\n <th>Code</th>\r\n <th nzWidth=\"75px\">Type</th>\r\n <th nzWidth=\"75px\">Prefix</th>\r\n <th nzWidth=\"75px\">Suffix</th>\r\n <th nzWidth=\"75px\">Length</th>\r\n <th nzWidth=\"75px\">Start at</th>\r\n <th>Description</th>\r\n <th nzWidth=\"75px\">Active</th>\r\n <th nzWidth=\"75px\" nzRight>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\"></extend-input>\r\n </th>\r\n <th></th>\r\n <th></th>\r\n <th></th>\r\n <th></th>\r\n <th></th>\r\n <th></th>\r\n <th></th>\r\n <th nzRight></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.Type }}</td>\r\n <td>{{ row.Prefix }}</td>\r\n <td>{{ row.Suffix }}</td>\r\n <td>{{ row.Length }}</td>\r\n <td>{{ row.SeqStartAt }}</td>\r\n <td>{{ row.Description }}</td>\r\n <td class=\"center\">\r\n @if (row.IsActive) {\r\n <nz-icon nzType=\"check-circle\" nzTheme=\"outline\" class=\"color-primary\" />\r\n }\r\n </td>\r\n <td class=\"center\" nzRight>\r\n <icon-edit></icon-edit>\r\n <box [width]=\"4\"></box>\r\n <icon-delete></icon-delete>\r\n </td>\r\n </tr>\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" }]
|
|
8376
8382
|
}] });
|
|
8377
8383
|
|
|
8378
8384
|
class SequenceDetailComponent extends BaseComponent {
|
|
@@ -9852,6 +9858,8 @@ class WorkflowEditorComponent extends BaseComponent {
|
|
|
9852
9858
|
onDeleteAction = new EventEmitter();
|
|
9853
9859
|
onDeleteRule = new EventEmitter();
|
|
9854
9860
|
onDeleteRuleLine = new EventEmitter();
|
|
9861
|
+
onCheckRule = new EventEmitter();
|
|
9862
|
+
onCheckAllRule = new EventEmitter();
|
|
9855
9863
|
//#endregion
|
|
9856
9864
|
//#region wf editor
|
|
9857
9865
|
Math = Math;
|
|
@@ -11431,8 +11439,21 @@ class WorkflowEditorComponent extends BaseComponent {
|
|
|
11431
11439
|
});
|
|
11432
11440
|
}
|
|
11433
11441
|
}
|
|
11442
|
+
checkAction(item) {
|
|
11443
|
+
this.onCheckRule.emit({
|
|
11444
|
+
ruleline: item,
|
|
11445
|
+
sourceActionId: this.hoverAction?.IsTempId ? 0 : this.hoverAction?.WF_TemplateStageAction_Id,
|
|
11446
|
+
});
|
|
11447
|
+
}
|
|
11448
|
+
checkAllAction() {
|
|
11449
|
+
// this.actionRuleModalVisible = false
|
|
11450
|
+
this.onCheckAllRule.emit({
|
|
11451
|
+
lstruleline: this.hoverAction?.actionRule.lstLine,
|
|
11452
|
+
sourceActionId: this.hoverAction?.IsTempId ? 0 : this.hoverAction?.WF_TemplateStageAction_Id,
|
|
11453
|
+
});
|
|
11454
|
+
}
|
|
11434
11455
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: WorkflowEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
11435
|
-
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> 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\" /> 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\" /> 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\" /> 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\" /> 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 /> \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\" /> 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]=\"' '\">\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> 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> 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"] }] });
|
|
11456
|
+
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> 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\" /> 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\" /> 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\" /> 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\" /> 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 /> \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\" /> 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]=\"' '\">\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> 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> 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$1, 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"] }] });
|
|
11436
11457
|
}
|
|
11437
11458
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: WorkflowEditorComponent, decorators: [{
|
|
11438
11459
|
type: Component,
|
|
@@ -11465,8 +11486,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
|
|
|
11465
11486
|
NzModalTitleDirective,
|
|
11466
11487
|
IconAdd,
|
|
11467
11488
|
NzModalFooterDirective,
|
|
11468
|
-
DicDomainSelectComponent,
|
|
11469
|
-
], 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> 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\" /> 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\" /> 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\" /> 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\" /> 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 /> \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\" /> 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]=\"' '\">\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> 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> 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"] }]
|
|
11489
|
+
DicDomainSelectComponent$1,
|
|
11490
|
+
], 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> 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\" /> 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\" /> 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\" /> 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\" /> 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 /> \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\" /> 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]=\"' '\">\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> 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> 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"] }]
|
|
11470
11491
|
}], propDecorators: { lstOrg: [{
|
|
11471
11492
|
type: Input
|
|
11472
11493
|
}], lstRole: [{
|
|
@@ -11488,6 +11509,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
|
|
|
11488
11509
|
}], onDeleteRuleLine: [{
|
|
11489
11510
|
type: Output,
|
|
11490
11511
|
args: ['onDeleteRuleLine']
|
|
11512
|
+
}], onCheckRule: [{
|
|
11513
|
+
type: Output,
|
|
11514
|
+
args: ['onCheckRule']
|
|
11515
|
+
}], onCheckAllRule: [{
|
|
11516
|
+
type: Output,
|
|
11517
|
+
args: ['onCheckAllRule']
|
|
11491
11518
|
}], canvasRef: [{
|
|
11492
11519
|
type: ViewChild,
|
|
11493
11520
|
args: ['canvas', { static: true }]
|
|
@@ -11575,6 +11602,305 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
|
|
|
11575
11602
|
args: ['globalNotiTemplate', { static: true }]
|
|
11576
11603
|
}] } });
|
|
11577
11604
|
|
|
11605
|
+
class DicDomainSelectComponent {
|
|
11606
|
+
label = '';
|
|
11607
|
+
floatingLabel = true;
|
|
11608
|
+
placeHolder = '';
|
|
11609
|
+
labelSpan = 8;
|
|
11610
|
+
labelAlign = 'left';
|
|
11611
|
+
disabled = false;
|
|
11612
|
+
required = false;
|
|
11613
|
+
multiple = false;
|
|
11614
|
+
showSelectAll = false;
|
|
11615
|
+
maxTagCount = 10;
|
|
11616
|
+
inputWidth = '';
|
|
11617
|
+
inputHeight = '';
|
|
11618
|
+
size = 'default';
|
|
11619
|
+
borderBottomOnly = false;
|
|
11620
|
+
defaultFirstItem = false;
|
|
11621
|
+
DomainCode = '';
|
|
11622
|
+
ParentItemCode = '';
|
|
11623
|
+
_ngModel = null;
|
|
11624
|
+
_ngModelChange = new EventEmitter();
|
|
11625
|
+
formData;
|
|
11626
|
+
controlName;
|
|
11627
|
+
service = inject(DicDomainService);
|
|
11628
|
+
get lstItem() {
|
|
11629
|
+
if (!this.ParentItemCode) {
|
|
11630
|
+
return this._lstItem;
|
|
11631
|
+
}
|
|
11632
|
+
return this._lstItem.filter((x) => x.ParentItemCode == '__ALL__' || x.ParentItemCode == this.ParentItemCode);
|
|
11633
|
+
}
|
|
11634
|
+
_lstItem = [];
|
|
11635
|
+
async ngOnInit() {
|
|
11636
|
+
if (this.required && this.formData && this.controlName) {
|
|
11637
|
+
this.formData.controls[this.controlName]?.setValidators(Validators.required);
|
|
11638
|
+
}
|
|
11639
|
+
if (this.disabled && this.formData && this.controlName) {
|
|
11640
|
+
this.formData.controls[this.controlName].disable();
|
|
11641
|
+
}
|
|
11642
|
+
if (this.DomainCode) {
|
|
11643
|
+
this._lstItem = await this.service.getByDomain(this.DomainCode);
|
|
11644
|
+
setTimeout(() => {
|
|
11645
|
+
if (this.defaultFirstItem &&
|
|
11646
|
+
this.lstItem[0] &&
|
|
11647
|
+
!this._ngModel &&
|
|
11648
|
+
!(this.formData && this.formData.controls[this.controlName].value)) {
|
|
11649
|
+
const val = !this.multiple ? this.lstItem[0].ItemCode : [this.lstItem[0].ItemCode];
|
|
11650
|
+
this.onSelectChange(val);
|
|
11651
|
+
if (this.formData && this.controlName) {
|
|
11652
|
+
this.formData.controls[this.controlName].setValue(val);
|
|
11653
|
+
}
|
|
11654
|
+
}
|
|
11655
|
+
});
|
|
11656
|
+
}
|
|
11657
|
+
}
|
|
11658
|
+
onSelectChange(val) {
|
|
11659
|
+
this._ngModel = val;
|
|
11660
|
+
this._ngModelChange.emit(this._ngModel);
|
|
11661
|
+
}
|
|
11662
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DicDomainSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11663
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: DicDomainSelectComponent, isStandalone: true, selector: "dic-domain-select", inputs: { label: "label", floatingLabel: "floatingLabel", placeHolder: "placeHolder", labelSpan: "labelSpan", labelAlign: "labelAlign", disabled: "disabled", required: "required", multiple: "multiple", showSelectAll: "showSelectAll", maxTagCount: "maxTagCount", inputWidth: "inputWidth", inputHeight: "inputHeight", size: "size", borderBottomOnly: "borderBottomOnly", defaultFirstItem: "defaultFirstItem", DomainCode: "DomainCode", ParentItemCode: "ParentItemCode", _ngModel: "_ngModel", formData: "formData", controlName: "controlName" }, outputs: { _ngModelChange: "_ngModelChange" }, ngImport: i0, template: "<extend-select\r\n [placeHolder]=\"placeHolder\"\r\n [borderBottomOnly]=\"borderBottomOnly\"\r\n [size]=\"size\"\r\n [inputWidth]=\"inputWidth\"\r\n [inputHeight]=\"inputHeight\"\r\n [floatingLabel]=\"floatingLabel\"\r\n [label]=\"label\"\r\n [labelSpan]=\"labelSpan\"\r\n [lstItem]=\"lstItem\"\r\n [displayField]=\"'ItemValue'\"\r\n [valueField]=\"'ItemCode'\"\r\n [multiple]=\"multiple\"\r\n [showSelectAll]=\"showSelectAll\"\r\n [required]=\"required\"\r\n [disabled]=\"disabled\"\r\n [formData]=\"formData\"\r\n [controlName]=\"controlName\"\r\n [(_ngModel)]=\"_ngModel\"\r\n (_ngModelChange)=\"onSelectChange($event)\"\r\n></extend-select>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: NzFormModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: NzSelectModule }, { 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"] }] });
|
|
11664
|
+
}
|
|
11665
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DicDomainSelectComponent, decorators: [{
|
|
11666
|
+
type: Component,
|
|
11667
|
+
args: [{ selector: 'dic-domain-select', imports: [
|
|
11668
|
+
CommonModule,
|
|
11669
|
+
FormsModule,
|
|
11670
|
+
ReactiveFormsModule,
|
|
11671
|
+
NzFormModule,
|
|
11672
|
+
TranslateModule,
|
|
11673
|
+
NzSelectModule,
|
|
11674
|
+
ExtendSelectComponent,
|
|
11675
|
+
], template: "<extend-select\r\n [placeHolder]=\"placeHolder\"\r\n [borderBottomOnly]=\"borderBottomOnly\"\r\n [size]=\"size\"\r\n [inputWidth]=\"inputWidth\"\r\n [inputHeight]=\"inputHeight\"\r\n [floatingLabel]=\"floatingLabel\"\r\n [label]=\"label\"\r\n [labelSpan]=\"labelSpan\"\r\n [lstItem]=\"lstItem\"\r\n [displayField]=\"'ItemValue'\"\r\n [valueField]=\"'ItemCode'\"\r\n [multiple]=\"multiple\"\r\n [showSelectAll]=\"showSelectAll\"\r\n [required]=\"required\"\r\n [disabled]=\"disabled\"\r\n [formData]=\"formData\"\r\n [controlName]=\"controlName\"\r\n [(_ngModel)]=\"_ngModel\"\r\n (_ngModelChange)=\"onSelectChange($event)\"\r\n></extend-select>\r\n" }]
|
|
11676
|
+
}], propDecorators: { label: [{
|
|
11677
|
+
type: Input
|
|
11678
|
+
}], floatingLabel: [{
|
|
11679
|
+
type: Input
|
|
11680
|
+
}], placeHolder: [{
|
|
11681
|
+
type: Input
|
|
11682
|
+
}], labelSpan: [{
|
|
11683
|
+
type: Input
|
|
11684
|
+
}], labelAlign: [{
|
|
11685
|
+
type: Input
|
|
11686
|
+
}], disabled: [{
|
|
11687
|
+
type: Input
|
|
11688
|
+
}], required: [{
|
|
11689
|
+
type: Input
|
|
11690
|
+
}], multiple: [{
|
|
11691
|
+
type: Input
|
|
11692
|
+
}], showSelectAll: [{
|
|
11693
|
+
type: Input
|
|
11694
|
+
}], maxTagCount: [{
|
|
11695
|
+
type: Input
|
|
11696
|
+
}], inputWidth: [{
|
|
11697
|
+
type: Input
|
|
11698
|
+
}], inputHeight: [{
|
|
11699
|
+
type: Input
|
|
11700
|
+
}], size: [{
|
|
11701
|
+
type: Input
|
|
11702
|
+
}], borderBottomOnly: [{
|
|
11703
|
+
type: Input
|
|
11704
|
+
}], defaultFirstItem: [{
|
|
11705
|
+
type: Input
|
|
11706
|
+
}], DomainCode: [{
|
|
11707
|
+
type: Input
|
|
11708
|
+
}], ParentItemCode: [{
|
|
11709
|
+
type: Input
|
|
11710
|
+
}], _ngModel: [{
|
|
11711
|
+
type: Input
|
|
11712
|
+
}], _ngModelChange: [{
|
|
11713
|
+
type: Output
|
|
11714
|
+
}], formData: [{
|
|
11715
|
+
type: Input
|
|
11716
|
+
}], controlName: [{
|
|
11717
|
+
type: Input
|
|
11718
|
+
}] } });
|
|
11719
|
+
|
|
11720
|
+
class DynamicFormComponent extends BaseComponent {
|
|
11721
|
+
fb = inject(FormBuilder);
|
|
11722
|
+
dynamicForm;
|
|
11723
|
+
formMetadata = null;
|
|
11724
|
+
formValuedata = null;
|
|
11725
|
+
ngOnChanges(changes) {
|
|
11726
|
+
if (changes['formMetadata'] && this.formMetadata && this.formMetadata.fields) {
|
|
11727
|
+
this.buildForm();
|
|
11728
|
+
}
|
|
11729
|
+
}
|
|
11730
|
+
buildForm() {
|
|
11731
|
+
const group = {};
|
|
11732
|
+
this.formMetadata.fields.forEach((field) => {
|
|
11733
|
+
const validators = field.isRequired ? [Validators.required] : [];
|
|
11734
|
+
group[field.name] = ['', validators];
|
|
11735
|
+
});
|
|
11736
|
+
this.dynamicForm = this.fb.group(group);
|
|
11737
|
+
if (this.formValuedata) {
|
|
11738
|
+
this.dynamicForm.patchValue(this.formValuedata);
|
|
11739
|
+
}
|
|
11740
|
+
}
|
|
11741
|
+
onSubmit() {
|
|
11742
|
+
if (this.dynamicForm && this.dynamicForm.valid) {
|
|
11743
|
+
const payload = this.dynamicForm.value;
|
|
11744
|
+
console.log('Form value:', payload);
|
|
11745
|
+
}
|
|
11746
|
+
else {
|
|
11747
|
+
this.touchControls(this.dynamicForm);
|
|
11748
|
+
}
|
|
11749
|
+
}
|
|
11750
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DynamicFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
11751
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: DynamicFormComponent, isStandalone: true, selector: "app-dynamic-form", inputs: { formMetadata: "formMetadata", formValuedata: "formValuedata" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<form nz-form nzLayout=\"vertical\" [formGroup]=\"dynamicForm\" (ngSubmit)=\"onSubmit()\" *ngIf=\"formMetadata\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <div nz-col [nzSpan]=\"field.span || 24\" *ngFor=\"let field of formMetadata.fields\">\r\n @if (field.type == \"text\") {\r\n <extend-input\r\n [label]=\"field.label\"\r\n [placeHolder]=\"field.placeholder\"\r\n [formData]=\"dynamicForm\"\r\n [controlName]=\"field.name\"\r\n ></extend-input>\r\n } @else if (field.type == \"number\") {\r\n <extend-input-number\r\n [label]=\"field.label\"\r\n [placeHolder]=\"field.placeholder\"\r\n [formData]=\"dynamicForm\"\r\n [controlName]=\"field.name\"\r\n ></extend-input-number>\r\n } @else if (field.type == \"select\") {\r\n @if (field.domainCode) {\r\n <dic-domain-select\r\n [label]=\"field.label\"\r\n [placeHolder]=\"field.placeholder\"\r\n [formData]=\"dynamicForm\"\r\n [controlName]=\"field.name\"\r\n [DomainCode]=\"field.domainCode\"\r\n ></dic-domain-select>\r\n } @else {\r\n <extend-select\r\n [label]=\"field.label\"\r\n [placeHolder]=\"field.placeholder\"\r\n [lstItem]=\"field.options\"\r\n [valueField]=\"'value'\"\r\n [displayField]=\"'label'\"\r\n [formData]=\"dynamicForm\"\r\n [controlName]=\"field.name\"\r\n ></extend-select>\r\n }\r\n } @else if (field.type == \"date\") {\r\n <extend-date-picker\r\n [label]=\"field.label\"\r\n [placeHolder]=\"field.placeholder\"\r\n [formData]=\"dynamicForm\"\r\n [controlName]=\"field.name\"\r\n ></extend-date-picker>\r\n }\r\n </div>\r\n </div>\r\n</form>\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: 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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: "ngmodule", type: NzInputModule }, { kind: "ngmodule", type: NzInputNumberModule }, { kind: "ngmodule", type: NzSelectModule }, { kind: "ngmodule", type: NzDatePickerModule }, { kind: "ngmodule", type: NzGridModule }, { 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: 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: "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: ExtendDatePicker, selector: "extend-date-picker", inputs: ["dateFormat", "label", "placeHolder", "labelAlign", "floatingLabel", "showTime", "labelSpan", "labelFlex", "inputFlex", "disabled", "required", "isSubmited", "noBottom", "selectModeType", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "minDate", "maxDate", "lstItem", "displayField", "valueField", "formData", "controlName", "_ngModel", "isTouched", "inputErrorMessage", "errorMessages"], outputs: ["_ngModelChange"] }, { kind: "component", type: DicDomainSelectComponent, selector: "dic-domain-select", inputs: ["label", "floatingLabel", "placeHolder", "labelSpan", "labelAlign", "disabled", "required", "multiple", "showSelectAll", "maxTagCount", "inputWidth", "inputHeight", "size", "borderBottomOnly", "defaultFirstItem", "DomainCode", "ParentItemCode", "_ngModel", "formData", "controlName"], outputs: ["_ngModelChange"] }] });
|
|
11752
|
+
}
|
|
11753
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DynamicFormComponent, decorators: [{
|
|
11754
|
+
type: Component,
|
|
11755
|
+
args: [{ selector: 'app-dynamic-form', imports: [
|
|
11756
|
+
CommonModule,
|
|
11757
|
+
NzFormModule,
|
|
11758
|
+
ReactiveFormsModule,
|
|
11759
|
+
NzInputModule,
|
|
11760
|
+
NzInputNumberModule,
|
|
11761
|
+
NzSelectModule,
|
|
11762
|
+
NzDatePickerModule,
|
|
11763
|
+
NzGridModule,
|
|
11764
|
+
ExtendInput,
|
|
11765
|
+
ExtendInputNumber,
|
|
11766
|
+
ExtendSelectComponent,
|
|
11767
|
+
ExtendDatePicker,
|
|
11768
|
+
DicDomainSelectComponent,
|
|
11769
|
+
], template: "<form nz-form nzLayout=\"vertical\" [formGroup]=\"dynamicForm\" (ngSubmit)=\"onSubmit()\" *ngIf=\"formMetadata\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <div nz-col [nzSpan]=\"field.span || 24\" *ngFor=\"let field of formMetadata.fields\">\r\n @if (field.type == \"text\") {\r\n <extend-input\r\n [label]=\"field.label\"\r\n [placeHolder]=\"field.placeholder\"\r\n [formData]=\"dynamicForm\"\r\n [controlName]=\"field.name\"\r\n ></extend-input>\r\n } @else if (field.type == \"number\") {\r\n <extend-input-number\r\n [label]=\"field.label\"\r\n [placeHolder]=\"field.placeholder\"\r\n [formData]=\"dynamicForm\"\r\n [controlName]=\"field.name\"\r\n ></extend-input-number>\r\n } @else if (field.type == \"select\") {\r\n @if (field.domainCode) {\r\n <dic-domain-select\r\n [label]=\"field.label\"\r\n [placeHolder]=\"field.placeholder\"\r\n [formData]=\"dynamicForm\"\r\n [controlName]=\"field.name\"\r\n [DomainCode]=\"field.domainCode\"\r\n ></dic-domain-select>\r\n } @else {\r\n <extend-select\r\n [label]=\"field.label\"\r\n [placeHolder]=\"field.placeholder\"\r\n [lstItem]=\"field.options\"\r\n [valueField]=\"'value'\"\r\n [displayField]=\"'label'\"\r\n [formData]=\"dynamicForm\"\r\n [controlName]=\"field.name\"\r\n ></extend-select>\r\n }\r\n } @else if (field.type == \"date\") {\r\n <extend-date-picker\r\n [label]=\"field.label\"\r\n [placeHolder]=\"field.placeholder\"\r\n [formData]=\"dynamicForm\"\r\n [controlName]=\"field.name\"\r\n ></extend-date-picker>\r\n }\r\n </div>\r\n </div>\r\n</form>\r\n" }]
|
|
11770
|
+
}], propDecorators: { formMetadata: [{
|
|
11771
|
+
type: Input
|
|
11772
|
+
}], formValuedata: [{
|
|
11773
|
+
type: Input
|
|
11774
|
+
}] } });
|
|
11775
|
+
|
|
11776
|
+
class DynamicBuildFormComponent extends BaseComponent {
|
|
11777
|
+
toolboxItems = [
|
|
11778
|
+
{ id: '', name: '', type: 'text', label: 'Text Input', icon: 'font-colors', span: 12 },
|
|
11779
|
+
{ id: '', name: '', type: 'number', label: 'Number Input', icon: 'number', span: 12 },
|
|
11780
|
+
{ id: '', name: '', type: 'date', label: 'Date Picker', icon: 'calendar', span: 12 },
|
|
11781
|
+
{ id: '', name: '', type: 'select', label: 'Dropdown', icon: 'down-square', span: 12 },
|
|
11782
|
+
];
|
|
11783
|
+
formFields = [];
|
|
11784
|
+
selectedField = null; // Field đang được chọn để sửa thuộc tính
|
|
11785
|
+
drop(event) {
|
|
11786
|
+
if (event.previousContainer === event.container) {
|
|
11787
|
+
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
|
|
11788
|
+
}
|
|
11789
|
+
else {
|
|
11790
|
+
const itemToDrop = event.previousContainer.data[event.previousIndex];
|
|
11791
|
+
const id = 'field_' + new Date().getTime();
|
|
11792
|
+
const newItem = {
|
|
11793
|
+
...itemToDrop,
|
|
11794
|
+
id: id,
|
|
11795
|
+
name: id,
|
|
11796
|
+
label: `${itemToDrop.label}`,
|
|
11797
|
+
placeholder: '',
|
|
11798
|
+
};
|
|
11799
|
+
if (newItem.type === 'select') {
|
|
11800
|
+
newItem.options = [
|
|
11801
|
+
// { label: '', value: '' },
|
|
11802
|
+
// { label: '', value: '' },
|
|
11803
|
+
];
|
|
11804
|
+
newItem._options = JSON.stringify(newItem.options, null, 2);
|
|
11805
|
+
}
|
|
11806
|
+
this.formFields.splice(event.currentIndex, 0, newItem);
|
|
11807
|
+
this.selectField(newItem); // Tự động chọn field mới thả vào
|
|
11808
|
+
}
|
|
11809
|
+
}
|
|
11810
|
+
onOptionsChange(jsonString) {
|
|
11811
|
+
if (!this.selectedField)
|
|
11812
|
+
return;
|
|
11813
|
+
try {
|
|
11814
|
+
if (!jsonString || jsonString.trim() === '') {
|
|
11815
|
+
this.selectedField.options = [];
|
|
11816
|
+
return;
|
|
11817
|
+
}
|
|
11818
|
+
// Parse JSON thành mảng thực tế
|
|
11819
|
+
const parsed = JSON.parse(jsonString);
|
|
11820
|
+
if (Array.isArray(parsed)) {
|
|
11821
|
+
this.selectedField.options = parsed;
|
|
11822
|
+
}
|
|
11823
|
+
}
|
|
11824
|
+
catch (e) {
|
|
11825
|
+
// Bỏ qua lỗi trong lúc người dùng đang gõ dở sai cú pháp JSON
|
|
11826
|
+
}
|
|
11827
|
+
}
|
|
11828
|
+
addOption() {
|
|
11829
|
+
if (this.selectedField && this.selectedField.type === 'select') {
|
|
11830
|
+
if (!this.selectedField.options) {
|
|
11831
|
+
this.selectedField.options = [];
|
|
11832
|
+
}
|
|
11833
|
+
const newIndex = this.selectedField.options.length + 1;
|
|
11834
|
+
this.selectedField.options.push({ label: `Option ${newIndex}`, value: `${newIndex}` });
|
|
11835
|
+
}
|
|
11836
|
+
}
|
|
11837
|
+
removeOption(index) {
|
|
11838
|
+
if (this.selectedField && this.selectedField.options) {
|
|
11839
|
+
this.selectedField.options.splice(index, 1);
|
|
11840
|
+
}
|
|
11841
|
+
}
|
|
11842
|
+
selectField(field) {
|
|
11843
|
+
this.selectedField = field;
|
|
11844
|
+
}
|
|
11845
|
+
removeField(index, event) {
|
|
11846
|
+
event.stopPropagation(); // Tránh kích hoạt sự kiện selectField
|
|
11847
|
+
if (this.selectedField === this.formFields[index]) {
|
|
11848
|
+
this.selectedField = null;
|
|
11849
|
+
}
|
|
11850
|
+
this.formFields.splice(index, 1);
|
|
11851
|
+
}
|
|
11852
|
+
saveFormDefinition() {
|
|
11853
|
+
if (this.formFields.length === 0) {
|
|
11854
|
+
this.notiService.warning('Form rỗng!');
|
|
11855
|
+
return;
|
|
11856
|
+
}
|
|
11857
|
+
// this.isSaving = true;
|
|
11858
|
+
console.log(this.formFields);
|
|
11859
|
+
// // Gửi request POST lên backend .NET 10
|
|
11860
|
+
// this.http.post(this.apiUrl, payload).subscribe({
|
|
11861
|
+
// next: (response: any) => {
|
|
11862
|
+
// this.message.success('Lưu cấu trúc form thành công!');
|
|
11863
|
+
// this.isSaving = false;
|
|
11864
|
+
// },
|
|
11865
|
+
// error: (error) => {
|
|
11866
|
+
// console.error('Lỗi khi lưu form:', error);
|
|
11867
|
+
// this.message.error('Có lỗi xảy ra khi lưu cấu trúc form. Vui lòng thử lại!');
|
|
11868
|
+
// this.isSaving = false;
|
|
11869
|
+
// }
|
|
11870
|
+
// });
|
|
11871
|
+
}
|
|
11872
|
+
visible = false;
|
|
11873
|
+
dynamicForm;
|
|
11874
|
+
onOk() {
|
|
11875
|
+
this.dynamicForm.onSubmit();
|
|
11876
|
+
}
|
|
11877
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DynamicBuildFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
11878
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: DynamicBuildFormComponent, isStandalone: true, selector: "app-form-builder", viewQueries: [{ propertyName: "dynamicForm", first: true, predicate: ["xxx"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div nz-row [nzGutter]=\"16\" class=\"builder-layout\">\r\n <div nz-col [nzSpan]=\"5\">\r\n <nz-card nzTitle=\"Components\" nzSize=\"small\">\r\n <div\r\n id=\"toolboxList\"\r\n cdkDropList\r\n [cdkDropListData]=\"toolboxItems\"\r\n [cdkDropListConnectedTo]=\"['canvasGrid']\"\r\n class=\"toolbox-list\"\r\n >\r\n <div class=\"toolbox-item\" *ngFor=\"let item of toolboxItems\" cdkDrag>\r\n <i nz-icon [nzType]=\"item.icon\"></i> {{ item.label }}\r\n </div>\r\n </div>\r\n </nz-card>\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"14\">\r\n <nz-card nzTitle=\"Form design\" nzSize=\"small\" [nzExtra]=\"extraTemplate\">\r\n <div\r\n nz-row\r\n [nzGutter]=\"[16, 16]\"\r\n id=\"canvasGrid\"\r\n cdkDropList\r\n cdkDropListOrientation=\"mixed\"\r\n [cdkDropListData]=\"formFields\"\r\n (cdkDropListDropped)=\"drop($event)\"\r\n class=\"canvas-grid-container\"\r\n >\r\n <div class=\"empty-text\" *ngIf=\"formFields.length === 0\">Drag the elements here to design the layout.</div>\r\n\r\n <div\r\n nz-col\r\n [nzSpan]=\"field.span\"\r\n *ngFor=\"let field of formFields; let i = index\"\r\n cdkDrag\r\n (click)=\"selectField(field)\"\r\n [class.is-selected]=\"selectedField === field\"\r\n class=\"grid-field-wrapper\"\r\n >\r\n <div class=\"field-box\">\r\n <div class=\"field-header\">\r\n <span>{{ field.label }} <span *ngIf=\"field.isRequired\" style=\"color: red\">*</span></span>\r\n <span class=\"span-badge\">col-{{ field.span }}</span>\r\n </div>\r\n\r\n <input\r\n nz-input\r\n [placeholder]=\"field.placeholder || ''\"\r\n disabled\r\n *ngIf=\"field.type === 'text' || field.type === 'number'\"\r\n />\r\n <nz-date-picker style=\"width: 100%\" nzDisabled *ngIf=\"field.type === 'date'\"></nz-date-picker>\r\n <nz-select nzPlaceHolder=\"Ch\u1ECDn d\u1EEF li\u1EC7u...\" nzDisabled *ngIf=\"field.type === 'select'\"></nz-select>\r\n\r\n <button class=\"btn-delete\" (click)=\"removeField(i, $event)\">\r\n <i nz-icon nzType=\"delete\" nzTheme=\"outline\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </nz-card>\r\n\r\n <ng-template #extraTemplate>\r\n <div nz-flex nzGap=\"small\">\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n nzType=\"primary\"\r\n [nzLoading]=\"isSaving\"\r\n [disabled]=\"formFields.length === 0\"\r\n (click)=\"saveFormDefinition()\"\r\n >\r\n <i nz-icon nzType=\"save\" nzTheme=\"outline\" *ngIf=\"!isSaving\"></i>\r\n Get form\r\n </button>\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n nzType=\"primary\"\r\n [nzLoading]=\"isSaving\"\r\n [disabled]=\"formFields.length === 0\"\r\n (click)=\"visible = true\"\r\n >\r\n Test form\r\n </button>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"5\">\r\n <nz-card [nzTitle]=\"selectedField?.type?.toUpperCase() + ' Attributes'\" nzSize=\"small\">\r\n <div *ngIf=\"selectedField; else noSelect\" class=\"inspector-panel\">\r\n <extend-input label=\"Name\" [(_ngModel)]=\"selectedField.name\"></extend-input>\r\n <extend-input label=\"Label\" [(_ngModel)]=\"selectedField.label\"></extend-input>\r\n <extend-input label=\"Placeholder\" [(_ngModel)]=\"selectedField.placeholder\"></extend-input>\r\n\r\n @if (selectedField.type === \"select\") {\r\n <extend-input label=\"Domain code\" [(_ngModel)]=\"selectedField.domainCode\"></extend-input>\r\n\r\n <nz-form-item nz-row style=\"margin-top: 12px; margin-bottom: 0\">\r\n <nz-form-label nzSpan=\"24\"> Options</nz-form-label>\r\n <div nz-col nzSpan=\"24\">\r\n @for (opt of selectedField.options; track $index) {\r\n <div style=\"display: flex; gap: 8px; margin-bottom: 0px; align-items: center\">\r\n <extend-input size=\"small\" placeHolder=\"Value\" [(_ngModel)]=\"opt.value\"></extend-input>\r\n <extend-input size=\"small\" placeHolder=\"Label\" [(_ngModel)]=\"opt.label\"></extend-input>\r\n\r\n <button nz-button nzDanger nzType=\"text\" (click)=\"removeOption($index)\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n }\r\n\r\n <button\r\n nz-button\r\n nzType=\"dashed\"\r\n nzSize=\"small\"\r\n style=\"width: 100%; margin-top: 2px\"\r\n (click)=\"addOption()\"\r\n >\r\n <i nz-icon nzType=\"plus\"></i> Th\u00EAm l\u1EF1a ch\u1ECDn\r\n </button>\r\n </div>\r\n </nz-form-item>\r\n }\r\n\r\n <nz-form-item nz-row style=\"margin-top: 10px\">\r\n <nz-form-label nzSpan=\"24\">Grid Span: 1 - 24</nz-form-label>\r\n <nz-slider\r\n nzSpan=\"24\"\r\n style=\"width: 100%\"\r\n [nzMin]=\"0\"\r\n [nzMax]=\"24\"\r\n [nzStep]=\"2\"\r\n [(ngModel)]=\"selectedField.span\"\r\n ></nz-slider>\r\n <!-- <span style=\"font-size: 12px; color: #666\"> G\u1EE3i \u00FD: 24 = 100% d\u00F2ng, 12 = 50% d\u00F2ng, 8 = 33% d\u00F2ng. </span> -->\r\n </nz-form-item>\r\n\r\n <nz-form-item>\r\n <label nz-checkbox [(ngModel)]=\"selectedField.isRequired\">Required</label>\r\n </nz-form-item>\r\n </div>\r\n <ng-template #noSelect>\r\n <p style=\"color: #999; text-align: center; padding-top: 40px\">\r\n Select a component in the form to configure the layout.\r\n </p>\r\n </ng-template>\r\n </nz-card>\r\n </div>\r\n</div>\r\n\r\n<nz-modal\r\n nzWidth=\"60%\"\r\n [nzContent]=\"content\"\r\n [nzMaskClosable]=\"false\"\r\n [nzClosable]=\"false\"\r\n [nzCancelText]=\"'\u0110\u00F3ng'\"\r\n [(nzVisible)]=\"visible\"\r\n (nzOnCancel)=\"visible = false\"\r\n (nzOnOk)=\"onOk()\"\r\n>\r\n <ng-template #content>\r\n <app-dynamic-form #xxx [formMetadata]=\"{ fields: formFields }\"></app-dynamic-form>\r\n </ng-template>\r\n</nz-modal>\r\n", styles: ["@charset \"UTF-8\";.builder-layout{padding:16px;background:#f5f7fa;min-height:calc(100vh - 64px)}.toolbox-list{display:flex;flex-direction:column;gap:10px;min-height:200px}.toolbox-item{padding:10px;background:#fff;border:1px solid #d9d9d9;border-radius:4px;cursor:grab}.toolbox-item:hover{border-color:#1890ff;color:#1890ff}.canvas-grid-container{min-height:500px;background:#fafafa;border:2px dashed #e2e8f0;border-radius:6px;padding:6px!important;align-content:flex-start;position:relative}.empty-text{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);color:#bfbfbf}.grid-field-wrapper{transition:transform .2s cubic-bezier(0,0,.2,1)}.field-box{background:#fff;border:1px solid #e2e8f0;border-radius:4px;padding:14px;position:relative;cursor:move;box-shadow:0 1px 3px #0000000d}.field-box:hover{border-color:#40a9ff}.field-box:hover .btn-delete{display:block}.is-selected .field-box{border-color:#1890ff;box-shadow:0 0 0 2px #1890ff33;background:#e6f7ff}.field-header{display:flex;justify-content:space-between;margin-bottom:6px;font-weight:500;font-size:13px}.field-header .span-badge{font-size:11px;background:#f0f2f5;padding:0 6px;border-radius:2px;color:#8c8c8c}.btn-delete{position:absolute;top:-10px;right:-10px;display:none;border:none;background:#ff4d4f;color:#fff;width:22px;height:22px;border-radius:50%;font-size:11px;cursor:pointer;box-shadow:0 2px 4px #0000001a;align-items:center;justify-content:center}.cdk-drag-preview{box-shadow:0 5px 15px #00000026;opacity:.9;background:#fff;border:1px solid #1890ff;border-radius:4px;padding:10px}.cdk-drag-placeholder{opacity:.4;background:#f0f2f5;border:2px dashed #bfbfbf!important}.inspector-panel nz-form-item{margin-bottom:16px}\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: DragDropModule }, { kind: "directive", type: i3$6.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$6.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { 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: 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: 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: "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: NzSliderModule }, { kind: "component", type: i10.NzSliderComponent, selector: "nz-slider", inputs: ["nzDisabled", "nzDots", "nzIncluded", "nzRange", "nzVertical", "nzReverse", "nzDefaultValue", "nzMarks", "nzMax", "nzMin", "nzStep", "nzTooltipVisible", "nzTooltipPlacement", "nzTipFormatter"], outputs: ["nzOnAfterChange"], exportAs: ["nzSlider"] }, { 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: NzSelectModule }, { 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: NzCheckboxModule }, { kind: "component", type: i3$1.NzCheckboxComponent, selector: "[nz-checkbox]", inputs: ["nzValue", "nzAutoFocus", "nzDisabled", "nzIndeterminate", "nzChecked", "nzId", "nzName"], outputs: ["nzCheckedChange"], exportAs: ["nzCheckbox"] }, { 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: "component", type: DynamicFormComponent, selector: "app-dynamic-form", inputs: ["formMetadata", "formValuedata"] }, { kind: "directive", type: NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }] });
|
|
11879
|
+
}
|
|
11880
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DynamicBuildFormComponent, decorators: [{
|
|
11881
|
+
type: Component,
|
|
11882
|
+
args: [{ selector: 'app-form-builder', imports: [
|
|
11883
|
+
CommonModule,
|
|
11884
|
+
FormsModule,
|
|
11885
|
+
DragDropModule,
|
|
11886
|
+
NzGridModule,
|
|
11887
|
+
NzCardModule,
|
|
11888
|
+
NzIconModule,
|
|
11889
|
+
NzButtonModule,
|
|
11890
|
+
NzSliderModule,
|
|
11891
|
+
NzDatePickerModule,
|
|
11892
|
+
NzSelectModule,
|
|
11893
|
+
NzCheckboxModule,
|
|
11894
|
+
ExtendInput,
|
|
11895
|
+
NzModalModule,
|
|
11896
|
+
DynamicFormComponent,
|
|
11897
|
+
NzFlexDirective,
|
|
11898
|
+
], template: "<div nz-row [nzGutter]=\"16\" class=\"builder-layout\">\r\n <div nz-col [nzSpan]=\"5\">\r\n <nz-card nzTitle=\"Components\" nzSize=\"small\">\r\n <div\r\n id=\"toolboxList\"\r\n cdkDropList\r\n [cdkDropListData]=\"toolboxItems\"\r\n [cdkDropListConnectedTo]=\"['canvasGrid']\"\r\n class=\"toolbox-list\"\r\n >\r\n <div class=\"toolbox-item\" *ngFor=\"let item of toolboxItems\" cdkDrag>\r\n <i nz-icon [nzType]=\"item.icon\"></i> {{ item.label }}\r\n </div>\r\n </div>\r\n </nz-card>\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"14\">\r\n <nz-card nzTitle=\"Form design\" nzSize=\"small\" [nzExtra]=\"extraTemplate\">\r\n <div\r\n nz-row\r\n [nzGutter]=\"[16, 16]\"\r\n id=\"canvasGrid\"\r\n cdkDropList\r\n cdkDropListOrientation=\"mixed\"\r\n [cdkDropListData]=\"formFields\"\r\n (cdkDropListDropped)=\"drop($event)\"\r\n class=\"canvas-grid-container\"\r\n >\r\n <div class=\"empty-text\" *ngIf=\"formFields.length === 0\">Drag the elements here to design the layout.</div>\r\n\r\n <div\r\n nz-col\r\n [nzSpan]=\"field.span\"\r\n *ngFor=\"let field of formFields; let i = index\"\r\n cdkDrag\r\n (click)=\"selectField(field)\"\r\n [class.is-selected]=\"selectedField === field\"\r\n class=\"grid-field-wrapper\"\r\n >\r\n <div class=\"field-box\">\r\n <div class=\"field-header\">\r\n <span>{{ field.label }} <span *ngIf=\"field.isRequired\" style=\"color: red\">*</span></span>\r\n <span class=\"span-badge\">col-{{ field.span }}</span>\r\n </div>\r\n\r\n <input\r\n nz-input\r\n [placeholder]=\"field.placeholder || ''\"\r\n disabled\r\n *ngIf=\"field.type === 'text' || field.type === 'number'\"\r\n />\r\n <nz-date-picker style=\"width: 100%\" nzDisabled *ngIf=\"field.type === 'date'\"></nz-date-picker>\r\n <nz-select nzPlaceHolder=\"Ch\u1ECDn d\u1EEF li\u1EC7u...\" nzDisabled *ngIf=\"field.type === 'select'\"></nz-select>\r\n\r\n <button class=\"btn-delete\" (click)=\"removeField(i, $event)\">\r\n <i nz-icon nzType=\"delete\" nzTheme=\"outline\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </nz-card>\r\n\r\n <ng-template #extraTemplate>\r\n <div nz-flex nzGap=\"small\">\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n nzType=\"primary\"\r\n [nzLoading]=\"isSaving\"\r\n [disabled]=\"formFields.length === 0\"\r\n (click)=\"saveFormDefinition()\"\r\n >\r\n <i nz-icon nzType=\"save\" nzTheme=\"outline\" *ngIf=\"!isSaving\"></i>\r\n Get form\r\n </button>\r\n <button\r\n nz-button\r\n nzSize=\"small\"\r\n nzType=\"primary\"\r\n [nzLoading]=\"isSaving\"\r\n [disabled]=\"formFields.length === 0\"\r\n (click)=\"visible = true\"\r\n >\r\n Test form\r\n </button>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"5\">\r\n <nz-card [nzTitle]=\"selectedField?.type?.toUpperCase() + ' Attributes'\" nzSize=\"small\">\r\n <div *ngIf=\"selectedField; else noSelect\" class=\"inspector-panel\">\r\n <extend-input label=\"Name\" [(_ngModel)]=\"selectedField.name\"></extend-input>\r\n <extend-input label=\"Label\" [(_ngModel)]=\"selectedField.label\"></extend-input>\r\n <extend-input label=\"Placeholder\" [(_ngModel)]=\"selectedField.placeholder\"></extend-input>\r\n\r\n @if (selectedField.type === \"select\") {\r\n <extend-input label=\"Domain code\" [(_ngModel)]=\"selectedField.domainCode\"></extend-input>\r\n\r\n <nz-form-item nz-row style=\"margin-top: 12px; margin-bottom: 0\">\r\n <nz-form-label nzSpan=\"24\"> Options</nz-form-label>\r\n <div nz-col nzSpan=\"24\">\r\n @for (opt of selectedField.options; track $index) {\r\n <div style=\"display: flex; gap: 8px; margin-bottom: 0px; align-items: center\">\r\n <extend-input size=\"small\" placeHolder=\"Value\" [(_ngModel)]=\"opt.value\"></extend-input>\r\n <extend-input size=\"small\" placeHolder=\"Label\" [(_ngModel)]=\"opt.label\"></extend-input>\r\n\r\n <button nz-button nzDanger nzType=\"text\" (click)=\"removeOption($index)\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n }\r\n\r\n <button\r\n nz-button\r\n nzType=\"dashed\"\r\n nzSize=\"small\"\r\n style=\"width: 100%; margin-top: 2px\"\r\n (click)=\"addOption()\"\r\n >\r\n <i nz-icon nzType=\"plus\"></i> Th\u00EAm l\u1EF1a ch\u1ECDn\r\n </button>\r\n </div>\r\n </nz-form-item>\r\n }\r\n\r\n <nz-form-item nz-row style=\"margin-top: 10px\">\r\n <nz-form-label nzSpan=\"24\">Grid Span: 1 - 24</nz-form-label>\r\n <nz-slider\r\n nzSpan=\"24\"\r\n style=\"width: 100%\"\r\n [nzMin]=\"0\"\r\n [nzMax]=\"24\"\r\n [nzStep]=\"2\"\r\n [(ngModel)]=\"selectedField.span\"\r\n ></nz-slider>\r\n <!-- <span style=\"font-size: 12px; color: #666\"> G\u1EE3i \u00FD: 24 = 100% d\u00F2ng, 12 = 50% d\u00F2ng, 8 = 33% d\u00F2ng. </span> -->\r\n </nz-form-item>\r\n\r\n <nz-form-item>\r\n <label nz-checkbox [(ngModel)]=\"selectedField.isRequired\">Required</label>\r\n </nz-form-item>\r\n </div>\r\n <ng-template #noSelect>\r\n <p style=\"color: #999; text-align: center; padding-top: 40px\">\r\n Select a component in the form to configure the layout.\r\n </p>\r\n </ng-template>\r\n </nz-card>\r\n </div>\r\n</div>\r\n\r\n<nz-modal\r\n nzWidth=\"60%\"\r\n [nzContent]=\"content\"\r\n [nzMaskClosable]=\"false\"\r\n [nzClosable]=\"false\"\r\n [nzCancelText]=\"'\u0110\u00F3ng'\"\r\n [(nzVisible)]=\"visible\"\r\n (nzOnCancel)=\"visible = false\"\r\n (nzOnOk)=\"onOk()\"\r\n>\r\n <ng-template #content>\r\n <app-dynamic-form #xxx [formMetadata]=\"{ fields: formFields }\"></app-dynamic-form>\r\n </ng-template>\r\n</nz-modal>\r\n", styles: ["@charset \"UTF-8\";.builder-layout{padding:16px;background:#f5f7fa;min-height:calc(100vh - 64px)}.toolbox-list{display:flex;flex-direction:column;gap:10px;min-height:200px}.toolbox-item{padding:10px;background:#fff;border:1px solid #d9d9d9;border-radius:4px;cursor:grab}.toolbox-item:hover{border-color:#1890ff;color:#1890ff}.canvas-grid-container{min-height:500px;background:#fafafa;border:2px dashed #e2e8f0;border-radius:6px;padding:6px!important;align-content:flex-start;position:relative}.empty-text{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);color:#bfbfbf}.grid-field-wrapper{transition:transform .2s cubic-bezier(0,0,.2,1)}.field-box{background:#fff;border:1px solid #e2e8f0;border-radius:4px;padding:14px;position:relative;cursor:move;box-shadow:0 1px 3px #0000000d}.field-box:hover{border-color:#40a9ff}.field-box:hover .btn-delete{display:block}.is-selected .field-box{border-color:#1890ff;box-shadow:0 0 0 2px #1890ff33;background:#e6f7ff}.field-header{display:flex;justify-content:space-between;margin-bottom:6px;font-weight:500;font-size:13px}.field-header .span-badge{font-size:11px;background:#f0f2f5;padding:0 6px;border-radius:2px;color:#8c8c8c}.btn-delete{position:absolute;top:-10px;right:-10px;display:none;border:none;background:#ff4d4f;color:#fff;width:22px;height:22px;border-radius:50%;font-size:11px;cursor:pointer;box-shadow:0 2px 4px #0000001a;align-items:center;justify-content:center}.cdk-drag-preview{box-shadow:0 5px 15px #00000026;opacity:.9;background:#fff;border:1px solid #1890ff;border-radius:4px;padding:10px}.cdk-drag-placeholder{opacity:.4;background:#f0f2f5;border:2px dashed #bfbfbf!important}.inspector-panel nz-form-item{margin-bottom:16px}\n"] }]
|
|
11899
|
+
}], propDecorators: { dynamicForm: [{
|
|
11900
|
+
type: ViewChild,
|
|
11901
|
+
args: ['xxx']
|
|
11902
|
+
}] } });
|
|
11903
|
+
|
|
11578
11904
|
class HasPermissionPipe {
|
|
11579
11905
|
permissionService;
|
|
11580
11906
|
static debug = false;
|
|
@@ -12135,9 +12461,29 @@ class RouteMonitorService {
|
|
|
12135
12461
|
if (url == '/' || url.startsWith('/login') || url == '/no-permission') {
|
|
12136
12462
|
return;
|
|
12137
12463
|
}
|
|
12138
|
-
|
|
12464
|
+
let currentRoute = this.router.routerState.root.snapshot;
|
|
12465
|
+
let headerMenuId = null;
|
|
12466
|
+
while (currentRoute) {
|
|
12467
|
+
if (currentRoute.params && currentRoute.params['headerMenuId']) {
|
|
12468
|
+
headerMenuId = currentRoute.params['headerMenuId'];
|
|
12469
|
+
break;
|
|
12470
|
+
}
|
|
12471
|
+
currentRoute = currentRoute.firstChild;
|
|
12472
|
+
}
|
|
12473
|
+
let urlToCheck = url;
|
|
12474
|
+
if (headerMenuId) {
|
|
12475
|
+
urlToCheck = urlToCheck.replace(`/${headerMenuId}`, '');
|
|
12476
|
+
if (urlToCheck === '') {
|
|
12477
|
+
urlToCheck = '/';
|
|
12478
|
+
}
|
|
12479
|
+
}
|
|
12480
|
+
if (urlToCheck === '/' || urlToCheck === '/no-permission') {
|
|
12481
|
+
return;
|
|
12482
|
+
}
|
|
12483
|
+
// console.log(`Original URL: ${url} | URL to Check: ${urlToCheck}`);
|
|
12484
|
+
const hasMenu = await this.authService.checkUserMenu(urlToCheck);
|
|
12139
12485
|
if (!hasMenu) {
|
|
12140
|
-
this.notiService.error(`Không có quyền truy cập: ${
|
|
12486
|
+
this.notiService.error(`Không có quyền truy cập: ${urlToCheck}`);
|
|
12141
12487
|
this.router.navigate(['/no-permission'], {
|
|
12142
12488
|
state: {
|
|
12143
12489
|
deniedUrl: url,
|
|
@@ -12374,7 +12720,7 @@ class NotificationCenterComponent {
|
|
|
12374
12720
|
return item.id;
|
|
12375
12721
|
}
|
|
12376
12722
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: NotificationCenterComponent, deps: [{ token: NotificationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
12377
|
-
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$
|
|
12723
|
+
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$7.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 });
|
|
12378
12724
|
}
|
|
12379
12725
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: NotificationCenterComponent, decorators: [{
|
|
12380
12726
|
type: Component,
|
|
@@ -12426,7 +12772,7 @@ class LayoutUser extends BaseComponent {
|
|
|
12426
12772
|
if (await this.confirm(`Chuyển sang đơn vị: ${org.Name}`)) {
|
|
12427
12773
|
this.authService.changeOrg(org).then(async (res) => {
|
|
12428
12774
|
if (res) {
|
|
12429
|
-
await this.notiService.success(`Đã chuyển sang đơn vị: ${org.Name}`, '', true);
|
|
12775
|
+
await this.notiService.success(`Đã chuyển sang đơn vị: ${org.Name}`, '', { showPopup: true });
|
|
12430
12776
|
window.location.reload();
|
|
12431
12777
|
}
|
|
12432
12778
|
}, (err) => this.handleError(err));
|
|
@@ -12439,7 +12785,7 @@ class LayoutUser extends BaseComponent {
|
|
|
12439
12785
|
this.sessionManager.logout();
|
|
12440
12786
|
}
|
|
12441
12787
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: LayoutUser, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
12442
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: LayoutUser, isStandalone: true, selector: "header-user", usesInheritance: true, ngImport: i0, template: "<button\r\n *ngIf=\"TokenStorage.getOrgName() && !isXSmall\"\r\n class=\"org-info\"\r\n [@fadeInOut]\r\n nz-button\r\n nzType=\"text\"\r\n nz-dropdown\r\n [nzDropdownMenu]=\"isOneUserMultiOrgs ? menuOrg : null\"\r\n [nzTrigger]=\"'click'\"\r\n style=\"height: var(--app-header-height); color: #ffffff\"\r\n>\r\n <nz-icon nzType=\"cluster\" nzTheme=\"outline\" />\r\n {{ TokenStorage.getOrgName() }}\r\n</button>\r\n\r\n<nz-dropdown-menu #menuOrg=\"nzDropdownMenu\">\r\n <ul nz-menu>\r\n @for (org of lstOrg; track $index) {\r\n <li *ngIf=\"$index > 0\" nz-menu-divider></li>\r\n <li nz-menu-item (click)=\"changeOrg(org)\">\r\n <nz-icon nzType=\"swap\" nzTheme=\"outline\" /> {{ org.Name }}\r\n </li>\r\n }\r\n </ul>\r\n</nz-dropdown-menu>\r\n\r\n<button\r\n class=\"user-info\"\r\n nz-button\r\n nzType=\"text\"\r\n nz-dropdown\r\n [nzDropdownMenu]=\"menuUser\"\r\n [nzTrigger]=\"'click'\"\r\n style=\"height: var(--app-header-height); color: #ffffff\"\r\n>\r\n <nz-icon nzType=\"user\" nzTheme=\"outline\" />\r\n {{ TokenStorage.getUserFullname() }}\r\n</button>\r\n\r\n<nz-dropdown-menu #menuUser=\"nzDropdownMenu\">\r\n <ul nz-menu>\r\n <li *ngIf=\"TokenStorage.getOrgName() && isXSmall\" nz-menu-item>\r\n <nz-icon nzType=\"cluster\" nzTheme=\"outline\" /> {{ TokenStorage.getOrgName() }}\r\n </li>\r\n <li *ngIf=\"!(!isXSmall && TokenStorage.getOrgName())\" nz-menu-divider></li>\r\n <li nz-menu-item (click)=\"gotoSetting()\">\r\n <nz-icon nzType=\"setting\" nzTheme=\"outline\" /> {{ TranslateKey.SETTING | translate }}\r\n </li>\r\n <li nz-menu-divider></li>\r\n <li nz-menu-item (click)=\"logout()\">\r\n <nz-icon nzType=\"logout\" nzTheme=\"outline\" /> {{ TranslateKey.LOGOUT | translate }}\r\n </li>\r\n </ul>\r\n</nz-dropdown-menu>\r\n", styles: [".user-info:hover,.org-info:hover{background-color:#ffffff26}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: NzLayoutModule }, { 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: NzDropDownModule }, { kind: "directive", type: i4$2.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i4$2.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "directive", type: i4$2.NzMenuDividerDirective, selector: "[nz-menu-divider]", exportAs: ["nzMenuDivider"] }, { kind: "directive", type: i5$4.NzDropDownDirective, selector: "[nz-dropdown]", inputs: ["nzDropdownMenu", "nzTrigger", "nzMatchWidthElement", "nzBackdrop", "nzClickHide", "nzDisabled", "nzVisible", "nzOverlayClassName", "nzOverlayStyle", "nzPlacement"], outputs: ["nzVisibleChange"], exportAs: ["nzDropdown"] }, { kind: "component", type: i5$4.NzDropdownMenuComponent, selector: "nz-dropdown-menu", exportAs: ["nzDropdownMenu"] }, { kind: "directive", type: i5$4.NzDropdownButtonDirective, selector: "[nz-button][nz-dropdown]" }, { kind: "ngmodule", type: NzGridModule }, { kind: "ngmodule", type: NzFlexModule }, { 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: "ngmodule", type: NzTreeModule }, { kind: "ngmodule", type: NzBackTopModule }, { kind: "ngmodule", type: NzDrawerModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: NzInputModule }, { kind: "ngmodule", type: NzSegmentedModule }, { kind: "ngmodule", type: NzBadgeModule }], animations: [fadeInOut] });
|
|
12788
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: LayoutUser, isStandalone: true, selector: "header-user", usesInheritance: true, ngImport: i0, template: "<button\r\n *ngIf=\"TokenStorage.getOrgName() && !isXSmall\"\r\n class=\"org-info\"\r\n [@fadeInOut]\r\n nz-button\r\n nzType=\"text\"\r\n nz-dropdown\r\n [nzDropdownMenu]=\"isOneUserMultiOrgs ? menuOrg : null\"\r\n [nzTrigger]=\"'click'\"\r\n style=\"height: var(--app-header-height); color: #ffffff\"\r\n>\r\n <nz-icon nzType=\"cluster\" nzTheme=\"outline\" />\r\n {{ TokenStorage.getOrgName() }}\r\n</button>\r\n\r\n<nz-dropdown-menu #menuOrg=\"nzDropdownMenu\">\r\n <ul nz-menu>\r\n @for (org of lstOrg; track $index) {\r\n <li *ngIf=\"$index > 0\" nz-menu-divider></li>\r\n <li nz-menu-item (click)=\"changeOrg(org)\">\r\n <nz-icon nzType=\"swap\" nzTheme=\"outline\" /> {{ org.Name }}\r\n </li>\r\n }\r\n </ul>\r\n</nz-dropdown-menu>\r\n\r\n<button\r\n class=\"user-info\"\r\n nz-button\r\n nzType=\"text\"\r\n nz-dropdown\r\n [nzDropdownMenu]=\"menuUser\"\r\n [nzTrigger]=\"'click'\"\r\n style=\"height: var(--app-header-height); color: #ffffff\"\r\n>\r\n <nz-icon nzType=\"user\" nzTheme=\"outline\" />\r\n {{ TokenStorage.getUserFullname() }}\r\n</button>\r\n\r\n<nz-dropdown-menu #menuUser=\"nzDropdownMenu\">\r\n <ul nz-menu>\r\n <li *ngIf=\"TokenStorage.getOrgName() && isXSmall\" nz-menu-item>\r\n <nz-icon nzType=\"cluster\" nzTheme=\"outline\" /> {{ TokenStorage.getOrgName() }}\r\n </li>\r\n <li *ngIf=\"!(!isXSmall && TokenStorage.getOrgName())\" nz-menu-divider></li>\r\n <li nz-menu-item (click)=\"gotoSetting()\">\r\n <nz-icon nzType=\"setting\" nzTheme=\"outline\" /> {{ TranslateKey.SETTING | translate }}\r\n </li>\r\n <li nz-menu-divider></li>\r\n <li nz-menu-item (click)=\"logout()\">\r\n <nz-icon nzType=\"logout\" nzTheme=\"outline\" /> {{ TranslateKey.LOGOUT | translate }}\r\n </li>\r\n </ul>\r\n</nz-dropdown-menu>\r\n", styles: [".org-info,.user-info{font-weight:600}.user-info:hover,.org-info:hover{background-color:#ffffff26}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: NzLayoutModule }, { 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: NzDropDownModule }, { kind: "directive", type: i4$2.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i4$2.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "directive", type: i4$2.NzMenuDividerDirective, selector: "[nz-menu-divider]", exportAs: ["nzMenuDivider"] }, { kind: "directive", type: i5$4.NzDropDownDirective, selector: "[nz-dropdown]", inputs: ["nzDropdownMenu", "nzTrigger", "nzMatchWidthElement", "nzBackdrop", "nzClickHide", "nzDisabled", "nzVisible", "nzOverlayClassName", "nzOverlayStyle", "nzPlacement"], outputs: ["nzVisibleChange"], exportAs: ["nzDropdown"] }, { kind: "component", type: i5$4.NzDropdownMenuComponent, selector: "nz-dropdown-menu", exportAs: ["nzDropdownMenu"] }, { kind: "directive", type: i5$4.NzDropdownButtonDirective, selector: "[nz-button][nz-dropdown]" }, { kind: "ngmodule", type: NzGridModule }, { kind: "ngmodule", type: NzFlexModule }, { 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: "ngmodule", type: NzTreeModule }, { kind: "ngmodule", type: NzBackTopModule }, { kind: "ngmodule", type: NzDrawerModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: NzInputModule }, { kind: "ngmodule", type: NzSegmentedModule }, { kind: "ngmodule", type: NzBadgeModule }], animations: [fadeInOut] });
|
|
12443
12789
|
}
|
|
12444
12790
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: LayoutUser, decorators: [{
|
|
12445
12791
|
type: Component,
|
|
@@ -12460,7 +12806,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
|
|
|
12460
12806
|
NzTreeModule,
|
|
12461
12807
|
NzSegmentedModule,
|
|
12462
12808
|
NzBadgeModule,
|
|
12463
|
-
], animations: [fadeInOut], template: "<button\r\n *ngIf=\"TokenStorage.getOrgName() && !isXSmall\"\r\n class=\"org-info\"\r\n [@fadeInOut]\r\n nz-button\r\n nzType=\"text\"\r\n nz-dropdown\r\n [nzDropdownMenu]=\"isOneUserMultiOrgs ? menuOrg : null\"\r\n [nzTrigger]=\"'click'\"\r\n style=\"height: var(--app-header-height); color: #ffffff\"\r\n>\r\n <nz-icon nzType=\"cluster\" nzTheme=\"outline\" />\r\n {{ TokenStorage.getOrgName() }}\r\n</button>\r\n\r\n<nz-dropdown-menu #menuOrg=\"nzDropdownMenu\">\r\n <ul nz-menu>\r\n @for (org of lstOrg; track $index) {\r\n <li *ngIf=\"$index > 0\" nz-menu-divider></li>\r\n <li nz-menu-item (click)=\"changeOrg(org)\">\r\n <nz-icon nzType=\"swap\" nzTheme=\"outline\" /> {{ org.Name }}\r\n </li>\r\n }\r\n </ul>\r\n</nz-dropdown-menu>\r\n\r\n<button\r\n class=\"user-info\"\r\n nz-button\r\n nzType=\"text\"\r\n nz-dropdown\r\n [nzDropdownMenu]=\"menuUser\"\r\n [nzTrigger]=\"'click'\"\r\n style=\"height: var(--app-header-height); color: #ffffff\"\r\n>\r\n <nz-icon nzType=\"user\" nzTheme=\"outline\" />\r\n {{ TokenStorage.getUserFullname() }}\r\n</button>\r\n\r\n<nz-dropdown-menu #menuUser=\"nzDropdownMenu\">\r\n <ul nz-menu>\r\n <li *ngIf=\"TokenStorage.getOrgName() && isXSmall\" nz-menu-item>\r\n <nz-icon nzType=\"cluster\" nzTheme=\"outline\" /> {{ TokenStorage.getOrgName() }}\r\n </li>\r\n <li *ngIf=\"!(!isXSmall && TokenStorage.getOrgName())\" nz-menu-divider></li>\r\n <li nz-menu-item (click)=\"gotoSetting()\">\r\n <nz-icon nzType=\"setting\" nzTheme=\"outline\" /> {{ TranslateKey.SETTING | translate }}\r\n </li>\r\n <li nz-menu-divider></li>\r\n <li nz-menu-item (click)=\"logout()\">\r\n <nz-icon nzType=\"logout\" nzTheme=\"outline\" /> {{ TranslateKey.LOGOUT | translate }}\r\n </li>\r\n </ul>\r\n</nz-dropdown-menu>\r\n", styles: [".user-info:hover,.org-info:hover{background-color:#ffffff26}\n"] }]
|
|
12809
|
+
], animations: [fadeInOut], template: "<button\r\n *ngIf=\"TokenStorage.getOrgName() && !isXSmall\"\r\n class=\"org-info\"\r\n [@fadeInOut]\r\n nz-button\r\n nzType=\"text\"\r\n nz-dropdown\r\n [nzDropdownMenu]=\"isOneUserMultiOrgs ? menuOrg : null\"\r\n [nzTrigger]=\"'click'\"\r\n style=\"height: var(--app-header-height); color: #ffffff\"\r\n>\r\n <nz-icon nzType=\"cluster\" nzTheme=\"outline\" />\r\n {{ TokenStorage.getOrgName() }}\r\n</button>\r\n\r\n<nz-dropdown-menu #menuOrg=\"nzDropdownMenu\">\r\n <ul nz-menu>\r\n @for (org of lstOrg; track $index) {\r\n <li *ngIf=\"$index > 0\" nz-menu-divider></li>\r\n <li nz-menu-item (click)=\"changeOrg(org)\">\r\n <nz-icon nzType=\"swap\" nzTheme=\"outline\" /> {{ org.Name }}\r\n </li>\r\n }\r\n </ul>\r\n</nz-dropdown-menu>\r\n\r\n<button\r\n class=\"user-info\"\r\n nz-button\r\n nzType=\"text\"\r\n nz-dropdown\r\n [nzDropdownMenu]=\"menuUser\"\r\n [nzTrigger]=\"'click'\"\r\n style=\"height: var(--app-header-height); color: #ffffff\"\r\n>\r\n <nz-icon nzType=\"user\" nzTheme=\"outline\" />\r\n {{ TokenStorage.getUserFullname() }}\r\n</button>\r\n\r\n<nz-dropdown-menu #menuUser=\"nzDropdownMenu\">\r\n <ul nz-menu>\r\n <li *ngIf=\"TokenStorage.getOrgName() && isXSmall\" nz-menu-item>\r\n <nz-icon nzType=\"cluster\" nzTheme=\"outline\" /> {{ TokenStorage.getOrgName() }}\r\n </li>\r\n <li *ngIf=\"!(!isXSmall && TokenStorage.getOrgName())\" nz-menu-divider></li>\r\n <li nz-menu-item (click)=\"gotoSetting()\">\r\n <nz-icon nzType=\"setting\" nzTheme=\"outline\" /> {{ TranslateKey.SETTING | translate }}\r\n </li>\r\n <li nz-menu-divider></li>\r\n <li nz-menu-item (click)=\"logout()\">\r\n <nz-icon nzType=\"logout\" nzTheme=\"outline\" /> {{ TranslateKey.LOGOUT | translate }}\r\n </li>\r\n </ul>\r\n</nz-dropdown-menu>\r\n", styles: [".org-info,.user-info{font-weight:600}.user-info:hover,.org-info:hover{background-color:#ffffff26}\n"] }]
|
|
12464
12810
|
}] });
|
|
12465
12811
|
|
|
12466
12812
|
class HeaderSearchComponent extends BaseOverlayComponent {
|
|
@@ -12582,6 +12928,7 @@ class App_Menu {
|
|
|
12582
12928
|
}
|
|
12583
12929
|
}
|
|
12584
12930
|
class LayoutComponent extends BaseComponent {
|
|
12931
|
+
cdr;
|
|
12585
12932
|
vscService = inject(VscService);
|
|
12586
12933
|
authService = inject(AuthService);
|
|
12587
12934
|
settingService = inject(SettingService);
|
|
@@ -12591,6 +12938,9 @@ class LayoutComponent extends BaseComponent {
|
|
|
12591
12938
|
breakpointObserver = inject(BreakpointObserver);
|
|
12592
12939
|
device = inject(DeviceService);
|
|
12593
12940
|
TokenStorage = TokenStorage;
|
|
12941
|
+
LayoutComponent = LayoutComponent;
|
|
12942
|
+
static noShowSideMenu = false;
|
|
12943
|
+
static noShowBreadcrumb = false;
|
|
12594
12944
|
MENU_TYPE = 0;
|
|
12595
12945
|
HEADER_MENU_IN_USE = false;
|
|
12596
12946
|
SYSTEM_NAME = '';
|
|
@@ -12614,28 +12964,26 @@ class LayoutComponent extends BaseComponent {
|
|
|
12614
12964
|
visibleMenuDrawer = false;
|
|
12615
12965
|
searchValue = '';
|
|
12616
12966
|
lstHeaderMenu = [];
|
|
12617
|
-
|
|
12618
|
-
selectedHeaderMenuDisplay;
|
|
12967
|
+
currentHeaderId = 'xxx';
|
|
12619
12968
|
logoUrl$ = this.fileService
|
|
12620
12969
|
.getFileVersion('LOGO')
|
|
12621
12970
|
.pipe(map((res) => `${AppGlobals.apiEndpoint}/api/file/image?code=LOGO&v=${res || ''}`));
|
|
12622
12971
|
destroy$ = new Subject();
|
|
12623
12972
|
async ngOnInit() {
|
|
12973
|
+
this.handleHeaderMenu();
|
|
12624
12974
|
this.vscService.initVersionCheck();
|
|
12625
12975
|
SignalRService.initNoti();
|
|
12626
12976
|
this.authService.getUserHeaderMenu().then((res) => {
|
|
12627
12977
|
this.lstHeaderMenu = res.Data || [];
|
|
12628
|
-
|
|
12629
|
-
.
|
|
12630
|
-
|
|
12631
|
-
this.selectedHeaderMenuDisplay = sessionStorage.getItem('HEADER_MENU_selected') || '';
|
|
12978
|
+
setTimeout(() => {
|
|
12979
|
+
this.calculateMenuOverflow();
|
|
12980
|
+
}, 0);
|
|
12632
12981
|
});
|
|
12633
12982
|
await this.settingService.getByCodeAnonymous('MENU_TYPE').then((res) => {
|
|
12634
12983
|
if (res?.Data) {
|
|
12635
12984
|
this.MENU_TYPE = res.Data;
|
|
12636
12985
|
}
|
|
12637
12986
|
});
|
|
12638
|
-
this.getUserMenu(sessionStorage.getItem('HEADER_MENU_ID_selected') || '');
|
|
12639
12987
|
this.settingService.getByCodeAnonymous('SYSTEM_NAME').then((res) => {
|
|
12640
12988
|
if (res?.Data) {
|
|
12641
12989
|
this.SYSTEM_NAME = res.Data;
|
|
@@ -12655,6 +13003,7 @@ class LayoutComponent extends BaseComponent {
|
|
|
12655
13003
|
this.settingService.getByCodeAnonymous('SYSTEM_HEADER_MENU_IN_USE').then((res) => {
|
|
12656
13004
|
if (res?.Data) {
|
|
12657
13005
|
this.HEADER_MENU_IN_USE = res.Data ?? false;
|
|
13006
|
+
Breadcrumb.position = 'content';
|
|
12658
13007
|
}
|
|
12659
13008
|
});
|
|
12660
13009
|
this.breakpointObserver.observe([Breakpoints.XSmall, Breakpoints.Small]).subscribe((result) => {
|
|
@@ -12673,23 +13022,42 @@ class LayoutComponent extends BaseComponent {
|
|
|
12673
13022
|
// .subscribe((isMobile) => {
|
|
12674
13023
|
// this.isCollapsed = isMobile;
|
|
12675
13024
|
// });
|
|
12676
|
-
this.device
|
|
12677
|
-
|
|
12678
|
-
|
|
12679
|
-
|
|
12680
|
-
|
|
12681
|
-
});
|
|
13025
|
+
// this.device
|
|
13026
|
+
// .innerWidth$()
|
|
13027
|
+
// .pipe(takeUntil(this.destroy$))
|
|
13028
|
+
// .subscribe((innerWidth) => {
|
|
13029
|
+
// this.isCollapsed = innerWidth <= 1280;
|
|
13030
|
+
// });
|
|
12682
13031
|
this.isCollapsed = localStorage.getItem('MENU_isCollapsed') == '1';
|
|
12683
13032
|
}
|
|
12684
13033
|
ngOnDestroy() {
|
|
12685
13034
|
SignalRService.disconnect();
|
|
13035
|
+
if (this.resizeObserver) {
|
|
13036
|
+
this.resizeObserver.disconnect(); // Hủy observe khi component bị destroy
|
|
13037
|
+
}
|
|
13038
|
+
}
|
|
13039
|
+
handleHeaderMenu() {
|
|
13040
|
+
const headerId = this.route.snapshot.firstChild?.params['headerMenuId'];
|
|
13041
|
+
this._handleHeaderMenu(headerId);
|
|
13042
|
+
this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe(() => {
|
|
13043
|
+
const updatedHeaderId = this.route.snapshot.firstChild?.params['headerMenuId'];
|
|
13044
|
+
this._handleHeaderMenu(updatedHeaderId);
|
|
13045
|
+
});
|
|
13046
|
+
}
|
|
13047
|
+
_handleHeaderMenu(menuId) {
|
|
13048
|
+
this.getUserMenu(menuId);
|
|
12686
13049
|
}
|
|
12687
13050
|
getUserMenu(headerMenuId = '') {
|
|
13051
|
+
if (headerMenuId === this.currentHeaderId) {
|
|
13052
|
+
return;
|
|
13053
|
+
}
|
|
13054
|
+
this.currentHeaderId = headerMenuId;
|
|
12688
13055
|
this.authService.getUserMenu(headerMenuId).then((res) => {
|
|
12689
13056
|
this.lstMenu = res.Data || [];
|
|
12690
13057
|
this.nodes = this.buildNzTreeFromSubMenu(this.lstMenu);
|
|
12691
13058
|
this.updateOpenMenus();
|
|
12692
13059
|
this.selectNodeByUrl(this.router.url);
|
|
13060
|
+
this.cdr.detectChanges();
|
|
12693
13061
|
});
|
|
12694
13062
|
}
|
|
12695
13063
|
updateOpenMenus() {
|
|
@@ -12818,21 +13186,83 @@ class LayoutComponent extends BaseComponent {
|
|
|
12818
13186
|
this.isCollapsed = !this.isCollapsed;
|
|
12819
13187
|
localStorage.setItem('MENU_isCollapsed', this.isCollapsed ? '1' : '0');
|
|
12820
13188
|
}
|
|
12821
|
-
handleValueChangeHeaderMenu(
|
|
12822
|
-
|
|
12823
|
-
|
|
12824
|
-
|
|
12825
|
-
|
|
12826
|
-
this.
|
|
13189
|
+
handleValueChangeHeaderMenu(menu) {
|
|
13190
|
+
if (this.isCollapsed) {
|
|
13191
|
+
this.visibleMenuDrawer = true;
|
|
13192
|
+
this.cdr.detectChanges();
|
|
13193
|
+
}
|
|
13194
|
+
this._handleHeaderMenu(menu.App_Menu_Id);
|
|
12827
13195
|
if (menu.Url) {
|
|
12828
|
-
this.goto(menu.Url);
|
|
13196
|
+
this.goto(`/${menu.App_Menu_Id}${menu.Url}`);
|
|
12829
13197
|
}
|
|
12830
13198
|
else {
|
|
12831
|
-
this.goto('/');
|
|
13199
|
+
this.goto('/' + menu.App_Menu_Id);
|
|
13200
|
+
}
|
|
13201
|
+
}
|
|
13202
|
+
_menuContainer;
|
|
13203
|
+
set menuContainer(el) {
|
|
13204
|
+
if (el) {
|
|
13205
|
+
this._menuContainer = el;
|
|
13206
|
+
// Gắn sự kiện theo dõi resize ngay khi DOM xuất hiện
|
|
13207
|
+
if (this.resizeObserver) {
|
|
13208
|
+
this.resizeObserver.observe(el.nativeElement);
|
|
13209
|
+
}
|
|
13210
|
+
// Chạy tính toán ngay lập tức
|
|
13211
|
+
setTimeout(() => this.calculateMenuOverflow(), 0);
|
|
13212
|
+
}
|
|
13213
|
+
}
|
|
13214
|
+
get menuContainer() {
|
|
13215
|
+
return this._menuContainer;
|
|
13216
|
+
}
|
|
13217
|
+
// 2 mảng mới để chia tách menu
|
|
13218
|
+
visibleMenus = [];
|
|
13219
|
+
hiddenMenus = [];
|
|
13220
|
+
resizeObserver;
|
|
13221
|
+
constructor(cdr) {
|
|
13222
|
+
super();
|
|
13223
|
+
this.cdr = cdr;
|
|
13224
|
+
}
|
|
13225
|
+
ngAfterViewInit() {
|
|
13226
|
+
this.resizeObserver = new ResizeObserver(() => {
|
|
13227
|
+
this.calculateMenuOverflow();
|
|
13228
|
+
});
|
|
13229
|
+
if (this.menuContainer) {
|
|
13230
|
+
this.resizeObserver.observe(this.menuContainer.nativeElement);
|
|
13231
|
+
}
|
|
13232
|
+
else {
|
|
13233
|
+
this.visibleMenus = [...this.lstHeaderMenu];
|
|
12832
13234
|
}
|
|
12833
13235
|
}
|
|
12834
|
-
|
|
12835
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: LayoutComponent, isStandalone: true, selector: "layout", usesInheritance: true, ngImport: i0, template: "<nz-layout class=\"app-layout\">\r\n <nz-header class=\"app-header\">\r\n <div nz-row nzAlign=\"middle\" class=\"header-content\">\r\n @if (isCollapsed) {\r\n <div @fadeInOut>\r\n \r\n <button nz-button nzType=\"text\" style=\"color: var(--theme-text-color)\" (click)=\"visibleMenuDrawer = true\">\r\n <nz-icon nzType=\"menu\" nzTheme=\"outline\" />\r\n </button>\r\n </div>\r\n }\r\n\r\n <div class=\"header-logo\" [style.width]=\"!isCollapsed ? siderWidthStorage : '100px'\">\r\n <div nz-flex nzJustify=\"center\" nzGap=\"small\" style=\"line-height: var(--app-header-height)\">\r\n <img\r\n *ngIf=\"logoUrl$ | async as url\"\r\n [src]=\"url\"\r\n height=\"var(--app-header-height)\"\r\n style=\"padding: 4px\"\r\n hideIfError\r\n />\r\n @if (SYSTEM_NAME) {\r\n <h2 style=\"color: whitesmoke; margin-bottom: 0\">{{ SYSTEM_NAME }}</h2>\r\n } @else {\r\n -- o0o --\r\n }\r\n </div>\r\n </div>\r\n @if (!HEADER_MENU_IN_USE) {\r\n <box [width]=\"8\"></box>\r\n <app-breadcrumb [@fadeInOut] nz-col nzFlex=\"auto\" class=\"breadcrumb-header\"></app-breadcrumb>\r\n }\r\n @if (HEADER_MENU_IN_USE) {\r\n <div nz-col nzFlex=\"auto\" class=\"header-menu\">\r\n <div style=\"overflow: auto\">\r\n <nz-segmented\r\n [nzOptions]=\"lstHeaderMenuDisplay\"\r\n [(ngModel)]=\"selectedHeaderMenuDisplay\"\r\n (nzValueChange)=\"handleValueChangeHeaderMenu($event)\"\r\n ></nz-segmented>\r\n </div>\r\n </div>\r\n }\r\n\r\n <header-search></header-search>\r\n <app-notification-center></app-notification-center>\r\n <header-user></header-user>\r\n </div>\r\n </nz-header>\r\n <nz-layout class=\"body-layout\">\r\n <nz-sider\r\n class=\"menu-sidebar\"\r\n nzCollapsible\r\n [nzWidth]=\"siderWidth\"\r\n [nzCollapsedWidth]=\"0\"\r\n [(nzCollapsed)]=\"isCollapsed\"\r\n [nzTrigger]=\"null\"\r\n [nzTheme]=\"'dark'\"\r\n >\r\n <div class=\"menu-wapper\">\r\n @if (MENU_TYPE == 1) {\r\n <div class=\"nz-tree-wapper\">\r\n <nz-tree\r\n [nzData]=\"nodes\"\r\n [nzSearchValue]=\"searchValue\"\r\n [nzShowLine]=\"true\"\r\n [nzSelectedKeys]=\"selectedKeys\"\r\n [nzExpandedKeys]=\"expandedKeys\"\r\n (nzClick)=\"nzEvent($event)\"\r\n ></nz-tree>\r\n </div>\r\n } @else {\r\n <div class=\"nz-tree-wapper\">\r\n <ul nz-menu nzTheme=\"light\" nzMode=\"inline\" [nzInlineCollapsed]=\"isCollapsed\">\r\n @for (menuLv1 of lstMenu; track menuLv1.App_Menu_Id) {\r\n @if (menuLv1.SubMenu?.length) {\r\n <ul nz-submenu [nzOpen]=\"menuLv1.Open\" [nzTitle]=\"menuLv1.Name\" [nzIcon]=\"menuLv1.Icon\">\r\n @for (menuLv2 of menuLv1.SubMenu; track menuLv2.App_Menu_Id) {\r\n @if (menuLv2.SubMenu?.length) {\r\n <ul nz-submenu [nzOpen]=\"menuLv2.Open\" [nzTitle]=\"menuLv2.Name\" [nzIcon]=\"menuLv2.Icon\">\r\n @for (menuLv3 of menuLv2.SubMenu; track menuLv3.App_Menu_Id) {\r\n @if (menuLv3.SubMenu?.length) {\r\n <ul nz-submenu [nzOpen]=\"menuLv3.Open\" [nzTitle]=\"menuLv3.Name\" [nzIcon]=\"menuLv3.Icon\">\r\n @for (menuLv4 of menuLv3.SubMenu; track menuLv4.App_Menu_Id) {\r\n @if (menuLv4.SubMenu?.length) {\r\n <ul\r\n nz-submenu\r\n [nzOpen]=\"menuLv4.Open\"\r\n [nzTitle]=\"menuLv4.Name\"\r\n [nzIcon]=\"menuLv4.Icon\"\r\n >\r\n @for (menuLv5 of menuLv4.SubMenu; track menuLv5.App_Menu_Id) {}\r\n </ul>\r\n } @else {\r\n <li nz-menu-item nzMatchRouter>\r\n <a\r\n [routerLink]=\"menuLv4.Url\"\r\n [innerHTML]=\"menuLv4.Name | highlight: searchValue\"\r\n ></a>\r\n </li>\r\n }\r\n }\r\n </ul>\r\n } @else {\r\n <li nz-menu-item nzMatchRouter>\r\n <a [routerLink]=\"menuLv3.Url\" [innerHTML]=\"menuLv3.Name | highlight: searchValue\"></a>\r\n </li>\r\n }\r\n }\r\n </ul>\r\n } @else {\r\n <li nz-menu-item nzMatchRouter>\r\n <a [routerLink]=\"menuLv2.Url\" [innerHTML]=\"menuLv2.Name | highlight: searchValue\"></a>\r\n </li>\r\n }\r\n }\r\n </ul>\r\n } @else {\r\n <li nz-menu-item nzMatchRouter>\r\n <a [routerLink]=\"menuLv1.Url\" [innerHTML]=\"menuLv1.Name | highlight: searchValue\"></a>\r\n </li>\r\n }\r\n }\r\n </ul>\r\n </div>\r\n }\r\n\r\n <nz-input-group [nzSuffix]=\"suffixTemplate\">\r\n <input nz-input placeholder=\"T\u00ECm menu\" [(ngModel)]=\"searchValue\" />\r\n </nz-input-group>\r\n <ng-template #suffixTemplate>\r\n <span class=\"suffix-wrap\">\r\n <icon-delete\r\n class=\"suffix-icon delete\"\r\n [class.show]=\"searchValue\"\r\n [size]=\"14\"\r\n (click)=\"searchValue = ''\"\r\n ></icon-delete>\r\n\r\n <icon-search class=\"suffix-icon search\" [class.show]=\"!searchValue\"></icon-search>\r\n </span>\r\n </ng-template>\r\n </div>\r\n <div class=\"sider-footer\" style=\"height: var(--app-footer-height)\">\r\n <div nz-col nzFlex=\"auto\" class=\"content-footer text-italic\" style=\"font-size: 0.8em; color: lightgray\">\r\n {{ SYSTEM_SUB_NAME_LEFT || \"-- o0o --\" }}\r\n\r\n <span style=\"float: right\" (click)=\"triggerCollapse()\">\r\n <nz-icon class=\"trigger\" [nzType]=\"isCollapsed ? 'menu-unfold' : 'menu-fold'\" />\r\n </span>\r\n </div>\r\n </div>\r\n </nz-sider>\r\n <nz-layout class=\"main-layout\">\r\n <nz-content class=\"content\">\r\n <div class=\"inner-content\">\r\n @if (HEADER_MENU_IN_USE) {\r\n <app-breadcrumb [@fadeInOut] nz-col nzFlex=\"auto\"></app-breadcrumb>\r\n <box [height]=\"8\"></box>\r\n }\r\n <router-outlet></router-outlet>\r\n </div>\r\n <div nz-row class=\"sider-footer\" style=\"height: var(--app-footer-height)\">\r\n <div nz-col nzFlex=\"auto\" class=\"content-footer text-italic\" style=\"font-size: 0.8em; color: lightgray\">\r\n {{ SYSTEM_SUB_NAME_RIGHT || \"-- o0o --\" }}\r\n </div>\r\n </div>\r\n <!-- <nz-back-top [nzTarget]=\"'.content'\" [nzVisibilityHeight]=\"500\"></nz-back-top> -->\r\n </nz-content>\r\n </nz-layout>\r\n </nz-layout>\r\n</nz-layout>\r\n\r\n<nz-drawer\r\n [nzWrapClassName]=\"'same-theme-color menu-drawer'\"\r\n [nzWidth]=\"350\"\r\n [nzClosable]=\"false\"\r\n [(nzVisible)]=\"visibleMenuDrawer\"\r\n [nzMaskClosable]=\"true\"\r\n nzPlacement=\"left\"\r\n nzTitle=\"\"\r\n (nzOnClose)=\"visibleMenuDrawer = false\"\r\n>\r\n <ng-container *nzDrawerContent>\r\n <div class=\"menu-wapper\">\r\n @if (MENU_TYPE == 1) {\r\n <div class=\"nz-tree-wapper in-drawer\">\r\n <nz-tree\r\n [nzData]=\"nodes\"\r\n [nzSearchValue]=\"searchValue\"\r\n [nzShowLine]=\"true\"\r\n [nzSelectedKeys]=\"selectedKeys\"\r\n [nzExpandedKeys]=\"expandedKeys\"\r\n (nzClick)=\"nzEvent($event)\"\r\n ></nz-tree>\r\n </div>\r\n } @else {\r\n <div class=\"nz-tree-wapper in-drawer\">\r\n <ul nz-menu nzTheme=\"light\" nzMode=\"inline\">\r\n @for (menuLv1 of lstMenu; track menuLv1.App_Menu_Id) {\r\n @if (menuLv1.SubMenu) {\r\n <ul nz-submenu [nzOpen]=\"menuLv1.Open\" [nzTitle]=\"menuLv1.Name\" [nzIcon]=\"menuLv1.Icon\">\r\n @for (menuLv2 of menuLv1.SubMenu; track menuLv2.App_Menu_Id) {\r\n @if (menuLv2.SubMenu) {\r\n <ul nz-submenu [nzOpen]=\"menuLv2.Open\" [nzTitle]=\"menuLv2.Name\" [nzIcon]=\"menuLv2.Icon\">\r\n @for (menuLv3 of menuLv2.SubMenu; track menuLv3.App_Menu_Id) {\r\n @if (menuLv3.SubMenu) {\r\n <ul nz-submenu [nzOpen]=\"menuLv3.Open\" [nzTitle]=\"menuLv3.Name\" [nzIcon]=\"menuLv3.Icon\">\r\n @for (menuLv4 of menuLv3.SubMenu; track menuLv4.App_Menu_Id) {\r\n @if (menuLv4.SubMenu) {\r\n <ul\r\n nz-submenu\r\n [nzOpen]=\"menuLv4.Open\"\r\n [nzTitle]=\"menuLv4.Name\"\r\n [nzIcon]=\"menuLv4.Icon\"\r\n >\r\n @for (menuLv5 of menuLv4.SubMenu; track menuLv5.App_Menu_Id) {}\r\n </ul>\r\n } @else {\r\n <li nz-menu-item nzMatchRouter>\r\n <a\r\n [routerLink]=\"menuLv4.Url\"\r\n [innerHTML]=\"menuLv4.Name | highlight: searchValue\"\r\n ></a>\r\n </li>\r\n }\r\n }\r\n </ul>\r\n } @else {\r\n <li nz-menu-item nzMatchRouter>\r\n <a [routerLink]=\"menuLv3.Url\" [innerHTML]=\"menuLv3.Name | highlight: searchValue\"></a>\r\n </li>\r\n }\r\n }\r\n </ul>\r\n } @else {\r\n <li nz-menu-item nzMatchRouter>\r\n <a [routerLink]=\"menuLv2.Url\" [innerHTML]=\"menuLv2.Name | highlight: searchValue\"></a>\r\n </li>\r\n }\r\n }\r\n </ul>\r\n } @else {\r\n <li nz-menu-item nzMatchRouter>\r\n <a [routerLink]=\"menuLv1.Url\" [innerHTML]=\"menuLv1.Name | highlight: searchValue\"></a>\r\n </li>\r\n }\r\n }\r\n </ul>\r\n </div>\r\n }\r\n\r\n <nz-input-group [nzSuffix]=\"suffixTemplate\" [nzAddOnAfter]=\"afterTemplate\">\r\n <input nz-input placeholder=\"T\u00ECm menu\" [(ngModel)]=\"searchValue\" />\r\n </nz-input-group>\r\n <ng-template #suffixTemplate>\r\n <span class=\"suffix-wrap\">\r\n <icon-delete\r\n class=\"suffix-icon delete\"\r\n [class.show]=\"searchValue\"\r\n [size]=\"14\"\r\n (click)=\"searchValue = ''\"\r\n ></icon-delete>\r\n\r\n <icon-search class=\"suffix-icon search\" [class.show]=\"!searchValue\"></icon-search>\r\n </span>\r\n </ng-template>\r\n <ng-template #afterTemplate>\r\n <button nz-button (click)=\"triggerCollapse(); this.visibleMenuDrawer = false\">\r\n <nz-icon *ngIf=\"isCollapsed\" [nzType]=\"isCollapsed ? 'menu-unfold' : 'menu-fold'\" />\r\n </button>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n</nz-drawer>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body,app-root{height:100%;margin:0}.app-layout{display:flex;flex-direction:column;height:100vh}.app-header{position:fixed;top:0;left:0;width:100%;height:var(--app-header-height);background:var(--theme-color);color:var(--theme-text-color);box-shadow:0 1px 4px #00152914;z-index:1000;display:flex;align-items:center;padding:0}.header-content{width:100%}.header-logo{height:var(--app-header-height);text-align:center;color:var(--theme-text-color);transition:width .3s}.body-layout{display:flex;flex:1;margin-top:var(--app-header-height);height:calc(100vh - var(--app-header-height));overflow:hidden}.menu-sidebar{width:256px;background:#f0f2f5;overflow-y:auto;min-height:calc(100vh - var(--app-header-height))}.menu-wapper{min-height:calc(100% - var(--app-footer-height))}.main-layout{display:flex;flex-direction:column;flex:1;overflow:hidden}.content{flex:1;background:#fff;overflow-x:hidden;overflow-y:auto;height:100%}.inner-content{background:#fff;min-height:calc(100% - var(--app-footer-height));padding:8px}.content-footer{background:var(--theme-color);color:var(--theme-text-color);align-items:center;text-align:center}.sider-footer{background:var(--theme-color);color:var(--theme-text-color);align-items:center;text-align:right}.trigger{margin-right:8px}.menu-sidebar .ant-menu-inline .ant-menu-item{margin-top:0;margin-bottom:0}::ng-deep .menu-wapper .anticon-file{display:none}:host ::ng-deep .ant-back-top{right:30px;bottom:40px}::ng-deep .same-theme-color .ant-drawer-content{background:var(--theme-menu-color)}.nz-tree-wapper{height:calc(100vh - var(--app-header-height) - var(--app-footer-height) - 32px);overflow-y:auto}.nz-tree-wapper.in-drawer{height:calc(100vh - 32px);overflow-y:auto}::ng-deep .menu-drawer .ant-drawer-body{padding:0}::ng-deep .breadcrumb-header .ant-breadcrumb-link{color:var(--theme-text-color);cursor:pointer}::ng-deep .breadcrumb-header .ant-breadcrumb-separator{color:var(--theme-text-color)}::ng-deep .header-menu .ant-segmented-item:not(.ant-segmented-item-selected){color:var(--theme-text-color)}::ng-deep .header-menu .ant-segmented-item{border-left:1px solid}::ng-deep .header-menu .ant-segmented-item:last-child{border-right:1px solid}.suffix-wrap{position:relative;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center}.suffix-icon{position:absolute;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .16s ease,transform .18s cubic-bezier(.4,0,.2,1);transform:scale(.6) translate(4px)}.suffix-icon.show{opacity:1;pointer-events:auto;transform:scale(1) translate(0)}.search{color:#00000073}.delete{color:#bfbfbf}.delete.show{animation:popIn .18s ease}@keyframes popIn{0%{transform:scale(.5)}70%{transform:scale(1.15)}to{transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: NzLayoutModule }, { kind: "component", type: i2$4.NzLayoutComponent, selector: "nz-layout", exportAs: ["nzLayout"] }, { kind: "component", type: i2$4.NzHeaderComponent, selector: "nz-header", exportAs: ["nzHeader"] }, { kind: "component", type: i2$4.NzContentComponent, selector: "nz-content", exportAs: ["nzContent"] }, { kind: "component", type: i2$4.NzSiderComponent, selector: "nz-sider", inputs: ["nzWidth", "nzTheme", "nzCollapsedWidth", "nzBreakpoint", "nzZeroTrigger", "nzTrigger", "nzReverseArrow", "nzCollapsible", "nzCollapsed"], outputs: ["nzCollapsedChange"], exportAs: ["nzSider"] }, { 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: NzDropDownModule }, { kind: "directive", type: i4$2.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i4$2.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "component", type: i4$2.NzSubMenuComponent, selector: "[nz-submenu]", inputs: ["nzMenuClassName", "nzPaddingLeft", "nzTitle", "nzIcon", "nzTriggerSubMenuAction", "nzOpen", "nzDisabled", "nzPlacement"], outputs: ["nzOpenChange"], exportAs: ["nzSubmenu"] }, { 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: Breadcrumb, selector: "app-breadcrumb" }, { 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: NzBackTopModule }, { 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: 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: 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: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { kind: "ngmodule", type: NzSegmentedModule }, { kind: "component", type: i14.NzSegmentedComponent, selector: "nz-segmented", inputs: ["nzBlock", "nzDisabled", "nzOptions", "nzSize"], outputs: ["nzValueChange"], exportAs: ["nzSegmented"] }, { kind: "component", type: LayoutUser, selector: "header-user" }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconSearch, selector: "icon-search", inputs: ["size"], outputs: ["click"] }, { kind: "pipe", type: HighlightPipe, name: "highlight" }, { kind: "directive", type: HideIfErrorDirective, selector: "img[hideIfError]" }, { kind: "component", type: NotificationCenterComponent, selector: "app-notification-center" }, { kind: "component", type: HeaderSearchComponent, selector: "header-search", inputs: ["searchValue"], outputs: ["searchValueChange", "onSearch"] }], animations: [fadeInOut] });
|
|
13236
|
+
calculateMenuOverflow() {
|
|
13237
|
+
if (!this.menuContainer || !this.lstHeaderMenu)
|
|
13238
|
+
return;
|
|
13239
|
+
const containerWidth = this.menuContainer.nativeElement.offsetWidth;
|
|
13240
|
+
const availableWidth = containerWidth - 60;
|
|
13241
|
+
let currentWidth = 0;
|
|
13242
|
+
const tempVisible = [];
|
|
13243
|
+
const tempHidden = [];
|
|
13244
|
+
let isOverflowing = false;
|
|
13245
|
+
for (const item of this.lstHeaderMenu) {
|
|
13246
|
+
if (isOverflowing) {
|
|
13247
|
+
tempHidden.push(item);
|
|
13248
|
+
continue;
|
|
13249
|
+
}
|
|
13250
|
+
const estimatedItemWidth = item.Name.length * 8 + 40;
|
|
13251
|
+
if (currentWidth + estimatedItemWidth <= availableWidth) {
|
|
13252
|
+
tempVisible.push(item);
|
|
13253
|
+
currentWidth += estimatedItemWidth;
|
|
13254
|
+
}
|
|
13255
|
+
else {
|
|
13256
|
+
isOverflowing = true;
|
|
13257
|
+
tempHidden.push(item);
|
|
13258
|
+
}
|
|
13259
|
+
}
|
|
13260
|
+
this.visibleMenus = tempVisible;
|
|
13261
|
+
this.hiddenMenus = tempHidden;
|
|
13262
|
+
this.cdr.detectChanges();
|
|
13263
|
+
}
|
|
13264
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: LayoutComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
13265
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: LayoutComponent, isStandalone: true, selector: "layout", viewQueries: [{ propertyName: "menuContainer", first: true, predicate: ["menuContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<nz-layout class=\"app-layout\">\r\n <nz-header class=\"app-header\">\r\n <div nz-row nzAlign=\"middle\" class=\"header-content\">\r\n @if (isCollapsed) {\r\n <div @fadeInOut>\r\n \r\n <button nz-button nzType=\"text\" style=\"color: var(--theme-text-color)\" (click)=\"visibleMenuDrawer = true\">\r\n <nz-icon nzType=\"menu\" nzTheme=\"outline\" />\r\n </button>\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"header-logo\"\r\n [style.width]=\"!isCollapsed ? siderWidthStorage : 'auto'\"\r\n [style.padding-right]=\"!isCollapsed ? '0' : '16px'\"\r\n >\r\n <div nz-flex nzJustify=\"center\" nzGap=\"small\" style=\"line-height: var(--app-header-height)\">\r\n <img\r\n *ngIf=\"logoUrl$ | async as url\"\r\n [src]=\"url\"\r\n style=\"padding: 4px; height: var(--app-header-height)\"\r\n hideIfError\r\n />\r\n @if (SYSTEM_NAME) {\r\n <h2 style=\"color: whitesmoke; margin-bottom: 0\">{{ SYSTEM_NAME }}</h2>\r\n } @else {\r\n -- o0o --\r\n }\r\n </div>\r\n </div>\r\n @if (!HEADER_MENU_IN_USE && !LayoutComponent.noShowBreadcrumb) {\r\n <box [width]=\"8\"></box>\r\n <app-breadcrumb [@fadeInOut] nz-col nzFlex=\"auto\" class=\"breadcrumb-header\"></app-breadcrumb>\r\n }\r\n\r\n @if (HEADER_MENU_IN_USE) {\r\n <div nz-col nzFlex=\"auto\" class=\"header-menu\" style=\"min-width: 0\" #menuContainer>\r\n <ul\r\n nz-menu\r\n nzTheme=\"light\"\r\n nzMode=\"horizontal\"\r\n style=\"display: flex; flex-wrap: nowrap; border-bottom: none; line-height: var(--app-header-height)\"\r\n >\r\n @for (item of visibleMenus; track item) {\r\n <li\r\n nz-menu-item\r\n [nzSelected]=\"this.currentHeaderId === item.App_Menu_Id\"\r\n (click)=\"handleValueChangeHeaderMenu(item)\"\r\n >\r\n {{ item.Name }}\r\n </li>\r\n }\r\n\r\n @if (hiddenMenus.length > 0) {\r\n <li nz-submenu nzTitle=\". . .\" style=\"padding: 0 16px\">\r\n <ul>\r\n @for (item of hiddenMenus; track item) {\r\n <li\r\n nz-menu-item\r\n [nzSelected]=\"this.currentHeaderId === item.App_Menu_Id\"\r\n (click)=\"handleValueChangeHeaderMenu(item)\"\r\n >\r\n {{ item.Name }}\r\n </li>\r\n }\r\n </ul>\r\n </li>\r\n }\r\n </ul>\r\n </div>\r\n }\r\n\r\n <div style=\"display: flex; align-items: center; flex-shrink: 0; gap: 8px; padding-right: 16px\">\r\n <header-search></header-search>\r\n <app-notification-center></app-notification-center>\r\n <header-user></header-user>\r\n </div>\r\n </div>\r\n </nz-header>\r\n <nz-layout class=\"body-layout\">\r\n <nz-sider\r\n *ngIf=\"!LayoutComponent.noShowSideMenu\"\r\n class=\"menu-sidebar\"\r\n nzCollapsible\r\n [nzWidth]=\"siderWidth\"\r\n [nzCollapsedWidth]=\"0\"\r\n [(nzCollapsed)]=\"isCollapsed\"\r\n [nzTrigger]=\"null\"\r\n [nzTheme]=\"'dark'\"\r\n >\r\n <div class=\"menu-wapper\">\r\n @if (MENU_TYPE == 1) {\r\n <div class=\"nz-tree-wapper\">\r\n <nz-tree\r\n [nzData]=\"nodes\"\r\n [nzSearchValue]=\"searchValue\"\r\n [nzShowLine]=\"true\"\r\n [nzSelectedKeys]=\"selectedKeys\"\r\n [nzExpandedKeys]=\"expandedKeys\"\r\n (nzClick)=\"nzEvent($event)\"\r\n ></nz-tree>\r\n </div>\r\n } @else {\r\n <div class=\"nz-tree-wapper\">\r\n <ul nz-menu nzTheme=\"light\" nzMode=\"inline\" [nzInlineCollapsed]=\"isCollapsed\">\r\n @for (menuLv1 of lstMenu; track menuLv1.App_Menu_Id) {\r\n @if (menuLv1.SubMenu?.length) {\r\n <ul nz-submenu [nzOpen]=\"menuLv1.Open\" [nzTitle]=\"menuLv1.Name\" [nzIcon]=\"menuLv1.Icon\">\r\n @for (menuLv2 of menuLv1.SubMenu; track menuLv2.App_Menu_Id) {\r\n @if (menuLv2.SubMenu?.length) {\r\n <ul nz-submenu [nzOpen]=\"menuLv2.Open\" [nzTitle]=\"menuLv2.Name\" [nzIcon]=\"menuLv2.Icon\">\r\n @for (menuLv3 of menuLv2.SubMenu; track menuLv3.App_Menu_Id) {\r\n @if (menuLv3.SubMenu?.length) {\r\n <ul nz-submenu [nzOpen]=\"menuLv3.Open\" [nzTitle]=\"menuLv3.Name\" [nzIcon]=\"menuLv3.Icon\">\r\n @for (menuLv4 of menuLv3.SubMenu; track menuLv4.App_Menu_Id) {\r\n @if (menuLv4.SubMenu?.length) {\r\n <ul\r\n nz-submenu\r\n [nzOpen]=\"menuLv4.Open\"\r\n [nzTitle]=\"menuLv4.Name\"\r\n [nzIcon]=\"menuLv4.Icon\"\r\n >\r\n @for (menuLv5 of menuLv4.SubMenu; track menuLv5.App_Menu_Id) {}\r\n </ul>\r\n } @else {\r\n <li nz-menu-item nzMatchRouter>\r\n <a\r\n [routerLink]=\"(currentHeaderId ? '/' + currentHeaderId : '') + menuLv4.Url\"\r\n [innerHTML]=\"menuLv4.Name | highlight: searchValue\"\r\n ></a>\r\n </li>\r\n }\r\n }\r\n </ul>\r\n } @else {\r\n <li nz-menu-item nzMatchRouter>\r\n <a\r\n [routerLink]=\"(currentHeaderId ? '/' + currentHeaderId : '') + menuLv3.Url\"\r\n [innerHTML]=\"menuLv3.Name | highlight: searchValue\"\r\n ></a>\r\n </li>\r\n }\r\n }\r\n </ul>\r\n } @else {\r\n <li nz-menu-item nzMatchRouter>\r\n <a\r\n [routerLink]=\"(currentHeaderId ? '/' + currentHeaderId : '') + menuLv2.Url\"\r\n [innerHTML]=\"menuLv2.Name | highlight: searchValue\"\r\n ></a>\r\n </li>\r\n }\r\n }\r\n </ul>\r\n } @else {\r\n <li nz-menu-item nzMatchRouter>\r\n <a\r\n [routerLink]=\"(currentHeaderId ? '/' + currentHeaderId : '') + menuLv1.Url\"\r\n [innerHTML]=\"menuLv1.Name | highlight: searchValue\"\r\n ></a>\r\n </li>\r\n }\r\n }\r\n </ul>\r\n </div>\r\n }\r\n\r\n <nz-input-group [nzSuffix]=\"suffixTemplate\">\r\n <input nz-input placeholder=\"T\u00ECm menu\" [(ngModel)]=\"searchValue\" />\r\n </nz-input-group>\r\n <ng-template #suffixTemplate>\r\n <span class=\"suffix-wrap\">\r\n <icon-delete\r\n class=\"suffix-icon delete\"\r\n [class.show]=\"searchValue\"\r\n [size]=\"14\"\r\n (click)=\"searchValue = ''\"\r\n ></icon-delete>\r\n\r\n <icon-search class=\"suffix-icon search\" [class.show]=\"!searchValue\"></icon-search>\r\n </span>\r\n </ng-template>\r\n </div>\r\n <div class=\"sider-footer\" style=\"height: var(--app-footer-height)\">\r\n <div nz-col nzFlex=\"auto\" class=\"content-footer text-italic\" style=\"font-size: 10px; color: lightgray\">\r\n {{ SYSTEM_SUB_NAME_LEFT || \"-- o0o --\" }}\r\n\r\n <span style=\"float: right\" (click)=\"triggerCollapse()\">\r\n <nz-icon class=\"trigger\" [nzType]=\"isCollapsed ? 'menu-unfold' : 'menu-fold'\" nz-tooltip=\"\u1EA8n menu\" />\r\n </span>\r\n </div>\r\n </div>\r\n </nz-sider>\r\n <nz-layout class=\"main-layout\">\r\n <nz-content class=\"content\">\r\n <div class=\"inner-content\">\r\n @if (HEADER_MENU_IN_USE && !LayoutComponent.noShowBreadcrumb) {\r\n <app-breadcrumb [@fadeInOut] nz-col nzFlex=\"auto\"></app-breadcrumb>\r\n <box [height]=\"8\"></box>\r\n }\r\n <router-outlet></router-outlet>\r\n </div>\r\n <div nz-row class=\"sider-footer\" style=\"height: var(--app-footer-height)\">\r\n <div nz-col nzFlex=\"auto\" class=\"content-footer text-italic\" style=\"font-size: 10px; color: lightgray\">\r\n {{ SYSTEM_SUB_NAME_RIGHT || \"-- o0o --\" }}\r\n </div>\r\n </div>\r\n <!-- <nz-back-top [nzTarget]=\"'.content'\" [nzVisibilityHeight]=\"500\"></nz-back-top> -->\r\n </nz-content>\r\n </nz-layout>\r\n </nz-layout>\r\n</nz-layout>\r\n\r\n<nz-drawer\r\n [nzWrapClassName]=\"'same-theme-color menu-drawer'\"\r\n [nzWidth]=\"350\"\r\n [nzClosable]=\"false\"\r\n [(nzVisible)]=\"visibleMenuDrawer\"\r\n [nzMaskClosable]=\"true\"\r\n nzPlacement=\"left\"\r\n nzTitle=\"\"\r\n (nzOnClose)=\"visibleMenuDrawer = false\"\r\n>\r\n <ng-container *nzDrawerContent>\r\n <div class=\"menu-wapper\">\r\n @if (MENU_TYPE == 1) {\r\n <div class=\"nz-tree-wapper in-drawer\">\r\n <nz-tree\r\n [nzData]=\"nodes\"\r\n [nzSearchValue]=\"searchValue\"\r\n [nzShowLine]=\"true\"\r\n [nzSelectedKeys]=\"selectedKeys\"\r\n [nzExpandedKeys]=\"expandedKeys\"\r\n (nzClick)=\"nzEvent($event)\"\r\n ></nz-tree>\r\n </div>\r\n } @else {\r\n <div class=\"nz-tree-wapper in-drawer\">\r\n <ul nz-menu nzTheme=\"light\" nzMode=\"inline\">\r\n @for (menuLv1 of lstMenu; track menuLv1.App_Menu_Id) {\r\n @if (menuLv1.SubMenu?.length) {\r\n <ul nz-submenu [nzOpen]=\"menuLv1.Open\" [nzTitle]=\"menuLv1.Name\" [nzIcon]=\"menuLv1.Icon\">\r\n @for (menuLv2 of menuLv1.SubMenu; track menuLv2.App_Menu_Id) {\r\n @if (menuLv2.SubMenu?.length) {\r\n <ul nz-submenu [nzOpen]=\"menuLv2.Open\" [nzTitle]=\"menuLv2.Name\" [nzIcon]=\"menuLv2.Icon\">\r\n @for (menuLv3 of menuLv2.SubMenu; track menuLv3.App_Menu_Id) {\r\n @if (menuLv3.SubMenu?.length) {\r\n <ul nz-submenu [nzOpen]=\"menuLv3.Open\" [nzTitle]=\"menuLv3.Name\" [nzIcon]=\"menuLv3.Icon\">\r\n @for (menuLv4 of menuLv3.SubMenu; track menuLv4.App_Menu_Id) {\r\n @if (menuLv4.SubMenu?.length) {\r\n <ul\r\n nz-submenu\r\n [nzOpen]=\"menuLv4.Open\"\r\n [nzTitle]=\"menuLv4.Name\"\r\n [nzIcon]=\"menuLv4.Icon\"\r\n >\r\n @for (menuLv5 of menuLv4.SubMenu; track menuLv5.App_Menu_Id) {}\r\n </ul>\r\n } @else {\r\n <li nz-menu-item nzMatchRouter>\r\n <a\r\n [routerLink]=\"(currentHeaderId ? '/' + currentHeaderId : '') + menuLv4.Url\"\r\n [innerHTML]=\"menuLv4.Name | highlight: searchValue\"\r\n ></a>\r\n </li>\r\n }\r\n }\r\n </ul>\r\n } @else {\r\n <li nz-menu-item nzMatchRouter>\r\n <a\r\n [routerLink]=\"(currentHeaderId ? '/' + currentHeaderId : '') + menuLv3.Url\"\r\n [innerHTML]=\"menuLv3.Name | highlight: searchValue\"\r\n ></a>\r\n </li>\r\n }\r\n }\r\n </ul>\r\n } @else {\r\n <li nz-menu-item nzMatchRouter>\r\n <a\r\n [routerLink]=\"(currentHeaderId ? '/' + currentHeaderId : '') + menuLv2.Url\"\r\n [innerHTML]=\"menuLv2.Name | highlight: searchValue\"\r\n ></a>\r\n </li>\r\n }\r\n }\r\n </ul>\r\n } @else {\r\n <li nz-menu-item nzMatchRouter>\r\n <a\r\n [routerLink]=\"(currentHeaderId ? '/' + currentHeaderId : '') + menuLv1.Url\"\r\n [innerHTML]=\"menuLv1.Name | highlight: searchValue\"\r\n ></a>\r\n </li>\r\n }\r\n }\r\n </ul>\r\n </div>\r\n }\r\n\r\n <nz-input-group [nzSuffix]=\"suffixTemplate\" [nzAddOnAfter]=\"afterTemplate\">\r\n <input nz-input placeholder=\"T\u00ECm menu\" [(ngModel)]=\"searchValue\" />\r\n </nz-input-group>\r\n <ng-template #suffixTemplate>\r\n <span class=\"suffix-wrap\">\r\n <icon-delete\r\n class=\"suffix-icon delete\"\r\n [class.show]=\"searchValue\"\r\n [size]=\"14\"\r\n (click)=\"searchValue = ''\"\r\n ></icon-delete>\r\n\r\n <icon-search class=\"suffix-icon search\" [class.show]=\"!searchValue\"></icon-search>\r\n </span>\r\n </ng-template>\r\n <ng-template #afterTemplate>\r\n <button nz-button (click)=\"triggerCollapse(); this.visibleMenuDrawer = false\">\r\n <nz-icon *ngIf=\"isCollapsed\" [nzType]=\"isCollapsed ? 'menu-unfold' : 'menu-fold'\" />\r\n </button>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n</nz-drawer>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body,app-root{height:100%;margin:0}.app-layout{display:flex;flex-direction:column;height:100vh}.app-header{position:fixed;top:0;left:0;width:100%;height:var(--app-header-height);background:var(--theme-color);color:var(--theme-text-color);box-shadow:0 1px 4px #00152914;z-index:1000;display:flex;align-items:center;padding:0}.header-content{width:100%;flex-wrap:nowrap!important}.header-logo{height:var(--app-header-height);text-align:center;color:var(--theme-text-color);transition:width .3s;flex-shrink:0;overflow:hidden}.body-layout{display:flex;flex:1;margin-top:var(--app-header-height);height:calc(100vh - var(--app-header-height));overflow:hidden}.menu-sidebar{width:256px;background:#f0f2f5;overflow-y:auto;min-height:calc(100vh - var(--app-header-height))}.menu-wapper{min-height:calc(100% - var(--app-footer-height))}.main-layout{display:flex;flex-direction:column;flex:1;overflow:hidden}.content{flex:1;background:#fff;overflow-x:hidden;overflow-y:auto;height:100%}.inner-content{background:#fff;min-height:calc(100% - var(--app-footer-height));padding:8px}.content-footer{background:var(--theme-color);color:var(--theme-text-color);align-items:center;text-align:center}.sider-footer{background:var(--theme-color);color:var(--theme-text-color);align-items:center;text-align:right}.trigger{margin-right:8px}.menu-sidebar .ant-menu-inline .ant-menu-item{margin-top:0;margin-bottom:0}::ng-deep .menu-wapper .anticon-file{display:none}:host ::ng-deep .ant-back-top{right:30px;bottom:40px}::ng-deep .same-theme-color .ant-drawer-content{background:var(--theme-menu-color)}.nz-tree-wapper{height:calc(100vh - var(--app-header-height) - var(--app-footer-height) - 32px);overflow-y:auto}.nz-tree-wapper.in-drawer{height:calc(100vh - 32px);overflow-y:auto}::ng-deep .menu-drawer .ant-drawer-body{padding:0}::ng-deep .ant-breadcrumb-link{cursor:pointer}::ng-deep .breadcrumb-header .ant-breadcrumb-link{color:var(--theme-text-color);cursor:pointer}::ng-deep .breadcrumb-header .ant-breadcrumb-separator{color:var(--theme-text-color)}::ng-deep .header-menu .ant-segmented-item:not(.ant-segmented-item-selected){color:var(--theme-text-color)}::ng-deep .header-menu .ant-segmented-item{border-left:1px solid}::ng-deep .header-menu .ant-segmented-item:last-child{border-right:1px solid}.suffix-wrap{position:relative;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center}.suffix-icon{position:absolute;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .16s ease,transform .18s cubic-bezier(.4,0,.2,1);transform:scale(.6) translate(4px)}.suffix-icon.show{opacity:1;pointer-events:auto;transform:scale(1) translate(0)}.search{color:#00000073}.delete{color:#bfbfbf}.delete.show{animation:popIn .18s ease}::ng-deep .header-menu .ant-menu-horizontal{background-color:transparent!important;border-bottom:none!important}::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu{color:var(--theme-text-color)!important;opacity:.85;font-weight:600}::ng-deep .header-menu .ant-menu-submenu-title .anticon{color:var(--theme-text-color)!important}::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item:hover,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu:hover,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item-selected,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu-open,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu-selected{color:var(--theme-text-color)!important;opacity:1;background-color:#ffffff1a!important}::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item:hover:after,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu:hover:after,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item-selected:after,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu-open:after,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu-selected:after{border-bottom-color:#40a9ff!important}@keyframes popIn{0%{transform:scale(.5)}70%{transform:scale(1.15)}to{transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: NzLayoutModule }, { kind: "component", type: i2$4.NzLayoutComponent, selector: "nz-layout", exportAs: ["nzLayout"] }, { kind: "component", type: i2$4.NzHeaderComponent, selector: "nz-header", exportAs: ["nzHeader"] }, { kind: "component", type: i2$4.NzContentComponent, selector: "nz-content", exportAs: ["nzContent"] }, { kind: "component", type: i2$4.NzSiderComponent, selector: "nz-sider", inputs: ["nzWidth", "nzTheme", "nzCollapsedWidth", "nzBreakpoint", "nzZeroTrigger", "nzTrigger", "nzReverseArrow", "nzCollapsible", "nzCollapsed"], outputs: ["nzCollapsedChange"], exportAs: ["nzSider"] }, { 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: NzDropDownModule }, { kind: "directive", type: i4$2.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i4$2.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "component", type: i4$2.NzSubMenuComponent, selector: "[nz-submenu]", inputs: ["nzMenuClassName", "nzPaddingLeft", "nzTitle", "nzIcon", "nzTriggerSubMenuAction", "nzOpen", "nzDisabled", "nzPlacement"], outputs: ["nzOpenChange"], exportAs: ["nzSubmenu"] }, { 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: Breadcrumb, selector: "app-breadcrumb" }, { 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: NzBackTopModule }, { 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: 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: 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: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { kind: "ngmodule", type: NzSegmentedModule }, { kind: "component", type: LayoutUser, selector: "header-user" }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconSearch, selector: "icon-search", inputs: ["size"], outputs: ["click"] }, { kind: "pipe", type: HighlightPipe, name: "highlight" }, { kind: "directive", type: HideIfErrorDirective, selector: "img[hideIfError]" }, { kind: "component", type: NotificationCenterComponent, selector: "app-notification-center" }, { kind: "component", type: HeaderSearchComponent, selector: "header-search", inputs: ["searchValue"], outputs: ["searchValueChange", "onSearch"] }, { 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: NzMenuModule }], animations: [fadeInOut] });
|
|
12836
13266
|
}
|
|
12837
13267
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: LayoutComponent, decorators: [{
|
|
12838
13268
|
type: Component,
|
|
@@ -12863,8 +13293,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
|
|
|
12863
13293
|
HideIfErrorDirective,
|
|
12864
13294
|
NotificationCenterComponent,
|
|
12865
13295
|
HeaderSearchComponent,
|
|
12866
|
-
], animations: [fadeInOut], template: "<nz-layout class=\"app-layout\">\r\n <nz-header class=\"app-header\">\r\n <div nz-row nzAlign=\"middle\" class=\"header-content\">\r\n @if (isCollapsed) {\r\n <div @fadeInOut>\r\n \r\n <button nz-button nzType=\"text\" style=\"color: var(--theme-text-color)\" (click)=\"visibleMenuDrawer = true\">\r\n <nz-icon nzType=\"menu\" nzTheme=\"outline\" />\r\n </button>\r\n </div>\r\n }\r\n\r\n <div class=\"header-logo\" [style.width]=\"!isCollapsed ? siderWidthStorage : '100px'\">\r\n <div nz-flex nzJustify=\"center\" nzGap=\"small\" style=\"line-height: var(--app-header-height)\">\r\n <img\r\n *ngIf=\"logoUrl$ | async as url\"\r\n [src]=\"url\"\r\n height=\"var(--app-header-height)\"\r\n style=\"padding: 4px\"\r\n hideIfError\r\n />\r\n @if (SYSTEM_NAME) {\r\n <h2 style=\"color: whitesmoke; margin-bottom: 0\">{{ SYSTEM_NAME }}</h2>\r\n } @else {\r\n -- o0o --\r\n }\r\n </div>\r\n </div>\r\n @if (!HEADER_MENU_IN_USE) {\r\n <box [width]=\"8\"></box>\r\n <app-breadcrumb [@fadeInOut] nz-col nzFlex=\"auto\" class=\"breadcrumb-header\"></app-breadcrumb>\r\n }\r\n @if (HEADER_MENU_IN_USE) {\r\n <div nz-col nzFlex=\"auto\" class=\"header-menu\">\r\n <div style=\"overflow: auto\">\r\n <nz-segmented\r\n [nzOptions]=\"lstHeaderMenuDisplay\"\r\n [(ngModel)]=\"selectedHeaderMenuDisplay\"\r\n (nzValueChange)=\"handleValueChangeHeaderMenu($event)\"\r\n ></nz-segmented>\r\n </div>\r\n </div>\r\n }\r\n\r\n <header-search></header-search>\r\n <app-notification-center></app-notification-center>\r\n <header-user></header-user>\r\n </div>\r\n </nz-header>\r\n <nz-layout class=\"body-layout\">\r\n <nz-sider\r\n class=\"menu-sidebar\"\r\n nzCollapsible\r\n [nzWidth]=\"siderWidth\"\r\n [nzCollapsedWidth]=\"0\"\r\n [(nzCollapsed)]=\"isCollapsed\"\r\n [nzTrigger]=\"null\"\r\n [nzTheme]=\"'dark'\"\r\n >\r\n <div class=\"menu-wapper\">\r\n @if (MENU_TYPE == 1) {\r\n <div class=\"nz-tree-wapper\">\r\n <nz-tree\r\n [nzData]=\"nodes\"\r\n [nzSearchValue]=\"searchValue\"\r\n [nzShowLine]=\"true\"\r\n [nzSelectedKeys]=\"selectedKeys\"\r\n [nzExpandedKeys]=\"expandedKeys\"\r\n (nzClick)=\"nzEvent($event)\"\r\n ></nz-tree>\r\n </div>\r\n } @else {\r\n <div class=\"nz-tree-wapper\">\r\n <ul nz-menu nzTheme=\"light\" nzMode=\"inline\" [nzInlineCollapsed]=\"isCollapsed\">\r\n @for (menuLv1 of lstMenu; track menuLv1.App_Menu_Id) {\r\n @if (menuLv1.SubMenu?.length) {\r\n <ul nz-submenu [nzOpen]=\"menuLv1.Open\" [nzTitle]=\"menuLv1.Name\" [nzIcon]=\"menuLv1.Icon\">\r\n @for (menuLv2 of menuLv1.SubMenu; track menuLv2.App_Menu_Id) {\r\n @if (menuLv2.SubMenu?.length) {\r\n <ul nz-submenu [nzOpen]=\"menuLv2.Open\" [nzTitle]=\"menuLv2.Name\" [nzIcon]=\"menuLv2.Icon\">\r\n @for (menuLv3 of menuLv2.SubMenu; track menuLv3.App_Menu_Id) {\r\n @if (menuLv3.SubMenu?.length) {\r\n <ul nz-submenu [nzOpen]=\"menuLv3.Open\" [nzTitle]=\"menuLv3.Name\" [nzIcon]=\"menuLv3.Icon\">\r\n @for (menuLv4 of menuLv3.SubMenu; track menuLv4.App_Menu_Id) {\r\n @if (menuLv4.SubMenu?.length) {\r\n <ul\r\n nz-submenu\r\n [nzOpen]=\"menuLv4.Open\"\r\n [nzTitle]=\"menuLv4.Name\"\r\n [nzIcon]=\"menuLv4.Icon\"\r\n >\r\n @for (menuLv5 of menuLv4.SubMenu; track menuLv5.App_Menu_Id) {}\r\n </ul>\r\n } @else {\r\n <li nz-menu-item nzMatchRouter>\r\n <a\r\n [routerLink]=\"menuLv4.Url\"\r\n [innerHTML]=\"menuLv4.Name | highlight: searchValue\"\r\n ></a>\r\n </li>\r\n }\r\n }\r\n </ul>\r\n } @else {\r\n <li nz-menu-item nzMatchRouter>\r\n <a [routerLink]=\"menuLv3.Url\" [innerHTML]=\"menuLv3.Name | highlight: searchValue\"></a>\r\n </li>\r\n }\r\n }\r\n </ul>\r\n } @else {\r\n <li nz-menu-item nzMatchRouter>\r\n <a [routerLink]=\"menuLv2.Url\" [innerHTML]=\"menuLv2.Name | highlight: searchValue\"></a>\r\n </li>\r\n }\r\n }\r\n </ul>\r\n } @else {\r\n <li nz-menu-item nzMatchRouter>\r\n <a [routerLink]=\"menuLv1.Url\" [innerHTML]=\"menuLv1.Name | highlight: searchValue\"></a>\r\n </li>\r\n }\r\n }\r\n </ul>\r\n </div>\r\n }\r\n\r\n <nz-input-group [nzSuffix]=\"suffixTemplate\">\r\n <input nz-input placeholder=\"T\u00ECm menu\" [(ngModel)]=\"searchValue\" />\r\n </nz-input-group>\r\n <ng-template #suffixTemplate>\r\n <span class=\"suffix-wrap\">\r\n <icon-delete\r\n class=\"suffix-icon delete\"\r\n [class.show]=\"searchValue\"\r\n [size]=\"14\"\r\n (click)=\"searchValue = ''\"\r\n ></icon-delete>\r\n\r\n <icon-search class=\"suffix-icon search\" [class.show]=\"!searchValue\"></icon-search>\r\n </span>\r\n </ng-template>\r\n </div>\r\n <div class=\"sider-footer\" style=\"height: var(--app-footer-height)\">\r\n <div nz-col nzFlex=\"auto\" class=\"content-footer text-italic\" style=\"font-size: 0.8em; color: lightgray\">\r\n {{ SYSTEM_SUB_NAME_LEFT || \"-- o0o --\" }}\r\n\r\n <span style=\"float: right\" (click)=\"triggerCollapse()\">\r\n <nz-icon class=\"trigger\" [nzType]=\"isCollapsed ? 'menu-unfold' : 'menu-fold'\" />\r\n </span>\r\n </div>\r\n </div>\r\n </nz-sider>\r\n <nz-layout class=\"main-layout\">\r\n <nz-content class=\"content\">\r\n <div class=\"inner-content\">\r\n @if (HEADER_MENU_IN_USE) {\r\n <app-breadcrumb [@fadeInOut] nz-col nzFlex=\"auto\"></app-breadcrumb>\r\n <box [height]=\"8\"></box>\r\n }\r\n <router-outlet></router-outlet>\r\n </div>\r\n <div nz-row class=\"sider-footer\" style=\"height: var(--app-footer-height)\">\r\n <div nz-col nzFlex=\"auto\" class=\"content-footer text-italic\" style=\"font-size: 0.8em; color: lightgray\">\r\n {{ SYSTEM_SUB_NAME_RIGHT || \"-- o0o --\" }}\r\n </div>\r\n </div>\r\n <!-- <nz-back-top [nzTarget]=\"'.content'\" [nzVisibilityHeight]=\"500\"></nz-back-top> -->\r\n </nz-content>\r\n </nz-layout>\r\n </nz-layout>\r\n</nz-layout>\r\n\r\n<nz-drawer\r\n [nzWrapClassName]=\"'same-theme-color menu-drawer'\"\r\n [nzWidth]=\"350\"\r\n [nzClosable]=\"false\"\r\n [(nzVisible)]=\"visibleMenuDrawer\"\r\n [nzMaskClosable]=\"true\"\r\n nzPlacement=\"left\"\r\n nzTitle=\"\"\r\n (nzOnClose)=\"visibleMenuDrawer = false\"\r\n>\r\n <ng-container *nzDrawerContent>\r\n <div class=\"menu-wapper\">\r\n @if (MENU_TYPE == 1) {\r\n <div class=\"nz-tree-wapper in-drawer\">\r\n <nz-tree\r\n [nzData]=\"nodes\"\r\n [nzSearchValue]=\"searchValue\"\r\n [nzShowLine]=\"true\"\r\n [nzSelectedKeys]=\"selectedKeys\"\r\n [nzExpandedKeys]=\"expandedKeys\"\r\n (nzClick)=\"nzEvent($event)\"\r\n ></nz-tree>\r\n </div>\r\n } @else {\r\n <div class=\"nz-tree-wapper in-drawer\">\r\n <ul nz-menu nzTheme=\"light\" nzMode=\"inline\">\r\n @for (menuLv1 of lstMenu; track menuLv1.App_Menu_Id) {\r\n @if (menuLv1.SubMenu) {\r\n <ul nz-submenu [nzOpen]=\"menuLv1.Open\" [nzTitle]=\"menuLv1.Name\" [nzIcon]=\"menuLv1.Icon\">\r\n @for (menuLv2 of menuLv1.SubMenu; track menuLv2.App_Menu_Id) {\r\n @if (menuLv2.SubMenu) {\r\n <ul nz-submenu [nzOpen]=\"menuLv2.Open\" [nzTitle]=\"menuLv2.Name\" [nzIcon]=\"menuLv2.Icon\">\r\n @for (menuLv3 of menuLv2.SubMenu; track menuLv3.App_Menu_Id) {\r\n @if (menuLv3.SubMenu) {\r\n <ul nz-submenu [nzOpen]=\"menuLv3.Open\" [nzTitle]=\"menuLv3.Name\" [nzIcon]=\"menuLv3.Icon\">\r\n @for (menuLv4 of menuLv3.SubMenu; track menuLv4.App_Menu_Id) {\r\n @if (menuLv4.SubMenu) {\r\n <ul\r\n nz-submenu\r\n [nzOpen]=\"menuLv4.Open\"\r\n [nzTitle]=\"menuLv4.Name\"\r\n [nzIcon]=\"menuLv4.Icon\"\r\n >\r\n @for (menuLv5 of menuLv4.SubMenu; track menuLv5.App_Menu_Id) {}\r\n </ul>\r\n } @else {\r\n <li nz-menu-item nzMatchRouter>\r\n <a\r\n [routerLink]=\"menuLv4.Url\"\r\n [innerHTML]=\"menuLv4.Name | highlight: searchValue\"\r\n ></a>\r\n </li>\r\n }\r\n }\r\n </ul>\r\n } @else {\r\n <li nz-menu-item nzMatchRouter>\r\n <a [routerLink]=\"menuLv3.Url\" [innerHTML]=\"menuLv3.Name | highlight: searchValue\"></a>\r\n </li>\r\n }\r\n }\r\n </ul>\r\n } @else {\r\n <li nz-menu-item nzMatchRouter>\r\n <a [routerLink]=\"menuLv2.Url\" [innerHTML]=\"menuLv2.Name | highlight: searchValue\"></a>\r\n </li>\r\n }\r\n }\r\n </ul>\r\n } @else {\r\n <li nz-menu-item nzMatchRouter>\r\n <a [routerLink]=\"menuLv1.Url\" [innerHTML]=\"menuLv1.Name | highlight: searchValue\"></a>\r\n </li>\r\n }\r\n }\r\n </ul>\r\n </div>\r\n }\r\n\r\n <nz-input-group [nzSuffix]=\"suffixTemplate\" [nzAddOnAfter]=\"afterTemplate\">\r\n <input nz-input placeholder=\"T\u00ECm menu\" [(ngModel)]=\"searchValue\" />\r\n </nz-input-group>\r\n <ng-template #suffixTemplate>\r\n <span class=\"suffix-wrap\">\r\n <icon-delete\r\n class=\"suffix-icon delete\"\r\n [class.show]=\"searchValue\"\r\n [size]=\"14\"\r\n (click)=\"searchValue = ''\"\r\n ></icon-delete>\r\n\r\n <icon-search class=\"suffix-icon search\" [class.show]=\"!searchValue\"></icon-search>\r\n </span>\r\n </ng-template>\r\n <ng-template #afterTemplate>\r\n <button nz-button (click)=\"triggerCollapse(); this.visibleMenuDrawer = false\">\r\n <nz-icon *ngIf=\"isCollapsed\" [nzType]=\"isCollapsed ? 'menu-unfold' : 'menu-fold'\" />\r\n </button>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n</nz-drawer>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body,app-root{height:100%;margin:0}.app-layout{display:flex;flex-direction:column;height:100vh}.app-header{position:fixed;top:0;left:0;width:100%;height:var(--app-header-height);background:var(--theme-color);color:var(--theme-text-color);box-shadow:0 1px 4px #00152914;z-index:1000;display:flex;align-items:center;padding:0}.header-content{width:100%}.header-logo{height:var(--app-header-height);text-align:center;color:var(--theme-text-color);transition:width .3s}.body-layout{display:flex;flex:1;margin-top:var(--app-header-height);height:calc(100vh - var(--app-header-height));overflow:hidden}.menu-sidebar{width:256px;background:#f0f2f5;overflow-y:auto;min-height:calc(100vh - var(--app-header-height))}.menu-wapper{min-height:calc(100% - var(--app-footer-height))}.main-layout{display:flex;flex-direction:column;flex:1;overflow:hidden}.content{flex:1;background:#fff;overflow-x:hidden;overflow-y:auto;height:100%}.inner-content{background:#fff;min-height:calc(100% - var(--app-footer-height));padding:8px}.content-footer{background:var(--theme-color);color:var(--theme-text-color);align-items:center;text-align:center}.sider-footer{background:var(--theme-color);color:var(--theme-text-color);align-items:center;text-align:right}.trigger{margin-right:8px}.menu-sidebar .ant-menu-inline .ant-menu-item{margin-top:0;margin-bottom:0}::ng-deep .menu-wapper .anticon-file{display:none}:host ::ng-deep .ant-back-top{right:30px;bottom:40px}::ng-deep .same-theme-color .ant-drawer-content{background:var(--theme-menu-color)}.nz-tree-wapper{height:calc(100vh - var(--app-header-height) - var(--app-footer-height) - 32px);overflow-y:auto}.nz-tree-wapper.in-drawer{height:calc(100vh - 32px);overflow-y:auto}::ng-deep .menu-drawer .ant-drawer-body{padding:0}::ng-deep .breadcrumb-header .ant-breadcrumb-link{color:var(--theme-text-color);cursor:pointer}::ng-deep .breadcrumb-header .ant-breadcrumb-separator{color:var(--theme-text-color)}::ng-deep .header-menu .ant-segmented-item:not(.ant-segmented-item-selected){color:var(--theme-text-color)}::ng-deep .header-menu .ant-segmented-item{border-left:1px solid}::ng-deep .header-menu .ant-segmented-item:last-child{border-right:1px solid}.suffix-wrap{position:relative;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center}.suffix-icon{position:absolute;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .16s ease,transform .18s cubic-bezier(.4,0,.2,1);transform:scale(.6) translate(4px)}.suffix-icon.show{opacity:1;pointer-events:auto;transform:scale(1) translate(0)}.search{color:#00000073}.delete{color:#bfbfbf}.delete.show{animation:popIn .18s ease}@keyframes popIn{0%{transform:scale(.5)}70%{transform:scale(1.15)}to{transform:scale(1)}}\n"] }]
|
|
12867
|
-
|
|
13296
|
+
NzToolTipModule,
|
|
13297
|
+
NzMenuModule,
|
|
13298
|
+
], animations: [fadeInOut], template: "<nz-layout class=\"app-layout\">\r\n <nz-header class=\"app-header\">\r\n <div nz-row nzAlign=\"middle\" class=\"header-content\">\r\n @if (isCollapsed) {\r\n <div @fadeInOut>\r\n \r\n <button nz-button nzType=\"text\" style=\"color: var(--theme-text-color)\" (click)=\"visibleMenuDrawer = true\">\r\n <nz-icon nzType=\"menu\" nzTheme=\"outline\" />\r\n </button>\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"header-logo\"\r\n [style.width]=\"!isCollapsed ? siderWidthStorage : 'auto'\"\r\n [style.padding-right]=\"!isCollapsed ? '0' : '16px'\"\r\n >\r\n <div nz-flex nzJustify=\"center\" nzGap=\"small\" style=\"line-height: var(--app-header-height)\">\r\n <img\r\n *ngIf=\"logoUrl$ | async as url\"\r\n [src]=\"url\"\r\n style=\"padding: 4px; height: var(--app-header-height)\"\r\n hideIfError\r\n />\r\n @if (SYSTEM_NAME) {\r\n <h2 style=\"color: whitesmoke; margin-bottom: 0\">{{ SYSTEM_NAME }}</h2>\r\n } @else {\r\n -- o0o --\r\n }\r\n </div>\r\n </div>\r\n @if (!HEADER_MENU_IN_USE && !LayoutComponent.noShowBreadcrumb) {\r\n <box [width]=\"8\"></box>\r\n <app-breadcrumb [@fadeInOut] nz-col nzFlex=\"auto\" class=\"breadcrumb-header\"></app-breadcrumb>\r\n }\r\n\r\n @if (HEADER_MENU_IN_USE) {\r\n <div nz-col nzFlex=\"auto\" class=\"header-menu\" style=\"min-width: 0\" #menuContainer>\r\n <ul\r\n nz-menu\r\n nzTheme=\"light\"\r\n nzMode=\"horizontal\"\r\n style=\"display: flex; flex-wrap: nowrap; border-bottom: none; line-height: var(--app-header-height)\"\r\n >\r\n @for (item of visibleMenus; track item) {\r\n <li\r\n nz-menu-item\r\n [nzSelected]=\"this.currentHeaderId === item.App_Menu_Id\"\r\n (click)=\"handleValueChangeHeaderMenu(item)\"\r\n >\r\n {{ item.Name }}\r\n </li>\r\n }\r\n\r\n @if (hiddenMenus.length > 0) {\r\n <li nz-submenu nzTitle=\". . .\" style=\"padding: 0 16px\">\r\n <ul>\r\n @for (item of hiddenMenus; track item) {\r\n <li\r\n nz-menu-item\r\n [nzSelected]=\"this.currentHeaderId === item.App_Menu_Id\"\r\n (click)=\"handleValueChangeHeaderMenu(item)\"\r\n >\r\n {{ item.Name }}\r\n </li>\r\n }\r\n </ul>\r\n </li>\r\n }\r\n </ul>\r\n </div>\r\n }\r\n\r\n <div style=\"display: flex; align-items: center; flex-shrink: 0; gap: 8px; padding-right: 16px\">\r\n <header-search></header-search>\r\n <app-notification-center></app-notification-center>\r\n <header-user></header-user>\r\n </div>\r\n </div>\r\n </nz-header>\r\n <nz-layout class=\"body-layout\">\r\n <nz-sider\r\n *ngIf=\"!LayoutComponent.noShowSideMenu\"\r\n class=\"menu-sidebar\"\r\n nzCollapsible\r\n [nzWidth]=\"siderWidth\"\r\n [nzCollapsedWidth]=\"0\"\r\n [(nzCollapsed)]=\"isCollapsed\"\r\n [nzTrigger]=\"null\"\r\n [nzTheme]=\"'dark'\"\r\n >\r\n <div class=\"menu-wapper\">\r\n @if (MENU_TYPE == 1) {\r\n <div class=\"nz-tree-wapper\">\r\n <nz-tree\r\n [nzData]=\"nodes\"\r\n [nzSearchValue]=\"searchValue\"\r\n [nzShowLine]=\"true\"\r\n [nzSelectedKeys]=\"selectedKeys\"\r\n [nzExpandedKeys]=\"expandedKeys\"\r\n (nzClick)=\"nzEvent($event)\"\r\n ></nz-tree>\r\n </div>\r\n } @else {\r\n <div class=\"nz-tree-wapper\">\r\n <ul nz-menu nzTheme=\"light\" nzMode=\"inline\" [nzInlineCollapsed]=\"isCollapsed\">\r\n @for (menuLv1 of lstMenu; track menuLv1.App_Menu_Id) {\r\n @if (menuLv1.SubMenu?.length) {\r\n <ul nz-submenu [nzOpen]=\"menuLv1.Open\" [nzTitle]=\"menuLv1.Name\" [nzIcon]=\"menuLv1.Icon\">\r\n @for (menuLv2 of menuLv1.SubMenu; track menuLv2.App_Menu_Id) {\r\n @if (menuLv2.SubMenu?.length) {\r\n <ul nz-submenu [nzOpen]=\"menuLv2.Open\" [nzTitle]=\"menuLv2.Name\" [nzIcon]=\"menuLv2.Icon\">\r\n @for (menuLv3 of menuLv2.SubMenu; track menuLv3.App_Menu_Id) {\r\n @if (menuLv3.SubMenu?.length) {\r\n <ul nz-submenu [nzOpen]=\"menuLv3.Open\" [nzTitle]=\"menuLv3.Name\" [nzIcon]=\"menuLv3.Icon\">\r\n @for (menuLv4 of menuLv3.SubMenu; track menuLv4.App_Menu_Id) {\r\n @if (menuLv4.SubMenu?.length) {\r\n <ul\r\n nz-submenu\r\n [nzOpen]=\"menuLv4.Open\"\r\n [nzTitle]=\"menuLv4.Name\"\r\n [nzIcon]=\"menuLv4.Icon\"\r\n >\r\n @for (menuLv5 of menuLv4.SubMenu; track menuLv5.App_Menu_Id) {}\r\n </ul>\r\n } @else {\r\n <li nz-menu-item nzMatchRouter>\r\n <a\r\n [routerLink]=\"(currentHeaderId ? '/' + currentHeaderId : '') + menuLv4.Url\"\r\n [innerHTML]=\"menuLv4.Name | highlight: searchValue\"\r\n ></a>\r\n </li>\r\n }\r\n }\r\n </ul>\r\n } @else {\r\n <li nz-menu-item nzMatchRouter>\r\n <a\r\n [routerLink]=\"(currentHeaderId ? '/' + currentHeaderId : '') + menuLv3.Url\"\r\n [innerHTML]=\"menuLv3.Name | highlight: searchValue\"\r\n ></a>\r\n </li>\r\n }\r\n }\r\n </ul>\r\n } @else {\r\n <li nz-menu-item nzMatchRouter>\r\n <a\r\n [routerLink]=\"(currentHeaderId ? '/' + currentHeaderId : '') + menuLv2.Url\"\r\n [innerHTML]=\"menuLv2.Name | highlight: searchValue\"\r\n ></a>\r\n </li>\r\n }\r\n }\r\n </ul>\r\n } @else {\r\n <li nz-menu-item nzMatchRouter>\r\n <a\r\n [routerLink]=\"(currentHeaderId ? '/' + currentHeaderId : '') + menuLv1.Url\"\r\n [innerHTML]=\"menuLv1.Name | highlight: searchValue\"\r\n ></a>\r\n </li>\r\n }\r\n }\r\n </ul>\r\n </div>\r\n }\r\n\r\n <nz-input-group [nzSuffix]=\"suffixTemplate\">\r\n <input nz-input placeholder=\"T\u00ECm menu\" [(ngModel)]=\"searchValue\" />\r\n </nz-input-group>\r\n <ng-template #suffixTemplate>\r\n <span class=\"suffix-wrap\">\r\n <icon-delete\r\n class=\"suffix-icon delete\"\r\n [class.show]=\"searchValue\"\r\n [size]=\"14\"\r\n (click)=\"searchValue = ''\"\r\n ></icon-delete>\r\n\r\n <icon-search class=\"suffix-icon search\" [class.show]=\"!searchValue\"></icon-search>\r\n </span>\r\n </ng-template>\r\n </div>\r\n <div class=\"sider-footer\" style=\"height: var(--app-footer-height)\">\r\n <div nz-col nzFlex=\"auto\" class=\"content-footer text-italic\" style=\"font-size: 10px; color: lightgray\">\r\n {{ SYSTEM_SUB_NAME_LEFT || \"-- o0o --\" }}\r\n\r\n <span style=\"float: right\" (click)=\"triggerCollapse()\">\r\n <nz-icon class=\"trigger\" [nzType]=\"isCollapsed ? 'menu-unfold' : 'menu-fold'\" nz-tooltip=\"\u1EA8n menu\" />\r\n </span>\r\n </div>\r\n </div>\r\n </nz-sider>\r\n <nz-layout class=\"main-layout\">\r\n <nz-content class=\"content\">\r\n <div class=\"inner-content\">\r\n @if (HEADER_MENU_IN_USE && !LayoutComponent.noShowBreadcrumb) {\r\n <app-breadcrumb [@fadeInOut] nz-col nzFlex=\"auto\"></app-breadcrumb>\r\n <box [height]=\"8\"></box>\r\n }\r\n <router-outlet></router-outlet>\r\n </div>\r\n <div nz-row class=\"sider-footer\" style=\"height: var(--app-footer-height)\">\r\n <div nz-col nzFlex=\"auto\" class=\"content-footer text-italic\" style=\"font-size: 10px; color: lightgray\">\r\n {{ SYSTEM_SUB_NAME_RIGHT || \"-- o0o --\" }}\r\n </div>\r\n </div>\r\n <!-- <nz-back-top [nzTarget]=\"'.content'\" [nzVisibilityHeight]=\"500\"></nz-back-top> -->\r\n </nz-content>\r\n </nz-layout>\r\n </nz-layout>\r\n</nz-layout>\r\n\r\n<nz-drawer\r\n [nzWrapClassName]=\"'same-theme-color menu-drawer'\"\r\n [nzWidth]=\"350\"\r\n [nzClosable]=\"false\"\r\n [(nzVisible)]=\"visibleMenuDrawer\"\r\n [nzMaskClosable]=\"true\"\r\n nzPlacement=\"left\"\r\n nzTitle=\"\"\r\n (nzOnClose)=\"visibleMenuDrawer = false\"\r\n>\r\n <ng-container *nzDrawerContent>\r\n <div class=\"menu-wapper\">\r\n @if (MENU_TYPE == 1) {\r\n <div class=\"nz-tree-wapper in-drawer\">\r\n <nz-tree\r\n [nzData]=\"nodes\"\r\n [nzSearchValue]=\"searchValue\"\r\n [nzShowLine]=\"true\"\r\n [nzSelectedKeys]=\"selectedKeys\"\r\n [nzExpandedKeys]=\"expandedKeys\"\r\n (nzClick)=\"nzEvent($event)\"\r\n ></nz-tree>\r\n </div>\r\n } @else {\r\n <div class=\"nz-tree-wapper in-drawer\">\r\n <ul nz-menu nzTheme=\"light\" nzMode=\"inline\">\r\n @for (menuLv1 of lstMenu; track menuLv1.App_Menu_Id) {\r\n @if (menuLv1.SubMenu?.length) {\r\n <ul nz-submenu [nzOpen]=\"menuLv1.Open\" [nzTitle]=\"menuLv1.Name\" [nzIcon]=\"menuLv1.Icon\">\r\n @for (menuLv2 of menuLv1.SubMenu; track menuLv2.App_Menu_Id) {\r\n @if (menuLv2.SubMenu?.length) {\r\n <ul nz-submenu [nzOpen]=\"menuLv2.Open\" [nzTitle]=\"menuLv2.Name\" [nzIcon]=\"menuLv2.Icon\">\r\n @for (menuLv3 of menuLv2.SubMenu; track menuLv3.App_Menu_Id) {\r\n @if (menuLv3.SubMenu?.length) {\r\n <ul nz-submenu [nzOpen]=\"menuLv3.Open\" [nzTitle]=\"menuLv3.Name\" [nzIcon]=\"menuLv3.Icon\">\r\n @for (menuLv4 of menuLv3.SubMenu; track menuLv4.App_Menu_Id) {\r\n @if (menuLv4.SubMenu?.length) {\r\n <ul\r\n nz-submenu\r\n [nzOpen]=\"menuLv4.Open\"\r\n [nzTitle]=\"menuLv4.Name\"\r\n [nzIcon]=\"menuLv4.Icon\"\r\n >\r\n @for (menuLv5 of menuLv4.SubMenu; track menuLv5.App_Menu_Id) {}\r\n </ul>\r\n } @else {\r\n <li nz-menu-item nzMatchRouter>\r\n <a\r\n [routerLink]=\"(currentHeaderId ? '/' + currentHeaderId : '') + menuLv4.Url\"\r\n [innerHTML]=\"menuLv4.Name | highlight: searchValue\"\r\n ></a>\r\n </li>\r\n }\r\n }\r\n </ul>\r\n } @else {\r\n <li nz-menu-item nzMatchRouter>\r\n <a\r\n [routerLink]=\"(currentHeaderId ? '/' + currentHeaderId : '') + menuLv3.Url\"\r\n [innerHTML]=\"menuLv3.Name | highlight: searchValue\"\r\n ></a>\r\n </li>\r\n }\r\n }\r\n </ul>\r\n } @else {\r\n <li nz-menu-item nzMatchRouter>\r\n <a\r\n [routerLink]=\"(currentHeaderId ? '/' + currentHeaderId : '') + menuLv2.Url\"\r\n [innerHTML]=\"menuLv2.Name | highlight: searchValue\"\r\n ></a>\r\n </li>\r\n }\r\n }\r\n </ul>\r\n } @else {\r\n <li nz-menu-item nzMatchRouter>\r\n <a\r\n [routerLink]=\"(currentHeaderId ? '/' + currentHeaderId : '') + menuLv1.Url\"\r\n [innerHTML]=\"menuLv1.Name | highlight: searchValue\"\r\n ></a>\r\n </li>\r\n }\r\n }\r\n </ul>\r\n </div>\r\n }\r\n\r\n <nz-input-group [nzSuffix]=\"suffixTemplate\" [nzAddOnAfter]=\"afterTemplate\">\r\n <input nz-input placeholder=\"T\u00ECm menu\" [(ngModel)]=\"searchValue\" />\r\n </nz-input-group>\r\n <ng-template #suffixTemplate>\r\n <span class=\"suffix-wrap\">\r\n <icon-delete\r\n class=\"suffix-icon delete\"\r\n [class.show]=\"searchValue\"\r\n [size]=\"14\"\r\n (click)=\"searchValue = ''\"\r\n ></icon-delete>\r\n\r\n <icon-search class=\"suffix-icon search\" [class.show]=\"!searchValue\"></icon-search>\r\n </span>\r\n </ng-template>\r\n <ng-template #afterTemplate>\r\n <button nz-button (click)=\"triggerCollapse(); this.visibleMenuDrawer = false\">\r\n <nz-icon *ngIf=\"isCollapsed\" [nzType]=\"isCollapsed ? 'menu-unfold' : 'menu-fold'\" />\r\n </button>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n</nz-drawer>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body,app-root{height:100%;margin:0}.app-layout{display:flex;flex-direction:column;height:100vh}.app-header{position:fixed;top:0;left:0;width:100%;height:var(--app-header-height);background:var(--theme-color);color:var(--theme-text-color);box-shadow:0 1px 4px #00152914;z-index:1000;display:flex;align-items:center;padding:0}.header-content{width:100%;flex-wrap:nowrap!important}.header-logo{height:var(--app-header-height);text-align:center;color:var(--theme-text-color);transition:width .3s;flex-shrink:0;overflow:hidden}.body-layout{display:flex;flex:1;margin-top:var(--app-header-height);height:calc(100vh - var(--app-header-height));overflow:hidden}.menu-sidebar{width:256px;background:#f0f2f5;overflow-y:auto;min-height:calc(100vh - var(--app-header-height))}.menu-wapper{min-height:calc(100% - var(--app-footer-height))}.main-layout{display:flex;flex-direction:column;flex:1;overflow:hidden}.content{flex:1;background:#fff;overflow-x:hidden;overflow-y:auto;height:100%}.inner-content{background:#fff;min-height:calc(100% - var(--app-footer-height));padding:8px}.content-footer{background:var(--theme-color);color:var(--theme-text-color);align-items:center;text-align:center}.sider-footer{background:var(--theme-color);color:var(--theme-text-color);align-items:center;text-align:right}.trigger{margin-right:8px}.menu-sidebar .ant-menu-inline .ant-menu-item{margin-top:0;margin-bottom:0}::ng-deep .menu-wapper .anticon-file{display:none}:host ::ng-deep .ant-back-top{right:30px;bottom:40px}::ng-deep .same-theme-color .ant-drawer-content{background:var(--theme-menu-color)}.nz-tree-wapper{height:calc(100vh - var(--app-header-height) - var(--app-footer-height) - 32px);overflow-y:auto}.nz-tree-wapper.in-drawer{height:calc(100vh - 32px);overflow-y:auto}::ng-deep .menu-drawer .ant-drawer-body{padding:0}::ng-deep .ant-breadcrumb-link{cursor:pointer}::ng-deep .breadcrumb-header .ant-breadcrumb-link{color:var(--theme-text-color);cursor:pointer}::ng-deep .breadcrumb-header .ant-breadcrumb-separator{color:var(--theme-text-color)}::ng-deep .header-menu .ant-segmented-item:not(.ant-segmented-item-selected){color:var(--theme-text-color)}::ng-deep .header-menu .ant-segmented-item{border-left:1px solid}::ng-deep .header-menu .ant-segmented-item:last-child{border-right:1px solid}.suffix-wrap{position:relative;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center}.suffix-icon{position:absolute;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .16s ease,transform .18s cubic-bezier(.4,0,.2,1);transform:scale(.6) translate(4px)}.suffix-icon.show{opacity:1;pointer-events:auto;transform:scale(1) translate(0)}.search{color:#00000073}.delete{color:#bfbfbf}.delete.show{animation:popIn .18s ease}::ng-deep .header-menu .ant-menu-horizontal{background-color:transparent!important;border-bottom:none!important}::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu{color:var(--theme-text-color)!important;opacity:.85;font-weight:600}::ng-deep .header-menu .ant-menu-submenu-title .anticon{color:var(--theme-text-color)!important}::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item:hover,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu:hover,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item-selected,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu-open,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu-selected{color:var(--theme-text-color)!important;opacity:1;background-color:#ffffff1a!important}::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item:hover:after,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu:hover:after,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-item-selected:after,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu-open:after,::ng-deep .header-menu .ant-menu-horizontal>.ant-menu-submenu-selected:after{border-bottom-color:#40a9ff!important}@keyframes popIn{0%{transform:scale(.5)}70%{transform:scale(1.15)}to{transform:scale(1)}}\n"] }]
|
|
13299
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { menuContainer: [{
|
|
13300
|
+
type: ViewChild,
|
|
13301
|
+
args: ['menuContainer']
|
|
13302
|
+
}] } });
|
|
12868
13303
|
|
|
12869
13304
|
class LoginComponent extends BaseComponent {
|
|
12870
13305
|
fb = inject(FormBuilder);
|
|
@@ -12988,5 +13423,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
|
|
|
12988
13423
|
* Generated bundle index. Do not edit.
|
|
12989
13424
|
*/
|
|
12990
13425
|
|
|
12991
|
-
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 };
|
|
13426
|
+
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$1 as DicDomainSelectComponent, DicDomainService, DocTemplate, DoughnutGraphComponent, DownloadHelper, DurationFormatPipe, DynamicBuildFormComponent, 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 };
|
|
12992
13427
|
//# sourceMappingURL=brggroup-share-lib.mjs.map
|