Browse Source

geodata: setting markers (still in hacky way) in map

pull/4140/head
flisowna 2 years ago
parent
commit
5b28c5eb78
  1. 116
      packages/nc-gui/components/smartsheet/Map.vue
  2. 63
      packages/nc-gui/composables/useMapViewDataStore.ts

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

@ -3,49 +3,44 @@ import 'leaflet/dist/leaflet.css'
import * as L from 'leaflet' import * as L from 'leaflet'
// import { ViewTypes } from '~~/../nocodb-sdk/build/main' // import { ViewTypes } from '~~/../nocodb-sdk/build/main'
// import { ViewTypes } from 'nocodb-sdk' // import { ViewTypes } from 'nocodb-sdk'
import { IsFormInj, IsGalleryInj, IsGridInj, IsMapInj, ReadonlyInj, onMounted, provide, ref, useUIPermission } from '#imports' // import { IsFormInj, IsGalleryInj, IsGridInj, IsMapInj, ReadonlyInj, onMounted, provide, ref, useUIPermission } from '#imports'
import { IsGalleryInj, IsGridInj, IsMapInj, onMounted, provide, ref } from '#imports'
import type { Row } from '~/lib'
const { isUIAllowed } = useUIPermission() // const { isUIAllowed } = useUIPermission()
// provide(IsFormInj, ref(false)) // provide(IsFormInj, ref(false))
provide(IsGalleryInj, ref(false)) provide(IsGalleryInj, ref(false))
provide(IsGridInj, ref(false)) provide(IsGridInj, ref(false))
provide(IsMapInj, ref(true)) provide(IsMapInj, ref(true))
provide(ReadonlyInj, !isUIAllowed('xcDatatableEditable')) // provide(ReadonlyInj, !isUIAllowed('xcDatatableEditable'))
// const meta = inject(MetaInj, ref()) // const meta = inject(MetaInj, ref())
// const view = inject(ActiveViewInj, ref()) // const view = inject(ActiveViewInj, ref())
const view = inject(ActiveViewInj, ref()) // const view = inject(ActiveViewInj, ref())
const meta = inject(MetaInj, ref()) // const meta = inject(MetaInj, ref())
const reloadViewDataHook = inject(ReloadViewDataHookInj) const reloadViewDataHook = inject(ReloadViewDataHookInj)
// const reloadViewMetaHook = inject(ReloadViewMetaHookInj) // const reloadViewMetaHook = inject(ReloadViewMetaHookInj)
const { formattedData, loadMapData, loadMapMeta, mapMetaData } = useMapViewStoreOrThrow() const { formattedData, loadMapData, loadMapMeta, mapMetaData, geoDataFieldColumn } = useMapViewStoreOrThrow()
// const {
// const { loadData, formattedData: data } = useViewData(meta, view) // showSystemFields,
// const { sharedView, sorts, nestedFilters } = useSharedView() // // sortedAndFilteredFields,
// fields,
// filteredFieldList,
const { // // filterQuery,
showSystemFields, // showAll,
// sortedAndFilteredFields, // // hideAll,
fields, // // saveOrUpdate,
filteredFieldList, // // metaColumnById,
// filterQuery, // } = useViewColumns(view, meta)
showAll,
// hideAll, // console.log('fields.value', fields.value)
// saveOrUpdate, // console.log('showSystemFields.value', showSystemFields.value)
// metaColumnById, // console.log('filteredFieldList.value', filteredFieldList.value)
} = useViewColumns(view, meta) // console.log('showAll.value', showAll.value)
// console.log('fields.value', fields.value)
console.log('fields.value', fields.value)
console.log('showSystemFields.value', showSystemFields.value)
console.log('filteredFieldList.value', filteredFieldList.value)
console.log('showAll.value', showAll.value)
console.log('fields.value', fields.value)
const markerRef = ref() const markerRef = ref()
const myMapRef = ref() const myMapRef = ref()
@ -64,9 +59,11 @@ const markersRef = ref<L.MarkerClusterGroup | undefined>()
// const { isUIAllowed } = useUIPermission() // const { isUIAllowed } = useUIPermission()
onBeforeMount(async () => { onBeforeMount(async () => {
await loadMapData() // console.log('onBeforeMount')
await loadMapMeta() await loadMapMeta()
console.log('on mapview mapMetaData', mapMetaData) await loadMapData()
// console.log('IN BEFOREMOUNT: geoDataFieldColumn.value.title', geoDataFieldColumn?.value?.title)
// console.log('on mapview formatted', formattedData)
// const geodata = data.value[0].row.geo.split(';') // const geodata = data.value[0].row.geo.split(';')
}) })
@ -82,25 +79,48 @@ const { fk_geo_data_col_id } = mapMetaData.value
console.log('fk_geo_data_col_id', fk_geo_data_col_id) console.log('fk_geo_data_col_id', fk_geo_data_col_id)
watch(formattedData, () => { watch([formattedData, mapMetaData], () => {
// console.log('WATCH CALL FOR formattedData')
markersRef.value?.clearLayers() markersRef.value?.clearLayers()
console.log('mapMetaData', mapMetaData?.value?.fk_geo_data_col_id) // formattedData.get()
// const rows = Array.from(formattedData.value.values())
// console.log('rows', rows)
// console.log('IN WATCHER: geoDataFieldColumn.value', geoDataFieldColumn?.value)
formattedData.value?.forEach((row) => { formattedData.value?.forEach((row) => {
console.log('fk_geo_data_col_id', fk_geo_data_col_id)
// const [lat, long] = // const [lat, long] =
console.log('meta', meta?.value?.columns) // console.log('meta', meta?.value?.columns)
console.log('row', row) console.log('row', row)
if (row?.geonew == null) return
const [lat, long] = row?.geonew.split(';').map(parseFloat) const primaryGeoDataColumnTitle = geoDataFieldColumn.value?.title
if (lat == null || long == null) {
return if (primaryGeoDataColumnTitle == null) {
throw new Error('Cannot find primary geo data column title')
} }
console.log('lat', lat)
console.log('primaryGeoDataColumnTitle', primaryGeoDataColumnTitle)
const primaryGeoDataValue = row[primaryGeoDataColumnTitle]
console.log('primaryGeoDataValue', primaryGeoDataValue)
const [lat, long] = primaryGeoDataValue.split(';')
console.log('lat, long', lat, long)
addMarker(lat, long) addMarker(lat, long)
const selected = row?.rowMeta?.selected // if (geoDataFieldColumn?.value?.title === null) return
console.log(selected)
// const [lat, long] = row?.split(';').map(parseFloat)
// if (lat == null || long == null) {
// return
// }
// console.log('lat', lat)
// addMarker(lat, long)
// const selected = row?.rowMeta?.selected
// console.log(selected)
}) })
}) })
@ -109,9 +129,8 @@ reloadViewDataHook?.on(async () => {
}) })
function addMarker(lat: number, long: number) { function addMarker(lat: number, long: number) {
// markersRef.value?.clearLayers()
const markerNew = markerRef?.value?.([lat, long]) const markerNew = markerRef?.value?.([lat, long])
console.log(markersRef.value) // console.log(markersRef.value)
markersRef?.value?.addLayer(markerNew) markersRef?.value?.addLayer(markerNew)
myMapRef?.value?.addLayer(markersRef.value) myMapRef?.value?.addLayer(markersRef.value)
@ -123,13 +142,15 @@ onMounted(async () => {
const myMap = map('map').setView([51.505, -0.09], 13) const myMap = map('map').setView([51.505, -0.09], 13)
markerRef.value = marker markerRef.value = marker
myMapRef.value = myMap myMapRef.value = myMap
console.log('markerClusterGroup', L.markerClusterGroup) // console.log('markerClusterGroup', L.markerClusterGroup)
markersRef.value = L.markerClusterGroup() markersRef.value = L.markerClusterGroup()
tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19, maxZoom: 19,
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>', attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
}).addTo(myMap) }).addTo(myMap)
// addMarker(52, 0)
}) })
// const geodata = data.value[0].row.geo.split(';') // const geodata = data.value[0].row.geo.split(';')
@ -137,7 +158,8 @@ onMounted(async () => {
<template> <template>
<div class="flex flex-col h-full w-full"> <div class="flex flex-col h-full w-full">
{{ JSON.stringify(mapMetaData) }} {{ JSON.stringify(formattedData) }}
{{ JSON.stringify(geoDataFieldColumn?.title) }}
<!-- {{ JSON.stringify(selected) }} --> <!-- {{ JSON.stringify(selected) }} -->
<!-- {{ JSON.stringify(meta?.columns) }} --> <!-- {{ JSON.stringify(meta?.columns) }} -->
<!-- <div class="flex m-4 gap-4"> <!-- <div class="flex m-4 gap-4">

63
packages/nc-gui/composables/useMapViewDataStore.ts

@ -1,5 +1,5 @@
import type { ComputedRef, Ref } from 'vue' import type { ComputedRef, Ref } from 'vue'
import type { MapType, TableType, ViewType } from 'nocodb-sdk' import type { ColumnType, MapType, TableType, ViewType } from 'nocodb-sdk'
import { ref, useInjectionState } from '#imports' import { ref, useInjectionState } from '#imports'
import type { Row } from '~/lib' import type { Row } from '~/lib'
@ -8,10 +8,10 @@ const [useProvideMapViewStore, useMapViewStore] = useInjectionState(
meta: Ref<TableType | MapType | undefined>, meta: Ref<TableType | MapType | undefined>,
viewMeta: Ref<ViewType | MapType | undefined> | ComputedRef<(ViewType & { id: string }) | undefined>, viewMeta: Ref<ViewType | MapType | undefined> | ComputedRef<(ViewType & { id: string }) | undefined>,
) => { ) => {
const formattedData = ref<Row[]>() const formattedData = ref<Row[]>([])
// const { api } = useApi() const { api } = useApi()
// const { project } = useProject() const { project } = useProject()
// const { $e, $api } = useNuxtApp() // const { $e, $api } = useNuxtApp()
const { $api } = useNuxtApp() const { $api } = useNuxtApp()
@ -19,43 +19,59 @@ const [useProvideMapViewStore, useMapViewStore] = useInjectionState(
// const geoDataField = ref<string>('') // const geoDataField = ref<string>('')
// const geoDataFieldColumn = ref<ColumnType | undefined>() const geoDataFieldColumn = ref<ColumnType | undefined>()
async function loadMapMeta() { async function loadMapMeta() {
if (!viewMeta?.value?.id || !meta?.value?.columns) return if (!viewMeta?.value?.id || !meta?.value?.columns) return
mapMetaData.value = await $api.dbView.mapRead(viewMeta.value.id) mapMetaData.value = await $api.dbView.mapRead(viewMeta.value.id)
geoDataFieldColumn.value =
(meta.value.columns as ColumnType[]).filter((f) => f.id === mapMetaData.value.fk_geo_data_col_id)[0] || {}
} }
async function loadMapData() { async function loadMapData() {
// if (!viewMeta?.value?.id || !meta?.value?.columns) return if (!viewMeta?.value?.id || !meta?.value?.columns) return
// formattedData.value = []
const res = await api.dbViewRow.list('noco', project.value.id!, meta.value!.id!, viewMeta.value!.id!)
console.log('in useMapViewDataStore - res.list: ', res.list)
formattedData.value = res.list
// formattedData.value = [] // for (const data of res) {
// const key = data.key
// formattedData.value.set(key, data.value.list)
// }
// const res = await api.dbViewRow.list('noco', project.value.id!, meta.value!.id!, viewMeta.value!.id!) // // geoDataFieldColumn.value =
// // (meta.value.columns as ColumnType[]).filter((f) => f.id === mapMetaData.value.fk_geo_data_col_id)[0] || {}
// // geoDataFieldColumn.value = // geoDataField.value = geoDataFieldColumn!.value!.title!
// // (meta.value.columns as ColumnType[]).filter((f) => f.id === mapMetaData.value.fk_geo_data_col_id)[0] || {}
// geoDataField.value = geoDataFieldColumn!.value!.title! // // const { fk_geo_data_col_id, meta: geo_meta } = mapMetaData.value
// // const { fk_geo_data_col_id, meta: geo_meta } = mapMetaData.value // // const geoMetaObj: any.value = geo_meta ? JSON.parse(geo_meta as string) : {}
// // const geoMetaObj: any.value = geo_meta ? JSON.parse(geo_meta as string) : {} // // console.log('column geodata', stackMetaObj.value[fk_geo_data_col_id])
// // if ((!project?.value?.id || !meta.value?.id || !viewMeta?.value?.id) && !isPublic.value) return
// // console.log('column geodata', stackMetaObj.value[fk_geo_data_col_id]) // // reset formattedData & countByStack to avoid storing previous data after changing grouping field
// // if ((!project?.value?.id || !meta.value?.id || !viewMeta?.value?.id) && !isPublic.value) return
// // reset formattedData & countByStack to avoid storing previous data after changing grouping field // // alert('in loadMapData')
// // debugger
// // alert('in loadMapData') // console.log('res in mapviewdatastore', res)
// // debugger
// console.log('res in mapviewdatastore', res) // for (const data of res.list) {
// formattedData.value = data.value
// formattedData.value = res.list
// }
// // for (const data of res.list) { // for (const data of res) {
// // formattedData.value = data.value // const key = data.key
// // } // formattedData.value.set(key, formatData(data.value.list))
// formattedData.value = res.list // }
} }
return { return {
@ -63,6 +79,7 @@ const [useProvideMapViewStore, useMapViewStore] = useInjectionState(
loadMapData, loadMapData,
loadMapMeta, loadMapMeta,
mapMetaData, mapMetaData,
geoDataFieldColumn,
} }
}, },
) )

Loading…
Cancel
Save