Browse Source

GeoData: show row edit popup when clicking on geo pin (WIP)

pull/4140/head
flisowna 2 years ago
parent
commit
d1824a34c8
  1. 95
      packages/nc-gui/components/smartsheet/Map.vue

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

@ -3,10 +3,13 @@ import 'leaflet/dist/leaflet.css'
import L from 'leaflet'
import 'leaflet.markercluster'
import { IsGalleryInj, IsGridInj, IsMapInj, onMounted, provide, ref } from '#imports'
import type { Row as RowType } from '~/lib'
const meta = inject(MetaInj, ref())
provide(IsGalleryInj, ref(false))
provide(IsGridInj, ref(false))
provide(IsMapInj, ref(true))
const view = inject(ActiveViewInj, ref())
const reloadViewDataHook = inject(ReloadViewDataHookInj)
const { formattedData, loadMapData, loadMapMeta, mapMetaData, geoDataFieldColumn } = useMapViewStoreOrThrow()
@ -14,6 +17,13 @@ const markersClusterGroupRef = ref<L.MarkerClusterGroup>()
const mapContainerRef = ref<HTMLElement>()
const myMapRef = ref<L.Map>()
const route = useRoute()
const router = useRouter()
const expandedFormDlg = ref(false)
const expandedFormRow = ref<RowType>()
const expandedFormRowState = ref<Record<string, any>>()
console.log('meta', mapMetaData)
onBeforeMount(async () => {
@ -26,11 +36,55 @@ reloadViewDataHook?.on(async () => {
loadMapMeta()
})
function addMarker(lat: number, long: number, popupContent: string) {
const expandForm = (row: RowType) => {
const rowId = extractPkFromRow(row.row, meta.value!.columns!)
if (rowId) {
router.push({
query: {
...route.query,
rowId,
},
})
} else {
expandedFormRow.value = row
// expandedFormRowState.value = state
expandedFormDlg.value = true
}
}
const expandFormClick = async (row: RowType) => {
expandForm(row)
}
// openNewRecordFormHook?.on(async () => {
// const newRow = await addEmptyRow()
// expandForm(newRow)
// })
const expandedFormOnRowIdDlg = computed({
get() {
return !!route.query.rowId
},
set(val) {
if (!val)
router.push({
query: {
...route.query,
rowId: undefined,
},
})
},
})
function addMarker(lat: number, long: number, popupContent: string, row: RowType) {
if (markersClusterGroupRef.value == null) {
throw new Error('Map is null')
}
const newMarker = L.marker([lat, long])
const onMarkerClick = () => {
expandFormClick(row)
}
const newMarker = L.marker([lat, long]).on('click', onMarkerClick)
markersClusterGroupRef.value?.addLayer(newMarker)
if (newMarker) {
@ -66,7 +120,11 @@ watch([formattedData, mapMetaData, markersClusterGroupRef], () => {
const [lat, long] = primaryGeoDataValue.split(';').map(parseFloat)
addMarker(lat, long, popupContent)
addMarker(lat, long, popupContent, row)
// myMapRef.value?.off('contextmenu', function (e) {
// console.log('mapref in watch', e.latlng)
// })
})
})
@ -91,12 +149,12 @@ onMounted(async () => {
})
myMap.addLayer(markersClusterGroupRef.value)
myMap.on('zoomend', function (params) {
myMap.on('zoomend', function (_params) {
const bounds = myMap.getBounds()
const newS = bounds.getSouthWest()
console.log('bounds', newS)
console.log('params', params)
// console.log('bounds', newS)
// console.log('params', params)
if (localStorage != null) {
// TODO: use current mapView id as suffix to the local storage key,
@ -106,8 +164,8 @@ onMounted(async () => {
}
})
const bounds = myMap.getBounds()
console.log(bounds)
// const bounds = myMap.getBounds()
// console.log(bounds)
})
</script>
@ -115,6 +173,27 @@ onMounted(async () => {
<div class="flex flex-col h-full w-full no-underline">
<div id="mapContainer" ref="mapContainerRef"></div>
</div>
<Suspense>
<LazySmartsheetExpandedForm
v-if="expandedFormRow && expandedFormDlg"
v-model="expandedFormDlg"
:row="expandedFormRow"
:meta="meta"
:view="view"
/>
</Suspense>
<Suspense>
<LazySmartsheetExpandedForm
v-if="expandedFormOnRowIdDlg"
:key="route.query.rowId"
v-model="expandedFormOnRowIdDlg"
:row="{ row: {}, oldRow: {}, rowMeta: {} }"
:meta="meta"
:row-id="route.query.rowId"
:view="view"
/>
</Suspense>
</template>
<style scoped lang="scss">

Loading…
Cancel
Save