Save todos

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

View File

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

View File

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

View File

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

View File

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