amenpunk 4 роки тому
батько
коміт
3d41da18de

+ 52 - 0
package-lock.json

@@ -25,6 +25,7 @@
         "react": "^17.0.2",
         "react-bootstrap": "^2.0.2",
         "react-dom": "^17.0.2",
+        "react-hot-toast": "^2.2.0",
         "react-router": "6.2.1",
         "react-router-dom": "6.2.1",
         "react-scripts": "^5.0.0",
@@ -15412,6 +15413,35 @@
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
       "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
     },
+    "node_modules/react-hot-toast": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.2.0.tgz",
+      "integrity": "sha512-248rXw13uhf/6TNDVzagX+y7R8J183rp7MwUMNkcrBRyHj/jWOggfXTGlM8zAOuh701WyVW+eUaWG2LeSufX9g==",
+      "dependencies": {
+        "goober": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
+    "node_modules/react-hot-toast/node_modules/csstype": {
+      "version": "2.6.19",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.19.tgz",
+      "integrity": "sha512-ZVxXaNy28/k3kJg0Fou5MiYpp88j7H9hLZp8PDC3jV0WFjfH5E9xHb56L0W59cPbKbcHXeP4qyT8PrHp8t6LcQ==",
+      "peer": true
+    },
+    "node_modules/react-hot-toast/node_modules/goober": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.7.tgz",
+      "integrity": "sha512-aCR8u3A/tTgSrZAHfJObhYC0xgdKoYm4GvE/UFmxmzgvj3TSF+3oFYWtmJ459WBewjOIoEsoOG81sDs1rn+W5w==",
+      "peerDependencies": {
+        "csstype": "^2.6.2"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -29420,6 +29450,28 @@
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
       "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
     },
+    "react-hot-toast": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.2.0.tgz",
+      "integrity": "sha512-248rXw13uhf/6TNDVzagX+y7R8J183rp7MwUMNkcrBRyHj/jWOggfXTGlM8zAOuh701WyVW+eUaWG2LeSufX9g==",
+      "requires": {
+        "goober": "^2.1.1"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "2.6.19",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.19.tgz",
+          "integrity": "sha512-ZVxXaNy28/k3kJg0Fou5MiYpp88j7H9hLZp8PDC3jV0WFjfH5E9xHb56L0W59cPbKbcHXeP4qyT8PrHp8t6LcQ==",
+          "peer": true
+        },
+        "goober": {
+          "version": "2.1.7",
+          "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.7.tgz",
+          "integrity": "sha512-aCR8u3A/tTgSrZAHfJObhYC0xgdKoYm4GvE/UFmxmzgvj3TSF+3oFYWtmJ459WBewjOIoEsoOG81sDs1rn+W5w==",
+          "requires": {}
+        }
+      }
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",

+ 1 - 0
package.json

@@ -21,6 +21,7 @@
     "react": "^17.0.2",
     "react-bootstrap": "^2.0.2",
     "react-dom": "^17.0.2",
+    "react-hot-toast": "^2.2.0",
     "react-router": "6.2.1",
     "react-router-dom": "6.2.1",
     "react-scripts": "^5.0.0",

+ 1 - 1
public/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="es">
     <head>
         <meta charset="utf-8" />
         <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

+ 2 - 1
src/Components/Modal/AgregarExpress.js

@@ -9,7 +9,7 @@ const ExpressSchema = Yup.object().shape({
 
 export  default function Express (props) {
 
-    let { visible, onClose } = props
+    let { visible, onClose, success } = props
 
     return (
         <Modal size="lg" aria-labelledby="contained-modal-title-vcenter" centered  show={visible} onHide={onClose}>
@@ -25,6 +25,7 @@ export  default function Express (props) {
                     }}
                     validationSchema={ExpressSchema}
                     onSubmit={ (values) => {
+                        success();
                         props.setExpress(false)
                         console.log('VALUES Express >> ',values)
                     }} 

+ 2 - 1
src/Components/Modal/AgregarManual.js

@@ -26,7 +26,7 @@ export default function Manual ( props ) {
     let [ type, setType ] = React.useState(undefined);
     let [ validType, setValidType ] = React.useState(false);
 
-    let { visible, onClose } = props
+    let { visible, onClose, success } = props
     const hiddenFileInput = React.useRef(null);
 
     const PickFile = event => hiddenFileInput.current.click();
@@ -61,6 +61,7 @@ export default function Manual ( props ) {
                     validationSchema={NewPlazaSchema}
                     onSubmit={ (values) => {
                         // console.log('VALUES >> ',values)
+                        success();
                         props.setManual(false)
                     }} >
 

+ 0 - 0
src/Components/Puestos/GridMode.jsx


+ 71 - 0
src/Components/Puestos/ListMode.jsx

@@ -0,0 +1,71 @@
+import {  Col, Button, Table } from 'react-bootstrap'
+
+export function ListMode(props) {
+    
+    let { setEdit, setDelete, setShow, setPuesto, data } = props;
+
+    return(
+        <Col md="12">
+            <div className="body-table">
+                <Table responsive borderless id="tablaproductos">
+                    <thead>
+                        <tr >
+                            <th className="text-center">Nombre de la plaza</th>
+                            <th className="text-center">Descripción</th>
+                            <th className="text-center">Salario</th>
+                            <th className="text-center">Acciones</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+
+                        {
+                            data.length ? 
+                                data.slice( 0,23 ).map( (plaza, i) => {
+                                    return (
+                                        <tr key={plaza.id}>
+                                            <td className="text-center">{  plaza.id +  " - " + plaza.nombre }</td>
+                                            <td className="text-center">{ plaza.description }</td>
+                                            <td className="text-center">{ plaza.salario }</td>
+                                            <td className="actions_butons_plaza"> 
+                                                <Button 
+                                                    onClick={() => {
+                                                        setPuesto(plaza) 
+                                                        setShow(true)
+                                                    }} 
+                                                    className="ver_producto">Ver
+                                                </Button>
+
+                                                <Button 
+                                                    onClick={() => {
+                                                        setPuesto(plaza) 
+                                                        setEdit(true)
+                                                    }} 
+                                                    className="editar_producto">Editar
+                                                </Button>
+                                                <Button 
+                                                    onClick={() => {
+                                                        setPuesto(plaza) 
+                                                        setDelete(true) 
+                                                    }} 
+                                                    className="eliminar_producto">Eliminar
+                                                </Button>
+                                            </td>
+                                        </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>
+    )
+}

+ 8 - 3
src/Pages/Login.jsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import toast, { Toaster } from 'react-hot-toast';
 
 import { 
     Paper, Box, Grid, Checkbox, FormControlLabel, Typography,
@@ -42,7 +43,8 @@ export function Login() {
         },
         validationSchema: LoginSchema,
         onSubmit: (values) => {
-            // alert(JSON.stringify(values, null, 2));
+            toast.success('Bienvenido!!')
+            // toast.error("This didn't work.")
             // return navigate('/dashboard/home')
             auth.login(values)
         },
@@ -68,8 +70,7 @@ export function Login() {
                     sx={{
                         backgroundImage: 'url(https://source.unsplash.com/random)',
                         backgroundRepeat: 'no-repeat',
-                        backgroundColor: (t) =>
-                        t.palette.mode === 'light' ? t.palette.grey[50] : t.palette.grey[900],
+                        backgroundColor: (t) => t.palette.mode === 'light' ? t.palette.grey[50] : t.palette.grey[900],
                         backgroundSize: 'cover',
                         backgroundPosition: 'center',
                     }}
@@ -155,6 +156,10 @@ export function Login() {
                     </Box>
                 </Grid>
             </Grid>
+            <Toaster
+                position="top-left"
+                reverseOrder={false}
+            />
         </ThemeProvider>
     );
 }

+ 3 - 3
src/Pages/Pruebas.jsx

@@ -24,9 +24,9 @@ function Pagination () {
 }
     
 function CardPrueba(props){
-    let {index, prueba} = props
+    let {prueba} = props
     return(
-        <Col className="prueba_item" key={index * 129319023888882} md="3">
+        <Col className="prueba_item" md="3">
             <div className="body_prueba_list">
                 <div className="botones_edicion">
                     <div className="contenedor_botones">
@@ -151,7 +151,7 @@ export function Pruebas() {
                                 {
                                     pruebas.length ?
                                     pruebas.map( 
-                                        (prueba, index) => <CardPrueba prueba={prueba} index={index}/>  
+                                        (prueba, index) => <CardPrueba key={index} prueba={prueba}/>  
                                     )
                                     : undefined
                                 }

+ 13 - 75
src/Pages/Puestos.jsx

@@ -1,6 +1,7 @@
 import React  from 'react';
-import { Row, Col, Button, Table } from 'react-bootstrap'
+import { Row, Col } from 'react-bootstrap'
 import { Box } from '@mui/material';
+import toast, { Toaster } from 'react-hot-toast';
 
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
@@ -21,7 +22,8 @@ import Editar from '../Components/Modal/EditPlaza';
 import Eliminar from '../Components/Modal/EliminarPlaza';
 import Mostrar from '../Components/Modal/MostrarPlaza';
 
-    
+import { ListMode } from '../Components/Puestos/ListMode'
+
 let data = [{
     nombre : 'The standard Lorem Ipsum passage, used since the 1500s',
     description : '"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."',
@@ -35,83 +37,14 @@ function* idMaker() {
         yield index++;
 }
 
+const Success =  () => toast.success('Plaza Agregada!!')
+
 var ID = idMaker(); 
 
 for ( var _ of new Array(46) ){
     data.push({ ...data[0], id : ID.next().value, d : _ })
 }
 
-function ListMode(props) {
-    
-    let { setEdit, setDelete, setShow, setPuesto } = props;
-
-    return(
-        <Col md="12">
-            <div className="body-table">
-                <Table responsive borderless id="tablaproductos">
-                    <thead>
-                        <tr >
-                            <th className="text-center">Nombre de la plaza</th>
-                            <th className="text-center">Descripción</th>
-                            <th className="text-center">Salario</th>
-                            <th className="text-center">Acciones</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-
-                        {
-                            data.length ? 
-                                data.slice( 0,23 ).map( (plaza, i) => {
-                                    return (
-                                        <tr key={plaza.id}>
-                                            <td className="text-center">{  plaza.id +  " - " + plaza.nombre }</td>
-                                            <td className="text-center">{ plaza.description }</td>
-                                            <td className="text-center">{ plaza.salario }</td>
-                                            <td className="actions_butons_plaza"> 
-                                                <Button 
-                                                    onClick={() => {
-                                                        setPuesto(plaza) 
-                                                        setShow(true)
-                                                    }} 
-                                                    className="ver_producto">Ver
-                                                </Button>
-
-                                                <Button 
-                                                    onClick={() => {
-                                                        setPuesto(plaza) 
-                                                        setEdit(true)
-                                                    }} 
-                                                    className="editar_producto">Editar
-                                                </Button>
-                                                <Button 
-                                                    onClick={() => {
-                                                        setPuesto(plaza) 
-                                                        setDelete(true) 
-                                                    }} 
-                                                    className="eliminar_producto">Eliminar
-                                                </Button>
-                                            </td>
-                                        </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>
-    )
-}
-
-
 function GridMode (props) {
     
     let { setEdit, setDelete, setShow, setPuesto } = props;
@@ -253,6 +186,7 @@ export function Puestos() {
                 <div className={`main_list_products ${alignment === 'list' ?  'activar_vista' : 'desactivar_vista'}`} id="list_view_products">
                     <Row>
                         <ListMode 
+                            data={data}
                             setPuesto={setPuesto}
                             setEdit={setEdit}
                             setDelete={setDelete}
@@ -262,12 +196,16 @@ export function Puestos() {
                 </div>
             </div>
 
-            <Express setExpress={setExpress} visible={expres} onClose={() => setExpress(false) } />
-            <Manual setManual={setManual} visible={manual}  onClose={() => setManual(false) } />
+            <Express success={Success} setExpress={setExpress} visible={expres} onClose={() => setExpress(false) } />
+            <Manual success={Success} setManual={setManual} visible={manual}  onClose={() => setManual(false) } />
 
             <Editar  puesto={puesto} visible={edit} onClose={() => setEdit(false)} />
             <Eliminar puesto={puesto} visible={del} onClose={() => setDelete(false)} />
             <Mostrar puesto={puesto} visible={show} onClose={() => setShow(false)} />
+            <Toaster
+                position="bottom-right"
+                reverseOrder={false}
+            />
 
         </div>
     )