Skip to content

Commit

Permalink
correction et remise au propre des pages événements et reward
Browse files Browse the repository at this point in the history
  • Loading branch information
@Louis-cardon
Louis-cardon committed Aug 27, 2024
1 parent 81dcfb4 commit 9e7f6f9
Show file tree
Hide file tree
Showing 6 changed files with 200 additions and 99 deletions.
57 changes: 27 additions & 30 deletions satsquare/src/app/evenements/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
"use client";
import { FC, useEffect, useState } from "react";
import EventTable from "@/components/Event/EventTable";
import EventSearchBar from "@/components/Event/EventSearchBar";
import EventModal from "@/components/Event/EventModal";
import PageHeader from "@/components/PageHeader/PageHeader";
import Sidebar from "@/components/Sidebar/page";
import Loader from "@/components/Loader";
import { FaCalculator } from "react-icons/fa";
import { FaCalendarAlt } from "react-icons/fa";
import PageHeader from "@/components/PageHeader/PageHeader";
import { Evenement } from "@/types/main-types/main";
import EventSearchBar from "@/components/Event/EventSearchBar";
import EventTable from "@/components/Event/EventTable";
import EventModal from "@/components/Event/EventModal";

const EventsPage: FC = () => {
const [events, setEvents] = useState<Evenement[]>([]);
const [initialEvents, setInitialEvents] = useState<Evenement[]>([]);
const [loading, setLoading] = useState<boolean>(true);
const [error, setError] = useState<string | null>(null);
const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
Expand All @@ -22,24 +23,32 @@ const EventsPage: FC = () => {
fetchEvents();
}, []);

const fetchEvents = async (name: string = "") => {
const fetchEvents = async () => {
setLoading(true);
try {
const response = await fetch(`/api/events?name=${name}`);
const response = await fetch(`/api/events`);
if (!response.ok) {
throw new Error("Failed to fetch events");
}
const data: Evenement[] = await response.json();
setEvents(data);
setInitialEvents(data); // Save the initial list for filtering
} catch (error: any) {
setError(error.message);
} finally {
setLoading(false);
}
};

const handleSave = async () => {
await fetchEvents();
const handleSearch = (name: string) => {
if (name === "") {
setEvents(initialEvents); // Reset to initial list if search term is empty
} else {
const filteredEvents = initialEvents.filter((event) =>
event.nom.toLowerCase().includes(name.toLowerCase())
);
setEvents(filteredEvents);
}
};

const openModal = (event: Evenement | null = null) => {
Expand Down Expand Up @@ -70,48 +79,36 @@ const EventsPage: FC = () => {
"Content-Type": "application/json",
},
});
handleSave();
fetchEvents();
closeDeleteModal();
}
};

const handleSearch = (name: string) => {
fetchEvents(name);
};

if (loading) return <Loader />;
if (error) return <p>Error: {error}</p>;

return (
<div className="flex flex-row w-full min-h-screen">
<Sidebar />
<div className="bg-[#F3F3FF] w-full">
<div className="p-4 bg-slate-50 rounded-lg shadow-md">
<div className="p-4 ml-[4em] bg-slate-50 rounded-lg shadow-md">
<PageHeader
title="Evenements"
icon={<FaCalculator className="scale-[1.5]" color="#6D6B81" />}
icon={<FaCalendarAlt className="scale-[1.5]" color="#6D6B81" />}
/>
<EventSearchBar onAdd={() => openModal()} onSearch={handleSearch} />
<EventTable
events={events.map(event => ({
...event,
userId: event.userId ?? null,
dons: event.dons,
donAssociation: event.dons.length,
}))}
onEdit={(event) => openModal(event as Evenement)}
onDelete={(event) => openDeleteModal(event as Evenement)}
events={events}
onEdit={openModal}
onDelete={openDeleteModal}
/>
</div>
{selectedEvent && (
{isModalOpen && (
<EventModal
event={{
...selectedEvent,
userId: selectedEvent.userId ?? null,
}}
event={selectedEvent}
isOpen={isModalOpen}
onClose={closeModal}
onSave={handleSave}
onSave={fetchEvents}
/>
)}
{isDeleteModalOpen && (
Expand Down
2 changes: 1 addition & 1 deletion satsquare/src/app/reward/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ const RewardsPage: FC = () => {
<div className="flex flex-row w-full min-h-screen">
<Sidebar />
<div className="bg-[#F3F3FF] w-full">
<div className="p-4 bg-slate-50 rounded-lg shadow-md">
<div className="p-4 ml-[4em] bg-slate-50 rounded-lg shadow-md">
<PageHeader
title="Récompenses"
icon={<FaDonate className="scale-[1.5]" color="#6D6B81" />}
Expand Down
148 changes: 123 additions & 25 deletions satsquare/src/components/Event/EventModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { Evenement } from "@/types/main-types/main";
import { FC, useState, useEffect, FormEvent } from "react";


interface EventModalProps {
event?: Evenement | null;
Expand All @@ -20,7 +19,12 @@ const EventModal: FC<EventModalProps> = ({
description: "",
commence_a: "",
termine_a: "",
est_public: false,
estPublic: false,
estGratuit: false,
satMinimum: 0,
recompenseJoueurs: 0,
donAssociation: 0,
donPlateforme: 0,
});

useEffect(() => {
Expand All @@ -30,15 +34,25 @@ const EventModal: FC<EventModalProps> = ({
description: event.description,
commence_a: new Date(event.commenceA).toISOString().substring(0, 16),
termine_a: new Date(event.termineA).toISOString().substring(0, 16),
est_public: event.estPublic,
estPublic: event.estPublic,
estGratuit: event.estGratuit,
satMinimum: event.satMinimum || 0,
recompenseJoueurs: event.recompenseJoueurs || 0,
donAssociation: event.donAssociation || 0,
donPlateforme: event.donPlateforme || 0,
});
} else {
setFormData({
nom: "",
description: "",
commence_a: "",
termine_a: "",
est_public: false,
estPublic: false,
estGratuit: false,
satMinimum: 0,
recompenseJoueurs: 0,
donAssociation: 0,
donPlateforme: 0,
});
}
}, [event]);
Expand All @@ -64,9 +78,16 @@ const EventModal: FC<EventModalProps> = ({
const handleSubmit = async (e: FormEvent) => {
e.preventDefault();
const payload = {
...formData,
commence_a: new Date(formData.commence_a),
termine_a: new Date(formData.termine_a),
nom: formData.nom,
description: formData.description,
commenceA: new Date(formData.commence_a.replace("T", " ") + ":00"), // Ensure time is preserved
termineA: new Date(formData.termine_a.replace("T", " ") + ":00"), // Ensure time is preserved
estPublic: formData.estPublic,
estGratuit: formData.estGratuit,
satMinimum: parseInt(formData.satMinimum.toString(), 10), // Convert to a number
recompenseJoueurs: parseInt(formData.recompenseJoueurs.toString(), 10), // Convert to a number
donAssociation: parseInt(formData.donAssociation.toString(), 10), // Convert to a number
donPlateforme: parseInt(formData.donPlateforme.toString(), 10), // Convert to a number
};
const method = event ? "PUT" : "POST";
const url = event ? `/api/events/${event.id}` : "/api/events";
Expand Down Expand Up @@ -143,24 +164,101 @@ const EventModal: FC<EventModalProps> = ({
required
/>
</div>
<div className="flex items-center mb-4">
<input
type="checkbox"
name="est_public"
id="est_public"
checked={formData.est_public}
onChange={handleChange}
className="hidden"
/>
<label
htmlFor="est_public"
className="flex items-center space-x-2 cursor-pointer"
>
<span
className={`w-8 h-8 rounded-full border-4 ${formData.est_public ? "bg-black border-gray-300" : "bg-slate-50 border-gray-300"}`}
></span>
<span className="text-sm font-medium text-gray-700">Public</span>
</label>
<div className="flex mb-4">
<div className="flex items-center justify-center space-x-2 w-1/2">
<input
type="checkbox"
name="estPublic"
id="estPublic"
checked={formData.estPublic}
onChange={handleChange}
className="hidden"
/>
<label
htmlFor="estPublic"
className="flex items-center space-x-2 cursor-pointer"
>
<span
className={`w-8 h-8 rounded-full border-4 ${formData.estPublic ? "bg-black border-gray-300" : "bg-slate-50 border-gray-300"}`}
></span>
<span className="text-sm font-medium text-gray-700">
Public
</span>
</label>
</div>
<div className="flex items-center justify-center space-x-2 w-1/2">
<input
type="checkbox"
name="estGratuit"
id="estGratuit"
checked={formData.estGratuit}
onChange={handleChange}
className="hidden"
/>
<label
htmlFor="estGratuit"
className="flex items-center space-x-2 cursor-pointer"
>
<span
className={`w-8 h-8 rounded-full border-4 ${formData.estGratuit ? "bg-black border-gray-300" : "bg-slate-50 border-gray-300"}`}
></span>
<span className="text-sm font-medium text-gray-700">
Gratuit
</span>
</label>
</div>
</div>
<div className="flex mb-4">
<div className="flex items-center justify-center space-x-2 w-1/2 mx-2">
<label className="block text-sm font-medium text-gray-700">
Sat Minimum
</label>
<input
type="number"
name="satMinimum"
value={formData.satMinimum}
onChange={handleChange}
className="w-full px-8 py-3 border-none rounded-md shadow outline-none bg-slate-100 text-[#6a6b74]"
/>
</div>
<div className="flex items-center justify-center space-x-2 w-1/2 mx-2">
<label className="block text-sm font-medium text-gray-700">
Récompense Joueurs
</label>
<input
type="number"
name="recompenseJoueurs"
value={formData.recompenseJoueurs}
onChange={handleChange}
className="w-full px-8 py-3 border-none rounded-md shadow outline-none bg-slate-100 text-[#6a6b74]"
/>
</div>
</div>
<div className="flex mb-4">
<div className="flex items-center justify-center space-x-2 w-1/2 mx-2">
<label className="block text-sm font-medium text-gray-700">
Don Association
</label>
<input
type="number"
name="donAssociation"
value={formData.donAssociation}
onChange={handleChange}
className="w-full px-8 py-3 border-none rounded-md shadow outline-none bg-slate-100 text-[#6a6b74]"
/>
</div>
<div className="flex items-center justify-center space-x-2 w-1/2 mx-2">
<label className="block text-sm font-medium text-gray-700">
Don Plateforme
</label>
<input
type="number"
name="donPlateforme"
value={formData.donPlateforme}
onChange={handleChange}
className="w-full px-8 py-3 border-none rounded-md shadow outline-none bg-slate-100 text-[#6a6b74]"
/>
</div>
</div>
<div className="flex justify-end space-x-4">
<button
Expand Down
31 changes: 19 additions & 12 deletions satsquare/src/components/Event/EventSearchBar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,41 @@
import { FC, useState } from 'react';
import { FaPlus, FaSearch } from 'react-icons/fa';
import { FC, useState } from "react";
import { FaPlus } from "react-icons/fa";

interface EventSearchBarProps {
onAdd: () => void;
onSearch: (name: string) => void;
}

const EventSearchBar: FC<EventSearchBarProps> = ({ onAdd, onSearch }) => {
const [searchTerm, setSearchTerm] = useState('');
const [searchTerm, setSearchTerm] = useState("");

const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setSearchTerm(e.target.value);
};

const handleSearchClick = () => {
onSearch(searchTerm);
const value = e.target.value;
setSearchTerm(value);
onSearch(value); // Trigger search on input change
};

return (
<div className="flex justify-between mb-4 space-x-2">
<button className="bg-[#EEEEEF] w-1/6 shadow-md text-[#6D6B81] font bold py-2 pr-4 rounded-md flex flex-row items-center justify-center" onClick={onAdd} > <span className='p-1.5 mx-2 rounded-full bg-slate-400'><FaPlus className='text-white' /></span> <span className='text-[#737ABA] font-bold mx-3'> Ajouter un nouveau</span></button>
<div className='bg-[#EEEEEF] w-1/2 flex p-1.3 pl-2 rounded-md shadow-md '>
<button
className="bg-[#EEEEEF] w-2/6 shadow-md text-[#6D6B81] font bold py-2 pr-4 rounded-md flex flex-row items-center justify-center"
onClick={onAdd}
>
<span className="p-1.5 mx-2 rounded-full bg-slate-400">
<FaPlus className="text-white" />
</span>
<span className="text-[#737ABA] font-bold mx-3">
Ajouter un nouveau
</span>
</button>
<div className="bg-[#EEEEEF] w-1/2 flex p-1.3 pl-2 rounded-md shadow-md">
<input
type="text"
placeholder="Chercher un événement ..."
className="border-none p-2 rounded-md w-full bg-[#EEEEEF]"
className="border-none p-2 rounded-md w-full bg-[#EEEEEF]"
value={searchTerm}
onChange={handleSearchChange}
/>
<button className="bg-action w-auto p-3.5 rounded-md" onClick={handleSearchClick}> <FaSearch className='text-[#6D6B81] scale-125' /></button>
</div>
</div>
);
Expand Down
Loading

0 comments on commit 9e7f6f9

Please sign in to comment.