Connect Download Button to PDF Generation

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)