#2698 : FormPage.jsx

Structure du code

Hooks utilisés : Dispatch, Params, Selector, Location, SearchParams, Effect, Memo

Importations depuis : ../../../actions, ../../../components/base/dynamicLayout, ../../../components/base/page/edit/TabNavigation, ../../../components/design, ../../../components/design/loading-container, ../../../utilities/layout, ../../../utilities/rest, ../../ProjectForge.module.scss, ./history, prop-types, react, react-redux, react-router

Possède des PropTypes pour : FormPage

Utilise les modules CSS pour le style.

Code source (abrégé)

import PropTypes from 'prop-types';
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useLocation, useParams, useSearchParams } from 'react-router';
import {
    callAction,
    loadFormPage,
    setCurrentData,
    setCurrentVariables,
    switchFromCurrentCategory,
} from '../../../actions';
import DynamicLayout from '../../../components/base/dynamicLayout';
import TabNavigation from '../../../components/base/page/edit/TabNavigation';
import { Alert, Container, TabContent, TabPane } from '../../../components/design';
import LoadingContainer from '../../../components/design/loading-container';
import { getTranslation } from '../../../utilities/layout';
import { getServiceURL } from '../../../utilities/rest';
import style from '../../ProjectForge.module.scss';
import FormHistory from './history';

function FormPage(
    {
        isPublic = false,
    },
) {
    const dispatch = useDispatch();
    const onCallAction = (...args) => dispatch(callAction(...args));
    const onCategorySwitch = (...args) => dispatch(switchFromCurrentCategory(...args));
    const onDataChange = (...args) => dispatch(setCurrentData(...args));
    const onNewFormPage = (...args) => dispatch(loadFormPage(...args));
    const onVariablesChange = (...args) => dispatch(setCurrentVariables(...args));
    const {
        type,
        category: currentCategory,
        id,
        tab,
    } = useParams();
    const category = useSelector(({ form }) => form.categories[currentCategory]) || {};
    const {
        data,
        isFetching,
        ui,
        validationErrors,
        variables,
    } = category;
    const location = useLocation();
    const [searchParams] = useSearchParams();
    const { userAccess } = ui || {};

    React.useEffect(
        () => {
            // Vérifie s'il s'agit d'une navigation programmatique avec le drapeau noReload
            // Les rechargements du navigateur doivent toujours récupérer des données fraîches
            const isNoReloadNavigation = location.state
                && location.state.noReload
                && window.performance
                && window.performance.navigation.type !== 1; // 1 = TYPE_RELOAD

            if (isNoReloadNavigation) {
                onCategorySwitch(
                    currentCategory,
                    location.state.newVariables || {},
                    location.state.merge,
                );
            } else {
                onNewFormPage(
                    currentCategory,
                    id,
                    getServiceURL(
                        `${isPublic ? '/rsPublic/' : ''}${currentCategory}/${type || 'dynamic'}`,
                        {
                            ...Object.fromEntries(searchParams.entries()),
                            id,
                        },
                    ),
                    location.state,
                );
            }
        },
        [
            currentCategory,
            id,
            location.state && location.state.noReload,
            location.state && location.state.newVariables,
        ],
    );

    const globalValidation = React.useMemo(() => {
        if (validationErrors === undefined) {
            return null;
        }
        const globalErrors = validationErrors.filter((entry) => entry.fieldId === undefined);

        if (globalErrors.length === 0) {
            return null;
        }

        return (
            <Alert color="danger">
                <ul>
                    {globalErrors.map(({ message, messageId }) => (
                        <li key={`form-page-global-validation-${messageId}`}>
                            {message}
                        </li>
                    ))}
                </ul>
            </Alert>
        );
    }, [validationErrors]);

    if (ui === undefined || ui.title === undefined) {
        return <LoadingContainer loading />;
    }

    // Construit l'URL de base à partir de l'emplacement actuel pour préserver les routes imbriquées (ex : /calendar/)
    // Supprime le suffixe /history s'il est présent, et supprime les paramètres de requête
    const formBaseUrl = location.pathname.replace(/\/history$/, '').split('?')[0];
    const tabs = [
        {
            id: 'form',
// ... (tronqué, total 191 lignes)

Historique Git

bf988bc6d Élimination de 43 vulnérabilités npm : react-scripts→Vite, ESLint 9, nettoyage des dépendances, corrections de bugs
d61a30129 FormPage.jsx : roue de chargement infini corrigée.
05bcb43b9 Gestion des entrées d'historique dans les boîtes de dialogue modales corrigée.
f02617502 HistoryEntry.jsx : diffSummary, modification du commentaire utilisateur affiché uniquement si disponible.
3490f27f1 correction de la page calendrier et du tableau des horaires