From 66bdb6afe10d7bd672ca9a75500f94305c7330ac Mon Sep 17 00:00:00 2001
From: RohitR311 <rohit.rajan031101@gmail.com>
Date: Sat, 28 Dec 2024 19:11:13 +0530
Subject: [PATCH] feat: display message if list fields is empty

---
 src/components/organisms/RightSidePanel.tsx | 112 ++++++++++----------
 1 file changed, 58 insertions(+), 54 deletions(-)

diff --git a/src/components/organisms/RightSidePanel.tsx b/src/components/organisms/RightSidePanel.tsx
index 12f75028..b09964e6 100644
--- a/src/components/organisms/RightSidePanel.tsx
+++ b/src/components/organisms/RightSidePanel.tsx
@@ -545,60 +545,64 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
               </Box>
             )}
             {step.type === 'list' && (
-              <>
-                <Typography>{t('right_panel.messages.list_selected')}</Typography>
-                {Object.entries(step.fields).map(([key, field]) => (
-                  <Box key={key}>
-                    <TextField
-                      label={t('right_panel.fields.field_label')}
-                      value={field.label || ''}
-                      onChange={(e) => handleTextLabelChange(field.id, e.target.value, step.id, key)}
-                      fullWidth
-                      margin="normal"
-                      InputProps={{
-                        readOnly: confirmedListTextFields[field.id]?.[key],
-                        startAdornment: (
-                          <InputAdornment position="start">
-                            <EditIcon />
-                          </InputAdornment>
-                        )
-                      }}
-                    />
-                    <TextField
-                      label={t('right_panel.fields.field_data')}
-                      value={field.data || ''}
-                      fullWidth
-                      margin="normal"
-                      InputProps={{
-                        readOnly: true,
-                        startAdornment: (
-                          <InputAdornment position="start">
-                            <TextFieldsIcon />
-                          </InputAdornment>
-                        )
-                      }}
-                    />
-                    {!confirmedListTextFields[step.id]?.[key] && (
-                      <Box display="flex" justifyContent="space-between" gap={2}>
-                        <Button
-                          variant="contained"
-                          onClick={() => handleListTextFieldConfirm(step.id, key)}
-                          disabled={!field.label?.trim()}
-                        >
-                          {t('right_panel.buttons.confirm')}
-                        </Button>
-                        <Button
-                          variant="contained"
-                          color="error"
-                          onClick={() => handleListTextFieldDiscard(step.id, key)}
-                        >
-                          {t('right_panel.buttons.discard')}
-                        </Button>
-                      </Box>
-                    )}
-                  </Box>
-                ))}
-              </>
+              Object.entries(step.fields).length === 0 ? (
+                <Typography>{t('right_panel.messages.list_empty')}</Typography>
+              ) : (
+                <>
+                  <Typography>{t('right_panel.messages.list_selected')}</Typography>
+                  {Object.entries(step.fields).map(([key, field]) => (
+                    <Box key={key}>
+                      <TextField
+                        label={t('right_panel.fields.field_label')}
+                        value={field.label || ''}
+                        onChange={(e) => handleTextLabelChange(field.id, e.target.value, step.id, key)}
+                        fullWidth
+                        margin="normal"
+                        InputProps={{
+                          readOnly: confirmedListTextFields[field.id]?.[key],
+                          startAdornment: (
+                            <InputAdornment position="start">
+                              <EditIcon />
+                            </InputAdornment>
+                          )
+                        }}
+                      />
+                      <TextField
+                        label={t('right_panel.fields.field_data')}
+                        value={field.data || ''}
+                        fullWidth
+                        margin="normal"
+                        InputProps={{
+                          readOnly: true,
+                          startAdornment: (
+                            <InputAdornment position="start">
+                              <TextFieldsIcon />
+                            </InputAdornment>
+                          )
+                        }}
+                      />
+                      {!confirmedListTextFields[step.id]?.[key] && (
+                        <Box display="flex" justifyContent="space-between" gap={2}>
+                          <Button
+                            variant="contained"
+                            onClick={() => handleListTextFieldConfirm(step.id, key)}
+                            disabled={!field.label?.trim()}
+                          >
+                            {t('right_panel.buttons.confirm')}
+                          </Button>
+                          <Button
+                            variant="contained"
+                            color="error"
+                            onClick={() => handleListTextFieldDiscard(step.id, key)}
+                          >
+                            {t('right_panel.buttons.discard')}
+                          </Button>
+                        </Box>
+                      )}
+                    </Box>
+                  ))}
+                </>
+              )
             )}
           </Box>
         ))}