Merge pull request #495 from maykinmedia/feature/1156-add-email-phone…

…number-to-location-cards [#1156] Add email and phonenumber to map and location cards
maykinmedia · Mar 3, 2023 · a54aa30 · a54aa30
2 parents 51401c8 + f48d098
commit a54aa30
Show file tree

Hide file tree

Showing 8 changed files with 1,277 additions and 20,381 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -45,6 +45,7 @@
     "@tarekraafat/autocomplete.js": "^10.2.6",
     "bem.js": "^1.0.10",
     "emojibase-data": "^7.0.1",
+    "escape-html": "^1.0.3",
     "flatpickr": "^4.6.9",
     "gumshoejs": "^5.1.2",
     "html-minifier": "^4.0.0",
@@ -62,7 +63,7 @@
     "@babel/preset-env": "latest",
     "@types/leaflet": "^1.7.6",
     "autoprefixer": "^9.0.0",
-    "babel-loader": "latest",
+    "babel-loader": "^8.2.5",
     "chai": "latest",
     "css-loader": "latest",
     "cssnano": "latest",

diff --git a/src/open_inwoner/js/components/map/index.js b/src/open_inwoner/js/components/map/index.js
@@ -1,3 +1,4 @@
+import escapeHTML from 'escape-html'
 import 'leaflet'
 import { RD_CRS } from './rd'
 import { isMobile } from '../../lib/device/is-mobile'
@@ -74,16 +75,22 @@ class Map {
    */
   featureToHTML(feature) {
     const { name, ...properties } = feature.properties
-    const displayName = name ? name : ''
+    const displayName = name ? escapeHTML(name) : ''
+    let finalHTML = ``
+
+    Object.entries(properties).forEach((property) => {
+      finalHTML += `<p class="p">${escapeHTML(property[1])}</p>`
+    })
+
     return `
-        <h4 class="h4">
-          ${displayName}
-        </h4>
-        <p class="p">
-          ${Object.entries(properties)
-            .map(([key, value]) => value)
-            .join(' ')}
-          </p>
+        <div class="leaflet-content-name">
+          <h4 class="h4">
+            ${displayName}
+          </h4>
+        </div>
+        <div class="leaflet-content-details p--no-margin">
+          ${finalHTML}
+        </div>
     `
   }
 }

diff --git a/src/open_inwoner/pdc/models/mixins.py b/src/open_inwoner/pdc/models/mixins.py
@@ -145,17 +145,24 @@ def get_geojson_geometry(self) -> str:
 
     def get_serialized_fields(self) -> dict:
         """
-        Returns fields listed in serializable_fields (see below) as dict if JSON serializable.
+        Returns fields (and combination of fields via method) listed in serializable_fields (see below)
+        as dict if JSON serializable.
         """
-        serializable_fields = ["name", "street", "housenumber", "postcode", "city"]
+        serializable_fields = [
+            "name",
+            "address_line_1",
+            "address_line_2",
+            "email",
+            "phonenumber",
+        ]
         serialized_fields = {}
 
         for name in serializable_fields:
-            if not self._meta.get_field(name):
+            try:
+                value = getattr(self, name)
+            except AttributeError:
                 continue
 
-            value = getattr(self, name)
-
             try:
                 json.dumps(value)  # Check if json serializable.
                 serialized_fields[name] = value

diff --git a/src/open_inwoner/pdc/tests/test_product_location.py b/src/open_inwoner/pdc/tests/test_product_location.py
@@ -70,6 +70,8 @@ def test_get_geojson_feature(self):
             housenumber="117",
             postcode="1015 CJ",
             city="Amsterdam",
+            email="[email protected]",
+            phonenumber="+31666767676",
             geometry=Point(4.8876515, 52.3775941),
         )
         product = ProductFactory.create(locations=(product_location,))
@@ -84,10 +86,10 @@ def test_get_geojson_feature(self):
                     },
                     "properties": {
                         "name": "Maykin Media",
-                        "street": "Keizersgracht",
-                        "housenumber": "117",
-                        "postcode": "1015 CJ",
-                        "city": "Amsterdam",
+                        "address_line_1": "Keizersgracht 117",
+                        "address_line_2": "1015CJ Amsterdam",
+                        "email": "[email protected]",
+                        "phonenumber": "+31666767676",
                     },
                 }
             ),
@@ -114,14 +116,16 @@ def test_get_serialized_fields(self):
             housenumber="117",
             postcode="1015 CJ",
             city="Amsterdam",
+            email="[email protected]",
+            phonenumber="+31666767676",
         )
         self.assertEqual(
             {
-                "city": "Amsterdam",
-                "housenumber": "117",
                 "name": "Maykin Media",
-                "postcode": "1015 CJ",
-                "street": "Keizersgracht",
+                "address_line_1": "Keizersgracht 117",
+                "address_line_2": "1015CJ Amsterdam",
+                "email": "[email protected]",
+                "phonenumber": "+31666767676",
             },
             product_location.get_serialized_fields(),
         )
@@ -133,6 +137,8 @@ def test_queryset_get_geojson_feature_collection(self):
             housenumber="4",
             postcode="7411 KT",
             city="Deventer",
+            email="[email protected]",
+            phonenumber="+31999767676",
             geometry=Point(6.155650, 52.251550),
         )
         product_location_2 = ProductLocationFactory.create(
@@ -141,6 +147,8 @@ def test_queryset_get_geojson_feature_collection(self):
             housenumber="204",
             postcode="1015 KL",
             city="Amsterdam",
+            email="[email protected]",
+            phonenumber="+31666767676",
             geometry=Point(4.883400, 52.380260),
         )
         product_1 = ProductFactory(locations=(product_location_1,))
@@ -158,10 +166,10 @@ def test_queryset_get_geojson_feature_collection(self):
                             },
                             "properties": {
                                 "name": "Gemeente Deventer",
-                                "street": "Grote Kerkhof",
-                                "housenumber": "4",
-                                "postcode": "7411 KT",
-                                "city": "Deventer",
+                                "address_line_1": "Grote Kerkhof 4",
+                                "address_line_2": "7411KT Deventer",
+                                "email": "[email protected]",
+                                "phonenumber": "+31999767676",
                             },
                         },
                         {
@@ -172,10 +180,10 @@ def test_queryset_get_geojson_feature_collection(self):
                             },
                             "properties": {
                                 "name": "Gemeente Amsterdam",
-                                "street": "Lindengracht",
-                                "housenumber": "204",
-                                "postcode": "1015 KL",
-                                "city": "Amsterdam",
+                                "address_line_1": "Lindengracht 204",
+                                "address_line_2": "1015KL Amsterdam",
+                                "email": "[email protected]",
+                                "phonenumber": "+31666767676",
                             },
                         },
                     ],

diff --git a/src/open_inwoner/scss/components/Map/_Map.scss b/src/open_inwoner/scss/components/Map/_Map.scss
@@ -20,3 +20,16 @@
 .p + .map {
   margin-top: var(--spacing-large);
 }
+
+.leaflet-content-name {
+  & > h4 {
+    margin: 0 !important;
+  }
+}
+
+.leaflet-content-details {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--spacing-small);
+  flex-wrap: wrap;
+}
diff --git a/src/open_inwoner/scss/components/Typography/P.scss b/src/open_inwoner/scss/components/Typography/P.scss
@@ -41,3 +41,11 @@
 .p .link {
   text-decoration: underline;
 }
+
+.p--no-margin {
+  margin-top: var(--spacing-small);
+
+  & > .p {
+    margin: 0 !important;
+  }
+}
diff --git a/src/open_inwoner/templates/pages/product/detail.html b/src/open_inwoner/templates/pages/product/detail.html
@@ -82,7 +82,16 @@ <h3 class="h3">{% trans "U komt niet in aanmerking" %}</h3>
         {% render_card_container columns=3 %}
             {% for location in object.locations.all %}
                 {% render_card title=location.name %}
-                    <p class="p">{{ location.address_line_1 }}<br>{{ location.address_line_2 }}</p>
+                    <div class="p--no-margin">
+                        <p class="p">{{ location.address_line_1 }}</p>
+                        <p class="p">{{ location.address_line_2 }}</p>
+                        {% if location.phonenumber %}
+                            <p class="p">{{ location.phonenumber }}</p>
+                        {% endif %}
+                        {% if location.email %}
+                            <p class="p">{{ location.email }}</p>
+                        {% endif %}
+                    </div>
                 {% endrender_card %}
             {% endfor %}
         {% endrender_card_container %}