feat: implement Weather Workshop feature with models, UI components, and session management for enhanced team visibility and personal well-being tracking
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 3m16s
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 3m16s
This commit is contained in:
Julien Froidefond
102
src/app/weather/[id]/page.tsx
Normal file
102
src/app/weather/[id]/page.tsx
Normal file
@@ -0,0 +1,102 @@
|
||||
import { notFound } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import { auth } from '@/lib/auth';
|
||||
import { getWeatherSessionById } from '@/services/weather';
|
||||
import { getUserTeams } from '@/services/teams';
|
||||
import { WeatherBoard, WeatherLiveWrapper, WeatherInfoPanel } from '@/components/weather';
|
||||
import { Badge } from '@/components/ui';
|
||||
import { EditableWeatherTitle } from '@/components/ui/EditableWeatherTitle';
|
||||
|
||||
interface WeatherSessionPageProps {
|
||||
params: Promise<{ id: string }>;
|
||||
}
|
||||
|
||||
export default async function WeatherSessionPage({ params }: WeatherSessionPageProps) {
|
||||
const { id } = await params;
|
||||
const authSession = await auth();
|
||||
|
||||
if (!authSession?.user?.id) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const [session, userTeams] = await Promise.all([
|
||||
getWeatherSessionById(id, authSession.user.id),
|
||||
getUserTeams(authSession.user.id),
|
||||
]);
|
||||
|
||||
if (!session) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="mx-auto max-w-7xl px-4 py-8">
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center gap-2 text-sm text-muted mb-2">
|
||||
<Link href="/sessions?tab=weather" className="hover:text-foreground">
|
||||
Météo
|
||||
</Link>
|
||||
<span>/</span>
|
||||
<span className="text-foreground">{session.title}</span>
|
||||
{!session.isOwner && (
|
||||
<Badge variant="accent" className="ml-2">
|
||||
Partagé par {session.user.name || session.user.email}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<EditableWeatherTitle
|
||||
sessionId={session.id}
|
||||
initialTitle={session.title}
|
||||
isOwner={session.isOwner}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Badge variant="primary">{session.entries.length} membres</Badge>
|
||||
<span className="text-sm text-muted">
|
||||
{new Date(session.date).toLocaleDateString('fr-FR', {
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric',
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Info sur les catégories */}
|
||||
<WeatherInfoPanel />
|
||||
|
||||
{/* Live Wrapper + Board */}
|
||||
<WeatherLiveWrapper
|
||||
sessionId={session.id}
|
||||
sessionTitle={session.title}
|
||||
currentUserId={authSession.user.id}
|
||||
shares={session.shares}
|
||||
isOwner={session.isOwner}
|
||||
canEdit={session.canEdit}
|
||||
userTeams={userTeams}
|
||||
>
|
||||
<WeatherBoard
|
||||
sessionId={session.id}
|
||||
currentUserId={authSession.user.id}
|
||||
currentUser={{
|
||||
id: authSession.user.id,
|
||||
name: authSession.user.name ?? null,
|
||||
email: authSession.user.email ?? '',
|
||||
}}
|
||||
entries={session.entries}
|
||||
shares={session.shares}
|
||||
owner={{
|
||||
id: session.user.id,
|
||||
name: session.user.name ?? null,
|
||||
email: session.user.email ?? '',
|
||||
}}
|
||||
canEdit={session.canEdit}
|
||||
/>
|
||||
</WeatherLiveWrapper>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
142
src/app/weather/new/page.tsx
Normal file
142
src/app/weather/new/page.tsx
Normal file
@@ -0,0 +1,142 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
Button,
|
||||
Input,
|
||||
} from '@/components/ui';
|
||||
import { createWeatherSession } from '@/actions/weather';
|
||||
import { getWeekYearLabel } from '@/lib/date-utils';
|
||||
|
||||
export default function NewWeatherPage() {
|
||||
const router = useRouter();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]);
|
||||
const [title, setTitle] = useState('');
|
||||
|
||||
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
setLoading(true);
|
||||
|
||||
const formData = new FormData(e.currentTarget);
|
||||
const dateStr = formData.get('date') as string;
|
||||
const date = dateStr ? new Date(dateStr) : undefined;
|
||||
|
||||
if (!title) {
|
||||
setError('Veuillez remplir le titre');
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const result = await createWeatherSession({ title, date });
|
||||
|
||||
if (!result.success) {
|
||||
setError(result.error || 'Une erreur est survenue');
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
router.push(`/weather/${result.data?.id}`);
|
||||
}
|
||||
|
||||
// Default date to today
|
||||
const today = new Date().toISOString().split('T')[0];
|
||||
|
||||
// Update title when date changes
|
||||
useEffect(() => {
|
||||
setTitle(getWeekYearLabel(new Date(selectedDate)));
|
||||
}, [selectedDate]);
|
||||
|
||||
return (
|
||||
<main className="mx-auto max-w-2xl px-4 py-8">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<span>🌤️</span>
|
||||
Nouvelle Météo
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Créez une météo personnelle pour faire le point sur 4 axes clés et partagez-la avec votre équipe
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{error && (
|
||||
<div className="rounded-lg border border-destructive/20 bg-destructive/10 p-3 text-sm text-destructive">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Input
|
||||
label="Titre de la météo"
|
||||
name="title"
|
||||
placeholder="Ex: Météo S05 - 2026"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
required
|
||||
/>
|
||||
|
||||
<div>
|
||||
<label htmlFor="date" className="block text-sm font-medium text-foreground mb-1">
|
||||
Date de la météo
|
||||
</label>
|
||||
<input
|
||||
id="date"
|
||||
name="date"
|
||||
type="date"
|
||||
defaultValue={today}
|
||||
onChange={(e) => setSelectedDate(e.target.value)}
|
||||
required
|
||||
className="w-full rounded-lg border border-border bg-input px-3 py-2 text-foreground outline-none focus:border-primary focus:ring-2 focus:ring-primary/20"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border border-border bg-card-hover p-4">
|
||||
<h3 className="font-medium text-foreground mb-2">Comment ça marche ?</h3>
|
||||
<ol className="text-sm text-muted space-y-1 list-decimal list-inside">
|
||||
<li>
|
||||
<strong>Performance</strong> : Comment évaluez-vous votre performance personnelle ?
|
||||
</li>
|
||||
<li>
|
||||
<strong>Moral</strong> : Quel est votre moral actuel ?
|
||||
</li>
|
||||
<li>
|
||||
<strong>Flux</strong> : Comment se passe votre flux de travail personnel ?
|
||||
</li>
|
||||
<li>
|
||||
<strong>Création de valeur</strong> : Comment évaluez-vous votre création de valeur ?
|
||||
</li>
|
||||
</ol>
|
||||
<p className="text-sm text-muted mt-2">
|
||||
💡 <strong>Astuce</strong> : Partagez votre météo avec votre équipe pour qu'ils puissent voir votre état. Chaque membre peut créer sa propre météo et la partager !
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 pt-4">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => router.back()}
|
||||
disabled={loading}
|
||||
>
|
||||
Annuler
|
||||
</Button>
|
||||
<Button type="submit" loading={loading} className="flex-1">
|
||||
Créer la météo
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user