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
package/fesm2015/qms-angular.js
CHANGED
|
@@ -35778,8 +35778,11 @@ class SelectDepartmentTreeComponent {
|
|
|
35778
35778
|
if (state) {
|
|
35779
35779
|
if (this.checkListSelection.isSelected(currentNode))
|
|
35780
35780
|
return;
|
|
35781
|
-
if (this.checkListSelectionSearch.isSelected(item))
|
|
35781
|
+
if (this.checkListSelectionSearch.isSelected(item)) {
|
|
35782
|
+
const nestedNode = _.cloneDeep(this.convertToNestedNode(currentNode));
|
|
35783
|
+
this.resultSelected.push(nestedNode);
|
|
35782
35784
|
this.checkListSelection.select(currentNode);
|
|
35785
|
+
}
|
|
35783
35786
|
}
|
|
35784
35787
|
else {
|
|
35785
35788
|
this.checkListSelection.deselect(currentNode);
|
|
@@ -36598,6 +36601,8 @@ class QMSSelectAccessDialog {
|
|
|
36598
36601
|
this.treeDepartmentConfig = new QMSSelectDepartmentTreeConfig();
|
|
36599
36602
|
this.titleDialog = '';
|
|
36600
36603
|
this.titleResult = '';
|
|
36604
|
+
this.confirmTitle = '';
|
|
36605
|
+
this.cancelTitle = '';
|
|
36601
36606
|
this.sizeUpdateDefault = '1024px';
|
|
36602
36607
|
this.disableSelectedList = false;
|
|
36603
36608
|
this.formatTooltip = null;
|
|
@@ -37159,7 +37164,7 @@ class QMSSelectAccessDialogComponent {
|
|
|
37159
37164
|
QMSSelectAccessDialogComponent.decorators = [
|
|
37160
37165
|
{ type: Component, args: [{
|
|
37161
37166
|
selector: 'qms-select-access-dialog',
|
|
37162
|
-
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>",
|
|
37167
|
+
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>",
|
|
37163
37168
|
animations: [SelectAccessAnimationTrigger],
|
|
37164
37169
|
providers: [
|
|
37165
37170
|
{
|