drawdb-io/drawdb
1
0
Fork 0
mirror of https://github.com/drawdb-io/drawdb.git synced 2025-05-24 18:39:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Edit templates

Browse Source
This commit is contained in:
1ilit 2023-12-24 23:26:14 +02:00
parent b9fbcfb9b6
commit 0e041ed913
4 changed files with 81 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/ControlPanel.jsx
View File

@ -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 />}

1
src/data/data.js
View File

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

3
src/pages/Templates.jsx
View File

@ -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(() => {

100
src/pages/editor.jsx
View File

@ -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 === "") {
db.diagrams
.add({
name: title,
lastModified: new Date(),
tables: tables,
references: relationships,
types: types,
notes: notes,
areas: areas,
})
.then((id) => {
setId(id);
window.name = `d ${id}`;
setState(State.SAVED);
setLastSaved(new Date().toLocaleString());
});
if (diagram) {
if (id === 0 && window.name === "") {
db.diagrams
.add({
name: title,
lastModified: new Date(),
tables: tables,
references: relationships,
types: types,
notes: notes,
areas: areas,
})
.then((id) => {
setId(id);
window.name = `d ${id}`;
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,
lastModified: new Date(),
title: title,
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 = () => {