Merge pull request #519 from codeworks-projects/fix/gps-data-duplicat…

…e-and-cancel fix: reactive editable data for gps points. Duplicate and add new ite…
noi-techpark · Jan 23, 2024 · e341df4 · e341df4
2 parents 3a862b7 + 4f50d91
commit e341df4
Show file tree

Hide file tree

Showing 8 changed files with 111 additions and 132 deletions.
diff --git a/databrowser/src/components/map/GpsPointMap.vue b/databrowser/src/components/map/GpsPointMap.vue
@@ -23,7 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
         class="absolute right-4 top-4 z-[999] flex items-center gap-3"
       >
         <ButtonCustom
-          v-if="mapView !== 'table'"
+          v-if="mapView !== 'table' && editable"
           variant="ghost"
           size="xs"
           class="flex h-12 w-12 items-center justify-center bg-white p-2"
@@ -45,8 +45,10 @@ SPDX-License-Identifier: AGPL-3.0-or-later
         /></ButtonCustom>
       </div>
       <div
-        ref="tooltip"
         class="pointer-events-none absolute bottom-6 right-2 z-[999] rounded-md bg-black px-2 py-1 text-sm text-white opacity-0 transition-all"
+        :class="{
+          'opacity-100': isTooltipVisible,
+        }"
       >
         {{ t('datasets.editView.map.clickOnTheMapToSetGPSPoint') }}
       </div>
@@ -84,7 +86,9 @@ const { t } = useI18n();
 
 const emit = defineEmits(['mapClick', 'enableSetMarker']);
 
-const tooltip = ref();
+const tooltipInterval = ref();
+const isTooltipVisible = ref(false);
+
 const fullscreenComponent = ref();
 const enableSetMarker = ref(false);
 
@@ -94,13 +98,15 @@ const props = withDefaults(
     longitude?: string | number;
     height?: string;
     fallbackCenter?: PointExpression;
+    editable?: boolean;
     mapView?: undefined | 'table';
   }>(),
   {
     latitude: undefined,
     longitude: undefined,
     height: undefined,
     fallbackCenter: undefined,
+    editable: false,
     mapView: undefined,
   }
 );
@@ -144,7 +150,7 @@ const toggleEditMode = () => {
 
   if (enableSetMarker.value) {
     showTooltip();
-    setTimeout(() => {
+    tooltipInterval.value = setTimeout(() => {
       hideTooltip();
     }, 5000);
   } else {
@@ -153,11 +159,12 @@ const toggleEditMode = () => {
 };
 
 const showTooltip = () => {
-  tooltip.value.classList.add('opacity-100');
+  isTooltipVisible.value = true;
 };
 
 const hideTooltip = () => {
-  tooltip.value.classList.remove('opacity-100');
+  isTooltipVisible.value = false;
+  clearInterval(tooltipInterval.value);
 };
 
 const onContainerClick = (isFullscreen: boolean) => {

diff --git a/databrowser/src/components/map/types.ts b/databrowser/src/components/map/types.ts
@@ -9,11 +9,3 @@ export interface Position {
   lat: number;
   lng: number;
 }
-
-export interface PointPosition {
-  latitude?: string | number;
-  longitude?: string | number;
-  altitude?: string | number;
-  unitMeasureAltitude?: string | number;
-  gpsType?: string;
-}
diff --git a/databrowser/src/config/builder/tourism/gpsData.ts b/databrowser/src/config/builder/tourism/gpsData.ts
@@ -22,6 +22,13 @@ export const gpsDataCategory = (): DetailElements => ({
           arrayMapping: {
             targetPropertyName: 'gpsInfo',
             pathToParent: 'GpsInfo',
+            objectMapping: {
+              latitude: 'Latitude',
+              longitude: 'Longitude',
+              altitude: 'Altitude',
+              unitMeasureAltitude: 'AltitudeUnitofMeasure',
+              gpsType: 'Gpstype',
+            },
           },
           params: {
             positionValuesUrl: withOdhBaseUrl(

diff --git a/databrowser/src/domain/cellComponents/components/cells/editGpsInfoCell/EditGpsInfoTab.vue b/databrowser/src/domain/cellComponents/components/cells/editGpsInfoCell/EditGpsInfoTab.vue
@@ -11,19 +11,18 @@ SPDX-License-Identifier: AGPL-3.0-or-later
     </template>
 
     <template #addItems>
-      <EditListAddButton :text="'Add new GPS Point'" @click="addEmptyItem" />
+      <EditListAddButton
+        :text="'Add new GPS Point'"
+        @click="addItems([{ unitMeasureAltitude: 'm' }])"
+      />
     </template>
 
-    <template #body="{ item, index }">
+    <template #body="{ item, index }: { item: GpsInfoEntry, index: number }">
       <div class="flex flex-wrap gap-8 lg:flex-nowrap">
         <div class="basis-full lg:basis-3/4">
           <EditGpsPointMap
-            :key="`map_${activeTab}`"
-            :latitude="item.Latitude"
-            :longitude="item.Longitude"
-            :altitude="item.Altitude"
-            :unit-measure-altitude="item.AltitudeUnitofMeasure"
-            :gps-type="item.Gpstype"
+            :key="`map_${activeTab}_${items.length}`"
+            :data="item"
             @new-position="onNewPosition(index, $event)"
           />
         </div>
@@ -69,22 +68,18 @@ import { useInjectNavigation } from '../../utils/editList/actions/useNavigation'
 import { useInjectEditMode } from '../../utils/editList/actions/useEditMode';
 
 import { GpsInfoEntry } from './types';
-import { PointPosition } from '../../../../../components/map/types';
-import { getMappedDataFromMap } from './utils';
 import EditGpsPointMap from './EditGpsPointMap.vue';
 
 defineProps<{ items: GpsInfoEntry[] }>();
 
 const { activeTab } = useInjectNavigation();
 
-const { deleteItems, duplicateItem, updateItem, addEmptyItem } =
+const { deleteItems, duplicateItem, updateItem, addItems } =
   useInjectActionTriggers();
 
 const { editable } = useInjectEditMode();
 
-const onNewPosition = (index: number, data: PointPosition) => {
-  const mappedData = getMappedDataFromMap(data);
-
-  updateItem(index, mappedData);
+const onNewPosition = (index: number, data: GpsInfoEntry) => {
+  updateItem(index, data);
 };
 </script>
diff --git a/databrowser/src/domain/cellComponents/components/cells/editGpsInfoCell/EditGpsInfoTable.vue b/databrowser/src/domain/cellComponents/components/cells/editGpsInfoCell/EditGpsInfoTable.vue
@@ -26,21 +26,21 @@ SPDX-License-Identifier: AGPL-3.0-or-later
     <template #tableCols="{ item }">
       <TableCell>
         <GpsPointMap
-          v-if="item.Latitude && item.Longitude"
+          v-if="item.latitude && item.longitude"
           ref="gpsPointMap"
-          :latitude="item.Latitude"
-          :longitude="item.Longitude"
+          :latitude="item.latitude"
+          :longitude="item.longitude"
           map-view="table"
           height="100px"
         />
 
         <div v-else>Missing coordinates</div>
       </TableCell>
-      <TableCell>{{ item.Gpstype }}</TableCell>
-      <TableCell>{{ item.Latitude }}</TableCell>
-      <TableCell>{{ item.Longitude }}</TableCell>
-      <TableCell>{{ item.Altitude }}</TableCell>
-      <TableCell>{{ item.AltitudeUnitofMeasure }}</TableCell>
+      <TableCell>{{ item.gpsType }}</TableCell>
+      <TableCell>{{ item.latitude }}</TableCell>
+      <TableCell>{{ item.longitude }}</TableCell>
+      <TableCell>{{ item.altitude }}</TableCell>
+      <TableCell>{{ item.unitMeasureAltitude }}</TableCell>
     </template>
     <template #noItems>No GPS Point has been added yet.</template>
     <template #addItems>
@@ -67,10 +67,10 @@ const props = defineProps<{ items: GpsInfoEntry[] }>();
 
 const { navigateToTab } = useInjectNavigation();
 
-const { addEmptyItem } = useInjectActionTriggers();
+const { addItems } = useInjectActionTriggers();
 
 const addNewGpsPoint = () => {
-  addEmptyItem();
+  addItems([{ unitMeasureAltitude: 'm' }]);
   navigateToTab(props.items.length);
 };