search prueba

psicoadmin/src/App.css

 }
 
 
+#todas_las_pruebas_body{
+    display : block;
+}
+#comportamiento_body{
+    display : none;
+}
+#personalidad_body{
+    display : none;
+}
+#inteligencia_body{
+    display : none;
+}
+
+        /* $("#todas_las_pruebas_body").css('display', 'block'); */
+        /* $("#comportamiento_body").css('display', 'none'); */
+        /* $("#personalidad_body").css('display', 'none'); */
+        /* $("#inteligencia_body").css('display', 'none'); */
+        /* $("#todaspruebas").addClass("active"); */
+        /* $("#comportamiento").removeClass("active"); */
+        /* $("#personalidad").removeClass("active"); */
+        /* $("#inteligencia").removeClass("active"); */

psicoadmin/src/Css/all.css

     background: transparent;
     transition: all 0.3s;
 }
+.prueba_item{
+    padding-top : 15px;
+}
 .body_prueba_list .modern-Checkbox label {
     color: #363636;
     background-color: #ffffff;

psicoadmin/src/Pages/Pruebas.jsx

-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import $ from 'jquery'
 import { Row, Col } from 'react-bootstrap'
 
 
 function Pagination () {
     return(
-        <div class="pagination_pruebas">
-            <div class="botones_pagination">
-                <span class="disabled">Ant.</span>
-                <span href="#" class="active">1</span>
-                <span href="#">2</span>
-                <span href="#">3</span>
-                <span href="#">4</span>
-                <span href="#">5</span>
-                <span href="#">Sig.</span>
+        <div className="pagination_pruebas">
+            <div className="botones_pagination">
+                <span className="disabled">Ant.</span>
+                <span className="active">1</span>
+                <span >2</span>
+                <span >3</span>
+                <span >4</span>
+                <span >5</span>
+                <span >Sig.</span>
             </div>
         </div>
     )
 }
     
-function ListTests(pruebas){
-    return pruebas.map( ( prueba, index ) => {
-        return(
-            <>
-                <Col key={index} md="3">
-                    <div className="body_prueba_list">
-                        <div className="botones_edicion">
-                            <div className="contenedor_botones">
-                                <Row>
-                                    <Col md="6">
-                                        {/*<a href="index" title="Editar"><i className="far fa-edit"></i></a> */}
-                                        <EditIcon className="grid_btn"/>
-                                    </Col>
-                                    <Col md="6">
-                                        <RemoveRedEyeIcon className="grid_btn"/>
-                                        {/*  <a href="index" title="Eliminar"><i className="fas fa-times"></i></a> */}
-                                    </Col>
-                                </Row>
-                            </div>
-                        </div>
-                        <div className="modern-Checkbox">
-                            <label htmlFor="box-21">{prueba}</label>
-                        </div>
+function CardPrueba(props){
+    let {index, prueba} = props
+    return(
+        <Col className="prueba_item" key={index} md="3">
+            <div className="body_prueba_list">
+                <div className="botones_edicion">
+                    <div className="contenedor_botones">
+                        <Row>
+                            <Col md="6">
+                                {/*<a href="index" title="Editar"><i className="far fa-edit"></i></a> */}
+                                <EditIcon className="grid_btn"/>
+                            </Col>
+                            <Col md="6">
+                                <RemoveRedEyeIcon className="grid_btn"/>
+                                {/*  <a href="index" title="Eliminar"><i className="fas fa-times"></i></a> */}
+                            </Col>
+                        </Row>
                     </div>
-                </Col>
-            </>
-        )
-    })
+                </div>
+                <div className="modern-Checkbox">
+                    <label htmlFor="box-21">{prueba}</label>
+                </div>
+            </div>
+        </Col>
+    )
 }
 
 export function Pruebas() {
         'NIC',
     ]
 
-    useEffect(() => todaspruebas_list() ,[])
-    
-    function todaspruebas_list() {
-        $("#todas_las_pruebas_body").css('display', 'block');
-        $("#comportamiento_body").css('display', 'none');
-        $("#personalidad_body").css('display', 'none');
-        $("#inteligencia_body").css('display', 'none');
-        $("#todaspruebas").addClass("active");
-        $("#comportamiento").removeClass("active");
-        $("#personalidad").removeClass("active");
-        $("#inteligencia").removeClass("active");
-    };
-
-    function comportamiento_list() {
-        $("#comportamiento_body").css('display', 'block');
-        $("#personalidad_body").css('display', 'none');
-        $("#inteligencia_body").css('display', 'none');
-        $("#todas_las_pruebas_body").css('display', 'none');
-        $("#personalidad").removeClass("active");
-        $("#inteligencia").removeClass("active");
-        $("#comportamiento").addClass("active");
-        $("#todaspruebas").removeClass("active");
-    };
-
-    function personalidad_list() {
-        $("#comportamiento_body").css('display', 'none');
-        $("#personalidad_body").css('display', 'block');
-        $("#inteligencia_body").css('display', 'none');
-        $("#todas_las_pruebas_body").css('display', 'none');
-        $("#comportamiento").removeClass("active");
-        $("#inteligencia").removeClass("active");
-        $("#personalidad").addClass("active");
-        $("#todaspruebas").removeClass("active");
-    };
-
-    function inteligencia_list() {
-        $("#comportamiento_body").css('display', 'none');
-        $("#personalidad_body").css('display', 'none');
-        $("#inteligencia_body").css('display', 'block');
-        $("#todas_las_pruebas_body").css('display', 'none');
-        $("#comportamiento").removeClass("active");
-        $("#personalidad").removeClass("active");
-        $("#inteligencia").addClass("active");
-        $("#todaspruebas").removeClass("active");
-    };
+    const all = [...inteligencia, ...comportamiento, ...personalidad]
 
+    useEffect(() => {
+        setPruebas(all)
+        console.log('Pruebas >> ',pruebas)
+    },[])
+    
+    let [nombre, setNombre] = useState(null)
+    let [pruebas, setPruebas] = useState([])
  
     return (
         <section>
                         <Col md='6' className="busqueda_prueba">
                             <Row>
                                 <Col md="6">
-                                    <input type="text" name="nombreprueba" placeholder="Escribe el nombre de la prueba que deseas consultar"/>
+                                    <input 
+                                        onChange={(event) => {
+                                            let nombre = event.target.value
+                                            console.log('NOMBRE >>',nombre)
+                                            if(nombre){
+                                                // let temp = pruebas.filter( prueba  => prueba.search(nombre) )
+                                                let temp = pruebas.filter( prueba  => {
+                                                    let isset = prueba.toUpperCase().includes( nombre.toUpperCase())
+                                                    console.log('ISET >>',prueba,isset )
+                                                    return isset
+                                                })
+                                                console.log('TEMP >>', temp)
+                                                setPruebas(temp)
+                                                setNombre(nombre)
+                                            }else{
+                                                setPruebas(all)
+                                                setNombre(nombre)
+                                            }
+                                        }} 
+                                        type="text" 
+                                        name="nombreprueba" 
+                                        placeholder="Escribe el nombre de la prueba que deseas consultar"/>
                                 </Col>
                                 <Col md="6">
                                     <div className="buscar_prueba">
                     <div className="tabs_pruebas">
                         <Row >
                             <Col md="3">
-                                <div className="test_tab active" id="todaspruebas" onClick={todaspruebas_list}>
+                                <div 
+                                    className="test_tab active" 
+                                    id="todaspruebas" 
+                                    onClick={() => setPruebas(all)}
+                                >
                                     <p>TODAS LAS PRUEBAS</p>
                                 </div>
                             </Col>
                             <Col md="3">
-                                <div className="test_tab" id="comportamiento" onClick={comportamiento_list}>
+                                <div 
+                                    className="test_tab" 
+                                    id="comportamiento" 
+                                    onClick={() => setPruebas(comportamiento)}
+                                >
                                     <p>COMPORTAMIENTO</p>
                                 </div>
                             </Col>
                             <Col md="3">
-                                <div className="test_tab" id="personalidad" onClick={personalidad_list}>
+                                <div 
+                                    className="test_tab" 
+                                    id="personalidad" 
+                                    onClick={() => setPruebas(personalidad)}
+                                >
                                     <p>PERSONALIDAD</p>
                                 </div>
                             </Col>
                             <Col md="3">
-                                <div className="test_tab" id="inteligencia" onClick={inteligencia_list}>
+                                <div 
+                                    className="test_tab" 
+                                    id="inteligencia" 
+                                    onClick={() => setPruebas(inteligencia)}>
                                     <p>INTELIGENCIA</p>
                                 </div>
                             </Col>
                     </div>
 
                     <div className="pruebas_grid">
-                            <div className="todas_las_pruebas_body" id="todas_las_pruebas_body">
-                                <Row>
-                                    {ListTests([...inteligencia,...personalidad,...comportamiento])}
-                                </Row>
-                                <Pagination/>
-                            </div>
-
-                        <div className="comportamiento_body" id="comportamiento_body">
-                            <Row>
-                                {ListTests(comportamiento)}
-                            </Row>
-                            <Pagination/>
-                        </div>
-                            
-                        <div className="inteligencia_body" id="inteligencia_body">
+                        <div className="todas_las_pruebas_body" id="todas_las_pruebas_body">
                             <Row>
-                                { ListTests(inteligencia)  }
-                            </Row>
-                            <Pagination/>
-                        </div>
-
-                        <div className="personalidad_body" id="personalidad_body">
-                            <Row >
-                                {ListTests(personalidad)}
+                                {
+                                    pruebas.length ?
+                                    pruebas.map( 
+                                        (prueba, index) => <CardPrueba prueba={prueba} index={index}/>  
+                                    )
+                                    : undefined
+                                }
                             </Row>
                             <Pagination/>
                         </div>
                     </div>
+
                 </div>
-                </div>
-            </section>
+            </div>
+        </section>
     )
 }