titor/drawDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Save as template

Browse Source
This commit is contained in:
1ilit 2023-12-19 04:36:10 +02:00
parent c5f929ac55
commit dec6362fa9
11 changed files with 78 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/ControlPanel.jsx
View File

@ -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: {

2
src/data/db.js
View File

@ -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) => {

53
src/pages/Templates.jsx
View File

@ -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">
{templates?.map((t, i) => (
<div className="grid xl:grid-cols-3 grid-cols-2 sm:grid-cols-1 gap-8 my-6">
{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>

1
src/templates/template1.js
View File

@ -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,
};

1
src/templates/template2.js
View File

@ -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,
};

1
src/templates/template3.js
View File

@ -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,
};

1
src/templates/template4.js
View File

@ -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,
};

1
src/templates/template5.js
View File

@ -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,
};

1
src/templates/template6.js
View File

@ -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,
};

1
src/templates/template7.js
View File

@ -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,
};

1
src/templates/template8.js
View File

@ -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,
};