Merge pull request #517 from MTES-MCT/feature/project-view

Haie / Vue figée post dépôt de dossier côté pétitionnaire

envergo/hedges/static/hedge_input/app.js

@@ -266,25 +266,23 @@ createApp({
       // Cacher la bulle d'aide à la fin du tracé
       newHedge.polyline.on('editable:drawing:end', () => {
         showHelpBubble.value = false;
-        showHedgeModal(newHedge);
+        showHedgeModal(newHedge, mode === "plantation" ? TO_PLANT : TO_REMOVE);
       });
 
       return newHedge;
     };
 
     // Show the "description de la haie" form modal
-    const showHedgeModal = (hedge, isReadonly) => {
+    const showHedgeModal = (hedge, hedgeType) => {
 
       const fillBooleanField = (fieldElement, fieldName, data) => {
          if(fieldElement && data.hasOwnProperty(fieldName)) {
           fieldElement.checked = data[fieldName];
         }
       }
 
-      // There is two edge data dialogs as edges to plant and to remove have differrent properties
-      // By default we take the dialog of the current mode.
-      // If the form is readonly, then we display the other mode dialog.
-      const dialogMode = isReadonly ? (mode === "removal" ? "plantation" : "removal") : mode;
+      const isReadonly = (hedgeType !== TO_PLANT || mode !== "plantation") && (hedgeType !== TO_REMOVE || mode !== "removal");
+      const dialogMode = hedgeType === TO_PLANT ? "plantation" : "removal";
 
       const dialogId= `${dialogMode}-hedge-data-dialog`
       const dialog = document.getElementById(dialogId);
@@ -395,16 +393,6 @@ createApp({
       dsfr(dialog).modal.disclose();
     };
 
-    // Open the form modal to edit an existing hedge
-    const editHedge = (hedge) => {
-      showHedgeModal(hedge, false);
-    };
-
-    // Open the form modal to display an existing hedge
-    const displayHedge = (hedge) => {
-      showHedgeModal(hedge, true);
-    };
-
     const startDrawingToPlant = () => {
       return addHedge(TO_PLANT);
     };
@@ -466,7 +454,7 @@ createApp({
     // We confirm with a modal if some hedges have been drawn
     const cancel = () => {
       const totalHedges = hedges[TO_PLANT].count + hedges[TO_REMOVE].count;
-      if (totalHedges > 0) {
+      if (totalHedges > 0 && mode !== "read_only") {
         const dialog = document.getElementById("cancel-modal");
         const confirmCancel = document.getElementById("btn-quit-without-saving");
         const dismissCancel = document.getElementById("btn-back-to-map");
@@ -609,8 +597,7 @@ createApp({
       showHelpBubble,
       saveData,
       cancel,
-      editHedge,
-      displayHedge,
+      showHedgeModal,
       invalidHedges,
     };
   }

envergo/hedges/views.py

@@ -39,11 +39,19 @@ def get_context_data(self, **kwargs):
         context["hedge_to_plant_data_form"] = HedgeToPlantDataForm(prefix="plantation")
         context["hedge_to_remove_data_form"] = HedgeToRemoveDataForm(prefix="removal")
 
-        context["matomo_custom_url"] = self.request.build_absolute_uri(
-            reverse("moulinette_saisie_d")
-            if mode == "removal"
-            else reverse("moulinette_saisie_p")
-        )
+        if mode == "removal":
+            context["matomo_custom_url"] = self.request.build_absolute_uri(
+                reverse("moulinette_saisie_d")
+            )
+        elif mode == "plantation":
+            context["matomo_custom_url"] = self.request.build_absolute_uri(
+                reverse("moulinette_saisie_p")
+            )
+        elif mode == "read_only":
+            context["matomo_custom_url"] = self.request.build_absolute_uri(
+                reverse("petition_project_hedges")
+            )
+
         return context
 
     def post(self, request, *args, **kwargs):

envergo/petitions/urls_haie.py

@@ -1,4 +1,5 @@
 from django.urls import path
+from django.views.generic import RedirectView
 
 from envergo.petitions.views import (
     PetitionProjectAutoRedirection,
@@ -10,10 +11,16 @@
 urlpatterns = [
     path("", PetitionProjectCreate.as_view(), name="petition_project_create"),
     path(
-        "<slug:reference>/",
+        "<slug:reference>/consultation/",
         PetitionProjectDetail.as_view(),
         name="petition_project",
     ),
+    # This is another "fake" url, only for matomo tracking
+    path(
+        "+ref_proj+/consultation/haies/",
+        RedirectView.as_view(pattern_name="home"),
+        name="petition_project_hedges",
+    ),
     # a path that redirects to the petition project detail page without logging the event
     path(
         "<slug:reference>/auto-redirection/",

envergo/petitions/views.py

@@ -25,7 +25,7 @@
 from envergo.petitions.services import compute_instructor_informations
 from envergo.utils.mattermost import notify
 from envergo.utils.tools import display_form_details, generate_key
-from envergo.utils.urls import extract_param_from_url
+from envergo.utils.urls import extract_param_from_url, update_qs
 
 logger = logging.getLogger(__name__)
 
@@ -402,7 +402,7 @@ def get_context_data(self, **kwargs):
 
 
 class PetitionProjectDetail(PetitionProjectMixin, FormView):
-    template_name = "haie/moulinette/result_plantation.html"
+    template_name = "haie/moulinette/petition_project.html"
 
     def get(self, request, *args, **kwargs):
         result = super().get(request, *args, **kwargs)
@@ -427,6 +427,22 @@ def get_context_data(self, **kwargs):
         context["plantation_evaluation"] = PlantationEvaluator(
             self.moulinette, self.moulinette.catalog["haies"]
         )
+        context["demarches_simplifiees_dossier_number"] = (
+            self.petition_project.demarches_simplifiees_dossier_number
+        )
+        context["created_at"] = self.petition_project.created_at
+
+        parsed_moulinette_url = urlparse(self.petition_project.moulinette_url)
+        moulinette_params = parse_qs(parsed_moulinette_url.query)
+        moulinette_params["edit"] = ["true"]
+        result_url = reverse("moulinette_result")
+        edit_url = update_qs(result_url, moulinette_params)
+
+        context["edit_url"] = edit_url
+        context["ds_url"] = (
+            f"https://www.demarches-simplifiees.fr/dossiers/"
+            f"{self.petition_project.demarches_simplifiees_dossier_number}"
+        )
         return context
 
 

envergo/static/js/libs/hedges_input_plantation.js → envergo/static/js/libs/hedges_input.js

@@ -2,13 +2,11 @@ window.addEventListener("load", function () {
   let buttons = document.querySelectorAll(".hedge-input-open-btn");
   let modal = document.getElementById("hedge-input-modal");
 
-  const urlParams = new URLSearchParams(window.location.search);
-  const hedgeId = urlParams.get('haies');
-
   let hedgeIframe;
 
   const openModal = function () {
     let saveUrl = HEDGES_PLANTATION_URL;
+    const hedgeId = HEDGE_DATA_ID;
     if (hedgeId) {
       saveUrl += hedgeId + "/";
     }

envergo/static/sass/project_haie.scss

@@ -358,3 +358,12 @@ div#form-group-haies {
 div#demarches-simplifiees-modal-btns {
   display: flex;
 }
+
+div#go-to-ds-btn {
+  display: flex;
+  justify-content: flex-end;
+}
+
+button#project-summary-hedge-input-open-btn {
+  background-color: var(--grey-1000-50);
+}

envergo/templates/haie/moulinette/petition_project.html

@@ -0,0 +1,49 @@
+{% extends 'haie/moulinette/result_plantation.html' %}
+
+{% load static %}
+
+{% block result_title %}
+  <div id="go-to-ds-btn">
+    <a class="fr-btn"
+       href="{{ ds_url }}"
+       target="_blank"
+       rel="noopener external">Voir le dossier sur Démarches simplifiées</a>
+  </div>
+  <h1 class="fr-mt-4w fr-mb-1w">Dossier n° {{ demarches_simplifiees_dossier_number }}</h1>
+  <p class="fr-text--sm fr-hint-text">
+    <span class="fr-icon-calendar-line" aria-hidden="true"></span> Déposé le {{ created_at }}
+  </p>
+{% endblock %}
+
+{% block result_header %}
+  <h3 class="fr-mt-4w">Vous souhaitez modifier votre simulation ?</h3>
+  <p>
+    Cette simulation n’est plus modifiable car elle a été pris en compte dans votre dossier.
+    <br />
+    <strong>Vous pouvez dupliquer cette version</strong>, la modifier comme vous le souhaitez puis recréer un dossier pour déposer votre demande.
+  </p>
+  <a class="fr-btn fr-btn--secondary" href="{{ edit_url }}">Dupliquer cette simulation</a>
+
+  <h3 class="fr-mt-4w">Besoin d’échanger sur votre projet ?</h3>
+
+  <a class="fr-btn fr-btn--secondary fr-btn--icon-left fr-icon-mail-line"
+     href="{% url 'contact_us' %}">Contacter le guichet unique</a>
+
+  <h3 class="fr-mt-4w">Résultats de la simulation réglementaire</h3>
+  {{ block.super }}
+{% endblock %}
+
+{% block project_summary %}
+  {{ block.super }}
+  <button id="project-summary-hedge-input-open-btn"
+          class="hedge-input-open-btn fr-btn fr-btn--secondary fr-btn--icon-right fr-icon-arrow-right-line"
+          type="button"
+          data-fr-opened="false"
+          aria-controls="hedge-input-modal">Ouvrir la carte pour voir le détail</button>
+{% endblock %}
+
+{% block extra_js %}
+  <script>var HEDGES_PLANTATION_URL = "{% url 'input_hedges'  mode='read_only' %}";</script>
+  <script>var HEDGE_DATA_ID = "{{ moulinette.catalog.haies.id }}";</script>
+  <script defer src="{% static 'js/libs/hedges_input.js' %}"></script>
+{% endblock %}

envergo/templates/haie/moulinette/result.html

@@ -17,7 +17,8 @@
 
 {% block extra_js %}
   <script>var HEDGES_PLANTATION_URL = "{% url 'input_hedges'  mode='plantation' %}";</script>
+  <script>var HEDGE_DATA_ID = "{{ moulinette.catalog.haies.id }}";</script>
   <script>var RESULT_P_URL = "{% url 'moulinette_result_plantation' %}";</script>
   <script defer src="{% static 'js/libs/haie_result_actions_banner.js' %}"></script>
-  <script defer src="{% static 'js/libs/hedges_input_plantation.js' %}"></script>
+  <script defer src="{% static 'js/libs/hedges_input.js' %}"></script>
 {% endblock %}

envergo/templates/haie/moulinette/result_base.html

@@ -31,7 +31,7 @@
       cette page grâce à votre statut d'admin.
     </div>
   {% endif %}
-  <h1 class="fr-mb-5w">Simulation réglementaire</h1>
+  {% block result_title %}<h1 class="fr-mb-5w">Simulation réglementaire</h1>{% endblock %}
 
   {% block result_header %}{% endblock %}
   {% group_regulations_for_display moulinette as grouped_regulations %}

envergo/templates/hedges/input.html

@@ -86,18 +86,16 @@ <h3>
                       [[ hedge.id ]]
                       <span v-if="!hedge.isValid()" class="fr-badge fr-badge--error fr-badge--sm">À compléter</span>
                     </th>
-                    <td v-if="mode === 'removal'">
+                    <td>
                       <button class="fr-btn fr-btn--tertiary-no-outline"
-                              @click.stop="editHedge(hedge)">Modifier</button>
+                              @click.stop="showHedgeModal(hedge, hedge.type)">
+                        [[ mode === 'removal' ? 'Modifier' : 'Voir la description' ]]
+                      </button>
                     </td>
                     <td v-if="mode === 'removal'">
                       <button class="fr-btn fr-btn--tertiary-no-outline"
                               @click.stop="hedge.remove()">Supprimer</button>
                     </td>
-                    <td v-if="mode === 'plantation'">
-                      <button class="fr-btn fr-btn--tertiary-no-outline"
-                              @click.stop="displayHedge(hedge)">Voir la description</button>
-                    </td>
                     <td>[[ hedge.length.toFixed(0) ]] m</td>
                   </tr>
                 </tbody>
@@ -129,19 +127,16 @@ <h3>
                       <span v-if="!hedge.isValid()" class="fr-badge fr-badge--error fr-badge--sm">À compléter</span>
                     </th>
                     <td>
-                      <button v-if="mode === 'plantation'"
-                              class="fr-btn fr-btn--tertiary-no-outline"
-                              @click.stop="editHedge(hedge)">Modifier</button>
+                      <button class="fr-btn fr-btn--tertiary-no-outline"
+                              @click.stop="showHedgeModal(hedge, hedge.type)">
+                        [[ mode === 'plantation' ? 'Modifier' : 'Voir la description' ]]
+                      </button>
                     </td>
                     <td>
                       <button v-if="mode === 'plantation'"
                               class="fr-btn fr-btn--tertiary-no-outline"
                               @click.stop="hedge.remove()">Supprimer</button>
                     </td>
-                    <td v-if="mode === 'removal'">
-                      <button class="fr-btn fr-btn--tertiary-no-outline"
-                              @click.stop="displayHedge(hedge)">Voir la description</button>
-                    </td>
                     <td>[[ hedge.length.toFixed(0) ]] m</td>
                   </tr>
                 </tbody>
@@ -205,7 +200,8 @@ <h1 class="fr-modal__title">Complétez la description des haies pour pouvoir pou
     <footer>
       <button class="fr-btn fr-btn--secondary fr-btn--icon-left fr-icon-arrow-left-s-line "
               @click="cancel">Retour</button>
-      <button class="fr-btn fr-btn--primary fr-btn--icon-right fr-icon-arrow-right-s-line"
+      <button v-if="mode !== 'read_only'"
+              class="fr-btn fr-btn--primary fr-btn--icon-right fr-icon-arrow-right-s-line"
               @click="saveData">Enregistrer et poursuivre</button>
     </footer>
   </div>