Merge pull request #303 from getmaxun/list-back

feat: navigate across capture list stages

public/locales/de.json

@@ -161,6 +161,7 @@
             "confirm_pagination": "Paginierung bestätigen",
             "confirm_limit": "Limit bestätigen",
             "finish_capture": "Erfassung abschließen",
+            "back": "Zurück",
             "finish": "Fertig",
             "cancel": "Abbrechen",
             "delete": "Löschen"

public/locales/en.json

@@ -162,6 +162,7 @@
         "confirm_pagination": "Confirm Pagination",
         "confirm_limit": "Confirm Limit",
         "finish_capture": "Finish Capture",
+        "back": "Back",
         "finish": "Finish",
         "cancel": "Cancel",
         "delete": "Delete"

public/locales/es.json

@@ -162,6 +162,7 @@
       "confirm_pagination": "Confirmar Paginación",
       "confirm_limit": "Confirmar Límite",
       "finish_capture": "Finalizar Captura",
+      "back": "Atrás",
       "finish": "Finalizar",
       "cancel": "Cancelar",
       "delete": "Eliminar"

public/locales/ja.json

@@ -162,6 +162,7 @@
             "confirm_pagination": "ページネーションを確認",
             "confirm_limit": "制限を確認",
             "finish_capture": "取得を完了",
+            "back": "戻る",
             "finish": "完了",
             "cancel": "キャンセル",
             "delete": "削除"

public/locales/zh.json

@@ -162,6 +162,7 @@
       "confirm_pagination": "确认分页",
       "confirm_limit": "确认限制",
       "finish_capture": "完成捕获",
+      "back": "返回",
       "finish": "完成",
       "cancel": "取消",
       "delete": "删除"

src/components/organisms/BrowserWindow.tsx

@@ -68,7 +68,7 @@ export const BrowserWindow = () => {
 
     const { socket } = useSocketStore();
     const { notify } = useGlobalInfoStore();
-    const { getText, getList, paginationMode, paginationType, limitMode } = useActionContext();
+    const { getText, getList, paginationMode, paginationType, limitMode, captureStage } = useActionContext();
     const { addTextStep, addListStep } = useBrowserSteps();
 
     const onMouseMove = (e: MouseEvent) => {
@@ -144,7 +144,7 @@ export const BrowserWindow = () => {
             // for non-list steps
             setHighlighterData(data);
         }
-    }, [highlighterData, getList, socket, listSelector, paginationMode, paginationType]);
+    }, [highlighterData, getList, socket, listSelector, paginationMode, paginationType, captureStage]);
 
 
     useEffect(() => {
@@ -158,6 +158,13 @@ export const BrowserWindow = () => {
         };
     }, [socket, onMouseMove]);
 
+    useEffect(() => {
+        if (captureStage === 'initial' && listSelector) {
+            socket?.emit('setGetList', { getList: true });
+            socket?.emit('listSelector', { selector: listSelector });
+        }
+    }, [captureStage, listSelector, socket]);
+
     const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
         if (highlighterData && canvasRef?.current) {
             const canvasRect = canvasRef.current.getBoundingClientRect();

src/components/organisms/RightSidePanel.tsx

@@ -382,6 +382,23 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
     }
   }, [captureStage, paginationType, limitType, customLimit, startPaginationMode, stopPaginationMode, startLimitMode, stopLimitMode, notify, stopCaptureAndEmitGetListSettings, getListSettingsObject]);
 
+  const handleBackCaptureList = useCallback(() => {
+    switch (captureStage) {
+      case 'limit':
+        stopLimitMode();
+        setShowLimitOptions(false);
+        startPaginationMode();
+        setShowPaginationOptions(true);
+        setCaptureStage('pagination');
+        break;
+      case 'pagination':
+        stopPaginationMode();
+        setShowPaginationOptions(false);
+        setCaptureStage('initial');
+        break;
+    }
+  }, [captureStage, stopLimitMode, startPaginationMode, stopPaginationMode]);
+
   const handlePaginationSettingSelect = (option: PaginationType) => {
     updatePaginationType(option);
   };
@@ -456,6 +473,14 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
         {getList && (
           <>
             <Box display="flex" justifyContent="space-between" gap={2} style={{ margin: '15px' }}>
+              {(captureStage === 'pagination' || captureStage === 'limit') && (
+                <Button
+                  variant="outlined"
+                  onClick={handleBackCaptureList}
+                >
+                  {t('right_panel.buttons.back')}
+                </Button>
+              )}
               <Button
                 variant="outlined"
                 onClick={handleConfirmListCapture}
@@ -466,7 +491,9 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
                 captureStage === 'limit' ? t('right_panel.buttons.confirm_limit') : 
                 t('right_panel.buttons.finish_capture')}
               </Button>
-              <Button variant="outlined" color="error" onClick={discardGetList}>{t('right_panel.buttons.discard')}</Button>
+              <Button variant="outlined" color="error" onClick={discardGetList}>
+                {t('right_panel.buttons.discard')}
+              </Button>
             </Box>
           </>
         )}