From a52b71d8c0551c1ca0782b9392f73e8229b8f174 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arthur=20CRAH=C3=89?= <crahe.arthur@gmail.com>
Date: Thu, 25 Apr 2024 20:17:04 +0200
Subject: [PATCH] working on filter

---
 .../(front-office)/creer-ressource/page.tsx   |  28 ++--
 .../(front-office)/mes-ressources/page.tsx    | 131 +++++++++++++++++-
 2 files changed, 136 insertions(+), 23 deletions(-)

diff --git a/frontend/src/app/(connected)/(front-office)/creer-ressource/page.tsx b/frontend/src/app/(connected)/(front-office)/creer-ressource/page.tsx
index a0cf963..c84fc31 100644
--- a/frontend/src/app/(connected)/(front-office)/creer-ressource/page.tsx
+++ b/frontend/src/app/(connected)/(front-office)/creer-ressource/page.tsx
@@ -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};
diff --git a/frontend/src/app/(connected)/(front-office)/mes-ressources/page.tsx b/frontend/src/app/(connected)/(front-office)/mes-ressources/page.tsx
index 528b4fb..b899a6c 100644
--- a/frontend/src/app/(connected)/(front-office)/mes-ressources/page.tsx
+++ b/frontend/src/app/(connected)/(front-office)/mes-ressources/page.tsx
@@ -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);
@@ -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>
        );