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,10 +488,11 @@ export default function Editor() {
   ]);
 
   useEffect(() => {
-    const save = async () => {
+    const save = async (diagram = true) => {
       if (state !== State.SAVING) {
         return;
       }
+      if (diagram) {
         if (id === 0 && window.name === "") {
           db.diagrams
             .add({
@@ -525,8 +526,30 @@ export default function Editor() {
               setLastSaved(new Date().toLocaleString());
             });
         }
+      } else {
+        db.templates
+          .update(id, {
+            title: title,
+            tables: tables,
+            relationships: relationships,
+            types: types,
+            notes: notes,
+            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,6 +638,10 @@ export default function Editor() {
           console.log("Loading template with id", did);
           break;
         }
+        case "t": {
+          loadTemplate(did);
+          break;
+        }
         default:
           break;
       }