@aiquants/daily-report 0.1.1

package/src/client/components/daily-report-edit-form.tsx

@@ -0,0 +1,81 @@
+import { useEffect, useRef, useState } from "react"
+import type { DailyReportDetail } from "../../shared/types"
+import { useDailyReportActionContext } from "../contexts/daily-report-action-context"
+import { Button } from "../ui/button"
+import { Input } from "../ui/input"
+import { Label } from "../ui/label"
+import { Textarea } from "../ui/textarea"
+
+type DailyReportEditFormProps = {
+    report: DailyReportDetail
+    onCancel?: () => void
+    onPublishSuccess?: () => void
+}
+
+export const DailyReportEditForm = ({ report, onCancel, onPublishSuccess }: DailyReportEditFormProps) => {
+    const { updateReport, publishReport } = useDailyReportActionContext()
+    const [title, setTitle] = useState(report.subject ?? "")
+    const [content, setContent] = useState(report.content ?? "")
+    const [isSaving, setIsSaving] = useState(false)
+
+    // 同一レポート編集中に SSE/キャッシュ更新でフォームがリセットされるのを防止するための ID 追跡
+    const syncedReportIdRef = useRef(report.reportHubId)
+
+    // レポート切り替え時のみフォーム状態を同期する (同一レポートのキャッシュ更新ではリセットしない)
+    useEffect(() => {
+        if (report.reportHubId !== syncedReportIdRef.current) {
+            setTitle(report.subject ?? "")
+            setContent(report.content ?? "")
+            syncedReportIdRef.current = report.reportHubId
+        }
+    }, [report.reportHubId, report.subject, report.content])
+
+    const handleSave = async () => {
+        setIsSaving(true)
+        try {
+            await updateReport(report.reportHubId, { title, content }, report.date ?? "")
+        } finally {
+            setIsSaving(false)
+        }
+    }
+
+    const handlePublish = async () => {
+        setIsSaving(true)
+        try {
+            // Ensure latest changes are saved before publishing
+            await updateReport(report.reportHubId, { title, content }, report.date ?? "")
+            await publishReport(report.reportHubId, report.date ?? "")
+            onPublishSuccess?.()
+        } finally {
+            setIsSaving(false)
+        }
+    }
+
+    return (
+        <div className="space-y-6 p-1">
+            <div className="space-y-2">
+                <Label htmlFor={`report-title-${report.reportHubId}`}>タイトル</Label>
+                <Input id={`report-title-${report.reportHubId}`} value={title} onChange={(e) => setTitle(e.target.value)} placeholder="日報のタイトルを入力" disabled={isSaving} />
+            </div>
+
+            <div className="space-y-2">
+                <Label htmlFor={`report-content-${report.reportHubId}`}>内容</Label>
+                <Textarea id={`report-content-${report.reportHubId}`} value={content} onChange={(e) => setContent(e.target.value)} placeholder="日報の内容を入力" className="min-h-50" disabled={isSaving} />
+            </div>
+
+            <div className="flex justify-end gap-2">
+                {onCancel && (
+                    <Button variant="outline" onClick={onCancel} disabled={isSaving}>
+                        キャンセル
+                    </Button>
+                )}
+                <Button variant="secondary" onClick={handleSave} disabled={isSaving}>
+                    保存
+                </Button>
+                <Button onClick={handlePublish} disabled={isSaving}>
+                    公開
+                </Button>
+            </div>
+        </div>
+    )
+}