Terakoda/dm-companion
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Forms now update documents directly.

Browse Source
This commit is contained in:
Drew Haven
2025-07-02 17:36:45 -07:00
parent f27432ef05
commit db4ce36c27
17 changed files with 120 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
src/components/RelationshipList.tsx
View File

@@ -1,4 +1,5 @@
import { DocumentList } from "@/components/DocumentList";
import { useDocument } from "@/context/document/DocumentContext";
import { pb } from "@/lib/pocketbase";
import { displayName } from "@/lib/relationships";
import type {
@@ -7,12 +8,10 @@ import type {
Relationship,
RelationshipType,
} from "@/lib/types";
import { useQueryClient } from "@tanstack/react-query";
import { useEffect, useState } from "react";
import { useState } from "react";
import { Loader } from "./Loader";
import { DocumentRow } from "./documents/DocumentRow";
import { NewRelatedDocumentForm } from "./documents/NewRelatedDocumentForm";
import { useDocument } from "@/context/document/DocumentContext";
interface RelationshipListProps {
root: AnyDocument;
@@ -27,99 +26,8 @@ export function RelationshipList({
root,
relationshipType,
}: RelationshipListProps) {
// const [items, setItems] = useState<AnyDocument[]>([]);
// const [relationshipId, setRelationshipId] = useState<string | null>(null);
const [loading, setLoading] = useState(true);
const [_loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
// const queryClient = useQueryClient();
// useEffect(() => {
// async function fetchItems() {
// const { relationship } = await queryClient.fetchQuery({
// queryKey: ["relationship", relationshipType, root.id],
// staleTime: 5 * 60 * 1000, // 5 mintues
// queryFn: async () => {
// setLoading(true);
// const relationship: Relationship = await pb
// .collection("relationships")
// .getFirstListItem(
// `primary = "${root.id}" && type = "${relationshipType}"`,
// {
// expand: "secondary",
// },
// );
//
// setLoading(false);
//
// return { relationship };
// },
// });
// setRelationshipId(relationship.id);
// setItems(relationship.expand?.secondary ?? []);
// }
//
// fetchItems();
// }, [root, relationshipType]);
// Handles creation of a new document and adds it to the relationship
// const handleCreate = async (doc: AnyDocument) => {
// setLoading(true);
// setError(null);
// try {
// // Check for existing relationship
// if (relationshipId) {
// console.debug("Adding to existing relationship", relationshipId);
// await pb.collection("relationships").update(relationshipId, {
// "+secondary": doc.id,
// });
// } else {
// console.debug("Creating new relationship");
// const relationship = await pb.collection("relationships").create({
// primary: root.id,
// secondary: [doc.id],
// type: relationshipType,
// });
// setRelationshipId(relationship.id);
// }
// queryClient.invalidateQueries({
// queryKey: ["relationship", relationshipType, root.id],
// });
// setItems((prev) => [doc, ...prev]);
// } catch (e: any) {
// setError(e?.message || "Failed to add document to relationship.");
// } finally {
// setLoading(false);
// }
// };
//
// const handleRemove = async (documentId: DocumentId) => {
// setLoading(true);
// setError(null);
//
// try {
// if (relationshipId) {
// console.debug("Removing from existing relationship", relationshipId);
// await pb.collection("relationships").update(relationshipId, {
// "secondary-": documentId,
// });
// }
// queryClient.invalidateQueries({
// queryKey: ["relationship", relationshipType, root.id],
// });
// setItems((prev) => prev.filter((item) => item.id != documentId));
// } catch (e: any) {
// setError(
// e?.message || `Failed to remove document from ${relationshipType}.`,
// );
// } finally {
// setLoading(false);
// }
// };
//
// if (loading) {
// <Loader />;
// }
const { state, dispatch } = useDocument();
if (state.status === "loading") {
@@ -162,10 +70,6 @@ export function RelationshipList({
relationship: updatedRelationship,
});
}
dispatch({
type: "setRelatedDocument",
doc,
});
} catch (e: any) {
setError(e?.message || "Failed to add document to relationship.");
} finally {

8
src/components/documents/location/LocationEditForm.tsx
View File

@@ -1,27 +1,31 @@
import { AutoSaveTextarea } from "@/components/AutoSaveTextarea";
import { pb } from "@/lib/pocketbase";
import type { Location } from "@/lib/types";
import { useDocument } from "@/context/document/DocumentContext";
/**
* Renders an editable location form
*/
export const LocationEditForm = ({ location }: { location: Location }) => {
const { dispatch } = useDocument();
async function saveLocationName(name: string) {
await pb.collection("documents").update(location.id, {
const updated: Location = await pb.collection("documents").update(location.id, {
data: {
...location.data,
name,
},
});
dispatch({ type: "setDocument", doc: updated });
}
async function saveLocationDescription(description: string) {
await pb.collection("documents").update(location.id, {
const updated: Location = await pb.collection("documents").update(location.id, {
data: {
...location.data,
description,
},
});
dispatch({ type: "setDocument", doc: updated });
}
return (

3
src/components/documents/location/NewLocationForm.tsx
View File

@@ -4,6 +4,7 @@ import { pb } from "@/lib/pocketbase";
import { BaseForm } from "@/components/form/BaseForm";
import { MultiLineInput } from "@/components/form/MultiLineInput";
import { SingleLineInput } from "@/components/form/SingleLineInput";
import { useDocument } from "@/context/document/DocumentContext";
/**
* Renders a form to add a new location. Calls onCreate with the new location document.
@@ -15,6 +16,7 @@ export const NewLocationForm = ({
campaign: CampaignId;
onCreate: (location: Location) => Promise<void>;
}) => {
const { dispatch } = useDocument();
const [name, setName] = useState("");
const [description, setDescription] = useState("");
const [adding, setAdding] = useState(false);
@@ -36,6 +38,7 @@ export const NewLocationForm = ({
});
setName("");
setDescription("");
dispatch({ type: "setDocument", doc: locationDoc});
await onCreate(locationDoc);
} catch (e: any) {
setError(e?.message || "Failed to add location.");

5
src/components/documents/monsters/MonsterEditForm.tsx
View File

@@ -1,18 +1,21 @@
import { AutoSaveTextarea } from "@/components/AutoSaveTextarea";
import { pb } from "@/lib/pocketbase";
import type { Monster } from "@/lib/types";
import { useDocument } from "@/context/document/DocumentContext";
/**
* Renders an editable monster row
*/
export const MonsterEditForm = ({ monster }: { monster: Monster }) => {
const { dispatch } = useDocument();
async function saveMonsterName(name: string) {
await pb.collection("documents").update(monster.id, {
const updated = await pb.collection("documents").update(monster.id, {
data: {
...monster.data,
name,
},
});
dispatch({ type: "setDocument", doc: updated });
}
return (

3
src/components/documents/monsters/NewMonsterForm.tsx
View File

@@ -3,6 +3,7 @@ import type { CampaignId, Monster } from "@/lib/types";
import { pb } from "@/lib/pocketbase";
import { BaseForm } from "@/components/form/BaseForm";
import { SingleLineInput } from "@/components/form/SingleLineInput";
import { useDocument } from "@/context/document/DocumentContext";
/**
* Renders a form to add a new monster. Calls onCreate with the new monster document.
@@ -14,6 +15,7 @@ export const NewMonsterForm = ({
campaign: CampaignId;
onCreate: (monster: Monster) => Promise<void>;
}) => {
const { dispatch } = useDocument();
const [name, setName] = useState("");
const [adding, setAdding] = useState(false);
const [error, setError] = useState<string | null>(null);
@@ -32,6 +34,7 @@ export const NewMonsterForm = ({
},
});
setName("");
dispatch({ type: "setDocument", doc: monsterDoc });
await onCreate(monsterDoc);
} catch (e: any) {
setError(e?.message || "Failed to add monster.");

3
src/components/documents/npc/NewNpcForm.tsx
View File

@@ -4,6 +4,7 @@ import { pb } from "@/lib/pocketbase";
import { BaseForm } from "@/components/form/BaseForm";
import { SingleLineInput } from "@/components/form/SingleLineInput";
import { MultiLineInput } from "@/components/form/MultiLineInput";
import { useDocument } from "@/context/document/DocumentContext";
/**
* Renders a form to add a new npc. Calls onCreate with the new npc document.
@@ -15,6 +16,7 @@ export const NewNpcForm = ({
campaign: CampaignId;
onCreate: (npc: Npc) => Promise<void>;
}) => {
const { dispatch } = useDocument();
const [name, setName] = useState("");
const [description, setDescription] = useState("");
const [adding, setAdding] = useState(false);
@@ -36,6 +38,7 @@ export const NewNpcForm = ({
});
setName("");
setDescription("");
dispatch({ type: "setDocument", doc: npcDoc });
await onCreate(npcDoc);
} catch (e: any) {
setError(e?.message || "Failed to add npc.");

8
src/components/documents/npc/NpcEditForm.tsx
View File

@@ -1,4 +1,5 @@
import { AutoSaveTextarea } from "@/components/AutoSaveTextarea";
import { useDocument } from "@/context/document/DocumentContext";
import { pb } from "@/lib/pocketbase";
import type { Npc } from "@/lib/types";
@@ -6,22 +7,25 @@ import type { Npc } from "@/lib/types";
* Renders an editable npc form
*/
export const NpcEditForm = ({ npc }: { npc: Npc }) => {
const { dispatch } = useDocument();
async function saveNpcName(name: string) {
await pb.collection("documents").update(npc.id, {
const updated: Npc = await pb.collection("documents").update(npc.id, {
data: {
...npc.data,
name,
},
});
dispatch({ type: "setDocument", doc: updated });
}
async function saveNpcDescription(description: string) {
await pb.collection("documents").update(npc.id, {
const updated: Npc = await pb.collection("documents").update(npc.id, {
data: {
...npc.data,
description,
},
});
dispatch({ type: "setDocument", doc: updated });
}
return (

3
src/components/documents/scene/NewSceneForm.tsx
View File

@@ -5,6 +5,7 @@ import type { CampaignId, Scene } from "@/lib/types";
import { pb } from "@/lib/pocketbase";
import { BaseForm } from "@/components/form/BaseForm";
import { MultiLineInput } from "@/components/form/MultiLineInput";
import { useDocument } from "@/context/document/DocumentContext";
/**
* Renders a form to add a new scene. Calls onCreate with the new scene document.
@@ -16,6 +17,7 @@ export const NewSceneForm = ({
campaign: CampaignId;
onCreate: (scene: Scene) => Promise<void>;
}) => {
const { dispatch } = useDocument();
const [text, setText] = useState("");
const [adding, setAdding] = useState(false);
const [error, setError] = useState<string | null>(null);
@@ -34,6 +36,7 @@ export const NewSceneForm = ({
},
});
setText("");
dispatch({ type: "setDocument", doc: sceneDoc });
await onCreate(sceneDoc);
} catch (e: any) {
setError(e?.message || "Failed to add scene.");

8
src/components/documents/scene/SceneEditForm.tsx
View File

@@ -1,24 +1,24 @@
import { AutoSaveTextarea } from "@/components/AutoSaveTextarea";
import { pb } from "@/lib/pocketbase";
import type { Scene } from "@/lib/types";
import { useDocument } from "@/context/document/DocumentContext";
import { useQueryClient } from "@tanstack/react-query";
/**
* Renders an editable scene form
*/
export const SceneEditForm = ({ scene }: { scene: Scene }) => {
const { dispatch } = useDocument();
const queryClient = useQueryClient();
async function saveScene(text: string) {
await pb.collection("documents").update(scene.id, {
const updated: Scene = await pb.collection("documents").update(scene.id, {
data: {
...scene.data,
text,
},
});
queryClient.invalidateQueries({
queryKey: ["relationship"],
});
dispatch({ type: "setDocument", doc: updated });
}
return (

3
src/components/documents/secret/NewSecretForm.tsx
View File

@@ -5,6 +5,7 @@ import type { CampaignId, Secret } from "@/lib/types";
import { pb } from "@/lib/pocketbase";
import { BaseForm } from "@/components/form/BaseForm";
import { SingleLineInput } from "@/components/form/SingleLineInput";
import { useDocument } from "@/context/document/DocumentContext";
/**
* Renders a form to add a new secret. Calls onCreate with the new secret document.
@@ -16,6 +17,7 @@ export const NewSecretForm = ({
campaign: CampaignId;
onCreate: (secret: Secret) => Promise<void>;
}) => {
const { dispatch } = useDocument();
const [newSecret, setNewSecret] = useState("");
const [adding, setAdding] = useState(false);
const [error, setError] = useState<string | null>(null);
@@ -35,6 +37,7 @@ export const NewSecretForm = ({
},
});
setNewSecret("");
dispatch({ type: "setDocument", doc: secretDoc as Secret});
await onCreate(secretDoc);
} catch (e: any) {
setError(e?.message || "Failed to add secret.");

51
src/components/documents/secret/SecretEditForm.tsx
View File

@@ -1,20 +1,16 @@
// Displays a single secret with discovered checkbox and text.
import type { Secret, Session } from "@/lib/types";
import { pb } from "@/lib/pocketbase";
import { useState } from "react";
import { AutoSaveTextarea } from "@/components/AutoSaveTextarea";
import { useDocument } from "@/context/document/DocumentContext";
import { pb } from "@/lib/pocketbase";
import type { Secret } from "@/lib/types";
import { useState } from "react";
/**
* Renders an editable secret form.
* Handles updating the discovered state and discoveredIn relationship.
*/
export const SecretEditForm = ({
secret,
session,
}: {
secret: Secret;
session?: Session;
}) => {
export const SecretEditForm = ({ secret }: { secret: Secret }) => {
const { dispatch } = useDocument();
const [checked, setChecked] = useState(
!!(secret.data as any)?.secret?.discovered,
);
@@ -25,43 +21,28 @@ export const SecretEditForm = ({
setLoading(true);
setChecked(newChecked);
try {
await pb.collection("documents").update(secret.id, {
data: {
...secret.data,
discovered: newChecked,
},
});
if (session || !newChecked) {
// If the session exists or the element is being unchecked, remove any
// existing discoveredIn relationship
const rels = await pb.collection("relationships").getList(1, 1, {
filter: `primary = "${secret.id}" && type = "discoveredIn"`,
const updated: Secret = await pb
.collection("documents")
.update(secret.id, {
data: {
...secret.data,
discovered: newChecked,
},
});
if (rels.items.length > 0) {
await pb.collection("relationships").delete(rels.items[0].id);
}
}
if (session) {
if (newChecked) {
await pb.collection("relationships").create({
primary: secret.id,
secondary: [session.id],
type: "discoveredIn",
});
}
}
dispatch({ type: "setDocument", doc: updated });
} finally {
setLoading(false);
}
}
async function saveText(text: string) {
await pb.collection("documents").update(secret.id, {
const updated: Secret = await pb.collection("documents").update(secret.id, {
data: {
...secret.data,
text,
},
});
dispatch({ type: "setDocument", doc: updated });
}
return (

21
src/components/documents/session/SessionEditForm.tsx
View File

@@ -1,17 +1,22 @@
import { AutoSaveTextarea } from "@/components/AutoSaveTextarea";
import { useDocument } from "@/context/document/DocumentContext";
import { pb } from "@/lib/pocketbase";
import type { Session } from "@/lib/types";
export const SessionEditForm = ({ session }: { session: Session }) => {
const { dispatch } = useDocument();
async function saveStrongStart(strongStart: string) {
const freshRecord: Session = await pb
.collection("documents")
.update(session.id, {
data: {
...session.data,
strongStart,
},
});
const doc: Session = await pb.collection("documents").update(session.id, {
data: {
...session.data,
strongStart,
},
});
dispatch({
type: "setDocument",
doc,
});
}
return (

6
src/components/documents/treasure/NewTreasureForm.tsx
View File

@@ -5,6 +5,7 @@ import type { CampaignId, Treasure } from "@/lib/types";
import { pb } from "@/lib/pocketbase";
import { BaseForm } from "@/components/form/BaseForm";
import { SingleLineInput } from "@/components/form/SingleLineInput";
import { useDocument } from "@/context/document/DocumentContext";
/**
* Renders a form to add a new treasure. Calls onCreate with the new treasure document.
@@ -16,6 +17,7 @@ export const NewTreasureForm = ({
campaign: CampaignId;
onCreate: (treasure: Treasure) => Promise<void>;
}) => {
const { dispatch } = useDocument();
const [newTreasure, setNewTreasure] = useState("");
const [adding, setAdding] = useState(false);
const [error, setError] = useState<string | null>(null);
@@ -35,6 +37,10 @@ export const NewTreasureForm = ({
},
});
setNewTreasure("");
dispatch({
type: "setDocument",
doc: treasureDoc,
});
await onCreate(treasureDoc);
} catch (e: any) {
setError(e?.message || "Failed to add treasure.");

67
src/components/documents/treasure/TreasureEditForm.tsx
View File

@@ -1,20 +1,16 @@
// Displays a single treasure with discovered checkbox and text.
import type { Treasure, Session } from "@/lib/types";
import { pb } from "@/lib/pocketbase";
import { useState } from "react";
import { AutoSaveTextarea } from "@/components/AutoSaveTextarea";
import { useDocument } from "@/context/document/DocumentContext";
import { pb } from "@/lib/pocketbase";
import type { Treasure } from "@/lib/types";
import { useState } from "react";
/**
* Renders an editable treasure form.
* Handles updating the discovered state and discoveredIn relationship.
*/
export const TreasureEditForm = ({
treasure,
session,
}: {
treasure: Treasure;
session?: Session;
}) => {
export const TreasureEditForm = ({ treasure }: { treasure: Treasure }) => {
const { dispatch } = useDocument();
const [checked, setChecked] = useState(
!!(treasure.data as any)?.treasure?.discovered,
);
@@ -25,46 +21,33 @@ export const TreasureEditForm = ({
setLoading(true);
setChecked(newChecked);
try {
await pb.collection("documents").update(treasure.id, {
data: {
...treasure.data,
treasure: {
...(treasure.data as any).treasure,
discovered: newChecked,
const updated: Treasure = await pb
.collection("documents")
.update(treasure.id, {
data: {
...treasure.data,
treasure: {
...(treasure.data as any).treasure,
discovered: newChecked,
},
},
},
});
if (session || !newChecked) {
// If the session exists or the element is being unchecked, remove any
// existing discoveredIn relationship
const rels = await pb.collection("relationships").getList(1, 1, {
filter: `primary = "${treasure.id}" && type = "discoveredIn"`,
});
if (rels.items.length > 0) {
await pb.collection("relationships").delete(rels.items[0].id);
}
}
if (session) {
if (newChecked) {
await pb.collection("relationships").create({
primary: treasure.id,
secondary: [session.id],
type: "discoveredIn",
});
}
}
dispatch({ type: "setDocument", doc: updated });
} finally {
setLoading(false);
}
}
async function saveText(text: string) {
await pb.collection("documents").update(treasure.id, {
data: {
...treasure.data,
text,
},
});
const updated: Treasure = await pb
.collection("documents")
.update(treasure.id, {
data: {
...treasure.data,
text,
},
});
dispatch({ type: "setDocument", doc: updated });
}
return (