Redesign de la fiche détaillée (#968)

.parcelrc

@@ -0,0 +1,6 @@
+{
+    "extends": "@parcel/config-default",
+    "transformers": {
+        "node_modules/@gouvfr/dsfr/**/*.{js,css}": ["./parcel-transformers/remove-ie-hack",  "...", "./parcel-transformers/dsfr"],
+    }
+}

.postcssrc

@@ -1,5 +1,6 @@
 {
     "plugins": {
-        "tailwindcss": true
+        "tailwindcss": true,
+        "postcss-nesting": true
     }
 }

.secrets.baseline

@@ -151,7 +151,7 @@
         "filename": "core/settings.py",
         "hashed_secret": "1ee34e26aeaf89c64ecc2c85efe6a961b75a50e9",
         "is_verified": false,
-        "line_number": 203
+        "line_number": 209
       }
     ],
     "docker-compose.yml": [
@@ -178,7 +178,7 @@
         "filename": "jinja2/layout/base.html",
         "hashed_secret": "057dece35d736a3ae1e710a9cba3f080bd101cde",
         "is_verified": false,
-        "line_number": 71
+        "line_number": 78
       }
     ],
     "static/to_compile/src/analytics.ts": [
@@ -187,14 +187,14 @@
         "filename": "static/to_compile/src/analytics.ts",
         "hashed_secret": "d18c4e3c4c78b9cb093367ad31172846fe044e15",
         "is_verified": false,
-        "line_number": 9
+        "line_number": 10
       },
       {
         "type": "Base64 High Entropy String",
         "filename": "static/to_compile/src/analytics.ts",
         "hashed_secret": "53206fbbe4b5f629cab678b33aca7ca33f144e2f",
         "is_verified": false,
-        "line_number": 14
+        "line_number": 15
       }
     ],
     "unit_tests/qfdmo/test_views.py": [
@@ -207,5 +207,5 @@
       }
     ]
   },
-  "generated_at": "2024-10-23T11:40:03Z"
+  "generated_at": "2024-11-13T09:55:29Z"
 }

Makefile

@@ -71,6 +71,10 @@ migrate:
 makemigrations:
 	$(DJANGO_ADMIN) makemigrations
 
+.PHONY: merge-migrations
+merge-migrations:
+	$(DJANGO_ADMIN) makemigrations --merge
+
 
 .PHONY: createcachetable
 createcachetable:
@@ -84,6 +88,10 @@ createsuperuser:
 seed-database:
 	$(DJANGO_ADMIN) loaddata categories actions acteur_services acteur_types
 
+.PHONY: restore-prod
+restore-prod:
+	./scripts/restore_prod_locally.sh
+
 .PHONY: clear-cache
 clear-cache:
 	$(DJANGO_ADMIN) clear_cache --all
@@ -116,3 +124,10 @@ js-test:
 test:
 	@make unit-test
 	@make e2e-test
+
+# DSFR
+.PHONY: extract-dsfr
+extract-dsfr:
+	$(PYTHON) ./dsfr_hacks/extract_dsfr_colors.py
+	$(PYTHON) ./dsfr_hacks/extract_used_colors.py
+	$(PYTHON) ./dsfr_hacks/extract_used_icons.py

Procfile.dev

@@ -1,3 +1,3 @@
 services: docker compose --profile lvao up
-web: .venv/bin/python manage.py runserver
+web: .venv/bin/python manage.py runserver 0.0.0.0:8000
 npm: npm run watch

core/context_processors.py

@@ -5,4 +5,5 @@ def environment(request):
     return {
         "ENVIRONMENT": settings.ENVIRONMENT,
         "DEBUG": settings.DEBUG,
+        "is_embedded": True,
     }

core/jinja2_handler.py

@@ -12,19 +12,8 @@
 from qfdmo.models.action import get_actions_by_direction
 
 
-def is_embedded(request: HttpRequest) -> bool:
-    return "iframe" in request.GET or "carte" in request.GET
-
-
-def is_carte(request: HttpRequest) -> bool:
-    return "carte" in request.GET
-
-
-def is_iframe(request: HttpRequest) -> bool:
-    return "iframe" in request.GET
-
-
 def action_by_direction(request: HttpRequest, direction: str):
+    # TODO: refactor to not use a dict anymore
     requested_direction = get_direction(request)
     action_displayed = request.GET.get("action_displayed", "")
     actions_to_display = get_actions_by_direction()[direction]
@@ -45,14 +34,6 @@ def action_by_direction(request: HttpRequest, direction: str):
     return [{**a, "active": True} for a in actions_to_display]
 
 
-# TODO : should be deprecated and replaced by a value in context view
-def display_infos_panel(adresse: DisplayedActeur) -> bool:
-    return (
-        bool(adresse.horaires_description or adresse.display_postal_address())
-        and not adresse.is_digital
-    )
-
-
 # TODO : should be deprecated and replaced by a value in context view
 def display_exclusivite_reparation(acteur: DisplayedActeur) -> bool:
     return acteur.exclusivite_de_reprisereparation
@@ -62,37 +43,35 @@ def hide_object_filter(request) -> bool:
     return bool(request.GET.get("sc_id"))
 
 
-def distance_to_acteur(request, adresse):
-    long = request.GET.get("longitude")
-    lat = request.GET.get("latitude")
-    point = adresse.location
+def distance_to_acteur(request, acteur):
+    longitude = request.GET.get("longitude")
+    latitude = request.GET.get("latitude")
+    location = acteur.location
+
+    if not (longitude and latitude and location and not acteur.is_digital):
+        return ""
 
-    if long and lat and point and not adresse.is_digital:
-        dist = sqrt((point.y - float(lat)) ** 2 + (point.x - float(long)) ** 2) * 111320
-        return (
-            f"({str(round(dist/1000,1)).replace('.',',')} km)"
-            if dist >= 1000
-            else f"({round(dist/10)*10} m)"
-        )
-    return ""
+    distance_meters = (
+        sqrt((location.y - float(latitude)) ** 2 + (location.x - float(longitude)) ** 2)
+        * 111320
+    )
+    if distance_meters >= 1000:
+        return f"({round(distance_meters / 1000, 1)} km)".replace(".", ",")
+    else:
+        return f"({round(distance_meters/10) * 10 } m)"
 
 
 def environment(**options):
     env = Environment(**options)
     env.globals.update(
         {
             "action_by_direction": action_by_direction,
-            "display_infos_panel": display_infos_panel,
             "hide_object_filter": hide_object_filter,
             "distance_to_acteur": distance_to_acteur,
             "display_exclusivite_reparation": display_exclusivite_reparation,
-            "is_embedded": is_embedded,
-            "is_iframe": is_iframe,
-            "is_carte": is_carte,
             "url": reverse,
             "static": static,
             "quote_plus": lambda u: quote_plus(u),
-            "ENVIRONMENT": settings.ENVIRONMENT,
             "AIRFLOW_WEBSERVER_REFRESHACTEUR_URL": (
                 settings.AIRFLOW_WEBSERVER_REFRESHACTEUR_URL
             ),

core/settings.py

@@ -42,6 +42,7 @@
     "django.contrib.contenttypes",
     "django.contrib.sessions",
     "django.contrib.messages",
+    "django.contrib.sitemaps",
     "whitenoise.runserver_nostatic",
     "django.contrib.staticfiles",
     "django.contrib.gis",
@@ -50,6 +51,7 @@
     "widget_tweaks",
     "dsfr",
     "django.forms",
+    "colorfield",
     "core",
     "qfdmd",
     "qfdmo",
@@ -155,28 +157,32 @@
 
 ROOT_URLCONF = "core.urls"
 
+
+def context_processors():
+    return [
+        "django.template.context_processors.debug",
+        "django.template.context_processors.request",
+        "django.contrib.auth.context_processors.auth",
+        "django.contrib.messages.context_processors.messages",
+        "core.context_processors.environment",
+        "dsfr.context_processors.site_config",
+    ]
+
+
 TEMPLATES = [
     {
         "BACKEND": "django.template.backends.jinja2.Jinja2",
         "DIRS": [BASE_DIR / "jinja2"],
         "OPTIONS": {
             "environment": "core.jinja2_handler.environment",
+            "context_processors": context_processors(),
         },
     },
     {
         "BACKEND": "django.template.backends.django.DjangoTemplates",
         "DIRS": [BASE_DIR / "templates"],
         "APP_DIRS": True,
-        "OPTIONS": {
-            "context_processors": [
-                "django.template.context_processors.debug",
-                "django.template.context_processors.request",
-                "django.contrib.auth.context_processors.auth",
-                "django.contrib.messages.context_processors.messages",
-                "core.context_processors.environment",
-                "dsfr.context_processors.site_config",
-            ],
-        },
+        "OPTIONS": {"context_processors": context_processors()},
     },
 ]
 

core/urls.py

@@ -17,15 +17,45 @@
 
 from django.conf import settings
 from django.contrib import admin
+from django.contrib.sitemaps import GenericSitemap
+from django.contrib.sitemaps import views as sitemaps_views
 from django.urls import include, path
 
+from qfdmo.models.acteur import DisplayedActeur
+
 from .api import api
 
+info_dict = {
+    "queryset": DisplayedActeur.objects.all(),
+    "date_field": "modifie_le",
+}
+
+
+class PaginatedSitemap(GenericSitemap):
+    limit = 500
+
+
+sitemaps = {"items": PaginatedSitemap(info_dict, priority=1.0)}
+
+
 urlpatterns = [
     path("admin/", admin.site.urls),
     path("api/", api.urls),
     path("explorer/", include("explorer.urls")),
+    path(
+        "sitemap.xml",
+        sitemaps_views.index,
+        {"sitemaps": sitemaps},
+        name="django.contrib.sitemaps.views.index",
+    ),
+    path(
+        "sitemap-<section>.xml",
+        sitemaps_views.sitemap,
+        {"sitemaps": sitemaps},
+        name="django.contrib.sitemaps.views.sitemap",
+    ),
     path("", include(("qfdmo.urls", "qfdmo"), namespace="qfdmo")),
+    path("dsfr/", include(("dsfr_hacks.urls", "dsfr_hacks"), namespace="dsfr_hacks")),
 ]
 
 if settings.DEBUG:

docs/Coding-guidelines

@@ -0,0 +1,3 @@
+# Coding guidelines
+
+- Nommage (et [Swift API Guidelines](https://www.swift.org/documentation/api-design-guidelines/))

docs/Frontend.md

@@ -0,0 +1,78 @@
+# Frontend et templating
+
+Le projet utilise le templating Django pour développer le frontend.
+
+- Jinja vs templating Django
+- Parcel
+- Tailwind
+- Organisation et découpage des templates
+- Utilisation des formulaires
+- Django DSFR
+
+## Jinja et templating Django
+
+Le projet utilise Jinja et le templating Django.
+:warning: **Ces deux approches cohabitent mais il est envisagé d'abandonner Jinja à terme.**
+Quand bien même les templates continuent d'être placé dans le dossier `jinja2` afin de garantir une rétrocompatibilité, tous les futurs développement doivent s'efforcer de s'affranchir de Jinja.
+
+## Parcel
+
+[Parcel](https://parceljs.org) est utilisé pour compiler les fichiers statiques : CSS, JS notamment.
+Les sources sont configurées dans le fichier package.json`
+
+### Transformers
+
+Le projet utilise des _transformers_, ceux-ci sont principalement utilisés pour assainir le DSFR aujourd'hui.
+
+### PostCSS
+
+Parcel embarque PostCSS, celui-ci est étendu dans le projet pour supporter Tailwind et le [_CSS nesting_](https://www.w3.org/TR/css-nesting-1/)
+
+
+## Organisation et découpage des templates
+
+On considère que le découpage de templates peut avoir lieu dans plusieurs situations :
+- Rendre un élément de design réutilisable (composant du DSFR, composant custom)
+- Rendre un template moins lourd et le découper en petites unités fonctionnelles
+
+Un template de composant étant considéré comme réutilisable, il sera nommé `nom_du_composant.html`
+Un fragment de template étant considéré local au template qu'il compose, il sera nommé `_nom_du_fragment.html` et placé dans un dossier portant le même nom que le template où il est utilisé.
+
+L'organisation précise des templates est laissée au jugement du développement, mais l'idée est de faire remonter à proprement parler  au niveau le plus haut possible les fichiers de templates.
+Par exemple, si on travaille sur le template de la fiche détaillée d'un acteur, qui utilise un composant tag, on peut retrouver l'arborescence suivante
+```
+shared
+- tag.html
+acteur
+- fiche.html
+- fiche
+- - presentation.html
+- - _tags.html
+```
+
+Avec par exemple
+```jinja
+{# _tags.html #}
+
+{% for tag in tags %}
+  {% include "shared/tag.html" %}
+{% endfor %}
+```
+
+Note : cette convention a été adoptée en cours de projet et il est possible qu'une partie des templates legacy ne la respecte pas encore.
+
+## Tailwind
+
+Le projet utilise Tailwind.
+Les classes Tailwind sont préfixées de `qfdmo` afin de les *namespacer* par rapport aux autres dépendances utilisées (DSFR notamment).
+
+Afin de les rendre lisible, on tentera tant que possible de les grouper par usage sur une ligne.
+Par exemple les classes relatives au style (bordure, couleur, taille de texte) pourront être distinguées de celles relative au positionnement.
+
+```html
+<div class="
+  qfdmo-flex qfdmo-justify-around
+  qfdmo-border-solid qfdmo-border-black qfdmo-border-2
+  qfdmo-bg-white
+">
+```