qms-angular 1.1.58 → 1.1.60
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/bundles/qms-angular.umd.js +58 -48
- package/bundles/qms-angular.umd.js.map +1 -1
- package/esm2015/lib/components/related/list-other-related/list-related.component.js +2 -2
- package/esm2015/lib/components/select-access-dialog/model/select-access-config.model.js +2 -1
- package/esm2015/lib/components/select-access-dialog/select-access-dialog.component.js +7 -4
- package/esm2015/lib/components/select-process-data-tree/select-process-data-tree.component.js +11 -6
- package/fesm2015/qms-angular.js +17 -8
- package/fesm2015/qms-angular.js.map +1 -1
- package/lib/components/select-access-dialog/model/select-access-config.model.d.ts +1 -0
- package/package.json +1 -1
- package/qms-angular.metadata.json +1 -1
package/fesm2015/qms-angular.js
CHANGED
|
@@ -6906,7 +6906,7 @@ class RelatedListComponent {
|
|
|
6906
6906
|
RelatedListComponent.decorators = [
|
|
6907
6907
|
{ type: Component, args: [{
|
|
6908
6908
|
selector: 'qms-related-list',
|
|
6909
|
-
template: "<div class=\"container list-related\">\n <div class=\"list-related__title\">\n <strong>{{ title }}</strong>\n </div>\n <div
|
|
6909
|
+
template: "<div class=\"container list-related\">\r\n <div class=\"list-related__title\">\r\n <strong>{{ title }}</strong>\r\n </div>\r\n <div class=\"list-related__body\" *ngFor=\"let item of relatedData; let i = index\">\r\n <div class=\"list-related__body-parent\">\r\n <qms-list-item type=\"image-square\">\r\n <mat-icon type=\"image-square\" leading-icon [svgIcon]=\"getNodeIcon(item)\"></mat-icon>\r\n <div qms-list-header>\r\n <div qms-line (click)=\"onItemClick(item)\" type=\"caption\" *ngIf=\"canShowParent(item)\">\r\n {{ item?.parentName }}\r\n </div>\r\n <div qms-line (click)=\"onItemClick(item)\" type=\"subtitle\">\r\n {{ item.itemName }}\r\n </div>\r\n </div>\r\n <div qms-line *ngIf=\"item.breadcumbs && item.breadcumbs.length\">\r\n <qms-breadcrumb class=\"breadcrumb-container\" type=\"table\" numDisplayItem=\"1\" [nodes]=\"item.breadcumbs\">\r\n </qms-breadcrumb>\r\n </div>\r\n <div qms-line color=\"default-subtitle\" *ngIf=\"item?.displayId\">\r\n <ng-container *ngIf=\"item?.displayId\">\r\n <span>\r\n <mat-icon class=\"material-icons-outlined\"> local_offer </mat-icon>\r\n </span>\r\n ID:\r\n {{ item?.displayId }}\r\n </ng-container>\r\n <ng-container *ngIf=\"item.statusName\">\r\n {{ getItemStatus(item) }}\r\n </ng-container>\r\n </div>\r\n <button qms-btn-icon color=\"light\" mode=\"dark\"\r\n *ngIf=\"!isNotEditedItem && (item.canRemove === undefined || item.canRemove)\" (click)=\"removeItem(i)\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </qms-list-item>\r\n </div>\r\n </div>\r\n</div>",
|
|
6910
6910
|
encapsulation: ViewEncapsulation.None,
|
|
6911
6911
|
styles: [".list-related{font-family:Open Sans;font-style:normal;font-weight:400;color:var(--default-color)}.list-related .list-related__title{font-weight:600;font-size:.875rem;line-height:22px;margin-bottom:1rem}.list-related .list-related__body .list-related__body-parent{min-height:48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ddd}.list-related .list-related__body .list-related__body-parent .qms-list-item{height:unset!important}.list-related .list-related__body .list-related__body-parent .qms-list-item.mat-2-line.image-item{height:auto}.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .qms-list-item-content{margin:0}.list-related .list-related__body .list-related__body-parent .wrap-image.image-square,.list-related .list-related__body .list-related__body-parent .wrap-image.image-square img{background:transparent;margin:auto;height:24px;width:24px}.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .qms-list-text,.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .trailing-box{margin-left:1.5rem;border-bottom:none;padding-bottom:7px;padding-top:7px}.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .qms-list-text .material-icons-outlined,.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .trailing-box .material-icons-outlined{font-size:13px;height:13px;width:13px}.list-related .list-related__body .list-related__body-parent .block{font-weight:400;font-size:1rem;line-height:28px;display:flex;align-items:center}.list-related .list-related__body .list-related__body-parent .block .title{margin-left:1.5rem;padding-top:5px;padding-bottom:5px}.list-related .list-related__body .list-related__body-parent .block .title .caption{color:rgba(0,0,0,.6);font-size:.75rem;line-height:22px}.list-related .list-related__body .list-related__body-parent .block mat-icon{color:rgba(0,0,0,.6);padding:0}.list-related .list-related__body .list-related__body-parent .block button.qms-btn-icon{width:40px;height:40px;line-height:40px}.list-related .list-related__body .list-related__body-child{font-weight:400;font-size:.875rem;line-height:22px}.list-related .list-related__body .list-related__body-child .default{min-height:48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ddd}.list-related .list-related__body .list-related__body-child .default .title{margin-left:3rem}.list-related .list-related__body .list-related__body-child .default .group-button{margin-right:2rem;display:flex}.list-related .list-related__body .remain{font-weight:600;font-size:.875rem;line-height:22px;display:flex;align-items:center;justify-content:space-between;background-color:#fafafa;color:var(--primary);min-height:48px;border-bottom:1px solid #ddd}.list-related .list-related__body .remain .title{margin-left:3rem}.list-related .list-related__body .qms-line{display:flex;align-items:center}.list-related .list-related__body .breadcrumb-container .qms-breadcrumb-item{cursor:inherit;line-height:16px;font-size:.75rem;color:rgba(0,0,0,.6);font-weight:400;line-height:22px;margin:0}.list-related .list-related__body .trailing-box{display:flex;align-items:center}.list-related .list-related__body .trailing-box button{height:24px;width:24px;line-height:24px}.label-green,.label-red,.label-yellow{font-family:Open Sans;font-style:normal;font-weight:600;display:inline-block;text-align:center;margin-left:1rem;width:24px;height:24px;font-size:.75rem;border-radius:1px}.label-red{background-color:var(--secondary);color:#fff}.label-yellow{background-color:var(--risk-yellow);color:rgba(0,0,0,.87)}.label-green{background-color:var(--risk-green);color:#fff}.cursor{cursor:pointer}"]
|
|
6912
6912
|
},] }
|
|
@@ -34763,6 +34763,7 @@ class QMSSelectAccessDialog {
|
|
|
34763
34763
|
this.formatTooltip = null;
|
|
34764
34764
|
this.formatMsgDisable = null;
|
|
34765
34765
|
this.maxWidthNode = 510;
|
|
34766
|
+
this.skipFirstAskingScreen = false;
|
|
34766
34767
|
}
|
|
34767
34768
|
}
|
|
34768
34769
|
|
|
@@ -34914,11 +34915,14 @@ class QMSSelectAccessDialogComponent {
|
|
|
34914
34915
|
}
|
|
34915
34916
|
};
|
|
34916
34917
|
for (let item in this.dialogData) {
|
|
34917
|
-
if (!!this.dialogData[item] && optionObj[item]) {
|
|
34918
|
+
if (!!this.dialogData[item] && optionObj[item] && !this.dialogData.skipFirstAskingScreen) {
|
|
34919
|
+
this.options.push(optionObj[item]);
|
|
34920
|
+
}
|
|
34921
|
+
if (this.dialogData.skipFirstAskingScreen && optionObj[item]) {
|
|
34918
34922
|
this.options.push(optionObj[item]);
|
|
34919
34923
|
}
|
|
34920
34924
|
}
|
|
34921
|
-
if (this.options.length === 1) {
|
|
34925
|
+
if (this.options.length === 1 || this.dialogData.skipFirstAskingScreen) {
|
|
34922
34926
|
this.dialogRef.updateSize(this.dialogData.sizeUpdateDefault);
|
|
34923
34927
|
this.optionSelect.setValue(this.options[0].type);
|
|
34924
34928
|
const event$ = new MatSelectChange(null, this.options[0].type);
|
|
@@ -35315,7 +35319,7 @@ class QMSSelectAccessDialogComponent {
|
|
|
35315
35319
|
QMSSelectAccessDialogComponent.decorators = [
|
|
35316
35320
|
{ type: Component, args: [{
|
|
35317
35321
|
selector: 'qms-select-access-dialog',
|
|
35318
|
-
template: "<div qms-dialog-container-v2 class=\"select-access-dialog-container\">\n <div qms-dialog-header>\n <div class=\"access-dialog-header mb-2\">\n <span class=\"header-title\">{{dialogData.titleDialog || LANG.SELECT_ACCESS}}</span>\n <button matDialogClose class=\"btn-close-dialog\" qms-btn-icon color=\"light\">\n <mat-icon class=\"mat-icons-outlined\">close</mat-icon>\n </button>\n </div>\n </div>\n <div [class.active]=\"optionSelect.value !== null\" qms-dialog-content class=\"qms-dialog-content\">\n <div class=\"access-dialog-wraper\">\n <mat-form-field *ngIf=\"options.length > 1\" qms-form qms-select-input class=\"field-select-option w-100\"\n appearance=\"fill\">\n <mat-label qms-select-input>{{LANG.TYPE}}</mat-label>\n <mat-select (selectionChange)=\"onSelectionTypeChange($event)\" [formControl]=\"optionSelect\" placeholder=\"Select\"\n disableOptionCentering #singleSelect panelClass=\"qms-select-panel\" qms-select>\n\n <mat-option *ngFor=\"let item of options\" [value]=\"item.type\">\n {{ LANG[item.displayName] }}\n </mat-option>\n </mat-select>\n </mat-form-field>\n <div class=\"body-dialog-container\">\n <!-- Person Access -->\n <div class=\"option-selected-content\">\n <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.PERSON\">\n <form *ngIf=\"personForm\" [formGroup]=\"personForm\">\n <mat-dialog-content>\n <div class=\"group-filter-person-option\">\n <mat-form-field *ngIf=\"optionFilterPersonDataGlobal.userGroups.length\" qms-form qms-select-input\n class=\"w-100\" appearance=\"fill\">\n <mat-label qms-select-input>{{LANG.ROLE}}</mat-label>\n <mat-select panelClass=\"qms-select-panel\" qms-select formControlName=\"userGroup\"\n disableOptionCentering>\n <mat-select-trigger>\n {{personForm.controls['userGroup'].value?.name || ''}}\n </mat-select-trigger>\n <mat-option>\n <ngx-mat-select-search formControlName=\"userGroupFilter\" placeholderLabel=\"{{ LANG.ROLE }}\"\n noEntriesFoundLabel=\"\">\n </ngx-mat-select-search>\n </mat-option>\n <mat-option mode=\"dark\" class=\"opt-check-icon\"\n *ngFor=\"let item of filteredSearchTextBox.userGroup.value\" [value]=\"item\">\n <span qms-elipsify position=\"top\" mode=\"dark\" class=\"text-option-content\">{{ item.name }}</span>\n <mat-icon class=\"check-icon\"\n *ngIf=\"personForm.controls['userGroup'].value?.id == item.id\">check</mat-icon>\n </mat-option>\n </mat-select>\n <span [@inOutAnimation] (click)=\"personForm.get('userGroup').setValue('')\" class=\"pointer \"\n matSuffix aria-label=\"Clear\" *ngIf=\"personForm.get('userGroup').value && !getLoading$.value\">\n <mat-icon>close</mat-icon>\n </span>\n </mat-form-field>\n <!-- input field department filter person -->\n <mat-form-field *ngIf=\"optionFilterPersonDataGlobal.departments.length\"\n class=\"w-100 input-select-option\" qms-form qms-select-input>\n <mat-label>{{LANG.DEPARTMENT_UNIT}}</mat-label>\n <mat-select panelClass=\"qms-select-panel\" qms-select disableOptionCentering\n formControlName=\"department\">\n <mat-select-trigger>\n {{personForm.controls['department'].value?.name || ''}}\n </mat-select-trigger>\n <mat-option>\n <ngx-mat-select-search formControlName=\"departmentFilter\"\n [placeholderLabel]=\"LANG.DEPARTMENT_UNIT\" noEntriesFoundLabel=\"\">\n </ngx-mat-select-search>\n </mat-option>\n <mat-option class=\"opt-check-icon\" *ngFor=\"let item of filteredSearchTextBox.department.value\"\n [value]=\"item\">\n <span qms-elipsify mode=\"dark\" position=\"top\" class=\"text-option-content\">{{ item.name }}</span>\n <mat-icon class=\"check-icon\"\n *ngIf=\"personForm.controls['department'].value?.id == item.id\">check</mat-icon>\n </mat-option>\n </mat-select>\n <span (click)=\"setFormControlValue(['recursive','department'], [false,''])\" [@inOutAnimation]\n class=\"pointer\" matSuffix aria-label=\"Clear\"\n *ngIf=\"personForm.get('department').value && !getLoading$.value\">\n <mat-icon>close</mat-icon>\n </span>\n </mat-form-field>\n </div>\n\n <mat-slide-toggle [@inOutAnimation] *ngIf=\"personForm.controls['department'].value\"\n class=\"w-100 slide-toggle\" formControlName=\"recursive\" color=\"default\" qms-group-options>\n <span class=\"text-label\">{{LANG.INCLUDE_SUB_DEPARTMENTS}}</span>\n </mat-slide-toggle>\n\n <mat-form-field class=\"w-100\" appearance=\"fill\" qms-form qms-search-field>\n <input matInput appearance=\"off\" [placeholder]=\"LANG.SEARCH_WITH_NAME\" formControlName=\"keyword\"\n type=\"text\" autocomplete=\"off\" />\n <button *ngIf=\"!getLoading$.value\" qms-btn-icon color=\"light\" [@inOutAnimation]\n (click)=\"onSearchPersonFreeText()\" class=\"pointer me-1\" matSuffix aria-label=\"Search\">\n <mat-icon>search</mat-icon>\n </button>\n <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" matSuffix mode=\"indeterminate\"\n diameter=\"20\"></mat-progress-spinner>\n <span [@inOutAnimation] (click)=\"personForm.get('keyword').setValue('')\"\n class=\"pointer btn-icon-clear d-flex justify-content-center align-items-center \" matSuffix\n aria-label=\"Clear\" *ngIf=\"personForm.get('keyword').value && !getLoading$.value\">\n <button qms-btn-icon color=\"light\">\n <mat-icon>close</mat-icon>\n </button>\n </span>\n </mat-form-field>\n <button (click)=\"onFilterPerson()\" qms-btn-outlined class=\"w-100 my-1\">\n {{LANG.FILTER}}\n </button>\n </mat-dialog-content>\n\n <mat-dialog-content class=\"items-list\">\n <div qms-scrollbar>\n <div class=\"item\">\n <mat-checkbox [@inOutAnimation]\n *ngIf=\"!getLoading$.value && personFiltered.length && !dialogData.modeSelectOnePerson\"\n [disabled]=\"isDisabledSelectAll(OPTION_ENUM.PERSON)\" #checkPerson class=\"w-100 mb-1 checkbox-all\"\n (click)=\"personFiltered.length && onCheckAll(OPTION_ENUM.PERSON,checkPerson)\"\n [checked]=\"isCheckAll(OPTION_ENUM.PERSON)\" [indeterminate]=\"isIndeterminate(OPTION_ENUM.PERSON)\"\n color=\"default\" qms-group-options>\n <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}} </span>\n <span>(<b>{{personFiltered.length}}</b>)</span>\n </mat-checkbox>\n </div>\n <mat-divider class=\"mx-auto\"></mat-divider>\n <ng-container *ngIf=\"getLoading$.value; then loading\">\n </ng-container>\n <div [@inOutAnimation] *ngIf=\"personFiltered.length && !getLoading$.value\" [@listAnimation]\n class=\"item-list-wrapper\">\n <div class=\"item mt-1\" [@inOutAnimation]\n *ngFor=\"let employee of personFiltered; trackBy: trackByFn\">\n <ng-container\n [ngTemplateOutlet]=\"dialogData.modeSelectOnePerson ?itemWithoutCheckboxTemplate : itemCheckboxTemplate\"\n [ngTemplateOutletContext]=\"{item: employee, type: OPTION_ENUM.PERSON}\">\n </ng-container>\n </div>\n </div>\n <div [@inOutAnimation] *ngIf=\"!personFiltered.length && !getLoading$.value\"\n class=\"item-list-wrapper no-result\">\n <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\n </div>\n <mat-divider class=\"mx-auto\"></mat-divider>\n <qms-paginator overlayPanelClass=\"select-access-paginator\" #pagingPerson\n *ngIf=\"getPerson$.value.length > 10\" [length]=\"getPerson$.value.length\" [numHidden]=\"0\"\n [pageSize]=\"getPerson$.value.pageSize\" [pageSizeOptions]=\"PAGE_SIZE_OPTION\"\n (page)='onPaginatorEvent($event, OPTION_ENUM.PERSON)' [size]='PAGINATION_SIZE.medium'>\n </qms-paginator>\n </div>\n </mat-dialog-content>\n </form>\n </ng-container>\n\n <!-- UserGroup Access -->\n <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.USER_GROUP\">\n <div>\n <mat-dialog-content>\n <form (submit)=\"onFilterUserGroup()\">\n <mat-form-field class=\"w-100\" qms-form qms-search-field>\n <input [formControl]=\"userGroupForm\" matInput type=\"text\" autocomplete=\"off\"\n placeholder=\"User group\" />\n <button [@inOutAnimation] *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\"\n matSuffix>\n <mat-icon>search</mat-icon>\n </button>\n <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" matSuffix mode=\"indeterminate\"\n diameter=\"20\"></mat-progress-spinner>\n <div [@inOutAnimation] *ngIf=\"!!userGroupForm.value && !getLoading$.value\" matSuffix\n qms-input-clear>\n <button (click)=\"userGroupForm.setValue('')\" qms-btn-icon color=\"light\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n </mat-form-field>\n </form>\n </mat-dialog-content>\n <mat-dialog-content class=\"items-list\">\n <div qms-scrollbar>\n <div class=\"item\">\n <mat-checkbox [@inOutAnimation]\n *ngIf=\"!getLoading$.value && (userGroupFiltered.length && !dialogData.modeSelectOneUserGroup)\"\n [disabled]=\"isDisabledSelectAll(OPTION_ENUM.USER_GROUP)\" #checkUserGroup\n class=\"w-100 checkbox-all mb-1\" color=\"default\" [checked]=\"isCheckAll(OPTION_ENUM.USER_GROUP)\"\n [indeterminate]=\"isIndeterminate(OPTION_ENUM.USER_GROUP)\"\n (click)=\"userGroupFiltered.length && onCheckAll(OPTION_ENUM.USER_GROUP,checkUserGroup)\"\n qms-group-options>\n <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}</span>\n <span>(<b>{{userGroupFiltered.length}}</b>)</span>\n </mat-checkbox>\n </div>\n <mat-divider class=\"mx-auto\"></mat-divider>\n <ng-container *ngIf=\"getLoading$.value;then loading\">\n </ng-container>\n <div *ngIf=\"userGroupFiltered.length && !getLoading$.value\" [@listAnimation]\n class=\"item-list-wrapper\">\n <div [@inOutAnimation] class=\"item mt-1\" *ngFor=\"let userGroup of userGroupFiltered\">\n <ng-container\n [ngTemplateOutlet]=\"dialogData.modeSelectOneUserGroup ? itemWithoutCheckboxTemplate : itemCheckboxTemplate\"\n [ngTemplateOutletContext]=\"{item: userGroup,type: OPTION_ENUM.USER_GROUP}\">\n </ng-container>\n </div>\n </div>\n <div [@inOutAnimation] *ngIf=\"!userGroupFiltered.length && !getLoading$.value\"\n class=\"item-list-wrapper no-result\">\n <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\n </div>\n <mat-divider class=\"mx-auto\"></mat-divider>\n <qms-paginator overlayPanelClass=\"select-access-paginator\" #pagingUserGroup class=\"my-1\"\n *ngIf=\"getUserGroup$.value.length > 10 \" [length]=\"getUserGroup$.value.length\" [numHidden]=\"0\"\n [pageSize]=\"getUserGroup$.value.pageSize\" [pageSizeOptions]=\"PAGE_SIZE_OPTION\"\n (page)='onPaginatorEvent($event, OPTION_ENUM.USER_GROUP)' [size]='PAGINATION_SIZE.medium'>\n </qms-paginator>\n </div>\n </mat-dialog-content>\n </div>\n </ng-container>\n\n <!-- Department Access -->\n <ng-container\n *ngIf=\"optionSelect.value === OPTION_ENUM.DEPARTMENT && getLoading$.value; then loading\"></ng-container>\n <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.DEPARTMENT && !getLoading$.value\"\n class=\"person-access\">\n <qms-select-department-tree #tree [rowsSkeleton]=\"8\" [config]=\"dialogData.treeDepartmentConfig\"\n [maxWidthNode]=\"dialogData.maxWidthNode\" (onSearchEvent)=\"onSearchDepartmentEvent.emit($event)\"\n (onValueChangeEvent)=\"onResultDepartmentChange($event)\"\n (selectionNodeChangeEvent)=\"onSelectionNodeDepartmentChange($event)\"\n (onPagingSearchEvent)=\"onPaginatorEvent($event, OPTION_ENUM.DEPARTMENT)\">\n </qms-select-department-tree>\n </ng-container>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"optionSelect.value !== null\" class=\"result-wrapper\">\n <div class=\"result-selected-container\">\n <div [@inOutAnimation] *ngIf=\"(options.length === 1) || (options.length > 1 && optionSelect.value !== null)\"\n class=\"header-title result-header\">\n <span>\n {{\n dialogData.titleResult || LANG.RESULTS}}\n <span *ngIf=\"options.length === 1 && hasItemSelected()\">\n ({{getResultTabActive().length}})\n </span>\n </span>\n </div>\n <div class=\"result-body\">\n <!-- Result Person -->\n <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.PERSON)\"\n [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n [ngTemplateOutletContext]=\"{data:resultAccess.persons, type:OPTION_ENUM.PERSON, title:LANG.PERSON}\">\n </ng-container>\n <!-- Result User group -->\n <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.USER_GROUP)\"\n [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n [ngTemplateOutletContext]=\"{data:resultAccess.userGroups, type:OPTION_ENUM.USER_GROUP, title:LANG.USER_GROUP}\">\n </ng-container>\n <!-- Result Department -->\n <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.DEPARTMENT)\"\n [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n [ngTemplateOutletContext]=\"{data: resultAccess.departments, type:OPTION_ENUM.DEPARTMENT, title:LANG.DEPARTMENT}\">\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n <mat-divider class=\"mx-auto\"></mat-divider>\n <div qms-dialog-footer class=\"confirm__button__groups\" [class.none-option]=\"optionSelect.value === null\">\n <button *ngIf=\"optionSelect.value !== null\" [disabled]=\"!hasItemSelected()\" class=\"btn-add\"\n [class.qms-btn-disabled]=\"!hasItemSelected()\" [mat-dialog-close]=\"resultAccess\" qms-btn>\n <span>{{LANG.ADD}}</span>\n </button>\n <button qms-btn-text mat-dialog-close>\n {{LANG.CANCEL}}\n </button>\n </div>\n</div>\n\n<!-- Template -->\n<ng-template #noResult>\n <svg width=\"89\" height=\"130\" viewBox=\"0 0 89 88\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"white\" />\n <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"#0163B2\" fill-opacity=\"0.12\" />\n <path\n d=\"M44.5 56.6936L58.096 64.8996L54.488 49.4336L66.5 39.0276L50.682 37.6856L44.5 23.0996L38.318 37.6856L22.5 39.0276L34.512 49.4336L30.904 64.8996L44.5 56.6936Z\"\n fill=\"#0163B3\" />\n <text x=\"10\" y=\"105\" fill=\"#0163B2\">{{LANG.NO_RESULT}}</text>\n </svg>\n</ng-template>\n\n<!-- Template list chip -->\n<ng-template #listChip let-data=\"data\" let-type=\"type\">\n <mat-chip-list [@inOutAnimation] *ngIf=\"data?.length\" class=\"panel__item qms-scrollbar\">\n <div [@inOutAnimation_2] *ngFor=\"let item of data; let i = index\">\n <mat-chip (click)=\"onScollToNodeTreeDepartment(item)\" [@updateItemAnimation]\n *qmsContentChanges=\"item.children?.length\" class=\"chip-item-result\" qms-chip [removable]=\"true\">\n <span qms-chip-body>\n <span [qms-tool-tip]=\"generateTooltip(item)\" position=\"top\" mode=\"dark\" class=\"text-label\">\n {{item.name}}\n <span *ngIf=\"item.subName\">({{ item.subName }})</span>\n </span>\n <span class=\"chip-item-children__count ms-1\" *ngIf=\"item?.children && item?.isGroup\">\n {{item.children.length}}/{{item.childCount}}\n </span>\n </span>\n <mat-icon *ngIf=\"allowRemove(type, item)\" (click)=\"onRemoveChip(type,item, i)\"\n class=\"remove-chip-icon\">cancel</mat-icon>\n <mat-icon *ngIf=\"!allowRemove(type, item) && dialogData.formatMsgDisable\" position=\"top\" mode=\"dark\"\n [qms-tool-tip]=\"dialogData.formatMsgDisable(item)\" class=\"remove-chip-icon\">info_i</mat-icon>\n </mat-chip>\n </div>\n </mat-chip-list>\n</ng-template>\n\n<!-- Template result with collapse -->\n<ng-template #viewResultCollapse let-title=\"title\" let-data=\"data\" let-type=\"type\">\n <mat-expansion-panel qms-expansion [expanded]=\"optionSelect.value === type\">\n <mat-expansion-panel-header>\n <div class=\"title-content\">\n <div class=\"qms-list-text\">\n <div qms-line color=\"default-subtitle\">{{title}}\n <span class=\"fw-600\">\n ({{data?.length}})\n </span>\n </div>\n </div>\n </div>\n </mat-expansion-panel-header>\n <ng-container [ngTemplateOutlet]=\"listChip\" [ngTemplateOutletContext]=\"{data: data,type: type}\">\n </ng-container>\n </mat-expansion-panel>\n</ng-template>\n\n<!-- Template row without checkbox -->\n<ng-template #itemWithoutCheckboxTemplate let-item=\"item\" let-type=\"type\">\n <div (click)=\"onSelectItem(type,item)\" class=\"item-without-checkbox w-100\" [class.active]=\"item.selected\">\n <div class=\"item-content\">\n <div class=\"text-label\">\n <span class=\"text-label label-item fs-14 \">\n {{ item.name }}\n </span>\n <span *ngIf=\"item.subName\" class=\"ms-1 sub-label\">({{item.subName}})</span>\n </div>\n <small *ngIf=\"item.helpText\" class=\"text-help px-1 fs-12 sub-label\">{{ item.helpText }}</small>\n </div>\n <div class=\"item-state\">\n <mat-icon [@inOutAnimation] *ngIf=\"item.selected\">check</mat-icon>\n </div>\n </div>\n</ng-template>\n\n<!-- Template checkbox -->\n<ng-template #itemCheckboxTemplate let-item=\"item\" let-type=\"type\">\n <mat-checkbox [disabled]=\"!allowRemove(type, item)\" [checked]=\"item.selected\" (click)=\"onSelectItem(type,item)\"\n class=\"w-100\" color=\"default\" qms-group-options>\n <div class=\"text-label\">\n <span class=\"text-label label-item fs-14 \">\n {{ item.name }}\n </span>\n <span *ngIf=\"item.subName\" class=\"ms-1 sub-label\">({{item.subName}})</span>\n </div>\n <small *ngIf=\"item.helpText\" class=\"text-help px-1 fs-12 sub-label\">{{ item.helpText }}</small>\n </mat-checkbox>\n</ng-template>\n\n<!-- Template loading -->\n<ng-template #loading>\n <div class=\"qms-loading-container\">\n <div class=\"qms-loader\" *ngFor=\"let item of arrSkeleton\">\n <div class=\"qms-loader__wrapper\">\n <div class=\"row-loader\">\n </div>\n </div>\n </div>\n </div>\n</ng-template>",
|
|
35322
|
+
template: "<div qms-dialog-container-v2 class=\"select-access-dialog-container\">\n <div qms-dialog-header>\n <div class=\"access-dialog-header mb-2\">\n <span class=\"header-title\">{{dialogData.titleDialog || LANG.SELECT_ACCESS}}</span>\n <button matDialogClose class=\"btn-close-dialog\" qms-btn-icon color=\"light\">\n <mat-icon class=\"mat-icons-outlined\">close</mat-icon>\n </button>\n </div>\n </div>\n <div [class.active]=\"optionSelect.value !== null\" qms-dialog-content class=\"qms-dialog-content\">\n <div class=\"access-dialog-wraper\">\n <mat-form-field *ngIf=\"options.length > 1\" qms-form qms-select-input class=\"field-select-option w-100\"\n appearance=\"fill\">\n <mat-label qms-select-input>{{LANG.TYPE}}</mat-label>\n <mat-select (selectionChange)=\"onSelectionTypeChange($event)\" [formControl]=\"optionSelect\" placeholder=\"Select\"\n disableOptionCentering #singleSelect panelClass=\"qms-select-panel\" qms-select>\n\n <mat-option *ngFor=\"let item of options\" [value]=\"item.type\">\n {{ LANG[item.displayName] }}\n </mat-option>\n </mat-select>\n </mat-form-field>\n <div class=\"body-dialog-container\">\n <!-- Person Access -->\n <div class=\"option-selected-content\">\n <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.PERSON\">\n <form *ngIf=\"personForm\" [formGroup]=\"personForm\">\n <mat-dialog-content>\n <div class=\"group-filter-person-option\">\n <mat-form-field *ngIf=\"optionFilterPersonDataGlobal.userGroups.length\" qms-form qms-select-input\n class=\"w-100\" appearance=\"fill\">\n <mat-label qms-select-input>{{LANG.ROLE}}</mat-label>\n <mat-select panelClass=\"qms-select-panel\" qms-select formControlName=\"userGroup\"\n disableOptionCentering>\n <mat-select-trigger>\n {{personForm.controls['userGroup'].value?.name || ''}}\n </mat-select-trigger>\n <mat-option>\n <ngx-mat-select-search formControlName=\"userGroupFilter\" placeholderLabel=\"{{ LANG.ROLE }}\"\n noEntriesFoundLabel=\"\">\n </ngx-mat-select-search>\n </mat-option>\n <mat-option mode=\"dark\" class=\"opt-check-icon\"\n *ngFor=\"let item of filteredSearchTextBox.userGroup.value\" [value]=\"item\">\n <span qms-elipsify position=\"top\" mode=\"dark\" class=\"text-option-content\">{{ item.name }}</span>\n <mat-icon class=\"check-icon\"\n *ngIf=\"personForm.controls['userGroup'].value?.id == item.id\">check</mat-icon>\n </mat-option>\n </mat-select>\n <span [@inOutAnimation] (click)=\"personForm.get('userGroup').setValue('')\" class=\"pointer \"\n matSuffix aria-label=\"Clear\" *ngIf=\"personForm.get('userGroup').value && !getLoading$.value\">\n <mat-icon>close</mat-icon>\n </span>\n </mat-form-field>\n <!-- input field department filter person -->\n <mat-form-field *ngIf=\"optionFilterPersonDataGlobal.departments.length\"\n class=\"w-100 input-select-option\" qms-form qms-select-input>\n <mat-label>{{LANG.DEPARTMENT_UNIT}}</mat-label>\n <mat-select panelClass=\"qms-select-panel\" qms-select disableOptionCentering\n formControlName=\"department\">\n <mat-select-trigger>\n {{personForm.controls['department'].value?.name || ''}}\n </mat-select-trigger>\n <mat-option>\n <ngx-mat-select-search formControlName=\"departmentFilter\"\n [placeholderLabel]=\"LANG.DEPARTMENT_UNIT\" noEntriesFoundLabel=\"\">\n </ngx-mat-select-search>\n </mat-option>\n <mat-option class=\"opt-check-icon\" *ngFor=\"let item of filteredSearchTextBox.department.value\"\n [value]=\"item\">\n <span qms-elipsify mode=\"dark\" position=\"top\" class=\"text-option-content\">{{ item.name }}</span>\n <mat-icon class=\"check-icon\"\n *ngIf=\"personForm.controls['department'].value?.id == item.id\">check</mat-icon>\n </mat-option>\n </mat-select>\n <span (click)=\"setFormControlValue(['recursive','department'], [false,''])\" [@inOutAnimation]\n class=\"pointer\" matSuffix aria-label=\"Clear\"\n *ngIf=\"personForm.get('department').value && !getLoading$.value\">\n <mat-icon>close</mat-icon>\n </span>\n </mat-form-field>\n </div>\n\n <mat-slide-toggle [@inOutAnimation] *ngIf=\"personForm.controls['department'].value\"\n class=\"w-100 slide-toggle\" formControlName=\"recursive\" color=\"default\" qms-group-options>\n <span class=\"text-label\">{{LANG.INCLUDE_SUB_DEPARTMENTS}}</span>\n </mat-slide-toggle>\n\n <mat-form-field class=\"w-100\" appearance=\"fill\" qms-form qms-search-field>\n <input matInput appearance=\"off\" [placeholder]=\"LANG.SEARCH_WITH_NAME\" formControlName=\"keyword\"\n type=\"text\" autocomplete=\"off\" />\n <button *ngIf=\"!getLoading$.value\" qms-btn-icon color=\"light\" [@inOutAnimation]\n (click)=\"onSearchPersonFreeText()\" class=\"pointer me-1\" matSuffix aria-label=\"Search\">\n <mat-icon>search</mat-icon>\n </button>\n <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" matSuffix mode=\"indeterminate\"\n diameter=\"20\"></mat-progress-spinner>\n <span [@inOutAnimation] (click)=\"personForm.get('keyword').setValue('')\"\n class=\"pointer btn-icon-clear d-flex justify-content-center align-items-center \" matSuffix\n aria-label=\"Clear\" *ngIf=\"personForm.get('keyword').value && !getLoading$.value\">\n <button qms-btn-icon color=\"light\">\n <mat-icon>close</mat-icon>\n </button>\n </span>\n </mat-form-field>\n <button (click)=\"onFilterPerson()\" qms-btn-outlined class=\"w-100 my-1\">\n {{LANG.FILTER}}\n </button>\n </mat-dialog-content>\n\n <mat-dialog-content class=\"items-list\">\n <div qms-scrollbar>\n <div class=\"item\">\n <mat-checkbox [@inOutAnimation]\n *ngIf=\"!getLoading$.value && personFiltered.length && !dialogData.modeSelectOnePerson\"\n [disabled]=\"isDisabledSelectAll(OPTION_ENUM.PERSON)\" #checkPerson class=\"w-100 mb-1 checkbox-all\"\n (click)=\"personFiltered.length && onCheckAll(OPTION_ENUM.PERSON,checkPerson)\"\n [checked]=\"isCheckAll(OPTION_ENUM.PERSON)\" [indeterminate]=\"isIndeterminate(OPTION_ENUM.PERSON)\"\n color=\"default\" qms-group-options>\n <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}} </span>\n <span>(<b>{{personFiltered.length}}</b>)</span>\n </mat-checkbox>\n </div>\n <mat-divider class=\"mx-auto\"></mat-divider>\n <ng-container *ngIf=\"getLoading$.value; then loading\">\n </ng-container>\n <div [@inOutAnimation] *ngIf=\"personFiltered.length && !getLoading$.value\" [@listAnimation]\n class=\"item-list-wrapper\">\n <div class=\"item mt-1\" [@inOutAnimation]\n *ngFor=\"let employee of personFiltered; trackBy: trackByFn\">\n <ng-container\n [ngTemplateOutlet]=\"dialogData.modeSelectOnePerson ?itemWithoutCheckboxTemplate : itemCheckboxTemplate\"\n [ngTemplateOutletContext]=\"{item: employee, type: OPTION_ENUM.PERSON}\">\n </ng-container>\n </div>\n </div>\n <div [@inOutAnimation] *ngIf=\"!personFiltered.length && !getLoading$.value\"\n class=\"item-list-wrapper no-result\">\n <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\n </div>\n <mat-divider class=\"mx-auto\"></mat-divider>\n <qms-paginator overlayPanelClass=\"select-access-paginator\" #pagingPerson\n *ngIf=\"getPerson$.value.length > 10\" [length]=\"getPerson$.value.length\" [numHidden]=\"0\"\n [pageSize]=\"getPerson$.value.pageSize\" [pageSizeOptions]=\"PAGE_SIZE_OPTION\"\n (page)='onPaginatorEvent($event, OPTION_ENUM.PERSON)' [size]='PAGINATION_SIZE.medium'>\n </qms-paginator>\n </div>\n </mat-dialog-content>\n </form>\n </ng-container>\n\n <!-- UserGroup Access -->\n <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.USER_GROUP\">\n <div>\n <mat-dialog-content>\n <form (submit)=\"onFilterUserGroup()\">\n <mat-form-field class=\"w-100\" qms-form qms-search-field>\n <input [formControl]=\"userGroupForm\" matInput type=\"text\" autocomplete=\"off\"\n placeholder=\"User group\" />\n <button [@inOutAnimation] *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\"\n matSuffix>\n <mat-icon>search</mat-icon>\n </button>\n <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" matSuffix mode=\"indeterminate\"\n diameter=\"20\"></mat-progress-spinner>\n <div [@inOutAnimation] *ngIf=\"!!userGroupForm.value && !getLoading$.value\" matSuffix\n qms-input-clear>\n <button (click)=\"userGroupForm.setValue('')\" qms-btn-icon color=\"light\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n </mat-form-field>\n </form>\n </mat-dialog-content>\n <mat-dialog-content class=\"items-list\">\n <div qms-scrollbar>\n <div class=\"item\">\n <mat-checkbox [@inOutAnimation]\n *ngIf=\"!getLoading$.value && (userGroupFiltered.length && !dialogData.modeSelectOneUserGroup)\"\n [disabled]=\"isDisabledSelectAll(OPTION_ENUM.USER_GROUP)\" #checkUserGroup\n class=\"w-100 checkbox-all mb-1\" color=\"default\" [checked]=\"isCheckAll(OPTION_ENUM.USER_GROUP)\"\n [indeterminate]=\"isIndeterminate(OPTION_ENUM.USER_GROUP)\"\n (click)=\"userGroupFiltered.length && onCheckAll(OPTION_ENUM.USER_GROUP,checkUserGroup)\"\n qms-group-options>\n <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}</span>\n <span>(<b>{{userGroupFiltered.length}}</b>)</span>\n </mat-checkbox>\n </div>\n <mat-divider class=\"mx-auto\"></mat-divider>\n <ng-container *ngIf=\"getLoading$.value;then loading\">\n </ng-container>\n <div *ngIf=\"userGroupFiltered.length && !getLoading$.value\" [@listAnimation]\n class=\"item-list-wrapper\">\n <div [@inOutAnimation] class=\"item mt-1\" *ngFor=\"let userGroup of userGroupFiltered\">\n <ng-container\n [ngTemplateOutlet]=\"dialogData.modeSelectOneUserGroup ? itemWithoutCheckboxTemplate : itemCheckboxTemplate\"\n [ngTemplateOutletContext]=\"{item: userGroup,type: OPTION_ENUM.USER_GROUP}\">\n </ng-container>\n </div>\n </div>\n <div [@inOutAnimation] *ngIf=\"!userGroupFiltered.length && !getLoading$.value\"\n class=\"item-list-wrapper no-result\">\n <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\n </div>\n <mat-divider class=\"mx-auto\"></mat-divider>\n <qms-paginator overlayPanelClass=\"select-access-paginator\" #pagingUserGroup class=\"my-1\"\n *ngIf=\"getUserGroup$.value.length > 10 \" [length]=\"getUserGroup$.value.length\" [numHidden]=\"0\"\n [pageSize]=\"getUserGroup$.value.pageSize\" [pageSizeOptions]=\"PAGE_SIZE_OPTION\"\n (page)='onPaginatorEvent($event, OPTION_ENUM.USER_GROUP)' [size]='PAGINATION_SIZE.medium'>\n </qms-paginator>\n </div>\n </mat-dialog-content>\n </div>\n </ng-container>\n\n <!-- Department Access -->\n <ng-container\n *ngIf=\"optionSelect.value === OPTION_ENUM.DEPARTMENT && getLoading$.value; then loading\"></ng-container>\n <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.DEPARTMENT && !getLoading$.value\"\n class=\"person-access\">\n <qms-select-department-tree #tree [rowsSkeleton]=\"8\" [config]=\"dialogData.treeDepartmentConfig\"\n [maxWidthNode]=\"dialogData.maxWidthNode\" (onSearchEvent)=\"onSearchDepartmentEvent.emit($event)\"\n (onValueChangeEvent)=\"onResultDepartmentChange($event)\"\n (selectionNodeChangeEvent)=\"onSelectionNodeDepartmentChange($event)\"\n (onPagingSearchEvent)=\"onPaginatorEvent($event, OPTION_ENUM.DEPARTMENT)\">\n </qms-select-department-tree>\n </ng-container>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"optionSelect.value !== null\" class=\"result-wrapper\">\n <div class=\"result-selected-container\">\n <div [@inOutAnimation] *ngIf=\"(options.length === 1) || (options.length > 1 && optionSelect.value !== null)\"\n class=\"header-title result-header\">\n <span>\n {{\n dialogData.titleResult || LANG.RESULTS}}\n <span *ngIf=\"options.length === 1 && hasItemSelected()\">\n ({{getResultTabActive().length}})\n </span>\n </span>\n </div>\n <div class=\"result-body\">\n <!-- Result Person -->\n <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.PERSON)\"\n [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n [ngTemplateOutletContext]=\"{data:resultAccess.persons, type:OPTION_ENUM.PERSON, title:LANG.PERSON}\">\n </ng-container>\n <!-- Result User group -->\n <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.USER_GROUP)\"\n [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n [ngTemplateOutletContext]=\"{data:resultAccess.userGroups, type:OPTION_ENUM.USER_GROUP, title:LANG.USER_GROUP}\">\n </ng-container>\n <!-- Result Department -->\n <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.DEPARTMENT)\"\n [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n [ngTemplateOutletContext]=\"{data: resultAccess.departments, type:OPTION_ENUM.DEPARTMENT, title:LANG.DEPARTMENT}\">\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n <mat-divider class=\"mx-auto\"></mat-divider>\n <div qms-dialog-footer class=\"confirm__button__groups\" [class.none-option]=\"optionSelect.value === null\">\n <button *ngIf=\"optionSelect.value !== null\"\n [disabled]=\"!hasItemSelected() && !dialogData.treeDepartmentConfig.canAddNullResult\" class=\"btn-add\"\n [class.qms-btn-disabled]=\"!hasItemSelected() && !dialogData.treeDepartmentConfig.canAddNullResult\"\n [mat-dialog-close]=\"resultAccess\" qms-btn>\n <span>{{LANG.ADD}}</span>\n </button>\n <button qms-btn-text mat-dialog-close>\n {{LANG.CANCEL}}\n </button>\n </div>\n</div>\n\n<!-- Template -->\n<ng-template #noResult>\n <svg width=\"89\" height=\"130\" viewBox=\"0 0 89 88\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"white\" />\n <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"#0163B2\" fill-opacity=\"0.12\" />\n <path\n d=\"M44.5 56.6936L58.096 64.8996L54.488 49.4336L66.5 39.0276L50.682 37.6856L44.5 23.0996L38.318 37.6856L22.5 39.0276L34.512 49.4336L30.904 64.8996L44.5 56.6936Z\"\n fill=\"#0163B3\" />\n <text x=\"10\" y=\"105\" fill=\"#0163B2\">{{LANG.NO_RESULT}}</text>\n </svg>\n</ng-template>\n\n<!-- Template list chip -->\n<ng-template #listChip let-data=\"data\" let-type=\"type\">\n <mat-chip-list [@inOutAnimation] *ngIf=\"data?.length\" class=\"panel__item qms-scrollbar\">\n <div [@inOutAnimation_2] *ngFor=\"let item of data; let i = index\">\n <mat-chip (click)=\"onScollToNodeTreeDepartment(item)\" [@updateItemAnimation]\n *qmsContentChanges=\"item.children?.length\" class=\"chip-item-result\" qms-chip [removable]=\"true\">\n <span qms-chip-body>\n <span [qms-tool-tip]=\"generateTooltip(item)\" position=\"top\" mode=\"dark\" class=\"text-label\">\n {{item.name}}\n <span *ngIf=\"item.subName\">({{ item.subName }})</span>\n </span>\n <span class=\"chip-item-children__count ms-1\" *ngIf=\"item?.children && item?.isGroup\">\n {{item.children.length}}/{{item.childCount}}\n </span>\n </span>\n <mat-icon *ngIf=\"allowRemove(type, item)\" (click)=\"onRemoveChip(type,item, i)\"\n class=\"remove-chip-icon\">cancel</mat-icon>\n <mat-icon *ngIf=\"!allowRemove(type, item) && dialogData.formatMsgDisable\" position=\"top\" mode=\"dark\"\n [qms-tool-tip]=\"dialogData.formatMsgDisable(item)\" class=\"remove-chip-icon\">info_i</mat-icon>\n </mat-chip>\n </div>\n </mat-chip-list>\n</ng-template>\n\n<!-- Template result with collapse -->\n<ng-template #viewResultCollapse let-title=\"title\" let-data=\"data\" let-type=\"type\">\n <mat-expansion-panel qms-expansion [expanded]=\"optionSelect.value === type\">\n <mat-expansion-panel-header>\n <div class=\"title-content\">\n <div class=\"qms-list-text\">\n <div qms-line color=\"default-subtitle\">{{title}}\n <span class=\"fw-600\">\n ({{data?.length}})\n </span>\n </div>\n </div>\n </div>\n </mat-expansion-panel-header>\n <ng-container [ngTemplateOutlet]=\"listChip\" [ngTemplateOutletContext]=\"{data: data,type: type}\">\n </ng-container>\n </mat-expansion-panel>\n</ng-template>\n\n<!-- Template row without checkbox -->\n<ng-template #itemWithoutCheckboxTemplate let-item=\"item\" let-type=\"type\">\n <div (click)=\"onSelectItem(type,item)\" class=\"item-without-checkbox w-100\" [class.active]=\"item.selected\">\n <div class=\"item-content\">\n <div class=\"text-label\">\n <span class=\"text-label label-item fs-14 \">\n {{ item.name }}\n </span>\n <span *ngIf=\"item.subName\" class=\"ms-1 sub-label\">({{item.subName}})</span>\n </div>\n <small *ngIf=\"item.helpText\" class=\"text-help px-1 fs-12 sub-label\">{{ item.helpText }}</small>\n </div>\n <div class=\"item-state\">\n <mat-icon [@inOutAnimation] *ngIf=\"item.selected\">check</mat-icon>\n </div>\n </div>\n</ng-template>\n\n<!-- Template checkbox -->\n<ng-template #itemCheckboxTemplate let-item=\"item\" let-type=\"type\">\n <mat-checkbox [disabled]=\"!allowRemove(type, item)\" [checked]=\"item.selected\" (click)=\"onSelectItem(type,item)\"\n class=\"w-100\" color=\"default\" qms-group-options>\n <div class=\"text-label\">\n <span class=\"text-label label-item fs-14 \">\n {{ item.name }}\n </span>\n <span *ngIf=\"item.subName\" class=\"ms-1 sub-label\">({{item.subName}})</span>\n </div>\n <small *ngIf=\"item.helpText\" class=\"text-help px-1 fs-12 sub-label\">{{ item.helpText }}</small>\n </mat-checkbox>\n</ng-template>\n\n<!-- Template loading -->\n<ng-template #loading>\n <div class=\"qms-loading-container\">\n <div class=\"qms-loader\" *ngFor=\"let item of arrSkeleton\">\n <div class=\"qms-loader__wrapper\">\n <div class=\"row-loader\">\n </div>\n </div>\n </div>\n </div>\n</ng-template>",
|
|
35319
35323
|
animations: [SelectAccessAnimationTrigger],
|
|
35320
35324
|
providers: [
|
|
35321
35325
|
{
|
|
@@ -35496,7 +35500,7 @@ class SelectProcessDataTreeComponent {
|
|
|
35496
35500
|
this._handleActiveNodeEvent();
|
|
35497
35501
|
this._handleItemSelectionChanged();
|
|
35498
35502
|
this.getLoading$.pipe(takeUntil(this.ngUnsubscribe), tap(res => {
|
|
35499
|
-
res ? this.formSearchControl.disable() : this.formSearchControl.enable();
|
|
35503
|
+
// res ? this.formSearchControl.disable() : this.formSearchControl.enable();
|
|
35500
35504
|
})).subscribe();
|
|
35501
35505
|
}
|
|
35502
35506
|
set rowsSkeleton(value) {
|
|
@@ -35553,6 +35557,11 @@ class SelectProcessDataTreeComponent {
|
|
|
35553
35557
|
ngOnInit() {
|
|
35554
35558
|
this.isIncludeChildren = this.config.isIncludeChildren;
|
|
35555
35559
|
this._initTreeData();
|
|
35560
|
+
this.formSearchControl.valueChanges.pipe(debounceTime(2000), takeUntil(this.ngUnsubscribe)).subscribe((val) => {
|
|
35561
|
+
if (typeof val === 'string' && val && val.trim().length >= 2) {
|
|
35562
|
+
this.onSearch();
|
|
35563
|
+
}
|
|
35564
|
+
});
|
|
35556
35565
|
if (!this.config.lazy) {
|
|
35557
35566
|
this._handleListSelected();
|
|
35558
35567
|
return;
|
|
@@ -36129,8 +36138,8 @@ class SelectProcessDataTreeComponent {
|
|
|
36129
36138
|
this.getActiveNodeEvent$.next(nodeId);
|
|
36130
36139
|
}
|
|
36131
36140
|
onSearch() {
|
|
36132
|
-
var _a;
|
|
36133
|
-
if (!this.formSearchControl.value || ((_a = this.formSearchControl.value) === null || _a === void 0 ? void 0 : _a.trim()) === '')
|
|
36141
|
+
var _a, _b;
|
|
36142
|
+
if (!this.formSearchControl.value || ((_a = this.formSearchControl.value) === null || _a === void 0 ? void 0 : _a.trim()) === '' || ((_b = this.formSearchControl.value) === null || _b === void 0 ? void 0 : _b.trim().length) < 2)
|
|
36134
36143
|
return;
|
|
36135
36144
|
this.getLoading$.next(true);
|
|
36136
36145
|
this.setIndexView(1);
|
|
@@ -36461,7 +36470,7 @@ class SelectProcessDataTreeComponent {
|
|
|
36461
36470
|
SelectProcessDataTreeComponent.decorators = [
|
|
36462
36471
|
{ type: Component, args: [{
|
|
36463
36472
|
selector: 'qms-select-process-data-tree',
|
|
36464
|
-
template: "<div [ngClass]=\"['qms-select-department-tree-container', (config.customClass || '')]\">\n <div class=\"input-select-department\">\n <form (ngSubmit)=\"!getLoading$.value && onSearch()\" *ngIf=\"config.enableTreeSearch\" class=\"input-field\">\n <mat-form-field class=\"w100\" qms-form qms-search-field>\n <input [formControl]=\"formSearchControl\" type=\"text\" placeholder=\"Search\" matInput />\n <button *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\" matSuffix>\n <mat-icon>search</mat-icon>\n </button>\n <mat-progress-spinner [@inOutAnimation] matSuffix mode=\"indeterminate\" diameter=\"20\"\n *ngIf=\"getLoading$.value\"></mat-progress-spinner>\n <div *ngIf=\"!!formSearchControl.value && !getLoading$.value\" qms-input-clear matSuffix>\n <button qms-btn-icon color=\"light\" [@inOutAnimation] aria-label=\"Clear\" (click)=\"formSearchControl.reset()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n </mat-form-field>\n </form>\n <div [@inOutAnimation] *ngIf=\"(getIndexView$ | async) === 1 && (textSearchSubject$ | async)\"\n class=\"sub-text ms-1 fw500\">\n {{LANG.RESULT_SEARCH_FOR}}<i><b>\"{{textSearchSubject$ | async}}\"</b></i>\n </div>\n <div [class.justify-content-between]=\"config.enableIncludeChild && !config.isSelectOne\"\n class=\"select__toggle-include toggle-include-child my-1 d-flex justify-content-end align-items-center\">\n <mat-slide-toggle *ngIf=\"config.enableIncludeChild && !config.isSelectOne\"\n [disabled]=\"(getIndexView$ | async) === 1 && config.disableToggleIncludeChildWhenChangeView\"\n [(ngModel)]=\"isIncludeChildren\" (ngModelChange)=\"toggleIncludeChildEvent.emit($event)\" color=\"default\"\n qms-group-options>\n <span class=\"text-label\">{{config.selectIncludeLabel || LANG.SELECT_INCLUDE_CHILD}}</span>\n </mat-slide-toggle>\n <button class=\"btn-arrow\" [@inOutAnimation] *ngIf=\"(getIndexView$ | async) === 1 && config.enableTreeSearch\"\n (click)=\"setIndexView(0)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.BACK_TO_TREE\" mode=\"dark\"\n position=\"top\">\n <mat-icon>arrow_back</mat-icon>\n </button>\n <button class=\"btn-arrow\" [@inOutAnimation]\n *ngIf=\"(getIndexView$ | async) === 0 && config.enableTreeSearch && (textSearchSubject$ | async)\"\n (click)=\"setIndexView(1)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.GOTO_SEACH_RESULT\" mode=\"dark\"\n position=\"top\">\n <mat-icon>arrow_forward</mat-icon>\n </button>\n </div>\n </div>\n <div [@inOutAnimation]\n *ngIf=\"(getIndexView$ | async) === 0 && config.modeView === MODE_VIEW_ENUM.ExternalView && !!config.headerName\"\n class=\"header-view-tree\">\n <div class=\"header-view header-title\">\n {{config.headerName.treeName}}\n </div>\n <div class=\"header-view header-title\">\n {{config.headerName.externalName}}\n </div>\n </div>\n <mat-divider class=\"mx-auto\"></mat-divider>\n <div [@animateSlideView]=\"(getIndexView$ | async)\" [ngStyle]=\"{\n minHeight: height\n }\" class=\"tree-department-wrapper\">\n <div *ngIf=\"(getIndexView$ | async) === 0\" class=\"tree-view w100 h100\">\n <div class=\"tree-view-main h100\">\n <div *ngIf=\"!config.isSelectOne && !!treeControl.dataNodes && config.activeSelectAllNode\"\n class=\"checkbox-all-tree\" [class.sticky-position]=\"config.modeView === MODE_VIEW_ENUM.ExternalView\">\n <!-- Checkbox all root node -->\n <mat-checkbox [@inOutAnimation] (click)=\"onCheckAllRootTreeNode()\"\n [indeterminate]=\"isIndeterminateCheckboxAllTree\" [checked]=\"isAllDepartmentSelected\" qms-group-options\n color=\"default\" label=\"none\" class=\"checkbox-all\">\n <span class=\"text-label \">{{LANG.CHOOSE_ALL}}</span>\n <span>(<b>{{treeControl.dataNodes.length}}</b>)</span>\n </mat-checkbox>\n <mat-divider class=\"mx-auto\"></mat-divider>\n </div>\n <cdk-virtual-scroll-viewport *ngIf=\"dataSource.data\" [ngClass]=\"{\n 'has-checkbox-all': !config.isSelectOne && config.modeView === MODE_VIEW_ENUM.Basic,\n 'select-department-tree': true\n }\" [itemSize]=\"ITEM_SIZE\" [ngStyle]=\"{height: height}\">\n <ng-container *cdkVirtualFor=\"let node of dataSource; trackBy: trackBy\">\n <div class=\"qms-tree-node mt-1\" [style.padding-left]=\"node.level * (config.isMobile ? 12 :24) + 'px'\"\n [attr.data-id]=\"node.id\" [id]=\"'mat-node-'+node.id\" [@triggerColor]=\"activeNode == node.id\" [ngClass]=\"{\n 'mat-tree-node-disabled-all': node.disabled,\n 'w-100': config.isSelectOne,\n 'selected-theme': this.checkListSelection.isSelected(node) && config.isSelectOne,\n 'expand-node': treeControl.isExpandable(node) && treeControl.isExpanded(node),\n 'active-external-view': config.modeView === MODE_VIEW_ENUM.ExternalView,\n 'node-loading': node.isLoading\n }\">\n <div class=\"node-expand-area\">\n <button class=\"btn-toggle\" qms-btn-icon color=\"light\" (click)=\"onExpandNode(node)\"\n *ngIf=\"treeControl.isExpandable(node) && !node.isLoading\">\n <mat-icon>\n {{ treeControl.isExpanded(node) ? \"expand_more\" : \"chevron_right\" }}\n </mat-icon>\n </button>\n <ng-container *ngIf=\"node.isLoading; then loadingSpinner\"></ng-container>\n </div>\n <ng-container [ngTemplateOutlet]=\"config.isSelectOne ? nodeWithoutCheckboxTemplate : showCheckboxTemplate\"\n [ngTemplateOutletContext]=\"{ node: node }\"></ng-container>\n <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-view-node\">\n <span class=\"node-external\" qms-elipsify position=\"top\" mode=\"dark\">\n {{node.externalName || ''}}\n </span>\n </div>\n </div>\n </ng-container>\n </cdk-virtual-scroll-viewport>\n <ng-container [@inOutAnimation] *ngIf=\"config.spinnerWhenGetMore && getLoadingMore$| async ;then maskOverlay\">\n </ng-container>\n </div>\n </div>\n <div *ngIf=\"(getIndexView$ | async) === 1\" [ngStyle]=\"{\n height: height\n }\" class=\"qms-view-search-result\">\n <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\"\n class=\"qms-view-search-result__header d-flex align-items-center justify-content-between\">\n <div class=\"header-title\">\n <span qms-elipsify mode=\"dark\" position=\"top\">\n {{config.headerName.resultSearchName}}\n </span>\n </div>\n <div class=\"header-title\">\n <span qms-elipsify mode=\"dark\" position=\"top\">\n {{config.headerName.externalName}}\n </span>\n </div>\n </div>\n <ng-container *ngIf=\"getLoading$.value; then loading\"></ng-container>\n <div class=\"qms-view-search-result__wrapper\"\n [class.active-external]=\"config.modeView === MODE_VIEW_ENUM.ExternalView\"\n *ngIf=\"!!resultSearch.length && !getLoading$.value\">\n <div class=\"\">\n <mat-checkbox [@inOutAnimation]\n [disabled]=\"!resultSearch.length || config.isSelectOne || isDisableChecboxAllSearch()\" #checkAllSearch\n [indeterminate]=\"indeterminateSearchResult\" [checked]=\"isSelectAllResultSearch\" qms-group-options\n color=\"default\" label=\"none\" class=\"checkbox-all\"\n (click)=\"!config.isSelectOne && onSelectAllSearchResult(checkAllSearch.checked)\">\n <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}</span>\n <span>(<b>{{resultSearch.length}}</b>)</span>\n </mat-checkbox>\n </div>\n <div [@inOutAnimation] [@listAnimation]\n [class.active-paging]=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\" class=\"result\">\n <div [qms-tool-tip]=\"!canHandleItemSearchResult(item) ? LANG.ITEM_NOT_MATCH_TO_TREE : ''\" mode=\"dark\"\n position=\"top\" *ngFor=\"let item of resultSearch\"\n (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\n [class.active]=\"checkListSelectionSearch.isSelected(item)\" class=\"result-item user-select-none\" matRipple>\n <mat-checkbox [@inOutAnimation] *ngIf=\"!item.isLoading\" [disabled]=\"item.disabled\"\n (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\n [checked]=\"checkListSelectionSearch.isSelected(item)\" qms-group-options color=\"default\" label=\"none\">\n </mat-checkbox>\n <div *ngIf=\"item.isLoading\" [@inOutAnimation] class=\"position-relative\">\n <ng-container *ngIf=\"item.isLoading; then loadingSpinner\"></ng-container>\n </div>\n <div class=\"result-item__content\">\n <div class=\"item-result-content-wraper\">\n <div class=\"text-gray fw-bold fs-base mb0\">{{item.name}}</div>\n <qms-breadcrumb *ngIf=\"item.location?.length > 1\" [type]=\"config.isMobile ? 'mobile': ''\"\n [numDisplayItem]=\"6\" (onItemClick)=\"$event.stopImmediatePropagation()\" class=\"breadcrumb-container\"\n [nodes]=\"item.location\">\n </qms-breadcrumb>\n <div *ngIf=\"item.location?.length === 1\" class=\"d-flex align-items-center\">\n <span qms-elipsify mode=\"dark\" position=\"top\"\n class=\"item-breadcrumb-disable d-block\">{{item.location[0].name}}</span>\n </div>\n </div>\n <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-name\">\n <span qms-elipsify mode=\"dark\" position=\"top\" class=\"text-gray fs-base mb0\">{{item.externalName}}\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div [@inOutAnimation] *ngIf=\"!resultSearch.length && !getLoading$.value\" class=\"result no-result\">\n <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\n </div>\n <mat-divider *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\"\n class=\"mx-auto\"></mat-divider>\n <qms-paginator #paginatorSearch *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch \"\n [length]=\"searchDepartment$.value.length\" [numHidden]=\"0\" [pageSize]=\"CURRENT_PAGESIZE\"\n [pageSizeOptions]=\"PAGE_SIZE_OPTION\" (page)='onPagingSearchResult($event)'\n [size]='config.isMobile ? PAGINATION_SIZE.small : PAGINATION_SIZE.medium'>\n </qms-paginator>\n </div>\n </div>\n\n <!-- Template for Checkbox -->\n <ng-template #showCheckboxTemplate let-node=\"node\">\n <mat-checkbox [id]=\"'node-'+node.id\" qms-group-options color=\"default\" label=\"none\" class=\"flex-direction-row\"\n [disabled]=\"node.isLoading\" [checked]=\"checkListSelection.isSelected(node)\"\n (click)=\"!node.isLoading && onCheckNode(node)\" [attr.disabled]=\"node.disabled || node.isLoading\">\n <img [title]=\"node.itemIconSvg\" *ngIf=\"node.itemIconSvg\" class=\"material-icons type-icon\"\n [src]=\"node.itemIconSvg\" />\n <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\n class=\"material-icons-outlined type-icon\"></span>\n <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\n node.itemMatIcon }}\n </span>\n <span class=\"text-name cursor-pointer ml5 123\" [ngClass]=\"{ disabled: node.disabled }\">{{ node.name}}\n </span>\n </mat-checkbox>\n </ng-template>\n\n <!-- Template node without checkbox -->\n <ng-template #nodeWithoutCheckboxTemplate let-node=\"node\">\n <div [id]=\"'node-'+node.id\" (click)=\"onCheckNode(node)\" class=\"node-without-checkbox\">\n <div class=\"node-info\">\n <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\n class=\"material-icons-outlined type-icon\"></span>\n <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\n node.itemMatIcon }}\n </span>\n <span class=\"text-name cursor-pointer pl-10 123\" [ngClass]=\"{ disabled: node.disabled }\">{{ node.name }}</span>\n </div>\n <div class=\"node-state\">\n <mat-icon *ngIf=\"checkListSelection.isSelected(node)\">check</mat-icon>\n </div>\n </div>\n </ng-template>\n</div>\n\n<ng-template #noResult>\n <svg width=\"89\" height=\"130\" viewBox=\"0 0 89 88\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"white\" />\n <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"#0163B2\" fill-opacity=\"0.12\" />\n <path\n d=\"M44.5 56.6936L58.096 64.8996L54.488 49.4336L66.5 39.0276L50.682 37.6856L44.5 23.0996L38.318 37.6856L22.5 39.0276L34.512 49.4336L30.904 64.8996L44.5 56.6936Z\"\n fill=\"#0163B3\" />\n <text x=\"10\" y=\"105\" fill=\"#0163B2\">{{LANG.NO_RESULT}}</text>\n </svg>\n</ng-template>\n\n<!-- Template loading -->\n<ng-template #loading>\n <div [ngStyle]=\"{\n 'height': searchDepartment$.value.length ? (config.modeView === MODE_VIEW_ENUM.ExternalView ? 'calc(100% - 90px)' : 'calc(100% - 50px)' ) : height\n }\" class=\"qms-loading-container\">\n <div class=\"qms-loader\" *ngFor=\"let item of arrSkeleton\">\n <div class=\"qms-loader__wrapper\">\n <div class=\"row-loader\">\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<!-- Template mask overlay -->\n<ng-template #maskOverlay>\n <div class=\"mask-overlay\">\n <mat-spinner [diameter]=\"50\" [strokeWidth]=\"5\"></mat-spinner>\n </div>\n</ng-template>\n\n<!-- Loading spinner -->\n<ng-template #loadingSpinner>\n <div class=\"qms-spinner center\">\n <mat-spinner [diameter]=\"20\" [strokeWidth]=\"2\"></mat-spinner>\n </div>\n</ng-template>",
|
|
36473
|
+
template: "<div [ngClass]=\"['qms-select-department-tree-container', (config.customClass || '')]\">\n <div class=\"input-select-department\">\n <form (ngSubmit)=\"!getLoading$.value\" *ngIf=\"config.enableTreeSearch\" class=\"input-field\">\n <mat-form-field class=\"w100\" qms-form qms-search-field>\n <input [formControl]=\"formSearchControl\" type=\"text\" placeholder=\"{{ LANG.SEARCH }}\" matInput />\n <button *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\" matSuffix>\n <mat-icon>search</mat-icon>\n </button>\n <mat-progress-spinner [@inOutAnimation] matSuffix mode=\"indeterminate\" diameter=\"20\"\n *ngIf=\"getLoading$.value\"></mat-progress-spinner>\n <div *ngIf=\"!!formSearchControl.value && !getLoading$.value\" qms-input-clear matSuffix>\n <button qms-btn-icon color=\"light\" [@inOutAnimation] aria-label=\"Clear\" (click)=\"formSearchControl.reset()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n </mat-form-field>\n </form>\n <div [@inOutAnimation] *ngIf=\"(getIndexView$ | async) === 1 && (textSearchSubject$ | async)\"\n class=\"sub-text ms-1 fw500\">\n {{LANG.RESULT_SEARCH_FOR}}<i><b>\"{{textSearchSubject$ | async}}\"</b></i>\n </div>\n <div [class.justify-content-between]=\"config.enableIncludeChild && !config.isSelectOne\"\n class=\"select__toggle-include toggle-include-child my-1 d-flex justify-content-end align-items-center\">\n <mat-slide-toggle *ngIf=\"config.enableIncludeChild && !config.isSelectOne\"\n [disabled]=\"(getIndexView$ | async) === 1 && config.disableToggleIncludeChildWhenChangeView\"\n [(ngModel)]=\"isIncludeChildren\" (ngModelChange)=\"toggleIncludeChildEvent.emit($event)\" color=\"default\"\n qms-group-options>\n <span class=\"text-label\">{{config.selectIncludeLabel || LANG.SELECT_INCLUDE_CHILD}}</span>\n </mat-slide-toggle>\n <button class=\"btn-arrow\" [@inOutAnimation] *ngIf=\"(getIndexView$ | async) === 1 && config.enableTreeSearch\"\n (click)=\"setIndexView(0)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.BACK_TO_TREE\" mode=\"dark\"\n position=\"top\">\n <mat-icon>arrow_back</mat-icon>\n </button>\n <button class=\"btn-arrow\" [@inOutAnimation]\n *ngIf=\"(getIndexView$ | async) === 0 && config.enableTreeSearch && (textSearchSubject$ | async)\"\n (click)=\"setIndexView(1)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.GOTO_SEACH_RESULT\" mode=\"dark\"\n position=\"top\">\n <mat-icon>arrow_forward</mat-icon>\n </button>\n </div>\n </div>\n <div [@inOutAnimation]\n *ngIf=\"(getIndexView$ | async) === 0 && config.modeView === MODE_VIEW_ENUM.ExternalView && !!config.headerName\"\n class=\"header-view-tree\">\n <div class=\"header-view header-title\">\n {{config.headerName.treeName}}\n </div>\n <div class=\"header-view header-title\">\n {{config.headerName.externalName}}\n </div>\n </div>\n <mat-divider class=\"mx-auto\"></mat-divider>\n <div [@animateSlideView]=\"(getIndexView$ | async)\" [ngStyle]=\"{\n minHeight: height\n }\" class=\"tree-department-wrapper\">\n <div *ngIf=\"(getIndexView$ | async) === 0\" class=\"tree-view w100 h100\">\n <div class=\"tree-view-main h100\">\n <div *ngIf=\"!config.isSelectOne && !!treeControl.dataNodes && config.activeSelectAllNode\"\n class=\"checkbox-all-tree\" [class.sticky-position]=\"config.modeView === MODE_VIEW_ENUM.ExternalView\">\n <!-- Checkbox all root node -->\n <mat-checkbox [@inOutAnimation] (click)=\"onCheckAllRootTreeNode()\"\n [indeterminate]=\"isIndeterminateCheckboxAllTree\" [checked]=\"isAllDepartmentSelected\" qms-group-options\n color=\"default\" label=\"none\" class=\"checkbox-all\">\n <span class=\"text-label \">{{LANG.CHOOSE_ALL}}</span>\n <span>(<b>{{treeControl.dataNodes.length}}</b>)</span>\n </mat-checkbox>\n <mat-divider class=\"mx-auto\"></mat-divider>\n </div>\n <cdk-virtual-scroll-viewport *ngIf=\"dataSource.data\" [ngClass]=\"{\n 'has-checkbox-all': !config.isSelectOne && config.modeView === MODE_VIEW_ENUM.Basic,\n 'select-department-tree': true\n }\" [itemSize]=\"ITEM_SIZE\" [ngStyle]=\"{height: height}\">\n <ng-container *cdkVirtualFor=\"let node of dataSource; trackBy: trackBy\">\n <div class=\"qms-tree-node mt-1\" [style.padding-left]=\"node.level * (config.isMobile ? 12 :24) + 'px'\"\n [attr.data-id]=\"node.id\" [id]=\"'mat-node-'+node.id\" [@triggerColor]=\"activeNode == node.id\" [ngClass]=\"{\n 'mat-tree-node-disabled-all': node.disabled,\n 'w-100': config.isSelectOne,\n 'selected-theme': this.checkListSelection.isSelected(node) && config.isSelectOne,\n 'expand-node': treeControl.isExpandable(node) && treeControl.isExpanded(node),\n 'active-external-view': config.modeView === MODE_VIEW_ENUM.ExternalView,\n 'node-loading': node.isLoading\n }\">\n <div class=\"node-expand-area\">\n <button class=\"btn-toggle\" qms-btn-icon color=\"light\" (click)=\"onExpandNode(node)\"\n *ngIf=\"treeControl.isExpandable(node) && !node.isLoading\">\n <mat-icon>\n {{ treeControl.isExpanded(node) ? \"expand_more\" : \"chevron_right\" }}\n </mat-icon>\n </button>\n <ng-container *ngIf=\"node.isLoading; then loadingSpinner\"></ng-container>\n </div>\n <ng-container [ngTemplateOutlet]=\"config.isSelectOne ? nodeWithoutCheckboxTemplate : showCheckboxTemplate\"\n [ngTemplateOutletContext]=\"{ node: node }\"></ng-container>\n <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-view-node\">\n <span class=\"node-external\" qms-elipsify position=\"top\" mode=\"dark\">\n {{node.externalName || ''}}\n </span>\n </div>\n </div>\n </ng-container>\n </cdk-virtual-scroll-viewport>\n <ng-container [@inOutAnimation] *ngIf=\"config.spinnerWhenGetMore && getLoadingMore$| async ;then maskOverlay\">\n </ng-container>\n </div>\n </div>\n <div *ngIf=\"(getIndexView$ | async) === 1\" [ngStyle]=\"{\n height: height\n }\" class=\"qms-view-search-result\">\n <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\"\n class=\"qms-view-search-result__header d-flex align-items-center justify-content-between\">\n <div class=\"header-title\">\n <span qms-elipsify mode=\"dark\" position=\"top\">\n {{config.headerName.resultSearchName}}\n </span>\n </div>\n <div class=\"header-title\">\n <span qms-elipsify mode=\"dark\" position=\"top\">\n {{config.headerName.externalName}}\n </span>\n </div>\n </div>\n <ng-container *ngIf=\"getLoading$.value; then loading\"></ng-container>\n <div class=\"qms-view-search-result__wrapper\"\n [class.active-external]=\"config.modeView === MODE_VIEW_ENUM.ExternalView\"\n *ngIf=\"!!resultSearch.length && !getLoading$.value\">\n <div class=\"\">\n <mat-checkbox [@inOutAnimation]\n [disabled]=\"!resultSearch.length || config.isSelectOne || isDisableChecboxAllSearch()\" #checkAllSearch\n [indeterminate]=\"indeterminateSearchResult\" [checked]=\"isSelectAllResultSearch\" qms-group-options\n color=\"default\" label=\"none\" class=\"checkbox-all\"\n (click)=\"!config.isSelectOne && onSelectAllSearchResult(checkAllSearch.checked)\">\n <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}</span>\n <span>(<b>{{resultSearch.length}}</b>)</span>\n </mat-checkbox>\n </div>\n <div [@inOutAnimation] [@listAnimation]\n [class.active-paging]=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\" class=\"result\">\n <div [qms-tool-tip]=\"!canHandleItemSearchResult(item) ? LANG.ITEM_NOT_MATCH_TO_TREE : ''\" mode=\"dark\"\n position=\"top\" *ngFor=\"let item of resultSearch\"\n (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\n [class.active]=\"checkListSelectionSearch.isSelected(item)\" class=\"result-item user-select-none\" matRipple>\n <mat-checkbox [@inOutAnimation] *ngIf=\"!item.isLoading\" [disabled]=\"item.disabled\"\n (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\n [checked]=\"checkListSelectionSearch.isSelected(item)\" qms-group-options color=\"default\" label=\"none\">\n </mat-checkbox>\n <div *ngIf=\"item.isLoading\" [@inOutAnimation] class=\"position-relative\">\n <ng-container *ngIf=\"item.isLoading; then loadingSpinner\"></ng-container>\n </div>\n <div class=\"result-item__content\">\n <div class=\"item-result-content-wraper\">\n <div class=\"text-gray fw-bold fs-base mb0\">{{item.name}}</div>\n <qms-breadcrumb *ngIf=\"item.location?.length > 1\" [type]=\"config.isMobile ? 'mobile': ''\"\n [numDisplayItem]=\"6\" (onItemClick)=\"$event.stopImmediatePropagation()\" class=\"breadcrumb-container\"\n [nodes]=\"item.location\">\n </qms-breadcrumb>\n <div *ngIf=\"item.location?.length === 1\" class=\"d-flex align-items-center\">\n <span qms-elipsify mode=\"dark\" position=\"top\"\n class=\"item-breadcrumb-disable d-block\">{{item.location[0].name}}</span>\n </div>\n </div>\n <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-name\">\n <span qms-elipsify mode=\"dark\" position=\"top\" class=\"text-gray fs-base mb0\">{{item.externalName}}\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div [@inOutAnimation] *ngIf=\"!resultSearch.length && !getLoading$.value\" class=\"result no-result\">\n <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\n </div>\n <mat-divider *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\"\n class=\"mx-auto\"></mat-divider>\n <qms-paginator #paginatorSearch *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch \"\n [length]=\"searchDepartment$.value.length\" [numHidden]=\"0\" [pageSize]=\"CURRENT_PAGESIZE\"\n [pageSizeOptions]=\"PAGE_SIZE_OPTION\" (page)='onPagingSearchResult($event)'\n [size]='config.isMobile ? PAGINATION_SIZE.small : PAGINATION_SIZE.medium'>\n </qms-paginator>\n </div>\n </div>\n\n <!-- Template for Checkbox -->\n <ng-template #showCheckboxTemplate let-node=\"node\">\n <mat-checkbox [id]=\"'node-'+node.id\" qms-group-options color=\"default\" label=\"none\" class=\"flex-direction-row\"\n [disabled]=\"node.isLoading\" [checked]=\"checkListSelection.isSelected(node)\"\n (click)=\"!node.isLoading && onCheckNode(node)\" [attr.disabled]=\"node.disabled || node.isLoading\">\n <img [title]=\"node.itemIconSvg\" *ngIf=\"node.itemIconSvg\" class=\"material-icons type-icon\"\n [src]=\"node.itemIconSvg\" />\n <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\n class=\"material-icons-outlined type-icon\"></span>\n <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\n node.itemMatIcon }}\n </span>\n <span class=\"text-name cursor-pointer ml5 123\" [ngClass]=\"{ disabled: node.disabled }\">{{ node.name}}\n </span>\n </mat-checkbox>\n </ng-template>\n\n <!-- Template node without checkbox -->\n <ng-template #nodeWithoutCheckboxTemplate let-node=\"node\">\n <div [id]=\"'node-'+node.id\" (click)=\"onCheckNode(node)\" class=\"node-without-checkbox\">\n <div class=\"node-info\">\n <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\n class=\"material-icons-outlined type-icon\"></span>\n <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\n node.itemMatIcon }}\n </span>\n <span class=\"text-name cursor-pointer pl-10 123\" [ngClass]=\"{ disabled: node.disabled }\">{{ node.name }}</span>\n </div>\n <div class=\"node-state\">\n <mat-icon *ngIf=\"checkListSelection.isSelected(node)\">check</mat-icon>\n </div>\n </div>\n </ng-template>\n</div>\n\n<ng-template #noResult>\n <svg width=\"89\" height=\"130\" viewBox=\"0 0 89 88\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"white\" />\n <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"#0163B2\" fill-opacity=\"0.12\" />\n <path\n d=\"M44.5 56.6936L58.096 64.8996L54.488 49.4336L66.5 39.0276L50.682 37.6856L44.5 23.0996L38.318 37.6856L22.5 39.0276L34.512 49.4336L30.904 64.8996L44.5 56.6936Z\"\n fill=\"#0163B3\" />\n <text x=\"10\" y=\"105\" fill=\"#0163B2\">{{LANG.NO_RESULT}}</text>\n </svg>\n</ng-template>\n\n<!-- Template loading -->\n<ng-template #loading>\n <div [ngStyle]=\"{\n 'height': searchDepartment$.value.length ? (config.modeView === MODE_VIEW_ENUM.ExternalView ? 'calc(100% - 90px)' : 'calc(100% - 50px)' ) : height\n }\" class=\"qms-loading-container\">\n <div class=\"qms-loader\" *ngFor=\"let item of arrSkeleton\">\n <div class=\"qms-loader__wrapper\">\n <div class=\"row-loader\">\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<!-- Template mask overlay -->\n<ng-template #maskOverlay>\n <div class=\"mask-overlay\">\n <mat-spinner [diameter]=\"50\" [strokeWidth]=\"5\"></mat-spinner>\n </div>\n</ng-template>\n\n<!-- Loading spinner -->\n<ng-template #loadingSpinner>\n <div class=\"qms-spinner center\">\n <mat-spinner [diameter]=\"20\" [strokeWidth]=\"2\"></mat-spinner>\n </div>\n</ng-template>",
|
|
36465
36474
|
animations: [
|
|
36466
36475
|
AnimationTreeDepartment
|
|
36467
36476
|
],
|