Export saved data (#400)

src/components/EditorHeader/ControlPanel.jsx

@@ -77,6 +77,7 @@ import { jsonToDocumentation } from "../../utils/exportAs/documentation";
 import { IdContext } from "../Workspace";
 import { socials } from "../../data/socials";
 import { toDBML } from "../../utils/exportAs/dbml";
+import { exportSavedData } from "../../utils/exportSavedData";
 
 export default function ControlPanel({
   diagramId,
@@ -1419,6 +1420,9 @@ export default function ControlPanel({
       language: {
         function: () => setModal(MODAL.LANGUAGE),
       },
+      export_saved_data: {
+        function: exportSavedData,
+      },
       flush_storage: {
         warning: {
           title: t("flush_storage"),

src/i18n/locales/en.js

@@ -249,6 +249,7 @@ const en = {
     supported_types: "Supported file types:",
     bulk_update: "Bulk update",
     multiselect: "Multiselect",
+    export_saved_data: "Export saved data",
   },
 };
 

src/utils/exportSavedData.js

@@ -0,0 +1,35 @@
+import JSZip from "jszip";
+import { db } from "../data/db";
+import { saveAs } from "file-saver";
+
+const zip = new JSZip();
+
+export async function exportSavedData() {
+  const diagramsFolder = zip.folder("diagrams");
+
+  await db.diagrams.each((diagram) => {
+    diagramsFolder.file(
+      `${diagram.name}(${diagram.id}).json`,
+      JSON.stringify(diagram, null, 2),
+    );
+    return true;
+  });
+
+  const templatesFolder = zip.folder("templates");
+
+  await db.templates.where({ custom: 1 }).each((template) => {
+    templatesFolder.file(
+      `${template.title}(${template.id}).json`,
+      JSON.stringify(template, null, 2),
+    );
+    return true;
+  });
+
+  zip.generateAsync({ type: "blob" }).then(function (content) {
+    const date = new Date();
+    saveAs(
+      content,
+      `${date.getFullYear()}_${date.getMonth()}_${date.getDay()}_export.zip`,
+    );
+  });
+}