change op edit method alternative

src/App.css

@@ -373,7 +373,6 @@
 }
 
 #search_plaza_input{
-  width:200px;
   padding-left:20px !important;
   margin-left:20px !important;
 }

src/Components/Password/Operation.jsx

@@ -1,6 +1,4 @@
 import * as React from 'react';
-
-import { Edit as EditIcon, Send as SendIcon } from '@mui/icons-material'
 import {
   Button, Dialog, DialogActions, DialogContent, //DialogTitle,
   FormControlLabel, Checkbox,
@@ -20,55 +18,18 @@ import { AdapterDateFns as DateFnsUtils } from '@mui/x-date-pickers/AdapterDateF
 import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 
-
-export function Operation(props) {
-
-  let [open, setOpen] = React.useState(false);
-  const handleOpen = (status) => setOpen(status);
-
-  return (
-    <div>
-      <div className="operation_buttons">
-        <EditIcon onClick={() => setOpen(true)} className="icon_op" />
-        <SendIcon className="icon_op" />
-      </div>
-      {
-        open ?
-          <ModalEdit
-            password={props}
-            open={open}
-            handleOpen={handleOpen}
-          />
-          : null
-      }
-    </div>
-  )
-}
-
-function ModalEdit(props) {
-
+export function ModalEdit(props) {
   let { password, open, handleOpen } = props
-  const now = React.useRef(new Date());
   let { pwd, plz } = password
   const auth = useSelector((state) => state.token)
   const getPassword = async () => {
-    let rest = new Service(`/contrasenia/${pwd}/${plz}`)
+    let rest = new Service(`/contrasenia/${btoa(pwd)}/${plz}`)
     return await rest.getQuery(auth.token)
   }
 
   let { data: result } = useQuery('contra', getPassword);
   console.log('PWD INFO ', result)
 
-  let initialValues = {
-    id: result?.data?.id,
-    pwd: result?.data?.pwd,
-    deadpwd: result?.data?.deadpwd ? new Date(result?.data?.deadpwd) : now.current,
-    state: result?.data?.state,
-    dateToActived: result?.data.dateToActived ? new Date(result?.data?.dateToActived) : now.current,
-    plaza_id: result?.data?.plaza_id,
-    candidato_id: result?.data?.candidato_id
-  }
-
   return (
     <Dialog
       open={open}
@@ -78,8 +39,6 @@ function ModalEdit(props) {
     >
       <DialogContent>
         <ModalForm
-          //puestos={puestos}
-          initialValues={initialValues}
           handleOpen={handleOpen}
           token={auth.token}
         />
@@ -140,21 +99,6 @@ function ModalForm(props) {
 
   const { errors, touched, handleSubmit, getFieldProps, values, setValues } = formik;
 
-  function fromBase64(text){
-    try{
-      return atob(text)
-    }catch(_e){
-      return text
-    }
-  }
-
-  React.useEffect(() => {
-    setValues({
-      ...props.initialValues,
-      pwd: props.initialValues.pwd ? fromBase64(props.initialValues.pwd) : 'loading'
-    })
-  }, [props, setValues])
-
   return (
     <FormikProvider value={formik}>
       <Form style={{ padding: 20, maxWidth: 950 }} autoComplete="off" noValidate onSubmit={handleSubmit}>
@@ -193,7 +137,6 @@ function ModalForm(props) {
               }
               label="Activa"
             />
-
           </Stack>
 
 
@@ -239,36 +182,6 @@ function ModalForm(props) {
                 />}
             />
           </LocalizationProvider>
-
-
-          {/*
-                    <Autocomplete
-                        {...getFieldProps('plaza_id')}
-                        onChange={(_a,current_list,_c,_individual,_f) => {
-                            console.log("CURRENT LIST : ",current_list)
-                            setValues({
-                                ...values,
-                                plaza_id:current_list
-                            })
-                        }}
-                        value={props.puestos.filter(p=> p.id=== values.plaza_id ).shift()}
-                        id="combo-box-demo"
-                        options={props.puestos}
-                        isOptionEqualToValue={
-                            (option, value) => option.nombrepuesto === value.nombrepuesto
-                        }
-                        getOptionLabel={(option) => {
-                            return option.nombrepuesto
-                        }}
-                        renderInput={(params) =>
-                            <TextField
-                                {...params}
-                                label="Puesto"
-                            />
-                        }
-                    />
-*/}
-
           <DialogActions>
             <Button onClick={() => props.handleOpen(false)}>
               Cerrar

src/Components/Password/Rows.js

@@ -1,5 +1,3 @@
-import { Operation } from './Operation'
-
 function fromBase64(text){
   try{
     return atob(text)
@@ -10,6 +8,14 @@ function fromBase64(text){
 
 
 export const Encabezados = [
+  {
+    name: 'id',
+    numeric: true,
+    label: 'ID',
+    options:{
+      display:false
+    }
+  },
   {
     name: 'name',
     numeric: false,
@@ -28,16 +34,16 @@ export const Encabezados = [
     disablePadding: true,
     label: 'Fecha vencimiento',
   },
-  {
-    name: 'op',
-    numeric: false,
-    disablePadding: true,
-    label: 'Operación',
-    options: {
-      filter: false,
-      sort: false,
-    }
-  },
+  // {
+  //   name: 'op',
+  //   numeric: false,
+  //   disablePadding: true,
+  //   label: 'Operación',
+  //   options: {
+  //     filter: false,
+  //     sort: false,
+  //   }
+  // },
 ]
 
 export const niveles_educativos = [
@@ -54,13 +60,15 @@ export const niveles_educativos = [
 ]
 
 export function Build(pwds) {
+
   return pwds.map(password => {
+    console.log(password)
     let { pwd, plaza_id } = password
     return {
+      id: plaza_id,
       name: fromBase64( pwd ),//atob( pwd ),
       activacion: new Date().toUTCString(),//dateToActived, 
       dead: new Date().toUTCString(), //deadpwd,
-      op: <Operation plz={plaza_id} pwd={pwd} />
     }
   })
 }

src/Components/Password/Steps/password.jsx

@@ -52,32 +52,33 @@ export function Password(props) {
     <FormikProvider style={{ padding: 25, paddingTop: 5 }} value={formik}>
       <Form autoComplete="off" noValidate onSubmit={handleSubmit}>
         <Stack spacing={3}>
-
-          <TextField
-            value={uid ? uid : btoa(values.pwd)}
-            disabled
-            fullWidth
-            type="text"
-            label="Identificador Codificado"
-            variant="standard"
-          />
-
-          <TextField
-            fullWidth
-            type="text"
-            label="Nombre o identificador"
-            {...getFieldProps('pwd')}
-            onChange={(event) => {
-              let value = event.target.value
-              setUID(btoa(value));
-              setValues({
-                ...values,
-                pwd: value
-              })
-            }}
-            error={Boolean(touched.pwd && errors.pwd)}
-            helperText={touched.pwd && errors.pwd}
-          />
+          <Stack spacing={2}>
+            <TextField
+              fullWidth
+              type="text"
+              label="Nombre o identificador"
+              {...getFieldProps('pwd')}
+              onChange={(event) => {
+                let value = event.target.value
+                setUID(btoa(value));
+                setValues({
+                  ...values,
+                  pwd: value
+                })
+              }}
+              error={Boolean(touched.pwd && errors.pwd)}
+              helperText={touched.pwd && errors.pwd}
+            />
+
+            <TextField
+              value={uid ? uid : btoa(values.pwd)}
+              disabled
+              fullWidth
+              type="text"
+              label="Identificador Codificado"
+              variant="standard"
+            />
+          </Stack>
 
 
           <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>

src/Components/Password/TableStyle.js

@@ -1,71 +1,132 @@
 import { createTheme } from '@mui/material';
 
+
+// MuiTableCell-root MuiTableCell-body MuiTableCell-paddingCheckbox MuiTableCell-sizeMedium tss-12o2szd-MUIDataTableSelectCell-root tss-1fz4yw6-MUIDataTableSelectCell-fixedLeft css-1nf681w-MuiTableCell-root
+
 export const TableStyle = () => createTheme({
-    components: {
-        MUIDataTableToolbar: {
-            styleOverrides: {
-                root: {
-                    paddingLeft: 15
-                }
-            }
-        },
-        MuiPaper: {
-            styleOverrides: {
-                root: {
-                    boxShadow: 'none'
-                }
-            }
+  components: {
 
-        },
-        MUIDataTableBodyCell: {
-            styleOverrides: {
-                root: {
-                    backgroundColor: "#FFF"
-                }
-            }
-        },
-        MuiTablePagination: {
-            styleOverrides: {
-                toolbar: {
-                    paddingTop: 7,
-                    alignItems: 'baseline'
-                }
-            }
+    MuiSvgIcon: {
+      styleOverrides: {
+        root: {
+          color: 'var(--main)'
         }
-    }
-})
+      }
+    },
 
-export const TextLabels = {
-    body: {
-        noMatch: "No se encontró ningún elemento",
-        toolTip: "Ordenar",
-        columnHeaderTooltip: column => `Ordenar por ${column.label}`
+    MUIDataTableSelectCell: {
+      styleOverrides: {
+        root: {
+          backgroundColor: '#FFF'
+        }
+      }
+    },
+    MuiCheckbox: {
+      styleOverrides: {
+        root: {
+          color: 'var(--main)'
+        }
+      }
+    },
+    MuiChecked: {
+      styleOverrides: {
+        root: {
+          color: 'red'
+        }
+      }
+    },
+    MUIDataTableToolbar: {
+      styleOverrides: {
+        root: {
+          paddingLeft: 15
+        }
+      }
     },
-    pagination: {
-        next: "Siguiente Pagina",
-        previous: "Pagina Anterior",
-        rowsPerPage: "Elementos por Página",
-        displayRows: "de",
+    MuiRowSelected: {
+      styleOverrides: {
+        root: {
+          backgroundColor: "#FFF"
+        }
+      }
     },
-    toolbar: {
-        search: "Buscar",
-        downloadCsv: "Descargar CSV",
-        print: "Imprimir",
-        viewColumns: "Seleccionar Columnas",
-        filterTable: "Filtrar Tabla",
+    MuiPaper: {
+      styleOverrides: {
+        root: {
+          boxShadow: 'none'
+        }
+      }
+
     },
-    filter: {
-        all: "Todos",
-        title: "FILTROS",
-        reset: "Limpiar",
+    MUIDataTableSelectedCell: {
+      styleOverrides: {
+        root: {
+          backgroundColor: "#FFF"
+        }
+      }
     },
-    viewColumns: {
-        title: "Mostrar Columnas",
-        titleAria: "Mostrar/Ocultar Columnas",
+    MUITableCell: {
+      styleOverrides: {
+        root: {
+          backgroundColor: "#FFF"
+        }
+      }
     },
-    selectedRows: {
-        text: "Elemento(s) selecionado",
-        delete: "Eliminar",
-        deleteAria: "Eliminar Columnas Seleccionadas",
+    MUIDataTableBodyRow: {
+      styleOverrides: {
+        root: {
+          backgroundColor: "#FFF"
+        }
+      }
     },
+    MUIDataTableBodyCell: {
+      styleOverrides: {
+        root: {
+          backgroundColor: "#FFF"
+        }
+      }
+    },
+    MuiTablePagination: {
+      styleOverrides: {
+        toolbar: {
+          paddingTop: 7,
+          alignItems: 'baseline'
+        }
+      }
+    }
+  }
+})
+
+export const TextLabels = {
+  body: {
+    noMatch: "No se encontró ningún elemento",
+    toolTip: "Ordenar",
+    columnHeaderTooltip: column => `Ordenar por ${column.label}`
+  },
+  pagination: {
+    next: "Siguiente Pagina",
+    previous: "Pagina Anterior",
+    rowsPerPage: "Elementos por Página",
+    displayRows: "de",
+  },
+  toolbar: {
+    search: "Buscar",
+    downloadCsv: "Descargar CSV",
+    print: "Imprimir",
+    viewColumns: "Seleccionar Columnas",
+    filterTable: "Filtrar Tabla",
+  },
+  filter: {
+    all: "Todos",
+    title: "FILTROS",
+    reset: "Limpiar",
+  },
+  viewColumns: {
+    title: "Mostrar Columnas",
+    titleAria: "Mostrar/Ocultar Columnas",
+  },
+  selectedRows: {
+    text: "Elemento(s) selecionado",
+    delete: "Eliminar",
+    deleteAria: "Eliminar Columnas Seleccionadas",
+  },
 }

src/Pages/ContrasV2.jsx

@@ -9,17 +9,21 @@ import { TableStyle, TextLabels } from '../Components/Password/TableStyle'
 import { useQuery } from 'react-query';
 import { Service } from '../Utils/HTTP.js'
 import { useSelector } from 'react-redux';
+import {  ModalEdit } from '../Components/Password/Operation'
 
 export function Contrasv2() {
 
   const auth = useSelector((state) => state.token)
+  const [visible,setVisible] = React.useState(false)
+  const [password,setPassword] = React.useState(null)
 
   const getAllPwd = async () => {
     let rest = new Service('/contrasenia/getallbyidUsr');
     return await rest.getQuery(auth.token)
   }
-  
-  const { data, status  } = useQuery('passwords', getAllPwd );
+
+  const { data, status } = useQuery('passwords', getAllPwd);
+
   const options = {
     filterType: 'checkbox',
     customToolbar: () => {
@@ -27,7 +31,14 @@ export function Contrasv2() {
         <CustomToolbar />
       );
     },
-    textLabels: TextLabels
+    textLabels: TextLabels,
+    onRowClick: (password) => {
+      let [plaza, pwd] = password;
+      setPassword({pwd,plz:plaza});
+      console.log('password: ',password)
+      setVisible(true);
+    },
+    elevation:9
   };
 
   return (
@@ -39,13 +50,23 @@ export function Contrasv2() {
               <MUIDataTable
                 sx={{ '& MuiPaper': { elevation: 0, boxShadow: 'none', color: "red" } }}
                 title={"Contraseñas"}
-                data={Build( status ==='success' ? data.data : [])}
+                data={Build(status === 'success' ? data.data : [])}
                 columns={Encabezados}
                 options={options}
-                />
+              />
             </ThemeProvider>
           </Paper>
         </Box>
+        {
+          password ?
+            (
+              <ModalEdit
+                password={password}
+                open={visible}
+                handleOpen={setVisible}
+              />
+            ): null
+        }
       </div>
     </div>
   );

src/Pages/Home.jsx

@@ -11,7 +11,6 @@ import { useQuery } from 'react-query';
 export function Home() {
 
   const auth = useSelector((state) => state.token)
-  // const profile = useSelector((state) => state.user.profile)
 
   const getAllPwd = async () => {
     let rest = new Service('/contrasenia/getallbyidUsr');