@visns-studio/visns-components 4.4.9 → 4.4.10

package/components/crm/Field.jsx

@@ -1152,9 +1152,9 @@ function Field({
                         <thead>
                             <tr>
                                 <th></th>
-                                {tableRadioColumns.map((column, columnKey) => (
+                                {tableRadioColumns.map((column) => (
                                     <th
-                                        key={`${settings.id}-${columnKey.id}`}
+                                        key={`${settings.id}-${column.id}`}
                                         style={{
                                             width: '250px',
                                             whiteSpace: 'nowrap',
@@ -1166,9 +1166,9 @@ function Field({
                             </tr>
                         </thead>
                         <tbody>
-                            {tableRadioRows.map((row, rowKey) => (
+                            {tableRadioRows.map((row) => (
                                 <tr
-                                    key={`table-radio-row-${settings.id}-${rowKey}`}
+                                    key={`table-radio-row-${settings.id}-${row.id}`}
                                 >
                                     <td
                                         style={{
@@ -1177,27 +1177,25 @@ function Field({
                                     >
                                         {row.label}
                                     </td>
-                                    {tableRadioColumns.map(
-                                        (column, columnKey) => (
-                                            <td
-                                                key={`table-radio-cell-${settings.id}-${rowKey}-${columnKey}`}
-                                            >
-                                                <input
-                                                    type="checkbox"
-                                                    name={row.id}
-                                                    data-id={settings.id}
-                                                    onChange={
-                                                        onChangeTableRadio
-                                                    }
-                                                    checked={
-                                                        row.value === true
-                                                            ? true
-                                                            : false
-                                                    }
-                                                />
-                                            </td>
-                                        )
-                                    )}
+                                    {tableRadioColumns.map((column) => (
+                                        <td
+                                            key={`table-radio-cell-${settings.id}-${row.id}-${column.id}`}
+                                        >
+                                            {console.info(column, row)}
+                                            <input
+                                                type="checkbox"
+                                                name={row.id}
+                                                data-row-id={row.id}
+                                                data-column-id={column.id}
+                                                data-id={settings.id}
+                                                onChange={onChangeTableRadio}
+                                                checked={
+                                                    row.value?.[column.id] ===
+                                                    true
+                                                }
+                                            />
+                                        </td>
+                                    ))}
                                 </tr>
                             ))}
                         </tbody>

package/components/crm/generic/GenericDynamic.jsx

@@ -213,16 +213,11 @@ const GenericDynamic = ({
 
     const handleChangeTableRadio = (e) => {
         const {
-            name,
-            dataset: { id },
+            dataset: { id, rowId, columnId },
         } = e.target;
 
-        // console.info('Checkbox changed:', { name, id });
-
         setActiveForm((prevActiveForm) => {
-            // console.info('Previous activeForm:', prevActiveForm);
-
-            // Find the form that matches the given id
+            // Find the form element that matches the given id
             const formKey = Object.keys(prevActiveForm).find(
                 (key) => prevActiveForm[key].id === id
             );
@@ -234,15 +229,21 @@ const GenericDynamic = ({
                 return prevActiveForm;
             }
 
-            // console.info('Found formKey:', formKey);
-
             // Create a new rows array with toggled value properties
-            const updatedRows = prevActiveForm[formKey].rows.map((row) => ({
-                ...row,
-                value: row.id === name ? !row.value : row.value ?? false, // Toggle value if it exists, else set default to false
-            }));
-
-            // console.info('Updated rows:', updatedRows);
+            const updatedRows = prevActiveForm[formKey].rows.map((row) => {
+                if (row.id === rowId) {
+                    // Ensure the value is an object to handle multiple columns
+                    const updatedValue = {
+                        ...row.value,
+                        [columnId]: !row.value?.[columnId], // Toggle the specific column value
+                    };
+                    return {
+                        ...row,
+                        value: updatedValue,
+                    };
+                }
+                return row;
+            });
 
             // Return the updated activeForm state
             return {
@@ -255,6 +256,10 @@ const GenericDynamic = ({
         });
     };
 
+    useEffect(() => {
+        console.info(activeForm);
+    }, [activeForm]);
+
     const handleChangeAddTableTextRow = (id) => {
         setActiveForm((prevActiveForm) => {
             // Find the key of the form that matches the id
@@ -577,7 +582,7 @@ const GenericDynamic = ({
             if (templateStatus) {
                 if (multiple) {
                     if (activeForm.hasOwnProperty('id') === false) {
-                        handleAddNewForm(false);
+                        // handleAddNewForm(false);
                     }
                 } else {
                     if (Object.keys(activeForm).length === 0) {

package/package.json

@@ -58,7 +58,7 @@
         "react-dom": "^17.0.1"
     },
     "name": "@visns-studio/visns-components",
-    "version": "4.4.9",
+    "version": "4.4.10",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "index.js",
     "scripts": {