fixes, modal improvement

alchemy-fr · Oct 14, 2024 · e35ec11 · e35ec11
1 parent 9507b86
commit e35ec11
Show file tree

Hide file tree

Showing 25 changed files with 78 additions and 92 deletions.
diff --git a/databox/api/src/Api/Provider/ShareReadProvider.php b/databox/api/src/Api/Provider/ShareReadProvider.php
@@ -44,10 +44,6 @@ public function provideShare(Share $item): Share
         $options = [
             AssetRenditionRepository::WITH_FILE => true,
         ];
-//        $renditionIds = [];
-//        if (!empty($renditionIds)) {
-//            $options[AssetRenditionRepository::OPT_DEFINITION_IDS] = $renditionIds;
-//        }
 
         /** @var AssetRendition[] $renditions */
         $renditions = $this->em->getRepository(AssetRendition::class)->findAssetRenditions($asset->getId(), $options);

diff --git a/databox/api/src/Asset/Attribute/AttributesResolver.php b/databox/api/src/Asset/Attribute/AttributesResolver.php
@@ -100,7 +100,7 @@ public function assignHighlight(array $attributes, array $highlights): void
             $definition = $attribute->getDefinition();
             $f = $this->fieldNameResolver->getFieldNameFromDefinition($definition);
 
-            $fieldName = sprintf('attributes.%s.%s', $locale, $f);
+            $fieldName = sprintf('%s.%s.%s', AttributeInterface::ATTRIBUTES_FIELD, $locale, $f);
 
             if ($h = ($highlights[$fieldName] ?? null)) {
                 if ($definition->isMultiple()) {

diff --git a/databox/client/src/components/AttributeEditor/attributeGroup.ts b/databox/client/src/components/AttributeEditor/attributeGroup.ts
@@ -21,7 +21,7 @@ import {
 import {getBatchActions} from './batchActions.ts';
 import {useModals} from '@alchemy/navigation';
 import SavePreviewDialog from './SavePreviewDialog.tsx';
-import {useDirtyFormPromptOutsideRouter} from '../Dialog/Tabbed/FormTab.tsx';
+import {useDirtyFormPrompt} from '../Dialog/Tabbed/FormTab.tsx';
 import {useTranslation} from 'react-i18next';
 import {AttributeType} from '../../api/attributes.ts';
 import {getAttributeType} from '../Media/Asset/Attribute/types';
@@ -34,6 +34,7 @@ type Props = {
     definition: AttributeDefinition | undefined;
     setDefinition: StateSetter<AttributeDefinition | undefined>;
     onSaved: () => void;
+    modalIndex?: number | undefined;
 };
 
 export function useAttributeValues<T>({
@@ -44,6 +45,7 @@ export function useAttributeValues<T>({
     definition,
     setDefinition,
     onSaved,
+    modalIndex,
 }: Props) {
     const {t} = useTranslation();
     const {openModal} = useModals();
@@ -433,7 +435,7 @@ export function useAttributeValues<T>({
         });
     }, [index, initialIndex, definitionIndex, onSaved]);
 
-    useDirtyFormPromptOutsideRouter(history.current > 0);
+    useDirtyFormPrompt(history.current > 0, modalIndex);
 
     return {
         attributeDefinitions: finalAttributeDefinitions,

diff --git a/databox/client/src/components/AttributeEntity/CreateAttributeEntityDialog.tsx b/databox/client/src/components/AttributeEntity/CreateAttributeEntityDialog.tsx
@@ -3,7 +3,7 @@ import {useTranslation} from 'react-i18next';
 import {AppDialog} from '@alchemy/phrasea-ui';
 import {
     StackedModalProps,
-    useInRouterDirtyFormPrompt,
+    useFormPrompt,
     useModals,
 } from '@alchemy/navigation';
 import {Button, TextField} from '@mui/material';
@@ -78,7 +78,7 @@ export default function CreateAttributeEntityDialog({
         },
     });
 
-    useInRouterDirtyFormPrompt(t, forbidNavigation);
+    useFormPrompt(t, forbidNavigation, modalIndex);
 
     return (
         <AppDialog

diff --git a/databox/client/src/components/Basket/CreateBasket.tsx b/databox/client/src/components/Basket/CreateBasket.tsx
@@ -6,7 +6,7 @@ import {postBasket} from '../../api/basket';
 import {toast} from 'react-toastify';
 import {useTranslation} from 'react-i18next';
 import {StackedModalProps, useModals} from '@alchemy/navigation';
-import {useDirtyFormPromptOutsideRouter} from '../Dialog/Tabbed/FormTab';
+import {useDirtyFormPrompt} from '../Dialog/Tabbed/FormTab';
 import {useBasketStore} from '../../store/basketStore';
 
 type Props = {
@@ -37,7 +37,7 @@ export default function CreateBasket({modalIndex, open, onCreate}: Props) {
     });
 
     const {submitting, remoteErrors, forbidNavigation} = usedFormSubmit;
-    useDirtyFormPromptOutsideRouter(forbidNavigation);
+    useDirtyFormPrompt(forbidNavigation, modalIndex);
     const formId = 'create-basket';
 
     return (

diff --git a/databox/client/src/components/Dialog/Basket/EditBasket.tsx b/databox/client/src/components/Dialog/Basket/EditBasket.tsx
@@ -4,7 +4,7 @@ import {toast} from 'react-toastify';
 import {useFormSubmit} from '@alchemy/api';
 import FormTab from '../Tabbed/FormTab';
 import {DialogTabProps} from '../Tabbed/TabbedDialog';
-import {useInRouterDirtyFormPrompt} from '@alchemy/navigation';
+import {useFormPrompt} from '@alchemy/navigation';
 import {useBasketStore} from '../../../store/basketStore';
 import {putBasket} from '../../../api/basket';
 import {BasketForm} from '../../Form/BasketForm';
@@ -35,7 +35,7 @@ export default function EditBasket({data, onClose, minHeight}: Props) {
     });
 
     const {submitting, remoteErrors, forbidNavigation} = usedFormSubmit;
-    useInRouterDirtyFormPrompt(t, forbidNavigation);
+    useFormPrompt(t, forbidNavigation);
 
     const formId = 'edit-basket';
 

diff --git a/databox/client/src/components/Dialog/Collection/EditCollection.tsx b/databox/client/src/components/Dialog/Collection/EditCollection.tsx
@@ -6,7 +6,7 @@ import {useFormSubmit} from '@alchemy/api';
 import FormTab from '../Tabbed/FormTab';
 import {DialogTabProps} from '../Tabbed/TabbedDialog';
 import {CollectionForm} from '../../Form/CollectionForm';
-import {useInRouterDirtyFormPrompt} from '@alchemy/navigation';
+import {useFormPrompt} from '@alchemy/navigation';
 import {useCollectionStore} from '../../../store/collectionStore';
 
 export type OnCollectionEdit = (coll: Collection) => void;
@@ -40,7 +40,7 @@ export default function EditCollection({data, onClose, minHeight}: Props) {
     });
 
     const {submitting, remoteErrors, forbidNavigation} = usedFormSubmit;
-    useInRouterDirtyFormPrompt(t, forbidNavigation);
+    useFormPrompt(t, forbidNavigation);
 
     const formId = 'edit-collection';
 

diff --git a/databox/client/src/components/Dialog/Tabbed/FormTab.tsx b/databox/client/src/components/Dialog/Tabbed/FormTab.tsx
@@ -7,8 +7,7 @@ import SaveIcon from '@mui/icons-material/Save';
 import RemoteErrors from '../../Form/RemoteErrors';
 import {useTranslation} from 'react-i18next';
 import {
-    useInRouterDirtyFormPrompt,
-    useOutsideRouterDirtyFormPrompt,
+    useFormPrompt,
 } from '@alchemy/navigation';
 
 type Props = PropsWithChildren<{
@@ -22,16 +21,10 @@ type Props = PropsWithChildren<{
     minHeight?: number | undefined;
 }>;
 
-export function useDirtyFormPrompt(isDirty: boolean) {
+export function useDirtyFormPrompt(isDirty: boolean, modalIndex?: number) {
     const {t} = useTranslation();
 
-    useInRouterDirtyFormPrompt(t, isDirty);
-}
-
-export function useDirtyFormPromptOutsideRouter(isDirty: boolean) {
-    const {t} = useTranslation();
-
-    useOutsideRouterDirtyFormPrompt(t, isDirty);
+    useFormPrompt(t, isDirty, modalIndex);
 }
 
 export default function FormTab({

diff --git a/databox/client/src/components/Integration/Phrasea/Expose/CreatePublicationDialog.tsx b/databox/client/src/components/Integration/Phrasea/Expose/CreatePublicationDialog.tsx
@@ -8,7 +8,7 @@ import {useFormSubmit} from '@alchemy/api';
 import {
     StackedModalProps,
     useModals,
-    useOutsideRouterDirtyFormPrompt,
+    useFormPrompt,
 } from '@alchemy/navigation';
 import {Basket, IntegrationData} from '../../../../types.ts';
 import {runIntegrationAction} from '../../../../api/integrations.ts';
@@ -79,7 +79,7 @@ export default function CreatePublicationDialog({
             closeModal();
         },
     });
-    useOutsideRouterDirtyFormPrompt(t, forbidNavigation, modalIndex);
+    useFormPrompt(t, forbidNavigation, modalIndex);
 
     const formId = 'ep';
 

diff --git a/databox/client/src/components/Media/Asset/Actions/CopyAssetsDialog.tsx b/databox/client/src/components/Media/Asset/Actions/CopyAssetsDialog.tsx
@@ -13,22 +13,10 @@ import {SwitchWidget} from '@alchemy/react-form';
 import {Asset} from '../../../../types';
 import AssetSelection from '../../../AssetList/AssetSelection';
 import {StackedModalProps, useModals} from '@alchemy/navigation';
-import {useDirtyFormPromptOutsideRouter} from '../../../Dialog/Tabbed/FormTab';
+import {useDirtyFormPrompt} from '../../../Dialog/Tabbed/FormTab';
 import {toast} from 'react-toastify';
 import {OnSelectionChange} from '../../../AssetList/types';
 
-type FormData = {
-    destination: string;
-    byReference: boolean;
-    withAttributes: boolean;
-    withTags: boolean;
-};
-
-type Props = {
-    assets: Asset[];
-    onComplete: () => void;
-} & StackedModalProps;
-
 function AssetList({
     assets,
     onSelectionChange,
@@ -60,6 +48,18 @@ function AssetList({
     );
 }
 
+type FormData = {
+    destination: string;
+    byReference: boolean;
+    withAttributes: boolean;
+    withTags: boolean;
+};
+
+type Props = {
+    assets: Asset[];
+    onComplete: () => void;
+} & StackedModalProps;
+
 export default function CopyAssetsDialog({
     assets,
     onComplete,
@@ -122,7 +122,7 @@ export default function CopyAssetsDialog({
             onComplete();
         },
     });
-    useDirtyFormPromptOutsideRouter(forbidNavigation);
+    useDirtyFormPrompt(forbidNavigation, modalIndex);
     const byRef = watch('byReference');
 
     const nonLinkablePerm: Asset[] = useMemo(

diff --git a/databox/client/src/components/Media/Asset/Actions/ExportAssetsDialog.tsx b/databox/client/src/components/Media/Asset/Actions/ExportAssetsDialog.tsx
@@ -97,7 +97,7 @@ export default function ExportAssetsDialog({assets, open, modalIndex}: Props) {
             closeModal();
         },
     });
-    useDirtyFormPrompt(forbidNavigation);
+    useDirtyFormPrompt(forbidNavigation, modalIndex);
 
     const formId = 'export';
 

diff --git a/databox/client/src/components/Media/Asset/Actions/MoveAssetsDialog.tsx b/databox/client/src/components/Media/Asset/Actions/MoveAssetsDialog.tsx
@@ -8,7 +8,7 @@ import {FormFieldErrors} from '@alchemy/react-form';
 import DriveFileMoveIcon from '@mui/icons-material/DriveFileMove';
 import RemoteErrors from '../../../Form/RemoteErrors';
 import {StackedModalProps, useModals} from '@alchemy/navigation';
-import {useDirtyFormPromptOutsideRouter} from '../../../Dialog/Tabbed/FormTab';
+import {useDirtyFormPrompt} from '../../../Dialog/Tabbed/FormTab';
 import {toast} from 'react-toastify';
 
 type Props = {
@@ -50,7 +50,7 @@ export default function MoveAssetsDialog({
             onComplete();
         },
     });
-    useDirtyFormPromptOutsideRouter(forbidNavigation);
+    useDirtyFormPrompt(forbidNavigation, modalIndex);
 
     const formId = 'move-assets';
 

diff --git a/databox/client/src/components/Media/Asset/Actions/ReplaceAssetWithFileDialog.tsx b/databox/client/src/components/Media/Asset/Actions/ReplaceAssetWithFileDialog.tsx
@@ -42,7 +42,7 @@ export default function ReplaceAssetWithFileDialog({
                 closeModal();
             },
         });
-    useDirtyFormPrompt(forbidNavigation);
+    useDirtyFormPrompt(forbidNavigation, modalIndex);
 
     const formId = 'save-file-as-new-asset';
 

diff --git a/databox/client/src/components/Media/Asset/Actions/SaveFileAsNewAssetDialog.tsx b/databox/client/src/components/Media/Asset/Actions/SaveFileAsNewAssetDialog.tsx
@@ -82,7 +82,7 @@ export default function SaveFileAsNewAssetDialog({
             closeModal();
         },
     });
-    useDirtyFormPrompt(forbidNavigation);
+    useDirtyFormPrompt(forbidNavigation, modalIndex);
 
     const formId = 'save-file-as-new-asset';
 

diff --git a/databox/client/src/components/Media/Asset/Actions/SaveFileAsRenditionDialog.tsx b/databox/client/src/components/Media/Asset/Actions/SaveFileAsRenditionDialog.tsx
@@ -13,7 +13,7 @@ import {useFormSubmit} from '@alchemy/api';
 import {
     useModals,
     StackedModalProps,
-    useOutsideRouterDirtyFormPrompt,
+    useFormPrompt,
 } from '@alchemy/navigation';
 
 type FormData = {
@@ -62,7 +62,7 @@ export default function SaveFileAsRenditionDialog({
             closeModal();
         },
     });
-    useOutsideRouterDirtyFormPrompt(t, forbidNavigation, modalIndex);
+    useFormPrompt(t, forbidNavigation, modalIndex);
 
     const formId = 'save-file-as-rendition';
 

diff --git a/databox/client/src/components/Media/Collection/CreateCollection.tsx b/databox/client/src/components/Media/Collection/CreateCollection.tsx
@@ -9,7 +9,7 @@ import {CollectionChip, WorkspaceChip} from '../../Ui/Chips';
 import {StackedModalProps, useModals} from '@alchemy/navigation';
 import {OnCollectionEdit} from '../../Dialog/Collection/EditCollection';
 import React from 'react';
-import {useDirtyFormPromptOutsideRouter} from '../../Dialog/Tabbed/FormTab';
+import {useDirtyFormPrompt} from '../../Dialog/Tabbed/FormTab';
 
 type Props = {
     parent?: string;
@@ -59,7 +59,7 @@ export default function CreateCollection({
     });
 
     const {submitting, remoteErrors, forbidNavigation} = usedFormSubmit;
-    useDirtyFormPromptOutsideRouter(forbidNavigation);
+    useDirtyFormPrompt(forbidNavigation, modalIndex);
     const formId = 'create-collection';
 
     const title = titlePath ? (

diff --git a/databox/client/src/components/Root.tsx b/databox/client/src/components/Root.tsx
@@ -43,12 +43,14 @@ function WrapperComponent({children}: RouteWrapperProps) {
         <>
             <ModalStack>
                 <SessionExpireContainer />
-                <OverlayOutlet
-                    routes={modalRoutes}
-                    queryParam={'_m'}
-                    RouteProxyComponent={RouteProxy}
-                />
-                <MatomoRouteWrapper>{children}</MatomoRouteWrapper>
+                <MatomoRouteWrapper>
+                    <OverlayOutlet
+                        routes={modalRoutes}
+                        queryParam={'_m'}
+                        RouteProxyComponent={RouteProxy}
+                    />
+                    {children}
+                </MatomoRouteWrapper>
             </ModalStack>
         </>
     );

diff --git a/databox/client/src/components/Share/CreateShareDialog.tsx b/databox/client/src/components/Share/CreateShareDialog.tsx
@@ -6,7 +6,7 @@ import FormDialog from '../Dialog/FormDialog.tsx';
 import {
     StackedModalProps,
     useModals,
-    useOutsideRouterDirtyFormPrompt,
+    useFormPrompt,
 } from '@alchemy/navigation';
 import {createAssetShare} from '../../api/asset.ts';
 import {useFormSubmit} from '../../../../../lib/js/api';
@@ -51,7 +51,7 @@ export default function CreateShareDialog({
             closeModal();
         },
     });
-    useOutsideRouterDirtyFormPrompt(t, forbidNavigation, modalIndex);
+    useFormPrompt(t, forbidNavigation, modalIndex);
 
     const formId = 'create-share-link';
 

diff --git a/databox/client/src/components/Upload/UploadForm.tsx b/databox/client/src/components/Upload/UploadForm.tsx
@@ -21,7 +21,7 @@ import {OnChangeValue} from 'react-select';
 import {Asset, Attribute, Tag} from '../../types';
 import {AttributeIndex} from '../Media/Asset/Attribute/AttributesEditor';
 import FullPageLoader from '../Ui/FullPageLoader';
-import {useOutsideRouterDirtyFormPrompt} from '@alchemy/navigation';
+import {useFormPrompt} from '@alchemy/navigation';
 import {UseFormSubmitReturn} from '@alchemy/api';
 import {WorkspaceContext} from '../../context/WorkspaceContext.tsx';
 
@@ -48,6 +48,7 @@ export const UploadForm: FC<{
     usedFormSubmit: UseFormSubmitReturn<UploadData, Asset[], FormUploadData>;
     resetForms: () => void;
     formId: string;
+    modalIndex?: number;
 }> = function ({
     formId,
     usedFormSubmit,
@@ -59,6 +60,7 @@ export const UploadForm: FC<{
     onChangeWorkspace,
     onChangeCollection,
     resetForms,
+    modalIndex,
 }) {
     const {t} = useTranslation();
     const [selectedTemplates, setSelectedTemplates] = React.useState<string[]>(
@@ -79,7 +81,7 @@ export const UploadForm: FC<{
         submitting,
     } = usedFormSubmit;
 
-    useOutsideRouterDirtyFormPrompt(t, forbidNavigation);
+    useFormPrompt(t, forbidNavigation, modalIndex);
 
     const onTemplateSelect = React.useCallback(
         (values: OnChangeValue<SelectOption, true>) => {