@c10t/nice-component-library 0.0.27 → 0.0.28

package/components/table/cva-smart-table.component.d.ts

@@ -58,7 +58,7 @@ export declare class CvaSmartTableComponent implements ControlValueAccessor, OnC
     ngOnChanges(): void;
     ngOnInit(): void;
     ngAfterContentChecked(): void;
-    onClick(action: string, result: any, index: number | null): void;
+    onClick(action: string, result: any, index: number | null, mouseEvent?: MouseEvent): void;
     onCellValueChange(result: any, column: ColumnModel, $event: any): void;
     toggleSelect(val: MatCheckboxChange | null, result?: any, column?: ColumnModel): void;
     onDisplayHeaderCell(column: ColumnModel): boolean;

package/components/table/cva-table.component.d.ts

@@ -47,7 +47,7 @@ export declare class CvaTableComponent implements OnInit, AfterViewChecked {
     set paging(value: TablePagingRequestModel);
     isExpandColumn(col: ColumnModel): boolean;
     getPage(pageable: any): void;
-    onClick(action: string, result: any): void;
+    onClick(action: string, result: any, mouseEvent?: MouseEvent): void;
     ngOnInit(): void;
     onRowClick(result: any, index?: number): void;
     onDisplayHeaderCell(column: ColumnModel): boolean;

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

@@ -1,5 +1,5 @@
 import { FlatTreeControl } from '@angular/cdk/tree';
-import { AfterViewInit, ChangeDetectorRef, EventEmitter, Injector, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { ChangeDetectorRef, EventEmitter, Injector, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';
 import { AbstractControl, ControlValueAccessor, NgControl } from '@angular/forms';
 import { TranslateService } from '@ngx-translate/core';
@@ -8,7 +8,7 @@ import { FlatTreeNodeModel } from '../../models/components/flat-tree-node.model'
 import { ValidatorService } from '../../services/validator.service';
 import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import * as i0 from "@angular/core";
-export declare class CvaFlatTreeComponent implements ControlValueAccessor, OnInit, AfterViewInit, OnChanges {
+export declare class CvaFlatTreeComponent implements ControlValueAccessor, OnInit, OnChanges {
     private translateService;
     private injector;
     private cdr;
@@ -32,9 +32,9 @@ export declare class CvaFlatTreeComponent implements ControlValueAccessor, OnIni
     treeConfig?: FlatTreeConfigModel;
     isSearchOutSide: boolean;
     searchTextOutSide: string;
-    searchText: string;
     errorMessages: Map<string, (e?: any) => string>;
     fullDatasource: FlatTreeNodeModel[];
+    searchText: string;
     filterDatasource: FlatTreeNodeModel[];
     treeControl: FlatTreeControl<FlatTreeNodeModel>;
     treeFlattener: MatTreeFlattener<FlatTreeNodeModel, FlatTreeNodeModel>;
@@ -60,7 +60,6 @@ export declare class CvaFlatTreeComponent implements ControlValueAccessor, OnIni
     setSelectedNode(): void;
     setDataSourceOrigin(): void;
     ngOnInit(): void;
-    ngAfterViewInit(): void;
     getDisplayInputFunc(node: FlatTreeNodeModel): boolean;
     getDisabledInputFunc(node: FlatTreeNodeModel): boolean;
     checkDisabledNode(node: FlatTreeNodeModel): boolean;
@@ -81,8 +80,6 @@ export declare class CvaFlatTreeComponent implements ControlValueAccessor, OnIni
     selectedTreeChange(node: FlatTreeNodeModel): void;
     checkLeafNode(checked: boolean, node: FlatTreeNodeModel, isSelectedChange?: boolean): void;
     getRootNode(node: FlatTreeNodeModel): FlatTreeNodeModel | null;
-    deSelect(node: FlatTreeNodeModel): void;
-    deSelectParent(node: FlatTreeNodeModel): void;
     toggleTreeControl(treeControl: FlatTreeControl<FlatTreeNodeModel>, node: FlatTreeNodeModel): void;
     toggleSelectedTree(node?: FlatTreeNodeModel): void;
     onChangeSearchText(): void;
@@ -92,6 +89,7 @@ export declare class CvaFlatTreeComponent implements ControlValueAccessor, OnIni
     onLeafNodeClick(node: FlatTreeNodeModel): void;
     onParentNodeClick(node: FlatTreeNodeModel): void;
     toggleNodeCheck(node: FlatTreeNodeModel, checked: boolean): void;
+    getTotalSelected(nodes: FlatTreeNodeModel[]): number;
     private _getLevel;
     private _isExpandable;
     private _getChildren;

package/components/upload/cva-multi-upload.component.d.ts

@@ -9,6 +9,7 @@ export declare class CvaMultiUploadComponent implements ControlValueAccessor {
     maxSize: number | null;
     accept: string[] | null;
     label: string;
+    placeholder: string;
     required: string;
     disabled: boolean;
     percentOfLabelOutside: number;
@@ -26,5 +27,5 @@ export declare class CvaMultiUploadComponent implements ControlValueAccessor {
     onFileDroppedAction(fileList: FileList): void;
     validFile(fileList: FileList): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<CvaMultiUploadComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CvaMultiUploadComponent, "cva-multi-upload", never, { "files": { "alias": "files"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "maxSize": { "alias": "maxSize"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "label": { "alias": "label"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "percentOfLabelOutside": { "alias": "percentOfLabelOutside"; "required": false; }; }, { "onFileChange": "onFileChange"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CvaMultiUploadComponent, "cva-multi-upload", never, { "files": { "alias": "files"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "maxSize": { "alias": "maxSize"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "percentOfLabelOutside": { "alias": "percentOfLabelOutside"; "required": false; }; }, { "onFileChange": "onFileChange"; }, never, never, false, never>;
 }

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

@@ -98,6 +98,7 @@ class ButtonClickEvent {
     action;
     object;
     index;
+    mouseEvent;
     constructor(action, object, index) {
         this.action = action;
         this.object = object;
@@ -547,7 +548,7 @@ class BaseTableComponent {
     onRowButtonClick(event) {
         const window = this;
         if (window[event.action]) {
-            window[event.action](event.object, event.index);
+            window[event.action](event.object, event.index, event.mouseEvent);
         }
     }
     _collectParams(searchForm, map) {
@@ -2591,8 +2592,9 @@ class CvaTableComponent {
         this.toggleSelect(null, null);
         this.goToPageNumber = this.varPaging.pageNumber;
     }
-    onClick(action, result) {
+    onClick(action, result, mouseEvent) {
         const buttonClickEvent = new ButtonClickEvent(action, result);
+        buttonClickEvent.mouseEvent = mouseEvent;
         this.clickAction.emit(buttonClickEvent);
     }
     ngOnInit() {
@@ -2707,7 +2709,7 @@ class CvaTableComponent {
                                      fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
                                      (click)="$event.stopPropagation()">
                                     <button mat-icon-button color="{{column.button.color}}"
-                                            (click)="onClick(column.button.click, result)"
+                                            (click)="onClick(column.button.click, result, $event)"
                                             disabled="{{column.button.disabled ? column.button.disabled(result) : false}}"
                                             matTooltip="{{(column.button.title ? column.button.title : '') | translate}}"
                                             class="{{column.button.className}}"
@@ -2917,7 +2919,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                                      fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
                                      (click)="$event.stopPropagation()">
                                     <button mat-icon-button color="{{column.button.color}}"
-                                            (click)="onClick(column.button.click, result)"
+                                            (click)="onClick(column.button.click, result, $event)"
                                             disabled="{{column.button.disabled ? column.button.disabled(result) : false}}"
                                             matTooltip="{{(column.button.title ? column.button.title : '') | translate}}"
                                             class="{{column.button.className}}"
@@ -5173,8 +5175,9 @@ class CvaSmartTableComponent {
     /*
       Nếu sử dụng expandTableRow khi xử lý sự kiện bên ngoài component không sử dụng index bên trong base, set index lại bằng indexOf
     */
-    onClick(action, result, index) {
+    onClick(action, result, index, mouseEvent) {
         const buttonClickEvent = new ButtonClickEvent(action, result, index);
+        buttonClickEvent.mouseEvent = mouseEvent;
         this.clickAction.emit(buttonClickEvent);
     }
     onCellValueChange(result, column, $event) {
@@ -5351,7 +5354,7 @@ class CvaSmartTableComponent {
                                     <button mat-icon-button type="button"
                                             color="{{column.button.color}}"
                                             [ngClass]="column.button.className"
-                                            (click)="onClick(column.button.click, result, i)"
+                                            (click)="onClick(column.button.click, result, i, $event)"
                                             disabled="{{column.button && column.button.disabled ? column.button.disabled(result) : false}}"
                                             matTooltip="{{(column.button.title ? column.button.title : '') | translate}}"
                                             [ngSwitch]="TableService.getIconType(column.button)">
@@ -5628,7 +5631,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                                     <button mat-icon-button type="button"
                                             color="{{column.button.color}}"
                                             [ngClass]="column.button.className"
-                                            (click)="onClick(column.button.click, result, i)"
+                                            (click)="onClick(column.button.click, result, i, $event)"
                                             disabled="{{column.button && column.button.disabled ? column.button.disabled(result) : false}}"
                                             matTooltip="{{(column.button.title ? column.button.title : '') | translate}}"
                                             [ngSwitch]="TableService.getIconType(column.button)">
@@ -6376,6 +6379,7 @@ class CvaMultiUploadComponent {
     maxSize = null;
     accept = null;
     label = '';
+    placeholder = '';
     required = '';
     disabled = false;
     /* percent label outside css */
@@ -6466,7 +6470,7 @@ class CvaMultiUploadComponent {
         return true;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaMultiUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: CvaMultiUploadComponent, isStandalone: false, selector: "cva-multi-upload", inputs: { files: "files", multiple: "multiple", maxSize: "maxSize", accept: "accept", label: "label", required: "required", disabled: "disabled", percentOfLabelOutside: "percentOfLabelOutside" }, outputs: { onFileChange: "onFileChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: CvaMultiUploadComponent, isStandalone: false, selector: "cva-multi-upload", inputs: { files: "files", multiple: "multiple", maxSize: "maxSize", accept: "accept", label: "label", placeholder: "placeholder", required: "required", disabled: "disabled", percentOfLabelOutside: "percentOfLabelOutside" }, outputs: { onFileChange: "onFileChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CvaMultiUploadComponent),
@@ -6490,7 +6494,7 @@ class CvaMultiUploadComponent {
                     <mat-card-actions>
                         <button mat-button class="upload-button" color="warn" (click)="onClick()">
                             <mat-icon>add</mat-icon>
-                            <span>{{ 'common.upload.file' | translate }}</span>
+                            <span>{{ !!placeholder ? placeholder : 'common.upload.file' | translate }}</span>
                         </button>
                     </mat-card-actions>
                     <mat-card-content>
@@ -6527,7 +6531,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                     <mat-card-actions>
                         <button mat-button class="upload-button" color="warn" (click)="onClick()">
                             <mat-icon>add</mat-icon>
-                            <span>{{ 'common.upload.file' | translate }}</span>
+                            <span>{{ !!placeholder ? placeholder : 'common.upload.file' | translate }}</span>
                         </button>
                     </mat-card-actions>
                     <mat-card-content>
@@ -6561,6 +6565,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 type: Input
             }], label: [{
                 type: Input
+            }], placeholder: [{
+                type: Input
             }], required: [{
                 type: Input
             }], disabled: [{
@@ -8089,9 +8095,9 @@ class CvaFlatTreeComponent {
     treeConfig;
     isSearchOutSide = false;
     searchTextOutSide = '';
-    searchText = '';
     errorMessages = new Map();
     fullDatasource = [];
+    searchText = '';
     filterDatasource = [];
     treeControl;
     treeFlattener;
@@ -8153,9 +8159,6 @@ class CvaFlatTreeComponent {
     ngOnInit() {
         this.callValidator();
     }
-    ngAfterViewInit() {
-        // this.onChangeSearchText();
-    }
     getDisplayInputFunc(node) {
         return typeof (node._displayFuncInput) === 'function' ? node._displayFuncInput(node) : !!node._displayFuncInput;
     }
@@ -8278,13 +8281,8 @@ class CvaFlatTreeComponent {
         this.propagateChange(fn);
     }
     writeValue(obj) {
-        // if (this.multiple && !obj) {
-        //   obj = [];
-        // }
         if (obj) {
-            // if (this.multiple) {
             this.value = obj;
-            // }
             this.mapIndexes = new Map();
             for (let i = 0; i < this.fullDataTreeControl.dataNodes.length; i++) {
                 this.mapIndexes.set(this.fullDataTreeControl.dataNodes[i].value, i);
@@ -8463,12 +8461,6 @@ class CvaFlatTreeComponent {
         }
         return node;
     }
-    deSelect(node) {
-        this.checkLeafNode(false, node, true);
-    }
-    deSelectParent(node) {
-        this.checkParentNode(false, node, true);
-    }
     toggleTreeControl(treeControl, node) {
         treeControl.toggle(node);
         const orgNode = this.fullDataTreeControl.dataNodes.find(n => n.value === node.value);
@@ -8618,10 +8610,44 @@ class CvaFlatTreeComponent {
                 this.value.splice(index, 1);
             }
         }
+        if (isLeaf) {
+            const parentNode = this.getRootNode(node);
+            if (parentNode && FlatTreeService.hasChild(parentNode)) {
+                const allChild = this.getAllChildNode(this.fullDataTreeControl, parentNode);
+                // Kiểm tra còn node con nào trong value không
+                const hasChildInValue = allChild.some(child => this.value.includes(child.value));
+                if (!hasChildInValue) {
+                    const parentIndex = this.value.indexOf(parentNode.value);
+                    if (parentIndex >= 0) {
+                        this.value.splice(parentIndex, 1);
+                    }
+                }
+            }
+        }
         // Gọi writeValue để cập nhật cho FormControl
         this.writeValue(this.value);
         this.cdr.detectChanges();
     }
+    getTotalSelected(nodes) {
+        let count = 0;
+        for (const node of nodes) {
+            const isLeaf = !FlatTreeService.hasChild(node);
+            if (isLeaf) {
+                if (this.value.includes(node.value)) {
+                    count += 1;
+                }
+            }
+            else if (node.children && node.children.length > 0) {
+                const childChecked = this.getTotalSelected(node.children);
+                // Nếu tất cả các con được checked đồng nghĩa cha được checked thì mới cộng
+                if (childChecked === node.children.length) {
+                    count += 1;
+                }
+                count += childChecked;
+            }
+        }
+        return count;
+    }
     _getLevel = (node) => node.level;
     _isExpandable = (node) => FlatTreeService.hasChild(node);
     _getChildren = (node) => of(node.children ? node.children : []);
@@ -8687,7 +8713,7 @@ class CvaFlatTreeComponent {
                          *ngIf="!isDisplayChooseTreeOnly"
                          fxLayout="column" fxFlex="1 1 {{checkIsView(isView) ? '100%' : '50%'}}" fxFlex.lt-sm="100%">
                         <div class="header-area" *ngIf="!isView">
-                            <label>{{ selectedLabelTitle | translate }}{{ '(' + (value ? value.length : 0) + ')' }}</label>
+                            <label>{{ selectedLabelTitle | translate }}{{ '(' + getTotalSelected(fullDataDataSource.data) + ')' }}</label>
                             <div class="collapse-expand-all" (click)="toggleSelectedTree()">
                                 {{ (isCollapseSelected ? 'common.selected.tree.expandAll' : 'common.selected.tree.collapse') | translate }}
                                 <i class="fa {{isCollapseSelected ? 'fa-chevron-down' : 'fa-chevron-up'}}"></i>
@@ -8704,8 +8730,8 @@ class CvaFlatTreeComponent {
                                         [node]="node"
                                         [isView]="isView"
                                         (toggle)="toggleSelectedTree(node)"
-                                        (deSelectLeafNode)="deSelect(node)"
-                                        (deSelectParentNode)="deSelectParent(node)">
+                                        (deSelectLeafNode)="toggleNodeCheck(node, false)"
+                                        (deSelectParentNode)="toggleNodeCheck(node, false)">
                                 </cva-flat-tree-node-right>
                             </ng-container>
                         </cdk-virtual-scroll-viewport>
@@ -8784,7 +8810,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                          *ngIf="!isDisplayChooseTreeOnly"
                          fxLayout="column" fxFlex="1 1 {{checkIsView(isView) ? '100%' : '50%'}}" fxFlex.lt-sm="100%">
                         <div class="header-area" *ngIf="!isView">
-                            <label>{{ selectedLabelTitle | translate }}{{ '(' + (value ? value.length : 0) + ')' }}</label>
+                            <label>{{ selectedLabelTitle | translate }}{{ '(' + getTotalSelected(fullDataDataSource.data) + ')' }}</label>
                             <div class="collapse-expand-all" (click)="toggleSelectedTree()">
                                 {{ (isCollapseSelected ? 'common.selected.tree.expandAll' : 'common.selected.tree.collapse') | translate }}
                                 <i class="fa {{isCollapseSelected ? 'fa-chevron-down' : 'fa-chevron-up'}}"></i>
@@ -8801,8 +8827,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                                         [node]="node"
                                         [isView]="isView"
                                         (toggle)="toggleSelectedTree(node)"
-                                        (deSelectLeafNode)="deSelect(node)"
-                                        (deSelectParentNode)="deSelectParent(node)">
+                                        (deSelectLeafNode)="toggleNodeCheck(node, false)"
+                                        (deSelectParentNode)="toggleNodeCheck(node, false)">
                                 </cva-flat-tree-node-right>
                             </ng-container>
                         </cdk-virtual-scroll-viewport>