mirror of
https://github.com/immich-app/static-pages.git
synced 2026-09-30 13:23:05 +08:00
feat: add skip button to additional Immich questions section
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { sections } from '$lib/survey-definition';
|
||||
import type { SurveySection } from '$lib/types';
|
||||
import { Button } from '@immich/ui';
|
||||
|
||||
@@ -6,16 +7,17 @@
|
||||
section: SurveySection;
|
||||
onContinue: () => void;
|
||||
onBack?: () => void;
|
||||
onSkip?: () => void;
|
||||
canGoBack?: boolean;
|
||||
}
|
||||
|
||||
let { section, onContinue, onBack, canGoBack = false }: Props = $props();
|
||||
let { section, onContinue, onBack, onSkip, canGoBack = false }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="flex min-h-screen flex-col items-center justify-center gap-4 p-6">
|
||||
<div class="flex max-w-[640px] flex-col gap-4">
|
||||
<span class="text-sm font-medium uppercase tracking-wider text-gray-400">
|
||||
Section {section.number} of 5
|
||||
Section {section.number} of {sections.length}
|
||||
</span>
|
||||
<h1 class="text-3xl font-bold">{section.title}</h1>
|
||||
{#if section.description}
|
||||
@@ -26,6 +28,14 @@
|
||||
<Button variant="outline" onclick={onBack}>Back</Button>
|
||||
{/if}
|
||||
<Button color="primary" onclick={onContinue}>Continue</Button>
|
||||
{#if onSkip}
|
||||
<button
|
||||
onclick={onSkip}
|
||||
class="text-sm text-gray-500 hover:text-gray-300 transition-colors"
|
||||
>
|
||||
Skip this section
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -39,6 +39,8 @@
|
||||
findNextVisibleIndex(engine.currentIndex, questions, engine.answers) >= questions.length,
|
||||
);
|
||||
|
||||
const skippableSectionNumbers = new Set([5]);
|
||||
|
||||
function dismissSection() {
|
||||
if (currentSection) {
|
||||
dismissedSections.add(currentSection.number);
|
||||
@@ -47,6 +49,17 @@
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
|
||||
function skipSection() {
|
||||
if (!currentSection) return;
|
||||
const nextSection = sections.find((s) => s.number === currentSection!.number + 1);
|
||||
if (nextSection) {
|
||||
engine.goTo(nextSection.questionIds[0]);
|
||||
}
|
||||
dismissedSections.add(currentSection.number);
|
||||
dismissedSections = new Set(dismissedSections);
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
|
||||
function handleAnswer(questionId: string, value: string, otherText?: string) {
|
||||
onAnswer(questionId, value, otherText);
|
||||
}
|
||||
@@ -115,6 +128,7 @@
|
||||
section={currentSection}
|
||||
onContinue={dismissSection}
|
||||
onBack={handleBack}
|
||||
onSkip={skippableSectionNumbers.has(currentSection.number) ? skipSection : undefined}
|
||||
canGoBack={currentSection.number > 1}
|
||||
/>
|
||||
{:else if engine.currentQuestion}
|
||||
|
||||
Reference in New Issue
Block a user