From 55e95b4446676c3eb7d1d47798747d5bc7d08ff6 Mon Sep 17 00:00:00 2001
From: Maximiliano Forlenza <mforlenza@indec.gob.ar>
Date: Tue, 20 Feb 2024 06:11:46 -0300
Subject: [PATCH] fix(subQuestions): fix subQuestions id and align radio table

---
 package.json                            |  2 +-
 src/components/RadioTable/RadioTable.js | 15 ++++++++-------
 src/utils/buildQuestions.js             |  4 ++--
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 9cc9921..f107084 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@indec/form-builder",
-  "version": "3.1.2",
+  "version": "3.1.3",
   "description": "Form builder",
   "main": "index.js",
   "private": false,
diff --git a/src/components/RadioTable/RadioTable.js b/src/components/RadioTable/RadioTable.js
index 159b578..51ff301 100644
--- a/src/components/RadioTable/RadioTable.js
+++ b/src/components/RadioTable/RadioTable.js
@@ -3,7 +3,6 @@ import Box from '@mui/material/Box';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import MuiRadio from '@mui/material/Radio';
 import Typography from '@mui/material/Typography';
-import RadioGroup from '@mui/material/RadioGroup';
 import Stack from '@mui/material/Stack';
 
 import FieldMessage from '@/components/FieldMessage';
@@ -13,15 +12,17 @@ import optionPropTypes from '@/utils/propTypes/option';
 
 function RadioTable({options, label, form, field, disabled, warnings}) {
   return (
-    <Stack direction="column" sx={{width: '100%'}}>
+    <Stack direction="column">
       <InputLabel warnings={warnings} form={form} field={field} label={label} disabled={disabled} />
       {options.map(option => (
         <Box key={option.id}>
-          <Stack direction="row" spacing={5} alignItems="center">
-            <Box sx={{width: '400px'}}>
-              <Typography sx={{opacity: disabled ? 0.5 : 1}}>{option.title}</Typography>
+          <Stack direction={{xs: 'column', sm: 'row'}}>
+            <Box sx={{minWidth: '400px', maxWidth: '400px'}}>
+              <Typography noWrap sx={{opacity: disabled ? 0.5 : 1}}>
+                {option.title}
+              </Typography>
             </Box>
-            <RadioGroup row>
+            <Stack direction="row" flexWrap="wrap">
               {option.subOptions.map(subOption => (
                 <FormControlLabel
                   key={subOption.value}
@@ -40,7 +41,7 @@ function RadioTable({options, label, form, field, disabled, warnings}) {
                   disabled={disabled}
                 />
               ))}
-            </RadioGroup>
+            </Stack>
           </Stack>
         </Box>
       ))}
diff --git a/src/utils/buildQuestions.js b/src/utils/buildQuestions.js
index 2c2c8f2..51ee7eb 100644
--- a/src/utils/buildQuestions.js
+++ b/src/utils/buildQuestions.js
@@ -27,10 +27,10 @@ const getValue = question => {
 
 export const getSubQuestions = subQuestions =>
   Object.fromEntries(
-    subQuestions.map((subQuestion, index) => [
+    subQuestions.map(subQuestion => [
       subQuestion.name,
       {
-        id: index + 1,
+        id: subQuestion.id,
         answer: {value: ''}
       }
     ])