[ADD] file uploader testing

psicoadmin/src/App.css

@@ -113,3 +113,7 @@
     padding-left: 0px !important;
     padding-right: 0 !important;
 }
+
+.css-12jypm1-MuiToolbar-root {
+    padding-left : 20px !important;
+}

psicoadmin/src/Components/Footer.js

@@ -4,10 +4,10 @@ import Link from '@mui/material/Link';
 
 export default function Footer(props) {
     return (
-        <Typography className="footerinfo" variant="body2" color="text.secondary" align="center" {...props}>
-            <a href="#">LICENCIA DE USO</a>
-            <a href="#">DERECHOS</a>
-            <a href="#">PRIVACIDAD</a>
+        <Typography style={{ paddingLeft : 25 }} className="footerinfo" variant="body2" color="text.secondary" align="center" {...props}>
+            <Link>LICENCIA DE USO</Link>
+            <Link>DERECHOS</Link>
+            <Link>PRIVACIDAD</Link>
             <Link color="inherit" href="#">
                 Propiedad de Grupo DIT {new Date().getFullYear()}
             </Link>

psicoadmin/src/Css/all.css

@@ -215,7 +215,7 @@ a.article:hover {
 }
 .content-section {
     background-color : #f1f1f1;
-    padding: 70px 0px;
+    padding: 70px 15px;
 }
 .nav-item a i{
     color: #212529;
@@ -952,6 +952,7 @@ table.dataTable tbody th, table.dataTable tbody td {
     border-radius: 20px;
     color: #fff;
     font-size: 12px;
+    padding: 10px;
 }
 .btn_add_producto_confirm:hover {
     border: 1px solid #2ec5d3;
@@ -961,7 +962,9 @@ table.dataTable tbody th, table.dataTable tbody td {
 }
 .btn_add_producto_confirm a {
     display: block;
-    padding: 10px;
+}
+.btn_add_producto_confirm span {
+    display: block;
 }
 [type=reset], [type=submit], button, html [type=button] {
     -webkit-appearance: initial;

psicoadmin/src/Pages/Puestos.js

@@ -1,7 +1,8 @@
-import * as React from 'react';
+import React, {  } from 'react';
 import { Row, Col, Modal, Button, Table } from 'react-bootstrap'
+import { Box, Typography, Button as MuiButton, ListItem, withStyles } from '@mui/material';
+
 
-import Box from '@mui/material/Box';
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 
@@ -12,6 +13,11 @@ import RemoveRedEyeIcon from '@mui/icons-material/RemoveRedEye';
 import EditIcon from '@mui/icons-material/Edit';
 import HighlightOffIcon from '@mui/icons-material/HighlightOff';
 
+///import { makeStyles, useTheme } from "@material-ui/core/styles";
+import { makeStyles, useTheme } from "@mui/material/styles";
+import TextField from "@mui/material/TextField";
+import ButtonBase from "@mui/material/ButtonBase";
+
 import NotFound from '../Images/not_found.png';
     
 let data = [{
@@ -36,7 +42,6 @@ for ( var _ of new Array(23) ){
         d : _ 
     })
 }
-
 function ListMode() {
 
     let actions = [
@@ -115,7 +120,7 @@ function GridMode () {
                 data.length ? 
                 data.map( plaza => {
                     return(
-                        <Col key={plaza.id} lg="3" md="6" sm="6" xs="12" >
+                        <Col key={plaza.id} lg="4" md="6" sm="6" xs="12" >
                             <div className="panel">
                                 <Row>
                                     <Col md="4">
@@ -145,8 +150,28 @@ function GridMode () {
 
 function Manual ( props ) {
 
+    let [ filename, setFilename ] = React.useState(null);
+
     let { visible, onClose } = props
 
+    // Create a reference to the hidden file input element
+    const hiddenFileInput = React.useRef(null);
+
+    // Programatically click the hidden file input element
+    // when the Button component is clicked
+    const handleClick = event => {
+        hiddenFileInput.current.click();
+    };
+    // Call a function (passed as a prop from the parent component)
+    // to handle the user-selected file 
+    const handleChange = event => {
+        const fileUploaded = event.target.files[0];
+        console.log( "FILE >> ", fileUploaded )
+        setFilename( fileUploaded.name )
+        //props.handleFile(fileUploaded);
+    };
+
+
     return (
         <Modal size="lg" aria-labelledby="contained-modal-title-vcenter" centered  show={visible} onHide={onClose}>
             <Modal.Header>
@@ -157,13 +182,28 @@ function Manual ( props ) {
                 <Row>
                     <Col md="4">
                         <div className="img-container">
-                            <img alt="not found img" src="images/not_found.png"/>
+                            <img alt="agregar plaza manual" src={NotFound}/>
                         </div>
                     </Col>
                     <Col md="8">
-                        <div className="custom-file-upload">
-                            <input type="file" id="file" name="myfiles[]" multiple />
-                        </div>
+
+                        <input 
+                            value={ filename ? filename : "" } 
+                            type="text" 
+                            class="file-upload-input" 
+                            disabled="" 
+                            placeholder="Ningún archivo seleccionado"/>
+
+                        <Button className="btn_add_producto_confirm" style={{ marginLeft : 15 }} onClick={handleClick}>
+                            SUBIR FOTO
+                        </Button>
+                        <input
+                            type="file"
+                            ref={hiddenFileInput}
+                            onChange={handleChange}
+                            style={{display: 'none'}}
+                        />
+
                     </Col>
                 </Row>
                 <div className="data_product">
@@ -175,7 +215,7 @@ function Manual ( props ) {
                         </Col>
                         <div className="add_producto_confirm">
                             <div className="btn_add_producto_confirm">
-                                <span style={{ margin : 15 }} type="submit">Agregar plaza</span>
+                                <span type="submit">Agregar plaza</span>
                             </div>
                         </div>
                     </Row>
@@ -201,7 +241,7 @@ function Express (props) {
                         </div>
                         <div className="add_producto_confirm">
                             <div className="btn_add_producto_confirm">
-                                <Button type="submit">Agregar plaza</Button>
+                                <span type="submit">Agregar plaza</span>
                             </div>
                         </div>
                     </div>