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

chore: lint

Browse Source
This commit is contained in:
amhsirak
2025-01-09 17:16:14 +05:30
parent 1530626c81
commit 2e24650263
1 changed files with 92 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -244,9 +244,9 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
const settings: Record<string, { selector: string; tag?: string;[key: string]: any }> = {}; const settings: Record<string, { selector: string; tag?: string;[key: string]: any }> = {};
browserSteps.forEach(step => { browserSteps.forEach(step => {
if (browserStepIdList.includes(step.id)) { if (browserStepIdList.includes(step.id)) {
return; return;
} }
if (step.type === 'text' && step.label && step.selectorObj?.selector) { if (step.type === 'text' && step.label && step.selectorObj?.selector) {
settings[step.label] = step.selectorObj; settings[step.label] = step.selectorObj;
} }
@@ -452,17 +452,17 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
const isConfirmCaptureDisabled = useMemo(() => { const isConfirmCaptureDisabled = useMemo(() => {
// Check if we are in the initial stage and if there are no browser steps or no valid list selectors with fields // Check if we are in the initial stage and if there are no browser steps or no valid list selectors with fields
if (captureStage !== 'initial') return false; if (captureStage !== 'initial') return false;
const hasValidListSelector = browserSteps.some(step => const hasValidListSelector = browserSteps.some(step =>
step.type === 'list' && step.type === 'list' &&
step.listSelector && step.listSelector &&
Object.keys(step.fields).length > 0 Object.keys(step.fields).length > 0
); );
// Disable the button if there are no valid list selectors or if there are unconfirmed list text fields // Disable the button if there are no valid list selectors or if there are unconfirmed list text fields
return !hasValidListSelector || hasUnconfirmedListTextFields; return !hasValidListSelector || hasUnconfirmedListTextFields;
}, [captureStage, browserSteps, hasUnconfirmedListTextFields]); }, [captureStage, browserSteps, hasUnconfirmedListTextFields]);
const theme = useThemeMode(); const theme = useThemeMode();
const isDarkMode = theme.darkMode; const isDarkMode = theme.darkMode;
return ( return (
@@ -470,10 +470,10 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
{/* <SimpleBox height={60} width='100%' background='lightGray' radius='0%'> {/* <SimpleBox height={60} width='100%' background='lightGray' radius='0%'>
<Typography sx={{ padding: '10px' }}>Last action: {` ${lastAction}`}</Typography> <Typography sx={{ padding: '10px' }}>Last action: {` ${lastAction}`}</Typography>
</SimpleBox> */} </SimpleBox> */}
<ActionDescriptionBox isDarkMode={isDarkMode} /> <ActionDescriptionBox isDarkMode={isDarkMode} />
<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}>{t('right_panel.buttons.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' }}>
@@ -481,11 +481,11 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
<Button <Button
variant="outlined" variant="outlined"
onClick={handleBackCaptureList} onClick={handleBackCaptureList}
sx={{ sx={{
color: '#ff00c3 !important', color: '#ff00c3 !important',
borderColor: '#ff00c3 !important', borderColor: '#ff00c3 !important',
backgroundColor: 'whitesmoke !important', backgroundColor: 'whitesmoke !important',
}} }}
> >
{t('right_panel.buttons.back')} {t('right_panel.buttons.back')}
</Button> </Button>
@@ -494,22 +494,22 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
variant="outlined" variant="outlined"
onClick={handleConfirmListCapture} onClick={handleConfirmListCapture}
disabled={captureStage === 'initial' ? isConfirmCaptureDisabled : hasUnconfirmedListTextFields} disabled={captureStage === 'initial' ? isConfirmCaptureDisabled : hasUnconfirmedListTextFields}
sx={{ sx={{
color: '#ff00c3 !important', color: '#ff00c3 !important',
borderColor: '#ff00c3 !important', borderColor: '#ff00c3 !important',
backgroundColor: 'whitesmoke !important', backgroundColor: 'whitesmoke !important',
}} }}
> >
{captureStage === 'initial' ? t('right_panel.buttons.confirm_capture') : {captureStage === 'initial' ? t('right_panel.buttons.confirm_capture') :
captureStage === 'pagination' ? t('right_panel.buttons.confirm_pagination') : captureStage === 'pagination' ? t('right_panel.buttons.confirm_pagination') :
captureStage === 'limit' ? t('right_panel.buttons.confirm_limit') : captureStage === 'limit' ? t('right_panel.buttons.confirm_limit') :
t('right_panel.buttons.finish_capture')} t('right_panel.buttons.finish_capture')}
</Button> </Button>
<Button <Button
variant="outlined" variant="outlined"
color="error" color="error"
onClick={discardGetList} onClick={discardGetList}
sx={{ sx={{
color: 'red !important', color: 'red !important',
borderColor: 'red !important', borderColor: 'red !important',
backgroundColor: 'whitesmoke !important', backgroundColor: 'whitesmoke !important',
@@ -522,50 +522,50 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
{showPaginationOptions && ( {showPaginationOptions && (
<Box display="flex" flexDirection="column" gap={2} style={{ margin: '13px' }}> <Box display="flex" flexDirection="column" gap={2} style={{ margin: '13px' }}>
<Typography>{t('right_panel.pagination.title')}</Typography> <Typography>{t('right_panel.pagination.title')}</Typography>
<Button <Button
variant={paginationType === 'clickNext' ? "contained" : "outlined"} variant={paginationType === 'clickNext' ? "contained" : "outlined"}
onClick={() => handlePaginationSettingSelect('clickNext')} onClick={() => handlePaginationSettingSelect('clickNext')}
sx={{ sx={{
color: paginationType === 'clickNext' ? 'whitesmoke !important' : '#ff00c3 !important', color: paginationType === 'clickNext' ? 'whitesmoke !important' : '#ff00c3 !important',
borderColor: '#ff00c3 !important', borderColor: '#ff00c3 !important',
backgroundColor: paginationType === 'clickNext' ? '#ff00c3 !important' : 'whitesmoke !important', backgroundColor: paginationType === 'clickNext' ? '#ff00c3 !important' : 'whitesmoke !important',
}}> }}>
{t('right_panel.pagination.click_next')} {t('right_panel.pagination.click_next')}
</Button> </Button>
<Button <Button
variant={paginationType === 'clickLoadMore' ? "contained" : "outlined"} variant={paginationType === 'clickLoadMore' ? "contained" : "outlined"}
onClick={() => handlePaginationSettingSelect('clickLoadMore')} onClick={() => handlePaginationSettingSelect('clickLoadMore')}
sx={{ sx={{
color: paginationType === 'clickLoadMore' ? 'whitesmoke !important' : '#ff00c3 !important', color: paginationType === 'clickLoadMore' ? 'whitesmoke !important' : '#ff00c3 !important',
borderColor: '#ff00c3 !important', borderColor: '#ff00c3 !important',
backgroundColor: paginationType === 'clickLoadMore' ? '#ff00c3 !important' : 'whitesmoke !important', backgroundColor: paginationType === 'clickLoadMore' ? '#ff00c3 !important' : 'whitesmoke !important',
}}> }}>
{t('right_panel.pagination.click_load_more')} {t('right_panel.pagination.click_load_more')}
</Button> </Button>
<Button <Button
variant={paginationType === 'scrollDown' ? "contained" : "outlined"} variant={paginationType === 'scrollDown' ? "contained" : "outlined"}
onClick={() => handlePaginationSettingSelect('scrollDown')} onClick={() => handlePaginationSettingSelect('scrollDown')}
sx={{ sx={{
color: paginationType === 'scrollDown' ? 'whitesmoke !important' : '#ff00c3 !important', color: paginationType === 'scrollDown' ? 'whitesmoke !important' : '#ff00c3 !important',
borderColor: '#ff00c3 !important', borderColor: '#ff00c3 !important',
backgroundColor: paginationType === 'scrollDown' ? '#ff00c3 !important' : 'whitesmoke !important', backgroundColor: paginationType === 'scrollDown' ? '#ff00c3 !important' : 'whitesmoke !important',
}}> }}>
{t('right_panel.pagination.scroll_down')} {t('right_panel.pagination.scroll_down')}
</Button> </Button>
<Button <Button
variant={paginationType === 'scrollUp' ? "contained" : "outlined"} variant={paginationType === 'scrollUp' ? "contained" : "outlined"}
onClick={() => handlePaginationSettingSelect('scrollUp')} onClick={() => handlePaginationSettingSelect('scrollUp')}
sx={{ sx={{
color: paginationType === 'scrollUp' ? 'whitesmoke !important' : '#ff00c3 !important', color: paginationType === 'scrollUp' ? 'whitesmoke !important' : '#ff00c3 !important',
borderColor: '#ff00c3 !important', borderColor: '#ff00c3 !important',
backgroundColor: paginationType === 'scrollUp' ? '#ff00c3 !important' : 'whitesmoke !important', backgroundColor: paginationType === 'scrollUp' ? '#ff00c3 !important' : 'whitesmoke !important',
}}> }}>
{t('right_panel.pagination.scroll_up')} {t('right_panel.pagination.scroll_up')}
</Button> </Button>
<Button <Button
variant={paginationType === 'none' ? "contained" : "outlined"} variant={paginationType === 'none' ? "contained" : "outlined"}
onClick={() => handlePaginationSettingSelect('none')} onClick={() => handlePaginationSettingSelect('none')}
sx={{ sx={{
color: paginationType === 'none' ? 'whitesmoke !important' : '#ff00c3 !important', color: paginationType === 'none' ? 'whitesmoke !important' : '#ff00c3 !important',
borderColor: '#ff00c3 !important', borderColor: '#ff00c3 !important',
backgroundColor: paginationType === 'none' ? '#ff00c3 !important' : 'whitesmoke !important', backgroundColor: paginationType === 'none' ? '#ff00c3 !important' : 'whitesmoke !important',
@@ -593,35 +593,35 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
<FormControlLabel value="custom" control={<Radio />} label={t('right_panel.limit.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: React.ChangeEvent<HTMLInputElement>) => { onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
const value = parseInt(e.target.value); const value = parseInt(e.target.value);
// Only update if the value is greater than or equal to 1 or if the field is empty // Only update if the value is greater than or equal to 1 or if the field is empty
if (e.target.value === '' || value >= 1) { if (e.target.value === '' || value >= 1) {
updateCustomLimit(e.target.value); updateCustomLimit(e.target.value);
}
}}
inputProps={{
min: 1,
onKeyPress: (e: React.KeyboardEvent<HTMLInputElement>) => {
const value = (e.target as HTMLInputElement).value + e.key;
if (parseInt(value) < 1) {
e.preventDefault();
} }
} }}
}} inputProps={{
placeholder={t('right_panel.limit.enter_number')} min: 1,
sx={{ onKeyPress: (e: React.KeyboardEvent<HTMLInputElement>) => {
marginLeft: '10px', const value = (e.target as HTMLInputElement).value + e.key;
'& input': { if (parseInt(value) < 1) {
padding: '10px', e.preventDefault();
}
}, }
width: '150px', }}
background: isDarkMode ? "#1E2124" : 'white', placeholder={t('right_panel.limit.enter_number')}
color: isDarkMode ? "white" : 'black', // Ensure the text field does not go outside the panel sx={{
}} marginLeft: '10px',
'& input': {
padding: '10px',
},
width: '150px',
background: isDarkMode ? "#1E2124" : 'white',
color: isDarkMode ? "white" : 'black', // Ensure the text field does not go outside the panel
}}
/> />
)} )}
</div> </div>
@@ -634,26 +634,26 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
{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 <Button
variant="outlined" variant="outlined"
onClick={stopCaptureAndEmitGetTextSettings} onClick={stopCaptureAndEmitGetTextSettings}
sx={{ sx={{
color: '#ff00c3 !important', color: '#ff00c3 !important',
borderColor: '#ff00c3 !important', borderColor: '#ff00c3 !important',
backgroundColor: 'whitesmoke !important', backgroundColor: 'whitesmoke !important',
}}> }}>
{t('right_panel.buttons.confirm')} {t('right_panel.buttons.confirm')}
</Button> </Button>
<Button <Button
variant="outlined" variant="outlined"
color="error" color="error"
onClick={discardGetText} onClick={discardGetText}
sx={{ sx={{
color: '#ff00c3 !important', color: '#ff00c3 !important',
borderColor: '#ff00c3 !important', borderColor: '#ff00c3 !important',
backgroundColor: 'whitesmoke !important', backgroundColor: 'whitesmoke !important',
}}> }}>
{t('right_panel.buttons.discard')} {t('right_panel.buttons.discard')}
</Button> </Button>
</Box> </Box>
</> </>
@@ -664,16 +664,16 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
<Box display="flex" flexDirection="column" gap={2}> <Box display="flex" flexDirection="column" gap={2}>
<Button variant="contained" onClick={() => captureScreenshot(true)}>{t('right_panel.screenshot.capture_fullpage')}</Button> <Button variant="contained" onClick={() => captureScreenshot(true)}>{t('right_panel.screenshot.capture_fullpage')}</Button>
<Button variant="contained" onClick={() => captureScreenshot(false)}>{t('right_panel.screenshot.capture_visible')}</Button> <Button variant="contained" onClick={() => captureScreenshot(false)}>{t('right_panel.screenshot.capture_visible')}</Button>
<Button <Button
variant="outlined" variant="outlined"
color="error" color="error"
onClick={stopGetScreenshot} onClick={stopGetScreenshot}
sx={{ sx={{
color: '#ff00c3 !important', color: '#ff00c3 !important',
borderColor: '#ff00c3 !important', borderColor: '#ff00c3 !important',
backgroundColor: 'whitesmoke !important', backgroundColor: 'whitesmoke !important',
}}> }}>
{t('right_panel.buttons.discard')} {t('right_panel.buttons.discard')}
</Button> </Button>
</Box> </Box>
)} )}
@@ -716,7 +716,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
</InputAdornment> </InputAdornment>
) )
}} }}
/> />
{!confirmedTextSteps[step.id] ? ( {!confirmedTextSteps[step.id] ? (
<Box display="flex" justifyContent="space-between" gap={2}> <Box display="flex" justifyContent="space-between" gap={2}>
@@ -740,8 +740,8 @@ 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>
{step.fullPage ? {step.fullPage ?
t('right_panel.screenshot.display_fullpage') : t('right_panel.screenshot.display_fullpage') :
t('right_panel.screenshot.display_visible')} t('right_panel.screenshot.display_visible')}
</Typography> </Typography>
</Box> </Box>
@@ -750,7 +750,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
<> <>
<Typography>{t('right_panel.messages.list_selected')}</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} sx={{background: `${isDarkMode ? "#1E2124" : 'white'}` }}> <Box key={key} sx={{ background: `${isDarkMode ? "#1E2124" : 'white'}` }}>
<TextField <TextField
label={t('right_panel.fields.field_label')} label={t('right_panel.fields.field_label')}
value={field.label || ''} value={field.label || ''}
@@ -764,7 +764,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
<EditIcon /> <EditIcon />
</InputAdornment> </InputAdornment>
) )
}} }}
/> />
<TextField <TextField
label={t('right_panel.fields.field_data')} label={t('right_panel.fields.field_data')}
@@ -779,7 +779,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
</InputAdornment> </InputAdornment>
) )
}} }}
/> />
{!confirmedListTextFields[step.id]?.[key] ? ( {!confirmedListTextFields[step.id]?.[key] ? (
<Box display="flex" justifyContent="space-between" gap={2}> <Box display="flex" justifyContent="space-between" gap={2}>