Merge branch 'master' into prod

.yarnrc.yml

@@ -0,0 +1,4 @@
+packageExtensions:
+  babel-preset-react-app@*:
+    dependencies:
+      "@babel/plugin-proposal-private-property-in-object": "*"

babel.config.js

@@ -1,4 +1,7 @@
 module.exports = {
   presets: ["babel-preset-react-app"],
-  plugins: ["react-hot-loader/babel"]
+  plugins: [
+    "react-hot-loader/babel",
+    ["@babel/plugin-proposal-private-property-in-object", { loose: "true" }]
+  ]
 };

common/utils/apiFragments.js

@@ -199,6 +199,9 @@ export const CONTROL_DATA_FRAGMENT = gql`
     controlBulletinCreationTime
     vehicleRegistrationNumber
     note
+    controlBulletin {
+      locationLieu
+    }
   }
 `;
 

common/utils/apiQueries.js

@@ -1947,6 +1947,7 @@ export const CONTROLLER_SAVE_CONTROL_BULLETIN = gql`
     $locationDepartment: String
     $locationCommune: String
     $locationLieu: String
+    $locationId: Int
     $vehicleRegistrationNumber: String
     $vehicleRegistrationCountry: String
     $missionAddressBegin: String
@@ -1969,6 +1970,7 @@ export const CONTROLLER_SAVE_CONTROL_BULLETIN = gql`
       locationDepartment: $locationDepartment
       locationCommune: $locationCommune
       locationLieu: $locationLieu
+      locationId: $locationId
       vehicleRegistrationNumber: $vehicleRegistrationNumber
       vehicleRegistrationCountry: $vehicleRegistrationCountry
       missionAddressBegin: $missionAddressBegin
@@ -2240,3 +2242,14 @@ export const COMPANY_CERTIFICATION_COMMUNICATION_QUERY = gql`
     }
   }
 `;
+
+export const CONTROL_LOCATION_QUERY = gql`
+  query controlLocation($department: String!) {
+    controlLocation(department: $department) {
+      id
+      department
+      commune
+      label
+    }
+  }
+`;

package.json

@@ -10,7 +10,7 @@
     ]
   },
   "dependencies": {
-    "@babel/core": "^7.7.4",
+    "@babel/core": "^7.22.6",
     "@babel/runtime": "^7.6.2",
     "@dataesr/react-dsfr": "^2.2.2",
     "@datapunt/matomo-tracker-react": "0.5.1",
@@ -33,7 +33,7 @@
     "babel-loader": "^8.0.6",
     "babel-plugin-named-asset-import": "^0.3.5",
     "babel-plugin-recharts": "^2.0.0",
-    "babel-preset-react-app": "^9.1.0",
+    "babel-preset-react-app": "^10.0.1",
     "broadcast-channel": "^3.2.0",
     "camelcase": "^5.3.1",
     "case-sensitive-paths-webpack-plugin": "^2.2.0",
@@ -153,6 +153,7 @@
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.3.4",
     "@babel/plugin-proposal-object-rest-spread": "^7.3.4",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/polyfill": "^7.2.5",
     "@babel/preset-env": "^7.3.4",

web/controller/components/controlBulletin/ControlBulletinFormStep1.js

@@ -1,43 +1,104 @@
-import React from "react";
+import React, { useMemo } from "react";
 
 import Stack from "@mui/material/Stack";
 import { Select, TextInput } from "@dataesr/react-dsfr";
 import { COUNTRIES } from "../../utils/country";
+import { DEPARTMENTS } from "../../utils/departments";
+import { useApi } from "common/utils/api";
+import { CONTROL_LOCATION_QUERY } from "common/utils/apiQueries";
+import { DsfrAutocomplete } from "../utils/DsfrAutocomplete";
 
 export function ControlBulletinFormStep1({
   handleEditControlBulletin,
   controlBulletin,
   showErrors
 }) {
+  const [departmentLocations, setDepartmentLocations] = React.useState([]);
+
+  const api = useApi();
+
+  React.useEffect(async () => {
+    if (controlBulletin.locationDepartment) {
+      const departmentCode = DEPARTMENTS.find(
+        d => d.label === controlBulletin.locationDepartment
+      )?.code;
+      if (departmentCode) {
+        const apiResponse = await api.graphQlQuery(
+          CONTROL_LOCATION_QUERY,
+          {
+            department: departmentCode
+          },
+          { context: { nonPublicApi: true } }
+        );
+        setDepartmentLocations(apiResponse.data.controlLocation);
+      }
+    }
+  }, [controlBulletin.locationDepartment]);
+
+  const controlLocationCommunes = useMemo(() => {
+    if (departmentLocations) {
+      const allCommunes = departmentLocations
+        .map(location => location.commune)
+        .sort((a, b) => a.localeCompare(b));
+      return [...new Set(allCommunes)];
+    } else {
+      return [];
+    }
+  }, [departmentLocations]);
+
+  const controlLocationLabels = useMemo(() => {
+    if (controlBulletin.locationCommune && departmentLocations) {
+      return departmentLocations
+        .filter(depLoc => depLoc.commune === controlBulletin.locationCommune)
+        .sort((a, b) => a.label.localeCompare(b.label));
+    } else {
+      return [];
+    }
+  }, [controlBulletin.locationCommune, departmentLocations]);
+
+  function editControlBulletinField(newValue, fieldName) {
+    handleEditControlBulletin({
+      target: {
+        name: fieldName,
+        value: newValue
+      }
+    });
+  }
+
   return (
     <Stack direction="column" p={2} sx={{ width: "100%" }}>
-      <TextInput
-        value={controlBulletin.locationDepartment || ""}
-        name="locationDepartment"
-        onChange={e => handleEditControlBulletin(e)}
-        label="Département du contrôle"
-        required
-        messageType={
-          !controlBulletin.locationDepartment && showErrors ? "error" : ""
-        }
+      <DsfrAutocomplete
+        field={controlBulletin.locationDepartment}
+        fieldLabel="Département du contrôle"
+        options={DEPARTMENTS}
+        showErrors={showErrors}
+        onChange={(_, newValue) => {
+          editControlBulletinField(newValue.label, "locationDepartment");
+          editControlBulletinField("", "locationCommune");
+          editControlBulletinField("", "locationLieu");
+        }}
       />
-      <TextInput
-        value={controlBulletin.locationCommune || ""}
-        name="locationCommune"
-        onChange={e => handleEditControlBulletin(e)}
-        label="Commune du contrôle"
-        required
-        messageType={
-          !controlBulletin.locationCommune && showErrors ? "error" : ""
-        }
+      <DsfrAutocomplete
+        field={controlBulletin.locationCommune}
+        fieldLabel="Commune du contrôle"
+        disabled={!controlBulletin.locationDepartment}
+        options={controlLocationCommunes}
+        showErrors={showErrors}
+        onChange={(_, newValue) => {
+          editControlBulletinField(newValue, "locationCommune");
+          editControlBulletinField("", "locationLieu");
+        }}
       />
-      <TextInput
-        value={controlBulletin.locationLieu || ""}
-        name="locationLieu"
-        onChange={e => handleEditControlBulletin(e)}
-        label="Lieu du contrôle"
-        required
-        messageType={!controlBulletin.locationLieu && showErrors ? "error" : ""}
+      <DsfrAutocomplete
+        field={controlBulletin.locationLieu}
+        fieldLabel="Lieu du contrôle"
+        disabled={!controlBulletin.locationCommune}
+        options={controlLocationLabels}
+        showErrors={showErrors}
+        onChange={(_, newValue) => {
+          editControlBulletinField(newValue.label, "locationLieu");
+          editControlBulletinField(newValue.id, "locationId");
+        }}
       />
       <TextInput
         value={controlBulletin.userLastName || ""}

web/controller/components/controlBulletin/ControllerControlBulletin.js

@@ -180,6 +180,7 @@ export function ControllerControlBulletin({
             locationDepartment: newControlBulletin.locationDepartment,
             locationCommune: newControlBulletin.locationCommune,
             locationLieu: newControlBulletin.locationLieu,
+            locationId: newControlBulletin.locationId,
             vehicleRegistrationNumber:
               newControlBulletin.vehicleRegistrationNumber,
             vehicleRegistrationCountry:

web/controller/components/list/ControlsList.js

@@ -74,7 +74,7 @@ export function ControlsList({
             vehicle: control.vehicleRegistrationNumber,
             company: control.companyName,
             time: control.creationTime,
-            controlLocation: "Bientôt disponible",
+            controlLocation: control?.controlBulletin?.locationLieu,
             formattedTime:
               (period !== "day"
                 ? `${formatDay(control.creationTime)} - `

web/controller/components/utils/DsfrAutocomplete.js

@@ -0,0 +1,47 @@
+import Typography from "@mui/material/Typography";
+import { Autocomplete } from "@mui/material";
+import TextField from "@mui/material/TextField";
+import React from "react";
+import Box from "@mui/material/Box";
+import { createFilterOptions } from "@mui/material/Autocomplete";
+
+export function DsfrAutocomplete({
+  field,
+  fieldLabel,
+  disabled,
+  onChange,
+  showErrors,
+  options
+}) {
+  const filterOptions = createFilterOptions({
+    matchFrom: "start"
+  });
+  return (
+    <Box mb={"1.5rem"}>
+      <Typography
+        mb={0.5}
+        className={!field && showErrors ? "fr-label--error" : "fr-label"}
+      >
+        {fieldLabel} {<sup style={{ color: "red" }}>*</sup>}
+      </Typography>
+      <Autocomplete
+        disableClearable
+        disabled={disabled}
+        noOptionsText={"Aucune autre option disponible"}
+        size="small"
+        value={field || ""}
+        options={options}
+        onChange={onChange}
+        filterOptions={filterOptions}
+        renderInput={params => (
+          <TextField
+            {...params}
+            variant="filled"
+            hiddenLabel
+            error={!field && showErrors}
+          />
+        )}
+      />
+    </Box>
+  );
+}

web/controller/utils/departments.js

@@ -0,0 +1,103 @@
+export const DEPARTMENTS = [
+  { code: "1", label: "AIN" },
+  { code: "2", label: "AISNE" },
+  { code: "3", label: "ALLIER" },
+  { code: "4", label: "ALPES-DE-HAUTE-PROVENCE" },
+  { code: "6", label: "ALPES-MARITIMES" },
+  { code: "7", label: "ARDÈCHE" },
+  { code: "8", label: "ARDENNES" },
+  { code: "9", label: "ARIÈGE" },
+  { code: "10", label: "AUBE" },
+  { code: "11", label: "AUDE" },
+  { code: "12", label: "AVEYRON" },
+  { code: "67", label: "BAS-RHIN" },
+  { code: "13", label: "BOUCHES-DU-RHÔNE" },
+  { code: "14", label: "CALVADOS" },
+  { code: "15", label: "CANTAL" },
+  { code: "16", label: "CHARENTE" },
+  { code: "17", label: "CHARENTE-MARITIME" },
+  { code: "18", label: "CHER" },
+  { code: "19", label: "CORRÈZE" },
+  { code: "2A", label: "CORSE-DU-SUD" },
+  { code: "21", label: "CÔTE-D'OR" },
+  { code: "22", label: "CÔTES-D'ARMOR" },
+  { code: "23", label: "CREUSE" },
+  { code: "79", label: "DEUX-SÈVRES" },
+  { code: "24", label: "DORDOGNE" },
+  { code: "25", label: "DOUBS" },
+  { code: "26", label: "DRÔME" },
+  { code: "91", label: "ESSONNE" },
+  { code: "27", label: "EURE" },
+  { code: "28", label: "EURE-ET-LOIR" },
+  { code: "29", label: "FINISTÈRE" },
+  { code: "30", label: "GARD" },
+  { code: "32", label: "GERS" },
+  { code: "33", label: "GIRONDE" },
+  { code: "971", label: "GUADELOUPE" },
+  { code: "973", label: "GUYANE" },
+  { code: "68", label: "HAUT-RHIN" },
+  { code: "2B", label: "HAUTE-CORSE" },
+  { code: "31", label: "HAUTE-GARONNE" },
+  { code: "43", label: "HAUTE-LOIRE" },
+  { code: "52", label: "HAUTE-MARNE" },
+  { code: "70", label: "HAUTE-SAÔNE" },
+  { code: "74", label: "HAUTE-SAVOIE" },
+  { code: "87", label: "HAUTE-VIENNE" },
+  { code: "5", label: "HAUTES-ALPES" },
+  { code: "65", label: "HAUTES-PYRÉNÉES" },
+  { code: "92", label: "HAUTS-DE-SEINE" },
+  { code: "34", label: "HÉRAULT" },
+  { code: "35", label: "ILLE-ET-VILAINE" },
+  { code: "36", label: "INDRE" },
+  { code: "37", label: "INDRE-ET-LOIRE" },
+  { code: "38", label: "ISÈRE" },
+  { code: "39", label: "JURA" },
+  { code: "974", label: "LA RÉUNION" },
+  { code: "40", label: "LANDES" },
+  { code: "41", label: "LOIR-ET-CHER" },
+  { code: "42", label: "LOIRE" },
+  { code: "44", label: "LOIRE-ATLANTIQUE" },
+  { code: "45", label: "LOIRET" },
+  { code: "46", label: "LOT" },
+  { code: "47", label: "LOT-ET-GARONNE" },
+  { code: "48", label: "LOZÈRE" },
+  { code: "49", label: "MAINE-ET-LOIRE" },
+  { code: "50", label: "MANCHE" },
+  { code: "51", label: "MARNE" },
+  { code: "972", label: "MARTINIQUE" },
+  { code: "53", label: "MAYENNE" },
+  { code: "976", label: "MAYOTTE" },
+  { code: "54", label: "MEURTHE-ET-MOSELLE" },
+  { code: "55", label: "MEUSE" },
+  { code: "56", label: "MORBIHAN" },
+  { code: "57", label: "MOSELLE" },
+  { code: "58", label: "NIÈVRE" },
+  { code: "59", label: "NORD" },
+  { code: "60", label: "OISE" },
+  { code: "61", label: "ORNE" },
+  { code: "75", label: "PARIS" },
+  { code: "62", label: "PAS-DE-CALAIS" },
+  { code: "63", label: "PUY-DE-DÔME" },
+  { code: "64", label: "PYRÉNÉES-ATLANTIQUES" },
+  { code: "66", label: "PYRÉNÉES-ORIENTALES" },
+  { code: "69", label: "RHÔNE" },
+  { code: "71", label: "SAÔNE-ET-LOIRE" },
+  { code: "72", label: "SARTHE" },
+  { code: "73", label: "SAVOIE" },
+  { code: "77", label: "SEINE-ET-MARNE" },
+  { code: "76", label: "SEINE-MARITIME" },
+  { code: "93", label: "SEINE-SAINT-DENIS" },
+  { code: "80", label: "SOMME" },
+  { code: "81", label: "TARN" },
+  { code: "82", label: "TARN-ET-GARONNE" },
+  { code: "90", label: "TERRITOIRE DE BELFORT" },
+  { code: "95", label: "VAL-D'OISE" },
+  { code: "94", label: "VAL-DE-MARNE" },
+  { code: "83", label: "VAR" },
+  { code: "84", label: "VAUCLUSE" },
+  { code: "85", label: "VENDÉE" },
+  { code: "86", label: "VIENNE" },
+  { code: "88", label: "VOSGES" },
+  { code: "89", label: "YONNE" },
+  { code: "78", label: "YVELINES" }
+];