Gabriel Kaszewski
29cc68b07c
Some checks failed
CI / Check / Test (push) Failing after 27m0s
- WatchMedium enum (cinema/streaming/tv/physical_media/download/media_server/other) - PATCH /api/v1/reviews/:id partial update (rating, comment, watched_at, watch_medium) - edit_review use case w/ ownership + remote review guard, best-effort AP Update broadcast - SPA: icon picker, edit sheet (long-press mobile / pencil desktop), watch medium badge - shared ReviewFormFields, EditableContextMenu, parse_watched_at/format_watched_at - deploy.sh parameterized (--features, --tag), CORS allows PATCH - CONTEXT.md glossary, ADR-0001 general review editing
71 lines
2.3 KiB
TypeScript
71 lines
2.3 KiB
TypeScript
import { useTranslation } from "react-i18next"
|
|
import { CalendarIcon } from "lucide-react"
|
|
import { format } from "date-fns"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Textarea } from "@/components/ui/textarea"
|
|
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
|
|
import { Calendar } from "@/components/ui/calendar"
|
|
import { StarRating } from "@/components/star-rating"
|
|
import { WatchMediumPicker } from "@/components/watch-medium-picker"
|
|
|
|
type ReviewFormFieldsProps = {
|
|
rating: number
|
|
onRatingChange: (v: number) => void
|
|
comment: string
|
|
onCommentChange: (v: string) => void
|
|
watchedAt: Date
|
|
onWatchedAtChange: (v: Date) => void
|
|
watchMedium?: string
|
|
onWatchMediumChange: (v: string | undefined) => void
|
|
}
|
|
|
|
export function ReviewFormFields({
|
|
rating,
|
|
onRatingChange,
|
|
comment,
|
|
onCommentChange,
|
|
watchedAt,
|
|
onWatchedAtChange,
|
|
watchMedium,
|
|
onWatchMediumChange,
|
|
}: ReviewFormFieldsProps) {
|
|
const { t } = useTranslation()
|
|
|
|
return (
|
|
<>
|
|
<div className="mb-5 text-center">
|
|
<p className="mb-2 text-xs uppercase tracking-wide text-muted-foreground">{t("logReview.yourRating")}</p>
|
|
<div className="flex justify-center"><StarRating value={rating} onChange={onRatingChange} /></div>
|
|
</div>
|
|
|
|
<Textarea value={comment} onChange={(e) => onCommentChange(e.target.value)} placeholder={t("logReview.commentPlaceholder")} className="mb-5" rows={3} />
|
|
|
|
<div className="mb-5">
|
|
<p className="mb-2 text-xs uppercase tracking-wide text-muted-foreground">{t("logReview.watchedAt")}</p>
|
|
<Popover modal>
|
|
<PopoverTrigger asChild>
|
|
<Button variant="outline" className="w-full justify-start text-left font-normal">
|
|
<CalendarIcon className="mr-2 size-4" />
|
|
{format(watchedAt, "PPP")}
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-auto p-0" align="start">
|
|
<Calendar
|
|
mode="single"
|
|
fixedWeeks
|
|
selected={watchedAt}
|
|
onSelect={(d) => d && onWatchedAtChange(d)}
|
|
disabled={(d) => d > new Date()}
|
|
autoFocus
|
|
/>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</div>
|
|
|
|
<div className="mb-5">
|
|
<WatchMediumPicker value={watchMedium} onChange={onWatchMediumChange} />
|
|
</div>
|
|
</>
|
|
)
|
|
}
|