diff --git a/frontend/src/components/tools/merge/MergeFileSorter.tsx b/frontend/src/components/tools/merge/MergeFileSorter.tsx new file mode 100644 index 000000000..3cb716d0d --- /dev/null +++ b/frontend/src/components/tools/merge/MergeFileSorter.tsx @@ -0,0 +1,73 @@ +import React, { useState } from 'react'; +import { Group, Button, Text, ActionIcon, Stack } from '@mantine/core'; +import { useTranslation } from 'react-i18next'; +import SortIcon from '@mui/icons-material/Sort'; +import SortByAlphaIcon from '@mui/icons-material/SortByAlpha'; +import AccessTimeIcon from '@mui/icons-material/AccessTime'; +import CalendarTodayIcon from '@mui/icons-material/CalendarToday'; +import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward'; +import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'; + +interface MergeFileSorterProps { + onSortFiles: (sortType: 'filename' | 'dateModified', ascending: boolean) => void; + disabled?: boolean; +} + +const MergeFileSorter: React.FC = ({ + onSortFiles, + disabled = false, +}) => { + const { t } = useTranslation(); + const [ascending, setAscending] = useState(true); + + const sortButtons = [ + { + key: 'filename' as const, + icon: , + label: t('merge.sortBy.filename', 'Sort by Filename'), + }, + { + key: 'dateModified' as const, + icon: , + label: t('merge.sortBy.dateModified', 'Sort by Date Modified'), + }, + ]; + + const handleSortDirectionToggle = () => { + setAscending(!ascending); + }; + + return ( + + + {t('merge.sortBy.description', "Files will be merged in the order they're selected. Drag to reorder or use the buttons below to sort.")} + + + {sortButtons.map(({ key, icon, label }) => ( + + ))} + + + {ascending ? : } + + + + ); +}; + +export default MergeFileSorter; diff --git a/frontend/src/components/tools/merge/MergeSettings.tsx b/frontend/src/components/tools/merge/MergeSettings.tsx index f7611d4ec..a12695081 100644 --- a/frontend/src/components/tools/merge/MergeSettings.tsx +++ b/frontend/src/components/tools/merge/MergeSettings.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Stack, Select, Checkbox, Text } from '@mantine/core'; +import { Stack, Checkbox } from '@mantine/core'; import { useTranslation } from 'react-i18next'; import { MergeParameters } from '../../../hooks/tools/merge/useMergeParameters'; @@ -16,29 +16,8 @@ const MergeSettings: React.FC = ({ }) => { const { t } = useTranslation(); - const mergeOrderOptions = [ - { value: 'orderProvided', label: t('merge.orderBy.orderProvided', 'Dragging Files') }, - { value: 'byFileName', label: t('merge.orderBy.byFileName', 'By File Name') }, - { value: 'byDateModified', label: t('merge.orderBy.byDateModified', 'By Date Modified') }, - { value: 'byDateCreated', label: t('merge.orderBy.byDateCreated', 'By Date Created') }, - { value: 'byPDFTitle', label: t('merge.orderBy.byPDFTitle', 'By PDF Title') }, - ]; - return ( -
- - {t('merge.orderBy.title', 'Merge Order')} - -