From b740a88ae3f00c380a380aa40f1a01c75b4bce7f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Fastr=C3=A9?= <julien.fastre@champs-libres.coop>
Date: Tue, 14 Mar 2023 22:12:30 +0100
Subject: [PATCH] Feature: bootstrapping an app to show a modal for address
 details and showing it inside twig address's render box

Feature: showing map and link to external map, and address details inside address details modal

Feature: AddressDetailsMap show a warning if the address is incomplete
---
 package.json                                  |  7 +-
 .../Resources/public/lib/api/address.ts       | 14 +++
 .../public/module/address-details/index.ts    | 25 +++++
 .../ChillMainBundle/Resources/public/types.ts |  9 ++
 .../Resources/public/vuejs/Address/api.js     | 10 +-
 .../AddressDetails/AddressDetailsButton.vue   | 45 +++++++++
 .../AddressDetails/AddressDetailsContent.vue  | 22 +++++
 .../AddressDetails/AddressModal.vue           | 49 ++++++++++
 .../Parts/AddressDetailsMap.vue               | 91 +++++++++++++++++++
 .../Resources/views/Entity/address.html.twig  |  4 +
 .../Resources/views/layout.html.twig          |  2 +
 .../Normalizer/AddressNormalizer.php          |  4 +
 .../Templating/Entity/AddressRender.php       |  6 +-
 .../Templating/Entity/AddressRenderTest.php   |  1 +
 .../ChillMainBundle/chill.webpack.config.js   |  1 +
 src/Bundle/import-png.d.ts                    |  4 +
 16 files changed, 283 insertions(+), 11 deletions(-)
 create mode 100644 src/Bundle/ChillMainBundle/Resources/public/lib/api/address.ts
 create mode 100644 src/Bundle/ChillMainBundle/Resources/public/module/address-details/index.ts
 create mode 100644 src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/AddressDetailsButton.vue
 create mode 100644 src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/AddressDetailsContent.vue
 create mode 100644 src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/AddressModal.vue
 create mode 100644 src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/Parts/AddressDetailsMap.vue
 create mode 100644 src/Bundle/import-png.d.ts

diff --git a/package.json b/package.json
index 17b02c63a..bb4889983 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
-    "name": "chill",
-    "version": "2.0.0",
-    "devDependencies": {
+  "name": "chill",
+  "version": "2.0.0",
+  "devDependencies": {
     "@alexlafroscia/yaml-merge": "^4.0.0",
     "@apidevtools/swagger-cli": "^4.0.4",
     "@babel/core": "^7.20.5",
@@ -41,6 +41,7 @@
     "@fullcalendar/timegrid": "^5.11.0",
     "@fullcalendar/vue3": "^5.11.1",
     "@popperjs/core": "^2.9.2",
+    "@types/leaflet": "^1.9.3",
     "dropzone": "^5.7.6",
     "es6-promise": "^4.2.8",
     "leaflet": "^1.7.1",
diff --git a/src/Bundle/ChillMainBundle/Resources/public/lib/api/address.ts b/src/Bundle/ChillMainBundle/Resources/public/lib/api/address.ts
new file mode 100644
index 000000000..d039daf12
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/lib/api/address.ts
@@ -0,0 +1,14 @@
+import {Address} from "../../types";
+
+export const getAddressById = async (address_id: number): Promise<Address> =>
+{
+  const url = `/api/1.0/main/address/${address_id}.json`;
+
+  const response = await fetch(url);
+
+  if (response.ok) {
+    return response.json();
+  }
+
+  throw Error('Error with request resource response');
+};
diff --git a/src/Bundle/ChillMainBundle/Resources/public/module/address-details/index.ts b/src/Bundle/ChillMainBundle/Resources/public/module/address-details/index.ts
new file mode 100644
index 000000000..aa843bca8
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/module/address-details/index.ts
@@ -0,0 +1,25 @@
+import AddressDetailsButton from "../../vuejs/_components/AddressDetails/AddressDetailsButton.vue";
+import {createApp} from "vue";
+import {createI18n} from "vue-i18n";
+import {_createI18n} from "../../vuejs/_js/i18n";
+
+const i18n = _createI18n({});
+
+document.querySelectorAll<HTMLSpanElement>('span[data-address-details]').forEach((el) => {
+  const dataset = el.dataset as {
+    addressId: string
+  };
+
+  const app = createApp({
+    components: {AddressDetailsButton},
+    data() {
+      return {
+        addressId: Number.parseInt(dataset.addressId),
+      }
+    },
+    template: '<address-details-button :address_id="addressId"></address-details-button>'
+  });
+
+  app.use(i18n);
+  app.mount(el);
+});
diff --git a/src/Bundle/ChillMainBundle/Resources/public/types.ts b/src/Bundle/ChillMainBundle/Resources/public/types.ts
index 9453c89b0..3deb1d229 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/types.ts
+++ b/src/Bundle/ChillMainBundle/Resources/public/types.ts
@@ -70,6 +70,8 @@ export interface Country {
   code: string;
 }
 
+export type AddressRefStatus = 'match'|'to_review'|'reviewed';
+
 export interface Address {
   type: "address";
   address_id: number;
@@ -90,6 +92,13 @@ export interface Address {
   addressReference: AddressReference | null;
   validFrom: DateTime;
   validTo: DateTime | null;
+  point: Point | null;
+  refStatus: AddressRefStatus;
+  isNoAddress: boolean;
+}
+
+export interface AddressWithPoint extends Address {
+  point: Point
 }
 
 export interface AddressReference {
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/api.js b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/api.js
index b1489bfb6..294ea9480 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/api.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/api.js
@@ -1,3 +1,5 @@
+import {getAddressById} from 'ChillMainAssets/lib/api/address';
+
 /**
 * Endpoint chill_api_single_country__index
 * method GET, get Country Object
@@ -188,13 +190,7 @@ const postPostalCode = (postalCode) => { //<--
 * @returns {Promise} a promise containing a Address object
 */
 const getAddress = (id) => {
-   //console.log('<< get address');
-   const url = `/api/1.0/main/address/${id}.json`;
-   return fetch(url)
-      .then(response => {
-         if (response.ok) { return response.json(); }
-         throw Error('Error with request resource response');
-      });
+  return getAddressById(id);
 };
 
 export {
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/AddressDetailsButton.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/AddressDetailsButton.vue
new file mode 100644
index 000000000..8b1f9d869
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/AddressDetailsButton.vue
@@ -0,0 +1,45 @@
+<template>
+  <a v-if="data.loading === false" @click.prevent="clickOrOpen"><span class="fa fa-map"></span></a>
+  <span v-if="data.loading" class="fa fa-spin fa-spinner "></span>
+  <AddressModal :address="data.working_address" ref="address_modal"></AddressModal>
+</template>
+
+<script lang="ts" setup>
+import {Address} from "../../../types";
+import {reactive, ref} from "vue";
+import {getAddressById} from "../../../lib/api/address";
+import AddressModal from "./AddressModal.vue";
+
+export interface AddressModalContentProps {
+  //address?: Address|null,
+  address_id: number,
+}
+
+const data = reactive<{
+  loading: boolean,
+  working_address: Address | null,
+}>({
+  loading: false,
+  working_address: null,
+});
+
+const props = defineProps<AddressModalContentProps>();
+
+const address_modal = ref<InstanceType<typeof AddressModal> | null>(null)
+
+async function clickOrOpen(): Promise<void> {
+  if (data.working_address === null) {
+    data.loading = true;
+    data.working_address = await getAddressById(props.address_id);
+    data.loading = false;
+  }
+
+  // open the modal
+  address_modal.value?.open();
+}
+
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/AddressDetailsContent.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/AddressDetailsContent.vue
new file mode 100644
index 000000000..95378b543
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/AddressDetailsContent.vue
@@ -0,0 +1,22 @@
+<template>
+  <address-details-map :address="props.address"></address-details-map>
+  <address-render-box :address="props.address"></address-render-box>
+
+</template>
+
+<script lang="ts" setup>
+import {Address} from "../../../types";
+import AddressDetailsMap from "./Parts/AddressDetailsMap.vue";
+import AddressRenderBox from "../Entity/AddressRenderBox.vue";
+
+interface AddressModalContentProps {
+  address: Address,
+}
+
+const props = defineProps<AddressModalContentProps>();
+
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/AddressModal.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/AddressModal.vue
new file mode 100644
index 000000000..154273a27
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/AddressModal.vue
@@ -0,0 +1,49 @@
+<template>
+  <teleport to="body">
+    <modal v-if="state.show_modal" @close="close">
+      <template v-slot:header>
+        <h2>Détails d'une adresse</h2>
+      </template>
+      <template v-slot:body>
+        <address-details-content :address="props.address"></address-details-content>
+      </template>
+    </modal>
+  </teleport>
+</template>
+
+<script lang="ts" setup>
+import {reactive, ref} from "vue";
+import Modal from 'ChillMainAssets/vuejs/_components/Modal.vue';
+import {Address} from "../../../types";
+import AddressDetailsContent from "./AddressDetailsContent.vue";
+
+interface AddressModalProps {
+  address: Address
+}
+
+interface AddressModalState {
+  show_modal: boolean,
+}
+
+const props = defineProps<AddressModalProps>();
+const state: AddressModalState = reactive({show_modal: false});
+const dummy = ref(false);
+
+const open = (): void => {
+  state.show_modal = true;
+}
+
+const close = (): void => {
+  state.show_modal = false;
+}
+
+defineExpose({
+  close,
+  open,
+});
+
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/Parts/AddressDetailsMap.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/Parts/AddressDetailsMap.vue
new file mode 100644
index 000000000..967b16d8c
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/Parts/AddressDetailsMap.vue
@@ -0,0 +1,91 @@
+<template>
+  <div v-if="props.address.isNoAddress" class="alert alert-info">
+    Cette adresse est incomplète. La position géographique est approximative.
+  </div>
+  <div v-if="props.address.point !== null" class="address_details_map" ref="map_div"></div>
+  <a :href="makeUrlGoogleMap(props.address)" target="_blank">Google Maps</a>
+  <a :href="makeUrlOsm(props.address)" target="_blank">OSM</a>
+</template>
+
+<script lang="ts" setup>
+import {onMounted, ref} from "vue";
+import 'leaflet/dist/leaflet.css';
+import markerIconPng from "leaflet/dist/images/marker-icon.png";
+import L, {LatLngExpression, LatLngTuple} from "leaflet";
+import {Address, Point} from "../../../../types";
+
+const lonLatForLeaflet = (point: Point): LatLngTuple => {
+  return [point.coordinates[1], point.coordinates[0]];
+}
+
+export interface MapProps {
+  address: Address,
+}
+
+const props = defineProps<MapProps>();
+
+const map_div = ref<HTMLDivElement | null>(null)
+let map: L.Map|null = null;
+let marker: L.Marker|null = null;
+
+onMounted(() => {
+  console.log(map_div.value);
+  if (map_div.value === null) {
+    throw new Error('map div not found');
+  }
+
+  if (props.address.point !== null) {
+    map = L.map(map_div.value);
+    map.setView(lonLatForLeaflet(props.address.point), 15);
+
+
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+    }).addTo(map);
+
+
+    const markerIcon = L.icon({
+      iconUrl: markerIconPng,
+      iconAnchor: [12, 41],
+    });
+
+    marker = L.marker(lonLatForLeaflet(props.address.point), {icon: markerIcon});
+    marker.addTo(map);
+  }
+});
+
+const makeUrlGoogleMap = (address: Address): string => {
+  const params = new URLSearchParams();
+  params.append('api', '1');
+  if (address.point !== null) {
+    params.append('query', `${address.point.coordinates[1]} ${address.point.coordinates[0]}`);
+  } else {
+    params.append('query', address.lines.join(', '));
+  }
+
+  return `https://www.google.com/maps/search/?${params.toString()}`;
+}
+
+const makeUrlOsm = (address: Address): string => {
+  if (address.point !== null) {
+    const params = new URLSearchParams();
+    params.append('mlat', `${address.point.coordinates[1]}`);
+    params.append('mlon', `${address.point.coordinates[0]}`);
+    const hashParams = new URLSearchParams();
+    hashParams.append('map', `18/${address.point.coordinates[1]}/${address.point.coordinates[0]}`);
+
+    return `https://www.openstreetmap.org/?${params.toString()}#${hashParams.toString()}`;
+  }
+
+  const params = new URLSearchParams();
+  params.append('query', address.lines.join(', '));
+
+  return `https://www.openstreetmap.org/search?${params.toString()}`;
+}
+</script>
+
+<style scoped>
+div.address_details_map {
+  height: 250px;
+}
+</style>
diff --git a/src/Bundle/ChillMainBundle/Resources/views/Entity/address.html.twig b/src/Bundle/ChillMainBundle/Resources/views/Entity/address.html.twig
index eef84b8a2..9ad2b0a12 100644
--- a/src/Bundle/ChillMainBundle/Resources/views/Entity/address.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Entity/address.html.twig
@@ -69,6 +69,7 @@
             <i class="fa fa-li fa-map-marker"></i>
         {% endif %}
         {{ _self.inline(address, options, streetLine, lines) }}
+        <span data-address-details="1" data-address-id="{{ address.id|escape('html_attr') }}" ></span>
     </li>
 {%- endif -%}
 
@@ -78,6 +79,7 @@
             <i class="fa fa-fw fa-map-marker"></i>
         {% endif %}
         {{ _self.inline(address, options, streetLine, lines) }}
+        <span data-address-details="1" data-address-id="{{ address.id|escape('html_attr') }}" ></span>
     </span>
 {%- endif -%}
 
@@ -102,6 +104,7 @@
             <div class="noaddress">
                 {{ 'address.consider homeless'|trans }}
             </div>
+            <p><span data-address-details="1" data-address-id="{{ address.id|escape('html_attr') }}" ></span></p>
 
         {% else %}
             <div class="address{% if options['multiline'] %} multiline{% endif %}{% if options['with_delimiter'] %} delimiter{% endif %}">
@@ -109,6 +112,7 @@
                     <i class="fa fa-fw fa-map-marker"></i>
                 {% endif %}
                 {{ _self.raw(lines) }}
+                <p><span data-address-details="1" data-address-id="{{ address.id|escape('html_attr') }}" ></span></p>
             </div>
         {% endif %}
         {{ _self.validity(address, options) }}
diff --git a/src/Bundle/ChillMainBundle/Resources/views/layout.html.twig b/src/Bundle/ChillMainBundle/Resources/views/layout.html.twig
index 92454be35..8a64c9543 100644
--- a/src/Bundle/ChillMainBundle/Resources/views/layout.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/layout.html.twig
@@ -20,6 +20,7 @@
     {{ encore_entry_link_tags('chill') }}
     {{ encore_entry_link_tags('mod_blur') }}
     {{ encore_entry_link_tags('vue_onthefly') }}
+    {{ encore_entry_link_tags('mod_address_details') }}
     {% block css %}<!-- nothing added to css -->{% endblock %}
 </head>
 
@@ -112,6 +113,7 @@
     {{ encore_entry_script_tags('mod_blur') }}
     {{ encore_entry_script_tags('chill') }}
     {{ encore_entry_script_tags('vue_onthefly') }}
+    {{ encore_entry_script_tags('mod_address_details') }}
 
     <script type="text/javascript">
         window.addEventListener('DOMContentLoaded', function(e) {
diff --git a/src/Bundle/ChillMainBundle/Serializer/Normalizer/AddressNormalizer.php b/src/Bundle/ChillMainBundle/Serializer/Normalizer/AddressNormalizer.php
index a6dfb558d..189860bee 100644
--- a/src/Bundle/ChillMainBundle/Serializer/Normalizer/AddressNormalizer.php
+++ b/src/Bundle/ChillMainBundle/Serializer/Normalizer/AddressNormalizer.php
@@ -97,6 +97,10 @@ class AddressNormalizer implements ContextAwareNormalizerInterface, NormalizerAw
                 );
                 $data['validFrom'] = $address->getValidFrom();
                 $data['validTo'] = $address->getValidTo();
+                $data['refStatus'] = $address->getRefStatus();
+                $data['point'] = $this->normalizer->normalize($address->getPoint(), $format,
+                    [AbstractNormalizer::GROUPS => ['read']]);
+                $data['isNoAddress'] = $address->isNoAddress();
             } elseif ('docgen' === $format) {
                 $dateContext = array_merge($context, ['docgen:expects' => DateTimeInterface::class]);
                 $data['validFrom'] = $this->normalizer->normalize($address->getValidFrom(), $format, $dateContext);
diff --git a/src/Bundle/ChillMainBundle/Templating/Entity/AddressRender.php b/src/Bundle/ChillMainBundle/Templating/Entity/AddressRender.php
index 62362956b..e9e245984 100644
--- a/src/Bundle/ChillMainBundle/Templating/Entity/AddressRender.php
+++ b/src/Bundle/ChillMainBundle/Templating/Entity/AddressRender.php
@@ -13,6 +13,8 @@ namespace Chill\MainBundle\Templating\Entity;
 
 use Chill\MainBundle\Entity\Address;
 use Chill\MainBundle\Templating\TranslatableStringHelperInterface;
+use Symfony\Component\Serializer\Normalizer\AbstractNormalizer;
+use Symfony\Component\Serializer\Normalizer\NormalizerInterface;
 use Symfony\Component\Templating\EngineInterface;
 
 use function array_merge;
@@ -35,7 +37,9 @@ class AddressRender implements ChillEntityRenderInterface
 
     private TranslatableStringHelperInterface $translatableStringHelper;
 
-    public function __construct(EngineInterface $templating, TranslatableStringHelperInterface $translatableStringHelper)
+    public function __construct(
+        EngineInterface $templating,
+        TranslatableStringHelperInterface $translatableStringHelper)
     {
         $this->templating = $templating;
         $this->translatableStringHelper = $translatableStringHelper;
diff --git a/src/Bundle/ChillMainBundle/Tests/Templating/Entity/AddressRenderTest.php b/src/Bundle/ChillMainBundle/Tests/Templating/Entity/AddressRenderTest.php
index ac021a37c..62bab9973 100644
--- a/src/Bundle/ChillMainBundle/Tests/Templating/Entity/AddressRenderTest.php
+++ b/src/Bundle/ChillMainBundle/Tests/Templating/Entity/AddressRenderTest.php
@@ -18,6 +18,7 @@ use Chill\MainBundle\Templating\Entity\AddressRender;
 use Chill\MainBundle\Templating\TranslatableStringHelper;
 use Iterator;
 use Symfony\Bundle\FrameworkBundle\Test\KernelTestCase;
+use Symfony\Component\Serializer\Normalizer\NormalizerInterface;
 use Symfony\Component\Templating\EngineInterface;
 
 /**
diff --git a/src/Bundle/ChillMainBundle/chill.webpack.config.js b/src/Bundle/ChillMainBundle/chill.webpack.config.js
index 727964779..792d0a27e 100644
--- a/src/Bundle/ChillMainBundle/chill.webpack.config.js
+++ b/src/Bundle/ChillMainBundle/chill.webpack.config.js
@@ -75,6 +75,7 @@ module.exports = function(encore, entries)
     encore.addEntry('mod_wopi_link', __dirname + '/Resources/public/module/wopi-link/index.js');
     encore.addEntry('mod_pick_postal_code', __dirname + '/Resources/public/module/pick-postal-code/index.js');
     encore.addEntry('mod_pick_rolling_date', __dirname + '/Resources/public/module/pick-rolling-date/index.js');
+    encore.addEntry('mod_address_details', __dirname + '/Resources/public/module/address-details/index');
 
     // Vue entrypoints
     encore.addEntry('vue_address', __dirname + '/Resources/public/vuejs/Address/index.js');
diff --git a/src/Bundle/import-png.d.ts b/src/Bundle/import-png.d.ts
new file mode 100644
index 000000000..6a81ab5d7
--- /dev/null
+++ b/src/Bundle/import-png.d.ts
@@ -0,0 +1,4 @@
+declare module "*.png" {
+  const value: any;
+  export default value;
+}