Browse Source

geodata: add a new row on clicking on the plus icon

pull/4723/head
flisowna 2 years ago
parent
commit
cb5721364f
  1. 20
      packages/nc-gui/components/smartsheet/Map.vue
  2. 13
      packages/nc-gui/composables/useMapViewDataStore.ts

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

@ -3,7 +3,7 @@ import 'leaflet/dist/leaflet.css'
import L, { LatLng } from 'leaflet' import L, { LatLng } from 'leaflet'
import 'leaflet.markercluster' import 'leaflet.markercluster'
import { ViewTypes } from 'nocodb-sdk' import { ViewTypes } from 'nocodb-sdk'
import { IsGalleryInj, IsGridInj, IsMapInj, onMounted, provide, ref } from '#imports' import { IsGalleryInj, IsGridInj, IsMapInj, OpenNewRecordFormHookInj, onMounted, provide, ref } from '#imports'
import type { Row as RowType } from '~/lib' import type { Row as RowType } from '~/lib'
@ -13,7 +13,8 @@ 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, insertRow } = useMapViewStoreOrThrow() const reloadViewMetaHook = inject(ReloadViewMetaHookInj)
const { formattedData, loadMapData, loadMapMeta, mapMetaData, geoDataFieldColumn, addEmptyRow } = useMapViewStoreOrThrow()
const markersClusterGroupRef = ref<L.MarkerClusterGroup>() const markersClusterGroupRef = ref<L.MarkerClusterGroup>()
const mapContainerRef = ref<HTMLElement>() const mapContainerRef = ref<HTMLElement>()
@ -21,6 +22,7 @@ const myMapRef = ref<L.Map>()
const meta = inject(MetaInj, ref()) const meta = inject(MetaInj, ref())
const view = inject(ActiveViewInj, ref()) const view = inject(ActiveViewInj, ref())
const openNewRecordFormHook = inject(OpenNewRecordFormHookInj, createEventHook())
const expandedFormDlg = ref(false) const expandedFormDlg = ref(false)
const expandedFormRow = ref<RowType>() const expandedFormRow = ref<RowType>()
@ -53,6 +55,11 @@ const expandForm = (row: RowType, state?: Record<string, any>) => {
} }
} }
openNewRecordFormHook?.on(async () => {
const newRow = await addEmptyRow()
expandForm(newRow)
})
const expandedFormOnRowIdDlg = computed({ const expandedFormOnRowIdDlg = computed({
get() { get() {
return !!route.query.rowId return !!route.query.rowId
@ -137,11 +144,16 @@ onMounted(async () => {
// }) // })
}) })
reloadViewMetaHook?.on(async () => {
await loadMapMeta()
})
reloadViewDataHook?.on(async () => { reloadViewDataHook?.on(async () => {
loadMapData() await loadMapData()
loadMapMeta()
}) })
provide(ReloadRowDataHookInj, reloadViewDataHook)
watch([formattedData, mapMetaData, markersClusterGroupRef], () => { watch([formattedData, mapMetaData, markersClusterGroupRef], () => {
if (formattedData.value == null || mapMetaData.value?.fk_view_id == null || markersClusterGroupRef.value == null) { if (formattedData.value == null || mapMetaData.value?.fk_view_id == null || markersClusterGroupRef.value == null) {
return return

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

@ -1,4 +1,4 @@
import { reactive } from 'vue'; import { reactive } from 'vue'
import type { ComputedRef, Ref } from 'vue' import type { ComputedRef, Ref } from 'vue'
import type { ColumnType, MapType, PaginatedType, TableType, ViewType } from 'nocodb-sdk' import type { ColumnType, MapType, PaginatedType, TableType, ViewType } from 'nocodb-sdk'
import { ref, useInjectionState, useMetas } from '#imports' import { ref, useInjectionState, useMetas } from '#imports'
@ -116,6 +116,16 @@ const [useProvideMapViewStore, useMapViewStore] = useInjectionState(
} }
} }
function addEmptyRow(addAfter = formattedData.value.length) {
formattedData.value.splice(addAfter, 0, {
row: {},
oldRow: {},
rowMeta: { new: true },
})
return formattedData.value[addAfter]
}
return { return {
formattedData, formattedData,
loadMapData, loadMapData,
@ -123,6 +133,7 @@ const [useProvideMapViewStore, useMapViewStore] = useInjectionState(
updateMapMeta, updateMapMeta,
mapMetaData, mapMetaData,
geoDataFieldColumn, geoDataFieldColumn,
addEmptyRow,
insertRow, insertRow,
geodataToggleState, geodataToggleState,
} }

Loading…
Cancel
Save