240 lines
9.4 KiB
TypeScript
240 lines
9.4 KiB
TypeScript
'use client';
|
||
|
||
import { useEffect, useRef, useState } from 'react';
|
||
import { Counter } from './CounterCard';
|
||
|
||
export interface Group {
|
||
id: number;
|
||
name: string;
|
||
order_index: number;
|
||
}
|
||
|
||
interface Props {
|
||
open: boolean;
|
||
initial?: Counter | null;
|
||
groups: Group[];
|
||
onClose: () => void;
|
||
onSave: (data: {
|
||
name: string;
|
||
value: number;
|
||
group_id: number | null;
|
||
image_path: string | null;
|
||
}) => void;
|
||
onDelete?: (id: number) => void;
|
||
}
|
||
|
||
export default function CounterModal({ open, initial, groups, onClose, onSave, onDelete }: Props) {
|
||
const [confirmDelete, setConfirmDelete] = useState(false);
|
||
const deleteTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||
const [name, setName] = useState('');
|
||
const [value, setValue] = useState(0);
|
||
const [groupId, setGroupId] = useState<number | null>(null);
|
||
const [imagePath, setImagePath] = useState<string | null>(null);
|
||
const [previewUrl, setPreviewUrl] = useState<string | null>(null);
|
||
const [uploading, setUploading] = useState(false);
|
||
const [error, setError] = useState('');
|
||
const nameRef = useRef<HTMLInputElement>(null);
|
||
|
||
// Revoke blob URLs when previewUrl changes (prevents memory leaks)
|
||
useEffect(() => {
|
||
const url = previewUrl;
|
||
return () => { if (url?.startsWith('blob:')) URL.revokeObjectURL(url); };
|
||
}, [previewUrl]);
|
||
|
||
useEffect(() => {
|
||
if (open) {
|
||
setName(initial?.name ?? '');
|
||
setValue(initial?.value ?? 0);
|
||
setGroupId(initial?.group_id ?? null);
|
||
setImagePath(initial?.image_path ?? null);
|
||
setPreviewUrl(initial?.image_path ? `/api/uploads/${initial.image_path}` : null);
|
||
setError('');
|
||
setConfirmDelete(false);
|
||
if (deleteTimer.current) clearTimeout(deleteTimer.current);
|
||
setTimeout(() => nameRef.current?.focus(), 50);
|
||
}
|
||
}, [open, initial]);
|
||
|
||
async function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
|
||
const file = e.target.files?.[0];
|
||
if (!file) return;
|
||
setPreviewUrl(URL.createObjectURL(file));
|
||
setUploading(true);
|
||
try {
|
||
const fd = new FormData();
|
||
fd.append('file', file);
|
||
const res = await fetch('/api/upload', { method: 'POST', body: fd });
|
||
if (!res.ok) {
|
||
const body = await res.json();
|
||
setError(body.error ?? 'Upload failed');
|
||
return;
|
||
}
|
||
const { filename } = await res.json();
|
||
setImagePath(filename);
|
||
} catch {
|
||
setError('Upload failed');
|
||
} finally {
|
||
setUploading(false);
|
||
}
|
||
}
|
||
|
||
function handleSubmit(e: React.FormEvent) {
|
||
e.preventDefault();
|
||
if (!name.trim()) { setError('Name is required'); return; }
|
||
if (uploading) { setError('Please wait for the image to finish uploading'); return; }
|
||
onSave({ name: name.trim(), value, group_id: groupId, image_path: imagePath });
|
||
}
|
||
|
||
function handleBackdrop(e: React.MouseEvent) {
|
||
if (e.target === e.currentTarget) onClose();
|
||
}
|
||
|
||
useEffect(() => {
|
||
if (!open) return;
|
||
function onKeyDown(e: KeyboardEvent) {
|
||
if (e.key === 'Escape') onClose();
|
||
}
|
||
window.addEventListener('keydown', onKeyDown);
|
||
return () => window.removeEventListener('keydown', onKeyDown);
|
||
}, [open, onClose]);
|
||
|
||
if (!open) return null;
|
||
|
||
return (
|
||
<div
|
||
className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4"
|
||
onClick={handleBackdrop}
|
||
>
|
||
<div className="bg-ctp-mantle rounded-2xl shadow-2xl w-full max-w-md">
|
||
<div className="flex items-center justify-between px-6 py-4 border-b border-ctp-surface1">
|
||
<h2 className="text-lg font-semibold text-ctp-text">
|
||
{initial ? 'Edit Counter' : 'New Counter'}
|
||
</h2>
|
||
<button onClick={onClose} className="text-ctp-overlay0 hover:text-ctp-text text-xl leading-none">×</button>
|
||
</div>
|
||
|
||
<form onSubmit={handleSubmit} className="px-6 py-4 space-y-4">
|
||
{error && (
|
||
<p className="text-sm text-ctp-red bg-ctp-red/10 rounded-lg px-3 py-2">{error}</p>
|
||
)}
|
||
|
||
{/* Name */}
|
||
<div>
|
||
<label className="block text-sm font-medium text-ctp-subtext1 mb-1">Name</label>
|
||
<input
|
||
ref={nameRef}
|
||
type="text"
|
||
value={name}
|
||
onChange={e => setName(e.target.value)}
|
||
className="w-full rounded-lg border border-ctp-surface1 bg-ctp-surface0 text-ctp-text px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ctp-mauve"
|
||
placeholder="Counter name"
|
||
/>
|
||
</div>
|
||
|
||
{/* Initial value */}
|
||
<div>
|
||
<label className="block text-sm font-medium text-ctp-subtext1 mb-1">
|
||
{initial ? 'Value' : 'Initial Value'}
|
||
</label>
|
||
<input
|
||
type="number"
|
||
value={value}
|
||
onChange={e => setValue(Number(e.target.value))}
|
||
className="w-full rounded-lg border border-ctp-surface1 bg-ctp-surface0 text-ctp-text px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ctp-mauve"
|
||
/>
|
||
</div>
|
||
|
||
{/* Group */}
|
||
<div>
|
||
<label className="block text-sm font-medium text-ctp-subtext1 mb-1">Group</label>
|
||
<select
|
||
value={groupId ?? ''}
|
||
onChange={e => setGroupId(e.target.value ? Number(e.target.value) : null)}
|
||
className="w-full rounded-lg border border-ctp-surface1 bg-ctp-surface0 text-ctp-text px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ctp-mauve"
|
||
>
|
||
<option value="">— No group —</option>
|
||
{groups.map(g => (
|
||
<option key={g.id} value={g.id}>{g.name}</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
|
||
{/* Image upload */}
|
||
<div>
|
||
<label className="block text-sm font-medium text-ctp-subtext1 mb-1">Photo</label>
|
||
{previewUrl && (
|
||
<div className="relative w-full mb-2 rounded-lg overflow-hidden bg-ctp-crust flex items-center justify-center" style={{ minHeight: '8rem', maxHeight: '12rem' }}>
|
||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||
<img src={previewUrl} alt="Preview" className="max-w-full max-h-48 object-contain py-2" />
|
||
<button
|
||
type="button"
|
||
onClick={() => { setPreviewUrl(null); setImagePath(null); }}
|
||
className="absolute top-1 right-1 bg-ctp-crust/80 text-ctp-text rounded-full w-6 h-6 flex items-center justify-center text-xs hover:bg-ctp-surface0"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
)}
|
||
<label className={`flex items-center justify-center gap-2 w-full px-3 py-2 rounded-lg border border-dashed text-sm font-medium transition-colors ${
|
||
uploading
|
||
? 'border-ctp-surface1 text-ctp-overlay0 cursor-wait'
|
||
: 'border-ctp-surface2 text-ctp-subtext1 hover:border-ctp-mauve hover:text-ctp-mauve hover:bg-ctp-mauve/5'
|
||
}`}>
|
||
<input type="file" accept="image/*" onChange={handleFileChange} className="hidden" disabled={uploading} />
|
||
<svg xmlns="http://www.w3.org/2000/svg" className="w-4 h-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
|
||
<polyline points="17 8 12 3 7 8" />
|
||
<line x1="12" y1="3" x2="12" y2="15" />
|
||
</svg>
|
||
{uploading ? 'Uploading…' : previewUrl ? 'Replace photo' : 'Upload photo'}
|
||
</label>
|
||
</div>
|
||
|
||
<div className="flex items-center justify-between gap-3 pt-2">
|
||
{/* Delete — only shown when editing an existing counter */}
|
||
{initial && onDelete ? (
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
if (confirmDelete) {
|
||
if (deleteTimer.current) clearTimeout(deleteTimer.current);
|
||
onDelete(initial.id);
|
||
onClose();
|
||
} else {
|
||
setConfirmDelete(true);
|
||
deleteTimer.current = setTimeout(() => setConfirmDelete(false), 3000);
|
||
}
|
||
}}
|
||
className={`px-4 py-2 text-sm rounded-lg font-medium transition-colors ${
|
||
confirmDelete
|
||
? 'bg-ctp-red hover:bg-ctp-maroon text-ctp-base'
|
||
: 'text-ctp-red hover:bg-ctp-red/10 border border-ctp-red/30'
|
||
}`}
|
||
>
|
||
{confirmDelete ? 'Confirm delete' : 'Delete counter'}
|
||
</button>
|
||
) : <span />}
|
||
|
||
<div className="flex gap-3">
|
||
<button
|
||
type="button"
|
||
onClick={onClose}
|
||
className="px-4 py-2 text-sm rounded-lg border border-ctp-surface1 text-ctp-subtext1 hover:bg-ctp-surface0 transition-colors"
|
||
>
|
||
Cancel
|
||
</button>
|
||
<button
|
||
type="submit"
|
||
disabled={uploading}
|
||
className="px-4 py-2 text-sm rounded-lg bg-ctp-mauve hover:bg-ctp-lavender disabled:opacity-50 text-ctp-base font-medium transition-colors"
|
||
>
|
||
{initial ? 'Save Changes' : 'Create Counter'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|