057732f00e
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 6m14s
284 lines
10 KiB
TypeScript
284 lines
10 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useTransition, useEffect } from 'react';
|
|
import { createOrUpdateWeatherEntry } from '@/actions/weather';
|
|
import { Avatar } from '@/components/ui/Avatar';
|
|
import { Textarea } from '@/components/ui/Textarea';
|
|
|
|
const WEATHER_EMOJIS = [
|
|
{ emoji: '', label: 'Aucun' },
|
|
{ emoji: '☀️', label: 'Soleil' },
|
|
{ emoji: '🌤️', label: 'Soleil derrière nuage' },
|
|
{ emoji: '⛅', label: 'Soleil et nuages' },
|
|
{ emoji: '☁️', label: 'Nuages' },
|
|
{ emoji: '🌦️', label: 'Soleil et pluie' },
|
|
{ emoji: '🌧️', label: 'Pluie' },
|
|
{ emoji: '⛈️', label: 'Orage et pluie' },
|
|
{ emoji: '🌩️', label: 'Éclair' },
|
|
{ emoji: '❄️', label: 'Neige' },
|
|
{ emoji: '🌨️', label: 'Neige qui tombe' },
|
|
{ emoji: '🌪️', label: 'Tornade' },
|
|
{ emoji: '🌫️', label: 'Brouillard' },
|
|
{ emoji: '🌈', label: 'Arc-en-ciel' },
|
|
{ emoji: '🌊', label: 'Vague' },
|
|
{ emoji: '🔥', label: 'Feu' },
|
|
{ emoji: '💨', label: 'Vent' },
|
|
{ emoji: '⭐', label: 'Étoile' },
|
|
{ emoji: '🌟', label: 'Étoile brillante' },
|
|
{ emoji: '✨', label: 'Étincelles' },
|
|
];
|
|
|
|
interface WeatherEntry {
|
|
id: string;
|
|
userId: string;
|
|
performanceEmoji: string | null;
|
|
moralEmoji: string | null;
|
|
fluxEmoji: string | null;
|
|
valueCreationEmoji: string | null;
|
|
notes: string | null;
|
|
user: {
|
|
id: string;
|
|
name: string | null;
|
|
email: string;
|
|
};
|
|
}
|
|
|
|
interface WeatherCardProps {
|
|
sessionId: string;
|
|
currentUserId: string;
|
|
entry: WeatherEntry;
|
|
canEdit: boolean;
|
|
}
|
|
|
|
export function WeatherCard({ sessionId, currentUserId, entry, canEdit }: WeatherCardProps) {
|
|
const [isPending, startTransition] = useTransition();
|
|
const [notes, setNotes] = useState(entry.notes || '');
|
|
const [performanceEmoji, setPerformanceEmoji] = useState(entry.performanceEmoji || null);
|
|
const [moralEmoji, setMoralEmoji] = useState(entry.moralEmoji || null);
|
|
const [fluxEmoji, setFluxEmoji] = useState(entry.fluxEmoji || null);
|
|
const [valueCreationEmoji, setValueCreationEmoji] = useState(entry.valueCreationEmoji || null);
|
|
|
|
const isCurrentUser = entry.userId === currentUserId;
|
|
const canEditThis = canEdit && isCurrentUser;
|
|
|
|
// Sync local state with props when they change (e.g., from SSE refresh)
|
|
useEffect(() => {
|
|
// eslint-disable-next-line react-hooks/set-state-in-effect
|
|
setNotes(entry.notes || '');
|
|
setPerformanceEmoji(entry.performanceEmoji || null);
|
|
setMoralEmoji(entry.moralEmoji || null);
|
|
setFluxEmoji(entry.fluxEmoji || null);
|
|
setValueCreationEmoji(entry.valueCreationEmoji || null);
|
|
}, [entry.notes, entry.performanceEmoji, entry.moralEmoji, entry.fluxEmoji, entry.valueCreationEmoji]);
|
|
|
|
function handleEmojiChange(axis: 'performance' | 'moral' | 'flux' | 'valueCreation', emoji: string | null) {
|
|
if (!canEditThis) return;
|
|
|
|
// Calculate new values
|
|
const newPerformanceEmoji = axis === 'performance' ? emoji : performanceEmoji;
|
|
const newMoralEmoji = axis === 'moral' ? emoji : moralEmoji;
|
|
const newFluxEmoji = axis === 'flux' ? emoji : fluxEmoji;
|
|
const newValueCreationEmoji = axis === 'valueCreation' ? emoji : valueCreationEmoji;
|
|
|
|
// Update local state immediately
|
|
if (axis === 'performance') {
|
|
setPerformanceEmoji(emoji);
|
|
} else if (axis === 'moral') {
|
|
setMoralEmoji(emoji);
|
|
} else if (axis === 'flux') {
|
|
setFluxEmoji(emoji);
|
|
} else if (axis === 'valueCreation') {
|
|
setValueCreationEmoji(emoji);
|
|
}
|
|
|
|
// Save to server with new values
|
|
startTransition(async () => {
|
|
await createOrUpdateWeatherEntry(sessionId, {
|
|
performanceEmoji: newPerformanceEmoji,
|
|
moralEmoji: newMoralEmoji,
|
|
fluxEmoji: newFluxEmoji,
|
|
valueCreationEmoji: newValueCreationEmoji,
|
|
notes,
|
|
});
|
|
});
|
|
}
|
|
|
|
function handleNotesChange(newNotes: string) {
|
|
if (!canEditThis) return;
|
|
setNotes(newNotes);
|
|
}
|
|
|
|
function handleNotesBlur() {
|
|
if (!canEditThis) return;
|
|
startTransition(async () => {
|
|
await createOrUpdateWeatherEntry(sessionId, {
|
|
performanceEmoji,
|
|
moralEmoji,
|
|
fluxEmoji,
|
|
valueCreationEmoji,
|
|
notes,
|
|
});
|
|
});
|
|
}
|
|
|
|
// For current user without entry, we need to get user info from somewhere
|
|
// For now, we'll use a placeholder - in real app, you'd pass user info as prop
|
|
const user = entry.user;
|
|
|
|
return (
|
|
<tr className={`border-b border-border ${isPending ? 'opacity-50' : ''}`}>
|
|
{/* User column */}
|
|
<td className="px-4 py-3">
|
|
<div className="flex items-center gap-2">
|
|
<Avatar email={user.email} name={user.name} size={32} />
|
|
<span className="text-sm font-medium text-foreground">
|
|
{user.name || user.email || 'Vous'}
|
|
</span>
|
|
</div>
|
|
</td>
|
|
|
|
{/* Performance */}
|
|
<td className="w-24 px-2 py-3">
|
|
{canEditThis ? (
|
|
<div className="relative mx-auto w-fit">
|
|
<select
|
|
value={performanceEmoji || ''}
|
|
onChange={(e) => handleEmojiChange('performance', e.target.value || null)}
|
|
className="w-16 appearance-none rounded-lg border border-border bg-card px-2 py-2.5 pr-8 text-center text-lg text-foreground transition-colors hover:bg-card-hover focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
|
|
>
|
|
{WEATHER_EMOJIS.map(({ emoji }) => (
|
|
<option key={emoji || 'none'} value={emoji}>
|
|
{emoji}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<div className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2">
|
|
<svg
|
|
className="h-3 w-3 text-muted"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="text-2xl text-center">{performanceEmoji || '-'}</div>
|
|
)}
|
|
</td>
|
|
|
|
{/* Moral */}
|
|
<td className="w-24 px-2 py-3">
|
|
{canEditThis ? (
|
|
<div className="relative mx-auto w-fit">
|
|
<select
|
|
value={moralEmoji || ''}
|
|
onChange={(e) => handleEmojiChange('moral', e.target.value || null)}
|
|
className="w-16 appearance-none rounded-lg border border-border bg-card px-2 py-2.5 pr-8 text-center text-lg text-foreground transition-colors hover:bg-card-hover focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
|
|
>
|
|
{WEATHER_EMOJIS.map(({ emoji }) => (
|
|
<option key={emoji || 'none'} value={emoji}>
|
|
{emoji}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<div className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2">
|
|
<svg
|
|
className="h-3 w-3 text-muted"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="text-2xl text-center">{moralEmoji || '-'}</div>
|
|
)}
|
|
</td>
|
|
|
|
{/* Flux */}
|
|
<td className="w-24 px-2 py-3">
|
|
{canEditThis ? (
|
|
<div className="relative mx-auto w-fit">
|
|
<select
|
|
value={fluxEmoji || ''}
|
|
onChange={(e) => handleEmojiChange('flux', e.target.value || null)}
|
|
className="w-16 appearance-none rounded-lg border border-border bg-card px-2 py-2.5 pr-8 text-center text-lg text-foreground transition-colors hover:bg-card-hover focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
|
|
>
|
|
{WEATHER_EMOJIS.map(({ emoji }) => (
|
|
<option key={emoji || 'none'} value={emoji}>
|
|
{emoji}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<div className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2">
|
|
<svg
|
|
className="h-3 w-3 text-muted"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="text-2xl text-center">{fluxEmoji || '-'}</div>
|
|
)}
|
|
</td>
|
|
|
|
{/* Création de valeur */}
|
|
<td className="w-24 px-2 py-3">
|
|
{canEditThis ? (
|
|
<div className="relative mx-auto w-fit">
|
|
<select
|
|
value={valueCreationEmoji || ''}
|
|
onChange={(e) => handleEmojiChange('valueCreation', e.target.value || null)}
|
|
className="w-16 appearance-none rounded-lg border border-border bg-card px-2 py-2.5 pr-8 text-center text-lg text-foreground transition-colors hover:bg-card-hover focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
|
|
>
|
|
{WEATHER_EMOJIS.map(({ emoji }) => (
|
|
<option key={emoji || 'none'} value={emoji}>
|
|
{emoji}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<div className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2">
|
|
<svg
|
|
className="h-3 w-3 text-muted"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="text-2xl text-center">{valueCreationEmoji || '-'}</div>
|
|
)}
|
|
</td>
|
|
|
|
{/* Notes */}
|
|
<td className="px-4 py-3 min-w-[400px]">
|
|
{canEditThis ? (
|
|
<Textarea
|
|
value={notes}
|
|
onChange={(e) => handleNotesChange(e.target.value)}
|
|
onBlur={handleNotesBlur}
|
|
placeholder="Notes globales..."
|
|
className="min-h-[120px] w-full resize-y"
|
|
rows={5}
|
|
/>
|
|
) : (
|
|
<div className="text-sm text-foreground whitespace-pre-wrap min-h-[120px]">
|
|
{notes || '-'}
|
|
</div>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
);
|
|
}
|