266 lines
14 KiB
TypeScript
266 lines
14 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useMemo } from 'react';
|
|
import { Calendar, Star, ArrowUpDown, Clock, Trash2, Loader2, Users, GlassWater } from 'lucide-react';
|
|
import Link from 'next/link';
|
|
import AvatarStack from './AvatarStack';
|
|
import { useI18n } from '@/i18n/I18nContext';
|
|
import { deleteTasting } from '@/services/delete-tasting';
|
|
import { useLiveQuery } from 'dexie-react-hooks';
|
|
import { db } from '@/lib/db';
|
|
|
|
interface Tasting {
|
|
id: string;
|
|
rating: number;
|
|
nose_notes?: string;
|
|
palate_notes?: string;
|
|
finish_notes?: string;
|
|
is_sample?: boolean;
|
|
bottle_id?: string;
|
|
created_at: string;
|
|
tasting_buddies?: {
|
|
buddies: {
|
|
id: string;
|
|
name: string;
|
|
}
|
|
}[];
|
|
tasting_sessions?: {
|
|
id: string;
|
|
name: string;
|
|
};
|
|
tasting_tags?: {
|
|
tags: {
|
|
id: string;
|
|
name: string;
|
|
category: string;
|
|
is_system_default: boolean;
|
|
}
|
|
}[];
|
|
user_id: string;
|
|
isPending?: boolean;
|
|
}
|
|
|
|
interface TastingListProps {
|
|
initialTastings: Tasting[];
|
|
currentUserId?: string;
|
|
bottleId?: string;
|
|
}
|
|
|
|
export default function TastingList({ initialTastings, currentUserId, bottleId }: TastingListProps) {
|
|
const { t } = useI18n();
|
|
const [sortBy, setSortBy] = useState<'date-desc' | 'date-asc' | 'rating-desc' | 'rating-asc'>('date-desc');
|
|
const [isDeleting, setIsDeleting] = useState<string | null>(null);
|
|
|
|
const handleDelete = async (tastingId: string, bottleId: string) => {
|
|
if (tastingId.startsWith('pending-')) return;
|
|
if (!confirm('Bist du sicher, dass du diese Notiz löschen möchtest?')) return;
|
|
|
|
setIsDeleting(tastingId);
|
|
try {
|
|
const res = await deleteTasting(tastingId, bottleId);
|
|
if (!res.success) {
|
|
alert(res.error || 'Fehler beim Löschen');
|
|
}
|
|
} catch (err) {
|
|
alert('Löschen fehlgeschlagen');
|
|
} finally {
|
|
setIsDeleting(null);
|
|
}
|
|
};
|
|
|
|
const pendingTastings = useLiveQuery(
|
|
() => bottleId
|
|
? db.pending_tastings.where('bottle_id').equals(bottleId).toArray()
|
|
: db.pending_tastings.toArray(),
|
|
[bottleId],
|
|
[]
|
|
);
|
|
|
|
const sortedTastings = useMemo(() => {
|
|
const merged = [
|
|
...initialTastings,
|
|
...(pendingTastings || []).map(p => ({
|
|
id: `pending-${p.id}`,
|
|
rating: p.data.rating,
|
|
nose_notes: p.data.nose_notes,
|
|
palate_notes: p.data.palate_notes,
|
|
finish_notes: p.data.finish_notes,
|
|
is_sample: p.data.is_sample,
|
|
bottle_id: p.bottle_id,
|
|
created_at: p.tasted_at,
|
|
user_id: currentUserId || '',
|
|
isPending: true,
|
|
tasting_buddies: [],
|
|
tasting_sessions: undefined,
|
|
tasting_tags: []
|
|
}))
|
|
];
|
|
|
|
return merged.sort((a, b) => {
|
|
const timeA = new Date(a.created_at).getTime();
|
|
const timeB = new Date(b.created_at).getTime();
|
|
switch (sortBy) {
|
|
case 'date-desc': return timeB - timeA;
|
|
case 'date-asc': return timeA - timeB;
|
|
case 'rating-desc': return b.rating - a.rating;
|
|
case 'rating-asc': return a.rating - b.rating;
|
|
default: return 0;
|
|
}
|
|
});
|
|
}, [initialTastings, pendingTastings, sortBy, currentUserId]);
|
|
|
|
if (!initialTastings || initialTastings.length === 0) {
|
|
return (
|
|
<div className="text-center py-12 bg-zinc-100 dark:bg-zinc-900/30 rounded-3xl border-2 border-dashed border-zinc-200 dark:border-zinc-800">
|
|
<p className="text-zinc-400 italic font-medium">Noch keine Tasting Notes vorhanden. Zeit für ein Glas? 🥃</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex justify-end">
|
|
<div className="flex items-center gap-2 bg-zinc-100 dark:bg-zinc-900 p-1 rounded-xl border border-zinc-200 dark:border-zinc-800">
|
|
<ArrowUpDown size={14} className="ml-2 text-zinc-400" />
|
|
<select
|
|
value={sortBy}
|
|
onChange={(e) => setSortBy(e.target.value as any)}
|
|
className="bg-transparent border-none text-xs font-bold uppercase tracking-tight focus:ring-0 cursor-pointer pr-8 py-1.5 dark:text-zinc-300"
|
|
>
|
|
<option value="date-desc">Neueste zuerst</option>
|
|
<option value="date-asc">Älteste zuerst</option>
|
|
<option value="rating-desc">Beste Bewertung</option>
|
|
<option value="rating-asc">Niedrigste Bewertung</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
{sortedTastings.map((note) => (
|
|
<div
|
|
key={note.id}
|
|
className="bg-white dark:bg-zinc-900 p-6 rounded-3xl border border-zinc-200 dark:border-zinc-800 shadow-sm space-y-4 hover:border-amber-500/30 transition-all hover:shadow-md group"
|
|
>
|
|
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
|
|
<div className="flex flex-wrap items-center gap-2 sm:gap-3">
|
|
<div className="bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 px-3 py-1.5 rounded-2xl text-sm font-black ring-1 ring-amber-500/20 flex items-center gap-1.5">
|
|
<Star size={14} fill="currentColor" className="text-amber-500" />
|
|
{note.rating}/100
|
|
</div>
|
|
<span className={`text-[10px] font-black px-2 py-0.5 rounded-lg uppercase tracking-tighter ${note.is_sample
|
|
? 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400'
|
|
: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
|
|
}`}>
|
|
{note.is_sample ? 'Sample' : 'Bottle'}
|
|
</span>
|
|
{note.isPending && (
|
|
<div className="bg-amber-100 dark:bg-amber-900/30 text-amber-600 dark:text-amber-400 px-2 py-0.5 rounded-lg text-[10px] font-black uppercase tracking-tighter flex items-center gap-1.5 animate-pulse">
|
|
<Clock size={10} />
|
|
Wartet auf Sync...
|
|
</div>
|
|
)}
|
|
<div className="text-[10px] text-zinc-500 font-bold bg-zinc-100 dark:bg-zinc-800 px-2 py-1 rounded-lg flex items-center gap-1">
|
|
<Clock size={10} />
|
|
{new Date(note.created_at).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })}
|
|
</div>
|
|
{note.tasting_sessions && (
|
|
<Link
|
|
href={`/sessions/${note.tasting_sessions.id}`}
|
|
className="text-[10px] text-zinc-500 font-bold bg-amber-50 dark:bg-amber-900/20 px-2 py-1 rounded-lg flex items-center gap-1 border border-amber-200/50 dark:border-amber-800/50 transition-all hover:bg-amber-100 dark:hover:bg-amber-900/40 truncate max-w-[120px] sm:max-w-none"
|
|
>
|
|
<GlassWater size={10} className="text-amber-600" />
|
|
{note.tasting_sessions.name}
|
|
</Link>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center justify-between w-full sm:w-auto gap-4">
|
|
<div className="text-[10px] text-zinc-400 font-black tracking-widest uppercase flex items-center gap-1">
|
|
<Calendar size={12} />
|
|
{new Date(note.created_at).toLocaleDateString('de-DE')}
|
|
</div>
|
|
{(!currentUserId || note.user_id === currentUserId) && !note.isPending && (
|
|
<button
|
|
onClick={() => note.id && note.bottle_id && handleDelete(note.id, note.bottle_id)}
|
|
disabled={!!isDeleting}
|
|
className="px-3 py-1.5 text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 rounded-xl transition-all disabled:opacity-50 flex items-center gap-2 border border-red-100 dark:border-red-900/30 font-black text-[10px] uppercase tracking-widest shadow-sm hover:bg-red-600 hover:text-white dark:hover:bg-red-600 dark:hover:text-white"
|
|
title="Tasting löschen"
|
|
>
|
|
{isDeleting === note.id ? (
|
|
<Loader2 size={14} className="animate-spin" />
|
|
) : (
|
|
<>
|
|
<Trash2 size={14} fill="currentColor" />
|
|
<span>Löschen</span>
|
|
</>
|
|
)}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 relative">
|
|
{/* Visual Divider for MD and up */}
|
|
<div className="hidden md:block absolute left-1/3 top-0 bottom-0 w-px bg-zinc-100 dark:bg-zinc-800/50" />
|
|
<div className="hidden md:block absolute left-2/3 top-0 bottom-0 w-px bg-zinc-100 dark:bg-zinc-800/50" />
|
|
|
|
{note.nose_notes && (
|
|
<div className="space-y-1">
|
|
<div className="text-[10px] font-black text-zinc-400 uppercase tracking-widest mb-1">Nose</div>
|
|
<p className="text-sm text-zinc-700 dark:text-zinc-300 leading-relaxed italic border-l-2 border-zinc-100 dark:border-zinc-800 pl-3">
|
|
{note.nose_notes}
|
|
</p>
|
|
</div>
|
|
)}
|
|
{note.palate_notes && (
|
|
<div className="space-y-1">
|
|
<div className="text-[10px] font-black text-zinc-400 uppercase tracking-widest mb-1">Palate</div>
|
|
<p className="text-sm text-zinc-700 dark:text-zinc-300 leading-relaxed italic border-l-2 border-zinc-100 dark:border-zinc-800 pl-3">
|
|
{note.palate_notes}
|
|
</p>
|
|
</div>
|
|
)}
|
|
{note.finish_notes && (
|
|
<div className="space-y-1">
|
|
<div className="text-[10px] font-black text-zinc-400 uppercase tracking-widest mb-1">Finish</div>
|
|
<p className="text-sm text-zinc-700 dark:text-zinc-300 leading-relaxed italic border-l-2 border-zinc-100 dark:border-zinc-800 pl-3">
|
|
{note.finish_notes}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{note.tasting_tags && note.tasting_tags.length > 0 && (
|
|
<div className="flex flex-wrap gap-1.5 pt-2">
|
|
{note.tasting_tags.map(tt => (
|
|
<span
|
|
key={tt.tags.id}
|
|
className={`px-2 py-0.5 rounded-lg text-[10px] font-bold uppercase tracking-tight border ${tt.tags.category === 'nose' ? 'bg-green-50 text-green-700 border-green-100 dark:bg-green-900/20 dark:text-green-400 dark:border-green-800/50' :
|
|
tt.tags.category === 'taste' ? 'bg-blue-50 text-blue-700 border-blue-100 dark:bg-blue-900/20 dark:text-blue-400 dark:border-blue-800/50' :
|
|
tt.tags.category === 'finish' ? 'bg-amber-50 text-amber-700 border-amber-100 dark:bg-amber-900/20 dark:text-amber-400 dark:border-amber-800/50' :
|
|
'bg-zinc-50 text-zinc-700 border-zinc-100 dark:bg-zinc-900/20 dark:text-zinc-400 dark:border-zinc-800/50'
|
|
}`}
|
|
>
|
|
{tt.tags.is_system_default ? t(`aroma.${tt.tags.name}`) : tt.tags.name}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{note.tasting_buddies && note.tasting_buddies.length > 0 && (
|
|
<div className="pt-3 flex items-center justify-between border-t border-zinc-100 dark:border-zinc-800">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-[10px] font-black text-zinc-400 uppercase tracking-widest flex items-center gap-1.5 mr-1">
|
|
<Users size={12} className="text-amber-500" />
|
|
{t('tasting.with') || 'Mit'}:
|
|
</span>
|
|
<AvatarStack names={note.tasting_buddies.map(tag => tag.buddies.name)} />
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|