qms-angular 1.0.59 → 1.0.63
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 +206 -64
- package/bundles/qms-angular.umd.js.map +1 -1
- package/esm2015/lib/components/breadcrumb/breadcrumb-item.directive.js +9 -1
- package/esm2015/lib/components/breadcrumb/breadcrumb.js +43 -29
- package/esm2015/lib/components/comment/comment.js +1 -5
- package/esm2015/lib/components/related/list-other-related/list-related.component.js +2 -2
- package/esm2015/lib/components/related/model/selected-node.model.js +1 -1
- package/esm2015/lib/components/related/popup/related-popup.component.js +112 -19
- package/esm2015/lib/components/tree/model/tree.model.js +1 -1
- package/esm2015/lib/components/tree/tree.component.js +35 -6
- package/fesm2015/qms-angular.js +197 -57
- package/fesm2015/qms-angular.js.map +1 -1
- package/lib/components/breadcrumb/breadcrumb-item.directive.d.ts +1 -0
- package/lib/components/breadcrumb/breadcrumb.d.ts +4 -1
- package/lib/components/related/model/selected-node.model.d.ts +3 -0
- package/lib/components/related/popup/related-popup.component.d.ts +16 -6
- package/lib/components/tree/model/tree.model.d.ts +1 -0
- package/lib/components/tree/tree.component.d.ts +2 -0
- package/package.json +1 -1
- package/qms-angular.metadata.json +1 -1
package/fesm2015/qms-angular.js
CHANGED
@@ -639,21 +639,17 @@ class QMSComment {
|
|
639
639
|
const changedProp = changes[propName];
|
640
640
|
const to = JSON.stringify(changedProp.currentValue);
|
641
641
|
if (changedProp.isFirstChange()) {
|
642
|
-
console.log('Initial value of');
|
643
642
|
}
|
644
643
|
else {
|
645
644
|
const from = JSON.stringify(changedProp.previousValue);
|
646
|
-
console.log('changed from');
|
647
645
|
}
|
648
646
|
}
|
649
|
-
console.log('value changed', changes.sourceLog.currentValue);
|
650
647
|
// this.sourceLog = changes.sourceLog.currentValue;
|
651
648
|
}
|
652
649
|
ngOnInit() {
|
653
650
|
this.trans.getLanguageSubject$.pipe().subscribe((res) => {
|
654
651
|
if (res) {
|
655
652
|
this.LANG = this.trans.getObjectLang(res);
|
656
|
-
console.log(this.LANG);
|
657
653
|
}
|
658
654
|
});
|
659
655
|
}
|
@@ -3609,6 +3605,14 @@ class QMSBreadcrumbItemDirective {
|
|
3609
3605
|
}
|
3610
3606
|
}
|
3611
3607
|
}
|
3608
|
+
ngOnChanges() {
|
3609
|
+
if (this.isLastItem) {
|
3610
|
+
this.ele.nativeElement.classList.add('qms-breadcrumb-last-item');
|
3611
|
+
}
|
3612
|
+
else {
|
3613
|
+
this.ele.nativeElement.classList.remove('qms-breadcrumb-last-item');
|
3614
|
+
}
|
3615
|
+
}
|
3612
3616
|
ngOnInit() {
|
3613
3617
|
if (this.ele) {
|
3614
3618
|
this.ele.nativeElement.classList.add('qms-breadcrumb-item');
|
@@ -3657,34 +3661,7 @@ class QMSBreadcrumb {
|
|
3657
3661
|
iconRegistry.addSvgIconLiteral('breadcrumb_dropdown', sanitizer.bypassSecurityTrustHtml(BREADCRUMB_DROPDOWN_ICON));
|
3658
3662
|
}
|
3659
3663
|
ngAfterViewInit() {
|
3660
|
-
|
3661
|
-
if (!this.maxLine || this.maxLine < 2) {
|
3662
|
-
this.checkOverflow(this.ele.nativeElement.offsetWidth);
|
3663
|
-
}
|
3664
|
-
else {
|
3665
|
-
this.checkOverflow(this.ele.nativeElement.offsetWidth * 1.7);
|
3666
|
-
}
|
3667
|
-
}
|
3668
|
-
//show number Items after 3 dot icon
|
3669
|
-
if (+this.numDisplayItem > 0 && this.itemNodes.length >= 2) {
|
3670
|
-
this.dropdownNodes = [];
|
3671
|
-
this.dropdownNodes = this.itemNodes.slice(0, -this.numDisplayItem).reverse();
|
3672
|
-
this.itemNodes = [...[], ...this.itemNodes.slice(-this.numDisplayItem)];
|
3673
|
-
this.isOverflow = true;
|
3674
|
-
this.cdRef.detectChanges();
|
3675
|
-
}
|
3676
|
-
//just show 1 item for mobile
|
3677
|
-
if (this.onlyItem) {
|
3678
|
-
this.isOverflow = true;
|
3679
|
-
this.dropdownNodes = [];
|
3680
|
-
let itemNodes = [...this.itemNodes];
|
3681
|
-
let lastItem = itemNodes.pop();
|
3682
|
-
this.dropdownNodes = [...itemNodes].reverse();
|
3683
|
-
this.dropdownNodes.push(this.homeNode);
|
3684
|
-
this.itemNodes = [];
|
3685
|
-
this.itemNodes = [lastItem];
|
3686
|
-
this.cdRef.detectChanges();
|
3687
|
-
}
|
3664
|
+
this.buildBreadcrumb();
|
3688
3665
|
}
|
3689
3666
|
checkOverflow(width) {
|
3690
3667
|
const nodeWidths = this.breadCrumbNodes.map(x => x.ele.nativeElement.offsetWidth);
|
@@ -3718,8 +3695,18 @@ class QMSBreadcrumb {
|
|
3718
3695
|
this.dropdownNodes = this.dropdownNodes.reverse();
|
3719
3696
|
}
|
3720
3697
|
}
|
3698
|
+
ngOnChanges(changes) {
|
3699
|
+
if (changes.nodes && this.breadCrumbNodes && JSON.stringify(changes.nodes.currentValue) !== JSON.stringify(changes.nodes.previousValue)) {
|
3700
|
+
this.nodes = [...changes.nodes.currentValue];
|
3701
|
+
this.initBreadCrumb();
|
3702
|
+
this.buildBreadcrumb();
|
3703
|
+
}
|
3704
|
+
}
|
3721
3705
|
ngOnInit() {
|
3722
3706
|
this.itemIconType = ItemIconType;
|
3707
|
+
this.initBreadCrumb();
|
3708
|
+
}
|
3709
|
+
initBreadCrumb() {
|
3723
3710
|
if (this.nodes && this.nodes.length > 0) {
|
3724
3711
|
this.nodes.forEach(ele => {
|
3725
3712
|
ele.isOverflow = ele.isOverflow ? ele.isOverflow : false;
|
@@ -3743,6 +3730,37 @@ class QMSBreadcrumb {
|
|
3743
3730
|
this.ele.nativeElement.classList.add('qms-breadcrumb__multi-line');
|
3744
3731
|
}
|
3745
3732
|
}
|
3733
|
+
buildBreadcrumb() {
|
3734
|
+
if (!this.isMobileType && this.ele.nativeElement.offsetWidth) {
|
3735
|
+
this.dropdownNodes = [];
|
3736
|
+
if (!this.maxLine || this.maxLine < 2) {
|
3737
|
+
this.checkOverflow(this.ele.nativeElement.offsetWidth);
|
3738
|
+
}
|
3739
|
+
else {
|
3740
|
+
this.checkOverflow(this.ele.nativeElement.offsetWidth * 1.7);
|
3741
|
+
}
|
3742
|
+
}
|
3743
|
+
//show number Items after 3 dot icon
|
3744
|
+
if (+this.numDisplayItem > 0 && this.itemNodes.length >= 2) {
|
3745
|
+
this.dropdownNodes = [];
|
3746
|
+
this.dropdownNodes = this.itemNodes.slice(0, -this.numDisplayItem).reverse();
|
3747
|
+
this.itemNodes = [...[], ...this.itemNodes.slice(-this.numDisplayItem)];
|
3748
|
+
this.isOverflow = true;
|
3749
|
+
this.cdRef.detectChanges();
|
3750
|
+
}
|
3751
|
+
//just show 1 item for mobile
|
3752
|
+
if (this.onlyItem) {
|
3753
|
+
this.isOverflow = true;
|
3754
|
+
this.dropdownNodes = [];
|
3755
|
+
let itemNodes = [...this.itemNodes];
|
3756
|
+
let lastItem = itemNodes.pop();
|
3757
|
+
this.dropdownNodes = [...itemNodes].reverse();
|
3758
|
+
this.dropdownNodes.push(this.homeNode);
|
3759
|
+
this.itemNodes = [];
|
3760
|
+
this.itemNodes = [lastItem];
|
3761
|
+
this.cdRef.detectChanges();
|
3762
|
+
}
|
3763
|
+
}
|
3746
3764
|
getItemIconType(treeConfig) {
|
3747
3765
|
if (treeConfig.itemIcon)
|
3748
3766
|
return ItemIconType.name;
|
@@ -3969,6 +3987,9 @@ const TreeFunctions = {
|
|
3969
3987
|
findChild: findChild$1
|
3970
3988
|
};
|
3971
3989
|
|
3990
|
+
class TreeFlatNode {
|
3991
|
+
}
|
3992
|
+
|
3972
3993
|
class TreeComponent {
|
3973
3994
|
constructor(cdRef, domSanitizer, iconRegistry, appIconService) {
|
3974
3995
|
this.cdRef = cdRef;
|
@@ -3986,6 +4007,7 @@ class TreeComponent {
|
|
3986
4007
|
this.childCheckedEvent = new EventEmitter();
|
3987
4008
|
this.nodeExpandEvent = new EventEmitter();
|
3988
4009
|
this.getChildNodeSelectOne = new EventEmitter();
|
4010
|
+
this.treeControlNodes = new EventEmitter();
|
3989
4011
|
this.listParentObj = {};
|
3990
4012
|
this.filterData = [];
|
3991
4013
|
this.arrIndex = [];
|
@@ -4138,6 +4160,10 @@ class TreeComponent {
|
|
4138
4160
|
if (this.treeConfig.expandAll) {
|
4139
4161
|
this.treeControl.expandAll();
|
4140
4162
|
}
|
4163
|
+
//Disabled node
|
4164
|
+
if (this.disabledList.length) {
|
4165
|
+
this.checkDisabledList();
|
4166
|
+
}
|
4141
4167
|
// Risk Tree
|
4142
4168
|
if (this.selectedRiskData.length) {
|
4143
4169
|
const selectedData = [];
|
@@ -4152,13 +4178,22 @@ class TreeComponent {
|
|
4152
4178
|
this.checkSelected(selectedData);
|
4153
4179
|
this.checkBoxEvent.emit(selectedData);
|
4154
4180
|
}
|
4155
|
-
|
4181
|
+
// keep expand
|
4182
|
+
if (this.parentNodeOnClick && Object.keys(this.parentNodeOnClick).length) {
|
4183
|
+
let tempParent = [];
|
4184
|
+
let root = new TreeFlatNode();
|
4156
4185
|
for (let i = 0; i < this.treeControl.dataNodes.length; i++) {
|
4157
4186
|
const tree = this.treeControl.dataNodes[i];
|
4158
|
-
if (this.parentNodeOnClick.parentId === tree.
|
4159
|
-
this.
|
4187
|
+
if (this.parentNodeOnClick.parentId === tree.parentId && this.parentNodeOnClick.id === tree.id
|
4188
|
+
|| this.parentNodeOnClick.parentId === tree.id) {
|
4189
|
+
tempParent = [...tempParent, this.getParent(tree)];
|
4190
|
+
root = tree;
|
4160
4191
|
}
|
4161
4192
|
}
|
4193
|
+
tempParent.push(root);
|
4194
|
+
tempParent.forEach(x => {
|
4195
|
+
this.treeControl.expand(x);
|
4196
|
+
});
|
4162
4197
|
}
|
4163
4198
|
}
|
4164
4199
|
getParent(node) {
|
@@ -4171,7 +4206,6 @@ class TreeComponent {
|
|
4171
4206
|
for (let i = index; i >= 0; i--) {
|
4172
4207
|
const currentNode = treeControl.dataNodes[i];
|
4173
4208
|
if (treeControl.getLevel(currentNode) < currentLevel) {
|
4174
|
-
treeControl.expand(currentNode);
|
4175
4209
|
return currentNode;
|
4176
4210
|
}
|
4177
4211
|
}
|
@@ -4409,6 +4443,19 @@ class TreeComponent {
|
|
4409
4443
|
this.checkBoxEvent.emit(this.checklistSelection.selected);
|
4410
4444
|
}
|
4411
4445
|
todoItemSelection(nodes) {
|
4446
|
+
nodes.forEach(node => {
|
4447
|
+
for (let i = 0; i < this.treeControl.dataNodes.length; i++) {
|
4448
|
+
if (this.treeControl.dataNodes[i].id === node.id &&
|
4449
|
+
this.treeControl.dataNodes[i].parentId === node.parentId &&
|
4450
|
+
!this.treeControl.dataNodes[i].disabled && !this.treeControl.dataNodes[i].expandable) {
|
4451
|
+
if (!this.checklistSelection.isSelected(this.treeControl.dataNodes[i]))
|
4452
|
+
this.checklistSelection.toggle(this.treeControl.dataNodes[i]);
|
4453
|
+
}
|
4454
|
+
}
|
4455
|
+
});
|
4456
|
+
this.checkBoxEvent.emit(this.checklistSelection.selected);
|
4457
|
+
}
|
4458
|
+
todoItemSelectionProcessDocument(nodes) {
|
4412
4459
|
nodes.forEach(node => {
|
4413
4460
|
for (let i = 0; i < this.treeControl.dataNodes.length; i++) {
|
4414
4461
|
if (this.treeControl.dataNodes[i].id === node.id &&
|
@@ -4421,6 +4468,7 @@ class TreeComponent {
|
|
4421
4468
|
});
|
4422
4469
|
setTimeout(() => {
|
4423
4470
|
this.checkBoxEvent.emit(this.checklistSelection.selected);
|
4471
|
+
this.treeControlNodes.emit(this.treeControl);
|
4424
4472
|
}, 500);
|
4425
4473
|
}
|
4426
4474
|
todoFolderSelection(nodes) {
|
@@ -4707,7 +4755,8 @@ TreeComponent.propDecorators = {
|
|
4707
4755
|
checkBoxEvent: [{ type: Output }],
|
4708
4756
|
childCheckedEvent: [{ type: Output }],
|
4709
4757
|
nodeExpandEvent: [{ type: Output }],
|
4710
|
-
getChildNodeSelectOne: [{ type: Output }]
|
4758
|
+
getChildNodeSelectOne: [{ type: Output }],
|
4759
|
+
treeControlNodes: [{ type: Output }]
|
4711
4760
|
};
|
4712
4761
|
|
4713
4762
|
class QMSTreeModule {
|
@@ -4882,7 +4931,7 @@ class RelatedListComponent {
|
|
4882
4931
|
RelatedListComponent.decorators = [
|
4883
4932
|
{ type: Component, args: [{
|
4884
4933
|
selector: 'qms-related-list',
|
4885
|
-
template: "<div class=\"container list-related\">\r\n <div class=\"list-related__title\">\r\n <strong>{{ title }}</strong>\r\n </div>\r\n <div\r\n class=\"list-related__body\"\r\n *ngFor=\"let item of relatedData; let i = index\"\r\n >\r\n <div class=\"list-related__body-parent\">\r\n <qms-list-item type=\"image-square\">\r\n <mat-icon\r\n leading-icon\r\n type=\"image-square\"\r\n [svgIcon]=\"getNodeIcon(item)\"\r\n ></mat-icon>\r\n <div qms-list-header>\r\n <div\r\n qms-line\r\n type=\"subtitle\"\r\n class=\"search__option-name\"\r\n (click)=\"onItemClick(item)\"\r\n >\r\n <div class=\"caption\" *ngIf=\"canShowParent(item)\">\r\n {{ item?.parentName }}\r\n </div>\r\n <span class=\"cursor\">{{ item.itemName }}</span>\r\n </div>\r\n <div\r\n class=\"caption\"\r\n *ngIf=\"item.breadcumbs && item.breadcumbs.length\"\r\n >\r\n <qms-breadcrumb\r\n class=\"breadcrumb-containe\"\r\n type=\"table\"\r\n numDisplayItem=\"1\"\r\n [nodes]=\"item.breadcumbs\"\r\n >\r\n </qms-breadcrumb>\r\n </div>\r\n </div>\r\n <div qms-line color=\"default-subtitle\" *ngIf=\"item?.displayId\">\r\n <span class=\"material-icons-outlined\"> local_offer </span> ID:\r\n
|
4934
|
+
template: "<div class=\"container list-related\">\r\n <div class=\"list-related__title\">\r\n <strong>{{ title }}</strong>\r\n </div>\r\n <div\r\n class=\"list-related__body\"\r\n *ngFor=\"let item of relatedData; let i = index\"\r\n >\r\n <div class=\"list-related__body-parent\">\r\n <qms-list-item type=\"image-square\">\r\n <mat-icon\r\n leading-icon\r\n type=\"image-square\"\r\n [svgIcon]=\"getNodeIcon(item)\"\r\n ></mat-icon>\r\n <div qms-list-header>\r\n <div\r\n qms-line\r\n type=\"subtitle\"\r\n class=\"search__option-name\"\r\n (click)=\"onItemClick(item)\"\r\n >\r\n <div class=\"caption\" *ngIf=\"canShowParent(item)\">\r\n {{ item?.parentName }}\r\n </div>\r\n <span class=\"cursor\">{{ item.itemName }}</span>\r\n </div>\r\n <div\r\n class=\"caption\"\r\n *ngIf=\"item.breadcumbs && item.breadcumbs.length\"\r\n >\r\n <qms-breadcrumb\r\n class=\"breadcrumb-containe\"\r\n type=\"table\"\r\n numDisplayItem=\"1\"\r\n [nodes]=\"item.breadcumbs\"\r\n >\r\n </qms-breadcrumb>\r\n </div>\r\n </div>\r\n <div qms-line color=\"default-subtitle\" *ngIf=\"item?.displayId\">\r\n <ng-container *ngIf=\"item?.displayId\">\r\n <span class=\"material-icons-outlined\"> local_offer </span> ID:\r\n {{ item?.displayId }}\r\n </ng-container>\r\n <ng-container *ngIf=\"item.statusName\">\r\n {{ getItemStatus(item) }}</ng-container\r\n >\r\n </div>\r\n </qms-list-item>\r\n <div class=\"block\" *ngIf=\"!isNotEditedItem\">\r\n <button qms-btn-icon color=\"light\" mode=\"dark\" (click)=\"removeItem(i)\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n",
|
4886
4935
|
encapsulation: ViewEncapsulation.None,
|
4887
4936
|
styles: ["@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format(\"woff2\");unicode-range:U+0460-052f,U+1c80-1c88,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFUZ0bbck.woff2) format(\"woff2\");unicode-range:U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format(\"woff2\");unicode-range:U+1f??}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVp0bbck.woff2) format(\"woff2\");unicode-range:U+0370-03ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWp0bbck.woff2) format(\"woff2\");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+1ea0-1ef9,U+20ab}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFW50bbck.woff2) format(\"woff2\");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVZ0b.woff2) format(\"woff2\");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCFPrEHJA.woff2) format(\"woff2\");unicode-range:U+0460-052f,U+1c80-1c88,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCMPrEHJA.woff2) format(\"woff2\");unicode-range:U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCHPrEHJA.woff2) format(\"woff2\");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+1ea0-1ef9,U+20ab}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCGPrEHJA.woff2) format(\"woff2\");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCIPrE.woff2) format(\"woff2\");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}.list-related{font-family:Open Sans;font-style:normal;font-weight:400;color:#323232}.list-related .list-related__title{font-weight:600;font-size:.875rem;line-height:22px;margin-bottom:1rem}.list-related .list-related__body .list-related__body-parent{min-height:48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ddd}.list-related .list-related__body .list-related__body-parent .qms-list-item.mat-2-line.image-item{height:auto}.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .qms-list-item-content{margin:0}.list-related .list-related__body .list-related__body-parent .wrap-image.image-square,.list-related .list-related__body .list-related__body-parent .wrap-image.image-square img{background:transparent;margin:auto;height:24px;width:24px}.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .qms-list-text,.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .trailing-box{margin-left:1.5rem;border-bottom:none;padding-bottom:7px;padding-top:7px}.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .qms-list-text .material-icons-outlined,.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .trailing-box .material-icons-outlined{font-size:13px}.list-related .list-related__body .list-related__body-parent .breadcrumb-containe .qms-breadcrumb-item .mat-icon{font-size:16px!important;padding-bottom:1px}.list-related .list-related__body .list-related__body-parent .block{font-weight:400;font-size:1rem;line-height:28px;display:flex;align-items:center}.list-related .list-related__body .list-related__body-parent .block .title{margin-left:1.5rem;padding-top:5px;padding-bottom:5px}.list-related .list-related__body .list-related__body-parent .block .title .caption{color:rgba(0,0,0,.6);font-size:.75rem;line-height:22px}.list-related .list-related__body .list-related__body-parent .block mat-icon{color:rgba(0,0,0,.6);padding:0}.list-related .list-related__body .list-related__body-parent .block button.qms-btn-icon{width:40px;height:40px;line-height:40px}.list-related .list-related__body .list-related__body-child{font-weight:400;font-size:.875rem;line-height:22px}.list-related .list-related__body .list-related__body-child .default{min-height:48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ddd}.list-related .list-related__body .list-related__body-child .default .title{margin-left:3rem}.list-related .list-related__body .list-related__body-child .default .group-button{margin-right:2rem;display:flex}.list-related .list-related__body .remain{font-weight:600;font-size:.875rem;line-height:22px;display:flex;align-items:center;justify-content:space-between;background-color:#fafafa;color:#1954a9;min-height:48px;border-bottom:1px solid #ddd}.list-related .list-related__body .remain .title{margin-left:3rem}.label-green,.label-red,.label-yellow{font-family:Open Sans;font-style:normal;font-weight:600;display:inline-block;text-align:center;margin-left:1rem;width:24px;height:24px;font-size:.75rem;border-radius:1px}.label-red{background-color:#9e360f;color:#fff}.label-yellow{background-color:#e4cf53;color:rgba(0,0,0,.87)}.label-green{background-color:#00804c;color:#fff}.cursor{cursor:pointer}"]
|
4888
4937
|
},] }
|
@@ -4900,6 +4949,9 @@ RelatedListComponent.propDecorators = {
|
|
4900
4949
|
onItemSelect: [{ type: Output }]
|
4901
4950
|
};
|
4902
4951
|
|
4952
|
+
class TreeModel {
|
4953
|
+
}
|
4954
|
+
|
4903
4955
|
var ModuleType$1;
|
4904
4956
|
(function (ModuleType) {
|
4905
4957
|
ModuleType[ModuleType["documentProcess"] = 1] = "documentProcess";
|
@@ -4940,9 +4992,6 @@ class SearchRelatedItemsToChecklist {
|
|
4940
4992
|
class SearchRelatedItemsToRisk {
|
4941
4993
|
}
|
4942
4994
|
|
4943
|
-
class TreeModel {
|
4944
|
-
}
|
4945
|
-
|
4946
4995
|
class QMSRelatedGlobalService {
|
4947
4996
|
constructor() {
|
4948
4997
|
this.searchRelated = new BehaviorSubject([]);
|
@@ -4961,9 +5010,6 @@ QMSRelatedGlobalService.decorators = [
|
|
4961
5010
|
];
|
4962
5011
|
QMSRelatedGlobalService.ctorParameters = () => [];
|
4963
5012
|
|
4964
|
-
class TreeFlatNode {
|
4965
|
-
}
|
4966
|
-
|
4967
5013
|
class RelatedPopupComponent {
|
4968
5014
|
constructor(cdRef, translate, dialogRef, globalService, iconRegistry, sanitizer, appIconService, elem, data) {
|
4969
5015
|
this.cdRef = cdRef;
|
@@ -5080,6 +5126,7 @@ class RelatedPopupComponent {
|
|
5080
5126
|
newNodeDocs.rootName = item === null || item === void 0 ? void 0 : item.parentName;
|
5081
5127
|
newNodeDocs.subName = null;
|
5082
5128
|
newNodeDocs.statusId = item.status;
|
5129
|
+
newNodeDocs.statusName = item.statusName;
|
5083
5130
|
listNodeDocs.push(newNodeDocs);
|
5084
5131
|
}
|
5085
5132
|
});
|
@@ -5140,13 +5187,12 @@ class RelatedPopupComponent {
|
|
5140
5187
|
}
|
5141
5188
|
ngAfterViewChecked() {
|
5142
5189
|
this.cdRef.detectChanges();
|
5143
|
-
if (this.filteredOptions && this.filteredOptions.length) {
|
5144
|
-
|
5145
|
-
|
5146
|
-
}
|
5147
|
-
|
5148
|
-
|
5149
|
-
}
|
5190
|
+
// if (this.filteredOptions && this.filteredOptions.length) {
|
5191
|
+
// this.autoComplete.openPanel();
|
5192
|
+
// this.setResultHeight();
|
5193
|
+
// } else if (this.autoComplete) {
|
5194
|
+
// this.autoComplete.closePanel();
|
5195
|
+
// }
|
5150
5196
|
}
|
5151
5197
|
getDataTypeId(moduleId) {
|
5152
5198
|
let itemType;
|
@@ -5282,7 +5328,13 @@ class RelatedPopupComponent {
|
|
5282
5328
|
let node;
|
5283
5329
|
let typeId;
|
5284
5330
|
if (item.itemType === this.dataType.document) {
|
5285
|
-
// document
|
5331
|
+
// document
|
5332
|
+
const isExistInDisabled = this.disabledList2.findIndex(x => {
|
5333
|
+
return x.id && x.id.toLowerCase() === item.id.toLowerCase();
|
5334
|
+
});
|
5335
|
+
if (isExistInDisabled >= 0) {
|
5336
|
+
return;
|
5337
|
+
}
|
5286
5338
|
position = this.treeData2.findIndex(x => {
|
5287
5339
|
return x.childId === item.id;
|
5288
5340
|
});
|
@@ -5295,7 +5347,7 @@ class RelatedPopupComponent {
|
|
5295
5347
|
children: [],
|
5296
5348
|
parentId: node.rootId
|
5297
5349
|
};
|
5298
|
-
this.dataTrees.toArray()[1].
|
5350
|
+
this.dataTrees.toArray()[1].todoItemSelectionProcessDocument([treeNode]);
|
5299
5351
|
}
|
5300
5352
|
else {
|
5301
5353
|
let newNodeDocs = new TreeModel();
|
@@ -5306,6 +5358,7 @@ class RelatedPopupComponent {
|
|
5306
5358
|
newNodeDocs.childId = item.id;
|
5307
5359
|
newNodeDocs.childName = item.itemName;
|
5308
5360
|
newNodeDocs.statusId = item === null || item === void 0 ? void 0 : item['itemStatus'];
|
5361
|
+
newNodeDocs.statusName = item === null || item === void 0 ? void 0 : item['statusName'];
|
5309
5362
|
newNodeDocs.displayId = +item.itemNumberId;
|
5310
5363
|
this.treeData2 = [...this.treeData2, newNodeDocs];
|
5311
5364
|
let newSelectedDocs = new TreeFlatNode();
|
@@ -5366,7 +5419,7 @@ class RelatedPopupComponent {
|
|
5366
5419
|
children: [],
|
5367
5420
|
parentId: newNodeDocs.rootId
|
5368
5421
|
};
|
5369
|
-
this.dataTrees.toArray()[1].
|
5422
|
+
this.dataTrees.toArray()[1].todoItemSelectionProcessDocument([treeNode]);
|
5370
5423
|
}, 500);
|
5371
5424
|
}
|
5372
5425
|
}
|
@@ -5474,6 +5527,12 @@ class RelatedPopupComponent {
|
|
5474
5527
|
}
|
5475
5528
|
}
|
5476
5529
|
else {
|
5530
|
+
const isExistInDisabled = this.disabledList.findIndex(x => {
|
5531
|
+
return x.id && x.id.toLowerCase() === item.id.toLowerCase();
|
5532
|
+
});
|
5533
|
+
if (isExistInDisabled >= 0) {
|
5534
|
+
return;
|
5535
|
+
}
|
5477
5536
|
position = this.treeData1.findIndex(x => {
|
5478
5537
|
return x.childId && x.childId.toLowerCase() === item.id.toLowerCase();
|
5479
5538
|
});
|
@@ -5486,7 +5545,7 @@ class RelatedPopupComponent {
|
|
5486
5545
|
children: [],
|
5487
5546
|
parentId: node.rootId
|
5488
5547
|
};
|
5489
|
-
this.dataTrees.toArray()[0].
|
5548
|
+
this.dataTrees.toArray()[0].todoItemSelectionProcessDocument([treeNode]);
|
5490
5549
|
}
|
5491
5550
|
else {
|
5492
5551
|
let newNodeProcess = new TreeModel();
|
@@ -5557,7 +5616,7 @@ class RelatedPopupComponent {
|
|
5557
5616
|
children: [],
|
5558
5617
|
parentId: newNodeProcess.rootId
|
5559
5618
|
};
|
5560
|
-
this.dataTrees.toArray()[0].
|
5619
|
+
this.dataTrees.toArray()[0].todoItemSelectionProcessDocument([treeNode]);
|
5561
5620
|
}, 500);
|
5562
5621
|
}
|
5563
5622
|
}
|
@@ -5771,12 +5830,90 @@ class RelatedPopupComponent {
|
|
5771
5830
|
// if (this.treeConfig1.showCheckBox) {
|
5772
5831
|
this.selectedFolder = null;
|
5773
5832
|
this.itemInSplitview = [];
|
5833
|
+
this.checkedNodeList.forEach(element => {
|
5834
|
+
if (element.itemType === DataType$1.document) {
|
5835
|
+
element.status = this.getStatusDocs(element.id);
|
5836
|
+
element.breadcumbs = this.getBreadcumbAllParentDocs(element.id).slice(1).reverse();
|
5837
|
+
element.statusName = this.getStatusName(element.id);
|
5838
|
+
}
|
5839
|
+
if (element.itemType === DataType$1.process) {
|
5840
|
+
element.status = this.getStatusProcess(element.id);
|
5841
|
+
element.breadcumbs = this.getBreadcumbAllParentProcess(element.id).slice(1).reverse();
|
5842
|
+
}
|
5843
|
+
});
|
5774
5844
|
this.dialogRef.close(this.checkedNodeList);
|
5775
5845
|
// }
|
5776
5846
|
// else {
|
5777
5847
|
// this.dialogRef.close(this.selectedNode);
|
5778
5848
|
// }
|
5779
5849
|
}
|
5850
|
+
getStatusName(id) {
|
5851
|
+
let statusName = '';
|
5852
|
+
this.treeData2.forEach(x => {
|
5853
|
+
if (id.toString() === x.childId) {
|
5854
|
+
statusName = x.statusName;
|
5855
|
+
}
|
5856
|
+
});
|
5857
|
+
return statusName;
|
5858
|
+
}
|
5859
|
+
getBreadcumbAllParentProcess(id) {
|
5860
|
+
let tempParent = [];
|
5861
|
+
this.checkBreadcumbProcess(id, tempParent, function (arr) {
|
5862
|
+
tempParent = [...arr];
|
5863
|
+
});
|
5864
|
+
return tempParent;
|
5865
|
+
}
|
5866
|
+
getBreadcumbAllParentDocs(id) {
|
5867
|
+
let tempParent = [];
|
5868
|
+
this.checkBreadcumbDocument(id, tempParent, function (arr) {
|
5869
|
+
tempParent = [...arr];
|
5870
|
+
});
|
5871
|
+
return tempParent;
|
5872
|
+
}
|
5873
|
+
checkBreadcumbProcess(id, breadcumbs, callback) {
|
5874
|
+
for (let i = 0; i < this.treeControlNodeProcess.dataNodes.length; i++) {
|
5875
|
+
const tree = this.treeControlNodeProcess.dataNodes[i];
|
5876
|
+
if (id == tree.id) {
|
5877
|
+
breadcumbs = [...breadcumbs, tree];
|
5878
|
+
if (tree.parentId) {
|
5879
|
+
this.checkBreadcumbProcess(tree.parentId, breadcumbs, callback);
|
5880
|
+
}
|
5881
|
+
else {
|
5882
|
+
callback(breadcumbs);
|
5883
|
+
}
|
5884
|
+
}
|
5885
|
+
}
|
5886
|
+
}
|
5887
|
+
checkBreadcumbDocument(id, breadcumbs, callback) {
|
5888
|
+
for (let i = 0; i < this.treeControlNodeDocument.dataNodes.length; i++) {
|
5889
|
+
const tree = this.treeControlNodeDocument.dataNodes[i];
|
5890
|
+
if (id == tree.id) {
|
5891
|
+
breadcumbs = [...breadcumbs, tree];
|
5892
|
+
if (tree.parentId) {
|
5893
|
+
this.checkBreadcumbDocument(tree.parentId, breadcumbs, callback);
|
5894
|
+
}
|
5895
|
+
else {
|
5896
|
+
callback(breadcumbs);
|
5897
|
+
}
|
5898
|
+
}
|
5899
|
+
}
|
5900
|
+
}
|
5901
|
+
selectTreeControlNodeDocument(treeNodes) {
|
5902
|
+
this.treeControlNodeDocument = null;
|
5903
|
+
this.treeControlNodeDocument = treeNodes;
|
5904
|
+
this.treeControlNodeDocument.dataNodes = this.treeControlNodeDocument.dataNodes.filter(x => x.name !== null && x.name !== '');
|
5905
|
+
}
|
5906
|
+
selectTreeControlNodeProcess(treeNodes) {
|
5907
|
+
this.treeControlNodeProcess = null;
|
5908
|
+
this.treeControlNodeProcess = treeNodes;
|
5909
|
+
this.treeControlNodeProcess.dataNodes = this.treeControlNodeProcess.dataNodes.filter(x => x.name !== null && x.name !== '');
|
5910
|
+
}
|
5911
|
+
getStatusDocs(id) {
|
5912
|
+
return this.treeData2.filter(x => x.childId === id)[0].statusId;
|
5913
|
+
}
|
5914
|
+
getStatusProcess(id) {
|
5915
|
+
return this.treeData1.filter(x => x.childId === id)[0].statusId;
|
5916
|
+
}
|
5780
5917
|
getOffsetHeight(element, includeMargin) {
|
5781
5918
|
let elmHeight = 0, elmMargin = 0;
|
5782
5919
|
elmHeight = element.offsetHeight;
|
@@ -5944,6 +6081,9 @@ class RelatedPopupComponent {
|
|
5944
6081
|
}
|
5945
6082
|
selectNodeTreeEvent(node) {
|
5946
6083
|
var _a, _b, _c, _d;
|
6084
|
+
if (!node.itemType) {
|
6085
|
+
return;
|
6086
|
+
}
|
5947
6087
|
let position = -1;
|
5948
6088
|
let parentName = '';
|
5949
6089
|
let itemNumberId = '';
|
@@ -5979,7 +6119,7 @@ class RelatedPopupComponent {
|
|
5979
6119
|
RelatedPopupComponent.decorators = [
|
5980
6120
|
{ type: Component, args: [{
|
5981
6121
|
selector: 'qms-related-popup',
|
5982
|
-
template: "<div id=\"qmslib_related_popup\" class=\"qmslib__related__popup__container\">\r\n <div id=\"qmslib_related_popup_header\">\r\n <span mat-icon-button class=\"button__close\" (click)=\"onCloseClick()\">\r\n <mat-icon mat-icon>close</mat-icon>\r\n </span>\r\n <div id=\"qmslib_related_popup_header_001\" mat-dialog-content>\r\n <span>{{ moduleName | uppercase }}</span>\r\n </div>\r\n </div>\r\n\r\n <div\r\n id=\"qmslib_related_popup_search\"\r\n class=\"input__field\"\r\n (click)=\"showSearchResult()\"\r\n >\r\n <input\r\n #name\r\n type=\"text\"\r\n placeholder=\"{{ LANG.SEARCH }}\"\r\n matInput\r\n [formControl]=\"myControl\"\r\n [matAutocomplete]=\"auto\"\r\n #autoCompleteInputSearch\r\n />\r\n <mat-icon>search</mat-icon>\r\n </div>\r\n\r\n <div class=\"line__divider\"></div>\r\n\r\n <mat-autocomplete\r\n #auto=\"matAutocomplete\"\r\n [displayWith]=\"displayRelated\"\r\n class=\"mat-autocomplete_related-viewport\"\r\n >\r\n <cdk-virtual-scroll-viewport\r\n qms-scrollbar\r\n itemSize=\"10\"\r\n class=\"related-viewport\"\r\n >\r\n <ng-container *ngFor=\"let type of searchOrder\">\r\n <div\r\n class=\"search__module-result\"\r\n *ngIf=\"canShowSearchOption(type.value)\"\r\n >\r\n <span class=\"search__module-title\">{{ getTitle(type.value) }}</span>\r\n <mat-option\r\n class=\"search__option\"\r\n *ngFor=\"let option of getModuleFilteredOptions(type.value)\"\r\n [value]=\"option\"\r\n (click)=\"selectRelated(option)\"\r\n >\r\n <qms-list-item type=\"image-square\">\r\n <mat-icon\r\n leading-icon\r\n type=\"image-square\"\r\n [svgIcon]=\"getNodeIcon(option)\"\r\n ></mat-icon>\r\n <div qms-list-header>\r\n <div\r\n qms-line\r\n type=\"caption\"\r\n qms-tool-tip=\"{{\r\n isEllipsisActive(searchItemResult) ? option.parentName : ''\r\n }}\"\r\n mode=\"dark\"\r\n *ngIf=\"getParentName(option)\"\r\n >\r\n <span #searchItemResult class=\"search__result__parent-name\">\r\n {{ option.parentName }}\r\n </span>\r\n </div>\r\n <div qms-line type=\"subtitle\" class=\"search__option-name\">\r\n {{ option.itemName }}\r\n </div>\r\n <div\r\n class=\"caption\"\r\n *ngIf=\"option.breadcumbs && option.breadcumbs.length\"\r\n >\r\n <qms-breadcrumb\r\n class=\"breadcrumb-containe\"\r\n type=\"table\"\r\n numDisplayItem=\"1\"\r\n [nodes]=\"option.breadcumbs\"\r\n >\r\n </qms-breadcrumb>\r\n </div>\r\n </div>\r\n <div qms-line color=\"default-subtitle\" *ngIf=\"getItemId(option)\">\r\n <span class=\"material-icons-outlined search__description-icon\">\r\n local_offer\r\n </span>\r\n {{ getItemId(option) }}\r\n </div>\r\n </qms-list-item>\r\n </mat-option>\r\n </div>\r\n </ng-container>\r\n </cdk-virtual-scroll-viewport>\r\n </mat-autocomplete>\r\n\r\n <div class=\"row\">\r\n <div\r\n class=\"qms-scrollbar qmslib_related_popup_content\"\r\n [ngClass]=\"{\r\n panel__content_item: checkedNodeList.length,\r\n panel__content: !checkedNodeList.length,\r\n 'col-6': splitView,\r\n 'col-12': !splitView\r\n }\"\r\n >\r\n <mat-expansion-panel\r\n hideToggle\r\n id=\"qmslib_related_popup_common_001\"\r\n [expanded]=\"isCommonExpanded\"\r\n (opened)=\"isCommonExpanded = true\"\r\n (closed)=\"isCommonExpanded = false\"\r\n class=\"panel-tree\"\r\n >\r\n <mat-expansion-panel-header class=\"padding-5\">\r\n <mat-panel-title *ngIf=\"moduleId === module.documentProcess\">\r\n {{ LANG.PROCESSES | uppercase }}\r\n </mat-panel-title>\r\n <mat-panel-title *ngIf=\"moduleId === module.deviation\">\r\n {{ LANG.DEVIATION | uppercase }}\r\n </mat-panel-title>\r\n <mat-panel-title *ngIf=\"moduleId === module.checklist\">\r\n {{ LANG.CHECKLIST | uppercase }}\r\n </mat-panel-title>\r\n <mat-panel-title *ngIf=\"moduleId === module.risk\">\r\n {{ LANG.ASSESSMENT | uppercase }}\r\n </mat-panel-title>\r\n <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n <mat-icon>\r\n {{\r\n isCommonExpanded ? \"keyboard_arrow_up\" : \"keyboard_arrow_down\"\r\n }}\r\n </mat-icon>\r\n </button>\r\n </mat-expansion-panel-header>\r\n <div id=\"qmslib_related_popup_common_002\">\r\n <qms-tree\r\n [treeData]=\"treeData1\"\r\n [treeConfig]=\"treeConfig1\"\r\n [selectedData]=\"selectedData\"\r\n [selectedRiskData]=\"selectedRiskData\"\r\n [disabledList]=\"disabledList\"\r\n (checkBoxEvent)=\"getCommonCheckedNode($event)\"\r\n (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.area)\"\r\n (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n [expandOnTitleClick]=\"!splitView\"\r\n [parentNodeOnClick]=\"parentNodeSelected\"\r\n ></qms-tree>\r\n </div>\r\n </mat-expansion-panel>\r\n\r\n <div\r\n *ngIf=\"moduleId === module.documentProcess\"\r\n class=\"line__divider\"\r\n ></div>\r\n\r\n <mat-expansion-panel\r\n hideToggle\r\n *ngIf=\"moduleId === module.documentProcess\"\r\n id=\"qmslib_related_popup_document_001\"\r\n [expanded]=\"isDocumentExpanded\"\r\n (opened)=\"isDocumentExpanded = true\"\r\n (closed)=\"isDocumentExpanded = false\"\r\n class=\"panel-tree\"\r\n >\r\n <mat-expansion-panel-header class=\"padding-5\">\r\n <mat-panel-title> {{ LANG.DOCUMENTS | uppercase }} </mat-panel-title>\r\n <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n <mat-icon>\r\n {{\r\n isDocumentExpanded ? \"keyboard_arrow_up\" : \"keyboard_arrow_down\"\r\n }}\r\n </mat-icon>\r\n </button>\r\n </mat-expansion-panel-header>\r\n <div id=\"qmslib_related_popup_document_002\">\r\n <qms-tree\r\n [treeData]=\"treeData2\"\r\n [treeConfig]=\"treeConfig2\"\r\n [selectedData]=\"selectedData2\"\r\n [disabledList]=\"disabledList2\"\r\n (checkBoxEvent)=\"getDocumentCheckedNode($event)\"\r\n (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.folder)\"\r\n (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n [expandOnTitleClick]=\"!splitView\"\r\n [parentNodeOnClick]=\"parentNodeSelected\"\r\n ></qms-tree>\r\n </div>\r\n </mat-expansion-panel>\r\n </div>\r\n <div\r\n *ngIf=\"splitView\"\r\n class=\"\r\n qms-scrollbar\r\n qmslib-related-popup-splitview qmslib_related_popup_content\r\n col-6\r\n \"\r\n [ngClass]=\"{\r\n panel__content_item: checkedNodeList.length,\r\n panel__content: !checkedNodeList.length\r\n }\"\r\n >\r\n <div class=\"splitview-header\" *ngIf=\"selectedFolder\">\r\n {{ splitViewTitle }}\r\n </div>\r\n <div class=\"expand-node\" *ngFor=\"let node of itemInSplitview\">\r\n <mat-checkbox\r\n qms-group-options\r\n [disabled]=\"node.disabled\"\r\n color=\"default\"\r\n [checked]=\"isNodeSelected(node)\"\r\n (change)=\"toggleSelectItem(node)\"\r\n ></mat-checkbox>\r\n <mat-icon\r\n class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n [svgIcon]=\"getNodeIcon(node)\"\r\n ></mat-icon>\r\n <span class=\"text-node\">{{ node.itemName }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"checkedNodeList.length\" class=\"line__divider\"></div>\r\n\r\n <div *ngIf=\"checkedNodeList.length\" class=\"panel__item qms-scrollbar\">\r\n <div class=\"related__item__inline\" *ngFor=\"let item of checkedNodeList\">\r\n <button\r\n *ngIf=\"item.itemName\"\r\n mat-button\r\n class=\"related__item__content\"\r\n qms-tool-tip=\"{{\r\n isEllipsisActive(itemName) ? getItemChipName(item) : ''\r\n }}\"\r\n mode=\"dark\"\r\n >\r\n <span class=\"related__item__content_name\" #itemName>{{\r\n getItemChipName(item)\r\n }}</span>\r\n <mat-icon\r\n *ngIf=\"!(treeConfig1?.selectOne || treeConfig2?.selectOne)\"\r\n (click)=\"removeCheckedNodeList(item)\"\r\n >cancel</mat-icon\r\n >\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"line__divider\"></div>\r\n\r\n <div class=\"confirm__button__groups\">\r\n <button\r\n *ngIf=\"!checkedNodeList.length\"\r\n qms-btn\r\n style=\"margin-top: 7px\"\r\n (click)=\"onAddClick()\"\r\n >\r\n {{ LANG.ADD }}\r\n </button>\r\n <button\r\n *ngIf=\"checkedNodeList.length\"\r\n qms-btn\r\n style=\"margin-top: 0px\"\r\n (click)=\"onAddClick()\"\r\n >\r\n {{ LANG.ADD }} ({{ checkedNodeList.length }})\r\n </button>\r\n <button\r\n qms-btn-text\r\n [ngStyle]=\"{ 'margin-top': checkedNodeList.length ? '0px' : '7px' }\"\r\n (click)=\"onCloseClick()\"\r\n >\r\n {{ LANG.CANCEL }}\r\n </button>\r\n </div>\r\n</div>\r\n",
|
6122
|
+
template: "<div id=\"qmslib_related_popup\" class=\"qmslib__related__popup__container\">\r\n <div id=\"qmslib_related_popup_header\">\r\n <span mat-icon-button class=\"button__close\" (click)=\"onCloseClick()\">\r\n <mat-icon mat-icon>close</mat-icon>\r\n </span>\r\n <div id=\"qmslib_related_popup_header_001\" mat-dialog-content>\r\n <span>{{ moduleName | uppercase }}</span>\r\n </div>\r\n </div>\r\n\r\n <div\r\n id=\"qmslib_related_popup_search\"\r\n class=\"input__field\"\r\n (click)=\"showSearchResult()\"\r\n >\r\n <input\r\n #name\r\n type=\"text\"\r\n placeholder=\"{{ LANG.SEARCH }}\"\r\n matInput\r\n [formControl]=\"myControl\"\r\n [matAutocomplete]=\"auto\"\r\n #autoCompleteInputSearch\r\n />\r\n <mat-icon>search</mat-icon>\r\n </div>\r\n\r\n <div class=\"line__divider\"></div>\r\n\r\n <mat-autocomplete\r\n #auto=\"matAutocomplete\"\r\n class=\"mat-autocomplete_related-viewport\"\r\n >\r\n <cdk-virtual-scroll-viewport\r\n qms-scrollbar\r\n itemSize=\"10\"\r\n class=\"related-viewport\"\r\n >\r\n <ng-container *ngFor=\"let type of searchOrder\">\r\n <div\r\n class=\"search__module-result\"\r\n *ngIf=\"canShowSearchOption(type.value)\"\r\n >\r\n <span class=\"search__module-title\">{{ getTitle(type.value) }}</span>\r\n <mat-option\r\n class=\"search__option\"\r\n *ngFor=\"let option of getModuleFilteredOptions(type.value)\"\r\n [value]=\"option\"\r\n (click)=\"selectRelated(option)\"\r\n >\r\n <qms-list-item type=\"image-square\">\r\n <mat-icon\r\n leading-icon\r\n type=\"image-square\"\r\n [svgIcon]=\"getNodeIcon(option)\"\r\n ></mat-icon>\r\n <div qms-list-header>\r\n <div\r\n qms-line\r\n type=\"caption\"\r\n qms-tool-tip=\"{{\r\n isEllipsisActive(searchItemResult) ? option.parentName : ''\r\n }}\"\r\n mode=\"dark\"\r\n *ngIf=\"getParentName(option)\"\r\n >\r\n <span #searchItemResult class=\"search__result__parent-name\">\r\n {{ option.parentName }}\r\n </span>\r\n </div>\r\n <div qms-line type=\"subtitle\" class=\"search__option-name\">\r\n {{ option.itemName }}\r\n </div>\r\n <div\r\n class=\"caption\"\r\n *ngIf=\"option.breadcumbs && option.breadcumbs.length\"\r\n >\r\n <qms-breadcrumb\r\n class=\"breadcrumb-containe\"\r\n type=\"table\"\r\n numDisplayItem=\"1\"\r\n [nodes]=\"option.breadcumbs\"\r\n >\r\n </qms-breadcrumb>\r\n </div>\r\n </div>\r\n <div qms-line color=\"default-subtitle\" *ngIf=\"getItemId(option)\">\r\n <span class=\"material-icons-outlined search__description-icon\">\r\n local_offer\r\n </span>\r\n {{ getItemId(option) }}\r\n </div>\r\n </qms-list-item>\r\n </mat-option>\r\n </div>\r\n </ng-container>\r\n </cdk-virtual-scroll-viewport>\r\n </mat-autocomplete>\r\n\r\n <div class=\"row\">\r\n <div\r\n class=\"qms-scrollbar qmslib_related_popup_content\"\r\n [ngClass]=\"{\r\n panel__content_item: checkedNodeList.length,\r\n panel__content: !checkedNodeList.length,\r\n 'col-6': splitView,\r\n 'col-12': !splitView\r\n }\"\r\n >\r\n <mat-expansion-panel\r\n hideToggle\r\n id=\"qmslib_related_popup_common_001\"\r\n [expanded]=\"isCommonExpanded\"\r\n (opened)=\"isCommonExpanded = true\"\r\n (closed)=\"isCommonExpanded = false\"\r\n class=\"panel-tree\"\r\n >\r\n <mat-expansion-panel-header class=\"padding-5\">\r\n <mat-panel-title *ngIf=\"moduleId === module.documentProcess\">\r\n {{ LANG.PROCESSES | uppercase }}\r\n </mat-panel-title>\r\n <mat-panel-title *ngIf=\"moduleId === module.deviation\">\r\n {{ LANG.DEVIATION | uppercase }}\r\n </mat-panel-title>\r\n <mat-panel-title *ngIf=\"moduleId === module.checklist\">\r\n {{ LANG.CHECKLIST | uppercase }}\r\n </mat-panel-title>\r\n <mat-panel-title *ngIf=\"moduleId === module.risk\">\r\n {{ LANG.ASSESSMENT | uppercase }}\r\n </mat-panel-title>\r\n <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n <mat-icon>\r\n {{\r\n isCommonExpanded ? \"keyboard_arrow_up\" : \"keyboard_arrow_down\"\r\n }}\r\n </mat-icon>\r\n </button>\r\n </mat-expansion-panel-header>\r\n <div id=\"qmslib_related_popup_common_002\">\r\n <qms-tree\r\n [treeData]=\"treeData1\"\r\n [treeConfig]=\"treeConfig1\"\r\n [selectedData]=\"selectedData\"\r\n [selectedRiskData]=\"selectedRiskData\"\r\n [disabledList]=\"disabledList\"\r\n (checkBoxEvent)=\"getCommonCheckedNode($event)\"\r\n (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.area)\"\r\n (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n [expandOnTitleClick]=\"!splitView\"\r\n [parentNodeOnClick]=\"parentNodeSelected\"\r\n (treeControlNodes)=\"selectTreeControlNodeProcess($event)\"\r\n ></qms-tree>\r\n </div>\r\n </mat-expansion-panel>\r\n\r\n <div\r\n *ngIf=\"moduleId === module.documentProcess\"\r\n class=\"line__divider\"\r\n ></div>\r\n\r\n <mat-expansion-panel\r\n hideToggle\r\n *ngIf=\"moduleId === module.documentProcess\"\r\n id=\"qmslib_related_popup_document_001\"\r\n [expanded]=\"isDocumentExpanded\"\r\n (opened)=\"isDocumentExpanded = true\"\r\n (closed)=\"isDocumentExpanded = false\"\r\n class=\"panel-tree\"\r\n >\r\n <mat-expansion-panel-header class=\"padding-5\">\r\n <mat-panel-title> {{ LANG.DOCUMENTS | uppercase }} </mat-panel-title>\r\n <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n <mat-icon>\r\n {{\r\n isDocumentExpanded ? \"keyboard_arrow_up\" : \"keyboard_arrow_down\"\r\n }}\r\n </mat-icon>\r\n </button>\r\n </mat-expansion-panel-header>\r\n <div id=\"qmslib_related_popup_document_002\">\r\n <qms-tree\r\n [treeData]=\"treeData2\"\r\n [treeConfig]=\"treeConfig2\"\r\n [selectedData]=\"selectedData2\"\r\n [disabledList]=\"disabledList2\"\r\n (checkBoxEvent)=\"getDocumentCheckedNode($event)\"\r\n (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.folder)\"\r\n (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n [expandOnTitleClick]=\"!splitView\"\r\n [parentNodeOnClick]=\"parentNodeSelected\"\r\n (treeControlNodes)=\"selectTreeControlNodeDocument($event)\"\r\n ></qms-tree>\r\n </div>\r\n </mat-expansion-panel>\r\n </div>\r\n <div\r\n *ngIf=\"splitView\"\r\n class=\"\r\n qms-scrollbar\r\n qmslib-related-popup-splitview qmslib_related_popup_content\r\n col-6\r\n \"\r\n [ngClass]=\"{\r\n panel__content_item: checkedNodeList.length,\r\n panel__content: !checkedNodeList.length\r\n }\"\r\n >\r\n <div class=\"splitview-header\" *ngIf=\"selectedFolder\">\r\n {{ splitViewTitle }}\r\n </div>\r\n <div class=\"expand-node\" *ngFor=\"let node of itemInSplitview\">\r\n <mat-checkbox\r\n qms-group-options\r\n [disabled]=\"node.disabled\"\r\n color=\"default\"\r\n [checked]=\"isNodeSelected(node)\"\r\n (change)=\"toggleSelectItem(node)\"\r\n ></mat-checkbox>\r\n <mat-icon\r\n class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n [svgIcon]=\"getNodeIcon(node)\"\r\n ></mat-icon>\r\n <span class=\"text-node\">{{ node.itemName }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"checkedNodeList.length\" class=\"line__divider\"></div>\r\n\r\n <div *ngIf=\"checkedNodeList.length\" class=\"panel__item qms-scrollbar\">\r\n <div class=\"related__item__inline\" *ngFor=\"let item of checkedNodeList\">\r\n <button\r\n *ngIf=\"item.itemName\"\r\n mat-button\r\n class=\"related__item__content\"\r\n qms-tool-tip=\"{{\r\n isEllipsisActive(itemName) ? getItemChipName(item) : ''\r\n }}\"\r\n mode=\"dark\"\r\n >\r\n <span class=\"related__item__content_name\" #itemName>{{\r\n getItemChipName(item)\r\n }}</span>\r\n <mat-icon\r\n *ngIf=\"!(treeConfig1?.selectOne || treeConfig2?.selectOne)\"\r\n (click)=\"removeCheckedNodeList(item)\"\r\n >cancel</mat-icon\r\n >\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"line__divider\"></div>\r\n\r\n <div class=\"confirm__button__groups\">\r\n <button\r\n *ngIf=\"!checkedNodeList.length\"\r\n qms-btn\r\n style=\"margin-top: 7px\"\r\n (click)=\"onAddClick()\"\r\n >\r\n {{ LANG.ADD }}\r\n </button>\r\n <button\r\n *ngIf=\"checkedNodeList.length\"\r\n qms-btn\r\n style=\"margin-top: 0px\"\r\n (click)=\"onAddClick()\"\r\n >\r\n {{ LANG.ADD }} ({{ checkedNodeList.length }})\r\n </button>\r\n <button\r\n qms-btn-text\r\n [ngStyle]=\"{ 'margin-top': checkedNodeList.length ? '0px' : '7px' }\"\r\n (click)=\"onCloseClick()\"\r\n >\r\n {{ LANG.CANCEL }}\r\n </button>\r\n </div>\r\n</div>\r\n",
|
5983
6123
|
encapsulation: ViewEncapsulation.None,
|
5984
6124
|
styles: [".qms-scrollbar::-webkit-scrollbar{width:12px}.qms-scrollbar::-webkit-scrollbar-track{background:rgba(0,0,0,.12);background-clip:content-box}.qms-scrollbar::-webkit-scrollbar-thumb{background:rgba(0,0,0,.38);border-radius:20px;width:4px;border:4px solid transparent;background-clip:content-box}.qms-scrollbar::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.5);background-clip:content-box;border:4px solid transparent}.qms-scrollbar.none-scroll-bg::-webkit-scrollbar-track{background:transparent;background-clip:content-box}.qms__popup .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qms__danger button{border:none;color:#fff;padding:0;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;height:20px;width:20px;font-family:Open Sans;font-size:12px;font-weight:600;font-style:normal;line-height:16px}.qms__danger .red{background-color:#9e360f;margin-left:10px}.qms__danger .yellow{background-color:#e4cf53;margin-left:10px;color:#323232}.qms__danger .green{background-color:#00804c;margin-left:10px}.confirm__button__groups{margin-top:11px}.confirm__button__groups button{min-height:36px;width:auto;font-family:Open Sans;font-weight:500;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px;margin-right:5px;float:right}.confirm__button__groups .confirm{background:#f8f9f9}.confirm__button__groups .confirm:hover{background:#001983;color:#fff}.confirm__button__groups .confirm:disabled{cursor:not-allowed}.confirm__button__groups .cancel{background:#f8f9f9}.confirm__button__groups .cancel:hover{background:#001983;color:#fff}.qmslib__related__popup__container .input__field{display:flex;align-items:center}.qmslib__related__popup__container .input__field input{width:100%;padding:10px;outline:none;border:none;background:#eee}.qmslib__related__popup__container .input__field .mat-icon{margin-left:-30px;cursor:pointer;vertical-align:middle}.qmslib__related__popup__container .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qmslib__related__popup__container .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmslib__related__popup__container .panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel-tree .mat-expansion-panel-body{padding:0 12px 12px}.qmslib__related__popup__container .mat-expansion-panel-header{height:30px;font-size:12px;letter-spacing:1px;font-family:Raleway;font-weight:600;padding:0}.qmslib__related__popup__container .mat-expansion-panel-header .mat-expansion-panel-header-title{align-items:center;margin-left:12px}.qmslib__related__popup__container .mat-expansion-panel-header .related_popup_toggle-btn{width:1.5rem;height:1.5rem;line-height:1.5rem}.qmslib__related__popup__container .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.qmslib__related__popup__container .panel__item{height:100px;margin-top:12px;overflow-x:hidden;overflow-y:auto;padding-right:5px;width:100%;max-width:100%;display:flex;flex-wrap:wrap;align-content:flex-start}.qmslib__related__popup__container .panel__item .related__item__inline{max-width:100%}.qmslib__related__popup__container .panel__item .related__item__content{height:32px;line-height:32px;background-color:#e5e5e5;max-width:100%;margin-bottom:5px;margin-left:2.5px;margin-right:2.5px}.qmslib__related__popup__container .panel__item .related__item__content .mat-icon{color:#8e8e8e;font-size:24px}.qmslib__related__popup__container .panel__item .related__item__content span.related__item__content_name{display:inline-block;min-width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:278px}.qmslib__related__popup__container .qmslib-related-popup-splitview{background-color:#fff;border-left:1px solid #ccc;height:450px;overflow-y:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview.panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview.panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview .splitview-header{height:30px;font-size:12px;letter-spacing:1px;font-family:RALEWAY;font-weight:600;display:flex;align-items:center}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options{padding:0}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options .mat-checkbox-inner-container{margin-right:11px}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options.mat-checkbox-checked{background:transparent!important}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node{margin-left:8px;display:flex;align-items:center;min-height:40px}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .mat-icon{color:rgba(0,0,0,.6);margin-right:17px;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .mat-icon svg{display:block;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}cdk-virtual-scroll-viewport{overflow-x:hidden}cdk-virtual-scroll-viewport .search__module-result{margin:1.5rem;padding:0 0 .5rem}cdk-virtual-scroll-viewport .search__module-result .search__module-title{font-size:14px;font-weight:600}cdk-virtual-scroll-viewport .search__module-result .search__option{height:auto;line-height:normal;padding:8px 0;border-bottom:1px solid #e0e0e0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item.mat-2-line.image-item{height:auto}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content{margin:0;border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square{width:2.5rem;height:100%;background:transparent;align-self:center;margin-right:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square img{width:24px;height:24px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .material-icons-outlined.leading-icon,cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content mat-icon.leading-icon{padding:4px 0 4px 4px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .subtitle{font-weight:400}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption{overflow:hidden;line-height:normal;white-space:normal;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding:0;margin:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption span.search__result__parent-name{display:inline-block;width:auto;width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .default-subtitle{color:rgba(0,0,0,.38)}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .search__description-icon{margin-right:0;width:12px;height:12px;font-size:12px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .qms-list-text{border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .breadcrumb-containe .qms-breadcrumb-item .mat-icon{font-size:16px!important;padding-bottom:1px}cdk-virtual-scroll-viewport .search__module-result svg{display:block}#qmslib_related_popup_header_001{margin-bottom:20px;padding:0;font-weight:600;font-family:Raleway}.padding-5{padding:5px}.mat-autocomplete_related-viewport{height:100%;max-height:100%!important}.mat-autocomplete_related-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mat-autocomplete_related-viewport .related-viewport{min-height:10.25rem}"]
|
5985
6125
|
},] }
|