Browse Source

geodata: changing primary geodata column on map view

pull/4140/head
flisowna 2 years ago
parent
commit
4cacc9de6d
  1. 6
      packages/nc-gui/components/smartsheet/Toolbar.vue
  2. 122
      packages/nc-gui/components/smartsheet/toolbar/MappedBy.vue
  3. 11
      packages/nc-gui/composables/useMapViewDataStore.ts
  4. 4
      packages/nc-gui/lang/en.json

6
packages/nc-gui/components/smartsheet/Toolbar.vue

@ -18,7 +18,7 @@ const { allowCSVDownload } = useSharedView()
style="z-index: 7" style="z-index: 7"
> >
<LazySmartsheetToolbarViewActions <LazySmartsheetToolbarViewActions
v-if="(isGrid || isGallery || isKanban) && !isPublic && isUIAllowed('dataInsert')" v-if="(isGrid || isGallery || isKanban || isMap) && !isPublic && isUIAllowed('dataInsert')"
:show-system-fields="false" :show-system-fields="false"
class="ml-1" class="ml-1"
/> />
@ -29,9 +29,11 @@ const { allowCSVDownload } = useSharedView()
<LazySmartsheetToolbarKanbanStackEditOrAdd v-if="isKanban" /> <LazySmartsheetToolbarKanbanStackEditOrAdd v-if="isKanban" />
<LazySmartsheetToolbarMappedBy v-if="isMap" />
<LazySmartsheetToolbarFieldsMenu v-if="isGrid || isGallery || isKanban || isMap" :show-system-fields="false" /> <LazySmartsheetToolbarFieldsMenu v-if="isGrid || isGallery || isKanban || isMap" :show-system-fields="false" />
<LazySmartsheetToolbarColumnFilterMenu v-if="isGrid || isGallery || isKanban" /> <LazySmartsheetToolbarColumnFilterMenu v-if="isGrid || isGallery || isKanban || isMap" />
<LazySmartsheetToolbarSortListMenu v-if="isGrid || isGallery || isKanban" /> <LazySmartsheetToolbarSortListMenu v-if="isGrid || isGallery || isKanban" />

122
packages/nc-gui/components/smartsheet/toolbar/MappedBy.vue

@ -0,0 +1,122 @@
<script setup lang="ts">
import type { MapType } from 'nocodb-sdk'
import { UITypes } from 'nocodb-sdk'
import type { SelectProps } from 'ant-design-vue'
import {
ActiveViewInj,
IsLockedInj,
IsPublicInj,
MetaInj,
ReloadViewDataHookInj,
computed,
inject,
ref,
useViewColumns,
watch,
} from '#imports'
const meta = inject(MetaInj, ref())
const activeView = inject(ActiveViewInj, ref())
const IsPublic = inject(IsPublicInj, ref(false))
const reloadDataHook = inject(ReloadViewDataHookInj)!
const isLocked = inject(IsLockedInj, ref(false))
const { fields, loadViewColumns, metaColumnById } = useViewColumns(activeView, meta, () => reloadDataHook.trigger())
const { loadMapData, loadMapMeta, updateMapMeta, mapMetaData, geoDataFieldColumn } = useMapViewStoreOrThrow()
const stackedByDropdown = ref(false)
watch(
() => activeView.value?.id,
async (newVal, oldVal) => {
if (newVal !== oldVal && meta.value) {
await loadViewColumns()
}
},
{ immediate: true },
)
const geoDataMappingFieldColumnId = computed({
get: () => mapMetaData.value.fk_geo_data_col_id,
set: async (val) => {
if (val) {
await updateMapMeta({
fk_geo_data_col_id: val,
})
await loadMapMeta()
await loadMapData()
;(activeView.value?.view as MapType).fk_geo_data_col_id = val
}
},
})
const geoDataFieldOptions = computed<SelectProps['options']>(() => {
return fields.value
?.filter((el) => el.fk_column_id && metaColumnById.value[el.fk_column_id].uidt === UITypes.GeoData)
.map((field) => {
return {
value: field.fk_column_id,
label: field.title,
}
})
})
const handleChange = () => {
stackedByDropdown.value = false
}
</script>
<template>
<a-dropdown
v-if="!IsPublic"
v-model:visible="stackedByDropdown"
:trigger="['click']"
overlay-class-name="nc-dropdown-kanban-stacked-by-menu"
>
<div class="nc-kanban-btn">
<a-button
v-e="['c:kanban:change-grouping-field']"
class="nc-kanban-stacked-by-menu-btn nc-toolbar-btn"
:disabled="isLocked"
>
<div class="flex items-center gap-1">
<mdi-arrow-down-drop-circle-outline />
<span class="text-capitalize !text-sm font-weight-normal">
{{ $t('activity.map.mappedBy') }}
<span class="font-bold">{{ geoDataFieldColumn?.title }}</span>
</span>
<MdiMenuDown class="text-grey" />
</div>
</a-button>
</div>
<template #overlay>
<div
v-if="stackedByDropdown"
class="p-3 min-w-[280px] bg-gray-50 shadow-lg nc-table-toolbar-menu max-h-[max(80vh,500px)] overflow-auto !border"
@click.stop
>
<div>
<span class="font-bold"> {{ $t('activity.map.chooseMappingField') }}</span>
<a-divider class="!my-2" />
</div>
<div class="nc-fields-list py-1">
<div class="grouping-field">
<a-select
v-model:value="geoDataMappingFieldColumnId"
class="w-full nc-kanban-grouping-field-select"
:options="geoDataFieldOptions"
placeholder="Select a Mapping Field"
@change="handleChange"
@click.stop
/>
</div>
</div>
</div>
</template>
</a-dropdown>
</template>

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

@ -14,6 +14,8 @@ const [useProvideMapViewStore, useMapViewStore] = useInjectionState(
const { project } = useProject() const { project } = useProject()
const { $api } = useNuxtApp() const { $api } = useNuxtApp()
const { isUIAllowed } = useUIPermission()
const mapMetaData = ref<MapType>({}) const mapMetaData = ref<MapType>({})
const geoDataFieldColumn = ref<ColumnType | undefined>() const geoDataFieldColumn = ref<ColumnType | undefined>()
@ -35,10 +37,19 @@ const [useProvideMapViewStore, useMapViewStore] = useInjectionState(
formattedData.value = res.list formattedData.value = res.list
} }
async function updateMapMeta(updateObj: Partial<MapType>) {
if (!viewMeta?.value?.id || !isUIAllowed('xcDatatableEditable')) return
await $api.dbView.mapUpdate(viewMeta.value.id, {
...mapMetaData.value,
...updateObj,
})
}
return { return {
formattedData, formattedData,
loadMapData, loadMapData,
loadMapMeta, loadMapMeta,
updateMapMeta,
mapMetaData, mapMetaData,
geoDataFieldColumn, geoDataFieldColumn,
} }

4
packages/nc-gui/lang/en.json

@ -431,6 +431,10 @@
"stackedBy": "Stacked By", "stackedBy": "Stacked By",
"chooseGroupingField": "Choose a Grouping Field", "chooseGroupingField": "Choose a Grouping Field",
"addOrEditStack": "Add / Edit Stack" "addOrEditStack": "Add / Edit Stack"
},
"map": {
"mappedBy": "Mapped By",
"chooseMappingField": "Choose a Mapping Field"
} }
}, },
"tooltip": { "tooltip": {

Loading…
Cancel
Save