github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

geodata: create new row on right-click/tap on map (pass data into expand form dialog - hacky code / needs refactoring

pull/4723/head
flisowna 2 years ago
parent
228211c2b1
commit
e28e65529d
4 changed files with 167 additions and 6 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 45
      packages/nc-gui/components/smartsheet/Map.vue
  2. 13
      packages/nc-gui/components/smartsheet/expanded-form/index.vue
  3. 114
      packages/nc-gui/package-lock.json
  4. 1
      packages/nc-gui/package.json

45
packages/nc-gui/components/smartsheet/Map.vue
Unescape View File

@ -3,6 +3,8 @@ import 'leaflet/dist/leaflet.css'
import L, { LatLng } from 'leaflet'
import 'leaflet.markercluster'
import { ViewTypes } from 'nocodb-sdk'
// import contextmenu from 'vue3-contextmenu'
// import 'vue3-contextmenu/dist/vue3-contextmenu.css'
import { IsGalleryInj, IsGridInj, IsMapInj, OpenNewRecordFormHookInj, onMounted, provide, ref } from '#imports'
import type { Row as RowType } from '~/lib'
@ -28,6 +30,7 @@ const openNewRecordFormHook = inject(OpenNewRecordFormHookInj, createEventHook()
const expandedFormDlg = ref(false)
const expandedFormRow = ref<RowType>()
const expandedFormRowState = ref<Record<string, any>>()
const expandedFormClickedLatLongForNewRow = ref<[number, number]>()
const fallBackCenterLocation = {
lat: 51,
@ -39,9 +42,11 @@ const getMapZoomLocalStorageKey = (viewId: string) => {
}
const getMapCenterLocalStorageKey = (viewId: string) => `mapView.center.${viewId}`
const expandForm = (row: RowType, state?: Record<string, any>) => {
const expandForm = (row: RowType, state?: Record<string, any>, clickedLatLongForNewRow?: [number, number]) => {
const rowId = extractPkFromRow(row.row, meta.value!.columns!)
console.log('state in expandForm', state)
console.log('row in expandForm', row)
console.log('clickedLatLongForNewRow', clickedLatLongForNewRow)
if (rowId) {
router.push({
query: {
@ -50,9 +55,13 @@ const expandForm = (row: RowType, state?: Record<string, any>) => {
},
})
} else {
expandedFormClickedLatLongForNewRow.value = clickedLatLongForNewRow
expandedFormRow.value = row
expandedFormRowState.value = state
expandedFormDlg.value = true
// const lat = state?.lat
// const lng = state?.lng
}
}
@ -81,8 +90,10 @@ const addMarker = (lat: number, long: number, row: RowType) => {
throw new Error('Map is null')
}
const newMarker = L.marker([lat, long]).on('click', () => {
console.log('OnNewMarker')
expandForm(row)
})
console.log('onaddMarker', lat, long)
markersClusterGroupRef.value?.addLayer(newMarker)
}
@ -135,6 +146,25 @@ onMounted(async () => {
localStorage.setItem(getMapCenterLocalStorageKey(mapMetaData?.value?.fk_view_id), JSON.stringify(myMap.getCenter()))
}
})
// myMap.on('contextmenu', async function (e) {
// console.log('onContext')
// const newRow = await addEmptyRow()
// const lat = e.latlng.lat
// const lng = e.latlng.lng
// addMarker(lat, lng, newRow)
// expandForm(newRow)
// submitForm()
// })
myMap.on('contextmenu', async function (e) {
const newRow = await addEmptyRow()
const lat = e.latlng.lat
const lng = e.latlng.lng
addMarker(lat, lng, newRow)
console.log('oncontextClick', lat, lng, newRow)
expandForm(newRow, undefined, [lat, lng])
})
})
reloadViewMetaHook?.on(async () => {
@ -182,13 +212,19 @@ watch(view, async (nextView) => {
}
})
const count = computed(() => paginationData.value.totalRows)
const expandedFormDlgInitialGeoPositionData = computed(() => ({
lat: expandedFormClickedLatLongForNewRow.value?.[0],
long: expandedFormClickedLatLongForNewRow.value?.[1],
geoColId: geoDataFieldColumn.value?.id,
}))
syncCount()
const count = computed(() => paginationData.value.totalRows)
</script>
<template>
<div class="flex flex-col h-full w-full no-underline">
expandedFormDlgInitialGeoPositionData: {{ JSON.stringify(expandedFormDlgInitialGeoPositionData) }}
<div id="mapContainer" ref="mapContainerRef">
<a-tooltip placement="bottom" class="tooltip">
<template #title>
@ -213,6 +249,7 @@ syncCount()
:state="expandedFormRowState"
:meta="meta"
:view="view"
:initial-geo-position-data="expandedFormDlgInitialGeoPositionData"
/>
</Suspense>

13
packages/nc-gui/components/smartsheet/expanded-form/index.vue
Unescape View File

@ -23,6 +23,12 @@ import {
} from '#imports'
import type { Row } from '~/lib'
interface InitialGeoPositionData {
lat?: number
long?: number
geoColId?: string
}
interface Props {
modelValue?: boolean
row: Row
@ -32,6 +38,7 @@ interface Props {
useMetaFields?: boolean
rowId?: string
view?: ViewType
initialGeoPositionData?: InitialGeoPositionData
}
const props = defineProps<Props>()
@ -44,6 +51,9 @@ const state = toRef(props, 'state')
const meta = toRef(props, 'meta')
// const initialGeoPositionData = toRef(props, 'initialGeoPositionData')
const initialGeoPositionData = ref(props.initialGeoPositionData)
const router = useRouter()
const fields = computedInject(FieldsInj, (_fields) => {
@ -125,6 +135,7 @@ if (isKanban.value) {
const cellWrapperEl = ref<HTMLElement>()
onMounted(() => {
setTimeout(() => {
;(cellWrapperEl.value?.querySelector('input,select,textarea') as HTMLInputElement)?.focus()
})
@ -150,6 +161,8 @@ export default {
<SmartsheetExpandedFormHeader :view="props.view" @cancel="onClose" />
<div class="!bg-gray-100 rounded flex-1">
FOO geodata: {{ JSON.stringify(initialGeoPositionData) }} BAR
<div class="flex h-full nc-form-wrapper items-stretch min-h-[max(70vh,100%)]">
<div class="flex-1 overflow-auto scrollbar-thin-dull nc-form-fields-container">
<div class="w-[500px] mx-auto">

114
packages/nc-gui/package-lock.json generated
Unescape View File

@ -27,6 +27,8 @@
"jsep": "^1.3.6",
"just-clone": "^6.1.1",
"jwt-decode": "^3.1.2",
"leaflet": "^1.9.2",
"leaflet.markercluster": "^1.5.3",
"locale-codes": "^1.3.1",
"monaco-editor": "^0.33.0",
"nocodb-sdk": "file:../nocodb-sdk",
@ -41,6 +43,7 @@
"vue-dompurify-html": "^3.0.0",
"vue-github-button": "^3.0.3",
"vue-i18n": "^9.2.2",
"vue3-contextmenu": "^0.2.12",
"vuedraggable": "^4.1.0",
"xlsx": "^0.18.5"
},
@ -67,6 +70,9 @@
"@nuxt/image-edge": "^1.0.0-27657146.da85542",
"@types/axios": "^0.14.0",
"@types/dagre": "^0.7.48",
"@types/file-saver": "^2.0.5",
"@types/leaflet": "^1.9.0",
"@types/leaflet.markercluster": "^1.5.1",
"@types/papaparse": "^5.3.2",
"@types/sortablejs": "^1.13.0",
"@types/tinycolor2": "^1.4.3",
@ -3120,7 +3126,8 @@
"node_modules/@types/file-saver": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.5.tgz",
"integrity": "sha512-zv9kNf3keYegP5oThGLaPk8E081DFDuwfqjtiTzm6PoxChdJ1raSuADf2YGCVIyrSynLrgc8JWv296s7Q7pQSQ=="
"integrity": "sha512-zv9kNf3keYegP5oThGLaPk8E081DFDuwfqjtiTzm6PoxChdJ1raSuADf2YGCVIyrSynLrgc8JWv296s7Q7pQSQ==",
"dev": true
},
"node_modules/@types/form-data": {
"version": "0.0.33",
@ -3131,6 +3138,12 @@
"@types/node": "*"
}
},
"node_modules/@types/geojson": {
"version": "7946.0.10",
"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.10.tgz",
"integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==",
"dev": true
},
"node_modules/@types/json-schema": {
"version": "7.0.11",
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@ -3143,6 +3156,24 @@
"integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
"dev": true
},
"node_modules/@types/leaflet": {
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.0.tgz",
"integrity": "sha512-7LeOSj7EloC5UcyOMo+1kc3S1UT3MjJxwqsMT1d2PTyvQz53w0Y0oSSk9nwZnOZubCmBvpSNGceucxiq+ZPEUw==",
"dev": true,
"dependencies": {
"@types/geojson": "*"
}
},
"node_modules/@types/leaflet.markercluster": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/@types/leaflet.markercluster/-/leaflet.markercluster-1.5.1.tgz",
"integrity": "sha512-gzJzP10qO6Zkts5QNVmSAEDLYicQHTEBLT9HZpFrJiSww9eDAs5OWHvIskldf41MvDv1gbMukuEBQEawHn+wtA==",
"dev": true,
"dependencies": {
"@types/leaflet": "*"
}
},
"node_modules/@types/mdast": {
"version": "3.0.10",
"resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.10.tgz",
@ -10650,6 +10681,19 @@
"safe-buffer": "~5.1.0"
}
},
"node_modules/leaflet": {
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.3.tgz",
"integrity": "sha512-iB2cR9vAkDOu5l3HAay2obcUHZ7xwUBBjph8+PGtmW/2lYhbLizWtG7nTeYht36WfOslixQF9D/uSIzhZgGMfQ=="
},
"node_modules/leaflet.markercluster": {
"version": "1.5.3",
"resolved": "https://registry.npmjs.org/leaflet.markercluster/-/leaflet.markercluster-1.5.3.tgz",
"integrity": "sha512-vPTw/Bndq7eQHjLBVlWpnGeLa3t+3zGiuM7fJwCkiMFq+nmRuG3RI3f7f4N4TDX7T4NpbAXpR2+NTRSEGfCSeA==",
"peerDependencies": {
"leaflet": "^1.3.1"
}
},
"node_modules/less": {
"version": "4.1.3",
"resolved": "https://registry.npmjs.org/less/-/less-4.1.3.tgz",
@ -11263,6 +11307,11 @@
"minipass": "^2.9.0"
}
},
"node_modules/mitt": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz",
"integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
},
"node_modules/mkdir": {
"version": "0.0.2",
"resolved": "https://registry.npmjs.org/mkdir/-/mkdir-0.0.2.tgz",
@ -17156,6 +17205,16 @@
"vue": "^3.0.0"
}
},
"node_modules/vue3-contextmenu": {
"version": "0.2.12",
"resolved": "https://registry.npmjs.org/vue3-contextmenu/-/vue3-contextmenu-0.2.12.tgz",
"integrity": "sha512-lSA+Pq4wozbf9nDmMBvz2Z2DXwGwCEeXEDsmQi+cIxc5FzPa1Ia013hv5/DQZwr4dPilNxrOXPht1u0CMXcpVw==",
"dependencies": {
"core-js": "^3.6.5",
"mitt": "^2.1.0",
"vue": "^3.0.0"
}
},
"node_modules/vuedraggable": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz",
@ -20023,7 +20082,8 @@
"@types/file-saver": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.5.tgz",
"integrity": "sha512-zv9kNf3keYegP5oThGLaPk8E081DFDuwfqjtiTzm6PoxChdJ1raSuADf2YGCVIyrSynLrgc8JWv296s7Q7pQSQ=="
"integrity": "sha512-zv9kNf3keYegP5oThGLaPk8E081DFDuwfqjtiTzm6PoxChdJ1raSuADf2YGCVIyrSynLrgc8JWv296s7Q7pQSQ==",
"dev": true
},
"@types/form-data": {
"version": "0.0.33",
@ -20034,6 +20094,12 @@
"@types/node": "*"
}
},
"@types/geojson": {
"version": "7946.0.10",
"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.10.tgz",
"integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==",
"dev": true
},
"@types/json-schema": {
"version": "7.0.11",
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@ -20046,6 +20112,24 @@
"integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
"dev": true
},
"@types/leaflet": {
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.0.tgz",
"integrity": "sha512-7LeOSj7EloC5UcyOMo+1kc3S1UT3MjJxwqsMT1d2PTyvQz53w0Y0oSSk9nwZnOZubCmBvpSNGceucxiq+ZPEUw==",
"dev": true,
"requires": {
"@types/geojson": "*"
}
},
"@types/leaflet.markercluster": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/@types/leaflet.markercluster/-/leaflet.markercluster-1.5.1.tgz",
"integrity": "sha512-gzJzP10qO6Zkts5QNVmSAEDLYicQHTEBLT9HZpFrJiSww9eDAs5OWHvIskldf41MvDv1gbMukuEBQEawHn+wtA==",
"dev": true,
"requires": {
"@types/leaflet": "*"
}
},
"@types/mdast": {
"version": "3.0.10",
"resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.10.tgz",
@ -25443,6 +25527,17 @@
}
}
},
"leaflet": {
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.3.tgz",
"integrity": "sha512-iB2cR9vAkDOu5l3HAay2obcUHZ7xwUBBjph8+PGtmW/2lYhbLizWtG7nTeYht36WfOslixQF9D/uSIzhZgGMfQ=="
},
"leaflet.markercluster": {
"version": "1.5.3",
"resolved": "https://registry.npmjs.org/leaflet.markercluster/-/leaflet.markercluster-1.5.3.tgz",
"integrity": "sha512-vPTw/Bndq7eQHjLBVlWpnGeLa3t+3zGiuM7fJwCkiMFq+nmRuG3RI3f7f4N4TDX7T4NpbAXpR2+NTRSEGfCSeA==",
"requires": {}
},
"less": {
"version": "4.1.3",
"resolved": "https://registry.npmjs.org/less/-/less-4.1.3.tgz",
@ -25936,6 +26031,11 @@
"minipass": "^2.9.0"
}
},
"mitt": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz",
"integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
},
"mkdir": {
"version": "0.0.2",
"resolved": "https://registry.npmjs.org/mkdir/-/mkdir-0.0.2.tgz",
@ -30124,6 +30224,16 @@
"is-plain-object": "3.0.1"
}
},
"vue3-contextmenu": {
"version": "0.2.12",
"resolved": "https://registry.npmjs.org/vue3-contextmenu/-/vue3-contextmenu-0.2.12.tgz",
"integrity": "sha512-lSA+Pq4wozbf9nDmMBvz2Z2DXwGwCEeXEDsmQi+cIxc5FzPa1Ia013hv5/DQZwr4dPilNxrOXPht1u0CMXcpVw==",
"requires": {
"core-js": "^3.6.5",
"mitt": "^2.1.0",
"vue": "^3.0.0"
}
},
"vuedraggable": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz",

1
packages/nc-gui/package.json
Unescape View File

@ -66,6 +66,7 @@
"vue-dompurify-html": "^3.0.0",
"vue-github-button": "^3.0.3",
"vue-i18n": "^9.2.2",
"vue3-contextmenu": "^0.2.12",
"vuedraggable": "^4.1.0",
"xlsx": "^0.18.5"
},

Write Preview
Loading…
Cancel
Save