Modal edition working impl

Pipfile

@@ -45,6 +45,7 @@ whitenoise = "~=6.2"
 grist-api = "0.1.0"
 ua-parser = "==0.18.0"
 sortedcontainers = "~=2.4.0"
+dj-importmap = "==0.0.2"
 
 [dev-packages]
 pipenv = "*"

aidants_connect/importmaps.py

@@ -0,0 +1,8 @@
+from django.conf import settings
+
+from importmap import static
+
+importmaps = {
+    "AidantsConnectApplication": static("js/ac-app.mjs"),
+    "Stimulus": settings.STIMULUS_JS_URL.replace("umd.js", "js"),
+}

aidants_connect/management/commands/scss.py

@@ -1,14 +1,40 @@
 import os
+import subprocess
 from pathlib import Path
 from shutil import which
 
 from django.apps import apps
 from django.core.management.base import BaseCommand, CommandError
+from django.utils.functional import cached_property
 
 
 class Command(BaseCommand):
     help = "Generate CSS files from SCSS sources"
 
+    @cached_property
+    def sass_command(self):
+        # Try command included in node_modules first. The file may not necessarily be
+        # executable so we need to test it with `subprocess.run`. `shutils.which`
+        # won't detect it.
+        import aidants_connect
+
+        node_modules_exe = (
+            Path(aidants_connect.__path__[0]).parent / "node_modules" / ".bin" / "sass"
+        )
+
+        if not node_modules_exe.exists():
+            return self.__default_sass_command()
+
+        node_modules_exe = f"{node_modules_exe}"
+        result = subprocess.run(
+            [node_modules_exe, "--version"], capture_output=True, text=True
+        )
+        if result.returncode != 0:
+            return self.__default_sass_command()
+
+        self.stdout.write(f"Using {node_modules_exe}")
+        return node_modules_exe
+
     def add_arguments(self, parser):
         parser.add_argument(
             "--watch",
@@ -24,12 +50,11 @@ def handle(self, *args, **options):
         self.compile_stylesheets(action)
 
     def check_sass_version(self):
-        if which("sass") is None:
-            raise CommandError(
-                "You need to install sass before using this command.\n"
-                "Check https://sass-lang.com/install"
-            )
-        sass_version = os.popen("sass --version").read().strip()
+        result = subprocess.run(
+            [self.sass_command, "--version"], capture_output=True, text=True
+        )
+        result.check_returncode()
+        sass_version = result.stdout.strip()
         self.stdout.write(f"You are using Sass version {sass_version}.")
         if "Ruby" in sass_version:
             self.stdout.write("Warning! This is an old version of Sass.")
@@ -47,7 +72,7 @@ def compile_stylesheets(self, action):
             ]
         )
         command = (
-            f"sass {action} --style compressed {folders} "
+            f"{self.sass_command} {action} --style compressed {folders} "
             "--load-path aidants_connect_common/static/scss/"
         )
         self.stdout.write(f"Running {command}")
@@ -56,3 +81,14 @@ def compile_stylesheets(self, action):
 
     def write_horizontal_line(self):
         self.stdout.write("-" * 15)
+
+    def __default_sass_command(self):
+        found = which("sass")
+        if found is None:
+            raise CommandError(
+                "You need to install sass before using this command.\n"
+                "Use either NPM or check https://sass-lang.com/install"
+            )
+
+        self.stdout.write(f"Using {found}")
+        return found

aidants_connect/settings.py

@@ -137,6 +137,7 @@ def getenv_bool(key: str, default_value: Optional[bool] = None) -> bool:
     "django_otp.plugins.otp_totp",
     "django_celery_beat",
     "django_extensions",
+    "importmap",
     "pgtrigger",
     "import_export",
     "phonenumber_field",
@@ -191,6 +192,7 @@ def getenv_bool(key: str, default_value: Optional[bool] = None) -> bool:
         "OPTIONS": {
             "context_processors": [
                 "dsfr.context_processors.site_config",
+                "importmap.context_processors.importmap",
                 "aidants_connect_common.context_processors.settings_variables",
                 "django.template.context_processors.debug",
                 "django.template.context_processors.request",
@@ -265,6 +267,7 @@ def getenv_bool(key: str, default_value: Optional[bool] = None) -> bool:
 AUTH_USER_MODEL = "aidants_connect_web.Aidant"
 
 JS_REVERSE_EXCLUDE_NAMESPACES = ["admin", "djdt", "otpadmin"]
+JS_MINIFY = False
 
 DEMARCHES = {
     "papiers": {
@@ -413,21 +416,19 @@ def getenv_bool(key: str, default_value: Optional[bool] = None) -> bool:
 REFERRER_POLICY = "strict-origin"
 
 # Scripts and other resources
-STIMULUS_JS_URL = "https://unpkg.com/stimulus@3.2.1/dist/stimulus.umd.js"
+STIMULUS_JS_URL = "https://unpkg.com/stimulus@3.2.2/dist/stimulus.umd.js"
 MD_EDITOR_JS_URL = "https://unpkg.com/easymde/dist/easymde.min.js"
 MD_EDITOR_CSS_URL = "https://unpkg.com/easymde/dist/easymde.min.css"
 SARBACANE_SCRIPT_URL = "https://forms.sbc29.com/form.js"
-SARBACANE_CONNECT_URL = (
-    "https://api.sarbacane.com/v1/forms/contacts/upsert"  # noqa: E501
-)
+SARBACANE_CONNECT_URL = "https://api.sarbacane.com/v1/forms/contacts/upsert"
 COOKIE_BANNER_JS_URL = "https://unpkg.com/tarteaucitronjs@1.15.0/tarteaucitron.js"
 COOKIE_BANNER_LANG_URL = (
     "https://unpkg.com/tarteaucitronjs@1.15.0/lang/tarteaucitron.fr.js"
 )
 COOKIE_BANNER_SERVICES_URL = (
     "https://unpkg.com/tarteaucitronjs@1.15.0/tarteaucitron.services.js"
 )
-AUTOCOMPLETE_SCRIPT_SRC = "https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.7/dist/autoComplete.min.js"  # noqa: E501
+AUTOCOMPLETE_SCRIPT_SRC = "https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.7/dist/autoComplete.min.js"  # noqa
 MATOMO_INSTANCE_URL = os.getenv("MATOMO_INSTANCE_URL", "https://stats.beta.gouv.fr")
 MATOMO_INSTANCE_SITE_ID = os.getenv("MATOMO_INSTANCE_SITE_ID")
 
@@ -458,6 +459,7 @@ def getenv_bool(key: str, default_value: Optional[bool] = None) -> bool:
 CSP_SCRIPT_SRC = (
     "'self'",
     STIMULUS_JS_URL,
+    STIMULUS_JS_URL.replace("umd.js", "js"),
     MD_EDITOR_JS_URL,
     SARBACANE_SCRIPT_URL,
     COOKIE_BANNER_JS_URL,

aidants_connect_common/forms.py

@@ -23,7 +23,7 @@
     RadioSelect,
     TypedChoiceField,
 )
-from django.forms.utils import ErrorList, pretty_name
+from django.forms.utils import ErrorList, RenderableFormMixin, pretty_name
 from django.utils.datastructures import MultiValueDict
 from django.utils.html import format_html
 from django.utils.translation import ngettext
@@ -232,7 +232,7 @@ def __new__(mcs, name, bases, attrs):
         return new_class
 
 
-class BaseMultiForm(metaclass=DeclarativeFormMetaclass):
+class BaseMultiForm(RenderableFormMixin, metaclass=DeclarativeFormMetaclass):
     def __init__(
         self,
         data=None,

aidants_connect_common/static/css/generic-habilitation-request-profile-card.css

@@ -30,3 +30,12 @@ details.request-card-details .details-content {
   width: 100%;
   z-index: 11;
 }
+
+
+/*#profile-edit-modal {*/
+/*  position: fixed;*/
+/*  top: 0;*/
+/*  left: 0;*/
+/*  width: 100vw;*/
+/*  height: 100vh;*/
+/*}*/

aidants_connect_common/static/js/ac-app.mjs

@@ -0,0 +1,29 @@
+import {Application, Controller} from "Stimulus"
+
+class BaseController extends Controller {
+    noop() { /* Does nothing */ }
+    showElement(elt) {
+        elt.removeAttribute("hidden");
+        elt.removeAttribute("aria-hidden");
+    }
+
+    hideElement(elt) {
+        elt.setAttribute("hidden", "hidden");
+        elt.setAttribute("aria-hidden", "true");
+    }
+
+    mutateVisibility(visibility, elt) {
+        if (visibility) this.showElement(elt);
+        else this.hideElement(elt);
+    }
+
+    mutateRequirement(required, elt) {
+        if (required) elt.setAttribute("required", "required");
+        else elt.removeAttribute("required");
+    }
+}
+
+const AidantsConnectApplication = new Application();
+const aidantsConnectApplicationReady = AidantsConnectApplication.start().then(() => AidantsConnectApplication)
+
+export {AidantsConnectApplication, aidantsConnectApplicationReady, BaseController}

aidants_connect_common/static/js/base-controller.js

@@ -1,22 +1,4 @@
-export class BaseController extends Stimulus.Controller {
-    noop() { /* Does nothing */ }
-    showElement(elt) {
-        elt.removeAttribute("hidden");
-        elt.removeAttribute("aria-hidden");
-    }
+// TODO this is kept for compatibility for pre-importmap JS. To refactor
+import {BaseController} from "AidantsConnectApplication"
 
-    hideElement(elt) {
-        elt.setAttribute("hidden", "hidden");
-        elt.setAttribute("aria-hidden", "true");
-    }
-
-    mutateVisibility(visibility, elt) {
-        if (visibility) this.showElement(elt);
-        else this.hideElement(elt);
-    }
-
-    mutateRequirement(required, elt) {
-        if (required) elt.setAttribute("required", "required");
-        else elt.removeAttribute("required");
-    }
-}
+export default BaseController