Browse Source

geodata: expandedForm on marker click

pull/4723/head
flisowna 2 years ago
parent
commit
187a2bf3a0
  1. 1
      packages/nc-gui/components/smartsheet/Gallery.vue
  2. 61
      packages/nc-gui/components/smartsheet/Map.vue
  3. 4
      packages/nocodb/src/lib/migrations/XcMigrationSourcev2.ts
  4. 0
      packages/nocodb/src/lib/migrations/v2/nc_023_map_view.ts
  5. 0
      packages/nocodb/src/lib/migrations/v2/nc_024_map_view_column.ts

1
packages/nc-gui/components/smartsheet/Gallery.vue

@ -105,6 +105,7 @@ const expandForm = (row: RowType, state?: Record<string, any>) => {
expandedFormRow.value = row
expandedFormRowState.value = state
expandedFormDlg.value = true
console.log(state)
}
}

61
packages/nc-gui/components/smartsheet/Map.vue

@ -25,14 +25,14 @@ const expandedFormDlg = ref(false)
const expandedFormRow = ref<RowType>()
const expandedFormRowState = ref<Record<string, any>>()
console.log('meta', mapMetaData)
const expandForm = (row: RowType, state?: Record<string, any>) => {
console.log('expandForm')
const rowId = extractPkFromRow(row.row, meta.value!.columns!)
// debugger
if (rowId) {
console.log('if')
router.push({
query: {
...route.query,
@ -40,12 +40,28 @@ const expandForm = (row: RowType, state?: Record<string, any>) => {
},
})
} else {
console.log('else')
expandedFormRow.value = row
expandedFormRowState.value = state
expandedFormDlg.value = true
}
}
const expandedFormOnRowIdDlg = computed({
get() {
return !!route.query.rowId
},
set(val) {
if (!val)
router.push({
query: {
...route.query,
rowId: undefined,
},
})
},
})
onBeforeMount(async () => {
await loadMapMeta()
await loadMapData()
@ -62,6 +78,7 @@ function addMarker(lat: number, long: number, row: RowType) {
}
const newMarker = L.marker([lat, long]).on('click', () => {
expandForm(row)
console.log('click on marker')
})
markersClusterGroupRef.value?.addLayer(newMarker)
@ -109,8 +126,7 @@ watch([formattedData, mapMetaData, markersClusterGroupRef], () => {
onMounted(async () => {
// TODO: also here add/use viewId suffix approach (see comment below)
const initialZoomLevel = parseInt(localStorage.getItem(`mapView.zoom${mapMetaData.value.fk_view_id}`) || '10')
// const initialBounds = parseInt(localStorage.getItem(`mapView.bounds${mapMetaData.value.fk_view_id}`) || '10')
// myMap.setZoom(initialZoomLevel)
// const initialBounds = parseInt(localStorage?.getItem(`mapView.bounds${mapMetaData.value.fk_view_id}`))
const myMap = L.map(mapContainerRef.value!).setView([51.505, -0.09], initialZoomLevel)
myMapRef.value = myMap
@ -128,12 +144,6 @@ onMounted(async () => {
myMap.addLayer(markersClusterGroupRef.value)
myMap.on('zoomend', function (params) {
const bounds = myMap.getBounds()
const newS = bounds.getSouthWest()
console.log('bounds', newS)
console.log('params', params)
if (localStorage != null) {
// TODO: use current mapView id as suffix to the local storage key,
// so there are no clashes when there are multiple map views, e.g.:
@ -141,34 +151,35 @@ onMounted(async () => {
localStorage.setItem(`mapView.zoom${mapMetaData.value.fk_view_id}`, myMap.getZoom().toString())
}
})
const bounds = myMap.getBounds()
console.log(bounds)
myMap.on('moveend', function () {
const bounds = myMap.getBounds()
const newSouthWest = bounds.getSouthWest
const newNorthEast = bounds.getNorthEast
console.log('bounds', bounds)
console.log('boundsSW', newSouthWest)
console.log('boundsNE', newNorthEast)
if (localStorage != null) {
localStorage.setItem(`mapView.bounds${mapMetaData.value.fk_view_id}`, myMap.getBounds().toString())
}
})
})
</script>
<template>
<!-- {{ JSON.stringify(expandedFormDlg) }} -->
expandedFormRow: {{ JSON.stringify(expandedFormRow) }}
<br />
expandedFormRowState: {{ JSON.stringify(expandedFormRowState) }}
<!-- {{ JSON.stringify(meta) }} -->
<!-- {{ JSON.stringify(view) }} -->
<div class="flex flex-col h-full w-full no-underline">
<div id="mapContainer" ref="mapContainerRef"></div>
</div>
<div :style="{ width: '200px', height: '200px', backgroundColor: 'red' }" class="FOO_BAR"></div>
<Suspense>
<LazySmartsheetExpandedForm
v-model="expandedFormDlg"
:row="expandedFormRow"
:state="expandedFormRowState"
v-if="expandedFormOnRowIdDlg"
:key="route.query.rowId"
v-model="expandedFormOnRowIdDlg"
:row="{ row: {}, oldRow: {}, rowMeta: {} }"
:meta="meta"
:row-id="route.query.rowId"
:view="view"
/>
<template #fallback> Loading... </template>
</Suspense>
</template>

4
packages/nocodb/src/lib/migrations/XcMigrationSourcev2.ts

@ -9,8 +9,8 @@ import * as nc_018_add_meta_in_view from './v2/nc_018_add_meta_in_view';
import * as nc_019_add_meta_in_meta_tables from './v2/nc_019_add_meta_in_meta_tables';
import * as nc_020_kanban_view from './v2/nc_020_kanban_view';
import * as nc_021_add_fields_in_token from './v2/nc_021_add_fields_in_token';
import * as nc_023_map_view from './v2/nc_021_map_view';
import * as nc_024_map_view_column from './v2/nc_022_map_view_column';
import * as nc_023_map_view from './v2/nc_023_map_view';
import * as nc_024_map_view_column from './v2/nc_024_map_view_column';

0
packages/nocodb/src/lib/migrations/v2/nc_021_map_view.ts → packages/nocodb/src/lib/migrations/v2/nc_023_map_view.ts

0
packages/nocodb/src/lib/migrations/v2/nc_022_map_view_column.ts → packages/nocodb/src/lib/migrations/v2/nc_024_map_view_column.ts

Loading…
Cancel
Save