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

Save todos

Browse Source
This commit is contained in:
1ilit 2024-02-20 09:03:08 +02:00
parent c9a8d76e8e
commit 47707146b8
4 changed files with 54 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/ControlPanel.jsx
View File

@ -77,7 +77,6 @@ export default function ControlPanel({
setDiagramId, setDiagramId,
title, title,
setTitle, setTitle,
state,
setState, setState,
lastSaved, lastSaved,
}) { }) {
@ -122,7 +121,7 @@ export default function ControlPanel({
message: "", message: "",
}); });
const [data, setData] = useState(null); const [data, setData] = useState(null);
const { layout, setLayout } = useContext(LayoutContext); const { layout, setLayout, state } = useContext(LayoutContext);
const { settings, setSettings } = useContext(SettingsContext); const { settings, setSettings } = useContext(SettingsContext);
const { const {
relationships, relationships,

29
src/components/Todo.jsx
View File

@ -19,7 +19,8 @@ import {
IconDeleteStroked, IconDeleteStroked,
IconCaretdown, IconCaretdown,
} from "@douyinfe/semi-icons"; } from "@douyinfe/semi-icons";
import { TaskContext } from "../pages/Editor"; import { LayoutContext, TaskContext } from "../pages/Editor";
import { State } from "../data/data";
export default function Todo() { export default function Todo() {
const Priority = { const Priority = {
NONE: 0, NONE: 0,
@ -36,6 +37,7 @@ export default function Todo() {
const [activeTask, setActiveTask] = useState(-1); const [activeTask, setActiveTask] = useState(-1);
const [, setSortOrder] = useState(SortOrder.ORIGINAL); const [, setSortOrder] = useState(SortOrder.ORIGINAL);
const { tasks, setTasks, updateTask } = useContext(TaskContext); const { tasks, setTasks, updateTask } = useContext(TaskContext);
const { setState } = useContext(LayoutContext);
const priorityLabel = (p) => { const priorityLabel = (p) => {
switch (p) { switch (p) {
@ -159,9 +161,10 @@ export default function Todo() {
<Col span={2}> <Col span={2}>
<Checkbox <Checkbox
checked={t.complete} checked={t.complete}
onChange={(e) => onChange={(e) => {
updateTask(i, { complete: e.target.checked }) updateTask(i, { complete: e.target.checked });
} setState(State.SAVING);
}}
></Checkbox> ></Checkbox>
</Col> </Col>
<Col span={19}> <Col span={19}>
@ -169,6 +172,7 @@ export default function Todo() {
placeholder="Title" placeholder="Title"
onChange={(v) => updateTask(i, { title: v })} onChange={(v) => updateTask(i, { title: v })}
value={t.title} value={t.title}
onBlur={() => setState(State.SAVING)}
></Input> ></Input>
</Col> </Col>
<Col span={3}> <Col span={3}>
@ -176,12 +180,13 @@ export default function Todo() {
content={ content={
<div className="p-2 popover-theme"> <div className="p-2 popover-theme">
<div className="mb-2 font-semibold"> <div className="mb-2 font-semibold">
Set priority:{" "} Set priority:
</div> </div>
<RadioGroup <RadioGroup
onChange={(e) => onChange={(e) => {
updateTask(i, { priority: e.target.value }) updateTask(i, { priority: e.target.value });
} setState(State.SAVING);
}}
value={t.priority} value={t.priority}
direction="vertical" direction="vertical"
> >
@ -211,11 +216,12 @@ export default function Todo() {
type="danger" type="danger"
block block
style={{ marginTop: "12px" }} style={{ marginTop: "12px" }}
onClick={() => onClick={() => {
setTasks((prev) => setTasks((prev) =>
prev.filter((task, j) => i !== j) prev.filter((task, j) => i !== j)
) );
} setState(State.SAVING);
}}
> >
Delete Delete
</Button> </Button>
@ -237,6 +243,7 @@ export default function Todo() {
placeholder="Details" placeholder="Details"
onChange={(v) => updateTask(i, { details: v })} onChange={(v) => updateTask(i, { details: v })}
value={t.details} value={t.details}
onBlur={() => setState(State.SAVING)}
></TextArea> ></TextArea>
</Col> </Col>
</Row> </Row>

2
src/data/db.js
View File

@ -3,7 +3,7 @@ import { templateSeeds } from "./seeds";
const db = new Dexie("drawDB"); const db = new Dexie("drawDB");
db.version(3).stores({ db.version(4).stores({
diagrams: "++id, lastModified", diagrams: "++id, lastModified",
templates: "++id, custom", templates: "++id, custom",
}); });

49
src/pages/Editor.jsx
View File

@ -453,7 +453,8 @@ export default function Editor() {
tables.length === 0 && tables.length === 0 &&
areas.length === 0 && areas.length === 0 &&
notes.length === 0 && notes.length === 0 &&
types.length === 0 types.length === 0 &&
tasks.length === 0
) )
return; return;
@ -468,7 +469,8 @@ export default function Editor() {
areas.length, areas.length,
notes.length, notes.length,
types.length, types.length,
relationships.length relationships.length,
tasks.length,
]); ]);
useEffect(() => { useEffect(() => {
@ -490,6 +492,7 @@ export default function Editor() {
types: types, types: types,
notes: notes, notes: notes,
areas: areas, areas: areas,
todos: tasks,
}) })
.then((id) => { .then((id) => {
setId(id); setId(id);
@ -507,6 +510,7 @@ export default function Editor() {
types: types, types: types,
notes: notes, notes: notes,
areas: areas, areas: areas,
todos: tasks,
}) })
.then(() => { .then(() => {
setState(State.SAVED); setState(State.SAVED);
@ -522,6 +526,7 @@ export default function Editor() {
types: types, types: types,
notes: notes, notes: notes,
subjectAreas: areas, subjectAreas: areas,
todos: tasks,
}) })
.then(() => { .then(() => {
setState(State.SAVED); setState(State.SAVED);
@ -537,7 +542,7 @@ export default function Editor() {
const diagram = window.name === "" || op === "d" || op === "lt"; const diagram = window.name === "" || op === "d" || op === "lt";
save(diagram); save(diagram);
}, [tables, relationships, notes, areas, types, title, id, state]); }, [tables, relationships, notes, areas, types, title, id, state, tasks]);
useEffect(() => { useEffect(() => {
document.title = "Editor | drawDB"; document.title = "Editor | drawDB";
@ -554,6 +559,7 @@ export default function Editor() {
setNotes(d.notes); setNotes(d.notes);
setAreas(d.areas); setAreas(d.areas);
setTypes(d.types); setTypes(d.types);
setTasks(d.todos);
window.name = `d ${d.id}`; window.name = `d ${d.id}`;
} else { } else {
window.name = ""; window.name = "";
@ -576,6 +582,7 @@ export default function Editor() {
setRelationships(diagram.references); setRelationships(diagram.references);
setAreas(diagram.areas); setAreas(diagram.areas);
setNotes(diagram.notes); setNotes(diagram.notes);
setTasks(diagram.todos);
setUndoStack([]); setUndoStack([]);
setRedoStack([]); setRedoStack([]);
window.name = `d ${diagram.id}`; window.name = `d ${diagram.id}`;
@ -599,6 +606,7 @@ export default function Editor() {
setTypes(diagram.types); setTypes(diagram.types);
setRelationships(diagram.relationships); setRelationships(diagram.relationships);
setAreas(diagram.subjectAreas); setAreas(diagram.subjectAreas);
setTasks(diagram.tasks);
setNotes(diagram.notes); setNotes(diagram.notes);
setUndoStack([]); setUndoStack([]);
setRedoStack([]); setRedoStack([]);
@ -651,7 +659,7 @@ export default function Editor() {
}, []); }, []);
return ( return (
<LayoutContext.Provider value={{ layout, setLayout }}> <LayoutContext.Provider value={{ layout, setLayout, state, setState }}>
<TableContext.Provider <TableContext.Provider
value={{ value={{
tables, tables,
@ -698,8 +706,6 @@ export default function Editor() {
setDiagramId={setId} setDiagramId={setId}
title={title} title={title}
setTitle={setTitle} setTitle={setTitle}
state={state}
setState={setState}
lastSaved={lastSaved} lastSaved={lastSaved}
setLastSaved={setLastSaved} setLastSaved={setLastSaved}
/> />
@ -717,25 +723,38 @@ export default function Editor() {
)} )}
<div className="relative w-full h-full overflow-hidden"> <div className="relative w-full h-full overflow-hidden">
<Canvas state={state} setState={setState} /> <Canvas state={state} setState={setState} />
{ {!(
!(layout.sidebar || layout.toolbar || layout.header) && layout.sidebar ||
layout.toolbar ||
layout.header
) && (
<div className="fixed right-5 bottom-4 flex gap-2"> <div className="fixed right-5 bottom-4 flex gap-2">
<div className="popover-theme flex rounded-lg items-center"> <div className="popover-theme flex rounded-lg items-center">
<button <button
className="px-3 py-2" className="px-3 py-2"
onClick={() => onClick={() =>
setSettings((prev) => ({ ...prev, zoom: prev.zoom / 1.2 })) setSettings((prev) => ({
}> ...prev,
zoom: prev.zoom / 1.2,
}))
}
>
<i className="bi bi-dash-lg"></i> <i className="bi bi-dash-lg"></i>
</button> </button>
<Divider align="center" layout="vertical" /> <Divider align="center" layout="vertical" />
<div className="px-3 py-2">{parseInt(settings.zoom * 100)}%</div> <div className="px-3 py-2">
{parseInt(settings.zoom * 100)}%
</div>
<Divider align="center" layout="vertical" /> <Divider align="center" layout="vertical" />
<button <button
className="px-3 py-2" className="px-3 py-2"
onClick={() => onClick={() =>
setSettings((prev) => ({ ...prev, zoom: prev.zoom * 1.2 })) setSettings((prev) => ({
}> ...prev,
zoom: prev.zoom * 1.2,
}))
}
>
<i className="bi bi-plus-lg"></i> <i className="bi bi-plus-lg"></i>
</button> </button>
</div> </div>
@ -743,7 +762,7 @@ export default function Editor() {
<button <button
className="px-3 py-2 rounded-lg popover-theme" className="px-3 py-2 rounded-lg popover-theme"
onClick={() => { onClick={() => {
setLayout(prev => ({ setLayout((prev) => ({
...prev, ...prev,
sidebar: true, sidebar: true,
toolbar: true, toolbar: true,
@ -756,7 +775,7 @@ export default function Editor() {
</button> </button>
</Tooltip> </Tooltip>
</div> </div>
} )}
</div> </div>
</div> </div>
</div> </div>