feat(PackagingList) : disable inputs when fields are sealed

MTES-MCT · Feb 10, 2025 · 29ec5b9 · 29ec5b9
1 parent 125f35a
commit 29ec5b9
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 7 deletions.
diff --git a/back/src/forms/pdf/helpers.ts b/back/src/forms/pdf/helpers.ts
@@ -70,9 +70,10 @@ export function getPackagingsRows(packagingInfos: PackagingInfo[]) {
         ")"
       ].join("");
     } else if (volumes.length === 1) {
-      // Un seul type de volume ou de conditionnement de type Autre
-      // On ajoute ces valeurs après le type de conditionnement
-      // Exemple  GRV 30l ou Benne 20m3 ou Autre Caisse plastique
+      // Un seul type de volume :
+      // On ajoute la valeur après le type de conditionnement
+      // en faisant un cas particulier pour le type Benne qui s'exprime en m3
+      // Exemple  GRV 30l ou Benne 20m3
       const volume = packagings[0].volume;
       conditionnement = [
         conditionnement,

diff --git a/front/src/Apps/Forms/Components/TagsInput/TagsInput.tsx b/front/src/Apps/Forms/Components/TagsInput/TagsInput.tsx
@@ -76,9 +76,10 @@ const TagsInput = ({
           <div key={idx}>
             <Tag
               className="fr-mb-1v"
-              dismissible
+              dismissible={!disabled}
               nativeButtonProps={{
                 type: "button",
+                disabled,
                 onClick: () => {
                   onDeleteTag(idx);
                 }

diff --git a/front/src/form/bsdd/WasteInfo.tsx b/front/src/form/bsdd/WasteInfo.tsx
@@ -185,6 +185,7 @@ export default function WasteInfo({ disabled }) {
       <div className="form__row" style={{ flexDirection: "row" }}>
         <Switch
           label="Le déchet est conditionné pour pipeline"
+          disabled={disabled}
           checked={isPipeline}
           onChange={checked => {
             const updatedPackagings = checked
@@ -198,7 +199,10 @@ export default function WasteInfo({ disabled }) {
       {values.emitter?.type !== "APPENDIX1" && !isPipeline && (
         <>
           <h4 className="form__section-heading">Conditionnement</h4>
-          <PackagingList fieldName="wasteDetails.packagingInfos" />
+          <PackagingList
+            fieldName="wasteDetails.packagingInfos"
+            disabled={disabled}
+          />
         </>
       )}
 

diff --git a/front/src/form/bsdd/components/packagings/PackagingForm.tsx b/front/src/form/bsdd/components/packagings/PackagingForm.tsx
@@ -12,12 +12,14 @@ type PackagingFormProps = {
   packaging: PackagingInfoInput;
   setPackaging: (packaging: PackagingInfoInput) => void;
   packagingTypeOptions: { value: Packagings; label: string }[];
+  disabled?: boolean;
 };
 
 function PackagingForm({
   packaging,
   setPackaging,
-  packagingTypeOptions
+  packagingTypeOptions,
+  disabled = false
 }: PackagingFormProps) {
   const maxQuantity =
     packaging.type === Packagings.Citerne || packaging.type === Packagings.Benne
@@ -45,6 +47,7 @@ function PackagingForm({
         <div className="fr-col-md-6 fr-col-12">
           <Select
             label="Type"
+            disabled={disabled}
             nativeSelectProps={{
               value: packaging.type,
               onChange: event => {
@@ -77,6 +80,7 @@ function PackagingForm({
           <NonScrollableInput
             label={`Volume en ${volumeUnit} (optionnel)`}
             className="fr-mb-2w"
+            disabled={disabled}
             nativeInputProps={{
               type: "number",
               inputMode: "decimal",
@@ -113,6 +117,7 @@ function PackagingForm({
             className="fr-mb-2w"
             state={quantityError ? "error" : "default"}
             stateRelatedMessage={quantityError}
+            disabled={disabled}
             nativeInputProps={{
               type: "number",
               inputMode: "numeric",
@@ -136,6 +141,7 @@ function PackagingForm({
           <div className="fr-col-12">
             <Input
               label="Nom du type de contenant"
+              disabled={disabled}
               nativeInputProps={{
                 value: packaging.other ?? "",
                 onChange: event =>
@@ -150,6 +156,7 @@ function PackagingForm({
           <TagsInput
             label="N° de contenant (optionnel)"
             tags={packaging.identificationNumbers ?? []}
+            disabled={disabled}
             onAddTag={tag =>
               setPackaging({
                 ...packaging,

diff --git a/front/src/form/bsdd/components/packagings/PackagingList.tsx b/front/src/form/bsdd/components/packagings/PackagingList.tsx
@@ -5,6 +5,7 @@ import PackagingForm from "./PackagingForm";
 
 type PackagingListProps = {
   fieldName: string;
+  disabled?: boolean;
 };
 
 const packagingTypeOptions = [
@@ -15,7 +16,7 @@ const packagingTypeOptions = [
   { value: Packagings.Autre, label: "Autre" }
 ];
 
-function PackagingList({ fieldName }: PackagingListProps) {
+function PackagingList({ fieldName, disabled = false }: PackagingListProps) {
   const [field] = useField<PackagingInfoInput[]>(fieldName);
 
   const packagings = field.value;
@@ -47,11 +48,13 @@ function PackagingList({ fieldName }: PackagingListProps) {
                   packaging={p}
                   setPackaging={p => replace(idx, p)}
                   packagingTypeOptions={options}
+                  disabled={disabled}
                 />
                 {packagings.length > 1 && (
                   <>
                     <button
                       type="button"
+                      disabled={disabled}
                       className="fr-btn fr-btn--tertiary fr-mb-2w"
                       onClick={() => remove(idx)}
                     >
@@ -66,6 +69,7 @@ function PackagingList({ fieldName }: PackagingListProps) {
             <div className="fr-grid-row fr-grid-row--right fr-mb-4w">
               <button
                 type="button"
+                disabled={disabled}
                 className="fr-btn fr-btn--secondary"
                 onClick={() => {
                   push({ type: "", quantity: "" });