qms-angular 1.1.47 → 1.1.49
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 +33 -22
- package/bundles/qms-angular.umd.js.map +1 -1
- package/esm2015/lib/components/select-department/model/select-department-popup-data.model.js +2 -1
- package/esm2015/lib/components/select-department/select-department.component.js +2 -2
- package/esm2015/lib/components/select-department-tree/select-department-tree.component.js +2 -2
- package/esm2015/lib/model/en.js +4 -1
- package/esm2015/lib/model/no.js +4 -1
- package/esm2015/lib/qms-ckeditor-components/common/bpmn/toolbar.function.js +7 -4
- package/esm2015/lib/qms-ckeditor-components/common/functions/common.function.js +3 -3
- package/esm2015/lib/qms-ckeditor-components/common/functions/resource.function.js +3 -2
- package/esm2015/lib/qms-ckeditor-components/components/qms-ckeditor-bpmn/qms-ckeditor-bpmn.component.js +5 -3
- package/esm2015/lib/qms-ckeditor-components/models/document-tree-node-data.model.js +3 -0
- package/esm2015/lib/qms-ckeditor-components/qms-ckeditor.component.js +3 -2
- package/esm2015/lib/qms-ckeditor-components/services/qms-ckeditor-bpmn.service.js +9 -12
- package/fesm2015/qms-angular.js +33 -21
- package/fesm2015/qms-angular.js.map +1 -1
- package/lib/components/select-department/model/select-department-popup-data.model.d.ts +1 -0
- package/lib/model/en.d.ts +3 -0
- package/lib/model/no.d.ts +3 -0
- package/lib/qms-ckeditor-components/common/bpmn/toolbar.function.d.ts +26 -0
- package/lib/qms-ckeditor-components/common/functions/resource.function.d.ts +1 -0
- package/lib/qms-ckeditor-components/components/qms-ckeditor-bpmn/qms-ckeditor-bpmn.component.d.ts +4 -3
- package/lib/qms-ckeditor-components/models/{process-document-tree-node-data.model.d.ts → document-tree-node-data.model.d.ts} +1 -1
- package/lib/qms-ckeditor-components/services/qms-ckeditor-bpmn.service.d.ts +1 -1
- package/package.json +1 -1
- package/qms-angular.metadata.json +1 -1
- package/src/assets/jointjs/scss/bpmn.scss +3 -3
- package/src/lib/qms-ckeditor-components/components/qms-ckeditor-bpmn/qms-ckeditor-bpmn.component.scss +11 -0
- package/esm2015/lib/qms-ckeditor-components/models/process-document-tree-node-data.model.js +0 -3
|
@@ -138,6 +138,7 @@
|
|
|
138
138
|
"INSERT_TOOLTIP": "Insert a tooltip",
|
|
139
139
|
"CONTENT": "Content",
|
|
140
140
|
"TEMPLATE": "Template",
|
|
141
|
+
"RESET": "Reset",
|
|
141
142
|
"CONTENT_TEMPLATE": "Content Template",
|
|
142
143
|
"CREATE_NEW_TEMPLATE": "Create new template",
|
|
143
144
|
"UPDATE_TEMPLATE": "Update template",
|
|
@@ -540,6 +541,8 @@
|
|
|
540
541
|
"CONFIRM_DELETE_EXISTING_CONNECTION": "You must remove existing connection before you do this action.",
|
|
541
542
|
"CONFIRM_DELETE_ATTACHMENT": "Are you sure you want to delete this link?",
|
|
542
543
|
"CONFIRM_DELETE_DOCUMENT_OR_PROCESS": "Are you sure you want to delete this document / process?",
|
|
544
|
+
"CONFIRM_DELETE_DEVIATION": "Are you sure you want to delete this deviation?",
|
|
545
|
+
"CONFIRM_DELETE_CHECKLIST": "Are you sure you want to delete this checklist?",
|
|
543
546
|
},
|
|
544
547
|
"FLOWCHART": {
|
|
545
548
|
"REMOVE_ELEMENT": 'Click to remove the object',
|
|
@@ -697,6 +700,7 @@
|
|
|
697
700
|
"INSERT_TOOLTIP": "Sett inn et verktøytips",
|
|
698
701
|
"CONTENT": "Innhold",
|
|
699
702
|
"TEMPLATE": "Mal",
|
|
703
|
+
"RESET": "Nullstille",
|
|
700
704
|
"CONTENT_TEMPLATE": "Innholdsmal",
|
|
701
705
|
"CREATE_NEW_TEMPLATE": "Lag ny mal",
|
|
702
706
|
"UPDATE_TEMPLATE": "Oppdater mal",
|
|
@@ -1099,6 +1103,8 @@
|
|
|
1099
1103
|
"CONFIRM_DELETE_EXISTING_CONNECTION": "Du må fjerne den eksisterende tilkoblingen før du utfører denne handlingen.",
|
|
1100
1104
|
"CONFIRM_DELETE_ATTACHMENT": "Er du sikker på at du vil slette denne linken?",
|
|
1101
1105
|
"CONFIRM_DELETE_DOCUMENT_OR_PROCESS": "Er du sikker på at du vil slette dette dokumentet / prosessen?",
|
|
1106
|
+
"CONFIRM_DELETE_DEVIATION": "Er du sikker på at du vil slette dette avvik?",
|
|
1107
|
+
"CONFIRM_DELETE_CHECKLIST": "Er du sikker på at du vil slette dette sjekklisten?",
|
|
1102
1108
|
},
|
|
1103
1109
|
"FLOWCHART": {
|
|
1104
1110
|
"REMOVE_ELEMENT": 'Klikk for å fjerne objektet',
|
|
@@ -13913,7 +13919,7 @@
|
|
|
13913
13919
|
"Upload failed": "Kunne ikke laste opp",
|
|
13914
13920
|
"Upload in progress": "Laster opp fil",
|
|
13915
13921
|
"White": "Hvit",
|
|
13916
|
-
"Widget toolbar": "Widget verktøylinje
|
|
13922
|
+
"Widget toolbar": "Widget verktøylinje",
|
|
13917
13923
|
"Words: %0": "Ord: %0",
|
|
13918
13924
|
"Yellow": "Gul",
|
|
13919
13925
|
"image widget": "Bilde-widget",
|
|
@@ -14022,6 +14028,7 @@
|
|
|
14022
14028
|
"Templates": LANG.QMSCKEDITOR.TEMPLATES,
|
|
14023
14029
|
"About CKEditor": LANG.QMSCKEDITOR.ABOUT_CKEDITOR,
|
|
14024
14030
|
"Create Table of Contents": LANG.QMSCKEDITOR.CREATE_TABLE_OF_CONTENTS,
|
|
14031
|
+
"Edit anchor": "Rediger anker"
|
|
14025
14032
|
}
|
|
14026
14033
|
};
|
|
14027
14034
|
}
|
|
@@ -14067,8 +14074,8 @@
|
|
|
14067
14074
|
'|',
|
|
14068
14075
|
'imageMap',
|
|
14069
14076
|
'|',
|
|
14070
|
-
|
|
14071
|
-
|
|
14077
|
+
'qmsFlowchart',
|
|
14078
|
+
'|',
|
|
14072
14079
|
'qmsBpmn'
|
|
14073
14080
|
],
|
|
14074
14081
|
resizeOptions: [
|
|
@@ -16793,7 +16800,8 @@
|
|
|
16793
16800
|
name: 'deleteTemplate',
|
|
16794
16801
|
attrs: {
|
|
16795
16802
|
button: {
|
|
16796
|
-
'data-tooltip': "" + LANG.BPMN.DELETE_TEMPLATE
|
|
16803
|
+
'data-tooltip': "" + LANG.BPMN.DELETE_TEMPLATE,
|
|
16804
|
+
'data-before': "" + LANG.DELETE
|
|
16797
16805
|
}
|
|
16798
16806
|
}
|
|
16799
16807
|
},
|
|
@@ -16802,7 +16810,8 @@
|
|
|
16802
16810
|
name: 'saveAsTemplate',
|
|
16803
16811
|
attrs: {
|
|
16804
16812
|
button: {
|
|
16805
|
-
'data-tooltip': "" + LANG.BPMN.SAVE_AS_TEMPLATE
|
|
16813
|
+
'data-tooltip': "" + LANG.BPMN.SAVE_AS_TEMPLATE,
|
|
16814
|
+
'data-before': "" + LANG.QMSCKEDITOR.TEMPLATE
|
|
16806
16815
|
}
|
|
16807
16816
|
}
|
|
16808
16817
|
},
|
|
@@ -16811,7 +16820,8 @@
|
|
|
16811
16820
|
name: 'resetToTempTemplate',
|
|
16812
16821
|
attrs: {
|
|
16813
16822
|
button: {
|
|
16814
|
-
'data-tooltip': "" + LANG.BPMN.RESET_TO_LAST_SAVE
|
|
16823
|
+
'data-tooltip': "" + LANG.BPMN.RESET_TO_LAST_SAVE,
|
|
16824
|
+
'data-before': "" + LANG.QMSCKEDITOR.RESET
|
|
16815
16825
|
}
|
|
16816
16826
|
}
|
|
16817
16827
|
},
|
|
@@ -16909,16 +16919,14 @@
|
|
|
16909
16919
|
this.ngUnsubscribe.next();
|
|
16910
16920
|
this.ngUnsubscribe.complete();
|
|
16911
16921
|
};
|
|
16912
|
-
BpmnService.prototype.buildDiagram = function (diagramTemplates, diagramTemplate, bpmnTheme, jsonContent, editMode, shapeImages, toolbarConfiguration) {
|
|
16913
|
-
|
|
16914
|
-
|
|
16915
|
-
|
|
16916
|
-
|
|
16917
|
-
|
|
16918
|
-
|
|
16919
|
-
|
|
16920
|
-
}
|
|
16921
|
-
});
|
|
16922
|
+
BpmnService.prototype.buildDiagram = function (diagramTemplates, diagramTemplate, bpmnTheme, jsonContent, editMode, shapeImages, toolbarConfiguration, language) {
|
|
16923
|
+
if (!language) {
|
|
16924
|
+
this.LANG = this.translate.getObjectLang('en');
|
|
16925
|
+
}
|
|
16926
|
+
else {
|
|
16927
|
+
this.LANG = this.translate.getObjectLang(language);
|
|
16928
|
+
}
|
|
16929
|
+
this.excutedBuildDiagram(diagramTemplates, diagramTemplate, bpmnTheme, jsonContent, editMode, this.LANG, shapeImages, toolbarConfiguration);
|
|
16922
16930
|
};
|
|
16923
16931
|
BpmnService.prototype.excutedBuildDiagram = function (diagramTemplates, diagramTemplate, bpmnTheme, jsonContent, editMode, LANG, shapeImages, toolbarConfiguration) {
|
|
16924
16932
|
var _this = this;
|
|
@@ -17650,7 +17658,6 @@
|
|
|
17650
17658
|
'delete backspace': function (evt) {
|
|
17651
17659
|
evt.preventDefault();
|
|
17652
17660
|
graph.removeCells(selection.collection.toArray());
|
|
17653
|
-
resetCellView();
|
|
17654
17661
|
},
|
|
17655
17662
|
'ctrl+z': function () {
|
|
17656
17663
|
var notify = isSelectedCellViewInSelection(selection);
|
|
@@ -19035,6 +19042,7 @@
|
|
|
19035
19042
|
_this.shapeModel = new ShapeModel();
|
|
19036
19043
|
_this.targets = [];
|
|
19037
19044
|
_this.anchors = [];
|
|
19045
|
+
_this.language = 'en';
|
|
19038
19046
|
_this.id = data.id;
|
|
19039
19047
|
_this.module = data.module;
|
|
19040
19048
|
_this.entityId = data.entityId;
|
|
@@ -19054,6 +19062,7 @@
|
|
|
19054
19062
|
this.QMSBPMNConfig.editMode = exports.FlowchartViewMode.Edit;
|
|
19055
19063
|
this.translate.getLanguageSubject$.pipe(operators.takeUntil(this.ngUnsubcribe)).subscribe(function (res) {
|
|
19056
19064
|
if (res) {
|
|
19065
|
+
_this.language = res;
|
|
19057
19066
|
_this.LANG = _this.translate.getObjectLang(res);
|
|
19058
19067
|
_this.QMSBPMNConfig.changeTemplatePopupContent = _this.LANG.BPMN.CHANGE_TEMPLATE_NOTE;
|
|
19059
19068
|
}
|
|
@@ -19078,7 +19087,7 @@
|
|
|
19078
19087
|
_d.jsonContent = _e.sent();
|
|
19079
19088
|
_e.label = 3;
|
|
19080
19089
|
case 3:
|
|
19081
|
-
this.bpmnService.buildDiagram(temlates, this.template, 'default joint-theme-bpmn', this.jsonContent, this.QMSBPMNConfig.editMode, null, ToolbarFunction$1.getToolbarConfiguration(this.LANG));
|
|
19090
|
+
this.bpmnService.buildDiagram(temlates, this.template, 'default joint-theme-bpmn', this.jsonContent, this.QMSBPMNConfig.editMode, null, ToolbarFunction$1.getToolbarConfiguration(this.LANG), this.language);
|
|
19082
19091
|
this.splitView = this.QMSBPMNConfig.showProcessDocumentTreeDataInSplitView;
|
|
19083
19092
|
this.initConnectionTypes();
|
|
19084
19093
|
this.initTarget();
|
|
@@ -19956,7 +19965,7 @@
|
|
|
19956
19965
|
{ type: i0.Component, args: [{
|
|
19957
19966
|
selector: 'qms-ckeditor-bpmn',
|
|
19958
19967
|
template: "<div id=\"qmsckeditor-bpmn\" class=\"qmsckeditor qmsckeditor__bpmn__container\">\n <div id=\"qmsckeditor-load-template-header\">\n <span id=\"qmsckeditor-bpmn-header_001\" mat-icon-button class=\"qmsckeditor button__close\" (click)=\"onCloseDialog()\">\n <mat-icon>close</mat-icon>\n </span>\n <span id=\"qmsckeditor-bpmn-header_002\" mat-icon-button class=\"qmsckeditor button__done\" (click)=\"onInsertImage()\">\n <mat-icon>done</mat-icon>\n </span>\n <div id=\"qmsckeditor-load-template-header_002\" mat-dialog-content>\n <h2 id=\"qmsckeditor-template_002_001\">\n {{ LANG.BPMN.BUSINESS_PROCESS_MODEL_AND_NOTATION }}\n </h2>\n </div>\n </div>\n <div class=\"mask-overlay\" *ngIf=\"loadingRelatedData\">\n <mat-spinner class=\"spinner\" diameter=\"65\"></mat-spinner>\n </div>\n <qms-bpmn [QMSBPMNConfig]=\"QMSBPMNConfig\" [shapeModel]=\"shapeModel\" [targets]=\"targets\" [anchors]=\"anchors\"\n (onSelectConnectType)=\"selectConnectType($event)\" (onSaveAsTemplate)=\"saveAsTemplate($event)\"\n (onDeleteTemplate)=\"deleteTemplate()\" (onSelectTemplate)=\"selectTemplate()\" (onResetTemplate)=\"resetTemplate()\"\n (onGetShapeActivity)=\"getShapeActivity($event)\" (onChangeShapeTarget)=\"saveShapeTarget($event)\"\n (onChangeShapeAnchor)=\"saveShapeAnchor($event)\" (onReloadAnchorDocumentClick)=\"reloadAnchorDocument()\"\n (onDeleteConnection)=\"deleteConnection($event)\"></qms-bpmn>\n</div>",
|
|
19959
|
-
styles: [":host ::ng-deep .qmsckeditor__bpmn__container ::ng-deep .mat-tab-body-wrapper{height:100%}:host ::ng-deep .qmsckeditor__bpmn__container .mask-overlay{z-index:1000;background-color:rgba(34,33,33,.1);position:absolute;top:0;left:0;width:100%;height:100%;border-radius:4px;overflow:hidden;display:grid;place-items:center}"]
|
|
19968
|
+
styles: [":host ::ng-deep .qmsckeditor__bpmn__container ::ng-deep .mat-tab-body-wrapper{height:100%}:host ::ng-deep .qmsckeditor__bpmn__container .mask-overlay{z-index:1000;background-color:rgba(34,33,33,.1);position:absolute;top:0;left:0;width:100%;height:100%;border-radius:4px;overflow:hidden;display:grid;place-items:center}:host ::ng-deep .qmsckeditor__bpmn__container .joint-widget.joint-theme-default[data-type=zoomToFit]:after{display:block;content:\" \";background-color:transparent;background-repeat:no-repeat;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggc3R5bGU9InN0cm9rZTpub25lO2ZpbGwtcnVsZTpub256ZXJvO2ZpbGw6IzAwMDtmaWxsLW9wYWNpdHk6MSIgZD0iTTMgMjF2LTUuNzVoMS41djMuMTc2bDMuNy0zLjcgMS4wNzMgMS4wNzVMNS41NzQgMTkuNUg4Ljc1VjIxWm0xMi4yNSAwdi0xLjVoMy4xNzZsLTMuNjc2LTMuNjc2IDEuMDc0LTEuMDc0IDMuNjc2IDMuNjc2VjE1LjI1SDIxVjIxWk04LjE3NiA5LjI1IDQuNSA1LjU3NFY4Ljc1SDNWM2g1Ljc1djEuNUg1LjU3NEw5LjI1IDguMTc2Wm03LjY0OCAwTDE0Ljc1IDguMTc2IDE4LjQyNiA0LjVIMTUuMjVWM0gyMXY1Ljc1aC0xLjVWNS41NzRabTAgMCIvPjwvc3ZnPg==\")!important;width:50px;height:50px;background-position:7px 7px}"]
|
|
19960
19969
|
},] }
|
|
19961
19970
|
];
|
|
19962
19971
|
QMSCKEditorBpmnComponent.ctorParameters = function () { return [
|
|
@@ -29492,7 +29501,8 @@
|
|
|
29492
29501
|
});
|
|
29493
29502
|
var toolbarItems = this.qmsckPlugin.itemToolbar;
|
|
29494
29503
|
if (this.isEnabledToggleToolbar() && this.qmsckData.toggledToolbarItems) {
|
|
29495
|
-
|
|
29504
|
+
// let strToolbars = this.qmsckData.toggledToolbarItems.replace(/qmsFlowchart,/g, "");
|
|
29505
|
+
var strToolbars = this.qmsckData.toggledToolbarItems;
|
|
29496
29506
|
if (!this.qmsckData.enableTemplate) {
|
|
29497
29507
|
strToolbars = strToolbars.replace(/qmsTemplate,/g, ""); // disable qmsTemplate if user don't have handbookAdmin Role
|
|
29498
29508
|
}
|
|
@@ -35350,7 +35360,7 @@
|
|
|
35350
35360
|
SelectDepartmentTreeComponent.decorators = [
|
|
35351
35361
|
{ type: i0.Component, args: [{
|
|
35352
35362
|
selector: 'qms-select-department-tree',
|
|
35353
|
-
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 '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) ? node?.expandIcon?.collapse : node?.expandIcon?.expand }}\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 || node.disabled\" [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 <div class=\"node-text\" [ngStyle]=\"{\n maxWidth: (maxWidthNode - 20*node.level)+ 'px'\n }\">\n <span qms-elipsify [mode]=\"'dark'\" position=\"top\" class=\"text-name cursor-pointer ml5 123\" [ngClass]=\"{ disabled: node.disabled}\">{{ node.name}}\n </span>\n </div>\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\" color=\"primary\"></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>\n",
|
|
35363
|
+
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=\"{{ 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 '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) ? node?.expandIcon?.collapse : node?.expandIcon?.expand }}\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 || node.disabled\" [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 <div class=\"node-text\" [ngStyle]=\"{\n maxWidth: (maxWidthNode - 20*node.level)+ 'px'\n }\">\n <span qms-elipsify [mode]=\"'dark'\" position=\"top\" class=\"text-name cursor-pointer ml5 123\" [ngClass]=\"{ disabled: node.disabled}\">{{ node.name}}\n </span>\n </div>\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\" color=\"primary\"></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>\n",
|
|
35354
35364
|
animations: [
|
|
35355
35365
|
AnimationTreeDepartment
|
|
35356
35366
|
],
|
|
@@ -35448,6 +35458,7 @@
|
|
|
35448
35458
|
this.headerName = '';
|
|
35449
35459
|
this.config = new QMSSelectDepartmentTreeConfig;
|
|
35450
35460
|
this.hidePanelResult = false;
|
|
35461
|
+
this.resultTitle = '';
|
|
35451
35462
|
}
|
|
35452
35463
|
return SelectDepartmentPopupData;
|
|
35453
35464
|
}());
|
|
@@ -35787,7 +35798,7 @@
|
|
|
35787
35798
|
SelectDepartmentComponent.decorators = [
|
|
35788
35799
|
{ type: i0.Component, args: [{
|
|
35789
35800
|
selector: 'qms-select-department',
|
|
35790
|
-
template: "<div class=\"qms-select-department\">\n <div class=\"header-dialog mb-2\">\n <span>{{popupData.headerName}}</span>\n <button matDialogClose class=\"btn-close-dialog\" color=\"light\" qms-btn-icon>\n <mat-icon>close</mat-icon>\n </button>\n </div>\n <div>\n <div class=\"qms-scrollbar\">\n <div>\n <qms-select-department-tree #treeDepartment customClass=\"custom-department-tree\"\n [height]=\"popupData.config.isMobile ? '38vh' : '50vh'\" [rowsSkeleton]=\"9\" [config]=\"popupData.config\"\n (onSearchEvent)=\"onSearchEvent.emit($event)\" (onValueChangeEvent)=\"onResultDepartmentChange($event)\"\n (onPagingSearchEvent)=\"onPagingEvent.emit($event)\" (onCheckNodeEvent)=\"onCheckNodeEvent.emit($event)\"\n (onExpandNodeEvent)=\"onExpandNodeEvent.emit($event)\" (onLoadMoreEvent)=\"onLoadMoreEvent.emit()\"\n (onCheckAllItemSearchEvent)=\"onCheckAllItemSearchEvent.emit($event)\"\n (onCheckItemSearchEvent)=\"onCheckItemSearchEvent.emit($event)\"\n (toggleIncludeChildEvent)=\"toggleIncludeChildEvent.emit($event)\">\n </qms-select-department-tree>\n </div>\n </div>\n <div class=\"line__divider\"></div>\n <div [@heightAnimation]
|
|
35801
|
+
template: "<div class=\"qms-select-department\">\n <div class=\"header-dialog mb-2\">\n <span>{{popupData.headerName}}</span>\n <button matDialogClose class=\"btn-close-dialog\" color=\"light\" qms-btn-icon>\n <mat-icon>close</mat-icon>\n </button>\n </div>\n <div>\n <div class=\"qms-scrollbar\">\n <div>\n <qms-select-department-tree #treeDepartment customClass=\"custom-department-tree\"\n [height]=\"popupData.config.isMobile ? '38vh' : '50vh'\" [rowsSkeleton]=\"9\" [config]=\"popupData.config\"\n (onSearchEvent)=\"onSearchEvent.emit($event)\" (onValueChangeEvent)=\"onResultDepartmentChange($event)\"\n (onPagingSearchEvent)=\"onPagingEvent.emit($event)\" (onCheckNodeEvent)=\"onCheckNodeEvent.emit($event)\"\n (onExpandNodeEvent)=\"onExpandNodeEvent.emit($event)\" (onLoadMoreEvent)=\"onLoadMoreEvent.emit()\"\n (onCheckAllItemSearchEvent)=\"onCheckAllItemSearchEvent.emit($event)\"\n (onCheckItemSearchEvent)=\"onCheckItemSearchEvent.emit($event)\"\n (toggleIncludeChildEvent)=\"toggleIncludeChildEvent.emit($event)\">\n </qms-select-department-tree>\n </div>\n </div>\n <div class=\"line__divider\"></div>\n <div [@heightAnimation]\n *ngIf=\"treeDepartment && !!treeDepartment.resultSelected.length && !popupData.hidePanelResult\" class=\" pr-0 pe-0\">\n <div class=\"header-title\">{{popupData.resultTitle || LANG.RESULT}}</div>\n <div class=\"result-content pr-0 pe-0\">\n <mat-chip-list class=\"panel__item qms-scrollbar\">\n <div [@inOutAnimation_2] [id]=\"'item-result-'+item.id\" *ngFor=\"let item of treeDepartment.resultSelected\">\n <mat-chip [@updateItemAnimation] *qmsContentChanges=\"item.children?.length\"\n [qms-tool-tip]=\"generateTootip(item)\" position=\"top\" mode=\"dark\" qms-chip [removable]=\"true\">\n <span (click)=\"onScrollToNode(item)\" qms-chip-body>\n <span class=\"related__item__content_name\" #itemName>\n <span>{{item.name}}</span>\n <span class=\"select__include-children__count\" *ngIf=\"!!item?.isGroup && !popupData.config.lazy\">\n {{item.children.length}}/{{item.childCount}}\n </span>\n <span class=\"select__include-children__count\" *ngIf=\"!!item?.isGroup && popupData.config.lazy\">\n {{item.selectedChildCount || item.children.length}}/{{item.childCount}}\n </span>\n </span>\n </span>\n <ng-container *ngIf=\"isNodeLoading(item.id)\" [ngTemplateOutlet]=\"loadingSpinner\"></ng-container>\n <mat-icon *ngIf=\"!treeDepartment.isDisabledNode(item.id) && !isNodeLoading(item.id)\"\n (click)=\"onRemoveNode(item)\">cancel</mat-icon>\n </mat-chip>\n </div>\n </mat-chip-list>\n </div>\n </div>\n <mat-divider *ngIf=\"treeDepartment && !!treeDepartment.resultSelected.length && !popupData.hidePanelResult\"\n class=\"mx-auto\"></mat-divider>\n <div class=\"confirm__button__groups\">\n <button (click)=\"onCloseDialog()\" class=\"btn-add\"\n [disabled]=\"!resultSelected.length && !popupData.config.canAddNullResult\"\n [class.qms-btn-disabled]=\"!resultSelected.length && !popupData.config.canAddNullResult\" qms-btn>\n <span>{{LANG.ADD}}</span>\n <span>\n ({{treeDepartment.resultSelected.length}})\n </span>\n </button>\n <button qms-btn-text mat-dialog-close>\n {{LANG.CANCEL}}\n </button>\n </div>\n </div>\n</div>\n\n<!-- Loading spinner -->\n<ng-template #loadingSpinner>\n <div class=\"qms-spinner-wrapper\">\n <div class=\"qms-spinner center\">\n <mat-spinner [diameter]=\"20\" [strokeWidth]=\"2\" color=\"primary\"></mat-spinner>\n </div>\n </div>\n</ng-template>",
|
|
35791
35802
|
providers: [
|
|
35792
35803
|
{
|
|
35793
35804
|
provide: checkbox.MAT_CHECKBOX_DEFAULT_OPTIONS,
|