style(control): minor changes on new control form

- change margin - change list order for country and control type
MTES-MCT · Dec 2, 2024 · 36ccfb1 · 36ccfb1
1 parent 1207a3a
commit 36ccfb1
Show file tree

Hide file tree

Showing 4 changed files with 120 additions and 117 deletions.
diff --git a/web/controller/components/noQRCode/ControllerControlNew.js b/web/controller/components/noQRCode/ControllerControlNew.js
@@ -41,9 +41,6 @@ export function ControllerControlNew({
         <Typography variant="h4" component="h1" sx={{ marginY: 2 }}>
           Nouveau contrôle “{type.label}”
         </Typography>
-        <p>
-          Veuillez renseigner ces informations afin de créer le contrôle&nbsp;:
-        </p>
         <ControllerControlPreliminaryForm
           type={type}
           onSubmit={onControlCreated}

diff --git a/web/controller/components/noQRCode/ControllerControlPreliminaryForm.js b/web/controller/components/noQRCode/ControllerControlPreliminaryForm.js
@@ -3,6 +3,7 @@ import { useLoadingScreen } from "common/utils/loading";
 import { CONTROLLER_SAVE_CONTROL_BULLETIN } from "common/utils/apiQueries";
 import { useApi } from "common/utils/api";
 import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
 import { ButtonsGroup } from "@codegouvfr/react-dsfr/ButtonsGroup";
 import { useSnackbarAlerts } from "../../../common/Snackbar";
 import { formatApiError } from "common/utils/errors";
@@ -89,131 +90,136 @@ export function ControllerControlPreliminaryForm({ type, onSubmit, onClose }) {
     });
 
   return (
-    <Stack direction="column" p={2} sx={{ width: "100%" }}>
+    <Stack direction="column" sx={{ width: "100%" }}>
+      <Typography mb={1}>
+        Veuillez renseigner ces informations afin de créer le contrôle&nbsp;:
+      </Typography>
       <MandatoryField />
-      <Input
-        nativeInputProps={{
-          value: userLastName,
-          onChange: e => setUserLastName(e.target.value),
-          name: "userLastName"
-        }}
-        label="Nom du salarié"
-        required
-      />
+      <form style={{ marginTop: "16px" }}>
+        <Input
+          nativeInputProps={{
+            value: userLastName,
+            onChange: e => setUserLastName(e.target.value),
+            name: "userLastName"
+          }}
+          label="Nom du salarié"
+          required
+        />
 
-      <Input
-        nativeInputProps={{
-          value: userFirstName,
-          onChange: e => setUserFirstName(e.target.value),
-          name: "userFirstName"
-        }}
-        label="Prénom du salarié"
-        required
-      />
+        <Input
+          nativeInputProps={{
+            value: userFirstName,
+            onChange: e => setUserFirstName(e.target.value),
+            name: "userFirstName"
+          }}
+          label="Prénom du salarié"
+          required
+        />
 
-      <BirthDate
-        label="Date de naissance du salarié"
-        userBirthDate={userBirthDate}
-        setUserBirthDate={setUserBirthDate}
-      />
+        <BirthDate
+          label="Date de naissance du salarié"
+          userBirthDate={userBirthDate}
+          setUserBirthDate={setUserBirthDate}
+        />
 
-      <Select
-        label="Nationalité du salarié"
-        nativeSelectProps={{
-          onChange: e => setUserNationality(e.target.value),
-          value: userNationality,
-          name: "userNationality"
-        }}
-        required
-      >
-        {COUNTRIES.map(option => (
-          <option key={option.value} value={option.value}>
-            {option.label}
-          </option>
-        ))}
-      </Select>
+        <Select
+          label="Nationalité du salarié"
+          nativeSelectProps={{
+            onChange: e => setUserNationality(e.target.value),
+            value: userNationality,
+            name: "userNationality"
+          }}
+          required
+        >
+          {COUNTRIES.map(option => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </Select>
 
-      <CompanyControlData
-        siren={siren}
-        setSiren={setSiren}
-        companyName={companyName}
-        setCompanyName={setCompanyName}
-        companyAddress={companyAddress}
-        setCompanyAddress={setCompanyAddress}
-        showErrors={canSubmitForm}
-      />
+        <CompanyControlData
+          siren={siren}
+          setSiren={setSiren}
+          companyName={companyName}
+          setCompanyName={setCompanyName}
+          companyAddress={companyAddress}
+          setCompanyAddress={setCompanyAddress}
+          showErrors={canSubmitForm}
+        />
 
-      <Select
-        label="Type d'activité"
-        nativeSelectProps={{
-          onChange: e => setBusinessType(e.target.value),
-          value: businessType
-        }}
-        required
-      >
-        {!businessType && (
-          <option value="" disabled>
-            Non renseigné
-          </option>
-        )}
-        {BUSINESS_TYPES.map(businessType => (
-          <option key={businessType.value} value={businessType.value}>
-            {businessType.label}
-          </option>
-        ))}
-      </Select>
+        <Select
+          label="Type d'activité"
+          nativeSelectProps={{
+            onChange: e => setBusinessType(e.target.value),
+            value: businessType
+          }}
+          required
+        >
+          {!businessType && (
+            <option value="" disabled>
+              Non renseigné
+            </option>
+          )}
+          {BUSINESS_TYPES.map(businessType => (
+            <option key={businessType.value} value={businessType.value}>
+              {businessType.label}
+            </option>
+          ))}
+        </Select>
 
-      <Input
-        nativeInputProps={{
-          value: vehicleRegistrationNumber,
-          onChange: e => setVehicleRegistrationNumber(e.target.value),
-          name: "vehicleRegistrationNumber"
-        }}
-        label="Immatriculation du véhicule"
-        required
-      />
+        <Input
+          nativeInputProps={{
+            value: vehicleRegistrationNumber,
+            onChange: e => setVehicleRegistrationNumber(e.target.value),
+            name: "vehicleRegistrationNumber"
+          }}
+          label="Immatriculation du véhicule"
+          required
+        />
 
-      {type === CONTROL_TYPES.LIC_PAPIER && (
-        <RadioButtons
-          legend="Page du jour remplie"
-          name="isDayPageFilled"
-          orientation="horizontal"
-          options={[
-            {
-              label: "Oui",
-              nativeInputProps: {
-                checked: isDayPageFilled === true,
-                onChange: () => setIsDayPageFilled(true)
+        {type === CONTROL_TYPES.LIC_PAPIER && (
+          <RadioButtons
+            legend="Page du jour remplie"
+            name="isDayPageFilled"
+            orientation="horizontal"
+            options={[
+              {
+                label: "Oui",
+                nativeInputProps: {
+                  checked: isDayPageFilled === true,
+                  onChange: () => setIsDayPageFilled(true)
+                }
+              },
+              {
+                label: "Non",
+                nativeInputProps: {
+                  checked: isDayPageFilled === false,
+                  onChange: () => setIsDayPageFilled(false)
+                }
               }
+            ]}
+            required
+          />
+        )}
+
+        <ButtonsGroup
+          buttons={[
+            {
+              onClick: () => submitPreliminaryForm(),
+              children: "Créer le contrôle",
+              disabled: !canSubmitForm
             },
             {
-              label: "Non",
-              nativeInputProps: {
-                checked: isDayPageFilled === false,
-                onChange: () => setIsDayPageFilled(false)
-              }
+              children: "Annuler",
+              onClick: () => onClose(),
+              priority: "secondary"
             }
           ]}
-          required
+          inlineLayoutWhen="sm and up"
+          alignment="right"
         />
-      )}
-
-      <ButtonsGroup
-        buttons={[
-          {
-            onClick: () => submitPreliminaryForm(),
-            children: "Créer le contrôle",
-            disabled: !canSubmitForm
-          },
-          {
-            children: "Annuler",
-            onClick: () => onClose(),
-            priority: "secondary"
-          }
-        ]}
-        inlineLayoutWhen="sm and up"
-        alignment="right"
-      />
+      </form>
     </Stack>
   );
 }
diff --git a/web/controller/utils/country.js b/web/controller/utils/country.js
@@ -1,5 +1,6 @@
 export const COUNTRIES = [
   { value: "", label: "" },
+  { value: "FRA", label: "France" },
   { value: "AFG", label: "Afghanistan" },
   { value: "ZAF", label: "Afrique du Sud" },
   { value: "ALB", label: "Albanie" },
@@ -66,7 +67,6 @@ export const COUNTRIES = [
   { value: "ETH", label: "Ethiopie" },
   { value: "FJI", label: "Fidji" },
   { value: "FIN", label: "Finlande" },
-  { value: "FRA", label: "France" },
   { value: "GAB", label: "Gabon" },
   { value: "GMB", label: "Gambie" },
   { value: "GHA", label: "Ghana" },

diff --git a/web/controller/utils/useReadControlData.js b/web/controller/utils/useReadControlData.js
@@ -12,8 +12,8 @@ import { canDownloadBDC as _canDownloadBDC } from "./controlBulletin";
 // Value AND label must match ControlType enum from API
 export const CONTROL_TYPES = {
   MOBILIC: { value: "mobilic", label: "Mobilic" },
-  NO_LIC: { value: "sans_lic", label: "Pas de LIC" },
-  LIC_PAPIER: { value: "lic_papier", label: "LIC papier" }
+  LIC_PAPIER: { value: "lic_papier", label: "LIC papier" },
+  NO_LIC: { value: "sans_lic", label: "Pas de LIC" }
 };
 
 export const useReadControlData = (controlId, controlType) => {