Enhance multi-page PDF layout with advanced customization options (#397, #3655) (#5859)

Co-authored-by: Copilot <[email protected]>
This commit is contained in:
OUNZAR Aymane
2026-03-24 17:27:56 +00:00
committed by GitHub
co-authored by Copilot
parent 8bbfbd63d7
commit a1f03c844b
17 changed files with 1094 additions and 78 deletions
+61 -3
View File
@@ -1,10 +1,24 @@
import { useTranslation } from 'react-i18next';
import { createToolFlow } from '@app/components/tools/shared/createToolFlow';
import { useBaseTool } from '@app/hooks/tools/shared/useBaseTool';
import { useAccordionSteps } from '@app/hooks/tools/shared/useAccordionSteps';
import { BaseToolProps, ToolComponent } from '@app/types/tool';
import { usePageLayoutParameters } from '@app/hooks/tools/pageLayout/usePageLayoutParameters';
import { usePageLayoutOperation } from '@app/hooks/tools/pageLayout/usePageLayoutOperation';
import PageLayoutSettings from '@app/components/tools/pageLayout/PageLayoutSettings';
import PageLayoutAdvancedSettings from '@app/components/tools/pageLayout/PageLayoutAdvancedSettings';
import PageLayoutMarginsBordersSettings from '@app/components/tools/pageLayout/PageLayoutMarginsBordersSettings';
import { usePageLayoutTips } from '@app/components/tooltips/PageLayout/usePageLayoutTips';
import { usePageLayoutAdvancedTips } from '@app/components/tooltips/PageLayout/usePageLayoutAdvancedTips';
import { usePageLayoutMarginsBordersTips } from '@app/components/tooltips/PageLayout/usePageLayoutMarginsBordersTips';
import PageLayoutPreview from '@app/components/tools/pageLayout/PageLayoutPreview';
enum PageLayoutStep {
NONE = 'none',
LAYOUT = 'layout',
ADVANCED = 'advanced',
MARGINS_BORDERS = 'marginsBorders',
}
const PageLayout = (props: BaseToolProps) => {
const { t } = useTranslation();
@@ -16,16 +30,34 @@ const PageLayout = (props: BaseToolProps) => {
props
);
const pageLayoutTips = usePageLayoutTips();
const pageLayoutAdvancedTips = usePageLayoutAdvancedTips();
const pageLayoutMarginsBordersTips = usePageLayoutMarginsBordersTips();
const accordion = useAccordionSteps<PageLayoutStep>({
noneValue: PageLayoutStep.NONE,
initialStep: PageLayoutStep.LAYOUT,
stateConditions: {
hasFiles: base.hasFiles,
hasResults: base.hasResults,
},
afterResults: base.handleSettingsReset,
});
return createToolFlow({
files: {
selectedFiles: base.selectedFiles,
isCollapsed: base.hasResults,
},
preview: (
<PageLayoutPreview parameters={base.params.parameters} />
),
steps: [
{
title: 'Settings',
isCollapsed: base.settingsCollapsed,
onCollapsedClick: base.settingsCollapsed ? base.handleSettingsReset : undefined,
title: 'Layout settings',
isCollapsed: accordion.getCollapsedState(PageLayoutStep.LAYOUT),
onCollapsedClick: () => accordion.handleStepToggle(PageLayoutStep.LAYOUT),
tooltip: pageLayoutTips,
content: (
<PageLayoutSettings
parameters={base.params.parameters}
@@ -34,6 +66,32 @@ const PageLayout = (props: BaseToolProps) => {
/>
),
},
{
title: 'Advanced settings',
isCollapsed: accordion.getCollapsedState(PageLayoutStep.ADVANCED),
onCollapsedClick: () => accordion.handleStepToggle(PageLayoutStep.ADVANCED),
tooltip: pageLayoutAdvancedTips,
content: (
<PageLayoutAdvancedSettings
parameters={base.params.parameters}
onParameterChange={base.params.updateParameter}
disabled={base.endpointLoading}
/>
),
},
{
title: 'Margins and borders',
isCollapsed: accordion.getCollapsedState(PageLayoutStep.MARGINS_BORDERS),
onCollapsedClick: () => accordion.handleStepToggle(PageLayoutStep.MARGINS_BORDERS),
tooltip: pageLayoutMarginsBordersTips,
content: (
<PageLayoutMarginsBordersSettings
parameters={base.params.parameters}
onParameterChange={base.params.updateParameter}
disabled={base.endpointLoading}
/>
),
},
],
executeButton: {
text: t('pageLayout.submit', 'Create Layout'),