Ana Sayfa Keşfet Yardım
Üye Ol Giriş Yap
SuperAdminQA
/
psicoadmin
İzle 1
Yıldızla 0
Çatalla 0
Kod Sorunlar 0 Değişiklik İstekleri 0 İşlemeler 372 Sürümler 0 Wiki
Kaynağa Gözat

retorspective modal

amenpunk 3 yıl önce
ebeveyn
a1be3b92c6
işleme
3d41da18de
10 değiştirilmiş dosya ile 153 ekleme ve 84 silme
Görünümü Böl Farklılık Durumunu Göster
  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
Dosyayı Görüntüle 

@@ -25,6 +25,7 @@
25 25 
         "react": "^17.0.2",
26 26 
         "react-bootstrap": "^2.0.2",
27 27 
         "react-dom": "^17.0.2",
28 
+        "react-hot-toast": "^2.2.0",
28 29 
         "react-router": "6.2.1",
29 30 
         "react-router-dom": "6.2.1",
30 31 
         "react-scripts": "^5.0.0",
 
@@ -15412,6 +15413,35 @@
15412 15413 
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
15413 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 15445 
     "node_modules/react-is": {
15416 15446 
       "version": "17.0.2",
15417 15447 
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
 
@@ -29420,6 +29450,28 @@
29420 29450 
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
29421 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 29475 
     "react-is": {
29424 29476 
       "version": "17.0.2",
29425 29477 
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",

+ 1 - 0
package.json
Dosyayı Görüntüle 

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

+ 1 - 1
public/index.html
Dosyayı Görüntüle 

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

+ 2 - 1
src/Components/Modal/AgregarExpress.js
Dosyayı Görüntüle 

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

+ 2 - 1
src/Components/Modal/AgregarManual.js
Dosyayı Görüntüle 

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

+ 0 - 0
src/Components/Puestos/GridMode.jsx
Dosyayı Görüntüle


+ 71 - 0
src/Components/Puestos/ListMode.jsx
Dosyayı Görüntüle 

@@ -0,0 +1,71 @@
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
Dosyayı Görüntüle 

@@ -1,4 +1,5 @@
1 1 
 import * as React from 'react';
2 
+import toast, { Toaster } from 'react-hot-toast';
2 3
3 4 
 import {
4 5 
     Paper, Box, Grid, Checkbox, FormControlLabel, Typography,
 
@@ -42,7 +43,8 @@ export function Login() {
42 43 
         },
43 44 
         validationSchema: LoginSchema,
44 45 
         onSubmit: (values) => {
45 
-            // alert(JSON.stringify(values, null, 2));
46 
+            toast.success('Bienvenido!!')
47 
+            // toast.error("This didn't work.")
46 48 
             // return navigate('/dashboard/home')
47 49 
             auth.login(values)
48 50 
         },
 
@@ -68,8 +70,7 @@ export function Login() {
68 70 
                     sx={{
69 71 
                         backgroundImage: 'url(https://source.unsplash.com/random)',
70 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 74 
                         backgroundSize: 'cover',
74 75 
                         backgroundPosition: 'center',
75 76 
                     }}
 
@@ -155,6 +156,10 @@ export function Login() {
155 156 
                     </Box>
156 157 
                 </Grid>
157 158 
             </Grid>
159 
+            <Toaster
160 
+                position="top-left"
161 
+                reverseOrder={false}
162 
+            />
158 163 
         </ThemeProvider>
159 164 
     );
160 165 
 }

+ 3 - 3
src/Pages/Pruebas.jsx
Dosyayı Görüntüle 

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

+ 13 - 75
src/Pages/Puestos.jsx
Dosyayı Görüntüle 

@@ -1,6 +1,7 @@
1 1 
 import React  from 'react';
2 
-import { Row, Col, Button, Table } from 'react-bootstrap'
2 
+import { Row, Col } from 'react-bootstrap'
3 3 
 import { Box } from '@mui/material';
4 
+import toast, { Toaster } from 'react-hot-toast';
4 5
5 6 
 import ToggleButton from '@mui/material/ToggleButton';
6 7 
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 
@@ -21,7 +22,8 @@ import Editar from '../Components/Modal/EditPlaza';
21 22 
 import Eliminar from '../Components/Modal/EliminarPlaza';
22 23 
 import Mostrar from '../Components/Modal/MostrarPlaza';
23 24
24 
-
25 
+import { ListMode } from '../Components/Puestos/ListMode'
26 
+
25 27 
 let data = [{
26 28 
     nombre : 'The standard Lorem Ipsum passage, used since the 1500s',
27 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,83 +37,14 @@ function* idMaker() {
35 37 
         yield index++;
36 38 
 }
37 39
40 
+const Success =  () => toast.success('Plaza Agregada!!')
41 
+
38 42 
 var ID = idMaker();
39 43
40 44 
 for ( var _ of new Array(46) ){
41 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 48 
 function GridMode (props) {
116 49
117 50 
     let { setEdit, setDelete, setShow, setPuesto } = props;
 
@@ -253,6 +186,7 @@ export function Puestos() {
253 186 
                 <div className={`main_list_products ${alignment === 'list' ?  'activar_vista' : 'desactivar_vista'}`} id="list_view_products">
254 187 
                     <Row>
255 188 
                         <ListMode
189 
+                            data={data}
256 190 
                             setPuesto={setPuesto}
257 191 
                             setEdit={setEdit}
258 192 
                             setDelete={setDelete}
 
@@ -262,12 +196,16 @@ export function Puestos() {
262 196 
                 </div>
263 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 202 
             <Editar  puesto={puesto} visible={edit} onClose={() => setEdit(false)} />
269 203 
             <Eliminar puesto={puesto} visible={del} onClose={() => setDelete(false)} />
270 204 
             <Mostrar puesto={puesto} visible={show} onClose={() => setShow(false)} />
205 
+            <Toaster
206 
+                position="bottom-right"
207 
+                reverseOrder={false}
208 
+            />
271 209
272 210 
         </div>
273 211 
     )