Edit templates

src/components/ControlPanel.jsx

@@ -1432,6 +1432,7 @@ export default function ControlPanel({
                           }}
                           onDoubleClick={() => {
                             loadDiagram(d.id);
+                            window.name = "d " + d.id;
                             setVisible(MODAL.NONE);
                           }}
                         >
@@ -1704,6 +1705,8 @@ export default function ControlPanel({
         return `Last saved ${lastSaved}`;
       case State.SAVING:
         return "Saving . . .";
+      case State.ERROR:
+        return "Failed to save";
       default:
         return "";
     }
@@ -1729,6 +1732,7 @@ export default function ControlPanel({
                 onMouseLeave={() => setShowEditName(false)}
                 onClick={() => setVisible(MODAL.RENAME)}
               >
+                {window.name.split(" ")[0] === "t" ? "Templates/" : "Diagrams/"}
                 {title}
               </div>
               {(showEditName || visible === MODAL.RENAME) && <IconEdit />}

src/data/data.js

@@ -108,6 +108,7 @@ const State = {
   SAVING: 1,
   SAVED: 2,
   LOADING: 3,
+  ERROR: 4,
 };
 
 export {

src/pages/Templates.jsx

@@ -172,7 +172,8 @@ export default function Templates() {
   };
 
   const editTemplate = (id) => {
-    console.log(id);
+    const newWindow = window.open("/editor", "_blank");
+    newWindow.name = "t " + id;
   };
 
   useEffect(() => {

src/pages/editor.jsx

@@ -408,7 +408,7 @@ export default function Editor() {
     );
   };
 
-  const updateNote = (id, values, addToHistory = true) => {
+  const updateNote = (id, values) => {
     setNotes((prev) =>
       prev.map((t) => {
         if (t.id === id) {
@@ -488,45 +488,68 @@ export default function Editor() {
   ]);
 
   useEffect(() => {
-    const save = async () => {
+    const save = async (diagram = true) => {
       if (state !== State.SAVING) {
         return;
       }
-      if (id === 0 && window.name === "") {
+      if (diagram) {
-        db.diagrams
+        if (id === 0 && window.name === "") {
-          .add({
+          db.diagrams
-            name: title,
+            .add({
-            lastModified: new Date(),
+              name: title,
-            tables: tables,
+              lastModified: new Date(),
-            references: relationships,
+              tables: tables,
-            types: types,
+              references: relationships,
-            notes: notes,
+              types: types,
-            areas: areas,
+              notes: notes,
-          })
+              areas: areas,
-          .then((id) => {
+            })
-            setId(id);
+            .then((id) => {
-            window.name = `d ${id}`;
+              setId(id);
-            setState(State.SAVED);
+              window.name = `d ${id}`;
-            setLastSaved(new Date().toLocaleString());
+              setState(State.SAVED);
-          });
+              setLastSaved(new Date().toLocaleString());
+            });
+        } else {
+          db.diagrams
+            .update(id, {
+              name: title,
+              lastModified: new Date(),
+              tables: tables,
+              references: relationships,
+              types: types,
+              notes: notes,
+              areas: areas,
+            })
+            .then(() => {
+              setState(State.SAVED);
+              setLastSaved(new Date().toLocaleString());
+            });
+        }
       } else {
-        db.diagrams
+        db.templates
           .update(id, {
-            name: title,
+            title: title,
-            lastModified: new Date(),
             tables: tables,
-            references: relationships,
+            relationships: relationships,
             types: types,
             notes: notes,
-            areas: areas,
+            subjectAreas: areas,
           })
           .then(() => {
             setState(State.SAVED);
             setLastSaved(new Date().toLocaleString());
+          })
+          .catch(() => {
+            setState(State.ERROR);
           });
       }
     };
-    save();
+    const name = window.name.split(" ");
+    const op = name[0];
+    const diagram = window.name === "" || op === "d";
+
+    save(diagram);
   }, [tables, relationships, notes, areas, types, title, id, state]);
 
   useEffect(() => {
@@ -578,6 +601,27 @@ export default function Editor() {
         });
     };
 
+    const loadTemplate = async (id) => {
+      await db.templates
+        .get(id)
+        .then((diagram) => {
+          if (diagram) {
+            setId(diagram.id);
+            setTitle(diagram.title);
+            setTables(diagram.tables);
+            setTypes(diagram.types);
+            setRelationships(diagram.relationships);
+            setAreas(diagram.subjectAreas);
+            setNotes(diagram.notes);
+            setUndoStack([]);
+            setRedoStack([]);
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    };
+
     if (window.name == "") {
       console.log("Loading the latest diagram");
       loadLatestDiagram();
@@ -594,11 +638,15 @@ export default function Editor() {
           console.log("Loading template with id", did);
           break;
         }
+        case "t": {
+          loadTemplate(did);
+          break;
+        }
         default:
           break;
       }
     }
-    
+
     socket.connect();
 
     const onConnect = () => {