display correct values in the table

unicef · May 9, 2024 · f8c7233 · f8c7233
1 parent b755d01
commit f8c7233
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 46 deletions.
diff --git a/...onents/grievances/RequestedIndividualDataChangeTable/DeliveryMechanismDataToEditTable.tsx b/...onents/grievances/RequestedIndividualDataChangeTable/DeliveryMechanismDataToEditTable.tsx
@@ -45,6 +45,7 @@ export function DeliveryMechanismDataToEditTable({
   index,
   deliveryMechanismDataToEdit,
 }: DeliveryMechanismDataToEditTableProps): React.ReactElement {
+  console.log('deliveryMechanismDataToEdit', deliveryMechanismDataToEdit);
   const { t } = useTranslation();
   const { selectedDeliveryMechanismDataToEdit } = values;
   const handleSelectDeliveryMechanismDataToEdit = (
@@ -73,52 +74,62 @@ export function DeliveryMechanismDataToEditTable({
           </Typography>
         </Box>
       </TableTitle>
-      <StyledTable>
-        <TableHead>
-          <TableRow>
-            <TableCell align="left">
-              {isEdit ? (
-                <Checkbox
-                  color="primary"
-                  data-cy="checkbox-edit-delivery-mechanism-data"
-                  onChange={(): void => {
-                    handleSelectDeliveryMechanismDataToEdit(index);
-                  }}
-                  disabled={
-                    ticket.status !== GRIEVANCE_TICKET_STATES.FOR_APPROVAL
-                  }
-                  checked={selectedDeliveryMechanismDataToEdit.includes(index)}
-                  inputProps={{ 'aria-labelledby': 'selected' }}
-                />
-              ) : (
-                selectedDeliveryMechanismDataToEdit.includes(index) && (
-                  <GreenIcon data-cy="green-check">
-                    <CheckCircleIcon />
-                  </GreenIcon>
-                )
-              )}
-            </TableCell>
-            <TableCell align="left">{t('Field')}</TableCell>
-            <TableCell align="left">{t('Current Value')}</TableCell>
-            <TableCell align="left">{t('New Value')}</TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          <TableRow>
-            <TableCell />
-            {/* <TableCell align="left">{t('Bank Name')}</TableCell>
-            <TableCell align="left">
-              {deliveryMechanismDataToEdit.previous_value.bank_name}
-            </TableCell>
-            <TableCell align="left">
-              {renderNewOrNotUpdated(
-                deliveryMechanismDataToEdit.previous_value?.bank_name,
-                deliveryMechanismDataToEdit.value?.bank_name,
-              )}
-            </TableCell> */}
-          </TableRow>
-        </TableBody>
-      </StyledTable>
+      <>
+        <Box style={{ position: 'relative', top: '15px' }}>
+          <Typography variant="subtitle2">
+            {deliveryMechanismDataToEdit.label}
+          </Typography>
+        </Box>
+        <StyledTable>
+          <TableHead>
+            <TableRow>
+              <TableCell style={{ width: '1%' }} align="left">
+                <div style={{ display: 'flex', alignItems: 'center' }}>
+                  {isEdit ? (
+                    <Checkbox
+                      color="primary"
+                      data-cy="checkbox-edit-delivery-mechanism-data"
+                      onChange={(): void => {
+                        handleSelectDeliveryMechanismDataToEdit(index);
+                      }}
+                      disabled={
+                        ticket.status !== GRIEVANCE_TICKET_STATES.FOR_APPROVAL
+                      }
+                      checked={selectedDeliveryMechanismDataToEdit.includes(
+                        index,
+                      )}
+                      inputProps={{ 'aria-labelledby': 'selected' }}
+                    />
+                  ) : (
+                    selectedDeliveryMechanismDataToEdit.includes(index) && (
+                      <GreenIcon data-cy="green-check">
+                        <CheckCircleIcon />
+                      </GreenIcon>
+                    )
+                  )}
+                </div>
+              </TableCell>
+              <TableCell align="left">{t('Field')}</TableCell>
+              <TableCell align="left">{t('Previous Value')}</TableCell>
+              <TableCell align="left">{t('New Value')}</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {deliveryMechanismDataToEdit.data_fields.map(
+              (field, fieldIndex) => (
+                <TableRow key={fieldIndex}>
+                  <TableCell align="left"></TableCell>
+                  <TableCell align="left">{field.name}</TableCell>
+                  <TableCell align="left">
+                    {field.previous_value || '-'}
+                  </TableCell>
+                  <TableCell align="left">{field.value}</TableCell>
+                </TableRow>
+              ),
+            )}
+          </TableBody>
+        </StyledTable>
+      </>
     </>
   );
 }
diff --git a/...ents/grievances/RequestedIndividualDataChangeTable/RequestedIndividualDataChangeTable.tsx b/...ents/grievances/RequestedIndividualDataChangeTable/RequestedIndividualDataChangeTable.tsx
@@ -48,7 +48,9 @@ export function RequestedIndividualDataChangeTable({
     payment_channels_to_edit: paymentChannelsToEdit,
     previous_payment_channels: previousPaymentChannels,
     flex_fields: flexFields,
+    delivery_mechanism_data: deliveryMechanismData,
     delivery_mechanism_data_to_edit: deliveryMechanismDataToEdit,
+    delivery_mechanism_data_to_remove: deliveryMechanismDataToRemove,
     ...restIndividualData
   } = individualData;
   const entries = restIndividualData && Object.entries(restIndividualData);