3
3.3

# Connect Download Button to PDF Generation

ready-for-dev
2025-12-01
BMAD Story Context Workflow
docs/sprint-artifacts/3-3-connect-download-button-to-pdf-generation.md
user
to click the download button and get my PDF
I can use my resume for job applications
- Update ResumeDownloadButton component to use useResumePdf composable - Bind loading and disabled states to button - Connect click handler to downloadPdf function - Test full download flow
Given I click the download button, when PDF generation starts, then the button shows loading spinner
The button is disabled during PDF generation
Given PDF generation succeeds, when the PDF is ready, then the browser downloads the file
Downloaded filename is "Ali_Arghyani_Resume.pdf"
Button returns to normal state after download completes
Given PDF generation fails, when the error occurs, then a toast notification appears
Button returns to normal state after error
Button works correctly after error (can retry)
docs/architecture.md

# Resume Export Feature - Architecture Document

Loading State
UButton with :loading="isGenerating" :disabled="isGenerating" @click="downloadPdf"
docs/sprint-artifacts/tech-spec-epic-3.md

# Epic Technical Specification: PDF Export

AC6: Loading State
Button shows loading spinner, button is disabled, loading clears when complete
app/components/resume/ResumeDownloadButton.vue
Existing download button component with placeholder handler (from Story 2.5)
handleDownload (to be replaced), isPrintMode prop
<script setup lang="ts"> interface Props { isPrintMode?: boolean }

defineProps<Props>()

function handleDownload() { // Placeholder - will be replaced in Epic 3 Story 3.3 console.log('Download PDF clicked') } </script>

<template> <UButton v-if="!isPrintMode" icon="i-heroicons-arrow-down-tray" size="lg" color="primary" class="fixed bottom-6 right-6 shadow-lg no-print z-50" @click="handleDownload" > <span class="hidden sm:inline">Download PDF</span> </UButton> </template>
app/composables/useResumePdf.ts
Composable providing isGenerating and downloadPdf (Story 3.2)
useResumePdf(), isGenerating, downloadPdf
- Must preserve existing isPrintMode prop functionality - Must preserve existing styling (fixed position, shadow, z-index) - Must preserve responsive text (hidden on mobile) - Must remove placeholder handleDownload function - Must use useResumePdf() composable - Must bind :loading and :disabled to isGenerating - Must bind @click to downloadPdf
useResumePdf Vue composable function useResumePdf(): { isGenerating: Ref<boolean>, downloadPdf: () => Promise<void> } app/composables/useResumePdf.ts UButton Nuxt UI component <UButton :loading="boolean" :disabled="boolean" @click="handler" /> @nuxt/ui
Vue component testing with Vitest and @vue/test-utils. Test user interactions.
app/components/**/*.spec.ts, tests/
Click button, verify loading spinner appears (check loading prop or spinner element)
During generation, verify button has disabled attribute
Mock successful API, verify file download triggered
Verify downloaded file has correct filename
After success, verify loading spinner gone and button enabled
Mock API error, verify toast notification appears
After error, verify button returns to normal state
After error, click button again, verify it works (retry)