[add] toggle grid list view

plazas.php

 }(jQuery));
 
 $('input[type=file]').customFile();
-  </script>
+  </script>

psicoadmin/src/App.css

     padding : 10px;
 }
 
+.activar_vista{
+    display : block !important;
+    transition: opacity 0.5s;
+    opacity: 1;
+}
+.desactivar_vista{
+    display : none !important;
+    opacity: 0;
+    pointer-events:none;
+}
+
 

psicoadmin/src/Pages/Puestos.js

 import * as React from 'react';
+import classnames from 'classnames';
 import { Row, Col } from 'react-bootstrap'
 
 import Box from '@mui/material/Box';
 
 import ViewListIcon from '@mui/icons-material/ViewList';
 import ViewModuleIcon from '@mui/icons-material/ViewModule';
-import ViewQuiltIcon from '@mui/icons-material/ViewQuilt';
     
 let data = [{
     nombre : 'Nombre puesto',
 function ListMode() {
 
     let actions = [
-        <a href="#" class="ver_producto" data-toggle="modal" data-target="#verProducto">Ver</a>,
-        <a href="#" class="editar_producto" data-toggle="modal" data-target="#editarProducto">Editar</a>,
-        <a href="#" class="eliminar_producto" data-toggle="modal" data-target="#deleteProducto">Eliminar</a>,
+        <a href="#" className="ver_producto" data-toggle="modal" data-target="#verProducto">Ver</a>,
+        <a href="#" className="editar_producto" data-toggle="modal" data-target="#editarProducto">Editar</a>,
+        <a href="#" className="eliminar_producto" data-toggle="modal" data-target="#deleteProducto">Eliminar</a>,
     ]
 
     return(
-        <Row class="row">
-            <Col style={{ padding : 0 }} md="12">
-                <div class="body-table">
-                    <table id="tablaproductos" class="display" style={{ width : "100%" }}>
-                        <thead>
-                            <tr>
-                                <th>Nombre de la plaza</th>
-                                <th>Descripción</th>
-                                <th>Salario</th>
-                                <th>Acciones</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {
-                                data.length ? 
+        <Col md="12">
+            <div className="body-table">
+                <table id="tablaproductos" className="display" style={{ width : "100%" }}>
+                    <thead>
+                        <tr>
+                            <th>Nombre de la plaza</th>
+                            <th>Descripción</th>
+                            <th>Salario</th>
+                            <th>Acciones</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+
+                        {
+                            data.length ? 
                                 data.map( plaza => {
                                     return (
                                         <tr>
                                         </tr>
                                     )
                                 }) : undefined
-                            }
-
-                        </tbody>
-                        <tfoot>
-                            <tr>
-                                <th>Nombre de la plaza</th>
-                                <th>Descripción</th>
-                                <th>Salario</th>
-                                <th>Acciones</th>
-                            </tr>
-                        </tfoot>
-                    </table>
-                </div>
-            </Col>
-        </Row>
+                        }
+
+                    </tbody>
+                    <tfoot>
+                        <tr>
+                            <th>Nombre de la plaza</th>
+                            <th>Descripción</th>
+                            <th>Salario</th>
+                            <th>Acciones</th>
+                        </tr>
+                    </tfoot>
+                </table>
+            </div>
+        </Col>
     )
 }
 
         <React.Fragment> 
             {
                 data.length ? 
-                    <div class="col-md-3">
-                        <div class="panel">
-                            <div class="row">
-                                <div class="col-md-4">
-                                    <div class="img-container">
+                    <div className="col-md-3">
+                        <div className="panel">
+                            <div className="row">
+                                <div className="col-md-4">
+                                    <div className="img-container">
                                         <img src="images/not_found.png"/>
                                     </div>
                                 </div>
-                                <div class="col-md-8">
-                                    <div class="info_details">
+                                <div className="col-md-8">
+                                    <div className="info_details">
                                         <p>Nombre de la plaza</p>
                                         <p>Descripción</p>
                                         <p>Salario</p>
-                                        <div class="botones_interactivos">
-                                            <a href="#" tooltip-location="top" tooltip-animate tooltip="Ver plaza" data-toggle="modal" data-target="#verProducto"><i class="far fa-eye"></i></a>
+                                        <div className="botones_interactivos">
+                                            <a href="#" tooltip-location="top" tooltip-animate tooltip="Ver plaza" data-toggle="modal" data-target="#verProducto"><i className="far fa-eye"></i></a>
                                         </div>
-                                        <div class="botones_interactivos">
-                                            <a href="#" tooltip-location="top" tooltip-animate tooltip="Editar plaza" data-toggle="modal" data-target="#editarProducto"><i class="far fa-edit"></i></a>
+                                        <div className="botones_interactivos">
+                                            <a href="#" tooltip-location="top" tooltip-animate tooltip="Editar plaza" data-toggle="modal" data-target="#editarProducto"><i className="far fa-edit"></i></a>
                                         </div>
-                                        <div class="botones_interactivos">
-                                            <a href="#" tooltip-location="top" tooltip-animate tooltip="Eliminar plaza" data-toggle="modal" data-target="#deleteProducto"><i class="far fa-times-circle"></i></a>
+                                        <div className="botones_interactivos">
+                                            <a href="#" tooltip-location="top" tooltip-animate tooltip="Eliminar plaza" data-toggle="modal" data-target="#deleteProducto"><i className="far fa-times-circle"></i></a>
                                         </div>
                                     </div>
                                 </div>
                         </div>
                     </div>
                     : undefined
-
             }
         </React.Fragment>
     )
 
     const [alignment, setAlignment] = React.useState('left');
 
-    const handleChange = (event, newAlignment) => {
-        setAlignment(newAlignment);
-    };
+    const handleChange = (event, newAlignment) => setAlignment(newAlignment);
 
     const children = [
-        <ToggleButton value="left" key="left">
+        <ToggleButton value="list" key="list">
             <ViewListIcon />
         </ToggleButton>,
-        <ToggleButton value="center" key="center">
+        <ToggleButton value="grid" key="grid">
             <ViewModuleIcon/>
         </ToggleButton>,
-        <ToggleButton value="right" key="right">
-            <ViewQuiltIcon/>
-        </ToggleButton>,
     ];
 
     const control = {
     };
 
     return (
-        <div class="content-section">
-            <div class="main">
-                <div class="breadcrumb-header">
-                    <Box sx={{ float : 'left',display: 'flex', flexDirection: 'column', alignItems: 'center', '& > :not(style) + :not(style)': { mt: 2 }, }} >
-                        <ToggleButtonGroup size="small" {...control}>
-                            {children}
-                        </ToggleButtonGroup>
-                    </Box>
-                </div>
-                <div class="row">
-                    <div class="col-md-6">
-                        <div class="list_view">
-                            <div class="row">
-                                <div class="colgrilla">
-                                    <div class="btn_view">
-                                        <a class="activar_vista" id="list_click" tooltip-location="top" tooltip-animate tooltip="Ver como lista" onclick="activarlista()"><i class="fas fa-list"></i></a>
-                                    </div>
-                                </div>
-                                <div class="colgrilla">
-                                    <div class="btn_view">
-                                        <a id="grid_click" tooltip-location="top" tooltip-animate tooltip="Ver como grupo" onclick="activargrid()"><i class="fas fa-th"></i></a>
-                                    </div>
-                                </div>
-                            </div>
+        <div className="content-section">
+            <div className="main">
+                <Row>
+                    <Col md="6">
+                        <div className="breadcrumb-header">
+                            <Box sx={{ float : 'left',display: 'flex', flexDirection: 'column', alignItems: 'center', '& > :not(style) + :not(style)': { mt: 2 }, }} >
+                                <ToggleButtonGroup size="small" {...control}>
+                                    {children}
+                                </ToggleButtonGroup>
+                            </Box>
                         </div>
-                    </div>
-                    <div class="col-md-6">
-                        <div class="add_producto">
-                            <div class="btn_add_producto">
+                    </Col>
+                    <Col md="6">
+                        <div className="add_producto">
+                            <div className="btn_add_producto">
                                 <a href="#" data-toggle="modal" data-target="#addProducto">Agregar manual</a>
                             </div>
                         </div>
-                        <div class="add_producto">
-                            <div class="btn_add_producto">
+                        <div className="add_producto">
+                            <div className="btn_add_producto">
                                 <a href="#" data-toggle="modal" data-target="#addProductoExpress">Agregar express</a>
                             </div>
                         </div>
-                    </div>
-                </div>
-                <div class="main_productos" id="grid_view">
+                    </Col>
+                </Row>
+                <div className={`main_productos ${ alignment === 'grid' ? 'activar_vista' : 'desactivar_vista'  }`} id="grid_view">
                     <Row>
                         <ModuleMode/>
                     </Row>
                 </div>
-                <div class="main_list_products" id="list_view_products">
-                    <ListMode/>
+                <div className={`main_list_products ${alignment === 'list' ?  'activar_vista' : 'desactivar_vista'}`} id="list_view_products">
+                    <Row>
+                        <ListMode/>
+                    </Row>
                 </div>
             </div>
         </div>