Fixed column mapping

src/lib/components/wizard/StepColumnMap.svelte

@@ -1,30 +1,10 @@
 <script lang="ts">
-	import { selectedSheet, columnMapping, rawSheetData, currentStep } from '$lib/stores';
+	import { selectedSheet, currentStep, columnMapping } from '$lib/stores';
+	import type { ColumnMappingType, SheetInfoType } from '$lib/stores';
 	import { getSheetNames, getSheetData } from '$lib/google';
 	import { onMount } from 'svelte';
 	import Navigator from './subcomponents/Navigator.svelte';
 
-	// Type definitions for better TypeScript support
-	interface ColumnMappingType {
-		name: number;
-		surname: number;
-		nationality: number;
-		birthday: number;
-		pictureUrl: number;
-		alreadyPrinted: number;
-		[key: string]: number; // Index signature to allow string indexing
-	}
-
-	interface SheetInfoType {
-		id?: string;
-		spreadsheetId?: string;
-		name: string;
-		sheetName?: string;
-		sheetMapping?: string;
-		columnMapping?: ColumnMappingType;
-		lastUsed?: string;
-	}
-
 	let isLoadingSheets = $state(false);
 	let isLoadingData = $state(false);
 	let availableSheets = $state<string[]>([]);
@@ -36,14 +16,14 @@
 	let hasSavedMapping = $state(false);
 	let showMappingEditor = $state(false);
 	let savedSheetInfo = $state<SheetInfoType | null>(null);
-
 	let mappedIndices = $state<ColumnMappingType>({
 		name: -1,
 		surname: -1,
 		nationality: -1,
 		birthday: -1,
 		pictureUrl: -1,
-		alreadyPrinted: -1
+		alreadyPrinted: -1,
+		sheetName: ''
 	});
 
 	const requiredFields = [
@@ -69,36 +49,31 @@
 					if (recentSheets && recentSheets.length > 0) {
 						// Find a sheet that matches the current spreadsheet
 						const savedSheet = recentSheets.find(
-							(sheet: SheetInfoType) =>
-								sheet.id === $selectedSheet.spreadsheetId ||
-								sheet.spreadsheetId === $selectedSheet.spreadsheetId
+							(sheet: SheetInfoType) => sheet.id === $selectedSheet.id
 						);
 
 						if (savedSheet) {
 							console.log('Found saved sheet configuration:', savedSheet);
 							// We have a saved sheet for this spreadsheet
-							selectedSheetName = savedSheet.sheetName || savedSheet.sheetMapping || '';
+							selectedSheetName = savedSheet.columnMapping.sheetName;
 							savedSheetInfo = savedSheet;
 
 							if (savedSheet.columnMapping) {
 								// Set the mapped indices from saved data
 								mappedIndices = {
-									name: savedSheet.columnMapping.name ?? -1,
-									surname: savedSheet.columnMapping.surname ?? -1,
-									nationality: savedSheet.columnMapping.nationality ?? -1,
-									birthday: savedSheet.columnMapping.birthday ?? -1,
-									pictureUrl: savedSheet.columnMapping.pictureUrl ?? -1,
-									alreadyPrinted: savedSheet.columnMapping.alreadyPrinted ?? -1
+									name: savedSheet.columnMapping.name,
+									surname: savedSheet.columnMapping.surname,
+									nationality: savedSheet.columnMapping.nationality,
+									birthday: savedSheet.columnMapping.birthday,
+									pictureUrl: savedSheet.columnMapping.pictureUrl,
+									alreadyPrinted: savedSheet.columnMapping.alreadyPrinted,
+									sheetName: selectedSheetName
 								};
 
 								hasSavedMapping = true;
 								updateMappingStatus();
-								columnMapping.set(mappedIndices);
 
-								// Don't load sheet data immediately for better performance
-								// We'll load it when needed (when editing or continuing)
-
-								return; // Skip loading available sheets since we're using saved data
+								return;
 							}
 						}
 					}
@@ -114,72 +89,20 @@
 		}
 	});
 
-	// Load sheet data quietly (for previously saved sheets)
-	async function loadSheetDataQuietly(sheetName: string) {
-		if (!$selectedSheet || !sheetName) {
-			console.error('Cannot load sheet data: missing selectedSheet or sheetName', {
-				selectedSheet: $selectedSheet,
-				sheetName: sheetName
-			});
-			return;
-		}
-
-		try {
-			console.log(
-				'Loading sheet data quietly for spreadsheet:',
-				$selectedSheet.spreadsheetId,
-				'sheet:',
-				sheetName
-			);
-
-			// Make sure we verify the sheet exists before trying to load it
-			if (availableSheets.length === 0) {
-				// We need to load available sheets first
-				await loadAvailableSheets();
-
-				// If after loading sheets, we still don't have the sheet, show the editor
-				if (!availableSheets.includes(sheetName)) {
-					console.warn(`Sheet "${sheetName}" not found in spreadsheet, showing editor`);
-					showMappingEditor = true;
-					return;
-				}
-			}
-
-			// Fetch first 10 rows for headers only
-			const range = `${sheetName}!A1:Z10`;
-			const data = await getSheetData($selectedSheet.spreadsheetId, range);
-
-			if (data && data.length > 0) {
-				console.log('Loaded sheet data with', data.length, 'rows');
-				sheetHeaders = data[0];
-				previewData = data.slice(1, Math.min(4, data.length)); // Get up to 3 rows for preview
-				// Don't set the rawSheetData here as that will be loaded in the next step
-			} else {
-				console.warn(`No data returned for sheet "${sheetName}", showing editor`);
-				showMappingEditor = true;
-			}
-		} catch (err) {
-			console.error('Error loading sheet data quietly:', err, 'for sheet:', sheetName);
-			// If there's an error, show the full editor so the user can select a sheet
-			showMappingEditor = true;
-		}
-	}
-
 	async function loadAvailableSheets() {
 		if (!$selectedSheet) {
 			console.error('Cannot load available sheets: no sheet selected');
 			return;
 		}
 
-		console.log('Loading available sheets for spreadsheet:', $selectedSheet.spreadsheetId);
+		console.log('Loading available sheets for spreadsheet:', $selectedSheet.id);
 		isLoadingSheets = true;
 		error = '';
 
 		try {
-			const sheetNames = await getSheetNames($selectedSheet.spreadsheetId);
+			const sheetNames = await getSheetNames($selectedSheet.id);
 			console.log('Loaded sheet names:', sheetNames);
 			availableSheets = sheetNames;
-			// Don't auto-select any sheet - let user choose
 		} catch (err) {
 			console.error('Error loading sheet names:', err);
 			error = 'Failed to load sheet names. Please try again.';
@@ -193,7 +116,6 @@
 		selectedSheetName = sheetName;
 
 		// Clear any previous data when selecting a new sheet
-		rawSheetData.set([]);
 		sheetHeaders = [];
 		previewData = [];
 		mappedIndices = {
@@ -202,7 +124,8 @@
 			nationality: -1,
 			birthday: -1,
 			pictureUrl: -1,
-			alreadyPrinted: -1
+			alreadyPrinted: -1,
+			sheetName: sheetName
 		};
 		mappingComplete = false;
 		hasSavedMapping = false;
@@ -220,19 +143,14 @@
 			return;
 		}
 
-		console.log(
-			'Loading sheet data for spreadsheet:',
-			$selectedSheet.spreadsheetId,
-			'sheet:',
-			sheetName
-		);
+		console.log('Loading sheet data for spreadsheet:', $selectedSheet.id, 'sheet:', sheetName);
 		isLoadingData = true;
 		error = '';
 
 		try {
 			// Fetch first 10 rows for headers and preview
 			const range = `${sheetName}!A1:Z10`;
-			const data = await getSheetData($selectedSheet.spreadsheetId, range);
+			const data = await getSheetData($selectedSheet.id, range);
 
 			if (data && data.length > 0) {
 				console.log('Loaded sheet data with', data.length, 'rows');
@@ -265,11 +183,12 @@
 			nationality: -1,
 			birthday: -1,
 			pictureUrl: -1,
-			alreadyPrinted: -1
+			alreadyPrinted: -1,
+			sheetName: selectedSheetName
 		};
 
 		// Auto-mapping patterns
-		const patterns: Record<keyof ColumnMappingType, RegExp> = {
+		const patterns: Record<keyof Omit<ColumnMappingType, 'sheetName'>, RegExp> = {
 			name: /first[\s_-]*name|name|given[\s_-]*name|vorname/i,
 			surname: /last[\s_-]*name|surname|family[\s_-]*name|nachname/i,
 			nationality: /nationality|country|nation/i,
@@ -280,8 +199,9 @@
 
 		sheetHeaders.forEach((header, index) => {
 			for (const [field, pattern] of Object.entries(patterns)) {
-				if (pattern.test(header) && mappedIndices[field] === -1) {
-					mappedIndices[field] = index;
+				const key = field as keyof ColumnMappingType;
+				if (pattern.test(header) && mappedIndices[key] === -1) {
+					mappedIndices[key] = index;
 					break;
 				}
 			}
@@ -300,7 +220,11 @@
 
 				// Also check if this column isn't already mapped to another field
 				const isAlreadyMapped = Object.entries(mappedIndices).some(
-					([field, index]) => field !== 'alreadyPrinted' && index === colIndex
+					([field, index]) =>
+						field !== 'alreadyPrinted' &&
+						index === colIndex &&
+						field !== 'sheetName' &&
+						index === colIndex
 				);
 
 				if (isEmpty && !isAlreadyMapped) {
@@ -327,10 +251,7 @@
 			if (existingData) {
 				const recentSheets = JSON.parse(existingData);
 				const savedSheet = recentSheets.find(
-					(sheet: SheetInfoType) =>
-						(sheet.id === $selectedSheet.spreadsheetId ||
-							sheet.spreadsheetId === $selectedSheet.spreadsheetId) &&
-						(sheet.sheetName === selectedSheetName || sheet.sheetMapping === selectedSheetName)
+					(sheet: SheetInfoType) => sheet.id === $selectedSheet.id
 				);
 
 				if (savedSheet && savedSheet.columnMapping) {
@@ -343,7 +264,8 @@
 						nationality: savedSheet.columnMapping.nationality ?? -1,
 						birthday: savedSheet.columnMapping.birthday ?? -1,
 						pictureUrl: savedSheet.columnMapping.pictureUrl ?? -1,
-						alreadyPrinted: savedSheet.columnMapping.alreadyPrinted ?? -1
+						alreadyPrinted: savedSheet.columnMapping.alreadyPrinted ?? -1,
+						sheetName: selectedSheetName
 					};
 
 					hasSavedMapping = true;
@@ -359,18 +281,34 @@
 	}
 
 	function handleColumnMapping(field: keyof ColumnMappingType, index: number) {
+		if (!mappedIndices) {
+			mappedIndices = {
+				name: -1,
+				surname: -1,
+				nationality: -1,
+				birthday: -1,
+				pictureUrl: -1,
+				alreadyPrinted: -1,
+				sheetName: selectedSheetName
+			};
+		}
 		mappedIndices[field] = index;
 		updateMappingStatus();
 	}
 
 	function updateMappingStatus() {
+		if (!mappedIndices) {
+			mappingComplete = false;
+			return;
+		}
 		// Only check required fields for completion
 		const requiredIndices = {
 			name: mappedIndices.name,
 			surname: mappedIndices.surname,
 			nationality: mappedIndices.nationality,
 			birthday: mappedIndices.birthday,
-			pictureUrl: mappedIndices.pictureUrl
+			pictureUrl: mappedIndices.pictureUrl,
+			sheetName: selectedSheetName
 		};
 
 		mappingComplete = Object.values(requiredIndices).every((index) => index !== -1);
@@ -383,7 +321,8 @@
 			nationality: mappedIndices.nationality,
 			birthday: mappedIndices.birthday,
 			pictureUrl: mappedIndices.pictureUrl,
-			alreadyPrinted: mappedIndices.alreadyPrinted
+			alreadyPrinted: mappedIndices.alreadyPrinted,
+			sheetName: selectedSheetName
 		});
 	}
 
@@ -399,8 +338,7 @@
 			// Find the current sheet in recent sheets and update its column mapping
 			const sheetIndex = recentSheets.findIndex(
 				(sheet: SheetInfoType) =>
-					(sheet.id === $selectedSheet.spreadsheetId ||
-						sheet.spreadsheetId === $selectedSheet.spreadsheetId) &&
+					(sheet.id === $selectedSheet.id || sheet.id === $selectedSheet.id) &&
 					(sheet.sheetName === selectedSheetName || sheet.sheetMapping === selectedSheetName)
 			);
 
@@ -410,7 +348,8 @@
 				nationality: mappedIndices.nationality,
 				birthday: mappedIndices.birthday,
 				pictureUrl: mappedIndices.pictureUrl,
-				alreadyPrinted: mappedIndices.alreadyPrinted
+				alreadyPrinted: mappedIndices.alreadyPrinted,
+				sheetName: selectedSheetName
 			};
 
 			if (sheetIndex !== -1) {
@@ -419,16 +358,12 @@
 				recentSheets[sheetIndex].lastUsed = new Date().toISOString();
 
 				// Ensure we have consistent property names
-				recentSheets[sheetIndex].spreadsheetId =
-					recentSheets[sheetIndex].spreadsheetId || recentSheets[sheetIndex].id;
-				recentSheets[sheetIndex].sheetMapping =
-					recentSheets[sheetIndex].sheetMapping || recentSheets[sheetIndex].sheetName;
+				recentSheets[sheetIndex].id = recentSheets[sheetIndex].id || recentSheets[sheetIndex].id;
 			} else {
 				// Add new entry
 				const newEntry = {
-					spreadsheetId: $selectedSheet.spreadsheetId,
+					id: $selectedSheet.id,
 					name: $selectedSheet.name,
-					sheetMapping: selectedSheetName,
 					columnMapping: columnMappingData,
 					lastUsed: new Date().toISOString()
 				};
@@ -461,7 +396,7 @@
 			try {
 				isLoadingData = true;
 				const range = `${selectedSheetName}!A1:Z10`;
-				const data = await getSheetData($selectedSheet.spreadsheetId, range);
+				const data = await getSheetData($selectedSheet.id, range);
 
 				if (data && data.length > 0) {
 					sheetHeaders = data[0];
@@ -510,15 +445,17 @@
 						<h3 class="text-sm font-medium text-blue-800">Saved Configuration Found</h3>
 						<div class="mt-2 text-sm text-blue-700">
 							<p>
-								Using saved mapping for sheet <span class="font-semibold">"{selectedSheetName}"</span> from
-								spreadsheet <span class="font-semibold">"{savedSheetInfo?.name}"</span>.
+								Using saved mapping for sheet <span class="font-semibold"
+									>"{selectedSheetName}"</span
+								>
+								from spreadsheet <span class="font-semibold">"{savedSheetInfo?.name}"</span>.
 							</p>
 						</div>
 					</div>
 					<div class="mt-3 md:mt-0 md:ml-6">
 						<button
 							onclick={handleShowEditor}
-							class="whitespace-nowrap rounded-md border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+							class="rounded-md border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none"
 						>
 							Edit Mapping
 						</button>
@@ -780,7 +717,8 @@
 								</div>
 								<div class="ml-3">
 									<p class="text-sm text-yellow-800">
-										Please map all required fields (<span class="text-red-500">*</span>) to continue.
+										Please map all required fields (<span class="text-red-500">*</span>) to
+										continue.
 									</p>
 								</div>
 							</div>