titor/drawDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Autosave

Browse Source
This commit is contained in:
1ilit 2023-11-24 18:28:39 +02:00
parent 045715cff9
commit 76ef62d13f
3 changed files with 116 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/components/ControlPanel.jsx
View File

@ -54,7 +54,7 @@ import {
UndoRedoContext,
} from "../pages/Editor";
import { IconAddTable, IconAddArea, IconAddNote } from "./CustomIcons";
import { ObjectType, Action, Tab } from "../data/data";
import { ObjectType, Action, Tab, State } from "../data/data";
import jsPDF from "jspdf";
import { useHotkeys } from "react-hotkeys-hook";
import { Validator } from "jsonschema";
@ -68,6 +68,10 @@ export default function ControlPanel({
setDiagramId,
title,
setTitle,
state,
setState,
lastSaved,
setLastSaved,
}) {
const MODAL = {
NONE: 0,
@ -672,31 +676,7 @@ export default function ControlPanel({
copy();
del();
};
const save = () => {
if (diagramId === 0) {
db.diagrams
.add({
name: title,
lastModified: new Date(),
tables: tables,
references: relationships,
types: types,
notes: notes,
areas: areas,
})
.then((id) => setDiagramId(id));
} else {
db.diagrams.update(diagramId, {
name: title,
lastModified: new Date(),
tables: tables,
references: relationships,
types: types,
notes: notes,
areas: areas,
});
}
};
const save = () => setState(State.SAVING);
const open = () => setVisible(MODAL.OPEN);
const saveDiagramAs = () => setVisible(MODAL.SAVEAS);
const loadDiagram = async (id) => {
@ -1682,6 +1662,21 @@ export default function ControlPanel({
);
}
function getState() {
switch (state) {
case State.NONE:
return "No changes"
case State.LOADING:
return "Loading . . .";
case State.SAVED:
return `Last saved ${lastSaved}`;
case State.SAVING:
return "Saving . . .";
default:
return "";
}
}
function header() {
return (
<nav className="flex justify-between pt-1 items-center whitespace-nowrap">
@ -1783,8 +1778,16 @@ export default function ControlPanel({
</Dropdown>
))}
</div>
<Button size="small" type="tertiary">
Last saved {new Date().toISOString()}
<Button
size="small"
type="tertiary"
icon={
state === State.LOADING || state === State.SAVING ? (
<Spin size="small" />
) : null
}
>
{getState()}
</Button>
</div>
</div>

8
src/data/data.js
View File

@ -103,6 +103,13 @@ const Action = {
PAN: 4,
};
const State = {
NONE: 0,
SAVING: 1,
SAVED: 2,
LOADING: 3,
};
export {
bgBlue,
sqlDataTypes,
@ -116,4 +123,5 @@ export {
Tab,
ObjectType,
Action,
State,
};

79
src/pages/editor.jsx
View File

@ -10,6 +10,7 @@ import {
avatarThemes,
Action,
ObjectType,
State,
} from "../data/data";
import { socket } from "../data/socket";
import { db } from "../data/db";
@ -31,6 +32,8 @@ export const TypeContext = createContext();
export default function Editor(props) {
const [id, setId] = useState(0);
const [title, setTitle] = useState("Untitled Diagram");
const [state, setState] = useState(State.NONE);
const [lastSaved, setLastSaved] = useState("");
const [tables, setTables] = useState([]);
const [relationships, setRelationships] = useState([]);
const [areas, setAreas] = useState([]);
@ -462,6 +465,70 @@ export default function Editor(props) {
prev.map((task, i) => (id === i ? { ...task, ...values } : task))
);
useEffect(() => {
if (
tables.length === 0 &&
areas.length === 0 &&
notes.length === 0 &&
types.length === 0
)
return;
if (settings.autosave) {
setState(State.SAVING);
}
}, [
undoStack,
redoStack,
settings.autosave,
tables.length,
areas.length,
notes.length,
types.length,
]);
useEffect(() => {
const save = async () => {
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());
});
} 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());
});
}
};
save();
}, [tables, relationships, notes, areas, types, title, id, state]);
useEffect(() => {
document.title = "Editor | drawDB";
@ -477,8 +544,10 @@ export default function Editor(props) {
setNotes(d.notes);
setAreas(d.areas);
setTypes(d.types);
}
window.name = `d ${d.id}`;
} else {
window.name = "";
}
})
.catch((error) => {
console.log(error);
@ -500,6 +569,8 @@ export default function Editor(props) {
setUndoStack([]);
setRedoStack([]);
window.name = `d ${diagram.id}`;
} else {
window.name = "";
}
})
.catch((error) => {
@ -627,6 +698,10 @@ export default function Editor(props) {
setDiagramId={setId}
title={title}
setTitle={setTitle}
state={state}
setState={setState}
lastSaved={lastSaved}
setLastSaved={setLastSaved}
/>
<div
className={
@ -644,7 +719,7 @@ export default function Editor(props) {
width={width}
/>
)}
<Canvas />
<Canvas state={state} setState={setState} />
{layout.services && (
<MessageContext.Provider
value={{ messages, setMessages }}