Fixed card details
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user