Make open steps mutually exclusive

This commit is contained in:
James Brunton 2025-09-12 16:55:06 +01:00
parent c60a7dfc27
commit 2e68f2d062

View File

@ -17,6 +17,14 @@ import {
useAdvancedOptionsTips useAdvancedOptionsTips
} from "../components/tooltips/useChangeMetadataTips"; } from "../components/tooltips/useChangeMetadataTips";
enum MetadataStep {
NONE = 'none',
DELETE_ALL = 'deleteAll',
STANDARD_METADATA = 'standardMetadata',
DOCUMENT_DATES = 'documentDates',
ADVANCED_OPTIONS = 'advancedOptions'
}
const ChangeMetadata = (props: BaseToolProps) => { const ChangeMetadata = (props: BaseToolProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
@ -26,11 +34,8 @@ const ChangeMetadata = (props: BaseToolProps) => {
const documentDatesTips = useDocumentDatesTips(); const documentDatesTips = useDocumentDatesTips();
const advancedOptionsTips = useAdvancedOptionsTips(); const advancedOptionsTips = useAdvancedOptionsTips();
// Individual step collapse states // Individual step collapse states - only one can be open at a time
const [deleteAllCollapsed, setDeleteAllCollapsed] = useState(false); const [openStep, setOpenStep] = useState<MetadataStep>(MetadataStep.DELETE_ALL);
const [standardMetadataCollapsed, setStandardMetadataCollapsed] = useState(false);
const [documentDatesCollapsed, setDocumentDatesCollapsed] = useState(true);
const [advancedOptionsCollapsed, setAdvancedOptionsCollapsed] = useState(true);
const base = useBaseTool( const base = useBaseTool(
'changeMetadata', 'changeMetadata',
@ -42,9 +47,20 @@ const ChangeMetadata = (props: BaseToolProps) => {
// Extract metadata from uploaded files // Extract metadata from uploaded files
const { isExtractingMetadata } = useMetadataExtraction(base.params); const { isExtractingMetadata } = useMetadataExtraction(base.params);
// Compute actual collapsed state based on results and user state // Compute actual collapsed state based on results and accordion behavior
const getActualCollapsedState = (userCollapsed: boolean) => { const getActualCollapsedState = (stepName: MetadataStep) => {
return (!base.hasFiles || base.hasResults) ? true : userCollapsed; // Force collapse when results are shown return (!base.hasFiles || base.hasResults) ? true : openStep !== stepName;
};
// Handle step toggle for accordion behavior
const handleStepToggle = (stepName: MetadataStep) => {
if (base.hasResults) {
if (base.settingsCollapsed) {
base.handleSettingsReset();
}
return;
}
setOpenStep(openStep === stepName ? MetadataStep.NONE : stepName);
}; };
return createToolFlow({ return createToolFlow({
@ -55,10 +71,8 @@ const ChangeMetadata = (props: BaseToolProps) => {
steps: [ steps: [
{ {
title: t("changeMetadata.deleteAll.label", "Delete All Metadata"), title: t("changeMetadata.deleteAll.label", "Delete All Metadata"),
isCollapsed: getActualCollapsedState(deleteAllCollapsed), isCollapsed: getActualCollapsedState(MetadataStep.DELETE_ALL),
onCollapsedClick: base.hasResults onCollapsedClick: () => handleStepToggle(MetadataStep.DELETE_ALL),
? (base.settingsCollapsed ? base.handleSettingsReset : undefined)
: () => setDeleteAllCollapsed(!deleteAllCollapsed),
tooltip: deleteAllTips, tooltip: deleteAllTips,
content: ( content: (
<DeleteAllStep <DeleteAllStep
@ -70,10 +84,8 @@ const ChangeMetadata = (props: BaseToolProps) => {
}, },
{ {
title: t("changeMetadata.standardFields.title", "Standard Metadata"), title: t("changeMetadata.standardFields.title", "Standard Metadata"),
isCollapsed: getActualCollapsedState(standardMetadataCollapsed), isCollapsed: getActualCollapsedState(MetadataStep.STANDARD_METADATA),
onCollapsedClick: base.hasResults onCollapsedClick: () => handleStepToggle(MetadataStep.STANDARD_METADATA),
? (base.settingsCollapsed ? base.handleSettingsReset : undefined)
: () => setStandardMetadataCollapsed(!standardMetadataCollapsed),
tooltip: standardMetadataTips, tooltip: standardMetadataTips,
content: ( content: (
<StandardMetadataStep <StandardMetadataStep
@ -85,10 +97,8 @@ const ChangeMetadata = (props: BaseToolProps) => {
}, },
{ {
title: t("changeMetadata.dates.title", "Document Dates"), title: t("changeMetadata.dates.title", "Document Dates"),
isCollapsed: getActualCollapsedState(documentDatesCollapsed), isCollapsed: getActualCollapsedState(MetadataStep.DOCUMENT_DATES),
onCollapsedClick: base.hasResults onCollapsedClick: () => handleStepToggle(MetadataStep.DOCUMENT_DATES),
? (base.settingsCollapsed ? base.handleSettingsReset : undefined)
: () => setDocumentDatesCollapsed(!documentDatesCollapsed),
tooltip: documentDatesTips, tooltip: documentDatesTips,
content: ( content: (
<DocumentDatesStep <DocumentDatesStep
@ -100,10 +110,8 @@ const ChangeMetadata = (props: BaseToolProps) => {
}, },
{ {
title: t("changeMetadata.advanced.title", "Advanced Options"), title: t("changeMetadata.advanced.title", "Advanced Options"),
isCollapsed: getActualCollapsedState(advancedOptionsCollapsed), isCollapsed: getActualCollapsedState(MetadataStep.ADVANCED_OPTIONS),
onCollapsedClick: base.hasResults onCollapsedClick: () => handleStepToggle(MetadataStep.ADVANCED_OPTIONS),
? (base.settingsCollapsed ? base.handleSettingsReset : undefined)
: () => setAdvancedOptionsCollapsed(!advancedOptionsCollapsed),
tooltip: advancedOptionsTips, tooltip: advancedOptionsTips,
content: ( content: (
<AdvancedOptionsStep <AdvancedOptionsStep