betagouv · jrivals · Dec 12, 2024 · Dec 12, 2024
diff --git a/frontend/index.html b/frontend/index.html
@@ -7,7 +7,7 @@
     <link rel="apple-touch-icon" href="/dsfr/favicon/apple-touch-icon.png?v=1.12.1" />
     <link rel="icon" href="/dsfr/favicon/favicon.svg?v=1.12.1" type="image/svg+xml" />
     <link rel="shortcut icon" href="/dsfr/favicon/favicon.ico?v=1.12.1" type="image/x-icon" />
-    <link rel="stylesheet" href="/dsfr/utility/icons/icons.min.css?hash=edb92a31" />
+    <link rel="stylesheet" href="/dsfr/utility/icons/icons.min.css?hash=e44afab5" />
     <link rel="stylesheet" href="/dsfr/dsfr.min.css?v=1.12.1" />
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" />
 

diff --git a/frontend/src/components/Prescription/RegionalPrescriptionCard/RegionalPrescriptionCard.tsx b/frontend/src/components/Prescription/RegionalPrescriptionCard/RegionalPrescriptionCard.tsx
@@ -1,3 +1,4 @@
+import Checkbox from '@codegouvfr/react-dsfr/Checkbox';
 import { cx } from '@codegouvfr/react-dsfr/fr/cx';
 import clsx from 'clsx';
 import { MatrixLabels } from 'shared/referential/Matrix/MatrixLabels';
@@ -17,13 +18,17 @@ interface Props {
   prescription: Prescription;
   regionalPrescription?: RegionalPrescription;
   onChangeLaboratory: (laboratoryId: string) => Promise<void>;
+  isSelected?: boolean;
+  onToggleSelection?: () => void;
 }
 
 const RegionalPrescriptionCard = ({
   programmingPlan,
   prescription,
   regionalPrescription,
-  onChangeLaboratory
+  onChangeLaboratory,
+  isSelected,
+  onToggleSelection
 }: Props) => {
   const { hasUserRegionalPrescriptionPermission } = useAuthentication();
 
@@ -41,8 +46,29 @@ const RegionalPrescriptionCard = ({
       >
         <div className={cx('fr-card__body')}>
           <div className={cx('fr-card__content')}>
-            <h3 className={cx('fr-card__title')}>
-              {MatrixLabels[prescription.matrix]}
+            <h3 className={clsx(cx('fr-card__title'), 'd-flex-align-center')}>
+              <div className="flex-grow-1">
+                {MatrixLabels[prescription.matrix]}
+              </div>
+              {hasUserRegionalPrescriptionPermission(
+                programmingPlan,
+                regionalPrescription
+              )?.updateLaboratory && (
+                <Checkbox
+                  options={[
+                    {
+                      label: '',
+                      nativeInputProps: {
+                        checked: isSelected,
+                        onChange: onToggleSelection
+                      }
+                    }
+                  ]}
+                  classes={{
+                    content: 'fr-mt-1v'
+                  }}
+                />
+              )}
             </h3>
             {prescription.notes && (
               <div className={cx('fr-mt-1v')}>

diff --git a/...components/Prescription/RegionalPrescriptionLaboratory/RegionalPrescriptionLaboratory.tsx b/...components/Prescription/RegionalPrescriptionLaboratory/RegionalPrescriptionLaboratory.tsx
@@ -43,7 +43,7 @@ const RegionalPrescriptionLaboratory = ({
   ];
 
   const currentLaboratory = laboratories?.find(
-    (laboratory) => laboratory.id === value
+    (laboratory) => laboratory.id === regionalPrescription.laboratoryId
   );
 
   return (

diff --git a/frontend/src/views/PrescriptionListView/PrescriptionListGroupedUpdate.tsx b/frontend/src/views/PrescriptionListView/PrescriptionListGroupedUpdate.tsx
@@ -0,0 +1,109 @@
+import Button from '@codegouvfr/react-dsfr/Button';
+import { cx } from '@codegouvfr/react-dsfr/fr/cx';
+import Select from '@codegouvfr/react-dsfr/Select';
+import clsx from 'clsx';
+import React from 'react';
+import { Laboratory } from 'shared/schema/Laboratory/Laboratory';
+import {
+  AppSelectOption,
+  defaultAppSelectOption
+} from 'src/components/_app/AppSelect/AppSelectOption';
+import { useFindLaboratoriesQuery } from 'src/services/laboratory.service';
+import { pluralize } from 'src/utils/stringUtils';
+import './PrescriptionListView.scss';
+interface Props {
+  selectedCount: number;
+  totalCount: number;
+  onSubmit: (laboratoryId?: string) => Promise<void>;
+  onCancel: () => void;
+  onSelectAll: () => void;
+}
+
+const PrescriptionListGroupedUpdate = ({
+  selectedCount,
+  totalCount,
+  onSubmit,
+  onCancel,
+  onSelectAll
+}: Props) => {
+  const [laboratoryId, setLaboratoryId] = React.useState<string>();
+
+  const { data: laboratories } = useFindLaboratoriesQuery();
+
+  const laboratoriesOptions = (
+    laboratories: Laboratory[] = []
+  ): AppSelectOption[] => [
+    defaultAppSelectOption('Sélectionner un laboratoire'),
+    ...laboratories.map((laboratory) => ({
+      label: laboratory.name,
+      value: laboratory.id
+    }))
+  ];
+
+  return (
+    <div className={clsx(cx('fr-mt-5w'), 'grouped-update-container')}>
+      <div className={clsx(cx('fr-py-4w', 'fr-px-3w'), 'grouped-update-card')}>
+        <div>
+          <h6 className={cx('fr-mb-1w')}>
+            Action groupée
+            <span className={cx('fr-text--regular', 'fr-mb-0', 'fr-mx-1w')}>
+              • {selectedCount} {pluralize(selectedCount)('sélectionnée')}
+            </span>
+          </h6>
+          <Button
+            onClick={onSelectAll}
+            priority="tertiary no outline"
+            className={clsx(cx('fr-link--sm'), 'link-underline')}
+          >
+            Tout{' '}
+            {totalCount === selectedCount ? 'désélectionner' : 'sélectionner'}
+          </Button>
+        </div>
+        <Select
+          label="Laboratoire"
+          nativeSelectProps={{
+            value: laboratoryId ?? '',
+            autoFocus: true,
+            onChange: (e) => setLaboratoryId(e.target.value)
+          }}
+          className={cx('fr-mr-2w', 'fr-mb-0')}
+        >
+          {laboratoriesOptions(laboratories).map((option) => (
+            <option
+              label={option.label}
+              value={option.value}
+              disabled={option.disabled}
+              selected={option.selected}
+              hidden={option.hidden}
+              key={`option_${option.value}`}
+            ></option>
+          ))}
+        </Select>
+        <div>
+          <Button
+            className={cx('fr-mr-2w')}
+            onClick={async () => {
+              await onSubmit(laboratoryId);
+              setLaboratoryId(undefined);
+            }}
+          >
+            Mettre à jour
+          </Button>
+        </div>
+        <div>
+          <Button
+            priority="secondary"
+            onClick={() => {
+              setLaboratoryId(undefined);
+              onCancel();
+            }}
+          >
+            Annuler
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PrescriptionListGroupedUpdate;
diff --git a/frontend/src/views/PrescriptionListView/PrescriptionListHeader.tsx b/frontend/src/views/PrescriptionListView/PrescriptionListHeader.tsx
@@ -5,6 +5,7 @@ import { SegmentedControl } from '@codegouvfr/react-dsfr/SegmentedControl';
 import clsx from 'clsx';
 import { t } from 'i18next';
 import _ from 'lodash';
+import React from 'react';
 import { Matrix } from 'shared/referential/Matrix/Matrix';
 import { FindPrescriptionOptions } from 'shared/schema/Prescription/FindPrescriptionOptions';
 import { Prescription } from 'shared/schema/Prescription/Prescription';
@@ -15,21 +16,30 @@ import { useAppDispatch, useAppSelector } from 'src/hooks/useStore';
 import useWindowSize from 'src/hooks/useWindowSize';
 import { getPrescriptionsExportURL } from 'src/services/prescription.service';
 import prescriptionsSlice from 'src/store/reducers/prescriptionsSlice';
-
+import PrescriptionListGroupedUpdate from 'src/views/PrescriptionListView/PrescriptionListGroupedUpdate';
+import './PrescriptionListView.scss';
 interface Props {
   programmingPlan: ProgrammingPlan;
   findPrescriptionOptions: FindPrescriptionOptions;
   prescriptions: Prescription[];
   addMatrix: (matrix: Matrix) => Promise<void>;
   sampleCount?: number;
+  hasGroupedUpdatePermission?: boolean;
+  selectedCount?: number;
+  onGroupedUpdate?: (laboratoryId?: string) => Promise<void>;
+  onSelectAll: () => void;
 }
 
 const PrescriptionListHeader = ({
   programmingPlan,
   findPrescriptionOptions,
   prescriptions,
   addMatrix,
-  sampleCount
+  sampleCount,
+  hasGroupedUpdatePermission,
+  selectedCount,
+  onGroupedUpdate,
+  onSelectAll
 }: Props) => {
   const dispatch = useAppDispatch();
   const { isMobile } = useWindowSize();
@@ -40,6 +50,8 @@ const PrescriptionListHeader = ({
     (state) => state.prescriptions
   );
 
+  const [isGroupedUpdate, setIsGroupedUpdate] = React.useState(false);
+
   return (
     <>
       <div className={clsx('d-flex-align-center')}>
@@ -105,6 +117,17 @@ const PrescriptionListHeader = ({
             className={cx('fr-mr-3w')}
           />
         )}
+        {hasGroupedUpdatePermission && (
+          <Button
+            iconId="fr-icon-list-ordered"
+            priority="secondary"
+            title="Action groupée"
+            children={isMobile ? undefined : 'Action groupée'}
+            size={isMobile ? 'small' : 'medium'}
+            className={cx('fr-mr-2w')}
+            onClick={() => setIsGroupedUpdate(true)}
+          />
+        )}
         <Button
           iconId="fr-icon-file-download-line"
           priority="secondary"
@@ -116,6 +139,18 @@ const PrescriptionListHeader = ({
           size={isMobile ? 'small' : 'medium'}
         />
       </div>
+      {isGroupedUpdate && onGroupedUpdate && (
+        <PrescriptionListGroupedUpdate
+          selectedCount={selectedCount ?? 0}
+          totalCount={prescriptions.length}
+          onSubmit={async (laboratoryId) => {
+            await onGroupedUpdate(laboratoryId);
+            setIsGroupedUpdate(false);
+          }}
+          onCancel={() => setIsGroupedUpdate(false)}
+          onSelectAll={onSelectAll}
+        />
+      )}
     </>
   );
 };

diff --git a/frontend/src/views/PrescriptionListView/PrescriptionListView.scss b/frontend/src/views/PrescriptionListView/PrescriptionListView.scss
@@ -0,0 +1,17 @@
+.grouped-update-container {
+  width: 100%;
+
+  .grouped-update-card {
+    background-color: var(--blue-france-975-75);
+    border: 1px solid var(--blue-ecume-950-100-hover);
+    display: flex;
+
+    div:has(h6) {
+      flex-grow: 1;
+    }
+
+    div:has(.fr-btn) {
+      align-self: flex-end;
+    }
+  }
+}
diff --git a/frontend/src/views/PrescriptionListView/PrescriptionListView.tsx b/frontend/src/views/PrescriptionListView/PrescriptionListView.tsx
@@ -2,7 +2,7 @@ import { cx } from '@codegouvfr/react-dsfr/fr/cx';
 import { SegmentedControl } from '@codegouvfr/react-dsfr/SegmentedControl';
 import clsx from 'clsx';
 import _, { default as fp } from 'lodash';
-import { useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { Matrix } from 'shared/referential/Matrix/Matrix';
 import { MatrixLabels } from 'shared/referential/Matrix/MatrixLabels';
@@ -63,8 +63,15 @@ const PrescriptionListView = () => {
     useAppSelector((state) => state.prescriptions);
 
   const [searchParams, setSearchParams] = useSearchParams();
-  const { userInfos, hasNationalView, hasUserPrescriptionPermission } =
-    useAuthentication();
+  const {
+    userInfos,
+    hasNationalView,
+    hasUserPrescriptionPermission,
+    hasUserRegionalPrescriptionPermission
+  } = useAuthentication();
+
+  const [selectedRegionalPrescriptionIds, setSelectedRegionalPrescriptionIds] =
+    useState<string[]>([]);
 
   const [addPrescription, { isSuccess: isAddSuccess }] =
     useAddPrescriptionMutation();
@@ -246,11 +253,17 @@ const PrescriptionListView = () => {
     [changeRegionalPrescription] // eslint-disable-line react-hooks/exhaustive-deps
   );
 
-  const changeRegionalPrescriptionLaboratory = useCallback(
-    async (prescriptionId: string, laboratoryId?: string) =>
-      changeRegionalPrescription(prescriptionId, region, {
-        laboratoryId
-      }),
+  const changeRegionalPrescriptionsLaboratory = useCallback(
+    async (prescriptionIds: string[], laboratoryId?: string) => {
+      await Promise.all(
+        prescriptionIds.map((prescriptionId) =>
+          changeRegionalPrescription(prescriptionId, region, {
+            laboratoryId
+          })
+        )
+      );
+      return;
+    },
     [changeRegionalPrescription, region] // eslint-disable-line react-hooks/exhaustive-deps
   );
 
@@ -344,6 +357,29 @@ const PrescriptionListView = () => {
                   prescriptions={prescriptions}
                   addMatrix={(matrix) => addMatrix(programmingPlan.id, matrix)}
                   sampleCount={_.sumBy(regionalPrescriptions, 'sampleCount')}
+                  hasGroupedUpdatePermission={regionalPrescriptions.some(
+                    (regionalPrescription) =>
+                      hasUserRegionalPrescriptionPermission(
+                        programmingPlan,
+                        regionalPrescription
+                      )?.updateLaboratory
+                  )}
+                  selectedCount={selectedRegionalPrescriptionIds.length}
+                  onGroupedUpdate={async (laboratoryId) => {
+                    await changeRegionalPrescriptionsLaboratory(
+                      selectedRegionalPrescriptionIds,
+                      laboratoryId
+                    );
+                    setSelectedRegionalPrescriptionIds([]);
+                  }}
+                  onSelectAll={() => {
+                    setSelectedRegionalPrescriptionIds(
+                      selectedRegionalPrescriptionIds.length ===
+                        prescriptions.length
+                        ? []
+                        : prescriptions.map((p) => p.id)
+                    );
+                  }}
                 />
               }
             </div>
@@ -382,11 +418,21 @@ const PrescriptionListView = () => {
                             regionalPrescription.region === region
                         )}
                         onChangeLaboratory={(laboratoryId) =>
-                          changeRegionalPrescriptionLaboratory(
-                            prescription.id,
+                          changeRegionalPrescriptionsLaboratory(
+                            [prescription.id],
                             laboratoryId
                           )
                         }
+                        isSelected={selectedRegionalPrescriptionIds.includes(
+                          prescription.id
+                        )}
+                        onToggleSelection={() => {
+                          setSelectedRegionalPrescriptionIds((prevState) =>
+                            prevState.includes(prescription.id)
+                              ? prevState.filter((id) => id !== prescription.id)
+                              : [...prevState, prescription.id]
+                          );
+                        }}
                       />
                     ))}
                   </div>