diff --git a/frontend/public/locales/en-GB/translation.json b/frontend/public/locales/en-GB/translation.json index 5ce84331e..0fd88fb07 100644 --- a/frontend/public/locales/en-GB/translation.json +++ b/frontend/public/locales/en-GB/translation.json @@ -684,6 +684,13 @@ }, "splitPages": "Enter pages to split on:", "submit": "Split", + "steps": { + "chooseMethod": "Choose Method", + "settings": "Settings" + }, + "settings": { + "selectMethodFirst": "Please select a split method first" + }, "error": { "failed": "An error occurred while splitting the PDF." }, @@ -692,13 +699,45 @@ "placeholder": "Select how to split the PDF" }, "methods": { - "byPages": "Split at Page Numbers", - "bySections": "Split by Sections", - "bySize": "Split by File Size", - "byPageCount": "Split by Page Count", - "byDocCount": "Split by Document Count", - "byChapters": "Split by Chapters", - "byPageDivider": "Split by Page Divider" + "prefix": { + "splitAt": "Split at", + "splitBy": "Split by" + }, + "byPages": { + "name": "Page Numbers", + "desc": "Extract specific pages (1,3,5-10)", + "tooltip": "Enter page numbers separated by commas or ranges with hyphens" + }, + "bySections": { + "name": "Sections", + "desc": "Divide pages into grid sections", + "tooltip": "Split each page into horizontal and vertical sections" + }, + "bySize": { + "name": "File Size", + "desc": "Limit maximum file size", + "tooltip": "Specify maximum file size (e.g. 10MB, 500KB)" + }, + "byPageCount": { + "name": "Page Count", + "desc": "Fixed pages per file", + "tooltip": "Enter the number of pages for each split file" + }, + "byDocCount": { + "name": "Document Count", + "desc": "Create specific number of files", + "tooltip": "Enter how many files you want to create" + }, + "byChapters": { + "name": "Chapters", + "desc": "Split at bookmark boundaries", + "tooltip": "Uses PDF bookmarks to determine split points" + }, + "byPageDivider": { + "name": "Page Divider", + "desc": "Auto-split with divider sheets", + "tooltip": "Use QR code divider sheets between documents when scanning" + } }, "value": { "fileSize": { diff --git a/frontend/src/components/tools/split/SplitMethodSelector.tsx b/frontend/src/components/tools/split/SplitMethodSelector.tsx new file mode 100644 index 000000000..551bfb963 --- /dev/null +++ b/frontend/src/components/tools/split/SplitMethodSelector.tsx @@ -0,0 +1,165 @@ +import { Grid, Card, Stack, Text } from '@mantine/core'; +import { Tooltip } from '../../shared/Tooltip'; +import { useTranslation } from 'react-i18next'; +import { SPLIT_METHODS, type SplitMethod } from '../../../constants/splitConstants'; +import { useSplitSettingsTips } from '../../tooltips/useSplitSettingsTips'; + +export interface SplitMethodSelectorProps { + selectedMethod: SplitMethod | ''; + onMethodSelect: (method: SplitMethod) => void; + disabled?: boolean; +} + +interface MethodOption { + method: SplitMethod; + icon: string; + prefixKey: string; + nameKey: string; + descKey: string; + tooltipKey: string; +} + +const SplitMethodSelector = ({ + selectedMethod, + onMethodSelect, + disabled = false +}: SplitMethodSelectorProps) => { + const { t } = useTranslation(); + + // Get tooltip content for a specific method + const getMethodTooltip = (method: SplitMethod) => { + const tooltipContent = useSplitSettingsTips(method); + return tooltipContent?.tips || []; + }; + + const methodOptions: MethodOption[] = [ + { + method: SPLIT_METHODS.BY_PAGES, + icon: "format-list-numbered-rounded", + prefixKey: "split.methods.prefix.splitAt", + nameKey: "split.methods.byPages.name", + descKey: "split.methods.byPages.desc", + tooltipKey: "split.methods.byPages.tooltip" + }, + { + method: SPLIT_METHODS.BY_CHAPTERS, + icon: "bookmark-rounded", + prefixKey: "split.methods.prefix.splitBy", + nameKey: "split.methods.byChapters.name", + descKey: "split.methods.byChapters.desc", + tooltipKey: "split.methods.byChapters.tooltip" + }, + { + method: SPLIT_METHODS.BY_SECTIONS, + icon: "grid-on-rounded", + prefixKey: "split.methods.prefix.splitBy", + nameKey: "split.methods.bySections.name", + descKey: "split.methods.bySections.desc", + tooltipKey: "split.methods.bySections.tooltip" + }, + { + method: SPLIT_METHODS.BY_SIZE, + icon: "storage-rounded", + prefixKey: "split.methods.prefix.splitBy", + nameKey: "split.methods.bySize.name", + descKey: "split.methods.bySize.desc", + tooltipKey: "split.methods.bySize.tooltip" + }, + { + method: SPLIT_METHODS.BY_PAGE_COUNT, + icon: "numbers-rounded", + prefixKey: "split.methods.prefix.splitBy", + nameKey: "split.methods.byPageCount.name", + descKey: "split.methods.byPageCount.desc", + tooltipKey: "split.methods.byPageCount.tooltip" + }, + { + method: SPLIT_METHODS.BY_DOC_COUNT, + icon: "content-copy-rounded", + prefixKey: "split.methods.prefix.splitBy", + nameKey: "split.methods.byDocCount.name", + descKey: "split.methods.byDocCount.desc", + tooltipKey: "split.methods.byDocCount.tooltip" + }, + { + method: SPLIT_METHODS.BY_PAGE_DIVIDER, + icon: "auto-awesome-rounded", + prefixKey: "split.methods.prefix.splitBy", + nameKey: "split.methods.byPageDivider.name", + descKey: "split.methods.byPageDivider.desc", + tooltipKey: "split.methods.byPageDivider.tooltip" + } + ]; + + const handleMethodClick = (method: SplitMethod) => { + if (!disabled) { + onMethodSelect(method); + } + }; + + return ( + + {methodOptions.map((option) => ( + + + handleMethodClick(option.method)} + > + + {/* Prefix section */} + + + {t(option.prefixKey, "Split by")} + + + + {/* Title section */} + + + {t(option.nameKey, "Method Name")} + + + + {/* Description section - fixed height + + + {t(option.descKey, "Method description")} + + */} + + + + + ))} + + ); +}; + +export default SplitMethodSelector; diff --git a/frontend/src/components/tools/split/SplitSettings.tsx b/frontend/src/components/tools/split/SplitSettings.tsx index 3df1eabd4..dc7c02480 100644 --- a/frontend/src/components/tools/split/SplitSettings.tsx +++ b/frontend/src/components/tools/split/SplitSettings.tsx @@ -1,7 +1,7 @@ -import { Stack, TextInput, Select, Checkbox, Anchor } from '@mantine/core'; +import { Stack, TextInput, Checkbox, Anchor, Text } from '@mantine/core'; import LocalIcon from '../../shared/LocalIcon'; import { useTranslation } from 'react-i18next'; -import { isSplitMethod, SPLIT_METHODS } from '../../../constants/splitConstants'; +import { SPLIT_METHODS } from '../../../constants/splitConstants'; import { SplitParameters } from '../../../hooks/tools/split/useSplitParameters'; export interface SplitSettingsProps { @@ -135,27 +135,20 @@ const SplitSettings = ({ ); + // Don't render anything if no method is selected + if (!parameters.method) { + return ( + + + {t("split.settings.selectMethodFirst", "Please select a split method first")} + + + ); + } + return ( - {/* Method Selector */} -