Save todos
This commit is contained in:
parent
c9a8d76e8e
commit
47707146b8
@ -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,
|
||||
|
@ -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>
|
||||
|
@ -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",
|
||||
});
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user