tailjng 0.0.31 → 0.0.33

package/cli/settings/header-generator.js

@@ -27,7 +27,7 @@ Authors:
 License:
   This project is licensed under the BSD 3-Clause - see the LICENSE file for more details.
 
-Version: 0.0.31
+Version: 0.0.33
 Creation Date: 2025-01-04
 ===============================================`
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailjng",
-  "version": "0.0.31",
+  "version": "0.0.33",
   "peerDependencies": {
     "@angular/common": "^19.2.0",
     "@angular/core": "^19.2.0",

package/src/lib/components/checkbox/checkbox-input/input-checkbox.component.ts

@@ -1,4 +1,4 @@
-import { Component, forwardRef, Input } from '@angular/core';
+import { Component, forwardRef, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { LucideAngularModule } from 'lucide-angular';
 import { JIconsService } from 'tailjng';
@@ -6,6 +6,7 @@ import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule, ControlValueAccess
 
 @Component({
   selector: 'JInputCheckbox',
+  standalone: true,
   imports: [CommonModule, LucideAngularModule, FormsModule, ReactiveFormsModule],
   templateUrl: './input-checkbox.component.html',
   styleUrls: ['./input-checkbox.component.css'],
@@ -17,7 +18,7 @@ import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule, ControlValueAccess
     }
   ]
 })
-export class JInputCheckboxComponent implements ControlValueAccessor {
+export class JInputCheckboxComponent implements OnChanges, ControlValueAccessor {
 
   @Input() title!: string;
   @Input() icon: any;
@@ -29,20 +30,23 @@ export class JInputCheckboxComponent implements ControlValueAccessor {
   @Input() column: any;
 
   @Input() getValue: (item: any, column: any) => boolean = () => false;
-  @Input() onCheckboxChange: (item: any, column: any) => void = () => { };
+  @Input() onCheckboxChange: (item: any, column: any, value: boolean) => void = () => { };
 
-  // ControlValueAccessor methods
+  innerValue: boolean = false;
   onChange: any = () => { };
   onTouched: any = () => { };
 
-  innerValue: boolean = false;
-
-  constructor(
-    public readonly iconsService: JIconsService
-  ) {
+  constructor(public readonly iconsService: JIconsService) {
     this.icon = this.iconsService.icons.check;
   }
 
+  ngOnChanges(changes: SimpleChanges): void {
+    if ((changes['item'] || changes['column']) && this.item && this.column) {
+      this.innerValue = this.getValue(this.item, this.column);
+      this.onChange(this.innerValue);
+    }
+  }
+
 
   /**
    * writeValue - To write a value to the component
@@ -50,7 +54,9 @@ export class JInputCheckboxComponent implements ControlValueAccessor {
    */
   writeValue(value: any): void {
     if (value !== undefined) {
-      this.innerValue = value;
+      this.innerValue = !!value;
+    } else if (this.item && this.column) {
+      this.innerValue = this.getValue(this.item, this.column);
     }
   }
 
@@ -60,7 +66,7 @@ export class JInputCheckboxComponent implements ControlValueAccessor {
    * registerOnChange - To register the change callback function
    * @param fn 
    */
-  registerOnChange(fn: (value: any) => void): void {
+  registerOnChange(fn: any): void {
     this.onChange = fn;
   }
 
@@ -70,7 +76,7 @@ export class JInputCheckboxComponent implements ControlValueAccessor {
    * registerOnTouched - To register the touched callback function
    * @param fn 
    */
-  registerOnTouched(fn: () => void): void {
+  registerOnTouched(fn: any): void {
     this.onTouched = fn;
   }
 
@@ -80,14 +86,14 @@ export class JInputCheckboxComponent implements ControlValueAccessor {
    * onCheckboxChangeHandler - To handle the checkbox change event
    * @param event 
    */
-  onCheckboxChangeHandler(event: Event): void {
+  onCheckboxChangeHandler(event: Event) {
     const target = event.target as HTMLInputElement;
     const newValue = target.checked;
 
     this.innerValue = newValue;
 
     if (this.onCheckboxChange) {
-      this.onCheckboxChange(this.item, this.column);
+      this.onCheckboxChange(this.item, this.column, newValue);
     }
 
     this.onChange(newValue);

package/src/lib/components/table/table-crud-complete/complete-crud-table.component.html

@@ -413,11 +413,10 @@
                                     <JInputCheckbox
                                       [item]="group"
                                       [column]="column"
-                                      [getValue]="getValue.bind(this)" 
-                                      [onCheckboxChange]="onCheckboxChange.bind(this)" 
+                                      [getValue]="getValue.bind(this)"
+                                      [onCheckboxChange]="onCheckboxChange.bind(this)"
                                       [iconSize]="20"
                                       [disabled]="column?.isDisabled ?? false"
-                                      [(ngModel)]="group[column.key]"
                                     />
                                   } 
                                   

package/src/lib/components/table/table-crud-complete/complete-crud-table.component.ts

@@ -381,29 +381,53 @@ export class JCompleteCrudTableComponent implements OnInit {
   // =====================================================
   // Change state in boolean fields
   // =====================================================
-
-  // MMethod to change the state of a checkbox
   onCheckboxChange(item: any, column: TableColumn<any>) {
 
-    // Get the ID field name based on dataProperty
-    const idField = `id_${this.mainEndpoint}`;
+    let key = column.key;
+    let recordId: any;
+    let endpoint = this.mainEndpoint;
+
+    // Verificar si es key compuesta
+    if (key.includes('.')) {
+      const parts = key.split('.');
+      const parent = parts[0];
+      const lastKey = parts[parts.length - 1];
 
-    // Get the record ID
-    const recordId = item[idField];
+      key = lastKey;
+
+      // El id corresponde a la tabla padre
+      recordId = item[`id_${parent}`];
+
+      // El endpoint también debe ser la tabla padre
+      endpoint = parent;
+    } else {
+      // key simple
+      recordId = item[`id_${this.mainEndpoint}`];
+    }
 
-    // Get the current boolean value
+    // Obtener el valor actual
     const currentValue = this.getValue(item, column);
 
     const formData: EnableBoolean<any> = {
-      key: column.key,
+      key: key,
       value: currentValue,
       values: [currentValue, !currentValue]
-    }
+    };
 
-    // Update state
-    this.genericService.enable<any>({ endpoint: this.mainEndpoint, id: recordId, data: formData }).subscribe({
+    // Llamar al servicio
+    this.genericService.enable<any>({ endpoint, id: recordId, data: formData }).subscribe({
       next: (response) => {
-        item[column.key] = !currentValue;
+        // Actualizar localmente el valor
+        if (column.key.includes('.')) {
+          const parts = column.key.split('.');
+          const parent = parts[0];
+          const lastKey = parts[parts.length - 1];
+
+          // Actualizar objeto anidado
+          item[parent] = { ...item[parent], [lastKey]: !currentValue };
+        } else {
+          item[key] = !currentValue;
+        }
 
         this.alertToastService.AlertToast({
           type: "success",
@@ -411,7 +435,7 @@ export class JCompleteCrudTableComponent implements OnInit {
           description: response.msg,
         });
       }
-    })
+    });
   }
 
   // Change active or inactive
@@ -874,7 +898,7 @@ export class JCompleteCrudTableComponent implements OnInit {
     return copy;
   }
 
-  // MMethod to save the editing of the item
+  // Method to save the editing of the item
   onSaveRow(item: any): void {
 
     // Get the name of the entity's id