From bae07a69832c124378fc6da124fc60a8f36942e4 Mon Sep 17 00:00:00 2001 From: latin-panda <66472237+latin-panda@users.noreply.github.com> Date: Mon, 29 Dec 2025 22:49:56 +0700 Subject: [PATCH 01/16] Advanced panel component --- .../src/components/common/IconSVG.vue | 2 + .../common/map/MapAdvancedPanel.vue | 275 ++++++++++++++++++ .../src/components/common/map/MapBlock.vue | 21 +- .../components/common/map/MapStatusBar.vue | 20 +- .../src/components/common/map/useMapBlock.ts | 8 +- 5 files changed, 318 insertions(+), 8 deletions(-) create mode 100644 packages/web-forms/src/components/common/map/MapAdvancedPanel.vue diff --git a/packages/web-forms/src/components/common/IconSVG.vue b/packages/web-forms/src/components/common/IconSVG.vue index c44935775..1d4fe26ab 100644 --- a/packages/web-forms/src/components/common/IconSVG.vue +++ b/packages/web-forms/src/components/common/IconSVG.vue @@ -12,6 +12,7 @@ import { mdiChevronDown, mdiChevronUp, mdiClose, + mdiCogOutline, mdiContentSave, mdiCrosshairsGps, mdiDotsVertical, @@ -48,6 +49,7 @@ const iconMap: Record = { mdiChevronDown, mdiChevronUp, mdiClose, + mdiCogOutline, mdiContentSave, mdiCrosshairsGps, mdiDotsVertical, diff --git a/packages/web-forms/src/components/common/map/MapAdvancedPanel.vue b/packages/web-forms/src/components/common/map/MapAdvancedPanel.vue new file mode 100644 index 000000000..d60f25e0d --- /dev/null +++ b/packages/web-forms/src/components/common/map/MapAdvancedPanel.vue @@ -0,0 +1,275 @@ + + + + + + + diff --git a/packages/web-forms/src/components/common/map/MapBlock.vue b/packages/web-forms/src/components/common/map/MapBlock.vue index dfdadf252..f42cc21da 100644 --- a/packages/web-forms/src/components/common/map/MapBlock.vue +++ b/packages/web-forms/src/components/common/map/MapBlock.vue @@ -6,6 +6,7 @@ */ import IconSVG from '@/components/common/IconSVG.vue'; import type { Mode } from '@/components/common/map/getModeConfig.ts'; +import MapAdvancedPanel from '@/components/common/map/MapAdvancedPanel.vue'; import MapConfirm from '@/components/common/map/MapConfirm.vue'; import MapControls from '@/components/common/map/MapControls.vue'; import MapProperties from '@/components/common/map/MapProperties.vue'; @@ -32,6 +33,7 @@ const props = defineProps(); const emit = defineEmits(['save']); const mapElement = ref(); const isFullScreen = ref(false); +const isAdvancedPanelOpen = ref(false); const confirmDeleteAction = ref(false); const selectedVertex = ref(); const showErrorStyle = inject>( @@ -43,7 +45,12 @@ const mapHandler = useMapBlock( { mode: props.mode, drawFeatureType: props.drawFeatureType }, { onFeaturePlacement: () => emitSavedFeature(), - onVertexSelect: (vertex) => (selectedVertex.value = vertex), + onVertexSelect: (vertex) => { + selectedVertex.value = vertex; + if (!selectedVertex.value?.length) { + isAdvancedPanelOpen.value = false; + } + }, } ); @@ -172,19 +179,23 @@ const undoLastChange = () => { + + (); -const emit = defineEmits(['view-details', 'save', 'discard']); +const emit = defineEmits(['discard', 'open-advanced-panel', 'save', 'view-details']); const LINE_ICON = 'mdiVectorPolyline'; const POLYGON_ICON = 'mdiVectorPolygon'; @@ -138,6 +139,11 @@ const savedStatus = computed(() => { View details +
@@ -157,6 +163,8 @@ const savedStatus = computed(() => { diff --git a/packages/web-forms/src/components/common/map/useMapBlock.ts b/packages/web-forms/src/components/common/map/useMapBlock.ts index 67f6d2cc1..8c24df4f2 100644 --- a/packages/web-forms/src/components/common/map/useMapBlock.ts +++ b/packages/web-forms/src/components/common/map/useMapBlock.ts @@ -64,7 +64,7 @@ interface MapBlockConfig { interface MapBlockEvents { onFeaturePlacement: () => void; - onVertexSelect: (vertex: Coordinate) => void; + onVertexSelect: (vertex: Coordinate | undefined) => void; } export function useMapBlock(config: MapBlockConfig, events: MapBlockEvents) { @@ -206,6 +206,7 @@ export function useMapBlock(config: MapBlockConfig, events: MapBlockEvents) { const updateAndSaveFeature = (feature: Feature) => { feature.set(ODK_VALUE_PROPERTY, formatODKValue(feature)); mapFeatures?.saveFeature(feature); + unselectFeature(); }; const handlePointPlacement = (feature: Feature) => { @@ -339,7 +340,10 @@ export function useMapBlock(config: MapBlockConfig, events: MapBlockEvents) { clearMap(); }; - const unselectFeature = () => mapFeatures?.selectFeature(undefined); + const unselectFeature = () => { + mapFeatures?.selectFeature(undefined); + events.onVertexSelect(undefined); + }; const clearSavedFeature = () => mapFeatures?.saveFeature(undefined); From 74f9517c30dc7a19f926d2d250c97c40158f78d5 Mon Sep 17 00:00:00 2001 From: latin-panda <66472237+latin-panda@users.noreply.github.com> Date: Tue, 30 Dec 2025 01:33:03 +0700 Subject: [PATCH 02/16] file parsing to coords array --- .../common/map/MapAdvancedPanel.vue | 103 +------- .../src/components/common/map/MapBlock.vue | 18 +- .../{MapConfirm.vue => MapConfirmDialog.vue} | 0 .../common/map/MapUpdateCoordsDialog.vue | 230 ++++++++++++++++++ .../map/createFeatureCollectionAndProps.ts | 4 +- 5 files changed, 254 insertions(+), 101 deletions(-) rename packages/web-forms/src/components/common/map/{MapConfirm.vue => MapConfirmDialog.vue} (100%) create mode 100644 packages/web-forms/src/components/common/map/MapUpdateCoordsDialog.vue diff --git a/packages/web-forms/src/components/common/map/MapAdvancedPanel.vue b/packages/web-forms/src/components/common/map/MapAdvancedPanel.vue index d60f25e0d..0e946f3c7 100644 --- a/packages/web-forms/src/components/common/map/MapAdvancedPanel.vue +++ b/packages/web-forms/src/components/common/map/MapAdvancedPanel.vue @@ -1,9 +1,6 @@ + + diff --git a/packages/web-forms/src/components/common/map/createFeatureCollectionAndProps.ts b/packages/web-forms/src/components/common/map/createFeatureCollectionAndProps.ts index 8c2fb5e88..12ac49714 100644 --- a/packages/web-forms/src/components/common/map/createFeatureCollectionAndProps.ts +++ b/packages/web-forms/src/components/common/map/createFeatureCollectionAndProps.ts @@ -25,7 +25,9 @@ export interface Feature { properties: Record; } -const getGeoJSONCoordinates = (geometry: string): [Coordinates, ...Coordinates[]] | undefined => { +export const getGeoJSONCoordinates = ( + geometry: string +): [Coordinates, ...Coordinates[]] | undefined => { const coordinates: Coordinates[] = []; for (const coord of geometry.split(';')) { const [lat, lon] = coord.trim().split(/\s+/).map(Number); From db94e624a90df1748884af65d723b613fa04d010 Mon Sep 17 00:00:00 2001 From: latin-panda <66472237+latin-panda@users.noreply.github.com> Date: Tue, 30 Dec 2025 01:35:52 +0700 Subject: [PATCH 03/16] updates event name --- .../components/common/map/MapAdvancedPanel.vue | 4 ++-- .../src/components/common/map/MapBlock.vue | 15 ++++++++++++--- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/packages/web-forms/src/components/common/map/MapAdvancedPanel.vue b/packages/web-forms/src/components/common/map/MapAdvancedPanel.vue index 0e946f3c7..bd4c9023a 100644 --- a/packages/web-forms/src/components/common/map/MapAdvancedPanel.vue +++ b/packages/web-forms/src/components/common/map/MapAdvancedPanel.vue @@ -9,7 +9,7 @@ const props = defineProps<{ selectedVertex: Coordinate | undefined; }>(); -const emit = defineEmits(['open-paste-dialog', 'update-vertex']); +const emit = defineEmits(['open-paste-dialog', 'save']); const accuracy = ref(); const latitude = ref(); @@ -52,7 +52,7 @@ const updateVertex = () => { newVertex.push(accuracy.value); } - emit('update-vertex', fromLonLat(newVertex)); + emit('save', fromLonLat(newVertex)); }; diff --git a/packages/web-forms/src/components/common/map/MapBlock.vue b/packages/web-forms/src/components/common/map/MapBlock.vue index 7a0f7866c..caa6c64c3 100644 --- a/packages/web-forms/src/components/common/map/MapBlock.vue +++ b/packages/web-forms/src/components/common/map/MapBlock.vue @@ -141,7 +141,11 @@ const undoLastChange = () => { emitSavedFeature(); }; -const updateCoords = () => { +const updateFeatureCoords = () => { + // todo +}; + +const updateVertexCoords = () => { // todo }; @@ -200,7 +204,12 @@ const updateCoords = () => { @open-advanced-panel="isAdvancedPanelOpen = !isAdvancedPanelOpen" /> - + { From 6df261979cee92ae02e91a5997124bfb1dcc0d33 Mon Sep 17 00:00:00 2001 From: latin-panda <66472237+latin-panda@users.noreply.github.com> Date: Wed, 31 Dec 2025 01:55:53 +0700 Subject: [PATCH 04/16] save new value and validations --- .../common/map/MapAdvancedPanel.vue | 28 ++++---- .../src/components/common/map/MapBlock.vue | 10 +-- .../common/map/MapUpdateCoordsDialog.vue | 53 +++++++++++++-- .../map/createFeatureCollectionAndProps.ts | 15 ++++- .../src/components/common/map/map-helpers.ts | 41 +++++++++++- .../src/components/common/map/useMapBlock.ts | 64 ++++++++++++++++--- .../common/map/useMapViewControls.ts | 10 +-- .../components/common/map/vertex-geometry.ts | 15 +++++ 8 files changed, 192 insertions(+), 44 deletions(-) diff --git a/packages/web-forms/src/components/common/map/MapAdvancedPanel.vue b/packages/web-forms/src/components/common/map/MapAdvancedPanel.vue index bd4c9023a..958dfae39 100644 --- a/packages/web-forms/src/components/common/map/MapAdvancedPanel.vue +++ b/packages/web-forms/src/components/common/map/MapAdvancedPanel.vue @@ -1,5 +1,6 @@ diff --git a/packages/web-forms/src/components/common/map/MapBlock.vue b/packages/web-forms/src/components/common/map/MapBlock.vue index caa6c64c3..8b7896284 100644 --- a/packages/web-forms/src/components/common/map/MapBlock.vue +++ b/packages/web-forms/src/components/common/map/MapBlock.vue @@ -141,12 +141,14 @@ const undoLastChange = () => { emitSavedFeature(); }; -const updateFeatureCoords = () => { - // todo +const updateFeatureCoords = (newCoords: Coordinate[] & Coordinate[][]) => { + mapHandler.updateFeatureCoordinates(newCoords); + emitSavedFeature(); }; -const updateVertexCoords = () => { - // todo +const updateVertexCoords = (newCoords: Coordinate) => { + mapHandler.updateVertexCoords(newCoords); + emitSavedFeature(); }; diff --git a/packages/web-forms/src/components/common/map/MapUpdateCoordsDialog.vue b/packages/web-forms/src/components/common/map/MapUpdateCoordsDialog.vue index 3729b0470..b7c3bed01 100644 --- a/packages/web-forms/src/components/common/map/MapUpdateCoordsDialog.vue +++ b/packages/web-forms/src/components/common/map/MapUpdateCoordsDialog.vue @@ -1,7 +1,12 @@ @@ -191,6 +211,7 @@ const updateVertexCoords = (newCoords: Coordinate) => {
{ (); const emit = defineEmits(['discard', 'open-advanced-panel', 'save', 'view-details']); @@ -129,21 +130,23 @@ const savedStatus = computed(() => { {{ savedStatus.message }} - - - +
+ + + +
@@ -207,6 +210,11 @@ const savedStatus = computed(() => { height: 20px; } +.map-status-buttons { + display: flex; + gap: var(--odk-map-controls-spacing); +} + @media screen and (max-width: #{pf.$sm}) { .advanced-button span { display: none; diff --git a/packages/web-forms/src/components/common/map/MapUpdateCoordsDialog.vue b/packages/web-forms/src/components/common/map/MapUpdateCoordsDialog.vue index b7c3bed01..bd4e2e72e 100644 --- a/packages/web-forms/src/components/common/map/MapUpdateCoordsDialog.vue +++ b/packages/web-forms/src/components/common/map/MapUpdateCoordsDialog.vue @@ -1,11 +1,11 @@ @@ -145,7 +150,7 @@ watch(pasteValue, (newVal) => {
- +
@@ -153,7 +158,7 @@ watch(pasteValue, (newVal) => { File uploaded -