missions
This commit is contained in:
parent
27e59676b4
commit
c0f1f6c7de
@ -17,8 +17,14 @@ import {
|
||||
CardContent
|
||||
} from "../ui/card";
|
||||
import { Badge } from "../ui/badge";
|
||||
import { X, Search, UserPlus, Users } from "lucide-react";
|
||||
import { X, Search, UserPlus, Users, PlusCircle, AlertCircle, Check } from "lucide-react";
|
||||
import { toast } from "../ui/use-toast";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger
|
||||
} from "../ui/dropdown-menu";
|
||||
|
||||
// Define interfaces for user and group data
|
||||
interface User {
|
||||
@ -38,6 +44,10 @@ interface Group {
|
||||
membersCount: number;
|
||||
}
|
||||
|
||||
// User role types in mission
|
||||
type GuardienRole = 'temps' | 'parole' | 'memoire';
|
||||
type UserRole = GuardienRole | 'volontaire';
|
||||
|
||||
export function MissionsAdminPanel() {
|
||||
const [selectedServices, setSelectedServices] = useState<string[]>([]);
|
||||
const [selectedProfils, setSelectedProfils] = useState<string[]>([]);
|
||||
@ -46,11 +56,15 @@ export function MissionsAdminPanel() {
|
||||
const [gardienDuTemps, setGardienDuTemps] = useState<string | null>(null);
|
||||
const [gardienDeLaParole, setGardienDeLaParole] = useState<string | null>(null);
|
||||
const [gardienDeLaMemoire, setGardienDeLaMemoire] = useState<string | null>(null);
|
||||
const [volontaires, setVolontaires] = useState<string[]>([]);
|
||||
|
||||
// State for storing fetched data
|
||||
const [users, setUsers] = useState<User[]>([]);
|
||||
const [groups, setGroups] = useState<Group[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
// Check if mission is valid (has all required guardiens)
|
||||
const isMissionValid = gardienDuTemps !== null && gardienDeLaParole !== null && gardienDeLaMemoire !== null;
|
||||
|
||||
// Fetch users and groups on component mount
|
||||
useEffect(() => {
|
||||
@ -140,23 +154,40 @@ export function MissionsAdminPanel() {
|
||||
(group.name?.toLowerCase() || "").includes(searchTerm.toLowerCase())
|
||||
);
|
||||
|
||||
// Function to check if a user is already assigned for a role
|
||||
// Function to check if a user is already assigned to any role
|
||||
const isUserAssigned = (userId: string) => {
|
||||
return gardienDuTemps === userId ||
|
||||
gardienDeLaParole === userId ||
|
||||
gardienDeLaMemoire === userId;
|
||||
gardienDeLaMemoire === userId ||
|
||||
volontaires.includes(userId);
|
||||
};
|
||||
|
||||
// Function to get role name by user id
|
||||
const getUserRole = (userId: string) => {
|
||||
if (gardienDuTemps === userId) return "Gardien du Temps";
|
||||
if (gardienDeLaParole === userId) return "Gardien de la Parole";
|
||||
if (gardienDeLaMemoire === userId) return "Gardien de la Mémoire";
|
||||
// Function to get user's role
|
||||
const getUserRole = (userId: string): UserRole | null => {
|
||||
if (gardienDuTemps === userId) return 'temps';
|
||||
if (gardienDeLaParole === userId) return 'parole';
|
||||
if (gardienDeLaMemoire === userId) return 'memoire';
|
||||
if (volontaires.includes(userId)) return 'volontaire';
|
||||
return null;
|
||||
};
|
||||
|
||||
// Function to assign a user to a role
|
||||
const assignUserRole = (userId: string, role: 'temps' | 'parole' | 'memoire') => {
|
||||
// Function to get role display name
|
||||
const getRoleDisplayName = (role: UserRole | null): string => {
|
||||
switch(role) {
|
||||
case 'temps': return "Gardien du Temps";
|
||||
case 'parole': return "Gardien de la Parole";
|
||||
case 'memoire': return "Gardien de la Mémoire";
|
||||
case 'volontaire': return "Volontaire";
|
||||
default: return "";
|
||||
}
|
||||
};
|
||||
|
||||
// Function to assign a user to a specific guardian role
|
||||
const assignGuardienRole = (userId: string, role: GuardienRole) => {
|
||||
// Remove from any existing role first
|
||||
removeUserFromAllRoles(userId);
|
||||
|
||||
// Assign to new role
|
||||
if (role === 'temps') {
|
||||
setGardienDuTemps(userId);
|
||||
} else if (role === 'parole') {
|
||||
@ -164,18 +195,41 @@ export function MissionsAdminPanel() {
|
||||
} else if (role === 'memoire') {
|
||||
setGardienDeLaMemoire(userId);
|
||||
}
|
||||
|
||||
toast({
|
||||
title: "Rôle assigné",
|
||||
description: `L'utilisateur a été assigné comme ${getRoleDisplayName(role)}`,
|
||||
});
|
||||
};
|
||||
|
||||
// Function to remove a user from a role
|
||||
const removeUserRole = (role: 'temps' | 'parole' | 'memoire') => {
|
||||
if (role === 'temps') {
|
||||
setGardienDuTemps(null);
|
||||
} else if (role === 'parole') {
|
||||
setGardienDeLaParole(null);
|
||||
} else if (role === 'memoire') {
|
||||
setGardienDeLaMemoire(null);
|
||||
// Function to assign a user as volunteer
|
||||
const assignVolontaire = (userId: string) => {
|
||||
// Remove from any existing role first
|
||||
removeUserFromAllRoles(userId);
|
||||
|
||||
// Add to volunteers
|
||||
setVolontaires(prev => [...prev, userId]);
|
||||
|
||||
toast({
|
||||
title: "Rôle assigné",
|
||||
description: "L'utilisateur a été assigné comme Volontaire",
|
||||
});
|
||||
};
|
||||
|
||||
// Function to remove a user from all roles
|
||||
const removeUserFromAllRoles = (userId: string) => {
|
||||
if (gardienDuTemps === userId) setGardienDuTemps(null);
|
||||
if (gardienDeLaParole === userId) setGardienDeLaParole(null);
|
||||
if (gardienDeLaMemoire === userId) setGardienDeLaMemoire(null);
|
||||
if (volontaires.includes(userId)) {
|
||||
setVolontaires(prev => prev.filter(id => id !== userId));
|
||||
}
|
||||
};
|
||||
|
||||
// Check if all guardian roles are filled
|
||||
const areAllGuardiensFilled = (): boolean => {
|
||||
return gardienDuTemps !== null && gardienDeLaParole !== null && gardienDeLaMemoire !== null;
|
||||
};
|
||||
|
||||
// Function to fetch group members
|
||||
const fetchGroupMembers = async (groupId: string) => {
|
||||
@ -632,7 +686,24 @@ export function MissionsAdminPanel() {
|
||||
<TabsContent value="membres" className="space-y-6">
|
||||
<div>
|
||||
<div className="mb-6">
|
||||
<h3 className="text-lg font-medium text-gray-700 mb-4">Les Gardiens de l'Intention</h3>
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h3 className="text-lg font-medium text-gray-700">Les Gardiens de l'Intention</h3>
|
||||
|
||||
<div className="flex items-center">
|
||||
{!isMissionValid && (
|
||||
<div className="flex items-center text-amber-600 mr-3 text-sm">
|
||||
<AlertCircle size={16} className="mr-1" />
|
||||
Les 3 gardiens doivent être assignés
|
||||
</div>
|
||||
)}
|
||||
{isMissionValid && (
|
||||
<div className="flex items-center text-green-600 mr-3 text-sm">
|
||||
<Check size={16} className="mr-1" />
|
||||
Tous les gardiens sont assignés
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* Gardien du Temps */}
|
||||
@ -643,7 +714,7 @@ export function MissionsAdminPanel() {
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => removeUserRole('temps')}
|
||||
onClick={() => removeUserFromAllRoles(gardienDuTemps)}
|
||||
className="text-red-600 hover:bg-red-50 hover:text-red-700 border-red-200 h-8"
|
||||
disabled={loading}
|
||||
>
|
||||
@ -699,7 +770,7 @@ export function MissionsAdminPanel() {
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => removeUserRole('parole')}
|
||||
onClick={() => removeUserFromAllRoles(gardienDeLaParole)}
|
||||
className="text-red-600 hover:bg-red-50 hover:text-red-700 border-red-200 h-8"
|
||||
disabled={loading}
|
||||
>
|
||||
@ -755,7 +826,7 @@ export function MissionsAdminPanel() {
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => removeUserRole('memoire')}
|
||||
onClick={() => removeUserFromAllRoles(gardienDeLaMemoire)}
|
||||
className="text-red-600 hover:bg-red-50 hover:text-red-700 border-red-200 h-8"
|
||||
disabled={loading}
|
||||
>
|
||||
@ -837,6 +908,33 @@ export function MissionsAdminPanel() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<h5 className="text-sm font-medium text-gray-700 mb-2">Volontaires ({volontaires.length})</h5>
|
||||
{volontaires.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-2 mb-3">
|
||||
{volontaires.map(userId => {
|
||||
const user = users.find(u => u.id === userId);
|
||||
if (!user) return null;
|
||||
return (
|
||||
<Badge key={userId} className="bg-gray-100 text-gray-800 hover:bg-gray-200 px-2 py-1 flex items-center">
|
||||
{user.firstName} {user.lastName}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => removeUserFromAllRoles(userId)}
|
||||
className="ml-1 h-5 w-5 p-0 text-gray-500 hover:text-red-600 hover:bg-transparent"
|
||||
>
|
||||
<X size={12} />
|
||||
</Button>
|
||||
</Badge>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-sm text-gray-500 mb-3">Aucun volontaire assigné</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="relative mb-4">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-500" />
|
||||
<Input
|
||||
@ -880,19 +978,23 @@ export function MissionsAdminPanel() {
|
||||
<div className="text-sm text-gray-500">{user.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* User role controls */}
|
||||
{isUserAssigned(user.id) ? (
|
||||
<div className="flex items-center">
|
||||
<Badge className="bg-blue-100 text-blue-800 hover:bg-blue-200 px-2 py-1 mr-2">
|
||||
{getUserRole(user.id)}
|
||||
<Badge
|
||||
className={`px-2 py-1 mr-2 ${
|
||||
getUserRole(user.id) === 'volontaire'
|
||||
? 'bg-gray-100 text-gray-800 hover:bg-gray-200'
|
||||
: 'bg-blue-100 text-blue-800 hover:bg-blue-200'
|
||||
}`}
|
||||
>
|
||||
{getRoleDisplayName(getUserRole(user.id))}
|
||||
</Badge>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
if (gardienDuTemps === user.id) removeUserRole('temps');
|
||||
if (gardienDeLaParole === user.id) removeUserRole('parole');
|
||||
if (gardienDeLaMemoire === user.id) removeUserRole('memoire');
|
||||
}}
|
||||
onClick={() => removeUserFromAllRoles(user.id)}
|
||||
className="text-red-600 hover:bg-red-50 hover:text-red-700 border-red-200 h-7 px-2"
|
||||
disabled={loading}
|
||||
>
|
||||
@ -900,20 +1002,53 @@ export function MissionsAdminPanel() {
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex space-x-2">
|
||||
<div className="flex">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="text-blue-600 bg-white hover:bg-blue-50 hover:text-blue-700 border-blue-200 h-8 mr-2"
|
||||
disabled={loading}
|
||||
>
|
||||
<UserPlus size={16} className="mr-1" />
|
||||
Gardien
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="bg-white border border-gray-200">
|
||||
<DropdownMenuItem
|
||||
onClick={() => assignGuardienRole(user.id, 'temps')}
|
||||
disabled={gardienDuTemps !== null}
|
||||
className={`cursor-pointer ${gardienDuTemps !== null ? 'opacity-50 cursor-not-allowed' : ''}`}
|
||||
>
|
||||
Gardien du Temps
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => assignGuardienRole(user.id, 'parole')}
|
||||
disabled={gardienDeLaParole !== null}
|
||||
className={`cursor-pointer ${gardienDeLaParole !== null ? 'opacity-50 cursor-not-allowed' : ''}`}
|
||||
>
|
||||
Gardien de la Parole
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => assignGuardienRole(user.id, 'memoire')}
|
||||
disabled={gardienDeLaMemoire !== null}
|
||||
className={`cursor-pointer ${gardienDeLaMemoire !== null ? 'opacity-50 cursor-not-allowed' : ''}`}
|
||||
>
|
||||
Gardien de la Mémoire
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
if (!gardienDuTemps) assignUserRole(user.id, 'temps');
|
||||
else if (!gardienDeLaParole) assignUserRole(user.id, 'parole');
|
||||
else if (!gardienDeLaMemoire) assignUserRole(user.id, 'memoire');
|
||||
}}
|
||||
disabled={(gardienDuTemps !== null && gardienDeLaParole !== null && gardienDeLaMemoire !== null) || loading}
|
||||
className="text-blue-600 bg-white hover:bg-blue-50 hover:text-blue-700 border-blue-200 h-8"
|
||||
onClick={() => assignVolontaire(user.id)}
|
||||
className="text-gray-700 bg-white hover:bg-gray-50 border-gray-300 h-8"
|
||||
disabled={loading}
|
||||
>
|
||||
<UserPlus size={16} className="mr-1" />
|
||||
Assigner
|
||||
<PlusCircle size={16} className="mr-1" />
|
||||
Volontaire
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
@ -967,8 +1102,27 @@ export function MissionsAdminPanel() {
|
||||
</Tabs>
|
||||
|
||||
<div className="mt-8 flex justify-end">
|
||||
<Button className="bg-blue-600 hover:bg-blue-700 text-white">
|
||||
Save & Preview
|
||||
<Button
|
||||
className={`${isMissionValid
|
||||
? 'bg-blue-600 hover:bg-blue-700'
|
||||
: 'bg-gray-400 hover:bg-gray-500 cursor-not-allowed'} text-white`}
|
||||
disabled={!isMissionValid}
|
||||
onClick={() => {
|
||||
if (isMissionValid) {
|
||||
toast({
|
||||
title: "Mission enregistrée",
|
||||
description: "Tous les gardiens ont été assignés avec succès.",
|
||||
});
|
||||
} else {
|
||||
toast({
|
||||
title: "Mission incomplète",
|
||||
description: "Vous devez assigner les trois gardiens avant de pouvoir enregistrer.",
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
}}
|
||||
>
|
||||
{isMissionValid ? "Enregistrer" : "Gardiens manquants"}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="ml-2">
|
||||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||||
<polyline points="12 5 19 12 12 19"></polyline>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user