diff --git a/AGENTS.md b/AGENTS.md index 5f6ae54..52481df 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -177,7 +177,7 @@ No hay un estilo mayoritario. El código histórico está partido: - Payload: `[{ product: {id, name, catalogue_images[]}, suppliers: [{ supplier: {...}, organization|null, municipality|null, department|null, country|null }] }]`. - **Genérico reutilizable:** - `src/components/graph/VisChart.vue`: wrapper de vis-network (props `nodes`, `edges`, `height`, `options`; import `import { DataSet, Network } from 'vis-network/standalone'`; emite `select` con el nodo). **OJO**: nodo con `image: null` → TypeError de vis; omitir la clave `image` si no hay foto -- **Específico público** (`src/components/provenance/`): builder puro en `provenance-graph.js` (`buildProvenanceGraph(provenance, kinds)`, `hasAnySupplier`) y el adaptador vis `provenance-vis.js` (`toVisNodes`, `toVisEdges`, `chartOptions`). **Semántica de certeza**: arista con `certain: true` es continua (inequívoca) y `certain: false` es discontinua (dudosa); con varios proveedores por producto se inserta un nodo `junction:` (disyunción) con arista sólida hasta él y discontinua hacia cada proveedor; la duda se corta donde los proveedores coinciden (misma organización/municipio/departamento). Las aristas se deduplican por par `(from, to)` y si un mismo par repite con distinta certeza gana la duda. `buildProvenanceGraph` acepta los niveles a graficar (`product`, `supplier`, `organization`, `municipality`, `department`, `country`); los niveles omitidos se saltan conectando el nivel previo con el siguiente. `ProvenanceGraph.vue` unifica los charts en uno con checkboxes de filtro (por defecto solo productos y proveedores), leyenda con el color de cada nivel (`KIND_COLORS` en `provenance-vis.js`), columnas por nivel (x fijo por tipo; la física ordena la y) y espaciado vertical mínimo (`minVerticalSpacing` en `VisChart`); muestra "próximamente estará disponible" cuando no hay relaciones. `ProvenanceSection.vue` muestra el título ("Origen de los productos") con un desplegable (clic en el título o botón chevron) que oculta el gráfico por defecto, y un segundo desplegable para el mapa ("Mapa de origen de los productos") — patrón reutilizable para futuros bloques. `ProvenanceMap.vue` muestra un recuadro informativo (lista) con **todos** los productos del payload —incluidos los sin proveedor o cuyo municipio no tiene coordenadas, marcados "Sin geolocalización"— y, si hay al menos un municipio con coordenadas, el mapa leaflet debajo: un marcador por producto en el municipio de origen (usa `municipality.latitude/longitude` del payload, sin desplazar posiciones aunque coincidan) y un ícono de persona en la posición de la tienda (settings store, endpoint público `getStoreSettings`); `fitBounds` abarca todos los marcadores, al hacer hover sobre un producto dibuja una línea discontinua hasta la tienda y al hacer hover sobre la tienda dibuja las de todos los productos; clic en un marcador abre `ProvenanceRelationModal.vue` (producto + proveedor + organización + territorio). Clic en un producto del recuadro: si tiene ubicación hace `flyTo` al punto y abre el diálogo; si no, solo abre el diálogo (que para productos sin geolocalización muestra el proveedor/organización disponibles y la nota "Aún sin geolocalización registrada.", y para productos sin proveedor la nota "Aún no se ha vinculado un proveedor a este producto."). `ProvenanceDetailModal.vue` +- **Específico público** (`src/components/provenance/`): builder puro en `provenance-graph.js` (`buildProvenanceGraph(provenance, kinds)`, `hasAnySupplier`) y el adaptador vis `provenance-vis.js` (`toVisNodes`, `toVisEdges`, `chartOptions`). **Semántica de certeza**: arista con `certain: true` es continua (inequívoca) y `certain: false` es discontinua (dudosa); con varios proveedores por producto se inserta un nodo `junction:` (disyunción) con arista sólida hasta él y discontinua hacia cada proveedor; la duda se corta donde los proveedores coinciden (misma organización/municipio/departamento). Las aristas se deduplican por par `(from, to)` y si un mismo par repite con distinta certeza gana la duda. `buildProvenanceGraph` acepta los niveles a graficar (`product`, `supplier`, `organization`, `municipality`, `department`, `country`); los niveles omitidos se saltan conectando el nivel previo con el siguiente. `ProvenanceGraph.vue` unifica los charts en uno con checkboxes de filtro (por defecto solo productos y proveedores), leyenda con el color de cada nivel (`KIND_COLORS` en `provenance-vis.js`), columnas por nivel (x fijo por tipo; la física ordena la y) y espaciado vertical mínimo (`minVerticalSpacing` en `VisChart`); muestra "próximamente estará disponible" cuando no hay relaciones. `ProvenanceSection.vue` muestra el título ("Origen de los productos") con un desplegable (clic en el título o botón chevron) que oculta el gráfico por defecto, y un segundo desplegable para el mapa ("Mapa de origen de los productos") — patrón reutilizable para futuros bloques. `ProvenanceMap.vue` muestra un recuadro informativo (lista) con **todos** los productos del payload —incluidos los sin proveedor o cuyo municipio no tiene coordenadas, marcados "Sin geolocalización"— y, si hay al menos un municipio con coordenadas, el mapa leaflet debajo: un marcador por producto en el municipio de origen (usa `municipality.latitude/longitude` del payload, sin desplazar posiciones aunque coincidan; los productos del mismo punto se agrupan en un único marcador con contador que al hacer clic despliega un popup con la lista de productos internos para abrir cada uno) y un ícono de persona en la posición de la tienda (settings store, endpoint público `getStoreSettings`); `fitBounds` abarca todos los marcadores, al hacer hover sobre un producto dibuja una línea discontinua hasta la tienda y al hacer hover sobre la tienda dibuja las de todos los productos; clic en un marcador individual abre `ProvenanceRelationModal.vue` (producto + proveedor + organización + territorio). Clic en un producto del recuadro: si tiene ubicación hace `flyTo` al punto y abre el diálogo; si no, solo abre el diálogo (que para productos sin geolocalización muestra el proveedor/organización disponibles y la nota "Aún sin geolocalización registrada.", y para productos sin proveedor la nota "Aún no se ha vinculado un proveedor a este producto."). `ProvenanceDetailModal.vue` - **Admin CRUD** (`src/components/provenance/admin/`): `OrganizationsManagement.vue`, `SuppliersManagement.vue`, `GeographyManagement.vue` (tabs países/departamentos/municipios), `SupplierLinkDialog.vue` (vincula productos↔proveedores, abierto desde `ProductsManagement.vue`). Páginas en `src/pages/admin/{organizations,suppliers,geography}.vue`; rutas en `ADMIN_ROUTES` (`router/index.js`); ítems en `NavBar.vue` - **Endpoints provenance**: `/don_confiao/api/organizations/`, `/suppliers/`, `/countries/`, `/departments/`, `/municipalities/` (CRUD); vincular productos con `PATCH /don_confiao/api/products//` body `{"suppliers": [ids]}`; detalle de producto (con `suppliers`) via `GET /don_confiao/api/products//` - Los tests mockean `vis-network/standalone` (`vi.mock('vis-network/standalone', ...)`) o el propio `VisChart.vue`, y la API con `global.provide: { api }` diff --git a/src/components/provenance/ProvenanceMap.vue b/src/components/provenance/ProvenanceMap.vue index a11a4a0..1bb8184 100644 --- a/src/components/provenance/ProvenanceMap.vue +++ b/src/components/provenance/ProvenanceMap.vue @@ -138,6 +138,16 @@ const hasMarkers = computed(() => markers.value.length > 0) + const markerGroups = computed(() => { + const groups = new Map() + for (const markerData of markers.value) { + const key = markerData.position.join(',') + if (!groups.has(key)) groups.set(key, []) + groups.get(key).push(markerData) + } + return [...groups.values()].map(items => ({ position: items[0].position, items })) + }) + const personIcon = L.divIcon({ className: 'provenance-store-pin', html: '', @@ -158,6 +168,40 @@ }) } + function groupIcon (group) { + return L.divIcon({ + className: 'provenance-group-pin', + html: `${group.items.length}`, + iconSize: [38, 38], + iconAnchor: [19, 38], + }) + } + + function buildGroupPopup (items) { + const container = document.createElement('div') + container.className = 'provenance-popup-list' + items.forEach((item, index) => { + const row = document.createElement('div') + row.className = 'provenance-popup-item' + row.setAttribute('role', 'button') + row.setAttribute('data-test', `map-popup-item-${index}`) + const image = item.product.catalogue_images?.[0] + if (image) { + const img = document.createElement('img') + img.src = image + img.className = 'provenance-popup-img' + row.appendChild(img) + } + const name = document.createElement('span') + name.className = 'provenance-popup-name' + name.textContent = item.product.name + row.appendChild(name) + row.addEventListener('click', () => openDialog(item)) + container.appendChild(row) + }) + return container + } + function showLine (from, to) { const line = L.polyline([from, to], { color: '#26a69a', @@ -177,21 +221,33 @@ storeMarker = L.marker(storePosition.value, { icon: personIcon }).addTo(map) storeMarker.bindTooltip('Tienda') storeMarker.on('mouseover', () => { - productMarkers.forEach(item => showLine(item.marker.getLatLng(), storePosition.value)) + markers.value.forEach(markerData => showLine(markerData.position, storePosition.value)) }) storeMarker.on('mouseout', clearLines) } function addProductMarkers () { - markers.value.forEach(markerData => { - const marker = L.marker(markerData.position, { icon: productIcon(markerData) }).addTo(map) - marker.bindTooltip(markerData.product.name) - marker.on('click', () => openDialog(markerData)) + markerGroups.value.forEach(group => { + if (group.items.length === 1) { + const item = group.items[0] + const marker = L.marker(item.position, { icon: productIcon(item) }).addTo(map) + marker.bindTooltip(item.product.name) + marker.on('click', () => openDialog(item)) + marker.on('mouseover', () => { + if (storePosition.value) showLine(item.position, storePosition.value) + }) + marker.on('mouseout', clearLines) + productMarkers.push({ marker, data: item }) + return + } + const marker = L.marker(group.position, { icon: groupIcon(group) }).addTo(map) + marker.bindTooltip(`${group.items.length} productos en este punto`) + marker.bindPopup(buildGroupPopup(group.items)) marker.on('mouseover', () => { - if (storePosition.value) showLine(marker.getLatLng(), storePosition.value) + if (storePosition.value) group.items.forEach(item => showLine(item.position, storePosition.value)) }) marker.on('mouseout', clearLines) - productMarkers.push({ marker, data: markerData }) + productMarkers.push({ marker, data: group.items }) }) } @@ -302,6 +358,54 @@ background: transparent; } +.map-wrapper :deep(.provenance-group-pin) { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background: #26a69a; + border: 2px solid #ffffff; + border-radius: 50%; + color: #ffffff; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); + cursor: pointer; +} + +.map-wrapper :deep(.provenance-group-pin .provenance-group-count) { + font-weight: 700; + font-size: 14px; + line-height: 1; +} + +.map-wrapper :deep(.provenance-group-pin .mdi) { + font-size: 12px; + line-height: 1; + margin-top: 2px; +} + +.map-wrapper :deep(.provenance-popup-item) { + display: flex; + align-items: center; + gap: 8px; + padding: 4px 0; + cursor: pointer; +} + +.map-wrapper :deep(.provenance-popup-item:hover) { + text-decoration: underline; +} + +.map-wrapper :deep(.provenance-popup-img) { + width: 28px; + height: 28px; + border-radius: 4px; + object-fit: cover; +} + +.map-wrapper :deep(.provenance-popup-name) { + font-weight: 500; +} + .map-wrapper :deep(.leaflet-control-attribution) { font-size: 10px; } diff --git a/tests/unit/components/provenance/ProvenanceMap.spec.js b/tests/unit/components/provenance/ProvenanceMap.spec.js index 91e3608..d6bb2e4 100644 --- a/tests/unit/components/provenance/ProvenanceMap.spec.js +++ b/tests/unit/components/provenance/ProvenanceMap.spec.js @@ -15,6 +15,7 @@ const leaflet = vi.hoisted(() => { addTo: vi.fn(function () { return this }), on: vi.fn(), bindTooltip: vi.fn(function () { return this }), + bindPopup: vi.fn(function () { return this }), remove: vi.fn(), getLatLng: vi.fn(function () { return this.pos }), setLatLng: vi.fn(), @@ -85,6 +86,17 @@ const provenance = [ }, ] +const sameMuni = [ + { + product: { id: 1, name: 'Panela', catalogue_images: [] }, + suppliers: [{ supplier: { id: 5, name: 'A' }, municipality: { id: 7, name: 'LA MESA', latitude: '4.6310280', longitude: '-74.4615880' } }], + }, + { + product: { id: 2, name: 'Arroz', catalogue_images: [] }, + suppliers: [{ supplier: { id: 6, name: 'B' }, municipality: { id: 7, name: 'LA MESA', latitude: '4.6310280', longitude: '-74.4615880' } }], + }, +] + function mountMap (props = {}) { const api = { getStoreSettings: vi.fn().mockResolvedValue(settings) } const pinia = createPinia() @@ -202,26 +214,68 @@ describe('ProvenanceMap', () => { }) it('mantiene la posición exacta del municipio aunque varios productos coincidan', async () => { - const sameMuni = [ - { - product: { id: 1, name: 'Panela', catalogue_images: [] }, - suppliers: [{ supplier: { id: 5, name: 'A' }, municipality: { id: 7, name: 'LA MESA', latitude: '4.6310280', longitude: '-74.4615880' } }], - }, - { - product: { id: 2, name: 'Arroz', catalogue_images: [] }, - suppliers: [{ supplier: { id: 6, name: 'B' }, municipality: { id: 7, name: 'LA MESA', latitude: '4.6310280', longitude: '-74.4615880' } }], - }, - ] mountMap({ provenance: sameMuni }) await flushPromises() - const productPositions = leaflet.markers.slice(1).map(marker => marker.pos) - expect(productPositions).toHaveLength(2) - expect(productPositions[0]).toEqual([4.631028, -74.461588]) - expect(productPositions[1]).toEqual([4.631028, -74.461588]) + expect(leaflet.markers).toHaveLength(2) + expect(leaflet.markers[1].pos).toEqual([4.631028, -74.461588]) expect(leaflet.map.on).not.toHaveBeenCalledWith('zoomend', expect.anything()) }) + it('agrupa los productos del mismo punto en un marcador con contador', async () => { + mountMap({ provenance: sameMuni }) + await flushPromises() + + const groupIcon = leaflet.L.divIcon.mock.calls.find(args => args[0].className === 'provenance-group-pin') + expect(groupIcon).toBeDefined() + expect(groupIcon[0].html).toContain('2') + expect(groupIcon[0].html).toContain('mdi-package-variant') + const groupMarker = leaflet.markers[1] + expect(groupMarker.bindPopup).toHaveBeenCalled() + expect(groupMarker.bindTooltip.mock.calls[0][0]).toContain('2 productos') + }) + + it('al hacer clic en el marcador agrupado despliega los productos internos', async () => { + mountMap({ provenance: sameMuni }) + await flushPromises() + + const popupEl = leaflet.markers[1].bindPopup.mock.calls[0][0] + expect(popupEl.textContent).toContain('Panela') + expect(popupEl.textContent).toContain('Arroz') + }) + + it('al hacer clic en un producto del popup agrupado abre el diálogo', async () => { + mountMap({ provenance: sameMuni }) + await flushPromises() + + const popupEl = leaflet.markers[1].bindPopup.mock.calls[0][0] + const item = popupEl.querySelector('[data-test="map-popup-item-1"]') + item.dispatchEvent(new Event('click')) + await nextTick() + + expect(document.body.textContent).toContain('Arroz') + expect(document.body.textContent).toContain('B') + }) + + it('al pasar sobre la tienda dibuja una línea por cada producto agrupado', async () => { + mountMap({ provenance: sameMuni }) + await flushPromises() + + handlerOf(leaflet.markers[0], 'mouseover')() + + expect(leaflet.L.polyline).toHaveBeenCalledTimes(2) + }) + + it('al pasar sobre el marcador agrupado dibuja las líneas de sus productos', async () => { + mountMap({ provenance: sameMuni }) + await flushPromises() + + handlerOf(leaflet.markers[1], 'mouseover')() + + expect(leaflet.L.polyline).toHaveBeenCalledTimes(2) + expect(leaflet.polylines[0].points[0]).toEqual([4.631028, -74.461588]) + }) + it('muestra un recuadro con todos los productos, incluidos los sin geolocalización', async () => { const withNoGeo = [ {