julienfroidefond/workshop-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement period filtering in OKRsList component with toggle for viewing all OKRs or current quarter's OKRs
Some checks failed
Deploy with Docker Compose / deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Julien Froidefond
2026-01-28 13:54:10 +01:00
parent 53ee344ae7
commit e848e85b63
1 changed files with 63 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/components/okrs/OKRsList.tsx
View File

@@ -1,9 +1,10 @@
'use client';
import { useState, useEffect } from 'react';
import { useState, useEffect, useMemo } from 'react';
import { OKRCard } from './OKRCard';
import { Card, ToggleGroup } from '@/components/ui';
import { Card, ToggleGroup, Button } from '@/components/ui';
import { getGravatarUrl } from '@/lib/gravatar';
import { getCurrentQuarterPeriod, isCurrentQuarterPeriod } from '@/lib/okr-utils';
import type { OKR } from '@/lib/types';
type ViewMode = 'grid' | 'grouped';
@@ -33,6 +34,7 @@ export function OKRsList({ okrsData, teamId, isAdmin = false }: OKRsListProps) {
}
return 'detailed';
});
const [showAllPeriods, setShowAllPeriods] = useState(false);
useEffect(() => {
if (typeof window !== 'undefined') {
@@ -40,8 +42,21 @@ export function OKRsList({ okrsData, teamId, isAdmin = false }: OKRsListProps) {
}
}, [cardViewMode]);
const currentQuarterPeriod = getCurrentQuarterPeriod();
// Filter OKRs based on period filter
const filteredOKRsData = useMemo(() => {
if (showAllPeriods) {
return okrsData;
}
return okrsData.map((tm) => ({
...tm,
okrs: tm.okrs.filter((okr) => isCurrentQuarterPeriod(okr.period)),
}));
}, [okrsData, showAllPeriods]);
// Flatten OKRs for grid view
const allOKRs = okrsData.flatMap((tm) =>
const allOKRs = filteredOKRsData.flatMap((tm) =>
tm.okrs.map((okr) => ({
...okr,
teamMember: {
@@ -52,11 +67,37 @@ export function OKRsList({ okrsData, teamId, isAdmin = false }: OKRsListProps) {
if (allOKRs.length === 0) {
return (
<div>
{/* View Toggle */}
<div className="mb-6 flex items-center justify-between gap-4">
<div className="flex items-center gap-3">
<h2 className="text-2xl font-bold text-foreground">OKRs</h2>
{!showAllPeriods && (
<span className="text-sm text-muted">({currentQuarterPeriod})</span>
)}
</div>
<div className="flex items-center gap-3">
<Button
variant="outline"
onClick={() => setShowAllPeriods(!showAllPeriods)}
className="text-sm"
>
{showAllPeriods ? `Afficher ${currentQuarterPeriod} uniquement` : 'Afficher tous les OKR'}
</Button>
</div>
</div>
<Card className="p-12 text-center">
<div className="text-5xl mb-4">🎯</div>
<h3 className="text-xl font-semibold text-foreground mb-2">Aucun OKR défini</h3>
<p className="text-muted">Aucun OKR n&apos;a encore été défini pour cette équipe</p>
<h3 className="text-xl font-semibold text-foreground mb-2">
{showAllPeriods ? 'Aucun OKR défini' : `Aucun OKR pour ${currentQuarterPeriod}`}
</h3>
<p className="text-muted">
{showAllPeriods
? "Aucun OKR n'a encore été défini pour cette équipe"
: `Aucun OKR n'a été défini pour le trimestre ${currentQuarterPeriod}. Cliquez sur "Afficher tous les OKR" pour voir les OKR d'autres périodes.`}
</p>
</Card>
</div>
);
}
@@ -64,8 +105,20 @@ export function OKRsList({ okrsData, teamId, isAdmin = false }: OKRsListProps) {
<div>
{/* View Toggle */}
<div className="mb-6 flex items-center justify-between gap-4">
<h2 className="text-2xl font-bold text-foreground">OKRs</h2>
<div className="flex items-center gap-3">
<h2 className="text-2xl font-bold text-foreground">OKRs</h2>
{!showAllPeriods && (
<span className="text-sm text-muted">({currentQuarterPeriod})</span>
)}
</div>
<div className="flex items-center gap-3">
<Button
variant="outline"
onClick={() => setShowAllPeriods(!showAllPeriods)}
className="text-sm"
>
{showAllPeriods ? `Afficher ${currentQuarterPeriod} uniquement` : 'Afficher tous les OKR'}
</Button>
<ToggleGroup
value={cardViewMode}
onChange={setCardViewMode}
@@ -140,7 +193,7 @@ export function OKRsList({ okrsData, teamId, isAdmin = false }: OKRsListProps) {
{/* Grouped View */}
{viewMode === 'grouped' ? (
<div className="space-y-8">
{okrsData
{filteredOKRsData
.filter((tm) => tm.okrs.length > 0)
.map((teamMember) => (
<div key={teamMember.user.id}>