Add Save as template

src/components/ControlPanel.jsx

@@ -729,6 +729,23 @@ export default function ControlPanel({
         function: saveDiagramAs,
         shortcut: "Ctrl+Shift+S",
       },
+      "Save as template": {
+        function: () => {
+          db.templates
+            .add({
+              title: title,
+              tables: tables,
+              relationships: relationships,
+              types: types,
+              notes: notes,
+              subjectAreas: areas,
+              custom: 1,
+            })
+            .then(() => {
+              Toast.success("Template saved!");
+            });
+        },
+      },
       Share: {
         function: () => {},
       },
@@ -756,18 +773,6 @@ export default function ControlPanel({
             .catch(() => Toast.error("Oops! Something went wrong."));
         },
       },
-      "Flush storage": {
-        function: async () => {
-          db.delete()
-            .then(() => {
-              Toast.success("Storage flushed");
-              window.location.reload(false);
-            })
-            .catch(() => {
-              Toast.error("Oops! Something went wrong.");
-            });
-        },
-      },
       Import: {
         function: fileImport,
         shortcut: "Ctrl+I",
@@ -935,6 +940,18 @@ export default function ControlPanel({
                 return { ...prev, panning: !prev.panning };
               }),
           },
+          {
+            "Flush storage": async () => {
+              db.delete()
+                .then(() => {
+                  Toast.success("Storage flushed");
+                  window.location.reload(false);
+                })
+                .catch(() => {
+                  Toast.error("Oops! Something went wrong.");
+                });
+            },
+          },
         ],
       },
       Exit: {

src/data/db.js

@@ -5,7 +5,7 @@ const db = new Dexie("drawDB");
 
 db.version(2).stores({
   diagrams: "++id, lastModified",
-  templates: "++id",
+  templates: "++id, custom",
 });
 
 db.on("populate", (transaction) => {

src/pages/Templates.jsx

@@ -1,19 +1,18 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import logo_light from "../assets/logo_light_46.png";
 import { Link } from "react-router-dom";
 import { Tabs, TabPane } from "@douyinfe/semi-ui";
-import { useLiveQuery } from "dexie-react-hooks";
 import { db } from "../data/db";
 import { calcPath } from "../utils";
 
-function Thumbnail({ diagram }) {
+function Thumbnail({ diagram, i }) {
   const zoom = 0.3;
   return (
-    <div className="w-full select-none h-[190px]">
+    <div className="w-full select-none">
       <svg className="bg-white w-full h-full rounded-t-md">
         <defs>
           <pattern
-            id="pattern-circles"
+            id={"pattern-circles-" + i}
             x="0"
             y="0"
             width="10"
@@ -22,7 +21,7 @@ function Thumbnail({ diagram }) {
             patternContentUnits="userSpaceOnUse"
           >
             <circle
-              id="pattern-circle"
+              id={"pattern-circle-" + i}
               cx="2"
               cy="2"
               r="0.4"
@@ -35,9 +34,9 @@ function Thumbnail({ diagram }) {
           y="0"
           width="100%"
           height="100%"
-          fill="url(#pattern-circles)"
+          fill={"url(#pattern-circles-" + i + ")"}
         ></rect>
-        <g id="diagram">
+        <g>
           {diagram.subjectAreas?.map((a) => (
             <foreignObject
               key={a.id}
@@ -159,10 +158,19 @@ function Thumbnail({ diagram }) {
 }
 
 export default function Templates() {
-  const templates = useLiveQuery(() => db.templates.toArray());
+  const [defaultTemplates, setDefaultTemplates] = useState([]);
+  const [customTemplates, setCustomTemplates] = useState([]);
 
   useEffect(() => {
     document.title = "Templates | drawDB";
+    const loadTemplates = async () => {
+      const def = await db.templates.where({ custom: 0 }).toArray();
+      setDefaultTemplates(def);
+      const custom = await db.templates.where({ custom: 1 }).toArray();
+      setCustomTemplates(custom);
+    };
+
+    loadTemplates();
   }, []);
 
   return (
@@ -198,13 +206,13 @@ export default function Templates() {
               tab={<span className="mx-2">Default templates</span>}
               itemKey="1"
             >
-              <div className="grid xl:grid-cols-3 grid-cols-2 sm:grid-cols-1 gap-4 my-3">
+              <div className="grid xl:grid-cols-3 grid-cols-2 sm:grid-cols-1 gap-8 my-6">
-                {templates?.map((t, i) => (
+                {defaultTemplates?.map((t, i) => (
                   <div
                     key={i}
                     className="bg-gray-100 hover:translate-y-[-6px] transition-all duration-300 border rounded-md"
                   >
-                    <Thumbnail diagram={t} />
+                    <Thumbnail diagram={t} i={"1" + i} />
                     <div className="px-4 py-3">
                       <div className="flex justify-between">
                         <div className="text-lg font-bold text-zinc-700">
@@ -224,7 +232,26 @@ export default function Templates() {
               tab={<span className="mx-2">Your templates</span>}
               itemKey="2"
             >
-              <div className=" flex flex-col h-full">Your templates</div>
+              <div className="grid xl:grid-cols-3 grid-cols-2 sm:grid-cols-1 gap-8 my-6">
+                {customTemplates?.map((c, i) => (
+                  <div
+                    key={i}
+                    className="bg-gray-100 hover:translate-y-[-6px] transition-all duration-300 border rounded-md"
+                  >
+                    <Thumbnail diagram={c} i={"2" + i} />
+                    <div className="px-4 py-3 w-full">
+                      <div className="flex justify-between">
+                        <div className="text-lg font-bold text-zinc-700">
+                          {c.title}
+                        </div>
+                        <button className="border rounded px-2 py-1 bg-white hover:bg-gray-200 transition-all duration-300">
+                          <i className="fa-solid fa-code-fork"></i>
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
             </TabPane>
           </Tabs>
         </div>

src/templates/template1.js

@@ -151,4 +151,5 @@ export const template1 = {
   title: "Template 1",
   description:
     "Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam nulla illo pariatur nostrum.",
+  custom: 0,
 };

src/templates/template2.js

@@ -160,4 +160,5 @@ export const template2 = {
   title: "Template 2",
   description:
     "Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam nulla illo pariatur nostrum.",
+  custom: 0,
 };

src/templates/template3.js

@@ -227,4 +227,5 @@ export const template3 = {
   title: "Template 3",
   description:
     "Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam nulla illo pariatur nostrum.",
+  custom: 0,
 };

src/templates/template4.js

@@ -307,4 +307,5 @@ export const template4 = {
   title: "Template 4",
   description:
     "Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam nulla illo pariatur nostrum.",
+  custom: 0,
 };

src/templates/template5.js

@@ -265,4 +265,5 @@ export const template5 = {
   title: "Template 5",
   description:
     "Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam nulla illo pariatur nostrum.",
+  custom: 0,
 };

src/templates/template6.js

@@ -301,4 +301,5 @@ export const template6 = {
   title: "Template 6",
   description:
     "Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam nulla illo pariatur nostrum.",
+  custom: 0,
 };

src/templates/template7.js

@@ -311,4 +311,5 @@ export const template7 = {
   title: "Template 7",
   description:
     "Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam nulla illo pariatur nostrum.",
+  custom: 0,
 };

src/templates/template8.js

@@ -366,4 +366,5 @@ export const template8 = {
   title: "Template 8",
   description:
     "Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam nulla illo pariatur nostrum.",
+  custom: 0,
 };