bug(mapper): mapper frontend bug fixes (#1933)

* fix(main): shift osmStyle to baselayers constant * fix(layer-switcher): user added layer vanish issue on switching to initial selected layer issue solve * fix(header): only display sign out btn if user logged in * fix(+page): update function to close dialog * fix(+page): remove unused imports * fix(header): header height fix, hot-logo height reduce * fix(dialog-entities-actions): pudate entity status to OPENED_IN_ODK if entity in READY status
hotosm · Dec 2, 2024 · 6454c91 · 6454c91
1 parent 41bb196
commit 6454c91
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 42 deletions.
diff --git a/src/mapper/src/lib/components/dialog-entities-actions.svelte b/src/mapper/src/lib/components/dialog-entities-actions.svelte
@@ -30,11 +30,13 @@
 
 		const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
 		if (isMobile) {
-			entitiesStore.updateEntityStatus(projectData.id, {
-				entity_id: entityUuid,
-				status: 1,
-				label: `Task ${selectedEntity?.task_id} Feature ${selectedEntity?.osmid}`,
-			});
+			if (selectedEntity?.status === 'READY') {
+				entitiesStore.updateEntityStatus(projectData.id, {
+					entity_id: entityUuid,
+					status: 1,
+					label: `Task ${selectedEntity?.task_id} Feature ${selectedEntity?.osmid}`,
+				});
+			}
 			// Load entity in ODK Collect by intent
 			document.location.href = `odkcollect://form/${xformId}?feature=${entityUuid}`;
 		} else {

diff --git a/src/mapper/src/lib/components/header.svelte b/src/mapper/src/lib/components/header.svelte
@@ -32,8 +32,8 @@
 
 <div class="p-3 flex items-center justify-between">
 	<div class="flex items-center gap-1">
-		<img src={HotLogo} alt="hot-logo" />
-		<img src={HotLogoText} alt="hot-logo" />
+		<img src={HotLogo} alt="hot-logo" class="h-[2.2rem] sm:h-[3rem]" />
+		<img src={HotLogoText} alt="hot-logo" class="h-[2.2rem] sm:h-[3rem]" />
 	</div>
 	<div class="flex items-center gap-4">
 		<!-- profile image and username display -->
@@ -55,7 +55,11 @@
 						class="w-[1.8rem] h-[1.8rem] min-w-[1.8rem] min-h-[1.8rem] max-w-[1.8rem] max-h-[1.8rem] rounded-full"
 					/>
 				{/if}
-				<p class="font-barlow-medium">{loginStore?.getAuthDetails?.username}</p>
+				<p
+					class="font-barlow-medium text-sm sm:text-base text-ellipsis whitespace-nowrap overflow-hidden max-w-[6rem] sm:max-w-fit"
+				>
+					{loginStore?.getAuthDetails?.username}
+				</p>
 			</div>
 		{:else}
 			<sl-button
@@ -103,20 +107,22 @@
 				class="hover:text-red-600 cursor-pointer duration-200 decoration-none text-black">{menu.name}</a
 			>
 		{/each}
-		<sl-button
-			class="primary rounded"
-			variant="primary"
-			size="small"
-			onclick={handleSignOut}
-			onkeydown={(e: KeyboardEvent) => {
-				if (e.key === 'Enter') {
-					handleSignOut();
-				}
-			}}
-			role="button"
-			tabindex="0"
-		>
-			<span class="font-barlow-medium text-base">SIGN OUT</span>
-		</sl-button>
+		{#if loginStore?.getAuthDetails}
+			<sl-button
+				class="primary rounded"
+				variant="primary"
+				size="small"
+				onclick={handleSignOut}
+				onkeydown={(e: KeyboardEvent) => {
+					if (e.key === 'Enter') {
+						handleSignOut();
+					}
+				}}
+				role="button"
+				tabindex="0"
+			>
+				<span class="font-barlow-medium text-base">SIGN OUT</span>
+			</sl-button>
+		{/if}
 	</div>
 </hot-drawer>
diff --git a/src/mapper/src/lib/components/map/main.svelte b/src/mapper/src/lib/components/map/main.svelte
@@ -67,21 +67,21 @@
 	let projectSetupStep = $state(null);
 	// Trigger adding the PMTiles layer to baselayers, if PmtilesUrl is set
 	let allBaseLayers: maplibregl.StyleSpecification[] = $derived(
-		projectBasemapStore.projectPmtilesUrl ? 
-			[
-				...baseLayers,
-				{
-					...pmtilesStyle,
-					sources: {
-						...pmtilesStyle.sources,
-						pmtiles: {
-							...pmtilesStyle.sources.pmtiles,
-							url: projectBasemapStore.projectPmtilesUrl,
+		projectBasemapStore.projectPmtilesUrl
+			? [
+					...baseLayers,
+					{
+						...pmtilesStyle,
+						sources: {
+							...pmtilesStyle.sources,
+							pmtiles: {
+								...pmtilesStyle.sources.pmtiles,
+								url: projectBasemapStore.projectPmtilesUrl,
+							},
 						},
 					},
-				},
-			]
-			: baseLayers
+				]
+			: baseLayers,
 	);
 	// // This does not work! Infinite looping
 	// // Trigger adding the PMTiles layer to baselayers, if PmtilesUrl is set

diff --git a/src/mapper/src/routes/[projectId]/+page.svelte b/src/mapper/src/routes/[projectId]/+page.svelte
@@ -17,8 +17,7 @@
 	import BasemapComponent from '$lib/components/offline/basemaps.svelte';
 	import DialogTaskActions from '$lib/components/dialog-task-actions.svelte';
 	import DialogEntityActions from '$lib/components/dialog-entities-actions.svelte';
-	import { generateQrCode, downloadQrCode } from '$lib/utils/qrcode';
-	import type { ProjectTask, ZoomToTaskEventDetail } from '$lib/types';
+	import type { ProjectTask } from '$lib/types';
 	import { convertDateToTimeAgo } from '$lib/utils/datetime';
 	import { getTaskStore, getTaskEventStream } from '$store/tasks.svelte.ts';
 	import { getEntitiesStatusStore, getEntityStatusStream } from '$store/entities.svelte.ts';
@@ -31,7 +30,6 @@
 	}
 
 	let { data }: Props = $props();
-	// $effect: ({ electric, project } = data)
 
 	let mapComponent: maplibregl.Map | undefined = $state(undefined);
 	let tabGroup: SlTabGroup;
@@ -113,7 +111,7 @@
 {/if}
 
 <!-- The main page -->
-<div class="h-[calc(100svh-4.625rem)]">
+<div class="h-[calc(100svh-3.699rem)] sm:h-[calc(100svh-4.625rem)]">
 	<MapComponent
 		setMapRef={(map) => {
 			mapComponent = map;
@@ -181,9 +179,9 @@
 					class="h-[70vh]"
 				/>
 				<sl-button
-					onclick={() => infoDialogRef?.close()}
+					onclick={() => infoDialogRef?.hide()}
 					onkeydown={(e: KeyboardEvent) => {
-						e.key === 'Enter' && infoDialogRef?.close();
+						e.key === 'Enter' && infoDialogRef?.hide();
 					}}
 					role="button"
 					tabindex="0"