diff --git a/src/components/organisms/RightSidePanel.tsx b/src/components/organisms/RightSidePanel.tsx index 5149a85c..27e7106c 100644 --- a/src/components/organisms/RightSidePanel.tsx +++ b/src/components/organisms/RightSidePanel.tsx @@ -80,6 +80,39 @@ export const RightSidePanel = () => { } }, [stopGetText, getTextSettingsObject, socket, browserSteps, confirmedTextSteps]); + + const getListSettingsObject = useCallback(() => { + const listStep = browserSteps.find(step => step.type === 'list'); + if (!listStep || listStep.type !== 'list' || Object.keys(listStep.fields).length === 0) return null; + + const firstFieldKey = Object.keys(listStep.fields)[0]; + const firstField = listStep.fields[firstFieldKey]; + + return { + listSelector: listStep.listSelector, + fields: { + [firstField.label]: { + selector: firstField.selectorObj.selector, + attribute: firstField.selectorObj.attribute || 'innerText' + } + } + }; + }, [browserSteps]); + + const stopCaptureAndEmitGetListSettings = useCallback(() => { + stopGetList(); + const settings = getListSettingsObject(); + if (settings) { + socket?.emit('action', { action: 'scrapeList', settings }); + } else { + notify('error', 'Unable to create list settings. Make sure you have defined a field for the list.'); + } + }, [stopGetList, getListSettingsObject, socket, notify]); + + // const handleListFieldChange = (stepId: number, key: 'label' | 'data', value: string) => { + // updateListStepField(stepId, key, value); + // }; + const captureScreenshot = (fullPage: boolean) => { const screenshotSettings: ScreenshotSettings = { fullPage, @@ -105,7 +138,7 @@ export const RightSidePanel = () => { {getList && <> - + @@ -176,13 +209,63 @@ export const RightSidePanel = () => { )} ) : ( - step.type === 'screenshot' && ( + step.type === 'screenshot' ? ( {`Take ${step.fullPage ? 'Fullpage' : 'Visible Part'} Screenshot`} + ) : ( + step.type === 'list' && Object.keys(step.fields).length > 0 && ( + <> + + + + ) + }} + /> + {Object.entries(step.fields).map(([key, field]) => ( + + {}} + fullWidth + margin="normal" + InputProps={{ + startAdornment: ( + + + + ) + }} + /> + + + + ) + }} + /> + + ))} + + ) ) ) }