ajout de la coloration des lignes suite au clique de l'utilisateur 🎨

cryptide_project/src/Components/AccordionIndice.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 /* Style */
 import '../Style/Global.css';
@@ -19,42 +19,69 @@ import Case from './CheckCase';
 
 
 interface AccordionIndiceComponentProps<T extends Indice> {
-    instance: (new (...args: any[]) => T) | (Function & { prototype: T });
+instance: (new (...args: any[]) => T) | (Function & { prototype: T });
     head: string;
     lang: string;
 }
 
 const AccordionIndice: React.FC<AccordionIndiceComponentProps<any>> = ({ instance, head, lang }) => {
-    const indices = Stub.GenerateIndice();
+const indices = Stub.GenerateIndice();
-    return (
+const [selectedRows, setSelectedRows] = useState<number[]>([]);
-        <>
+
-            <Accordion defaultActiveKey={['0']} alwaysOpen style={{width:'100%'}}>
+
-                <Accordion.Item eventKey="0">
+const handleRowClick = (index: number) => {
-                    <Accordion.Header>{head}</Accordion.Header>
+
-                    <Accordion.Body>
+    const newSelectedRows = [...selectedRows];
-                        <Table striped bordered hover>
+
-                            <thead>
+    const selectedIndex = newSelectedRows.indexOf(index);
-                                <tr>
+    if (selectedIndex === -1) {
-                                    <th>Indice</th>
+        newSelectedRows.push(index);
-                                    <th>Déduction</th>
+    } else {
-                                </tr>
+        newSelectedRows.splice(selectedIndex, 1);
-                            </thead>
+    }
-                            <tbody>
+
-                                {indices
+    console.log('New Selected Rows:', newSelectedRows);
-                                    .filter((i) => i instanceof instance)
+    setSelectedRows(newSelectedRows);
-                                    .map((indice, index) => (
+};
-                                        <tr key={index}>
+
-                                            <td>{indice.ToString(lang)}</td>
+return (
-                                            <td><Case/></td>
+    <>
-                                        </tr>
+    <Accordion defaultActiveKey={['0']} alwaysOpen style={{ width: '100%' }}>
-                                    ))}
+        <Accordion.Item eventKey="0">
-                            </tbody>
+        <Accordion.Header>{head}</Accordion.Header>
-                        </Table>
+        <Accordion.Body>
-                    </Accordion.Body>
+            <Table striped bordered hover>
-                </Accordion.Item>
+            <thead>
-            </Accordion>
+                <tr>
-        </>
+                    <th>Indice</th>
-    );
+                </tr>
-}
+            </thead>
+            <tbody>
+                {indices
+                .filter((i) => i instanceof instance)
+                .map((indice, index) => (
+                    <tr
+                        key={index}
+                        onClick={() => handleRowClick(index)}
+                        style={{
+                            cursor: 'pointer',
+                        }}>
+                        <td
+                            style={{
+                                border: selectedRows.includes(index) ? '1px solid red' : 'none',
+                                backgroundColor: selectedRows.includes(index) ? '#FF9191' : 'white',
+                            }}>
+                            {indice.ToString(lang)}
+                        </td>
+                    </tr>
+                ))}
+            </tbody>
+            </Table>
+        </Accordion.Body>
+        </Accordion.Item>
+    </Accordion>
+    </>
+);
+};
 
 export default AccordionIndice;