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: (
+
+
+
+ )
+ }}
+ />
+
+
+
+ )
+ }}
+ />
+
+ ))}
+ >
+ )
)
)
}