diff --git a/src/components/organisms/RightSidePanel.tsx b/src/components/organisms/RightSidePanel.tsx index 0372b345..e7ed8925 100644 --- a/src/components/organisms/RightSidePanel.tsx +++ b/src/components/organisms/RightSidePanel.tsx @@ -12,6 +12,11 @@ import { useSocketStore } from '../../context/socket'; import { ScreenshotSettings } from '../../shared/types'; import InputAdornment from '@mui/material/InputAdornment'; import { SidePanelHeader } from '../molecules/SidePanelHeader'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import FormControl from '@mui/material/FormControl'; +import FormLabel from '@mui/material/FormLabel'; +import Radio from '@mui/material/Radio'; +import RadioGroup from '@mui/material/RadioGroup'; // TODO: // 1. Handle field label update @@ -28,6 +33,9 @@ export const RightSidePanel: React.FC = ({ onFinishCapture const [errors, setErrors] = useState<{ [id: number]: string }>({}); const [confirmedTextSteps, setConfirmedTextSteps] = useState<{ [id: number]: boolean }>({}); const [showPaginationOptions, setShowPaginationOptions] = useState(false); + const [showLimitOptions, setShowLimitOptions] = useState(false); + const [selectedLimit, setSelectedLimit] = useState('10'); + const [customLimit, setCustomLimit] = useState(''); const { lastAction, notify } = useGlobalInfoStore(); const { getText, startGetText, stopGetText, getScreenshot, startGetScreenshot, stopGetScreenshot, paginationMode, getList, startGetList, stopGetList, startPaginationMode, stopPaginationMode, paginationType, updatePaginationType } = useActionContext(); @@ -43,6 +51,14 @@ export const RightSidePanel: React.FC = ({ onFinishCapture } }; + const handleLimitChange = (event: React.ChangeEvent) => { + setSelectedLimit(event.target.value); + }; + + const handleCustomLimitChange = (event: React.ChangeEvent) => { + setCustomLimit(event.target.value); + }; + const handleTextStepConfirm = (id: number) => { const label = textLabels[id]?.trim(); if (label) { @@ -96,7 +112,8 @@ export const RightSidePanel: React.FC = ({ onFinishCapture let settings: { listSelector?: string; fields?: Record; - pagination?: { type: string; selector?: string } + pagination?: { type: string; selector?: string }; + limit?: number; } = {}; browserSteps.forEach(step => { @@ -107,7 +124,7 @@ export const RightSidePanel: React.FC = ({ onFinishCapture fields[label] = { selector: field.selectorObj.selector, tag: field.selectorObj.tag, - attribute: field.selectorObj.attribute + attribute: field.selectorObj.attribute, }; } }); @@ -116,13 +133,14 @@ export const RightSidePanel: React.FC = ({ onFinishCapture listSelector: step.listSelector, fields: fields, pagination: { type: paginationType, selector: step.pagination?.selector }, + limit: parseInt(selectedLimit === 'custom' ? customLimit : selectedLimit), }; } }); return settings; - }, [browserSteps, paginationType]); + }, [browserSteps, paginationType, selectedLimit, customLimit]); const resetListState = useCallback(() => { setShowPaginationOptions(false); @@ -154,18 +172,24 @@ export const RightSidePanel: React.FC = ({ onFinishCapture setShowPaginationOptions(true); return; } + if (!selectedLimit || (selectedLimit === 'custom' && !customLimit)) { + setShowLimitOptions(true); + return; + } const settings = getListSettingsObject(); - const paginationSelector = settings.pagination?.selector + const paginationSelector = settings.pagination?.selector; if (['clickNext', 'clickLoadMore'].includes(paginationType)) { if (paginationSelector === '') { notify('error', 'Please select the pagination element first.'); return; } } + //updateListStepLimit(parseInt(selectedLimit === 'custom' ? customLimit : selectedLimit)); stopCaptureAndEmitGetListSettings(); setShowPaginationOptions(false); + setShowLimitOptions(false); updatePaginationType(''); - }, [paginationType, stopCaptureAndEmitGetListSettings, notify]); + }, [paginationType, selectedLimit, customLimit, stopCaptureAndEmitGetListSettings, notify]); const handlePaginationSettingSelect = (option: PaginationType) => { updatePaginationType(option); @@ -223,6 +247,37 @@ export const RightSidePanel: React.FC = ({ onFinishCapture )} +{showLimitOptions && ( + + + +

What is the maximum number of rows you want to extract?

+
+ + } label="10" /> + } label="100" /> + } label="Custom" /> + {selectedLimit === 'custom' && ( + + )} + +
+ +
+ )} + {!getText && !getScreenshot && !getList && } {getText && <>