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

package/components/cva-multi-select-autocomplete.d.ts

@@ -30,20 +30,21 @@ export declare class CvaMultiSelectAutocomplete implements ControlValueAccessor,
     selectedOptionDataChange: EventEmitter<SelectModel[]>;
     valueOptionRef: SelectModel[];
     isFormControl: boolean;
+    searchInputRef: any;
     formControl: AbstractControl | undefined;
     filteredOptions: SelectModel[];
     selectAllChecked: boolean;
-    _displayString: string;
-    get displayString(): string;
     labelCount: number;
     cdkVirtualScrollViewPort: CdkVirtualScrollViewport | undefined;
-    get NsValidator(): typeof ValidatorService;
     constructor(translateService: TranslateService, injector: Injector, ngControl: NgControl);
+    _displayString: string;
+    get displayString(): string;
+    get NsValidator(): typeof ValidatorService;
+    get selectedValue(): any[] | any;
+    set selectedValue(val: any[] | any);
     ngOnInit(): void;
     getRequired(): boolean;
     callValidator(): void;
-    get selectedValue(): any[] | any;
-    set selectedValue(val: any[] | any);
     propagateChange: (_: any) => void;
     writeValue(obj: any[] | any): void;
     registerOnChange(fn: any): void;

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

@@ -238,6 +238,15 @@ class OAuth2AuthenticationDto {
     userAuthentication = null;
     authorities = null;
     name = null;
+    orgId = null;
+    orgCode = null;
+    orgName = null;
+    orgType = null;
+    orgForm = null;
+    orgPath = null;
+    orgIsApproveVo = null;
+    sapId = null;
+    voAuthentication = null;
 }
 
 class Authority {
@@ -3939,19 +3948,13 @@ class CvaMultiSelectAutocomplete {
     valueOptionRef = [];
     // Chỉ bằng false khi trong NsSmartTable thôi nhé @@
     isFormControl = true;
+    searchInputRef;
     // Cái này là để gắn khi nó là FormControl trong 1 FormGroup
     formControl;
     filteredOptions = [];
     selectAllChecked = false;
-    _displayString = '';
-    get displayString() {
-        return this._displayString;
-    }
     labelCount = 1;
     cdkVirtualScrollViewPort;
-    get NsValidator() {
-        return ValidatorService;
-    }
     constructor(translateService, injector, ngControl) {
         this.translateService = translateService;
         this.injector = injector;
@@ -3959,6 +3962,19 @@ class CvaMultiSelectAutocomplete {
             ngControl.valueAccessor = this;
         }
     }
+    _displayString = '';
+    get displayString() {
+        return this._displayString;
+    }
+    get NsValidator() {
+        return ValidatorService;
+    }
+    get selectedValue() {
+        return this.value;
+    }
+    set selectedValue(val) {
+        // this.writeValue(val); // Đọc comment bên dưới matSelectionChange
+    }
     ngOnInit() {
         this.callValidator();
     }
@@ -3988,27 +4004,8 @@ class CvaMultiSelectAutocomplete {
                 this.formControl.setValue(this.value);
             }
             this.formControl.updateValueAndValidity();
-            // const ngControl = this.injector.get(NgControl);
-            // if (ngControl && ngControl.control && this.formControl.errors) {
-            //   ngControl.control.setErrors(this.formControl.errors);
-            // }
-            // if (this.formControl.valid) {
-            //     if (this.getRequired()) {
-            //         if (this.value === undefined || this.value === null || this.value === '' || (this.multiple && this.value.length === 0)){
-            //             this.formControl.setErrors({required: true});
-            //         }
-            //     }
-            //
-            //     this.formControl.markAllAsTouched();
-            // }
         }
     }
-    get selectedValue() {
-        return this.value;
-    }
-    set selectedValue(val) {
-        // this.writeValue(val); // Đọc comment bên dưới matSelectionChange
-    }
     propagateChange = (_) => {
         /*NON-EMPTY FOR COMPILE*/
     };
@@ -4034,16 +4031,7 @@ class CvaMultiSelectAutocomplete {
             this.selectedOptionDataChange.emit(this.valueOptionRef);
         }
         this._displayString = this.onDisplayString();
-        // console.log(this._displayString);
-    }
-    // private emitSelectedData(val: MatSelectChange) {
-    //     if (val.value != null && val.value != undefined) {
-    //         const dataArr: SelectModel[] = val.source._selectionModel.selected.map(matOption => {
-    //             return this.options[Number(matOption._getHostElement().getAttribute('data-optionIndex'))];
-    //         });
-    //         this.selectedOptionDataChange.emit(dataArr);
-    //     }
-    // }
+    }
     registerOnChange(fn) {
         this.propagateChange = fn;
     }
@@ -4055,13 +4043,9 @@ class CvaMultiSelectAutocomplete {
             this.options = simpleChanges.options.currentValue;
             this.filteredOptions = this.options;
         }
-        // console.log('CvaMultiSelectAutocomplete - ngOnChanges: ', this.value, this.options);
-        if (this.value != null && this.value != undefined) {
+        if (this.value != null) {
             this.writeValue(this.value);
         }
-        // else if (this.formControl.value) {
-        //     this.writeValue(this.formControl.value);
-        // }
     }
     toggleSelectAll(val) {
         if (val.checked) {
@@ -4204,9 +4188,16 @@ class CvaMultiSelectAutocomplete {
         }
     }
     openChange($event) {
-        if ($event && this.cdkVirtualScrollViewPort) {
-            this.cdkVirtualScrollViewPort.scrollToIndex(0);
-            this.cdkVirtualScrollViewPort.checkViewportSize();
+        if ($event) {
+            if (this.cdkVirtualScrollViewPort) {
+                this.cdkVirtualScrollViewPort.scrollToIndex(0);
+                this.cdkVirtualScrollViewPort.checkViewportSize();
+            }
+            setTimeout(() => {
+                if (this.searchInputRef?.nativeElement) {
+                    this.searchInputRef.nativeElement.focus();
+                }
+            }, 300);
         }
     }
     getItemSize() {
@@ -4218,7 +4209,7 @@ class CvaMultiSelectAutocomplete {
         return height > 200 ? 200 : height;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaMultiSelectAutocomplete, deps: [{ token: i1.TranslateService }, { token: i0.Injector }, { 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: CvaMultiSelectAutocomplete, isStandalone: false, selector: "cva-multi-select-autocomplete", inputs: { placeholder: "placeholder", label: "label", hint: "hint", value: "value", options: "options", disabled: "disabled", errorMessages: "errorMessages", multiple: "multiple", required: "required", isTree: "isTree", treeSymbol: "treeSymbol", sizeOfItemsInListByPixels: "sizeOfItemsInListByPixels", isLabelOutside: "isLabelOutside", isFloatLabel: "isFloatLabel", percentOfLabelOutside: "percentOfLabelOutside", isFormControl: "isFormControl" }, outputs: { selectionChange: "selectionChange", selectedOptionDataChange: "selectedOptionDataChange" }, viewQueries: [{ propertyName: "cdkVirtualScrollViewPort", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: CvaMultiSelectAutocomplete, isStandalone: false, selector: "cva-multi-select-autocomplete", inputs: { placeholder: "placeholder", label: "label", hint: "hint", value: "value", options: "options", disabled: "disabled", errorMessages: "errorMessages", multiple: "multiple", required: "required", isTree: "isTree", treeSymbol: "treeSymbol", sizeOfItemsInListByPixels: "sizeOfItemsInListByPixels", isLabelOutside: "isLabelOutside", isFloatLabel: "isFloatLabel", percentOfLabelOutside: "percentOfLabelOutside", isFormControl: "isFormControl" }, outputs: { selectionChange: "selectionChange", selectedOptionDataChange: "selectedOptionDataChange" }, viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "cdkVirtualScrollViewPort", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <!-- css labelOutside trong base.theme-->
     <div class="cva-multi-select-autocomplete"
          [ngClass]="{'labelOutside': !!isLabelOutside, 'float_label': !!isFloatLabel && !isLabelOutside}"
@@ -4425,6 +4416,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 type: Output
             }], isFormControl: [{
                 type: Input
+            }], searchInputRef: [{
+                type: ViewChild,
+                args: ['searchInput']
             }], cdkVirtualScrollViewPort: [{
                 type: ViewChild,
                 args: [CdkVirtualScrollViewport, { static: false }]
@@ -7381,11 +7375,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 +7398,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 +7532,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 +7549,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 +7577,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 +7617,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 +7644,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 +7693,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 +7869,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 +7964,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 +8056,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>