feat: use text & screenshot steps

This commit is contained in:
karishmas6
2024-08-06 03:12:07 +05:30
parent e9b200f87c
commit e58002c655

View File

@@ -16,7 +16,7 @@ export const RightSidePanel = () => {
const { lastAction } = useGlobalInfoStore(); const { lastAction } = useGlobalInfoStore();
const { getText, getScreenshot, startGetText, stopGetText, startGetScreenshot, stopGetScreenshot } = useActionContext(); const { getText, getScreenshot, startGetText, stopGetText, startGetScreenshot, stopGetScreenshot } = useActionContext();
const { browserSteps, updateBrowserStepLabel, deleteBrowserStep } = useBrowserSteps(); const { browserSteps, updateBrowserTextStepLabel, deleteBrowserStep } = useBrowserSteps();
const { socket } = useSocketStore(); const { socket } = useSocketStore();
const handleTextLabelChange = (id: number, label: string) => { const handleTextLabelChange = (id: number, label: string) => {
@@ -31,7 +31,7 @@ export const RightSidePanel = () => {
const handleTextStepConfirm = (id: number) => { const handleTextStepConfirm = (id: number) => {
const label = textLabels[id]?.trim(); const label = textLabels[id]?.trim();
if (label) { if (label) {
updateBrowserStepLabel(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]: 'Label cannot be empty' }));
@@ -51,14 +51,15 @@ export const RightSidePanel = () => {
}; };
const getTextSettingsObject = useCallback(() => { const getTextSettingsObject = useCallback(() => {
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 (step.label && step.selectorObj && step.selectorObj.selector) { if (step.type === 'text' && step.label && step.selectorObj?.selector) {
settings[step.label] = step.selectorObj; settings[step.label] = step.selectorObj;
} }
}); });
return settings; return settings;
}, [browserSteps]); }, [browserSteps]);
const stopCaptureAndEmitGetTextSettings = useCallback(() => { const stopCaptureAndEmitGetTextSettings = useCallback(() => {
stopGetText(); stopGetText();
@@ -104,7 +105,10 @@ export const RightSidePanel = () => {
<Box> <Box>
{browserSteps.map(step => ( {browserSteps.map(step => (
<Box key={step.id} sx={{ boxShadow: 5, padding: '10px', margin: '10px', borderRadius: '4px' }}> <Box key={step.id} sx={{ boxShadow: 5, padding: '10px', margin: '10px', borderRadius: '4px' }}>
<TextField {
step.type === 'text' ? (
<>
<TextField
label="Label" label="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)}
@@ -121,6 +125,9 @@ export const RightSidePanel = () => {
margin="normal" margin="normal"
InputProps={{ readOnly: confirmedTextSteps[step.id] }} InputProps={{ readOnly: confirmedTextSteps[step.id] }}
/> />
</>
) : null
}
{!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()}>Confirm</Button>