From ce97a4027140f14f26610433d20b59812ce4bded Mon Sep 17 00:00:00 2001
From: Oreille <33065839+Oreilles@users.noreply.github.com>
Date: Tue, 9 Nov 2021 17:03:27 +0100
Subject: [PATCH] Fix unexpected camera update and unavailable clustering
 option in map (#9615)

* Fix unexpected camera update and unavailable clustering option in map layout.

* lint warning

* Use defaultSort ref instead of value.

Co-authored-by: Azri Kahar <azrikahar@outlook.com>
---
 app/src/layouts/cards/index.ts     |  2 +-
 app/src/layouts/map/index.ts       |  8 ++++----
 app/src/layouts/map/map.vue        | 28 ++++++++++++++++++++--------
 app/src/layouts/tabular/index.ts   |  5 ++---
 app/src/utils/sync-ref-property.ts | 11 +++++------
 5 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/app/src/layouts/cards/index.ts b/app/src/layouts/cards/index.ts
index 955a15a24d..ccf8fbd854 100644
--- a/app/src/layouts/cards/index.ts
+++ b/app/src/layouts/cards/index.ts
@@ -171,7 +171,7 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 			const page = syncRefProperty(layoutQuery, 'page', 1);
 			const limit = syncRefProperty(layoutQuery, 'limit', 25);
 			const defaultSort = computed(() => (primaryKeyField.value ? [primaryKeyField.value?.field] : []));
-			const sort = syncRefProperty(layoutQuery, 'sort', defaultSort.value);
+			const sort = syncRefProperty(layoutQuery, 'sort', defaultSort);
 
 			const fields = computed<string[]>(() => {
 				if (!primaryKeyField.value || !props.collection) return [];
diff --git a/app/src/layouts/map/index.ts b/app/src/layouts/map/index.ts
index 35ab83b90e..58b51e0fb3 100644
--- a/app/src/layouts/map/index.ts
+++ b/app/src/layouts/map/index.ts
@@ -46,9 +46,8 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 
 		const page = syncRefProperty(layoutQuery, 'page', 1);
 		const limit = syncRefProperty(layoutQuery, 'limit', 1000);
-		const sort = syncRefProperty(layoutQuery, 'sort', () =>
-			primaryKeyField.value ? [primaryKeyField.value?.field] : []
-		);
+		const defaultSort = computed(() => (primaryKeyField.value ? [primaryKeyField.value?.field] : []));
+		const sort = syncRefProperty(layoutQuery, 'sort', defaultSort);
 
 		const locationFilter = ref<Filter>();
 
@@ -105,10 +104,11 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 			}
 			const geometryField = field.field;
 			const geometryFormat = isGeometryFieldNative.value ? 'native' : field.meta?.options?.geometryFormat;
+			const geometryType = field.schema?.geometry_type ?? field.meta?.options?.geometryType;
 			if (!geometryFormat) {
 				return;
 			}
-			return { geometryField, geometryFormat };
+			return { geometryField, geometryFormat, geometryType };
 		});
 
 		const template = computed(() => {
diff --git a/app/src/layouts/map/map.vue b/app/src/layouts/map/map.vue
index a32610f0aa..fb40096c28 100644
--- a/app/src/layouts/map/map.vue
+++ b/app/src/layouts/map/map.vue
@@ -18,13 +18,15 @@
 			@updateitempopup="updateItemPopup"
 		/>
 
-		<div
-			v-if="itemPopup.item"
-			class="popup"
-			:style="{ top: itemPopup.position.y + 'px', left: itemPopup.position.x + 'px' }"
-		>
-			<render-template :template="template" :item="itemPopup.item" :collection="collection" />
-		</div>
+		<transition name="fade">
+			<div
+				v-if="itemPopup.item"
+				class="popup"
+				:style="{ top: itemPopup.position.y + 'px', left: itemPopup.position.x + 'px' }"
+			>
+				<render-template :template="template" :item="itemPopup.item" :collection="collection" />
+			</div>
+		</transition>
 
 		<transition name="fade">
 			<v-info v-if="error" type="danger" :title="t('unexpected_error')" icon="error" center>
@@ -200,7 +202,7 @@ export default defineComponent({
 			default: () => undefined,
 		},
 		itemPopup: {
-			type: [String, Number],
+			type: Object as PropType<{ item?: any; position?: { x: number; y: number } }>,
 			default: () => undefined,
 		},
 		updateItemPopup: {
@@ -338,4 +340,14 @@ export default defineComponent({
 		}
 	}
 }
+
+.fade-enter-active,
+.fade-leave-active {
+	transition: opacity var(--medium) var(--transition);
+}
+
+.fade-enter-from,
+.fade-leave-to {
+	opacity: 0;
+}
 </style>
diff --git a/app/src/layouts/tabular/index.ts b/app/src/layouts/tabular/index.ts
index 7e8ce2330f..b236338aa0 100644
--- a/app/src/layouts/tabular/index.ts
+++ b/app/src/layouts/tabular/index.ts
@@ -142,9 +142,8 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 		function useItemOptions() {
 			const page = syncRefProperty(layoutQuery, 'page', 1);
 			const limit = syncRefProperty(layoutQuery, 'limit', 25);
-			const sort = syncRefProperty(layoutQuery, 'sort', () =>
-				primaryKeyField.value ? [primaryKeyField.value?.field] : []
-			);
+			const defaultSort = computed(() => (primaryKeyField.value ? [primaryKeyField.value?.field] : []));
+			const sort = syncRefProperty(layoutQuery, 'sort', defaultSort);
 
 			const fields = syncRefProperty(layoutQuery, 'fields', () =>
 				fieldsInCollection.value
diff --git a/app/src/utils/sync-ref-property.ts b/app/src/utils/sync-ref-property.ts
index e03cdc15ef..15a5e32346 100644
--- a/app/src/utils/sync-ref-property.ts
+++ b/app/src/utils/sync-ref-property.ts
@@ -1,12 +1,11 @@
-import { isFunction } from 'lodash';
-import { computed, Ref } from 'vue';
+import { computed, Ref, unref } from 'vue';
 
-export function syncRefProperty<R, T extends keyof R>(ref: Ref<R>, key: T, defaultValue: R[T] | (() => R[T])) {
+export function syncRefProperty<R, T extends keyof R>(ref: Ref<R>, key: T, defaultValue: R[T] | Ref<R[T]>) {
 	return computed<R[T]>({
-		get: () => {
-			return ref.value?.[key] ?? (isFunction(defaultValue) ? defaultValue() : defaultValue);
+		get() {
+			return ref.value?.[key] ?? unref(defaultValue);
 		},
-		set: (value: R[T]) => {
+		set(value: R[T]) {
 			ref.value = Object.assign({}, ref.value, { [key]: value }) as R;
 		},
 	});