fix(prélèvement): affichage de la conformité des échantillons (#618)

jrivals · jrivals · commit 17669abef7f7 · 2026-03-09T17:23:42.000+01:00
* ajoute un debounce sur l'enregistrement à chaud des formulaires

* Fix build

* Fix design

* Fix design

* Affiche la conformité de l'échantillon

* fix tests

* Fix tests
diff --git a/frontend/src/App.scss b/frontend/src/App.scss
@@ -227,6 +227,10 @@ textarea.fr-input {
   text-align: right;
 }
 
+.d-block {
+  display: block;
+}
+
 h6,
 .d-flex-align-center {
   display: flex;
diff --git a/frontend/src/components/Prescription/PrescriptionNotes/PrescriptionNotes.tsx b/frontend/src/components/Prescription/PrescriptionNotes/PrescriptionNotes.tsx
@@ -19,7 +19,7 @@ const PrescriptionNotes = ({
   const [notes, setNotes] = useState(value);
 
   const { triggerSave } = useAutoSave({
-    onSave: (value) => onSubmitNotes?.(value),
+    onSave: (value) => onSubmitNotes?.(value as string),
     delay: 500
   });
 
diff --git a/frontend/src/components/Prescription/PrescriptionProgrammingInstruction/PrescriptionProgrammingInstruction.tsx b/frontend/src/components/Prescription/PrescriptionProgrammingInstruction/PrescriptionProgrammingInstruction.tsx
@@ -21,7 +21,7 @@ const PrescriptionProgrammingInstruction = ({
   const [instruction, setInstruction] = useState(value || '');
 
   const { triggerSave } = useAutoSave({
-    onSave: (value) => onSubmitInstruction?.(value),
+    onSave: (value) => onSubmitInstruction?.(value as string),
     delay: 500
   });
 
diff --git a/frontend/src/hooks/useAutoSave.ts b/frontend/src/hooks/useAutoSave.ts
@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 
 interface UseAutoSaveOptions {
-  onSave: (value: string) => void | Promise<void>;
+  onSave: (value?: string) => void | Promise<void>;
   delay?: number;
 }
 
@@ -16,7 +16,7 @@ export const useAutoSave = ({ onSave, delay = 500 }: UseAutoSaveOptions) => {
     };
   }, []);
 
-  const triggerSave = (value: string) => {
+  const triggerSave = (value?: string) => {
     if (debounceTimerRef.current) {
       clearTimeout(debounceTimerRef.current);
     }
diff --git a/frontend/src/hooks/useForm.tsx b/frontend/src/hooks/useForm.tsx
@@ -1,6 +1,7 @@
 import { isEqual } from 'lodash-es';
 import { useEffect, useState } from 'react';
 import { z, ZodObject } from 'zod';
+import { useAutoSave } from './useAutoSave';
 
 type MessageType = 'error' | 'success' | 'default';
 
@@ -105,9 +106,14 @@ export function useForm<
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [...Object.values(input)]);
 
+  const { triggerSave } = useAutoSave({
+    onSave: () => onInputChange?.(),
+    delay: 500
+  });
+
   useEffect(() => {
     if (isInitialized) {
-      (async () => await onInputChange?.())();
+      triggerSave?.();
     }
     setIsInitialized(true);
   }, [...Object.values(input)]); // eslint-disable-line react-hooks/exhaustive-deps
diff --git a/frontend/src/views/SampleView/DraftSample/MatrixStep/stories/MatrixStepPPV.stories.tsx b/frontend/src/views/SampleView/DraftSample/MatrixStep/stories/MatrixStepPPV.stories.tsx
@@ -11,7 +11,7 @@ import {
   genSampleContextData
 } from 'maestro-shared/test/sampleFixtures';
 import { genAuthUser, genUser } from 'maestro-shared/test/userFixtures';
-import { expect, fn, screen, userEvent, within } from 'storybook/test';
+import { expect, fn, screen, userEvent, waitFor, within } from 'storybook/test';
 import { getMockApi, MockApi } from '../../../../../services/mockApiClient';
 import MatrixStep from '../MatrixStep';
 
@@ -187,7 +187,7 @@ export const MatrixStepPPVSaveOnBlurWithoutHandlingErrors: Story = {
       canvas.queryByText('Veuillez renseigner la partie du végétal.')
     ).not.toBeInTheDocument();
 
-    await expect(createOrUpdateMock).toHaveBeenCalled();
+    await waitFor(() => expect(createOrUpdateMock).toHaveBeenCalled());
   }
 };
 
diff --git a/frontend/src/views/SampleView/SampleItemAnalysis/SampleItemAdmissibility/SampleItemAdmissibility.tsx b/frontend/src/views/SampleView/SampleItemAnalysis/SampleItemAdmissibility/SampleItemAdmissibility.tsx
@@ -5,7 +5,6 @@ import clsx from 'clsx';
 import { format } from 'date-fns';
 import './SampleItemAdmissibility.scss';
 
-import { PartialAnalysis } from 'maestro-shared/schema/Analysis/Analysis';
 import { getLaboratoryFullName } from 'maestro-shared/schema/Laboratory/Laboratory';
 import { SampleChecked } from 'maestro-shared/schema/Sample/Sample';
 import { SampleItem } from 'maestro-shared/schema/Sample/SampleItem';
@@ -17,7 +16,6 @@ import { SampleItemAdmissibilityEditModal } from './SampleItemAdmissibilityEditM
 interface Props {
   sample: SampleChecked;
   sampleItem: SampleItem;
-  sampleItemAnalysis?: PartialAnalysis;
   readonly: boolean;
 }
 
@@ -29,7 +27,6 @@ const editSampleAdmissibility = createModal({
 export const SampleItemAdmissibility: FunctionComponent<Props> = ({
   sample,
   sampleItem,
-  sampleItemAnalysis,
   readonly,
   ..._rest
 }) => {
@@ -39,7 +36,7 @@ export const SampleItemAdmissibility: FunctionComponent<Props> = ({
   let message: string = '';
 
   if (sampleItem.receiptDate) {
-    message = `${sampleItemAnalysis?.status !== 'NotAdmissible' ? 'Échantillon recevable' : 'Échantillon non recevable'} reçu par le laboratoire le ${format(sampleItem.receiptDate, 'dd/MM/yyyy')}`;
+    message = `${sampleItem.analysis?.status !== 'NotAdmissible' ? 'Échantillon recevable' : 'Échantillon non recevable'} reçu par le laboratoire le ${format(sampleItem.receiptDate, 'dd/MM/yyyy')}`;
   } else {
     message = 'Aucune information relative à la réception par le laboratoire.';
   }
@@ -81,19 +78,18 @@ export const SampleItemAdmissibility: FunctionComponent<Props> = ({
             )}
           </div>
           <div className={cx('fr-text--bold')}>{message}</div>
+
+          {!!sampleItem.notesOnAdmissibility &&
+            sampleItem.notesOnAdmissibility.length > 0 && (
+              <i>{sampleItem.notesOnAdmissibility}</i>
+            )}
         </div>
 
         <SampleItemAdmissibilityEditModal
           modal={editSampleAdmissibility}
           sampleItem={sampleItem}
-          sampleItemAnalysis={sampleItemAnalysis}
         />
       </div>
-
-      {!!sampleItem.notesOnAdmissibility &&
-        sampleItem.notesOnAdmissibility.length > 0 && (
-          <i>{sampleItem.notesOnAdmissibility}</i>
-        )}
     </div>
   );
 };
diff --git a/frontend/src/views/SampleView/SampleItemAnalysis/SampleItemAdmissibility/SampleItemAdmissibilityEditModal.tsx b/frontend/src/views/SampleView/SampleItemAnalysis/SampleItemAdmissibility/SampleItemAdmissibilityEditModal.tsx
@@ -1,5 +1,4 @@
 import { createModal } from '@codegouvfr/react-dsfr/Modal';
-import { PartialAnalysis } from 'maestro-shared/schema/Analysis/Analysis';
 import { SampleItem } from 'maestro-shared/schema/Sample/SampleItem';
 import React, { FunctionComponent, useContext, useRef } from 'react';
 import { assert, type Equals } from 'tsafe';
@@ -11,13 +10,11 @@ import {
 
 type Props = {
   sampleItem: SampleItem;
-  sampleItemAnalysis?: PartialAnalysis;
   modal: ReturnType<typeof createModal>;
 };
 export const SampleItemAdmissibilityEditModal: FunctionComponent<Props> = ({
   modal,
   sampleItem,
-  sampleItemAnalysis,
   ..._rest
 }) => {
   assert<Equals<keyof typeof _rest, never>>();
@@ -42,9 +39,11 @@ export const SampleItemAdmissibilityEditModal: FunctionComponent<Props> = ({
             sampleItemUpdate: {
               ...sampleItem,
               receiptDate,
-              analysisStatus:
-                isAdmissible === false ? 'NotAdmissible' : 'Report',
-              notesOnAdmissibility: notesOnAdmissibility
+              analysis: {
+                ...sampleItem.analysis,
+                status: isAdmissible === false ? 'NotAdmissible' : 'Report'
+              },
+              notesOnAdmissibility
             }
           });
           form.reset();
@@ -76,7 +75,6 @@ export const SampleItemAdmissibilityEditModal: FunctionComponent<Props> = ({
     >
       <SampleItemAdmissibilityForm
         sampleItem={sampleItem}
-        sampleItemAnalysis={sampleItemAnalysis}
         setForm={(f) => (admissibilityForm.current = f)}
       />
     </modal.Component>
diff --git a/frontend/src/views/SampleView/SampleItemAnalysis/SampleItemAdmissibility/SampleItemAdmissibilityForm.tsx b/frontend/src/views/SampleView/SampleItemAnalysis/SampleItemAdmissibility/SampleItemAdmissibilityForm.tsx
@@ -6,7 +6,6 @@ import { useForm } from '../../../../hooks/useForm';
 import { cx } from '@codegouvfr/react-dsfr/fr/cx';
 import clsx from 'clsx';
 import { isNil } from 'lodash-es';
-import { PartialAnalysis } from 'maestro-shared/schema/Analysis/Analysis';
 import { SampleItem } from 'maestro-shared/schema/Sample/SampleItem';
 import { MaestroDate } from 'maestro-shared/utils/date';
 import { FunctionComponent } from 'react';
@@ -52,12 +51,10 @@ const FormChecked = z
 export type FormRefinement = ReturnType<typeof useForm<typeof FormChecked>>;
 type Props = {
   sampleItem: SampleItem;
-  sampleItemAnalysis?: PartialAnalysis;
   setForm?: (form: FormRefinement) => void;
 };
 export const SampleItemAdmissibilityForm: FunctionComponent<Props> = ({
   sampleItem,
-  sampleItemAnalysis,
   setForm,
   ..._rest
 }) => {
@@ -68,9 +65,9 @@ export const SampleItemAdmissibilityForm: FunctionComponent<Props> = ({
   );
   const [receiptDate, setReceiptDate] = useState(sampleItem.receiptDate);
   const [isAdmissible, setIsAdmissible] = useState(
-    sampleItemAnalysis?.status === 'NotAdmissible'
+    sampleItem.analysis?.status === 'NotAdmissible'
       ? false
-      : !isNil(sampleItemAnalysis?.status)
+      : !isNil(sampleItem.analysis?.status)
         ? true
         : null
   );
diff --git a/frontend/src/views/SampleView/SampleItemAnalysis/SampleItemAnalysis.tsx b/frontend/src/views/SampleView/SampleItemAnalysis/SampleItemAnalysis.tsx
@@ -53,11 +53,7 @@ const SampleItemAnalysis: FunctionComponent<Props> = ({
     apiClient.useUpdateAnalysisMutation({
       fixedCacheKey: `complete-analysis-${sample.id}`
     });
-  const {
-    data: analysis,
-    isLoading: isAnalysisLoading,
-    isFetching: isAnalysisFetching
-  } = apiClient.useGetSampleItemAnalysisQuery({
+  const { data: analysis } = apiClient.useGetSampleItemAnalysisQuery({
     sampleId: sample.id,
     itemNumber: sampleItem.itemNumber,
     copyNumber: sampleItem.copyNumber
@@ -119,7 +115,8 @@ const SampleItemAnalysis: FunctionComponent<Props> = ({
 
   const isEditing: boolean =
     !readonly &&
-    (location.pathname.endsWith('/edit') || analysis?.status !== 'Completed');
+    (location.pathname.endsWith('/edit') ||
+      sampleItem.analysis?.status !== 'Completed');
 
   return (
     <div className={'analysis-container'}>
@@ -156,14 +153,11 @@ const SampleItemAnalysis: FunctionComponent<Props> = ({
       )}
 
       <div>
-        {!isAnalysisFetching && !isAnalysisLoading && (
-          <SampleItemAdmissibility
-            sample={sample}
-            readonly={readonly}
-            sampleItem={sampleItem}
-            sampleItemAnalysis={analysis}
-          />
-        )}
+        <SampleItemAdmissibility
+          sample={sample}
+          readonly={readonly}
+          sampleItem={sampleItem}
+        />
         {analysis?.status !== 'NotAdmissible' && (
           <AnalysisDocumentPreview
             partialAnalysis={analysis}
@@ -358,25 +352,24 @@ const SampleItemAnalysis: FunctionComponent<Props> = ({
         </Accordion>
       </div>
 
-      {['Analysis', 'InReview', 'Completed'].includes(sample.status) &&
-        analysis && (
-          <>
-            {!isEditing ? (
-              <SampleAnalysisOverview
-                sample={sample}
-                analysis={analysis}
-                readonly={readonly}
-                onEdit={() => navigateToSampleEdit(sample.id)}
-              />
-            ) : (
-              <SampleAnalysisForm
-                partialAnalysis={analysis}
-                sample={sample}
-                onDone={() => navigateToSample(sample.id)}
-              />
-            )}
-          </>
-        )}
+      {analysis && (
+        <>
+          {!isEditing ? (
+            <SampleAnalysisOverview
+              sample={sample}
+              analysis={analysis}
+              readonly={readonly}
+              onEdit={() => navigateToSampleEdit(sample.id)}
+            />
+          ) : (
+            <SampleAnalysisForm
+              partialAnalysis={analysis}
+              sample={sample}
+              onDone={() => navigateToSample(sample.id)}
+            />
+          )}
+        </>
+      )}
       {sample.status === 'InReview' && <UserFeedback />}
     </div>
   );
diff --git a/frontend/src/views/SampleView/SampleItemAnalysis/SampleItemAnalysisOverview/SampleAnalysisOverview.tsx b/frontend/src/views/SampleView/SampleItemAnalysis/SampleItemAnalysisOverview/SampleAnalysisOverview.tsx
@@ -5,9 +5,6 @@ import { type PartialAnalysis } from 'maestro-shared/schema/Analysis/Analysis';
 import { SampleChecked } from 'maestro-shared/schema/Sample/Sample';
 import { FunctionComponent } from 'react';
 import { assert, type Equals } from 'tsafe';
-import check from '../../../../assets/illustrations/check.svg';
-import close from '../../../../assets/illustrations/close.svg';
-import { quote } from '../../../../utils/stringUtils';
 import { ResidueListResult } from './ResidueListResult';
 import { ResidueResultOverview } from './ResidueResultOverview';
 import { ResiduesSummary } from './ResiduesSummary';
@@ -57,44 +54,6 @@ export const SampleAnalysisOverview: FunctionComponent<Props> = ({
               )}
             />
           )}
-
-          {analysis.compliance !== null && (
-            <div
-              className={clsx(
-                cx('fr-callout'),
-                analysis.compliance
-                  ? 'fr-callout--green-emeraude'
-                  : 'fr-callout--pink-tuile',
-                'white-container',
-                'border-bottom'
-              )}
-            >
-              <h4 className="d-flex-align-center">
-                <div className="flex-grow-1">
-                  Conformité globale de l'échantillon
-                </div>
-              </h4>
-              <div>
-                {analysis.compliance ? (
-                  <h5 className={clsx('d-flex-align-center', cx('fr-mb-0'))}>
-                    <img src={check} alt="" className={cx('fr-mr-2w')} />
-                    Échantillon conforme
-                  </h5>
-                ) : (
-                  <h5 className={clsx('d-flex-align-center', cx('fr-mb-0'))}>
-                    <img src={close} alt="" className={cx('fr-mr-2w')} />
-                    Échantillon non conforme
-                  </h5>
-                )}
-                {analysis.notesOnCompliance && (
-                  <div className={cx('fr-pl-9w', 'fr-text--lead')}>
-                    <div>Note additionnelle</div>
-                    <i>{quote(analysis.notesOnCompliance)}</i>
-                  </div>
-                )}
-              </div>
-            </div>
-          )}
         </>
       )}
     </>
diff --git a/frontend/src/views/SampleView/SampleOverview/SampleItemCopiesOverview.tsx b/frontend/src/views/SampleView/SampleOverview/SampleItemCopiesOverview.tsx
diff --git a/frontend/src/views/SampleView/SampleOverview/SampleOverview.tsx b/frontend/src/views/SampleView/SampleOverview/SampleOverview.tsx
diff --git a/server/controllers/sampleController.ts b/server/controllers/sampleController.ts
diff --git a/server/repositories/sampleItemRepository.ts b/server/repositories/sampleItemRepository.ts
diff --git a/shared/schema/Sample/SampleItem.ts b/shared/schema/Sample/SampleItem.ts

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`import { useEffect, useRef } from 'react';`
`2`	`2`
`3`	`3`	`interface UseAutoSaveOptions {`
`4`		`- onSave: (value: string) => void \| Promise<void>;`
	`4`	`+ onSave: (value?: string) => void \| Promise<void>;`
`5`	`5`	`delay?: number;`
`6`	`6`	`}`
`7`	`7`
`@@ -16,7 +16,7 @@ export const useAutoSave = ({ onSave, delay = 500 }: UseAutoSaveOptions) => {`
`16`	`16`	`};`
`17`	`17`	`}, []);`
`18`	`18`
`19`		`- const triggerSave = (value: string) => {`
	`19`	`+ const triggerSave = (value?: string) => {`
`20`	`20`	`if (debounceTimerRef.current) {`
`21`	`21`	`clearTimeout(debounceTimerRef.current);`
`22`	`22`	`}`