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

Add structure of templates page

Browse Source
This commit is contained in:
1ilit 2023-12-11 03:00:25 +02:00
parent 407e060b77
commit c3f2809313
2 changed files with 163 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/data/seeds.js
View File

@ -28,6 +28,8 @@ const t1 = {
notes: [],
subjectAreas: [],
types: [],
title: "Template 1",
description: "Lorem ipsum",
};
const t2 = {
@ -60,6 +62,8 @@ const t2 = {
notes: [],
subjectAreas: [],
types: [],
title: "Template 2",
description: "Lorem ipsum",
};
const t3 = {
@ -92,6 +96,8 @@ const t3 = {
notes: [],
subjectAreas: [],
types: [],
title: "Template 3",
description: "Lorem ipsum",
};
const t4 = {
@ -124,6 +130,8 @@ const t4 = {
notes: [],
subjectAreas: [],
types: [],
title: "Template 4",
description: "Lorem ipsum",
};
const t5 = {
@ -156,6 +164,8 @@ const t5 = {
notes: [],
subjectAreas: [],
types: [],
title: "Template 5",
description: "Lorem ipsum",
};
const t6 = {
@ -188,6 +198,8 @@ const t6 = {
notes: [],
subjectAreas: [],
types: [],
title: "Template 6",
description: "Lorem ipsum",
};
const t7 = {
@ -220,6 +232,8 @@ const t7 = {
notes: [],
subjectAreas: [],
types: [],
title: "Template 7",
description: "Lorem ipsum",
};
const t8 = {
@ -252,6 +266,8 @@ const t8 = {
notes: [],
subjectAreas: [],
types: [],
title: "Template 8",
description: "Lorem ipsum",
};
const templateSeeds = [t1, t2, t3, t4, t5, t6, t7, t8];

150
src/pages/Templates.jsx
View File

@ -1,11 +1,119 @@
import React from "react";
import React, { useEffect } 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";
function cardCanvas(diagram) {
return (
<div className="w-full">
<svg className="bg-white w-full">
<defs>
<pattern
id="pattern-circles"
x="0"
y="0"
width="10"
height="10"
patternUnits="userSpaceOnUse"
patternContentUnits="userSpaceOnUse"
>
<circle
id="pattern-circle"
cx="2"
cy="2"
r="0.4"
fill="rgb(99, 152, 191)"
></circle>
</pattern>
</defs>
<rect
x="0"
y="0"
width="100%"
height="100%"
fill="url(#pattern-circles)"
></rect>
<g id="diagram">
{/* {diagram.areas.map((a) => (
<Area
key={a.id}
areaData={a}
onMouseDown={(e) => {}}
setResize={null}
initCoords={null}
setInitCoords={null}
zoom={null}
></Area>
))} */}
{diagram.tables.map((table, i) => {
const height = table.fields.length * 36 + 50 + 7;
return (
<foreignObject
x={table.x * 0.3}
y={table.y * 0.3}
width={200 * 0.3}
height={height * 0.3}
key={i}
>
<div className="border-[1px] rounded-[3px] border-zinc-300 text-[4px] bg-zinc-100">
<div
className="h-[4px] w-full rounded-t-sm"
style={{ backgroundColor: table.color }}
></div>
<div className="rounded-b-[3px]">
<div className="bg-zinc-200 font-bold py-[2px] px-[4px] border-b border-gray-300">
{table.name}
</div>
{table.fields.map((f, j) => (
<div
className="flex justify-between items-center py-[2px] px-[3px]"
key={j}
>
<div className="flex items-center justify-start">
<div
className={`w-[3px] h-[3px] bg-[#2f68ad] opacity-80 z-50 rounded-full me-[2px]`}
></div>
<div>{f.name}</div>
</div>
<div className="text-zinc-500">{f.type}</div>
</div>
))}
</div>
</div>
</foreignObject>
);
})}
{/*
{diagram.relationships.map((e, i) => (
<Relationship key={i} data={e} />
))}
{diagram.notes.map((n) => (
<Note
key={n.id}
data={n}
onMouseDown={(e) =>
{}
}
></Note>
))} */}
</g>
</svg>
</div>
);
}
export default function Templates() {
const templates = useLiveQuery(() => db.templates.toArray());
useEffect(() => {
document.title = "Templates | drawDB";
}, []);
return (
<div>
<div className="sm:py-3 py-5 px-20 sm:px-6 flex justify-between items-center select-none">
<div className="sm:py-3 py-5 px-12 xl:px-20 sm:px-6 flex justify-between items-center select-none">
<div className="flex items-center justify-start">
<Link to="/">
<img
@ -14,12 +122,48 @@ export default function Templates() {
className="me-2 sm:h-[28px] md:h-[46px]"
/>
</Link>
<div className="ms-4 sm:text-sm xl:text-xl font-semibold">
<div className="ms-4 sm:text-sm xl:text-xl text-xl font-semibold">
Templates
</div>
</div>
</div>
<hr className="border-zinc-300" />
<div className="xl:px-20 sm:px-6 px-12 py-6">
<div className="w-full md:w-[75%] xl:w-[50%] mb-2">
<div className="text-2xl sm:text-lg font-semibold mb-2 text-neutral-800">
Database schema templates
</div>
<div className="text-sm text-neutral-700">
A compilation of database entity relationship diagrams to give you a
quick start or inspire your application's architecture.
</div>
</div>
<Tabs>
<TabPane
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
key={i}
className="p-4 bg-gray-200 hover:translate-y-[-6px] transition-all duration-300"
>
{cardCanvas(t)}
<div>{t.title}</div>
<div>{t.description}</div>
</div>
))}
</div>
</TabPane>
<TabPane
tab={<span className="mx-2">Your templates</span>}
itemKey="2"
>
Your templates
</TabPane>
</Tabs>
</div>
</div>
);
}