Files
got-gaming/components/admin/HousePointsPreferences.tsx

270 lines
8.9 KiB
TypeScript

"use client";
import { useState, useEffect } from "react";
import { updateSitePreferences } from "@/actions/admin/preferences";
import { Button, Card, Input } from "@/components/ui";
interface SitePreferences {
id: string;
houseJoinPoints: number;
houseLeavePoints: number;
houseCreatePoints: number;
}
interface HousePointsPreferencesProps {
initialPreferences: SitePreferences;
}
export default function HousePointsPreferences({
initialPreferences,
}: HousePointsPreferencesProps) {
const [preferences, setPreferences] = useState<SitePreferences | null>(
initialPreferences
);
const [isEditing, setIsEditing] = useState(false);
const [formData, setFormData] = useState({
houseJoinPoints: initialPreferences.houseJoinPoints.toString(),
houseLeavePoints: initialPreferences.houseLeavePoints.toString(),
houseCreatePoints: initialPreferences.houseCreatePoints.toString(),
});
const [isSaving, setIsSaving] = useState(false);
// Synchroniser les préférences quand initialPreferences change
useEffect(() => {
setPreferences(initialPreferences);
setFormData({
houseJoinPoints: initialPreferences.houseJoinPoints.toString(),
houseLeavePoints: initialPreferences.houseLeavePoints.toString(),
houseCreatePoints: initialPreferences.houseCreatePoints.toString(),
});
}, [initialPreferences]);
const handleEdit = () => {
setIsEditing(true);
};
const handleSave = async () => {
const joinPoints = parseInt(formData.houseJoinPoints, 10);
const leavePoints = parseInt(formData.houseLeavePoints, 10);
const createPoints = parseInt(formData.houseCreatePoints, 10);
if (isNaN(joinPoints) || joinPoints < 0) {
alert("Le nombre de points pour rejoindre une maison doit être un nombre positif");
return;
}
if (isNaN(leavePoints) || leavePoints < 0) {
alert("Le nombre de points pour quitter une maison doit être un nombre positif");
return;
}
if (isNaN(createPoints) || createPoints < 0) {
alert("Le nombre de points pour créer une maison doit être un nombre positif");
return;
}
setIsSaving(true);
try {
const result = await updateSitePreferences({
houseJoinPoints: joinPoints,
houseLeavePoints: leavePoints,
houseCreatePoints: createPoints,
});
if (result.success && result.data) {
setPreferences(result.data);
setFormData({
houseJoinPoints: result.data.houseJoinPoints.toString(),
houseLeavePoints: result.data.houseLeavePoints.toString(),
houseCreatePoints: result.data.houseCreatePoints.toString(),
});
setIsEditing(false);
} else {
console.error("Error updating preferences:", result.error);
alert(result.error || "Erreur lors de la mise à jour");
}
} catch (error) {
console.error("Error updating preferences:", error);
alert("Erreur lors de la mise à jour");
} finally {
setIsSaving(false);
}
};
const handleCancel = () => {
setIsEditing(false);
if (preferences) {
setFormData({
houseJoinPoints: preferences.houseJoinPoints.toString(),
houseLeavePoints: preferences.houseLeavePoints.toString(),
houseCreatePoints: preferences.houseCreatePoints.toString(),
});
}
};
return (
<Card variant="default" className="p-3 sm:p-4">
<div className="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-3 mb-4">
<div className="min-w-0 flex-1">
<h3 className="text-pixel-gold font-bold text-base sm:text-lg break-words">
Points des Maisons
</h3>
<p className="text-gray-400 text-xs sm:text-sm">
Nombre de points attribués ou retirés pour les actions liées aux maisons
</p>
</div>
{!isEditing && (
<Button
onClick={handleEdit}
variant="primary"
size="sm"
className="whitespace-nowrap flex-shrink-0"
>
Modifier
</Button>
)}
</div>
{isEditing ? (
<div className="space-y-4">
<div>
<label
htmlFor="houseJoinPoints"
className="block text-sm font-medium text-pixel-gold mb-2"
>
Points pour rejoindre une maison
</label>
<Input
id="houseJoinPoints"
type="number"
min="0"
value={formData.houseJoinPoints}
onChange={(e) =>
setFormData({
...formData,
houseJoinPoints: e.target.value,
})
}
placeholder="100"
className="w-full"
/>
<p className="text-xs text-gray-400 mt-1">
Les utilisateurs gagneront ce nombre de points lorsqu&apos;ils rejoignent une maison
</p>
</div>
<div>
<label
htmlFor="houseLeavePoints"
className="block text-sm font-medium text-pixel-gold mb-2"
>
Points retirés en quittant une maison
</label>
<Input
id="houseLeavePoints"
type="number"
min="0"
value={formData.houseLeavePoints}
onChange={(e) =>
setFormData({
...formData,
houseLeavePoints: e.target.value,
})
}
placeholder="100"
className="w-full"
/>
<p className="text-xs text-gray-400 mt-1">
Les utilisateurs perdront ce nombre de points lorsqu&apos;ils quittent une maison
</p>
</div>
<div>
<label
htmlFor="houseCreatePoints"
className="block text-sm font-medium text-pixel-gold mb-2"
>
Points pour créer une maison
</label>
<Input
id="houseCreatePoints"
type="number"
min="0"
value={formData.houseCreatePoints}
onChange={(e) =>
setFormData({
...formData,
houseCreatePoints: e.target.value,
})
}
placeholder="100"
className="w-full"
/>
<p className="text-xs text-gray-400 mt-1">
Les utilisateurs gagneront ce nombre de points lorsqu&apos;ils créent une maison
</p>
</div>
<div className="flex flex-col sm:flex-row gap-2 pt-4">
<Button
onClick={handleSave}
variant="success"
size="md"
disabled={isSaving}
>
{isSaving ? "Enregistrement..." : "Enregistrer"}
</Button>
<Button
onClick={handleCancel}
variant="secondary"
size="md"
disabled={isSaving}
>
Annuler
</Button>
</div>
</div>
) : (
<div className="space-y-3">
<div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
<span className="text-pixel-gold font-bold text-sm sm:text-base min-w-0 sm:min-w-[200px] flex-shrink-0">
Points pour rejoindre:
</span>
<div className="flex items-center gap-2">
<span className="text-lg sm:text-xl font-bold text-white">
{preferences?.houseJoinPoints ?? 100}
</span>
<span className="text-xs sm:text-sm text-gray-400">points</span>
</div>
</div>
<div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
<span className="text-pixel-gold font-bold text-sm sm:text-base min-w-0 sm:min-w-[200px] flex-shrink-0">
Points retirés en quittant:
</span>
<div className="flex items-center gap-2">
<span className="text-lg sm:text-xl font-bold text-white">
{preferences?.houseLeavePoints ?? 100}
</span>
<span className="text-xs sm:text-sm text-gray-400">points</span>
</div>
</div>
<div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
<span className="text-pixel-gold font-bold text-sm sm:text-base min-w-0 sm:min-w-[200px] flex-shrink-0">
Points pour créer:
</span>
<div className="flex items-center gap-2">
<span className="text-lg sm:text-xl font-bold text-white">
{preferences?.houseCreatePoints ?? 100}
</span>
<span className="text-xs sm:text-sm text-gray-400">points</span>
</div>
</div>
</div>
)}
</Card>
);
}