vodorod/parcer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: map browsersteps to workflow.workflow

Browse Source
This commit is contained in:
karishmas6
2024-10-10 16:18:16 +05:30
parent b191a45c6b
commit 42a5a25be6
1 changed files with 133 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

248
src/components/organisms/RightSidePanel.tsx
View File

@@ -120,15 +120,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
setHoverStates(prev => ({ ...prev, [id]: false })); setHoverStates(prev => ({ ...prev, [id]: false }));
}; };
const handlePairDelete = () => { const handlePairDelete = () => {}
// deletePair(index - 1).then((updatedWorkflow) => {
// updateWorkflow(updatedWorkflow);
// }).catch((error) => {
// console.error(error);
// });
// };
console.log("handlePairDelete")
}
const handleTextLabelChange = (id: number, label: string, listId?: number, fieldKey?: string) => { const handleTextLabelChange = (id: number, label: string, listId?: number, fieldKey?: string) => {
if (listId !== undefined && fieldKey !== undefined) { if (listId !== undefined && fieldKey !== undefined) {
@@ -459,135 +451,161 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
</Box> </Box>
)} )}
</Box> </Box>
<Box> {workflow.workflow && workflow.workflow.map((pair, i, workflow) => (
{browserSteps.map(step => ( <Box key={workflow.length - i} sx={{ mb: 2 }}>
<Box key={step.id} sx={{ boxShadow: 5, padding: '10px', margin: '13px', borderRadius: '4px', position: 'relative', }} onMouseEnter={() => handleMouseEnter(step.id)} onMouseLeave={() => handleMouseLeave(step.id)}> {browserSteps.map((step) => (
{ <Box
step.type === 'text' && ( key={step.id}
<> sx={{
{confirmedTextSteps[step.id] && hoverStates[step.id] && ( boxShadow: 5,
<IconButton padding: '10px',
onClick={() => handlePairDelete()} margin: '13px',
sx={{ borderRadius: '4px',
position: 'absolute', position: 'relative',
top: -15, }}
right: -15, onMouseEnter={() => handleMouseEnter(step.id)}
color: 'red', onMouseLeave={() => handleMouseLeave(step.id)}
p: 0, >
zIndex: 1, {step.type === 'text' && (
boxShadow: '5px', <>
backgroundColor: 'white', {confirmedTextSteps[step.id] && hoverStates[step.id] && (
borderRadius: '50%', <IconButton
}} onClick={() => handlePairDelete()}
> sx={{
<DeleteIcon sx={{ fontSize: 40 }} /> position: 'absolute',
</IconButton> top: -15,
)} right: -15,
color: 'red',
p: 0,
zIndex: 1,
boxShadow: '5px',
backgroundColor: 'white',
borderRadius: '50%',
}}
>
<DeleteIcon sx={{ fontSize: 40 }} />
</IconButton>
)}
<TextField
label="Label"
value={textLabels[step.id] || step.label || ''}
onChange={(e) => handleTextLabelChange(step.id, e.target.value)}
fullWidth
margin="normal"
error={!!errors[step.id]}
helperText={errors[step.id]}
InputProps={{
readOnly: confirmedTextSteps[step.id],
startAdornment: (
<InputAdornment position="start">
<EditIcon />
</InputAdornment>
),
}}
/>
<TextField
label="Data"
value={step.data}
fullWidth
margin="normal"
InputProps={{
readOnly: confirmedTextSteps[step.id],
startAdornment: (
<InputAdornment position="start">
<TextFieldsIcon />
</InputAdornment>
),
}}
/>
{!confirmedTextSteps[step.id] && (
<Box display="flex" justifyContent="space-between" gap={2}>
<Button
variant="contained"
onClick={() => handleTextStepConfirm(step.id)}
disabled={!textLabels[step.id]?.trim()}
>
Confirm
</Button>
<Button
variant="contained"
onClick={() => handleTextStepDiscard(step.id)}
>
Discard
</Button>
</Box>
)}
</>
)}
{step.type === 'screenshot' && (
<Box display="flex" alignItems="center">
<DocumentScannerIcon sx={{ mr: 1 }} />
<Typography>
{`Take ${step.fullPage ? 'Fullpage' : 'Visible Part'} Screenshot`}
</Typography>
</Box>
)}
{step.type === 'list' && (
<>
<Typography>List Selected Successfully</Typography>
{Object.entries(step.fields).map(([key, field]) => (
<Box key={key}>
<TextField <TextField
label="Label" label="Field Label"
value={textLabels[step.id] || step.label || ''} value={field.label || ''}
onChange={(e) => handleTextLabelChange(step.id, e.target.value)} onChange={(e) =>
handleTextLabelChange(field.id, e.target.value, step.id, key)
}
fullWidth fullWidth
margin="normal" margin="normal"
error={!!errors[step.id]}
helperText={errors[step.id]}
InputProps={{ InputProps={{
readOnly: confirmedTextSteps[step.id], readOnly: confirmedListTextFields[field.id]?.[key],
startAdornment: ( startAdornment: (
<InputAdornment position="start"> <InputAdornment position="start">
<EditIcon /> <EditIcon />
</InputAdornment> </InputAdornment>
) ),
}} }}
/> />
<TextField <TextField
label="Data" label="Field Data"
value={step.data} value={field.data || ''}
fullWidth fullWidth
margin="normal" margin="normal"
InputProps={{ InputProps={{
readOnly: confirmedTextSteps[step.id], readOnly: true,
startAdornment: ( startAdornment: (
<InputAdornment position="start"> <InputAdornment position="start">
<TextFieldsIcon /> <TextFieldsIcon />
</InputAdornment> </InputAdornment>
) ),
}} }}
/> />
{!confirmedTextSteps[step.id] && ( {!confirmedListTextFields[step.id]?.[key] && (
<Box display="flex" justifyContent="space-between" gap={2}> <Box display="flex" justifyContent="space-between" gap={2}>
<Button variant="contained" onClick={() => handleTextStepConfirm(step.id)} disabled={!textLabels[step.id]?.trim()}>Confirm</Button> <Button
<Button variant="contained" onClick={() => handleTextStepDiscard(step.id)}>Discard</Button> variant="contained"
onClick={() => handleListTextFieldConfirm(step.id, key)}
disabled={!field.label?.trim()}
>
Confirm
</Button>
<Button
variant="contained"
onClick={() => handleListTextFieldDiscard(step.id, key)}
>
Discard
</Button>
</Box> </Box>
)} )}
</> </Box>
)} ))}
{step.type === 'screenshot' && ( </>
<Box display="flex" alignItems="center"> )}
<DocumentScannerIcon sx={{ mr: 1 }} /> </Box>
<Typography> ))}
{`Take ${step.fullPage ? 'Fullpage' : 'Visible Part'} Screenshot`} </Box>
</Typography> ))}
</Box>
)}
{step.type === 'list' && (
<>
<Typography>List Selected Successfully</Typography>
{Object.entries(step.fields).map(([key, field]) => (
<Box key={key}>
<TextField
label="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="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()}
>
Confirm
</Button>
<Button
variant="contained"
onClick={() => handleListTextFieldDiscard(step.id, key)}
>
Discard
</Button>
</Box>
)}
</Box>
))}
</>
)}
</Box>
))}
</Box>
</Paper> </Paper>
); );
}; };