(feat)O3-4172: Adding functionality to change concept mapping ID

src/components/interactive-builder/modals/question/question-form/question-types/inputs/obs/obs-type-question.component.tsx

@@ -1,5 +1,5 @@
-import React, { useCallback, useMemo, useState } from 'react';
-import { FormLabel, InlineNotification, FormGroup, Stack } from '@carbon/react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { FormLabel, InlineNotification, FormGroup, Stack, Checkbox } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import ConceptSearch from '../../../common/concept-search/concept-search.component';
 import { useFormField } from '../../../../form-field-context';
@@ -9,6 +9,13 @@ import styles from './obs-type-question.scss';
 const ObsTypeQuestion: React.FC = () => {
   const { t } = useTranslation();
   const { formField, setFormField, concept, setConcept } = useFormField();
+  const [selectedMapping, setSelectedMapping] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (formField.questionOptions?.concept) {
+      setSelectedMapping(formField.questionOptions.concept);
+    }
+  }, [formField.questionOptions?.concept]);
 
   const getDatePickerType = useCallback((concept: Concept): DatePickerType | null => {
     const conceptDataType = concept.datatype.name;
@@ -37,13 +44,15 @@ const ObsTypeQuestion: React.FC = () => {
           },
           ...(datePickerType && { datePickerFormat: datePickerType }),
         }));
+        setSelectedMapping(null);
       }
     },
     [getDatePickerType, setFormField, setConcept],
   );
 
   const clearSelectedConcept = useCallback(() => {
     setConcept(null);
+    setSelectedMapping(null);
     setFormField((prevFormField) => {
       const updatedFormField = { ...prevFormField };
       if (updatedFormField.questionOptions) {
@@ -57,6 +66,34 @@ const ObsTypeQuestion: React.FC = () => {
     });
   }, [setFormField, setConcept]);
 
+  const handleCheckboxChange = useCallback(
+    (mapping: ConceptMapping) => {
+      const newConceptValue = `${mapping.type}:${mapping.value}`;
+      setSelectedMapping(newConceptValue);
+      setFormField((prevField) => ({
+        ...prevField,
+        questionOptions: {
+          ...prevField.questionOptions,
+          concept: newConceptValue,
+        },
+      }));
+    },
+    [setFormField],
+  );
+
+  const handleUncheckAll = useCallback(() => {
+    setSelectedMapping(null);
+    if (concept) {
+      setFormField((prevField) => ({
+        ...prevField,
+        questionOptions: {
+          ...prevField.questionOptions,
+          concept: concept.uuid,
+        },
+      }));
+    }
+  }, [concept, setFormField]);
+
   const conceptMappings: ConceptMapping[] = useMemo(() => {
     if (concept && concept.mappings) {
       return concept.mappings.map((conceptMapping) => {
@@ -97,6 +134,7 @@ const ObsTypeQuestion: React.FC = () => {
                 <th>{t('relationship', 'Relationship')}</th>
                 <th>{t('source', 'Source')}</th>
                 <th>{t('code', 'Code')}</th>
+                <th>{t('select', 'Select')}</th>
               </tr>
             </thead>
             <tbody>
@@ -105,6 +143,21 @@ const ObsTypeQuestion: React.FC = () => {
                   <td>{mapping.relationship}</td>
                   <td>{mapping.type}</td>
                   <td>{mapping.value}</td>
+                  <td>
+                    {mapping.relationship === 'SAME-AS' && (
+                      <Checkbox
+                        id={`checkbox-${index}`}
+                        checked={selectedMapping === `${mapping.type}:${mapping.value}`}
+                        onChange={() => {
+                          if (selectedMapping === `${mapping.type}:${mapping.value}`) {
+                            handleUncheckAll();
+                          } else {
+                            handleCheckboxChange(mapping);
+                          }
+                        }}
+                      />
+                    )}
+                  </td>
                 </tr>
               ))}
             </tbody>
@@ -114,5 +167,4 @@ const ObsTypeQuestion: React.FC = () => {
     </Stack>
   );
 };
-
 export default ObsTypeQuestion;