From 0fe0c9ddd2981f986ee350f5827c4741245b6e90 Mon Sep 17 00:00:00 2001
From: Felipe Fernandes <mewbi.fernandes@gmail.com>
Date: Sat, 31 Jan 2026 20:17:45 -0300
Subject: [PATCH] feat: add retrospective export functionality

- Add export button with dropdown menu (JSON, Markdown, PDF options)
- Create ExportRetroButton component with click-outside dropdown behavior
- Add DownloadIcon component
- Add exportRetrospective API function and endpoint

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/components/core/ExportRetroButton.vue     | 101 ++++++++++++++++++
 src/components/icons/DownloadIcon.vue         |  19 ++++
 .../retrospective/RetrospectiveLayout.vue     |   2 +
 src/services/index.ts                         |   3 +
 src/services/retrospectiveApi.ts              |  30 +++++-
 5 files changed, 153 insertions(+), 2 deletions(-)
 create mode 100644 src/components/core/ExportRetroButton.vue
 create mode 100644 src/components/icons/DownloadIcon.vue

diff --git a/src/components/core/ExportRetroButton.vue b/src/components/core/ExportRetroButton.vue
new file mode 100644
index 0000000..f3ea65f
--- /dev/null
+++ b/src/components/core/ExportRetroButton.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+  import { onBeforeUnmount, onMounted, ref } from 'vue';
+  import { NotificationType, useNotifyStore } from '../../stores/notifyStore';
+  import { useRetrospectiveStore } from '../../stores/retrospectiveStore';
+  import retrospectiveApi from '../../services/retrospectiveApi';
+  import { ExportType } from '../../services/index';
+  import DownloadIcon from '../icons/DownloadIcon.vue';
+  import BaseButton from './BaseButton.vue';
+  import logger from '../../services/logger';
+
+  const notifyStore = useNotifyStore();
+  const retroStore = useRetrospectiveStore();
+
+  const showDropdown = ref(false);
+  const isExporting = ref(false);
+  const containerRef = ref<HTMLElement | null>(null);
+
+  const exportOptions: { label: string; type: ExportType; extension: string }[] = [
+    { label: 'JSON', type: 'JSON', extension: 'json' },
+    { label: 'Markdown', type: 'MARKDOWN', extension: 'md' },
+    { label: 'PDF', type: 'PDF', extension: 'pdf' },
+  ];
+
+  const handleExport = async (exportType: ExportType, extension: string) => {
+    if (!retroStore.currentRetro?.id) return;
+
+    isExporting.value = true;
+    showDropdown.value = false;
+
+    const result = await retrospectiveApi.exportRetrospective(
+      retroStore.currentRetro.id,
+      exportType,
+    );
+
+    isExporting.value = false;
+
+    if (result.error) {
+      logger.error('Error exporting retrospective');
+      notifyStore.notify('Failed to export retrospective', NotificationType.Error);
+      return;
+    }
+
+    const filename = `retrospective-${retroStore.currentRetro.name.replace(/ /g, '_')}.${extension}`;
+    const url = window.URL.createObjectURL(result);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    window.URL.revokeObjectURL(url);
+
+    notifyStore.notify('Retrospective exported successfully!', NotificationType.Success);
+  };
+
+  const toggleDropdown = () => {
+    showDropdown.value = !showDropdown.value;
+  };
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (containerRef.value && !containerRef.value.contains(event.target as Node)) {
+      showDropdown.value = false;
+    }
+  };
+
+  onMounted(() => {
+    document.addEventListener('click', handleClickOutside);
+  });
+
+  onBeforeUnmount(() => {
+    document.removeEventListener('click', handleClickOutside);
+  });
+</script>
+
+<template>
+  <div ref="containerRef" class="relative">
+    <BaseButton
+      class="font-bold flex gap-2"
+      :style="'WHITE'"
+      :disabled="isExporting"
+      @click="toggleDropdown"
+    >
+      <DownloadIcon :size="18" />
+      {{ isExporting ? 'Exporting...' : 'Export' }}
+    </BaseButton>
+
+    <div
+      v-if="showDropdown"
+      class="absolute right-0 mt-2 w-40 bg-white border border-gray-300 rounded-md shadow-lg z-10"
+    >
+      <button
+        v-for="option in exportOptions"
+        :key="option.type"
+        class="block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 first:rounded-t-md last:rounded-b-md"
+        @click="handleExport(option.type, option.extension)"
+      >
+        {{ option.label }}
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/src/components/icons/DownloadIcon.vue b/src/components/icons/DownloadIcon.vue
new file mode 100644
index 0000000..f6cd390
--- /dev/null
+++ b/src/components/icons/DownloadIcon.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+  defineProps<{ size: number }>();
+</script>
+
+<template>
+  <!--Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.!-->
+
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 512 512"
+    fill="currentColor"
+    :width="size"
+    :height="size"
+  >
+    <path
+      d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"
+    />
+  </svg>
+</template>
diff --git a/src/components/retrospective/RetrospectiveLayout.vue b/src/components/retrospective/RetrospectiveLayout.vue
index dffd124..d195dd0 100644
--- a/src/components/retrospective/RetrospectiveLayout.vue
+++ b/src/components/retrospective/RetrospectiveLayout.vue
@@ -4,6 +4,7 @@
   import ModalifyComponent from '../core/ModalifyComponent.vue';
   import QuestionLayout from '../question/QuestionLayout.vue';
   import ShareRetro from '../core/ShareRetroButton.vue';
+  import ExportRetro from '../core/ExportRetroButton.vue';
   import CreateQuestion from '../question/CreateQuestion.vue';
   import { storeToRefs } from 'pinia';
   import { RouterLink } from 'vue-router';
@@ -28,6 +29,7 @@
         </h1>
         <div class="flex gap-2 ml-4">
           <ShareRetro />
+          <ExportRetro />
           <RouterLink
             class="flex self-center flex-shrink-0"
             :to="{ name: 'retrospective.edit', params: { id: retrospective.id } }"
diff --git a/src/services/index.ts b/src/services/index.ts
index f061788..5224db2 100644
--- a/src/services/index.ts
+++ b/src/services/index.ts
@@ -5,12 +5,15 @@ export const API_URL = import.meta.env.VITE_API_URL;
 export enum Endpoints {
   Question = '/question',
   Retrospective = '/retrospective',
+  RetrospectiveExport = '/retrospective/export',
   Answer = '/answer',
   VoteAnswer = '/answer/vote',
   SocketHello = '/hello',
   Limits = '/limits',
 }
 
+export type ExportType = 'JSON' | 'MARKDOWN' | 'PDF';
+
 export const apiRequest = axios.create({
   baseURL: `${import.meta.env.PROD ? 'https' : 'http'}://${API_URL}`,
   withCredentials: true,
diff --git a/src/services/retrospectiveApi.ts b/src/services/retrospectiveApi.ts
index 0d61684..bc9bcae 100644
--- a/src/services/retrospectiveApi.ts
+++ b/src/services/retrospectiveApi.ts
@@ -1,4 +1,4 @@
-import { Endpoints, MayBeError, apiRequest } from './index';
+import { Endpoints, ExportType, MayBeError, apiRequest } from './index';
 import { ID, Retrospective } from '../stores/retrospectiveStore';
 
 const createRetrospective = async (
@@ -43,4 +43,30 @@ const updateRetrospective = async (
   return result.data;
 };
 
-export default { createRetrospective, getRetrospective, deleteRestrospective, updateRetrospective };
+const exportRetrospective = async (
+  retrospectiveId: string,
+  exportType: ExportType,
+): Promise<MayBeError<Blob>> => {
+  const result = await apiRequest
+    .post(
+      Endpoints.RetrospectiveExport,
+      {
+        retrospective_id: retrospectiveId,
+        export_type: exportType,
+      },
+      { responseType: 'blob' },
+    )
+    .catch(() => null);
+
+  if (!result) return { error: true };
+
+  return result.data;
+};
+
+export default {
+  createRetrospective,
+  getRetrospective,
+  deleteRestrospective,
+  updateRetrospective,
+  exportRetrospective,
+};