Nodify assets

.github/workflows/python-ci.yml

@@ -24,7 +24,7 @@ jobs:
       - name: Set up Python ${{ matrix.python-version }}
         uses: actions/setup-python@v6
         with:
-          python-version: "3.10"
+          python-version: "3.9"
 
       - name: Install ruff
         run: |
@@ -117,6 +117,21 @@ jobs:
           sudo apt-get -y install gettext
           django-admin compilemessages
 
+      - name: Setup node for front
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '24'
+          cache: 'npm'
+          cache-dependency-path: 'package-lock.json'
+
+      - name: Install front dependencies
+        run: |
+          npm ci --no-audit
+
+      - name: Build front
+        run: |
+          npm run build
+
       - name: Build package
         run: |
           python setup.py sdist

.gitignore

@@ -13,4 +13,8 @@ __pycache__
 /README.html
 /.coverage
 *.mo
-coverage.xml
+coverage.xml
+.parcel-cache
+node_modules
+/mapentity/static/mapentity/dist/
+!/mapentity/static/mapentity/dist/.empty

.parcelrc

@@ -0,0 +1,13 @@
+{
+  "extends": "@parcel/config-default",
+  "transformers": {
+    "*.css": [
+      "@parcel/transformer-css"
+    ]
+  },
+  "optimizers": {
+    "*.css": [
+      "@parcel/optimizer-css"
+    ]
+  }
+}

Dockerfile

@@ -1,10 +1,10 @@
-FROM python:3.9-bookworm
+FROM python:3.9-trixie
 
 RUN apt-get update -qq && apt-get install -y -qq \
     binutils libproj-dev gdal-bin libsqlite3-mod-spatialite \
     libjpeg62 zlib1g-dev libcairo2 libpango-1.0-0 \
-    libpangocairo-1.0-0 libgdk-pixbuf2.0-0 libffi-dev shared-mime-info \
-    libldap2-dev libsasl2-dev gettext && \
+    libpangocairo-1.0-0 libgdk-pixbuf-2.0-0 libffi-dev shared-mime-info \
+    libldap2-dev libsasl2-dev gettext npm && \
     apt-get clean all && rm -rf /var/apt/lists/* && rm -rf /var/cache/apt/*
 
 RUN mkdir -p /code

Makefile

@@ -19,6 +19,16 @@ serve:
 	@$(PRINT_COLOR) "$(COLOR_SUCCESS) \n### Start server ###\n $(COLOR_RESET)\n"
 	$(docker_compose) up
 
+.PHONY: watch
+watch:
+	@$(PRINT_COLOR) "$(COLOR_SUCCESS) \n### Watch JS / CSS ###\n $(COLOR_RESET)\n"
+	$(docker_compose) run --remove-orphans --no-deps --rm web npm run watch
+
+.PHONY: build_assets
+build_assets:
+	@$(PRINT_COLOR) "$(COLOR_SUCCESS) \n### Build assets JS / CSS ###\n $(COLOR_RESET)\n"
+	$(docker_compose) run --remove-orphans --no-deps --rm web npm run build
+
 ###########################
 #          Lint           #
 ###########################

docker-compose.yml

@@ -23,6 +23,18 @@ services:
         aliases:
           - mapentity.local
 
+  front:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    depends_on:
+      - web
+    ports:
+      - "1234:1234"
+    volumes:
+      - ./:/code/src
+    command: npm run watch
+
 volumes:
   postgres:
   redis:

docs/development.rst

@@ -4,11 +4,16 @@ Development
 Quickstart to run MapEntity in development :
 
 ::
-    docker-compose build
+    make serve
+
+Then run initial commands i another terminal :
+
+::
     docker-compose run --rm web ./manage.py migrate
     docker-compose run --rm web ./manage.py createsuperuser
     docker-compose run --rm web ./manage.py update_permissions_mapentity
-    docker-compose up
+    make watch
+
 
 Get Screamshotter and convertit working:
 

mapentity/filters.py

@@ -1,3 +1,4 @@
+from crispy_forms.layout import Layout
 from django.conf import settings
 from django.contrib.gis import forms
 from django.contrib.gis.geos import Polygon
@@ -119,3 +120,11 @@ class Meta:
                 },
             },
         }
+
+    @property
+    def form(self):
+        form = super().form
+        layout_components = list(form.fields.keys())
+        form.helper.form_tag = False
+        form.helper.layout = Layout(*layout_components)
+        return form

mapentity/locale/en/LC_MESSAGES/django.po

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2025-09-04 08:53+0000\n"
+"POT-Creation-Date: 2025-09-17 07:52+0000\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <[email protected]>\n"
@@ -81,6 +81,9 @@ msgstr ""
 msgid "List"
 msgstr ""
 
+msgid "Add"
+msgstr ""
+
 msgid "Admin"
 msgstr ""
 
@@ -247,7 +250,8 @@ msgstr ""
 msgid "Invalid geometry value."
 msgstr ""
 
-msgid "Created"
+#, python-format
+msgid "%(object)s instance created."
 msgstr ""
 
 msgid "Your form contains errors"

mapentity/locale/fr/LC_MESSAGES/django.po

@@ -7,7 +7,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2025-09-04 08:53+0000\n"
+"POT-Creation-Date: 2025-09-17 07:52+0000\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <[email protected]>\n"
@@ -80,6 +80,9 @@ msgstr "Erreur interne"
 msgid "List"
 msgstr "Liste"
 
+msgid "Add"
+msgstr "Ajouter"
+
 msgid "Admin"
 msgstr "Admin"
 
@@ -246,8 +249,9 @@ msgstr "quelques secondes"
 msgid "Invalid geometry value."
 msgstr "Géométrie invalide"
 
-msgid "Created"
-msgstr "Créé"
+#, python-format
+msgid "%(object)s instance created."
+msgstr "Objet de type '%(object)s' a été créé."
 
 msgid "Your form contains errors"
 msgstr "Le formulaire contient des erreurs"
@@ -269,4 +273,4 @@ msgid "Edit %s"
 msgstr "Modifier %s"
 
 msgid "Saved"
-msgstr "Sauvegardé"
+msgstr "Enregistré"

mapentity/src/main.js

@@ -0,0 +1,24 @@
+import jQuery from 'jquery';
+
+import 'jquery-hoverintent';
+import 'bootstrap';
+import 'bootstrap/dist/css/bootstrap.css';
+import 'popper.js';
+
+require('select2')(window, jQuery);
+import 'select2/dist/js/select2.full';
+import '@ttskch/select2-bootstrap4-theme/dist/select2-bootstrap4.css';
+import 'bootstrap-datepicker';
+import 'bootstrap-datepicker/dist/locales/bootstrap-datepicker.fr.min.js';
+import 'bootstrap-datepicker/dist/locales/bootstrap-datepicker.es.min.js';
+import 'bootstrap-datepicker/dist/locales/bootstrap-datepicker.it.min.js';
+import 'bootstrap-datepicker/dist/locales/bootstrap-datepicker.de.min.js';
+import 'bootstrap-datepicker/dist/locales/bootstrap-datepicker.nl.min.js';
+
+require('datatables.net/js/jquery.dataTables.js')(window, jQuery);
+require('datatables.net-bs4/js/dataTables.bootstrap4.js')(window, jQuery);
+
+import 'datatables.net-bs4/css/dataTables.bootstrap4.css';
+import 'bootstrap-datepicker/dist/css/bootstrap-datepicker.css';
+import 'bootstrap-icons/font/bootstrap-icons.css';
+import 'select2/dist/css/select2.css';

mapentity/static/mapentity/style.css → mapentity/src/style.scss

@@ -1,10 +1,29 @@
-
 /***** Bootstrap customizations ******/
+#mainfilter div.form-group {
+  margin-bottom: 0.1rem;
+}
+
+#mainfilter input.form-control-sm, select.form-control-sm {
+  height: 21px;
+}
+
+#mainfilter select.custom-select {
+  height: 21px;
+  line-height: 21px;
+  color: #495057;
+  padding-top: 0;
+  padding-bottom: 0;
+}
 
 .dropdown-menu {
     z-index: 9999;
 }
 
+.select2-dropdown {
+  left: 0;
+  z-index: 9999;
+}
+
 .btn-group.disabled .btn img {
     opacity: 0.5;
 }

mapentity/static/mapentity/mapentity.filter.js

@@ -101,9 +101,11 @@ MapEntity.TogglableFilter = L.Class.extend({
                             $mainfilter.find('select[multiple]').trigger('chosen:updated');
                         }, 1);
                     });
+                    // style select elements
+                    $('select[multiple]').select2();
 
                     // Make sure filter-set class is added if a choice is selected.
-                    $mainfilter.find('select[multiple]').chosen().on('change', function (e) {
+                    $mainfilter.find('select[multiple]').select2({theme: "bootstrap4"}).on('change', function (e) {
                         var $target = $(e.target),
                             name = $target.attr('name'),
                             $container = $('div#id_' + name + '_chzn > ul');

mapentity/static/mapentity/mapentity.js

@@ -20,8 +20,8 @@ $(document).ready(function (e) {
     setTimeout(fillmax, 0);
     $(window).resize(fillmax);
 
-    // Chosen-ify elements
-    $(".chzn-select").chosen();
+    // style select elements
+    $('select').select2({theme: "bootstrap4"});
 
     // Top-navigation tabs
     MapEntity.history.render();