forked from administration/panel
90 lines
2.7 KiB
TypeScript
90 lines
2.7 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { Textarea } from "../ui/textarea";
|
|
import { toast } from "../ui/use-toast";
|
|
import { SafetyNotes, fetchSafetyNote, updateSafetyNote } from "@/lib/db";
|
|
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../ui/card";
|
|
import { useSession } from "next-auth/react";
|
|
import dayjs from "dayjs";
|
|
import relativeTime from "dayjs/plugin/relativeTime";
|
|
dayjs.extend(relativeTime);
|
|
|
|
export default function SafetyNotesCard({ objectId, type, title }: {
|
|
objectId: string,
|
|
type: SafetyNotes["_id"]["type"],
|
|
title?: string
|
|
}) {
|
|
const session = useSession();
|
|
const [draft, setDraft] = useState("");
|
|
const [value, setValue] = useState<SafetyNotes | null>(null);
|
|
const [ready, setReady] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
fetchSafetyNote(objectId, type)
|
|
.then((note) => {
|
|
setDraft(note?.text || "");
|
|
setValue(note);
|
|
setReady(true);
|
|
})
|
|
.catch((e) => {
|
|
setError(String(e));
|
|
});
|
|
}, [objectId, type]);
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>{title ?? type.charAt(0).toUpperCase() + type.slice(1) + " notes"}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Textarea
|
|
placeholder={
|
|
error
|
|
? error
|
|
: ready
|
|
? "Enter notes here... (save on unfocus)"
|
|
: "Fetching notes..."
|
|
}
|
|
className="!min-h-[80px] max-h-[50vh]"
|
|
disabled={!ready || error != null}
|
|
value={ready ? draft : undefined} // not defaulting to undefined causes next to complain
|
|
onChange={(e) => setDraft(e.currentTarget.value)}
|
|
onBlur={async () => {
|
|
if (draft === value?.text ?? "") return;
|
|
|
|
try {
|
|
await updateSafetyNote(objectId, type, draft);
|
|
setValue({
|
|
_id: { id: objectId, type: type },
|
|
edited_at: new Date(Date.now()),
|
|
edited_by: session.data?.user?.email || "",
|
|
text: draft,
|
|
});
|
|
toast({
|
|
title: "Updated notes",
|
|
});
|
|
} catch (err) {
|
|
toast({
|
|
title: "Failed to update notes",
|
|
description: String(err),
|
|
variant: "destructive",
|
|
});
|
|
}
|
|
}}
|
|
/>
|
|
</CardContent>
|
|
<CardFooter className="-my-2">
|
|
<CardDescription>
|
|
{
|
|
value
|
|
? <>Last edited {dayjs(value.edited_at).fromNow()} by {value.edited_by}</>
|
|
: <>No object note set</>
|
|
}
|
|
</CardDescription>
|
|
</CardFooter>
|
|
</Card>
|
|
)
|
|
}
|