Feat/77 event popup #92

AitorRD · 2024-03-18T22:11:54Z

Añadidio:

Integración con la API del backend
Añadido el popup del evento con datos y enlace a detalles

cloudflare-workers-and-pages · 2024-03-19T10:29:59Z

Deploying ocial-app with Cloudflare Pages

Latest commit:	`4bd6584`
Status:	✅ Deploy successful!
Preview URL:	https://9100cd01.ocial-app.pages.dev
Branch Preview URL:	https://feat-77-event-popup.ocial-app.pages.dev

View logs

ferferga · 2024-03-19T13:05:57Z

src/components/LMap.vue

 const { t } = useI18n();
+const { data: eventList } = await useEvent(EventApi, 'eventListList')();
+
+console.log(eventList.value);


Suggested change

console.log(eventList.value);

ferferga · 2024-03-19T13:07:58Z

src/components/LMap.vue

+      throw new Error(`Categoría desconocida: ${categoryName}`);
+    }


Esto quizás mejor usar console.error para que no pete el componente entero (o manejar la excepción en alguna otra parte de forma elegantemente)

ferferga · 2024-03-19T13:10:06Z

src/components/LMap.vue

+const categoryIconMap: { [key in CategoryEnum]: string } = {
+  [CategoryEnum.NUMBER_0]: Azul,
+  [CategoryEnum.NUMBER_1]: Verde,
+  [CategoryEnum.NUMBER_2]: Rojo,
+  [CategoryEnum.NUMBER_3]: Morado,
+  [CategoryEnum.NUMBER_4]: Amarillo


(Para que lo sepas, no bloqueante) Ahora mismo en back está arreglado ya (necesito que se mergee ispp-2324-ocial/backend#56 para que sea 100% automático)

Cuando se actualice, CategoryEnum tendrá las categorías reales y no NUMBER_X

ferferga · 2024-03-19T13:11:50Z

src/components/LMap.vue

@@ -62,18 +100,29 @@ onBeforeUnmount(() => {
 */
 function setMarkers(): void {
  if (mapInstance.value) {
-    for (const mapMarker of props.markers) {
+    for (const event of eventList.value) {
+      const category = event.category === undefined ? CategoryEnum.NUMBER_0 : getCategoryEnum(event.category.toString());


Aquí igual en vez de tener esto, puedes hacer que el parámetro categoryName sea opcional (categoryName?: string) y en default devuelves el CategoryEnum.NUMBER_O.

ferferga · 2024-03-19T13:13:44Z

src/components/LMap.vue

+      const popupContent = `
+        <div>
+          <strong>${t('Evento')}:</strong> ${event.name}<br>
+          <strong>${t('Lugar')}:</strong> ${event.place}<br>
+          <strong>${t('Fecha')}:</strong> ${event.date}<br>
+          <strong>${t('Hora')}:</strong> ${eventHour}<br>
+          <strong>${t('Capacidad')}:</strong> ${event.capacity}<br>
+          <a href="/detalles/${event.id}">${t('Ver detalles')}</a>
+        </div>
+      `;
+
+      marker([event.latitude, event.longitude], { icon: customIcon })
+        .addTo(mapInstance.value)
+        .bindPopup(popupContent);


Esto no hay alguna otra forma en Leaflet de saberlo mediante una clase o algo?

Podríamos envolver todo esto con Teleport:
https://vuejs.org/guide/built-ins/teleport.html#teleport

Y cuando un usuario abra un popup, activar el Teleport al elemento del popup que sea.

He añadido he importado ahora un Popup del propio leaflet que se puede añadir y cambiar cuando añadamos las valoraciones se me ocurre

ferferga · 2024-03-19T13:14:54Z

src/components/LMap.vue

 const { t } = useI18n();
+const { data: eventList } = await useEvent(EventApi, 'eventListList')();


Si ya hacemos el fetch de los datos en el componente padre, por qué es necesario repetirlo aquí?

ferferga · 2024-03-20T13:02:14Z

src/components/LMap.vue

+      const popupContent = document.createElement('div');
+
+      popupContent.innerHTML = `
+        <strong>${t('Evento')}:</strong> ${event.name}<br>
+        <strong>${t('Lugar')}:</strong> ${event.place}<br>
+        <strong>${t('Fecha')}:</strong> ${event.date}<br>
+        <strong>${t('Hora')}:</strong> ${eventHour}<br>
+        <strong>${t('Capacidad')}:</strong> ${event.capacity}<br>
+        <a href="/detalles/${event.id}">${t('Ver detalles')}</a>
+      `;


Todo esto debe de estar gestionado por Vue, no manual. Hay que extraer la lógica de los popups, de forma que solo pueda haber un marcador activo en todo el mapa y no ilimitados.

Guarda en un array todos los marcadores que tenga el mapa y si están activos o inactivos

Haz un computed que te derive si uno de los marcadores está activo

Haz que el div en el template se monte (v-if) si dicho computed devuelve verdadero

Usa template refs para acceder al elemento: https://vuejs.org/guide/essentials/template-refs.html#template-refs

Crea un watcher que trackee dicho ref (de esta forma sabes si está montado/desmontado correctamente)

Cuando dicho watcher sea verdadero, el ref lo aplicas al popup, cuando sea falso, lo eliminas y ya tienes toda la lógica del popup extraída

Como te puse en los otros comentarios, otra opcion es usar Teleport.

Aunque este hilo no tiene solución (porque el que lo publicó no sabía que el montaje/desmontaje de los componentes de Vue es asíncrono y por eso necesitas un watcher), aquí tienes más idea: https://stackoverflow.com/questions/72548373/using-a-vue3-component-as-a-leaflet-popup

ferferga

@AitorRD Lo mergeo ya pero falta:

Adaptar nuevos cambios en la API (concretamente lo de la fecha)
Hacer referencia a la ruta final correcta de la página de detalles de eventos
Extraer la lógica de obtener la ubicación a una store, haré un issue sobre eso más tarde.
Añadir mejores estilos al popup

Also removed unnecessary console.log from login middleware Signed-off-by: GitHub <[email protected]>

sonarqubecloud · 2024-03-28T19:23:03Z

Quality Gate passed

Issues
3 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

AitorRD requested review from ferferga, adrrf, Ramguerom and horgarler March 18, 2024 22:11

AitorRD added code Tasks related to coding frontend Issues related to frontend development labels Mar 18, 2024

AitorRD added this to the S2 milestone Mar 18, 2024

AitorRD linked an issue Mar 18, 2024 that may be closed by this pull request

FEATURE: Pop-up de Evento #77

Closed

AitorRD self-assigned this Mar 18, 2024

AitorRD force-pushed the feat/77-event-popup branch from bc16d05 to bb38934 Compare March 19, 2024 11:17

ferferga suggested changes Mar 19, 2024

View reviewed changes

ferferga suggested changes Mar 20, 2024

View reviewed changes

ferferga self-assigned this Mar 20, 2024

ferferga force-pushed the feat/77-event-popup branch from 0d92b5d to c40570f Compare March 20, 2024 22:29

AitorRD force-pushed the feat/77-event-popup branch from c40570f to 0d92b5d Compare March 28, 2024 16:10

AitorRD added 5 commits March 28, 2024 17:33

feat(map): api integration event only

30ad273

feat(map): pop-up

a5ac829

fix(map): icon fix and locales

4acd511

fix(map): css mapContainer

d7901bc

fix(map): requested changes to rebase

547eb0e

ferferga force-pushed the feat/77-event-popup branch from 0d92b5d to 9d248ac Compare March 28, 2024 18:51

ferferga previously approved these changes Mar 28, 2024

View reviewed changes

ferferga dismissed their stale review via d9ec330 March 28, 2024 19:18

ferferga force-pushed the feat/77-event-popup branch from 9d248ac to d9ec330 Compare March 28, 2024 19:18

refactor: correctly dispose markers and popups, use Teleport, update api

4bd6584

Also removed unnecessary console.log from login middleware Signed-off-by: GitHub <[email protected]>

ferferga force-pushed the feat/77-event-popup branch from d9ec330 to 4bd6584 Compare March 28, 2024 19:22

ferferga enabled auto-merge (rebase) March 28, 2024 19:24

ferferga approved these changes Mar 28, 2024

View reviewed changes

ferferga merged commit 9c98462 into develop Mar 28, 2024
11 of 12 checks passed

ferferga deleted the feat/77-event-popup branch March 28, 2024 19:25

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat/77 event popup #92

Feat/77 event popup #92

AitorRD commented Mar 18, 2024

cloudflare-workers-and-pages bot commented Mar 19, 2024 •

edited

Loading

ferferga Mar 19, 2024

ferferga Mar 19, 2024

ferferga Mar 19, 2024

ferferga Mar 19, 2024

ferferga Mar 19, 2024

AitorRD Mar 19, 2024

ferferga Mar 19, 2024

ferferga Mar 20, 2024 •

edited

Loading

ferferga left a comment •

edited

Loading

sonarqubecloud bot commented Mar 28, 2024

		throw new Error(`Categoría desconocida: ${categoryName}`);
		}

		const { t } = useI18n();
		const { data: eventList } = await useEvent(EventApi, 'eventListList')();

Feat/77 event popup #92

Feat/77 event popup #92

Conversation

AitorRD commented Mar 18, 2024

cloudflare-workers-and-pages bot commented Mar 19, 2024 • edited Loading

Deploying ocial-app with Cloudflare Pages

ferferga Mar 19, 2024

Choose a reason for hiding this comment

ferferga Mar 19, 2024

Choose a reason for hiding this comment

ferferga Mar 19, 2024

Choose a reason for hiding this comment

ferferga Mar 19, 2024

Choose a reason for hiding this comment

ferferga Mar 19, 2024

Choose a reason for hiding this comment

AitorRD Mar 19, 2024

Choose a reason for hiding this comment

ferferga Mar 19, 2024

Choose a reason for hiding this comment

ferferga Mar 20, 2024 • edited Loading

Choose a reason for hiding this comment

ferferga left a comment • edited Loading

Choose a reason for hiding this comment

sonarqubecloud bot commented Mar 28, 2024

Quality Gate passed

cloudflare-workers-and-pages bot commented Mar 19, 2024 •

edited

Loading

ferferga Mar 20, 2024 •

edited

Loading

ferferga left a comment •

edited

Loading