Browse Source

WIP layout in input of geodata column and adding markers to the map

pull/4723/head
flisowna 2 years ago
parent
commit
dcffa8954f
  1. 34
      packages/nc-gui/components/cell/GeoData.vue
  2. 66
      packages/nc-gui/components/smartsheet/Map.vue
  3. 48
      packages/nc-gui/composables/useMapViewDataStore.ts

34
packages/nc-gui/components/cell/GeoData.vue

@ -139,7 +139,6 @@ const formState = reactive({
}) })
const handleFinish = () => { const handleFinish = () => {
console.log(`handleFinish - formState: `, formState)
vModel.value = `${formState.latitude};${formState.longitude}` vModel.value = `${formState.latitude};${formState.longitude}`
isExpanded = false isExpanded = false
} }
@ -191,15 +190,15 @@ const onGetCurrentLocation = () => {
<a-dropdown :is="isExpanded ? AModal : 'div'" v-model:visible="isExpanded" trigger="click"> <a-dropdown :is="isExpanded ? AModal : 'div'" v-model:visible="isExpanded" trigger="click">
<a-button>{{ latLongStr }}</a-button> <a-button>{{ latLongStr }}</a-button>
<template #overlay> <template #overlay>
<a-form :model="formState" class="flex flex-col w-full" @finish="handleFinish"> <a-form :model="formState" class="flex flex-col dropdown" @finish="handleFinish">
<a-form-item label="Latitude"> <a-form-item class="inputLat" label="Lat">
<a-input v-model:value="formState.latitude" type="number" step="0.0000001" required :max="90" :min="-90" /> <a-input v-model:value="formState.latitude" type="number" step="0.0000001" required :max="90" :min="-90" />
</a-form-item> </a-form-item>
<a-form-item label="Longitude"> <a-form-item class="inputLng" label="Lng">
<a-input v-model:value="formState.longitude" type="number" step="0.0000001" required :min="-180" :max="180" /> <a-input v-model:value="formState.longitude" type="number" step="0.0000001" required :min="-180" :max="180" />
</a-form-item> </a-form-item>
<a-form-item> <a-form-item>
<a-form-item> <a-form-item class="button-location">
<a-button @click="onGetCurrentLocation">Your Location</a-button> <a-button @click="onGetCurrentLocation">Your Location</a-button>
<MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" /> <MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
</a-form-item> </a-form-item>
@ -215,11 +214,26 @@ const onGetCurrentLocation = () => {
input[type='number']:focus { input[type='number']:focus {
@apply ring-transparent; @apply ring-transparent;
} }
input { .dropdown {
max-width: 150px; background-color: beige;
// padding-top: 2rem;
align-items: start;
height: 230px !important;
width: 200px !important;
}
.inputLat {
width: 180px;
margin-top: 2rem;
margin-right: 0.5rem;
margin-left: 0.5rem;
}
.inputLng {
width: 180px;
margin-right: 0.5rem;
margin-left: 0.5rem;
} }
.heja { .button-location {
background-color: red; margin-left: auto;
padding-top: 2rem; margin-right: auto;
} }
</style> </style>

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

@ -7,17 +7,21 @@ import { IsGalleryInj, IsGridInj, IsMapInj, onMounted, provide, ref } from '#imp
import type { Row as RowType } from '~/lib' import type { Row as RowType } from '~/lib'
// const props = defineProps<Props>()
// const emits = defineEmits<Emits>()
provide(IsGalleryInj, ref(false)) provide(IsGalleryInj, ref(false))
provide(IsGridInj, ref(false)) provide(IsGridInj, ref(false))
provide(IsMapInj, ref(true)) provide(IsMapInj, ref(true))
const route = useRoute() const route = useRoute()
const router = useRouter() const router = useRouter()
const reloadViewDataHook = inject(ReloadViewDataHookInj) const reloadViewDataHook = inject(ReloadViewDataHookInj)
const { formattedData, loadMapData, loadMapMeta, mapMetaData, geoDataFieldColumn } = useMapViewStoreOrThrow() // const openNewRecordFormHook = inject(OpenNewRecordFormHookInj, createEventHook())
const { formattedData, loadMapData, loadMapMeta, mapMetaData, geoDataFieldColumn, insertRow } = useMapViewStoreOrThrow()
const markersClusterGroupRef = ref<L.MarkerClusterGroup>() const markersClusterGroupRef = ref<L.MarkerClusterGroup>()
const mapContainerRef = ref<HTMLElement>() const mapContainerRef = ref<HTMLElement>()
const myMapRef = ref<L.Map>() const myMapRef = ref<L.Map>()
// const submitted = ref(false)
const meta = inject(MetaInj, ref()) const meta = inject(MetaInj, ref())
const view = inject(ActiveViewInj, ref()) const view = inject(ActiveViewInj, ref())
@ -26,6 +30,39 @@ const expandedFormDlg = ref(false)
const expandedFormRow = ref<RowType>() const expandedFormRow = ref<RowType>()
const expandedFormRowState = ref<Record<string, any>>() const expandedFormRowState = ref<Record<string, any>>()
// const formState = reactive({})
// const { syncLTARRefs, row } = useProvideSmartsheetRowStore(
// meta,
// ref({
// row: formState,
// oldRow: {},
// rowMeta: { new: true },
// }),
// )
// async function submitForm() {
// const insertedRowData = await insertRow({ row: formState, oldRow: {}, rowMeta: { new: true } })
// if (insertedRowData) {
// await syncLTARRefs(insertedRowData)
// }
// console.log('onsubmitForm')
// submitted.value = true
// }
// interface Props {
// // modelValue?: GeoLocationType | null
// modelValue?: string | null
// }
// interface Emits {
// (event: 'update:modelValue', model: GeoLocationType): void
// }
// const vModel = useVModel(props, 'modelValue', emits)
const getMapZoomLocalStorageKey = (viewId: string) => { const getMapZoomLocalStorageKey = (viewId: string) => {
return `mapView.zoom.${viewId}` return `mapView.zoom.${viewId}`
} }
@ -135,7 +172,7 @@ const resetZoomAndCenterBasedOnLocalStorage = () => {
const initialCenter = initialCenterLocalStorageStr const initialCenter = initialCenterLocalStorageStr
? JSON.parse(initialCenterLocalStorageStr) ? JSON.parse(initialCenterLocalStorageStr)
: { : {
lat: 0.0, lat: 51,
lng: 0.0, lng: 0.0,
} }
@ -171,6 +208,14 @@ onMounted(async () => {
localStorage.setItem(getMapCenterLocalStorageKey(mapMetaData?.value?.fk_view_id), JSON.stringify(myMap.getCenter())) localStorage.setItem(getMapCenterLocalStorageKey(mapMetaData?.value?.fk_view_id), JSON.stringify(myMap.getCenter()))
} }
}) })
myMap.on('contextmenu', async function (e) {
// const newRow = await addEmptyRow()
const lat = e.latlng.lat
const lng = e.latlng.lng
addMarker(lat, lng, newRow)
expandForm(newRow)
// submitForm()
})
}) })
watch(view, async (nextView) => { watch(view, async (nextView) => {
@ -180,14 +225,29 @@ watch(view, async (nextView) => {
await resetZoomAndCenterBasedOnLocalStorage() await resetZoomAndCenterBasedOnLocalStorage()
} }
}) })
// openNewRecordFormHook?.on(async () => {
// const newRow = await addEmptyRow()
// expandForm(newRow)
// })
</script> </script>
<template> <template>
{{ JSON.stringify(mapMetaData) }}
<div class="flex flex-col h-full w-full no-underline"> <div class="flex flex-col h-full w-full no-underline">
<div id="mapContainer" ref="mapContainerRef"></div> <div id="mapContainer" ref="mapContainerRef"></div>
</div> </div>
<Suspense>
<LazySmartsheetExpandedForm
v-if="expandedFormRow && expandedFormDlg"
v-model="expandedFormDlg"
:row="expandedFormRow"
:state="expandedFormRowState"
:meta="meta"
:view="view"
/>
</Suspense>
<Suspense> <Suspense>
<LazySmartsheetExpandedForm <LazySmartsheetExpandedForm
v-if="expandedFormOnRowIdDlg" v-if="expandedFormOnRowIdDlg"

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

@ -1,6 +1,6 @@
import type { ComputedRef, Ref } from 'vue' import type { ComputedRef, Ref } from 'vue'
import type { ColumnType, MapType, TableType, ViewType } from 'nocodb-sdk' import type { ColumnType, MapType, TableType, ViewType } from 'nocodb-sdk'
import { ref, useInjectionState } from '#imports' import { ref, useInjectionState, useMetas } from '#imports'
import type { Row } from '~/lib' import type { Row } from '~/lib'
const formatData = (list: Row[]) => const formatData = (list: Row[]) =>
@ -50,6 +50,51 @@ const [useProvideMapViewStore, useMapViewStore] = useInjectionState(
}) })
} }
const { getMeta } = useMetas()
async function insertRow(
currentRow: Row,
_rowIndex = formattedData.value?.length,
ltarState: Record<string, any> = {},
{
metaValue = meta.value,
viewMetaValue = viewMeta.value,
}: { metaValue?: MapType; viewMetaValue?: ViewType | MapType } = {},
) {
const row = currentRow.row
if (currentRow.rowMeta) currentRow.rowMeta.saving = true
try {
const { missingRequiredColumns, insertObj } = await populateInsertObject({
meta: metaValue!,
ltarState,
getMeta,
row,
})
if (missingRequiredColumns.size) return
const insertedData = await $api.dbViewRow.create(
NOCO,
project?.value.id as string,
metaValue?.id as string,
viewMetaValue?.id as string,
insertObj,
)
Object.assign(currentRow, {
row: { ...insertedData, ...row },
rowMeta: { ...(currentRow.rowMeta || {}), new: undefined },
oldRow: { ...insertedData },
})
return insertedData
} catch (error: any) {
message.error(await extractSdkResponseErrorMsg(error))
} finally {
if (currentRow.rowMeta) currentRow.rowMeta.saving = false
}
}
return { return {
formattedData, formattedData,
loadMapData, loadMapData,
@ -57,6 +102,7 @@ const [useProvideMapViewStore, useMapViewStore] = useInjectionState(
updateMapMeta, updateMapMeta,
mapMetaData, mapMetaData,
geoDataFieldColumn, geoDataFieldColumn,
insertRow,
} }
}, },
) )

Loading…
Cancel
Save