350 lines
11 KiB
TypeScript
350 lines
11 KiB
TypeScript
import { useId, useState } from 'react'
|
|
import { Dialog } from '#/components/dialog'
|
|
import { Button } from '#/components/ui/button'
|
|
import { Checkbox } from '#/components/ui/checkbox'
|
|
import { Input } from '#/components/ui/input'
|
|
import { SidebarInset, SidebarProvider } from '#/components/ui/sidebar'
|
|
import { Textarea } from '#/components/ui/textarea'
|
|
import { TooltipProvider } from '#/components/ui/tooltip'
|
|
import { WorkspaceNavigation } from '#/components/workspace-navigation'
|
|
import './journal.css'
|
|
|
|
type EntryKind = 'メモ' | '再開地点' | '服薬' | '体重'
|
|
type Entry = {
|
|
id: string
|
|
kind: EntryKind
|
|
text: string
|
|
source: string
|
|
occurredAt: string
|
|
recordedAt: string
|
|
correctionOf?: string
|
|
}
|
|
type Draft = Pick<Entry, 'kind' | 'text' | 'source' | 'occurredAt'>
|
|
const emptyDraft: Draft = { kind: 'メモ', text: '', source: '', occurredAt: '' }
|
|
const kinds: EntryKind[] = ['メモ', '再開地点', '服薬', '体重']
|
|
|
|
function formatTime(value: string | undefined) {
|
|
if (!value) return '不明'
|
|
return new Date(value).toLocaleString('ja-JP', {
|
|
year: 'numeric',
|
|
month: 'numeric',
|
|
day: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
})
|
|
}
|
|
|
|
export function JournalPage() {
|
|
const [entries, setEntries] = useState<Entry[]>([])
|
|
const [draft, setDraft] = useState<Draft>(emptyDraft)
|
|
const [correcting, setCorrecting] = useState<Entry | null>(null)
|
|
const [reviewing, setReviewing] = useState(false)
|
|
const [selected, setSelected] = useState<Set<string>>(new Set())
|
|
const superseded = new Set(entries.map((entry) => entry.correctionOf))
|
|
const current = entries.filter((entry) => !superseded.has(entry.id))
|
|
|
|
function append(value: Draft, correctionOf?: string) {
|
|
setEntries((previous) => [
|
|
{
|
|
...value,
|
|
text: value.text.trim(),
|
|
source: value.source.trim(),
|
|
id: crypto.randomUUID(),
|
|
recordedAt: new Date().toISOString(),
|
|
correctionOf,
|
|
},
|
|
...previous,
|
|
])
|
|
}
|
|
|
|
return (
|
|
<TooltipProvider delay={500}>
|
|
<SidebarProvider className="journal-workspace">
|
|
<WorkspaceNavigation />
|
|
<SidebarInset className="journal-main">
|
|
<header className="journal-header">
|
|
<h1 className="text-base font-semibold">記録</h1>
|
|
<Button
|
|
variant="outline"
|
|
disabled={current.length === 0}
|
|
onClick={() => {
|
|
setSelected(new Set(current.map((entry) => entry.id)))
|
|
setReviewing(true)
|
|
}}
|
|
>
|
|
記録をまとめる
|
|
</Button>
|
|
</header>
|
|
<div className="journal-scroll">
|
|
<div className="journal-column">
|
|
<EntryEditor
|
|
draft={draft}
|
|
onChange={setDraft}
|
|
onSubmit={() => {
|
|
append(draft)
|
|
setDraft(emptyDraft)
|
|
}}
|
|
submitLabel="記録する"
|
|
/>
|
|
<section className="journal-entries" aria-label="記録一覧">
|
|
{entries.length === 0 && (
|
|
<p className="journal-empty">まだ記録はありません</p>
|
|
)}
|
|
{entries.map((entry) => (
|
|
<article
|
|
key={entry.id}
|
|
className="journal-entry"
|
|
aria-label={`${entry.kind}の記録`}
|
|
>
|
|
<div className="journal-entry-heading">
|
|
<span className="text-sm font-medium">{entry.kind}</span>
|
|
{superseded.has(entry.id) && (
|
|
<span className="text-xs text-muted-foreground">
|
|
訂正前
|
|
</span>
|
|
)}
|
|
{entry.correctionOf && (
|
|
<span className="text-xs text-muted-foreground">
|
|
訂正
|
|
</span>
|
|
)}
|
|
{!superseded.has(entry.id) && (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="ml-auto"
|
|
onClick={() => setCorrecting(entry)}
|
|
>
|
|
訂正する
|
|
</Button>
|
|
)}
|
|
</div>
|
|
<p className="journal-entry-text">
|
|
{entry.text}
|
|
{entry.kind === '体重' ? ' kg' : ''}
|
|
</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
発生日時: {formatTime(entry.occurredAt)} · 記録日時:{' '}
|
|
{formatTime(entry.recordedAt)}
|
|
</p>
|
|
{(entry.kind === '体重' || entry.source) && (
|
|
<p className="mt-2 text-xs text-muted-foreground">
|
|
記録元: {entry.source || '不明'}
|
|
</p>
|
|
)}
|
|
</article>
|
|
))}
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</SidebarInset>
|
|
</SidebarProvider>
|
|
{correcting && (
|
|
<CorrectionDialog
|
|
entry={correcting}
|
|
onClose={() => setCorrecting(null)}
|
|
onSave={(value) => {
|
|
append(value, correcting.id)
|
|
setCorrecting(null)
|
|
}}
|
|
/>
|
|
)}
|
|
{reviewing && (
|
|
<Dialog
|
|
title="記録をまとめる"
|
|
className="sm:max-w-2xl"
|
|
onClose={() => setReviewing(false)}
|
|
>
|
|
<p className="text-sm text-muted-foreground">
|
|
含める記録を選んで確認できます。外部には送信されません。
|
|
</p>
|
|
<div className="journal-review-list">
|
|
{current.map((entry) => (
|
|
<label
|
|
key={entry.id}
|
|
className="journal-review-row"
|
|
htmlFor={`review-${entry.id}`}
|
|
>
|
|
<Checkbox
|
|
id={`review-${entry.id}`}
|
|
checked={selected.has(entry.id)}
|
|
onCheckedChange={(checked) =>
|
|
setSelected((previous) => {
|
|
const next = new Set(previous)
|
|
if (checked) next.add(entry.id)
|
|
else next.delete(entry.id)
|
|
return next
|
|
})
|
|
}
|
|
/>
|
|
<span>
|
|
<span className="text-xs text-muted-foreground">
|
|
{entry.kind} · {formatTime(entry.occurredAt)}
|
|
</span>
|
|
<span className="block text-sm">
|
|
{entry.text}
|
|
{entry.kind === '体重' ? ' kg' : ''}
|
|
</span>
|
|
</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
<Textarea
|
|
aria-label="記録のまとめ"
|
|
className="journal-summary"
|
|
readOnly
|
|
value={buildSummary(
|
|
current.filter((entry) => selected.has(entry.id)),
|
|
)}
|
|
/>
|
|
</Dialog>
|
|
)}
|
|
</TooltipProvider>
|
|
)
|
|
}
|
|
|
|
function EntryEditor({
|
|
draft,
|
|
onChange,
|
|
onSubmit,
|
|
submitLabel,
|
|
}: {
|
|
draft: Draft
|
|
onChange: (draft: Draft) => void
|
|
onSubmit: () => void
|
|
submitLabel: string
|
|
}) {
|
|
const dateId = useId()
|
|
const valid =
|
|
draft.text.trim().length > 0 &&
|
|
(draft.kind !== '体重' ||
|
|
(Number.isFinite(Number(draft.text)) && Number(draft.text) > 0))
|
|
return (
|
|
<form
|
|
className="journal-editor"
|
|
onSubmit={(event) => {
|
|
event.preventDefault()
|
|
if (valid) onSubmit()
|
|
}}
|
|
>
|
|
<fieldset className="journal-kind-switch" aria-label="記録の種類">
|
|
{kinds.map((kind) => (
|
|
<Button
|
|
key={kind}
|
|
type="button"
|
|
variant={draft.kind === kind ? 'secondary' : 'ghost'}
|
|
size="sm"
|
|
aria-pressed={draft.kind === kind}
|
|
onClick={() => onChange({ ...draft, kind })}
|
|
>
|
|
{kind}
|
|
</Button>
|
|
))}
|
|
</fieldset>
|
|
{draft.kind === '体重' ? (
|
|
<div className="flex items-center gap-2">
|
|
<Input
|
|
type="number"
|
|
step="any"
|
|
min="0.1"
|
|
aria-label="体重"
|
|
placeholder="体重"
|
|
value={draft.text}
|
|
onChange={(event) =>
|
|
onChange({ ...draft, text: event.target.value })
|
|
}
|
|
/>
|
|
<span className="text-sm text-muted-foreground">kg</span>
|
|
</div>
|
|
) : (
|
|
<Textarea
|
|
aria-label="記録内容"
|
|
placeholder={
|
|
draft.kind === '服薬'
|
|
? '服用した薬の名前'
|
|
: draft.kind === '再開地点'
|
|
? '次にすること、開いておく場所'
|
|
: '自由なメモ、次にすること'
|
|
}
|
|
value={draft.text}
|
|
onChange={(event) => onChange({ ...draft, text: event.target.value })}
|
|
/>
|
|
)}
|
|
{draft.kind === '体重' && (
|
|
<Input
|
|
aria-label="記録元"
|
|
placeholder="記録元（体重計など・任意）"
|
|
value={draft.source}
|
|
onChange={(event) =>
|
|
onChange({ ...draft, source: event.target.value })
|
|
}
|
|
/>
|
|
)}
|
|
<div className="journal-editor-footer">
|
|
<label className="journal-date-label" htmlFor={dateId}>
|
|
発生日時（任意）
|
|
<Input
|
|
id={dateId}
|
|
type="datetime-local"
|
|
aria-label="発生日時"
|
|
value={draft.occurredAt}
|
|
onChange={(event) =>
|
|
onChange({ ...draft, occurredAt: event.target.value })
|
|
}
|
|
/>
|
|
</label>
|
|
<Button type="submit" disabled={!valid}>
|
|
{submitLabel}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
)
|
|
}
|
|
|
|
function CorrectionDialog({
|
|
entry,
|
|
onClose,
|
|
onSave,
|
|
}: {
|
|
entry: Entry
|
|
onClose: () => void
|
|
onSave: (draft: Draft) => void
|
|
}) {
|
|
const [draft, setDraft] = useState<Draft>(entry)
|
|
return (
|
|
<Dialog title="記録を訂正" onClose={onClose} className="sm:max-w-xl">
|
|
<p className="text-sm text-muted-foreground">
|
|
元の記録を残して、訂正を追加します。
|
|
</p>
|
|
<EntryEditor
|
|
draft={draft}
|
|
onChange={setDraft}
|
|
onSubmit={() => onSave(draft)}
|
|
submitLabel="訂正を追加"
|
|
/>
|
|
</Dialog>
|
|
)
|
|
}
|
|
|
|
function buildSummary(entries: Entry[]) {
|
|
if (!entries.length) return '記録を選択してください。'
|
|
const dates = entries
|
|
.map((entry) => entry.occurredAt)
|
|
.filter(Boolean)
|
|
.sort()
|
|
const period = dates.length
|
|
? `${formatTime(dates[0])} 〜 ${formatTime(dates[dates.length - 1])}`
|
|
: '不明'
|
|
return [
|
|
`発生日時の期間: ${period}`,
|
|
`発生日時が不明の記録: ${entries.filter((entry) => !entry.occurredAt).length}件`,
|
|
'',
|
|
...entries.map(
|
|
(entry) =>
|
|
`[${entry.kind}] ${entry.text}${entry.kind === '体重' ? ' kg' : ''}\n発生日時: ${formatTime(entry.occurredAt)} / 記録日時: ${formatTime(entry.recordedAt)}${entry.kind === '体重' ? ` / 記録元: ${entry.source || '不明'}` : ''}`,
|
|
),
|
|
'',
|
|
'記録のない期間の服薬・体重は不明です。',
|
|
].join('\n')
|
|
}
|