saulteafarmer/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Stirling-Tools/Stirling-PDF.git synced 2025-09-24 12:36:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor steps to be dependent on mode

Browse Source
This commit is contained in:
James Brunton 2025-09-08 16:54:54 +01:00
parent bb96522326
commit 3a20238335
8 changed files with 134 additions and 241 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
frontend/src/components/tools/redact/AutomaticRedactSettings.tsx
View File

@ -1,103 +0,0 @@
import { Stack, Divider, Text, NumberInput, Group, ColorInput } from "@mantine/core";
import { useTranslation } from "react-i18next";
import { RedactParameters } from "../../../hooks/tools/redact/useRedactParameters";
import WordsToRedactInput from "./WordsToRedactInput";
interface AutomaticRedactSettingsProps {
parameters: RedactParameters;
onParameterChange: <K extends keyof RedactParameters>(key: K, value: RedactParameters[K]) => void;
disabled?: boolean;
}
const AutomaticRedactSettings = ({ parameters, onParameterChange, disabled = false }: AutomaticRedactSettingsProps) => {
const { t } = useTranslation();
return (
<Stack gap="md">
<Divider ml='-md' />
{/* Words to Redact */}
<WordsToRedactInput
wordsToRedact={parameters.wordsToRedact}
onWordsChange={(words) => onParameterChange('wordsToRedact', words)}
disabled={disabled}
/>
<Divider />
{/* Redaction Settings */}
<Stack gap="sm">
<Text size="sm" fw={500}>
{t('redact.auto.settings', 'Redaction Settings')}
</Text>
{/* Box Color */}
<Stack gap="sm">
<Text size="sm">{t('redact.auto.colorLabel', 'Box Colour')}</Text>
<ColorInput
value={parameters.redactColor}
onChange={(value) => onParameterChange('redactColor', value)}
disabled={disabled}
size="sm"
/>
</Stack>
{/* Box Padding */}
<Stack gap="sm">
<Text size="sm">{t('redact.auto.paddingLabel', 'Box Padding')}</Text>
<NumberInput
value={parameters.customPadding}
onChange={(value) => onParameterChange('customPadding', typeof value === 'number' ? value : 0.1)}
min={0}
max={10}
step={0.1}
disabled={disabled}
size="sm"
placeholder="0.1"
/>
</Stack>
{/* Use Regex */}
<label
style={{ display: 'flex', alignItems: 'center', gap: '8px' }}
>
<input
type="checkbox"
checked={parameters.useRegex}
onChange={(e) => onParameterChange('useRegex', e.target.checked)}
disabled={disabled}
/>
<Text size="sm">{t('redact.auto.useRegexLabel', 'Use Regex')}</Text>
</label>
{/* Whole Word Search */}
<label
style={{ display: 'flex', alignItems: 'center', gap: '8px' }}
>
<input
type="checkbox"
checked={parameters.wholeWordSearch}
onChange={(e) => onParameterChange('wholeWordSearch', e.target.checked)}
disabled={disabled}
/>
<Text size="sm">{t('redact.auto.wholeWordSearchLabel', 'Whole Word Search')}</Text>
</label>
{/* Convert PDF to PDF-Image */}
<label
style={{ display: 'flex', alignItems: 'center', gap: '8px' }}
>
<input
type="checkbox"
checked={parameters.convertPDFToImage}
onChange={(e) => onParameterChange('convertPDFToImage', e.target.checked)}
disabled={disabled}
/>
<Text size="sm">{t('redact.auto.convertPDFToImageLabel', 'Convert PDF to PDF-Image (Used to remove text behind the box)')}</Text>
</label>
</Stack>
</Stack>
);
};
export default AutomaticRedactSettings;

25
frontend/src/components/tools/redact/RedactAdvancedStep.tsx → frontend/src/components/tools/redact/RedactAdvancedSettings.tsx
View File

@ -1,32 +1,33 @@
import { Stack, Text, NumberInput, ColorInput } from '@mantine/core';
import { useTranslation } from 'react-i18next';
import { RedactParameters } from '../../../hooks/tools/redact/useRedactParameters';
import { Stack, Text, NumberInput, ColorInput } from "@mantine/core";
import { useTranslation } from "react-i18next";
import { RedactParameters } from "../../../hooks/tools/redact/useRedactParameters";
interface RedactAdvancedStepProps {
interface RedactAdvancedSettingsProps {
parameters: RedactParameters;
onParameterChange: <K extends keyof RedactParameters>(key: K, value: RedactParameters[K]) => void;
disabled?: boolean;
}
export default function RedactAdvancedStep({ parameters, onParameterChange, disabled }: RedactAdvancedStepProps) {
const RedactAdvancedSettings = ({ parameters, onParameterChange, disabled = false }: RedactAdvancedSettingsProps) => {
const { t } = useTranslation();
return (
<Stack gap="md">
{/* Box Color */}
<Stack gap="sm">
<Text size="sm" fw={500}>{t('redact.advanced.colorLabel', 'Box Color')}</Text>
<Text size="sm" fw={500}>{t('redact.auto.colorLabel', 'Box Colour')}</Text>
<ColorInput
value={parameters.redactColor}
onChange={(value) => onParameterChange('redactColor', value)}
disabled={disabled}
size="sm"
format="hex"
/>
</Stack>
{/* Box Padding */}
<Stack gap="sm">
<Text size="sm" fw={500}>{t('redact.advanced.paddingLabel', 'Box Padding')}</Text>
<Text size="sm" fw={500}>{t('redact.auto.paddingLabel', 'Box Padding')}</Text>
<NumberInput
value={parameters.customPadding}
onChange={(value) => onParameterChange('customPadding', typeof value === 'number' ? value : 0.1)}
@ -47,7 +48,7 @@ export default function RedactAdvancedStep({ parameters, onParameterChange, disa
onChange={(e) => onParameterChange('useRegex', e.target.checked)}
disabled={disabled}
/>
<Text size="sm">{t('redact.advanced.useRegexLabel', 'Use Regex')}</Text>
<Text size="sm">{t('redact.auto.useRegexLabel', 'Use Regex')}</Text>
</label>
{/* Whole Word Search */}
@ -58,7 +59,7 @@ export default function RedactAdvancedStep({ parameters, onParameterChange, disa
onChange={(e) => onParameterChange('wholeWordSearch', e.target.checked)}
disabled={disabled}
/>
<Text size="sm">{t('redact.advanced.wholeWordSearchLabel', 'Whole Word Search')}</Text>
<Text size="sm">{t('redact.auto.wholeWordSearchLabel', 'Whole Word Search')}</Text>
</label>
{/* Convert PDF to PDF-Image */}
@ -69,8 +70,10 @@ export default function RedactAdvancedStep({ parameters, onParameterChange, disa
onChange={(e) => onParameterChange('convertPDFToImage', e.target.checked)}
disabled={disabled}
/>
<Text size="sm">{t('redact.advanced.convertPDFToImageLabel', 'Convert PDF to PDF-Image (Used to remove text behind the box)')}</Text>
<Text size="sm">{t('redact.auto.convertPDFToImageLabel', 'Convert PDF to PDF-Image (Used to remove text behind the box)')}</Text>
</label>
</Stack>
);
}
};
export default RedactAdvancedSettings;

21
frontend/src/components/tools/redact/RedactModeStep.tsx
View File

@ -1,21 +0,0 @@
import { Stack } from '@mantine/core';
import { RedactParameters } from '../../../hooks/tools/redact/useRedactParameters';
import RedactModeSelector from './RedactModeSelector';
interface RedactModeStepProps {
parameters: RedactParameters;
onParameterChange: <K extends keyof RedactParameters>(key: K, value: RedactParameters[K]) => void;
disabled?: boolean;
}
export default function RedactModeStep({ parameters, onParameterChange, disabled }: RedactModeStepProps) {
return (
<Stack gap="md">
<RedactModeSelector
mode={parameters.mode}
onModeChange={(mode) => onParameterChange('mode', mode)}
disabled={disabled}
/>
</Stack>
);
}

38
frontend/src/components/tools/redact/RedactSettings.tsx
View File

@ -1,38 +0,0 @@
import { Stack } from "@mantine/core";
import { RedactParameters } from "../../../hooks/tools/redact/useRedactParameters";
import RedactModeSelector from "./RedactModeSelector";
import AutomaticRedactSettings from "./AutomaticRedactSettings";
interface RedactSettingsProps {
parameters: RedactParameters;
onParameterChange: <K extends keyof RedactParameters>(key: K, value: RedactParameters[K]) => void;
disabled?: boolean;
}
const RedactSettings = ({ parameters, onParameterChange, disabled = false }: RedactSettingsProps) => {
return (
<Stack gap="md">
<RedactModeSelector
mode={parameters.mode}
onModeChange={(mode) => onParameterChange('mode', mode)}
disabled={disabled}
/>
{parameters.mode === 'automatic' && (
<AutomaticRedactSettings
parameters={parameters}
onParameterChange={onParameterChange}
disabled={disabled}
/>
)}
{parameters.mode === 'manual' && (
<div style={{ padding: '20px', textAlign: 'center', color: '#666' }}>
Manual redaction interface will be available here when implemented.
</div>
)}
</Stack>
);
};
export default RedactSettings;

61
frontend/src/components/tools/redact/RedactSingleStepSettings.tsx Normal file
View File

@ -0,0 +1,61 @@
import { Stack, Divider } from "@mantine/core";
import { RedactParameters } from "../../../hooks/tools/redact/useRedactParameters";
import RedactModeSelector from "./RedactModeSelector";
import WordsToRedactInput from "./WordsToRedactInput";
import RedactAdvancedSettings from "./RedactAdvancedSettings";
interface RedactSingleStepSettingsProps {
parameters: RedactParameters;
onParameterChange: <K extends keyof RedactParameters>(key: K, value: RedactParameters[K]) => void;
disabled?: boolean;
}
const RedactSingleStepSettings = ({ parameters, onParameterChange, disabled = false }: RedactSingleStepSettingsProps) => {
return (
<Stack gap="md">
{/* Mode Selection */}
<RedactModeSelector
mode={parameters.mode}
onModeChange={(mode) => onParameterChange('mode', mode)}
disabled={disabled}
/>
{/* Automatic Mode Settings */}
{parameters.mode === 'automatic' && (
<>
<Divider />
{/* Words to Redact */}
<WordsToRedactInput
wordsToRedact={parameters.wordsToRedact}
onWordsChange={(words) => onParameterChange('wordsToRedact', words)}
disabled={disabled}
/>
<Divider />
{/* Advanced Settings */}
<RedactAdvancedSettings
parameters={parameters}
onParameterChange={onParameterChange}
disabled={disabled}
/>
</>
)}
{/* Manual Mode Placeholder */}
{parameters.mode === 'manual' && (
<>
<Divider />
<Stack gap="md">
<div style={{ padding: '20px', textAlign: 'center', color: '#666' }}>
Manual redaction interface will be available here when implemented.
</div>
</Stack>
</>
)}
</Stack>
);
};
export default RedactSingleStepSettings;

21
frontend/src/components/tools/redact/RedactWordsStep.tsx
View File

@ -1,21 +0,0 @@
import { Stack } from '@mantine/core';
import { RedactParameters } from '../../../hooks/tools/redact/useRedactParameters';
import WordsToRedactInput from './WordsToRedactInput';
interface RedactWordsStepProps {
parameters: RedactParameters;
onParameterChange: <K extends keyof RedactParameters>(key: K, value: RedactParameters[K]) => void;
disabled?: boolean;
}
export default function RedactWordsStep({ parameters, onParameterChange, disabled }: RedactWordsStepProps) {
return (
<Stack gap="md">
<WordsToRedactInput
wordsToRedact={parameters.wordsToRedact}
onWordsChange={(words) => onParameterChange('wordsToRedact', words)}
disabled={disabled}
/>
</Stack>
);
}

4
frontend/src/data/useTranslatedToolRegistry.tsx
View File

@ -45,7 +45,7 @@ import OCRSettings from "../components/tools/ocr/OCRSettings";
import ConvertSettings from "../components/tools/convert/ConvertSettings";
import ChangePermissionsSettings from "../components/tools/changePermissions/ChangePermissionsSettings";
import FlattenSettings from "../components/tools/flatten/FlattenSettings";
import RedactSettings from "../components/tools/redact/RedactSettings";
import RedactSingleStepSettings from "../components/tools/redact/RedactSingleStepSettings";
import Redact from "../tools/Redact";
import { ToolId } from "../types/toolId";
@ -711,7 +711,7 @@ export function useFlatToolRegistry(): ToolRegistry {
maxFiles: -1,
endpoints: ["auto-redact"],
operationConfig: redactOperationConfig,
settingsComponent: RedactSettings,
settingsComponent: RedactSingleStepSettings,
},
};

102
frontend/src/tools/Redact.tsx
View File

@ -1,14 +1,14 @@
import { useTranslation } from "react-i18next";
import { useState } from "react";
import { createToolFlow } from "../components/tools/shared/createToolFlow";
import RedactModeStep from "../components/tools/redact/RedactModeStep";
import RedactWordsStep from "../components/tools/redact/RedactWordsStep";
import RedactAdvancedStep from "../components/tools/redact/RedactAdvancedStep";
import RedactModeSelector from "../components/tools/redact/RedactModeSelector";
import { useRedactParameters } from "../hooks/tools/redact/useRedactParameters";
import { useRedactOperation } from "../hooks/tools/redact/useRedactOperation";
import { useBaseTool } from "../hooks/tools/shared/useBaseTool";
import { BaseToolProps, ToolComponent } from "../types/tool";
import { useRedactModeTips, useRedactWordsTips, useRedactAdvancedTips } from "../components/tooltips/useRedactTips";
import RedactAdvancedSettings from "../components/tools/redact/RedactAdvancedSettings";
import WordsToRedactInput from "../components/tools/redact/WordsToRedactInput";
const Redact = (props: BaseToolProps) => {
const { t } = useTranslation();
@ -39,7 +39,59 @@ const Redact = (props: BaseToolProps) => {
// Compute actual collapsed state based on results and user state
const getActualCollapsedState = (userCollapsed: boolean) => {
return base.hasResults ? true : userCollapsed; // Force collapse when results are shown
return (!base.hasFiles || base.hasResults) ? true : userCollapsed; // Force collapse when results are shown
};
// Build conditional steps based on redaction mode
const buildSteps = () => {
const steps = [
// Method selection step (always present)
{
title: t("redact.steps.method", "Method"),
isCollapsed: getActualCollapsedState(methodCollapsed),
onCollapsedClick: () => base.settingsCollapsed ? base.handleSettingsReset() : setMethodCollapsed(!methodCollapsed),
tooltip: modeTips,
content: (
<RedactModeSelector
mode={base.params.parameters.mode}
onModeChange={(mode) => base.params.updateParameter('mode', mode)}
disabled={base.endpointLoading}
/>
),
}
];
// Add mode-specific steps
if (base.params.parameters.mode === 'automatic') {
steps.push(
{
title: t("redact.steps.words", "Words to Redact"),
isCollapsed: getActualCollapsedState(wordsCollapsed),
onCollapsedClick: () => base.settingsCollapsed ? base.handleSettingsReset() : setWordsCollapsed(!wordsCollapsed),
tooltip: wordsTips,
content: <WordsToRedactInput
wordsToRedact={base.params.parameters.wordsToRedact}
onWordsChange={(words) => base.params.updateParameter('wordsToRedact', words)}
disabled={base.endpointLoading}
/>,
},
{
title: t("redact.steps.advanced", "Advanced Settings"),
isCollapsed: getActualCollapsedState(advancedCollapsed),
onCollapsedClick: () => base.settingsCollapsed ? base.handleSettingsReset() : setAdvancedCollapsed(!advancedCollapsed),
tooltip: advancedTips,
content: <RedactAdvancedSettings
parameters={base.params.parameters}
onParameterChange={base.params.updateParameter}
disabled={base.endpointLoading}
/>,
},
);
} else if (base.params.parameters.mode === 'manual') {
// Manual mode steps would go here when implemented
}
return steps;
};
return createToolFlow({
@ -47,47 +99,7 @@ const Redact = (props: BaseToolProps) => {
selectedFiles: base.selectedFiles,
isCollapsed: base.hasResults,
},
steps: [
{
title: t("redact.steps.method", "Method"),
isCollapsed: getActualCollapsedState(methodCollapsed),
onCollapsedClick: () => base.settingsCollapsed ? base.handleSettingsReset() : setMethodCollapsed(!methodCollapsed),
tooltip: modeTips,
content: (
<RedactModeStep
parameters={base.params.parameters}
onParameterChange={base.params.updateParameter}
disabled={base.endpointLoading}
/>
),
},
{
title: t("redact.steps.words", "Words to Redact"),
isCollapsed: getActualCollapsedState(wordsCollapsed),
onCollapsedClick: () => base.settingsCollapsed ? base.handleSettingsReset() : setWordsCollapsed(!wordsCollapsed),
tooltip: wordsTips,
content: (
<RedactWordsStep
parameters={base.params.parameters}
onParameterChange={base.params.updateParameter}
disabled={base.endpointLoading}
/>
),
},
{
title: t("redact.steps.advanced", "Advanced Settings"),
isCollapsed: getActualCollapsedState(advancedCollapsed),
onCollapsedClick: () => base.settingsCollapsed ? base.handleSettingsReset() : setAdvancedCollapsed(!advancedCollapsed),
tooltip: advancedTips,
content: (
<RedactAdvancedStep
parameters={base.params.parameters}
onParameterChange={base.params.updateParameter}
disabled={base.endpointLoading}
/>
),
},
],
steps: buildSteps(),
executeButton: {
text: t("redact.submit", "Redact"),
isVisible: !base.hasResults,