feat(export): t-paliad-214 Slice 1 frontend — Datenexport tab on /settings

Adds a 4th tab "Datenexport" to /settings (after Profil / Benachrichtigungen / CalDAV) with a single-button card that triggers GET /api/me/export. Browser handles the download via Content-Disposition: attachment. i18n: 12 new keys under einstellungen.export.* (DE primary, EN secondary) — subtitle, bullets per format, scope notice, audit notice, button label, post-click hint. The tab is loaded lazily (idempotent loadExportTab) like every other settings tab, and the runExport handler swaps in a transient <a download> to use the browser's normal download pipeline.
2026-05-19 12:51:23 +02:00
parent b2b9d51dac
commit 7fb3538a8c
4 changed files with 124 additions and 2 deletions
--- a/frontend/src/client/i18n.ts
+++ b/frontend/src/client/i18n.ts
@@ -1126,6 +1126,17 @@ const translations: Record<Lang, Record<string, string>> = {
    "einstellungen.tab.profil": "Profil",
    "einstellungen.tab.benachrichtigungen": "Benachrichtigungen",
    "einstellungen.tab.caldav": "CalDAV",
+    "einstellungen.tab.export": "Datenexport",
+    "einstellungen.export.subtitle": "Laden Sie Ihre pers\u00f6nlichen Paliad-Daten als Excel- + JSON- + CSV-Paket herunter. Enthalten ist alles, was Sie aktuell sehen k\u00f6nnen \u2014 Ihre Projekte, Fristen, Termine, Notizen, Genehmigungen und Einstellungen.",
+    "einstellungen.export.heading": "Pers\u00f6nlicher Datenexport",
+    "einstellungen.export.what": "Das Paket enth\u00e4lt Ihre sichtbaren Daten in drei Formaten in einem .zip:",
+    "einstellungen.export.bullet.xlsx": "paliad-export.xlsx \u2014 eine Excel-Mappe pro Entit\u00e4t.",
+    "einstellungen.export.bullet.json": "paliad-export.json \u2014 maschinenlesbare Kopie f\u00fcr Skripte und Tools.",
+    "einstellungen.export.bullet.csv": "csv/<sheet>.csv \u2014 Tabellen einzeln als CSV (UTF-8 mit BOM).",
+    "einstellungen.export.scope": "Umfang: alles, was Sie aktuell in Paliad sehen k\u00f6nnen (Sichtbarkeit zum Zeitpunkt des Exports). Passw\u00f6rter, CalDAV-Zugangsdaten und andere Geheimnisse werden nie exportiert.",
+    "einstellungen.export.audit": "Jeder Export wird im Audit-Log protokolliert.",
+    "einstellungen.export.button": "Daten exportieren",
+    "einstellungen.export.started": "Download gestartet. Falls nichts passiert, pr\u00fcfen Sie Ihren Browser-Downloadordner.",
    "projects.title": "Projekte \u2014 Paliad",
    "projects.heading": "Projekte",
    "projects.subtitle": "Mandanten, Streitsachen, Patente und Verfahren \u2014 hierarchisch organisiert.",
@@ -3702,6 +3713,17 @@ const translations: Record<Lang, Record<string, string>> = {
    "einstellungen.tab.profil": "Profile",
    "einstellungen.tab.benachrichtigungen": "Notifications",
    "einstellungen.tab.caldav": "CalDAV",
+    "einstellungen.tab.export": "Data export",
+    "einstellungen.export.subtitle": "Download your personal Paliad data as an Excel + JSON + CSV bundle. The package contains everything you can currently see \u2014 your projects, deadlines, appointments, notes, approvals and settings.",
+    "einstellungen.export.heading": "Personal data export",
+    "einstellungen.export.what": "The package contains your visible data in three formats in one .zip:",
+    "einstellungen.export.bullet.xlsx": "paliad-export.xlsx \u2014 one Excel sheet per entity.",
+    "einstellungen.export.bullet.json": "paliad-export.json \u2014 machine-readable copy for scripts and tools.",
+    "einstellungen.export.bullet.csv": "csv/<sheet>.csv \u2014 individual tables as CSV (UTF-8 with BOM).",
+    "einstellungen.export.scope": "Scope: everything you can currently see in Paliad (visibility at the moment of export). Passwords, CalDAV credentials and other secrets are never exported.",
+    "einstellungen.export.audit": "Every export is logged in the audit log.",
+    "einstellungen.export.button": "Export data",
+    "einstellungen.export.started": "Download started. If nothing happens, check your browser's downloads folder.",
    "projects.title": "Projects \u2014 Paliad",
    "projects.heading": "Projects",
    "projects.subtitle": "Clients, litigations, patents and cases \u2014 organised hierarchically.",
--- a/frontend/src/client/settings.ts
+++ b/frontend/src/client/settings.ts
@@ -51,8 +51,8 @@ interface SyncLogEntry {
  duration_ms?: number;
 }

-type TabName = "profil" | "benachrichtigungen" | "caldav";
-const TABS: TabName[] = ["profil", "benachrichtigungen", "caldav"];
+type TabName = "profil" | "benachrichtigungen" | "caldav" | "export";
+const TABS: TabName[] = ["profil", "benachrichtigungen", "caldav", "export"];
 const DEFAULT_TAB: TabName = "profil";

 let me: Me | null = null;
@@ -115,6 +115,7 @@ function showTab(tab: TabName, pushHistory: boolean) {
    if (tab === "profil") void loadProfilTab();
    else if (tab === "benachrichtigungen") void loadPrefsTab();
    else if (tab === "caldav") void loadCalDAVTab();
+    else if (tab === "export") void loadExportTab();
  }
 }

@@ -662,6 +663,48 @@ async function renderMyPartnerUnits(): Promise<void> {
  }
 }

+// --- Export tab (t-paliad-214 Slice 1) -------------------------------------
+
+// Personal data export. One button; on click hits GET /api/me/export and the
+// browser handles the download via Content-Disposition. We use an anchor +
+// hidden iframe pattern so any non-200 response can surface inline instead
+// of silently triggering a save dialog with an error-html body.
+async function loadExportTab(): Promise<void> {
+  // Nothing to fetch on render; the tab is static text + button. Wired in
+  // the DOMContentLoaded handler.
+}
+
+function runExport(): void {
+  const msg = document.getElementById("export-msg");
+  const btn = document.getElementById("export-btn") as HTMLButtonElement | null;
+  if (msg) msg.textContent = "";
+  if (btn) btn.disabled = true;
+  // Trigger a navigation to the endpoint. The server sets
+  // Content-Disposition: attachment which the browser respects.
+  // We use a transient <a download> so the click goes through the
+  // normal download path even on browsers that try to render text/json.
+  const a = document.createElement("a");
+  a.href = "/api/me/export";
+  // download="" tells the browser to keep the server-provided filename
+  // when one is set via Content-Disposition.
+  a.download = "";
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  // Re-enable after a short timeout so users can re-trigger if needed.
+  // We don't try to detect download completion — there's no portable
+  // browser API for it.
+  if (btn) {
+    setTimeout(() => {
+      btn.disabled = false;
+      if (msg)
+        msg.textContent =
+          t("einstellungen.export.started") ||
+          "Download gestartet. Falls nichts passiert, prüfen Sie Ihren Browser-Downloadordner.";
+    }, 500);
+  }
+}
+
 // --- Init -------------------------------------------------------------------

 document.addEventListener("DOMContentLoaded", () => {
@@ -674,6 +717,8 @@ document.addEventListener("DOMContentLoaded", () => {
  document.getElementById("caldav-form")!.addEventListener("submit", saveCalDAV);
  document.getElementById("caldav-test-btn")!.addEventListener("click", testCalDAVConnection);
  document.getElementById("caldav-delete-btn")!.addEventListener("click", deleteCalDAVConfig);
+  const exportBtn = document.getElementById("export-btn");
+  if (exportBtn) exportBtn.addEventListener("click", runExport);

  onLangChange(() => {
    if (loadedTabs.has("profil")) renderOfficeOptions();
--- a/frontend/src/i18n-keys.ts
+++ b/frontend/src/i18n-keys.ts
@@ -1229,6 +1229,16 @@ export type I18nKey =
  | "downloads.subtitle"
  | "downloads.title"
  | "einstellungen.error.generic"
+  | "einstellungen.export.audit"
+  | "einstellungen.export.bullet.csv"
+  | "einstellungen.export.bullet.json"
+  | "einstellungen.export.bullet.xlsx"
+  | "einstellungen.export.button"
+  | "einstellungen.export.heading"
+  | "einstellungen.export.scope"
+  | "einstellungen.export.started"
+  | "einstellungen.export.subtitle"
+  | "einstellungen.export.what"
  | "einstellungen.heading"
  | "einstellungen.loading"
  | "einstellungen.optional"
@@ -1272,6 +1282,7 @@ export type I18nKey =
  | "einstellungen.subtitle"
  | "einstellungen.tab.benachrichtigungen"
  | "einstellungen.tab.caldav"
+  | "einstellungen.tab.export"
  | "einstellungen.tab.profil"
  | "einstellungen.title"
  | "event.description.appointment_approval_approved"
--- a/frontend/src/settings.tsx
+++ b/frontend/src/settings.tsx
@@ -40,6 +40,7 @@ export function renderSettings(): string {
                <a className="entity-tab" data-tab="profil" href="?tab=profil" data-i18n="einstellungen.tab.profil">Profil</a>
                <a className="entity-tab" data-tab="benachrichtigungen" href="?tab=benachrichtigungen" data-i18n="einstellungen.tab.benachrichtigungen">Benachrichtigungen</a>
                <a className="entity-tab" data-tab="caldav" href="?tab=caldav" data-i18n="einstellungen.tab.caldav">CalDAV</a>
+                <a className="entity-tab" data-tab="export" href="?tab=export" data-i18n="einstellungen.tab.export">Datenexport</a>
              </nav>

              {/* --- Profil tab ---------------------------------------- */}
@@ -342,6 +343,49 @@ export function renderSettings(): string {
                </div>
              </section>

+              {/* --- Datenexport tab (t-paliad-214 Slice 1) ----------- */}
+              <section className="entity-tab-panel" id="tab-export" style="display:none">
+                <p className="tool-subtitle" data-i18n="einstellungen.export.subtitle">
+                  Laden Sie Ihre pers&ouml;nlichen Paliad-Daten als Excel- + JSON- + CSV-Paket herunter.
+                  Enthalten ist alles, was Sie aktuell sehen k&ouml;nnen &mdash; Ihre Projekte, Fristen, Termine, Notizen, Genehmigungen und Einstellungen.
+                </p>
+
+                <div className="caldav-info-card">
+                  <h2 data-i18n="einstellungen.export.heading">Pers&ouml;nlicher Datenexport</h2>
+                  <p data-i18n="einstellungen.export.what">
+                    Das Paket enth&auml;lt Ihre sichtbaren Daten in drei Formaten in einem <code>.zip</code>:
+                  </p>
+                  <ul className="form-hint settings-export-list">
+                    <li data-i18n="einstellungen.export.bullet.xlsx">
+                      <strong>paliad-export.xlsx</strong> &mdash; eine Excel-Mappe pro Entit&auml;t.
+                    </li>
+                    <li data-i18n="einstellungen.export.bullet.json">
+                      <strong>paliad-export.json</strong> &mdash; maschinenlesbare Kopie f&uuml;r Skripte und Tools.
+                    </li>
+                    <li data-i18n="einstellungen.export.bullet.csv">
+                      <strong>csv/&lt;sheet&gt;.csv</strong> &mdash; Tabellen einzeln als CSV (UTF-8 mit BOM).
+                    </li>
+                  </ul>
+
+                  <p className="form-hint" data-i18n="einstellungen.export.scope">
+                    Umfang: alles, was Sie aktuell in Paliad sehen k&ouml;nnen (Sichtbarkeit zum Zeitpunkt des Exports).
+                    Passw&ouml;rter, CalDAV-Zugangsdaten und andere Geheimnisse werden nie exportiert.
+                  </p>
+
+                  <p className="form-hint" data-i18n="einstellungen.export.audit">
+                    Jeder Export wird im Audit-Log protokolliert.
+                  </p>
+
+                  <p className="form-msg" id="export-msg" />
+
+                  <div className="form-actions">
+                    <button type="button" id="export-btn" className="btn-primary btn-cta-lime" data-i18n="einstellungen.export.button">
+                      Daten exportieren
+                    </button>
+                  </div>
+                </div>
+              </section>
+
            </div>
          </section>
        </main>