[REF] web_view_leaflet_map: full refactor.

legalsylvain · legalsylvain · commit 1e276b33db48 · 2026-01-05T11:35:06.000+01:00
- rename folder to follow odoo and OCA conventions, regarding views definition
- isolate leaflet_map_view code
- isolate leaflet_map_controller code
- isolate leaflet_map_renderer code
- split xml file into renderer and controller part
- apply Odoo SA convention

[FIX] remove useless logs, and put a single one in debug level
- remove useless code
- remove obsolete directive: control-panel-bottom-right

[IMP] web_view_leaflet_map: introduce 'Create' Button
diff --git a/web_view_leaflet_map/README.rst b/web_view_leaflet_map/README.rst
@@ -1,7 +1,3 @@
-.. image:: https://odoo-community.org/readme-banner-image
-   :target: https://odoo-community.org/get-involved?utm_source=readme
-   :alt: Odoo Community Association
-
 ================================
 Leaflet Map View (OpenStreetMap)
 ================================
@@ -17,7 +13,7 @@ Leaflet Map View (OpenStreetMap)
 .. |badge1| image:: https://img.shields.io/badge/maturity-Beta-yellow.png
     :target: https://odoo-community.org/page/development-status
     :alt: Beta
-.. |badge2| image:: https://img.shields.io/badge/license-AGPL--3-blue.png
+.. |badge2| image:: https://img.shields.io/badge/licence-AGPL--3-blue.png
     :target: http://www.gnu.org/licenses/agpl-3.0-standalone.html
     :alt: License: AGPL-3
 .. |badge3| image:: https://img.shields.io/badge/github-OCA%2Fgeospatial-lightgray.png?logo=github
diff --git a/web_view_leaflet_map/__manifest__.py b/web_view_leaflet_map/__manifest__.py
@@ -17,9 +17,12 @@
     ],
     "assets": {
         "web.assets_backend": [
-            "web_view_leaflet_map/static/src/components/map-component/map_view.esm.js",
-            "web_view_leaflet_map/static/src/components/map-component/map_view.xml",
-            "web_view_leaflet_map/static/src/components/map-component/web_view_leaflet_map.css",
+            "web_view_leaflet_map/static/src/views/leaflet_map/leaflet_map_renderer.esm.js",
+            "web_view_leaflet_map/static/src/views/leaflet_map/leaflet_map_renderer.xml",
+            "web_view_leaflet_map/static/src/views/leaflet_map/leaflet_map_renderer.css",
+            "web_view_leaflet_map/static/src/views/leaflet_map/leaflet_map_controller.esm.js",
+            "web_view_leaflet_map/static/src/views/leaflet_map/leaflet_map_controller.xml",
+            "web_view_leaflet_map/static/src/views/leaflet_map/leaflet_map_view.esm.js",
         ],
     },
     "installable": True,
diff --git a/web_view_leaflet_map/static/description/index.html b/web_view_leaflet_map/static/description/index.html
@@ -3,7 +3,7 @@
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="generator" content="Docutils: https://docutils.sourceforge.io/" />
-<title>README.rst</title>
+<title>Leaflet Map View (OpenStreetMap)</title>
 <style type="text/css">
 
 /*
@@ -360,21 +360,16 @@
 </style>
 </head>
 <body>
-<div class="document">
+<div class="document" id="leaflet-map-view-openstreetmap">
+<h1 class="title">Leaflet Map View (OpenStreetMap)</h1>
 
-
-<a class="reference external image-reference" href="https://odoo-community.org/get-involved?utm_source=readme">
-<img alt="Odoo Community Association" src="https://odoo-community.org/readme-banner-image" />
-</a>
-<div class="section" id="leaflet-map-view-openstreetmap">
-<h1>Leaflet Map View (OpenStreetMap)</h1>
 <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 !! This file is generated by oca-gen-addon-readme !!
 !! changes will be overwritten.                   !!
 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 !! source digest: sha256:4e68900a79d923acb16260b8dded77558e5fbbba071b0ec253adef930e58c15c
 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
-<p><a class="reference external image-reference" href="https://odoo-community.org/page/development-status"><img alt="Beta" src="https://img.shields.io/badge/maturity-Beta-yellow.png" /></a> <a class="reference external image-reference" href="http://www.gnu.org/licenses/agpl-3.0-standalone.html"><img alt="License: AGPL-3" src="https://img.shields.io/badge/license-AGPL--3-blue.png" /></a> <a class="reference external image-reference" href="https://github.com/OCA/geospatial/tree/18.0/web_view_leaflet_map"><img alt="OCA/geospatial" src="https://img.shields.io/badge/github-OCA%2Fgeospatial-lightgray.png?logo=github" /></a> <a class="reference external image-reference" href="https://translation.odoo-community.org/projects/geospatial-18-0/geospatial-18-0-web_view_leaflet_map"><img alt="Translate me on Weblate" src="https://img.shields.io/badge/weblate-Translate%20me-F47D42.png" /></a> <a class="reference external image-reference" href="https://runboat.odoo-community.org/builds?repo=OCA/geospatial&amp;target_branch=18.0"><img alt="Try me on Runboat" src="https://img.shields.io/badge/runboat-Try%20me-875A7B.png" /></a></p>
+<p><a class="reference external image-reference" href="https://odoo-community.org/page/development-status"><img alt="Beta" src="https://img.shields.io/badge/maturity-Beta-yellow.png" /></a> <a class="reference external image-reference" href="http://www.gnu.org/licenses/agpl-3.0-standalone.html"><img alt="License: AGPL-3" src="https://img.shields.io/badge/licence-AGPL--3-blue.png" /></a> <a class="reference external image-reference" href="https://github.com/OCA/geospatial/tree/18.0/web_view_leaflet_map"><img alt="OCA/geospatial" src="https://img.shields.io/badge/github-OCA%2Fgeospatial-lightgray.png?logo=github" /></a> <a class="reference external image-reference" href="https://translation.odoo-community.org/projects/geospatial-18-0/geospatial-18-0-web_view_leaflet_map"><img alt="Translate me on Weblate" src="https://img.shields.io/badge/weblate-Translate%20me-F47D42.png" /></a> <a class="reference external image-reference" href="https://runboat.odoo-community.org/builds?repo=OCA/geospatial&amp;target_branch=18.0"><img alt="Try me on Runboat" src="https://img.shields.io/badge/runboat-Try%20me-875A7B.png" /></a></p>
 <p>This module extends odoo views, to add a new kind of view, named
 <tt class="docutils literal">leaflet_map</tt> that is using the Leaflet javascript library to use
 maps. (<a class="reference external" href="https://leafletjs.com/">https://leafletjs.com/</a>) This library is for exemple, used in the
@@ -407,13 +402,13 @@ <h1>Leaflet Map View (OpenStreetMap)</h1>
 </ul>
 </div>
 <div class="section" id="configuration">
-<h2><a class="toc-backref" href="#toc-entry-1">Configuration</a></h2>
+<h1><a class="toc-backref" href="#toc-entry-1">Configuration</a></h1>
 <ul class="simple">
 <li>See configuration of the module <tt class="docutils literal">web_leaflet_lib</tt>.</li>
 </ul>
 </div>
 <div class="section" id="development">
-<h2><a class="toc-backref" href="#toc-entry-2">Development</a></h2>
+<h1><a class="toc-backref" href="#toc-entry-2">Development</a></h1>
 <p>Create a new view :</p>
 <pre class="code xml literal-block">
 <span class="nt">&lt;record</span><span class="w"> </span><span class="na">id=</span><span class="s">&quot;view_my_model_map&quot;</span><span class="w"> </span><span class="na">model=</span><span class="s">&quot;ir.ui.view&quot;</span><span class="nt">&gt;</span><span class="w">
@@ -467,7 +462,7 @@ <h2><a class="toc-backref" href="#toc-entry-2">Development</a></h2>
 globally, or per model.</p>
 </div>
 <div class="section" id="known-issues-roadmap">
-<h2><a class="toc-backref" href="#toc-entry-3">Known issues / Roadmap</a></h2>
+<h1><a class="toc-backref" href="#toc-entry-3">Known issues / Roadmap</a></h1>
 <ul class="simple">
 <li>For the time being, at the start of the map loading, the call of
 <tt class="docutils literal">invalidateSize()</tt> is required. We should investigate why and try to
@@ -480,29 +475,29 @@ <h2><a class="toc-backref" href="#toc-entry-3">Known issues / Roadmap</a></h2>
 </ul>
 </div>
 <div class="section" id="bug-tracker">
-<h2><a class="toc-backref" href="#toc-entry-4">Bug Tracker</a></h2>
+<h1><a class="toc-backref" href="#toc-entry-4">Bug Tracker</a></h1>
 <p>Bugs are tracked on <a class="reference external" href="https://github.com/OCA/geospatial/issues">GitHub Issues</a>.
 In case of trouble, please check there if your issue has already been reported.
 If you spotted it first, help us to smash it by providing a detailed and welcomed
 <a class="reference external" href="https://github.com/OCA/geospatial/issues/new?body=module:%20web_view_leaflet_map%0Aversion:%2018.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**">feedback</a>.</p>
 <p>Do not contact contributors directly about support or help with technical issues.</p>
 </div>
 <div class="section" id="credits">
-<h2><a class="toc-backref" href="#toc-entry-5">Credits</a></h2>
+<h1><a class="toc-backref" href="#toc-entry-5">Credits</a></h1>
 <div class="section" id="authors">
-<h3><a class="toc-backref" href="#toc-entry-6">Authors</a></h3>
+<h2><a class="toc-backref" href="#toc-entry-6">Authors</a></h2>
 <ul class="simple">
 <li>GRAP</li>
 </ul>
 </div>
 <div class="section" id="contributors">
-<h3><a class="toc-backref" href="#toc-entry-7">Contributors</a></h3>
+<h2><a class="toc-backref" href="#toc-entry-7">Contributors</a></h2>
 <ul class="simple">
 <li>Sylvain LE GAL (<a class="reference external" href="https://www.twitter.com/legalsylvain">https://www.twitter.com/legalsylvain</a>)</li>
 </ul>
 </div>
 <div class="section" id="maintainers">
-<h3><a class="toc-backref" href="#toc-entry-8">Maintainers</a></h3>
+<h2><a class="toc-backref" href="#toc-entry-8">Maintainers</a></h2>
 <p>This module is maintained by the OCA.</p>
 <a class="reference external image-reference" href="https://odoo-community.org">
 <img alt="Odoo Community Association" src="https://odoo-community.org/logo.png" />
@@ -517,6 +512,5 @@ <h3><a class="toc-backref" href="#toc-entry-8">Maintainers</a></h3>
 </div>
 </div>
 </div>
-</div>
 </body>
 </html>
diff --git a/web_view_leaflet_map/static/src/components/map-component/map_view.xml b/web_view_leaflet_map/static/src/components/map-component/map_view.xml
diff --git a/web_view_leaflet_map/static/src/views/leaflet_map/leaflet_map_controller.esm.js b/web_view_leaflet_map/static/src/views/leaflet_map/leaflet_map_controller.esm.js
@@ -0,0 +1,24 @@
+import {Component, useRef} from "@odoo/owl";
+import {Layout} from "@web/search/layout";
+import {MapRenderer} from "./leaflet_map_renderer.esm";
+import {executeButtonCallback} from "@web/views/view_button/view_button_hook";
+
+/**
+ * Controller class for the Map view, setting up the environment configuration.
+ */
+export class MapController extends Component {
+    static template = "web_view_leaflet_map.MapView";
+    static components = {Layout, MapRenderer};
+
+    setup() {
+        this.rootRef = useRef("root");
+    }
+
+    async onClickCreate() {
+        return executeButtonCallback(this.rootRef.el, () => this.createRecord());
+    }
+
+    async createRecord() {
+        await this.props.createRecord();
+    }
+}
diff --git a/web_view_leaflet_map/static/src/views/leaflet_map/leaflet_map_controller.xml b/web_view_leaflet_map/static/src/views/leaflet_map/leaflet_map_controller.xml
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="web_view_leaflet_map.MapView" owl="1">
+        <div class="h-100 overflow-auto" t-ref="root">
+            <Layout display="props.display" className="'h-100 overflow-auto'">
+                <t t-set-slot="control-panel-create-button">
+                    <button
+                        type="button"
+                        class="btn btn-primary o_list_button_add"
+                        data-hotkey="c"
+                        t-on-click="onClickCreate"
+                        data-bounce-button=""
+                    >
+                        New
+                    </button>
+                </t>
+
+                <MapRenderer t-props="props" />
+            </Layout>
+        </div>
+    </t>
+
+</templates>
diff --git a/web_view_leaflet_map/static/src/views/leaflet_map/leaflet_map_renderer.css b/web_view_leaflet_map/static/src/views/leaflet_map/leaflet_map_renderer.css
diff --git a/web_view_leaflet_map/static/src/views/leaflet_map/leaflet_map_renderer.esm.js b/web_view_leaflet_map/static/src/views/leaflet_map/leaflet_map_renderer.esm.js
@@ -1,18 +1,19 @@
-import {registry} from "@web/core/registry";
-import {useService} from "@web/core/utils/hooks";
-import {Layout} from "@web/search/layout";
 import {session} from "@web/session";
+import {useService} from "@web/core/utils/hooks";
 
-/* global L, console, document, DOMParser */
+/* global L, console, document */
 
-const {Component, useSubEnv, onWillStart, onMounted, onPatched, useRef} = owl;
+const {Component, onWillStart, onMounted, onPatched, useRef} = owl;
 
 export class MapRenderer extends Component {
+    static template = "web_view_leaflet_map.MapRenderer";
+    static components = {};
+
     /**
      * Initializes the MapRenderer component, setting up services, references, and configuration.
      */
+    // eslint-disable-next-line complexity
     setup() {
-        console.log(this.props);
         this.orm = useService("orm");
         this.action = useService("action");
         this.mapRef = useRef("mapContainer");
@@ -53,7 +54,6 @@ export class MapRenderer extends Component {
         });
 
         onPatched(() => {
-            console.log("onPatched");
             if (this.leafletMap) {
                 this.renderMarkers();
             }
@@ -179,7 +179,7 @@ export class MapRenderer extends Component {
         const lng = record[this.fieldLongitude];
         let marker = null;
         if (!lat || !lng) {
-            console.log(`Record ${record.id} has no coordinates`);
+            console.debug(`Record ${record.id} has no coordinates`);
             return;
         }
 
@@ -273,61 +273,3 @@ export class MapRenderer extends Component {
         });
     }
 }
-
-MapRenderer.template = "web_view_leaflet_map.MapRenderer";
-MapRenderer.components = {};
-
-/**
- * Controller class for the Map view, setting up the environment configuration.
- */
-export class MapController extends Component {
-    setup() {
-        useSubEnv({
-            config: {
-                ...this.env.config,
-            },
-        });
-    }
-}
-
-MapController.template = "web_view_leaflet_map.MapView";
-MapController.components = {Layout, MapRenderer};
-
-/**
- * Helper function that normalize the architecture input to ensure it is an HTMLElement.
- * @param arch
- * @returns {HTMLElement|*}
- */
-function normalizeArch(arch) {
-    if (arch && typeof arch !== "string") return arch;
-    const xml = String(arch || "");
-    const doc = new DOMParser().parseFromString(xml, "text/xml");
-    return doc.documentElement;
-}
-
-/**
- * Definition of the map view for Odoo, including its properties and components.
- * @type {{searchMenuTypes: string[], icon: string, Renderer: MapRenderer, multiRecord: boolean, type: string, display_name: string, Controller: MapController, props: (function(*, *): *&{archInfo: {arch: *}, Renderer: MapRenderer})}}
- */
-export const mapView = {
-    type: "leaflet_map",
-    display_name: "Map",
-    icon: "fa fa-map-o",
-    multiRecord: true,
-    Controller: MapController,
-    Renderer: MapRenderer,
-    searchMenuTypes: ["filter", "favorite"],
-
-    props: (genericProps) => {
-        const archEl = normalizeArch(genericProps.arch);
-        return {
-            ...genericProps,
-            Renderer: MapRenderer,
-            archInfo: {
-                arch: archEl,
-            },
-        };
-    },
-};
-
-registry.category("views").add("leaflet_map", mapView);
diff --git a/web_view_leaflet_map/static/src/views/leaflet_map/leaflet_map_renderer.xml b/web_view_leaflet_map/static/src/views/leaflet_map/leaflet_map_renderer.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="web_view_leaflet_map.MapRenderer" owl="1">
+        <div class="o_leaflet_main_container h-100" t-ref="root">
+            <div t-ref="mapContainer" class="o_leaflet_map_container h-100" />
+        </div>
+    </t>
+
+</templates>
diff --git a/web_view_leaflet_map/static/src/views/leaflet_map/leaflet_map_view.esm.js b/web_view_leaflet_map/static/src/views/leaflet_map/leaflet_map_view.esm.js
@@ -0,0 +1,44 @@
+import {MapController} from "./leaflet_map_controller.esm";
+import {MapRenderer} from "./leaflet_map_renderer.esm";
+import {registry} from "@web/core/registry";
+
+/* global DOMParser */
+
+/**
+ * Helper function that normalize the architecture input to ensure it is an HTMLElement.
+ * @param arch
+ * @returns {HTMLElement|*}
+ */
+function normalizeArch(arch) {
+    if (arch && typeof arch !== "string") return arch;
+    const xml = String(arch || "");
+    const doc = new DOMParser().parseFromString(xml, "text/xml");
+    return doc.documentElement;
+}
+
+/**
+ * Definition of the map view for Odoo, including its properties and components.
+ * @type {{searchMenuTypes: string[], icon: string, Renderer: MapRenderer, multiRecord: boolean, type: string, display_name: string, Controller: MapController, props: (function(*, *): *&{archInfo: {arch: *}, Renderer: MapRenderer})}}
+ */
+export const leafletMapView = {
+    type: "leaflet_map",
+    display_name: "Map",
+    icon: "fa fa-map-o",
+    multiRecord: true,
+    Controller: MapController,
+    Renderer: MapRenderer,
+    searchMenuTypes: ["filter", "favorite"],
+
+    props: (genericProps) => {
+        const archEl = normalizeArch(genericProps.arch);
+        return {
+            ...genericProps,
+            Renderer: MapRenderer,
+            archInfo: {
+                arch: archEl,
+            },
+        };
+    },
+};
+
+registry.category("views").add("leaflet_map", leafletMapView);
