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

Add delete for custom templates

Browse Source
This commit is contained in:
1ilit 2023-12-23 03:16:54 +02:00
parent ece4a9e95a
commit 78ce0839d8
1 changed files with 32 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/pages/Templates.jsx
View File

@ -1,8 +1,10 @@
import { useEffect, useState } from "react";
import { 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 { IconDeleteStroked } from "@douyinfe/semi-icons";
import { db } from "../data/db";
import { useLiveQuery } from "dexie-react-hooks";
import { calcPath } from "../utils";
function Thumbnail({ diagram, i }) {
@ -158,19 +160,19 @@ function Thumbnail({ diagram, i }) {
}
export default function Templates() {
const [defaultTemplates, setDefaultTemplates] = useState([]);
const [customTemplates, setCustomTemplates] = useState([]);
const defaultTemplates = useLiveQuery(() =>
db.templates.where({ custom: 0 }).toArray()
);
const customTemplates = useLiveQuery(() =>
db.templates.where({ custom: 1 }).toArray()
);
const deleteTemplate = async (id) => {
await db.templates.delete(id);
};
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 (
@ -206,7 +208,7 @@ 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-8 my-6">
<div className="grid xl:grid-cols-3 grid-cols-2 sm:grid-cols-1 gap-10 my-6">
{defaultTemplates?.map((t, i) => (
<div
key={i}
@ -244,11 +246,27 @@ export default function Templates() {
<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">
<div>
<button className="me-1 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 className="flex justify-around mt-2">
<button className="w-full text-center flex justify-center items-center border rounded px-2 py-1 bg-white hover:bg-gray-200 transition-all duration-300 text-blue-500">
<i className="bi bi-pencil-fill"></i>
<div className="ms-1.5 font-semibold">Edit</div>
</button>
<div className="border-l border-gray-300 mx-2" />
<button
className="w-full text-center flex justify-center items-center border rounded px-2 py-1 bg-white hover:bg-gray-200 transition-all duration-300 text-red-500"
onClick={() => deleteTemplate(c.id)}
>
<IconDeleteStroked />
<div className="ms-1.5 font-semibold">Delete</div>
</button>
</div>
</div>
</div>
))}
</div>