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

Fixed card details

Browse Source
This commit is contained in:
Roman Krček
2025-08-06 14:34:44 +02:00
parent 3af8c116a4
commit ebb14e9e1a
1 changed files with 36 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/lib/components/wizard/StepCardDetails.svelte
View File

@@ -1,25 +1,34 @@
<script lang="ts">
import { currentStep, cardDetails } from '$lib/stores';
import Navigator from './subcomponents/Navigator.svelte';
import { onMount } from 'svelte';
// Initialize from localStorage if available, otherwise from the store
let homeSection = $state(
(typeof window !== 'undefined' && window.localStorage.getItem('homeSection')) ||
$cardDetails.homeSection
);
let validityStart = $state($cardDetails.validityStart || new Date().toISOString().split('T')[0]);
let homeSection = $state('');
let validityStart = $state('');
// Persist homeSection to localStorage whenever it changes
$effect(() => {
if (typeof window !== 'undefined') {
localStorage.setItem('homeSection', homeSection);
onMount(() => {
validityStart = new Date().toISOString().split('T')[0];
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() !== '');
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>
@@ -33,7 +42,7 @@
<div class="space-y-6">
<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
</label>
<input
@@ -46,7 +55,7 @@
</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
</label>
<input
@@ -55,18 +64,20 @@
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"
/>
<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 class="mt-10">
<Navigator
canProceed={canProceed}
currentStep={currentStep}
onForward={handleContinue}
textBack="Back to Row Filtering"
textForwardEnabled="Continue to Photo Review"
textForwardDisabled="Please fill out all fields"
/>
</div>
<div class="mt-10">
<Navigator
{canProceed}
{currentStep}
onForward={handleContinue}
textBack="Back to Row Filtering"
textForwardEnabled="Continue to Photo Review"
textForwardDisabled="Please fill out all fields"
/>
</div>
</div>