Pouvoir modifier une fiche événement produit

- Quelques modifications de JS et HTML pour initialiser des données
  (liens libre, picker produit et danger, etc.)
- Changement du nom de l'utilitaire de form pour utiliser le même sur la
  page de création et de modification
- Quelques changement dans le form pour ne pas changer le créateur à
  chaque modification

Author: Anto59290

conftest.py

@@ -133,6 +133,18 @@ def _choice_js_cant_pick(page, locator, exact_name):
     return _choice_js_cant_pick
 
 
+@pytest.fixture
+def choice_js_get_values(db, page):
+    def _choice_js_get_values(page, locator):
+        selected_options = page.locator(f'{locator} ~ div [aria-selected="true"]')
+        texts = []
+        for i in range(selected_options.count()):
+            texts.append(selected_options.nth(i).inner_text())
+        return texts
+
+    return _choice_js_get_values
+
+
 def _check_select_options_on_element(element, expected_options, with_default_value):
     options = element.locator("option").element_handles()
     visible_texts = []

ssa/forms.py

@@ -89,7 +89,9 @@ def __init__(self, *args, **kwargs):
     def save(self, commit=True):
         if self.data.get("action") == "publish":
             self.instance.etat = WithEtatMixin.Etat.EN_COURS
-        self.instance.createur = self.user.agent.structure
+
+        if not self.instance.pk:
+            self.instance.createur = self.user.agent.structure
         instance = super().save(commit)
         self.save_free_links(instance)
         return instance

ssa/models/evenement_produit.py

@@ -12,6 +12,7 @@
     WithMessageUrlsMixin,
     EmailNotificationMixin,
     AllowsSoftDeleteMixin,
+    WithFreeLinkIdsMixin,
 )
 from core.model_mixins import WithBlocCommunFieldsMixin
 from core.models import Structure, Document
@@ -138,6 +139,7 @@ class EvenementProduit(
     WithContactPermissionMixin,
     WithEtatMixin,
     WithNumeroMixin,
+    WithFreeLinkIdsMixin,
     models.Model,
 ):
     createur = models.ForeignKey(Structure, on_delete=models.PROTECT, verbose_name="Structure créatrice")
@@ -194,6 +196,9 @@ class EvenementProduit(
     def get_absolute_url(self):
         return reverse("ssa:evenement-produit-details", kwargs={"numero": self.numero})
 
+    def get_update_url(self):
+        return reverse("ssa:evenement-produit-update", kwargs={"pk": self.pk})
+
     def save(self, *args, **kwargs):
         with transaction.atomic():
             with reversion.create_revision():
@@ -282,6 +287,9 @@ def can_user_access(self, user):
             return True
         return not self.is_draft
 
+    def can_be_updated(self, user):
+        return self._user_can_interact(user)
+
     def can_user_delete(self, user):
         return self.can_user_access(user)
 

ssa/static/ssa/_rappel_conso_form.js

@@ -18,6 +18,12 @@ document.documentElement.addEventListener('dsfr.ready', () => {
         handleDisabledRappelConsoBtn()
     }
 
+    function initExistingRappelConso(){
+        if (!document.getElementById("id_numeros_rappel_conso").value) return;
+        rappelConso = document.getElementById("id_numeros_rappel_conso").value.split(",")
+        showRappelConso()
+    }
+
     function showRappelConso() {
         const rappelContainer = document.getElementById("rappel-container")
         let innerHtml = ""
@@ -85,4 +91,5 @@ document.documentElement.addEventListener('dsfr.ready', () => {
     submitDraftBtn.addEventListener("click", addNumeroRappelConsoToHiddenFieldAndSubmit)
     submitPublishBtn.addEventListener("click", addNumeroRappelConsoToHiddenFieldAndSubmit)
     toNextInput.forEach(element => element.addEventListener("keyup", () => goToNextIfNeeded(element)))
+    initExistingRappelConso()
 })

ssa/static/ssa/evenement_produit_form.js

@@ -2,7 +2,7 @@ import {setUpFreeLinks} from "/static/core/free_links.js";
 import {patchItems, findPath} from "/static/ssa/_custom_tree_select.js"
 
 document.addEventListener('DOMContentLoaded', () => {
-  function disableSourceOptions(typeEvenementInput, sourceInput) {
+  function disableSourceOptions(typeEvenementInput, sourceInput, reset=true) {
     const isHumanCase = typeEvenementInput.value === "investigation_cas_humain";
     sourceInput.querySelectorAll('option').forEach(option => {
       if (option.value !== "autre") {
@@ -13,14 +13,17 @@ document.addEventListener('DOMContentLoaded', () => {
         }
       }
     });
-    sourceInput.selectedIndex = 0;
+    if (reset===true){
+      sourceInput.selectedIndex = 0;
+    }
   }
 
   function setupCategorieProduit(){
     const options = JSON.parse(document.getElementById("categorie-produit-data").textContent)
+    const selectedValue = document.getElementById("id_categorie_produit").value
     const treeselect = new Treeselect({
       parentHtmlContainer: document.getElementById("categorie-produit"),
-      value: null,
+      value: selectedValue,
       options: options,
       isSingleSelect: true,
       showTags: false,
@@ -57,9 +60,10 @@ document.addEventListener('DOMContentLoaded', () => {
 
   function setupCategorieDanger(){
     const options = JSON.parse(document.getElementById("categorie-danger-data").textContent)
+    const selectedValue = document.getElementById("id_categorie_danger").value
     const treeselect = new Treeselect({
       parentHtmlContainer: document.getElementById("categorie-danger"),
-      value: null,
+      value: selectedValue,
       options: options,
       isSingleSelect: true,
       showTags: false,
@@ -109,7 +113,9 @@ document.addEventListener('DOMContentLoaded', () => {
       },
     })
     document.querySelector("#categorie-danger .treeselect-input").classList.add("fr-input")
-    document.querySelector("#categorie-danger .treeselect-input__clear").classList.add("fr-hidden")
+    if (!selectedValue){
+      document.querySelector("#categorie-danger .treeselect-input__clear").classList.add("fr-hidden")
+    }
     treeselect.srcElement.addEventListener("update-dom", ()=>{patchItems(treeselect.srcElement)})
     treeselect.srcElement.addEventListener('input', (e) => {
       if (!!e.detail){
@@ -126,8 +132,8 @@ document.addEventListener('DOMContentLoaded', () => {
   typeEvenementInput.addEventListener("change", () => {
     disableSourceOptions(typeEvenementInput, sourceInput)
   })
-  disableSourceOptions(typeEvenementInput, sourceInput)
-  setUpFreeLinks(document.getElementById("id_free_link"), null)
+  disableSourceOptions(typeEvenementInput, sourceInput, false)
+  setUpFreeLinks(document.getElementById("id_free_link"), document.getElementById('free-links-id'))
   new Choices(document.getElementById("id_quantification_unite"), {
     classNames: {
       containerInner: 'fr-select',

ssa/templates/ssa/evenement_produit_form.html

@@ -33,11 +33,19 @@
         <main class="main-container">
 
             <div class="evenement-produit-form-header">
-                <h1>Création d'un événement</h1>
+                <h1>{% if form.instance.pk %}Modification de l'événement {{ form.instance.numero }}{% else %}Création d'un événement{% endif %}</h1>
                 <div class="fr-mb-auto">
                     <a href="{% url 'ssa:evenement-produit-liste' %}" class="fr-link fr-mr-3w">Annuler</a>
-                    <button id="submit_draft" type="submit" name="action" value="draft" class="fr-btn fr-btn--secondary fr-mr-2w">Enregistrer le brouillon</button>
-                    <button id="submit_publish" type="submit" name="action" value="publish" class="fr-btn">Publier</button>
+                    {% if form.instance and form.instance.is_draft %}
+                        <button id="submit_draft" type="submit" name="action" value="draft" class="fr-btn fr-btn--secondary fr-mr-2w">Enregistrer le brouillon</button>
+                    {% endif %}
+                    <button id="submit_publish" type="submit" name="action" value="publish" class="fr-btn">
+                        {% if form.instance.pk %}
+                            Enregistrer
+                        {% else %}
+                            Publier
+                        {% endif %}
+                    </button>
                 </div>
             </div>
 
@@ -48,7 +56,7 @@ <h3>Informations</h3>
                         <div class="fr-col-12 fr-col-lg-4 flex-column ">
                             <div id="date-creation">
                                 <label class="fr-label" for="date-creation-input">Date de création</label>
-                                <input type="text" id="date-creation-input" class="fr-input fr-mt-0" value="{% now 'd/m/Y' %}" disabled>
+                                <input type="text" id="date-creation-input" class="fr-input fr-mt-0" value="{% if form.instance.date_creation %}{{ form.instance.date_creation|date:"d/m/Y" }}{% else %}{% now 'd/m/Y' %}{% endif %}" disabled>
                             </div>
                             {% if form.numero_rasff %}
                                 <div class="rasff">{% render_field form.numero_rasff %}</div>
@@ -171,6 +179,7 @@ <h3>Rappel conso</h3>
             {% include "ssa/_etablissement_block.html" %}
             <div id="liens-libre" class="white-container fr-mt-2w">
                 <h3>Liens libres</h3>
+                {{ form.instance.free_link_ids|json_script:"free-links-id" }}
                 <span class="fr-hint-text fr-mb-1w">Pour lier un événement saisissez son numéro ci-dessous.</span>
                 <div>
                     {{ form.free_link }}

ssa/tests/pages.py

@@ -9,6 +9,7 @@
 
 class WithTreeSelect:
     def _set_treeselect_option(self, container_id, label):
+        self.page.locator(f"#{container_id} .treeselect-input__clear").click()
         self.page.locator(f"#{container_id} .treeselect-input__edit").click()
         for part in label.split(">"):
             if part == label.split(">")[-1]:
@@ -18,8 +19,12 @@ def _set_treeselect_option(self, container_id, label):
             else:
                 self.page.get_by_title(part.strip(), exact=True).locator(".treeselect-list__item-icon").click()
 
+    def get_treeselect_options(self, container_id):
+        elements = self.page.locator(f"#{container_id} .treeselect-input__tags-count")
+        return [elements.nth(i).inner_text() for i in range(elements.count())]
 
-class EvenementProduitCreationPage(WithTreeSelect):
+
+class EvenementProduitFormPage(WithTreeSelect):
     info_fields = ["numero_rasff", "type_evenement", "source", "description", "numero_rasff"]
     produit_fields = [
         "denomination",
@@ -65,6 +70,17 @@ def navigate(self):
             }
         """)
 
+    def navigate_update_page(self, evenement):
+        self.page.goto(f"{self.base_url}{evenement.get_update_url()}")
+        self.page.evaluate("""
+            () => {
+              const element = document.getElementById('etablissement-template').content.querySelector('[data-token=""]');
+              if (element) {
+                element.setAttribute('data-token', 'FAKE');
+              }
+            }
+        """)
+
     def fill_required_fields(self, evenement_produit):
         self.type_evenement.select_option(evenement_produit.type_evenement)
         self.description.fill(evenement_produit.description)
@@ -113,6 +129,7 @@ def add_rappel_conso(self, numero):
 
     def delete_rappel_conso(self, numero):
         tag = self.page.locator(".fr-tag", has_text=numero)
+        tag.evaluate("el => el.scrollIntoView()")
         box = tag.bounding_box()
         self.page.mouse.click(box["x"] + box["width"] - 15, box["y"] - 5 + box["height"] / 2)
 
@@ -129,6 +146,10 @@ def add_etablissement_siren(self, value, full_value, choice_js_fill_from_element
         element = self.current_modal.locator("[id^='search-siret-input-']").locator("..")
         choice_js_fill_from_element(self.page, element, value, full_value)
 
+    @property
+    def date_creation(self):
+        return self.page.locator("#date-creation-input")
+
     @property
     def current_modal(self):
         return self.page.locator(".fr-modal__body").locator("visible=true")