erman/card-forge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed first two steps

Browse Source
This commit is contained in:
Roman Krček
2025-07-17 20:41:09 +02:00
parent 735e13731c
commit ffa427d42c
5 changed files with 476 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/lib/components/wizard/StepSheetSearch.svelte
View File

@@ -3,12 +3,12 @@
import { searchSheets } from '$lib/google';
import { onMount } from 'svelte';
let searchQuery = '';
let isLoading = false;
let error = '';
let searchResults: any[] = [];
let hasSearched = false;
let recentSheets: any[] = [];
let searchQuery = $state('');
let isLoading = $state(false);
let error = $state('');
let searchResults = $state<any[]>([]);
let hasSearched = $state(false);
let recentSheets = $state<any[]>([]);
const RECENT_SHEETS_KEY = 'esn-recent-sheets';
@@ -26,7 +26,7 @@
searchResults = await searchSheets(searchQuery);
availableSheets.set(
searchResults.map(sheet => ({
id: sheet.id,
spreadsheetId: sheet.spreadsheetId || sheet.id,
name: sheet.name,
url: sheet.webViewLink
}))
@@ -56,17 +56,19 @@
}
}
function handleSelectSheet(sheet) {
function handleSelectSheet(sheet) {
const sheetData = {
id: sheet.id,
spreadsheetId: sheet.spreadsheetId || sheet.id,
name: sheet.name,
url: sheet.webViewLink || sheet.url
};
selectedSheet.set(sheetData);
}
let canProceed = $derived($selectedSheet !== null);
function handleContinue() {
if (!canProceed) return;
currentStep.set(3); // Move to the column mapping step
}
</script>
@@ -96,10 +98,11 @@
bind:value={searchQuery}
placeholder="Type sheet name..."
class="flex-grow px-4 py-2 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-blue-600 focus:border-transparent"
onkeydown={e => { if (e.key === 'Enter') handleSearch(); }}
/>
<button
on:click={handleSearch}
onclick={handleSearch}
disabled={isLoading || !searchQuery.trim()}
class="px-4 py-2 bg-blue-600 text-white rounded-r-lg hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed"
>
@@ -131,9 +134,11 @@
<div class="space-y-3">
{#each searchResults as sheet}
<div
class="border rounded-lg p-4 cursor-pointer transition-colors hover:bg-gray-50
{$selectedSheet?.id === sheet.id ? 'border-blue-500 bg-blue-50' : 'border-gray-200'}"
on:click={() => handleSelectSheet(sheet)}
class="border rounded-lg p-4 cursor-pointer transition-colors hover:bg-gray-50 {$selectedSheet?.spreadsheetId === (sheet.spreadsheetId || sheet.id) ? 'border-blue-500 bg-blue-50' : 'border-gray-200'}"
onclick={() => handleSelectSheet(sheet)}
tabindex="0"
role="button"
onkeydown={e => { if (e.key === 'Enter' || e.key === ' ') handleSelectSheet(sheet); }}
>
<div class="flex items-center justify-between">
<div>
@@ -146,7 +151,7 @@
<img src={sheet.iconLink} alt="Sheet icon" class="w-5 h-5 mr-2" />
{/if}
{#if $selectedSheet?.id === sheet.id}
{#if $selectedSheet?.spreadsheetId === (sheet.spreadsheetId || sheet.id)}
<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
</svg>
@@ -176,9 +181,11 @@
<div class="space-y-3">
{#each recentSheets as sheet}
<div
class="border rounded-lg p-4 cursor-pointer transition-colors hover:bg-gray-50
{$selectedSheet?.id === sheet.id ? 'border-blue-500 bg-blue-50' : 'border-gray-200'}"
on:click={() => handleSelectSheet(sheet)}
class="border rounded-lg p-4 cursor-pointer transition-colors hover:bg-gray-50 {$selectedSheet?.spreadsheetId === (sheet.spreadsheetId || sheet.id) ? 'border-blue-500 bg-blue-50' : 'border-gray-200'}"
onclick={() => handleSelectSheet(sheet)}
tabindex="0"
role="button"
onkeydown={e => { if (e.key === 'Enter' || e.key === ' ') handleSelectSheet(sheet); }}
>
<div class="flex items-center justify-between">
<div>
@@ -191,7 +198,7 @@
<img src={sheet.iconLink} alt="Sheet icon" class="w-5 h-5 mr-2" />
{/if}
{#if $selectedSheet?.id === sheet.id}
{#if $selectedSheet?.spreadsheetId === (sheet.spreadsheetId || sheet.id)}
<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
</svg>
@@ -221,16 +228,24 @@
{/if}
{/if}
<!-- Continue button -->
{#if $selectedSheet}
<div class="mt-6 flex justify-end">
<button
on:click={handleContinue}
class="px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700"
>
Continue →
</button>
</div>
{/if}
<!-- Navigation -->
<div class="flex justify-between">
<button
onclick={() => currentStep.set(1)}
class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg font-medium hover:bg-gray-300"
>
← Back to Auth
</button>
<button
onclick={handleContinue}
disabled={!canProceed}
class="px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed"
>
{canProceed
? 'Continue →'
: 'Select a sheet to continue'}
</button>
</div>
</div>
</div>