Skip to content
This repository has been archived by the owner on Nov 18, 2024. It is now read-only.

Commit

Permalink
working on filter
Browse files Browse the repository at this point in the history
  • Loading branch information
@khylpe
khylpe committed Apr 25, 2024
1 parent a084d04 commit a52b71d
Show file tree
Hide file tree
Showing 2 changed files with 136 additions and 23 deletions.
28 changes: 11 additions & 17 deletions frontend/src/app/(connected)/(front-office)/creer-ressource/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,25 +17,19 @@ export default function CreateRessourceForm() {
const [isSubmitting, setSubmitting] = useState(false);
const [categories, setCategories] = useState<Category[]>([]);
const [categoriesLoaded, setCategoriesLoaded] = useState(false);
const { user } = useUser();
// Utilisez useEffect pour récupérer les catégories et les statuts lors du chargement du composant

useEffect(() => {
const fetchCategories = async () => {
try {
const categoriesResponse = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/categories`);
setCategories(categoriesResponse.data.categories);
setCategoriesLoaded(true);

} catch (error) {
console.error("Erreur lors de la récupération des catégories et des statuts:", error);
}
};

if (!categoriesLoaded) {
fetchCategories();
}
}, [categoriesLoaded]); // Charger les catégories et les statuts une seule fois au chargement du composant
fetchCategories();
}, []);

const fetchCategories = async () => {
try {
const categoriesResponse = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/categories`);
setCategories(categoriesResponse.data.categories);
} catch (error) {
console.error("Erreur lors de la récupération des catégories et des statuts:", error);
}
};

const onFinish = async (ressourceForm: Ressource) => {
const ressourceFormWithUserId = { ...ressourceForm};
Expand Down
131 changes: 125 additions & 6 deletions frontend/src/app/(connected)/(front-office)/mes-ressources/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,66 @@
"use client"
import { Tabs, message } from 'antd';
import { Card, Input, Tabs, message, Checkbox, Form, Button, Select } from 'antd';
import type { TabsProps } from 'antd';
import { useState, useEffect } from 'react';
import Ressource from '@/types/ressource';
import PageSummary from '@/components/pageSummary';
import axios, { AxiosError, AxiosResponse } from 'axios';
import ListOfRessourcesAccordion from '@/components/front-office/ressource-management/listOfRessourcesAccordion';
import { Category } from '@/types/category';
const { Option } = Select;

export default function MyRessources() {
const [acceptedRessources, setAcceptedRessources] = useState<Ressource[]>([]);
const [pendingRessources, setPendingRessources] = useState<Ressource[]>([]);
const [rejectedRessources, setRejectedRessources] = useState<Ressource[]>([]);
const [blockedRessources, setBlockedRessources] = useState<Ressource[]>([]);

const [filteredRessources, setFilteredRessources] = useState<Ressource[][]>([[], [], [], []]);

const [loading, setLoading] = useState(true);
const [form] = Form.useForm();
const [categories, setCategories] = useState<Category[]>([]);
const [filterActive, setFilterActive] = useState(false);

useEffect(() => {
fetchPendingRessources();
fetchCategories();
}, []);

const applyFilter = (values: FormValues) => {
console.log(values)
};

const resetFilter = () => {
form.resetFields();
setFilteredRessources([acceptedRessources, pendingRessources, rejectedRessources, blockedRessources]);
setFilterActive(false);
};

const fetchCategories = async () => {
try {
const categoriesResponse = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/categories`);
setCategories(categoriesResponse.data.categories);
} catch (error) {
console.error(error);
const axiosError = error as AxiosError;

if (axiosError.response) {
switch (axiosError.response.status) {
case 401:
message.error("Vous n'êtes pas autorisé");
case 403:
message.error("Vous n'êtes pas autorisé");
break;
default:
message.error("Erreur lors de la récupération de la ressource");
}
} else {
message.error("Erreur lors de la mise à jour de la ressource");
}
}
};

const fetchPendingRessources = async () => {
try {
setLoading(true);
Expand Down Expand Up @@ -76,35 +120,110 @@ export default function MyRessources() {
}
};

interface FormValues {
label?: string;
description?: string;
idCategory?: string;
isPublic?: boolean;
}

const items: TabsProps['items'] = [
{
key: 'acceptedRessources',
label: 'Ressources acceptées',
children: <ListOfRessourcesAccordion ressources={acceptedRessources} refreshRessources={fetchPendingRessources}></ListOfRessourcesAccordion>,
children: <ListOfRessourcesAccordion ressources={filterActive ? filteredRessources[0] : acceptedRessources} refreshRessources={fetchPendingRessources} />,
},
{
key: 'pendingRessources',
label: 'Ressources en attente',
children: <ListOfRessourcesAccordion ressources={pendingRessources} refreshRessources={fetchPendingRessources}></ListOfRessourcesAccordion>,
children: <ListOfRessourcesAccordion ressources={filterActive ? filteredRessources[1] : pendingRessources} refreshRessources={fetchPendingRessources} />,
},
{
key: 'rejectedRessources',
label: 'Ressources refusées',
children: <ListOfRessourcesAccordion ressources={rejectedRessources} refreshRessources={fetchPendingRessources}></ListOfRessourcesAccordion>,
children: <ListOfRessourcesAccordion ressources={filterActive ? filteredRessources[2] : rejectedRessources} refreshRessources={fetchPendingRessources} />,
},
{
key: 'blockedRessources',
label: 'Ressources bloquées',
children: <ListOfRessourcesAccordion ressources={blockedRessources} refreshRessources={fetchPendingRessources}></ListOfRessourcesAccordion>,
children: <ListOfRessourcesAccordion ressources={filterActive ? filteredRessources[3] : blockedRessources} refreshRessources={fetchPendingRessources} />,
},
];

return (
<div>
<PageSummary title={'Mes ressources'} description={undefined}></PageSummary>
<div className="flex flex-row justify-center">
<div className="flex flex-row justify-center gap-3">
<Tabs className='w-full' defaultActiveKey="1" items={items} />
<Card title="Filtres">
<Form
onValuesChange={(_, allValues) => {
if (filterActive) {
applyFilter(allValues);
}
}}

form={form}
name="filterRessourceListForm"
// onFinish={onFinish}
autoComplete="off"
layout='vertical'
>
<Form.Item label="Titre" name="label">
<Input />
</Form.Item>

<Form.Item label="Description" name="description">
<Input.TextArea />
</Form.Item>

<Form.Item
label="Catégorie"
name="idCategory"
>
<Select
showSearch
optionFilterProp="label"
filterOption={(input, option) =>
(option?.label as string).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{(categories).map((category) => (
<Option key={category.id} value={category.id} label={category.title}>
{category.title}
</Option>
))}
</Select>
</Form.Item>

<Form.Item
label="Ressource publique"
name="isPublic"
valuePropName="checked" // Pour gérer la valeur cochée
initialValue={false} // Valeur par défaut cochée
>
<Checkbox />
</Form.Item>

<Form.Item
>
{filterActive ? (
<Button
onClick={() => {
form.resetFields();
setFilterActive(false);
}}
type="primary" htmlType="submit">Réinitialiser les filtres</Button>
) : (
<Button
onClick={() => {
setFilterActive(true);
}}
type="primary" htmlType="submit">Appliquer les filtres</Button>
)}
</Form.Item>
</Form>
</Card>
</div>
</div>
);
Expand Down

0 comments on commit a52b71d

Please sign in to comment.