feat: form for move property

InseeFr · Feb 16, 2024 · f2c3a73 · f2c3a73
1 parent dbb80c4
commit f2c3a73
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 0 deletions.
diff --git a/src/i18n/identificationMessage.js b/src/i18n/identificationMessage.js
@@ -20,6 +20,9 @@ const identificationMessage = {
   housingCategory: { fr: 'Catégorie du logement', en: 'Housing category' },
   housingOccupant: { fr: "Identification de l'occupant", en: 'Occupant identification' },
   identification: { fr: 'Repérage', en: 'Identification' },
+  move: { fr: 'Déplacement terrain', en: 'Moving in the field' },
+  yes: { fr: 'Oui', en: 'Yes' },
+  no: { fr: 'Non', en: 'No' },
 };
 
 export default identificationMessage;
diff --git a/src/ui/SurveyUnit/IdentificationCard.jsx b/src/ui/SurveyUnit/IdentificationCard.jsx
@@ -9,13 +9,17 @@ import { ButtonLine } from '../ButtonLine';
 import { useIdentificationQuestions } from '../../utils/hooks/useIdentificationQuestions';
 
 import DialogTitle from '@mui/material/DialogTitle';
+import FormGroup from '@mui/material/FormGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
 import Dialog from '@mui/material/Dialog';
 import DialogContent from '@mui/material/DialogContent';
 import DialogActions from '@mui/material/DialogActions';
 import Button from '@mui/material/Button';
 import React, { useState } from 'react';
 import { RadioLine } from '../RadioLine';
 import RadioGroup from '@mui/material/RadioGroup';
+import { surveyUnitIDBService } from '../../utils/indexeddb/services/surveyUnit-idb-service';
 
 /**
  * @param {SurveyUnit} surveyUnit
@@ -44,6 +48,7 @@ export function IdentificationCard({ surveyUnit }) {
                   onClick={() => setQuestion(question)}
                 />
               ))}
+              <MoveQuestion surveyUnit={surveyUnit} />
             </Stack>
           </Stack>
         </CardContent>
@@ -60,6 +65,47 @@ export function IdentificationCard({ surveyUnit }) {
   );
 }
 
+/**
+ * @param {SurveyUnit} surveyUnit
+ */
+function MoveQuestion({ surveyUnit }) {
+  const options = [
+    { label: D.yes, value: true },
+    { label: D.no, value: false },
+  ];
+  const value = surveyUnit.move;
+  const handleChange = e => {
+    surveyUnitIDBService.addOrUpdateSU({
+      ...surveyUnit,
+      move: e.target.checked ? e.target.value === 'true' : null,
+    });
+  };
+  return (
+    <Row gap={2} mt={1}>
+      <Typography as="legend" color="textTertiary" variant="s">
+        {D.move}
+      </Typography>
+      <FormGroup row>
+        {options.map(option => (
+          <FormControlLabel
+            key={option.label}
+            sx={{ gap: 0 }}
+            control={
+              <Checkbox
+                size="small"
+                value={option.value}
+                checked={value === option.value}
+                onChange={handleChange}
+              />
+            }
+            label={option.label}
+          />
+        ))}
+      </FormGroup>
+    </Row>
+  );
+}
+
 function IdentificationDialog({ answers, question, onClose, onSubmit }) {
   const [localAnswer, setLocalAnswer] = useState(question?.answer?.value);