From 47707146b8c06c91e102f168ec1cfc0e37cd92cc Mon Sep 17 00:00:00 2001
From: 1ilit <lilitmousheghyan@gmail.com>
Date: Tue, 20 Feb 2024 09:03:08 +0200
Subject: [PATCH] Save todos

---
 src/components/ControlPanel.jsx |  3 +-
 src/components/Todo.jsx         | 29 +++++++++++--------
 src/data/db.js                  |  2 +-
 src/pages/Editor.jsx            | 49 +++++++++++++++++++++++----------
 4 files changed, 54 insertions(+), 29 deletions(-)

diff --git a/src/components/ControlPanel.jsx b/src/components/ControlPanel.jsx
index 49a607d..41c5c67 100644
--- a/src/components/ControlPanel.jsx
+++ b/src/components/ControlPanel.jsx
@@ -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,
diff --git a/src/components/Todo.jsx b/src/components/Todo.jsx
index a32b68c..7f56232 100644
--- a/src/components/Todo.jsx
+++ b/src/components/Todo.jsx
@@ -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>
diff --git a/src/data/db.js b/src/data/db.js
index 49d5af5..87c67b9 100644
--- a/src/data/db.js
+++ b/src/data/db.js
@@ -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",
 });
diff --git a/src/pages/Editor.jsx b/src/pages/Editor.jsx
index b3e6d5f..ec3d3b7 100644
--- a/src/pages/Editor.jsx
+++ b/src/pages/Editor.jsx
@@ -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>