Fixed card details

This commit is contained in:
Roman Krček
2025-08-06 14:34:44 +02:00
parent 3af8c116a4
commit ebb14e9e1a

View File

@@ -1,25 +1,34 @@
<script lang="ts"> <script lang="ts">
import { currentStep, cardDetails } from '$lib/stores'; import { currentStep, cardDetails } from '$lib/stores';
import Navigator from './subcomponents/Navigator.svelte'; import Navigator from './subcomponents/Navigator.svelte';
import { onMount } from 'svelte';
// Initialize from localStorage if available, otherwise from the store let homeSection = $state('');
let homeSection = $state( let validityStart = $state('');
(typeof window !== 'undefined' && window.localStorage.getItem('homeSection')) ||
$cardDetails.homeSection
);
let validityStart = $state($cardDetails.validityStart || new Date().toISOString().split('T')[0]);
// Persist homeSection to localStorage whenever it changes onMount(() => {
$effect(() => { validityStart = new Date().toISOString().split('T')[0];
if (typeof window !== 'undefined') {
localStorage.setItem('homeSection', homeSection); try {
const savedHomeSection = localStorage.getItem('homeSection');
if (savedHomeSection) {
homeSection = savedHomeSection;
}
} catch (error) {
console.error('Failed to access localStorage on mount:', error);
} }
}); });
let canProceed = $derived(homeSection.trim() !== '' && validityStart.trim() !== ''); let canProceed = $derived(homeSection.trim() !== '' && validityStart.trim() !== '');
function handleContinue() { function handleContinue() {
cardDetails.set({ homeSection, validityStart }); try {
localStorage.setItem('homeSection', homeSection);
} catch (error) {
console.error('Failed to save to localStorage:', error);
}
$cardDetails = { homeSection, validityStart };
$currentStep++;
} }
</script> </script>
@@ -33,7 +42,7 @@
<div class="space-y-6"> <div class="space-y-6">
<div> <div>
<label for="homeSection" class="block text-sm font-medium text-gray-700 mb-2"> <label for="homeSection" class="mb-2 block text-sm font-medium text-gray-700">
Home Section Home Section
</label> </label>
<input <input
@@ -46,7 +55,7 @@
</div> </div>
<div> <div>
<label for="validityStart" class="block text-sm font-medium text-gray-700 mb-2"> <label for="validityStart" class="mb-2 block text-sm font-medium text-gray-700">
Card Validity Start Date Card Validity Start Date
</label> </label>
<input <input
@@ -55,18 +64,20 @@
bind:value={validityStart} bind:value={validityStart}
class="w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-gray-900 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none" class="w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-gray-900 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none"
/> />
<p class="mt-2 text-xs text-gray-500">Default date is today, but future date can be selected.</p> <p class="mt-2 text-xs text-gray-500">
Default date is today, but future date can be selected.
</p>
</div> </div>
</div> </div>
<div class="mt-10"> <div class="mt-10">
<Navigator <Navigator
canProceed={canProceed} {canProceed}
currentStep={currentStep} {currentStep}
onForward={handleContinue} onForward={handleContinue}
textBack="Back to Row Filtering" textBack="Back to Row Filtering"
textForwardEnabled="Continue to Photo Review" textForwardEnabled="Continue to Photo Review"
textForwardDisabled="Please fill out all fields" textForwardDisabled="Please fill out all fields"
/> />
</div> </div>
</div> </div>