Merge pull request #52 from lotrekagency/feature/map-field

Feature/map field
lotrekagency · Jan 12, 2024 · 773b121 · 773b121
2 parents 0f69aa2 + 3ba3b26
commit 773b121
Show file tree

Hide file tree

Showing 8 changed files with 222 additions and 2 deletions.
diff --git a/example/pages/listexample/_detail.vue b/example/pages/listexample/_detail.vue
@@ -395,6 +395,7 @@ export default {
                 type: "date",
                 synci18n: true,
               },
+              /*
               {
                 value: "meta.pubblication_datetime",
                 label: this.$t("pubblicationDateTime"),
@@ -405,7 +406,7 @@ export default {
                 value: "meta.simple_time",
                 type: "time",
                 synci18n: true,
-              },
+              }, */
               {
                 value: "meta.range_datetime",
                 type: "datetime",
@@ -420,6 +421,7 @@ export default {
             type: "media",
             synci18n: true,
           },
+          { label: "map", value: "meta.map", type: "map", synci18n: true },
         ],
       };
     },

diff --git a/packages/@mapomodule/uikit/components/Form/defaults.js b/packages/@mapomodule/uikit/components/Form/defaults.js
@@ -29,6 +29,7 @@ const components = {
     FileField: () => import("@mapomodule/uikit/components/Form/fields/FileField.vue"),
     Repeater: () => import("@mapomodule/uikit/components/Form/fields/Repeater.vue"),
     ColorField: () => import("@mapomodule/uikit/components/Form/fields/ColorField.vue"),
+    MapField: () => import("@mapomodule/uikit/components/Form/fields/mapField/mapField.vue"),
 }
 
 const mapping = {
@@ -50,6 +51,7 @@ const mapping = {
     seoPreview: components.SeoPreview,
     repeater: components.Repeater,
     color: components.ColorField,
+    map: components.MapField
 }
 
 const attrs = {

diff --git a/packages/@mapomodule/uikit/components/Form/fields/mapField/leaflet.injector.js b/packages/@mapomodule/uikit/components/Form/fields/mapField/leaflet.injector.js
@@ -0,0 +1,39 @@
+export default async function () {
+    return new Promise((resolve, reject) => {
+        if (typeof window.L !== 'undefined'){
+            resolve()
+        }
+        let scriptTag = document.getElementById("leaflet-script") || null
+        let styleTag = document.getElementById("leaflet-style") || null
+        const handler = () => {
+            scriptTag.removeEventListener('load', handler);
+            resolve()
+        };
+        if (!scriptTag) {
+            try {
+                scriptTag = document.createElement('script');
+                scriptTag.src = "https://unpkg.com/[email protected]/dist/leaflet.js",
+                scriptTag.crossorigin = "anonymous",
+                scriptTag.async = true,
+                scriptTag.referrerPolicy = 'origin';
+                scriptTag.type = 'application/javascript';
+                scriptTag.id = 'leaflet-script';
+                scriptTag.addEventListener('load', handler);
+                document.head.appendChild(scriptTag);
+                styleTag = document.createElement('link');
+
+                styleTag.rel = "stylesheet",
+                styleTag.href = "https://unpkg.com/[email protected]/dist/leaflet.css",
+                styleTag.crossorigin = "anonymous",
+                styleTag.id = 'leaflet-style';
+                document.head.appendChild(styleTag);
+
+
+            } catch (error) {
+                reject(error)
+            }
+        } else {
+            scriptTag.addEventListener('load', handler);
+        }
+    })
+}
diff --git a/packages/@mapomodule/uikit/components/Form/fields/mapField/mapField.vue b/packages/@mapomodule/uikit/components/Form/fields/mapField/mapField.vue
@@ -0,0 +1,171 @@
+<template>
+  <div>
+    <div ref="map" class="map"></div>
+    <div class="map-fields">
+      <div class="row input-gap">
+        <div class="col-sm-8">
+          <div class="row">
+            <v-text-field
+              v-model="searchQuery"
+              :label="$t('mapo.searchLocation')"
+              @input="debouncedSearchLocation()"
+              v-bind="{ ...$attrs }"
+              class="col"
+            />
+          </div>
+        </div>
+        <div class="col">
+          <div class="row input-gap">
+            <v-text-field
+              v-model="lat"
+              :label="$t('mapo.latitude')"
+              v-bind="{ ...$attrs }"
+              readonly
+              class="col-6"
+            />
+            <v-text-field
+              v-model="lon"
+              :label="$t('mapo.longitude')"
+              v-bind="{ ...$attrs }"
+              readonly
+              class="col"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.map {
+  height: 400px;
+  width: 100%;
+}
+.map-fields {
+  margin-top: 10px;
+  max-width: 100%;
+  padding: 12px;
+}
+.input-gap {
+  gap: 8px;
+}
+</style>
+
+<script>
+/**
+ * This component is made to get coordinates from a map.
+ */
+import { debounce } from "@mapomodule/utils/helpers/debounce";
+import injectScript from "./leaflet.injector.js";
+
+export default {
+  name: "MapField",
+  props: {
+    // V-model property.
+    value: {
+      type: Object,
+    },
+    // This set the component status to readonly, stopping the user interaction.
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      model: this.value || {},
+      map: null,
+      searchQuery: "",
+      marker: null,
+    };
+  },
+  watch: {
+    value(val) {
+      this.model = val || {};
+    },
+    model(val) {
+      this.$emit("input", val);
+    },
+  },
+  mounted() {
+    injectScript().then(this.initMap);
+  },
+  methods: {
+    initMap() {
+      const coordinates = this.model;
+      if (coordinates.lat && coordinates.lon) {
+        this.map = L.map(this.$refs.map).setView(
+          [coordinates.lat, coordinates.lon],
+          12
+        );
+        this.removeAllMarkers();
+        this.marker = L.marker([coordinates.lat, coordinates.lon]).addTo(
+          this.map
+        );
+      } else {
+        this.map = L.map(this.$refs.map).setView([0, 0], 2);
+      }
+
+      L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+        attribution: "© OpenStreetMap contributors",
+      }).addTo(this.map);
+
+      this.map.on("click", (event) => {
+        const coordinates = event.latlng;
+        this.model = { lat: coordinates.lat, lon: coordinates.lng };
+        this.removeAllMarkers();
+        this.marker = L.marker([coordinates.lat, coordinates.lng]).addTo(
+          this.map
+        );
+      });
+    },
+    removeAllMarkers() {
+      this.map.eachLayer((layer) => {
+        if (layer instanceof L.Marker) {
+          this.map.removeLayer(layer);
+        }
+      });
+    },
+    async searchLocation() {
+      try {
+        const response = await this.$axios.get(
+          "https://nominatim.openstreetmap.org/search",
+          {
+            params: {
+              q: this.searchQuery,
+              format: "json",
+              limit: 1,
+            },
+          }
+        );
+
+        if (response.data.length > 0) {
+          const { lat, lon } = response.data[0];
+          this.map.setView([lat, lon], 12);
+
+          if (this.marker) {
+            this.map.removeLayer(this.marker);
+          }
+          this.removeAllMarkers();
+          this.marker = L.marker([lat, lon]).addTo(this.map);
+          this.model = { lat, lon };
+        }
+      } catch (error) {
+        console.error("Errore nella ricerca del luogo:", error);
+      }
+    },
+    debouncedSearchLocation: debounce(function () {
+      this.searchLocation();
+    }, 500),
+  },
+  computed: {
+    lat() {
+      return this.model?.lat || "";
+    },
+    lon() {
+      return this.model?.lon || "";
+    },
+  },
+};
+</script>
diff --git a/...fields/wygEditor/utils/script.injector.js → ...ields/wygEditor/utils/tinymce.injector.js b/...fields/wygEditor/utils/script.injector.js → ...ields/wygEditor/utils/tinymce.injector.js
diff --git a/packages/@mapomodule/uikit/components/Form/fields/wygEditor/wygEditor.vue b/packages/@mapomodule/uikit/components/Form/fields/wygEditor/wygEditor.vue
@@ -33,7 +33,7 @@
 
 <script>
 import initMapoMedia from "./utils/mapomedia.plugin.js";
-import injectScript from "./utils/script.injector.js";
+import injectScript from "./utils/tinymce.injector.js";
 import defaults from "./defaults.js";
 import validEvents from "./utils/events.js";
 

diff --git a/packages/@mapomodule/uikit/translations/en-US.js b/packages/@mapomodule/uikit/translations/en-US.js
@@ -40,6 +40,9 @@ export default {
         altTag: "Alt Tag",
         titleTag: "Title Tag",
         linkedModels: "Linked Models",
+        searchLocation: "Search location",
+        latitude: "Latitude",
+        longitude: "Longitude",
 
         // pages/index.vue
         index: {

diff --git a/packages/@mapomodule/uikit/translations/it-IT.js b/packages/@mapomodule/uikit/translations/it-IT.js
@@ -41,6 +41,9 @@ export default {
         altTag: "Alt Tag",
         titleTag: "Title Tag",
         linkedModels: "Modelli collegati",
+        searchLocation: "Cerca luogo",
+        latitude: "Latitudine",
+        longitude: "Longitudine",
 
         // pages/index.vue
         index: {