missions button
This commit is contained in:
parent
9ffe01db4f
commit
e6a62fa090
@ -1,51 +1,104 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useState } from "react";
|
import { useState, useEffect } from "react";
|
||||||
import { Search } from "lucide-react";
|
import { Search } from "lucide-react";
|
||||||
import { Input } from "@/components/ui/input";
|
import { Input } from "@/components/ui/input";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { useToast } from "@/components/ui/use-toast";
|
||||||
|
|
||||||
// Mock mission data until we implement the database
|
// Define Mission interface
|
||||||
const mockMissions = [
|
interface User {
|
||||||
{
|
id: string;
|
||||||
id: 1,
|
email: string;
|
||||||
title: "Développement d'une application web",
|
}
|
||||||
category: "Technology",
|
|
||||||
location: "Remote",
|
interface MissionUser {
|
||||||
skills: ["React", "Node.js", "MongoDB"],
|
id: string;
|
||||||
duration: "1-3 months",
|
role: string;
|
||||||
createdAt: "2023-05-15"
|
user: User;
|
||||||
},
|
}
|
||||||
{
|
|
||||||
id: 2,
|
interface Mission {
|
||||||
title: "Conception d'identité visuelle",
|
id: string;
|
||||||
category: "Design",
|
name: string;
|
||||||
location: "Paris",
|
logo?: string;
|
||||||
skills: ["Adobe Photoshop", "Illustrator", "UI/UX"],
|
oddScope: string[];
|
||||||
duration: "< 1 month",
|
niveau: string;
|
||||||
createdAt: "2023-06-02"
|
missionType: string;
|
||||||
},
|
projection: string;
|
||||||
{
|
createdAt: string;
|
||||||
id: 3,
|
creator: User;
|
||||||
title: "Traduction de documentation technique",
|
missionUsers: MissionUser[];
|
||||||
category: "Writing",
|
}
|
||||||
location: "Hybrid",
|
|
||||||
skills: ["Translation", "Technical Writing", "English"],
|
|
||||||
duration: "> 3 months",
|
|
||||||
createdAt: "2023-06-10"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
export default function MissionsPage() {
|
export default function MissionsPage() {
|
||||||
const [searchTerm, setSearchTerm] = useState("");
|
const [searchTerm, setSearchTerm] = useState("");
|
||||||
|
const [missions, setMissions] = useState<Mission[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const { toast } = useToast();
|
||||||
|
|
||||||
const filteredMissions = mockMissions.filter(mission =>
|
// Fetch missions from API
|
||||||
mission.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
useEffect(() => {
|
||||||
mission.category.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
const fetchMissions = async () => {
|
||||||
mission.skills.some(skill => skill.toLowerCase().includes(searchTerm.toLowerCase()))
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
const response = await fetch('/api/missions');
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Failed to fetch missions');
|
||||||
|
}
|
||||||
|
const data = await response.json();
|
||||||
|
setMissions(data.missions || []);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching missions:', error);
|
||||||
|
toast({
|
||||||
|
title: "Erreur",
|
||||||
|
description: "Impossible de charger les missions",
|
||||||
|
variant: "destructive",
|
||||||
|
});
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchMissions();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Filter missions based on search term
|
||||||
|
const filteredMissions = missions.filter(mission =>
|
||||||
|
mission.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||||
|
mission.niveau.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||||
|
mission.missionType.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||||
|
mission.oddScope.some(scope => scope.toLowerCase().includes(searchTerm.toLowerCase()))
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// Function to format date
|
||||||
|
const formatDate = (dateString: string) => {
|
||||||
|
const date = new Date(dateString);
|
||||||
|
return date.toLocaleDateString('fr-FR', {
|
||||||
|
day: '2-digit',
|
||||||
|
month: '2-digit',
|
||||||
|
year: 'numeric'
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// Function to get mission category
|
||||||
|
const getCategory = (mission: Mission) => {
|
||||||
|
return mission.oddScope && mission.oddScope.length > 0
|
||||||
|
? mission.oddScope[0].replace('odd-', 'ODD ')
|
||||||
|
: "Non catégorisé";
|
||||||
|
};
|
||||||
|
|
||||||
|
// Function to get mission duration
|
||||||
|
const getDuration = (projection: string) => {
|
||||||
|
switch(projection) {
|
||||||
|
case 'short': return '< 1 mois';
|
||||||
|
case 'medium': return '1-3 mois';
|
||||||
|
case 'long': return '> 3 mois';
|
||||||
|
default: return projection;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col h-full w-full bg-white">
|
<div className="flex flex-col h-full w-full bg-white">
|
||||||
<div className="bg-white border-b border-gray-100 py-2 px-4">
|
<div className="bg-white border-b border-gray-100 py-2 px-4">
|
||||||
@ -64,46 +117,63 @@ export default function MissionsPage() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex-1 overflow-auto bg-white p-4">
|
<div className="flex-1 overflow-auto bg-white p-4">
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
{loading ? (
|
||||||
{filteredMissions.map((mission, index) => (
|
<div className="flex justify-center items-center h-40">
|
||||||
<div key={mission.id} className="bg-white shadow-sm border border-gray-200 overflow-hidden h-full rounded-sm">
|
<div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-gray-900"></div>
|
||||||
<div className="p-0">
|
</div>
|
||||||
<div className="flex justify-between items-center px-4 pt-4 pb-2">
|
) : filteredMissions.length > 0 ? (
|
||||||
<span className="bg-gray-100 px-2 py-1 text-xs rounded-sm font-normal text-gray-800">
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
{mission.category}
|
{filteredMissions.map((mission) => (
|
||||||
</span>
|
<div key={mission.id} className="bg-white shadow-sm border border-gray-200 overflow-hidden h-full rounded-sm">
|
||||||
<span className="text-xs text-gray-500 px-2 py-1 border border-gray-200 rounded-sm font-normal">
|
<div className="p-0">
|
||||||
{mission.duration}
|
<div className="flex justify-between items-center px-4 pt-4 pb-2">
|
||||||
</span>
|
<span className="bg-gray-100 px-2 py-1 text-xs rounded-sm font-normal text-gray-800">
|
||||||
</div>
|
{getCategory(mission)}
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-gray-500 px-2 py-1 border border-gray-200 rounded-sm font-normal">
|
||||||
|
{getDuration(mission.projection)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="px-4 pb-4">
|
<div className="px-4 pb-4">
|
||||||
<h2 className="text-base font-medium mb-2">{mission.title}</h2>
|
<h2 className="text-base font-medium mb-2">{mission.name}</h2>
|
||||||
<p className="text-sm text-gray-600 mb-4">Location: {mission.location}</p>
|
<p className="text-sm text-gray-600 mb-4">Type: {mission.missionType}</p>
|
||||||
|
|
||||||
<div className="flex flex-wrap gap-1 mb-4">
|
<div className="flex flex-wrap gap-1 mb-4">
|
||||||
{mission.skills.map(skill => (
|
{mission.missionUsers.slice(0, 3).map(missionUser => (
|
||||||
<span key={skill} className="bg-gray-100 text-gray-700 px-2 py-1 rounded-sm text-xs">
|
<span key={missionUser.id} className="bg-gray-100 text-gray-700 px-2 py-1 rounded-sm text-xs">
|
||||||
{skill}
|
{missionUser.role === 'gardien-temps' ? 'Gardien du Temps' :
|
||||||
</span>
|
missionUser.role === 'gardien-parole' ? 'Gardien de la Parole' :
|
||||||
))}
|
missionUser.role === 'gardien-memoire' ? 'Gardien de la Mémoire' : 'Volontaire'}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-between items-center px-4 py-2 border-t border-gray-100">
|
||||||
|
<span className="text-xs text-gray-500">
|
||||||
|
Créée le {formatDate(mission.createdAt)}
|
||||||
|
</span>
|
||||||
|
<Link href={`/missions/${mission.id}`}>
|
||||||
|
<Button className="bg-black text-white text-xs px-3 py-1 h-6 rounded-sm">
|
||||||
|
Voir détails
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex justify-between items-center px-4 py-2 border-t border-gray-100">
|
|
||||||
<span className="text-xs text-gray-500">
|
|
||||||
Créée le {mission.createdAt.replace('2023-', '')}
|
|
||||||
</span>
|
|
||||||
<Link href={`/missions/${mission.id}`}>
|
|
||||||
<Button className="bg-black text-white text-xs px-3 py-1 h-6 rounded-sm">
|
|
||||||
Voir détails
|
|
||||||
</Button>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
))}
|
||||||
))}
|
</div>
|
||||||
</div>
|
) : (
|
||||||
|
<div className="text-center p-8">
|
||||||
|
<p className="text-gray-500">Aucune mission trouvée</p>
|
||||||
|
<Link href="/missions/new">
|
||||||
|
<Button className="mt-4 bg-blue-600 text-white">
|
||||||
|
Créer une nouvelle mission
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user