@c10t/nice-component-library 0.0.11 → 0.0.12-a

package/components/tree/cva-flat-tree.component.d.ts

@@ -50,10 +50,11 @@ export declare class CvaFlatTreeComponent implements ControlValueAccessor, OnIni
     selectionChange: EventEmitter<any>;
     isFormControl: boolean;
     formControl: AbstractControl | undefined;
+    mapIndexes: Map<any, any>;
     chooseVirtualScroll?: CdkVirtualScrollViewport;
     selectedVirtualScroll?: CdkVirtualScrollViewport;
-    get NsValiator(): typeof ValidatorService;
     constructor(translateService: TranslateService, injector: Injector, cdr: ChangeDetectorRef, ngControl: NgControl);
+    get NsValiator(): typeof ValidatorService;
     setSelectedNode(): void;
     setDataSourceOrigin(): void;
     ngOnInit(): void;
@@ -66,9 +67,6 @@ export declare class CvaFlatTreeComponent implements ControlValueAccessor, OnIni
     checkIsView(isView: boolean | (() => boolean)): boolean;
     ngOnChanges(simpleChanges: SimpleChanges): void;
     transformer: (node: FlatTreeNodeModel, level: number) => FlatTreeNodeModel;
-    private _getLevel;
-    private _isExpandable;
-    private _getChildren;
     propagateChange: (_: any) => void;
     registerOnChange(fn: any): void;
     registerOnTouched(fn: any): void;
@@ -91,6 +89,10 @@ export declare class CvaFlatTreeComponent implements ControlValueAccessor, OnIni
     expandTreeDataSource(treeControl: FlatTreeControl<FlatTreeNodeModel>, expandProperty: 'isExpanded' | 'isFilterExpanded'): void;
     onLeafNodeClick(node: FlatTreeNodeModel): void;
     onParentNodeClick(node: FlatTreeNodeModel): void;
+    toggleNodeCheck(node: FlatTreeNodeModel, checked: boolean): void;
+    private _getLevel;
+    private _isExpandable;
+    private _getChildren;
     static ɵfac: i0.ɵɵFactoryDeclaration<CvaFlatTreeComponent, [null, null, null, { optional: true; self: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<CvaFlatTreeComponent, "cva-flat-tree", never, { "label": { "alias": "label"; "required": false; }; "required": { "alias": "required"; "required": false; }; "value": { "alias": "value"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "isView": { "alias": "isView"; "required": false; }; "isDisplayChooseTreeOnly": { "alias": "isDisplayChooseTreeOnly"; "required": false; }; "isHideCheckbox": { "alias": "isHideCheckbox"; "required": false; }; "isCollapseSelected": { "alias": "isCollapseSelected"; "required": false; }; "selectedLabelTitle": { "alias": "selectedLabelTitle"; "required": false; }; "viewHeight": { "alias": "viewHeight"; "required": false; }; "itemSize": { "alias": "itemSize"; "required": false; }; "percentOfLabelOutside": { "alias": "percentOfLabelOutside"; "required": false; }; "treeConfig": { "alias": "treeConfig"; "required": false; }; "isSearchOutSide": { "alias": "isSearchOutSide"; "required": false; }; "searchTextOutSide": { "alias": "searchTextOutSide"; "required": false; }; "errorMessages": { "alias": "errorMessages"; "required": false; }; "fullDatasource": { "alias": "fullDatasource"; "required": false; }; "isFormControl": { "alias": "isFormControl"; "required": false; }; }, { "selectionChange": "selectionChange"; }, never, never, false, never>;
 }

package/fesm2022/c10t-nice-component-library.mjs

@@ -7381,11 +7381,9 @@ class CvaFlatTreeComponent {
     isFormControl = true;
     // Cái này là để gắn khi nó là FormControl trong 1 FormGroup
     formControl;
+    mapIndexes = new Map();
     chooseVirtualScroll;
     selectedVirtualScroll;
-    get NsValiator() {
-        return ValidatorService;
-    }
     constructor(translateService, injector, cdr, ngControl) {
         this.translateService = translateService;
         this.injector = injector;
@@ -7406,6 +7404,9 @@ class CvaFlatTreeComponent {
         this.selectedDataSource = new MatTreeFlatDataSource(this.selectedTreeControl, this.selectedTreeFlattener);
         this.setSelectedNode();
     }
+    get NsValiator() {
+        return ValidatorService;
+    }
     setSelectedNode() {
         this.selectedDataSource.data = this.selectedFullDataSource;
         if (this.selectedVirtualScroll) {
@@ -7537,9 +7538,6 @@ class CvaFlatTreeComponent {
         node.checked = !!node.checked;
         return node;
     };
-    _getLevel = (node) => node.level;
-    _isExpandable = (node) => FlatTreeService.hasChild(node);
-    _getChildren = (node) => of(node.children ? node.children : []);
     propagateChange = (_) => {
         /*NON-EMPTY FOR COMPILE*/
     };
@@ -7557,14 +7555,24 @@ class CvaFlatTreeComponent {
             // if (this.multiple) {
             this.value = obj;
             // }
+            console.log('writeValue_0: ', new Date());
+            this.mapIndexes = new Map();
+            for (let i = 0; i < this.fullDataTreeControl.dataNodes.length; i++) {
+                this.mapIndexes.set(this.fullDataTreeControl.dataNodes[i].value, i);
+            }
+            console.log('writeValue_1: ', new Date());
             this.checkedDefaultValue();
+            console.log('writeValue_2: ', new Date());
             this.updateSelectAll();
+            console.log('writeValue_3: ', new Date());
             this.updateSelectedTree();
+            console.log('writeValue_4: ', new Date());
             this.propagateChange(this.value);
             this.callValidator();
             if (this.isView) {
                 this.selectedTreeControl.expandAll();
             }
+            console.log('writeValue_5: ', new Date());
             this.selectionChange.emit(Array.from(this.valueObjRef.values()));
         }
     }
@@ -7575,42 +7583,22 @@ class CvaFlatTreeComponent {
         this.expandTreeDataSource(this.selectedTreeControl, 'isExpanded');
     }
     checkedDefaultValue() {
-        let allChildNode;
-        for (const rootNode of this.fullDataDataSource.data) {
-            if (!FlatTreeService.hasChild(rootNode)) {
-                if (this.value.includes(rootNode.value)) {
-                    rootNode.checked = true;
-                    if (!this.valueObjRef.has(rootNode.value)) {
-                        this.valueObjRef.set(rootNode.value, rootNode);
-                    }
-                    this.selectedTreeChange(rootNode);
-                }
-                else {
-                    rootNode.checked = false;
-                    if (this.valueObjRef.has(rootNode.value)) {
-                        this.valueObjRef.delete(rootNode.value);
-                    }
-                    this.selectedTreeChange(rootNode);
-                }
-                continue;
+        this.valueObjRef.clear();
+        const valueSet = new Set(this.value);
+        for (const node of this.fullDataTreeControl.dataNodes) {
+            const isLeaf = !FlatTreeService.hasChild(node);
+            node.checked = isLeaf && valueSet.has(node.value);
+            if (isLeaf && node.checked) {
+                this.valueObjRef.set(node.value, node);
+            }
+            const orgNodeIndex = this.mapIndexes.get(node.value);
+            if (orgNodeIndex !== undefined) {
+                this.fullDataTreeControl.dataNodes[orgNodeIndex].checked = node.checked;
             }
-            allChildNode = this.getAllChildNode(this.fullDataTreeControl, rootNode);
-            allChildNode.forEach(childNode => {
-                if (!FlatTreeService.hasChild(childNode)) {
-                    childNode.checked = this.value.includes(childNode.value);
-                    if (!this.valueObjRef.has(childNode.value) && childNode.checked) {
-                        this.valueObjRef.set(childNode.value, childNode);
-                    }
-                    else if (this.valueObjRef.has(childNode.value) && !childNode.checked) {
-                        this.valueObjRef.delete(childNode.value);
-                    }
-                    this.selectedTreeChange(childNode);
-                }
-            });
         }
     }
     getAllChildNode(treeControl, node) {
-        const index = treeControl.dataNodes.findIndex(n => node.value === n.value);
+        const index = this.mapIndexes.get(node.value);
         let sameLevelNextIndex = -1;
         for (let i = index + 1; i < treeControl.dataNodes.length; i++) {
             if (node.level >= treeControl.dataNodes[i].level) {
@@ -7635,7 +7623,7 @@ class CvaFlatTreeComponent {
         node.checked = checked;
         let indexLeaf = -1;
         // update origin node
-        let orgNodeIndex = this.fullDataTreeControl.dataNodes.findIndex(n => n.value === node.value);
+        let orgNodeIndex = this.mapIndexes.get(node.value);
         /*this.getNodeInFullDataSource(child)*/
         this.fullDataTreeControl.dataNodes[orgNodeIndex].checked = checked;
         if (orgNodeIndex > -1 && !checked) {
@@ -7662,7 +7650,7 @@ class CvaFlatTreeComponent {
                 }
             }
             else {
-                orgNodeIndex = this.fullDataTreeControl.dataNodes.findIndex(n => n.value === child.value);
+                orgNodeIndex = this.mapIndexes.get(child.value);
                 if (orgNodeIndex > -1) {
                     this.fullDataTreeControl.dataNodes[orgNodeIndex].isExpanded = false;
                     this.fullDataTreeControl.dataNodes[orgNodeIndex].checked = this.fullDataTreeControl.dataNodes[orgNodeIndex].children?.every(n => n.checked);
@@ -7711,7 +7699,7 @@ class CvaFlatTreeComponent {
         if ((node.display && !this.checkDisabledNode(node)) || !!isSelectedChange) {
             node.checked = checked;
             // update origin node
-            const orgNodeIndex = this.fullDataTreeControl.dataNodes.findIndex(n => n.value === node.value);
+            const orgNodeIndex = this.mapIndexes.get(node.value);
             this.fullDataTreeControl.dataNodes[orgNodeIndex].checked = checked;
             if (checked) {
                 if (this.multiple) {
@@ -7887,6 +7875,53 @@ class CvaFlatTreeComponent {
             this.checkParentNode(true, node);
         }
     }
+    toggleNodeCheck(node, checked) {
+        const isLeaf = !FlatTreeService.hasChild(node);
+        console.log('1: ', new Date());
+        // Gọi 1 lần duy nhất nếu là parent
+        const descendants = isLeaf ? [] : this.fullDataTreeControl.getDescendants(node);
+        const affectedNodes = isLeaf ? [node] : descendants.filter(n => !FlatTreeService.hasChild(n));
+        console.log('2: ', new Date());
+        for (const leaf of affectedNodes) {
+            if (!leaf.display || this.checkDisabledNode(leaf))
+                continue;
+            const index = this.value.indexOf(leaf.value);
+            if (checked && index < 0) {
+                this.value.push(leaf.value);
+                this.valueObjRef.set(leaf.value, leaf);
+                leaf.checked = true;
+            }
+            if (!checked && index >= 0) {
+                this.value.splice(index, 1);
+                this.valueObjRef.delete(leaf.value);
+                leaf.checked = false;
+            }
+            const orgNodeIndex = this.mapIndexes.get(leaf.value);
+            if (orgNodeIndex !== undefined) {
+                this.fullDataTreeControl.dataNodes[orgNodeIndex].checked = leaf.checked;
+            }
+        }
+        console.log('3: ', new Date());
+        // Nếu node là cha → cập nhật isExpanded
+        if (!isLeaf) {
+            node.checked = checked;
+            const orgNodeIndex = this.mapIndexes.get(node.value);
+            if (orgNodeIndex !== undefined) {
+                this.fullDataTreeControl.dataNodes[orgNodeIndex].checked = checked;
+                this.fullDataTreeControl.dataNodes[orgNodeIndex].isExpanded = false;
+            }
+        }
+        else {
+            node.checked = checked;
+        }
+        console.log('4: ', new Date());
+        this.writeValue(this.value);
+        console.log('5: ', new Date());
+        this.cdr.detectChanges();
+    }
+    _getLevel = (node) => node.level;
+    _isExpandable = (node) => FlatTreeService.hasChild(node);
+    _getChildren = (node) => of(node.children ? node.children : []);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaFlatTreeComponent, deps: [{ token: i1.TranslateService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: CvaFlatTreeComponent, isStandalone: false, selector: "cva-flat-tree", inputs: { label: "label", required: "required", value: "value", multiple: "multiple", disabled: "disabled", isView: "isView", isDisplayChooseTreeOnly: "isDisplayChooseTreeOnly", isHideCheckbox: "isHideCheckbox", isCollapseSelected: "isCollapseSelected", selectedLabelTitle: "selectedLabelTitle", viewHeight: "viewHeight", itemSize: "itemSize", percentOfLabelOutside: "percentOfLabelOutside", treeConfig: "treeConfig", isSearchOutSide: "isSearchOutSide", searchTextOutSide: "searchTextOutSide", errorMessages: "errorMessages", fullDatasource: "fullDatasource", isFormControl: "isFormControl" }, outputs: { selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "chooseVirtualScroll", first: true, predicate: ["chooseAreaScrollViewport"], descendants: true }, { propertyName: "selectedVirtualScroll", first: true, predicate: ["selectedScrollViewport"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <div class="cva-flat-tree labelOutside"
@@ -7935,8 +7970,8 @@ class CvaFlatTreeComponent {
                                          (toggle)="toggleTreeControl(treeControl, node)"
                                          (onParentNodeClick)="onParentNodeClick(node)"
                                          (onLeafNodeClick)="onLeafNodeClick(node)"
-                                         (ngModelParentChange)="checkParentNode($event, node)"
-                                         (ngModelLeafChange)="checkLeafNode($event, node)">
+                                         (ngModelParentChange)="toggleNodeCheck(node, $event)"
+                                         (ngModelLeafChange)="toggleNodeCheck(node, $event)">
                 </cva-flat-tree-node-left>
               </ng-container>
             </cdk-virtual-scroll-viewport>
@@ -8027,8 +8062,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                                          (toggle)="toggleTreeControl(treeControl, node)"
                                          (onParentNodeClick)="onParentNodeClick(node)"
                                          (onLeafNodeClick)="onLeafNodeClick(node)"
-                                         (ngModelParentChange)="checkParentNode($event, node)"
-                                         (ngModelLeafChange)="checkLeafNode($event, node)">
+                                         (ngModelParentChange)="toggleNodeCheck(node, $event)"
+                                         (ngModelLeafChange)="toggleNodeCheck(node, $event)">
                 </cva-flat-tree-node-left>
               </ng-container>
             </cdk-virtual-scroll-viewport>