Merge pull request #986 from betagouv/feat/htmx-example

[feat] Refacto "mark diagnostic as done" basé sur htmx
betagouv · Feb 18, 2025 · 40fdbf8 · 40fdbf8
2 parents 34e6c40 + 02bdb48
commit 40fdbf8
Show file tree

Hide file tree

Showing 11 changed files with 60 additions and 25 deletions.
diff --git a/pyproject.toml b/pyproject.toml
@@ -29,6 +29,7 @@ dependencies = [
     "django-gravatar2>=1.4.5",
     "django-guardian==2.4.0",
     "django-hijack==3.4.5",
+    "django-htmx>=1.22.0",
     "django-json-widget==2.0.1",
     "django-leaflet>=0.31.0",
     "django-magicauth",

diff --git a/recoco/apps/projects/templates/projects/project/overview.html b/recoco/apps/projects/templates/projects/project/overview.html
@@ -11,7 +11,7 @@
     {% vite_asset 'js/apps/projectDetails.js' %}
     {% vite_asset 'js/apps/projectShare.js' %}
     {% vite_asset 'js/apps/tutorial.js' %}
-    {% vite_asset 'js/components/MarkDiagAsDone.js' %}
+    {% vite_asset 'js/utils/htmx.js' %}
 {% endblock js %}
 {% block css %}
     <link href="{% sass_src 'projects/css/overview.scss' %}"
@@ -88,18 +88,26 @@ <h3>Complétez l'exploration du site !</h3>
                                                 </div>
                                                 <div class="col-12 col-lg-6 h-100 responsive-wrapper">
                                                     {% if is_staff %}
-                                                        <div x-data="MarkDiagAsDone({{ project.id }}, '{{ project.is_diagnostic_done }}' == 'True')">
+                                                        <div x-data="{displayDiagnosticButton: '{{ project.is_diagnostic_done }}' == 'False', }"
                                                             <header>
                                                                 <h6 class="font-small text-uppercase fr-mb-1v">Diagnostic</h6>
                                                             </header>
-                                                            <template x-if="displayDiagButton">
+                                                            <template x-if="displayDiagnosticButton">
                                                                 <button class="fr-btn fr-btn--sm fr-btn--secondary fr-mt-2w fr-py-2w fr-mb-2w text-uppercase w-100 justify-content-center"
-                                                                        @click='handleClickMarkDiagAsDone'
-                                                                        data-cy="button-diag-project-done">
+                                                                        data-cy="button-diag-project-done"
+                                                                        hx-patch={% url 'projects-detail' project.id %}
+                                                                        hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+                                                                        hx-vals='js:{is_diagnostic_done: true}'
+                                                                        hx-swap="none"
+                                                                        hx-ext="submitjson"
+                                                                        @htmx:after-request="
+                                                                            if (event.detail.xhr.status === 200) {
+                                                                                displayDiagnosticButton = false;
+                                                                            }">
                                                                     <span class="fr-icon-double-check-line" aria-hidden="true"></span> Marquer l’appel de “diagnostic” comme fait
                                                                 </button>
                                                             </template>
-                                                            <template x-if="!displayDiagButton">
+                                                            <template x-if="!displayDiagnosticButton">
                                                                 <p class="fw-700 fr-my-1w" data-cy="diag-project-done">
                                                                     <span class="fr-icon-double-check-line" aria-hidden="true"></span> Appel de "diagnostic" effectué
                                                                 </p>

diff --git a/recoco/frontend/package.json b/recoco/frontend/package.json
@@ -30,6 +30,7 @@
     "d3": "^7.8.4",
     "d3-cloud": "^1.2.5",
     "fuse.js": "^7.0.0",
+    "htmx.org": "^2.0.4",
     "intro.js": "^7.0.1",
     "js-cookie": "^3.0.1",
     "leaflet": "^1.9.1",

diff --git a/recoco/frontend/src/js/components/MarkDiagAsDone.js b/recoco/frontend/src/js/components/MarkDiagAsDone.js
diff --git a/recoco/frontend/src/js/utils/htmx.js b/recoco/frontend/src/js/utils/htmx.js
@@ -0,0 +1,4 @@
+import htmx from 'htmx.org';
+import { extend } from './htmx/ext';
+
+extend(htmx);
diff --git a/recoco/frontend/src/js/utils/htmx/ext.js b/recoco/frontend/src/js/utils/htmx/ext.js
@@ -0,0 +1,13 @@
+export const extend = (htmx) => {
+  htmx.defineExtension('submitjson', {
+    onEvent: function (name, evt) {
+      if (name === 'htmx:configRequest') {
+        evt.detail.headers['Content-Type'] = 'application/json';
+      }
+    },
+    encodeParameters: function (xhr, parameters, elt) {
+      xhr.overrideMimeType('text/json');
+      return JSON.stringify(parameters);
+    },
+  });
+};
diff --git a/recoco/frontend/vite.config.js b/recoco/frontend/vite.config.js
@@ -69,9 +69,9 @@ const config = {
         showRole: resolve('./src/js/store/showRole.js'),
         projects: resolve('./src/js/store/projects.js'),
         ClickToSeeUser: resolve('./src/js/components/ClickToSeeUser.js'),
-        MarkDiagAsDone: resolve('./src/js/components/MarkDiagAsDone.js'),
         ActionPusher: resolve('./src/js/components/ActionPusher.js'),
         actionPusher: resolve('./src/js/store/actionPusher.js'),
+        htmx: resolve('./src/js/utils/htmx.js'),
       },
       output: {
         chunkFileNames: undefined,

diff --git a/recoco/frontend/yarn.lock b/recoco/frontend/yarn.lock
@@ -3015,6 +3015,11 @@ html-tags@^3.3.1:
   resolved "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz"
   integrity sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==
 
+htmx.org@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/htmx.org/-/htmx.org-2.0.4.tgz#74fce66b177eb59c6d251ecf1052a2478743bec9"
+  integrity sha512-HLxMCdfXDOJirs3vBZl/ZLoY+c7PfM4Ahr2Ad4YXh6d22T5ltbTXFFkpx9Tgb2vvmWFMbIc3LqN2ToNkZJvyYQ==
+
 http-proxy-agent@^5.0.0:
   version "5.0.0"
   resolved "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz"

diff --git a/recoco/settings/common.py b/recoco/settings/common.py
@@ -106,6 +106,7 @@
     "django_celery_results",
     "django_json_widget",
     "waffle",
+    "django_htmx",
 ]
 
 SITE_ID = SiteID(default=1)
@@ -131,6 +132,7 @@
     "hijack.middleware.HijackUserMiddleware",
     "wagtail.contrib.redirects.middleware.RedirectMiddleware",
     "waffle.middleware.WaffleMiddleware",
+    "django_htmx.middleware.HtmxMiddleware",
 ]
 
 

diff --git a/requirements.txt b/requirements.txt
@@ -368,6 +368,9 @@ django-guardian==2.4.0 \
 django-hijack==3.4.5 \
     --hash=sha256:129cbe75444b163135871a947d38ffb72181f4f2583544703fc9efe083c9ddad \
     --hash=sha256:7e45b1de786bdc130628e4230b359dde6d8744ecd3bcd668d2b27c5d614a071c
+django-htmx==1.22.0 \
+    --hash=sha256:7306e1aba4e407496f30a57ec2e0b2974a9b96c8c6036f7ec6a8b5753ea0abdd \
+    --hash=sha256:9f1fcf239125a42d6dadc814b3796b8d6faad8ded444a14ae021d0241fa9a40f
 django-json-widget==2.0.1 \
     --hash=sha256:adb4cab17fe5a04139037d7d84725369530ef35b912c3790d3a7b13f99351358
 django-leaflet==0.31.0 \

diff --git a/uv.lock b/uv.lock