Página inicial Explorar Ajuda
Registrar Entrar
SuperAdminQA
/
psicoadmin
Observar 1
Favorito 0
Fork 0
Código Issues 0 Pull Requests 0 Commits 372 Versões 0 Wiki
Ver código fonte

retorspective modal

amenpunk 3 anos atrás
pai
a1be3b92c6
commit
3d41da18de
10 arquivos alterados com 153 adições e 84 exclusões
Visão unificada Mostrar estatísticas do Diff
  1. 52 0
      package-lock.json
  2. 1 0
      package.json
  3. 1 1
      public/index.html
  4. 2 1
      src/Components/Modal/AgregarExpress.js
  5. 2 1
      src/Components/Modal/AgregarManual.js
  6. 0 0
      src/Components/Puestos/GridMode.jsx
  7. 71 0
      src/Components/Puestos/ListMode.jsx
  8. 8 3
      src/Pages/Login.jsx
  9. 3 3
      src/Pages/Pruebas.jsx
  10. 13 75
      src/Pages/Puestos.jsx

+ 52 - 0
package-lock.json
Ver arquivo

25 
         "react": "^17.0.2",
 25 
         "react": "^17.0.2",
26 
         "react-bootstrap": "^2.0.2",
 26 
         "react-bootstrap": "^2.0.2",
27 
         "react-dom": "^17.0.2",
 27 
         "react-dom": "^17.0.2",
28 
+        "react-hot-toast": "^2.2.0",
28 
         "react-router": "6.2.1",
 29 
         "react-router": "6.2.1",
29 
         "react-router-dom": "6.2.1",
 30 
         "react-router-dom": "6.2.1",
30 
         "react-scripts": "^5.0.0",
 31 
         "react-scripts": "^5.0.0",
15412 
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
 15413 
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
15413 
       "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
 15414 
       "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
15414 
     },
 15415 
     },
15416 
+    "node_modules/react-hot-toast": {
15417 
+      "version": "2.2.0",
15418 
+      "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.2.0.tgz",
15419 
+      "integrity": "sha512-248rXw13uhf/6TNDVzagX+y7R8J183rp7MwUMNkcrBRyHj/jWOggfXTGlM8zAOuh701WyVW+eUaWG2LeSufX9g==",
15420 
+      "dependencies": {
15421 
+        "goober": "^2.1.1"
15422 
+      },
15423 
+      "engines": {
15424 
+        "node": ">=10"
15425 
+      },
15426 
+      "peerDependencies": {
15427 
+        "react": ">=16",
15428 
+        "react-dom": ">=16"
15429 
+      }
15430 
+    },
15431 
+    "node_modules/react-hot-toast/node_modules/csstype": {
15432 
+      "version": "2.6.19",
15433 
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.19.tgz",
15434 
+      "integrity": "sha512-ZVxXaNy28/k3kJg0Fou5MiYpp88j7H9hLZp8PDC3jV0WFjfH5E9xHb56L0W59cPbKbcHXeP4qyT8PrHp8t6LcQ==",
15435 
+      "peer": true
15436 
+    },
15437 
+    "node_modules/react-hot-toast/node_modules/goober": {
15438 
+      "version": "2.1.7",
15439 
+      "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.7.tgz",
15440 
+      "integrity": "sha512-aCR8u3A/tTgSrZAHfJObhYC0xgdKoYm4GvE/UFmxmzgvj3TSF+3oFYWtmJ459WBewjOIoEsoOG81sDs1rn+W5w==",
15441 
+      "peerDependencies": {
15442 
+        "csstype": "^2.6.2"
15443 
+      }
15444 
+    },
15415 
     "node_modules/react-is": {
 15445 
     "node_modules/react-is": {
15416 
       "version": "17.0.2",
 15446 
       "version": "17.0.2",
15417 
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
 15447 
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
29420 
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
 29450 
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
29421 
       "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
 29451 
       "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
29422 
     },
 29452 
     },
29453 
+    "react-hot-toast": {
29454 
+      "version": "2.2.0",
29455 
+      "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.2.0.tgz",
29456 
+      "integrity": "sha512-248rXw13uhf/6TNDVzagX+y7R8J183rp7MwUMNkcrBRyHj/jWOggfXTGlM8zAOuh701WyVW+eUaWG2LeSufX9g==",
29457 
+      "requires": {
29458 
+        "goober": "^2.1.1"
29459 
+      },
29460 
+      "dependencies": {
29461 
+        "csstype": {
29462 
+          "version": "2.6.19",
29463 
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.19.tgz",
29464 
+          "integrity": "sha512-ZVxXaNy28/k3kJg0Fou5MiYpp88j7H9hLZp8PDC3jV0WFjfH5E9xHb56L0W59cPbKbcHXeP4qyT8PrHp8t6LcQ==",
29465 
+          "peer": true
29466 
+        },
29467 
+        "goober": {
29468 
+          "version": "2.1.7",
29469 
+          "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.7.tgz",
29470 
+          "integrity": "sha512-aCR8u3A/tTgSrZAHfJObhYC0xgdKoYm4GvE/UFmxmzgvj3TSF+3oFYWtmJ459WBewjOIoEsoOG81sDs1rn+W5w==",
29471 
+          "requires": {}
29472 
+        }
29473 
+      }
29474 
+    },
29423 
     "react-is": {
 29475 
     "react-is": {
29424 
       "version": "17.0.2",
 29476 
       "version": "17.0.2",
29425 
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
 29477 
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",

+ 1 - 0
package.json
Ver arquivo

21 
     "react": "^17.0.2",
 21 
     "react": "^17.0.2",
22 
     "react-bootstrap": "^2.0.2",
 22 
     "react-bootstrap": "^2.0.2",
23 
     "react-dom": "^17.0.2",
 23 
     "react-dom": "^17.0.2",
24 
+    "react-hot-toast": "^2.2.0",
24 
     "react-router": "6.2.1",
 25 
     "react-router": "6.2.1",
25 
     "react-router-dom": "6.2.1",
 26 
     "react-router-dom": "6.2.1",
26 
     "react-scripts": "^5.0.0",
 27 
     "react-scripts": "^5.0.0",

+ 1 - 1
public/index.html
Ver arquivo

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

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

9
9
10 
 export  default function Express (props) {
 10 
 export  default function Express (props) {
11
11
12 
-    let { visible, onClose } = props
12 
+    let { visible, onClose, success } = props
13
13
14 
     return (
 14 
     return (
15 
         <Modal size="lg" aria-labelledby="contained-modal-title-vcenter" centered  show={visible} onHide={onClose}>
 15 
         <Modal size="lg" aria-labelledby="contained-modal-title-vcenter" centered  show={visible} onHide={onClose}>
25 
                     }}
 25 
                     }}
26 
                     validationSchema={ExpressSchema}
 26 
                     validationSchema={ExpressSchema}
27 
                     onSubmit={ (values) => {
 27 
                     onSubmit={ (values) => {
28 
+                        success();
28 
                         props.setExpress(false)
 29 
                         props.setExpress(false)
29 
                         console.log('VALUES Express >> ',values)
 30 
                         console.log('VALUES Express >> ',values)
30 
                     }}
31 
                     }}

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

26 
     let [ type, setType ] = React.useState(undefined);
 26 
     let [ type, setType ] = React.useState(undefined);
27 
     let [ validType, setValidType ] = React.useState(false);
 27 
     let [ validType, setValidType ] = React.useState(false);
28
28
29 
-    let { visible, onClose } = props
29 
+    let { visible, onClose, success } = props
30 
     const hiddenFileInput = React.useRef(null);
 30 
     const hiddenFileInput = React.useRef(null);
31
31
32 
     const PickFile = event => hiddenFileInput.current.click();
 32 
     const PickFile = event => hiddenFileInput.current.click();
61 
                     validationSchema={NewPlazaSchema}
 61 
                     validationSchema={NewPlazaSchema}
62 
                     onSubmit={ (values) => {
 62 
                     onSubmit={ (values) => {
63 
                         // console.log('VALUES >> ',values)
 63 
                         // console.log('VALUES >> ',values)
64 
+                        success();
64 
                         props.setManual(false)
 65 
                         props.setManual(false)
65 
                     }} >
 66 
                     }} >
66
67

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


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

1 
+import {  Col, Button, Table } from 'react-bootstrap'
2 
+
3 
+export function ListMode(props) {
4 
+
5 
+    let { setEdit, setDelete, setShow, setPuesto, data } = props;
6 
+
7 
+    return(
8 
+        <Col md="12">
9 
+            <div className="body-table">
10 
+                <Table responsive borderless id="tablaproductos">
11 
+                    <thead>
12 
+                        <tr >
13 
+                            <th className="text-center">Nombre de la plaza</th>
14 
+                            <th className="text-center">Descripción</th>
15 
+                            <th className="text-center">Salario</th>
16 
+                            <th className="text-center">Acciones</th>
17 
+                        </tr>
18 
+                    </thead>
19 
+                    <tbody>
20 
+
21 
+                        {
22 
+                            data.length ?
23 
+                                data.slice( 0,23 ).map( (plaza, i) => {
24 
+                                    return (
25 
+                                        <tr key={plaza.id}>
26 
+                                            <td className="text-center">{  plaza.id +  " - " + plaza.nombre }</td>
27 
+                                            <td className="text-center">{ plaza.description }</td>
28 
+                                            <td className="text-center">{ plaza.salario }</td>
29 
+                                            <td className="actions_butons_plaza">
30 
+                                                <Button
31 
+                                                    onClick={() => {
32 
+                                                        setPuesto(plaza)
33 
+                                                        setShow(true)
34 
+                                                    }}
35 
+                                                    className="ver_producto">Ver
36 
+                                                </Button>
37 
+
38 
+                                                <Button
39 
+                                                    onClick={() => {
40 
+                                                        setPuesto(plaza)
41 
+                                                        setEdit(true)
42 
+                                                    }}
43 
+                                                    className="editar_producto">Editar
44 
+                                                </Button>
45 
+                                                <Button
46 
+                                                    onClick={() => {
47 
+                                                        setPuesto(plaza)
48 
+                                                        setDelete(true)
49 
+                                                    }}
50 
+                                                    className="eliminar_producto">Eliminar
51 
+                                                </Button>
52 
+                                            </td>
53 
+                                        </tr>
54 
+                                    )
55 
+                                }) : undefined
56 
+                        }
57 
+
58 
+                    </tbody>
59 
+                    <tfoot>
60 
+                        <tr>
61 
+                            <th>Nombre de la plaza</th>
62 
+                            <th>Descripción</th>
63 
+                            <th>Salario</th>
64 
+                            <th>Acciones</th>
65 
+                        </tr>
66 
+                    </tfoot>
67 
+                </Table>
68 
+            </div>
69 
+        </Col>
70 
+    )
71 
+}

+ 8 - 3
src/Pages/Login.jsx
Ver arquivo

1 
 import * as React from 'react';
 1 
 import * as React from 'react';
2 
+import toast, { Toaster } from 'react-hot-toast';
2
3
3 
 import {
4 
 import {
4 
     Paper, Box, Grid, Checkbox, FormControlLabel, Typography,
 5 
     Paper, Box, Grid, Checkbox, FormControlLabel, Typography,
42 
         },
 43 
         },
43 
         validationSchema: LoginSchema,
 44 
         validationSchema: LoginSchema,
44 
         onSubmit: (values) => {
 45 
         onSubmit: (values) => {
45 
-            // alert(JSON.stringify(values, null, 2));
46 
+            toast.success('Bienvenido!!')
47 
+            // toast.error("This didn't work.")
46 
             // return navigate('/dashboard/home')
 48 
             // return navigate('/dashboard/home')
47 
             auth.login(values)
 49 
             auth.login(values)
48 
         },
 50 
         },
68 
                     sx={{
 70 
                     sx={{
69 
                         backgroundImage: 'url(https://source.unsplash.com/random)',
 71 
                         backgroundImage: 'url(https://source.unsplash.com/random)',
70 
                         backgroundRepeat: 'no-repeat',
 72 
                         backgroundRepeat: 'no-repeat',
71 
-                        backgroundColor: (t) =>
72 
-                        t.palette.mode === 'light' ? t.palette.grey[50] : t.palette.grey[900],
73 
+                        backgroundColor: (t) => t.palette.mode === 'light' ? t.palette.grey[50] : t.palette.grey[900],
73 
                         backgroundSize: 'cover',
 74 
                         backgroundSize: 'cover',
74 
                         backgroundPosition: 'center',
 75 
                         backgroundPosition: 'center',
75 
                     }}
 76 
                     }}
155 
                     </Box>
 156 
                     </Box>
156 
                 </Grid>
 157 
                 </Grid>
157 
             </Grid>
 158 
             </Grid>
159 
+            <Toaster
160 
+                position="top-left"
161 
+                reverseOrder={false}
162 
+            />
158 
         </ThemeProvider>
 163 
         </ThemeProvider>
159 
     );
 164 
     );
160 
 }
 165 
 }

+ 3 - 3
src/Pages/Pruebas.jsx
Ver arquivo

24 
 }
 24 
 }
25
25
26 
 function CardPrueba(props){
 26 
 function CardPrueba(props){
27 
-    let {index, prueba} = props
27 
+    let {prueba} = props
28 
     return(
 28 
     return(
29 
-        <Col className="prueba_item" key={index * 129319023888882} md="3">
29 
+        <Col className="prueba_item" md="3">
30 
             <div className="body_prueba_list">
 30 
             <div className="body_prueba_list">
31 
                 <div className="botones_edicion">
 31 
                 <div className="botones_edicion">
32 
                     <div className="contenedor_botones">
 32 
                     <div className="contenedor_botones">
151 
                                 {
 151 
                                 {
152 
                                     pruebas.length ?
 152 
                                     pruebas.length ?
153 
                                     pruebas.map(
153 
                                     pruebas.map(
154 
-                                        (prueba, index) => <CardPrueba prueba={prueba} index={index}/>
154 
+                                        (prueba, index) => <CardPrueba key={index} prueba={prueba}/>
155 
                                     )
 155 
                                     )
156 
                                     : undefined
 156 
                                     : undefined
157 
                                 }
 157 
                                 }

+ 13 - 75
src/Pages/Puestos.jsx
Ver arquivo

1 
 import React  from 'react';
 1 
 import React  from 'react';
2 
-import { Row, Col, Button, Table } from 'react-bootstrap'
2 
+import { Row, Col } from 'react-bootstrap'
3 
 import { Box } from '@mui/material';
 3 
 import { Box } from '@mui/material';
4 
+import toast, { Toaster } from 'react-hot-toast';
4
5
5 
 import ToggleButton from '@mui/material/ToggleButton';
 6 
 import ToggleButton from '@mui/material/ToggleButton';
6 
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 7 
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
21 
 import Eliminar from '../Components/Modal/EliminarPlaza';
 22 
 import Eliminar from '../Components/Modal/EliminarPlaza';
22 
 import Mostrar from '../Components/Modal/MostrarPlaza';
 23 
 import Mostrar from '../Components/Modal/MostrarPlaza';
23
24
24 
-
25 
+import { ListMode } from '../Components/Puestos/ListMode'
26 
+
25 
 let data = [{
 27 
 let data = [{
26 
     nombre : 'The standard Lorem Ipsum passage, used since the 1500s',
 28 
     nombre : 'The standard Lorem Ipsum passage, used since the 1500s',
27 
     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."',
 29 
     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 
         yield index++;
 37 
         yield index++;
36 
 }
 38 
 }
37
39
40 
+const Success =  () => toast.success('Plaza Agregada!!')
41 
+
38 
 var ID = idMaker();
42 
 var ID = idMaker();
39
43
40 
 for ( var _ of new Array(46) ){
 44 
 for ( var _ of new Array(46) ){
41 
     data.push({ ...data[0], id : ID.next().value, d : _ })
 45 
     data.push({ ...data[0], id : ID.next().value, d : _ })
42 
 }
 46 
 }
43
47
44 
-function ListMode(props) {
45 
-
46 
-    let { setEdit, setDelete, setShow, setPuesto } = props;
47 
-
48 
-    return(
49 
-        <Col md="12">
50 
-            <div className="body-table">
51 
-                <Table responsive borderless id="tablaproductos">
52 
-                    <thead>
53 
-                        <tr >
54 
-                            <th className="text-center">Nombre de la plaza</th>
55 
-                            <th className="text-center">Descripción</th>
56 
-                            <th className="text-center">Salario</th>
57 
-                            <th className="text-center">Acciones</th>
58 
-                        </tr>
59 
-                    </thead>
60 
-                    <tbody>
61 
-
62 
-                        {
63 
-                            data.length ?
64 
-                                data.slice( 0,23 ).map( (plaza, i) => {
65 
-                                    return (
66 
-                                        <tr key={plaza.id}>
67 
-                                            <td className="text-center">{  plaza.id +  " - " + plaza.nombre }</td>
68 
-                                            <td className="text-center">{ plaza.description }</td>
69 
-                                            <td className="text-center">{ plaza.salario }</td>
70 
-                                            <td className="actions_butons_plaza">
71 
-                                                <Button
72 
-                                                    onClick={() => {
73 
-                                                        setPuesto(plaza)
74 
-                                                        setShow(true)
75 
-                                                    }}
76 
-                                                    className="ver_producto">Ver
77 
-                                                </Button>
78 
-
79 
-                                                <Button
80 
-                                                    onClick={() => {
81 
-                                                        setPuesto(plaza)
82 
-                                                        setEdit(true)
83 
-                                                    }}
84 
-                                                    className="editar_producto">Editar
85 
-                                                </Button>
86 
-                                                <Button
87 
-                                                    onClick={() => {
88 
-                                                        setPuesto(plaza)
89 
-                                                        setDelete(true)
90 
-                                                    }}
91 
-                                                    className="eliminar_producto">Eliminar
92 
-                                                </Button>
93 
-                                            </td>
94 
-                                        </tr>
95 
-                                    )
96 
-                                }) : undefined
97 
-                        }
98 
-
99 
-                    </tbody>
100 
-                    <tfoot>
101 
-                        <tr>
102 
-                            <th>Nombre de la plaza</th>
103 
-                            <th>Descripción</th>
104 
-                            <th>Salario</th>
105 
-                            <th>Acciones</th>
106 
-                        </tr>
107 
-                    </tfoot>
108 
-                </Table>
109 
-            </div>
110 
-        </Col>
111 
-    )
112 
-}
113 
-
114 
-
115 
 function GridMode (props) {
 48 
 function GridMode (props) {
116
49
117 
     let { setEdit, setDelete, setShow, setPuesto } = props;
 50 
     let { setEdit, setDelete, setShow, setPuesto } = props;
253 
                 <div className={`main_list_products ${alignment === 'list' ?  'activar_vista' : 'desactivar_vista'}`} id="list_view_products">
 186 
                 <div className={`main_list_products ${alignment === 'list' ?  'activar_vista' : 'desactivar_vista'}`} id="list_view_products">
254 
                     <Row>
 187 
                     <Row>
255 
                         <ListMode
188 
                         <ListMode
189 
+                            data={data}
256 
                             setPuesto={setPuesto}
 190 
                             setPuesto={setPuesto}
257 
                             setEdit={setEdit}
 191 
                             setEdit={setEdit}
258 
                             setDelete={setDelete}
 192 
                             setDelete={setDelete}
262 
                 </div>
 196 
                 </div>
263 
             </div>
 197 
             </div>
264
198
265 
-            <Express setExpress={setExpress} visible={expres} onClose={() => setExpress(false) } />
266 
-            <Manual setManual={setManual} visible={manual}  onClose={() => setManual(false) } />
199 
+            <Express success={Success} setExpress={setExpress} visible={expres} onClose={() => setExpress(false) } />
200 
+            <Manual success={Success} setManual={setManual} visible={manual}  onClose={() => setManual(false) } />
267
201
268 
             <Editar  puesto={puesto} visible={edit} onClose={() => setEdit(false)} />
 202 
             <Editar  puesto={puesto} visible={edit} onClose={() => setEdit(false)} />
269 
             <Eliminar puesto={puesto} visible={del} onClose={() => setDelete(false)} />
 203 
             <Eliminar puesto={puesto} visible={del} onClose={() => setDelete(false)} />
270 
             <Mostrar puesto={puesto} visible={show} onClose={() => setShow(false)} />
 204 
             <Mostrar puesto={puesto} visible={show} onClose={() => setShow(false)} />
205 
+            <Toaster
206 
+                position="bottom-right"
207 
+                reverseOrder={false}
208 
+            />
271
209
272 
         </div>
 210 
         </div>
273 
     )
 211 
     )