Ajout d'un bouton dupliquer ligne sur saisie des espèces (#98)

betagouv · Oct 15, 2024 · 849ca96 · 849ca96
1 parent 67daafd
commit 849ca96
Show file tree

Hide file tree

Showing 8 changed files with 159 additions and 24 deletions.
diff --git a/...ts/SaisieEspèces/FauneNonOiseauRow.svelte → ...èces/FauneNonOiseauAtteinteEditRow.svelte b/...ts/SaisieEspèces/FauneNonOiseauRow.svelte → ...èces/FauneNonOiseauAtteinteEditRow.svelte
@@ -3,8 +3,9 @@
 
     import { makeEspèceToKeywords, makeEspèceToLabel, fourchettesIndividus } from "../../espèceFieldset.js";
     import AutocompleteEspeces from "../AutocompleteEspèces.svelte"
+    import CopyFileIcon from "../icons/CopyFileIcon.svelte"
     
-    /** @import {EspèceProtégée, ActivitéMenançante, MéthodeMenançante, TransportMenançant} from "../../../types/especes.js" */
+    /** @import {FauneNonOiseauAtteinte, EspèceProtégée, ActivitéMenançante, MéthodeMenançante, TransportMenançant} from "../../../types/especes.js" */
 
     /** @type {EspèceProtégée | undefined} */
     export let espèce = undefined
@@ -19,6 +20,9 @@
     /** @type {number | undefined} */
     export let surfaceHabitatDétruit = undefined 
 
+    /** @param {FauneNonOiseauAtteinte} fauneNonOiseauAtteinte */
+    export let onDupliquerLigne
+
     /** @param {EspèceProtégée} _espèce */
     export let onSupprimerLigne
 
@@ -43,6 +47,16 @@
     /** @param {EspèceProtégée} esp */
     const autocompleteLabelFunction = esp => espècesToLabel.get(esp)
 
+    const dupliquerLigne = () => onDupliquerLigne(
+        {   
+            espèce,  
+            activité,
+            méthode,
+            transport,
+            nombreIndividus,
+            surfaceHabitatDétruit
+        },
+    )
 </script>
 
 <tr>
@@ -99,9 +113,17 @@
         <input type="number" bind:value={surfaceHabitatDétruit} min="0" step="1" class="fr-input">
     </td>
 
+    {#if onDupliquerLigne}
+    <td class="icon-cell">
+        <button type="button" on:click={dupliquerLigne}>
+            <CopyFileIcon />
+        </button>
+    </td>
+    {/if}
+
     {#if onSupprimerLigne}
     <td>
-        <button type="button" on:click={() => onSupprimerLigne(espèce)}>❌</button>
+        <button type="button" on:click={onSupprimerLigne}>❌</button>
     </td>
     {/if}
 </tr>
@@ -135,5 +157,15 @@
         select{
             max-width: 10rem;
         }
+        
+        .icon-cell {
+            text-align: center;
+            vertical-align: middle;
+
+            button {
+                height: 1.5rem;
+                width: 1.5rem;
+            }
+        }
     }
-</style>
+</style>
diff --git a/scripts/front-end/components/SaisieEspèces/FieldsetFlore.svelte b/scripts/front-end/components/SaisieEspèces/FieldsetFlore.svelte
@@ -3,7 +3,7 @@
 
     import { makeEspèceToKeywords, makeEspèceToLabel} from "../../espèceFieldset.js";
     import AutocompleteEspeces from "../AutocompleteEspèces.svelte"
-    import FloreRow from "./FloreRow.svelte"
+    import FloreAtteinteEditRow from "./FloreAtteinteEditRow.svelte"
     
     /** @import {FloreAtteinte, EspèceProtégée, ActivitéMenançante} from "../../../types/especes.d.ts" */
 
@@ -47,6 +47,15 @@
 
         rerender()
     }
+    
+    /**
+     * @param {FloreAtteinte} floreAtteinte
+    */
+    function onDupliquerLigne(floreAtteinte) {
+        floresAtteintes.push(floreAtteinte)
+
+        rerender()
+    }
 </script>
 
 <div class="fr-grid-row fr-mb-4w fr-grid-row--center">
@@ -61,16 +70,18 @@
                             <th>Type d’impact</th>
                             <th>Nombre d'individus</th>
                             <th>Surface habitat détruit (m²)</th>
+                            <th>Dupliquer la ligne</th>
                             <th>Supprimer la ligne</th>
                         </tr>
                     </thead>
 
                     <tbody>
                         {#each floresAtteintes as {espèce, activité, nombreIndividus, surfaceHabitatDétruit}}
-                            <FloreRow
+                            <FloreAtteinteEditRow
                                 bind:espèce bind:activité bind:nombreIndividus bind:surfaceHabitatDétruit
                                 {espècesProtégéesFlore} {activitésMenaçantes}
                                 {onSupprimerLigne}
+                                {onDupliquerLigne}
                             />
                         {/each}
 
@@ -94,6 +105,7 @@
                                 <input disabled type="number" class="fr-input">
                             </td>
                             <td></td>
+                            <td></td>
                         </tr>
                     </tbody>
                 </table>
@@ -160,4 +172,4 @@
             }
         }
     }
-</style>
+</style>
diff --git a/scripts/front-end/components/SaisieEspèces/FieldsetNonOiseau.svelte b/scripts/front-end/components/SaisieEspèces/FieldsetNonOiseau.svelte
@@ -3,7 +3,7 @@
 
     import { makeEspèceToKeywords, makeEspèceToLabel} from "../../espèceFieldset.js";
     import AutocompleteEspeces from "../AutocompleteEspèces.svelte"
-    import FauneNonOiseauRow from "./FauneNonOiseauRow.svelte"
+    import FauneNonOiseauAtteinteEditRow from "./FauneNonOiseauAtteinteEditRow.svelte"
     
     /** @import {FauneNonOiseauAtteinte, EspèceProtégée, ActivitéMenançante, MéthodeMenançante, TransportMenançant} from "../../../types/especes.d.ts" */
 
@@ -53,6 +53,15 @@
 
         rerender()
     }
+
+    /**
+     * @param {FauneNonOiseauAtteinte} fauneNonOiseauAtteinte
+    */
+    function onDupliquerLigne(fauneNonOiseauAtteinte) {
+        faunesNonOiseauxAtteintes.push(fauneNonOiseauAtteinte)
+
+        rerender()
+    }
 </script>
 
 <div class="fr-grid-row fr-mb-4w fr-grid-row--center">
@@ -69,16 +78,18 @@
                             <th>Moyen de poursuite</th>
                             <th>Nombre d'individus</th>
                             <th>Surface habitat détruit (m²)</th>
+                            <th>Dupliquer la ligne</th>
                             <th>Supprimer la ligne</th>
                         </tr>
                     </thead>
 
                     <tbody>
                         {#each faunesNonOiseauxAtteintes as {espèce, activité, méthode, transport, nombreIndividus, surfaceHabitatDétruit}}
-                        <FauneNonOiseauRow
+                        <FauneNonOiseauAtteinteEditRow
                             bind:espèce bind:activité bind:méthode bind:transport bind:nombreIndividus bind:surfaceHabitatDétruit
                             {espècesProtégéesFauneNonOiseau} {activitésMenaçantes} {méthodesMenaçantes} {transportMenaçants}
                             {onSupprimerLigne}
+                            {onDupliquerLigne}
                         />
                         {/each}
 
@@ -106,6 +117,7 @@
                             </td>
                             <td><input disabled type="number" class="fr-input"></td>
                             <td></td>
+                            <td></td>
                         </tr>
                     </tbody>
                 </table>
@@ -162,4 +174,4 @@
             }
         }
     }
-</style>
+</style>
diff --git a/scripts/front-end/components/SaisieEspèces/FieldsetOiseau.svelte b/scripts/front-end/components/SaisieEspèces/FieldsetOiseau.svelte
@@ -3,7 +3,7 @@
 
     import { makeEspèceToKeywords, makeEspèceToLabel } from "../../espèceFieldset.js";
     import AutocompleteEspeces from "../AutocompleteEspèces.svelte"
-    import OiseauRow from "./OiseauRow.svelte"
+    import OiseauAtteintEditRow from "./OiseauAtteintEditRow.svelte"
     
     /** @import {OiseauAtteint, EspèceProtégée, ActivitéMenançante, MéthodeMenançante, TransportMenançant} from "../../../types/especes.d.ts" */
 
@@ -53,6 +53,15 @@
 
         rerender()
     }
+
+    /**
+     * @param {OiseauAtteint} oiseauAtteint
+    */
+    function onDupliquerLigne(oiseauAtteint) {
+        oiseauxAtteints.push(oiseauAtteint)
+
+        rerender()
+    }
 </script>
 
 <div class="fr-grid-row fr-mb-4w fr-grid-row--center">
@@ -71,16 +80,18 @@
                             <th>Nids</th>
                             <th>Œufs</th>
                             <th>Surface habitat détruit (m²)</th>
+                            <th>Dupliquer la ligne</th>
                             <th>Supprimer la ligne</th>
                         </tr>
                     </thead>
                     <tbody>
 
                         {#each oiseauxAtteints as {espèce, activité, méthode, transport, nombreIndividus, nombreNids, nombreOeufs, surfaceHabitatDétruit}}
-                            <OiseauRow
+                            <OiseauAtteintEditRow
                                 bind:espèce bind:activité bind:méthode bind:transport bind:nombreIndividus bind:nombreNids bind:nombreOeufs bind:surfaceHabitatDétruit
                                 {espècesProtégéesOiseau} {activitésMenaçantes} {méthodesMenaçantes} {transportMenaçants}
                                 {onSupprimerLigne}
+                                {onDupliquerLigne}
                             />
                         {/each}
 
@@ -111,6 +122,7 @@
                             <td><input disabled type="number" class="fr-input"></td>
                             <td><input disabled type="number" class="fr-input"></td>
                             <td></td>
+                            <td></td>
                         </tr>                        
                     </tbody>
                 </table>
@@ -159,4 +171,4 @@
             overflow: initial;
         }
     }
-</style>
+</style>
diff --git a/.../components/SaisieEspèces/FloreRow.svelte → ...SaisieEspèces/FloreAtteinteEditRow.svelte b/.../components/SaisieEspèces/FloreRow.svelte → ...SaisieEspèces/FloreAtteinteEditRow.svelte
@@ -3,8 +3,9 @@
 
     import { makeEspèceToKeywords, makeEspèceToLabel, fourchettesIndividus } from "../../espèceFieldset.js";
     import AutocompleteEspeces from "../AutocompleteEspèces.svelte"
+    import CopyFileIcon from "../icons/CopyFileIcon.svelte"
     
-    /** @import {EspèceProtégée, ActivitéMenançante} from "../../../types/especes.js" */
+    /** @import {FloreAtteinte, EspèceProtégée, ActivitéMenançante} from "../../../types/especes.js" */
 
     /** @type {EspèceProtégée | undefined} */
     export let espèce = undefined
@@ -15,6 +16,9 @@
     /** @type {number | undefined} */
     export let surfaceHabitatDétruit = undefined 
 
+    /** @param {FloreAtteinte} floreAtteinte */
+    export let onDupliquerLigne
+
     /** @param {EspèceProtégée} _espèce */
     export let onSupprimerLigne
 
@@ -33,6 +37,14 @@
     /** @param {EspèceProtégée} esp */
     const autocompleteLabelFunction = esp => espècesToLabel.get(esp)
 
+    const dupliquerLigne = () => onDupliquerLigne(
+        { 
+            espèce,
+            activité,
+            nombreIndividus,
+            surfaceHabitatDétruit
+        },
+    )
 </script>
 
 <tr>
@@ -71,9 +83,17 @@
         <input type="number" bind:value={surfaceHabitatDétruit} min="0" step="1" class="fr-input">
     </td>
 
+    {#if onDupliquerLigne}
+    <td class="icon-cell">
+        <button type="button" on:click={dupliquerLigne}>
+            <CopyFileIcon />
+        </button>
+    </td>
+    {/if}
+
     {#if onSupprimerLigne}
     <td>
-        <button type="button" on:click={() => onSupprimerLigne(espèce) }>❌</button>
+        <button type="button" on:click={onSupprimerLigne}>❌</button>
     </td>
     {/if}
 </tr>
@@ -105,5 +125,15 @@
         select{
             max-width: 10rem;
         }
+        
+        .icon-cell {
+            text-align: center;
+            vertical-align: middle;
+
+            button {
+                height: 1.5rem;
+                width: 1.5rem;
+            }
+        }
     }
-</style>
+</style>