qms-angular 1.1.62 → 1.1.64
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 +7 -2
- package/bundles/qms-angular.umd.js.map +1 -1
- package/esm2015/lib/components/select-access-dialog/model/select-access-config.model.js +3 -1
- package/esm2015/lib/components/select-access-dialog/select-access-dialog.component.js +2 -2
- package/esm2015/lib/components/select-department-tree/select-department-tree.component.js +5 -2
- package/fesm2015/qms-angular.js +7 -2
- package/fesm2015/qms-angular.js.map +1 -1
- package/lib/components/select-access-dialog/model/select-access-config.model.d.ts +2 -0
- package/package.json +1 -1
|
@@ -37541,8 +37541,11 @@
|
|
|
37541
37541
|
if (state) {
|
|
37542
37542
|
if (this.checkListSelection.isSelected(currentNode))
|
|
37543
37543
|
return;
|
|
37544
|
-
if (this.checkListSelectionSearch.isSelected(item))
|
|
37544
|
+
if (this.checkListSelectionSearch.isSelected(item)) {
|
|
37545
|
+
var nestedNode = ___namespace.cloneDeep(this.convertToNestedNode(currentNode));
|
|
37546
|
+
this.resultSelected.push(nestedNode);
|
|
37545
37547
|
this.checkListSelection.select(currentNode);
|
|
37548
|
+
}
|
|
37546
37549
|
}
|
|
37547
37550
|
else {
|
|
37548
37551
|
this.checkListSelection.deselect(currentNode);
|
|
@@ -38456,6 +38459,8 @@
|
|
|
38456
38459
|
this.treeDepartmentConfig = new QMSSelectDepartmentTreeConfig();
|
|
38457
38460
|
this.titleDialog = '';
|
|
38458
38461
|
this.titleResult = '';
|
|
38462
|
+
this.confirmTitle = '';
|
|
38463
|
+
this.cancelTitle = '';
|
|
38459
38464
|
this.sizeUpdateDefault = '1024px';
|
|
38460
38465
|
this.disableSelectedList = false;
|
|
38461
38466
|
this.formatTooltip = null;
|
|
@@ -39056,7 +39061,7 @@
|
|
|
39056
39061
|
QMSSelectAccessDialogComponent.decorators = [
|
|
39057
39062
|
{ type: i0.Component, args: [{
|
|
39058
39063
|
selector: 'qms-select-access-dialog',
|
|
39059
|
-
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>",
|
|
39064
|
+
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>{{dialogData.confirmTitle || LANG.ADD}}</span>\n </button>\n <button qms-btn-text mat-dialog-close>\n {{dialogData.confirmTitle || 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>",
|
|
39060
39065
|
animations: [SelectAccessAnimationTrigger],
|
|
39061
39066
|
providers: [
|
|
39062
39067
|
{
|