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

feat: add translation for right side panel

Browse Source
This commit is contained in:
RohitR311
2024-12-20 22:16:12 +05:30
parent f33ce5274c
commit fa4d839367
1 changed files with 46 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -22,6 +22,7 @@ import { emptyWorkflow } from "../../shared/constants";
import { getActiveWorkflow } from "../../api/workflow"; import { getActiveWorkflow } from "../../api/workflow";
import DeleteIcon from '@mui/icons-material/Delete'; import DeleteIcon from '@mui/icons-material/Delete';
import ActionDescriptionBox from '../molecules/ActionDescriptionBox'; import ActionDescriptionBox from '../molecules/ActionDescriptionBox';
import { useTranslation } from 'react-i18next';
const fetchWorkflow = (id: string, callback: (response: WorkflowFile) => void) => { const fetchWorkflow = (id: string, callback: (response: WorkflowFile) => void) => {
getActiveWorkflow(id).then( getActiveWorkflow(id).then(
@@ -60,6 +61,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
const { getText, startGetText, stopGetText, getScreenshot, startGetScreenshot, stopGetScreenshot, getList, startGetList, stopGetList, startPaginationMode, stopPaginationMode, paginationType, updatePaginationType, limitType, customLimit, updateLimitType, updateCustomLimit, stopLimitMode, startLimitMode, captureStage, setCaptureStage } = useActionContext(); const { getText, startGetText, stopGetText, getScreenshot, startGetScreenshot, stopGetScreenshot, getList, startGetList, stopGetList, startPaginationMode, stopPaginationMode, paginationType, updatePaginationType, limitType, customLimit, updateLimitType, updateCustomLimit, stopLimitMode, startLimitMode, captureStage, setCaptureStage } = useActionContext();
const { browserSteps, updateBrowserTextStepLabel, deleteBrowserStep, addScreenshotStep, updateListTextFieldLabel, removeListTextField } = useBrowserSteps(); const { browserSteps, updateBrowserTextStepLabel, deleteBrowserStep, addScreenshotStep, updateListTextFieldLabel, removeListTextField } = useBrowserSteps();
const { id, socket } = useSocketStore(); const { id, socket } = useSocketStore();
const { t } = useTranslation();
const workflowHandler = useCallback((data: WorkflowFile) => { const workflowHandler = useCallback((data: WorkflowFile) => {
setWorkflow(data); setWorkflow(data);
@@ -139,7 +141,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
setTextLabels(prevLabels => ({ ...prevLabels, [id]: label })); setTextLabels(prevLabels => ({ ...prevLabels, [id]: label }));
} }
if (!label.trim()) { if (!label.trim()) {
setErrors(prevErrors => ({ ...prevErrors, [id]: 'Label cannot be empty' })); setErrors(prevErrors => ({ ...prevErrors, [id]: t('right_panel.errors.label_required') }));
} else { } else {
setErrors(prevErrors => ({ ...prevErrors, [id]: '' })); setErrors(prevErrors => ({ ...prevErrors, [id]: '' }));
} }
@@ -151,7 +153,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
updateBrowserTextStepLabel(id, label); updateBrowserTextStepLabel(id, label);
setConfirmedTextSteps(prev => ({ ...prev, [id]: true })); setConfirmedTextSteps(prev => ({ ...prev, [id]: true }));
} else { } else {
setErrors(prevErrors => ({ ...prevErrors, [id]: 'Label cannot be empty' })); setErrors(prevErrors => ({ ...prevErrors, [id]: t('right_panel.errors.label_required') }));
} }
}; };
@@ -213,7 +215,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
const stopCaptureAndEmitGetTextSettings = useCallback(() => { const stopCaptureAndEmitGetTextSettings = useCallback(() => {
const hasUnconfirmedTextSteps = browserSteps.some(step => step.type === 'text' && !confirmedTextSteps[step.id]); const hasUnconfirmedTextSteps = browserSteps.some(step => step.type === 'text' && !confirmedTextSteps[step.id]);
if (hasUnconfirmedTextSteps) { if (hasUnconfirmedTextSteps) {
notify('error', 'Please confirm all text fields'); notify('error', t('right_panel.errors.confirm_text_fields'));
return; return;
} }
stopGetText(); stopGetText();
@@ -278,7 +280,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
if (settings) { if (settings) {
socket?.emit('action', { action: 'scrapeList', settings }); socket?.emit('action', { action: 'scrapeList', settings });
} else { } else {
notify('error', 'Unable to create list settings. Make sure you have defined a field for the list.'); notify('error', t('right_panel.errors.unable_create_settings'));
} }
handleStopGetList(); handleStopGetList();
onFinishCapture(); onFinishCapture();
@@ -296,13 +298,13 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
case 'pagination': case 'pagination':
if (!paginationType) { if (!paginationType) {
notify('error', 'Please select a pagination type.'); notify('error', t('right_panel.errors.select_pagination'));
return; return;
} }
const settings = getListSettingsObject(); const settings = getListSettingsObject();
const paginationSelector = settings.pagination?.selector; const paginationSelector = settings.pagination?.selector;
if (['clickNext', 'clickLoadMore'].includes(paginationType) && !paginationSelector) { if (['clickNext', 'clickLoadMore'].includes(paginationType) && !paginationSelector) {
notify('error', 'Please select the pagination element first.'); notify('error', t('right_panel.errors.select_pagination_element'));
return; return;
} }
stopPaginationMode(); stopPaginationMode();
@@ -314,12 +316,12 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
case 'limit': case 'limit':
if (!limitType || (limitType === 'custom' && !customLimit)) { if (!limitType || (limitType === 'custom' && !customLimit)) {
notify('error', 'Please select a limit or enter a custom limit.'); notify('error', t('right_panel.errors.select_limit'));
return; return;
} }
const limit = limitType === 'custom' ? parseInt(customLimit) : parseInt(limitType); const limit = limitType === 'custom' ? parseInt(customLimit) : parseInt(limitType);
if (isNaN(limit) || limit <= 0) { if (isNaN(limit) || limit <= 0) {
notify('error', 'Please enter a valid limit.'); notify('error', t('right_panel.errors.invalid_limit'));
return; return;
} }
stopLimitMode(); stopLimitMode();
@@ -348,7 +350,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
setTextLabels({}); setTextLabels({});
setErrors({}); setErrors({});
setConfirmedTextSteps({}); setConfirmedTextSteps({});
notify('error', 'Capture Text Discarded'); notify('error', t('right_panel.errors.capture_text_discarded'));
}, [browserSteps, stopGetText, deleteBrowserStep]); }, [browserSteps, stopGetText, deleteBrowserStep]);
const discardGetList = useCallback(() => { const discardGetList = useCallback(() => {
@@ -363,7 +365,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
setShowLimitOptions(false); setShowLimitOptions(false);
setCaptureStage('initial'); setCaptureStage('initial');
setConfirmedListTextFields({}); setConfirmedListTextFields({});
notify('error', 'Capture List Discarded'); notify('error', t('right_panel.errors.capture_list_discarded'));
}, [browserSteps, stopGetList, deleteBrowserStep, resetListState]); }, [browserSteps, stopGetList, deleteBrowserStep, resetListState]);
@@ -402,7 +404,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
</SimpleBox> */} </SimpleBox> */}
<ActionDescriptionBox /> <ActionDescriptionBox />
<Box display="flex" flexDirection="column" gap={2} style={{ margin: '13px' }}> <Box display="flex" flexDirection="column" gap={2} style={{ margin: '13px' }}>
{!getText && !getScreenshot && !getList && showCaptureList && <Button variant="contained" onClick={startGetList}>Capture List</Button>} {!getText && !getScreenshot && !getList && showCaptureList && <Button variant="contained" onClick={startGetList}>{t('right_panel.buttons.capture_list')}</Button>}
{getList && ( {getList && (
<> <>
<Box display="flex" justifyContent="space-between" gap={2} style={{ margin: '15px' }}> <Box display="flex" justifyContent="space-between" gap={2} style={{ margin: '15px' }}>
@@ -411,28 +413,29 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
onClick={handleConfirmListCapture} onClick={handleConfirmListCapture}
disabled={captureStage === 'initial' ? isConfirmCaptureDisabled : hasUnconfirmedListTextFields} disabled={captureStage === 'initial' ? isConfirmCaptureDisabled : hasUnconfirmedListTextFields}
> >
{captureStage === 'initial' ? 'Confirm Capture' : {captureStage === 'initial' ? t('right_panel.buttons.confirm_capture') :
captureStage === 'pagination' ? 'Confirm Pagination' : captureStage === 'pagination' ? t('right_panel.buttons.confirm_pagination') :
captureStage === 'limit' ? 'Confirm Limit' : 'Finish Capture'} captureStage === 'limit' ? t('right_panel.buttons.confirm_limit') :
t('right_panel.buttons.finish_capture')}
</Button> </Button>
<Button variant="outlined" color="error" onClick={discardGetList}>Discard</Button> <Button variant="outlined" color="error" onClick={discardGetList}>{t('right_panel.buttons.discard')}</Button>
</Box> </Box>
</> </>
)} )}
{showPaginationOptions && ( {showPaginationOptions && (
<Box display="flex" flexDirection="column" gap={2} style={{ margin: '13px' }}> <Box display="flex" flexDirection="column" gap={2} style={{ margin: '13px' }}>
<Typography>How can we find the next list item on the page?</Typography> <Typography>{t('right_panel.pagination.title')}</Typography>
<Button variant={paginationType === 'clickNext' ? "contained" : "outlined"} onClick={() => handlePaginationSettingSelect('clickNext')}>Click on next to navigate to the next page</Button> <Button variant={paginationType === 'clickNext' ? "contained" : "outlined"} onClick={() => handlePaginationSettingSelect('clickNext')}>{t('right_panel.pagination.click_next')}</Button>
<Button variant={paginationType === 'clickLoadMore' ? "contained" : "outlined"} onClick={() => handlePaginationSettingSelect('clickLoadMore')}>Click on load more to load more items</Button> <Button variant={paginationType === 'clickLoadMore' ? "contained" : "outlined"} onClick={() => handlePaginationSettingSelect('clickLoadMore')}>{t('right_panel.pagination.click_load_more')}</Button>
<Button variant={paginationType === 'scrollDown' ? "contained" : "outlined"} onClick={() => handlePaginationSettingSelect('scrollDown')}>Scroll down to load more items</Button> <Button variant={paginationType === 'scrollDown' ? "contained" : "outlined"} onClick={() => handlePaginationSettingSelect('scrollDown')}>{t('right_panel.pagination.scroll_down')}</Button>
<Button variant={paginationType === 'scrollUp' ? "contained" : "outlined"} onClick={() => handlePaginationSettingSelect('scrollUp')}>Scroll up to load more items</Button> <Button variant={paginationType === 'scrollUp' ? "contained" : "outlined"} onClick={() => handlePaginationSettingSelect('scrollUp')}>{t('right_panel.pagination.scroll_up')}</Button>
<Button variant={paginationType === 'none' ? "contained" : "outlined"} onClick={() => handlePaginationSettingSelect('none')}>No more items to load</Button> <Button variant={paginationType === 'none' ? "contained" : "outlined"} onClick={() => handlePaginationSettingSelect('none')}>{t('right_panel.pagination.none')}</Button>
</Box> </Box>
)} )}
{showLimitOptions && ( {showLimitOptions && (
<FormControl> <FormControl>
<FormLabel> <FormLabel>
<h4>What is the maximum number of rows you want to extract?</h4> <h4>{t('right_panel.limit.title')}</h4>
</FormLabel> </FormLabel>
<RadioGroup <RadioGroup
value={limitType} value={limitType}
@@ -446,13 +449,13 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
<FormControlLabel value="10" control={<Radio />} label="10" /> <FormControlLabel value="10" control={<Radio />} label="10" />
<FormControlLabel value="100" control={<Radio />} label="100" /> <FormControlLabel value="100" control={<Radio />} label="100" />
<div style={{ display: 'flex', alignItems: 'center' }}> <div style={{ display: 'flex', alignItems: 'center' }}>
<FormControlLabel value="custom" control={<Radio />} label="Custom" /> <FormControlLabel value="custom" control={<Radio />} label={t('right_panel.limit.custom')} />
{limitType === 'custom' && ( {limitType === 'custom' && (
<TextField <TextField
type="number" type="number"
value={customLimit} value={customLimit}
onChange={(e) => updateCustomLimit(e.target.value)} onChange={(e) => updateCustomLimit(e.target.value)}
placeholder="Enter number" placeholder={t('right_panel.limit.enter_number')}
sx={{ sx={{
marginLeft: '10px', marginLeft: '10px',
'& input': { '& input': {
@@ -467,21 +470,21 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
</RadioGroup> </RadioGroup>
</FormControl> </FormControl>
)} )}
{!getText && !getScreenshot && !getList && showCaptureText && <Button variant="contained" onClick={startGetText}>Capture Text</Button>} {!getText && !getScreenshot && !getList && showCaptureText && <Button variant="contained" onClick={startGetText}>{t('right_panel.buttons.capture_text')}</Button>}
{getText && {getText &&
<> <>
<Box display="flex" justifyContent="space-between" gap={2} style={{ margin: '15px' }}> <Box display="flex" justifyContent="space-between" gap={2} style={{ margin: '15px' }}>
<Button variant="outlined" onClick={stopCaptureAndEmitGetTextSettings} >Confirm</Button> <Button variant="outlined" onClick={stopCaptureAndEmitGetTextSettings} >{t('right_panel.buttons.confirm')}</Button>
<Button variant="outlined" color="error" onClick={discardGetText} >Discard</Button> <Button variant="outlined" color="error" onClick={discardGetText} >{t('right_panel.buttons.discard')}</Button>
</Box> </Box>
</> </>
} }
{!getText && !getScreenshot && !getList && showCaptureScreenshot && <Button variant="contained" onClick={startGetScreenshot}>Capture Screenshot</Button>} {!getText && !getScreenshot && !getList && showCaptureScreenshot && <Button variant="contained" onClick={startGetScreenshot}>{t('right_panel.buttons.capture_screenshot')}</Button>}
{getScreenshot && ( {getScreenshot && (
<Box display="flex" flexDirection="column" gap={2}> <Box display="flex" flexDirection="column" gap={2}>
<Button variant="contained" onClick={() => captureScreenshot(true)}>Capture Fullpage</Button> <Button variant="contained" onClick={() => captureScreenshot(true)}>{t('right_panel.screenshot.capture_fullpage')}</Button>
<Button variant="contained" onClick={() => captureScreenshot(false)}>Capture Visible Part</Button> <Button variant="contained" onClick={() => captureScreenshot(false)}>{t('right_panel.screenshot.capture_visible')}</Button>
<Button variant="outlined" color="error" onClick={stopGetScreenshot}>Discard</Button> <Button variant="outlined" color="error" onClick={stopGetScreenshot}>{t('right_panel.buttons.discard')}</Button>
</Box> </Box>
)} )}
</Box> </Box>
@@ -492,7 +495,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
step.type === 'text' && ( step.type === 'text' && (
<> <>
<TextField <TextField
label="Label" label={t('right_panel.fields.label')}
value={textLabels[step.id] || step.label || ''} value={textLabels[step.id] || step.label || ''}
onChange={(e) => handleTextLabelChange(step.id, e.target.value)} onChange={(e) => handleTextLabelChange(step.id, e.target.value)}
fullWidth fullWidth
@@ -510,7 +513,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
}} }}
/> />
<TextField <TextField
label="Data" label={t('right_panel.fields.data')}
value={step.data} value={step.data}
fullWidth fullWidth
margin="normal" margin="normal"
@@ -525,8 +528,8 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
/> />
{!confirmedTextSteps[step.id] && ( {!confirmedTextSteps[step.id] && (
<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 variant="contained" onClick={() => handleTextStepConfirm(step.id)} disabled={!textLabels[step.id]?.trim()}>{t('right_panel.buttons.confirm')}</Button>
<Button variant="contained" color="error" onClick={() => handleTextStepDiscard(step.id)}>Discard</Button> <Button variant="contained" color="error" onClick={() => handleTextStepDiscard(step.id)}>{t('right_panel.buttons.discard')}</Button>
</Box> </Box>
)} )}
</> </>
@@ -535,17 +538,19 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
<Box display="flex" alignItems="center"> <Box display="flex" alignItems="center">
<DocumentScannerIcon sx={{ mr: 1 }} /> <DocumentScannerIcon sx={{ mr: 1 }} />
<Typography> <Typography>
{`Take ${step.fullPage ? 'Fullpage' : 'Visible Part'} Screenshot`} {step.fullPage ?
t('right_panel.screenshot.display_fullpage') :
t('right_panel.screenshot.display_visible')}
</Typography> </Typography>
</Box> </Box>
)} )}
{step.type === 'list' && ( {step.type === 'list' && (
<> <>
<Typography>List Selected Successfully</Typography> <Typography>{t('right_panel.messages.list_selected')}</Typography>
{Object.entries(step.fields).map(([key, field]) => ( {Object.entries(step.fields).map(([key, field]) => (
<Box key={key}> <Box key={key}>
<TextField <TextField
label="Field Label" label={t('right_panel.fields.field_label')}
value={field.label || ''} value={field.label || ''}
onChange={(e) => handleTextLabelChange(field.id, e.target.value, step.id, key)} onChange={(e) => handleTextLabelChange(field.id, e.target.value, step.id, key)}
fullWidth fullWidth
@@ -560,7 +565,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
}} }}
/> />
<TextField <TextField
label="Field Data" label={t('right_panel.fields.field_data')}
value={field.data || ''} value={field.data || ''}
fullWidth fullWidth
margin="normal" margin="normal"
@@ -580,14 +585,14 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
onClick={() => handleListTextFieldConfirm(step.id, key)} onClick={() => handleListTextFieldConfirm(step.id, key)}
disabled={!field.label?.trim()} disabled={!field.label?.trim()}
> >
Confirm {t('right_panel.buttons.confirm')}
</Button> </Button>
<Button <Button
variant="contained" variant="contained"
color="error" color="error"
onClick={() => handleListTextFieldDiscard(step.id, key)} onClick={() => handleListTextFieldDiscard(step.id, key)}
> >
Discard {t('right_panel.buttons.discard')}
</Button> </Button>
</Box> </Box>
)} )}